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

function camelToSnakeCase(camelStr) {
  return camelStr.split(/(?=[A-Z])/).map(s => s.toLowerCase()).join('-');
}

/** Handle formatting. Currently supports the following special characters:
 * - `&t;` - Adds tab (2 spaces)
 */
const docsSpecialReplace = (val) => {
  // Add any new mappings here and update function docstring
  const specialCharacters = {
    '&t;': '  '
  };
  if (val) {
    let result = val.slice();
    Object.keys(specialCharacters).forEach((char) => {
      const regex = new RegExp(char, 'g');
      result = result.replace(regex, specialCharacters[char]);
    });
    return result;
  }
};

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

const DocsCodeDisplay = /*@__PURE__*/ proxyCustomElement(class DocsCodeDisplay extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.component = '';
    this.slotContent = '';
    this.appliedProps = {};
  }
  get reduceProps() {
    return Object.keys(this.appliedProps).reduce((accumulator, key) => {
      const val = this.appliedProps[key];
      const snakeKey = 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 (h(Host, null, h("h2", null, "Code Example"), h("blockquote", null, h("p", null, "When using the Vue component, the name will be PascalCase rather than snake-case. e.g. BsTooltip rather than bs-tooltip.")), h("pre", { class: "language-javascript" }, h("code", null, `<${this.component}${this.reduceProps}${isSlotEmpty ? ' /' : ''}>
  ${this.slotContent && docsSpecialReplace(this.slotContent)}
${isSlotEmpty ? '' : `</${this.component}>`}`))));
  }
  static get style() { return docsCodeDisplayCss; }
}, [0, "docs-code-display", {
    "component": [1],
    "slotContent": [1, "slot-content"],
    "appliedProps": [16]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["docs-code-display"];
  components.forEach(tagName => { switch (tagName) {
    case "docs-code-display":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, DocsCodeDisplay);
      }
      break;
  } });
}

export { DocsCodeDisplay as D, docsSpecialReplace as a, camelToSnakeCase as c, defineCustomElement as d };

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