@sc-360-v2/storefront-cms-library 0.3.30 → 0.3.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/modal.scss CHANGED
@@ -375,10 +375,15 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
375
375
 
376
376
  .actions {
377
377
  display: flex;
378
+ align-items: center;
378
379
  gap: 12px;
380
+ svg {
381
+ width: 16px;
382
+ height: 16px;
383
+ }
379
384
  span {
380
- width: 36px;
381
- height: 36px;
385
+ width: 32px;
386
+ height: 32px;
382
387
  cursor: pointer;
383
388
  font-size: 16px;
384
389
  color: $text-light;
@@ -388,12 +393,14 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
388
393
  justify-content: center;
389
394
 
390
395
  &:hover {
391
- color: $black;
396
+ color: var(--_gray-900);
397
+ background-color: var(--_gray-100);
398
+ border-radius: 4px;
392
399
  }
393
400
  }
394
401
  .sc_modal-close svg {
395
- width: 14px !important;
396
- height: 14px !important;
402
+ width: 20px !important;
403
+ height: 20px !important;
397
404
  }
398
405
  }
399
406
  }
@@ -444,6 +451,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
444
451
  position: sticky;
445
452
  bottom: 0;
446
453
  display: flex;
454
+ align-items: center;
447
455
  justify-content: space-between;
448
456
  padding: 16px 22px;
449
457
  border-top: 1px solid $gray-300;
@@ -536,7 +544,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
536
544
  background-color: $white;
537
545
  display: flex;
538
546
  align-items: center; /* Align items vertically in the toolbar */
539
- padding: 12px 16px; /* Add padding to the toolbar */
547
+ padding-inline-start: 16px; /* Add padding to the toolbar */
540
548
  border-radius: $radius 0 0 $radius; /* Rounded left corners */
541
549
  gap: 16px;
542
550
  }
@@ -562,6 +570,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
562
570
 
563
571
  &:hover {
564
572
  background: $primary-hover;
573
+
565
574
  }
566
575
  }
567
576
 
@@ -574,6 +583,29 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
574
583
  font-size: 16px;
575
584
  color: $text-light;
576
585
  transition: color 0.2s;
586
+ width: 32px;
587
+ height: 32px;
588
+ display: flex;
589
+ align-items: center;
590
+ justify-content: center;
591
+ &:hover {
592
+ background-color: var(--_gray-50);
593
+ border-radius: 4px;
594
+ svg path {
595
+ stroke: var(--_gray-900)
596
+ }
597
+ }
598
+ [title="maximize"] {
599
+ svg {
600
+ width: 14px;
601
+ height: 14px;
602
+ }
603
+ }
604
+
605
+ svg {
606
+ width: 20px;
607
+ height: 20px;
608
+ }
577
609
 
578
610
  &:hover {
579
611
  color: $black;
@@ -17,7 +17,6 @@ $input-padding: 10px 12px;
17
17
  // .quick-order-main Styles
18
18
  .quick-order-main {
19
19
  display: flex;
20
- // padding: 12px;
21
20
  flex-direction: column;
22
21
  gap: 16px;
23
22
  width: 100%;
@@ -29,6 +28,7 @@ $input-padding: 10px 12px;
29
28
  align-items: center;
30
29
  padding: 12px;
31
30
  border-bottom: 0.5px solid var(--Gray-200, #eaecf0);
31
+ flex-shrink: 0;
32
32
 
33
33
  .quick-order-product-dropdown-section {
34
34
  width: 320px;
@@ -122,9 +122,11 @@ $input-padding: 10px 12px;
122
122
  align-items: center;
123
123
  justify-content: center;
124
124
 
125
+
126
+
125
127
  svg {
126
- width: 20px;
127
- height: 20px;
128
+ width: 16px;
129
+ height: 16px;
128
130
  path {
129
131
  stroke: #fff;
130
132
  }
@@ -145,3 +147,12 @@ $input-padding: 10px 12px;
145
147
  line-height: 24px;
146
148
  }
147
149
  }
150
+
151
+ @keyframes rotate360 {
152
+ from {
153
+ transform: rotate(0deg);
154
+ }
155
+ to {
156
+ transform: rotate(360deg);
157
+ }
158
+ }
@@ -16,7 +16,6 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
16
16
  width: 100%;
17
17
  height: 100%;
18
18
  top: 0;
19
- background: rgba(112, 112, 112, 0.13);
20
19
  z-index: 9999;
21
20
 
22
21
  // Container overlay
@@ -67,7 +66,7 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
67
66
  display: flex;
68
67
  justify-content: space-between;
69
68
  align-items: center;
70
- padding: 16px 24px;
69
+ padding: 16px 16px 16px 24px;
71
70
  position: sticky;
72
71
  top: 0px;
73
72
  background: var(--_base-white);
@@ -80,11 +79,19 @@ $shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
80
79
  }
81
80
 
82
81
  .close-btn {
83
- font-size: 24px;
84
- background: none;
85
- border: none;
86
82
  cursor: pointer;
87
- color: $text-color;
83
+ width: 32px;
84
+ height: 32px;
85
+ display: flex;
86
+ justify-content: center;
87
+ align-items: center;
88
+ &:hover {
89
+ background-color: var(--_gray-50);
90
+ border-radius: 6px;
91
+ svg path {
92
+ stroke: var(--_gray-900);
93
+ }
94
+ }
88
95
  }
89
96
  }
90
97
 
@@ -50,14 +50,14 @@
50
50
  font-size: 16px;
51
51
  font-weight: 500;
52
52
  color: var(--_gray-900);
53
- &:after {
54
- width: 1px;
55
- height: 10px;
56
- background: var(--_gray-600);
57
- display: inline-block;
58
- content: "";
59
- margin-left: 16px;
60
- }
53
+ // &:after {
54
+ // width: 1px;
55
+ // height: 10px;
56
+ // background: var(--_gray-600);
57
+ // display: inline-block;
58
+ // content: "";
59
+ // margin-left: 16px;
60
+ // }
61
61
  }
62
62
 
63
63
  .quote-item__meta {
@@ -66,20 +66,20 @@
66
66
  font-size: 14px;
67
67
  font-weight: 400;
68
68
  color: var(--_gray-600);
69
- // span {
70
- // &::after {
71
- // width: 1px;
72
- // height: 10px;
73
- // background: var(--_gray-600);
74
- // content: "";
75
- // display: inline-block;
76
- // margin-left: 6px;
77
- // }
78
- // &:last-child::after {
79
- // width: 0 !important;
80
- // margin: 0 !important;
81
- // }
82
- // }
69
+ span {
70
+ &::after {
71
+ width: 1px;
72
+ height: 10px;
73
+ background: var(--_gray-600);
74
+ content: "";
75
+ display: inline-block;
76
+ margin-left: 6px;
77
+ }
78
+ &:last-child::after {
79
+ width: 0 !important;
80
+ margin: 0 !important;
81
+ }
82
+ }
83
83
  }
84
84
  }
85
85
 
@@ -111,7 +111,7 @@
111
111
  padding: 8px 12px;
112
112
  font-size: 15px;
113
113
  border: 1px solid #ccc;
114
- border-radius: 6px;
114
+ border-radius: 4px;
115
115
  outline: none;
116
116
  width: 130px;
117
117
 
@@ -120,7 +120,10 @@
120
120
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
121
121
  }
122
122
  }
123
-
123
+ .input-with-prefix:focus-within {
124
+ border-color: #007bff; /* Or any highlight color */
125
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
126
+ }
124
127
  .input-with-prefix {
125
128
  display: flex;
126
129
  align-items: center;
@@ -129,11 +132,13 @@
129
132
  overflow: hidden;
130
133
  width: 130px;
131
134
  height: 40px;
132
-
133
135
  span {
134
136
  padding: 0 8px;
135
137
  font-size: 15px;
136
138
  color: var(--_gray-500);
139
+ svg{
140
+ vertical-align: middle;
141
+ }
137
142
  }
138
143
 
139
144
  input {
@@ -0,0 +1,27 @@
1
+ import { CMSHTMLAttributes } from "../../../global/attributes";
2
+ import { CommonStyleProperties } from "../../../global/style-properties";
3
+ import { AlignSelfValue, BoxSizingValue, GlobalImageAttributes, GridAreaValue, HeightValue, ImageBuilderAttributes, JustifySelfValue, MaxHeightValue, MaxWidthValue, MinHeightValue, MinWidthValue, PaddingValue } from "../../../global/types";
4
+ import { BuilderAttributes, CMSElementInterface } from "../common";
5
+ export interface LoaderStyleProperties extends CommonStyleProperties {
6
+ minHeight?: MinHeightValue;
7
+ height?: HeightValue;
8
+ minWidth?: MinWidthValue;
9
+ maxWidth?: MaxWidthValue;
10
+ maxHeight?: MaxHeightValue;
11
+ gridArea?: GridAreaValue;
12
+ boxSizing?: BoxSizingValue;
13
+ padding?: PaddingValue;
14
+ justifySelf?: JustifySelfValue;
15
+ alignSelf?: AlignSelfValue;
16
+ }
17
+ export declare const getDefaultStyles: () => LoaderStyleProperties;
18
+ export interface CMSLoaderInterface extends Omit<CMSElementInterface, "attributes"> {
19
+ attributes: {
20
+ HTML: Pick<CMSHTMLAttributes, GlobalImageAttributes>;
21
+ BUILDER: Pick<BuilderAttributes, ImageBuilderAttributes>;
22
+ CUSTOM: any;
23
+ };
24
+ styles: LoaderStyleProperties;
25
+ childrenStyles?: CommonStyleProperties;
26
+ content: string;
27
+ }
@@ -328,6 +328,7 @@ export declare const CMSElementsListEnum: {
328
328
  BADGE: string;
329
329
  CART_ATTRIBUTES: string;
330
330
  LANGUAGE_MENU: string;
331
+ LOADER: string;
331
332
  };
332
333
  export declare enum CMSResponsiveModeEnums {
333
334
  DESKTOP = "desktop",
@@ -83,4 +83,5 @@ import * as filterResultsSchema from "./elements/filter-results/index";
83
83
  import * as productSizeChartSchema from "./elements/product-sizechart/index";
84
84
  import * as badgeSchema from "./elements/badge/index";
85
85
  import * as cartAttributesSchema from "./elements/cart-attributes/index";
86
- export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, bundleDetailsSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, createFormSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, marchandiserSetsSchema, formBuilder, quickLinksSchema, addOrderSchema, buyForTabsSchema, buyForTabsContainerSchema, checkoutSchema, cartSummarySchema, toasterSchema, spotlightSchema, productCustomizationsSchema, iconListSchema, orderStatusSchema, menuV2Schema, menuItemSchema, layouterProSchema, layouterProItemSchema, userElementsSchema, filterResultsSchema, productSizeChartSchema, badgeSchema, cartAttributesSchema, };
86
+ import * as loaderSchema from "./elements/loader/index";
87
+ export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, bundleDetailsSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, createFormSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, marchandiserSetsSchema, formBuilder, quickLinksSchema, addOrderSchema, buyForTabsSchema, buyForTabsContainerSchema, checkoutSchema, cartSummarySchema, toasterSchema, spotlightSchema, productCustomizationsSchema, iconListSchema, orderStatusSchema, menuV2Schema, menuItemSchema, layouterProSchema, layouterProItemSchema, userElementsSchema, filterResultsSchema, productSizeChartSchema, badgeSchema, cartAttributesSchema, loaderSchema, };
@@ -35,6 +35,14 @@ export declare const getDefaultData: () => {
35
35
  margin: import("../../interfaces/global").CSSPaddingValues | undefined;
36
36
  padding: import("../../interfaces/global").CSSPaddingValues | undefined;
37
37
  overflowContent: import("../../interfaces/global").CMSIBCommonInterface | undefined;
38
+ signInTemplate: {
39
+ value: string;
40
+ propertyType: CMSElementEditTypes;
41
+ };
42
+ accountTemplate: {
43
+ value: string;
44
+ propertyType: CMSElementEditTypes;
45
+ };
38
46
  scrollDirection: import("../../interfaces/global").CMSIBCommonInterface | undefined;
39
47
  displayScrollbar: import("../../interfaces/global").CMSIBCommonInterface | undefined;
40
48
  positionType: import("../../interfaces/global").CMSIBCommonInterface | undefined;
@@ -97,4 +97,5 @@ import * as userElements from "./userElements";
97
97
  import * as badge from "./badge";
98
98
  import * as languageMenu from "./language-menu";
99
99
  import * as cartAttributes from "./cartAttributes";
100
- export { amountEstimator, bulkVariantPicker, button, code, staticText, common, container, countdown, embed, faq, gallerySlider, grid, image, imageHotspot, map, paymentMethods, pickupLocations, price, productActions, productHighlights, productImage, productInventory, productPromotions, quantitySelector, scroll, section, shippingEstimator, slideShowLayouter, social, stack, storeLocations, table, tabs, text, uomSelector, variantPicker, video, volumePricing, lightbox, cart, profile, repeater, repeaterItem, product, menu, productOptions, productDetails, category, subCategory, brand, bundle, brandImage, filters, sort, pastOrders, quotes, rfqs, lightBoxV2, allocations, search, layouter, layouterItem, categoryDetails, contactUs, login, resetPassword, breadcrumbs, iconLibrary, searchResultsHeading, itemStock, cartDetails, cartSummary, checkout, allocationDetails, line, tabsV2, tabContainer, marchandiserSets, createForm, quickLinks, addOrder, buyForWithTabs, buyForTabsContainer, toaster, spotlight, bundleDetails, productCustomizations, iconList, orderStatus, menuV2, menuItem, layouterPro, layouterProItem, filterResults, productSizeChart, userElements, badge, cartAttributes, languageMenu, };
100
+ import * as loader from "./loader";
101
+ export { amountEstimator, bulkVariantPicker, button, code, staticText, common, container, countdown, embed, faq, gallerySlider, grid, image, imageHotspot, map, paymentMethods, pickupLocations, price, productActions, productHighlights, productImage, productInventory, productPromotions, quantitySelector, scroll, section, shippingEstimator, slideShowLayouter, social, stack, storeLocations, table, tabs, text, uomSelector, variantPicker, video, volumePricing, lightbox, cart, profile, repeater, repeaterItem, product, menu, productOptions, productDetails, category, subCategory, brand, bundle, brandImage, filters, sort, pastOrders, quotes, rfqs, lightBoxV2, allocations, search, layouter, layouterItem, categoryDetails, contactUs, login, resetPassword, breadcrumbs, iconLibrary, searchResultsHeading, itemStock, cartDetails, cartSummary, checkout, allocationDetails, line, tabsV2, tabContainer, marchandiserSets, createForm, quickLinks, addOrder, buyForWithTabs, buyForTabsContainer, toaster, spotlight, bundleDetails, productCustomizations, iconList, orderStatus, menuV2, menuItem, layouterPro, layouterProItem, filterResults, productSizeChart, userElements, badge, cartAttributes, languageMenu, loader, };
@@ -0,0 +1,28 @@
1
+ import { CMSIBCommonInterface, CMSIBSizeInterface } from "../../interfaces/global";
2
+ import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
3
+ interface selfLayoutInterface {
4
+ selectorKey: string;
5
+ loaderWidth: {
6
+ [key: string]: CMSIBSizeInterface | any;
7
+ };
8
+ loaderHeight: CMSIBSizeInterface;
9
+ showLoaderText: CMSIBCommonInterface;
10
+ loadingText: CMSIBCommonInterface;
11
+ customLoader: CMSIBCommonInterface;
12
+ mode: CMSIBCommonInterface;
13
+ defaultLoaderType: CMSIBCommonInterface;
14
+ }
15
+ export interface selfDesignInterface {
16
+ selectorKey: string;
17
+ backgroundOverlay: CMSIBCommonInterface;
18
+ loaderColor: CMSIBCommonInterface;
19
+ }
20
+ export declare enum loaderSelectorKeysEnum {
21
+ LAYOUT = "layout",
22
+ DESIGN = "design",
23
+ LOADER_ICON = "loaderIcon",
24
+ MINI_LOADER_TEXT = "miniLoaderText",
25
+ LOADER_ITEMS_COUNT = "loaderItemsCount"
26
+ }
27
+ export declare const getDefaultData: () => CMSElementEditPopupInterface<selfLayoutInterface & CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
28
+ export {};
package/dist/widget.scss CHANGED
@@ -116,3 +116,4 @@
116
116
  @use "./submit-quote.scss";
117
117
  @use "./cartAttributes.scss";
118
118
  @use "./language-selector.scss";
119
+ @use "./empty-states.scss";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.3.30",
3
+ "version": "0.3.31",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {