@senx/discovery-widgets
Version:
Discovery Widgets Elements
824 lines (823 loc) • 42.9 kB
JavaScript
/*
* Copyright 2022-2025 SenX S.A.S.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { h } from "@stencil/core";
import { Param } from "../../model/param";
import { Logger } from "../../utils/logger";
import { GTSLib } from "../../utils/gts.lib";
import { Utils } from "../../utils/utils";
import autoComplete from "@tarekraafat/autocomplete.js/dist/autoComplete.js";
import domToImage from "dom-to-image";
import { v4 } from "uuid";
export class DiscoveryInputComponent {
constructor() {
this.options = new Param();
this.debug = false;
this.parsing = false;
this.rendering = false;
this.value = '';
this.subType = 'text';
this.label = 'Ok';
this.values = [];
this.defOptions = Object.assign(Object.assign({}, new Param()), { input: { caseSensitive: true, onlyFromAutocomplete: true } });
this.innerOptions = new Param();
this.disabled = false;
}
discoveryEventHandler(event) {
const res = Utils.parseEventData(event.detail, this.innerOptions.eventHandler, this.el.id);
if (res.style) {
this.innerStyle = Utils.clone(Object.assign(Object.assign({}, this.innerStyle), res.style));
}
}
updateRes() {
var _a, _b;
this.LOG.debug(['updateRes'], this.innerResult);
this.innerResult = GTSLib.getData(this.result);
this.innerOptions = Utils.mergeDeep((_a = this.innerOptions) !== null && _a !== void 0 ? _a : {}, this.innerResult.globalParams);
if (this.innerOptions.customStyles) {
this.innerStyle = Utils.clone(Object.assign(Object.assign({}, this.innerStyle), (_b = this.innerOptions.customStyles) !== null && _b !== void 0 ? _b : {}));
}
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();
}
}
async resize() {
// empty
}
// noinspection JSUnusedLocalSymbols
async export(type = 'png') {
const dims = Utils.getContentBounds(this.type === 'input:multi-cb' || this.type === 'input:slider'
? this.pngWrapper : this.root);
this.width = dims.w - 15;
this.height = dims.h;
let bgColor = Utils.getCSSColor(this.el, '--warp-view-bg-color', 'transparent');
bgColor = ((this.innerOptions) || { bgColor }).bgColor || bgColor;
const dm = ((this.result || {
globalParams: { bgColor },
}).globalParams || { bgColor });
bgColor = dm.bgColor || bgColor;
if (this.type === 'input:slider') {
return await this.inputField.export(type, bgColor);
}
else {
return await domToImage.toPng(this.type === 'input:multi-cb' ? this.pngWrapper : this.root, {
height: this.height,
width: this.width,
bgcolor: bgColor,
});
}
}
// noinspection JSUnusedGlobalSymbols
componentWillLoad() {
var _a, _b, _c;
this.LOG = new Logger(DiscoveryInputComponent, this.debug);
this.parsing = true;
if (typeof this.options === 'string') {
this.options = JSON.parse(this.options);
}
this.innerResult = GTSLib.getData(this.result);
this.subType = this.type.split(':')[1];
let options = Utils.mergeDeep(this.defOptions, (_a = this.options) !== null && _a !== void 0 ? _a : {});
options = Utils.mergeDeep(options || {}, this.innerResult.globalParams);
this.innerOptions = Utils.clone(options);
if (this.innerOptions.customStyles) {
this.innerStyle = Utils.clone(Object.assign(Object.assign({}, this.innerStyle), (_b = this.innerOptions.customStyles) !== null && _b !== void 0 ? _b : {}));
}
(_c = this.LOG) === null || _c === void 0 ? void 0 : _c.debug(['componentWillLoad'], {
type: this.type,
innerOptions: this.innerOptions,
innerResult: this.innerResult,
result: this.result,
});
}
// noinspection JSUnusedGlobalSymbols
componentDidLoad() {
var _a;
switch (this.subType) {
case 'date':
if (!GTSLib.isArray(this.value)) {
this.value = [this.value];
}
break;
case 'date-range':
break;
case 'autocomplete':
// noinspection JSPotentiallyInvalidConstructorUsage
this.autoCompleteJS = new autoComplete({
placeHolder: 'Search...',
selector: () => this.inputField,
data: { src: this.values, keys: 'v' },
resultItem: { highlight: { render: true } },
events: {
input: {
selection: (event) => {
var _a, _b, _c;
const selection = event.detail.selection.value.v;
this.autoCompleteJS.input.value = selection;
this.selectedValue = selection;
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['selection'], { v: this.selectedValue, b: !((_b = this.innerOptions.input) === null || _b === void 0 ? void 0 : _b.showButton) });
if (!((_c = this.innerOptions.input) === null || _c === void 0 ? void 0 : _c.showButton)) {
this.handleClick();
}
},
},
},
});
break;
default:
break;
}
this.parseResult();
(_a = this.LOG) === null || _a === void 0 ? void 0 : _a.debug(['componentDidLoad'], {
type: this.type,
innerOptions: this.innerOptions,
innerResult: this.innerResult,
result: this.result,
});
this.draw.emit();
}
handleClick() {
var _a, _b, _c;
if (((_a = this.innerOptions.input) === null || _a === void 0 ? void 0 : _a.delayRequest) && ((_b = this.innerOptions.input) === null || _b === void 0 ? void 0 : _b.delayRequest) > 0) {
if (this.delayTimer) {
window.clearInterval(this.delayTimer);
}
this.delayTimer = setTimeout(() => this.handleClickRT(), (_c = this.innerOptions.input) === null || _c === void 0 ? void 0 : _c.delayRequest);
}
else {
this.handleClickRT();
}
}
;
handleClickRT() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
const valid = !((_b = (_a = this.innerOptions) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.validation)
|| (!!((_d = (_c = this.innerOptions) === null || _c === void 0 ? void 0 : _c.input) === null || _d === void 0 ? void 0 : _d.validation)
&& !!((_f = (_e = this.inputField) === null || _e === void 0 ? void 0 : _e.validity) === null || _f === void 0 ? void 0 : _f.valid)
&& (!this.inputField2 || !!((_h = (_g = this.inputField2) === null || _g === void 0 ? void 0 : _g.validity) === null || _h === void 0 ? void 0 : _h.valid)));
if (this.inputField && !['file', 'date', 'date-range', 'multi', 'chips', 'chips-autocomplete'].includes(this.subType)) {
if ('value' in this.inputField) {
this.selectedValue = this.inputField.value;
}
}
for (const e of ((_k = (_j = this.innerResult) === null || _j === void 0 ? void 0 : _j.events) !== null && _k !== void 0 ? _k : [])) {
console.log(this.selectedValue);
if (this.selectedValue !== undefined) {
if (this.subType === 'date-range' && this.selectedValue.length !== 2) {
continue;
}
let value = this.selectedValue;
if (GTSLib.isArray(value) && this.type === 'input:multi-cb' && this.checkBoxes && ((_l = this.innerOptions.input) === null || _l === void 0 ? void 0 : _l.showFilter)) {
value = value.filter((v) => { var _a; return new RegExp(`.*${((_a = this.filter) !== null && _a !== void 0 ? _a : '')}.*`, 'gi').test(v); });
}
if (e.selector) {
if (!e.value) {
e.value = {};
}
e.value[e.selector] = value;
}
else {
e.value = value;
}
if (this.subType === 'number') {
e.value[e.selector] = parseFloat(e.value[e.selector]);
}
if (valid) {
(_m = this.LOG) === null || _m === void 0 ? void 0 : _m.debug(['handleClick', 'emit'], { discoveryEvent: e, subtype: this.subType }, value);
this.discoveryEvent.emit(Object.assign(Object.assign({}, e), { source: this.el.id }));
}
else {
(_o = this.LOG) === null || _o === void 0 ? void 0 : _o.debug(['handleClick', 'emit'], 'Invalid value');
}
}
}
}
;
generateStyle(styles) {
var _a, _b;
this.innerStyles = Utils.clone(Object.assign(Object.assign(Object.assign({}, this.innerStyles), styles), (_a = this.innerOptions.customStyles) !== null && _a !== void 0 ? _a : {}));
return Object.keys((_b = this.innerStyles) !== null && _b !== void 0 ? _b : {}).map(k => `${k} { ${this.innerStyles[k]} }`).join('\n');
}
handleSelect(e) {
var _a, _b, _c, _d, _e, _f;
if (this.selectedValue !== ((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : e === null || e === void 0 ? void 0 : e.detail)) {
this.selectedValue = (_d = (_c = e === null || e === void 0 ? void 0 : e.target) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : e === null || e === void 0 ? void 0 : e.detail;
if (this.subType === 'chips-autocomplete' || this.subType === 'chips') {
this.selectedValue = e.detail;
}
if (this.subType === 'multi' && ((_e = e.target) === null || _e === void 0 ? void 0 : _e.options)) {
this.selectedValue = Array.from(e.target.options)
.filter((o) => !!o.selected)
.map((o) => o.value);
}
if (this.subType === 'multi-cb' && this.checkBoxes) {
this.selectedValue = Array.from(this.checkBoxes.querySelectorAll('input[type="checkbox"]'))
.filter((o) => o.checked)
.map((o) => o.value);
}
if (this.subType !== 'file' && !((_f = this.innerOptions.input) === null || _f === void 0 ? void 0 : _f.showButton) && this.selectedValue !== undefined) {
this.handleClick();
}
else if (['date', 'date-range'].includes(this.subType) && this.selectedValue !== undefined) {
this.handleClick();
}
}
}
async readText(event) {
var _a;
const file = event.target.files.item(0);
const text = await this.toBase64(file);
this.LOG.debug(['readText'], { file, text });
this.selectedValue = await this.toBase64(file);
if (!((_a = this.innerOptions.input) === null || _a === void 0 ? void 0 : _a.showButton)) {
this.handleClick();
}
event.target.value = '';
}
toBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
});
}
;
parseResult() {
var _a, _b, _c, _d, _e, _f, _g, _h;
const data = this.innerResult.data !== undefined ? this.innerResult.data : '';
this.LOG.debug(['parseResult', 'innerOptions'], this.innerOptions);
const btnLabel = ((_a = this.innerOptions.button) !== null && _a !== void 0 ? _a : { label: 'Ok' }).label;
const dm = (_c = ((_b = this.result) !== null && _b !== void 0 ? _b : {
globalParams: {
button: { label: btnLabel },
},
}).globalParams) !== null && _c !== void 0 ? _c : { button: { label: btnLabel } };
this.label = (dm.button || { label: btnLabel }).label;
switch (this.subType) {
case 'text':
case 'textarea':
case 'secret':
if (GTSLib.isArray(data) && !!data[0]) {
this.value = data[0].toString();
}
else {
this.value = data.toString();
}
this.selectedValue = this.value;
break;
case 'number':
if (GTSLib.isArray(data) && data[0] !== undefined) {
this.value = parseFloat(data[0].toString());
}
else {
this.value = parseFloat(data.toString());
}
this.selectedValue = this.value;
break;
case 'date':
if (GTSLib.isArray(data) && data[0] !== undefined) {
this.value = [data[0]];
}
else {
this.value = [data];
}
this.selectedValue = this.value[0];
break;
case 'date-range':
if (GTSLib.isArray(data) && data.length >= 2) {
this.value = data.sort();
}
this.selectedValue = this.value;
break;
case 'slider':
this.innerOptions.input = (_d = this.innerOptions.input) !== null && _d !== void 0 ? _d : {};
this.innerOptions.input.value = (_e = this.innerOptions.input.value) !== null && _e !== void 0 ? _e : data;
this.value = ((_g = (_f = this.innerOptions) === null || _f === void 0 ? void 0 : _f.input) === null || _g === void 0 ? void 0 : _g.value) === undefined ? 0 : this.innerOptions.input.value;
this.selectedValue = this.value;
this.innerOptions = Utils.clone(this.innerOptions);
break;
case 'list':
case 'multi':
case 'multi-cb':
case 'autocomplete':
case 'chips':
case 'chips-autocomplete':
if (this.checkBoxes) {
Array.from(this.checkBoxes.querySelectorAll('input[type="checkbox"]'))
.filter((o) => o.checked)
.forEach((o) => o.checked = false);
}
this.values = [];
if (GTSLib.isArray(data)) {
this.values = [...data].filter(d => d !== '');
}
else {
this.values = [data.toString()].filter(d => d !== '');
}
if (typeof this.values[0] === 'string' || typeof this.values[0] === 'number') {
this.values = this.values.map(s => ({ k: s, v: s, h: false, id: v4().replaceAll('-', '') }));
}
let index = 0;
if (((_h = this.innerOptions.input) !== null && _h !== void 0 ? _h : {}).value) {
index = this.values.map(o => o.v).indexOf((this.innerOptions.input || {}).value);
}
if (this.inputField) {
this.inputField.selectedIndex = index;
}
setTimeout(() => {
var _a, _b, _c, _d, _e, _f;
let value = (_b = (_a = this.innerOptions) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.value;
if (this.subType === 'multi' || this.subType === 'multi-cb' || this.subType === 'chips' || this.subType === 'chips-autocomplete') {
value = value !== null && value !== void 0 ? value : [];
if (!GTSLib.isArray(value)) {
value = [value];
}
}
if (this.subType !== 'autocomplete' && this.subType !== 'list') {
this.value = [...value];
}
else {
this.value = ((_d = (_c = this.innerOptions) === null || _c === void 0 ? void 0 : _c.input) === null || _d === void 0 ? void 0 : _d.value) !== undefined ? (_f = (_e = this.innerOptions) === null || _e === void 0 ? void 0 : _e.input) === null || _f === void 0 ? void 0 : _f.value : '';
}
if (this.subType === 'multi-cb' && this.checkBoxes) {
Array.from(this.checkBoxes.querySelectorAll('input[type="checkbox"]'))
.forEach((o) => o.checked = this.value.includes(o.value));
}
if (this.selectedValue !== undefined && this.selectedValue !== this.oldValue) {
this.handleSelect({ detail: this.selectedValue });
this.oldValue = Utils.clone(this.selectedValue);
}
this.selectedValue = Utils.clone(this.value);
});
if (this.subType === 'autocomplete' && this.autoCompleteJS) {
this.autoCompleteJS.data = {
src: this.values,
keys: 'v',
filter: (list) => list.filter(item => {
var _a, _b;
if ('value' in this.inputField) {
const inputValue = ((_a = this.innerOptions.input) === null || _a === void 0 ? void 0 : _a.caseSensitive) ? this.inputField.value : this.inputField.value.toLowerCase();
const itemValue = ((_b = this.innerOptions.input) === null || _b === void 0 ? void 0 : _b.caseSensitive) ? item.value.v : item.value.v.toLowerCase();
if (itemValue.startsWith(inputValue)) {
return item.value;
}
}
}),
};
}
break;
default:
return '';
}
}
selectAll(e) {
if (this.type === 'input:multi-cb' && this.checkBoxes) {
Array.from(this.checkBoxes.querySelectorAll('input[type="checkbox"]'))
.filter((o) => !o.checked)
.forEach((o) => o.checked = true);
this.handleSelect(e);
}
}
selectNone(e) {
if (this.type === 'input:multi-cb' && this.checkBoxes) {
Array.from(this.checkBoxes.querySelectorAll('input[type="checkbox"]'))
.filter((o) => o.checked)
.forEach((o) => o.checked = false);
this.handleSelect(e);
}
}
handleFilter(e) {
var _a, _b;
e.stopPropagation();
if (this.type === 'input:multi-cb' && this.checkBoxes) {
this.filter = (_b = (_a = e.target.value) !== null && _a !== void 0 ? _a : e.detail) !== null && _b !== void 0 ? _b : '';
this.values = this.values.map(v => (Object.assign(Object.assign({}, v), { h: !new RegExp(`.*${this.filter}.*`, 'gi').test(v.v) })));
}
}
handleAutoComplete(input) {
if (this.subType === 'chips-autocomplete') {
return this.values
.filter(v => { var _a; return v.k.match(new RegExp(input, ((_a = this.innerOptions.input) === null || _a === void 0 ? void 0 : _a.caseSensitive) ? 'g' : 'gi')); })
.map(v => v.k);
}
else {
return [];
}
}
handleContains(input) {
var _a;
if (this.subType === 'chips-autocomplete') {
return this.values
.map(v => { var _a; return ((_a = this.innerOptions.input) === null || _a === void 0 ? void 0 : _a.caseSensitive) ? v.k.toLowerCase() : v.k; })
.includes(((_a = this.innerOptions.input) === null || _a === void 0 ? void 0 : _a.caseSensitive) ? input.toLowerCase() : input);
}
else {
return false;
}
}
getClass() {
var _a, _b;
return `discovery-input${((_b = (_a = this.innerOptions) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.validation) ? ' validation' : ''}`;
}
getInput() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46;
switch (this.subType) {
case 'text':
return h("input", { type: "text", class: this.getClass(), value: this.value, onInput: e => this.handleSelect(e), required: (_b = (_a = this.innerOptions) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.validation, minLength: (_d = (_c = this.innerOptions) === null || _c === void 0 ? void 0 : _c.input) === null || _d === void 0 ? void 0 : _d.min, maxLength: (_f = (_e = this.innerOptions) === null || _e === void 0 ? void 0 : _e.input) === null || _f === void 0 ? void 0 : _f.max, disabled: (_h = (_g = this.innerOptions) === null || _g === void 0 ? void 0 : _g.input) === null || _h === void 0 ? void 0 : _h.disabled, ref: el => this.inputField = el });
case 'number':
return [
h("input", { type: "number", class: this.getClass(), value: this.value.toString(), onInput: e => this.handleSelect(e), ref: el => this.inputField = el, min: (_k = (_j = this.innerOptions) === null || _j === void 0 ? void 0 : _j.input) === null || _k === void 0 ? void 0 : _k.min, max: (_m = (_l = this.innerOptions) === null || _l === void 0 ? void 0 : _l.input) === null || _m === void 0 ? void 0 : _m.max, required: (_p = (_o = this.innerOptions) === null || _o === void 0 ? void 0 : _o.input) === null || _p === void 0 ? void 0 : _p.validation, disabled: (_r = (_q = this.innerOptions) === null || _q === void 0 ? void 0 : _q.input) === null || _r === void 0 ? void 0 : _r.disabled, step: (_u = (_t = (_s = this.innerOptions) === null || _s === void 0 ? void 0 : _s.input) === null || _t === void 0 ? void 0 : _t.step) !== null && _u !== void 0 ? _u : 'any' }),
h("span", { class: "validity" })
];
case 'file':
return h("input", { type: "file", class: this.getClass(), accept: (_x = (_w = (_v = this.innerOptions) === null || _v === void 0 ? void 0 : _v.input) === null || _w === void 0 ? void 0 : _w.accept) !== null && _x !== void 0 ? _x : '*/*', required: (_z = (_y = this.innerOptions) === null || _y === void 0 ? void 0 : _y.input) === null || _z === void 0 ? void 0 : _z.validation, onChange: e => void this.readText(e), disabled: (_1 = (_0 = this.innerOptions) === null || _0 === void 0 ? void 0 : _0.input) === null || _1 === void 0 ? void 0 : _1.disabled, ref: el => this.inputField = el });
case 'textarea':
return h("textarea", { class: this.getClass(), value: this.value, onInput: e => this.handleSelect(e), required: (_3 = (_2 = this.innerOptions) === null || _2 === void 0 ? void 0 : _2.input) === null || _3 === void 0 ? void 0 : _3.validation, disabled: (_5 = (_4 = this.innerOptions) === null || _4 === void 0 ? void 0 : _4.input) === null || _5 === void 0 ? void 0 : _5.disabled, ref: el => this.inputField = el });
case 'secret':
return h("input", { type: "password", class: this.getClass(), value: this.value, onInput: e => this.handleSelect(e), required: (_7 = (_6 = this.innerOptions) === null || _6 === void 0 ? void 0 : _6.input) === null || _7 === void 0 ? void 0 : _7.validation, disabled: (_9 = (_8 = this.innerOptions) === null || _8 === void 0 ? void 0 : _8.input) === null || _9 === void 0 ? void 0 : _9.disabled, ref: el => this.inputField = el });
case 'date':
case 'date-range':
return h("discovery-input-date-range", { dateRange: this.value, onValueChanged: e => this.handleSelect(e), options: this.innerOptions, required: (_11 = (_10 = this.innerOptions) === null || _10 === void 0 ? void 0 : _10.input) === null || _11 === void 0 ? void 0 : _11.validation, disabled: (_13 = (_12 = this.innerOptions) === null || _12 === void 0 ? void 0 : _12.input) === null || _13 === void 0 ? void 0 : _13.disabled });
case 'autocomplete':
return h("input", { type: "text", class: this.getClass(), required: (_15 = (_14 = this.innerOptions) === null || _14 === void 0 ? void 0 : _14.input) === null || _15 === void 0 ? void 0 : _15.validation, value: this.value, disabled: (_17 = (_16 = this.innerOptions) === null || _16 === void 0 ? void 0 : _16.input) === null || _17 === void 0 ? void 0 : _17.disabled, ref: el => this.inputField = el });
case 'slider':
return h("div", { class: "slider-wrapper", ref: el => this.pngWrapper = el }, h("discovery-slider", { options: this.innerOptions, onValueChanged: e => this.handleSelect(e), debug: this.debug, disabled: (_19 = (_18 = this.innerOptions) === null || _18 === void 0 ? void 0 : _18.input) === null || _19 === void 0 ? void 0 : _19.disabled, ref: el => this.inputField = el }));
case 'list':
return h("select", { class: this.getClass(), onInput: e => this.handleSelect(e), required: (_21 = (_20 = this.innerOptions) === null || _20 === void 0 ? void 0 : _20.input) === null || _21 === void 0 ? void 0 : _21.validation, disabled: (_23 = (_22 = this.innerOptions) === null || _22 === void 0 ? void 0 : _22.input) === null || _23 === void 0 ? void 0 : _23.disabled, ref: el => this.inputField = el }, this.values.map(v => (h("option", { value: v.k, selected: this.value === v.k }, v.v))));
case 'multi':
return h("select", { class: this.getClass(), onInput: e => this.handleSelect(e), multiple: true, required: (_25 = (_24 = this.innerOptions) === null || _24 === void 0 ? void 0 : _24.input) === null || _25 === void 0 ? void 0 : _25.validation, disabled: (_27 = (_26 = this.innerOptions) === null || _26 === void 0 ? void 0 : _26.input) === null || _27 === void 0 ? void 0 : _27.disabled, ref: el => this.inputField = el }, this.values.map(v => (h("option", { value: v.k, selected: (this.value || []).includes(v.k) }, v.v))));
case 'multi-cb':
return h("div", { class: "multi-cb-wrapper", ref: el => this.pngWrapper = el }, h("div", { class: "multi-cb-layout" }, ((_28 = this.innerOptions.input) === null || _28 === void 0 ? void 0 : _28.showFilter)
? h("input", { type: "text", class: this.getClass(), onKeyUp: e => this.handleFilter(e) })
: '', h("div", { class: "multi-cb-list-wrapper", ref: el => this.checkBoxes = el }, this.values.map(v => {
var _a, _b, _c;
return (h("div", { class: { 'multi-cb-item-wrapper': true, hidden: v.h } }, h("input", { type: "checkbox", value: v.k, id: v.id, checked: ((_a = this.value) !== null && _a !== void 0 ? _a : []).includes(v.k), onInput: e => this.handleSelect(e), disabled: (_c = (_b = this.innerOptions) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.disabled, name: v.v }), h("label", { htmlFor: v.id }, v.v)));
}))), h("div", { class: "multi-cb-buttons-wrapper" }, h("div", null, h("button", { class: "discovery-btn secondary", type: "button", disabled: (_30 = (_29 = this.innerOptions) === null || _29 === void 0 ? void 0 : _29.input) === null || _30 === void 0 ? void 0 : _30.disabled, onClick: e => this.selectAll(e) }, (_33 = (_32 = (_31 = this.innerOptions) === null || _31 === void 0 ? void 0 : _31.input) === null || _32 === void 0 ? void 0 : _32.allLabel) !== null && _33 !== void 0 ? _33 : 'All'), h("button", { class: "discovery-btn secondary", type: "button", disabled: (_35 = (_34 = this.innerOptions) === null || _34 === void 0 ? void 0 : _34.input) === null || _35 === void 0 ? void 0 : _35.disabled, onClick: e => this.selectNone(e) }, (_38 = (_37 = (_36 = this.innerOptions) === null || _36 === void 0 ? void 0 : _36.input) === null || _37 === void 0 ? void 0 : _37.noneLabel) !== null && _38 !== void 0 ? _38 : 'None')), ((_39 = this.innerOptions.input) === null || _39 === void 0 ? void 0 : _39.showButton) ?
h("div", { class: "discovery-input-btn-wrapper" }, h("button", { class: "discovery-btn", disabled: ((_41 = (_40 = this.innerOptions) === null || _40 === void 0 ? void 0 : _40.input) === null || _41 === void 0 ? void 0 : _41.disabled) || this.disabled, type: "button", onClick: () => this.handleClickRT(), innerHTML: this.label })) : ''));
case 'chips':
case 'chips-autocomplete':
return h("div", { class: { 'chips-input-wrapper': true, 'disabled': (_43 = (_42 = this.innerOptions) === null || _42 === void 0 ? void 0 : _42.input) === null || _43 === void 0 ? void 0 : _43.disabled } }, h("discovery-input-chips", { ref: el => this.inputField = el, chips: this.value, autocomplete: this.handleAutoComplete.bind(this), containsFn: this.handleContains.bind(this), disabled: (_45 = (_44 = this.innerOptions) === null || _44 === void 0 ? void 0 : _44.input) === null || _45 === void 0 ? void 0 : _45.disabled, onChipChange: e => this.handleSelect(e), constrain_input: !!((_46 = this.innerOptions.input) === null || _46 === void 0 ? void 0 : _46.onlyFromAutocomplete) }));
default:
return '';
}
}
render() {
var _a, _b, _c;
return [
h("style", { key: '1f6e3b18c7d0ee54c2ad101146b8640a78aeacc4' }, this.generateStyle(this.innerStyle)),
h("div", { key: '730abc6d65f01c5434865bb5249121ec0a0bff26', ref: el => this.root = el }, h("div", { key: '047c86ec723544fe1fe5a51ebb55f8113f7f9376', class: 'discovery-input-wrapper type-' + this.subType }, this.getInput(), ((_a = this.innerOptions.input) === null || _a === void 0 ? void 0 : _a.showButton) && this.type !== 'input:multi-cb' ?
h("div", { class: 'discovery-input-btn-wrapper ' + this.subType }, h("button", { class: "discovery-btn", disabled: ((_c = (_b = this.innerOptions) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.disabled) || this.disabled, type: "button", onClick: () => this.handleClickRT() }, this.label)) : '')),
];
}
static get is() { return "discovery-input"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["discovery-input.scss"]
};
}
static get styleUrls() {
return {
"$": ["discovery-input.css"]
};
}
static get properties() {
return {
"result": {
"type": "string",
"mutable": false,
"complexType": {
"original": "DataModel | string",
"resolved": "DataModel | string",
"references": {
"DataModel": {
"location": "import",
"path": "../../model/types",
"id": "src/model/types.ts::DataModel"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "result",
"reflect": false
},
"type": {
"type": "string",
"mutable": false,
"complexType": {
"original": "ChartType",
"resolved": "string",
"references": {
"ChartType": {
"location": "import",
"path": "../../model/types",
"id": "src/model/types.ts::ChartType"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "type",
"reflect": false
},
"options": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Param | string",
"resolved": "Param | string",
"references": {
"Param": {
"location": "import",
"path": "../../model/param",
"id": "src/model/param.ts::Param"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "options",
"reflect": false,
"defaultValue": "new Param()"
},
"width": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "width",
"reflect": false
},
"height": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "height",
"reflect": false
},
"debug": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "debug",
"reflect": false,
"defaultValue": "false"
},
"url": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "url",
"reflect": false
}
};
}
static get states() {
return {
"parsing": {},
"rendering": {},
"value": {},
"subType": {},
"innerStyle": {},
"innerResult": {},
"label": {},
"selectedValue": {},
"values": {}
};
}
static get events() {
return [{
"method": "draw",
"name": "draw",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "execResult",
"name": "execResult",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any[]",
"resolved": "any[]",
"references": {}
}
}, {
"method": "statusError",
"name": "statusError",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "discoveryEvent",
"name": "discoveryEvent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "DiscoveryEvent",
"resolved": "DiscoveryEvent",
"references": {
"DiscoveryEvent": {
"location": "import",
"path": "../../model/types",
"id": "src/model/types.ts::DiscoveryEvent"
}
}
}
}];
}
static get methods() {
return {
"resize": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"export": {
"complexType": {
"signature": "(type?: \"png\" | \"svg\") => Promise<string>",
"parameters": [{
"name": "type",
"type": "\"svg\" | \"png\"",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"Param": {
"location": "import",
"path": "../../model/param",
"id": "src/model/param.ts::Param"
},
"DataModel": {
"location": "import",
"path": "../../model/types",
"id": "src/model/types.ts::DataModel"
},
"HTMLDiscoverySliderElement": {
"location": "global",
"id": "global::HTMLDiscoverySliderElement"
}
},
"return": "Promise<string>"
},
"docs": {
"text": "",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "result",
"methodName": "updateRes"
}, {
"propName": "options",
"methodName": "optionsUpdate"
}];
}
static get listeners() {
return [{
"name": "discoveryEvent",
"method": "discoveryEventHandler",
"target": "window",
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=discovery-input.js.map