storybook-prebuilt/addon-viewport/register.js

A prebuilt storybook version for web components

import"../dist/storybook-prebuilt-53103ce5.js";import{c as t,u as e}from"../dist/storybook-prebuilt-3ba63d3f.js";import"../dist/storybook-prebuilt-4dae7756.js";import"../dist/storybook-prebuilt-c9cef5f5.js";import{r as o}from"../dist/storybook-prebuilt-9dd61b75.js";import"../dist/storybook-prebuilt-0b3b0ce5.js";import{_ as r}from"../dist/storybook-prebuilt-2f55489d.js";import"../dist/storybook-prebuilt-0b1685b3.js";import"../dist/storybook-prebuilt-d03cde97.js";import"../dist/storybook-prebuilt-ef0ce90f.js";import{r as i}from"../dist/storybook-prebuilt-c5081207.js";import"../dist/storybook-prebuilt-e17bc3b1.js";import"../dist/storybook-prebuilt-1a6e3162.js";import"../dist/storybook-prebuilt-6918c481.js";import"../dist/storybook-prebuilt-c5aee634.js";import"../dist/storybook-prebuilt-29c1a26d.js";import"../dist/storybook-prebuilt-d050466c.js";import"../dist/storybook-prebuilt-d40d7550.js";import"../dist/storybook-prebuilt-da3f7036.js";import"../dist/storybook-prebuilt-4e5e6cbb.js";import"../dist/storybook-prebuilt-8f2fc776.js";import"../dist/storybook-prebuilt-617f6ed7.js";import"../dist/storybook-prebuilt-52e8b197.js";import{_ as n}from"../dist/storybook-prebuilt-e1e8d54e.js";import"../dist/storybook-prebuilt-e856152c.js";import{r as l}from"../dist/storybook-prebuilt-6aa1ee92.js";import{_ as a}from"../dist/storybook-prebuilt-ffb249b0.js";var s=t((function(t,e){Object.defineProperty(e,"__esModule",{value:!0}),e.CHANGED=e.SET=e.CONFIGURE=e.UPDATE=e.PARAM_KEY=e.ADDON_ID=void 0;var o="storybook/viewport";e.ADDON_ID=o;e.PARAM_KEY="viewport";var r="".concat(o,"/update");e.UPDATE=r;var i="".concat(o,"/configure");e.CONFIGURE=i;var n="".concat(o,"/setStoryDefaultViewport");e.SET=n;var l="".concat(o,"/viewportChanged");e.CHANGED=l}));e(s);s.CHANGED,s.SET,s.CONFIGURE,s.UPDATE,s.PARAM_KEY,s.ADDON_ID;var p=t((function(t,e){Object.defineProperty(e,"__esModule",{value:!0}),e.MINIMAL_VIEWPORTS=e.DEFAULT_VIEWPORT=e.INITIAL_VIEWPORTS=void 0;e.INITIAL_VIEWPORTS={iphone5:{name:"iPhone 5",styles:{height:"568px",width:"320px"},type:"mobile"},iphone6:{name:"iPhone 6",styles:{height:"667px",width:"375px"},type:"mobile"},iphone6p:{name:"iPhone 6 Plus",styles:{height:"736px",width:"414px"},type:"mobile"},iphone8p:{name:"iPhone 8 Plus",styles:{height:"736px",width:"414px"},type:"mobile"},iphonex:{name:"iPhone X",styles:{height:"812px",width:"375px"},type:"mobile"},iphonexr:{name:"iPhone XR",styles:{height:"896px",width:"414px"},type:"mobile"},iphonexsmax:{name:"iPhone XS Max",styles:{height:"896px",width:"414px"},type:"mobile"},ipad:{name:"iPad",styles:{height:"1024px",width:"768px"},type:"tablet"},ipad10p:{name:"iPad Pro 10.5-in",styles:{height:"1112px",width:"834px"},type:"tablet"},ipad12p:{name:"iPad Pro 12.9-in",styles:{height:"1366px",width:"1024px"},type:"tablet"},galaxys5:{name:"Galaxy S5",styles:{height:"640px",width:"360px"},type:"mobile"},galaxys9:{name:"Galaxy S9",styles:{height:"1480px",width:"720px"},type:"mobile"},nexus5x:{name:"Nexus 5X",styles:{height:"660px",width:"412px"},type:"mobile"},nexus6p:{name:"Nexus 6P",styles:{height:"732px",width:"412px"},type:"mobile"},pixel:{name:"Pixel",styles:{height:"960px",width:"540px"},type:"mobile"},pixelxl:{name:"Pixel XL",styles:{height:"1280px",width:"720px"},type:"mobile"}};e.DEFAULT_VIEWPORT="responsive";e.MINIMAL_VIEWPORTS={mobile1:{name:"Small mobile",styles:{height:"568px",width:"320px"},type:"mobile"},mobile2:{name:"Large mobile",styles:{height:"896px",width:"414px"},type:"mobile"},tablet:{name:"Tablet",styles:{height:"1112px",width:"834px"},type:"tablet"}}}));e(p);p.MINIMAL_VIEWPORTS,p.DEFAULT_VIEWPORT,p.INITIAL_VIEWPORTS;var u=t((function(t,e){function l(t){return(l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}Object.defineProperty(e,"__esModule",{value:!0}),e.ViewportTool=void 0;var u,c=function(t){if(t&&t.__esModule)return t;if(null===t||"object"!==l(t)&&"function"!=typeof t)return{default:t};var e=f();if(e&&e.has(t))return e.get(t);var o={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in t)if(Object.prototype.hasOwnProperty.call(t,i)){var n=r?Object.getOwnPropertyDescriptor(t,i):null;n&&(n.get||n.set)?Object.defineProperty(o,i,n):o[i]=t[i]}o.default=t,e&&e.set(t,o);return o}(o),d=(u=i)&&u.__esModule?u:{default:u};function f(){if("function"!=typeof WeakMap)return null;var t=new WeakMap;return f=function(){return t},t}function b(t,e,o){return e in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function y(t,e){if(null==t)return{};var o,r,i=function(t,e){if(null==t)return{};var o,r,i={},n=Object.keys(t);for(r=0;r<n.length;r++)o=n[r],e.indexOf(o)>=0||(i[o]=t[o]);return i}(t,e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);for(r=0;r<n.length;r++)o=n[r],e.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(t,o)&&(i[o]=t[o])}return i}function m(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if(!(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t)))return;var o=[],r=!0,i=!1,n=void 0;try{for(var l,a=t[Symbol.iterator]();!(r=(l=a.next()).done)&&(o.push(l.value),!e||o.length!==e);r=!0);}catch(t){i=!0,n=t}finally{try{r||null==a.return||a.return()}finally{if(i)throw n}}return o}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function h(t){return function(t){if(Array.isArray(t)){for(var e=0,o=new Array(t.length);e<t.length;e++)o[e]=t[e];return o}}(t)||function(t){if(Symbol.iterator in Object(t)||"[object Arguments]"===Object.prototype.toString.call(t))return Array.from(t)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var g=(0,d.default)(50)((function(t){return[].concat(x,h(Object.entries(t).map((function(t){var e=m(t,2),o=e[0],r=e[1],i=r.name,n=y(r,["name"]);return Object.assign({},n,{id:o,title:i})}))))})),w={id:"reset",title:"Reset viewport",styles:null,type:"other"},x=[w],v=(0,d.default)(50)((function(t,e,o,r,i){return t.map((function(t){switch(t.id){case w.id:if(e.id===t.id)return null;default:return Object.assign({},t,{onClick:function(){o(Object.assign({},r,{selected:t.id})),i()}})}})).filter(Boolean)})),j=r.styled.div((function(){return{display:"inline-flex"}})),O=r.styled.div((function(t){var e=t.theme;return{display:"inline-block",textDecoration:"none",padding:10,fontWeight:e.typography.weight.bold,fontSize:e.typography.size.s2-1,lineHeight:"1",height:40,border:"none",borderTop:"3px solid transparent",borderBottom:"3px solid transparent",background:"transparent"}})),P=(0,r.styled)(n.IconButton)((function(){return{display:"inline-flex",alignItems:"center"}})),k=r.styled.div((function(t){return{fontSize:t.theme.typography.size.s2-1,marginLeft:10}})),E=function(t,e,o){if(null===e)return null;var r="function"==typeof e?e(t):e;return o?function(t){var e=t.width,o=t.height,r=y(t,["width","height"]);return Object.assign({},r,{height:e,width:o})}(r):r},I=(0,c.memo)((0,r.withTheme)((function(t){var e,o=t.theme,i=(0,a.useParameter)(s.PARAM_KEY,{}),l=i.viewports,u=void 0===l?p.MINIMAL_VIEWPORTS:l,d=i.defaultViewport,f=void 0===d?w.id:d,y=i.disable,h=m((0,a.useAddonState)(s.ADDON_ID,{selected:f,isRotated:!1}),2),x=h[0],I=h[1],A=g(u);A.find((function(t){return t.id===f}))||console.warn('Cannot find "defaultViewport" of "'.concat(f,'" in addon-viewport configs, please check the "viewports" setting in the configuration.')),(0,c.useEffect)((function(){I({selected:f||(u[x.selected]?x.selected:w.id),isRotated:x.isRotated})}),[f]);var S=x.selected,T=x.isRotated,_=A.find((function(t){return t.id===S}))||A.find((function(t){return t.id===f}))||A.find((function(t){return t.default}))||w,D=(0,c.useRef)(),R=E(D.current,_.styles,T);return(0,c.useEffect)((function(){D.current=R}),[_]),y||0===Object.entries(u).length?null:c.default.createElement(c.Fragment,null,c.default.createElement(n.WithTooltip,{placement:"top",trigger:"click",tooltip:function(t){var e=t.onHide;return c.default.createElement(n.TooltipLinkList,{links:v(A,_,I,x,e)})},closeOnClick:!0},c.default.createElement(P,{key:"viewport",title:"Change the size of the preview",active:!!R,onDoubleClick:function(){I(Object.assign({},x,{selected:w.id}))}},c.default.createElement(n.Icons,{icon:"grow"}),R?c.default.createElement(k,null,"".concat(_.title,T?" (L)":" (P)")):null)),R?c.default.createElement(j,null,c.default.createElement(r.Global,{styles:(e={},b(e,"#".concat("storybook-preview-iframe"),Object.assign({margin:"auto",transition:"width .3s, height .3s",position:"relative",border:"".concat(o.layoutMargin,"px solid black"),borderRadius:o.appBorderRadius,boxShadow:"0 0 100px 1000px rgba(0,0,0,0.5), 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)"},R)),b(e,"#".concat("storybook-preview-wrapper"),{padding:o.layoutMargin,alignContent:"center",alignItems:"center",justifyContent:"center",justifyItems:"center",overflow:"auto",display:"grid",gridTemplateColumns:"100%",gridTemplateRows:"100%"}),e)}),c.default.createElement(O,{title:"Viewport width"},R.width.replace("px","")),c.default.createElement(n.IconButton,{key:"viewport-rotate",title:"Rotate viewport",onClick:function(){I(Object.assign({},x,{isRotated:!T}))}},c.default.createElement(n.Icons,{icon:"transfer"})),c.default.createElement(O,{title:"Viewport height"},R.height.replace("px",""))):null)})));e.ViewportTool=I}));e(u);u.ViewportTool;e(t((function(t){function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var r=a(o),i=a(l);function n(){if("function"!=typeof WeakMap)return null;var t=new WeakMap;return n=function(){return t},t}function a(t){if(t&&t.__esModule)return t;if(null===t||"object"!==e(t)&&"function"!=typeof t)return{default:t};var o=n();if(o&&o.has(t))return o.get(t);var r={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var l in t)if(Object.prototype.hasOwnProperty.call(t,l)){var a=i?Object.getOwnPropertyDescriptor(t,l):null;a&&(a.get||a.set)?Object.defineProperty(r,l,a):r[l]=t[l]}return r.default=t,o&&o.set(t,r),r}i.default.register(s.ADDON_ID,(function(){i.default.add(s.ADDON_ID,{title:"viewport / media-queries",type:i.types.TOOL,match:function(t){return"story"===t.viewMode},render:function(){return r.createElement(u.ViewportTool,null)}})}))})));
//# sourceMappingURL=register.js.map