@sc-360-v2/storefront-cms-library 0.2.68 → 0.2.69
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/README.md +12 -12
- package/dist/builder.js +1 -1
- package/dist/globals.scss +94 -94
- package/dist/types/builder/elements/tab-container/index.d.ts +45 -0
- package/dist/types/builder/enums/index.d.ts +7 -1
- package/dist/types/builder/index.d.ts +2 -1
- package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
- package/dist/types/builder/tools/element-edit/tabContainer.d.ts +9 -0
- package/dist/types/builder/tools/element-edit/tabsV2.d.ts +0 -1
- package/package.json +1 -1
package/dist/globals.scss
CHANGED
|
@@ -1,94 +1,94 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--max-width: 1100px;
|
|
3
|
-
--border-radius: 12px;
|
|
4
|
-
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
|
|
5
|
-
"Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
|
|
6
|
-
"Courier New", monospace;
|
|
7
|
-
|
|
8
|
-
--foreground-rgb: 0, 0, 0;
|
|
9
|
-
--background-start-rgb: 214, 219, 220;
|
|
10
|
-
--background-end-rgb: 255, 255, 255;
|
|
11
|
-
|
|
12
|
-
--primary-glow: conic-gradient(
|
|
13
|
-
from 180deg at 50% 50%,
|
|
14
|
-
#16abff33 0deg,
|
|
15
|
-
#0885ff33 55deg,
|
|
16
|
-
#54d6ff33 120deg,
|
|
17
|
-
#0071ff33 160deg,
|
|
18
|
-
transparent 360deg
|
|
19
|
-
);
|
|
20
|
-
--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
|
21
|
-
|
|
22
|
-
--tile-start-rgb: 239, 245, 249;
|
|
23
|
-
--tile-end-rgb: 228, 232, 233;
|
|
24
|
-
--tile-border: conic-gradient(
|
|
25
|
-
#00000080,
|
|
26
|
-
#00000040,
|
|
27
|
-
#00000030,
|
|
28
|
-
#00000020,
|
|
29
|
-
#00000010,
|
|
30
|
-
#00000010,
|
|
31
|
-
#00000080
|
|
32
|
-
);
|
|
33
|
-
|
|
34
|
-
--callout-rgb: 238, 240, 241;
|
|
35
|
-
--callout-border-rgb: 172, 175, 176;
|
|
36
|
-
--card-rgb: 180, 185, 188;
|
|
37
|
-
--card-border-rgb: 131, 134, 135;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
@media (prefers-color-scheme: dark) {
|
|
41
|
-
:root {
|
|
42
|
-
--foreground-rgb: 255, 255, 255;
|
|
43
|
-
--background-start-rgb: 0, 0, 0;
|
|
44
|
-
--background-end-rgb: 0, 0, 0;
|
|
45
|
-
|
|
46
|
-
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
|
|
47
|
-
--secondary-glow: linear-gradient(
|
|
48
|
-
to bottom right,
|
|
49
|
-
rgba(1, 65, 255, 0),
|
|
50
|
-
rgba(1, 65, 255, 0),
|
|
51
|
-
rgba(1, 65, 255, 0.3)
|
|
52
|
-
);
|
|
53
|
-
|
|
54
|
-
--tile-start-rgb: 2, 13, 46;
|
|
55
|
-
--tile-end-rgb: 2, 5, 19;
|
|
56
|
-
--tile-border: conic-gradient(
|
|
57
|
-
#ffffff80,
|
|
58
|
-
#ffffff40,
|
|
59
|
-
#ffffff30,
|
|
60
|
-
#ffffff20,
|
|
61
|
-
#ffffff10,
|
|
62
|
-
#ffffff10,
|
|
63
|
-
#ffffff80
|
|
64
|
-
);
|
|
65
|
-
|
|
66
|
-
--callout-rgb: 20, 20, 20;
|
|
67
|
-
--callout-border-rgb: 108, 108, 108;
|
|
68
|
-
--card-rgb: 100, 100, 100;
|
|
69
|
-
--card-border-rgb: 200, 200, 200;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
* {
|
|
74
|
-
box-sizing: border-box;
|
|
75
|
-
padding: 0;
|
|
76
|
-
margin: 0;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
html,
|
|
80
|
-
body {
|
|
81
|
-
max-width: 100vw;
|
|
82
|
-
overflow-x: hidden;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
a {
|
|
86
|
-
color: inherit;
|
|
87
|
-
text-decoration: none;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@media (prefers-color-scheme: dark) {
|
|
91
|
-
html {
|
|
92
|
-
color-scheme: dark;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
1
|
+
:root {
|
|
2
|
+
--max-width: 1100px;
|
|
3
|
+
--border-radius: 12px;
|
|
4
|
+
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
|
|
5
|
+
"Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
|
|
6
|
+
"Courier New", monospace;
|
|
7
|
+
|
|
8
|
+
--foreground-rgb: 0, 0, 0;
|
|
9
|
+
--background-start-rgb: 214, 219, 220;
|
|
10
|
+
--background-end-rgb: 255, 255, 255;
|
|
11
|
+
|
|
12
|
+
--primary-glow: conic-gradient(
|
|
13
|
+
from 180deg at 50% 50%,
|
|
14
|
+
#16abff33 0deg,
|
|
15
|
+
#0885ff33 55deg,
|
|
16
|
+
#54d6ff33 120deg,
|
|
17
|
+
#0071ff33 160deg,
|
|
18
|
+
transparent 360deg
|
|
19
|
+
);
|
|
20
|
+
--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
|
21
|
+
|
|
22
|
+
--tile-start-rgb: 239, 245, 249;
|
|
23
|
+
--tile-end-rgb: 228, 232, 233;
|
|
24
|
+
--tile-border: conic-gradient(
|
|
25
|
+
#00000080,
|
|
26
|
+
#00000040,
|
|
27
|
+
#00000030,
|
|
28
|
+
#00000020,
|
|
29
|
+
#00000010,
|
|
30
|
+
#00000010,
|
|
31
|
+
#00000080
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
--callout-rgb: 238, 240, 241;
|
|
35
|
+
--callout-border-rgb: 172, 175, 176;
|
|
36
|
+
--card-rgb: 180, 185, 188;
|
|
37
|
+
--card-border-rgb: 131, 134, 135;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media (prefers-color-scheme: dark) {
|
|
41
|
+
:root {
|
|
42
|
+
--foreground-rgb: 255, 255, 255;
|
|
43
|
+
--background-start-rgb: 0, 0, 0;
|
|
44
|
+
--background-end-rgb: 0, 0, 0;
|
|
45
|
+
|
|
46
|
+
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
|
|
47
|
+
--secondary-glow: linear-gradient(
|
|
48
|
+
to bottom right,
|
|
49
|
+
rgba(1, 65, 255, 0),
|
|
50
|
+
rgba(1, 65, 255, 0),
|
|
51
|
+
rgba(1, 65, 255, 0.3)
|
|
52
|
+
);
|
|
53
|
+
|
|
54
|
+
--tile-start-rgb: 2, 13, 46;
|
|
55
|
+
--tile-end-rgb: 2, 5, 19;
|
|
56
|
+
--tile-border: conic-gradient(
|
|
57
|
+
#ffffff80,
|
|
58
|
+
#ffffff40,
|
|
59
|
+
#ffffff30,
|
|
60
|
+
#ffffff20,
|
|
61
|
+
#ffffff10,
|
|
62
|
+
#ffffff10,
|
|
63
|
+
#ffffff80
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
--callout-rgb: 20, 20, 20;
|
|
67
|
+
--callout-border-rgb: 108, 108, 108;
|
|
68
|
+
--card-rgb: 100, 100, 100;
|
|
69
|
+
--card-border-rgb: 200, 200, 200;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
* {
|
|
74
|
+
box-sizing: border-box;
|
|
75
|
+
padding: 0;
|
|
76
|
+
margin: 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
html,
|
|
80
|
+
body {
|
|
81
|
+
max-width: 100vw;
|
|
82
|
+
overflow-x: hidden;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
a {
|
|
86
|
+
color: inherit;
|
|
87
|
+
text-decoration: none;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@media (prefers-color-scheme: dark) {
|
|
91
|
+
html {
|
|
92
|
+
color-scheme: dark;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { CMSHTMLAttributes } from "../../../global/attributes";
|
|
2
|
+
import { CommonStyleProperties } from "../../../global/style-properties";
|
|
3
|
+
import { DisplayValue, ResponsiveBehaviourTypes } from "../../../global/types";
|
|
4
|
+
import { BuilderAttributes } from "../common";
|
|
5
|
+
export interface TabContainerStyleProperties extends CommonStyleProperties {
|
|
6
|
+
minHeight: string;
|
|
7
|
+
minWidth: string;
|
|
8
|
+
maxWidth: string;
|
|
9
|
+
maxHeight: string;
|
|
10
|
+
gridArea: string;
|
|
11
|
+
display: DisplayValue;
|
|
12
|
+
boxSizing: string;
|
|
13
|
+
rowGap: string;
|
|
14
|
+
columnGap: string;
|
|
15
|
+
gridTemplateRows: string;
|
|
16
|
+
gridTemplateColumns: string;
|
|
17
|
+
}
|
|
18
|
+
export declare const getDefaultStyles: () => TabContainerStyleProperties;
|
|
19
|
+
export interface CommonContainerElementAttributes extends CMSHTMLAttributes {
|
|
20
|
+
role?: string;
|
|
21
|
+
ariaLabel?: string;
|
|
22
|
+
ariaDescribedBy?: string;
|
|
23
|
+
id?: string;
|
|
24
|
+
className?: string;
|
|
25
|
+
lang?: string;
|
|
26
|
+
dataMeta?: string;
|
|
27
|
+
}
|
|
28
|
+
export interface TabContainerElementInterface {
|
|
29
|
+
id?: string | number;
|
|
30
|
+
uniqueKey?: string | number;
|
|
31
|
+
attributes?: {
|
|
32
|
+
BUILDER?: Pick<BuilderAttributes, "dataDivType" | "dataType" | "dataElementType" | "dataDropElement">;
|
|
33
|
+
HTML?: CommonContainerElementAttributes;
|
|
34
|
+
CUSTOM?: any;
|
|
35
|
+
};
|
|
36
|
+
styles?: TabContainerStyleProperties;
|
|
37
|
+
editedStyles?: CommonStyleProperties;
|
|
38
|
+
responsiveBehaviour: ResponsiveBehaviourTypes;
|
|
39
|
+
children: any;
|
|
40
|
+
childIds: any[];
|
|
41
|
+
previewImage?: string;
|
|
42
|
+
isMaximized?: boolean;
|
|
43
|
+
parentKey?: any;
|
|
44
|
+
childIdsV2?: any[];
|
|
45
|
+
}
|
|
@@ -35,6 +35,8 @@ export declare enum CMSToolIdTypes {
|
|
|
35
35
|
cmsPageLoader = "cms-page-loader",
|
|
36
36
|
dataDropElement = "cms-drop-element",
|
|
37
37
|
containerWrapper = "cms-container-wrapper",
|
|
38
|
+
tabsWrapperV2 = "cms-tabs-v2-wrapper",
|
|
39
|
+
tabsContainerWrapperV2 = "cms-tabs-container-wrapper",
|
|
38
40
|
stackWrapper = "cms-stack-wrapper",
|
|
39
41
|
cmsSubElementLayer = "cms-sub-element-layer",
|
|
40
42
|
editorHeader = "cms-editor-header",
|
|
@@ -114,6 +116,7 @@ export declare enum CMSElementSelectors {
|
|
|
114
116
|
subCategoryElement = "div[data-element-type='subCategory']",
|
|
115
117
|
categoryWidgetElement = "div[data-element-type='categoryWidget']",
|
|
116
118
|
tabsElement = "div[data-element-type='tabs']",
|
|
119
|
+
tabsV2Element = "div[data-element-type='tabs-v2']",
|
|
117
120
|
imageHotspot = "div[data-element-type='imageHotspot']",
|
|
118
121
|
gridSwapBtn = "div[data-cms-tool='cms-grid-swap-btn']",
|
|
119
122
|
lightBox = "#cms_lt_bx_mn"
|
|
@@ -280,6 +283,8 @@ export declare const CMSElementsListEnum: {
|
|
|
280
283
|
CART_SUMMARY: string;
|
|
281
284
|
ALLOCATION_DETAILS: string;
|
|
282
285
|
LINE: string;
|
|
286
|
+
TABS_V2: string;
|
|
287
|
+
TABS_CONTAINER: string;
|
|
283
288
|
};
|
|
284
289
|
export declare enum CMSResponsiveModeEnums {
|
|
285
290
|
DESKTOP = "desktop",
|
|
@@ -333,7 +338,8 @@ export declare enum CMSCustomEventServiceTypesEnum {
|
|
|
333
338
|
export declare enum CMSCustomEventsListEnums {
|
|
334
339
|
LIGHTBOX = "customLightBoxV1",
|
|
335
340
|
UOMSELECTOR = "uomSelectorV1",
|
|
336
|
-
TEXTELEMENTCODEVIEW = "textElementCodeView"
|
|
341
|
+
TEXTELEMENTCODEVIEW = "textElementCodeView",
|
|
342
|
+
PRODUCT_DETAILS_STATE = "productDetailsState"
|
|
337
343
|
}
|
|
338
344
|
export declare enum FlexAppVersionEnums {
|
|
339
345
|
NESTEDJSON = 1,
|
|
@@ -58,4 +58,5 @@ import * as searchResultsHeadingSchema from "./elements/search-results-heading/i
|
|
|
58
58
|
import * as itemStockSchema from "./elements/item-stock/index";
|
|
59
59
|
import * as lineItemSchema from "./elements/line/index";
|
|
60
60
|
import * as tabsV2Schema from "./elements/tab-v2/index";
|
|
61
|
-
|
|
61
|
+
import * as tabsContainerSchema from "./elements/tab-container/index";
|
|
62
|
+
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, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, };
|
|
@@ -73,4 +73,5 @@ import * as cartSummary from "./cartSummary";
|
|
|
73
73
|
import * as allocationDetails from "./allocationDetails";
|
|
74
74
|
import * as line from "./line";
|
|
75
75
|
import * as tabsV2 from "./tabsV2";
|
|
76
|
-
|
|
76
|
+
import * as tabContainer from "./tabContainer";
|
|
77
|
+
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, allocationDetails, line, tabsV2, tabContainer, };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { CMSElementEditPopupDesignInterface, CMSElementEditPopupInterface, CMSElementEditPopupLayoutInterface } from "./common";
|
|
2
|
+
export interface selfDesignInterface {
|
|
3
|
+
selectorKey: string;
|
|
4
|
+
}
|
|
5
|
+
export declare enum selfSelectorKeysEnum {
|
|
6
|
+
LAYOUT = "layout",
|
|
7
|
+
DESIGN = "design"
|
|
8
|
+
}
|
|
9
|
+
export declare const getDefaultData: () => CMSElementEditPopupInterface<CMSElementEditPopupLayoutInterface, selfDesignInterface & CMSElementEditPopupDesignInterface>;
|