@hxui/angular
Version:
An Angular library based on the [HXUI design system](https://hxui.io).
122 lines • 60.3 kB
JavaScript
import { animate, state, style, transition, trigger, } from '@angular/animations';
import { Component, EventEmitter, Input, Output, QueryList, ViewChild, ViewChildren, } from '@angular/core';
import { DropdownDirective } from '../dropdown/dropdown.directive';
import { FilterType } from './filters-type.enum';
import * as i0 from "@angular/core";
import * as i1 from "../date-range-picker/date-range-picker.component";
import * as i2 from "../dropdown/dropdown.directive";
import * as i3 from "../dropdown/dropdown-toggle.directive";
import * as i4 from "../dropdown/dropdown-menu.directive";
import * as i5 from "@angular/common";
import * as i6 from "@angular/forms";
import * as i7 from "../dropdown/dropdown-item.directive";
export class FiltersCollapsedComponent {
constructor() {
this.FilterType = FilterType;
this.activePane = 'left';
this.data = [];
this.onFilter = new EventEmitter();
this.onSearchFilter = new EventEmitter();
this.onDateRangePickerFilter = new EventEmitter();
this.onBack = new EventEmitter();
}
getIntervalOptions(options) {
const intervalOption = [];
if (options) {
for (let i = 0; i < options.length; i++) {
intervalOption.push(options[i].label);
}
}
return intervalOption;
}
clearSearch(filter) {
filter.value = '';
this.onSearchFilter.emit({ filter: filter, value: filter.value });
}
changeFilterSelection(filter) {
this.selectedFilter = filter;
this.activePane = 'right';
}
selectFilterOption(option, goBack = true) {
this.onFilter.emit({ filter: this.selectedFilter, option: option });
if (goBack) {
this.back();
}
}
searchFilter(filter) {
this.onSearchFilter.emit({ filter: filter });
}
back() {
this.activePane = 'left';
this.onBack.emit({ filter: this.selectedFilter });
}
onSlideDone($event) {
if ($event.toState === 'left') {
this.selectedFilter = null;
}
}
totalActiveFilters() {
let count = 0;
this.data.forEach((filter, index) => {
if (filter.type === FilterType.SingleSelect ||
(filter.type === FilterType.MultiSelect &&
filter.selected.length !== 0 &&
filter.selected.length < filter.options.length - 1) ||
(filter.type === FilterType.Search && filter.value) ||
(filter.type === FilterType.DateRange && filter.sourceValue)) {
count++;
}
});
return count;
}
getFilterLabel() {
const plural = this.totalActiveFilters() > 1 ? 'filters' : 'filter';
return this.totalActiveFilters() > 0
? this.totalActiveFilters() + ` ${plural} applied`
: `Filters`;
}
onDateRangeFilterChange(filter, dateRange) {
this.onDateRangePickerFilter.emit({ filter, dateRange });
}
/**
* Used for track by and boost performance
*/
trackByFn(index, action) {
return index;
}
}
FiltersCollapsedComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FiltersCollapsedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
FiltersCollapsedComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FiltersCollapsedComponent, selector: "hxa-filters-collapsed", inputs: { data: "data" }, outputs: { onFilter: "onFilter", onSearchFilter: "onSearchFilter", onDateRangePickerFilter: "onDateRangePickerFilter", onBack: "onBack" }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "dateRangePickers", predicate: ["dateRangePicker"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"hx-dropdown ml-1 collapsedFilter\"\r\n #dropdown=\"hx-dropdown\"\r\n hxaDropdown\r\n [autoClose]=\"false\"\r\n>\r\n <button\r\n id=\"collapsedFilterTrigger\"\r\n type=\"button\"\r\n class=\"hx-button hx-button-dropdown\"\r\n hxaDropdownToggle\r\n >\r\n <span>{{ getFilterLabel() }}</span>\r\n <span class=\"hx-icon-control\"><i class=\"icon icon-caret-down\"></i></span>\r\n </button>\r\n\r\n <div\r\n class=\"hx-dropdown-menu has-limited-width collapsedFilter__menu panes\"\r\n *hxaDropdownMenu\r\n >\r\n <ul\r\n class=\"panes__inner\"\r\n [@slide]=\"activePane\"\r\n (@slide.done)=\"onSlideDone($event)\"\r\n >\r\n <!-- SUMMARY -->\r\n <li id=\"filterSelections\" class=\"panes__item\">\r\n <ng-container\r\n *ngFor=\"\r\n let filter of data;\r\n trackBy: trackByFn;\r\n let lastItem = last;\r\n index as idx\r\n \"\r\n >\r\n <!-- SINGLE-/MULTI- SELECT -->\r\n <ng-container\r\n *ngIf=\"(filter.type === FilterType.SingleSelect || filter.type === FilterType.MultiSelect) && !filter?.hidden\"\r\n >\r\n <button\r\n [id]=\"filter?.id + '-trigger'\"\r\n (click)=\"changeFilterSelection(filter)\"\r\n title=\"{{filter.getSelectedLabel()}}\"\r\n class=\"filter__item collapsedFilter__summaryItem\"\r\n [class.is-disabled]=\"filter?.disabled\"\r\n >\r\n <div class=\"filter__itemLabel\">\r\n <span class=\"is-text-weight-light\"\r\n >{{filter?.label}}: </span\r\n >\r\n <span class=\"is-text-weight-bolder\"\r\n >{{filter?.getSelectedLabel()}}</span\r\n >\r\n </div>\r\n\r\n <span\r\n class=\"hx-icon-control filter__itemIcon collapsedFilter__action\"\r\n aria-hidden=\"true\"\r\n >\r\n <i class=\"hx-icon icon-angle-right\"></i>\r\n </span>\r\n </button>\r\n </ng-container>\r\n\r\n <!-- SEARCH -->\r\n <ng-container\r\n *ngIf=\"filter.type === FilterType.Search && !filter?.hidden\"\r\n >\r\n <div\r\n [id]=\"filter.id\"\r\n class=\"hx-input-group collapsedFilter__search\"\r\n >\r\n <i class=\"hx-icon icon-search mt-1\"></i>\r\n <div class=\"hx-input-control my-0\">\r\n <input\r\n class=\"hx-input\"\r\n type=\"search\"\r\n (input)=\"searchFilter(filter)\"\r\n [(ngModel)]=\"filter.value\"\r\n [placeholder]=\"filter.label\"\r\n [disabled]=\"filter?.disabled\"\r\n />\r\n <label class=\"hx-label\"></label>\r\n <div class=\"hx-help\"></div>\r\n </div>\r\n <div class=\"hx-input-actions\" *ngIf=\"filter.value\">\r\n <div class=\"hx-button-group\">\r\n <button\r\n class=\"hx-button is-flat\"\r\n (click)=\"clearSearch(filter)\"\r\n >\r\n <span class=\"hx-icon-control\"\r\n ><i class=\"icon icon-close-empty\"></i\r\n ></span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- DATE-RANGE -->\r\n <ng-container *ngIf=\"filter.type === FilterType.DateRange\">\r\n <div\r\n [id]=\"filter?.id + '-trigger'\"\r\n title=\"{{filter.selected?.label}}\"\r\n class=\"collapsedFilter__dateRange\"\r\n >\r\n <hxa-date-range-picker\r\n [dateFormat]=\"filter.dateRangePickerDisplayDateFormat\"\r\n [displayMode]=\"filter.dateRangePickerDisplayMode\"\r\n [intervalOptions]=\"getIntervalOptions(filter.options)\"\r\n [defaultDateRange]=\"filter.sourceValue\"\r\n [id]=\"filter?.id + '-dateRangePicker'\"\r\n [showCaretDown]=\"true\"\r\n [placeholder]=\"filter.label\"\r\n (onDateRangeSelected)=\"onDateRangeFilterChange(filter,$event)\"\r\n #dateRangePicker\r\n ></hxa-date-range-picker>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </li>\r\n\r\n <!-- DETAIL -->\r\n <li id=\"filterOptions\" class=\"panes__item\">\r\n <button\r\n id=\"paneBack\"\r\n class=\"filter__item collapsedFilter__detailHeader\"\r\n (click)=\"back()\"\r\n >\r\n <span\r\n class=\"hx-icon-control filter__itemIcon collapsedFilter__action\"\r\n aria-hidden=\"true\"\r\n >\r\n <i class=\"hx-icon icon-angle-left\"></i>\r\n </span>\r\n <span class=\"is-screen-reader-only\">Back</span>\r\n\r\n <div class=\"filter__itemLabel\">\r\n <span class=\"is-text-weight-light\"\r\n >{{selectedFilter?.label}}: </span\r\n >\r\n <span class=\"is-text-weight-bolder\"\r\n >{{selectedFilter?.getSelectedLabel()}}</span\r\n >\r\n </div>\r\n </button>\r\n\r\n <ul\r\n [id]=\"selectedFilter?.id + '-options'\"\r\n class=\"hx-list-group options\"\r\n >\r\n <li\r\n class=\"options__item\"\r\n role=\"none\"\r\n *ngFor=\"\r\n let option of selectedFilter?.options;\r\n trackBy: trackByFn;\r\n let i = index\r\n \"\r\n >\r\n <!-- SINGLE-SELECT -->\r\n <ng-container\r\n *ngIf=\"selectedFilter?.type === FilterType.SingleSelect\"\r\n >\r\n <button\r\n hxaDropdownItem\r\n (click)=\"selectFilterOption(option)\"\r\n title=\"{{option?.label}}\"\r\n class=\"is-text-ellipsed filter__item\"\r\n [class.selected]=\"option.selected\"\r\n >\r\n <span\r\n class=\"hx-icon-control filter__itemIcon\"\r\n *ngIf=\"option?.icon\"\r\n aria-hidden=\"true\"\r\n >\r\n <i class=\"{{ option?.icon }}\"></i>\r\n </span>\r\n <span class=\"filter__itemLabel\"> {{ option?.label }} </span>\r\n </button>\r\n </ng-container>\r\n\r\n <!-- MULTI-SELECT -->\r\n <ng-container\r\n *ngIf=\"selectedFilter?.type === FilterType.MultiSelect\"\r\n >\r\n <label\r\n class=\"is-text-ellipsed filter__item--multi\"\r\n title=\"{{ option?.label }}\"\r\n [class.is-perforated]=\"i === 0\"\r\n [class.selected]=\"option.selected && i > 0\"\r\n [class.is-select-all]=\"i === 0\"\r\n [for]=\"selectedFilter?.id + '-checkbox-' + i\"\r\n >\r\n <input\r\n [name]=\"selectedFilter?.id + '-checkbox-' + i\"\r\n type=\"checkbox\"\r\n [id]=\"selectedFilter?.id + '-checkbox-' + i\"\r\n (change)=\"selectFilterOption(option, false)\"\r\n [class.indeterminate]=\"\r\n option?.value === selectedFilter?.selectAllValue &&\r\n selectedFilter?.selectAllState.indeterminate\r\n \"\r\n [checked]=\"option.selected\"\r\n />\r\n <span\r\n class=\"hx-icon-control filter__itemIcon\"\r\n *ngIf=\"option?.icon\"\r\n aria-hidden=\"true\"\r\n >\r\n <i class=\"{{ option?.icon }}\"></i>\r\n </span>\r\n <span\r\n class=\"filter__itemLabel\"\r\n [class.is-text-weight-boldest]=\"i === 0\"\r\n >\r\n {{ option?.label }}\r\n </span>\r\n </label>\r\n </ng-container>\r\n </li>\r\n </ul>\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n", styles: [":host .expandedFilter__button{max-width:15rem;min-width:7.2rem}.expandedFilter__menu{padding:4px 0}.expandedFilter__search .hx-icon{margin-top:-.125rem}.expandedFilter__search .hx-input-control{margin:0}.expandedFilter__search .hx-input{height:2.25em}.expandedFilter__search .hx-help{margin:0}.expandedFilter__search .hx-help:before,.expandedFilter__search .hx-help:after{top:-.15rem}.expandedFilter__search .hx-input-actions{top:0}.filter__item,.filter__item--multi{display:flex;align-items:center;padding:.2666666667rem 8px;margin:0;min-height:2.1333333333rem;gap:8px;border-radius:0;width:100%;font-weight:400;font-family:Roboto;font-size:.9333333333rem;line-height:1.3333333333rem;letter-spacing:0em;text-decoration:none;text-transform:none}.filter__item:focus,.filter__item--multi:focus,.filter__item:focus-visible,.filter__item--multi:focus-visible{outline:none}.filter__item:has(:focus-visible),.filter__item--multi:has(:focus-visible){outline-offset:2px;outline:#262626 solid 2px}.filter__item:hover,.filter__item--multi:hover{background-color:#0000000d;cursor:pointer}.filter__item.selected,.selected.filter__item--multi{background-color:#e1f5ed;color:#02694e}.filter__item:is([disabled],.is-disabled),.filter__item--multi:is([disabled],.is-disabled){border-color:#b3b3b3;background-color:#b3b3b3;cursor:not-allowed;transition:none}.filter__item:not([disabled],.is-disabled),.filter__item--multi:not([disabled],.is-disabled){cursor:pointer}.filter__item:where(button),.filter__item--multi:where(button),.filter__item :where(button),.filter__item--multi :where(button){background-color:transparent;border:0}.filter__item--multi.is-select-all{padding:.8rem 8px;min-height:3.2rem}.filter__item--multi input[type=checkbox]{-webkit-appearance:none;appearance:none;margin:0;width:1.3333333333rem;height:1.3333333333rem;border:2px solid #b3b3b3;background-color:#fff;display:inline-grid;place-content:center;border-radius:2px;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.filter__item--multi input[type=checkbox]:before{content:\"\";width:1.0666666667rem;height:1.0666666667rem;transform:scale(0);transition-property:transform,clip-path;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s;box-shadow:inset 1rem 1rem #fff;clip-path:polygon(10.46% 53.05%,0% 65%,34.93% 95.56%,100% 15%,88.13% 5.41%,33.42% 73.14%);transform-origin:center}.filter__item--multi input[type=checkbox]:checked{background-color:#41b987;border-color:#41b987}.filter__item--multi input[type=checkbox]:checked:before{transform:scale(1)}.filter__item--multi input[type=checkbox]:indeterminate,.filter__item--multi input[type=checkbox].indeterminate{background-color:#41b987;border-color:#41b987}.filter__item--multi input[type=checkbox]:indeterminate:before,.filter__item--multi input[type=checkbox].indeterminate:before{content:\"\";clip-path:polygon(0% 43.75%,100% 43.75%,100% 56.25%,0% 56.25%);transform:scale(1)}.filter__item--multi input[type=checkbox]:is([disabled],.is-disabled):checked:before{transition:none}.filter__itemIcon{position:relative;display:inline-flex;justify-content:center;align-items:center}.filter__itemIcon .hx-icon{font-size:20px;line-height:24px;position:relative;top:unset;left:unset}.filter__itemLabel{font-weight:400;font-family:Roboto;font-size:1.0666666667rem;line-height:1.6rem;letter-spacing:0em;text-decoration:none;text-transform:none;color:inherit;flex:1;text-align:left}:where(.is-elipsed,.is-text-elipsed,.is-text-ellipsed,.is-text-ellipsis) .filter__itemLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter__itemLabel :where(span){color:inherit;font:inherit}\n", ".collapsedFilter__menu{border:0;padding:4px 0}.collapsedFilter__menu .is-disabled{opacity:.3}.collapsedFilter__menu.panes{width:20rem;overflow:hidden;border:1px solid #cccccc}.collapsedFilter__menu.panes .panes__inner{display:flex;list-style:none;padding:0;margin:0}.collapsedFilter__menu.panes .panes__item{min-width:calc(20rem - 2px);max-width:calc(20rem - 2px);margin:0;max-height:20rem;overflow-y:auto;overflow-x:hidden}.collapsedFilter__dateRange{display:contents}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker{display:contents!important}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-dropdown{display:flex;border-bottom:1px solid #e6e6e6}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button{display:flex;align-items:center;padding:.2666666667rem 8px;margin:0;min-height:3.2rem;gap:8px;border-radius:0;width:100%;font-weight:400;font-family:Roboto;font-size:1.0666666667rem;line-height:1.6rem;letter-spacing:0em;text-decoration:none;text-transform:none}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:focus,.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:focus-visible{outline:none;border:none;box-shadow:none;border-style:none}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:has(:focus-visible){outline-offset:2px;outline:#262626 solid 2px}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:hover{background-color:#0000000d;cursor:pointer}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button.selected{background-color:#e1f5ed;color:#02694e}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:active{border:none;box-shadow:none;border-style:none;outline:none}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:is([disabled],.is-disabled){border-color:#b3b3b3;background-color:#b3b3b3;cursor:not-allowed;transition:none}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:not([disabled],.is-disabled){cursor:pointer}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:where(button),.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button :where(button){background-color:transparent;border:0}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button .hx-icon-control{position:relative;display:inline-flex;justify-content:center;align-items:center;margin:0}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button .hx-icon-control .icon{font-size:20px;line-height:24px}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button .hx-icon-control .icon-caret-down:before{content:\"\\e963\"}.collapsedFilter__summaryItem,.collapsedFilter__detailHeader,.collapsedFilter__search{display:flex;align-items:center;margin:0;gap:8px;border-radius:0;width:100%}.collapsedFilter__summaryItem{padding:.2666666667rem 8px;min-height:3.2rem;border-bottom:1px solid #e6e6e6}.collapsedFilter__detailHeader{padding:.2666666667rem 16px .2666666667rem 8px;min-height:3.2rem;border-bottom:1px solid #e6e6e6}.collapsedFilter__search{padding:.2666666667rem 8px;height:3.2rem}.collapsedFilter__search :where(.hx-input-control){width:100%}.collapsedFilter__action{background-color:transparent;border:0}.collapsedFilter__action .hx-icon{width:20px}.options__item{display:contents}.is-screen-reader-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"], components: [{ type: i1.DateRangePickerComponent, selector: "hxa-date-range-picker", inputs: ["intervalOptions", "placeholder", "disabled", "autoClose", "placement", "displayMode", "dateFormat", "defaultDateRange", "showCaretDown"], outputs: ["onDateRangeSelected"] }], directives: [{ type: i2.DropdownDirective, selector: "[hxaDropdown],[hxDropdown]", inputs: ["placement", "autoClose", "isDisabled", "showDelay", "hideDelay", "maxWidthRelativeTo", "minWidthRelativeTo", "offsetY", "offsetX", "createClipPathMask"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["hx-dropdown", "hxa-dropdown"] }, { type: i3.DropdownToggleDirective, selector: "[hxDropdownToggle],[hxaDropdownToggle]", exportAs: ["hx-dropdown-toggle"] }, { type: i4.DropdownMenuDirective, selector: "[hxDropdownMenu],[hxaDropdownMenu]", exportAs: ["hx-dropdown-menu"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.DropdownItemDirective, selector: "[hxDropdownItem],[hxaDropdownItem]" }], animations: [
trigger('slide', [
state('left', style({ transform: 'translateX(0)' })),
state('right', style({ transform: 'translateX(-100%)' })),
transition('* => *', animate(200)),
]),
] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FiltersCollapsedComponent, decorators: [{
type: Component,
args: [{ selector: 'hxa-filters-collapsed', animations: [
trigger('slide', [
state('left', style({ transform: 'translateX(0)' })),
state('right', style({ transform: 'translateX(-100%)' })),
transition('* => *', animate(200)),
]),
], template: "<div\r\n class=\"hx-dropdown ml-1 collapsedFilter\"\r\n #dropdown=\"hx-dropdown\"\r\n hxaDropdown\r\n [autoClose]=\"false\"\r\n>\r\n <button\r\n id=\"collapsedFilterTrigger\"\r\n type=\"button\"\r\n class=\"hx-button hx-button-dropdown\"\r\n hxaDropdownToggle\r\n >\r\n <span>{{ getFilterLabel() }}</span>\r\n <span class=\"hx-icon-control\"><i class=\"icon icon-caret-down\"></i></span>\r\n </button>\r\n\r\n <div\r\n class=\"hx-dropdown-menu has-limited-width collapsedFilter__menu panes\"\r\n *hxaDropdownMenu\r\n >\r\n <ul\r\n class=\"panes__inner\"\r\n [@slide]=\"activePane\"\r\n (@slide.done)=\"onSlideDone($event)\"\r\n >\r\n <!-- SUMMARY -->\r\n <li id=\"filterSelections\" class=\"panes__item\">\r\n <ng-container\r\n *ngFor=\"\r\n let filter of data;\r\n trackBy: trackByFn;\r\n let lastItem = last;\r\n index as idx\r\n \"\r\n >\r\n <!-- SINGLE-/MULTI- SELECT -->\r\n <ng-container\r\n *ngIf=\"(filter.type === FilterType.SingleSelect || filter.type === FilterType.MultiSelect) && !filter?.hidden\"\r\n >\r\n <button\r\n [id]=\"filter?.id + '-trigger'\"\r\n (click)=\"changeFilterSelection(filter)\"\r\n title=\"{{filter.getSelectedLabel()}}\"\r\n class=\"filter__item collapsedFilter__summaryItem\"\r\n [class.is-disabled]=\"filter?.disabled\"\r\n >\r\n <div class=\"filter__itemLabel\">\r\n <span class=\"is-text-weight-light\"\r\n >{{filter?.label}}: </span\r\n >\r\n <span class=\"is-text-weight-bolder\"\r\n >{{filter?.getSelectedLabel()}}</span\r\n >\r\n </div>\r\n\r\n <span\r\n class=\"hx-icon-control filter__itemIcon collapsedFilter__action\"\r\n aria-hidden=\"true\"\r\n >\r\n <i class=\"hx-icon icon-angle-right\"></i>\r\n </span>\r\n </button>\r\n </ng-container>\r\n\r\n <!-- SEARCH -->\r\n <ng-container\r\n *ngIf=\"filter.type === FilterType.Search && !filter?.hidden\"\r\n >\r\n <div\r\n [id]=\"filter.id\"\r\n class=\"hx-input-group collapsedFilter__search\"\r\n >\r\n <i class=\"hx-icon icon-search mt-1\"></i>\r\n <div class=\"hx-input-control my-0\">\r\n <input\r\n class=\"hx-input\"\r\n type=\"search\"\r\n (input)=\"searchFilter(filter)\"\r\n [(ngModel)]=\"filter.value\"\r\n [placeholder]=\"filter.label\"\r\n [disabled]=\"filter?.disabled\"\r\n />\r\n <label class=\"hx-label\"></label>\r\n <div class=\"hx-help\"></div>\r\n </div>\r\n <div class=\"hx-input-actions\" *ngIf=\"filter.value\">\r\n <div class=\"hx-button-group\">\r\n <button\r\n class=\"hx-button is-flat\"\r\n (click)=\"clearSearch(filter)\"\r\n >\r\n <span class=\"hx-icon-control\"\r\n ><i class=\"icon icon-close-empty\"></i\r\n ></span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- DATE-RANGE -->\r\n <ng-container *ngIf=\"filter.type === FilterType.DateRange\">\r\n <div\r\n [id]=\"filter?.id + '-trigger'\"\r\n title=\"{{filter.selected?.label}}\"\r\n class=\"collapsedFilter__dateRange\"\r\n >\r\n <hxa-date-range-picker\r\n [dateFormat]=\"filter.dateRangePickerDisplayDateFormat\"\r\n [displayMode]=\"filter.dateRangePickerDisplayMode\"\r\n [intervalOptions]=\"getIntervalOptions(filter.options)\"\r\n [defaultDateRange]=\"filter.sourceValue\"\r\n [id]=\"filter?.id + '-dateRangePicker'\"\r\n [showCaretDown]=\"true\"\r\n [placeholder]=\"filter.label\"\r\n (onDateRangeSelected)=\"onDateRangeFilterChange(filter,$event)\"\r\n #dateRangePicker\r\n ></hxa-date-range-picker>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </li>\r\n\r\n <!-- DETAIL -->\r\n <li id=\"filterOptions\" class=\"panes__item\">\r\n <button\r\n id=\"paneBack\"\r\n class=\"filter__item collapsedFilter__detailHeader\"\r\n (click)=\"back()\"\r\n >\r\n <span\r\n class=\"hx-icon-control filter__itemIcon collapsedFilter__action\"\r\n aria-hidden=\"true\"\r\n >\r\n <i class=\"hx-icon icon-angle-left\"></i>\r\n </span>\r\n <span class=\"is-screen-reader-only\">Back</span>\r\n\r\n <div class=\"filter__itemLabel\">\r\n <span class=\"is-text-weight-light\"\r\n >{{selectedFilter?.label}}: </span\r\n >\r\n <span class=\"is-text-weight-bolder\"\r\n >{{selectedFilter?.getSelectedLabel()}}</span\r\n >\r\n </div>\r\n </button>\r\n\r\n <ul\r\n [id]=\"selectedFilter?.id + '-options'\"\r\n class=\"hx-list-group options\"\r\n >\r\n <li\r\n class=\"options__item\"\r\n role=\"none\"\r\n *ngFor=\"\r\n let option of selectedFilter?.options;\r\n trackBy: trackByFn;\r\n let i = index\r\n \"\r\n >\r\n <!-- SINGLE-SELECT -->\r\n <ng-container\r\n *ngIf=\"selectedFilter?.type === FilterType.SingleSelect\"\r\n >\r\n <button\r\n hxaDropdownItem\r\n (click)=\"selectFilterOption(option)\"\r\n title=\"{{option?.label}}\"\r\n class=\"is-text-ellipsed filter__item\"\r\n [class.selected]=\"option.selected\"\r\n >\r\n <span\r\n class=\"hx-icon-control filter__itemIcon\"\r\n *ngIf=\"option?.icon\"\r\n aria-hidden=\"true\"\r\n >\r\n <i class=\"{{ option?.icon }}\"></i>\r\n </span>\r\n <span class=\"filter__itemLabel\"> {{ option?.label }} </span>\r\n </button>\r\n </ng-container>\r\n\r\n <!-- MULTI-SELECT -->\r\n <ng-container\r\n *ngIf=\"selectedFilter?.type === FilterType.MultiSelect\"\r\n >\r\n <label\r\n class=\"is-text-ellipsed filter__item--multi\"\r\n title=\"{{ option?.label }}\"\r\n [class.is-perforated]=\"i === 0\"\r\n [class.selected]=\"option.selected && i > 0\"\r\n [class.is-select-all]=\"i === 0\"\r\n [for]=\"selectedFilter?.id + '-checkbox-' + i\"\r\n >\r\n <input\r\n [name]=\"selectedFilter?.id + '-checkbox-' + i\"\r\n type=\"checkbox\"\r\n [id]=\"selectedFilter?.id + '-checkbox-' + i\"\r\n (change)=\"selectFilterOption(option, false)\"\r\n [class.indeterminate]=\"\r\n option?.value === selectedFilter?.selectAllValue &&\r\n selectedFilter?.selectAllState.indeterminate\r\n \"\r\n [checked]=\"option.selected\"\r\n />\r\n <span\r\n class=\"hx-icon-control filter__itemIcon\"\r\n *ngIf=\"option?.icon\"\r\n aria-hidden=\"true\"\r\n >\r\n <i class=\"{{ option?.icon }}\"></i>\r\n </span>\r\n <span\r\n class=\"filter__itemLabel\"\r\n [class.is-text-weight-boldest]=\"i === 0\"\r\n >\r\n {{ option?.label }}\r\n </span>\r\n </label>\r\n </ng-container>\r\n </li>\r\n </ul>\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n", styles: [":host .expandedFilter__button{max-width:15rem;min-width:7.2rem}.expandedFilter__menu{padding:4px 0}.expandedFilter__search .hx-icon{margin-top:-.125rem}.expandedFilter__search .hx-input-control{margin:0}.expandedFilter__search .hx-input{height:2.25em}.expandedFilter__search .hx-help{margin:0}.expandedFilter__search .hx-help:before,.expandedFilter__search .hx-help:after{top:-.15rem}.expandedFilter__search .hx-input-actions{top:0}.filter__item,.filter__item--multi{display:flex;align-items:center;padding:.2666666667rem 8px;margin:0;min-height:2.1333333333rem;gap:8px;border-radius:0;width:100%;font-weight:400;font-family:Roboto;font-size:.9333333333rem;line-height:1.3333333333rem;letter-spacing:0em;text-decoration:none;text-transform:none}.filter__item:focus,.filter__item--multi:focus,.filter__item:focus-visible,.filter__item--multi:focus-visible{outline:none}.filter__item:has(:focus-visible),.filter__item--multi:has(:focus-visible){outline-offset:2px;outline:#262626 solid 2px}.filter__item:hover,.filter__item--multi:hover{background-color:#0000000d;cursor:pointer}.filter__item.selected,.selected.filter__item--multi{background-color:#e1f5ed;color:#02694e}.filter__item:is([disabled],.is-disabled),.filter__item--multi:is([disabled],.is-disabled){border-color:#b3b3b3;background-color:#b3b3b3;cursor:not-allowed;transition:none}.filter__item:not([disabled],.is-disabled),.filter__item--multi:not([disabled],.is-disabled){cursor:pointer}.filter__item:where(button),.filter__item--multi:where(button),.filter__item :where(button),.filter__item--multi :where(button){background-color:transparent;border:0}.filter__item--multi.is-select-all{padding:.8rem 8px;min-height:3.2rem}.filter__item--multi input[type=checkbox]{-webkit-appearance:none;appearance:none;margin:0;width:1.3333333333rem;height:1.3333333333rem;border:2px solid #b3b3b3;background-color:#fff;display:inline-grid;place-content:center;border-radius:2px;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.filter__item--multi input[type=checkbox]:before{content:\"\";width:1.0666666667rem;height:1.0666666667rem;transform:scale(0);transition-property:transform,clip-path;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s;box-shadow:inset 1rem 1rem #fff;clip-path:polygon(10.46% 53.05%,0% 65%,34.93% 95.56%,100% 15%,88.13% 5.41%,33.42% 73.14%);transform-origin:center}.filter__item--multi input[type=checkbox]:checked{background-color:#41b987;border-color:#41b987}.filter__item--multi input[type=checkbox]:checked:before{transform:scale(1)}.filter__item--multi input[type=checkbox]:indeterminate,.filter__item--multi input[type=checkbox].indeterminate{background-color:#41b987;border-color:#41b987}.filter__item--multi input[type=checkbox]:indeterminate:before,.filter__item--multi input[type=checkbox].indeterminate:before{content:\"\";clip-path:polygon(0% 43.75%,100% 43.75%,100% 56.25%,0% 56.25%);transform:scale(1)}.filter__item--multi input[type=checkbox]:is([disabled],.is-disabled):checked:before{transition:none}.filter__itemIcon{position:relative;display:inline-flex;justify-content:center;align-items:center}.filter__itemIcon .hx-icon{font-size:20px;line-height:24px;position:relative;top:unset;left:unset}.filter__itemLabel{font-weight:400;font-family:Roboto;font-size:1.0666666667rem;line-height:1.6rem;letter-spacing:0em;text-decoration:none;text-transform:none;color:inherit;flex:1;text-align:left}:where(.is-elipsed,.is-text-elipsed,.is-text-ellipsed,.is-text-ellipsis) .filter__itemLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter__itemLabel :where(span){color:inherit;font:inherit}\n", ".collapsedFilter__menu{border:0;padding:4px 0}.collapsedFilter__menu .is-disabled{opacity:.3}.collapsedFilter__menu.panes{width:20rem;overflow:hidden;border:1px solid #cccccc}.collapsedFilter__menu.panes .panes__inner{display:flex;list-style:none;padding:0;margin:0}.collapsedFilter__menu.panes .panes__item{min-width:calc(20rem - 2px);max-width:calc(20rem - 2px);margin:0;max-height:20rem;overflow-y:auto;overflow-x:hidden}.collapsedFilter__dateRange{display:contents}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker{display:contents!important}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-dropdown{display:flex;border-bottom:1px solid #e6e6e6}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button{display:flex;align-items:center;padding:.2666666667rem 8px;margin:0;min-height:3.2rem;gap:8px;border-radius:0;width:100%;font-weight:400;font-family:Roboto;font-size:1.0666666667rem;line-height:1.6rem;letter-spacing:0em;text-decoration:none;text-transform:none}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:focus,.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:focus-visible{outline:none;border:none;box-shadow:none;border-style:none}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:has(:focus-visible){outline-offset:2px;outline:#262626 solid 2px}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:hover{background-color:#0000000d;cursor:pointer}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button.selected{background-color:#e1f5ed;color:#02694e}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:active{border:none;box-shadow:none;border-style:none;outline:none}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:is([disabled],.is-disabled){border-color:#b3b3b3;background-color:#b3b3b3;cursor:not-allowed;transition:none}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:not([disabled],.is-disabled){cursor:pointer}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button:where(button),.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button :where(button){background-color:transparent;border:0}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button .hx-icon-control{position:relative;display:inline-flex;justify-content:center;align-items:center;margin:0}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button .hx-icon-control .icon{font-size:20px;line-height:24px}.collapsedFilter__dateRange ::ng-deep hxa-date-range-picker .hx-button .hx-icon-control .icon-caret-down:before{content:\"\\e963\"}.collapsedFilter__summaryItem,.collapsedFilter__detailHeader,.collapsedFilter__search{display:flex;align-items:center;margin:0;gap:8px;border-radius:0;width:100%}.collapsedFilter__summaryItem{padding:.2666666667rem 8px;min-height:3.2rem;border-bottom:1px solid #e6e6e6}.collapsedFilter__detailHeader{padding:.2666666667rem 16px .2666666667rem 8px;min-height:3.2rem;border-bottom:1px solid #e6e6e6}.collapsedFilter__search{padding:.2666666667rem 8px;height:3.2rem}.collapsedFilter__search :where(.hx-input-control){width:100%}.collapsedFilter__action{background-color:transparent;border:0}.collapsedFilter__action .hx-icon{width:20px}.options__item{display:contents}.is-screen-reader-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\n"] }]
}], propDecorators: { dropdown: [{
type: ViewChild,
args: ['dropdown', { static: true }]
}], dateRangePickers: [{
type: ViewChildren,
args: ['dateRangePicker']
}], data: [{
type: Input
}], onFilter: [{
type: Output
}], onSearchFilter: [{
type: Output
}], onDateRangePickerFilter: [{
type: Output
}], onBack: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsdGVycy1jb2xsYXBzZWQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaHgtdWkvc3JjL2xpYi9maWx0ZXJzL2ZpbHRlcnMtY29sbGFwc2VkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2h4LXVpL3NyYy9saWIvZmlsdGVycy9maWx0ZXJzLWNvbGxhcHNlZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsT0FBTyxFQUNQLEtBQUssRUFDTCxLQUFLLEVBQ0wsVUFBVSxFQUNWLE9BQU8sR0FDUixNQUFNLHFCQUFxQixDQUFDO0FBQzdCLE9BQU8sRUFDTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBQ04sU0FBUyxFQUNULFNBQVMsRUFDVCxZQUFZLEdBQ2IsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFFbkUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7Ozs7Ozs7QUFpQmpELE1BQU0sT0FBTyx5QkFBeUI7SUFadEM7UUFnQkUsZUFBVSxHQUFHLFVBQVUsQ0FBQztRQUN4QixlQUFVLEdBQWEsTUFBTSxDQUFDO1FBR3JCLFNBQUksR0FBbUIsRUFBRSxDQUFDO1FBRXpCLGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQzlCLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNwQyw0QkFBdUIsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQzdDLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0tBOEV2QztJQTVFQyxrQkFBa0IsQ0FBQyxPQUF3QjtRQUN6QyxNQUFNLGNBQWMsR0FBYSxFQUFFLENBQUM7UUFDcEMsSUFBSSxPQUFPLEVBQUU7WUFDWCxLQUFLLElBQUksQ0FB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O3NCQUFqQixNQUFNO2dCQUNHLGNBQWM7c0JBQXZCLE1BQU07Z0JBQ0csdUJBQXVCO3NCQUFoQyxNQUFNO2dCQUNHLE1BQU07c0JBQWYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgYW5pbWF0ZSxcclxuICBzdGF0ZSxcclxuICBzdHlsZSxcclxuICB0cmFuc2l0aW9uLFxyXG4gIHRyaWdnZXIsXHJcbn0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XHJcbmltcG9ydCB7XHJcbiAgQ29tcG9uZW50LFxyXG4gIEV2ZW50RW1pdHRlcixcclxuICBJbnB1dCxcclxuICBPdXRwdXQsXHJcbiAgUXVlcnlMaXN0LFxyXG4gIFZpZXdDaGlsZCxcclxuICBWaWV3Q2hpbGRyZW4sXHJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IERhdGVSYW5nZSB9IGZyb20gJy4uL2RhdGUtcmFuZ2UtcGlja2VyL2RhdGUtcmFuZ2UtcGlja2VyLm1vZGVsJztcclxuaW1wb3J0IHsgRHJvcGRvd25EaXJlY3RpdmUgfSBmcm9tICcuLi9kcm9wZG93bi9kcm9wZG93bi5kaXJlY3RpdmUnO1xyXG5pbXBvcnQgeyBJRmlsdGVyT3B0aW9uIH0gZnJvbSAnLi9maWx0ZXJzLWNvbmZpZy5pbnRlcmZhY2UnO1xyXG5pbXBvcnQgeyBGaWx0ZXJUeXBlIH0gZnJvbSAnLi9maWx0ZXJzLXR5cGUuZW51bSc7XHJcbmltcG9ydCB7IEZpbHRlcnNNb2RlbCB9IGZyb20gJy4vZmlsdGVycy5tb2RlbCc7XHJcblxyXG50eXBlIFBhbmVUeXBlID0gJ2xlZnQnIHwgJ3JpZ2h0JztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnaHhhLWZpbHRlcnMtY29sbGFwc2VkJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vZmlsdGVycy1jb2xsYXBzZWQuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2ZpbHRlcnMuY29tcG9uZW50LnNjc3MnLCAnLi9maWx0ZXJzLWNvbGxhcHNlZC5jb21wb25lbnQuc2NzcyddLFxyXG4gIGFuaW1hdGlvbnM6IFtcclxuICAgIHRyaWdnZXIoJ3NsaWRlJywgW1xyXG4gICAgICBzdGF0ZSgnbGVmdCcsIHN0eWxlKHsgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgwKScgfSkpLFxyXG4gICAgICBzdGF0ZSgncmlnaHQnLCBzdHlsZSh7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoLTEwMCUpJyB9KSksXHJcbiAgICAgIHRyYW5zaXRpb24oJyogPT4gKicsIGFuaW1hdGUoMjAwKSksXHJcbiAgICBdKSxcclxuICBdLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgRmlsdGVyc0NvbGxhcHNlZENvbXBvbmVudCB7XHJcbiAgQFZpZXdDaGlsZCgnZHJvcGRvd24nLCB7IHN0YXRpYzogdHJ1ZSB9KSBkcm9wZG93bjogRHJvcGRvd25EaXJlY3RpdmU7XHJcbiAgQFZpZXdDaGlsZHJlbignZGF0ZVJhbmdlUGlja2VyJykgZGF0ZVJhbmdlUGlja2VyczogUXVlcnlMaXN0PGFueT47XHJcblxyXG4gIEZpbHRlclR5cGUgPSBGaWx0ZXJUeXBlO1xyXG4gIGFjdGl2ZVBhbmU6IFBhbmVUeXBlID0gJ2xlZnQnO1xyXG4gIHNlbGVjdGVkRmlsdGVyOiBGaWx0ZXJzTW9kZWw7XHJcblxyXG4gIEBJbnB1dCgpIGRhdGE6IEZpbHRlcnNNb2RlbFtdID0gW107XHJcblxyXG4gIEBPdXRwdXQoKSBvbkZpbHRlciA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBAT3V0cHV0KCkgb25TZWFyY2hGaWx0ZXIgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgQE91dHB1dCgpIG9uRGF0ZVJhbmdlUGlja2VyRmlsdGVyID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gIEBPdXRwdXQoKSBvbkJhY2sgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gIGdldEludGVydmFsT3B0aW9ucyhvcHRpb25zOiBJRmlsdGVyT3B0aW9uW10pIHtcclxuICAgIGNvbnN0IGludGVydmFsT3B0aW9uOiBzdHJpbmdbXSA9IFtdO1xyXG4gICAgaWYgKG9wdGlvbnMpIHtcclxuICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPCBvcHRpb25zLmxlbmd0aDsgaSsrKSB7XHJcbiAgICAgICAgaW50ZXJ2YWxPcHRpb24ucHVzaChvcHRpb25zW2ldLmxhYmVsKTtcclxuICAgICAgfVxyXG4gICAgfVxyXG4gICAgcmV0dXJuIGludGVydmFsT3B0aW9uO1xyXG4gIH1cclxuXHJcbiAgY2xlYXJTZWFyY2goZmlsdGVyOiBGaWx0ZXJzTW9kZWwpIHtcclxuICAgIGZpbHRlci52YWx1ZSA9ICcnO1xyXG4gICAgdGhpcy5vblNlYXJjaEZpbHRlci5lbWl0KHsgZmlsdGVyOiBmaWx0ZXIsIHZhbHVlOiBmaWx0ZXIudmFsdWUgfSk7XHJcbiAgfVxyXG5cclxuICBjaGFuZ2VGaWx0ZXJTZWxlY3Rpb24oZmlsdGVyOiBGaWx0ZXJzTW9kZWwpIHtcclxuICAgIHRoaXMuc2VsZWN0ZWRGaWx0ZXIgPSBmaWx0ZXI7XHJcbiAgICB0aGlzLmFjdGl2ZVBhbmUgPSAncmlnaHQnO1xyXG4gIH1cclxuXHJcbiAgc2VsZWN0RmlsdGVyT3B0aW9uKG9wdGlvbjogSUZpbHRlck9wdGlvbiwgZ29CYWNrID0gdHJ1ZSkge1xyXG4gICAgdGhpcy5vbkZpbHRlci5lbWl0KHsgZmlsdGVyOiB0aGlzLnNlbGVjdGVkRmlsdGVyLCBvcHRpb246IG9wdGlvbiB9KTtcclxuICAgIGlmIChnb0JhY2spIHtcclxuICAgICAgdGhpcy5iYWNrKCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBzZWFyY2hGaWx0ZXIoZmlsdGVyOiBGaWx0ZXJzTW9kZWwpIHtcclxuICAgIHRoaXMub25TZWFyY2hGaWx0ZXIuZW1pdCh7IGZpbHRlcjogZmlsdGVyIH0pO1xyXG4gIH1cclxuXHJcbiAgYmFjaygpIHtcclxuICAgIHRoaXMuYWN0aXZlUGFuZSA9ICdsZWZ0JztcclxuICAgIHRoaXMub25CYWNrLmVtaXQoeyBmaWx0ZXI6IHRoaXMuc2VsZWN0ZWRGaWx0ZXIgfSk7XHJcbiAgfVxyXG5cclxuICBvblNsaWRlRG9uZSgkZXZlbnQpIHtcclxuICAgIGlmICgkZXZlbnQudG9TdGF0ZSA9PT0gJ2xlZnQnKSB7XHJcbiAgICAgIHRoaXMuc2VsZWN0ZWRGaWx0ZXIgPSBudWxsO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgdG90YWxBY3RpdmVGaWx0ZXJzKCk6IG51bWJlciB7XHJcbiAgICBsZXQgY291bnQgPSAwO1xyXG4gICAgdGhpcy5kYXRhLmZvckVhY2goKGZpbHRlcjogRmlsdGVyc01vZGVsLCBpbmRleDogbnVtYmVyKSA9PiB7XHJcbiAgICAgIGlmIChcclxuICAgICAgICBmaWx0ZXIudHlwZSA9PT0gRmlsdGVyVHlwZS5TaW5nbGVTZWxlY3QgfHxcclxuICAgICAgICAoZmlsdGVyLnR5cGUgPT09IEZpbHRlclR5cGUuTXVsdGlTZWxlY3QgJiZcclxuICAgICAgICAgIGZpbHRlci5zZWxlY3RlZC5sZW5ndGggIT09IDAgJiZcclxuICAgICAgICAgIGZpbHRlci5zZWxlY3RlZC5sZW5ndGggPCBmaWx0ZXIub3B0aW9ucy5sZW5ndGggLSAxKSB8fFxyXG4gICAgICAgIChmaWx0ZXIudHlwZSA9PT0gRmlsdGVyVHlwZS5TZWFyY2ggJiYgZmlsdGVyLnZhbHVlKSB8fFxyXG4gICAgICAgIChmaWx0ZXIudHlwZSA9PT0gRmlsdGVyVHlwZS5EYXRlUmFuZ2UgJiYgZmlsdGVyLnNvdXJjZVZhbHVlKVxyXG4gICAgICApIHtcclxuICAgICAgICBjb3VudCsrO1xyXG4gICAgICB9XHJcbiAgICB9KTtcclxuICAgIHJldHVybiBjb3VudDtcclxuICB9XHJcblxyXG4gIGdldEZpbHRlckxhYmVsKCkge1xyXG4gICAgY29uc3QgcGx1cmFsID0gdGhpcy50b3RhbEFjdGl2ZUZpbHRlcnMoKSA+IDEgPyAnZmlsdGVycycgOiAnZmlsdGVyJztcclxuICAgIHJldHVybiB0aGlzLnRvdGFsQWN0aXZlRmlsdGVycygpID4gMFxyXG4gICAgICA/IHRoaXMudG90YWxBY3RpdmVGaWx0ZXJzKCkgKyBgICR7cGx1cmFsfSBhcHBsaWVkYFxyXG4gICAgICA6IGBGaWx0ZXJzYDtcclxuICB9XHJcblxyXG4gIG9uRGF0ZVJhbmdlRmlsdGVyQ2hhbmdlKGZpbHRlcjogRmlsdGVyc01vZGVsLCBkYXRlUmFuZ2U6IERhdGVSYW5nZSkge1xyXG4gICAgdGhpcy5vbkRhdGVSYW5nZVBpY2tlckZpbHRlci5lbWl0KHsgZmlsdGVyLCBkYXRlUmFuZ2UgfSk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBVc2VkIGZvciB0cmFjayBieSBhbmQgYm9vc3QgcGVyZm9ybWFuY2VcclxuICAgKi9cclxuICB0cmFja0J5Rm4oaW5kZXgsIGFjdGlvbikge1xyXG4gICAgcmV0dXJuIGluZGV4O1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2XHJcbiAgY2xhc3M9XCJoeC1kcm9wZG93biBtbC0xIGNvbGxhcHNlZEZpbHRlclwiXHJcbiAgI2Ryb3Bkb3duPVwiaHgtZHJvcGRvd25cIlxyXG4gIGh4YURyb3Bkb3duXHJcbiAgW2F1dG9DbG9zZV09XCJmYWxzZVwiXHJcbj5cclxuICA8YnV0dG9uXHJcbiAgICBpZD1cImNvbGxhcHNlZEZpbHRlclRyaWdnZXJcIlxyXG4gICAgdHlwZT1cImJ1dHRvblwiXHJcbiAgICBjbGFzcz1cImh4LWJ1dHRvbiBoeC1idXR0b24tZHJvcGRvd25cIlxyXG4gICAgaHhhRHJvcGRvd25Ub2dnbGVcclxuICA+XHJcbiAgICA8c3Bhbj57eyBnZXRGaWx0ZXJMYWJlbCgpIH19PC9zcGFuPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJoeC1pY29uLWNvbnRyb2xcIj48aSBjbGFzcz1cImljb24gaWNvbi1jYXJldC1kb3duXCI+PC9pPjwvc3Bhbj5cclxuICA8L2J1dHRvbj5cclxuXHJcbiAgPGRpdlxyXG4gICAgY2xhc3M9XCJoeC1kcm9wZG93bi1tZW51IGhhcy1saW1pdGVkLXdpZHRoIGNvbGxhcHNlZEZpbHRlcl9fbWVudSBwYW5lc1wiXHJcbiAgICAqaHhhRHJvcGRvd25NZW51XHJcbiAgPlxyXG4gICAgPHVsXHJcbiAgICAgIGNsYXNzPVwicGFuZXNfX2lubmVyXCJcclxuICAgICAgW0BzbGlkZV09XCJhY3RpdmVQYW5lXCJcclxuICAgICAgKEBzbGlkZS5kb25lKT1cIm9uU2xpZGVEb25lKCRldmVudClcIlxyXG4gICAgPlxyXG4gICAgICA8IS0tIFNVTU1BUlkgLS0+XHJcbiAgICAgIDxsaSBpZD1cImZpbHRlclNlbGVjdGlvbnNcIiBjbGFzcz1cInBhbmVzX19pdGVtXCI+XHJcbiAgICAgICAgPG5nLWNvbnRhaW5lclxyXG4gICAgICAgICAgKm5nRm9yPVwiXHJcbiAgICAgICAgICAgIGxldCBmaWx0ZXIgb2YgZGF0YTtcclxuICAgICAgICAgICAgdHJhY2tCeTogdHJhY2tCeUZuO1xyXG4gICAgICAgICAgICBsZXQgbGFzdEl0ZW