@linkurious/ogma-ui-kit
Version:
UI Kit for Ogma examples
105 lines (102 loc) • 9.32 kB
JavaScript
var d = Object.defineProperty;
var p = (a, r, o) => r in a ? d(a, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : a[r] = o;
var l = (a, r, o) => p(a, typeof r != "symbol" ? r + "" : r, o);
const h = "sl-button::part(base){outline:0px solid var(--primary);box-sizing:border-box;justify-content:flex-start;transition:all .1s ease-out;padding:8px 20px;min-width:196px;height:40px;align-items:center}sl-button::part(label){font-family:IBM Plex Sans,sans-serif;font-weight:var(--button-label-font-weight, 500)}sl-button[has-prefix]::part(base){padding-left:20px}sl-button::part(base):focus-visible{outline:1px solid var(--primary);outline-offset:2px}sl-button[variant=primary]::part(base){background-color:var(--primary);border-color:var(--primary);color:#fff}sl-button[variant=primary]::part(base):hover{background-color:var(--primary-dark);border-color:var(--primary-dark)}sl-button[variant=primary]::part(base):active{background-color:var(--primary-light);border-color:var(--primary-light)}sl-button[variant=primary]::part(base):focus-visible{background-color:var(--primary-light);border-color:var(--primary-light);box-shadow:0 0 0 3px #1a70e533}sl-button[variant=primary]::part(base):disabled{background-color:var(--primary);border-color:var(--primary);opacity:.5;cursor:not-allowed}sl-button[variant=secondary]::part(base){background-color:transparent;border-color:var(--primary);color:var(--primary)}sl-button[variant=secondary]::part(base):hover{background-color:var(--primary-lighter);border-color:var(--primary);color:var(--primary)}sl-button[variant=secondary]::part(base):active{background-color:var(--primary);border-color:var(--primary);color:#fff}sl-button[variant=secondary]::part(base):focus-visible{background-color:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 3px #6b728033}sl-button[variant=secondary]::part(base):disabled{background-color:transparent;border-color:var(--primary);color:var(--primary);opacity:.5;cursor:not-allowed}sl-button::part(label){padding-left:8px;padding-right:8px;font-size:14px;font-weight:500}sl-icon{width:20px;height:20px}sl-divider{margin:8px 0}", u = "html.sl-theme-dark{color:#f6f6f6}.sl-theme-dark{--primary: #006cff}.sl-theme-dark .panel{background:#3c4453;color:#fff;box-shadow:0 1px 4px #0006}", b = ".panel sl-divider{margin-left:-16px;margin-right:-16px}";
class m {
constructor() {
l(this, "loadedResources");
this.loadedResources = /* @__PURE__ */ new Set();
}
/**
* Load a CSS stylesheet
*/
loadCSS(r, o = null) {
return new Promise((e, s) => {
if (this.loadedResources.has(r)) {
e(void 0);
return;
}
const t = document.createElement("link");
t.rel = "stylesheet", t.type = "text/css", t.href = r, o && (t.id = o), t.onload = () => {
this.loadedResources.add(r), e(void 0);
}, t.onerror = () => {
s(new Error(`Failed to load CSS: ${r}`));
}, document.head.appendChild(t);
});
}
/**
* Load a JavaScript module
*/
loadScript(r, o = "module", e = null) {
return new Promise((s, t) => {
if (this.loadedResources.has(r)) {
s(void 0);
return;
}
const i = document.createElement("script");
i.src = r, i.type = o, e && (i.id = e), i.onload = () => {
this.loadedResources.add(r), s(void 0);
}, i.onerror = () => {
t(new Error(`Failed to load script: ${r}`));
}, document.head.appendChild(i);
});
}
/**
* Execute inline script
*/
executeInlineScript(r, o = "module") {
const e = document.createElement("script");
e.type = o, e.textContent = r, document.head.appendChild(e);
}
/**
* Load all resources in sequence
*/
async loadAllResources() {
try {
await this.loadCSS(
"https://cdn.jsdelivr.net/npm/lucide-static@0.516.0/font/lucide.css",
"lucide-css"
), await this.loadCSS(
"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap",
"ibm-plex-font"
), await this.loadCSS(
"https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/themes/light.css",
"shoelace-theme-light"
), await this.loadCSS(
"https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/themes/dark.css",
"shoelace-theme-dark"
), await this.loadScript(
"https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/shoelace-autoloader.js",
"module",
"shoelace-autoloader"
), await new Promise((o) => setTimeout(o, 100)), this.executeInlineScript(`
import { registerIconLibrary } from 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/utilities/icon-library.js';
registerIconLibrary('lucide', {
resolver: name =>
\`https://cdn.jsdelivr.net/npm/lucide-static@0.511.0/icons/\${name}.svg\`
});
// TODO: register the other system icons
registerIconLibrary('system', {
resolver: name => name === 'check'
? 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjUgMS4zNzVMMy42ODc1IDYuMTg3NUwxLjUgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjY2NjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K'
: \`/path/to/custom/icons/\${name}.svg\`
});
`, "module"), document.dispatchEvent(new CustomEvent("resourcesLoaded"));
} catch (r) {
throw console.error("Error loading resources:", r), r;
}
}
}
const y = ".sl-theme-dark sl-switch::part(control){background:var(--primary-lighter)}sl-switch::part(thumb){border:0;background-color:#fff;transition:all .1s ease-out;width:12px;height:12px}.sl-theme-dark sl-switch::part(thumb){background:#242533;border-color:#b6c2e2}sl-switch::part(control){border:0px solid var(--grey);background-color:var(--grey-light);width:32px;height:16px}sl-switch[checked]::part(control){border:1px solid var(--grey);background-color:var(--primary)}sl-switch::part(control):hover{border:1px solid var(--grey-nuanced);background-color:var(--grey)}sl-switch[checked]::part(control):hover{border:1px solid var(--grey-nuanced);background-color:var(--primary-darker)}sl-switch::part(control):focus-visible{outline:1px solid var(--primary);outline-offset:1px}sl-switch[disabled]::part(control){background-color:var(--grey);border:0px solid var(--grey);opacity:.5;cursor:not-allowed}sl-switch[checked][disabled]::part(control){background-color:var(--primary);border:1px solid var(--grey);opacity:.5;cursor:not-allowed}@media (prefers-contrast: high){sl-switch::part(control){border-width:3px}sl-switch::part(thumb){border-width:2px}}@media (prefers-reduced-motion: reduce){sl-switch::part(control),sl-switch::part(thumb),sl-switch::part(label){transition:none}}sl-checkbox::part(control){padding:1px;border-radius:2px;border:1px solid var(--grey);width:14px;height:14px;transition:all .1s ease-out}sl-checkbox::part(control):hover{border-color:var(--primary)}sl-checkbox[checked]::part(control){border-color:var(--primary);background-color:var(--primary)}sl-checkbox[checked]::part(control):hover{border-color:var(--primary-dark);background-color:var(--primary-dark)}sl-checkbox::part(control):focus-visible{outline:2px solid var(--grey-transparent)}sl-checkbox[checked]::part(control):focus-visible{outline:2px solid var(--primary-transparent)}sl-checkbox[disabled]::part(control){background-color:var(--grey);border-color:var(--grey);opacity:.5;cursor:not-allowed}sl-checkbox[checked][disabled]::part(control){background-color:var(--primary);border-color:var(--primary);opacity:.5;cursor:not-allowed}", g = "html,body{font-family:IBM Plex Sans,sans-serif;font-size:14px;font-weight:400}:root{--primary: #006cff;--primary-dark: #104389;--primary-darker: #00258F;--primary-light: #1a70e5;--primary-lighter: #eef1f8;--primary-transparent: #006cff4d;--grey: #B6C2E2;--grey-light: #EEF1F8;--grey-nuanced: #A7B5DA;--grey-transparent: #B6C2E24D}.panel{background:#fff;position:absolute;top:48px;left:12px;padding:16px;border-radius:8px;width:228px;box-shadow:0 1px 4px #00000026;box-sizing:border-box;display:flex;flex-direction:column;gap:12px;color:#000}.sl-theme-dark .panel{background:#3c4453;color:#fff;box-shadow:0 1px 4px #0006}.row{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.title{margin-bottom:4px}", c = location.origin;
!c.includes("localhost") && c !== "https://doc.linkurious.com" && console.warn(`@linkurious/ogma-ui-kit is not meant to be used outside of the Linkurious documentation website.
Linkurious will not take responsibility for any issues that may arise from running this code outside of the intended environment.
This package is not supported for external use, and Linkurious will not respond to any support requests or tickets related to it.
`);
const n = new m();
document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", () => {
n.loadAllResources();
}) : n.loadAllResources();
[g, h, y, b, u].forEach((a) => {
const r = document.createElement("style");
r.textContent = a, document.head.appendChild(r);
});