'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-128c5169.js');
const docsPlaygroundCommon = require('./docs-playground-common-7fc01113.js');

const docsCodeDisplayCss = "docs-code-display{overflow-x:auto}docs-code-display h2{color:var(--bs-ink-invert)}";

const DocsCodeDisplay = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.component = '';
    this.slotContent = '';
    this.appliedProps = {};
  }
  get reduceProps() {
    return Object.keys(this.appliedProps).reduce((accumulator, key) => {
      const val = this.appliedProps[key];
      const snakeKey = docsPlaygroundCommon.camelToSnakeCase(key);
      if (val) {
        if (typeof val === 'boolean') {
          return `${accumulator} ${snakeKey}`;
        }
        return `${accumulator} ${snakeKey}="${this.appliedProps[key]}"`;
      }
      return accumulator;
    }, '');
  }
  render() {
    const isSlotEmpty = this.slotContent === '';
    return (index.h(index.Host, null, index.h("h2", null, "Code Example"), index.h("blockquote", null, index.h("p", null, "When using the Vue component, the name will be PascalCase rather than snake-case. e.g. BsTooltip rather than bs-tooltip.")), index.h("pre", { class: "language-javascript" }, index.h("code", null, `<${this.component}${this.reduceProps}${isSlotEmpty ? ' /' : ''}>
  ${this.slotContent && docsPlaygroundCommon.docsSpecialReplace(this.slotContent)}
${isSlotEmpty ? '' : `</${this.component}>`}`))));
  }
};
DocsCodeDisplay.style = docsCodeDisplayCss;

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 = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    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 (index.h(index.Host, null, index.h("h2", null, "Props"), this.sortedProps.map(it => {
      const Tag = this.getTag(it);
      return Tag ? index.h(Tag, Object.assign({}, this.getProps(it, Tag))) : null;
    })));
  }
};
DocsPropDisplay.style = docsPropDisplayCss;

exports.docs_code_display = DocsCodeDisplay;
exports.docs_prop_display = DocsPropDisplay;

//# sourceMappingURL=docs-code-display_2.cjs.entry.js.map