@vonage/vwc-dialog 2.26.0 → 2.28.0
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/package.json +7 -7
- package/readme.md +14 -12
- package/vwc-dialog.css.js +1 -1
- package/vwc-dialog.css.js.map +1 -1
- package/vwc-dialog.d.ts +4 -0
- package/vwc-dialog.js +3 -0
- package/vwc-dialog.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonage/vwc-dialog",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.28.0",
|
|
4
4
|
"description": "dialog component",
|
|
5
5
|
"homepage": "https://github.com/Vonage/vivid/tree/master/components/dialog#readme",
|
|
6
6
|
"license": "ISC",
|
|
@@ -27,16 +27,16 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@material/mwc-dialog": "^0.22.1",
|
|
30
|
-
"@vonage/vvd-core": "2.
|
|
31
|
-
"@vonage/vvd-style-coupling": "2.
|
|
32
|
-
"@vonage/vvd-typography": "2.
|
|
30
|
+
"@vonage/vvd-core": "2.28.0",
|
|
31
|
+
"@vonage/vvd-style-coupling": "2.28.0",
|
|
32
|
+
"@vonage/vvd-typography": "2.28.0",
|
|
33
33
|
"lit-element": "^2.4.0",
|
|
34
34
|
"tslib": "^2.3.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@vonage/vvd-design-tokens": "2.
|
|
38
|
-
"@vonage/vvd-umbrella": "2.
|
|
37
|
+
"@vonage/vvd-design-tokens": "2.28.0",
|
|
38
|
+
"@vonage/vvd-umbrella": "2.28.0",
|
|
39
39
|
"typescript": "^4.3.2"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "bdaaa402cb1b8a0dd33178c7a8216ed8b2ad7347"
|
|
42
42
|
}
|
package/readme.md
CHANGED
|
@@ -15,18 +15,20 @@ This component is an extension of [<mwc-dialog>](https://github.com/material-com
|
|
|
15
15
|
|
|
16
16
|
### Properties/Attributes
|
|
17
17
|
|
|
18
|
-
| Name | Type
|
|
19
|
-
| -----------------------
|
|
20
|
-
| `open` | `boolean`
|
|
21
|
-
| `hideActions` | `boolean`
|
|
22
|
-
| `stacked` | `boolean`
|
|
23
|
-
| `heading` | `string`
|
|
24
|
-
| `scrimClickAction` | `string`
|
|
25
|
-
| `escapeKeyAction` | `string`
|
|
26
|
-
| `defaultAction` | `string`
|
|
27
|
-
| `actionAttribute` | `string`
|
|
28
|
-
| `initialFocusAttribute` | `string`
|
|
29
|
-
| `closeButton`
|
|
18
|
+
| Name | Type | Description
|
|
19
|
+
| ----------------------- |------------|------------
|
|
20
|
+
| `open` | `boolean` | Whether the dialog should open.
|
|
21
|
+
| `hideActions` | `boolean` | Hides the actions footer of the dialog. Needed to remove excess padding when no actions are slotted in.
|
|
22
|
+
| `stacked` | `boolean` | Whether to stack the action buttons.
|
|
23
|
+
| `heading` | `string` | Heading text of the dialog.
|
|
24
|
+
| `scrimClickAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the scrim was clicked.
|
|
25
|
+
| `escapeKeyAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when the dialog closes because the excape key was pressed.
|
|
26
|
+
| `defaultAction` | `string` | _Default: 'close'_ – Action to be emitted with the `closing` and `closed` events when `<mwc-dialog>.open` is toggled.
|
|
27
|
+
| `actionAttribute` | `string` | _Default: 'dialogAction'_ – Attribute to read in light dom of dialog for closing action value.
|
|
28
|
+
| `initialFocusAttribute` | `string` | _Default: 'dialogInitialFocus'_ – Attribute to search for in light dom for initial focus on dialog open.
|
|
29
|
+
| `closeButton` | `boolean` | _Default: 'false'_ - show/hide the dismiss button
|
|
30
|
+
| `topPosition` | `string` | _Default: 'unset'_ - override the dialog centering to the screen and allow setting a unique top. Can get: `small`, `medium`, `large`, `xlarge`
|
|
31
|
+
|
|
30
32
|
|
|
31
33
|
### Methods
|
|
32
34
|
|
package/vwc-dialog.css.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit-element';
|
|
2
|
-
export const style = css `#title,#content,#actions,#dialog_icon{padding-right:0;padding-left:0}::slotted([slot=icon]){margin-bottom:18px}#title{font:500 condensed 20px / 28px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;padding-bottom:0;margin-bottom:8px;color:var(--vvd-color-on-canvas)}#content{font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;color:var(--vvd-color-on-canvas)}#actions{font:600 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;padding-bottom:0}.mdc-dialog__surface{padding:24px}.mdc-dialog .mdc-dialog__content{padding-top:0}.mdc-dialog__content.last{padding-bottom:0}.mdc-dialog__title::before{height:0}.mdc-dialog .mdc-dialog__scrim{background-color:var(--vvd-color-on-canvas);opacity:.5}.dismiss-button{display:none}:host([close-button]) .dismiss-button{--vvd-icon-button-color: inherit;position:absolute;top:16px;right:16px;display:block}:host([close-button]) .mdc-dialog__title,:host([close-button]) .mdc-dialog__content{width:calc(100% - 32px)}:host([close-button]) .mdc-dialog__title~.mdc-dialog__content{width:100%}`;
|
|
2
|
+
export const style = css `#title,#content,#actions,#dialog_icon{padding-right:0;padding-left:0}::slotted([slot=icon]){margin-bottom:18px}#title{font:500 condensed 20px / 28px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;padding-bottom:0;margin-bottom:8px;color:var(--vvd-color-on-canvas)}#content{font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;color:var(--vvd-color-on-canvas)}#actions{font:600 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;padding-bottom:0}.mdc-dialog__surface{padding:24px}.mdc-dialog .mdc-dialog__content{padding-top:0}.mdc-dialog__content.last{padding-bottom:0}.mdc-dialog__title::before{height:0}.mdc-dialog .mdc-dialog__scrim{background-color:var(--vvd-color-on-canvas);opacity:.5}.dismiss-button{display:none}:host([close-button]) .dismiss-button{--vvd-icon-button-color: inherit;position:absolute;top:16px;right:16px;display:block}:host([close-button]) .mdc-dialog__title,:host([close-button]) .mdc-dialog__content{width:calc(100% - 32px)}:host([close-button]) .mdc-dialog__title~.mdc-dialog__content{width:100%}:host([topPosition=small]) .mdc-dialog,:host([topPosition=medium]) .mdc-dialog,:host([topPosition*=large]) .mdc-dialog{top:var(--_top-position);height:auto}:host([topPosition=small]) .mdc-dialog{--_top-position:40px}:host([topPosition=medium]) .mdc-dialog{--_top-position:80px}:host([topPosition=large]) .mdc-dialog{--_top-position:120px}:host([topPosition=xlarge]) .mdc-dialog{--_top-position:160px}`;
|
|
3
3
|
//# sourceMappingURL=vwc-dialog.css.js.map
|
package/vwc-dialog.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-dialog.css.js","sourceRoot":"","sources":["src/vwc-dialog.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"vwc-dialog.css.js","sourceRoot":"","sources":["src/vwc-dialog.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAChC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,siDAAsiD,CAAC","sourcesContent":["// autogenerated module\nimport {css} from 'lit-element';\nexport const style = css`#title,#content,#actions,#dialog_icon{padding-right:0;padding-left:0}::slotted([slot=icon]){margin-bottom:18px}#title{font:500 condensed 20px / 28px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;padding-bottom:0;margin-bottom:8px;color:var(--vvd-color-on-canvas)}#content{font:400 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;color:var(--vvd-color-on-canvas)}#actions{font:600 ultra-condensed 14px / 20px SpeziaWebVariable;letter-spacing:0px;text-decoration:none;text-transform:none;padding-bottom:0}.mdc-dialog__surface{padding:24px}.mdc-dialog .mdc-dialog__content{padding-top:0}.mdc-dialog__content.last{padding-bottom:0}.mdc-dialog__title::before{height:0}.mdc-dialog .mdc-dialog__scrim{background-color:var(--vvd-color-on-canvas);opacity:.5}.dismiss-button{display:none}:host([close-button]) .dismiss-button{--vvd-icon-button-color: inherit;position:absolute;top:16px;right:16px;display:block}:host([close-button]) .mdc-dialog__title,:host([close-button]) .mdc-dialog__content{width:calc(100% - 32px)}:host([close-button]) .mdc-dialog__title~.mdc-dialog__content{width:100%}:host([topPosition=small]) .mdc-dialog,:host([topPosition=medium]) .mdc-dialog,:host([topPosition*=large]) .mdc-dialog{top:var(--_top-position);height:auto}:host([topPosition=small]) .mdc-dialog{--_top-position:40px}:host([topPosition=medium]) .mdc-dialog{--_top-position:80px}:host([topPosition=large]) .mdc-dialog{--_top-position:120px}:host([topPosition=xlarge]) .mdc-dialog{--_top-position:160px}`;"]}
|
package/vwc-dialog.d.ts
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import type { PropertyValues } from 'lit-element';
|
|
2
2
|
import { Dialog as MWCDialog } from '@material/mwc-dialog';
|
|
3
|
+
import type { Size } from '@vonage/vvd-foundation/constants.js';
|
|
3
4
|
import '@vonage/vvd-core';
|
|
4
5
|
declare global {
|
|
5
6
|
interface HTMLElementTagNameMap {
|
|
6
7
|
'vwc-dialog': VWCDialog;
|
|
7
8
|
}
|
|
8
9
|
}
|
|
10
|
+
declare type Position = Extract<Size, Size.Small | Size.Medium | Size.Large | Size.x_Large>;
|
|
9
11
|
export declare class VWCDialog extends MWCDialog {
|
|
10
12
|
closeButton?: boolean;
|
|
13
|
+
topPosition?: Position;
|
|
11
14
|
protected firstUpdated(): void;
|
|
12
15
|
protected updated(_changedProperties: PropertyValues): void;
|
|
13
16
|
private addDismissButton;
|
|
14
17
|
}
|
|
18
|
+
export {};
|
package/vwc-dialog.js
CHANGED
|
@@ -54,6 +54,9 @@ __decorate([
|
|
|
54
54
|
reflect: true
|
|
55
55
|
})
|
|
56
56
|
], VWCDialog.prototype, "closeButton", void 0);
|
|
57
|
+
__decorate([
|
|
58
|
+
property({ type: String, reflect: true, attribute: 'topPosition' })
|
|
59
|
+
], VWCDialog.prototype, "topPosition", void 0);
|
|
57
60
|
VWCDialog = __decorate([
|
|
58
61
|
customElement('vwc-dialog')
|
|
59
62
|
], VWCDialog);
|
package/vwc-dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vwc-dialog.js","sourceRoot":"","sources":["src/vwc-dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACnF,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,oDAAoD,CAAC;
|
|
1
|
+
{"version":3,"file":"vwc-dialog.js","sourceRoot":"","sources":["src/vwc-dialog.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACnF,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,oDAAoD,CAAC;AAE5F,OAAO,kBAAkB,CAAC;AAU1B,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AACxD,YAAY,CAAC,SAAS,GAAG;;;;CAIxB,CAAC;AAIF,SAAS,CAAC,MAAM,GAAG,CAAC,aAAa,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;AAG3D,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,SAAS;IAWpB,YAAY;QAC9B,KAAK,CAAC,YAAY,EAAE,CAAC;QACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACzB,CAAC;IAEkB,OAAO,CAAC,kBAAkC;;QAC5D,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAClC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE;YACnD,MAAA,IAAI,CAAC,UAAU;iBACb,aAAa,CAAC,sBAAsB,CAAC,0CACpC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;SACjD;QAED,IAAI,kBAAkB,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;YAC1C,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YACjE,IAAI,cAAc,EAAE;gBACnB,kBAAkB,CAAC,GAAG,CAAC,aAAa,CAAC;oBACpC,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC;oBACzC,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;aACxC;SACD;IACF,CAAC;IAEO,gBAAgB;;QACvB,MAAM,kBAAkB,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzD,kBAAkB,CAAC,SAAS,GAAG;;;iCAGA,CAAC;QAChC,MAAM,WAAW,GAAG,kBAAkB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACnD,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YAC1C,IAAI,CAAC,KAAK,EAAE,CAAC;QACd,CAAC,CAAC,CAAC;QACH,MAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,sBAAsB,CAAC,0CACnD,WAAW,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC;CACD,CAAA;AAzCC;IALA,QAAQ,CAAC;QACT,SAAS,EAAE,cAAc;QACzB,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,IAAI;KACb,CAAC;8CACqB;AAGtB;IADA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;8CAC5C;AATZ,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA+CrB;SA/CY,SAAS","sourcesContent":["import { customElement, property } from 'lit-element';\nimport type { PropertyValues } from 'lit-element';\nimport { style } from './vwc-dialog.css.js';\nimport { Dialog as MWCDialog } from '@material/mwc-dialog';\nimport { styles as mwcDialogStyles } from '@material/mwc-dialog/mwc-dialog.css.js';\nimport { style as styleCoupling } from '@vonage/vvd-style-coupling/mdc-vvd-coupling.css.js';\nimport type { Size } from '@vonage/vvd-foundation/constants.js';\nimport '@vonage/vvd-core';\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'vwc-dialog': VWCDialog;\n\t}\n}\n\ntype Position = Extract<Size, Size.Small | Size.Medium | Size.Large | Size.x_Large>;\n\nconst iconTemplate = document.createElement('template');\niconTemplate.innerHTML = `\n\t<div id=\"dialog_icon\">\n\t\t<slot name=\"icon\"></slot>\n</div>\n`;\n\n/* eslint-disable @typescript-eslint/ban-ts-comment */\n// @ts-ignore\nMWCDialog.styles = [styleCoupling, mwcDialogStyles, style];\n\n@customElement('vwc-dialog')\nexport class VWCDialog extends MWCDialog {\n\t@property({\n\t\tattribute: 'close-button',\n\t\ttype: Boolean,\n\t\treflect: true\n\t})\n\t\tcloseButton?: boolean;\n\n\t@property({ type: String, reflect: true, attribute: 'topPosition' })\n\t\ttopPosition?: Position;\n\n\tprotected override firstUpdated() {\n\t\tsuper.firstUpdated();\n\t\tthis.addDismissButton();\n\t}\n\n\tprotected override updated(_changedProperties: PropertyValues): void {\n\t\tsuper.updated(_changedProperties);\n\t\tif (!this.renderRoot.querySelector('#dialog_icon')) {\n\t\t\tthis.renderRoot\n\t\t\t\t.querySelector('.mdc-dialog__surface')\n\t\t\t\t?.prepend(iconTemplate.content.cloneNode(true));\n\t\t}\n\n\t\tif (_changedProperties.has('hideActions')) {\n\t\t\tconst contentElement = this.renderRoot.querySelector('#content');\n\t\t\tif (contentElement) {\n\t\t\t\t_changedProperties.get('hideActions')\n\t\t\t\t\t? contentElement.classList.remove('last')\n\t\t\t\t\t: contentElement.classList.add('last');\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate addDismissButton() {\n\t\tconst closeButtonWrapper = document.createElement('div');\n\t\tcloseButtonWrapper.innerHTML = `<vwc-icon-button\n\t\t\t\t\t\t\t\tclass=\"dismiss-button\"\n\t\t\t\t\t\t\t\ticon=\"close-line\"\n\t\t\t\t\t\t\t\tdense></vwc-icon-button>`;\n\t\tconst closeButton = closeButtonWrapper.children[0];\n\t\tcloseButton.addEventListener('click', () => {\n\t\t\tthis.close();\n\t\t});\n\t\tthis.shadowRoot?.querySelector('.mdc-dialog__surface')\n\t\t\t?.appendChild(closeButton);\n\t}\n}\n"]}
|