@aurelia-mdc-web/circular-progress
Version:
Wrapper for Material Components Web Circular Progress
96 lines • 4.22 kB
JavaScript
import { __awaiter, __decorate, __metadata } from "tslib";
import { MdcComponent } from '@aurelia-mdc-web/base';
import { MDCCircularProgressFoundation, strings } from '@material/circular-progress';
import { bindable } from 'aurelia-typed-observable-plugin';
import { inject, useView, PLATFORM, customElement } from 'aurelia-framework';
/**
* @selector mdc-circular-progress
*/
let MdcCircularProgress = class MdcCircularProgress extends MdcComponent {
constructor() {
super(...arguments);
this.radius = 47.5;
/** Size in pixels */
this.size = 100;
/** Stroke width in pixels */
this.strokeWidth = 10;
}
sizeChanged() {
this.updateSizeAndStroke();
}
strokeWidthChanged() {
this.updateSizeAndStroke();
}
progressChanged() {
return __awaiter(this, void 0, void 0, function* () {
var _a, _b;
yield this.initialised;
const determinate = this.progress !== undefined && !isNaN(this.progress);
(_a = this.foundation) === null || _a === void 0 ? void 0 : _a.setDeterminate(determinate);
if (determinate) {
(_b = this.foundation) === null || _b === void 0 ? void 0 : _b.setProgress(this.progress);
}
});
}
bind() {
this.updateSizeAndStroke();
}
updateSizeAndStroke() {
var _a;
this.radius = (this.size - 4) / 2 - this.strokeWidth;
// foundation gets the radius from the element itself
// set the attribute explicitly to avoid issues related to async binding
(_a = this.determinateCircle_) === null || _a === void 0 ? void 0 : _a.setAttribute('r', this.radius.toString());
this.strokeDasharray = 2 * this.radius * Math.PI;
this.strokeDashoffset = this.strokeDasharray / 2;
}
// eslint-disable-next-line @typescript-eslint/require-await
initialise() {
return __awaiter(this, void 0, void 0, function* () {
this.progressChanged();
});
}
getDefaultFoundation() {
// DO NOT INLINE this variable. For backward compatibility, foundations take
// a Partial<MDCFooAdapter>. To ensure we don't accidentally omit any
// methods, we need a separate, strongly typed adapter variable.
const adapter = {
addClass: (className) => this.root.classList.add(className),
getDeterminateCircleAttribute: (attributeName) => { var _a, _b; return (_b = (_a = this.determinateCircle_) === null || _a === void 0 ? void 0 : _a.getAttribute(attributeName)) !== null && _b !== void 0 ? _b : null; },
hasClass: (className) => this.root.classList.contains(className),
removeClass: (className) => this.root.classList.remove(className),
removeAttribute: (attributeName) => this.root.removeAttribute(attributeName),
setAttribute: (attributeName, value) => this.root.setAttribute(attributeName, value),
setDeterminateCircleAttribute: (attributeName, value) => {
var _a;
if (attributeName === strings.STROKE_DASHOFFSET) {
// set offset via binding, otherwise it gets overwritten
this.strokeDashoffset = parseInt(value);
}
else {
(_a = this.determinateCircle_) === null || _a === void 0 ? void 0 : _a.setAttribute(attributeName, value);
}
},
};
return new MDCCircularProgressFoundation(adapter);
}
};
__decorate([
bindable.number,
__metadata("design:type", Number)
], MdcCircularProgress.prototype, "size", void 0);
__decorate([
bindable.number,
__metadata("design:type", Number)
], MdcCircularProgress.prototype, "strokeWidth", void 0);
__decorate([
bindable.number,
__metadata("design:type", Number)
], MdcCircularProgress.prototype, "progress", void 0);
MdcCircularProgress = __decorate([
inject(Element),
useView(PLATFORM.moduleName('./mdc-circular-progress.html')),
customElement('mdc-circular-progress')
], MdcCircularProgress);
export { MdcCircularProgress };
//# sourceMappingURL=mdc-circular-progress.js.map