@aurelia-mdc-web/circular-progress
Version:
Wrapper for Material Components Web Circular Progress
114 lines • 5.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MdcCircularProgress = void 0;
var tslib_1 = require("tslib");
var base_1 = require("@aurelia-mdc-web/base");
var circular_progress_1 = require("@material/circular-progress");
var aurelia_typed_observable_plugin_1 = require("aurelia-typed-observable-plugin");
var aurelia_framework_1 = require("aurelia-framework");
/**
* @selector mdc-circular-progress
*/
var MdcCircularProgress = /** @class */ (function (_super) {
tslib_1.__extends(MdcCircularProgress, _super);
function MdcCircularProgress() {
var _this = _super.apply(this, tslib_1.__spreadArray([], tslib_1.__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 tslib_1.__awaiter(this, void 0, void 0, function () {
var determinate;
var _a, _b;
return tslib_1.__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 tslib_1.__awaiter(this, void 0, void 0, function () {
return tslib_1.__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 === circular_progress_1.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 circular_progress_1.MDCCircularProgressFoundation(adapter);
};
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.number,
tslib_1.__metadata("design:type", Number)
], MdcCircularProgress.prototype, "size", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.number,
tslib_1.__metadata("design:type", Number)
], MdcCircularProgress.prototype, "strokeWidth", void 0);
tslib_1.__decorate([
aurelia_typed_observable_plugin_1.bindable.number,
tslib_1.__metadata("design:type", Number)
], MdcCircularProgress.prototype, "progress", void 0);
MdcCircularProgress = tslib_1.__decorate([
(0, aurelia_framework_1.inject)(Element),
(0, aurelia_framework_1.useView)(aurelia_framework_1.PLATFORM.moduleName('./mdc-circular-progress.html')),
(0, aurelia_framework_1.customElement)('mdc-circular-progress')
], MdcCircularProgress);
return MdcCircularProgress;
}(base_1.MdcComponent));
exports.MdcCircularProgress = MdcCircularProgress;
//# sourceMappingURL=mdc-circular-progress.js.map