@cntrl-site/components 0.1.0-1 → 0.1.0-10

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.
@@ -132,7 +132,7 @@ export declare const ControlSliderComponent: {
132
132
  };
133
133
  };
134
134
  color: {
135
- name: string;
135
+ title: string;
136
136
  type: string;
137
137
  display: {
138
138
  type: string;
@@ -140,7 +140,7 @@ export declare const ControlSliderComponent: {
140
140
  };
141
141
  };
142
142
  hover: {
143
- name: string;
143
+ title: string;
144
144
  type: string;
145
145
  display: {
146
146
  type: string;
@@ -185,7 +185,7 @@ export declare const ControlSliderComponent: {
185
185
  };
186
186
  scale: {
187
187
  type: string;
188
- name: string;
188
+ title: string;
189
189
  min: number;
190
190
  max: number;
191
191
  display: {
@@ -204,7 +204,7 @@ export declare const ControlSliderComponent: {
204
204
  };
205
205
  };
206
206
  hover: {
207
- name: string;
207
+ title: string;
208
208
  type: string;
209
209
  display: {
210
210
  type: string;
@@ -29,7 +29,6 @@ type Alignment = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'midd
29
29
  type Caption = {
30
30
  isActive: boolean;
31
31
  alignment: Alignment;
32
- color: string;
33
32
  offset: Offset;
34
33
  hover: string;
35
34
  };
package/dist/index.js CHANGED
@@ -584,7 +584,7 @@ const ControlSliderComponent = {
584
584
  }
585
585
  },
586
586
  color: {
587
- name: "color",
587
+ title: "color",
588
588
  type: "string",
589
589
  display: {
590
590
  type: "settings-color-picker",
@@ -592,7 +592,7 @@ const ControlSliderComponent = {
592
592
  }
593
593
  },
594
594
  hover: {
595
- name: "hover",
595
+ title: "hover",
596
596
  type: "string",
597
597
  display: {
598
598
  type: "settings-color-picker",
@@ -637,7 +637,7 @@ const ControlSliderComponent = {
637
637
  },
638
638
  scale: {
639
639
  type: "number",
640
- name: "scale",
640
+ title: "scale",
641
641
  min: 10,
642
642
  max: 400,
643
643
  display: {
@@ -656,7 +656,7 @@ const ControlSliderComponent = {
656
656
  }
657
657
  },
658
658
  hover: {
659
- name: "hover",
659
+ title: "hover",
660
660
  type: "string",
661
661
  display: {
662
662
  type: "settings-color-picker",
@@ -1696,7 +1696,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1696
1696
  )
1697
1697
  ] }),
1698
1698
  settings.area.closeIconUrl && /* @__PURE__ */ jsxRuntime.jsx("button", { className: styles.closeButton, style: { top: settings.area.closeIconOffset.y, left: settings.area.closeIconOffset.x }, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { url: settings.area.closeIconUrl, fill: settings.area.color }) }),
1699
- settings.caption.isActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.caption, style: { top: settings.caption.offset.y, left: settings.caption.offset.x, color: settings.caption.color }, children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
1699
+ settings.caption.isActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.caption, style: { top: settings.caption.offset.y, left: settings.caption.offset.x }, children: /* @__PURE__ */ jsxRuntime.jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
1700
1700
  settings.thumbnail.isActive && /* @__PURE__ */ jsxRuntime.jsx(
1701
1701
  "div",
1702
1702
  {
@@ -1767,7 +1767,7 @@ const LightboxComponent = {
1767
1767
  properties: {
1768
1768
  cover: {
1769
1769
  title: "COVER",
1770
- icon: "image",
1770
+ icon: "cover",
1771
1771
  tooltip: "Cover Image",
1772
1772
  type: "object",
1773
1773
  properties: {
@@ -1794,7 +1794,7 @@ const LightboxComponent = {
1794
1794
  },
1795
1795
  duration: {
1796
1796
  type: "string",
1797
- label: "hourglass-icon",
1797
+ label: "T",
1798
1798
  display: {
1799
1799
  type: "step-selector"
1800
1800
  },
@@ -1807,7 +1807,7 @@ const LightboxComponent = {
1807
1807
  visible: false,
1808
1808
  type: "direction-control"
1809
1809
  },
1810
- enum: ["top", "bottom", "left", "right"]
1810
+ enum: ["top", "right", "bottom", "left"]
1811
1811
  },
1812
1812
  repeat: {
1813
1813
  type: "string",
@@ -1841,7 +1841,7 @@ const LightboxComponent = {
1841
1841
  },
1842
1842
  duration: {
1843
1843
  type: "string",
1844
- label: "hourglass-icon",
1844
+ label: "T",
1845
1845
  display: {
1846
1846
  type: "step-selector"
1847
1847
  },
@@ -1874,7 +1874,7 @@ const LightboxComponent = {
1874
1874
  },
1875
1875
  thumbnail: {
1876
1876
  title: "THUMB",
1877
- icon: "pagination",
1877
+ icon: "thumbnail",
1878
1878
  tooltip: "Thumbnail",
1879
1879
  type: "object",
1880
1880
  properties: {
@@ -1902,7 +1902,7 @@ const LightboxComponent = {
1902
1902
  type: "string",
1903
1903
  title: "Align",
1904
1904
  display: {
1905
- type: "ratio-group"
1905
+ type: "align-vertical"
1906
1906
  },
1907
1907
  enum: ["top", "center", "bottom"]
1908
1908
  },
@@ -1910,9 +1910,10 @@ const LightboxComponent = {
1910
1910
  type: "string",
1911
1911
  title: "Triggers",
1912
1912
  display: {
1913
- type: "ratio-group"
1913
+ type: "ratio-group",
1914
+ direction: "horizontal"
1914
1915
  },
1915
- enum: ["click", "hover"]
1916
+ enum: ["clk", "hov"]
1916
1917
  },
1917
1918
  grid: {
1918
1919
  type: "object",
@@ -2105,7 +2106,7 @@ const LightboxComponent = {
2105
2106
  },
2106
2107
  area: {
2107
2108
  title: "AREA",
2108
- icon: "background",
2109
+ icon: "area",
2109
2110
  tooltip: "Area",
2110
2111
  type: "object",
2111
2112
  properties: {
@@ -2181,14 +2182,6 @@ const LightboxComponent = {
2181
2182
  }
2182
2183
  }
2183
2184
  },
2184
- color: {
2185
- title: "Color",
2186
- type: "string",
2187
- display: {
2188
- type: "settings-color-picker",
2189
- format: "single"
2190
- }
2191
- },
2192
2185
  hover: {
2193
2186
  title: "Hover",
2194
2187
  type: "string",
@@ -2254,12 +2247,11 @@ const LightboxComponent = {
2254
2247
  blur: 0,
2255
2248
  closeIconUrl: null,
2256
2249
  closeIconAlign: "top-right",
2257
- closeIconOffset: { x: 12, y: 12 }
2250
+ closeIconOffset: { x: 0, y: 0 }
2258
2251
  },
2259
2252
  caption: {
2260
2253
  alignment: "middle-center",
2261
2254
  offset: { x: 0, y: 0 },
2262
- color: "#000000",
2263
2255
  hover: "#cccccc"
2264
2256
  }
2265
2257
  },
@@ -2288,9 +2280,9 @@ const LightboxComponent = {
2288
2280
  properties: {
2289
2281
  image: {
2290
2282
  type: "object",
2283
+ label: "Image",
2291
2284
  display: {
2292
2285
  type: "media-input",
2293
- label: "Image",
2294
2286
  minWidth: 58,
2295
2287
  maxWidth: 108
2296
2288
  },
@@ -2309,10 +2301,10 @@ const LightboxComponent = {
2309
2301
  required: ["url", "name"]
2310
2302
  },
2311
2303
  imageCaption: {
2304
+ label: "Description",
2305
+ placeholder: "Add Caption...",
2312
2306
  display: {
2313
2307
  type: "rich-text",
2314
- label: "Description",
2315
- placeholder: "Add Caption...",
2316
2308
  minWidth: 300,
2317
2309
  maxWidth: 550
2318
2310
  }
package/dist/index.mjs CHANGED
@@ -582,7 +582,7 @@ const ControlSliderComponent = {
582
582
  }
583
583
  },
584
584
  color: {
585
- name: "color",
585
+ title: "color",
586
586
  type: "string",
587
587
  display: {
588
588
  type: "settings-color-picker",
@@ -590,7 +590,7 @@ const ControlSliderComponent = {
590
590
  }
591
591
  },
592
592
  hover: {
593
- name: "hover",
593
+ title: "hover",
594
594
  type: "string",
595
595
  display: {
596
596
  type: "settings-color-picker",
@@ -635,7 +635,7 @@ const ControlSliderComponent = {
635
635
  },
636
636
  scale: {
637
637
  type: "number",
638
- name: "scale",
638
+ title: "scale",
639
639
  min: 10,
640
640
  max: 400,
641
641
  display: {
@@ -654,7 +654,7 @@ const ControlSliderComponent = {
654
654
  }
655
655
  },
656
656
  hover: {
657
- name: "hover",
657
+ title: "hover",
658
658
  type: "string",
659
659
  display: {
660
660
  type: "settings-color-picker",
@@ -1694,7 +1694,7 @@ const Lightbox = ({ isOpen, onClose, content, settings, closeOnBackdropClick = t
1694
1694
  )
1695
1695
  ] }),
1696
1696
  settings.area.closeIconUrl && /* @__PURE__ */ jsx("button", { className: styles.closeButton, style: { top: settings.area.closeIconOffset.y, left: settings.area.closeIconOffset.x }, onClick: onClose, children: /* @__PURE__ */ jsx(SvgImage, { url: settings.area.closeIconUrl, fill: settings.area.color }) }),
1697
- settings.caption.isActive && /* @__PURE__ */ jsx("div", { className: styles.caption, style: { top: settings.caption.offset.y, left: settings.caption.offset.x, color: settings.caption.color }, children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
1697
+ settings.caption.isActive && /* @__PURE__ */ jsx("div", { className: styles.caption, style: { top: settings.caption.offset.y, left: settings.caption.offset.x }, children: /* @__PURE__ */ jsx(RichTextRenderer, { content: content[currentIndex].imageCaption }) }),
1698
1698
  settings.thumbnail.isActive && /* @__PURE__ */ jsx(
1699
1699
  "div",
1700
1700
  {
@@ -1765,7 +1765,7 @@ const LightboxComponent = {
1765
1765
  properties: {
1766
1766
  cover: {
1767
1767
  title: "COVER",
1768
- icon: "image",
1768
+ icon: "cover",
1769
1769
  tooltip: "Cover Image",
1770
1770
  type: "object",
1771
1771
  properties: {
@@ -1792,7 +1792,7 @@ const LightboxComponent = {
1792
1792
  },
1793
1793
  duration: {
1794
1794
  type: "string",
1795
- label: "hourglass-icon",
1795
+ label: "T",
1796
1796
  display: {
1797
1797
  type: "step-selector"
1798
1798
  },
@@ -1805,7 +1805,7 @@ const LightboxComponent = {
1805
1805
  visible: false,
1806
1806
  type: "direction-control"
1807
1807
  },
1808
- enum: ["top", "bottom", "left", "right"]
1808
+ enum: ["top", "right", "bottom", "left"]
1809
1809
  },
1810
1810
  repeat: {
1811
1811
  type: "string",
@@ -1839,7 +1839,7 @@ const LightboxComponent = {
1839
1839
  },
1840
1840
  duration: {
1841
1841
  type: "string",
1842
- label: "hourglass-icon",
1842
+ label: "T",
1843
1843
  display: {
1844
1844
  type: "step-selector"
1845
1845
  },
@@ -1872,7 +1872,7 @@ const LightboxComponent = {
1872
1872
  },
1873
1873
  thumbnail: {
1874
1874
  title: "THUMB",
1875
- icon: "pagination",
1875
+ icon: "thumbnail",
1876
1876
  tooltip: "Thumbnail",
1877
1877
  type: "object",
1878
1878
  properties: {
@@ -1900,7 +1900,7 @@ const LightboxComponent = {
1900
1900
  type: "string",
1901
1901
  title: "Align",
1902
1902
  display: {
1903
- type: "ratio-group"
1903
+ type: "align-vertical"
1904
1904
  },
1905
1905
  enum: ["top", "center", "bottom"]
1906
1906
  },
@@ -1908,9 +1908,10 @@ const LightboxComponent = {
1908
1908
  type: "string",
1909
1909
  title: "Triggers",
1910
1910
  display: {
1911
- type: "ratio-group"
1911
+ type: "ratio-group",
1912
+ direction: "horizontal"
1912
1913
  },
1913
- enum: ["click", "hover"]
1914
+ enum: ["clk", "hov"]
1914
1915
  },
1915
1916
  grid: {
1916
1917
  type: "object",
@@ -2103,7 +2104,7 @@ const LightboxComponent = {
2103
2104
  },
2104
2105
  area: {
2105
2106
  title: "AREA",
2106
- icon: "background",
2107
+ icon: "area",
2107
2108
  tooltip: "Area",
2108
2109
  type: "object",
2109
2110
  properties: {
@@ -2179,14 +2180,6 @@ const LightboxComponent = {
2179
2180
  }
2180
2181
  }
2181
2182
  },
2182
- color: {
2183
- title: "Color",
2184
- type: "string",
2185
- display: {
2186
- type: "settings-color-picker",
2187
- format: "single"
2188
- }
2189
- },
2190
2183
  hover: {
2191
2184
  title: "Hover",
2192
2185
  type: "string",
@@ -2252,12 +2245,11 @@ const LightboxComponent = {
2252
2245
  blur: 0,
2253
2246
  closeIconUrl: null,
2254
2247
  closeIconAlign: "top-right",
2255
- closeIconOffset: { x: 12, y: 12 }
2248
+ closeIconOffset: { x: 0, y: 0 }
2256
2249
  },
2257
2250
  caption: {
2258
2251
  alignment: "middle-center",
2259
2252
  offset: { x: 0, y: 0 },
2260
- color: "#000000",
2261
2253
  hover: "#cccccc"
2262
2254
  }
2263
2255
  },
@@ -2286,9 +2278,9 @@ const LightboxComponent = {
2286
2278
  properties: {
2287
2279
  image: {
2288
2280
  type: "object",
2281
+ label: "Image",
2289
2282
  display: {
2290
2283
  type: "media-input",
2291
- label: "Image",
2292
2284
  minWidth: 58,
2293
2285
  maxWidth: 108
2294
2286
  },
@@ -2307,10 +2299,10 @@ const LightboxComponent = {
2307
2299
  required: ["url", "name"]
2308
2300
  },
2309
2301
  imageCaption: {
2302
+ label: "Description",
2303
+ placeholder: "Add Caption...",
2310
2304
  display: {
2311
2305
  type: "rich-text",
2312
- label: "Description",
2313
- placeholder: "Add Caption...",
2314
2306
  minWidth: 300,
2315
2307
  maxWidth: 550
2316
2308
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/components",
3
- "version": "0.1.0-1",
3
+ "version": "0.1.0-10",
4
4
  "description": "Custom components for control editor and public websites.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",