@digital-realty/ix-dialog - npm Package Compare versions

Comparing version 1.0.27 to 1.0.28

dist/ix-dialog.min.js

@@ -1,1 +0,1 @@
-import{css,LitElement,html}from"lit";import{__decorate}from"tslib";import{query,property}from"lit/decorators.js";import{Dialog}from"@material/web/dialog/internal/dialog.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";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:flex}::backdrop{background:0 0}.scrim{background:var(--ix-scrim-color,#000);display:none;inset:0;opacity:var(--ix-scrim-opacity,50%);pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}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:hidden;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}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(){this.dispatchEvent(new Event("cancel"))}render(){return html`<md-dialog ?open="${this.open}" class="dialog" @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);class IxDialogStyled extends IxDialog{}IxDialogStyled.styles=css`:host,:host :root,:root{font-size:var(--ix-dialog-font-size,.875rem);line-height:var(--ix-dialog-line-height,1.25rem)}.dialog{max-height:90vh;max-width:90vw;background:red;font-size:var(--ix-dialog-font-size,.875rem);line-height:var(--ix-dialog-line-height,1.25rem)}`,window.customElements.define("ix-dialog",IxDialogStyled);export{IxDialogStyled};
+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.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(){this.nextClickIsFromContent?this.nextClickIsFromContent=!1: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:a,headline:n,content:s,actions:l}=this;if(i&&o&&a&&n&&s&&l){var{container:r,dialog:d,scrim:h,headline:c,content:p,actions:m}=e,g=[];for(let[e,t]of[[i,null!=d?d:[]],[o,null!=h?h:[]],[a,null!=r?r:[]],[n,null!=c?c:[]],[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({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:flex}::backdrop{background:0 0}.scrim{background:var(--ix-scrim-color,#000);display:none;inset:0;opacity:var(--ix-scrim-opacity,50%);pointer-events:none;position:fixed;z-index:1}:host([open]) .scrim{display:flex}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:hidden;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}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(){this.dispatchEvent(new Event("cancel"))}render(){return html`<md-dialog ?open="${this.open}" class="dialog" @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);class IxDialogStyled extends IxDialog{}IxDialogStyled.styles=css`:host,:host :root,:root{font-size:var(--ix-dialog-font-size,.875rem);line-height:var(--ix-dialog-line-height,1.25rem)}.dialog{max-height:90vh;max-width:90vw;background:red;font-size:var(--ix-dialog-font-size,.875rem);line-height:var(--ix-dialog-line-height,1.25rem)}`,window.customElements.define("ix-dialog",IxDialogStyled);export{IxDialogStyled};

dist/md-dialog.d.ts

 import { CSSResultOrNative } from 'lit';
-import { Dialog } from '@material/web/dialog/internal/dialog.js';
+import { Dialog } from './internal/dialog.js';
 export declare const styles: import("lit").CSSResult;
@@ -4,0 +4,0 @@ export declare class MdDialog extends Dialog {

dist/md-dialog.js

 import { css } from 'lit';
-import { Dialog } from '@material/web/dialog/internal/dialog.js';
+import { Dialog } from './internal/dialog.js';
 export const styles = css `
@@ -4,0 +4,0 @@ :host {

package.json

@@ -6,3 +6,3 @@ {
   "author": "Digital Realty",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "type": "module",
@@ -104,3 +104,3 @@ "main": "dist/index.js",
   ],
-  "gitHead": "80632b6c60601c7d2e720cb7260f233f004a3fb1"
+  "gitHead": "dc83d7ba595b824274ec44de0918b5b826fcd3ed"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84305

increased by8.15%

Lines of code

958

increased by2.68%

No dependency changes