@salla.sa/twilight-components 2.14.252 → 2.14.253

package/dist/components/salla-filters.js

@@ -198,7 +198,7 @@ const SallaFilters$1 = /*@__PURE__*/ proxyCustomElement(class SallaFilters exten
     }
     render() {
         var _a, _b;
-        return h(Host, { key: 'd62d9a867f140a911cb5da11a1034511fd230745' }, (_a = this.filters) === null || _a === void 0 ? void 0 :
+        return h(Host, { key: '54a625522588215230f1eb5a3ca94b8280b18040' }, (_a = this.filters) === null || _a === void 0 ? void 0 :
             _a.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
                     this.handleOptionChange(event, option, value);
                 } })), ((_b = this.filters) === null || _b === void 0 ? void 0 : _b.length) ? h("div", { class: "s-filters-footer" }, h("salla-button", { color: 'gray', fill: 'outline', onClick: () => this.resetFilters() }, this.reset)) : '');

package/dist/components/salla-gifting.js

@@ -473,7 +473,7 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
     render() {
         var _a, _b, _c, _d, _e, _f;
         return [
-            h("div", { key: 'c946de2320468eb5255a70c7c8a84e5ab6a63e78' }, h("salla-list-tile", { key: '21bcf5ab764ebfd611ea7824a38f8caae8f898ce', class: this.generateClass() }, h("div", { key: '19ecc6aecb02cb128b58f671052521a3b189f37b', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '42f82385ffab67355d96a46151b42789b19b2067' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '23b043faab9af7fc03792cebf47210f9d6e0f3e4', slot: "subtitle" }, h("div", { key: '8f5cac03e285c4c71be3752466f52a71bd4988e0' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '9c044b5024f577c472a15efd4d4b659c173c568c', slot: "action" }, h("salla-button", { key: 'a5417a8f0cec51d60336fbde15fdcd1a8c6f9d69', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '48145d9b6bd9b6c5a5a2659418232e4965e6dbc2', name: "widget-btn-content" }, h("div", { key: 'aeef35cf4109637925b078e17e903edd0ce70927', class: "s-gifting-widget-action-content" }, h("span", { key: '754b360efdceb67915479cf6e6c883465c8b5e2e', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '88f649218568d29a89fed9edf4d6aaa40fa42ec4' }, this.sectionBtnText)))))), h("salla-modal", { key: '3bea66bbd3f457e38988d3c183f8ad83b2c7df7e', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '42e5c6cdaf2fd571ddf8fb2f6141accccde51e89', slot: "loading" }, h("div", { key: 'ee8b8364c5b38c5ba8d532a07ac1c31820efc29e', class: "s-gifting-skeleton" }, h("div", { key: '9960c5aebb147ba283671cb29d03ac607cf0f6ac', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'b82710e9a43c1a3baafa1991b5fbf39ce0c99ec7', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: 'cc83fbf17e57659b730d65bed24d638c48f7809b', class: "s-gifting-modal-title" }, h("div", { key: '6a015dd452aba397f3ecaefdec963a2e9fe2319f', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '6936c7630c0c5b8bea715355eefdbd11184bf4f0', height: '15px', width: '150px' })))), h("div", { key: '7c97b72b75c9748f9f33875819e91f60427cee37', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '2f568995835b1435e92d4a899e6d02308f5e5ffa', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'c3d870402e2b801430a8dac6987244b8202a762d', height: '230px' }), h("salla-skeleton", { key: 'f5fe5b687fa298467f61ff5160b7bad00f5c27b9', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'b2aafc949eb7652665545bfb47e306b9231fc10b', height: '30px' }), h("salla-skeleton", { key: 'ec48b8ea264a40f6808967acf1f4035bb78389ee', height: '40px' })))), h("slot", { key: '9c311e1c1a84e16df9cb14bf423520367889aa1a', name: "header" }), !!this.hasError ?
+            h("div", { key: 'd16cc7f7023bea25db35841e89affadc64c07750' }, h("salla-list-tile", { key: 'a0bacbee0a60998d7b2b6a04de43e0d840017e8e', class: this.generateClass() }, h("div", { key: 'b23da8bd5bc1c60ee6c9a755b62e398b36900d5d', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '87ed11d782fbfb07cf06bd2985d041c28f76f51d' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'f8894e33e53dd1ed91c0649bfd88962c798cf8c2', slot: "subtitle" }, h("div", { key: '275a03acbd38cd916d86e852affea21c501c0da5' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '45fa9404463409d35fd24b25c0ae650a4679a939', slot: "action" }, h("salla-button", { key: '5c6e5c9d0357721961b0f25139126ad79a8ca099', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '2a1fb3728692233a9cf87bd0d632610ad020650d', name: "widget-btn-content" }, h("div", { key: '4b7fd08f8f4a35b6d74f63e0547aaf92823ca0f0', class: "s-gifting-widget-action-content" }, h("span", { key: 'b6e15c75159f3485330af5f8fdd247c8dc9c1ce1', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '574c99709d0ecbe73deeed07664951b421976d22' }, this.sectionBtnText)))))), h("salla-modal", { key: '3a73e664ffa20c58792eb1c7865b903fbf5f38f1', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: 'eb8b915f53edfd3e7255a6e59a204e5120b56b47', slot: "loading" }, h("div", { key: '1bb51e9f935b10cac4b816bfc062999b16c984c7', class: "s-gifting-skeleton" }, h("div", { key: '4d050d592dbdef6ff4921d2937dedab1ae6d546c', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '00fa0ba8cd77422bab5ef5c174436843863ffa36', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '11f5e666e3cd59ee0673269edb1120255e36b973', class: "s-gifting-modal-title" }, h("div", { key: 'ef4d1fb59c4f9711ddf923118692d7a302cd0ab9', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '6d9cf1bf0c9e4df1590e0a575b83fb133482a9b1', height: '15px', width: '150px' })))), h("div", { key: 'f20ac67cfc4ab4f42838906418f5102c6cac01d3', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: 'e5cbd9d820468d8233bd13991878741724b52723', height: '10px', width: '150px' }), h("salla-skeleton", { key: '511b9321272203f98520339ac67408e2b11bd7c7', height: '230px' }), h("salla-skeleton", { key: 'b929ad683b8302d29a09a749e603dead646606db', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'bb485d3ccb8dbd35bfe9faca03b1e9fbfa8a67e3', height: '30px' }), h("salla-skeleton", { key: 'c2591d3c074ce82e7047807ed8560c914e99bba5', height: '40px' })))), h("slot", { key: '144dbbe14bc130217c63089aff8cccd1a6739850', name: "header" }), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
                 :
                     [
@@ -491,7 +491,7 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.country']) : ''), h("div", { class: this.errors && this.errors['receiver.city_id'] ? "s-form-group s-form-has-error anime-item opacity-0" : "s-form-group anime-item opacity-0" }, h("label", { class: "s-form-label" }, this.receiverCityFieldLabel), h("select", { name: "city", class: "s-form-control", onChange: (event) => this.handleReceiverCity(event), disabled: this.loadingCities }, h("option", { value: "", selected: true }, this.loadingCities ? salla.lang.get('common.elements.loading') : this.selectCity), (_f = (_e = this.gift) === null || _e === void 0 ? void 0 : _e.cities) === null || _f === void 0 ? void 0 :
                                 _f.map((city) => (h("option", { value: city.id }, city.name)))), this.errors && this.errors['receiver.city_id'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), h("div", { class: "s-gifting-info anime-item opacity-0" }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo))), !this.physicalProducts && h("div", { class: "anime-item opacity-0" }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: "s-gifting-step-two-footer anime-item opacity-0" }, h("a", { href: "#!", innerHTML: IconArrowLeft, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: 'c76232ee9588a3ae603b39b0ea994afd9ac6e3fe', name: "footer" })))
+                    ], h("slot", { key: 'd20dc2762318510b53404ece4cd5cdef91bd8099', name: "footer" })))
         ];
     }
     static get style() { return sallaGiftingCss; }

package/dist/components/salla-list-tile2.js

@@ -25,7 +25,7 @@ const SallaListTile = /*@__PURE__*/ proxyCustomElement(class SallaListTile exten
         };
     }
     render() {
-        return (h(Host, { key: 'bb33776d01406ff1e04bbdc741312f1a17ac3b7b' }, h("a", { key: '386b417c954bf4b2bac34e40d9bae19db7f61ec3', class: this.generateClass(), href: this.href || "#", target: this.target, "aria-label": "List Tile Link" }, h("div", { key: 'cbcd8c6f92a4cbe7afbd8797c36ae6f529abed1c', class: "s-list-tile-item-icon" }, h("slot", { key: 'bff76fdb467b2491f0c3b40bd7f475eda23fa9c8', name: 'icon' })), h("div", { key: 'c80e7c032abedea8d5929d8bb36a642336724fe1', class: "s-list-tile-item-content" }, h("div", { key: '2bea0273bb4c012e0f9f7ee948b14bc9ea8afc2a', class: "s-list-tile-item-title" }, h("slot", { key: '60c872b9ec9b369ba65452abad7860b3ba6ba640', name: 'title' })), h("div", { key: 'fbb1b6e49284c74f2933f056aa16fcbc25526703', class: "s-list-tile-item-subtitle" }, h("slot", { key: '5ad1bba1b71db13d4deb594ccb0f5898f24d2f23', name: "subtitle" }))), h("div", { key: '96358bf7ed34907a799efd8c6fb2caae6ca02f43', class: "s-list-tile-item-action" }, h("slot", { key: '8d496724103f0c3959845c8f5d4e662a3095c09e', name: 'action' })))));
+        return (h(Host, { key: 'ba44695aed1223972f89af7c586a40930b02bf2c' }, h("a", { key: '07372f90536259e785765fd52518d662da064310', class: this.generateClass(), href: this.href || "#", target: this.target, "aria-label": "List Tile Link" }, h("div", { key: '1146861c80badb189b2cee76c1641b6b24cdc81f', class: "s-list-tile-item-icon" }, h("slot", { key: 'e3f28cb3fc224a11345f79dbcc63abda6a5749f2', name: 'icon' })), h("div", { key: '2538211d32d19b14feb87324499402fa86591734', class: "s-list-tile-item-content" }, h("div", { key: 'c099dbf9985c97cf7580ae155f12310033f82d94', class: "s-list-tile-item-title" }, h("slot", { key: 'cbd58b99730b27cc90b2897a82049a0b132a68aa', name: 'title' })), h("div", { key: '9a5d9bde89507382c84910da72baac5b18a0180d', class: "s-list-tile-item-subtitle" }, h("slot", { key: 'b0c042dfece6f5b337cc32892dd10bd4f7705ce0', name: "subtitle" }))), h("div", { key: '500a9175dd419a186e4d8e76d2578183b70d9d88', class: "s-list-tile-item-action" }, h("slot", { key: '6b8eaf7115a0304f7e50aafe251aec0325146a80', name: 'action' })))));
     }
     static get style() { return sallaListTileCss; }
 }, [4, "salla-list-tile", {

package/dist/components/salla-loading2.js

@@ -27,7 +27,7 @@ const SallaLoading = /*@__PURE__*/ proxyCustomElement(class SallaLoading extends
         this.bgColor = "#e5e7eb";
     }
     render() {
-        return (h(Host, { key: '43f0680ce1f04ebda7083a4e15e69db9f19eea8f', class: "s-loading-container" }, h("svg", { key: '1b10899828e6b40f9a4535a6c5748382d2235382', "aria-hidden": "true", style: { width: `${this.size}px`, height: `${this.size}px`, fill: this.color, color: this.bgColor }, class: "s-loading", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '2866a19de0250199769271535cfa84531241507a', d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), h("path", { key: '8dd072bcfbca9299d4a9479fc00666bf174b48aa', d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" }))));
+        return (h(Host, { key: '8320fc3660a218e25417a93bf887971c5e8419c3', class: "s-loading-container" }, h("svg", { key: 'b70926bc9f4735a041bc15941f3455f739ca92ca', "aria-hidden": "true", style: { width: `${this.size}px`, height: `${this.size}px`, fill: this.color, color: this.bgColor }, class: "s-loading", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '08022da39248d500da894209a321feda18f4c1ac', d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), h("path", { key: 'df3d357458fd338246941a78993ffe8cf06f0d8b', d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" }))));
     }
     static get style() { return sallaLoadingCss; }
 }, [0, "salla-loading", {

package/dist/components/salla-localization-modal.js

@@ -114,7 +114,7 @@ const SallaLocalizationModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoc
         });
     }
     render() {
-        return (h("salla-modal", { key: '67470e126151fb1cfc764ce3c0d986199b5a895e', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: '28c41dc75e36e960cfcf0b8224057597be2eb7cf', slot: 'loading' }, h("div", { key: '96f60449d85f78c616dbda0aa56e77c4cb711859', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: 'eb4258f0847b2fe4da22e9709b7695014dd7be72', width: '25%', height: '15px' }), h("div", { key: 'f04521fcd25728b821c1fe60cce50ce441856ed4', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '6df2da90a26b323fe8e4cf82487527bb1866c788', width: '25%', height: '15px' }), h("div", { key: 'b3889bbd2624b4337d7b7dfafca9d5fef39d2dc3', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: 'b03df28e89f3096b24af46c635dd926e39fc9cf5', height: '40px', width: '100%' }))), !!this.hasError ?
+        return (h("salla-modal", { key: '7217465dd0a549765d84237a79a3d40d09b8ba19', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: '1c7d641df3d795578b8f703deddd2deab0a0f0f3', slot: 'loading' }, h("div", { key: '9f3f99f0cb3fc0edf69a0b5672c985f037f77e99', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: '744fd8f82a4675205a6f5fe0ed7f41ecfff73286', width: '25%', height: '15px' }), h("div", { key: '615e09c738ff315c72e4b46f0a97925b6ba43121', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '1d968a79a37d4012a9eef552bcd4f93006abcbe4', width: '25%', height: '15px' }), h("div", { key: '3a64d7c5f038f681ee58a457ba42e2ad70bf3f06', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '696cc5d9dcd7c9dd1f4a17f7bf904c836595ddcf', height: '40px', width: '100%' }))), !!this.hasError ?
             h("salla-placeholder", { alignment: "center" }, h("span", { slot: "description" }, this.errorMessage)) :
             h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
                 h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, salla.lang.get('common.titles.language')), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?

package/dist/components/salla-loyalty-prize-item.js

@@ -15,7 +15,7 @@ const SallaLoyaltyPrizeItem$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoya
         this.prizeItemSelected.emit(this.item);
     }
     render() {
-        return (h(Host, { key: '601dbcf73e68678eecc912c14c2b1be612a78551' }, h("div", { key: '074f8b4cb736bfabd5885d9df77bf74e7c4829a1', onClick: this.onPrizeItemClick.bind(this) }, h("img", { key: '4bec672992f7e998bde639295831a5c9ad5f5088', class: "s-loyalty-prize-item-image", src: this.item.image, alt: this.item.name }), h("div", { key: 'c8f858a7f406fe8e9123c57df627a4b6a2cbd719', class: "s-loyalty-prize-item-title" }, this.item.name), h("div", { key: '81b954aa730e07c7f32ee538692581dede3543db', class: "s-loyalty-prize-item-subtitle" }, this.item.description), h("div", { key: 'b7baeada2da364fec6ee7bd606b595b1f652d8a8', class: "s-loyalty-prize-item-points" }, this.item.cost_points, " Points"))));
+        return (h(Host, { key: '5ca09a4202a344b0483bdfec61051430c6804143' }, h("div", { key: '685bab3cdebcc0ebb8899bf41af4864dc613835b', onClick: this.onPrizeItemClick.bind(this) }, h("img", { key: '412d27faaf4fdb3df213806613ce0ce362f86f63', class: "s-loyalty-prize-item-image", src: this.item.image, alt: this.item.name }), h("div", { key: '9de2b85059c3db4cf750303e549938a577995d92', class: "s-loyalty-prize-item-title" }, this.item.name), h("div", { key: '9ecf6845d0edf53937476a8bebfc36372ab1b4d9', class: "s-loyalty-prize-item-subtitle" }, this.item.description), h("div", { key: '0c5f1cd8d22bc90178063c06eaf32bbac9f167ff', class: "s-loyalty-prize-item-points" }, this.item.cost_points, " Points"))));
     }
     static get style() { return sallaLoyaltyPrizeItemCss; }
 }, [0, "salla-loyalty-prize-item", {

package/dist/components/salla-loyalty-program.js

@@ -80,7 +80,7 @@ const SallaWalletTable = /*@__PURE__*/ proxyCustomElement(class SallaWalletTable
         }
     }
     render() {
-        return (h(Host, { key: '985386d18096b99ef6114a6e21363900c5dab374' }, h("div", { key: '67bb4fceebc5ef047cd3b0ee5b94297e4c9d9d17' }, this.isLoadingLoyalty ? (h("salla-loading", null)) : (h("div", null, this.loyaltyPointsArray.length > 0 ? (h("div", null, h("table", { class: "s-loyalty-program-table" }, h("thead", { class: "s-loyalty-program-table-head" }, h("tr", { class: "s-loyalty-program-table-head-tr" }, h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.points')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.expiry_date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.note')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.status')))), h("tbody", { class: "s-loyalty-program-table-tbody" }, this.loyaltyPointsArray.map(point => (h("tr", { class: "s-loyalty-program-table-tbody-tr" }, h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, (point === null || point === void 0 ? void 0 : point.type) === 'plus' ? '+' : '', (point === null || point === void 0 ? void 0 : point.points) || '', " ", salla.lang.get('pages.loyalty_program.point')), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate((point === null || point === void 0 ? void 0 : point.created_at) ? Number(point.created_at) * 1000 : undefined)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point === null || point === void 0 ? void 0 : point.points_expire_date)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point === null || point === void 0 ? void 0 : point.key)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point === null || point === void 0 ? void 0 : point.status_key))))))), h("div", { class: "s-infinite-scroll-wrapper" }, !!this.nextPageUrlLoyalty && (h("salla-button", { onClick: this.handleClick, loading: this.isLoadingLoyalty }, salla.lang.get('common.elements.load_more')))))) : (h("div", null, h("div", { class: "s-loyalty-program-table-empty-state" }, h("span", { innerHTML: loyaltyProgramIcon }), h("div", { class: "s-loyalty-program-table-placeholder-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_title')), h("div", { class: "s-loyalty-program-table-placeholder-sub-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_sub_title'))))))))));
+        return (h(Host, { key: '300d58186edf747b1dd6dc7a1d67c0c93606aa5e' }, h("div", { key: '98e3a15104e813c6798ccac75fbd1bb163735c54' }, this.isLoadingLoyalty ? (h("salla-loading", null)) : (h("div", null, this.loyaltyPointsArray.length > 0 ? (h("div", null, h("table", { class: "s-loyalty-program-table" }, h("thead", { class: "s-loyalty-program-table-head" }, h("tr", { class: "s-loyalty-program-table-head-tr" }, h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.points')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('pages.wallet.expiry_date')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.note')), h("th", { scope: "col", class: "s-loyalty-program-table-head-tr-th" }, salla.lang.get('common.elements.status')))), h("tbody", { class: "s-loyalty-program-table-tbody" }, this.loyaltyPointsArray.map(point => (h("tr", { class: "s-loyalty-program-table-tbody-tr" }, h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, (point === null || point === void 0 ? void 0 : point.type) === 'plus' ? '+' : '', (point === null || point === void 0 ? void 0 : point.points) || '', " ", salla.lang.get('pages.loyalty_program.point')), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate((point === null || point === void 0 ? void 0 : point.created_at) ? Number(point.created_at) * 1000 : undefined)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, formatDate(point === null || point === void 0 ? void 0 : point.points_expire_date)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point === null || point === void 0 ? void 0 : point.key)), h("td", { class: "s-loyalty-program-table-tbody-tr-td" }, translateKey(point === null || point === void 0 ? void 0 : point.status_key))))))), h("div", { class: "s-infinite-scroll-wrapper" }, !!this.nextPageUrlLoyalty && (h("salla-button", { onClick: this.handleClick, loading: this.isLoadingLoyalty }, salla.lang.get('common.elements.load_more')))))) : (h("div", null, h("div", { class: "s-loyalty-program-table-empty-state" }, h("span", { innerHTML: loyaltyProgramIcon }), h("div", { class: "s-loyalty-program-table-placeholder-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_title')), h("div", { class: "s-loyalty-program-table-placeholder-sub-title" }, salla.lang.get('pages.loyalty_program.no_loyality_points_sub_title'))))))))));
     }
     static get style() { return sallaLoyaltyProgramCss; }
 }, [0, "salla-loyalty-program", {

package/dist/components/salla-maintenance-alert.js

@@ -21,7 +21,7 @@ const SallaMaintenanceAlert$1 = /*@__PURE__*/ proxyCustomElement(class SallaMain
         this.host.style.display = 'none';
     }
     render() {
-        return (h(Host, { key: 'bb84e7b67aa436101f54d2481324f8b08000b730', class: "s-maintenance-alert-wrapper" }, h("button", { key: 'a867faeace9d0461bbfa5f39976e9489d77b575b', class: "s-maintenance-alert-close", innerHTML: Cancel, onClick: () => this.closeAlert() }), h("div", { key: 'b89fc2df3ea8e9fd5859fda5a115a52cbc130845', class: "s-maintenance-alert-content" }, h("div", { key: '46962d44e46f74169b79b0bf39306a1548d17d11', class: "s-maintenance-alert-container" }, h("div", { key: 'fbc673955b67d5c849db838325232e9179857df2', class: "s-maintenance-alert-icon" }, h("img", { key: '5b7a61e2eacb2d182848ce0a1e7dfbfb60f3427e', src: salla.url.cdn('images/alert.png'), alt: "Alert" })), h("div", { key: 'af97185088d3a3a20d8f14ec56b9210de2b12cc5', class: "s-maintenance-alert-text" }, h("h2", { key: '893237b5a906a6b9cd636569f04ecb5247e58462' }, this.title), h("p", { key: '91662aa1261a2da8c63e16b76585eb39030a8dc0' }, this.message))), h("div", { key: '54468980a4a80d51ecdc3a10054f33ff08838444' }, h("a", { key: 'a58e79ab80341ac7e0daf72fed352bfcc703d3f5', class: "s-maintenance-alert-btn", href: salla.config.get('maintenance_details.button_url') }, this.buttonTitle)))));
+        return (h(Host, { key: 'fa4c58fe7ee2db9123f5ea0e481b9c974df489d0', class: "s-maintenance-alert-wrapper" }, h("button", { key: '9c1df10f48abd76cef72163cca33614a1b2a286e', class: "s-maintenance-alert-close", innerHTML: Cancel, onClick: () => this.closeAlert() }), h("div", { key: '48744b89d954927eb079ad9533cd52bc6149dbe8', class: "s-maintenance-alert-content" }, h("div", { key: 'a0df971610bbb0b6dba99955c40a89760f8b6f35', class: "s-maintenance-alert-container" }, h("div", { key: 'b15d5b9ba9d6e327cbd9706ba03e66459f3d752e', class: "s-maintenance-alert-icon" }, h("img", { key: '27a34719b58bc0afd30e55eeb51549f7ee468ac9', src: salla.url.cdn('images/alert.png'), alt: "Alert" })), h("div", { key: 'c9373d6db047da4d678005fe2397aa0ad14345e0', class: "s-maintenance-alert-text" }, h("h2", { key: '2202bc87b20c2d864fac8d925f7585b19e50a9d2' }, this.title), h("p", { key: 'cd2c5e6d2ef3098cf654357dca2031a494d4926a' }, this.message))), h("div", { key: '60983d470feb85bc72e40a37cb769bcf3121f2c9' }, h("a", { key: 'ac397f2c66c4e1e677200fb711d1c4b858d91f6c', class: "s-maintenance-alert-btn", href: salla.config.get('maintenance_details.button_url') }, this.buttonTitle)))));
     }
     componentDidLoad() {
         //auto-hide the alert if close button is clicked before one hour

package/dist/components/salla-map2.js

@@ -708,11 +708,11 @@ const SallaMap = /*@__PURE__*/ proxyCustomElement(class SallaMap extends HTMLEle
     }
     // render
     render() {
-        return (h(Host, { key: '70b1051e2fdbdea1e7306eb4e30a025747c6c87f', class: "s-map-wrapper" }, h("salla-modal", { key: 'e1c86a72545f00053789f63ba5016cc57ad1f160', class: "s-map-modal-wrapper", noPadding: true, ref: modal => {
+        return (h(Host, { key: 'afb065dd5c9db0994f1cfaf1562db28425ffd65a', class: "s-map-wrapper" }, h("salla-modal", { key: 'adbf3aec5fe3a53c08a4310dfa5fc3593f88b242', class: "s-map-modal-wrapper", noPadding: true, ref: modal => {
                 this.locationModal = modal;
-            } }, this.getLocationModal()), h("slot", { key: 'ee28378c5b30cc8c93f55a74b4b94fe37a215aad', name: "button" }, h("salla-button", { key: '048d58a8537707a11c523ed6efbe255ff255927d', onClick: () => {
+            } }, this.getLocationModal()), h("slot", { key: '8469c362605c896c27e6c9453c80e1455e681588', name: "button" }, h("salla-button", { key: 'baac0f4417a36ce4f6c8f02a6667752f5d93ebd1', onClick: () => {
                 this.open();
-            }, color: "primary", class: "s-map-location-button" }, h("span", { key: 'c8653c040b9c1b3d7ac4d022606faec82e79568c', class: "s-map-location-icon", innerHTML: this.formattedAddress ? Edit : Location }), this.formattedAddress ? (h("div", null, this.locateButtonEdit, " | ", this.formatAddress(this.formattedAddress))) : (this.locateButtonTitle))), h("input", { key: 'd76d0ce87802ed7b86fd5d2e0a3eef531087d597', class: "s-hidden", name: this.name, required: this.required, value: this.getLatLng(), ref: color => this.mapInput = color })));
+            }, color: "primary", class: "s-map-location-button" }, h("span", { key: 'bea891a7ac14bcb50704133e9c1eb8b3c34a8377', class: "s-map-location-icon", innerHTML: this.formattedAddress ? Edit : Location }), this.formattedAddress ? (h("div", null, this.locateButtonEdit, " | ", this.formatAddress(this.formattedAddress))) : (this.locateButtonTitle))), h("input", { key: 'dbc5226461f9ad7a9501bec12e8bad794dec00e6', class: "s-hidden", name: this.name, required: this.required, value: this.getLatLng(), ref: color => this.mapInput = color })));
     }
     get host() { return this; }
     static get style() { return sallaMapCss; }

package/dist/components/salla-notification-item2.js

@@ -11,7 +11,7 @@ const SallaNotificationItem = /*@__PURE__*/ proxyCustomElement(class SallaNotifi
         this.__registerHost();
     }
     render() {
-        return h("a", { key: 'f4818ac9b7dc2573dd1ac8aa31aabc82454ea439', href: this.notification.url, class: { "s-notifications-item": true, "s-notifications-item-shadow": true, "s-notifications-item-read": !this.notification.is_new } }, h("span", { key: '3766a4eb835408bf293054be3e04a561e1510728', class: "s-notifications-item-icon" }, h("i", { key: 'e9b1e4a18f22e765053b7d62f83a4af6e426bd47', class: { 's-notifications-item-icon sicon-bell-ring': true, 's-notifications-item-icon-new': this.notification.is_new } })), h("div", { key: '2005bcf68b61bb0aa5606480f703e4ee4cfbd415', class: "s-notifications-item-content" }, h("div", { key: 'a60fdc96431899c0c3183512ea81477f52e550d0', class: "s-notifications-item-content-leading" }, h("h4", { key: 'fb0eb1efe08440a1e2c12dc1af263adba0413d2b' }, this.notification.title), h("p", { key: 'c32790ad29bd267323d86e5c3abdec1ab75c09b2' }, this.notification.sub_title)), h("span", { key: 'e8fbfea5e91fe7d16c489a285502eaab08b16fd5', class: "s-notifications-item-content-trailing" }, h("i", { key: 'ea9fb9cf6ac2f9c84cde152fa1381e884971cba4', class: "sicon-time s-notifications-item-content-trailing-icon" }), h("span", { key: '1fb25f1463210c8ab467dff8aea22d9c4510301c' }, this.notification.date))));
+        return h("a", { key: '15701825f2d0bb5b4bc21cf20114eae79af6b9aa', href: this.notification.url, class: { "s-notifications-item": true, "s-notifications-item-shadow": true, "s-notifications-item-read": !this.notification.is_new } }, h("span", { key: 'f87fba9d640a5c6cab81abe2d7537c2c89ee8857', class: "s-notifications-item-icon" }, h("i", { key: '52590f17aacb20f87768a0dcc699e15303ca0e81', class: { 's-notifications-item-icon sicon-bell-ring': true, 's-notifications-item-icon-new': this.notification.is_new } })), h("div", { key: '489bdb71b1caaa202604facffe47ce6a6825355b', class: "s-notifications-item-content" }, h("div", { key: '53a0e1e2f2f1be650567c0b1b9cc779779bc2cdc', class: "s-notifications-item-content-leading" }, h("h4", { key: 'b7f6fd64ad3212d0810a4eb7ab0a33d4294498c7' }, this.notification.title), h("p", { key: '3774bc0d5c619d73f97466283d28ed5204e9abe4' }, this.notification.sub_title)), h("span", { key: '25c70649e341c3e7c659dec48e986945088b4dfa', class: "s-notifications-item-content-trailing" }, h("i", { key: 'eaca7d3e4b8254b5eb8ea7e864c5afac8529f019', class: "sicon-time s-notifications-item-content-trailing-icon" }), h("span", { key: 'de695990f5d2b6e5a131373d863f1d2e1e002613' }, this.notification.date))));
     }
     static get style() { return sallaNotificationsCss; }
 }, [0, "salla-notification-item", {

package/dist/components/salla-offer-modal.js

@@ -196,7 +196,7 @@ const SallaOfferModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaOfferModal
     //       '</div>';
     //   }
     render() {
-        return h("salla-modal", { key: '6e07bfc157a0864dd7c6e33d8e423eb0a41517fa', "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true, class: `s-offer-modal-type-${this.offer_type ? this.offer_type : ''}` }, h("div", { key: 'a1efb4161fe0832c55d84ed28d6210ebbf475a30', slot: 'loading' }, h("div", { key: '53528287f8260ff9ee38865d24f2f62e3a473aae', class: "s-offer-modal-skeleton" }, h("div", { key: '058875363e3102e44df48e42b77ba1e5136de8cd', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: '9db5f4a78212728d91ca6c326df0dce74a48a8e6', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: '9a451dc9b0ad073137500482bcad5eded1a15e19', height: '15px', width: '50%' }), h("salla-skeleton", { key: '64765b0feb8542634a498bec392f89c9ea84d87a', height: '10px', width: '30%' })), h("div", { key: 'dfe4c3f1b5492c16088c6736a4027e7ee494c3f6', class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-offer-modal-skeleton-item-title" }, h("salla-skeleton", { height: '15px', width: '100%' })), h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, h("salla-skeleton", { height: '9px', width: '50%' }), h("div", { innerHTML: Cart2 }))))), h("div", { key: '6b0d3c7ce04b6da6b48e60552084e6cd13e86def', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: 'fb3e3c4993a0eef1a297150e978d66ba16b1091e', height: '15px', width: '50%' }), h("salla-skeleton", { key: 'ae1cb5284af4dbcf7b8a6e5b62cfe956fdfe2c5f', height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
+        return h("salla-modal", { key: '149806ab834f3595edaba08fa4ac7534559c86a0', "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true, class: `s-offer-modal-type-${this.offer_type ? this.offer_type : ''}` }, h("div", { key: '0b04b126cab3b3f2c96a18da4e99fde448ae3a7b', slot: 'loading' }, h("div", { key: '2bc798a2e279e732752a61870d2bbdb239156af1', class: "s-offer-modal-skeleton" }, h("div", { key: 'f25d33fa444b1b200b8ad1d1671485bc402ac32f', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: '3e9099101da88a0b0e7c1961dd191d9df92f6508', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: '913b23a9a46ca5c69a42672a09a922662c1587a8', height: '15px', width: '50%' }), h("salla-skeleton", { key: '8e8e1392609be37bb8a85e5d79f5f6a5511c5af8', height: '10px', width: '30%' })), h("div", { key: '994cd22730b3b8feefd9e8f6597875aa7954e6f7', class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-offer-modal-skeleton-item-title" }, h("salla-skeleton", { height: '15px', width: '100%' })), h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, h("salla-skeleton", { height: '9px', width: '50%' }), h("div", { innerHTML: Cart2 }))))), h("div", { key: '361299e616622895d48377f3d138d115d05a9fbc', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: '28cc38415de9bed705b5d2ca683031c50de47d94', height: '15px', width: '50%' }), h("salla-skeleton", { key: 'ef1935d0e8fccfbce3b9cf3a652c7c521539cf13', height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
             ? [h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), this.getOfferContent(), h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
                     h("p", { class: "s-offer-modal-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.formatted_date)
                     : '', h("label", { class: "s-offer-modal-remember-label" }, h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }), "\u00A0 ", salla.lang.get('common.elements.remember_my_choice'))),

package/dist/components/salla-order-details-multiple-bundle-product.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaOrderDetailsMultipleBundleProduct extends Components.SallaOrderDetailsMultipleBundleProduct, HTMLElement {}
+export const SallaOrderDetailsMultipleBundleProduct: {
+    prototype: SallaOrderDetailsMultipleBundleProduct;
+    new (): SallaOrderDetailsMultipleBundleProduct;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-order-details-multiple-bundle-product.js

@@ -0,0 +1,12 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { S as SallaproductDetailsMultipleBundleProduct, d as defineCustomElement$1 } from './salla-order-details-multiple-bundle-product2.js';
+
+const SallaOrderDetailsMultipleBundleProduct = SallaproductDetailsMultipleBundleProduct;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaOrderDetailsMultipleBundleProduct, defineCustomElement };
+//# sourceMappingURL=salla-order-details-multiple-bundle-product.js.map
+
+//# sourceMappingURL=salla-order-details-multiple-bundle-product.js.map

package/dist/components/salla-order-details-multiple-bundle-product.js.map

@@ -0,0 +1 @@
+{"file":"salla-order-details-multiple-bundle-product.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/salla-order-details-multiple-bundle-product2.js

@@ -0,0 +1,144 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$8 } from './salla-accordion2.js';
+import { d as defineCustomElement$7 } from './salla-accordion-body2.js';
+import { d as defineCustomElement$6 } from './salla-accordion-head2.js';
+import { d as defineCustomElement$5 } from './salla-button2.js';
+import { d as defineCustomElement$4 } from './salla-loading2.js';
+import { d as defineCustomElement$3 } from './salla-map2.js';
+import { d as defineCustomElement$2 } from './salla-modal2.js';
+import { d as defineCustomElement$1 } from './salla-order-details-options2.js';
+
+const sallaOrderDetailsMultipleBundleProductCss = "";
+
+const SallaproductDetailsMultipleBundleProduct = /*@__PURE__*/ proxyCustomElement(class SallaproductDetailsMultipleBundleProduct extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /** Placeholder image URL when product image is not available */
+        this.placeholderImage = salla.url.cdn('images/s-empty.png');
+    }
+    getProductImage() {
+        var _a;
+        if (!((_a = this.productDetails) === null || _a === void 0 ? void 0 : _a.image)) {
+            return this.placeholderImage;
+        }
+        // Handle both string and object types for image
+        if (typeof this.productDetails.image === 'string') {
+            return this.productDetails.image;
+        }
+        return (this.productDetails.image.url || this.placeholderImage || salla.url.cdn('images/s-empty.png'));
+    }
+    getProductImageAlt() {
+        var _a, _b, _c;
+        if (!((_a = this.productDetails) === null || _a === void 0 ? void 0 : _a.image) || typeof this.productDetails.image === 'string') {
+            return ((_b = this.productDetails) === null || _b === void 0 ? void 0 : _b.name) || '';
+        }
+        return this.productDetails.image.alt || ((_c = this.productDetails) === null || _c === void 0 ? void 0 : _c.name) || '';
+    }
+    getAccordionId() {
+        var _a;
+        return `accordion-${((_a = this.productDetails) === null || _a === void 0 ? void 0 : _a.id) || 'default'}`;
+    }
+    getAccordionKey() {
+        var _a;
+        return ((_a = this.productDetails) === null || _a === void 0 ? void 0 : _a.id) || 'default';
+    }
+    shouldBeCollapsible() {
+        var _a, _b;
+        if (this.collapsible !== undefined) {
+            return this.collapsible;
+        }
+        return ((_b = (_a = this.productDetails) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length) > 0;
+    }
+    renderProductPrice() {
+        if (!this.productDetails) {
+            return null;
+        }
+        const { is_on_sale, sale_price, regular_price, price } = this.productDetails;
+        if (is_on_sale && sale_price) {
+            return (h("div", null, h("span", { class: "s-order-details-product-price s-order-details-product-price-sale" }, h("span", { innerHTML: salla.money(sale_price) })), regular_price && (h("span", { class: "s-order-details-product-regular-price" }, h("span", { innerHTML: salla.money(regular_price) })))));
+        }
+        return (h("span", { class: "s-order-details-product-price" }, h("span", { innerHTML: salla.money(price) })));
+    }
+    renderOptions() {
+        var _a, _b;
+        if (!((_b = (_a = this.productDetails) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length)) {
+            return null;
+        }
+        return (h("salla-accordion-body", null, h("div", { class: "s-order-details-options" }, h("salla-order-details-options", { options: this.productDetails.options }))));
+    }
+    render() {
+        var _a, _b, _c;
+        if (!this.productDetails) {
+            return null;
+        }
+        const collapsibleState = this.shouldBeCollapsible();
+        return (h(Host, { class: "s-order-details-bundle-wrapper" }, h("salla-accordion", { key: this.getAccordionKey(), collapsed: false, bordered: true, collapsible: collapsibleState, id: this.getAccordionId(), size: "sm" }, h("salla-accordion-head", null, h("div", { class: "s-order-details-product" }, h("div", { class: "s-order-details-product-content" }, h("div", { class: "s-order-details-product-info" }, h("div", { class: "s-order-details-product-image" }, h("img", { src: this.getProductImage(), alt: this.getProductImageAlt() })), h("div", { class: "s-order-details-product-details" }, h("a", { href: ((_a = this.productDetails) === null || _a === void 0 ? void 0 : _a.url) || '#', class: "s-order-details-product-name" }, ((_b = this.productDetails) === null || _b === void 0 ? void 0 : _b.name) || ''), this.renderProductPrice(), ((_c = this.productDetails) === null || _c === void 0 ? void 0 : _c.quantity) && (h("span", { class: "s-order-details-product-quantity" }, "\u00D7", this.productDetails.quantity))))))), this.renderOptions())));
+    }
+    static get style() { return sallaOrderDetailsMultipleBundleProductCss; }
+}, [0, "salla-order-details-multiple-bundle-product", {
+        "productDetails": [16, "product-details"],
+        "collapsible": [4],
+        "placeholderImage": [1, "placeholder-image"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-order-details-multiple-bundle-product", "salla-accordion", "salla-accordion-body", "salla-accordion-head", "salla-button", "salla-loading", "salla-map", "salla-modal", "salla-order-details-options"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-order-details-multiple-bundle-product":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaproductDetailsMultipleBundleProduct);
+            }
+            break;
+        case "salla-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-accordion-body":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-accordion-head":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-order-details-options":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SallaproductDetailsMultipleBundleProduct as S, defineCustomElement as d };
+//# sourceMappingURL=salla-order-details-multiple-bundle-product2.js.map
+
+//# sourceMappingURL=salla-order-details-multiple-bundle-product2.js.map

package/dist/components/salla-order-details-multiple-bundle-product2.js.map

@@ -0,0 +1 @@
+{"file":"salla-order-details-multiple-bundle-product2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/salla-order-details/salla-order-details-multiple-bundle-product.scss?tag=salla-order-details-multiple-bundle-product","src/components/salla-order-details/salla-order-details-multiple-bundle-product.tsx"],"sourcesContent":["","import { Component, Host, h, Prop } from '@stencil/core';\nimport { OrderProduct } from './interfaces';\n\n/**\n * @salla/ui-components\n * The `salla-order-details-multiple-bundle-product` component renders a collapsible summary for an order multiple bundle product with optional options list.\n * It uses the salla-accordion component to provide collapsible functionality.\n */\n@Component({\n  tag: 'salla-order-details-multiple-bundle-product',\n  styleUrl: 'salla-order-details-multiple-bundle-product.scss',\n})\nexport class SallaproductDetailsMultipleBundleProduct {\n  /** The product data to display */\n  @Prop({ attribute: 'product-details' }) productDetails: OrderProduct;\n\n  /** Whether the accordion should be collapsible */\n  @Prop() collapsible?: boolean;\n\n  /** Placeholder image URL when product image is not available */\n  @Prop() placeholderImage: string = salla.url.cdn('images/s-empty.png');\n\n  private getProductImage(): string {\n    if (!this.productDetails?.image) {\n      return this.placeholderImage;\n    }\n\n    // Handle both string and object types for image\n    if (typeof this.productDetails.image === 'string') {\n      return this.productDetails.image;\n    }\n\n    return (\n      this.productDetails.image.url || this.placeholderImage || salla.url.cdn('images/s-empty.png')\n    );\n  }\n\n  private getProductImageAlt(): string {\n    if (!this.productDetails?.image || typeof this.productDetails.image === 'string') {\n      return this.productDetails?.name || '';\n    }\n\n    return this.productDetails.image.alt || this.productDetails?.name || '';\n  }\n\n  private getAccordionId(): string {\n    return `accordion-${this.productDetails?.id || 'default'}`;\n  }\n\n  private getAccordionKey(): string | number {\n    return this.productDetails?.id || 'default';\n  }\n\n  private shouldBeCollapsible(): boolean {\n    if (this.collapsible !== undefined) {\n      return this.collapsible;\n    }\n    return this.productDetails?.options?.length > 0;\n  }\n\n  private renderProductPrice() {\n    if (!this.productDetails) {\n      return null;\n    }\n\n    const { is_on_sale, sale_price, regular_price, price } = this.productDetails as any;\n\n    if (is_on_sale && sale_price) {\n      return (\n        <div>\n          <span class=\"s-order-details-product-price s-order-details-product-price-sale\">\n            <span innerHTML={salla.money(sale_price)}></span>\n          </span>\n          {regular_price && (\n            <span class=\"s-order-details-product-regular-price\">\n              <span innerHTML={salla.money(regular_price)}></span>\n            </span>\n          )}\n        </div>\n      );\n    }\n\n    return (\n      <span class=\"s-order-details-product-price\">\n        <span innerHTML={salla.money(price)}></span>\n      </span>\n    );\n  }\n\n  private renderOptions() {\n    if (!this.productDetails?.options?.length) {\n      return null;\n    }\n\n    return (\n      <salla-accordion-body>\n        <div class=\"s-order-details-options\">\n          <salla-order-details-options options={this.productDetails.options} />\n        </div>\n      </salla-accordion-body>\n    );\n  }\n\n  render() {\n    if (!this.productDetails) {\n      return null;\n    }\n\n    const collapsibleState = this.shouldBeCollapsible();\n\n    return (\n      <Host class=\"s-order-details-bundle-wrapper\">\n        <salla-accordion\n          key={this.getAccordionKey()}\n          collapsed={false}\n          bordered={true}\n          collapsible={collapsibleState}\n          id={this.getAccordionId()}\n          size=\"sm\"\n        >\n          <salla-accordion-head>\n            <div class=\"s-order-details-product\">\n              <div class=\"s-order-details-product-content\">\n                <div class=\"s-order-details-product-info\">\n                  <div class=\"s-order-details-product-image\">\n                    <img src={this.getProductImage()} alt={this.getProductImageAlt()} />\n                  </div>\n                  <div class=\"s-order-details-product-details\">\n                    <a href={this.productDetails?.url || '#'} class=\"s-order-details-product-name\">\n                      {this.productDetails?.name || ''}\n                    </a>\n                    {this.renderProductPrice()}\n                    {this.productDetails?.quantity && (\n                      <span class=\"s-order-details-product-quantity\">\n                        ×{this.productDetails.quantity}\n                      </span>\n                    )}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </salla-accordion-head>\n\n          {this.renderOptions()}\n        </salla-accordion>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/salla-order-details-options.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaOrderDetailsOptions extends Components.SallaOrderDetailsOptions, HTMLElement {}
+export const SallaOrderDetailsOptions: {
+    prototype: SallaOrderDetailsOptions;
+    new (): SallaOrderDetailsOptions;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/salla-order-details-options.js

@@ -0,0 +1,12 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { S as SallaOrderDetailsOptions$1, d as defineCustomElement$1 } from './salla-order-details-options2.js';
+
+const SallaOrderDetailsOptions = SallaOrderDetailsOptions$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaOrderDetailsOptions, defineCustomElement };
+//# sourceMappingURL=salla-order-details-options.js.map
+
+//# sourceMappingURL=salla-order-details-options.js.map

package/dist/components/salla-order-details-options.js.map

@@ -0,0 +1 @@
+{"file":"salla-order-details-options.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/salla-order-details-options2.js

@@ -0,0 +1,145 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './salla-button2.js';
+import { d as defineCustomElement$3 } from './salla-loading2.js';
+import { d as defineCustomElement$2 } from './salla-map2.js';
+import { d as defineCustomElement$1 } from './salla-modal2.js';
+
+var copyIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>swap-fill</title>
+<path d="M28 10.667h-2.667c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h2.667c0.735 0 1.333 0.597 1.333 1.333v13.333c0 0.736-0.599 1.333-1.333 1.333h-13.333c-0.735 0-1.333-0.597-1.333-1.333v-2.667c0-0.737-0.597-1.333-1.333-1.333s-1.333 0.596-1.333 1.333v2.667c0 2.205 1.795 4 4 4h13.333c2.205 0 4-1.795 4-4v-13.333c0-2.205-1.795-4-4-4zM21.333 17.333v-13.333c0-2.205-1.795-4-4-4h-13.333c-2.205 0-4 1.795-4 4v13.333c0 2.205 1.795 4 4 4h13.333c2.205 0 4-1.795 4-4zM2.667 17.333v-13.333c0-0.736 0.599-1.333 1.333-1.333h13.333c0.735 0 1.333 0.597 1.333 1.333v13.333c0 0.736-0.599 1.333-1.333 1.333h-13.333c-0.735 0-1.333-0.597-1.333-1.333z"></path>
+</svg>
+`;
+
+const sallaOrderDetailsOptionsCss = "";
+
+const SallaOrderDetailsOptions = /*@__PURE__*/ proxyCustomElement(class SallaOrderDetailsOptions extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /** Whether to show the options in a bordered container */
+        this.bordered = true;
+        /** Placeholder image URL when option image is not available */
+        this.placeholderImage = 'images/placeholder.png';
+        /** Parsed options data */
+        this.optionsData = [];
+    }
+    componentWillLoad() {
+        this.parseOptionsData();
+    }
+    componentWillUpdate() {
+        this.parseOptionsData();
+    }
+    parseOptionsData() {
+        if (!this.options) {
+            this.optionsData = [];
+            return;
+        }
+        if (typeof this.options === 'string') {
+            try {
+                this.optionsData = JSON.parse(this.options);
+            }
+            catch (e) {
+                // Invalid options JSON, fallback to empty array
+                this.optionsData = [];
+            }
+        }
+        else {
+            this.optionsData = Array.isArray(this.options) ? this.options : [];
+        }
+    }
+    renderOptionValue(option) {
+        // Handle image options
+        if (option.is_image) {
+            return (h("div", { class: "s-order-details-option-image-container" }, h("a", { href: option.value, target: "_blank" }, h("img", { class: "s-order-details-option-image", src: option.value || this.placeholderImage, alt: option.name }))));
+        }
+        // Handle color options
+        if (option.color) {
+            return (h("span", { title: option.value, class: "s-order-details-option-color-swatch", style: { backgroundColor: option.color } }));
+        }
+        // Handle file options
+        if (option.is_file) {
+            return (h("a", { href: option.value, target: "_blank", class: "s-order-details-option-file-link" }, "Attachments"));
+        }
+        // Handle color picker options
+        if (option.is_color_picker) {
+            return (h("div", { class: "s-order-details-option-color-picker" }, h("div", { class: "s-order-details-option-color-picker-content" }, h("span", { class: "s-order-details-option-color-picker-text" }, option.value), h("span", { class: "s-order-details-option-color-picker-swatch", style: { backgroundColor: option.value, width: '1rem' } })), h("salla-button", { onClick: e => this.copyToClipboard(e, option.value), shape: "link", class: "s-order-details-option-color-picker-button" }, h("span", { class: "s-order-details-option-color-copy-icon", innerHTML: copyIcon }))));
+        }
+        // Handle map options
+        if (option.is_map && option.latitude && option.longitude) {
+            return (h("salla-map", { id: `location_map_${option.id}`, class: `map_${option.id}`, zoom: 15, readonly: true, lat: option.latitude, lng: option.longitude }, h("div", { slot: "button" }, h("button", { type: "button", class: "s-order-details-option-map-button", onClick: () => this.openMap(option.id) }, "Show Location"))));
+        }
+        // Default text value
+        return (h("span", { class: "s-order-details-option-default-text" }, option.display_value || option.value));
+    }
+    copyToClipboard(event, content) {
+        event.preventDefault();
+        if (navigator.clipboard) {
+            navigator.clipboard.writeText(content);
+        }
+    }
+    openMap(optionId) {
+        const mapElement = document.querySelector(`salla-map.map_${optionId}`);
+        if (mapElement && mapElement.open) {
+            mapElement.open();
+        }
+    }
+    render() {
+        if (!this.optionsData.length) {
+            return null;
+        }
+        const containerClasses = this.bordered
+            ? 's-order-details-options-container'
+            : 's-order-details-options-container-borderless';
+        return (h(Host, { class: "s-order-details-options-wrapper" }, h("h2", { class: "s-order-details-options-title" }, salla.lang.get('pages.cart.item_options')), h("div", { class: containerClasses }, h("dl", { class: "s-order-details-options-list" }, this.optionsData.map(option => (h("div", { key: option.id, class: "s-order-details-options-item" }, h("dt", { class: "s-order-details-options-item-name" }, option.name, ":"), h("dd", { class: option.is_image
+                ? 's-order-details-options-item-value-image'
+                : 's-order-details-options-item-value-text' }, this.renderOptionValue(option)))))))));
+    }
+    static get style() { return sallaOrderDetailsOptionsCss; }
+}, [0, "salla-order-details-options", {
+        "options": [1],
+        "bordered": [4],
+        "placeholderImage": [1, "placeholder-image"],
+        "optionsData": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-order-details-options", "salla-button", "salla-loading", "salla-map", "salla-modal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-order-details-options":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaOrderDetailsOptions);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SallaOrderDetailsOptions as S, defineCustomElement as d };
+//# sourceMappingURL=salla-order-details-options2.js.map
+
+//# sourceMappingURL=salla-order-details-options2.js.map

package/dist/components/salla-order-details-options2.js.map

@@ -0,0 +1 @@
+{"file":"salla-order-details-options2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/salla-order-details/salla-order-details-options.scss?tag=salla-order-details-options","src/components/salla-order-details/salla-order-details-options.tsx"],"sourcesContent":["","import { Component, Host, h, Prop, State } from '@stencil/core';\nimport { ProductOption } from './interfaces';\nimport copyIcon from '../../assets/svg/swap-fill.svg';\n\n/**\n * @salla/ui-components\n * The `salla-order-details-options` component renders product options for order details.\n * It displays various types of options including colors, images, files, maps, and text values.\n */\n@Component({\n  tag: 'salla-order-details-options',\n  styleUrl: 'salla-order-details-options.scss',\n})\nexport class SallaOrderDetailsOptions {\n  /** Product options to display */\n  @Prop() options?: ProductOption[] | string;\n\n  /** Whether to show the options in a bordered container */\n  @Prop() bordered?: boolean = true;\n\n  /** Placeholder image URL when option image is not available */\n  @Prop() placeholderImage: string = 'images/placeholder.png';\n\n  /** Parsed options data */\n  @State() optionsData: ProductOption[] = [];\n\n  componentWillLoad() {\n    this.parseOptionsData();\n  }\n\n  componentWillUpdate() {\n    this.parseOptionsData();\n  }\n\n  private parseOptionsData() {\n    if (!this.options) {\n      this.optionsData = [];\n      return;\n    }\n\n    if (typeof this.options === 'string') {\n      try {\n        this.optionsData = JSON.parse(this.options);\n      } catch (e) {\n        // Invalid options JSON, fallback to empty array\n        this.optionsData = [];\n      }\n    } else {\n      this.optionsData = Array.isArray(this.options) ? this.options : [];\n    }\n  }\n\n  private renderOptionValue(option: ProductOption) {\n    // Handle image options\n    if (option.is_image) {\n      return (\n        <div class=\"s-order-details-option-image-container\">\n          <a href={option.value as string} target=\"_blank\">\n            <img\n              class=\"s-order-details-option-image\"\n              src={(option.value as string) || this.placeholderImage}\n              alt={option.name}\n            />\n          </a>\n        </div>\n      );\n    }\n\n    // Handle color options\n    if (option.color) {\n      return (\n        <span\n          title={option.value as string}\n          class=\"s-order-details-option-color-swatch\"\n          style={{ backgroundColor: option.color }}\n        ></span>\n      );\n    }\n\n    // Handle file options\n    if (option.is_file) {\n      return (\n        <a href={option.value as string} target=\"_blank\" class=\"s-order-details-option-file-link\">\n          Attachments\n        </a>\n      );\n    }\n\n    // Handle color picker options\n    if (option.is_color_picker) {\n      return (\n        <div class=\"s-order-details-option-color-picker\">\n          <div class=\"s-order-details-option-color-picker-content\">\n            <span class=\"s-order-details-option-color-picker-text\">{option.value}</span>\n            <span\n              class=\"s-order-details-option-color-picker-swatch\"\n              style={{ backgroundColor: option.value as string, width: '1rem' }}\n            ></span>\n          </div>\n          <salla-button\n            onClick={e => this.copyToClipboard(e, option.value as string)}\n            shape=\"link\"\n            class=\"s-order-details-option-color-picker-button\"\n          >\n            <span class=\"s-order-details-option-color-copy-icon\" innerHTML={copyIcon}></span>\n          </salla-button>\n        </div>\n      );\n    }\n\n    // Handle map options\n    if (option.is_map && option.latitude && option.longitude) {\n      return (\n        <salla-map\n          id={`location_map_${option.id}`}\n          class={`map_${option.id}`}\n          zoom={15}\n          readonly\n          lat={option.latitude as number}\n          lng={option.longitude as number}\n        >\n          <div slot=\"button\">\n            <button\n              type=\"button\"\n              class=\"s-order-details-option-map-button\"\n              onClick={() => this.openMap(option.id)}\n            >\n              Show Location\n            </button>\n          </div>\n        </salla-map>\n      );\n    }\n\n    // Default text value\n    return (\n      <span class=\"s-order-details-option-default-text\">\n        {option.display_value || option.value}\n      </span>\n    );\n  }\n\n  private copyToClipboard(event: Event, content: string) {\n    event.preventDefault();\n    if (navigator.clipboard) {\n      navigator.clipboard.writeText(content);\n    }\n  }\n\n  private openMap(optionId: string | number) {\n    const mapElement = document.querySelector(`salla-map.map_${optionId}`) as any;\n    if (mapElement && mapElement.open) {\n      mapElement.open();\n    }\n  }\n\n  render() {\n    if (!this.optionsData.length) {\n      return null;\n    }\n\n    const containerClasses = this.bordered\n      ? 's-order-details-options-container'\n      : 's-order-details-options-container-borderless';\n\n    return (\n      <Host class=\"s-order-details-options-wrapper\">\n        <h2 class=\"s-order-details-options-title\">{salla.lang.get('pages.cart.item_options')}</h2>\n        <div class={containerClasses}>\n          <dl class=\"s-order-details-options-list\">\n            {this.optionsData.map(option => (\n              <div key={option.id} class=\"s-order-details-options-item\">\n                <dt class=\"s-order-details-options-item-name\">{option.name}:</dt>\n                <dd\n                  class={\n                    option.is_image\n                      ? 's-order-details-options-item-value-image'\n                      : 's-order-details-options-item-value-text'\n                  }\n                >\n                  {this.renderOptionValue(option)}\n                </dd>\n              </div>\n            ))}\n          </dl>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}