@domx/dataelement
Version:
A DataElement base class for handling data state changes
399 lines • 21.3 kB
TypeScript
export { customDataElements, DataElement, DataElementCtor, DataElementMetaData, DataProperties };
/** Add custom element methods to HTMLElement */
declare global {
interface HTMLElement {
connectedCallback(): void;
disconnectedCallback(): void;
}
}
/** Defines the static fields of a DataElement */
interface DataElementCtor extends Function {
__elementName: string;
dataProperties: DataProperties;
stateIdProperty: string;
}
/** Generic object key index accessor */
interface StringKeyIndex<T> {
[key: string]: T;
}
/** The static DataProperties as defined on the DataElement */
interface DataProperties extends StringKeyIndex<DataProperty> {
}
interface DataProperty {
changeEvent?: string;
}
/** DataProperty MetaData parsed per stateId */
interface DataPropertiesMetaData extends StringKeyIndex<DataPropertyMetaData> {
}
interface DataPropertyMetaData {
changeEvent: string;
statePath: string;
windowEventName: string;
localEventHandler: EventListener;
windowEventHandler: EventListener;
}
interface DataElementMetaData {
elementName: string;
element: DataElement;
dataProperties: DataPropertiesMetaData;
}
declare const DataElement_base: (new (...args: any[]) => {
__eventMapProcessed?: boolean | undefined;
__eventMapHandlers?: import("@domx/eventmap").ProcessedEventMapDefinition | undefined;
connectedCallback(): void;
disconnectedCallback(): void;
_bindEvents(): void;
_unbindEvents(): void;
accessKey: string;
readonly accessKeyLabel: string;
autocapitalize: string;
dir: string;
draggable: boolean;
hidden: boolean;
inert: boolean;
innerText: string;
lang: string;
readonly offsetHeight: number;
readonly offsetLeft: number;
readonly offsetParent: Element | null;
readonly offsetTop: number;
readonly offsetWidth: number; /**
* Dispatches a change event on this DataElement.
* @param prop {string} the name of the property to dispatch the change event on; default is "state"
* @param change {object} checks for JSON equals before dispatching (props must be in same order).
*/
outerText: string;
spellcheck: boolean;
title: string;
translate: boolean;
attachInternals(): ElementInternals;
click(): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined): void;
readonly attributes: NamedNodeMap;
readonly classList: DOMTokenList;
className: string;
readonly clientHeight: number;
readonly clientLeft: number;
readonly clientTop: number;
readonly clientWidth: number;
id: string;
readonly localName: string;
readonly namespaceURI: string | null;
onfullscreenchange: ((this: Element, ev: Event) => any) | null;
onfullscreenerror: ((this: Element, ev: Event) => any) | null;
outerHTML: string;
readonly ownerDocument: Document;
readonly part: DOMTokenList;
readonly prefix: string | null;
readonly scrollHeight: number;
scrollLeft: number;
scrollTop: number;
readonly scrollWidth: number;
readonly shadowRoot: ShadowRoot | null;
slot: string;
readonly tagName: string;
attachShadow(init: ShadowRootInit): ShadowRoot;
closest<K_2 extends keyof HTMLElementTagNameMap>(selector: K_2): HTMLElementTagNameMap[K_2] | null;
closest<K_3 extends keyof SVGElementTagNameMap>(selector: K_3): SVGElementTagNameMap[K_3] | null;
closest<E extends Element = Element>(selectors: string): E | null;
getAttribute(qualifiedName: string): string | null;
getAttributeNS(namespace: string | null, localName: string): string | null;
getAttributeNames(): string[];
getAttributeNode(qualifiedName: string): Attr | null;
getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
getBoundingClientRect(): DOMRect;
getClientRects(): DOMRectList;
getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
getElementsByTagName<K_4 extends keyof HTMLElementTagNameMap>(qualifiedName: K_4): HTMLCollectionOf<HTMLElementTagNameMap[K_4]>;
getElementsByTagName<K_5 extends keyof SVGElementTagNameMap>(qualifiedName: K_5): HTMLCollectionOf<SVGElementTagNameMap[K_5]>;
getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
hasAttribute(qualifiedName: string): boolean;
hasAttributeNS(namespace: string | null, localName: string): boolean;
hasAttributes(): boolean;
hasPointerCapture(pointerId: number): boolean;
insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
insertAdjacentHTML(position: InsertPosition, text: string): void;
insertAdjacentText(where: InsertPosition, data: string): void;
matches(selectors: string): boolean;
releasePointerCapture(pointerId: number): void;
removeAttribute(qualifiedName: string): void;
removeAttributeNS(namespace: string | null, localName: string): void;
removeAttributeNode(attr: Attr): Attr;
requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
requestPointerLock(): void;
scroll(options?: ScrollToOptions | undefined): void;
scroll(x: number, y: number): void;
scrollBy(options?: ScrollToOptions | undefined): void;
scrollBy(x: number, y: number): void;
scrollIntoView(arg?: boolean | ScrollIntoViewOptions | undefined): void;
scrollTo(options?: ScrollToOptions | undefined): void;
scrollTo(x: number, y: number): void;
setAttribute(qualifiedName: string, value: string): void;
setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
setAttributeNode(attr: Attr): Attr | null;
setAttributeNodeNS(attr: Attr): Attr | null;
setPointerCapture(pointerId: number): void;
toggleAttribute(qualifiedName: string, force?: boolean | undefined): boolean;
webkitMatchesSelector(selectors: string): boolean;
readonly baseURI: string;
readonly childNodes: NodeListOf<ChildNode>;
readonly firstChild: ChildNode | null;
readonly isConnected: boolean;
readonly lastChild: ChildNode | null;
readonly nextSibling: ChildNode | null;
readonly nodeName: string;
readonly nodeType: number;
nodeValue: string | null;
readonly parentElement: HTMLElement | null;
readonly parentNode: ParentNode | null;
readonly previousSibling: ChildNode | null;
textContent: string | null;
appendChild<T extends Node>(node: T): T;
cloneNode(deep?: boolean | undefined): Node;
compareDocumentPosition(other: Node): number;
contains(other: Node | null): boolean;
getRootNode(options?: GetRootNodeOptions | undefined): Node;
hasChildNodes(): boolean;
insertBefore<T_1 extends Node>(node: T_1, child: Node | null): T_1;
isDefaultNamespace(namespace: string | null): boolean;
isEqualNode(otherNode: Node | null): boolean;
isSameNode(otherNode: Node | null): boolean;
lookupNamespaceURI(prefix: string | null): string | null;
lookupPrefix(namespace: string | null): string | null;
normalize(): void;
removeChild<T_2 extends Node>(child: T_2): T_2;
replaceChild<T_3 extends Node>(node: Node, child: T_3): T_3;
readonly ATTRIBUTE_NODE: number;
readonly CDATA_SECTION_NODE: number;
readonly COMMENT_NODE: number;
readonly DOCUMENT_FRAGMENT_NODE: number;
readonly DOCUMENT_NODE: number;
readonly DOCUMENT_POSITION_CONTAINED_BY: number;
readonly DOCUMENT_POSITION_CONTAINS: number;
readonly DOCUMENT_POSITION_DISCONNECTED: number;
readonly DOCUMENT_POSITION_FOLLOWING: number;
readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number;
readonly DOCUMENT_POSITION_PRECEDING: number;
readonly DOCUMENT_TYPE_NODE: number;
readonly ELEMENT_NODE: number;
readonly ENTITY_NODE: number;
readonly ENTITY_REFERENCE_NODE: number;
readonly NOTATION_NODE: number;
readonly PROCESSING_INSTRUCTION_NODE: number;
readonly TEXT_NODE: number;
dispatchEvent(event: Event): boolean;
ariaAtomic: string | null;
ariaAutoComplete: string | null;
ariaBusy: string | null;
ariaChecked: string | null;
ariaColCount: string | null;
ariaColIndex: string | null;
ariaColSpan: string | null;
ariaCurrent: string | null;
ariaDisabled: string | null;
ariaExpanded: string | null;
ariaHasPopup: string | null;
ariaHidden: string | null;
ariaKeyShortcuts: string | null;
ariaLabel: string | null;
ariaLevel: string | null;
ariaLive: string | null;
ariaModal: string | null;
ariaMultiLine: string | null;
ariaMultiSelectable: string | null;
ariaOrientation: string | null;
ariaPlaceholder: string | null;
ariaPosInSet: string | null;
ariaPressed: string | null;
ariaReadOnly: string | null;
ariaRequired: string | null;
ariaRoleDescription: string | null;
ariaRowCount: string | null;
ariaRowIndex: string | null;
ariaRowSpan: string | null;
ariaSelected: string | null;
ariaSetSize: string | null;
ariaSort: string | null;
ariaValueMax: string | null;
ariaValueMin: string | null;
ariaValueNow: string | null;
ariaValueText: string | null;
animate(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
after(...nodes: (string | Node)[]): void;
before(...nodes: (string | Node)[]): void;
remove(): void;
replaceWith(...nodes: (string | Node)[]): void;
innerHTML: string;
readonly nextElementSibling: Element | null;
readonly previousElementSibling: Element | null;
readonly childElementCount: number;
readonly children: HTMLCollection;
readonly firstElementChild: Element | null;
readonly lastElementChild: Element | null;
append(...nodes: (string | Node)[]): void;
prepend(...nodes: (string | Node)[]): void;
querySelector<K_6 extends keyof HTMLElementTagNameMap>(selectors: K_6): HTMLElementTagNameMap[K_6] | null;
querySelector<K_7 extends keyof SVGElementTagNameMap>(selectors: K_7): SVGElementTagNameMap[K_7] | null;
querySelector<E_1 extends Element = Element>(selectors: string): E_1 | null;
querySelectorAll<K_8 extends keyof HTMLElementTagNameMap>(selectors: K_8): NodeListOf<HTMLElementTagNameMap[K_8]>;
querySelectorAll<K_9 extends keyof SVGElementTagNameMap>(selectors: K_9): NodeListOf<SVGElementTagNameMap[K_9]>;
querySelectorAll<E_2 extends Element = Element>(selectors: string): NodeListOf<E_2>;
replaceChildren(...nodes: (string | Node)[]): void;
readonly assignedSlot: HTMLSlotElement | null;
oncopy: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
oncut: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
onpaste: ((this: DocumentAndElementEventHandlers, ev: ClipboardEvent) => any) | null;
readonly style: CSSStyleDeclaration;
contentEditable: string;
enterKeyHint: string;
inputMode: string;
readonly isContentEditable: boolean;
onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onerror: OnErrorEventHandler;
onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent<EventTarget>) => any) | null;
onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
autofocus: boolean;
readonly dataset: DOMStringMap;
nonce?: string | undefined;
tabIndex: number;
blur(): void;
focus(options?: FocusOptions | undefined): void;
}) & {
new (): HTMLElement;
prototype: HTMLElement;
};
/**
* Base class for data elements.
*/
declare class DataElement extends DataElement_base {
static eventsStopImmediatePropagation: boolean;
static __elementName: string;
static stateIdProperty: string;
static dataProperties: DataProperties;
static applyMiddlware(connectedFn: Function, disconnectedFn: Function): void;
static clearMiddleware(): void;
__isConnected: boolean;
__dataPropertyMetaData: DataPropertiesMetaData;
connectedCallback(): void;
disconnectedCallback(): void;
/**
* Resets the state and dispatches the changes;
* useful when changing the stateId property.
* @param states {StateMap} the key is the name of
* the state property, and the value is the state to set it to
*/
refreshState(states: {
[key: string]: object;
}): void;
/**
* Dispatches a change event on this DataElement.
* @param prop {string} the name of the property to dispatch the change event on; default is "state"
* @param change {object} checks for JSON equals before dispatching (props must be in same order).
*/
dispatchChange(prop?: string, change?: object): void;
}
/**
* Custom DataElement Registry
*/
declare const customDataElements: {
/**
* Defines the custom element with window.customElements.define
* and tags the element name for use in RootState.
* @param elementName {string}
* @param element {CustomElementConstructor}
*/
define: (elementName: string, element: CustomElementConstructor) => void;
};
//# sourceMappingURL=DataElement.d.ts.map