import { Component, Event, h, Prop } from '@stencil/core';
export class UxplInfoCard {
  componentWillLoad() {
  }
  componentDidLoad() {
  }
  render() {
    if (this.config) {
      return (h("host", { style: {
          "min-width": this.width ? this.width : '100%'
        } },
        h("div", { class: "info-card", style: {
            'min-width': this.width ? this.width : '435px',
            'min-height': this.height ? this.height : '224px',
            'height': this.height ? this.height : '224px'
          } },
          h("div", { class: "info-card-content", style: {
              'margin': this.margin ? this.margin : '15px'
            } },
            h("div", { class: "info-card-header" },
              h("span", { class: "heading" }, this.config.content.header)),
            h("div", { class: "info-card-data" },
              h("div", { class: "info-card-data-inner" },
                this.config.content.line1 ?
                  h("div", { class: "data-point" },
                    h("span", { class: "label", style: {
                        'width': this.labelWidth ? this.labelWidth : '150px',
                        'min-width': this.labelWidth ? this.labelWidth : '150px',
                        'max-width': this.labelWidth ? this.labelWidth : '150px'
                      } }, this.config.content.line1.label),
                    h("span", { class: "value", style: {
                        'width': this.valueWidth ? this.valueWidth : '200px',
                        'min-width': this.valueWidth ? this.valueWidth : '200px',
                        'max-width': this.valueWidth ? this.valueWidth : '200px'
                      } }, this.config.content.line1.value))
                  :
                    undefined,
                this.config.content.line2 ?
                  h("div", { class: "data-point" },
                    h("span", { class: "label", style: {
                        'width': this.labelWidth ? this.labelWidth : '150px',
                        'min-width': this.labelWidth ? this.labelWidth : '150px',
                        'max-width': this.labelWidth ? this.labelWidth : '150px'
                      } }, this.config.content.line2.label),
                    h("span", { class: "value", style: {
                        'width': this.valueWidth ? this.valueWidth : '200px',
                        'min-width': this.valueWidth ? this.valueWidth : '200px',
                        'max-width': this.valueWidth ? this.valueWidth : '200px'
                      } }, this.config.content.line2.value))
                  :
                    undefined)),
            h("div", { class: "foot-note" },
              h("span", { class: "note" }, this.config.content.note))),
          h("div", { class: "info-card-footer", style: {
              'padding-left': this.margin ? this.margin : '15px',
              'padding-right': this.margin ? this.margin : '15px'
            } },
            h("div", { class: "footer-item card-badge", style: {
                'background-color': this.config.footer.badge.backgroundColor,
                'max-width': this.config.footer.badge.maxWidth,
                'width': this.config.footer.badge.width
              } },
              h("div", { class: "badge-icon" },
                h("img", { src: this.config.footer.badge.icon })),
              h("div", { class: "badge-text" }, this.config.footer.badge.value)),
            this.config.footer.action.label != undefined
              ?
                (h("div", { class: "footer-item card-action", onClick: () => { this.action.emit(this.config.itemId); } },
                  h("div", { class: "action-text" }, this.config.footer.action.label),
                  h("div", { class: "action-icon" },
                    h("img", { src: this.config.footer.action.icon }))))
              :
                h("div", null)))));
    }
    else {
      return h("div", null);
    }
  }
  static get is() { return "uxpl-info-card"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-info-card.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-info-card.css"]
  }; }
  static get properties() { return {
    "config": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "UxplCardConfig",
        "resolved": "UxplCardConfig",
        "references": {
          "UxplCardConfig": {
            "location": "import",
            "path": "../../models/uxpl-card-config"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Card Config - see ../models/uxpl-card-config.tsx\r\n\r\nExample:\r\n\r\n{\r\n  itemId: '123456',\r\n  content: {\r\n    header: 'DIS_0000000032',\r\n    line1: {\r\n      label: 'Data source',\r\n      value: 'Discover - Analysis Config CDB'\r\n    },\r\n    line2: {\r\n      label: 'Business process',\r\n      value: 'Italy - GestioneAffidamento'\r\n    },\r\n    note: 'created 5 minutes ago by tdevlin@tibco.com'\r\n  },\r\n  footer: {\r\n    badge: {\r\n      value: 'Ready',\r\n      backgroundColor: '',\r\n      icon: '../svg/ic-done.svg'\r\n    },\r\n    action: 'View details'\r\n  }\r\n}"
      }
    },
    "width": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Width - eg 435px"
      },
      "attribute": "width",
      "reflect": false
    },
    "height": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Height - eg 224px"
      },
      "attribute": "height",
      "reflect": false
    },
    "margin": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Card Margin - eg 15px"
      },
      "attribute": "margin",
      "reflect": false
    },
    "labelWidth": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Data Label width - eg 150px"
      },
      "attribute": "label-width",
      "reflect": false
    },
    "valueWidth": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Data Value width - eg 200px"
      },
      "attribute": "value-width",
      "reflect": false
    }
  }; }
  static get events() { return [{
      "method": "action",
      "name": "action",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Card Actioned"
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
}
