import { r as registerInstance } from './index-d84fffc3.js';
import { a as api } from './api-0c31171f.js';
import { s as serializeForm } from './serializeForm-a39bb4a7.js';
import { w as waitForHydrated } from './waitForHydrated-ddb725f1.js';
import { P as ProductionStatus } from './production-status-enum-11b4c4d0.js';
import './_commonjsHelpers-5e4b1d1a.js';
const row = ({ number, name, isFav, toggleFavUrl, constructionYear, subEquipments, location, serviceAgreement, detailLink, inProduction, discontinued, }) => {
return `
|
${discontinued
? renderDiscontinuationIcon(discontinued, number)
: ""}${name}
|
${number} |
${!inProduction
? constructionYear
: renderProductionStatusLabel(inProduction)} |
${subEquipments} |
${location} |
${typeof serviceAgreement !== "undefined"
? `${serviceAgreement} | `
: ""}
|
`;
};
const renderProductionStatusLabel = (labelText) => {
return `${labelText}`;
};
const renderDiscontinuationIcon = (discontinuationInfo, tooltipIdentifier) => {
return discontinuationInfo
? ``
: false;
};
const tableTooltip = ({ number, discontinued }) => {
if (!discontinued)
return "";
return `
`;
};
var ShopType;
(function (ShopType) {
ShopType["BENDING"] = "bending";
ShopType["PUNCHING"] = "punching";
ShopType["SPAREPARTS"] = "spareparts";
})(ShopType || (ShopType = {}));
const tile = (chooseShopMessage) => ({ number, name, isFav, toggleFavUrl, shopLinks = [], inProduction, image, detailLink, discontinued, }) => {
return `
0
? `
shop-link="${shopLinks[0].link}"
shop-link-title="${shopLinks[0].linkText}"
shop-link-icon="${getShopIcon(shopLinks[0].shopType)}"
`
: ""}
${shopLinks && shopLinks.length > 1
? `
shop-link-2="${shopLinks[1].link}"
shop-link-2-title="${shopLinks[1].linkText}"
shop-link-2-icon="${getShopIcon(shopLinks[1].shopType)}"
`
: ""}
choose-shop-title="${chooseShopMessage}"
sync-id="${number}"
toggle-fav-url="${toggleFavUrl}"
is-fav="${isFav}"
>
${discontinued
? `
`
: ""}
`;
};
const getShopIcon = (type) => {
switch (type) {
case ShopType.BENDING:
return "cart-bending-tools";
case ShopType.PUNCHING:
return "cart-punching-tools";
case ShopType.SPAREPARTS:
return "cart-genuine-parts";
default:
return "cart";
}
};
const dataControllerMymachineCss = ".mymachine-overview__cta-buttons-container{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column;margin-bottom:10px}@media only screen and (min-width: 768px){.mymachine-overview__cta-buttons-container{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}}@media only screen and (min-width: 1024px){.mymachine-overview__cta-buttons-container{margin-top:10px}}.mymachine-overview__cta-buttons-container>*{min-width:100%;margin-bottom:15px}@media only screen and (min-width: 768px){.mymachine-overview__cta-buttons-container>*{min-width:auto;margin-right:20px}}.mymachine-overview__cta-buttons-container>*:nth-child(3){margin-left:auto;display:none}@media only screen and (min-width: 1024px){.mymachine-overview__cta-buttons-container>*:nth-child(3){display:block}}.mymachine-overview .mymachine-overview__direct-search-element{-ms-flex-order:-1;order:-1;margin-bottom:20px;border-bottom:1px solid #e2e2e2}@media only screen and (min-width: 768px){.mymachine-overview .mymachine-overview__direct-search-element{min-width:100%}}@media only screen and (min-width: 1024px){.mymachine-overview .mymachine-overview__direct-search-element{display:none;-ms-flex-order:1;order:1}}.mymachine-overview__filter-container::before,.mymachine-overview__filter-container::after{content:\" \";display:table}.mymachine-overview__filter-container::after{clear:both}.mymachine-overview__filter-container .ux-tag{background-color:#285172}.mymachine-overview__filter-container .ux-label{min-width:auto;padding-right:20px}.mymachine-overview__filter-dropdown{min-width:250px;position:relative;margin-bottom:20px}@media only screen and (min-width: 768px){.mymachine-overview__filter-dropdown{max-width:300px;display:inline-block;margin-right:18px}}.mymachine-overview__filter-checkboxes{display:inline-block}@media only screen and (max-width: 1070px){.mymachine-overview__filter-checkboxes{display:block;margin:10px 0 20px}}.mymachine-overview__filter-checkbox:not(:last-child){margin-right:15px}@media (min-width: 1025px){.mymachine-overview .ux-button-group{position:absolute;right:0;top:0}}@media (max-width: 1024px){.mymachine-overview .ux-button-group{float:right;margin-left:25px}}.mymachine-overview__result-set{position:relative}@media (min-width: 1440px){.mymachine-overview__result-set{text-align:center}}@media (max-width: 1439px){.mymachine-overview__result-set{text-align:left}}.mymachine-overview__sort{font-size:16px;background-color:#fff}@media (min-width: 1025px){.mymachine-overview__sort{position:absolute;right:115px;top:0}}@media (max-width: 1024px){.mymachine-overview__sort{float:right;margin-bottom:0;margin-left:25px}}@media (max-width: 567px){.mymachine-overview__sort{margin-top:30px}}.mymachine-overview__tiles-container{max-width:1140px;margin:0 auto}.mymachine-overview__tiles-container .ux-tile{max-width:none;margin-bottom:30px}.mymachine-overview__tiles-container .ux-tile-body{overflow:hidden}.mymachine-overview__table-container .ux-toggle-button{font-size:21px}";
let DataControllerMymachine = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** endpoint where data can be requested */
this.url = "";
/** CSS-style selector for the select with all the sorting options */
this.sortFormSelector = "";
/** CSS-style selector for the filter */
this.filterSelector = "";
/** CSS-style selector for the table */
this.tableSelector = "";
/** CSS-style selector for the tiles container element */
this.tilesContainerSelector = "";
/** CSS-style selector for the element where the total number of machines should be placed */
this.totalNumberSelector = "";
/** CSS-style selector for the element where the number of filtered machines should be placed */
this.filteredNumberSelector = "";
/** CSS-style selector for the scroll-sensor */
this.scrollSensorSelector = "";
/** Text that should be displayed when multiple shop links are displayed */
this.chooseShopText = "";
/** select input for changing the sort-order */
this.sortForm = null;
/** element that contains all filters */
this.filter = null;
/** form element for filter */
this.filterForm = null;
/** table element */
this.table = null;
/** tooltip container element for the table view */
this.tooltipContainer = null;
/** table body element where the data should be put */
this.tableBody = null;
/** DOM element where all the tiles should be put */
this.tilesContainer = null;
/** NodeList of DOM elements where the number of filtered machines should be put */
this.filteredNumberElements = null;
/** NodeList of DOM elements where the total number of machines should be put */
this.totalNumberElements = null;
/** URL for getting the next page */
this.nextPage = "";
/** DOM element where all the tiles should be put */
this.scrollSensor = null;
/** element that shows active filters */
this.activeFiltersContainer = null;
/** element that shows label for active filters */
this.activeFiltersLabel = null;
}
componentDidLoad() {
this.setSortForm();
this.setFilter();
this.setTilesContainer();
this.setTable();
this.setScrollSensor();
this.setTotalNumberElements();
this.setFilteredNumberElements();
this.requestData(this.url);
}
/** connect sort select */
setSortForm() {
if (this.sortFormSelector === "")
return;
this.sortForm = document.querySelector(this.sortFormSelector);
this.sortForm.addEventListener("submit", (e) => e.preventDefault());
this.sortForm.addEventListener("change", () => {
this.requestData(this.url);
this.syncSortStateToTable();
});
}
syncSortStateToTable() {
if (this.table === null || this.sortForm === null)
return;
const { value } = this.sortForm.querySelector("select");
const prevSorted = this.table.querySelector(`ux-table-sort[sorted-direction="desc"], ux-table-sort[sorted-direction="asc"]`);
if (prevSorted !== null) {
prevSorted.sortedDirection = "";
}
const ascSort = this.table.querySelector(`ux-table-sort[asc-name="${value}"]`);
const descSort = this.table.querySelector(`ux-table-sort[desc-name="${value}"]`);
if (ascSort !== null) {
ascSort.sortedDirection = "asc";
}
if (descSort !== null) {
descSort.sortedDirection = "desc";
}
}
/** connect filter */
setFilter() {
if (this.filterSelector === "")
return;
this.filter = document.querySelector(this.filterSelector);
if (this.filter === null)
return;
waitForHydrated(this.filter, () => this.setFilterForm());
this.filter.addEventListener("uxFilterChange", () => {
this.setActiveFilterLabelVisibility();
this.requestData(this.url);
});
}
/** connect total number */
setTotalNumberElements() {
if (this.totalNumberSelector === "")
return;
this.totalNumberElements = document.querySelectorAll(this.totalNumberSelector);
}
/** connect filtered number */
setFilteredNumberElements() {
if (this.filteredNumberSelector === "")
return;
this.filteredNumberElements = document.querySelectorAll(this.filteredNumberSelector);
}
setFilterForm() {
var _a;
this.filterForm = this.filter.querySelector("form");
(_a = this.filterForm) === null || _a === void 0 ? void 0 : _a.addEventListener("submit", (e) => e.preventDefault());
this.activeFiltersContainer = this.filter.querySelector(".ux-tag-list");
if (this.activeFiltersContainer !== null) {
this.activeFiltersLabel = this.activeFiltersContainer.parentElement.querySelector(".ux-label");
}
this.setActiveFilterLabelVisibility();
}
setActiveFilterLabelVisibility() {
if (this.activeFiltersLabel === null ||
this.activeFiltersContainer === null)
return;
if (this.activeFiltersContainer.querySelectorAll("ux-tag").length > 0) {
this.activeFiltersLabel.style.display = "";
}
else {
this.activeFiltersLabel.style.display = "none";
}
}
updateNumbers(filtered, total) {
writeToElements(this.filteredNumberElements, filtered.toString());
writeToElements(this.totalNumberElements, total.toString());
}
/** connect table */
setTable() {
var _a;
if (this.tableSelector === "")
return;
this.table = document.querySelector(this.tableSelector);
this.tableBody = (_a = this.table) === null || _a === void 0 ? void 0 : _a.querySelector("tbody");
if (this.table !== null && this.sortForm !== null) {
this.table.addEventListener("uxTableSort", (e) => {
const value = e.detail;
if (value === "")
return;
this.sortForm.querySelector("select").value = value;
this.requestData(this.url);
});
this.syncSortStateToTable();
}
if (this.table !== null) {
const uxTable = this.table.closest("ux-table");
this.tooltipContainer = document.createElement("div");
this.tooltipContainer.className =
"mymachine-table-tooltip-container";
uxTable.after(this.tooltipContainer);
}
}
/** connect scroll-sensor */
setScrollSensor() {
if (this.scrollSensorSelector === "")
return;
this.scrollSensor = document.querySelector(this.scrollSensorSelector);
if (this.scrollSensor !== null) {
this.scrollSensor.addEventListener("uxInfiniteScrollSensorScrolledIntoView", () => {
this.requestData(this.nextPage);
});
}
}
/** connect tileContainer */
setTilesContainer() {
if (this.tilesContainerSelector === "")
return;
this.tilesContainer = document.querySelector(this.tilesContainerSelector);
}
/** post filter and sort settings to get data from the endpoint */
initialRequest() {
this.requestData(this.url);
}
/** Send the real request and handle response */
requestData(url) {
if (url === "")
return;
const options = isMockUrl(url)
? {}
: {
method: "POST",
body: serializeForm(this.sortForm) +
"&" +
serializeForm(this.filterForm),
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
};
api(url, options).then((data) => {
if (this.url === url) {
this.clearExistingData();
this.replaceFilter(data.filterHTML);
}
this.appendItemsToTable(data.items);
this.appendItemsToTiles(data.items);
this.updateNumbers(data.filteredCount, data.totalCount);
this.nextPage = data.nextPage || "";
if (this.nextPage !== "" && this.scrollSensor !== null) {
this.scrollSensor.hasFired = false;
}
});
}
replaceFilter(html) {
if (typeof html === "string" &&
html.length > 0 &&
this.filter !== null) {
const parent = this.filter.parentElement;
if (parent !== null) {
parent.style.height = `${parent.offsetHeight}px`;
}
this.filter.outerHTML = html;
this.setFilter();
setTimeout(() => {
parent.style.height = "auto";
}, 200);
}
}
clearExistingData() {
if (this.tableBody !== null)
this.tableBody.textContent = "";
if (this.tooltipContainer !== null)
this.tooltipContainer.textContent = "";
if (this.tilesContainer !== null)
this.tilesContainer.textContent = "";
}
appendItemsToTable(items) {
if (this.tableBody === null)
return;
this.tableBody.insertAdjacentHTML("beforeend", items.map(row).join(""));
this.tooltipContainer.insertAdjacentHTML("beforeend", items.map(tableTooltip).join(""));
}
appendItemsToTiles(items) {
if (this.tilesContainer === null)
return;
this.tilesContainer.insertAdjacentHTML("beforeend", items.map(tile(this.chooseShopText)).join(""));
}
render() {
return null;
}
static get watchers() { return {
"sortFormSelector": ["setSortForm"],
"filterSelector": ["setFilter"],
"totalNumberSelector": ["setTotalNumberElements"],
"filteredNumberSelector": ["setFilteredNumberElements"],
"tableSelector": ["setTable"],
"scrollSensorSelector": ["setScrollSensor"],
"tilesContainerSelector": ["setTilesContainer"],
"url": ["initialRequest"]
}; }
};
function isMockUrl(url) {
return url.indexOf("mock-data/") > -1;
}
function writeToElements(nodes, text) {
if (nodes === null)
return;
[].forEach.call(nodes, (element) => (element.textContent = text));
}
DataControllerMymachine.style = dataControllerMymachineCss;
export { DataControllerMymachine as ux_iws_data_controller_mymachine };