@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
39 lines (38 loc) • 3.05 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
import { html } from "lit-html";
import { LitElement, safeClassMap, safeStyleMap } from "@arcgis/lumina";
import { g as getElementDir } from "../../chunks/dom.js";
import { css } from "@lit/reactive-element/css-tag.js";
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--2);line-height:1rem;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}`;
class Progress extends LitElement {
constructor() {
super(...arguments);
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 = getElementDir(this.el);
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="track"><div class=${safeClassMap({
bar: true,
indeterminate: this.type === "indeterminate",
[CSS_UTILITY.rtl]: dir === "rtl",
reversed: this.reversed
})} style=${safeStyleMap(barStyles)}></div></div>${this.text ? html`<div class="text">${this.text}</div>` : null}</div>`;
}
}
customElement("calcite-progress", Progress);
export {
Progress
};