New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@vaadin/vaadin-progress-bar

Package Overview
Dependencies
Maintainers
16
Versions
247
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/vaadin-progress-bar - npm Package Compare versions

Comparing version 2.0.0-alpha1 to 2.0.0-alpha2

90

package.json
{
"name": "@vaadin/vaadin-progress-bar",
"version": "2.0.0-alpha1",
"version": "2.0.0-alpha2",
"description": "vaadin-progress-bar",

@@ -14,3 +14,3 @@ "main": "vaadin-progress-bar.js",

"web-component",
"lit-element"
"polymer"
],

@@ -24,10 +24,24 @@ "author": "Vaadin Ltd",

"files": [
"/vaadin-*.ts",
"/vaadin-*.d.ts",
"/vaadin-*.d.ts.map",
"/vaadin-*.js",
"/vaadin-*.js.map",
"/src/",
"/theme/"
"vaadin-*.d.ts",
"vaadin-*.js",
"src",
"theme"
],
"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",
"lint:css": "stylelint src/*.js theme/**/*-styles.js",
"lint:js": "eslint src theme test",
"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": {

@@ -39,3 +53,3 @@ "hooks": {

"lint-staged": {
"*.ts": [
"*.js": [
"eslint --fix",

@@ -45,36 +59,34 @@ "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": {
"@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",
"@polymer/polymer": "^3.0.0",
"@vaadin/vaadin-themable-mixin": "^1.6.1",
"@vaadin/vaadin-lumo-styles": "^1.6.1",
"@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"
"@vaadin/vaadin-element-mixin": "^2.4.1"
},
"devDependencies": {
"@vaadin/vaadin-component-dev-dependencies": "^4.9.0"
"@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",
"@web/dev-server": "^0.1.4",
"@web/test-runner": "^0.12.2",
"@web/test-runner-saucelabs": "^0.4.0",
"eslint": "^7.15.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",
"stylelint": "^13.8.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-vaadin": "^0.2.10"
}
}

29

README.md

@@ -10,15 +10,8 @@ # &lt;vaadin-progress-bar&gt;

[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-progress-bar)](https://www.npmjs.com/package/@vaadin/vaadin-progress-bar)
[![Build Status](https://travis-ci.org/vaadin/vaadin-progress-bar.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-progress-bar)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-progress-bar)
[![Build Status](https://travis-ci.org/vaadin/vaadin-progress-bar.svg?branch=next)](https://travis-ci.org/vaadin/vaadin-progress-bar)
[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-progress-bar/badge.svg?branch=next)](https://coveralls.io/github/vaadin/vaadin-progress-bar?branch=next)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-progress-bar)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadinvaadin-progress-bar.svg)](https://vaadin.com/directory/component/vaadinvaadin-progress-bar)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
> ⚠️ 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

@@ -67,6 +60,8 @@ <vaadin-progress-bar></vaadin-progress-bar>

## Running demos and API docs in a browser
## Running API docs and tests in a browser
1. Fork the `vaadin-progress-bar` repository and clone it locally.
1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
1. Make sure you have [npm](https://www.npmjs.com/) installed.

@@ -78,12 +73,18 @@

1. You can also open visual tests, for example:
- http://127.0.0.1:3000/test/visual/default.html
## Running tests from the command line
- When in the `vaadin-progress-bar` directory, run `npm test`
1. When in the `vaadin-progress-bar` directory, run `npm test`
- To debug tests in the browser, run `npm run test:debug`
## 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 TypeScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.ts` 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.

@@ -98,3 +99,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.

@@ -101,0 +102,0 @@

53

src/vaadin-progress-bar.d.ts

@@ -1,19 +0,46 @@

import { ProgressBarBase } from './vaadin-progress-bar-base.js';
declare const VaadinProgressBar_base: typeof ProgressBarBase & import("@vaadin/mixin-utils").Constructor<import("./vaadin-progress-mixin").ProgressMixinInterface>;
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';
/**
* `<vaadin-progress-bar>` is a Web Component for progress bars.
*
* @csspart part="bar" - Progress-bar's background
* @csspart part="value" - Progress-bar's foreground
* ```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
*/
export declare class VaadinProgressBar extends VaadinProgressBar_base {
static is: string;
static get version(): string;
}
declare class ProgressBarElement extends ProgressMixin(ThemableMixin(ElementMixin(HTMLElement))) {}
declare global {
interface HTMLElementTagNameMap {
'vaadin-progress-bar': VaadinProgressBar;
}
interface HTMLElementTagNameMap {
'vaadin-progress-bar': ProgressBarElement;
}
}
export {};
//# sourceMappingURL=vaadin-progress-bar.d.ts.map
export { ProgressBarElement };

106

src/vaadin-progress-bar.js

@@ -1,21 +0,95 @@

import { __decorate } from "tslib";
import { customElement } from 'lit-element';
import { ProgressBarBase } from './vaadin-progress-bar-base.js';
/**
* @license
* Copyright (c) 2020 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
import { ProgressMixin } from './vaadin-progress-mixin.js';
/**
* `<vaadin-progress-bar>` is a Web Component for progress bars.
*
* @csspart part="bar" - Progress-bar's background
* @csspart part="value" - Progress-bar's foreground
* ```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
*
* @extends HTMLElement
* @mixes ProgressMixin
* @mixes ThemableMixin
* @mixes ElementMixin
*/
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
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 '2.0.0-alpha2';
}
}
customElements.define(ProgressBarElement.is, ProgressBarElement);
export { ProgressBarElement };

38

src/vaadin-progress-mixin.d.ts

@@ -1,10 +0,30 @@

import { Constructor } from '@vaadin/mixin-utils';
import { LitElement } from 'lit-element';
export interface ProgressMixinInterface {
value: number | null | undefined;
min: number;
max: number;
indeterminate: boolean;
declare function ProgressMixin<T extends new (...args: any[]) => {}>(base: T): T & ProgressMixinConstructor;
interface ProgressMixinConstructor {
new (...args: any[]): ProgressMixin;
}
export declare const ProgressMixin: <T extends Constructor<LitElement>>(base: T) => T & Constructor<ProgressMixinInterface>;
//# sourceMappingURL=vaadin-progress-mixin.d.ts.map
interface ProgressMixin {
/**
* Current progress value.
*/
value: number | null | undefined;
/**
* Minimum bound of the progress bar.
*/
min: number;
/**
* Maximum bound of the progress bar.
*/
max: number;
/**
* Indeterminate state of the progress bar.
* This property takes precedence over other state properties (min, max, value).
*/
indeterminate: boolean;
}
export { ProgressMixin, ProgressMixinConstructor };

187

src/vaadin-progress-mixin.js

@@ -1,88 +0,107 @@

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));
}
/**
* @license
* Copyright (c) 2020 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 {
/**
* Percent of current progress relative to whole progress bar (max - min)
* Current progress value.
*/
_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;
value: {
type: Number,
observer: '_valueChanged'
},
/**
* Minimum bound of the progress bar.
* @type {number}
*/
min: {
type: Number,
value: 0,
observer: '_minChanged'
},
/**
* Maximum bound of the progress bar.
* @type {number}
*/
max: {
type: Number,
value: 1,
observer: '_maxChanged'
},
/**
* Indeterminate state of the progress bar.
* This property takes precedence over other state properties (min, max, value).
* @type {boolean}
*/
indeterminate: {
type: Boolean,
value: false,
reflectToAttribute: true
}
};
}
__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
static get observers() {
return ['_normalizedValueChanged(value, min, max)'];
}
/** @protected */
ready() {
super.ready();
this.setAttribute('role', 'progressbar');
}
/** @private */
_normalizedValueChanged(value, min, max) {
const newNormalizedValue = this._normalizeValue(value, min, max);
this.style.setProperty('--vaadin-progress-value', newNormalizedValue);
}
/** @private */
_valueChanged(newV) {
this.setAttribute('aria-valuenow', newV);
}
/** @private */
_minChanged(newV) {
this.setAttribute('aria-valuemin', newV);
}
/** @private */
_maxChanged(newV) {
this.setAttribute('aria-valuemax', newV);
}
/**
* Percent of current progress relative to whole progress bar (max - min)
* @private
*/
_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;
}
};

293

theme/lumo/vaadin-progress-bar-styles.js

@@ -1,4 +0,289 @@

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 { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.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';
registerStyles(
'vaadin-progress-bar',
css`
: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(0.645, 0.045, 0.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(0.645, 0.045, 0.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(0.355, 0.045, 0.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(0.355, 0.045, 0.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)
);
}
`,
{ moduleId: 'lumo-progress-bar' }
);
const $_documentContainer = document.createElement('template');
/* Safari fails to declare animations for pseudo elements inside a shadow DOM */
$_documentContainer.innerHTML = `
<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>
`;
document.head.appendChild($_documentContainer.content);

1

theme/lumo/vaadin-progress-bar.js
import './vaadin-progress-bar-styles.js';
import '../../src/vaadin-progress-bar.js';
//# sourceMappingURL=vaadin-progress-bar.js.map

122

theme/material/vaadin-progress-bar-styles.js

@@ -1,4 +0,118 @@

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 { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '@vaadin/vaadin-material-styles/color.js';
registerStyles(
'vaadin-progress-bar',
css`
: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(0.5, 0, 0.701732, 0.495819);
transform: translateX(0);
}
59.15% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(83.67142%);
}
100% {
transform: translateX(200.611057%);
}
}
@keyframes primary-indeterminate-scale {
0% {
transform: scaleX(0.08);
}
36.65% {
animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
transform: scaleX(0.08);
}
69.15% {
animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
transform: scaleX(0.661479);
}
100% {
transform: scaleX(0.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(0.5, 0, 0.701732, 0.495819);
transform: translateX(0);
}
59.15% {
animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
transform: translateX(-83.67142%);
}
100% {
transform: translateX(-200.611057%);
}
}
`,
{ moduleId: 'material-progress-bar' }
);

1

theme/material/vaadin-progress-bar.js
import './vaadin-progress-bar-styles.js';
import '../../src/vaadin-progress-bar.js';
//# sourceMappingURL=vaadin-progress-bar.js.map

4

vaadin-progress-bar.d.ts

@@ -1,3 +0,1 @@

import './theme/lumo/vaadin-progress-bar.js';
export { VaadinProgressBar } from './src/vaadin-progress-bar.js';
//# sourceMappingURL=vaadin-progress-bar.d.ts.map
export * from './src/vaadin-progress-bar.js';

3

vaadin-progress-bar.js
import './theme/lumo/vaadin-progress-bar.js';
export { VaadinProgressBar } from './src/vaadin-progress-bar.js';
//# sourceMappingURL=vaadin-progress-bar.js.map
export * from './src/vaadin-progress-bar.js';
src/vaadin-progress-bar-base.d.ts
src/vaadin-progress-bar-base.d.ts.map
src/vaadin-progress-bar-base.js
src/vaadin-progress-bar-base.js.map
src/vaadin-progress-bar-base.ts
src/vaadin-progress-bar-css.d.ts
src/vaadin-progress-bar-css.d.ts.map
src/vaadin-progress-bar-css.js
src/vaadin-progress-bar-css.js.map
src/vaadin-progress-bar-css.ts
src/vaadin-progress-bar.d.ts.map
src/vaadin-progress-bar.js.map
src/vaadin-progress-bar.ts
src/vaadin-progress-mixin.d.ts.map
src/vaadin-progress-mixin.js.map
src/vaadin-progress-mixin.ts
theme/lumo/vaadin-progress-bar-css.d.ts
theme/lumo/vaadin-progress-bar-css.d.ts.map
theme/lumo/vaadin-progress-bar-css.js
theme/lumo/vaadin-progress-bar-css.js.map
theme/lumo/vaadin-progress-bar-css.ts
theme/lumo/vaadin-progress-bar-styles.d.ts
theme/lumo/vaadin-progress-bar-styles.d.ts.map
theme/lumo/vaadin-progress-bar-styles.js.map
theme/lumo/vaadin-progress-bar-styles.ts
theme/lumo/vaadin-progress-bar.d.ts
theme/lumo/vaadin-progress-bar.d.ts.map
theme/lumo/vaadin-progress-bar.js.map
theme/lumo/vaadin-progress-bar.ts
theme/material/vaadin-progress-bar-css.d.ts
theme/material/vaadin-progress-bar-css.d.ts.map
theme/material/vaadin-progress-bar-css.js
theme/material/vaadin-progress-bar-css.js.map
theme/material/vaadin-progress-bar-css.ts
theme/material/vaadin-progress-bar-styles.d.ts
theme/material/vaadin-progress-bar-styles.d.ts.map
theme/material/vaadin-progress-bar-styles.js.map
theme/material/vaadin-progress-bar-styles.ts
theme/material/vaadin-progress-bar.d.ts
theme/material/vaadin-progress-bar.d.ts.map
theme/material/vaadin-progress-bar.js.map
theme/material/vaadin-progress-bar.ts
vaadin-progress-bar.d.ts.map
vaadin-progress-bar.js.map
vaadin-progress-bar.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc