@micromag/screen-keypad 0.3.762 → 0.3.764

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 +34 -38
  3. package/package.json +18 -18
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-keypad-close,.micromag-screen-keypad-popup,.micromag-screen-keypad-popupButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-keypad-background,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-keypad-disabled.micromag-screen-keypad-container{overflow:hidden;pointer-events:none}.micromag-screen-keypad-hidden.micromag-screen-keypad-container{display:none;visibility:hidden}.micromag-screen-keypad-placeholder.micromag-screen-keypad-container .micromag-screen-keypad-content{padding:6px;position:relative}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-keypad-close:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-keypad-container{-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-container p{font-weight:inherit;margin-bottom:inherit;margin-top:inherit}.micromag-screen-keypad-container.micromag-screen-keypad-isPlaceholder .micromag-screen-keypad-layout{padding:10px}.micromag-screen-keypad-background{z-index:1}.micromag-screen-keypad-fixedHeader{display:-ms-flexbox;display:flex;left:0;position:absolute;right:0;top:0;z-index:50;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end;opacity:0;padding:10px;pointer-events:none;width:100%}.micromag-screen-keypad-fixedHeader.micromag-screen-keypad-open{opacity:1;pointer-events:auto}.micromag-screen-keypad-close{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-filter:invert(100%);filter:invert(100%);font-weight:700;margin-left:auto}.micromag-screen-keypad-close:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff}.micromag-screen-keypad-closeIcon{border-radius:50%;color:#000;height:25px;padding:0;width:25px}.micromag-screen-keypad-header{left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-footer{bottom:0;left:0;position:absolute;width:100%}.micromag-screen-keypad-inner{height:100%;position:relative;z-index:2}.micromag-screen-keypad-layout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;height:100%;justify-content:flex-start;text-align:center;-webkit-transition:padding .2s ease-out;transition:padding .2s ease-out}.micromag-screen-keypad-subtitle,.micromag-screen-keypad-title{width:100%}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{margin:10px auto;width:100%}.micromag-screen-keypad-emptyTitle{height:100px}.micromag-screen-keypad-emptyText{height:50px}.micromag-screen-keypad-grid{width:85%}.micromag-screen-keypad-item{height:100%;position:relative}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-item{height:0;padding-bottom:100%}.micromag-screen-keypad-placeholderItem{height:0;padding-bottom:60%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-placeholderItem{padding-bottom:100%}.micromag-screen-keypad-button{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;font-weight:inherit;height:100%;justify-content:center;overflow:hidden;padding:0;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%}.micromag-screen-keypad-button:focus-visible,.micromag-screen-keypad-button:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-keypad-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{padding:2px;pointer-events:none}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{cursor:default}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:active,.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:hover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink{-webkit-text-decoration:none;text-decoration:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink:hover{color:inherit}.micromag-screen-keypad-button .micromag-screen-keypad-buttonPlaceholder,.micromag-screen-keypad-button .micromag-screen-keypad-imagePlaceholder{margin:0;width:100%}.micromag-screen-keypad-buttonVisualPlaceholder{width:100%}.micromag-screen-keypad-thumbnail{max-height:50px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-keypad-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-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%}
package/es/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
2
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
3
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
4
+ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
5
  import { animated } from '@react-spring/web';
6
6
  import classNames from 'classnames';
7
7
  import isEmpty from 'lodash/isEmpty';
@@ -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","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","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"};
30
30
 
31
31
  var placeholders = [{
32
32
  id: '1'
@@ -55,40 +55,30 @@ var placeholderPopupBoxStyles = {
55
55
  bottom: 30
56
56
  }
57
57
  };
58
- var stopDragEventsPropagation = {
59
- onTouchMove: function onTouchMove(e) {
60
- return e.stopPropagation();
61
- },
62
- onTouchStart: function onTouchStart(e) {
63
- return e.stopPropagation();
64
- },
65
- onTouchEnd: function onTouchEnd(e) {
66
- return e.stopPropagation();
67
- },
68
- onPointerMove: function onPointerMove(e) {
69
- return e.stopPropagation();
70
- },
71
- onPointerUp: function onPointerUp(e) {
72
- return e.stopPropagation();
73
- },
74
- onPointerDown: function onPointerDown(e) {
75
- return e.stopPropagation();
76
- }
77
- };
78
- _objectSpread(_objectSpread({}, stopDragEventsPropagation), {}, {
79
- onClick: function onClick(e) {
80
- return e.stopPropagation();
81
- },
82
- style: {
83
- position: 'fixed',
84
- zIndex: '1000',
85
- top: 0,
86
- right: 0,
87
- bottom: 0,
88
- left: 0,
89
- cursor: 'default'
90
- }
91
- });
58
+
59
+ // const stopDragEventsPropagation = {
60
+ // onTouchMove: (e) => e.stopPropagation(),
61
+ // onTouchStart: (e) => e.stopPropagation(),
62
+ // onTouchEnd: (e) => e.stopPropagation(),
63
+ // onPointerMove: (e) => e.stopPropagation(),
64
+ // onPointerUp: (e) => e.stopPropagation(),
65
+ // onPointerDown: (e) => e.stopPropagation(),
66
+ // };
67
+
68
+ // const mouseBlocker = {
69
+ // ...stopDragEventsPropagation,
70
+ // onClick: (e) => e.stopPropagation(),
71
+ // style: {
72
+ // position: 'fixed',
73
+ // zIndex: '1000',
74
+ // top: 0,
75
+ // right: 0,
76
+ // bottom: 0,
77
+ // left: 0,
78
+ // cursor: 'default',
79
+ // },
80
+ // };
81
+
92
82
  var propTypes = {
93
83
  items: PropTypes.arrayOf(PropTypes.shape({
94
84
  id: PropTypes.string,
@@ -223,6 +213,8 @@ var KeypadScreen = function KeypadScreen(_ref) {
223
213
  columns = _ref4$columns === void 0 ? null : _ref4$columns,
224
214
  _ref4$spacing = _ref4.spacing,
225
215
  columnSpacing = _ref4$spacing === void 0 ? null : _ref4$spacing,
216
+ _ref4$imageHeight = _ref4.imageHeight,
217
+ imageHeight = _ref4$imageHeight === void 0 ? null : _ref4$imageHeight,
226
218
  _ref4$withSquareItems = _ref4.withSquareItems,
227
219
  withSquareItems = _ref4$withSquareItems === void 0 ? false : _ref4$withSquareItems;
228
220
  var _ref5 = buttonStyles || {},
@@ -492,6 +484,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
492
484
  var isExternalLink = url !== null && !inWebView;
493
485
  var isPopupEmpty = (heading === null || headingBody === null || headingBody === '') && (content === null || contentBody === null || contentBody === '') && popupLargeVisual === null;
494
486
  var finalTextStyle = _objectSpread(_objectSpread({}, buttonTextStyle), finalLabelTextStyle);
487
+ var itemWidth = 'auto';
495
488
  return /*#__PURE__*/React.createElement("div", {
496
489
  key: key,
497
490
  className: styles.item
@@ -516,9 +509,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
516
509
  isEmpty: visual === null
517
510
  }, visual !== null ? /*#__PURE__*/React.createElement(Visual, {
518
511
  className: styles.buttonVisual,
519
- imageClassName: styles.thumbnail,
512
+ imageClassName: classNames([styles.thumbnail, _defineProperty({}, styles.withImageHeight, imageHeight !== null)]),
520
513
  media: visual,
521
- width: "auto"
514
+ resolution: resolution,
515
+ width: itemWidth,
516
+ height: imageHeight || 50 // Also hard coded in css... add control
522
517
  }) : null), /*#__PURE__*/React.createElement(ScreenElement, {
523
518
  placeholder: /*#__PURE__*/React.createElement(PlaceholderButton, null),
524
519
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -731,6 +726,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
731
726
  }, largeVisual !== null ? /*#__PURE__*/React.createElement(Visual, {
732
727
  className: styles.popupVisual,
733
728
  media: largeVisual,
729
+ resolution: resolution,
734
730
  width: "100%"
735
731
  }) : null), /*#__PURE__*/React.createElement(ScreenElement, {
736
732
  placeholder: "button",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-keypad",
3
- "version": "0.3.762",
3
+ "version": "0.3.764",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -65,22 +65,22 @@
65
65
  },
66
66
  "dependencies": {
67
67
  "@babel/runtime": "^7.13.10",
68
- "@micromag/core": "^0.3.757",
69
- "@micromag/element-background": "^0.3.757",
70
- "@micromag/element-button": "^0.3.757",
71
- "@micromag/element-call-to-action": "^0.3.757",
72
- "@micromag/element-container": "^0.3.757",
73
- "@micromag/element-footer": "^0.3.757",
74
- "@micromag/element-grid": "^0.3.757",
75
- "@micromag/element-header": "^0.3.757",
76
- "@micromag/element-heading": "^0.3.757",
77
- "@micromag/element-keypad": "^0.3.757",
78
- "@micromag/element-layout": "^0.3.757",
79
- "@micromag/element-scroll": "^0.3.762",
80
- "@micromag/element-text": "^0.3.757",
81
- "@micromag/element-urbania-author": "^0.3.757",
82
- "@micromag/element-visual": "^0.3.757",
83
- "@micromag/transforms": "^0.3.757",
68
+ "@micromag/core": "^0.3.763",
69
+ "@micromag/element-background": "^0.3.763",
70
+ "@micromag/element-button": "^0.3.763",
71
+ "@micromag/element-call-to-action": "^0.3.763",
72
+ "@micromag/element-container": "^0.3.763",
73
+ "@micromag/element-footer": "^0.3.763",
74
+ "@micromag/element-grid": "^0.3.763",
75
+ "@micromag/element-header": "^0.3.763",
76
+ "@micromag/element-heading": "^0.3.763",
77
+ "@micromag/element-keypad": "^0.3.763",
78
+ "@micromag/element-layout": "^0.3.763",
79
+ "@micromag/element-scroll": "^0.3.763",
80
+ "@micromag/element-text": "^0.3.763",
81
+ "@micromag/element-urbania-author": "^0.3.763",
82
+ "@micromag/element-visual": "^0.3.764",
83
+ "@micromag/transforms": "^0.3.763",
84
84
  "@react-spring/core": "^9.6.1",
85
85
  "@react-spring/web": "^9.6.1",
86
86
  "@use-gesture/react": "^10.3.0",
@@ -95,5 +95,5 @@
95
95
  "access": "public",
96
96
  "registry": "https://registry.npmjs.org/"
97
97
  },
98
- "gitHead": "cb061071018260522046a4c3112f39058c1289ea"
98
+ "gitHead": "fa2349acf0dfb3dbc9b6dc39fa844739c0835307"
99
99
  }