@sitecore-feaas/clientside 0.1.18 → 0.1.20

package/build/ui/FEAASEditor.js

@@ -36,13 +36,17 @@ export function FEAASEditorProps(element = this) {
     return {
         context: HTMLElement,
         frontend: element === null || element === void 0 ? void 0 : element.getContextAttribute('frontend'),
-        src: (_a = element === null || element === void 0 ? void 0 : element.getAttribute('src')) !== null && _a !== void 0 ? _a : '/assets/editor.js',
+        src: (_a = element === null || element === void 0 ? void 0 : element.getAttribute('src')) !== null && _a !== void 0 ? _a : '/editor.js',
         library: element === null || element === void 0 ? void 0 : element.getAttribute('library'),
         component: element === null || element === void 0 ? void 0 : element.getAttribute('component'),
         version: element === null || element === void 0 ? void 0 : element.getAttribute('version'),
+        instance: element === null || element === void 0 ? void 0 : element.getAttribute('instance'),
+        forked: element === null || element === void 0 ? void 0 : element.getAttribute('forked'),
         revision: (element === null || element === void 0 ? void 0 : element.getAttribute('revision')) || 'saved',
         hidden: (element === null || element === void 0 ? void 0 : element.getAttribute('hidden')) != null,
-        for: element === null || element === void 0 ? void 0 : element.getAttribute('for')
+        for: element === null || element === void 0 ? void 0 : element.getAttribute('for'),
+        state: (element === null || element === void 0 ? void 0 : element.getAttribute('state')) || 'idle',
+        changed: (element === null || element === void 0 ? void 0 : element.getAttribute('changed')) != null
     };
 }
 export class FEAASEditor extends FEAASBase {
@@ -51,13 +55,19 @@ export class FEAASEditor extends FEAASBase {
         this.framePoint = { top: 0, left: 0 };
         this.wrapperRect = { top: 0, left: 0, width: 0, height: 0 };
         this.bodyRect = { top: 0, left: 0, width: 0, height: 0 };
-        this.getTarget = () => {
-            return document.querySelector('iframe').contentWindow.document.getElementById(this.props.for);
-        };
-        this.onChromeMeasureElement = (element, rect) => {
-            if (rect == null) {
-                rect = element.getBoundingClientRect();
+        this.setTarget = (element, props = {
+            component: element.getAttribute('component'),
+            version: element.getAttribute('version'),
+            revision: element.getAttribute('revision'),
+            instance: element.getAttribute('instance')
+        }) => {
+            if (!this.closing && (!this.target || element == null)) {
+                this.set(props);
+                this.target = element;
+                return true;
             }
+        };
+        this.onChromeMeasureElement = (element, rect = element.getBoundingClientRect()) => {
             if (element.ownerDocument == document) {
                 return {
                     left: rect.left - this.bodyRect.left,
@@ -76,105 +86,467 @@ export class FEAASEditor extends FEAASBase {
         this.onBeforeMeasure = (refs) => {
             if (refs.memoized.focusable)
                 this.framePoint = getFramePosition(refs.memoized.focusable);
-            this.wrapperRect = this.wrapper.getBoundingClientRect();
-            this.bodyRect = this.wrapper.ownerDocument.body.parentElement.getBoundingClientRect();
+            if (this.chrome) {
+                this.wrapperRect = this.chrome.positionable.getBoundingClientRect();
+                this.bodyRect = this.chrome.positionable.ownerDocument.body.parentElement.getBoundingClientRect();
+            }
         };
         this.onMeasure = () => { };
         this.onPosition = ({ focusable, root }) => {
-            const chrome = this.wrapper.querySelector('.editor-chrome');
-            const absolute = this.wrapper.querySelector('.ui.overlays');
+            if (!this.chrome || this.props.hidden)
+                return;
             if (focusable) {
                 const topbarHeight = 64;
                 const padding = 16;
-                chrome.style.width = focusable.width + padding * 2 + 'px';
-                chrome.style.height = focusable.height + padding * 1 + topbarHeight + 'px';
-                chrome.style.left = focusable.left - padding + 'px';
-                chrome.style.top = focusable.top - topbarHeight + 'px';
-                if (absolute) {
-                    absolute.style.left = root.left + 'px';
-                    absolute.style.top = root.top + 'px';
+                this.chrome.wrapper.style.width = focusable.width + padding * 2 + 'px';
+                this.chrome.wrapper.style.height = focusable.height + padding * 1 + topbarHeight + 'px';
+                this.chrome.wrapper.style.left = focusable.left - padding + 'px';
+                this.chrome.wrapper.style.top = focusable.top - topbarHeight + 'px';
+                this.chrome.wrapper.style.opacity = '1';
+                this.chrome.absolute = this.querySelector('.ui.overlays');
+                if (this.chrome.absolute) {
+                    this.chrome.absolute.style.left = root.left + 'px';
+                    this.chrome.absolute.style.top = root.top + 'px';
                 }
             }
             else {
-                chrome.style.left = '-1000px';
-                chrome.style.top = '-1000px';
+                this.chrome.wrapper.style.opacity = '0';
+                this.chrome.wrapper.style.left = '-1000px';
+                this.chrome.wrapper.style.top = '-1000px';
                 // wrapper.style.left = '-1000px'
                 // wrapper.style.top = '-1000px'
             }
+            //    this.setPlaceholder()
+        };
+        this.onWindowMessage = (event) => {
+            var _a;
+            switch ((_a = event.data) === null || _a === void 0 ? void 0 : _a.type) {
+                case 'feaasEdit':
+                    const placeholder = this.getPlaceholder();
+                    if (this.setTarget(placeholder.editable, event.data)) {
+                        this.loader = placeholder.loader;
+                        document.body.appendChild(placeholder.clipper);
+                        this.editedUID = event.data.id;
+                        this.setPlaceholder();
+                        this.open();
+                    }
+                    break;
+                case 'feaasMeasurements':
+                    this.measurements = event.data.measurements;
+                    if (!this.props.hidden)
+                        this.setPlaceholder();
+                    break;
+            }
+        };
+        this.onContentChange = () => {
+            this.setAttribute('changed', 'changed');
+            requestAnimationFrame(() => {
+                this.setIframeComponentContent();
+            });
+        };
+        this.onClose = () => {
+            var _a;
+            this.setAttribute('hidden', 'hidden');
+            if (this.placeholder) {
+                this.placeholder.positionable.style.opacity = '0';
+                this.placeholder.positionable.style.pointerEvents = 'none';
+            }
+            if (this.chrome) {
+                this.chrome.wrapper.style.opacity = '0';
+            }
+            // FIXME: Workaround for CKEditor not removing event listeners properly
+            // Reported: https://github.com/ckeditor/ckeditor5/issues/13141
+            // Have to recreate the whole component
+            if ((_a = this.target) === null || _a === void 0 ? void 0 : _a.parentNode) {
+                this.target.outerHTML = this.target.outerHTML;
+            }
+            this.setTarget(null, {
+                component: null,
+                version: null,
+                instance: null,
+                revision: null
+            });
+            this.setEditorContext({
+                isFocused: false
+            });
+        };
+        this.onVersionStateChange = (versionContext, setVersionContext) => {
+            this.versionContext = versionContext;
+            this.setVersionContext = setVersionContext;
+        };
+        this.onEditorStateChange = (editorContext, setEditorContext) => {
+            this.editorContext = editorContext;
+            this.setEditorContext = setEditorContext;
+            // On editor loaded
+            if (editorContext.editor && this.props.state == 'loading' && !this.props.hidden) {
+                this.setAttribute('state', 'ready');
+                this.ownerDocument.fonts.ready.then(() => setTimeout(() => {
+                    this.setReadyState();
+                    this.setIframeComponentContent();
+                }, 100));
+            }
         };
     }
     getProps() {
         return FEAASEditorProps(this);
     }
+    getReactRootElement() {
+        if (!this.reactRootElement) {
+            this.reactRootElement = document.createElement('div');
+            this.getRoot().appendChild(this.reactRootElement);
+        }
+        return this.reactRootElement;
+    }
+    showLoader() {
+        if (!this.loader) {
+            this.loader = document.createElement('feaas-loader');
+            this.loader.setAttribute('opacity', '0.6');
+            this.loader.style.zIndex = '1000';
+            this.target.appendChild(this.loader);
+            if (this.target.tagName == 'FEAAS-COMPONENT') {
+                this.target.style.position = 'relative';
+            }
+        }
+    }
+    hideLoader() {
+        if (this.loader) {
+            this.loader.setAttribute('hidden', 'hidden');
+            if (this.target.tagName == 'FEAAS-COMPONENT') {
+                this.target.style.position = 'relative';
+                this.target.style.position = '';
+            }
+        }
+    }
     load() {
         return import(/* @vite-ignore */ /* webpackIgnore: true */ this.formatURL(this.props.src, this.props.frontend));
     }
-    /*
-    getRoot(): HTMLElement | FEAASBase<any, any> | ShadowRoot {
-      return this.shadowRoot || this.attachShadow({ mode: 'open' })
-    }
-    reactRoot: HTMLDivElement
-    getReactRoot() {
-      if (!this.reactRoot) {
-        this.reactRoot = document.createElement('div')
-        this.reactRoot.className = 'react-root'
-        this.getRoot().appendChild(this.reactRoot)
-      }
-      return this.reactRoot
-    }
-   */
-    renderReact({ children, component: componentId, version: versionId }, { Editor, VersionStatusList, Version, EditorUIUndo, EditorUIMode, React: { useEffect, useMemo, useState }, Chakra: { HStack, Box }, Chrome, ReactDOM, useSDK, useSlots, useModelObserver }) {
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('message', this.onWindowMessage);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('message', this.onWindowMessage);
+    }
+    setIframe(iframe) {
+        this.iframe = iframe;
+    }
+    setIframeComponentContent() {
+        if (this.placeholder && this.iframe && this.placeholder.editable.innerHTML)
+            this.iframe.contentWindow.postMessage({
+                type: 'feaasUpdate',
+                id: this.editedUID,
+                content: this.placeholder.editable.innerHTML
+            });
+    }
+    setPlaceholder() {
+        const x = this.iframe.clientWidth;
+        const y = this.iframe.clientHeight;
+        const rect = this.iframe.getBoundingClientRect();
+        const placeholder = this.getPlaceholder();
+        const body = document.body.getBoundingClientRect();
+        const measurement = this.measurements[this.editedUID];
+        if (!measurement)
+            return;
+        Object.assign(placeholder.clipper.style, {
+            position: 'absolute',
+            top: rect.top + this.iframe.clientTop - body.top + 'px',
+            left: rect.left + this.iframe.clientLeft - body.left + 'px',
+            width: x + 'px',
+            height: y + 'px',
+            pointerEvents: 'none',
+            zIndex: 1,
+            overflow: 'hidden'
+        });
+        Object.assign(placeholder.positionable.style, {
+            position: 'absolute',
+            top: measurement.top + 'px',
+            left: measurement.left + 'px',
+            width: measurement.width + 'px',
+            zIndex: 2,
+            transition: 'opacity 0.4s',
+            //height: measurement.height + 'px',
+            pointerEvents: this.props.hidden ? 'none' : 'all'
+            //outline: '3px solid orange'
+        });
+        Object.assign(placeholder.loader.style, {
+            position: 'absolute',
+            top: measurement.top + 'px',
+            left: measurement.left + 'px',
+            width: measurement.width + 'px',
+            height: measurement.height + 'px',
+            filter: 'opacity(0.6)',
+            zIndex: 3,
+            pointerEvents: 'none'
+            //outline: '3px solid orange'
+        });
+        document.dispatchEvent(new Event('feaasRefresh', { bubbles: true }));
+    }
+    getPlaceholder() {
+        if (this.placeholder)
+            return this.placeholder;
+        this.placeholder = {
+            clipper: document.createElement('div'),
+            positionable: document.createElement('div'),
+            editable: Object.assign(document.createElement('div'), { className: '-feaas' }),
+            loader: document.createElement('feaas-loader')
+        };
+        this.placeholder.clipper.appendChild(this.placeholder.positionable);
+        this.placeholder.positionable.appendChild(this.placeholder.editable);
+        this.placeholder.clipper.appendChild(this.placeholder.loader);
+        return this.placeholder;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name == 'hidden') {
+            this.style.setProperty('display', 'block', 'important');
+            this.style.setProperty('transition', 'opacity 0.3s', 'important');
+            if (newValue) {
+                this.style.setProperty('opacity', '0', 'important');
+                this.style.pointerEvents = 'none';
+            }
+            else {
+                this.style.setProperty('opacity', '1', 'important');
+                this.style.pointerEvents = 'all';
+            }
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    open() {
+        clearTimeout(this.closing);
+        this.removeAttribute('hidden');
+        this.removeAttribute('changed');
+        this.setLoadingState();
+    }
+    shouldFork(version) {
+        return version.forkOriginId == null && this.props.instance != null;
+    }
+    cleanup() {
+        var _a;
+        if (this.placeholder) {
+            (_a = this.placeholder.clipper) === null || _a === void 0 ? void 0 : _a.remove();
+            this.placeholder = null;
+        }
+    }
+    close() {
+        console.log('Editor is not ready');
+    }
+    unfork() {
+        console.log('Editor is not ready');
+    }
+    discard() {
+        console.log('Editor is not ready');
+    }
+    save() {
+        console.log('Editor is not ready');
+    }
+    setVersionContext(props) {
+        console.log('Editor is not ready');
+    }
+    setEditorContext(props) {
+        console.log('Editor is not ready');
+    }
+    setLoadingState() {
+        this.showLoader();
+        this.setAttribute('state', 'loading');
+    }
+    setReadyState() {
+        this.hideLoader();
+        this.setEditorContext({
+            activeVersionId: this.component.versions[0].id
+        });
+        this.setAttribute('state', 'ready');
+    }
+    renderReact({ children, component: componentId, version: versionId, instance: instanceId }, { Editor, VersionStatusList, VersionStatusButton, Version, VersionMenu, EditorUIUndo, EditorUIMode, React: { useEffect, useMemo, useState, useContext }, Chakra: { HStack, Box, Button, MenuItem }, Chrome, ReactDOM, useSDK, useSlots, useModelObserver, ConfirmationContext, VersionContext }) {
         if (!this.payload)
             return;
+        const { React } = this.payload;
         const { sdk } = useSDK();
         const [component, setComponent] = useState();
+        const { setConfirm } = useContext(ConfirmationContext);
+        const usedId = instanceId || versionId;
         const library = sdk.library;
+        if (component)
+            this.component = component;
         useEffect(() => {
-            return setComponent(library.components.getItem(componentId));
-        }, [componentId, library]);
+            if (this.props.hidden)
+                return;
+            const comp = library.components.getItem(componentId).clone();
+            comp.versions
+                .search({ ids: [versionId, instanceId].filter(Boolean), componentIds: [componentId] })
+                .then((versions) => {
+                comp.versions.setItems(versions);
+                const fork = comp.findVersion(instanceId, ['staged', 'published']);
+                const original = comp.findVersion(versionId, ['staged', 'published']);
+                if (fork) {
+                    if (fork.deletedAt) {
+                        // Get unforked version up to date
+                        fork.getDraft().changeAndNotify(original.toProperties()).restore(); //.publish()
+                        console.error('FEAAS Editor: Restoring fork');
+                    }
+                    else {
+                        console.error('FEAAS Editor: Pre-forked');
+                        this.setAttribute('forked', fork.id);
+                    }
+                }
+                else {
+                    this.removeAttribute('forked');
+                    if (this.shouldFork(original)) {
+                        console.error('FEAAS Editor: Forking');
+                        const newForkId = original.fork(instanceId).id;
+                        this.setAttribute('instance', newForkId);
+                    }
+                    else {
+                        console.error('FEAAS Editor: Regular');
+                    }
+                }
+                setComponent(comp);
+            });
+            return () => {
+                this.closing = setTimeout(() => {
+                    this.closing = null;
+                    this.cleanup();
+                    setComponent(null);
+                }, 400);
+            };
+        }, [versionId, this.props.hidden]);
+        const versions = useModelObserver(component === null || component === void 0 ? void 0 : component.versions, []).filter((v) => v.id == usedId);
+        const version = versions[0];
+        if (version && !this.props.hidden)
+            this.version = version;
         useEffect(() => {
-            component === null || component === void 0 ? void 0 : component.versions.fetch();
+            this.unfork = () => {
+                setConfirm({
+                    title: 'Reverting component customizations',
+                    button: 'Discard',
+                    body: 'Are you sure to reset component to its original state? All changes will be lost.',
+                    action: () => {
+                        const original = component.findVersion(versionId, ['staged', 'published']);
+                        component.findVersion(instanceId).unstage().unpublish().changeAndNotify(original.toProperties());
+                        component.saveVersions(false);
+                        this.setVersionContext({
+                            needsWrite: true
+                        });
+                        this.removeAttribute('forked');
+                        requestAnimationFrame(this.onClose);
+                    }
+                });
+            };
+            this.discard = () => {
+                if (this.props.changed) {
+                    component.findVersion(usedId).revert();
+                    component.saveVersions(false);
+                    this.setVersionContext({
+                        needsWrite: true
+                    });
+                }
+            };
+            this.close = () => {
+                setConfirm({
+                    title: 'Component has unsaved changes',
+                    button: 'Discard',
+                    body: 'Are you sure to close editor and discard changes?',
+                    bypass: !this.props.changed,
+                    action: () => {
+                        this.discard();
+                        requestAnimationFrame(this.onClose);
+                    }
+                });
+            };
+            this.save = () => {
+                setConfirm({
+                    bypass: !!this.props.forked,
+                    title: 'Customizing component',
+                    button: 'Save',
+                    body: 'Changes to the component will only be visible on that page. Changes to component done in Component Builder will not be reflected here. It will be possible to revert the customization.',
+                    action: () => {
+                        component
+                            .findVersion(usedId)
+                            .commitData({
+                            view: this.editorContext.editor.getData({ rootName: usedId }),
+                            model: ''
+                        })
+                            .stage()
+                            .publish();
+                        this.removeAttribute('changed');
+                        this.setAttribute('forked', usedId);
+                        component.saveVersions(false);
+                    }
+                });
+            };
+            return () => {
+                delete this.unfork;
+                delete this.discard;
+                delete this.save;
+                delete this.editorContext;
+                delete this.versionContext;
+                delete this.setEditorContext;
+                delete this.setVersionContext;
+            };
         }, [component]);
-        const target = useMemo(this.getTarget, [this.props.for]);
-        const observedVersions = useModelObserver(component === null || component === void 0 ? void 0 : component.versions);
-        const versions = useMemo(() => {
-            return (observedVersions === null || observedVersions === void 0 ? void 0 : observedVersions.filter((v) => v.id == versionId || !versionId)) || [];
-        }, [observedVersions]);
-        if (!component)
-            return;
-        return useSlots(children, ({ picker, children }) => (React.createElement(Box, { ref: (el) => (this.wrapper = el) },
-            React.createElement(Box, { className: 'editor-wrapper', position: 'absolute', left: 0, top: 0 },
-                React.createElement(Editor, { datasources: sdk.datasources, sdk: sdk, library: sdk.library, component: component, versions: versions, context: {
-                        onChromeMeasure: this.onMeasure,
-                        onChromeBeforeMeasure: this.onBeforeMeasure,
-                        onChromeMeasureElement: this.onChromeMeasureElement,
-                        onChromePosition: this.onPosition
-                    } }, ({ editor, status, isArchivedDisplayed }) => ({
-                    after: children,
-                    picker: picker,
-                    chrome: editor && React.createElement(Chrome, null),
-                    children: component
-                        .reduceVersionRevisions(versions)
-                        .filter((snapshot) => {
-                        var _a;
-                        return isArchivedDisplayed || !((_a = (snapshot.saved || snapshot.draft)) === null || _a === void 0 ? void 0 : _a.deletedAt);
-                    })
-                        .map((snapshot, index) => (React.createElement(Box, { key: snapshot.head.id, position: 'absolute', left: 0, top: 0, className: 'editor-chrome', p: 4, boxShadow: '2xl', pointerEvents: 'none' },
-                        React.createElement(Box, { className: 'borders', pointerEvents: 'none', left: 0, width: '4', top: 0, bottom: 0, backdropFilter: 'blur(2px)', background: 'rgb(244 244 244 / 80%)', position: 'absolute' }),
-                        React.createElement(Box, { className: 'borders', pointerEvents: 'none', right: 0, width: '4', top: 0, bottom: 0, backdropFilter: 'blur(2px)', background: 'rgb(244 244 244 / 80%)', position: 'absolute' }),
-                        React.createElement(Box, { className: 'borders', pointerEvents: 'none', top: 0, height: '16', left: 0, right: 0, backdropFilter: 'blur(2px)', background: 'rgb(244 244 244 / 80%)', position: 'absolute' }),
-                        React.createElement(Box, { className: 'borders', pointerEvents: 'none', bottom: 0, height: '4', left: 0, right: 0, backdropFilter: 'blur(2px)', background: 'rgb(244 244 244 / 80%)', position: 'absolute' }),
-                        React.createElement(Version, { version: snapshot.head, node: target }, {
-                            left: (React.createElement(HStack, { justifyContent: 'space-between' },
-                                React.createElement(EditorUIUndo, { size: 'sm', editor: status == 'ready' ? editor : null }),
-                                React.createElement(EditorUIMode, { size: 'sm' }))),
-                            middle: React.createElement(VersionStatusList, null)
-                        }))))
-                }))))));
+        const target = useMemo(() => {
+            return this.target;
+        }, [component]);
+        return useMemo(() => component &&
+            useSlots(children, ({ picker, children }) => (React.createElement(Box, { ref: (el) => {
+                    this.chrome = el
+                        ? {
+                            positionable: el,
+                            wrapper: el.querySelector('.editor-chrome'),
+                            absolute: this.querySelector('.ui.overlays')
+                        }
+                        : null;
+                } },
+                React.createElement(Box, { className: 'editor-wrapper', position: 'absolute', left: 0, top: 0 },
+                    React.createElement(Editor, { datasources: sdk.datasources, sdk: sdk, library: sdk.library, component: component, versions: versions, context: {
+                            isAutosaveEnabled: false,
+                            onChromeMeasure: this.onMeasure,
+                            onChromeBeforeMeasure: this.onBeforeMeasure,
+                            onChromeMeasureElement: this.onChromeMeasureElement,
+                            onChromePosition: this.onPosition,
+                            onContentChange: this.onContentChange
+                        } }, {
+                        exports: this.onEditorStateChange,
+                        after: children,
+                        chrome: ({ editor }) => editor && React.createElement(Chrome, null),
+                        children: ({ isArchivedDisplayed, editor, status }) => (React.createElement(Box, { position: 'absolute', left: 0, top: 0, className: 'editor-chrome', p: 4, boxShadow: '2xl', pointerEvents: 'none', opacity: 0, transition: 'opacity 0.3s' },
+                            React.createElement(Box, { left: 0, width: '4', top: 0, bottom: 0, backdropFilter: 'blur(2px)', background: 'rgb(244 244 244 / 80%)', position: 'absolute' }),
+                            React.createElement(Box, { right: 0, width: '4', top: 0, bottom: 0, backdropFilter: 'blur(2px)', background: 'rgb(244 244 244 / 80%)', position: 'absolute' }),
+                            React.createElement(Box, { top: 0, height: '16', left: 0, right: 0, backdropFilter: 'blur(2px)', background: 'rgb(244 244 244 / 80%)', position: 'absolute' }),
+                            React.createElement(Box, { bottom: 0, height: '4', left: 0, right: 0, backdropFilter: 'blur(2px)', background: 'rgb(244 244 244 / 80%)', position: 'absolute' }),
+                            version && (React.createElement(Version, { version: version, node: target, ignoreBreakpoints: true, deps: [this.props.forked, this.props.changed] }, {
+                                exports: this.onVersionStateChange,
+                                left: (React.createElement(HStack, { justifyContent: 'space-between' },
+                                    React.createElement(EditorUIUndo, { size: 'sm', editor: status == 'ready' ? editor : null }),
+                                    React.createElement(EditorUIMode, { size: 'sm' }))),
+                                middle: (versionContext, setVersionContext) => [
+                                    false && (React.createElement(VersionContext.Provider, { value: [
+                                            {
+                                                ...versionContext,
+                                                version: component.findVersion(versionId)
+                                            },
+                                            setVersionContext
+                                        ] },
+                                        React.createElement(VersionStatusList, null)))
+                                ],
+                                right: (React.createElement(React.Fragment, null,
+                                    React.createElement(Button, { variant: 'secondary', size: 'sm', onClick: this.close }, "Close"),
+                                    React.createElement(Button, { variant: 'primary', size: 'sm', onClick: this.save, isDisabled: !this.props.changed }, !this.props.changed
+                                        ? 'Up to date'
+                                        : this.props.forked
+                                            ? 'Save'
+                                            : 'Save customization'),
+                                    React.createElement(VersionMenu, { isDisabled: !this.props.forked && !this.props.changed },
+                                        React.createElement(MenuItem, { onClick: this.unfork, isDisabled: !this.props.forked }, "Unfork"),
+                                        React.createElement(MenuItem, { onClick: this.discard, isDisabled: !this.props.changed }, "Discard"))))
+                            }))))
+                    }))))), [version, this.props.forked, this.props.changed]);
     }
     isReadyToLoad() {
-        return this.props.component != null && this.props.version != null;
+        return this.props.component != null && this.props.version != null && !this.props.hidden;
     }
 }
+FEAASEditor.observedAttributes = ['library', 'component', 'version', 'revision', 'hidden', 'state', 'changed', 'forked'];
 FEAASEditor.register('feaas-editor');
 //# sourceMappingURL=FEAASEditor.js.map