openaire-library/searchPages/searchUtils/newSearchPage.component.html

386 lines
22 KiB
HTML
Raw Normal View History

<ng-template #selected_filters_pills>
<h1 class="uk-grid uk-grid-small uk-text-small" uk-grid>
<ng-container *ngIf="customFilter && ((customFilterEnabled &&
refineFields.indexOf(customFilter.queryFieldName) ==
-1) ||customFilter.isHiddenFilter)">
<span class="uk-width-auto">
<span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span>
</span>
</span>
</ng-container>
<ng-container *ngIf=" resultTypes && resultTypes.countSelectedValues > 0">
<ng-container *ngFor="let type of resultTypes.values; let i = index; let end = last; ">
<ng-container *ngIf="type.selected">
<span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)" [class.uk-disabled]="disabled">
<span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
<icon name="close" ratio="0.5" flex="true"></icon>
</span>
</a>
</span>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngIf="selectedRangeFilters > 0">
<ng-container *ngFor="let filter of rangeFilters ">
<ng-container *ngIf="filter.selectedFromAndToValues">
<span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
[class.uk-disabled]="disabled">
<span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
<icon name="close" ratio="0.5" flex="true"></icon>
</span>
</a>
</span>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngFor="let filter of filters ">
<ng-container *ngIf="filter.countSelectedValues > 0">
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
<span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)" class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)" [class.uk-disabled]="disabled">
<span class="uk-label uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
<icon name="close" ratio="0.5" flex="true"></icon>
</span>
</a>
</span>
</ng-container>
</ng-container>
</ng-container>
</h1>
</ng-template>
<ng-template #filters_column>
<div [class.filterLoading]="disabled">
<div class="uk-flex uk-flex-middle">
<h4 class="uk-margin-right uk-margin-remove-bottom">Filters</h4>
<a *ngIf="(selectedRangeFilters + selectedFilters + selectedTypesNum)>0"
(click)="clearFilters()" class="uk-text-small"
[class.uk-disabled]="disabled" [class.uk-link-muted]="disabled">
Clear All
</a>
</div>
<div *ngIf="searchUtils.refineStatus == errorCodes.LOADING && existingFiltersWithValues === 0"
class="uk-margin-top" role="alert">
<loading></loading>
</div>
<div *ngIf="searchUtils.refineStatus != errorCodes.LOADING && searchUtils.refineStatus != errorCodes.DONE && results.length > 0"
class="uk-margin-top uk-text-meta">
<span *ngIf="searchUtils.refineStatus == errorCodes.NONE">No filters available</span>
<span *ngIf="searchUtils.refineStatus != errorCodes.NONE" class="uk-text-warning">Filters temporarily unavailable. Please try again later.</span>
</div>
2022-01-20 12:42:10 +01:00
<ul *ngIf="!showUnknownFilters" class="uk-list uk-list-large">
<li *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'">
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
[isDisabled]="disabled"
[Trunk | Library]: 1. searchUtils.class.ts: In SearchUtilsClass added field "refineStatus:number = 1;" for refine queries. 2. searchResultsPerPage.component.ts & searchSorting.component.ts: [Bug fix] In EventEmitter (value change), emit raw value, not object with field "value". 3. searchDataProviders.component.ts & searchOrganizations.component.ts & searchProjects.component.ts & searchResearchResults.component.ts: a. Add subscriptions in array to unsubscribe in ngOnDestroy. b. Get properties from environment (no service needed). c. Separate queries for refine and results. d. Do not call refine query when page, results per page, sortBy change (there is still a bug here). e. For refine query, added field "disableRefineForms" default set to false - passed in <new-search-page>. 4. newSearchPage.component.html: a. Disable forms when "disableForms" or "disableRefineForms" is true. b. Do not show filters, until results query returns, but show results while refine is loading. c. Deleted old, unused code. 5. newSearchPage.component.ts: a. Added fields "@Input() disableRefineForms: boolean = false;", "@Input() sortedByChanged: string = "";", "@Input() resultsPerPageChanged: number;" b. When results per page or sortBy change, do not upadate immediately searchUtils values - do not query for refine when these change (there is still a bug here). git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59155 d315682c-612b-4755-9ff5-7f18f6832af3
2020-07-21 15:48:55 +02:00
[filter]="filters[0]" [showResultCount]=showResultCount
(onFilterChange)="filterChanged($event)" [quickFilter]="quickFilter"
[actionRoute]="true"></search-filter>
</li>
<li *ngIf="resultTypes && (filters.length > 0)">
<quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
[isDisabled]="disabled" [vertical]="true"
[properties]="properties" [actionRoute]="true">
</quick-selections>
</li>
<li *ngFor="let filter of rangeFilters">
<range-filter [isDisabled]="disabled" [filter]="filter"
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></range-filter>
</li>
<ng-container *ngFor="let filter of filters ">
<li *ngIf="filter.values && filter.values.length > 0 && filter.filterId != 'resultbestaccessright'">
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
[isDisabled]="disabled"
[filter]="filter" [showResultCount]=showResultCount
(onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>
</li>
</ng-container>
</ul>
</div>
</ng-template>
<!-- TODO - Kostis Clean up -->
<div *ngIf="!includeOnlyResultsAndFilter" [class]="usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
(stickyForm?'':' uk-position-relative ') :
(+ (stickyForm?'':' uk-section') +' uk-padding-remove-bottom uk-padding-remove-top ' +
((usedBy == 'deposit' || usedBy == 'orcid') ? ' uk-padding-remove-top ' : ' '))"
[attr.uk-sticky]="(stickyForm?'{animation:false;offset:100;top:90;cls-active:uk-active uk-sticky-below;cls-inactive:uk-sticky '+
(usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
' uk-position-relative ' :(' uk-section ' ))+'}':null)">
<div style="box-sizing: border-box; "
[class]="' uk-background-norepeat uk-background-bottom-center uk-padding-remove-bottom uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
+ (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') && !dashboard ?
' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section' : '')
+(simpleView?'':' advancedSearchFormBackground ')">
<!-- TODO - Kostis until here-->
<div class="uk-width-1-1">
<div class="uk-container uk-container-large">
<div class="uk-padding-small">
<breadcrumbs *ngIf="showBreadcrumb" [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-position-relative uk-margin-medium-bottom">
<div class="uk-container uk-container-large uk-section" id="searchForm">
<advanced-search-form
[entityType]="entityType"
[fieldIds]="fieldIds"
[fieldIdsMap]="fieldIdsMap"
[selectedFields]="selectedFields"
(queryChange)="queryChanged($event)"
[isDisabled]="disabled"
[simpleSearchLink]="simpleSearchLink"
[advancedSearchLink]="advancedSearchLink"
[advancedSearchLinkParameters]
="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
[simpleView]="simpleView" [formPlaceholderText]="formPlaceholderText"
[resultTypes]="resultTypes" [quickFilter]="quickFilter" [entitiesSelection]="entitiesSelection"
[showSwitchSearchLink]="showSwitchSearchLink" [customFilter]="customFilter"
>
</advanced-search-form>
</div>
</div>
</div>
</div>
</div>
<schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
[searchAction]=false [description]="metaDescription" ></schema2jsonld>
<div id="tm-main" class=" tm-middle" [class.uk-margin-top]="stickyForm">
<div uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-container-large">
<div>
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
[texts]="pageContents['top']"></helper>
[Trunk | Library]: 1. searchUtils.class.ts: In SearchUtilsClass added field "refineStatus:number = 1;" for refine queries. 2. searchResultsPerPage.component.ts & searchSorting.component.ts: [Bug fix] In EventEmitter (value change), emit raw value, not object with field "value". 3. searchDataProviders.component.ts & searchOrganizations.component.ts & searchProjects.component.ts & searchResearchResults.component.ts: a. Add subscriptions in array to unsubscribe in ngOnDestroy. b. Get properties from environment (no service needed). c. Separate queries for refine and results. d. Do not call refine query when page, results per page, sortBy change (there is still a bug here). e. For refine query, added field "disableRefineForms" default set to false - passed in <new-search-page>. 4. newSearchPage.component.html: a. Disable forms when "disableForms" or "disableRefineForms" is true. b. Do not show filters, until results query returns, but show results while refine is loading. c. Deleted old, unused code. 5. newSearchPage.component.ts: a. Added fields "@Input() disableRefineForms: boolean = false;", "@Input() sortedByChanged: string = "";", "@Input() resultsPerPageChanged: number;" b. When results per page or sortBy change, do not upadate immediately searchUtils values - do not query for refine when these change (there is still a bug here). git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59155 d315682c-612b-4755-9ff5-7f18f6832af3
2020-07-21 15:48:55 +02:00
<div [class]="(showRefine && !properties.isDashboard)? 'uk-width-4-5@m uk-width-4-5@l uk-width-1-1@s' :'uk-width-1-1'">
<div *ngIf="showRefine && !dashboard" class="uk-hidden@m uk-margin-top">
<a href="#mobile-filters" uk-toggle>
<span class="uk-icon uk-margin-small-right uk-margin-small-left">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
data-svg="settings">
<ellipse fill="none" stroke="#000" cx="6.11" cy="3.55" rx="2.11" ry="2.15"></ellipse>
<ellipse fill="none" stroke="#000" cx="6.11" cy="15.55" rx="2.11" ry="2.15"></ellipse>
<circle fill="none" stroke="#000" cx="13.15" cy="9.55" r="2.15"></circle>
<rect x="1" y="3" width="3" height="1"></rect>
<rect x="10" y="3" width="8" height="1"></rect>
<rect x="1" y="9" width="8" height="1"></rect>
<rect x="15" y="9" width="3" height="1"></rect>
<rect x="1" y="15" width="3" height="1"></rect>
<rect x="10" y="15" width="8" height="1"></rect>
</svg>
</span>
<span>Filters <span
*ngIf="(selectedRangeFilters+selectedFilters) > 0">({{(selectedRangeFilters + selectedFilters)}})</span></span>
</a>
<div #mobileFilters id="mobile-filters" uk-offcanvas="overlay: true" style="z-index:10000;">
<!-- TODO - Kostis check offcanvas-white -->
<div class="uk-offcanvas-bar offcanvas-white">
<a class="uk-offcanvas-close uk-link-text">
<icon name="close" visuallyHidden="close Filters"></icon>
</a>
<div class="uk-width-1-1">
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="includeOnlyResultsAndFilter"
class="uk-margin-medium-top uk-margin-medium-bottom">
<a *ngIf="showSwitchSearchLink && advancedSearchLink" routerLinkActive="router-link-active"
[routerLink]="advancedSearchLink" style="z-index:1;"
[queryParams]="this.routerHelper.createQueryParams(this.parameterNames, this.parameterValues)"
[class]="((disabled)?' uk-disabled uk-link-muted ':'') +' portal-link uk-float-right '">Advanced
search
</a>
</div>
<div class="uk-grid uk-padding-small uk-padding-remove-vertical uk-margin-large-bottom">
<div *ngIf="showRefine && !properties.isDashboard
&& (results.length > 0
|| (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING)
|| (!hideFilters &&
(existingFiltersWithValues > 0 || (selectedRangeFilters + selectedFilters + selectedTypesNum) > 0)
)
)"
class="uk-width-1-4@m search-filters uk-visible@m">
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
</div>
<div class="uk-width-expand@m uk-with-1-1@s">
<!-- Dashboard Filters -->
<div *ngIf="properties.isDashboard"
class="uk-width-1-1 uk-margin-top uk-margin-medium-bottom ">
<div class="uk-flex uk-flex-bottom">
<span class="uk-margin-small-right">Filters: </span>
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {}"></ng-container>
</div>
</div>
<!-- Results only for Custom Filter? -->
<div *ngIf="customFilter && !customFilter.isHiddenFilter &&
customFilter.selected == false && customFilter.promptToAddFilter"
class="uk-alert uk-animation-slide-top-small">
Do you want to see results only for {{customFilter.valueName}}? <a
(click)="addCustomFilter();">Click here</a>.
</div>
<!-- Related results for Custom Filter Alert -->
<div *ngIf="openaireLink && (searchUtils.totalResults > 0 || !loadPaging )"
class="uk-alert uk-text-center uk-margin-small-top ">
<span *ngIf="customFilter">The following results are related to <span class="portal-color"
>{{customFilter.valueName}}</span>.</span>
Are you interested to view more results? Visit
<a
class="uk-margin-top uk-link"
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
target="_blank"> OpenAIRE - Explore</a>.
</div>
<!-- Total results, number of pages -->
<h5 class="uk-margin-bottom">
<ng-container *ngIf="results && searchUtils.totalResults > 0">
<span>{{searchUtils.totalResults|number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
<span>{{searchUtils.page | number}}</span>
<span class="uk-text-muted"> of {{(totalPages(searchUtils.totalResults)|number)}}</span>
</ng-container>
<ng-container *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
<span>{{oldTotalResults|number}}</span>
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
<span>{{searchUtils.page | number}}</span>
<span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span>
</ng-container>
</h5>
<!-- TODO Download results position-->
<div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom">
<search-download
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[isDisabled]="disabled"
[type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"
[piwikSiteId]="piwikSiteId">
</search-download>
</div>
<!-- No Dashboard Filters -->
<div *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))">
<ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
</div>
<div class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-margin-medium-top" uk-grid>
<div *ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)">
<div class="uk-flex uk-flex-middle">
<search-results-per-page class="uk-margin-right" *ngIf="searchUtils.totalResults >= 50" [size]="searchUtils.size"
(sizeChange)="sizeChanged($event)"
[isDisabled]="disabled">
</search-results-per-page>
<search-sorting *ngIf="sort"
[entityType]="entityType" [sortBy]="searchUtils.sortBy"
(sortByChange)="sortByChanged($event)"
[isDisabled]="disabled">
</search-sorting>
[Trunk | Library]: 1. searchUtils.class.ts: In SearchUtilsClass added field "refineStatus:number = 1;" for refine queries. 2. searchResultsPerPage.component.ts & searchSorting.component.ts: [Bug fix] In EventEmitter (value change), emit raw value, not object with field "value". 3. searchDataProviders.component.ts & searchOrganizations.component.ts & searchProjects.component.ts & searchResearchResults.component.ts: a. Add subscriptions in array to unsubscribe in ngOnDestroy. b. Get properties from environment (no service needed). c. Separate queries for refine and results. d. Do not call refine query when page, results per page, sortBy change (there is still a bug here). e. For refine query, added field "disableRefineForms" default set to false - passed in <new-search-page>. 4. newSearchPage.component.html: a. Disable forms when "disableForms" or "disableRefineForms" is true. b. Do not show filters, until results query returns, but show results while refine is loading. c. Deleted old, unused code. 5. newSearchPage.component.ts: a. Added fields "@Input() disableRefineForms: boolean = false;", "@Input() sortedByChanged: string = "";", "@Input() resultsPerPageChanged: number;" b. When results per page or sortBy change, do not upadate immediately searchUtils values - do not query for refine when these change (there is still a bug here). git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59155 d315682c-612b-4755-9ff5-7f18f6832af3
2020-07-21 15:48:55 +02:00
</div>
</div>
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
[parameterNames]="parameterNames" [parameterValues]="parameterValues"
[isDisabled]="disabled">
</search-paging>
</div>
<div *ngIf="(searchUtils.page <= pagingLimit) || (searchUtils.totalResults <= searchUtils.size*pagingLimit)" class="uk-margin">
<search-result *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[results]="results"
[status]=searchUtils.status
[type]="entityType"
[showLoading]="true" [properties]=properties [showImpactFactors]="(customFilter &&
customFilter.queryFieldName == 'communityId' && (customFilter.valueId ==
'elixir-gr' || customFilter.valueId == 'inspired-ris'))">
</search-result>
<deposit-result *ngIf="usedBy == 'deposit'"
[results]="results"
[status]="searchUtils.status"
[type]="entityType"
[zenodoInformation]="zenodoInformation"
[properties]=properties>
</deposit-result>
<orcid-result *ngIf="usedBy == 'orcid'"
[results]="results"
[status]="searchUtils.status"
[type]="entityType"
[properties]=properties>
</orcid-result>
<portal-search-result
*ngIf="(entityType == 'community' || entityType == 'stakeholder') && usedBy == 'search'"
[results]="results"
[status]="searchUtils.status"
[type]="entityType"
[showType]="false"
[showLoading]="true" [properties]=properties>
</portal-search-result>
</div>
<div [class]="searchUtils.page > pagingLimit ? 'search-results' : ''"
*ngIf="(searchUtils.page >= pagingLimit) && (searchUtils.totalResults > searchUtils.size*pagingLimit)">
<p class="uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>
</div>
<div class="uk-margin-medium-top">
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
[parameterNames]="parameterNames" [parameterValues]="parameterValues"
[isDisabled]="disabled">
</search-paging>
</div>
<div *ngIf="showIndexInfo && searchUtils.status !== errorCodes.LOADING"
class="uk-margin-small-top uk-grid uk-child-width-1-2">
<!-- Last Index Info-->
<div class="">
<img src="assets/common-assets/graph.svg" style="opacity: 0.4; width:20px; height:22px" loading="lazy"
alt="graph">
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by <a href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a></span>
</div>
<div class="uk-text-right">
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-muted">
<a *ngIf="properties.showLastIndexInformationLink"
class="uk-link"
[href]="properties.lastIndexInformationLink" target="_blank">
Last update
</a><span *ngIf="!(properties.showLastIndexInformationLink) ">
Last update
</span>
of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
</span>
</div>
</div>
</div>
[Trunk | Library]: 1. searchUtils.class.ts: In SearchUtilsClass added field "refineStatus:number = 1;" for refine queries. 2. searchResultsPerPage.component.ts & searchSorting.component.ts: [Bug fix] In EventEmitter (value change), emit raw value, not object with field "value". 3. searchDataProviders.component.ts & searchOrganizations.component.ts & searchProjects.component.ts & searchResearchResults.component.ts: a. Add subscriptions in array to unsubscribe in ngOnDestroy. b. Get properties from environment (no service needed). c. Separate queries for refine and results. d. Do not call refine query when page, results per page, sortBy change (there is still a bug here). e. For refine query, added field "disableRefineForms" default set to false - passed in <new-search-page>. 4. newSearchPage.component.html: a. Disable forms when "disableForms" or "disableRefineForms" is true. b. Do not show filters, until results query returns, but show results while refine is loading. c. Deleted old, unused code. 5. newSearchPage.component.ts: a. Added fields "@Input() disableRefineForms: boolean = false;", "@Input() sortedByChanged: string = "";", "@Input() resultsPerPageChanged: number;" b. When results per page or sortBy change, do not upadate immediately searchUtils values - do not query for refine when these change (there is still a bug here). git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59155 d315682c-612b-4755-9ff5-7f18f6832af3
2020-07-21 15:48:55 +02:00
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="properties.isDashboard" id="filters_switcher_toggle" href="#style_switcher" uk-toggle="" >
<i class=" uk-text-muted">
<svg style="margin-top: 8px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
viewBox="0 0 20 20"
fill="white" width="24px" height="16px">
<g>
<path d="M0,0h24 M24,24H0" fill="none"/>
<path
d="M4.25,5.61C6.57,8.59,10,13,10,13v5c0,1.1,0.9,2,2,2h0c1.1,0,2-0.9,2-2v-5c0,0,3.43-4.41,5.75-7.39 C20.26,4.95,19.79,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"/>
<path d="M0,0h24v24H0V0z" fill="none"/>
</g>
</svg>
</i>
</div>
<div *ngIf="properties.isDashboard" id="style_switcher" class=" uk-offcanvas filters_switcher"
uk-offcanvas="flip:true" mode="slide" overlay="" style="z-index:982;" >
<div class="uk-offcanvas-bar offcanvas-white">
<div class="uk-float-right" >
<button class="uk-offcanvas-close uk-close uk-icon" type="button" uk-close=""></button>
</div>
<div class="uk-padding uk-padding-remove-top uk-overflow-auto" style="height:calc(100vh - 100px);">
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
</div>
</div>
</div>
</div>
<modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert>