import { css, LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { LineMedium, LineType, lineColor, lineWidth } from "../index.js";
import { customElement } from "../../decorator.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let ObcVerticalLine = class extends LitElement {
  constructor() {
    super(...arguments);
    this.medium = LineMedium.normal;
    this.lineType = LineType.fluid;
    this.length = 1;
  }
  render() {
    if (this.lineType === LineType.connector) {
      const length2 = this.length * 24;
      return html`<svg
        width="24"
        height="${length2}"
        viewBox="0 0 24 ${length2}"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <line
          y1="0"
          x1="12"
          y2="${length2}"
          x2="12"
          stroke-width="1"
          stroke="var(--element-neutral-color)"
          stroke-dasharray="4,2"
          stroke-dashoffset="2"
        />
      </svg> `;
    }
    const length = this.length * 24 + 1;
    const color = lineColor(this.medium);
    const width = lineWidth(this.lineType);
    return html`
      <div class="wrapper" style="width: 24px; height: ${this.length * 24}px;">
        <svg
          class="line"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 -.5  24 ${length}"
          width="24"
          height=${length}
        >
          <line
            y1="-.5"
            x1="12"
            y2="${length - 0.5}"
            x2="12"
            stroke-width=${width}
            stroke="var(${color.inner})"
          />
          <line
            y1="-.5"
            x1=${12 - 0.5 - width / 2}
            y2="${length - 0.5}"
            x2=${12 - 0.5 - width / 2}
            stroke-width="1"
            stroke="var(${color.outer})"
          />
          <line
            y1="-.5"
            x1=${12 + 0.5 + width / 2}
            y2="${length - 0.5}"
            x2=${12 + 0.5 + width / 2}
            stroke-width="1"
            stroke="var(${color.outer})"
          />
        </svg>
      </div>
    `;
  }
};
ObcVerticalLine.styles = css`
    :host {
      display: block;
      line-height: 0;
    }

    svg {
      position: relative;
      top: -0.5px;
      left: -12px;
    }
  `;
__decorateClass([
  property({ type: String })
], ObcVerticalLine.prototype, "medium", 2);
__decorateClass([
  property({ type: String })
], ObcVerticalLine.prototype, "lineType", 2);
__decorateClass([
  property({ type: Number })
], ObcVerticalLine.prototype, "length", 2);
ObcVerticalLine = __decorateClass([
  customElement("obc-vertical-line")
], ObcVerticalLine);
export {
  ObcVerticalLine
};
//# sourceMappingURL=vertical-line.js.map
