import { Component, Prop, h } from '@stencil/core';
/**
 * @slot content - Slot for additional information, such as paragraphs or lists.
 * @slot price - Slot for product price.
 */
export class TeliaProductCardHardware {
  constructor() {
    /** text alignment */
    this.alignment = 'center';
    this.dataTrackingId = 'telia-product-card-hardware';
  }
  isLeft() {
    return this.alignment === 'left';
  }
  concatLinkTitle(...args) {
    return args.filter(el => el !== undefined).join(' ');
  }
  render() {
    const cardClass = 'telia-product-card-hardware';
    return (h("telia-card-frame-link", { "data-testid": this.dataTestid, href: this.href, "link-title": this.concatLinkTitle(this.badgeTitle, this.preTitle, this.productTitle) },
      h("article", { class: {
          'telia-product-card-hardware': true,
          [`telia-product-card-hardware--${this.alignment}`]: this.isLeft(),
        } },
        h("telia-image", { class: cardClass + '__image', src: this.imgSrc, alt: ' ' }),
        h("div", { class: cardClass + '__content' },
          h("telia-heading", { tag: "h2", variant: "title-200" },
            h("span", { role: 'text' },
              this.badgeTitle && (h("span", { class: cardClass + '__badge' },
                h("telia-badge", { variant: this.badgeVariant || 'attention' }, this.badgeTitle))),
              h("span", { class: cardClass + '__pre-title' }, this.preTitle),
              h("span", { class: cardClass + '__title' }, this.productTitle))),
          h("div", { class: cardClass + '__additional' },
            h("slot", { name: 'content' })),
          h("div", { class: cardClass + '__price' },
            h("slot", { name: 'price' })))),
      h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get is() { return "telia-product-card-hardware"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["telia-product-card-hardware.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-product-card-hardware.css"]
  }; }
  static get properties() { return {
    "alignment": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "CardAlignment",
        "resolved": "\"center\" | \"left\"",
        "references": {
          "CardAlignment": {
            "location": "import",
            "path": "../../types/ProductCardVariants"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "text alignment"
      },
      "attribute": "alignment",
      "reflect": false,
      "defaultValue": "'center'"
    },
    "badgeTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "the badge title on top right corner"
      },
      "attribute": "badge-title",
      "reflect": false
    },
    "badgeVariant": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "BadgeVariantType",
        "resolved": "\"attention\" | \"error\" | \"information\" | \"neutral\" | \"not-available\" | \"special\" | \"special-offer\" | \"success\" | \"warning\"",
        "references": {
          "BadgeVariantType": {
            "location": "import",
            "path": "../../types/BadgeVariant"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The badge variant, adheres to the component by the same name"
      },
      "attribute": "badge-variant",
      "reflect": false
    },
    "dataTestid": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Test id set for web component host"
      },
      "attribute": "data-testid",
      "reflect": false
    },
    "href": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "the url for the a tag"
      },
      "attribute": "href",
      "reflect": false
    },
    "preTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The pre title of the product"
      },
      "attribute": "pre-title",
      "reflect": false
    },
    "productTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The title of the product"
      },
      "attribute": "product-title",
      "reflect": false
    },
    "imgSrc": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Specifies the path to the image that will be served to larger medias (above 1024 px)\nand as a fallback for legacy browsers"
      },
      "attribute": "img-src",
      "reflect": false
    }
  }; }
}
