@sc-360-v2/storefront-cms-library 0.5.52 → 0.5.53

package/dist/quota-details.scss

@@ -1,5 +1,8 @@
-@use "sass:map";
+@use "sass:map";
 @use "sass:list";
+@use "./functions.scss" as *;
+
+$overflowSelector: ".flex__overflow";
 
 [data-div-type="element"] {
   &[data-element-type="quotaDetails"] {
@@ -10,12 +13,17 @@
     // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
     // width: 50%;
     // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
-    // width: var(
-    //   --_sf-el-wh-st-mx,
-    //   calc(
-    //     1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
-    //   )
-    // );
+    // Reads the percentage the left/right resize handles write, same as FAQ. Without
+    // this the handles (and the Layout > Width input) drag a value nothing consumes.
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
+      )
+    );
+    // Floor for the width above: the two items plus their icons stop reading as a row
+    // below this, and dragging past it only produced a squeezed, wrapped box.
+    min-width: 300px !important;
     margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
     // aspect-ratio: 1 / var(--_sf-aspect-ratio);
 
@@ -133,6 +141,10 @@
           display: flex;
           align-items: center;
           gap: 4px;
+          // Flex items default to min-width:auto, so they refuse to shrink below
+          // their text width. Narrowing the element used to push this row outside
+          // the element box instead of reflowing it inside.
+          min-width: 0;
 
           .svg_icon {
             display: flex;
@@ -141,7 +153,10 @@
         .quota__left {
           .count {
             // padding-inline: var(--_sf-cd-gp);
-            white-space: nowrap;
+            // No `white-space: nowrap` here: it stopped the text reflowing when the
+            // element is narrowed, and it would also defeat the line clamp below,
+            // which needs the text to wrap before it can restrict it to N lines.
+            min-width: 0;
             color: var(
               --_ctm-mob-dn-qa-lt-cr,
               var(--_ctm-tab-dn-qa-lt-cr, var(--_ctm-dn-qa-lt-cr))
@@ -178,10 +193,29 @@
               --_ctm-mob-dn-qa-lt-ue,
               var(--_ctm-tab-dn-qa-lt-ue, var(--_ctm-dn-qa-lt-ue))
             );
+            text-transform: var(
+              --_ctm-mob-dn-qa-lt-tt-tm,
+              var(--_ctm-tab-dn-qa-lt-tt-tm, var(--_ctm-dn-qa-lt-tt-tm, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-qa-lt-wd-wp,
+              var(--_ctm-tab-dn-qa-lt-wd-wp, var(--_ctm-dn-qa-lt-wd-wp, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-qa-lt-wd-bk,
+              var(--_ctm-tab-dn-qa-lt-wd-bk, var(--_ctm-dn-qa-lt-wd-bk, normal))
+            );
+
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
           }
           .label {
             // padding-inline: var(--_sf-cd-gp);
-            white-space: nowrap;
+            // No `white-space: nowrap` here: it stopped the text reflowing when the
+            // element is narrowed, and it would also defeat the line clamp below,
+            // which needs the text to wrap before it can restrict it to N lines.
+            min-width: 0;
             color: var(
               --_ctm-mob-dn-qa-lt-cr-dc-dc,
               var(--_ctm-tab-dn-qa-lt-cr-dc, var(--_ctm-dn-qa-lt-cr-dc))
@@ -218,6 +252,22 @@
               --_ctm-mob-dn-qa-lt-ue-dc,
               var(--_ctm-tab-dn-qa-lt-ue-dc, var(--_ctm-dn-qa-lt-ue-dc))
             );
+            text-transform: var(
+              --_ctm-mob-dn-qa-lt-tt-tm-dc,
+              var(--_ctm-tab-dn-qa-lt-tt-tm-dc, var(--_ctm-dn-qa-lt-tt-tm-dc, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-qa-lt-wd-wp-dc,
+              var(--_ctm-tab-dn-qa-lt-wd-wp-dc, var(--_ctm-dn-qa-lt-wd-wp-dc, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-qa-lt-wd-bk-dc,
+              var(--_ctm-tab-dn-qa-lt-wd-bk-dc, var(--_ctm-dn-qa-lt-wd-bk-dc, normal))
+            );
+
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
+            }
           }
           .icon {
             display: var(--_sf-show-icon-ff, flex);
@@ -235,6 +285,12 @@
                   --_ctm-mob-dn-qa-lt-in-c1,
                   var(--_ctm-tab-dn-qa-lt-in-c1, var(--_ctm-dn-qa-lt-in-c1))
                 );
+                // Overrides the stroke-width presentation attribute baked into the
+                // icon markup; 1 keeps the icon as authored when nothing is set.
+                stroke-width: var(
+                  --_ctm-mob-dn-qa-lt-se-wh,
+                  var(--_ctm-tab-dn-qa-lt-se-wh, var(--_ctm-dn-qa-lt-se-wh, 1))
+                );
               }
             }
           }
@@ -242,7 +298,10 @@
         .days__left {
           .count {
             // padding-inline: var(--_sf-cd-gp);
-            white-space: nowrap;
+            // No `white-space: nowrap` here: it stopped the text reflowing when the
+            // element is narrowed, and it would also defeat the line clamp below,
+            // which needs the text to wrap before it can restrict it to N lines.
+            min-width: 0;
             color: var(
               --_ctm-mob-dn-ds-lt-cr,
               var(--_ctm-tab-dn-ds-lt-cr, var(--_ctm-dn-ds-lt-cr))
@@ -279,10 +338,29 @@
               --_ctm-mob-dn-ds-lt-ue,
               var(--_ctm-tab-dn-ds-lt-ue, var(--_ctm-dn-ds-lt-ue))
             );
+            text-transform: var(
+              --_ctm-mob-dn-ds-lt-tt-tm,
+              var(--_ctm-tab-dn-ds-lt-tt-tm, var(--_ctm-dn-ds-lt-tt-tm, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-ds-lt-wd-wp,
+              var(--_ctm-tab-dn-ds-lt-wd-wp, var(--_ctm-dn-ds-lt-wd-wp, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-ds-lt-wd-bk,
+              var(--_ctm-tab-dn-ds-lt-wd-bk, var(--_ctm-dn-ds-lt-wd-bk, normal))
+            );
+
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
+            }
           }
           .label {
             // padding-inline: var(--_sf-cd-gp);
-            white-space: nowrap;
+            // No `white-space: nowrap` here: it stopped the text reflowing when the
+            // element is narrowed, and it would also defeat the line clamp below,
+            // which needs the text to wrap before it can restrict it to N lines.
+            min-width: 0;
             color: var(
               --_ctm-mob-dn-ds-lt-cr-dc-dc,
               var(--_ctm-tab-dn-ds-lt-cr-dc, var(--_ctm-dn-ds-lt-cr-dc))
@@ -319,6 +397,22 @@
               --_ctm-mob-dn-ds-lt-ue-dc,
               var(--_ctm-tab-dn-ds-lt-ue-dc, var(--_ctm-dn-ds-lt-ue-dc))
             );
+            text-transform: var(
+              --_ctm-mob-dn-ds-lt-tt-tm-dc,
+              var(--_ctm-tab-dn-ds-lt-tt-tm-dc, var(--_ctm-dn-ds-lt-tt-tm-dc, none))
+            );
+            word-wrap: var(
+              --_ctm-mob-dn-ds-lt-wd-wp-dc,
+              var(--_ctm-tab-dn-ds-lt-wd-wp-dc, var(--_ctm-dn-ds-lt-wd-wp-dc, normal))
+            );
+            word-break: var(
+              --_ctm-mob-dn-ds-lt-wd-bk-dc,
+              var(--_ctm-tab-dn-ds-lt-wd-bk-dc, var(--_ctm-dn-ds-lt-wd-bk-dc, normal))
+            );
+
+            &#{$overflowSelector} {
+              @include restrictToLinesShow(#{var(--_sf-line-clamp-desc, 1)});
+            }
           }
           .icon {
             display: var(--_sf-show-icon-ff, flex);
@@ -336,6 +430,12 @@
                   --_ctm-mob-dn-ds-lt-in-c1,
                   var(--_ctm-tab-dn-ds-lt-in-c1, var(--_ctm-dn-ds-lt-in-c1))
                 );
+                // Overrides the stroke-width presentation attribute baked into the
+                // icon markup; 1 keeps the icon as authored when nothing is set.
+                stroke-width: var(
+                  --_ctm-mob-dn-ds-lt-se-wh,
+                  var(--_ctm-tab-dn-ds-lt-se-wh, var(--_ctm-dn-ds-lt-se-wh, 1))
+                );
               }
             }
           }

package/dist/repeater-item.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use "sass:map";
 @use "sass:list";
 @use "./functions.scss" as *;
 
@@ -18,6 +18,13 @@
     // inline `min-height: 0px` on the element needs !important to be overridden
     min-height: prepareMediaVariable(--_ctm-repe-lt-mn-ht, 100px) !important;
 
+    // The item's own Show Shadow switch, which reaches the stylesheet as
+    // `data-show-shadow` (RepeaterItem surfaces it — it is a control, so it is not
+    // part of the BUILDER attributes that get spread onto the element).
+    &[data-show-shadow="false"] {
+      --_sf-repe-show-shadow: none;
+    }
+
     & > div {
       &.wrapper {
         width: 100%;
@@ -66,30 +73,35 @@
           --_ctm-mob-repe-dn-br-wh,
           var(--_ctm-tab-repe-dn-br-wh, var(--_ctm-repe-dn-br-wh))
         );
+        // The four shadow variables read `repe-se-*`, but the design section is
+        // `design`, so the builder writes `repe-dn-*` (see default-templates.ts). No
+        // `repe-se-*` variable is ever defined, which made the whole var() chain
+        // invalid at computed-value time and resolved box-shadow to its initial `none`.
+        //
+        // The gate is `--_sf-repe-show-shadow`, not the shared `--_show-shadow`: the
+        // parent Repeater sets that on its own root when its shadow is switched off, and
+        // custom properties inherit, so items lost their shadow whenever the repeater's
+        // was off. A name of its own keeps the two switches independent. The hover
+        // variables that used to head this chain are gone with it — this element has no
+        // hover state, so nothing set them and they carried the same leak risk.
+        //
+        // Per-part fallbacks match repeater.scss: without them a single unset part would
+        // invalidate the whole declaration again.
         box-shadow: var(
-          --_hover-show-shadow,
-          var(
-            --_sf-hr-bx-sw,
+          --_sf-repe-show-shadow,
+          var(--_ctm-mob-repe-dn-sw-ae, var(--_ctm-tab-repe-dn-sw-ae, var(--_ctm-repe-dn-sw-ae, 0)))
+            var(
+              --_ctm-mob-repe-dn-sw-br,
+              var(--_ctm-tab-repe-dn-sw-br, var(--_ctm-repe-dn-sw-br, 0))
+            )
+            var(
+              --_ctm-mob-repe-dn-sw-sd,
+              var(--_ctm-tab-repe-dn-sw-sd, var(--_ctm-repe-dn-sw-sd, 0))
+            )
             var(
-              --_show-shadow,
-              var(
-                  --_ctm-mob-repe-se-sw-ae,
-                  var(--_ctm-tab-repe-se-sw-ae, var(--_ctm-repe-se-sw-ae))
-                )
-                var(
-                  --_ctm-mob-repe-se-sw-br,
-                  var(--_ctm-tab-repe-se-sw-br, var(--_ctm-repe-se-sw-br))
-                )
-                var(
-                  --_ctm-mob-repe-se-sw-sd,
-                  var(--_ctm-tab-repe-se-sw-sd, var(--_ctm-repe-se-sw-sd))
-                )
-                var(
-                  --_ctm-mob-repe-se-sw-cr,
-                  var(--_ctm-tab-repe-se-sw-cr, var(--_ctm-repe-se-sw-cr))
-                )
+              --_ctm-mob-repe-dn-sw-cr,
+              var(--_ctm-tab-repe-dn-sw-cr, var(--_ctm-repe-dn-sw-cr, transparent))
             )
-          )
         );
       }
       &:is([data-background-type="color"] > *).wrapper {

package/dist/request-for-quotes.scss

@@ -1,4 +1,4 @@
-@use "sass:map";
+@use "sass:map";
 @use "sass:list";
 @import "./functions.scss";
 $defaultValues: (
@@ -11,6 +11,20 @@ $defaultValues: (
 [data-div-type="element"] {
   &[data-element-type="requestForQuote"] {
     margin: 0;
+    // Reads the percentage the right resize handle writes, same as My Templates and
+    // My Wishlist. Without it the handle drags a value nothing consumes.
+    width: var(
+      --_sf-el-wh-st-mx,
+      calc(
+        1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
+      )
+    );
+
+    & > .wrapper {
+      // Layout > Padding. The element declares it but nothing read it back — the rule
+      // below was commented out and named a variable (`--_lt-pg`) that never existed.
+      padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
+    }
     // width: var(--_lt-wh);
     // height: var(--_lt-ht);
     // margin: var(--_lt-mn);

package/dist/types/builder/tools/element-edit/allocationDetails.d.ts

@@ -12,6 +12,15 @@ interface selfLayoutInterface {
         value: AlignItemsValue;
     };
     allocationItemGap: Pick<CMSIBCommonInterface, "property" | "propertyType"> & any;
+    allocationsView: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: string;
+    };
+    showAllocationTabs: Pick<CMSIBCommonInterface, "property" | "propertyType"> & {
+        value: boolean;
+    };
+    showProfileTabs: Pick<CMSIBCommonInterface, "property"> & {
+        value: boolean;
+    } & any;
 }
 interface selfDesignInterface {
     selectorKey: string;
@@ -30,7 +39,14 @@ export declare enum SelectorKeysEnum {
     GRID_VIEW_CONTROL_STYLE = "gridViewControlStyle",
     BUTTON = "button",
     SELECTED_STATE = "selectedState",
-    LAYOUT_STYLE = "layoutStyle"
+    HOVER_STATE = "hoverState",
+    LAYOUT_STYLE = "layoutStyle",
+    SIDEBAR_DESIGN = "sidebarDesign",
+    SIDEBAR_CONTAINER = "sidebarContainer",
+    SIDEBAR_HEADING = "sidebarHeading",
+    PROFILE_ROW = "profileRow",
+    PROFILE_TREE_ICON = "profileTreeIcon",
+    ALLOCATION_ROW = "allocationRow"
 }
 export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
 export {};

package/dist/types/builder/tools/element-edit/iconLibrary.d.ts

@@ -1,4 +1,4 @@
-import { CMSCSSUnitTypesEnums } from "../../enums";
+import { CMSCSSUnitTypesEnums, CMSElementEditTypes } from "../../enums";
 import { CMSIBCommonInterface } from "../../interfaces/global";
 import { CMSElementEditPopupInterface } from "./common";
 export interface SectionEditPopupInterface extends CMSElementEditPopupInterface {
@@ -33,6 +33,12 @@ export declare const getDefaultData: () => {
         showIcon: CMSIBCommonInterface | undefined;
         iconSize: import("../../interfaces/global").CMSIBSizeInterface;
         iconColor: CMSIBCommonInterface;
+        strokeWidth: {
+            value: number;
+            property: string;
+            unit: CMSCSSUnitTypesEnums;
+            propertyType: CMSElementEditTypes;
+        };
         selectorKey: SelectorKeysEnum;
         backgroundColor: CMSIBCommonInterface;
         borderColor: CMSIBCommonInterface;

package/dist/types/builder/tools/element-edit/imageHotspot.d.ts

@@ -45,7 +45,6 @@ export interface selfDesignInterface {
         iconColor: CMSIBCommonInterface;
         icon: CMSIBCommonInterface;
         iconSize: CMSIBCommonInterface;
-        showIcon: controlInterface;
         hotspotSize: controlInterface;
         hotspotStyle: controlInterface;
         backgroundColor: CMSIBCommonInterface;

package/dist/types/builder/tools/element-edit/language-menu.d.ts

@@ -41,20 +41,6 @@ export declare const menuConrolsInterface: {
         value: string;
         propertyType: CMSElementEditTypes;
     };
-    flagStyle: {
-        value: string;
-        propertyType: CMSElementEditTypes;
-    };
-    flagSize: {
-        value: number;
-        property: string;
-        unit: number;
-        propertyType: CMSElementEditTypes;
-    };
-    showFlags: {
-        value: boolean;
-        propertyType: CMSElementEditTypes;
-    };
     showSearchText: {
         value: boolean;
         property: string;

package/dist/types/builder/tools/element-edit/userElements.d.ts

@@ -1086,5 +1086,10 @@ export declare const getDefaultData: () => {
             property: string;
             propertyType: CMSElementEditTypes;
         };
+        quotaLink: {
+            value: string;
+            property: string;
+            propertyType: CMSElementEditTypes;
+        };
     };
 };

package/dist/user-elements.scss

@@ -1069,6 +1069,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
         }
 
         .quote_item_wrapper {
+          // Set only on the storefront, where clicking a quota row selects that
+          // allocation and its profile. Builder/preview rows are dummy data.
+          &[data-is-clickable="true"] {
+            cursor: pointer;
+          }
+
           display: flex;
           flex-direction: row;
           gap: prepareMediaVariable(--_ctm-lt-qa-im-sg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sc-360-v2/storefront-cms-library",
-  "version": "0.5.52",
+  "version": "0.5.53",
   "main": "/dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {