@micromag/media-gallery 0.3.320 → 0.3.322

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.
Files changed (4) hide show
  1. package/assets/css/styles.css +5 -4
  2. package/es/index.js +64 -57
  3. package/lib/index.js +64 -57
  4. package/package.json +4 -4
package/assets/css/styles.css CHANGED
@@ -1,10 +1,11 @@
1
- .micromag-media-gallery-items-gallery-item-container{border:0;cursor:pointer;overflow:hidden;position:relative}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-imageButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-image{background-color:#1c1c1c;background-position:50%;background-repeat:no-repeat;background-size:contain;display:block;height:0;padding-bottom:100%;width:100%}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-icon{height:16px;margin-right:5px;width:16px}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;text-align:inherit}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer .micromag-media-gallery-items-gallery-item-label{-ms-flex-positive:1;flex-grow:1}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer small{font-size:.75rem}.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{color:#fff;-webkit-filter:drop-shadow(0 0 .75rem #1c1c1c);filter:drop-shadow(0 0 .75rem #1C1C1C);padding:.5rem;position:absolute;top:0}.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{height:1rem;margin-right:0;width:1rem}.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{pointer-events:none;right:0}
1
+ .micromag-media-gallery-items-gallery-item-container{border:1px solid #343434;cursor:pointer;overflow:hidden;position:relative}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-imageButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-image{background-color:#1c1c1c;background-position:50%;background-repeat:no-repeat;background-size:contain;display:block;height:0;padding-bottom:100%;width:100%}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-icon{height:16px;margin-right:5px;width:16px}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-top:1px solid #343434;color:inherit;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;text-align:inherit}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer .micromag-media-gallery-items-gallery-item-label{-ms-flex-positive:1;flex-grow:1}.micromag-media-gallery-items-gallery-item-container .micromag-media-gallery-items-gallery-item-footer small{font-size:.75rem}.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{color:#fff;-webkit-filter:drop-shadow(0 0 .75rem #1c1c1c);filter:drop-shadow(0 0 .75rem #1C1C1C);padding:.5rem;position:absolute;top:0}.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{height:1rem;margin-right:0;width:1rem}.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{pointer-events:none;right:0}
2
2
 
3
3
  .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;margin:0 auto;max-height:40vh;max-width:100%;min-height:200px}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video{background-color:#1c1c1c;height:40vh;min-height:200px;position:relative}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-video .micromag-media-gallery-partials-media-metadata-player{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-media-gallery-partials-media-metadata-container .micromag-media-gallery-partials-media-metadata-audio{bottom:0;position:absolute;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}
4
4
  .micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-dropdownToggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-media-gallery-forms-dropdown-section-container{padding-top:5px;position:relative}.micromag-media-gallery-forms-dropdown-section-container .micromag-media-gallery-forms-dropdown-section-label{display:inline-block;font-weight:400;padding-right:5px}.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}
5
- .micromag-media-gallery-forms-search-filters-container{left:0;overflow:hidden;padding:0 10px;position:absolute;right:0;width:100%;z-index:1}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-closeBtn{position:absolute;right:24px}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section{border-bottom:1px solid #adadad}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section:last-child{border-bottom:0}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-title{color:#adadad;font-size:.7875rem;font-weight:600;text-transform:uppercase}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-tags{overflow-x:auto}
5
+ .micromag-media-gallery-forms-search-container{position:relative}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input{background-color:#2b2b2b}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input.micromag-media-gallery-forms-search-active,.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input:focus{background-color:#2b2b2b!important;-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff!important;outline:none!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::-webkit-input-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::-moz-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input :-ms-input-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::-ms-input-placeholder{background-color:#2b2b2b!important}.micromag-media-gallery-forms-search-container .micromag-media-gallery-forms-search-input ::placeholder{background-color:#2b2b2b!important}
6
6
  .micromag-media-gallery-forms-tag-section-container .micromag-media-gallery-forms-tag-section-tag{font-size:.75rem;line-height:1.1}
7
- .micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-heading{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-title{color:#adadad;font-size:.7875rem;font-weight:600;text-transform:uppercase}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-resetButton{font-size:.7875rem;margin-left:5px;outline:none}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-activeTag{margin-right:5px;margin-top:5px}
7
+ .micromag-media-gallery-forms-search-filters-container{left:0;overflow:hidden;padding:0 10px;position:absolute;right:0;width:100%;z-index:1}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-closeBtn{position:absolute;right:24px}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section{border-bottom:1px solid #adadad}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-section:last-child{border-bottom:0}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-title{color:#adadad;font-size:.7875rem;font-weight:600;text-transform:uppercase}.micromag-media-gallery-forms-search-filters-container .micromag-media-gallery-forms-search-filters-tags{overflow-x:auto}
8
8
  .micromag-media-gallery-buttons-close-container{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}
9
- .micromag-media-gallery-partials-navbar-container{max-width:100%;padding:.5rem;position:relative}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-inner{-ms-flex-align:start;-ms-flex-pack:center;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;width:100%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview{display:block;margin-right:5px;width:100px}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview img{display:block;width:100%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaLabel{display:block;min-width:0}
9
+ .micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-heading{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-title{color:#adadad;font-size:.7875rem;font-weight:600;text-transform:uppercase}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-resetButton{font-size:.7875rem;margin-left:5px;outline:none}.micromag-media-gallery-partials-active-filters-container .micromag-media-gallery-partials-active-filters-activeTag{margin-right:5px;margin-top:5px}
10
+ .micromag-media-gallery-partials-navbar-container{max-width:100%;max-width:320px;padding:.5rem;position:relative}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-inner{-ms-flex-align:start;-ms-flex-pack:center;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;width:100%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview{display:block;margin-right:5px;width:100px}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaPreview img{display:block;width:100%}.micromag-media-gallery-partials-navbar-container .micromag-media-gallery-partials-navbar-mediaLabel{display:block;min-width:0}
10
11
  .micromag-media-gallery-container .micromag-media-gallery-mediaMetadata,.micromag-media-gallery-container.micromag-media-gallery-metadataOpened .micromag-media-gallery-gallery{left:0;position:absolute;top:0;width:100%}.micromag-media-gallery-container{position:relative}.micromag-media-gallery-container .micromag-media-gallery-content{overflow:hidden;position:relative;width:100%}.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;-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);width:auto}
package/es/index.js CHANGED
@@ -24,6 +24,7 @@ import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
24
24
  import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
25
25
  import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
26
26
  import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
27
+ import { faSpinner } from '@fortawesome/free-solid-svg-icons/faSpinner';
27
28
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
28
29
 
29
30
  var middleEllipsis = function middleEllipsis(string, maxLength) {
@@ -38,7 +39,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
38
39
  return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
39
40
  };
40
41
 
41
- var styles$9 = {"container":"micromag-media-gallery-items-gallery-item-container","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon"};
42
+ var styles$a = {"container":"micromag-media-gallery-items-gallery-item-container","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon"};
42
43
 
43
44
  var propTypes$a = {
44
45
  item: PropTypes.media,
@@ -80,50 +81,48 @@ var GalleryItem = function GalleryItem(_ref) {
80
81
  return /*#__PURE__*/React.createElement(Card, {
81
82
  image: /*#__PURE__*/React.createElement("button", {
82
83
  type: "button",
83
- className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$9.imageButton]),
84
+ className: classNames(['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-dark', 'text-black', styles$a.imageButton]),
84
85
  onClick: onClick
85
86
  }, /*#__PURE__*/React.createElement("div", {
86
- className: classNames(['card-img-top', styles$9.image]),
87
+ className: classNames(['card-img-top', styles$a.image]),
87
88
  style: {
88
89
  backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
89
90
  }
90
91
  })),
91
92
  beforeBody: /*#__PURE__*/React.createElement(React.Fragment, null, withInfoButton ? /*#__PURE__*/React.createElement(Button, {
92
- className: styles$9.infoButton,
93
+ className: styles$a.infoButton,
93
94
  onClick: onClickInfo,
94
95
  withoutStyle: true
95
96
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
96
97
  icon: faInfoCircle,
97
- className: styles$9.icon
98
+ className: styles$a.icon
98
99
  })) : null, selected ? /*#__PURE__*/React.createElement("div", {
99
- className: classNames(['text-danger', styles$9.closeIcon])
100
+ className: classNames(['text-danger', styles$a.closeIcon])
100
101
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
101
102
  icon: faTimesCircle,
102
- className: styles$9.icon
103
+ className: styles$a.icon
103
104
  })) : null),
104
105
  footer: /*#__PURE__*/React.createElement(React.Fragment, null, type === 'video' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
105
- className: styles$9.icon,
106
+ className: styles$a.icon,
106
107
  icon: faPlayCircle
107
108
  }) : null, type === 'audio' ? /*#__PURE__*/React.createElement(FontAwesomeIcon, {
108
- className: styles$9.icon,
109
+ className: styles$a.icon,
109
110
  icon: faHeadphonesAlt
110
111
  }) : null, /*#__PURE__*/React.createElement("div", {
111
- className: classNames(['text-truncate', styles$9.label])
112
+ className: classNames(['text-truncate', styles$a.label])
112
113
  }, /*#__PURE__*/React.createElement("small", null, title), size !== null ? /*#__PURE__*/React.createElement("small", {
113
114
  className: "text-muted ms-1"
114
115
  }, size) : null)),
115
116
  theme: selected ? 'primary' : null,
116
- className: classNames([styles$9.container, _defineProperty({
117
- 'border-primary': selected
118
- }, className, className !== null)]),
119
- footerClassName: classNames(['p-1', styles$9.footer]),
117
+ className: classNames([styles$a.container, _defineProperty({}, className, className !== null)]),
118
+ footerClassName: classNames(['p-1', styles$a.footer]),
120
119
  onClickFooter: onClick
121
120
  });
122
121
  };
123
122
  GalleryItem.propTypes = propTypes$a;
124
123
  GalleryItem.defaultProps = defaultProps$a;
125
124
 
126
- var styles$8 = {};
125
+ var styles$9 = {};
127
126
 
128
127
  var propTypes$9 = {
129
128
  items: PropTypes.medias,
@@ -167,7 +166,7 @@ function Gallery(_ref) {
167
166
  return items;
168
167
  }, [selectedFirst, selectedItem, items]);
169
168
  return /*#__PURE__*/React.createElement("div", {
170
- className: classNames([styles$8.container, 'p-2', _defineProperty({}, className, className !== null)]),
169
+ className: classNames([styles$9.container, 'p-2', _defineProperty({}, className, className !== null)]),
171
170
  ref: ref
172
171
  }, /*#__PURE__*/React.createElement("div", {
173
172
  className: classNames(['row', 'mx-n1', 'row-cols-2', {
@@ -194,7 +193,7 @@ function Gallery(_ref) {
194
193
  Gallery.propTypes = propTypes$9;
195
194
  Gallery.defaultProps = defaultProps$9;
196
195
 
197
- var styles$7 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio"};
196
+ var styles$8 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio"};
198
197
 
199
198
  var propTypes$8 = {
200
199
  media: PropTypes.media,
@@ -311,25 +310,25 @@ function MediaMetadata(_ref) {
311
310
  var TextField = useFieldComponent('text');
312
311
  var TokensField = useFieldComponent('tokens');
313
312
  return /*#__PURE__*/React.createElement("div", {
314
- className: classNames([styles$7.container, _defineProperty({}, className, className)])
313
+ className: classNames([styles$8.container, _defineProperty({}, className, className)])
315
314
  }, /*#__PURE__*/React.createElement("div", {
316
315
  className: classNames(['position-relative', _defineProperty({
317
316
  'bg-light': type === 'audio',
318
317
  'bg-black': type === 'image'
319
- }, styles$7.video, type === 'video')])
318
+ }, styles$8.video, type === 'video')])
320
319
  }, type === 'video' ? /*#__PURE__*/React.createElement("video", {
321
- className: styles$7.player,
320
+ className: styles$8.player,
322
321
  controls: true,
323
322
  src: url
324
323
  }) : null, type === 'audio' ? /*#__PURE__*/React.createElement("div", {
325
- className: styles$7.audio
324
+ className: styles$8.audio
326
325
  }, /*#__PURE__*/React.createElement("audio", {
327
- className: styles$7.player,
326
+ className: styles$8.player,
328
327
  controls: true,
329
328
  src: url
330
329
  })) : null, type !== 'video' ? /*#__PURE__*/React.createElement("img", {
331
330
  src: thumbnail,
332
- className: styles$7.image,
331
+ className: styles$8.image,
333
332
  alt: filename
334
333
  }) : null), /*#__PURE__*/React.createElement("div", {
335
334
  className: "p-2"
@@ -665,7 +664,7 @@ PropTypes$1.shape({
665
664
  usage: PropTypes$1.arrayOf(PropTypes$1.oneOf(['used', 'unused']))
666
665
  });
667
666
 
668
- var styles$6 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label","dropdown":"micromag-media-gallery-forms-dropdown-section-dropdown"};
667
+ var styles$7 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label","dropdown":"micromag-media-gallery-forms-dropdown-section-dropdown"};
669
668
 
670
669
  var propTypes$7 = {
671
670
  value: PropTypes$1.string,
@@ -710,9 +709,9 @@ function DropdownSection(_ref) {
710
709
  onChange(val);
711
710
  }, [setOpen]);
712
711
  return items !== null && items.length > 1 ? /*#__PURE__*/React.createElement("div", {
713
- className: classNames([styles$6.container, 'dropdown', _defineProperty({}, className, className !== null)])
712
+ className: classNames([styles$7.container, 'dropdown', _defineProperty({}, className, className !== null)])
714
713
  }, /*#__PURE__*/React.createElement("span", {
715
- className: styles$6.label
714
+ className: styles$7.label
716
715
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
717
716
  id: "9ZdD+Q",
718
717
  defaultMessage: [{
@@ -720,7 +719,7 @@ function DropdownSection(_ref) {
720
719
  "value": "Library for"
721
720
  }]
722
721
  })), /*#__PURE__*/React.createElement("button", {
723
- className: classNames([styles$6.dropdownToggle, 'dropdown-toggle', {
722
+ className: classNames([styles$7.dropdownToggle, 'dropdown-toggle', {
724
723
  open: open === true
725
724
  }]),
726
725
  type: "button",
@@ -733,7 +732,7 @@ function DropdownSection(_ref) {
733
732
  "value": "All"
734
733
  }]
735
734
  })), /*#__PURE__*/React.createElement("div", {
736
- className: classNames([styles$6.dropdown, 'dropdown-menu', {
735
+ className: classNames([styles$7.dropdown, 'dropdown-menu', {
737
736
  show: open === true
738
737
  }])
739
738
  }, items.map(function (_ref3) {
@@ -754,10 +753,11 @@ function DropdownSection(_ref) {
754
753
  DropdownSection.propTypes = propTypes$7;
755
754
  DropdownSection.defaultProps = defaultProps$7;
756
755
 
757
- // import { PropTypes as MicromagPropTypes } from '@micromag/core';
756
+ var styles$6 = {"container":"micromag-media-gallery-forms-search-container","input":"micromag-media-gallery-forms-search-input","active":"micromag-media-gallery-forms-search-active"};
758
757
 
759
758
  var propTypes$6 = {
760
759
  value: PropTypes$1.string,
760
+ loading: PropTypes$1.bool,
761
761
  onChange: PropTypes$1.func,
762
762
  onFocus: PropTypes$1.func,
763
763
  onBlur: PropTypes$1.func,
@@ -766,6 +766,7 @@ var propTypes$6 = {
766
766
  };
767
767
  var defaultProps$6 = {
768
768
  value: null,
769
+ loading: false,
769
770
  onChange: null,
770
771
  onFocus: null,
771
772
  onBlur: null,
@@ -774,6 +775,7 @@ var defaultProps$6 = {
774
775
  };
775
776
  var Search = function Search(_ref) {
776
777
  var value = _ref.value,
778
+ loading = _ref.loading,
777
779
  onChange = _ref.onChange,
778
780
  onFocus = _ref.onFocus,
779
781
  onBlur = _ref.onBlur,
@@ -798,7 +800,7 @@ var Search = function Search(_ref) {
798
800
  }, [onClickIcon]);
799
801
  return /*#__PURE__*/React.createElement("form", {
800
802
  method: "post",
801
- className: classNames(['w-100', 'border', 'border-dark', 'rounded', _defineProperty({}, className, className !== null)]),
803
+ className: classNames([styles$6.container, 'w-100', 'border', 'border-dark', 'rounded', _defineProperty({}, className, className !== null)]),
802
804
  onSubmit: function onSubmit(e) {
803
805
  return e.preventDefault();
804
806
  }
@@ -809,9 +811,9 @@ var Search = function Search(_ref) {
809
811
  className: "btn",
810
812
  onClick: onClickSearchIcon
811
813
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
812
- icon: faSearch
814
+ icon: loading ? faSpinner : faSearch
813
815
  })), /*#__PURE__*/React.createElement("input", {
814
- className: classNames(['form-control', {
816
+ className: classNames([styles$6.input, 'form-control', {
815
817
  'bg-light': !!value,
816
818
  'text-dark': value
817
819
  }]),
@@ -832,9 +834,7 @@ var Search = function Search(_ref) {
832
834
  Search.propTypes = propTypes$6;
833
835
  Search.defaultProps = defaultProps$6;
834
836
 
835
- var styles$5 = {"container":"micromag-media-gallery-forms-search-filters-container","closeBtn":"micromag-media-gallery-forms-search-filters-closeBtn","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
836
-
837
- var styles$4 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
837
+ var styles$5 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
838
838
 
839
839
  var propTypes$5 = {
840
840
  tags: PropTypes$1.arrayOf(PropTypes$1.shape({
@@ -862,12 +862,12 @@ var TagSection = function TagSection(_ref) {
862
862
  onChange(val, parent);
863
863
  }, [onChange, parent]);
864
864
  return /*#__PURE__*/React.createElement("div", {
865
- className: classNames([styles$4.container, 'd-flex', 'mt-1', _defineProperty({}, className, className !== null)])
865
+ className: classNames([styles$5.container, 'd-flex', 'mt-1', _defineProperty({}, className, className !== null)])
866
866
  }, tags !== null ? tags.map(function (_ref3) {
867
867
  var label = _ref3.label,
868
868
  value = _ref3.value,
869
869
  active = _ref3.active;
870
- var itemClassNames = classNames([styles$4.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
870
+ var itemClassNames = classNames([styles$5.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
871
871
  'btn-primary': active === true
872
872
  // 'btn-outline-light': active === false,
873
873
  }]);
@@ -884,10 +884,12 @@ var TagSection = function TagSection(_ref) {
884
884
  TagSection.propTypes = propTypes$5;
885
885
  TagSection.defaultProps = defaultProps$5;
886
886
 
887
+ var styles$4 = {"container":"micromag-media-gallery-forms-search-filters-container","closeBtn":"micromag-media-gallery-forms-search-filters-closeBtn","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
888
+
887
889
  var propTypes$4 = {
888
890
  filters: PropTypes$1.object,
889
891
  // eslint-disable-line
890
- sections: PropTypes$1.arrayOf(PropTypes$1.object),
892
+ sections: PropTypes$1.arrayOf(PropTypes$1.shape({})),
891
893
  onChange: PropTypes$1.func,
892
894
  onClose: PropTypes$1.func,
893
895
  className: PropTypes$1.string
@@ -942,11 +944,11 @@ var SearchFilters = function SearchFilters(_ref) {
942
944
  }
943
945
  }, [filters, onChange]);
944
946
  return /*#__PURE__*/React.createElement("div", {
945
- className: classNames([styles$5.container, 'flex-nowrap', 'mt-1', _defineProperty({}, className, className !== null)])
947
+ className: classNames([styles$4.container, 'flex-nowrap', 'mt-1', _defineProperty({}, className, className !== null)])
946
948
  }, activeSections.length > 0 ? /*#__PURE__*/React.createElement("div", {
947
949
  className: classNames(['bg-light', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
948
950
  }, /*#__PURE__*/React.createElement(Button, {
949
- className: classNames([styles$5.closeBtn, 'py-1', 'px-1', 'text-dark']),
951
+ className: classNames([styles$4.closeBtn, 'py-1', 'px-1', 'text-dark']),
950
952
  icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
951
953
  icon: faTimes
952
954
  }),
@@ -964,11 +966,11 @@ var SearchFilters = function SearchFilters(_ref) {
964
966
  items = _ref3.items;
965
967
  return items.length > 0 ? /*#__PURE__*/React.createElement("div", {
966
968
  key: "filter-".concat(value),
967
- className: classNames([styles$5.section, 'py-2'])
969
+ className: classNames([styles$4.section, 'py-2'])
968
970
  }, /*#__PURE__*/React.createElement("p", {
969
- className: classNames([styles$5.title, 'm-0'])
971
+ className: classNames([styles$4.title, 'm-0'])
970
972
  }, label), /*#__PURE__*/React.createElement(TagSection, {
971
- className: classNames([styles$5.tags]),
973
+ className: classNames([styles$4.tags]),
972
974
  tags: items,
973
975
  parent: value,
974
976
  onChange: onSectionChange
@@ -978,9 +980,7 @@ var SearchFilters = function SearchFilters(_ref) {
978
980
  SearchFilters.propTypes = propTypes$4;
979
981
  SearchFilters.defaultProps = defaultProps$4;
980
982
 
981
- var styles$3 = {"container":"micromag-media-gallery-partials-active-filters-container","heading":"micromag-media-gallery-partials-active-filters-heading","title":"micromag-media-gallery-partials-active-filters-title","resetButton":"micromag-media-gallery-partials-active-filters-resetButton","activeTag":"micromag-media-gallery-partials-active-filters-activeTag"};
982
-
983
- var styles$2 = {"container":"micromag-media-gallery-buttons-close-container"};
983
+ var styles$3 = {"container":"micromag-media-gallery-buttons-close-container"};
984
984
 
985
985
  var _excluded = ["className"];
986
986
  var propTypes$3 = {
@@ -993,11 +993,11 @@ var CloseButton = function CloseButton(_ref) {
993
993
  var className = _ref.className,
994
994
  props = _objectWithoutProperties(_ref, _excluded);
995
995
  return /*#__PURE__*/React.createElement(Button, Object.assign({
996
- className: classNames([styles$2.container, _defineProperty({}, className, className !== null)]),
996
+ className: classNames([styles$3.container, _defineProperty({}, className, className !== null)]),
997
997
  withoutStyle: true,
998
998
  icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
999
999
  icon: faTimes,
1000
- className: styles$2.icon
1000
+ className: styles$3.icon
1001
1001
  }),
1002
1002
  iconPosition: "right"
1003
1003
  }, props));
@@ -1005,6 +1005,8 @@ var CloseButton = function CloseButton(_ref) {
1005
1005
  CloseButton.propTypes = propTypes$3;
1006
1006
  CloseButton.defaultProps = defaultProps$3;
1007
1007
 
1008
+ var styles$2 = {"container":"micromag-media-gallery-partials-active-filters-container","heading":"micromag-media-gallery-partials-active-filters-heading","title":"micromag-media-gallery-partials-active-filters-title","resetButton":"micromag-media-gallery-partials-active-filters-resetButton","activeTag":"micromag-media-gallery-partials-active-filters-activeTag"};
1009
+
1008
1010
  var propTypes$2 = {
1009
1011
  filters: PropTypes$1.shape({
1010
1012
  types: PropTypes$1.arrayOf(PropTypes$1.string),
@@ -1014,7 +1016,7 @@ var propTypes$2 = {
1014
1016
  }),
1015
1017
  onChange: PropTypes$1.func,
1016
1018
  onReset: PropTypes$1.func,
1017
- sections: PropTypes$1.arrayOf(PropTypes$1.object),
1019
+ sections: PropTypes$1.arrayOf(PropTypes$1.shape({})),
1018
1020
  className: PropTypes$1.string
1019
1021
  };
1020
1022
  var defaultProps$2 = {
@@ -1048,11 +1050,11 @@ function ActiveFilters(_ref) {
1048
1050
  return oneHasValue || filters[key] !== null;
1049
1051
  }, false);
1050
1052
  return /*#__PURE__*/React.createElement("div", {
1051
- className: classNames(['w-100', styles$3.container, _defineProperty({}, className, className)])
1053
+ className: classNames(['w-100', styles$2.container, _defineProperty({}, className, className)])
1052
1054
  }, hasValue ? /*#__PURE__*/React.createElement("div", {
1053
- className: styles$3.heading
1055
+ className: styles$2.heading
1054
1056
  }, /*#__PURE__*/React.createElement("div", {
1055
- className: styles$3.title
1057
+ className: styles$2.title
1056
1058
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
1057
1059
  id: "t2cFdl",
1058
1060
  defaultMessage: [{
@@ -1060,7 +1062,7 @@ function ActiveFilters(_ref) {
1060
1062
  "value": "Active filters"
1061
1063
  }]
1062
1064
  })), /*#__PURE__*/React.createElement(CloseButton, {
1063
- className: styles$3.resetButton,
1065
+ className: styles$2.resetButton,
1064
1066
  onClick: handleReset
1065
1067
  }, /*#__PURE__*/React.createElement("u", null, /*#__PURE__*/React.createElement(FormattedMessage, {
1066
1068
  id: "/T/UDH",
@@ -1080,7 +1082,7 @@ function ActiveFilters(_ref) {
1080
1082
  _ref3$label = _ref3.label,
1081
1083
  label = _ref3$label === void 0 ? '' : _ref3$label;
1082
1084
  return /*#__PURE__*/React.createElement(Button, {
1083
- className: styles$3.activeTag,
1085
+ className: styles$2.activeTag,
1084
1086
  key: "filter-button-".concat(activeValue),
1085
1087
  type: "submit",
1086
1088
  size: "sm",
@@ -1110,6 +1112,7 @@ var propTypes$1 = {
1110
1112
  storyId: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]),
1111
1113
  tags: PropTypes.tags,
1112
1114
  authors: PropTypes.authors,
1115
+ loading: PropTypes$1.bool,
1113
1116
  withoutSource: PropTypes$1.bool,
1114
1117
  withoutType: PropTypes$1.bool,
1115
1118
  onClickAdd: PropTypes$1.func,
@@ -1130,6 +1133,7 @@ var defaultProps$1 = {
1130
1133
  storyId: null,
1131
1134
  tags: [],
1132
1135
  authors: [],
1136
+ loading: false,
1133
1137
  withoutSource: false,
1134
1138
  withoutType: true,
1135
1139
  onClickAdd: null,
@@ -1149,6 +1153,7 @@ function Navbar(_ref) {
1149
1153
  storyId = _ref.storyId,
1150
1154
  tags = _ref.tags,
1151
1155
  authors = _ref.authors,
1156
+ loading = _ref.loading,
1152
1157
  withoutSource = _ref.withoutSource,
1153
1158
  withoutType = _ref.withoutType,
1154
1159
  className = _ref.className,
@@ -1306,8 +1311,8 @@ function Navbar(_ref) {
1306
1311
  }, /*#__PURE__*/React.createElement("div", {
1307
1312
  className: classNames([styles$1.inner])
1308
1313
  }, media === null ? /*#__PURE__*/React.createElement("div", {
1309
- className: classNames(['list-group-item rounded w-100 mw-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between', {
1310
- 'border border-dark': selectedMedia !== null
1314
+ className: classNames(['list-group-item rounded w-100 mw-100 navbar-text d-flex align-items-center justify-content-between', {
1315
+ 'border border-dark py-1 px-1': selectedMedia !== null
1311
1316
  }])
1312
1317
  }, selectedMedia !== null ? /*#__PURE__*/React.createElement(Button, {
1313
1318
  className: classNames([styles$1.mediaLabel, 'd-flex px-0 py-0 me-1 align-items-center border-0']),
@@ -1375,7 +1380,7 @@ function Navbar(_ref) {
1375
1380
  }),
1376
1381
  onClick: onClickBack
1377
1382
  })), /*#__PURE__*/React.createElement("strong", {
1378
- className: "navbar-text me-auto w-100 text-truncate"
1383
+ className: "navbar-text me-auto w-100 text-truncate text-light"
1379
1384
  }, media !== null ? media.name : null)) : null, media === null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
1380
1385
  className: "d-flex w-100 flex-nowrap justify-content-between"
1381
1386
  }, /*#__PURE__*/React.createElement(Search, {
@@ -1383,6 +1388,7 @@ function Navbar(_ref) {
1383
1388
  onChange: onSearchChange,
1384
1389
  onFocus: onSearchFocus,
1385
1390
  onClickIcon: onToggleMenu,
1391
+ loading: loading,
1386
1392
  className: classNames(['d-flex'])
1387
1393
  })), open ? /*#__PURE__*/React.createElement("div", {
1388
1394
  className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
@@ -1577,6 +1583,7 @@ function MediaGallery(_ref) {
1577
1583
  storyId: storyId,
1578
1584
  authors: authors,
1579
1585
  tags: tags,
1586
+ loading: loading || uploading,
1580
1587
  className: navbarClassName
1581
1588
  }), /*#__PURE__*/React.createElement("div", {
1582
1589
  className: styles.content
package/lib/index.js CHANGED
@@ -26,6 +26,7 @@ var faChevronLeft = require('@fortawesome/free-solid-svg-icons/faChevronLeft');
26
26
  var faPlus = require('@fortawesome/free-solid-svg-icons/faPlus');
27
27
  var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
28
28
  var faSearch = require('@fortawesome/free-solid-svg-icons/faSearch');
29
+ var faSpinner = require('@fortawesome/free-solid-svg-icons/faSpinner');
29
30
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
30
31
 
31
32
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -54,7 +55,7 @@ var middleEllipsis = function middleEllipsis(string, maxLength) {
54
55
  return "".concat(string.substring(0, midpoint - lstrip), "...").concat(string.substring(midpoint + rstrip));
55
56
  };
56
57
 
57
- var styles$9 = {"container":"micromag-media-gallery-items-gallery-item-container","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon"};
58
+ var styles$a = {"container":"micromag-media-gallery-items-gallery-item-container","imageButton":"micromag-media-gallery-items-gallery-item-imageButton","image":"micromag-media-gallery-items-gallery-item-image","icon":"micromag-media-gallery-items-gallery-item-icon","footer":"micromag-media-gallery-items-gallery-item-footer","label":"micromag-media-gallery-items-gallery-item-label","infoButton":"micromag-media-gallery-items-gallery-item-infoButton","closeIcon":"micromag-media-gallery-items-gallery-item-closeIcon"};
58
59
 
59
60
  var propTypes$a = {
60
61
  item: core.PropTypes.media,
@@ -96,50 +97,48 @@ var GalleryItem = function GalleryItem(_ref) {
96
97
  return /*#__PURE__*/React__default["default"].createElement(components.Card, {
97
98
  image: /*#__PURE__*/React__default["default"].createElement("button", {
98
99
  type: "button",
99
- className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-light', 'text-black', styles$9.imageButton]),
100
+ className: classNames__default["default"](['d-block', 'position-relative', 'p-0', 'border-0', 'w-100', 'text-start', 'bg-dark', 'text-black', styles$a.imageButton]),
100
101
  onClick: onClick
101
102
  }, /*#__PURE__*/React__default["default"].createElement("div", {
102
- className: classNames__default["default"](['card-img-top', styles$9.image]),
103
+ className: classNames__default["default"](['card-img-top', styles$a.image]),
103
104
  style: {
104
105
  backgroundImage: thumbnail !== null ? "url('".concat(thumbnail, "')") : null
105
106
  }
106
107
  })),
107
108
  beforeBody: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, withInfoButton ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
108
- className: styles$9.infoButton,
109
+ className: styles$a.infoButton,
109
110
  onClick: onClickInfo,
110
111
  withoutStyle: true
111
112
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
112
113
  icon: faInfoCircle.faInfoCircle,
113
- className: styles$9.icon
114
+ className: styles$a.icon
114
115
  })) : null, selected ? /*#__PURE__*/React__default["default"].createElement("div", {
115
- className: classNames__default["default"](['text-danger', styles$9.closeIcon])
116
+ className: classNames__default["default"](['text-danger', styles$a.closeIcon])
116
117
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
117
118
  icon: faTimesCircle.faTimesCircle,
118
- className: styles$9.icon
119
+ className: styles$a.icon
119
120
  })) : null),
120
121
  footer: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, type === 'video' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
121
- className: styles$9.icon,
122
+ className: styles$a.icon,
122
123
  icon: faPlayCircle.faPlayCircle
123
124
  }) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
124
- className: styles$9.icon,
125
+ className: styles$a.icon,
125
126
  icon: faHeadphonesAlt.faHeadphonesAlt
126
127
  }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
127
- className: classNames__default["default"](['text-truncate', styles$9.label])
128
+ className: classNames__default["default"](['text-truncate', styles$a.label])
128
129
  }, /*#__PURE__*/React__default["default"].createElement("small", null, title), size !== null ? /*#__PURE__*/React__default["default"].createElement("small", {
129
130
  className: "text-muted ms-1"
130
131
  }, size) : null)),
131
132
  theme: selected ? 'primary' : null,
132
- className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({
133
- 'border-primary': selected
134
- }, className, className !== null)]),
135
- footerClassName: classNames__default["default"](['p-1', styles$9.footer]),
133
+ className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className !== null)]),
134
+ footerClassName: classNames__default["default"](['p-1', styles$a.footer]),
136
135
  onClickFooter: onClick
137
136
  });
138
137
  };
139
138
  GalleryItem.propTypes = propTypes$a;
140
139
  GalleryItem.defaultProps = defaultProps$a;
141
140
 
142
- var styles$8 = {};
141
+ var styles$9 = {};
143
142
 
144
143
  var propTypes$9 = {
145
144
  items: core.PropTypes.medias,
@@ -183,7 +182,7 @@ function Gallery(_ref) {
183
182
  return items;
184
183
  }, [selectedFirst, selectedItem, items]);
185
184
  return /*#__PURE__*/React__default["default"].createElement("div", {
186
- className: classNames__default["default"]([styles$8.container, 'p-2', _defineProperty__default["default"]({}, className, className !== null)]),
185
+ className: classNames__default["default"]([styles$9.container, 'p-2', _defineProperty__default["default"]({}, className, className !== null)]),
187
186
  ref: ref
188
187
  }, /*#__PURE__*/React__default["default"].createElement("div", {
189
188
  className: classNames__default["default"](['row', 'mx-n1', 'row-cols-2', {
@@ -210,7 +209,7 @@ function Gallery(_ref) {
210
209
  Gallery.propTypes = propTypes$9;
211
210
  Gallery.defaultProps = defaultProps$9;
212
211
 
213
- var styles$7 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio"};
212
+ var styles$8 = {"container":"micromag-media-gallery-partials-media-metadata-container","image":"micromag-media-gallery-partials-media-metadata-image","video":"micromag-media-gallery-partials-media-metadata-video","player":"micromag-media-gallery-partials-media-metadata-player","audio":"micromag-media-gallery-partials-media-metadata-audio"};
214
213
 
215
214
  var propTypes$8 = {
216
215
  media: core.PropTypes.media,
@@ -327,25 +326,25 @@ function MediaMetadata(_ref) {
327
326
  var TextField = contexts.useFieldComponent('text');
328
327
  var TokensField = contexts.useFieldComponent('tokens');
329
328
  return /*#__PURE__*/React__default["default"].createElement("div", {
330
- className: classNames__default["default"]([styles$7.container, _defineProperty__default["default"]({}, className, className)])
329
+ className: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className)])
331
330
  }, /*#__PURE__*/React__default["default"].createElement("div", {
332
331
  className: classNames__default["default"](['position-relative', _defineProperty__default["default"]({
333
332
  'bg-light': type === 'audio',
334
333
  'bg-black': type === 'image'
335
- }, styles$7.video, type === 'video')])
334
+ }, styles$8.video, type === 'video')])
336
335
  }, type === 'video' ? /*#__PURE__*/React__default["default"].createElement("video", {
337
- className: styles$7.player,
336
+ className: styles$8.player,
338
337
  controls: true,
339
338
  src: url
340
339
  }) : null, type === 'audio' ? /*#__PURE__*/React__default["default"].createElement("div", {
341
- className: styles$7.audio
340
+ className: styles$8.audio
342
341
  }, /*#__PURE__*/React__default["default"].createElement("audio", {
343
- className: styles$7.player,
342
+ className: styles$8.player,
344
343
  controls: true,
345
344
  src: url
346
345
  })) : null, type !== 'video' ? /*#__PURE__*/React__default["default"].createElement("img", {
347
346
  src: thumbnail,
348
- className: styles$7.image,
347
+ className: styles$8.image,
349
348
  alt: filename
350
349
  }) : null), /*#__PURE__*/React__default["default"].createElement("div", {
351
350
  className: "p-2"
@@ -681,7 +680,7 @@ PropTypes__default["default"].shape({
681
680
  usage: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOf(['used', 'unused']))
682
681
  });
683
682
 
684
- var styles$6 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label","dropdown":"micromag-media-gallery-forms-dropdown-section-dropdown"};
683
+ var styles$7 = {"container":"micromag-media-gallery-forms-dropdown-section-container","dropdownToggle":"micromag-media-gallery-forms-dropdown-section-dropdownToggle","label":"micromag-media-gallery-forms-dropdown-section-label","dropdown":"micromag-media-gallery-forms-dropdown-section-dropdown"};
685
684
 
686
685
  var propTypes$7 = {
687
686
  value: PropTypes__default["default"].string,
@@ -726,9 +725,9 @@ function DropdownSection(_ref) {
726
725
  onChange(val);
727
726
  }, [setOpen]);
728
727
  return items !== null && items.length > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
729
- className: classNames__default["default"]([styles$6.container, 'dropdown', _defineProperty__default["default"]({}, className, className !== null)])
728
+ className: classNames__default["default"]([styles$7.container, 'dropdown', _defineProperty__default["default"]({}, className, className !== null)])
730
729
  }, /*#__PURE__*/React__default["default"].createElement("span", {
731
- className: styles$6.label
730
+ className: styles$7.label
732
731
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
733
732
  id: "9ZdD+Q",
734
733
  defaultMessage: [{
@@ -736,7 +735,7 @@ function DropdownSection(_ref) {
736
735
  "value": "Library for"
737
736
  }]
738
737
  })), /*#__PURE__*/React__default["default"].createElement("button", {
739
- className: classNames__default["default"]([styles$6.dropdownToggle, 'dropdown-toggle', {
738
+ className: classNames__default["default"]([styles$7.dropdownToggle, 'dropdown-toggle', {
740
739
  open: open === true
741
740
  }]),
742
741
  type: "button",
@@ -749,7 +748,7 @@ function DropdownSection(_ref) {
749
748
  "value": "All"
750
749
  }]
751
750
  })), /*#__PURE__*/React__default["default"].createElement("div", {
752
- className: classNames__default["default"]([styles$6.dropdown, 'dropdown-menu', {
751
+ className: classNames__default["default"]([styles$7.dropdown, 'dropdown-menu', {
753
752
  show: open === true
754
753
  }])
755
754
  }, items.map(function (_ref3) {
@@ -770,10 +769,11 @@ function DropdownSection(_ref) {
770
769
  DropdownSection.propTypes = propTypes$7;
771
770
  DropdownSection.defaultProps = defaultProps$7;
772
771
 
773
- // import { PropTypes as MicromagPropTypes } from '@micromag/core';
772
+ var styles$6 = {"container":"micromag-media-gallery-forms-search-container","input":"micromag-media-gallery-forms-search-input","active":"micromag-media-gallery-forms-search-active"};
774
773
 
775
774
  var propTypes$6 = {
776
775
  value: PropTypes__default["default"].string,
776
+ loading: PropTypes__default["default"].bool,
777
777
  onChange: PropTypes__default["default"].func,
778
778
  onFocus: PropTypes__default["default"].func,
779
779
  onBlur: PropTypes__default["default"].func,
@@ -782,6 +782,7 @@ var propTypes$6 = {
782
782
  };
783
783
  var defaultProps$6 = {
784
784
  value: null,
785
+ loading: false,
785
786
  onChange: null,
786
787
  onFocus: null,
787
788
  onBlur: null,
@@ -790,6 +791,7 @@ var defaultProps$6 = {
790
791
  };
791
792
  var Search = function Search(_ref) {
792
793
  var value = _ref.value,
794
+ loading = _ref.loading,
793
795
  onChange = _ref.onChange,
794
796
  onFocus = _ref.onFocus,
795
797
  onBlur = _ref.onBlur,
@@ -814,7 +816,7 @@ var Search = function Search(_ref) {
814
816
  }, [onClickIcon]);
815
817
  return /*#__PURE__*/React__default["default"].createElement("form", {
816
818
  method: "post",
817
- className: classNames__default["default"](['w-100', 'border', 'border-dark', 'rounded', _defineProperty__default["default"]({}, className, className !== null)]),
819
+ className: classNames__default["default"]([styles$6.container, 'w-100', 'border', 'border-dark', 'rounded', _defineProperty__default["default"]({}, className, className !== null)]),
818
820
  onSubmit: function onSubmit(e) {
819
821
  return e.preventDefault();
820
822
  }
@@ -825,9 +827,9 @@ var Search = function Search(_ref) {
825
827
  className: "btn",
826
828
  onClick: onClickSearchIcon
827
829
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
828
- icon: faSearch.faSearch
830
+ icon: loading ? faSpinner.faSpinner : faSearch.faSearch
829
831
  })), /*#__PURE__*/React__default["default"].createElement("input", {
830
- className: classNames__default["default"](['form-control', {
832
+ className: classNames__default["default"]([styles$6.input, 'form-control', {
831
833
  'bg-light': !!value,
832
834
  'text-dark': value
833
835
  }]),
@@ -848,9 +850,7 @@ var Search = function Search(_ref) {
848
850
  Search.propTypes = propTypes$6;
849
851
  Search.defaultProps = defaultProps$6;
850
852
 
851
- var styles$5 = {"container":"micromag-media-gallery-forms-search-filters-container","closeBtn":"micromag-media-gallery-forms-search-filters-closeBtn","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
852
-
853
- var styles$4 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
853
+ var styles$5 = {"container":"micromag-media-gallery-forms-tag-section-container","tag":"micromag-media-gallery-forms-tag-section-tag"};
854
854
 
855
855
  var propTypes$5 = {
856
856
  tags: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
@@ -878,12 +878,12 @@ var TagSection = function TagSection(_ref) {
878
878
  onChange(val, parent);
879
879
  }, [onChange, parent]);
880
880
  return /*#__PURE__*/React__default["default"].createElement("div", {
881
- className: classNames__default["default"]([styles$4.container, 'd-flex', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
881
+ className: classNames__default["default"]([styles$5.container, 'd-flex', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
882
882
  }, tags !== null ? tags.map(function (_ref3) {
883
883
  var label = _ref3.label,
884
884
  value = _ref3.value,
885
885
  active = _ref3.active;
886
- var itemClassNames = classNames__default["default"]([styles$4.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
886
+ var itemClassNames = classNames__default["default"]([styles$5.tag, 'btn', 'btn-sm', 'mb-1', 'me-1', 'p-1', 'btn-dark', {
887
887
  'btn-primary': active === true
888
888
  // 'btn-outline-light': active === false,
889
889
  }]);
@@ -900,10 +900,12 @@ var TagSection = function TagSection(_ref) {
900
900
  TagSection.propTypes = propTypes$5;
901
901
  TagSection.defaultProps = defaultProps$5;
902
902
 
903
+ var styles$4 = {"container":"micromag-media-gallery-forms-search-filters-container","closeBtn":"micromag-media-gallery-forms-search-filters-closeBtn","section":"micromag-media-gallery-forms-search-filters-section","title":"micromag-media-gallery-forms-search-filters-title","tags":"micromag-media-gallery-forms-search-filters-tags"};
904
+
903
905
  var propTypes$4 = {
904
906
  filters: PropTypes__default["default"].object,
905
907
  // eslint-disable-line
906
- sections: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
908
+ sections: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({})),
907
909
  onChange: PropTypes__default["default"].func,
908
910
  onClose: PropTypes__default["default"].func,
909
911
  className: PropTypes__default["default"].string
@@ -958,11 +960,11 @@ var SearchFilters = function SearchFilters(_ref) {
958
960
  }
959
961
  }, [filters, onChange]);
960
962
  return /*#__PURE__*/React__default["default"].createElement("div", {
961
- className: classNames__default["default"]([styles$5.container, 'flex-nowrap', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
963
+ className: classNames__default["default"]([styles$4.container, 'flex-nowrap', 'mt-1', _defineProperty__default["default"]({}, className, className !== null)])
962
964
  }, activeSections.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
963
965
  className: classNames__default["default"](['bg-light', 'flex-nowrap', 'text-dark', 'py-1', 'px-3', 'rounded'])
964
966
  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
965
- className: classNames__default["default"]([styles$5.closeBtn, 'py-1', 'px-1', 'text-dark']),
967
+ className: classNames__default["default"]([styles$4.closeBtn, 'py-1', 'px-1', 'text-dark']),
966
968
  icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
967
969
  icon: faTimes.faTimes
968
970
  }),
@@ -980,11 +982,11 @@ var SearchFilters = function SearchFilters(_ref) {
980
982
  items = _ref3.items;
981
983
  return items.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
982
984
  key: "filter-".concat(value),
983
- className: classNames__default["default"]([styles$5.section, 'py-2'])
985
+ className: classNames__default["default"]([styles$4.section, 'py-2'])
984
986
  }, /*#__PURE__*/React__default["default"].createElement("p", {
985
- className: classNames__default["default"]([styles$5.title, 'm-0'])
987
+ className: classNames__default["default"]([styles$4.title, 'm-0'])
986
988
  }, label), /*#__PURE__*/React__default["default"].createElement(TagSection, {
987
- className: classNames__default["default"]([styles$5.tags]),
989
+ className: classNames__default["default"]([styles$4.tags]),
988
990
  tags: items,
989
991
  parent: value,
990
992
  onChange: onSectionChange
@@ -994,9 +996,7 @@ var SearchFilters = function SearchFilters(_ref) {
994
996
  SearchFilters.propTypes = propTypes$4;
995
997
  SearchFilters.defaultProps = defaultProps$4;
996
998
 
997
- var styles$3 = {"container":"micromag-media-gallery-partials-active-filters-container","heading":"micromag-media-gallery-partials-active-filters-heading","title":"micromag-media-gallery-partials-active-filters-title","resetButton":"micromag-media-gallery-partials-active-filters-resetButton","activeTag":"micromag-media-gallery-partials-active-filters-activeTag"};
998
-
999
- var styles$2 = {"container":"micromag-media-gallery-buttons-close-container"};
999
+ var styles$3 = {"container":"micromag-media-gallery-buttons-close-container"};
1000
1000
 
1001
1001
  var _excluded = ["className"];
1002
1002
  var propTypes$3 = {
@@ -1009,11 +1009,11 @@ var CloseButton = function CloseButton(_ref) {
1009
1009
  var className = _ref.className,
1010
1010
  props = _objectWithoutProperties__default["default"](_ref, _excluded);
1011
1011
  return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
1012
- className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className !== null)]),
1012
+ className: classNames__default["default"]([styles$3.container, _defineProperty__default["default"]({}, className, className !== null)]),
1013
1013
  withoutStyle: true,
1014
1014
  icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
1015
1015
  icon: faTimes.faTimes,
1016
- className: styles$2.icon
1016
+ className: styles$3.icon
1017
1017
  }),
1018
1018
  iconPosition: "right"
1019
1019
  }, props));
@@ -1021,6 +1021,8 @@ var CloseButton = function CloseButton(_ref) {
1021
1021
  CloseButton.propTypes = propTypes$3;
1022
1022
  CloseButton.defaultProps = defaultProps$3;
1023
1023
 
1024
+ var styles$2 = {"container":"micromag-media-gallery-partials-active-filters-container","heading":"micromag-media-gallery-partials-active-filters-heading","title":"micromag-media-gallery-partials-active-filters-title","resetButton":"micromag-media-gallery-partials-active-filters-resetButton","activeTag":"micromag-media-gallery-partials-active-filters-activeTag"};
1025
+
1024
1026
  var propTypes$2 = {
1025
1027
  filters: PropTypes__default["default"].shape({
1026
1028
  types: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
@@ -1030,7 +1032,7 @@ var propTypes$2 = {
1030
1032
  }),
1031
1033
  onChange: PropTypes__default["default"].func,
1032
1034
  onReset: PropTypes__default["default"].func,
1033
- sections: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
1035
+ sections: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({})),
1034
1036
  className: PropTypes__default["default"].string
1035
1037
  };
1036
1038
  var defaultProps$2 = {
@@ -1064,11 +1066,11 @@ function ActiveFilters(_ref) {
1064
1066
  return oneHasValue || filters[key] !== null;
1065
1067
  }, false);
1066
1068
  return /*#__PURE__*/React__default["default"].createElement("div", {
1067
- className: classNames__default["default"](['w-100', styles$3.container, _defineProperty__default["default"]({}, className, className)])
1069
+ className: classNames__default["default"](['w-100', styles$2.container, _defineProperty__default["default"]({}, className, className)])
1068
1070
  }, hasValue ? /*#__PURE__*/React__default["default"].createElement("div", {
1069
- className: styles$3.heading
1071
+ className: styles$2.heading
1070
1072
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1071
- className: styles$3.title
1073
+ className: styles$2.title
1072
1074
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1073
1075
  id: "t2cFdl",
1074
1076
  defaultMessage: [{
@@ -1076,7 +1078,7 @@ function ActiveFilters(_ref) {
1076
1078
  "value": "Active filters"
1077
1079
  }]
1078
1080
  })), /*#__PURE__*/React__default["default"].createElement(CloseButton, {
1079
- className: styles$3.resetButton,
1081
+ className: styles$2.resetButton,
1080
1082
  onClick: handleReset
1081
1083
  }, /*#__PURE__*/React__default["default"].createElement("u", null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
1082
1084
  id: "/T/UDH",
@@ -1096,7 +1098,7 @@ function ActiveFilters(_ref) {
1096
1098
  _ref3$label = _ref3.label,
1097
1099
  label = _ref3$label === void 0 ? '' : _ref3$label;
1098
1100
  return /*#__PURE__*/React__default["default"].createElement(components.Button, {
1099
- className: styles$3.activeTag,
1101
+ className: styles$2.activeTag,
1100
1102
  key: "filter-button-".concat(activeValue),
1101
1103
  type: "submit",
1102
1104
  size: "sm",
@@ -1126,6 +1128,7 @@ var propTypes$1 = {
1126
1128
  storyId: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
1127
1129
  tags: core.PropTypes.tags,
1128
1130
  authors: core.PropTypes.authors,
1131
+ loading: PropTypes__default["default"].bool,
1129
1132
  withoutSource: PropTypes__default["default"].bool,
1130
1133
  withoutType: PropTypes__default["default"].bool,
1131
1134
  onClickAdd: PropTypes__default["default"].func,
@@ -1146,6 +1149,7 @@ var defaultProps$1 = {
1146
1149
  storyId: null,
1147
1150
  tags: [],
1148
1151
  authors: [],
1152
+ loading: false,
1149
1153
  withoutSource: false,
1150
1154
  withoutType: true,
1151
1155
  onClickAdd: null,
@@ -1165,6 +1169,7 @@ function Navbar(_ref) {
1165
1169
  storyId = _ref.storyId,
1166
1170
  tags = _ref.tags,
1167
1171
  authors = _ref.authors,
1172
+ loading = _ref.loading,
1168
1173
  withoutSource = _ref.withoutSource,
1169
1174
  withoutType = _ref.withoutType,
1170
1175
  className = _ref.className,
@@ -1322,8 +1327,8 @@ function Navbar(_ref) {
1322
1327
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1323
1328
  className: classNames__default["default"]([styles$1.inner])
1324
1329
  }, media === null ? /*#__PURE__*/React__default["default"].createElement("div", {
1325
- className: classNames__default["default"](['list-group-item rounded w-100 mw-100 py-1 px-1 navbar-text d-flex align-items-center justify-content-between', {
1326
- 'border border-dark': selectedMedia !== null
1330
+ className: classNames__default["default"](['list-group-item rounded w-100 mw-100 navbar-text d-flex align-items-center justify-content-between', {
1331
+ 'border border-dark py-1 px-1': selectedMedia !== null
1327
1332
  }])
1328
1333
  }, selectedMedia !== null ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
1329
1334
  className: classNames__default["default"]([styles$1.mediaLabel, 'd-flex px-0 py-0 me-1 align-items-center border-0']),
@@ -1391,7 +1396,7 @@ function Navbar(_ref) {
1391
1396
  }),
1392
1397
  onClick: onClickBack
1393
1398
  })), /*#__PURE__*/React__default["default"].createElement("strong", {
1394
- className: "navbar-text me-auto w-100 text-truncate"
1399
+ className: "navbar-text me-auto w-100 text-truncate text-light"
1395
1400
  }, media !== null ? media.name : null)) : null, media === null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
1396
1401
  className: "d-flex w-100 flex-nowrap justify-content-between"
1397
1402
  }, /*#__PURE__*/React__default["default"].createElement(Search, {
@@ -1399,6 +1404,7 @@ function Navbar(_ref) {
1399
1404
  onChange: onSearchChange,
1400
1405
  onFocus: onSearchFocus,
1401
1406
  onClickIcon: onToggleMenu,
1407
+ loading: loading,
1402
1408
  className: classNames__default["default"](['d-flex'])
1403
1409
  })), open ? /*#__PURE__*/React__default["default"].createElement("div", {
1404
1410
  className: "d-flex w-100 my-1 flex-nowrap justify-content-between"
@@ -1593,6 +1599,7 @@ function MediaGallery(_ref) {
1593
1599
  storyId: storyId,
1594
1600
  authors: authors,
1595
1601
  tags: tags,
1602
+ loading: loading || uploading,
1596
1603
  className: navbarClassName
1597
1604
  }), /*#__PURE__*/React__default["default"].createElement("div", {
1598
1605
  className: styles.content
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/media-gallery",
3
- "version": "0.3.320",
3
+ "version": "0.3.322",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -59,8 +59,8 @@
59
59
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
60
60
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
61
61
  "@fortawesome/react-fontawesome": "^0.1.13",
62
- "@micromag/core": "^0.3.318",
63
- "@micromag/data": "^0.3.318",
62
+ "@micromag/core": "^0.3.322",
63
+ "@micromag/data": "^0.3.322",
64
64
  "bootstrap": "5.2.0-beta1",
65
65
  "change-case": "^4.1.2",
66
66
  "classnames": "^2.2.6",
@@ -73,5 +73,5 @@
73
73
  "publishConfig": {
74
74
  "access": "public"
75
75
  },
76
- "gitHead": "067fa7bf5e729c6e7c9df5a5832d60376fd8a812"
76
+ "gitHead": "2dfe09ad5a9ac720e4bfbffcb6371fc31c24fa9f"
77
77
  }