@programmerg/bs-elements 0.1.0

package/dist/bs-elements.esm.js

@@ -0,0 +1,1721 @@
+import { Alert, Button, Carousel, Collapse, Dropdown, Modal, Offcanvas, Tooltip, Popover, Tab, Toast } from 'bootstrap';
+
+class ReactiveElement extends HTMLElement {
+  
+  constructor() {
+    super();
+
+    // reactive internals
+    this.__propValues = Object.create(null);
+    this.__changed = new Set();
+    this.__updateScheduled = false;
+    this.__reflecting = false;
+
+    this.createReactiveProperties();
+  }
+
+  /* ------------------------------------------------------------------
+   * Reactive helpers
+   * ------------------------------------------------------------------ */
+
+  static get properties() {
+    return {};
+  }
+
+  static __propertyToAttributeMap;
+
+  static __attributeToPropertyMap;
+
+  static propertyToAttribute(property) {
+    if (this.__propertyToAttributeMap.size < 1) this.observedAttributes();
+    return this.__propertyToAttributeMap.get(property);
+  }
+
+  static attributeToProperty(attribute) {
+    if (this.__attributeToPropertyMap.size < 1) this.observedAttributes();
+    return this.__attributeToPropertyMap.get(attribute);
+  }
+
+  static get observedAttributes() {
+    if (this.__attributeToPropertyMap === undefined) {
+      this.__propertyToAttributeMap = new Map();
+      this.__attributeToPropertyMap = new Map();
+      
+      // memoize mappings
+      const props = this.properties || this.properties?.() || {};
+      for (const [prop, def] of Object.entries(props)) {
+        const attr = def?.attribute ?? prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+        this.__propertyToAttributeMap.set(prop, attr);
+        this.__attributeToPropertyMap.set(attr, prop);
+      }
+    }
+    return [...this.__attributeToPropertyMap.keys()];
+  }
+
+  getAttrValue(attr, type) {
+    const value = this.getAttribute(attr);
+
+    switch (type) {
+      case Boolean: 
+        return this.hasAttribute(attr) && (value === "" || value === "true");
+      case Number:
+        const n = Number(value);
+        return Number.isNaN(n) ? undefined : n;
+      default:
+        return value === null ? undefined : value;
+    }
+  }
+
+  setAttrValue(attr, value, type) {
+    if (value === null || value === undefined || (type === Boolean && !value)) {
+      this.removeAttribute(attr);
+    } else {
+      this.setAttribute(attr, (type === Boolean) ? "" : String(value));
+    }
+  }
+
+  createReactiveProperties() {
+    const props = this.constructor.properties || this.constructor.properties?.() || {};
+    for (const [prop, def] of Object.entries(props)) {
+      this.createReactiveProperty(prop, def);
+    }
+  }
+
+  createReactiveProperty(prop, def) {
+    const attr = this.constructor.propertyToAttribute(prop);
+
+    // avoid redefining existing properties
+    if (!Object.getOwnPropertyDescriptor(this.constructor.prototype, prop)) {
+      Object.defineProperty(this.constructor.prototype, prop, {
+        get() {
+          return this.__propValues[prop];
+        },
+        set(value) {
+          const old = this.__propValues[prop];
+          if (old === value) return;
+
+          this.__propValues[prop] = value;
+          
+          // reflect props to attributes
+          const shouldReflect = def.reflect;
+          if (shouldReflect) {
+            this.__reflecting = true;
+            this.setAttrValue(attr, value, def.type);
+            queueMicrotask(() => (this.__reflecting = false));
+          }
+
+          this.__changed.add(prop);
+          this.scheduleUpdate();
+        },
+        configurable: true,
+        enumerable: true
+      });
+    }
+  
+    // seed initial values from attributes or defaults
+    this.__propValues[prop] = this.getAttrValue(attr, def.type) ?? def.default;
+  }
+  
+  childrenToSlots(html) {
+    var template = document.createElement("template");
+    template.innerHTML = html;
+
+    const slots = template.content.querySelectorAll("slot");
+    for (const slot of slots) {
+      const slotChildren = this.querySelectorAll(`[slot="${slot.name}"]`);
+      slotChildren.forEach(el => el.removeAttribute("slot"));
+      slot.replaceWith(...slotChildren);
+    }
+
+    this.replaceChildren(template.content);
+  }
+
+  /* ------------------------------------------------------------------
+   * Custom Element Lifecycle
+   * ------------------------------------------------------------------ */
+
+  connectedCallback() {
+    this.firstUpdated();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  firstUpdated() {}
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    if (this.__reflecting) return;
+
+    const prop = this.constructor.attributeToProperty(attrName);
+
+    const props = this.constructor.properties || this.constructor.properties?.() || {};
+    const def = props[prop] || {};
+
+    const old = this.__propValues[prop];
+    const value = this.getAttrValue(attrName, def.type);
+    if (old === value) return;
+    this.__propValues[prop] = value;
+    this.__changed.add(prop);
+    this.scheduleUpdate();
+  }
+
+  scheduleUpdate() {
+    if (this.__updateScheduled) return;
+    this.__updateScheduled = true;
+    queueMicrotask(() => {
+      this.__updateScheduled = false;
+      const changed = new Set(this.__changed);
+      this.__changed.clear();
+      try {
+        this.updated(changed);
+      } catch (e) {
+        console.error(e);
+      }
+    });
+  }
+
+  updated(changed) {
+    changed.forEach(prop => {
+      const fn = `_update${prop.charAt(0).toUpperCase() + prop.slice(1)}State`;
+      if (typeof this[fn] === "function") this[fn]();
+    });
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  disconnectedCallback() {}
+
+}
+
+/**
+ * Reactive Element with Bootstrap integration
+ */
+class BsElement extends ReactiveElement {
+
+  constructor() {
+    super();
+
+    this.bs = null;
+  }
+  
+  static __bsProps = [];
+
+  static get bsProps() {
+    if (this.__bsProps === undefined) {
+      this.__bsProps = [];
+
+      // memoize related props
+      const props = this.properties || this.properties?.() || {};
+      for (const [prop, def] of Object.entries(props)) {
+        if ((def.attribute ?? '').startsWith('data-bs-')) this.__bsProps.push(prop);
+      }
+    }
+    return this.__bsProps;
+  }
+  
+  /**
+   * Must return a Bootstrap JS constructor (e.g. bootstrap.Modal, bootstrap.Collapse)
+   */
+  static get bs() {
+    return null;
+  }
+
+  createInstance() {
+    if (!this.constructor.bs || this.bs) return;
+
+    const options = this.constructor.bsProps.reduce((acc, key) => {
+      if (key in this.__propValues) acc[key] = this.__propValues[key];
+      return acc;
+    }, {}) || {};
+
+    this.bs = new this.constructor.bs(this, options);
+  }
+
+  dispose() {
+    if (!this.bs) return;
+
+    this.bs?.dispose();
+    this.bs = null;
+  }
+
+  connectedCallback() {
+    // try to guess prop initial values from markup when it's not set
+    const props = this.properties || this.properties?.() || {};
+    for (const [prop, def] of Object.entries(props)) {
+      if (this.__propValues[prop] !== undefined) continue;
+      this[prop] = def.values?.find(v => this.className.includes(v));
+    }
+    
+    super.connectedCallback();
+    this.createInstance();
+  }
+
+  updated(changed) {
+    super.updated(changed);
+
+    const shouldReinit = this.constructor.bsProps.some(p => changed.has(p));
+    if (shouldReinit) {
+      this.dispose();
+      this.createInstance();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.dispose();
+  }
+
+}
+
+class BsAccordion extends BsElement {
+
+  static get properties() {
+    return {
+      flush: {
+        description: "Flag to indicate if the alert is dismissible.",
+        type: Boolean,
+        default: false
+      },
+      alwaysOpen: {
+        description: "Flag to indicate if the alert is dismissible.",
+        type: Boolean,
+        default: false
+      },
+      active: {
+        description: "Controls the visibility of the alert.",
+        type: Number,
+        default: 0
+      }
+    };
+  }
+
+  toggle(idx) {
+    this.children[idx].querySelector('.accordion-button').click();
+  }
+
+  firstUpdated() {
+    this.classList.add("accordion");
+
+    this._fixMarkup();
+    this._updateAlwaysOpenState();
+    this._updateFlushState();
+    this._updateActiveState(true);
+  }
+
+  _fixMarkup() {
+    if (!this.id) this.id = crypto.randomUUID();
+    Array.from(this.children).forEach((item, idx) => {
+      item.classList.add('accordion-item');
+
+      let header = item.querySelector('.accordion-header');
+      if (!header) {
+        header = document.createElement('h2');
+        header.classList.add('accordion-header');
+        item.insertBefore(header, item.firstChild);
+      }
+
+      let button = item.querySelector('.accordion-button, [data-bs-toggle="collapse"]');
+      if (!button) {
+        button = document.createElement('h2');
+      }
+      button.classList.add('accordion-button');
+      button.setAttribute('data-bs-toggle', 'collapse');
+      console.log(button);
+      if (!button.hasAttribute('type')) button.setAttribute('type', 'button');
+      if (button.parentElement !== header) header.appendChild(button);
+
+      let collapse = item.querySelector('.accordion-collapse, .collapse');
+      if (!collapse) {
+        collapse = document.createElement('div');
+      }
+      collapse.classList.add('accordion-collapse', 'collapse');
+      const collapseId = collapse.id || `${this.id}-collapse-${idx}`;
+      collapse.id = collapseId;
+
+      // Ensure collapse content is wrapped in .accordion-body
+      let body = collapse.querySelector('.accordion-body');
+      if (!body) {
+        body = document.createElement('div');
+        body.classList.add('accordion-body');
+        
+        while (collapse.firstChild) {
+          body.appendChild(collapse.firstChild);
+        }
+
+        collapse.appendChild(body);
+      }
+
+      // Wire button -> collapse
+      button.setAttribute('data-bs-target', `#${collapseId}`);
+      button.setAttribute('aria-controls', collapseId);
+
+      // Set initial expanded/collapsed classes and aria state based on active
+      const activeIdx = Number(this.active) || 0;
+      if (idx === activeIdx) {
+        collapse.classList.add('show');
+        button.classList.remove('collapsed');
+        button.setAttribute('aria-expanded', 'true');
+      } else {
+        collapse.classList.remove('show');
+        if (!button.classList.contains('collapsed')) button.classList.add('collapsed');
+        button.setAttribute('aria-expanded', 'false');
+      }
+    });
+  }
+
+  _updateAlwaysOpenState() {
+    this.querySelectorAll('.collapse').forEach(collapse => {
+      if (!this.alwaysOpen) collapse.setAttribute('data-bs-parent', `#${this.id}`);
+      else collapse.removeAttribute('data-bs-parent');
+    });
+  }
+
+  _updateFlushState() {
+    this.classList.toggle('accordion-flush', this.flush);
+  }
+
+  _updateActiveState(isFirstUpdated = false) {
+    if (!isFirstUpdated) this.toggle(this.active);
+  }
+
+}
+
+customElements.define("bs-accordion", BsAccordion);
+
+class BsAlert extends BsElement {
+  
+  static get properties() {
+    return {
+      color: {
+        description: "The color theme for the alert.",
+        type: String,
+        default: "success",
+        values: ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+      },
+      dismissible: {
+        description: "Flag to indicate if the alert is dismissible.",
+        type: Boolean,
+        default: false
+      },
+      fade: {
+        description: "Flag to enable fade transition.",
+        type: Boolean,
+        default: true
+      },
+      open: {
+        description: "Controls the visibility of the alert.",
+        type: Boolean,
+        default: true
+      }
+    };
+  }
+
+  static get bs() {
+    return Alert;
+  }
+
+  constructor() {
+    super();
+    
+    // this is an external state managed by bootstrap
+    Object.defineProperty(this.constructor.prototype, "open", {
+      get() {
+        return this.classList.contains("show");
+      },
+    });
+  }
+
+  close() {
+    return this.bs?.close();
+  }
+
+  firstUpdated() {
+    this.classList.add("alert");
+    if (!this.hasAttribute("role")) this.setAttribute("role", "alert");
+    
+    this._updateColorState();
+    this._updateFadeState();
+    this._updateDismissibleState();
+    this._updateOpenState(true);
+  }
+
+  _updateColorState() {
+    this.classList.remove(
+      ...this.constructor.properties
+        .color.values.map(v => "alert-" + v)
+    );
+    this.classList.add("alert-" + this.color);
+  }
+
+  _updateFadeState() {
+    this.classList.toggle("fade", this.fade);
+  }
+
+  _updateDismissibleState() {
+    this.classList.toggle("alert-dismissible", this.dismissible);
+    const btn = this.querySelector(":scope > .btn-close");
+    const markup = `<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
+    
+    if (this.dismissible) {
+      if (!btn) this.insertAdjacentHTML("beforeend", markup);
+    } else {
+      if (btn) btn.remove();
+    }
+  }
+
+  _updateOpenState(isFirstUpdate = false) {
+    this.classList.toggle("show", this.__propValues['open']);
+  }
+
+}
+
+customElements.define("bs-alert", BsAlert);
+
+class BsButton extends BsElement {
+  
+  static get properties() {
+    return {
+      active: {
+        description: "Indicates if the component is active.",
+        type: Boolean,
+        default: false
+      },
+      color: {
+        description: "Color theme for the button.",
+        type: String,
+        default: undefined,
+        values: ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+      },
+      outline: {
+        description: "Indicates if the component should have an outline.",
+        type: Boolean,
+        default: false
+      },
+      size: {
+        description: "Size of the Button.",
+        type: String,
+        default: undefined,
+        values: ["sm", "lg"]
+      },
+      toggle: {
+        description: "Bootstrap toggle type.",
+        type: String,
+        default: undefined,
+        values: ["button", "collapse", "dropdown", "modal", "offcanvas", "tab"]
+      },
+      target: {
+        description: "Target selector for toggles (data-bs-target).",
+        type: String,
+        default: undefined
+      }
+    }
+  }
+
+  static get bs() {
+    return Button;
+  }
+
+  constructor() {
+    super();
+
+    // this is an external state managed by bootstrap
+    Object.defineProperty(this.constructor.prototype, "active", {
+      get() {
+        return this.classList.contains("active");
+      },
+    });
+  }
+
+  // toggle() {
+  //   return this.bs?.toggle();
+  // }
+
+  firstUpdated() {
+    //this.classList.add("btn");
+
+    // default type to prevent accidental form submit
+    if (!this.hasAttribute("type")) this.setAttribute("type", "button");
+
+    this._updateColorState();
+    this._updateOutlineState();
+    this._updateSizeState();
+    this._updateToggleState();
+    this._updateTargetState();
+    this._updateActiveState(true);
+  }
+
+  _updateColorState() {
+    this.classList.remove(
+      ...this.constructor.properties
+        .color.values.map(v => "btn-" + v)
+    );
+    this.classList.remove(
+      ...this.constructor.properties
+        .color.values.map(v => "btn-outline-" + v)
+    );
+
+    const variant = this.outline ? `btn-outline-${this.color}` : `btn-${this.color}`;
+    this.classList.add(variant);
+  }
+
+  _updateOutlineState() {
+    this._updateColorState();
+  }
+
+  _updateSizeState() {
+    this.classList.remove(
+      ...this.constructor.properties
+        .size.values.map(v => "btn-" + v)
+    );
+    if (this.size) this.classList.add("btn-" + this.size);
+  }
+
+  _updateToggleState() {
+    if (this.toggle) this.setAttribute("data-bs-toggle", this.toggle);
+    else this.removeAttribute("data-bs-toggle");
+  }
+
+  _updateTargetState() {
+    if (this.target) this.setAttribute("data-bs-target", this.target);
+    else this.removeAttribute("data-bs-target");
+  }
+
+  _updateActiveState(isFirstUpdate = false) {
+    if (isFirstUpdate) {
+      this.classList.toggle("active", !!this.__propValues['active']);
+
+      if (this.toggle === "button") {
+        this.setAttribute("aria-pressed", this.active ? "true" : "false");
+      } else {
+        this.removeAttribute("aria-pressed");
+      }
+    } else {
+      this.toggle();
+    }
+  }
+
+}
+
+customElements.define("bs-button", BsButton);
+
+class BsCarousel extends BsElement {
+  
+  static get properties() {
+    return {
+      fade: {
+        description: "",
+        type: Boolean,
+        default: false
+      },
+      indicators: {
+        description: "",
+        type: Boolean,
+        default: true
+      },
+      interval: {
+        description: "The time interval (in milliseconds) between automatic transitions of the carousel items.",
+        type: Number,
+        default: 5000,
+        attribute: 'data-bs-interval'
+      },
+      keyboard: {
+        description: "A Boolean indicating whether the carousel should respond to keyboard navigation.",
+        type: Boolean,
+        default: true,
+        attribute: 'data-bs-keyboard'
+      },
+      pause: {
+        description: "A Boolean indicating whether automatic cycling of the carousel should pause on hover.",
+        type: Boolean,
+        default: true,
+        attribute: 'data-bs-pause'
+      },
+      ride: {
+        description: "A Boolean indicating whether the carousel should automatically cycle through items.",
+        type: Boolean,
+        default: true,
+        attribute: 'data-bs-ride'
+      },
+      touch: {
+        description: "A Boolean indicating whether the carousel should support left/right swipe interactions on touchscreen",
+        type: Boolean,
+        default: true,
+        attribute: 'data-bs-touch'
+      },
+      wrap: {
+        description: "A Boolean indicating whether the carousel should cycle continuously or have hard stops",
+        type: Boolean,
+        default: true,
+        attribute: 'data-bs-wrap'
+      }
+    }
+  }
+  
+  static get bs() {
+    return Carousel;
+  }
+
+  cycle() {
+    return this.bs?.cycle();
+  }
+
+  next() {
+    return this.bs?.next();
+  }
+
+  nextWhenVisible() {
+    return this.bs?.nextWhenVisible();
+  }
+
+  pause() {
+    return this.bs?.pause();
+  }
+
+  prev() {
+    return this.bs?.prev();
+  }
+
+  to(idx) {
+    return this.bs?.to(idx);
+  }
+
+  firstUpdated() {
+    this.classList.add("carousel");
+    this.classList.add("slide");
+    
+    this._fixMarkup();
+    this._updateFadeState();
+    this._updateIndicatorsState();
+  }
+
+  _fixMarkup() {
+    // ensure inner wrapper
+    let inner = this.querySelector(":scope > .carousel-inner");
+    if (!inner) {
+      inner = document.createElement("div");
+      inner.className = "carousel-inner";
+
+      // move suitable children into inner
+      const toMove = [];
+      for (const child of Array.from(this.childNodes)) {
+        if (child.nodeType !== Node.ELEMENT_NODE) continue;
+        const el = child;
+        if (el.classList && (el.classList.contains("carousel-indicators") || el.classList.contains("carousel-control-prev") || el.classList.contains("carousel-control-next") || el.classList.contains("carousel-inner"))) continue;
+        toMove.push(el);
+      }
+
+      toMove.forEach(el => {
+        // if element is already a carousel-item, just append
+        if (el.classList && el.classList.contains("carousel-item")) inner.appendChild(el);
+        else {
+          const wrap = document.createElement("div");
+          wrap.className = "carousel-item";
+          wrap.appendChild(el);
+          inner.appendChild(wrap);
+        }
+      });
+
+      // insert inner at the end (indicators may be inserted before it later)
+      this.appendChild(inner);
+    }
+
+    // ensure every child of inner has the proper classes
+    const items = Array.from(inner.children).filter(n => n.nodeType === Node.ELEMENT_NODE);
+    items.forEach((it, i) => {
+      it.classList.add("carousel-item");
+      if (!inner.querySelector(".carousel-item.active") && i === 0) {
+        it.classList.add("active");
+      }
+    });
+
+    // indicators and controls
+    this._ensureControls();
+  }
+
+  _renderIndicators() {
+    // remove existing indicators container
+    let indicators = this.querySelector(":scope > .carousel-indicators");
+    if (indicators) indicators.remove();
+
+    const inner = this.querySelector(":scope > .carousel-inner");
+    if (!inner) return;
+
+    indicators = document.createElement("div");
+    indicators.className = "carousel-indicators";
+
+    const slides = Array.from(inner.children).filter(n => n.nodeType === Node.ELEMENT_NODE);
+    slides.forEach((_, idx) => {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.setAttribute("aria-label", `Slide ${idx + 1}`);
+      btn.className = idx === 0 ? "active" : "";
+      btn.addEventListener("click", () => this.to(idx));
+      indicators.appendChild(btn);
+    });
+
+    // insert indicators before inner
+    this.insertBefore(indicators, inner);
+    this._renderIndicatorsActive();
+  }
+
+  _ensureControls() {
+    // prev
+    if (!this.querySelector(":scope > .carousel-control-prev")) {
+      const prev = document.createElement("button");
+      prev.className = "carousel-control-prev";
+      prev.type = "button";
+      prev.innerHTML = `<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>`;
+      prev.addEventListener("click", () => this.prev());
+      this.appendChild(prev);
+    }
+
+    // next
+    if (!this.querySelector(":scope > .carousel-control-next")) {
+      const next = document.createElement("button");
+      next.className = "carousel-control-next";
+      next.type = "button";
+      next.innerHTML = `<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>`;
+      next.addEventListener("click", () => this.next());
+      this.appendChild(next);
+    }
+  }
+
+  _renderIndicatorsActive() {
+    const indicators = this.querySelector(":scope > .carousel-indicators");
+    const inner = this.querySelector(":scope > .carousel-inner");
+    if (!indicators || !inner) return;
+
+    const slides = Array.from(inner.children).filter(n => n.nodeType === Node.ELEMENT_NODE);
+    const activeIndex = slides.findIndex(s => s.classList.contains("active"));
+
+    Array.from(indicators.children).forEach((btn, idx) => {
+      btn.classList.toggle("active", idx === activeIndex);
+      if (idx === activeIndex) btn.setAttribute("aria-current", "true");
+      else btn.removeAttribute("aria-current");
+    });
+  }
+
+  _updateFadeState() {
+    this.classList.toggle("carousel-fade", !!this.fade);
+  }
+
+  _updateIndicatorsState() {
+    if (this.indicators) {
+      this._renderIndicators();
+    } else {
+      const el = this.querySelector(".carousel-indicators");
+      if (el) el.remove();
+    }
+  }
+
+}
+
+customElements.define("bs-carousel", BsCarousel);
+
+class BsCollapse extends BsElement {
+  
+  static get properties() {
+    return {
+      open: {
+        description: "Toggle visible state",
+        type: Boolean,
+        default: false
+      },
+      horizontal: {
+        description: "Toggle horizontal collapsing",
+        type: Boolean,
+        default: false
+      },
+      parent: {
+        description: "Selector of the container element",
+        type: String,
+        default: undefined,
+        attribute: "data-bs-parent"
+      },
+      toggle: {
+        description: "Toggles the collapsible element",
+        type: Boolean,
+        default: false,
+        attribute: "data-bs-toggle"
+      }
+    };
+  }
+
+  static get bs() {
+    return Collapse;
+  }
+
+  constructor() {
+    super();
+    
+    // this is an external state managed by bootstrap
+    Object.defineProperty(this.constructor.prototype, "open", {
+      get() {
+        return this.classList.contains("show");
+      },
+    });
+  }
+
+  hide() {
+    return this.bs?.hide();
+  }
+
+  show() {
+    return this.bs?.show();
+  }
+
+  toggle() {
+    return this.bs?.toggle();
+  }
+
+  firstUpdated() {
+    this.classList.add("collapse");
+
+    this._updateHorizontalState();
+    this._updateOpenState(true);
+  }
+
+  _updateHorizontalState() {
+    if (this.horizontal) {
+      this.classList.add("collapse-horizontal");
+      this.style.width ||= "0px";
+    } else {
+      this.classList.remove("collapse-horizontal");
+      this.style.width = "";
+    }
+  }
+
+  _updateOpenState(isFirstUpdate = false) {
+    if (isFirstUpdate) this.classList.toggle("show", this.__propValues['open']);
+    else this.toggle();
+  }
+  
+}
+
+customElements.define("bs-collapse", BsCollapse);
+
+class BsDropdown extends BsElement {
+  
+  static get properties() {
+    return {
+      autoClose: {
+        description: "A boolean indicating whether the Dropdown should automatically close when an item is selected.",
+        type: Boolean,
+        default: true,
+        attribute: "data-bs-auto-close"
+      },
+      direction: {
+        description: "The direction of the Dropdown menu",
+        type: String,
+        default: "down",
+        values: ["down", "start", "end", "up", "down-center", "up-center"]
+      },
+      open: {
+        description: "A boolean indicating whether the Dropdown is currently open.",
+        type: Boolean,
+        default: false
+      }
+    };
+  }
+
+  static get bs() {
+    return Dropdown;
+  }
+
+  constructor() {
+    super();
+    
+    // this is an external state managed by bootstrap
+    Object.defineProperty(this.constructor.prototype, "open", {
+      get() {
+        return this.classList.contains("show");
+      },
+    });
+  }
+
+  hide() {
+    return this.bs?.hide();
+  }
+
+  show() {
+    return this.bs?.show();
+  }
+
+  toggle() {
+    return this.bs?.toggle();
+  }
+
+  update() {
+    return this.bs?.update();
+  }
+  
+  firstUpdated() {
+    this.classList.add("dropdown");
+
+    // Ensure toggle has the proper data attribute
+    const toggle = this.querySelector(
+      `:scope > [data-bs-toggle="dropdown"], :scope > .dropdown-toggle`
+    );
+    if (toggle && !toggle.hasAttribute("data-bs-toggle")) {
+      toggle.setAttribute("data-bs-toggle", "dropdown");
+    }
+
+    this._fixMarkup();
+    this._updateDirectionState();
+    this._updateOpenState(true);
+  }
+
+  _fixMarkup() {
+    // Ensure bs-dropdown-menu children receive Bootstrap class
+    const menu = this.querySelector(":scope > div, :scope > .dropdown-menu");
+    if (menu && !menu.classList.contains("dropdown-menu")) {
+      menu.classList.add("dropdown-menu");
+    }
+  }
+
+  _updateDirectionState() {
+    this.classList.remove(
+      ...this.constructor.properties
+        .direction.values.map(v => "drop" + v)
+    );
+    this.classList.add("drop" + this.direction);
+  }
+
+  _updateOpenState(isFirstUpdate = false) {
+    if (isFirstUpdate) this.classList.toggle("show", this.__propValues['open']);
+    else this.toggle();
+  }
+
+}
+
+customElements.define("bs-dropdown", BsDropdown);
+
+class BsModal extends BsElement {
+  
+  static get properties() {
+    return {
+      focus: {
+        description: "Automatically puts focus on the modal with it first opens.",
+        type: Boolean,
+        default: false,
+        attribute: "data-bs-focus"
+      },
+      backdrop: {
+        description: "Controls the visibility of the modal backdrop.",
+        type: Boolean,
+        default: true,
+        attribute: "data-bs-backdrop"
+      },
+      centered: {
+        description: "Auto-positioning of the modal to ensure its centered in the viewport.",
+        type: Boolean,
+        default: false
+      },
+      fade: {
+        description: "Control the fade effect when opening or closing the modal.",
+        type: Boolean,
+        default: true
+      },
+      fullscreen: {
+        description: "Determines whether or no the modal is rendered in fullscreen mode.",
+        type: String,
+        default: "",
+        values: ["true", "sm", "md", "lg", "xl", "xxl"]
+      },
+      header: {
+        description: "Customize the modal header content.",
+        type: String,
+        default: undefined
+      },
+      open: {
+        description: "Used to control the modal state",
+        type: Boolean,
+        default: false
+      },
+      keyboard: {
+        description: "Ccontrol whether the modal can be closed using the ESC key.",
+        type: Boolean,
+        default: true,
+        attribute: "data-bs-keyboard"
+      },
+      scrollable: {
+        description: "Determines if the modal content should be scrollable.",
+        type: Boolean,
+        default: false
+      },
+      size: {
+        description: "Specify the size of the modal.",
+        type: String,
+        default: "",
+        values: ["sm", "lg", "xl"]
+      }
+    };
+  }
+
+  static get bs() {
+    return Modal;
+  }
+
+  constructor() {
+    super();
+    
+    // this is an external state managed by bootstrap
+    Object.defineProperty(this.constructor.prototype, "open", {
+      get() {
+        return this.classList.contains("show");
+      },
+    });
+  }
+
+  handleUpdate() {
+    return this.bs?.handleUpdate();
+  }
+
+  hide() {
+    return this.bs?.hide();
+  }
+
+  show() {
+    return this.bs?.show();
+  }
+
+  toggle() {
+    return this.bs?.toggle();
+  }
+  
+  firstUpdated() {
+    this.classList.add("modal");
+    if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "-1");
+
+    this._fixMarkup();
+    this._updateFadeState();
+    this._updateCenteredState();
+    this._updateScrollableState();
+    this._updateSizeState();
+    this._updateFullscreenState();
+    this._updateOpenState(true);
+  }
+
+  _fixMarkup() {
+    let dialog = this.querySelector(":scope > .modal-dialog");
+    if (dialog) return;
+
+    dialog = document.createElement("div");
+    dialog.classList.add("modal-dialog");
+
+    const content = document.createElement("div");
+    content.classList.add("modal-content");
+
+    let header = this.querySelector(":scope > .modal-header");
+    if (!header) {
+      header = document.createElement("div");
+      header.classList.add("modal-header");
+      header.insertAdjacentHTML("afterbegin", `<h5 class="modal-title">${this.header}</h5>`);
+    }
+    content.appendChild(header);
+
+    if (header.querySelector(".btn-close")) {
+      header.insertAdjacentHTML("beforeend", 
+        `<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>`
+      );
+    }
+
+    let body = this.querySelector(":scope > .modal-body");
+    if (!body) {
+      body = document.createElement("div");
+      body.classList.add("modal-body");
+    }
+    content.appendChild(body);
+
+    let footer = this.querySelector(":scope > .modal-footer");
+    if (footer) {
+      content.appendChild(footer);
+    }
+
+    while (this.firstChild) {
+      body.appendChild(this.firstChild);
+    }
+
+    dialog.appendChild(content);
+    this.appendChild(dialog);
+  }
+
+  _updateHeaderState() {
+    const title = this.querySelector(":scope > .modal-dialog > .modal-header > .modal-title");
+    if (title) {
+      title.textContent = this.header;
+    }
+  }
+
+  _updateFadeState() {
+    this.classList.toggle("fade", this.fade);
+  }
+
+  _updateCenteredState() {
+    const dialog = this.querySelector(":scope > .modal-dialog");
+    dialog?.classList.toggle("modal-dialog-centered", this.centered);
+  }
+
+  _updateScrollableState() {
+    const dialog = this.querySelector(":scope > .modal-dialog");
+    dialog?.classList.toggle("modal-dialog-scrollable", this.scrollable);
+  }
+
+  _updateSizeState() {
+    const dialog = this.querySelector(":scope > .modal-dialog");
+    dialog?.classList.remove(
+      ...this.constructor.properties
+        .size.values.map(v => "modal-" + v)
+    );
+    if (this.size) dialog?.classList.add(`modal-${this.size}`);
+  }
+  
+  _updateFullscreenState() {
+    const dialog = this.querySelector(":scope > .modal-dialog");
+    dialog?.classList.remove(
+      ...this.constructor.properties
+        .fullscreen.values.map(v => "modal-fullscreen-" + v + "-down")
+    );
+    if (this.fullscreen) dialog?.classList.add(
+      this.fullscreen === "true"
+        ? "modal-fullscreen"
+        : `modal-fullscreen-${this.fullscreen}-down`
+    );
+  }
+
+  _updateOpenState(isFirstUpdate = false) {
+    if (isFirstUpdate) this.classList.toggle("show", this.__propValues['open']);
+    else this.toggle();
+  }
+
+}
+
+customElements.define("bs-modal", BsModal);
+
+class BsOffcanvas extends BsElement {
+  
+  static get properties() {
+    return {
+      backdrop: {
+        description: "Controls whether the backdrop is displayed behind the offcanvas.",
+        type: Boolean,
+        default: true,
+        attribute: "data-bs-backdrop"
+      },
+      fade: {
+        description: "Controls whether to use a fade animation when opening/closing the offcanvas.",
+        type: Boolean,
+        default: true
+      },
+      header: {
+        description: "The header content of the offcanvas.",
+        type: String,
+        default: ""
+      },
+      open: {
+        description: "Used to control the modal state",
+        type: Boolean,
+        default: false
+      },
+      keyboard: {
+        description: "Controls whether keyboard interaction is enabled for closing the offcanvas.",
+        type: Boolean,
+        default: true,
+        attribute: "data-bs-keyboard"
+      },
+      placement: {
+        description: "The placement of the offcanvas.",
+        type: String,
+        default: "start",
+        values: ["start", "end", "top", "bottom"]
+      },
+      scroll: {
+        description: "Controls whether to allow scrolling of the body when the offcanvas is open.",
+        type: Boolean,
+        default: false,
+        attribute: "data-bs-scroll"
+      },
+      size: {
+        description: "Specify the size of the modal.",
+        type: String,
+        default: "",
+        values: ["sm", "md", "lg", "xl", "xxl"]
+      }
+    }
+  }
+  
+  static get bs() {
+    return Offcanvas;
+  }
+
+  constructor() {
+    super();
+    
+    // this is an external state managed by bootstrap
+    Object.defineProperty(this.constructor.prototype, "open", {
+      get() {
+        return this.classList.contains("show");
+      },
+    });
+  }
+
+  hide() {
+    return this.bs?.hide();
+  }
+
+  show() {
+    return this.bs?.show();
+  }
+
+  toggle() {
+    return this.bs?.toggle();
+  }
+
+  firstUpdated() {
+    this.classList.add("offcanvas");
+    if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "-1");
+
+    this._fixMarkup();
+    this._updateFadeState();
+    this._updatePlacementState();
+    this._updateSizeState();
+    this._updateOpenState(true);
+  }
+
+  _fixMarkup() {
+    let header = this.querySelector(":scope > .offcanvas-header");
+    if (!header) {
+      header = document.createElement("div");
+      header.classList.add("offcanvas-header");
+      header.insertAdjacentHTML("afterbegin", `<h5 class="offcanvas-title">${this.header ?? ""}</h5>`);
+      header.insertAdjacentHTML("beforeend",
+        `<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>`
+      );
+      this.appendChild(header);
+    }
+
+    if (!header.querySelector(".btn-close")) {
+      header.insertAdjacentHTML("beforeend",
+        `<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>`
+      );
+    }
+
+    let body = this.querySelector(":scope > .offcanvas-body");
+    if (!body) {
+      body = document.createElement("div");
+      body.classList.add("offcanvas-body");
+      this.appendChild(body);
+    }
+
+    for (const node of Array.from(this.childNodes)) {
+      if (node === header || node === body) continue;
+      body.appendChild(node);
+    }
+  }
+
+  _updateHeaderState() {
+    const title = this.querySelector(":scope > .offcanvas-header > .offcanvas-title");
+    if (title) title.textContent = this.header ?? "";
+  }
+
+  _updateFadeState() {
+    this.classList.toggle("fade", this.fade);
+  }
+
+  _updatePlacementState() {
+    this.classList.remove(
+      ...this.constructor.properties
+        .placement.values.map(v => "offcanvas-" + v)
+    );
+    if (this.placement) this.classList.add(`offcanvas-${this.placement}`);
+  }
+
+  _updateSizeState() {
+    this.classList.remove(
+      ...this.constructor.properties
+        .size.values.map(v => "offcanvas-" + v)
+    );
+    if (this.size) this.classList.add(`offcanvas-${this.size}`);
+  }
+
+  _updateOpenState(isFirstUpdate = false) {
+    if (isFirstUpdate) this.classList.toggle("show", this.__propValues['open']);
+    else this.toggle();
+  }
+
+}
+
+customElements.define("bs-offcanvas", BsOffcanvas);
+
+class BsTooltip extends BsElement {
+  
+  static get properties() {
+    return {
+      animation: {
+        description: "Flag to enable animation for the tooltip.",
+        type: Boolean,
+        default: true,
+        attribute: "data-bs-animation"
+      },
+      title: {
+        description: "The title to be displayed within the tooltip.",
+        type: String,
+        default: "",
+        attribute: "data-bs-title"
+      },
+      delay: {	
+        description: "The delay for showing the tooltip (in milliseconds).",
+        type: Number,
+        default: 0,
+        attribute: "data-bs-delay"
+      },
+      html: {
+        description: "",
+        type: Boolean,
+        default: false,
+        attribute: "data-bs-html"
+      },
+      open: {
+        description: "Controls the visibility of the tooltip.",
+        type: Boolean,
+        default: false
+      },
+      placement: {
+        description: "The preferred placement of the tooltip.",
+        type: String,
+        default: "top",
+        attribute: "data-bs-placement"
+      },
+      trigger: {
+        description: "The trigger action to open/close the popover.",
+        type: String,
+        default: "click",
+        attribute: "data-bs-trigger"
+      },
+      container: {
+        description: "the popover’s HTML appears within that element.",
+        type: String,
+        default: "body",
+        attribute: "data-bs-container"
+      }
+    }
+  }
+
+  static get bs() {
+    return Tooltip;
+  }
+
+  constructor() {
+    super();
+    
+    // this is an external state managed by bootstrap
+    Object.defineProperty(this.constructor.prototype, "open", {
+      get() {
+        return this.bs?.tip && this.bs?.tip.classList.contains('show');
+      },
+    });
+  }
+  
+  disable() {
+    return this.bs?.disable();
+  }
+  
+  enable() {
+    return this.bs?.enable();
+  }
+  
+  hide() {
+    return this.bs?.hide();
+  }
+
+  show() {
+    return this.bs?.show();
+  }
+
+  toggle() {
+    return this.bs?.toggle();
+  }
+
+  toggleEnabled() {
+    return this.bs?.toggleEnabled();
+  }
+
+  setContent() {
+    return this.bs?.setContent();
+  }
+
+  update() {
+    return this.bs?.update();
+  }
+
+  firstUpdated() {
+    if (!this.hasAttribute("data-bs-toggle")) this.setAttribute("data-bs-toggle", "tooltip");
+
+    this._updateOpenState(true);
+  }
+
+  _updateOpenState(isFirstUpdate = false) {
+    if (isFirstUpdate) this.classList.toggle("show", this.__propValues['open']);
+    else this.toggle();
+  }
+
+}
+
+customElements.define("bs-tooltip", BsTooltip);
+
+class BsPopover extends BsTooltip {
+  
+  static get properties() {
+    return {
+      ...super.constructor.properties,
+      content: {
+        description: "The content to be displayed within the popover.",
+        type: String,
+        default: "",
+        attribute: "data-bs-content"
+      }
+    }
+  }
+  
+  static get bs() {
+    return Popover;
+  }
+
+  firstUpdated() {
+    if (!this.hasAttribute("data-bs-toggle")) {
+      this.setAttribute("data-bs-toggle", "popover");
+    }
+
+    this._updateOpenState(true);
+  }
+}
+
+customElements.define("bs-popover", BsPopover);
+
+class BsTab extends BsElement {
+  
+  static get properties() {
+    return {
+      fade: {
+        description: "Control the fade effect when opening or closing the modal.",
+        type: Boolean,
+        default: true
+      },
+      active: {
+        description: "Whether the element is active or not",
+        type: Boolean,
+        default: false
+      }
+    }
+  }
+  
+  static get bs() {
+    return Tab;
+  }
+
+  constructor() {
+    super();
+
+    // this is an external state managed by bootstrap
+    Object.defineProperty(this.constructor.prototype, "active", {
+      get() {
+        return this.classList.contains("active");
+      },
+    });
+  }
+
+  show() {
+    return this.bs?.show();
+  }
+
+  firstUpdated() {
+    this.classList.add("tab-pane");
+    if (!this.hasAttribute("role")) this.setAttribute("role", "tabpanel");
+    if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
+
+    this._updateFadeState();
+    this._updateActiveState(true);
+  }
+
+  _updateFadeState() {
+    this.classList.toggle("fade", this.fade);
+  }
+
+  _updateActiveState(isFirstUpdate = false) {
+    const newState = this.__propValues["active"];
+    if (isFirstUpdate) {
+      this.classList.toggle("show", newState);
+      this.classList.toggle("active", newState);
+    } else {
+      if (newState) this.show();
+      else {
+        this.classList.toggle("show", false);
+        this.classList.toggle("active", false);
+      }
+    }
+  }
+
+}
+
+customElements.define("bs-tab", BsTab);
+
+class BsToast extends BsElement {
+  
+  static get properties() {
+    return {
+      color: {
+        description: "Color of the Toast background.",
+        type: String,
+        default: "",
+        values: ["", "primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+      },
+      header: {
+        description: "Customize the modal header content.",
+        type: String,
+        default: undefined
+      },
+      autohide: {
+        description: "Controls whether the Toast component autohides after a certain duration.",
+        type: Boolean,
+        default: false,
+        attribute: "data-bs-autohide"
+      },
+      delay: {
+        description: "The time delay (in milliseconds) before the Toast component autohides.",
+        type: Number,
+        default: 5000,
+        attribute: "data-bs-delay"
+      },
+      animation: {
+        description: "Controls whether the Toast component fades in and out.",
+        type: Boolean,
+        default: true,
+        attribute: "data-bs-animation"
+      },
+      open: {
+        description: "Controls whether the Toast component is initially open.",
+        type: Boolean,
+        default: true
+      },
+      dismissible: {
+        description: "Controls whether the Toast component is dismissible",
+        type: Boolean,
+        default: true
+      }
+    }
+  }
+  
+  static get bs() {
+    return Toast;
+  }
+
+  constructor() {
+    super();
+    
+    // this is an external state managed by bootstrap
+    Object.defineProperty(this.constructor.prototype, "open", {
+      get() {
+        return this.classList.contains("show");
+      },
+    });
+  }
+
+  hide() {
+    return this.bs?.hide();
+  }
+
+  show() {
+    return this.bs?.show();
+  }
+
+  isShown() {
+    return this.bs?.isShown();
+  }
+
+  firstUpdated() {
+    this.classList.add("toast");
+    if (!this.hasAttribute("role")) this.setAttribute("role", "alert");
+    if (!this.hasAttribute("aria-live")) this.setAttribute("aria-live", "assertive");
+    if (!this.hasAttribute("aria-atomic")) this.setAttribute("aria-atomic", "true");
+
+    this._fixMarkup();
+    this._updateHeaderState();
+    this._updateDismissibleState();
+    this._updateColorState();
+    this._updateOpenState(true);
+  }
+
+  _fixMarkup() {
+    let header = this.querySelector(":scope > .toast-header");
+    if (!header && this.header) {
+      header = document.createElement("div");
+      header.classList.add("toast-header");
+      
+      header.insertAdjacentHTML("afterbegin", `<strong class="me-auto">${this.header}</strong>`);
+      
+      this.appendChild(header);
+    }
+
+    let body = this.querySelector(":scope > .toast-body");
+    if (!body) {
+      body = document.createElement("div");
+      body.classList.add("toast-body");
+
+      for (let i = 0; i < this.childNodes.length; i++) {
+        if (this.childNodes[i].classList?.contains("toast-header")) continue;
+        body.appendChild(this.childNodes[i]);
+      }
+      
+      this.appendChild(body);
+    }
+  }
+
+  _updateHeaderState() {
+    let header = this.querySelector(":scope > .toast-header");
+    if (!header && this.header) {
+      this._fixMarkup();
+      header = this.querySelector(":scope > .toast-header");
+      header.textContent = this.header || "";
+    }
+    if (header && !this.header) {
+      header.remove();
+    }
+  }
+
+  _updateDismissibleState() {
+    const closeBtn = this.querySelector(".btn-close");
+    if (this.dismissible) {
+      if (!closeBtn) this.firstChild?.insertAdjacentHTML("beforeend",
+        `<button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="Close"></button>`
+      );
+    } else {
+      if (closeBtn) closeBtn.remove();
+    }
+  }
+
+  _updateColorState() {
+    this.classList.remove(
+      ...this.constructor.properties
+        .color.values.map(v => "bg-" + v)
+    );
+    if (this.color) this.classList.add("bg-" + this.color);
+
+    if (this.color === "" || this.color === "light" || this.color === "warning") {
+      this.classList.remove("text-white");
+    } else {
+      this.classList.add("text-white");
+    }
+  }
+  
+  _updateOpenState(isFirstUpdate = false) {
+    const newState = this.__propValues['open'];
+    if (isFirstUpdate) this.classList.toggle("show", newState);
+    else {
+      if (newState) this.show();
+      else this.hide();
+    }
+  }
+
+}
+
+customElements.define("bs-toast", BsToast);
+
+export { BsAccordion, BsAlert, BsButton, BsCarousel, BsCollapse, BsDropdown, BsModal, BsOffcanvas, BsPopover, BsTab, BsToast, BsTooltip };
+//# sourceMappingURL=bs-elements.esm.js.map