@micromag/fields 0.3.814 → 0.3.821

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 +1 -1
  2. package/es/all.js +123 -36
  3. package/es/index.js +153 -46
  4. package/package.json +8 -8
package/assets/css/styles.css CHANGED
@@ -16,7 +16,7 @@
16
16
  .micromag-fields-slider-container{display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.micromag-fields-slider-container .micromag-fields-slider-slider{padding:0 .5rem;position:relative;top:-2px}.micromag-fields-slider-container .micromag-fields-slider-input{font-size:.75rem;margin-left:.25rem;width:5em}.micromag-fields-slider-container .micromag-fields-slider-unit{font-size:.75rem;margin-left:.25rem}.micromag-fields-slider-container .rc-slider{border-radius:6px;height:14px;padding:5px 0;position:relative;-ms-touch-action:none;touch-action:none;width:100%}.micromag-fields-slider-container .rc-slider,.micromag-fields-slider-container .rc-slider *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.micromag-fields-slider-container .rc-slider-rail{background-color:#e9e9e9;border-radius:6px;height:4px;position:absolute;width:100%}.micromag-fields-slider-container .rc-slider-track,.micromag-fields-slider-container .rc-slider-tracks{background-color:#abe2fb;border-radius:6px;height:4px;position:absolute}.micromag-fields-slider-container .rc-slider-track-draggable{background-clip:content-box;border-bottom:5px solid rgba(0,0,0,0);border-top:5px solid rgba(0,0,0,0);-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px);z-index:1}.micromag-fields-slider-container .rc-slider-handle{background-color:#fff;border:2px solid #96dbfa;border-radius:50%;cursor:pointer;cursor:-webkit-grab;cursor:grab;height:14px;margin-top:-5px;opacity:.8;position:absolute;-ms-touch-action:pan-x;touch-action:pan-x;width:14px;z-index:1}.micromag-fields-slider-container .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging{border-color:#57c5f7;-webkit-box-shadow:0 0 0 5px #96dbfa;box-shadow:0 0 0 5px #96dbfa}.micromag-fields-slider-container .rc-slider-handle:focus{-webkit-box-shadow:none;box-shadow:none;outline:none}.micromag-fields-slider-container .rc-slider-handle:focus-visible{border-color:#2db7f5;-webkit-box-shadow:0 0 0 3px #96dbfa;box-shadow:0 0 0 3px #96dbfa}.micromag-fields-slider-container .rc-slider-handle-click-focused:focus{border-color:#96dbfa;-webkit-box-shadow:none;-webkit-box-shadow:initial;box-shadow:none}.micromag-fields-slider-container .rc-slider-handle:hover{border-color:#57c5f7}.micromag-fields-slider-container .rc-slider-handle:active{border-color:#57c5f7;-webkit-box-shadow:0 0 5px #57c5f7;box-shadow:0 0 5px #57c5f7;cursor:-webkit-grabbing;cursor:grabbing}.micromag-fields-slider-container .rc-slider-mark{font-size:12px;left:0;position:absolute;top:18px;width:100%}.micromag-fields-slider-container .rc-slider-mark-text{color:#999;cursor:pointer;display:inline-block;position:absolute;text-align:center;vertical-align:middle}.micromag-fields-slider-container .rc-slider-mark-text-active{color:#666}.micromag-fields-slider-container .rc-slider-step{background:transparent;height:4px;position:absolute;width:100%}.micromag-fields-slider-container .rc-slider-dot{background-color:#fff;border:2px solid #e9e9e9;border-radius:50%;bottom:-2px;cursor:pointer;height:8px;position:absolute;vertical-align:middle;width:8px}.micromag-fields-slider-container .rc-slider-dot-active{border-color:#96dbfa}.micromag-fields-slider-container .rc-slider-dot-reverse{margin-right:-4px}.micromag-fields-slider-container .rc-slider-disabled{background-color:#e9e9e9}.micromag-fields-slider-container .rc-slider-disabled .rc-slider-track{background-color:#ccc}.micromag-fields-slider-container .rc-slider-disabled .rc-slider-dot,.micromag-fields-slider-container .rc-slider-disabled .rc-slider-handle{background-color:#fff;border-color:#ccc;-webkit-box-shadow:none;box-shadow:none;cursor:not-allowed}.micromag-fields-slider-container .rc-slider-disabled .rc-slider-dot,.micromag-fields-slider-container .rc-slider-disabled .rc-slider-mark-text{cursor:not-allowed!important}.micromag-fields-slider-container .rc-slider-vertical{height:100%;padding:0 5px;width:14px}.micromag-fields-slider-container .rc-slider-vertical .rc-slider-rail{height:100%;width:4px}.micromag-fields-slider-container .rc-slider-vertical .rc-slider-track{bottom:0;left:5px;width:4px}.micromag-fields-slider-container .rc-slider-vertical .rc-slider-track-draggable{border-bottom:0;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);border-top:0;-webkit-transform:translateX(-5px);-ms-transform:translateX(-5px);transform:translateX(-5px)}.micromag-fields-slider-container .rc-slider-vertical .rc-slider-handle{margin-left:-5px;margin-top:0;position:absolute;-ms-touch-action:pan-y;touch-action:pan-y;z-index:1}.micromag-fields-slider-container .rc-slider-vertical .rc-slider-mark{height:100%;left:18px;top:0}.micromag-fields-slider-container .rc-slider-vertical .rc-slider-step{height:100%;width:4px}.micromag-fields-slider-container .rc-slider-vertical .rc-slider-dot{margin-left:-2px}.micromag-fields-slider-container .rc-slider-tooltip-zoom-down-appear,.micromag-fields-slider-container .rc-slider-tooltip-zoom-down-enter,.micromag-fields-slider-container .rc-slider-tooltip-zoom-down-leave{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-play-state:paused;animation-play-state:paused;display:block!important}.micromag-fields-slider-container .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active,.micromag-fields-slider-container .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active{-webkit-animation-name:rcSliderTooltipZoomDownIn;animation-name:rcSliderTooltipZoomDownIn;-webkit-animation-play-state:running;animation-play-state:running}.micromag-fields-slider-container .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active{-webkit-animation-name:rcSliderTooltipZoomDownOut;animation-name:rcSliderTooltipZoomDownOut;-webkit-animation-play-state:running;animation-play-state:running}.micromag-fields-slider-container .rc-slider-tooltip-zoom-down-appear,.micromag-fields-slider-container .rc-slider-tooltip-zoom-down-enter{-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}.micromag-fields-slider-container .rc-slider-tooltip-zoom-down-leave{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06)}@-webkit-keyframes micromag-fields-slider-rcSliderTooltipZoomDownIn{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}to{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}}@keyframes micromag-fields-slider-rcSliderTooltipZoomDownIn{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}to{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}}@-webkit-keyframes micromag-fields-slider-rcSliderTooltipZoomDownOut{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}to{opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}}@keyframes micromag-fields-slider-rcSliderTooltipZoomDownOut{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}to{opacity:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}}.micromag-fields-slider-container .rc-slider-tooltip{left:-9999px;position:absolute;top:-9999px;visibility:visible}.micromag-fields-slider-container .rc-slider-tooltip,.micromag-fields-slider-container .rc-slider-tooltip *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.micromag-fields-slider-container .rc-slider-tooltip-hidden{display:none}.micromag-fields-slider-container .rc-slider-tooltip-placement-top{padding:4px 0 8px}.micromag-fields-slider-container .rc-slider-tooltip-inner{background-color:#6c6c6c;border-radius:6px;-webkit-box-shadow:0 0 4px #d9d9d9;box-shadow:0 0 4px #d9d9d9;color:#fff;font-size:12px;height:24px;line-height:1;min-width:24px;padding:6px 2px;text-align:center;-webkit-text-decoration:none;text-decoration:none}.micromag-fields-slider-container .rc-slider-tooltip-arrow{border-color:transparent;border-style:solid;height:0;position:absolute;width:0}.micromag-fields-slider-container .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow{border-top-color:#6c6c6c;border-width:4px 4px 0;bottom:4px;left:50%;margin-left:-4px}
17
17
  .micromag-fields-border-width-container{padding-bottom:1rem}
18
18
  .micromag-fields-box-style-preview{display:block;height:1em;position:relative;width:2em}.micromag-fields-box-style-preview .micromag-fields-box-style-box{display:block;height:400%;left:0;position:absolute;top:0;-webkit-transform:scale(.25);-ms-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:400%}
19
- .micromag-fields-button-layout-container{width:100%}.micromag-fields-button-layout-button{color:#ccc;-ms-flex:none!important;flex:none!important}.micromag-fields-button-layout-button .micromag-fields-button-layout-placeholderText{padding:0 2px}.micromag-fields-button-layout-button .micromag-fields-button-layout-placeholderTextOver{bottom:6px;color:#6c6c6c;left:25%;position:absolute;width:50%}.micromag-fields-button-layout-button.micromag-fields-button-layout-active,.micromag-fields-button-layout-button:active,.micromag-fields-button-layout-button:hover{color:#1c1c1c}.micromag-fields-button-layout-button.micromag-fields-button-layout-active .micromag-fields-button-layout-placeholderTextOver,.micromag-fields-button-layout-button:active .micromag-fields-button-layout-placeholderTextOver,.micromag-fields-button-layout-button:hover .micromag-fields-button-layout-placeholderTextOver{opacity:.6}.micromag-fields-button-layout-layout{height:120px;position:relative;width:80px}.micromag-fields-button-layout-type{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;height:40px;justify-content:center;width:40px}
19
+ .micromag-fields-button-layout-container{width:100%}.micromag-fields-button-layout-button{color:#ccc;padding:.66em;width:100%}.micromag-fields-button-layout-button .micromag-fields-button-layout-placeholderText{padding:0 2px}.micromag-fields-button-layout-button .micromag-fields-button-layout-placeholderTextOver{bottom:6px;color:#6c6c6c;left:25%;position:absolute;width:50%}.micromag-fields-button-layout-button .micromag-fields-button-layout-placeholderTextRight{width:.625em}.micromag-fields-button-layout-button.micromag-fields-button-layout-active,.micromag-fields-button-layout-button:active,.micromag-fields-button-layout-button:hover{color:#1c1c1c}.micromag-fields-button-layout-button.micromag-fields-button-layout-active .micromag-fields-button-layout-placeholderTextOver,.micromag-fields-button-layout-button:active .micromag-fields-button-layout-placeholderTextOver,.micromag-fields-button-layout-button:hover .micromag-fields-button-layout-placeholderTextOver{opacity:.6}.micromag-fields-button-layout-layout{height:120px;position:relative;width:80px}.micromag-fields-button-layout-type{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;height:40px;justify-content:center;width:40px}
20
20
  .micromag-fields-call-to-action-container .micromag-fields-call-to-action-field{display:none;margin-bottom:0}.micromag-fields-call-to-action-container .micromag-fields-call-to-action-field:first-child{display:block}.micromag-fields-call-to-action-container .micromag-fields-call-to-action-field:first-child button{display:block;margin-left:auto}.micromag-fields-call-to-action-container.micromag-fields-call-to-action-active .micromag-fields-call-to-action-field{display:block;margin-bottom:1rem}
21
21
  .micromag-fields-toggle-section-container .micromag-fields-toggle-section-field{display:none;margin-bottom:0}.micromag-fields-toggle-section-container .micromag-fields-toggle-section-field:first-child{display:block}.micromag-fields-toggle-section-container .micromag-fields-toggle-section-field:first-child button{display:block;margin-left:auto}.micromag-fields-toggle-section-container.micromag-fields-toggle-section-enabled .micromag-fields-toggle-section-field{display:block;margin-bottom:1rem}
22
22
  .micromag-fields-date-container{position:relative}.micromag-fields-date-container .micromag-fields-date-input::-webkit-inner-spin-button,.micromag-fields-date-container .micromag-fields-date-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none}.micromag-fields-date-container .micromag-fields-date-input{-moz-appearance:textfield;margin-left:auto;padding-right:20px;width:100%}
package/es/all.js CHANGED
@@ -1721,41 +1721,37 @@ var def$1 = {
1721
1721
  "value": "Spacing"
1722
1722
  }]
1723
1723
  })
1724
- }, {
1725
- name: 'image',
1726
- type: 'fields',
1727
- label: defineMessage({
1728
- id: "WOStf5",
1729
- defaultMessage: [{
1730
- "type": 0,
1731
- "value": "Image"
1732
- }]
1733
- }),
1734
- isList: true,
1735
- fields: [{
1736
- name: 'width',
1737
- type: 'number',
1738
- isHorizontal: true,
1739
- label: defineMessage({
1740
- id: "mY0bHb",
1741
- defaultMessage: [{
1742
- "type": 0,
1743
- "value": "Width"
1744
- }]
1745
- })
1746
- }, {
1747
- name: 'height',
1748
- type: 'number',
1749
- isHorizontal: true,
1750
- label: defineMessage({
1751
- id: "Zw4vWC",
1752
- defaultMessage: [{
1753
- "type": 0,
1754
- "value": "Height"
1755
- }]
1756
- })
1757
- }]
1758
- }, {
1724
+ },
1725
+ // {
1726
+ // name: 'image',
1727
+ // type: 'fields',
1728
+ // label: defineMessage({
1729
+ // defaultMessage: 'Image',
1730
+ // description: 'Fields section label',
1731
+ // }),
1732
+ // isList: true,
1733
+ // fields: [
1734
+ // {
1735
+ // name: 'width',
1736
+ // type: 'number',
1737
+ // isHorizontal: true,
1738
+ // label: defineMessage({
1739
+ // defaultMessage: 'Width',
1740
+ // description: 'Field label',
1741
+ // }),
1742
+ // },
1743
+ // {
1744
+ // name: 'height',
1745
+ // type: 'number',
1746
+ // isHorizontal: true,
1747
+ // label: defineMessage({
1748
+ // defaultMessage: 'Height',
1749
+ // description: 'Field label',
1750
+ // }),
1751
+ // },
1752
+ // ],
1753
+ // },
1754
+ {
1759
1755
  name: 'withSquareItems',
1760
1756
  type: 'toggle',
1761
1757
  label: defineMessage({
@@ -2141,6 +2137,16 @@ var quizAnswer = {
2141
2137
  "value": "Label"
2142
2138
  }]
2143
2139
  })
2140
+ }, {
2141
+ name: 'visual',
2142
+ type: 'visual',
2143
+ label: defineMessage({
2144
+ id: "xT/onn",
2145
+ defaultMessage: [{
2146
+ "type": 0,
2147
+ "value": "Image"
2148
+ }]
2149
+ })
2144
2150
  }, {
2145
2151
  name: 'good',
2146
2152
  type: 'true-false',
@@ -2248,6 +2254,16 @@ var quizPointsAnswer = {
2248
2254
  "value": "Label"
2249
2255
  }]
2250
2256
  })
2257
+ }, {
2258
+ name: 'visual',
2259
+ type: 'visual',
2260
+ label: defineMessage({
2261
+ id: "xT/onn",
2262
+ defaultMessage: [{
2263
+ "type": 0,
2264
+ "value": "Image"
2265
+ }]
2266
+ })
2251
2267
  }, {
2252
2268
  name: 'good',
2253
2269
  type: 'true-false',
@@ -2285,6 +2301,17 @@ var quizPointsAnswer = {
2285
2301
  // }),
2286
2302
  // },
2287
2303
  {
2304
+ name: 'buttonLayout',
2305
+ type: 'button-layout',
2306
+ label: defineMessage({
2307
+ id: "OPxJx/",
2308
+ defaultMessage: [{
2309
+ "type": 0,
2310
+ "value": "Layout"
2311
+ }]
2312
+ }),
2313
+ types: ['label-bottom', 'label-top', 'no-label', 'label-over', 'label-left', 'label-right']
2314
+ }, {
2288
2315
  type: 'fields',
2289
2316
  isList: true,
2290
2317
  fields: [{
@@ -2335,6 +2362,66 @@ var radios = {
2335
2362
  component: 'radios'
2336
2363
  };
2337
2364
 
2365
+ var richButtonStyles = {
2366
+ id: 'rich-button-styles',
2367
+ fields: [{
2368
+ name: 'layout',
2369
+ type: 'button-layout',
2370
+ label: defineMessage({
2371
+ id: "OPxJx/",
2372
+ defaultMessage: [{
2373
+ "type": 0,
2374
+ "value": "Layout"
2375
+ }]
2376
+ })
2377
+ }, {
2378
+ name: 'visualWidth',
2379
+ type: 'slider',
2380
+ label: defineMessage({
2381
+ id: "JGvpwT",
2382
+ defaultMessage: [{
2383
+ "type": 0,
2384
+ "value": "Visual width"
2385
+ }]
2386
+ }),
2387
+ min: 0,
2388
+ max: 100,
2389
+ step: 1,
2390
+ unit: '%',
2391
+ withInput: true
2392
+ }, {
2393
+ name: 'textStyle',
2394
+ type: 'text-style-form',
2395
+ label: defineMessage({
2396
+ id: "rzXCu2",
2397
+ defaultMessage: [{
2398
+ "type": 0,
2399
+ "value": "Label style"
2400
+ }]
2401
+ })
2402
+ }, {
2403
+ name: 'labelBoxStyle',
2404
+ type: 'box-style-form',
2405
+ label: defineMessage({
2406
+ id: "PYokTY",
2407
+ defaultMessage: [{
2408
+ "type": 0,
2409
+ "value": "Label box style"
2410
+ }]
2411
+ })
2412
+ }, {
2413
+ name: 'boxStyle',
2414
+ type: 'box-style-form',
2415
+ label: defineMessage({
2416
+ id: "nno1Pq",
2417
+ defaultMessage: [{
2418
+ "type": 0,
2419
+ "value": "Button style"
2420
+ }]
2421
+ })
2422
+ }]
2423
+ };
2424
+
2338
2425
  var screenLayout = {
2339
2426
  id: 'screen-layout',
2340
2427
  component: 'screen-layout'
@@ -2844,4 +2931,4 @@ var visuals = {
2844
2931
  }
2845
2932
  };
2846
2933
 
2847
- export { alignHorizontal, alignVertical, alignment, alternative, alternatives, answer, answers, audio, audioElement, authorElement, background, backgroundRecommendation, badge, borderRadius, borderStyle, borderWidth, def$5 as boxStyle, boxStyleForm, button, buttonElement, buttonLayout, buttonLink, buttons, def$4 as callToAction, callToActionForm, captions, cardLayout, checkboxes, closedCaptions, color, conversation, customAnswer, date, dateElement, datetime, email, entries, entriesWithImage, entriesWithVisual, entry, entryWithImage, entryWithVisual, fieldWithForm, fields$3 as fields, fit, font, fontFamily, fontSize, fontWeight, fonts, footer, gameSortItem, gameSortItems, geoPosition, def$2 as graphBarStyle, graphBarStyleForm, header, headingElement, image, imageWithCaption, images, imagesWithCaption, inputElement, itemTextStyle, items, def$1 as keypadLayout, keypadLayoutForm, letterSpacing, lineHeight, mapZoom, marker, markerWithImage, markers, markersWithImage, mediaThumbnail, message, messages, metadata, number, padding, parameters, password, quizAnswer, quizAnswers, quizPointsAnswer, quizPointsAnswers, radios, screenLayout, select, shadowAngle, def$3 as shareIncentive, shareIncentiveForm, slider, speaker, speakers, text, textElement, textModal, def as textStyle, textStyleForm, toggle, tokens, trueFalse, url, video, videoElement, visual, visualWithCaption, visuals, visualsWithCaption };
2934
+ export { alignHorizontal, alignVertical, alignment, alternative, alternatives, answer, answers, audio, audioElement, authorElement, background, backgroundRecommendation, badge, borderRadius, borderStyle, borderWidth, def$5 as boxStyle, boxStyleForm, button, buttonElement, buttonLayout, buttonLink, buttons, def$4 as callToAction, callToActionForm, captions, cardLayout, checkboxes, closedCaptions, color, conversation, customAnswer, date, dateElement, datetime, email, entries, entriesWithImage, entriesWithVisual, entry, entryWithImage, entryWithVisual, fieldWithForm, fields$3 as fields, fit, font, fontFamily, fontSize, fontWeight, fonts, footer, gameSortItem, gameSortItems, geoPosition, def$2 as graphBarStyle, graphBarStyleForm, header, headingElement, image, imageWithCaption, images, imagesWithCaption, inputElement, itemTextStyle, items, def$1 as keypadLayout, keypadLayoutForm, letterSpacing, lineHeight, mapZoom, marker, markerWithImage, markers, markersWithImage, mediaThumbnail, message, messages, metadata, number, padding, parameters, password, quizAnswer, quizAnswers, quizPointsAnswer, quizPointsAnswers, radios, richButtonStyles, screenLayout, select, shadowAngle, def$3 as shareIncentive, shareIncentiveForm, slider, speaker, speakers, text, textElement, textModal, def as textStyle, textStyleForm, toggle, tokens, trueFalse, url, video, videoElement, visual, visualWithCaption, visuals, visualsWithCaption };
package/es/index.js CHANGED
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
8
8
  import { useFieldsManager, useFieldComponent, useFieldContext, FieldsValueContextProvider, useGetColors, FieldContextProvider, useFonts, useGoogleMapsClient, useFieldsValue, useScreenDefinition, ComponentsProvider, FIELDS_NAMESPACE, FieldsProvider as FieldsProvider$1 } from '@micromag/core/contexts';
9
9
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
10
10
  import classNames from 'classnames';
11
- import { Label, Button, Empty, ClearButton, Modal, ModalDialog, PlaceholderImage, PlaceholderText, PlaceholderTitle, ScreenPlaceholder, LinkStyle, HighlightStyle } from '@micromag/core/components';
11
+ import { Label, Button, Empty, ClearButton, Modal, ModalDialog, PlaceholderText, PlaceholderImage, PlaceholderTitle, ScreenPlaceholder, LinkStyle, HighlightStyle } from '@micromag/core/components';
12
12
  import isObject from 'lodash/isObject';
13
13
  import { faArrowDown } from '@fortawesome/free-solid-svg-icons/faArrowDown';
14
14
  import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';
@@ -1778,41 +1778,37 @@ var def$1 = {
1778
1778
  "value": "Spacing"
1779
1779
  }]
1780
1780
  })
1781
- }, {
1782
- name: 'image',
1783
- type: 'fields',
1784
- label: defineMessage({
1785
- id: "WOStf5",
1786
- defaultMessage: [{
1787
- "type": 0,
1788
- "value": "Image"
1789
- }]
1790
- }),
1791
- isList: true,
1792
- fields: [{
1793
- name: 'width',
1794
- type: 'number',
1795
- isHorizontal: true,
1796
- label: defineMessage({
1797
- id: "mY0bHb",
1798
- defaultMessage: [{
1799
- "type": 0,
1800
- "value": "Width"
1801
- }]
1802
- })
1803
- }, {
1804
- name: 'height',
1805
- type: 'number',
1806
- isHorizontal: true,
1807
- label: defineMessage({
1808
- id: "Zw4vWC",
1809
- defaultMessage: [{
1810
- "type": 0,
1811
- "value": "Height"
1812
- }]
1813
- })
1814
- }]
1815
- }, {
1781
+ },
1782
+ // {
1783
+ // name: 'image',
1784
+ // type: 'fields',
1785
+ // label: defineMessage({
1786
+ // defaultMessage: 'Image',
1787
+ // description: 'Fields section label',
1788
+ // }),
1789
+ // isList: true,
1790
+ // fields: [
1791
+ // {
1792
+ // name: 'width',
1793
+ // type: 'number',
1794
+ // isHorizontal: true,
1795
+ // label: defineMessage({
1796
+ // defaultMessage: 'Width',
1797
+ // description: 'Field label',
1798
+ // }),
1799
+ // },
1800
+ // {
1801
+ // name: 'height',
1802
+ // type: 'number',
1803
+ // isHorizontal: true,
1804
+ // label: defineMessage({
1805
+ // defaultMessage: 'Height',
1806
+ // description: 'Field label',
1807
+ // }),
1808
+ // },
1809
+ // ],
1810
+ // },
1811
+ {
1816
1812
  name: 'withSquareItems',
1817
1813
  type: 'toggle',
1818
1814
  label: defineMessage({
@@ -2198,6 +2194,16 @@ var quizAnswer = {
2198
2194
  "value": "Label"
2199
2195
  }]
2200
2196
  })
2197
+ }, {
2198
+ name: 'visual',
2199
+ type: 'visual',
2200
+ label: defineMessage({
2201
+ id: "xT/onn",
2202
+ defaultMessage: [{
2203
+ "type": 0,
2204
+ "value": "Image"
2205
+ }]
2206
+ })
2201
2207
  }, {
2202
2208
  name: 'good',
2203
2209
  type: 'true-false',
@@ -2305,6 +2311,16 @@ var quizPointsAnswer = {
2305
2311
  "value": "Label"
2306
2312
  }]
2307
2313
  })
2314
+ }, {
2315
+ name: 'visual',
2316
+ type: 'visual',
2317
+ label: defineMessage({
2318
+ id: "xT/onn",
2319
+ defaultMessage: [{
2320
+ "type": 0,
2321
+ "value": "Image"
2322
+ }]
2323
+ })
2308
2324
  }, {
2309
2325
  name: 'good',
2310
2326
  type: 'true-false',
@@ -2342,6 +2358,17 @@ var quizPointsAnswer = {
2342
2358
  // }),
2343
2359
  // },
2344
2360
  {
2361
+ name: 'buttonLayout',
2362
+ type: 'button-layout',
2363
+ label: defineMessage({
2364
+ id: "OPxJx/",
2365
+ defaultMessage: [{
2366
+ "type": 0,
2367
+ "value": "Layout"
2368
+ }]
2369
+ }),
2370
+ types: ['label-bottom', 'label-top', 'no-label', 'label-over', 'label-left', 'label-right']
2371
+ }, {
2345
2372
  type: 'fields',
2346
2373
  isList: true,
2347
2374
  fields: [{
@@ -2392,6 +2419,66 @@ var radios = {
2392
2419
  component: 'radios'
2393
2420
  };
2394
2421
 
2422
+ var richButtonStyles = {
2423
+ id: 'rich-button-styles',
2424
+ fields: [{
2425
+ name: 'layout',
2426
+ type: 'button-layout',
2427
+ label: defineMessage({
2428
+ id: "OPxJx/",
2429
+ defaultMessage: [{
2430
+ "type": 0,
2431
+ "value": "Layout"
2432
+ }]
2433
+ })
2434
+ }, {
2435
+ name: 'visualWidth',
2436
+ type: 'slider',
2437
+ label: defineMessage({
2438
+ id: "JGvpwT",
2439
+ defaultMessage: [{
2440
+ "type": 0,
2441
+ "value": "Visual width"
2442
+ }]
2443
+ }),
2444
+ min: 0,
2445
+ max: 100,
2446
+ step: 1,
2447
+ unit: '%',
2448
+ withInput: true
2449
+ }, {
2450
+ name: 'textStyle',
2451
+ type: 'text-style-form',
2452
+ label: defineMessage({
2453
+ id: "rzXCu2",
2454
+ defaultMessage: [{
2455
+ "type": 0,
2456
+ "value": "Label style"
2457
+ }]
2458
+ })
2459
+ }, {
2460
+ name: 'labelBoxStyle',
2461
+ type: 'box-style-form',
2462
+ label: defineMessage({
2463
+ id: "PYokTY",
2464
+ defaultMessage: [{
2465
+ "type": 0,
2466
+ "value": "Label box style"
2467
+ }]
2468
+ })
2469
+ }, {
2470
+ name: 'boxStyle',
2471
+ type: 'box-style-form',
2472
+ label: defineMessage({
2473
+ id: "nno1Pq",
2474
+ defaultMessage: [{
2475
+ "type": 0,
2476
+ "value": "Button style"
2477
+ }]
2478
+ })
2479
+ }]
2480
+ };
2481
+
2395
2482
  var screenLayout = {
2396
2483
  id: 'screen-layout',
2397
2484
  component: 'screen-layout'
@@ -2990,6 +3077,7 @@ var allFields = /*#__PURE__*/Object.freeze({
2990
3077
  quizPointsAnswer: quizPointsAnswer,
2991
3078
  quizPointsAnswers: quizPointsAnswers,
2992
3079
  radios: radios,
3080
+ richButtonStyles: richButtonStyles,
2993
3081
  screenLayout: screenLayout,
2994
3082
  select: select,
2995
3083
  shadowAngle: shadowAngle,
@@ -5390,7 +5478,7 @@ BoxStyleForm.propTypes = propTypes$1b;
5390
5478
  BoxStyleForm.defaultProps = defaultProps$1b;
5391
5479
  BoxStyleForm.withForm = true;
5392
5480
 
5393
- var styles$s = {"container":"micromag-fields-button-layout-container","button":"micromag-fields-button-layout-button","placeholderText":"micromag-fields-button-layout-placeholderText","placeholderTextOver":"micromag-fields-button-layout-placeholderTextOver","active":"micromag-fields-button-layout-active"};
5481
+ var styles$s = {"container":"micromag-fields-button-layout-container","button":"micromag-fields-button-layout-button","placeholderText":"micromag-fields-button-layout-placeholderText","placeholderTextOver":"micromag-fields-button-layout-placeholderTextOver","placeholderTextRight":"micromag-fields-button-layout-placeholderTextRight","active":"micromag-fields-button-layout-active"};
5394
5482
 
5395
5483
  var propTypes$1a = {
5396
5484
  types: PropTypes.arrayOf(PropTypes.string),
@@ -5400,7 +5488,7 @@ var propTypes$1a = {
5400
5488
  onChange: PropTypes.func
5401
5489
  };
5402
5490
  var defaultProps$1a = {
5403
- types: ['label-bottom', 'label-top', 'no-label', 'label-over'],
5491
+ types: ['label-bottom', 'label-top', 'no-label', 'label-over', 'label-right', 'label-left'],
5404
5492
  value: null,
5405
5493
  defaultValue: null,
5406
5494
  className: null,
@@ -5413,11 +5501,10 @@ var ButtonLayout = function ButtonLayout(_ref) {
5413
5501
  className = _ref.className,
5414
5502
  onChange = _ref.onChange;
5415
5503
  var finalValue = value === null && defaultValue !== null ? defaultValue : value;
5416
- var onButtonLayoutChange = useCallback(function (newVal) {
5417
- // const v = newVal === finalValue ? null : newVal;
5418
-
5504
+ var onButtonLayoutChange = useCallback(function () {
5505
+ var newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
5419
5506
  onChange(newVal);
5420
- }, [finalValue]);
5507
+ }, [finalValue, onChange]);
5421
5508
  var getLayoutPreviewByType = useCallback(function (type) {
5422
5509
  switch (type) {
5423
5510
  case 'label-bottom':
@@ -5452,14 +5539,34 @@ var ButtonLayout = function ButtonLayout(_ref) {
5452
5539
  lines: 1,
5453
5540
  withInvertedColors: false
5454
5541
  }));
5542
+ case 'label-right':
5543
+ return /*#__PURE__*/React.createElement("div", {
5544
+ className: classNames(['d-flex', 'flex-row', 'align-items-center'])
5545
+ }, /*#__PURE__*/React.createElement(PlaceholderImage, {
5546
+ width: "0.625em",
5547
+ height: "1.25em"
5548
+ }), /*#__PURE__*/React.createElement(PlaceholderText, {
5549
+ className: classNames([styles$s.placeholderText, styles$s.placeholderTextRight]),
5550
+ lines: 1,
5551
+ lineMargin: 1
5552
+ }));
5553
+ case 'label-left':
5554
+ return /*#__PURE__*/React.createElement("div", {
5555
+ className: classNames(['d-flex', 'flex-row', 'align-items-center'])
5556
+ }, /*#__PURE__*/React.createElement(PlaceholderText, {
5557
+ className: classNames([styles$s.placeholderText, styles$s.placeholderTextRight]),
5558
+ lines: 1,
5559
+ lineMargin: 1
5560
+ }), /*#__PURE__*/React.createElement(PlaceholderImage, {
5561
+ width: "0.625em",
5562
+ height: "1.25em"
5563
+ }));
5455
5564
  default:
5456
5565
  return /*#__PURE__*/React.createElement("div", null);
5457
5566
  }
5458
5567
  }, []);
5459
5568
  return /*#__PURE__*/React.createElement("div", {
5460
- className: classNames(['d-flex', _defineProperty({}, className, className !== null)])
5461
- }, /*#__PURE__*/React.createElement("div", {
5462
- className: classNames(['d-inline-flex', 'me-auto'])
5569
+ className: classNames(['d-flex', 'w-100', _defineProperty({}, className, className !== null)])
5463
5570
  }, /*#__PURE__*/React.createElement(Radios, {
5464
5571
  options: types.map(function (type) {
5465
5572
  return {
@@ -5473,7 +5580,7 @@ var ButtonLayout = function ButtonLayout(_ref) {
5473
5580
  activeClassName: styles$s.active,
5474
5581
  onChange: onButtonLayoutChange,
5475
5582
  uncheckable: true
5476
- })));
5583
+ }));
5477
5584
  };
5478
5585
  ButtonLayout.propTypes = propTypes$1a;
5479
5586
  ButtonLayout.defaultProps = defaultProps$1a;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/fields",
3
- "version": "0.3.814",
3
+ "version": "0.3.821",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -80,12 +80,12 @@
80
80
  "@fortawesome/free-solid-svg-icons": "^6.5.2",
81
81
  "@fortawesome/react-fontawesome": "^0.2.0",
82
82
  "@micromag/ckeditor": "^0.3.811",
83
- "@micromag/core": "^0.3.814",
84
- "@micromag/data": "^0.3.814",
85
- "@micromag/element-grid": "^0.3.814",
86
- "@micromag/element-keypad": "^0.3.814",
87
- "@micromag/element-map": "^0.3.814",
88
- "@micromag/media-gallery": "^0.3.814",
83
+ "@micromag/core": "^0.3.820",
84
+ "@micromag/data": "^0.3.820",
85
+ "@micromag/element-grid": "^0.3.820",
86
+ "@micromag/element-keypad": "^0.3.820",
87
+ "@micromag/element-map": "^0.3.820",
88
+ "@micromag/media-gallery": "^0.3.820",
89
89
  "@panneau/uppy": "^3.0.162",
90
90
  "classnames": "^2.2.6",
91
91
  "draft-js": "^0.11.7",
@@ -105,5 +105,5 @@
105
105
  "access": "public",
106
106
  "registry": "https://registry.npmjs.org/"
107
107
  },
108
- "gitHead": "96d19c8ede8dc2e8c051ba118975258e061a8da2"
108
+ "gitHead": "090299f5def48c4e11580b7ac83e36659d04153f"
109
109
  }