@micromag/screen-keypad 0.3.816 → 0.3.820

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 (3) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +167 -262
  3. package/package.json +18 -18
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-keypad-close,.micromag-screen-keypad-popup,.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;position:relative}.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-close:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.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-fixedHeader{display:-ms-flexbox;display:flex;left:0;position:absolute;right:0;top:0;z-index:50;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end;opacity:0;padding:10px;pointer-events:none;width:100%}.micromag-screen-keypad-fixedHeader.micromag-screen-keypad-open{opacity:1;pointer-events:auto}.micromag-screen-keypad-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-filter:invert(100%);filter:invert(100%);font-weight:700;margin-left:auto}.micromag-screen-keypad-close:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff}.micromag-screen-keypad-closeIcon{border-radius:50%;color:#000;height:25px;padding:0;width:25px}.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{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;height:100%;justify-content:flex-start;text-align:center;-webkit-transition:padding .2s ease-out;transition:padding .2s ease-out}.micromag-screen-keypad-subtitle,.micromag-screen-keypad-title{width:100%}.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:85%}.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{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;font-weight:inherit;height:100%;justify-content:center;overflow:hidden;padding:0;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-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:focus-visible,.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{-webkit-text-decoration:none;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-thumbnail.micromag-screen-keypad-withImageSize{max-height:100%}.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-popupBackdrop{-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(0,0,0,.2);pointer-events:none;z-index:2}.micromag-screen-keypad-popup{height:100%;position:fixed;right:0;top:0;-ms-touch-action:none;touch-action:none;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-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:6}.micromag-screen-keypad-popup:active,.micromag-screen-keypad-popup:hover{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupButton{height:100%;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);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-popupScroll{height:100%;width:100%}.micromag-screen-keypad-popupInner{background-color:#1c1c1c;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:10% 7.5%;overflow:hidden;position:relative;z-index:40}.micromag-screen-keypad-popupInner.micromag-screen-keypad-withShadow{-webkit-box-shadow:0 0 2px #1c1c1c;box-shadow:0 0 2px #1c1c1c}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent p{font-weight:inherit;margin-bottom:0;margin-top:0}.micromag-screen-keypad-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;margin-bottom:.5em;width:100%}.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-contentSplit .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.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-contentBottom .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.micromag-screen-keypad-popupCTA{margin:0 auto;z-index:2}.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;width:100%!important}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{-o-object-fit:cover;object-fit:cover}.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:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75));bottom:0;display:block;height:auto;top:auto;z-index:2}.micromag-screen-keypad-fillImage .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-fillImage .micromag-screen-keypad-emptyButtonVisual{width:100%!important}.micromag-screen-keypad-fillImage .micromag-screen-keypad-thumbnail{-o-object-fit:cover;object-fit:cover;width:100%!important;width:100%}
1
+ .micromag-screen-keypad-close,.micromag-screen-keypad-popup,.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;position:relative}.micromag-screen-keypad-background,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button{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-close:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.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-fixedHeader{display:-ms-flexbox;display:flex;left:0;position:absolute;right:0;top:0;z-index:50;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end;opacity:0;padding:10px;pointer-events:none;width:100%}.micromag-screen-keypad-fixedHeader.micromag-screen-keypad-open{opacity:1;pointer-events:auto}.micromag-screen-keypad-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-filter:invert(100%);filter:invert(100%);font-weight:700;margin-left:auto}.micromag-screen-keypad-close:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff}.micromag-screen-keypad-closeIcon{border-radius:50%;color:#000;height:25px;padding:0;width:25px}.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{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;height:100%;justify-content:flex-start;text-align:center;-webkit-transition:padding .2s ease-out;transition:padding .2s ease-out}.micromag-screen-keypad-subtitle,.micromag-screen-keypad-title{width:100%}.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:85%}.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{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;font-weight:inherit;height:100%;justify-content:center;overflow:hidden;padding:0;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-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:focus-visible,.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{-webkit-text-decoration:none;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-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-popupBackdrop{-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(0,0,0,.2);pointer-events:none;z-index:2}.micromag-screen-keypad-popup{height:100%;position:fixed;right:0;top:0;-ms-touch-action:none;touch-action:none;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-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:6}.micromag-screen-keypad-popup:active,.micromag-screen-keypad-popup:hover{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupButton{height:100%;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);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-popupScroll{height:100%;width:100%}.micromag-screen-keypad-popupInner{background-color:#1c1c1c;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:10% 7.5%;overflow:hidden;position:relative;z-index:40}.micromag-screen-keypad-popupInner.micromag-screen-keypad-withShadow{-webkit-box-shadow:0 0 2px #1c1c1c;box-shadow:0 0 2px #1c1c1c}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent p{font-weight:inherit;margin-bottom:0;margin-top:0}.micromag-screen-keypad-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;margin-bottom:.5em;width:100%}.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-contentSplit .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.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-contentBottom .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.micromag-screen-keypad-popupCTA{margin:0 auto;z-index:2}
package/es/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
2
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
+ import _defineProperty from '@babel/runtime/helpers/defineProperty';
4
4
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
5
  import { animated } from '@react-spring/web';
6
6
  import classNames from 'classnames';
@@ -9,12 +9,12 @@ import isString from 'lodash/isString';
9
9
  import PropTypes from 'prop-types';
10
10
  import React, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
11
11
  import { PropTypes as PropTypes$1 } from '@micromag/core';
12
- import { ScreenElement, PlaceholderButton, Close } from '@micromag/core/components';
12
+ import { Close, ScreenElement } from '@micromag/core/components';
13
13
  import { usePlaybackContext, usePlaybackMediaRef, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useViewerInteraction, useScreenRenderContext } from '@micromag/core/contexts';
14
14
  import { useTrackScreenEvent, useDimensionObserver, useDragProgress } from '@micromag/core/hooks';
15
- import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, camelCase, getStyleFromBox, getStyleFromAlignment } from '@micromag/core/utils';
15
+ import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, camelCase, getStyleFromAlignment, getStyleFromBox } from '@micromag/core/utils';
16
16
  import Background from '@micromag/element-background';
17
- import Button from '@micromag/element-button';
17
+ import Button, { RichButton } from '@micromag/element-button';
18
18
  import CallToAction from '@micromag/element-call-to-action';
19
19
  import Container from '@micromag/element-container';
20
20
  import Footer from '@micromag/element-footer';
@@ -26,7 +26,7 @@ import Scroll from '@micromag/element-scroll';
26
26
  import Text from '@micromag/element-text';
27
27
  import Visual from '@micromag/element-visual';
28
28
 
29
- var styles = {"popupButton":"micromag-screen-keypad-popupButton","popup":"micromag-screen-keypad-popup","close":"micromag-screen-keypad-close","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","fixedHeader":"micromag-screen-keypad-fixedHeader","open":"micromag-screen-keypad-open","closeIcon":"micromag-screen-keypad-closeIcon","header":"micromag-screen-keypad-header","footer":"micromag-screen-keypad-footer","inner":"micromag-screen-keypad-inner","title":"micromag-screen-keypad-title","subtitle":"micromag-screen-keypad-subtitle","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","withImageSize":"micromag-screen-keypad-withImageSize","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popupScroll":"micromag-screen-keypad-popupScroll","popupInner":"micromag-screen-keypad-popupInner","withShadow":"micromag-screen-keypad-withShadow","popupContent":"micromag-screen-keypad-popupContent","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","emptyCTA":"micromag-screen-keypad-emptyCTA","popupCTA":"micromag-screen-keypad-popupCTA","contentBottom":"micromag-screen-keypad-contentBottom","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual","fillImage":"micromag-screen-keypad-fillImage"};
29
+ var styles = {"popupButton":"micromag-screen-keypad-popupButton","popup":"micromag-screen-keypad-popup","close":"micromag-screen-keypad-close","popupBackdrop":"micromag-screen-keypad-popupBackdrop","withSquareItems":"micromag-screen-keypad-withSquareItems","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","fixedHeader":"micromag-screen-keypad-fixedHeader","open":"micromag-screen-keypad-open","closeIcon":"micromag-screen-keypad-closeIcon","header":"micromag-screen-keypad-header","footer":"micromag-screen-keypad-footer","inner":"micromag-screen-keypad-inner","title":"micromag-screen-keypad-title","subtitle":"micromag-screen-keypad-subtitle","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","buttonLabel":"micromag-screen-keypad-buttonLabel","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","popupScroll":"micromag-screen-keypad-popupScroll","popupInner":"micromag-screen-keypad-popupInner","withShadow":"micromag-screen-keypad-withShadow","popupContent":"micromag-screen-keypad-popupContent","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","emptyCTA":"micromag-screen-keypad-emptyCTA","popupCTA":"micromag-screen-keypad-popupCTA","contentBottom":"micromag-screen-keypad-contentBottom"};
30
30
 
31
31
  var placeholders = [{
32
32
  id: '1'
@@ -55,30 +55,6 @@ var placeholderPopupBoxStyles = {
55
55
  bottom: 30
56
56
  }
57
57
  };
58
-
59
- // const stopDragEventsPropagation = {
60
- // onTouchMove: (e) => e.stopPropagation(),
61
- // onTouchStart: (e) => e.stopPropagation(),
62
- // onTouchEnd: (e) => e.stopPropagation(),
63
- // onPointerMove: (e) => e.stopPropagation(),
64
- // onPointerUp: (e) => e.stopPropagation(),
65
- // onPointerDown: (e) => e.stopPropagation(),
66
- // };
67
-
68
- // const mouseBlocker = {
69
- // ...stopDragEventsPropagation,
70
- // onClick: (e) => e.stopPropagation(),
71
- // style: {
72
- // position: 'fixed',
73
- // zIndex: '1000',
74
- // top: 0,
75
- // right: 0,
76
- // bottom: 0,
77
- // left: 0,
78
- // cursor: 'default',
79
- // },
80
- // };
81
-
82
58
  var propTypes = {
83
59
  items: PropTypes.arrayOf(PropTypes.shape({
84
60
  id: PropTypes.string,
@@ -99,12 +75,18 @@ var propTypes = {
99
75
  withSquareItems: PropTypes.bool
100
76
  })
101
77
  }),
78
+ keypadLayout: PropTypes.shape({
79
+ columnAlign: PropTypes.oneOf(['left', 'right', 'middle']),
80
+ columns: PropTypes.number,
81
+ spacing: PropTypes.number,
82
+ withSquareItems: PropTypes.bool
83
+ }),
102
84
  buttonStyles: PropTypes.shape({
103
85
  layout: PropTypes.string,
104
86
  textStyle: PropTypes$1.textStyle,
105
87
  boxStyle: PropTypes$1.boxStyle,
106
88
  fillImage: PropTypes.bool,
107
- alignment: PropTypes$1.alignment
89
+ visualWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
108
90
  }),
109
91
  popupStyles: PropTypes.shape({
110
92
  layout: PropTypes.oneOf(['content-top', 'content-split', 'content-bottom']),
@@ -127,6 +109,7 @@ var defaultProps = {
127
109
  layout: null,
128
110
  spacing: 20,
129
111
  keypadSettings: null,
112
+ keypadLayout: null,
130
113
  buttonStyles: null,
131
114
  popupStyles: null,
132
115
  header: null,
@@ -144,6 +127,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
144
127
  layout = _ref.layout,
145
128
  spacing = _ref.spacing,
146
129
  keypadSettings = _ref.keypadSettings,
130
+ keypadLayout = _ref.keypadLayout,
147
131
  buttonStyles = _ref.buttonStyles,
148
132
  popupStyles = _ref.popupStyles,
149
133
  header = _ref.header,
@@ -208,50 +192,48 @@ var KeypadScreen = function KeypadScreen(_ref) {
208
192
  var isNotInteractive = isEdit && screenState !== null;
209
193
  var _ref3 = keypadSettings || {},
210
194
  _ref3$layout = _ref3.layout,
211
- keypadLayout = _ref3$layout === void 0 ? null : _ref3$layout;
212
- var _ref4 = keypadLayout || {},
195
+ oldLayout = _ref3$layout === void 0 ? null : _ref3$layout;
196
+ var _ref4 = keypadLayout || oldLayout || {},
213
197
  _ref4$columnAlign = _ref4.columnAlign,
214
198
  columnAlign = _ref4$columnAlign === void 0 ? null : _ref4$columnAlign,
215
199
  _ref4$columns = _ref4.columns,
216
200
  columns = _ref4$columns === void 0 ? null : _ref4$columns,
217
201
  _ref4$spacing = _ref4.spacing,
218
202
  columnSpacing = _ref4$spacing === void 0 ? null : _ref4$spacing,
219
- _ref4$image = _ref4.image,
220
- keypadImage = _ref4$image === void 0 ? null : _ref4$image,
221
203
  _ref4$withSquareItems = _ref4.withSquareItems,
222
- withSquareItems = _ref4$withSquareItems === void 0 ? false : _ref4$withSquareItems;
223
- var _ref5 = keypadImage || {},
224
- _ref5$width = _ref5.width,
225
- imageWidth = _ref5$width === void 0 ? null : _ref5$width,
226
- _ref5$height = _ref5.height,
227
- imageHeight = _ref5$height === void 0 ? null : _ref5$height;
228
- var _ref6 = buttonStyles || {},
204
+ withSquareItems = _ref4$withSquareItems === void 0 ? false : _ref4$withSquareItems; // Temp shim backwards compat
205
+
206
+ var _ref5 = buttonStyles || {},
207
+ _ref5$layout = _ref5.layout,
208
+ buttonLayout = _ref5$layout === void 0 ? null : _ref5$layout,
209
+ _ref5$textStyle = _ref5.textStyle,
210
+ buttonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle,
211
+ _ref5$labelBoxStyle = _ref5.labelBoxStyle,
212
+ buttonLabelBoxStyle = _ref5$labelBoxStyle === void 0 ? null : _ref5$labelBoxStyle,
213
+ _ref5$boxStyle = _ref5.boxStyle,
214
+ buttonBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle,
215
+ _ref5$fillImage = _ref5.fillImage,
216
+ fillImage = _ref5$fillImage === void 0 ? false : _ref5$fillImage,
217
+ _ref5$visualWidth = _ref5.visualWidth,
218
+ buttonVisualWidth = _ref5$visualWidth === void 0 ? null : _ref5$visualWidth,
219
+ _ref5$alignment = _ref5.alignment,
220
+ buttonAlignment = _ref5$alignment === void 0 ? null : _ref5$alignment;
221
+ var _ref6 = popupStyles || {},
229
222
  _ref6$layout = _ref6.layout,
230
- buttonLayout = _ref6$layout === void 0 ? null : _ref6$layout,
231
- _ref6$textStyle = _ref6.textStyle,
232
- buttonTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle,
223
+ popupLayout = _ref6$layout === void 0 ? null : _ref6$layout,
224
+ _ref6$headingTextStyl = _ref6.headingTextStyle,
225
+ headingTextStyle = _ref6$headingTextStyl === void 0 ? null : _ref6$headingTextStyl,
226
+ _ref6$contentTextStyl = _ref6.contentTextStyle,
227
+ contentTextStyle = _ref6$contentTextStyl === void 0 ? null : _ref6$contentTextStyl,
228
+ _ref6$button = _ref6.button,
229
+ popupButtons = _ref6$button === void 0 ? null : _ref6$button,
233
230
  _ref6$boxStyle = _ref6.boxStyle,
234
- buttonBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle,
235
- _ref6$fillImage = _ref6.fillImage,
236
- fillImage = _ref6$fillImage === void 0 ? false : _ref6$fillImage,
237
- _ref6$alignment = _ref6.alignment,
238
- buttonAlignment = _ref6$alignment === void 0 ? null : _ref6$alignment;
239
- var _ref7 = popupStyles || {},
240
- _ref7$layout = _ref7.layout,
241
- popupLayout = _ref7$layout === void 0 ? null : _ref7$layout,
242
- _ref7$headingTextStyl = _ref7.headingTextStyle,
243
- headingTextStyle = _ref7$headingTextStyl === void 0 ? null : _ref7$headingTextStyl,
244
- _ref7$contentTextStyl = _ref7.contentTextStyle,
245
- contentTextStyle = _ref7$contentTextStyl === void 0 ? null : _ref7$contentTextStyl,
246
- _ref7$button = _ref7.button,
247
- popupButtons = _ref7$button === void 0 ? null : _ref7$button,
231
+ popupBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
232
+ var _ref7 = popupButtons || {},
233
+ _ref7$buttonTextStyle = _ref7.buttonTextStyle,
234
+ popupButtonsTextStyle = _ref7$buttonTextStyle === void 0 ? null : _ref7$buttonTextStyle,
248
235
  _ref7$boxStyle = _ref7.boxStyle,
249
- popupBoxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle;
250
- var _ref8 = popupButtons || {},
251
- _ref8$buttonTextStyle = _ref8.buttonTextStyle,
252
- popupButtonsTextStyle = _ref8$buttonTextStyle === void 0 ? null : _ref8$buttonTextStyle,
253
- _ref8$boxStyle = _ref8.boxStyle,
254
- popupButtonsBoxStyle = _ref8$boxStyle === void 0 ? null : _ref8$boxStyle;
236
+ popupButtonsBoxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle;
255
237
  var popupLayoutClassName = useMemo(function () {
256
238
  return popupLayout !== null ? camelCase(popupLayout) : '';
257
239
  }, [popupLayout]);
@@ -263,48 +245,48 @@ var KeypadScreen = function KeypadScreen(_ref) {
263
245
  _useState4 = _slicedToArray(_useState3, 2),
264
246
  popup = _useState4[0],
265
247
  setPopup = _useState4[1];
266
- var _ref9 = popup || {},
267
- _ref9$heading = _ref9.heading,
268
- popupHeading = _ref9$heading === void 0 ? null : _ref9$heading,
269
- _ref9$content = _ref9.content,
270
- popupContent = _ref9$content === void 0 ? null : _ref9$content,
271
- _ref9$largeVisual = _ref9.largeVisual,
272
- largeVisual = _ref9$largeVisual === void 0 ? null : _ref9$largeVisual,
273
- _ref9$button = _ref9.button,
274
- popupButton = _ref9$button === void 0 ? null : _ref9$button,
275
- _ref9$popupBoxStyle = _ref9.popupBoxStyle,
276
- singlePopupBoxStyle = _ref9$popupBoxStyle === void 0 ? null : _ref9$popupBoxStyle;
248
+ var _ref8 = popup || {},
249
+ _ref8$heading = _ref8.heading,
250
+ popupHeading = _ref8$heading === void 0 ? null : _ref8$heading,
251
+ _ref8$content = _ref8.content,
252
+ popupContent = _ref8$content === void 0 ? null : _ref8$content,
253
+ _ref8$largeVisual = _ref8.largeVisual,
254
+ largeVisual = _ref8$largeVisual === void 0 ? null : _ref8$largeVisual,
255
+ _ref8$button = _ref8.button,
256
+ popupButton = _ref8$button === void 0 ? null : _ref8$button,
257
+ _ref8$popupBoxStyle = _ref8.popupBoxStyle,
258
+ singlePopupBoxStyle = _ref8$popupBoxStyle === void 0 ? null : _ref8$popupBoxStyle;
277
259
  var hasPopupHeading = isTextFilled(popupHeading);
278
- var _ref0 = popupHeading || {},
279
- _ref0$textStyle = _ref0.textStyle,
280
- popupHeadingTextStyle = _ref0$textStyle === void 0 ? null : _ref0$textStyle;
260
+ var _ref9 = popupHeading || {},
261
+ _ref9$textStyle = _ref9.textStyle,
262
+ popupHeadingTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
281
263
  var hasPopupContent = isTextFilled(popupContent);
282
- var _ref1 = popupContent || {},
283
- _ref1$textStyle = _ref1.textStyle,
284
- popupContentTextStyle = _ref1$textStyle === void 0 ? null : _ref1$textStyle;
285
- var _ref10 = popupButton || {},
286
- _ref10$label = _ref10.label,
287
- buttonLabel = _ref10$label === void 0 ? null : _ref10$label,
288
- _ref10$url = _ref10.url,
289
- buttonUrl = _ref10$url === void 0 ? null : _ref10$url,
290
- _ref10$inWebView = _ref10.inWebView,
291
- popupInWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
292
- _ref10$boxStyle = _ref10.boxStyle,
293
- popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
264
+ var _ref0 = popupContent || {},
265
+ _ref0$textStyle = _ref0.textStyle,
266
+ popupContentTextStyle = _ref0$textStyle === void 0 ? null : _ref0$textStyle;
267
+ var _ref1 = popupButton || {},
268
+ _ref1$label = _ref1.label,
269
+ buttonLabel = _ref1$label === void 0 ? null : _ref1$label,
270
+ _ref1$url = _ref1.url,
271
+ buttonUrl = _ref1$url === void 0 ? null : _ref1$url,
272
+ _ref1$inWebView = _ref1.inWebView,
273
+ popupInWebView = _ref1$inWebView === void 0 ? false : _ref1$inWebView,
274
+ _ref1$boxStyle = _ref1.boxStyle,
275
+ popupButtonBoxStyle = _ref1$boxStyle === void 0 ? null : _ref1$boxStyle;
294
276
  var onItemClick = useCallback(function (e, item, index) {
295
277
  e.stopPropagation();
296
278
  if (isNotInteractive) {
297
279
  return;
298
280
  }
299
- var _ref11 = item || {},
300
- _ref11$label = _ref11.label,
301
- itemLabel = _ref11$label === void 0 ? null : _ref11$label,
302
- _ref11$heading = _ref11.heading,
303
- heading = _ref11$heading === void 0 ? null : _ref11$heading,
304
- _ref11$inWebView = _ref11.inWebView,
305
- inWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
306
- _ref11$url = _ref11.url,
307
- url = _ref11$url === void 0 ? null : _ref11$url;
281
+ var _ref10 = item || {},
282
+ _ref10$label = _ref10.label,
283
+ itemLabel = _ref10$label === void 0 ? null : _ref10$label,
284
+ _ref10$heading = _ref10.heading,
285
+ heading = _ref10$heading === void 0 ? null : _ref10$heading,
286
+ _ref10$inWebView = _ref10.inWebView,
287
+ inWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
288
+ _ref10$url = _ref10.url,
289
+ url = _ref10$url === void 0 ? null : _ref10$url;
308
290
  if (inWebView && url !== null) {
309
291
  openWebView({
310
292
  url: url
@@ -313,9 +295,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
313
295
  setPopup(item);
314
296
  setShowPopup(true);
315
297
  }
316
- var _ref12 = heading || {},
317
- _ref12$body = _ref12.body,
318
- headingBody = _ref12$body === void 0 ? null : _ref12$body;
298
+ var _ref11 = heading || {},
299
+ _ref11$body = _ref11.body,
300
+ headingBody = _ref11$body === void 0 ? null : _ref11$body;
319
301
  var finalLabel = isString(itemLabel) ? itemLabel : (itemLabel || {}).body || null;
320
302
  trackScreenEvent('click_item', ["#".concat(index + 1), finalLabel || headingBody || ''].filter(function (it) {
321
303
  return !isEmpty(it);
@@ -352,21 +334,21 @@ var KeypadScreen = function KeypadScreen(_ref) {
352
334
  _useState6 = _slicedToArray(_useState5, 2),
353
335
  popupDragDirection = _useState6[0],
354
336
  setPopupDragDirection = _useState6[1];
355
- var onPopupScrollHeightChange = useCallback(function (_ref13) {
356
- var _ref13$scrolleeHeight = _ref13.scrolleeHeight,
357
- scrolleeHeight = _ref13$scrolleeHeight === void 0 ? 0 : _ref13$scrolleeHeight;
337
+ var onPopupScrollHeightChange = useCallback(function (_ref12) {
338
+ var _ref12$scrolleeHeight = _ref12.scrolleeHeight,
339
+ scrolleeHeight = _ref12$scrolleeHeight === void 0 ? 0 : _ref12$scrolleeHeight;
358
340
  if (Math.floor(scrolleeHeight) >= Math.floor(height)) {
359
341
  setPopupDragDirection('top');
360
342
  } else {
361
343
  setPopupDragDirection('bottom');
362
344
  }
363
345
  }, [height]);
364
- var computePopupProgress = useCallback(function (_ref14) {
365
- var dragActive = _ref14.active,
366
- _ref14$movement = _slicedToArray(_ref14.movement, 2),
367
- my = _ref14$movement[1],
368
- _ref14$velocity = _slicedToArray(_ref14.velocity, 2),
369
- vy = _ref14$velocity[1];
346
+ var computePopupProgress = useCallback(function (_ref13) {
347
+ var dragActive = _ref13.active,
348
+ _ref13$movement = _slicedToArray(_ref13.movement, 2),
349
+ my = _ref13$movement[1],
350
+ _ref13$velocity = _slicedToArray(_ref13.velocity, 2),
351
+ vy = _ref13$velocity[1];
370
352
  var damper = 0.5;
371
353
  var windowHeight = typeof window !== 'undefined' ? window.innerHeight : 0;
372
354
  var delta = windowHeight > 0 ? Math.abs(my) / windowHeight : 0;
@@ -462,94 +444,68 @@ var KeypadScreen = function KeypadScreen(_ref) {
462
444
  }, [showPopup, onCloseModal]);
463
445
  var gridItems = useMemo(function () {
464
446
  return (items === null || items.length === 0 ? placeholders : items).map(function (item, index) {
465
- var _ref15 = item || {},
466
- _ref15$id = _ref15.id,
467
- id = _ref15$id === void 0 ? null : _ref15$id,
468
- _ref15$label = _ref15.label,
469
- itemLabel = _ref15$label === void 0 ? null : _ref15$label,
470
- _ref15$visual = _ref15.visual,
471
- visual = _ref15$visual === void 0 ? null : _ref15$visual,
472
- _ref15$boxStyle = _ref15.boxStyle,
473
- boxStyle = _ref15$boxStyle === void 0 ? null : _ref15$boxStyle,
474
- _ref15$alignment = _ref15.alignment,
475
- alignment = _ref15$alignment === void 0 ? null : _ref15$alignment,
476
- _ref15$heading = _ref15.heading,
477
- heading = _ref15$heading === void 0 ? null : _ref15$heading,
478
- _ref15$content = _ref15.content,
479
- content = _ref15$content === void 0 ? null : _ref15$content,
447
+ var _ref14 = item || {},
448
+ _ref14$id = _ref14.id,
449
+ id = _ref14$id === void 0 ? null : _ref14$id,
450
+ _ref14$label = _ref14.label,
451
+ itemLabel = _ref14$label === void 0 ? null : _ref14$label,
452
+ _ref14$visual = _ref14.visual,
453
+ visual = _ref14$visual === void 0 ? null : _ref14$visual,
454
+ _ref14$boxStyle = _ref14.boxStyle,
455
+ boxStyle = _ref14$boxStyle === void 0 ? null : _ref14$boxStyle,
456
+ _ref14$alignment = _ref14.alignment,
457
+ alignment = _ref14$alignment === void 0 ? null : _ref14$alignment,
458
+ _ref14$heading = _ref14.heading,
459
+ heading = _ref14$heading === void 0 ? null : _ref14$heading,
460
+ _ref14$content = _ref14.content,
461
+ content = _ref14$content === void 0 ? null : _ref14$content,
462
+ _ref14$url = _ref14.url,
463
+ url = _ref14$url === void 0 ? null : _ref14$url,
464
+ _ref14$inWebView = _ref14.inWebView,
465
+ inWebView = _ref14$inWebView === void 0 ? false : _ref14$inWebView,
466
+ _ref14$largeVisual = _ref14.largeVisual,
467
+ popupLargeVisual = _ref14$largeVisual === void 0 ? null : _ref14$largeVisual;
468
+ var _ref15 = visual || {},
480
469
  _ref15$url = _ref15.url,
481
- url = _ref15$url === void 0 ? null : _ref15$url,
482
- _ref15$inWebView = _ref15.inWebView,
483
- inWebView = _ref15$inWebView === void 0 ? false : _ref15$inWebView,
484
- _ref15$largeVisual = _ref15.largeVisual,
485
- popupLargeVisual = _ref15$largeVisual === void 0 ? null : _ref15$largeVisual;
486
- var _ref16 = visual || {},
487
- _ref16$url = _ref16.url,
488
- visualUrl = _ref16$url === void 0 ? null : _ref16$url;
489
- var _ref17 = heading || {},
470
+ visualUrl = _ref15$url === void 0 ? null : _ref15$url;
471
+ var _ref16 = heading || {},
472
+ _ref16$body = _ref16.body,
473
+ headingBody = _ref16$body === void 0 ? null : _ref16$body;
474
+ var _ref17 = content || {},
490
475
  _ref17$body = _ref17.body,
491
- headingBody = _ref17$body === void 0 ? null : _ref17$body;
492
- var _ref18 = content || {},
493
- _ref18$body = _ref18.body,
494
- contentBody = _ref18$body === void 0 ? null : _ref18$body;
476
+ contentBody = _ref17$body === void 0 ? null : _ref17$body;
495
477
  var finalLabel = isString(itemLabel) ? {
496
478
  body: itemLabel
497
479
  } : itemLabel || {};
498
- var _ref19 = finalLabel || {},
499
- _ref19$body = _ref19.body,
500
- label = _ref19$body === void 0 ? null : _ref19$body,
501
- _ref19$textStyle = _ref19.textStyle,
502
- finalLabelTextStyle = _ref19$textStyle === void 0 ? null : _ref19$textStyle;
503
- var key = label || visualUrl || id;
504
- var itemIsEmpty = label === null && visual === null;
480
+ var _ref18 = finalLabel || {},
481
+ _ref18$body = _ref18.body,
482
+ finalBody = _ref18$body === void 0 ? null : _ref18$body;
483
+ var key = finalBody || visualUrl || id;
484
+ var itemIsEmpty = finalBody === null && visual === null;
505
485
  var isExternalLink = url !== null && !inWebView;
506
486
  var isPopupEmpty = (heading === null || headingBody === null || headingBody === '') && (content === null || contentBody === null || contentBody === '') && popupLargeVisual === null;
507
- var finalTextStyle = _objectSpread(_objectSpread({}, buttonTextStyle), finalLabelTextStyle);
508
487
  return /*#__PURE__*/React.createElement("div", {
509
488
  key: key,
510
489
  className: styles.item
511
- }, /*#__PURE__*/React.createElement(Button, {
512
- className: classNames([styles.button, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), styles.layoutLabelTop, buttonLayout === 'label-top'), styles.layoutNoLabel, buttonLayout === 'no-label'), styles.layoutLabelOver, buttonLayout === 'label-over'), styles.fillImage, fillImage === true), styles.isEmpty, itemIsEmpty), styles.isLink, url !== null), styles.disableHover, isPopupEmpty && url === null)]),
513
- style: _objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromBox(boxStyle)), getStyleFromAlignment(alignment || buttonAlignment, true, 'flex-start')),
490
+ }, /*#__PURE__*/React.createElement(RichButton, {
491
+ className: classNames([styles.button, _defineProperty(_defineProperty(_defineProperty({}, styles.isEmpty, itemIsEmpty), styles.isLink, url !== null), styles.disableHover, isPopupEmpty && url === null)]),
492
+ layout: fillImage ? 'no-label' : buttonLayout,
514
493
  external: isExternalLink,
515
494
  href: isExternalLink ? url : null,
516
495
  focusable: current,
517
496
  onClick: !isPopupEmpty || url !== null && !isExternalLink ? function (e) {
518
497
  return onItemClick(e, item, index);
519
- } : null
520
- }, /*#__PURE__*/React.createElement(ScreenElement, {
521
- emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
522
- id: "Qanvis",
523
- defaultMessage: [{
524
- "type": 0,
525
- "value": "Visual"
526
- }]
527
- }),
528
- emptyClassName: classNames([styles.empty, styles.buttonVisual, styles.emptyButtonVisual]),
529
- isEmpty: visual === null
530
- }, visual !== null ? /*#__PURE__*/React.createElement(Visual, {
531
- className: styles.buttonVisual,
532
- imageClassName: classNames([styles.thumbnail, _defineProperty({}, styles.withImageSize, imageWidth !== null || imageHeight !== null)]),
533
- media: visual,
498
+ } : null,
499
+ style: _objectSpread({}, getStyleFromAlignment(alignment || buttonAlignment, true, 'flex-start')),
500
+ textStyle: buttonTextStyle,
501
+ buttonStyle: _objectSpread(_objectSpread({}, buttonBoxStyle), boxStyle),
502
+ label: finalLabel,
503
+ labelBoxStyle: buttonLabelBoxStyle,
504
+ visual: visual,
505
+ visualWidth: buttonVisualWidth !== null ? "".concat(buttonVisualWidth, "%") : null,
534
506
  resolution: resolution,
535
- width: imageWidth || 'auto',
536
- height: imageHeight || (imageWidth !== null ? 'auto' : null)
537
- }) : null), /*#__PURE__*/React.createElement(ScreenElement, {
538
- placeholder: /*#__PURE__*/React.createElement(PlaceholderButton, null),
539
- emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
540
- id: "Zbu5Uk",
541
- defaultMessage: [{
542
- "type": 0,
543
- "value": "Label"
544
- }]
545
- }),
546
- emptyClassName: classNames([styles.empty, styles.emptyButtonLabel]),
547
- isEmpty: label === null
548
- }, label !== null || !isInteractivePreview ? /*#__PURE__*/React.createElement(Text, Object.assign({
549
- className: styles.buttonLabel
550
- }, finalLabel, {
551
- textStyle: finalTextStyle
552
- })) : null)));
507
+ textClassName: styles.buttonLabel
508
+ }));
553
509
  });
554
510
  }, [items, screenState, keypadSettings, buttonAlignment, buttonBoxStyle, buttonTextStyle, buttonLayout, isNotInteractive]);
555
511
  useEffect(function () {
@@ -663,17 +619,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
663
619
  columns: isPlaceholder ? 3 : columns,
664
620
  spacing: isPlaceholder ? 2 : columnSpacing,
665
621
  items: gridItems
666
- }), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
667
- ref: footerRef,
668
- className: styles.footer,
669
- style: {
670
- transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
671
- paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
672
- paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
673
- paddingBottom: spacing / 2,
674
- paddingTop: spacing
675
- }
676
- }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), popup !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(animated.div, {
622
+ })), popup !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(animated.div, {
677
623
  className: classNames([styles.popupBackdrop]),
678
624
  style: {
679
625
  opacity: popupSpring.to(function (p) {
@@ -769,7 +715,17 @@ var KeypadScreen = function KeypadScreen(_ref) {
769
715
  openWebView: openWebView,
770
716
  type: "click",
771
717
  boxStyle: _objectSpread(_objectSpread({}, popupButtonsBoxStyle), popupButtonBoxStyle)
772
- }) : null))))) : null)));
718
+ }) : null))))) : null), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
719
+ ref: footerRef,
720
+ className: styles.footer,
721
+ style: {
722
+ transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
723
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
724
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
725
+ paddingBottom: spacing / 2,
726
+ paddingTop: spacing
727
+ }
728
+ }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null));
773
729
  };
774
730
  KeypadScreen.propTypes = propTypes;
775
731
  KeypadScreen.defaultProps = defaultProps;
@@ -817,17 +773,15 @@ var definition = [{
817
773
  }]
818
774
  })
819
775
  }, {
820
- name: 'keypadSettings',
821
- type: 'fields',
776
+ name: 'keypadLayout',
777
+ type: 'keypad-layout',
822
778
  isList: false,
823
779
  withoutLabel: true,
824
780
  defaultValue: {
825
- layout: {
826
- columnAlign: 'middle',
827
- columns: 3,
828
- spacing: 2,
829
- withSquareItems: false
830
- }
781
+ columnAlign: 'middle',
782
+ columns: 3,
783
+ spacing: 2,
784
+ withSquareItems: false
831
785
  },
832
786
  label: defineMessage({
833
787
  id: "FjuRaw",
@@ -835,12 +789,7 @@ var definition = [{
835
789
  "type": 0,
836
790
  "value": "Keypad settings"
837
791
  }]
838
- }),
839
- fields: [{
840
- name: 'layout',
841
- type: 'keypad-layout',
842
- isList: true
843
- }]
792
+ })
844
793
  }, {
845
794
  name: 'items',
846
795
  type: 'buttons',
@@ -854,7 +803,7 @@ var definition = [{
854
803
  isSection: true
855
804
  }, {
856
805
  name: 'buttonStyles',
857
- type: 'fields',
806
+ type: 'rich-button-styles',
858
807
  defaultValue: {
859
808
  layout: 'label-bottom',
860
809
  boxStyle: {
@@ -864,58 +813,14 @@ var definition = [{
864
813
  }
865
814
  }
866
815
  },
867
- isList: true,
868
- fields: [{
869
- name: 'layout',
870
- type: 'button-layout',
871
- label: defineMessage({
872
- id: "OPxJx/",
873
- defaultMessage: [{
874
- "type": 0,
875
- "value": "Layout"
876
- }]
877
- })
878
- }, {
879
- name: 'textStyle',
880
- type: 'text-style-form',
881
- label: defineMessage({
882
- id: "rzXCu2",
883
- defaultMessage: [{
884
- "type": 0,
885
- "value": "Label style"
886
- }]
887
- })
888
- }, {
889
- name: 'boxStyle',
890
- type: 'box-style-form',
891
- label: defineMessage({
892
- id: "nno1Pq",
893
- defaultMessage: [{
894
- "type": 0,
895
- "value": "Button style"
896
- }]
897
- })
898
- }, {
899
- name: 'fillImage',
900
- type: 'toggle',
901
- label: defineMessage({
902
- id: "6LFjCH",
903
- defaultMessage: [{
904
- "type": 0,
905
- "value": "Fill with image"
906
- }]
907
- })
908
- }
909
- // This works but might not be the best way
910
- // {
911
- // name: 'alignment',
912
- // type: 'alignment',
913
- // label: defineMessage({
914
- // defaultMessage: 'Button alignment',
915
- // description: 'Field label',
916
- // }),
917
- // },
918
- ]
816
+ label: defineMessage({
817
+ id: "Arl5Ze",
818
+ defaultMessage: [{
819
+ "type": 0,
820
+ "value": "Button styles"
821
+ }]
822
+ }),
823
+ isList: true
919
824
  }]
920
825
  }, {
921
826
  id: 'popups',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-keypad",
3
- "version": "0.3.816",
3
+ "version": "0.3.820",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -65,22 +65,22 @@
65
65
  },
66
66
  "dependencies": {
67
67
  "@babel/runtime": "^7.13.10",
68
- "@micromag/core": "^0.3.814",
69
- "@micromag/element-background": "^0.3.816",
70
- "@micromag/element-button": "^0.3.814",
71
- "@micromag/element-call-to-action": "^0.3.814",
72
- "@micromag/element-container": "^0.3.814",
73
- "@micromag/element-footer": "^0.3.814",
74
- "@micromag/element-grid": "^0.3.814",
75
- "@micromag/element-header": "^0.3.814",
76
- "@micromag/element-heading": "^0.3.814",
77
- "@micromag/element-keypad": "^0.3.814",
78
- "@micromag/element-layout": "^0.3.814",
79
- "@micromag/element-scroll": "^0.3.814",
80
- "@micromag/element-text": "^0.3.814",
81
- "@micromag/element-urbania-author": "^0.3.814",
82
- "@micromag/element-visual": "^0.3.816",
83
- "@micromag/transforms": "^0.3.814",
68
+ "@micromag/core": "^0.3.820",
69
+ "@micromag/element-background": "^0.3.820",
70
+ "@micromag/element-button": "^0.3.820",
71
+ "@micromag/element-call-to-action": "^0.3.820",
72
+ "@micromag/element-container": "^0.3.820",
73
+ "@micromag/element-footer": "^0.3.820",
74
+ "@micromag/element-grid": "^0.3.820",
75
+ "@micromag/element-header": "^0.3.820",
76
+ "@micromag/element-heading": "^0.3.820",
77
+ "@micromag/element-keypad": "^0.3.820",
78
+ "@micromag/element-layout": "^0.3.820",
79
+ "@micromag/element-scroll": "^0.3.820",
80
+ "@micromag/element-text": "^0.3.820",
81
+ "@micromag/element-urbania-author": "^0.3.820",
82
+ "@micromag/element-visual": "^0.3.820",
83
+ "@micromag/transforms": "^0.3.820",
84
84
  "@react-spring/core": "^9.6.1",
85
85
  "@react-spring/web": "^9.6.1",
86
86
  "@use-gesture/react": "^10.3.0",
@@ -95,5 +95,5 @@
95
95
  "access": "public",
96
96
  "registry": "https://registry.npmjs.org/"
97
97
  },
98
- "gitHead": "85a6c6c833b345a90bf74323299ec3500c0099d0"
98
+ "gitHead": "c4ef0ae4055720a367551328e824ad3b111e4c9f"
99
99
  }