import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { v as v4 } from './v4.js';

const bsIconGradientWrapperCss = "bs-icon-gradient-wrapper{display:inline-block}bs-icon-gradient-wrapper .svg-wrapper{display:inline-block}bs-icon-gradient-wrapper .svg-wrapper *{fill:inherit}";

const BsIconGradientWrapper$1 = /*@__PURE__*/ proxyCustomElement(class BsIconGradientWrapper extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    /** Observer for updating `viewBox` on child change. */
    this.mutationObserver = undefined;
    /** These are the exact color stops in Figma. */
    this.stops = [
      { offset: 0.1326, color: '#EE282A' },
      { offset: 0.5466, color: '#1C0087' },
      { offset: 0.9715, color: '#0086EA' }
    ];
    this._uniqueID = undefined;
    this.viewBox = '0 0 0 0';
  }
  componentDidLoad() {
    this.setViewBox();
    this.mutationObserverSetup();
  }
  /** Copy over `viewBox` settings from slot SVG to the gradient SVG. */
  setViewBox() {
    var _a;
    const svgElement = (_a = this.hostEl) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
    this.viewBox = svgElement === null || svgElement === void 0 ? void 0 : svgElement.getAttribute('viewBox');
  }
  /** Watch for target SVG changes to update `viewBox`. */
  mutationObserverSetup() {
    this.mutationObserver = new MutationObserver(this.setViewBox);
    this.mutationObserver.observe(this.hostEl, { childList: true });
  }
  /** Clean up the mutation observer. */
  disconnectedCallback() {
    var _a, _b;
    (_b = (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect) === null || _b === void 0 ? void 0 : _b.call(_a);
    this.mutationObserver = undefined;
  }
  /** Each SVG needs its own ID to maintain viewBox matching */
  get uniqueId() {
    if (!this._uniqueID) {
      this._uniqueID = `svg-gradient-${v4()}`;
    }
    return this._uniqueID;
  }
  render() {
    return (h(Host, null, h("span", { class: "svg-wrapper", style: { fill: `url(#${this.uniqueId})` }, "data-slot": true }, h("slot", null)), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: this.viewBox, width: "0", height: "0" }, h("linearGradient", { id: this.uniqueId, x1: "0", y1: "0", x2: "100%", y2: "100%", gradientUnits: "userSpaceOnUse" }, this.stops.map((stop) => (h("stop", { key: stop.offset, offset: stop.offset, "stop-color": stop.color })))))));
  }
  get hostEl() { return this; }
  static get style() { return bsIconGradientWrapperCss; }
}, [4, "bs-icon-gradient-wrapper", {
    "viewBox": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-icon-gradient-wrapper"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-icon-gradient-wrapper":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsIconGradientWrapper$1);
      }
      break;
  } });
}

const BsIconGradientWrapper = BsIconGradientWrapper$1;
const defineCustomElement = defineCustomElement$1;

export { BsIconGradientWrapper, defineCustomElement };

//# sourceMappingURL=bs-icon-gradient-wrapper.js.map