@digital-realty/ix-dialog 1.0.23 → 1.0.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/IxDialog.d.ts +3 -0
- package/dist/IxDialog.js +15 -0
- package/dist/IxDialog.js.map +1 -1
- package/dist/ix-dialog.min.js +1 -0
- package/package.json +7 -3
package/dist/IxDialog.d.ts
CHANGED
|
@@ -12,10 +12,13 @@ export declare class IxDialog extends LitElement {
|
|
|
12
12
|
};
|
|
13
13
|
readonly component: Dialog;
|
|
14
14
|
open: boolean;
|
|
15
|
+
class: string;
|
|
16
|
+
closeOnBlur: boolean;
|
|
15
17
|
onOpen(): void;
|
|
16
18
|
onOpened(): void;
|
|
17
19
|
onClose(): void;
|
|
18
20
|
onClosed(): void;
|
|
19
21
|
onCancel(): void;
|
|
22
|
+
onBlur(e: any): void;
|
|
20
23
|
render(): import("lit").TemplateResult<1>;
|
|
21
24
|
}
|
package/dist/IxDialog.js
CHANGED
|
@@ -7,6 +7,9 @@ export class IxDialog extends LitElement {
|
|
|
7
7
|
constructor() {
|
|
8
8
|
super(...arguments);
|
|
9
9
|
this.open = false;
|
|
10
|
+
// eslint-disable-next-line lit/no-native-attributes
|
|
11
|
+
this.class = 'dialog';
|
|
12
|
+
this.closeOnBlur = false;
|
|
10
13
|
}
|
|
11
14
|
onOpen() {
|
|
12
15
|
this.dispatchEvent(new Event('open'));
|
|
@@ -23,6 +26,11 @@ export class IxDialog extends LitElement {
|
|
|
23
26
|
onCancel() {
|
|
24
27
|
this.dispatchEvent(new Event('cancel'));
|
|
25
28
|
}
|
|
29
|
+
onBlur(e) {
|
|
30
|
+
if (this.closeOnBlur && e.target.classList.contains(this.class)) {
|
|
31
|
+
this.onClose();
|
|
32
|
+
}
|
|
33
|
+
}
|
|
26
34
|
render() {
|
|
27
35
|
return html `
|
|
28
36
|
<md-dialog
|
|
@@ -33,6 +41,7 @@ export class IxDialog extends LitElement {
|
|
|
33
41
|
@close=${this.onClose}
|
|
34
42
|
@closed=${this.onClosed}
|
|
35
43
|
@cancel=${this.onCancel}
|
|
44
|
+
@blur=${(e) => this.onBlur(e)}
|
|
36
45
|
>
|
|
37
46
|
<slot slot="headline" name="headline"></slot>
|
|
38
47
|
<slot slot="content" name="content"></slot>
|
|
@@ -56,4 +65,10 @@ __decorate([
|
|
|
56
65
|
__decorate([
|
|
57
66
|
property({ type: Boolean, reflect: true })
|
|
58
67
|
], IxDialog.prototype, "open", void 0);
|
|
68
|
+
__decorate([
|
|
69
|
+
property({ type: String })
|
|
70
|
+
], IxDialog.prototype, "class", void 0);
|
|
71
|
+
__decorate([
|
|
72
|
+
property({ type: Boolean })
|
|
73
|
+
], IxDialog.prototype, "closeOnBlur", void 0);
|
|
59
74
|
//# sourceMappingURL=IxDialog.js.map
|
package/dist/IxDialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxDialog.js","sourceRoot":"","sources":["../src/IxDialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAEpF,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAc8C,SAAI,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"IxDialog.js","sourceRoot":"","sources":["../src/IxDialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AAEpF,MAAM,OAAO,QAAS,SAAQ,UAAU;IAAxC;;QAc8C,SAAI,GAAG,KAAK,CAAC;QAEzD,oDAAoD;QACxB,UAAK,GAAG,QAAQ,CAAC;QAEhB,gBAAW,GAAG,KAAK,CAAC;IA+CnD,CAAC;IA7CC,MAAM;QACJ,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACxC,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,OAAO;QACL,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACzC,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM,CAAC,CAAM;QACX,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC/D,IAAI,CAAC,OAAO,EAAE,CAAC;SAChB;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,IAAI;;gBAET,IAAI,CAAC,MAAM;kBACT,IAAI,CAAC,QAAQ;iBACd,IAAI,CAAC,OAAO;kBACX,IAAI,CAAC,QAAQ;kBACb,IAAI,CAAC,QAAQ;gBACf,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;;;;;;;KAOrC,CAAC;IACJ,CAAC;;AAhED;IACE,yBAAyB,CAAC,QAAQ,CAAC,CAAC;AACtC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,0BAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,CAAC;AAGF;IADC,KAAK,CAAC,SAAS,CAAC;2CACW;AAEgB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAc;AAG7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAkB;AAEhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAqB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport './md-dialog.js';\nimport { Dialog } from '@material/web/dialog/internal/dialog.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\n\nexport class IxDialog extends LitElement {\n static {\n requestUpdateOnAriaChange(IxDialog);\n }\n\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @query('.dialog')\n readonly component!: Dialog;\n\n @property({ type: Boolean, reflect: true }) open = false;\n\n // eslint-disable-next-line lit/no-native-attributes\n @property({ type: String }) class = 'dialog';\n\n @property({ type: Boolean }) closeOnBlur = false;\n\n onOpen() {\n this.dispatchEvent(new Event('open'));\n }\n\n onOpened() {\n this.dispatchEvent(new Event('opened'));\n }\n\n onClose() {\n this.dispatchEvent(new Event('close'));\n }\n\n onClosed() {\n this.dispatchEvent(new Event('closed'));\n }\n\n onCancel() {\n this.dispatchEvent(new Event('cancel'));\n }\n\n onBlur(e: any) {\n if (this.closeOnBlur && e.target.classList.contains(this.class)) {\n this.onClose();\n }\n }\n\n render() {\n return html`\n <md-dialog\n ?open=${this.open}\n class=\"dialog\"\n @open=${this.onOpen}\n @opened=${this.onOpened}\n @close=${this.onClose}\n @closed=${this.onClosed}\n @cancel=${this.onCancel}\n @blur=${(e: any) => this.onBlur(e)}\n >\n <slot slot=\"headline\" name=\"headline\"></slot>\n <slot slot=\"content\" name=\"content\"></slot>\n <slot slot=\"actions\" name=\"actions\"></slot>\n ></md-dialog\n >\n `;\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
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,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};
|
package/package.json
CHANGED
|
@@ -3,13 +3,14 @@
|
|
|
3
3
|
"description": "Webcomponent ix-dialog following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.25",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
10
10
|
"exports": {
|
|
11
11
|
".": "./dist/index.js",
|
|
12
12
|
"./ix-dialog.js": "./dist/ix-dialog.js",
|
|
13
|
+
"./ix-dialog.min.js": "./dist/ix-dialog.min.js",
|
|
13
14
|
"./IxDialog": "./dist/react/IxDialog.js"
|
|
14
15
|
},
|
|
15
16
|
"publishConfig": {
|
|
@@ -18,7 +19,7 @@
|
|
|
18
19
|
"scripts": {
|
|
19
20
|
"analyze": "cem analyze --litelement",
|
|
20
21
|
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
21
|
-
"build": "tsc && npm run analyze -- --exclude dist",
|
|
22
|
+
"build": "tsc && npm run analyze -- --exclude dist && rollup -c",
|
|
22
23
|
"prepublish": "tsc && npm run analyze -- --exclude dist",
|
|
23
24
|
"lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
|
|
24
25
|
"format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
|
|
@@ -45,6 +46,9 @@
|
|
|
45
46
|
"husky": "^4.3.8",
|
|
46
47
|
"lint-staged": "^10.5.4",
|
|
47
48
|
"prettier": "^2.4.1",
|
|
49
|
+
"rollup-plugin-minify-html-literals": "^1.2.6",
|
|
50
|
+
"rollup-plugin-summary": "^2.0.0",
|
|
51
|
+
"rollup-plugin-uglify": "^6.0.4",
|
|
48
52
|
"tslib": "^2.3.1",
|
|
49
53
|
"typescript": "^4.5.2"
|
|
50
54
|
},
|
|
@@ -95,5 +99,5 @@
|
|
|
95
99
|
"README.md",
|
|
96
100
|
"LICENSE"
|
|
97
101
|
],
|
|
98
|
-
"gitHead": "
|
|
102
|
+
"gitHead": "6ad19c520cf84d186998597c33cfa8bf38c71583"
|
|
99
103
|
}
|