@hestia-earth/ui-components 0.34.1 → 0.34.2
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.
|
@@ -12474,7 +12474,7 @@ const countDirectChildren = (group) => allOptions(group).length;
|
|
|
12474
12474
|
class FilterAccordionComponent extends ControlValueAccessor {
|
|
12475
12475
|
constructor() {
|
|
12476
12476
|
super();
|
|
12477
|
-
this.filterStore = inject(FilterStore);
|
|
12477
|
+
this.filterStore = inject((FilterStore));
|
|
12478
12478
|
/**
|
|
12479
12479
|
* Show the header, with title and global clear/search.
|
|
12480
12480
|
*/
|
|
@@ -12515,6 +12515,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
|
|
|
12515
12515
|
* @returns List of values.
|
|
12516
12516
|
*/
|
|
12517
12517
|
this.selectedValues = () => (this.selectControl.value || []);
|
|
12518
|
+
this.hasSelectedValues = signal(false);
|
|
12518
12519
|
this.isNumber = isNumber;
|
|
12519
12520
|
this.optionsFromGroup = optionsFromGroup;
|
|
12520
12521
|
this.getDirectOptionsCount = getDirectOptionsCount;
|
|
@@ -12522,6 +12523,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
|
|
|
12522
12523
|
this.countDirectChildren = countDirectChildren;
|
|
12523
12524
|
this.search = signal('');
|
|
12524
12525
|
this.group = computed(() => ({ options: this.filterStore.filteredData() }));
|
|
12526
|
+
this.disabledValues = computed(() => disabledValues(this.data()));
|
|
12525
12527
|
effect(() => this.data() && this.filterStore.setData(this.data()));
|
|
12526
12528
|
effect(() => (this.panelStates = Object.fromEntries(allGroups(this.data()).map(({ label }) => [
|
|
12527
12529
|
label,
|
|
@@ -12543,6 +12545,9 @@ class FilterAccordionComponent extends ControlValueAccessor {
|
|
|
12543
12545
|
this.selectControl.setValue(value, { emitEvent: false });
|
|
12544
12546
|
this.onChange(value);
|
|
12545
12547
|
this.selectionChanged.emit(value);
|
|
12548
|
+
const disabledValues = this.disabledValues();
|
|
12549
|
+
const nonDisabledValues = value.filter(v => !disabledValues.includes(v));
|
|
12550
|
+
this.hasSelectedValues.set(nonDisabledValues.length > 0);
|
|
12546
12551
|
!this.preserveOptionsOnSelection() &&
|
|
12547
12552
|
(this.panelStates = Object.fromEntries(Object.entries(this.panelStates).map(([id, value]) => [
|
|
12548
12553
|
id,
|
|
@@ -12561,9 +12566,9 @@ class FilterAccordionComponent extends ControlValueAccessor {
|
|
|
12561
12566
|
*/
|
|
12562
12567
|
clearAll() {
|
|
12563
12568
|
// only keep the disabled selected values
|
|
12564
|
-
const
|
|
12569
|
+
const disabledValues = this.disabledValues();
|
|
12565
12570
|
const selectedValues = this.selectedValues();
|
|
12566
|
-
this.onSelectionChange(selectedValues.filter(value =>
|
|
12571
|
+
this.onSelectionChange(selectedValues.filter(value => disabledValues.includes(value)));
|
|
12567
12572
|
}
|
|
12568
12573
|
isOptionSelected(value) {
|
|
12569
12574
|
const currentValue = this.selectedValues();
|
|
@@ -12612,7 +12617,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
|
|
|
12612
12617
|
multi: true
|
|
12613
12618
|
},
|
|
12614
12619
|
FilterStore
|
|
12615
|
-
], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\n <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 <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 <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 (input)=\"onSearch($event.target.value, group())\" />\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 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-bottom\">\n <ng-container *ngTemplateOutlet=\"itemsList; context: { group: group(), parentSearch: search() }\" />\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 @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n <div class=\"filter-accordion__search\">\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 </div>\n }\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\" 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 is-ml-1\"\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 ml-2\">({{ count }})</span>\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\n *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? countDirectChildren(item) : 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:#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 }); }
|
|
12620
|
+
], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\n <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 <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 <ng-content select=\"[header-content]\" />\n\n @if (showClearAll()) {\n <span\n class=\"is-size-7 mb-1 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 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 (input)=\"onSearch($event.target.value, group())\" />\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 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-bottom\">\n <ng-container *ngTemplateOutlet=\"itemsList; context: { group: group(), parentSearch: search() }\" />\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 @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n <div class=\"filter-accordion__search\">\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 </div>\n }\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\" 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 is-ml-1\"\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 ml-2\">({{ count }})</span>\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\n *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? countDirectChildren(item) : 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-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 }); }
|
|
12616
12621
|
}
|
|
12617
12622
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilterAccordionComponent, decorators: [{
|
|
12618
12623
|
type: Component$1,
|
|
@@ -12623,7 +12628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
|
|
|
12623
12628
|
multi: true
|
|
12624
12629
|
},
|
|
12625
12630
|
FilterStore
|
|
12626
|
-
], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip, NgTemplateOutlet], template: "@if (showHeader()) {\n <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 <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 <ng-content select=\"[header-content]\" />\n\n @if (showClearAll()) {\n <span
|
|
12631
|
+
], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip, NgTemplateOutlet], template: "@if (showHeader()) {\n <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 <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 <ng-content select=\"[header-content]\" />\n\n @if (showClearAll()) {\n <span\n class=\"is-size-7 mb-1 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 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 (input)=\"onSearch($event.target.value, group())\" />\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 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-bottom\">\n <ng-container *ngTemplateOutlet=\"itemsList; context: { group: group(), parentSearch: search() }\" />\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 @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n <div class=\"filter-accordion__search\">\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 </div>\n }\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\" 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 is-ml-1\"\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 ml-2\">({{ count }})</span>\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\n *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? countDirectChildren(item) : 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-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"] }]
|
|
12627
12632
|
}], ctorParameters: () => [] });
|
|
12628
12633
|
|
|
12629
12634
|
const sortedPoints = (values) => Object.entries(values)
|