@luzmo/embed
Version:
A modern [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) for [Luzmo](https://luzmo.com) dashboards in your web application.
1,460 lines (1,431 loc) • 56.2 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var __decorateClass = (decorators, target, key, kind) => {
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
for (var i = decorators.length - 1, decorator; i >= 0; i--)
if (decorator = decorators[i])
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
if (kind && result)
__defProp(target, key, result);
return result;
};
// libs/embed-libs/embed/src/index.ts
var src_exports = {};
__export(src_exports, {
LuzmoEmbedDashboard: () => LuzmoEmbedDashboard,
LuzmoEmbedVizItem: () => LuzmoEmbedVizItem,
LuzmoIQEmbedAnswerComponent: () => LuzmoIQEmbedAnswerComponent,
LuzmoIQEmbedChatComponent: () => LuzmoIQEmbedChatComponent,
addJSONSchemas: () => addJSONSchemas,
fetchJSONSchema: () => fetchJSONSchema,
getCachedJSONSchema: () => getCachedJSONSchema,
getCachedJSONSchemas: () => getCachedJSONSchemas,
getJSONSchemaUrl: () => getJSONSchemaUrl,
luzmoRefParserOptions: () => luzmoRefParserOptions,
selectedDataUtils: () => import_shared_embed4.selectedDataUtils
});
module.exports = __toCommonJS(src_exports);
var import_shared_embed4 = require("@luzmo/shared-embed");
var import_lit6 = require("lit");
// libs/embed-libs/embed/src/lib/dashboard/dashboard-base.ts
var SharedLib2 = __toESM(require("@luzmo/shared-embed"));
var import_shared_embed = require("@luzmo/shared-embed");
var import_lit2 = require("lit");
var import_decorators = require("lit/decorators.js");
var import_style_map = require("lit/directives/style-map.js");
// libs/embed-libs/embed/package.json
var version = "6.6.0";
// libs/embed-libs/embed/src/lib/helper/event-bus-handler.ts
var SharedLib = __toESM(require("@luzmo/shared-embed"));
// libs/embed-libs/embed/src/lib/luzmo-service.ts
var LuzmoDashboardService = class {
constructor() {
this._dashboardComponents = [];
}
};
var luzmo_service_default = new LuzmoDashboardService();
// libs/embed-libs/embed/src/lib/helper/event-bus-handler.ts
var _setEventHandler = () => {
if (typeof window.__luzmoMessageHandler === "function") {
return;
}
window.__luzmoMessageHandler = (event) => {
const dashboardComponent = luzmo_service_default._dashboardComponents.find(
(c) => event.data.name === c._iframeId
);
if (!dashboardComponent) {
return;
}
switch (event.data?.type) {
case "load": {
dashboardComponent.dispatchEvent(
new CustomEvent("load", { detail: { data: event.data } })
);
if (dashboardComponent._loadTimeoutHandle) {
clearTimeout(dashboardComponent._loadTimeoutHandle);
dashboardComponent._loadTimeoutHandle = void 0;
}
dashboardComponent.iframeLoaded = true;
dashboardComponent.dimensions = event.data.dimensions;
dashboardComponent._calculateDimAfterDashboardLoaded();
break;
}
case "error": {
dashboardComponent.dashboardError = true;
if (dashboardComponent._loadTimeoutHandle) {
clearTimeout(dashboardComponent._loadTimeoutHandle);
dashboardComponent._loadTimeoutHandle = void 0;
}
dashboardComponent.iframeLoaded = true;
dashboardComponent._displayError();
console.error("Dashboard error:", event.data.errorMsg ?? event.data.error?.msg);
break;
}
case "data": {
SharedLib.resolvePromise(
dashboardComponent,
event.data.requestId,
event.data.data
);
break;
}
case "filters": {
SharedLib.resolvePromise(
dashboardComponent,
event.data.requestId,
event.data.filters
);
break;
}
case "getAccessibleDashboards": {
SharedLib.resolvePromise(
dashboardComponent,
event.data.requestId,
event.data.accessibleDashboards
);
break;
}
case "dashboardAction": {
dashboardComponent.dispatchEvent(
new CustomEvent("dashboardAction", { detail: { data: event.data } })
);
break;
}
case "export": {
if (event.data.error) {
SharedLib.rejectPromise(
dashboardComponent,
event.data.requestId,
event.data
);
} else {
dashboardComponent.dispatchEvent(
new CustomEvent("exported", { detail: { data: event.data } })
);
SharedLib.resolvePromise(
dashboardComponent,
event.data.requestId,
event.data
);
}
break;
}
case "changedFilters": {
dashboardComponent.dispatchEvent(
new CustomEvent("changedFilters", { detail: { data: event.data } })
);
break;
}
case "customEvent": {
dashboardComponent.dispatchEvent(
new CustomEvent("customEvent", { detail: { data: event.data } })
);
break;
}
case "chartsRendered":
case "itemsRendered": {
event.data.type = "itemsRendered";
dashboardComponent.dispatchEvent(
new CustomEvent("itemsRendered", { detail: { data: event.data } })
);
break;
}
case "setEditMode": {
if (event.data.error) {
SharedLib.rejectPromise(
dashboardComponent,
event.data.requestId,
event.data
);
} else {
SharedLib.resolvePromise(
dashboardComponent,
event.data.requestId,
event.data
);
dashboardComponent.params.editMode = event.data.editMode;
dashboardComponent._containerStyle = SharedLib.containerStyles(dashboardComponent);
if (dashboardComponent.dimensions) {
SharedLib._setCalculatedDimensions(dashboardComponent);
}
}
break;
}
case "calculatedDimensions": {
dashboardComponent.dimensions = event.data.dimensions;
SharedLib._setCalculatedDimensions(dashboardComponent);
break;
}
case "setSelectedData":
case "setFilters": {
if (event.data.error) {
SharedLib.rejectPromise(
dashboardComponent,
event.data.requestId,
event.data
);
} else {
SharedLib.resolvePromise(
dashboardComponent,
event.data.requestId,
event.data
);
}
break;
}
case "setPreview": {
if (event.data.error) {
SharedLib.rejectPromise(
dashboardComponent,
event.data.requestId,
event.data
);
} else {
SharedLib.resolvePromise(
dashboardComponent,
event.data.requestId,
event.data
);
}
break;
}
}
};
window.addEventListener("message", window.__luzmoMessageHandler, false);
};
// libs/embed-libs/embed/src/lib/dashboard/dashboard-styles.ts
var import_lit = require("lit");
var dashboardStyles = import_lit.css`
:host {
display: block;
height: 100%;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
:host {
position: relative;
width: 100%;
}
.luzmo-embed-dashboard {
background: transparent;
padding: 0;
border: 0;
}
.luzmo-embed-dashboard-ede {
}
.luzmo-embed-container-ede {
width: 100%;
height: 100%;
}
.luzmo-container-loader {
width: 100%;
position: relative;
}
.luzmo-lc {
margin: 0 auto;
}
.luzmo-loading-message {
width: 100%;
height: 20px;
text-align: center;
margin-bottom: 16px;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
}
.luzmo-loading-circle {
box-sizing: border-box;
margin: 16px auto;
position: relative;
text-indent: -9999em;
animation: spin 0.6s infinite linear;
}
.luzmo-loading-circle,
.luzmo-loading-circle:after {
border-radius: 50%;
width: 32px;
height: 32px;
}
.itemEmbedding:after {
width: 24px;
height: 24px;
}
.luzmo-error {
background: transparent;
padding: 48px 0;
margin: 0 auto;
width: 80%;
border: 0;
text-align: center;
min-height: 192px;
}
.dashboard-error {
font-size: 30px;
background: transparent;
padding: 48px 0;
margin: 0 auto;
width: 80%;
border: 0;
text-align: center;
min-height: 192px;
}
.luzmo-loader {
top: 0;
left: 0;
width: 100%;
min-height: 400px;
position: absolute;
transition-duration: 0.3s;
}
`;
// libs/embed-libs/embed/src/lib/dashboard/dashboard-base.ts
var dashboardRemote = "DashboardApp";
var LuzmoDashboard = class extends import_lit2.LitElement {
constructor() {
super();
this.language = "auto";
this.editorLanguage = "auto";
this.screenMode = "auto";
this.switchScreenModeOnResize = true;
this.editMode = "view";
this.embedMode = "iframe";
this.iframeStyle = {};
this._containerStyle = {};
this._loaderStyle = {};
this._lcStyle = {};
this._loadingCircleStyle = {};
this._containerLoaderStyle = {};
this._loaderMsg = "";
this._itemEmbedding = false;
this.browserError = false;
this.browserErrorMsg = "";
this.dashboardError = false;
this.browserNotSupported = [];
this.libVersion = version + "-wc-luzmo";
this.isLibraryLoaded = false;
this.currentAuthKey = null;
this.currentAuthToken = null;
this.isInitCalled = false;
this.attributesMap = {
dashboardId: "dashboard-id",
dashboardSlug: "dashboard-slug",
itemId: "item-id",
language: "language",
editorLanguage: "editorLanguage",
qeVersion: "qe-version",
screenMode: "screen-mode",
switchScreenModeOnResize: "switch-screen-mode-on-resize",
authKey: "auth-key",
authToken: "auth-token",
editMode: "edit-mode",
theme: "theme",
mainColor: "main-color",
accentColor: "accent-color",
loaderBackground: "loader-background",
loaderFontColor: "loader-font-color",
loaderSpinnerColor: "loader-spinner-color",
loaderSpinnerBackground: "loader-spinner-background",
appServer: "app-server",
apiHost: "api-host",
itemDimensions: "item-dimensions",
timezoneId: "timezone-id"
};
this.loaderSize = 32;
this.borderWidth = 3;
this.minHeight = 400;
this._containerId = SharedLib2.uuidv4();
this._iframeId = `luzmo-dashboard-${this._containerId}`;
this.iframeLoaded = false;
this.promises = {};
this.params = this._setOptions();
this._onResize = () => {
if (this.shadowRoot?.querySelector(".dashboard-container")) {
this.containerWidth = this.luzmoEmbedContainer.offsetWidth;
if (this.params.switchScreenModeOnResize && this.params.screenMode === "auto") {
for (const d of SharedLib2.EXTENTS) {
if (d.width[0] <= window.innerWidth && window.innerWidth <= d.width[1]) {
this.currentScreenMode = d.mode;
}
}
}
if (this.iframeLoaded) {
this._calculateDimAfterDashboardLoaded();
} else {
if (this.dimensions) {
this.containerWidth = this.luzmoEmbedContainer.offsetWidth;
SharedLib2._setCalculatedDimensions(this);
}
}
}
};
this._resizeObserver = new ResizeObserver((entries) => {
window.requestAnimationFrame(() => {
if (!Array.isArray(entries) || entries.length === 0) {
return;
}
this._onResize();
});
});
}
// Set resize event listener
connectedCallback() {
super.connectedCallback();
}
// Set resize event listener
disconnectedCallback() {
super.disconnectedCallback();
this._resizeObserver.disconnect();
for (const promiseKey of Object.keys(this.promises)) {
this.promises[promiseKey].reject(
new Error("Dashboard component was removed")
);
}
}
firstUpdated() {
this._loaderMsg = SharedLib2.getLoader(this)?.loadingMsg;
this._loaderStyles();
luzmo_service_default._dashboardComponents.push(this);
if (this.luzmoEmbedContainer) {
this._resizeObserver.observe(this.luzmoEmbedContainer);
}
}
initComponent() {
this.params = this._setOptions();
if (this.isWebComponentViewMode()) {
SharedLib2.loadLibrary(this.params.appServer, dashboardRemote).then(async () => {
this.isLibraryLoaded = true;
await this.updateComplete;
const oldReference = this.renderRoot.querySelector("dashboard-component");
this.dashboardReference = oldReference.cloneNode(true);
oldReference.replaceWith(this.dashboardReference);
this.dashboardReference.addEventListener("load", (payload) => {
this.containerWidth = this.dashboardReference.offsetWidth;
this.dimensions = payload.detail.dimensions;
SharedLib2._setCalculatedDimensions(this);
window.dispatchEvent(new Event("resize"));
this.dispatchEvent(new CustomEvent("load", payload));
});
this.dashboardReference.addEventListener("itemsRendered", (payload) => this.dispatchEvent(new CustomEvent("itemsRendered", payload)));
this.dashboardReference.addEventListener("customEvent", (payload) => this.dispatchEvent(new CustomEvent("customEvent", payload)));
this.dashboardReference.addEventListener("changedFilters", (payload) => this.dispatchEvent(new CustomEvent("changedFilters", payload)));
this.dashboardReference.addEventListener("dashboardAction", (payload) => this.dispatchEvent(new CustomEvent("dashboardAction", payload)));
this.dashboardReference.addEventListener("export", (payload) => this.dispatchEvent(new CustomEvent("exported", payload)));
this.setAllAttributes();
});
} else {
this.containerWidth = this.container?.clientWidth;
SharedLib2._extendAndValidate(this);
SharedLib2._browserCheck(this);
this._setupLoader();
if (!this.params.error) {
this._loaderStyles();
_setEventHandler();
this._iframeUrl = SharedLib2.createIframeUrl(this);
this.iframe?.setAttribute("src", this._iframeUrl);
this.iframeStyle = SharedLib2.calculateIframeStyles(this);
}
}
}
setAllAttributes() {
if (this.dashboardReference) {
for (const key in this.attributesMap) {
if (!["authKey", "authToken", "apiHost", "itemDimensions"].includes(key) && this.params[key]) {
this.dashboardReference.setAttribute(this.attributesMap[key], this.params[key]);
}
}
if (this.params.itemDimensions) {
this.dashboardReference.setAttribute("item-dimensions", JSON.stringify(this.params.itemDimensions));
}
if (this.params.apiHost) {
this.dashboardReference.setAttribute("api-host", SharedLib2.removeTrailingSlash(this.params.apiHost));
}
if (this.params.key) {
this.dashboardReference.setAttribute("auth-key", this.params.key);
}
if (this.params.token) {
this.dashboardReference.setAttribute("auth-token", this.params.token);
}
}
}
// Reload dashboard when triggerproperty changes
updated(changedProperties) {
const triggerProperties = /* @__PURE__ */ new Set([
"dashboardId",
"dashboardSlug",
"itemId",
"language",
"editorLanguage",
"qeVersion",
"theme",
"editMode",
"screenMode",
"switchScreenModeOnResize",
"authToken",
"authKey",
"appServer",
"apiHost",
"timezoneId",
"itemDimensions"
]);
const conditionsToCheck = ["dashboardId", "dashboardSlug", "itemId"];
let callInitComponent = false;
for (const condition of conditionsToCheck) {
callInitComponent = callInitComponent || changedProperties.get(condition) === void 0 && this[condition] !== void 0;
}
if (callInitComponent && !this.isInitCalled) {
this.initComponent();
this.isInitCalled = true;
return;
}
if (this.isWebComponentViewMode()) {
if (this.dashboardReference) {
for (const [propertyName] of changedProperties.entries()) {
if (propertyName === "appSever") {
SharedLib2.loadLibrary(changedProperties[propertyName], dashboardRemote).then(async () => {
this.isLibraryLoaded = true;
await this.updateComplete;
this.dashboardReference = this.renderRoot.querySelector("dashboard-component");
this.setAllAttributes();
});
} else if (this.attributesMap[propertyName]) {
const mappedAttributeName = this.attributesMap[propertyName] ?? propertyName;
const attributeValue = typeof this[propertyName] === "object" ? JSON.stringify(this[propertyName]) : this[propertyName]?.toString() || this[propertyName];
this.dashboardReference.setAttribute(mappedAttributeName, attributeValue);
}
}
}
} else {
for (const [propertyName] of changedProperties.entries()) {
if (triggerProperties.has(propertyName) && propertyName !== "editMode") {
this.iframeLoaded = false;
if (this._loadTimeoutHandle) {
clearTimeout(this._loadTimeoutHandle);
}
this._loadTimeoutHandle = setTimeout(() => {
console.warn(
"Failed to load dashboard, appServer is likely down or unreachable."
);
}, 15 * 1e3);
this.params = this._setOptions();
SharedLib2._extendAndValidate(this);
this._setupLoader();
this._loaderStyles();
this._iframeUrl = SharedLib2.createIframeUrl(this);
if (this.iframe) {
this._updateIframeUrl();
}
this.iframeStyle = SharedLib2.calculateIframeStyles(this);
} else if (triggerProperties.has(propertyName) && propertyName === "editMode") {
if (this.iframeLoaded) {
this.setEditMode(this.editMode);
}
this.params = this._setOptions();
}
}
}
}
// Set params
_setOptions() {
const defaultParameters = {
dashboardId: this.dashboardId,
dashboardSlug: this.dashboardSlug
};
if (this.itemId) {
defaultParameters.itemId = this.itemId;
this._itemEmbedding = true;
} else {
this._itemEmbedding = false;
}
if (this.language) {
defaultParameters.language = this.language;
}
if (this.editorLanguage) {
defaultParameters.editorLanguage = this.editorLanguage;
}
if (this.qeVersion) {
defaultParameters.qeVersion = this.qeVersion;
}
if (this.screenMode) {
defaultParameters.screenMode = this.screenMode;
}
defaultParameters.switchScreenModeOnResize = this.switchScreenModeOnResize;
if (this.authToken) {
defaultParameters.token = this.authToken;
}
if (this.authKey) {
defaultParameters.key = this.authKey;
}
if (this.editMode) {
defaultParameters.editMode = this.editMode;
}
if (this.theme) {
defaultParameters.theme = this.theme;
}
if (this.mainColor) {
defaultParameters.mainColor = this.mainColor;
}
if (this.accentColor) {
defaultParameters.accentColor = this.accentColor;
}
if (this.loaderBackground) {
defaultParameters.loaderBackground = this.loaderBackground;
}
if (this.loaderFontColor) {
defaultParameters.loaderFontColor = this.loaderFontColor;
}
if (this.loaderSpinnerColor) {
defaultParameters.loaderSpinnerColor = this.loaderSpinnerColor;
}
if (this.loaderSpinnerBackground) {
defaultParameters.loaderSpinnerBackground = this.loaderSpinnerBackground;
}
if (this.timezoneId) {
defaultParameters.timezoneId = this.timezoneId;
}
if (this.itemDimensions) {
defaultParameters.itemDimensions = this.itemDimensions;
}
if (this.appServer) {
this.appServer = this.isWebComponentViewMode() ? SharedLib2.removeTrailingSlash(this.appServer) : SharedLib2.addTrailingSlash(this.appServer);
defaultParameters.appServer = this.appServer;
} else {
this.appServer = SharedLib2.addTrailingSlash(
SharedLib2.DEFAULT_PARAMETERS.appServer
);
defaultParameters.appServer = this.appServer;
}
if (this.apiHost) {
this.apiHost = this.isWebComponentViewMode() ? SharedLib2.removeTrailingSlash(this.apiHost) : SharedLib2.addTrailingSlash(this.apiHost);
defaultParameters.apiHost = this.apiHost;
} else {
this.apiHost = this.appServer.includes("luzmo.com") ? this.appServer.replace("app", "api") : this.appServer;
defaultParameters.apiHost = this.apiHost;
}
this.currentAuthKey = this.authKey;
this.currentAuthToken = this.authToken;
return defaultParameters;
}
_updateIframeUrl() {
SharedLib2.updateIframeUrl(this.iframe, this._iframeUrl);
}
// Setup loader / browser error
_setupLoader() {
const data = SharedLib2.getLoader(this);
this._loaderMsg = data.loadingMsg;
if (data.errorMsg) {
this.browserError = true;
this.browserErrorMsg = data.errorMsg;
this._displayError();
}
}
_displayError() {
if (this.dashboardError) {
this._loaderStyles();
this.iframeStyle.opacity = 1;
}
if (this.browserError) {
this._containerStyle.display = "none";
}
}
_calculateDimAfterDashboardLoaded() {
this.dashboardError = false;
this._loaderStyles();
SharedLib2._setCalculatedDimensions(this);
}
// Set loader styles
_loaderStyles() {
this._containerStyle = SharedLib2.containerStyles(this);
this._loaderStyle = SharedLib2.loaderStyles(this);
this._loadingCircleStyle = SharedLib2.plStyles(this);
this._containerLoaderStyle = SharedLib2.containerLoaderStyles(this);
this._lcStyle = SharedLib2.lcStyles(this);
}
static get styles() {
return [dashboardStyles];
}
render() {
let toBeRenderedHTML;
const loader = import_lit2.html`
<div
class="luzmo-container-loader"
id="luzmo-container-loader-${this._containerId}"
style=${(0, import_style_map.styleMap)(
this._containerLoaderStyle
)}
>
<div
class="luzmo-loader"
id="luzmo-loader-${this._containerId}"
style=${(0, import_style_map.styleMap)(this._loaderStyle)}
>
<div
class="luzmo-lc"
style=${(0, import_style_map.styleMap)(this._lcStyle)}
>
<div
class="luzmo-loading-circle"
style=${(0, import_style_map.styleMap)(
this._loadingCircleStyle
)}
></div>
${this._itemEmbedding ? "" : import_lit2.html`
<div
class="luzmo-loading-message"
style=${(0, import_style_map.styleMap)({ color: this.loaderFontColor })}
>
${this._loaderMsg}
</div>
`}
</div>
</div>
</div>
`;
if (this.isWebComponentViewMode()) {
toBeRenderedHTML = this.isLibraryLoaded ? import_lit2.html`
${this.dashboardId || this.dashboardSlug ? import_lit2.html`
<dashboard-component dashboard-id="${this.params.dashboardId}" app-server="${this.params.appServer}"
api-host="${this.params.apiHost}"></dashboard-component>
` : import_lit2.html`
<div id="luzmo-error-${this._containerId}">
<h3 class="luzmo-error">${this.browserErrorMsg}</h3>
</div>
`}
` : import_lit2.html`${loader}`;
} else {
toBeRenderedHTML = import_lit2.html`
${this.dashboardId || this.dashboardSlug ? import_lit2.html`
${loader}
<iframe
class="luzmo-embed-dashboard ${this.isWebComponentViewMode() ? "" : `luzmo-embed-dashboard-ede`}"
id="${this._iframeId}"
name="${this._iframeId}"
style=${(0, import_style_map.styleMap)(this.iframeStyle)}
src="${this._iframeUrl}"
frameborder="0"
></iframe>
` : import_lit2.html`<!-- the dashboard will inititialize when you provide a dashboardSlug or a dashboardId -->`}
${this.browserError ? import_lit2.html`
<div id="luzmo-error-${this._containerId}">
<h3 class="luzmo-error">${this.browserErrorMsg}</h3>
</div>
` : ""}
`;
}
return import_lit2.html`
<div class="${import_shared_embed.luzmoEmbedContainerClass} ${this.isWebComponentViewMode() ? "" : `${import_shared_embed.luzmoEmbedContainerClass}-ede`}">
<div
class="dashboard-container"
style=${(0, import_style_map.styleMap)(Object.assign({}, this._containerStyle, {
width: this.iframeStyle.width ?? "100%",
height: this.iframeStyle.height ?? "100%"
}))}
>
${toBeRenderedHTML}
</div>
</div>
`;
}
getDashboards() {
return new Promise(
(resolve) => resolve(luzmo_service_default._dashboardComponents)
);
}
// Public methods
getData(itemId) {
if (this.isWebComponentViewMode() && this.dashboardReference) {
return this.dashboardReference.getData(itemId);
}
if (!this.isWebComponentViewMode()) {
return SharedLib2.getData(this, this.iframe, itemId);
}
return Promise.reject();
}
getFilters() {
if (this.isWebComponentViewMode() && this.dashboardReference) {
return this.dashboardReference.getFilters();
}
if (!this.isWebComponentViewMode()) {
return SharedLib2.getFilters(this, this.iframe);
}
return Promise.reject();
}
setSelectedData(itemId, filters) {
if (this.isWebComponentViewMode() && this.dashboardReference) {
return this.dashboardReference.setSelectedData(itemId, filters);
}
if (!this.isWebComponentViewMode()) {
return SharedLib2.setSelectedData(this, this.iframe, itemId, filters);
}
return Promise.reject();
}
setAuthorization(key, token) {
this.currentAuthKey = key;
this.currentAuthToken = token;
if (this.isWebComponentViewMode() && this.dashboardReference) {
return this.dashboardReference.setAuthorization(key, token);
}
if (!this.isWebComponentViewMode()) {
return SharedLib2.setAuthorization(this, this.iframe, key, token);
}
return Promise.reject();
}
refreshData(itemId) {
if (this.isWebComponentViewMode() && this.dashboardReference) {
return this.dashboardReference.refreshData(itemId);
}
if (!this.isWebComponentViewMode()) {
return itemId ? SharedLib2.refreshData(this, this.iframe, itemId) : SharedLib2.refreshData(this, this.iframe);
}
return Promise.reject();
}
reloadDashboard() {
if (this.isWebComponentViewMode() && this.dashboardReference) {
return this.dashboardReference.reloadDashboard();
}
if (!this.isWebComponentViewMode()) {
return SharedLib2.reloadDashboard(this, this.iframe);
}
return Promise.reject();
}
exportDashboard(format) {
if (this.isWebComponentViewMode() && this.dashboardReference) {
return this.dashboardReference.exportDashboard(format);
}
if (!this.isWebComponentViewMode()) {
return format ? SharedLib2.exportDashboard(this, this.iframe, format) : SharedLib2.exportDashboard(this, this.iframe);
}
return Promise.reject();
}
getAccessibleDashboards() {
return SharedLib2.getAccessibleDashboards(this);
}
addFilters(itemId, filters) {
return this.dashboardReference.addFilters(itemId, filters);
}
setEditMode(editMode) {
if (this.dashboardReference && editMode === "view") {
this.editMode = "view";
this.params.editMode = "view";
this.initComponent();
return Promise.resolve({
type: "setEditMode",
editMode
});
}
if (this.dashboardReference && ["editFull", "editLimited"].includes(editMode)) {
this.editMode = editMode;
this.params.editMode = editMode;
this.initComponent();
return Promise.resolve({
type: "setEditMode",
editMode
});
}
if (this.isWebComponentViewMode() && this.dashboardReference) {
return this.dashboardReference.setEditMode(editMode);
}
if (!this.isWebComponentViewMode()) {
return SharedLib2.setEditMode(this, this.iframe, editMode);
}
return Promise.reject();
}
setPreview(preview) {
if (this.isWebComponentViewMode() && this.dashboardReference) {
return this.dashboardReference.setPreview(preview);
}
return SharedLib2.setPreview(this, this.iframe, preview);
}
isWebComponentViewMode() {
return this.embedMode === "webComponent" && (this.params.editMode === "view" || this.params.editMode === void 0);
}
};
__decorateClass([
(0, import_decorators.query)(".dashboard-container")
], LuzmoDashboard.prototype, "container", 2);
__decorateClass([
(0, import_decorators.query)(`.${import_shared_embed.luzmoEmbedContainerClass}`)
], LuzmoDashboard.prototype, "luzmoEmbedContainer", 2);
__decorateClass([
(0, import_decorators.query)("iframe")
], LuzmoDashboard.prototype, "iframe", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "dashboardId", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "dashboardSlug", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "itemId", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "language", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "editorLanguage", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "qeVersion", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "screenMode", 2);
__decorateClass([
(0, import_decorators.property)({
converter: {
fromAttribute: (value) => value === "true",
toAttribute: String
}
})
], LuzmoDashboard.prototype, "switchScreenModeOnResize", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "editMode", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "theme", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "mainColor", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "accentColor", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "authToken", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "authKey", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "loaderBackground", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "loaderFontColor", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "loaderSpinnerColor", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "loaderSpinnerBackground", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "appServer", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "timezoneId", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "apiHost", 2);
__decorateClass([
(0, import_decorators.property)({ type: Object })
], LuzmoDashboard.prototype, "itemDimensions", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "embedMode", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "_containerId", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "_iframeId", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "params", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "_iframeUrl", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "iframeLoaded", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "promises", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "iframeStyle", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "_containerStyle", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "_loaderStyle", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "_lcStyle", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "_loadingCircleStyle", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "_containerLoaderStyle", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "_loaderMsg", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "containerWidth", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "dimensions", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "currentScreenMode", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "_itemEmbedding", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "browserError", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "browserErrorMsg", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "dashboardError", 2);
__decorateClass([
(0, import_decorators.property)({ attribute: false })
], LuzmoDashboard.prototype, "browserNotSupported", 2);
__decorateClass([
(0, import_decorators.property)()
], LuzmoDashboard.prototype, "libVersion", 2);
__decorateClass([
(0, import_decorators.state)()
], LuzmoDashboard.prototype, "isLibraryLoaded", 2);
__decorateClass([
(0, import_decorators.state)()
], LuzmoDashboard.prototype, "dashboardReference", 2);
__decorateClass([
(0, import_decorators.state)()
], LuzmoDashboard.prototype, "currentAuthKey", 2);
__decorateClass([
(0, import_decorators.state)()
], LuzmoDashboard.prototype, "currentAuthToken", 2);
__decorateClass([
(0, import_decorators.state)()
], LuzmoDashboard.prototype, "isInitCalled", 2);
// libs/embed-libs/embed/src/lib/dashboard/dashboard-component.ts
var LuzmoEmbedDashboard = class extends LuzmoDashboard {
};
if (!customElements.get("luzmo-embed-dashboard")) {
customElements.define("luzmo-embed-dashboard", LuzmoEmbedDashboard);
}
// libs/embed-libs/embed/src/lib/viz-item/viz-item.base.ts
var SharedLib3 = __toESM(require("@luzmo/shared-embed"));
var import_lit3 = require("lit");
var import_decorators2 = require("lit/decorators.js");
var dashboardContentsVersion = "0.1.96";
var vizItemRemote = "VizItemApp";
var LuzmoBaseVizItem = class extends import_lit3.LitElement {
constructor() {
super(...arguments);
this.appServer = "https://app.luzmo.com";
this.apiHost = "https://api.luzmo.com";
this.slots = [];
this.version = version + "-wc-luzmo";
this.dashboardContentsVersion = dashboardContentsVersion;
this.libVersion = version + "-wc-luzmo";
this.postInitCallQueue = [];
}
static {
// Static styles to set host display to block, else it is not shown at all for some reason.
this.styles = import_lit3.css`
:host {
display: block;
width: 100%;
height: 100%;
}
luzmo-embed-viz-item {
width: 100%;
height: 1000%;
display: block;
}
`;
}
createRenderRoot() {
if (!this.style.display) {
this.style.display = "block";
}
if (!this.style.height) {
this.style.height = "100%";
}
if (!this.style.width) {
this.style.width = "100%";
}
return this;
}
canInitializeVizItem() {
return !!(this.type || this.dashboardId && this.itemId);
}
getFilters() {
return this.chartElement.getFilters();
}
export(type = "png") {
return this.chartElement.export(type);
}
getData() {
return this.chartElement.getData();
}
refreshData() {
return this.chartElement.refreshData();
}
setSelectedData(selectedDataInput) {
return this.chartElement.setSelectedData(void 0, selectedDataInput);
}
setAuthorization(key, token) {
return this.chartElement.setAuthorization(key, token);
}
attributeChangedCallback(name, _old, value) {
super.attributeChangedCallback(name, _old, value);
if (name === "selecteddata") {
if (this.chartElement) {
this.setSelectedData(JSON.parse(value ?? "{}"));
} else {
this.postInitCallQueue.push([this.setSelectedData, [JSON.parse(value ?? "{}")]]);
}
}
}
async firstUpdated(_changedProperties) {
super.firstUpdated(_changedProperties);
if (this.canInitializeVizItem()) {
await SharedLib3.loadLibrary(this.appServer, vizItemRemote);
this.createAndAppendElement();
}
}
createAndAppendElement() {
if (!this.chartElement) {
this.chartElement = document.createElement("chart-component");
this.chartElement.setAttribute("embedding-mode", "chart");
this.chartElement.style.height = "100%";
this.chartElement.style.width = "100%";
this.chartElement.style.display = "block";
this.chartElement.addEventListener("load", (payload) => this.dispatchEvent(new CustomEvent("load", payload)));
this.chartElement.addEventListener("rendered", (payload) => {
if (this.postInitCallQueue?.length > 0) {
for (const functionToCall of this.postInitCallQueue) {
functionToCall[0].bind(this)(...functionToCall[1]);
}
} else {
if (this.selectedData) {
this.setSelectedData(this.selectedData);
}
}
this.dispatchEvent(new CustomEvent("rendered", payload));
});
this.chartElement.addEventListener("changedFilters", (payload) => this.dispatchEvent(new CustomEvent("changedFilters", payload)));
this.chartElement.addEventListener("exported", (payload) => this.dispatchEvent(new CustomEvent("exported", payload)));
this.chartElement.addEventListener("customEvent", (payload) => this.dispatchEvent(new CustomEvent("customEvent", payload)));
this.updateVizItemProperties();
this.renderRoot.append(this.chartElement);
}
}
updateVizItemProperties() {
if (this.chartElement) {
for (const key in SharedLib3.libraryTypeToWebComponentTypeMapping) {
const value = this[key];
if (value) {
const attributeValue = ["appServer", "apiHost"].includes(key) ? SharedLib3.removeTrailingSlash(value) : value;
this.chartElement.setAttribute(
SharedLib3.libraryTypeToWebComponentTypeMapping[key],
typeof attributeValue === "object" ? JSON.stringify(attributeValue) : attributeValue
);
}
}
}
}
async updated(changedProperties) {
if (this.chartElement) {
for (const [propertyName] of changedProperties.entries()) {
const mappedAttributeName = SharedLib3.libraryTypeToWebComponentTypeMapping[propertyName] ?? propertyName;
const attributeValue = typeof this[propertyName] === "object" ? JSON.stringify(this[propertyName]) : this[propertyName]?.toString() ?? this[propertyName];
this.chartElement.setAttribute(mappedAttributeName, attributeValue);
}
} else {
if (this.canInitializeVizItem()) {
await SharedLib3.loadLibrary(this.appServer, vizItemRemote);
this.createAndAppendElement();
}
}
}
render() {
return import_lit3.html` `;
}
};
__decorateClass([
(0, import_decorators2.property)()
], LuzmoBaseVizItem.prototype, "appServer", 2);
__decorateClass([
(0, import_decorators2.property)()
], LuzmoBaseVizItem.prototype, "apiHost", 2);
__decorateClass([
(0, import_decorators2.property)({ type: Array })
], LuzmoBaseVizItem.prototype, "slots", 2);
__decorateClass([
(0, import_decorators2.property)({ type: Object })
], LuzmoBaseVizItem.prototype, "options", 2);
__decorateClass([
(0, import_decorators2.property)()
], LuzmoBaseVizItem.prototype, "type", 2);
__decorateClass([
(0, import_decorators2.property)()
], LuzmoBaseVizItem.prototype, "authKey", 2);
__decorateClass([
(0, import_decorators2.property)()
], LuzmoBaseVizItem.prototype, "authToken", 2);
__decorateClass([
(0, import_decorators2.property)()
], LuzmoBaseVizItem.prototype, "version", 2);
__decorateClass([
(0, import_decorators2.property)()
], LuzmoBaseVizItem.prototype, "contextId", 2);
__decorateClass([
(0, import_decorators2.property)({
converter: (value) => {
try {
return JSON.parse(value);
} catch {
return value;
}
}
})
], LuzmoBaseVizItem.prototype, "canFilter", 2);
__decorateClass([
(0, import_decorators2.property)({ type: Array })
], LuzmoBaseVizItem.prototype, "filters", 2);
__decorateClass([
(0, import_decorators2.property)()
], LuzmoBaseVizItem.prototype, "dashboardId", 2);
__decorateClass([
(0, import_decorators2.property)()
], LuzmoBaseVizItem.prototype, "itemId", 2);
__decorateClass([
(0, import_decorators2.property)({ type: Object })
], LuzmoBaseVizItem.prototype, "selectedData", 2);
__decorateClass([
(0, import_decorators2.property)()
], LuzmoBaseVizItem.prototype, "dashboardContentsVersion", 2);
__decorateClass([
(0, import_decorators2.property)()
], LuzmoBaseVizItem.prototype, "libVersion", 2);
// libs/embed-libs/embed/src/lib/viz-item/viz-item-component.ts
var LuzmoEmbedVizItem = class extends LuzmoBaseVizItem {
};
if (!customElements.get("luzmo-embed-viz-item")) {
customElements.define("luzmo-embed-viz-item", LuzmoEmbedVizItem);
}
// libs/embed-libs/embed/src/lib/iq-components/luzmo-iq-chat.ts
var import_shared_embed2 = require("@luzmo/shared-embed");
var import_lit4 = require("lit");
var import_decorators3 = require("lit/decorators.js");
var inputMap = {
aiEndpoint: "ai-endpoint",
appServer: "app-server",
apiHost: "api-host",
options: "options",
initialSuggestionsDatasetId: "initialSuggestionsDatasetId",
authKey: "auth-key",
authToken: "auth-token",
version: "version",
libVersion: "lib-version",
aydHost: "ayd-host",
availableDatasets: "available-datasets"
};
var embedChatTag = "luzmo-iq-embed-chat";
var chatComponentTag = "luzmo-iq-chat-component";
var LuzmoIQEmbedChatComponent = class extends import_lit4.LitElement {
constructor() {
super(...arguments);
this.appServer = "https://app.luzmo.com";
this.apiHost = "https://api.luzmo.com";
this.version = version + "-wc-luzmo";
this.libVersion = version + "-wc-luzmo";
this.remoteEntryServer = "http://localhost:4202/";
this.aydHost = "https://ayd.luzmo.com/";
}
static {
// Static styles to set host display to block, else it is not shown at all for some reason.
this.styles = import_lit4.css`
:host {
display: block;
width: 100%;
height: 100%;
}
`;
}
createRenderRoot() {
return this;
}
async firstUpdated(_changedProperties) {
super.firstUpdated(_changedProperties);
await (0, import_shared_embed2.loadLibrary)(this.calculatedAppServer, "IQApp");
this.createAndAppendElement();
}
get calculatedAppServer() {
return this.appServer.startsWith("http://localhost") ? this.remoteEntryServer : this.appServer;
}
createAndAppendElement() {
if (!this.chartElement) {
this.chartElement = document.createElement(chatComponentTag);
this.chartElement.addEventListener("load", (payload) => this.dispatchEvent(new CustomEvent("load", payload)));
this.updateVizItemProperties();
this.renderRoot.append(this.chartElement);
}
}
updateVizItemProperties() {
if (this.chartElement) {
for (const key in inputMap) {
const value = this[key];
if (value) {
const attributeValue = ["appServer", "apiHost", "aydHost"].includes(key) ? (0, import_shared_embed2.removeTrailingSlash)(value) : value;
this.chartElement.setAttribute(
inputMap[key],
typeof attributeValue === "object" ? JSON.stringify(attributeValue) : attributeValue
);
}
}
}
}
async updated(changedProperties) {
if (this.chartElement) {
for (const [propertyName] of changedProperties.entries()) {
const mappedAttributeName = inputMap[propertyName] ?? propertyName;
const attributeValue = typeof this[propertyName] === "object" ? JSON.stringify(this[propertyName]) : this[propertyName]?.toString() ?? this[propertyName];
this.chartElement.setAttribute(mappedAttributeName, attributeValue);
}
} else {
await (0, import_shared_embed2.loadLibrary)(this.calculatedAppServer, "IQApp");
this.createAndAppendElement();
}
}
render() {
return import_lit4.html``;
}
connectedCallback() {
super.connectedCallback();
const embedChat = document.querySelector(embedChatTag);
if (!embedChat) {
return;
}
const observer = new MutationObserver(() => {
const customChatWidgetContentSlot = embedChat.querySelector('*[slot="custom-chat-widget-content"]');
if (!customChatWidgetContentSlot) {
return;
}
const chatElement = embedChat.querySelector(chatComponentTag);
if (chatElement) {
chatElement.append(customChatWidgetContentSlot);
observer.disconnect();
}
});
observer.observe(embedChat, { childList: true, subtree: true });
}
};
__decorateClass([
(0, import_decorators3.property)()
], LuzmoIQEmbedChatComponent.prototype, "appServer", 2);
__decorateClass([
(0, import_decorators3.property)()
], LuzmoIQEmbedChatComponent.prototype, "apiHost", 2);
__decorateClass([
(0, import_decorators3.property)({ type: Object })
], LuzmoIQEmbedChatComponent.prototype, "options", 2);
__decorateClass([
(0, import_decorators3.property)({ type: String })
], LuzmoIQEmbedChatComponent.prototype, "initialSuggestionsDatasetId", 2);
__decorateClass([
(0, import_decorators3.property)()
], LuzmoIQEmbedChatComponent.prototype, "aiEndpoint", 2);
__decorateClass([
(0, import_decorators3.property)()
], LuzmoIQEmbedChatComponent.prototype, "authKey", 2);
__decorateClass([
(0, import_decorators3.property)()
], LuzmoIQEmbedChatComponent.prototype, "authToken", 2);
__decorateClass([
(0, import_decorators3.property)()
], LuzmoIQEmbedChatComponent.prototype, "version", 2);
__decorateClass([
(0, import_decorators3.property)()
], LuzmoIQEmbedChatComponent.prototype, "libVersion", 2);
__decorateClass([
(0, import_decorators3.property)()
], LuzmoIQEmbedChatComponent.prototype, "remoteEntryServer", 2);
__decorateClass([
(0, import_decorators3.property)()
], LuzmoIQEmbedChatComponent.prototype, "aydHost", 2);
__decorateClass([
(0, import_decorators3.property)({ type: Array })
], LuzmoIQEmbedChatComponent.prototype, "availableDatasets", 2);
if (!customElements.get(embedChatTag)) {
customElements.define(embedChatTag, LuzmoIQEmbedChatComponent);
}
// libs/embed-libs/embed/src/lib/iq-components/luzmo-iq-answer.ts
var import_lit5 = require("lit");
var import_decorators4 = require("lit/decorators.js");
var import_shared_embed3 = require("@luzmo/shared-embed");
var inputMap2 = {
aiEndPoint: "ai-end-point",
appServer: "app-server",
apiHo