devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
261 lines (257 loc) • 11.4 kB
JavaScript
/**
* DevExtreme (cjs/__internal/core/license/trial_panel.client.js)
* Version: 25.2.5
* Build date: Fri Feb 20 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.isClient = exports.BASE_Z_INDEX = void 0;
exports.registerCustomComponents = registerCustomComponents;
exports.renderTrialPanel = renderTrialPanel;
const BASE_Z_INDEX = exports.BASE_Z_INDEX = 1500;
const isClient = () => "undefined" !== typeof HTMLElement && "undefined" !== typeof customElements;
exports.isClient = isClient;
const SafeHTMLElement = isClient() ? HTMLElement : class {};
const DATA_PERMANENT_ATTRIBUTE = "data-permanent";
const componentNames = {
trigger: "dx-license-trigger",
panel: "dx-license"
};
const attributeNames = {
buyNow: "buy-now",
licensingDoc: "licensing-doc",
version: "version",
subscriptions: "subscriptions"
};
const commonStyles = {
opacity: "1",
visibility: "visible",
"clip-path": "none",
filter: "none"
};
const contentStyles = Object.assign({}, commonStyles, {
width: "100%",
height: "auto",
"line-height": "normal",
display: "block",
"z-index": `${BASE_Z_INDEX}`,
position: "static",
transform: "translate(0px, 0px)",
"background-color": "#FF7200",
border: "none",
margin: "auto",
"box-sizing": "border-box",
"text-align": "center"
});
const containerStyles = Object.assign({}, contentStyles, {
display: "flex",
"align-items": "center",
"flex-direction": "row",
position: "relative",
top: "0px",
left: "0px",
padding: "0.5rem"
});
const buttonStyles = {
width: "1rem",
cursor: "pointer",
height: "1rem"
};
const textStyles = Object.assign({}, commonStyles, {
display: "inline",
position: "static",
padding: "0px",
margin: "0px",
color: "white",
"font-family": "-apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', 'adwaita sans', cantarell, ubuntu, roboto, noto, helvetica, arial, sans-serif",
"font-size": "0.875rem",
"font-weight": "600"
});
function createImportantStyles(defaultStyles, customStyles) {
const styles = customStyles ? Object.assign({}, defaultStyles, customStyles) : defaultStyles;
return Object.keys(styles).reduce(((cssString, currentKey) => `${cssString}${[currentKey,`${styles[currentKey]} !important;`].join(": ")}`), "")
}
class DxLicense extends SafeHTMLElement {
constructor() {
var _DxLicense$customStyl, _DxLicense$customStyl2, _DxLicense$customStyl3, _DxLicense$customStyl4, _DxLicense$customStyl5;
super();
this._observer = null;
this._inReassign = false;
this._spanStyles = createImportantStyles(textStyles, null === (_DxLicense$customStyl = DxLicense.customStyles) || void 0 === _DxLicense$customStyl ? void 0 : _DxLicense$customStyl.textStyles);
this._linkStyles = createImportantStyles(textStyles, null === (_DxLicense$customStyl2 = DxLicense.customStyles) || void 0 === _DxLicense$customStyl2 ? void 0 : _DxLicense$customStyl2.linkStyles);
this._containerStyles = createImportantStyles(containerStyles, null === (_DxLicense$customStyl3 = DxLicense.customStyles) || void 0 === _DxLicense$customStyl3 ? void 0 : _DxLicense$customStyl3.containerStyles);
this._contentStyles = createImportantStyles(contentStyles, null === (_DxLicense$customStyl4 = DxLicense.customStyles) || void 0 === _DxLicense$customStyl4 ? void 0 : _DxLicense$customStyl4.contentStyles);
this._buttonStyles = createImportantStyles(buttonStyles, null === (_DxLicense$customStyl5 = DxLicense.customStyles) || void 0 === _DxLicense$customStyl5 ? void 0 : _DxLicense$customStyl5.contentStyles)
}
_getSubscriptionsArray(subscriptions) {
return (null === subscriptions || void 0 === subscriptions ? void 0 : subscriptions.split(",").map((x => x.trim()))) ?? []
}
updateSubscriptions(newSubscriptions) {
if (!this._subscriptionsSpan || !newSubscriptions) {
return
}
const currentSubscriptionsStr = this.getAttribute(attributeNames.subscriptions);
const currentSubscriptions = this._getSubscriptionsArray(currentSubscriptionsStr);
if (!currentSubscriptions.length) {
this._updateSubscriptionsText(newSubscriptions);
return
}
const newSubscriptionsArray = this._getSubscriptionsArray(newSubscriptions);
const mergedSubscriptions = [];
newSubscriptionsArray.forEach((subscription => {
if (currentSubscriptions.some((x => x === subscription))) {
mergedSubscriptions.push(subscription)
}
}));
this._updateSubscriptionsText(0 !== mergedSubscriptions.length ? mergedSubscriptions.join(", ") : [...currentSubscriptions, ...newSubscriptionsArray].join(", "))
}
_updateSubscriptionsText(subscriptions) {
if (subscriptions && this._subscriptionsSpan) {
this.setAttribute(attributeNames.subscriptions, subscriptions);
this._subscriptionsSpan.innerText = ` Included in Subscriptions: ${subscriptions}`
}
}
_createSubscriptionsSpan() {
this._subscriptionsSpan = this._createSpan("");
this._updateSubscriptionsText(this.getAttribute(attributeNames.subscriptions));
return this._subscriptionsSpan
}
_createSpan(text) {
const span = document.createElement("span");
span.innerText = text;
span.style.cssText = this._spanStyles;
return span
}
_createLink(text, href) {
const link = document.createElement("a");
link.innerText = text;
link.style.cssText = this._linkStyles;
link.href = href;
link.target = "_blank";
return link
}
_createButton() {
const button = document.createElement("div");
button.style.cssText = this._buttonStyles;
const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
polygon.setAttribute("points", "13.4 12.7 8.7 8 13.4 3.4 12.6 2.6 8 7.3 3.4 2.6 2.6 3.4 7.3 8 2.6 12.6 3.4 13.4 8 8.7 12.7 13.4 13.4 12.7");
polygon.style.cssText = createImportantStyles({
fill: "#fff",
opacity: ".5",
"stroke-width": "0px"
});
svg.setAttribute("id", "Layer_1");
svg.setAttribute("data-name", "Layer 1");
svg.setAttribute("version", "1.1");
svg.setAttribute("viewBox", "0 0 16 16");
svg.style.cssText = createImportantStyles({
"vertical-align": "baseline"
});
svg.appendChild(polygon);
button.appendChild(svg);
button.onclick = () => {
DxLicense.closed = true;
this.style.cssText = createImportantStyles({
display: "none"
})
};
return button
}
_createContentContainer() {
const contentContainer = document.createElement("div");
contentContainer.style.cssText = this._contentStyles;
contentContainer.append(this._createSpan("For evaluation purposes only. Redistribution prohibited. Please "), this._createLink("register", this.getAttribute(attributeNames.licensingDoc)), this._createSpan(" an existing license or "), this._createLink("purchase a new license", this.getAttribute(attributeNames.buyNow)), this._createSpan(` to continue use of DevExpress product libraries (v${this.getAttribute(attributeNames.version)}).`), this._createSubscriptionsSpan());
return contentContainer
}
_reassignComponent() {
this.innerHTML = "";
this.style.cssText = this._containerStyles;
this.append(this._createContentContainer(), this._createButton())
}
connectedCallback() {
this._reassignComponent();
if (!this._observer) {
this._observer = new MutationObserver((() => {
if (DxLicense.closed) {
var _this$_observer;
null === (_this$_observer = this._observer) || void 0 === _this$_observer || _this$_observer.disconnect();
return
}
if (this._inReassign) {
this._inReassign = false
} else {
this._inReassign = true;
this._reassignComponent()
}
}));
this._observer.observe(this, {
childList: true,
attributes: true,
subtree: true
})
}
}
disconnectedCallback() {
if (DxLicense.closed) {
return
}
Promise.resolve().then((() => {
if (!document) {
return
}
const licensePanel = document.getElementsByTagName(componentNames.panel);
if (!licensePanel.length) {
document.body.prepend(this)
}
}))
}
}
DxLicense.customStyles = void 0;
DxLicense.closed = false;
class DxLicenseTrigger extends SafeHTMLElement {
connectedCallback() {
this.style.cssText = createImportantStyles({
display: "none"
});
const licensePanel = document.getElementsByTagName(componentNames.panel);
if (DxLicense.closed) {
return
}
if (!licensePanel.length) {
const license = document.createElement(componentNames.panel);
Object.values(attributeNames).forEach((attrName => {
const attrValue = this.getAttribute(attrName);
if (attrValue) {
license.setAttribute(attrName, attrValue)
}
}));
license.setAttribute("data-permanent", "");
document.body.prepend(license)
} else {
const subscriptions = this.getAttribute(attributeNames.subscriptions);
licensePanel[0].updateSubscriptions(subscriptions)
}
}
}
function registerCustomComponents(customStyles) {
if (!customElements.get(componentNames.trigger)) {
DxLicense.customStyles = customStyles;
customElements.define(componentNames.panel, DxLicense);
customElements.define(componentNames.trigger, DxLicenseTrigger)
}
}
function renderTrialPanel(buyNowUrl, licensingDocUrl, version, subscriptions, customStyles) {
registerCustomComponents(customStyles);
const trialPanelTrigger = document.createElement(componentNames.trigger);
trialPanelTrigger.setAttribute(attributeNames.buyNow, buyNowUrl);
trialPanelTrigger.setAttribute(attributeNames.licensingDoc, licensingDocUrl);
trialPanelTrigger.setAttribute(attributeNames.version, version);
trialPanelTrigger.setAttribute(attributeNames.subscriptions, subscriptions ?? "");
document.body.appendChild(trialPanelTrigger)
}