New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@vaadin/vaadin-tabs
Advanced tools
@vaadin/vaadin-tabs - npm Package Compare versions
Comparing version 3.0.5 to 4.0.0-alpha1
| { | ||
| "name": "@vaadin/vaadin-tabs", | ||
| "version": "4.0.0-alpha1", | ||
| "description": "vaadin-tabs", | ||
| "main": "vaadin-tabs.js", | ||
| "module": "vaadin-tabs.js", | ||
| "repository": "vaadin/vaadin-tabs", | ||
| "keywords": [ | ||
@@ -8,9 +13,4 @@ "Vaadin", | ||
| "web-component", | ||
| "polymer" | ||
| "lit-element" | ||
| ], | ||
| "repository": "vaadin/vaadin-tabs", | ||
| "homepage": "https://vaadin.com/components", | ||
| "name": "@vaadin/vaadin-tabs", | ||
| "version": "3.0.5", | ||
| "main": "vaadin-tabs.js", | ||
| "author": "Vaadin Ltd", | ||
@@ -21,34 +21,68 @@ "license": "Apache-2.0", | ||
| }, | ||
| "homepage": "https://vaadin.com/components", | ||
| "files": [ | ||
| "vaadin-*.js", | ||
| "src", | ||
| "theme" | ||
| "/vaadin-*.ts", | ||
| "/vaadin-*.d.ts", | ||
| "/vaadin-*.d.ts.map", | ||
| "/vaadin-*.js", | ||
| "/vaadin-*.js.map", | ||
| "/src/", | ||
| "/theme/" | ||
| ], | ||
| "resolutions": { | ||
| "inherits": "2.0.3", | ||
| "samsam": "1.1.3", | ||
| "supports-color": "3.1.2", | ||
| "type-detect": "1.0.0" | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "lint-staged" | ||
| } | ||
| }, | ||
| "lint-staged": { | ||
| "*.ts": [ | ||
| "eslint --fix", | ||
| "prettier --write", | ||
| "git add" | ||
| ] | ||
| }, | ||
| "scripts": { | ||
| "analyze": "wca analyze src/vaadin-tabs.ts --format json --outFile custom-elements.json", | ||
| "build": "tsc && replace-in-file \"/(import|from)( '[.]+/)(.*)(?<!.js)(';)/g\" \"\\$1\\$2\\$3.js\\$4\" vaadin-*.{js,d.ts},src/*.{js,d.ts},theme/**/*.{js,d.ts} --isRegex --verbose", | ||
| "dist": "rimraf dist && npm run analyze && npm run build && rollup -c rollup.config.js && cp custom-elements.json dist", | ||
| "check:version": "magi check-version", | ||
| "gemini": "gemini update test/visual", | ||
| "lint": "npm-run-all --parallel lint:*", | ||
| "lint:css": "stylelint src/*.ts theme/**/*.ts test/*.ts", | ||
| "lint:js": "eslint src theme test --ext .ts --ignore-path .gitignore", | ||
| "lint:lit": "lit-analyzer src --strict", | ||
| "prepublishOnly": "npm run build", | ||
| "prestart": "npm run analyze", | ||
| "preversion": "magi update-version", | ||
| "serve:dist": "es-dev-server --app-index dist/index.html --open", | ||
| "start": "es-dev-server --file-extensions .ts --node-resolve --babel --watch --port 3000 --open", | ||
| "test": "karma start", | ||
| "test:debug": "karma start --single-run false --browsers Firefox", | ||
| "test:sauce": "cross-env TEST_PLATFORM=sauce karma start", | ||
| "test:visual": "npm run build && gemini test test/visual" | ||
| }, | ||
| "dependencies": { | ||
| "@polymer/polymer": "^3.0.0", | ||
| "@polymer/iron-resizable-behavior": "^3.0.0", | ||
| "@vaadin/vaadin-themable-mixin": "^1.2.1", | ||
| "@vaadin/vaadin-list-mixin": "^2.1.0", | ||
| "@vaadin/vaadin-item": "^2.1.0", | ||
| "@vaadin/vaadin-lumo-styles": "^1.1.0", | ||
| "@vaadin/vaadin-material-styles": "^1.1.0", | ||
| "@vaadin/vaadin-element-mixin": "^2.0.0" | ||
| "@vaadin/element-base": "^0.2.0", | ||
| "@vaadin/active-state-mixin": "^0.1.1", | ||
| "@vaadin/disabled-state-mixin": "^0.1.0", | ||
| "@vaadin/focus-visible-mixin": "^0.1.1", | ||
| "@vaadin/keyboard-direction-mixin": "^0.1.3", | ||
| "@vaadin/orientation-mixin": "^0.1.1", | ||
| "@vaadin/resizable-mixin": "^0.1.0", | ||
| "@vaadin/roving-tabindex-mixin": "^0.1.4", | ||
| "@vaadin/selected-state-mixin": "^0.1.1", | ||
| "@vaadin/selection-in-view-mixin": "^0.1.6", | ||
| "@vaadin/single-selection-mixin": "^0.1.3", | ||
| "@vaadin/slotted-items-mixin": "^0.1.2", | ||
| "@vaadin/themable-element": "^0.1.2", | ||
| "@vaadin/vaadin-lumo-styles": "^1.6.0", | ||
| "@vaadin/vaadin-material-styles": "^1.3.2", | ||
| "@vaadin/vaadin-themable-mixin": "^1.5.2", | ||
| "lit-element": "^2.0.0", | ||
| "lit-html": "^1.0.0", | ||
| "tslib": "^1.10.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@polymer/iron-component-page": "^4.0.0", | ||
| "@polymer/iron-demo-helpers": "^3.0.0", | ||
| "@polymer/iron-icons": "^3.0.0", | ||
| "@polymer/iron-icon": "^3.0.0", | ||
| "@polymer/iron-pages": "^3.0.0", | ||
| "@polymer/iron-test-helpers": "^3.0.0", | ||
| "@vaadin/vaadin-demo-helpers": "^3.0.0", | ||
| "@webcomponents/webcomponentsjs": "^2.0.0", | ||
| "wct-browser-legacy": "^1.0.1" | ||
| "@vaadin/vaadin-component-dev-dependencies": "^4.6.0" | ||
| } | ||
| } |
@@ -1,13 +0,5 @@ | ||
| [](https://www.npmjs.com/package/@vaadin/vaadin-tabs) | ||
| [](https://github.com/vaadin/vaadin-tabs/releases) | ||
| [](https://webcomponents.org/element/vaadin/vaadin-tabs) | ||
| [](https://travis-ci.org/vaadin/vaadin-tabs) | ||
| [](https://coveralls.io/github/vaadin/vaadin-tabs?branch=master) | ||
| [](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) | ||
| # <vaadin-tabs> | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-tabs) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-tabs) | ||
| [<vaadin-tabs>](https://vaadin.com/components/vaadin-tabs) is a Web Component providing item navigation part of the [Vaadin components](https://vaadin.com/components). It is designed for menu and tab components. | ||
| # <vaadin-tabs> | ||
| [Live Demo ↗](https://vaadin.com/components/vaadin-tabs/html-examples) | ||
@@ -17,16 +9,15 @@ | | ||
| [](https://www.npmjs.com/package/@vaadin/vaadin-tabs) | ||
| [](https://webcomponents.org/element/vaadin/vaadin-tabs) | ||
| [](https://travis-ci.org/vaadin/vaadin-tabs) | ||
| [](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-tabs) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-tabs) | ||
| [<vaadin-tabs>](https://vaadin.com/components/vaadin-tabs) is a Web Component providing item navigation part of the [Vaadin components](https://vaadin.com/components). It is designed for menu and tab components. | ||
| > ⚠️ This is a pre-release version built with [`LitElement`](https://github.com/Polymer/lit-element), part of the [next generation of Vaadin web components](https://vaadin.com/blog/next-generation-vaadin-components). | ||
| > | ||
| > Looking for Vaadin 14 compatible version? Please see the following branches: | ||
| > - [3.0 branch](https://github.com/vaadin/vaadin-tabs/tree/3.0) (latest stable) | ||
| > - [3.1 branch](https://github.com/vaadin/vaadin-tabs/tree/3.1) (next minor version with incremental improvements) | ||
| <!-- | ||
| ``` | ||
| <custom-element-demo> | ||
| <template> | ||
| <script src="../webcomponentsjs/webcomponents-lite.js"></script> | ||
| <link rel="import" href="vaadin-tabs.html"> | ||
| <next-code-block></next-code-block> | ||
| </template> | ||
| </custom-element-demo> | ||
| ``` | ||
| --> | ||
| ```html | ||
@@ -45,27 +36,5 @@ <vaadin-tabs selected="3"> | ||
| 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-tabs`: | ||
| ```sh | ||
| bower i vaadin/vaadin-tabs --save | ||
| ``` | ||
| Once installed, import it in your application: | ||
| ```html | ||
| <link rel="import" href="bower_components/vaadin-tabs/vaadin-tabs.html"> | ||
| ``` | ||
| ### Polymer 3 and ES Modules Compatible Version | ||
| Install `vaadin-tabs`: | ||
| ```sh | ||
| npm i @vaadin/vaadin-tabs --save | ||
@@ -90,43 +59,39 @@ ``` | ||
| `theme/lumo/vaadin-tab.html` | ||
| `theme/lumo/vaadin-tabs.html` | ||
| `theme/lumo/vaadin-tab.js` | ||
| `theme/lumo/vaadin-tabs.js` | ||
| - The components with the Material theme: | ||
| `theme/material/vaadin-tab.html` | ||
| `theme/material/vaadin-tabs.html` | ||
| `theme/material/vaadin-tab.js` | ||
| `theme/material/vaadin-tabs.js` | ||
| - Alias for `theme/lumo/vaadin-tab.html` | ||
| `theme/lumo/vaadin-tabs.html`: | ||
| - Alias for `theme/lumo/vaadin-tab.js` | ||
| `theme/lumo/vaadin-tabs.js`: | ||
| `vaadin-tab.html` | ||
| `vaadin-tabs.html` | ||
| `vaadin-tab.js` | ||
| `vaadin-tabs.js` | ||
| ## Running demos and tests in a browser | ||
| ## Running demos and API docs in a browser | ||
| 1. Fork the `vaadin-tabs` 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 [npm](https://www.npmjs.com/) installed. | ||
| 1. When in the `vaadin-tabs` directory, run `npm install` and then `bower install` to install dependencies. | ||
| 1. When in the `vaadin-tabs` 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: | ||
| - http://127.0.0.1:3000/components/vaadin-tabs/demo | ||
| - http://127.0.0.1:3000/components/vaadin-tabs/test | ||
| ## Running tests from the command line | ||
| - When in the `vaadin-tabs` directory, run `npm test` | ||
| ## Running tests from the command line | ||
| - To debug tests in the browser, run `npm run test:debug` | ||
| 1. When in the `vaadin-tabs` directory, run `polymer test` | ||
| ## 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 TypeScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.ts` files. | ||
| ## Big Thanks | ||
@@ -139,3 +104,3 @@ | ||
| To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first. | ||
| To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first. | ||
@@ -142,0 +107,0 @@ |
@@ -0,75 +1,18 @@ | ||
| import { __decorate } from "tslib"; | ||
| import { customElement } from 'lit-element'; | ||
| import { TabBase } from './vaadin-tab-base.js'; | ||
| import { TabMixin } from './vaadin-tab-mixin.js'; | ||
| /** | ||
| @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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { ItemMixin } from '@vaadin/vaadin-item/src/vaadin-item-mixin.js'; | ||
| import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
| * `<vaadin-tab>` is a Web Component providing an accessible and customizable tab. | ||
| * | ||
| * ``` | ||
| * <vaadin-tab> | ||
| * Tab 1 | ||
| * </vaadin-tab> | ||
| * ``` | ||
| * | ||
| * The following state attributes are available for styling: | ||
| * | ||
| * Attribute | Description | Part name | ||
| * -----------|-------------|------------ | ||
| * `disabled` | Set to a disabled tab | :host | ||
| * `focused` | Set when the element is focused | :host | ||
| * `focus-ring` | Set when the element is keyboard focused | :host | ||
| * `selected` | Set when the tab is selected | :host | ||
| * `active` | Set when mousedown or enter/spacebar pressed | :host | ||
| * `orientation` | Set to `horizontal` or `vertical` depending on the direction of items | :host | ||
| * | ||
| * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki) | ||
| * | ||
| * @memberof Vaadin | ||
| * @mixes Vaadin.ElementMixin | ||
| * @mixes Vaadin.ThemableMixin | ||
| * @mixes Vaadin.ItemMixin | ||
| */ | ||
| class TabElement extends ElementMixin(ThemableMixin(ItemMixin(PolymerElement))) { | ||
| static get template() { | ||
| return html` | ||
| <slot></slot> | ||
| `; | ||
| } | ||
| static get is() { | ||
| return 'vaadin-tab'; | ||
| } | ||
| static get version() { | ||
| return '3.0.5'; | ||
| } | ||
| ready() { | ||
| super.ready(); | ||
| this.setAttribute('role', 'tab'); | ||
| } | ||
| _onKeyup(event) { | ||
| const willClick = this.hasAttribute('active'); | ||
| super._onKeyup(event); | ||
| if (willClick) { | ||
| const anchor = this.querySelector('a'); | ||
| if (anchor) { | ||
| anchor.click(); | ||
| } | ||
| let VaadinTab = class VaadinTab extends TabMixin(TabBase) { | ||
| static get version() { | ||
| return '4.0.0-alpha1'; | ||
| } | ||
| } | ||
| } | ||
| customElements.define(TabElement.is, TabElement); | ||
| export { TabElement }; | ||
| }; | ||
| VaadinTab.is = 'vaadin-tab'; | ||
| VaadinTab = __decorate([ | ||
| customElement('vaadin-tab') | ||
| ], VaadinTab); | ||
| export { VaadinTab }; | ||
| //# sourceMappingURL=vaadin-tab.js.map |
@@ -1,229 +0,28 @@ | ||
| /** | ||
| @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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { ListMixin } from '@vaadin/vaadin-list-mixin/vaadin-list-mixin.js'; | ||
| import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; | ||
| import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
| import { __decorate } from "tslib"; | ||
| import { customElement } from 'lit-element'; | ||
| import { TabsBase } from './vaadin-tabs-base.js'; | ||
| import { TabsMixin } from './vaadin-tabs-mixin.js'; | ||
| import './vaadin-tab.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js'; | ||
| import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js'; | ||
| const safari10 = /Apple.* Version\/(9|10)/.test(navigator.userAgent); | ||
| /** | ||
| * `<vaadin-tabs>` is a Web Component for easy switching between different views. | ||
| * | ||
| * ``` | ||
| * <vaadin-tabs selected="4"> | ||
| * <vaadin-tab>Page 1</vaadin-tab> | ||
| * <vaadin-tab>Page 2</vaadin-tab> | ||
| * <vaadin-tab>Page 3</vaadin-tab> | ||
| * <vaadin-tab>Page 4</vaadin-tab> | ||
| * </vaadin-tabs> | ||
| * ``` | ||
| * @attr {start | none | both} overflow - Attribute set depending on whether the items fit into viewport. | ||
| * | ||
| * ### Styling | ||
| * @csspart back-button - Button for moving the scroll back | ||
| * @csspart forward-button - Button for moving the scroll forward | ||
| * @csspart tabs - The tabs container | ||
| * | ||
| * The following shadow DOM parts are available for styling: | ||
| * | ||
| * Part name | Description | ||
| * ------------------|-------------------------------------- | ||
| * `back-button` | Button for moving the scroll back | ||
| * `tabs` | The tabs container | ||
| * `forward-button` | Button for moving the scroll forward | ||
| * | ||
| * The following state attributes are available for styling: | ||
| * | ||
| * Attribute | Description | Part name | ||
| * -----------|-------------|------------ | ||
| * `orientation` | Tabs disposition, valid values are `horizontal` and `vertical`. | :host | ||
| * `overflow` | It's set to `start`, `end`, none or both. | :host | ||
| * | ||
| * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki) | ||
| * | ||
| * @memberof Vaadin | ||
| * @mixes Vaadin.ElementMixin | ||
| * @mixes Vaadin.ListMixin | ||
| * @mixes Vaadin.ThemableMixin | ||
| * @demo demo/index.html | ||
| * @event selected-changed - Fired when the `selected` property changes. | ||
| * @event resize - Fired when the element is resized. Non-bubbling. | ||
| */ | ||
| class TabsElement extends | ||
| ElementMixin( | ||
| ListMixin( | ||
| ThemableMixin( | ||
| mixinBehaviors([IronResizableBehavior], PolymerElement)))) { | ||
| static get template() { | ||
| return html` | ||
| <style> | ||
| :host { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| :host([orientation="vertical"]) { | ||
| display: block; | ||
| } | ||
| :host([orientation="horizontal"]) [part="tabs"] { | ||
| flex-grow: 1; | ||
| display: flex; | ||
| align-self: stretch; | ||
| overflow-x: auto; | ||
| -webkit-overflow-scrolling: touch; | ||
| -ms-overflow-style: none; | ||
| } | ||
| /* This seems more future-proof than \`overflow: -moz-scrollbars-none\` which is marked obsolete | ||
| and is no longer guaranteed to work: | ||
| https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Mozilla_Extensions */ | ||
| @-moz-document url-prefix() { | ||
| :host([orientation="horizontal"]) [part="tabs"] { | ||
| overflow: hidden; | ||
| } | ||
| } | ||
| :host([orientation="horizontal"]) [part="tabs"]::-webkit-scrollbar { | ||
| display: none; | ||
| } | ||
| :host([orientation="vertical"]) [part="tabs"] { | ||
| height: 100%; | ||
| overflow-y: auto; | ||
| -webkit-overflow-scrolling: touch; | ||
| } | ||
| [part="back-button"], | ||
| [part="forward-button"] { | ||
| pointer-events: none; | ||
| opacity: 0; | ||
| cursor: default; | ||
| } | ||
| :host([overflow~="start"]) [part="back-button"], | ||
| :host([overflow~="end"]) [part="forward-button"] { | ||
| pointer-events: auto; | ||
| opacity: 1; | ||
| } | ||
| [part="back-button"]::after { | ||
| content: '◀'; | ||
| } | ||
| [part="forward-button"]::after { | ||
| content: '▶'; | ||
| } | ||
| :host([orientation="vertical"]) [part="back-button"], | ||
| :host([orientation="vertical"]) [part="forward-button"] { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <div on-click="_scrollBack" part="back-button"></div> | ||
| <div id="scroll" part="tabs"> | ||
| <slot></slot> | ||
| </div> | ||
| <div on-click="_scrollForward" part="forward-button"></div> | ||
| `; | ||
| } | ||
| static get is() { | ||
| return 'vaadin-tabs'; | ||
| } | ||
| static get version() { | ||
| return '3.0.5'; | ||
| } | ||
| static get properties() { | ||
| return { | ||
| /** | ||
| * Set tabs disposition. Possible values are `horizontal|vertical` | ||
| */ | ||
| orientation: { | ||
| value: 'horizontal', | ||
| type: String | ||
| }, | ||
| /** | ||
| * The index of the selected tab. | ||
| */ | ||
| selected: { | ||
| value: 0, | ||
| type: Number | ||
| } | ||
| }; | ||
| } | ||
| static get observers() { | ||
| return ['_updateOverflow(items.*, vertical)']; | ||
| } | ||
| ready() { | ||
| super.ready(); | ||
| this.addEventListener('iron-resize', () => this._updateOverflow()); | ||
| this._scrollerElement.addEventListener('scroll', () => this._updateOverflow()); | ||
| this.setAttribute('role', 'tablist'); | ||
| // Wait for the vaadin-tab elements to upgrade and get styled | ||
| afterNextRender(this, () => { | ||
| this._updateOverflow(); | ||
| }); | ||
| } | ||
| _scrollForward() { | ||
| this._scroll(this._scrollOffset); | ||
| } | ||
| _scrollBack() { | ||
| this._scroll(-1 * this._scrollOffset); | ||
| } | ||
| get _scrollOffset() { | ||
| return this._vertical ? this._scrollerElement.offsetHeight : this._scrollerElement.offsetWidth; | ||
| } | ||
| get _scrollerElement() { | ||
| return this.$.scroll; | ||
| } | ||
| _updateOverflow() { | ||
| const scrollPosition = this._vertical ? this._scrollerElement.scrollTop : this._scrollerElement.scrollLeft; | ||
| let scrollSize = this._vertical ? this._scrollerElement.scrollHeight : this._scrollerElement.scrollWidth; | ||
| // In Edge we need to adjust the size in 1 pixel | ||
| scrollSize -= 1; | ||
| let overflow = scrollPosition > 0 ? 'start' : ''; | ||
| overflow += scrollPosition + this._scrollOffset < scrollSize ? ' end' : ''; | ||
| overflow ? this.setAttribute('overflow', overflow.trim()) : this.removeAttribute('overflow'); | ||
| this._repaintShadowNodesHack(); | ||
| } | ||
| _repaintShadowNodesHack() { | ||
| // Safari 10 has an issue with repainting shadow root element styles when a host attribute changes. | ||
| // Need this workaround (toggle any inline css property on and off) until the issue gets fixed. | ||
| /* istanbul ignore if */ | ||
| if (safari10 && this.root) { | ||
| const WEBKIT_PROPERTY = '-webkit-backface-visibility'; | ||
| this.root.querySelectorAll('*').forEach(el => { | ||
| el.style[WEBKIT_PROPERTY] = 'visible'; | ||
| el.style[WEBKIT_PROPERTY] = ''; | ||
| }); | ||
| let VaadinTabs = class VaadinTabs extends TabsMixin(TabsBase) { | ||
| static get version() { | ||
| return '4.0.0-alpha1'; | ||
| } | ||
| } | ||
| } | ||
| customElements.define(TabsElement.is, TabsElement); | ||
| export { TabsElement }; | ||
| }; | ||
| VaadinTabs.is = 'vaadin-tabs'; | ||
| VaadinTabs = __decorate([ | ||
| customElement('vaadin-tabs') | ||
| ], VaadinTabs); | ||
| export { VaadinTabs }; | ||
| //# sourceMappingURL=vaadin-tabs.js.map |
@@ -1,197 +0,4 @@ | ||
| import '@vaadin/vaadin-lumo-styles/color.js'; | ||
| import '@vaadin/vaadin-lumo-styles/sizing.js'; | ||
| import '@vaadin/vaadin-lumo-styles/style.js'; | ||
| import '@vaadin/vaadin-lumo-styles/typography.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = html`<dom-module id="lumo-tab" theme-for="vaadin-tab"> | ||
| <template> | ||
| <style> | ||
| :host { | ||
| box-sizing: border-box; | ||
| padding: 0.5rem 0.75rem; | ||
| font-family: var(--lumo-font-family); | ||
| font-size: var(--lumo-font-size-m); | ||
| line-height: var(--lumo-line-height-xs); | ||
| font-weight: 500; | ||
| opacity: 1; | ||
| color: var(--lumo-contrast-60pct); | ||
| transition: 0.15s color, 0.2s transform; | ||
| flex-shrink: 0; | ||
| display: flex; | ||
| align-items: center; | ||
| position: relative; | ||
| cursor: pointer; | ||
| transform-origin: 50% 100%; | ||
| outline: none; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| overflow: hidden; | ||
| min-width: var(--lumo-size-m); | ||
| -webkit-user-select: none; | ||
| -moz-user-select: none; | ||
| -ms-user-select: none; | ||
| user-select: none; | ||
| } | ||
| :host(:not([orientation="vertical"])) { | ||
| text-align: center; | ||
| } | ||
| :host([orientation="vertical"]) { | ||
| transform-origin: 0% 50%; | ||
| padding: 0.25rem 1rem; | ||
| min-height: var(--lumo-size-m); | ||
| min-width: 0; | ||
| } | ||
| :host(:hover), | ||
| :host([focus-ring]) { | ||
| color: var(--lumo-body-text-color); | ||
| } | ||
| :host([selected]) { | ||
| color: var(--lumo-primary-text-color); | ||
| transition: 0.6s color; | ||
| } | ||
| :host([active]:not([selected])) { | ||
| color: var(--lumo-primary-text-color); | ||
| transition-duration: 0.1s; | ||
| } | ||
| :host::before, | ||
| :host::after { | ||
| content: ""; | ||
| position: absolute; | ||
| display: var(--_lumo-tab-marker-display, block); | ||
| bottom: 0; | ||
| left: 50%; | ||
| width: var(--lumo-size-s); | ||
| height: 2px; | ||
| background-color: var(--lumo-contrast-60pct); | ||
| border-radius: var(--lumo-border-radius) var(--lumo-border-radius) 0 0; | ||
| transform: translateX(-50%) scale(0); | ||
| transform-origin: 50% 100%; | ||
| transition: 0.14s transform cubic-bezier(.12, .32, .54, 1); | ||
| will-change: transform; | ||
| } | ||
| :host([selected])::before, | ||
| :host([selected])::after { | ||
| background-color: var(--lumo-primary-color); | ||
| } | ||
| :host([orientation="vertical"])::before, | ||
| :host([orientation="vertical"])::after { | ||
| left: 0; | ||
| bottom: 50%; | ||
| transform: translateY(50%) scale(0); | ||
| width: 2px; | ||
| height: var(--lumo-size-xs); | ||
| border-radius: 0 var(--lumo-border-radius) var(--lumo-border-radius) 0; | ||
| transform-origin: 100% 50%; | ||
| } | ||
| :host::after { | ||
| box-shadow: 0 0 0 4px var(--lumo-primary-color); | ||
| opacity: 0.15; | ||
| transition: 0.15s 0.02s transform, 0.8s 0.17s opacity; | ||
| } | ||
| :host([selected])::before, | ||
| :host([selected])::after { | ||
| transform: translateX(-50%) scale(1); | ||
| transition-timing-function: cubic-bezier(.12, .32, .54, 1.5); | ||
| } | ||
| :host([orientation="vertical"][selected])::before, | ||
| :host([orientation="vertical"][selected])::after { | ||
| transform: translateY(50%) scale(1); | ||
| } | ||
| :host([selected]:not([active]))::after { | ||
| opacity: 0; | ||
| } | ||
| :host(:not([orientation="vertical"])) ::slotted(a[href]) { | ||
| justify-content: center; | ||
| } | ||
| :host ::slotted(a) { | ||
| display: flex; | ||
| width: 100%; | ||
| align-items: center; | ||
| height: 100%; | ||
| margin: -0.5rem -0.75rem; | ||
| padding: 0.5rem 0.75rem; | ||
| outline: none; | ||
| /* | ||
| Override the CSS inherited from \`lumo-color\` and \`lumo-typography\`. | ||
| Note: \`!important\` is needed because of the \`:slotted\` specificity. | ||
| */ | ||
| text-decoration: none !important; | ||
| color: inherit !important; | ||
| } | ||
| :host ::slotted(iron-icon) { | ||
| margin: 0 4px; | ||
| width: var(--lumo-icon-size-m); | ||
| height: var(--lumo-icon-size-m); | ||
| } | ||
| /* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */ | ||
| :host ::slotted(iron-icon[icon^="vaadin:"]) { | ||
| padding: 0.25rem; | ||
| box-sizing: border-box !important; | ||
| } | ||
| :host ::slotted(iron-icon:first-child) { | ||
| margin-left: 0; | ||
| } | ||
| :host ::slotted(iron-icon:last-child) { | ||
| margin-right: 0; | ||
| } | ||
| :host([theme~="icon-on-top"]) { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: space-around; | ||
| text-align: center; | ||
| padding-bottom: 0.5rem; | ||
| padding-top: 0.25rem; | ||
| } | ||
| :host([theme~="icon-on-top"]) ::slotted(a) { | ||
| flex-direction: column; | ||
| align-items: center; | ||
| margin-top: -0.25rem; | ||
| padding-top: 0.25rem; | ||
| } | ||
| :host([theme~="icon-on-top"]) ::slotted(iron-icon) { | ||
| margin: 0; | ||
| } | ||
| /* Disabled */ | ||
| :host([disabled]) { | ||
| pointer-events: none; | ||
| opacity: 1; | ||
| color: var(--lumo-disabled-text-color); | ||
| } | ||
| /* Focus-ring */ | ||
| :host([focus-ring]) { | ||
| box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct); | ||
| border-radius: var(--lumo-border-radius); | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module>`; | ||
| document.head.appendChild($_documentContainer.content); | ||
| import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import { tabStyles } from './vaadin-tab-css.js'; | ||
| registerStyles('vaadin-tab', tabStyles); | ||
| //# sourceMappingURL=vaadin-tab-styles.js.map |
| import './vaadin-tab-styles.js'; | ||
| import '../../src/vaadin-tab.js'; | ||
| //# sourceMappingURL=vaadin-tab.js.map |
@@ -1,191 +0,4 @@ | ||
| import '@vaadin/vaadin-lumo-styles/font-icons.js'; | ||
| import '@vaadin/vaadin-lumo-styles/color.js'; | ||
| import '@vaadin/vaadin-lumo-styles/sizing.js'; | ||
| import '@vaadin/vaadin-lumo-styles/spacing.js'; | ||
| import '@vaadin/vaadin-lumo-styles/style.js'; | ||
| import '@vaadin/vaadin-lumo-styles/typography.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = html`<dom-module id="lumo-tabs" theme-for="vaadin-tabs"> | ||
| <template> | ||
| <style> | ||
| :host { | ||
| -webkit-tap-highlight-color: transparent; | ||
| } | ||
| :host(:not([orientation="vertical"])) { | ||
| box-shadow: inset 0 -1px 0 0 var(--lumo-contrast-10pct); | ||
| position: relative; | ||
| min-height: var(--lumo-size-l); | ||
| } | ||
| :host([orientation="horizontal"]) [part="tabs"] ::slotted(vaadin-tab:not([theme~="icon-on-top"])) { | ||
| justify-content: center; | ||
| } | ||
| :host([orientation="vertical"]) { | ||
| box-shadow: -1px 0 0 0 var(--lumo-contrast-10pct); | ||
| } | ||
| :host([orientation="horizontal"]) [part="tabs"] { | ||
| margin: 0 0.75rem; | ||
| } | ||
| :host([orientation="vertical"]) [part="tabs"] { | ||
| width: 100%; | ||
| margin: 0.5rem 0; | ||
| } | ||
| [part="forward-button"], | ||
| [part="back-button"] { | ||
| position: absolute; | ||
| z-index: 1; | ||
| font-family: lumo-icons; | ||
| color: var(--lumo-tertiary-text-color); | ||
| font-size: var(--lumo-icon-size-m); | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: 1.5em; | ||
| height: 100%; | ||
| transition: 0.2s opacity; | ||
| top: 0; | ||
| } | ||
| [part="forward-button"]:hover, | ||
| [part="back-button"]:hover { | ||
| color: inherit; | ||
| } | ||
| [part="forward-button"] { | ||
| right: 0; | ||
| } | ||
| [part="forward-button"]::after { | ||
| content: var(--lumo-icons-angle-right); | ||
| } | ||
| [part="back-button"]::after { | ||
| content: var(--lumo-icons-angle-left); | ||
| } | ||
| /* Tabs overflow */ | ||
| [part="tabs"] { | ||
| --_lumo-tabs-overflow-mask-image: none; | ||
| -webkit-mask-image: var(--_lumo-tabs-overflow-mask-image); | ||
| /* For IE11 */ | ||
| min-height: var(--lumo-size-l); | ||
| } | ||
| /* | ||
| TODO: CSS custom property in \`mask-image\` causes crash in Edge | ||
| see https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15415089/ | ||
| */ | ||
| @-moz-document url-prefix() { | ||
| [part="tabs"] { | ||
| mask-image: var(--_lumo-tabs-overflow-mask-image); | ||
| } | ||
| } | ||
| /* Horizontal tabs overflow */ | ||
| /* Both ends overflowing */ | ||
| :host([overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] { | ||
| --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent 2em, #000 4em, #000 calc(100% - 4em), transparent calc(100% - 2em)); | ||
| } | ||
| /* End overflowing */ | ||
| :host([overflow~="end"]:not([orientation="vertical"])) [part="tabs"] { | ||
| --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 4em), transparent calc(100% - 2em)); | ||
| } | ||
| /* Start overflowing */ | ||
| :host([overflow~="start"]:not([orientation="vertical"])) [part="tabs"] { | ||
| --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent 2em, #000 4em); | ||
| } | ||
| /* Vertical tabs overflow */ | ||
| /* Both ends overflowing */ | ||
| :host([overflow~="start"][overflow~="end"][orientation="vertical"]) [part="tabs"] { | ||
| --_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em, #000 calc(100% - 2em), transparent); | ||
| } | ||
| /* End overflowing */ | ||
| :host([overflow~="end"][orientation="vertical"]) [part="tabs"] { | ||
| --_lumo-tabs-overflow-mask-image: linear-gradient(#000 calc(100% - 2em), transparent); | ||
| } | ||
| /* Start overflowing */ | ||
| :host([overflow~="start"][orientation="vertical"]) [part="tabs"] { | ||
| --_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em); | ||
| } | ||
| :host [part="tabs"] ::slotted(:not(vaadin-tab)) { | ||
| margin-left: var(--lumo-space-m); | ||
| } | ||
| /* Centered */ | ||
| :host([theme~="centered"][orientation="horizontal"]) [part="tabs"] { | ||
| justify-content: center; | ||
| } | ||
| /* Small */ | ||
| :host([theme~="small"]), | ||
| :host([theme~="small"]) [part="tabs"] { | ||
| min-height: var(--lumo-size-m); | ||
| } | ||
| :host([theme~="small"]) [part="tabs"] ::slotted(vaadin-tab) { | ||
| font-size: var(--lumo-font-size-s); | ||
| } | ||
| /* Minimal */ | ||
| :host([theme~="minimal"]) { | ||
| box-shadow: none; | ||
| /* This doesn't work with ShadyCSS */ | ||
| --_lumo-tab-marker-display: none; | ||
| } | ||
| /* Workaround for the above ShadyCSS issue */ | ||
| :host([theme~="minimal"]) [part="tabs"] ::slotted(vaadin-tab[selected])::before, | ||
| :host([theme~="minimal"]) [part="tabs"] ::slotted(vaadin-tab[selected])::after { | ||
| display: none; | ||
| } | ||
| /* Hide-scroll-buttons */ | ||
| :host([theme~="hide-scroll-buttons"]) [part="back-button"], | ||
| :host([theme~="hide-scroll-buttons"]) [part="forward-button"] { | ||
| display: none; | ||
| } | ||
| :host([theme~="hide-scroll-buttons"][overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] { | ||
| --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent, #000 2em, #000 calc(100% - 2em), transparent 100%); | ||
| } | ||
| :host([theme~="hide-scroll-buttons"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] { | ||
| --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 2em), transparent 100%); | ||
| } | ||
| :host([theme~="hide-scroll-buttons"][overflow~="start"]:not([orientation="vertical"])) [part="tabs"] { | ||
| --_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent, #000 2em); | ||
| } | ||
| /* Equal-width tabs */ | ||
| :host([theme~="equal-width-tabs"]) { | ||
| flex: auto; | ||
| } | ||
| :host([theme~="equal-width-tabs"]) [part="tabs"] ::slotted(vaadin-tab) { | ||
| flex: 1 0 0%; | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module>`; | ||
| document.head.appendChild($_documentContainer.content); | ||
| import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import { tabsStyles } from './vaadin-tabs-css.js'; | ||
| registerStyles('vaadin-tabs', tabsStyles); | ||
| //# sourceMappingURL=vaadin-tabs-styles.js.map |
| import './vaadin-tab.js'; | ||
| import './vaadin-tabs-styles.js'; | ||
| import '../../src/vaadin-tabs.js'; | ||
| //# sourceMappingURL=vaadin-tabs.js.map |
@@ -1,138 +0,4 @@ | ||
| import '@vaadin/vaadin-material-styles/color.js'; | ||
| import '@vaadin/vaadin-material-styles/typography.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = html`<dom-module id="material-tab" theme-for="vaadin-tab"> | ||
| <template> | ||
| <style> | ||
| :host { | ||
| display: flex; | ||
| flex-direction: column; | ||
| flex-shrink: 0; | ||
| flex-grow: 1; | ||
| align-items: center; | ||
| justify-content: center; | ||
| text-align: center; | ||
| min-width: 90px; | ||
| padding: 12px 16px; | ||
| box-sizing: border-box; | ||
| font-family: var(--material-font-family); | ||
| font-size: var(--material-button-font-size); | ||
| text-transform: uppercase; | ||
| letter-spacing: 0.05em; | ||
| white-space: nowrap; | ||
| min-height: 48px; | ||
| line-height: 1.2; | ||
| font-weight: 500; | ||
| color: var(--material-secondary-text-color); | ||
| overflow: hidden; | ||
| position: relative; | ||
| cursor: pointer; | ||
| outline: none; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| transition: box-shadow 0.3s; | ||
| -webkit-user-select: none; | ||
| user-select: none; | ||
| } | ||
| /* do not prevent click on slotted links */ | ||
| :host::before, | ||
| :host::after { | ||
| pointer-events: none; | ||
| } | ||
| :host::before { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| background-color: var(--material-primary-color); | ||
| opacity: 0; | ||
| transition: opacity 0.1s linear; | ||
| } | ||
| :host(:hover)::before { | ||
| opacity: 0.04; | ||
| } | ||
| :host([focus-ring])::before { | ||
| opacity: 0.1; | ||
| } | ||
| :host([selected]) { | ||
| color: var(--material-primary-text-color); | ||
| box-shadow: inset 0 -2px 0 0 var(--material-primary-color); | ||
| } | ||
| :host([orientation="vertical"][selected]) { | ||
| box-shadow: inset 2px 0 0 0 var(--material-primary-color); | ||
| } | ||
| /* Ripple */ | ||
| :host::after { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| width: 100px; | ||
| height: 100px; | ||
| border-radius: 50%; | ||
| transform: translate(-50%, -50%) scale(0); | ||
| background-color: var(--material-primary-color); | ||
| opacity: 0; | ||
| transition: transform 0s cubic-bezier(0.05, 0.8, 0.5, 1), opacity 0s linear; | ||
| } | ||
| :host([focused]:not([focus-ring]))::after, | ||
| :host([focused][active])::after, | ||
| :host([focus-ring][selected])::after { | ||
| transform: translate(-50%, -50%) scale(3); | ||
| opacity: 0; | ||
| transition-duration: 2s, 0.6s; | ||
| } | ||
| :host([active]:not([selected]))::after { | ||
| opacity: 0.2; | ||
| transition-duration: 2s, 0s; | ||
| } | ||
| /* Disabled */ | ||
| :host([disabled]) { | ||
| pointer-events: none; | ||
| opacity: 1; | ||
| color: var(--material-disabled-text-color); | ||
| } | ||
| :host ::slotted(a) { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: 100%; | ||
| height: 100%; | ||
| margin: -12px -16px; | ||
| padding: 12px 16px; | ||
| text-decoration: none; | ||
| color: inherit; | ||
| outline: none; | ||
| } | ||
| /* Touch device adjustments */ | ||
| @media (pointer: coarse) { | ||
| :host(:hover)::before { | ||
| display: none; | ||
| } | ||
| } | ||
| /* Small space between icon and label */ | ||
| ::slotted(iron-icon:not(:only-child)) { | ||
| margin-bottom: 8px; | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module>`; | ||
| document.head.appendChild($_documentContainer.content); | ||
| import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import { tabStyles } from './vaadin-tab-css.js'; | ||
| registerStyles('vaadin-tab', tabStyles); | ||
| //# sourceMappingURL=vaadin-tab-styles.js.map |
| import './vaadin-tab-styles.js'; | ||
| import '../../src/vaadin-tab.js'; | ||
| //# sourceMappingURL=vaadin-tab.js.map |
@@ -1,80 +0,4 @@ | ||
| import '@vaadin/vaadin-material-styles/font-icons.js'; | ||
| import '@vaadin/vaadin-material-styles/color.js'; | ||
| import './vaadin-tab.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = html`<dom-module id="material-tabs" theme-for="vaadin-tabs"> | ||
| <template> | ||
| <style> | ||
| :host { | ||
| -webkit-tap-highlight-color: transparent; | ||
| } | ||
| :host { | ||
| display: flex; | ||
| flex-shrink: 0; | ||
| } | ||
| /* Hide scroll buttons when no needed, and on touch devices */ | ||
| :host(:not([overflow])) [part="forward-button"], | ||
| :host(:not([overflow])) [part="back-button"] { | ||
| display: none; | ||
| } | ||
| @media (pointer: coarse) { | ||
| [part="back-button"], | ||
| [part="forward-button"] { | ||
| display: none !important; | ||
| } | ||
| } | ||
| [part="forward-button"], | ||
| [part="back-button"] { | ||
| font-family: material-icons; | ||
| color: var(--material-secondary-text-color); | ||
| font-size: 24px; | ||
| display: flex; | ||
| flex-shrink: 0; | ||
| flex-grow: 0; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: 48px; | ||
| height: 100%; | ||
| transition: 0.2s opacity; | ||
| top: 0; | ||
| } | ||
| [part="forward-button"]:hover, | ||
| [part="back-button"]:hover { | ||
| color: inherit; | ||
| } | ||
| [part="forward-button"] { | ||
| right: 0; | ||
| } | ||
| [part="forward-button"]::after { | ||
| content: var(--material-icons-chevron-right); | ||
| } | ||
| [part="back-button"]::after { | ||
| content: var(--material-icons-chevron-left); | ||
| } | ||
| :host([overflow]) [part="tabs"]::after { | ||
| content: ""; | ||
| display: flex; | ||
| flex-shrink: 0; | ||
| width: 32px; | ||
| } | ||
| /* Fixed width tabs */ | ||
| :host([theme~="fixed"]) [part="tabs"] ::slotted(vaadin-tab) { | ||
| flex-basis: 0.0001px; | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module>`; | ||
| document.head.appendChild($_documentContainer.content); | ||
| import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import { tabsStyles } from './vaadin-tabs-css.js'; | ||
| registerStyles('vaadin-tabs', tabsStyles); | ||
| //# sourceMappingURL=vaadin-tabs-styles.js.map |
@@ -0,2 +1,4 @@ | ||
| import './vaadin-tab.js'; | ||
| import './vaadin-tabs-styles.js'; | ||
| import '../../src/vaadin-tabs.js'; | ||
| //# sourceMappingURL=vaadin-tabs.js.map |
| import './theme/lumo/vaadin-tab.js'; | ||
| export { VaadinTab } from './src/vaadin-tab.js'; | ||
| //# sourceMappingURL=vaadin-tab.js.map |
| import './theme/lumo/vaadin-tabs.js'; | ||
| export { VaadinTabs } from './src/vaadin-tabs.js'; | ||
| //# sourceMappingURL=vaadin-tabs.js.map |
New alerts
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
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
- Total package byte prevSize
- increased by165.68%
115758
- Dev dependency count
- decreased by-88.89%
1
- Number of package files
- increased by620%
108
- Lines of code
- increased by112.12%
1663
Worsened metrics
- Dependency count
- increased by137.5%
19
- Number of low quality alerts
- increased byInfinity%
1
- Number of lines in readme file
- decreased by-24.31%
109
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Added@vaadin/element-base@^0.2.0
+ Addedlit-element@^2.0.0
+ Addedlit-html@^1.0.0
+ Addedtslib@^1.10.0
+ Added@vaadin/active-state-mixin@0.1.8(transitive)
+ Added@vaadin/direction-mixin@0.1.1(transitive)
+ Added@vaadin/disabled-state-mixin@0.1.1(transitive)
+ Added@vaadin/down-up-mixin@0.1.1(transitive)
+ Added@vaadin/element-base@0.2.0(transitive)
+ Added@vaadin/focus-visible-mixin@0.1.5(transitive)
+ Added@vaadin/keyboard-direction-mixin@0.1.7(transitive)
+ Added@vaadin/keyboard-mixin@0.1.2(transitive)
+ Added@vaadin/mixin-utils@0.1.0(transitive)
+ Added@vaadin/orientation-mixin@0.1.2(transitive)
+ Added@vaadin/resizable-mixin@0.1.2(transitive)
+ Added@vaadin/roving-tabindex-mixin@0.1.8(transitive)
+ Added@vaadin/selected-state-mixin@0.1.2(transitive)
+ Added@vaadin/selection-in-view-mixin@0.1.9(transitive)
+ Added@vaadin/single-selection-mixin@0.1.7(transitive)
+ Added@vaadin/slotted-items-mixin@0.1.6(transitive)
+ Added@vaadin/themable-element@0.1.2(transitive)
+ Addedresize-observer-polyfill@1.5.1(transitive)
+ Addedtslib@1.14.1(transitive)
- Removed@polymer/polymer@^3.0.0
- Removed@vaadin/vaadin-element-mixin@^2.0.0
- Removed@vaadin/vaadin-item@^2.1.0
- Removed@vaadin/vaadin-list-mixin@^2.1.0
- Removed@polymer/iron-resizable-behavior@3.0.1(transitive)
- Removed@vaadin/vaadin-item@2.3.0(transitive)
- Removed@vaadin/vaadin-list-mixin@2.5.3(transitive)