@hestia-earth/ui-components 0.32.38 → 0.32.39
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.
|
@@ -13255,7 +13255,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
|
|
|
13255
13255
|
multi: true
|
|
13256
13256
|
},
|
|
13257
13257
|
FilterStore
|
|
13258
|
-
], usesInheritance: true, ngImport: i0, template: "<div>\n <div\n class=\"is-flex is-justify-content-space-between gap-13 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-2 mb-0\">{{ title() }}</h3>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"top\"\n triggers=\"hover\"\n container=\"body\"></he-svg-icon>\n }\n </div>\n @if (showClearAll()) {\n <span class=\"is-clickable is-size-7 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n Clear all\n </span>\n }\n </div>\n\n <div>\n @for (item of filterStore.filteredData(); track item.trackId || item.label) {\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 <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n [checked]=\"isGroupFullySelected(item)\"\n [indeterminate]=\"isGroupPartiallySelected(item)\"\n (change)=\"toggleGroup(item)\"\n [disabled]=\"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(item.label) }}\n </span>\n\n <he-svg-icon\n class=\"has-text-grey transition-transform\"\n [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n </div>\n\n <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\">\n @if (groupState.expanded && getDirectOptionsCount(item) > 5) {\n <div class=\"field is-mb-0 pb-2 has-border-bottom\">\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=\"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 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 is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n\n <div>\n @for (\n child of getFilteredDirectChildren(item, 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 class=\"checkbox mr-3\" (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-grey transition-transform\"\n [class.is-rotated-180]=\"childState.expanded\"\n [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n </div>\n\n <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"childState.expanded\">\n @if (childState.expanded && 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\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small 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 }\n <div>\n @for (\n nestedOption of getFilteredOptions(\n child,\n 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 <label\n class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n <input\n type=\"checkbox\"\n [checked]=\"isOptionSelected(nestedOption.value)\"\n (change)=\"toggleOption(nestedOption.value)\"\n [disabled]=\"isItemEffectivelyDisabled(nestedOption, isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item)))\"\n class=\"mr-3\" />\n\n <span class=\"is-flex-grow-1\">\n {{ removeCountFromLabel(nestedOption.label) }}\n </span>\n\n <span class=\"has-text-grey is-size-7 ml-2\">\n ({{ getOptionCount(nestedOption.value) }})\n </span>\n </label>\n </div>\n }\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 <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n <input\n type=\"checkbox\"\n [checked]=\"isOptionSelected(child.value)\"\n (change)=\"toggleOption(child.value)\"\n [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n class=\"mr-3\" />\n\n <span class=\"is-flex-grow-1\">\n {{ removeCountFromLabel(child.label) }}\n </span>\n\n <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(child.value) }})</span>\n </label>\n </div>\n }\n }\n\n @if (getFilteredDirectChildren(item, groupState.searchTerm).length === 0 && groupState.searchTerm) {\n <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n No results found for \"{{ groupState.searchTerm }}\"\n </div>\n }\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 <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-full is-size-7 has-text-grey-dark\">\n <input\n type=\"checkbox\"\n [checked]=\"isOptionSelected(item.value)\"\n (change)=\"toggleOption(item.value)\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n class=\"mr-3\" />\n\n <span class=\"is-flex-grow-1\">\n {{ removeCountFromLabel(item.label) }}\n </span>\n </label>\n <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(item.value) }})</span>\n </div>\n }\n }\n </div>\n</div>\n", styles: [".gap-13{gap:13px}.clear-button{color:#4c7194}.accordion-row{padding:4px 0}.filter-accordion__panel-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.filter-accordion__panel-content--expanded{max-height:500px;overflow-y:auto}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s}@media screen and (max-width: 768px){.filter-accordion__panel-content--expanded{max-height:400px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13258
|
+
], usesInheritance: true, ngImport: i0, template: "<div>\n <div\n class=\"is-flex is-justify-content-space-between gap-13 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-2 mb-0\">{{ title() }}</h3>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"top\"\n triggers=\"hover\"\n container=\"body\"></he-svg-icon>\n }\n </div>\n @if (showClearAll()) {\n <span class=\"is-clickable is-size-7 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n Clear all\n </span>\n }\n </div>\n\n <div>\n @for (item of filterStore.filteredData(); track item.trackId || item.label) {\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 <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n [checked]=\"isGroupFullySelected(item)\"\n [indeterminate]=\"isGroupPartiallySelected(item)\"\n (change)=\"toggleGroup(item)\"\n [disabled]=\"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(item.label) }}\n </span>\n\n <he-svg-icon\n class=\"has-text-secondary transition-transform\"\n [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n </div>\n\n <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\">\n @if (groupState.expanded && getDirectOptionsCount(item) > 5) {\n <div class=\"field is-mb-0 pb-2 has-border-bottom\">\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=\"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 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 is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n\n <div>\n @for (\n child of getFilteredDirectChildren(item, 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 class=\"checkbox mr-3\" (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'\"></he-svg-icon>\n </div>\n\n <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"childState.expanded\">\n @if (childState.expanded && 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\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small 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 }\n <div>\n @for (\n nestedOption of getFilteredOptions(\n child,\n 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 <label\n class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n <input\n type=\"checkbox\"\n [checked]=\"isOptionSelected(nestedOption.value)\"\n (change)=\"toggleOption(nestedOption.value)\"\n [disabled]=\"isItemEffectivelyDisabled(nestedOption, isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item)))\"\n class=\"mr-3\" />\n\n <span class=\"is-flex-grow-1\">\n {{ removeCountFromLabel(nestedOption.label) }}\n </span>\n\n <span class=\"has-text-grey is-size-7 ml-2\">\n ({{ getOptionCount(nestedOption.value) }})\n </span>\n </label>\n </div>\n }\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 <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n <input\n type=\"checkbox\"\n [checked]=\"isOptionSelected(child.value)\"\n (change)=\"toggleOption(child.value)\"\n [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n class=\"mr-3\" />\n\n <span class=\"is-flex-grow-1\">\n {{ removeCountFromLabel(child.label) }}\n </span>\n\n <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(child.value) }})</span>\n </label>\n </div>\n }\n }\n\n @if (getFilteredDirectChildren(item, groupState.searchTerm).length === 0 && groupState.searchTerm) {\n <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n No results found for \"{{ groupState.searchTerm }}\"\n </div>\n }\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 <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-full is-size-7 has-text-grey-dark\">\n <input\n type=\"checkbox\"\n [checked]=\"isOptionSelected(item.value)\"\n (change)=\"toggleOption(item.value)\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n class=\"mr-3\" />\n\n <span class=\"is-flex-grow-1\">\n {{ removeCountFromLabel(item.label) }}\n </span>\n </label>\n <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(item.value) }})</span>\n </div>\n }\n }\n </div>\n</div>\n", styles: [".gap-13{gap:13px}.clear-button{color:#4c7194}.accordion-row{padding:4px 0}.filter-accordion__panel-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.filter-accordion__panel-content--expanded{max-height:500px;overflow-y:auto}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s}@media screen and (max-width: 768px){.filter-accordion__panel-content--expanded{max-height:400px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13259
13259
|
}
|
|
13260
13260
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilterAccordionComponent, decorators: [{
|
|
13261
13261
|
type: Component$1,
|
|
@@ -13266,7 +13266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
13266
13266
|
multi: true
|
|
13267
13267
|
},
|
|
13268
13268
|
FilterStore
|
|
13269
|
-
], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip], template: "<div>\n <div\n class=\"is-flex is-justify-content-space-between gap-13 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-2 mb-0\">{{ title() }}</h3>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"top\"\n triggers=\"hover\"\n container=\"body\"></he-svg-icon>\n }\n </div>\n @if (showClearAll()) {\n <span class=\"is-clickable is-size-7 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n Clear all\n </span>\n }\n </div>\n\n <div>\n @for (item of filterStore.filteredData(); track item.trackId || item.label) {\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 <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n [checked]=\"isGroupFullySelected(item)\"\n [indeterminate]=\"isGroupPartiallySelected(item)\"\n (change)=\"toggleGroup(item)\"\n [disabled]=\"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(item.label) }}\n </span>\n\n <he-svg-icon\n class=\"has-text-grey transition-transform\"\n [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n </div>\n\n <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\">\n @if (groupState.expanded && getDirectOptionsCount(item) > 5) {\n <div class=\"field is-mb-0 pb-2 has-border-bottom\">\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=\"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 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 is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n\n <div>\n @for (\n child of getFilteredDirectChildren(item, 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 class=\"checkbox mr-3\" (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-grey transition-transform\"\n [class.is-rotated-180]=\"childState.expanded\"\n [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n </div>\n\n <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"childState.expanded\">\n @if (childState.expanded && 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\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small 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 }\n <div>\n @for (\n nestedOption of getFilteredOptions(\n child,\n 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 <label\n class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n <input\n type=\"checkbox\"\n [checked]=\"isOptionSelected(nestedOption.value)\"\n (change)=\"toggleOption(nestedOption.value)\"\n [disabled]=\"isItemEffectivelyDisabled(nestedOption, isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item)))\"\n class=\"mr-3\" />\n\n <span class=\"is-flex-grow-1\">\n {{ removeCountFromLabel(nestedOption.label) }}\n </span>\n\n <span class=\"has-text-grey is-size-7 ml-2\">\n ({{ getOptionCount(nestedOption.value) }})\n </span>\n </label>\n </div>\n }\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 <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n <input\n type=\"checkbox\"\n [checked]=\"isOptionSelected(child.value)\"\n (change)=\"toggleOption(child.value)\"\n [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n class=\"mr-3\" />\n\n <span class=\"is-flex-grow-1\">\n {{ removeCountFromLabel(child.label) }}\n </span>\n\n <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(child.value) }})</span>\n </label>\n </div>\n }\n }\n\n @if (getFilteredDirectChildren(item, groupState.searchTerm).length === 0 && groupState.searchTerm) {\n <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n No results found for \"{{ groupState.searchTerm }}\"\n </div>\n }\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 <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-full is-size-7 has-text-grey-dark\">\n <input\n type=\"checkbox\"\n [checked]=\"isOptionSelected(item.value)\"\n (change)=\"toggleOption(item.value)\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n class=\"mr-3\" />\n\n <span class=\"is-flex-grow-1\">\n {{ removeCountFromLabel(item.label) }}\n </span>\n </label>\n <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(item.value) }})</span>\n </div>\n }\n }\n </div>\n</div>\n", styles: [".gap-13{gap:13px}.clear-button{color:#4c7194}.accordion-row{padding:4px 0}.filter-accordion__panel-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.filter-accordion__panel-content--expanded{max-height:500px;overflow-y:auto}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s}@media screen and (max-width: 768px){.filter-accordion__panel-content--expanded{max-height:400px}}\n"] }]
|
|
13269
|
+
], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip], template: "<div>\n <div\n class=\"is-flex is-justify-content-space-between gap-13 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-2 mb-0\">{{ title() }}</h3>\n @if (tooltip()) {\n <he-svg-icon\n name=\"info-circle\"\n class=\"has-text-grey\"\n [ngbTooltip]=\"tooltip()\"\n placement=\"top\"\n triggers=\"hover\"\n container=\"body\"></he-svg-icon>\n }\n </div>\n @if (showClearAll()) {\n <span class=\"is-clickable is-size-7 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n Clear all\n </span>\n }\n </div>\n\n <div>\n @for (item of filterStore.filteredData(); track item.trackId || item.label) {\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 <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n [checked]=\"isGroupFullySelected(item)\"\n [indeterminate]=\"isGroupPartiallySelected(item)\"\n (change)=\"toggleGroup(item)\"\n [disabled]=\"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(item.label) }}\n </span>\n\n <he-svg-icon\n class=\"has-text-secondary transition-transform\"\n [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n </div>\n\n <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\">\n @if (groupState.expanded && getDirectOptionsCount(item) > 5) {\n <div class=\"field is-mb-0 pb-2 has-border-bottom\">\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=\"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 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 is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n <he-svg-icon name=\"search\" />\n </a>\n </div>\n </div>\n }\n\n <div>\n @for (\n child of getFilteredDirectChildren(item, 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 class=\"checkbox mr-3\" (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'\"></he-svg-icon>\n </div>\n\n <div\n class=\"filter-accordion__panel-content\"\n [class.filter-accordion__panel-content--expanded]=\"childState.expanded\">\n @if (childState.expanded && 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\">\n <input\n type=\"text\"\n class=\"input is-secondary is-small 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 }\n <div>\n @for (\n nestedOption of getFilteredOptions(\n child,\n 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 <label\n class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n <input\n type=\"checkbox\"\n [checked]=\"isOptionSelected(nestedOption.value)\"\n (change)=\"toggleOption(nestedOption.value)\"\n [disabled]=\"isItemEffectivelyDisabled(nestedOption, isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item)))\"\n class=\"mr-3\" />\n\n <span class=\"is-flex-grow-1\">\n {{ removeCountFromLabel(nestedOption.label) }}\n </span>\n\n <span class=\"has-text-grey is-size-7 ml-2\">\n ({{ getOptionCount(nestedOption.value) }})\n </span>\n </label>\n </div>\n }\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 <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n <input\n type=\"checkbox\"\n [checked]=\"isOptionSelected(child.value)\"\n (change)=\"toggleOption(child.value)\"\n [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n class=\"mr-3\" />\n\n <span class=\"is-flex-grow-1\">\n {{ removeCountFromLabel(child.label) }}\n </span>\n\n <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(child.value) }})</span>\n </label>\n </div>\n }\n }\n\n @if (getFilteredDirectChildren(item, groupState.searchTerm).length === 0 && groupState.searchTerm) {\n <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n No results found for \"{{ groupState.searchTerm }}\"\n </div>\n }\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 <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-full is-size-7 has-text-grey-dark\">\n <input\n type=\"checkbox\"\n [checked]=\"isOptionSelected(item.value)\"\n (change)=\"toggleOption(item.value)\"\n [disabled]=\"isItemEffectivelyDisabled(item)\"\n class=\"mr-3\" />\n\n <span class=\"is-flex-grow-1\">\n {{ removeCountFromLabel(item.label) }}\n </span>\n </label>\n <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(item.value) }})</span>\n </div>\n }\n }\n </div>\n</div>\n", styles: [".gap-13{gap:13px}.clear-button{color:#4c7194}.accordion-row{padding:4px 0}.filter-accordion__panel-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.filter-accordion__panel-content--expanded{max-height:500px;overflow-y:auto}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s}@media screen and (max-width: 768px){.filter-accordion__panel-content--expanded{max-height:400px}}\n"] }]
|
|
13270
13270
|
}], ctorParameters: () => [] });
|
|
13271
13271
|
|
|
13272
13272
|
const sortedPoints = (values) => Object.entries(values)
|