hy-general-list.tsx

export interface ListItemValue {
  description: string;
  id: string;
  imageAlt: string;
  imageUrl: string;
  label: string;
  subLabel: string;
  date: string;
  tag: string;
  title: string;
  type: string;
  url: string;
  target: boolean;
}

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

@Component({
  tag: 'hy-general-list',
  styleUrl: 'hy-general-list.scss',
  shadow: true,
})
export class HyGeneralList {
  @Prop() type: GeneralListTypes = GeneralListTypes.list;
  @Prop() blank: boolean = true;
  @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', `hy-general-list--style-${this.type}`].join(' ');

    let listData = this._dataItems;
    if (typeof this._dataItems === 'object') {
      listData = Object.values(this._dataItems);
    }
    return (
      <ul class={classAttributes}>
        {listData &&
          listData.map((item) => (
            <li>
              <hy-general-list-item
                target={this.blank}
                data-location={item.url}
                description={item.description}
                id={item.id}
                imageAlt={item.imageAlt}
                imageUrl={item.imageUrl}
                item-title={item.title}
                label={item.label}
                sub-label={item.subLabel}
                tag={item.tag}
                date={item.date}
                type={item.type}
                url={item.url}
                list-style={this.type}
              ></hy-general-list-item>
            </li>
          ))}
      </ul>
    );
  }
}