@aurelia-mdc-web/circular-progress
Version:
Wrapper for Material Components Web Circular Progress
111 lines • 5.41 kB
JavaScript
import { __awaiter, __decorate, __extends, __generator, __metadata, __read, __spreadArray } 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
*/
var MdcCircularProgress = /** @class */ (function (_super) {
__extends(MdcCircularProgress, _super);
function MdcCircularProgress() {
var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
_this.radius = 47.5;
/** Size in pixels */
_this.size = 100;
/** Stroke width in pixels */
_this.strokeWidth = 10;
return _this;
}
MdcCircularProgress.prototype.sizeChanged = function () {
this.updateSizeAndStroke();
};
MdcCircularProgress.prototype.strokeWidthChanged = function () {
this.updateSizeAndStroke();
};
MdcCircularProgress.prototype.progressChanged = function () {
return __awaiter(this, void 0, void 0, function () {
var determinate;
var _a, _b;
return __generator(this, function (_c) {
switch (_c.label) {
case 0: return [4 /*yield*/, this.initialised];
case 1:
_c.sent();
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);
}
return [2 /*return*/];
}
});
});
};
MdcCircularProgress.prototype.bind = function () {
this.updateSizeAndStroke();
};
MdcCircularProgress.prototype.updateSizeAndStroke = function () {
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
MdcCircularProgress.prototype.initialise = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
this.progressChanged();
return [2 /*return*/];
});
});
};
MdcCircularProgress.prototype.getDefaultFoundation = function () {
var _this = this;
// 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.
var adapter = {
addClass: function (className) { return _this.root.classList.add(className); },
getDeterminateCircleAttribute: function (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: function (className) { return _this.root.classList.contains(className); },
removeClass: function (className) { return _this.root.classList.remove(className); },
removeAttribute: function (attributeName) { return _this.root.removeAttribute(attributeName); },
setAttribute: function (attributeName, value) { return _this.root.setAttribute(attributeName, value); },
setDeterminateCircleAttribute: function (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);
return MdcCircularProgress;
}(MdcComponent));
export { MdcCircularProgress };
//# sourceMappingURL=mdc-circular-progress.js.map