@micromag/viewer 0.3.115 → 0.3.118

package/assets/css/styles.css

@@ -3,8 +3,8 @@
 .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))}
 .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%}
 
-.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}
-.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;padding:1rem;-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;margin-bottom: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-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}.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-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}
+.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}
 .micromag-viewer-partials-share-button-container{position:relative;white-space:nowrap}
 .micromag-viewer-screen-container{position:relative;height:100%;pointer-events:none}.micromag-viewer-screen-container.micromag-viewer-screen-current{pointer-events:auto}
 .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

@@ -18,7 +18,7 @@ import { useIntl, FormattedMessage } from 'react-intl';
 import EventEmitter from 'wolfy87-eventemitter';
 import { Button, Close, ScreenPreview, Screen, Meta, FontFaces } from '@micromag/core/components';
 import { useDocumentEvent, useResizeObserver, useTrackEvent, useParsedStory, useLoadedFonts, useTrackScreenView, useScreenSizeFromElement, useFullscreen } from '@micromag/core/hooks';
-import { getStyleFromColor, getStyleFromText, getDeviceScreens } from '@micromag/core/utils';
+import { copyToClipboard, getStyleFromColor, getStyleFromText, getDeviceScreens } from '@micromag/core/utils';
 import { useSpring, config } from '@react-spring/core';
 import { animated } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
@@ -28,7 +28,7 @@ import { faCompress } from '@fortawesome/free-solid-svg-icons/faCompress';
 import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
 import { faShare } from '@fortawesome/free-solid-svg-icons/faShare';
 import Scroll from '@micromag/element-scroll';
-import { EmailShareButton, EmailIcon, FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon } from 'react-share';
+import { EmailShareButton, EmailIcon, FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon } from 'react-share';
 
 var home = "/";
 var screen = "/:screen";
@@ -228,7 +228,7 @@ var styles$7 = {"container":"micromag-viewer-menus-menu-dots-container","closeBu
 
 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"};
 
-var propTypes$c = {
+var propTypes$e = {
   current: PropTypes.bool,
   active: PropTypes.bool,
   colors: PropTypes.shape({
@@ -241,7 +241,7 @@ var propTypes$c = {
   onClick: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$c = {
+var defaultProps$e = {
   current: false,
   active: false,
   colors: null,
@@ -330,18 +330,18 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
   }, inner));
 };
 
-ViewerMenuDot.propTypes = propTypes$c;
-ViewerMenuDot.defaultProps = defaultProps$c;
+ViewerMenuDot.propTypes = propTypes$e;
+ViewerMenuDot.defaultProps = defaultProps$e;
 
 var styles$5 = {};
 
-var propTypes$b = {
+var propTypes$d = {
   size: PropTypes.number,
   spacing: PropTypes.number,
   color: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$b = {
+var defaultProps$d = {
   size: 100,
   spacing: 8,
   color: 'white',
@@ -373,10 +373,10 @@ var MenuIcon = function MenuIcon(_ref) {
   }));
 };
 
-MenuIcon.propTypes = propTypes$b;
-MenuIcon.defaultProps = defaultProps$b;
+MenuIcon.propTypes = propTypes$d;
+MenuIcon.defaultProps = defaultProps$d;
 
-var propTypes$a = {
+var propTypes$c = {
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes.bool,
   items: PropTypes$1.menuItems,
@@ -392,7 +392,7 @@ var propTypes$a = {
   onClose: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$a = {
+var defaultProps$c = {
   direction: 'horizontal',
   withShadow: false,
   items: [],
@@ -533,12 +533,66 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   }))) : null));
 };
 
-ViewerMenuDots.propTypes = propTypes$a;
-ViewerMenuDots.defaultProps = defaultProps$a;
+ViewerMenuDots.propTypes = propTypes$c;
+ViewerMenuDots.defaultProps = defaultProps$c;
 
-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"};
+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"};
+
+var propTypes$b = {
+  className: PropTypes.string
+};
+var defaultProps$b = {
+  className: null
+};
 
-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","buttons":"micromag-viewer-partials-share-modal-buttons","shareOption":"micromag-viewer-partials-share-modal-shareOption","shareLabel":"micromag-viewer-partials-share-modal-shareLabel"};
+var StackIcon = function StackIcon(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    className: classNames([_defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("path", {
+    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"
+  }));
+};
+
+StackIcon.propTypes = propTypes$b;
+StackIcon.defaultProps = defaultProps$b;
+
+var propTypes$a = {
+  className: PropTypes.string
+};
+var defaultProps$a = {
+  className: null
+};
+
+var LinkIcon = function LinkIcon(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    className: classNames([_defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("path", {
+    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",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "3"
+  }), /*#__PURE__*/React.createElement("path", {
+    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",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "3"
+  }));
+};
+
+LinkIcon.propTypes = propTypes$a;
+LinkIcon.defaultProps = defaultProps$a;
+
+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"};
 
 var propTypes$9 = {
   url: PropTypes.string,
@@ -567,6 +621,12 @@ var ShareModal = function ShareModal(_ref) {
       onShare = _ref.onShare,
       onCancel = _ref.onCancel;
   var modalRef = useRef();
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      linkCopied = _useState2[0],
+      setLinkCopied = _useState2[1];
+
   var onShareButtonClick = useCallback(function (type) {
     if (onShare !== null) {
       onShare(type);
@@ -588,6 +648,18 @@ var ShareModal = function ShareModal(_ref) {
       round: true
     };
   }, []);
+  var onClickCopy = useCallback(function () {
+    copyToClipboard(url).then(function () {
+      setLinkCopied(true);
+      setTimeout(function () {
+        setLinkCopied(false);
+      }, 2000);
+    });
+  }, [setLinkCopied]);
+  var onClickLinkInput = useCallback(function (e) {
+    var target = e.target;
+    target.setSelectionRange(0, target.value.length);
+  }, []);
   var onDocumentClick = useCallback(function (e) {
     var _ref2 = e || {},
         target = _ref2.target;
@@ -638,6 +710,17 @@ var ShareModal = function ShareModal(_ref) {
       },
       tabIndex: opened ? null : '-1'
     }), /*#__PURE__*/React.createElement(TwitterIcon, shareIconProps))
+  }, {
+    id: 'linkedin',
+    label: 'LinkedIn',
+    icon: /*#__PURE__*/React.createElement(LinkedinShareButton, Object.assign({}, shareButtonProps, {
+      title: title,
+      beforeOnClick: function beforeOnClick() {
+        onShareButtonClick('LinkedIns');
+        return Promise.resolve();
+      },
+      tabIndex: opened ? null : '-1'
+    }), /*#__PURE__*/React.createElement(LinkedinIcon, shareIconProps))
   }];
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$3.container, (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$3.opened, opened), _ref3)]),
@@ -676,7 +759,31 @@ var ShareModal = function ShareModal(_ref) {
     }, icon, /*#__PURE__*/React.createElement("div", {
       className: styles$3.shareLabel
     }, label));
-  })))));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.otherOptions
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$3.copyLink, _defineProperty({}, styles$3.isLinkCopied, linkCopied)])
+  }, /*#__PURE__*/React.createElement("input", {
+    className: styles$3.screenUrlInput,
+    type: "text",
+    value: url,
+    onClick: onClickLinkInput,
+    readOnly: true
+  }), /*#__PURE__*/React.createElement(Button, {
+    className: styles$3.copyUrlButton,
+    onClick: onClickCopy,
+    focusable: opened
+  }, /*#__PURE__*/React.createElement(LinkIcon, {
+    className: styles$3.linkIcon
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.successfulCopyMessage
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "XRmkEh",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Link copied to clipboard!"
+    }]
+  })))))));
 };
 
 ShareModal.propTypes = propTypes$9;
@@ -1001,8 +1108,9 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     var screenId = item.screenId,
         _item$current = item.current,
         current = _item$current === void 0 ? false : _item$current,
-        screen = item.screen;
-        item.count;
+        screen = item.screen,
+        _item$count = item.count,
+        count = _item$count === void 0 ? 1 : _item$count;
     var screenAriaLabel = "".concat(intl.formatMessage({
       id: "LkVfwW",
       defaultMessage: [{
@@ -1032,16 +1140,20 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }, /*#__PURE__*/React.createElement("div", {
       className: styles$4.screenContainer,
       ref: index === 0 ? firstScreenContainerRef : null
-    }, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(ScreenPreview, {
+    }, count > 1 ? /*#__PURE__*/React.createElement("div", {
+      className: styles$4.subScreenBadge
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles$4.subScreenCount
+    }, count), /*#__PURE__*/React.createElement(StackIcon, {
+      className: styles$4.subScreenIcon
+    })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(ScreenPreview, {
       screenWidth: screenWidth,
       screenHeight: screenHeight,
       width: thumbWidth,
       screen: screen,
       focusable: focusable,
       active: focusable,
-      withSize: true // withStack
-      // stackCount={count}
-
+      withSize: true
     }) : null, current ? /*#__PURE__*/React.createElement("div", {
       className: styles$4.activeScreenBorder,
       style: borderPrimaryColorStyle

package/lib/index.js

@@ -246,7 +246,7 @@ var styles$7 = {"container":"micromag-viewer-menus-menu-dots-container","closeBu
 
 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"};
 
-var propTypes$c = {
+var propTypes$e = {
   current: PropTypes__default["default"].bool,
   active: PropTypes__default["default"].bool,
   colors: PropTypes__default["default"].shape({
@@ -259,7 +259,7 @@ var propTypes$c = {
   onClick: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$c = {
+var defaultProps$e = {
   current: false,
   active: false,
   colors: null,
@@ -348,18 +348,18 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
   }, inner));
 };
 
-ViewerMenuDot.propTypes = propTypes$c;
-ViewerMenuDot.defaultProps = defaultProps$c;
+ViewerMenuDot.propTypes = propTypes$e;
+ViewerMenuDot.defaultProps = defaultProps$e;
 
 var styles$5 = {};
 
-var propTypes$b = {
+var propTypes$d = {
   size: PropTypes__default["default"].number,
   spacing: PropTypes__default["default"].number,
   color: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string
 };
-var defaultProps$b = {
+var defaultProps$d = {
   size: 100,
   spacing: 8,
   color: 'white',
@@ -391,10 +391,10 @@ var MenuIcon = function MenuIcon(_ref) {
   }));
 };
 
-MenuIcon.propTypes = propTypes$b;
-MenuIcon.defaultProps = defaultProps$b;
+MenuIcon.propTypes = propTypes$d;
+MenuIcon.defaultProps = defaultProps$d;
 
-var propTypes$a = {
+var propTypes$c = {
   direction: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes__default["default"].bool,
   items: core$1.PropTypes.menuItems,
@@ -410,7 +410,7 @@ var propTypes$a = {
   onClose: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$a = {
+var defaultProps$c = {
   direction: 'horizontal',
   withShadow: false,
   items: [],
@@ -551,12 +551,66 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   }))) : null));
 };
 
-ViewerMenuDots.propTypes = propTypes$a;
-ViewerMenuDots.defaultProps = defaultProps$a;
+ViewerMenuDots.propTypes = propTypes$c;
+ViewerMenuDots.defaultProps = defaultProps$c;
 
-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"};
+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"};
+
+var propTypes$b = {
+  className: PropTypes__default["default"].string
+};
+var defaultProps$b = {
+  className: null
+};
 
-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","buttons":"micromag-viewer-partials-share-modal-buttons","shareOption":"micromag-viewer-partials-share-modal-shareOption","shareLabel":"micromag-viewer-partials-share-modal-shareLabel"};
+var StackIcon = function StackIcon(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)])
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    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"
+  }));
+};
+
+StackIcon.propTypes = propTypes$b;
+StackIcon.defaultProps = defaultProps$b;
+
+var propTypes$a = {
+  className: PropTypes__default["default"].string
+};
+var defaultProps$a = {
+  className: null
+};
+
+var LinkIcon = function LinkIcon(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)])
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    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",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "3"
+  }), /*#__PURE__*/React__default["default"].createElement("path", {
+    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",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "3"
+  }));
+};
+
+LinkIcon.propTypes = propTypes$a;
+LinkIcon.defaultProps = defaultProps$a;
+
+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"};
 
 var propTypes$9 = {
   url: PropTypes__default["default"].string,
@@ -585,6 +639,12 @@ var ShareModal = function ShareModal(_ref) {
       onShare = _ref.onShare,
       onCancel = _ref.onCancel;
   var modalRef = React.useRef();
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      linkCopied = _useState2[0],
+      setLinkCopied = _useState2[1];
+
   var onShareButtonClick = React.useCallback(function (type) {
     if (onShare !== null) {
       onShare(type);
@@ -606,6 +666,18 @@ var ShareModal = function ShareModal(_ref) {
       round: true
     };
   }, []);
+  var onClickCopy = React.useCallback(function () {
+    utils.copyToClipboard(url).then(function () {
+      setLinkCopied(true);
+      setTimeout(function () {
+        setLinkCopied(false);
+      }, 2000);
+    });
+  }, [setLinkCopied]);
+  var onClickLinkInput = React.useCallback(function (e) {
+    var target = e.target;
+    target.setSelectionRange(0, target.value.length);
+  }, []);
   var onDocumentClick = React.useCallback(function (e) {
     var _ref2 = e || {},
         target = _ref2.target;
@@ -656,6 +728,17 @@ var ShareModal = function ShareModal(_ref) {
       },
       tabIndex: opened ? null : '-1'
     }), /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterIcon, shareIconProps))
+  }, {
+    id: 'linkedin',
+    label: 'LinkedIn',
+    icon: /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinShareButton, Object.assign({}, shareButtonProps, {
+      title: title,
+      beforeOnClick: function beforeOnClick() {
+        onShareButtonClick('LinkedIns');
+        return Promise.resolve();
+      },
+      tabIndex: opened ? null : '-1'
+    }), /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinIcon, shareIconProps))
   }];
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$3.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles$3.opened, opened), _ref3)]),
@@ -694,7 +777,31 @@ var ShareModal = function ShareModal(_ref) {
     }, icon, /*#__PURE__*/React__default["default"].createElement("div", {
       className: styles$3.shareLabel
     }, label));
-  })))));
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$3.otherOptions
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$3.copyLink, _defineProperty__default["default"]({}, styles$3.isLinkCopied, linkCopied)])
+  }, /*#__PURE__*/React__default["default"].createElement("input", {
+    className: styles$3.screenUrlInput,
+    type: "text",
+    value: url,
+    onClick: onClickLinkInput,
+    readOnly: true
+  }), /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    className: styles$3.copyUrlButton,
+    onClick: onClickCopy,
+    focusable: opened
+  }, /*#__PURE__*/React__default["default"].createElement(LinkIcon, {
+    className: styles$3.linkIcon
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$3.successfulCopyMessage
+  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    id: "XRmkEh",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Link copied to clipboard!"
+    }]
+  })))))));
 };
 
 ShareModal.propTypes = propTypes$9;
@@ -1019,8 +1126,9 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     var screenId = item.screenId,
         _item$current = item.current,
         current = _item$current === void 0 ? false : _item$current,
-        screen = item.screen;
-        item.count;
+        screen = item.screen,
+        _item$count = item.count,
+        count = _item$count === void 0 ? 1 : _item$count;
     var screenAriaLabel = "".concat(intl.formatMessage({
       id: "LkVfwW",
       defaultMessage: [{
@@ -1050,16 +1158,20 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: styles$4.screenContainer,
       ref: index === 0 ? firstScreenContainerRef : null
-    }, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React__default["default"].createElement(components.ScreenPreview, {
+    }, count > 1 ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: styles$4.subScreenBadge
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: styles$4.subScreenCount
+    }, count), /*#__PURE__*/React__default["default"].createElement(StackIcon, {
+      className: styles$4.subScreenIcon
+    })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React__default["default"].createElement(components.ScreenPreview, {
       screenWidth: screenWidth,
       screenHeight: screenHeight,
       width: thumbWidth,
       screen: screen,
       focusable: focusable,
       active: focusable,
-      withSize: true // withStack
-      // stackCount={count}
-
+      withSize: true
     }) : null, current ? /*#__PURE__*/React__default["default"].createElement("div", {
       className: styles$4.activeScreenBorder,
       style: borderPrimaryColorStyle

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.115",
+    "version": "0.3.118",
     "description": "",
     "keywords": [
         "javascript"
@@ -59,12 +59,12 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.115",
-        "@micromag/element-scroll": "^0.3.115",
-        "@micromag/elements": "^0.3.115",
-        "@micromag/fields": "^0.3.115",
-        "@micromag/intl": "^0.3.115",
-        "@micromag/screens": "^0.3.115",
+        "@micromag/core": "^0.3.117",
+        "@micromag/element-scroll": "^0.3.117",
+        "@micromag/elements": "^0.3.117",
+        "@micromag/fields": "^0.3.118",
+        "@micromag/intl": "^0.3.117",
+        "@micromag/screens": "^0.3.117",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "@use-gesture/react": "^10.2.4",
@@ -81,5 +81,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "47c269c5f0b4b423cb5bb187f12ec821479b89dc"
+    "gitHead": "8d7839664ee3a186bcddfedf4971c484e6e90142"
 }