hy-general-list.tsx

export interface ListItemValue {
  description: string;
  id: string;
  imageAlt: string;
  imageUrl: string;
  label: string;
  title: string;
  type: string;
  url: string;
}

import {Component, Element, h, Prop, Watch} from '@stencil/core';

@Component({
  tag: 'hy-general-list',
  styleUrl: 'hy-general-list.scss',
  shadow: true,
})
export class HyGeneralList {
  @Prop() dataItems: ListItemValue[] | string;
  private _dataItems: ListItemValue[];
  @Element() el: HTMLElement;

  @Watch('dataItems')
  arrayDataWatcher(newValue: ListItemValue[] | string) {
    if (typeof newValue === 'string') {
      this._dataItems = JSON.parse(newValue);
    } else {
      this._dataItems = newValue;
    }
  }

  componentWillLoad() {
    this.arrayDataWatcher(this.dataItems);
  }

  render() {
    const classAttributes = ['hy-general-list'].join(' ');

    return (
      <ul class={classAttributes}>
        {this._dataItems.map((item) => (
          <li>
            <hy-general-list-item
              data-location={item.url}
              description={item.description}
              id={item.id}
              imageAlt={item.imageAlt}
              imageUrl={item.imageUrl}
              item-title={item.title}
              label={item.label}
              type={item.type}
              url={item.url}
            ></hy-general-list-item>
          </li>
        ))}
      </ul>
    );
  }
}