import { i, r, 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 { i as i$1 } from './query-1c86d710.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 .select{border:var(--select-option-selection-button-border,2px solid #000);border-radius:var(--input-outer-border-radius,initial);cursor:pointer;height:var(--select-height,40px);position:relative;width:100%}:host .select .select-button{background:var(--input-background,#fff);border:none;margin:0;outline:none;padding:0;position:relative;width:100%}:host .select .select-button .select-button-arrow{align-items:center;display:flex;height:100%;justify-content:center;margin:0;padding:0;padding-right:var(--select-button-padding-right,16px);position:absolute;right:0;top:0}:host .select .select-button fv-input{--input-cursor:pointer;--input-padding:0px 0px 0px 0px;--input-outer-outline:0px;box-shadow:var(--select-popup-input-box-shadow,0 10px 25px hsla(219,7%,52%,.2));cursor:pointer;margin:0;padding:0;padding-left:var(--select-button-padding-left,16px);width:calc(100% - var(--select-button-padding-left, 16px));z-index:var(--select-popup-input-z-index,9999)}:host .select .select-button.open .select-button-arrow fv-arrow-component{--arrow-rotation:180deg;display:block}:host .select .options-popup{--translation:calc(((var(--input-outer-height, 40px)*0.35) + var(--select-popup-offset, 10px))*-1);--flex-container-padding:0px 0px 0px 0px;background:var(--select-popup-background-color,hsla(0,0%,100%,.922));border:var(--select-popup-border,none);border-radius:var(--select-popup-border-radius,var(--input-outer-border-radius,initial));box-shadow:var(--select-popup-box-shadow,0 10px 25px rgba(74,74,74,.2));max-height:400%;overflow:auto;padding:var(--popup-container-padding-top,.4em) var(--popup-container-padding-right,.4em) var(--popup-container-padding-bottom,.4em) var(--popup-container-padding-left,.4em);position:absolute;top:calc(100% + var(--select-popup-offset, 10px));transform:translateY(var(--translation,-24px));transition:all .5s ease-in-out;visibility:hidden;width:var(--select-popup-width,calc(100% - var(--popup-container-padding-left, .4em) - var(--popup-container-padding-right, .4em)));z-index:var(--select-popup-z-index,999)}:host .select .options-popup fv-flex-container{flex-direction:var(--select-popup-container-direction,var(--flex-container-direction,column))!important;gap:var(--select-popup-options-gap,.4em);transition:all .4s ease-in-out;visibility:hidden;width:var(--select-popup-container-width,var(--flex-container-width,100%))!important}:host .select .options-popup.open{transform:translateY(0);visibility:visible}:host .select .options-popup.open fv-flex-container{visibility:visible}:host .buttons-container{flex-direction:var(--flex-container-direction,row)!important;gap:var(--select-buttons-container-gap,var(--flex-container-gap,1em))!important;justify-content:var(--select-buttons-container-justify-content,var(--flex-container-justify-content,space-evenly))!important;width:var(--select-buttons-container-width,var(--flex-container-width,100%))!important}`;
|
|
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);
|
class PopUpChangeEvent extends CustomEvent {
|
constructor(open, element) {
|
super("popupchange", {
|
bubbles: true,
|
composed: true,
|
detail: { open, element }
|
});
|
}
|
}
|
let SelectComponent = class extends BaseElement {
|
constructor() {
|
super();
|
this.selected = void 0;
|
this.selectedDisplayValue = void 0;
|
this.placeholder = "";
|
this.maxAmountSelectByButtons = 3;
|
this.open = false;
|
this.closeOnSelectionMaxOptionsCount = 2;
|
this.addEventListener("selectionchange", (event) => {
|
if (event.detail && this.input) {
|
this.selected = event.detail.option;
|
this.selectedDisplayValue = event.detail.element.displayValue != void 0 ? event.detail.element.displayValue : this.selected;
|
this.input.value = this.selectedDisplayValue;
|
if (this.closeOnSelectionMaxOptionsCount < this.children.length) {
|
this.openPopup();
|
}
|
}
|
});
|
}
|
firstUpdated(_changedProperties) {
|
var _a;
|
super.firstUpdated(_changedProperties);
|
(_a = this.input) == null ? void 0 : _a.addEventListener("blur", () => {
|
this.open = false;
|
this.dispatchEvent(new PopUpChangeEvent(this.open, this));
|
});
|
}
|
updated(_changedProperties) {
|
super.updated(_changedProperties);
|
this.childNodes.forEach((child) => {
|
if (!(child instanceof HTMLElement))
|
return;
|
if (!child.hasAttribute("option"))
|
return;
|
if (this.children.length > this.maxAmountSelectByButtons) {
|
child.setAttribute("option-in-popup", "");
|
} else {
|
child.removeAttribute("option-in-popup");
|
}
|
const optionDuringUpdate = child.getAttribute("option");
|
if (this.selected == optionDuringUpdate) {
|
child.setAttribute("selected-option", "");
|
} else {
|
child.removeAttribute("selected-option");
|
}
|
});
|
}
|
attributeChangedCallback(name, _old, value) {
|
super.attributeChangedCallback(name, _old, value);
|
if (name === "open") {
|
if (this.optionsPopup && this.selectButton) {
|
if (value != void 0) {
|
this.optionsPopup.classList.add("open");
|
this.selectButton.classList.add("open");
|
} else {
|
this.optionsPopup.classList.remove("open");
|
this.selectButton.classList.remove("open");
|
}
|
}
|
}
|
}
|
openPopup(event) {
|
var _a;
|
event == null ? void 0 : event.stopPropagation();
|
event == null ? void 0 : event.stopImmediatePropagation();
|
event == null ? void 0 : event.preventDefault();
|
this.open = !this.open;
|
this.dispatchEvent(new PopUpChangeEvent(this.open, this));
|
if (this.open) {
|
(_a = this.input) == null ? void 0 : _a.focus();
|
}
|
}
|
render() {
|
if (this.children.length > this.maxAmountSelectByButtons) {
|
return x`
|
<div class="select">
|
<div class="select-button" @click="${this.openPopup}">
|
<fv-input placeholder="${this.placeholder}" readonly value="${this.selectedDisplayValue ? this.selectedDisplayValue : this.selected}"></fv-input>
|
<div class="select-button-arrow"><fv-arrow-component></fv-arrow-component></div>
|
</div>
|
<div class="options-popup"><fv-flex-container><slot></slot></fv-flex-container></div>
|
</div>
|
`;
|
}
|
return x`<fv-flex-container class="buttons-container"><slot></slot></fv-flex-container>`;
|
}
|
};
|
SelectComponent.styles = [
|
__superStaticGet(SelectComponent, "styles") || [],
|
i`${r(css_248z)}`
|
];
|
__decorateClass([
|
n({ type: String, reflect: true, attribute: "selected" })
|
], SelectComponent.prototype, "selected", 2);
|
__decorateClass([
|
n({ type: String, reflect: true, attribute: "selected-display-value" })
|
], SelectComponent.prototype, "selectedDisplayValue", 2);
|
__decorateClass([
|
n({ type: String, reflect: true, attribute: "placeholder" })
|
], SelectComponent.prototype, "placeholder", 2);
|
__decorateClass([
|
n({ type: Number, reflect: true, attribute: "max-amount-select-by-buttons" })
|
], SelectComponent.prototype, "maxAmountSelectByButtons", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true, attribute: "open" })
|
], SelectComponent.prototype, "open", 2);
|
__decorateClass([
|
n({ type: Number, reflect: true, attribute: "close-on-selection-max-options-count" })
|
], SelectComponent.prototype, "closeOnSelectionMaxOptionsCount", 2);
|
__decorateClass([
|
i$1(".options-popup")
|
], SelectComponent.prototype, "optionsPopup", 2);
|
__decorateClass([
|
i$1("fv-input")
|
], SelectComponent.prototype, "input", 2);
|
__decorateClass([
|
i$1(".select-button")
|
], SelectComponent.prototype, "selectButton", 2);
|
SelectComponent = __decorateClass([
|
e("fv-select")
|
], SelectComponent);
|
|
export { SelectComponent };
|
