@micromag/screen-keypad 0.3.348 → 0.3.354

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 +238 -107
  3. package/lib/index.js +239 -105
  4. package/package.json +18 -16
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-header{left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-footer{bottom:0;left:0;position:absolute;width:100%}.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,12 +9,15 @@ 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 { isHeaderFilled, isFooterFilled, getFooterProps, 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';
19
+ import Footer from '@micromag/element-footer';
20
+ import Header from '@micromag/element-header';
18
21
  import Heading from '@micromag/element-heading';
19
22
  import Keypad$1 from '@micromag/element-keypad';
20
23
  import Layout from '@micromag/element-layout';
@@ -22,7 +25,7 @@ import Scroll from '@micromag/element-scroll';
22
25
  import Text from '@micromag/element-text';
23
26
  import Visual from '@micromag/element-visual';
24
27
 
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"};
28
+ 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","header":"micromag-screen-keypad-header","footer":"micromag-screen-keypad-footer","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
29
 
27
30
  var placeholders = [{
28
31
  id: '1'
@@ -114,6 +117,8 @@ var propTypes = {
114
117
  contentTextStyle: PropTypes$1.textStyle,
115
118
  boxStyle: PropTypes$1.boxStyle
116
119
  }),
120
+ header: PropTypes$1.header,
121
+ footer: PropTypes$1.footer,
117
122
  background: PropTypes$1.backgroundElement,
118
123
  current: PropTypes.bool,
119
124
  active: PropTypes.bool,
@@ -126,19 +131,23 @@ var defaultProps = {
126
131
  keypadSettings: null,
127
132
  buttonStyles: null,
128
133
  popupStyles: null,
134
+ header: null,
135
+ footer: null,
129
136
  background: null,
130
137
  current: true,
131
138
  active: true,
132
139
  className: null
133
140
  };
134
141
  var KeypadScreen = function KeypadScreen(_ref) {
135
- var _ref16;
142
+ var _ref18;
136
143
  var items = _ref.items,
137
144
  layout = _ref.layout,
138
145
  spacing = _ref.spacing,
139
146
  keypadSettings = _ref.keypadSettings,
140
147
  buttonStyles = _ref.buttonStyles,
141
148
  popupStyles = _ref.popupStyles,
149
+ header = _ref.header,
150
+ footer = _ref.footer,
142
151
  background = _ref.background,
143
152
  current = _ref.current,
144
153
  active = _ref.active,
@@ -147,19 +156,30 @@ var KeypadScreen = function KeypadScreen(_ref) {
147
156
  var _usePlaybackContext = usePlaybackContext(),
148
157
  muted = _usePlaybackContext.muted;
149
158
  var mediaRef = usePlaybackMediaRef(current);
159
+ var screenState = useScreenState();
150
160
  var _useScreenSize = useScreenSize(),
151
161
  width = _useScreenSize.width,
152
162
  height = _useScreenSize.height,
153
163
  resolution = _useScreenSize.resolution;
154
164
  var _useViewerContext = useViewerContext(),
155
165
  viewerTopHeight = _useViewerContext.topHeight,
156
- viewerBottomHeight = _useViewerContext.bottomHeight;
166
+ viewerBottomHeight = _useViewerContext.bottomHeight,
167
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
168
+ var _useViewerWebView = useViewerWebView(),
169
+ openWebView = _useViewerWebView.open;
157
170
  var _useScreenRenderConte = useScreenRenderContext(),
158
171
  isView = _useScreenRenderConte.isView,
159
172
  isPreview = _useScreenRenderConte.isPreview,
160
173
  isPlaceholder = _useScreenRenderConte.isPlaceholder,
161
174
  isEdit = _useScreenRenderConte.isEdit;
162
- var screenState = useScreenState();
175
+ var hasHeader = isHeaderFilled(header);
176
+ var hasFooter = isFooterFilled(footer);
177
+ var footerProps = getFooterProps(footer, {
178
+ isView: isView,
179
+ current: current,
180
+ openWebView: openWebView,
181
+ isPreview: isPreview
182
+ });
163
183
  var backgroundPlaying = current && (isView || isEdit);
164
184
  var mediaShouldLoad = !isPlaceholder && (current || active);
165
185
  var isInteractivePreview = isEdit && screenState === null;
@@ -210,15 +230,15 @@ var KeypadScreen = function KeypadScreen(_ref) {
210
230
  _ref6$content = _ref6.content,
211
231
  popupContent = _ref6$content === void 0 ? null : _ref6$content,
212
232
  _ref6$largeVisual = _ref6.largeVisual,
213
- largeVisual = _ref6$largeVisual === void 0 ? null : _ref6$largeVisual;
233
+ largeVisual = _ref6$largeVisual === void 0 ? null : _ref6$largeVisual,
234
+ _ref6$button = _ref6.button,
235
+ popupButton = _ref6$button === void 0 ? null : _ref6$button;
236
+ var hasPopupHeading = isTextFilled(popupHeading);
214
237
  var _ref7 = popupHeading || {},
215
- _ref7$body = _ref7.body,
216
- popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body,
217
238
  _ref7$textStyle = _ref7.textStyle,
218
239
  popupHeadingTextStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
240
+ var hasPopupContent = isTextFilled(popupContent);
219
241
  var _ref8 = popupContent || {},
220
- _ref8$body = _ref8.body,
221
- popupContentBody = _ref8$body === void 0 ? null : _ref8$body,
222
242
  _ref8$textStyle = _ref8.textStyle,
223
243
  popupContentTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
224
244
  var _ref9 = popupBackdrop || {},
@@ -226,22 +246,42 @@ var KeypadScreen = function KeypadScreen(_ref) {
226
246
  backdropColor = _ref9$color === void 0 ? null : _ref9$color,
227
247
  _ref9$image = _ref9.image,
228
248
  backdropMedia = _ref9$image === void 0 ? null : _ref9$image;
249
+ var _ref10 = popupButton || {},
250
+ _ref10$label = _ref10.label,
251
+ buttonLabel = _ref10$label === void 0 ? null : _ref10$label,
252
+ _ref10$url = _ref10.url,
253
+ buttonUrl = _ref10$url === void 0 ? null : _ref10$url,
254
+ _ref10$inWebView = _ref10.inWebView,
255
+ popupInWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
256
+ _ref10$boxStyle = _ref10.boxStyle,
257
+ popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
229
258
  var onItemClick = useCallback(function (e, item) {
259
+ var _ref11 = item || {},
260
+ _ref11$inWebView = _ref11.inWebView,
261
+ inWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
262
+ _ref11$url = _ref11.url,
263
+ url = _ref11$url === void 0 ? null : _ref11$url;
230
264
  e.stopPropagation();
265
+ trackScreenEvent('click_item', item);
266
+ if (inWebView && url !== null) {
267
+ openWebView({
268
+ url: url
269
+ });
270
+ return;
271
+ }
231
272
  setPopup(item);
232
273
  setShowPopup(1);
233
- trackScreenEvent('click_item', item);
234
274
  }, [setPopup, trackScreenEvent]);
235
275
  var onCloseModal = useCallback(function () {
236
276
  setShowPopup(0);
237
277
  trackScreenEvent('close_modal');
238
278
  }, [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];
279
+ var computePopupProgress = useCallback(function (_ref12) {
280
+ var dragActive = _ref12.active,
281
+ _ref12$movement = _slicedToArray(_ref12.movement, 2),
282
+ my = _ref12$movement[1],
283
+ _ref12$velocity = _slicedToArray(_ref12.velocity, 2),
284
+ vy = _ref12$velocity[1];
245
285
  var damper = 0.5;
246
286
  var p = Math.max(0, my) / window.innerHeight;
247
287
  var progress = p * damper;
@@ -267,49 +307,67 @@ var KeypadScreen = function KeypadScreen(_ref) {
267
307
  }),
268
308
  bindPopupDrag = _useDragProgress.bind,
269
309
  popupSpring = _useDragProgress.progress;
310
+ useEffect(function () {
311
+ var keyup = function keyup(e) {
312
+ if (e.key === 'Escape') {
313
+ if (showPopup === 1) {
314
+ onCloseModal();
315
+ }
316
+ }
317
+ };
318
+ document.addEventListener('keyup', keyup);
319
+ return function () {
320
+ document.removeEventListener('keyup', keyup);
321
+ };
322
+ }, [showPopup, onCloseModal]);
270
323
  var gridItems = useMemo(function () {
271
324
  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;
325
+ var _ref17;
326
+ var _ref13 = item || {},
327
+ _ref13$id = _ref13.id,
328
+ id = _ref13$id === void 0 ? null : _ref13$id,
329
+ _ref13$label = _ref13.label,
330
+ label = _ref13$label === void 0 ? null : _ref13$label,
331
+ _ref13$visual = _ref13.visual,
332
+ visual = _ref13$visual === void 0 ? null : _ref13$visual,
333
+ _ref13$textStyle = _ref13.textStyle,
334
+ textStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
335
+ _ref13$boxStyle = _ref13.boxStyle,
336
+ boxStyle = _ref13$boxStyle === void 0 ? null : _ref13$boxStyle,
337
+ _ref13$heading = _ref13.heading,
338
+ heading = _ref13$heading === void 0 ? null : _ref13$heading,
339
+ _ref13$content = _ref13.content,
340
+ content = _ref13$content === void 0 ? null : _ref13$content,
341
+ _ref13$url = _ref13.url,
342
+ url = _ref13$url === void 0 ? null : _ref13$url,
343
+ _ref13$inWebView = _ref13.inWebView,
344
+ inWebView = _ref13$inWebView === void 0 ? false : _ref13$inWebView,
345
+ _ref13$largeVisual = _ref13.largeVisual,
346
+ popupLargeVisual = _ref13$largeVisual === void 0 ? null : _ref13$largeVisual;
347
+ var _ref14 = visual || {},
348
+ _ref14$url = _ref14.url,
349
+ visualUrl = _ref14$url === void 0 ? null : _ref14$url;
350
+ var _ref15 = heading || {},
351
+ _ref15$body = _ref15.body,
352
+ headingBody = _ref15$body === void 0 ? null : _ref15$body;
353
+ var _ref16 = content || {},
354
+ _ref16$body = _ref16.body,
355
+ contentBody = _ref16$body === void 0 ? null : _ref16$body;
299
356
  var key = label || visualUrl || id;
300
357
  var isEmpty = label === null && visual === null;
358
+ var isExternalLink = url !== null && !inWebView;
301
359
  var isPopupEmpty = (heading === null || headingBody === '') && (content === null || contentBody === '') && popupLargeVisual === null;
302
360
  return /*#__PURE__*/React.createElement("div", {
303
361
  key: key,
304
362
  className: styles.item
305
363
  }, /*#__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)]),
364
+ 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
365
  style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromText(buttonTextStyle)), getStyleFromBox(boxStyle)), getStyleFromText(textStyle)),
308
- onClick: !isPopupEmpty ? function (e) {
366
+ external: isExternalLink,
367
+ href: isExternalLink ? url : null,
368
+ onClick: !isPopupEmpty || !isExternalLink ? function (e) {
309
369
  return onItemClick(e, item);
310
- } : function (e) {
311
- return e.preventDefault();
312
- }
370
+ } : null
313
371
  }, isEmpty && (isInteractivePreview || isPreview) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PlaceholderImage, {
314
372
  className: styles.imagePlaceholder
315
373
  }), /*#__PURE__*/React.createElement(PlaceholderText, {
@@ -346,7 +404,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
346
404
  });
347
405
  }, [items, screenState, keypadSettings]);
348
406
  useEffect(function () {
349
- if (screenState === 'popup') {
407
+ if (screenState === 'popup' && isPlaceholder) {
350
408
  setPopup(placeholderPopupBoxStyles); // @note force placeholder
351
409
  setShowPopup(1);
352
410
  }
@@ -354,7 +412,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
354
412
  setPopup(null);
355
413
  setShowPopup(0);
356
414
  }
357
- if (screenState !== null && screenState.includes('popups')) {
415
+ if (screenState !== null && screenState.includes('popup')) {
358
416
  var index = screenState.split('.').pop();
359
417
  var found = items[index];
360
418
  setShowPopup(1);
@@ -366,7 +424,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
366
424
  }
367
425
  }, [screenState, items]);
368
426
  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)]),
427
+ className: classNames([styles.container, (_ref18 = {}, _defineProperty(_ref18, className, className !== null), _defineProperty(_ref18, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref18, styles.withSquareItems, withSquareItems), _ref18)]),
370
428
  "data-screen-ready": true
371
429
  }, isEdit && screenState !== null ? /*#__PURE__*/React.createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
372
430
  background: background,
@@ -382,6 +440,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
382
440
  width: width,
383
441
  height: height,
384
442
  className: styles.inner
443
+ }, /*#__PURE__*/React.createElement(Scroll, {
444
+ width: width,
445
+ height: height,
446
+ verticalAlign: layout,
447
+ disabled: isPreview || isPlaceholder || isEdit || showPopup !== 0
385
448
  }, /*#__PURE__*/React.createElement(Layout, {
386
449
  className: styles.layout,
387
450
  verticalAlign: layout,
@@ -390,13 +453,28 @@ var KeypadScreen = function KeypadScreen(_ref) {
390
453
  paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
391
454
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
392
455
  } : null
393
- }, /*#__PURE__*/React.createElement(Keypad$1, {
456
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
457
+ key: "header",
458
+ style: {
459
+ paddingBottom: spacing
460
+ }
461
+ }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Keypad$1, {
394
462
  className: classNames([styles.grid, _defineProperty({}, styles.gridPlaceholder, isPlaceholder)]),
395
463
  align: columnAlign,
396
464
  columns: isPlaceholder ? 3 : columns,
397
465
  spacing: isPlaceholder ? 2 : columnSpacing,
398
466
  items: gridItems
399
- })), /*#__PURE__*/React.createElement(animated.div, {
467
+ }), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
468
+ key: "footer",
469
+ className: styles.footer,
470
+ style: {
471
+ transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
472
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
473
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
474
+ paddingBottom: spacing / 2,
475
+ paddingTop: 0
476
+ }
477
+ }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), /*#__PURE__*/React.createElement(animated.div, {
400
478
  className: classNames([styles.popupBackdrop]),
401
479
  style: {
402
480
  opacity: popupSpring.to(function (p) {
@@ -421,20 +499,26 @@ var KeypadScreen = function KeypadScreen(_ref) {
421
499
  return p < 0.1 ? 'none' : 'auto';
422
500
  })
423
501
  }
424
- }, bindPopupDrag()), /*#__PURE__*/React.createElement(Scroll, null, /*#__PURE__*/React.createElement("button", {
425
- type: "button",
426
- className: styles.popupButton,
502
+ }, bindPopupDrag(), {
427
503
  onClick: function onClick() {
428
504
  if (onCloseModal !== null) {
429
505
  onCloseModal();
430
506
  }
431
507
  }
508
+ }), /*#__PURE__*/React.createElement(Scroll, {
509
+ disabled: isPreview || isPlaceholder || isEdit,
510
+ verticalAlign: "middle",
511
+ withArrow: false,
512
+ withShadow: true
513
+ }, /*#__PURE__*/React.createElement("button", {
514
+ type: "button",
515
+ className: styles.popupButton
432
516
  }, /*#__PURE__*/React.createElement("div", {
433
517
  className: classNames([styles.popupInner, styles[popupLayoutClassName]]),
434
518
  style: _objectSpread(_objectSpread({}, getStyleFromBox(placeholderPopupBoxStyles)), getStyleFromBox(popupBoxStyle))
435
519
  }, /*#__PURE__*/React.createElement("div", {
436
520
  className: styles.popupWrapper
437
- }, !isInteractivePreview || popupHeading !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
521
+ }, /*#__PURE__*/React.createElement(ScreenElement, {
438
522
  placeholder: "popupHeading",
439
523
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
440
524
  id: "IE7U/Q",
@@ -444,13 +528,12 @@ var KeypadScreen = function KeypadScreen(_ref) {
444
528
  }]
445
529
  }),
446
530
  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"
531
+ isEmpty: !hasPopupHeading
532
+ }, hasPopupHeading ? /*#__PURE__*/React.createElement(Heading, Object.assign({
533
+ className: styles.popupHeading
451
534
  }, popupHeading, {
452
535
  textStyle: _objectSpread(_objectSpread({}, headingTextStyle), popupHeadingTextStyle)
453
- }))) : null, !isInteractivePreview || popupContent !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
536
+ })) : null), /*#__PURE__*/React.createElement(ScreenElement, {
454
537
  placeholder: "popupContent",
455
538
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
456
539
  id: "JRZoe6",
@@ -460,14 +543,13 @@ var KeypadScreen = function KeypadScreen(_ref) {
460
543
  }]
461
544
  }),
462
545
  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."
546
+ isEmpty: !hasPopupContent
547
+ }, hasPopupContent ? /*#__PURE__*/React.createElement(Text, Object.assign({
548
+ className: styles.popupContent
467
549
  }, popupContent, {
468
550
  textStyle: _objectSpread(_objectSpread({}, contentTextStyle), popupContentTextStyle)
469
- }))) : null, !isInteractivePreview || largeVisual !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
470
- placeholder: "popupVisual",
551
+ })) : null), largeVisual !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
552
+ placeholder: "image",
471
553
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
472
554
  id: "z4Pr+g",
473
555
  defaultMessage: [{
@@ -481,9 +563,27 @@ var KeypadScreen = function KeypadScreen(_ref) {
481
563
  className: styles.popupVisual,
482
564
  media: largeVisual,
483
565
  width: "100%"
484
- })) : null, largeVisual === null && isPreview ? /*#__PURE__*/React.createElement(PlaceholderImage, {
485
- className: styles.popupVisual
486
- }) : null)))))));
566
+ })) : null, /*#__PURE__*/React.createElement(ScreenElement, {
567
+ placeholder: "button",
568
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
569
+ id: "N7Kj8z",
570
+ defaultMessage: [{
571
+ "type": 0,
572
+ "value": "Button"
573
+ }]
574
+ }),
575
+ emptyClassName: classNames([styles.empty]),
576
+ isEmpty: popupButton === null
577
+ }, popupButton !== null ? /*#__PURE__*/React.createElement(CallToAction, {
578
+ className: styles.popupCTA,
579
+ label: buttonLabel,
580
+ url: buttonUrl,
581
+ inWebView: popupInWebView,
582
+ openWebView: openWebView,
583
+ type: "click",
584
+ boxStyle: popupButtonBoxStyle,
585
+ style: _objectSpread({}, getStyleFromBox(popupButtonBoxStyle))
586
+ }) : null)))))))));
487
587
  };
488
588
  KeypadScreen.propTypes = propTypes;
489
589
  KeypadScreen.defaultProps = defaultProps;
@@ -521,6 +621,42 @@ var definition = [{
521
621
  }]
522
622
  }),
523
623
  fields: [{
624
+ name: 'layout',
625
+ type: 'screen-layout',
626
+ defaultValue: 'middle',
627
+ label: defineMessage({
628
+ id: "4iBXj2",
629
+ defaultMessage: [{
630
+ "type": 0,
631
+ "value": "Layout"
632
+ }]
633
+ })
634
+ }, {
635
+ name: 'keypadSettings',
636
+ type: 'fields',
637
+ isList: false,
638
+ withoutLabel: true,
639
+ defaultValue: {
640
+ layout: {
641
+ columnAlign: 'middle',
642
+ columns: 3,
643
+ spacing: 2,
644
+ withSquareItems: false
645
+ }
646
+ },
647
+ label: defineMessage({
648
+ id: "FjuRaw",
649
+ defaultMessage: [{
650
+ "type": 0,
651
+ "value": "Keypad settings"
652
+ }]
653
+ }),
654
+ fields: [{
655
+ name: 'layout',
656
+ type: 'keypad-layout',
657
+ isList: true
658
+ }]
659
+ }, {
524
660
  name: 'items',
525
661
  type: 'buttons',
526
662
  label: defineMessage({
@@ -583,12 +719,12 @@ var definition = [{
583
719
  }]
584
720
  }]
585
721
  }, {
586
- id: 'popup',
722
+ id: 'popups',
587
723
  label: defineMessage({
588
- id: "mBYGpP",
724
+ id: "FYm4w+",
589
725
  defaultMessage: [{
590
726
  "type": 0,
591
- "value": "Popup"
727
+ "value": "Popups"
592
728
  }]
593
729
  }),
594
730
  fields: [{
@@ -651,12 +787,12 @@ var definition = [{
651
787
  }]
652
788
  }]
653
789
  }, {
654
- id: 'popups',
790
+ id: 'popup',
655
791
  label: defineMessage({
656
- id: "Hyqnww",
792
+ id: "sSahY1",
657
793
  defaultMessage: [{
658
794
  "type": 0,
659
- "value": "Popups"
795
+ "value": "Popup"
660
796
  }]
661
797
  }),
662
798
  defaultValue: [],
@@ -692,51 +828,46 @@ var definition = [{
692
828
  "value": "Visual"
693
829
  }]
694
830
  })
831
+ }, {
832
+ name: 'button',
833
+ type: 'button-link',
834
+ label: defineMessage({
835
+ id: "i6bmbD",
836
+ defaultMessage: [{
837
+ "type": 0,
838
+ "value": "Button"
839
+ }]
840
+ })
695
841
  }]
696
842
  }],
697
843
  fields: [{
698
- name: 'layout',
699
- type: 'screen-layout',
700
- defaultValue: 'middle',
844
+ name: 'background',
845
+ type: 'background',
701
846
  label: defineMessage({
702
- id: "4iBXj2",
847
+ id: "+MPZRu",
703
848
  defaultMessage: [{
704
849
  "type": 0,
705
- "value": "Layout"
850
+ "value": "Background"
706
851
  }]
707
852
  })
708
853
  }, {
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
- },
854
+ name: 'header',
855
+ type: 'header',
721
856
  label: defineMessage({
722
- id: "FjuRaw",
857
+ id: "rhuDxI",
723
858
  defaultMessage: [{
724
859
  "type": 0,
725
- "value": "Keypad settings"
860
+ "value": "Header"
726
861
  }]
727
- }),
728
- fields: [{
729
- name: 'layout',
730
- type: 'keypad-layout-form'
731
- }]
862
+ })
732
863
  }, {
733
- name: 'background',
734
- type: 'background',
864
+ name: 'footer',
865
+ type: 'footer',
735
866
  label: defineMessage({
736
- id: "+MPZRu",
867
+ id: "g4nybp",
737
868
  defaultMessage: [{
738
869
  "type": 0,
739
- "value": "Background"
870
+ "value": "Footer"
740
871
  }]
741
872
  })
742
873
  }]
package/lib/index.js CHANGED
@@ -18,7 +18,10 @@ 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');
23
+ var Footer = require('@micromag/element-footer');
24
+ var Header = require('@micromag/element-header');
22
25
  var Heading = require('@micromag/element-heading');
23
26
  var Keypad$1 = require('@micromag/element-keypad');
24
27
  var Layout = require('@micromag/element-layout');
@@ -37,7 +40,10 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
37
40
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
38
41
  var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
39
42
  var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
43
+ var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
40
44
  var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
45
+ var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
46
+ var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
41
47
  var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
42
48
  var Keypad__default = /*#__PURE__*/_interopDefaultLegacy(Keypad$1);
43
49
  var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
@@ -45,7 +51,7 @@ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
45
51
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
46
52
  var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
47
53
 
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"};
54
+ 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","header":"micromag-screen-keypad-header","footer":"micromag-screen-keypad-footer","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
55
 
50
56
  var placeholders = [{
51
57
  id: '1'
@@ -137,6 +143,8 @@ var propTypes = {
137
143
  contentTextStyle: core.PropTypes.textStyle,
138
144
  boxStyle: core.PropTypes.boxStyle
139
145
  }),
146
+ header: core.PropTypes.header,
147
+ footer: core.PropTypes.footer,
140
148
  background: core.PropTypes.backgroundElement,
141
149
  current: PropTypes__default["default"].bool,
142
150
  active: PropTypes__default["default"].bool,
@@ -149,19 +157,23 @@ var defaultProps = {
149
157
  keypadSettings: null,
150
158
  buttonStyles: null,
151
159
  popupStyles: null,
160
+ header: null,
161
+ footer: null,
152
162
  background: null,
153
163
  current: true,
154
164
  active: true,
155
165
  className: null
156
166
  };
157
167
  var KeypadScreen = function KeypadScreen(_ref) {
158
- var _ref16;
168
+ var _ref18;
159
169
  var items = _ref.items,
160
170
  layout = _ref.layout,
161
171
  spacing = _ref.spacing,
162
172
  keypadSettings = _ref.keypadSettings,
163
173
  buttonStyles = _ref.buttonStyles,
164
174
  popupStyles = _ref.popupStyles,
175
+ header = _ref.header,
176
+ footer = _ref.footer,
165
177
  background = _ref.background,
166
178
  current = _ref.current,
167
179
  active = _ref.active,
@@ -170,19 +182,30 @@ var KeypadScreen = function KeypadScreen(_ref) {
170
182
  var _usePlaybackContext = contexts.usePlaybackContext(),
171
183
  muted = _usePlaybackContext.muted;
172
184
  var mediaRef = contexts.usePlaybackMediaRef(current);
185
+ var screenState = contexts.useScreenState();
173
186
  var _useScreenSize = contexts.useScreenSize(),
174
187
  width = _useScreenSize.width,
175
188
  height = _useScreenSize.height,
176
189
  resolution = _useScreenSize.resolution;
177
190
  var _useViewerContext = contexts.useViewerContext(),
178
191
  viewerTopHeight = _useViewerContext.topHeight,
179
- viewerBottomHeight = _useViewerContext.bottomHeight;
192
+ viewerBottomHeight = _useViewerContext.bottomHeight,
193
+ viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
194
+ var _useViewerWebView = contexts.useViewerWebView(),
195
+ openWebView = _useViewerWebView.open;
180
196
  var _useScreenRenderConte = contexts.useScreenRenderContext(),
181
197
  isView = _useScreenRenderConte.isView,
182
198
  isPreview = _useScreenRenderConte.isPreview,
183
199
  isPlaceholder = _useScreenRenderConte.isPlaceholder,
184
200
  isEdit = _useScreenRenderConte.isEdit;
185
- var screenState = contexts.useScreenState();
201
+ var hasHeader = utils.isHeaderFilled(header);
202
+ var hasFooter = utils.isFooterFilled(footer);
203
+ var footerProps = utils.getFooterProps(footer, {
204
+ isView: isView,
205
+ current: current,
206
+ openWebView: openWebView,
207
+ isPreview: isPreview
208
+ });
186
209
  var backgroundPlaying = current && (isView || isEdit);
187
210
  var mediaShouldLoad = !isPlaceholder && (current || active);
188
211
  var isInteractivePreview = isEdit && screenState === null;
@@ -233,15 +256,15 @@ var KeypadScreen = function KeypadScreen(_ref) {
233
256
  _ref6$content = _ref6.content,
234
257
  popupContent = _ref6$content === void 0 ? null : _ref6$content,
235
258
  _ref6$largeVisual = _ref6.largeVisual,
236
- largeVisual = _ref6$largeVisual === void 0 ? null : _ref6$largeVisual;
259
+ largeVisual = _ref6$largeVisual === void 0 ? null : _ref6$largeVisual,
260
+ _ref6$button = _ref6.button,
261
+ popupButton = _ref6$button === void 0 ? null : _ref6$button;
262
+ var hasPopupHeading = utils.isTextFilled(popupHeading);
237
263
  var _ref7 = popupHeading || {},
238
- _ref7$body = _ref7.body,
239
- popupHeadingBody = _ref7$body === void 0 ? null : _ref7$body,
240
264
  _ref7$textStyle = _ref7.textStyle,
241
265
  popupHeadingTextStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
266
+ var hasPopupContent = utils.isTextFilled(popupContent);
242
267
  var _ref8 = popupContent || {},
243
- _ref8$body = _ref8.body,
244
- popupContentBody = _ref8$body === void 0 ? null : _ref8$body,
245
268
  _ref8$textStyle = _ref8.textStyle,
246
269
  popupContentTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
247
270
  var _ref9 = popupBackdrop || {},
@@ -249,22 +272,42 @@ var KeypadScreen = function KeypadScreen(_ref) {
249
272
  backdropColor = _ref9$color === void 0 ? null : _ref9$color,
250
273
  _ref9$image = _ref9.image,
251
274
  backdropMedia = _ref9$image === void 0 ? null : _ref9$image;
275
+ var _ref10 = popupButton || {},
276
+ _ref10$label = _ref10.label,
277
+ buttonLabel = _ref10$label === void 0 ? null : _ref10$label,
278
+ _ref10$url = _ref10.url,
279
+ buttonUrl = _ref10$url === void 0 ? null : _ref10$url,
280
+ _ref10$inWebView = _ref10.inWebView,
281
+ popupInWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
282
+ _ref10$boxStyle = _ref10.boxStyle,
283
+ popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
252
284
  var onItemClick = React.useCallback(function (e, item) {
285
+ var _ref11 = item || {},
286
+ _ref11$inWebView = _ref11.inWebView,
287
+ inWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
288
+ _ref11$url = _ref11.url,
289
+ url = _ref11$url === void 0 ? null : _ref11$url;
253
290
  e.stopPropagation();
291
+ trackScreenEvent('click_item', item);
292
+ if (inWebView && url !== null) {
293
+ openWebView({
294
+ url: url
295
+ });
296
+ return;
297
+ }
254
298
  setPopup(item);
255
299
  setShowPopup(1);
256
- trackScreenEvent('click_item', item);
257
300
  }, [setPopup, trackScreenEvent]);
258
301
  var onCloseModal = React.useCallback(function () {
259
302
  setShowPopup(0);
260
303
  trackScreenEvent('close_modal');
261
304
  }, [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];
305
+ var computePopupProgress = React.useCallback(function (_ref12) {
306
+ var dragActive = _ref12.active,
307
+ _ref12$movement = _slicedToArray__default["default"](_ref12.movement, 2),
308
+ my = _ref12$movement[1],
309
+ _ref12$velocity = _slicedToArray__default["default"](_ref12.velocity, 2),
310
+ vy = _ref12$velocity[1];
268
311
  var damper = 0.5;
269
312
  var p = Math.max(0, my) / window.innerHeight;
270
313
  var progress = p * damper;
@@ -290,49 +333,67 @@ var KeypadScreen = function KeypadScreen(_ref) {
290
333
  }),
291
334
  bindPopupDrag = _useDragProgress.bind,
292
335
  popupSpring = _useDragProgress.progress;
336
+ React.useEffect(function () {
337
+ var keyup = function keyup(e) {
338
+ if (e.key === 'Escape') {
339
+ if (showPopup === 1) {
340
+ onCloseModal();
341
+ }
342
+ }
343
+ };
344
+ document.addEventListener('keyup', keyup);
345
+ return function () {
346
+ document.removeEventListener('keyup', keyup);
347
+ };
348
+ }, [showPopup, onCloseModal]);
293
349
  var gridItems = React.useMemo(function () {
294
350
  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;
351
+ var _ref17;
352
+ var _ref13 = item || {},
353
+ _ref13$id = _ref13.id,
354
+ id = _ref13$id === void 0 ? null : _ref13$id,
355
+ _ref13$label = _ref13.label,
356
+ label = _ref13$label === void 0 ? null : _ref13$label,
357
+ _ref13$visual = _ref13.visual,
358
+ visual = _ref13$visual === void 0 ? null : _ref13$visual,
359
+ _ref13$textStyle = _ref13.textStyle,
360
+ textStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
361
+ _ref13$boxStyle = _ref13.boxStyle,
362
+ boxStyle = _ref13$boxStyle === void 0 ? null : _ref13$boxStyle,
363
+ _ref13$heading = _ref13.heading,
364
+ heading = _ref13$heading === void 0 ? null : _ref13$heading,
365
+ _ref13$content = _ref13.content,
366
+ content = _ref13$content === void 0 ? null : _ref13$content,
367
+ _ref13$url = _ref13.url,
368
+ url = _ref13$url === void 0 ? null : _ref13$url,
369
+ _ref13$inWebView = _ref13.inWebView,
370
+ inWebView = _ref13$inWebView === void 0 ? false : _ref13$inWebView,
371
+ _ref13$largeVisual = _ref13.largeVisual,
372
+ popupLargeVisual = _ref13$largeVisual === void 0 ? null : _ref13$largeVisual;
373
+ var _ref14 = visual || {},
374
+ _ref14$url = _ref14.url,
375
+ visualUrl = _ref14$url === void 0 ? null : _ref14$url;
376
+ var _ref15 = heading || {},
377
+ _ref15$body = _ref15.body,
378
+ headingBody = _ref15$body === void 0 ? null : _ref15$body;
379
+ var _ref16 = content || {},
380
+ _ref16$body = _ref16.body,
381
+ contentBody = _ref16$body === void 0 ? null : _ref16$body;
322
382
  var key = label || visualUrl || id;
323
383
  var isEmpty = label === null && visual === null;
384
+ var isExternalLink = url !== null && !inWebView;
324
385
  var isPopupEmpty = (heading === null || headingBody === '') && (content === null || contentBody === '') && popupLargeVisual === null;
325
386
  return /*#__PURE__*/React__default["default"].createElement("div", {
326
387
  key: key,
327
388
  className: styles.item
328
389
  }, /*#__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)]),
390
+ 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
391
  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) {
392
+ external: isExternalLink,
393
+ href: isExternalLink ? url : null,
394
+ onClick: !isPopupEmpty || !isExternalLink ? function (e) {
332
395
  return onItemClick(e, item);
333
- } : function (e) {
334
- return e.preventDefault();
335
- }
396
+ } : null
336
397
  }, isEmpty && (isInteractivePreview || isPreview) ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(components.PlaceholderImage, {
337
398
  className: styles.imagePlaceholder
338
399
  }), /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
@@ -369,7 +430,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
369
430
  });
370
431
  }, [items, screenState, keypadSettings]);
371
432
  React.useEffect(function () {
372
- if (screenState === 'popup') {
433
+ if (screenState === 'popup' && isPlaceholder) {
373
434
  setPopup(placeholderPopupBoxStyles); // @note force placeholder
374
435
  setShowPopup(1);
375
436
  }
@@ -377,7 +438,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
377
438
  setPopup(null);
378
439
  setShowPopup(0);
379
440
  }
380
- if (screenState !== null && screenState.includes('popups')) {
441
+ if (screenState !== null && screenState.includes('popup')) {
381
442
  var index = screenState.split('.').pop();
382
443
  var found = items[index];
383
444
  setShowPopup(1);
@@ -389,7 +450,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
389
450
  }
390
451
  }, [screenState, items]);
391
452
  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)]),
453
+ 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
454
  "data-screen-ready": true
394
455
  }, isEdit && screenState !== null ? /*#__PURE__*/React__default["default"].createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
395
456
  background: background,
@@ -405,6 +466,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
405
466
  width: width,
406
467
  height: height,
407
468
  className: styles.inner
469
+ }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
470
+ width: width,
471
+ height: height,
472
+ verticalAlign: layout,
473
+ disabled: isPreview || isPlaceholder || isEdit || showPopup !== 0
408
474
  }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
409
475
  className: styles.layout,
410
476
  verticalAlign: layout,
@@ -413,13 +479,28 @@ var KeypadScreen = function KeypadScreen(_ref) {
413
479
  paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
414
480
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
415
481
  } : null
416
- }, /*#__PURE__*/React__default["default"].createElement(Keypad__default["default"], {
482
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
483
+ key: "header",
484
+ style: {
485
+ paddingBottom: spacing
486
+ }
487
+ }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(Keypad__default["default"], {
417
488
  className: classNames__default["default"]([styles.grid, _defineProperty__default["default"]({}, styles.gridPlaceholder, isPlaceholder)]),
418
489
  align: columnAlign,
419
490
  columns: isPlaceholder ? 3 : columns,
420
491
  spacing: isPlaceholder ? 2 : columnSpacing,
421
492
  items: gridItems
422
- })), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
493
+ }), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
494
+ key: "footer",
495
+ className: styles.footer,
496
+ style: {
497
+ transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
498
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
499
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
500
+ paddingBottom: spacing / 2,
501
+ paddingTop: 0
502
+ }
503
+ }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
423
504
  className: classNames__default["default"]([styles.popupBackdrop]),
424
505
  style: {
425
506
  opacity: popupSpring.to(function (p) {
@@ -444,20 +525,26 @@ var KeypadScreen = function KeypadScreen(_ref) {
444
525
  return p < 0.1 ? 'none' : 'auto';
445
526
  })
446
527
  }
447
- }, bindPopupDrag()), /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], null, /*#__PURE__*/React__default["default"].createElement("button", {
448
- type: "button",
449
- className: styles.popupButton,
528
+ }, bindPopupDrag(), {
450
529
  onClick: function onClick() {
451
530
  if (onCloseModal !== null) {
452
531
  onCloseModal();
453
532
  }
454
533
  }
534
+ }), /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
535
+ disabled: isPreview || isPlaceholder || isEdit,
536
+ verticalAlign: "middle",
537
+ withArrow: false,
538
+ withShadow: true
539
+ }, /*#__PURE__*/React__default["default"].createElement("button", {
540
+ type: "button",
541
+ className: styles.popupButton
455
542
  }, /*#__PURE__*/React__default["default"].createElement("div", {
456
543
  className: classNames__default["default"]([styles.popupInner, styles[popupLayoutClassName]]),
457
544
  style: _objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(placeholderPopupBoxStyles)), utils.getStyleFromBox(popupBoxStyle))
458
545
  }, /*#__PURE__*/React__default["default"].createElement("div", {
459
546
  className: styles.popupWrapper
460
- }, !isInteractivePreview || popupHeading !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
547
+ }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
461
548
  placeholder: "popupHeading",
462
549
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
463
550
  id: "IE7U/Q",
@@ -467,13 +554,12 @@ var KeypadScreen = function KeypadScreen(_ref) {
467
554
  }]
468
555
  }),
469
556
  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"
557
+ isEmpty: !hasPopupHeading
558
+ }, hasPopupHeading ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
559
+ className: styles.popupHeading
474
560
  }, popupHeading, {
475
561
  textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, headingTextStyle), popupHeadingTextStyle)
476
- }))) : null, !isInteractivePreview || popupContent !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
562
+ })) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
477
563
  placeholder: "popupContent",
478
564
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
479
565
  id: "JRZoe6",
@@ -483,14 +569,13 @@ var KeypadScreen = function KeypadScreen(_ref) {
483
569
  }]
484
570
  }),
485
571
  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."
572
+ isEmpty: !hasPopupContent
573
+ }, hasPopupContent ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
574
+ className: styles.popupContent
490
575
  }, popupContent, {
491
576
  textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, contentTextStyle), popupContentTextStyle)
492
- }))) : null, !isInteractivePreview || largeVisual !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
493
- placeholder: "popupVisual",
577
+ })) : null), largeVisual !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
578
+ placeholder: "image",
494
579
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
495
580
  id: "z4Pr+g",
496
581
  defaultMessage: [{
@@ -504,9 +589,27 @@ var KeypadScreen = function KeypadScreen(_ref) {
504
589
  className: styles.popupVisual,
505
590
  media: largeVisual,
506
591
  width: "100%"
507
- })) : null, largeVisual === null && isPreview ? /*#__PURE__*/React__default["default"].createElement(components.PlaceholderImage, {
508
- className: styles.popupVisual
509
- }) : null)))))));
592
+ })) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
593
+ placeholder: "button",
594
+ emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
595
+ id: "N7Kj8z",
596
+ defaultMessage: [{
597
+ "type": 0,
598
+ "value": "Button"
599
+ }]
600
+ }),
601
+ emptyClassName: classNames__default["default"]([styles.empty]),
602
+ isEmpty: popupButton === null
603
+ }, popupButton !== null ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
604
+ className: styles.popupCTA,
605
+ label: buttonLabel,
606
+ url: buttonUrl,
607
+ inWebView: popupInWebView,
608
+ openWebView: openWebView,
609
+ type: "click",
610
+ boxStyle: popupButtonBoxStyle,
611
+ style: _objectSpread__default["default"]({}, utils.getStyleFromBox(popupButtonBoxStyle))
612
+ }) : null)))))))));
510
613
  };
511
614
  KeypadScreen.propTypes = propTypes;
512
615
  KeypadScreen.defaultProps = defaultProps;
@@ -544,6 +647,42 @@ var definition = [{
544
647
  }]
545
648
  }),
546
649
  fields: [{
650
+ name: 'layout',
651
+ type: 'screen-layout',
652
+ defaultValue: 'middle',
653
+ label: reactIntl.defineMessage({
654
+ id: "4iBXj2",
655
+ defaultMessage: [{
656
+ "type": 0,
657
+ "value": "Layout"
658
+ }]
659
+ })
660
+ }, {
661
+ name: 'keypadSettings',
662
+ type: 'fields',
663
+ isList: false,
664
+ withoutLabel: true,
665
+ defaultValue: {
666
+ layout: {
667
+ columnAlign: 'middle',
668
+ columns: 3,
669
+ spacing: 2,
670
+ withSquareItems: false
671
+ }
672
+ },
673
+ label: reactIntl.defineMessage({
674
+ id: "FjuRaw",
675
+ defaultMessage: [{
676
+ "type": 0,
677
+ "value": "Keypad settings"
678
+ }]
679
+ }),
680
+ fields: [{
681
+ name: 'layout',
682
+ type: 'keypad-layout',
683
+ isList: true
684
+ }]
685
+ }, {
547
686
  name: 'items',
548
687
  type: 'buttons',
549
688
  label: reactIntl.defineMessage({
@@ -606,12 +745,12 @@ var definition = [{
606
745
  }]
607
746
  }]
608
747
  }, {
609
- id: 'popup',
748
+ id: 'popups',
610
749
  label: reactIntl.defineMessage({
611
- id: "mBYGpP",
750
+ id: "FYm4w+",
612
751
  defaultMessage: [{
613
752
  "type": 0,
614
- "value": "Popup"
753
+ "value": "Popups"
615
754
  }]
616
755
  }),
617
756
  fields: [{
@@ -674,12 +813,12 @@ var definition = [{
674
813
  }]
675
814
  }]
676
815
  }, {
677
- id: 'popups',
816
+ id: 'popup',
678
817
  label: reactIntl.defineMessage({
679
- id: "Hyqnww",
818
+ id: "sSahY1",
680
819
  defaultMessage: [{
681
820
  "type": 0,
682
- "value": "Popups"
821
+ "value": "Popup"
683
822
  }]
684
823
  }),
685
824
  defaultValue: [],
@@ -715,51 +854,46 @@ var definition = [{
715
854
  "value": "Visual"
716
855
  }]
717
856
  })
857
+ }, {
858
+ name: 'button',
859
+ type: 'button-link',
860
+ label: reactIntl.defineMessage({
861
+ id: "i6bmbD",
862
+ defaultMessage: [{
863
+ "type": 0,
864
+ "value": "Button"
865
+ }]
866
+ })
718
867
  }]
719
868
  }],
720
869
  fields: [{
721
- name: 'layout',
722
- type: 'screen-layout',
723
- defaultValue: 'middle',
870
+ name: 'background',
871
+ type: 'background',
724
872
  label: reactIntl.defineMessage({
725
- id: "4iBXj2",
873
+ id: "+MPZRu",
726
874
  defaultMessage: [{
727
875
  "type": 0,
728
- "value": "Layout"
876
+ "value": "Background"
729
877
  }]
730
878
  })
731
879
  }, {
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
- },
880
+ name: 'header',
881
+ type: 'header',
744
882
  label: reactIntl.defineMessage({
745
- id: "FjuRaw",
883
+ id: "rhuDxI",
746
884
  defaultMessage: [{
747
885
  "type": 0,
748
- "value": "Keypad settings"
886
+ "value": "Header"
749
887
  }]
750
- }),
751
- fields: [{
752
- name: 'layout',
753
- type: 'keypad-layout-form'
754
- }]
888
+ })
755
889
  }, {
756
- name: 'background',
757
- type: 'background',
890
+ name: 'footer',
891
+ type: 'footer',
758
892
  label: reactIntl.defineMessage({
759
- id: "+MPZRu",
893
+ id: "g4nybp",
760
894
  defaultMessage: [{
761
895
  "type": 0,
762
- "value": "Background"
896
+ "value": "Footer"
763
897
  }]
764
898
  })
765
899
  }]
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.354",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -54,20 +54,22 @@
54
54
  },
55
55
  "dependencies": {
56
56
  "@babel/runtime": "^7.13.10",
57
- "@micromag/core": "^0.3.348",
58
- "@micromag/element-background": "^0.3.348",
59
- "@micromag/element-button": "^0.3.348",
60
- "@micromag/element-call-to-action": "^0.3.348",
61
- "@micromag/element-container": "^0.3.348",
62
- "@micromag/element-grid": "^0.3.348",
63
- "@micromag/element-heading": "^0.3.348",
64
- "@micromag/element-keypad": "^0.3.348",
65
- "@micromag/element-layout": "^0.3.348",
66
- "@micromag/element-scroll": "^0.3.348",
67
- "@micromag/element-text": "^0.3.348",
68
- "@micromag/element-urbania-author": "^0.3.348",
69
- "@micromag/element-visual": "^0.3.348",
70
- "@micromag/transforms": "^0.3.348",
57
+ "@micromag/core": "^0.3.354",
58
+ "@micromag/element-background": "^0.3.354",
59
+ "@micromag/element-button": "^0.3.354",
60
+ "@micromag/element-call-to-action": "^0.3.354",
61
+ "@micromag/element-container": "^0.3.354",
62
+ "@micromag/element-footer": "^0.3.354",
63
+ "@micromag/element-grid": "^0.3.354",
64
+ "@micromag/element-header": "^0.3.354",
65
+ "@micromag/element-heading": "^0.3.354",
66
+ "@micromag/element-keypad": "^0.3.354",
67
+ "@micromag/element-layout": "^0.3.354",
68
+ "@micromag/element-scroll": "^0.3.354",
69
+ "@micromag/element-text": "^0.3.354",
70
+ "@micromag/element-urbania-author": "^0.3.354",
71
+ "@micromag/element-visual": "^0.3.354",
72
+ "@micromag/transforms": "^0.3.354",
71
73
  "@react-spring/core": "^9.6.1",
72
74
  "@react-spring/web": "^9.6.1",
73
75
  "@use-gesture/react": "^10.2.4",
@@ -82,5 +84,5 @@
82
84
  "publishConfig": {
83
85
  "access": "public"
84
86
  },
85
- "gitHead": "20ef008fdf5c678004b740f395f51cb548591dad"
87
+ "gitHead": "ccf852d0a7df8f222365088e7de3843492e720e7"
86
88
  }