@hestia-earth/ui-components 0.36.0 → 0.36.2

package/fesm2022/hestia-earth-ui-components.mjs

@@ -2747,6 +2747,7 @@ class DrawerContainerComponent {
         this.menuOverlap = input(true, ...(ngDevMode ? [{ debugName: "menuOverlap" }] : []));
         this.links = input([], ...(ngDevMode ? [{ debugName: "links" }] : []));
         this.drawerHeaderTemplate = input(...(ngDevMode ? [undefined, { debugName: "drawerHeaderTemplate" }] : []));
+        this.drawerFooterTemplate = input(...(ngDevMode ? [undefined, { debugName: "drawerFooterTemplate" }] : []));
         this.drawerMenuHeaderTemplate = input(...(ngDevMode ? [undefined, { debugName: "drawerMenuHeaderTemplate" }] : []));
         this.drawerContentTemplate = input(...(ngDevMode ? [undefined, { debugName: "drawerContentTemplate" }] : []));
         this.compactMenuLabel = input('Menu', ...(ngDevMode ? [{ debugName: "compactMenuLabel" }] : []));
@@ -2840,7 +2841,7 @@ class DrawerContainerComponent {
         return parseInt(padding, 10) + parseInt(margin, 10);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, providers: [sidenavStore], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n          <div class=\"is-flex is-flex-grow-1 is-justify-content-space-between is-gap-8 is-flex-direction-column\">\n            @if (drawerHeaderTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n            }\n            @if (drawerMenuHeaderTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n            }\n          </div>\n\n          @if (links()?.length > 0) {\n            <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n              <button\n                ngbDropdownToggle\n                class=\"compact-header--btn button is-small is-no-shadow\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                {{ compactMenuLabel() }}\n\n                <he-svg-icon\n                  class=\"compact-header--btn__icon\"\n                  [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" />\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"shell__menuContent | h-100\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width: 767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width: 767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerFooterTemplate: { classPropertyName: "drawerFooterTemplate", publicName: "drawerFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, providers: [sidenavStore], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerMenuHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n              <button\n                ngbDropdownToggle\n                class=\"compact-header--btn button is-small is-no-shadow\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                {{ compactMenuLabel() }}\n\n                <he-svg-icon\n                  class=\"compact-header--btn__icon\"\n                  [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" />\n                </div>\n              </div>\n            </div>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"shell__menuContent | h-100\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width: 767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width: 767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DrawerContainerComponent, decorators: [{
             type: Component$1,
@@ -2857,8 +2858,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImpo
                         '[class]': 'hostClass()',
                         '[attr.drawer-position]': 'position()',
                         '[attr.drawer-state]': 'menuState()'
-                    }, providers: [sidenavStore], template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n          <div class=\"is-flex is-flex-grow-1 is-justify-content-space-between is-gap-8 is-flex-direction-column\">\n            @if (drawerHeaderTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n            }\n            @if (drawerMenuHeaderTemplate()) {\n              <ng-container [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n            }\n          </div>\n\n          @if (links()?.length > 0) {\n            <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n              <button\n                ngbDropdownToggle\n                class=\"compact-header--btn button is-small is-no-shadow\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                {{ compactMenuLabel() }}\n\n                <he-svg-icon\n                  class=\"compact-header--btn__icon\"\n                  [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" />\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"shell__menuContent | h-100\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width: 767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width: 767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { ...{ read: ElementRef }, isSignal: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], compactBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactBreakpoint", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], contentStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyles", required: false }] }], contentPaddingStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPaddingStyles", required: false }] }], menuOverlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuOverlap", required: false }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], drawerHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerHeaderTemplate", required: false }] }], drawerMenuHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuHeaderTemplate", required: false }] }], drawerContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerContentTemplate", required: false }] }], compactMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuLabel", required: false }] }], compactHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactHeaderClass", required: false }] }], minMenuDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMenuDistance", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], stopResizing: [{
+                    }, providers: [sidenavStore], template: "@if (visible()) {\n  @if (isCompact()) {\n    <div class=\"compact-header\">\n      <div [ngClass]=\"compactHeaderClass()\">\n        <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerMenuHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n              <button\n                ngbDropdownToggle\n                class=\"compact-header--btn button is-small is-no-shadow\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                {{ compactMenuLabel() }}\n\n                <he-svg-icon\n                  class=\"compact-header--btn__icon\"\n                  [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <div ngbDropdownMenu id=\"drawer-menu\">\n                <div class=\"dropdown-content navigation-menu-dropdown\">\n                  <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" />\n                </div>\n              </div>\n            </div>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n      </div>\n    </div>\n  } @else {\n    <aside>\n      <div\n        class=\"shell__menuContent | h-100\"\n        (@sideMenu.done)=\"animationDone($event)\"\n        [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n        <div\n          class=\"h-100 is-overflow-y-auto\"\n          [class.is-py-4]=\"!drawerContentTemplate()\"\n          [class.is-px-2]=\"!drawerContentTemplate()\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (drawerContentTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <he-navigation-menu [links]=\"links()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n            </he-navigation-menu>\n          }\n          @if (drawerFooterTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerFooterTemplate()\" />\n          }\n        </div>\n        @if (collapsible()) {\n          <button\n            (click)=\"toggleMenu()\"\n            (mousedown)=\"startResizing($event)\"\n            (touchstart)=\"startResizing($event)\"\n            class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n            pointer>\n            <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n          </button>\n        }\n      </div>\n    </aside>\n  }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n  <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n    <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n      <ng-content select=\"[drawer-content]\" />\n    </div>\n  </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width: 767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width: 767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { ...{ read: ElementRef }, isSignal: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], compactBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactBreakpoint", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }, { type: i0.Output, args: ["widthChange"] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], contentStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyles", required: false }] }], contentPaddingStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPaddingStyles", required: false }] }], menuOverlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuOverlap", required: false }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], drawerHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerHeaderTemplate", required: false }] }], drawerFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerFooterTemplate", required: false }] }], drawerMenuHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuHeaderTemplate", required: false }] }], drawerContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerContentTemplate", required: false }] }], compactMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuLabel", required: false }] }], compactHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactHeaderClass", required: false }] }], minMenuDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "minMenuDistance", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], stopResizing: [{
                 type: HostListener,
                 args: ['window:mouseup']
             }, {
@@ -9316,7 +9317,7 @@ const customErrorMessage = {
       Please check the longitude and latitude for errors or check if the wrong ${dataPath.substring(1)} from the ${glossaryTypeLink(TermTermType.region, 'Glossary')} was used.
       ${params?.expected
             ? `Hint: the coordinates appear to be located in the following ${dataPath.substring(1)}: ${termLink({
-                id: 'params.expected'
+                id: params.expected
             })}`
             : ''}`
         : `The region provided does not contain the longitude and latitude provided.
@@ -9515,10 +9516,9 @@ const customErrorMessage = {
     (land transformation is the amount of land converted between some date in the past and the current year,
     divided by an amortization period, so it should always be less than land occupation by definition).`,
     'should be linked to an emission in the Cycle': ({ params }, errorCount) => `${errorCount === 1 ? `${code(params?.term.name)} exists` : 'Some Emissions exist'} in both the Cycle and the Transformation but ${errorCount === 1 ? 'it is' : 'they are'} not linked using ${code('cycle.emissions.X.transformation.term')}. This may be an error.`,
-    'should add an animal production system': () => `For animal production cycles, we recommend specifying the animal production ${glossaryTypeLink(TermTermType.system)} e.g., ${code('Confined pasture system')} or ${code('Feedlot system')}, as a Practice.
-    This is particularly important for ruminants, as the system influences animals' activity level and is used in the estimation of grass intake.
-    It also ensures a more accurate gap-filling of beef cattle excreta.
-    You can find a list of systems in the ${glossaryTypeLink(TermTermType.system, 'Glossary')}.`,
+    'should add an animal production system': ({ params }) => `For animal rearing cycles, we recommend adding a practice to specify the production system.
+    This information is used to estimate ruminants' grass intake and enteric methane emissions for all animals.
+    You can choose one or more of the following terms: ${params?.expected?.map(code).join(', ')}`,
     'must be set to false when specifying fuel use': ({ params }) => `If fuel for machinery (${params?.allowedValues.map(code).join(', ')}) is used during a Cycle,
     but there is no data on the amount of ${glossaryTypeLink(TermTermType.material)} used for agricultural equipment,
     then ${code('completeness.material')} must be ${code('false')}.
@@ -10638,16 +10638,18 @@ class SchemaInfoComponent {
         this.placement = input('bottom', ...(ngDevMode ? [{ debugName: "placement" }] : []));
         this.triggers = input('hover', ...(ngDevMode ? [{ debugName: "triggers" }] : []));
         this.container = input('body', ...(ngDevMode ? [{ debugName: "container" }] : []));
+        this.iconName = input('help-circle', ...(ngDevMode ? [{ debugName: "iconName" }] : []));
+        this.iconSize = input('20', ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
         this.contentString = computed(() => this.content() || this.schema()?.properties?.[this.field()]?.description || this.schema()?.description, ...(ngDevMode ? [{ debugName: "contentString" }] : []));
         this.autoClose = computed(() => (this.triggers() === 'click' ? 'outside' : true), ...(ngDevMode ? [{ debugName: "autoClose" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SchemaInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SchemaInfoComponent, isStandalone: true, selector: "he-schema-info", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, triggers: { classPropertyName: "triggers", publicName: "triggers", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (contentString()) {\n  <span\n    class=\"is-inline-block has-text-secondary | help-icon\"\n    [ngbTooltip]=\"tooltipContent\"\n    [placement]=\"placement()\"\n    [triggers]=\"triggers()\"\n    [autoClose]=\"autoClose()\"\n    [container]=\"container()\">\n    <he-svg-icon name=\"help-circle\" size=\"20\" />\n  </span>\n}\n\n<ng-template #tooltipContent>\n  <span class=\"is-pre-line\">\n    {{ contentString() | removeMarkdown }}\n  </span>\n</ng-template>\n", styles: [":host{height:20px}\n"], dependencies: [{ kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "pipe", type: RemoveMarkdownPipe, name: "removeMarkdown" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SchemaInfoComponent, isStandalone: true, selector: "he-schema-info", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, triggers: { classPropertyName: "triggers", publicName: "triggers", isSignal: true, isRequired: false, transformFunction: null }, container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (contentString()) {\n  <span\n    class=\"is-inline-block has-text-secondary | help-icon\"\n    [ngbTooltip]=\"tooltipContent\"\n    [placement]=\"placement()\"\n    [triggers]=\"triggers()\"\n    [autoClose]=\"autoClose()\"\n    [container]=\"container()\">\n    <he-svg-icon [name]=\"iconName\" [size]=\"iconSize\" />\n  </span>\n}\n\n<ng-template #tooltipContent>\n  <span class=\"is-pre-line\">\n    {{ contentString() | removeMarkdown }}\n  </span>\n</ng-template>\n", styles: [":host{height:20px}\n"], dependencies: [{ kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "pipe", type: RemoveMarkdownPipe, name: "removeMarkdown" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SchemaInfoComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-schema-info', imports: [NgbTooltip, HESvgIconComponent, RemoveMarkdownPipe], template: "@if (contentString()) {\n  <span\n    class=\"is-inline-block has-text-secondary | help-icon\"\n    [ngbTooltip]=\"tooltipContent\"\n    [placement]=\"placement()\"\n    [triggers]=\"triggers()\"\n    [autoClose]=\"autoClose()\"\n    [container]=\"container()\">\n    <he-svg-icon name=\"help-circle\" size=\"20\" />\n  </span>\n}\n\n<ng-template #tooltipContent>\n  <span class=\"is-pre-line\">\n    {{ contentString() | removeMarkdown }}\n  </span>\n</ng-template>\n", styles: [":host{height:20px}\n"] }]
-        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], triggers: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggers", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
+            args: [{ selector: 'he-schema-info', imports: [NgbTooltip, HESvgIconComponent, RemoveMarkdownPipe], template: "@if (contentString()) {\n  <span\n    class=\"is-inline-block has-text-secondary | help-icon\"\n    [ngbTooltip]=\"tooltipContent\"\n    [placement]=\"placement()\"\n    [triggers]=\"triggers()\"\n    [autoClose]=\"autoClose()\"\n    [container]=\"container()\">\n    <he-svg-icon [name]=\"iconName\" [size]=\"iconSize\" />\n  </span>\n}\n\n<ng-template #tooltipContent>\n  <span class=\"is-pre-line\">\n    {{ contentString() | removeMarkdown }}\n  </span>\n</ng-template>\n", styles: [":host{height:20px}\n"] }]
+        }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], triggers: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggers", required: false }] }], container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], iconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconName", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }] } });
 
 const MIN_TYPEAHEAD_LENGTH = 2;
 const populateTermFields = ['termType', 'units'];
@@ -10993,7 +10995,7 @@ class FilesFormEditableComponent {
         return this.propertyChanged(value, array);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FilesFormEditableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: FilesFormEditableComponent, isStandalone: true, selector: "he-files-form-editable", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, nodeMap: { classPropertyName: "nodeMap", publicName: "nodeMap", isSignal: true, isRequired: false, transformFunction: null }, showSuggestedDefaultProperties: { classPropertyName: "showSuggestedDefaultProperties", publicName: "showSuggestedDefaultProperties", isSignal: true, isRequired: false, transformFunction: null }, errorGuidePrefix: { classPropertyName: "errorGuidePrefix", publicName: "errorGuidePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", nodeChanged: "nodeChanged" }, ngImport: i0, template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen.set(!isOpen())\" pointer>\n    <he-svg-icon [name]=\"isOpen() ? 'chevron-down' : 'chevron-right'\" />\n    @if (nodeProperty()) {\n      <span\n        class=\"is-px-2\"\n        [class.has-text-danger]=\"nodeProperty().hasError\"\n        [class.has-text-warning]=\"nodeProperty().hasWarning\">\n        <he-node-icon [type]=\"schemaType()\" />\n      </span>\n    }\n  </div>\n\n  @if (isOpen() && nodeProperty()) {\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: nodeProperty() }\" />\n  }\n\n  <div class=\"card-content\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <div class=\"py-4 pl-4\">\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty() }\" />\n        </div>\n      }\n    }\n\n    <div class=\"columns is-multiline\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n  </div>\n\n  <ng-content />\n</div>\n\n@if (!!bibliographiesSearchProperty()) {\n  <he-bibliographies-search-confirm\n    [search]=\"bibliographiesSearchProperty().value\"\n    [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty())\"\n    [searchSources]=\"bibliographiesSearchSources\"\n    (closed)=\"onBibliographiesSearchClosed($event)\" />\n}\n\n<ng-template #labelDescription let-property>\n  <span class=\"property-key\" [ngbTooltip]=\"property.key\" placement=\"right\">\n    <span class=\"is-inline-block is-align-middle is-nowrap has-text-ellipsis\">{{ property.key }}</span>\n    @if (property.schema?.description) {\n      <he-schema-info\n        class=\"is-inline-block is-pl-1 is-align-middle\"\n        triggers=\"click\"\n        [content]=\"property.schema.description\" />\n    }\n  </span>\n</ng-template>\n\n<ng-template #labelDefault let-property>\n  <span>{{ property.key }}</span>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    <div\n      class=\"column is-6\"\n      [id]=\"property.fullKey + '_' + property.id\"\n      [class.is-12]=\"property.properties.length || !property.key\">\n      @if (!property.properties.length) {\n        <div class=\"columns is-multiline is-variable is-1\">\n          @if (property.key) {\n            <div class=\"column is-3 py-1\">\n              <label class=\"label has-text-right-tablet has-text-ellipsis\" [for]=\"property.id\" [title]=\"property.key\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    property.schema?.description && property.editable ? labelDescription : labelDefault;\n                    context: { $implicit: property }\n                  \" />\n              </label>\n            </div>\n          }\n          <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n            <div class=\"field\">\n              <ng-container *ngTemplateOutlet=\"inputForm; context: { $implicit: property }\" />\n              <ng-container *ngTemplateOutlet=\"propertyError; context: { property: property }\" />\n            </div>\n          </div>\n        </div>\n      }\n      @if (!!property.properties.length) {\n        <div\n          class=\"panel\"\n          [class.is-danger]=\"!property.changed && property.hasError\"\n          [class.is-warning]=\"!property.changed && property.hasWarning\"\n          [class.is-default]=\"!property.changed && !property.hasError && !property.hasWarning\">\n          <div\n            class=\"open-group panel-heading py-0\"\n            (click)=\"property.isOpen = !property.isOpen\"\n            pointer\n            [class.is-open]=\"property.isOpen\"\n            [class.has-text-white]=\"property.hasError || property.hasWarning\">\n            <div class=\"columns is-mobile is-vcentered is-multiline\">\n              <span class=\"column is-narrow py-1 my-0\">\n                <he-svg-icon [name]=\"property.isOpen ? 'chevron-down' : 'chevron-right'\" />\n              </span>\n              <span class=\"column py-1 my-0\">\n                <span class=\"is-size-6\">{{ property.key }}</span>\n              </span>\n              @if (property.schemaType) {\n                <span class=\"column is-narrow py-1 my-0\">\n                  <span class=\"tags mb-0 has-addons\">\n                    <span class=\"tag mb-0 is-light\">Type</span>\n                    <span class=\"tag mb-0 is-white\">\n                      <he-schema-version-link linkClass=\"is-small\" [node]=\"{ '@type': property.schemaType }\">\n                        <span>{{ property.schemaType }}</span>\n                      </he-schema-version-link>\n                    </span>\n                  </span>\n                </span>\n              }\n              <he-popover-confirm\n                class=\"column is-narrow py-1 my-0 px-0\"\n                ngbTooltip=\"Remove group\"\n                placement=\"top\"\n                [message]=\"\n                  '<p>This will remove the group completely.</p>' +\n                  (property.isRequired ? '<p><u>Warning: this field is required.</u></p>' : '') +\n                  '<p>Do you confirm?</p>'\n                \"\n                popoverClass=\"px-3\"\n                (confirmed)=\"propertyChanged(null, property)\">\n                <he-svg-icon name=\"xmark\" />\n              </he-popover-confirm>\n            </div>\n          </div>\n          @if (property.isOpen) {\n            <div class=\"panel-block is-block p-0\">\n              @if (property.error) {\n                <div class=\"px-3 pt-4\">\n                  <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n                </div>\n              }\n              @if (!property.isArray) {\n                <div class=\"mt-3\">\n                  @if (!property.editable) {\n                    <p class=\"help py-1 px-2\">\n                      To change the {{ property.key }}, please delete it first, then add the field again\n                    </p>\n                  }\n                  @if (property.editable) {\n                    @switch (property.schema?.title) {\n                      @case ('Bibliography') {\n                        <p class=\"help py-1 px-2\">\n                          Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                        </p>\n                      }\n                    }\n                  }\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: property }\" />\n                  <div class=\"property-group py-2 px-3 mt-2\">\n                    <div class=\"columns is-multiline mb-0\">\n                      @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (property.isArray) {\n                <div class=\"py-2 px-3 mt-2\">\n                  @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                    @if (prop2.key) {\n                      <div class=\"card p-0 my-4\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                        <div class=\"property-array-number\">\n                          <div class=\"tags has-addons\">\n                            <span class=\"tag is-dark\">{{ prop2.key }}</span>\n                            @if (property.editable) {\n                              <span\n                                class=\"tag is-info\"\n                                pointer\n                                (click)=\"duplicateArrayGroup(property, prop2)\"\n                                [ngbTooltip]=\"'Duplicate ' + property.key | pluralize: 1\"\n                                placement=\"top\">\n                                <he-svg-icon name=\"copy\" />\n                              </span>\n                              @if (prop2.key !== '0') {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupUp(property, prop2)\"\n                                  ngbTooltip=\"Move Up\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-up\" />\n                                </span>\n                              }\n                              @if (prop2.key !== property.properties.length - 1) {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupDown(property, prop2)\"\n                                  ngbTooltip=\"Move Down\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-down\" />\n                                </span>\n                              }\n                              <he-popover-confirm\n                                class=\"tag is-delete\"\n                                [ngbTooltip]=\"'Remove ' + property.key | pluralize: 1\"\n                                placement=\"top\"\n                                message=\"This will remove the group completely. Do you confirm?\"\n                                position=\"right\"\n                                (confirmed)=\"removeArrayGroup(property, prop2)\" />\n                            }\n                          </div>\n                        </div>\n                        <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: prop2 }\" />\n                        @if (prop2.error) {\n                          <div class=\"px-4 mt-2\">\n                            <ng-container *ngTemplateOutlet=\"propertyError; context: { property: prop2 }\" />\n                          </div>\n                        }\n                        <div class=\"property-group card-content p-3\">\n                          <div class=\"columns is-multiline my-0\">\n                            @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                              <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (property.editable) {\n                    <button class=\"button is-info is-small\" type=\"button\" (click)=\"addArrayGroup(property)\">\n                      <he-svg-icon name=\"plus\" />\n                      <span class=\"pl-2\">Add</span>\n                      <span class=\"pl-1\">{{ property.key | pluralize: 1 }}</span>\n                    </button>\n                    <he-node-recommendations\n                      buttonClass=\"is-small\"\n                      [node]=\"node\"\n                      [nodeField]=\"property.key\"\n                      (selectRecommendation)=\"onSelectRecommendation(property, $event)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputForm let-property>\n  @if (property.key) {\n    @switch (property.suggestions?.type) {\n      @case ('select') {\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: { $implicit: property }\" />\n      }\n      @default {\n        <ng-container *ngTemplateOutlet=\"inputInput; context: { $implicit: property }\" />\n      }\n    }\n  }\n</ng-template>\n\n<ng-template #inputInput let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\" [class.has-icons-right]=\"property.loading\">\n      <input\n        class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [(ngModel)]=\"property.value\"\n        #propertyModel=\"ngModel\"\n        [type]=\"property.schema?.type === 'number' ? 'number' : 'string'\"\n        [id]=\"property.id\"\n        name=\"randomname\"\n        [readonly]=\"!property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{\n          enabled: property.editable && property.schema?.type === 'array',\n          items: property.schema?.items,\n          delimiter: ';',\n          allowDuplicates: true,\n          placeholder: property.placeholder\n        }\"\n        (change)=\"propertyChanged($event.target.value, property)\"\n        [pattern]=\"property.schema?.pattern\"\n        [required]=\"property.fullKey.endsWith('id') && property.fullKey !== 'id'\"\n        [min]=\"property.schema?.minimum\"\n        [max]=\"property.schema?.maximum\"\n        [ngbTypeahead]=\"property | applyPure: propertySuggest\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"property.formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\" />\n\n      <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!property.loading\">\n        <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #inputSelect let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\">\n      <div\n        class=\"select is-small is-fullwidth\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\">\n        <select\n          [(ngModel)]=\"property.value\"\n          #propertyModel=\"ngModel\"\n          [id]=\"property.id\"\n          name=\"randomname\"\n          [disabled]=\"!property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\">\n          <option value=\"\">Select</option>\n          @for (value of property.suggestions.values; track trackByIndex($index, value)) {\n            <option [value]=\"value\">\n              {{ value }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  @if (!property.isRequired) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small\"\n        title=\"Remove field\"\n        [class.is-outlined]=\"!property.changed && (property.hasError || property.hasWarning)\"\n        [class.is-danger]=\"!property.changed && property.hasError\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        (click)=\"$event.stopPropagation(); propertyChanged(null, property)\">\n        <he-svg-icon name=\"xmark\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  @if (property.editable) {\n    @switch (property.schemaType) {\n      @case (SchemaType.Cycle) {\n        <ng-container *ngTemplateOutlet=\"cycleAddons; context: { $implicit: property }\" />\n      }\n    }\n    @if (bibliographiesSearchKey(property)) {\n      <div class=\"control\">\n        <button class=\"button is-small\" title=\"Advanced Search\" (click)=\"bibliographiesSearchProperty.set(property)\">\n          <he-svg-icon name=\"search\" />\n        </button>\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: { $implicit: property }\" />\n  }\n\n  @if (property.addPropertyEnabled) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small is-danger\"\n        title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\">\n        <he-svg-icon name=\"plus\" />\n        <span class=\"pl-2\">Add</span>\n      </a>\n    </div>\n  }\n  @if (isRequired(property)) {\n    <div class=\"control\">\n      <label class=\"button is-small is-danger\" [for]=\"property.id\" ngbTooltip=\"This field is required\" placement=\"top\">\n        <he-svg-icon name=\"exclamation-triangle\" />\n      </label>\n    </div>\n  }\n  @if (property.externalUrl?.url) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small\"\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" class=\"ml-2\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  @if (property.key === 'cycleDuration') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from startDate and endDate\"\n        (click)=\"calculateCycleDuration(property)\"\n        [disabled]=\"!calculateCycleDurationEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n  @if (property.key === 'startDate') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from endDate and cycleDuration\"\n        (click)=\"calculateCycleStartDate(property)\"\n        [disabled]=\"!calculateCycleStartDateEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  @if (property.editable && property.addPropertyEnabled) {\n    <header class=\"card-header\">\n      <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n        <div class=\"field is-horizontal\">\n          <div class=\"field-label is-small\">\n            <label class=\"label\" [for]=\"property.id + '_new'\">\n              <span>Add new field</span>\n            </label>\n          </div>\n          <div class=\"field-body\">\n            <div class=\"field has-addons\">\n              <div class=\"control is-expanded\">\n                <input\n                  class=\"input is-small\"\n                  [(ngModel)]=\"property.newProperty\"\n                  [id]=\"property.id + '_new'\"\n                  name=\"randomname\"\n                  placeholder=\"Search and select field from results\"\n                  [ngbTypeahead]=\"property | applyPure: suggestNewProperty\"\n                  [resultTemplate]=\"suggestion\"\n                  [inputFormatter]=\"formatNewProperty\"\n                  [focusFirst]=\"false\"\n                  [editable]=\"false\"\n                  (focus)=\"typeaheadFocus($event)\" />\n              </div>\n              <div class=\"control\">\n                <button\n                  class=\"button is-small\"\n                  type=\"submit\"\n                  [disabled]=\"!property.newProperty || !property.newProperty.name\">\n                  <he-svg-icon name=\"plus\" />\n                  <span class=\"pl-2\">Add</span>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </form>\n    </header>\n  } @else {\n    <div class=\"pt-1\"></div>\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\">\n  @if (property.error) {\n    <p class=\"help\" [class.is-danger]=\"property.hasError\" [class.is-warning]=\"property.hasWarning\">\n      <span class=\"is-pre-wrap\" [innerHTML]=\"property.error.message\"></span>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n    </p>\n  }\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\" />\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#f5f5f5;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width: 767px){.card-toggle{position:relative}}.card{overflow:visible}.card .card{box-shadow:2px 2px #36363652,0 0 0 1px #36363652}.card .card>.card-header{box-shadow:0 2px 1px #36363652}.property-key span:first-child{width:calc(100% - 20px)}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(53.55,53.55,53.55,.32)}.control>.button{height:100%}.is-danger-light{color:#ff0514}he-sites-maps{height:200px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["searchChange", "searchSourcesChange", "searchBibliographiesChange", "searchByChange", "closed"] }, { kind: "component", type: SchemaInfoComponent, selector: "he-schema-info", inputs: ["type", "field", "content", "placement", "triggers", "container"] }, { kind: "component", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { kind: "component", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { kind: "directive", type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "pipe", type: ApplyPurePipe, name: "applyPure" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: FilesFormEditableComponent, isStandalone: true, selector: "he-files-form-editable", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, nodeMap: { classPropertyName: "nodeMap", publicName: "nodeMap", isSignal: true, isRequired: false, transformFunction: null }, showSuggestedDefaultProperties: { classPropertyName: "showSuggestedDefaultProperties", publicName: "showSuggestedDefaultProperties", isSignal: true, isRequired: false, transformFunction: null }, errorGuidePrefix: { classPropertyName: "errorGuidePrefix", publicName: "errorGuidePrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange", nodeChanged: "nodeChanged" }, ngImport: i0, template: "<div class=\"card\">\n  <div class=\"card-toggle p-4\" (click)=\"isOpen.set(!isOpen())\" pointer>\n    <he-svg-icon [name]=\"isOpen() ? 'chevron-down' : 'chevron-right'\" />\n    @if (nodeProperty()) {\n      <span\n        class=\"is-px-2\"\n        [class.has-text-danger]=\"nodeProperty().hasError\"\n        [class.has-text-warning]=\"nodeProperty().hasWarning\">\n        <he-node-icon [type]=\"schemaType()\" />\n      </span>\n    }\n  </div>\n\n  @if (isOpen() && nodeProperty()) {\n    <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: nodeProperty() }\" />\n  }\n\n  <div class=\"card-content\">\n    @if (isOpen()) {\n      @if (nodeProperty()?.error) {\n        <div class=\"py-4 pl-4\">\n          <ng-container *ngTemplateOutlet=\"propertyError; context: { property: nodeProperty() }\" />\n        </div>\n      }\n    }\n\n    <div class=\"columns is-multiline\">\n      @for (property of properties(); track trackByProperty($index, property)) {\n        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: property }\" />\n      }\n    </div>\n  </div>\n\n  <ng-content />\n</div>\n\n@if (!!bibliographiesSearchProperty()) {\n  <he-bibliographies-search-confirm\n    [search]=\"bibliographiesSearchProperty().value\"\n    [searchBy]=\"bibliographiesSearchKey(bibliographiesSearchProperty())\"\n    [searchSources]=\"bibliographiesSearchSources\"\n    (closed)=\"onBibliographiesSearchClosed($event)\" />\n}\n\n<ng-template #labelDescription let-property>\n  <span class=\"property-key\" [ngbTooltip]=\"property.key\" placement=\"right\">\n    <span class=\"is-inline-block is-align-middle is-nowrap has-text-ellipsis\">{{ property.key }}</span>\n    @if (property.schema?.description) {\n      <he-schema-info\n        class=\"is-inline-block is-pl-1 is-align-middle\"\n        triggers=\"click\"\n        [content]=\"property.schema.description\" />\n    }\n  </span>\n</ng-template>\n\n<ng-template #labelDefault let-property>\n  <span>{{ property.key }}</span>\n</ng-template>\n\n<ng-template #showProperty let-property>\n  @if ((isOpen() || property.closedVisible) && !property.isHidden) {\n    <div\n      class=\"column is-6\"\n      [id]=\"property.fullKey + '_' + property.id\"\n      [class.is-12]=\"property.properties.length || !property.key\">\n      @if (!property.properties.length) {\n        <div class=\"columns is-multiline is-variable is-1\">\n          @if (property.key) {\n            <div class=\"column is-3 py-1\">\n              <label class=\"label has-text-right-tablet has-text-ellipsis\" [for]=\"property.id\" [title]=\"property.key\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    property.schema?.description && property.editable ? labelDescription : labelDefault;\n                    context: { $implicit: property }\n                  \" />\n              </label>\n            </div>\n          }\n          <div class=\"column is-9 py-1\" [class.is-12]=\"!property.key\">\n            <div class=\"field\">\n              <ng-container *ngTemplateOutlet=\"inputForm; context: { $implicit: property }\" />\n              <ng-container *ngTemplateOutlet=\"propertyError; context: { property: property }\" />\n            </div>\n          </div>\n        </div>\n      }\n      @if (!!property.properties.length) {\n        <div\n          class=\"panel\"\n          [class.is-danger]=\"!property.changed && property.hasError\"\n          [class.is-warning]=\"!property.changed && property.hasWarning\"\n          [class.is-default]=\"!property.changed && !property.hasError && !property.hasWarning\">\n          <div\n            class=\"open-group panel-heading py-0\"\n            (click)=\"property.isOpen = !property.isOpen\"\n            pointer\n            [class.is-open]=\"property.isOpen\"\n            [class.has-text-white]=\"property.hasError || property.hasWarning\">\n            <div class=\"columns is-mobile is-vcentered is-multiline\">\n              <span class=\"column is-narrow py-1 my-0\">\n                <he-svg-icon [name]=\"property.isOpen ? 'chevron-down' : 'chevron-right'\" />\n              </span>\n              <span class=\"column py-1 my-0\">\n                <span class=\"is-size-6\">{{ property.key }}</span>\n              </span>\n              @if (property.schemaType) {\n                <span class=\"column is-narrow py-1 my-0\">\n                  <span class=\"tags mb-0 has-addons\">\n                    <span class=\"tag mb-0 is-light\">Type</span>\n                    <span class=\"tag mb-0 is-white\">\n                      <he-schema-version-link linkClass=\"is-small\" [node]=\"{ '@type': property.schemaType }\">\n                        <span>{{ property.schemaType }}</span>\n                      </he-schema-version-link>\n                    </span>\n                  </span>\n                </span>\n              }\n              <he-popover-confirm\n                class=\"column is-narrow py-1 my-0 px-0\"\n                ngbTooltip=\"Remove group\"\n                placement=\"top\"\n                [message]=\"\n                  '<p>This will remove the group completely.</p>' +\n                  (property.isRequired ? '<p><u>Warning: this field is required.</u></p>' : '') +\n                  '<p>Do you confirm?</p>'\n                \"\n                popoverClass=\"px-3\"\n                (confirmed)=\"propertyChanged(null, property)\">\n                <he-svg-icon name=\"xmark\" />\n              </he-popover-confirm>\n            </div>\n          </div>\n          @if (property.isOpen) {\n            <div class=\"panel-block is-block p-0\">\n              @if (property.error) {\n                <div class=\"px-3 pt-4\">\n                  <ng-container *ngTemplateOutlet=\"propertyError; context: { property }\" />\n                </div>\n              }\n              @if (!property.isArray) {\n                <div class=\"mt-3\">\n                  @if (!property.editable) {\n                    <p class=\"help py-1 px-2\">\n                      To change the {{ property.key }}, please delete it first, then add the field again\n                    </p>\n                  }\n                  @if (property.editable) {\n                    @switch (property.schema?.title) {\n                      @case ('Bibliography') {\n                        <p class=\"help py-1 px-2\">\n                          Search by Title or Document DOI to auto-populate the fields using the Mendeley catalogue\n                        </p>\n                      }\n                    }\n                  }\n                  <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: property }\" />\n                  <div class=\"property-group py-2 px-3 mt-2\">\n                    <div class=\"columns is-multiline mb-0\">\n                      @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                        <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop2 }\" />\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (property.isArray) {\n                <div class=\"py-2 px-3 mt-2\">\n                  @for (prop2 of property.properties; track trackByProperty($index, prop2)) {\n                    @if (prop2.key) {\n                      <div class=\"card p-0 my-4\" [id]=\"prop2.fullKey + '_' + prop2.id\">\n                        <div class=\"property-array-number\">\n                          <div class=\"tags has-addons\">\n                            <span class=\"tag is-dark\">{{ prop2.key }}</span>\n                            @if (property.editable) {\n                              <span\n                                class=\"tag is-info\"\n                                pointer\n                                (click)=\"duplicateArrayGroup(property, prop2)\"\n                                [ngbTooltip]=\"'Duplicate ' + property.key | pluralize: 1\"\n                                placement=\"top\">\n                                <he-svg-icon name=\"copy\" />\n                              </span>\n                              @if (prop2.key !== '0') {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupUp(property, prop2)\"\n                                  ngbTooltip=\"Move Up\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-up\" />\n                                </span>\n                              }\n                              @if (prop2.key !== property.properties.length - 1) {\n                                <span\n                                  class=\"tag is-light\"\n                                  pointer\n                                  (click)=\"moveArrayGroupDown(property, prop2)\"\n                                  ngbTooltip=\"Move Down\"\n                                  placement=\"top\">\n                                  <he-svg-icon name=\"chevron-down\" />\n                                </span>\n                              }\n                              <he-popover-confirm\n                                class=\"tag is-delete\"\n                                [ngbTooltip]=\"'Remove ' + property.key | pluralize: 1\"\n                                placement=\"top\"\n                                message=\"This will remove the group completely. Do you confirm?\"\n                                position=\"right\"\n                                (confirmed)=\"removeArrayGroup(property, prop2)\" />\n                            }\n                          </div>\n                        </div>\n                        <ng-container *ngTemplateOutlet=\"showNewProperty; context: { $implicit: prop2 }\" />\n                        @if (prop2.error) {\n                          <div class=\"px-4 mt-2\">\n                            <ng-container *ngTemplateOutlet=\"propertyError; context: { property: prop2 }\" />\n                          </div>\n                        }\n                        <div class=\"property-group card-content p-3\">\n                          <div class=\"columns is-multiline my-0\">\n                            @for (prop3 of prop2.properties; track trackByProperty($index, prop3)) {\n                              <ng-container *ngTemplateOutlet=\"showProperty; context: { $implicit: prop3 }\" />\n                            }\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (property.editable) {\n                    <button class=\"button is-info is-small\" type=\"button\" (click)=\"addArrayGroup(property)\">\n                      <he-svg-icon name=\"plus\" />\n                      <span class=\"pl-2\">Add</span>\n                      <span class=\"pl-1\">{{ property.key | pluralize: 1 }}</span>\n                    </button>\n                    <he-node-recommendations\n                      buttonClass=\"is-small\"\n                      [node]=\"node\"\n                      [nodeField]=\"property.key\"\n                      (selectRecommendation)=\"onSelectRecommendation(property, $event)\" />\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputForm let-property>\n  @if (property.key) {\n    @switch (property.suggestions?.type) {\n      @case ('select') {\n        <ng-container *ngTemplateOutlet=\"inputSelect; context: { $implicit: property }\" />\n      }\n      @default {\n        <ng-container *ngTemplateOutlet=\"inputInput; context: { $implicit: property }\" />\n      }\n    }\n  }\n</ng-template>\n\n<ng-template #inputInput let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\" [class.has-icons-right]=\"property.loading\">\n      <input\n        class=\"input is-small search-input\"\n        [class.is-dark]=\"property.key === 'type'\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        [(ngModel)]=\"property.value\"\n        #propertyModel=\"ngModel\"\n        [type]=\"property.schema?.type === 'number' ? 'number' : 'string'\"\n        [id]=\"property.id\"\n        name=\"randomname\"\n        [readonly]=\"!property.editable || property.schema?.internal\"\n        [placeholder]=\"property.placeholder\"\n        [appTagsInput]=\"{\n          enabled: property.editable && property.schema?.type === 'array',\n          items: property.schema?.items,\n          delimiter: ';',\n          allowDuplicates: true,\n          placeholder: property.placeholder\n        }\"\n        (change)=\"propertyChanged($event.target.value, property)\"\n        [pattern]=\"property.schema?.pattern\"\n        [required]=\"property.fullKey.endsWith('id') && property.fullKey !== 'id'\"\n        [min]=\"property.schema?.minimum\"\n        [max]=\"property.schema?.maximum\"\n        [ngbTypeahead]=\"property | applyPure: propertySuggest\"\n        [resultTemplate]=\"suggestion\"\n        [inputFormatter]=\"property.formatter\"\n        [focusFirst]=\"true\"\n        (focus)=\"property.editable && typeaheadFocus($event)\"\n        (selectItem)=\"suggestionSelected($event.item, property)\" />\n\n      <span class=\"icon is-small is-right has-text-grey-dark\" [class.is-hidden]=\"!property.loading\">\n        <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n      </span>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #inputSelect let-property>\n  <div class=\"field mb-0\" [class.has-addons]=\"hasAddons(property)\">\n    <div class=\"control is-expanded\">\n      <div\n        class=\"select is-small is-fullwidth\"\n        [class.is-danger]=\"(!property.changed && property.hasError) || isRequired(property)\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\">\n        <select\n          [(ngModel)]=\"property.value\"\n          #propertyModel=\"ngModel\"\n          [id]=\"property.id\"\n          name=\"randomname\"\n          [disabled]=\"!property.editable || property.schema?.internal\"\n          (change)=\"propertyChanged($event.target.value, property)\">\n          <option value=\"\">Select</option>\n          @for (value of property.suggestions.values; track trackByIndex($index, value)) {\n            <option [value]=\"value\">\n              {{ value }}\n            </option>\n          }\n        </select>\n      </div>\n    </div>\n    <ng-container *ngTemplateOutlet=\"inputAddons; context: { $implicit: property }\" />\n  </div>\n  @if (!property.hasError && propertyModel.invalid) {\n    <p class=\"help is-danger-light\">\n      <span [innerHTML]=\"formatPropertyError(propertyModel.errors, property)\"></span>\n    </p>\n  }\n</ng-template>\n\n<ng-template #removeFieldAddon let-property>\n  @if (!property.isRequired) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small\"\n        title=\"Remove field\"\n        [class.is-outlined]=\"!property.changed && (property.hasError || property.hasWarning)\"\n        [class.is-danger]=\"!property.changed && property.hasError\"\n        [class.is-warning]=\"!property.changed && property.hasWarning\"\n        (click)=\"$event.stopPropagation(); propertyChanged(null, property)\">\n        <he-svg-icon name=\"xmark\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #inputAddons let-property>\n  @if (property.editable) {\n    @switch (property.schemaType) {\n      @case (SchemaType.Cycle) {\n        <ng-container *ngTemplateOutlet=\"cycleAddons; context: { $implicit: property }\" />\n      }\n    }\n    @if (bibliographiesSearchKey(property)) {\n      <div class=\"control\">\n        <button class=\"button is-small\" title=\"Advanced Search\" (click)=\"bibliographiesSearchProperty.set(property)\">\n          <he-svg-icon name=\"search\" />\n        </button>\n      </div>\n    }\n    <ng-container *ngTemplateOutlet=\"removeFieldAddon; context: { $implicit: property }\" />\n  }\n\n  @if (property.addPropertyEnabled) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small is-danger\"\n        title=\"Add field\"\n        (click)=\"$event.stopPropagation(); addMissingProperty(property)\">\n        <he-svg-icon name=\"plus\" />\n        <span class=\"pl-2\">Add</span>\n      </a>\n    </div>\n  }\n  @if (isRequired(property)) {\n    <div class=\"control\">\n      <label class=\"button is-small is-danger\" [for]=\"property.id\" ngbTooltip=\"This field is required\" placement=\"top\">\n        <he-svg-icon name=\"exclamation-triangle\" />\n      </label>\n    </div>\n  }\n  @if (property.externalUrl?.url) {\n    <div class=\"control\">\n      <a\n        class=\"button is-small\"\n        [href]=\"property.externalUrl.url + (property.externalUrl.urlParamValue ? property.value : '')\"\n        target=\"_blank\"\n        [title]=\"property.externalUrl.title\"\n        [ngClass]=\"{ 'is-info': property.key === 'type' }\"\n        [attr.disabled]=\"property.externalUrl.urlParamValue && !property.value ? true : null\">\n        <he-svg-icon [name]=\"property.externalUrl.icon || 'external-link'\" class=\"ml-2\" />\n      </a>\n    </div>\n  }\n</ng-template>\n\n<ng-template #cycleAddons let-property>\n  @if (property.key === 'cycleDuration') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from startDate and endDate\"\n        (click)=\"calculateCycleDuration(property)\"\n        [disabled]=\"!calculateCycleDurationEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n  @if (property.key === 'startDate') {\n    <div class=\"control\">\n      <button\n        class=\"button is-small\"\n        title=\"Calculate value from endDate and cycleDuration\"\n        (click)=\"calculateCycleStartDate(property)\"\n        [disabled]=\"!calculateCycleStartDateEnabled(property)\">\n        <he-svg-icon name=\"calculator\" />\n      </button>\n    </div>\n  }\n</ng-template>\n\n<ng-template #showNewProperty let-property>\n  @if (property.editable && property.addPropertyEnabled) {\n    <header class=\"card-header\">\n      <form class=\"py-3 px-4 is-flex-grow-1\" (submit)=\"addProperty(property)\" novalidate>\n        <div class=\"field is-horizontal\">\n          <div class=\"field-label is-small\">\n            <label class=\"label\" [for]=\"property.id + '_new'\">\n              <span>Add new field</span>\n            </label>\n          </div>\n          <div class=\"field-body\">\n            <div class=\"field has-addons\">\n              <div class=\"control is-expanded\">\n                <input\n                  class=\"input is-small\"\n                  [(ngModel)]=\"property.newProperty\"\n                  [id]=\"property.id + '_new'\"\n                  name=\"randomname\"\n                  placeholder=\"Search and select field from results\"\n                  [ngbTypeahead]=\"property | applyPure: suggestNewProperty\"\n                  [resultTemplate]=\"suggestion\"\n                  [inputFormatter]=\"formatNewProperty\"\n                  [focusFirst]=\"false\"\n                  [editable]=\"false\"\n                  (focus)=\"typeaheadFocus($event)\" />\n              </div>\n              <div class=\"control\">\n                <button\n                  class=\"button is-small\"\n                  type=\"submit\"\n                  [disabled]=\"!property.newProperty || !property.newProperty.name\">\n                  <he-svg-icon name=\"plus\" />\n                  <span class=\"pl-2\">Add</span>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </form>\n    </header>\n  } @else {\n    <div class=\"pt-1\"></div>\n  }\n</ng-template>\n\n<ng-template #propertyError let-property=\"property\">\n  @if (property.error) {\n    <p class=\"help\" [class.is-danger]=\"property.hasError\" [class.is-warning]=\"property.hasWarning\">\n      <span class=\"is-pre-wrap\" [innerHTML]=\"property.error.message\"></span>\n      @if (errorGuidePrefix() && property.errorGuidePageId) {\n        <he-guide-overlay [pageId]=\"errorGuidePrefix() + property.errorGuidePageId\" />\n      }\n    </p>\n  }\n</ng-template>\n\n<ng-template #suggestion let-r=\"result\" let-t=\"term\">\n  <ngb-highlight\n    [title]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [result]=\"r.bibliography?.title || r.bibliography?.documentDOI || r.bibliography?.scopus || r.name\"\n    [term]=\"t\" />\n</ng-template>\n", styles: [".panel.is-default .panel-heading{background-color:#f5f5f5;color:#363636}.card-toggle{left:0;position:absolute;top:0}@media screen and (max-width: 767px){.card-toggle{position:relative}}.card{overflow:visible}.card .card{box-shadow:2px 2px #36363652,0 0 0 1px #36363652}.card .card>.card-header{box-shadow:0 2px 1px #36363652}.property-key span:first-child{width:calc(100% - 20px)}.property-array-number{left:-4px;position:absolute;top:-12px}.property-array-number .tag.is-delete{border:1px solid rgba(53.55,53.55,53.55,.32)}.control>.button{height:100%}.is-danger-light{color:#ff0514}he-sites-maps{height:200px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: NgbHighlight, selector: "ngb-highlight", inputs: ["highlightClass", "result", "term", "accentSensitive"] }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "component", type: BibliographiesSearchConfirmComponent, selector: "he-bibliographies-search-confirm", inputs: ["search", "searchSources", "searchBibliographies", "searchBy"], outputs: ["searchChange", "searchSourcesChange", "searchBibliographiesChange", "searchByChange", "closed"] }, { kind: "component", type: SchemaInfoComponent, selector: "he-schema-info", inputs: ["type", "field", "content", "placement", "triggers", "container", "iconName", "iconSize"] }, { kind: "component", type: SchemaVersionLinkComponent, selector: "he-schema-version-link", inputs: ["node", "showExternalLink", "linkClass"] }, { kind: "component", type: PopoverConfirmComponent, selector: "he-popover-confirm", inputs: ["message", "content", "position", "popoverClass"], outputs: ["confirmed"] }, { kind: "component", type: NodeRecommendationsComponent, selector: "he-node-recommendations", inputs: ["node", "nodeField", "buttonClass"], outputs: ["selectRecommendation"] }, { kind: "directive", type: TagsInputDirective, selector: "[appTagsInput]", inputs: ["appTagsInput"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: GuideOverlayComponent, selector: "he-guide-overlay", inputs: ["pageId", "width", "height", "positions"], outputs: ["widthChange", "heightChange"] }, { kind: "pipe", type: ApplyPurePipe, name: "applyPure" }, { kind: "pipe", type: PluralizePipe, name: "pluralize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: FilesFormEditableComponent, decorators: [{
             type: Component$1,