@silexlabs/grapesjs-advanced-selector/dist/model/ComplexSelector.d.ts

A GrapesJS plugin for managing advanced CSS selectors with a visual interface

import { Component } from 'grapesjs';
import { CompoundSelector } from './CompoundSelector';
import { Operator } from './Operator';
import { SimpleSelector } from './SimpleSelector';
export interface ComplexSelector {
    mainSelector: CompoundSelector;
    operator?: Operator;
    relatedSelector?: CompoundSelector;
    atRule?: string;
}
export declare const EMPTY_SELECTOR: ComplexSelector;
export declare function toString(cs: ComplexSelector, ignorePseudoClass?: boolean): string;
export declare function noPseudo(cs: ComplexSelector): {
    mainSelector: {
        pseudoClass: undefined;
        selectors: SimpleSelector[];
    };
    relatedSelector: {
        pseudoClass: undefined;
        selectors: SimpleSelector[];
    } | undefined;
    operator?: Operator;
    atRule?: string;
};
export declare function specificity(cs: ComplexSelector): number;
/**
 * Parses a CSS selector string and converts it into a ComplexSelector model
 * @example fromString('div > .class') // { mainSelector: { selectors: [{ type: 'tag', value: 'div' }] }, operator: { isCombinator: true, value: '>' }, relatedSelector: { selectors: [{ type: 'class', value: 'class' }] } }
 * @example fromString('.main:has(.related)') // { mainSelector: { selectors: [{ type: 'class', value: 'main' }] }, operator: { isCombinator: false, value: ':has' }, relatedSelector: { selectors: [{ type: 'class', value: 'related' }] } }
 */
export declare function fromString(selector: string, atRule: string): ComplexSelector;
/**
 * Merge two ComplexSelectors into one
 * This will add the relatedSelector of cs2 to the mainSelector of cs1, same for the relatedSelector
 * If both selectors have an operator, the operator of cs1 will be kept
 */
export declare function merge(cs1: ComplexSelector, cs2: ComplexSelector): ComplexSelector;
/**
 * Activate or deactivate the selectors of a ComplexSelector (main and related)
 * Depending on the selectors of another ComplexSelector
 * @example activateSelectors({ mainSelector: { selectors: [{ type: 'tag', value: 'div', active: false }, { type: 'class', value: '.test', active: true }] }, { mainSelector: { selectors: [{ type: 'tag', value: 'div', active: true }] }) // { mainSelector: { selectors: [{ type: 'tag', value: 'div', active: true }, { type: 'class', value: '.test', active: false } }
 */
export declare function activateSelectors(cs: ComplexSelector, other: ComplexSelector): ComplexSelector;
/**
 * Make sure all ComplexSelectors have the same mainSelector, operator, and relatedSelector
 */
export declare function same(all: ComplexSelector[]): ComplexSelector | false;
/**
 * Make sure that the selector always contains a default fallback:
 * - For body components: the `body` tag selector
 * - For other components: the component ID selector
 */
export declare function getSelector(components: Component[]): ComplexSelector | null;
//# sourceMappingURL=ComplexSelector.d.ts.map