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 { i, r, x } from './query-assigned-elements-fea1f631.js';
|
import { o } from './class-map-a0fb5d87.js';
|
import { RalPickerComponent } from './ral-picker.component.js';
|
import { NcsPickerComponent } from './ncs-picker.component.js';
|
import { SikkensPickerComponent } from './sikkens-picker.component.js';
|
import { DragType } from './interface.js';
|
import '@dh-software/furnview-icons';
|
import './color-picker.model.js';
|
import './transition.helper.js';
|
|
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(:hover){-webkit-box-shadow:inset 0 0 3px 1px var(--primary-color,red);-moz-box-shadow:inset 0 0 3px 1px var(--primary-color,red);box-shadow:inset 0 0 3px 1px var(--primary-color,red)}:host(.halfSize){border:none;border-radius:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;flex-direction:column;height:auto;max-width:150px;width:calc(50% - 20px)}:host(.halfSize) .color-picker{height:80px}:host(.halfSize) .pp-item-content{flex-direction:column;height:auto;width:auto}:host(.halfSize) .pp-item-content .pp-item-image{aspect-ratio:1/1;flex:none;height:auto;margin:auto;width:100%}:host(.halfSize) .pp-item-content .pp-item-image .pp-image{border:1px solid grey;border-radius:100%;display:flex;height:100%;overflow:hidden;position:relative;width:100%}:host(.halfSize) .pp-item-content .pp-item-image .pp-image:hover{-webkit-box-shadow:inset 0 0 3px 1px var(--primary-color,red);-moz-box-shadow:inset 0 0 3px 1px var(--primary-color,red);box-shadow:inset 0 0 3px 1px var(--primary-color,red)}:host(.halfSize) .pp-item-content .pp-item-image .pp-image fv-progress{height:75%;width:75%}:host(.halfSize) .pp-item-content .pp-item-name span{margin:8px auto}:host(.color-picker.active){border:initial;border-radius:initial;height:100%;width:100%}:host(.color-picker.active) .pp-item-content{display:none}:host{border:1px solid grey;border-radius:3px;display:block;height:80px;margin:.1em auto 4px;padding:.5em;width:calc(100% - 20px)}:host .pp-item-content{display:flex;flex-direction:row;height:100%;width:100%}:host .pp-item-content .pp-item-image{flex:none;height:80px;width:80px}:host .pp-item-content .pp-item-image .pp-image{background-position:50%;background-size:cover;display:flex;height:100%;position:relative;width:100%}:host .pp-item-content .pp-item-image .pp-image.not-found{background-image:var(--default-image,url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8AAAAMcAQMAAACl5F6MAAAABlBMVEW8vsDn6OnyCdevAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEbUlEQVR4AezBMQEAAADCoPVP7WsIoAcAAAAAAAAAAAAAAAAAAAAAAIydO0iOk4eCAGyVXNEuukF0FB1NHE1H0RG0ZEHRf5A99WYMk1T+Kvolw+vVjBf+CkMLoRCFWQkuqCquB3QOOQKrCpwBKJ1i6Jxk/EzTubaArgAHQOeyjhu8aMEafUrYolLjLRMfLrpw5cMYadeBnTLcrwN7ZXi+DhyuCi8GG/xy8Gyw3SRe7n7cLzfnajah5z87keFJ//lYf0WAAq+vv+rDX+fir+zpr2Xqr95qrle/ywr9OxX+/nF19fGRmR/yrzCJCudRqNHiNDHhIlquTBgCF2aX3V2BwYT9nUYdNoNojnqjiKJ56q0xiRaok4EsWqQO2EW0RJ3wQbTMvDc6iFaYswEvkx5Hnf8E0Tx1xhcfj3gh1lhOLHVWnx8vLvBq/FAnYpGBhwEElVfjhyETjVjj5bFanATpLrHIcpDkIstpJRdZLmRykaW63CLLMZKLLGeVXGS5jvlFluZKq8k1lnGMXGMZuck1lnsVu8ZydybXWOYj5BrLDIxcY5lz8mrML/JupPIC02osf3tyjeVqY9dYikys8QlTAUIsFovFYrFYLJaIP8hq8D4GG2ywwQYbbLDBBhtssMEGG2ywwQYb3N9+G/ePwQYbbLDBBhtssMEGG5yhA3ugqcARmFXgDKwqcAGgAsu+J1zYy94UXDjIRxosH+crwUm2euHCWX43Fy7YciUYI9N1YIeRavDpsMdIM9jgs+BOh4PBavA3ras6aMFRC06TEpyrLsy/H5emBKOrwvxZpsOsA3ssOk8SQQ9edZ4WI6DzfJwU4Ym/FCE7ofFXfQoJlnUugRsHdl9GTKBzlxRF6vzVW9kngr5eLTB5hT6MUhPgLfdDRhwQCQ79TQXe756tAWcp10XgIuMYF8aWxoedLtz5sB/wzIeDLrzw4QiRqHBSgOvnwLWFCrc7eCLCbnwrXFh2ZMdHKhEOyx3ciHBch8OHE2TtCZ0IZ0wCz1S4jhGTDhc0ecN9IcLja/qEVwIswqwC+/H3zfgMDw7j95cbPBFg+YEKnIaGWyoNzpvmcEujws0rwGX7LnCnwWOgDLhlZsFuaJEP+zFCC7yw4DCAhFtWFhwHl/lwwpeowRMJzlpw+QpXEgwl2O3gxoH9Du4cOOzgmQNHLTjt4OXF4byDVw5csAsHhhLssM/EgD32qQw4aMER+zQtuDPgpAVn7DMz4IJ9FgYMJdgdwSsB9jgKAQ5acDyEJy24ng8nLTgfwu18uBzC/XwYSrA7hmfCeyCHWU6Hw18Gr4R3fY5zOpy04PwEngj/KfYw9WwYSrB7BjfCW4qH6a8Kh2fwTHgF9jDLyXDSgvMzeKW8UX6Uk2Eowe45PL0m7J/D9VQ4aMG/isH/JwYbbLDBBhtssMEGG2ywtz3K/2tvDmQAAAAABvlbn+NbCSQWi8VisVgsFovFYrFYLBYvAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEHVJjR5bJLd8AAAAASUVORK5CYII="))}:host .pp-item-content .pp-item-image .pp-image.not-found.transparent{background-color:transparent;background-image:none}:host .pp-item-content .pp-item-image .pp-image.bordered{border:1px solid #e5e5e5}:host .pp-item-content .pp-item-image .pp-image fv-progress{height:75%;width:75%}:host .pp-item-content .pp-item-name{color:#727272;display:flex;flex:1;margin:auto 8px;width:100%}:host .pp-item-content .pp-item-name span{margin:auto}`;
|
|
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);
|
var __async = (__this, __arguments, generator) => {
|
return new Promise((resolve, reject) => {
|
var fulfilled = (value) => {
|
try {
|
step(generator.next(value));
|
} catch (e) {
|
reject(e);
|
}
|
};
|
var rejected = (value) => {
|
try {
|
step(generator.throw(value));
|
} catch (e) {
|
reject(e);
|
}
|
};
|
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
step((generator = generator.apply(__this, __arguments)).next());
|
});
|
};
|
let PPPropertyValueComponent = class extends BaseElement {
|
constructor(options) {
|
super();
|
this.PPContainerComponent = null;
|
this.name = "";
|
this.image = "";
|
this.draggable = false;
|
this._halfSize = false;
|
var _a, _b, _c;
|
options = options || {};
|
this._colorPickerData = options.colorPicker;
|
this.name = options.name || "";
|
this._manufacturer = options.manufacturer || "";
|
this._program = options.program || "";
|
this._key = options.key || "";
|
this._property = options.property || "";
|
this._propertyKey = options.propertyKey || "";
|
this._halfSize = options.containerComponent.halfSize;
|
this.PPContainerComponent = options.containerComponent;
|
this.draggable = ((_a = this.PPContainerComponent) == null ? void 0 : _a.draggable) || ((_b = this.PPContainerComponent) == null ? void 0 : _b.getAttribute("draggable")) !== null;
|
this.Image = options.imgUrl;
|
this._imageVisibility = !!this.image || this._halfSize;
|
if (options.colorPicker) {
|
this._imageVisibility = true;
|
this.classList.add("color-picker");
|
switch (options.colorPicker.type) {
|
case "RAL":
|
this._colorPicker = new RalPickerComponent();
|
break;
|
case "NCS":
|
this._colorPicker = new NcsPickerComponent();
|
break;
|
case "SIKKENS":
|
this._colorPicker = new SikkensPickerComponent();
|
break;
|
default:
|
this._colorPicker = void 0;
|
break;
|
}
|
(_c = this._colorPicker) == null ? void 0 : _c.getColorByCode(this._property.replace(/\[CP\].*\[CP\]/g, "")).then((imgUrl) => {
|
this.Image = options.imgUrl;
|
});
|
}
|
}
|
get ColorPicker() {
|
return this._colorPicker;
|
}
|
set Image(val_) {
|
this.image = val_ ? `background-${val_.startsWith("#") ? `color: ${val_}` : val_.split(",").length >= 2 ? `color: rgba(${val_})` : `image: url(${val_})`}` : this.image;
|
}
|
firstUpdated(_changedProperties) {
|
var _a;
|
super.firstUpdated(_changedProperties);
|
this.addEventListener("click", (e) => {
|
var _a2, _b, _c, _d, _e, _f;
|
e.stopPropagation();
|
e.stopPropagation();
|
if (this.PPContainerComponent && !this.PPContainerComponent.IsBusy) {
|
if (this._progressTimer) {
|
clearTimeout(this._progressTimer);
|
this._progressTimer = void 0;
|
}
|
if ((_a2 = this._progress) == null ? void 0 : _a2.show)
|
(_b = this._progress) == null ? void 0 : _b.show();
|
if (this._colorPicker) {
|
const isActive = this.classList.contains("active");
|
if (isActive) {
|
return;
|
}
|
this.classList[isActive ? "remove" : "add"]("active");
|
(_c = this.colorPickerDiv) == null ? void 0 : _c.classList[isActive ? "add" : "remove"]("hidden");
|
(_d = this.parentNode) == null ? void 0 : _d.childNodes.forEach((child) => {
|
child.classList[child !== this && !isActive ? "add" : "remove"]("hidden");
|
});
|
(_e = this.previousElementSibling) == null ? void 0 : _e.scrollIntoView();
|
(_f = this.parentNode) == null ? void 0 : _f.classList[isActive ? "remove" : "add"]("is-color-picker");
|
} else {
|
this.PPContainerComponent.IsBusy = true;
|
const properties = [{
|
manufacturer: this._manufacturer,
|
program: this._program,
|
key: this._key,
|
property: this._property,
|
propertyKey: this._propertyKey
|
}];
|
CommunicationMessageService.modifyProperty(JSON.stringify(properties), this.PPContainerComponent.PPOptions).then(() => __async(this, null, function* () {
|
var _a3;
|
if (this._progress)
|
this._progress.finished = true;
|
(_a3 = this.PPContainerComponent) == null ? void 0 : _a3.requestUpdate();
|
this._progressTimer = setTimeout(() => __async(this, null, function* () {
|
var _a4, _b2;
|
if ((_a4 = this._progress) == null ? void 0 : _a4.hide)
|
(_b2 = this._progress) == null ? void 0 : _b2.hide();
|
}), 1e3);
|
}));
|
}
|
}
|
});
|
if (this._colorPicker) {
|
(_a = this.colorPickerDiv) == null ? void 0 : _a.appendChild(this._colorPicker);
|
this._colorPicker.classList.add("color-picker");
|
this._colorPicker.addEventListener("colorChange", (e) => {
|
var _a2;
|
this.classList.add("hidden");
|
const detail = e.detail;
|
const properties = [{
|
manufacturer: this._manufacturer,
|
program: this._program,
|
key: this._key,
|
property: this._property,
|
propertyKey: this._propertyKey
|
}];
|
CommunicationMessageService.modifyProperty(JSON.stringify(properties), Object.assign({ modifyColorPicker: {
|
code: detail.code,
|
rgb: `${detail.rgba.r},${detail.rgba.g},${detail.rgba.b}`,
|
key: this._propertyKey,
|
id: this._key
|
} }, (_a2 = this.PPContainerComponent) == null ? void 0 : _a2.PPOptions)).then(() => __async(this, null, function* () {
|
var _a3;
|
if (this._progress)
|
this._progress.finished = true;
|
(_a3 = this.PPContainerComponent) == null ? void 0 : _a3.requestUpdate();
|
setTimeout(() => __async(this, null, function* () {
|
var _a4, _b;
|
if ((_a4 = this._progress) == null ? void 0 : _a4.hide)
|
(_b = this._progress) == null ? void 0 : _b.hide();
|
}), 1e3);
|
}));
|
});
|
}
|
}
|
render() {
|
DragDropHelperService.removeElement(this);
|
if (this.draggable) {
|
DragDropHelperService.addElement(this, {
|
extData: {
|
manufacturer: this._manufacturer,
|
program: this._program,
|
key: this._key,
|
property: this._property,
|
propertyKey: this._propertyKey
|
},
|
id: this._key,
|
type: DragType.PROGPROPERTY
|
});
|
}
|
this.classList[this._halfSize ? "add" : "remove"]("halfSize");
|
const classMapImage = {
|
"not-found": !this.image,
|
"transparent": !this.image && this._imageVisibility && !this._colorPicker,
|
"pp-image": true
|
};
|
return x`
|
<div class="pp-item-content">
|
${this._imageVisibility ? x`<div class="pp-item-image">
|
<div class=${o(classMapImage)} style="${this.image ? `${this.image}` : ""}">
|
<fv-progress></fv-progress>
|
</div>
|
</div>` : ""}
|
<div class="pp-item-name">
|
<span>${this.name}</span>
|
</div>
|
</div>
|
<div class="color-picker hidden"></div>
|
`;
|
}
|
};
|
PPPropertyValueComponent.styles = [
|
__superStaticGet(PPPropertyValueComponent, "styles") || [],
|
i`${r(css_248z)}`
|
];
|
__decorateClass([
|
n()
|
], PPPropertyValueComponent.prototype, "PPContainerComponent", 2);
|
__decorateClass([
|
n({ type: String, reflect: true })
|
], PPPropertyValueComponent.prototype, "name", 2);
|
__decorateClass([
|
n({ type: String, reflect: true })
|
], PPPropertyValueComponent.prototype, "image", 2);
|
__decorateClass([
|
i$1(".color-picker")
|
], PPPropertyValueComponent.prototype, "colorPickerDiv", 2);
|
__decorateClass([
|
i$1("fv-progress")
|
], PPPropertyValueComponent.prototype, "_progress", 2);
|
__decorateClass([
|
n({ type: Boolean, reflect: true })
|
], PPPropertyValueComponent.prototype, "draggable", 2);
|
PPPropertyValueComponent = __decorateClass([
|
e("fv-pp-value")
|
], PPPropertyValueComponent);
|
|
export { PPPropertyValueComponent };
|
