New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@vaadin/vaadin-dialog
Advanced tools
@vaadin/vaadin-dialog - npm Package Compare versions
Comparing version 2.5.2 to 3.0.0-alpha1
| { | ||
| "name": "@vaadin/vaadin-dialog", | ||
| "version": "3.0.0-alpha1", | ||
| "description": "vaadin-dialog", | ||
| "main": "vaadin-dialog.js", | ||
| "module": "vaadin-dialog.js", | ||
| "repository": "vaadin/vaadin-dialog", | ||
| "keywords": [ | ||
@@ -10,7 +15,2 @@ "Vaadin", | ||
| ], | ||
| "repository": "vaadin/vaadin-dialog", | ||
| "homepage": "https://vaadin.com/components", | ||
| "name": "@vaadin/vaadin-dialog", | ||
| "version": "2.5.2", | ||
| "main": "vaadin-dialog.js", | ||
| "author": "Vaadin Ltd", | ||
@@ -21,17 +21,38 @@ "license": "Apache-2.0", | ||
| }, | ||
| "homepage": "https://vaadin.com/components", | ||
| "files": [ | ||
| "vaadin-*.d.ts", | ||
| "vaadin-*.js", | ||
| "@types", | ||
| "src", | ||
| "theme" | ||
| ], | ||
| "resolutions": { | ||
| "es-abstract": "1.17.6", | ||
| "@types/doctrine": "0.0.3", | ||
| "inherits": "2.0.3", | ||
| "samsam": "1.1.3", | ||
| "supports-color": "3.1.2", | ||
| "type-detect": "1.0.0" | ||
| "scripts": { | ||
| "analyze": "polymer analyze vaadin-* > analysis.json", | ||
| "check-version": "magi check-version", | ||
| "debug": "web-test-runner test/*.test.js --watch", | ||
| "dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist", | ||
| "lint": "npm run lint:js && npm run lint:css && npm run lint:types", | ||
| "lint:css": "stylelint src/*.js theme/**/*-styles.js", | ||
| "lint:js": "eslint src theme test", | ||
| "lint:types": "tsc", | ||
| "prestart": "npm run analyze", | ||
| "preversion": "magi update-version", | ||
| "screenshots": "hermione test/visual/test.js --update-refs", | ||
| "serve:dist": "web-dev-server --app-index dist/index.html --open", | ||
| "start": "web-dev-server --node-resolve --open", | ||
| "test": "web-test-runner test/*.test.js --coverage", | ||
| "test:sauce": "TEST_ENV=sauce npm test", | ||
| "test:visual": "hermione test/visual/test.js" | ||
| }, | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "lint-staged" | ||
| } | ||
| }, | ||
| "lint-staged": { | ||
| "*.js": [ | ||
| "eslint --fix", | ||
| "prettier --write" | ||
| ] | ||
| }, | ||
| "dependencies": { | ||
@@ -42,18 +63,35 @@ "@polymer/polymer": "^3.0.0", | ||
| "@vaadin/vaadin-themable-mixin": "^1.6.1", | ||
| "@vaadin/vaadin-lumo-styles": "^1.6.0", | ||
| "@vaadin/vaadin-lumo-styles": "^1.6.1", | ||
| "@vaadin/vaadin-material-styles": "^1.3.2", | ||
| "@vaadin/vaadin-element-mixin": "^2.4.1" | ||
| }, | ||
| "scripts": { | ||
| "generate-typings": "gen-typescript-declarations --outDir . --verify" | ||
| }, | ||
| "devDependencies": { | ||
| "@esm-bundle/chai": "^4.1.5", | ||
| "@open-wc/rollup-plugin-html": "^1.2.5", | ||
| "@open-wc/testing-helpers": "^1.8.12", | ||
| "@polymer/iron-component-page": "^4.0.0", | ||
| "@polymer/iron-test-helpers": "^3.0.0", | ||
| "@vaadin/vaadin-button": "^2.4.0", | ||
| "@vaadin/vaadin-text-field": "^2.7.0", | ||
| "@webcomponents/webcomponentsjs": "^2.0.0", | ||
| "wct-browser-legacy": "^1.0.1", | ||
| "@vaadin/vaadin-demo-helpers": "^3.1.0" | ||
| "@vaadin/vaadin-text-field": "^3.0.0-alpha1", | ||
| "@web/dev-server": "^0.1.4", | ||
| "@web/test-runner": "^0.12.3", | ||
| "@web/test-runner-saucelabs": "^0.4.0", | ||
| "eslint": "^7.18.0", | ||
| "eslint-config-prettier": "^6.15.0", | ||
| "eslint-plugin-prettier": "^3.1.4", | ||
| "hermione": "^3.9.0", | ||
| "hermione-esm": "^0.4.0", | ||
| "hermione-sauce": "^0.1.0", | ||
| "husky": "^4.3.0", | ||
| "lint-staged": "^10.5.1", | ||
| "magi-cli": "^0.28.0", | ||
| "prettier": "^2.2.0", | ||
| "rimraf": "^3.0.2", | ||
| "rollup": "^2.34.1", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "sinon": "^9.2.1", | ||
| "stylelint": "^13.8.0", | ||
| "stylelint-config-prettier": "^8.0.2", | ||
| "stylelint-config-vaadin": "^0.2.10", | ||
| "typescript": "^4.1.3" | ||
| } | ||
| } |
@@ -1,11 +0,1 @@ | ||
| [](https://www.npmjs.com/package/@vaadin/vaadin-dialog) | ||
| [](https://github.com/vaadin/vaadin-dialog/releases) | ||
| [](https://www.webcomponents.org/element/vaadin/vaadin-dialog) | ||
| [](https://travis-ci.org/vaadin/vaadin-dialog) | ||
| [](https://coveralls.io/github/vaadin/vaadin-dialog?branch=master) | ||
| [](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-dialog) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-dialog) | ||
| # <vaadin-dialog> | ||
@@ -17,19 +7,14 @@ | ||
| [<vaadin-dialog>](https://vaadin.com/components/vaadin-dialog) is a Web Component for customized modal dialogs, part of the [Vaadin components](https://vaadin.com/components). | ||
| <!-- | ||
| ``` | ||
| <custom-element-demo> | ||
| <template> | ||
| <script src="../webcomponentsjs/webcomponents-lite.js"></script> | ||
| <link rel="import" href="vaadin-dialog.html"> | ||
| <next-code-block></next-code-block> | ||
| </template> | ||
| </custom-element-demo> | ||
| ``` | ||
| --> | ||
| [](https://www.npmjs.com/package/@vaadin/vaadin-dialog) | ||
| [](https://travis-ci.org/vaadin/vaadin-dialog) | ||
| [](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) | ||
| [](https://www.webcomponents.org/element/vaadin/vaadin-dialog) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-dialog) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-dialog) | ||
| [](https://discord.gg/PHmkCKC) | ||
| ```html | ||
| <vaadin-dialog opened> | ||
| </vaadin-dialog> | ||
| <vaadin-dialog opened></vaadin-dialog> | ||
@@ -48,27 +33,5 @@ <script> | ||
| The Vaadin components are distributed as Bower and npm packages. | ||
| Please note that the version range is the same, as the API has not changed. | ||
| You should not mix Bower and npm versions in the same application, though. | ||
| Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components | ||
| are only published on npm, not pushed to GitHub repositories. | ||
| ### Polymer 2 and HTML Imports Compatible Version | ||
| Install `vaadin-dialog`: | ||
| ```sh | ||
| bower i vaadin/vaadin-dialog --save | ||
| ``` | ||
| Once installed, import it in your application: | ||
| ```html | ||
| <link rel="import" href="bower_components/vaadin-dialog/vaadin-dialog.html"> | ||
| ``` | ||
| ### Polymer 3 and ES Modules Compatible Version | ||
| Install `vaadin-dialog`: | ||
| ```sh | ||
| npm i @vaadin/vaadin-dialog --save | ||
@@ -93,37 +56,40 @@ ``` | ||
| `theme/lumo/vaadin-dialog.html` | ||
| `theme/lumo/vaadin-dialog.js` | ||
| - The component with the Material theme: | ||
| `theme/material/vaadin-dialog.html` | ||
| `theme/material/vaadin-dialog.js` | ||
| - Alias for `theme/lumo/vaadin-dialog.html`: | ||
| - Alias for `theme/lumo/vaadin-dialog.js`: | ||
| `vaadin-dialog.html` | ||
| `vaadin-dialog.js` | ||
| ## Running demos and tests in a browser | ||
| ## Running API docs and tests in a browser | ||
| 1. Fork the `vaadin-dialog` repository and clone it locally. | ||
| 1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed. | ||
| 1. Make sure you have [node.js](https://nodejs.org/) 12.x installed. | ||
| 1. When in the `vaadin-dialog` directory, run `npm install` and then `bower install` to install dependencies. | ||
| 1. Make sure you have [npm](https://www.npmjs.com/) installed. | ||
| 1. When in the `vaadin-dialog` directory, run `npm install` to install dependencies. | ||
| 1. Run `npm start`, browser will automatically open the component API documentation. | ||
| 1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example: | ||
| 1. You can also open visual tests, for example: | ||
| - http://127.0.0.1:3000/components/vaadin-dialog/demo | ||
| - http://127.0.0.1:3000/components/vaadin-dialog/test | ||
| - http://127.0.0.1:8000/test/visual/default.html | ||
| ## Running tests from the command line | ||
| 1. When in the `vaadin-dialog` directory, run `polymer test` | ||
| 1. When in the `vaadin-dialog` directory, run `npm test` | ||
| ## Debugging tests in the browser | ||
| 1. Run `npm run debug`, then choose manual mode (M) and open the link in browser. | ||
| ## Following the coding style | ||
| We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files. | ||
| We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files. | ||
@@ -130,0 +96,0 @@ |
@@ -1,27 +0,23 @@ | ||
| /** | ||
| * DO NOT EDIT | ||
| * | ||
| * This file was automatically generated by | ||
| * https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations | ||
| * | ||
| * To modify these typings, edit the source file(s): | ||
| * src/vaadin-dialog-draggable-mixin.js | ||
| */ | ||
| declare function DialogDraggableMixin<T extends new (...args: any[]) => {}>( | ||
| base: T | ||
| ): T & DialogDraggableMixinConstructor; | ||
| // tslint:disable:variable-name Describing an API that's defined elsewhere. | ||
| // tslint:disable:no-any describes the API as best we are able today | ||
| export {DialogDraggableMixin}; | ||
| declare function DialogDraggableMixin<T extends new (...args: any[]) => {}>(base: T): T & DialogDraggableMixinConstructor; | ||
| interface DialogDraggableMixinConstructor { | ||
| new(...args: any[]): DialogDraggableMixin; | ||
| new (...args: any[]): DialogDraggableMixin; | ||
| } | ||
| export {DialogDraggableMixinConstructor}; | ||
| interface DialogDraggableMixin { | ||
| ready(): void; | ||
| /** | ||
| * Set to true to enable repositioning the dialog by clicking and dragging. | ||
| * | ||
| * By default, only the overlay area can be used to drag the element. But, | ||
| * a child element can be marked as a draggable area by adding a | ||
| * "`draggable`" class to it, this will by default make all of its children draggable also. | ||
| * If you want a child element to be draggable | ||
| * but still have its children non-draggable (by default), mark it with | ||
| * "`draggable-leaf-only`" class name. | ||
| */ | ||
| draggable: boolean; | ||
| } | ||
| export { DialogDraggableMixin, DialogDraggableMixinConstructor }; |
@@ -0,1 +1,3 @@ | ||
| import { getMouseOrFirstTouchEvent, eventInWindow } from './vaadin-dialog-utils.js'; | ||
| const TOUCH_DEVICE = (() => { | ||
@@ -17,2 +19,20 @@ try { | ||
| return { | ||
| /** | ||
| * Set to true to enable repositioning the dialog by clicking and dragging. | ||
| * | ||
| * By default, only the overlay area can be used to drag the element. But, | ||
| * a child element can be marked as a draggable area by adding a | ||
| * "`draggable`" class to it, this will by default make all of its children draggable also. | ||
| * If you want a child element to be draggable | ||
| * but still have its children non-draggable (by default), mark it with | ||
| * "`draggable-leaf-only`" class name. | ||
| * | ||
| * @type {boolean} | ||
| */ | ||
| draggable: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| }, | ||
| /** @private */ | ||
@@ -53,3 +73,4 @@ _touchDevice: { | ||
| const isResizerContainer = e.target === resizerContainer; | ||
| const isResizerContainerScrollbar = e.offsetX > resizerContainer.clientWidth || e.offsetY > resizerContainer.clientHeight; | ||
| const isResizerContainerScrollbar = | ||
| e.offsetX > resizerContainer.clientWidth || e.offsetY > resizerContainer.clientHeight; | ||
| const isContentPart = e.target === this.$.overlay.$.content; | ||
@@ -68,5 +89,5 @@ | ||
| !isDraggable && e.preventDefault(); | ||
| this._originalBounds = this._getOverlayBounds(); | ||
| const event = this.__getMouseOrFirstTouchEvent(e); | ||
| this._originalMouseCoords = {top: event.pageY, left: event.pageX}; | ||
| this._originalBounds = this.$.overlay.getBounds(); | ||
| const event = getMouseOrFirstTouchEvent(e); | ||
| this._originalMouseCoords = { top: event.pageY, left: event.pageX }; | ||
| window.addEventListener('mouseup', this._stopDrag); | ||
@@ -77,3 +98,3 @@ window.addEventListener('touchend', this._stopDrag); | ||
| if (this.$.overlay.$.overlay.style.position !== 'absolute') { | ||
| this._setBounds(this._originalBounds); | ||
| this.$.overlay.setBounds(this._originalBounds); | ||
| } | ||
@@ -86,7 +107,7 @@ } | ||
| _drag(e) { | ||
| const event = this.__getMouseOrFirstTouchEvent(e); | ||
| if (this._eventInWindow(event)) { | ||
| const event = getMouseOrFirstTouchEvent(e); | ||
| if (eventInWindow(event)) { | ||
| const top = this._originalBounds.top + (event.pageY - this._originalMouseCoords.top); | ||
| const left = this._originalBounds.left + (event.pageX - this._originalMouseCoords.left); | ||
| this._setBounds({top, left}); | ||
| this.$.overlay.setBounds({ top, left }); | ||
| } | ||
@@ -93,0 +114,0 @@ } |
@@ -1,35 +0,26 @@ | ||
| /** | ||
| * DO NOT EDIT | ||
| * | ||
| * This file was automatically generated by | ||
| * https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations | ||
| * | ||
| * To modify these typings, edit the source file(s): | ||
| * src/vaadin-dialog-resizable-mixin.js | ||
| */ | ||
| import { DialogResizableDirection, DialogResizeDimensions } from './interfaces'; | ||
| declare function DialogResizableMixin<T extends new (...args: any[]) => {}>( | ||
| base: T | ||
| ): T & DialogResizableMixinConstructor; | ||
| // tslint:disable:variable-name Describing an API that's defined elsewhere. | ||
| // tslint:disable:no-any describes the API as best we are able today | ||
| interface DialogResizableMixinConstructor { | ||
| new (...args: any[]): DialogResizableMixin; | ||
| } | ||
| export {DialogResizableMixin}; | ||
| interface DialogResizableMixin { | ||
| /** | ||
| * Set to true to enable resizing the dialog by dragging the corners and edges. | ||
| */ | ||
| resizable: boolean; | ||
| declare function DialogResizableMixin<T extends new (...args: any[]) => {}>(base: T): T & DialogResizableMixinConstructor; | ||
| _startResize(e: MouseEvent | TouchEvent, direction: DialogResizableDirection): void; | ||
| interface DialogResizableMixinConstructor { | ||
| new(...args: any[]): DialogResizableMixin; | ||
| } | ||
| _resize(e: MouseEvent | TouchEvent, resizer: DialogResizableDirection): void; | ||
| export {DialogResizableMixinConstructor}; | ||
| _stopResize(direction: DialogResizableDirection): void; | ||
| interface DialogResizableMixin { | ||
| ready(): void; | ||
| _startResize(e: MouseEvent|TouchEvent, direction: DialogResizableDirection): void; | ||
| _resize(e: MouseEvent|TouchEvent, resizer: DialogResizableDirection): void; | ||
| _stopResize(direction: DialogResizableDirection): void; | ||
| _getResizeDimensions(): DialogResizeDimensions; | ||
| } | ||
| import {DialogResizableDirection} from '../@types/interfaces'; | ||
| import {DialogResizeDimensions} from '../@types/interfaces'; | ||
| export { DialogResizableMixin, DialogResizableMixinConstructor }; |
@@ -1,106 +0,99 @@ | ||
| const $_documentContainer = document.createElement('template'); | ||
| import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import { getMouseOrFirstTouchEvent, eventInWindow } from './vaadin-dialog-utils.js'; | ||
| $_documentContainer.innerHTML = `<dom-module id="vaadin-dialog-resizable-overlay-styles" theme-for="vaadin-dialog-overlay"> | ||
| <template> | ||
| <style> | ||
| [part='overlay'] { | ||
| position: relative; | ||
| overflow: visible; | ||
| max-height: 100%; | ||
| display: flex; | ||
| } | ||
| registerStyles( | ||
| 'vaadin-dialog-overlay', | ||
| css` | ||
| [part='overlay'] { | ||
| position: relative; | ||
| overflow: visible; | ||
| max-height: 100%; | ||
| display: flex; | ||
| } | ||
| [part='content'] { | ||
| box-sizing: border-box; | ||
| height: 100%; | ||
| } | ||
| [part='content'] { | ||
| box-sizing: border-box; | ||
| height: 100%; | ||
| } | ||
| .resizer-container { | ||
| overflow: auto; | ||
| flex-grow: 1; | ||
| } | ||
| .resizer-container { | ||
| overflow: auto; | ||
| flex-grow: 1; | ||
| } | ||
| [part='overlay'][style] .resizer-container { | ||
| min-height: 100%; | ||
| width: 100%; | ||
| } | ||
| [part='overlay'][style] .resizer-container { | ||
| min-height: 100%; | ||
| width: 100%; | ||
| } | ||
| :host(:not([resizable])) .resizer { | ||
| display: none; | ||
| } | ||
| :host(:not([resizable])) .resizer { | ||
| display: none; | ||
| } | ||
| .resizer { | ||
| position: absolute; | ||
| height: 16px; | ||
| width: 16px; | ||
| } | ||
| .resizer { | ||
| position: absolute; | ||
| height: 16px; | ||
| width: 16px; | ||
| } | ||
| .resizer.edge { | ||
| height: 8px; | ||
| width: 8px; | ||
| top: -4px; | ||
| right: -4px; | ||
| bottom: -4px; | ||
| left: -4px; | ||
| } | ||
| .resizer.edge { | ||
| height: 8px; | ||
| width: 8px; | ||
| top: -4px; | ||
| right: -4px; | ||
| bottom: -4px; | ||
| left: -4px; | ||
| } | ||
| .resizer.edge.n { | ||
| width: auto; | ||
| bottom: auto; | ||
| cursor: ns-resize; | ||
| } | ||
| .resizer.edge.n { | ||
| width: auto; | ||
| bottom: auto; | ||
| cursor: ns-resize; | ||
| } | ||
| .resizer.ne { | ||
| top: -4px; | ||
| right: -4px; | ||
| cursor: nesw-resize; | ||
| } | ||
| .resizer.ne { | ||
| top: -4px; | ||
| right: -4px; | ||
| cursor: nesw-resize; | ||
| } | ||
| .resizer.edge.e { | ||
| height: auto; | ||
| left: auto; | ||
| cursor: ew-resize; | ||
| } | ||
| .resizer.edge.e { | ||
| height: auto; | ||
| left: auto; | ||
| cursor: ew-resize; | ||
| } | ||
| .resizer.se { | ||
| bottom: -4px; | ||
| right: -4px; | ||
| cursor: nwse-resize; | ||
| } | ||
| .resizer.se { | ||
| bottom: -4px; | ||
| right: -4px; | ||
| cursor: nwse-resize; | ||
| } | ||
| .resizer.edge.s { | ||
| width: auto; | ||
| top: auto; | ||
| cursor: ns-resize; | ||
| } | ||
| .resizer.edge.s { | ||
| width: auto; | ||
| top: auto; | ||
| cursor: ns-resize; | ||
| } | ||
| .resizer.sw { | ||
| bottom: -4px; | ||
| left: -4px; | ||
| cursor: nesw-resize; | ||
| } | ||
| .resizer.sw { | ||
| bottom: -4px; | ||
| left: -4px; | ||
| cursor: nesw-resize; | ||
| } | ||
| .resizer.edge.w { | ||
| height: auto; | ||
| right: auto; | ||
| cursor: ew-resize; | ||
| } | ||
| .resizer.edge.w { | ||
| height: auto; | ||
| right: auto; | ||
| cursor: ew-resize; | ||
| } | ||
| .resizer.nw { | ||
| top: -4px; | ||
| left: -4px; | ||
| cursor: nwse-resize; | ||
| } | ||
| .resizer.nw { | ||
| top: -4px; | ||
| left: -4px; | ||
| cursor: nwse-resize; | ||
| } | ||
| `, | ||
| { moduleId: 'vaadin-dialog-resizable-overlay-styles' } | ||
| ); | ||
| /* IE11 -only CSS */ | ||
| _:-ms-fullscreen, | ||
| [part='overlay'] { | ||
| max-height: none; | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module>`; | ||
| document.head.appendChild($_documentContainer.content); | ||
| /** | ||
@@ -111,2 +104,16 @@ * @polymerMixin | ||
| class VaadinDialogResizableMixin extends superClass { | ||
| static get properties() { | ||
| return { | ||
| /** | ||
| * Set to true to enable resizing the dialog by dragging the corners and edges. | ||
| * @type {boolean} | ||
| */ | ||
| resizable: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| } | ||
| }; | ||
| } | ||
| /** @protected */ | ||
@@ -117,3 +124,3 @@ ready() { | ||
| this._originalMouseCoords = {}; | ||
| this._resizeListeners = {start: {}, resize: {}, stop: {}}; | ||
| this._resizeListeners = { start: {}, resize: {}, stop: {} }; | ||
| this._addResizeListeners(); | ||
@@ -155,5 +162,5 @@ } | ||
| this._originalBounds = this._getOverlayBounds(); | ||
| const event = this.__getMouseOrFirstTouchEvent(e); | ||
| this._originalMouseCoords = {top: event.pageY, left: event.pageX}; | ||
| this._originalBounds = this.$.overlay.getBounds(); | ||
| const event = getMouseOrFirstTouchEvent(e); | ||
| this._originalMouseCoords = { top: event.pageY, left: event.pageX }; | ||
| window.addEventListener('mousemove', this._resizeListeners.resize[direction]); | ||
@@ -164,3 +171,3 @@ window.addEventListener('touchmove', this._resizeListeners.resize[direction]); | ||
| if (this.$.overlay.$.overlay.style.position !== 'absolute') { | ||
| this._setBounds(this._originalBounds); | ||
| this.$.overlay.setBounds(this._originalBounds); | ||
| } | ||
@@ -176,4 +183,4 @@ } | ||
| _resize(e, resizer) { | ||
| const event = this.__getMouseOrFirstTouchEvent(e); | ||
| if (this._eventInWindow(event)) { | ||
| const event = getMouseOrFirstTouchEvent(e); | ||
| if (eventInWindow(event)) { | ||
| const minimumSize = 40; | ||
@@ -186,3 +193,3 @@ resizer.split('').forEach((direction) => { | ||
| if (height > minimumSize) { | ||
| this._setBounds({top, height}); | ||
| this.$.overlay.setBounds({ top, height }); | ||
| } | ||
@@ -194,3 +201,3 @@ break; | ||
| if (width > minimumSize) { | ||
| this._setBounds({width}); | ||
| this.$.overlay.setBounds({ width }); | ||
| } | ||
@@ -202,3 +209,3 @@ break; | ||
| if (height > minimumSize) { | ||
| this._setBounds({height}); | ||
| this.$.overlay.setBounds({ height }); | ||
| } | ||
@@ -211,3 +218,3 @@ break; | ||
| if (width > minimumSize) { | ||
| this._setBounds({left, width}); | ||
| this.$.overlay.setBounds({ left, width }); | ||
| } | ||
@@ -232,3 +239,3 @@ break; | ||
| window.removeEventListener('touchend', this._resizeListeners.stop[direction]); | ||
| this.dispatchEvent(new CustomEvent('resize', {detail: this._getResizeDimensions()})); | ||
| this.dispatchEvent(new CustomEvent('resize', { detail: this._getResizeDimensions() })); | ||
| } | ||
@@ -242,10 +249,13 @@ | ||
| const scrollPosition = this.$.overlay.$.resizerContainer.scrollTop; | ||
| const {width, height} = getComputedStyle(this.$.overlay.$.overlay); | ||
| const { width, height } = getComputedStyle(this.$.overlay.$.overlay); | ||
| const content = this.$.overlay.$.content; | ||
| content.setAttribute('style', 'position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: content-box; height: auto;'); | ||
| const {width: contentWidth, height: contentHeight} = getComputedStyle(content); | ||
| content.setAttribute( | ||
| 'style', | ||
| 'position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: content-box; height: auto;' | ||
| ); | ||
| const { width: contentWidth, height: contentHeight } = getComputedStyle(content); | ||
| content.removeAttribute('style'); | ||
| this.$.overlay.$.resizerContainer.scrollTop = scrollPosition; | ||
| return {width, height, contentWidth, contentHeight}; | ||
| return { width, height, contentWidth, contentHeight }; | ||
| } | ||
| }; |
@@ -1,34 +0,11 @@ | ||
| /** | ||
| * DO NOT EDIT | ||
| * | ||
| * This file was automatically generated by | ||
| * https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations | ||
| * | ||
| * To modify these typings, edit the source file(s): | ||
| * src/vaadin-dialog.js | ||
| */ | ||
| import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
| import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js'; | ||
| // tslint:disable:variable-name Describing an API that's defined elsewhere. | ||
| import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js'; | ||
| import {PolymerElement} from '@polymer/polymer/polymer-element.js'; | ||
| import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js'; | ||
| import {OverlayElement} from '@vaadin/vaadin-overlay/src/vaadin-overlay.js'; | ||
| import { DialogEventMap, DialogRenderer } from './interfaces'; | ||
| 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'; | ||
| import {DialogDraggableMixin} from './vaadin-dialog-draggable-mixin.js'; | ||
| import {DialogResizableMixin} from './vaadin-dialog-resizable-mixin.js'; | ||
| import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; | ||
| import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js'; | ||
| import {html} from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -86,10 +63,9 @@ * `<vaadin-dialog>` is a Web Component for creating customized modal dialogs. The content of the | ||
| * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki) | ||
| * | ||
| * @fires {CustomEvent} resize - Fired when the dialog resize is finished. | ||
| * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes. | ||
| */ | ||
| declare class DialogElement extends | ||
| ThemePropertyMixin( | ||
| ElementMixin( | ||
| DialogDraggableMixin( | ||
| DialogResizableMixin( | ||
| PolymerElement)))) { | ||
| declare class DialogElement extends ThemePropertyMixin( | ||
| ElementMixin(DialogDraggableMixin(DialogResizableMixin(HTMLElement))) | ||
| ) { | ||
| /** | ||
@@ -118,5 +94,6 @@ * True if the overlay is currently displayed. | ||
| */ | ||
| ariaLabel: string|null|undefined; | ||
| _contentTemplate: HTMLTemplateElement|null|undefined; | ||
| ariaLabel: string | null | undefined; | ||
| _contentTemplate: HTMLTemplateElement | null | undefined; | ||
| /** | ||
@@ -129,3 +106,3 @@ * Custom function for rendering the content of the dialog. | ||
| */ | ||
| renderer: DialogRenderer|null|undefined; | ||
| renderer: DialogRenderer | null | undefined; | ||
@@ -137,20 +114,2 @@ /** | ||
| /** | ||
| * Set to true to enable repositioning the dialog by clicking and dragging. | ||
| * | ||
| * By default, only the overlay area can be used to drag the element. But, | ||
| * a child element can be marked as a draggable area by adding a | ||
| * "`draggable`" class to it, this will by default make all of its children draggable also. | ||
| * If you want a child element to be draggable | ||
| * but still have its children non-draggable (by default), mark it with | ||
| * "`draggable-leaf-only`" class name. | ||
| */ | ||
| draggable: boolean; | ||
| /** | ||
| * Set to true to enable resizing the dialog by dragging the corners and edges. | ||
| */ | ||
| resizable: boolean; | ||
| ready(): void; | ||
| disconnectedCallback(): void; | ||
| _setTemplateFromNodes(nodes: Node[]): void; | ||
@@ -162,21 +121,22 @@ | ||
| render(): void; | ||
| _setBounds(bounds: DialogOverlayBoundsParam): void; | ||
| _getOverlayBounds(): DialogOverlayBounds; | ||
| _eventInWindow(e: MouseEvent|TouchEvent): boolean; | ||
| __getMouseOrFirstTouchEvent(e: MouseEvent|TouchEvent): MouseEvent|Touch; | ||
| addEventListener<K extends keyof DialogEventMap>( | ||
| type: K, | ||
| listener: (this: DialogElement, ev: DialogEventMap[K]) => void, | ||
| options?: boolean | AddEventListenerOptions | ||
| ): void; | ||
| removeEventListener<K extends keyof DialogEventMap>( | ||
| type: K, | ||
| listener: (this: DialogElement, ev: DialogEventMap[K]) => void, | ||
| options?: boolean | EventListenerOptions | ||
| ): void; | ||
| } | ||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| "vaadin-dialog": DialogElement; | ||
| 'vaadin-dialog': DialogElement; | ||
| } | ||
| } | ||
| export {DialogElement}; | ||
| import {DialogRenderer} from '../@types/interfaces'; | ||
| import {DialogOverlayBoundsParam} from '../@types/interfaces'; | ||
| import {DialogOverlayBounds} from '../@types/interfaces'; | ||
| export { DialogElement }; |
@@ -6,5 +6,5 @@ /** | ||
| */ | ||
| import { PolymerElement } from '@polymer/polymer/polymer-element.js'; | ||
| import '@polymer/polymer/lib/utils/templatize.js'; | ||
| import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; | ||
| import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; | ||
| import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js'; | ||
| import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js'; | ||
@@ -14,28 +14,24 @@ import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
| import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js'; | ||
| import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import { DialogDraggableMixin } from './vaadin-dialog-draggable-mixin.js'; | ||
| import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js'; | ||
| import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; | ||
| import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = document.createElement('template'); | ||
| $_documentContainer.innerHTML = `<dom-module id="vaadin-dialog-overlay-styles" theme-for="vaadin-dialog-overlay"> | ||
| <template> | ||
| <style> | ||
| /* | ||
| NOTE(platosha): Make some min-width to prevent collapsing of the content | ||
| taking the parent width, e. g., <vaadin-grid> and such. | ||
| */ | ||
| [part="content"] { | ||
| min-width: 12em; /* matches the default <vaadin-text-field> width */ | ||
| } | ||
| registerStyles( | ||
| 'vaadin-dialog-overlay', | ||
| css` | ||
| /* | ||
| NOTE(platosha): Make some min-width to prevent collapsing of the content | ||
| taking the parent width, e. g., <vaadin-grid> and such. | ||
| */ | ||
| [part='content'] { | ||
| min-width: 12em; /* matches the default <vaadin-text-field> width */ | ||
| } | ||
| :host([has-bounds-set]) [part="overlay"] { | ||
| max-width: none; | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module>`; | ||
| :host([has-bounds-set]) [part='overlay'] { | ||
| max-width: none; | ||
| } | ||
| `, | ||
| { moduleId: 'vaadin-dialog-overlay-styles' } | ||
| ); | ||
| document.head.appendChild($_documentContainer.content); | ||
| let memoizedTemplate; | ||
@@ -51,3 +47,2 @@ | ||
| * | ||
| * @extends PolymerElement | ||
| * @private | ||
@@ -81,2 +76,55 @@ */ | ||
| } | ||
| /** | ||
| * Updates the coordinates of the overlay. | ||
| * @param {!DialogOverlayBoundsParam} bounds | ||
| */ | ||
| setBounds(bounds) { | ||
| const overlay = this.$.overlay; | ||
| const parsedBounds = Object.assign({}, bounds); | ||
| if (overlay.style.position !== 'absolute') { | ||
| overlay.style.position = 'absolute'; | ||
| this.setAttribute('has-bounds-set', ''); | ||
| this.__forceSafariReflow(); | ||
| } | ||
| for (const arg in parsedBounds) { | ||
| if (typeof parsedBounds[arg] === 'number') { | ||
| parsedBounds[arg] = `${parsedBounds[arg]}px`; | ||
| } | ||
| } | ||
| Object.assign(overlay.style, parsedBounds); | ||
| } | ||
| /** | ||
| * Retrieves the coordinates of the overlay. | ||
| * @return {!DialogOverlayBounds} | ||
| */ | ||
| getBounds() { | ||
| const overlayBounds = this.$.overlay.getBoundingClientRect(); | ||
| const containerBounds = this.getBoundingClientRect(); | ||
| const top = overlayBounds.top - containerBounds.top; | ||
| const left = overlayBounds.left - containerBounds.left; | ||
| const width = overlayBounds.width; | ||
| const height = overlayBounds.height; | ||
| return { top, left, width, height }; | ||
| } | ||
| /** | ||
| * Safari 13 renders overflowing elements incorrectly. | ||
| * This forces it to recalculate height. | ||
| * @private | ||
| */ | ||
| __forceSafariReflow() { | ||
| const scrollPosition = this.$.resizerContainer.scrollTop; | ||
| const overlay = this.$.overlay; | ||
| overlay.style.display = 'block'; | ||
| requestAnimationFrame(() => { | ||
| overlay.style.display = ''; | ||
| this.$.resizerContainer.scrollTop = scrollPosition; | ||
| }); | ||
| } | ||
| } | ||
@@ -86,5 +134,3 @@ | ||
| /** | ||
| * | ||
| * `<vaadin-dialog>` is a Web Component for creating customized modal dialogs. The content of the | ||
@@ -142,3 +188,6 @@ * dialog can be populated in two ways: imperatively by using renderer callback function and | ||
| * | ||
| * @extends PolymerElement | ||
| * @fires {CustomEvent} resize - Fired when the dialog resize is finished. | ||
| * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes. | ||
| * | ||
| * @extends HTMLElement | ||
| * @mixes ThemePropertyMixin | ||
@@ -148,21 +197,26 @@ * @mixes ElementMixin | ||
| * @mixes DialogResizableMixin | ||
| * @demo demo/index.html | ||
| */ | ||
| class DialogElement extends | ||
| ThemePropertyMixin( | ||
| ElementMixin( | ||
| DialogDraggableMixin( | ||
| DialogResizableMixin( | ||
| PolymerElement)))) { | ||
| class DialogElement extends ThemePropertyMixin( | ||
| ElementMixin(DialogDraggableMixin(DialogResizableMixin(PolymerElement))) | ||
| ) { | ||
| static get template() { | ||
| return html` | ||
| <style> | ||
| :host { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <style> | ||
| :host { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <vaadin-dialog-overlay id="overlay" on-opened-changed="_onOverlayOpened" on-mousedown="_bringOverlayToFront" on-touchstart="_bringOverlayToFront" theme\$="[[theme]]" modeless="[[modeless]]" with-backdrop="[[!modeless]]" resizable\$="[[resizable]]" focus-trap=""> | ||
| </vaadin-dialog-overlay> | ||
| `; | ||
| <vaadin-dialog-overlay | ||
| id="overlay" | ||
| on-opened-changed="_onOverlayOpened" | ||
| on-mousedown="_bringOverlayToFront" | ||
| on-touchstart="_bringOverlayToFront" | ||
| theme$="[[theme]]" | ||
| modeless="[[modeless]]" | ||
| with-backdrop="[[!modeless]]" | ||
| resizable$="[[resizable]]" | ||
| focus-trap | ||
| ></vaadin-dialog-overlay> | ||
| `; | ||
| } | ||
@@ -175,3 +229,3 @@ | ||
| static get version() { | ||
| return '2.5.2'; | ||
| return '3.0.0-alpha1'; | ||
| } | ||
@@ -246,30 +300,2 @@ | ||
| /** | ||
| * Set to true to enable repositioning the dialog by clicking and dragging. | ||
| * | ||
| * By default, only the overlay area can be used to drag the element. But, | ||
| * a child element can be marked as a draggable area by adding a | ||
| * "`draggable`" class to it, this will by default make all of its children draggable also. | ||
| * If you want a child element to be draggable | ||
| * but still have its children non-draggable (by default), mark it with | ||
| * "`draggable-leaf-only`" class name. | ||
| * | ||
| * @type {boolean} | ||
| */ | ||
| draggable: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| }, | ||
| /** | ||
| * Set to true to enable resizing the dialog by dragging the corners and edges. | ||
| * @type {boolean} | ||
| */ | ||
| resizable: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| }, | ||
| /** @private */ | ||
@@ -298,3 +324,3 @@ _oldTemplate: Object, | ||
| this._observer = new FlattenedNodesObserver(this, info => { | ||
| this._observer = new FlattenedNodesObserver(this, (info) => { | ||
| this._setTemplateFromNodes(info.addedNodes); | ||
@@ -309,3 +335,4 @@ }); | ||
| _setTemplateFromNodes(nodes) { | ||
| this._contentTemplate = nodes.filter(node => node.localName && node.localName === 'template')[0] || this._contentTemplate; | ||
| this._contentTemplate = | ||
| nodes.filter((node) => node.localName && node.localName === 'template')[0] || this._contentTemplate; | ||
| } | ||
@@ -340,3 +367,3 @@ | ||
| if (renderer) { | ||
| this.$.overlay.setProperties({owner: this, renderer: renderer}); | ||
| this.$.overlay.setProperties({ owner: this, renderer: renderer }); | ||
| } | ||
@@ -395,25 +422,2 @@ } | ||
| /** | ||
| * @param {!DialogOverlayBoundsParam} bounds | ||
| * @protected | ||
| */ | ||
| _setBounds(bounds) { | ||
| const overlay = this.$.overlay.$.overlay; | ||
| const parsedBounds = Object.assign({}, bounds); | ||
| if (overlay.style.position !== 'absolute') { | ||
| overlay.style.position = 'absolute'; | ||
| this.$.overlay.setAttribute('has-bounds-set', ''); | ||
| this.__forceSafariReflow(); | ||
| } | ||
| for (const arg in parsedBounds) { | ||
| if (typeof parsedBounds[arg] === 'number') { | ||
| parsedBounds[arg] = `${parsedBounds[arg]}px`; | ||
| } | ||
| } | ||
| Object.assign(overlay.style, parsedBounds); | ||
| } | ||
| /** @private */ | ||
@@ -425,50 +429,2 @@ _bringOverlayToFront() { | ||
| } | ||
| /** | ||
| * @return {!DialogOverlayBounds} | ||
| * @protected | ||
| */ | ||
| _getOverlayBounds() { | ||
| const overlay = this.$.overlay.$.overlay; | ||
| const overlayBounds = overlay.getBoundingClientRect(); | ||
| const containerBounds = this.$.overlay.getBoundingClientRect(); | ||
| const top = overlayBounds.top - containerBounds.top; | ||
| const left = overlayBounds.left - containerBounds.left; | ||
| const width = overlayBounds.width; | ||
| const height = overlayBounds.height; | ||
| return {top, left, width, height}; | ||
| } | ||
| /** | ||
| * @param {!MouseEvent | !TouchEvent} e | ||
| * @return {boolean} | ||
| * @protected | ||
| */ | ||
| _eventInWindow(e) { | ||
| return e.clientX >= 0 && e.clientX <= window.innerWidth && e.clientY >= 0 && e.clientY <= window.innerHeight; | ||
| } | ||
| /** | ||
| * @param {!MouseEvent | !TouchEvent} e | ||
| * @return {!MouseEvent | !Touch} | ||
| * @protected | ||
| */ | ||
| __getMouseOrFirstTouchEvent(e) { | ||
| return e.touches ? e.touches[0] : e; | ||
| } | ||
| /** | ||
| * Safari 13 renders overflowing elements incorrectly. | ||
| * This forces it to recalculate height. | ||
| * @private | ||
| */ | ||
| __forceSafariReflow() { | ||
| const scrollPosition = this.$.overlay.$.resizerContainer.scrollTop; | ||
| const overlay = this.$.overlay.$.overlay; | ||
| overlay.style.display = 'block'; | ||
| window.requestAnimationFrame(() => { | ||
| overlay.style.display = ''; | ||
| this.$.overlay.$.resizerContainer.scrollTop = scrollPosition; | ||
| }); | ||
| } | ||
| } | ||
@@ -475,0 +431,0 @@ |
@@ -0,67 +1,65 @@ | ||
| import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import '@vaadin/vaadin-lumo-styles/spacing.js'; | ||
| import '@vaadin/vaadin-lumo-styles/mixins/overlay.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = html`<dom-module id="lumo-dialog" theme-for="vaadin-dialog-overlay"> | ||
| <template> | ||
| <style include="lumo-overlay"> | ||
| /* Optical centering */ | ||
| :host::before, | ||
| :host::after { | ||
| content: ""; | ||
| flex-basis: 0; | ||
| flex-grow: 1; | ||
| } | ||
| registerStyles( | ||
| 'vaadin-dialog-overlay', | ||
| css` | ||
| /* Optical centering */ | ||
| :host::before, | ||
| :host::after { | ||
| content: ''; | ||
| flex-basis: 0; | ||
| flex-grow: 1; | ||
| } | ||
| :host::after { | ||
| flex-grow: 1.1; | ||
| } | ||
| :host::after { | ||
| flex-grow: 1.1; | ||
| } | ||
| [part="overlay"] { | ||
| box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-xl); | ||
| background-image: none; | ||
| outline: none; | ||
| -webkit-tap-highlight-color: transparent; | ||
| } | ||
| [part='overlay'] { | ||
| box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-xl); | ||
| background-image: none; | ||
| outline: none; | ||
| -webkit-tap-highlight-color: transparent; | ||
| } | ||
| [part="content"] { | ||
| padding: var(--lumo-space-l); | ||
| } | ||
| [part='content'] { | ||
| padding: var(--lumo-space-l); | ||
| } | ||
| /* Animations */ | ||
| /* Animations */ | ||
| :host([opening]), | ||
| :host([closing]) { | ||
| animation: 0.25s lumo-overlay-dummy-animation; | ||
| } | ||
| :host([opening]), | ||
| :host([closing]) { | ||
| animation: 0.25s lumo-overlay-dummy-animation; | ||
| } | ||
| :host([opening]) [part="overlay"] { | ||
| animation: 0.12s 0.05s vaadin-dialog-enter cubic-bezier(.215, .61, .355, 1) both; | ||
| } | ||
| :host([opening]) [part='overlay'] { | ||
| animation: 0.12s 0.05s vaadin-dialog-enter cubic-bezier(0.215, 0.61, 0.355, 1) both; | ||
| } | ||
| @keyframes vaadin-dialog-enter { | ||
| 0% { | ||
| opacity: 0; | ||
| transform: scale(0.95); | ||
| } | ||
| @keyframes vaadin-dialog-enter { | ||
| 0% { | ||
| opacity: 0; | ||
| transform: scale(0.95); | ||
| } | ||
| } | ||
| :host([closing]) [part="overlay"] { | ||
| animation: 0.1s 0.03s vaadin-dialog-exit cubic-bezier(.55, .055, .675, .19) both; | ||
| } | ||
| :host([closing]) [part='overlay'] { | ||
| animation: 0.1s 0.03s vaadin-dialog-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both; | ||
| } | ||
| :host([closing]) [part="backdrop"] { | ||
| animation-delay: 0.05s; | ||
| } | ||
| :host([closing]) [part='backdrop'] { | ||
| animation-delay: 0.05s; | ||
| } | ||
| @keyframes vaadin-dialog-exit { | ||
| 100% { | ||
| opacity: 0; | ||
| transform: scale(1.02); | ||
| } | ||
| @keyframes vaadin-dialog-exit { | ||
| 100% { | ||
| opacity: 0; | ||
| transform: scale(1.02); | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module>`; | ||
| document.head.appendChild($_documentContainer.content); | ||
| } | ||
| `, | ||
| { include: ['lumo-overlay'], moduleId: 'lumo-dialog' } | ||
| ); |
@@ -0,23 +1,21 @@ | ||
| import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import '@vaadin/vaadin-material-styles/mixins/overlay.js'; | ||
| import '@vaadin/vaadin-material-styles/shadow.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = html`<dom-module id="material-dialog" theme-for="vaadin-dialog-overlay"> | ||
| <template> | ||
| <style include="material-overlay"> | ||
| [part="overlay"] { | ||
| box-shadow: var(--material-shadow-elevation-24dp); | ||
| outline: none; | ||
| max-width: 560px; | ||
| min-width: 280px; | ||
| -webkit-tap-highlight-color: transparent; | ||
| } | ||
| registerStyles( | ||
| 'vaadin-dialog-overlay', | ||
| css` | ||
| [part='overlay'] { | ||
| box-shadow: var(--material-shadow-elevation-24dp); | ||
| outline: none; | ||
| max-width: 560px; | ||
| min-width: 280px; | ||
| -webkit-tap-highlight-color: transparent; | ||
| } | ||
| [part="content"] { | ||
| padding: 24px; | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module>`; | ||
| document.head.appendChild($_documentContainer.content); | ||
| [part='content'] { | ||
| padding: 24px; | ||
| } | ||
| `, | ||
| { include: ['material-overlay'], moduleId: 'material-dialog' } | ||
| ); |
@@ -1,15 +0,2 @@ | ||
| /** | ||
| * DO NOT EDIT | ||
| * | ||
| * This file was automatically generated by | ||
| * https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations | ||
| * | ||
| * To modify these typings, edit the source file(s): | ||
| * vaadin-dialog.js | ||
| */ | ||
| // tslint:disable:variable-name Describing an API that's defined elsewhere. | ||
| export * from './src/vaadin-dialog.js'; | ||
| export * from './@types/interfaces'; | ||
| export * from './src/interfaces'; |
New alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by12.5%
18
Worsened metrics
- Total package byte prevSize
- decreased by-1.81%
51461
- Dev dependency count
- increased by285.71%
27
- Lines of code
- decreased by-1.46%
1009
- Number of low quality alerts
- increased byInfinity%
1
- Number of lines in readme file
- decreased by-23.78%
109