{"__symbolic":"module","version":4,"metadata":{"FilterGroupModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"FilterGroupComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":22,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":23,"character":4},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":24,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":25,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":26,"character":4},{"__symbolic":"reference","module":"@angular/material/divider","name":"MatDividerModule","line":27,"character":4},{"__symbolic":"reference","module":"@angular/material/badge","name":"MatBadgeModule","line":28,"character":4},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":29,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":30,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":31,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":32,"character":4},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":33,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":34,"character":4},{"__symbolic":"reference","module":"@ffdc/uxg-angular-components/core","name":"ClickOutsideModule","line":35,"character":4}],"entryComponents":[{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"FilterGroupComponent"},{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"FilterGroupComponentData":{"__symbolic":"interface"},"SavedFilter":{"__symbolic":"interface"},"FilterGroupComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":31,"character":1},"arguments":[{"selector":"uxg-filter-group","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":35,"character":17},"member":"None"},"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":36,"character":19},"member":"OnPush"},"template":"<mat-expansion-panel\n  #filterGroupPanel\n  class=\"uxg-expansion-filter uxg-filter-group\"\n  hideToggle=\"true\"\n  [expanded]=\"expanded\"\n  [class.active]=\"isActive\"\n  (uxgClickOutside)=\"handleOutsideClick()\"\n>\n  <mat-expansion-panel-header\n    [expandedHeight]=\"headerHeight\"\n    [collapsedHeight]=\"headerHeight\"\n    (click)=\"$event.stopPropagation(); filterGroupPanel.expanded ? open() : close()\"\n  >\n    <div class=\"uxg-filter-group-header\">\n      <div class=\"selectedFilters\">\n        <ng-container *ngFor=\"let filter of selectedData; let i = index\">\n          <div\n            *ngIf=\"filter.selectedData.length && !filter.selectedData[0].value\"\n            matBadge=\"{{ filter.selectedData.length }}\"\n            class=\"uxg-group-filter uxg-side-badge\"\n          >\n            {{ filter.title }}\n          </div>\n          <div *ngIf=\"!filter.selectedData.length\" matBadge=\"All\" class=\"uxg-group-filter uxg-side-badge\">\n            {{ filter.title }}\n          </div>\n          <div\n            *ngIf=\"filter.selectedData.length && filter.selectedData[0].value\"\n            class=\"uxg-group-filter uxg-side-badge\"\n          >\n            {{ filter.title }}<span class=\"filter-value\">{{ filter.selectedData[0].label }}</span>\n          </div>\n          <mat-divider *ngIf=\"checkDivider(i)\" class=\"filter-divider\" vertical></mat-divider>\n        </ng-container>\n      </div>\n      <span class=\"fill-remaining-space\"></span>\n      <div class=\"expand-button\">\n        <button mat-icon-button [color]=\"filterGroupPanel.expanded ? 'primary' : 'neutral'\">\n          <mat-icon>{{ filterGroupPanel.expanded ? 'arrow_drop_up' : 'arrow_drop_down' }}</mat-icon>\n        </button>\n      </div>\n    </div>\n  </mat-expansion-panel-header>\n\n  <div class=\"expansion-panel-header\">\n    <h6 class=\"uxg-h6\">Filter by</h6>\n    <button mat-button color=\"accent\" dense (click)=\"clearSelection()\">\n      <mat-icon>refresh</mat-icon>\n      Reset\n    </button>\n  </div>\n\n  <ng-template matExpansionPanelContent>\n    <div class=\"expansion-panel-content\" fxLayout=\"row wrap\" fxLayoutAlign=\"start\">\n      <ng-content></ng-content>\n    </div>\n\n    <ng-container *ngIf=\"showActions\">\n      <mat-divider></mat-divider>\n      <div class=\"expansion-panel-actions\" fxLayout=\"row wrap\">\n        <div class=\"saved-filters-container\">\n          <mat-chip-list #savedFiltersList>\n            <mat-chip\n              *ngFor=\"let filter of savedFilters\"\n              large\n              removable\n              (click)=\"selectFilter(filter)\"\n              [selected]=\"filter.isSelected\"\n              (removed)=\"removeFilter(filter)\"\n            >\n              {{ filter.filterName }}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip>\n          </mat-chip-list>\n        </div>\n\n        <button *ngIf=\"savedFilters.length\" mat-button color=\"accent\" (click)=\"updateFilter()\">Update</button>\n        <button *ngIf=\"savedFilters.length\" mat-button color=\"accent\" (click)=\"clearSelection()\">Clear</button>\n        <mat-divider vertical=\"true\"></mat-divider>\n        <button mat-stroked-button color=\"accent\" (click)=\"openDialog()\">Save as</button>\n        <button mat-stroked-button color=\"accent\" (click)=\"filterGroupPanel.toggle(); close()\">Cancel</button>\n        <button mat-flat-button color=\"accent\" (click)=\"applyFilters()\">Apply</button>\n      </div>\n    </ng-container>\n  </ng-template>\n</mat-expansion-panel>\n","styles":[".mt-0{margin-top:0!important}.pt-0{padding-top:0!important}.mb-0{margin-bottom:0!important}.pb-0{padding-bottom:0!important}.ml-0{margin-left:0!important}.pl-0{padding-left:0!important}.mr-0{margin-right:0!important}.pr-0{padding-right:0!important}.m-0{margin:0!important}.p-0{padding:0!important}.mt-1{margin-top:4px!important}.pt-1{padding-top:4px!important}.mb-1{margin-bottom:4px!important}.pb-1{padding-bottom:4px!important}.ml-1{margin-left:4px!important}.pl-1{padding-left:4px!important}.mr-1{margin-right:4px!important}.pr-1{padding-right:4px!important}.m-1{margin:4px!important}.p-1{padding:4px!important}.mt-2{margin-top:8px!important}.pt-2{padding-top:8px!important}.mb-2{margin-bottom:8px!important}.pb-2{padding-bottom:8px!important}.ml-2{margin-left:8px!important}.pl-2{padding-left:8px!important}.mr-2{margin-right:8px!important}.pr-2{padding-right:8px!important}.m-2{margin:8px!important}.p-2{padding:8px!important}.mt-3{margin-top:16px!important}.pt-3{padding-top:16px!important}.mb-3{margin-bottom:16px!important}.pb-3{padding-bottom:16px!important}.ml-3{margin-left:16px!important}.pl-3{padding-left:16px!important}.mr-3{margin-right:16px!important}.pr-3{padding-right:16px!important}.m-3{margin:16px!important}.p-3{padding:16px!important}.mt-4{margin-top:24px!important}.pt-4{padding-top:24px!important}.mb-4{margin-bottom:24px!important}.pb-4{padding-bottom:24px!important}.ml-4{margin-left:24px!important}.pl-4{padding-left:24px!important}.mr-4{margin-right:24px!important}.pr-4{padding-right:24px!important}.m-4{margin:24px!important}.p-4{padding:24px!important}.mt-5{margin-top:48px!important}.pt-5{padding-top:48px!important}.mb-5{margin-bottom:48px!important}.pb-5{padding-bottom:48px!important}.ml-5{margin-left:48px!important}.pl-5{padding-left:48px!important}.mr-5{margin-right:48px!important}.pr-5{padding-right:48px!important}.m-5{margin:48px!important}.p-5{padding:48px!important}.mt-6{margin-top:96px!important}.pt-6{padding-top:96px!important}.mb-6{margin-bottom:96px!important}.pb-6{padding-bottom:96px!important}.ml-6{margin-left:96px!important}.pl-6{padding-left:96px!important}.mr-6{margin-right:96px!important}.pr-6{padding-right:96px!important}.m-6{margin:96px!important}.p-6{padding:96px!important}.uxg-expansion-filter .filter-value{padding:0 8px}.uxg-expansion-filter .mat-expansion-panel-header{border-width:1px;border-style:solid;cursor:default!important;padding-right:0}.uxg-expansion-filter .mat-expansion-panel-header .uxg-filter-group-header{width:100%;display:flex;align-items:center;cursor:default}.uxg-expansion-filter .mat-expansion-panel-header .uxg-filter-group-header .fill-remaining-space{flex:1 1 auto}.uxg-expansion-filter .mat-expansion-panel-header .uxg-filter-group-header .selectedFilters{overflow:hidden;display:flex}.uxg-expansion-filter .mat-expansion-panel-header .uxg-filter-group-header .selectedFilters .uxg-group-filter{flex:0 0 auto;margin-right:24px}.uxg-expansion-filter .mat-expansion-panel-header .uxg-filter-group-header .selectedFilters .filter-divider{margin-right:24px}.uxg-expansion-filter .mat-expansion-panel-header .uxg-filter-group-header .selectedFilters .mat-standard-chip{cursor:pointer}.expansion-panel-header{display:flex;padding:8px 24px;box-sizing:border-box;justify-content:space-between;border-top-left-radius:4px;border-top-right-radius:4px}.expansion-panel-header .uxg-h6{align-self:center;margin-bottom:0}.expansion-panel-content{padding:24px}.expansion-panel-actions{padding:16px;align-items:center}.expansion-panel-actions .saved-filters-container{flex:1}.expansion-panel-actions .saved-filters-container .mat-chip{cursor:pointer}.expansion-panel-actions .mat-button-base{margin-left:16px}"]}]}],"members":{"changes":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":3}}]}],"filterInstances":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":40,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵa"},{"descendants":true}]}]}],"expansionPanel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":41,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionPanel","line":41,"character":13}]}]}],"expanded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"divideAtIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"showActions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"autoApply":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialog","line":58,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":58,"character":52}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"openDialog":[{"__symbolic":"method"}],"selectFilter":[{"__symbolic":"method"}],"applyFilters":[{"__symbolic":"method"}],"updateFilter":[{"__symbolic":"method"}],"removeFilter":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"resetSelection":[{"__symbolic":"method"}],"getFilterStates":[{"__symbolic":"method"}],"getState":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"getSelectedFilterState":[{"__symbolic":"method"}],"checkIsActive":[{"__symbolic":"method"}],"checkListEquality":[{"__symbolic":"method"}],"checkDivider":[{"__symbolic":"method"}],"handleOutsideClick":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[uxgFilter]"}]}],"members":{"instance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":5,"character":3},"arguments":["uxgFilter"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":9,"character":27}]}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"uxg-filter-group-dialog","template":"<div mat-dialog-content class=\"filter-group-dialog-header\">\n  <div class=\"dialog-title uxg-h6\">Name of Filter</div>\n</div>\n<div mat-dialog-content>\n  <mat-form-field class=\"filter-group-dialog-form\">\n    <input matInput placeholder=\"Name\" maxlength=\"10\" [formControl]=\"filterName\" />\n    <mat-error *ngIf=\"filterName.invalid\">{{ getErrorMessage() }}</mat-error>\n  </mat-form-field>\n</div>\n<div mat-dialog-actions class=\"filter-group-dialog-actions\">\n  <button mat-stroked-button color=\"accent\" (click)=\"save()\">Save</button>\n</div>\n","styles":[".mt-0{margin-top:0!important}.pt-0{padding-top:0!important}.mb-0{margin-bottom:0!important}.pb-0{padding-bottom:0!important}.ml-0{margin-left:0!important}.pl-0{padding-left:0!important}.mr-0{margin-right:0!important}.pr-0{padding-right:0!important}.m-0{margin:0!important}.p-0{padding:0!important}.mt-1{margin-top:4px!important}.pt-1{padding-top:4px!important}.mb-1{margin-bottom:4px!important}.pb-1{padding-bottom:4px!important}.ml-1{margin-left:4px!important}.pl-1{padding-left:4px!important}.mr-1{margin-right:4px!important}.pr-1{padding-right:4px!important}.m-1{margin:4px!important}.p-1{padding:4px!important}.mt-2{margin-top:8px!important}.pt-2{padding-top:8px!important}.mb-2{margin-bottom:8px!important}.pb-2{padding-bottom:8px!important}.ml-2{margin-left:8px!important}.pl-2{padding-left:8px!important}.mr-2{margin-right:8px!important}.pr-2{padding-right:8px!important}.m-2{margin:8px!important}.p-2{padding:8px!important}.mt-3{margin-top:16px!important}.pt-3{padding-top:16px!important}.mb-3{margin-bottom:16px!important}.pb-3{padding-bottom:16px!important}.ml-3{margin-left:16px!important}.pl-3{padding-left:16px!important}.mr-3{margin-right:16px!important}.pr-3{padding-right:16px!important}.m-3{margin:16px!important}.p-3{padding:16px!important}.mt-4{margin-top:24px!important}.pt-4{padding-top:24px!important}.mb-4{margin-bottom:24px!important}.pb-4{padding-bottom:24px!important}.ml-4{margin-left:24px!important}.pl-4{padding-left:24px!important}.mr-4{margin-right:24px!important}.pr-4{padding-right:24px!important}.m-4{margin:24px!important}.p-4{padding:24px!important}.mt-5{margin-top:48px!important}.pt-5{padding-top:48px!important}.mb-5{margin-bottom:48px!important}.pb-5{padding-bottom:48px!important}.ml-5{margin-left:48px!important}.pl-5{padding-left:48px!important}.mr-5{margin-right:48px!important}.pr-5{padding-right:48px!important}.m-5{margin:48px!important}.p-5{padding:48px!important}.mt-6{margin-top:96px!important}.pt-6{padding-top:96px!important}.mb-6{margin-bottom:96px!important}.pb-6{padding-bottom:96px!important}.ml-6{margin-left:96px!important}.pl-6{padding-left:96px!important}.mr-6{margin-right:96px!important}.pr-6{padding-right:96px!important}.m-6{margin:96px!important}.p-6{padding:96px!important}.filter-group-dialog-header{position:relative;top:-24px}.filter-group-dialog-header .dialog-title{margin-top:16px}.filter-group-dialog-form{width:100%}.filter-group-dialog-actions.mat-dialog-actions{display:flex;justify-content:center}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":17,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material/dialog","name":"MAT_DIALOG_DATA","line":17,"character":12}]}]],"parameters":[{"__symbolic":"reference","name":"MatDialogRef","module":"@angular/material/dialog","arguments":[{"__symbolic":"reference","name":"ɵb"}]},{"__symbolic":"reference","name":"any"}]}],"onNoClick":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"nameExistsValidator":[{"__symbolic":"method"}],"getErrorMessage":[{"__symbolic":"method"}]}}},"origins":{"FilterGroupModule":"./src/filter-group.module","FilterGroupComponentData":"./src/filter-group.component","SavedFilter":"./src/filter-group.component","FilterGroupComponent":"./src/filter-group.component","ɵa":"./src/filter.directive","ɵb":"./src/filter-group-dialog/filter-group-dialog.component"},"importAs":"@ffdc/uxg-angular-components/filter/filter-group"}