Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
export interface ListItemValue {
id: string;
label: string;
type: string;
title: string;
description: string;
url: string;
}
import {Component, 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[];
//@State() listItems: Array<object> = [];
@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 [
<div class={classAttributes}>
{this._dataItems.map((x) => {
return (
<div>
{x.title}
{x.description}
{x.label}
{x.id}
{x.url}
{x.type}
</div>
);
})}
</div>,
];
}
}
/*
componentDidLoad() {
this._dataItems = JSON.parse(this.dataItems);
console.log(this._dataItems);
let items = [];
//this._dataItems.forEach((item) => {
//}
this.listItems = items;
}
<hy-process-flow-box
class={classItem}
variant={processVariant}
box-number={index + 1}
box-title={x.heading}
box-description={x.description}
intermediate-step-title={x.step}
step-state={stepState}
number-term={this.numberTerm}
/>
* */