@hestia-earth/ui-components 0.33.4 → 0.33.5

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.
@@ -11239,8 +11239,8 @@ const legend = [
11239
11239
  const getUnitsAndLabel = (terms, fallbackLabel = 'unknown term') => {
11240
11240
  const allTerms = (Array.isArray(terms) ? terms : [terms]).filter(Boolean);
11241
11241
  const term = allTerms?.[0];
11242
- const label = term.name ?? term['@id'] ?? fallbackLabel;
11243
- const units = `(${term.units || 'unknown units'})`;
11242
+ const label = term?.name ?? term?.['@id'] ?? fallbackLabel;
11243
+ const units = `(${term?.units || 'unknown units'})`;
11244
11244
  return {
11245
11245
  label: `${label.replace(units, '').trim()}${allTerms.length > 1 ? ` (and ${allTerms.length - 1} more)` : ''}`,
11246
11246
  terms: allTerms,
@@ -11310,7 +11310,7 @@ const safeDivide = (numerator, denominator) => (denominator > 0 ? numerator / de
11310
11310
  const isTypeWithoutValue = (nodeDatum) => [ChartNodeType.input, ChartNodeType.operation].includes(nodeDatum.data.type);
11311
11311
  const getWeightedValueText = (nodeDatum) => `${formatNumber(nodeDatum.data.weightedValue)}${nodeDatum.parent?.data.value === null
11312
11312
  ? ''
11313
- : ` of ${formatNumber(nodeDatum.parent?.data.value || nodeDatum.parent?.data.weightedValue || 0)}`} ${isNumber(nodeDatum.parent?.data.value) ? nodeDatum.parent?.data.units : nodeDatum.parent?.parent?.data.units}`;
11313
+ : ` of ${formatNumber(nodeDatum.parent?.data.value || nodeDatum.parent?.data.weightedValue || 0)}`} ${isNumber(nodeDatum.parent?.data.value) ? nodeDatum.parent?.data?.units : nodeDatum.parent?.parent?.data?.units}`;
11314
11314
  const generateTipData = (nodeDatum) => ({
11315
11315
  hasWeightedValue: nodeDatum.data.weightedValue,
11316
11316
  weightedValueText: getWeightedValueText(nodeDatum),
@@ -13335,6 +13335,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
13335
13335
 
13336
13336
  const allGroups = (values = []) => values.flatMap(v => (v.type === 'group' ? [v, ...allGroups(v.options)] : []));
13337
13337
  const optionsFromGroup = (group) => group.options.flatMap(v => (v.type === 'group' ? optionsFromGroup(v) : v.value));
13338
+ const disabledValues = (values) => values
13339
+ .flatMap(v => (v.type === 'group' ? disabledValues(v.options) : v.disabled ? v.value : null))
13340
+ .filter(Boolean);
13338
13341
  const getDirectOptionsCount = (group) => group.options.filter(item => item.type === 'option').length;
13339
13342
  const isItemMatch = (item, searchTerm) => item.label.toLowerCase().includes(searchTerm.toLowerCase());
13340
13343
  const hasMatchingNestedOption = (group, searchTerm) => group.options.some(item => item.type === 'option' ? isItemMatch(item, searchTerm) : hasMatchingNestedOption(item, searchTerm));
@@ -13415,8 +13418,10 @@ class FilterAccordionComponent extends ControlValueAccessor {
13415
13418
  ])));
13416
13419
  }
13417
13420
  clearAll() {
13418
- const emptyValue = [];
13419
- this.onSelectionChange(emptyValue);
13421
+ // only keep the disabled selected values
13422
+ const values = disabledValues(this.data());
13423
+ const selectedValues = this.selectControl.value;
13424
+ this.onSelectionChange(selectedValues.filter(value => values.includes(value)));
13420
13425
  }
13421
13426
  isOptionSelected(value) {
13422
13427
  const currentValue = this.selectControl.value || [];
@@ -13465,7 +13470,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
13465
13470
  multi: true
13466
13471
  },
13467
13472
  FilterStore
13468
- ], usesInheritance: true, ngImport: i0, template: "<div\n class=\"is-flex is-justify-content-space-between is-gap-16 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n <div class=\"is-flex is-align-items-center\">\n <h3 class=\"title is-size-6 has-text-secondary mr-1 mb-0\">{{ title() }}</h3>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </div>\n\n <ng-content select=\"[header-content]\" />\n\n @if (showClearAll()) {\n <span class=\"is-clickable is-size-7 mb-1 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n Clear all\n </span>\n }\n\n @if (showGlobalSearch()) {\n <div class=\"field is-mb-0 pb-2 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 <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"search.set('')\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"search()\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n</div>\n\n@for (\n item of getFilteredDirectChildren({ options: filterStore.filteredData() }, search());\n track item.trackId || item.label\n) {\n @if (item.type === 'group') {\n @if (panelStates[item.label]) {\n @let groupState = panelStates[item.label];\n <div class=\"has-border-bottom\" [class.is-active]=\"groupState.expanded\">\n <div\n class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n (click)=\"groupState.expanded = !groupState.expanded\">\n <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n </div>\n\n <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\"\n [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n <div class=\"filter-accordion__panel-inner\">\n <div class=\"filter-accordion__search\" [class.d-none]=\"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 {{ removeCountFromLabel(item.label) }}\"\n [value]=\"groupState.searchTerm || ''\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n (input)=\"groupState.searchTerm = $any($event.target).value\" />\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 </div>\n\n <div>\n @for (\n child of getFilteredDirectChildren(item, search() || groupState.searchTerm);\n track child.trackId || child.label;\n let childLast = $last\n ) {\n @if (child.type === 'group') {\n <!-- Nested group -->\n @if (panelStates[child.label]) {\n @let childState = panelStates[child.label];\n <div class=\"pl-5\" [class.has-border-bottom]=\"!childLast\">\n <div [class.is-active]=\"childState.expanded\">\n <div\n class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n (click)=\"childState.expanded = !childState.expanded\">\n <label\n class=\"checkbox is-flex is-justify-content-center is-align-items-center mr-3\"\n (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n [checked]=\"isGroupFullySelected(child)\"\n [indeterminate]=\"isGroupPartiallySelected(child)\"\n (change)=\"toggleGroup(child)\"\n [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\" />\n </label>\n\n <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n {{ removeCountFromLabel(child.label) }}\n </span>\n\n <he-svg-icon\n class=\"has-text-secondary transition-transform\"\n [class.is-rotated-180]=\"childState.expanded\"\n [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\" />\n </div>\n\n <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"childState.expanded\"\n [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n <div class=\"filter-accordion__panel-inner\">\n <div class=\"filter-accordion__search\" [class.d-none]=\"optionsFromGroup(child).length < 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 is-size-7 search-input\"\n placeholder=\"Search {{ removeCountFromLabel(child.label) }}\"\n [value]=\"childState.searchTerm || ''\"\n [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n (input)=\"childState.searchTerm = $any($event.target).value\" />\n <a\n class=\"icon is-small is-right\"\n [class.is-hidden]=\"!childState.searchTerm\"\n (click)=\"childState.searchTerm = ''\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small is-right\" [class.is-hidden]=\"childState.searchTerm\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n </div>\n <div>\n @for (\n nestedOption of getFilteredOptions(\n child,\n search() || childState.searchTerm || groupState.searchTerm\n );\n track nestedOption.trackId || nestedOption.label;\n let nestedLast = $last\n ) {\n <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!nestedLast\">\n <ng-container\n *ngTemplateOutlet=\"\n optionLabel;\n context: {\n item: nestedOption,\n parentDisabled: isItemEffectivelyDisabled(\n child,\n isItemEffectivelyDisabled(item)\n )\n }\n \" />\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n } @else {\n <!-- Direct option -->\n <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!childLast\">\n <ng-container\n *ngTemplateOutlet=\"\n optionLabel;\n context: { item: child, parentDisabled: isItemEffectivelyDisabled(item) }\n \" />\n </div>\n }\n }\n\n @if (\n (search() || groupState.searchTerm) &&\n getFilteredDirectChildren(item, search() || groupState.searchTerm).length === 0\n ) {\n <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n No results found for \"{{ search() || groupState.searchTerm }}\"\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n }\n }\n\n @if (item.type === 'option') {\n <div class=\"is-flex is-justify-content-space-between has-border-bottom accordion-row\">\n <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n </div>\n }\n}\n\n<ng-template #itemLabel let-item=\"item\">\n <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n <span>{{ removeCountFromLabel(item.label) }}</span>\n\n @if (item.tooltip) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light is-pl-2\"\n [ngbTooltip]=\"item.tooltip\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\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(item)\"\n [indeterminate]=\"isGroupPartiallySelected(item)\"\n (change)=\"toggleGroup(item)\"\n [disabled]=\"isItemEffectivelyDisabled(item)\" />\n </label>\n\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\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 }\" />\n\n @let count = getOptionCountFn()(item.value);\n @if (isNumber(count)) {\n <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n }\n </label>\n</ng-template>\n", styles: [".clear-button{color:#4c7194}.accordion-row{padding:4px 0;min-height:25px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.control{height:28px}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;color:#b5b5b5;box-shadow:none!important}.filter-accordion__panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);will-change:grid-template-rows}.filter-accordion__panel-content--expanded{grid-template-rows:1fr}.filter-accordion__panel-inner{min-height:0;overflow:hidden}.filter-accordion__panel-content--expanded .filter-accordion__panel-inner{overflow-y:hidden;max-height:var(--max-height, none)}.filter-accordion__search{opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility 0s .15s}.filter-accordion__panel-content--expanded .filter-accordion__search{opacity:1;visibility:visible;transition:opacity .2s ease-in .1s,visibility 0s 0s}.has-background-hover-light:hover{background-color:#fafafa}.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:2px;appearance:none;-webkit-appearance:none;cursor:pointer;background-color:transparent;accent-color:transparent}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", "svgClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
13473
+ ], usesInheritance: true, ngImport: i0, template: "<div\n class=\"is-flex is-justify-content-space-between is-gap-16 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n <div class=\"is-flex is-align-items-center\">\n <h3 class=\"title is-size-6 has-text-secondary mr-1 mb-0\">{{ title() }}</h3>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </div>\n\n <ng-content select=\"[header-content]\" />\n\n @if (showClearAll()) {\n <span class=\"is-clickable is-size-7 mb-1 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n Clear all\n </span>\n }\n\n @if (showGlobalSearch()) {\n <div class=\"field is-mb-0 pb-2 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 <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"search.set('')\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"search()\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n</div>\n\n<div class=\"has-border-bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: { group: { options: filterStore.filteredData() }, parentSearch: search() }\n \" />\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\">\n @let items = getFilteredDirectChildren(group, parentSearch);\n\n @for (item of items; 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 <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\"\n [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n <div class=\"filter-accordion__panel-inner\">\n <div class=\"filter-accordion__search\" [class.d-none]=\"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 {{ removeCountFromLabel(item.label) }}\"\n [value]=\"groupState.searchTerm || ''\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n (input)=\"groupState.searchTerm = $any($event.target).value\" />\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 </div>\n\n <div class=\"pl-5\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: { group: item, parentSearch: parentSearch || groupState.searchTerm }\n \" />\n </div>\n </div>\n </div>\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) {\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\">\n <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n <span>{{ removeCountFromLabel(item.label) }}</span>\n\n @if (item.tooltip) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light is-pl-2\"\n [ngbTooltip]=\"item.tooltip\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\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(item)\"\n [indeterminate]=\"isGroupPartiallySelected(item)\"\n (change)=\"toggleGroup(item)\"\n [disabled]=\"isItemEffectivelyDisabled(item)\" />\n </label>\n\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\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 }\" />\n\n @let count = getOptionCountFn()(item.value);\n @if (isNumber(count)) {\n <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n }\n </label>\n</ng-template>\n", styles: [".clear-button{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-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;box-shadow:none!important}.filter-accordion__panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);will-change:grid-template-rows}.filter-accordion__panel-content--expanded{grid-template-rows:1fr}.filter-accordion__panel-inner{min-height:0;overflow:hidden}.filter-accordion__panel-content--expanded .filter-accordion__panel-inner{overflow-y:hidden;max-height:var(--max-height, none)}.filter-accordion__search{opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility 0s .15s}.filter-accordion__panel-content--expanded .filter-accordion__search{opacity:1;visibility:visible;transition:opacity .2s ease-in .1s,visibility 0s 0s}.has-background-hover-light:hover{background-color:#fafafa}.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:2px;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", "svgClass"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
13469
13474
  }
13470
13475
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilterAccordionComponent, decorators: [{
13471
13476
  type: Component$1,
@@ -13476,7 +13481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
13476
13481
  multi: true
13477
13482
  },
13478
13483
  FilterStore
13479
- ], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip, NgTemplateOutlet], template: "<div\n class=\"is-flex is-justify-content-space-between is-gap-16 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n <div class=\"is-flex is-align-items-center\">\n <h3 class=\"title is-size-6 has-text-secondary mr-1 mb-0\">{{ title() }}</h3>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </div>\n\n <ng-content select=\"[header-content]\" />\n\n @if (showClearAll()) {\n <span class=\"is-clickable is-size-7 mb-1 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n Clear all\n </span>\n }\n\n @if (showGlobalSearch()) {\n <div class=\"field is-mb-0 pb-2 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 <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"search.set('')\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"search()\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n</div>\n\n@for (\n item of getFilteredDirectChildren({ options: filterStore.filteredData() }, search());\n track item.trackId || item.label\n) {\n @if (item.type === 'group') {\n @if (panelStates[item.label]) {\n @let groupState = panelStates[item.label];\n <div class=\"has-border-bottom\" [class.is-active]=\"groupState.expanded\">\n <div\n class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n (click)=\"groupState.expanded = !groupState.expanded\">\n <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n </div>\n\n <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\"\n [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n <div class=\"filter-accordion__panel-inner\">\n <div class=\"filter-accordion__search\" [class.d-none]=\"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 {{ removeCountFromLabel(item.label) }}\"\n [value]=\"groupState.searchTerm || ''\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n (input)=\"groupState.searchTerm = $any($event.target).value\" />\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 </div>\n\n <div>\n @for (\n child of getFilteredDirectChildren(item, search() || groupState.searchTerm);\n track child.trackId || child.label;\n let childLast = $last\n ) {\n @if (child.type === 'group') {\n <!-- Nested group -->\n @if (panelStates[child.label]) {\n @let childState = panelStates[child.label];\n <div class=\"pl-5\" [class.has-border-bottom]=\"!childLast\">\n <div [class.is-active]=\"childState.expanded\">\n <div\n class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n (click)=\"childState.expanded = !childState.expanded\">\n <label\n class=\"checkbox is-flex is-justify-content-center is-align-items-center mr-3\"\n (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n [checked]=\"isGroupFullySelected(child)\"\n [indeterminate]=\"isGroupPartiallySelected(child)\"\n (change)=\"toggleGroup(child)\"\n [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\" />\n </label>\n\n <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n {{ removeCountFromLabel(child.label) }}\n </span>\n\n <he-svg-icon\n class=\"has-text-secondary transition-transform\"\n [class.is-rotated-180]=\"childState.expanded\"\n [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\" />\n </div>\n\n <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"childState.expanded\"\n [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n <div class=\"filter-accordion__panel-inner\">\n <div class=\"filter-accordion__search\" [class.d-none]=\"optionsFromGroup(child).length < 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 is-size-7 search-input\"\n placeholder=\"Search {{ removeCountFromLabel(child.label) }}\"\n [value]=\"childState.searchTerm || ''\"\n [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n (input)=\"childState.searchTerm = $any($event.target).value\" />\n <a\n class=\"icon is-small is-right\"\n [class.is-hidden]=\"!childState.searchTerm\"\n (click)=\"childState.searchTerm = ''\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small is-right\" [class.is-hidden]=\"childState.searchTerm\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n </div>\n <div>\n @for (\n nestedOption of getFilteredOptions(\n child,\n search() || childState.searchTerm || groupState.searchTerm\n );\n track nestedOption.trackId || nestedOption.label;\n let nestedLast = $last\n ) {\n <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!nestedLast\">\n <ng-container\n *ngTemplateOutlet=\"\n optionLabel;\n context: {\n item: nestedOption,\n parentDisabled: isItemEffectivelyDisabled(\n child,\n isItemEffectivelyDisabled(item)\n )\n }\n \" />\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n } @else {\n <!-- Direct option -->\n <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!childLast\">\n <ng-container\n *ngTemplateOutlet=\"\n optionLabel;\n context: { item: child, parentDisabled: isItemEffectivelyDisabled(item) }\n \" />\n </div>\n }\n }\n\n @if (\n (search() || groupState.searchTerm) &&\n getFilteredDirectChildren(item, search() || groupState.searchTerm).length === 0\n ) {\n <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n No results found for \"{{ search() || groupState.searchTerm }}\"\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n }\n }\n\n @if (item.type === 'option') {\n <div class=\"is-flex is-justify-content-space-between has-border-bottom accordion-row\">\n <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n </div>\n }\n}\n\n<ng-template #itemLabel let-item=\"item\">\n <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n <span>{{ removeCountFromLabel(item.label) }}</span>\n\n @if (item.tooltip) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light is-pl-2\"\n [ngbTooltip]=\"item.tooltip\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\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(item)\"\n [indeterminate]=\"isGroupPartiallySelected(item)\"\n (change)=\"toggleGroup(item)\"\n [disabled]=\"isItemEffectivelyDisabled(item)\" />\n </label>\n\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\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 }\" />\n\n @let count = getOptionCountFn()(item.value);\n @if (isNumber(count)) {\n <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n }\n </label>\n</ng-template>\n", styles: [".clear-button{color:#4c7194}.accordion-row{padding:4px 0;min-height:25px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.control{height:28px}.search-input{height:28px;border-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;color:#b5b5b5;box-shadow:none!important}.filter-accordion__panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);will-change:grid-template-rows}.filter-accordion__panel-content--expanded{grid-template-rows:1fr}.filter-accordion__panel-inner{min-height:0;overflow:hidden}.filter-accordion__panel-content--expanded .filter-accordion__panel-inner{overflow-y:hidden;max-height:var(--max-height, none)}.filter-accordion__search{opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility 0s .15s}.filter-accordion__panel-content--expanded .filter-accordion__search{opacity:1;visibility:visible;transition:opacity .2s ease-in .1s,visibility 0s 0s}.has-background-hover-light:hover{background-color:#fafafa}.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:2px;appearance:none;-webkit-appearance:none;cursor:pointer;background-color:transparent;accent-color:transparent}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"] }]
13484
+ ], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip, NgTemplateOutlet], template: "<div\n class=\"is-flex is-justify-content-space-between is-gap-16 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n <div class=\"is-flex is-align-items-center\">\n <h3 class=\"title is-size-6 has-text-secondary mr-1 mb-0\">{{ title() }}</h3>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </div>\n\n <ng-content select=\"[header-content]\" />\n\n @if (showClearAll()) {\n <span class=\"is-clickable is-size-7 mb-1 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n Clear all\n </span>\n }\n\n @if (showGlobalSearch()) {\n <div class=\"field is-mb-0 pb-2 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 <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"search.set('')\">\n <he-svg-icon name=\"xmark\" />\n </a>\n <a class=\"icon is-small has-text-secondary is-right\" [class.is-hidden]=\"search()\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n</div>\n\n<div class=\"has-border-bottom\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: { group: { options: filterStore.filteredData() }, parentSearch: search() }\n \" />\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\">\n @let items = getFilteredDirectChildren(group, parentSearch);\n\n @for (item of items; 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 <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\"\n [style.--max-height]=\"groupMaxHeight() ? groupMaxHeight() + 'px' : 'none'\">\n <div class=\"filter-accordion__panel-inner\">\n <div class=\"filter-accordion__search\" [class.d-none]=\"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 {{ removeCountFromLabel(item.label) }}\"\n [value]=\"groupState.searchTerm || ''\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n (input)=\"groupState.searchTerm = $any($event.target).value\" />\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 </div>\n\n <div class=\"pl-5\">\n <ng-container\n *ngTemplateOutlet=\"\n itemsList;\n context: { group: item, parentSearch: parentSearch || groupState.searchTerm }\n \" />\n </div>\n </div>\n </div>\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) {\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\">\n <span class=\"is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n <span>{{ removeCountFromLabel(item.label) }}</span>\n\n @if (item.tooltip) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey-light is-pl-2\"\n [ngbTooltip]=\"item.tooltip\"\n placement=\"top\"\n triggers=\"hover\"\n size=\"16\"\n container=\"body\" />\n }\n </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\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(item)\"\n [indeterminate]=\"isGroupPartiallySelected(item)\"\n (change)=\"toggleGroup(item)\"\n [disabled]=\"isItemEffectivelyDisabled(item)\" />\n </label>\n\n <ng-container *ngTemplateOutlet=\"itemLabel; context: { item }\" />\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 }\" />\n\n @let count = getOptionCountFn()(item.value);\n @if (isNumber(count)) {\n <span class=\"has-text-grey-light is-size-7 ml-2\">({{ count }})</span>\n }\n </label>\n</ng-template>\n", styles: [".clear-button{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-radius:3px;border:1px solid #dbe3ea;font-weight:400;line-height:17px;box-shadow:none!important}.filter-accordion__panel-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);will-change:grid-template-rows}.filter-accordion__panel-content--expanded{grid-template-rows:1fr}.filter-accordion__panel-inner{min-height:0;overflow:hidden}.filter-accordion__panel-content--expanded .filter-accordion__panel-inner{overflow-y:hidden;max-height:var(--max-height, none)}.filter-accordion__search{opacity:0;visibility:hidden;transition:opacity .15s ease-out,visibility 0s .15s}.filter-accordion__panel-content--expanded .filter-accordion__search{opacity:1;visibility:visible;transition:opacity .2s ease-in .1s,visibility 0s 0s}.has-background-hover-light:hover{background-color:#fafafa}.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:2px;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"] }]
13480
13485
  }], ctorParameters: () => [] });
13481
13486
 
13482
13487
  const sortedPoints = (values) => Object.entries(values)