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, State, Watch, Host} 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; @Prop() truncateDescription: boolean = true; @Prop() truncateLimit: number = 140; private _dataItems: ListItemValue[]; @Element() el: HTMLElement; @State() hasSidebar: boolean = false; @Watch('dataItems') arrayDataWatcher(newValue: ListItemValue[] | string) { if (typeof newValue === 'string') { this._dataItems = JSON.parse(newValue); } else { this._dataItems = newValue; } } componentWillLoad() { this.arrayDataWatcher(this.dataItems); const hyMainDiv = this.el.closest('.hy-main'); if (hyMainDiv) { if (hyMainDiv.classList.contains('with-sidebar')) { this.hasSidebar = true; } } } render() { const classAttributes = [ 'hy-general-list', this.hasSidebar ? 'hy-general-list--with-sidebar' : '', `hy-general-list--style-${this.type}`, ].join(' '); let listData = this._dataItems; if (typeof this._dataItems === 'object') { listData = Object.values(this._dataItems); } function truncate(str, n) { return str.length > n ? str.substr(0, n - 1) + '...' : str; } return ( <Host> <ul class={classAttributes}> {listData && listData.map((item) => ( <li> <hy-general-list-item has-sidebar={this.hasSidebar} target={this.blank} data-location={item.url} description={ this.truncateDescription ? truncate(item.description, this.truncateLimit) : 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> <hy-box mb="1.75, 1.75, 2, 2.5" /> </Host> ); } }