@vaadin/vaadin-dialog
Advanced tools
Comparing version 2.1.0-alpha3 to 2.1.0-beta1
@@ -13,3 +13,3 @@ { | ||
"name": "@vaadin/vaadin-dialog", | ||
"version": "2.1.0-alpha3", | ||
"version": "2.1.0-beta1", | ||
"main": "vaadin-dialog.js", | ||
@@ -29,17 +29,17 @@ "author": "Vaadin Ltd", | ||
"@polymer/polymer": "^3.0.0", | ||
"@vaadin/vaadin-overlay": "^3.1.0-alpha2", | ||
"@vaadin/vaadin-themable-mixin": "^1.2.0-alpha2", | ||
"@vaadin/vaadin-lumo-styles": "^1.1.0-alpha3", | ||
"@vaadin/vaadin-material-styles": "^1.1.0-alpha2", | ||
"@vaadin/vaadin-element-mixin": "^1.1.0-alpha1" | ||
"@vaadin/vaadin-overlay": "^3.1.0-beta1", | ||
"@vaadin/vaadin-themable-mixin": "^1.2.1", | ||
"@vaadin/vaadin-lumo-styles": "^1.1.0-beta1", | ||
"@vaadin/vaadin-material-styles": "^1.1.0-beta1", | ||
"@vaadin/vaadin-element-mixin": "^1.1.2" | ||
}, | ||
"devDependencies": { | ||
"@polymer/iron-component-page": "^3.0.0-pre.12", | ||
"@polymer/iron-demo-helpers": "^3.0.0-pre.12", | ||
"@polymer/iron-test-helpers": "^3.0.0-pre.12", | ||
"@vaadin/vaadin-button": "^2.1.0-alpha2", | ||
"@webcomponents/webcomponentsjs": "^1.0.0", | ||
"wct-browser-legacy": "0.0.1-pre.11", | ||
"@vaadin/vaadin-demo-helpers": "^2.0.0-alpha2" | ||
"@polymer/iron-component-page": "^3.0.0-pre.18", | ||
"@polymer/iron-demo-helpers": "^3.0.0-pre.18", | ||
"@polymer/iron-test-helpers": "^3.0.0-pre.18", | ||
"@vaadin/vaadin-button": "^2.1.0-beta1", | ||
"@webcomponents/webcomponentsjs": "^2.0.0", | ||
"wct-browser-legacy": "^1.0.1", | ||
"@vaadin/vaadin-demo-helpers": "^2.0.1" | ||
} | ||
} |
@@ -76,20 +76,23 @@ [![npm version](https://badge.fury.io/js/%40vaadin%2Fvaadin-dialog.svg)](https://badge.fury.io/js/%40vaadin%2Fvaadin-dialog) | ||
## Getting Started | ||
## Getting started | ||
Vaadin components use the Lumo theme by default. | ||
## The file structure for Vaadin components | ||
To use the Material theme, import the correspondent file from the `theme/material` folder. | ||
- `src/vaadin-dialog.html` | ||
## Entry points | ||
Unstyled component. | ||
- The component with the Lumo theme: | ||
- `theme/lumo/vaadin-dialog.html` | ||
`theme/lumo/vaadin-dialog.html` | ||
Component with Lumo theme. | ||
- The component with the Material theme: | ||
- `vaadin-dialog.html` | ||
`theme/material/vaadin-dialog.html` | ||
Alias for theme/lumo/vaadin-dialog.html | ||
- Alias for `theme/lumo/vaadin-dialog.html`: | ||
`vaadin-dialog.html` | ||
## Running demos and tests in browser | ||
@@ -123,6 +126,3 @@ | ||
- Make sure your code is compliant with our code linters: `gulp lint` | ||
- Check that tests are passing: `polymer test` | ||
- [Submit a pull request](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) with detailed title and description | ||
- Wait for response from one of Vaadin components team members | ||
To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first. | ||
@@ -129,0 +129,0 @@ |
@@ -0,2 +1,8 @@ | ||
/** | ||
@license | ||
Copyright (c) 2017 Vaadin Ltd. | ||
This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
*/ | ||
import { PolymerElement } from '@polymer/polymer/polymer-element.js'; | ||
import '@polymer/polymer/lib/utils/templatize.js'; | ||
@@ -6,4 +12,3 @@ import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js'; | ||
import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
const $_documentContainer = document.createElement('div'); | ||
$_documentContainer.setAttribute('style', 'display: none;'); | ||
const $_documentContainer = document.createElement('template'); | ||
@@ -24,3 +29,3 @@ $_documentContainer.innerHTML = `<dom-module id="vaadin-dialog-overlay-styles" theme-for="vaadin-dialog-overlay"> | ||
document.head.appendChild($_documentContainer); | ||
document.head.appendChild($_documentContainer.content); | ||
@@ -88,3 +93,3 @@ /** | ||
static get version() { | ||
return '2.1.0-alpha3'; | ||
return '2.1.0-beta1'; | ||
} | ||
@@ -119,2 +124,12 @@ | ||
/** | ||
* Set the `aria-label` attribute for assistive technologies like | ||
* screen readers. An `undefined` value for this property (the | ||
* default) means that the `aria-label` attribute is not present at | ||
* all. | ||
*/ | ||
ariaLabel: { | ||
type: String | ||
}, | ||
_contentTemplate: Object | ||
@@ -125,3 +140,6 @@ }; | ||
static get observers() { | ||
return ['_openedChanged(opened)']; | ||
return [ | ||
'_openedChanged(opened)', | ||
'_ariaLabelChanged(ariaLabel)', | ||
]; | ||
} | ||
@@ -148,2 +166,10 @@ | ||
_ariaLabelChanged(ariaLabel) { | ||
if (ariaLabel !== undefined && ariaLabel !== null) { | ||
this.$.overlay.setAttribute('aria-label', ariaLabel); | ||
} else { | ||
this.$.overlay.removeAttribute('aria-label'); | ||
} | ||
} | ||
_onOverlayOpened(e) { | ||
@@ -150,0 +176,0 @@ if (e.detail.value === false) { |
import '@vaadin/vaadin-lumo-styles/spacing.js'; | ||
import '@vaadin/vaadin-lumo-styles/mixins/overlay.js'; | ||
const $_documentContainer = document.createElement('div'); | ||
$_documentContainer.setAttribute('style', 'display: none;'); | ||
const $_documentContainer = document.createElement('template'); | ||
@@ -61,2 +60,2 @@ $_documentContainer.innerHTML = `<dom-module id="lumo-dialog" theme-for="vaadin-dialog-overlay"> | ||
document.head.appendChild($_documentContainer); | ||
document.head.appendChild($_documentContainer.content); |
import '@vaadin/vaadin-material-styles/mixins/overlay.js'; | ||
import '@vaadin/vaadin-material-styles/shadow.js'; | ||
const $_documentContainer = document.createElement('div'); | ||
$_documentContainer.setAttribute('style', 'display: none;'); | ||
const $_documentContainer = document.createElement('template'); | ||
@@ -23,2 +22,2 @@ $_documentContainer.innerHTML = `<dom-module id="material-dialog" theme-for="vaadin-dialog-overlay"> | ||
document.head.appendChild($_documentContainer); | ||
document.head.appendChild($_documentContainer.content); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
67389
15
265