@micromag/screen-keypad 0.3.425 → 0.3.429

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 +3 -6
  3. package/lib/index.js +82 -107
  4. package/package.json +26 -19
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .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-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;-webkit-transition:padding .2s ease-out;-o-transition:padding .2s ease-out;transition:padding .2s ease-out}.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{-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-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);-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: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);-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-popupScroll{height:100%;width:100%}.micromag-screen-keypad-popupInner{background-color:#1c1c1c;-webkit-box-shadow:0 0 2px #1c1c1c;box-shadow:0 0 2px #1c1c1c;margin:10% 7.5%;overflow:hidden;position:relative;z-index:40}.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;-ms-flex-negative:0;flex-grow:1;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;-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-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-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{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:start;-ms-flex-pack:start;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:flex-start;text-align:center;-webkit-transition:padding .2s ease-out;transition:padding .2s ease-out}.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{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;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);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-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;-webkit-box-shadow:0 0 2px #1c1c1c;box-shadow:0 0 2px #1c1c1c;margin:10% 7.5%;overflow:hidden;position:relative;z-index:40}.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{-webkit-box-flex:1;-ms-flex-positive:1;-ms-flex-negative:0;flex-grow:1;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{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupCTA{-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupVisual{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupHeading{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupContent{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupCTA{-webkit-box-ordinal-group:5;-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{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonVisual{-webkit-box-ordinal-group:3;-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: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
@@ -3,15 +3,14 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
3
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
4
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
5
5
  import { animated } from '@react-spring/web';
6
- import camelCase from 'camelcase';
7
6
  import classNames from 'classnames';
8
7
  import PropTypes from 'prop-types';
9
8
  import React, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
10
9
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
+ import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, camelCase, getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
11
11
  import { ScreenElement, PlaceholderButton } from '@micromag/core/components';
12
12
  import { usePlaybackContext, usePlaybackMediaRef, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useViewerInteraction, useScreenRenderContext } from '@micromag/core/contexts';
13
13
  import { useTrackScreenEvent, useDimensionObserver, useDragProgress } from '@micromag/core/hooks';
14
- import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
15
14
  import Background from '@micromag/element-background';
16
15
  import Button from '@micromag/element-button';
17
16
  import CallToAction from '@micromag/element-call-to-action';
@@ -141,7 +140,6 @@ var defaultProps = {
141
140
  className: null
142
141
  };
143
142
  var KeypadScreen = function KeypadScreen(_ref) {
144
- var _ref20;
145
143
  var items = _ref.items,
146
144
  title = _ref.title,
147
145
  layout = _ref.layout,
@@ -389,7 +387,6 @@ var KeypadScreen = function KeypadScreen(_ref) {
389
387
  }, [showPopup, onCloseModal]);
390
388
  var gridItems = useMemo(function () {
391
389
  return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
392
- var _ref19;
393
390
  var _ref15 = item || {},
394
391
  _ref15$id = _ref15.id,
395
392
  id = _ref15$id === void 0 ? null : _ref15$id,
@@ -428,7 +425,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
428
425
  key: key,
429
426
  className: styles.item
430
427
  }, /*#__PURE__*/React.createElement(Button, {
431
- className: classNames([styles.button, (_ref19 = {}, _defineProperty(_ref19, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty(_ref19, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty(_ref19, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty(_ref19, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty(_ref19, styles.isEmpty, isEmpty), _defineProperty(_ref19, styles.isLink, url !== null), _defineProperty(_ref19, styles.disableHover, isPopupEmpty && url === null), _ref19)]),
428
+ className: classNames([styles.button, _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.isEmpty, isEmpty), styles.isLink, url !== null), styles.disableHover, isPopupEmpty && url === null)]),
432
429
  style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromText(buttonTextStyle)), getStyleFromBox(boxStyle)), getStyleFromText(textStyle)),
433
430
  external: isExternalLink,
434
431
  href: isExternalLink ? url : null,
@@ -488,7 +485,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
488
485
  }, [screenState, items]);
489
486
  return /*#__PURE__*/React.createElement("div", {
490
487
  ref: containerRef,
491
- className: classNames([styles.container, (_ref20 = {}, _defineProperty(_ref20, className, className !== null), _defineProperty(_ref20, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref20, styles.withSquareItems, withSquareItems), _ref20)]),
488
+ className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder), styles.withSquareItems, withSquareItems)]),
492
489
  "data-screen-ready": true
493
490
  }, isEdit && screenState !== null ? /*#__PURE__*/React.createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
494
491
  background: background,
package/lib/index.js CHANGED
@@ -7,15 +7,14 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
7
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
8
8
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
9
9
  var web = require('@react-spring/web');
10
- var camelCase = require('camelcase');
11
10
  var classNames = require('classnames');
12
11
  var PropTypes = require('prop-types');
13
12
  var React = require('react');
14
13
  var core = require('@micromag/core');
14
+ var utils = require('@micromag/core/utils');
15
15
  var components = require('@micromag/core/components');
16
16
  var contexts = require('@micromag/core/contexts');
17
17
  var hooks = require('@micromag/core/hooks');
18
- var utils = require('@micromag/core/utils');
19
18
  var Background = require('@micromag/element-background');
20
19
  var Button = require('@micromag/element-button');
21
20
  var CallToAction = require('@micromag/element-call-to-action');
@@ -29,28 +28,6 @@ var Scroll = require('@micromag/element-scroll');
29
28
  var Text = require('@micromag/element-text');
30
29
  var Visual = require('@micromag/element-visual');
31
30
 
32
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
33
-
34
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
35
- var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
36
- var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
37
- var camelCase__default = /*#__PURE__*/_interopDefaultLegacy(camelCase);
38
- var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
39
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
40
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
41
- var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
42
- var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
43
- var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
44
- var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
45
- var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
46
- var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
47
- var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
48
- var Keypad__default = /*#__PURE__*/_interopDefaultLegacy(Keypad$1);
49
- var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
50
- var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
51
- var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
52
- var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
53
-
54
31
  var styles = {"popupButton":"micromag-screen-keypad-popupButton","popup":"micromag-screen-keypad-popup","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","popupScroll":"micromag-screen-keypad-popupScroll","popupInner":"micromag-screen-keypad-popupInner","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"};
55
32
 
56
33
  var placeholders = [{
@@ -100,7 +77,7 @@ var stopDragEventsPropagation = {
100
77
  return e.stopPropagation();
101
78
  }
102
79
  };
103
- var mouseBlocker = _objectSpread__default["default"](_objectSpread__default["default"]({}, stopDragEventsPropagation), {}, {
80
+ var mouseBlocker = _objectSpread(_objectSpread({}, stopDragEventsPropagation), {}, {
104
81
  onClick: function onClick(e) {
105
82
  return e.stopPropagation();
106
83
  },
@@ -115,31 +92,31 @@ var mouseBlocker = _objectSpread__default["default"](_objectSpread__default["def
115
92
  }
116
93
  });
117
94
  var propTypes = {
118
- items: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
119
- id: PropTypes__default["default"].string,
95
+ items: PropTypes.arrayOf(PropTypes.shape({
96
+ id: PropTypes.string,
120
97
  heading: core.PropTypes.headingElement,
121
98
  description: core.PropTypes.textElement,
122
99
  visual: core.PropTypes.visualElement,
123
100
  boxStyle: core.PropTypes.boxStyle
124
101
  })),
125
102
  title: core.PropTypes.headingElement,
126
- layout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom']),
127
- spacing: PropTypes__default["default"].number,
128
- keypadSettings: PropTypes__default["default"].shape({
129
- layout: PropTypes__default["default"].shape({
130
- columnAlign: PropTypes__default["default"].oneOf(['left', 'right', 'middle']),
131
- columns: PropTypes__default["default"].number,
132
- spacing: PropTypes__default["default"].number,
133
- withSquareItems: PropTypes__default["default"].bool
103
+ layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
104
+ spacing: PropTypes.number,
105
+ keypadSettings: PropTypes.shape({
106
+ layout: PropTypes.shape({
107
+ columnAlign: PropTypes.oneOf(['left', 'right', 'middle']),
108
+ columns: PropTypes.number,
109
+ spacing: PropTypes.number,
110
+ withSquareItems: PropTypes.bool
134
111
  })
135
112
  }),
136
- buttonStyles: PropTypes__default["default"].shape({
137
- layout: PropTypes__default["default"].string,
113
+ buttonStyles: PropTypes.shape({
114
+ layout: PropTypes.string,
138
115
  textStyle: core.PropTypes.textStyle,
139
116
  boxStyle: core.PropTypes.boxStyle
140
117
  }),
141
- popupStyles: PropTypes__default["default"].shape({
142
- layout: PropTypes__default["default"].oneOf(['content-top', 'content-split', 'content-bottom']),
118
+ popupStyles: PropTypes.shape({
119
+ layout: PropTypes.oneOf(['content-top', 'content-split', 'content-bottom']),
143
120
  headingTextStyle: core.PropTypes.textStyle,
144
121
  contentTextStyle: core.PropTypes.textStyle,
145
122
  boxStyle: core.PropTypes.boxStyle
@@ -147,9 +124,9 @@ var propTypes = {
147
124
  header: core.PropTypes.header,
148
125
  footer: core.PropTypes.footer,
149
126
  background: core.PropTypes.backgroundElement,
150
- current: PropTypes__default["default"].bool,
151
- active: PropTypes__default["default"].bool,
152
- className: PropTypes__default["default"].string
127
+ current: PropTypes.bool,
128
+ active: PropTypes.bool,
129
+ className: PropTypes.string
153
130
  };
154
131
  var defaultProps = {
155
132
  items: null,
@@ -167,7 +144,6 @@ var defaultProps = {
167
144
  className: null
168
145
  };
169
146
  var KeypadScreen = function KeypadScreen(_ref) {
170
- var _ref20;
171
147
  var items = _ref.items,
172
148
  title = _ref.title,
173
149
  layout = _ref.layout,
@@ -265,14 +241,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
265
241
  _ref7$boxStyle = _ref7.boxStyle,
266
242
  popupButtonsBoxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle;
267
243
  var popupLayoutClassName = React.useMemo(function () {
268
- return popupLayout !== null ? camelCase__default["default"](popupLayout) : '';
244
+ return popupLayout !== null ? utils.camelCase(popupLayout) : '';
269
245
  }, [popupLayout]);
270
246
  var _useState = React.useState(false),
271
- _useState2 = _slicedToArray__default["default"](_useState, 2),
247
+ _useState2 = _slicedToArray(_useState, 2),
272
248
  showPopup = _useState2[0],
273
249
  setShowPopup = _useState2[1];
274
250
  var _useState3 = React.useState(null),
275
- _useState4 = _slicedToArray__default["default"](_useState3, 2),
251
+ _useState4 = _slicedToArray(_useState3, 2),
276
252
  popup = _useState4[0],
277
253
  setPopup = _useState4[1];
278
254
  var _ref8 = popup || {},
@@ -323,7 +299,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
323
299
  trackScreenEvent('close_modal');
324
300
  }, [enableInteraction, setShowPopup, trackScreenEvent]);
325
301
  var _useState5 = React.useState(0),
326
- _useState6 = _slicedToArray__default["default"](_useState5, 2),
302
+ _useState6 = _slicedToArray(_useState5, 2),
327
303
  popupDragDirection = _useState6[0],
328
304
  setPopupDragDirection = _useState6[1];
329
305
  var onPopupScrollHeightChange = React.useCallback(function (_ref13) {
@@ -337,9 +313,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
337
313
  }, [height]);
338
314
  var computePopupProgress = React.useCallback(function (_ref14) {
339
315
  var dragActive = _ref14.active,
340
- _ref14$movement = _slicedToArray__default["default"](_ref14.movement, 2),
316
+ _ref14$movement = _slicedToArray(_ref14.movement, 2),
341
317
  my = _ref14$movement[1],
342
- _ref14$velocity = _slicedToArray__default["default"](_ref14.velocity, 2),
318
+ _ref14$velocity = _slicedToArray(_ref14.velocity, 2),
343
319
  vy = _ref14$velocity[1];
344
320
  var damper = 0.5;
345
321
  var delta = Math.abs(my) / window.innerHeight;
@@ -378,7 +354,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
378
354
  };
379
355
  }, [current, popupInnerRef, containerRef, isInteractivePreview, isEdit, showPopup]);
380
356
  var _useState7 = React.useState(false),
381
- _useState8 = _slicedToArray__default["default"](_useState7, 2),
357
+ _useState8 = _slicedToArray(_useState7, 2),
382
358
  popupDragDisabled = _useState8[0],
383
359
  setPopupDragDisabled = _useState8[1];
384
360
  var onPopupScrollBottom = React.useCallback(function () {
@@ -415,7 +391,6 @@ var KeypadScreen = function KeypadScreen(_ref) {
415
391
  }, [showPopup, onCloseModal]);
416
392
  var gridItems = React.useMemo(function () {
417
393
  return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
418
- var _ref19;
419
394
  var _ref15 = item || {},
420
395
  _ref15$id = _ref15.id,
421
396
  id = _ref15$id === void 0 ? null : _ref15$id,
@@ -450,44 +425,44 @@ var KeypadScreen = function KeypadScreen(_ref) {
450
425
  var isEmpty = label === null && visual === null;
451
426
  var isExternalLink = url !== null && !inWebView;
452
427
  var isPopupEmpty = (heading === null || headingBody === null || headingBody === '') && (content === null || contentBody === null || contentBody === '') && popupLargeVisual === null;
453
- return /*#__PURE__*/React__default["default"].createElement("div", {
428
+ return /*#__PURE__*/React.createElement("div", {
454
429
  key: key,
455
430
  className: styles.item
456
- }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
457
- className: classNames__default["default"]([styles.button, (_ref19 = {}, _defineProperty__default["default"](_ref19, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty__default["default"](_ref19, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty__default["default"](_ref19, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty__default["default"](_ref19, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty__default["default"](_ref19, styles.isEmpty, isEmpty), _defineProperty__default["default"](_ref19, styles.isLink, url !== null), _defineProperty__default["default"](_ref19, styles.disableHover, isPopupEmpty && url === null), _ref19)]),
458
- 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)),
431
+ }, /*#__PURE__*/React.createElement(Button, {
432
+ className: classNames([styles.button, _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.isEmpty, isEmpty), styles.isLink, url !== null), styles.disableHover, isPopupEmpty && url === null)]),
433
+ style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, utils.getStyleFromBox(buttonBoxStyle)), utils.getStyleFromText(buttonTextStyle)), utils.getStyleFromBox(boxStyle)), utils.getStyleFromText(textStyle)),
459
434
  external: isExternalLink,
460
435
  href: isExternalLink ? url : null,
461
436
  onClick: !isPopupEmpty || url !== null && !isExternalLink ? function (e) {
462
437
  return onItemClick(e, item);
463
438
  } : null
464
- }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
465
- emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
439
+ }, /*#__PURE__*/React.createElement(components.ScreenElement, {
440
+ emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
466
441
  id: "Qanvis",
467
442
  defaultMessage: [{
468
443
  "type": 0,
469
444
  "value": "Visual"
470
445
  }]
471
446
  }),
472
- emptyClassName: classNames__default["default"]([styles.empty, styles.buttonVisual, styles.emptyButtonVisual]),
447
+ emptyClassName: classNames([styles.empty, styles.buttonVisual, styles.emptyButtonVisual]),
473
448
  isEmpty: visual === null
474
- }, visual !== null ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
449
+ }, visual !== null ? /*#__PURE__*/React.createElement(Visual, {
475
450
  className: styles.buttonVisual,
476
451
  imageClassName: styles.thumbnail,
477
452
  media: visual,
478
453
  width: "auto"
479
- }) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
480
- placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderButton, null),
481
- emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
454
+ }) : null), /*#__PURE__*/React.createElement(components.ScreenElement, {
455
+ placeholder: /*#__PURE__*/React.createElement(components.PlaceholderButton, null),
456
+ emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
482
457
  id: "Zbu5Uk",
483
458
  defaultMessage: [{
484
459
  "type": 0,
485
460
  "value": "Label"
486
461
  }]
487
462
  }),
488
- emptyClassName: classNames__default["default"]([styles.empty, styles.emptyButtonLabel]),
463
+ emptyClassName: classNames([styles.empty, styles.emptyButtonLabel]),
489
464
  isEmpty: label === null
490
- }, label !== null || !isInteractivePreview ? /*#__PURE__*/React__default["default"].createElement("div", {
465
+ }, label !== null || !isInteractivePreview ? /*#__PURE__*/React.createElement("div", {
491
466
  className: styles.buttonLabel
492
467
  }, label) : null)));
493
468
  });
@@ -512,11 +487,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
512
487
  setShowPopup(false);
513
488
  }
514
489
  }, [screenState, items]);
515
- return /*#__PURE__*/React__default["default"].createElement("div", {
490
+ return /*#__PURE__*/React.createElement("div", {
516
491
  ref: containerRef,
517
- className: classNames__default["default"]([styles.container, (_ref20 = {}, _defineProperty__default["default"](_ref20, className, className !== null), _defineProperty__default["default"](_ref20, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref20, styles.withSquareItems, withSquareItems), _ref20)]),
492
+ className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder), styles.withSquareItems, withSquareItems)]),
518
493
  "data-screen-ready": true
519
- }, isEdit && screenState !== null ? /*#__PURE__*/React__default["default"].createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
494
+ }, isEdit && screenState !== null ? /*#__PURE__*/React.createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
520
495
  background: background,
521
496
  width: width,
522
497
  height: height,
@@ -526,17 +501,17 @@ var KeypadScreen = function KeypadScreen(_ref) {
526
501
  shouldLoad: mediaShouldLoad,
527
502
  mediaRef: mediaRef,
528
503
  className: styles.background
529
- }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
504
+ }) : null, /*#__PURE__*/React.createElement(Container, {
530
505
  width: width,
531
506
  height: height,
532
507
  className: styles.inner
533
- }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
508
+ }, /*#__PURE__*/React.createElement(Scroll, {
534
509
  width: width,
535
510
  height: height,
536
511
  verticalAlign: layout,
537
512
  withArrow: !showPopup,
538
513
  disabled: isPreview || isPlaceholder || showPopup
539
- }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
514
+ }, /*#__PURE__*/React.createElement(Layout, {
540
515
  className: styles.layout,
541
516
  verticalAlign: layout,
542
517
  width: width,
@@ -545,7 +520,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
545
520
  paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
546
521
  paddingBottom: (hasFooter ? footerHeight : spacing) + (current && !isPreview ? viewerBottomHeight : 0)
547
522
  } : null
548
- }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
523
+ }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
549
524
  ref: headerRef,
550
525
  className: styles.header,
551
526
  style: {
@@ -555,28 +530,28 @@ var KeypadScreen = function KeypadScreen(_ref) {
555
530
  paddingBottom: spacing,
556
531
  transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
557
532
  }
558
- }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
533
+ }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(components.ScreenElement, {
559
534
  placeholder: "Title",
560
- emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
535
+ emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
561
536
  id: "BSTWf8",
562
537
  defaultMessage: [{
563
538
  "type": 0,
564
539
  "value": "Title"
565
540
  }]
566
541
  }),
567
- emptyClassName: classNames__default["default"]([styles.empty, styles.emptyHeading]),
542
+ emptyClassName: classNames([styles.empty, styles.emptyHeading]),
568
543
  isEmpty: !hasTitle
569
- }, hasTitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
544
+ }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
570
545
  className: styles.title
571
546
  }, title, {
572
547
  textStyle: titleTextStyle
573
- })) : null), /*#__PURE__*/React__default["default"].createElement(Keypad__default["default"], {
574
- className: classNames__default["default"]([styles.grid, _defineProperty__default["default"]({}, styles.gridPlaceholder, isPlaceholder)]),
548
+ })) : null), /*#__PURE__*/React.createElement(Keypad$1, {
549
+ className: classNames([styles.grid, _defineProperty({}, styles.gridPlaceholder, isPlaceholder)]),
575
550
  align: columnAlign,
576
551
  columns: isPlaceholder ? 3 : columns,
577
552
  spacing: isPlaceholder ? 2 : columnSpacing,
578
553
  items: gridItems
579
- }), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
554
+ }), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
580
555
  ref: footerRef,
581
556
  className: styles.footer,
582
557
  style: {
@@ -586,14 +561,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
586
561
  paddingBottom: spacing / 2,
587
562
  paddingTop: spacing
588
563
  }
589
- }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null), popup !== null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
590
- className: classNames__default["default"]([styles.popupBackdrop]),
564
+ }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), popup !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(web.animated.div, {
565
+ className: classNames([styles.popupBackdrop]),
591
566
  style: {
592
567
  opacity: popupSpring.to(function (p) {
593
568
  return 1 - Math.abs(p);
594
569
  })
595
570
  }
596
- }), /*#__PURE__*/React__default["default"].createElement(web.animated.div, Object.assign({
571
+ }), /*#__PURE__*/React.createElement(web.animated.div, Object.assign({
597
572
  className: styles.popup,
598
573
  style: {
599
574
  transform: popupSpring.to(function (p) {
@@ -605,7 +580,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
605
580
  return Math.abs(p) > 0.5 ? 'none' : 'auto';
606
581
  })
607
582
  }
608
- }, bindPopupDrag()), /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
583
+ }, bindPopupDrag()), /*#__PURE__*/React.createElement(Scroll, {
609
584
  disabled: isPreview || isPlaceholder,
610
585
  verticalAlign: "middle",
611
586
  withArrow: false,
@@ -615,78 +590,78 @@ var KeypadScreen = function KeypadScreen(_ref) {
615
590
  onScrollHeightChange: onPopupScrollHeightChange,
616
591
  className: styles.popupScroll,
617
592
  withShadow: true
618
- }, /*#__PURE__*/React__default["default"].createElement("div", {
593
+ }, /*#__PURE__*/React.createElement("div", {
619
594
  ref: popupInnerRef,
620
- className: classNames__default["default"]([styles.popupInner, styles[popupLayoutClassName]]),
621
- style: _objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(placeholderPopupBoxStyles)), utils.getStyleFromBox(popupBoxStyle))
622
- }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
623
- emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
595
+ className: classNames([styles.popupInner, styles[popupLayoutClassName]]),
596
+ style: _objectSpread(_objectSpread({}, utils.getStyleFromBox(placeholderPopupBoxStyles)), utils.getStyleFromBox(popupBoxStyle))
597
+ }, /*#__PURE__*/React.createElement(components.ScreenElement, {
598
+ emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
624
599
  id: "IE7U/Q",
625
600
  defaultMessage: [{
626
601
  "type": 0,
627
602
  "value": "Heading"
628
603
  }]
629
604
  }),
630
- emptyClassName: classNames__default["default"]([styles.empty, styles.emptyHeading]),
605
+ emptyClassName: classNames([styles.empty, styles.emptyHeading]),
631
606
  isEmpty: !hasPopupHeading
632
- }, hasPopupHeading ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
607
+ }, hasPopupHeading ? /*#__PURE__*/React.createElement(Heading, Object.assign({
633
608
  className: styles.popupHeading
634
609
  }, popupHeading, {
635
- textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, headingTextStyle), popupHeadingTextStyle)
636
- })) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
610
+ textStyle: _objectSpread(_objectSpread({}, headingTextStyle), popupHeadingTextStyle)
611
+ })) : null), /*#__PURE__*/React.createElement(components.ScreenElement, {
637
612
  placeholder: "popupContent",
638
- emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
613
+ emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
639
614
  id: "JRZoe6",
640
615
  defaultMessage: [{
641
616
  "type": 0,
642
617
  "value": "Content"
643
618
  }]
644
619
  }),
645
- emptyClassName: classNames__default["default"]([styles.empty, styles.emptyContent]),
620
+ emptyClassName: classNames([styles.empty, styles.emptyContent]),
646
621
  isEmpty: !hasPopupContent
647
- }, hasPopupContent ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
622
+ }, hasPopupContent ? /*#__PURE__*/React.createElement(Text, Object.assign({
648
623
  className: styles.popupContent
649
624
  }, popupContent, {
650
- textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, contentTextStyle), popupContentTextStyle)
651
- })) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
625
+ textStyle: _objectSpread(_objectSpread({}, contentTextStyle), popupContentTextStyle)
626
+ })) : null), /*#__PURE__*/React.createElement(components.ScreenElement, {
652
627
  placeholder: "image",
653
- emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
628
+ emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
654
629
  id: "z4Pr+g",
655
630
  defaultMessage: [{
656
631
  "type": 0,
657
632
  "value": "Visual (Image or Video)"
658
633
  }]
659
634
  }),
660
- emptyClassName: classNames__default["default"]([styles.empty, styles.emptyVisual]),
635
+ emptyClassName: classNames([styles.empty, styles.emptyVisual]),
661
636
  isEmpty: largeVisual === null
662
- }, largeVisual !== null ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
637
+ }, largeVisual !== null ? /*#__PURE__*/React.createElement(Visual, {
663
638
  className: styles.popupVisual,
664
639
  media: largeVisual,
665
640
  width: "100%"
666
- }) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
641
+ }) : null), /*#__PURE__*/React.createElement(components.ScreenElement, {
667
642
  placeholder: "button",
668
- emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
643
+ emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
669
644
  id: "N7Kj8z",
670
645
  defaultMessage: [{
671
646
  "type": 0,
672
647
  "value": "Button"
673
648
  }]
674
649
  }),
675
- emptyClassName: classNames__default["default"]([styles.empty, styles.emptyCTA]),
650
+ emptyClassName: classNames([styles.empty, styles.emptyCTA]),
676
651
  isEmpty: popupButton === null
677
- }, popupButton !== null ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
652
+ }, popupButton !== null ? /*#__PURE__*/React.createElement(CallToAction, {
678
653
  className: styles.popupCTA,
679
- label: _objectSpread__default["default"](_objectSpread__default["default"]({}, popupButtonsTextStyle), buttonLabel),
654
+ label: _objectSpread(_objectSpread({}, popupButtonsTextStyle), buttonLabel),
680
655
  url: buttonUrl,
681
656
  inWebView: popupInWebView,
682
657
  openWebView: openWebView,
683
658
  type: "click",
684
- boxStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, popupButtonsBoxStyle), popupButtonBoxStyle)
659
+ boxStyle: _objectSpread(_objectSpread({}, popupButtonsBoxStyle), popupButtonBoxStyle)
685
660
  }) : null))))) : null)));
686
661
  };
687
662
  KeypadScreen.propTypes = propTypes;
688
663
  KeypadScreen.defaultProps = defaultProps;
689
- var Keypad = /*#__PURE__*/React__default["default"].memo(KeypadScreen);
664
+ var Keypad = /*#__PURE__*/React.memo(KeypadScreen);
690
665
 
691
666
  var definition = [{
692
667
  id: 'keypad',
@@ -1027,4 +1002,4 @@ var definition = [{
1027
1002
  }];
1028
1003
 
1029
1004
  exports.Keypad = Keypad;
1030
- exports["default"] = definition;
1005
+ exports.default = definition;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-keypad",
3
- "version": "0.3.425",
3
+ "version": "0.3.429",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -36,6 +36,14 @@
36
36
  "license": "ISC",
37
37
  "main": "lib/index.js",
38
38
  "module": "es/index.js",
39
+ "style": "assets/css/styles.css",
40
+ "exports": {
41
+ ".": {
42
+ "require": "./lib/index.js",
43
+ "import": "./es/index.js"
44
+ },
45
+ "./assets/css/*.css": "./assets/css/*.css"
46
+ },
39
47
  "files": [
40
48
  "lib",
41
49
  "es",
@@ -55,26 +63,25 @@
55
63
  },
56
64
  "dependencies": {
57
65
  "@babel/runtime": "^7.13.10",
58
- "@micromag/core": "^0.3.423",
59
- "@micromag/element-background": "^0.3.423",
60
- "@micromag/element-button": "^0.3.423",
61
- "@micromag/element-call-to-action": "^0.3.423",
62
- "@micromag/element-container": "^0.3.423",
63
- "@micromag/element-footer": "^0.3.423",
64
- "@micromag/element-grid": "^0.3.423",
65
- "@micromag/element-header": "^0.3.423",
66
- "@micromag/element-heading": "^0.3.423",
67
- "@micromag/element-keypad": "^0.3.423",
68
- "@micromag/element-layout": "^0.3.423",
69
- "@micromag/element-scroll": "^0.3.425",
70
- "@micromag/element-text": "^0.3.423",
71
- "@micromag/element-urbania-author": "^0.3.423",
72
- "@micromag/element-visual": "^0.3.423",
73
- "@micromag/transforms": "^0.3.423",
66
+ "@micromag/core": "^0.3.429",
67
+ "@micromag/element-background": "^0.3.429",
68
+ "@micromag/element-button": "^0.3.429",
69
+ "@micromag/element-call-to-action": "^0.3.429",
70
+ "@micromag/element-container": "^0.3.429",
71
+ "@micromag/element-footer": "^0.3.429",
72
+ "@micromag/element-grid": "^0.3.429",
73
+ "@micromag/element-header": "^0.3.429",
74
+ "@micromag/element-heading": "^0.3.429",
75
+ "@micromag/element-keypad": "^0.3.429",
76
+ "@micromag/element-layout": "^0.3.429",
77
+ "@micromag/element-scroll": "^0.3.429",
78
+ "@micromag/element-text": "^0.3.429",
79
+ "@micromag/element-urbania-author": "^0.3.429",
80
+ "@micromag/element-visual": "^0.3.429",
81
+ "@micromag/transforms": "^0.3.429",
74
82
  "@react-spring/core": "^9.6.1",
75
83
  "@react-spring/web": "^9.6.1",
76
84
  "@use-gesture/react": "^10.2.4",
77
- "camelcase": "^7.0.0",
78
85
  "classnames": "^2.2.6",
79
86
  "lodash": "^4.17.21",
80
87
  "prop-types": "^15.7.2",
@@ -86,5 +93,5 @@
86
93
  "access": "public",
87
94
  "registry": "https://registry.npmjs.org/"
88
95
  },
89
- "gitHead": "a84a23dde14ab21350f6872b66a8a61dcb26a4ff"
96
+ "gitHead": "f15e72b88ecfda4c54b87626513149b58572c52b"
90
97
  }