@senx/discovery-widgets
Version:
Discovery Widgets Elements
350 lines (346 loc) • 18.8 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { U as Utils, G as GTSLib } from './utils.js';
import { d as defineCustomElement$1 } from './discovery-input-chips-chip2.js';
const discoveryInputChipsCss = "/*!\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 *//*!\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{position:relative;--chip-input-font-size:var(--warp-view-input-font-size, 1rem);--chip-input-border-radius:0;--chip-input-border-color:transparent;--chip-input-border-width:1px;--chip-input-autocomplete-background:var(--warp-view-input-bg-color, #ffffff);--chip-input-autocomplete-font-size:var(--warp-view-input-font-size, 1rem);--chip-input-autocomplete-hover-background-color:var(--warp-view-autocomplete-hover-background-color, #c0c0c0);--chip-background-color:var(--warp-view-chip-background-color, #c0c0c0);--chip-height:20px;--chip-border-color:var(--warp-view-input-border-color, #c0c0c0);--chip-border-width:1px;--chip-font-size:var(--warp-view-input-font-size, 1rem);--chip-icon-height:15px;--chip-icon-width:15px;--chip-close-icon-height:var(--warp-view-input-font-size, 1rem);--chip-close-icon-width:var(--warp-view-input-font-size, 1rem);--chip-close-icon-fill:var(--warp-view-chip-close-icon-fill, rgba(64, 64, 64, 0.8));--chip-close-icon-hover-fill:var(--warp-view-chip-hover-fill, #404040)}:host .wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;border-style:solid;border-radius:var(--chip-input-border-radius, 0px);border-color:var(--chip-input-border-color, transparent transparent #e0e0e0 transparent);border-width:var(--chip-input-border-width, 0px 0px 2px 0px);margin:0;padding:0;min-height:32px;height:auto}:host .chip-input-autocomplete-container{display:none;position:absolute;background-color:var(--chip-input-autocomplete-background-color, white);border:1px solid var(--warp-view-input-border-color, #c0c0c0);border-radius:var(--warp-view-input-border-radius, 0.25rem);font-size:var(--chip-input-autocomplete-font-size, 24px);padding:var(--chip-input-autocomplete-padding, 5px 10px);max-height:var(--chip-input-autocomplete-max-height, 200px);overflow:auto;z-index:999999}:host .real_input{font-size:var(--chip-input-font-size, 24px);line-height:var(--chip-input-font-size, 24px);border:none;margin-left:5px;-ms-flex-negative:100;flex-shrink:100;-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:20%;flex-basis:20%;min-width:20px;background-color:transparent;padding:0;height:32px}:host .real_input:focus{outline:none}:host .caret_position_tracker{visibility:hidden;position:absolute;top:0;left:-5000px}";
const DiscoveryInputChipsStyle0 = discoveryInputChipsCss;
const DiscoveryInputChips = /*@__PURE__*/ proxyCustomElement(class DiscoveryInputChips extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.chipClick = createEvent(this, "chipClick", 7);
this.chipInput = createEvent(this, "chipInput", 7);
this.chipChange = createEvent(this, "chipChange", 6);
this.chipCreate = createEvent(this, "chipCreate", 6);
this.chips = [];
this.constrain_input = false;
this.disabled = false;
this.innerChips = [];
this.change_handler_enabled = true;
this.autocomplete_debounce = 200;
this.autocomplete_highlight = true;
this.delimiters = [' '];
this.boundClickHandler = this.handleDocumentClick.bind(this);
}
updateChips() {
var _a;
if (!Utils.deepEqual(this.chips, this.innerChips)) {
this.innerChips = ((_a = this.chips) !== null && _a !== void 0 ? _a : []).slice();
this.chipChange.emit(this.innerChips);
}
}
// noinspection JSUnusedGlobalSymbols
componentDidLoad() {
var _a;
this.el.addEventListener('click', () => this.real_input.focus());
this.innerChips = ((_a = this.chips) !== null && _a !== void 0 ? _a : []).slice();
}
handleAutocompleteContainerFocus(event) {
event.preventDefault();
event.stopImmediatePropagation();
}
handleChipClose(event) {
var _a;
const chipLabel = event.detail;
let index = -1;
for (let i = 0; i < ((_a = this.innerChips) !== null && _a !== void 0 ? _a : []).length; i++) {
if (this.innerChips[i] === chipLabel) {
index = i;
break;
}
}
if (index >= 0) {
void this.deleteChip(index);
}
}
handleDocumentClick(event) {
var _a;
if (((_a = event.path) !== null && _a !== void 0 ? _a : []).includes(this.el)) {
return;
}
this.closeAutoComplete(true);
}
handleChipClick(event, chip) {
this.chipClick.emit({
label: chip.label,
event: event,
});
}
handleInput(event) {
var _a;
let autocomplete_items = [];
this.value = this.real_input.value;
const key = event ? (_a = event.data) !== null && _a !== void 0 ? _a : '' : '';
if (this.delimiters.includes(key)) {
event.preventDefault();
event.stopImmediatePropagation();
if (!this.constrain_input)
return this.createChip(undefined);
}
if (this.autocomplete_debounce_key) {
clearTimeout(this.autocomplete_debounce_key);
}
this.chipInput.emit();
return new Promise(resolve => {
this.autocomplete_debounce_key = setTimeout(() => {
(async () => {
this.autocomplete_debounce_key = null;
const value = this.real_input.value;
this.highlighted_autocomplete_index = null;
if (this.autocomplete) {
autocomplete_items = await this.autocomplete(value);
}
if (!autocomplete_items.length) {
this.closeAutoComplete(false);
return;
}
else {
this.showAutoComplete(autocomplete_items, value);
}
})().then(() => resolve()).catch(e => console.error(e));
}, this.autocomplete_debounce);
});
}
async handleBeforeInput(event) {
var _a;
const input_type = event.inputType;
const key = event.data;
let autocomplete_items = [];
if (input_type === 'deleteContentBackward') {
if (this.real_input.selectionStart === 0) {
if ((_a = this.innerChips) === null || _a === void 0 ? void 0 : _a.length)
await this.deleteChip(this.innerChips.length - 1);
}
return;
}
if ((input_type === 'insertLineBreak')) {
event.preventDefault();
event.stopImmediatePropagation();
if (this.highlighted_autocomplete_index !== null) {
const div = this.autocompleteContainer.childNodes[this.highlighted_autocomplete_index];
return this.handleAutoCompleteItemSelected(div);
}
else {
if (this.autocomplete_select_default) {
if (this.autocompleteContainer.childNodes.length) {
const div = this.autocompleteContainer.childNodes[0];
return this.handleAutoCompleteItemSelected(div);
}
}
}
await this.createChip(undefined);
return;
}
if (this.constrain_input && !!this.autocomplete) {
let value = this.real_input.value;
value += key;
this.highlighted_autocomplete_index = null;
if (this.autocomplete) {
autocomplete_items = await this.autocomplete(value);
}
if (!autocomplete_items.length) {
event.preventDefault();
event.stopImmediatePropagation();
}
return;
}
}
handleChange() {
if (!this.change_handler_enabled) {
return;
}
}
handleKeydown(event) {
const key = event.key;
let navigating = false;
if (key === 'ArrowDown') {
if (this.highlighted_autocomplete_index == null)
this.highlighted_autocomplete_index = -1;
this.highlighted_autocomplete_index++;
if (this.highlighted_autocomplete_index > (this.autocompleteContainer.childNodes.length - 1))
this.highlighted_autocomplete_index = this.autocompleteContainer.childNodes.length - 1;
navigating = true;
}
if (key === 'ArrowUp') {
if (this.highlighted_autocomplete_index == null)
this.highlighted_autocomplete_index = 1;
this.highlighted_autocomplete_index--;
if (this.highlighted_autocomplete_index < 0)
this.highlighted_autocomplete_index = 0;
navigating = true;
}
if (navigating) {
const items = this.autocompleteContainer.children;
for (let i = 0; i < items.length; i++) {
const item = items.item(i);
item.style.backgroundColor = 'var(--chip-input-autocomplete-background-color, white)';
if (this.highlighted_autocomplete_index === i) {
item.style.backgroundColor = 'var(--chip-input-autocomplete-hover-background-color, lightblue)';
item.scrollIntoView();
}
}
}
}
updateCaretPosition() {
const selection_start = this.real_input.selectionStart;
this.caret_position_tracker.textContent = this.real_input.value.substring(0, selection_start).replace(/\s/g, '\u00a0');
}
closeAutoComplete(force) {
if (!force && this.show_autocomplete_on_focus)
return;
if (this.autocomplete_dismiss_target) {
this.autocomplete_dismiss_target.removeEventListener('click', this.boundClickHandler);
}
else {
document.removeEventListener('click', this.boundClickHandler);
}
this.autocompleteContainer.style.display = 'none';
}
async deleteChip(index) {
var _a;
((_a = this.innerChips) !== null && _a !== void 0 ? _a : []).splice(index, 1);
this.innerChips = [...this.innerChips];
this.chipChange.emit(this.innerChips);
if (this.show_autocomplete_on_focus && this.autocomplete) {
await this.handleInput(undefined);
}
}
async handleAutoCompleteItemSelected(div) {
this.change_handler_enabled = false;
this.real_input.value = div.dataset.value;
await this.createChip(div.autocomplete_data);
this.closeAutoComplete(false);
this.real_input.blur();
this.real_input.focus();
this.highlighted_autocomplete_index = null;
}
async handleFocus() {
this.updateCaretPosition();
if (this.show_autocomplete_on_focus && !!this.autocomplete) {
const autocomplete_items = await this.autocomplete(this.real_input.value);
this.showAutoComplete(autocomplete_items, this.real_input.value);
}
}
showAutoComplete(autocomplete_items, highlight_value) {
const rect = this.real_input.getBoundingClientRect();
const value = highlight_value;
this.autocompleteContainer.style.display = 'block';
this.autocompleteContainer.style.top = `${this.real_input.offsetTop + rect.height + 3}px`;
this.autocompleteContainer.style.left = `${this.real_input.offsetLeft}px`;
this.autocompleteContainer.innerHTML = '';
autocomplete_items.map((item) => {
let label;
if (typeof item == 'string') {
label = item;
}
else {
label = item.label;
}
const start_index = label.toLowerCase().indexOf(value.toLowerCase());
const prefix = label.substring(0, start_index);
const match = label.slice(start_index, start_index + value.length);
const postfix = label.slice(start_index + value.length);
const div = document.createElement('DIV');
div.addEventListener('focus', (event) => {
event.preventDefault();
event.stopImmediatePropagation();
});
div.style.backgroundColor = 'var(--chip-input-autocomplete-background-color, white)';
div.style.borderBottom = '1px solid lightgrey';
div.style.padding = '3px';
div.style.cursor = 'pointer';
if (this.autocomplete_highlight) {
div.innerHTML = `${prefix}<span style='font-weight: bold'>${match}</span>${postfix}`;
}
else {
div.innerHTML = label;
}
div.dataset.value = label;
div.onmouseover = () => div.style.backgroundColor = 'var(--chip-input-autocomplete-hover-background-color, lightblue)';
div.onmouseout = () => div.style.backgroundColor = 'var(--chip-input-autocomplete-background-color, white)';
div.onclick = () => void this.handleAutoCompleteItemSelected(div);
this.autocompleteContainer.appendChild(div);
});
let autocomplete_dismiss_target = this.autocompleteContainer;
let element;
if (this.autocomplete_dismiss_target) {
if (typeof this.autocomplete_dismiss_target == 'string') {
element = this.autocompleteContainer.querySelector(this.autocomplete_dismiss_target);
}
else {
element = this.autocomplete_dismiss_target;
}
}
if (element) {
autocomplete_dismiss_target = element;
}
autocomplete_dismiss_target.addEventListener('click', this.boundClickHandler);
}
async createChip(value) {
var _a;
if (!value) {
value = this.real_input.value;
}
if (!!this.constrain_input && !await this.containsFn(this.real_input.value)) {
return;
}
if (value.trim() !== '') {
this.innerChips = [...(_a = this.innerChips) !== null && _a !== void 0 ? _a : [], value.trim()];
this.change_handler_enabled = false;
this.real_input.value = '';
this.change_handler_enabled = true;
this.chipCreate.emit(value.trim());
this.chipChange.emit(this.innerChips);
}
if (this.show_autocomplete_on_focus && this.autocomplete) {
this.updateCaretPosition();
await this.handleInput();
}
else if (this.autocomplete) {
this.closeAutoComplete(false);
}
}
render() {
return h(Host, { key: '2aa42483010a4e1728bd35610a720fcd244218c7' }, h("div", { key: '6f5d648ce3b61a465b7c8e36ea17bb0ec44cb72b', class: "chip-input-autocomplete-container", onFocus: this.handleAutocompleteContainerFocus.bind(this), ref: e => this.autocompleteContainer = e }), h("div", { key: '03090705f26c801a6c6d9508a42e86c5c9e89455', class: { 'wrapper': true, 'disabled': this.disabled } }, GTSLib.isArray(this.innerChips)
? this.innerChips.map(chip => h("discovery-input-chips-chip", { onClick: event => this.handleChipClick(event, chip), disabled: this.disabled, label: chip, onRemoveChip: this.handleChipClose.bind(this) }))
: '', h("div", { key: 'f463c73a050ada949616c29c1c48b0204210d49c', class: "caret_position_tracker", ref: el => this.caret_position_tracker = el }), h("input", { key: 'ba07a483c8b7eaacd4218714bd80d52b6beeded8', class: "real_input", type: "text", ref: e => {
this.real_input = e;
e.addEventListener('beforeinput', this.handleBeforeInput.bind(this));
}, onInput: this.handleInput.bind(this), disabled: this.disabled, onChange: this.handleChange.bind(this), onKeyDown: this.handleKeydown.bind(this), onKeyUp: this.updateCaretPosition.bind(this), onClick: this.updateCaretPosition.bind(this), onFocus: this.handleFocus.bind(this) })));
}
get el() { return this; }
static get watchers() { return {
"chips": ["updateChips"]
}; }
static get style() { return DiscoveryInputChipsStyle0; }
}, [1, "discovery-input-chips", {
"chips": [16],
"autocomplete": [16],
"containsFn": [16],
"constrain_input": [4],
"value": [1025],
"disabled": [4],
"innerChips": [32]
}, [[0, "document:click", "handleDocumentClick"]], {
"chips": ["updateChips"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["discovery-input-chips", "discovery-input-chips-chip"];
components.forEach(tagName => { switch (tagName) {
case "discovery-input-chips":
if (!customElements.get(tagName)) {
customElements.define(tagName, DiscoveryInputChips);
}
break;
case "discovery-input-chips-chip":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { DiscoveryInputChips as D, defineCustomElement as d };
//# sourceMappingURL=discovery-input-chips2.js.map