95 lines
2.2 KiB
TypeScript
95 lines
2.2 KiB
TypeScript
import * as plugins from './00plugins.js';
|
|
import * as colors from './00colors.js';
|
|
import { demoFunc } from './dees-progressbar.demo.js';
|
|
import {
|
|
customElement,
|
|
html,
|
|
DeesElement,
|
|
property,
|
|
type TemplateResult,
|
|
cssManager,
|
|
css,
|
|
type CSSResult,
|
|
unsafeCSS,
|
|
unsafeHTML,
|
|
state,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import * as domtools from '@design.estate/dees-domtools';
|
|
|
|
@customElement('dees-progressbar')
|
|
export class DeesProgressbar extends DeesElement {
|
|
// STATIC
|
|
public static demo = demoFunc;
|
|
|
|
// INSTANCE
|
|
@property({
|
|
type: Number,
|
|
})
|
|
public percentage = 0;
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
color: ${cssManager.bdTheme(colors.bright.text, colors.dark.text)};
|
|
}
|
|
.progressBarContainer {
|
|
padding: 8px;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.progressBar {
|
|
background: ${cssManager.bdTheme('#eeeeeb', '#444')};
|
|
height: 8px;
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
border-top: 0.5px solid ${cssManager.bdTheme('none', '#555')};
|
|
}
|
|
|
|
.progressBarFill {
|
|
background: ${cssManager.bdTheme(colors.dark.blueActive, colors.bright.blueActive)};
|
|
height: 8px;
|
|
margin-top: -0.5px;
|
|
transition: 0.2s width;
|
|
border-radius: 4px;
|
|
width: 0px;
|
|
border-top: 0.5 solid ${cssManager.bdTheme('none', '#398fff')};
|
|
}
|
|
|
|
.progressText {
|
|
padding: 8px;
|
|
text-align: center;
|
|
}
|
|
`
|
|
];
|
|
|
|
public render() {
|
|
return html`
|
|
<div class="progressBarContainer">
|
|
<div class="progressBar">
|
|
<div class="progressBarFill"></div>
|
|
<div class="progressText">
|
|
${this.percentage}%
|
|
<div>
|
|
</div>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
firstUpdated (_changedProperties: Map<string | number | symbol, unknown>): void {
|
|
super.firstUpdated(_changedProperties);
|
|
this.updateComplete.then(() => {
|
|
this.updatePercentage();
|
|
});
|
|
}
|
|
|
|
public async updatePercentage() {
|
|
const progressBarFill = this.shadowRoot.querySelector('.progressBarFill') as HTMLElement;
|
|
progressBarFill.style.width = `${this.percentage}%`;
|
|
}
|
|
|
|
updated(){
|
|
this.updatePercentage();
|
|
}
|
|
} |