@cntrl-site/components 1.0.12-0 → 1.0.12-1
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/Components/ControlSlider/ControlSlider.d.ts +2 -25
- package/dist/Components/Form/FormComponent.d.ts +3 -9
- package/dist/Components/Grid/Grid.d.ts +61 -0
- package/dist/Components/Grid/GridComponent.d.ts +42 -0
- package/dist/Components/Lightbox/Lightbox.d.ts +2 -25
- package/dist/Components/List/List.d.ts +105 -0
- package/dist/Components/List/ListComponent.d.ts +42 -0
- package/dist/Components/OnelinerForm/OnelinerFormComponent.d.ts +3 -14
- package/dist/Components/utils/getMainFontBaseOnSystem.d.ts +1 -0
- package/dist/index.js +3143 -210
- package/dist/index.mjs +8369 -2889
- package/dist/types/Component.d.ts +1 -0
- package/dist/types/SchemaV1.d.ts +2 -1
- package/dist/types/TextElementStyles.d.ts +24 -0
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { CommonComponentProps } from '../props';
|
|
2
|
+
import { TextElementStyles } from '../../types/TextElementStyles';
|
|
2
3
|
type SliderProps = {
|
|
3
4
|
settings: SliderSettings;
|
|
4
5
|
content: SliderItem[];
|
|
@@ -63,31 +64,7 @@ type SliderSettings = {
|
|
|
63
64
|
imageCaption: SliderCaption;
|
|
64
65
|
triggers: Triggers;
|
|
65
66
|
};
|
|
66
|
-
type CaptionStyles = {
|
|
67
|
-
fontSettings: {
|
|
68
|
-
fontFamily: string;
|
|
69
|
-
fontWeight: number;
|
|
70
|
-
fontStyle: string;
|
|
71
|
-
};
|
|
72
|
-
widthSettings: {
|
|
73
|
-
width: number;
|
|
74
|
-
sizing: 'auto' | 'manual';
|
|
75
|
-
};
|
|
76
|
-
letterSpacing: number;
|
|
77
|
-
textAlign: 'left' | 'center' | 'right';
|
|
78
|
-
wordSpacing: number;
|
|
79
|
-
fontSizeLineHeight: {
|
|
80
|
-
fontSize: number;
|
|
81
|
-
lineHeight: number;
|
|
82
|
-
};
|
|
83
|
-
textAppearance: {
|
|
84
|
-
textTransform: 'none' | 'uppercase' | 'lowercase';
|
|
85
|
-
textDecoration: 'none' | 'underline';
|
|
86
|
-
fontVariant: 'normal' | 'small-caps';
|
|
87
|
-
};
|
|
88
|
-
color: string;
|
|
89
|
-
};
|
|
90
67
|
type SliderStyles = {
|
|
91
|
-
imageCaption:
|
|
68
|
+
imageCaption: TextElementStyles;
|
|
92
69
|
};
|
|
93
70
|
export {};
|
|
@@ -712,17 +712,11 @@ export declare const FormComponent: {
|
|
|
712
712
|
} | {
|
|
713
713
|
type: "group";
|
|
714
714
|
title: string;
|
|
715
|
-
items:
|
|
715
|
+
items: {
|
|
716
716
|
type: "row";
|
|
717
|
+
title: string;
|
|
717
718
|
items: string[];
|
|
718
|
-
}
|
|
719
|
-
type: "row";
|
|
720
|
-
items: {
|
|
721
|
-
type: "group";
|
|
722
|
-
title: string;
|
|
723
|
-
items: string[];
|
|
724
|
-
}[];
|
|
725
|
-
})[];
|
|
719
|
+
}[];
|
|
726
720
|
})[];
|
|
727
721
|
})[];
|
|
728
722
|
} | {
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { CommonComponentProps } from '../props';
|
|
2
|
+
import { TextStyles } from '../utils/textStylesToCss';
|
|
3
|
+
type GridProps = {
|
|
4
|
+
layoutId?: string;
|
|
5
|
+
settings: GridSettings;
|
|
6
|
+
content?: any;
|
|
7
|
+
isEditor?: boolean;
|
|
8
|
+
isPreviewMode?: boolean;
|
|
9
|
+
activeEvent: string | undefined;
|
|
10
|
+
onUpdateSettings?: (settings: GridSettings) => void;
|
|
11
|
+
} & CommonComponentProps;
|
|
12
|
+
export declare function Grid({ settings, content, isEditor, isPreviewMode, metadata, activeEvent, layoutId }: GridProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
type GridLayoutConfig = {
|
|
14
|
+
entryWidth: number;
|
|
15
|
+
horizontalGap: number;
|
|
16
|
+
wrapperWidth: number;
|
|
17
|
+
columnsCount: number;
|
|
18
|
+
lockedParam?: 'wrapperWidth' | 'entryWidth' | 'horizontalGap' | null;
|
|
19
|
+
};
|
|
20
|
+
type GridSettings = {
|
|
21
|
+
type: 'A' | 'B';
|
|
22
|
+
gridLayout: GridLayoutConfig;
|
|
23
|
+
textBoxWidth: number;
|
|
24
|
+
verticalGap: number;
|
|
25
|
+
entriesCount: number;
|
|
26
|
+
lightbox: 'On' | 'Off';
|
|
27
|
+
imageDisplay: {
|
|
28
|
+
display: 'Fit' | 'Cover';
|
|
29
|
+
ratioValue: '1:1' | '2:3' | '3:4' | '4:5' | '16:9';
|
|
30
|
+
reversed: boolean;
|
|
31
|
+
};
|
|
32
|
+
slider: 'On' | 'Off';
|
|
33
|
+
sliderTiming: number;
|
|
34
|
+
direction: 'Horizontal' | 'Vertical' | 'Random';
|
|
35
|
+
transition: 'Fade' | 'Slide';
|
|
36
|
+
titleMarginTop: number;
|
|
37
|
+
subtitleMarginTop: number;
|
|
38
|
+
titleColor: string;
|
|
39
|
+
subtitleColor: string;
|
|
40
|
+
titleFontFamily: string;
|
|
41
|
+
titleFontSettings?: {
|
|
42
|
+
fontWeight: number;
|
|
43
|
+
fontStyle: string;
|
|
44
|
+
};
|
|
45
|
+
titleFontSize?: number;
|
|
46
|
+
titleLineHeight?: number;
|
|
47
|
+
titleLetterSpacing?: number;
|
|
48
|
+
titleWordSpacing?: number;
|
|
49
|
+
titleTextAppearance?: TextStyles['textAppearance'];
|
|
50
|
+
subtitleFontFamily: string;
|
|
51
|
+
subtitleFontSettings?: {
|
|
52
|
+
fontWeight: number;
|
|
53
|
+
fontStyle: string;
|
|
54
|
+
};
|
|
55
|
+
subtitleFontSize?: number;
|
|
56
|
+
subtitleLineHeight?: number;
|
|
57
|
+
subtitleLetterSpacing?: number;
|
|
58
|
+
subtitleWordSpacing?: number;
|
|
59
|
+
subtitleTextAppearance?: TextStyles['textAppearance'];
|
|
60
|
+
};
|
|
61
|
+
export {};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { Grid } from './Grid';
|
|
2
|
+
import { ComponentSchemaV1 } from '../../types/SchemaV1';
|
|
3
|
+
type GridSchema = ComponentSchemaV1 & {
|
|
4
|
+
properties: {
|
|
5
|
+
content: {
|
|
6
|
+
type: 'array';
|
|
7
|
+
settings?: {
|
|
8
|
+
addItemFromFileExplorer?: boolean;
|
|
9
|
+
};
|
|
10
|
+
items: any;
|
|
11
|
+
default: any[];
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export declare const GridComponent: {
|
|
16
|
+
element: typeof Grid;
|
|
17
|
+
id: string;
|
|
18
|
+
name: string;
|
|
19
|
+
category: string;
|
|
20
|
+
layoutMode: "structured";
|
|
21
|
+
preview: {
|
|
22
|
+
type: "image";
|
|
23
|
+
url: string;
|
|
24
|
+
};
|
|
25
|
+
version: number;
|
|
26
|
+
defaultSize: {
|
|
27
|
+
d: {
|
|
28
|
+
width: number;
|
|
29
|
+
height: number;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
assetsPaths: {
|
|
33
|
+
content: {
|
|
34
|
+
path: string;
|
|
35
|
+
placeholderEnabled: boolean;
|
|
36
|
+
}[];
|
|
37
|
+
parameters: never[];
|
|
38
|
+
};
|
|
39
|
+
schema: GridSchema;
|
|
40
|
+
sourceCode: string;
|
|
41
|
+
};
|
|
42
|
+
export {};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Alignment, Offset } from '../utils/getPositionStyles';
|
|
2
|
+
import { TextElementStyles } from '../../types/TextElementStyles';
|
|
2
3
|
type LightboxGalleryProps = {
|
|
3
4
|
settings: LightboxSettings;
|
|
4
5
|
content: LightboxImage[];
|
|
@@ -98,30 +99,6 @@ type LightboxSettings = {
|
|
|
98
99
|
};
|
|
99
100
|
};
|
|
100
101
|
type LightboxStyles = {
|
|
101
|
-
imageCaption:
|
|
102
|
-
};
|
|
103
|
-
type CaptionStyles = {
|
|
104
|
-
fontSettings: {
|
|
105
|
-
fontFamily: string;
|
|
106
|
-
fontWeight: number;
|
|
107
|
-
fontStyle: string;
|
|
108
|
-
};
|
|
109
|
-
widthSettings: {
|
|
110
|
-
width: number;
|
|
111
|
-
sizing: 'auto' | 'manual';
|
|
112
|
-
};
|
|
113
|
-
letterSpacing: number;
|
|
114
|
-
textAlign: 'left' | 'center' | 'right';
|
|
115
|
-
wordSpacing: number;
|
|
116
|
-
fontSizeLineHeight: {
|
|
117
|
-
fontSize: number;
|
|
118
|
-
lineHeight: number;
|
|
119
|
-
};
|
|
120
|
-
textAppearance: {
|
|
121
|
-
textTransform: 'none' | 'uppercase' | 'lowercase';
|
|
122
|
-
textDecoration: 'none' | 'underline';
|
|
123
|
-
fontVariant: 'normal' | 'small-caps';
|
|
124
|
-
};
|
|
125
|
-
color: string;
|
|
102
|
+
imageCaption: TextElementStyles;
|
|
126
103
|
};
|
|
127
104
|
export {};
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { CommonComponentProps } from '../props';
|
|
2
|
+
import { TextStyles } from '../utils/textStylesToCss';
|
|
3
|
+
type ListSettings = {
|
|
4
|
+
columns: number;
|
|
5
|
+
type: 'A' | 'B';
|
|
6
|
+
wrapperWidth: number;
|
|
7
|
+
entriesCount: number;
|
|
8
|
+
cellMinHeight: number;
|
|
9
|
+
imageOnHover: 'On' | 'Off';
|
|
10
|
+
imageSize?: {
|
|
11
|
+
min: number;
|
|
12
|
+
max: number;
|
|
13
|
+
};
|
|
14
|
+
dividerWidth: number;
|
|
15
|
+
showVisibility: boolean[];
|
|
16
|
+
cut: number;
|
|
17
|
+
showCut: number;
|
|
18
|
+
cutCellMinHeight: number;
|
|
19
|
+
cutLabel: string;
|
|
20
|
+
entryHoverEffect: 'None' | 'Default' | 'Blinds';
|
|
21
|
+
rowPaddingTop: number;
|
|
22
|
+
rowPaddingBottom: number;
|
|
23
|
+
rowPaddingTopB: number;
|
|
24
|
+
AColumnWidth: number;
|
|
25
|
+
AColumnPaddingLeft: number;
|
|
26
|
+
AColumnPaddingRight: number;
|
|
27
|
+
AColumnPaddingBottom: number;
|
|
28
|
+
BColumnWidth: number;
|
|
29
|
+
BColumnPaddingLeft: number;
|
|
30
|
+
BColumnPaddingRight: number;
|
|
31
|
+
BColumnPaddingBottom: number;
|
|
32
|
+
CColumnWidth: number;
|
|
33
|
+
CColumnPaddingLeft: number;
|
|
34
|
+
CColumnPaddingRight: number;
|
|
35
|
+
CColumnPaddingBottom: number;
|
|
36
|
+
DColumnWidth: number;
|
|
37
|
+
DColumnPaddingLeft: number;
|
|
38
|
+
DColumnPaddingRight: number;
|
|
39
|
+
DColumnPaddingBottom: number;
|
|
40
|
+
EColumnWidth: number;
|
|
41
|
+
EColumnPaddingLeft: number;
|
|
42
|
+
EColumnPaddingRight: number;
|
|
43
|
+
EColumnPaddingBottom: number;
|
|
44
|
+
columnsOrder?: string[];
|
|
45
|
+
textPaddingLR?: number;
|
|
46
|
+
textColor: string;
|
|
47
|
+
textFontFamily: string;
|
|
48
|
+
textFontSettings?: {
|
|
49
|
+
fontWeight: number;
|
|
50
|
+
fontStyle: string;
|
|
51
|
+
};
|
|
52
|
+
textFontSize?: number;
|
|
53
|
+
textLineHeight?: number;
|
|
54
|
+
textLetterSpacing?: number;
|
|
55
|
+
textWordSpacing?: number;
|
|
56
|
+
textTextAppearance?: TextStyles['textAppearance'];
|
|
57
|
+
backgroundColor: string;
|
|
58
|
+
dividerColor: string;
|
|
59
|
+
textHoverColor: string;
|
|
60
|
+
backgroundHoverColor: string;
|
|
61
|
+
dividerHoverColor: string;
|
|
62
|
+
};
|
|
63
|
+
type ListContentItem = {
|
|
64
|
+
AColumn?: string;
|
|
65
|
+
BColumnWidth?: string;
|
|
66
|
+
CColumnWidth?: string;
|
|
67
|
+
DColumnWidth?: string;
|
|
68
|
+
EColumnWidth?: string;
|
|
69
|
+
image?: {
|
|
70
|
+
objectFit?: 'cover' | 'contain';
|
|
71
|
+
url: string;
|
|
72
|
+
name: string;
|
|
73
|
+
};
|
|
74
|
+
link?: string;
|
|
75
|
+
};
|
|
76
|
+
type ListProps = {
|
|
77
|
+
layoutId?: string;
|
|
78
|
+
settings: ListSettings;
|
|
79
|
+
content?: ListContentItem[];
|
|
80
|
+
isEditor?: boolean;
|
|
81
|
+
isPreviewMode?: boolean;
|
|
82
|
+
activeEvent: string | undefined;
|
|
83
|
+
onUpdateSettings?: (settings: ListSettings) => void;
|
|
84
|
+
} & CommonComponentProps;
|
|
85
|
+
export declare const COLUMN_CONTENT_KEYS: readonly ["AColumn", "BColumnWidth", "CColumnWidth", "DColumnWidth", "EColumnWidth"];
|
|
86
|
+
export declare const COLUMN_TEXT_PREFIXES: readonly ["AColumn", "BColumn", "CColumn", "DColumn", "EColumn"];
|
|
87
|
+
export declare const LIST_GLOBAL_TEXT_STYLE_KEYS: readonly ["textFontFamily", "textFontSettings", "textFontSize", "textLineHeight", "textLetterSpacing", "textWordSpacing", "textTextAppearance"];
|
|
88
|
+
export type ListGlobalTextStyleKey = typeof LIST_GLOBAL_TEXT_STYLE_KEYS[number];
|
|
89
|
+
export declare function getListColumnTextSettingKey(prefix: typeof COLUMN_TEXT_PREFIXES[number], globalKey: ListGlobalTextStyleKey): string;
|
|
90
|
+
declare const COLUMN_WIDTH_KEYS: readonly ["AColumnWidth", "BColumnWidth", "CColumnWidth", "DColumnWidth", "EColumnWidth"];
|
|
91
|
+
type ColumnWidthKey = typeof COLUMN_WIDTH_KEYS[number];
|
|
92
|
+
export declare function getListMinColumnWidth(designWidthPx?: number): number;
|
|
93
|
+
export declare function getListEffectiveContentWidth(settings: Record<string, unknown>): number;
|
|
94
|
+
export declare function getEqualListColumnWidthUpdates(columns: number, contentWidth?: number): Record<ColumnWidthKey, number>;
|
|
95
|
+
export declare function resolveListColumnPadding(columnWidth: number, paddingLeft: number, paddingRight: number): {
|
|
96
|
+
paddingLeft: number;
|
|
97
|
+
paddingRight: number;
|
|
98
|
+
};
|
|
99
|
+
export declare function getEffectiveListColumnWidths(columns: number, wrapperWidth: number, storedWidths: Record<ColumnWidthKey, number>): number[];
|
|
100
|
+
export declare function resolveListColumnWidths(columns: number, wrapperWidth: number, storedWidths: Record<ColumnWidthKey, number>): number[];
|
|
101
|
+
export declare function applyListSettingsChange(nextSettings: Record<string, unknown>, prevSettings: Record<string, unknown>, options?: {
|
|
102
|
+
designWidth?: number;
|
|
103
|
+
}): Record<string, unknown>;
|
|
104
|
+
export declare function List({ settings, content, isEditor, isPreviewMode, activeEvent, layoutId, onUpdateSettings }: ListProps): import("react/jsx-runtime").JSX.Element;
|
|
105
|
+
export {};
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { List } from './List';
|
|
2
|
+
import { ComponentSchemaV1 } from '../../types/SchemaV1';
|
|
3
|
+
type GridSchema = ComponentSchemaV1 & {
|
|
4
|
+
properties: {
|
|
5
|
+
content: {
|
|
6
|
+
type: 'array';
|
|
7
|
+
settings?: {
|
|
8
|
+
addItemFromFileExplorer?: boolean;
|
|
9
|
+
};
|
|
10
|
+
items: any;
|
|
11
|
+
default: any[];
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export declare const ListComponent: {
|
|
16
|
+
element: typeof List;
|
|
17
|
+
id: string;
|
|
18
|
+
name: string;
|
|
19
|
+
category: string;
|
|
20
|
+
layoutMode: "structured";
|
|
21
|
+
preview: {
|
|
22
|
+
type: "image";
|
|
23
|
+
url: string;
|
|
24
|
+
};
|
|
25
|
+
version: number;
|
|
26
|
+
defaultSize: {
|
|
27
|
+
d: {
|
|
28
|
+
width: number;
|
|
29
|
+
height: number;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
assetsPaths: {
|
|
33
|
+
content: {
|
|
34
|
+
path: string;
|
|
35
|
+
placeholderEnabled: boolean;
|
|
36
|
+
}[];
|
|
37
|
+
parameters: never[];
|
|
38
|
+
};
|
|
39
|
+
schema: GridSchema;
|
|
40
|
+
sourceCode: string;
|
|
41
|
+
};
|
|
42
|
+
export {};
|
|
@@ -585,22 +585,11 @@ export declare const OnelinerFormComponent: {
|
|
|
585
585
|
layout: (string | {
|
|
586
586
|
type: "row";
|
|
587
587
|
items: string[];
|
|
588
|
+
title?: undefined;
|
|
588
589
|
} | {
|
|
589
590
|
type: "row";
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
title: string;
|
|
593
|
-
items: string[];
|
|
594
|
-
options?: undefined;
|
|
595
|
-
} | {
|
|
596
|
-
type: "switcher";
|
|
597
|
-
title: string;
|
|
598
|
-
options: {
|
|
599
|
-
Input: string[];
|
|
600
|
-
Button: string[];
|
|
601
|
-
};
|
|
602
|
-
items?: undefined;
|
|
603
|
-
})[];
|
|
591
|
+
title: string;
|
|
592
|
+
items: string[];
|
|
604
593
|
})[];
|
|
605
594
|
} | {
|
|
606
595
|
id: string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getFontBasedOnSystem(): string;
|