import { Component, Host, Prop, h, Element } from '@stencil/core';
import { createColorClasses } from '../../utils/theme';
/**
 * @part native - The native HTML button, anchor, or div element that wraps all child elements.
 */
export class GascoCard {
  constructor() {
    /**
     * If `true`, the user cannot interact with the card.
     */
    this.disabled = false;
    /**
     * card direction, default is "vertical".
     */
    this.direction = 'vertical';
  }
  connectedCallback() {
    if (this.direction === 'horizontal' || this.direction === 'horizontal-reverse') {
      this.presentHorizontal();
    }
  }
  presentHorizontal() {
    const newContainer = document.createElement('div');
    newContainer.classList.add('wrap-horizontal');
    [...this.el.children].filter(child => {
      if (child.tagName !== 'IMG') {
        return newContainer.appendChild(child);
      }
    });
    this.el.appendChild(newContainer);
  }
  render() {
    return (h(Host, { class: createColorClasses(this.color, {
        'card-disabled': this.disabled,
        [`card-${this.direction}`]: true,
      }) },
      h("div", { class: "card-native", part: "native" },
        h("slot", null))));
  }
  static get is() { return "gasco-card"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["gasco-card.md.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["gasco-card.md.css"]
  }; }
  static get properties() { return {
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Color",
        "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never>",
        "references": {
          "Color": {
            "location": "import",
            "path": "../../interface"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"success\"`, `\"warning\"` and `\"danger\"`."
      },
      "attribute": "color",
      "reflect": true
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "If `true`, the user cannot interact with the card."
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "direction": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'horizontal' | 'horizontal-reverse' | 'vertical'",
        "resolved": "\"horizontal\" | \"horizontal-reverse\" | \"vertical\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": "card direction, default is \"vertical\"."
      },
      "attribute": "direction",
      "reflect": true,
      "defaultValue": "'vertical'"
    }
  }; }
  static get elementRef() { return "el"; }
}
