@micromag/viewer 0.3.116 → 0.3.117

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 +2 -2
  2. package/es/index.js +123 -22
  3. package/lib/index.js +122 -21
  4. package/package.json +8 -8
package/assets/css/styles.css CHANGED
@@ -3,8 +3,8 @@
3
3
  .micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuButton{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton:focus-visible,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuButton:focus-visible{outline:3px solid #a13dff}.micromag-viewer-menus-menu-dots-container{position:relative}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-items{margin:0;padding:0;list-style:none}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-items{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;width:100%}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menu{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;width:16px;height:16px;padding-left:10px}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuIcon{display:block;height:100%}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding-left:10px;font-size:26px}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background:rgba(0,0,0,0)}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-items{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:auto;height:100%}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-menu{position:absolute;top:10px;right:10px;padding-left:0}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-withShadow{background:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.4)),to(rgba(0,0,0,0)));background:-o-linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0));background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0))}
4
4
  .micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-button{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-viewer-menus-menu-dot-container{-webkit-flex:1 1;-ms-flex:1 1;flex:1 1}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-button{display:block;width:100%;padding:10px 2px}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-dot{display:block;width:100%;height:2px;border-radius:2px}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot{display:block;position:relative;border-radius:0}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot:after{content:"";position:absolute;left:100%;width:1px;height:100%;background-color:inherit}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot:first-child{border-top-left-radius:2px;border-bottom-left-radius:2px}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot:last-child{border-top-right-radius:2px;border-bottom-right-radius:2px}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-subDot:last-child:after{left:0;width:0;background-color:rgba(0,0,0,0)}.micromag-viewer-menus-menu-dot-container .micromag-viewer-menus-menu-dot-dots{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%}.micromag-viewer-menus-menu-dot-container:last-child{margin-right:0}.micromag-viewer-menus-menu-dot-container.micromag-viewer-menus-menu-dot-vertical .micromag-viewer-menus-menu-dot-button{width:auto;height:100%;padding:2px 10px}.micromag-viewer-menus-menu-dot-container.micromag-viewer-menus-menu-dot-vertical .micromag-viewer-menus-menu-dot-dot{width:2px;height:100%}
5
5
 
6
- .micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-activeScreenBorder,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-scroll{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button:focus-visible,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton:focus-visible{outline:3px solid #a13dff}.micromag-viewer-menus-menu-preview-container{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;padding:10px;background-color:#000;background-repeat:no-repeat;background-position:50%;background-size:cover;color:#fff;-ms-touch-action:none;touch-action:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton{display:block}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton:focus-visible{border:4px solid #a13dff;outline:none}.micromag-viewer-menus-menu-preview-container.micromag-viewer-menus-menu-preview-disabled .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-bottom:20px}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton{display:inline-block;border:0;border-radius:0;background-color:rgba(0,0,0,0);color:inherit;font-size:.9rem;font-weight:600;line-height:1.4;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button{width:20px;margin-left:10px;padding:0}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button:first-child{margin-left:0}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton{z-index:1}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-icon{display:block;width:100%;height:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-buttons{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-organisation{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:30px;height:30px;margin-right:10px;border-radius:50%;background-color:#fff;background-repeat:no-repeat;background-position:50%;background-size:contain}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-title{margin-right:auto;color:#fff;font-family:Helvetica,Arial,sans-serif}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-content,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-nav{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-nav{overflow:hidden}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-items{margin:0;padding:0;list-style:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-items{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item{position:relative}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item.micromag-viewer-menus-menu-preview-active .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-itemContent{padding:2px}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenContainer{position:relative;width:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-activeScreenBorder{border:2px solid #fff}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenContent{-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;background-color:#2b2b2b}
7
- .micromag-viewer-partials-share-modal-container{position:fixed;z-index:1020;top:0;right:0;bottom:0;left:0;-webkit-transition:background-color .2s ease-out;-o-transition:background-color .2s ease-out;transition:background-color .2s ease-out;background-color:rgba(0,0,0,0);pointer-events:none}.micromag-viewer-partials-share-modal-container.micromag-viewer-partials-share-modal-opened{background-color:rgba(28,28,28,.85);pointer-events:auto}.micromag-viewer-partials-share-modal-modal{position:absolute;z-index:2;top:50%;left:50%;width:calc(100% - 1rem);max-width:500px;-webkit-transform:translate(-50%,-50%) translateY(1rem);-ms-transform:translate(-50%,-50%) translateY(1rem);transform:translate(-50%,-50%) translateY(1rem);-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:opacity .2s ease-out,transform .2s ease-out;transition:opacity .2s ease-out,transform .2s ease-out;transition:opacity .2s ease-out,transform .2s ease-out,-webkit-transform .2s ease-out;border-radius:1.5rem;opacity:0;background-color:#e9e9e9;color:#1c1c1c}.micromag-viewer-partials-share-modal-opened .micromag-viewer-partials-share-modal-modal{-webkit-transform:translate(-50%,-50%) translateY(0);-ms-transform:translate(-50%,-50%) translateY(0);transform:translate(-50%,-50%) translateY(0);-webkit-transition:opacity .2s ease-out .1s,-webkit-transform .2s ease-out .1s;transition:opacity .2s ease-out .1s,-webkit-transform .2s ease-out .1s;-o-transition:opacity .2s ease-out .1s,transform .2s ease-out .1s;transition:opacity .2s ease-out .1s,transform .2s ease-out .1s;transition:opacity .2s ease-out .1s,transform .2s ease-out .1s,-webkit-transform .2s ease-out .1s;opacity:1}.micromag-viewer-partials-share-modal-header{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:1rem}.micromag-viewer-partials-share-modal-container .micromag-viewer-partials-share-modal-heading{font-size:1.25rem;font-weight:700}.micromag-viewer-partials-share-modal-close{margin:-2px -2px 0 auto;padding:0}.micromag-viewer-partials-share-modal-closeIcon{color:#1c1c1c}.micromag-viewer-partials-share-modal-content{padding-bottom:1rem}.micromag-viewer-partials-share-modal-buttons{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;padding:0 1rem;overflow-x:auto;overflow-y:hidden}.micromag-viewer-partials-share-modal-shareOption{margin-right:.5rem}.micromag-viewer-partials-share-modal-shareOption:last-child{margin-right:0}.micromag-viewer-partials-share-modal-shareLabel{margin-top:.5rem;color:#6c6c6c;font-size:.75rem;font-weight:400}
6
+ .micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-activeScreenBorder,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-scroll{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button:focus-visible,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton:focus-visible{outline:3px solid #a13dff}.micromag-viewer-menus-menu-preview-container{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;padding:10px;background-color:#000;background-repeat:no-repeat;background-position:50%;background-size:cover;color:#fff;-ms-touch-action:none;touch-action:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton{display:block}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton:focus-visible{border:4px solid #a13dff;outline:none}.micromag-viewer-menus-menu-preview-container.micromag-viewer-menus-menu-preview-disabled .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-bottom:20px}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton{display:inline-block;border:0;border-radius:0;background-color:rgba(0,0,0,0);color:inherit;font-size:.9rem;font-weight:600;line-height:1.4;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button{width:20px;margin-left:10px;padding:0}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button:first-child{margin-left:0}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton{z-index:1}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-icon{display:block;width:100%;height:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-buttons{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;z-index:3;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-organisation{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:30px;height:30px;margin-right:10px;border-radius:50%;background-color:#fff;background-repeat:no-repeat;background-position:50%;background-size:contain}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-title{margin-right:auto;color:#fff;font-family:Helvetica,Arial,sans-serif}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-content,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-nav{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-nav{overflow:hidden}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-items{margin:0;padding:0;list-style:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-items{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item{position:relative}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item.micromag-viewer-menus-menu-preview-active .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-itemContent{padding:2px}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenContainer{position:relative;width:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-subScreenBadge{display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:2;top:.3rem;right:.15rem;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:1.25rem;height:1.25rem;pointer-events:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-subScreenCount{position:relative;z-index:2;top:3px;left:2px;color:#6c6c6c;font-size:.75rem;font-weight:700}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-subScreenIcon{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;fill:#fff}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-activeScreenBorder{border:2px solid #fff}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenContent{-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;background-color:#2b2b2b}
7
+ .micromag-viewer-partials-share-modal-close{display:inline-block;position:relative;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-viewer-partials-share-modal-container{position:fixed;z-index:1020;top:0;right:0;bottom:0;left:0;-webkit-transition:background-color .2s ease-out;-o-transition:background-color .2s ease-out;transition:background-color .2s ease-out;background-color:rgba(0,0,0,0);pointer-events:none}.micromag-viewer-partials-share-modal-container.micromag-viewer-partials-share-modal-opened{background-color:rgba(28,28,28,.85);pointer-events:auto}.micromag-viewer-partials-share-modal-modal{position:absolute;z-index:2;top:50%;left:50%;width:calc(100% - 1rem);max-width:500px;-webkit-transform:translate(-50%,-50%) translateY(1rem);-ms-transform:translate(-50%,-50%) translateY(1rem);transform:translate(-50%,-50%) translateY(1rem);-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:opacity .2s ease-out,transform .2s ease-out;transition:opacity .2s ease-out,transform .2s ease-out;transition:opacity .2s ease-out,transform .2s ease-out,-webkit-transform .2s ease-out;border-radius:1.5rem;opacity:0;background-color:#e9e9e9;color:#1c1c1c}.micromag-viewer-partials-share-modal-opened .micromag-viewer-partials-share-modal-modal{-webkit-transform:translate(-50%,-50%) translateY(0);-ms-transform:translate(-50%,-50%) translateY(0);transform:translate(-50%,-50%) translateY(0);-webkit-transition:opacity .2s ease-out .1s,-webkit-transform .2s ease-out .1s;transition:opacity .2s ease-out .1s,-webkit-transform .2s ease-out .1s;-o-transition:opacity .2s ease-out .1s,transform .2s ease-out .1s;transition:opacity .2s ease-out .1s,transform .2s ease-out .1s;transition:opacity .2s ease-out .1s,transform .2s ease-out .1s,-webkit-transform .2s ease-out .1s;opacity:1}.micromag-viewer-partials-share-modal-header{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:1rem}.micromag-viewer-partials-share-modal-heading{font-size:1.25rem!important;font-weight:700!important}.micromag-viewer-partials-share-modal-close{margin:-2px -2px 0 auto;padding:0}.micromag-viewer-partials-share-modal-closeIcon{color:#1c1c1c}.micromag-viewer-partials-share-modal-content{padding-bottom:1rem}.micromag-viewer-partials-share-modal-buttons{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;padding:0 1rem;overflow-x:auto;overflow-y:hidden}.micromag-viewer-partials-share-modal-shareOption{margin-right:.5rem}.micromag-viewer-partials-share-modal-shareOption:last-child{margin-right:0}.micromag-viewer-partials-share-modal-shareLabel{margin-top:.5rem;color:#6c6c6c;font-size:.75rem;font-weight:400}.micromag-viewer-partials-share-modal-otherOptions{padding:1rem}.micromag-viewer-partials-share-modal-copyLink{display:-webkit-flex;display:-ms-flexbox;display:flex;border:1px solid;border-radius:.5rem;background-color:#fff;color:#1c1c1c}.micromag-viewer-partials-share-modal-screenUrlInput{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:.75rem;border:0;border-right:1px solid;border-radius:.5rem 0 0 .5rem;background-color:#fff}.micromag-viewer-partials-share-modal-copyUrlButton{padding:.5rem;border:0;color:#1c1c1c}.micromag-viewer-partials-share-modal-copyUrlButton:hover{color:#1c1c1c}.micromag-viewer-partials-share-modal-linkIcon{padding:.25rem}.micromag-viewer-partials-share-modal-successfulCopyMessage{position:absolute;bottom:.5rem;left:50%;padding:.25rem .5rem;-webkit-transform:translate(-50%,.5rem);-ms-transform:translate(-50%,.5rem);transform:translate(-50%,.5rem);-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:opacity .2s ease-out,transform .2s ease-out;transition:opacity .2s ease-out,transform .2s ease-out;transition:opacity .2s ease-out,transform .2s ease-out,-webkit-transform .2s ease-out;border:1px solid;border-radius:.5rem;opacity:0;background-color:#fff;pointer-events:none}.micromag-viewer-partials-share-modal-isLinkCopied .micromag-viewer-partials-share-modal-successfulCopyMessage{-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%);opacity:1}
8
8
  .micromag-viewer-partials-share-button-container{position:relative;white-space:nowrap}
9
9
  .micromag-viewer-screen-container{position:relative;height:100%;pointer-events:none}.micromag-viewer-screen-container.micromag-viewer-screen-current{pointer-events:auto}
10
10
  .micromag-viewer-partials-hand-tap-container{position:relative}.micromag-viewer-partials-hand-tap-container .micromag-viewer-partials-hand-tap-circle{position:absolute;top:-10px;left:0;width:21px;height:21px;-webkit-animation-name:micromag-viewer-partials-hand-tap-pulse;animation-name:micromag-viewer-partials-hand-tap-pulse;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;border:1px solid #fff;border-radius:50%;-webkit-animation-fill-mode:both;animation-fill-mode:both}.micromag-viewer-partials-hand-tap-container .micromag-viewer-partials-hand-tap-hand{width:30px;height:auto;-webkit-animation-name:micromag-viewer-partials-hand-tap-panY;animation-name:micromag-viewer-partials-hand-tap-panY;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes micromag-viewer-partials-hand-tap-pulse{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}50%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:.5}to{-webkit-transform:scale(2);transform:scale(2);opacity:0}}@keyframes micromag-viewer-partials-hand-tap-pulse{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:0}50%{-webkit-transform:scale(1.5);transform:scale(1.5);opacity:.5}to{-webkit-transform:scale(2);transform:scale(2);opacity:0}}@-webkit-keyframes micromag-viewer-partials-hand-tap-panY{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(10px);transform:translateY(10px)}}@keyframes micromag-viewer-partials-hand-tap-panY{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(10px);transform:translateY(10px)}}
package/es/index.js CHANGED
@@ -18,7 +18,7 @@ import { useIntl, FormattedMessage } from 'react-intl';
18
18
  import EventEmitter from 'wolfy87-eventemitter';
19
19
  import { Button, Close, ScreenPreview, Screen, Meta, FontFaces } from '@micromag/core/components';
20
20
  import { useDocumentEvent, useResizeObserver, useTrackEvent, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
21
- import { getStyleFromColor, getStyleFromText, getDeviceScreens } from '@micromag/core/utils';
21
+ import { copyToClipboard, getStyleFromColor, getStyleFromText, getDeviceScreens } from '@micromag/core/utils';
22
22
  import { useSpring, config } from '@react-spring/core';
23
23
  import { animated } from '@react-spring/web';
24
24
  import { useDrag } from '@use-gesture/react';
@@ -228,7 +228,7 @@ var styles$7 = {"container":"micromag-viewer-menus-menu-dots-container","closeBu
228
228
 
229
229
  var styles$6 = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","vertical":"micromag-viewer-menus-menu-dot-vertical"};
230
230
 
231
- var propTypes$c = {
231
+ var propTypes$e = {
232
232
  current: PropTypes.bool,
233
233
  active: PropTypes.bool,
234
234
  colors: PropTypes.shape({
@@ -241,7 +241,7 @@ var propTypes$c = {
241
241
  onClick: PropTypes.func,
242
242
  className: PropTypes.string
243
243
  };
244
- var defaultProps$c = {
244
+ var defaultProps$e = {
245
245
  current: false,
246
246
  active: false,
247
247
  colors: null,
@@ -330,18 +330,18 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
330
330
  }, inner));
331
331
  };
332
332
 
333
- ViewerMenuDot.propTypes = propTypes$c;
334
- ViewerMenuDot.defaultProps = defaultProps$c;
333
+ ViewerMenuDot.propTypes = propTypes$e;
334
+ ViewerMenuDot.defaultProps = defaultProps$e;
335
335
 
336
336
  var styles$5 = {};
337
337
 
338
- var propTypes$b = {
338
+ var propTypes$d = {
339
339
  size: PropTypes.number,
340
340
  spacing: PropTypes.number,
341
341
  color: PropTypes.string,
342
342
  className: PropTypes.string
343
343
  };
344
- var defaultProps$b = {
344
+ var defaultProps$d = {
345
345
  size: 100,
346
346
  spacing: 8,
347
347
  color: 'white',
@@ -373,10 +373,10 @@ var MenuIcon = function MenuIcon(_ref) {
373
373
  }));
374
374
  };
375
375
 
376
- MenuIcon.propTypes = propTypes$b;
377
- MenuIcon.defaultProps = defaultProps$b;
376
+ MenuIcon.propTypes = propTypes$d;
377
+ MenuIcon.defaultProps = defaultProps$d;
378
378
 
379
- var propTypes$a = {
379
+ var propTypes$c = {
380
380
  direction: PropTypes.oneOf(['horizontal', 'vertical']),
381
381
  withShadow: PropTypes.bool,
382
382
  items: PropTypes$1.menuItems,
@@ -392,7 +392,7 @@ var propTypes$a = {
392
392
  onClose: PropTypes.func,
393
393
  className: PropTypes.string
394
394
  };
395
- var defaultProps$a = {
395
+ var defaultProps$c = {
396
396
  direction: 'horizontal',
397
397
  withShadow: false,
398
398
  items: [],
@@ -533,12 +533,66 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
533
533
  }))) : null));
534
534
  };
535
535
 
536
- ViewerMenuDots.propTypes = propTypes$a;
537
- ViewerMenuDots.defaultProps = defaultProps$a;
536
+ ViewerMenuDots.propTypes = propTypes$c;
537
+ ViewerMenuDots.defaultProps = defaultProps$c;
538
+
539
+ var styles$4 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","subScreenBadge":"micromag-viewer-menus-menu-preview-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-preview-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-preview-subScreenIcon","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
540
+
541
+ var propTypes$b = {
542
+ className: PropTypes.string
543
+ };
544
+ var defaultProps$b = {
545
+ className: null
546
+ };
538
547
 
539
- var styles$4 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
548
+ var StackIcon = function StackIcon(_ref) {
549
+ var className = _ref.className;
550
+ return /*#__PURE__*/React.createElement("svg", {
551
+ xmlns: "http://www.w3.org/2000/svg",
552
+ width: "32",
553
+ height: "32",
554
+ viewBox: "0 0 32 32",
555
+ className: classNames([_defineProperty({}, className, className !== null)])
556
+ }, /*#__PURE__*/React.createElement("path", {
557
+ d: "M22.33.15H5A2.9,2.9,0,0,0,2.12,3V23.25H5V3H22.33Zm4.33,5.78H10.78A2.9,2.9,0,0,0,7.89,8.81V29a2.9,2.9,0,0,0,2.89,2.89H26.66A2.89,2.89,0,0,0,29.55,29V8.81A2.88,2.88,0,0,0,26.66,5.93Zm0,23.09Z"
558
+ }));
559
+ };
540
560
 
541
- var styles$3 = {"container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","close":"micromag-viewer-partials-share-modal-close","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","content":"micromag-viewer-partials-share-modal-content","buttons":"micromag-viewer-partials-share-modal-buttons","shareOption":"micromag-viewer-partials-share-modal-shareOption","shareLabel":"micromag-viewer-partials-share-modal-shareLabel"};
561
+ StackIcon.propTypes = propTypes$b;
562
+ StackIcon.defaultProps = defaultProps$b;
563
+
564
+ var propTypes$a = {
565
+ className: PropTypes.string
566
+ };
567
+ var defaultProps$a = {
568
+ className: null
569
+ };
570
+
571
+ var LinkIcon = function LinkIcon(_ref) {
572
+ var className = _ref.className;
573
+ return /*#__PURE__*/React.createElement("svg", {
574
+ xmlns: "http://www.w3.org/2000/svg",
575
+ width: "32",
576
+ height: "32",
577
+ viewBox: "0 0 32 32",
578
+ className: classNames([_defineProperty({}, className, className !== null)])
579
+ }, /*#__PURE__*/React.createElement("path", {
580
+ d: "M18.6,15.34a5.72,5.72,0,0,0-.59-.73L17.36,14a4.93,4.93,0,0,0-7,0L4.55,19.81a4.94,4.94,0,0,0,0,7l.65.64a4.91,4.91,0,0,0,7,0L16.61,23",
581
+ fill: "none",
582
+ stroke: "currentColor",
583
+ strokeWidth: "3"
584
+ }), /*#__PURE__*/React.createElement("path", {
585
+ d: "M13.4,16.66a5.72,5.72,0,0,0,.59.73l.65.64a4.93,4.93,0,0,0,7,0l5.85-5.84a4.94,4.94,0,0,0,0-7l-.65-.64a4.91,4.91,0,0,0-7,0L15.39,9",
586
+ fill: "none",
587
+ stroke: "currentColor",
588
+ strokeWidth: "3"
589
+ }));
590
+ };
591
+
592
+ LinkIcon.propTypes = propTypes$a;
593
+ LinkIcon.defaultProps = defaultProps$a;
594
+
595
+ var styles$3 = {"close":"micromag-viewer-partials-share-modal-close","container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","content":"micromag-viewer-partials-share-modal-content","buttons":"micromag-viewer-partials-share-modal-buttons","shareOption":"micromag-viewer-partials-share-modal-shareOption","shareLabel":"micromag-viewer-partials-share-modal-shareLabel","otherOptions":"micromag-viewer-partials-share-modal-otherOptions","copyLink":"micromag-viewer-partials-share-modal-copyLink","screenUrlInput":"micromag-viewer-partials-share-modal-screenUrlInput","copyUrlButton":"micromag-viewer-partials-share-modal-copyUrlButton","linkIcon":"micromag-viewer-partials-share-modal-linkIcon","successfulCopyMessage":"micromag-viewer-partials-share-modal-successfulCopyMessage","isLinkCopied":"micromag-viewer-partials-share-modal-isLinkCopied"};
542
596
 
543
597
  var propTypes$9 = {
544
598
  url: PropTypes.string,
@@ -567,6 +621,12 @@ var ShareModal = function ShareModal(_ref) {
567
621
  onShare = _ref.onShare,
568
622
  onCancel = _ref.onCancel;
569
623
  var modalRef = useRef();
624
+
625
+ var _useState = useState(false),
626
+ _useState2 = _slicedToArray(_useState, 2),
627
+ linkCopied = _useState2[0],
628
+ setLinkCopied = _useState2[1];
629
+
570
630
  var onShareButtonClick = useCallback(function (type) {
571
631
  if (onShare !== null) {
572
632
  onShare(type);
@@ -588,6 +648,18 @@ var ShareModal = function ShareModal(_ref) {
588
648
  round: true
589
649
  };
590
650
  }, []);
651
+ var onClickCopy = useCallback(function () {
652
+ copyToClipboard(url).then(function () {
653
+ setLinkCopied(true);
654
+ setTimeout(function () {
655
+ setLinkCopied(false);
656
+ }, 2000);
657
+ });
658
+ }, [setLinkCopied]);
659
+ var onClickLinkInput = useCallback(function (e) {
660
+ var target = e.target;
661
+ target.setSelectionRange(0, target.value.length);
662
+ }, []);
591
663
  var onDocumentClick = useCallback(function (e) {
592
664
  var _ref2 = e || {},
593
665
  target = _ref2.target;
@@ -687,7 +759,31 @@ var ShareModal = function ShareModal(_ref) {
687
759
  }, icon, /*#__PURE__*/React.createElement("div", {
688
760
  className: styles$3.shareLabel
689
761
  }, label));
690
- })))));
762
+ })), /*#__PURE__*/React.createElement("div", {
763
+ className: styles$3.otherOptions
764
+ }, /*#__PURE__*/React.createElement("div", {
765
+ className: classNames([styles$3.copyLink, _defineProperty({}, styles$3.isLinkCopied, linkCopied)])
766
+ }, /*#__PURE__*/React.createElement("input", {
767
+ className: styles$3.screenUrlInput,
768
+ type: "text",
769
+ value: url,
770
+ onClick: onClickLinkInput,
771
+ readOnly: true
772
+ }), /*#__PURE__*/React.createElement(Button, {
773
+ className: styles$3.copyUrlButton,
774
+ onClick: onClickCopy,
775
+ focusable: opened
776
+ }, /*#__PURE__*/React.createElement(LinkIcon, {
777
+ className: styles$3.linkIcon
778
+ })), /*#__PURE__*/React.createElement("div", {
779
+ className: styles$3.successfulCopyMessage
780
+ }, /*#__PURE__*/React.createElement(FormattedMessage, {
781
+ id: "XRmkEh",
782
+ defaultMessage: [{
783
+ "type": 0,
784
+ "value": "Link copied to clipboard!"
785
+ }]
786
+ })))))));
691
787
  };
692
788
 
693
789
  ShareModal.propTypes = propTypes$9;
@@ -1012,8 +1108,9 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
1012
1108
  var screenId = item.screenId,
1013
1109
  _item$current = item.current,
1014
1110
  current = _item$current === void 0 ? false : _item$current,
1015
- screen = item.screen;
1016
- item.count;
1111
+ screen = item.screen,
1112
+ _item$count = item.count,
1113
+ count = _item$count === void 0 ? 1 : _item$count;
1017
1114
  var screenAriaLabel = "".concat(intl.formatMessage({
1018
1115
  id: "LkVfwW",
1019
1116
  defaultMessage: [{
@@ -1043,16 +1140,20 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
1043
1140
  }, /*#__PURE__*/React.createElement("div", {
1044
1141
  className: styles$4.screenContainer,
1045
1142
  ref: index === 0 ? firstScreenContainerRef : null
1046
- }, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(ScreenPreview, {
1143
+ }, count > 1 ? /*#__PURE__*/React.createElement("div", {
1144
+ className: styles$4.subScreenBadge
1145
+ }, /*#__PURE__*/React.createElement("span", {
1146
+ className: styles$4.subScreenCount
1147
+ }, count), /*#__PURE__*/React.createElement(StackIcon, {
1148
+ className: styles$4.subScreenIcon
1149
+ })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(ScreenPreview, {
1047
1150
  screenWidth: screenWidth,
1048
1151
  screenHeight: screenHeight,
1049
1152
  width: thumbWidth,
1050
1153
  screen: screen,
1051
1154
  focusable: focusable,
1052
1155
  active: focusable,
1053
- withSize: true // withStack
1054
- // stackCount={count}
1055
-
1156
+ withSize: true
1056
1157
  }) : null, current ? /*#__PURE__*/React.createElement("div", {
1057
1158
  className: styles$4.activeScreenBorder,
1058
1159
  style: borderPrimaryColorStyle
package/lib/index.js CHANGED
@@ -246,7 +246,7 @@ var styles$7 = {"container":"micromag-viewer-menus-menu-dots-container","closeBu
246
246
 
247
247
  var styles$6 = {"container":"micromag-viewer-menus-menu-dot-container","button":"micromag-viewer-menus-menu-dot-button","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","vertical":"micromag-viewer-menus-menu-dot-vertical"};
248
248
 
249
- var propTypes$c = {
249
+ var propTypes$e = {
250
250
  current: PropTypes__default["default"].bool,
251
251
  active: PropTypes__default["default"].bool,
252
252
  colors: PropTypes__default["default"].shape({
@@ -259,7 +259,7 @@ var propTypes$c = {
259
259
  onClick: PropTypes__default["default"].func,
260
260
  className: PropTypes__default["default"].string
261
261
  };
262
- var defaultProps$c = {
262
+ var defaultProps$e = {
263
263
  current: false,
264
264
  active: false,
265
265
  colors: null,
@@ -348,18 +348,18 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
348
348
  }, inner));
349
349
  };
350
350
 
351
- ViewerMenuDot.propTypes = propTypes$c;
352
- ViewerMenuDot.defaultProps = defaultProps$c;
351
+ ViewerMenuDot.propTypes = propTypes$e;
352
+ ViewerMenuDot.defaultProps = defaultProps$e;
353
353
 
354
354
  var styles$5 = {};
355
355
 
356
- var propTypes$b = {
356
+ var propTypes$d = {
357
357
  size: PropTypes__default["default"].number,
358
358
  spacing: PropTypes__default["default"].number,
359
359
  color: PropTypes__default["default"].string,
360
360
  className: PropTypes__default["default"].string
361
361
  };
362
- var defaultProps$b = {
362
+ var defaultProps$d = {
363
363
  size: 100,
364
364
  spacing: 8,
365
365
  color: 'white',
@@ -391,10 +391,10 @@ var MenuIcon = function MenuIcon(_ref) {
391
391
  }));
392
392
  };
393
393
 
394
- MenuIcon.propTypes = propTypes$b;
395
- MenuIcon.defaultProps = defaultProps$b;
394
+ MenuIcon.propTypes = propTypes$d;
395
+ MenuIcon.defaultProps = defaultProps$d;
396
396
 
397
- var propTypes$a = {
397
+ var propTypes$c = {
398
398
  direction: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
399
399
  withShadow: PropTypes__default["default"].bool,
400
400
  items: core$1.PropTypes.menuItems,
@@ -410,7 +410,7 @@ var propTypes$a = {
410
410
  onClose: PropTypes__default["default"].func,
411
411
  className: PropTypes__default["default"].string
412
412
  };
413
- var defaultProps$a = {
413
+ var defaultProps$c = {
414
414
  direction: 'horizontal',
415
415
  withShadow: false,
416
416
  items: [],
@@ -551,12 +551,66 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
551
551
  }))) : null));
552
552
  };
553
553
 
554
- ViewerMenuDots.propTypes = propTypes$a;
555
- ViewerMenuDots.defaultProps = defaultProps$a;
554
+ ViewerMenuDots.propTypes = propTypes$c;
555
+ ViewerMenuDots.defaultProps = defaultProps$c;
556
+
557
+ var styles$4 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","subScreenBadge":"micromag-viewer-menus-menu-preview-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-preview-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-preview-subScreenIcon","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
558
+
559
+ var propTypes$b = {
560
+ className: PropTypes__default["default"].string
561
+ };
562
+ var defaultProps$b = {
563
+ className: null
564
+ };
556
565
 
557
- var styles$4 = {"container":"micromag-viewer-menus-menu-preview-container","screenButton":"micromag-viewer-menus-menu-preview-screenButton","activeScreenBorder":"micromag-viewer-menus-menu-preview-activeScreenBorder","scroll":"micromag-viewer-menus-menu-preview-scroll","header":"micromag-viewer-menus-menu-preview-header","button":"micromag-viewer-menus-menu-preview-button","shareButton":"micromag-viewer-menus-menu-preview-shareButton","disabled":"micromag-viewer-menus-menu-preview-disabled","icon":"micromag-viewer-menus-menu-preview-icon","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","title":"micromag-viewer-menus-menu-preview-title","content":"micromag-viewer-menus-menu-preview-content","nav":"micromag-viewer-menus-menu-preview-nav","item":"micromag-viewer-menus-menu-preview-item","items":"micromag-viewer-menus-menu-preview-items","active":"micromag-viewer-menus-menu-preview-active","itemContent":"micromag-viewer-menus-menu-preview-itemContent","screenContainer":"micromag-viewer-menus-menu-preview-screenContainer","screenContent":"micromag-viewer-menus-menu-preview-screenContent"};
566
+ var StackIcon = function StackIcon(_ref) {
567
+ var className = _ref.className;
568
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
569
+ xmlns: "http://www.w3.org/2000/svg",
570
+ width: "32",
571
+ height: "32",
572
+ viewBox: "0 0 32 32",
573
+ className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)])
574
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
575
+ d: "M22.33.15H5A2.9,2.9,0,0,0,2.12,3V23.25H5V3H22.33Zm4.33,5.78H10.78A2.9,2.9,0,0,0,7.89,8.81V29a2.9,2.9,0,0,0,2.89,2.89H26.66A2.89,2.89,0,0,0,29.55,29V8.81A2.88,2.88,0,0,0,26.66,5.93Zm0,23.09Z"
576
+ }));
577
+ };
558
578
 
559
- var styles$3 = {"container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","close":"micromag-viewer-partials-share-modal-close","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","content":"micromag-viewer-partials-share-modal-content","buttons":"micromag-viewer-partials-share-modal-buttons","shareOption":"micromag-viewer-partials-share-modal-shareOption","shareLabel":"micromag-viewer-partials-share-modal-shareLabel"};
579
+ StackIcon.propTypes = propTypes$b;
580
+ StackIcon.defaultProps = defaultProps$b;
581
+
582
+ var propTypes$a = {
583
+ className: PropTypes__default["default"].string
584
+ };
585
+ var defaultProps$a = {
586
+ className: null
587
+ };
588
+
589
+ var LinkIcon = function LinkIcon(_ref) {
590
+ var className = _ref.className;
591
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
592
+ xmlns: "http://www.w3.org/2000/svg",
593
+ width: "32",
594
+ height: "32",
595
+ viewBox: "0 0 32 32",
596
+ className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)])
597
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
598
+ d: "M18.6,15.34a5.72,5.72,0,0,0-.59-.73L17.36,14a4.93,4.93,0,0,0-7,0L4.55,19.81a4.94,4.94,0,0,0,0,7l.65.64a4.91,4.91,0,0,0,7,0L16.61,23",
599
+ fill: "none",
600
+ stroke: "currentColor",
601
+ strokeWidth: "3"
602
+ }), /*#__PURE__*/React__default["default"].createElement("path", {
603
+ d: "M13.4,16.66a5.72,5.72,0,0,0,.59.73l.65.64a4.93,4.93,0,0,0,7,0l5.85-5.84a4.94,4.94,0,0,0,0-7l-.65-.64a4.91,4.91,0,0,0-7,0L15.39,9",
604
+ fill: "none",
605
+ stroke: "currentColor",
606
+ strokeWidth: "3"
607
+ }));
608
+ };
609
+
610
+ LinkIcon.propTypes = propTypes$a;
611
+ LinkIcon.defaultProps = defaultProps$a;
612
+
613
+ var styles$3 = {"close":"micromag-viewer-partials-share-modal-close","container":"micromag-viewer-partials-share-modal-container","opened":"micromag-viewer-partials-share-modal-opened","modal":"micromag-viewer-partials-share-modal-modal","header":"micromag-viewer-partials-share-modal-header","heading":"micromag-viewer-partials-share-modal-heading","closeIcon":"micromag-viewer-partials-share-modal-closeIcon","content":"micromag-viewer-partials-share-modal-content","buttons":"micromag-viewer-partials-share-modal-buttons","shareOption":"micromag-viewer-partials-share-modal-shareOption","shareLabel":"micromag-viewer-partials-share-modal-shareLabel","otherOptions":"micromag-viewer-partials-share-modal-otherOptions","copyLink":"micromag-viewer-partials-share-modal-copyLink","screenUrlInput":"micromag-viewer-partials-share-modal-screenUrlInput","copyUrlButton":"micromag-viewer-partials-share-modal-copyUrlButton","linkIcon":"micromag-viewer-partials-share-modal-linkIcon","successfulCopyMessage":"micromag-viewer-partials-share-modal-successfulCopyMessage","isLinkCopied":"micromag-viewer-partials-share-modal-isLinkCopied"};
560
614
 
561
615
  var propTypes$9 = {
562
616
  url: PropTypes__default["default"].string,
@@ -585,6 +639,12 @@ var ShareModal = function ShareModal(_ref) {
585
639
  onShare = _ref.onShare,
586
640
  onCancel = _ref.onCancel;
587
641
  var modalRef = React.useRef();
642
+
643
+ var _useState = React.useState(false),
644
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
645
+ linkCopied = _useState2[0],
646
+ setLinkCopied = _useState2[1];
647
+
588
648
  var onShareButtonClick = React.useCallback(function (type) {
589
649
  if (onShare !== null) {
590
650
  onShare(type);
@@ -606,6 +666,18 @@ var ShareModal = function ShareModal(_ref) {
606
666
  round: true
607
667
  };
608
668
  }, []);
669
+ var onClickCopy = React.useCallback(function () {
670
+ utils.copyToClipboard(url).then(function () {
671
+ setLinkCopied(true);
672
+ setTimeout(function () {
673
+ setLinkCopied(false);
674
+ }, 2000);
675
+ });
676
+ }, [setLinkCopied]);
677
+ var onClickLinkInput = React.useCallback(function (e) {
678
+ var target = e.target;
679
+ target.setSelectionRange(0, target.value.length);
680
+ }, []);
609
681
  var onDocumentClick = React.useCallback(function (e) {
610
682
  var _ref2 = e || {},
611
683
  target = _ref2.target;
@@ -705,7 +777,31 @@ var ShareModal = function ShareModal(_ref) {
705
777
  }, icon, /*#__PURE__*/React__default["default"].createElement("div", {
706
778
  className: styles$3.shareLabel
707
779
  }, label));
708
- })))));
780
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
781
+ className: styles$3.otherOptions
782
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
783
+ className: classNames__default["default"]([styles$3.copyLink, _defineProperty__default["default"]({}, styles$3.isLinkCopied, linkCopied)])
784
+ }, /*#__PURE__*/React__default["default"].createElement("input", {
785
+ className: styles$3.screenUrlInput,
786
+ type: "text",
787
+ value: url,
788
+ onClick: onClickLinkInput,
789
+ readOnly: true
790
+ }), /*#__PURE__*/React__default["default"].createElement(components.Button, {
791
+ className: styles$3.copyUrlButton,
792
+ onClick: onClickCopy,
793
+ focusable: opened
794
+ }, /*#__PURE__*/React__default["default"].createElement(LinkIcon, {
795
+ className: styles$3.linkIcon
796
+ })), /*#__PURE__*/React__default["default"].createElement("div", {
797
+ className: styles$3.successfulCopyMessage
798
+ }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
799
+ id: "XRmkEh",
800
+ defaultMessage: [{
801
+ "type": 0,
802
+ "value": "Link copied to clipboard!"
803
+ }]
804
+ })))))));
709
805
  };
710
806
 
711
807
  ShareModal.propTypes = propTypes$9;
@@ -1030,8 +1126,9 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
1030
1126
  var screenId = item.screenId,
1031
1127
  _item$current = item.current,
1032
1128
  current = _item$current === void 0 ? false : _item$current,
1033
- screen = item.screen;
1034
- item.count;
1129
+ screen = item.screen,
1130
+ _item$count = item.count,
1131
+ count = _item$count === void 0 ? 1 : _item$count;
1035
1132
  var screenAriaLabel = "".concat(intl.formatMessage({
1036
1133
  id: "LkVfwW",
1037
1134
  defaultMessage: [{
@@ -1061,16 +1158,20 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
1061
1158
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1062
1159
  className: styles$4.screenContainer,
1063
1160
  ref: index === 0 ? firstScreenContainerRef : null
1064
- }, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React__default["default"].createElement(components.ScreenPreview, {
1161
+ }, count > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
1162
+ className: styles$4.subScreenBadge
1163
+ }, /*#__PURE__*/React__default["default"].createElement("span", {
1164
+ className: styles$4.subScreenCount
1165
+ }, count), /*#__PURE__*/React__default["default"].createElement(StackIcon, {
1166
+ className: styles$4.subScreenIcon
1167
+ })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React__default["default"].createElement(components.ScreenPreview, {
1065
1168
  screenWidth: screenWidth,
1066
1169
  screenHeight: screenHeight,
1067
1170
  width: thumbWidth,
1068
1171
  screen: screen,
1069
1172
  focusable: focusable,
1070
1173
  active: focusable,
1071
- withSize: true // withStack
1072
- // stackCount={count}
1073
-
1174
+ withSize: true
1074
1175
  }) : null, current ? /*#__PURE__*/React__default["default"].createElement("div", {
1075
1176
  className: styles$4.activeScreenBorder,
1076
1177
  style: borderPrimaryColorStyle
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/viewer",
3
- "version": "0.3.116",
3
+ "version": "0.3.117",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -59,12 +59,12 @@
59
59
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
60
60
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
61
61
  "@fortawesome/react-fontawesome": "^0.1.13",
62
- "@micromag/core": "^0.3.115",
63
- "@micromag/element-scroll": "^0.3.115",
64
- "@micromag/elements": "^0.3.115",
65
- "@micromag/fields": "^0.3.115",
66
- "@micromag/intl": "^0.3.115",
67
- "@micromag/screens": "^0.3.116",
62
+ "@micromag/core": "^0.3.117",
63
+ "@micromag/element-scroll": "^0.3.117",
64
+ "@micromag/elements": "^0.3.117",
65
+ "@micromag/fields": "^0.3.117",
66
+ "@micromag/intl": "^0.3.117",
67
+ "@micromag/screens": "^0.3.117",
68
68
  "@react-spring/core": "^9.1.1",
69
69
  "@react-spring/web": "^9.1.1",
70
70
  "@use-gesture/react": "^10.2.4",
@@ -81,5 +81,5 @@
81
81
  "publishConfig": {
82
82
  "access": "public"
83
83
  },
84
- "gitHead": "9b789807a9330a46d18b6b8cb1a11b63aa228996"
84
+ "gitHead": "eab1c9a0b8c19d747fee6472158779f33b1f18d3"
85
85
  }