@exadel/esl

import { SyntheticEventTarget } from '../../esl-utils/dom/events'; import { ESLMediaRule } from './esl-media-rule'; import type { RulePayloadParser } from './esl-media-rule'; /** Custom event dispatched by {@link ESLMediaRuleList} instances */ export declare class ESLMediaRuleListEvent<T = any> extends Event { /** Current value of target {@link ESLMediaRuleList} instances */ readonly current: T; /** Previous value of target {@link ESLMediaRuleList} instances */ readonly previous: T; /** Target {@link ESLMediaRuleList} instances */ readonly target: ESLMediaRuleList<T>; constructor(current: T, previous: T); } /** * ESLMediaRuleList - {@link ESLMediaRule} observable collection * @author Yuliya Adamskaya, Alexey Stsefanovich (ala'n) * * Represents observable object that wraps environment to value mapping */ export declare class ESLMediaRuleList<T = any> extends SyntheticEventTarget { /** String value parser (default) */ static STRING_PARSER: RulePayloadParser<string>; /** Object value parser. Uses {@link evaluate} to parse value */ static OBJECT_PARSER: (val: string) => U | undefined; /** * Creates {@link ESLMediaRuleList} from string query representation * Expect serialized {@link ESLMediaRule}s separated by '|' * * @param query - query ("arrow" syntax) string */ static parse(query: string): ESLMediaRuleList<string>; /** * Creates {@link ESLMediaRuleList} from string query representation. * Expect serialized {@link ESLMediaRule}s separated by '|' * * @param query - query string * @param parser - value parser function */ static parse(query: string, parser: RulePayloadParser): ESLMediaRuleList; /** * Creates {@link ESLMediaRuleList} from the value string with automatic syntax detection. * Note: single value considered as query string and a single `all => value` rule will be created. * Use explicit tuple syntax {@link parseTuple} to create single rule with media condition. * * @param query - media rule query ('arrow' syntax) string or tuple string of values (uses '|' as separator) * @param mask - media conditions tuple string (uses '|' as separator), to be used in case of tuple syntax * * @example * ```ts * ESLMediaRuleList.parse('1|2|3|4|5', '@XS|@SM|@MD|@LG|@XL') // @xs => '1' | @sm => '2' | @md => '3' | @lg => '4' | @xl => '5' * ESLMediaRuleList.parse('1 | @XS => 2', '@XS|@SM|@MD|@LG|@XL') // all => '1' | @xs => '2' (second argument is ignored) * ``` */ static parse(query: string, mask: string): ESLMediaRuleList<string>; /** * Creates {@link ESLMediaRuleList} from the value string with automatic syntax detection. * Note: single value considered as query string and a single `all => value` rule will be created. * Use explicit tuple syntax {@link parseTuple} to create single rule with media condition. * * @param query - media rule query ('arrow' syntax) string or tuple string of values (uses '|' as separator) * @param mask - media conditions tuple string (uses '|' as separator), to be used in case of tuple syntax * @param parser - value parser function * * @example * ```ts * ESLMediaRuleList.parse('1|2|3|4|5', '@XS|@SM|@MD|@LG|@XL', parseInt) // @xs => 1 | @sm => 2 | @md => 3 | @lg => 4 | @xl => 5 * ESLMediaRuleList.parse('1 | @XS => 2', '@XS|@SM|@MD|@LG|@XL', parseInt) // all => 1 | @xs => 2 (second argument is ignored) * ``` */ static parse(query: string, mask: string, parser: RulePayloadParser): ESLMediaRuleList; /** * Creates {@link ESLMediaRuleList} from string query representation * Uses exact strings as rule list values * @param query - query string */ static parseQuery(query: string): ESLMediaRuleList<string>; /** * Creates `ESLMediaRuleList` from string query representation * @param query - query string * @param parser - value parser function */ static parseQuery(query: string, parser: RulePayloadParser): ESLMediaRuleList; /** * Creates {@link ESLMediaRuleList} from two strings with conditions and values sequences * * @param mask - media conditions tuple string (uses '|' as separator) * @param values - values tuple string (uses '|' as separator) * * @example * ```ts * ESLMediaRuleList.parseTuple('@XS|@SM|@MD|@LG|@XL', '1|2|3|4|5') * ``` */ static parseTuple(mask: string, values: string): ESLMediaRuleList<string>; /** * Creates {@link ESLMediaRuleList} from two strings with conditions and values sequences * * @param mask - media conditions tuple string (uses '|' as separator) * @param values - values tuple string (uses '|' as separator) * @param parser - value parser function * * @example * ```ts * ESLMediaRuleList.parseTuple(@XS|@SM|@MD|@LG|@XL', '1|2|3|4|5', Number) * ``` */ static parseTuple(mask: string, values: string, parser: RulePayloadParser): ESLMediaRuleList; protected _value: T | undefined; protected readonly _rules: ESLMediaRule<T>[]; private constructor(); /** Subscribes to the instance active rule change */ addEventListener(callback: EventListener): void; addEventListener(type: 'change', callback: EventListener): void; /** Unsubscribes from the instance active rule change */ removeEventListener(callback: EventListener): void; removeEventListener(type: 'change', callback: EventListener): void; /** Array of {@link ESLMediaRule}s that forms the current {@link ESLMediaRuleList} */ get rules(): ESLMediaRule<T>[]; /** All active {@link ESLMediaRule}s */ get active(): ESLMediaRule<T>[]; /** Value of the last of active rules */ get activeValue(): T | undefined; /** All active rule values */ get activeValues(): T[]; /** * Current value of {@link ESLMediaRuleList} object * Uses cache if current object is under observation */ get value(): T | undefined; /** Always computed value of the current {@link ESLMediaRuleList} object */ get computedValue(): T | undefined; /** Handles inner rules state change */ private _onMatchChanged; /** @returns serialized {@link ESLMediaRuleList} object representation*/ toString(): string; } declare global { export interface ESLLibrary { MediaRuleList: typeof ESLMediaRuleList; } }