import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { FormLayout } from '@sankhyalabs/ezui/dist/collection/utils';

const snkViewRepresentationCss = ".sc-snk-view-representation-h{display:block}.svg-container.sc-snk-view-representation{display:flex;width:185px;height:125px;border-radius:8px;background-color:#f7f7f7;padding:10px 12px;box-sizing:border-box;position:relative}.svg-container__background.sc-snk-view-representation{display:flex;flex-direction:column;width:100%}.svg-container__header.sc-snk-view-representation{display:flex;gap:2px;margin-bottom:12px}.svg-container__circle.sc-snk-view-representation{width:9px;height:9px;border-radius:50%}.svg-container__circle--red.sc-snk-view-representation{background-color:#ed7678}.svg-container__circle--yellow.sc-snk-view-representation{background-color:#eddb76}.svg-container__circle--green.sc-snk-view-representation{background-color:#7ad08e}.svg-container__section.sc-snk-view-representation{width:100%}.svg-container__collumn.sc-snk-view-representation{width:100%;display:flex;flex-direction:column}.svg-container__inline.sc-snk-view-representation{display:flex;flex-direction:row;gap:6px}.svg-container__line.sc-snk-view-representation{height:13px;border-radius:4px;background-color:#d9d9d9;margin-bottom:4px}.svg-container__line--short.sc-snk-view-representation{width:39.68px;height:7px;border-radius:3.5px}.svg-container__line--long.sc-snk-view-representation{width:100%}";

const SnkViewRepresentation = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    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 style() { return snkViewRepresentationCss; }
}, [2, "snk-view-representation", {
    "mode": [8]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["snk-view-representation"];
  components.forEach(tagName => { switch (tagName) {
    case "snk-view-representation":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, SnkViewRepresentation);
      }
      break;
  } });
}

export { SnkViewRepresentation as S, defineCustomElement as d };
