@amaui/style/AmauiStyleRule.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 hash_1 = __importDefault(require("@amaui/utils/hash"));
const try_1 = __importDefault(require("@amaui/utils/try"));
const castParam_1 = __importDefault(require("@amaui/utils/castParam"));
const getEnvironment_1 = __importDefault(require("@amaui/utils/getEnvironment"));
const merge_1 = __importDefault(require("@amaui/utils/merge"));
const AmauiStyle_1 = __importDefault(require("./AmauiStyle"));
const AmauiStyleSheet_1 = __importDefault(require("./AmauiStyleSheet"));
const AmauiStyleRuleProperty_1 = __importDefault(require("./AmauiStyleRuleProperty"));
const classNames_1 = __importDefault(require("./classNames"));
const utils_1 = require("./utils");
const optionsDefault = {
    mode: 'regular',
    value_version: 'value',
    version: 'property',
    pure: false,
    index: 0,
    sort: true,
    prefix: true,
    rtl: true
};
const env = (0, getEnvironment_1.default)();
class AmauiStyleRule {
    constructor(value, property, options = optionsDefault) {
        this.value = value;
        this.property = property;
        this.options = options;
        this.value_version = 'value';
        this.mode = 'regular';
        this.version = 'property';
        this.pure = false;
        this.index = 0;
        this.parents = [];
        this.status = 'idle';
        this.isVariable = false;
        this.static = true;
        this.rules_owned = [];
        this.className_ = '';
        this.selector_ = '';
        this.classNames_ = '';
        this.keyframesName_ = '';
        this.values = {
            value: undefined,
            css: '',
        };
        this.rules = [];
        this.makeRuleClassNameDefault = (value = 'a') => { var _a; return `${((_a = this.amauiStyle.options) === null || _a === void 0 ? void 0 : _a.classNamePrefix) || ''}${value}-${++this.counter.className}`; };
        this.makeRuleKeyframesNameDefault = (value = 'a') => { var _a; return `${((_a = this.amauiStyle.options) === null || _a === void 0 ? void 0 : _a.classNamePrefix) || ''}${value}-${++this.counter.keyframesName}`; };
        this.options = Object.assign(Object.assign({}, optionsDefault), this.options);
        this.init();
    }
    get selector() {
        return this.selector_;
    }
    set selector(value) {
        this.selector_ = value;
    }
    get className() {
        return this.className_;
    }
    set className(value) {
        const parentKeyframes = this.parent.version === 'at-rule';
        if (!parentKeyframes) {
            this.className_ = value;
            // Update classNames
            if (!this.classNames.match(new RegExp(`^(\.)?${this.className} | (\.)?${this.className} | (\.)?${this.className}$`, 'g')))
                this.classNames = `${this.className} ${this.classNames}`.trim();
            this.amauiStyleSheet.names.classNames[this.property] = this.className;
            // in amauiStyleSheetManager only for static sheets
            if (this.amauiStyleSheet.version === 'static' && this.amauiStyleSheet.amauiStyleSheetManager) {
                this.amauiStyleSheet.amauiStyleSheetManager.names.classNames[this.property] = this.className;
            }
        }
    }
    get classNames() {
        return this.classNames_;
    }
    set classNames(value) {
        this.classNames_ = value;
        this.amauiStyleSheet.names.classes[this.property] = this.classNames;
        // in amauiStyleSheetManager only for static sheets
        if (this.amauiStyleSheet.version === 'static' && this.amauiStyleSheet.amauiStyleSheetManager) {
            this.amauiStyleSheet.amauiStyleSheetManager.names.classes[this.property] = this.classNames;
        }
    }
    get keyframesName() {
        return this.keyframesName_;
    }
    set keyframesName(value) {
        this.keyframesName_ = value;
        const property = this.property.indexOf('@') === 0 ? this.property.split(' ')[1] : this.property;
        // Update amauiStyleSheet keyframes
        this.amauiStyleSheet.names.keyframes[property] = this.keyframesName;
        // in amauiStyleSheetManager only for static sheets
        if (this.amauiStyleSheet.version === 'static' && this.amauiStyleSheet.amauiStyleSheetManager) {
            if (!this.amauiStyleSheet.amauiStyleSheetManager.names.keyframes[property]) {
                this.amauiStyleSheet.amauiStyleSheetManager.names.keyframes[property] = this.keyframesName;
            }
        }
    }
    get hash() {
        return this.hash_;
    }
    get parent() {
        return this.parents[this.parents.length - 1];
    }
    get response() {
        return { css: this.values.css };
    }
    get css() {
        return this.response.css;
    }
    get allOwnedCss() {
        let value = this.values.css;
        this.rules_owned
            .filter(item => item instanceof AmauiStyleRule)
            .forEach((item) => value += `\n\n${item.allOwnedCss}`);
        // Replace its own property selector with a constant
        value = value.replace(`${this.selector || this.property} {`, 'AMAUI_ITEM {');
        return value;
    }
    get counter() {
        return AmauiStyle_1.default.counter;
    }
    updateValues(hash_ = true) {
        // Response
        const selector = this.selector || this.property;
        this.values.css = `${selector} {\n`;
        let empty = true;
        this.rules.forEach((rule, index) => {
            const css = rule.value.css;
            if (css) {
                empty = false;
                this.values.css += `${'  '.repeat(rule.value.level_actual)}${css}${'\n'.repeat((rule.value instanceof AmauiStyleRule && index !== this.rules.length - 1) ? 2 : 1)}`;
            }
        });
        this.values.css += `${'  '.repeat(this.level_actual)}}`;
        // Empty
        // Only if it's a variable,
        // in some use cases if there are no props in css,
        // we still have to insertRule for dynamic rules
        // so we have a rule ref for that amauiStyleRuleProperty to
        // update with a new value on update
        if (empty &&
            (!this.className || this.amauiStyleSheet.version === 'static'))
            this.values.css = '';
        // Hash
        if (hash_)
            this.makeHash();
    }
    makeHash() {
        if (!this.hash &&
            this.static &&
            this.amauiStyleSheet.amauiStyle.options.optimize &&
            this.amauiStyleSheet.version === 'static' &&
            this.version === 'property' &&
            !(this.isVariable && this.amauiStyleSheet.mode === 'atomic'))
            this.hash_ = (0, hash_1.default)(this.amauiStyleSheet.mode === 'atomic' ? this.css : this.allOwnedCss);
    }
    init(value_) {
        var _a;
        let value = value_ !== undefined ? value_ : this.value;
        // Options
        this.mode = this.options.mode || 'regular';
        this.version = this.options.version || 'property';
        this.pure = this.options.pure !== undefined ? this.options.pure : this.pure;
        this.index = this.options.index !== undefined ? this.options.index : this.index;
        this.owner = this.options.owner;
        this.parents = this.options.parents || [];
        this.amauiStyleSheet = this.options.amauiStyleSheet;
        this.amauiStyle = this.options.amauiStyle;
        if (this.id === undefined)
            this.id = (0, utils_1.getID)();
        if (this.level === undefined)
            this.level = this.parents.length - 1;
        if (this.owner)
            this.level_actual = this.owner.level_actual === undefined ? 0 : this.owner.level_actual + 1;
        // Add to rules_owned to all parents
        this.parents.filter(parent => !(parent instanceof AmauiStyleSheet_1.default)).forEach(parent => parent.rules_owned.push(this));
        // Make string template value into an object
        const valueString = () => {
            const rule = {};
            value.trim().split('\n').filter(Boolean).map(item => item.trim()).forEach(item => {
                if (item) {
                    const items = item.split(':');
                    let value__ = items[1];
                    const property = items[0];
                    value__ = value__ && value__.trim().replace(';', '');
                    if (property && value__)
                        rule[property] = (0, castParam_1.default)(value__, { decode: false });
                }
            });
            return rule;
        };
        if ((0, utils_1.is)('string', value))
            value = valueString();
        if ((0, utils_1.is)('object', value)) {
            if (value['@pure'] !== undefined)
                this.pure = !!value['@pure'];
            if (value['@p'] !== undefined)
                this.pure = !!value['@p'];
        }
        if (!this.pure &&
            (this.level === 0 && this.property.indexOf('@') !== 0))
            this.isVariable = true;
        // value method or amauiSubscription
        if ((0, utils_1.is)('function', value))
            this.value_version = 'method';
        else if ((0, utils_1.isAmauiSubscription)(value)) {
            this.value_version = 'amaui_subscription';
            if (!value.subscribed)
                value.subscribed = [];
            if (value.subscribed.indexOf(this) === -1) {
                value.subscribe(this.update.bind(this));
                value.subscribed.push(this);
            }
        }
        else {
            this.values.value = value;
        }
        const atRule = ((_a = this.property) === null || _a === void 0 ? void 0 : _a.indexOf('@')) === 0;
        this.version = atRule ? 'at-rule' : 'property';
        // method or AmauiSubscription
        if ((['method', 'amaui_subscription'].indexOf(this.value_version) > -1)) {
            if (this.value_version === 'method')
                this.values.value = (0, try_1.default)(() => 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;
        }
        value = this.values.value;
        if ((0, utils_1.is)('object', value)) {
            // Additional @classNames provided
            if (value['@classNames'] || value['@cs']) {
                const classNames = (0, classNames_1.default)(value['@classNames'] || value['@cs']);
                if (!this.classNames.match(new RegExp(`^${classNames} | ${classNames} | ${classNames}$`, 'g')))
                    this.classNames = `${this.classNames || ''} ${classNames}`.trim();
            }
            // Options
            if (value['@options'] || value['@o'])
                this.options = (0, merge_1.default)(value['@options'] || value['@o'] || {}, this.options);
            const props = Object.keys(value);
            // rules owned
            const rules_owned = this.rules_owned;
            // Reset rules and rules owned
            this.rules = [];
            this.rules_owned = [];
            // Add all new rules
            // and it adds new and existing again
            props.forEach(prop => this.addProperty(prop, value[prop], this.rules.length, false, false));
            // Remove all the previous rules
            rules_owned.forEach(rule => rule.remove());
            // Sort and making unique rules
            this.unique;
            // Dynamic
            const dynamic = (rule = this) => {
                return rule.rules.some(item => ((0, utils_1.is)('function', item.value.value) ||
                    (0, utils_1.isAmauiSubscription)(item.value.value) ||
                    (item.value instanceof AmauiStyleRule && dynamic(item.value))));
            };
            // Static
            this.static = !dynamic();
        }
        // 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 });
        }
        // With this we have allOwnedCss
        // available for hash value
        this.updateValues();
        // Status
        this.status = 'inited';
    }
    addProperty(prop, value, index = this.rules.length, unique = true, add = true) {
        var _a;
        const atRule_ = prop.indexOf('@') === 0;
        const parent = this;
        const parentAtRule = this.version === 'at-rule';
        const parentKeyFrames = parentAtRule && ((_a = parent.property) === null || _a === void 0 ? void 0 : _a.indexOf('@keyframes')) > -1;
        const selector = prop.indexOf('&') > -1 || parentAtRule || parentKeyFrames;
        const isProperty = !(atRule_ || selector) || ['@font-face'].includes(parent.property);
        const toSkip = ['@classNames', '@cs', '@options', '@o', '@pure', '@p'].indexOf(prop) > -1;
        if (toSkip)
            return;
        // if it's a css property
        if (isProperty) {
            const property = (0, utils_1.cammelCaseToKebabCase)(prop);
            const { value: ruleValues = [], options } = (0, utils_1.valueResolve)(property, value, this.amauiStyle);
            // Add to rules
            ruleValues.forEach(item => {
                if (this.amauiStyleSheet.mode === 'regular' || !parent.isVariable) {
                    if (!!item) {
                        AmauiStyleRuleProperty_1.default.make(item, property, Object.assign({ value_version: ((0, utils_1.is)('function', item) || (0, utils_1.isAmauiSubscription)(item)) ? (0, utils_1.is)('function', item) ? 'method' : 'amaui_subscription' : 'value', pure: this.pure, owner: parent, parents: [...parent.parents, parent], amauiStyleRule: parent, amauiStyleSheet: parent.amauiStyleSheet, amauiStyle: parent.amauiStyle }, options.rule));
                    }
                }
                else if (this.amauiStyleSheet.mode === 'atomic' && parent.isVariable) {
                    AmauiStyleRule.make({ [property]: item }, env.amaui_methods.makeName.next().value, {
                        mode: 'atomic',
                        version: 'property',
                        pure: this.pure,
                        index: (this.index + 1) + index,
                        owner: parent.parent,
                        parents: [...parent.parents, parent],
                        amauiStyleSheet: parent.amauiStyleSheet,
                        amauiStyle: parent.amauiStyle
                    });
                }
            });
        }
        else {
            // Pre
            this.amauiStyle.subscriptions.rule.pre.emit();
            let rule;
            const parents = [...parent.parents, parent];
            // if its an at-rule
            const atTopLevel = ['@import', '@charset', '@namespace', '@color-profile', '@property', '@font-feature-values', '@counter-style', '@keyframes', '@font-face', '@page'];
            const atNested = ['@media', '@supports'];
            // if parent is keyframes
            if (parentKeyFrames) {
                rule = AmauiStyleRule.make(value, prop, {
                    mode: 'regular',
                    version: atRule_ ? 'at-rule' : 'property',
                    pure: false,
                    index,
                    owner: parent,
                    parents,
                    amauiStyleSheet: parent.amauiStyleSheet,
                    amauiStyle: parent.amauiStyle
                });
            }
            // if it's a top level at-rule
            else if (atRule_ && atTopLevel.some(item => prop.indexOf(item) === 0)) {
                rule = AmauiStyleRule.make(value, prop, {
                    mode: 'regular',
                    version: atRule_ ? 'at-rule' : 'property',
                    pure: false,
                    index,
                    owner: this.amauiStyleSheet,
                    parents,
                    amauiStyleSheet: parent.amauiStyleSheet,
                    amauiStyle: parent.amauiStyle
                });
            }
            // if it's @media or @supports or
            // it's & or a $ ref value
            else if ((atRule_ && atNested.some(item => prop.indexOf(item) === 0)) ||
                selector) {
                let owner;
                for (let i = parents.length - 1; i >= 0; i--) {
                    owner = parents[i];
                    // Move it to nearest @media or @supports or AmauiStyleSheet parent as a rule in rules value
                    // only if the parent is at-rule @media or @supports, or AmauiStyleSheet
                    if ((owner.version === 'at-rule' &&
                        atNested.some(item => owner.property.indexOf(item) === 0)) ||
                        owner instanceof AmauiStyleSheet_1.default)
                        break;
                }
                rule = AmauiStyleRule.make(value, prop, {
                    mode: 'regular',
                    version: atRule_ ? 'at-rule' : 'property',
                    pure: false,
                    index,
                    owner,
                    parents,
                    amauiStyleSheet: parent.amauiStyleSheet,
                    amauiStyle: parent.amauiStyle
                });
            }
            // Post
            this.amauiStyle.subscriptions.rule.post.emit(rule);
        }
        // Adding individual new prop
        // Sort and making unique rules
        if (unique)
            this.unique;
        if (add) {
            // Add
            const added = this.add();
            // Update
            if (!added)
                this.rules_owned.forEach(rule => rule.update());
        }
    }
    add(update = true) {
        // Update values
        // manually adding the rule
        if (!this.css)
            this.updateValues();
        // Make selector
        this.makeSelector();
        // add for amauiStyleRule value
        this.rules_owned.filter(rule => rule instanceof AmauiStyleRule).forEach(rule => rule.add());
        // Update values
        if (update)
            this.updateValues();
        // Add rule if sheet is active
        if (this.amauiStyleSheet.status === 'active')
            return this.addRuleToCss();
        this.status = 'active';
    }
    updateProps() {
        if ((['method', 'amaui_subscription'].indexOf(this.value_version) > -1))
            this.init();
        // Add
        this.add(false);
        // Update
        this.rules_owned.forEach(rule => rule.update());
        // Update values
        this.updateValues();
        this.amauiStyle.subscriptions.rule.update_props.emit(this);
    }
    update(value) {
        // Manual update
        if (value !== undefined ||
            (['method', 'amaui_subscription'].indexOf(this.value_version) > -1))
            this.init(value);
        // Add
        this.add(false);
        // Update
        this.rules_owned.forEach(rule => rule.update());
        // Update values
        this.updateValues();
        this.amauiStyle.subscriptions.rule.update.emit(this);
    }
    remove() {
        // Remove all own amauiStyleRules
        this.rules_owned.filter(rule => rule instanceof AmauiStyleRule).forEach(rule => rule.remove());
        // Only if rule and amauiStyleSheet.sheet exists
        // find index of the rule in the sheet
        // remove the rule from the sheet
        const ref = this.amauiStyle.refs[this.hash];
        // No ref or ref is main and ref.refs are empty
        if (!ref || (ref.main.rule === this && !ref.refs.length)) {
            if (ref)
                delete this.amauiStyle.refs[this.hash];
            if (this.amauiStyleSheet.sheet) {
                const index = Array.from(this.amauiStyleSheet.sheet.cssRules).findIndex(item => item === this.rule);
                if (index > -1)
                    this.amauiStyleSheet.sheet.deleteRule(index);
            }
            this.clear();
        }
        else if (ref && ref.main.rule !== this) {
            const indexRef = ref.refs.indexOf(this.amauiStyleSheet);
            if (indexRef > -1)
                ref.refs.splice(indexRef, 1);
            // if ref is removed and there are no more refs trigger sheet remove
            // which if that sheet has no more refs will be removed
            if (!ref.refs.length && ref.main.sheet.status === 'remove')
                ref.main.sheet.remove();
            this.clear();
        }
    }
    addRuleToCss() {
        // if !rule ref &
        // if not a ref rule
        if (!this.rule && !this.ref) {
            const css = this.css;
            if (css) {
                const rule = (this.owner.sheet || this.owner.rule);
                if (rule === null || rule === void 0 ? void 0 : rule.cssRules) {
                    let index = rule.cssRules.length;
                    index = (0, try_1.default)(() => rule.insertRule(css, index));
                    if (index !== undefined) {
                        const ruleCSS = rule.cssRules[index];
                        this.rule = ruleCSS;
                        this.amauiStyle.subscriptions.rule.add.emit(this);
                        return true;
                    }
                }
            }
        }
    }
    addRuleRef() {
        if (!this.rule) {
            const rule = (this.owner.sheet || this.owner.rule);
            if (rule === null || rule === void 0 ? void 0 : rule.cssRules) {
                const ref = Array.from(rule.cssRules).find((item) => item.selectorText === this.selector);
                if (ref !== undefined)
                    this.rule = ref;
                // Move through rules
                this.rules_owned.filter(rule_ => rule_ instanceof AmauiStyleRule).forEach((rule_) => rule_.addRuleRef());
            }
        }
    }
    makeSelector() {
        if (!this.selector) {
            // Make hash first so we can use refs
            if (!this.hash)
                this.makeHash();
            const parentAtRule = this.parent.version === 'at-rule';
            const isKeyframes = this.property.indexOf('@keyframes') === 0;
            // Variable
            if ((this.isVariable || this.mode === 'atomic') || isKeyframes) {
                // if it's a variable
                this.makeRuleClassName();
                // if it's a keyframes rule
                this.makeRuleKeyframesName();
            }
            else {
                // Make property the selector
                this.selector = this.property;
                // level 0 property inside an at-rule
                if (parentAtRule && this.version === 'property') {
                    // & ref
                    let parent = this.parent;
                    while (parent.version === 'at-rule')
                        parent = parent.parent;
                    this.selector = this.selector.replace(/&/g, parent.selector);
                    // properties ie. body should remain the same targeting html element
                    // we only replace $ ref values in properties
                    // $ ref
                    const refs = (0, utils_1.getRefs)(this.property);
                    refs.forEach(ref => {
                        const className = this.makeClassName(ref);
                        const regex = new RegExp(`\\$${ref}`, 'g');
                        this.selector = this.property.replace(regex, `.${className}`);
                    });
                }
                // other regular selectors
                // and & value rules
                else {
                    // & ref
                    this.selector = this.selector.replace(/&/g, this.parent.selector);
                    // $ ref
                    const refs = (0, utils_1.getRefs)(this.selector);
                    refs.forEach(ref => {
                        const className = this.makeClassName(ref);
                        const regex = new RegExp(`\\$${ref}`, 'g');
                        this.selector = this.selector.replace(regex, `.${className}`);
                    });
                }
            }
            // Move through the rules
            this.rules.forEach(rule => rule.value.makeSelector());
            // Update values without hash
            this.updateValues(false);
        }
    }
    makeClassName(property, rule) {
        var _a, _b;
        const names = ((_a = this.amauiStyleSheet.amauiStyleSheetManager) === null || _a === void 0 ? void 0 : _a.names) || this.amauiStyleSheet.names;
        const cached = names.classNames[property];
        if (cached)
            return cached;
        // amauiStyle ref
        // ref className already exists for the same hash
        const ref = this.amauiStyle.refs[this.hash];
        // Only reuse classNames for static amauiStyleSheets and for variables only not & rules
        if (rule instanceof AmauiStyleRule &&
            (rule.isVariable || rule.mode === 'atomic') &&
            this.hash &&
            ref &&
            this.amauiStyleSheet.version === 'static') {
            // Push amauiStyleSheet ref if it doesn't already exist in refs
            if (ref.main.sheet !== this.amauiStyleSheet &&
                ref.refs.indexOf(this.amauiStyleSheet) === -1)
                ref.refs.push(this.amauiStyleSheet);
            // Update rule ref
            rule.ref = ref;
            return ref.className;
        }
        // Make a className
        const className = (
        // Make with plugin/s
        ((_b = this.amauiStyle.subscriptions.className.name.map({ property, value: rule === null || rule === void 0 ? void 0 : rule.value })) === null || _b === void 0 ? void 0 : _b.value) ||
            // Make with a default method
            this.makeRuleClassNameDefault(property));
        // Add to amauiStyle ref,
        // only reuse classNames for static amauiStyleSheets
        if (rule instanceof AmauiStyleRule &&
            (rule.isVariable || rule.mode === 'atomic') &&
            this.hash &&
            this.amauiStyleSheet.version === 'static') {
            this.amauiStyle.refs[this.hash] = {
                main: {
                    sheet: this.amauiStyleSheet,
                    rule: this
                },
                className,
                refs: []
            };
        }
        // if no rule, means it's a non-existent (or dynamic) variable
        // so cache the className value as this value
        if (!rule) {
            this.amauiStyleSheet.names.classNames[property] = className;
            this.amauiStyleSheet.names.classes[property] = className;
            if (this.amauiStyleSheet.version === 'static' && this.amauiStyleSheet.amauiStyleSheetManager) {
                this.amauiStyleSheet.amauiStyleSheetManager.names.classNames[property] = className;
                this.amauiStyleSheet.amauiStyleSheetManager.names.classes[property] = className;
            }
        }
        return className;
    }
    makeRuleClassName(property = this.property, rule = this) {
        var _a;
        if (rule instanceof AmauiStyleRule &&
            (rule.isVariable || rule.mode === 'atomic') &&
            !rule.className) {
            const names = ((_a = this.amauiStyleSheet.amauiStyleSheetManager) === null || _a === void 0 ? void 0 : _a.names) || this.amauiStyleSheet.names;
            const cached = names.classNames[rule.property];
            if (cached && rule.className)
                return cached;
            // Make a className
            // Pre
            this.amauiStyle.subscriptions.className.pre.emit();
            // Name
            const className = this.makeClassName(property, rule);
            // Post
            this.amauiStyle.subscriptions.className.post.emit(className);
            rule.className = className;
            rule.selector = `.${className}`;
            return className;
        }
    }
    makeRuleKeyframesName(property_ = this.property, rule = this) {
        var _a, _b;
        if (rule instanceof AmauiStyleRule &&
            !rule.keyframesName &&
            rule.property.indexOf('@keyframes') === 0) {
            const keyframe = property_.indexOf('@keyframes') === 0;
            const property = keyframe ? property_.split(' ')[1] : property_;
            const names = ((_a = this.amauiStyleSheet.amauiStyleSheetManager) === null || _a === void 0 ? void 0 : _a.names) || this.amauiStyleSheet.names;
            const cached = names.keyframes[property];
            if (cached)
                return cached;
            // Make a keyframes name value
            // Pre
            this.amauiStyle.subscriptions.keyframes.pre.emit();
            // Name
            const keyframesName = (
            // Make with plugin/s
            ((_b = this.amauiStyle.subscriptions.keyframes.name.map({ property, value: rule.value })) === null || _b === void 0 ? void 0 : _b.value) ||
                // Make with a default method
                this.makeRuleKeyframesNameDefault(property));
            // Post
            this.amauiStyle.subscriptions.keyframes.post.emit(keyframesName);
            rule.keyframesName = keyframesName;
            // Add to selector as well
            rule.selector = `@keyframes ${keyframesName}`;
        }
    }
    get rule() {
        return this.rule_;
    }
    set rule(rule) {
        var _a, _b;
        // Update active status
        this.status = 'active';
        this.rule_ = rule;
        if (!!((_b = (_a = this.rule) === null || _a === void 0 ? void 0 : _a.cssRules) === null || _b === void 0 ? void 0 : _b.length)) {
            Array.from(this.rule.cssRules).forEach((item) => {
                let selector = item.selectorText;
                if (item instanceof CSSMediaRule)
                    selector = `@media ${item.conditionText}`;
                else if (item instanceof CSSSupportsRule)
                    selector = `@supports ${item.conditionText}`;
                const rule_ = this.rules.find(rule__ => rule__.value.selector === selector);
                if (rule_)
                    rule_.value.rule = item;
            });
        }
    }
    get unique() {
        var _a, _b;
        // Remove duplicate rules
        const values = [];
        this.rules.forEach((rule, index) => {
            const exists = rule instanceof AmauiStyleRuleProperty_1.default && values.find(item => (item instanceof AmauiStyleRuleProperty_1.default &&
                item.values.property === rule.values.property &&
                item.values.value === rule.values.value));
            if (exists)
                this.rules.splice(index, 1);
            else
                values.push(rule);
        });
        // Native sort based on levels first
        // for making, updating & refs
        this.rules.sort((a, b) => {
            if (a.value.level === b.value.level)
                return 0;
            return a.value.level < b.value.level ? -1 : 1;
        });
        const atRule = this.version === 'at-rule';
        // Sort
        const useSort = (!atRule &&
            this.amauiStyle.options.rule.sort &&
            (this.amauiStyleSheet !== undefined || this.amauiStyleSheet.options.rule.sort !== false) &&
            (((_a = this.amauiStyleSheet) === null || _a === void 0 ? void 0 : _a.amauiTheme) !== undefined || ((_b = this.amauiStyleSheet.amauiTheme) === null || _b === void 0 ? void 0 : _b.options.rule.sort) !== false) &&
            // by default is true
            this.options.sort !== false);
        if (useSort) {
            this.amauiStyle.subscriptions.rules.sort.map(this.rules);
            // Post
            this.amauiStyle.subscriptions.rules.sort.emit(this);
        }
        return this.rules;
    }
    clear() {
        this.rule = undefined;
        this.ref = undefined;
        this.status = 'idle';
        // 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);
        });
        // remove it's selector
        // or keyframes name from
        // sheet and sheetManager
        if (this.className) {
            delete this.amauiStyleSheet.names.classNames[this.property];
            delete this.amauiStyleSheet.names.classes[this.property];
            delete this.amauiStyleSheet.amauiStyleSheetManager.names.classNames[this.property];
            delete this.amauiStyleSheet.amauiStyleSheetManager.names.classes[this.property];
        }
        else if (this.keyframesName) {
            const property = this.property.split(' ')[1];
            delete this.amauiStyleSheet.names.keyframes[property];
            delete this.amauiStyleSheet.amauiStyleSheetManager.names.keyframes[property];
        }
        this.amauiStyle.subscriptions.rule.remove.emit(this);
    }
    static make(value, property, options = {
        mode: 'regular',
        version: 'property',
        pure: false,
        index: 0,
        parents: [this],
    }) {
        return new AmauiStyleRule(value, property, options);
    }
}
exports.default = AmauiStyleRule;