@3share/ui-component/src/lib/ui-component.d.ts

A simple helper Class to save time while creating component registrations and DOM references to internal element using the Adobe's approach with `data-cmp-is="Somecomponent` and the reference with hooks `data-cmp-hook-somecomponent="nameOfElement"`.

interface Hooks {
    [k: string]: HTMLElement[] | null;
}
interface Descriptor {
    selector: string;
}
/**
 * Abstract class for managing repetitive definitions and initialization tasks in components.
 *
 * This abstract class provides a standardized structure for managing component initialization
 * and DOM element caching.
 *
 * @public $cmp - The root HTMLElement representing the component.
 * @public $elements - An object containing cached DOM elements accessed by their hooks.
 *
 * @example
 * // Component Markup Example
 * // HTML:
 * // <div data-cmp-is="ClassNameHandler">
 * //   <button data-cmp-hook-class-name-handler="hookname">Button</button>
 * // </div>
 * //
 * // JavaScript:
 * // class MyComponent extends Component {
 * //   constructor(cmp) {
 * //     super(cmp);
 * //     console.log(this.$elements.hookname); // Access the cached DOM node
 * //   }
 * // }
 *
 * @abstract
 */
export declare abstract class Component {
    /**
     * The prefix for data attributes used to identify component hooks.
     * @private
     * @readonly
     */
    private static readonly CMP_HOOK;
    /**
     * The name of the HTML element.
     * @private
     */
    private elementName;
    /**
     * The name of the HTML element with dashes.
     * @private
     */
    private elementDashName;
    /**
     * The root element of the component.
     * @protected
     */
    protected $cmp: HTMLElement;
    /**
     * Object containing cached DOM elements.
     * @protected
     */
    protected $elements: Hooks | undefined;
    /**
     * Creates an instance of Component.
     * @param {Element} cmp The root element of the component.
     */
    protected constructor(cmp: Element);
    /**
     * Prevents multiple initializations.
     * @private
     */
    private initialize;
    /**
     * Stores the hooked DOM elements and attaches them to the $elements Object.
     * @private
     */
    private cacheElements;
}
export declare function descriptor({ selector }: Descriptor): (target: new (element: Element) => void) => void;
export {};