New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@vaadin/vaadin-progress-bar
Advanced tools
@vaadin/vaadin-progress-bar - npm Package Compare versions
Comparing version 1.2.0-alpha1 to 2.0.0-alpha1
| { | ||
| "name": "@vaadin/vaadin-progress-bar", | ||
| "version": "2.0.0-alpha1", | ||
| "description": "vaadin-progress-bar", | ||
| "main": "vaadin-progress-bar.js", | ||
| "module": "vaadin-progress-bar.js", | ||
| "repository": "vaadin/vaadin-progress-bar", | ||
| "keywords": [ | ||
@@ -9,9 +14,4 @@ "Vaadin", | ||
| "web-component", | ||
| "polymer" | ||
| "lit-element" | ||
| ], | ||
| "repository": "vaadin/vaadin-progress-bar", | ||
| "homepage": "https://vaadin.com/components", | ||
| "name": "@vaadin/vaadin-progress-bar", | ||
| "version": "1.2.0-alpha1", | ||
| "main": "vaadin-progress-bar.js", | ||
| "author": "Vaadin Ltd", | ||
@@ -22,26 +22,57 @@ "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" | ||
| ] | ||
| }, | ||
| "scripts": { | ||
| "analyze": "wca analyze src/vaadin-progress-bar.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", | ||
| "prestart": "npm run analyze", | ||
| "prepublishOnly": "npm run build", | ||
| "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", | ||
| "@vaadin/vaadin-themable-mixin": "^1.2.1", | ||
| "@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.3.0", | ||
| "@vaadin/mixin-utils": "^0.1.0", | ||
| "@vaadin/themable-element": "^0.2.0", | ||
| "@vaadin/vaadin-lumo-styles": "^1.6.0", | ||
| "@vaadin/vaadin-material-styles": "^1.3.2", | ||
| "@vaadin/vaadin-themable-mixin": "^1.5.2", | ||
| "lit-element": "^2.3.0", | ||
| "lit-html": "^1.0.0", | ||
| "tslib": "^1.10.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@polymer/iron-component-page": "^4.0.0", | ||
| "@webcomponents/webcomponentsjs": "^2.0.0", | ||
| "wct-browser-legacy": "^1.0.1", | ||
| "@vaadin/vaadin-demo-helpers": "^3.0.0" | ||
| "@vaadin/vaadin-component-dev-dependencies": "^4.9.0" | ||
| } | ||
| } |
@@ -1,11 +0,1 @@ | ||
| [](https://www.npmjs.com/package/@vaadin/vaadin-progress-bar) | ||
| [](https://github.com/vaadin/vaadin-progress-bar/releases) | ||
| [](https://www.webcomponents.org/element/vaadin/vaadin-progress-bar) | ||
| [](https://travis-ci.org/vaadin/vaadin-progress-bar) | ||
| [](https://coveralls.io/github/vaadin/vaadin-progress-bar?branch=master) | ||
| [](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-progress-bar) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-progress-bar) | ||
| # <vaadin-progress-bar> | ||
@@ -19,14 +9,16 @@ | ||
| <!-- | ||
| ``` | ||
| <custom-element-demo> | ||
| <template> | ||
| <script src="../webcomponentsjs/webcomponents-lite.js"></script> | ||
| <link rel="import" href="vaadin-progress-bar.html"> | ||
| <next-code-block></next-code-block> | ||
| </template> | ||
| </custom-element-demo> | ||
| ``` | ||
| --> | ||
| [](https://www.npmjs.com/package/@vaadin/vaadin-progress-bar) | ||
| [](https://www.webcomponents.org/element/vaadin/vaadin-progress-bar) | ||
| [](https://travis-ci.org/vaadin/vaadin-progress-bar) | ||
| [](https://coveralls.io/github/vaadin/vaadin-progress-bar?branch=next) | ||
| [](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-progress-bar) | ||
| [](https://vaadin.com/directory/component/vaadinvaadin-progress-bar) | ||
| > ⚠️ 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 branch: | ||
| > - [1.1 branch](https://github.com/vaadin/vaadin-progress-bar/commits/1.1) (latest stable) | ||
| > - [1.2 branch](https://github.com/vaadin/vaadin-progress-bar/commits/1.2) (next minor version with incremental improvements) | ||
| ```html | ||
@@ -42,27 +34,5 @@ <vaadin-progress-bar></vaadin-progress-bar> | ||
| 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-progress-bar`: | ||
| ```sh | ||
| bower i vaadin/vaadin-progress-bar --save | ||
| ``` | ||
| Once installed, import it in your application: | ||
| ```html | ||
| <link rel="import" href="bower_components/vaadin-progress-bar/vaadin-progress-bar.html"> | ||
| ``` | ||
| ### Polymer 3 and ES Modules Compatible Version | ||
| Install `vaadin-progress-bar`: | ||
| ```sh | ||
| npm i @vaadin/vaadin-progress-bar --save | ||
@@ -87,37 +57,33 @@ ``` | ||
| `theme/lumo/vaadin-progress-bar.html` | ||
| `theme/lumo/vaadin-progress-bar.js` | ||
| - The component with the Material theme: | ||
| `theme/material/vaadin-progress-bar.html` | ||
| `theme/material/vaadin-progress-bar.js` | ||
| - Alias for `theme/lumo/vaadin-progress-bar.html`: | ||
| - Alias for `theme/lumo/vaadin-progress-bar.js`: | ||
| - `vaadin-progress-bar.html` | ||
| - `vaadin-progress-bar.js` | ||
| ## Running demos and tests in a browser | ||
| ## Running demos and API docs in a browser | ||
| 1. Fork the `vaadin-progress-bar` 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-progress-bar` directory, run `npm install` and then `bower install` to install dependencies. | ||
| 1. When in the `vaadin-progress-bar` 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-progress-bar/demo | ||
| - http://127.0.0.1:3000/components/vaadin-progress-bar/test | ||
| ## Running tests from the command line | ||
| 1. When in the `vaadin-progress-bar` directory, run `polymer test` | ||
| - When in the `vaadin-progress-bar` directory, run `npm test` | ||
| - To debug tests in the browser, run `npm run test:debug` | ||
| ## 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. | ||
@@ -132,3 +98,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. | ||
@@ -135,0 +101,0 @@ |
@@ -1,96 +0,21 @@ | ||
| /** | ||
| @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 { __decorate } from "tslib"; | ||
| import { customElement } from 'lit-element'; | ||
| import { ProgressBarBase } from './vaadin-progress-bar-base.js'; | ||
| import { ProgressMixin } from './vaadin-progress-mixin.js'; | ||
| import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js'; | ||
| import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
| * `<vaadin-progress-bar>` is a Web Component for progress bars. | ||
| * | ||
| * ```html | ||
| * <vaadin-progress-bar min="0" max="1" value="0.5"> | ||
| * </vaadin-progress-bar> | ||
| * ``` | ||
| * | ||
| * ### Styling | ||
| * | ||
| * The following shadow DOM parts are available for styling: | ||
| * | ||
| * Part name | Description | ||
| * ----------------|---------------- | ||
| * `bar` | Progress-bar's background | ||
| * `value` | Progress-bar's foreground | ||
| * | ||
| * See [ThemableMixin – how to apply styles for shadow parts](https://github.com/vaadin/vaadin-themable-mixin/wiki) | ||
| * | ||
| * The following custom properties are available: | ||
| * | ||
| * Custom property | Description | Default | ||
| * ----------------|-------------|------------- | ||
| * `--vaadin-progress-value` | current progress value (between 0 and 1) | 0 | ||
| * | ||
| * The following state attributes are available for styling: | ||
| * | ||
| * Attribute | Description | Part name | ||
| * ----------------|-------------|------------ | ||
| * `indeterminate` | Set to an indeterminate progress bar | :host | ||
| * | ||
| * @memberof Vaadin | ||
| * @mixes Vaadin.ProgressMixin | ||
| * @mixes Vaadin.ThemableMixin | ||
| * @demo demo/index.html | ||
| * @csspart part="bar" - Progress-bar's background | ||
| * @csspart part="value" - Progress-bar's foreground | ||
| */ | ||
| class ProgressBarElement extends ElementMixin(ThemableMixin(ProgressMixin(PolymerElement))) { | ||
| static get template() { | ||
| return html` | ||
| <style> | ||
| :host { | ||
| display: block; | ||
| width: 100%; /* prevent collapsing inside non-stretching column flex */ | ||
| height: 8px; | ||
| } | ||
| :host([hidden]) { | ||
| display: none !important; | ||
| } | ||
| [part="bar"] { | ||
| height: 100%; | ||
| } | ||
| [part="value"] { | ||
| height: 100%; | ||
| transform-origin: 0 50%; | ||
| transform: scaleX(var(--vaadin-progress-value)); | ||
| } | ||
| /* RTL specific styles */ | ||
| :host([dir="rtl"]) [part="value"] { | ||
| transform-origin: 100% 50%; | ||
| } | ||
| </style> | ||
| <div part="bar"> | ||
| <div part="value"></div> | ||
| </div> | ||
| `; | ||
| } | ||
| static get is() { | ||
| return 'vaadin-progress-bar'; | ||
| } | ||
| static get version() { | ||
| return '1.2.0-alpha1'; | ||
| } | ||
| } | ||
| customElements.define(ProgressBarElement.is, ProgressBarElement); | ||
| export { ProgressBarElement }; | ||
| let VaadinProgressBar = class VaadinProgressBar extends ProgressMixin(ProgressBarBase) { | ||
| static get version() { | ||
| return '2.0.0-alpha1'; | ||
| } | ||
| }; | ||
| VaadinProgressBar.is = 'vaadin-progress-bar'; | ||
| VaadinProgressBar = __decorate([ | ||
| customElement('vaadin-progress-bar') | ||
| ], VaadinProgressBar); | ||
| export { VaadinProgressBar }; | ||
| //# sourceMappingURL=vaadin-progress-bar.js.map |
@@ -1,100 +0,88 @@ | ||
| /** | ||
| @license | ||
| Copyright (c) 2017 Vaadin Ltd. | ||
| This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ | ||
| */ | ||
| /** | ||
| * @polymerMixin | ||
| */ | ||
| export const ProgressMixin = superClass => | ||
| class VaadinProgressMixin extends superClass { | ||
| static get properties() { | ||
| return { | ||
| import { __decorate } from "tslib"; | ||
| import { property } from 'lit-element'; | ||
| export const ProgressMixin = (base) => { | ||
| class Progress extends base { | ||
| constructor() { | ||
| super(...arguments); | ||
| /** | ||
| * Minimum bound of the progress bar. | ||
| */ | ||
| this.min = 0; | ||
| /** | ||
| * Maximum bound of the progress bar. | ||
| */ | ||
| this.max = 1; | ||
| /** | ||
| * Indeterminate state of the progress bar. | ||
| * This property takes precedence over other state properties (min, max, value). | ||
| */ | ||
| this.indeterminate = false; | ||
| } | ||
| firstUpdated(props) { | ||
| super.firstUpdated(props); | ||
| this.setAttribute('role', 'progressbar'); | ||
| } | ||
| updated(props) { | ||
| super.updated(props); | ||
| const minChanged = props.has('min'); | ||
| if (minChanged) { | ||
| this._minChanged(this.min); | ||
| } | ||
| const maxChanged = props.has('max'); | ||
| if (maxChanged) { | ||
| this._maxChanged(this.max); | ||
| } | ||
| const valueChanged = props.has('value'); | ||
| if (valueChanged) { | ||
| this._valueChanged(this.value); | ||
| } | ||
| if (valueChanged || minChanged || maxChanged) { | ||
| this._normalizedValueChanged(this.value, this.min, this.max); | ||
| } | ||
| } | ||
| _normalizedValueChanged(value, min, max) { | ||
| const newValue = this._normalizeValue(value, min, max); | ||
| this.style.setProperty('--vaadin-progress-value', String(newValue)); | ||
| } | ||
| _valueChanged(value) { | ||
| this.setAttribute('aria-valuenow', String(value)); | ||
| } | ||
| _minChanged(min) { | ||
| this.setAttribute('aria-valuemin', String(min)); | ||
| } | ||
| _maxChanged(max) { | ||
| this.setAttribute('aria-valuemax', String(max)); | ||
| } | ||
| /** | ||
| * Current progress value. | ||
| * Percent of current progress relative to whole progress bar (max - min) | ||
| */ | ||
| value: { | ||
| type: Number, | ||
| observer: '_valueChanged' | ||
| }, | ||
| /** | ||
| * Minimum bound of the progress bar. | ||
| */ | ||
| min: { | ||
| type: Number, | ||
| value: 0, | ||
| observer: '_minChanged' | ||
| }, | ||
| /** | ||
| * Maximum bound of the progress bar. | ||
| */ | ||
| max: { | ||
| type: Number, | ||
| value: 1, | ||
| observer: '_maxChanged' | ||
| }, | ||
| /** | ||
| * Indeterminate state of the progress bar. | ||
| * This property takes precedence over other state properties (min, max, value). | ||
| */ | ||
| indeterminate: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| _normalizeValue(value, min, max) { | ||
| let nV; | ||
| if (!value && value !== 0) { | ||
| nV = 0; | ||
| } | ||
| else if (min >= max) { | ||
| nV = 1; | ||
| } | ||
| else { | ||
| nV = (value - min) / (max - min); | ||
| nV = Math.min(Math.max(nV, 0), 1); | ||
| } | ||
| return nV; | ||
| } | ||
| }; | ||
| } | ||
| static get observers() { | ||
| return [ | ||
| '_normalizedValueChanged(value, min, max)' | ||
| ]; | ||
| } | ||
| ready() { | ||
| super.ready(); | ||
| this.setAttribute('role', 'progressbar'); | ||
| } | ||
| _normalizedValueChanged(value, min, max) { | ||
| const newNormalizedValue = this._normalizeValue(value, min, max); | ||
| this.style.setProperty('--vaadin-progress-value', newNormalizedValue); | ||
| this.updateStyles({ | ||
| '--vaadin-progress-value': String(newNormalizedValue) | ||
| }); | ||
| } | ||
| _valueChanged(newV, oldV) { | ||
| this.setAttribute('aria-valuenow', newV); | ||
| } | ||
| _minChanged(newV, oldV) { | ||
| this.setAttribute('aria-valuemin', newV); | ||
| } | ||
| _maxChanged(newV, oldV) { | ||
| this.setAttribute('aria-valuemax', newV); | ||
| } | ||
| /** | ||
| * Percent of current progress relative to whole progress bar (max - min) | ||
| */ | ||
| _normalizeValue(value, min, max) { | ||
| let nV; | ||
| if (!value && value != 0) { | ||
| nV = 0; | ||
| } else if (min >= max) { | ||
| nV = 1; | ||
| } else { | ||
| nV = (value - min) / (max - min); | ||
| nV = Math.min(Math.max(nV, 0), 1); | ||
| } | ||
| return nV; | ||
| } | ||
| }; | ||
| __decorate([ | ||
| property({ type: Number }) | ||
| ], Progress.prototype, "value", void 0); | ||
| __decorate([ | ||
| property({ type: Number }) | ||
| ], Progress.prototype, "min", void 0); | ||
| __decorate([ | ||
| property({ type: Number }) | ||
| ], Progress.prototype, "max", void 0); | ||
| __decorate([ | ||
| property({ type: Boolean, reflect: true }) | ||
| ], Progress.prototype, "indeterminate", void 0); | ||
| return Progress; | ||
| }; | ||
| //# sourceMappingURL=vaadin-progress-mixin.js.map |
@@ -1,215 +0,4 @@ | ||
| import '@polymer/polymer/lib/elements/custom-style.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 { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = html`<dom-module id="lumo-progress-bar" theme-for="vaadin-progress-bar"> | ||
| <template> | ||
| <style> | ||
| :host { | ||
| height: calc(var(--lumo-size-l) / 10); | ||
| margin: var(--lumo-space-s) 0; | ||
| } | ||
| [part="bar"] { | ||
| border-radius: var(--lumo-border-radius); | ||
| background-color: var(--lumo-contrast-10pct); | ||
| } | ||
| [part="value"] { | ||
| border-radius: var(--lumo-border-radius); | ||
| background-color: var(--lumo-primary-color); | ||
| /* Use width instead of transform to preserve border radius */ | ||
| transform: none; | ||
| width: calc(var(--vaadin-progress-value) * 100%); | ||
| will-change: width; | ||
| transition: 0.1s width linear; | ||
| } | ||
| /* Indeterminate mode */ | ||
| :host([indeterminate]) [part="value"] { | ||
| --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to right, var(--lumo-primary-color-10pct) 10%, var(--lumo-primary-color)); | ||
| --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to left, var(--lumo-primary-color-10pct) 10%, var(--lumo-primary-color)); | ||
| width: 100%; | ||
| background-color: transparent !important; | ||
| background-image: var(--lumo-progress-indeterminate-progress-bar-background); | ||
| opacity: 0.75; | ||
| will-change: transform; | ||
| animation: vaadin-progress-indeterminate 1.6s infinite cubic-bezier(.645, .045, .355, 1); | ||
| } | ||
| @keyframes vaadin-progress-indeterminate { | ||
| 0% { | ||
| transform: scaleX(0.015); | ||
| transform-origin: 0% 0%; | ||
| } | ||
| 25% { | ||
| transform: scaleX(0.4); | ||
| } | ||
| 50% { | ||
| transform: scaleX(0.015); | ||
| transform-origin: 100% 0%; | ||
| background-image: var(--lumo-progress-indeterminate-progress-bar-background); | ||
| } | ||
| 50.1% { | ||
| transform: scaleX(0.015); | ||
| transform-origin: 100% 0%; | ||
| background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse); | ||
| } | ||
| 75% { | ||
| transform: scaleX(0.4); | ||
| } | ||
| 100% { | ||
| transform: scaleX(0.015); | ||
| transform-origin: 0% 0%; | ||
| background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse); | ||
| } | ||
| } | ||
| :host(:not([aria-valuenow])) [part="value"]::before, | ||
| :host([indeterminate]) [part="value"]::before { | ||
| content: ""; | ||
| display: block; | ||
| width: 100%; | ||
| height: 100%; | ||
| border-radius: inherit; | ||
| background-color: var(--lumo-primary-color); | ||
| will-change: opacity; | ||
| animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(.645, .045, .355, 1); | ||
| } | ||
| @keyframes vaadin-progress-pulse3 { | ||
| 0% { opacity: 1; } | ||
| 10% { opacity: 0; } | ||
| 40% { opacity: 0; } | ||
| 50% { opacity: 1; } | ||
| 50.1% { opacity: 1; } | ||
| 60% { opacity: 0; } | ||
| 90% { opacity: 0; } | ||
| 100% { opacity: 1; } | ||
| } | ||
| /* Contrast color */ | ||
| :host([theme~="contrast"]) [part="value"], | ||
| :host([theme~="contrast"]) [part="value"]::before { | ||
| background-color: var(--lumo-contrast-80pct); | ||
| --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to right, var(--lumo-contrast-5pct) 10%, var(--lumo-contrast-80pct)); | ||
| --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to left, var(--lumo-contrast-5pct) 10%, var(--lumo-contrast-60pct)); | ||
| } | ||
| /* Error color */ | ||
| :host([theme~="error"]) [part="value"], | ||
| :host([theme~="error"]) [part="value"]::before { | ||
| background-color: var(--lumo-error-color); | ||
| --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to right, var(--lumo-error-color-10pct) 10%, var(--lumo-error-color)); | ||
| --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to left, var(--lumo-error-color-10pct) 10%, var(--lumo-error-color)); | ||
| } | ||
| /* Primary color */ | ||
| :host([theme~="success"]) [part="value"], | ||
| :host([theme~="success"]) [part="value"]::before { | ||
| background-color: var(--lumo-success-color); | ||
| --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to right, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color)); | ||
| --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to left, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color)); | ||
| } | ||
| /* RTL specific styles */ | ||
| :host([indeterminate][dir="rtl"]) [part="value"] { | ||
| --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-primary-color-10pct) 10%, var(--lumo-primary-color)); | ||
| --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-primary-color-10pct) 10%, var(--lumo-primary-color)); | ||
| animation: vaadin-progress-indeterminate-rtl 1.6s infinite cubic-bezier(.355, .045, .645, 1); | ||
| } | ||
| :host(:not([aria-valuenow])[dir="rtl"]) [part="value"]::before, | ||
| :host([indeterminate][dir="rtl"]) [part="value"]::before { | ||
| animation: vaadin-progress-pulse3 1.6s infinite cubic-bezier(.355, .045, .645, 1); | ||
| } | ||
| @keyframes vaadin-progress-indeterminate-rtl { | ||
| 0% { | ||
| transform: scaleX(0.015); | ||
| transform-origin: 100% 0%; | ||
| } | ||
| 25% { | ||
| transform: scaleX(0.4); | ||
| } | ||
| 50% { | ||
| transform: scaleX(0.015); | ||
| transform-origin: 0% 0%; | ||
| background-image: var(--lumo-progress-indeterminate-progress-bar-background); | ||
| } | ||
| 50.1% { | ||
| transform: scaleX(0.015); | ||
| transform-origin: 0% 0%; | ||
| background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse); | ||
| } | ||
| 75% { | ||
| transform: scaleX(0.4); | ||
| } | ||
| 100% { | ||
| transform: scaleX(0.015); | ||
| transform-origin: 100% 0%; | ||
| background-image: var(--lumo-progress-indeterminate-progress-bar-background-reverse); | ||
| } | ||
| } | ||
| /* Contrast color */ | ||
| :host([theme~="contrast"][dir="rtl"]) [part="value"], | ||
| :host([theme~="contrast"][dir="rtl"]) [part="value"]::before { | ||
| --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-contrast-5pct) 10%, var(--lumo-contrast-80pct)); | ||
| --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-contrast-5pct) 10%, var(--lumo-contrast-60pct)); | ||
| } | ||
| /* Error color */ | ||
| :host([theme~="error"][dir="rtl"]) [part="value"], | ||
| :host([theme~="error"][dir="rtl"]) [part="value"]::before { | ||
| --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-error-color-10pct) 10%, var(--lumo-error-color)); | ||
| --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-error-color-10pct) 10%, var(--lumo-error-color)); | ||
| } | ||
| /* Primary color */ | ||
| :host([theme~="success"][dir="rtl"]) [part="value"], | ||
| :host([theme~="success"][dir="rtl"]) [part="value"]::before { | ||
| --lumo-progress-indeterminate-progress-bar-background: linear-gradient(to left, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color)); | ||
| --lumo-progress-indeterminate-progress-bar-background-reverse: linear-gradient(to right, var(--lumo-success-color-10pct) 10%, var(--lumo-success-color)); | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module><custom-style> | ||
| <style> | ||
| @keyframes vaadin-progress-pulse3 { | ||
| 0% { opacity: 1; } | ||
| 10% { opacity: 0; } | ||
| 40% { opacity: 0; } | ||
| 50% { opacity: 1; } | ||
| 50.1% { opacity: 1; } | ||
| 60% { opacity: 0; } | ||
| 90% { opacity: 0; } | ||
| 100% { opacity: 1; } | ||
| } | ||
| </style> | ||
| </custom-style>`; | ||
| document.head.appendChild($_documentContainer.content); | ||
| /* Safari fails to declare animations for pseudo elements inside a shadow DOM */ | ||
| import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import { progressBarStyles } from './vaadin-progress-bar-css.js'; | ||
| registerStyles('vaadin-progress-bar', progressBarStyles, { moduleId: 'lumo-progress-bar' }); | ||
| //# sourceMappingURL=vaadin-progress-bar-styles.js.map |
| import './vaadin-progress-bar-styles.js'; | ||
| import '../../src/vaadin-progress-bar.js'; | ||
| //# sourceMappingURL=vaadin-progress-bar.js.map |
@@ -1,121 +0,4 @@ | ||
| import '@vaadin/vaadin-material-styles/color.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = html`<dom-module id="material-progress-bar" theme-for="vaadin-progress-bar"> | ||
| <template> | ||
| <style> | ||
| :host { | ||
| height: 4px; | ||
| margin: 8px 0; | ||
| position: relative; | ||
| overflow: hidden; | ||
| } | ||
| :host::before { | ||
| content: ""; | ||
| display: block; | ||
| height: 100%; | ||
| background-color: var(--material-primary-color); | ||
| opacity: 0.16; | ||
| } | ||
| [part="bar"] { | ||
| position: absolute; | ||
| top: 0; | ||
| width: 100%; | ||
| transform: scaleX(var(--vaadin-progress-value)); | ||
| transform-origin: 0 0; | ||
| } | ||
| [part="value"] { | ||
| transform: none; | ||
| background-color: var(--material-primary-color); | ||
| } | ||
| /* Indeterminate */ | ||
| :host([indeterminate]) [part="bar"] { | ||
| left: -100%; | ||
| animation: primary-indeterminate-translate 2s infinite linear; | ||
| } | ||
| :host([indeterminate]) [part="value"] { | ||
| animation: primary-indeterminate-scale 2s infinite linear; | ||
| } | ||
| @keyframes primary-indeterminate-translate { | ||
| 0% { | ||
| transform: translateX(0); | ||
| } | ||
| 20% { | ||
| animation-timing-function: cubic-bezier(.5, 0, .701732, .495819); | ||
| transform: translateX(0); | ||
| } | ||
| 59.15% { | ||
| animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352); | ||
| transform: translateX(83.67142%); | ||
| } | ||
| 100% { | ||
| transform: translateX(200.611057%); | ||
| } | ||
| } | ||
| @keyframes primary-indeterminate-scale { | ||
| 0% { | ||
| transform: scaleX(.08); | ||
| } | ||
| 36.65% { | ||
| animation-timing-function: cubic-bezier(.334731, .12482, .785844, 1); | ||
| transform: scaleX(.08); | ||
| } | ||
| 69.15% { | ||
| animation-timing-function: cubic-bezier(.06, .11, .6, 1); | ||
| transform: scaleX(.661479); | ||
| } | ||
| 100% { | ||
| transform: scaleX(.08); | ||
| } | ||
| } | ||
| /* RTL specific styles */ | ||
| :host([dir="rtl"]) [part="bar"] { | ||
| transform-origin: 100% 0; | ||
| } | ||
| :host([indeterminate][dir="rtl"]) [part="bar"] { | ||
| left: auto; | ||
| right: -100%; | ||
| animation: primary-indeterminate-translate-rtl 2s infinite linear; | ||
| } | ||
| @keyframes primary-indeterminate-translate-rtl { | ||
| 0% { | ||
| transform: translateX(0); | ||
| } | ||
| 20% { | ||
| animation-timing-function: cubic-bezier(.5, 0, .701732, .495819); | ||
| transform: translateX(0); | ||
| } | ||
| 59.15% { | ||
| animation-timing-function: cubic-bezier(.302435, .381352, .55, .956352); | ||
| transform: translateX(-83.67142%); | ||
| } | ||
| 100% { | ||
| transform: translateX(-200.611057%); | ||
| } | ||
| } | ||
| </style> | ||
| </template> | ||
| </dom-module>`; | ||
| document.head.appendChild($_documentContainer.content); | ||
| import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js'; | ||
| import { progressBarStyles } from './vaadin-progress-bar-css.js'; | ||
| registerStyles('vaadin-progress-bar', progressBarStyles, { moduleId: 'material-progress-bar' }); | ||
| //# sourceMappingURL=vaadin-progress-bar-styles.js.map |
| import './vaadin-progress-bar-styles.js'; | ||
| import '../../src/vaadin-progress-bar.js'; | ||
| //# sourceMappingURL=vaadin-progress-bar.js.map |
| import './theme/lumo/vaadin-progress-bar.js'; | ||
| export { VaadinProgressBar } from './src/vaadin-progress-bar.js'; | ||
| //# sourceMappingURL=vaadin-progress-bar.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
Improved metrics
- Total package byte prevSize
- increased by124.92%
74870
- Dev dependency count
- decreased by-75%
1
- Number of package files
- increased by480%
58
- Lines of code
- increased by103.96%
926
Worsened metrics
- Dependency count
- increased by80%
9
- Number of lines in readme file
- decreased by-24.82%
103
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Added@vaadin/element-base@^0.3.0
+ Added@vaadin/mixin-utils@^0.1.0
+ Addedlit-element@^2.3.0
+ Addedlit-html@^1.0.0
+ Addedtslib@^1.10.0
+ Added@vaadin/element-base@0.3.0(transitive)
+ Added@vaadin/mixin-utils@0.1.0(transitive)
+ Added@vaadin/themable-element@0.2.0(transitive)
+ Addedtslib@1.14.1(transitive)
- Removed@polymer/polymer@^3.0.0
- Removed@vaadin/vaadin-element-mixin@^2.0.0