UNPKG

@synergy-design-system/components

Version:

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

72 lines (69 loc) 2.16 kB
import { progress_bar_custom_styles_default } from "./chunk.AMAK44YX.js"; import { progress_bar_styles_default } from "./chunk.QUM76UHV.js"; import { LocalizeController } from "./chunk.OAQRCZOO.js"; import { component_styles_default } from "./chunk.NLYVOJGK.js"; import { SynergyElement } from "./chunk.3AZFEB6D.js"; import { __decorateClass } from "./chunk.Z4XV3SMG.js"; // src/components/progress-bar/progress-bar.component.ts import { classMap } from "lit/directives/class-map.js"; import { html } from "lit"; import { ifDefined } from "lit/directives/if-defined.js"; import { property } from "lit/decorators.js"; import { styleMap } from "lit/directives/style-map.js"; var SynProgressBar = class extends SynergyElement { constructor() { super(...arguments); this.localize = new LocalizeController(this); this.value = 0; this.indeterminate = false; this.label = ""; } render() { return html` <div part="base" class=${classMap({ "progress-bar": true, "progress-bar--indeterminate": this.indeterminate, "progress-bar--rtl": this.localize.dir() === "rtl" })} role="progressbar" title=${ifDefined(this.title)} aria-label=${this.label.length > 0 ? this.label : this.localize.term("progress")} aria-valuemin="0" aria-valuemax="100" aria-valuenow=${this.indeterminate ? 0 : this.value} > <div part="indicator" class="progress-bar__indicator" style=${styleMap({ width: `${this.value}%` })}> ${!this.indeterminate ? html` <slot part="label" class="progress-bar__label"></slot> ` : ""} </div> </div> `; } }; SynProgressBar.styles = [component_styles_default, progress_bar_styles_default, progress_bar_custom_styles_default]; __decorateClass([ property({ type: Number, reflect: true }) ], SynProgressBar.prototype, "value", 2); __decorateClass([ property({ type: Boolean, reflect: true }) ], SynProgressBar.prototype, "indeterminate", 2); __decorateClass([ property() ], SynProgressBar.prototype, "label", 2); export { SynProgressBar }; //# sourceMappingURL=chunk.PEP46WUN.js.map