AEM UI Component

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".

Installation

``
npm i @3share/ui-component
`

Example

$3

`



`

$3

`
import { Component, descriptor } from '@3share/ui-component';

@descriptor({
selector: '[data-cmp-is="Slideshow"]', // this is the selector the decorator will use to instantiate this class.
})
class Slideshow extends Component {
...

constructor(cmpRef: HTMLElement) {
super(cmpRef);

/ Logs the DOM reference to the component itself. /
console.log(this.$cmp);
/*
Logs and object with all the hooks found on this component.
{ slides: HTMLElement[], clickButton: HTMLElement[], }
*/
console.log(this.$elements);

this.$elements?.slides.forEach((slide) => {
slide.addEventListener('mouseenter', this.someEventHandler);
});

this.$elements?.button[0].addEventListener('mouseenter', this.someClickHandler);
}

private someEventHandler(event: MouseEvent):void {}

private this.someClickHandler(event: MouseEvent):void {}
}

export default Slideshow;
``