@vaadin/vaadin-dialog
Advanced tools
Comparing version 20.0.0-beta1 to 21.0.0-alpha0.29f1db3de
{ | ||
"name": "@vaadin/vaadin-dialog", | ||
"version": "20.0.0-beta1", | ||
"version": "21.0.0-alpha0.29f1db3de", | ||
"description": "vaadin-dialog", | ||
@@ -30,13 +30,13 @@ "main": "vaadin-dialog.js", | ||
"@polymer/polymer": "^3.0.0", | ||
"@vaadin/vaadin-element-mixin": "^20.0.0-beta1", | ||
"@vaadin/vaadin-lumo-styles": "^20.0.0-beta1", | ||
"@vaadin/vaadin-material-styles": "^20.0.0-beta1", | ||
"@vaadin/vaadin-overlay": "^20.0.0-beta1", | ||
"@vaadin/vaadin-themable-mixin": "^20.0.0-beta1" | ||
"@vaadin/vaadin-element-mixin": "^21.0.0-alpha0.29f1db3de", | ||
"@vaadin/vaadin-lumo-styles": "^21.0.0-alpha0.29f1db3de", | ||
"@vaadin/vaadin-material-styles": "^21.0.0-alpha0.29f1db3de", | ||
"@vaadin/vaadin-overlay": "^21.0.0-alpha0.29f1db3de", | ||
"@vaadin/vaadin-themable-mixin": "^21.0.0-alpha0.29f1db3de" | ||
}, | ||
"devDependencies": { | ||
"@esm-bundle/chai": "^4.1.5", | ||
"@open-wc/testing-helpers": "^1.8.12", | ||
"@polymer/iron-test-helpers": "^3.0.0", | ||
"@vaadin/vaadin-text-field": "^20.0.0-beta1", | ||
"@vaadin/testing-helpers": "^0.2.1", | ||
"@vaadin/vaadin-template-renderer": "^21.0.0-alpha0.29f1db3de", | ||
"@vaadin/vaadin-text-field": "^21.0.0-alpha0.29f1db3de", | ||
"sinon": "^9.2.1" | ||
@@ -47,3 +47,3 @@ }, | ||
}, | ||
"gitHead": "a8bc4c410600c8039e8e3f5fa4c763fdb328e10d" | ||
"gitHead": "70e741f8e450dbea6f50de314514f4a15b2072b9" | ||
} |
@@ -12,9 +12,7 @@ import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
/** | ||
* `<vaadin-dialog>` is a Web Component for creating customized modal dialogs. The content of the | ||
* dialog can be populated in two ways: imperatively by using renderer callback function and | ||
* declaratively by using Polymer's Templates. | ||
* `<vaadin-dialog>` is a Web Component for creating customized modal dialogs. | ||
* | ||
* ### Rendering | ||
* | ||
* By default, the dialog uses the content provided by using the renderer callback function. | ||
* The content of the dialog can be populated by using the renderer callback function. | ||
* | ||
@@ -41,20 +39,6 @@ * The renderer function provides `root`, `dialog` arguments. | ||
* | ||
* ### Polymer Templates | ||
* | ||
* Alternatively, the content can be provided with Polymer's Template. | ||
* Dialog finds the first child template and uses that in case renderer callback function | ||
* is not provided. You can also set a custom template using the `template` property. | ||
* | ||
* ```html | ||
* <vaadin-dialog opened> | ||
* <template> | ||
* Sample dialog | ||
* </template> | ||
* </vaadin-dialog> | ||
* ``` | ||
* | ||
* ### Styling | ||
* | ||
* `<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal | ||
* themable component as the actual visible overlay. | ||
* themable component as the actual visible dialog overlay. | ||
* | ||
@@ -67,3 +51,3 @@ * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation. | ||
* | ||
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki) | ||
* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation. | ||
* | ||
@@ -101,4 +85,2 @@ * @fires {CustomEvent} resize - Fired when the dialog resize is finished. | ||
_contentTemplate: HTMLTemplateElement | null | undefined; | ||
/** | ||
@@ -118,4 +100,2 @@ * Custom function for rendering the content of the dialog. | ||
_setTemplateFromNodes(nodes: Node[]): void; | ||
/** | ||
@@ -122,0 +102,0 @@ * Manually invoke existing renderer. |
@@ -11,3 +11,2 @@ /** | ||
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js'; | ||
import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js'; | ||
@@ -128,9 +127,7 @@ import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
/** | ||
* `<vaadin-dialog>` is a Web Component for creating customized modal dialogs. The content of the | ||
* dialog can be populated in two ways: imperatively by using renderer callback function and | ||
* declaratively by using Polymer's Templates. | ||
* `<vaadin-dialog>` is a Web Component for creating customized modal dialogs. | ||
* | ||
* ### Rendering | ||
* | ||
* By default, the dialog uses the content provided by using the renderer callback function. | ||
* The content of the dialog can be populated by using the renderer callback function. | ||
* | ||
@@ -157,16 +154,2 @@ * The renderer function provides `root`, `dialog` arguments. | ||
* | ||
* ### Polymer Templates | ||
* | ||
* Alternatively, the content can be provided with Polymer's Template. | ||
* Dialog finds the first child template and uses that in case renderer callback function | ||
* is not provided. You can also set a custom template using the `template` property. | ||
* | ||
* ```html | ||
* <vaadin-dialog opened> | ||
* <template> | ||
* Sample dialog | ||
* </template> | ||
* </vaadin-dialog> | ||
* ``` | ||
* | ||
* ### Styling | ||
@@ -183,3 +166,3 @@ * | ||
* | ||
* See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki) | ||
* See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation. | ||
* | ||
@@ -225,3 +208,3 @@ * @fires {CustomEvent} resize - Fired when the dialog resize is finished. | ||
static get version() { | ||
return '20.0.0-beta1'; | ||
return '21.0.0-alpha0'; | ||
} | ||
@@ -272,8 +255,2 @@ | ||
/** | ||
* @type {HTMLTemplateElement | undefined} | ||
* @protected | ||
*/ | ||
_contentTemplate: Object, | ||
/** | ||
* Custom function for rendering the content of the dialog. | ||
@@ -295,9 +272,3 @@ * Receives two arguments: | ||
value: false | ||
}, | ||
/** @private */ | ||
_oldTemplate: Object, | ||
/** @private */ | ||
_oldRenderer: Object | ||
} | ||
}; | ||
@@ -307,7 +278,3 @@ } | ||
static get observers() { | ||
return [ | ||
'_openedChanged(opened)', | ||
'_ariaLabelChanged(ariaLabel)', | ||
'_templateOrRendererChanged(_contentTemplate, renderer)' | ||
]; | ||
return ['_openedChanged(opened)', '_ariaLabelChanged(ariaLabel)', '_rendererChanged(renderer)']; | ||
} | ||
@@ -322,22 +289,4 @@ | ||
this._observer = new FlattenedNodesObserver(this, (info) => { | ||
this._setTemplateFromNodes(info.addedNodes); | ||
}); | ||
} | ||
/** | ||
* @param {!Array<!Node>} nodes | ||
* @protected | ||
*/ | ||
_setTemplateFromNodes(nodes) { | ||
this._contentTemplate = | ||
nodes.filter((node) => node.localName && node.localName === 'template')[0] || this._contentTemplate; | ||
} | ||
/** @private */ | ||
_removeNewRendererOrTemplate(template, oldTemplate, renderer, oldRenderer) { | ||
if (template !== oldTemplate) { | ||
this._contentTemplate = undefined; | ||
} else if (renderer !== oldRenderer) { | ||
this.renderer = undefined; | ||
if (window.Vaadin && window.Vaadin.templateRendererCallback) { | ||
window.Vaadin.templateRendererCallback(this); | ||
} | ||
@@ -354,14 +303,4 @@ } | ||
/** @private */ | ||
_templateOrRendererChanged(template, renderer) { | ||
if (template && renderer) { | ||
this._removeNewRendererOrTemplate(template, this._oldTemplate, renderer, this._oldRenderer); | ||
throw new Error('You should only use either a renderer or a template for dialog content'); | ||
} | ||
this._oldTemplate = template; | ||
this._oldRenderer = renderer; | ||
if (renderer) { | ||
this.$.overlay.setProperties({ owner: this, renderer: renderer }); | ||
} | ||
_rendererChanged(renderer) { | ||
this.$.overlay.setProperties({ owner: this, renderer }); | ||
} | ||
@@ -377,5 +316,2 @@ | ||
_openedChanged(opened) { | ||
if (opened) { | ||
this.$.overlay.template = this.querySelector('template'); | ||
} | ||
this.$.overlay.opened = opened; | ||
@@ -382,0 +318,0 @@ } |
export * from './src/vaadin-dialog.js'; | ||
export * from './src/interfaces'; | ||
// TODO: remove from Vaadin 21 | ||
export * from './src/vaadin-dialog-legacy-events.js'; |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
47654
18
946
+ Added@lit-labs/ssr-dom-shim@1.3.0(transitive)
+ Added@lit/reactive-element@1.6.3(transitive)
+ Added@types/trusted-types@2.0.7(transitive)
+ Added@vaadin/vaadin-element-mixin@21.0.5(transitive)
+ Added@vaadin/vaadin-icon@21.0.5(transitive)
+ Added@vaadin/vaadin-lumo-styles@21.0.5(transitive)
+ Added@vaadin/vaadin-material-styles@21.0.5(transitive)
+ Added@vaadin/vaadin-overlay@21.0.5(transitive)
+ Added@vaadin/vaadin-themable-mixin@21.0.5(transitive)
+ Addedlit@2.8.0(transitive)
+ Addedlit-element@3.3.3(transitive)
+ Addedlit-html@2.8.0(transitive)
- Removed@vaadin/vaadin-element-mixin@20.0.5(transitive)
- Removed@vaadin/vaadin-lumo-styles@20.0.5(transitive)
- Removed@vaadin/vaadin-material-styles@20.0.5(transitive)
- Removed@vaadin/vaadin-overlay@20.0.5(transitive)
- Removed@vaadin/vaadin-themable-mixin@20.0.5(transitive)
- Removedlit-element@2.5.1(transitive)
- Removedlit-html@1.4.1(transitive)
Updated@vaadin/vaadin-element-mixin@^21.0.0-alpha0.29f1db3de
Updated@vaadin/vaadin-material-styles@^21.0.0-alpha0.29f1db3de
Updated@vaadin/vaadin-themable-mixin@^21.0.0-alpha0.29f1db3de