UNPKG

ontotext-reusable-ui-components

Version:

Unified reusable UI components designed for the Ontotext ecosystem.

17 lines 56.1 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs"),require("@angular/common"),require("@angular/forms"),require("rxjs/operators"),require("@angular/material/autocomplete"),require("@angular/cdk/keycodes"),require("@angular/material/input"),require("@angular/platform-browser/animations"),require("@angular/material/core"),require("@angular/material/select"),require("@angular/material/chips"),require("@angular/material/icon"),require("@angular/material/button"),require("@ngneat/transloco"),require("@angular/cdk/drag-drop"),require("@angular/cdk/table"),require("@angular/material/table"),require("@angular/material/sort"),require("@angular/material/paginator"),require("@w11k/ngx-componentdestroyed"),require("@angular/material/checkbox"),require("@angular/material/form-field"),require("@angular/material/datepicker"),require("moment"),require("@angular/cdk/portal"),require("@angular/material-moment-adapter"),require("@angular/material/slide-toggle"),require("@angular/material/slider")):"function"==typeof define&&define.amd?define("onto-search",["exports","@angular/core","rxjs","@angular/common","@angular/forms","rxjs/operators","@angular/material/autocomplete","@angular/cdk/keycodes","@angular/material/input","@angular/platform-browser/animations","@angular/material/core","@angular/material/select","@angular/material/chips","@angular/material/icon","@angular/material/button","@ngneat/transloco","@angular/cdk/drag-drop","@angular/cdk/table","@angular/material/table","@angular/material/sort","@angular/material/paginator","@w11k/ngx-componentdestroyed","@angular/material/checkbox","@angular/material/form-field","@angular/material/datepicker","moment","@angular/cdk/portal","@angular/material-moment-adapter","@angular/material/slide-toggle","@angular/material/slider"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["onto-search"]={},e.ng.core,e.rxjs,e.ng.common,e.ng.forms,e.rxjs.operators,e.ng.material.autocomplete,e.ng.cdk.keycodes,e.ng.material.input,e.ng.platformBrowser.animations,e.ng.material.core,e.ng.material.select,e.ng.material.chips,e.ng.material.icon,e.ng.material.button,e.transloco,e.ng.cdk.dragDrop,e.ng.cdk.table,e.ng.material.table,e.ng.material.sort,e.ng.material.paginator,e.ngxComponentdestroyed,e.ng.material.checkbox,e.ng.material.formField,e.ng.material.datepicker,e.moment,e.ng.cdk.portal,e.ng.materialMomentAdapter,e.ng.material.slideToggle,e.ng.material.slider)}(this,(function(e,t,n,a,o,r,i,l,s,c,p,u,d,m,h,g,f,y,v,C,b,x,S,E,T,O,D,M,w,I){"use strict";function R(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var k=R(O),F=function(){function e(){this.onSearch=new t.EventEmitter,this.onKeyPress=new t.EventEmitter}return e.prototype.ngOnInit=function(){this.states=this.autocompleteData||n.of([])},e.prototype.onSearchEvent=function(e){this.onSearch.emit(e)},e.prototype.onKeyPressEvent=function(e){this.onKeyPress.emit(e)},e}();F.decorators=[{type:t.Component,args:[{selector:"onto-search-field",template:'<app-search\n  [states]="states"\n  [autocompleteOptionTemplate]="customTemplate || defaultTemplate"\n  [preselectedStatesList]="selectedList || []"\n  [enableInnerAutocompleteFiltration]="enableInnerAutocompleteFiltration"\n  [searchResultMappingFunction]="searchResultMappingFunction"\n  (onSearch)="onSearchEvent($event)"\n  (onKeyPress)="onKeyPressEvent($event)"></app-search>\n\n  <ng-template #defaultTemplate let-item>\n    <span [attr.appCypressData]="\'state-label-\' + item.index" class="state-label">{{item.state.label}}</span>\n    <span [attr.appCypressData]="\'state-type-\' + item.index" class="state-type">{{item.state.type}}</span> <br/>\n    <span [attr.appCypressData]="\'state-labels-\' + item.index" class="state-labels"><small>{{item.state.labels}}</small></span>\n</ng-template>\n',styles:[".state-type{float:right}.state-labels{line-height:1em;white-space:normal}::ng-deep .state-suggestion{background-color:#add8e6!important;color:#000!important}"]}]}],F.propDecorators={customTemplate:[{type:t.Input}],selectedList:[{type:t.Input}],autocompleteData:[{type:t.Input}],enableInnerAutocompleteFiltration:[{type:t.Input}],searchResultMappingFunction:[{type:t.Input}],onSearch:[{type:t.Output}],onKeyPress:[{type:t.Output}]};
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */
var L=function(e,t){return(L=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])})(e,t)};function A(e,t){function n(){this.constructor=e}L(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}Object.create;function N(e){var t="function"==typeof Symbol&&Symbol.iterator,n=t&&e[t],a=0;if(n)return n.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&a>=e.length&&(e=void 0),{value:e&&e[a++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function V(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var a,o,r=n.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(a=r.next()).done;)i.push(a.value)}catch(e){o={error:e}}finally{try{a&&!a.done&&(n=r.return)&&n.call(r)}finally{if(o)throw o.error}}return i}function G(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(V(arguments[t]));return e}Object.create;var _=function(){};_.selectable=!0,_.removable=!0,_.separatorKeysCodes=[l.ENTER,l.COMMA];var P=function(){function e(){this.onSearch=new t.EventEmitter,this.onKeyPress=new t.EventEmitter,this.stateCtrl=new o.FormControl,this.selectable=_.selectable,this.removable=_.removable,this.separatorKeysCodes=_.separatorKeysCodes,this.defaultSearchResultMappingFunction=function(e){return e}}return e.prototype.ngOnInit=function(){var e=this;this.states.subscribe((function(t){e._states=t})),this.subscribeAutocompleteFilter(),this.currentTemplate=this.autocompleteOptionTemplate,this.searchResultMappingFunction=this.searchResultMappingFunction||this.defaultSearchResultMappingFunction},e.prototype.ngOnChanges=function(e){var t;(null===(t=null==e?void 0:e.preselectedStatesList)||void 0===t?void 0:t.currentValue)&&(this.statesList=new Set(G(this.preselectedStatesList)))},e.prototype.subscribeAutocompleteFilter=function(){var e=this,t=this.enableInnerAutocompleteFiltration||!1;this.filteredStates=t?this.stateCtrl.valueChanges.pipe(r.startWith(""),r.map((function(t){return t?e.filterStates(t):[]}))):this.states},e.prototype.filterStates=function(e){var t="string"==typeof e?e.toLowerCase():e;return this._states.filter((function(e){return 0===e.label.toLowerCase().indexOf(t)}))},e.prototype.add=function(e){var t=e.input,n=(e.value||"").trim();n&&this.statesList.add(n),t&&(t.value=""),this.stateCtrl.setValue(null),this.autocomplete.closePanel()},e.prototype.remove=function(e){this.statesList.delete(e),this.stateCtrl.setValue(null)},e.prototype.selected=function(e){this.statesList.add(e.option.value),this.statesInput.nativeElement.value="",this.stateCtrl.setValue(null)},e.prototype.search=function(){var e=this;this.onSearch.emit(G(this.statesList).map((function(t){return t.label?e.searchResultMappingFunction(t):t})))},e.prototype.onInputChange=function(e){this.onKeyPress.emit(e)},e}();P.decorators=[{type:t.Component,args:[{selector:"app-search",template:'<div class="search-field-component" appCypressData="search-field-component">\n  <div class="selection-list">\n    <mat-form-field class="state-selection-list">\n      <mat-chip-list #selectionList aria-label="Search selection" appCypressData="search-field-selection">\n        <mat-chip\n          *ngFor="let state of statesList; let index = index"\n          [selectable]="selectable"\n          [removable]="removable"\n          (removed)="remove(state)"\n          [ngClass]="state.label ? \'state-suggestion\' : \'state-free-text\'"\n          [attr.appCypressData]="\'state-selection-\' + index">\n          {{state.label || state}}\n          <mat-icon matChipRemove *ngIf="removable" [attr.appCypressData]="\'state-cancel-\' + index">cancel</mat-icon>\n        </mat-chip>\n        <input\n          placeholder="{{\'ONTO_SEARCH.SEARCH_PLACEHOLDER\' | transloco}}"\n          #statesInput\n          [formControl]="stateCtrl"\n          [matAutocomplete]="auto"\n          [matChipInputFor]="selectionList"\n          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\n          (matChipInputTokenEnd)="add($event)"\n          (input)="onInputChange($event.target.value)"\n          appCypressData="search-field-input">\n      </mat-chip-list>\n      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">\n        <mat-option class="state-option" *ngFor="let state of filteredStates | async; let index = index" [value]="state">\n          <ng-container *ngTemplateOutlet="currentTemplate; context: {$implicit: {state: state, index: index}}">\n          </ng-container>\n        </mat-option>\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n  <button class="search-field-button" mat-raised-button (click)="search()"\n          appCypressData="search-field-button">{{\'ONTO_SEARCH.BUTTON.SEARCH\' | transloco}}</button>\n</div>\n',styles:[".search-field-component{align-items:center;box-sizing:border-box;display:flex;flex-direction:row;height:100%;place-content:center space-between;width:100%}.search-field-component .selection-list{box-sizing:border-box;flex:1 1 100%;max-width:100%}.search-field-component .state-selection-list{display:inherit}button.search-field-button{margin-left:1em}.state-option{height:auto;line-height:1.5em;padding:1em 0;word-wrap:break-word}"]}]}],P.propDecorators={states:[{type:t.Input}],preselectedStatesList:[{type:t.Input}],autocompleteOptionTemplate:[{type:t.Input}],enableInnerAutocompleteFiltration:[{type:t.Input}],searchResultMappingFunction:[{type:t.Input}],onSearch:[{type:t.Output}],onKeyPress:[{type:t.Output}],statesInput:[{type:t.ViewChild,args:["statesInput"]}],autocomplete:[{type:t.ViewChild,args:[i.MatAutocompleteTrigger]}]};var z={ONTO_SEARCH:{BUTTON:{SEARCH:"Search"},SEARCH_PLACEHOLDER:"Search..."}},q=function(e,n){this.el=e,this.renderer=n,t.isDevMode()||n.removeAttribute(e.nativeElement,"appCypressData")};q.decorators=[{type:t.Directive,args:[{selector:"[appCypressData]"}]}],q.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2}]};var B=function(){};B.decorators=[{type:t.NgModule,args:[{imports:[],declarations:[q],exports:[q]}]}];var H={availableLangs:["en"],fallbackLang:["en"],defaultLang:"en",prodMode:!0,reRenderOnLangChange:!0,missingHandler:{useFallbackTranslation:!0,logMissingKey:!0}},Y=function(e){this.translocoService=e,this.translocoService.setTranslation(z,"en")};Y.decorators=[{type:t.NgModule,args:[{declarations:[F,P],exports:[F],imports:[a.CommonModule,o.ReactiveFormsModule,i.MatAutocompleteModule,s.MatInputModule,o.FormsModule,c.BrowserAnimationsModule,p.MatOptionModule,u.MatSelectModule,d.MatChipsModule,m.MatIconModule,h.MatButtonModule,g.TranslocoModule,B],providers:[{provide:g.TRANSLOCO_CONFIG,useValue:H}]}]}],Y.ctorParameters=function(){return[{type:g.TranslocoService}]};var $=function(){function e(){this.sortData=new t.EventEmitter,this.initialSort=!0}return e.prototype.ngOnChanges=function(e){e.config&&e.config.currentValue&&(this.initialSort&&(this.sortColumnConfigurations(),this.initialSort=!1),this.setDisplayColumns(G(this.getVisibleColumnNames())))},e.prototype.reorderColumns=function(e){f.moveItemInArray(this.config.columnConfigurations,this.findColumnConfigIndexByName(this.displayColumns[e.previousIndex]),this.findColumnConfigIndexByName(this.displayColumns[e.currentIndex])),this.setDisplayColumns(this.getVisibleColumnNames())},e.prototype.findColumnConfigIndexByName=function(e){return this.config.columnConfigurations.findIndex((function(t){return t.name===e}))},e.prototype.sortColumnConfigurations=function(){var e=this.getFilteredColumnConfigs((function(e){return e.permanent})),t=this.getFilteredColumnConfigs((function(e){return!e.permanent}));this.config.columnConfigurations=G(e,t)},e.prototype.setDisplayColumns=function(e){this.displayColumns=e},e.prototype.getFilteredColumnConfigs=function(e){return this.config.columnConfigurations.filter(e)},e.prototype.getVisibleColumnNames=function(){return this.getFilteredColumnConfigs((function(e){return e.permanent||!e.hidden})).map((function(e){return e.name}))},e}();$.decorators=[{type:t.Component,args:[{selector:"onto-search-results",template:'<div class="table-component" [ngClass]="componentClass" appCypressData="table-component">\n  <table *ngIf="config" cdk-table [dataSource]="datasource"\n         matSort (matSortChange)="sortData.next($event)"\n         [matSortDisabled]="!config.enableSort" [matSortDisableClear]="true"\n         [matSortActive]="sort?.active" [matSortDirection]="sort?.direction"\n         class="onto-table onto-table-fixed-layout" appCypressData="onto-table"\n         cdkDropList cdkDropListLockAxis="x" cdkDropListOrientation="horizontal"\n         (cdkDropListDropped)="reorderColumns($event)">\n    <ng-container *ngFor="let columnConfig of config.columnConfigurations; let i=index;"\n                  cdkColumnDef="{{columnConfig.name}}">\n      <th cdk-header-cell id="{{columnConfig.name}}"\n          class="onto-table-header-cell {{\'onto-table-column-\' + columnConfig.name}}"\n          *cdkHeaderCellDef appCypressData="onto-table-header-cell"\n          mat-sort-header [disabled]="!columnConfig.enableSort"\n          cdkDrag cdkDragLockAxis="x">\n        <div>{{columnConfig.label}}</div>\n      </th>\n      <td cdk-cell class="onto-table-cell {{\'onto-table-column-\' + columnConfig.name}}"\n          *cdkCellDef="let row" appCypressData="onto-table-cell">\n        <div>\n          <ng-container *ngIf="columnConfig.dataFunction; else cellTemplate">\n            {{columnConfig.dataFunction(row)}}\n          </ng-container>\n          <ng-template #cellTemplate [ngTemplateOutlet]="columnConfig.dataTemplate"\n                       [ngTemplateOutletContext]="{$implicit: row}"></ng-template>\n        </div>\n      </td>\n      <ng-container *ngIf="config.showFooter">\n        <td cdk-footer-cell\n            class="onto-table-footer-cell {{\'onto-table-column-\' + columnConfig.name}}"\n            *cdkFooterCellDef appCypressData="onto-table-footer-cell">\n          <div>{{columnConfig.footerFunction(datasource, columnConfig)}}</div>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <tr cdk-header-row class="onto-table-header-row" appCypressData="onto-table-header-row"\n        *cdkHeaderRowDef="displayColumns"></tr>\n    <tr cdk-row class="onto-table-row" appCypressData="onto-table-row"\n        *cdkRowDef="let row; columns: displayColumns"></tr>\n    <ng-container *ngIf="config.showFooter">\n      <tr cdk-footer-row class="onto-table-footer-row" appCypressData="onto-table-footer-row"\n          *cdkFooterRowDef="displayColumns"></tr>\n    </ng-container>\n  </table>\n</div>\n',styles:[':host{width:100%}.onto-table-fixed-layout{table-layout:fixed}.onto-table{background:#fff;border-spacing:0;display:table;font-family:Roboto,sans-serif;width:100%}.onto-table-footer-row,.onto-table-header-row,.onto-table-row{align-items:center;border-style:solid;border-width:0 0 1px;box-sizing:border-box;display:flex}.onto-table-header-row{height:56px}.onto-table-footer-row,.onto-table-row{min-height:48px}.onto-table-cell,.onto-table-footer-cell,.onto-table-header-cell{align-items:center;border-bottom-color:#000;display:flex;flex:1;font-size:16px;font-weight:400;height:100%;min-height:inherit;overflow:hidden;padding:0;word-wrap:break-word}.onto-table-cell div,.onto-table-footer-cell div,.onto-table-header-cell div{padding:0}.onto-table-cell div:first-of-type,.onto-table-footer-cell div:first-of-type,.onto-table-header-cell div:first-of-type{padding-left:24px}.onto-table-cell div:last-of-type,.onto-table-footer-cell div:last-of-type,.onto-table-header-cell div:last-of-type{padding-right:24px}.onto-table-header-cell{text-align:left}.onto-table-cell,.onto-table-footer-cell{font-size:14px}.cdk-drag-preview{box-sizing:border-box;position:relative}.cdk-drag-preview:after{border:1px solid rgba(0,0,0,.4);border-radius:4px;bottom:0;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);content:"";left:5px;position:absolute;right:5px;top:0}.cdk-drag-placeholder{color:transparent;position:relative;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-placeholder:after{background:rgba(0,0,0,.1);border:1px dashed rgba(0,0,0,.4);border-radius:4px;bottom:0;content:"";left:5px;position:absolute;right:5px;top:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}']}]}],$.propDecorators={datasource:[{type:t.Input}],config:[{type:t.Input}],sort:[{type:t.Input}],componentClass:[{type:t.Input}],sortData:[{type:t.Output}]};var K=function(){};K.decorators=[{type:t.NgModule,args:[{declarations:[$],exports:[$],imports:[y.CdkTableModule,a.CommonModule,B,v.MatTableModule,C.MatSortModule,f.DragDropModule]}]}];var j=function(){function e(e){this.keyValueDiffer=e,this.pageChanged=new t.EventEmitter,this.length=0,this.pageSize=10,this.pageSizeOptions=[5,10,20],this.pageIndex=0}return e.prototype.ngDoCheck=function(){if(this.paginatorDataDiff){var e=this.paginatorDataDiff.diff(this.paginatorData);e&&this.configurationChanged(e)}},e.prototype.ngOnChanges=function(e){e.paginatorData&&e.paginatorData.currentValue&&(this.paginatorDataDiff=this.keyValueDiffer.find(this.paginatorData).create(),this.setInternalPaginatorDataProperties(this.paginatorData)),e.pageOptions&&e.pageOptions.currentValue&&(this.pageSizeOptions=e.pageOptions.currentValue)},e.prototype.onPageChanged=function(e){var t={pageIndex:e.pageIndex,pageSize:e.pageSize,length:e.length};this.pageChanged.next(t)},e.prototype.configurationChanged=function(e){var t=this;e.forEachChangedItem((function(e){t.setClassProperty(e.key,e.currentValue)}))},e.prototype.setInternalPaginatorDataProperties=function(e){var t=this;Object.keys(e).forEach((function(n){t.setClassProperty(n,e[n])}))},e.prototype.setClassProperty=function(e,t){this[e]=t},e}();j.decorators=[{type:t.Component,args:[{selector:"onto-search-paginator",template:'<div class="paginator-component" appCypressData="paginator-component">\n  <mat-paginator [length]="length"\n                 [pageSize]="pageSize"\n                 [pageSizeOptions]="pageSizeOptions"\n                 [pageIndex]="pageIndex"\n                 [showFirstLastButtons]="true"\n                 (page)="onPageChanged($event)" appCypressData="onto-paginator"></mat-paginator>\n</div>\n',styles:[":host{width:100%}"]}]}],j.ctorParameters=function(){return[{type:t.KeyValueDiffers}]},j.propDecorators={paginatorData:[{type:t.Input}],pageOptions:[{type:t.Input}],pageChanged:[{type:t.Output}]};var U,W=function(){};W.decorators=[{type:t.NgModule,args:[{declarations:[j],exports:[j],imports:[a.CommonModule,B,b.MatPaginatorModule]}]}],(U=e.SearchFacetType||(e.SearchFacetType={}))[U.CHECKBOX=0]="CHECKBOX",U[U.DATE_RANGE=1]="DATE_RANGE",U[U.TOGGLE=2]="TOGGLE",U[U.RANGE=3]="RANGE",U[U.DROPDOWN_MULTI_SELECT=4]="DROPDOWN_MULTI_SELECT";var X=function(n){function a(){var a=n.apply(this,G(arguments))||this;return a.onSelectionChange=new t.EventEmitter,a.CHECKBOX=e.SearchFacetType.CHECKBOX,a.DATEPICKER=e.SearchFacetType.DATE_RANGE,a.TOGGLE=e.SearchFacetType.TOGGLE,a.RANGE=e.SearchFacetType.RANGE,a.DROPDOWN_MULTI_SELECT=e.SearchFacetType.DROPDOWN_MULTI_SELECT,a}return A(a,n),a.prototype.ngOnChanges=function(e){e.data&&e.data.currentValue&&(this.facetGroupName=this.data.facetGroupName,this.facetGroup=this.data.facetGroupData,this.selected=this.data.selected)},a.prototype.onSelectionEvent=function(e){this.onSelectionChange.emit(e)},a}(x.OnDestroyMixin);X.decorators=[{type:t.Component,args:[{selector:"onto-search-facet",template:'<div *ngIf="type === CHECKBOX">\n  <onto-checkbox-facet\n    [data]="data"\n    [type]="type"\n    [facetTitleTemplate]="facetTitleTemplate"\n    [facetTemplate]="facetTemplate"\n    (onSelectionChange)="onSelectionEvent($event)">\n  </onto-checkbox-facet>\n</div>\n\n<div *ngIf="type === DATEPICKER">\n  <onto-daterange-facet\n      [data]="data"\n      [type]="type"\n      [facetTitleTemplate]="facetTitleTemplate"\n      [facetTemplate]="facetTemplate"\n      (onSelectionChange)="onSelectionEvent($event)">>\n  </onto-daterange-facet>\n</div>\n\n<div *ngIf="type === TOGGLE">\n  <onto-toggle-facet\n      [data]="data"\n      [type]="type"\n      [facetTitleTemplate]="facetTitleTemplate"\n      [facetTemplate]="facetTemplate"\n      (onSelectionChange)="onSelectionEvent($event)">>\n  </onto-toggle-facet>\n</div>\n\n<div *ngIf="type === RANGE">\n  <onto-range-facet\n    [data]="data"\n    [type]="type"\n    [facetTitleTemplate]="facetTitleTemplate"\n    [facetTemplate]="facetTemplate"\n    (onSelectionChange)="onSelectionEvent($event)">>\n  </onto-range-facet>\n</div>\n\n<div *ngIf="type === DROPDOWN_MULTI_SELECT">\n  <onto-dropdown-multi-select-facet\n    [data]="data"\n    [type]="type"\n    [facetTitleTemplate]="facetTitleTemplate"\n    [facetTemplate]="facetTemplate"\n    (onSelectionChange)="onSelectionEvent($event)">>\n  </onto-dropdown-multi-select-facet>\n</div>\n',styles:[".checkbox-facet-title{font-size:large}"]}]}],X.propDecorators={data:[{type:t.Input}],type:[{type:t.Input}],facetTemplate:[{type:t.Input}],facetTitleTemplate:[{type:t.Input}],onSelectionChange:[{type:t.Output}]};var J=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return A(t,e),t.prototype.ngOnChanges=function(t){var n=this;e.prototype.ngOnChanges.call(this,t),this.facetGroup.forEach((function(e){return e.selected=n.selected.includes(e)}))},t.prototype.updateAllSelected=function(e){var t=this.selected&&this.selected.indexOf(e);t>-1?(this.selected.splice(t,1),e.selected=!1):(this.selected.push(e),e.selected=!0);var n=this.selected.map((function(e){return e.count})).reduce((function(e,t){return e+t}),0);this.onSelectionChange.emit({name:this.facetGroupName,selected:this.selected,count:n})},t}(X);J.decorators=[{type:t.Component,args:[{selector:"onto-checkbox-facet",template:'<div class="checkbox-facet">\n  <div appCypressData="checkbox-facet-title">\n    <ng-container *ngTemplateOutlet="facetTitleTemplate; context: {$implicit: facetGroupName}">\n    </ng-container>\n  </div>\n <div class="checkbox-facet-list" appCypressData="checkbox-facet-list">\n      <div *ngFor="let facet of facetGroup; let index = index">\n        <mat-checkbox\n          [checked]="facet.selected"\n          (change)="updateAllSelected(facet)"\n          [attr.appCypressData]="\'checkbox-facet-\' + index">\n          <ng-container *ngTemplateOutlet="facetTemplate; context: {$implicit: facet}">\n          </ng-container>\n        </mat-checkbox>\n      </div>\n  </div>\n</div>\n'}]}],J.propDecorators={facetTemplate:[{type:t.Input}],facetTitleTemplate:[{type:t.Input}],type:[{type:t.Input}]};var Q="YYYY",Z="MMMM YYYY",ee="MMMM D, YYYY",te=function(e){function n(n,a,r,i,l){var s=e.call(this)||this;return s.renderer=n,s._viewContainerRef=a,s.componentFactoryResolver=r,s.applicationRef=i,s.injector=l,s.onSelectionChange=new t.EventEmitter,s.dateRangeGroup=new o.FormGroup({start:new o.FormControl,end:new o.FormControl}),s.daysMap=new Map,s.monthsMap=new Map,s.yearsMap=new Map,s.buttonUnsubscribeFns=[],s}return A(n,e),n.prototype.ngOnChanges=function(t){e.prototype.ngOnChanges.call(this,t),this.mapFacetDates(this.data.facetGroupData),this.datePickerPlaceholder=this.data.placeholder,this.setSelectedRange(this.data.selectedRange)},n.prototype.ngOnDestroy=function(){e.prototype.ngOnDestroy.call(this),this.unsubscribeBtnListeners()},n.prototype.calendarOpened=function(){var e=this;setTimeout((function(){e.unsubscribeBtnListeners();var t=e.getCalendarPanelButtons();e.subscribeToBtnListeners(t),e.updateDayStyles()}))},n.prototype.calendarClosed=function(){this.unsubscribeBtnListeners(),this.dateRangeGroup.get("end").value&&this.dateRangeGroup.get("start").value&&(this.data.selectedRange=this.getSearchDateFacetRange(),this.onSelectionChange.emit(this.data.selectedRange))},n.prototype.inputChange=function(e){e.opened||this.calendarClosed()},n.prototype.mapFacetDates=function(e){var t,n;try{for(var a=N(e),o=a.next();!o.done;o=a.next()){var r=o.value,i=k.default(r.facetData).startOf("month").toISOString(),l=k.default(r.facetData).startOf("year").toISOString();this.daysMap.set(k.default(r.facetData).toISOString(),+r.count);var s=this.monthsMap.get(i)||0;this.monthsMap.set(i,s+ +r.count);var c=this.yearsMap.get(l)||0;this.yearsMap.set(l,c+ +r.count)}}catch(e){t={error:e}}finally{try{o&&!o.done&&(n=a.return)&&n.call(a)}finally{if(t)throw t.error}}},n.prototype.updateDayStyles=function(){document.querySelector("mat-month-view")?this.addTooltipsToCalendarCells("mat-month-view",this.daysMap,ee):document.querySelector("mat-multi-year-view")?this.addTooltipsToCalendarCells("mat-multi-year-view",this.yearsMap,Q):document.querySelector("mat-year-view")&&this.addTooltipsToCalendarCells("mat-year-view",this.monthsMap,Z)},n.prototype.addTooltipsToCalendarCells=function(e,t,n){var a=this;this.getCalendarCellsForView(e).forEach((function(e){t.forEach((function(t,o){k.default(e.getAttribute("aria-label"),n).isSame(o)&&a.createTooltipForCalendarCell(e,t)}))}))},n.prototype.createTooltipForCalendarCell=function(e,t){var n=this.getCalendarCellContent(e);if(0===this.getCalendarCellTooltipElements(e).length){var a=new D.TemplatePortal(this.toolTipTemplate,this._viewContainerRef);a.context={$implicit:t},new D.DomPortalOutlet(n,this.componentFactoryResolver,this.applicationRef,this.injector).attachTemplatePortal(a),n.classList.add("onto-date-range-facet-tooltip")}},n.prototype.getCalendarPanelButtons=function(){return document.querySelectorAll("mat-calendar .mat-calendar-body-cell, mat-calendar button, mat-calendar .mat-icon-button")},n.prototype.setSelectedRange=function(e){var t;t=e?new T.DateRange(k.default(e.selected.start),k.default(e.selected.end)):new T.DateRange(null,null),this.dateRangeGroup.setValue(t),this.dateRangeGroup.updateValueAndValidity(),this.data.selectedRange=e?this.getSearchDateFacetRange():null},n.prototype.getSearchDateFacetRange=function(){var e=this.dateRangeGroup.get("start").value,t=this.dateRangeGroup.get("end").value;return{name:this.facetGroupName,selected:{start:e.toDate(),end:t.toDate()},count:this.getCountForRange(e,t)}},n.prototype.getCountForRange=function(e,t){var n=this;return G(this.daysMap.keys()).filter((function(n){return e.isSameOrBefore(n)&&t.isSameOrAfter(n)})).map((function(e){return n.daysMap.get(e)})).reduce((function(e,t){return e+t}),0)},n.prototype.subscribeToBtnListeners=function(e){var t=this,n=[];e.forEach((function(e){var a=t.renderer.listen(e,"click",(function(){t.calendarOpened()}));n.push(a)})),this.buttonUnsubscribeFns=G(n)},n.prototype.unsubscribeBtnListeners=function(){this.buttonUnsubscribeFns.forEach((function(e){e()})),this.buttonUnsubscribeFns=[]},n.prototype.getCalendarCellsForView=function(e){var t=document.querySelectorAll(".onto-date-range-picker "+e);return t.length>0?t[0].querySelectorAll(".mat-calendar-body-cell"):[]},n.prototype.getCalendarCellContent=function(e){return e.querySelectorAll("div")[0]},n.prototype.getCalendarCellTooltipElements=function(e){return e.querySelectorAll("span.onto-date-range-facet-tooltiptext")},n}(X);te.decorators=[{type:t.Component,args:[{selector:"onto-daterange-facet",template:'<div class="onto-date-range-facet" appCypressData="onto-date-range-facet">\n  <div appCypressData="onto-date-range-facet-title">\n    <ng-container *ngTemplateOutlet="facetTitleTemplate">\n    </ng-container>\n  </div>\n  <div class="onto-date-range-facet-picker" appCypressData="onto-date-range-facet-picker">\n    <mat-form-field>\n      <mat-label>{{datePickerPlaceholder}}</mat-label>\n      <mat-date-range-input [rangePicker]="picker" [formGroup]="dateRangeGroup">\n        <input matInput matStartDate formControlName="start" (dateChange)="inputChange(picker)">\n        <input matInput matEndDate formControlName="end" (dateChange)="inputChange(picker)">\n      </mat-date-range-input>\n      <mat-datepicker-toggle matSuffix [for]="picker"\n                             appCypressData="onto-date-range-picker-toggle"></mat-datepicker-toggle>\n      <mat-date-range-picker panelClass="onto-date-range-picker" #picker\n                             (closed)="calendarClosed()"\n                             (opened)="calendarOpened()"\n                             appCypressData="onto-date-range-picker"></mat-date-range-picker>\n    </mat-form-field>\n    <ng-container *ngTemplateOutlet="facetTemplate; context: {$implicit: data.selectedRange}">\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #toolTipTemplate let-count>\n    <span class="onto-date-range-facet-tooltiptext">{{count}}</span>\n</ng-template>\n',styles:['::ng-deep .onto-date-range-facet-tooltip:not(.mat-calendar-body-selected):not(.mat-calendar-body-today){background-color:#f0f8ff;border-color:rgba(0,0,0,.38);border-style:dashed}::ng-deep .onto-date-range-facet-tooltip .onto-date-range-facet-tooltiptext{background-color:#000;border-radius:6px;bottom:120%;color:#fff;padding:8px;position:absolute;text-align:center;visibility:hidden;z-index:1}::ng-deep .onto-date-range-facet-tooltip:hover:after{border:8px solid transparent;border-top-color:#000;content:"";left:50%;margin-left:-8px;position:absolute;top:-25%}::ng-deep .onto-date-range-facet-tooltip:hover .onto-date-range-facet-tooltiptext{visibility:visible}']}]}],te.ctorParameters=function(){return[{type:t.Renderer2},{type:t.ViewContainerRef},{type:t.ComponentFactoryResolver},{type:t.ApplicationRef},{type:t.Injector}]},te.propDecorators={toolTipTemplate:[{type:t.ViewChild,args:["toolTipTemplate"]}],data:[{type:t.Input}],onSelectionChange:[{type:t.Output}]};var ne=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return A(t,e),t.prototype.ngOnChanges=function(t){var n;if(e.prototype.ngOnChanges.call(this,t),(null===(n=null==t?void 0:t.data)||void 0===n?void 0:n.currentValue)&&(this.color=this.data.color,this.facetGroup.sort(this.compareByLabel)),this.selected.length){var a=this.facetGroup.map((function(e){return e.label})).indexOf(this.selected[0].label);this.currentValueIndex=a>0?a:0,this.currentValue=Boolean(this.currentValueIndex),this.currentSelection=this.facetGroup[this.currentValueIndex],1===this.facetGroup.length&&0===a&&(this.currentValue=!0)}else 1===this.facetGroup.length?this.currentSelection=this.facetGroup[0]:(this.currentSelection=null,this.currentValue=null,this.currentValueIndex=null)},t.prototype.onToggle=function(e){var t,n;1===this.facetGroup.length?(this.facetGroup[0].selected=e.checked,n={name:this.facetGroupName,selected:[this.currentSelection],count:null===(t=this.currentSelection)||void 0===t?void 0:t.count}):(this.currentValueIndex=e.checked?1:0,this.currentSelection=this.facetGroup[this.currentValueIndex],this.refreshSelection(this.currentValueIndex),n={name:this.facetGroupName,selected:[this.currentSelection],count:this.currentSelection.count}),this.onSelectionChange.emit(n)},t.prototype.refreshSelection=function(e){this.facetGroup.forEach((function(t,n){return t.selected=n===e}))},t.prototype.compareByLabel=function(e,t){return e.label>t.label?1:t.label>e.label?-1:0},t}(X);ne.decorators=[{type:t.Component,args:[{selector:"onto-toggle-facet",template:'<div class="toggle-facet" appCypressData="toggle-facet">\n  <div *ngIf="facetTitleTemplate">\n    <ng-container [ngTemplateOutlet]="facetTitleTemplate"\n                  [ngTemplateOutletContext]="{$implicit: facetGroupName}"></ng-container>\n  </div>\n  <mat-slide-toggle appCypressData="toggle-facet-slide" class="toggle-facet-slide"\n                    [color]="color"\n                    (change)="onToggle($event)"\n                    [(ngModel)]="currentValue">\n    <ng-container [ngTemplateOutlet]="facetTemplate"\n                  [ngTemplateOutletContext]="{$implicit: currentSelection}">\n    </ng-container>\n  </mat-slide-toggle>\n</div>\n'}]}],ne.propDecorators={data:[{type:t.Input}]};var ae=function(){function e(){this._selectionChange=new t.EventEmitter,this.selectionChange=this._selectionChange.pipe(r.debounce((function(){return n.interval(2e3)}))),this.rangeCircleSize=14}return e.prototype.onResize=function(){},e.prototype.ngOnInit=function(){this.initializeData()},e.prototype.ngAfterViewInit=function(){var e=this;this.minElement=this.minSlider.nativeElement,this.maxElement=this.maxSlider.nativeElement,this.init(this.selectedMin,this.selectedMax),this.onResize=function(){return e.update(e.parseInt(e.maxElement.getAttribute("max")))}},e.prototype.ngOnChanges=function(e){var t;(null===(t=null==e?void 0:e.data)||void 0===t?void 0:t.currentValue)&&(this.initializeData(),this.init(this.selectedMin,this.selectedMax))},e.prototype.initializeData=function(){var e,t,n=this;this.facetData=G(this.data.facetGroupData),this.facetData.sort((function(e,t){try{return n.parseInt(e.label)-n.parseInt(t.label)}catch(e){throw new Error("Facet labels must represent numbers! "+e.message)}})),this.minValue=this.facetData[0].label,this.maxValue=this.facetData[this.facetData.length-1].label,this.selectedMin=(null===(e=this.data.selectedRange)||void 0===e?void 0:e.start)||this.minValue,this.selectedMax=(null===(t=this.data.selectedRange)||void 0===t?void 0:t.end)||this.maxValue,this.sum=this.sumRange()},e.prototype.draw=function(e){var t=this.parseInt(this.slider.nativeElement.getAttribute("data-thumbsize")),n=this.slider.nativeElement.clientWidth,a=this.parseInt(this.slider.nativeElement.getAttribute("data-rangemin")),o=this.parseInt(this.slider.nativeElement.getAttribute("data-rangemax"));this.minElement.setAttribute("max",e),this.maxElement.setAttribute("min",e),this.minElement.style.width=this.parseInt(t+(e-a)/(o-a)*(n-2*t))+"px",this.maxElement.style.width=this.parseInt(t+(o-e)/(o-a)*(n-2*t))+"px",this.minElement.style.left="0px",this.maxElement.style.left=this.parseInt(this.minElement.style.width)+"px",this.maxElement.value>o-1&&this.maxElement.setAttribute("data-value",o),this.maxElement.value=this.maxElement.getAttribute("data-value"),this.minElement.value=this.minElement.getAttribute("data-value")},e.prototype.init=function(e,t){var n=this;if(this.minElement&&this.maxElement){this.minElement.removeEventListener("input",(function(){return n.update})),this.maxElement.removeEventListener("input",(function(){return n.update}));var a=this.parseInt(this.minValue),o=this.parseInt(this.maxValue),r=this.parseInt(e)||a,i=this.parseInt(t)||o,l=(r+i)/2;this.minElement.setAttribute("data-value",r),this.maxElement.setAttribute("data-value",i),this.slider.nativeElement.setAttribute("data-rangemin",a),this.slider.nativeElement.setAttribute("data-rangemax",o),this.slider.nativeElement.setAttribute("data-thumbsize",this.rangeCircleSize),this.slider.nativeElement.setAttribute("data-rangewidth",this.slider.nativeElement.offsetWidth),this.draw(l),this.minElement.addEventListener("input",(function(){return n.update(o)})),this.maxElement.addEventListener("input",(function(){return n.update(o)}))}},e.prototype.update=function(e){var t,n;t=this.minElement.value>e-1?Math.floor(this.minElement.value-1):Math.floor(this.minElement.value),n=this.maxElement.value>e-1?Math.ceil(this.maxElement.value):Math.floor(this.maxElement.value),this.minElement.setAttribute("data-value",t),this.maxElement.setAttribute("data-value",n),this.selectedMin=t,this.selectedMax=n,this.updateSelection(),this.sum=this.sumRange();var a=Math.ceil((t+n)/2);this.draw(a)},e.prototype.sumRange=function(){var e=this,t=0;return this.data.facetGroupData.forEach((function(n){e.isInRange(n)&&(t+=n.count)})),t},e.prototype.onSelectionChange=function(){var e={name:this.data.facetGroupName,selected:this.data.selectedRange,count:this.sumRange()};this._selectionChange.emit(e)},e.prototype.updateSelection=function(){this.data.selectedRange={start:this.selectedMin,end:this.selectedMax},this.onSelectionChange()},e.prototype.isInRange=function(e){var t=this.parseInt(e.label);return t>=this.parseInt(this.selectedMin)&&t<=this.parseInt(this.selectedMax)},e.prototype.parseInt=function(e){try{return parseInt(e)}catch(t){throw new Error("Parsing "+e+" to number failed! "+t.message)}},e.prototype.ngOnDestroy=function(){var e=this;this.onResize=function(){},this.minElement.removeEventListener("input",(function(){return e.update})),this.maxElement.removeEventListener("input",(function(){return e.update}))},e}();ae.decorators=[{type:t.Component,args:[{selector:"onto-range-slider",template:'<div class="range-slider-wrapper">\n  <div class="range-slider">\n    <div class="slider" #slider>\n      <input class="range-slider-range min-range" type="range" min="{{minValue}}" max="{{maxValue}}" #minSlider\n             appCypressData="min-range"/>\n      <input class="range-slider-range max-range" type="range" min="{{minValue}}" max="{{maxValue}}" #maxSlider\n             appCypressData="max-range"/>\n    </div>\n  </div>\n  <div class="range-values">\n    <div class="range-slider-value value-min">{{minValue}}</div>\n    <div class="range-slider-value value-max">{{maxValue}}</div>\n  </div>\n  <div class="range-selecton">\n    <ng-container *ngTemplateOutlet="facetTemplate; context: {$implicit: data.selectedRange, sum: sumRange()}">\n    </ng-container>\n  </div>\n</div>\n\n',styles:[".range-slider{flex-direction:column;place-content:center space-around}.range-slider,.slider{align-items:center;cursor:pointer;display:flex;width:100%}.slider{flex-direction:row;max-height:100%;place-content:stretch center;text-align:center}.range-values{align-items:center;display:flex;flex-direction:row;place-content:space-between}.range-selecton,.range-values{margin-top:12px}.range-slider-range{-webkit-appearance:none;background:#d7dcdf;height:10px;margin:0;outline:none;padding:0;width:100%}.range-slider-range::-webkit-slider-thumb{-webkit-appearance:none;-webkit-transition:background .15s ease-in-out;appearance:none;background:#2c3e50;border-radius:50%;cursor:pointer;height:20px;transition:background .15s ease-in-out;width:20px}.range-slider-range::-webkit-slider-thumb:hover,.range-slider-range:active::-webkit-slider-thumb{background:#1abc9c}.range-slider-range::-moz-range-thumb{-moz-transition:background .15s ease-in-out;background:#2c3e50;border:0;border-radius:50%;cursor:pointer;height:20px;transition:background .15s ease-in-out;width:20px}.range-slider-range::-moz-range-thumb:hover,.range-slider-range:active::-moz-range-thumb{background:#1abc9c}.range-slider-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff,0 0 0 6px #1abc9c}::-moz-range-track{background:#d7dcdf;border:0}input::-moz-focus-inner,input::-moz-focus-outer{border:0}"]}]}],ae.propDecorators={data:[{type:t.Input}],facetTemplate:[{type:t.Input}],slider:[{type:t.ViewChild,args:["slider"]}],minSlider:[{type:t.ViewChild,args:["minSlider"]}],maxSlider:[{type:t.ViewChild,args:["maxSlider"]}],selectionChange:[{type:t.Output}],onResize:[{type:t.HostListener,args:["window:resize"]}]};var oe=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return A(t,e),t}(X);oe.decorators=[{type:t.Component,args:[{selector:"onto-range-facet",template:'<div class="onto-range-facet" appCypressData="onto-range-facet">\n  <ng-container *ngTemplateOutlet="facetTitleTemplate; context: {$implicit: data.facetGroupName}">\n  </ng-container>\n<onto-range-histogram *ngIf="data.showHistogram" [data]="data"></onto-range-histogram>\n<onto-range-slider [data]="data" [facetTemplate]="facetTemplate" (selectionChange)="onSelectionEvent($event)"></onto-range-slider>\n</div>\n',styles:[".onto-range-facet{width:100%}"]}]}],oe.propDecorators={data:[{type:t.Input}],facetTemplate:[{type:t.Input}]};var re=function(){function e(){}return e.prototype.ngAfterViewInit=function(){var e=this;this.histogramModel=this.data.histogramConfiguration,this.init(),new ResizeObserver((function(){e.init()})).observe(this.canvas.nativeElement)},e.prototype.ngOnChanges=function(e){var t;(null===(t=e.data)||void 0===t?void 0:t.currentValue)&&(this.histogramModel=this.data.histogramConfiguration,this.init())},e.prototype.init=function(){var e=this;if(this.canvas){this.fitToContainer(this.canvas.nativeElement),this.ctx=this.canvas.nativeElement.getContext("2d");var t=G(this.data.facetGroupData);t.sort((function(t,n){return e.parseInt(t.label)-e.parseInt(n.label)})),this.drawHistogram(this.fillEmptyValues(t))}},e.prototype.drawHistogram=function(e){var t,n,a;this.ctx.clearRect(0,0,this.canvas.nativeElement.getBoundingClientRect().width,this.canvas.nativeElement.getBoundingClientRect().height),this.ctx.save();for(var o=this.canvas.nativeElement.getBoundingClientRect().width/e.length,r=(null===(t=this.histogramModel)||void 0===t?void 0:t.scale)||.5,i=(null===(n=this.histogramModel)||void 0===n?void 0:n.baseYPos)||100,l=(null===(a=this.histogramModel)||void 0===a?void 0:a.fillStyle)||"rgba(200, 200, 200, 0.2)",s=0,c=0,p=0;p<e.length;p++){if(e[p].count>0)s=p*o,c=i-this.parseInt(e[p].count)*r,this.ctx.beginPath(),this.ctx.arc(s,c,e[p].count*r,0,2*Math.PI),this.ctx.fillStyle=l,this.ctx.fill(),this.ctx.restore()}this.ctx.restore()},e.prototype.fitToContainer=function(e){e.style.width="100%",e.style.height="100%",e.width=e.offsetWidth,e.height=e.offsetHeight},e.prototype.compare=function(e,t){var n=this.parseInt(e.label),a=this.parseInt(t.label);return n<a?-1:n>a?1:0},e.prototype.fillEmptyValues=function(e){var t=this,n={label:"0",count:0},a=[];return e.forEach((function(o,r){if(a.push(o),e[r+1])for(var i=t.parseInt(e[r+1].label)-t.parseInt(e[r].label);i>1;)a.push(n),i--})),a},e.prototype.parseInt=function(e){try{return parseInt(e)}catch(t){throw new Error("Parsing "+e+" to number failed! "+t.message)}},e}();re.decorators=[{type:t.Component,args:[{selector:"onto-range-histogram",template:'<div class="range-histogram">\n  <canvas id="range-histogram-canvas" #rangeHistogramCanvas>\n    {{"ONTO_RANGE_FACET.NO_CANVAS_SUPPORT" | transloco}}\n  </canvas>\n</div>\n',styles:[".range-histogram{align-items:center;display:flex;flex-direction:row;height:100px;margin-bottom:10px;place-content:center}"]}]}],re.propDecorators={data:[{type:t.Input}],canvas:[{type:t.ViewChild,args:["rangeHistogramCanvas"]}]};var ie=function(){};ie.decorators=[{type:t.NgModule,args:[{declarations:[oe,ae,re],imports:[a.CommonModule,I.MatSliderModule,g.TranslocoModule,B],exports:[oe]}]}];var le=function(e){function t(){var t=e.apply(this,G(arguments))||this;return t.selectedFormControl=new o.FormControl,t.filteredFormControl=new o.FormControl,t.filtered=new n.ReplaySubject(1),t}return A(t,e),t.prototype.ngOnChanges=function(t){e.prototype.ngOnChanges.call(this,t),t.data&&t.data.currentValue&&(this.selectedFormControl.setValue(this.selected),this.init())},t.prototype.init=function(){var e=this;this.filtered.next(this.facetGroup.slice()),this.selectedFormControl.setValue(this.selected),this.filteredFormControl.valueChanges.pipe(x.untilComponentDestroyed(this)).subscribe((function(){e.filter()}))},t.prototype.filter=function(){if(Array.isArray(this.facetGroup)){var e=this.filteredFormControl.value;e?(e=e.toLowerCase(),this.filtered.next(this.facetGroup.filter((function(t){return t.label.toLowerCase().indexOf(e)>-1})))):this.filtered.next(this.facetGroup.slice())}},t.prototype.onSelection=function(e){var t=e.value;t.forEach((function(e){return e.selected=!0})),this.facetGroup.filter((function(e){return-1===t.indexOf(e)})).map((function(e){return e.selected=!1})),this.selectedFacets=e.value},t.prototype.onOpenedChange=function(e){if(!e){var t={name:this.facetGroupName,selected:this.selectedFacets,count:this.countFacetResults()};this.onSelectionChange.emit(t)}},t.prototype.countFacetResults=function(){var e=0;return this.selectedFormControl.value.forEach((function(t){return e+=t.count})),e},t}(X);le.decorators=[{type:t.Component,args:[{selector:"onto-dropdown-multi-select-facet",template:'<div class="dropdown-multi-select" appCypressData="dropdown-multi-select">\n  <div appCypressData="facet-title">\n    <ng-container *ngTemplateOutlet="facetTitleTemplate; context: {$implicit: facetGroupName}">\n    </ng-container>\n  </div>\n  <mat-form-field>\n    <mat-select [formControl]="selectedFormControl"  multiple @.disabled (selectionChange)="onSelection($event)" (openedChange)="onOpenedChange($event)">\n      <mat-select-trigger appCypressData="dropdown-multi-select">\n        <span *ngFor="let facet of selectedFormControl.value; let index = index" appCypressData="selected-facets">\n          {{facet.label}}<span *ngIf="index < selectedFormControl.value.length - 1">{{\'ONTO_DROPDOWN.DELIMITER\' | transloco}}</span>\n        </span>\n      </mat-select-trigger>\n      <onto-dropdown-multi-select [formControl]="filteredFormControl"></onto-dropdown-multi-select>\n        <mat-option *ngFor="let item of filtered | async" [value]="item">\n        <ng-container *ngTemplateOutlet="facetTemplate; context: {$implicit: item}">\n        </ng-container>\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n',styles:[".dropdown-multi-select,.dropdown-multi-select mat-form-field{width:100%}"]}]}];var se=function(e){function n(n){var a=e.call(this)||this;return a.matSelect=n,a.onChange=function(){},a.onTouched=function(){},a.change=new t.EventEmitter,a.ENTER="Enter",a}return A(n,e),Object.defineProperty(n.prototype,"searchValue",{get:function(){return this.value},enumerable:!1,configurable:!0}),n.prototype.ngOnInit=function(){var e=this;this.matSelect.panelClass="mat-select-search-panel",this.matSelect.openedChange.pipe(x.untilComponentDestroyed(this)).subscribe((function(t){e.options=e.matSelect.options,t?e.focus():e.reset()})),this.matSelect.typeaheadDebounceInterval=31536e3,this.init()},n.prototype.initMultiSelectedValues=function(){this.matSelect.multiple&&(this.previousSelectedValues=this.matSelect.options.filter((function(e){return e.selected})).map((function(e){return e.value})))},n.prototype.handleKeydown=function(e){e.key===this.ENTER&&e.stopPropagation()},n.prototype.writeValue=function(e){e!==this.value&&(this.value=e,this.change.emit(e))},n.prototype.onInputChange=function(e){e!==this.value&&(this.initMultiSelectedValues(),this.value=e,this.onChange(e),this.change.emit(e))},n.prototype.onBlur=function(e){this.writeValue(e),this.onTouched()},n.prototype.registerOnChange=function(e){this.onChange=e},n.prototype.registerOnTouched=function(e){this.onTouched=e},n.prototype.focus=function(){var e=this;this.searchSelectInput&&setTimeout((function(){e.searchSelectInput.nativeElement.focus()}),0)},n.prototype.reset=function(e){this.searchSelectInput&&(this.searchSelectInput.nativeElement.value="",this.onInputChange(""),e&&this.focus())},n.prototype.init=function(){var e=this;this.matSelect.valueChange.pipe(x.untilComponentDestroyed(this)).subscribe((function(t){if(e.matSelect.multiple){var n=!1;if(e.value&&e.value.length&&Array.isArray(e.previousSelected)){Array.isArray(t)||(t=[]);var a=e.matSelect.options.map((function(e){return e.value}));e.previousSelected.forEach((function(e){-1===t.indexOf(e)&&-1===a.indexOf(e)&&(t.push(e),n=!0)}))}n&&e.matSelect._onChange(t),e.previousSelected=t}}))},n}(x.OnDestroyMixin);se.decorators=[{type:t.Component,args:[{selector:"onto-dropdown-multi-select",template:'<div class="mat-select-search-inner">\n  <input class="mat-select-search-input" appCypressData="mat-select-search-input"\n         #searchSelectInput\n         (keydown)="handleKeydown($event)"\n         (input)="onInputChange($event.target.value)"\n         (blur)="onBlur($event.target.value)"\n         placeholder="{{\'ONTO_DROPDOWN.SEARCH_PLACEHOLDER\' | transloco}}"\n         autocomplete="off"/>\n  <button mat-button *ngIf="searchValue"\n          mat-icon-button\n          aria-label="Clear"\n          (click)="reset(true)"\n          class="mat-select-search-clear-button">\n    <mat-icon>close</mat-icon>\n  </button>\n</div>\n\n<div *ngIf="searchValue && options?.length === 0"\n     class="mat-select-search-no-found" appCypressData="mat-select-search-no-found">\n  {{\'ONTO_DROPDOWN.NOT_FOUND\' | transloco}}\n</div>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return se})),multi:!0}],encapsulation:t.ViewEncapsulation.None,styles:[".mat-select-search-inner{background:#fff;border-bottom:1px solid #3f51b5;margin-right:16px;position:absolute;top:0;width:100%;z-index:100}input{border:0;font-family:Roboto,Helvetica Neue,sans-serif}input:focus{outline:none}.mat-select-search-panel{max-height:350px;min-width:100%!important;transform:none!important}.mat-select-search-input{box-sizing:border-box;padding:16px 36px 16px 16px;width:calc(100% - 42px)!important}.mat-select-search-no-found{font-family:Roboto,Helvetica Neue,sans-serif;padding:16px}.mat-select-search-clear-button{position:absolute;right:0;top:4px}.cdk-overlay-pane{animation:fadeIn .2s ease-in!important;margin-top:50px!important;opacity:1!important;padding-top:50px!important;transform:translateY(-15px)!important}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.mat-icon-button{margin-bottom:8px!important}"]}]}],se.ctorParameters=function(){return[{type:u.MatSelect,decorators:[{type:t.Inject,args:[u.MatSelect]}]}]},se.propDecorators={searchSelectInput:[{type:t.ViewChild,args:["searchSelectInput",{static:!1,read:t.ElementRef}]}]};var ce={ONTO_RANGE_FACET:{SELECTED:"Selected: ",NO_CANVAS_SUPPORT:"Your browser does not support canvas.",SELECTED_MIN:"Selected min:",SELECTED_MAX:"Selected max:"},ONTO_DROPDOWN:{SEARCH_PLACEHOLDER:"Search...",NOT_FOUND:"No match found!",DELIMITER:","}},pe={parse:{dateInput:["l","LL","DD/MM/YYYY","MM/DD/YYYY"]},display:{dateInput:"L",monthYearLabel:"MMM YYYY",dateA11yLabel:"LL",monthYearA11yLabel:"MMMM YYYY"}},ue={availableLangs:["en"],fallbackLang:["en"],defaultLang:"en",prodMode:!0,reRenderOnLangChange:!0,missingHandler:{useFallbackTranslation:!0,logMissingKey:!0}},de=function(e){this.translocoService=e,this.translocoService.setTranslation(ce,"en")};de.decorators=[{type:t.NgModule,args:[{declarations:[X,J,te,ne,le,se],imports:[a.CommonModule,S.MatCheckboxModule,o.FormsModule,B,E.MatFormFieldModule,s.MatInputModule,T.MatDatepickerModule,M.MatMomentDateModule,o.ReactiveFormsModule,w.MatSlideToggleModule,g.TranslocoModule,u.MatSelectModule,m.MatIconModule,h.MatButtonModule,c.NoopAnimationsModule,d.MatChipsModule,ie],exports:[X],providers:[{provide:p.MAT_DATE_FORMATS,useValue:pe},{provide:g.TRANSLOCO_CONFIG,useValue:ue}]}]}],de.ctorParameters=function(){return[{type:g.TranslocoService}]};var me=function(){},he=function(){},ge=function(){this.showHistogram=!1},fe=function(){function e(){this.selectionChanged=new t.EventEmitter,this.selectCtrl=new o.FormControl,this.selection=[],this.isSelectionChanged=!1}return e.prototype.ngOnChanges=function(e){var t,n,a,o=null===(t=null==e?void 0:e.defaultColumns)||void 0===t?void 0:t.currentValue,r=null===(n=null==e?void 0:e.selectedColumns)||void 0===n?void 0:n.currentValue,i=null===(a=null==e?void 0:e.columnGroups)||void 0===a?void 0:a.currentValue;o&&o.length>0&&!this.selectedColumns&&this.setFormColumnSelection(o),r&&this.setFormColumnSelection(r),(null==i?void 0:i.length)&&this.columnGroups.sort(this.compareColumnsByLabel)},e.prototype.selectionChangedInternal=function(e){this.isSelectionChanged=!0,this.selection=e.value},e.prototype.onClosed=function(){this.isSelectionChanged&&(this.isSelectionChanged=!1,this.selectionChanged.next(this.selection))},e.prototype.compareColumnsLabels=function(e,t){return e.label===t.label},e.prototype.resetColumns=function(){this.setFormColumnSelection(this.defaultColumns),this.onClosed()},e.prototype.setFormColumnSelection=function(e){this.selectCtrl.setValue(G(e)),this.selectCtrl.updateValueAndValidity(),this.selection=e,this.isSelectionChanged=!0},e.prototype.compareColumnsByLabel=function(e,t){return e.label>t.label?1:t.label>e.label?-1:0},e}();fe.decorators=[{type:t.Component,args:[{selector:"onto-search-column-selector",template:'<div class="onto-column-selector-component" appCypressData="onto-column-selector-component">\n  <button class="column-reset-button" mat-raised-button appCypressData="column-reset-button"\n          color="primary"\n          (click)="resetColumns()">{{\'ONTO_COLUMN_SELECTOR.BUTTON.RESET\' | transloco}}</button>\n  <div class="column-select">\n    <mat-form-field class="form-field">\n      <mat-label>{{\'ONTO_COLUMN_SELECTOR.COLUMN_SELECTOR_PLACEHOLDER\' | transloco}}</mat-label>\n      <mat-select multiple (selectionChange)="selectionChangedInternal($event)"\n                  [formControl]="selectCtrl" [compareWith]="compareColumnsLabels"\n                  (closed)="onClosed()" appCypressData="column-selection-dropdown">\n        <mat-optgroup *ngFor="let columnGroup of columnGroups, let index = index"\n                      [label]="columnGroup.label" [attr.appCypressData]="\'column-group-\' + index">\n          <mat-option *ngFor="let column of columnGroup.columns, let index = index" [value]="column"\n                      [attr.appCypressData]="\'column-option-\' + index">\n            {{column.label}}\n          </mat-option>\n        </mat-optgroup>\n      </mat-select>\n    </mat-form-field>\n  </div>\n</div>\n',styles:[".onto-column-selector-component{align-items:center;box-sizing:border-box;display:flex;flex-direction:row;height:100%;place-content:center flex-start;width:100%}.onto-column-selector-component .column-select{box-sizing:border-box;flex:1 1}.onto-column-selector-component .form-field{display:inherit}.onto-column-selector-component .column-reset-button{margin-right:1em}"]}]}],fe.propDecorators={columnGroups:[{type:t.Input}],selectedColumns:[{type:t.Input}],defaultColumns:[{type:t.Input}],selectionChanged:[{type:t.Output}]};var ye={ONTO_COLUMN_SELECTOR:{BUTTON:{RESET:"Reset"},COLUMN_SELECTOR_PLACEHOLDER:"Search results columns"}},ve={availableLangs:["en"],fallbackLang:["en"],defaultLang:"en",prodMode:!0,reRenderOnLangChange:!0,missingHandler:{useFallbackTranslation:!0,logMissingKey:!0}},Ce=function(e){this.translocoService=e,this.translocoService.setTranslation(ye,"en")};Ce.decorators=[{type:t.NgModule,args:[{imports:[B,h.MatButtonModule,E.MatFormFieldModule,u.MatSelectModule,o.ReactiveFormsModule,g.TranslocoModule,a.CommonModule],declarations:[fe],providers:[{provide:g.TRANSLOCO_CONFIG,useValue:ve}],exports:[fe]}]}],Ce.ctorParameters=function(){return[{type:g.TranslocoService}]},e.OntoSearchColumnSelector=fe,e.OntoSearchColumnSelectorModule=Ce,e.OntoSearchFacetComponent=X,e.OntoSearchFacetModule=de,e.OntoSearchFieldComponent=F,e.OntoSearchFieldModule=Y,e.OntoSearchPaginatorComponent=j,e.OntoSearchPaginatorModule=W,e.OntoSearchResultsComponent=$,e.OntoSearchResultsModule=K,e.SearchDateFacetGroupModel=me,e.SearchDateFacetModel=he,e.SearchFieldConfiguration=_,e.SearchRangeFacetGroupModel=ge,e.ɵ0=H,e.ɵ1=ue,e.ɵa=P,e.ɵb=B,e.ɵc=q,e.ɵd=J,e.ɵe=te,e.ɵf=ne,e.ɵg=le,e.ɵh=se,e.ɵi=ie,e.ɵj=oe,e.ɵk=ae,e.ɵl=re,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=onto-search.umd.min.js.map