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

Comparing version 1.0.24 to 1.0.25

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";const 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{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";const 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,this.class="dialog",this.closeOnBlur=!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"))}onBlur(e){this.closeOnBlur&&e.target.classList.contains(this.class)&&this.onClose()}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}" @blur="${e=>this.onBlur(e)}"><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:String})],IxDialog.prototype,"class",void 0),__decorate([property({type:Boolean})],IxDialog.prototype,"closeOnBlur",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/IxDialog.d.ts

@@ -15,2 +15,4 @@ import { LitElement } from 'lit';
     open: boolean;
+    class: string;
+    closeOnBlur: boolean;
     onOpen(): void;
@@ -21,3 +23,4 @@ onOpened(): void;
     onCancel(): void;
+    onBlur(e: any): void;
     render(): import("lit").TemplateResult<1>;
 }

dist/IxDialog.js

@@ -10,2 +10,5 @@ import { __decorate } from "tslib";
         this.open = false;
+        // eslint-disable-next-line lit/no-native-attributes
+        this.class = 'dialog';
+        this.closeOnBlur = false;
     }
@@ -27,2 +30,7 @@ onOpen() {
     }
+    onBlur(e) {
+        if (this.closeOnBlur && e.target.classList.contains(this.class)) {
+            this.onClose();
+        }
+    }
     render() {
@@ -38,2 +46,3 @@ return html `
         @cancel=${this.onCancel}
+        @blur=${(e) => this.onBlur(e)}
       >
@@ -62,2 +71,8 @@ <slot slot="headline" name="headline"></slot>
 ], IxDialog.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], IxDialog.prototype, "class", void 0);
+__decorate([
+    property({ type: Boolean })
+], IxDialog.prototype, "closeOnBlur", void 0);
 //# sourceMappingURL=IxDialog.js.map

package.json

@@ -6,3 +6,3 @@ {
   "author": "Digital Realty",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "type": "module",
@@ -103,3 +103,3 @@ "main": "dist/index.js",
   ],
-  "gitHead": "c7668fda980293ca038c0dd061ebe350fa88ee60"
+  "gitHead": "6ad19c520cf84d186998597c33cfa8bf38c71583"
 }

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

33718

increased by4.97%

Lines of code

416

increased by5.05%

No dependency changes