@senx/discovery-widgets
Version:
Discovery Widgets Elements
264 lines (260 loc) • 19.3 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { P as Param, U as Utils, L as Logger, G as GTSLib, a as LangUtils } from './utils.js';
import { d as domtoimage } from './dom-to-image.js';
const discoveryButtonCss = "/*!\n * Copyright 2022-2025 SenX S.A.S.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *//*!\n* Copyright 2022-2024 SenX S.A.S.\n*\n* Licensed under the Apache License, Version 2.0 (the \"License\");\n* you may not use this file except in compliance with the License.\n* You may obtain a copy of the License at\n*\n* http://www.apache.org/licenses/LICENSE-2.0\n*\n* Unless required by applicable law or agreed to in writing, software\n* distributed under the License is distributed on an \"AS IS\" BASIS,\n* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n* See the License for the specific language governing permissions and\n* limitations under the License.\n*/:host{width:100%;height:100%}:host .button-wrapper{width:100%;text-align:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:100%}:host .button-wrapper button.discovery-btn{position:relative;margin:0.25rem 0.125rem;display:inline-block;font-weight:400;line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;font-size:var(--warp-view-button-font-size, 1rem);border:1px solid var(--warp-view-button-border-color, #004eff);padding:var(--warp-view-button-padding, 0.375rem 0.75rem);color:var(--warp-view-button-label-color, #ffffff);background-color:var(--warp-view-button-bg-color, #004eff);min-width:var(--warp-view-button-width, auto);border-radius:var(--warp-view-button-border-radius, 0.25rem)}:host .button-wrapper button.discovery-btn.button--start{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center}:host .button-wrapper button.discovery-btn.button--start.button--loading::before{left:unset !important;right:var(--warp-view-button-padding, 0.375rem) !important}:host .button-wrapper button.discovery-btn.button--end{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:end;-ms-flex-align:center;align-items:center}:host .button-wrapper button.discovery-btn.button--end.button--loading::before{right:unset !important;left:var(--warp-view-button-padding, 0.375rem) !important}:host .button-wrapper button.discovery-btn.button--center{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host .button-wrapper button:disabled{background-color:var(--warp-view-button-bg-disabled-color, #c0c0c0);border:1px solid var(--warp-view-button-disabled-border-color, #a0a0a0)}:host .button--loading::before{content:\"\";position:absolute;width:var(--warp-view-button-font-size, 1rem);height:var(--warp-view-button-font-size, 1rem);top:0;left:0;right:0;bottom:0;margin:auto;border:4px solid transparent;border-top-color:currentColor;border-radius:50%;-webkit-animation:button-loading-spinner 1s ease infinite;animation:button-loading-spinner 1s ease infinite}:host .discovery-btn-radio button.discovery-btn{position:relative;margin:0.25rem 0;color:var(--warp-view-button-inactive-label-color, #004eff);background-color:var(--warp-view-button-inactive-bg-color, #ffffff)}:host .discovery-btn-radio button.discovery-btn.active{color:var(--warp-view-button-label-color, #ffffff);background-color:var(--warp-view-button-bg-color, #004eff)}:host .discovery-btn-radio button.discovery-btn:hover{color:var(--warp-view-button-label-color, #ffffff);background-color:var(--warp-view-button-bg-color, #004eff)}:host .discovery-btn-radio button.discovery-btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:host .discovery-btn-radio button.discovery-btn:not(:first-of-type){border-top-left-radius:0;border-bottom-left-radius:0}:host .discovery-btn-group{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host .discovery-btn-group.discovery-btn-group-v{-ms-flex-direction:column;flex-direction:column}:host .discovery-btn-group.discovery-btn-group-h{-ms-flex-direction:row;flex-direction:row}:host .discovery-btn-group.discovery-btn-group-h button.button--loading::before{content:\"\";position:absolute;width:var(--warp-view-button-font-size, 1rem);height:var(--warp-view-button-font-size, 1rem);top:0;left:0;right:0;bottom:0;margin:auto;border:4px solid transparent;border-top-color:currentColor;border-radius:50%;-webkit-animation:button-loading-spinner 1s ease infinite;animation:button-loading-spinner 1s ease infinite}:host .discovery-btn-radio{width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}@-webkit-keyframes button-loading-spinner{from{-webkit-transform:rotate(0turn);transform:rotate(0turn)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes button-loading-spinner{from{-webkit-transform:rotate(0turn);transform:rotate(0turn)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}";
const DiscoveryButtonStyle0 = discoveryButtonCss;
const DiscoveryButtonComponent = /*@__PURE__*/ proxyCustomElement(class DiscoveryButtonComponent extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.draw = createEvent(this, "draw", 7);
this.execResult = createEvent(this, "execResult", 7);
this.execError = createEvent(this, "execError", 7);
this.statusError = createEvent(this, "statusError", 7);
this.discoveryEvent = createEvent(this, "discoveryEvent", 7);
this.options = new Param();
this.debug = false;
this.language = 'warpscript';
this.vars = '{}';
this.parsing = false;
this.rendering = false;
this.label = 'Ok';
this.labelPosition = 'center';
this.loading = false;
this.loadingBtnGrp = [];
this.defOptions = new Param();
this.innerVars = {};
}
varsUpdate(newValue, oldValue) {
var _a;
let vars = this.vars;
if (!!this.vars && typeof this.vars === 'string') {
vars = JSON.parse(this.vars);
}
if (!Utils.deepEqual(vars, this.innerVars)) {
this.innerVars = Utils.clone(vars);
this.parseResult();
}
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['varsUpdate'], { vars: this.vars, newValue, oldValue });
}
updateRes(newValue, oldValue) {
if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
this.parseResult();
}
}
optionsUpdate(newValue, oldValue) {
var _a, _b;
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['optionsUpdate'], newValue, oldValue);
let opts = newValue;
if (!!newValue && typeof newValue === 'string') {
opts = JSON.parse(newValue);
}
if (!Utils.deepEqual(opts, this.innerOptions)) {
this.innerOptions = Utils.clone(opts);
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['optionsUpdate 2'], { options: this.innerOptions, newValue, oldValue });
this.parseResult();
}
}
discoveryEventHandler(event) {
const res = Utils.parseEventData(event.detail, this.options.eventHandler, this.el.id);
if (res.style) {
this.innerStyle = Utils.clone(Object.assign(Object.assign({}, this.innerStyle), res.style));
}
if (res.vars) {
this.innerVars = Utils.clone(Object.assign(Object.assign({}, this.innerVars), res.vars));
}
}
async resize() {
// empty
}
// noinspection JSUnusedLocalSymbols
async export(_type = 'png') {
let bgColor = Utils.getCSSColor(this.el, '--warp-view-bg-color', 'transparent');
bgColor = (this.options || { bgColor }).bgColor || bgColor;
const dm = ((this.innerResult || {
globalParams: { bgColor },
}).globalParams || { bgColor });
bgColor = dm.bgColor || bgColor;
return await domtoimage.toPng(this.root, { height: this.height, width: this.width, bgcolor: bgColor });
}
// noinspection JSUnusedGlobalSymbols
componentWillLoad() {
var _a;
this.LOG = new Logger(DiscoveryButtonComponent, this.debug);
this.parsing = true;
if (typeof this.options === 'string') {
this.innerOptions = JSON.parse(this.options);
}
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['componentWillLoad'], {
type: this.type,
options: this.innerOptions,
});
this.parseResult();
this.draw.emit();
}
parseResult() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
this.macros = [];
this.innerResult = GTSLib.getData(this.result);
const btnLabel = (_g = (_d = (_c = (_b = (_a = this.innerResult) === null || _a === void 0 ? void 0 : _a.globalParams) === null || _b === void 0 ? void 0 : _b.button) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : (_f = (_e = this.innerOptions) === null || _e === void 0 ? void 0 : _e.button) === null || _f === void 0 ? void 0 : _f.label) !== null && _g !== void 0 ? _g : 'Ok';
const labelPosition = (_p = (_k = (_j = (_h = this.innerOptions) === null || _h === void 0 ? void 0 : _h.button) === null || _j === void 0 ? void 0 : _j.labelPosition) !== null && _k !== void 0 ? _k : (_o = (_m = (_l = this.innerResult) === null || _l === void 0 ? void 0 : _l.globalParams) === null || _m === void 0 ? void 0 : _m.button) === null || _o === void 0 ? void 0 : _o.labelPosition) !== null && _p !== void 0 ? _p : 'center';
this.label = btnLabel;
this.labelPosition = labelPosition;
let options = Utils.mergeDeep(this.defOptions, (_q = this.innerOptions) !== null && _q !== void 0 ? _q : {});
options = Utils.mergeDeep(options !== null && options !== void 0 ? options : {}, this.innerResult.globalParams);
this.innerOptions = Utils.clone(options);
if (!!this.vars && typeof this.vars === 'string') {
this.innerVars = JSON.parse(this.vars);
}
else if (this.vars) {
this.innerVars = this.vars;
}
this.innerStyle = Utils.clone(Object.assign(Object.assign({}, this.innerStyle), (_s = (_r = this.innerOptions) === null || _r === void 0 ? void 0 : _r.customStyles) !== null && _s !== void 0 ? _s : {}));
setTimeout(() => { var _a, _b; return this.active = (_b = (((_a = this.innerResult) === null || _a === void 0 ? void 0 : _a.data) || []).find((v) => v.active)) === null || _b === void 0 ? void 0 : _b.value; });
if (GTSLib.isArray(this.innerResult.data) && this.type === 'button:group') {
((_t = this.innerResult.data) !== null && _t !== void 0 ? _t : []).forEach((macro, i) => {
var _a, _b, _c, _d, _e;
this.macros.push({
macro,
button: (_e = (_c = (_b = ((_a = this.innerResult.params) !== null && _a !== void 0 ? _a : [])[i]) === null || _b === void 0 ? void 0 : _b.button) !== null && _c !== void 0 ? _c : (_d = this.innerOptions) === null || _d === void 0 ? void 0 : _d.button) !== null && _e !== void 0 ? _e : {
label: btnLabel,
labelPosition,
},
});
});
}
}
handleClick(macro, index) {
var _a, _b, _c;
this.loading = true;
this.loadingBtnGrp[index !== null && index !== void 0 ? index : 0] = true;
const ws = LangUtils.prepare(`${macro ? macro.macro : this.innerResult.data} EVAL`, (_a = this.innerVars) !== null && _a !== void 0 ? _a : {}, (_c = (_b = this.innerOptions) === null || _b === void 0 ? void 0 : _b.skippedVars) !== null && _c !== void 0 ? _c : [], this.type, this.language);
Utils.httpPost(this.url, ws, this.innerOptions.httpHeaders)
.then(res => {
var _a, _b, _c, _d;
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['handleClick', 'res.data'], res.data);
const result = GTSLib.getData(res.data);
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['handleClick', 'getData'], result);
if (result) {
for (const e of ((_c = result.events) !== null && _c !== void 0 ? _c : [])) {
(_d = this.LOG) === null || _d === void 0 ? void 0 : _d.debug(['handleClick', 'emit'], { discoveryEvent: e });
if (typeof e.value !== 'object' && GTSLib.isArray(e.value)) {
e.value = [e.value];
}
this.discoveryEvent.emit(Object.assign(Object.assign({}, e), { source: this.el.id }));
}
}
this.loading = false;
this.loadingBtnGrp[index !== null && index !== void 0 ? index : 0] = false;
this.execResult.emit(res.data);
})
.catch(e => {
var _a;
this.loading = false;
this.loadingBtnGrp[index !== null && index !== void 0 ? index : 0] = false;
this.statusError.emit(e);
this.execError.emit(e);
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.error(['exec'], e);
});
}
toggle(value) {
var _a, _b;
this.active = value;
for (const e of ((_a = this.innerResult.events) !== null && _a !== void 0 ? _a : [])) {
(_b = this.LOG) === null || _b === void 0 ? void 0 : _b.debug(['handleClick', 'emit'], { discoveryEvent: e });
if (!e.value) {
e.value = {};
}
e.value[e.selector] = value;
this.discoveryEvent.emit(Object.assign(Object.assign({}, e), { source: this.el.id }));
}
}
generateStyle(innerStyle) {
return Object.keys(innerStyle || {}).map(k => k + ' { ' + innerStyle[k] + ' }').join('\n');
}
render() {
var _a, _b, _c, _d, _e, _f, _g, _h;
return [
h("style", { key: 'e820ebb4b8ee622f99e2dcd76ff7121cd49cd55f' }, this.generateStyle(this.innerStyle)),
h("div", { key: 'c506ccca4e5873896c8bc72f7111d6485e372beb', ref: el => this.root = el, class: "button-wrapper" }, this.type === 'button'
? h("button", { type: "button", class: {
'discovery-btn': true,
'button--loading': this.isLoading(0),
'button--start': this.labelPosition === 'start',
'button--center': this.labelPosition === 'center',
'button--end': this.labelPosition === 'end',
}, disabled: this.isLoading(0), innerHTML: this.label, onClick: () => this.handleClick() })
: '', this.type === 'button:radio'
? h("div", { class: "discovery-btn-radio" }, GTSLib.isArray((_a = this.innerResult) === null || _a === void 0 ? void 0 : _a.data)
? ((_c = (_b = this.innerResult) === null || _b === void 0 ? void 0 : _b.data) !== null && _c !== void 0 ? _c : []).map((v) => h("button", { type: "button", class: {
'discovery-btn': true,
'active': v.value === this.active,
'button--start': this.labelPosition === 'start',
'button--center': this.labelPosition === 'center',
'button--end': this.labelPosition === 'end',
}, innerHTML: v.label, onClick: () => this.toggle(v.value) })) : '') : '', this.type === 'button:group'
? h("div", { class: {
'discovery-btn-group': true,
'discovery-btn-group-v': !!((_e = (_d = this.innerOptions) === null || _d === void 0 ? void 0 : _d.button) === null || _e === void 0 ? void 0 : _e.vertical),
'discovery-btn-group-h': !((_g = (_f = this.innerOptions) === null || _f === void 0 ? void 0 : _f.button) === null || _g === void 0 ? void 0 : _g.vertical),
} }, ((_h = this.macros) !== null && _h !== void 0 ? _h : []).map((b, i) => h("button", { type: "button", class: {
'discovery-btn': true,
'button--loading': this.isLoading(i),
'button--start': b.button.labelPosition === 'start',
'button--center': b.button.labelPosition === 'center',
'button--end': b.button.labelPosition === 'end',
}, disabled: this.isLoading(i), innerHTML: b.button.label, onClick: () => this.handleClick(b, i) }))) : ''),
];
}
isLoading(index) {
return this.loadingBtnGrp[index !== null && index !== void 0 ? index : 0];
}
get el() { return this; }
static get watchers() { return {
"vars": ["varsUpdate"],
"result": ["updateRes"],
"options": ["optionsUpdate"]
}; }
static get style() { return DiscoveryButtonStyle0; }
}, [1, "discovery-button", {
"result": [1025],
"type": [1],
"options": [1025],
"width": [2],
"height": [2],
"debug": [4],
"url": [1],
"language": [1],
"vars": [1],
"parsing": [32],
"rendering": [32],
"label": [32],
"labelPosition": [32],
"innerStyle": [32],
"active": [32],
"innerOptions": [32],
"loading": [32],
"loadingBtnGrp": [32],
"resize": [64],
"export": [64]
}, [[8, "discoveryEvent", "discoveryEventHandler"]], {
"vars": ["varsUpdate"],
"result": ["updateRes"],
"options": ["optionsUpdate"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["discovery-button"];
components.forEach(tagName => { switch (tagName) {
case "discovery-button":
if (!customElements.get(tagName)) {
customElements.define(tagName, DiscoveryButtonComponent);
}
break;
} });
}
export { DiscoveryButtonComponent as D, defineCustomElement as d };
//# sourceMappingURL=discovery-button2.js.map