@hestia-earth/ui-components 0.41.9 → 0.41.10

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

@@ -2313,7 +2313,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 }, 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()\">\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()\">\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{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", "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 }, 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()\">\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()\">\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", "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,
@@ -2330,7 +2330,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()\">\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()\">\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{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()\">\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()\">\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 }] }], 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']
@@ -10767,6 +10767,17 @@ const customErrorMessage = {
     Here, you have stated that ${schemaLink('Cycle#cycleDuration', 'cycleDuration')} represents the period from
     ${code(params?.current)} to harvest of the current crop, and set ${schemaLink('Cycle#cycleDuration', 'cycleDuration')} as greater than ${schemaLink('Cycle#siteDuration', 'siteDuration')}.
     Please check the affected fields for errors.`,
+    'should be less than cycleDuration for animals': () => `You have specified that ${schemaLink('Cycle#siteDuration', 'siteDuration')} is greater than or equal to ${schemaLink('Cycle#cycleDuration', 'cycleDuration')} for your Cycle.
+    However, because you indicated that there were ${schemaLink('Cycle#otherSites', 'otherSites')} used by the animals, this is not possible.
+    When ${schemaLink('Cycle#otherSites', 'otherSites')} is set, the Cycle's ${schemaLink('Cycle#siteDuration', 'siteDuration')} must be lower than the ${schemaLink('Cycle#cycleDuration', 'cycleDuration')}.
+    This is because the animals are also spending time on the other Sites.
+    Please fix the ${schemaLink('Cycle#siteDuration', 'siteDuration')} or the ${schemaLink('Cycle#cycleDuration', 'cycleDuration')} accordingly.`,
+    'should be equal to cycleDuration - otherSitesDuration for animals': () => `The values you have provided for your Cycle's ${schemaLink('Cycle#siteDuration', 'siteDuration')} and ${schemaLink('Cycle#otherSitesDuration', 'otherSitesDuration')} do not match the ${schemaLink('Cycle#cycleDuration', 'cycleDuration')}.
+    The sum of ${schemaLink('Cycle#siteDuration', 'siteDuration')} and all ${schemaLink('Cycle#otherSitesDuration', 'otherSitesDuration')} must equal ${schemaLink('Cycle#cycleDuration', 'cycleDuration')}.
+    Please amend the values of ${schemaLink('Cycle#siteDuration', 'siteDuration')}, ${schemaLink('Cycle#otherSitesDuration', 'otherSitesDuration')} or ${schemaLink('Cycle#cycleDuration', 'cycleDuration')} accordingly.`,
+    'should be equal to cycleDuration for animals': () => `You have specified that ${schemaLink('Cycle#siteDuration', 'siteDuration')} is not equal to ${schemaLink('Cycle#cycleDuration', 'cycleDuration')} for your Cycle.
+    However, ${schemaLink('Cycle#siteDuration', 'siteDuration')} must equal ${schemaLink('Cycle#cycleDuration', 'cycleDuration')} for animal Cycles with a single associated Site.
+    Please ensure that the ${schemaLink('Cycle#siteDuration', 'siteDuration')} is equal to the ${schemaLink('Cycle#cycleDuration', 'cycleDuration')}.`,
     'is required when using other model': () => `If you are using the term ${code('Other model')}, please provide a short description of the model in ${code('methodModelDescription')}, including any references to model documentation.`,
     'should add the term productivePhasePermanentCrops': () => `You need to specify whether the permanent crop is in its productive phase when the value of the primary product is ${code('0')}.
     To do this, add the ${termLink({