import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const docsPropDisplayCss = "docs-prop-display {\n  border-block-end: 1px solid var(--bs-border);\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  height: 100%;\n  max-height: 50vh;\n  overflow-y: auto;\n  padding: 0.25rem;\n  scrollbar-width: none;\n}\ndocs-prop-display::-webkit-scrollbar {\n  width: 0px;\n}\ndocs-prop-display bs-label :where(label,legend) {\n  --label-color: var(--bs-ink-invert);\n}\ndocs-prop-display :where(h2) {\n  color: var(--bs-ink-invert);\n}\n@container (min-width: 957px) {\n  docs-prop-display {\n    border-block-end-color: transparent;\n    max-height: 100%;\n  }\n}";

const DocsPropDisplay = /*@__PURE__*/ proxyCustomElement(class DocsPropDisplay extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.componentProps = [];
  }
  get sortedProps() {
    const added = new Set();
    const standardProps = [
      ...this.componentProps.filter(it => it.type == 'boolean'),
      ...this.componentProps.filter(it => it.type == 'string' || it.type.startsWith('string |') || it.type.endsWith('| string')),
      ...this.componentProps.filter(it => it.type == 'number')
    ];
    standardProps.forEach(it => added.add(it.name));
    return [...standardProps, ...this.componentProps.filter(it => !added.has(it.name))];
  }
  getTag(prop) {
    const { type, attr, values } = prop;
    if (type == 'boolean')
      return 'bs-switch';
    if (type == 'number' || type == 'string' || type.startsWith('string ') || type.endsWith('string')) {
      return 'bs-input-field';
    }
    if (!type.endsWith('[]'))
      return 'bs-select-field';
    /** this should cover custom props w/ mapTo */
    if (!attr && (values === null || values === void 0 ? void 0 : values.length))
      return 'bs-select-field';
    return null;
  }
  getProps(prop, tag) {
    const { currentValue, name, type, values } = prop;
    switch (tag) {
      case 'bs-input-field':
        return type == 'number' ?
          { label: name, name, type: 'number', value: currentValue } :
          { label: name, name, value: currentValue };
      case 'bs-select-field':
        return { data: values, label: name, name, value: currentValue };
      case 'bs-switch':
        return { checked: currentValue, label: name, name };
      default:
        return {};
    }
  }
  render() {
    return (h(Host, null, h("h2", null, "Props"), this.sortedProps.map(it => {
      const Tag = this.getTag(it);
      return Tag ? h(Tag, Object.assign({}, this.getProps(it, Tag))) : null;
    })));
  }
  static get style() { return docsPropDisplayCss; }
}, [0, "docs-prop-display", {
    "componentProps": [16]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["docs-prop-display"];
  components.forEach(tagName => { switch (tagName) {
    case "docs-prop-display":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, DocsPropDisplay);
      }
      break;
  } });
}

export { DocsPropDisplay as D, defineCustomElement as d };

//# sourceMappingURL=docs-prop-display2.js.map