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