(window.webpackJsonp=window.webpackJsonp||[]).push([[25,4,5,6],{279:function(t,e,o){var content=o(283);content.__esModule&&(content=content.default),"string"==typeof content&&(content=[[t.i,content,""]]),content.locals&&(t.exports=content.locals);(0,o(83).default)("0ba3b229",content,!0,{sourceMap:!1})},280:function(t,e,o){var content=o(287);content.__esModule&&(content=content.default),"string"==typeof content&&(content=[[t.i,content,""]]),content.locals&&(t.exports=content.locals);(0,o(83).default)("fe984bca",content,!0,{sourceMap:!1})},281:function(t,e,o){var content=o(290);content.__esModule&&(content=content.default),"string"==typeof content&&(content=[[t.i,content,""]]),content.locals&&(t.exports=content.locals);(0,o(83).default)("2e443463",content,!0,{sourceMap:!1})},282:function(t,e,o){"use strict";o(279)},283:function(t,e,o){var n=o(82),r=o(198),c=o(284),l=n((function(i){return i[1]})),d=r(c);l.push([t.i,"#twic-demo-wrapper #twic-demo-container{margin:140px 40px 40px;max-width:1500px}@media screen and (min-width:768px){#twic-demo-wrapper #twic-demo-container{margin:180px 60px 80px}}@media screen and (min-width:1600px){#twic-demo-wrapper #twic-demo-container{margin:calc(100px + 2rem) auto 2rem}}#twic-header{align-items:center;background-color:#f9fafb;border-bottom:1px solid #e3e3e4;display:flex;flex-direction:column;height:100px;left:0;padding:35px 20px;position:fixed;right:0;top:0;z-index:10}#twic-header a{color:#000;color:initial;-webkit-text-decoration:none;text-decoration:none}#twic-header .heading-primary{align-items:center;display:flex;font-size:1.2em;font-weight:400;gap:10px;margin-bottom:0}#twic-header .twicpics-logo{aspect-ratio:300/58;width:165px}@media(min-width:640px){#twic-header .twicpics-logo{width:250px}}#twic-header .framework-logo{aspect-ratio:2560/753;width:86px}@media(min-width:640px){#twic-header .framework-logo{width:130px}}#twic-header .tags-container{bottom:0;display:flex;flex-wrap:wrap;font-size:.7em;gap:12px;justify-content:center;left:50%;position:absolute;transform:translate(-50%,50%);width:100%}@media(min-width:640px){#twic-header .tags-container{font-size:.9em}}#twic-header .tags-container .tag{align-items:center;background-color:#06ffa3;border-radius:30px;box-shadow:0 4px 4px rgba(0,0,0,.1);display:flex;font-weight:600;gap:4px;padding:4px 8px}#twic-header .tags-container .tag.tag--bg-purple-rain{background-color:#8f00ff;color:#fff}#twic-header .tags-container .tag.documentation-link:link,#twic-header .tags-container .tag.documentation-link:visited{-webkit-text-decoration:none;text-decoration:none;transition:all .3s}#twic-header .tags-container .tag.documentation-link:active,#twic-header .tags-container .tag.documentation-link:hover{background:linear-gradient(90deg,#06ffa3,#8f00ff);box-shadow:0 9px 4px rgba(0,0,0,.09);transform:translateY(-5px)}#twic-header .tags-container .tag.documentation-link:after{content:url("+d+');height:20px;width:20px}@media(min-width:640px){#twic-header .tags-container .tag{padding:8px 16px}}#twic-header .ribbon{background-color:#6d6d6d;box-shadow:0 0 5px #888;left:-33px;overflow:hidden;position:absolute;top:20px;transform:rotate(-45deg);white-space:nowrap}#twic-header .ribbon div{color:#fff;display:block;font:700 81.25% "Helvetica Neue",Helvetica,Arial,sans-serif;line-height:30px;text-align:center;width:142px}#twic-header .ribbon div a{margin-right:10px}#twic-header .ribbon div a img{height:23px;line-height:23px;margin-top:-4px;transition-duration:.2s;vertical-align:middle;width:23px}#twic-header .ribbon div a img:hover{transform:rotate(45deg)}@media(min-width:640px){#twic-header{padding:20px}}',""]),l.locals={},t.exports=l},284:function(t,e){t.exports="data:image/svg+xml;base64,PHN2ZwogICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICAgZmlsbD0ibm9uZSIKICAgIHZpZXdCb3g9IjAgMCAyNCAyNCIKICAgIHN0cm9rZT0iI2ZmZiIKPgogICAgPHBhdGgKICAgICAgICBzdHJva2UtbGluZWNhcD0icm91bmQiCiAgICAgICAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIKICAgICAgICBzdHJva2Utd2lkdGg9IjIiCiAgICAgICAgZD0iTTE3IDhsNCA0bTAgMGwtNCA0bTQtNEgzIgogICAgLz4KPC9zdmc+"},285:function(t,e,o){"use strict";o.r(e);var n=o(17),r=(o(111),o(28),"TwicPics/components-demo-nuxt2"),c="https://github.com/".concat(r),l={name:"TwicWrapper",props:{filename:{type:String,required:!1,default:void 0}},data:function(){return{onlineUrl:"",documentationUrl:"https://www.twicpics.com/docs/components/nuxt-2?utm_source=github&utm_medium=organic&utm_campaign=components",frameworkLogo:"https://assets.twicpics.com/demo/@twicpics-components/logos/nuxt-2.png",gitHubLogo:"/github-mark-white.svg",gitHubUrl:"",stackBlitzLogo:"/stackblitz.svg"}},created:function(){if(this.onlineUrl="https://stackblitz.com/github/".concat(r,"?file=").concat(this.filename||"README.md"),this.filename){var t=/pages\/(.*)\./.exec(this.filename);if(t){var e=Object(n.a)(t,2),o=(e[0],e[1]);this.onlineUrl="".concat(this.onlineUrl,"&initialpath=").concat(o)}}this.gitHubUrl=this.filename?"".concat(c,"/blob/main/").concat(this.filename):c}},d=(o(282),o(45)),component=Object(d.a)(l,(function(){var t=this,e=t._self._c;return e("div",{attrs:{id:"twic-demo-wrapper"}},[e("header",{attrs:{id:"twic-header"}},[e("a",{attrs:{href:"/",title:"Home"}},[e("h1",{staticClass:"heading-primary"},[e("img",{staticClass:"twicpics-logo",attrs:{src:"https://assets.twicpics.com/demo/@twicpics-components/logos/twicpics-by-frontify.svg",alt:"TwicPics logo"}}),t._v(" "),e("span",[t._v("x")]),t._v(" "),e("img",{staticClass:"framework-logo",attrs:{src:t.frameworkLogo,alt:"React Logo"}})])]),t._v(" "),e("div",{staticClass:"ribbon"},[e("div",[e("a",{attrs:{target:"_blank",href:t.gitHubUrl,rel:"noreferrer",title:"Open in Github"}},[e("img",{staticClass:"github",attrs:{src:t.gitHubLogo,alt:"Open in Github"}})]),t._v(" "),e("a",{attrs:{target:"_blank",href:t.onlineUrl,rel:"noreferrer",title:"Open in StackBlitz"}},[e("img",{staticClass:"github",attrs:{src:t.stackBlitzLogo,alt:"Open in StackBlitz"}})])])]),t._v(" "),e("div",{staticClass:"tags-container"},[e("div",{staticClass:"tag tag-components"},[t._v("@twicpics-components")]),t._v(" "),e("a",{staticClass:"documentation-link tag tag--bg-purple-rain",attrs:{href:t.documentationUrl,target:"_blank",rel:"noreferrer"}},[t._v("\n        Documentation\n      ")])])]),t._v(" "),e("main",{attrs:{id:"twic-demo-container"}},[t._t("default")],2)])}),[],!1,null,null,null);e.default=component.exports},286:function(t,e,o){"use strict";o(280)},287:function(t,e,o){var n=o(82)((function(i){return i[1]}));n.push([t.i,".twic-abstract{margin-bottom:40px}.twic-abstract h1{margin-bottom:1rem}.twic-abstract p{margin-bottom:.5rem;text-align:justify}.twic-abstract ul{display:flex;flex-direction:column;gap:6px;margin:10px 0;padding-left:32px}.twic-abstract a:active,.twic-abstract a:hover,.twic-abstract a:link,.twic-abstract a:visited{color:#8e08fd}",""]),n.locals={},t.exports=n},288:function(t,e,o){"use strict";o.r(e);var n={name:"TwicAbstract",props:{title:{type:String,required:!1,default:void 0}}},r=(o(286),o(45)),component=Object(r.a)(n,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"twic-abstract"},[e("h1",[t._v(t._s(t.title))]),t._v(" "),e("div",[t._t("default")],2)])}),[],!1,null,null,null);e.default=component.exports},289:function(t,e,o){"use strict";o(281)},290:function(t,e,o){var n=o(82)((function(i){return i[1]}));n.push([t.i,".twic-code{background-color:#e4e4e4;border-radius:4px;display:inline-block;font-family:sans-serif;font-weight:500;margin:1px .5ch;padding:2px 6px}",""]),n.locals={},t.exports=n},291:function(t,e,o){"use strict";o.r(e);var n={name:"TwicCode"},r=(o(289),o(45)),component=Object(r.a)(n,(function(){return(0,this._self._c)("span",{staticClass:"twic-code"},[this._t("default")],2)}),[],!1,null,null,null);e.default=component.exports},380:function(t,e,o){"use strict";o.r(e);var n={name:"TwicPosition",data:function(){return{landscapeImgUrl:"components/position/horse.jpg",portraitImgUrl:"components/position/forest.jpg",horizontalPositionArray:["left","right","center"],horizontalPositionIndex:0,verticalPositionArray:["top","bottom","center"],verticalPositionIndex:0}},methods:{onChangePosition:function(){this.horizontalPositionIndex=(this.horizontalPositionIndex+1)%this.horizontalPositionArray.length,this.verticalPositionIndex=(this.verticalPositionIndex+1)%this.verticalPositionArray.length}}},r=o(45),component=Object(r.a)(n,(function(){var t=this,e=t._self._c;return e("div",{attrs:{id:"twic-position-container"}},[e("TwicWrapper",{attrs:{filename:"pages/position.vue"}},[e("TwicAbstract",{attrs:{title:"position property"}},[e("p",[t._v("\n        In"),e("TwicCode",[t._v("contain")]),t._v("mode,\n        "),e("strong",[t._v("\n          the "),e("dfn",[t._v("position")]),t._v(" property changes the location of the image\n          inside the area of the component.\n        ")])],1),t._v(" "),e("p",[t._v("\n        The syntax is the same as for CSS position properties (e.g.\n        "),e("TwicCode",[t._v("background-position")]),t._v("or\n        "),e("TwicCode",[t._v("object-position")]),t._v(").\n      ")],1),t._v(" "),e("p",[t._v("\n        Useful values\n        are"),e("TwicCode",[t._v("top")]),t._v(","),e("TwicCode",[t._v("bottom")]),t._v(","),e("TwicCode",[t._v("left")]),t._v(",\n        and\n        "),e("TwicCode",[t._v("right")]),t._v(", but all valid CSS position values are\n        valid.\n      ")],1),t._v(" "),e("p",[t._v("\n        If you only need border-based positionning, you can also use \n        "),e("a",{attrs:{href:"/anchor",target:"_blank",rel:"noreferrer"}},[t._v("anchor")]),t._v("\n          property.\n      ")])]),t._v(" "),e("div",{staticClass:"twic-testing-container"},[e("button",{staticClass:"twic-button",on:{click:t.onChangePosition}},[t._v("\n        Click to change the position\n      ")])]),t._v(" "),e("div",{staticClass:"twic-grid"},[e("div",{staticClass:"twic-item"},[e("TwicImg",{attrs:{src:t.landscapeImgUrl,mode:"contain",placeholder:"none",position:t.verticalPositionArray[t.verticalPositionIndex]}}),t._v(" "),e("span",[e("TwicCode",[t._v('position="'+t._s(t.verticalPositionArray[t.verticalPositionIndex])+'"')])],1)],1),t._v(" "),e("div",{staticClass:"twic-item"},[e("TwicImg",{attrs:{src:t.portraitImgUrl,mode:"contain",placeholder:"none",position:t.horizontalPositionArray[t.horizontalPositionIndex]}}),t._v(" "),e("span",[e("TwicCode",[t._v('position="'+t._s(t.horizontalPositionArray[t.horizontalPositionIndex])+'"')])],1)],1),t._v(" "),e("div",{staticClass:"twic-item"},[e("TwicImg",{attrs:{src:t.landscapeImgUrl,mode:"contain",placeholder:"none"}}),t._v(" "),e("span",[t._v(" No position set ("),e("TwicCode",[t._v("center")]),t._v("by default) ")],1)],1),t._v(" "),e("div",{staticClass:"twic-item"},[e("TwicImg",{attrs:{src:t.portraitImgUrl,mode:"contain",placeholder:"none"}}),t._v(" "),e("span",[t._v(" No position set ("),e("TwicCode",[t._v("center")]),t._v("by default) ")],1)],1)])],1)],1)}),[],!1,null,null,null);e.default=component.exports;installComponents(component,{TwicCode:o(291).default,TwicAbstract:o(288).default,TwicWrapper:o(285).default})}}]);