@caspingus/lt/dist/assessment/extensions/contentTabs.js

A utility library of helpers and extensions useful when working with Learnosity APIs.

import { r as e, t } from "../../extensionsFactory-hk5ijx1G.js";
//#region src/assessment/extensions/ui/contentTabs/index.js
var n = {
	options: { theme: "api-column-tabs" },
	visitedItems: /* @__PURE__ */ new Set()
};
function r(e = {}) {
	n.options = a(e), t.eventBus.on("item:load", () => {
		let e = t.itemReference();
		if (!n.visitedItems.has(e)) {
			let t = document.querySelector(`div[data-reference="${e}"]`).querySelectorAll("ul.lt__nav-tabs");
			if (t) for (let e of t) e.querySelectorAll("li[role=tab]").forEach((e, t) => {
				t === 0 ? e.classList.add("active") : e.classList.remove("active");
			}), e.querySelectorAll("a[data-tab-target]").forEach((e) => {
				if (!e.hasAttribute("title") || e.getAttribute("title") === "") {
					let t = i(e.textContent.trim());
					e.setAttribute("title", t);
				}
			});
			n.visitedItems.add(e);
		}
	}, "contentTabs");
}
function i(e) {
	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
}
function a(e) {
	let t = ["rounded", "api-column-tabs"], n = {};
	return e && typeof e == "object" && t.includes(e.theme) ? n.theme = e.theme : n.theme = "api-column-tabs", n;
}
function o() {
	return `/* Learnosity content tab styles */
${s(n.options.theme)}`;
}
function s(e) {
	let t = "", r = "";
	switch (e || n.options.theme) {
		case "default":
		case "api-column-tabs":
			r = "\n            /* API column tabs theme */\n            :root {\n                --tab-border: #d9d9d9;\n                --tab-color: #333333;\n            }", t = "\n            .lrn.lrn-assess .lt__tabs {\n                .lt__nav-tabs {\n                    overflow: initial;\n\n                    li {\n                        border: none;\n\n                        a {\n                            text-decoration: none;\n                            font-weight: normal;\n                        }\n                    }\n                }\n\n                .nav-tabs {\n                    -webkit-box-shadow: 0 4px 2px -2px rgba(0, 0, 0, .2);\n                    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, .2);\n                    text-align: center;\n                }\n\n                .nav-tabs>li:after, .nav-tabs .nav-tab:after {\n                    background: #1877b1;\n                    border: none;\n                    content: \"\";\n                    display: block;\n                    height: 2px;\n                    outline: none;\n                    transition: all .2s ease-in-out;\n                    width: 100%;\n                }\n\n                .nav-tabs>li:focus-within {\n                    outline: none;\n                }\n\n                .lt__tab-content {\n                    border: none;\n                    padding: 15px;\n                    margin-top: -1px;\n                }\n            }";
			break;
		case "rounded":
			r = "\n            /* Rounded tabs theme */\n            :root {\n                --color-active: #333333;\n                --customer-bg-blue: #e6f1ff;\n                --bg-grey: #f0f0f0;\n                --tab-bg-active: #ffffff;\n                --tab-border: #d9d9d9;\n                --tab-border-bottom: #eeeeee;\n                --tab-color: inherit;\n                --input-border: #898989;\n            }";
			break;
		default: break;
	}
	return r.concat("\n", "/* Base tabs styles */\n        .lrn.lrn-assess .lt__tabs,\n        .lrn-author-item-content-wrapper .lt__tabs {\n            container-type: inline-size;\n\n            .lt__nav-tabs {\n                display: flex;\n                box-shadow: none;\n                flex-wrap: nowrap;\n                overflow: hidden;\n                padding-top: 1px;\n\n                li {\n                    flex: 0 1 auto; /* don't grow, but shrink if needed */\n                    border: 1px solid var(--tab-border);\n                    border-top-left-radius: 10px;\n                    border-top-right-radius: 10px;\n                    margin-right: 6px;\n                    background-color: var(--bg-grey);\n                    box-shadow: none;\n                    min-width: 0;\n\n                    a {\n                        text-decoration: none;\n                        font-weight: bold;\n                        color: var(--tab-color);\n                        text-overflow: ellipsis;\n                        white-space: nowrap;\n                        display: block;\n                        overflow: hidden;\n                    }\n                }\n\n                li.active {\n                    border-bottom: none;\n                    background: var(--tab-bg-active);\n                    color: var(--color-active);\n                    border-bottom: none;\n                }\n\n                > li:after,\n                .nav-tabs:after {\n                    background: none;\n                }\n            }\n\n            .lt__tab-content {\n                border: 1px solid var(--tab-border);\n                padding: 15px;\n                margin-top: -1px; /* Fix for the tabs bottom border */\n\n                .lt__guard {\n                    user-select: none;\n                    width: 0;\n                    height: 0;\n                    margin: 0;\n                }\n\n                .lt__tab-pane p:last-child {\n                    margin-bottom: 0;\n                }\n            }\n\n            .tab-content>.active {\n                padding-top: 0;\n            }\n        }\n\n        .lrn-author-item-content-wrapper .lt__tabs .lt__tab-pane {\n            padding-top: 10px;\n        }\n    ", "\n", t);
}
var c = e("contentTabs", r, {
	getStyles: o,
	escapeHTML: i,
	getTabsTheme: s,
	validateOptions: a
});
//#endregion
export { c as contentTabs };