@micromag/screen-keypad 0.3.764 → 0.3.765

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +115 -111
  3. package/package.json +3 -3
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-keypad-close,.micromag-screen-keypad-popup,.micromag-screen-keypad-popupButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-keypad-background,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-keypad-disabled.micromag-screen-keypad-container{overflow:hidden;pointer-events:none}.micromag-screen-keypad-hidden.micromag-screen-keypad-container{display:none;visibility:hidden}.micromag-screen-keypad-placeholder.micromag-screen-keypad-container .micromag-screen-keypad-content{padding:6px;position:relative}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-keypad-close:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-keypad-container{-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-container p{font-weight:inherit;margin-bottom:inherit;margin-top:inherit}.micromag-screen-keypad-container.micromag-screen-keypad-isPlaceholder .micromag-screen-keypad-layout{padding:10px}.micromag-screen-keypad-background{z-index:1}.micromag-screen-keypad-fixedHeader{display:-ms-flexbox;display:flex;left:0;position:absolute;right:0;top:0;z-index:50;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end;opacity:0;padding:10px;pointer-events:none;width:100%}.micromag-screen-keypad-fixedHeader.micromag-screen-keypad-open{opacity:1;pointer-events:auto}.micromag-screen-keypad-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-filter:invert(100%);filter:invert(100%);font-weight:700;margin-left:auto}.micromag-screen-keypad-close:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff}.micromag-screen-keypad-closeIcon{border-radius:50%;color:#000;height:25px;padding:0;width:25px}.micromag-screen-keypad-header{left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-footer{bottom:0;left:0;position:absolute;width:100%}.micromag-screen-keypad-inner{height:100%;position:relative;z-index:2}.micromag-screen-keypad-layout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;height:100%;justify-content:flex-start;text-align:center;-webkit-transition:padding .2s ease-out;transition:padding .2s ease-out}.micromag-screen-keypad-subtitle,.micromag-screen-keypad-title{width:100%}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{margin:10px auto;width:100%}.micromag-screen-keypad-emptyTitle{height:100px}.micromag-screen-keypad-emptyText{height:50px}.micromag-screen-keypad-grid{width:85%}.micromag-screen-keypad-item{height:100%;position:relative}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-item{height:0;padding-bottom:100%}.micromag-screen-keypad-placeholderItem{height:0;padding-bottom:60%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-placeholderItem{padding-bottom:100%}.micromag-screen-keypad-button{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;font-weight:inherit;height:100%;justify-content:center;overflow:hidden;padding:0;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%}.micromag-screen-keypad-button:focus-visible,.micromag-screen-keypad-button:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-keypad-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{padding:2px;pointer-events:none}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{cursor:default}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:active,.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:hover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink{-webkit-text-decoration:none;text-decoration:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink:hover{color:inherit}.micromag-screen-keypad-button .micromag-screen-keypad-buttonPlaceholder,.micromag-screen-keypad-button .micromag-screen-keypad-imagePlaceholder{margin:0;width:100%}.micromag-screen-keypad-buttonVisualPlaceholder{width:100%}.micromag-screen-keypad-thumbnail{max-height:50px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-keypad-thumbnail.micromag-screen-keypad-withImageHeight{max-height: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;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:10% 7.5%;overflow:hidden;position:relative;z-index:40}.micromag-screen-keypad-popupInner.micromag-screen-keypad-withShadow{-webkit-box-shadow:0 0 2px #1c1c1c;box-shadow:0 0 2px #1c1c1c}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent p{font-weight:inherit;margin-bottom:0;margin-top:0}.micromag-screen-keypad-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;margin-bottom:.5em;width:100%}.micromag-screen-keypad-popupHeading{font-weight:inherit;margin-bottom:.25em}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupHeading{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupVisual{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupHeading{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.micromag-screen-keypad-popupCTA{margin:0 auto;z-index:2}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonLabel{-ms-flex-order:1;order:1}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonLabel{display:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonVisual{height:100%;width:100%!important}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{max-height:none;width:100%!important}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{-o-object-fit:cover;object-fit:cover}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual{z-index:1}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.75)));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75));bottom:0;display:block;height:auto;top:auto;z-index:2}.micromag-screen-keypad-fillImage .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-fillImage .micromag-screen-keypad-emptyButtonVisual{width:100%!important}.micromag-screen-keypad-fillImage .micromag-screen-keypad-thumbnail{-o-object-fit:cover;object-fit:cover;width:100%!important;width:100%}
1
+ .micromag-screen-keypad-close,.micromag-screen-keypad-popup,.micromag-screen-keypad-popupButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-keypad-background,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-keypad-disabled.micromag-screen-keypad-container{overflow:hidden;pointer-events:none}.micromag-screen-keypad-hidden.micromag-screen-keypad-container{display:none;visibility:hidden}.micromag-screen-keypad-placeholder.micromag-screen-keypad-container .micromag-screen-keypad-content{padding:6px;position:relative}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-keypad-close:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-keypad-container{-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-container p{font-weight:inherit;margin-bottom:inherit;margin-top:inherit}.micromag-screen-keypad-container.micromag-screen-keypad-isPlaceholder .micromag-screen-keypad-layout{padding:10px}.micromag-screen-keypad-background{z-index:1}.micromag-screen-keypad-fixedHeader{display:-ms-flexbox;display:flex;left:0;position:absolute;right:0;top:0;z-index:50;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end;opacity:0;padding:10px;pointer-events:none;width:100%}.micromag-screen-keypad-fixedHeader.micromag-screen-keypad-open{opacity:1;pointer-events:auto}.micromag-screen-keypad-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-filter:invert(100%);filter:invert(100%);font-weight:700;margin-left:auto}.micromag-screen-keypad-close:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff}.micromag-screen-keypad-closeIcon{border-radius:50%;color:#000;height:25px;padding:0;width:25px}.micromag-screen-keypad-header{left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-footer{bottom:0;left:0;position:absolute;width:100%}.micromag-screen-keypad-inner{height:100%;position:relative;z-index:2}.micromag-screen-keypad-layout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;height:100%;justify-content:flex-start;text-align:center;-webkit-transition:padding .2s ease-out;transition:padding .2s ease-out}.micromag-screen-keypad-subtitle,.micromag-screen-keypad-title{width:100%}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{margin:10px auto;width:100%}.micromag-screen-keypad-emptyTitle{height:100px}.micromag-screen-keypad-emptyText{height:50px}.micromag-screen-keypad-grid{width:85%}.micromag-screen-keypad-item{height:100%;position:relative}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-item{height:0;padding-bottom:100%}.micromag-screen-keypad-placeholderItem{height:0;padding-bottom:60%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-placeholderItem{padding-bottom:100%}.micromag-screen-keypad-button{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;font-weight:inherit;height:100%;justify-content:center;overflow:hidden;padding:0;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%}.micromag-screen-keypad-button:focus-visible,.micromag-screen-keypad-button:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-keypad-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{padding:2px;pointer-events:none}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{cursor:default}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:active,.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:hover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink{-webkit-text-decoration:none;text-decoration:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink:hover{color:inherit}.micromag-screen-keypad-button .micromag-screen-keypad-buttonPlaceholder,.micromag-screen-keypad-button .micromag-screen-keypad-imagePlaceholder{margin:0;width:100%}.micromag-screen-keypad-buttonVisualPlaceholder{width:100%}.micromag-screen-keypad-thumbnail{max-height:50px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-keypad-thumbnail.micromag-screen-keypad-withImageSize{max-height:100%}.micromag-screen-keypad-buttonLabel{padding:5px;width:100%}.micromag-screen-keypad-empty{margin-bottom:10px;padding:10px;width:100%}.micromag-screen-keypad-emptyButtonVisual{margin-bottom:5px;padding:10px 5px}.micromag-screen-keypad-emptyButtonLabel{margin-bottom:5px;padding:2px 5px}.micromag-screen-keypad-popupBackdrop{-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(0,0,0,.2);pointer-events:none;z-index:2}.micromag-screen-keypad-popup{height:100%;position:fixed;right:0;top:0;-ms-touch-action:none;touch-action:none;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%;z-index:6}.micromag-screen-keypad-popup:active,.micromag-screen-keypad-popup:hover{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupButton{height:100%;position:relative;text-align:left;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%;z-index:3}.micromag-screen-keypad-popupButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupScroll{height:100%;width:100%}.micromag-screen-keypad-popupInner{background-color:#1c1c1c;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:10% 7.5%;overflow:hidden;position:relative;z-index:40}.micromag-screen-keypad-popupInner.micromag-screen-keypad-withShadow{-webkit-box-shadow:0 0 2px #1c1c1c;box-shadow:0 0 2px #1c1c1c}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent p{font-weight:inherit;margin-bottom:0;margin-top:0}.micromag-screen-keypad-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;margin-bottom:.5em;width:100%}.micromag-screen-keypad-popupHeading{font-weight:inherit;margin-bottom:.25em}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupHeading{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupVisual{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupHeading{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.micromag-screen-keypad-popupCTA{margin:0 auto;z-index:2}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonLabel{-ms-flex-order:1;order:1}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonLabel{display:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonVisual{height:100%;width:100%!important}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{max-height:none;width:100%!important}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{-o-object-fit:cover;object-fit:cover}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual{z-index:1}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.75)));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75));bottom:0;display:block;height:auto;top:auto;z-index:2}.micromag-screen-keypad-fillImage .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-fillImage .micromag-screen-keypad-emptyButtonVisual{width:100%!important}.micromag-screen-keypad-fillImage .micromag-screen-keypad-thumbnail{-o-object-fit:cover;object-fit:cover;width:100%!important;width:100%}
package/es/index.js CHANGED
@@ -26,7 +26,7 @@ import Scroll from '@micromag/element-scroll';
26
26
  import Text from '@micromag/element-text';
27
27
  import Visual from '@micromag/element-visual';
28
28
 
29
- var styles = {"popupButton":"micromag-screen-keypad-popupButton","popup":"micromag-screen-keypad-popup","close":"micromag-screen-keypad-close","layoutLabelOver":"micromag-screen-keypad-layoutLabelOver","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","buttonLabel":"micromag-screen-keypad-buttonLabel","withSquareItems":"micromag-screen-keypad-withSquareItems","layoutNoLabel":"micromag-screen-keypad-layoutNoLabel","thumbnail":"micromag-screen-keypad-thumbnail","popupBackdrop":"micromag-screen-keypad-popupBackdrop","button":"micromag-screen-keypad-button","background":"micromag-screen-keypad-background","container":"micromag-screen-keypad-container","disabled":"micromag-screen-keypad-disabled","hidden":"micromag-screen-keypad-hidden","placeholder":"micromag-screen-keypad-placeholder","content":"micromag-screen-keypad-content","emptyTitle":"micromag-screen-keypad-emptyTitle","emptyText":"micromag-screen-keypad-emptyText","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","fixedHeader":"micromag-screen-keypad-fixedHeader","open":"micromag-screen-keypad-open","closeIcon":"micromag-screen-keypad-closeIcon","header":"micromag-screen-keypad-header","footer":"micromag-screen-keypad-footer","inner":"micromag-screen-keypad-inner","title":"micromag-screen-keypad-title","subtitle":"micromag-screen-keypad-subtitle","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","placeholderItem":"micromag-screen-keypad-placeholderItem","isEmpty":"micromag-screen-keypad-isEmpty","disableHover":"micromag-screen-keypad-disableHover","isLink":"micromag-screen-keypad-isLink","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","buttonVisualPlaceholder":"micromag-screen-keypad-buttonVisualPlaceholder","withImageHeight":"micromag-screen-keypad-withImageHeight","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popupScroll":"micromag-screen-keypad-popupScroll","popupInner":"micromag-screen-keypad-popupInner","withShadow":"micromag-screen-keypad-withShadow","popupContent":"micromag-screen-keypad-popupContent","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","emptyCTA":"micromag-screen-keypad-emptyCTA","popupCTA":"micromag-screen-keypad-popupCTA","contentBottom":"micromag-screen-keypad-contentBottom","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual","fillImage":"micromag-screen-keypad-fillImage"};
29
+ var styles = {"popupButton":"micromag-screen-keypad-popupButton","popup":"micromag-screen-keypad-popup","close":"micromag-screen-keypad-close","layoutLabelOver":"micromag-screen-keypad-layoutLabelOver","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","buttonLabel":"micromag-screen-keypad-buttonLabel","withSquareItems":"micromag-screen-keypad-withSquareItems","layoutNoLabel":"micromag-screen-keypad-layoutNoLabel","thumbnail":"micromag-screen-keypad-thumbnail","popupBackdrop":"micromag-screen-keypad-popupBackdrop","button":"micromag-screen-keypad-button","background":"micromag-screen-keypad-background","container":"micromag-screen-keypad-container","disabled":"micromag-screen-keypad-disabled","hidden":"micromag-screen-keypad-hidden","placeholder":"micromag-screen-keypad-placeholder","content":"micromag-screen-keypad-content","emptyTitle":"micromag-screen-keypad-emptyTitle","emptyText":"micromag-screen-keypad-emptyText","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","fixedHeader":"micromag-screen-keypad-fixedHeader","open":"micromag-screen-keypad-open","closeIcon":"micromag-screen-keypad-closeIcon","header":"micromag-screen-keypad-header","footer":"micromag-screen-keypad-footer","inner":"micromag-screen-keypad-inner","title":"micromag-screen-keypad-title","subtitle":"micromag-screen-keypad-subtitle","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","placeholderItem":"micromag-screen-keypad-placeholderItem","isEmpty":"micromag-screen-keypad-isEmpty","disableHover":"micromag-screen-keypad-disableHover","isLink":"micromag-screen-keypad-isLink","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","buttonVisualPlaceholder":"micromag-screen-keypad-buttonVisualPlaceholder","withImageSize":"micromag-screen-keypad-withImageSize","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popupScroll":"micromag-screen-keypad-popupScroll","popupInner":"micromag-screen-keypad-popupInner","withShadow":"micromag-screen-keypad-withShadow","popupContent":"micromag-screen-keypad-popupContent","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","emptyCTA":"micromag-screen-keypad-emptyCTA","popupCTA":"micromag-screen-keypad-popupCTA","contentBottom":"micromag-screen-keypad-contentBottom","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual","fillImage":"micromag-screen-keypad-fillImage"};
30
30
 
31
31
  var placeholders = [{
32
32
  id: '1'
@@ -213,37 +213,42 @@ var KeypadScreen = function KeypadScreen(_ref) {
213
213
  columns = _ref4$columns === void 0 ? null : _ref4$columns,
214
214
  _ref4$spacing = _ref4.spacing,
215
215
  columnSpacing = _ref4$spacing === void 0 ? null : _ref4$spacing,
216
- _ref4$imageHeight = _ref4.imageHeight,
217
- imageHeight = _ref4$imageHeight === void 0 ? null : _ref4$imageHeight,
216
+ _ref4$image = _ref4.image,
217
+ keypadImage = _ref4$image === void 0 ? null : _ref4$image,
218
218
  _ref4$withSquareItems = _ref4.withSquareItems,
219
219
  withSquareItems = _ref4$withSquareItems === void 0 ? false : _ref4$withSquareItems;
220
- var _ref5 = buttonStyles || {},
221
- _ref5$layout = _ref5.layout,
222
- buttonLayout = _ref5$layout === void 0 ? null : _ref5$layout,
223
- _ref5$textStyle = _ref5.textStyle,
224
- buttonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle,
225
- _ref5$boxStyle = _ref5.boxStyle,
226
- buttonBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle,
227
- _ref5$fillImage = _ref5.fillImage,
228
- fillImage = _ref5$fillImage === void 0 ? false : _ref5$fillImage,
229
- _ref5$alignment = _ref5.alignment,
230
- buttonAlignment = _ref5$alignment === void 0 ? null : _ref5$alignment;
231
- var _ref6 = popupStyles || {},
220
+ var _ref5 = keypadImage || {},
221
+ _ref5$width = _ref5.width,
222
+ imageWidth = _ref5$width === void 0 ? null : _ref5$width,
223
+ _ref5$height = _ref5.height,
224
+ imageHeight = _ref5$height === void 0 ? null : _ref5$height;
225
+ var _ref6 = buttonStyles || {},
232
226
  _ref6$layout = _ref6.layout,
233
- popupLayout = _ref6$layout === void 0 ? null : _ref6$layout,
234
- _ref6$headingTextStyl = _ref6.headingTextStyle,
235
- headingTextStyle = _ref6$headingTextStyl === void 0 ? null : _ref6$headingTextStyl,
236
- _ref6$contentTextStyl = _ref6.contentTextStyle,
237
- contentTextStyle = _ref6$contentTextStyl === void 0 ? null : _ref6$contentTextStyl,
238
- _ref6$button = _ref6.button,
239
- popupButtons = _ref6$button === void 0 ? null : _ref6$button,
227
+ buttonLayout = _ref6$layout === void 0 ? null : _ref6$layout,
228
+ _ref6$textStyle = _ref6.textStyle,
229
+ buttonTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle,
240
230
  _ref6$boxStyle = _ref6.boxStyle,
241
- popupBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
242
- var _ref7 = popupButtons || {},
243
- _ref7$buttonTextStyle = _ref7.buttonTextStyle,
244
- popupButtonsTextStyle = _ref7$buttonTextStyle === void 0 ? null : _ref7$buttonTextStyle,
231
+ buttonBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle,
232
+ _ref6$fillImage = _ref6.fillImage,
233
+ fillImage = _ref6$fillImage === void 0 ? false : _ref6$fillImage,
234
+ _ref6$alignment = _ref6.alignment,
235
+ buttonAlignment = _ref6$alignment === void 0 ? null : _ref6$alignment;
236
+ var _ref7 = popupStyles || {},
237
+ _ref7$layout = _ref7.layout,
238
+ popupLayout = _ref7$layout === void 0 ? null : _ref7$layout,
239
+ _ref7$headingTextStyl = _ref7.headingTextStyle,
240
+ headingTextStyle = _ref7$headingTextStyl === void 0 ? null : _ref7$headingTextStyl,
241
+ _ref7$contentTextStyl = _ref7.contentTextStyle,
242
+ contentTextStyle = _ref7$contentTextStyl === void 0 ? null : _ref7$contentTextStyl,
243
+ _ref7$button = _ref7.button,
244
+ popupButtons = _ref7$button === void 0 ? null : _ref7$button,
245
245
  _ref7$boxStyle = _ref7.boxStyle,
246
- popupButtonsBoxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle;
246
+ popupBoxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle;
247
+ var _ref8 = popupButtons || {},
248
+ _ref8$buttonTextStyle = _ref8.buttonTextStyle,
249
+ popupButtonsTextStyle = _ref8$buttonTextStyle === void 0 ? null : _ref8$buttonTextStyle,
250
+ _ref8$boxStyle = _ref8.boxStyle,
251
+ popupButtonsBoxStyle = _ref8$boxStyle === void 0 ? null : _ref8$boxStyle;
247
252
  var popupLayoutClassName = useMemo(function () {
248
253
  return popupLayout !== null ? camelCase(popupLayout) : '';
249
254
  }, [popupLayout]);
@@ -255,48 +260,48 @@ var KeypadScreen = function KeypadScreen(_ref) {
255
260
  _useState4 = _slicedToArray(_useState3, 2),
256
261
  popup = _useState4[0],
257
262
  setPopup = _useState4[1];
258
- var _ref8 = popup || {},
259
- _ref8$heading = _ref8.heading,
260
- popupHeading = _ref8$heading === void 0 ? null : _ref8$heading,
261
- _ref8$content = _ref8.content,
262
- popupContent = _ref8$content === void 0 ? null : _ref8$content,
263
- _ref8$largeVisual = _ref8.largeVisual,
264
- largeVisual = _ref8$largeVisual === void 0 ? null : _ref8$largeVisual,
265
- _ref8$button = _ref8.button,
266
- popupButton = _ref8$button === void 0 ? null : _ref8$button,
267
- _ref8$popupBoxStyle = _ref8.popupBoxStyle,
268
- singlePopupBoxStyle = _ref8$popupBoxStyle === void 0 ? null : _ref8$popupBoxStyle;
263
+ var _ref9 = popup || {},
264
+ _ref9$heading = _ref9.heading,
265
+ popupHeading = _ref9$heading === void 0 ? null : _ref9$heading,
266
+ _ref9$content = _ref9.content,
267
+ popupContent = _ref9$content === void 0 ? null : _ref9$content,
268
+ _ref9$largeVisual = _ref9.largeVisual,
269
+ largeVisual = _ref9$largeVisual === void 0 ? null : _ref9$largeVisual,
270
+ _ref9$button = _ref9.button,
271
+ popupButton = _ref9$button === void 0 ? null : _ref9$button,
272
+ _ref9$popupBoxStyle = _ref9.popupBoxStyle,
273
+ singlePopupBoxStyle = _ref9$popupBoxStyle === void 0 ? null : _ref9$popupBoxStyle;
269
274
  var hasPopupHeading = isTextFilled(popupHeading);
270
- var _ref9 = popupHeading || {},
271
- _ref9$textStyle = _ref9.textStyle,
272
- popupHeadingTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
273
- var hasPopupContent = isTextFilled(popupContent);
274
- var _ref0 = popupContent || {},
275
+ var _ref0 = popupHeading || {},
275
276
  _ref0$textStyle = _ref0.textStyle,
276
- popupContentTextStyle = _ref0$textStyle === void 0 ? null : _ref0$textStyle;
277
- var _ref1 = popupButton || {},
278
- _ref1$label = _ref1.label,
279
- buttonLabel = _ref1$label === void 0 ? null : _ref1$label,
280
- _ref1$url = _ref1.url,
281
- buttonUrl = _ref1$url === void 0 ? null : _ref1$url,
282
- _ref1$inWebView = _ref1.inWebView,
283
- popupInWebView = _ref1$inWebView === void 0 ? false : _ref1$inWebView,
284
- _ref1$boxStyle = _ref1.boxStyle,
285
- popupButtonBoxStyle = _ref1$boxStyle === void 0 ? null : _ref1$boxStyle;
277
+ popupHeadingTextStyle = _ref0$textStyle === void 0 ? null : _ref0$textStyle;
278
+ var hasPopupContent = isTextFilled(popupContent);
279
+ var _ref1 = popupContent || {},
280
+ _ref1$textStyle = _ref1.textStyle,
281
+ popupContentTextStyle = _ref1$textStyle === void 0 ? null : _ref1$textStyle;
282
+ var _ref10 = popupButton || {},
283
+ _ref10$label = _ref10.label,
284
+ buttonLabel = _ref10$label === void 0 ? null : _ref10$label,
285
+ _ref10$url = _ref10.url,
286
+ buttonUrl = _ref10$url === void 0 ? null : _ref10$url,
287
+ _ref10$inWebView = _ref10.inWebView,
288
+ popupInWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
289
+ _ref10$boxStyle = _ref10.boxStyle,
290
+ popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
286
291
  var onItemClick = useCallback(function (e, item, index) {
287
292
  e.stopPropagation();
288
293
  if (isNotInteractive) {
289
294
  return;
290
295
  }
291
- var _ref10 = item || {},
292
- _ref10$label = _ref10.label,
293
- itemLabel = _ref10$label === void 0 ? null : _ref10$label,
294
- _ref10$heading = _ref10.heading,
295
- heading = _ref10$heading === void 0 ? null : _ref10$heading,
296
- _ref10$inWebView = _ref10.inWebView,
297
- inWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
298
- _ref10$url = _ref10.url,
299
- url = _ref10$url === void 0 ? null : _ref10$url;
296
+ var _ref11 = item || {},
297
+ _ref11$label = _ref11.label,
298
+ itemLabel = _ref11$label === void 0 ? null : _ref11$label,
299
+ _ref11$heading = _ref11.heading,
300
+ heading = _ref11$heading === void 0 ? null : _ref11$heading,
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;
300
305
  if (inWebView && url !== null) {
301
306
  openWebView({
302
307
  url: url
@@ -305,9 +310,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
305
310
  setPopup(item);
306
311
  setShowPopup(true);
307
312
  }
308
- var _ref11 = heading || {},
309
- _ref11$body = _ref11.body,
310
- headingBody = _ref11$body === void 0 ? null : _ref11$body;
313
+ var _ref12 = heading || {},
314
+ _ref12$body = _ref12.body,
315
+ headingBody = _ref12$body === void 0 ? null : _ref12$body;
311
316
  var finalLabel = isString(itemLabel) ? itemLabel : (itemLabel || {}).body || null;
312
317
  trackScreenEvent('click_item', ["#".concat(index + 1), finalLabel || headingBody || ''].filter(function (it) {
313
318
  return !isEmpty(it);
@@ -341,21 +346,21 @@ var KeypadScreen = function KeypadScreen(_ref) {
341
346
  _useState6 = _slicedToArray(_useState5, 2),
342
347
  popupDragDirection = _useState6[0],
343
348
  setPopupDragDirection = _useState6[1];
344
- var onPopupScrollHeightChange = useCallback(function (_ref12) {
345
- var _ref12$scrolleeHeight = _ref12.scrolleeHeight,
346
- scrolleeHeight = _ref12$scrolleeHeight === void 0 ? 0 : _ref12$scrolleeHeight;
349
+ var onPopupScrollHeightChange = useCallback(function (_ref13) {
350
+ var _ref13$scrolleeHeight = _ref13.scrolleeHeight,
351
+ scrolleeHeight = _ref13$scrolleeHeight === void 0 ? 0 : _ref13$scrolleeHeight;
347
352
  if (Math.floor(scrolleeHeight) >= Math.floor(height)) {
348
353
  setPopupDragDirection('top');
349
354
  } else {
350
355
  setPopupDragDirection('bottom');
351
356
  }
352
357
  }, [height]);
353
- var computePopupProgress = useCallback(function (_ref13) {
354
- var dragActive = _ref13.active,
355
- _ref13$movement = _slicedToArray(_ref13.movement, 2),
356
- my = _ref13$movement[1],
357
- _ref13$velocity = _slicedToArray(_ref13.velocity, 2),
358
- vy = _ref13$velocity[1];
358
+ var computePopupProgress = useCallback(function (_ref14) {
359
+ var dragActive = _ref14.active,
360
+ _ref14$movement = _slicedToArray(_ref14.movement, 2),
361
+ my = _ref14$movement[1],
362
+ _ref14$velocity = _slicedToArray(_ref14.velocity, 2),
363
+ vy = _ref14$velocity[1];
359
364
  var damper = 0.5;
360
365
  var delta = Math.abs(my) / window.innerHeight;
361
366
  var reachedThreshold = vy > 1 || delta > 0.3;
@@ -441,50 +446,49 @@ var KeypadScreen = function KeypadScreen(_ref) {
441
446
  }, [showPopup, onCloseModal]);
442
447
  var gridItems = useMemo(function () {
443
448
  return (items === null || items.length === 0 ? placeholders : items).map(function (item, index) {
444
- var _ref14 = item || {},
445
- _ref14$id = _ref14.id,
446
- id = _ref14$id === void 0 ? null : _ref14$id,
447
- _ref14$label = _ref14.label,
448
- itemLabel = _ref14$label === void 0 ? null : _ref14$label,
449
- _ref14$visual = _ref14.visual,
450
- visual = _ref14$visual === void 0 ? null : _ref14$visual,
451
- _ref14$boxStyle = _ref14.boxStyle,
452
- boxStyle = _ref14$boxStyle === void 0 ? null : _ref14$boxStyle,
453
- _ref14$alignment = _ref14.alignment,
454
- alignment = _ref14$alignment === void 0 ? null : _ref14$alignment,
455
- _ref14$heading = _ref14.heading,
456
- heading = _ref14$heading === void 0 ? null : _ref14$heading,
457
- _ref14$content = _ref14.content,
458
- content = _ref14$content === void 0 ? null : _ref14$content,
459
- _ref14$url = _ref14.url,
460
- url = _ref14$url === void 0 ? null : _ref14$url,
461
- _ref14$inWebView = _ref14.inWebView,
462
- inWebView = _ref14$inWebView === void 0 ? false : _ref14$inWebView,
463
- _ref14$largeVisual = _ref14.largeVisual,
464
- popupLargeVisual = _ref14$largeVisual === void 0 ? null : _ref14$largeVisual;
465
- var _ref15 = visual || {},
449
+ var _ref15 = item || {},
450
+ _ref15$id = _ref15.id,
451
+ id = _ref15$id === void 0 ? null : _ref15$id,
452
+ _ref15$label = _ref15.label,
453
+ itemLabel = _ref15$label === void 0 ? null : _ref15$label,
454
+ _ref15$visual = _ref15.visual,
455
+ visual = _ref15$visual === void 0 ? null : _ref15$visual,
456
+ _ref15$boxStyle = _ref15.boxStyle,
457
+ boxStyle = _ref15$boxStyle === void 0 ? null : _ref15$boxStyle,
458
+ _ref15$alignment = _ref15.alignment,
459
+ alignment = _ref15$alignment === void 0 ? null : _ref15$alignment,
460
+ _ref15$heading = _ref15.heading,
461
+ heading = _ref15$heading === void 0 ? null : _ref15$heading,
462
+ _ref15$content = _ref15.content,
463
+ content = _ref15$content === void 0 ? null : _ref15$content,
466
464
  _ref15$url = _ref15.url,
467
- visualUrl = _ref15$url === void 0 ? null : _ref15$url;
468
- var _ref16 = heading || {},
469
- _ref16$body = _ref16.body,
470
- headingBody = _ref16$body === void 0 ? null : _ref16$body;
471
- var _ref17 = content || {},
465
+ url = _ref15$url === void 0 ? null : _ref15$url,
466
+ _ref15$inWebView = _ref15.inWebView,
467
+ inWebView = _ref15$inWebView === void 0 ? false : _ref15$inWebView,
468
+ _ref15$largeVisual = _ref15.largeVisual,
469
+ popupLargeVisual = _ref15$largeVisual === void 0 ? null : _ref15$largeVisual;
470
+ var _ref16 = visual || {},
471
+ _ref16$url = _ref16.url,
472
+ visualUrl = _ref16$url === void 0 ? null : _ref16$url;
473
+ var _ref17 = heading || {},
472
474
  _ref17$body = _ref17.body,
473
- contentBody = _ref17$body === void 0 ? null : _ref17$body;
475
+ headingBody = _ref17$body === void 0 ? null : _ref17$body;
476
+ var _ref18 = content || {},
477
+ _ref18$body = _ref18.body,
478
+ contentBody = _ref18$body === void 0 ? null : _ref18$body;
474
479
  var finalLabel = isString(itemLabel) ? {
475
480
  body: itemLabel
476
481
  } : itemLabel || {};
477
- var _ref18 = finalLabel || {},
478
- _ref18$body = _ref18.body,
479
- label = _ref18$body === void 0 ? null : _ref18$body,
480
- _ref18$textStyle = _ref18.textStyle,
481
- finalLabelTextStyle = _ref18$textStyle === void 0 ? null : _ref18$textStyle;
482
+ var _ref19 = finalLabel || {},
483
+ _ref19$body = _ref19.body,
484
+ label = _ref19$body === void 0 ? null : _ref19$body,
485
+ _ref19$textStyle = _ref19.textStyle,
486
+ finalLabelTextStyle = _ref19$textStyle === void 0 ? null : _ref19$textStyle;
482
487
  var key = label || visualUrl || id;
483
488
  var itemIsEmpty = label === null && visual === null;
484
489
  var isExternalLink = url !== null && !inWebView;
485
490
  var isPopupEmpty = (heading === null || headingBody === null || headingBody === '') && (content === null || contentBody === null || contentBody === '') && popupLargeVisual === null;
486
491
  var finalTextStyle = _objectSpread(_objectSpread({}, buttonTextStyle), finalLabelTextStyle);
487
- var itemWidth = 'auto';
488
492
  return /*#__PURE__*/React.createElement("div", {
489
493
  key: key,
490
494
  className: styles.item
@@ -509,11 +513,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
509
513
  isEmpty: visual === null
510
514
  }, visual !== null ? /*#__PURE__*/React.createElement(Visual, {
511
515
  className: styles.buttonVisual,
512
- imageClassName: classNames([styles.thumbnail, _defineProperty({}, styles.withImageHeight, imageHeight !== null)]),
516
+ imageClassName: classNames([styles.thumbnail, _defineProperty({}, styles.withImageSize, imageWidth !== null || imageHeight !== null)]),
513
517
  media: visual,
514
518
  resolution: resolution,
515
- width: itemWidth,
516
- height: imageHeight || 50 // Also hard coded in css... add control
519
+ width: imageWidth || 'auto',
520
+ height: imageHeight || (imageWidth !== null ? 'auto' : null)
517
521
  }) : null), /*#__PURE__*/React.createElement(ScreenElement, {
518
522
  placeholder: /*#__PURE__*/React.createElement(PlaceholderButton, null),
519
523
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-keypad",
3
- "version": "0.3.764",
3
+ "version": "0.3.765",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -79,7 +79,7 @@
79
79
  "@micromag/element-scroll": "^0.3.763",
80
80
  "@micromag/element-text": "^0.3.763",
81
81
  "@micromag/element-urbania-author": "^0.3.763",
82
- "@micromag/element-visual": "^0.3.764",
82
+ "@micromag/element-visual": "^0.3.765",
83
83
  "@micromag/transforms": "^0.3.763",
84
84
  "@react-spring/core": "^9.6.1",
85
85
  "@react-spring/web": "^9.6.1",
@@ -95,5 +95,5 @@
95
95
  "access": "public",
96
96
  "registry": "https://registry.npmjs.org/"
97
97
  },
98
- "gitHead": "fa2349acf0dfb3dbc9b6dc39fa844739c0835307"
98
+ "gitHead": "d62054de23d26acb44ae9bace7b3eacc99c7f11e"
99
99
  }