@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
42 lines (41 loc) • 3.06 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement, safeClassMap, safeStyleMap } from "@arcgis/lumina";
import { useDirection } from "@arcgis/lumina/controllers";
const styles = css`:host{position:relative;display:block;inline-size:100%}.track,.bar{position:absolute;inset-block-start:0px;block-size:2px}.track{z-index:var(--calcite-z-index);inline-size:100%;overflow:hidden;background-color:var(--calcite-progress-background-color, var(--calcite-color-border-3))}.bar{z-index:var(--calcite-z-index);background-color:var(--calcite-progress-fill-color, var(--calcite-color-brand))}@media(forced-colors:active){.track{background-color:highlightText}.bar{background-color:linkText}}.indeterminate{inline-size:20%;animation:looping-progress-bar-ani calc(var(--calcite-internal-animation-timing-medium) / var(--calcite-internal-duration-factor) * 11 / var(--calcite-internal-duration-factor)) linear infinite}.indeterminate.calcite--rtl{animation-name:looping-progress-bar-ani-rtl}.reversed{animation-direction:reverse}.text{padding-inline:0px;padding-block:1rem 0px;text-align:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-progress-text-color, var(--calcite-color-text-2))}@keyframes looping-progress-bar-ani{0%{transform:translate3d(-100%,0,0)}50%{inline-size:40%}to{transform:translate3d(600%,0,0)}}@keyframes looping-progress-bar-ani-rtl{0%{transform:translate3d(100%,0,0)}50%{inline-size:40%}to{transform:translate3d(-600%,0,0)}}:host([hidden]){display:none}[hidden]{display:none}`;
const CSS = {
track: "track",
bar: "bar",
text: "text"
};
class Progress extends LitElement {
constructor() {
super(...arguments);
this.direction = useDirection();
this.reversed = false;
this.type = "determinate";
this.value = 0;
}
static {
this.properties = { label: 1, reversed: [7, {}, { reflect: true, type: Boolean }], text: 1, type: [3, {}, { reflect: true }], value: [9, {}, { type: Number }] };
}
static {
this.styles = styles;
}
render() {
const isDeterminate = this.type === "determinate";
const barStyles = isDeterminate ? { width: `${this.value}%` } : {};
const dir = this.direction;
return html`<div .ariaLabel=${this.label || this.text} .ariaValueMax=${isDeterminate ? "100" : void 0} .ariaValueMin=${isDeterminate ? "0" : void 0} .ariaValueNow=${isDeterminate ? this.value : void 0} role=progressbar><div class=${safeClassMap(CSS.track)}><div class=${safeClassMap({
[CSS.bar]: true,
indeterminate: this.type === "indeterminate",
[CSS_UTILITY.rtl]: dir === "rtl",
reversed: this.reversed
})} style=${safeStyleMap(barStyles)}></div></div>${this.text ? html`<div class=${safeClassMap(CSS.text)}>${this.text}</div>` : null}</div>`;
}
}
customElement("calcite-progress", Progress);
export {
Progress
};