@salla.sa/twilight-components 2.14.365 → 2.14.366

package/dist/collection/components/salla-product-card/salla-product-card.js

@@ -86,19 +86,20 @@ export class SallaProductCard {
             's-product-card-special': this.isSpecial,
             's-product-card-full-image': this.fullImage,
             's-product-card-minimal': this.minimal,
+            's-product-card-compact': this.compact,
             's-product-card-donation': this.productData?.donation,
             's-product-card-shadow': this.shadowOnHover,
             's-product-card-out-of-stock': this.productData?.is_out_of_stock,
         };
         const hrefProp = this.productData?.url ? { href: this.productData.url, title: `Learn more about ${this.productData?.name}` } : {};
-        return (h(Host, { key: '95347f86f3dc0354a057290ce41f74aef0a66282', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: '86927cbc56a2ea92a8e18c44c8999ee1d6f82b4d', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '6294925bce0a46287389a9423b16199cf92919fd', ...hrefProp }, h("img", { key: '74e0d9fae7c61e0e3e0e20e38166d64618c8ca3d', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
+        return (h(Host, { key: '7184dd5df9a903e8efb13e9d7ebfde785c9de7cb', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: 'd26a9f0757675e3eca8c1c927af5a693fac362aa', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '740236251eb99e95487c6a489638cbccc224a1b7', ...hrefProp }, h("img", { key: '8d253d0e2bacac675a64bc023d71e2c9926f0586', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
                 ? 'contain'
                 : this.fitImageHeight
                     ? this.fitImageHeight
-                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: 'fd2db94c99d91815b13141460a8c4538aae4a53b', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
-            h("salla-button", { shape: "icon", fill: "none", color: "light", "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => salla.wishlist.toggle(this.productData.id) }, h("span", { innerHTML: Heart })) : ''), h("div", { key: '9f4f39db770a394d9719664cd77111aef1c575f4', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
+                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: '97b6378012c501176992dc1bf2bcebd0ddb1b1e4', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
+            h("salla-button", { shape: "icon", fill: "none", color: "light", "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => salla.wishlist.toggle(this.productData.id) }, h("span", { innerHTML: Heart })) : ''), h("div", { key: 'b5f92299df71a73388dbb8e12592e8b7f4c99e91', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
             h("div", { class: "s-product-card-content-pie", ref: pie => this.pie = pie }, h("span", null, h("b", null, salla.helpers.number(this.productData?.quantity)), this.remained), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-2 -1 36 34", class: "s-product-card-content-pie-svg" }, h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-base" }), h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-bar" })))
-            : '', h("div", { key: 'eab2c5f49112dd490733e0b6f1e8c30ad9670690', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: '5fadc35b2bf704903bf38128c390f71ec0a8b910', class: "s-product-card-content-title" }, h("a", { key: '7e0767efef938e20ed4c2592a0abec812a9caf86', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
+            : '', h("div", { key: 'dc37b35ce1331859a8c8ce009880faddee014ff4', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: '54bbe09fe87302771966928902e2a69ec5c966b3', class: "s-product-card-content-title" }, h("a", { key: 'd9ed3ae0f677099860b3448fb52d11c678cabb88', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
             h("p", { class: "s-product-card-content-subtitle" }, this.productData?.subtitle)
             : ''), this.productData?.donation && !this.minimal && !this.fullImage ?
             [h("salla-progress-bar", { donation: this.productData?.donation }), h("div", { class: "s-product-card-donation-input" }, this.productData?.donation?.can_donate ?
@@ -107,15 +108,17 @@ export class SallaProductCard {
                                 this.addBtn.donatingAmount = e.target.value;
                             }, id: "donation-amount", name: "donating_amount", class: "s-form-control", placeholder: this.donationAmount })]
                     : '')]
-            : '', h("div", { key: 'f29cdbd8b8bb715583ecb6c6bcc571c64341ee39', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
+            : '', h("div", { key: 'd687ec1039228883aeaaa50f93ad419bf437027a', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
             h("div", { class: "s-product-card-rating" }, h("span", { innerHTML: Star }), h("span", null, this.productData.rating.stars))
             : ''), this.isSpecial && this.productData.discount_ends
             ? h("salla-count-down", { date: this.formatDate(this.productData.discount_ends), "end-of-day": true, boxed: true, labeled: true })
-            : '', !this.hideAddBtn ?
+            : '', !this.hideAddBtn && !this.compact ?
             h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { fill: "outline", width: "wide", ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type }, h("slot", { name: "add-to-cart-label" }, this.productData.add_to_cart_label)), this.horizontal || this.fullImage ?
                 h("salla-button", { shape: "icon", fill: "none", color: "light", ref: el => this.wishlistBtn = el, "aria-label": "Add or remove to wishlist", class: "s-product-card-wishlist-btn animated", onClick: () => salla.wishlist.toggle(this.productData.id), "data-id": "{{ product.id }}" }, h("span", { class: "text-xl", innerHTML: Heart }))
                 : '')
-            : '')));
+            : ''), !this.hideAddBtn && this.compact ?
+            h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type, class: "s-add-product-button-compact" }, h("slot", { name: "add-to-cart-label" }, this.productData.add_to_cart_label)))
+            : ''));
     }
     componentDidLoad() {
         document.lazyLoadInstance?.update(this.host.querySelectorAll('.lazy'));
@@ -291,6 +294,25 @@ export class SallaProductCard {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "compact": {
+                "type": "boolean",
+                "attribute": "compact",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Compact list layout for drawers and lists."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
             }
         };
     }

package/dist/collection/components/salla-products-list/salla-products-list.js

@@ -203,6 +203,11 @@ export class SallaProductsList {
         const customComponentTag = this.hasCustomComponent ? this.productCardComponent : 'salla-product-card';
         const productCard = document.createElement(customComponentTag);
         productCard.product = product;
+        // Apply compact layout if requested - set both property and attribute for compatibility
+        if (this.compactCards) {
+            productCard.compact = true;
+            productCard.toggleAttribute('compact', true);
+        }
         this.applyLandingPageStyles(productCard);
         this.applyHorizontalCardStyles(productCard);
         // Attach click event listener to save the current products snapshot
@@ -235,9 +240,9 @@ export class SallaProductsList {
         if (!this.horizontalCards) {
             return;
         }
-        productCard.setAttribute('horizontal', true);
+        productCard.toggleAttribute('horizontal', true);
         if (!this.hasCustomComponent) {
-            productCard.setAttribute('shadow-on-hover', true);
+            productCard.toggleAttribute('shadow-on-hover', true);
         }
     }
     waitForResizing(element) {
@@ -682,6 +687,7 @@ export class SallaProductsList {
                 's-products-list-horizontal-cards': this.horizontalCards && !this.filtersResults,
                 's-products-list-vertical-cards': !this.horizontalCards && !this.rowCards && !this.filtersResults,
                 's-products-list-row-cards': this.rowCards,
+                's-products-list-compact-cards': this.compactCards,
                 's-products-list-filters-results': this.filtersResults,
             }, ref: wrapper => this.wrapper = wrapper }), h("div", { class: "s-infinite-scroll-status", ref: status => this.status = status }, h("p", { class: "s-infinite-scroll-last infinite-scroll-last s-hidden" }, this.endOfText), h("p", { class: "s-infinite-scroll-error infinite-scroll-error s-hidden" }, this.failedLoadMore)), this.autoload && h("div", { class: "s-products-list-loading-wrapper", style: { "display": "none" }, ref: loader => this.loader = loader }, h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" })), this.hasInfiniteScroll && this.nextPage && !this.autoload ? (h("div", { class: "s-infinite-scroll-wrapper", style: { "display": "none" }, ref: loadMoreWrapper => this.loadMoreWrapper = loadMoreWrapper }, h("button", { onClick: () => this.loadMore(), class: "s-infinite-scroll-btn s-button-btn s-button-primary" }, h("span", { class: "s-button-text s-infinite-scroll-btn-text" }, this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more')), h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader", ref: btnLoader => this.btnLoader = btnLoader, style: { "display": "none" } })))) : ""));
     }
@@ -905,6 +911,25 @@ export class SallaProductsList {
                 "setter": false,
                 "reflect": true
             },
+            "compactCards": {
+                "type": "boolean",
+                "attribute": "compact-cards",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Compact cards for drawer/list layouts"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
             "autoload": {
                 "type": "boolean",
                 "attribute": "autoload",