@crystaldesign/content-item 26.8.0-beta.9 → 26.9.0-beta.2

package/build/esm/index.js

@@ -651,9 +651,10 @@ styleInject(css_248z$4);
 
 var fullscreenWrapper = "fullscreen-wrapper-TiWjP";
 var fullscreenButton = "fullscreen-button-unFbw";
+var fullscreenClose = "fullscreen-close--uM2v";
 var mySwiper2 = "mySwiper2-mfrK1";
 var mySwiper = "mySwiper-urn8y";
-var css_248z$3 = "#diva-content-item .swiper {\n  width: 100%;\n  height: 100%;\n}\n#diva-content-item .swiper-slide {\n  text-align: center;\n  font-size: 18px;\n  background: #fff;\n\n  /* Center slide text vertically */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.fullscreen-wrapper-TiWjP {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #fff;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  z-index: 2000005;\n}\n\n.fullscreen-button-unFbw {\n  cursor: pointer;\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  top: 16px;\n  right: 8px;\n  border-radius: 3px;\n  z-index: 1000;\n  background: center / 75% no-repeat rgba(255,255,255,0.53333) url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 1H2C1.44772 1 1 1.44772 1 2V22C1 22.5523 1.44772 23 2 23H21.9999C22.5522 23 22.9999 22.5523 22.9999 22V12M16.0078 1H21.9989C22.5512 1 22.9989 1.44772 22.9989 2V7.99114M22.5002 1.5L13.3195 10.68%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.mobile #diva-content-item .swiper-slide {\n  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;\n  background: initial;\n}\n\n#diva-content-item .swiper {\n  width: 100%;\n  height: 350px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.in-gallery-in-fullscreen #DivaContentItemGallery {\n  height: 90% !important;\n  width: 90% !important;\n}\n\n.in-gallery-in-fullscreen #diva-content-item .mySwiper2-mfrK1 {\n  height: 100%;\n}\n\n#diva-content-item .swiper-slide {\n  background-size: cover;\n  background-position: center;\n}\n#diva-content-item .mySwiper2-mfrK1 {\n  height: 80%;\n  width: 100%;\n}\n#diva-content-item .mySwiper-urn8y {\n  height: 20%;\n  box-sizing: border-box;\n  padding: 10px 0;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide {\n  width: 25%;\n  height: 100%;\n  opacity: 0.4;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide-thumb-active {\n  opacity: 1;\n}\n";
+var css_248z$3 = "#diva-content-item .swiper {\n  width: 100%;\n  height: 100%;\n}\n#diva-content-item .swiper-slide {\n  text-align: center;\n  font-size: 18px;\n  background: #fff;\n\n  /* Center slide text vertically */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.fullscreen-wrapper-TiWjP {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #fff;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  z-index: 2000005;\n}\n\n.fullscreen-button-unFbw {\n  cursor: pointer;\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  top: 16px;\n  right: 8px;\n  border-radius: 3px;\n  z-index: 1000;\n  background: center / 75% no-repeat rgba(255,255,255,0.53333) url(\"data:image/svg+xml,%3Csvg width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M12 1H2C1.44772 1 1 1.44772 1 2V22C1 22.5523 1.44772 23 2 23H21.9999C22.5522 23 22.9999 22.5523 22.9999 22V12M16.0078 1H21.9989C22.5512 1 22.9989 1.44772 22.9989 2V7.99114M22.5002 1.5L13.3195 10.68%22 stroke%3D%22%234B4B4B%22 stroke-width%3D%221.5%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n/* Matches the content-item header close button (grey cross, circle, border on hover) */\n.fullscreen-close--uM2v {\n  position: absolute;\n  top: 24px;\n  right: 24px;\n  width: 32px;\n  height: 32px;\n  z-index: 2000010;\n  cursor: pointer;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  background: center / 70% no-repeat url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23ccc%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n  transition:\n    border-color 0.2s ease-in,\n    background-image 0.2s ease-in;\n}\n\n.fullscreen-close--uM2v:hover {\n  border-color: #aaa;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2248%22 viewBox%3D%220 -960 960 960%22 width%3D%2248%22 fill%3D%22%23aaa%22%3E%3Cpath d%3D%22m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z%22%2F%3E%3C%2Fsvg%3E\");\n}\n\n.mobile #diva-content-item .swiper-slide {\n  background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;\n  background: initial;\n}\n\n#diva-content-item .swiper {\n  width: 100%;\n  height: 350px;\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.in-gallery-in-fullscreen #DivaContentItemGallery {\n  height: 90% !important;\n  width: 90% !important;\n}\n\n.in-gallery-in-fullscreen #diva-content-item .mySwiper2-mfrK1 {\n  height: 100%;\n}\n\n#diva-content-item .swiper-slide {\n  background-size: cover;\n  background-position: center;\n}\n#diva-content-item .mySwiper2-mfrK1 {\n  height: 80%;\n  width: 100%;\n}\n#diva-content-item .mySwiper-urn8y {\n  height: 20%;\n  box-sizing: border-box;\n  padding: 10px 0;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide {\n  width: 25%;\n  height: 100%;\n  opacity: 0.4;\n}\n#diva-content-item .mySwiper-urn8y .swiper-slide-thumb-active {\n  opacity: 1;\n}\n";
 styleInject(css_248z$3);
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -674,7 +675,9 @@ var _Gallery = function Gallery(_ref) {
     swiper = _useState4[0],
     setSwiper = _useState4[1];
   var _useDivaCore = useDivaCore(),
-    openFullscreen = _useDivaCore.actions.openFullscreen;
+    _useDivaCore$actions = _useDivaCore.actions,
+    openFullscreen = _useDivaCore$actions.openFullscreen,
+    closeFullscreen = _useDivaCore$actions.closeFullscreen;
   if (content.length == 0) return /*#__PURE__*/jsx(Fragment, {});
   if (content.length == 1) return /*#__PURE__*/jsx(ContentItem, {
     item: _objectSpread(_objectSpread({}, content[0]), {
@@ -685,10 +688,14 @@ var _Gallery = function Gallery(_ref) {
     openFullscreen({
       absoluteFullscreen: true,
       overwrittenZIndex: 3000000,
+      hideClose: true,
       content: /*#__PURE__*/jsxs("div", {
         id: "diva-content-item",
         className: classNames(fullscreenWrapper, 'in-gallery-in-fullscreen'),
-        children: [/*#__PURE__*/jsx(_Gallery, {
+        children: [/*#__PURE__*/jsx("div", {
+          className: fullscreenClose,
+          onClick: closeFullscreen
+        }), /*#__PURE__*/jsx(_Gallery, {
           item: {
             content: content,
             wrappingStyle: wrappingStyle,
@@ -696,7 +703,7 @@ var _Gallery = function Gallery(_ref) {
             initIndex: swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex
           },
           inFullscreen: true
-        }), ","]
+        })]
       })
     });
   };
@@ -812,7 +819,8 @@ var QuickConfigWrapper = function QuickConfigWrapper(_ref) {
   var item = _ref.item,
     params = _ref.params;
   var _useContentItem = useContentItem(),
-    onEvent = _useContentItem.onEvent;
+    onEvent = _useContentItem.onEvent,
+    navigateTo = _useContentItem.navigateTo;
   return /*#__PURE__*/jsx(QuickConfig, {
     config: item.config,
     initialContext: params === null || params === void 0 ? void 0 : params.initialContext,
@@ -821,6 +829,11 @@ var QuickConfigWrapper = function QuickConfigWrapper(_ref) {
         contentItemId: id
       });
     },
+    onOpenContentItem: function onOpenContentItem(id) {
+      return navigateTo({
+        id: id
+      });
+    },
     onEvent: onEvent
   });
 };

package/build/types/content-item/src/Components/Gallery/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Gallery/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQ1C,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,CAAC;AAEnC,QAAA,MAAM,OAAO,qFAAsF,KAAK,GAAG;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,sBAgEpI,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/Gallery/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQ1C,KAAK,KAAK,GAAG;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,CAAC;AAEnC,QAAA,MAAM,OAAO,qFAAsF,KAAK,GAAG;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,sBAkEpI,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/build/types/content-item/src/Components/QuickConfig/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/QuickConfig/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAI9C,UAAU,KAAK;IACb,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;CACjC;AAED,QAAA,MAAM,kBAAkB,qBAAsB,KAAK,sBAUlD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/Components/QuickConfig/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAI9C,UAAU,KAAK;IACb,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;CACjC;AAED,QAAA,MAAM,kBAAkB,qBAAsB,KAAK,sBAWlD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystaldesign/content-item",
-  "version": "26.8.0-beta.9",
+  "version": "26.9.0-beta.2",
   "license": "MIT",
   "scripts": {
     "storybook": "storybook dev -p 6006",
@@ -24,7 +24,7 @@
     "webpack": "^5.73.0"
   },
   "dependencies": {
-    "@crystaldesign/quick-config": "26.8.0-beta.9",
+    "@crystaldesign/quick-config": "26.9.0-beta.2",
     "classnames": "^2.5.1",
     "swiper": "^12.1.2"
   },
@@ -35,5 +35,5 @@
   },
   "module": "build/esm/index.js",
   "types": "./build/types/content-item/src/index.d.ts",
-  "gitHead": "a305c2780e4b93052f7789e483f2769ca1300e63"
+  "gitHead": "059ff3e210c694a3ab6e5b2c35564cb7833088a2"
 }