role="switch" attribute, allowing screen readers to identify it as a toggleable control.`,
+ },
+ {
+ title: "State Representation",
+ description: `The aria-checked attribute dynamically reflects the toggle's state (on/off), providing real-time feedback to assistive technologies.`,
+ },
+ {
+ title: "Labeling",
+ description: `Toggles can be associated with descriptive labels using the aria-labelledby or aria-label attributes, enhancing clarity for screen reader users.`,
+ },
+
+ {
+ title: "Keyboard Navigation",
+ description: `The toggle supports keyboard navigation with TAB and ENTER keys, ensuring full accessibility for users who rely on keyboard input.`,
+ },
+ {
+ title: "Indeterminate State Accessibility",
+ description: `When a toggle is in an indeterminate state, it uses the aria-checked="mixed" attribute to inform assistive technologies of its unique status.`,
+ },
+ {
+ title: "Focus Management",
+ description: `The toggle is fully focusable and provides visual focus indicators, aiding users in tracking their navigation through the interface.`,
+ },
+ ];
+
+ static #featuresCards() {
+ const fragment = document.createDocumentFragment();
+
+ const description = document.createElement("p");
+ description.innerHTML = `Bootstrap Toggle is built with accessibility in mind. The implementation ensures seamless compatibility with screen readers, keyboard navigation, and other assistive technologies.`;
+ fragment.appendChild(description);
+
+ const container = document.createElement("div");
+ container.classList.add(
+ "row",
+ "row-cols-1",
+ "row-cols-md-2",
+ "row-cols-xl-3",
+ "g-4",
+ );
+ Accessibility.#features.forEach((feature) => {
+ const col = document.createElement("div");
+ col.classList.add("col");
+
+ const card = document.createElement("div");
+ card.classList.add("card");
+
+ const cardHeader = document.createElement("div");
+ cardHeader.classList.add("card-header");
+ cardHeader.textContent = feature.title;
+ card.appendChild(cardHeader);
+
+ const cardBody = document.createElement("div");
+ cardBody.classList.add("card-body");
+ const description = document.createElement("p");
+ description.classList.add("card-text");
+ description.innerHTML = feature.description;
+ cardBody.appendChild(description);
+ card.appendChild(cardBody);
+
+ col.appendChild(card);
+ container.appendChild(col);
+ });
+
+ fragment.appendChild(container);
+ return fragment;
+ }
+
+ static #wcagChecklist = [
+ {
+ criterion: "1.3.1 Info and Relationships",
+ url: "https://www.w3.org/TR/WCAG22/#info-and-relationships",
+ compliance: "Compliant",
+ evidence:
+ "role='switch', proper ARIA attributes, semantic structure",
+ },
+ {
+ criterion: "1.4.4 Resize Text",
+ url: "https://www.w3.org/TR/WCAG22/#resize-text",
+ compliance: "Compliant",
+ evidence: "Uses relative units, responsive design",
+ },
+ {
+ criterion: "2.1.1 Keyboard",
+ url: "https://www.w3.org/TR/WCAG22/#keyboard",
+ compliance: "Compliant",
+ evidence:
+ "Responds to Space and Enter keys, all functionality keyboard accessible",
+ },
+ {
+ criterion: "2.1.2 No Keyboard Trap",
+ url: "https://www.w3.org/TR/WCAG22/#no-keyboard-trap",
+ compliance: "Compliant",
+ evidence:
+ "tabindex=0 with proper focus management, users can navigate away",
+ },
+ {
+ criterion: "2.1.4 Character Key Shortcuts",
+ url: "https://www.w3.org/TR/WCAG22/#character-key-shortcuts",
+ compliance: "Compliant",
+ evidence: "No single-character shortcuts used",
+ },
+ {
+ criterion: "2.4.3 Focus Order",
+ url: "https://www.w3.org/TR/WCAG22/#focus-order",
+ compliance: "Compliant",
+ evidence: "tabindex respects DOM order",
+ notice:
+ "Component follows logical DOM order; integration depends on page structure",
+ },
+ {
+ criterion: "2.4.7 Focus Visible",
+ url: "https://www.w3.org/TR/WCAG22/#focus-visible",
+ compliance: "Partially",
+ evidence: "Programmatic focus management implemented",
+ notice:
+ "Visual focus indicators require CSS styling from consuming application, component defaults style meet criterion",
+ },
+ {
+ criterion: "2.4.11 Focus Not Obscured (Minimum)",
+ url: "https://www.w3.org/TR/WCAG22/#focus-not-obscured-minimum",
+ compliance: "Partially",
+ evidence: "Programmatic focus management implemented",
+ notice:
+ "Component doesn't obscure its own focus, but page-level layout/styling may affect visibility",
+ },
+ {
+ criterion: "2.4.12 Focus Not Obscured (Enhanced)",
+ url: "https://www.w3.org/TR/WCAG22/#focus-not-obscured-enhanced",
+ compliance: "Partially",
+ evidence: "Programmatic focus management implemented",
+ notice:
+ "Same as 2.4.11; component-level focus is clear but dependent on page context",
+ },
+ {
+ criterion: "2.5.3 Label in Name",
+ url: "https://www.w3.org/TR/WCAG22/#label-in-name",
+ compliance: "Compliant",
+ evidence: "aria-label matches visual label when provided",
+ },
+ {
+ criterion: "3.2.1 On Focus",
+ url: "https://www.w3.org/TR/WCAG22/#on-focus",
+ compliance: "Compliant",
+ evidence: "Focus does not trigger unexpected context changes",
+ },
+ {
+ criterion: "3.3.2 Labels or Instructions",
+ url: "https://www.w3.org/TR/WCAG22/#labels-or-instructions",
+ compliance: "Compliant",
+ evidence:
+ "Supports aria-label and aria-labelledby with fallback to default label",
+ },
+ {
+ criterion: "4.1.1 Parsing",
+ url: "https://www.w3.org/TR/WCAG22/#parsing",
+ compliance: "Compliant",
+ evidence: "Valid HTML, no duplicate IDs, proper nesting",
+ },
+ {
+ criterion: "4.1.2 Name, Role, Value",
+ url: "https://www.w3.org/TR/WCAG22/#name-role-value",
+ compliance: "Compliant",
+ evidence:
+ "role='switch', aria-label | aria-labelledby for name, aria-checked for value",
+ },
+ {
+ criterion: "4.1.3 Status Messages",
+ url: "https://www.w3.org/TR/WCAG22/#status-messages",
+ compliance: "Not Compliant",
+ evidence:
+ "There is not aria-live, aria-atomic, or aria-relevant for dynamic state announcements",
+ notice:
+ "State changes (ON/OFF/INDETERMINATE) are not announced via aria-live regions. Screen readers detect changes through aria-checked updates but not proactively announced.",
+ },
+ ];
+
+ static #wcagCompliance() {
+ const fragment = document.createDocumentFragment();
+
+ const description = document.createElement("p");
+ description.innerHTML = `Bootstrap Toggle adheres to WCAG 2.2 AA standards by implementing proper ARIA roles and attributes, ensuring that all users, including those with disabilities, can effectively interact with toggle switches.`;
+
+ const list = document.createElement("ul");
+ list.classList.add("list-group", "list-group-flush");
+ Accessibility.#wcagChecklist.forEach((item) => {
+ const listItem = document.createElement("li");
+ listItem.classList.add("list-group-item");
+
+ const header = document.createElement("div");
+ header.classList.add(
+ "d-flex",
+ "justify-content-start",
+ "align-items-center",
+ "gap-2",
+ );
+
+ const url = document.createElement("a");
+ url.classList.add("text-decoration-none");
+ url.href = item.url;
+ url.innerHTML = ``;
+ url.target = "_blank";
+ header.appendChild(url);
+
+ const criterionText = document.createElement("strong");
+ criterionText.innerHTML = item.criterion;
+ header.appendChild(criterionText);
+
+ const badge = document.createElement("span");
+ badge.classList.add("badge");
+ if (item.compliance === "Compliant") {
+ badge.classList.add("bg-success");
+ } else if (item.compliance === "Partially") {
+ badge.classList.add("bg-warning");
+ } else {
+ badge.classList.add("bg-danger");
+ }
+ badge.textContent = item.compliance;
+ header.appendChild(badge);
+ listItem.appendChild(header);
+
+ const evidence = document.createElement("p");
+ evidence.classList.add("m-0");
+ evidence.innerHTML = item.evidence;
+ listItem.appendChild(evidence);
+
+ if (item.notice) {
+ const notice = document.createElement("p");
+ notice.classList.add("m-0");
+ notice.innerHTML = `${item.notice}`;
+ listItem.appendChild(notice);
+ }
+
+ list.appendChild(listItem);
+ });
+
+ fragment.appendChild(description);
+ fragment.appendChild(list);
+ return fragment;
+ }
+}
+
+export default Accessibility;
diff --git a/docs/src/js/components/documentation/Api.js b/docs/src/js/components/documentation/Api.js
new file mode 100644
index 00000000..f39757f5
--- /dev/null
+++ b/docs/src/js/components/documentation/Api.js
@@ -0,0 +1,20 @@
+import InputInteraction from "./api/InputInteraction";
+import Methods from "./api/Methods";
+import Options from "./api/Options";
+import Rerender from "./api/Rerender";
+import State from "./api/State";
+import DocSection from "./DocSection";
+
+class Api extends DocSection {
+ static build() {
+ return super.build("api", "API", [
+ Options.build(),
+ Methods.build(),
+ InputInteraction.build(),
+ State.build(),
+ Rerender.build(),
+ ]);
+ }
+}
+
+export default Api;
diff --git a/docs/src/js/components/documentation/Distribution.js b/docs/src/js/components/documentation/Distribution.js
new file mode 100644
index 00000000..70be81db
--- /dev/null
+++ b/docs/src/js/components/documentation/Distribution.js
@@ -0,0 +1,105 @@
+import DocArticle from "./DocArticle";
+import DocSection from "./DocSection";
+
+class Distribution extends DocSection {
+ static headers = ["Bootstrap Support", "Plugin Last Release", "End Of Life"];
+ static entries = [
+ { bootstrap: "5", plugin: "5", eol: "5" },
+ { bootstrap: "4", plugin: "4", eol: "4" },
+ { bootstrap: "3", plugin: "3", eol: "3" },
+ ];
+
+ static build() {
+ return super.build(
+ "distribution",
+ "Library Distributions",
+ [
+ DocArticle.build({
+ description: Distribution.#table(),
+ }),
+ ],
+ "mb-3"
+ );
+ }
+
+ static #table() {
+ const container = document.createElement("div");
+ container.className = "table-responsive";
+
+ const table = document.createElement("table");
+ table.className = "table table-striped table-condensed mb-0";
+
+ const caption = document.createElement("caption");
+ caption.textContent = "Library Distributions";
+
+ table.append(
+ caption,
+ Distribution.#tableHeader(),
+ Distribution.#tableBody()
+ );
+ container.appendChild(table);
+ return container;
+ }
+
+ static #tableHeader() {
+ const thead = document.createElement("thead");
+ const row = document.createElement("tr");
+
+ Distribution.headers.forEach((headerText) => {
+ const th = document.createElement("th");
+ th.textContent = headerText;
+ row.appendChild(th);
+ });
+
+ thead.appendChild(row);
+ return thead;
+ }
+
+ static #tableBody() {
+ const tbody = document.createElement("tbody");
+ Distribution.entries.forEach((entry) => {
+ const row = document.createElement("tr");
+ const tdBootstrap = document.createElement("td");
+ const aBootstrap = document.createElement("a");
+ aBootstrap.href = `https://getbootstrap.com/docs/${entry.bootstrap}.0`;
+ aBootstrap.target = "_blank";
+ aBootstrap.rel = "noopener noreferrer";
+ aBootstrap.title = `Bootstrap ${entry.bootstrap}`;
+ const imgBootstrap = document.createElement("img");
+ imgBootstrap.src = `https://img.shields.io/static/v1?label=bootstrap&message=%5Ev${entry.bootstrap}.0.0&color=informational&logo=bootstrap&logoColor=white`;
+ imgBootstrap.alt = `Bootstrap ${entry.bootstrap}`;
+ aBootstrap.appendChild(imgBootstrap);
+ tdBootstrap.appendChild(aBootstrap);
+
+ const tdPlugin = document.createElement("td");
+ const aPlugin = document.createElement("a");
+ aPlugin.href = `https://github.com/palcarazm/bootstrap5-toggle/releases`;
+ aPlugin.target = "_blank";
+ aPlugin.rel = "noopener noreferrer";
+ aPlugin.title = `bs-toggle v${entry.plugin}`;
+ const imgPlugin = document.createElement("img");
+ imgPlugin.src = `https://img.shields.io/github/package-json/v/palcarazm/bootstrap5-toggle/v${entry.plugin}?logo=github`;
+ imgPlugin.alt = `bs-toggle v${entry.plugin}`;
+ aPlugin.appendChild(imgPlugin);
+ tdPlugin.appendChild(aPlugin);
+
+ const tdEOL = document.createElement("td");
+ const aEOL = document.createElement("a");
+ aEOL.href = `https://github.com/palcarazm/bootstrap5-toggle/security/policy`;
+ aEOL.target = "_blank";
+ aEOL.rel = "noopener noreferrer";
+ aEOL.title = `End of Life`;
+ const imgEOL = document.createElement("img");
+ imgEOL.src = `https://img.shields.io/endpoint?url=https%3A%2F%2Fpalcarazm.github.io%2Fbootstrap5-toggle%2Fapi%2Feol%2Fv${entry.eol}`;
+ imgEOL.alt = `EOL v${entry.eol}`;
+ aEOL.appendChild(imgEOL);
+ tdEOL.appendChild(aEOL);
+
+ row.append(tdBootstrap, tdPlugin, tdEOL);
+ tbody.appendChild(row);
+ });
+ return tbody;
+ }
+}
+
+export default Distribution;
diff --git a/docs/src/js/components/documentation/DocAlert.js b/docs/src/js/components/documentation/DocAlert.js
new file mode 100644
index 00000000..c91d2ecf
--- /dev/null
+++ b/docs/src/js/components/documentation/DocAlert.js
@@ -0,0 +1,54 @@
+import VersionPill from "../VersionPill";
+
+class DocAlert {
+ static build({ type, title, content, versionPill = null }) {
+ const alert = document.createElement("div");
+ alert.className = `alert alert-${type}`;
+
+ const alertBody = document.createElement("div");
+ alertBody.innerHTML = content;
+
+ alert.append(DocAlert.#alertHeader(type, title, versionPill), alertBody);
+ return alert;
+ }
+
+ static #alertHeader(type, title, versionPill) {
+ const header = document.createElement("div");
+ header.className =
+ "d-flex justify-content-between align-items-center alert-heading";
+
+ let icon = document.createElement("i");
+ switch (type) {
+ case "info":
+ icon.className = "fa-solid fa-info-circle";
+ break;
+ case "success":
+ icon.className = "fa-solid fa-circle-check";
+ break;
+ case "warning":
+ icon.className = "fa-solid fa-exclamation-circle";
+ break;
+ case "danger":
+ icon.className = "fa-solid fa-exclamation-triangle";
+ break;
+ default:
+ icon = null;
+ break;
+ }
+
+ const col = document.createElement("div");
+ if (icon) col.appendChild(icon);
+ const titleContainer = document.createElement("span");
+ titleContainer.className = "text-uppercase fw-bold ms-1";
+ titleContainer.textContent = title;
+ col.appendChild(titleContainer);
+
+ header.appendChild(col);
+
+ if (versionPill) header.appendChild(VersionPill.build(versionPill));
+
+ return header;
+ }
+}
+
+export default DocAlert;
diff --git a/docs/src/js/components/documentation/DocArticle.js b/docs/src/js/components/documentation/DocArticle.js
new file mode 100644
index 00000000..be1a4053
--- /dev/null
+++ b/docs/src/js/components/documentation/DocArticle.js
@@ -0,0 +1,57 @@
+import Badge from "../Badge";
+import CodeBlock from "../CodeBlock";
+import CodePanel from "../CodePanel";
+import VersionPill from "../VersionPill";
+import DocAlert from "./DocAlert";
+
+class DocArticle {
+ static build({
+ title = null,
+ className = "",
+ badge = null,
+ versionPill = null,
+ description = null,
+ example = [],
+ codePanel = null,
+ codeBlock = null,
+ alert = null,
+ }) {
+ const docArticle = document.createElement("article");
+ docArticle.className = `ps-2 px-2 border-start border-2 ${className}`;
+
+ if (title)
+ docArticle.appendChild(
+ DocArticle.#articleHeader(title, badge, versionPill)
+ );
+
+ if (description) docArticle.appendChild(description);
+
+ if (codePanel && codeBlock)
+ throw new Error("CodePanel and CodeBlock are mutually exclusive.");
+ if (codePanel)
+ docArticle.appendChild(CodePanel.build({ example, ...codePanel }));
+ if (codeBlock)
+ docArticle.appendChild(CodeBlock.build({ example, ...codeBlock }));
+
+ if (alert) docArticle.appendChild(DocAlert.build(alert));
+
+ return docArticle;
+ }
+
+ static #articleHeader(title, badge, versionPill) {
+ const header = document.createElement("div");
+ header.className = "d-flex justify-content-between align-items-center";
+ const titleContainer = document.createElement("h3");
+ titleContainer.className = "text-secondary";
+ titleContainer.textContent = title;
+ header.appendChild(titleContainer);
+
+ if (badge) header.appendChild(Badge.build(badge));
+
+ if (versionPill) header.appendChild(VersionPill.build(versionPill));
+
+ return header;
+ }
+}
+
+export default DocArticle;
diff --git a/docs/src/js/components/documentation/DocSection.js b/docs/src/js/components/documentation/DocSection.js
new file mode 100644
index 00000000..3bd08ee8
--- /dev/null
+++ b/docs/src/js/components/documentation/DocSection.js
@@ -0,0 +1,16 @@
+class DocSection {
+ static build(name, title, HTMLElements, className = "") {
+ const section = document.createElement("section");
+ section.id = name;
+ section.className = `container ${className}`;
+ section.append(DocSection.#header(title), ...HTMLElements);
+ return section;
+ }
+ static #header(title) {
+ const header = document.createElement("h2");
+ header.textContent = title;
+ return header;
+ }
+}
+
+export default DocSection;
diff --git a/docs/src/js/components/documentation/Events.js b/docs/src/js/components/documentation/Events.js
new file mode 100644
index 00000000..36e16467
--- /dev/null
+++ b/docs/src/js/components/documentation/Events.js
@@ -0,0 +1,16 @@
+import DocSection from "./DocSection";
+import CustomEvents from "./events/CustomEvents";
+import EventPropagation from "./events/EventPropagation";
+import SilencedActions from "./events/SilencedActions";
+
+class Events extends DocSection {
+ static build() {
+ return super.build("events", "Events", [
+ EventPropagation.build(),
+ CustomEvents.build(),
+ SilencedActions.build(),
+ ]);
+ }
+}
+
+export default Events;
diff --git a/docs/src/js/components/documentation/Features.js b/docs/src/js/components/documentation/Features.js
new file mode 100644
index 00000000..a9be4660
--- /dev/null
+++ b/docs/src/js/components/documentation/Features.js
@@ -0,0 +1,38 @@
+import DocSection from "./DocSection";
+import AnimationSpeed from "./features/AnimationSpeed";
+import Colors from "./features/Colors";
+import CustomFormValue from "./features/CustomFormValue";
+import CustomSize from "./features/CustomSize";
+import CustomStyle from "./features/CustomStyle";
+import CustomText from "./features/CustomText";
+import CustomTitle from "./features/CustomTitle";
+import FormLayout from "./features/FormLayout";
+import KeyboardInteraction from "./features/KeyboardInteraction";
+import OutlineColors from "./features/OutlineColors";
+import Size from "./features/Size";
+import StateStatus from "./features/StateStatus";
+import Tooltip from "./features/Tooltip";
+import Tristate from "./features/Tristate";
+
+class Features extends DocSection {
+ static build() {
+ return super.build("features", "Features", [
+ Size.build(),
+ CustomSize.build(),
+ Tristate.build(),
+ Colors.build(),
+ OutlineColors.build(),
+ CustomText.build(),
+ CustomTitle.build(),
+ Tooltip.build(),
+ CustomStyle.build(),
+ AnimationSpeed.build(),
+ KeyboardInteraction.build(),
+ StateStatus.build(),
+ CustomFormValue.build(),
+ FormLayout.build(),
+ ]);
+ }
+}
+
+export default Features;
diff --git a/docs/src/js/components/documentation/Installation.js b/docs/src/js/components/documentation/Installation.js
new file mode 100644
index 00000000..70e07e6b
--- /dev/null
+++ b/docs/src/js/components/documentation/Installation.js
@@ -0,0 +1,73 @@
+import DocArticle from "./DocArticle";
+import DocSection from "./DocSection";
+
+class Installation extends DocSection {
+ static build() {
+ return super.build("installation", "Installation", [
+ Installation.#cdn(),
+ Installation.#github(),
+ Installation.#npm(),
+ Installation.#yarn(),
+ ]);
+ }
+
+ static #cdn() {
+ const ecmas = `
+`;
+ const jquery = `
+`;
+ return DocArticle.build({
+ title: "CDN",
+ badge: {
+ name: "jsDelivr",
+ href: "https://www.jsdelivr.com/package/npm/bootstrap5-toggle",
+ imgSrc:
+ "https://img.shields.io/jsdelivr/npm/hm/bootstrap5-toggle?label=hits&logo=jsdelivr&logoColor=white",
+ },
+ codePanel: {
+ name: "cdn",
+ language: "html",
+ contents: [ecmas, jquery],
+ },
+ });
+ }
+
+ static #github() {
+ return DocArticle.build({
+ title: "Download from GitHub",
+ badge: {
+ name: "Latest release",
+ href: "https://github.com/palcarazm/bootstrap5-toggle/releases",
+ imgSrc:
+ "https://img.shields.io/github/package-json/v/palcarazm/bootstrap5-toggle/v5?logo=github",
+ },
+ });
+ }
+
+ static #npm() {
+ return DocArticle.build({
+ title: "NPM",
+ badge: {
+ name: "NPM",
+ href: "https://www.npmjs.com/package/bootstrap5-toggle",
+ imgSrc: "https://img.shields.io/npm/dm/bootstrap5-toggle?logo=npm",
+ },
+ codeBlock: {
+ language: "shell",
+ code: `npm install bootstrap5-toggle@${versions.bootstrap5Toggle}`,
+ },
+ });
+ }
+
+ static #yarn() {
+ return DocArticle.build({
+ title: "Yarn",
+ codeBlock: {
+ language: "shell",
+ code: `yarn add bootstrap5-toggle@${versions.bootstrap5Toggle}`,
+ },
+ });
+ }
+}
+
+export default Installation;
diff --git a/docs/src/js/components/documentation/Usage.js b/docs/src/js/components/documentation/Usage.js
new file mode 100644
index 00000000..a507740d
--- /dev/null
+++ b/docs/src/js/components/documentation/Usage.js
@@ -0,0 +1,42 @@
+import DocSection from "./DocSection";
+import DocArticle from "./DocArticle";
+
+class Usage extends DocSection {
+ static build() {
+ return super.build("usage", "Usage", [Usage.#html(), Usage.#js()]);
+ }
+
+ static #html() {
+ const description = document.createElement("p");
+ description.innerHTML = `Simply add data-toggle="toggle" to convert checkboxes into toggles.`;
+
+ return DocArticle.build({
+ title: "Initialize with HTML",
+ description,
+ codeBlock: {
+ language: "html",
+ code: ``,
+ },
+ });
+ }
+
+ static #js() {
+ const description = document.createElement("p");
+ description.innerHTML = `Simply call the bootstrapToggle method to convert checkboxes into toggles. See Options for additional colors, etc.`;
+
+ const ecmas = `document.querySelector(mySelector).bootstrapToggle();`;
+ const jquery = `$(mySelector).bootstrapToggle();`;
+
+ return DocArticle.build({
+ title: "Initialize with JavaScript",
+ description,
+ codePanel: {
+ name: "usage-js",
+ language: "javascript",
+ contents: [ecmas, jquery],
+ },
+ });
+ }
+}
+
+export default Usage;
diff --git a/docs/src/js/components/documentation/api/InputInteraction.js b/docs/src/js/components/documentation/api/InputInteraction.js
new file mode 100644
index 00000000..f33d0727
--- /dev/null
+++ b/docs/src/js/components/documentation/api/InputInteraction.js
@@ -0,0 +1,167 @@
+import DocArticle from "../DocArticle";
+
+class InputInteraction extends DocArticle {
+ static #interactions = [
+ {
+ action: "checked",
+ function: "myInput.checked = true",
+ description: "Sets the toggle to 'On' state",
+ demo: (input) => {
+ input.checked = true;
+ },
+ },
+ {
+ action: "unchecked",
+ function: "myInput.checked = false",
+ description: "Sets the toggle to 'Off' state",
+ demo: (input) => {
+ input.checked = false;
+ },
+ },
+ {
+ action: "indeterminate",
+ function: "myInput.indeterminate = true",
+ description: "Sets the toggle to 'indeterminate' state",
+ demo: (input) => {
+ input.indeterminate = true;
+ },
+ },
+ {
+ action: "determinate",
+ function: "myInput.indeterminate = false",
+ description:
+ "Sets the toggle to the previous 'determinate' state ('on' or 'off')",
+ demo: (input) => {
+ input.indeterminate = false;
+ },
+ },
+ {
+ action: "enable",
+ function: "myInput.disabled = false",
+ description: "Enables the toggle",
+ demo: (input) => {
+ input.disabled = false;
+ },
+ },
+ {
+ action: "disable",
+ function: "myInput.disabled = true",
+ description: "Disables the toggle",
+ demo: (input) => {
+ input.disabled = true;
+ },
+ },
+ {
+ action: "read-only",
+ function: "myInput.readOnly = true",
+ description:
+ "Disables the toggle but the checkbox stay readable in form data.",
+ demo: (input) => {
+ input.readOnly = true;
+ },
+ },
+ {
+ action: "read-write",
+ function: "myInput.readOnly = false",
+ description:
+ "Removes the readonly state, enabling user interaction with the toggle.",
+ demo: (input) => {
+ input.readOnly = false;
+ },
+ },
+ ];
+
+ static build() {
+ const input = document.createElement("input");
+ input.setAttribute("type", "checkbox");
+ input.setAttribute("id", "api-input-interaction");
+ input.setAttribute("checked", "");
+ input.setAttribute("tristate", "");
+ input.dataset.toggle = "toggle";
+
+ return super.build({
+ title: "Input Interaction",
+ description: InputInteraction.#description(input),
+ codeBlock: {
+ language: "html",
+ code: `
+`,
+ },
+ example: [input],
+ });
+ }
+
+ static #description(input) {
+ const description = document.createElement("div");
+
+ const paragraph = document.createElement("p");
+ paragraph.innerHTML =
+ "Interact with the input elements dispatch changes to the toggle:";
+ description.append(paragraph, InputInteraction.#table(input));
+
+ return description;
+ }
+
+ static #table(input) {
+ const table = document.createElement("table");
+ table.className = "table table-striped table-condensed";
+ const caption = document.createElement("caption");
+ caption.textContent = "Input interaction demo";
+ table.append(
+ caption,
+ InputInteraction.#thead(),
+ InputInteraction.#tbody(input),
+ );
+
+ return table;
+ }
+
+ static #thead() {
+ const thead = document.createElement("thead");
+ const tr = document.createElement("tr");
+ tr.append(
+ ...["Action", "Example", "Description", "Demo"].map((label) => {
+ const th = document.createElement("th");
+ th.textContent = label;
+ return th;
+ }),
+ );
+ thead.append(tr);
+ return thead;
+ }
+
+ static #tbody(input) {
+ const tbody = document.createElement("tbody");
+
+ const trs = InputInteraction.#interactions.map(
+ ({ action, function: func, description, demo }) => {
+ const td1 = document.createElement("td");
+ td1.innerHTML = `${action}`;
+
+ const td2 = document.createElement("td");
+ td2.innerHTML = `${func}`;
+
+ const td3 = document.createElement("td");
+ td3.textContent = description;
+
+ const td4 = document.createElement("td");
+ const button = document.createElement("button");
+ button.className = "btn btn-outline-dark btn-sm w-100";
+ button.textContent = action;
+ button.onclick = () => {
+ demo(input);
+ };
+ td4.append(button);
+
+ const tr = document.createElement("tr");
+ tr.append(td1, td2, td3, td4);
+ return tr;
+ },
+ );
+
+ tbody.append(...trs);
+ return tbody;
+ }
+}
+
+export default InputInteraction;
diff --git a/docs/src/js/components/documentation/api/Methods.js b/docs/src/js/components/documentation/api/Methods.js
new file mode 100644
index 00000000..cf7f0089
--- /dev/null
+++ b/docs/src/js/components/documentation/api/Methods.js
@@ -0,0 +1,151 @@
+import DocArticle from "../DocArticle";
+
+class Methods extends DocArticle {
+ static #methods = [
+ {
+ method: "initialize",
+ params: null,
+ description: "Initializes the toggle plugin with options",
+ },
+ {
+ method: "destroy",
+ params: "destroy",
+ description: "Destroys the toggle",
+ },
+ {
+ method: "rerender",
+ params: "rerender",
+ description: "Rerenders the toggle",
+ },
+ {
+ method: "on",
+ params: "on",
+ description: "Sets the toggle to 'On' state",
+ },
+ {
+ method: "off",
+ params: "off",
+ description: "Sets the toggle to 'Off' state",
+ },
+ {
+ method: "toggle",
+ params: "toggle",
+ description: "Toggles the state of the toggle",
+ },
+ {
+ method: "indeterminate",
+ params: "indeterminate",
+ description: "Sets the toggle to 'indeterminate' state",
+ },
+ {
+ method: "determinate",
+ params: "determinate",
+ description:
+ "Sets the toggle to the previous 'determinate' state ('on' or 'off')",
+ },
+ {
+ method: "enable",
+ params: "enable",
+ description: "Enables the toggle",
+ },
+ {
+ method: "disable",
+ params: "disable",
+ description: "Disables the toggle",
+ },
+ {
+ method: "readonly",
+ params: "readonly",
+ description:
+ "Disables the toggle but the checkbox stay readable in form data.",
+ },
+ ];
+
+ static build() {
+ const input = document.createElement("input");
+ input.setAttribute("type", "checkbox");
+ input.setAttribute("id", "api-methods-toggle");
+ input.setAttribute("checked", "");
+
+ return super.build({
+ title: "Methods",
+ description: Methods.#description(input),
+ codeBlock: {
+ language: "html",
+ code: `
+`,
+ },
+ example: [input],
+ });
+ }
+
+ static #description(input) {
+ const description = document.createElement("div");
+
+ const paragraph = document.createElement("p");
+ paragraph.innerHTML =
+ "Methods can be used to control toggles directly. The following methods are available in the following way:";
+ description.append(paragraph, Methods.#table(input));
+
+ return description;
+ }
+
+ static #table(input) {
+ const table = document.createElement("table");
+ table.className = "table table-striped table-condensed";
+ const caption = document.createElement("caption");
+ caption.textContent = "API methods demo";
+ table.append(caption, Methods.#thead(), Methods.#tbody(input));
+
+ return table;
+ }
+
+ static #thead() {
+ const thead = document.createElement("thead");
+ const tr = document.createElement("tr");
+ tr.append(
+ ...["Method", "Example", "Description", "Demo"].map((label) => {
+ const th = document.createElement("th");
+ th.textContent = label;
+ return th;
+ })
+ );
+ thead.append(tr);
+ return thead;
+ }
+
+ static #tbody(input) {
+ const tbody = document.createElement("tbody");
+
+ const trs = Methods.#methods.map(({ method, params, description }) => {
+ const td1 = document.createElement("td");
+ td1.innerHTML = `${method}`;
+
+ const td2 = document.createElement("td");
+ td2.innerHTML = params
+ ? `myToggle.bootstrapToggle("${params}")`
+ : `myToggle.bootstrapToggle()`;
+
+ const td3 = document.createElement("td");
+ td3.textContent = description;
+
+ const td4 = document.createElement("td");
+ const button = document.createElement("button");
+ button.className = "btn btn-outline-dark btn-sm w-100";
+ button.textContent = method;
+ button.onclick = () => {
+ input.bootstrapToggle(params);
+ };
+ td4.append(button);
+
+ const tr = document.createElement("tr");
+ tr.append(td1, td2, td3, td4);
+ return tr;
+ });
+
+ tbody.append(...trs);
+ return tbody;
+ }
+}
+
+export default Methods;
diff --git a/docs/src/js/components/documentation/api/Options.js b/docs/src/js/components/documentation/api/Options.js
new file mode 100644
index 00000000..1e56a466
--- /dev/null
+++ b/docs/src/js/components/documentation/api/Options.js
@@ -0,0 +1,286 @@
+import DocArticle from "../DocArticle";
+
+class Options extends DocArticle {
+ static build() {
+ return super.build({
+ title: "Options",
+ description: Options.#description(),
+ example: Options.#example(),
+ codePanel: Options.#codePanel(),
+ alert: {
+ type: "warning",
+ title: "Deprecation notice",
+ versionPill: {
+ version: "5.0.0",
+ action: "DEPRECATED",
+ },
+ content: `Using on and off user options is deprecated and will throw a console warning. Use onlabel and offlabel user options instead.`,
+ },
+ });
+ }
+
+ static #codePanel() {
+ const ecmas = `
+`;
+ const jquery = `
+`;
+ return {
+ name: "api-options",
+ language: "javascript",
+ tabs: ["ECMAScript", "jQuery"],
+ contents: [ecmas, jquery],
+ };
+ }
+
+ static #example() {
+ const form = document.createElement("form");
+ form.id = "form_state_status";
+ form.className = "d-flex justify-content-between align-items-center";
+
+ const input = document.createElement("input");
+ input.id = "api-option-toggle";
+ input.type = "checkbox";
+ input.checked = true;
+
+ const button = document.createElement("button");
+ button.type = "submit";
+ button.className = "btn btn-outline-secondary";
+ button.innerHTML = "Launch Bootstrap Toggle";
+
+ form.append(input, button);
+
+ form.onsubmit = (e) => {
+ e.preventDefault();
+ input.bootstrapToggle({
+ onlable: "Enabled",
+ offlabel: "Disabled",
+ onstyle: "success",
+ offstyle: "danger",
+ onvalue: "1",
+ offvalue: "0",
+ size: "lg",
+ style: null,
+ width: null,
+ height: null,
+ tabindex: -1,
+ tristate: true,
+ tooltip: {
+ placement: "top",
+ title: { on: "Enabled", off: "Disabled", mixed: "Mixed" },
+ },
+ });
+ };
+
+ return [form];
+ }
+
+ static #description() {
+ const description = document.createElement("div");
+ description.innerHTML = `Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-on="Enabled". Data attributes will take precedence over JavaScript options.
| Name | +Type | +Default | +Description | +||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
onlabel |
+ string | html | +"On" |
+ Text of the on toggle label. | +||||||||||||||||||||
offlabel |
+ string | html | +"Off" |
+ Text of the off toggle label. | +||||||||||||||||||||
onstyle |
+ string | +"primary" |
+
+ Style of the on toggle. Possible values are: + primary, secondary, success, danger,
+ warning, info, light, dark+ |
+ ||||||||||||||||||||
offstyle |
+ string | +"secondary" |
+
+ Style of the off toggle. Possible values are: + primary, secondary, success, danger,
+ warning, info, light, dark+ |
+ ||||||||||||||||||||
onvalue |
+ string | +null | +Sets on state value. | +||||||||||||||||||||
offvalue |
+ string | +null | +Sets off state value. | +||||||||||||||||||||
size |
+ string | +null | +
+ Size of the toggle. If set to null, button is default/normal size. + Possible values are: + lg, sm, xs+ |
+ ||||||||||||||||||||
style |
+ string | +null | ++ Appends the provided value to the toggle's class attribute. + Use this to apply custom styles to the toggle. + | +||||||||||||||||||||
width |
+ integer | +null | +
+ Sets the width of the toggle. + If set to null, width will be calculated. + |
+ ||||||||||||||||||||
height |
+ integer | +null | +
+ Sets the height of the toggle. + If set to null, height will be calculated. + |
+ ||||||||||||||||||||
tabindex |
+ integer | +0 |
+ Sets the tabindex. | +||||||||||||||||||||
tristate |
+ boolean | +false |
+ Sets tristate support. | +||||||||||||||||||||
tooltip |
+ object | +undefined |
+
+
|
+
rerender method. This can be used to update toggle when a process updates input data attributes.`;
+
+ const code = `
+`;
+
+ return super.build({
+ title: "Re-render",
+ description,
+ example: Rerender.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ });
+ }
+
+ static #example() {
+ const form = document.createElement("form");
+ form.id = "api-state-form";
+ form.className = "d-flex justify-content-between align-items-center";
+ form.innerHTML = `
+ `;
+
+ const console = new Console();
+
+ form.onsubmit = (e) => {
+ e.preventDefault();
+ const myToggle = e.target.elements["api-rerender-toggle"];
+ const onLabel = crypto.getRandomValues(new Uint32Array(1))[0];
+ myToggle.dataset.onlabel = onLabel;
+ console.log({
+ mode: "append",
+ data: `On label set to: ${onLabel}`,
+ });
+
+ myToggle.bootstrapToggle("rerender");
+ };
+
+ return [form, console.htmlElement];
+ }
+}
+
+export default Rerender;
diff --git a/docs/src/js/components/documentation/api/State.js b/docs/src/js/components/documentation/api/State.js
new file mode 100644
index 00000000..31ad0c5c
--- /dev/null
+++ b/docs/src/js/components/documentation/api/State.js
@@ -0,0 +1,47 @@
+import Console from "../../Console";
+import DocArticle from "../DocArticle";
+
+class State extends DocArticle {
+ static build() {
+ const description = document.createElement("p");
+ description.innerHTML = `Checked state of a toggle can be set by reading checked property. Use the element property for checked state myToggle.checked (returns true or false).`;
+
+ const code = `
+`;
+
+ return super.build({
+ title: "Toggle State",
+ description,
+ example: State.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ });
+ }
+
+ static #example() {
+ const form = document.createElement("form");
+ form.id = "api-state-form";
+ form.className = "d-flex justify-content-between align-items-center";
+ form.innerHTML = `
+ `;
+
+ const console = new Console();
+
+ form.onsubmit = (e) => {
+ e.preventDefault();
+ console.log({
+ mode: "append",
+ data: `Checked: ${e.target.elements["api-state-toggle"].checked}`,
+ });
+ };
+
+ return [form, console.htmlElement];
+ }
+}
+
+export default State;
diff --git a/docs/src/js/components/documentation/events/CustomEvents.js b/docs/src/js/components/documentation/events/CustomEvents.js
new file mode 100644
index 00000000..373361b0
--- /dev/null
+++ b/docs/src/js/components/documentation/events/CustomEvents.js
@@ -0,0 +1,136 @@
+import { version } from "grunt";
+import Console from "../../Console";
+import DocArticle from "../DocArticle";
+
+class CustomEvents extends DocArticle {
+ static #events = [
+ {
+ name: "toggle:on",
+ action: "on",
+ },
+ {
+ name: "toggle:off",
+ action: "off",
+ },
+ {
+ name: "toggle:mixed",
+ action: "indeterminate",
+ },
+ {
+ name: "toggle:enabled",
+ action: "enable",
+ },
+ {
+ name: "toggle:disabled",
+ action: "disable",
+ },
+ {
+ name: "toggle:readonly",
+ action: "readonly",
+ },
+ ];
+
+ static build() {
+ const input = document.createElement("input");
+ input.setAttribute("type", "checkbox");
+ input.setAttribute("id", "custom-events-toggle");
+ input.setAttribute("checked", "");
+ input.setAttribute("tristate", "");
+ input.setAttribute("data-toggle", "toggle");
+ const console = new Console();
+
+ CustomEvents.#events.forEach((event) => {
+ input.addEventListener(event.name, (e) => {
+ console.log({
+ mode: "append",
+ data: `Event ${event.name} fired. Toggle state: ${JSON.stringify(e.detail.state, null, 2)}`,
+ });
+ });
+ });
+
+ return super.build({
+ title: "Custom Events",
+ description: CustomEvents.#description(input),
+ codeBlock: {
+ language: "html",
+ code: `
+`,
+ },
+ example: [input, console.htmlElement],
+ versionPill: { action: "SINCE", version: "5.3.0" },
+ });
+ }
+
+ static #description(input) {
+ const description = document.createElement("div");
+
+ const paragraph = document.createElement("p");
+ paragraph.innerHTML =
+ "Bootstrap Toggle emit custom events when its state or status is changed. The events details contain the current state of the toggle. The following custom events are available:";
+ description.append(paragraph, CustomEvents.#table(input));
+
+ return description;
+ }
+
+ static #table(input) {
+ const table = document.createElement("table");
+ table.className = "table table-striped table-condensed";
+ const caption = document.createElement("caption");
+ caption.textContent = "Custom events demo";
+ table.append(caption, CustomEvents.#thead(), CustomEvents.#tbody(input));
+
+ return table;
+ }
+
+ static #thead() {
+ const thead = document.createElement("thead");
+ const tr = document.createElement("tr");
+ tr.append(
+ ...["Event", "Example", "Launch"].map((label) => {
+ const th = document.createElement("th");
+ th.textContent = label;
+ return th;
+ }),
+ );
+ thead.append(tr);
+ return thead;
+ }
+
+ static #tbody(input) {
+ const tbody = document.createElement("tbody");
+
+ const trs = CustomEvents.#events.map(({ name, action }) => {
+ const td1 = document.createElement("td");
+ td1.innerHTML = `${name}`;
+
+ const td2 = document.createElement("td");
+ td2.innerHTML = `myToggle.addEventListener("${name}", (e)=>{...})`;
+
+ const td3 = document.createElement("td");
+ const defaultBtn = document.createElement("button");
+ defaultBtn.className = "btn btn-outline-dark btn-sm w-100";
+ defaultBtn.textContent = action;
+ defaultBtn.onclick = () => {
+ input.bootstrapToggle(action, false);
+ };
+ td3.append(defaultBtn);
+
+ const tr = document.createElement("tr");
+ tr.append(td1, td2, td3);
+ return tr;
+ });
+
+ tbody.append(...trs);
+ return tbody;
+ }
+}
+
+export default CustomEvents;
diff --git a/docs/src/js/components/documentation/events/EventPropagation.js b/docs/src/js/components/documentation/events/EventPropagation.js
new file mode 100644
index 00000000..8f1ead11
--- /dev/null
+++ b/docs/src/js/components/documentation/events/EventPropagation.js
@@ -0,0 +1,49 @@
+import Console from "../../Console";
+import DocArticle from "../DocArticle";
+
+class EventPropagation extends DocArticle {
+ static build() {
+ const description = document.createElement("p");
+ description.innerHTML = `All events are propagated to and from input element to the toggle. Listen for events on the input directly as the toggle stays synced with the
+ input.`;
+
+ const code = `
+`;
+
+ return super.build({
+ title: "Event Propagation",
+ description,
+ example: EventPropagation.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ });
+ }
+
+ static #example() {
+ const input = document.createElement("input");
+ input.type = "checkbox";
+ input.dataset.toggle = "toggle";
+ input.checked = true;
+ input.id = "events-propagation-toggle";
+
+ const console = new Console();
+
+ input.addEventListener("change", (e) => {
+ console.log({
+ mode: "append",
+ data: `Input change fired. Checked state: ${input.checked}`,
+ });
+ });
+
+ return [input, console.htmlElement];
+ }
+}
+
+export default EventPropagation;
diff --git a/docs/src/js/components/documentation/events/SilencedActions.js b/docs/src/js/components/documentation/events/SilencedActions.js
new file mode 100644
index 00000000..c1f382f1
--- /dev/null
+++ b/docs/src/js/components/documentation/events/SilencedActions.js
@@ -0,0 +1,125 @@
+import Console from "../../Console";
+import DocArticle from "../DocArticle";
+
+class SilencedActions extends DocArticle {
+ static #methods = [
+ "on",
+ "off",
+ "toggle",
+ "indeterminate",
+ "determinate",
+ "enable",
+ "disable",
+ "readonly",
+ ];
+
+ static build() {
+ const input = document.createElement("input");
+ input.setAttribute("type", "checkbox");
+ input.setAttribute("id", "events-silence-toggle");
+ input.setAttribute("checked", "");
+ input.setAttribute("data-toggle", "toggle");
+ const console = new Console();
+
+ input.addEventListener("change", (e) => {
+ console.log({
+ mode: "append",
+ data: `Input change fired. Checked state: ${input.checked}`,
+ });
+ });
+
+ return super.build({
+ title: "Silenced Actions",
+ description: SilencedActions.#description(input),
+ codeBlock: {
+ language: "html",
+ code: `
+`,
+ },
+ example: [input, console.htmlElement],
+ });
+ }
+
+ static #description(input) {
+ const description = document.createElement("div");
+
+ const paragraph = document.createElement("p");
+ paragraph.innerHTML =
+ "Methods can be used in silence mode just specifying the second argument to true on the bootstrapToggle call. This is useful to prevent the control from propagating the change event in cases where you want to update the state, but do not want to fire the onChange event. The following methods are available in silence mode in the following way:";
+ description.append(paragraph, SilencedActions.#table(input));
+
+ return description;
+ }
+
+ static #table(input) {
+ const table = document.createElement("table");
+ table.className = "table table-striped table-condensed";
+ const caption = document.createElement("caption");
+ caption.textContent = "Silenced methods demo";
+ table.append(
+ caption,
+ SilencedActions.#thead(),
+ SilencedActions.#tbody(input),
+ );
+
+ return table;
+ }
+
+ static #thead() {
+ const thead = document.createElement("thead");
+ const tr = document.createElement("tr");
+ tr.append(
+ ...["Method", "Example", "Normal", "Silenced"].map((label) => {
+ const th = document.createElement("th");
+ th.textContent = label;
+ return th;
+ }),
+ );
+ thead.append(tr);
+ return thead;
+ }
+
+ static #tbody(input) {
+ const tbody = document.createElement("tbody");
+
+ const trs = SilencedActions.#methods.map((method) => {
+ const td1 = document.createElement("td");
+ td1.innerHTML = `${method}`;
+
+ const td2 = document.createElement("td");
+ td2.innerHTML = `myToggle.bootstrapToggle("${method}", true)`;
+
+ const td3 = document.createElement("td");
+ const defaultBtn = document.createElement("button");
+ defaultBtn.className = "btn btn-outline-dark btn-sm w-100";
+ defaultBtn.textContent = method;
+ defaultBtn.onclick = () => {
+ input.bootstrapToggle(method, false);
+ };
+ td3.append(defaultBtn);
+
+ const td4 = document.createElement("td");
+ const silenceBtn = document.createElement("button");
+ silenceBtn.className = "btn btn-outline-dark btn-sm w-100";
+ silenceBtn.textContent = method;
+ silenceBtn.onclick = () => {
+ input.bootstrapToggle(method, true);
+ };
+ td4.append(silenceBtn);
+
+ const tr = document.createElement("tr");
+ tr.append(td1, td2, td3, td4);
+ return tr;
+ });
+
+ tbody.append(...trs);
+ return tbody;
+ }
+}
+
+export default SilencedActions;
diff --git a/docs/src/js/components/documentation/features/AnimationSpeed.js b/docs/src/js/components/documentation/features/AnimationSpeed.js
new file mode 100644
index 00000000..fe2c1e70
--- /dev/null
+++ b/docs/src/js/components/documentation/features/AnimationSpeed.js
@@ -0,0 +1,58 @@
+import DocArticle from "../DocArticle";
+
+class AnimationSpeed {
+ static build() {
+ const description = document.createElement("p");
+ description.innerHTML = `Transition speed can be easily controlled with css transition property on .toggle-group. You can also turn animation off completely.`;
+
+ const code = `
+
+
+`;
+
+ return DocArticle.build({
+ title: "Animation Speed",
+ description,
+ example: AnimationSpeed.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ });
+ }
+
+ static #example() {
+ const style = document.createElement("style");
+ style.textContent = `
+ .slow .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; }
+ .fast .toggle-group { transition: left 0.1s; -webkit-transition: left 0.1s; }
+ .none .toggle-group { transition: none; -webkit-transition: none; }`;
+
+ const inputs = ["slow", "fast", "none"].map((style) => {
+ const input = document.createElement("input");
+ input.type = "checkbox";
+ input.checked = true;
+ input.dataset.toggle = "toggle";
+ input.dataset.style = style;
+ return input;
+ });
+
+ return [style, ...inputs];
+ }
+}
+export default AnimationSpeed;
diff --git a/docs/src/js/components/documentation/features/Colors.js b/docs/src/js/components/documentation/features/Colors.js
new file mode 100644
index 00000000..3fd06453
--- /dev/null
+++ b/docs/src/js/components/documentation/features/Colors.js
@@ -0,0 +1,49 @@
+import DocArticle from "../DocArticle";
+
+class Colors {
+ static build() {
+ const description = document.createElement("p");
+ description.innerHTML = `Bootstrap toggle implements all Bootstrap colors. Just add the data-onstyle or data-offstyle attribute with one of the following values: primary, secondary, success, danger, warning, info, light or dark.`;
+
+ const code = `
+
+
+
+
+
+
+`;
+
+ return DocArticle.build({
+ title: "Colors",
+ description,
+ example: Colors.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ });
+ }
+
+ static #example() {
+ const example = [
+ "primary",
+ "secondary",
+ "success",
+ "danger",
+ "warning",
+ "info",
+ "light",
+ "dark",
+ ].map((color) => {
+ const input = document.createElement("input");
+ input.type = "checkbox";
+ input.checked = true;
+ input.dataset.toggle = "toggle";
+ input.dataset.onstyle = color;
+ return input;
+ });
+ return example;
+ }
+}
+export default Colors;
diff --git a/docs/src/js/components/documentation/features/CustomFormValue.js b/docs/src/js/components/documentation/features/CustomFormValue.js
new file mode 100644
index 00000000..1bb5adab
--- /dev/null
+++ b/docs/src/js/components/documentation/features/CustomFormValue.js
@@ -0,0 +1,50 @@
+import Console from "../../Console";
+import DocArticle from "../DocArticle";
+
+class CustomFormValue {
+ static build() {
+ const description = document.createElement("p");
+ description.innerHTML = `Form submit values can be customized with the data-onvalue and data-offvalue attributes.If original checkbox have a value set, data-onvalue will be ignored preserving the original value.`;
+
+ const code = ``;
+
+ return DocArticle.build({
+ title: "Custom form submit values",
+ description,
+ example: CustomFormValue.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ versionPill: { version: "4.3.0", action: "SINCE" },
+ });
+ }
+
+ static #example() {
+ const form = document.createElement("form");
+ form.id = "form_state_status";
+ form.className = "d-flex justify-content-between align-items-center";
+ form.innerHTML = `
+
+
+ `;
+
+ const console = new Console();
+
+ form.onsubmit = (e) => {
+ e.preventDefault();
+ console.json({
+ mode: "replace",
+ data: Object.fromEntries(new FormData(e.target)),
+ });
+ };
+
+ return [form, console.htmlElement];
+ }
+}
+export default CustomFormValue;
diff --git a/docs/src/js/components/documentation/features/CustomSize.js b/docs/src/js/components/documentation/features/CustomSize.js
new file mode 100644
index 00000000..9688a52f
--- /dev/null
+++ b/docs/src/js/components/documentation/features/CustomSize.js
@@ -0,0 +1,40 @@
+import DocArticle from "../DocArticle";
+
+class CustomSize {
+ static build() {
+ const description = document.createElement("p");
+ description.innerHTML = ` Bootstrap toggle can handle custom sizes by data-width and data-height options.`;
+
+ const code = `
+
+`;
+
+ return DocArticle.build({
+ title: "Custom Sizes",
+ description,
+ example: CustomSize.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ });
+ }
+
+ static #example() {
+ const example = [
+ { width: "100", height: "75" },
+ { height: "5rem" },
+ { width: "6em" },
+ ].map(({ width, height }) => {
+ const input = document.createElement("input");
+ input.type = "checkbox";
+ input.checked = true;
+ input.dataset.toggle = "toggle";
+ if (width) input.dataset.width = width;
+ if (height) input.dataset.height = height;
+ return input;
+ });
+ return example;
+ }
+}
+export default CustomSize;
diff --git a/docs/src/js/components/documentation/features/CustomStyle.js b/docs/src/js/components/documentation/features/CustomStyle.js
new file mode 100644
index 00000000..f34d3f5d
--- /dev/null
+++ b/docs/src/js/components/documentation/features/CustomStyle.js
@@ -0,0 +1,63 @@
+import DocArticle from "../DocArticle";
+
+class CustomStyle {
+ static build() {
+ const description = document.createElement("p");
+ description.innerHTML = `Bootstrap toggle allows to style the buttons to fit an existing UX. Just add the data-style attribute to set a custom css class.`;
+
+ const code = `
+
+
+
+
+
+`;
+
+ return DocArticle.build({
+ title: "Custom Style",
+ description,
+ example: CustomStyle.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ });
+ }
+
+ static #example() {
+ const iosStyle = document.createElement("style");
+ iosStyle.textContent = `.toggle.ios, .toggle.ios .toggle-on, .toggle.ios .toggle-off, .toggle.ios .toggle-handle { border-radius: 20rem; }`;
+
+ const iosInput = document.createElement("input");
+ iosInput.type = "checkbox";
+ iosInput.checked = true;
+ iosInput.dataset.toggle = "toggle";
+ iosInput.dataset.style = "ios";
+
+ const androidStyle = document.createElement("style");
+ androidStyle.textContent = `.toggle.android , .toggle.android .toggle-on, .toggle.android .toggle-off, .toggle.android .toggle-handle{ border-radius: 0px; }`;
+
+ const androidInput = document.createElement("input");
+ androidInput.type = "checkbox";
+ androidInput.checked = true;
+ androidInput.dataset.toggle = "toggle";
+ androidInput.dataset.style = "android";
+
+ return [iosStyle, iosInput, androidStyle, androidInput];
+ }
+}
+export default CustomStyle;
diff --git a/docs/src/js/components/documentation/features/CustomText.js b/docs/src/js/components/documentation/features/CustomText.js
new file mode 100644
index 00000000..5ea4f21b
--- /dev/null
+++ b/docs/src/js/components/documentation/features/CustomText.js
@@ -0,0 +1,51 @@
+import DocArticle from "../DocArticle";
+
+class CustomText {
+ static build() {
+ const description = document.createElement("p");
+ description.innerHTML = `Bootstrap toggle allows to set custom labels. Just add the data-onlabel or data-offlabel attribute to set a custom label. Plain text and HTML are supported.`;
+
+ const code = `
+`;
+
+ return DocArticle.build({
+ title: "Custom Text",
+ description,
+ example: CustomText.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ alert: {
+ type: "warning",
+ title: "Deprecation notice",
+ versionPill: {
+ version: "5.0.0",
+ action: "DEPRECATED",
+ },
+ content: `Using data-on and data-off data attributes is deprecated and will throw a console warning. Use data-onlabel and data-offlabel data attributes instead.`,
+ },
+ });
+ }
+
+ static #example() {
+ const input1 = document.createElement("input");
+ input1.type = "checkbox";
+ input1.checked = true;
+ input1.dataset.toggle = "toggle";
+ input1.dataset.onlabel = "Ready";
+ input1.dataset.offlabel = "Not Ready";
+ input1.dataset.onstyle = "success";
+ input1.dataset.offstyle = "danger";
+
+ const input2 = document.createElement("input");
+ input2.type = "checkbox";
+ input2.checked = true;
+ input2.dataset.toggle = "toggle";
+ input2.dataset.onlabel = " Play";
+ input2.dataset.offlabel = " Pause";
+
+ return [input1, input2];
+ }
+}
+export default CustomText;
diff --git a/docs/src/js/components/documentation/features/CustomTitle.js b/docs/src/js/components/documentation/features/CustomTitle.js
new file mode 100644
index 00000000..9728616a
--- /dev/null
+++ b/docs/src/js/components/documentation/features/CustomTitle.js
@@ -0,0 +1,44 @@
+import DocArticle from "../DocArticle";
+
+class CustomTitle {
+ static build() {
+ const description = document.createElement("p");
+ description.innerHTML = `Bootstrap toggle allows to set custom title. Just add the data-ontitle or data-offtitle attribute to set a custom label. To set the same title in
+ both parts just use HTML standard title attribute.`;
+
+ const code = `
+`;
+
+ return DocArticle.build({
+ title: "Custom Title",
+ description,
+ versionPill: {
+ version: "5.0.0",
+ action: "SINCE",
+ },
+ example: CustomTitle.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ });
+ }
+
+ static #example() {
+ const input1 = document.createElement("input");
+ input1.type = "checkbox";
+ input1.checked = true;
+ input1.dataset.toggle = "toggle";
+ input1.dataset.ontitle = "ON";
+ input1.dataset.offtitle = "OFF";
+
+ const input2 = document.createElement("input");
+ input2.type = "checkbox";
+ input2.checked = true;
+ input2.dataset.toggle = "toggle";
+ input2.title = "TOGGLE";
+
+ return [input1, input2];
+ }
+}
+export default CustomTitle;
diff --git a/docs/src/js/components/documentation/features/FormLayout.js b/docs/src/js/components/documentation/features/FormLayout.js
new file mode 100644
index 00000000..0633c843
--- /dev/null
+++ b/docs/src/js/components/documentation/features/FormLayout.js
@@ -0,0 +1,102 @@
+import Console from "../../Console";
+import DocArticle from "../DocArticle";
+
+class FormLayout {
+ static build() {
+ const description = document.createElement("p");
+ description.innerHTML = `Bootstrap toggle can be used in all bootstrap form layout.`;
+
+ const code = `
+
+
+
+
+
+
+
+
+`;
+
+ return DocArticle.build({
+ title: "Form Layout",
+ description,
+ example: FormLayout.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ });
+ }
+
+ static #example() {
+ const formStacked = document.createElement("form");
+ formStacked.className = "border p-1 mb-1";
+ formStacked.innerHTML = `SPACEBAR or ENTER while it's focused and support TAB navigation.
+A custom tabindex can be set by adding the tabindex attribute, default value is 0.`;
+
+ const code = `
+
+`;
+
+ return DocArticle.build({
+ title: "Keyboard Interaction",
+ versionPill: { version: "5.0.0", action: "SINCE" },
+ description,
+ example: KeyboardInteraction.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ });
+ }
+
+ static #example() {
+ return ["-1", "", "1"].map((tabindex) => {
+ const input = document.createElement("input");
+ input.type = "checkbox";
+ input.checked = true;
+ input.dataset.toggle = "toggle";
+ if (tabindex !== "") input.setAttribute("tabindex", tabindex);
+ return input;
+ });
+ }
+}
+export default KeyboardInteraction;
diff --git a/docs/src/js/components/documentation/features/OutlineColors.js b/docs/src/js/components/documentation/features/OutlineColors.js
new file mode 100644
index 00000000..56b2ae39
--- /dev/null
+++ b/docs/src/js/components/documentation/features/OutlineColors.js
@@ -0,0 +1,49 @@
+import DocArticle from "../DocArticle";
+
+class OutlineColors {
+ static build() {
+ const description = document.createElement("p");
+ description.innerHTML = `Bootstrap toggle implements also all Bootstrap outline colors. Just add the data-onstyle or data-offstyle attribute with one of the following values: outline-primary, outline-secondary, outline-success, outline-danger, outline-warning, outline-info, outline-light or outline-dark.`;
+
+ const code = `
+
+
+
+
+
+
+`;
+
+ return DocArticle.build({
+ title: "Outline Colors",
+ description,
+ example: OutlineColors.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ });
+ }
+
+ static #example() {
+ const example = [
+ "outline-primary",
+ "outline-secondary",
+ "outline-success",
+ "outline-danger",
+ "outline-warning",
+ "outline-info",
+ "outline-light",
+ "outline-dark",
+ ].map((color) => {
+ const input = document.createElement("input");
+ input.type = "checkbox";
+ input.checked = true;
+ input.dataset.toggle = "toggle";
+ input.dataset.onstyle = color;
+ return input;
+ });
+ return example;
+ }
+}
+export default OutlineColors;
diff --git a/docs/src/js/components/documentation/features/Size.js b/docs/src/js/components/documentation/features/Size.js
new file mode 100644
index 00000000..e72b452c
--- /dev/null
+++ b/docs/src/js/components/documentation/features/Size.js
@@ -0,0 +1,36 @@
+import DocArticle from "../DocArticle";
+
+class Size {
+ static build() {
+ const description = document.createElement("p");
+ description.innerHTML = `Bootstrap toggle is available in different sizes. Just add the data-size attribute with one of the following values: lg, sm or xs.`;
+
+ const code = `
+
+
+`;
+
+ return DocArticle.build({
+ title: "Size",
+ description,
+ example: Size.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ });
+ }
+
+ static #example() {
+ const example = ["lg", "default", "sm", "xs"].map((size) => {
+ const input = document.createElement("input");
+ input.type = "checkbox";
+ input.checked = true;
+ input.dataset.toggle = "toggle";
+ if (size != "default") input.dataset.size = size;
+ return input;
+ });
+ return example;
+ }
+}
+export default Size;
diff --git a/docs/src/js/components/documentation/features/StateStatus.js b/docs/src/js/components/documentation/features/StateStatus.js
new file mode 100644
index 00000000..ba1cc0d9
--- /dev/null
+++ b/docs/src/js/components/documentation/features/StateStatus.js
@@ -0,0 +1,65 @@
+import Console from "../../Console";
+import DocArticle from "../DocArticle";
+
+class StateStatus {
+ static build() {
+ const code = ``;
+
+ return DocArticle.build({
+ title: "Toggle State and Status",
+ description: StateStatus.#description(),
+ example: StateStatus.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ });
+ }
+
+ static #description() {
+ const description = document.createElement("div");
+
+ const paragraph = document.createElement("p");
+ paragraph.innerHTML = `Toggle state and status is simply set adding vanilla html attributes to the checkbox:`;
+ description.append(paragraph);
+
+ const ul = document.createElement("ul");
+ const li1 = document.createElement("li");
+ li1.innerHTML = `Simply add checked to convert checkboxes into on toggles.`;
+ const li2 = document.createElement("li");
+ li2.innerHTML = `Simply add disabled to convert checkboxes into disabled toggles. Checkboxes will not be presents in the payload of a submitted form.`;
+ const li3 = document.createElement("li");
+ li3.innerHTML = `Simply add readonly to convert checkboxes into disabled toggles but presents in the payload of a submitted form.`;
+ ul.append(li1, li2, li3);
+ description.append(ul);
+
+ return description;
+ }
+
+ static #example() {
+ const form = document.createElement("form");
+ form.className = "d-flex justify-content-between align-items-center";
+ form.innerHTML = `
+
+
+ `;
+
+ const console = new Console();
+
+ form.onsubmit = (e) => {
+ e.preventDefault();
+ console.json({
+ mode: "replace",
+ data: Object.fromEntries(new FormData(e.target)),
+ });
+ };
+
+ return [form, console.htmlElement];
+ }
+}
+export default StateStatus;
diff --git a/docs/src/js/components/documentation/features/Tooltip.js b/docs/src/js/components/documentation/features/Tooltip.js
new file mode 100644
index 00000000..3a14349d
--- /dev/null
+++ b/docs/src/js/components/documentation/features/Tooltip.js
@@ -0,0 +1,61 @@
+import DocArticle from "../DocArticle";
+
+class Tooltip {
+ static build() {
+ const description = document.createDocumentFragment();
+
+ const p1 = document.createElement("p");
+ p1.innerHTML = `Bootstrap toggle allows to set tooltip. Just add the data-tooltip-title-on or data-tooltip-title-off or data-tooltip-title-mixed attribute to set a custom label. Plain text and HTML are supported. The attribute data-tooltip-title is used as fallback when a title for the specific state is not provided.`;
+ description.appendChild(p1);
+
+ const p2 = document.createElement("p");
+ p2.innerHTML = `Tooltips placement can be set using the data-tooltip-placement attribute. Possible values are: top, bottom, left, and right. The default value is top.`;
+ description.appendChild(p2);
+
+ const code = `
+
+ Checked" data-tooltip-title-off=" Unchecked" />`;
+
+ return DocArticle.build({
+ title: "Tooltip",
+ description,
+ example: Tooltip.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ versionPill: { action: "SINCE", version: "5.3.0" },
+ });
+ }
+
+ static #example() {
+ const input1 = document.createElement("input");
+ input1.type = "checkbox";
+ input1.checked = true;
+ input1.dataset.toggle = "toggle";
+ input1.dataset.tooltipTitle = "Fallback";
+ input1.dataset.tooltipTitleOn = "Checked";
+ input1.dataset.tooltipTitleOff = "Unchecked";
+ input1.setAttribute("tristate", "");
+
+ const input2 = document.createElement("input");
+ input2.type = "checkbox";
+ input2.checked = true;
+ input2.dataset.toggle = "toggle";
+ input2.dataset.tooltipTitleOn = "Checked";
+ input2.dataset.tooltipTitleOff = "Unchecked";
+ input2.dataset.tooltipPlacement = "bottom";
+
+ const input3 = document.createElement("input");
+ input3.type = "checkbox";
+ input3.checked = true;
+ input3.dataset.toggle = "toggle";
+ input3.dataset.tooltipTitleOn =
+ ' Checked';
+ input3.dataset.tooltipTitleOff =
+ ' Unchecked';
+
+ return [input1, input2, input3];
+ }
+}
+export default Tooltip;
diff --git a/docs/src/js/components/documentation/features/Tristate.js b/docs/src/js/components/documentation/features/Tristate.js
new file mode 100644
index 00000000..ccb5851a
--- /dev/null
+++ b/docs/src/js/components/documentation/features/Tristate.js
@@ -0,0 +1,32 @@
+import DocArticle from "../DocArticle";
+
+class Tristate {
+ static build() {
+ const description = document.createElement("p");
+ description.innerHTML = `Bootstrap toggle is available in tristate mode. Just add the tristate attribute to make a tristate toggle.`;
+
+ const code = ``;
+
+ return DocArticle.build({
+ title: "Tristate Toggle",
+ versionPill: { version: "4.3.0", action: "SINCE" },
+ description,
+ example: Tristate.#example(),
+ codeBlock: {
+ language: "html",
+ code,
+ },
+ });
+ }
+
+ static #example() {
+ const input = document.createElement("input");
+ input.type = "checkbox";
+ input.checked = true;
+ input.dataset.toggle = "toggle";
+ input.setAttribute("tristate", "");
+
+ return [input];
+ }
+}
+export default Tristate;
diff --git a/docs/src/js/main.js b/docs/src/js/main.js
new file mode 100644
index 00000000..f5504b86
--- /dev/null
+++ b/docs/src/js/main.js
@@ -0,0 +1,16 @@
+import BootstrapToggler from "./tasks/BootstrapToggler";
+import BootsrapDarkmodeToggler from "./tasks/BootsrapDarkmodeToggler";
+import CodeHighlighter from "./tasks/CodeHighlighter";
+import DOMBuilder from "./tasks/DOMBuilder";
+import LogoSwitcher from "./tasks/LogoSwitcher";
+import TOCBuilder from "./tasks/TOCBuilder";
+
+DOMBuilder.run();
+LogoSwitcher.run({ toggleDelay: 3000 });
+
+window.onload = () => {
+ BootstrapToggler.run();
+ BootsrapDarkmodeToggler.run();
+ CodeHighlighter.run();
+ TOCBuilder.run();
+};
diff --git a/docs/src/js/tasks/BootsrapDarkmodeToggler.js b/docs/src/js/tasks/BootsrapDarkmodeToggler.js
new file mode 100644
index 00000000..8634b73d
--- /dev/null
+++ b/docs/src/js/tasks/BootsrapDarkmodeToggler.js
@@ -0,0 +1,9 @@
+class BootsrapDarkmodeToggler {
+ static run() {
+ document.querySelectorAll('[data-plugin="bs-darkmode-toggle"]').forEach((element) => {
+ element.bsDarkmodeToggle();
+ });
+ }
+}
+
+export default BootsrapDarkmodeToggler;
diff --git a/docs/src/js/tasks/BootstrapToggler.js b/docs/src/js/tasks/BootstrapToggler.js
new file mode 100644
index 00000000..fae8f102
--- /dev/null
+++ b/docs/src/js/tasks/BootstrapToggler.js
@@ -0,0 +1,9 @@
+class BootstrapToggler {
+ static run() {
+ document.querySelectorAll('[data-toggle="toggle"]').forEach((element) => {
+ element.bootstrapToggle();
+ });
+ }
+}
+
+export default BootstrapToggler;
diff --git a/docs/src/js/tasks/CodeHighlighter.js b/docs/src/js/tasks/CodeHighlighter.js
new file mode 100644
index 00000000..659136f4
--- /dev/null
+++ b/docs/src/js/tasks/CodeHighlighter.js
@@ -0,0 +1,8 @@
+class CodeHighlighter {
+ static run() {
+ hljs.highlightAll();
+ window.highlightJsBadge();
+ }
+}
+
+export default CodeHighlighter;
diff --git a/docs/src/js/tasks/DOMBuilder.js b/docs/src/js/tasks/DOMBuilder.js
new file mode 100644
index 00000000..a1d9472e
--- /dev/null
+++ b/docs/src/js/tasks/DOMBuilder.js
@@ -0,0 +1,17 @@
+import Footer from "../components/Footer";
+import Header from "../components/Header";
+import Main from "../components/Main";
+import Notice from "../components/Notice";
+
+class DOMBuilder {
+ static #sections = [
+ Header.build(),
+ Notice.build(),
+ Main.build(),
+ Footer.build(),
+ ];
+ static run() {
+ document.body.append(...this.#sections);
+ }
+}
+export default DOMBuilder;
diff --git a/docs/src/js/tasks/LogoSwitcher.js b/docs/src/js/tasks/LogoSwitcher.js
new file mode 100644
index 00000000..3896a1b4
--- /dev/null
+++ b/docs/src/js/tasks/LogoSwitcher.js
@@ -0,0 +1,16 @@
+class LogoSwitcher {
+ /**
+ * Run the logo switcher.
+ * @param {Object} [options] - Options.
+ * @param {number} [options.toggleDelay=2000] - Delay between toggle in milliseconds.
+ */
+ static run({ toggleDelay = 2000 } = {}) {
+ document.querySelectorAll(".img-toggle img").forEach((element) => {
+ setInterval(function () {
+ element.classList.toggle("invisible");
+ }, toggleDelay);
+ });
+ }
+}
+
+export default LogoSwitcher;
diff --git a/docs/src/js/tasks/TOCBuilder.js b/docs/src/js/tasks/TOCBuilder.js
new file mode 100644
index 00000000..bd17ad0a
--- /dev/null
+++ b/docs/src/js/tasks/TOCBuilder.js
@@ -0,0 +1,13 @@
+class TOCBuilder {
+ static run() {
+ $("#toc").html("");
+ Toc.init({
+ $nav: $("#toc"),
+ });
+ const _scrollSpy = new bootstrap.ScrollSpy(document.body, {
+ target: "#toc",
+ });
+ }
+}
+
+export default TOCBuilder;
diff --git a/package.json b/package.json
index a1d09047..d37298ea 100644
--- a/package.json
+++ b/package.json
@@ -70,15 +70,15 @@
"devDependencies": {
"@commitlint/cli": "^20.3.1",
"@commitlint/config-conventional": "^20.3.1",
- "@rollup/plugin-terser": "^0.4.4",
+ "@rollup/plugin-terser": "^1.0.0",
"@types/bootstrap": "^5.2.10",
"@types/jest": "^30.0.0",
- "@types/jquery": "^3.5.33",
- "@typescript-eslint/eslint-plugin": "^8.20.0",
- "@typescript-eslint/parser": "^8.20.0",
+ "@types/jquery": "^4.0.0",
+ "@typescript-eslint/eslint-plugin": "^8.58.0",
+ "@typescript-eslint/parser": "^8.58.0",
"commitlint": "^20.3.1",
"cypress": "^15.8.1",
- "cypress-plugin-tab": "^1.0.5",
+ "cypress-plugin-tab": "^2.0.0",
"doctoc": "^2.2.0",
"dompurify": "^3.0.0",
"eslint": "^10.0.0",
@@ -96,7 +96,7 @@
"rollup": "^4.54.0",
"rollup-plugin-dts": "^6.4.1",
"ts-jest": "^29.4.6",
- "typescript": "^5.9.3"
+ "typescript": "^6.0.2"
},
"peerDependencies": {
"bootstrap": ">=5 <6"
diff --git a/sonar-project.properties b/sonar-project.properties
index 514dc7bb..429d438d 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -3,5 +3,5 @@ sonar.organization=palcarazm
sonar.javascript.lcov.reportPaths=coverage/lcov.info
sonar.typescript.tsconfigPath=tsconfig.json
-sonar.coverage.exclusions=test/**,cypress/**,src/test/**,src/main/js/**,src/main/ts/**/index*.ts,src/main/ts/types/**
+sonar.coverage.exclusions=docs/**,test/**,cypress/**,src/test/**,src/main/js/**,src/main/ts/**/index*.ts,src/main/ts/types/**
sonar.cpd.exclusions=test/**,cypress/**,src/test/**
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 7350735b..b2430f20 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
{
"compilerOptions": {
- "target": "ES5",
+ "target": "ES2016",
"module": "ESNext",
"strict": true,
"declaration": true,
@@ -10,7 +10,8 @@
"skipLibCheck": true,
"rootDir": "src/main/ts",
"outDir": "src/main/js",
- "typeRoots": [
+ "types": ["node"],
+ "typeRoots": [
"src/main/ts/types",
"node_modules/@types"
]
diff --git a/tsconfig.test.json b/tsconfig.test.json
index d0a7d503..27a2156a 100644
--- a/tsconfig.test.json
+++ b/tsconfig.test.json
@@ -1,14 +1,16 @@
{
"compilerOptions": {
- "target": "ES5",
- "module": "ESNext",
+ "target": "ES2016",
+ "module": "commonjs", // CommonJS used cause of jest need
"strict": true,
"declaration": false,
"esModuleInterop": true,
"skipLibCheck": true,
"rootDir": "src/main/ts",
"outDir": "src/main/js",
- "typeRoots": [
+ "noEmit": true,
+ "types": ["jest", "node"],
+ "typeRoots": [
"src/main/ts/types",
"node_modules/@types"
]