import { h } from '@stencil/core';
import { FormLayout } from '@sankhyalabs/ezui/dist/collection/utils';
export class SnkViewRepresentation {
  constructor() {
    this.mode = FormLayout.SIDE_BY_SIDE;
  }
  renderCascadeLayout() {
    return (h("div", { class: "svg-container__collumn" }, [...Array(3)].map(() => (h("div", { class: "svg-container__section" }, h("div", { class: "svg-container__line svg-container__line--short" }), h("div", { class: "svg-container__line svg-container__line--long" }))))));
  }
  renderSideBySideLayout() {
    return (h("div", { class: "svg-container__inline" }, [...Array(2)].map(() => this.renderCascadeLayout())));
  }
  render() {
    return (h("div", { class: "svg-container ez-margin-left--small" }, h("div", { class: "svg-container__background" }, h("div", { class: "svg-container__header" }, h("div", { class: "svg-container__circle svg-container__circle--red" }), h("div", { class: "svg-container__circle svg-container__circle--yellow" }), h("div", { class: "svg-container__circle svg-container__circle--green" })), this.mode === FormLayout.CASCADE
      ? this.renderCascadeLayout()
      : this.renderSideBySideLayout())));
  }
  static get is() { return "snk-view-representation"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() {
    return {
      "$": ["snk-view-representation.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["snk-view-representation.css"]
    };
  }
  static get properties() {
    return {
      "mode": {
        "type": "any",
        "mutable": false,
        "complexType": {
          "original": "FormLayout",
          "resolved": "FormLayout",
          "references": {
            "FormLayout": {
              "location": "import",
              "path": "@sankhyalabs/ezui/dist/collection/utils"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Define o layout do componente: 'CASCADE' ou 'SIDE_BY_SIDE'"
        },
        "attribute": "mode",
        "reflect": false,
        "defaultValue": "FormLayout.SIDE_BY_SIDE"
      }
    };
  }
}
