@amaui/style/AmauiStyleRuleProperty.js

CSS in JS styling solution

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const try_1 = __importDefault(require("@amaui/utils/try"));
const isEnvironment_1 = __importDefault(require("@amaui/utils/isEnvironment"));
const AmauiStyleSheet_1 = __importDefault(require("./AmauiStyleSheet"));
const utils_1 = require("./utils");
const optionsDefault = {
    value_version: 'value',
    pure: false,
    parents: [],
    sort: true,
    prefix: true,
    rtl: true
};
class AmauiStyleRuleProperty {
    constructor(value, property, options = optionsDefault) {
        this.value = value;
        this.property = property;
        this.options = options;
        this.value_version = 'value';
        this.pure = false;
        this.parents = [];
        this.values = {
            property: '',
            value: '',
            css: '',
        };
        this.init();
    }
    get parent() {
        return this.parents[this.parents.length - 1];
    }
    get response() {
        return { css: this.values.css };
    }
    get css() {
        return this.response.css;
    }
    updateValues() {
        // Response
        this.values.css = `${this.values.property}: ${this.values.value};`;
        // For undefined animation name value
        if (this.values.css.indexOf('undefined') > -1)
            this.values.css = '';
    }
    init(value) {
        var _a, _b, _c, _d, _e, _f, _g;
        // Update values
        this.values.property = (0, utils_1.cammelCaseToKebabCase)(this.property);
        this.values.value = value !== undefined ? value : this.value;
        // Options
        this.value_version = this.options.value_version || 'value';
        this.pure = this.options.pure !== undefined ? this.options.pure : false;
        this.owner = this.options.owner;
        this.parents = this.options.parents || [];
        this.amauiStyle = this.options.amauiStyle;
        this.amauiStyleSheet = this.options.amauiStyleSheet;
        this.amauiStyleRule = this.options.amauiStyleRule;
        if (this.id === undefined)
            this.id = (0, utils_1.getID)();
        if (this.level === undefined)
            this.level = this.parents.length - 1;
        // Add to rules_owned to all parents
        this.parents.filter(parent => !(parent instanceof AmauiStyleSheet_1.default)).forEach(parent => parent.rules_owned.push(this));
        // method or AmauiSubscription
        if (value === undefined &&
            ['method', 'amaui_subscription'].indexOf(this.value_version) > -1) {
            if (this.value_version === 'method')
                this.values.value = (0, try_1.default)(() => this.value(this.amauiStyleSheet.props));
            else if (this.value_version === 'amaui_subscription') {
                this.values.value = this.value.value;
                if (!this.value.subscribed)
                    this.value.subscribed = [];
                if (this.value.subscribed.indexOf(this) === -1) {
                    this.value.subscribe(this.update.bind(this));
                    this.value.subscribed.push(this);
                }
            }
            // Value
            this.values.value = (0, utils_1.is)('function', this.values.value) ? (0, try_1.default)(() => this.values.value(this.amauiStyleSheet.props)) : this.values.value;
        }
        // Value
        this.values.value = (0, utils_1.valueResolve)(this.values.property, this.values.value, this.amauiStyle).value[0];
        // Move through plugins
        // rtl
        const useRtl = (this.amauiStyle.options.rule.rtl &&
            (this.amauiStyleSheet === undefined || this.amauiStyleSheet.options.rule.rtl !== false) &&
            (((_a = this.amauiStyleSheet) === null || _a === void 0 ? void 0 : _a.amauiTheme) === undefined || this.amauiStyleSheet.amauiTheme.options.rule.rtl) &&
            // by default is true
            ((_b = this.parent) === null || _b === void 0 ? void 0 : _b.options.rtl) !== false);
        if (useRtl) {
            const rtl = this.amauiStyle.subscriptions.rule.rtl.map(this.values);
            if (rtl === null || rtl === void 0 ? void 0 : rtl.value) {
                if ((_c = rtl === null || rtl === void 0 ? void 0 : rtl.value) === null || _c === void 0 ? void 0 : _c.property)
                    this.values.property = rtl.value.property;
                if ((_d = rtl === null || rtl === void 0 ? void 0 : rtl.value) === null || _d === void 0 ? void 0 : _d.value)
                    this.values.value = rtl.value.value;
            }
        }
        // prefix
        const usePrefix = (this.amauiStyle.options.rule.prefix &&
            (this.amauiStyleSheet === undefined || this.amauiStyleSheet.options.rule.prefix !== false) &&
            (((_e = this.amauiStyleSheet) === null || _e === void 0 ? void 0 : _e.amauiTheme) === undefined || this.amauiStyleSheet.amauiTheme.options.rule.prefix !== false) &&
            // by default is true
            ((_f = this.parent) === null || _f === void 0 ? void 0 : _f.options.prefix) !== false);
        if (usePrefix &&
            (this.values.property.indexOf('-') !== 0 &&
                (0, try_1.default)(() => this.values.value.indexOf('-') !== 0))) {
            const prefixes = ((_g = this.amauiStyle.subscriptions.rule.prefix.map({ value: this.values.value, property: this.values.property })) === null || _g === void 0 ? void 0 : _g.value) || [];
            if (!!prefixes.length) {
                prefixes.forEach(item => {
                    var _a;
                    const exists = (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.rules) || []).find(rule_ => (rule_ instanceof AmauiStyleRuleProperty &&
                        rule_.values.property === item.property &&
                        rule_.values.value === item.value));
                    if (!exists && this.parent) {
                        AmauiStyleRuleProperty.make(item.value, item.property, {
                            value_version: 'value',
                            pure: this.pure,
                            owner: this.parent,
                            parents: this.parents,
                            amauiStyleRule: this.amauiStyleRule,
                            amauiStyleSheet: this.parent.amauiStyleSheet,
                            amauiStyle: this.parent.amauiStyle
                        });
                    }
                });
            }
        }
        // Add itself to owner rules
        if (this.owner) {
            const exists = this.owner.rules.find(rule => rule.value.id === this.id);
            if (!exists)
                this.owner.rules.push({ property: this.property, value: this });
            this.level_actual = this.owner.level_actual + 1;
        }
        // Update values
        this.updateValues();
    }
    // Update only if amauiStyleSheet is version 'dynamic'
    update(value) {
        var _a, _b;
        // Init with value
        if (value !== undefined)
            this.init(value);
        // Make selector
        // ie. for animation, and animation-name
        this.makeSelector();
        // Update the rule
        // method or AmauiSubscription
        if (value === undefined &&
            (['method', 'amaui_subscription'].indexOf(this.value_version) > -1)) {
            if (this.value_version === 'method')
                this.values.value = (0, try_1.default)(() => this.value(this.amauiStyleSheet.props));
            else if (this.value_version === 'amaui_subscription')
                this.values.value = this.value.value;
            // Value
            this.values.value = (0, utils_1.is)('function', this.values.value) ? (0, try_1.default)(() => this.values.value(this.amauiStyleSheet.props)) : this.values.value;
            this.values.value = (0, utils_1.valueResolve)(this.values.property, this.values.value, this.amauiStyle).value[0];
        }
        // Update values
        this.updateValues();
        const domElement = this.amauiStyleSheet.domElementForTesting || ((0, isEnvironment_1.default)('browser') && window.document.createElement('div'));
        if (domElement)
            domElement.style[this.values.property] = this.values.value;
        const valueNew = ((_a = domElement === null || domElement === void 0 ? void 0 : domElement.style) === null || _a === void 0 ? void 0 : _a[this.values.property]) || this.values.value;
        // Only if rule reference exists
        if (this.owner.rule) {
            // Only update if value is diff from previous update
            if (this.owner.rule.style[this.values.property] !== valueNew) {
                const rule = (this.owner.owner.rule || this.owner.owner.sheet);
                // For some reason important will not update the style property
                // updating it through rule.style[property]
                // only way is to fully remove the CSSStyleRule
                // and insert a new one with new value
                if ((0, utils_1.is)('string', this.values.value) && ((_b = this.values.value) === null || _b === void 0 ? void 0 : _b.includes('!important'))) {
                    let index = Array.from((rule === null || rule === void 0 ? void 0 : rule.cssRules) || []).findIndex(item => item === this.owner.rule);
                    if (index > -1) {
                        (0, try_1.default)(() => rule.deleteRule(index));
                        // Update owner values so it includes
                        // new update for this property value
                        this.owner.updateValues();
                        index = (0, try_1.default)(() => rule.insertRule(this.owner.values.css));
                        if (index > -1)
                            this.owner.rule = rule.cssRules[index];
                    }
                }
                else
                    (0, try_1.default)(() => this.owner.rule.style[this.values.property] = this.values.value); // Update the values css string value
                this.values.css = "".concat(this.values.property, ": ").concat(this.values.value, ";");
            }
        }
    }
    remove() {
        this.clear();
    }
    makeSelector() {
        if (['animation', 'animation-name'].some(item => this.values.property.indexOf(item) > -1)) {
            const refs = (0, utils_1.getRefs)(this.values.value);
            const refValues = refs.map(item => this.amauiStyleSheet.amauiStyleSheetManager.names.keyframes[item]).filter(Boolean);
            refs.forEach((ref, i) => this.values.value = this.values.value.replace(`$${ref}`, refValues[i]));
            // Update values
            this.updateValues();
        }
    }
    clear() {
        var _a;
        // rule
        if ((_a = this.owner) === null || _a === void 0 ? void 0 : _a.rule)
            this.owner.rule.style[this.values.property] = '';
        // rules
        if (this.owner) {
            const index = this.owner.rules.findIndex(item => item.value === this);
            if (index > -1)
                this.owner.rules.splice(index, 1);
        }
        // rules owned
        this.parents.filter(parent => !(parent instanceof AmauiStyleSheet_1.default)).forEach(parent => {
            const index = parent.rules_owned.findIndex(item => item.value === this);
            if (index > -1)
                parent.rules_owned.splice(index, 1);
        });
    }
    static make(value, property, options = {
        value_version: 'value',
        pure: false,
        parents: [this],
    }) {
        return new AmauiStyleRuleProperty(value, property, options);
    }
}
exports.default = AmauiStyleRuleProperty;