@postnord/pn-marketweb-components 3.5.2 → 4.0.0

package/components/pn-marketweb-table.js

@@ -0,0 +1,502 @@
+import { proxyCustomElement, HTMLElement, h, Fragment, Host } from '@stencil/core/internal/client';
+import { H as HeadingTag } from './HeadingTag.js';
+import { b as angle_down, a as angle_up } from './angle_up.js';
+import { P as PnChatService } from './pn-chat.service.js';
+import { F as FetchHelper } from './FetchHelper.js';
+
+const DEFAULT_BREAKPOINTS = {
+    mobile: 768,
+    tablet: 1024,
+    desktop: 1025,
+};
+class ScreenWidth {
+    static instance;
+    breakpoints;
+    callbacks;
+    resizeTimeout;
+    constructor() {
+        this.breakpoints = DEFAULT_BREAKPOINTS;
+        this.callbacks = new Set();
+        this.initializeListeners();
+    }
+    static getInstance() {
+        if (!ScreenWidth.instance) {
+            ScreenWidth.instance = new ScreenWidth();
+        }
+        return ScreenWidth.instance;
+    }
+    setBreakpoints(breakpoints) {
+        this.breakpoints = { ...this.breakpoints, ...breakpoints };
+        this.notifyListeners();
+    }
+    getWidth() {
+        if (typeof window === 'undefined')
+            return 0;
+        return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
+    }
+    isTouch() {
+        if (typeof window === 'undefined')
+            return false;
+        return ('ontouchstart' in window ||
+            navigator.maxTouchPoints > 0 ||
+            // @ts-ignore - Some browsers might not have msMaxTouchPoints
+            navigator.msMaxTouchPoints > 0);
+    }
+    getScreenSize(width) {
+        if (width < this.breakpoints.mobile)
+            return 'mobile';
+        if (width < this.breakpoints.tablet)
+            return 'tablet';
+        return 'desktop';
+    }
+    getScreenInfo() {
+        const width = this.getWidth();
+        return {
+            width,
+            size: this.getScreenSize(width),
+            isTouch: this.isTouch(),
+        };
+    }
+    initializeListeners() {
+        if (typeof window === 'undefined')
+            return;
+        const handleResize = () => {
+            if (this.resizeTimeout) {
+                window.clearTimeout(this.resizeTimeout);
+            }
+            this.resizeTimeout = window.setTimeout(() => {
+                this.notifyListeners();
+            }, 250);
+        };
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('orientationchange', handleResize);
+    }
+    notifyListeners() {
+        const info = this.getScreenInfo();
+        this.callbacks.forEach(callback => callback(info));
+    }
+    subscribe(callback) {
+        this.callbacks.add(callback);
+        callback(this.getScreenInfo()); // Initial call
+        return () => {
+            this.callbacks.delete(callback);
+        };
+    }
+}
+
+const translations = {
+    'sv': {
+        newMessage: 'Nytt meddelande',
+        toggleButtonOn: 'Visa detaljer',
+        toggleButtonOff: 'Dölj detaljer',
+        showMoreLabel: 'Visa mer',
+    },
+    'en': {
+        newMessage: 'New message',
+        toggleButtonOn: 'Show details',
+        toggleButtonOff: 'Hide details',
+        showMoreLabel: 'Show more',
+    },
+    'da': {
+        newMessage: 'Ny besked',
+        toggleButtonOn: 'Vis detaljer',
+        toggleButtonOff: 'Skjul detaljer',
+        showMoreLabel: 'Vis mere',
+    },
+    'no': {
+        newMessage: 'Ny melding',
+        toggleButtonOn: 'Vis detaljer',
+        toggleButtonOff: 'Skjul detaljer',
+        showMoreLabel: 'Vis mer',
+    },
+    'fi': {
+        newMessage: 'Uusi viesti',
+        toggleButtonOn: 'Näytä tiedot',
+        toggleButtonOff: 'Piilota tiedot',
+        showMoreLabel: 'Näytä lisää',
+    },
+    'de': {
+        newMessage: 'Nytt meddelade',
+        toggleButtonOn: 'Visa detaljer',
+        toggleButtonOff: 'Dölj detaljer',
+    },
+    'zh': {
+        newMessage: 'Nytt meddelade',
+        toggleButtonOn: 'Visa detaljer',
+        toggleButtonOff: 'Dölj detaljer',
+    },
+    'it': {
+        newMessage: 'Nytt meddelade',
+        toggleButtonOn: 'Visa detaljer',
+        toggleButtonOff: 'Dölj detaljer',
+    },
+    'nl': {
+        newMessage: 'Nytt meddelade',
+        toggleButtonOn: 'Visa detaljer',
+        toggleButtonOff: 'Dölj detaljer',
+    },
+    'tr': {
+        newMessage: 'Nytt meddelade',
+        toggleButtonOn: 'Visa detaljer',
+        toggleButtonOff: 'Dölj detaljer',
+    },
+    'pt': {
+        newMessage: 'Nytt meddelade',
+        toggleButtonOn: 'Visa detaljer',
+        toggleButtonOff: 'Dölj detaljer',
+    },
+    'pl': {
+        newMessage: 'Nytt meddelade',
+        toggleButtonOn: 'Visa detaljer',
+        toggleButtonOff: 'Dölj detaljer',
+    },
+    'pt-BR': {
+        newMessage: 'Nytt meddelade',
+        toggleButtonOn: 'Visa detaljer',
+        toggleButtonOff: 'Dölj detaljer',
+    },
+};
+
+class MarketwebTableService {
+    _endpoint;
+    _language;
+    fetchHelper = new FetchHelper('MarketTableService');
+    _getUserShipmentsPath = `/get-user-shipments`;
+    constructor(endpoint, language) {
+        this._endpoint = this.formatEndpoint(endpoint);
+        this._language = language;
+    }
+    async getUserShipments(contentId, skip, take, isChatEnabled) {
+        let model = {
+            skip: skip,
+            take: take,
+            isChatEnabled: isChatEnabled,
+            language: this._language,
+            contentId: contentId,
+        };
+        const fetchUrl = this._endpoint + this._getUserShipmentsPath;
+        const data = (await this.fetchHelper.fetchJson(fetchUrl, this.getRequestInit(model), false));
+        return JSON.parse(data.shipments);
+    }
+    formatEndpoint(endpoint) {
+        var formattedEndpoint = endpoint.lastIndexOf('/') === endpoint.length - 1 ? endpoint.substring(0, endpoint.length - 1) : endpoint;
+        return formattedEndpoint;
+    }
+    getRequestInit(model, method = 'POST', mode = 'cors', contentTypes = 'application/json') {
+        return {
+            mode: mode,
+            method: method,
+            headers: {
+                'Content-Type': contentTypes
+            },
+            body: JSON.stringify(model)
+        };
+    }
+}
+
+const pnMarketwebTableCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}:host{display:block}.pn-marketweb-table .container{max-width:1200px;margin:0 auto;padding:1rem}.pn-marketweb-table .heading-section{display:flex;justify-content:space-between;gap:2rem;margin-bottom:2rem}@media (max-width: 768px){.pn-marketweb-table .heading-section{flex-direction:column}}.pn-marketweb-table .heading-section .heading-wrapper{display:flex;flex-direction:column}.pn-marketweb-table .heading-section .preamble-section{width:80%}.pn-marketweb-table .heading-section .main-heading{margin-bottom:1rem}.pn-marketweb-table .heading-section .summary{display:flex;height:7rem;justify-content:flex-end;gap:clamp(1rem, 4vw, 2rem)}@media (max-width: 768px){.pn-marketweb-table .heading-section .summary{justify-content:center}}.pn-marketweb-table .heading-section .sub-heading-section{background-color:#effbff;border-radius:1.6rem;display:flex;align-items:center;gap:clamp(0.6rem, 4vw, 1rem);padding:0.6rem 1.2rem;width:13.5rem}.pn-marketweb-table .heading-section .sub-heading-section .icon-container{background-color:#e0f8ff;border-radius:50%;padding:4px}.pn-marketweb-table .heading-section .sub-heading{font-size:clamp(1rem, 3vw, 1.4rem);font-weight:400;line-height:clamp(1.225rem, 4vw, 1.5rem);margin:0}.pn-marketweb-table .heading-section .sub-heading strong{color:#005d92;font-weight:700}.pn-marketweb-table .pn-marketweb-table__table{width:100%;border-collapse:collapse;margin-bottom:3.2rem}.pn-marketweb-table .pn-marketweb-table__table tr{border-bottom:1px solid #e9e6e5;position:relative;border-left:4px solid #ffffff;transition:all 0.7s ease}.pn-marketweb-table .pn-marketweb-table__table tr:last-child{border-bottom:none}.pn-marketweb-table .pn-marketweb-table__table tr:hover{border-left:4px solid #8eddf9;background:#effbff}.pn-marketweb-table .pn-marketweb-table__table tr.row-new-message,.pn-marketweb-table .pn-marketweb-table__table tr.row-new-messag:hover{border-left:4px solid #0aa85c;background:linear-gradient(90deg, rgb(220, 246, 231) 0%, rgb(237, 251, 243) 30%, rgb(255, 255, 255) 70%)}.pn-marketweb-table .pn-marketweb-table__table td{padding:1.6rem 1rem}.pn-marketweb-table .image-container{min-height:5.8rem}.pn-marketweb-table .cell-heading{color:#5e554a;font-size:clamp(0.875rem, 4vw, 1.2rem);font-weight:400;line-height:clamp(1.225rem, 4vw, 1.5rem);margin:0}.pn-marketweb-table .cell-value{color:#2d2013;display:inline-block;font-size:clamp(1rem, 4vw, 1.5rem);font-weight:400;line-height:clamp(1.4rem, 4vw, 1.8rem);margin:0;padding:0.5rem 0}.pn-marketweb-table .row-image{border-radius:0.5rem}.pn-marketweb-table .actions{align-content:center}.pn-marketweb-table .actions .button-wrapper{display:flex;flex-direction:row;justify-content:flex-end;gap:1.6rem}.pn-marketweb-table .actions .button-wrapper .pn-button-text{white-space:nowrap}@media screen and (max-width: 768px){.pn-marketweb-table .actions .button-wrapper{justify-content:space-between}}@media screen and (max-width: 767px){.pn-marketweb-table tr{display:flex;flex-wrap:wrap}.pn-marketweb-table td:not(.cell-content){width:100%}.pn-marketweb-table td.cell-image{text-align:center}.pn-marketweb-table td.cell-content{flex:1 0 40%}.pn-marketweb-table td.cell-content::before{content:attr(data-label);display:block;font-weight:bold;margin-bottom:0.5em}.pn-marketweb-table td.actions .button-wrapper{gap:2rem}}@media (min-width: 768px){.pn-marketweb-table .row-image{max-width:80px}}.pn-marketweb-table .toggle-detail{display:none;color:#005d92;cursor:pointer;border:none;border-radius:3em;outline:none;position:relative;font-size:0.875em;min-width:5.5em;font-weight:500;background-color:transparent;justify-content:center;align-items:center;transition:color 0.3s;-webkit-tap-highlight-color:transparent;text-decoration:none;padding:0.375em 1em;min-height:2em;line-height:1.65em;white-space:nowrap}.pn-marketweb-table .toggle-detail:hover{background-color:#e0f8ff;opacity:1}.pn-marketweb-table .shipment-id-active .button-wrapper{display:flex}.pn-marketweb-table tr td.cell-content:first-child .cell-value{font-weight:500}.pn-marketweb-table .pn-widget-wrapper{display:flex;justify-content:center}.pn-marketweb-table .shipment-id-active,.pn-marketweb-table .widget-row{background-color:#effbff}.pn-marketweb-table .pn-market-table__show-more-wrapper{display:flex;justify-content:center;width:100%}.row-new-message .button-wrapper:after{content:attr(data-label);background:#0aa85c;border-radius:0 0.4rem 0.4rem 0;color:#ffffff;display:block;position:absolute;left:0;top:0;font-size:1.4rem;padding:0 0.4rem}@media (min-width: 768px){.row-new-message .button-wrapper:after{background:#005e41;border-radius:0.4rem;left:auto;right:1.6rem;font-size:1.1rem;top:0.3rem}}";
+const PnMarketwebTableStyle0 = pnMarketwebTableCss;
+
+const PnMarketWebTable = /*@__PURE__*/ proxyCustomElement(class PnMarketWebTable extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.mainHeading = undefined;
+        this.mainHeadingLevel = 'h2';
+        this.preamble = undefined;
+        this.subHeadingLevel = 'h3';
+        this.headers = undefined;
+        this.rows = undefined;
+        this.showHeadersInCells = false;
+        this.cellHeaderLevel = 'h3';
+        this.tableRowCtaActionLabel = undefined;
+        this.imageColAriaHeader = undefined;
+        this.ctaColAriaHeader = undefined;
+        this.checkForNewShipments = false;
+        this.endpoint = undefined;
+        this.language = 'sv';
+        this.market = undefined;
+        this.toggleDetailLabel = 'View details';
+        this.checkForChat = false;
+        this.value = '';
+        this.shipmentType = undefined;
+        this.contentId = '';
+        this.takeAmountRow = 2;
+        this.shipmentCount = 2;
+        this.i18n = undefined;
+        this._headers = [];
+        this._rows = [];
+        this._allKeys = new Set();
+        this.screenInfo = undefined;
+    }
+    screenWidth = ScreenWidth.getInstance();
+    cleanup;
+    _chatService;
+    _chatSegment = "#chat";
+    _marketwebTableService;
+    componentWillLoad() {
+        this.setInitialValues();
+        this.setTranslations();
+        this._marketwebTableService = new MarketwebTableService(this.endpoint, this.language);
+        this.cleanup = this.screenWidth.subscribe(info => {
+            this.screenInfo = info;
+        });
+        if (this.checkForNewShipments) {
+            this._chatService = new PnChatService(this.endpoint, this.market, this.language);
+            setInterval(() => {
+                this.checkForNewMessages();
+            }, 60000);
+        }
+    }
+    setTranslations() {
+        if (translations[this.language]) {
+            this.i18n = translations[this.language];
+        }
+        else {
+            const fallbackLang = 'sv';
+            this.i18n = translations[fallbackLang];
+        }
+    }
+    onLanguageChange() {
+        this.setTranslations();
+    }
+    async componentDidLoad() {
+        if (this.checkForChat) {
+            const thisTable = document.querySelector('pn-marketweb-table.' + this.shipmentType);
+            const chatHrefs = thisTable.querySelectorAll('[href*="#chat"]');
+            const openChatATags = Array.from(chatHrefs).filter((el) => el instanceof HTMLAnchorElement);
+            this.OpenChatEvent(openChatATags);
+        }
+    }
+    componentDidRender() {
+        const thisTable = document.querySelector('pn-marketweb-table[shipment-type=' + this.shipmentType + ']');
+        const toggleButtons = thisTable?.querySelectorAll('pn-button.toggle-widget');
+        toggleButtons?.forEach(pnButton => {
+            const btnText = pnButton.querySelector('.pn-button-text');
+            if (btnText && btnText.innerHTML !== this.i18n.toggleButtonOn) {
+                btnText.innerHTML = this.i18n.toggleButtonOn;
+            }
+            const button = pnButton.querySelector('button');
+            if (button && !button.hasAttribute('data-toggle-initialized')) {
+                button.addEventListener('click', this.toggleButton.bind(this));
+                button.setAttribute('data-toggle-initialized', 'true');
+            }
+        });
+    }
+    toggleButton(event) {
+        const button = event.currentTarget;
+        const parentRow = button.closest('tr');
+        const parentPnButton = button.closest('pn-button');
+        const isActive = parentRow.classList.contains("shipment-id-active");
+        const existingWidgetRows = document.querySelectorAll('.widget-row');
+        existingWidgetRows.forEach(row => row.remove());
+        const allRows = document.querySelectorAll('tr');
+        allRows.forEach(row => row.classList.remove("shipment-id-active"));
+        const allPnButtons = document.querySelectorAll('pn-button.toggle-widget');
+        allPnButtons.forEach(pnBtn => {
+            pnBtn.setAttribute('icon', angle_down);
+            pnBtn.querySelector('.pn-button-text').innerHTML = this.i18n.toggleButtonOn;
+        });
+        if (isActive) {
+            return;
+        }
+        button.querySelector('.pn-button-text').innerHTML = this.i18n.toggleButtonOff;
+        parentRow.classList.add("shipment-id-active");
+        const widgetRow = document.createElement('tr');
+        widgetRow.classList.add('widget-row');
+        const tdElement = document.createElement('td');
+        tdElement.colSpan = parentRow.children.length;
+        const divEl = document.createElement('div');
+        divEl.classList.add('pn-widget-wrapper');
+        const widget = document.createElement('pn-widget');
+        widget.setAttribute('locale', this.language);
+        widget.setAttribute('shipment-id', button.id);
+        divEl.appendChild(widget);
+        tdElement.appendChild(divEl);
+        widgetRow.appendChild(tdElement);
+        parentRow.parentNode.insertBefore(widgetRow, parentRow.nextSibling);
+        parentPnButton.setAttribute('icon', angle_up);
+    }
+    handleShowMore = async () => {
+        let skip = this._rows.length;
+        let data = await this._marketwebTableService.getUserShipments(this.contentId, skip, this.takeAmountRow, this.checkForChat);
+        if (data) {
+            this._rows = [...this._rows, ...data];
+        }
+    };
+    async waitForComponent(selector, maxRetries = 10, delay = 300) {
+        for (let i = 0; i < maxRetries; i++) {
+            const element = document.querySelector(selector);
+            if (element) {
+                return element;
+            }
+            await new Promise(resolve => setTimeout(resolve, delay));
+        }
+        return null;
+    }
+    disconnectedCallback() {
+        if (this.cleanup) {
+            this.cleanup();
+        }
+    }
+    async checkForNewMessages() {
+        for (let i = 0; i < this._rows.length; i++) {
+            const row = this._rows[i];
+            const itemId = row.id;
+            if (itemId) {
+                const hasNewMessages = await this._chatService.hasNewMessages(itemId);
+                if (row.hasNewMessages !== hasNewMessages) {
+                    this._rows[i] = { ...row, hasNewMessages: hasNewMessages };
+                }
+            }
+        }
+        this._rows = [...this._rows];
+    }
+    setInitialValues() {
+        try {
+            this.parseRows();
+            this.parseHeaders();
+        }
+        catch (error) {
+            console.error('Error parsing table data:', error);
+            this._rows = [];
+            this._headers = [];
+        }
+    }
+    parseRows() {
+        this._rows = typeof this.rows === 'string' ? JSON.parse(this.rows) : this.rows;
+        this._allKeys = new Set(this._rows.flatMap(row => Object.keys(row)));
+    }
+    parseHeaders() {
+        if (typeof this.headers === 'string') {
+            this._headers = JSON.parse(this.headers);
+        }
+        else if (this.headers) {
+            this._headers = this.headers;
+        }
+        else {
+            this._headers = Array.from(this._allKeys).map(key => ({ key, label: key }));
+        }
+    }
+    renderCellContent(header, row) {
+        const content = header.render ? header.render(row) : row[header.key] ?? '-';
+        return content;
+    }
+    renderCell(header, row) {
+        const content = this.renderCellContent(header, row);
+        if (this.showHeadersInCells || this.screenInfo.width <= DEFAULT_BREAKPOINTS.tablet) {
+            return (h("div", { class: "cell-content", role: "cell" }, h(HeadingTag, { level: this.cellHeaderLevel, cssClass: "cell-heading", additionalProps: {
+                    'aria-hidden': 'true',
+                    'role': 'presentation',
+                } }, header.label), h("span", { class: "cell-value" }, content)));
+        }
+        return h(Fragment, null, content);
+    }
+    handleToggleClick = () => {
+        const areaToggle = document.querySelector('.trackandtracewidgetblock');
+        if (areaToggle?.parentElement) {
+            areaToggle.parentElement.classList.toggle('hideRow');
+        }
+    };
+    renderActionButtons(row) {
+        if (!row.actionButtons)
+            return null;
+        return (h("td", { class: "actions", role: "cell" }, h("div", { class: "button-wrapper", role: "group", "aria-label": this.tableRowCtaActionLabel, "data-label": this.i18n.newMessage }, row.actionButtons.map(btn => (h("pn-button", { appearance: btn.appearance, class: btn.class, variant: btn.variant, small: btn.small, loading: btn.loading, icon: btn.icon, leftIcon: btn.leftIcon, tooltip: btn.tooltip, href: btn.href, rel: btn.rel, download: btn.download, form: btn.form, buttonId: btn.buttonId, "data-chat": btn.customAttribute }, btn.content))))));
+    }
+    async OpenChatEvent(aTags) {
+        aTags.forEach((aTag) => {
+            aTag.addEventListener("click", (e) => {
+                e.preventDefault();
+                const previousLocationHash = window?.location?.hash ?? "";
+                const findShipmentIdInUrlRegex = /#chat:([a-zA-Z0-9]+)(?=#|$)/;
+                const match = aTag.href.match(findShipmentIdInUrlRegex);
+                const shipmentId = match ? match[1] : "";
+                const shipmentHash = `${this._chatSegment}:${shipmentId}`;
+                window.location.hash = shipmentHash;
+                this.waitForComponent('pn-chat').then((chat) => {
+                    if (shipmentId) {
+                        chat.setAttribute('item-id', shipmentId);
+                    }
+                    else {
+                        chat.setAttribute('item-id', "");
+                    }
+                    let oldInitChatId = chat.getAttribute('pn-chat-id');
+                    const _defaultChatId = "00000000-0000-0000-0000-000000000000";
+                    const _defaultAlternativeChatId = "1";
+                    const _defaultTriggerChatId = oldInitChatId === _defaultChatId ? _defaultAlternativeChatId : _defaultChatId;
+                    let chatId = _defaultTriggerChatId;
+                    const reversedChatId = aTag?.parentElement?.getAttribute('data-chat');
+                    if (reversedChatId) {
+                        chatId = reversedChatId.split('').reverse().join('');
+                    }
+                    chat.setAttribute('is-logged-in', 'true');
+                    chat.setAttribute('pn-chat-id', chatId);
+                    if (previousLocationHash.includes(shipmentHash)) {
+                        let forceOpen = chat.getAttribute('force-open') ?? 'true';
+                        forceOpen = forceOpen === 'true' ? 'false' : 'true';
+                        chat.setAttribute('force-open', forceOpen);
+                    }
+                });
+            });
+        });
+    }
+    render() {
+        const tableId = `table-${Math.random().toString(36)}`;
+        const headingId = `${tableId}-main-heading`;
+        return (h(Host, { key: '9dd9a449fb58560ed8319441a1a17fd0ecb3708c', language: this.language }, h("div", { key: '5bf3fef47a8f71254d065a7732a6b53a6c945834', class: 'pn-marketweb-table' }, h("div", { key: 'ae40adf08605764a39e6ab02bb55780c0974c2e7', role: 'region', "aria-labelledby": this.mainHeading ? headingId : undefined }, h("div", { key: 'f569e5f4fdbd29b667912557ba2806ac33bfe203', class: 'heading-section' }, h("div", { key: 'bf3280cdf17784cb8237c2204d2286530df28d35', class: 'heading-wrapper' }, this.mainHeading && (h(HeadingTag, { key: '923eec130a764bb2d3d14fd507f9d5fa4eff750f', level: this.mainHeadingLevel, cssClass: 'main-heading', id: headingId }, this.mainHeading)), this.preamble && (h("div", { key: '4c7bc46e41807897ab0e891497e228eef478fff9', class: "preamble-section" }, this.preamble)))), this._rows.length > 0 && (h("table", { key: '041f873a19c963f9091ec6bd8bd05cebe98b8cae', class: 'pn-marketweb-table__table', "aria-labelledby": this.mainHeading ? `${tableId}-main-heading` : undefined }, this._headers && (h("thead", { key: '994dff35404141dca8da55223cdeac282aad98ab', class: this.showHeadersInCells ? 'sr-only' : undefined }, h("tr", { key: 'b9733ffec4696350e82fb319c92a6b186ae3af8c' }, this._rows.some((row) => row.imageUrl) && this.imageColAriaHeader && (h("th", { key: '1ee27305f199b4a21e0c875e24d9b4bee76e3ecb', scope: 'col', class: 'sr-only' }, this.imageColAriaHeader)), this._headers.map((header) => (h("th", { key: header.key, scope: 'col', class: 'sr-only-mobile' }, header.label))), this._rows.some((row) => row.link1 || row.link2) && this.ctaColAriaHeader && (h("th", { key: '0468730178d3bf9b9197a77b5bd1bb87d5b96706', scope: 'col', class: 'sr-only' }, this.ctaColAriaHeader))))), h("tbody", { key: '42c974c7df0a42fa529a478be1164619476171b4' }, this._rows.slice(0, this.shipmentCount).map((row, rowIndex) => (h("tr", { key: rowIndex, class: row.hasNewMessages ? "row-new-message" : null }, row.imageUrl && (h("td", { class: 'cell-image' }, h("div", { class: 'image-container' }, h("img", { src: row.imageUrl, alt: '', class: 'row-image' })))), this._headers.map((header) => (h("td", { key: `${rowIndex}-${header.key}`, class: 'cell-content' }, this.renderCell(header, row)))), this.renderActionButtons(row))))))), this.shipmentCount > this._rows.length && (h("div", { key: 'df77087fd61f9e18ad2dd9f2ffcfcc48ef59fdfc', class: "pn-market-table__show-more-wrapper" }, h("pn-button", { key: '7ed292e469b44f7594076ee67d31136e9afcb240', variant: "outlined", appearance: "light", label: this.i18n?.showMoreLabel || 'Show More', onClick: () => this.handleShowMore() })))))));
+    }
+    static get watchers() { return {
+        "language": ["onLanguageChange"]
+    }; }
+    static get style() { return PnMarketwebTableStyle0; }
+}, [0, "pn-marketweb-table", {
+        "mainHeading": [1, "main-heading"],
+        "mainHeadingLevel": [1, "main-heading-level"],
+        "preamble": [1],
+        "subHeadingLevel": [1, "sub-heading-level"],
+        "headers": [1],
+        "rows": [1],
+        "showHeadersInCells": [4, "show-headers-in-cells"],
+        "cellHeaderLevel": [1, "cell-header-level"],
+        "tableRowCtaActionLabel": [1, "table-row-cta-action-label"],
+        "imageColAriaHeader": [1, "image-col-aria-header"],
+        "ctaColAriaHeader": [1, "cta-col-aria-header"],
+        "checkForNewShipments": [4, "check-for-new-shipments"],
+        "endpoint": [1],
+        "language": [1],
+        "market": [1],
+        "toggleDetailLabel": [1, "toggle-detail-label"],
+        "checkForChat": [4, "check-for-chat"],
+        "value": [1537],
+        "shipmentType": [1, "shipment-type"],
+        "contentId": [1, "content-id"],
+        "takeAmountRow": [2, "take-amount-row"],
+        "shipmentCount": [2, "shipment-count"],
+        "i18n": [32],
+        "_headers": [32],
+        "_rows": [32],
+        "_allKeys": [32],
+        "screenInfo": [32]
+    }, undefined, {
+        "language": ["onLanguageChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pn-marketweb-table"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pn-marketweb-table":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PnMarketWebTable);
+            }
+            break;
+    } });
+}
+
+const PnMarketwebTable = PnMarketWebTable;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnMarketwebTable, defineCustomElement };
+
+//# sourceMappingURL=pn-marketweb-table.js.map

package/components/pn-marketweb-table.js.map

@@ -0,0 +1 @@
+{"file":"pn-marketweb-table.js","mappings":"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","names":[],"sources":["src/globals/ScreensizeDetect.ts","src/components/widgets/pn-marketweb-table/translations.ts","src/components/widgets/pn-marketweb-table/pn-marketweb-table.service.ts","src/components/widgets/pn-marketweb-table/pn-marketweb-table.scss?tag=pn-marketweb-table","src/components/widgets/pn-marketweb-table/pn-marketweb-table.tsx"],"sourcesContent":["interface Breakpoints {\n  mobile: number;\n  tablet: number;\n  desktop: number;\n}\n\ntype ScreenSize = 'mobile' | 'tablet' | 'desktop';\n\nexport interface ScreenWidthInfo {\n  width: number;\n  size: ScreenSize;\n  isTouch: boolean;\n}\n\nexport const DEFAULT_BREAKPOINTS: Breakpoints = {\n  mobile: 768,\n  tablet: 1024,\n  desktop: 1025,\n};\n\nexport class ScreenWidth {\n  private static instance: ScreenWidth;\n  private breakpoints: Breakpoints;\n  private callbacks: Set<(info: ScreenWidthInfo) => void>;\n  private resizeTimeout?: number;\n\n  private constructor() {\n    this.breakpoints = DEFAULT_BREAKPOINTS;\n    this.callbacks = new Set();\n    this.initializeListeners();\n  }\n\n  public static getInstance(): ScreenWidth {\n    if (!ScreenWidth.instance) {\n      ScreenWidth.instance = new ScreenWidth();\n    }\n    return ScreenWidth.instance;\n  }\n\n  public setBreakpoints(breakpoints: Partial<Breakpoints>): void {\n    this.breakpoints = { ...this.breakpoints, ...breakpoints };\n    this.notifyListeners();\n  }\n\n  private getWidth(): number {\n    if (typeof window === 'undefined') return 0;\n\n    return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;\n  }\n\n  private isTouch(): boolean {\n    if (typeof window === 'undefined') return false;\n\n    return (\n      'ontouchstart' in window ||\n      navigator.maxTouchPoints > 0 ||\n      // @ts-ignore - Some browsers might not have msMaxTouchPoints\n      navigator.msMaxTouchPoints > 0\n    );\n  }\n\n  private getScreenSize(width: number): ScreenSize {\n    if (width < this.breakpoints.mobile) return 'mobile';\n    if (width < this.breakpoints.tablet) return 'tablet';\n    return 'desktop';\n  }\n\n  public getScreenInfo(): ScreenWidthInfo {\n    const width = this.getWidth();\n    return {\n      width,\n      size: this.getScreenSize(width),\n      isTouch: this.isTouch(),\n    };\n  }\n\n  private initializeListeners(): void {\n    if (typeof window === 'undefined') return;\n\n    const handleResize = () => {\n      if (this.resizeTimeout) {\n        window.clearTimeout(this.resizeTimeout);\n      }\n\n      this.resizeTimeout = window.setTimeout(() => {\n        this.notifyListeners();\n      }, 250);\n    };\n\n    window.addEventListener('resize', handleResize);\n    window.addEventListener('orientationchange', handleResize);\n  }\n\n  private notifyListeners(): void {\n    const info = this.getScreenInfo();\n    this.callbacks.forEach(callback => callback(info));\n  }\n\n  public subscribe(callback: (info: ScreenWidthInfo) => void): () => void {\n    this.callbacks.add(callback);\n    callback(this.getScreenInfo()); // Initial call\n\n    return () => {\n      this.callbacks.delete(callback);\n    };\n  }\n}\n","export const translations = {\n  'sv': {\n    newMessage: 'Nytt meddelande',\n    toggleButtonOn: 'Visa detaljer',\n    toggleButtonOff: 'Dölj detaljer',\n    showMoreLabel: 'Visa mer',\n  },\n  'en': {\n    newMessage: 'New message',\n    toggleButtonOn: 'Show details',\n    toggleButtonOff: 'Hide details',\n    showMoreLabel: 'Show more',\n  },\n  'da': {\n    newMessage: 'Ny besked',\n    toggleButtonOn: 'Vis detaljer',\n    toggleButtonOff: 'Skjul detaljer',\n    showMoreLabel: 'Vis mere',\n  },\n  'no': {\n    newMessage: 'Ny melding',\n    toggleButtonOn: 'Vis detaljer',\n    toggleButtonOff: 'Skjul detaljer',\n    showMoreLabel: 'Vis mer',\n  },\n  'fi': {\n    newMessage: 'Uusi viesti',\n    toggleButtonOn: 'Näytä tiedot',\n    toggleButtonOff: 'Piilota tiedot',\n    showMoreLabel: 'Näytä lisää',\n  },\n  'de': {\n    newMessage: 'Nytt meddelade',\n    toggleButtonOn: 'Visa detaljer',\n    toggleButtonOff: 'Dölj detaljer',\n  },\n  'zh': {\n    newMessage: 'Nytt meddelade',\n    toggleButtonOn: 'Visa detaljer',\n    toggleButtonOff: 'Dölj detaljer',\n  },\n  'it': {\n    newMessage: 'Nytt meddelade',\n    toggleButtonOn: 'Visa detaljer',\n    toggleButtonOff: 'Dölj detaljer',\n  },\n  'nl': {\n    newMessage: 'Nytt meddelade',\n    toggleButtonOn: 'Visa detaljer',\n    toggleButtonOff: 'Dölj detaljer',\n  },\n  'tr': {\n    newMessage: 'Nytt meddelade',\n    toggleButtonOn: 'Visa detaljer',\n    toggleButtonOff: 'Dölj detaljer',\n  },\n  'pt': {\n    newMessage: 'Nytt meddelade',\n    toggleButtonOn: 'Visa detaljer',\n    toggleButtonOff: 'Dölj detaljer',\n  },\n  'pl': {\n    newMessage: 'Nytt meddelade',\n    toggleButtonOn: 'Visa detaljer',\n    toggleButtonOff: 'Dölj detaljer',\n  },\n  'pt-BR': {\n    newMessage: 'Nytt meddelade',\n    toggleButtonOn: 'Visa detaljer',\n    toggleButtonOff: 'Dölj detaljer',\n  },\n};\n","import { FetchHelper } from '@/globals/FetchHelper';\nimport { ShipmentsBody, ShipmentsResponse, TableRowData } from './types';\n\nexport class MarketwebTableService {\n    private readonly _endpoint;\n    private readonly _language;\n    private fetchHelper = new FetchHelper('MarketTableService');\n    private readonly _getUserShipmentsPath = `/get-user-shipments`;\n\n\n    constructor(endpoint: string, language: string) {\n        this._endpoint = this.formatEndpoint(endpoint);\n        this._language = language;\n    }\n\n    async getUserShipments(contentId: string, skip: number, take: number, isChatEnabled: boolean): Promise<TableRowData[]> {\n        let model: ShipmentsBody =\n        {\n            skip: skip,\n            take: take,\n            isChatEnabled: isChatEnabled,\n            language: this._language,\n            contentId: contentId,\n        };\n\n        const fetchUrl = this._endpoint + this._getUserShipmentsPath;\n\n        const data = (await this.fetchHelper.fetchJson(\n            fetchUrl,\n            this.getRequestInit(model),\n            false\n        )) as ShipmentsResponse;\n\n        return JSON.parse(data.shipments) as TableRowData[];\n    }\n\n    private formatEndpoint(endpoint: string): string {\n        var formattedEndpoint = endpoint.lastIndexOf('/') === endpoint.length - 1 ? endpoint.substring(0, endpoint.length - 1) : endpoint;\n        return formattedEndpoint;\n    }\n\n    private getRequestInit(model: any, method: string = 'POST', mode: RequestMode = 'cors', contentTypes: string = 'application/json'): RequestInit {\n        return {\n            mode: mode,\n            method: method,\n            headers:\n            {\n                'Content-Type': contentTypes\n            },\n            body: JSON.stringify(model)\n        };\n    }\n}\n","@import '../../../globals/main.scss';\n\n:host {\n  display: block;\n}\n\n.pn-marketweb-table {\n  .container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 1rem;\n  }\n\n  .heading-section {\n    display: flex;\n    justify-content: space-between;\n    gap: 2rem;\n    margin-bottom: 2rem;\n\n    @media (max-width: 768px) {\n      flex-direction: column;\n    }\n\n    .heading-wrapper {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .preamble-section {\n      width: 80%;\n    }\n\n    .main-heading {\n      margin-bottom: 1rem;\n    }\n\n    .summary {\n      display: flex;\n      height: 7rem;\n      justify-content: flex-end;\n      gap: clamp(1rem, 4vw, 2rem);\n\n      @media (max-width: 768px) {\n        justify-content: center;\n      }\n    }\n\n    .sub-heading-section {\n      background-color: $blue25;\n      border-radius: 1.6rem;\n      display: flex;\n      align-items: center;\n      gap: clamp(0.6rem, 4vw, 1rem);\n      padding: 0.6rem 1.2rem;\n      width: 13.5rem;\n\n      .icon-container {\n        background-color: $blue50;\n        border-radius: 50%;\n        padding: 4px;\n      }\n    }\n\n    .sub-heading {\n      font-size: clamp(1rem, 3vw, 1.4rem);\n      font-weight: 400;\n      line-height: clamp(1.225rem, 4vw, 1.5rem);\n      margin: 0;\n\n      strong {\n        color: $blue700;\n        font-weight: 700;\n      }\n    }\n  }\n\n  .pn-marketweb-table__table {\n    width: 100%;\n    border-collapse: collapse;\n    margin-bottom: 3.2rem;\n  }\n\n  .pn-marketweb-table__table tr {\n    border-bottom: 1px solid $gray100;\n    position: relative;\n    border-left: 4px solid $white;\n    transition: all .7s ease;\n\n\n\n    &:last-child {\n      border-bottom: none;\n    }\n\n    &:hover {\n      border-left: 4px solid $blue200;\n      background: $blue25;\n    }\n\n    &.row-new-message,\n    &.row-new-messag:hover {\n      border-left: 4px solid $green500;\n      background: linear-gradient(90deg, rgba(220, 246, 231, 1) 0%, rgba(237, 251, 243, 1) 30%, rgba(255, 255, 255, 1) 70%);\n    }\n  }\n\n  .pn-marketweb-table__table td {\n    padding: 1.6rem 1rem;\n  }\n\n  .image-container {\n      min-height: 5.8rem;\n  }\n\n  .cell-heading {\n    color: $gray700;\n    font-size: clamp(0.875rem, 4vw, 1.2rem);\n    font-weight: 400;\n    line-height: clamp(1.225rem, 4vw, 1.5rem);\n    margin: 0;\n  }\n\n  .cell-value {\n    color: $gray900;\n    display: inline-block;\n    font-size: clamp(1rem, 4vw, 1.5rem);\n    font-weight: 400;\n    line-height: clamp(1.4rem, 4vw, 1.8rem);\n    margin: 0;\n    padding: 0.5rem 0;\n  }\n\n  .row-image {\n    border-radius: 0.5rem;\n  }\n\n  .actions {\n    align-content: center;\n\n    .button-wrapper {\n      display: flex;\n      flex-direction: row;\n      justify-content: flex-end;\n      gap: 1.6rem;\n\n      .pn-button-text {\n        white-space: nowrap;\n      }\n\n      @media screen and (max-width: 768px) {\n        justify-content: space-between;\n      }\n    }\n  }\n\n  @media screen and (max-width: 767px) {\n    tr {\n      display: flex;\n      flex-wrap: wrap;\n    }\n\n    td:not(.cell-content) {\n      width: 100%;\n    }\n\n    td.cell-image {\n      text-align: center;\n    }\n\n    td.cell-content {\n      flex: 1 0 40%;\n\n      &::before {\n        content: attr(data-label);\n        display: block;\n        font-weight: bold;\n        margin-bottom: 0.5em;\n      }\n    }\n\n    td.actions .button-wrapper {\n      gap: 2rem;\n    }\n  }\n\n  @media (min-width: 768px) {\n    .row-image {\n      max-width: 80px;\n    }\n  }\n\n  .toggle-detail {\n    display: none;\n    color: $blue700;\n    cursor: pointer;\n    border: none;\n    border-radius: 3em;\n    outline: none;\n    position: relative;\n    font-size: 0.875em;\n    min-width: 5.5em;\n    font-weight: 500;\n    background-color: transparent;\n    justify-content: center;\n    align-items: center;\n    transition: color 0.3s;\n    -webkit-tap-highlight-color: transparent;\n    text-decoration: none;\n    padding: 0.375em 1em;\n    min-height: 2em;\n    line-height: 1.65em;\n    white-space: nowrap;\n\n    &:hover {\n      background-color: $blue50;\n      opacity: 1;\n    }\n  }\n\n  .shipment-id-active .button-wrapper {\n    display: flex;\n  }\n\n  tr td.cell-content:first-child .cell-value {\n    font-weight: 500;\n  }\n\n  .pn-widget-wrapper {\n    display: flex;\n    justify-content: center;\n  }\n\n  .shipment-id-active, .widget-row {\n    background-color: $blue25;\n  }\n\n  .pn-market-table__show-more-wrapper {\n    display: flex;\n    justify-content: center;\n    width: 100%;\n  }\n}\n\n\n\n.row-new-message .button-wrapper:after {\n  content: attr(data-label);\n  background: $green500;\n  border-radius: 0 0.4rem .4rem 0;\n  color: $white;\n  display: block;\n  position: absolute;\n  left: 0;\n  top: 0;\n  font-size: 1.4rem;\n  padding: 0 .4rem;\n}\n\n@media (min-width: 768px) {\n  .row-new-message .button-wrapper:after {\n    background: $green700;\n    border-radius: .4rem;\n    left: auto;\n    right: 1.6rem;\n\n    font-size: 1.1rem;\n    top: .3rem;\n\n  }\n}","import { HeadingTag } from '@/globals/HeadingTag';\nimport { Component, Host, Prop, h, State, Fragment, Watch } from '@stencil/core';\nimport { ScreenWidth, ScreenWidthInfo, DEFAULT_BREAKPOINTS } from '@/globals/ScreensizeDetect';\nimport { HeadingLevel } from '@/globals/types';\nimport { angle_down, angle_up } from 'pn-design-assets/pn-assets/icons.js';\nimport { JSX } from 'react';\nimport { PnChatService } from '../pn-chat/pn-chat.service';\nimport { HeaderConfig, TableRowData, TableRowi18n } from './types'\nimport { translations } from './translations';\nimport { MarketwebTableService } from './pn-marketweb-table.service';\n\n@Component({\n  tag: 'pn-marketweb-table',\n  styleUrl: 'pn-marketweb-table.scss',\n})\nexport class PnMarketWebTable {\n  @Prop() mainHeading?: string;\n  @Prop() mainHeadingLevel: HeadingLevel = 'h2';\n  @Prop() preamble: string\n  @Prop() subHeadingLevel: HeadingLevel = 'h3';\n  @Prop() headers!: string | HeaderConfig[];\n  @Prop() rows!: string | TableRowData[];\n  @Prop() showHeadersInCells: boolean = false;\n  @Prop() cellHeaderLevel: HeadingLevel = 'h3';\n  @Prop() tableRowCtaActionLabel: string;\n  @Prop() imageColAriaHeader: string;\n  @Prop() ctaColAriaHeader: string;\n  @Prop() checkForNewShipments: boolean = false;\n  @Prop() endpoint: string;\n  @Prop() language: string = 'sv';\n  @Prop() market: string;\n  @Prop() toggleDetailLabel: string = 'View details';\n  @Prop() checkForChat: boolean = false;\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n  @Prop() shipmentType!: string;\n  @Prop() contentId: string = '';\n  @Prop() takeAmountRow: number = 2;\n  @Prop() shipmentCount: number = 2;\n\n  @State() i18n: TableRowi18n;\n  @State() private _headers: HeaderConfig[] = [];\n  @State() private _rows: TableRowData[] = [];\n  @State() private _allKeys: Set<string> = new Set();\n  @State() private screenInfo?: ScreenWidthInfo;\n\n  private screenWidth = ScreenWidth.getInstance();\n  private cleanup?: () => void;\n  private _chatService: PnChatService;\n  private _chatSegment: string = \"#chat\";\n  private _marketwebTableService: MarketwebTableService;\n\n  componentWillLoad(): void {\n    this.setInitialValues();\n    this.setTranslations();\n    this._marketwebTableService = new MarketwebTableService(this.endpoint, this.language);\n\n    this.cleanup = this.screenWidth.subscribe(info => {\n      this.screenInfo = info;\n    });\n\n    if (this.checkForNewShipments) {\n      this._chatService = new PnChatService(this.endpoint, this.market, this.language);\n      setInterval(() => {\n        this.checkForNewMessages();\n      }, 60000);\n    }\n  }\n\n  setTranslations() {\n    if (translations[this.language]) {\n      this.i18n = translations[this.language] as TableRowi18n;\n    }\n    else {\n      const fallbackLang = 'sv';\n      this.i18n = translations[fallbackLang] as TableRowi18n;\n    }\n  }\n\n  @Watch('language')\n  onLanguageChange() {\n    this.setTranslations();\n  }\n\n  async componentDidLoad() {\n    if (this.checkForChat) {\n      const thisTable = document.querySelector('pn-marketweb-table.' + this.shipmentType);\n      const chatHrefs = thisTable.querySelectorAll('[href*=\"#chat\"]');\n      const openChatATags: HTMLAnchorElement[] = Array.from(chatHrefs).filter(\n        (el): el is HTMLAnchorElement => el instanceof HTMLAnchorElement\n      );\n      this.OpenChatEvent(openChatATags);\n    }\n  }\n\n  componentDidRender() {\n    const thisTable = document.querySelector('pn-marketweb-table[shipment-type=' + this.shipmentType + ']');\n    const toggleButtons = thisTable?.querySelectorAll('pn-button.toggle-widget');\n    toggleButtons?.forEach(pnButton => {\n      const btnText = pnButton.querySelector('.pn-button-text');\n      if (btnText && btnText.innerHTML !== this.i18n.toggleButtonOn) {\n        btnText.innerHTML = this.i18n.toggleButtonOn;\n      }\n      const button = pnButton.querySelector('button');\n      if (button && !button.hasAttribute('data-toggle-initialized')) {\n        button.addEventListener('click', this.toggleButton.bind(this));\n        button.setAttribute('data-toggle-initialized', 'true');\n      }\n    });\n  }\n\n  private toggleButton(event) {\n    const button = event.currentTarget as HTMLButtonElement;\n    const parentRow = button.closest('tr');\n    const parentPnButton = button.closest('pn-button');\n\n    const isActive = parentRow.classList.contains(\"shipment-id-active\");\n\n    const existingWidgetRows = document.querySelectorAll('.widget-row');\n    existingWidgetRows.forEach(row => row.remove());\n\n    const allRows = document.querySelectorAll('tr');\n    allRows.forEach(row => row.classList.remove(\"shipment-id-active\"));\n\n    const allPnButtons = document.querySelectorAll('pn-button.toggle-widget');\n    allPnButtons.forEach(pnBtn => {\n      pnBtn.setAttribute('icon', angle_down);\n      pnBtn.querySelector('.pn-button-text').innerHTML = this.i18n.toggleButtonOn;\n    });\n\n    if (isActive) {\n      return;\n    }\n    button.querySelector('.pn-button-text').innerHTML = this.i18n.toggleButtonOff;\n    parentRow.classList.add(\"shipment-id-active\");\n\n    const widgetRow = document.createElement('tr');\n    widgetRow.classList.add('widget-row');\n\n    const tdElement = document.createElement('td');\n    tdElement.colSpan = parentRow.children.length;\n\n    const divEl = document.createElement('div');\n    divEl.classList.add('pn-widget-wrapper');\n\n    const widget = document.createElement('pn-widget');\n    widget.setAttribute('locale', this.language);\n    widget.setAttribute('shipment-id', button.id);\n\n    divEl.appendChild(widget);\n    tdElement.appendChild(divEl);\n    widgetRow.appendChild(tdElement);\n\n    parentRow.parentNode.insertBefore(widgetRow, parentRow.nextSibling);\n\n    parentPnButton.setAttribute('icon', angle_up);\n  }\n\n  private handleShowMore = async () => {\n    let skip = this._rows.length;\n    let data = await this._marketwebTableService.getUserShipments(this.contentId, skip, this.takeAmountRow, this.checkForChat);\n    if (data) {\n      this._rows = [...this._rows, ...data];\n    }\n  };\n\n  async waitForComponent(selector: string, maxRetries = 10, delay = 300): Promise<HTMLElement | null> {\n    for (let i = 0; i < maxRetries; i++) {\n      const element = document.querySelector(selector);\n      if (element) {\n        return element as HTMLElement;\n      }\n      await new Promise(resolve => setTimeout(resolve, delay));\n    }\n    return null;\n  }\n\n  disconnectedCallback(): void {\n    if (this.cleanup) {\n      this.cleanup();\n    }\n  }\n\n  private async checkForNewMessages() {\n    for (let i = 0; i < this._rows.length; i++) {\n      const row = this._rows[i];\n      const itemId = row.id;\n\n      if (itemId) {\n        const hasNewMessages = await this._chatService.hasNewMessages(itemId);\n\n        if (row.hasNewMessages !== hasNewMessages) {\n          this._rows[i] = { ...row, hasNewMessages: hasNewMessages };\n        }\n      }\n    }\n\n    this._rows = [...this._rows];\n  }\n\n  private setInitialValues(): void {\n    try {\n      this.parseRows();\n      this.parseHeaders();\n\n    } catch (error) {\n      console.error('Error parsing table data:', error);\n      this._rows = [];\n      this._headers = [];\n    }\n  }\n\n  private parseRows() {\n    this._rows = typeof this.rows === 'string' ? JSON.parse(this.rows) : this.rows;\n    this._allKeys = new Set(this._rows.flatMap(row => Object.keys(row)));\n  }\n\n  private parseHeaders() {\n    if (typeof this.headers === 'string') {\n      this._headers = JSON.parse(this.headers);\n    } else if (this.headers) {\n      this._headers = this.headers;\n    } else {\n      this._headers = Array.from(this._allKeys).map(key => ({ key, label: key }));\n    }\n  }\n\n  private renderCellContent(header: HeaderConfig, row: TableRowData): JSX.Element | string | number | boolean {\n    const content = header.render ? header.render(row) : row[header.key] ?? '-';\n    return content;\n  }\n\n  private renderCell(header: HeaderConfig, row: TableRowData): JSX.Element {\n    const content = this.renderCellContent(header, row);\n\n    if (this.showHeadersInCells || this.screenInfo.width <= DEFAULT_BREAKPOINTS.tablet) {\n      return (\n        <div class=\"cell-content\" role=\"cell\">\n          <HeadingTag\n            level={this.cellHeaderLevel}\n            cssClass=\"cell-heading\"\n            additionalProps={{\n              'aria-hidden': 'true',\n              'role': 'presentation',\n            }}\n          >\n            {header.label}\n          </HeadingTag>\n          <span class=\"cell-value\">{content}</span>\n        </div>\n      );\n    }\n\n    return <>{content}</>;\n  }\n\n  private handleToggleClick = () => {\n    const areaToggle = document.querySelector('.trackandtracewidgetblock');\n    if (areaToggle?.parentElement) {\n      areaToggle.parentElement.classList.toggle('hideRow');\n    }\n  };\n\n  private renderActionButtons(row: TableRowData): JSX.Element | null {\n    if (!row.actionButtons) return null;\n\n    return (\n      <td class=\"actions\" role=\"cell\">\n        <div class=\"button-wrapper\" role=\"group\" aria-label={this.tableRowCtaActionLabel} data-label={this.i18n.newMessage}>\n          {row.actionButtons.map(btn => (\n            <pn-button\n              appearance={btn.appearance}\n              class={btn.class}\n              variant={btn.variant}\n              small={btn.small}\n              loading={btn.loading}\n              icon={btn.icon}\n              leftIcon={btn.leftIcon}\n              tooltip={btn.tooltip}\n              href={btn.href}\n              rel={btn.rel}\n              download={btn.download}\n              form={btn.form}\n              buttonId={btn.buttonId}\n              data-chat={btn.customAttribute}>\n              {btn.content}\n            </pn-button>\n          ))}\n        </div>\n      </td>\n    );\n  }\n\n  private async OpenChatEvent(aTags: HTMLAnchorElement[]) {\n    aTags.forEach((aTag) => {\n      aTag.addEventListener(\"click\", (e) => {\n        e.preventDefault();\n        const previousLocationHash = window?.location?.hash ?? \"\";\n\n        const findShipmentIdInUrlRegex = /#chat:([a-zA-Z0-9]+)(?=#|$)/;\n        const match = aTag.href.match(findShipmentIdInUrlRegex);\n        const shipmentId = match ? match[1] : \"\";\n        const shipmentHash = `${this._chatSegment}:${shipmentId}`;\n        window.location.hash = shipmentHash;\n\n        this.waitForComponent('pn-chat').then((chat) => {\n          if (shipmentId) {\n            chat.setAttribute('item-id', shipmentId);\n          }\n          else {\n            chat.setAttribute('item-id', \"\");\n          }\n\n          let oldInitChatId = chat.getAttribute('pn-chat-id');\n\n          const _defaultChatId = \"00000000-0000-0000-0000-000000000000\";\n          const _defaultAlternativeChatId = \"1\";\n          const _defaultTriggerChatId = oldInitChatId === _defaultChatId ? _defaultAlternativeChatId : _defaultChatId;\n          let chatId = _defaultTriggerChatId;\n          const reversedChatId = aTag?.parentElement?.getAttribute('data-chat');\n\n          if (reversedChatId) {\n            chatId = reversedChatId.split('').reverse().join('');\n          }\n\n          chat.setAttribute('is-logged-in', 'true');\n          chat.setAttribute('pn-chat-id', chatId);\n\n          if (previousLocationHash.includes(shipmentHash)) {\n            let forceOpen = chat.getAttribute('force-open') ?? 'true';\n            forceOpen = forceOpen === 'true' ? 'false' : 'true';\n            chat.setAttribute('force-open', forceOpen);\n          }\n        });\n      });\n    });\n  }\n\n  render() {\n    const tableId = `table-${Math.random().toString(36)}`;\n    const headingId = `${tableId}-main-heading`;\n\n    return (\n      <Host language={this.language}>\n        <div class='pn-marketweb-table'>\n          <div role='region' aria-labelledby={this.mainHeading ? headingId : undefined}>\n            <div class='heading-section'>\n              <div class='heading-wrapper'>\n                {this.mainHeading && (\n                  <HeadingTag level={this.mainHeadingLevel} cssClass='main-heading' id={headingId}>\n                    {this.mainHeading}\n                  </HeadingTag>\n                )}\n                {this.preamble && (\n                  <div class=\"preamble-section\">{this.preamble}</div>\n                )}\n              </div>\n            </div>\n            {this._rows.length > 0 && (\n              <table class='pn-marketweb-table__table' aria-labelledby={this.mainHeading ? `${tableId}-main-heading` : undefined}>\n                {this._headers && (\n                  <thead class={this.showHeadersInCells ? 'sr-only' : undefined} >\n                    <tr >\n                      {this._rows.some((row) => row.imageUrl) && this.imageColAriaHeader && (\n                        <th scope='col' class='sr-only'>\n                          {this.imageColAriaHeader}\n                        </th>\n                      )}\n                      {this._headers.map((header) => (\n                        <th key={header.key} scope='col' class='sr-only-mobile'>\n                          {header.label}\n                        </th>\n                      ))}\n                      {this._rows.some((row) => row.link1 || row.link2) && this.ctaColAriaHeader && (\n                        <th scope='col' class='sr-only'>\n                          {this.ctaColAriaHeader}\n                        </th>\n                      )}\n                    </tr>\n                  </thead>\n                )}\n                <tbody>\n                  {this._rows.slice(0, this.shipmentCount).map((row, rowIndex) => (\n                    <tr key={rowIndex} class={row.hasNewMessages ? \"row-new-message\" : null}>\n                      {row.imageUrl && (\n                        <td class='cell-image'>\n                          <div class='image-container'>\n                            <img src={row.imageUrl} alt='' class='row-image' />\n                          </div>\n                        </td>\n                      )}\n                      {this._headers.map((header) => (\n                        <td key={`${rowIndex}-${header.key}`} class='cell-content' >\n                          {this.renderCell(header, row)}\n                        </td>\n                      ))}\n                      {this.renderActionButtons(row)}\n                    </tr>\n                  ))}\n                </tbody>\n              </table>\n            )}\n            {this.shipmentCount > this._rows.length && (\n              <div class=\"pn-market-table__show-more-wrapper\">\n                <pn-button variant=\"outlined\" appearance=\"light\" label={this.i18n?.showMoreLabel || 'Show More'} onClick={() => this.handleShowMore()}></pn-button>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}