import { Component, Element, h, Prop, State } from '@stencil/core';
export class ScStackedListRow {
  constructor() {
    this.target = '_self';
    this.mobileSize = 600;
    this.hasPrefix = false;
    this.hasSuffix = false;
  }
  componentDidLoad() {
    // Only run if ResizeObserver is supported.
    if ('ResizeObserver' in window) {
      var ro = new window.ResizeObserver(entries => {
        entries.forEach(entry => {
          this.width = entry.contentRect.width;
        });
      });
      ro.observe(this.el);
    }
  }
  handleSlotChange() {
    this.hasPrefix = !!this.el.querySelector('.list-row__prefix [slot="prefix"]');
    this.hasSuffix = !!this.el.querySelector('[slot="suffix"]');
  }
  render() {
    const Tag = this.href ? 'a' : 'div';
    return (h(Tag, { href: this.href, target: this.target, part: "base", class: {
        'list-row': true,
        'list-row--has-prefix': this.hasPrefix,
        'list-row--has-suffix': this.hasSuffix,
        'breakpoint-lg': this.width >= this.mobileSize,
      } },
      h("span", { class: "list-row__prefix" },
        h("slot", { name: "prefix", onSlotchange: () => this.handleSlotChange() })),
      h("slot", { onSlotchange: () => this.handleSlotChange() }),
      h("span", { class: "list-row__suffix" },
        h("slot", { name: "suffix", onSlotchange: () => this.handleSlotChange() }))));
  }
  static get is() { return "sc-stacked-list-row"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-stacked-list-row.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-stacked-list-row.css"]
  }; }
  static get properties() { return {
    "href": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "href",
      "reflect": false
    },
    "target": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "target",
      "reflect": false,
      "defaultValue": "'_self'"
    },
    "mobileSize": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "mobile-size",
      "reflect": false,
      "defaultValue": "600"
    }
  }; }
  static get states() { return {
    "width": {},
    "hasPrefix": {},
    "hasSuffix": {}
  }; }
  static get elementRef() { return "el"; }
}
