import { i, r, A, x } from './query-assigned-elements-fea1f631.js';
|
import { e } from './custom-element-30fc6381.js';
|
import { n, B as BaseElement } from './base.component-813fc7cf.js';
|
import { o } from './class-map-a0fb5d87.js';
|
import '@dh-software/furnview-icons';
|
|
var css_248z = i`.close-symbol{cursor:pointer;height:100%;position:relative;width:100%}.close-symbol.loading{z-index:999}.close-symbol.loading:after,.close-symbol.loading:before{background:#fff}.close-symbol:after,.close-symbol:before{background:var(--close-symbol-background,#888);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;content:" ";height:1px;margin:0;padding:0;position:absolute;top:50%;width:100%}.close-symbol:after:hover,.close-symbol:before:hover{background:var(--close-symbol-background-hover,#333)}.close-symbol:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}.close-symbol:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}:host(.active) .circle-number-symbol{border:var(--circle-number-symbol-border-active,2px solid #000)}.circle-number-symbol{align-items:center;background:var(--circle-number-symbol-background,var(--primary-color,red));border:var(--circle-number-symbol-border,2px solid #fff);border-radius:50%;box-shadow:var(--circle-number-symbol-box-shadow,1px 2px 5px 0 #000);color:var(--circle-number-symbol-color,var(--primary-text-color,#000));display:flex;height:var(--circle-number-symbol-size,30px);justify-content:center;position:relative;width:var(--circle-number-symbol-size,30px)}.custom-symbol{cursor:pointer;display:flex;left:10px;position:relative}.custom-symbol.up:after{background-image:var(--custom-symbol-image-down,url("/webui/images/minus.svg"));content:"";height:18px}.custom-symbol.down:after{background-image:var(--custom-symbol-image-down,url("/webui/images/plus.svg"));content:"";height:18px}.custom-symbol:after{color:#1e1e1e;margin:auto 0;padding:0 0 2px;pointer-events:none;transform:translateX(-15px);width:18px}.accordion-symbol{cursor:pointer;display:flex;left:10px;position:relative}.accordion-symbol.up:after{content:"-";font-size:xx-large;transform:scaleX(2) translateX(-4px)}.accordion-symbol.down:after{content:"+";font-size:xx-large}.accordion-symbol:after{color:#1e1e1e;margin:auto 0;padding:0 0 2px;pointer-events:none;transform:translateX(-15px);width:18px}.chevron-symbol{cursor:pointer;left:10px;position:relative}.chevron-symbol.up:after{content:"<"}.chevron-symbol.down:after{content:">"}.chevron-symbol:after{color:inherit;font:17px Consolas,monospace;padding:0 0 2px;pointer-events:none;position:absolute;-webkit-transform:rotate(90deg) translateX(-100%);-moz-transform:rotate(90deg) translateX(-100%);-ms-transform:rotate(90deg) translateX(-100%);transform:rotate(90deg) translateX(-100%)}@media (width >= 980px){.only-mobile{display:none!important}}@media (width <= 980px){.only-desktop{display:none!important}}.bold{font-weight:var(--global-font-weight-bold,600)}*{font-family:var(--global-font,Roboto);font-weight:var(--global-font-weight,400);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container{display:flex;margin:10px 0}.container.column{flex-direction:column}.container.column.reverse{flex-direction:column-reverse}.container.row{flex-direction:row}.container.row.reverse{flex-direction:row-reverse}.fluid{flex:1}.fluid.space-after{margin-right:55px}.hidden{display:none!important}.mobile-mode-hide,:host(.mobile-mode-hide){display:none!important}.invisible{visibility:hidden!important}.invisible-scroll,:host(.invisible-scroll){margin-right:-22px;overflow:hidden}.invisible-scroll>:first-child,:host(.invisible-scroll)>:first-child{box-sizing:content-box;overflow-x:hidden;overflow-y:scroll;padding-right:22px}.invisible-scroll.bottom,:host(.invisible-scroll.bottom){margin-right:unset;overflow:hidden}.invisible-scroll.bottom>:first-child,:host(.invisible-scroll.bottom)>:first-child{box-sizing:content-box;margin-bottom:-22px;overflow-x:scroll;overflow-y:hidden;padding-bottom:22px;padding-right:unset}:host([disabled]){filter:contrast(.5) grayscale(1);pointer-events:none}*{scrollbar-color:#5c5c5c hsla(0,0%,100%,.004);scrollbar-width:thin}[disabled]{filter:contrast(.5) grayscale(1);pointer-events:none}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar,::-webkit-scrollbar-corner{background:hsla(0,0%,100%,0)}::-webkit-scrollbar-thumb{background:#5c5c5c;-webkit-border-radius:8px}::-webkit-scrollbar-button,::-webkit-scrollbar-button:horizontal:end:decrement,::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:vertical:end:decrement,::-webkit-scrollbar-button:vertical:start:increment{background-color:transparent;border:none;color:transparent}:host([active]){border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;border-color:var(--dropdown-active-border-color,var(--dropdown-border-color,var(--bordered-color,red)))}:host([active]) input{z-index:2}:host([active]) #scroll-wrapper{border-color:var(--dropdown-active-border-color,var(--dropdown-border-color,var(--bordered-color,red)));max-height:200px;visibility:visible}:host([active]) .dropdown-header:after{content:"<"}:host(.fluid){flex:1;width:100%}:host(.centered) .dropdown-header{justify-content:center}:host{background-color:#fff;border:var(--dropdown-border-thickness,1px) solid var(--dropdown-border-color,var(--bordered-color,red));border-radius:var(--dropdown-border-radius,2em);display:flex;height:40px;margin:1px;min-width:0;padding:0;position:relative;width:auto}:host .dropdown-header{bottom:0;display:flex;left:0;position:absolute;right:0;top:0}:host .dropdown-header fv-label{margin:auto calc(var(--dropdown-icon-width, 20px) + var(--dropdown-label-gap, 1rem));overflow:hidden}:host .dropdown-header fv-label.placeholder{color:#a9a9a9}:host .dropdown-header:after{color:#333;content:">";font:17px Consolas,monospace;padding:0 0 2px;pointer-events:none;position:absolute;right:11px;top:10px;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}:host #scroll-wrapper{border:var(--dropdown-border-thickness,1px) solid var(--dropdown-border-color,var(--bordered-color,red));border-radius:0 0 var(--dropdown-border-radius,2em) var(--dropdown-border-radius,2em);border-top:none;height:auto;left:var(--scroll-wrapper-position-left,-1px);max-height:0;position:absolute;top:100%;transition:max-height .3s ease;visibility:hidden;width:100%;z-index:1}:host #dropdown-items-container{background:#fff;height:100%;max-height:200px;min-height:35px;width:100%}:host #items{height:100%;width:calc(100% + 17px)}:host input{background:transparent;border:none;flex:1;min-width:0;outline:none;padding:4px 15px 0;z-index:0}`;
|
|
var __defProp = Object.defineProperty;
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
var __getProtoOf = Object.getPrototypeOf;
|
var __reflectGet = Reflect.get;
|
var __decorateClass = (decorators, target, key, kind) => {
|
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
if (decorator = decorators[i])
|
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
if (kind && result)
|
__defProp(target, key, result);
|
return result;
|
};
|
var __superStaticGet = (obj, member) => __reflectGet(__getProtoOf(obj), member, obj);
|
let DropDownComponent = class extends BaseElement {
|
constructor() {
|
super(...arguments);
|
this.options = {};
|
this.active = false;
|
this.value = "";
|
this.name = "";
|
this.onActiveChange = (e) => {
|
this.active = false;
|
document.removeEventListener("click", this.onActiveChange);
|
};
|
}
|
firstUpdated(_changedProperties) {
|
super.firstUpdated(_changedProperties);
|
this.addEventListener("dropdown-item-changed", (ev) => {
|
this.dropdownItemChanged(ev);
|
});
|
}
|
onFocus() {
|
this.active = true;
|
}
|
onBlur() {
|
this.active = false;
|
const textContent = this.shadowRoot ? this.shadowRoot.querySelector(".text-content") : null;
|
textContent == null ? void 0 : textContent.classList.remove("hidden");
|
}
|
onClick(e) {
|
var _a;
|
e.preventDefault();
|
e.stopPropagation();
|
const activeItem = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("fv-dropdown-item .active");
|
if (activeItem) {
|
activeItem.scrollIntoView({ block: "start" });
|
}
|
this.active = !this.active;
|
document.dispatchEvent(new Event("click"));
|
if (this.active) {
|
document.addEventListener("click", this.onActiveChange);
|
}
|
if (this.classList.contains("search")) {
|
const inputSearch = this.shadowRoot ? this.shadowRoot.querySelector("input") : null;
|
inputSearch == null ? void 0 : inputSearch.focus();
|
}
|
}
|
dropdownItemChanged(ev) {
|
document.removeEventListener("click", this.onActiveChange);
|
const nextItem = ev.detail;
|
if (this.currentItem) {
|
this.currentItem.active = false;
|
}
|
if (nextItem && nextItem != this.currentItem) {
|
this.currentItem = nextItem;
|
if (this.currentItem) {
|
this.currentItem.active = true;
|
}
|
this.requestUpdate();
|
}
|
this.onBlur();
|
}
|
update(changedProperties) {
|
var _a, _b;
|
super.update(changedProperties);
|
if (!this.options.allowEmpty) {
|
if (((_a = this.options.items) == null ? void 0 : _a.length) && !((_b = this.options.items) == null ? void 0 : _b.some((x) => x.active))) {
|
this.options.items[0].active = true;
|
}
|
}
|
}
|
clearItems() {
|
this.options.items = [];
|
this.requestUpdate("options");
|
}
|
addItem(text, value) {
|
this.addItems([{ text, value }]);
|
}
|
addItems(items, addEmpty = false) {
|
var _a;
|
if (addEmpty) {
|
this.options.items = (_a = this.options.items || []) == null ? void 0 : _a.concat([{
|
text: "*",
|
value: ""
|
}], items);
|
} else {
|
this.options.items = (this.options.items || []).concat(items);
|
}
|
this.requestUpdate("options");
|
}
|
buildSearchField() {
|
if (!this.classList.contains("search")) {
|
return A;
|
}
|
return x`<input @input=${this.onSearch} .value="${this.currentItem ? this.currentItem.data.text : ""}" @blur=${this.onBlur} @focus="${this.onFocus}" id="selection-input"/>`;
|
}
|
buildHeader() {
|
var _a;
|
const headerClasses = {
|
placeholder: !this.currentItem
|
};
|
const content = ((_a = this.currentItem) == null ? void 0 : _a.data.text) || this.options.placeholder;
|
return x`
|
<div @click=${this.onClick} class="dropdown-header">
|
<fv-label class="${o(headerClasses)}" i18n="${content}" locales-model-no-translation="${content}">${content}</fv-label>
|
</div>
|
`;
|
}
|
buildDropdownItems() {
|
var _a;
|
return x`
|
<div id="scroll-wrapper" class="invisible-scroll">
|
<div id="dropdown-items-container">
|
<div id="items">
|
${(_a = this.options.items) == null ? void 0 : _a.map((item) => {
|
return x`
|
<fv-dropdown-item .data="${item}" class="${this.className}"></fv-dropdown-item>
|
`;
|
})}
|
</div>
|
</div>
|
</div>
|
`;
|
}
|
render() {
|
return x`
|
${this.buildSearchField()}
|
${this.buildHeader()}
|
${this.buildDropdownItems()}
|
`;
|
}
|
onSearch(e) {
|
var _a, _b;
|
const input = e.currentTarget;
|
const items = ((_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll("fv-dropdown-item")) || void 0;
|
const headerDiv = ((_b = this.shadowRoot) == null ? void 0 : _b.querySelector(".dropdown-header")) || void 0;
|
if (items) {
|
let regex = null;
|
if (input.value.trim().length > 0) {
|
headerDiv == null ? void 0 : headerDiv.classList.add("hidden");
|
regex = new RegExp(input.value, "g");
|
} else {
|
regex = null;
|
headerDiv == null ? void 0 : headerDiv.classList.remove("hidden");
|
}
|
items.forEach((item) => {
|
if (regex) {
|
item.classList.add("hidden");
|
const testText = item.data.text && regex.test(item.data.text);
|
const testValue = item.data.value && regex.test(item.data.value);
|
if (testText || testValue) {
|
item.classList.remove("hidden");
|
}
|
} else {
|
item.classList.remove("hidden");
|
}
|
});
|
}
|
}
|
};
|
DropDownComponent.styles = [
|
__superStaticGet(DropDownComponent, "styles") || [],
|
i`${r(css_248z)}`
|
];
|
__decorateClass([
|
n({ type: Object })
|
], DropDownComponent.prototype, "options", 2);
|
__decorateClass([
|
n()
|
], DropDownComponent.prototype, "currentItem", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true })
|
], DropDownComponent.prototype, "active", 2);
|
__decorateClass([
|
n({ type: String, reflect: true })
|
], DropDownComponent.prototype, "value", 2);
|
__decorateClass([
|
n({ type: String, reflect: true })
|
], DropDownComponent.prototype, "name", 2);
|
DropDownComponent = __decorateClass([
|
e("fv-dropdown")
|
], DropDownComponent);
|
|
export { DropDownComponent };
|
