@senx/discovery-widgets
Version:
Discovery Widgets Elements
977 lines (957 loc) • 67.1 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { c as commonjsGlobal, P as Param, U as Utils, G as GTSLib, L as Logger, v as v4 } from './utils.js';
import { d as domtoimage } from './dom-to-image.js';
import { d as defineCustomElement$4 } from './discovery-input-chips2.js';
import { d as defineCustomElement$3 } from './discovery-input-chips-chip2.js';
import { d as defineCustomElement$2 } from './discovery-input-date-range2.js';
import { d as defineCustomElement$1 } from './discovery-slider2.js';
var autoComplete$1 = {exports: {}};
(function (module, exports) {
(function (global, factory) {
module.exports = factory() ;
})(commonjsGlobal, (function () {
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function _createForOfIteratorHelper(r, e) {
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (!t) {
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
t && (r = t);
var n = 0,
F = function () {};
return {
s: F,
n: function () {
return n >= r.length ? {
done: !0
} : {
done: !1,
value: r[n++]
};
},
e: function (r) {
throw r;
},
f: F
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var o,
a = !0,
u = !1;
return {
s: function () {
t = t.call(r);
},
n: function () {
var r = t.next();
return a = r.done, r;
},
e: function (r) {
u = !0, o = r;
},
f: function () {
try {
a || null == t.return || t.return();
} finally {
if (u) throw o;
}
}
};
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
_defineProperty(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
var select$1 = function select(element) {
return typeof element === "string" ? document.querySelector(element) : element();
};
var create = function create(tag, options) {
var el = typeof tag === "string" ? document.createElement(tag) : tag;
for (var key in options) {
var val = options[key];
if (key === "inside") {
val.append(el);
} else if (key === "dest") {
select$1(val[0]).insertAdjacentElement(val[1], el);
} else if (key === "around") {
var ref = val;
ref.parentNode.insertBefore(el, ref);
el.append(ref);
if (ref.getAttribute("autofocus") != null) ref.focus();
} else if (key in el) {
el[key] = val;
} else {
el.setAttribute(key, val);
}
}
return el;
};
var getQuery = function getQuery(field) {
return field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement ? field.value : field.innerHTML;
};
var format = function format(value, diacritics) {
value = String(value).toLowerCase();
return diacritics ? value.normalize("NFD").replace(/[\u0300-\u036f]/g, "").normalize("NFC") : value;
};
var debounce = function debounce(callback, duration) {
var timer;
return function () {
clearTimeout(timer);
timer = setTimeout(function () {
return callback();
}, duration);
};
};
var checkTrigger = function checkTrigger(query, condition, threshold) {
return condition ? condition(query) : query.length >= threshold;
};
var mark = function mark(value, cls) {
return create("mark", _objectSpread2({
innerHTML: value
}, typeof cls === "string" && {
"class": cls
})).outerHTML;
};
var configure = (function (ctx) {
var name = ctx.name,
options = ctx.options,
resultsList = ctx.resultsList,
resultItem = ctx.resultItem;
for (var option in options) {
if (_typeof(options[option]) === "object") {
if (!ctx[option]) ctx[option] = {};
for (var subOption in options[option]) {
ctx[option][subOption] = options[option][subOption];
}
} else {
ctx[option] = options[option];
}
}
ctx.selector = ctx.selector || "#" + name;
resultsList.destination = resultsList.destination || ctx.selector;
resultsList.id = resultsList.id || name + "_list_" + ctx.id;
resultItem.id = resultItem.id || name + "_result";
ctx.input = select$1(ctx.selector);
});
var eventEmitter = (function (name, ctx) {
ctx.input.dispatchEvent(new CustomEvent(name, {
bubbles: true,
detail: ctx.feedback,
cancelable: true
}));
});
var search = (function (query, record, options) {
var _ref = options || {},
mode = _ref.mode,
diacritics = _ref.diacritics,
highlight = _ref.highlight;
var nRecord = format(record, diacritics);
record = String(record);
query = format(query, diacritics);
if (mode === "loose") {
query = query.replace(/ /g, "");
var qLength = query.length;
var cursor = 0;
var match = Array.from(record).map(function (character, index) {
if (cursor < qLength && nRecord[index] === query[cursor]) {
character = highlight ? mark(character, highlight) : character;
cursor++;
}
return character;
}).join("");
if (cursor === qLength) return match;
} else {
var _match = nRecord.indexOf(query);
if (~_match) {
query = record.substring(_match, _match + query.length);
_match = highlight ? record.replace(query, mark(query, highlight)) : record;
return _match;
}
}
});
var getData = function getData(ctx, query) {
return new Promise(function ($return, $error) {
var data;
data = ctx.data;
if (data.cache && data.store) return $return();
return new Promise(function ($return, $error) {
if (typeof data.src === "function") {
return new Promise(function ($return, $error) {
if (data.src.constructor.name === "AsyncFunction") {
return data.src(query).then($return, $error);
}
return $return(data.src(query));
}).then($return, $error);
}
return $return(data.src);
}).then(function ($await_7) {
try {
ctx.feedback = data.store = $await_7;
eventEmitter("response", ctx);
return $return();
} catch ($boundEx) {
return $error($boundEx);
}
}, $error);
});
};
var findMatches = function findMatches(query, ctx) {
var data = ctx.data,
searchEngine = ctx.searchEngine;
var matches = [];
data.store.forEach(function (value, index) {
var find = function find(key) {
var record = key ? value[key] : value;
var match = typeof searchEngine === "function" ? searchEngine(query, record) : search(query, record, {
mode: searchEngine,
diacritics: ctx.diacritics,
highlight: ctx.resultItem.highlight
});
if (!match) return;
var result = {
match: match,
value: value
};
if (key) result.key = key;
matches.push(result);
};
if (data.keys) {
var _iterator = _createForOfIteratorHelper(data.keys),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var key = _step.value;
find(key);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
} else {
find();
}
});
if (data.filter) matches = data.filter(matches);
var results = matches.slice(0, ctx.resultsList.maxResults);
ctx.feedback = {
query: query,
matches: matches,
results: results
};
eventEmitter("results", ctx);
};
var Expand = "aria-expanded";
var Active = "aria-activedescendant";
var Selected = "aria-selected";
var feedback = function feedback(ctx, index) {
ctx.feedback.selection = _objectSpread2({
index: index
}, ctx.feedback.results[index]);
};
var render = function render(ctx) {
var resultsList = ctx.resultsList,
list = ctx.list,
resultItem = ctx.resultItem,
feedback = ctx.feedback;
var matches = feedback.matches,
results = feedback.results;
ctx.cursor = -1;
list.innerHTML = "";
if (matches.length || resultsList.noResults) {
var fragment = new DocumentFragment();
results.forEach(function (result, index) {
var element = create(resultItem.tag, _objectSpread2({
id: "".concat(resultItem.id, "_").concat(index),
role: "option",
innerHTML: result.match,
inside: fragment
}, resultItem["class"] && {
"class": resultItem["class"]
}));
if (resultItem.element) resultItem.element(element, result);
});
list.append(fragment);
if (resultsList.element) resultsList.element(list, feedback);
open(ctx);
} else {
close(ctx);
}
};
var open = function open(ctx) {
if (ctx.isOpen) return;
(ctx.wrapper || ctx.input).setAttribute(Expand, true);
ctx.list.removeAttribute("hidden");
ctx.isOpen = true;
eventEmitter("open", ctx);
};
var close = function close(ctx) {
if (!ctx.isOpen) return;
(ctx.wrapper || ctx.input).setAttribute(Expand, false);
ctx.input.setAttribute(Active, "");
ctx.list.setAttribute("hidden", "");
ctx.isOpen = false;
eventEmitter("close", ctx);
};
var goTo = function goTo(index, ctx) {
var resultItem = ctx.resultItem;
var results = ctx.list.getElementsByTagName(resultItem.tag);
var cls = resultItem.selected ? resultItem.selected.split(" ") : false;
if (ctx.isOpen && results.length) {
var _results$index$classL;
var state = ctx.cursor;
if (index >= results.length) index = 0;
if (index < 0) index = results.length - 1;
ctx.cursor = index;
if (state > -1) {
var _results$state$classL;
results[state].removeAttribute(Selected);
if (cls) (_results$state$classL = results[state].classList).remove.apply(_results$state$classL, _toConsumableArray(cls));
}
results[index].setAttribute(Selected, true);
if (cls) (_results$index$classL = results[index].classList).add.apply(_results$index$classL, _toConsumableArray(cls));
ctx.input.setAttribute(Active, results[ctx.cursor].id);
ctx.list.scrollTop = results[index].offsetTop - ctx.list.clientHeight + results[index].clientHeight + 5;
ctx.feedback.cursor = ctx.cursor;
feedback(ctx, index);
eventEmitter("navigate", ctx);
}
};
var next = function next(ctx) {
goTo(ctx.cursor + 1, ctx);
};
var previous = function previous(ctx) {
goTo(ctx.cursor - 1, ctx);
};
var select = function select(ctx, event, index) {
index = index >= 0 ? index : ctx.cursor;
if (index < 0) return;
ctx.feedback.event = event;
feedback(ctx, index);
eventEmitter("selection", ctx);
close(ctx);
};
var click = function click(event, ctx) {
var itemTag = ctx.resultItem.tag.toUpperCase();
var items = Array.from(ctx.list.querySelectorAll(itemTag));
var item = event.target.closest(itemTag);
if (item && item.nodeName === itemTag) {
select(ctx, event, items.indexOf(item));
}
};
var navigate = function navigate(event, ctx) {
switch (event.keyCode) {
case 40:
case 38:
event.preventDefault();
event.keyCode === 40 ? next(ctx) : previous(ctx);
break;
case 13:
if (!ctx.submit) event.preventDefault();
if (ctx.cursor >= 0) select(ctx, event);
break;
case 9:
if (ctx.resultsList.tabSelect && ctx.cursor >= 0) select(ctx, event);
break;
case 27:
ctx.input.value = "";
eventEmitter('clear', ctx);
close(ctx);
break;
}
};
function start (ctx, q) {
var _this = this;
return new Promise(function ($return, $error) {
var queryVal, condition;
queryVal = q || getQuery(ctx.input);
queryVal = ctx.query ? ctx.query(queryVal) : queryVal;
condition = checkTrigger(queryVal, ctx.trigger, ctx.threshold);
if (condition) {
return getData(ctx, queryVal).then(function ($await_2) {
try {
if (ctx.feedback instanceof Error) return $return();
findMatches(queryVal, ctx);
if (ctx.resultsList) render(ctx);
return $If_1.call(_this);
} catch ($boundEx) {
return $error($boundEx);
}
}, $error);
} else {
close(ctx);
return $If_1.call(_this);
}
function $If_1() {
return $return();
}
});
}
var eventsManager = function eventsManager(events, callback) {
for (var element in events) {
for (var event in events[element]) {
callback(element, event);
}
}
};
var addEvents = function addEvents(ctx) {
var events = ctx.events;
var run = debounce(function () {
return start(ctx);
}, ctx.debounce);
var publicEvents = ctx.events = _objectSpread2({
input: _objectSpread2({}, events && events.input)
}, ctx.resultsList && {
list: events ? _objectSpread2({}, events.list) : {}
});
var privateEvents = {
input: {
input: function input() {
run();
},
keydown: function keydown(event) {
navigate(event, ctx);
},
blur: function blur() {
close(ctx);
}
},
list: {
mousedown: function mousedown(event) {
event.preventDefault();
},
click: function click$1(event) {
click(event, ctx);
}
}
};
eventsManager(privateEvents, function (element, event) {
if (!ctx.resultsList && event !== "input") return;
if (publicEvents[element][event]) return;
publicEvents[element][event] = privateEvents[element][event];
});
eventsManager(publicEvents, function (element, event) {
ctx[element].addEventListener(event, publicEvents[element][event]);
});
};
var removeEvents = function removeEvents(ctx) {
eventsManager(ctx.events, function (element, event) {
ctx[element].removeEventListener(event, ctx.events[element][event]);
});
};
function init (ctx) {
var _this = this;
return new Promise(function ($return, $error) {
var placeHolder, resultsList, parentAttrs;
placeHolder = ctx.placeHolder;
resultsList = ctx.resultsList;
parentAttrs = {
role: "combobox",
"aria-owns": resultsList.id,
"aria-haspopup": true,
"aria-expanded": false
};
create(ctx.input, _objectSpread2(_objectSpread2({
"aria-controls": resultsList.id,
"aria-autocomplete": "both"
}, placeHolder && {
placeholder: placeHolder
}), !ctx.wrapper && _objectSpread2({}, parentAttrs)));
if (ctx.wrapper) ctx.wrapper = create("div", _objectSpread2({
around: ctx.input,
"class": ctx.name + "_wrapper"
}, parentAttrs));
if (resultsList) ctx.list = create(resultsList.tag, _objectSpread2({
dest: [resultsList.destination, resultsList.position],
id: resultsList.id,
role: "listbox",
hidden: "hidden"
}, resultsList["class"] && {
"class": resultsList["class"]
}));
addEvents(ctx);
if (ctx.data.cache) {
return getData(ctx).then(function ($await_2) {
try {
return $If_1.call(_this);
} catch ($boundEx) {
return $error($boundEx);
}
}, $error);
}
function $If_1() {
eventEmitter("init", ctx);
return $return();
}
return $If_1.call(_this);
});
}
function extend (autoComplete) {
var prototype = autoComplete.prototype;
prototype.init = function () {
init(this);
};
prototype.start = function (query) {
start(this, query);
};
prototype.unInit = function () {
if (this.wrapper) {
var parentNode = this.wrapper.parentNode;
parentNode.insertBefore(this.input, this.wrapper);
parentNode.removeChild(this.wrapper);
}
removeEvents(this);
};
prototype.open = function () {
open(this);
};
prototype.close = function () {
close(this);
};
prototype.goTo = function (index) {
goTo(index, this);
};
prototype.next = function () {
next(this);
};
prototype.previous = function () {
previous(this);
};
prototype.select = function (index) {
select(this, null, index);
};
prototype.search = function (query, record, options) {
return search(query, record, options);
};
}
function autoComplete(config) {
this.options = config;
this.id = autoComplete.instances = (autoComplete.instances || 0) + 1;
this.name = "autoComplete";
this.wrapper = 1;
this.threshold = 1;
this.debounce = 0;
this.resultsList = {
position: "afterend",
tag: "ul",
maxResults: 5
};
this.resultItem = {
tag: "li"
};
configure(this);
extend.call(this, autoComplete);
init(this);
}
return autoComplete;
}));
}(autoComplete$1));
const autoComplete = autoComplete$1.exports;
const discoveryInputCss = "/*!\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*/.autoComplete_wrapper{display:inline-block;position:relative}.autoComplete_wrapper>input{width:370px;height:40px;padding-left:10px;font-size:1rem;color:rgb(116, 116, 116);border-radius:4px;border:1px solid rgba(33, 33, 33, 0.2);outline:none}.autoComplete_wrapper>input::-webkit-input-placeholder{color:rgba(123, 123, 123, 0.5);-webkit-transition:all 0.3s ease;transition:all 0.3s ease}.autoComplete_wrapper>input::-moz-placeholder{color:rgba(123, 123, 123, 0.5);-moz-transition:all 0.3s ease;transition:all 0.3s ease}.autoComplete_wrapper>input:-ms-input-placeholder{color:rgba(123, 123, 123, 0.5);-ms-transition:all 0.3s ease;transition:all 0.3s ease}.autoComplete_wrapper>input::-ms-input-placeholder{color:rgba(123, 123, 123, 0.5);-ms-transition:all 0.3s ease;transition:all 0.3s ease}.autoComplete_wrapper>input::placeholder{color:rgba(123, 123, 123, 0.5);-webkit-transition:all 0.3s ease;transition:all 0.3s ease}.autoComplete_wrapper>ul{position:absolute;max-height:226px;overflow-y:scroll;top:100%;left:0;right:0;padding:0;margin:0.5rem 0 0 0;border-radius:4px;background-color:#fff;border:1px solid rgba(33, 33, 33, 0.1);z-index:1000;outline:none}.autoComplete_wrapper>ul>li{padding:10px 20px;list-style:none;text-align:left;font-size:16px;color:#212121;-webkit-transition:all 0.1s ease-in-out;transition:all 0.1s ease-in-out;border-radius:3px;background-color:rgba(255, 255, 255, 1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:all 0.2s ease;transition:all 0.2s ease}.autoComplete_wrapper>ul>li::-moz-selection{color:rgba(#ffffff, 0);background-color:rgba(#ffffff, 0)}.autoComplete_wrapper>ul>li::selection{color:rgba(#ffffff, 0);background-color:rgba(#ffffff, 0)}.autoComplete_wrapper>ul>li:hover{cursor:pointer;background-color:rgba(123, 123, 123, 0.1)}.autoComplete_wrapper>ul>li mark{background-color:transparent;color:rgba(255, 122, 122, 1);font-weight:bold}.autoComplete_wrapper>ul>li mark::-moz-selection{color:rgba(#ffffff, 0);background-color:rgba(#ffffff, 0)}.autoComplete_wrapper>ul>li mark::selection{color:rgba(#ffffff, 0);background-color:rgba(#ffffff, 0)}.autoComplete_wrapper>ul>li[aria-selected=\"true\"]{background-color:rgba(123, 123, 123, 0.1)}@media only screen and (max-width: 600px){.autoComplete_wrapper>input{width:18rem}}:host{display:block;position:relative;height:100%;width:100%}:host>div{height:100%;width:100%}:host .hidden{display:none}:host .chips-input-wrapper,:host input[type=text].discovery-input,:host input[type=password].discovery-input,:host input[type=date].discovery-input,:host input[type=time].discovery-input,:host input[type=number].discovery-input,:host textarea.discovery-input,:host input[type=file].discovery-input,:host select.discovery-input{margin:0.25rem 0.125rem;display:inline-block;position:relative;font-size:var(--warp-view-input-font-size, 1rem);border-radius:var(--warp-view-input-border-radius, 0.25rem);border:1px solid var(--warp-view-input-border-color, #c0c0c0);color:var(--warp-view-input-label-color, #404040);background-color:var(--warp-view-input-bg-color, #ffffff);vertical-align:middle;width:100%;height:34px;padding:1px 5px}:host .chips-input-wrapper[disabled],:host input[type=text].discovery-input[disabled],:host input[type=password].discovery-input[disabled],:host input[type=date].discovery-input[disabled],:host input[type=time].discovery-input[disabled],:host input[type=number].discovery-input[disabled],:host textarea.discovery-input[disabled],:host input[type=file].discovery-input[disabled],:host select.discovery-input[disabled]{background-color:var(--warp-view-input-disabled-bg-color, #c0c0c0);color:var(--warp-view-input-disabled-label-color, #404040);border:1px solid var(--warp-view-input-disabled-border-color, #c0c0c0)}:host .chips-input-wrapper:focus,:host input[type=text].discovery-input:focus,:host input[type=password].discovery-input:focus,:host input[type=date].discovery-input:focus,:host input[type=time].discovery-input:focus,:host input[type=number].discovery-input:focus,:host textarea.discovery-input:focus,:host input[type=file].discovery-input:focus,:host select.discovery-input:focus{outline:0;-webkit-box-shadow:0 0 0 0.25rem var(--warp-view-input-focus-outline-color, rgba(13, 110, 253, 0.25));box-shadow:0 0 0 0.25rem var(--warp-view-input-focus-outline-color, rgba(13, 110, 253, 0.25))}:host input[type=file].discovery-input{height:38px;padding:0}:host input.validation:invalid{outline:1px solid #dc3545 !important;padding-right:calc(1.5em + 0.75rem);background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e\");background-repeat:no-repeat;background-position:right calc(0.375em + 0.1875rem) center;background-size:calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)}:host input.validation:invalid:focus{border-color:#dc3545;-webkit-box-shadow:0 0 0 0.25rem rgba(220, 53, 69, 0.25);box-shadow:0 0 0 0.25rem rgba(220, 53, 69, 0.25)}:host input.validation:valid{outline:1px solid #198754 !important;padding-right:calc(1.5em + 0.75rem);background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\");background-repeat:no-repeat;background-position:right calc(0.375em + 0.1875rem) center;background-size:calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)}:host input.validation:valid:focus{border-color:#198754;-webkit-box-shadow:0 0 0 0.25rem rgba(25, 135, 84, 0.25);box-shadow:0 0 0 0.25rem rgba(25, 135, 84, 0.25)}:host textarea.discovery-input{width:calc(100% - 0.75rem);height:100%}:host .chips-input-wrapper{min-height:34px;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}:host .chips-input-wrapper.disabled{background-color:var(--warp-view-input-disabled-bg-color, #c0c0c0);color:var(--warp-view-input-disabled-label-color, #404040);border:1px solid var(--warp-view-input-disabled-border-color, #c0c0c0)}:host select.discovery-input{height:38px}:host select.discovery-input[multiple]{height:100%}:host select.discovery-input option{line-height:2.5em}:host .flatpickr-wrapper{width:100%;margin-right:20px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-bottom:10px}:host .flatpickr-wrapper .numInputWrapper span.arrowUp,:host .flatpickr-wrapper .numInputWrapper span.arrowDown{height:50%}:host .discovery-input-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:stretch;align-items:stretch;height:100%}:host .discovery-input-wrapper.type-date,:host .discovery-input-wrapper.type-date-range,:host .discovery-input-wrapper.type-autocomplete{height:auto}:host .discovery-input-wrapper.type-textarea{-ms-flex-direction:column;flex-direction:column}:host .autoComplete_wrapper{width:100%;margin-right:20px;margin-bottom:10px}:host .slider-wrapper{height:100%;width:calc(100% - 50px);padding-left:10px;padding-right:10px}:host .multi-cb-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;position:absolute;width:100%}:host .multi-cb-wrapper .multi-cb-layout{-ms-flex:1 1 auto;flex:1 1 auto;min-height:0;padding-right:17px;position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .multi-cb-wrapper .multi-cb-list-wrapper{overflow-y:auto;height:100%;margin-right:-15px}:host .multi-cb-wrapper .multi-cb-buttons-wrapper{padding-top:5px}:host .multi-cb-wrapper .multi-cb-buttons-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}:host input[type=file]::-webkit-file-upload-button{margin:0.25rem 0.125rem;display:inline-block;font-weight:400;line-height:1.5em;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.discovery-btn,:host input[type=file]::file-selector-button{margin:0.25rem 0.125rem;display:inline-block;font-weight:400;line-height:1.5em;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 input[type=file]::-webkit-file-upload-button.secondary{border:1px solid var(--warp-view-button-secondary-border-color, #a0a0a0);background-color:var(--warp-view-button-secondary-bg-color, #a0a0a0);color:var(--warp-view-button-secondary-label-color, #ffffff)}:host button.discovery-btn.secondary,:host input[type=file]::file-selector-button.secondary{border:1px solid var(--warp-view-button-secondary-border-color, #a0a0a0);background-color:var(--warp-view-button-secondary-bg-color, #a0a0a0);color:var(--warp-view-button-secondary-label-color, #ffffff)}:host input[type=file][disabled]::-webkit-file-upload-button{background-color:var(--warp-view-button-disabled-bg-color, #c0c0c0);color:var(--warp-view-button-disabled-label-color, #404040);border:1px solid var(--warp-view-button-disabled-border-color, #c0c0c0)}:host button:disabled,:host input[type=file][disabled]::file-selector-button{background-color:var(--warp-view-button-disabled-bg-color, #c0c0c0);color:var(--warp-view-button-disabled-label-color, #404040);border:1px solid var(--warp-view-button-disabled-border-color, #c0c0c0)}:host input[type=file]::-webkit-file-upload-button{margin:0 10px 0 0}:host input[type=file]::file-selector-button{margin:0 10px 0 0}:host .discovery-input-btn-wrapper.slider{margin-top:24px}:host .discovery-input-btn-wrapper.textarea{text-align:end}:host .range{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;margin:0.25rem 0.125rem;font-size:var(--warp-view-input-font-size, 1rem);border-radius:var(--warp-view-input-border-radius, 0.25rem);border:1px solid var(--warp-view-input-border-color, #c0c0c0);color:var(--warp-view-input-label-color, #404040);background-color:var(--warp-view-input-bg-color, #ffffff);height:34px;width:100%;padding:1px 5px}:host .range .flatpickr-wrapper{margin:0}:host .range span{padding-left:0.25rem;padding-right:0.25rem;font-size:var(--warp-view-input-font-size, 1rem);height:auto}:host .range .discovery-input,:host .range .discovery-input:focus{border:none !important;margin:0 !important;padding:0 !important;max-height:25px;cursor:pointer}:host .range.disabled{background-color:var(--warp-view-input-disabled-bg-color, #c0c0c0);color:var(--warp-view-input-disabled-label-color, #404040);border:1px solid var(--warp-view-input-disabled-border-color, #c0c0c0)}:host textarea{resize:none}";
const DiscoveryInputStyle0 = discoveryInputCss;
const DiscoveryInputComponent = /*@__PURE__*/ proxyCustomElement(class DiscoveryInputComponent extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.draw = createEvent(this, "draw", 7);
this.execResult = createEvent(this, "execResult", 7);
this.statusError = createEvent(this, "statusError", 7);
this.discoveryEvent = createEvent(this, "discoveryEvent", 7);
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;
}
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;