@hestia-earth/ui-components 0.41.37 → 0.41.38

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

@@ -2314,7 +2314,7 @@ class DrawerContainerComponent {
         return parseInt(padding, 10) + parseInt(margin, 10);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 }, secondaryLinks: { classPropertyName: "secondaryLinks", publicName: "secondaryLinks", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", 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 }, drawerMenuFooterTemplate: { classPropertyName: "drawerMenuFooterTemplate", publicName: "drawerMenuFooterTemplate", 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 }, compactMenuHeaderClass: { classPropertyName: "compactMenuHeaderClass", publicName: "compactMenuHeaderClass", 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-center is-justify-content-space-between is-gap-8 w-100\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <div\n              ngbDropdown\n              #optionDd=\"ngbDropdown\"\n              container=\"body\"\n              placement=\"bottom-end\"\n              [dropdownClass]=\"compactMenuHeaderClass()\">\n              <button\n                ngbDropdownToggle\n                class=\"button is-small is-no-shadow is-block has-text-weight-bold has-text-secondary is-size-6 is-py-1 is-px-2 is-radius-3 is-gap-4 | compact-header--btn\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                <span>{{ compactMenuLabel() }}</span>\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()\" [secondaryLinks]=\"secondaryLinks()\">\n                    @if (drawerMenuHeaderTemplate()) {\n                      <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n                    }\n                    @if (drawerMenuFooterTemplate()) {\n                      <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n                    }\n                  </he-navigation-menu>\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=\"is-absolute h-100 shadow-2 has-background-white | shell__menuContent\"\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()\" [secondaryLinks]=\"secondaryLinks()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n              @if (drawerMenuFooterTemplate()) {\n                <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\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=left]>aside{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent>.shell__menuContent--toggle{right:var(--drawer-toggle-position);border-radius:0 9px 9px 0}: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{right:0;order:1}:host-context[drawer-position=right]>aside>.shell__menuContent{right:0}:host-context[drawer-position=right]>aside>.shell__menuContent>.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{top:0;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);background:#dbe3ea;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width:1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}: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{padding:.5rem 1rem;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{background:#dbe3ea}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", "secondaryLinks", "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: "21.0.6", 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 }, secondaryLinks: { classPropertyName: "secondaryLinks", publicName: "secondaryLinks", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", 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 }, drawerMenuFooterTemplate: { classPropertyName: "drawerMenuFooterTemplate", publicName: "drawerMenuFooterTemplate", 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 }, compactMenuHeaderClass: { classPropertyName: "compactMenuHeaderClass", publicName: "compactMenuHeaderClass", 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-center is-justify-content-space-between is-gap-8 w-100\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <div\n              ngbDropdown\n              #optionDd=\"ngbDropdown\"\n              container=\"body\"\n              placement=\"bottom-end\"\n              [dropdownClass]=\"compactMenuHeaderClass()\">\n              <button\n                ngbDropdownToggle\n                class=\"button is-small is-no-shadow is-block has-text-weight-bold has-text-secondary is-size-6 is-py-1 is-px-2 is-radius-3 is-gap-4 | compact-header--btn\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                <span>{{ compactMenuLabel() }}</span>\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()\" [secondaryLinks]=\"secondaryLinks()\">\n                    @if (drawerMenuHeaderTemplate()) {\n                      <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n                    }\n                    @if (drawerMenuFooterTemplate()) {\n                      <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n                    }\n                  </he-navigation-menu>\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=\"is-absolute h-100 shadow-2 has-background-white | shell__menuContent\"\n        [class.is-pr-3]=\"position() === 'right'\"\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()\" [secondaryLinks]=\"secondaryLinks()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n              @if (drawerMenuFooterTemplate()) {\n                <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\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=left]>aside{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent>.shell__menuContent--toggle{right:var(--drawer-toggle-position);border-radius:0 9px 9px 0}: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{right:0;order:1}:host-context[drawer-position=right]>aside>.shell__menuContent{right:0}:host-context[drawer-position=right]>aside>.shell__menuContent>.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{top:0;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);background:#dbe3ea;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width:1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}: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{padding:.5rem 1rem;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{background:#dbe3ea}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", "secondaryLinks", "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: "21.0.6", ngImport: i0, type: DrawerContainerComponent, decorators: [{
             type: Component$1,
@@ -2331,7 +2331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[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-center is-justify-content-space-between is-gap-8 w-100\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <div\n              ngbDropdown\n              #optionDd=\"ngbDropdown\"\n              container=\"body\"\n              placement=\"bottom-end\"\n              [dropdownClass]=\"compactMenuHeaderClass()\">\n              <button\n                ngbDropdownToggle\n                class=\"button is-small is-no-shadow is-block has-text-weight-bold has-text-secondary is-size-6 is-py-1 is-px-2 is-radius-3 is-gap-4 | compact-header--btn\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                <span>{{ compactMenuLabel() }}</span>\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()\" [secondaryLinks]=\"secondaryLinks()\">\n                    @if (drawerMenuHeaderTemplate()) {\n                      <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n                    }\n                    @if (drawerMenuFooterTemplate()) {\n                      <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n                    }\n                  </he-navigation-menu>\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=\"is-absolute h-100 shadow-2 has-background-white | shell__menuContent\"\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()\" [secondaryLinks]=\"secondaryLinks()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n              @if (drawerMenuFooterTemplate()) {\n                <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\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=left]>aside{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent>.shell__menuContent--toggle{right:var(--drawer-toggle-position);border-radius:0 9px 9px 0}: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{right:0;order:1}:host-context[drawer-position=right]>aside>.shell__menuContent{right:0}:host-context[drawer-position=right]>aside>.shell__menuContent>.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{top:0;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);background:#dbe3ea;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width:1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}: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{padding:.5rem 1rem;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{background:#dbe3ea}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"] }]
+                    }, 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-center is-justify-content-space-between is-gap-8 w-100\">\n          @if (drawerHeaderTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n          }\n          @if (links()?.length > 0) {\n            <div\n              ngbDropdown\n              #optionDd=\"ngbDropdown\"\n              container=\"body\"\n              placement=\"bottom-end\"\n              [dropdownClass]=\"compactMenuHeaderClass()\">\n              <button\n                ngbDropdownToggle\n                class=\"button is-small is-no-shadow is-block has-text-weight-bold has-text-secondary is-size-6 is-py-1 is-px-2 is-radius-3 is-gap-4 | compact-header--btn\"\n                aria-controls=\"drawer-menu\"\n                type=\"button\">\n                <span>{{ compactMenuLabel() }}</span>\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()\" [secondaryLinks]=\"secondaryLinks()\">\n                    @if (drawerMenuHeaderTemplate()) {\n                      <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n                    }\n                    @if (drawerMenuFooterTemplate()) {\n                      <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\n                    }\n                  </he-navigation-menu>\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=\"is-absolute h-100 shadow-2 has-background-white | shell__menuContent\"\n        [class.is-pr-3]=\"position() === 'right'\"\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()\" [secondaryLinks]=\"secondaryLinks()\">\n              @if (drawerMenuHeaderTemplate()) {\n                <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n              }\n              @if (drawerMenuFooterTemplate()) {\n                <ng-container footer [ngTemplateOutlet]=\"drawerMenuFooterTemplate()\" />\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=left]>aside{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent{left:0}:host-context[drawer-position=left]>aside>.shell__menuContent>.shell__menuContent--toggle{right:var(--drawer-toggle-position);border-radius:0 9px 9px 0}: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{right:0;order:1}:host-context[drawer-position=right]>aside>.shell__menuContent{right:0}:host-context[drawer-position=right]>aside>.shell__menuContent>.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{top:0;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);background:#dbe3ea;border:none;width:20px;height:48px}:host aside ::ng-deep he-collapsible-box{box-shadow:none;padding:4px!important}@media screen and (max-width:1023px){:host aside ::ng-deep he-collapsible-box{background-color:transparent}}:host aside ::ng-deep he-collapsible-box>div{gap:16px!important}:host aside ::ng-deep he-collapsible-box .dropdown-content{box-shadow:none}:host aside ::ng-deep he-collapsible-box .dropdown-item+.dropdown-item{border-top:1px solid #b5b5b5}:host aside ::ng-deep he-collapsible-box .navbar-divider{background-color:#b5b5b5;margin:0}: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{padding:.5rem 1rem;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{background:#dbe3ea}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 }] }], secondaryLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryLinks", required: false }] }], drawerHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerHeaderTemplate", required: false }] }], drawerContentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerContentTemplate", required: false }] }], drawerFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerFooterTemplate", required: false }] }], drawerMenuHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuHeaderTemplate", required: false }] }], drawerMenuFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "drawerMenuFooterTemplate", required: false }] }], compactMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuLabel", required: false }] }], compactHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactHeaderClass", required: false }] }], compactMenuHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "compactMenuHeaderClass", 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']
@@ -11475,7 +11475,12 @@ const customErrorMessage = {
         .filter(Boolean)
         .join('\n'),
     'should set the depth': ({ params }) => `The value of Emission ${code(params.term['@id'])} can change significantly based on the soil depth taken into account.
-    Please consider adding ${schemaLink('Emission#depthUpper', 'depthUpper')} and ${schemaLink('Emission#depthLower', 'depthLower')} fields to the Emission.`
+    Please consider adding ${schemaLink('Emission#depthUpper', 'depthUpper')} and ${schemaLink('Emission#depthLower', 'depthLower')} fields to the Emission.`,
+    'must include practices for plantation weighting': () => `For permanent crop aggregations, we must be able to weight based on the plantation phase.
+    This means practices ${externalNodeLink({
+        '@type': NodeType.Term,
+        '@id': 'plantationLifespan'
+    })} and ${externalNodeLink({ '@type': NodeType.Term, '@id': 'plantationProductiveLifespan' })} must have values.`
 };
 const requiredPropertyError = (message, error) => {
     const field = message.split("'")[1].replace("'", '');
@@ -13095,9 +13100,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }] });
 
+/* eslint-disable complexity */
 var ChartNodeType;
 (function (ChartNodeType) {
     ChartNodeType["midpoint"] = "midpoint";
+    ChartNodeType["category"] = "category";
     ChartNodeType["emission"] = "emission";
     ChartNodeType["endpoint"] = "endpoint";
     ChartNodeType["input"] = "input";
@@ -13107,6 +13114,7 @@ var ChartNodeType;
 const nodeBorderColours = {
     [ChartNodeType.endpoint]: '#193957',
     [ChartNodeType.midpoint]: '#249DA5',
+    [ChartNodeType.category]: '#DC7033',
     [ChartNodeType.emission]: '#498F78',
     [ChartNodeType.input]: '#FFC000',
     [ChartNodeType.operation]: '#D0CABA'
@@ -13114,6 +13122,7 @@ const nodeBorderColours = {
 const nodeColours = {
     [ChartNodeType.endpoint]: '#DBE3EA',
     [ChartNodeType.midpoint]: '#D3EBED',
+    [ChartNodeType.category]: '#FFDEC0',
     [ChartNodeType.emission]: '#D5F3D8',
     [ChartNodeType.input]: '#FFE8A3',
     [ChartNodeType.operation]: '#FBF4DF'
@@ -13121,6 +13130,7 @@ const nodeColours = {
 const legend = [
     { type: ChartNodeType.endpoint, text: 'Endpoint / Single Score' },
     { type: ChartNodeType.midpoint, text: 'Characterised Indicator' },
+    { type: ChartNodeType.category, text: 'Category' },
     { type: ChartNodeType.emission, text: 'Emission / Resource Use' },
     { type: ChartNodeType.input, text: 'Input' },
     { type: ChartNodeType.operation, text: 'Operation' }
@@ -13149,6 +13159,11 @@ const sumIndicators = (data) => {
     const totalValues = data.reduce((acc, log) => {
         acc[log.indicator] = acc[log.indicator] || [];
         !isUndefined(log.weightedValue) && acc[log.indicator].push(log.weightedValue);
+        if (log.category) {
+            const categoryKey = `${log.indicator}-${log.category}`;
+            acc[categoryKey] = acc[categoryKey] || [];
+            !isUndefined(log.weightedValue) && acc[categoryKey].push(log.weightedValue);
+        }
         return acc;
     }, {});
     return Object.fromEntries(Object.entries(totalValues).map(([key, values]) => [
@@ -13160,6 +13175,8 @@ const sumIndicators = (data) => {
 const groupIndicators = (data, terms = {}, totals = {}) => data.reduce((acc, log) => {
     const contributorType = typeMapping[terms[log.contributor]?.termType] || ChartNodeType.input;
     const indicatorType = typeMapping[terms[log.indicator]?.termType];
+    const categoryKey = log.category ? `${log.indicator}-${log.category}` : undefined;
+    const parentTotal = categoryKey ? totals[categoryKey] : totals[log.indicator];
     const contributorNode = {
         id: log.contributor,
         ...getUnitsAndLabel(terms[log.contributor], log.contributor),
@@ -13167,7 +13184,7 @@ const groupIndicators = (data, terms = {}, totals = {}) => data.reduce((acc, log
         value: log.value,
         weightedValue: log.weightedValue,
         modelId: log.modelId,
-        fraction: safeDivide(log.weightedValue, totals[log.indicator]),
+        fraction: safeDivide(log.weightedValue, parentTotal),
         children: contributorType === ChartNodeType.emission
             ? log.inputs.map(i => ({
                 ...i,
@@ -13183,16 +13200,36 @@ const groupIndicators = (data, terms = {}, totals = {}) => data.reduce((acc, log
             }))
             : []
     };
-    acc[log.indicator]
-        ? acc[log.indicator].children.push(contributorNode)
-        : (acc[log.indicator] = {
-            id: log.indicator,
-            ...getUnitsAndLabel(terms[log.indicator], log.indicator),
-            modelId: log.modelId,
-            type: indicatorType,
-            value: totals[log.indicator],
-            children: [contributorNode]
-        });
+    acc[log.indicator] = acc[log.indicator] || {
+        id: log.indicator,
+        ...getUnitsAndLabel(terms[log.indicator], log.indicator),
+        modelId: log.modelId,
+        type: indicatorType,
+        value: totals[log.indicator],
+        children: []
+    };
+    if (log.category) {
+        const categoryId = `cat-${log.indicator}-${log.category}`;
+        let categoryNode = acc[log.indicator].children.find(c => c.id === categoryId);
+        if (!categoryNode) {
+            categoryNode = {
+                id: categoryId,
+                label: log.category,
+                type: ChartNodeType.category,
+                units: '',
+                value: totals[categoryKey],
+                weightedValue: totals[categoryKey],
+                modelId: log.modelId,
+                fraction: safeDivide(totals[categoryKey], totals[log.indicator]),
+                children: []
+            };
+            acc[log.indicator].children.push(categoryNode);
+        }
+        categoryNode.children.push(contributorNode);
+    }
+    else {
+        acc[log.indicator].children.push(contributorNode);
+    }
     return acc;
 }, {});
 
@@ -13589,7 +13626,14 @@ class HierarchyChartComponent {
         this.nodeColours = nodeColours;
         this.expandDownload = signal(false, ...(ngDevMode ? [{ debugName: "expandDownload" }] : []));
         this.includedTypes = signal([], ...(ngDevMode ? [{ debugName: "includedTypes" }] : []));
-        this.legend = computed(() => legend.filter(({ type }) => this.includedTypes().includes(type)), ...(ngDevMode ? [{ debugName: "legend" }] : []));
+        this.legend = computed(() => {
+            const includedTypes = this.includedTypes();
+            const defaultLegend = legend.filter(({ type }) => includedTypes.includes(type));
+            const categoryLabel = this.data().find(d => d.categoryLabel)?.categoryLabel;
+            return categoryLabel
+                ? defaultLegend.map(l => (l.type === ChartNodeType.category ? { ...l, text: categoryLabel } : l))
+                : defaultLegend;
+        }, ...(ngDevMode ? [{ debugName: "legend" }] : []));
         this.totalsPerIndicator = computed(() => sumIndicators(this.data()), ...(ngDevMode ? [{ debugName: "totalsPerIndicator" }] : []));
         this.indicators = computed(() => groupIndicators(this.data(), this.terms(), this.totalsPerIndicator()), ...(ngDevMode ? [{ debugName: "indicators" }] : []));
         this.indicatorArray = computed(() => Object.values(this.indicators()), ...(ngDevMode ? [{ debugName: "indicatorArray" }] : []));
@@ -13647,7 +13691,7 @@ class HierarchyChartComponent {
         };
         effect(() => {
             if ([!isEmpty(this.data()), !isEmpty(this.terms()), this.chartRef()?.nativeElement].every(Boolean)) {
-                this.init();
+                untracked(() => this.init());
             }
         });
     }
@@ -13698,8 +13742,11 @@ class HierarchyChartComponent {
         const innerHeight = (this.root.children.length - 1) * nodeHeight * nodeSpacingFactor + nodeHeight;
         this.yMin = (nodeHeight - innerHeight) / 2 - margin.top;
         this.yTotal = innerHeight + margin.top + margin.bottom;
+        const numLayers = this.legend().length;
+        const chartWidth = numLayers * nodeWidth + (numLayers - 1) * layerSpacing;
+        const totalWidth = Math.max(width, chartWidth + margin.left + margin.right);
         this.svg
-            .attr('viewBox', [-margin.left, this.yMin, width, this.yTotal].join(' '))
+            .attr('viewBox', [-margin.left, this.yMin, totalWidth, this.yTotal].join(' '))
             .attr('font-size', `${fontSize}px`);
         this.node = this.svg.append('g').selectAll('g');
         this.link = this.svg.append('g').selectAll('path');
@@ -13714,9 +13761,12 @@ class HierarchyChartComponent {
         const tree$1 = treeLayout(root);
         const links = tree$1.links().filter(d => d.source.data.type !== ChartNodeType.root) || [];
         const nodes = tree$1.descendants().reverse();
+        const numLayers = this.legend().length;
+        const chartWidth = numLayers * nodeWidth + (numLayers - 1) * layerSpacing;
+        const totalWidth = Math.max(width, chartWidth + margin.left + margin.right);
+        const offset = Math.max(0, (totalWidth - margin.left - margin.right - chartWidth) / 2);
         nodes.forEach(d => {
-            d.y =
-                (d.depth - 1 + (Object.keys(ChartNodeType).length - 1 - this.legend().length) / 2) * (nodeWidth + layerSpacing);
+            d.y = offset + (d.depth - 1) * (nodeWidth + layerSpacing);
         });
         // By default the tree expands symmetrically upwards and downwards from the selected node.
         // We move children down to prevent expansion upwards or up to minimise expansion downwards
@@ -13743,11 +13793,12 @@ class HierarchyChartComponent {
                 previousTanslateY: translateY + previousTanslateY
             };
         };
-        const { previousYTotal: newHeight } = [2, 3, 4, 5].reduce(minimiseHeight, {
+        const depths = Array.from({ length: numLayers }, (_, i) => i + 2);
+        const { previousYTotal: newHeight } = depths.reduce(minimiseHeight, {
             previousTanslateY: 0,
             previousYTotal: this.yTotal
         });
-        this.svg.transition().duration(300).attr('viewBox', [-margin.left, this.yMin, width, newHeight].join(' '));
+        this.svg.transition().duration(300).attr('viewBox', [-margin.left, this.yMin, totalWidth, newHeight].join(' '));
         this.node = this.node
             .data(nodes, d => `${d.parent?.parent?.parent?.data.id}-${d.parent?.parent?.data.id}-${d.parent?.data.id}-${d.data.id}`)
             .join(enter => enter
@@ -13840,6 +13891,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'he-hierarchy-chart', imports: [NgbPopover, HESvgIconComponent, ChartExportButtonComponent], template: "<div class=\"chart-area-border\">\n  <div\n    class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n    @for (legendItem of legend(); track legendItem.type) {\n      <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n        <span\n          class=\"is-inline-block-tablet is-align-middle | key-colour\"\n          [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n          [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n        <span class=\"is-size-7\">{{ legendItem.text }}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"chart-container is-relative w-100 is-mt-2\">\n    <svg class=\"w-100 h-100\" #chart></svg>\n\n    <span\n      class=\"is-hidden\"\n      [ngbPopover]=\"tipContent\"\n      triggers=\"manual\"\n      placement=\"right left auto\"\n      container=\"body\"\n      #t=\"ngbPopover\"\n      positionTarget=\".tip-target\"\n      popoverClass=\"is-narrow driver-chart-tooltip\"\n      [animation]=\"true\"></span>\n\n    <div class=\"is-absolute | chart-controls\">\n      <div class=\"is-flex is-flex-direction-column is-align-items-flex-end is-gap-4\">\n        <he-chart-export-button\n          buttonClass=\"button is-small\"\n          [chartExportFn]=\"chartExportFn\"\n          [exportFormats]=\"exportFormats\" />\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  @if (tipData.hasWeightedValue) {\n    <p>contribution: {{ tipData.weightedValueText }}</p>\n  }\n  @if (tipData.valueValueText) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n      <span class=\"is-pr-1\">:</span>\n      <span>{{ tipData.valueValueText }}</span>\n      @if (tipData.hasValue) {\n        <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n          <span>Docs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      }\n    </p>\n  }\n  @if (tipData.modelValue) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n      <span class=\"is-pr-1\">:</span>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n    </p>\n  }\n  @if (tipData.terms?.length) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n      <span class=\"is-pr-1\">:</span>\n      @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n        <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n        @if (!lastTerm) {\n          <span class=\"is-px-1\">;</span>\n        }\n      }\n    </p>\n  }\n</ng-template>\n", styles: [".chart-controls{top:0;right:0}.chart-controls .button,.chart-controls he-chart-export-button ::ng-deep>.button{width:36px;height:36px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{fill-opacity:.3;stroke-opacity:.3;pointer-events:auto}:host ::ng-deep .node-openable:not(.mask-openable){cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button,:host ::ng-deep .group-button-text{display:inline!important;cursor:pointer}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}\n"] }]
         }], ctorParameters: () => [], propDecorators: { chartRef: [{ type: i0.ViewChild, args: ['chart', { isSignal: true }] }], tooltipOperator: [{ type: i0.ViewChild, args: ['t', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], terms: [{ type: i0.Input, args: [{ isSignal: true, alias: "terms", required: false }] }], chartError: [{ type: i0.Output, args: ["chartError"] }] } });
 
+class CyclesEmissionsCategoryService {
+    constructor() {
+        this.data = loadResourceKey('emission-groupings.json');
+        this.categoryLabel = (key) => (key ? keyToLabel(key.replace(/category/gi, '')) : 'Unset');
+        this.categories = Object.keys(this.data)
+            .filter(key => key.toLowerCase().endsWith('category'))
+            .map(key => ({
+            key,
+            label: this.categoryLabel(key)
+        }));
+        this.emissionCategories = (id) => Object.keys(this.data[id]).filter(key => !!this.data[id][key]);
+        this.emissionCategoryValue = (id, category) => this.data[id]?.[category];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 const filterTermTypes$1 = [
     TermTermType.resourceUse,
     TermTermType.emission,
@@ -13938,6 +14012,7 @@ class ImpactAssessmentsGraphComponent {
     constructor() {
         this.searchService = inject(HeSearchService);
         this.nodeService = inject(HeNodeService);
+        this.emissionCategoryService = inject(CyclesEmissionsCategoryService);
         this.initialTerms = toSignal(this.searchService
             .search$(searchParams(filterTermTypes$1.map(termType => matchTermType(termType))))
             .pipe(mergeMap(({ results }) => from(results).pipe(map(term => {
@@ -14000,10 +14075,31 @@ class ImpactAssessmentsGraphComponent {
             ...(this.hasDefaultModelLogs() ? [{ '@id': defaultIndicatorsModelId, name: defaultIndicatorsModelName }] : []),
             ...unique(this.nodeLogs().map(({ modelId }) => this.allTerms()[modelId] || { '@id': modelId }))
         ], ...(ngDevMode ? [{ debugName: "models" }] : []));
-        this.chartData = computed(() => this.nodeLogs().filter(log => log.modelId ===
-            (this.selectedModelId() === defaultIndicatorsModelId
-                ? getDefaultModelId(log.indicator)
-                : this.selectedModelId())), ...(ngDevMode ? [{ debugName: "chartData" }] : []));
+        this.categories = this.emissionCategoryService.categories;
+        this.selectedCategory = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedCategory" }] : []));
+        this.chartData = computed(() => {
+            const category = this.selectedCategory();
+            const categoryLabel = category ? this.emissionCategoryService.categoryLabel(category) : undefined;
+            return this.nodeLogs()
+                .filter(log => log.modelId ===
+                (this.selectedModelId() === defaultIndicatorsModelId
+                    ? getDefaultModelId(log.indicator)
+                    : this.selectedModelId()))
+                .map(log => {
+                const includeCategory = category &&
+                    [TermTermType.emission, TermTermType.resourceUse].includes(this.allTerms()[log.contributor]?.termType);
+                const categoryValue = includeCategory
+                    ? this.emissionCategoryService.emissionCategoryValue(log.contributor, category)
+                    : null;
+                return includeCategory
+                    ? {
+                        ...log,
+                        category: categoryValue || `Not available for ${categoryLabel}`,
+                        categoryLabel
+                    }
+                    : log;
+            });
+        }, ...(ngDevMode ? [{ debugName: "chartData" }] : []));
         this.loading = computed(() => [this.nodeLogsResource.isLoading(), this.allTermsResource.isLoading()].some(Boolean), ...(ngDevMode ? [{ debugName: "loading" }] : []));
         this.showChart = computed(() => [!isEmpty(this.chartData()), !isEmpty(this.allTerms()), !this.loading(), !this.error(), !this.showWarnings()].every(Boolean), ...(ngDevMode ? [{ debugName: "showChart" }] : []));
         effect(() => {
@@ -14020,36 +14116,13 @@ class ImpactAssessmentsGraphComponent {
         effect(() => this.showWarnings.set(this.warnings()?.length > 0));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsGraphComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsGraphComponent, isStandalone: true, selector: "he-impact-assessments-graph", inputs: { impactAssessments: { classPropertyName: "impactAssessments", publicName: "impactAssessments", isSignal: true, isRequired: false, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedImpactAssessmentId\">Impact Assessment</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedImpactAssessmentId\" [disabled]=\"loading()\">\n                  @for (value of filteredImpactAssessments(); track value['@id']) {\n                    <option [value]=\"value['@id']\">\n                      {{ value.name || value['@id'] }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedModelId\">Model</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedModelId\" id=\"selectedModelId\" [disabled]=\"loading()\">\n                  @for (model of models(); track model['@id']) {\n                    <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HierarchyChartComponent, selector: "he-hierarchy-chart", inputs: ["data", "terms"], outputs: ["chartError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsGraphComponent, isStandalone: true, selector: "he-impact-assessments-graph", inputs: { impactAssessments: { classPropertyName: "impactAssessments", publicName: "impactAssessments", isSignal: true, isRequired: false, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedImpactAssessmentId\">Impact Assessment</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedImpactAssessmentId\" [disabled]=\"loading()\">\n                  @for (value of filteredImpactAssessments(); track value['@id']) {\n                    <option [value]=\"value['@id']\">\n                      {{ value.name || value['@id'] }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedModelId\">Model</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedModelId\" id=\"selectedModelId\" [disabled]=\"loading()\">\n                  @for (model of models(); track model['@id']) {\n                    <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedCategoryId\">Disaggregation</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedCategory\" id=\"selectedCategoryId\" [disabled]=\"loading()\">\n                  <option [ngValue]=\"undefined\">No Disaggregation</option>\n                  @for (category of categories; track category.key) {\n                    <option [value]=\"category.key\">{{ category.label }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HierarchyChartComponent, selector: "he-hierarchy-chart", inputs: ["data", "terms"], outputs: ["chartError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsGraphComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-graph', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, HierarchyChartComponent], template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedImpactAssessmentId\">Impact Assessment</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedImpactAssessmentId\" [disabled]=\"loading()\">\n                  @for (value of filteredImpactAssessments(); track value['@id']) {\n                    <option [value]=\"value['@id']\">\n                      {{ value.name || value['@id'] }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedModelId\">Model</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedModelId\" id=\"selectedModelId\" [disabled]=\"loading()\">\n                  @for (model of models(); track model['@id']) {\n                    <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"] }]
+            args: [{ selector: 'he-impact-assessments-graph', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, HierarchyChartComponent], template: "@if (isRecalculated()) {\n  @if (loading()) {\n    <div class=\"loading-container has-text-center my-5 py-5\">\n      <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n      <p class=\"is-mt-2 is-italic is-size-7\">Loading chart, please wait...</p>\n    </div>\n  } @else {\n    @if (filteredImpactAssessments().length > 1) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedImpactAssessmentId\">Impact Assessment</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedImpactAssessmentId\" [disabled]=\"loading()\">\n                  @for (value of filteredImpactAssessments(); track value['@id']) {\n                    <option [value]=\"value['@id']\">\n                      {{ value.name || value['@id'] }}\n                    </option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (!noData()) {\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedModelId\">Model</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedModelId\" id=\"selectedModelId\" [disabled]=\"loading()\">\n                  @for (model of models(); track model['@id']) {\n                    <option [value]=\"model['@id']\">{{ model.name || model['@id'] }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"field is-horizontal\">\n        <div class=\"field-label is-normal\">\n          <label class=\"label has-text-secondary\" for=\"selectedCategoryId\">Disaggregation</label>\n        </div>\n        <div class=\"field-body\">\n          <div class=\"field\">\n            <div class=\"control is-expanded\">\n              <div class=\"select is-small is-fullwidth is-secondary\">\n                <select [(ngModel)]=\"selectedCategory\" id=\"selectedCategoryId\" [disabled]=\"loading()\">\n                  <option [ngValue]=\"undefined\">No Disaggregation</option>\n                  @for (category of categories; track category.key) {\n                    <option [value]=\"category.key\">{{ category.label }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n    @if (showWarnings()) {\n      <div class=\"has-text-warning py-3 has-text-centered\">\n        @for (warning of warnings(); track warning) {\n          <p class=\"is-mb-2\">\n            <he-svg-icon name=\"exclamation-triangle\" class=\"pr-2\" />\n            @switch (warning) {\n              @case ('missing-terms') {\n                <span>Calculations are not up to date. Some terms may not display correctly.</span>\n              }\n            }\n          </p>\n        }\n        <p class=\"is-underlined is-size-7\"><a (click)=\"showWarnings.set(false)\">View chart anyway.</a></p>\n      </div>\n    }\n    @if (error()) {\n      <p class=\"has-text-danger py-3\">\n        @switch (error()) {\n          @case ('not-found') {\n            <p>Impact Assessment not found</p>\n          }\n          @default {\n            <div>\n              <span>An unexpected error occurred:</span>\n              <p class=\"mt-1\">{{ error() }}</p>\n            </div>\n          }\n        }\n      </p>\n    }\n    @if (noData()) {\n      <div class=\"py-3\">\n        <p class=\"has-text-centered\">No chart available.</p>\n      </div>\n    }\n  }\n} @else {\n  <p class=\"has-text-centered py-3\">\n    No chart available. Switch to\n    <code>recalculated</code>\n    version.\n  </p>\n}\n\n@if (showChart()) {\n  <he-hierarchy-chart [data]=\"chartData()\" [terms]=\"allTerms()\" (chartError)=\"error.set($event)\" />\n}\n", styles: [".loading-container{min-height:200px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { impactAssessments: [{ type: i0.Input, args: [{ isSignal: true, alias: "impactAssessments", required: false }] }], dataState: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataState", required: false }] }] } });
 
-class CyclesEmissionsCategoryService {
-    constructor() {
-        this.data = loadResourceKey('emission-groupings.json');
-        this.categoryLabel = (key) => (key ? keyToLabel(key.replace(/category/gi, '')) : 'Unset');
-        this.categories = Object.keys(this.data)
-            .filter(key => key.toLowerCase().endsWith('category'))
-            .map(key => ({
-            key,
-            label: this.categoryLabel(key)
-        }));
-        this.emissionCategories = (id) => Object.keys(this.data[id]).filter(key => !!this.data[id][key]);
-        this.emissionCategoryValue = (id, category) => this.data[id]?.[category];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 const filterTermTypes = [TermTermType.emission, TermTermType.characterisedIndicator];
 const logsTotalValue = (logs, includeNegativeValues) => sum((includeNegativeValues ? logs : logs.filter(curr => curr.value >= 0)).map(v => v.value));
 const valueRatio = (value, total) => (total === 0 ? 0 : toPrecision((value * 100) / total, 2));
@@ -14245,11 +14318,11 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
         return [blankNodeTermId, modelId, impactTermId].join('-');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats\" />\n\n  <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    <div class=\"control is-expanded is-flex-shrink-0\">\n      <div class=\"select is-fullwidth is-small\">\n        <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n          <option [ngValue]=\"undefined\">No Category selected</option>\n          @for (category of categories; track category.key) {\n            <option [value]=\"category.key\">{{ category.label }}</option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <div class=\"is-flex is-justify-content-space-between\">\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [max]=\"total()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"false\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@media screen and (max-width:767px){.chart-area-border{padding:0}}@media screen and (max-width:767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats\" />\n\n  <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    <div class=\"control is-expanded is-flex-shrink-0\">\n      <div class=\"select is-fullwidth is-small\">\n        <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n          <option [ngValue]=\"undefined\">No Disaggregation</option>\n          @for (category of categories; track category.key) {\n            <option [value]=\"category.key\">{{ category.label }}</option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <div class=\"is-flex is-justify-content-space-between\">\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [max]=\"total()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"false\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@media screen and (max-width:767px){.chart-area-border{padding:0}}@media screen and (max-width:767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, HorizontalBarChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats\" />\n\n  <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    <div class=\"control is-expanded is-flex-shrink-0\">\n      <div class=\"select is-fullwidth is-small\">\n        <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n          <option [ngValue]=\"undefined\">No Category selected</option>\n          @for (category of categories; track category.key) {\n            <option [value]=\"category.key\">{{ category.label }}</option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <div class=\"is-flex is-justify-content-space-between\">\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [max]=\"total()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"false\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@media screen and (max-width:767px){.chart-area-border{padding:0}}@media screen and (max-width:767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"] }]
+            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, HorizontalBarChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats\" />\n\n  <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    <div class=\"control is-expanded is-flex-shrink-0\">\n      <div class=\"select is-fullwidth is-small\">\n        <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n          <option [ngValue]=\"undefined\">No Disaggregation</option>\n          @for (category of categories; track category.key) {\n            <option [value]=\"category.key\">{{ category.label }}</option>\n          }\n        </select>\n      </div>\n    </div>\n\n    <div class=\"is-flex is-justify-content-space-between\">\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [max]=\"total()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"false\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@media screen and (max-width:767px){.chart-area-border{padding:0}}@media screen and (max-width:767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { impactAssessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "impactAssessment", required: true }] }], indicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicators", required: false }] }] } });
 
 const impactValue = (impact, values) => (values[impact['@id']]?.nodes[0] || { value: 0 }).value;
@@ -14385,11 +14458,11 @@ class ImpactAssessmentsIndicatorsChartComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "barChart", first: true, predicate: HorizontalBarChartComponent, descendants: true, isSignal: true }, { propertyName: "contributionChart", first: true, predicate: ContributionChartComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart()\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (enableContributions()) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n            <option [ngValue]=\"undefined\">No Category selected</option>\n            @for (category of categories; track category.key) {\n              <option [value]=\"category.key\">{{ category.label }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (enableContributions()) {\n  <he-contribution-chart\n    class=\"is-relative h-100\"\n    [label]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [labels]=\"chartLabels()\" />\n} @else {\n  <he-horizontal-bar-chart\n    class=\"is-relative h-100\"\n    [title]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ContributionChartComponent, selector: "he-contribution-chart", inputs: ["data", "labels", "label", "config"], exportAs: ["contributionChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "barChart", first: true, predicate: HorizontalBarChartComponent, descendants: true, isSignal: true }, { propertyName: "contributionChart", first: true, predicate: ContributionChartComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart()\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (enableContributions()) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n            <option [ngValue]=\"undefined\">No Disaggregation</option>\n            @for (category of categories; track category.key) {\n              <option [value]=\"category.key\">{{ category.label }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (enableContributions()) {\n  <he-contribution-chart\n    class=\"is-relative h-100\"\n    [label]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [labels]=\"chartLabels()\" />\n} @else {\n  <he-horizontal-bar-chart\n    class=\"is-relative h-100\"\n    [title]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ContributionChartComponent, selector: "he-contribution-chart", inputs: ["data", "labels", "label", "config"], exportAs: ["contributionChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ContributionChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart()\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (enableContributions()) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n            <option [ngValue]=\"undefined\">No Category selected</option>\n            @for (category of categories; track category.key) {\n              <option [value]=\"category.key\">{{ category.label }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (enableContributions()) {\n  <he-contribution-chart\n    class=\"is-relative h-100\"\n    [label]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [labels]=\"chartLabels()\" />\n} @else {\n  <he-horizontal-bar-chart\n    class=\"is-relative h-100\"\n    [title]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"] }]
+            args: [{ selector: 'he-impact-assessments-indicators-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, HorizontalBarChartComponent, ContributionChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart()\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (enableContributions()) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n            <option [ngValue]=\"undefined\">No Disaggregation</option>\n            @for (category of categories; track category.key) {\n              <option [value]=\"category.key\">{{ category.label }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (enableContributions()) {\n  <he-contribution-chart\n    class=\"is-relative h-100\"\n    [label]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [labels]=\"chartLabels()\" />\n} @else {\n  <he-horizontal-bar-chart\n    class=\"is-relative h-100\"\n    [title]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [showExportButton]=\"false\" />\n}\n", styles: [":host{display:block;overflow:visible}\n"] }]
         }], ctorParameters: () => [], propDecorators: { barChart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => HorizontalBarChartComponent), { isSignal: true }] }], contributionChart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ContributionChartComponent), { isSignal: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], filterTermTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTermTypes", required: false }] }] } });
 
 var View$1;