@programmerg/bs-elements 0.1.0

package/src/base/BsAccordion.js

@@ -0,0 +1,116 @@
+import BsElement from "../core/BsElement.js";
+
+export default 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);

package/src/base/BsAlert.js

@@ -0,0 +1,91 @@
+import { Alert } from "bootstrap";
+import BsElement from "../core/BsElement.js";
+
+export default 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);

package/src/base/BsButton.js

@@ -0,0 +1,129 @@
+import { Button } from "bootstrap";
+import BsElement from "../core/BsElement.js";
+
+export default 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);

package/src/base/BsCarousel.js

@@ -0,0 +1,216 @@
+import { Carousel } from "bootstrap";
+import BsElement from "../core/BsElement.js";
+
+export default 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);

package/src/base/BsCollapse.js

@@ -0,0 +1,84 @@
+import { Collapse } from "bootstrap";
+import BsElement from "../core/BsElement.js";
+
+export default 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);