@instawork/design-system/lib/common/custom-component.d.ts

The design system for Instawork's web apps

import { AttributeError, AttributeInvalidError, AttributeRequiredError } from './attribute-error';
import { GetIwControllerFn, JQueryPluginExtras, JQueryPluginFn, JQueryPluginPreInitFn } from './custom-component-types';
declare global {
    interface JQuery {
        getIwController<TComponent extends CustomComponent<TElement>, TElement extends HTMLElement = HTMLElement>(): TComponent;
    }
}
export interface CustomComponent<TElement extends HTMLElement = HTMLElement> {
    constructor: typeof CustomComponent;
}
/**
 * A base class that handles shared functionality for custom components
 */
export declare class CustomComponent<TElement extends HTMLElement = HTMLElement> {
    readonly $el: JQuery<TElement>;
    static readonly CUSTOM_COMPONENT_ATTR: string;
    /**
     * Returns a selector string that can be used to find elements bound to a {@link CustomComponent} instance.
     *
     * The iw-component attribute is automatically added to any component using {@link CustomComponent} so they
     * can be easily identified.
     */
    static readonly CUSTOM_COMPONENT_SELECTOR: string;
    /**
     * Extend jQuery with the component's jQuery plugin function.
     */
    static loadPlugin(): void;
    /**
     * Overridden to return a CSS selector for the host element of the component.
     *
     * @abstract
     */
    static COMPONENT_SELECTOR: string;
    static get ID_PREFIX(): string;
    protected static getIdPrefix(): string;
    protected static readonly TEMPLATE: string;
    static getController<TComponent extends CustomComponent<TElement>, TElement extends HTMLElement = HTMLElement>($el: JQuery<TElement>): TComponent;
    static bind<TComponent extends CustomComponent<TElement>, TElement extends HTMLElement = HTMLElement>($el: JQuery<TElement>): TComponent;
    static jQueryPlugin<TExtras extends JQueryPluginExtras, TElement extends HTMLElement = HTMLElement>(controllerName: string, extras?: TExtras, preInit?: JQueryPluginPreInitFn<TElement>): JQueryPluginFn<TElement> & TExtras;
    /**
     * Returns a function that can act as an initializer for the component
     */
    protected static jQueryInitFn<TElement extends HTMLElement = HTMLElement>(preInit?: JQueryPluginPreInitFn<TElement>): (this: JQuery<TElement>) => JQuery<TElement>;
    static jQueryComponentControllerFn(): GetIwControllerFn;
    readonly el: TElement;
    readonly id: string;
    protected readonly idPrefix: string;
    constructor($el: JQuery<TElement>);
    /**
     * Returns a CSS selector style string with the tag name and ID representing the component host element.
     *
     * Example: iw-component#some-id--1
     */
    getDebugIdentifier(): string;
    protected getDebugIdentifierById(): string;
    protected attributeError(attributeName: string, message: string, required?: boolean): AttributeError;
    protected attributeInvalidError(attributeName: string, reason: string, value: any): AttributeInvalidError;
    protected requiredAttributeError(attributeName: string): AttributeRequiredError;
}