@websolutespa/bom-mixer-llm 1.8.4 → 1.8.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-mixer-llm
 
+## 1.8.6
+
+### Patch Changes
+
+- Modified: Product Card & Product Card Group style
+
+## 1.8.5
+
+### Patch Changes
+
+- Modified: Product hasPrice
+
 ## 1.8.4
 
 ### Patch Changes

package/dist/cjs/index.css

@@ -1327,7 +1327,7 @@ llm-embed {
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * 0, 8px);
   display: flex;
   flex-wrap: nowrap;
-  align-items: flex-end;
+  align-items: center;
 }
 .llm .llm__prompt-input {
   position: relative;
@@ -1492,15 +1492,21 @@ llm-embed {
   justify-content: center;
   align-items: center;
   column-gap: 4px;
-  padding: 6px 0;
   right: 0;
   left: 0;
-  font-size: 12px;
   color: var(--llm-color-foreground);
   opacity: 0.4;
   transition: opacity ease-in-out 250ms;
   pointer-events: auto;
   cursor: pointer;
+  padding: 4px 0 0 0;
+  font-size: 11px;
+}
+@media (min-width: 1024px) {
+  .llm .llm__prompt-powered-by {
+    padding: 6px 0;
+    font-size: 12px;
+  }
 }
 .llm .llm__prompt-powered-by:hover {
   opacity: 1;
@@ -2079,13 +2085,19 @@ llm-embed {
 .llm .llm__gridrow {
   --grid-columns: var(--llm-grid-columns, 12);
   --grid-size: var(--llm-grid-size, 1fr);
-  --grid-column-gap: var(--llm-grid-column-gap, 2rem);
-  --grid-row-gap: var(--llm-grid-row-gap, 2rem);
+  --grid-column-gap: var(--llm-grid-column-gap, 1rem);
+  --grid-row-gap: var(--llm-grid-row-gap, 1rem);
   display: grid;
   grid-template-columns: repeat(var(--grid-columns), var(--grid-size));
   grid-column-gap: var(--grid-column-gap);
   grid-row-gap: var(--grid-row-gap);
 }
+@media (min-width: 768px) {
+  .llm .llm__gridrow {
+    --grid-column-gap: var(--llm-grid-column-gap, 2rem);
+    --grid-row-gap: var(--llm-grid-row-gap, 2rem);
+  }
+}
 .llm .llm__grid {
   --grid-column: var(--llm-grid-columns, 12);
   grid-column: span var(--grid-column);
@@ -2102,6 +2114,30 @@ llm-embed {
 .llm .llm__grid.--xs-4 {
   --grid-column: 4;
 }
+.llm .llm__grid.--xs-5 {
+  --grid-column: 5;
+}
+.llm .llm__grid.--xs-6 {
+  --grid-column: 6;
+}
+.llm .llm__grid.--xs-7 {
+  --grid-column: 7;
+}
+.llm .llm__grid.--xs-8 {
+  --grid-column: 8;
+}
+.llm .llm__grid.--xs-9 {
+  --grid-column: 9;
+}
+.llm .llm__grid.--xs-10 {
+  --grid-column: 10;
+}
+.llm .llm__grid.--xs-11 {
+  --grid-column: 11;
+}
+.llm .llm__grid.--xs-12 {
+  --grid-column: 12;
+}
 @media (min-width: 768px) {
   .llm .llm__grid.--sm-1 {
     --grid-column: 1;
@@ -2122,6 +2158,46 @@ llm-embed {
     --grid-column: 4;
   }
 }
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-5 {
+    --grid-column: 5;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-6 {
+    --grid-column: 6;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-7 {
+    --grid-column: 7;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-8 {
+    --grid-column: 8;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-9 {
+    --grid-column: 9;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-10 {
+    --grid-column: 10;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-11 {
+    --grid-column: 11;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-12 {
+    --grid-column: 12;
+  }
+}
 @media (min-width: 1024px) {
   .llm .llm__grid.--md-1 {
     --grid-column: 1;
@@ -2315,6 +2391,9 @@ llm-embed {
   overflow: hidden;
   font-weight: 100;
 }
+.llm .llm__product:hover .llm__product-title {
+  text-decoration: underline;
+}
 .llm .llm__product-media {
   position: relative;
   padding: 1rem;
@@ -2380,9 +2459,6 @@ llm-embed {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
-.llm .llm__product-title:hover {
-  text-decoration: underline;
-}
 .llm .llm__product-abstract {
   line-height: 1;
   font-family: var(--llm-font-secondary);

package/dist/cjs/index.js

@@ -4846,7 +4846,14 @@ const ProductWrapper = _a => {
     props = __rest(_a, ["children"]);
   // const label = useLabel();
   const classNames = bomCore.getClassNames('llm__product', `llm__product--${props.productType}`);
-  return jsxRuntime.jsx("div", {
+  return props.url ? jsxRuntime.jsx("a", {
+    className: classNames,
+    href: props.url,
+    target: "_blank",
+    rel: "noreferrer",
+    "aria-label": props.title,
+    children: children
+  }) : jsxRuntime.jsx("div", {
     className: classNames,
     children: children
   });
@@ -4859,16 +4866,13 @@ const Product = props => {
   }
   const price = asNumber(props.price);
   const fullPrice = asNumber(props.fullPrice) || price;
+  const hasPrice = props.price != null;
   const availability = asNumber(props.availability);
   const hasAvailability = props.availability != null;
   const labelKey = props.label ? `-${transliteration.slugify(props.label)}` : '';
   return jsxRuntime.jsxs(ProductWrapper, Object.assign({}, props, {
-    children: [props.media.type === 'image' && props.url && jsxRuntime.jsxs("a", {
+    children: [props.media.type === 'image' && jsxRuntime.jsxs("div", {
       className: "llm__product-media",
-      href: props.url,
-      target: "_blank",
-      rel: "noreferrer",
-      "aria-label": label('llm.tellMeMore'),
       children: [jsxRuntime.jsx("div", {
         className: "llm__product-asset",
         children: jsxRuntime.jsx("img", {
@@ -4883,18 +4887,6 @@ const Product = props => {
         },
         children: props.label
       })]
-    }), props.media.type === 'image' && !props.url && jsxRuntime.jsxs("div", {
-      className: "llm__product-media",
-      children: [jsxRuntime.jsx("div", {
-        className: "llm__product-asset",
-        children: jsxRuntime.jsx("img", {
-          src: props.media.src,
-          alt: props.title
-        })
-      }), props.label && jsxRuntime.jsx("div", {
-        className: "llm__product-label",
-        children: props.label
-      })]
     }), jsxRuntime.jsxs("div", {
       className: "llm__product-content",
       children: [props.sku && jsxRuntime.jsx("div", {
@@ -4902,15 +4894,7 @@ const Product = props => {
         children: props.sku
       }), jsxRuntime.jsxs("div", {
         className: "llm__product-grow",
-        children: [props.title && props.url && jsxRuntime.jsx("a", {
-          className: "llm__product-title",
-          href: props.url,
-          target: "_blank",
-          rel: "noreferrer",
-          dangerouslySetInnerHTML: {
-            __html: props.title
-          }
-        }), props.title && !props.url && jsxRuntime.jsx("div", {
+        children: [props.title && jsxRuntime.jsx("div", {
           className: "llm__product-title",
           dangerouslySetInnerHTML: {
             __html: props.title
@@ -4921,7 +4905,7 @@ const Product = props => {
             __html: props.abstract
           }
         })]
-      }), price && fullPrice && jsxRuntime.jsxs("div", {
+      }), hasPrice && jsxRuntime.jsxs("div", {
         className: "llm__product-prices",
         children: [jsxRuntime.jsx("div", {
           className: "llm__product-price",
@@ -4938,11 +4922,8 @@ const Product = props => {
       }) : jsxRuntime.jsx("div", {
         className: "llm__product-soldout",
         children: label('llm.soldOut')
-      })), props.cta && props.url && jsxRuntime.jsxs("a", {
+      })), props.cta && jsxRuntime.jsxs("div", {
         className: "llm__product-cta",
-        href: props.url,
-        target: "_blank",
-        rel: "noreferrer",
         children: [jsxRuntime.jsx("span", {
           children: props.cta
         }), " ", jsxRuntime.jsx(bomMixerIcons.IconLlmChevronRightCircle, {})]
@@ -4978,7 +4959,7 @@ const ProductGroup = props => {
     children: jsxRuntime.jsx(GridRow, {
       rowGap: "2rem",
       children: props.items.map((item, i) => jsxRuntime.jsx(Grid, {
-        sm: 6,
+        xs: 6,
         md: 4,
         lg: 3,
         children: jsxRuntime.jsx(Product, Object.assign({}, item))