Liferay.Loader.define("@liferay/layout-content-page-editor-web@3.0.130/page_editor/app/components/ViewportSizeSelector",["module","exports","require","@frontend-taglib-clay$clayui/button","@frontend-taglib-clay$clayui/drop-down","@frontend-taglib-clay$clayui/icon","@frontend-taglib-clay$clayui/popover","liferay!frontend-js-react-web$classnames","frontend-js-web","liferay!frontend-js-react-web$prop-types","liferay!frontend-js-react-web$react","../config/constants/viewportSizes","../config/index"],(function(e,t,a){window;{Object.defineProperty(t,"__esModule",{value:!0}),t.default=function({onSizeSelected:e,selectedSize:t}){const{availableViewportSizes:a}=d.config,[r,i]=(0,c.useState)(!1);return c.default.createElement(c.default.Fragment,null,c.default.createElement(l.default.Group,{className:"d-lg-block d-none"},c.default.createElement(g,{availableViewportSizes:a,onSelect:e,selectedSize:t,setActive:i})),c.default.createElement(n.default,{active:r,className:"d-lg-none",hasLeftSymbols:!0,hasRightSymbols:!0,menuElementAttrs:{containerProps:{className:"cadmin"}},onActiveChange:i,trigger:c.default.createElement(l.default,{className:"btn-monospaced",displayType:"secondary",small:!0},c.default.createElement(o.default,{symbol:a[t].icon}),c.default.createElement("span",{className:"sr-only"},a[t].label))},c.default.createElement(n.default.ItemList,null,c.default.createElement(g,{availableViewportSizes:a,dropdown:!0,onSelect:e,selectedSize:t}))))};var l=y(a("@frontend-taglib-clay$clayui/button")),n=f(a("@frontend-taglib-clay$clayui/drop-down")),o=f(a("@frontend-taglib-clay$clayui/icon")),r=f(a("@frontend-taglib-clay$clayui/popover")),i=f(a("liferay!frontend-js-react-web$classnames")),s=a("frontend-js-web"),c=(f(a("liferay!frontend-js-react-web$prop-types")),y(a("liferay!frontend-js-react-web$react"))),u=a("../config/constants/viewportSizes"),d=a("../config/index");function f(e){return e&&e.__esModule?e:{default:e}}function p(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return p=function(){return e},e}function y(e){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=p();if(t&&t.has(e))return t.get(e);var a={},l=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){var o=l?Object.getOwnPropertyDescriptor(e,n):null;o&&(o.get||o.set)?Object.defineProperty(a,n,o):a[n]=e[n]}return a.default=e,t&&t.set(e,a),a}const e={desktop:Liferay.Language.get("the-styles-you-define-in-the-desktop-viewport-apply-to-all-other-viewports-unless-you-specify-a-style-in-another-viewport"),landscapeMobile:Liferay.Language.get("the-styles-you-define-in-the-landscape-phone-viewport-apply-to-the-portrait-phone-viewport-unless-you-specify-a-style-in-the-portrait-phone-viewport"),portraitMobile:Liferay.Language.get("the-portrait-phone-viewport-reflects-the-style-changes-you-make-in-any-other-viewport-unless-you-specify-a-style-in-the-portrait-phone-viewport"),tablet:Liferay.Language.get("the-styles-you-define-in-the-tablet-viewport-apply-to-all-the-phone-viewports-unless-you-specify-a-style-in-the-landscape-or-portrait-phone-viewports")},b=({icon:t,label:a,onSelect:n,selectedSize:o,sizeId:d})=>{const f=(0,c.useRef)(null),p=(0,c.useRef)(null),[y,b]=(0,c.useState)(!1);return(0,c.useLayoutEffect)((()=>{y&&(0,s.align)(p.current,f.current,s.ALIGN_POSITIONS.Bottom,!1)}),[y]),c.default.createElement(c.default.Fragment,null,c.default.createElement(l.ClayButtonWithIcon,{"aria-label":a,"aria-pressed":o===d,className:(0,i.default)({"page-editor__viewport-size-selector--default":d===u.VIEWPORT_SIZES.desktop}),displayType:"secondary",key:d,onClick:()=>n(d),onMouseEnter:()=>b(!0),onMouseLeave:()=>b(!1),ref:f,small:!0,symbol:t}),y&&c.default.createElement(r.default,{alignPosition:"bottom",className:"page-editor__viewport-size-selector__popover",header:a,ref:p},d===u.VIEWPORT_SIZES.desktop&&c.default.createElement("span",{className:"d-block font-weight-semi-bold"},Liferay.Language.get("default-viewport")),e[d]))},g=({availableViewportSizes:e,dropdown:t,onSelect:a,selectedSize:l})=>Object.values(e).map((({icon:e,label:o,sizeId:r})=>t?c.default.createElement(n.default.Item,{key:r,onClick:()=>a(r),symbolLeft:e},o):c.default.createElement(b,{icon:e,key:r,label:o,onSelect:a,selectedSize:l,sizeId:r})))}}));
//# sourceMappingURL=ViewportSizeSelector.js.map