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 './dropdown.component.js';
|
import './article-item.component.js';
|
import { o } from './class-map-a0fb5d87.js';
|
import '@dh-software/furnview-icons';
|
import './image.service.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{display:flex;flex:1;flex-direction:column;height:100%;width:100%}:host #article-list-container{display:block;flex:1;width:100%}:host #filter-container-size{display:flex;flex:none;height:50px;margin-bottom:15px;width:100%}:host #filter-container{flex:none;margin-bottom:15px;width:100%}:host #filter-container fv-button{background-color:#fff;border:2px solid var(--primary-color,red);color:var(--primary-color,red);display:inline-block;margin:2px;min-width:unset;padding:4px!important;text-align:center}:host #filter-container fv-button.active{background-color:var(--primary-color,red);color:var(--primary-button-text-color,#fff)!important}:host #filter-container fv-button::part(button){color:var(--primary-color,red);min-width:unset;padding:4px}:host #filter-container fv-button.active::part(button){color:var(--primary-button-text-color,#fff);min-width:unset;padding:4px}`;
|
|
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());
|
});
|
};
|
function convertDecimalNCRtoUTF8(ncr) {
|
if (ncr && ncr.length > 0) {
|
return ncr.replace(/&#([0-9]+);/g, function(b) {
|
return String.fromCodePoint(parseInt(b.slice(2, -1)));
|
});
|
}
|
return ncr;
|
}
|
let ArticleListComponent = class extends BaseElement {
|
constructor() {
|
super();
|
this._manufacturer = "";
|
this._program = "";
|
this._selectedCategories = [];
|
this._valuesWidth = [];
|
this._valuesHeight = [];
|
this._valuesDepth = [];
|
this._categoriesFilter = [];
|
this._offset = 0;
|
this._showWildCardFilter = true;
|
this._selectedDimensions = {
|
width: "0.0",
|
height: "0.0",
|
depth: "0.0"
|
};
|
this.listAll = [];
|
this.dimensionScale = 0.1;
|
this.fractionDigits = 2;
|
this.limit = 50;
|
this.img_url_prefix = "";
|
this.list = [];
|
this.onArticleClick = (e, component) => __async(this, null, function* () {
|
if (component.number) {
|
yield CommunicationMessageService == null ? void 0 : CommunicationMessageService.loadArticle(this._manufacturer, this._program, component.number);
|
}
|
});
|
}
|
initialize(manufacturer, program, level, mod, showWildcardFilter) {
|
return __async(this, null, function* () {
|
this._showWildCardFilter = showWildcardFilter;
|
this._manufacturer = manufacturer;
|
this._program = program;
|
const kataTreeData = yield CommunicationMessageService == null ? void 0 : CommunicationMessageService.getKataTreeJson();
|
const widthDD = this.shadowRoot ? this.shadowRoot.querySelector("#width-dropdown") : null;
|
const heightDD = this.shadowRoot ? this.shadowRoot.querySelector("#height-dropdown") : null;
|
const depthDD = this.shadowRoot ? this.shadowRoot.querySelector("#depth-dropdown") : null;
|
widthDD == null ? void 0 : widthDD.addItem("*", "");
|
heightDD == null ? void 0 : heightDD.addItem("*", "");
|
depthDD == null ? void 0 : depthDD.addItem("*", "");
|
const articleDataMod = yield CommunicationMessageService == null ? void 0 : CommunicationMessageService.getKataPage(mod, level);
|
if (articleDataMod && articleDataMod.Modules && articleDataMod.Modules[0].Articles && articleDataMod.Modules[0].Articles[0] && Array.isArray(articleDataMod.Modules[0].Articles[0])) {
|
articleDataMod.Modules[0].Articles[0].forEach((article) => {
|
const art = article;
|
if (art.dxma) {
|
art.kataWidth = art.dxma;
|
}
|
if (art.dzma) {
|
art.kataHeight = art.dzma;
|
}
|
if (art.dyma) {
|
art.kataDepth = art.dyma;
|
}
|
if (art.MMdx) {
|
art.kataWidth = art.MMdx;
|
}
|
if (art.MMdz) {
|
art.kataHeight = art.MMdz;
|
}
|
if (art.MMdy) {
|
art.kataDepth = art.MMdy;
|
}
|
if (art.Dispdx) {
|
art.kataWidth = art.Dispdx;
|
}
|
if (art.Dispdz) {
|
art.kataHeight = art.Dispdz;
|
}
|
if (art.Dispdy) {
|
art.kataDepth = art.Dispdy;
|
}
|
if (this._valuesWidth.indexOf(art.kataWidth) === -1) {
|
this._valuesWidth.push(art.kataWidth);
|
}
|
if (this._valuesHeight.indexOf(art.kataHeight) === -1) {
|
this._valuesHeight.push(art.kataHeight);
|
}
|
if (this._valuesDepth.indexOf(art.kataDepth) === -1) {
|
this._valuesDepth.push(art.kataDepth);
|
}
|
this.listAll.push(article);
|
});
|
}
|
this._valuesWidth.sort(this.sortValues);
|
this._valuesWidth.forEach(function(value) {
|
widthDD == null ? void 0 : widthDD.addItem(value, value);
|
});
|
this._valuesHeight.sort(this.sortValues);
|
this._valuesHeight.forEach(function(value) {
|
heightDD == null ? void 0 : heightDD.addItem(value, value);
|
});
|
this._valuesDepth.sort(this.sortValues);
|
this._valuesDepth.forEach(function(value) {
|
depthDD == null ? void 0 : depthDD.addItem(value, value);
|
});
|
const tmpCatList = [];
|
this.listAll.forEach((value, index) => {
|
value.Cats = value.CatString.split(",");
|
value.Cats.forEach((cat, index1) => {
|
if (tmpCatList.indexOf(cat) === -1) {
|
if (cat !== "") {
|
tmpCatList.push(cat);
|
}
|
}
|
});
|
});
|
tmpCatList.forEach((value, index) => {
|
const findObj = kataTreeData.definedFilterCategories.find((element) => element.id === value);
|
if (findObj) {
|
const findCat = this._categoriesFilter.find((element) => element.id === value);
|
if (!findCat) {
|
if (findObj.priority === 1e3) {
|
this._categoriesFilter.push({ name: findObj.name, id: findObj.id, priority: findObj.priority });
|
}
|
}
|
}
|
});
|
if (this._categoriesFilter.length === 0) {
|
tmpCatList.forEach((value, index) => {
|
const findObj = kataTreeData.definedFilterCategories.find((element) => element.id === value);
|
if (findObj) {
|
const findCat = this._categoriesFilter.find((element) => element.id === value);
|
if (!findCat) {
|
if (findObj.priority === 2e3) {
|
this._categoriesFilter.push({ name: findObj.name, id: findObj.id, priority: findObj.priority });
|
}
|
}
|
}
|
});
|
}
|
this.list = this.list.concat(this.listAll);
|
if (this.shadowRoot) {
|
const wildCardBtn = this.shadowRoot.querySelector("#wildCardFilterButton");
|
if (!this._showWildCardFilter) {
|
wildCardBtn.classList.add("hidden");
|
}
|
}
|
});
|
}
|
sortValues(a, b) {
|
if (+a < +b)
|
return -1;
|
if (+a > +b)
|
return 1;
|
return 0;
|
}
|
filterButtonClick(event) {
|
return __async(this, null, function* () {
|
const button = event.target;
|
const category = button.getAttribute("category");
|
const activeButtons = this.renderRoot.querySelectorAll(".active");
|
activeButtons.forEach((value, key) => {
|
value.classList.remove("active");
|
});
|
button.classList.add("active");
|
if (category) {
|
this._selectedCategories[0] = category;
|
} else {
|
this._selectedCategories = [];
|
}
|
yield this.filterArticles();
|
});
|
}
|
onChangeDropDown(e) {
|
return __async(this, null, function* () {
|
const dropDown = e.currentTarget;
|
this._selectedDimensions[dropDown.name] = dropDown.value || "0.0";
|
yield this.filterArticles();
|
});
|
}
|
filterArticles() {
|
return __async(this, null, function* () {
|
this.list = [];
|
this.listAll.forEach((article, index) => {
|
let add = true;
|
if (this._selectedCategories.length > 0) {
|
if (!article.Cats.includes(this._selectedCategories[0])) {
|
add = false;
|
}
|
}
|
if (this._selectedDimensions.height !== "0.0") {
|
if (article.kataHeight !== this._selectedDimensions.height) {
|
add = false;
|
}
|
}
|
if (this._selectedDimensions.width !== "0.0") {
|
if (article.kataWidth !== this._selectedDimensions.width) {
|
add = false;
|
}
|
}
|
if (this._selectedDimensions.depth !== "0.0") {
|
if (article.kataDepth !== this._selectedDimensions.depth) {
|
add = false;
|
}
|
}
|
if (add) {
|
this.list.push(article);
|
}
|
});
|
this.requestUpdate("list");
|
yield this.updateComplete;
|
});
|
}
|
render() {
|
const dropDownClassMap = {
|
bordered: this.classList.contains("bordered") && this.classList.contains("dropdown"),
|
fluid: true
|
};
|
return x`
|
<div id="filter-container">
|
<fv-button id="wildCardFilterButton" @click=${this.filterButtonClick} part="filter-button"
|
class="active" style="width: 23px">*
|
</fv-button>
|
${this._categoriesFilter.map((category) => {
|
return x`
|
<fv-button category=${category.id} @click=${this.filterButtonClick}
|
part="filter-button">${convertDecimalNCRtoUTF8(category.name)}
|
</fv-button>`;
|
})}
|
|
</div>
|
<div id="filter-container-size">
|
<fv-dropdown @onChange=${this.onChangeDropDown} class=${o(dropDownClassMap)} name="width"
|
i18n-placeholder="181" placeholder="Breite" id="width-dropdown"></fv-dropdown>
|
<fv-dropdown @onChange=${this.onChangeDropDown} class=${o(dropDownClassMap)} name="height"
|
i18n-placeholder="183" placeholder="Höhe" id="height-dropdown"></fv-dropdown>
|
<fv-dropdown @onChange=${this.onChangeDropDown} class=${o(dropDownClassMap)} name="depth"
|
i18n-placeholder="182" placeholder="Tiefe" id="depth-dropdown"></fv-dropdown>
|
</div>
|
|
<fv-list-box id="article-list-container">
|
${this.list.map((article) => {
|
const articleComponent = document.createElement("fv-article-item");
|
articleComponent.number = article.ArtNr;
|
articleComponent.width = article.dxma;
|
articleComponent.height = article.dzma;
|
articleComponent.depth = article.dyma;
|
articleComponent.addEventListener("onArticleClick", (e) => {
|
const component = e.currentTarget;
|
this.onArticleClick(e, component);
|
});
|
if (this.img_url_prefix && article.imgName) {
|
articleComponent.image = this.img_url_prefix + convertDecimalNCRtoUTF8(article.imgName);
|
}
|
return articleComponent;
|
})}
|
<slot></slot>
|
</fv-list-box>
|
`;
|
}
|
};
|
ArticleListComponent.styles = [
|
__superStaticGet(ArticleListComponent, "styles") || [],
|
i`${r(css_248z)}`
|
];
|
__decorateClass([
|
n()
|
], ArticleListComponent.prototype, "dimensionScale", 2);
|
__decorateClass([
|
n()
|
], ArticleListComponent.prototype, "fractionDigits", 2);
|
__decorateClass([
|
n()
|
], ArticleListComponent.prototype, "limit", 2);
|
__decorateClass([
|
n()
|
], ArticleListComponent.prototype, "img_url_prefix", 2);
|
__decorateClass([
|
n({ type: Array })
|
], ArticleListComponent.prototype, "list", 2);
|
ArticleListComponent = __decorateClass([
|
e("fv-article-list")
|
], ArticleListComponent);
|
|
export { ArticleListComponent };
|
