@micromag/screen-keypad 0.3.263 → 0.3.265

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/index.js +111 -76
  3. package/lib/index.js +108 -73
  4. package/package.json +16 -16
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-keypad-popupButton{display:inline-block;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-keypad-background,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-keypad-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-keypad-disabled.micromag-screen-keypad-container{overflow:hidden;pointer-events:none}.micromag-screen-keypad-hidden.micromag-screen-keypad-container{display:none;visibility:hidden}.micromag-screen-keypad-placeholder.micromag-screen-keypad-container .micromag-screen-keypad-content{position:relative;padding:6px}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-keypad-container{-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-container p{margin-top:inherit;margin-bottom:inherit;font-weight:inherit}.micromag-screen-keypad-container.micromag-screen-keypad-isPlaceholder .micromag-screen-keypad-layout{padding:10px}.micromag-screen-keypad-background{z-index:1}.micromag-screen-keypad-inner{position:relative;z-index:2;height:100%}.micromag-screen-keypad-layout{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;height:100%;text-align:center}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{width:100%;margin:10px auto}.micromag-screen-keypad-emptyTitle{height:100px}.micromag-screen-keypad-emptyText{height:50px}.micromag-screen-keypad-grid{width:100%}.micromag-screen-keypad-item{position:relative;height:100%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-item{height:0;padding-bottom:100%}.micromag-screen-keypad-placeholderItem{height:0;padding-bottom:60%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-placeholderItem{padding-bottom:100%}.micromag-screen-keypad-button{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;padding:0;overflow:hidden;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);font-weight:inherit}.micromag-screen-keypad-button:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-keypad-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{padding:2px;pointer-events:none}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty{cursor:default}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:hover,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-keypad-button .micromag-screen-keypad-buttonPlaceholder,.micromag-screen-keypad-button .micromag-screen-keypad-imagePlaceholder{width:100%;margin:0}.micromag-screen-keypad-buttonVisualPlaceholder{width:100%}.micromag-screen-keypad-thumbnail{max-height:50px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-keypad-buttonLabel{width:100%;padding:5px}.micromag-screen-keypad-empty{width:100%;margin-bottom:10px;padding:10px}.micromag-screen-keypad-emptyButtonVisual{margin-bottom:5px;padding:10px 5px}.micromag-screen-keypad-emptyButtonLabel{margin-bottom:5px;padding:2px 5px}.micromag-screen-keypad-popup{position:fixed;z-index:6;top:0;right:0;left:0;width:100%;height:100%;-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-popupBackdrop{z-index:2;pointer-events:none}.micromag-screen-keypad-popupButton{position:relative;z-index:3;width:100%;height:100%;padding:52px 15px 30px;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);text-align:left}.micromag-screen-keypad-popupButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupInner{overflow:hidden;background-color:#1c1c1c}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent p{margin-top:0;margin-bottom:0;font-weight:inherit}.micromag-screen-keypad-popupWrapper{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin-bottom:-.5em}.micromag-screen-keypad-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;margin-bottom:.5em}.micromag-screen-keypad-popupWrapper .micromag-screen-keypad-popupHeading{margin-bottom:.25em;font-weight:inherit}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupHeading{-webkit-order:1;-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-webkit-order:2;-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-webkit-order:3;-ms-flex-order:3;order:3}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupVisual{-webkit-order:1;-ms-flex-order:1;order:1}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupHeading{-webkit-order:2;-ms-flex-order:2;order:2}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupContent{-webkit-order:3;-ms-flex-order:3;order:3}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonLabel{-webkit-order:1;-ms-flex-order:1;order:1}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonVisual{-webkit-order:2;-ms-flex-order:2;order:2}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonLabel{display:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonVisual{width:100%!important;height:100%}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{width:100%!important;max-height:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual{z-index:1}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel{display:block;z-index:2;top:auto;bottom:0;height:auto;background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.75)));background-image:-o-linear-gradient(top,rgba(28,28,28,0),rgba(28,28,28,.75));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75))}
1
+ .micromag-screen-keypad-popupButton{display:inline-block;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-keypad-background,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-keypad-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-keypad-disabled.micromag-screen-keypad-container{overflow:hidden;pointer-events:none}.micromag-screen-keypad-hidden.micromag-screen-keypad-container{display:none;visibility:hidden}.micromag-screen-keypad-placeholder.micromag-screen-keypad-container .micromag-screen-keypad-content{position:relative;padding:6px}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-keypad-container{-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-container p{margin-top:inherit;margin-bottom:inherit;font-weight:inherit}.micromag-screen-keypad-container.micromag-screen-keypad-isPlaceholder .micromag-screen-keypad-layout{padding:10px}.micromag-screen-keypad-background{z-index:1}.micromag-screen-keypad-inner{position:relative;z-index:2;height:100%}.micromag-screen-keypad-layout{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;height:100%;text-align:center}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{width:100%;margin:10px auto}.micromag-screen-keypad-emptyTitle{height:100px}.micromag-screen-keypad-emptyText{height:50px}.micromag-screen-keypad-grid{width:100%}.micromag-screen-keypad-item{position:relative;height:100%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-item{height:0;padding-bottom:100%}.micromag-screen-keypad-placeholderItem{height:0;padding-bottom:60%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-placeholderItem{padding-bottom:100%}.micromag-screen-keypad-button{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;padding:0;overflow:hidden;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);font-weight:inherit}.micromag-screen-keypad-button:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-keypad-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{padding:2px;pointer-events:none}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty{cursor:default}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:hover,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isPopupEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-keypad-button .micromag-screen-keypad-buttonPlaceholder,.micromag-screen-keypad-button .micromag-screen-keypad-imagePlaceholder{width:100%;margin:0}.micromag-screen-keypad-buttonVisualPlaceholder{width:100%}.micromag-screen-keypad-thumbnail{max-height:50px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-keypad-buttonLabel{width:100%;padding:5px}.micromag-screen-keypad-empty{width:100%;margin-bottom:10px;padding:10px}.micromag-screen-keypad-emptyButtonVisual{margin-bottom:5px;padding:10px 5px}.micromag-screen-keypad-emptyButtonLabel{margin-bottom:5px;padding:2px 5px}.micromag-screen-keypad-popup{position:fixed;z-index:6;top:0;right:0;left:0;width:100%;height:100%;-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-popupBackdrop{z-index:2;pointer-events:none}.micromag-screen-keypad-popupButton{position:relative;z-index:3;width:100%;height:100%;padding:52px 15px 30px;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);text-align:left}.micromag-screen-keypad-popupButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupInner{overflow:hidden;background-color:#1c1c1c}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent p{margin-top:0;margin-bottom:0;font-weight:inherit}.micromag-screen-keypad-popupWrapper{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;margin-bottom:-.5em}.micromag-screen-keypad-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;margin-bottom:.5em}.micromag-screen-keypad-popupWrapper .micromag-screen-keypad-popupHeading{margin-bottom:.25em;font-weight:inherit}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupHeading{-webkit-order:1;-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-webkit-order:2;-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-webkit-order:3;-ms-flex-order:3;order:3}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupVisual{-webkit-order:1;-ms-flex-order:1;order:1}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupHeading{-webkit-order:2;-ms-flex-order:2;order:2}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupContent{-webkit-order:3;-ms-flex-order:3;order:3}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonLabel{-webkit-order:1;-ms-flex-order:1;order:1}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonVisual{-webkit-order:2;-ms-flex-order:2;order:2}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonLabel{display:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonVisual{width:100%!important;height:100%}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{width:100%!important;-o-object-fit:cover;object-fit:cover;max-height:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual{z-index:1}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel{display:block;z-index:2;top:auto;bottom:0;height:auto;background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.75)));background-image:-o-linear-gradient(top,rgba(28,28,28,0),rgba(28,28,28,.75));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75))}
package/es/index.js CHANGED
@@ -9,10 +9,10 @@ import PropTypes from 'prop-types';
9
9
  import React, { useMemo, useState, useCallback, useEffect } from 'react';
10
10
  import { PropTypes as PropTypes$1 } from '@micromag/core';
11
11
  import { PlaceholderImage, PlaceholderText, ScreenElement, PlaceholderButton } from '@micromag/core/components';
12
- import { usePlaybackContext, usePlaybackMediaRef, useScreenSize, useScreenRenderContext, useScreenState } from '@micromag/core/contexts';
12
+ import { usePlaybackContext, usePlaybackMediaRef, useScreenSize, useViewerContext, useScreenRenderContext, useScreenState } from '@micromag/core/contexts';
13
13
  import { useTrackScreenEvent, useDragProgress } from '@micromag/core/hooks';
14
- import { getStyleFromBox, getStyleFromText, getStyleFromColor } from '@micromag/core/utils';
15
- import Background from '@micromag/element-background';
14
+ import { getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
15
+ import Background, { Background as Background$1 } from '@micromag/element-background';
16
16
  import Button from '@micromag/element-button';
17
17
  import Container from '@micromag/element-container';
18
18
  import Heading from '@micromag/element-heading';
@@ -96,6 +96,7 @@ var propTypes = {
96
96
  boxStyle: PropTypes$1.boxStyle
97
97
  })),
98
98
  layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
99
+ spacing: PropTypes.number,
99
100
  keypadSettings: PropTypes.shape({
100
101
  layout: PropTypes.shape({
101
102
  columnAlign: PropTypes.oneOf(['left', 'right', 'middle']),
@@ -111,7 +112,8 @@ var propTypes = {
111
112
  }),
112
113
  popupStyles: PropTypes.shape({
113
114
  layout: PropTypes.oneOf(['content-top', 'content-split', 'content-bottom']),
114
- textStyle: PropTypes$1.textStyle,
115
+ headingTextStyle: PropTypes$1.textStyle,
116
+ contentTextStyle: PropTypes$1.textStyle,
115
117
  boxStyle: PropTypes$1.boxStyle
116
118
  }),
117
119
  background: PropTypes$1.backgroundElement,
@@ -122,6 +124,7 @@ var propTypes = {
122
124
  var defaultProps = {
123
125
  items: null,
124
126
  layout: null,
127
+ spacing: 20,
125
128
  keypadSettings: null,
126
129
  buttonStyles: null,
127
130
  popupStyles: null,
@@ -132,10 +135,11 @@ var defaultProps = {
132
135
  };
133
136
 
134
137
  var KeypadScreen = function KeypadScreen(_ref) {
135
- var _ref15;
138
+ var _ref16;
136
139
 
137
140
  var items = _ref.items,
138
141
  layout = _ref.layout,
142
+ spacing = _ref.spacing,
139
143
  keypadSettings = _ref.keypadSettings,
140
144
  buttonStyles = _ref.buttonStyles,
141
145
  popupStyles = _ref.popupStyles,
@@ -153,8 +157,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
153
157
  var _useScreenSize = useScreenSize(),
154
158
  width = _useScreenSize.width,
155
159
  height = _useScreenSize.height,
156
- resolution = _useScreenSize.resolution; // const { topHeight: viewerTopHeight, bottomHeight: viewerBottomHeight } = useViewerContext();
160
+ resolution = _useScreenSize.resolution;
157
161
 
162
+ var _useViewerContext = useViewerContext(),
163
+ viewerTopHeight = _useViewerContext.topHeight,
164
+ viewerBottomHeight = _useViewerContext.bottomHeight;
158
165
 
159
166
  var _useScreenRenderConte = useScreenRenderContext(),
160
167
  isView = _useScreenRenderConte.isView,
@@ -177,7 +184,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
177
184
  _ref3$columns = _ref3.columns,
178
185
  columns = _ref3$columns === void 0 ? null : _ref3$columns,
179
186
  _ref3$spacing = _ref3.spacing,
180
- spacing = _ref3$spacing === void 0 ? null : _ref3$spacing,
187
+ columnSpacing = _ref3$spacing === void 0 ? null : _ref3$spacing,
181
188
  _ref3$withSquareItems = _ref3.withSquareItems,
182
189
  withSquareItems = _ref3$withSquareItems === void 0 ? false : _ref3$withSquareItems;
183
190
 
@@ -194,8 +201,10 @@ var KeypadScreen = function KeypadScreen(_ref) {
194
201
  popupLayout = _ref5$layout === void 0 ? null : _ref5$layout,
195
202
  _ref5$backdrop = _ref5.backdrop,
196
203
  popupBackdrop = _ref5$backdrop === void 0 ? null : _ref5$backdrop,
197
- _ref5$textStyle = _ref5.textStyle,
198
- popupTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle,
204
+ _ref5$headingTextStyl = _ref5.headingTextStyle,
205
+ headingTextStyle = _ref5$headingTextStyl === void 0 ? null : _ref5$headingTextStyl,
206
+ _ref5$contentTextStyl = _ref5.contentTextStyle,
207
+ contentTextStyle = _ref5$contentTextStyl === void 0 ? null : _ref5$contentTextStyl,
199
208
  _ref5$boxStyle = _ref5.boxStyle,
200
209
  popupBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
201
210
 
@@ -223,11 +232,21 @@ var KeypadScreen = function KeypadScreen(_ref) {
223
232
 
224
233
  var _ref7 = popupHeading || {},
225
234
  _ref7$body = _ref7.body,
226
- popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body;
235
+ popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body,
236
+ _ref7$textStyle = _ref7.textStyle,
237
+ popupHeadingTextStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
227
238
 
228
239
  var _ref8 = popupContent || {},
229
240
  _ref8$body = _ref8.body,
230
- popupContentBody = _ref8$body === void 0 ? null : _ref8$body;
241
+ popupContentBody = _ref8$body === void 0 ? null : _ref8$body,
242
+ _ref8$textStyle = _ref8.textStyle,
243
+ popupContentTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
244
+
245
+ var _ref9 = popupBackdrop || {},
246
+ _ref9$color = _ref9.color,
247
+ backdropColor = _ref9$color === void 0 ? null : _ref9$color,
248
+ _ref9$image = _ref9.image,
249
+ backdropMedia = _ref9$image === void 0 ? null : _ref9$image;
231
250
 
232
251
  var onItemClick = useCallback(function (e, item) {
233
252
  e.stopPropagation();
@@ -239,12 +258,12 @@ var KeypadScreen = function KeypadScreen(_ref) {
239
258
  setShowPopup(0);
240
259
  trackScreenEvent('close_modal');
241
260
  }, [setShowPopup]);
242
- var computePopupProgress = useCallback(function (_ref9) {
243
- var dragActive = _ref9.active,
244
- _ref9$movement = _slicedToArray(_ref9.movement, 2),
245
- my = _ref9$movement[1],
246
- _ref9$velocity = _slicedToArray(_ref9.velocity, 2),
247
- vy = _ref9$velocity[1];
261
+ var computePopupProgress = useCallback(function (_ref10) {
262
+ var dragActive = _ref10.active,
263
+ _ref10$movement = _slicedToArray(_ref10.movement, 2),
264
+ my = _ref10$movement[1],
265
+ _ref10$velocity = _slicedToArray(_ref10.velocity, 2),
266
+ vy = _ref10$velocity[1];
248
267
 
249
268
  var damper = 0.5;
250
269
  var p = Math.max(0, my) / window.innerHeight;
@@ -278,37 +297,37 @@ var KeypadScreen = function KeypadScreen(_ref) {
278
297
 
279
298
  var gridItems = useMemo(function () {
280
299
  return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
281
- var _ref14;
282
-
283
- var _ref10 = item || {},
284
- _ref10$id = _ref10.id,
285
- id = _ref10$id === void 0 ? null : _ref10$id,
286
- _ref10$label = _ref10.label,
287
- label = _ref10$label === void 0 ? null : _ref10$label,
288
- _ref10$visual = _ref10.visual,
289
- visual = _ref10$visual === void 0 ? null : _ref10$visual,
290
- _ref10$textStyle = _ref10.textStyle,
291
- textStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle,
292
- _ref10$boxStyle = _ref10.boxStyle,
293
- boxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle,
294
- _ref10$heading = _ref10.heading,
295
- heading = _ref10$heading === void 0 ? null : _ref10$heading,
296
- _ref10$content = _ref10.content,
297
- content = _ref10$content === void 0 ? null : _ref10$content,
298
- _ref10$largeVisual = _ref10.largeVisual,
299
- popupLargeVisual = _ref10$largeVisual === void 0 ? null : _ref10$largeVisual;
300
-
301
- var _ref11 = visual || {},
302
- _ref11$url = _ref11.url,
303
- visualUrl = _ref11$url === void 0 ? null : _ref11$url;
304
-
305
- var _ref12 = heading || {},
306
- _ref12$body = _ref12.body,
307
- headingBody = _ref12$body === void 0 ? null : _ref12$body;
308
-
309
- var _ref13 = content || {},
300
+ var _ref15;
301
+
302
+ var _ref11 = item || {},
303
+ _ref11$id = _ref11.id,
304
+ id = _ref11$id === void 0 ? null : _ref11$id,
305
+ _ref11$label = _ref11.label,
306
+ label = _ref11$label === void 0 ? null : _ref11$label,
307
+ _ref11$visual = _ref11.visual,
308
+ visual = _ref11$visual === void 0 ? null : _ref11$visual,
309
+ _ref11$textStyle = _ref11.textStyle,
310
+ textStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle,
311
+ _ref11$boxStyle = _ref11.boxStyle,
312
+ boxStyle = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle,
313
+ _ref11$heading = _ref11.heading,
314
+ heading = _ref11$heading === void 0 ? null : _ref11$heading,
315
+ _ref11$content = _ref11.content,
316
+ content = _ref11$content === void 0 ? null : _ref11$content,
317
+ _ref11$largeVisual = _ref11.largeVisual,
318
+ popupLargeVisual = _ref11$largeVisual === void 0 ? null : _ref11$largeVisual;
319
+
320
+ var _ref12 = visual || {},
321
+ _ref12$url = _ref12.url,
322
+ visualUrl = _ref12$url === void 0 ? null : _ref12$url;
323
+
324
+ var _ref13 = heading || {},
310
325
  _ref13$body = _ref13.body,
311
- contentBody = _ref13$body === void 0 ? null : _ref13$body;
326
+ headingBody = _ref13$body === void 0 ? null : _ref13$body;
327
+
328
+ var _ref14 = content || {},
329
+ _ref14$body = _ref14.body,
330
+ contentBody = _ref14$body === void 0 ? null : _ref14$body;
312
331
 
313
332
  var key = label || visualUrl || id;
314
333
  var isEmpty = label === null && visual === null;
@@ -317,7 +336,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
317
336
  key: key,
318
337
  className: styles.item
319
338
  }, /*#__PURE__*/React.createElement(Button, {
320
- className: classNames([styles.button, (_ref14 = {}, _defineProperty(_ref14, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty(_ref14, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty(_ref14, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty(_ref14, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty(_ref14, styles.isEmpty, isEmpty), _defineProperty(_ref14, styles.isPopupEmpty, isPopupEmpty), _ref14)]),
339
+ className: classNames([styles.button, (_ref15 = {}, _defineProperty(_ref15, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty(_ref15, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty(_ref15, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty(_ref15, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty(_ref15, styles.isEmpty, isEmpty), _defineProperty(_ref15, styles.isPopupEmpty, isPopupEmpty), _ref15)]),
321
340
  style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromText(buttonTextStyle)), getStyleFromBox(boxStyle)), getStyleFromText(textStyle)),
322
341
  onClick: !isPopupEmpty ? function (e) {
323
342
  return onItemClick(e, item);
@@ -384,7 +403,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
384
403
  }
385
404
  }, [screenState, items]);
386
405
  return /*#__PURE__*/React.createElement("div", {
387
- className: classNames([styles.container, (_ref15 = {}, _defineProperty(_ref15, className, className !== null), _defineProperty(_ref15, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref15, styles.withSquareItems, withSquareItems), _ref15)]),
406
+ className: classNames([styles.container, (_ref16 = {}, _defineProperty(_ref16, className, className !== null), _defineProperty(_ref16, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref16, styles.withSquareItems, withSquareItems), _ref16)]),
388
407
  "data-screen-ready": true
389
408
  }, isEdit && screenState !== null ? /*#__PURE__*/React.createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
390
409
  background: background,
@@ -402,31 +421,34 @@ var KeypadScreen = function KeypadScreen(_ref) {
402
421
  className: styles.inner
403
422
  }, /*#__PURE__*/React.createElement(Layout, {
404
423
  className: styles.layout,
405
- verticalAlign: layout // style={
406
- // !isPlaceholder
407
- // ? {
408
- // padding: spacing,
409
- // paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
410
- // paddingBottom:
411
- // (current && !isPreview ? viewerBottomHeight : 0) + spacing,
412
- // }
413
- // : null
414
- // }
415
-
424
+ verticalAlign: layout,
425
+ style: !isPlaceholder ? {
426
+ padding: spacing,
427
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
428
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
429
+ } : null
416
430
  }, /*#__PURE__*/React.createElement(Keypad$1, {
417
431
  className: classNames([styles.grid, _defineProperty({}, styles.gridPlaceholder, isPlaceholder)]),
418
432
  align: columnAlign,
419
433
  columns: isPlaceholder ? 3 : columns,
420
- spacing: isPlaceholder ? 2 : spacing,
434
+ spacing: isPlaceholder ? 2 : columnSpacing,
421
435
  items: gridItems
422
436
  })), /*#__PURE__*/React.createElement(animated.div, {
423
437
  className: classNames([styles.popupBackdrop]),
424
- style: _objectSpread(_objectSpread({}, getStyleFromColor(popupBackdrop)), {}, {
438
+ style: {
425
439
  opacity: popupSpring.to(function (p) {
426
440
  return p;
427
441
  })
428
- })
429
- }), /*#__PURE__*/React.createElement(animated.div, Object.assign({
442
+ }
443
+ }, /*#__PURE__*/React.createElement(Background$1, {
444
+ width: width,
445
+ height: height,
446
+ resolution: resolution,
447
+ playing: backgroundPlaying,
448
+ media: backdropMedia,
449
+ color: backdropColor,
450
+ muted: true
451
+ })), /*#__PURE__*/React.createElement(animated.div, Object.assign({
430
452
  className: styles.popup,
431
453
  style: {
432
454
  transform: popupSpring.to(function (p) {
@@ -446,7 +468,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
446
468
  }
447
469
  }, /*#__PURE__*/React.createElement("div", {
448
470
  className: classNames([styles.popupInner, styles[popupLayoutClassName]]),
449
- style: _objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(placeholderPopupBoxStyles)), getStyleFromBox(popupBoxStyle)), getStyleFromText(popupTextStyle))
471
+ style: _objectSpread(_objectSpread({}, getStyleFromBox(placeholderPopupBoxStyles)), getStyleFromBox(popupBoxStyle))
450
472
  }, /*#__PURE__*/React.createElement("div", {
451
473
  className: styles.popupWrapper
452
474
  }, !isInteractivePreview || popupHeading !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
@@ -463,7 +485,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
463
485
  }, /*#__PURE__*/React.createElement(Heading, Object.assign({
464
486
  className: styles.popupHeading,
465
487
  body: "Lorem ipsum"
466
- }, popupHeading))) : null, !isInteractivePreview || popupContent !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
488
+ }, popupHeading, {
489
+ textStyle: _objectSpread(_objectSpread({}, headingTextStyle), popupHeadingTextStyle)
490
+ }))) : null, !isInteractivePreview || popupContent !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
467
491
  placeholder: "popupContent",
468
492
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
469
493
  id: "JRZoe6",
@@ -477,7 +501,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
477
501
  }, /*#__PURE__*/React.createElement(Text, Object.assign({
478
502
  className: styles.popupContent,
479
503
  body: "Lorem ipsum dolor sit amet consectetur adipiscing elit."
480
- }, popupContent))) : null, !isInteractivePreview || largeVisual !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
504
+ }, popupContent, {
505
+ textStyle: _objectSpread(_objectSpread({}, contentTextStyle), popupContentTextStyle)
506
+ }))) : null, !isInteractivePreview || largeVisual !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
481
507
  placeholder: "popupVisual",
482
508
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
483
509
  id: "z4Pr+g",
@@ -613,7 +639,6 @@ var definition = [{
613
639
  fields: [{
614
640
  name: 'layout',
615
641
  type: 'card-layout',
616
- // defaultValue: 'content-top',
617
642
  label: defineMessage({
618
643
  id: "OPxJx/",
619
644
  defaultMessage: [{
@@ -622,33 +647,43 @@ var definition = [{
622
647
  }]
623
648
  })
624
649
  }, {
625
- name: 'textStyle',
650
+ name: 'headingTextStyle',
651
+ type: 'text-style-form',
652
+ label: defineMessage({
653
+ id: "zrK6ak",
654
+ defaultMessage: [{
655
+ "type": 0,
656
+ "value": "Heading text style"
657
+ }]
658
+ })
659
+ }, {
660
+ name: 'contentTextStyle',
626
661
  type: 'text-style-form',
627
662
  label: defineMessage({
628
- id: "OEckOD",
663
+ id: "z9nSIG",
629
664
  defaultMessage: [{
630
665
  "type": 0,
631
- "value": "Text style"
666
+ "value": "Content text style"
632
667
  }]
633
668
  })
634
669
  }, {
635
670
  name: 'boxStyle',
636
671
  type: 'box-style-form',
637
672
  label: defineMessage({
638
- id: "heeSlL",
673
+ id: "p1pghO",
639
674
  defaultMessage: [{
640
675
  "type": 0,
641
- "value": "Frame and backgound styles"
676
+ "value": "Box style"
642
677
  }]
643
678
  })
644
679
  }, {
645
680
  name: 'backdrop',
646
- type: 'color',
681
+ type: 'background',
647
682
  label: defineMessage({
648
- id: "uv3PH4",
683
+ id: "cDj1mZ",
649
684
  defaultMessage: [{
650
685
  "type": 0,
651
- "value": "Backdrop color"
686
+ "value": "Background"
652
687
  }]
653
688
  })
654
689
  }]
package/lib/index.js CHANGED
@@ -119,6 +119,7 @@ var propTypes = {
119
119
  boxStyle: core.PropTypes.boxStyle
120
120
  })),
121
121
  layout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom']),
122
+ spacing: PropTypes__default["default"].number,
122
123
  keypadSettings: PropTypes__default["default"].shape({
123
124
  layout: PropTypes__default["default"].shape({
124
125
  columnAlign: PropTypes__default["default"].oneOf(['left', 'right', 'middle']),
@@ -134,7 +135,8 @@ var propTypes = {
134
135
  }),
135
136
  popupStyles: PropTypes__default["default"].shape({
136
137
  layout: PropTypes__default["default"].oneOf(['content-top', 'content-split', 'content-bottom']),
137
- textStyle: core.PropTypes.textStyle,
138
+ headingTextStyle: core.PropTypes.textStyle,
139
+ contentTextStyle: core.PropTypes.textStyle,
138
140
  boxStyle: core.PropTypes.boxStyle
139
141
  }),
140
142
  background: core.PropTypes.backgroundElement,
@@ -145,6 +147,7 @@ var propTypes = {
145
147
  var defaultProps = {
146
148
  items: null,
147
149
  layout: null,
150
+ spacing: 20,
148
151
  keypadSettings: null,
149
152
  buttonStyles: null,
150
153
  popupStyles: null,
@@ -155,10 +158,11 @@ var defaultProps = {
155
158
  };
156
159
 
157
160
  var KeypadScreen = function KeypadScreen(_ref) {
158
- var _ref15;
161
+ var _ref16;
159
162
 
160
163
  var items = _ref.items,
161
164
  layout = _ref.layout,
165
+ spacing = _ref.spacing,
162
166
  keypadSettings = _ref.keypadSettings,
163
167
  buttonStyles = _ref.buttonStyles,
164
168
  popupStyles = _ref.popupStyles,
@@ -176,8 +180,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
176
180
  var _useScreenSize = contexts.useScreenSize(),
177
181
  width = _useScreenSize.width,
178
182
  height = _useScreenSize.height,
179
- resolution = _useScreenSize.resolution; // const { topHeight: viewerTopHeight, bottomHeight: viewerBottomHeight } = useViewerContext();
183
+ resolution = _useScreenSize.resolution;
180
184
 
185
+ var _useViewerContext = contexts.useViewerContext(),
186
+ viewerTopHeight = _useViewerContext.topHeight,
187
+ viewerBottomHeight = _useViewerContext.bottomHeight;
181
188
 
182
189
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
183
190
  isView = _useScreenRenderConte.isView,
@@ -200,7 +207,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
200
207
  _ref3$columns = _ref3.columns,
201
208
  columns = _ref3$columns === void 0 ? null : _ref3$columns,
202
209
  _ref3$spacing = _ref3.spacing,
203
- spacing = _ref3$spacing === void 0 ? null : _ref3$spacing,
210
+ columnSpacing = _ref3$spacing === void 0 ? null : _ref3$spacing,
204
211
  _ref3$withSquareItems = _ref3.withSquareItems,
205
212
  withSquareItems = _ref3$withSquareItems === void 0 ? false : _ref3$withSquareItems;
206
213
 
@@ -217,8 +224,10 @@ var KeypadScreen = function KeypadScreen(_ref) {
217
224
  popupLayout = _ref5$layout === void 0 ? null : _ref5$layout,
218
225
  _ref5$backdrop = _ref5.backdrop,
219
226
  popupBackdrop = _ref5$backdrop === void 0 ? null : _ref5$backdrop,
220
- _ref5$textStyle = _ref5.textStyle,
221
- popupTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle,
227
+ _ref5$headingTextStyl = _ref5.headingTextStyle,
228
+ headingTextStyle = _ref5$headingTextStyl === void 0 ? null : _ref5$headingTextStyl,
229
+ _ref5$contentTextStyl = _ref5.contentTextStyle,
230
+ contentTextStyle = _ref5$contentTextStyl === void 0 ? null : _ref5$contentTextStyl,
222
231
  _ref5$boxStyle = _ref5.boxStyle,
223
232
  popupBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
224
233
 
@@ -246,11 +255,21 @@ var KeypadScreen = function KeypadScreen(_ref) {
246
255
 
247
256
  var _ref7 = popupHeading || {},
248
257
  _ref7$body = _ref7.body,
249
- popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body;
258
+ popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body,
259
+ _ref7$textStyle = _ref7.textStyle,
260
+ popupHeadingTextStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
250
261
 
251
262
  var _ref8 = popupContent || {},
252
263
  _ref8$body = _ref8.body,
253
- popupContentBody = _ref8$body === void 0 ? null : _ref8$body;
264
+ popupContentBody = _ref8$body === void 0 ? null : _ref8$body,
265
+ _ref8$textStyle = _ref8.textStyle,
266
+ popupContentTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
267
+
268
+ var _ref9 = popupBackdrop || {},
269
+ _ref9$color = _ref9.color,
270
+ backdropColor = _ref9$color === void 0 ? null : _ref9$color,
271
+ _ref9$image = _ref9.image,
272
+ backdropMedia = _ref9$image === void 0 ? null : _ref9$image;
254
273
 
255
274
  var onItemClick = React.useCallback(function (e, item) {
256
275
  e.stopPropagation();
@@ -262,12 +281,12 @@ var KeypadScreen = function KeypadScreen(_ref) {
262
281
  setShowPopup(0);
263
282
  trackScreenEvent('close_modal');
264
283
  }, [setShowPopup]);
265
- var computePopupProgress = React.useCallback(function (_ref9) {
266
- var dragActive = _ref9.active,
267
- _ref9$movement = _slicedToArray__default["default"](_ref9.movement, 2),
268
- my = _ref9$movement[1],
269
- _ref9$velocity = _slicedToArray__default["default"](_ref9.velocity, 2),
270
- vy = _ref9$velocity[1];
284
+ var computePopupProgress = React.useCallback(function (_ref10) {
285
+ var dragActive = _ref10.active,
286
+ _ref10$movement = _slicedToArray__default["default"](_ref10.movement, 2),
287
+ my = _ref10$movement[1],
288
+ _ref10$velocity = _slicedToArray__default["default"](_ref10.velocity, 2),
289
+ vy = _ref10$velocity[1];
271
290
 
272
291
  var damper = 0.5;
273
292
  var p = Math.max(0, my) / window.innerHeight;
@@ -301,37 +320,37 @@ var KeypadScreen = function KeypadScreen(_ref) {
301
320
 
302
321
  var gridItems = React.useMemo(function () {
303
322
  return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
304
- var _ref14;
305
-
306
- var _ref10 = item || {},
307
- _ref10$id = _ref10.id,
308
- id = _ref10$id === void 0 ? null : _ref10$id,
309
- _ref10$label = _ref10.label,
310
- label = _ref10$label === void 0 ? null : _ref10$label,
311
- _ref10$visual = _ref10.visual,
312
- visual = _ref10$visual === void 0 ? null : _ref10$visual,
313
- _ref10$textStyle = _ref10.textStyle,
314
- textStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle,
315
- _ref10$boxStyle = _ref10.boxStyle,
316
- boxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle,
317
- _ref10$heading = _ref10.heading,
318
- heading = _ref10$heading === void 0 ? null : _ref10$heading,
319
- _ref10$content = _ref10.content,
320
- content = _ref10$content === void 0 ? null : _ref10$content,
321
- _ref10$largeVisual = _ref10.largeVisual,
322
- popupLargeVisual = _ref10$largeVisual === void 0 ? null : _ref10$largeVisual;
323
-
324
- var _ref11 = visual || {},
325
- _ref11$url = _ref11.url,
326
- visualUrl = _ref11$url === void 0 ? null : _ref11$url;
327
-
328
- var _ref12 = heading || {},
329
- _ref12$body = _ref12.body,
330
- headingBody = _ref12$body === void 0 ? null : _ref12$body;
331
-
332
- var _ref13 = content || {},
323
+ var _ref15;
324
+
325
+ var _ref11 = item || {},
326
+ _ref11$id = _ref11.id,
327
+ id = _ref11$id === void 0 ? null : _ref11$id,
328
+ _ref11$label = _ref11.label,
329
+ label = _ref11$label === void 0 ? null : _ref11$label,
330
+ _ref11$visual = _ref11.visual,
331
+ visual = _ref11$visual === void 0 ? null : _ref11$visual,
332
+ _ref11$textStyle = _ref11.textStyle,
333
+ textStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle,
334
+ _ref11$boxStyle = _ref11.boxStyle,
335
+ boxStyle = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle,
336
+ _ref11$heading = _ref11.heading,
337
+ heading = _ref11$heading === void 0 ? null : _ref11$heading,
338
+ _ref11$content = _ref11.content,
339
+ content = _ref11$content === void 0 ? null : _ref11$content,
340
+ _ref11$largeVisual = _ref11.largeVisual,
341
+ popupLargeVisual = _ref11$largeVisual === void 0 ? null : _ref11$largeVisual;
342
+
343
+ var _ref12 = visual || {},
344
+ _ref12$url = _ref12.url,
345
+ visualUrl = _ref12$url === void 0 ? null : _ref12$url;
346
+
347
+ var _ref13 = heading || {},
333
348
  _ref13$body = _ref13.body,
334
- contentBody = _ref13$body === void 0 ? null : _ref13$body;
349
+ headingBody = _ref13$body === void 0 ? null : _ref13$body;
350
+
351
+ var _ref14 = content || {},
352
+ _ref14$body = _ref14.body,
353
+ contentBody = _ref14$body === void 0 ? null : _ref14$body;
335
354
 
336
355
  var key = label || visualUrl || id;
337
356
  var isEmpty = label === null && visual === null;
@@ -340,7 +359,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
340
359
  key: key,
341
360
  className: styles.item
342
361
  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
343
- className: classNames__default["default"]([styles.button, (_ref14 = {}, _defineProperty__default["default"](_ref14, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty__default["default"](_ref14, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty__default["default"](_ref14, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty__default["default"](_ref14, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty__default["default"](_ref14, styles.isEmpty, isEmpty), _defineProperty__default["default"](_ref14, styles.isPopupEmpty, isPopupEmpty), _ref14)]),
362
+ className: classNames__default["default"]([styles.button, (_ref15 = {}, _defineProperty__default["default"](_ref15, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty__default["default"](_ref15, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty__default["default"](_ref15, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty__default["default"](_ref15, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty__default["default"](_ref15, styles.isEmpty, isEmpty), _defineProperty__default["default"](_ref15, styles.isPopupEmpty, isPopupEmpty), _ref15)]),
344
363
  style: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(buttonBoxStyle)), utils.getStyleFromText(buttonTextStyle)), utils.getStyleFromBox(boxStyle)), utils.getStyleFromText(textStyle)),
345
364
  onClick: !isPopupEmpty ? function (e) {
346
365
  return onItemClick(e, item);
@@ -407,7 +426,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
407
426
  }
408
427
  }, [screenState, items]);
409
428
  return /*#__PURE__*/React__default["default"].createElement("div", {
410
- className: classNames__default["default"]([styles.container, (_ref15 = {}, _defineProperty__default["default"](_ref15, className, className !== null), _defineProperty__default["default"](_ref15, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref15, styles.withSquareItems, withSquareItems), _ref15)]),
429
+ className: classNames__default["default"]([styles.container, (_ref16 = {}, _defineProperty__default["default"](_ref16, className, className !== null), _defineProperty__default["default"](_ref16, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref16, styles.withSquareItems, withSquareItems), _ref16)]),
411
430
  "data-screen-ready": true
412
431
  }, isEdit && screenState !== null ? /*#__PURE__*/React__default["default"].createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
413
432
  background: background,
@@ -425,31 +444,34 @@ var KeypadScreen = function KeypadScreen(_ref) {
425
444
  className: styles.inner
426
445
  }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
427
446
  className: styles.layout,
428
- verticalAlign: layout // style={
429
- // !isPlaceholder
430
- // ? {
431
- // padding: spacing,
432
- // paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
433
- // paddingBottom:
434
- // (current && !isPreview ? viewerBottomHeight : 0) + spacing,
435
- // }
436
- // : null
437
- // }
438
-
447
+ verticalAlign: layout,
448
+ style: !isPlaceholder ? {
449
+ padding: spacing,
450
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
451
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
452
+ } : null
439
453
  }, /*#__PURE__*/React__default["default"].createElement(Keypad__default["default"], {
440
454
  className: classNames__default["default"]([styles.grid, _defineProperty__default["default"]({}, styles.gridPlaceholder, isPlaceholder)]),
441
455
  align: columnAlign,
442
456
  columns: isPlaceholder ? 3 : columns,
443
- spacing: isPlaceholder ? 2 : spacing,
457
+ spacing: isPlaceholder ? 2 : columnSpacing,
444
458
  items: gridItems
445
459
  })), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
446
460
  className: classNames__default["default"]([styles.popupBackdrop]),
447
- style: _objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromColor(popupBackdrop)), {}, {
461
+ style: {
448
462
  opacity: popupSpring.to(function (p) {
449
463
  return p;
450
464
  })
451
- })
452
- }), /*#__PURE__*/React__default["default"].createElement(web.animated.div, Object.assign({
465
+ }
466
+ }, /*#__PURE__*/React__default["default"].createElement(Background.Background, {
467
+ width: width,
468
+ height: height,
469
+ resolution: resolution,
470
+ playing: backgroundPlaying,
471
+ media: backdropMedia,
472
+ color: backdropColor,
473
+ muted: true
474
+ })), /*#__PURE__*/React__default["default"].createElement(web.animated.div, Object.assign({
453
475
  className: styles.popup,
454
476
  style: {
455
477
  transform: popupSpring.to(function (p) {
@@ -469,7 +491,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
469
491
  }
470
492
  }, /*#__PURE__*/React__default["default"].createElement("div", {
471
493
  className: classNames__default["default"]([styles.popupInner, styles[popupLayoutClassName]]),
472
- style: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(placeholderPopupBoxStyles)), utils.getStyleFromBox(popupBoxStyle)), utils.getStyleFromText(popupTextStyle))
494
+ style: _objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(placeholderPopupBoxStyles)), utils.getStyleFromBox(popupBoxStyle))
473
495
  }, /*#__PURE__*/React__default["default"].createElement("div", {
474
496
  className: styles.popupWrapper
475
497
  }, !isInteractivePreview || popupHeading !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -486,7 +508,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
486
508
  }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
487
509
  className: styles.popupHeading,
488
510
  body: "Lorem ipsum"
489
- }, popupHeading))) : null, !isInteractivePreview || popupContent !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
511
+ }, popupHeading, {
512
+ textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, headingTextStyle), popupHeadingTextStyle)
513
+ }))) : null, !isInteractivePreview || popupContent !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
490
514
  placeholder: "popupContent",
491
515
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
492
516
  id: "JRZoe6",
@@ -500,7 +524,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
500
524
  }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
501
525
  className: styles.popupContent,
502
526
  body: "Lorem ipsum dolor sit amet consectetur adipiscing elit."
503
- }, popupContent))) : null, !isInteractivePreview || largeVisual !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
527
+ }, popupContent, {
528
+ textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, contentTextStyle), popupContentTextStyle)
529
+ }))) : null, !isInteractivePreview || largeVisual !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
504
530
  placeholder: "popupVisual",
505
531
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
506
532
  id: "z4Pr+g",
@@ -636,7 +662,6 @@ var definition = [{
636
662
  fields: [{
637
663
  name: 'layout',
638
664
  type: 'card-layout',
639
- // defaultValue: 'content-top',
640
665
  label: reactIntl.defineMessage({
641
666
  id: "OPxJx/",
642
667
  defaultMessage: [{
@@ -645,33 +670,43 @@ var definition = [{
645
670
  }]
646
671
  })
647
672
  }, {
648
- name: 'textStyle',
673
+ name: 'headingTextStyle',
674
+ type: 'text-style-form',
675
+ label: reactIntl.defineMessage({
676
+ id: "zrK6ak",
677
+ defaultMessage: [{
678
+ "type": 0,
679
+ "value": "Heading text style"
680
+ }]
681
+ })
682
+ }, {
683
+ name: 'contentTextStyle',
649
684
  type: 'text-style-form',
650
685
  label: reactIntl.defineMessage({
651
- id: "OEckOD",
686
+ id: "z9nSIG",
652
687
  defaultMessage: [{
653
688
  "type": 0,
654
- "value": "Text style"
689
+ "value": "Content text style"
655
690
  }]
656
691
  })
657
692
  }, {
658
693
  name: 'boxStyle',
659
694
  type: 'box-style-form',
660
695
  label: reactIntl.defineMessage({
661
- id: "heeSlL",
696
+ id: "p1pghO",
662
697
  defaultMessage: [{
663
698
  "type": 0,
664
- "value": "Frame and backgound styles"
699
+ "value": "Box style"
665
700
  }]
666
701
  })
667
702
  }, {
668
703
  name: 'backdrop',
669
- type: 'color',
704
+ type: 'background',
670
705
  label: reactIntl.defineMessage({
671
- id: "uv3PH4",
706
+ id: "cDj1mZ",
672
707
  defaultMessage: [{
673
708
  "type": 0,
674
- "value": "Backdrop color"
709
+ "value": "Background"
675
710
  }]
676
711
  })
677
712
  }]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-keypad",
3
- "version": "0.3.263",
3
+ "version": "0.3.265",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -54,20 +54,20 @@
54
54
  },
55
55
  "dependencies": {
56
56
  "@babel/runtime": "^7.13.10",
57
- "@micromag/core": "^0.3.263",
58
- "@micromag/element-background": "^0.3.263",
59
- "@micromag/element-button": "^0.3.263",
60
- "@micromag/element-call-to-action": "^0.3.263",
61
- "@micromag/element-container": "^0.3.263",
62
- "@micromag/element-grid": "^0.3.263",
63
- "@micromag/element-heading": "^0.3.263",
64
- "@micromag/element-keypad": "^0.3.263",
65
- "@micromag/element-layout": "^0.3.263",
66
- "@micromag/element-scroll": "^0.3.263",
67
- "@micromag/element-text": "^0.3.263",
68
- "@micromag/element-urbania-author": "^0.3.263",
69
- "@micromag/element-visual": "^0.3.263",
70
- "@micromag/transforms": "^0.3.263",
57
+ "@micromag/core": "^0.3.265",
58
+ "@micromag/element-background": "^0.3.265",
59
+ "@micromag/element-button": "^0.3.265",
60
+ "@micromag/element-call-to-action": "^0.3.265",
61
+ "@micromag/element-container": "^0.3.265",
62
+ "@micromag/element-grid": "^0.3.265",
63
+ "@micromag/element-heading": "^0.3.265",
64
+ "@micromag/element-keypad": "^0.3.265",
65
+ "@micromag/element-layout": "^0.3.265",
66
+ "@micromag/element-scroll": "^0.3.265",
67
+ "@micromag/element-text": "^0.3.265",
68
+ "@micromag/element-urbania-author": "^0.3.265",
69
+ "@micromag/element-visual": "^0.3.265",
70
+ "@micromag/transforms": "^0.3.265",
71
71
  "@react-spring/core": "^9.1.1",
72
72
  "@react-spring/web": "^9.1.1",
73
73
  "@use-gesture/react": "^10.2.4",
@@ -82,5 +82,5 @@
82
82
  "publishConfig": {
83
83
  "access": "public"
84
84
  },
85
- "gitHead": "711b660a3fa66a6490bdb75148e340aec0064f45"
85
+ "gitHead": "999f79fd897211bfb7edd79560295efeabf55dba"
86
86
  }