Liferay.Loader.define("@liferay/layout-content-page-editor-web@3.0.130/page_editor/app/components/fragment-configuration-fields/CSSClassSelectorField",["module","exports","require","@frontend-taglib-clay$clayui/drop-down","@frontend-taglib-clay$clayui/form","@frontend-taglib-clay$clayui/label","@frontend-taglib-clay$clayui/multi-select","@frontend-taglib-clay$clayui/shared","liferay!frontend-js-react-web$react","../../../core/hooks/useControlledState","../../../core/hooks/useId","../../contexts/StoreContext"],(function(e,t,a){window;{Object.defineProperty(t,"__esModule",{value:!0}),t.default=function({field:e,onValueSelect:t,value:a}){const l=(0,c.useMemo)((()=>{var e;return null!==(e=null==a?void 0:a.map((e=>({label:e,value:e}))))&&void 0!==e?e:[]}),[a]),[r,u]=(0,s.default)(l),[f,d]=(0,c.useState)(!1),[m,p]=(0,c.useState)(""),g=(0,i.useId)(),v=(0,i.useId)(),b=(0,c.useRef)(),E=(0,c.useRef)(),w=(0,c.useRef)(),h=a=>{if(a.trim()&&!r.some((e=>e.value===a))){const l=[...r,{label:a,value:a}];u(l),t(e.name,l.map((e=>e.value)))}};return c.default.createElement(c.default.Fragment,null,c.default.createElement(n.default.Group,{className:"page-editor__css-class-selector-field",small:!0},c.default.createElement("label",{htmlFor:g},Liferay.Language.get("css-classes")),c.default.createElement("div",{ref:b},c.default.createElement(o.default,{autoComplete:"off",id:g,items:r,onBlur:()=>{f||(h(m),p(""))},onChange:e=>{p(e),f||d(!0)},onFocus:()=>{d(!1),p((e=>e.trim()))},onItemsChange:a=>{const l=[...new Set(a.map((e=>e.value)))];u(l.map((e=>({label:e,value:e})))),t(e.name,l)},onKeyDown:e=>{if(" "===e.key&&m.trim().length)h(m.trim()),p("");else if("ArrowDown"===e.key){var t;e.preventDefault(),null===(t=E.current)||void 0===t||t.focus()}},placeholder:Liferay.Language.get("type-to-add-a-class"),ref:w,value:m})),c.default.createElement("p",{className:"m-0 mt-1 small text-secondary",id:v},Liferay.Language.get("use-a-comma,-line-break,-or-space-to-add-multiple-classes"))),c.default.createElement(y,{active:f,alignElementRef:b,cssClass:m,firstOptionRef:E,onItemClick:e=>{var t;p(""),d(!1),h(e),null===(t=w.current)||void 0===t||t.focus()},onKeyDown:e=>{var t;"Escape"===e.key&&(d(!1),p((e=>e.trim())),null===(t=w.current)||void 0===t||t.focus())},onSetActive:d}))};var l=m(a("@frontend-taglib-clay$clayui/drop-down")),n=m(a("@frontend-taglib-clay$clayui/form")),r=m(a("@frontend-taglib-clay$clayui/label")),o=m(a("@frontend-taglib-clay$clayui/multi-select")),u=a("@frontend-taglib-clay$clayui/shared"),c=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=d();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 r=l?Object.getOwnPropertyDescriptor(e,n):null;r&&(r.get||r.set)?Object.defineProperty(a,n,r):a[n]=e[n]}a.default=e,t&&t.set(e,a);return a}(a("liferay!frontend-js-react-web$react")),s=m(a("../../../core/hooks/useControlledState")),i=a("../../../core/hooks/useId"),f=a("../../contexts/StoreContext");function d(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return d=function(){return e},e}function m(e){return e&&e.__esModule?e:{default:e}}const e=20;function y({active:t,alignElementRef:a,cssClass:n,firstOptionRef:o,onItemClick:s,onKeyDown:i,onSetActive:d}){const m=(0,c.useRef)(),y=(0,f.useSelector)((e=>{var t;const a=e.layoutData,l=new Set;return null===(t=Object.values(a.items))||void 0===t||t.flatMap((e=>{var t,a;return null!==(t=null===(a=e.config)||void 0===a?void 0:a.cssClasses)&&void 0!==t?t:[]})).forEach((e=>{l.add(e)})),[...l]})),p=(0,c.useMemo)((()=>y.filter((e=>-1!==e.indexOf(n.trim()))).slice(0,e)),[y,n]);return c.default.createElement(l.default.Menu,{active:t&&n,alignElementRef:a,className:"page-editor__css-class-selector-dropdown",containerProps:{className:"cadmin"},onKeyDown:i,onSetActive:d,ref:m},c.default.createElement(u.FocusScope,null,c.default.createElement("div",null,c.default.createElement(l.default.ItemList,null,c.default.createElement(l.default.Group,{header:Liferay.Language.get("new-class")},c.default.createElement(l.default.Item,{className:"align-items-center d-flex text-3",innerRef:o,onClick:()=>s(n)},Liferay.Language.get("create"),c.default.createElement(r.default,{className:"ml-2",displayType:"secondary"},n))),!!p.length&&c.default.createElement(l.default.Group,{header:Liferay.Language.get("existing-classes")},p.map((e=>c.default.createElement(l.default.Item,{className:"align-items-center d-flex text-3",key:e,onClick:()=>s(e)},c.default.createElement(r.default,{displayType:"secondary"},e)))))))))}}}));
//# sourceMappingURL=CSSClassSelectorField.js.map