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: 'Neue Nachricht',
        toggleButtonOn: 'Details anzeigen',
        toggleButtonOff: 'Details ausblenden',
        showMoreLabel: 'Mehr anzeigen',
    },
    'zh': {
        newMessage: '新消息',
        toggleButtonOn: '显示详情',
        toggleButtonOff: '隐藏详情',
        showMoreLabel: '显示更多',
    },
    'it': {
        newMessage: 'Nuovo messaggio',
        toggleButtonOn: 'Mostra dettagli',
        toggleButtonOff: 'Nascondi dettagli',
        showMoreLabel: 'Mostra di più',
    },
    'nl': {
        newMessage: 'Nieuw bericht',
        toggleButtonOn: 'Toon details',
        toggleButtonOff: 'Verberg details',
        showMoreLabel: 'Meer tonen',
    },
    'tr': {
        newMessage: 'Yeni mesaj',
        toggleButtonOn: 'Detayları göster',
        toggleButtonOff: 'Detayları gizle',
        showMoreLabel: 'Daha fazla göster',
    },
    'pt': {
        newMessage: 'Nova mensagem',
        toggleButtonOn: 'Mostrar detalhes',
        toggleButtonOff: 'Ocultar detalhes',
        showMoreLabel: 'Mostrar mais',
    },
    'pl': {
        newMessage: 'Nowa wiadomość',
        toggleButtonOn: 'Pokaż szczegóły',
        toggleButtonOff: 'Ukryj szczegóły',
        showMoreLabel: 'Pokaż więcej',
    },
    'pt-BR': {
        newMessage: 'Nova mensagem',
        toggleButtonOn: 'Mostrar detalhes',
        toggleButtonOff: 'Ocultar detalhes',
        showMoreLabel: 'Mostrar mais',
    }
};

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;border:none}.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;width:20%}.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{min-width:50%}.pn-marketweb-table .actions .button-wrapper pn-button.toggle-widget{min-width:30%}.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;flex-direction:column}}@media screen and (max-width: 768px){.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, "icon-only": btn.iconOnly, arialabel: btn.content, "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: '950fd9ad38ecc50412dfb2df76f688974bf64ddf', language: this.language }, h("div", { key: '7b3f92c37b733086cbb7e856afaf29a8b8e6f5e7', class: 'pn-marketweb-table' }, h("div", { key: '30fbecba91a38f48ed4e73f8b830ea761b15be23', role: 'region', "aria-labelledby": this.mainHeading ? headingId : undefined }, h("div", { key: '54e70278aa15e18917d9f14655dd79deb3c7ed7b', class: 'heading-section' }, h("div", { key: 'b1c4067f96442c00a1a95cef60b9e0bd77805506', class: 'heading-wrapper' }, this.mainHeading && (h(HeadingTag, { key: '9b6e742f06dfdc830702489248fdff87e8795217', level: this.mainHeadingLevel, cssClass: 'main-heading', id: headingId }, this.mainHeading)), this.preamble && (h("div", { key: 'cb94134690458850ee2e79a79cec5a9c7d11d0aa', class: "preamble-section" }, this.preamble)))), this._rows.length > 0 && (h("table", { key: '72714b2a74f4de7bbf35db41f2eca9c7223acc6d', class: 'pn-marketweb-table__table', "aria-labelledby": this.mainHeading ? `${tableId}-main-heading` : undefined }, this._headers && (h("thead", { key: '228695887f5852747c699ece16fe33d5c3586f8a', class: this.showHeadersInCells ? 'sr-only' : undefined }, h("tr", { key: 'a63ca166aacc8632b17a1b8ff65407290e843246' }, this._rows.some((row) => row.imageUrl) && this.imageColAriaHeader && (h("th", { key: '9c10a0a04134e63653816a5bf5f0e102d917bada', 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: '77678ed9f13b256f031c1485da24d2524e2eafeb', scope: 'col', class: 'sr-only' }, this.ctaColAriaHeader))))), h("tbody", { key: 'ee6bc0563ea7220c433b34b9c86e9ece61a7e765', class: "pn-marketweb-table__table-body" }, this._rows.slice(0, this.shipmentCount).map((row, rowIndex) => (h("tr", { key: rowIndex, class: `cell-row ${row.hasNewMessages ? "row-new-message" : ''}` }, 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: 'f67de7b07bc7641337dbe12275d70ae7bf6c95a2', class: "pn-market-table__show-more-wrapper" }, h("pn-button", { key: 'e4db3a7b5cf499afb6a064621d003cb305555090', 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