import { BindableValue } from './binding';
import { DomElementMethod, DomMethod, IAttrObj } from './domImpl';
/**
 * Sets multiple attributes of a DOM element.
 * Null and undefined values are omitted, and booleans are either omitted or set to empty string.
 * @param attrsObj - Object mapping attribute names to attribute values.
 */
export declare function attrsElem(elem: Element, attrsObj: IAttrObj): void;
/**
 * Sets multiple attributes of a DOM element. Null and undefined values are omitted, and booleans
 * are either omitted or set to empty string.
 */
export declare function attrs(attrsObj: IAttrObj): DomElementMethod;
/**
 * Sets an attribute of a DOM element to the given value. Removes the attribute when the value is
 * null or undefined.
 * @param elem - The element to update.
 * @param attrName - The name of the attribute to bind, e.g. 'href'.
 * @param attrValue - The string value, or null or undefined to remove the attribute.
 */
export declare function attrElem(elem: Element, attrName: string, attrValue: string | null | undefined): void;
/**
 * Sets an attribute of a DOM element to the given value. Removes the attribute when the value is
 * null or undefined.
 *
 * @example
 * ```ts
 * dom('a', dom.attr('href', urlObs))
 * ```
 */
export declare function attr(attrName: string, attrValueObs: BindableValue<string | null | undefined>): DomElementMethod;
/**
 * Sets or removes a boolean attribute of a DOM element. According to the spec, empty string is a
 * valid true value for the attribute, and the false value is indicated by the attribute's absence.
 * @param elem - The element to update.
 * @param attrName - The name of the attribute to bind, e.g. 'checked'.
 * @param boolValue - Boolean value whether to set or unset the attribute.
 */
export declare function boolAttrElem(elem: Element, attrName: string, boolValue: boolean): void;
/**
 * Dom-method that sets or removes a boolean attribute of a DOM element.
 * @param attrName - The name of the attribute to bind, e.g. 'checked'.
 * @param boolValueObs - Value, observable, or function for a whether to set or unset the attribute.
 */
export declare function boolAttr(attrName: string, boolValueObs: BindableValue<boolean>): DomElementMethod;
/**
 * Adds a text node to the element.
 * @param elem - The element to update.
 * @param value - The text value to add.
 */
export declare function textElem(elem: Node, value: string): void;
/**
 * Sets text content of a DOM element to a value that may be an observable or a function.
 */
export declare function text(valueObs: BindableValue<string>): DomMethod;
/**
 * Sets a style property of a DOM element to the given value.
 * @param elem - The element to update.
 * @param property - The name of the style property to update, e.g. 'fontWeight'.
 * @param value - The value for the property.
 */
export declare function styleElem(elem: Element, property: string, value: string): void;
/**
 * Sets a style property of a DOM element to the given value, which may be an observable or a
 * function.
 * @param property - The name of the style property to update, e.g. 'fontWeight'.
 * @param value - The value for the property.
 */
export declare function style(property: string, valueObs: BindableValue<string>): DomElementMethod;
/**
 * Sets the property of a DOM element to the given value.
 * @param elem - The element to update.
 * @param property - The name of the property to update, e.g. 'disabled'.
 * @param value - The value for the property.
 */
export declare function propElem<T>(elem: Node, property: string, value: T): void;
/**
 * Sets the property of a DOM element to the given value, which may be an observable or a
 * function.
 * @param property - The name of the property to update, e.g. 'disabled'.
 * @param value - The value for the property.
 */
export declare function prop<T>(property: string, valueObs: BindableValue<T>): DomMethod;
/**
 * Shows or hides the element depending on a boolean value. Note that the element must be visible
 * initially (i.e. unsetting style.display should show it).
 * @param elem - The element to update.
 * @param boolValue - True to show the element, false to hide it.
 */
export declare function showElem(elem: HTMLElement, boolValue: boolean): void;
/**
 * Shows or hides the element depending on a boolean value, which may be an observable or a function.
 * Note that the element must be visible by default (i.e. unsetting `style.display` should show it).
 */
export declare function show(boolValueObs: BindableValue<boolean>): DomElementMethod;
/**
 * The opposite of show, hiding the element when boolValue is true.
 * @param elem - The element to update.
 * @param boolValue - True to hide the element, false to show it.
 */
export declare function hideElem(elem: HTMLElement, boolValue: boolean): void;
/**
 * The opposite of show, hiding the element when boolValue is true. `boolValueObs` may be an
 * observable or a function.
 * Note that the element must be visible by default (i.e. unsetting `style.display` should show it).
 */
export declare function hide(boolValueObs: BindableValue<boolean>): DomElementMethod;
/**
 * Sets or toggles the given css class className.
 */
export declare function clsElem(elem: Element, className: string, boolValue?: boolean): void;
/**
 * Sets or toggles a css class className. If className is an observable, it will be replaced when
 * the observable changes. If a plain string, then an optional second boolean observable may be
 * given, which will toggle it.
 * ```ts
 * dom.cls('foo')                                // Sets className 'foo'
 * dom.cls('foo', isFoo);                        // Toggles 'foo' className according to observable.
 * dom.cls('foo', (use) => use(isFoo));          // Toggles 'foo' className according to observable.
 * dom.cls(fooClass);                            // Sets className to the value of fooClass observable
 * dom.cls((use) => `prefix-${use(fooClass)}`);  // Sets className to prefix- plus fooClass observable.
 * ```
 */
export declare function cls(className: string, boolValue?: BindableValue<boolean>): DomElementMethod;
export declare function cls(className: BindableValue<string>): DomElementMethod;
/**
 * Just like cls() but prepends a prefix to className, including when it is an observable.
 */
export declare function clsPrefix(prefix: string, className: string, boolValue?: BindableValue<boolean>): DomElementMethod;
export declare function clsPrefix(prefix: string, className: BindableValue<string>): DomElementMethod;
/**
 * Associate arbitrary data with a DOM element.
 * @param elem - The element with which to associate data.
 * @param key - Key to identify this piece of data among others attached to elem.
 * @param value - Arbitrary value to associate with elem.
 */
export declare function dataElem(elem: Node, key: string, value: any): void;
/**
 * Associate arbitrary data with a DOM element: `value` may be an observable or a function.
 * @param key - Key to identify this piece of data among others attached to elem.
 * @param value - Arbitrary value to associate with elem.
 */
export declare function data(key: string, valueObs: BindableValue<any>): DomMethod;
/**
 * Retrieve data associated with a DOM element using `data()` or `dataElem()`.
 */
export declare function getData(elem: Node, key: string): any;
/**
 * A very simple setup to identify DOM elements for testing purposes. Here's the recommended
 * usage.
 * ```ts
 *   // In the component to be tested.
 *   import {noTestId, TestId} from 'grainjs';
 *
 *   function myComponent(myArgs, testId: TestId = noTestId) {
 *     return dom(..., testId("some-name"),
 *       dom(..., testId("another-name"), ...),
 *     );
 *   }
 * ```
 *
 * In the fixture code using this component:
 * ```ts
 *   import {makeTestId} from 'grainjs';
 *
 *   dom(..., myComponent(myArgs, makeTestId('test-mycomp-'), ...)
 * ```
 *
 * In the webdriver test code:
 * ```ts
 *   driver.find('.test-my-comp-some-name')
 *   driver.find('.test-my-comp-another-name')
 * ```
 *
 * When myComponent() is created with testId argument omitted, the testId() calls are no-ops. When
 * makeTestId('test-foo-') is passed in, testId() calls simply add a css class with that prefix.
 */
export type TestId = (name: string) => DomElementMethod | null;
/**
 * See documentation for TestId above.
 */
export declare function makeTestId(prefix: string): TestId;
/**
 * See documentation for TestId above.
 */
export declare const noTestId: TestId;