@hestia-earth/ui-components 0.35.10 → 0.35.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -11,7 +11,10 @@ export declare class DrawerContainerComponent {
|
|
|
11
11
|
private readonly localStorage;
|
|
12
12
|
private readonly contentContainer;
|
|
13
13
|
protected readonly menuState: import("@angular/core").WritableSignal<"close" | "open">;
|
|
14
|
-
|
|
14
|
+
/**
|
|
15
|
+
* Control the expansion state of the menu.
|
|
16
|
+
*/
|
|
17
|
+
protected readonly expanded: import("@angular/core").ModelSignal<boolean>;
|
|
15
18
|
/**
|
|
16
19
|
* The breakpoint at which the drawer will no longer be compact.
|
|
17
20
|
* If a number is provided, it will be used as the width in pixels.
|
|
@@ -71,5 +74,5 @@ export declare class DrawerContainerComponent {
|
|
|
71
74
|
protected animationDone(event: AnimationEvent): void;
|
|
72
75
|
private _getContentLeftSideSpace;
|
|
73
76
|
static ɵfac: i0.ɵɵFactoryDeclaration<DrawerContainerComponent, never>;
|
|
74
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DrawerContainerComponent, "he-drawer-container", never, { "compactBreakpoint": { "alias": "compactBreakpoint"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "contentStyles": { "alias": "contentStyles"; "required": false; "isSignal": true; }; "contentPaddingStyles": { "alias": "contentPaddingStyles"; "required": false; "isSignal": true; }; "menuOverlap": { "alias": "menuOverlap"; "required": false; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; "drawerHeaderTemplate": { "alias": "drawerHeaderTemplate"; "required": false; "isSignal": true; }; "drawerMenuHeaderTemplate": { "alias": "drawerMenuHeaderTemplate"; "required": false; "isSignal": true; }; "drawerContentTemplate": { "alias": "drawerContentTemplate"; "required": false; "isSignal": true; }; "compactMenuLabel": { "alias": "compactMenuLabel"; "required": false; "isSignal": true; }; "compactHeaderClass": { "alias": "compactHeaderClass"; "required": false; "isSignal": true; }; "minMenuDistance": { "alias": "minMenuDistance"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "width": "widthChange"; "opened": "opened"; "closed": "closed"; }, never, ["[drawer-content]"], true, never>;
|
|
77
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DrawerContainerComponent, "he-drawer-container", never, { "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "compactBreakpoint": { "alias": "compactBreakpoint"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "contentStyles": { "alias": "contentStyles"; "required": false; "isSignal": true; }; "contentPaddingStyles": { "alias": "contentPaddingStyles"; "required": false; "isSignal": true; }; "menuOverlap": { "alias": "menuOverlap"; "required": false; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; "drawerHeaderTemplate": { "alias": "drawerHeaderTemplate"; "required": false; "isSignal": true; }; "drawerMenuHeaderTemplate": { "alias": "drawerMenuHeaderTemplate"; "required": false; "isSignal": true; }; "drawerContentTemplate": { "alias": "drawerContentTemplate"; "required": false; "isSignal": true; }; "compactMenuLabel": { "alias": "compactMenuLabel"; "required": false; "isSignal": true; }; "compactHeaderClass": { "alias": "compactHeaderClass"; "required": false; "isSignal": true; }; "minMenuDistance": { "alias": "minMenuDistance"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; "width": "widthChange"; "opened": "opened"; "closed": "closed"; }, never, ["[drawer-content]"], true, never>;
|
|
75
78
|
}
|
|
@@ -2723,7 +2723,10 @@ class DrawerContainerComponent {
|
|
|
2723
2723
|
this.localStorage = inject(LocalStorageService);
|
|
2724
2724
|
this.contentContainer = viewChild('contentContainer', { read: ElementRef });
|
|
2725
2725
|
this.menuState = signal('close');
|
|
2726
|
-
|
|
2726
|
+
/**
|
|
2727
|
+
* Control the expansion state of the menu.
|
|
2728
|
+
*/
|
|
2729
|
+
this.expanded = model(initialState.expanded);
|
|
2727
2730
|
/**
|
|
2728
2731
|
* The breakpoint at which the drawer will no longer be compact.
|
|
2729
2732
|
* If a number is provided, it will be used as the width in pixels.
|
|
@@ -2757,7 +2760,12 @@ class DrawerContainerComponent {
|
|
|
2757
2760
|
this.id = input('');
|
|
2758
2761
|
this.opened = outputFromObservable(toObservable(this.menuState).pipe(skip(1), filter(state => state === 'open'), map(() => true)));
|
|
2759
2762
|
this.closed = outputFromObservable(toObservable(this.menuState).pipe(skip(1), filter(state => state === 'close'), map(() => true)));
|
|
2760
|
-
this.visible = computed(() => [
|
|
2763
|
+
this.visible = computed(() => [
|
|
2764
|
+
this.links()?.length > 0,
|
|
2765
|
+
!!this.drawerHeaderTemplate(),
|
|
2766
|
+
!!this.drawerMenuHeaderTemplate(),
|
|
2767
|
+
!!this.drawerContentTemplate()
|
|
2768
|
+
].some(Boolean));
|
|
2761
2769
|
this.isCompact = toSignal(toObservable(this.compactBreakpoint).pipe(switchMap(breakpoint => this.responsiveService.isAboveBreakpoint$(breakpoint).pipe(map(isAboveBreakpoint => !isAboveBreakpoint)))));
|
|
2762
2770
|
this.hostClass = computed(() => ['is-flex', this.isCompact() ? 'is-flex-direction-column' : '', this.resizable() ? 'is-resizable' : ''].join(' '));
|
|
2763
2771
|
this.isHoldingToggle = this.sidenavStore.isResizing;
|
|
@@ -2831,7 +2839,7 @@ class DrawerContainerComponent {
|
|
|
2831
2839
|
return parseInt(padding, 10) + parseInt(margin, 10);
|
|
2832
2840
|
}
|
|
2833
2841
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2834
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, providers: [sidenavStore], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n <div class=\"is-flex is-flex-grow-1 is-justify-content-space-between is-gap-8 is-flex-direction-column\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerMenuHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n </div>\n\n @if (links()?.length > 0) {\n <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n <button\n ngbDropdownToggle\n class=\"compact-header--btn button is-small is-no-shadow\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n {{ compactMenuLabel() }}\n\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" />\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"shell__menuContent | h-100\"\n (@sideMenu.done)=\"animationDone($event)\"\n [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n <div\n class=\"h-100 is-overflow-y-auto\"\n [class.is-py-4]=\"!drawerContentTemplate()\"\n [class.is-px-2]=\"!drawerContentTemplate()\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerContentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n } @else if (links()?.length > 0) {\n <he-navigation-menu [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n </he-navigation-menu>\n }\n </div>\n @if (collapsible()) {\n <button\n (click)=\"toggleMenu()\"\n (mousedown)=\"startResizing($event)\"\n (touchstart)=\"startResizing($event)\"\n class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n pointer>\n <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n </button>\n }\n </div>\n </aside>\n }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n <ng-content select=\"[drawer-content]\" />\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width:767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width:767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2842
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: DrawerContainerComponent, isStandalone: true, selector: "he-drawer-container", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, compactBreakpoint: { classPropertyName: "compactBreakpoint", publicName: "compactBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, contentStyles: { classPropertyName: "contentStyles", publicName: "contentStyles", isSignal: true, isRequired: false, transformFunction: null }, contentPaddingStyles: { classPropertyName: "contentPaddingStyles", publicName: "contentPaddingStyles", isSignal: true, isRequired: false, transformFunction: null }, menuOverlap: { classPropertyName: "menuOverlap", publicName: "menuOverlap", isSignal: true, isRequired: false, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, drawerHeaderTemplate: { classPropertyName: "drawerHeaderTemplate", publicName: "drawerHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerMenuHeaderTemplate: { classPropertyName: "drawerMenuHeaderTemplate", publicName: "drawerMenuHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, drawerContentTemplate: { classPropertyName: "drawerContentTemplate", publicName: "drawerContentTemplate", isSignal: true, isRequired: false, transformFunction: null }, compactMenuLabel: { classPropertyName: "compactMenuLabel", publicName: "compactMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, compactHeaderClass: { classPropertyName: "compactHeaderClass", publicName: "compactHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, minMenuDistance: { classPropertyName: "minMenuDistance", publicName: "minMenuDistance", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", width: "widthChange", opened: "opened", closed: "closed" }, host: { listeners: { "window:mouseup": "stopResizing()", "window:touchend": "stopResizing()", "window:touchcancel": "stopResizing()" }, properties: { "class": "hostClass()", "attr.drawer-position": "position()", "attr.drawer-state": "menuState()" } }, providers: [sidenavStore], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n <div class=\"is-flex is-flex-grow-1 is-justify-content-space-between is-gap-8 is-flex-direction-column\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerMenuHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n </div>\n\n @if (links()?.length > 0) {\n <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n <button\n ngbDropdownToggle\n class=\"compact-header--btn button is-small is-no-shadow\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n {{ compactMenuLabel() }}\n\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" />\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"shell__menuContent | h-100\"\n (@sideMenu.done)=\"animationDone($event)\"\n [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n <div\n class=\"h-100 is-overflow-y-auto\"\n [class.is-py-4]=\"!drawerContentTemplate()\"\n [class.is-px-2]=\"!drawerContentTemplate()\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerContentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n }\n @if (links()?.length > 0) {\n <he-navigation-menu [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n </he-navigation-menu>\n }\n </div>\n @if (collapsible()) {\n <button\n (click)=\"toggleMenu()\"\n (mousedown)=\"startResizing($event)\"\n (touchstart)=\"startResizing($event)\"\n class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n pointer>\n <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n </button>\n }\n </div>\n </aside>\n }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n <ng-content select=\"[drawer-content]\" />\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width:767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width:767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "component", type: NavigationMenuComponent, selector: "he-navigation-menu", inputs: ["links", "sticky", "collapsible", "routerLinkMatchOptions"], outputs: ["closed"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }], animations: ANIMATIONS, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2835
2843
|
}
|
|
2836
2844
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DrawerContainerComponent, decorators: [{
|
|
2837
2845
|
type: Component$1,
|
|
@@ -2848,7 +2856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
2848
2856
|
'[class]': 'hostClass()',
|
|
2849
2857
|
'[attr.drawer-position]': 'position()',
|
|
2850
2858
|
'[attr.drawer-state]': 'menuState()'
|
|
2851
|
-
}, providers: [sidenavStore], template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n <div class=\"is-flex is-flex-grow-1 is-justify-content-space-between is-gap-8 is-flex-direction-column\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerMenuHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n </div>\n\n @if (links()?.length > 0) {\n <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n <button\n ngbDropdownToggle\n class=\"compact-header--btn button is-small is-no-shadow\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n {{ compactMenuLabel() }}\n\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" />\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"shell__menuContent | h-100\"\n (@sideMenu.done)=\"animationDone($event)\"\n [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n <div\n class=\"h-100 is-overflow-y-auto\"\n [class.is-py-4]=\"!drawerContentTemplate()\"\n [class.is-px-2]=\"!drawerContentTemplate()\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerContentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n }
|
|
2859
|
+
}, providers: [sidenavStore], template: "@if (visible()) {\n @if (isCompact()) {\n <div class=\"compact-header\">\n <div [ngClass]=\"compactHeaderClass()\">\n <div class=\"is-flex is-align-items-flex-start is-justify-content-space-between is-gap-8 w-100\">\n <div class=\"is-flex is-flex-grow-1 is-justify-content-space-between is-gap-8 is-flex-direction-column\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerMenuHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n </div>\n\n @if (links()?.length > 0) {\n <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n <button\n ngbDropdownToggle\n class=\"compact-header--btn button is-small is-no-shadow\"\n aria-controls=\"drawer-menu\"\n type=\"button\">\n {{ compactMenuLabel() }}\n\n <he-svg-icon\n class=\"compact-header--btn__icon\"\n [name]=\"optionDd.isOpen() ? 'chevron-up' : 'chevron-down'\"\n aria-hidden=\"true\" />\n </button>\n\n <div ngbDropdownMenu id=\"drawer-menu\">\n <div class=\"dropdown-content navigation-menu-dropdown\">\n <he-navigation-menu (closed)=\"optionDd.close()\" [links]=\"links()\" />\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n } @else {\n <aside>\n <div\n class=\"shell__menuContent | h-100\"\n (@sideMenu.done)=\"animationDone($event)\"\n [@sideMenu]=\"expanded() ? 'full' : 'hidden'\">\n <div\n class=\"h-100 is-overflow-y-auto\"\n [class.is-py-4]=\"!drawerContentTemplate()\"\n [class.is-px-2]=\"!drawerContentTemplate()\">\n @if (drawerHeaderTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerHeaderTemplate()\" />\n }\n @if (drawerContentTemplate()) {\n <ng-container [ngTemplateOutlet]=\"drawerContentTemplate()\" />\n }\n @if (links()?.length > 0) {\n <he-navigation-menu [links]=\"links()\">\n @if (drawerMenuHeaderTemplate()) {\n <ng-container header [ngTemplateOutlet]=\"drawerMenuHeaderTemplate()\" />\n }\n </he-navigation-menu>\n }\n </div>\n @if (collapsible()) {\n <button\n (click)=\"toggleMenu()\"\n (mousedown)=\"startResizing($event)\"\n (touchstart)=\"startResizing($event)\"\n class=\"is-absolute is-overflow-hidden is-flex is-justify-content-center is-align-items-center | shell__menuContent--toggle\"\n pointer>\n <he-svg-icon [name]=\"resizable() ? 'drag' : toggleIcon()\" size=\"20\" />\n </button>\n }\n </div>\n </aside>\n }\n}\n\n<div [class.is-resizing]=\"isHoldingToggle()\" class=\"shell__content | h-100 w-100 is-flex\">\n <div class=\"shell__content--body | w-100\" [@reduceWidth]=\"reduceAnimation()\">\n <div #contentContainer class=\"w-100 h-100\" [style]=\"contentStyles()\" [className]=\"contentPaddingStyles()\">\n <ng-content select=\"[drawer-content]\" />\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--drawer-toggle-position: -20px;--sidenav-left-width: 256px;--sidenav-right-width: 256px;--content-transition-left-x: 0;--content-transition-right-x: 0}:host-context[drawer-position=left]{--sidenav-side-transform: 1;--sidenav-width: var(--sidenav-left-width);--content-transition-x: var(--content-transition-left-x);--menu-transition-transform: -1}:host-context[drawer-position=right]{--sidenav-side-transform: 0;--sidenav-width: var(--sidenav-right-width);--content-transition-x: var(--content-transition-right-x);--menu-transition-transform: 1}:host-context[drawer-position=right] aside{order:1}:host-context[drawer-position=right] aside .shell__menuContent{right:0;box-shadow:6px 6px 6px #0000000f}:host-context[drawer-position=right] aside .shell__menuContent--toggle{left:var(--drawer-toggle-position);border-radius:9px 0 0 9px}:host{position:relative;max-height:100%;display:flex;justify-content:space-between}:host aside{position:sticky;top:var(--navbar-height);z-index:10;height:calc(100vh - var(--navbar-height))}:host aside .shell__menuContent{position:absolute;top:0;box-shadow:6px 6px 6px #0000000f;background-color:#fff;width:var(--sidenav-width)}:host aside .shell__menuContent--toggle{top:calc(50% - 24px);right:var(--drawer-toggle-position);background:#dbe3ea;border-radius:0 9px 9px 0;border:none;width:20px;height:48px}:host.is-resizable .shell__menuContent--toggle:active{cursor:col-resize}.shell__content--body{container-type:inline-size;transition:none}.shell__content:not(.is-resizing) .shell__content--body{transition:transform .3s ease-in-out,width .3s ease-in-out}.navigation-menu-dropdown{width:300px}@media screen and (max-width:767px){.navigation-menu-dropdown{width:calc(100dvw - 3rem)}}.compact-header{position:sticky;top:calc(var(--navbar-height));z-index:10}@media screen and (max-width:767px){.compact-header{top:0}}.compact-header--btn{display:block;background:#dbe3ea;border-radius:3px;color:#193957;font-weight:700;font-size:1rem;line-height:21px;padding:.25rem .5rem}.compact-header--btn__icon{margin-left:.25rem;font-size:12px}.compact-header--btn .show .compact-header--btn__icon{transform:rotate(180deg)}he-navigation-menu ::ng-deep .menu{width:100%!important;min-width:100%!important;max-width:100%!important}\n"] }]
|
|
2852
2860
|
}], ctorParameters: () => [], propDecorators: { stopResizing: [{
|
|
2853
2861
|
type: HostListener,
|
|
2854
2862
|
args: ['window:mouseup']
|
|
@@ -9728,7 +9736,9 @@ const customErrorMessage = {
|
|
|
9728
9736
|
'must be below the maximum': ({ params: { max } }) => `Must be below ${max}.`,
|
|
9729
9737
|
'must be linked to waste input': () => `The term ${code('ionisingCompoundsToAirInputsProduction')} can only have 1 entry of ${code('termType')}: ${glossaryTypeLink(TermTermType.waste)}, so that the ${code('value')} field can represent the amount of units of that waste term.`,
|
|
9730
9738
|
'must not have background methodTier': ({ params: { allowedValues } }) => `Only background emissions (e.g., "Inputs Production") can have ${code('methodTier')}=${EmissionMethodTier.background}.
|
|
9731
|
-
You must instead choose one of the following values: ${allowedValues.map(code).join(', ')}
|
|
9739
|
+
You must instead choose one of the following values: ${allowedValues.map(code).join(', ')}`,
|
|
9740
|
+
'should be within acceptable range of the lookup value': ({ params }) => `The ${code(params.term['@id'])} value is ${code(params.delta)}% higher than our default value for this Term (${code(params.expected)}).
|
|
9741
|
+
Please check your data as this may be an error. ${params?.threshold ? `Our threshold is ±${threshold(params?.threshold)}.` : ''}`
|
|
9732
9742
|
};
|
|
9733
9743
|
const requiredPropertyError = (message, error) => {
|
|
9734
9744
|
const field = message.split("'")[1].replace("'", '');
|
|
@@ -12820,7 +12830,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
|
|
|
12820
12830
|
multi: true
|
|
12821
12831
|
},
|
|
12822
12832
|
FilterStore
|
|
12823
|
-
], usesInheritance: true, ngImport: i0, template: "<div class=\"is-flex is-flex-direction-column is-gap-12 w-100\">\n @if (showHeader()) {\n <div class=\"is-flex is-flex-direction-column is-gap-12 is-justify-content-space-between is-align-items-flex-start\">\n @if (title()) {\n <div class=\"is-flex is-align-items-center\">\n <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"right\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </div>\n }\n\n <ng-content select=\"[header-content]\" />\n\n @if (showClearAll()) {\n <span\n class=\"is-size-7 has-text-weight-normal is-italic | clear-button\"\n [class.is-clickable]=\"hasSelectedValues()\"\n (click)=\"clearAll()\">\n Clear all\n </span>\n }\n\n @if (showGlobalSearch()) {\n <div class=\"field is-mb-0 w-100\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small search-input\"\n [placeholder]=\"globalSearchPlaceholder()\"\n [(ngModel)]=\"search\"\n [disabled]=\"disabled()\"\n (input)=\"onSearch($event.target.value, group())\" />\n <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"clearSearch()\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n </div>\n }\n\n <div class=\"has-border-top has-border-bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: { group: group(), parentSearch: search(), showNoResults: showGlobalSearch() }\n \" />\n </div>\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\" let-showNoResults=\"showNoResults\">\n @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n @if (item.type === 'group') {\n @let groupState = panelStates[item.label];\n @if (groupState) {\n <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n <div\n class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n (click)=\"groupState.expanded = !groupState.expanded\">\n <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n </div>\n\n @if (groupState.expanded) {\n <div class=\"is-overflow-hidden\" [@slideDownUp]=\"groupState.expanded\">\n @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n <div class=\"control is-expanded has-icons-right pl-5\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small search-input pl-2\"\n placeholder=\"Search {{ item.label }}\"\n [value]=\"groupState.searchTerm || ''\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n <a\n class=\"icon has-text-secondary is-small is-right\"\n [class.is-hidden]=\"!groupState.searchTerm\"\n (click)=\"groupState.searchTerm = ''\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n\n <div class=\"pl-5\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: {\n group: item,\n parentSearch: parentSearch || groupState.searchTerm,\n showNoResults: !showGlobalSearch()\n }\n \" />\n </div>\n </div>\n }\n </div>\n }\n } @else {\n <div\n class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n [class.has-border-bottom]=\"!lastItem\">\n <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n </div>\n }\n } @empty {\n @if (parentSearch && showNoResults) {\n <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n No results found for \"{{ parentSearch }}\"\n </div>\n }\n }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n <span>{{ item.label }}</span>\n\n @if (item.tooltip) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light
|
|
12833
|
+
], usesInheritance: true, ngImport: i0, template: "<div class=\"is-flex is-flex-direction-column is-gap-12 w-100\">\n @if (showHeader()) {\n <div class=\"is-flex is-flex-direction-column is-gap-12 is-justify-content-space-between is-align-items-flex-start\">\n @if (title()) {\n <div class=\"is-flex is-align-items-center\">\n <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"right\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </div>\n }\n\n <ng-content select=\"[header-content]\" />\n\n @if (showClearAll()) {\n <span\n class=\"is-size-7 has-text-weight-normal is-italic | clear-button\"\n [class.is-clickable]=\"hasSelectedValues()\"\n (click)=\"clearAll()\">\n Clear all\n </span>\n }\n\n @if (showGlobalSearch()) {\n <div class=\"field is-mb-0 w-100\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small search-input\"\n [placeholder]=\"globalSearchPlaceholder()\"\n [(ngModel)]=\"search\"\n [disabled]=\"disabled()\"\n (input)=\"onSearch($event.target.value, group())\" />\n <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"clearSearch()\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n </div>\n }\n\n <div class=\"has-border-top has-border-bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: { group: group(), parentSearch: search(), showNoResults: showGlobalSearch() }\n \" />\n </div>\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\" let-showNoResults=\"showNoResults\">\n @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n @if (item.type === 'group') {\n @let groupState = panelStates[item.label];\n @if (groupState) {\n <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n <div\n class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n (click)=\"groupState.expanded = !groupState.expanded\">\n <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n </div>\n\n @if (groupState.expanded) {\n <div class=\"is-overflow-hidden\" [@slideDownUp]=\"groupState.expanded\">\n @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n <div class=\"control is-expanded has-icons-right pl-5\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small search-input pl-2\"\n placeholder=\"Search {{ item.label }}\"\n [value]=\"groupState.searchTerm || ''\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n <a\n class=\"icon has-text-secondary is-small is-right\"\n [class.is-hidden]=\"!groupState.searchTerm\"\n (click)=\"groupState.searchTerm = ''\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n\n <div class=\"pl-5\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: {\n group: item,\n parentSearch: parentSearch || groupState.searchTerm,\n showNoResults: !showGlobalSearch()\n }\n \" />\n </div>\n </div>\n }\n </div>\n }\n } @else {\n <div\n class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n [class.has-border-bottom]=\"!lastItem\">\n <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n </div>\n }\n } @empty {\n @if (parentSearch && showNoResults) {\n <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n No results found for \"{{ parentSearch }}\"\n </div>\n }\n }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n <span class=\"is-flex is-gap-4 is-flex-wrap-wrap is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n <span>{{ item.label }}</span>\n\n @if (item.tooltip) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light\"\n [ngbTooltip]=\"item.tooltip\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n\n @if (isNumber(count)) {\n <span class=\"has-text-grey-light is-size-7\">({{ count }})</span>\n }\n </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n @let options = optionsFromGroup(item);\n\n <label\n class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"mr-3 is-flex-shrink-0\"\n [checked]=\"isGroupFullySelected(options)\"\n [indeterminate]=\"isGroupPartiallySelected(options)\"\n (change)=\"toggleGroup(options)\"\n [disabled]=\"isItemEffectivelyDisabled(item)\" />\n </label>\n\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? item.count : undefined }\" />\n\n <he-svg-icon\n class=\"has-text-secondary transition-transform\"\n [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n <label\n class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"mr-3 is-flex-shrink-0\"\n [checked]=\"isOptionSelected(item.value)\"\n (change)=\"toggleOption(item.value)\"\n [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: item.count }\" />\n </label>\n</ng-template>\n", styles: [".clear-button{color:#b5b5b5}.clear-button.is-clickable{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border:1px solid #dbe3ea;border-radius:3px;font-weight:400;line-height:17px;box-shadow:none!important}.has-background-hover-light:hover{background-color:#fafafa}.has-border-top{border-top:1px solid #dbe3ea}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:3px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.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: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: FilterAccordionGroupPipe, name: "filterAccordionGroup" }, { kind: "directive", type: InputIndeterminateDirective, selector: "input[indeterminate]", inputs: ["indeterminate"] }], animations: [
|
|
12824
12834
|
trigger('slideDownUp', [
|
|
12825
12835
|
transition(':enter', [
|
|
12826
12836
|
style({ maxHeight: '0', opacity: 0 }),
|
|
@@ -12855,7 +12865,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
12855
12865
|
]),
|
|
12856
12866
|
transition(':leave', [animate('200ms ease-out', style({ maxHeight: '0', opacity: 0 }))])
|
|
12857
12867
|
])
|
|
12858
|
-
], template: "<div class=\"is-flex is-flex-direction-column is-gap-12 w-100\">\n @if (showHeader()) {\n <div class=\"is-flex is-flex-direction-column is-gap-12 is-justify-content-space-between is-align-items-flex-start\">\n @if (title()) {\n <div class=\"is-flex is-align-items-center\">\n <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"right\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </div>\n }\n\n <ng-content select=\"[header-content]\" />\n\n @if (showClearAll()) {\n <span\n class=\"is-size-7 has-text-weight-normal is-italic | clear-button\"\n [class.is-clickable]=\"hasSelectedValues()\"\n (click)=\"clearAll()\">\n Clear all\n </span>\n }\n\n @if (showGlobalSearch()) {\n <div class=\"field is-mb-0 w-100\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small search-input\"\n [placeholder]=\"globalSearchPlaceholder()\"\n [(ngModel)]=\"search\"\n [disabled]=\"disabled()\"\n (input)=\"onSearch($event.target.value, group())\" />\n <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"clearSearch()\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n </div>\n }\n\n <div class=\"has-border-top has-border-bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: { group: group(), parentSearch: search(), showNoResults: showGlobalSearch() }\n \" />\n </div>\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\" let-showNoResults=\"showNoResults\">\n @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n @if (item.type === 'group') {\n @let groupState = panelStates[item.label];\n @if (groupState) {\n <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n <div\n class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n (click)=\"groupState.expanded = !groupState.expanded\">\n <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n </div>\n\n @if (groupState.expanded) {\n <div class=\"is-overflow-hidden\" [@slideDownUp]=\"groupState.expanded\">\n @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n <div class=\"control is-expanded has-icons-right pl-5\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small search-input pl-2\"\n placeholder=\"Search {{ item.label }}\"\n [value]=\"groupState.searchTerm || ''\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n <a\n class=\"icon has-text-secondary is-small is-right\"\n [class.is-hidden]=\"!groupState.searchTerm\"\n (click)=\"groupState.searchTerm = ''\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n\n <div class=\"pl-5\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: {\n group: item,\n parentSearch: parentSearch || groupState.searchTerm,\n showNoResults: !showGlobalSearch()\n }\n \" />\n </div>\n </div>\n }\n </div>\n }\n } @else {\n <div\n class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n [class.has-border-bottom]=\"!lastItem\">\n <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n </div>\n }\n } @empty {\n @if (parentSearch && showNoResults) {\n <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n No results found for \"{{ parentSearch }}\"\n </div>\n }\n }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n <span>{{ item.label }}</span>\n\n @if (item.tooltip) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light
|
|
12868
|
+
], template: "<div class=\"is-flex is-flex-direction-column is-gap-12 w-100\">\n @if (showHeader()) {\n <div class=\"is-flex is-flex-direction-column is-gap-12 is-justify-content-space-between is-align-items-flex-start\">\n @if (title()) {\n <div class=\"is-flex is-align-items-center\">\n <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"right\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </div>\n }\n\n <ng-content select=\"[header-content]\" />\n\n @if (showClearAll()) {\n <span\n class=\"is-size-7 has-text-weight-normal is-italic | clear-button\"\n [class.is-clickable]=\"hasSelectedValues()\"\n (click)=\"clearAll()\">\n Clear all\n </span>\n }\n\n @if (showGlobalSearch()) {\n <div class=\"field is-mb-0 w-100\">\n <div class=\"control is-expanded has-icons-right\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small search-input\"\n [placeholder]=\"globalSearchPlaceholder()\"\n [(ngModel)]=\"search\"\n [disabled]=\"disabled()\"\n (input)=\"onSearch($event.target.value, group())\" />\n <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"clearSearch()\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n </div>\n }\n\n <div class=\"has-border-top has-border-bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: { group: group(), parentSearch: search(), showNoResults: showGlobalSearch() }\n \" />\n </div>\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\" let-showNoResults=\"showNoResults\">\n @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n @if (item.type === 'group') {\n @let groupState = panelStates[item.label];\n @if (groupState) {\n <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n <div\n class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n (click)=\"groupState.expanded = !groupState.expanded\">\n <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n </div>\n\n @if (groupState.expanded) {\n <div class=\"is-overflow-hidden\" [@slideDownUp]=\"groupState.expanded\">\n @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n <div class=\"control is-expanded has-icons-right pl-5\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small search-input pl-2\"\n placeholder=\"Search {{ item.label }}\"\n [value]=\"groupState.searchTerm || ''\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n <a\n class=\"icon has-text-secondary is-small is-right\"\n [class.is-hidden]=\"!groupState.searchTerm\"\n (click)=\"groupState.searchTerm = ''\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n\n <div class=\"pl-5\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: {\n group: item,\n parentSearch: parentSearch || groupState.searchTerm,\n showNoResults: !showGlobalSearch()\n }\n \" />\n </div>\n </div>\n }\n </div>\n }\n } @else {\n <div\n class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n [class.has-border-bottom]=\"!lastItem\">\n <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n </div>\n }\n } @empty {\n @if (parentSearch && showNoResults) {\n <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n No results found for \"{{ parentSearch }}\"\n </div>\n }\n }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n <span class=\"is-flex is-gap-4 is-flex-wrap-wrap is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n <span>{{ item.label }}</span>\n\n @if (item.tooltip) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light\"\n [ngbTooltip]=\"item.tooltip\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n\n @if (isNumber(count)) {\n <span class=\"has-text-grey-light is-size-7\">({{ count }})</span>\n }\n </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n @let options = optionsFromGroup(item);\n\n <label\n class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"mr-3 is-flex-shrink-0\"\n [checked]=\"isGroupFullySelected(options)\"\n [indeterminate]=\"isGroupPartiallySelected(options)\"\n (change)=\"toggleGroup(options)\"\n [disabled]=\"isItemEffectivelyDisabled(item)\" />\n </label>\n\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? item.count : undefined }\" />\n\n <he-svg-icon\n class=\"has-text-secondary transition-transform\"\n [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n <label\n class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"mr-3 is-flex-shrink-0\"\n [checked]=\"isOptionSelected(item.value)\"\n (change)=\"toggleOption(item.value)\"\n [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: item.count }\" />\n </label>\n</ng-template>\n", styles: [".clear-button{color:#b5b5b5}.clear-button.is-clickable{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border:1px solid #dbe3ea;border-radius:3px;font-weight:400;line-height:17px;box-shadow:none!important}.has-background-hover-light:hover{background-color:#fafafa}.has-border-top{border-top:1px solid #dbe3ea}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:3px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"] }]
|
|
12859
12869
|
}], ctorParameters: () => [] });
|
|
12860
12870
|
|
|
12861
12871
|
const sortedPoints = (values) => Object.entries(values)
|