@micromag/screen-keypad 0.3.348 → 0.3.349

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 +190 -111
  3. package/lib/index.js +189 -109
  4. package/package.json +3 -3
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-keypad-popupButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0}.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{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-container{height:100%;overflow:hidden;position:relative;width:100%}.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{padding:6px;position:relative}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-keypad-container{-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-container p{font-weight:inherit;margin-bottom:inherit;margin-top: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{height:100%;position:relative;z-index:2}.micromag-screen-keypad-layout{-ms-flex-align:center;-ms-flex-pack:start;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:flex-start;text-align:center}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{margin:10px auto;width:100%}.micromag-screen-keypad-emptyTitle{height:100px}.micromag-screen-keypad-emptyText{height:50px}.micromag-screen-keypad-grid{width:100%}.micromag-screen-keypad-item{height:100%;position:relative}.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{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-weight:inherit;height:100%;justify-content:center;overflow:hidden;padding:0;position:relative;-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);width:100%}.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{margin:0;width:100%}.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{padding:5px;width:100%}.micromag-screen-keypad-empty{margin-bottom:10px;padding:10px;width:100%}.micromag-screen-keypad-emptyButtonVisual{margin-bottom:5px;padding:10px 5px}.micromag-screen-keypad-emptyButtonLabel{margin-bottom:5px;padding:2px 5px}.micromag-screen-keypad-popup{height:100%;left:0;position:fixed;right:0;top:0;-ms-touch-action:none;touch-action:none;width:100%;z-index:6}.micromag-screen-keypad-popupBackdrop{pointer-events:none;z-index:2}.micromag-screen-keypad-popupButton{height:100%;padding:52px 15px 30px;position:relative;text-align:left;-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);width:100%;z-index:3}.micromag-screen-keypad-popupButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupInner{background-color:#1c1c1c;overflow:hidden}.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{font-weight:inherit;margin-bottom:0;margin-top:0}.micromag-screen-keypad-popupWrapper{-ms-flex-align:start;-ms-flex-pack:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;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{-ms-flex-positive:1;-ms-flex-negative:0;flex-grow:1;flex-shrink:0;margin-bottom:.5em;width:100%}.micromag-screen-keypad-popupWrapper .micromag-screen-keypad-popupHeading{font-weight:inherit;margin-bottom:.25em}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupHeading{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupVisual{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupHeading{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonLabel{-ms-flex-order:1;order:1}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonVisual{-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{height:100%;width:100%!important}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{max-height:none;-o-object-fit:cover;object-fit:cover;width:100%!important}.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{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));bottom:0;display:block;height:auto;top:auto;z-index:2}
1
+ .micromag-screen-keypad-popupButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0}.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{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-container{height:100%;overflow:hidden;position:relative;width:100%}.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{padding:6px;position:relative}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-keypad-container{-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-container p{font-weight:inherit;margin-bottom:inherit;margin-top: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{height:100%;position:relative;z-index:2}.micromag-screen-keypad-layout{-ms-flex-align:center;-ms-flex-pack:start;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:flex-start;text-align:center}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{margin:10px auto;width:100%}.micromag-screen-keypad-emptyTitle{height:100px}.micromag-screen-keypad-emptyText{height:50px}.micromag-screen-keypad-grid{width:100%}.micromag-screen-keypad-item{height:100%;position:relative}.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{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-weight:inherit;height:100%;justify-content:center;overflow:hidden;padding:0;position:relative;-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);width:100%}.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-disableHover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{cursor:default}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:active,.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:hover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink{text-decoration:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink:hover{color:inherit}.micromag-screen-keypad-button .micromag-screen-keypad-buttonPlaceholder,.micromag-screen-keypad-button .micromag-screen-keypad-imagePlaceholder{margin:0;width:100%}.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{padding:5px;width:100%}.micromag-screen-keypad-empty{margin-bottom:10px;padding:10px;width:100%}.micromag-screen-keypad-emptyButtonVisual{margin-bottom:5px;padding:10px 5px}.micromag-screen-keypad-emptyButtonLabel{margin-bottom:5px;padding:2px 5px}.micromag-screen-keypad-popup{height:100%;left:0;position:fixed;right:0;top:0;-ms-touch-action:none;touch-action:none;width:100%;z-index:6}.micromag-screen-keypad-popupBackdrop{pointer-events:none;z-index:2}.micromag-screen-keypad-popupButton{height:100%;padding:52px 15px 30px;position:relative;text-align:left;-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);width:100%;z-index:3}.micromag-screen-keypad-popupButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupInner{background-color:#1c1c1c;overflow:hidden}.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{font-weight:inherit;margin-bottom:0;margin-top:0}.micromag-screen-keypad-popupWrapper{-ms-flex-align:start;-ms-flex-pack:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;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{-ms-flex-positive:1;-ms-flex-negative:0;flex-grow:1;flex-shrink:0;margin-bottom:.5em;width:100%}.micromag-screen-keypad-popupWrapper .micromag-screen-keypad-popupHeading{font-weight:inherit;margin-bottom:.25em}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupHeading{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupVisual{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupHeading{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-popupCTA{margin:0 auto}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonLabel{-ms-flex-order:1;order:1}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonVisual{-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{height:100%;width:100%!important}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{max-height:none;-o-object-fit:cover;object-fit:cover;width:100%!important}.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{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));bottom:0;display:block;height:auto;top:auto;z-index:2}
package/es/index.js CHANGED
@@ -9,11 +9,12 @@ 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, useViewerContext, useScreenRenderContext, useScreenState } from '@micromag/core/contexts';
12
+ import { usePlaybackContext, usePlaybackMediaRef, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext } from '@micromag/core/contexts';
13
13
  import { useTrackScreenEvent, useDragProgress } from '@micromag/core/hooks';
14
- import { getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
14
+ import { isTextFilled, getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
15
15
  import Background, { Background as Background$1 } from '@micromag/element-background';
16
16
  import Button from '@micromag/element-button';
17
+ import CallToAction from '@micromag/element-call-to-action';
17
18
  import Container from '@micromag/element-container';
18
19
  import Heading from '@micromag/element-heading';
19
20
  import Keypad$1 from '@micromag/element-keypad';
@@ -22,7 +23,7 @@ import Scroll from '@micromag/element-scroll';
22
23
  import Text from '@micromag/element-text';
23
24
  import Visual from '@micromag/element-visual';
24
25
 
25
- var styles = {"popupButton":"micromag-screen-keypad-popupButton","layoutLabelOver":"micromag-screen-keypad-layoutLabelOver","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","buttonLabel":"micromag-screen-keypad-buttonLabel","withSquareItems":"micromag-screen-keypad-withSquareItems","layoutNoLabel":"micromag-screen-keypad-layoutNoLabel","thumbnail":"micromag-screen-keypad-thumbnail","popupBackdrop":"micromag-screen-keypad-popupBackdrop","button":"micromag-screen-keypad-button","background":"micromag-screen-keypad-background","container":"micromag-screen-keypad-container","disabled":"micromag-screen-keypad-disabled","hidden":"micromag-screen-keypad-hidden","placeholder":"micromag-screen-keypad-placeholder","content":"micromag-screen-keypad-content","emptyTitle":"micromag-screen-keypad-emptyTitle","emptyText":"micromag-screen-keypad-emptyText","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","inner":"micromag-screen-keypad-inner","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","placeholderItem":"micromag-screen-keypad-placeholderItem","isEmpty":"micromag-screen-keypad-isEmpty","isPopupEmpty":"micromag-screen-keypad-isPopupEmpty","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","buttonVisualPlaceholder":"micromag-screen-keypad-buttonVisualPlaceholder","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popup":"micromag-screen-keypad-popup","popupInner":"micromag-screen-keypad-popupInner","popupContent":"micromag-screen-keypad-popupContent","popupWrapper":"micromag-screen-keypad-popupWrapper","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","contentBottom":"micromag-screen-keypad-contentBottom","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual"};
26
+ var styles = {"popupButton":"micromag-screen-keypad-popupButton","layoutLabelOver":"micromag-screen-keypad-layoutLabelOver","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","buttonLabel":"micromag-screen-keypad-buttonLabel","withSquareItems":"micromag-screen-keypad-withSquareItems","layoutNoLabel":"micromag-screen-keypad-layoutNoLabel","thumbnail":"micromag-screen-keypad-thumbnail","popupBackdrop":"micromag-screen-keypad-popupBackdrop","button":"micromag-screen-keypad-button","background":"micromag-screen-keypad-background","container":"micromag-screen-keypad-container","disabled":"micromag-screen-keypad-disabled","hidden":"micromag-screen-keypad-hidden","placeholder":"micromag-screen-keypad-placeholder","content":"micromag-screen-keypad-content","emptyTitle":"micromag-screen-keypad-emptyTitle","emptyText":"micromag-screen-keypad-emptyText","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","inner":"micromag-screen-keypad-inner","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","placeholderItem":"micromag-screen-keypad-placeholderItem","isEmpty":"micromag-screen-keypad-isEmpty","disableHover":"micromag-screen-keypad-disableHover","isLink":"micromag-screen-keypad-isLink","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","buttonVisualPlaceholder":"micromag-screen-keypad-buttonVisualPlaceholder","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popup":"micromag-screen-keypad-popup","popupInner":"micromag-screen-keypad-popupInner","popupContent":"micromag-screen-keypad-popupContent","popupWrapper":"micromag-screen-keypad-popupWrapper","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","contentBottom":"micromag-screen-keypad-contentBottom","popupCTA":"micromag-screen-keypad-popupCTA","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual"};
26
27
 
27
28
  var placeholders = [{
28
29
  id: '1'
@@ -132,7 +133,7 @@ var defaultProps = {
132
133
  className: null
133
134
  };
134
135
  var KeypadScreen = function KeypadScreen(_ref) {
135
- var _ref16;
136
+ var _ref18;
136
137
  var items = _ref.items,
137
138
  layout = _ref.layout,
138
139
  spacing = _ref.spacing,
@@ -147,6 +148,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
147
148
  var _usePlaybackContext = usePlaybackContext(),
148
149
  muted = _usePlaybackContext.muted;
149
150
  var mediaRef = usePlaybackMediaRef(current);
151
+ var screenState = useScreenState();
150
152
  var _useScreenSize = useScreenSize(),
151
153
  width = _useScreenSize.width,
152
154
  height = _useScreenSize.height,
@@ -154,12 +156,13 @@ var KeypadScreen = function KeypadScreen(_ref) {
154
156
  var _useViewerContext = useViewerContext(),
155
157
  viewerTopHeight = _useViewerContext.topHeight,
156
158
  viewerBottomHeight = _useViewerContext.bottomHeight;
159
+ var _useViewerWebView = useViewerWebView(),
160
+ openWebView = _useViewerWebView.open;
157
161
  var _useScreenRenderConte = useScreenRenderContext(),
158
162
  isView = _useScreenRenderConte.isView,
159
163
  isPreview = _useScreenRenderConte.isPreview,
160
164
  isPlaceholder = _useScreenRenderConte.isPlaceholder,
161
165
  isEdit = _useScreenRenderConte.isEdit;
162
- var screenState = useScreenState();
163
166
  var backgroundPlaying = current && (isView || isEdit);
164
167
  var mediaShouldLoad = !isPlaceholder && (current || active);
165
168
  var isInteractivePreview = isEdit && screenState === null;
@@ -210,15 +213,15 @@ var KeypadScreen = function KeypadScreen(_ref) {
210
213
  _ref6$content = _ref6.content,
211
214
  popupContent = _ref6$content === void 0 ? null : _ref6$content,
212
215
  _ref6$largeVisual = _ref6.largeVisual,
213
- largeVisual = _ref6$largeVisual === void 0 ? null : _ref6$largeVisual;
216
+ largeVisual = _ref6$largeVisual === void 0 ? null : _ref6$largeVisual,
217
+ _ref6$button = _ref6.button,
218
+ popupButton = _ref6$button === void 0 ? null : _ref6$button;
219
+ var hasPopupHeading = isTextFilled(popupHeading);
214
220
  var _ref7 = popupHeading || {},
215
- _ref7$body = _ref7.body,
216
- popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body,
217
221
  _ref7$textStyle = _ref7.textStyle,
218
222
  popupHeadingTextStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
223
+ var hasPopupContent = isTextFilled(popupContent);
219
224
  var _ref8 = popupContent || {},
220
- _ref8$body = _ref8.body,
221
- popupContentBody = _ref8$body === void 0 ? null : _ref8$body,
222
225
  _ref8$textStyle = _ref8.textStyle,
223
226
  popupContentTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
224
227
  var _ref9 = popupBackdrop || {},
@@ -226,22 +229,42 @@ var KeypadScreen = function KeypadScreen(_ref) {
226
229
  backdropColor = _ref9$color === void 0 ? null : _ref9$color,
227
230
  _ref9$image = _ref9.image,
228
231
  backdropMedia = _ref9$image === void 0 ? null : _ref9$image;
232
+ var _ref10 = popupButton || {},
233
+ _ref10$label = _ref10.label,
234
+ buttonLabel = _ref10$label === void 0 ? null : _ref10$label,
235
+ _ref10$url = _ref10.url,
236
+ buttonUrl = _ref10$url === void 0 ? null : _ref10$url,
237
+ _ref10$inWebView = _ref10.inWebView,
238
+ popupInWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
239
+ _ref10$boxStyle = _ref10.boxStyle,
240
+ popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
229
241
  var onItemClick = useCallback(function (e, item) {
242
+ var _ref11 = item || {},
243
+ _ref11$inWebView = _ref11.inWebView,
244
+ inWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
245
+ _ref11$url = _ref11.url,
246
+ url = _ref11$url === void 0 ? null : _ref11$url;
230
247
  e.stopPropagation();
248
+ trackScreenEvent('click_item', item);
249
+ if (inWebView && url !== null) {
250
+ openWebView({
251
+ url: url
252
+ });
253
+ return;
254
+ }
231
255
  setPopup(item);
232
256
  setShowPopup(1);
233
- trackScreenEvent('click_item', item);
234
257
  }, [setPopup, trackScreenEvent]);
235
258
  var onCloseModal = useCallback(function () {
236
259
  setShowPopup(0);
237
260
  trackScreenEvent('close_modal');
238
261
  }, [setShowPopup]);
239
- var computePopupProgress = useCallback(function (_ref10) {
240
- var dragActive = _ref10.active,
241
- _ref10$movement = _slicedToArray(_ref10.movement, 2),
242
- my = _ref10$movement[1],
243
- _ref10$velocity = _slicedToArray(_ref10.velocity, 2),
244
- vy = _ref10$velocity[1];
262
+ var computePopupProgress = useCallback(function (_ref12) {
263
+ var dragActive = _ref12.active,
264
+ _ref12$movement = _slicedToArray(_ref12.movement, 2),
265
+ my = _ref12$movement[1],
266
+ _ref12$velocity = _slicedToArray(_ref12.velocity, 2),
267
+ vy = _ref12$velocity[1];
245
268
  var damper = 0.5;
246
269
  var p = Math.max(0, my) / window.innerHeight;
247
270
  var progress = p * damper;
@@ -267,49 +290,67 @@ var KeypadScreen = function KeypadScreen(_ref) {
267
290
  }),
268
291
  bindPopupDrag = _useDragProgress.bind,
269
292
  popupSpring = _useDragProgress.progress;
293
+ useEffect(function () {
294
+ var keyup = function keyup(e) {
295
+ if (e.key === 'Escape') {
296
+ if (showPopup === 1) {
297
+ onCloseModal();
298
+ }
299
+ }
300
+ };
301
+ document.addEventListener('keyup', keyup);
302
+ return function () {
303
+ document.removeEventListener('keyup', keyup);
304
+ };
305
+ }, [showPopup, onCloseModal]);
270
306
  var gridItems = useMemo(function () {
271
307
  return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
272
- var _ref15;
273
- var _ref11 = item || {},
274
- _ref11$id = _ref11.id,
275
- id = _ref11$id === void 0 ? null : _ref11$id,
276
- _ref11$label = _ref11.label,
277
- label = _ref11$label === void 0 ? null : _ref11$label,
278
- _ref11$visual = _ref11.visual,
279
- visual = _ref11$visual === void 0 ? null : _ref11$visual,
280
- _ref11$textStyle = _ref11.textStyle,
281
- textStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle,
282
- _ref11$boxStyle = _ref11.boxStyle,
283
- boxStyle = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle,
284
- _ref11$heading = _ref11.heading,
285
- heading = _ref11$heading === void 0 ? null : _ref11$heading,
286
- _ref11$content = _ref11.content,
287
- content = _ref11$content === void 0 ? null : _ref11$content,
288
- _ref11$largeVisual = _ref11.largeVisual,
289
- popupLargeVisual = _ref11$largeVisual === void 0 ? null : _ref11$largeVisual;
290
- var _ref12 = visual || {},
291
- _ref12$url = _ref12.url,
292
- visualUrl = _ref12$url === void 0 ? null : _ref12$url;
293
- var _ref13 = heading || {},
294
- _ref13$body = _ref13.body,
295
- headingBody = _ref13$body === void 0 ? null : _ref13$body;
296
- var _ref14 = content || {},
297
- _ref14$body = _ref14.body,
298
- contentBody = _ref14$body === void 0 ? null : _ref14$body;
308
+ var _ref17;
309
+ var _ref13 = item || {},
310
+ _ref13$id = _ref13.id,
311
+ id = _ref13$id === void 0 ? null : _ref13$id,
312
+ _ref13$label = _ref13.label,
313
+ label = _ref13$label === void 0 ? null : _ref13$label,
314
+ _ref13$visual = _ref13.visual,
315
+ visual = _ref13$visual === void 0 ? null : _ref13$visual,
316
+ _ref13$textStyle = _ref13.textStyle,
317
+ textStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
318
+ _ref13$boxStyle = _ref13.boxStyle,
319
+ boxStyle = _ref13$boxStyle === void 0 ? null : _ref13$boxStyle,
320
+ _ref13$heading = _ref13.heading,
321
+ heading = _ref13$heading === void 0 ? null : _ref13$heading,
322
+ _ref13$content = _ref13.content,
323
+ content = _ref13$content === void 0 ? null : _ref13$content,
324
+ _ref13$url = _ref13.url,
325
+ url = _ref13$url === void 0 ? null : _ref13$url,
326
+ _ref13$inWebView = _ref13.inWebView,
327
+ inWebView = _ref13$inWebView === void 0 ? false : _ref13$inWebView,
328
+ _ref13$largeVisual = _ref13.largeVisual,
329
+ popupLargeVisual = _ref13$largeVisual === void 0 ? null : _ref13$largeVisual;
330
+ var _ref14 = visual || {},
331
+ _ref14$url = _ref14.url,
332
+ visualUrl = _ref14$url === void 0 ? null : _ref14$url;
333
+ var _ref15 = heading || {},
334
+ _ref15$body = _ref15.body,
335
+ headingBody = _ref15$body === void 0 ? null : _ref15$body;
336
+ var _ref16 = content || {},
337
+ _ref16$body = _ref16.body,
338
+ contentBody = _ref16$body === void 0 ? null : _ref16$body;
299
339
  var key = label || visualUrl || id;
300
340
  var isEmpty = label === null && visual === null;
341
+ var isExternalLink = url !== null && !inWebView;
301
342
  var isPopupEmpty = (heading === null || headingBody === '') && (content === null || contentBody === '') && popupLargeVisual === null;
302
343
  return /*#__PURE__*/React.createElement("div", {
303
344
  key: key,
304
345
  className: styles.item
305
346
  }, /*#__PURE__*/React.createElement(Button, {
306
- 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)]),
347
+ className: classNames([styles.button, (_ref17 = {}, _defineProperty(_ref17, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty(_ref17, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty(_ref17, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty(_ref17, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty(_ref17, styles.isEmpty, isEmpty), _defineProperty(_ref17, styles.isLink, url !== null), _defineProperty(_ref17, styles.disableHover, isPopupEmpty && url === null), _ref17)]),
307
348
  style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromText(buttonTextStyle)), getStyleFromBox(boxStyle)), getStyleFromText(textStyle)),
308
- onClick: !isPopupEmpty ? function (e) {
349
+ external: isExternalLink,
350
+ href: isExternalLink ? url : null,
351
+ onClick: !isPopupEmpty || !isExternalLink ? function (e) {
309
352
  return onItemClick(e, item);
310
- } : function (e) {
311
- return e.preventDefault();
312
- }
353
+ } : null
313
354
  }, isEmpty && (isInteractivePreview || isPreview) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PlaceholderImage, {
314
355
  className: styles.imagePlaceholder
315
356
  }), /*#__PURE__*/React.createElement(PlaceholderText, {
@@ -346,7 +387,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
346
387
  });
347
388
  }, [items, screenState, keypadSettings]);
348
389
  useEffect(function () {
349
- if (screenState === 'popup') {
390
+ if (screenState === 'popup' && isPlaceholder) {
350
391
  setPopup(placeholderPopupBoxStyles); // @note force placeholder
351
392
  setShowPopup(1);
352
393
  }
@@ -354,7 +395,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
354
395
  setPopup(null);
355
396
  setShowPopup(0);
356
397
  }
357
- if (screenState !== null && screenState.includes('popups')) {
398
+ if (screenState !== null && screenState.includes('popup')) {
358
399
  var index = screenState.split('.').pop();
359
400
  var found = items[index];
360
401
  setShowPopup(1);
@@ -366,7 +407,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
366
407
  }
367
408
  }, [screenState, items]);
368
409
  return /*#__PURE__*/React.createElement("div", {
369
- className: classNames([styles.container, (_ref16 = {}, _defineProperty(_ref16, className, className !== null), _defineProperty(_ref16, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref16, styles.withSquareItems, withSquareItems), _ref16)]),
410
+ className: classNames([styles.container, (_ref18 = {}, _defineProperty(_ref18, className, className !== null), _defineProperty(_ref18, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref18, styles.withSquareItems, withSquareItems), _ref18)]),
370
411
  "data-screen-ready": true
371
412
  }, isEdit && screenState !== null ? /*#__PURE__*/React.createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
372
413
  background: background,
@@ -382,6 +423,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
382
423
  width: width,
383
424
  height: height,
384
425
  className: styles.inner
426
+ }, /*#__PURE__*/React.createElement(Scroll, {
427
+ width: width,
428
+ height: height,
429
+ verticalAlign: layout,
430
+ disabled: isPreview || isPlaceholder || isEdit || showPopup !== 0
385
431
  }, /*#__PURE__*/React.createElement(Layout, {
386
432
  className: styles.layout,
387
433
  verticalAlign: layout,
@@ -421,20 +467,26 @@ var KeypadScreen = function KeypadScreen(_ref) {
421
467
  return p < 0.1 ? 'none' : 'auto';
422
468
  })
423
469
  }
424
- }, bindPopupDrag()), /*#__PURE__*/React.createElement(Scroll, null, /*#__PURE__*/React.createElement("button", {
425
- type: "button",
426
- className: styles.popupButton,
470
+ }, bindPopupDrag(), {
427
471
  onClick: function onClick() {
428
472
  if (onCloseModal !== null) {
429
473
  onCloseModal();
430
474
  }
431
475
  }
476
+ }), /*#__PURE__*/React.createElement(Scroll, {
477
+ disabled: isPreview || isPlaceholder || isEdit,
478
+ verticalAlign: "middle",
479
+ withArrow: false,
480
+ withShadow: true
481
+ }, /*#__PURE__*/React.createElement("button", {
482
+ type: "button",
483
+ className: styles.popupButton
432
484
  }, /*#__PURE__*/React.createElement("div", {
433
485
  className: classNames([styles.popupInner, styles[popupLayoutClassName]]),
434
486
  style: _objectSpread(_objectSpread({}, getStyleFromBox(placeholderPopupBoxStyles)), getStyleFromBox(popupBoxStyle))
435
487
  }, /*#__PURE__*/React.createElement("div", {
436
488
  className: styles.popupWrapper
437
- }, !isInteractivePreview || popupHeading !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
489
+ }, /*#__PURE__*/React.createElement(ScreenElement, {
438
490
  placeholder: "popupHeading",
439
491
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
440
492
  id: "IE7U/Q",
@@ -444,13 +496,12 @@ var KeypadScreen = function KeypadScreen(_ref) {
444
496
  }]
445
497
  }),
446
498
  emptyClassName: classNames([styles.empty, styles.emptyHeading]),
447
- isEmpty: (popupHeading === null || popupHeadingBody === '') && screenState !== 'popup'
448
- }, /*#__PURE__*/React.createElement(Heading, Object.assign({
449
- className: styles.popupHeading,
450
- body: "Lorem ipsum"
499
+ isEmpty: !hasPopupHeading
500
+ }, hasPopupHeading ? /*#__PURE__*/React.createElement(Heading, Object.assign({
501
+ className: styles.popupHeading
451
502
  }, popupHeading, {
452
503
  textStyle: _objectSpread(_objectSpread({}, headingTextStyle), popupHeadingTextStyle)
453
- }))) : null, !isInteractivePreview || popupContent !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
504
+ })) : null), /*#__PURE__*/React.createElement(ScreenElement, {
454
505
  placeholder: "popupContent",
455
506
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
456
507
  id: "JRZoe6",
@@ -460,14 +511,13 @@ var KeypadScreen = function KeypadScreen(_ref) {
460
511
  }]
461
512
  }),
462
513
  emptyClassName: classNames([styles.empty, styles.emptyContent]),
463
- isEmpty: (popupContent === null || popupContentBody === '') && popupContent === null && screenState !== 'popup'
464
- }, /*#__PURE__*/React.createElement(Text, Object.assign({
465
- className: styles.popupContent,
466
- body: "Lorem ipsum dolor sit amet consectetur adipiscing elit."
514
+ isEmpty: !hasPopupContent
515
+ }, hasPopupContent ? /*#__PURE__*/React.createElement(Text, Object.assign({
516
+ className: styles.popupContent
467
517
  }, popupContent, {
468
518
  textStyle: _objectSpread(_objectSpread({}, contentTextStyle), popupContentTextStyle)
469
- }))) : null, !isInteractivePreview || largeVisual !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
470
- placeholder: "popupVisual",
519
+ })) : null), largeVisual !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
520
+ placeholder: "image",
471
521
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
472
522
  id: "z4Pr+g",
473
523
  defaultMessage: [{
@@ -481,9 +531,27 @@ var KeypadScreen = function KeypadScreen(_ref) {
481
531
  className: styles.popupVisual,
482
532
  media: largeVisual,
483
533
  width: "100%"
484
- })) : null, largeVisual === null && isPreview ? /*#__PURE__*/React.createElement(PlaceholderImage, {
485
- className: styles.popupVisual
486
- }) : null)))))));
534
+ })) : null, /*#__PURE__*/React.createElement(ScreenElement, {
535
+ placeholder: "button",
536
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
537
+ id: "N7Kj8z",
538
+ defaultMessage: [{
539
+ "type": 0,
540
+ "value": "Button"
541
+ }]
542
+ }),
543
+ emptyClassName: classNames([styles.empty]),
544
+ isEmpty: popupButton === null
545
+ }, popupButton !== null ? /*#__PURE__*/React.createElement(CallToAction, {
546
+ className: styles.popupCTA,
547
+ label: buttonLabel,
548
+ url: buttonUrl,
549
+ inWebView: popupInWebView,
550
+ openWebView: openWebView,
551
+ type: "click",
552
+ boxStyle: popupButtonBoxStyle,
553
+ style: _objectSpread({}, getStyleFromBox(popupButtonBoxStyle))
554
+ }) : null)))))))));
487
555
  };
488
556
  KeypadScreen.propTypes = propTypes;
489
557
  KeypadScreen.defaultProps = defaultProps;
@@ -521,6 +589,42 @@ var definition = [{
521
589
  }]
522
590
  }),
523
591
  fields: [{
592
+ name: 'layout',
593
+ type: 'screen-layout',
594
+ defaultValue: 'middle',
595
+ label: defineMessage({
596
+ id: "4iBXj2",
597
+ defaultMessage: [{
598
+ "type": 0,
599
+ "value": "Layout"
600
+ }]
601
+ })
602
+ }, {
603
+ name: 'keypadSettings',
604
+ type: 'fields',
605
+ isList: false,
606
+ withoutLabel: true,
607
+ defaultValue: {
608
+ layout: {
609
+ columnAlign: 'middle',
610
+ columns: 3,
611
+ spacing: 2,
612
+ withSquareItems: false
613
+ }
614
+ },
615
+ label: defineMessage({
616
+ id: "FjuRaw",
617
+ defaultMessage: [{
618
+ "type": 0,
619
+ "value": "Keypad settings"
620
+ }]
621
+ }),
622
+ fields: [{
623
+ name: 'layout',
624
+ type: 'keypad-layout',
625
+ isList: true
626
+ }]
627
+ }, {
524
628
  name: 'items',
525
629
  type: 'buttons',
526
630
  label: defineMessage({
@@ -583,12 +687,12 @@ var definition = [{
583
687
  }]
584
688
  }]
585
689
  }, {
586
- id: 'popup',
690
+ id: 'popups',
587
691
  label: defineMessage({
588
- id: "mBYGpP",
692
+ id: "FYm4w+",
589
693
  defaultMessage: [{
590
694
  "type": 0,
591
- "value": "Popup"
695
+ "value": "Popups"
592
696
  }]
593
697
  }),
594
698
  fields: [{
@@ -651,12 +755,12 @@ var definition = [{
651
755
  }]
652
756
  }]
653
757
  }, {
654
- id: 'popups',
758
+ id: 'popup',
655
759
  label: defineMessage({
656
- id: "Hyqnww",
760
+ id: "sSahY1",
657
761
  defaultMessage: [{
658
762
  "type": 0,
659
- "value": "Popups"
763
+ "value": "Popup"
660
764
  }]
661
765
  }),
662
766
  defaultValue: [],
@@ -692,44 +796,19 @@ var definition = [{
692
796
  "value": "Visual"
693
797
  }]
694
798
  })
799
+ }, {
800
+ name: 'button',
801
+ type: 'button-link',
802
+ label: defineMessage({
803
+ id: "i6bmbD",
804
+ defaultMessage: [{
805
+ "type": 0,
806
+ "value": "Button"
807
+ }]
808
+ })
695
809
  }]
696
810
  }],
697
811
  fields: [{
698
- name: 'layout',
699
- type: 'screen-layout',
700
- defaultValue: 'middle',
701
- label: defineMessage({
702
- id: "4iBXj2",
703
- defaultMessage: [{
704
- "type": 0,
705
- "value": "Layout"
706
- }]
707
- })
708
- }, {
709
- name: 'keypadSettings',
710
- type: 'fields',
711
- isList: true,
712
- withoutLabel: true,
713
- defaultValue: {
714
- layout: {
715
- columnAlign: 'middle',
716
- columns: 3,
717
- spacing: 2,
718
- withSquareItems: false
719
- }
720
- },
721
- label: defineMessage({
722
- id: "FjuRaw",
723
- defaultMessage: [{
724
- "type": 0,
725
- "value": "Keypad settings"
726
- }]
727
- }),
728
- fields: [{
729
- name: 'layout',
730
- type: 'keypad-layout-form'
731
- }]
732
- }, {
733
812
  name: 'background',
734
813
  type: 'background',
735
814
  label: defineMessage({
package/lib/index.js CHANGED
@@ -18,6 +18,7 @@ var hooks = require('@micromag/core/hooks');
18
18
  var utils = require('@micromag/core/utils');
19
19
  var Background = require('@micromag/element-background');
20
20
  var Button = require('@micromag/element-button');
21
+ var CallToAction = require('@micromag/element-call-to-action');
21
22
  var Container = require('@micromag/element-container');
22
23
  var Heading = require('@micromag/element-heading');
23
24
  var Keypad$1 = require('@micromag/element-keypad');
@@ -37,6 +38,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
37
38
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
38
39
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
39
40
  var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
41
+ var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
40
42
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
41
43
  var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
42
44
  var Keypad__default = /*#__PURE__*/_interopDefaultLegacy(Keypad$1);
@@ -45,7 +47,7 @@ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
45
47
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
46
48
  var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
47
49
 
48
- var styles = {"popupButton":"micromag-screen-keypad-popupButton","layoutLabelOver":"micromag-screen-keypad-layoutLabelOver","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","buttonLabel":"micromag-screen-keypad-buttonLabel","withSquareItems":"micromag-screen-keypad-withSquareItems","layoutNoLabel":"micromag-screen-keypad-layoutNoLabel","thumbnail":"micromag-screen-keypad-thumbnail","popupBackdrop":"micromag-screen-keypad-popupBackdrop","button":"micromag-screen-keypad-button","background":"micromag-screen-keypad-background","container":"micromag-screen-keypad-container","disabled":"micromag-screen-keypad-disabled","hidden":"micromag-screen-keypad-hidden","placeholder":"micromag-screen-keypad-placeholder","content":"micromag-screen-keypad-content","emptyTitle":"micromag-screen-keypad-emptyTitle","emptyText":"micromag-screen-keypad-emptyText","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","inner":"micromag-screen-keypad-inner","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","placeholderItem":"micromag-screen-keypad-placeholderItem","isEmpty":"micromag-screen-keypad-isEmpty","isPopupEmpty":"micromag-screen-keypad-isPopupEmpty","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","buttonVisualPlaceholder":"micromag-screen-keypad-buttonVisualPlaceholder","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popup":"micromag-screen-keypad-popup","popupInner":"micromag-screen-keypad-popupInner","popupContent":"micromag-screen-keypad-popupContent","popupWrapper":"micromag-screen-keypad-popupWrapper","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","contentBottom":"micromag-screen-keypad-contentBottom","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual"};
50
+ var styles = {"popupButton":"micromag-screen-keypad-popupButton","layoutLabelOver":"micromag-screen-keypad-layoutLabelOver","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","buttonLabel":"micromag-screen-keypad-buttonLabel","withSquareItems":"micromag-screen-keypad-withSquareItems","layoutNoLabel":"micromag-screen-keypad-layoutNoLabel","thumbnail":"micromag-screen-keypad-thumbnail","popupBackdrop":"micromag-screen-keypad-popupBackdrop","button":"micromag-screen-keypad-button","background":"micromag-screen-keypad-background","container":"micromag-screen-keypad-container","disabled":"micromag-screen-keypad-disabled","hidden":"micromag-screen-keypad-hidden","placeholder":"micromag-screen-keypad-placeholder","content":"micromag-screen-keypad-content","emptyTitle":"micromag-screen-keypad-emptyTitle","emptyText":"micromag-screen-keypad-emptyText","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","inner":"micromag-screen-keypad-inner","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","placeholderItem":"micromag-screen-keypad-placeholderItem","isEmpty":"micromag-screen-keypad-isEmpty","disableHover":"micromag-screen-keypad-disableHover","isLink":"micromag-screen-keypad-isLink","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","buttonVisualPlaceholder":"micromag-screen-keypad-buttonVisualPlaceholder","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popup":"micromag-screen-keypad-popup","popupInner":"micromag-screen-keypad-popupInner","popupContent":"micromag-screen-keypad-popupContent","popupWrapper":"micromag-screen-keypad-popupWrapper","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","contentBottom":"micromag-screen-keypad-contentBottom","popupCTA":"micromag-screen-keypad-popupCTA","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual"};
49
51
 
50
52
  var placeholders = [{
51
53
  id: '1'
@@ -155,7 +157,7 @@ var defaultProps = {
155
157
  className: null
156
158
  };
157
159
  var KeypadScreen = function KeypadScreen(_ref) {
158
- var _ref16;
160
+ var _ref18;
159
161
  var items = _ref.items,
160
162
  layout = _ref.layout,
161
163
  spacing = _ref.spacing,
@@ -170,6 +172,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
170
172
  var _usePlaybackContext = contexts.usePlaybackContext(),
171
173
  muted = _usePlaybackContext.muted;
172
174
  var mediaRef = contexts.usePlaybackMediaRef(current);
175
+ var screenState = contexts.useScreenState();
173
176
  var _useScreenSize = contexts.useScreenSize(),
174
177
  width = _useScreenSize.width,
175
178
  height = _useScreenSize.height,
@@ -177,12 +180,13 @@ var KeypadScreen = function KeypadScreen(_ref) {
177
180
  var _useViewerContext = contexts.useViewerContext(),
178
181
  viewerTopHeight = _useViewerContext.topHeight,
179
182
  viewerBottomHeight = _useViewerContext.bottomHeight;
183
+ var _useViewerWebView = contexts.useViewerWebView(),
184
+ openWebView = _useViewerWebView.open;
180
185
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
181
186
  isView = _useScreenRenderConte.isView,
182
187
  isPreview = _useScreenRenderConte.isPreview,
183
188
  isPlaceholder = _useScreenRenderConte.isPlaceholder,
184
189
  isEdit = _useScreenRenderConte.isEdit;
185
- var screenState = contexts.useScreenState();
186
190
  var backgroundPlaying = current && (isView || isEdit);
187
191
  var mediaShouldLoad = !isPlaceholder && (current || active);
188
192
  var isInteractivePreview = isEdit && screenState === null;
@@ -233,15 +237,15 @@ var KeypadScreen = function KeypadScreen(_ref) {
233
237
  _ref6$content = _ref6.content,
234
238
  popupContent = _ref6$content === void 0 ? null : _ref6$content,
235
239
  _ref6$largeVisual = _ref6.largeVisual,
236
- largeVisual = _ref6$largeVisual === void 0 ? null : _ref6$largeVisual;
240
+ largeVisual = _ref6$largeVisual === void 0 ? null : _ref6$largeVisual,
241
+ _ref6$button = _ref6.button,
242
+ popupButton = _ref6$button === void 0 ? null : _ref6$button;
243
+ var hasPopupHeading = utils.isTextFilled(popupHeading);
237
244
  var _ref7 = popupHeading || {},
238
- _ref7$body = _ref7.body,
239
- popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body,
240
245
  _ref7$textStyle = _ref7.textStyle,
241
246
  popupHeadingTextStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
247
+ var hasPopupContent = utils.isTextFilled(popupContent);
242
248
  var _ref8 = popupContent || {},
243
- _ref8$body = _ref8.body,
244
- popupContentBody = _ref8$body === void 0 ? null : _ref8$body,
245
249
  _ref8$textStyle = _ref8.textStyle,
246
250
  popupContentTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
247
251
  var _ref9 = popupBackdrop || {},
@@ -249,22 +253,42 @@ var KeypadScreen = function KeypadScreen(_ref) {
249
253
  backdropColor = _ref9$color === void 0 ? null : _ref9$color,
250
254
  _ref9$image = _ref9.image,
251
255
  backdropMedia = _ref9$image === void 0 ? null : _ref9$image;
256
+ var _ref10 = popupButton || {},
257
+ _ref10$label = _ref10.label,
258
+ buttonLabel = _ref10$label === void 0 ? null : _ref10$label,
259
+ _ref10$url = _ref10.url,
260
+ buttonUrl = _ref10$url === void 0 ? null : _ref10$url,
261
+ _ref10$inWebView = _ref10.inWebView,
262
+ popupInWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
263
+ _ref10$boxStyle = _ref10.boxStyle,
264
+ popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
252
265
  var onItemClick = React.useCallback(function (e, item) {
266
+ var _ref11 = item || {},
267
+ _ref11$inWebView = _ref11.inWebView,
268
+ inWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
269
+ _ref11$url = _ref11.url,
270
+ url = _ref11$url === void 0 ? null : _ref11$url;
253
271
  e.stopPropagation();
272
+ trackScreenEvent('click_item', item);
273
+ if (inWebView && url !== null) {
274
+ openWebView({
275
+ url: url
276
+ });
277
+ return;
278
+ }
254
279
  setPopup(item);
255
280
  setShowPopup(1);
256
- trackScreenEvent('click_item', item);
257
281
  }, [setPopup, trackScreenEvent]);
258
282
  var onCloseModal = React.useCallback(function () {
259
283
  setShowPopup(0);
260
284
  trackScreenEvent('close_modal');
261
285
  }, [setShowPopup]);
262
- var computePopupProgress = React.useCallback(function (_ref10) {
263
- var dragActive = _ref10.active,
264
- _ref10$movement = _slicedToArray__default["default"](_ref10.movement, 2),
265
- my = _ref10$movement[1],
266
- _ref10$velocity = _slicedToArray__default["default"](_ref10.velocity, 2),
267
- vy = _ref10$velocity[1];
286
+ var computePopupProgress = React.useCallback(function (_ref12) {
287
+ var dragActive = _ref12.active,
288
+ _ref12$movement = _slicedToArray__default["default"](_ref12.movement, 2),
289
+ my = _ref12$movement[1],
290
+ _ref12$velocity = _slicedToArray__default["default"](_ref12.velocity, 2),
291
+ vy = _ref12$velocity[1];
268
292
  var damper = 0.5;
269
293
  var p = Math.max(0, my) / window.innerHeight;
270
294
  var progress = p * damper;
@@ -290,49 +314,67 @@ var KeypadScreen = function KeypadScreen(_ref) {
290
314
  }),
291
315
  bindPopupDrag = _useDragProgress.bind,
292
316
  popupSpring = _useDragProgress.progress;
317
+ React.useEffect(function () {
318
+ var keyup = function keyup(e) {
319
+ if (e.key === 'Escape') {
320
+ if (showPopup === 1) {
321
+ onCloseModal();
322
+ }
323
+ }
324
+ };
325
+ document.addEventListener('keyup', keyup);
326
+ return function () {
327
+ document.removeEventListener('keyup', keyup);
328
+ };
329
+ }, [showPopup, onCloseModal]);
293
330
  var gridItems = React.useMemo(function () {
294
331
  return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
295
- var _ref15;
296
- var _ref11 = item || {},
297
- _ref11$id = _ref11.id,
298
- id = _ref11$id === void 0 ? null : _ref11$id,
299
- _ref11$label = _ref11.label,
300
- label = _ref11$label === void 0 ? null : _ref11$label,
301
- _ref11$visual = _ref11.visual,
302
- visual = _ref11$visual === void 0 ? null : _ref11$visual,
303
- _ref11$textStyle = _ref11.textStyle,
304
- textStyle = _ref11$textStyle === void 0 ? null : _ref11$textStyle,
305
- _ref11$boxStyle = _ref11.boxStyle,
306
- boxStyle = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle,
307
- _ref11$heading = _ref11.heading,
308
- heading = _ref11$heading === void 0 ? null : _ref11$heading,
309
- _ref11$content = _ref11.content,
310
- content = _ref11$content === void 0 ? null : _ref11$content,
311
- _ref11$largeVisual = _ref11.largeVisual,
312
- popupLargeVisual = _ref11$largeVisual === void 0 ? null : _ref11$largeVisual;
313
- var _ref12 = visual || {},
314
- _ref12$url = _ref12.url,
315
- visualUrl = _ref12$url === void 0 ? null : _ref12$url;
316
- var _ref13 = heading || {},
317
- _ref13$body = _ref13.body,
318
- headingBody = _ref13$body === void 0 ? null : _ref13$body;
319
- var _ref14 = content || {},
320
- _ref14$body = _ref14.body,
321
- contentBody = _ref14$body === void 0 ? null : _ref14$body;
332
+ var _ref17;
333
+ var _ref13 = item || {},
334
+ _ref13$id = _ref13.id,
335
+ id = _ref13$id === void 0 ? null : _ref13$id,
336
+ _ref13$label = _ref13.label,
337
+ label = _ref13$label === void 0 ? null : _ref13$label,
338
+ _ref13$visual = _ref13.visual,
339
+ visual = _ref13$visual === void 0 ? null : _ref13$visual,
340
+ _ref13$textStyle = _ref13.textStyle,
341
+ textStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
342
+ _ref13$boxStyle = _ref13.boxStyle,
343
+ boxStyle = _ref13$boxStyle === void 0 ? null : _ref13$boxStyle,
344
+ _ref13$heading = _ref13.heading,
345
+ heading = _ref13$heading === void 0 ? null : _ref13$heading,
346
+ _ref13$content = _ref13.content,
347
+ content = _ref13$content === void 0 ? null : _ref13$content,
348
+ _ref13$url = _ref13.url,
349
+ url = _ref13$url === void 0 ? null : _ref13$url,
350
+ _ref13$inWebView = _ref13.inWebView,
351
+ inWebView = _ref13$inWebView === void 0 ? false : _ref13$inWebView,
352
+ _ref13$largeVisual = _ref13.largeVisual,
353
+ popupLargeVisual = _ref13$largeVisual === void 0 ? null : _ref13$largeVisual;
354
+ var _ref14 = visual || {},
355
+ _ref14$url = _ref14.url,
356
+ visualUrl = _ref14$url === void 0 ? null : _ref14$url;
357
+ var _ref15 = heading || {},
358
+ _ref15$body = _ref15.body,
359
+ headingBody = _ref15$body === void 0 ? null : _ref15$body;
360
+ var _ref16 = content || {},
361
+ _ref16$body = _ref16.body,
362
+ contentBody = _ref16$body === void 0 ? null : _ref16$body;
322
363
  var key = label || visualUrl || id;
323
364
  var isEmpty = label === null && visual === null;
365
+ var isExternalLink = url !== null && !inWebView;
324
366
  var isPopupEmpty = (heading === null || headingBody === '') && (content === null || contentBody === '') && popupLargeVisual === null;
325
367
  return /*#__PURE__*/React__default["default"].createElement("div", {
326
368
  key: key,
327
369
  className: styles.item
328
370
  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
329
- 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)]),
371
+ className: classNames__default["default"]([styles.button, (_ref17 = {}, _defineProperty__default["default"](_ref17, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty__default["default"](_ref17, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty__default["default"](_ref17, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty__default["default"](_ref17, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty__default["default"](_ref17, styles.isEmpty, isEmpty), _defineProperty__default["default"](_ref17, styles.isLink, url !== null), _defineProperty__default["default"](_ref17, styles.disableHover, isPopupEmpty && url === null), _ref17)]),
330
372
  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)),
331
- onClick: !isPopupEmpty ? function (e) {
373
+ external: isExternalLink,
374
+ href: isExternalLink ? url : null,
375
+ onClick: !isPopupEmpty || !isExternalLink ? function (e) {
332
376
  return onItemClick(e, item);
333
- } : function (e) {
334
- return e.preventDefault();
335
- }
377
+ } : null
336
378
  }, isEmpty && (isInteractivePreview || isPreview) ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(components.PlaceholderImage, {
337
379
  className: styles.imagePlaceholder
338
380
  }), /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
@@ -369,7 +411,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
369
411
  });
370
412
  }, [items, screenState, keypadSettings]);
371
413
  React.useEffect(function () {
372
- if (screenState === 'popup') {
414
+ if (screenState === 'popup' && isPlaceholder) {
373
415
  setPopup(placeholderPopupBoxStyles); // @note force placeholder
374
416
  setShowPopup(1);
375
417
  }
@@ -377,7 +419,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
377
419
  setPopup(null);
378
420
  setShowPopup(0);
379
421
  }
380
- if (screenState !== null && screenState.includes('popups')) {
422
+ if (screenState !== null && screenState.includes('popup')) {
381
423
  var index = screenState.split('.').pop();
382
424
  var found = items[index];
383
425
  setShowPopup(1);
@@ -389,7 +431,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
389
431
  }
390
432
  }, [screenState, items]);
391
433
  return /*#__PURE__*/React__default["default"].createElement("div", {
392
- 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)]),
434
+ className: classNames__default["default"]([styles.container, (_ref18 = {}, _defineProperty__default["default"](_ref18, className, className !== null), _defineProperty__default["default"](_ref18, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref18, styles.withSquareItems, withSquareItems), _ref18)]),
393
435
  "data-screen-ready": true
394
436
  }, isEdit && screenState !== null ? /*#__PURE__*/React__default["default"].createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
395
437
  background: background,
@@ -405,6 +447,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
405
447
  width: width,
406
448
  height: height,
407
449
  className: styles.inner
450
+ }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
451
+ width: width,
452
+ height: height,
453
+ verticalAlign: layout,
454
+ disabled: isPreview || isPlaceholder || isEdit || showPopup !== 0
408
455
  }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
409
456
  className: styles.layout,
410
457
  verticalAlign: layout,
@@ -444,20 +491,26 @@ var KeypadScreen = function KeypadScreen(_ref) {
444
491
  return p < 0.1 ? 'none' : 'auto';
445
492
  })
446
493
  }
447
- }, bindPopupDrag()), /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], null, /*#__PURE__*/React__default["default"].createElement("button", {
448
- type: "button",
449
- className: styles.popupButton,
494
+ }, bindPopupDrag(), {
450
495
  onClick: function onClick() {
451
496
  if (onCloseModal !== null) {
452
497
  onCloseModal();
453
498
  }
454
499
  }
500
+ }), /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
501
+ disabled: isPreview || isPlaceholder || isEdit,
502
+ verticalAlign: "middle",
503
+ withArrow: false,
504
+ withShadow: true
505
+ }, /*#__PURE__*/React__default["default"].createElement("button", {
506
+ type: "button",
507
+ className: styles.popupButton
455
508
  }, /*#__PURE__*/React__default["default"].createElement("div", {
456
509
  className: classNames__default["default"]([styles.popupInner, styles[popupLayoutClassName]]),
457
510
  style: _objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(placeholderPopupBoxStyles)), utils.getStyleFromBox(popupBoxStyle))
458
511
  }, /*#__PURE__*/React__default["default"].createElement("div", {
459
512
  className: styles.popupWrapper
460
- }, !isInteractivePreview || popupHeading !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
513
+ }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
461
514
  placeholder: "popupHeading",
462
515
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
463
516
  id: "IE7U/Q",
@@ -467,13 +520,12 @@ var KeypadScreen = function KeypadScreen(_ref) {
467
520
  }]
468
521
  }),
469
522
  emptyClassName: classNames__default["default"]([styles.empty, styles.emptyHeading]),
470
- isEmpty: (popupHeading === null || popupHeadingBody === '') && screenState !== 'popup'
471
- }, /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
472
- className: styles.popupHeading,
473
- body: "Lorem ipsum"
523
+ isEmpty: !hasPopupHeading
524
+ }, hasPopupHeading ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
525
+ className: styles.popupHeading
474
526
  }, popupHeading, {
475
527
  textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, headingTextStyle), popupHeadingTextStyle)
476
- }))) : null, !isInteractivePreview || popupContent !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
528
+ })) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
477
529
  placeholder: "popupContent",
478
530
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
479
531
  id: "JRZoe6",
@@ -483,14 +535,13 @@ var KeypadScreen = function KeypadScreen(_ref) {
483
535
  }]
484
536
  }),
485
537
  emptyClassName: classNames__default["default"]([styles.empty, styles.emptyContent]),
486
- isEmpty: (popupContent === null || popupContentBody === '') && popupContent === null && screenState !== 'popup'
487
- }, /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
488
- className: styles.popupContent,
489
- body: "Lorem ipsum dolor sit amet consectetur adipiscing elit."
538
+ isEmpty: !hasPopupContent
539
+ }, hasPopupContent ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
540
+ className: styles.popupContent
490
541
  }, popupContent, {
491
542
  textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, contentTextStyle), popupContentTextStyle)
492
- }))) : null, !isInteractivePreview || largeVisual !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
493
- placeholder: "popupVisual",
543
+ })) : null), largeVisual !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
544
+ placeholder: "image",
494
545
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
495
546
  id: "z4Pr+g",
496
547
  defaultMessage: [{
@@ -504,9 +555,27 @@ var KeypadScreen = function KeypadScreen(_ref) {
504
555
  className: styles.popupVisual,
505
556
  media: largeVisual,
506
557
  width: "100%"
507
- })) : null, largeVisual === null && isPreview ? /*#__PURE__*/React__default["default"].createElement(components.PlaceholderImage, {
508
- className: styles.popupVisual
509
- }) : null)))))));
558
+ })) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
559
+ placeholder: "button",
560
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
561
+ id: "N7Kj8z",
562
+ defaultMessage: [{
563
+ "type": 0,
564
+ "value": "Button"
565
+ }]
566
+ }),
567
+ emptyClassName: classNames__default["default"]([styles.empty]),
568
+ isEmpty: popupButton === null
569
+ }, popupButton !== null ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
570
+ className: styles.popupCTA,
571
+ label: buttonLabel,
572
+ url: buttonUrl,
573
+ inWebView: popupInWebView,
574
+ openWebView: openWebView,
575
+ type: "click",
576
+ boxStyle: popupButtonBoxStyle,
577
+ style: _objectSpread__default["default"]({}, utils.getStyleFromBox(popupButtonBoxStyle))
578
+ }) : null)))))))));
510
579
  };
511
580
  KeypadScreen.propTypes = propTypes;
512
581
  KeypadScreen.defaultProps = defaultProps;
@@ -544,6 +613,42 @@ var definition = [{
544
613
  }]
545
614
  }),
546
615
  fields: [{
616
+ name: 'layout',
617
+ type: 'screen-layout',
618
+ defaultValue: 'middle',
619
+ label: reactIntl.defineMessage({
620
+ id: "4iBXj2",
621
+ defaultMessage: [{
622
+ "type": 0,
623
+ "value": "Layout"
624
+ }]
625
+ })
626
+ }, {
627
+ name: 'keypadSettings',
628
+ type: 'fields',
629
+ isList: false,
630
+ withoutLabel: true,
631
+ defaultValue: {
632
+ layout: {
633
+ columnAlign: 'middle',
634
+ columns: 3,
635
+ spacing: 2,
636
+ withSquareItems: false
637
+ }
638
+ },
639
+ label: reactIntl.defineMessage({
640
+ id: "FjuRaw",
641
+ defaultMessage: [{
642
+ "type": 0,
643
+ "value": "Keypad settings"
644
+ }]
645
+ }),
646
+ fields: [{
647
+ name: 'layout',
648
+ type: 'keypad-layout',
649
+ isList: true
650
+ }]
651
+ }, {
547
652
  name: 'items',
548
653
  type: 'buttons',
549
654
  label: reactIntl.defineMessage({
@@ -606,12 +711,12 @@ var definition = [{
606
711
  }]
607
712
  }]
608
713
  }, {
609
- id: 'popup',
714
+ id: 'popups',
610
715
  label: reactIntl.defineMessage({
611
- id: "mBYGpP",
716
+ id: "FYm4w+",
612
717
  defaultMessage: [{
613
718
  "type": 0,
614
- "value": "Popup"
719
+ "value": "Popups"
615
720
  }]
616
721
  }),
617
722
  fields: [{
@@ -674,12 +779,12 @@ var definition = [{
674
779
  }]
675
780
  }]
676
781
  }, {
677
- id: 'popups',
782
+ id: 'popup',
678
783
  label: reactIntl.defineMessage({
679
- id: "Hyqnww",
784
+ id: "sSahY1",
680
785
  defaultMessage: [{
681
786
  "type": 0,
682
- "value": "Popups"
787
+ "value": "Popup"
683
788
  }]
684
789
  }),
685
790
  defaultValue: [],
@@ -715,44 +820,19 @@ var definition = [{
715
820
  "value": "Visual"
716
821
  }]
717
822
  })
823
+ }, {
824
+ name: 'button',
825
+ type: 'button-link',
826
+ label: reactIntl.defineMessage({
827
+ id: "i6bmbD",
828
+ defaultMessage: [{
829
+ "type": 0,
830
+ "value": "Button"
831
+ }]
832
+ })
718
833
  }]
719
834
  }],
720
835
  fields: [{
721
- name: 'layout',
722
- type: 'screen-layout',
723
- defaultValue: 'middle',
724
- label: reactIntl.defineMessage({
725
- id: "4iBXj2",
726
- defaultMessage: [{
727
- "type": 0,
728
- "value": "Layout"
729
- }]
730
- })
731
- }, {
732
- name: 'keypadSettings',
733
- type: 'fields',
734
- isList: true,
735
- withoutLabel: true,
736
- defaultValue: {
737
- layout: {
738
- columnAlign: 'middle',
739
- columns: 3,
740
- spacing: 2,
741
- withSquareItems: false
742
- }
743
- },
744
- label: reactIntl.defineMessage({
745
- id: "FjuRaw",
746
- defaultMessage: [{
747
- "type": 0,
748
- "value": "Keypad settings"
749
- }]
750
- }),
751
- fields: [{
752
- name: 'layout',
753
- type: 'keypad-layout-form'
754
- }]
755
- }, {
756
836
  name: 'background',
757
837
  type: 'background',
758
838
  label: reactIntl.defineMessage({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-keypad",
3
- "version": "0.3.348",
3
+ "version": "0.3.349",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -63,7 +63,7 @@
63
63
  "@micromag/element-heading": "^0.3.348",
64
64
  "@micromag/element-keypad": "^0.3.348",
65
65
  "@micromag/element-layout": "^0.3.348",
66
- "@micromag/element-scroll": "^0.3.348",
66
+ "@micromag/element-scroll": "^0.3.349",
67
67
  "@micromag/element-text": "^0.3.348",
68
68
  "@micromag/element-urbania-author": "^0.3.348",
69
69
  "@micromag/element-visual": "^0.3.348",
@@ -82,5 +82,5 @@
82
82
  "publishConfig": {
83
83
  "access": "public"
84
84
  },
85
- "gitHead": "20ef008fdf5c678004b740f395f51cb548591dad"
85
+ "gitHead": "5e3c2c33b7e3c1833b1c43f97792b11d746864b1"
86
86
  }