@spectrum-web-components/progress-bar 0.3.8-lit-next.0 → 0.3.8
Sign up to get free protection for your applications and to get access to all the features.
- package/custom-elements.json +2 -2
- package/package.json +4 -4
- package/src/progress-bar.css.js +95 -1
- package/src/progress-bar.css.js.map +1 -1
- package/src/spectrum-progress-bar.css.js +95 -1
- package/src/spectrum-progress-bar.css.js.map +1 -1
- package/test/progress-bar-sizes.test-vrt.js +0 -15
- package/test/progress-bar-sizes.test-vrt.js.map +0 -1
- package/test/progress-bar.test-vrt.js +0 -15
- package/test/progress-bar.test-vrt.js.map +0 -1
- package/test/progress-bar.test.js +0 -69
- package/test/progress-bar.test.js.map +0 -1
package/custom-elements.json
CHANGED
|
@@ -169,7 +169,7 @@
|
|
|
169
169
|
{
|
|
170
170
|
"kind": "variable",
|
|
171
171
|
"name": "styles",
|
|
172
|
-
"default": "css`\n:host([size=s]){--spectrum-progressbar-border-radius:var(--spectrum-progressbar-s-border-radius);--spectrum-progressbar-label-gap-y:var(--spectrum-progressbar-s-label-gap-y,var(--spectrum-global-dimension-size-50));--spectrum-progressbar-height:var(--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50));--spectrum-progressbar-width:var(--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400));--spectrum-progressbar-indeterminate-fill-width:var(--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700));--spectrum-progressbar-indeterminate-duration:var(--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000));--spectrum-fieldlabel-side-padding-right:var(--spectrum-fieldlabel-side-s-padding-right,var(--spectrum-global-dimension-size-130))}:host([size=m]){--spectrum-progressbar-border-radius:var(--spectrum-progressbar-m-border-radius);--spectrum-progressbar-label-gap-y:var(--spectrum-progressbar-m-label-gap-y,var(--spectrum-global-dimension-size-50));--spectrum-progressbar-height:var(--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75));--spectrum-progressbar-width:var(--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400));--spectrum-progressbar-indeterminate-fill-width:var(--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700));--spectrum-progressbar-indeterminate-duration:var(--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000));--spectrum-fieldlabel-side-padding-right:var(--spectrum-fieldlabel-side-m-padding-right,var(--spectrum-global-dimension-size-150))}:host([size=l]){--spectrum-progressbar-label-gap-y:var(--spectrum-progressbar-l-label-gap-y,var(--spectrum-global-dimension-size-50));--spectrum-progressbar-height:var(--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100));--spectrum-progressbar-border-radius:var(--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50));--spectrum-progressbar-width:var(--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500));--spectrum-progressbar-indeterminate-fill-width:var(--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-size-1800));--spectrum-progressbar-indeterminate-duration:var(--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000));--spectrum-fieldlabel-side-padding-right:var(--spectrum-fieldlabel-side-l-padding-right,var(--spectrum-global-dimension-size-175))}:host([size=xl]){--spectrum-progressbar-border-radius:var(--spectrum-progressbar-xl-border-radius);--spectrum-progressbar-label-gap-y:var(--spectrum-progressbar-xl-label-gap-y,var(--spectrum-global-dimension-size-50));--spectrum-progressbar-height:var(--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125));--spectrum-progressbar-width:var(--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800));--spectrum-progressbar-indeterminate-fill-width:var(--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-size-2000));--spectrum-progressbar-indeterminate-duration:var(--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000));--spectrum-fieldlabel-side-padding-right:var(--spectrum-fieldlabel-side-xl-padding-right,var(--spectrum-global-dimension-size-185))}:host{
|
|
172
|
+
"default": "css`\n:host([size=s]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-s-border-radius\n);--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-s-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-s-padding-right,var(--spectrum-global-dimension-size-130)\n)}:host([size=m]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-m-border-radius\n);--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-m-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-m-padding-right,var(--spectrum-global-dimension-size-150)\n)}:host([size=l]){--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-l-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)\n);--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-size-1800)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-l-padding-right,var(--spectrum-global-dimension-size-175)\n)}:host([size=xl]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-xl-border-radius\n);--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-xl-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-size-2000)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-xl-padding-right,var(--spectrum-global-dimension-size-185)\n)}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(\n--spectrum-progressbar-label-gap-y\n)}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(\n--spectrum-progressbar-width\n)}:host([dir=ltr][side-label]) .label{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .label{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(\n--spectrum-progressbar-indeterminate-animation-ease\n);position:relative;width:var(\n--spectrum-progressbar-indeterminate-fill-width\n);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(-1*var(--spectrum-progressbar-indeterminate-fill-width)))}to{transform:translate(var(--spectrum-progressbar-width))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--spectrum-progressbar-width))}to{transform:translate(calc(-1*var(--spectrum-progressbar-width)))}}.fill{background:var(\n--spectrum-progressbar-m-track-fill-color,var(--spectrum-global-color-blue-500)\n)}.track{background-color:var(\n--spectrum-progressbar-m-track-color,var(--spectrum-alias-track-color-default)\n)}:host([over-background]) .fill{background:var(\n--spectrum-progressbar-m-over-background-track-fill-color,var(--spectrum-global-color-static-white)\n)}:host([over-background]) .label,:host([over-background]) .percentage{color:var(\n--spectrum-progressbar-m-over-background-track-fill-color,var(--spectrum-global-color-static-white)\n)}:host([over-background]) .track{background-color:var(\n--spectrum-progressbar-m-over-background-track-color,var(--spectrum-alias-track-color-over-background)\n)}:host([positive]) .fill{background:var(\n--spectrum-meter-positive-m-track-fill-color,var(--spectrum-semantic-positive-color-status)\n)}:host(.is-notice) .fill{background:var(\n--spectrum-meter-notice-m-track-fill-color,var(--spectrum-semantic-notice-color-status)\n)}:host(.is-negative) .fill{background:var(\n--spectrum-meter-negative-m-track-fill-color,var(--spectrum-semantic-negative-color-status)\n)}.label,.percentage{color:var(\n--spectrum-fieldlabel-m-text-color,var(--spectrum-alias-label-text-color)\n)}.fill{transform-origin:left;width:100%}:host([dir=rtl]) .fill{transform-origin:right}\n`"
|
|
173
173
|
}
|
|
174
174
|
],
|
|
175
175
|
"exports": [
|
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
{
|
|
191
191
|
"kind": "variable",
|
|
192
192
|
"name": "styles",
|
|
193
|
-
"default": "css`\n:host([size=s]){--spectrum-progressbar-border-radius:var(--spectrum-progressbar-s-border-radius);--spectrum-progressbar-label-gap-y:var(--spectrum-progressbar-s-label-gap-y,var(--spectrum-global-dimension-size-50));--spectrum-progressbar-height:var(--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50));--spectrum-progressbar-width:var(--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400));--spectrum-progressbar-indeterminate-fill-width:var(--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700));--spectrum-progressbar-indeterminate-duration:var(--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000));--spectrum-fieldlabel-side-padding-right:var(--spectrum-fieldlabel-side-s-padding-right,var(--spectrum-global-dimension-size-130))}:host([size=m]){--spectrum-progressbar-border-radius:var(--spectrum-progressbar-m-border-radius);--spectrum-progressbar-label-gap-y:var(--spectrum-progressbar-m-label-gap-y,var(--spectrum-global-dimension-size-50));--spectrum-progressbar-height:var(--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75));--spectrum-progressbar-width:var(--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400));--spectrum-progressbar-indeterminate-fill-width:var(--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700));--spectrum-progressbar-indeterminate-duration:var(--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000));--spectrum-fieldlabel-side-padding-right:var(--spectrum-fieldlabel-side-m-padding-right,var(--spectrum-global-dimension-size-150))}:host([size=l]){--spectrum-progressbar-label-gap-y:var(--spectrum-progressbar-l-label-gap-y,var(--spectrum-global-dimension-size-50));--spectrum-progressbar-height:var(--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100));--spectrum-progressbar-border-radius:var(--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50));--spectrum-progressbar-width:var(--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500));--spectrum-progressbar-indeterminate-fill-width:var(--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-size-1800));--spectrum-progressbar-indeterminate-duration:var(--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000));--spectrum-fieldlabel-side-padding-right:var(--spectrum-fieldlabel-side-l-padding-right,var(--spectrum-global-dimension-size-175))}:host([size=xl]){--spectrum-progressbar-border-radius:var(--spectrum-progressbar-xl-border-radius);--spectrum-progressbar-label-gap-y:var(--spectrum-progressbar-xl-label-gap-y,var(--spectrum-global-dimension-size-50));--spectrum-progressbar-height:var(--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125));--spectrum-progressbar-width:var(--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800));--spectrum-progressbar-indeterminate-fill-width:var(--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-size-2000));--spectrum-progressbar-indeterminate-duration:var(--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000));--spectrum-fieldlabel-side-padding-right:var(--spectrum-fieldlabel-side-xl-padding-right,var(--spectrum-global-dimension-size-185))}:host{
|
|
193
|
+
"default": "css`\n:host([size=s]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-s-border-radius\n);--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-s-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-s-padding-right,var(--spectrum-global-dimension-size-130)\n)}:host([size=m]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-m-border-radius\n);--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-m-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-m-padding-right,var(--spectrum-global-dimension-size-150)\n)}:host([size=l]){--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-l-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)\n);--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-size-1800)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-l-padding-right,var(--spectrum-global-dimension-size-175)\n)}:host([size=xl]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-xl-border-radius\n);--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-xl-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-size-2000)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-xl-padding-right,var(--spectrum-global-dimension-size-185)\n)}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(\n--spectrum-progressbar-label-gap-y\n)}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(\n--spectrum-progressbar-width\n)}:host([dir=ltr][side-label]) .label{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .label{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(\n--spectrum-progressbar-indeterminate-animation-ease\n);position:relative;width:var(\n--spectrum-progressbar-indeterminate-fill-width\n);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(-1*var(--spectrum-progressbar-indeterminate-fill-width)))}to{transform:translate(var(--spectrum-progressbar-width))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--spectrum-progressbar-width))}to{transform:translate(calc(-1*var(--spectrum-progressbar-width)))}}.fill{background:var(\n--spectrum-progressbar-m-track-fill-color,var(--spectrum-global-color-blue-500)\n)}.track{background-color:var(\n--spectrum-progressbar-m-track-color,var(--spectrum-alias-track-color-default)\n)}:host([over-background]) .fill{background:var(\n--spectrum-progressbar-m-over-background-track-fill-color,var(--spectrum-global-color-static-white)\n)}:host([over-background]) .label,:host([over-background]) .percentage{color:var(\n--spectrum-progressbar-m-over-background-track-fill-color,var(--spectrum-global-color-static-white)\n)}:host([over-background]) .track{background-color:var(\n--spectrum-progressbar-m-over-background-track-color,var(--spectrum-alias-track-color-over-background)\n)}:host([positive]) .fill{background:var(\n--spectrum-meter-positive-m-track-fill-color,var(--spectrum-semantic-positive-color-status)\n)}:host(.is-notice) .fill{background:var(\n--spectrum-meter-notice-m-track-fill-color,var(--spectrum-semantic-notice-color-status)\n)}:host(.is-negative) .fill{background:var(\n--spectrum-meter-negative-m-track-fill-color,var(--spectrum-semantic-negative-color-status)\n)}.label,.percentage{color:var(\n--spectrum-fieldlabel-m-text-color,var(--spectrum-alias-label-text-color)\n)}\n`"
|
|
194
194
|
}
|
|
195
195
|
],
|
|
196
196
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/progress-bar",
|
|
3
|
-
"version": "0.3.8
|
|
3
|
+
"version": "0.3.8",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"lit-html"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@spectrum-web-components/base": "^0.4.
|
|
48
|
-
"@spectrum-web-components/field-label": "^0.5.8
|
|
47
|
+
"@spectrum-web-components/base": "^0.4.5",
|
|
48
|
+
"@spectrum-web-components/field-label": "^0.5.8",
|
|
49
49
|
"tslib": "^2.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"sideEffects": [
|
|
57
57
|
"./sp-*.js"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "d7f2ca747a902cf8b632cc8491fa675419297180"
|
|
60
60
|
}
|
package/src/progress-bar.css.js
CHANGED
|
@@ -11,7 +11,101 @@ governing permissions and limitations under the License.
|
|
|
11
11
|
*/
|
|
12
12
|
import { css } from '@spectrum-web-components/base';
|
|
13
13
|
const styles = css `
|
|
14
|
-
:host([size=s]){--spectrum-progressbar-border-radius:var(
|
|
14
|
+
:host([size=s]){--spectrum-progressbar-border-radius:var(
|
|
15
|
+
--spectrum-progressbar-s-border-radius
|
|
16
|
+
);--spectrum-progressbar-label-gap-y:var(
|
|
17
|
+
--spectrum-progressbar-s-label-gap-y,var(--spectrum-global-dimension-size-50)
|
|
18
|
+
);--spectrum-progressbar-height:var(
|
|
19
|
+
--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)
|
|
20
|
+
);--spectrum-progressbar-width:var(
|
|
21
|
+
--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)
|
|
22
|
+
);--spectrum-progressbar-indeterminate-fill-width:var(
|
|
23
|
+
--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700)
|
|
24
|
+
);--spectrum-progressbar-indeterminate-duration:var(
|
|
25
|
+
--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)
|
|
26
|
+
);--spectrum-fieldlabel-side-padding-right:var(
|
|
27
|
+
--spectrum-fieldlabel-side-s-padding-right,var(--spectrum-global-dimension-size-130)
|
|
28
|
+
)}:host([size=m]){--spectrum-progressbar-border-radius:var(
|
|
29
|
+
--spectrum-progressbar-m-border-radius
|
|
30
|
+
);--spectrum-progressbar-label-gap-y:var(
|
|
31
|
+
--spectrum-progressbar-m-label-gap-y,var(--spectrum-global-dimension-size-50)
|
|
32
|
+
);--spectrum-progressbar-height:var(
|
|
33
|
+
--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)
|
|
34
|
+
);--spectrum-progressbar-width:var(
|
|
35
|
+
--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)
|
|
36
|
+
);--spectrum-progressbar-indeterminate-fill-width:var(
|
|
37
|
+
--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700)
|
|
38
|
+
);--spectrum-progressbar-indeterminate-duration:var(
|
|
39
|
+
--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)
|
|
40
|
+
);--spectrum-fieldlabel-side-padding-right:var(
|
|
41
|
+
--spectrum-fieldlabel-side-m-padding-right,var(--spectrum-global-dimension-size-150)
|
|
42
|
+
)}:host([size=l]){--spectrum-progressbar-label-gap-y:var(
|
|
43
|
+
--spectrum-progressbar-l-label-gap-y,var(--spectrum-global-dimension-size-50)
|
|
44
|
+
);--spectrum-progressbar-height:var(
|
|
45
|
+
--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)
|
|
46
|
+
);--spectrum-progressbar-border-radius:var(
|
|
47
|
+
--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)
|
|
48
|
+
);--spectrum-progressbar-width:var(
|
|
49
|
+
--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)
|
|
50
|
+
);--spectrum-progressbar-indeterminate-fill-width:var(
|
|
51
|
+
--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-size-1800)
|
|
52
|
+
);--spectrum-progressbar-indeterminate-duration:var(
|
|
53
|
+
--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)
|
|
54
|
+
);--spectrum-fieldlabel-side-padding-right:var(
|
|
55
|
+
--spectrum-fieldlabel-side-l-padding-right,var(--spectrum-global-dimension-size-175)
|
|
56
|
+
)}:host([size=xl]){--spectrum-progressbar-border-radius:var(
|
|
57
|
+
--spectrum-progressbar-xl-border-radius
|
|
58
|
+
);--spectrum-progressbar-label-gap-y:var(
|
|
59
|
+
--spectrum-progressbar-xl-label-gap-y,var(--spectrum-global-dimension-size-50)
|
|
60
|
+
);--spectrum-progressbar-height:var(
|
|
61
|
+
--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)
|
|
62
|
+
);--spectrum-progressbar-width:var(
|
|
63
|
+
--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)
|
|
64
|
+
);--spectrum-progressbar-indeterminate-fill-width:var(
|
|
65
|
+
--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-size-2000)
|
|
66
|
+
);--spectrum-progressbar-indeterminate-duration:var(
|
|
67
|
+
--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)
|
|
68
|
+
);--spectrum-fieldlabel-side-padding-right:var(
|
|
69
|
+
--spectrum-fieldlabel-side-xl-padding-right,var(--spectrum-global-dimension-size-185)
|
|
70
|
+
)}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(
|
|
71
|
+
--spectrum-progressbar-label-gap-y
|
|
72
|
+
)}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(
|
|
73
|
+
--spectrum-fieldlabel-side-padding-right
|
|
74
|
+
)}:host([dir=rtl]) .percentage{margin-right:var(
|
|
75
|
+
--spectrum-fieldlabel-side-padding-right
|
|
76
|
+
)}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(
|
|
77
|
+
--spectrum-progressbar-width
|
|
78
|
+
)}:host([dir=ltr][side-label]) .label{margin-right:var(
|
|
79
|
+
--spectrum-fieldlabel-side-padding-right
|
|
80
|
+
)}:host([dir=rtl][side-label]) .label{margin-left:var(
|
|
81
|
+
--spectrum-fieldlabel-side-padding-right
|
|
82
|
+
)}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(
|
|
83
|
+
--spectrum-fieldlabel-side-padding-right
|
|
84
|
+
)}:host([dir=rtl][side-label]) .percentage{margin-right:var(
|
|
85
|
+
--spectrum-fieldlabel-side-padding-right
|
|
86
|
+
)}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(
|
|
87
|
+
--spectrum-progressbar-indeterminate-animation-ease
|
|
88
|
+
);position:relative;width:var(
|
|
89
|
+
--spectrum-progressbar-indeterminate-fill-width
|
|
90
|
+
);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(-1*var(--spectrum-progressbar-indeterminate-fill-width)))}to{transform:translate(var(--spectrum-progressbar-width))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--spectrum-progressbar-width))}to{transform:translate(calc(-1*var(--spectrum-progressbar-width)))}}.fill{background:var(
|
|
91
|
+
--spectrum-progressbar-m-track-fill-color,var(--spectrum-global-color-blue-500)
|
|
92
|
+
)}.track{background-color:var(
|
|
93
|
+
--spectrum-progressbar-m-track-color,var(--spectrum-alias-track-color-default)
|
|
94
|
+
)}:host([over-background]) .fill{background:var(
|
|
95
|
+
--spectrum-progressbar-m-over-background-track-fill-color,var(--spectrum-global-color-static-white)
|
|
96
|
+
)}:host([over-background]) .label,:host([over-background]) .percentage{color:var(
|
|
97
|
+
--spectrum-progressbar-m-over-background-track-fill-color,var(--spectrum-global-color-static-white)
|
|
98
|
+
)}:host([over-background]) .track{background-color:var(
|
|
99
|
+
--spectrum-progressbar-m-over-background-track-color,var(--spectrum-alias-track-color-over-background)
|
|
100
|
+
)}:host([positive]) .fill{background:var(
|
|
101
|
+
--spectrum-meter-positive-m-track-fill-color,var(--spectrum-semantic-positive-color-status)
|
|
102
|
+
)}:host(.is-notice) .fill{background:var(
|
|
103
|
+
--spectrum-meter-notice-m-track-fill-color,var(--spectrum-semantic-notice-color-status)
|
|
104
|
+
)}:host(.is-negative) .fill{background:var(
|
|
105
|
+
--spectrum-meter-negative-m-track-fill-color,var(--spectrum-semantic-negative-color-status)
|
|
106
|
+
)}.label,.percentage{color:var(
|
|
107
|
+
--spectrum-fieldlabel-m-text-color,var(--spectrum-alias-label-text-color)
|
|
108
|
+
)}.fill{transform-origin:left;width:100%}:host([dir=rtl]) .fill{transform-origin:right}
|
|
15
109
|
`;
|
|
16
110
|
export default styles;
|
|
17
111
|
//# sourceMappingURL=progress-bar.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar.css.js","sourceRoot":"","sources":["progress-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"progress-bar.css.js","sourceRoot":"","sources":["progress-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-s-border-radius\n);--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-s-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-s-padding-right,var(--spectrum-global-dimension-size-130)\n)}:host([size=m]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-m-border-radius\n);--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-m-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-m-padding-right,var(--spectrum-global-dimension-size-150)\n)}:host([size=l]){--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-l-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)\n);--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-size-1800)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-l-padding-right,var(--spectrum-global-dimension-size-175)\n)}:host([size=xl]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-xl-border-radius\n);--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-xl-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-size-2000)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-xl-padding-right,var(--spectrum-global-dimension-size-185)\n)}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(\n--spectrum-progressbar-label-gap-y\n)}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(\n--spectrum-progressbar-width\n)}:host([dir=ltr][side-label]) .label{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .label{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(\n--spectrum-progressbar-indeterminate-animation-ease\n);position:relative;width:var(\n--spectrum-progressbar-indeterminate-fill-width\n);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(-1*var(--spectrum-progressbar-indeterminate-fill-width)))}to{transform:translate(var(--spectrum-progressbar-width))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--spectrum-progressbar-width))}to{transform:translate(calc(-1*var(--spectrum-progressbar-width)))}}.fill{background:var(\n--spectrum-progressbar-m-track-fill-color,var(--spectrum-global-color-blue-500)\n)}.track{background-color:var(\n--spectrum-progressbar-m-track-color,var(--spectrum-alias-track-color-default)\n)}:host([over-background]) .fill{background:var(\n--spectrum-progressbar-m-over-background-track-fill-color,var(--spectrum-global-color-static-white)\n)}:host([over-background]) .label,:host([over-background]) .percentage{color:var(\n--spectrum-progressbar-m-over-background-track-fill-color,var(--spectrum-global-color-static-white)\n)}:host([over-background]) .track{background-color:var(\n--spectrum-progressbar-m-over-background-track-color,var(--spectrum-alias-track-color-over-background)\n)}:host([positive]) .fill{background:var(\n--spectrum-meter-positive-m-track-fill-color,var(--spectrum-semantic-positive-color-status)\n)}:host(.is-notice) .fill{background:var(\n--spectrum-meter-notice-m-track-fill-color,var(--spectrum-semantic-notice-color-status)\n)}:host(.is-negative) .fill{background:var(\n--spectrum-meter-negative-m-track-fill-color,var(--spectrum-semantic-negative-color-status)\n)}.label,.percentage{color:var(\n--spectrum-fieldlabel-m-text-color,var(--spectrum-alias-label-text-color)\n)}.fill{transform-origin:left;width:100%}:host([dir=rtl]) .fill{transform-origin:right}\n`;\nexport default styles;"]}
|
|
@@ -11,7 +11,101 @@ governing permissions and limitations under the License.
|
|
|
11
11
|
*/
|
|
12
12
|
import { css } from '@spectrum-web-components/base';
|
|
13
13
|
const styles = css `
|
|
14
|
-
:host([size=s]){--spectrum-progressbar-border-radius:var(
|
|
14
|
+
:host([size=s]){--spectrum-progressbar-border-radius:var(
|
|
15
|
+
--spectrum-progressbar-s-border-radius
|
|
16
|
+
);--spectrum-progressbar-label-gap-y:var(
|
|
17
|
+
--spectrum-progressbar-s-label-gap-y,var(--spectrum-global-dimension-size-50)
|
|
18
|
+
);--spectrum-progressbar-height:var(
|
|
19
|
+
--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)
|
|
20
|
+
);--spectrum-progressbar-width:var(
|
|
21
|
+
--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)
|
|
22
|
+
);--spectrum-progressbar-indeterminate-fill-width:var(
|
|
23
|
+
--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700)
|
|
24
|
+
);--spectrum-progressbar-indeterminate-duration:var(
|
|
25
|
+
--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)
|
|
26
|
+
);--spectrum-fieldlabel-side-padding-right:var(
|
|
27
|
+
--spectrum-fieldlabel-side-s-padding-right,var(--spectrum-global-dimension-size-130)
|
|
28
|
+
)}:host([size=m]){--spectrum-progressbar-border-radius:var(
|
|
29
|
+
--spectrum-progressbar-m-border-radius
|
|
30
|
+
);--spectrum-progressbar-label-gap-y:var(
|
|
31
|
+
--spectrum-progressbar-m-label-gap-y,var(--spectrum-global-dimension-size-50)
|
|
32
|
+
);--spectrum-progressbar-height:var(
|
|
33
|
+
--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)
|
|
34
|
+
);--spectrum-progressbar-width:var(
|
|
35
|
+
--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)
|
|
36
|
+
);--spectrum-progressbar-indeterminate-fill-width:var(
|
|
37
|
+
--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700)
|
|
38
|
+
);--spectrum-progressbar-indeterminate-duration:var(
|
|
39
|
+
--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)
|
|
40
|
+
);--spectrum-fieldlabel-side-padding-right:var(
|
|
41
|
+
--spectrum-fieldlabel-side-m-padding-right,var(--spectrum-global-dimension-size-150)
|
|
42
|
+
)}:host([size=l]){--spectrum-progressbar-label-gap-y:var(
|
|
43
|
+
--spectrum-progressbar-l-label-gap-y,var(--spectrum-global-dimension-size-50)
|
|
44
|
+
);--spectrum-progressbar-height:var(
|
|
45
|
+
--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)
|
|
46
|
+
);--spectrum-progressbar-border-radius:var(
|
|
47
|
+
--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)
|
|
48
|
+
);--spectrum-progressbar-width:var(
|
|
49
|
+
--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)
|
|
50
|
+
);--spectrum-progressbar-indeterminate-fill-width:var(
|
|
51
|
+
--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-size-1800)
|
|
52
|
+
);--spectrum-progressbar-indeterminate-duration:var(
|
|
53
|
+
--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)
|
|
54
|
+
);--spectrum-fieldlabel-side-padding-right:var(
|
|
55
|
+
--spectrum-fieldlabel-side-l-padding-right,var(--spectrum-global-dimension-size-175)
|
|
56
|
+
)}:host([size=xl]){--spectrum-progressbar-border-radius:var(
|
|
57
|
+
--spectrum-progressbar-xl-border-radius
|
|
58
|
+
);--spectrum-progressbar-label-gap-y:var(
|
|
59
|
+
--spectrum-progressbar-xl-label-gap-y,var(--spectrum-global-dimension-size-50)
|
|
60
|
+
);--spectrum-progressbar-height:var(
|
|
61
|
+
--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)
|
|
62
|
+
);--spectrum-progressbar-width:var(
|
|
63
|
+
--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)
|
|
64
|
+
);--spectrum-progressbar-indeterminate-fill-width:var(
|
|
65
|
+
--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-size-2000)
|
|
66
|
+
);--spectrum-progressbar-indeterminate-duration:var(
|
|
67
|
+
--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)
|
|
68
|
+
);--spectrum-fieldlabel-side-padding-right:var(
|
|
69
|
+
--spectrum-fieldlabel-side-xl-padding-right,var(--spectrum-global-dimension-size-185)
|
|
70
|
+
)}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(
|
|
71
|
+
--spectrum-progressbar-label-gap-y
|
|
72
|
+
)}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(
|
|
73
|
+
--spectrum-fieldlabel-side-padding-right
|
|
74
|
+
)}:host([dir=rtl]) .percentage{margin-right:var(
|
|
75
|
+
--spectrum-fieldlabel-side-padding-right
|
|
76
|
+
)}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(
|
|
77
|
+
--spectrum-progressbar-width
|
|
78
|
+
)}:host([dir=ltr][side-label]) .label{margin-right:var(
|
|
79
|
+
--spectrum-fieldlabel-side-padding-right
|
|
80
|
+
)}:host([dir=rtl][side-label]) .label{margin-left:var(
|
|
81
|
+
--spectrum-fieldlabel-side-padding-right
|
|
82
|
+
)}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(
|
|
83
|
+
--spectrum-fieldlabel-side-padding-right
|
|
84
|
+
)}:host([dir=rtl][side-label]) .percentage{margin-right:var(
|
|
85
|
+
--spectrum-fieldlabel-side-padding-right
|
|
86
|
+
)}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(
|
|
87
|
+
--spectrum-progressbar-indeterminate-animation-ease
|
|
88
|
+
);position:relative;width:var(
|
|
89
|
+
--spectrum-progressbar-indeterminate-fill-width
|
|
90
|
+
);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(-1*var(--spectrum-progressbar-indeterminate-fill-width)))}to{transform:translate(var(--spectrum-progressbar-width))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--spectrum-progressbar-width))}to{transform:translate(calc(-1*var(--spectrum-progressbar-width)))}}.fill{background:var(
|
|
91
|
+
--spectrum-progressbar-m-track-fill-color,var(--spectrum-global-color-blue-500)
|
|
92
|
+
)}.track{background-color:var(
|
|
93
|
+
--spectrum-progressbar-m-track-color,var(--spectrum-alias-track-color-default)
|
|
94
|
+
)}:host([over-background]) .fill{background:var(
|
|
95
|
+
--spectrum-progressbar-m-over-background-track-fill-color,var(--spectrum-global-color-static-white)
|
|
96
|
+
)}:host([over-background]) .label,:host([over-background]) .percentage{color:var(
|
|
97
|
+
--spectrum-progressbar-m-over-background-track-fill-color,var(--spectrum-global-color-static-white)
|
|
98
|
+
)}:host([over-background]) .track{background-color:var(
|
|
99
|
+
--spectrum-progressbar-m-over-background-track-color,var(--spectrum-alias-track-color-over-background)
|
|
100
|
+
)}:host([positive]) .fill{background:var(
|
|
101
|
+
--spectrum-meter-positive-m-track-fill-color,var(--spectrum-semantic-positive-color-status)
|
|
102
|
+
)}:host(.is-notice) .fill{background:var(
|
|
103
|
+
--spectrum-meter-notice-m-track-fill-color,var(--spectrum-semantic-notice-color-status)
|
|
104
|
+
)}:host(.is-negative) .fill{background:var(
|
|
105
|
+
--spectrum-meter-negative-m-track-fill-color,var(--spectrum-semantic-negative-color-status)
|
|
106
|
+
)}.label,.percentage{color:var(
|
|
107
|
+
--spectrum-fieldlabel-m-text-color,var(--spectrum-alias-label-text-color)
|
|
108
|
+
)}
|
|
15
109
|
`;
|
|
16
110
|
export default styles;
|
|
17
111
|
//# sourceMappingURL=spectrum-progress-bar.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-progress-bar.css.js","sourceRoot":"","sources":["spectrum-progress-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"spectrum-progress-bar.css.js","sourceRoot":"","sources":["spectrum-progress-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-s-border-radius\n);--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-s-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-s-height,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-s-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-s-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-s-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-s-padding-right,var(--spectrum-global-dimension-size-130)\n)}:host([size=m]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-m-border-radius\n);--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-m-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-m-height,var(--spectrum-global-dimension-size-75)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-m-width,var(--spectrum-global-dimension-static-size-2400)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-m-indeterminate-fill-width,var(--spectrum-global-dimension-size-1700)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-m-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-m-padding-right,var(--spectrum-global-dimension-size-150)\n)}:host([size=l]){--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-l-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-l-height,var(--spectrum-global-dimension-size-100)\n);--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-l-border-radius,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-l-width,var(--spectrum-global-dimension-static-size-2500)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-l-indeterminate-fill-width,var(--spectrum-global-dimension-size-1800)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-l-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-l-padding-right,var(--spectrum-global-dimension-size-175)\n)}:host([size=xl]){--spectrum-progressbar-border-radius:var(\n--spectrum-progressbar-xl-border-radius\n);--spectrum-progressbar-label-gap-y:var(\n--spectrum-progressbar-xl-label-gap-y,var(--spectrum-global-dimension-size-50)\n);--spectrum-progressbar-height:var(\n--spectrum-progressbar-xl-height,var(--spectrum-global-dimension-size-125)\n);--spectrum-progressbar-width:var(\n--spectrum-progressbar-xl-width,var(--spectrum-global-dimension-static-size-2800)\n);--spectrum-progressbar-indeterminate-fill-width:var(\n--spectrum-progressbar-xl-indeterminate-fill-width,var(--spectrum-global-dimension-size-2000)\n);--spectrum-progressbar-indeterminate-duration:var(\n--spectrum-progressbar-xl-indeterminate-duration,var(--spectrum-global-animation-duration-2000)\n);--spectrum-fieldlabel-side-padding-right:var(\n--spectrum-fieldlabel-side-xl-padding-right,var(--spectrum-global-dimension-size-185)\n)}:host{align-items:center;display:inline-flex;flex-flow:row wrap;justify-content:space-between;position:relative;vertical-align:top;width:var(--spectrum-progressbar-width)}.track{border-radius:var(--spectrum-progressbar-border-radius);overflow:hidden;width:100%;z-index:1}.fill,.track{height:var(--spectrum-progressbar-height)}.fill{border:none;transition:width 1s}:host([dir=ltr]) .label,:host([dir=ltr]) .percentage{text-align:left}:host([dir=rtl]) .label,:host([dir=rtl]) .percentage{text-align:right}.label,.percentage{margin-bottom:var(\n--spectrum-progressbar-label-gap-y\n)}.label{flex:1 1 0%}:host([dir=ltr]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}.percentage{align-self:flex-start}:host([side-label]){display:inline-flex;flex-flow:row;justify-content:space-between;width:auto}:host([side-label]) .track{flex:1 1 var(--spectrum-progressbar-width);min-width:var(\n--spectrum-progressbar-width\n)}:host([dir=ltr][side-label]) .label{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .label{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .label{flex-grow:0;margin-bottom:0}:host([dir=ltr][side-label]) .percentage{text-align:right}:host([dir=rtl][side-label]) .percentage{text-align:left}:host([dir=ltr][side-label]) .percentage{margin-left:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([dir=rtl][side-label]) .percentage{margin-right:var(\n--spectrum-fieldlabel-side-padding-right\n)}:host([side-label]) .percentage{margin-bottom:0;order:3}:host([indeterminate]) .fill{animation-timing-function:var(\n--spectrum-progressbar-indeterminate-animation-ease\n);position:relative;width:var(\n--spectrum-progressbar-indeterminate-fill-width\n);will-change:transform}:host([dir=ltr][indeterminate]) .fill{animation:indeterminate-loop-ltr var(--spectrum-progressbar-indeterminate-duration) infinite}:host([dir=rtl][indeterminate]) .fill{animation:indeterminate-loop-rtl var(--spectrum-progressbar-indeterminate-duration) infinite}@keyframes indeterminate-loop-ltr{0%{transform:translate(calc(-1*var(--spectrum-progressbar-indeterminate-fill-width)))}to{transform:translate(var(--spectrum-progressbar-width))}}@keyframes indeterminate-loop-rtl{0%{transform:translate(var(--spectrum-progressbar-width))}to{transform:translate(calc(-1*var(--spectrum-progressbar-width)))}}.fill{background:var(\n--spectrum-progressbar-m-track-fill-color,var(--spectrum-global-color-blue-500)\n)}.track{background-color:var(\n--spectrum-progressbar-m-track-color,var(--spectrum-alias-track-color-default)\n)}:host([over-background]) .fill{background:var(\n--spectrum-progressbar-m-over-background-track-fill-color,var(--spectrum-global-color-static-white)\n)}:host([over-background]) .label,:host([over-background]) .percentage{color:var(\n--spectrum-progressbar-m-over-background-track-fill-color,var(--spectrum-global-color-static-white)\n)}:host([over-background]) .track{background-color:var(\n--spectrum-progressbar-m-over-background-track-color,var(--spectrum-alias-track-color-over-background)\n)}:host([positive]) .fill{background:var(\n--spectrum-meter-positive-m-track-fill-color,var(--spectrum-semantic-positive-color-status)\n)}:host(.is-notice) .fill{background:var(\n--spectrum-meter-notice-m-track-fill-color,var(--spectrum-semantic-notice-color-status)\n)}:host(.is-negative) .fill{background:var(\n--spectrum-meter-negative-m-track-fill-color,var(--spectrum-semantic-negative-color-status)\n)}.label,.percentage{color:var(\n--spectrum-fieldlabel-m-text-color,var(--spectrum-alias-label-text-color)\n)}\n`;\nexport default styles;"]}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import * as stories from '../stories/progress-bar-sizes.stories.js';
|
|
13
|
-
import { regressVisuals } from '../../../test/visual/test.js';
|
|
14
|
-
regressVisuals('ProgressBarSizesStories', stories);
|
|
15
|
-
//# sourceMappingURL=progress-bar-sizes.test-vrt.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar-sizes.test-vrt.js","sourceRoot":"","sources":["progress-bar-sizes.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,0CAA0C,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,yBAAyB,EAAE,OAAO,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/progress-bar-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('ProgressBarSizesStories', stories);\n"]}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import * as stories from '../stories/progress-bar.stories.js';
|
|
13
|
-
import { regressVisuals } from '../../../test/visual/test.js';
|
|
14
|
-
regressVisuals('ProgressBarStories', stories);
|
|
15
|
-
//# sourceMappingURL=progress-bar.test-vrt.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar.test-vrt.js","sourceRoot":"","sources":["progress-bar.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/progress-bar.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('ProgressBarStories', stories);\n"]}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import { fixture, elementUpdated, expect, html } from '@open-wc/testing';
|
|
13
|
-
import '../sp-progress-bar.js';
|
|
14
|
-
describe('ProgressBar', () => {
|
|
15
|
-
it('loads default progress-bar accessibly', async () => {
|
|
16
|
-
const el = await fixture(html `
|
|
17
|
-
<sp-progress-bar label="Loading"></sp-progress-bar>
|
|
18
|
-
`);
|
|
19
|
-
await elementUpdated(el);
|
|
20
|
-
expect(el).to.not.be.undefined;
|
|
21
|
-
await expect(el).to.be.accessible();
|
|
22
|
-
});
|
|
23
|
-
it('accepts a changing progress', async () => {
|
|
24
|
-
const el = await fixture(html `
|
|
25
|
-
<sp-progress-bar label="Changing value"></sp-progress-bar>
|
|
26
|
-
`);
|
|
27
|
-
await elementUpdated(el);
|
|
28
|
-
expect(el.hasAttribute('aria-valuenow')).to.be.true;
|
|
29
|
-
expect(el.getAttribute('aria-valuenow')).to.equal('0');
|
|
30
|
-
el.progress = 50;
|
|
31
|
-
await elementUpdated(el);
|
|
32
|
-
expect(el.hasAttribute('aria-valuenow')).to.be.true;
|
|
33
|
-
expect(el.getAttribute('aria-valuenow')).to.equal('50');
|
|
34
|
-
el.progress = 100;
|
|
35
|
-
await elementUpdated(el);
|
|
36
|
-
expect(el.hasAttribute('aria-valuenow')).to.be.true;
|
|
37
|
-
expect(el.getAttribute('aria-valuenow')).to.equal('100');
|
|
38
|
-
});
|
|
39
|
-
it('loads - [indeterminate]', async () => {
|
|
40
|
-
const el = await fixture(html `
|
|
41
|
-
<sp-progress-bar indeterminate label="Loading"></sp-progress-bar>
|
|
42
|
-
`);
|
|
43
|
-
await elementUpdated(el);
|
|
44
|
-
expect(el).to.not.be.undefined;
|
|
45
|
-
await expect(el).to.be.accessible();
|
|
46
|
-
});
|
|
47
|
-
it('accepts user `role`', async () => {
|
|
48
|
-
const el = await fixture(html `
|
|
49
|
-
<sp-progress-bar role="progressbar"></sp-progress-bar>
|
|
50
|
-
`);
|
|
51
|
-
await elementUpdated(el);
|
|
52
|
-
expect(el.getAttribute('role')).to.equal('progressbar');
|
|
53
|
-
});
|
|
54
|
-
it('returns to indeterminate', async () => {
|
|
55
|
-
const el = await fixture(html `
|
|
56
|
-
<sp-progress-bar
|
|
57
|
-
progress="50"
|
|
58
|
-
label="Sometimes indeterminate"
|
|
59
|
-
></sp-progress-bar>
|
|
60
|
-
`);
|
|
61
|
-
await elementUpdated(el);
|
|
62
|
-
expect(el.hasAttribute('aria-valuenow')).to.be.true;
|
|
63
|
-
expect(el.getAttribute('aria-valuenow')).to.equal('50');
|
|
64
|
-
el.indeterminate = true;
|
|
65
|
-
await elementUpdated(el);
|
|
66
|
-
expect(el.hasAttribute('aria-valuenow')).to.be.false;
|
|
67
|
-
});
|
|
68
|
-
});
|
|
69
|
-
//# sourceMappingURL=progress-bar.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"progress-bar.test.js","sourceRoot":"","sources":["progress-bar.test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzE,OAAO,uBAAuB,CAAC;AAG/B,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,EAAE,GAAG,MAAM,OAAO,CACpB,IAAI,CAAA;;aAEH,CACJ,CAAC;QAEF,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,SAAS,CAAC;QAE/B,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA;;SAEzC,CAAC,CAAC;QAEH,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QACpD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAEvD,EAAE,CAAC,QAAQ,GAAG,EAAE,CAAC;QAEjB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QACpD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAExD,EAAE,CAAC,QAAQ,GAAG,GAAG,CAAC;QAElB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QACpD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA;;SAEzC,CAAC,CAAC;QAEH,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,SAAS,CAAC;QAE/B,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IACxC,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;QACjC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA;;SAEzC,CAAC,CAAC;QAEH,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACtC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAc,IAAI,CAAA;;;;;SAKzC,CAAC,CAAC;QAEH,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;QACpD,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAExD,EAAE,CAAC,aAAa,GAAG,IAAI,CAAC;QAExB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QAEzB,MAAM,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC;IACzD,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { fixture, elementUpdated, expect, html } from '@open-wc/testing';\n\nimport '../sp-progress-bar.js';\nimport { ProgressBar } from '..';\n\ndescribe('ProgressBar', () => {\n it('loads default progress-bar accessibly', async () => {\n const el = await fixture<ProgressBar>(\n html`\n <sp-progress-bar label=\"Loading\"></sp-progress-bar>\n `\n );\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n\n await expect(el).to.be.accessible();\n });\n\n it('accepts a changing progress', async () => {\n const el = await fixture<ProgressBar>(html`\n <sp-progress-bar label=\"Changing value\"></sp-progress-bar>\n `);\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('0');\n\n el.progress = 50;\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('50');\n\n el.progress = 100;\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('100');\n });\n it('loads - [indeterminate]', async () => {\n const el = await fixture<ProgressBar>(html`\n <sp-progress-bar indeterminate label=\"Loading\"></sp-progress-bar>\n `);\n\n await elementUpdated(el);\n expect(el).to.not.be.undefined;\n\n await expect(el).to.be.accessible();\n });\n it('accepts user `role`', async () => {\n const el = await fixture<ProgressBar>(html`\n <sp-progress-bar role=\"progressbar\"></sp-progress-bar>\n `);\n\n await elementUpdated(el);\n\n expect(el.getAttribute('role')).to.equal('progressbar');\n });\n it('returns to indeterminate', async () => {\n const el = await fixture<ProgressBar>(html`\n <sp-progress-bar\n progress=\"50\"\n label=\"Sometimes indeterminate\"\n ></sp-progress-bar>\n `);\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.true;\n expect(el.getAttribute('aria-valuenow')).to.equal('50');\n\n el.indeterminate = true;\n\n await elementUpdated(el);\n\n expect(el.hasAttribute('aria-valuenow')).to.be.false;\n });\n});\n"]}
|