@3share/ui-component/README.md

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

# 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

### HTML

```
<div data-cmp-is="Slideshow">
  <div data-cmp-hook-slideshow="slides"></div>
  <div data-cmp-hook-slideshow="slides"></div>
  <div data-cmp-hook-slideshow="slides"></div>
  <div data-cmp-hook-slideshow="slides"></div>

  <button data-cmp-hook-slideshow="clickButton">Click Here!</button>
</div>
```

### TypeScript

```
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;
```