@micromag/media-gallery 0.2.412 → 0.3.0

package/assets/css/styles.css

@@ -1,6 +1,6 @@
-.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata,.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-gallery{position:absolute;top:0;left:0;width:100%}.micromag-media-gallery-container{position:relative}.micromag-media-gallery-container .micromag-media-gallery-content{position:relative;width:100%;overflow:hidden}.micromag-media-gallery-container .micromag-media-gallery-gallery,.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata{-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out}.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-media-gallery-container .micromag-media-gallery-loading{margin:.5rem 1rem}.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-gallery{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-mediaMetadata{position:static;width:auto;-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}
+.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata,.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-gallery{position:absolute;top:0;left:0;width:100%}.micromag-media-gallery-container{position:relative}.micromag-media-gallery-container .micromag-media-gallery-content{position:relative;width:100%;overflow:hidden}.micromag-media-gallery-container .micromag-media-gallery-gallery,.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata{-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out, -webkit-transform .2s ease-out}.micromag-media-gallery-container .micromag-media-gallery-mediaMetadata{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-media-gallery-container .micromag-media-gallery-loading{margin:.5rem 1rem}.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-gallery{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-mediaMetadata{position:static;width:auto;-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}
 
-.micromag-media-gallery-items-gallery-item-container{position:relative;overflow:hidden;cursor:pointer}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-imageButton{-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-image{display:block;width:100%;height:0;padding-bottom:75%;background-repeat:no-repeat;background-position:50%;background-size:cover}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-icon{width:16px;height:16px;margin-right:5px}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border:0;background:rgba(0,0,0,0);color:inherit;text-align:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer .micromag-media-gallery-items-gallery-item-label{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer small{font-size:.8rem}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{position:absolute;top:0;padding:.5rem;color:#fff;-webkit-filter:drop-shadow(0 0 .75rem #1c1c1c);filter:drop-shadow(0 0 .75rem #1C1C1C)}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon .micromag-media-gallery-items-gallery-item-icon,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton .micromag-media-gallery-items-gallery-item-icon{width:1rem;height:1rem;margin-right:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{left:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon{right:0;pointer-events:none}
+.micromag-media-gallery-items-gallery-item-container{position:relative;overflow:hidden;cursor:pointer}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-imageButton{-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-image{display:block;width:100%;height:0;padding-bottom:75%;background-repeat:no-repeat;background-position:50%;background-size:cover}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-icon{width:16px;height:16px;margin-right:5px}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border:0;background:rgba(0,0,0,0);color:inherit;text-align:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer .micromag-media-gallery-items-gallery-item-label{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer small{font-size:.8rem}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{position:absolute;top:0;padding:.5rem;color:#fff;-webkit-filter:drop-shadow(0 0 .75rem #1C1C1C);filter:drop-shadow(0 0 .75rem #1C1C1C)}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon .micromag-media-gallery-items-gallery-item-icon,.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton .micromag-media-gallery-items-gallery-item-icon{width:1rem;height:1rem;margin-right:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-infoButton{left:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-closeIcon{right:0;pointer-events:none}
 .micromag-media-gallery-partials-media-metadata-container{position:relative}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-image{display:block;max-width:100%;min-height:200px;max-height:40vh;margin:0 auto}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video{position:relative;height:40vh;min-height:200px;background-color:#1c1c1c}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video .micromag-media-gallery-partials-media-metadata-player{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio{position:absolute;bottom:0;width:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio .micromag-media-gallery-partials-media-metadata-player{display:block;margin:0 auto}
 .micromag-media-gallery-partials-navbar-container{position:relative;padding:.5rem}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview{width:25%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview img{width:100%}
 .micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-media-gallery-forms-dropdown-section-container{position:relative;padding-top:5px}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-label{display:inline-block;padding-right:5px;font-weight:400}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{font-weight:700}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdown{left:auto;right:0}

package/es/index.js

@@ -78,7 +78,7 @@ var GalleryItem = function GalleryItem(_ref) {
   return /*#__PURE__*/React.createElement(Card, {
     image: /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-left', 'bg-light', 'text-black', styles$6.imageButton]),
+      className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$6.imageButton]),
       onClick: onClick
     }, /*#__PURE__*/React.createElement("div", {
       className: classNames(['card-img-top', styles$6.image]),
@@ -108,7 +108,7 @@ var GalleryItem = function GalleryItem(_ref) {
     }) : null, /*#__PURE__*/React.createElement("div", {
       className: classNames(['text-truncate', styles$6.label])
     }, /*#__PURE__*/React.createElement("small", null, title), size !== null ? /*#__PURE__*/React.createElement("small", {
-      className: "text-muted ml-1"
+      className: "text-muted ms-1"
     }, size) : null)),
     theme: selected ? 'primary' : null,
     className: classNames([styles$6.container, _defineProperty({
@@ -825,16 +825,13 @@ var Search = function Search(_ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: "input-group w-100"
-  }, /*#__PURE__*/React.createElement("span", {
-    type: "span",
-    className: "input-group-prepend"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "input-group-text reset-button",
+    className: "reset-button",
     onClick: onClickSearchIcon
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faSearch
-  }))), /*#__PURE__*/React.createElement("input", {
+  })), /*#__PURE__*/React.createElement("input", {
     className: classNames(['form-control', {
       'bg-light': !!value,
       'text-dark': value
@@ -889,7 +886,7 @@ var TagSection = function TagSection(_ref) {
     var label = _ref3.label,
         value = _ref3.value,
         active = _ref3.active;
-    var itemClassNames = classNames(['btn', 'btn-sm', 'mb-1', 'mr-1', 'btn-dark', {
+    var itemClassNames = classNames(['btn', 'btn-sm', 'mb-1', 'me-1', 'btn-dark', {
       'btn-primary': active === true // 'btn-outline-light': active === false,
 
     }]);
@@ -1283,7 +1280,7 @@ function Navbar(_ref) {
   return /*#__PURE__*/React.createElement("nav", {
     className: classNames([styles$4.container, 'navbar', _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$4.inner
+    className: classNames(['container-fluid', styles$4.inner])
   }, media === null ? /*#__PURE__*/React.createElement("strong", {
     className: "list-group-item rounded w-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
   }, selectedMedia !== null ? /*#__PURE__*/React.createElement(Button, {
@@ -1295,7 +1292,7 @@ function Navbar(_ref) {
     className: styles$4.mediaPreview,
     thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
   }), /*#__PURE__*/React.createElement("span", {
-    className: "ml-2"
+    className: "ms-2"
   }, selectedMedia.name || /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "fVqgfl",
     defaultMessage: [{
@@ -1303,7 +1300,7 @@ function Navbar(_ref) {
       "value": "[no title]"
     }]
   }))) : /*#__PURE__*/React.createElement("span", {
-    className: "pl-2"
+    className: "ps-2"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "VspZp9",
     defaultMessage: [{
@@ -1347,7 +1344,7 @@ function Navbar(_ref) {
   })) : null, media !== null ? /*#__PURE__*/React.createElement("div", {
     className: "w-100 d-flex flex-nowrap justify-content-between"
   }, /*#__PURE__*/React.createElement("form", {
-    className: classNames(['form-inline', 'mr-2'])
+    className: classNames(['d-flex', 'me-2'])
   }, /*#__PURE__*/React.createElement(Button, {
     theme: "secondary",
     outline: true,
@@ -1357,7 +1354,7 @@ function Navbar(_ref) {
     }),
     onClick: onClickBack
   })), /*#__PURE__*/React.createElement("strong", {
-    className: "navbar-text mr-auto w-100"
+    className: "navbar-text me-auto w-100"
   }, media !== null ? media.name : null)) : null, media === null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 flex-nowrap justify-content-between"
   }, /*#__PURE__*/React.createElement(Search, {
@@ -1365,7 +1362,7 @@ function Navbar(_ref) {
     onChange: onSearchChange,
     onFocus: onSearchFocus,
     onClickIcon: onToggleMenu,
-    className: classNames(['form-inline'])
+    className: classNames(['d-flex'])
   })), open ? /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
   }, /*#__PURE__*/React.createElement(SearchFilters, {

package/lib/index.js

@@ -93,7 +93,7 @@ var GalleryItem = function GalleryItem(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(components.Card, {
     image: /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-left', 'bg-light', 'text-black', styles$6.imageButton]),
+      className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$6.imageButton]),
       onClick: onClick
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: classNames__default["default"](['card-img-top', styles$6.image]),
@@ -123,7 +123,7 @@ var GalleryItem = function GalleryItem(_ref) {
     }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
       className: classNames__default["default"](['text-truncate', styles$6.label])
     }, /*#__PURE__*/React__default["default"].createElement("small", null, title), size !== null ? /*#__PURE__*/React__default["default"].createElement("small", {
-      className: "text-muted ml-1"
+      className: "text-muted ms-1"
     }, size) : null)),
     theme: selected ? 'primary' : null,
     className: classNames__default["default"]([styles$6.container, _defineProperty__default["default"]({
@@ -840,16 +840,13 @@ var Search = function Search(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "input-group w-100"
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    type: "span",
-    className: "input-group-prepend"
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: "input-group-text reset-button",
+    className: "reset-button",
     onClick: onClickSearchIcon
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.faSearch
-  }))), /*#__PURE__*/React__default["default"].createElement("input", {
+  })), /*#__PURE__*/React__default["default"].createElement("input", {
     className: classNames__default["default"](['form-control', {
       'bg-light': !!value,
       'text-dark': value
@@ -904,7 +901,7 @@ var TagSection = function TagSection(_ref) {
     var label = _ref3.label,
         value = _ref3.value,
         active = _ref3.active;
-    var itemClassNames = classNames__default["default"](['btn', 'btn-sm', 'mb-1', 'mr-1', 'btn-dark', {
+    var itemClassNames = classNames__default["default"](['btn', 'btn-sm', 'mb-1', 'me-1', 'btn-dark', {
       'btn-primary': active === true // 'btn-outline-light': active === false,
 
     }]);
@@ -1298,7 +1295,7 @@ function Navbar(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("nav", {
     className: classNames__default["default"]([styles$4.container, 'navbar', _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.inner
+    className: classNames__default["default"](['container-fluid', styles$4.inner])
   }, media === null ? /*#__PURE__*/React__default["default"].createElement("strong", {
     className: "list-group-item rounded w-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between"
   }, selectedMedia !== null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
@@ -1310,7 +1307,7 @@ function Navbar(_ref) {
     className: styles$4.mediaPreview,
     thumbnail: selectedMedia === null || selectedMedia === void 0 ? void 0 : selectedMedia.thumbnail_url
   }), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "ml-2"
+    className: "ms-2"
   }, selectedMedia.name || /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "fVqgfl",
     defaultMessage: [{
@@ -1318,7 +1315,7 @@ function Navbar(_ref) {
       "value": "[no title]"
     }]
   }))) : /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "pl-2"
+    className: "ps-2"
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "VspZp9",
     defaultMessage: [{
@@ -1362,7 +1359,7 @@ function Navbar(_ref) {
   })) : null, media !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-100 d-flex flex-nowrap justify-content-between"
   }, /*#__PURE__*/React__default["default"].createElement("form", {
-    className: classNames__default["default"](['form-inline', 'mr-2'])
+    className: classNames__default["default"](['d-flex', 'me-2'])
   }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
     theme: "secondary",
     outline: true,
@@ -1372,7 +1369,7 @@ function Navbar(_ref) {
     }),
     onClick: onClickBack
   })), /*#__PURE__*/React__default["default"].createElement("strong", {
-    className: "navbar-text mr-auto w-100"
+    className: "navbar-text me-auto w-100"
   }, media !== null ? media.name : null)) : null, media === null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "d-flex w-100 flex-nowrap justify-content-between"
   }, /*#__PURE__*/React__default["default"].createElement(Search, {
@@ -1380,7 +1377,7 @@ function Navbar(_ref) {
     onChange: onSearchChange,
     onFocus: onSearchFocus,
     onClickIcon: onToggleMenu,
-    className: classNames__default["default"](['form-inline'])
+    className: classNames__default["default"](['d-flex'])
   })), open ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
   }, /*#__PURE__*/React__default["default"].createElement(SearchFilters, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/media-gallery",
-    "version": "0.2.412",
+    "version": "0.3.0",
     "description": "",
     "keywords": [
         "javascript"
@@ -59,10 +59,9 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.2.412",
-        "@micromag/data": "^0.2.412",
-        "bootstrap": "^4.5.3",
-        "bootstrap.native": "^3.0.14",
+        "@micromag/core": "^0.3.0",
+        "@micromag/data": "^0.3.0",
+        "bootstrap": "^5.1.0",
         "change-case": "^4.1.2",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
@@ -74,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e16acc4643a563f4b7e98ddc1b778ea8a6c8b320"
+    "gitHead": "729bcf44dc4f99a2afec77fbdac86454e1cdf79f"
 }