mframejs/dist/esm/attribute/cssAttribute.js

simple framework

import * as tslib_1 from "tslib";
import { customAttribute } from '../decorator/exported';
import { BindingEngine } from '../binding/exported';
let CssAttribute = class CssAttribute {
    constructor() {
        this.lastStyles = [];
    }
    created() {
        this.value = this.$attribute.value;
        this.$element.removeAttribute(this.$attribute.name);
        this.subscribeInternal = {
            name: 'cssAttribute:',
            value: this.value,
            call: (newValue, oldValue) => {
                if (oldValue !== newValue) {
                    this.splitAndInsert(newValue);
                }
            }
        };
        BindingEngine.subscribeClassProperty(this.$bindingContext, this.value, this.subscribeInternal);
    }
    splitAndInsert(value) {
        try {
            value = value === undefined || value === null ? '' : value;
            const x = value
                .split(';')
                .map((statement) => {
                return statement.split(':');
            }).filter((value) => {
                if (value.length === 2) {
                    return true;
                }
                else {
                    return false;
                }
            })
                .map((result) => {
                return {
                    attribute: result[0],
                    value: result[1].replace(/ /g, '')
                };
            });
            const newStyles = [];
            x.forEach((val) => {
                newStyles.push(val.attribute.trim());
                this.$element.style[val.attribute.trim()] = val.value.trim();
            });
            this.lastStyles.forEach((val) => {
                if (newStyles.indexOf(val) === -1) {
                    this.$element.style[val] = null;
                }
            });
            this.lastStyles = newStyles;
        }
        catch (e) {
            console.error('could not parse css values');
        }
    }
    detached() {
        BindingEngine.unSubscribeClassProperty(this.$bindingContext, this.subscribeInternal);
    }
};
CssAttribute = tslib_1.__decorate([
    customAttribute('css')
], CssAttribute);
export { CssAttribute };
//# sourceMappingURL=cssAttribute.js.map