@micromag/screen-keypad 0.3.369 → 0.3.371

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 +178 -108
  3. package/lib/index.js +178 -108
  4. package/package.json +18 -18
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}.micromag-screen-keypad-popup{height:100%;position:fixed;right:0;top:0;-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-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%}.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-popupWrapper{-ms-flex-align:start;-ms-flex-pack:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:flex-start;margin-bottom:-.5em}.micromag-screen-keypad-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-ms-flex-positive:1;-ms-flex-negative:0;flex-grow:1;flex-shrink:0;margin-bottom:.5em;width:100%}.micromag-screen-keypad-popupWrapper .micromag-screen-keypad-popupHeading{font-weight:inherit;margin-bottom:.25em}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupHeading{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-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{-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}
package/es/index.js CHANGED
@@ -25,7 +25,7 @@ import Scroll from '@micromag/element-scroll';
25
25
  import Text from '@micromag/element-text';
26
26
  import Visual from '@micromag/element-visual';
27
27
 
28
- 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","popupWrapper":"micromag-screen-keypad-popupWrapper","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","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"};
28
+ 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"};
29
29
 
30
30
  var placeholders = [{
31
31
  id: '1'
@@ -141,7 +141,7 @@ var defaultProps = {
141
141
  className: null
142
142
  };
143
143
  var KeypadScreen = function KeypadScreen(_ref) {
144
- var _ref18;
144
+ var _ref20;
145
145
  var items = _ref.items,
146
146
  title = _ref.title,
147
147
  layout = _ref.layout,
@@ -229,8 +229,15 @@ var KeypadScreen = function KeypadScreen(_ref) {
229
229
  headingTextStyle = _ref6$headingTextStyl === void 0 ? null : _ref6$headingTextStyl,
230
230
  _ref6$contentTextStyl = _ref6.contentTextStyle,
231
231
  contentTextStyle = _ref6$contentTextStyl === void 0 ? null : _ref6$contentTextStyl,
232
+ _ref6$button = _ref6.button,
233
+ popupButtons = _ref6$button === void 0 ? null : _ref6$button,
232
234
  _ref6$boxStyle = _ref6.boxStyle,
233
235
  popupBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
236
+ var _ref7 = popupButtons || {},
237
+ _ref7$buttonTextStyle = _ref7.buttonTextStyle,
238
+ popupButtonsTextStyle = _ref7$buttonTextStyle === void 0 ? null : _ref7$buttonTextStyle,
239
+ _ref7$boxStyle = _ref7.boxStyle,
240
+ popupButtonsBoxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle;
234
241
  var popupLayoutClassName = useMemo(function () {
235
242
  return popupLayout !== null ? camelCase(popupLayout) : '';
236
243
  }, [popupLayout]);
@@ -242,76 +249,92 @@ var KeypadScreen = function KeypadScreen(_ref) {
242
249
  _useState4 = _slicedToArray(_useState3, 2),
243
250
  popup = _useState4[0],
244
251
  setPopup = _useState4[1];
245
- var _ref7 = popup || {},
246
- _ref7$heading = _ref7.heading,
247
- popupHeading = _ref7$heading === void 0 ? null : _ref7$heading,
248
- _ref7$content = _ref7.content,
249
- popupContent = _ref7$content === void 0 ? null : _ref7$content,
250
- _ref7$largeVisual = _ref7.largeVisual,
251
- largeVisual = _ref7$largeVisual === void 0 ? null : _ref7$largeVisual,
252
- _ref7$button = _ref7.button,
253
- popupButton = _ref7$button === void 0 ? null : _ref7$button;
252
+ var _ref8 = popup || {},
253
+ _ref8$heading = _ref8.heading,
254
+ popupHeading = _ref8$heading === void 0 ? null : _ref8$heading,
255
+ _ref8$content = _ref8.content,
256
+ popupContent = _ref8$content === void 0 ? null : _ref8$content,
257
+ _ref8$largeVisual = _ref8.largeVisual,
258
+ largeVisual = _ref8$largeVisual === void 0 ? null : _ref8$largeVisual,
259
+ _ref8$button = _ref8.button,
260
+ popupButton = _ref8$button === void 0 ? null : _ref8$button;
254
261
  var hasPopupHeading = isTextFilled(popupHeading);
255
- var _ref8 = popupHeading || {},
256
- _ref8$textStyle = _ref8.textStyle,
257
- popupHeadingTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
258
- var hasPopupContent = isTextFilled(popupContent);
259
- var _ref9 = popupContent || {},
262
+ var _ref9 = popupHeading || {},
260
263
  _ref9$textStyle = _ref9.textStyle,
261
- popupContentTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
262
- var _ref10 = popupButton || {},
263
- _ref10$label = _ref10.label,
264
- buttonLabel = _ref10$label === void 0 ? null : _ref10$label,
265
- _ref10$url = _ref10.url,
266
- buttonUrl = _ref10$url === void 0 ? null : _ref10$url,
267
- _ref10$inWebView = _ref10.inWebView,
268
- popupInWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
269
- _ref10$boxStyle = _ref10.boxStyle,
270
- popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
264
+ popupHeadingTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
265
+ var hasPopupContent = isTextFilled(popupContent);
266
+ var _ref10 = popupContent || {},
267
+ _ref10$textStyle = _ref10.textStyle,
268
+ popupContentTextStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
269
+ var _ref11 = popupButton || {},
270
+ _ref11$label = _ref11.label,
271
+ buttonLabel = _ref11$label === void 0 ? null : _ref11$label,
272
+ _ref11$url = _ref11.url,
273
+ buttonUrl = _ref11$url === void 0 ? null : _ref11$url,
274
+ _ref11$inWebView = _ref11.inWebView,
275
+ popupInWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
276
+ _ref11$boxStyle = _ref11.boxStyle,
277
+ popupButtonBoxStyle = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle;
271
278
  var onItemClick = useCallback(function (e, item) {
272
279
  e.stopPropagation();
273
280
  trackScreenEvent('click_item', item);
274
- var _ref11 = item || {},
275
- _ref11$inWebView = _ref11.inWebView,
276
- inWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
277
- _ref11$url = _ref11.url,
278
- url = _ref11$url === void 0 ? null : _ref11$url;
281
+ var _ref12 = item || {},
282
+ _ref12$inWebView = _ref12.inWebView,
283
+ inWebView = _ref12$inWebView === void 0 ? false : _ref12$inWebView,
284
+ _ref12$url = _ref12.url,
285
+ url = _ref12$url === void 0 ? null : _ref12$url;
279
286
  if (inWebView && url !== null) {
280
287
  openWebView({
281
288
  url: url
282
289
  });
283
290
  return;
284
291
  }
285
- // disableInteraction();
286
292
  setPopup(item);
287
- setShowPopup(1);
293
+ setShowPopup(true);
288
294
  }, [disableInteraction, setPopup, trackScreenEvent]);
289
295
  var onCloseModal = useCallback(function () {
290
- // enableInteraction();
291
-
292
- setShowPopup(0);
296
+ setShowPopup(false);
293
297
  trackScreenEvent('close_modal');
294
298
  }, [enableInteraction, setShowPopup, trackScreenEvent]);
295
- var computePopupProgress = useCallback(function (_ref12) {
296
- var dragActive = _ref12.active,
297
- _ref12$movement = _slicedToArray(_ref12.movement, 2),
298
- my = _ref12$movement[1],
299
- _ref12$velocity = _slicedToArray(_ref12.velocity, 2),
300
- vy = _ref12$velocity[1];
299
+ var _useState5 = useState(0),
300
+ _useState6 = _slicedToArray(_useState5, 2),
301
+ popupDragDirection = _useState6[0],
302
+ setPopupDragDirection = _useState6[1];
303
+ var onPopupScrollHeightChange = useCallback(function (_ref13) {
304
+ var _ref13$scrolleeHeight = _ref13.scrolleeHeight,
305
+ scrolleeHeight = _ref13$scrolleeHeight === void 0 ? 0 : _ref13$scrolleeHeight;
306
+ if (Math.floor(scrolleeHeight) >= Math.floor(height)) {
307
+ setPopupDragDirection('top');
308
+ } else {
309
+ setPopupDragDirection('bottom');
310
+ }
311
+ }, [height]);
312
+ var computePopupProgress = useCallback(function (_ref14) {
313
+ var dragActive = _ref14.active,
314
+ _ref14$movement = _slicedToArray(_ref14.movement, 2),
315
+ my = _ref14$movement[1],
316
+ _ref14$velocity = _slicedToArray(_ref14.velocity, 2),
317
+ vy = _ref14$velocity[1];
301
318
  var damper = 0.5;
302
- var p = Math.max(0, my) / window.innerHeight;
303
- var progress = p * damper;
304
- var reachedThreshold = vy > 0.3 || Math.abs(p) > 0.3;
319
+ var delta = Math.abs(my) / window.innerHeight;
320
+ var reachedThreshold = vy > 1 || delta > 0.3;
321
+ var progress = 0;
322
+ if (popupDragDirection === 'top' && my < 0) {
323
+ progress = delta * damper * -1;
324
+ } else if (popupDragDirection === 'bottom' && my > 0) {
325
+ progress = delta * damper;
326
+ }
305
327
  if (!dragActive) {
306
328
  if (reachedThreshold) {
307
329
  onCloseModal();
330
+ return 1;
308
331
  }
309
- return reachedThreshold ? 0 : 1;
332
+ return 0;
310
333
  }
311
- return 1 - progress;
312
- }, [onCloseModal]);
334
+ return progress;
335
+ }, [onCloseModal, popupDragDirection]);
313
336
  useEffect(function () {
314
- if (showPopup !== 0) {
337
+ if (showPopup) {
315
338
  disableInteraction();
316
339
  } else {
317
340
  enableInteraction();
@@ -319,7 +342,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
319
342
  }, [showPopup]);
320
343
  useEffect(function () {
321
344
  function handleClickOutside(event) {
322
- if (!current && isView || popupInnerRef.current && !popupInnerRef.current.contains(event.target) && containerRef.current && containerRef.current.contains(event.target) && !isInteractivePreview && !isEdit && showPopup !== 0) {
345
+ if (!current && isView || popupInnerRef.current && !popupInnerRef.current.contains(event.target) && containerRef.current && containerRef.current.contains(event.target) && !isInteractivePreview && !isEdit && showPopup) {
323
346
  onCloseModal();
324
347
  }
325
348
  }
@@ -328,9 +351,19 @@ var KeypadScreen = function KeypadScreen(_ref) {
328
351
  document.removeEventListener('mousedown', handleClickOutside);
329
352
  };
330
353
  }, [current, popupInnerRef, containerRef, isInteractivePreview, isEdit, showPopup]);
354
+ var _useState7 = useState(false),
355
+ _useState8 = _slicedToArray(_useState7, 2),
356
+ popupDragDisabled = _useState8[0],
357
+ setPopupDragDisabled = _useState8[1];
358
+ var onPopupScrollBottom = useCallback(function () {
359
+ setPopupDragDisabled(false);
360
+ }, [setPopupDragDisabled]);
361
+ var onPopupScrollNotBottom = useCallback(function () {
362
+ setPopupDragDisabled(true);
363
+ }, [setPopupDragDisabled]);
331
364
  var _useDragProgress = useDragProgress({
332
- disabled: !isView,
333
- progress: showPopup ? 1 : 0,
365
+ disabled: !isView || popupDragDisabled,
366
+ progress: showPopup ? 0 : 1,
334
367
  computeProgress: computePopupProgress,
335
368
  springParams: {
336
369
  config: {
@@ -344,7 +377,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
344
377
  useEffect(function () {
345
378
  var keyup = function keyup(e) {
346
379
  if (e.key === 'Escape') {
347
- if (showPopup === 1) {
380
+ if (showPopup) {
348
381
  onCloseModal();
349
382
  }
350
383
  }
@@ -356,37 +389,37 @@ var KeypadScreen = function KeypadScreen(_ref) {
356
389
  }, [showPopup, onCloseModal]);
357
390
  var gridItems = useMemo(function () {
358
391
  return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
359
- var _ref17;
360
- var _ref13 = item || {},
361
- _ref13$id = _ref13.id,
362
- id = _ref13$id === void 0 ? null : _ref13$id,
363
- _ref13$label = _ref13.label,
364
- label = _ref13$label === void 0 ? null : _ref13$label,
365
- _ref13$visual = _ref13.visual,
366
- visual = _ref13$visual === void 0 ? null : _ref13$visual,
367
- _ref13$textStyle = _ref13.textStyle,
368
- textStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
369
- _ref13$boxStyle = _ref13.boxStyle,
370
- boxStyle = _ref13$boxStyle === void 0 ? null : _ref13$boxStyle,
371
- _ref13$heading = _ref13.heading,
372
- heading = _ref13$heading === void 0 ? null : _ref13$heading,
373
- _ref13$content = _ref13.content,
374
- content = _ref13$content === void 0 ? null : _ref13$content,
375
- _ref13$url = _ref13.url,
376
- url = _ref13$url === void 0 ? null : _ref13$url,
377
- _ref13$inWebView = _ref13.inWebView,
378
- inWebView = _ref13$inWebView === void 0 ? false : _ref13$inWebView,
379
- _ref13$largeVisual = _ref13.largeVisual,
380
- popupLargeVisual = _ref13$largeVisual === void 0 ? null : _ref13$largeVisual;
381
- var _ref14 = visual || {},
382
- _ref14$url = _ref14.url,
383
- visualUrl = _ref14$url === void 0 ? null : _ref14$url;
384
- var _ref15 = heading || {},
385
- _ref15$body = _ref15.body,
386
- headingBody = _ref15$body === void 0 ? null : _ref15$body;
387
- var _ref16 = content || {},
388
- _ref16$body = _ref16.body,
389
- contentBody = _ref16$body === void 0 ? null : _ref16$body;
392
+ var _ref19;
393
+ var _ref15 = item || {},
394
+ _ref15$id = _ref15.id,
395
+ id = _ref15$id === void 0 ? null : _ref15$id,
396
+ _ref15$label = _ref15.label,
397
+ label = _ref15$label === void 0 ? null : _ref15$label,
398
+ _ref15$visual = _ref15.visual,
399
+ visual = _ref15$visual === void 0 ? null : _ref15$visual,
400
+ _ref15$textStyle = _ref15.textStyle,
401
+ textStyle = _ref15$textStyle === void 0 ? null : _ref15$textStyle,
402
+ _ref15$boxStyle = _ref15.boxStyle,
403
+ boxStyle = _ref15$boxStyle === void 0 ? null : _ref15$boxStyle,
404
+ _ref15$heading = _ref15.heading,
405
+ heading = _ref15$heading === void 0 ? null : _ref15$heading,
406
+ _ref15$content = _ref15.content,
407
+ content = _ref15$content === void 0 ? null : _ref15$content,
408
+ _ref15$url = _ref15.url,
409
+ url = _ref15$url === void 0 ? null : _ref15$url,
410
+ _ref15$inWebView = _ref15.inWebView,
411
+ inWebView = _ref15$inWebView === void 0 ? false : _ref15$inWebView,
412
+ _ref15$largeVisual = _ref15.largeVisual,
413
+ popupLargeVisual = _ref15$largeVisual === void 0 ? null : _ref15$largeVisual;
414
+ var _ref16 = visual || {},
415
+ _ref16$url = _ref16.url,
416
+ visualUrl = _ref16$url === void 0 ? null : _ref16$url;
417
+ var _ref17 = heading || {},
418
+ _ref17$body = _ref17.body,
419
+ headingBody = _ref17$body === void 0 ? null : _ref17$body;
420
+ var _ref18 = content || {},
421
+ _ref18$body = _ref18.body,
422
+ contentBody = _ref18$body === void 0 ? null : _ref18$body;
390
423
  var key = label || visualUrl || id;
391
424
  var isEmpty = label === null && visual === null;
392
425
  var isExternalLink = url !== null && !inWebView;
@@ -395,14 +428,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
395
428
  key: key,
396
429
  className: styles.item
397
430
  }, /*#__PURE__*/React.createElement(Button, {
398
- className: classNames([styles.button, (_ref17 = {}, _defineProperty(_ref17, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty(_ref17, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty(_ref17, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty(_ref17, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty(_ref17, styles.isEmpty, isEmpty), _defineProperty(_ref17, styles.isLink, url !== null), _defineProperty(_ref17, styles.disableHover, isPopupEmpty && url === null), _ref17)]),
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)]),
399
432
  style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromText(buttonTextStyle)), getStyleFromBox(boxStyle)), getStyleFromText(textStyle)),
400
433
  external: isExternalLink,
401
434
  href: isExternalLink ? url : null,
402
435
  onClick: !isPopupEmpty || url !== null && !isExternalLink ? function (e) {
403
436
  return onItemClick(e, item);
404
437
  } : null
405
- }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScreenElement, {
438
+ }, /*#__PURE__*/React.createElement(ScreenElement, {
406
439
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
407
440
  id: "Qanvis",
408
441
  defaultMessage: [{
@@ -412,10 +445,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
412
445
  }),
413
446
  emptyClassName: classNames([styles.empty, styles.buttonVisual, styles.emptyButtonVisual]),
414
447
  isEmpty: visual === null
415
- }, visual !== null ?
416
- /*#__PURE__*/
417
- // || !isInteractivePreview
418
- React.createElement(Visual, {
448
+ }, visual !== null ? /*#__PURE__*/React.createElement(Visual, {
419
449
  className: styles.buttonVisual,
420
450
  imageClassName: styles.thumbnail,
421
451
  media: visual,
@@ -433,32 +463,32 @@ var KeypadScreen = function KeypadScreen(_ref) {
433
463
  isEmpty: label === null
434
464
  }, label !== null || !isInteractivePreview ? /*#__PURE__*/React.createElement("div", {
435
465
  className: styles.buttonLabel
436
- }, label) : null))));
466
+ }, label) : null)));
437
467
  });
438
468
  }, [items, screenState, keypadSettings]);
439
469
  useEffect(function () {
440
470
  if (screenState === 'popup' && isPlaceholder) {
441
471
  setPopup(placeholderPopupBoxStyles); // @note force placeholder
442
- setShowPopup(1);
472
+ setShowPopup(true);
443
473
  }
444
474
  if (screenState === 'keypad') {
445
475
  setPopup(null);
446
- setShowPopup(0);
476
+ setShowPopup(false);
447
477
  }
448
478
  if (screenState !== null && screenState.includes('popup')) {
449
479
  var index = screenState.split('.').pop();
450
480
  var found = items[index];
451
- setShowPopup(1);
452
481
  setPopup(found);
482
+ setShowPopup(true);
453
483
  }
454
484
  if (screenState === null) {
455
- setShowPopup(0);
456
485
  setPopup(null);
486
+ setShowPopup(false);
457
487
  }
458
488
  }, [screenState, items]);
459
489
  return /*#__PURE__*/React.createElement("div", {
460
490
  ref: containerRef,
461
- className: classNames([styles.container, (_ref18 = {}, _defineProperty(_ref18, className, className !== null), _defineProperty(_ref18, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref18, styles.withSquareItems, withSquareItems), _ref18)]),
491
+ className: classNames([styles.container, (_ref20 = {}, _defineProperty(_ref20, className, className !== null), _defineProperty(_ref20, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref20, styles.withSquareItems, withSquareItems), _ref20)]),
462
492
  "data-screen-ready": true
463
493
  }, isEdit && screenState !== null ? /*#__PURE__*/React.createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
464
494
  background: background,
@@ -478,7 +508,8 @@ var KeypadScreen = function KeypadScreen(_ref) {
478
508
  width: width,
479
509
  height: height,
480
510
  verticalAlign: layout,
481
- disabled: isPreview || isPlaceholder || showPopup !== 0
511
+ withArrow: !showPopup,
512
+ disabled: isPreview || isPlaceholder || showPopup
482
513
  }, /*#__PURE__*/React.createElement(Layout, {
483
514
  className: styles.layout,
484
515
  verticalAlign: layout,
@@ -533,31 +564,35 @@ var KeypadScreen = function KeypadScreen(_ref) {
533
564
  className: classNames([styles.popupBackdrop]),
534
565
  style: {
535
566
  opacity: popupSpring.to(function (p) {
536
- return p;
567
+ return 1 - Math.abs(p);
537
568
  })
538
569
  }
539
570
  }), /*#__PURE__*/React.createElement(animated.div, Object.assign({
540
571
  className: styles.popup,
541
572
  style: {
542
573
  transform: popupSpring.to(function (p) {
543
- return "translateY(".concat(100 * (1 - (p < 0.2 ? 0.1 * p + p : p)), "%)");
574
+ return "translateY(".concat(100 * p
575
+ // 100 * (1 - (p < 0.2 && p > -0.2 ? 0.1 * p + p : p))
576
+ , "%) scale(").concat(1 - Math.abs(p * 0.5), ")");
544
577
  }),
545
578
  pointerEvents: popupSpring.to(function (p) {
546
- return p < 0.1 ? 'none' : 'auto';
579
+ return Math.abs(p) > 0.5 ? 'none' : 'auto';
547
580
  })
548
581
  }
549
582
  }, bindPopupDrag()), /*#__PURE__*/React.createElement(Scroll, {
550
- disabled: isPreview || isPlaceholder || showPopup === 0,
583
+ disabled: isPreview || isPlaceholder,
551
584
  verticalAlign: "middle",
552
585
  withArrow: false,
586
+ scrollPosition: !showPopup ? 1 : null,
587
+ onScrolledBottom: onPopupScrollBottom,
588
+ onScrolledNotBottom: onPopupScrollNotBottom,
589
+ onScrollHeightChange: onPopupScrollHeightChange,
553
590
  className: styles.popupScroll,
554
591
  withShadow: true
555
592
  }, /*#__PURE__*/React.createElement("div", {
556
593
  ref: popupInnerRef,
557
594
  className: classNames([styles.popupInner, styles[popupLayoutClassName]]),
558
595
  style: _objectSpread(_objectSpread({}, getStyleFromBox(placeholderPopupBoxStyles)), getStyleFromBox(popupBoxStyle))
559
- }, /*#__PURE__*/React.createElement("div", {
560
- className: styles.popupWrapper
561
596
  }, /*#__PURE__*/React.createElement(ScreenElement, {
562
597
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
563
598
  id: "IE7U/Q",
@@ -585,6 +620,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
585
620
  isEmpty: !hasPopupContent
586
621
  }, hasPopupContent ? /*#__PURE__*/React.createElement(Text, Object.assign({
587
622
  className: styles.popupContent
623
+ // @TODO: There's a styles clash here, check if there's more elsewhere
588
624
  }, popupContent, {
589
625
  textStyle: _objectSpread(_objectSpread({}, contentTextStyle), popupContentTextStyle)
590
626
  })) : null), /*#__PURE__*/React.createElement(ScreenElement, {
@@ -615,14 +651,18 @@ var KeypadScreen = function KeypadScreen(_ref) {
615
651
  isEmpty: popupButton === null
616
652
  }, popupButton !== null ? /*#__PURE__*/React.createElement(CallToAction, {
617
653
  className: styles.popupCTA,
618
- label: buttonLabel,
654
+ label: _objectSpread(_objectSpread({}, popupButtonsTextStyle), buttonLabel),
619
655
  url: buttonUrl,
620
656
  inWebView: popupInWebView,
621
657
  openWebView: openWebView,
622
658
  type: "click",
623
- boxStyle: popupButtonBoxStyle,
624
- style: _objectSpread({}, getStyleFromBox(popupButtonBoxStyle))
625
- }) : null)))))) : null)));
659
+ boxStyle: _objectSpread(_objectSpread({}, popupButtonsBoxStyle), popupButtonBoxStyle)
660
+ // style={{
661
+ // ...getStyleFromText(popupButtonsTextStyle),
662
+ // ...getStyleFromBox(popupButtonsBoxStyle),
663
+ // ...getStyleFromBox(popupButtonBoxStyle),
664
+ // }}
665
+ }) : null))))) : null)));
626
666
  };
627
667
  KeypadScreen.propTypes = propTypes;
628
668
  KeypadScreen.defaultProps = defaultProps;
@@ -727,7 +767,6 @@ var definition = [{
727
767
  fields: [{
728
768
  name: 'layout',
729
769
  type: 'button-layout',
730
- isHorizontal: true,
731
770
  label: defineMessage({
732
771
  id: "OPxJx/",
733
772
  defaultMessage: [{
@@ -803,6 +842,37 @@ var definition = [{
803
842
  "value": "Content text style"
804
843
  }]
805
844
  })
845
+ }, {
846
+ name: 'button',
847
+ type: 'fields',
848
+ label: defineMessage({
849
+ id: "i6bmbD",
850
+ defaultMessage: [{
851
+ "type": 0,
852
+ "value": "Button"
853
+ }]
854
+ }),
855
+ fields: [{
856
+ name: 'buttonTextStyle',
857
+ type: 'text-style-form',
858
+ label: defineMessage({
859
+ id: "p5RHzq",
860
+ defaultMessage: [{
861
+ "type": 0,
862
+ "value": "Button text style"
863
+ }]
864
+ })
865
+ }, {
866
+ name: 'buttonStyle',
867
+ type: 'box-style-form',
868
+ label: defineMessage({
869
+ id: "nno1Pq",
870
+ defaultMessage: [{
871
+ "type": 0,
872
+ "value": "Button style"
873
+ }]
874
+ })
875
+ }]
806
876
  }, {
807
877
  name: 'boxStyle',
808
878
  type: 'box-style-form',
package/lib/index.js CHANGED
@@ -51,7 +51,7 @@ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
51
51
  var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
52
52
  var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
53
53
 
54
- 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","popupWrapper":"micromag-screen-keypad-popupWrapper","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","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"};
54
+ 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
55
 
56
56
  var placeholders = [{
57
57
  id: '1'
@@ -167,7 +167,7 @@ var defaultProps = {
167
167
  className: null
168
168
  };
169
169
  var KeypadScreen = function KeypadScreen(_ref) {
170
- var _ref18;
170
+ var _ref20;
171
171
  var items = _ref.items,
172
172
  title = _ref.title,
173
173
  layout = _ref.layout,
@@ -255,8 +255,15 @@ var KeypadScreen = function KeypadScreen(_ref) {
255
255
  headingTextStyle = _ref6$headingTextStyl === void 0 ? null : _ref6$headingTextStyl,
256
256
  _ref6$contentTextStyl = _ref6.contentTextStyle,
257
257
  contentTextStyle = _ref6$contentTextStyl === void 0 ? null : _ref6$contentTextStyl,
258
+ _ref6$button = _ref6.button,
259
+ popupButtons = _ref6$button === void 0 ? null : _ref6$button,
258
260
  _ref6$boxStyle = _ref6.boxStyle,
259
261
  popupBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
262
+ var _ref7 = popupButtons || {},
263
+ _ref7$buttonTextStyle = _ref7.buttonTextStyle,
264
+ popupButtonsTextStyle = _ref7$buttonTextStyle === void 0 ? null : _ref7$buttonTextStyle,
265
+ _ref7$boxStyle = _ref7.boxStyle,
266
+ popupButtonsBoxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle;
260
267
  var popupLayoutClassName = React.useMemo(function () {
261
268
  return popupLayout !== null ? camelCase__default["default"](popupLayout) : '';
262
269
  }, [popupLayout]);
@@ -268,76 +275,92 @@ var KeypadScreen = function KeypadScreen(_ref) {
268
275
  _useState4 = _slicedToArray__default["default"](_useState3, 2),
269
276
  popup = _useState4[0],
270
277
  setPopup = _useState4[1];
271
- var _ref7 = popup || {},
272
- _ref7$heading = _ref7.heading,
273
- popupHeading = _ref7$heading === void 0 ? null : _ref7$heading,
274
- _ref7$content = _ref7.content,
275
- popupContent = _ref7$content === void 0 ? null : _ref7$content,
276
- _ref7$largeVisual = _ref7.largeVisual,
277
- largeVisual = _ref7$largeVisual === void 0 ? null : _ref7$largeVisual,
278
- _ref7$button = _ref7.button,
279
- popupButton = _ref7$button === void 0 ? null : _ref7$button;
278
+ var _ref8 = popup || {},
279
+ _ref8$heading = _ref8.heading,
280
+ popupHeading = _ref8$heading === void 0 ? null : _ref8$heading,
281
+ _ref8$content = _ref8.content,
282
+ popupContent = _ref8$content === void 0 ? null : _ref8$content,
283
+ _ref8$largeVisual = _ref8.largeVisual,
284
+ largeVisual = _ref8$largeVisual === void 0 ? null : _ref8$largeVisual,
285
+ _ref8$button = _ref8.button,
286
+ popupButton = _ref8$button === void 0 ? null : _ref8$button;
280
287
  var hasPopupHeading = utils.isTextFilled(popupHeading);
281
- var _ref8 = popupHeading || {},
282
- _ref8$textStyle = _ref8.textStyle,
283
- popupHeadingTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
284
- var hasPopupContent = utils.isTextFilled(popupContent);
285
- var _ref9 = popupContent || {},
288
+ var _ref9 = popupHeading || {},
286
289
  _ref9$textStyle = _ref9.textStyle,
287
- popupContentTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
288
- var _ref10 = popupButton || {},
289
- _ref10$label = _ref10.label,
290
- buttonLabel = _ref10$label === void 0 ? null : _ref10$label,
291
- _ref10$url = _ref10.url,
292
- buttonUrl = _ref10$url === void 0 ? null : _ref10$url,
293
- _ref10$inWebView = _ref10.inWebView,
294
- popupInWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
295
- _ref10$boxStyle = _ref10.boxStyle,
296
- popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
290
+ popupHeadingTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
291
+ var hasPopupContent = utils.isTextFilled(popupContent);
292
+ var _ref10 = popupContent || {},
293
+ _ref10$textStyle = _ref10.textStyle,
294
+ popupContentTextStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
295
+ var _ref11 = popupButton || {},
296
+ _ref11$label = _ref11.label,
297
+ buttonLabel = _ref11$label === void 0 ? null : _ref11$label,
298
+ _ref11$url = _ref11.url,
299
+ buttonUrl = _ref11$url === void 0 ? null : _ref11$url,
300
+ _ref11$inWebView = _ref11.inWebView,
301
+ popupInWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
302
+ _ref11$boxStyle = _ref11.boxStyle,
303
+ popupButtonBoxStyle = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle;
297
304
  var onItemClick = React.useCallback(function (e, item) {
298
305
  e.stopPropagation();
299
306
  trackScreenEvent('click_item', item);
300
- var _ref11 = item || {},
301
- _ref11$inWebView = _ref11.inWebView,
302
- inWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
303
- _ref11$url = _ref11.url,
304
- url = _ref11$url === void 0 ? null : _ref11$url;
307
+ var _ref12 = item || {},
308
+ _ref12$inWebView = _ref12.inWebView,
309
+ inWebView = _ref12$inWebView === void 0 ? false : _ref12$inWebView,
310
+ _ref12$url = _ref12.url,
311
+ url = _ref12$url === void 0 ? null : _ref12$url;
305
312
  if (inWebView && url !== null) {
306
313
  openWebView({
307
314
  url: url
308
315
  });
309
316
  return;
310
317
  }
311
- // disableInteraction();
312
318
  setPopup(item);
313
- setShowPopup(1);
319
+ setShowPopup(true);
314
320
  }, [disableInteraction, setPopup, trackScreenEvent]);
315
321
  var onCloseModal = React.useCallback(function () {
316
- // enableInteraction();
317
-
318
- setShowPopup(0);
322
+ setShowPopup(false);
319
323
  trackScreenEvent('close_modal');
320
324
  }, [enableInteraction, setShowPopup, trackScreenEvent]);
321
- var computePopupProgress = React.useCallback(function (_ref12) {
322
- var dragActive = _ref12.active,
323
- _ref12$movement = _slicedToArray__default["default"](_ref12.movement, 2),
324
- my = _ref12$movement[1],
325
- _ref12$velocity = _slicedToArray__default["default"](_ref12.velocity, 2),
326
- vy = _ref12$velocity[1];
325
+ var _useState5 = React.useState(0),
326
+ _useState6 = _slicedToArray__default["default"](_useState5, 2),
327
+ popupDragDirection = _useState6[0],
328
+ setPopupDragDirection = _useState6[1];
329
+ var onPopupScrollHeightChange = React.useCallback(function (_ref13) {
330
+ var _ref13$scrolleeHeight = _ref13.scrolleeHeight,
331
+ scrolleeHeight = _ref13$scrolleeHeight === void 0 ? 0 : _ref13$scrolleeHeight;
332
+ if (Math.floor(scrolleeHeight) >= Math.floor(height)) {
333
+ setPopupDragDirection('top');
334
+ } else {
335
+ setPopupDragDirection('bottom');
336
+ }
337
+ }, [height]);
338
+ var computePopupProgress = React.useCallback(function (_ref14) {
339
+ var dragActive = _ref14.active,
340
+ _ref14$movement = _slicedToArray__default["default"](_ref14.movement, 2),
341
+ my = _ref14$movement[1],
342
+ _ref14$velocity = _slicedToArray__default["default"](_ref14.velocity, 2),
343
+ vy = _ref14$velocity[1];
327
344
  var damper = 0.5;
328
- var p = Math.max(0, my) / window.innerHeight;
329
- var progress = p * damper;
330
- var reachedThreshold = vy > 0.3 || Math.abs(p) > 0.3;
345
+ var delta = Math.abs(my) / window.innerHeight;
346
+ var reachedThreshold = vy > 1 || delta > 0.3;
347
+ var progress = 0;
348
+ if (popupDragDirection === 'top' && my < 0) {
349
+ progress = delta * damper * -1;
350
+ } else if (popupDragDirection === 'bottom' && my > 0) {
351
+ progress = delta * damper;
352
+ }
331
353
  if (!dragActive) {
332
354
  if (reachedThreshold) {
333
355
  onCloseModal();
356
+ return 1;
334
357
  }
335
- return reachedThreshold ? 0 : 1;
358
+ return 0;
336
359
  }
337
- return 1 - progress;
338
- }, [onCloseModal]);
360
+ return progress;
361
+ }, [onCloseModal, popupDragDirection]);
339
362
  React.useEffect(function () {
340
- if (showPopup !== 0) {
363
+ if (showPopup) {
341
364
  disableInteraction();
342
365
  } else {
343
366
  enableInteraction();
@@ -345,7 +368,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
345
368
  }, [showPopup]);
346
369
  React.useEffect(function () {
347
370
  function handleClickOutside(event) {
348
- if (!current && isView || popupInnerRef.current && !popupInnerRef.current.contains(event.target) && containerRef.current && containerRef.current.contains(event.target) && !isInteractivePreview && !isEdit && showPopup !== 0) {
371
+ if (!current && isView || popupInnerRef.current && !popupInnerRef.current.contains(event.target) && containerRef.current && containerRef.current.contains(event.target) && !isInteractivePreview && !isEdit && showPopup) {
349
372
  onCloseModal();
350
373
  }
351
374
  }
@@ -354,9 +377,19 @@ var KeypadScreen = function KeypadScreen(_ref) {
354
377
  document.removeEventListener('mousedown', handleClickOutside);
355
378
  };
356
379
  }, [current, popupInnerRef, containerRef, isInteractivePreview, isEdit, showPopup]);
380
+ var _useState7 = React.useState(false),
381
+ _useState8 = _slicedToArray__default["default"](_useState7, 2),
382
+ popupDragDisabled = _useState8[0],
383
+ setPopupDragDisabled = _useState8[1];
384
+ var onPopupScrollBottom = React.useCallback(function () {
385
+ setPopupDragDisabled(false);
386
+ }, [setPopupDragDisabled]);
387
+ var onPopupScrollNotBottom = React.useCallback(function () {
388
+ setPopupDragDisabled(true);
389
+ }, [setPopupDragDisabled]);
357
390
  var _useDragProgress = hooks.useDragProgress({
358
- disabled: !isView,
359
- progress: showPopup ? 1 : 0,
391
+ disabled: !isView || popupDragDisabled,
392
+ progress: showPopup ? 0 : 1,
360
393
  computeProgress: computePopupProgress,
361
394
  springParams: {
362
395
  config: {
@@ -370,7 +403,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
370
403
  React.useEffect(function () {
371
404
  var keyup = function keyup(e) {
372
405
  if (e.key === 'Escape') {
373
- if (showPopup === 1) {
406
+ if (showPopup) {
374
407
  onCloseModal();
375
408
  }
376
409
  }
@@ -382,37 +415,37 @@ var KeypadScreen = function KeypadScreen(_ref) {
382
415
  }, [showPopup, onCloseModal]);
383
416
  var gridItems = React.useMemo(function () {
384
417
  return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
385
- var _ref17;
386
- var _ref13 = item || {},
387
- _ref13$id = _ref13.id,
388
- id = _ref13$id === void 0 ? null : _ref13$id,
389
- _ref13$label = _ref13.label,
390
- label = _ref13$label === void 0 ? null : _ref13$label,
391
- _ref13$visual = _ref13.visual,
392
- visual = _ref13$visual === void 0 ? null : _ref13$visual,
393
- _ref13$textStyle = _ref13.textStyle,
394
- textStyle = _ref13$textStyle === void 0 ? null : _ref13$textStyle,
395
- _ref13$boxStyle = _ref13.boxStyle,
396
- boxStyle = _ref13$boxStyle === void 0 ? null : _ref13$boxStyle,
397
- _ref13$heading = _ref13.heading,
398
- heading = _ref13$heading === void 0 ? null : _ref13$heading,
399
- _ref13$content = _ref13.content,
400
- content = _ref13$content === void 0 ? null : _ref13$content,
401
- _ref13$url = _ref13.url,
402
- url = _ref13$url === void 0 ? null : _ref13$url,
403
- _ref13$inWebView = _ref13.inWebView,
404
- inWebView = _ref13$inWebView === void 0 ? false : _ref13$inWebView,
405
- _ref13$largeVisual = _ref13.largeVisual,
406
- popupLargeVisual = _ref13$largeVisual === void 0 ? null : _ref13$largeVisual;
407
- var _ref14 = visual || {},
408
- _ref14$url = _ref14.url,
409
- visualUrl = _ref14$url === void 0 ? null : _ref14$url;
410
- var _ref15 = heading || {},
411
- _ref15$body = _ref15.body,
412
- headingBody = _ref15$body === void 0 ? null : _ref15$body;
413
- var _ref16 = content || {},
414
- _ref16$body = _ref16.body,
415
- contentBody = _ref16$body === void 0 ? null : _ref16$body;
418
+ var _ref19;
419
+ var _ref15 = item || {},
420
+ _ref15$id = _ref15.id,
421
+ id = _ref15$id === void 0 ? null : _ref15$id,
422
+ _ref15$label = _ref15.label,
423
+ label = _ref15$label === void 0 ? null : _ref15$label,
424
+ _ref15$visual = _ref15.visual,
425
+ visual = _ref15$visual === void 0 ? null : _ref15$visual,
426
+ _ref15$textStyle = _ref15.textStyle,
427
+ textStyle = _ref15$textStyle === void 0 ? null : _ref15$textStyle,
428
+ _ref15$boxStyle = _ref15.boxStyle,
429
+ boxStyle = _ref15$boxStyle === void 0 ? null : _ref15$boxStyle,
430
+ _ref15$heading = _ref15.heading,
431
+ heading = _ref15$heading === void 0 ? null : _ref15$heading,
432
+ _ref15$content = _ref15.content,
433
+ content = _ref15$content === void 0 ? null : _ref15$content,
434
+ _ref15$url = _ref15.url,
435
+ url = _ref15$url === void 0 ? null : _ref15$url,
436
+ _ref15$inWebView = _ref15.inWebView,
437
+ inWebView = _ref15$inWebView === void 0 ? false : _ref15$inWebView,
438
+ _ref15$largeVisual = _ref15.largeVisual,
439
+ popupLargeVisual = _ref15$largeVisual === void 0 ? null : _ref15$largeVisual;
440
+ var _ref16 = visual || {},
441
+ _ref16$url = _ref16.url,
442
+ visualUrl = _ref16$url === void 0 ? null : _ref16$url;
443
+ var _ref17 = heading || {},
444
+ _ref17$body = _ref17.body,
445
+ headingBody = _ref17$body === void 0 ? null : _ref17$body;
446
+ var _ref18 = content || {},
447
+ _ref18$body = _ref18.body,
448
+ contentBody = _ref18$body === void 0 ? null : _ref18$body;
416
449
  var key = label || visualUrl || id;
417
450
  var isEmpty = label === null && visual === null;
418
451
  var isExternalLink = url !== null && !inWebView;
@@ -421,14 +454,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
421
454
  key: key,
422
455
  className: styles.item
423
456
  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
424
- className: classNames__default["default"]([styles.button, (_ref17 = {}, _defineProperty__default["default"](_ref17, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), _defineProperty__default["default"](_ref17, styles.layoutLabelTop, buttonLayout === 'label-top'), _defineProperty__default["default"](_ref17, styles.layoutNoLabel, buttonLayout === 'no-label'), _defineProperty__default["default"](_ref17, styles.layoutLabelOver, buttonLayout === 'label-over'), _defineProperty__default["default"](_ref17, styles.isEmpty, isEmpty), _defineProperty__default["default"](_ref17, styles.isLink, url !== null), _defineProperty__default["default"](_ref17, styles.disableHover, isPopupEmpty && url === null), _ref17)]),
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)]),
425
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)),
426
459
  external: isExternalLink,
427
460
  href: isExternalLink ? url : null,
428
461
  onClick: !isPopupEmpty || url !== null && !isExternalLink ? function (e) {
429
462
  return onItemClick(e, item);
430
463
  } : null
431
- }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
464
+ }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
432
465
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
433
466
  id: "Qanvis",
434
467
  defaultMessage: [{
@@ -438,10 +471,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
438
471
  }),
439
472
  emptyClassName: classNames__default["default"]([styles.empty, styles.buttonVisual, styles.emptyButtonVisual]),
440
473
  isEmpty: visual === null
441
- }, visual !== null ?
442
- /*#__PURE__*/
443
- // || !isInteractivePreview
444
- React__default["default"].createElement(Visual__default["default"], {
474
+ }, visual !== null ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
445
475
  className: styles.buttonVisual,
446
476
  imageClassName: styles.thumbnail,
447
477
  media: visual,
@@ -459,32 +489,32 @@ var KeypadScreen = function KeypadScreen(_ref) {
459
489
  isEmpty: label === null
460
490
  }, label !== null || !isInteractivePreview ? /*#__PURE__*/React__default["default"].createElement("div", {
461
491
  className: styles.buttonLabel
462
- }, label) : null))));
492
+ }, label) : null)));
463
493
  });
464
494
  }, [items, screenState, keypadSettings]);
465
495
  React.useEffect(function () {
466
496
  if (screenState === 'popup' && isPlaceholder) {
467
497
  setPopup(placeholderPopupBoxStyles); // @note force placeholder
468
- setShowPopup(1);
498
+ setShowPopup(true);
469
499
  }
470
500
  if (screenState === 'keypad') {
471
501
  setPopup(null);
472
- setShowPopup(0);
502
+ setShowPopup(false);
473
503
  }
474
504
  if (screenState !== null && screenState.includes('popup')) {
475
505
  var index = screenState.split('.').pop();
476
506
  var found = items[index];
477
- setShowPopup(1);
478
507
  setPopup(found);
508
+ setShowPopup(true);
479
509
  }
480
510
  if (screenState === null) {
481
- setShowPopup(0);
482
511
  setPopup(null);
512
+ setShowPopup(false);
483
513
  }
484
514
  }, [screenState, items]);
485
515
  return /*#__PURE__*/React__default["default"].createElement("div", {
486
516
  ref: containerRef,
487
- className: classNames__default["default"]([styles.container, (_ref18 = {}, _defineProperty__default["default"](_ref18, className, className !== null), _defineProperty__default["default"](_ref18, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref18, styles.withSquareItems, withSquareItems), _ref18)]),
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)]),
488
518
  "data-screen-ready": true
489
519
  }, isEdit && screenState !== null ? /*#__PURE__*/React__default["default"].createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
490
520
  background: background,
@@ -504,7 +534,8 @@ var KeypadScreen = function KeypadScreen(_ref) {
504
534
  width: width,
505
535
  height: height,
506
536
  verticalAlign: layout,
507
- disabled: isPreview || isPlaceholder || showPopup !== 0
537
+ withArrow: !showPopup,
538
+ disabled: isPreview || isPlaceholder || showPopup
508
539
  }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
509
540
  className: styles.layout,
510
541
  verticalAlign: layout,
@@ -559,31 +590,35 @@ var KeypadScreen = function KeypadScreen(_ref) {
559
590
  className: classNames__default["default"]([styles.popupBackdrop]),
560
591
  style: {
561
592
  opacity: popupSpring.to(function (p) {
562
- return p;
593
+ return 1 - Math.abs(p);
563
594
  })
564
595
  }
565
596
  }), /*#__PURE__*/React__default["default"].createElement(web.animated.div, Object.assign({
566
597
  className: styles.popup,
567
598
  style: {
568
599
  transform: popupSpring.to(function (p) {
569
- return "translateY(".concat(100 * (1 - (p < 0.2 ? 0.1 * p + p : p)), "%)");
600
+ return "translateY(".concat(100 * p
601
+ // 100 * (1 - (p < 0.2 && p > -0.2 ? 0.1 * p + p : p))
602
+ , "%) scale(").concat(1 - Math.abs(p * 0.5), ")");
570
603
  }),
571
604
  pointerEvents: popupSpring.to(function (p) {
572
- return p < 0.1 ? 'none' : 'auto';
605
+ return Math.abs(p) > 0.5 ? 'none' : 'auto';
573
606
  })
574
607
  }
575
608
  }, bindPopupDrag()), /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
576
- disabled: isPreview || isPlaceholder || showPopup === 0,
609
+ disabled: isPreview || isPlaceholder,
577
610
  verticalAlign: "middle",
578
611
  withArrow: false,
612
+ scrollPosition: !showPopup ? 1 : null,
613
+ onScrolledBottom: onPopupScrollBottom,
614
+ onScrolledNotBottom: onPopupScrollNotBottom,
615
+ onScrollHeightChange: onPopupScrollHeightChange,
579
616
  className: styles.popupScroll,
580
617
  withShadow: true
581
618
  }, /*#__PURE__*/React__default["default"].createElement("div", {
582
619
  ref: popupInnerRef,
583
620
  className: classNames__default["default"]([styles.popupInner, styles[popupLayoutClassName]]),
584
621
  style: _objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(placeholderPopupBoxStyles)), utils.getStyleFromBox(popupBoxStyle))
585
- }, /*#__PURE__*/React__default["default"].createElement("div", {
586
- className: styles.popupWrapper
587
622
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
588
623
  emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
589
624
  id: "IE7U/Q",
@@ -611,6 +646,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
611
646
  isEmpty: !hasPopupContent
612
647
  }, hasPopupContent ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
613
648
  className: styles.popupContent
649
+ // @TODO: There's a styles clash here, check if there's more elsewhere
614
650
  }, popupContent, {
615
651
  textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, contentTextStyle), popupContentTextStyle)
616
652
  })) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -641,14 +677,18 @@ var KeypadScreen = function KeypadScreen(_ref) {
641
677
  isEmpty: popupButton === null
642
678
  }, popupButton !== null ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
643
679
  className: styles.popupCTA,
644
- label: buttonLabel,
680
+ label: _objectSpread__default["default"](_objectSpread__default["default"]({}, popupButtonsTextStyle), buttonLabel),
645
681
  url: buttonUrl,
646
682
  inWebView: popupInWebView,
647
683
  openWebView: openWebView,
648
684
  type: "click",
649
- boxStyle: popupButtonBoxStyle,
650
- style: _objectSpread__default["default"]({}, utils.getStyleFromBox(popupButtonBoxStyle))
651
- }) : null)))))) : null)));
685
+ boxStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, popupButtonsBoxStyle), popupButtonBoxStyle)
686
+ // style={{
687
+ // ...getStyleFromText(popupButtonsTextStyle),
688
+ // ...getStyleFromBox(popupButtonsBoxStyle),
689
+ // ...getStyleFromBox(popupButtonBoxStyle),
690
+ // }}
691
+ }) : null))))) : null)));
652
692
  };
653
693
  KeypadScreen.propTypes = propTypes;
654
694
  KeypadScreen.defaultProps = defaultProps;
@@ -753,7 +793,6 @@ var definition = [{
753
793
  fields: [{
754
794
  name: 'layout',
755
795
  type: 'button-layout',
756
- isHorizontal: true,
757
796
  label: reactIntl.defineMessage({
758
797
  id: "OPxJx/",
759
798
  defaultMessage: [{
@@ -829,6 +868,37 @@ var definition = [{
829
868
  "value": "Content text style"
830
869
  }]
831
870
  })
871
+ }, {
872
+ name: 'button',
873
+ type: 'fields',
874
+ label: reactIntl.defineMessage({
875
+ id: "i6bmbD",
876
+ defaultMessage: [{
877
+ "type": 0,
878
+ "value": "Button"
879
+ }]
880
+ }),
881
+ fields: [{
882
+ name: 'buttonTextStyle',
883
+ type: 'text-style-form',
884
+ label: reactIntl.defineMessage({
885
+ id: "p5RHzq",
886
+ defaultMessage: [{
887
+ "type": 0,
888
+ "value": "Button text style"
889
+ }]
890
+ })
891
+ }, {
892
+ name: 'buttonStyle',
893
+ type: 'box-style-form',
894
+ label: reactIntl.defineMessage({
895
+ id: "nno1Pq",
896
+ defaultMessage: [{
897
+ "type": 0,
898
+ "value": "Button style"
899
+ }]
900
+ })
901
+ }]
832
902
  }, {
833
903
  name: 'boxStyle',
834
904
  type: 'box-style-form',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-keypad",
3
- "version": "0.3.369",
3
+ "version": "0.3.371",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -54,22 +54,22 @@
54
54
  },
55
55
  "dependencies": {
56
56
  "@babel/runtime": "^7.13.10",
57
- "@micromag/core": "^0.3.369",
58
- "@micromag/element-background": "^0.3.369",
59
- "@micromag/element-button": "^0.3.369",
60
- "@micromag/element-call-to-action": "^0.3.369",
61
- "@micromag/element-container": "^0.3.369",
62
- "@micromag/element-footer": "^0.3.369",
63
- "@micromag/element-grid": "^0.3.369",
64
- "@micromag/element-header": "^0.3.369",
65
- "@micromag/element-heading": "^0.3.369",
66
- "@micromag/element-keypad": "^0.3.369",
67
- "@micromag/element-layout": "^0.3.369",
68
- "@micromag/element-scroll": "^0.3.369",
69
- "@micromag/element-text": "^0.3.369",
70
- "@micromag/element-urbania-author": "^0.3.369",
71
- "@micromag/element-visual": "^0.3.369",
72
- "@micromag/transforms": "^0.3.369",
57
+ "@micromag/core": "^0.3.371",
58
+ "@micromag/element-background": "^0.3.371",
59
+ "@micromag/element-button": "^0.3.371",
60
+ "@micromag/element-call-to-action": "^0.3.371",
61
+ "@micromag/element-container": "^0.3.371",
62
+ "@micromag/element-footer": "^0.3.371",
63
+ "@micromag/element-grid": "^0.3.371",
64
+ "@micromag/element-header": "^0.3.371",
65
+ "@micromag/element-heading": "^0.3.371",
66
+ "@micromag/element-keypad": "^0.3.371",
67
+ "@micromag/element-layout": "^0.3.371",
68
+ "@micromag/element-scroll": "^0.3.371",
69
+ "@micromag/element-text": "^0.3.371",
70
+ "@micromag/element-urbania-author": "^0.3.371",
71
+ "@micromag/element-visual": "^0.3.371",
72
+ "@micromag/transforms": "^0.3.371",
73
73
  "@react-spring/core": "^9.6.1",
74
74
  "@react-spring/web": "^9.6.1",
75
75
  "@use-gesture/react": "^10.2.4",
@@ -84,5 +84,5 @@
84
84
  "publishConfig": {
85
85
  "access": "public"
86
86
  },
87
- "gitHead": "55706624c2879ead4acff84015ad51df2b7d293b"
87
+ "gitHead": "8cf85c6ae97228cf36457a674081bce1d82e7d5d"
88
88
  }