Liferay.Loader.define("@liferay/layout-content-page-editor-web@3.0.130/page_editor/app/components/fragment-configuration-fields/ColorPickerField",["module","exports","require","liferay!frontend-js-react-web$prop-types","liferay!frontend-js-react-web$react","../../../common/components/ColorPicker/ColorPicker","../../../plugins/page-design-options/hooks/useStyleBook","../../../prop-types/index","../../contexts/ControlsContext","../../contexts/GlobalContext","../../contexts/StoreContext","../../selectors/selectCanDetachTokenValues","../../utils/convertRGBtoHex","../../utils/getLayoutDataItemUniqueClassName","./ColorPaletteField"],(function(e,t,o){window;{Object.defineProperty(t,"__esModule",{value:!0}),t.ColorPickerField=function({field:e,isCustomStyle:t,onValueSelect:o,value:p}){const y=(0,a.useActiveItemId)(),C=(0,s.useSelector)(c.default),[k,g]=(0,r.useState)(null),P=(0,u.useGlobalContext)(),v=(0,s.useSelector)((e=>e.selectedViewportSize)),{tokenValues:b}=(0,l.useStyleBook)();return(0,r.useEffect)((()=>{if(!e.cssProperty)return void g(null);if(p)return void g(null);const t=P.document.querySelector(".".concat((0,f.default)(y)));if(!t)return void g(null);const o=P.window.getComputedStyle(t).getPropertyValue(e.cssProperty);g(o?(0,i.convertRGBtoHex)(o):null)}),[y,e.cssProperty,P,p]),Object.keys(b).length?r.default.createElement(n.ColorPicker,{canDetachTokenValues:C,defaultTokenLabel:k?Liferay.FeatureFlags["LPS-163362"]?k:"".concat(n.DEFAULT_TOKEN_LABEL," · ").concat(k):n.DEFAULT_TOKEN_LABEL,defaultTokenValue:k,field:e,onValueSelect:o,selectedViewportSize:v,showLabel:t,tokenValues:b,value:p}):r.default.createElement(d.ColorPaletteField,{field:e,onValueSelect:(e,t)=>{var r;return o(e,null!==(r=null==t?void 0:t.rgbValue)&&void 0!==r?r:"")},value:p})};y(o("liferay!frontend-js-react-web$prop-types"));var r=function(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 o={},r=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){var l=r?Object.getOwnPropertyDescriptor(e,n):null;l&&(l.get||l.set)?Object.defineProperty(o,n,l):o[n]=e[n]}o.default=e,t&&t.set(e,o);return o}(o("liferay!frontend-js-react-web$react")),n=o("../../../common/components/ColorPicker/ColorPicker"),l=o("../../../plugins/page-design-options/hooks/useStyleBook"),a=(o("../../../prop-types/index"),o("../../contexts/ControlsContext")),u=o("../../contexts/GlobalContext"),s=o("../../contexts/StoreContext"),c=y(o("../../selectors/selectCanDetachTokenValues")),i=o("../../utils/convertRGBtoHex"),f=y(o("../../utils/getLayoutDataItemUniqueClassName")),d=o("./ColorPaletteField");function p(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return p=function(){return e},e}function y(e){return e&&e.__esModule?e:{default:e}}}}));
//# sourceMappingURL=ColorPickerField.js.map