@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,539 lines (1,509 loc) • 51.8 kB
JavaScript
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
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
import { selectedDataUtils } from "@luzmo/shared-embed";
import { LitElement as LitElement5 } from "lit";
// libs/embed-libs/embed/src/lib/dashboard/dashboard-base.ts
import * as SharedLib2 from "@luzmo/shared-embed";
import {
luzmoEmbedContainerClass
} from "@luzmo/shared-embed";
import { html, LitElement } from "lit";
import { property, query, state } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";
// libs/embed-libs/embed/package.json
var version = "6.6.1";
// libs/embed-libs/embed/src/lib/helper/event-bus-handler.ts
import * as SharedLib from "@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":
// TODO remove once chartsRendered is changed to itemsRendered in FE app
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
import { css } from "lit";
var dashboardStyles = 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 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 = html`
<div
class="luzmo-container-loader"
id="luzmo-container-loader-${this._containerId}"
style=${styleMap(
this._containerLoaderStyle
)}
>
<div
class="luzmo-loader"
id="luzmo-loader-${this._containerId}"
style=${styleMap(this._loaderStyle)}
>
<div
class="luzmo-lc"
style=${styleMap(this._lcStyle)}
>
<div
class="luzmo-loading-circle"
style=${styleMap(
this._loadingCircleStyle
)}
></div>
${this._itemEmbedding ? "" : html`
<div
class="luzmo-loading-message"
style=${styleMap({ color: this.loaderFontColor })}
>
${this._loaderMsg}
</div>
`}
</div>
</div>
</div>
`;
if (this.isWebComponentViewMode()) {
toBeRenderedHTML = this.isLibraryLoaded ? html`
${this.dashboardId || this.dashboardSlug ? html`
<dashboard-component dashboard-id="${this.params.dashboardId}" app-server="${this.params.appServer}"
api-host="${this.params.apiHost}"></dashboard-component>
` : html`
<div id="luzmo-error-${this._containerId}">
<h3 class="luzmo-error">${this.browserErrorMsg}</h3>
</div>
`}
` : html`${loader}`;
} else {
toBeRenderedHTML = html`
${this.dashboardId || this.dashboardSlug ? html`
${loader}
<iframe
class="luzmo-embed-dashboard ${this.isWebComponentViewMode() ? "" : `luzmo-embed-dashboard-ede`}"
id="${this._iframeId}"
name="${this._iframeId}"
style=${styleMap(this.iframeStyle)}
src="${this._iframeUrl}"
frameborder="0"
></iframe>
` : html`<!-- the dashboard will inititialize when you provide a dashboardSlug or a dashboardId -->`}
${this.browserError ? html`
<div id="luzmo-error-${this._containerId}">
<h3 class="luzmo-error">${this.browserErrorMsg}</h3>
</div>
` : ""}
`;
}
return html`
<div class="${luzmoEmbedContainerClass} ${this.isWebComponentViewMode() ? "" : `${luzmoEmbedContainerClass}-ede`}">
<div
class="dashboard-container"
style=${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([
query(".dashboard-container")
], LuzmoDashboard.prototype, "container", 2);
__decorateClass([
query(`.${luzmoEmbedContainerClass}`)
], LuzmoDashboard.prototype, "luzmoEmbedContainer", 2);
__decorateClass([
query("iframe")
], LuzmoDashboard.prototype, "iframe", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "dashboardId", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "dashboardSlug", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "itemId", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "language", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "editorLanguage", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "qeVersion", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "screenMode", 2);
__decorateClass([
property({
converter: {
fromAttribute: (value) => value === "true",
toAttribute: String
}
})
], LuzmoDashboard.prototype, "switchScreenModeOnResize", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "editMode", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "theme", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "mainColor", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "accentColor", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "authToken", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "authKey", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "loaderBackground", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "loaderFontColor", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "loaderSpinnerColor", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "loaderSpinnerBackground", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "appServer", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "timezoneId", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "apiHost", 2);
__decorateClass([
property({ type: Object })
], LuzmoDashboard.prototype, "itemDimensions", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "embedMode", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "_containerId", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "_iframeId", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "params", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "_iframeUrl", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "iframeLoaded", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "promises", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "iframeStyle", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "_containerStyle", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "_loaderStyle", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "_lcStyle", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "_loadingCircleStyle", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "_containerLoaderStyle", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "_loaderMsg", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "containerWidth", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "dimensions", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "currentScreenMode", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "_itemEmbedding", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "browserError", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "browserErrorMsg", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "dashboardError", 2);
__decorateClass([
property({ attribute: false })
], LuzmoDashboard.prototype, "browserNotSupported", 2);
__decorateClass([
property()
], LuzmoDashboard.prototype, "libVersion", 2);
__decorateClass([
state()
], LuzmoDashboard.prototype, "isLibraryLoaded", 2);
__decorateClass([
state()
], LuzmoDashboard.prototype, "dashboardReference", 2);
__decorateClass([
state()
], LuzmoDashboard.prototype, "currentAuthKey", 2);
__decorateClass([
state()
], LuzmoDashboard.prototype, "currentAuthToken", 2);
__decorateClass([
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
import * as SharedLib3 from "@luzmo/shared-embed";
import { css as css2, html as html2, LitElement as LitElement2 } from "lit";
import { property as property2 } from "lit/decorators.js";
var dashboardContentsVersion = "0.1.97";
var vizItemRemote = "VizItemApp";
var LuzmoBaseVizItem = class extends LitElement2 {
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 = css2`
: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 html2` `;
}
};
__decorateClass([
property2()
], LuzmoBaseVizItem.prototype, "appServer", 2);
__decorateClass([
property2()
], LuzmoBaseVizItem.prototype, "apiHost", 2);
__decorateClass([
property2({ type: Array })
], LuzmoBaseVizItem.prototype, "slots", 2);
__decorateClass([
property2({ type: Object })
], LuzmoBaseVizItem.prototype, "options", 2);
__decorateClass([
property2()
], LuzmoBaseVizItem.prototype, "type", 2);
__decorateClass([
property2()
], LuzmoBaseVizItem.prototype, "authKey", 2);
__decorateClass([
property2()
], LuzmoBaseVizItem.prototype, "authToken", 2);
__decorateClass([
property2()
], LuzmoBaseVizItem.prototype, "version", 2);
__decorateClass([
property2()
], LuzmoBaseVizItem.prototype, "contextId", 2);
__decorateClass([
property2({
converter: (value) => {
try {
return JSON.parse(value);
} catch {
return value;
}
}
})
], LuzmoBaseVizItem.prototype, "canFilter", 2);
__decorateClass([
property2({ type: Array })
], LuzmoBaseVizItem.prototype, "filters", 2);
__decorateClass([
property2()
], LuzmoBaseVizItem.prototype, "dashboardId", 2);
__decorateClass([
property2()
], LuzmoBaseVizItem.prototype, "itemId", 2);
__decorateClass([
property2({ type: Object })
], LuzmoBaseVizItem.prototype, "selectedData", 2);
__decorateClass([
property2()
], LuzmoBaseVizItem.prototype, "dashboardContentsVersion", 2);
__decorateClass([
property2()
], 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
import { loadLibrary as loadLibrary3, removeTrailingSlash as removeTrailingSlash3 } from "@luzmo/shared-embed";
import { css as css3, html as html3, LitElement as LitElement3 } from "lit";
import { property as property3 } from "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 LitElement3 {
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 = css3`
:host {
display: block;
width: 100%;
height: 100%;
}
`;
}
createRenderRoot() {
return this;
}
async firstUpdated(_changedProperties) {
super.firstUpdated(_changedProperties);
await loadLibrary3(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) ? removeTrailingSlash3(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 loadLibrary3(this.calculatedAppServer, "IQApp");
this.createAndAppendElement();
}
}
render() {
return html3``;
}
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([
property3()
], LuzmoIQEmbedChatComponent.prototype, "appServer", 2);
__decorateClass([
property3()
], LuzmoIQEmbedChatComponent.prototype, "apiHost", 2);
__decorateClass([
property3({ type: Object })
], LuzmoIQEmbedChatComponent.prototype, "options", 2);
__decorateClass([
property3({ type: String })
], LuzmoIQEmbedChatComponent.prototype, "initialSuggestionsDatasetId", 2);
__decorateClass([
property3()
], LuzmoIQEmbedChatComponent.prototype, "aiEndpoint", 2);
__decorateClass([
property3()
], LuzmoIQEmbedChatComponent.prototype, "authKey", 2);
__decorateClass([
property3()
], LuzmoIQEmbedChatComponent.prototype, "authToken", 2);
__decorateClass([
property3()
], LuzmoIQEmbedChatComponent.prototype, "version", 2);
__decorateClass([
property3()
], LuzmoIQEmbedChatComponent.prototype, "libVersion", 2);
__decorateClass([
property3()
], LuzmoIQEmbedChatComponent.prototype, "remoteEntryServer", 2);
__decorateClass([
property3()
], LuzmoIQEmbedChatComponent.prototype, "aydHost", 2);
__decorateClass([
property3({ 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
import { css as css4, html as html4, LitElement as LitElement4 } from "lit";
import { property as property4 } from "lit/decorators.js";
import { loadLibrary as loadLibrary4, removeTrailingSlash as removeTrailingSlash4 } from "@luzmo/shared-embed";
var inputMap2 = {
aiEndPoint: "ai-end-point",
appServer: "app-server",
apiHost: "api-host",
options: "options",
authKey: "auth-key",
authToken: "auth-token",
version: "version",
libVersion: "lib-version",
messages: "messages"
};
var componentTag = "luzmo-iq-embed-answer";
var LuzmoIQEmbedAnswerComponent = class extends LitElement4 {
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";
}
static {
// Static styles to set host display to block, else it is not shown at all for some reason.
this.styles = css4`
:host {
display: block;
width: 100%;
height: 100%;
}
`;
}
createRenderRoot() {
return this;
}
async firstUpdated(_changedProperties) {
super.firstUpdated(_changedProperties);
await loadLibrary4(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("luzmo-iq-answer-component");
this.chartElement.addEventListener("addQuestion", (payload) => this.dispatchEvent(new CustomEvent("addQuestion", payload)));
this.chartElement.addEventListener("addAnswer", (payload) => this.dispatchEvent(new CustomEvent("addAnswer", payload)));
this.updateVizItemProperties();
this.renderRoot.append(this.chartElement);
}
}
updateVizItemProperties() {
if (this.chartElement) {
for (const key in inputMap2) {
const value = this[key];
if (value) {
const attributeValue = ["appServer", "apiHost"].includes(key) ? removeTrailingSlash4(value) : value;
this.chartElement.setAttribute(
inputMap2[key],
typeof attributeValue === "object" ? JSON.stringify(attributeValue) : attributeValue
);
}
}
}
}
async updated(changedProperties) {
if (this.chartElement) {
for (const [propertyName] of changedProperties.entries()) {
const mappedAttributeName = inputMap2[propertyName] ?? propertyName;
const attributeValue = typeof this[propertyName] === "object" ? JSON.stringify(this[propertyName]) : this[propertyName]?.toString() ?? this[propertyName];
this.chartElement.setAttribute(mappedAttributeName, attributeValue);
}
} else {
await loadLibrary4(this.calculatedAppServer, "IQApp");
this.createAndAppendElement();
}
}
render() {
return html4` `;
}
};
__decorateClass([
property4()
], LuzmoIQEmbedAnswerComponent.prototype, "appServer", 2);
__decorateClass([
property4()
], LuzmoIQEmbedAnswerComponent.prototype, "apiHost", 2);
__decorateClass([
property4({ type: Object })
], LuzmoIQEmbedAnswerComponent.prototype, "options", 2);
__decorateClass([
property4()
], LuzmoIQEmbedAnswerComponent.prototype, "aiEndPoint", 2);
__decorateClass([
property4()
], LuzmoIQEmbedAnswerComponent.prototype, "authKey", 2);
__decorateClass([
property4()
], LuzmoIQEmbedAnswerComponent.prototype, "authToken", 2);
__decorateClass([
property4()
], LuzmoIQEmbedAnswerComponent.prototype, "messages", 2);
__decorateClass([
property4()
], LuzmoIQEmbedAnswerComponent.prototype, "version", 2);
__decorateClass([
property4()
], LuzmoIQEmbedAnswerComponent.prototype, "libVersion", 2);
__decorateClass([
property4()
], LuzmoIQEmbedAnswerComponent.prototype, "remoteEntryServer", 2);
if (!customElements.get(componentTag)) {
customElements.define(componentTag, LuzmoIQEmbedAnswerComponent);
}
// libs/embed-libs/embed/src/lib/helper/json-schema-utils.ts
var cachedSchemas = {};
function addJSONSchemas(schemas) {
if (schemas.some((schema) => !schema.$id)) {
throw new Error("To add schemas they all must have an $id property.");
}
schemas.forEach((sc