@digital-realty/ix-dialog 1.1.14 → 1.1.16

package/dist/ix-dialog.min.js

@@ -1 +1 @@
-import{LitElement,isServer,html,nothing,css}from"lit";import{__decorate}from"tslib";import{property,query,state}from"lit/decorators.js";import"@material/web/divider/divider.js";import{classMap}from"lit/directives/class-map.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";import{redispatchEvent}from"@material/web/internal/events/redispatch-event.js";import{DIALOG_DEFAULT_OPEN_ANIMATION,DIALOG_DEFAULT_CLOSE_ANIMATION}from"@material/web/dialog/internal/animations.js";class Dialog extends LitElement{get open(){return this.isOpen}set open(e){e!==this.isOpen&&((this.isOpen=e)?(this.setAttribute("open",""),this.show()):(this.removeAttribute("open"),this.close()))}constructor(){super(),this.preventCloseOnScrimClick=!1,this.returnValue="",this.getOpenAnimation=()=>DIALOG_DEFAULT_OPEN_ANIMATION,this.getCloseAnimation=()=>DIALOG_DEFAULT_CLOSE_ANIMATION,this.isOpen=!1,this.isOpening=!1,this.isConnectedPromise=this.getIsConnectedPromise(),this.isAtScrollTop=!1,this.isAtScrollBottom=!1,this.nextClickIsFromContent=!1,this.hasHeadline=!1,this.hasActions=!1,this.hasIcon=!1,this.escapePressedWithoutCancel=!1,isServer||(this.addEventListener("submit",this.handleSubmit),this.addEventListener("focus",()=>{var e;null!=(e=this.dialog)&&e.focus()}),this.addEventListener("blur",()=>{var e;null!=(e=this.dialog)&&e.blur()}))}async show(){this.isOpening=!0,await this.isConnectedPromise,await this.updateComplete;var e=this.dialog;e.open||!this.isOpening?this.isOpening=!1:!this.dispatchEvent(new Event("open",{cancelable:!0}))?this.open=!1:(e.showModal(),this.open=!0,this.scroller&&(this.scroller.scrollTop=0),null!=(e=this.querySelector("[autofocus]"))&&e.focus(),await this.animateDialog(this.getOpenAnimation()),this.dispatchEvent(new Event("opened")),this.isOpening=!1)}async close(e=this.returnValue){var t,i;this.isOpening=!1,!this.isConnected||(await this.updateComplete,!(t=this.dialog).open)||this.isOpening?this.open=!1:(i=this.returnValue,this.returnValue=e,!this.dispatchEvent(new Event("close",{cancelable:!0}))?this.returnValue=i:(await this.animateDialog(this.getCloseAnimation()),t.close(e),this.open=!1,this.dispatchEvent(new Event("closed"))))}connectedCallback(){super.connectedCallback(),this.isConnectedPromiseResolve()}disconnectedCallback(){super.disconnectedCallback(),this.isConnectedPromise=this.getIsConnectedPromise()}render(){var e=this.open&&!(this.isAtScrollTop&&this.isAtScrollBottom),e={"has-headline":this.hasHeadline,"has-actions":this.hasActions,"has-icon":this.hasIcon,scrollable:e,"show-top-divider":e&&!this.isAtScrollTop,"show-bottom-divider":e&&!this.isAtScrollBottom},t=this.ariaLabel;return html`<div class="scrim"></div><dialog class="${classMap(e)}" aria-label="${t||nothing}" aria-labelledby="${this.hasHeadline?"headline":nothing}" role="${"alert"===this.type?"alertdialog":nothing}" @cancel="${this.handleCancel}" @click="${this.handleDialogClick}" @close="${this.handleClose}" @keydown="${this.handleKeydown}" .returnValue="${this.returnValue||nothing}"><div class="container" @mousedown="${this.handleContentClick}"><div class="headline"><div class="icon" aria-hidden="true"><slot name="icon" @slotchange="${this.handleIconChange}"></slot></div><h2 id="headline" aria-hidden="${!this.hasHeadline||nothing}"><slot name="headline" @slotchange="${this.handleHeadlineChange}"></slot></h2><md-divider></md-divider></div><div class="scroller"><div class="content"><div class="top anchor"></div><slot name="content"></slot><div class="bottom anchor"></div></div></div><div class="actions"><md-divider></md-divider><slot name="actions" @slotchange="${this.handleActionsChange}"></slot></div></div></dialog>`}firstUpdated(){this.intersectionObserver=new IntersectionObserver(e=>{for(var t of e)this.handleAnchorIntersection(t)},{root:this.scroller}),this.intersectionObserver.observe(this.topAnchor),this.intersectionObserver.observe(this.bottomAnchor)}handleDialogClick(e){var t=this.container;e.composedPath().includes(t)||(this.nextClickIsFromContent?this.nextClickIsFromContent=!1:!this.preventCloseOnScrimClick&&this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.close())}handleContentClick(){this.nextClickIsFromContent=!0}handleSubmit(e){var t=e.submitter;"dialog"===e.target.method&&t&&this.close(null!=(e=t.getAttribute("value"))?e:this.returnValue)}handleCancel(e){var t;e.target!==this.dialog||(this.escapePressedWithoutCancel=!1,t=!redispatchEvent(this,e),e.preventDefault(),t)||this.close()}handleClose(){var e;this.escapePressedWithoutCancel&&(this.escapePressedWithoutCancel=!1,null!=(e=this.dialog))&&e.dispatchEvent(new Event("cancel",{cancelable:!0}))}handleKeydown(e){"Escape"===e.key&&(this.escapePressedWithoutCancel=!0,setTimeout(()=>{this.escapePressedWithoutCancel=!1}))}async animateDialog(e){var{dialog:i,scrim:o,container:n,headline:a,content:s,actions:l}=this;if(i&&o&&n&&a&&s&&l){var{container:r,dialog:d,scrim:c,headline:h,content:p,actions:m}=e,g=[];for(let[e,t]of[[i,null!=d?d:[]],[o,null!=c?c:[]],[n,null!=r?r:[]],[a,null!=h?h:[]],[s,null!=p?p:[]],[l,null!=m?m:[]]])for(var v of t)g.push(e.animate(...v));await Promise.all(g.map(e=>e.finished))}}handleHeadlineChange(e){e=e.target;this.hasHeadline=0<e.assignedElements().length}handleActionsChange(e){e=e.target;this.hasActions=0<e.assignedElements().length}handleIconChange(e){e=e.target;this.hasIcon=0<e.assignedElements().length}handleAnchorIntersection(e){var{target:e,isIntersecting:t}=e;e===this.topAnchor&&(this.isAtScrollTop=t),e===this.bottomAnchor&&(this.isAtScrollBottom=t)}getIsConnectedPromise(){return new Promise(e=>{this.isConnectedPromiseResolve=e})}}requestUpdateOnAriaChange(Dialog),__decorate([property({type:Boolean})],Dialog.prototype,"open",null),__decorate([property({type:Boolean})],Dialog.prototype,"preventCloseOnScrimClick",void 0),__decorate([property({attribute:!1})],Dialog.prototype,"returnValue",void 0),__decorate([property()],Dialog.prototype,"type",void 0),__decorate([query("dialog")],Dialog.prototype,"dialog",void 0),__decorate([query(".scrim")],Dialog.prototype,"scrim",void 0),__decorate([query(".container")],Dialog.prototype,"container",void 0),__decorate([query(".headline")],Dialog.prototype,"headline",void 0),__decorate([query(".content")],Dialog.prototype,"content",void 0),__decorate([query(".actions")],Dialog.prototype,"actions",void 0),__decorate([state()],Dialog.prototype,"isAtScrollTop",void 0),__decorate([state()],Dialog.prototype,"isAtScrollBottom",void 0),__decorate([query(".scroller")],Dialog.prototype,"scroller",void 0),__decorate([query(".top.anchor")],Dialog.prototype,"topAnchor",void 0),__decorate([query(".bottom.anchor")],Dialog.prototype,"bottomAnchor",void 0),__decorate([state()],Dialog.prototype,"hasHeadline",void 0),__decorate([state()],Dialog.prototype,"hasActions",void 0),__decorate([state()],Dialog.prototype,"hasIcon",void 0);let styles=css`:host{border-start-start-radius:var(--md-dialog-container-shape-start-start,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));border-start-end-radius:var(--md-dialog-container-shape-start-end,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));border-end-end-radius:var(--md-dialog-container-shape-end-end,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));border-end-start-radius:var(--md-dialog-container-shape-end-start,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;box-shadow:0 12px 16px 0 rgba(0,0,0,.58);flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:0;overflow:visible;padding:0;width:inherit}dialog[open]{display:block}::backdrop{background:rgba(0,0,0,.5)}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--md-dialog-headline-color,var(--md-sys-color-on-surface,#1d1b20));display:flex;flex-direction:column;font-family:var(--md-dialog-headline-font,var(--md-sys-typescale-headline-small-font,var(--md-ref-typeface-brand,Roboto)));font-size:var(--md-dialog-headline-size,var(--md-sys-typescale-headline-small-size,1.5rem));line-height:var(--md-dialog-headline-line-height,var(--md-sys-typescale-headline-small-line-height,2rem));font-weight:var(--md-dialog-headline-weight,var(--md-sys-typescale-headline-small-weight,var(--md-ref-typeface-weight-regular,400)));position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--md-dialog-icon-color,var(--md-sys-color-secondary,#625b71));fill:currentColor;font-size:var(--md-dialog-icon-size,24px);margin-top:24px;height:var(--md-dialog-icon-size,24px);width:var(--md-dialog-icon-size,24px)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--md-dialog-container-color,var(--md-sys-color-surface-container-high,#ece6f0));border-radius:inherit;content:'';inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:initial;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--md-dialog-supporting-text-color,var(--md-sys-color-on-surface-variant,#49454f));font-family:var(--md-dialog-supporting-text-font,var(--md-sys-typescale-body-medium-font,var(--md-ref-typeface-plain,Roboto)));font-size:var(--md-dialog-supporting-text-size,var(--md-sys-typescale-body-medium-size,.875rem));line-height:var(--md-dialog-supporting-text-line-height,var(--md-sys-typescale-body-medium-line-height,1.25rem));font-weight:var(--md-dialog-supporting-text-weight,var(--md-sys-typescale-body-medium-weight,var(--md-ref-typeface-weight-regular,400)));height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-actions.show-bottom-divider .actions md-divider,.has-headline.show-top-divider .headline md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media (forced-colors:active){dialog{outline:2px solid WindowText}}`;class MdDialog extends Dialog{}MdDialog.styles=[styles],window.customElements.define("md-dialog",MdDialog);class IxDialog extends LitElement{constructor(){super(...arguments),this.open=!1,this.preventCancel=!1,this.preventCloseOnScrimClick=!1}onOpen(){this.dispatchEvent(new Event("open"))}onOpened(){this.dispatchEvent(new Event("opened"))}onClose(){this.dispatchEvent(new Event("close"))}onClosed(){this.dispatchEvent(new Event("closed"))}onCancel(e){this.preventCancel&&e.preventDefault(),this.dispatchEvent(new Event("cancel"))}render(){return html`<md-dialog ?open="${this.open}" class="dialog" ?preventCloseOnScrimClick="${this.preventCloseOnScrimClick}" @open="${this.onOpen}" @opened="${this.onOpened}" @close="${this.onClose}" @closed="${this.onClosed}" @cancel="${this.onCancel}"><slot slot="headline" name="headline"></slot><slot slot="content" name="content"></slot><slot slot="actions" name="actions"></slot></md-dialog>`}}requestUpdateOnAriaChange(IxDialog),IxDialog.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},__decorate([query(".dialog")],IxDialog.prototype,"component",void 0),__decorate([property({type:Boolean,reflect:!0})],IxDialog.prototype,"open",void 0),__decorate([property({type:Boolean,attribute:"prevent-cancel"})],IxDialog.prototype,"preventCancel",void 0),__decorate([property({type:Boolean})],IxDialog.prototype,"preventCloseOnScrimClick",void 0);class IxDialogStyled extends IxDialog{}IxDialogStyled.styles=css`.dialog{max-height:90vh;max-width:90vw}`,window.customElements.define("ix-dialog",IxDialogStyled);export{IxDialogStyled};
+import{LitElement,isServer,nothing,html,css}from"lit";import{__decorate}from"tslib";import{property,query,state}from"lit/decorators.js";import"@material/web/divider/divider.js";import{classMap}from"lit/directives/class-map.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";import{redispatchEvent}from"@material/web/internal/events/redispatch-event.js";import{DIALOG_DEFAULT_OPEN_ANIMATION,DIALOG_DEFAULT_CLOSE_ANIMATION}from"@material/web/dialog/internal/animations.js";class Dialog extends LitElement{get open(){return this.isOpen}set open(e){e!==this.isOpen&&((this.isOpen=e)?(this.setAttribute("open",""),this.show()):(this.removeAttribute("open"),this.close()))}constructor(){super(),this.preventCloseOnScrimClick=!1,this.returnValue="",this.getOpenAnimation=()=>DIALOG_DEFAULT_OPEN_ANIMATION,this.getCloseAnimation=()=>DIALOG_DEFAULT_CLOSE_ANIMATION,this.isOpen=!1,this.isOpening=!1,this.isConnectedPromise=this.getIsConnectedPromise(),this.isAtScrollTop=!1,this.isAtScrollBottom=!1,this.nextClickIsFromContent=!1,this.hasHeadline=!1,this.hasActions=!1,this.hasIcon=!1,this.escapePressedWithoutCancel=!1,isServer||(this.addEventListener("submit",this.handleSubmit),this.addEventListener("focus",()=>{var e;null!=(e=this.dialog)&&e.focus()}),this.addEventListener("blur",()=>{var e;null!=(e=this.dialog)&&e.blur()}))}async show(){this.isOpening=!0,await this.isConnectedPromise,await this.updateComplete;var e=this.dialog;e.open||!this.isOpening?this.isOpening=!1:!this.dispatchEvent(new Event("open",{cancelable:!0}))?this.open=!1:(e.showModal(),this.open=!0,this.scroller&&(this.scroller.scrollTop=0),null!=(e=this.querySelector("[autofocus]"))&&e.focus(),await this.animateDialog(this.getOpenAnimation()),this.dispatchEvent(new Event("opened")),this.isOpening=!1)}async close(e=this.returnValue){var t,i;this.isOpening=!1,!this.isConnected||(await this.updateComplete,!(t=this.dialog).open)||this.isOpening?this.open=!1:(i=this.returnValue,this.returnValue=e,!this.dispatchEvent(new Event("close",{cancelable:!0}))?this.returnValue=i:(await this.animateDialog(this.getCloseAnimation()),t.close(e),this.open=!1,this.dispatchEvent(new Event("closed"))))}connectedCallback(){super.connectedCallback(),this.isConnectedPromiseResolve()}disconnectedCallback(){super.disconnectedCallback(),this.isConnectedPromise=this.getIsConnectedPromise()}render(){var e=this.open&&!(this.isAtScrollTop&&this.isAtScrollBottom),e={"has-headline":this.hasHeadline,"has-actions":this.hasActions,"has-icon":this.hasIcon,scrollable:e,"show-top-divider":e&&!this.isAtScrollTop,"show-bottom-divider":e&&!this.isAtScrollBottom},t=this.ariaLabel;return html`<div class="scrim"></div><dialog class="${classMap(e)}" aria-label="${t||nothing}" aria-labelledby="${this.hasHeadline?"headline":nothing}" role="${"alert"===this.type?"alertdialog":nothing}" @cancel="${this.handleCancel}" @click="${this.handleDialogClick}" @close="${this.handleClose}" @keydown="${this.handleKeydown}" .returnValue="${this.returnValue||nothing}"><div class="container" @mousedown="${this.handleContentClick}"><div class="headline"><div class="icon" aria-hidden="true"><slot name="icon" @slotchange="${this.handleIconChange}"></slot></div><h2 id="headline" aria-hidden="${!this.hasHeadline||nothing}"><slot name="headline" @slotchange="${this.handleHeadlineChange}"></slot></h2><md-divider></md-divider></div><div class="scroller"><div class="content"><div class="top anchor"></div><slot name="content"></slot><div class="bottom anchor"></div></div></div><div class="actions"><md-divider></md-divider><slot name="actions" @slotchange="${this.handleActionsChange}"></slot></div></div></dialog>`}firstUpdated(){this.intersectionObserver=new IntersectionObserver(e=>{for(var t of e)this.handleAnchorIntersection(t)},{root:this.scroller}),this.intersectionObserver.observe(this.topAnchor),this.intersectionObserver.observe(this.bottomAnchor)}handleDialogClick(e){var t=this.container;e.composedPath().includes(t)||(this.nextClickIsFromContent?this.nextClickIsFromContent=!1:!this.preventCloseOnScrimClick&&this.dispatchEvent(new Event("cancel",{cancelable:!0}))&&this.close())}handleContentClick(){this.nextClickIsFromContent=!0}handleSubmit(e){var t=e.submitter;"dialog"===e.target.method&&t&&this.close(null!=(e=t.getAttribute("value"))?e:this.returnValue)}handleCancel(e){var t;e.target!==this.dialog||(this.escapePressedWithoutCancel=!1,t=!redispatchEvent(this,e),e.preventDefault(),t)||this.close()}handleClose(){var e;this.escapePressedWithoutCancel&&(this.escapePressedWithoutCancel=!1,null!=(e=this.dialog))&&e.dispatchEvent(new Event("cancel",{cancelable:!0}))}handleKeydown(e){"Escape"===e.key&&(this.escapePressedWithoutCancel=!0,setTimeout(()=>{this.escapePressedWithoutCancel=!1}))}async animateDialog(e){var{dialog:i,scrim:o,container:n,headline:a,content:s,actions:l}=this;if(i&&o&&n&&a&&s&&l){var{container:r,dialog:d,scrim:c,headline:h,content:p,actions:m}=e,g=[];for(let[e,t]of[[i,null!=d?d:[]],[o,null!=c?c:[]],[n,null!=r?r:[]],[a,null!=h?h:[]],[s,null!=p?p:[]],[l,null!=m?m:[]]])for(var v of t)g.push(e.animate(...v));await Promise.all(g.map(e=>e.finished))}}handleHeadlineChange(e){e=e.target;this.hasHeadline=0<e.assignedElements().length}handleActionsChange(e){e=e.target;this.hasActions=0<e.assignedElements().length}handleIconChange(e){e=e.target;this.hasIcon=0<e.assignedElements().length}handleAnchorIntersection(e){var{target:e,isIntersecting:t}=e;e===this.topAnchor&&(this.isAtScrollTop=t),e===this.bottomAnchor&&(this.isAtScrollBottom=t)}getIsConnectedPromise(){return new Promise(e=>{this.isConnectedPromiseResolve=e})}}requestUpdateOnAriaChange(Dialog),__decorate([property({type:Boolean})],Dialog.prototype,"open",null),__decorate([property({type:Boolean})],Dialog.prototype,"preventCloseOnScrimClick",void 0),__decorate([property({attribute:!1})],Dialog.prototype,"returnValue",void 0),__decorate([property()],Dialog.prototype,"type",void 0),__decorate([query("dialog")],Dialog.prototype,"dialog",void 0),__decorate([query(".scrim")],Dialog.prototype,"scrim",void 0),__decorate([query(".container")],Dialog.prototype,"container",void 0),__decorate([query(".headline")],Dialog.prototype,"headline",void 0),__decorate([query(".content")],Dialog.prototype,"content",void 0),__decorate([query(".actions")],Dialog.prototype,"actions",void 0),__decorate([state()],Dialog.prototype,"isAtScrollTop",void 0),__decorate([state()],Dialog.prototype,"isAtScrollBottom",void 0),__decorate([query(".scroller")],Dialog.prototype,"scroller",void 0),__decorate([query(".top.anchor")],Dialog.prototype,"topAnchor",void 0),__decorate([query(".bottom.anchor")],Dialog.prototype,"bottomAnchor",void 0),__decorate([state()],Dialog.prototype,"hasHeadline",void 0),__decorate([state()],Dialog.prototype,"hasActions",void 0),__decorate([state()],Dialog.prototype,"hasIcon",void 0);let styles=css`:host{border-start-start-radius:var(--md-dialog-container-shape-start-start,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));border-start-end-radius:var(--md-dialog-container-shape-start-end,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));border-end-end-radius:var(--md-dialog-container-shape-end-end,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));border-end-start-radius:var(--md-dialog-container-shape-end-start,var(--md-dialog-container-shape,var(--md-sys-shape-corner-extra-large,28px)));display:contents;margin:auto;max-height:min(560px,100% - 48px);max-width:min(560px,100% - 48px);min-height:140px;min-width:280px;position:fixed;height:fit-content;width:fit-content}dialog{background:rgba(0,0,0,0);border:none;border-radius:inherit;box-shadow:0 12px 16px 0 rgba(0,0,0,.58);flex-direction:column;height:inherit;margin:inherit;max-height:inherit;max-width:inherit;min-height:inherit;min-width:inherit;outline:0;overflow:visible;padding:0;width:inherit}dialog[open]{display:block}::backdrop{background:rgba(0,0,0,.5)}h2{all:unset;align-self:stretch}.headline{align-items:center;color:var(--md-dialog-headline-color,var(--md-sys-color-on-surface,#1d1b20));display:flex;flex-direction:column;font-family:var(--md-dialog-headline-font,var(--md-sys-typescale-headline-small-font,var(--md-ref-typeface-brand,Roboto)));font-size:var(--md-dialog-headline-size,var(--md-sys-typescale-headline-small-size,1.5rem));line-height:var(--md-dialog-headline-line-height,var(--md-sys-typescale-headline-small-line-height,2rem));font-weight:var(--md-dialog-headline-weight,var(--md-sys-typescale-headline-small-weight,var(--md-ref-typeface-weight-regular,400)));position:relative}slot[name=headline]::slotted(*){align-items:center;align-self:stretch;box-sizing:border-box;display:flex;gap:8px;padding:24px 24px 0}.icon{display:flex}slot[name=icon]::slotted(*){color:var(--md-dialog-icon-color,var(--md-sys-color-secondary,#625b71));fill:currentColor;font-size:var(--md-dialog-icon-size,24px);margin-top:24px;height:var(--md-dialog-icon-size,24px);width:var(--md-dialog-icon-size,24px)}.has-icon slot[name=headline]::slotted(*){justify-content:center;padding-top:16px}.scrollable slot[name=headline]::slotted(*){padding-bottom:16px}.scrollable.has-headline slot[name=content]::slotted(*){padding-top:8px}.container{border-radius:inherit;display:flex;flex-direction:column;flex-grow:1;overflow:hidden;position:relative;transform-origin:top}.container::before{background:var(--md-dialog-container-color,var(--md-sys-color-surface-container-high,#ece6f0));border-radius:inherit;content:'';inset:0;position:absolute}.scroller{display:flex;flex:1;flex-direction:column;overflow:initial;z-index:1}.scrollable .scroller{overflow-y:scroll}.content{color:var(--clr-on-surface,#092241);font-family:var(--text-default-font,sans-serif);font-size:var(--text-default-size,16px);letter-spacing:var(--text-default-letter-spacing,.0275em);line-height:var(--text-default-line-height,1.75em);font-weight:var(--text-default-weight,normal);text-transform:var(--text-default-decoration,none);text-decoration:var(--text-default-transform,none);height:min-content;position:relative}slot[name=content]::slotted(*){box-sizing:border-box;padding:24px}.anchor{position:absolute}.top.anchor{top:0}.bottom.anchor{bottom:0}.actions{position:relative}slot[name=actions]::slotted(*){box-sizing:border-box;display:flex;gap:8px;justify-content:flex-end;padding:16px 24px 24px}.has-actions slot[name=content]::slotted(*){padding-bottom:8px}md-divider{display:none;position:absolute}.has-actions.show-bottom-divider .actions md-divider,.has-headline.show-top-divider .headline md-divider{display:flex}.headline md-divider{bottom:0}.actions md-divider{top:0}@media (forced-colors:active){dialog{outline:2px solid WindowText}}`;class MdDialog extends Dialog{}MdDialog.styles=[styles],window.customElements.define("md-dialog",MdDialog);class IxDialog extends LitElement{constructor(){super(...arguments),this.open=!1,this.preventCancel=!1,this.preventCloseOnScrimClick=!1}onOpen(){this.dispatchEvent(new Event("open"))}onOpened(){this.dispatchEvent(new Event("opened"))}onClose(){this.dispatchEvent(new Event("close"))}onClosed(){this.dispatchEvent(new Event("closed"))}onCancel(e){this.preventCancel&&e.preventDefault(),this.dispatchEvent(new Event("cancel"))}render(){return html`<md-dialog ?open="${this.open}" class="dialog" ?preventCloseOnScrimClick="${this.preventCloseOnScrimClick}" @open="${this.onOpen}" @opened="${this.onOpened}" @close="${this.onClose}" @closed="${this.onClosed}" @cancel="${this.onCancel}"><slot slot="headline" name="headline"></slot><slot slot="content" name="content"></slot><slot slot="actions" name="actions"></slot></md-dialog>`}}requestUpdateOnAriaChange(IxDialog),IxDialog.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},__decorate([query(".dialog")],IxDialog.prototype,"component",void 0),__decorate([property({type:Boolean,reflect:!0})],IxDialog.prototype,"open",void 0),__decorate([property({type:Boolean,attribute:"prevent-cancel"})],IxDialog.prototype,"preventCancel",void 0),__decorate([property({type:Boolean})],IxDialog.prototype,"preventCloseOnScrimClick",void 0);class IxDialogStyled extends IxDialog{}IxDialogStyled.styles=css`.dialog{max-height:90vh;max-width:90vw}`,window.customElements.define("ix-dialog",IxDialogStyled);export{IxDialogStyled};

package/dist/md-dialog.js

@@ -174,32 +174,14 @@ export const styles = css `
   }
 
   .content {
-    color: var(
-      --md-dialog-supporting-text-color,
-      var(--md-sys-color-on-surface-variant, #49454f)
-    );
-    font-family: var(
-      --md-dialog-supporting-text-font,
-      var(
-        --md-sys-typescale-body-medium-font,
-        var(--md-ref-typeface-plain, Roboto)
-      )
-    );
-    font-size: var(
-      --md-dialog-supporting-text-size,
-      var(--md-sys-typescale-body-medium-size, 0.875rem)
-    );
-    line-height: var(
-      --md-dialog-supporting-text-line-height,
-      var(--md-sys-typescale-body-medium-line-height, 1.25rem)
-    );
-    font-weight: var(
-      --md-dialog-supporting-text-weight,
-      var(
-        --md-sys-typescale-body-medium-weight,
-        var(--md-ref-typeface-weight-regular, 400)
-      )
-    );
+    color: var(--clr-on-surface, #092241);
+    font-family: var(--text-default-font, sans-serif);
+    font-size: var(--text-default-size, 16px);
+    letter-spacing: var(--text-default-letter-spacing, 0.0275em);
+    line-height: var(--text-default-line-height, 1.75em);
+    font-weight: var(--text-default-weight, normal);
+    text-transform: var(--text-default-decoration, none);
+    text-decoration: var(--text-default-transform, none);
     height: min-content;
     position: relative;
   }

package/dist/md-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"md-dialog.js","sourceRoot":"","sources":["../src/md-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,GAAG,EAAE,MAAM,KAAK,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoQxB,CAAC;AAEF,MAAM,OAAO,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAwB,CAAC,MAAM,CAAC,CAAC;AAGzD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["import { CSSResultOrNative, css } from 'lit';\n\nimport { Dialog } from './internal/dialog.js';\n\nexport const styles = css`\n  :host {\n    border-start-start-radius: var(\n      --md-dialog-container-shape-start-start,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    border-start-end-radius: var(\n      --md-dialog-container-shape-start-end,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    border-end-end-radius: var(\n      --md-dialog-container-shape-end-end,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    border-end-start-radius: var(\n      --md-dialog-container-shape-end-start,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    display: contents;\n    margin: auto;\n    max-height: min(560px, 100% - 48px);\n    max-width: min(560px, 100% - 48px);\n    min-height: 140px;\n    min-width: 280px;\n    position: fixed;\n    height: fit-content;\n    width: fit-content;\n  }\n\n  dialog {\n    background: rgba(0, 0, 0, 0);\n    border: none;\n    border-radius: inherit;\n    box-shadow: 0px 12px 16px 0px rgba(0, 0, 0, 0.58);\n    flex-direction: column;\n    height: inherit;\n    margin: inherit;\n    max-height: inherit;\n    max-width: inherit;\n    min-height: inherit;\n    min-width: inherit;\n    outline: none;\n    overflow: visible;\n    padding: 0;\n    width: inherit;\n  }\n\n  dialog[open] {\n    display: block;\n  }\n\n  ::backdrop {\n    background: rgba(0, 0, 0, 0.5);\n  }\n\n  h2 {\n    all: unset;\n    align-self: stretch;\n  }\n\n  .headline {\n    align-items: center;\n    color: var(\n      --md-dialog-headline-color,\n      var(--md-sys-color-on-surface, #1d1b20)\n    );\n    display: flex;\n    flex-direction: column;\n    font-family: var(\n      --md-dialog-headline-font,\n      var(\n        --md-sys-typescale-headline-small-font,\n        var(--md-ref-typeface-brand, Roboto)\n      )\n    );\n    font-size: var(\n      --md-dialog-headline-size,\n      var(--md-sys-typescale-headline-small-size, 1.5rem)\n    );\n    line-height: var(\n      --md-dialog-headline-line-height,\n      var(--md-sys-typescale-headline-small-line-height, 2rem)\n    );\n    font-weight: var(\n      --md-dialog-headline-weight,\n      var(\n        --md-sys-typescale-headline-small-weight,\n        var(--md-ref-typeface-weight-regular, 400)\n      )\n    );\n    position: relative;\n  }\n\n  slot[name='headline']::slotted(*) {\n    align-items: center;\n    align-self: stretch;\n    box-sizing: border-box;\n    display: flex;\n    gap: 8px;\n    padding: 24px 24px 0;\n  }\n\n  .icon {\n    display: flex;\n  }\n\n  slot[name='icon']::slotted(*) {\n    color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));\n    fill: currentColor;\n    font-size: var(--md-dialog-icon-size, 24px);\n    margin-top: 24px;\n    height: var(--md-dialog-icon-size, 24px);\n    width: var(--md-dialog-icon-size, 24px);\n  }\n\n  .has-icon slot[name='headline']::slotted(*) {\n    justify-content: center;\n    padding-top: 16px;\n  }\n\n  .scrollable slot[name='headline']::slotted(*) {\n    padding-bottom: 16px;\n  }\n\n  .scrollable.has-headline slot[name='content']::slotted(*) {\n    padding-top: 8px;\n  }\n\n  .container {\n    border-radius: inherit;\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    overflow: hidden;\n    position: relative;\n    transform-origin: top;\n  }\n\n  .container::before {\n    background: var(\n      --md-dialog-container-color,\n      var(--md-sys-color-surface-container-high, #ece6f0)\n    );\n    border-radius: inherit;\n    content: '';\n    inset: 0;\n    position: absolute;\n  }\n\n  .scroller {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    overflow: initial;\n    z-index: 1;\n  }\n\n  .scrollable .scroller {\n    overflow-y: scroll;\n  }\n\n  .content {\n    color: var(\n      --md-dialog-supporting-text-color,\n      var(--md-sys-color-on-surface-variant, #49454f)\n    );\n    font-family: var(\n      --md-dialog-supporting-text-font,\n      var(\n        --md-sys-typescale-body-medium-font,\n        var(--md-ref-typeface-plain, Roboto)\n      )\n    );\n    font-size: var(\n      --md-dialog-supporting-text-size,\n      var(--md-sys-typescale-body-medium-size, 0.875rem)\n    );\n    line-height: var(\n      --md-dialog-supporting-text-line-height,\n      var(--md-sys-typescale-body-medium-line-height, 1.25rem)\n    );\n    font-weight: var(\n      --md-dialog-supporting-text-weight,\n      var(\n        --md-sys-typescale-body-medium-weight,\n        var(--md-ref-typeface-weight-regular, 400)\n      )\n    );\n    height: min-content;\n    position: relative;\n  }\n\n  slot[name='content']::slotted(*) {\n    box-sizing: border-box;\n    padding: 24px;\n  }\n\n  .anchor {\n    position: absolute;\n  }\n\n  .top.anchor {\n    top: 0;\n  }\n\n  .bottom.anchor {\n    bottom: 0;\n  }\n\n  .actions {\n    position: relative;\n  }\n\n  slot[name='actions']::slotted(*) {\n    box-sizing: border-box;\n    display: flex;\n    gap: 8px;\n    justify-content: flex-end;\n    padding: 16px 24px 24px;\n  }\n\n  .has-actions slot[name='content']::slotted(*) {\n    padding-bottom: 8px;\n  }\n\n  md-divider {\n    display: none;\n    position: absolute;\n  }\n\n  .has-headline.show-top-divider .headline md-divider,\n  .has-actions.show-bottom-divider .actions md-divider {\n    display: flex;\n  }\n\n  .headline md-divider {\n    bottom: 0;\n  }\n\n  .actions md-divider {\n    top: 0;\n  }\n\n  @media (forced-colors: active) {\n    dialog {\n      outline: 2px solid WindowText;\n    }\n  }\n`;\n\nexport class MdDialog extends Dialog {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n\nwindow.customElements.define('md-dialog', MdDialog);\n"]}
+{"version":3,"file":"md-dialog.js","sourceRoot":"","sources":["../src/md-dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,GAAG,EAAE,MAAM,KAAK,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkPxB,CAAC;AAEF,MAAM,OAAO,QAAS,SAAQ,MAAM;;AAClB,eAAM,GAAwB,CAAC,MAAM,CAAC,CAAC;AAGzD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["import { CSSResultOrNative, css } from 'lit';\n\nimport { Dialog } from './internal/dialog.js';\n\nexport const styles = css`\n  :host {\n    border-start-start-radius: var(\n      --md-dialog-container-shape-start-start,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    border-start-end-radius: var(\n      --md-dialog-container-shape-start-end,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    border-end-end-radius: var(\n      --md-dialog-container-shape-end-end,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    border-end-start-radius: var(\n      --md-dialog-container-shape-end-start,\n      var(\n        --md-dialog-container-shape,\n        var(--md-sys-shape-corner-extra-large, 28px)\n      )\n    );\n    display: contents;\n    margin: auto;\n    max-height: min(560px, 100% - 48px);\n    max-width: min(560px, 100% - 48px);\n    min-height: 140px;\n    min-width: 280px;\n    position: fixed;\n    height: fit-content;\n    width: fit-content;\n  }\n\n  dialog {\n    background: rgba(0, 0, 0, 0);\n    border: none;\n    border-radius: inherit;\n    box-shadow: 0px 12px 16px 0px rgba(0, 0, 0, 0.58);\n    flex-direction: column;\n    height: inherit;\n    margin: inherit;\n    max-height: inherit;\n    max-width: inherit;\n    min-height: inherit;\n    min-width: inherit;\n    outline: none;\n    overflow: visible;\n    padding: 0;\n    width: inherit;\n  }\n\n  dialog[open] {\n    display: block;\n  }\n\n  ::backdrop {\n    background: rgba(0, 0, 0, 0.5);\n  }\n\n  h2 {\n    all: unset;\n    align-self: stretch;\n  }\n\n  .headline {\n    align-items: center;\n    color: var(\n      --md-dialog-headline-color,\n      var(--md-sys-color-on-surface, #1d1b20)\n    );\n    display: flex;\n    flex-direction: column;\n    font-family: var(\n      --md-dialog-headline-font,\n      var(\n        --md-sys-typescale-headline-small-font,\n        var(--md-ref-typeface-brand, Roboto)\n      )\n    );\n    font-size: var(\n      --md-dialog-headline-size,\n      var(--md-sys-typescale-headline-small-size, 1.5rem)\n    );\n    line-height: var(\n      --md-dialog-headline-line-height,\n      var(--md-sys-typescale-headline-small-line-height, 2rem)\n    );\n    font-weight: var(\n      --md-dialog-headline-weight,\n      var(\n        --md-sys-typescale-headline-small-weight,\n        var(--md-ref-typeface-weight-regular, 400)\n      )\n    );\n    position: relative;\n  }\n\n  slot[name='headline']::slotted(*) {\n    align-items: center;\n    align-self: stretch;\n    box-sizing: border-box;\n    display: flex;\n    gap: 8px;\n    padding: 24px 24px 0;\n  }\n\n  .icon {\n    display: flex;\n  }\n\n  slot[name='icon']::slotted(*) {\n    color: var(--md-dialog-icon-color, var(--md-sys-color-secondary, #625b71));\n    fill: currentColor;\n    font-size: var(--md-dialog-icon-size, 24px);\n    margin-top: 24px;\n    height: var(--md-dialog-icon-size, 24px);\n    width: var(--md-dialog-icon-size, 24px);\n  }\n\n  .has-icon slot[name='headline']::slotted(*) {\n    justify-content: center;\n    padding-top: 16px;\n  }\n\n  .scrollable slot[name='headline']::slotted(*) {\n    padding-bottom: 16px;\n  }\n\n  .scrollable.has-headline slot[name='content']::slotted(*) {\n    padding-top: 8px;\n  }\n\n  .container {\n    border-radius: inherit;\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    overflow: hidden;\n    position: relative;\n    transform-origin: top;\n  }\n\n  .container::before {\n    background: var(\n      --md-dialog-container-color,\n      var(--md-sys-color-surface-container-high, #ece6f0)\n    );\n    border-radius: inherit;\n    content: '';\n    inset: 0;\n    position: absolute;\n  }\n\n  .scroller {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    overflow: initial;\n    z-index: 1;\n  }\n\n  .scrollable .scroller {\n    overflow-y: scroll;\n  }\n\n  .content {\n    color: var(--clr-on-surface, #092241);\n    font-family: var(--text-default-font, sans-serif);\n    font-size: var(--text-default-size, 16px);\n    letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n    line-height: var(--text-default-line-height, 1.75em);\n    font-weight: var(--text-default-weight, normal);\n    text-transform: var(--text-default-decoration, none);\n    text-decoration: var(--text-default-transform, none);\n    height: min-content;\n    position: relative;\n  }\n\n  slot[name='content']::slotted(*) {\n    box-sizing: border-box;\n    padding: 24px;\n  }\n\n  .anchor {\n    position: absolute;\n  }\n\n  .top.anchor {\n    top: 0;\n  }\n\n  .bottom.anchor {\n    bottom: 0;\n  }\n\n  .actions {\n    position: relative;\n  }\n\n  slot[name='actions']::slotted(*) {\n    box-sizing: border-box;\n    display: flex;\n    gap: 8px;\n    justify-content: flex-end;\n    padding: 16px 24px 24px;\n  }\n\n  .has-actions slot[name='content']::slotted(*) {\n    padding-bottom: 8px;\n  }\n\n  md-divider {\n    display: none;\n    position: absolute;\n  }\n\n  .has-headline.show-top-divider .headline md-divider,\n  .has-actions.show-bottom-divider .actions md-divider {\n    display: flex;\n  }\n\n  .headline md-divider {\n    bottom: 0;\n  }\n\n  .actions md-divider {\n    top: 0;\n  }\n\n  @media (forced-colors: active) {\n    dialog {\n      outline: 2px solid WindowText;\n    }\n  }\n`;\n\nexport class MdDialog extends Dialog {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n\nwindow.customElements.define('md-dialog', MdDialog);\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-dialog following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -27,7 +27,7 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-select": "^1.1.10",
+    "@digital-realty/ix-select": "^1.1.11",
     "@lit/react": "^1.0.2",
     "@material/web": "1.2.0",
     "lit": "^3.2.1",
@@ -102,5 +102,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "a781e30ec63dcc3307d86b94e35fa93c4e61f22f"
+  "gitHead": "f1066e8649b7ac6845593b591b9e2f7eb905053c"
 }