import { h, Fragment } from "@stencil/core";
export class DgaMetric {
    constructor() {
        this.label = '';
        this.Style = 'small-chart';
        this.percentage = '0%';
        this.showFeaturedIcon = true;
        this.featuredIcon = (h("i", { class: "hgi-stroke hgi-trade-up", style: { fontSize: "24px" } })); // Default icon
        this.showChart = true;
        this.showInfo = true;
        this.showActions = true;
        this.showSecondaryAction = true;
        this.showMoreButton = true;
        this.changeProps = {
            type: '01',
            trend: 'positive',
        };
        this.onPrimaryAction = () => { };
        this.onSecondaryAction = () => { };
        this.onExpandAction = () => { };
        this.changeIcons = {
            '01': {
                positive: 'arrow-up-02',
                negative: 'arrow-down-02',
            },
            '02': {
                positive: 'trade-up',
                negative: 'trade-down',
            },
        };
    }
    render() {
        return (h("div", { key: 'af1d8eba87813343302f27579f2feaa26f2af024', class: `dga-metric`, "data-chart-size": this.Style }, h("div", { key: '01b2353d619270e7b974bdaf52c3ee9162e76fe3', class: "dga-metric__head" }, h("div", { key: 'd343b39810049fe85f3830630dce811c32a95c5b', class: "dga-metric__head-content" }, this.showFeaturedIcon && (h("div", { key: 'bf1dd44e0421a9844f9f03a6e02863eef58a699f', class: "featured-icon featured-icon--light-brand featured-icon--circle featured-icon--sm" }, this.featuredIcon)), this.label && h("span", { key: '3dbf12636466437e99f43c64801d8f59c6c97fca', class: "dga-metric__head-content-text" }, this.label)), this.showMoreButton && h("dga-button", { key: 'd4df017dd1f55ad27e1583a9c5658fffbc603ed9', variant: "subtle", iconOnly: true, leadIcon: true, leadIconType: "more-vertical", leadIconProps: {
                variant: "stroke",
                type: "rounded"
            }, onClick: this.onExpandAction })), h("div", { key: '1a33adb3ba89b780066a08e8cf7ecb220b8fb6f5', class: "dga-metric__body" }, h("div", { key: '96a7a1f9a76aff94e812153505c84b0c8b23e371', class: "dga-metric__content" }, h("h3", { key: '15974db86c43d0804dcf72921a32b9c6ac421147', class: "dga-metric__content-percentage" }, this.percentage), this.showInfo && (h("div", { key: '992d77f4764098197fde0ca943bf0a4c2bd2b3aa', class: "dga-metric__content-change", "data-change-trend": this.changeProps.trend }, h("span", { key: '6bdff4233ecfde7d0e899c4dea2ee016eab5ada8', class: "dga-metric__content-change-icon" }, h("dga-icon", { key: 'd140919f632f002da552ca85d1c1844f8f814bd3', icon: this.changeIcons[this.changeProps.type][this.changeProps.trend], type: 'rounded', variant: 'stroke', size: 24 })), h("span", { key: '3b415df9b1f5687ddb80cb4469f4bc0ec0eb691c', class: "dga-metric__content-change-value" }, Math.abs(100), "%"), h("span", { key: 'bbe67fa425f1ca9a0a1be91ab1374ca85ea0b49d', class: "dga-metric__content-change-period" }, "vs last month")))), this.showChart && (h("div", { key: '41cc036b3ce6ab48c4a2aa6ae3a5d3d30d05b635', class: "dga-metric__chart" }, h("dga-metric-chart", Object.assign({ key: '8906150d685ab7d59b548f82892d4a4f50d3414d' }, this.chartProps, { size: this.Style === 'small-chart' ? 'sm' : 'lg' }))))), this.showActions && (h(Fragment, { key: '85e75592b2f645cb9313e543a5db839fc907cf97' }, h("div", { key: 'a1a9df1f4d6c431bb56bd2335c47a4a1e259fb8f', class: "dga-metric__divider" }), h("div", { key: '2e531d9622c189681e96395612a7141069d6b2b3', class: "dga-metric__actions" }, this.showSecondaryAction && h("dga-button", { key: 'ff631fcf36bdeeb662017a0a43acc220dd977739', variant: "subtle", iconOnly: true, leadIcon: true, leadIconType: "settings-02", leadIconProps: {
                variant: "stroke",
                type: "rounded"
            }, onClick: this.onSecondaryAction }), h("dga-button", { key: '0a17d10e3026b6d017a83f9d77084b29d5c84760', variant: "secondary-outline", class: "dga-metric__actions--primary", label: "View Report", onClick: this.onPrimaryAction }))))));
    }
    static get is() { return "dga-metric-v2"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-metric.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-metric.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false,
                "defaultValue": "''"
            },
            "Style": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'small-chart' | 'large-chart'",
                    "resolved": "\"large-chart\" | \"small-chart\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "style",
                "reflect": false,
                "defaultValue": "'small-chart'"
            },
            "percentage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "percentage",
                "reflect": false,
                "defaultValue": "'0%'"
            },
            "showFeaturedIcon": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-featured-icon",
                "reflect": false,
                "defaultValue": "true"
            },
            "featuredIcon": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "HTMLElement | any",
                    "resolved": "any",
                    "references": {
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "featured-icon",
                "reflect": false,
                "defaultValue": "(<i class=\"hgi-stroke hgi-trade-up\" style={{ fontSize: \"24px\" }} />)"
            },
            "showChart": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-chart",
                "reflect": false,
                "defaultValue": "true"
            },
            "showInfo": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-info",
                "reflect": false,
                "defaultValue": "true"
            },
            "showActions": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-actions",
                "reflect": false,
                "defaultValue": "true"
            },
            "showSecondaryAction": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-secondary-action",
                "reflect": false,
                "defaultValue": "true"
            },
            "showMoreButton": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-more-button",
                "reflect": false,
                "defaultValue": "true"
            },
            "changeProps": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "{\n    type: '01' | '02';\n    trend: 'positive' | 'negative';\n  }",
                    "resolved": "{ type: \"01\" | \"02\"; trend: \"negative\" | \"positive\"; }",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{\n      type: '01',\n      trend: 'positive',\n    }"
            },
            "chartProps": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IChartProps",
                    "resolved": "IChartProps",
                    "references": {
                        "IChartProps": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric-v2/dga-metric-v2.tsx",
                            "id": "src/components/dga-metric-v2/dga-metric-v2.tsx::IChartProps"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "trend": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ITrend",
                    "resolved": "ITrend",
                    "references": {
                        "ITrend": {
                            "location": "local",
                            "path": "/home/mamoud/Documents/temp/components/platform-code-cross-platform-storybook/packages/core/src/components/dga-metric-v2/dga-metric-v2.tsx",
                            "id": "src/components/dga-metric-v2/dga-metric-v2.tsx::ITrend"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "onPrimaryAction": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => { }"
            },
            "onSecondaryAction": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => { }"
            },
            "onExpandAction": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => { }"
            }
        };
    }
}
//# sourceMappingURL=dga-metric-v2.js.map
