@aurelia-mdc-web/base/dist/attributes/mdc-size-attribute.js

Base classes for Aurelia Material Components Web

import { __decorate, __metadata } from "tslib";
import { customAttribute, bindingMode, inject, bindable } from 'aurelia-framework';
import { PLATFORM } from 'aurelia-pal';
let MdcSizeCustomAttribute = class MdcSizeCustomAttribute {
    constructor(element) {
        this.element = element;
        this.value = { width: 0, height: 0 };
        this.width = 0;
        this.height = 0;
    }
    bind() {
        this.observer = this.getObserver();
        this.observer?.observe(this.element);
    }
    unbind() {
        this.observer?.disconnect();
        this.observer = void 0;
    }
    getObserver() {
        if (typeof PLATFORM.global.ResizeObserver === 'function') {
            // eslint-disable-next-line @typescript-eslint/no-unsafe-return
            return new PLATFORM.global.ResizeObserver((records) => {
                const rect = records[0].contentRect;
                this.value = { width: rect.width, height: rect.height };
            });
        }
        else {
            return new ElementSizeDirtyChecker((size) => {
                this.value = size;
            });
        }
    }
    valueChanged(size) {
        this.value = size;
        this.width = size.width;
        this.height = size.height;
    }
};
__decorate([
    bindable({ defaultBindingMode: bindingMode.fromView, primaryProperty: true }),
    __metadata("design:type", Object)
], MdcSizeCustomAttribute.prototype, "value", void 0);
__decorate([
    bindable({ defaultBindingMode: bindingMode.fromView }),
    __metadata("design:type", Number)
], MdcSizeCustomAttribute.prototype, "width", void 0);
__decorate([
    bindable({ defaultBindingMode: bindingMode.fromView }),
    __metadata("design:type", Number)
], MdcSizeCustomAttribute.prototype, "height", void 0);
MdcSizeCustomAttribute = __decorate([
    customAttribute('mdc-size'),
    inject(Element),
    __metadata("design:paramtypes", [HTMLElement])
], MdcSizeCustomAttribute);
export { MdcSizeCustomAttribute };
class ElementSizeDirtyChecker {
    constructor(callback, rate = 330 /* 3 times a second */) {
        this.callback = callback;
        this.rate = rate;
        this.size = { width: 0, height: 0 };
    }
    observe(element) {
        this.timerId = setInterval(() => {
            const { width, height } = element.getBoundingClientRect();
            const currentSize = this.size;
            if (width !== currentSize.width || height !== currentSize.height) {
                this.size = { width, height };
                if (typeof this.callback === 'function') {
                    this.callback(this.size);
                }
            }
        }, this.rate);
    }
    disconnect() {
        clearInterval(this.timerId);
    }
}
//# sourceMappingURL=mdc-size-attribute.js.map