@itfin/components 1.3.96 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.96",
+  "version": "2.0.1",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/scss/_css_variables.scss

@@ -1,8 +1,8 @@
 @import './variables.scss';
 @import './bootstrap.scss';
 
-$color-income: #0d935b;
-$color-outcome: #b91e1e;
+$color-income: #46A856;
+$color-outcome: #DC5C2E;
 
 :root {
   --color-income: #{$color-income};

package/src/assets/scss/_variables.scss

@@ -26,21 +26,21 @@ $success: #10834e;
 $warning: #cda277;
 $danger: #cb4839;
 
-$primary: #0B314F !default;
-$link-color: #0B314F !default;
+$primary: #1A4A97 !default;
+$link-color: #1A4A97 !default;
 $input-btn-focus-width: .125rem;
 
-$input-bg: #f3f3f3 !default;
-$input-border-color: rgba(#000, .08);
+$input-bg: #F2F4F7 !default;
+$input-border-color: #F2F4F7;
 $input-border-radius: 10px;
 $input-font-size: 0.875rem;
 $input-font-family: "Fira Mono", "Courier New", monospace;
 
-$input-focus-bg: #fff;
-$input-focus-border-color: #fff;
+$input-focus-bg: #F2F4F7;
+$input-focus-border-color: #F2F4F7;
 
 $form-label-margin-bottom: .1rem;
-$input-focus-border: rgb(11 49 79 / 25%);
+$input-focus-border: #F2F4F7;//rgb(11 49 79 / 25%);
 
 $form-check-input-border: 1px solid rgba(#000, .08);
 $form-switch-focus-color: tint-color($primary, 50%);
@@ -87,3 +87,14 @@ $primaryColor15: #DAE0E5;
 $baseText: #1e1e1e;
 $gray5: #F0F0F1;
 $gray50: #787885;
+
+// згідно з дизайном
+$body-color: #22222B;
+$dropdown-border-radius: .75rem;
+$dropdown-padding-x: .5rem;
+$dropdown-item-padding-x: .5rem;
+$dropdown-link-hover-bg: #F1F2F4;
+$border-color-translucent:    #00000014;
+$dropdown-header-color: #A5A5A9;
+$form-check-input-checked-bg-color: #22222B;
+$form-check-input-indeterminate-bg-color: #22222B;

package/src/assets/scss/components/_button.scss

@@ -139,4 +139,14 @@
       }
     }
   }
+
+  &.btn-default {
+    border: 1px solid #0000001A;
+    color: #8E97A5;
+
+    &.active, &:hover, &.show {
+      border: 1px solid #1A4A974D;
+      color: #1A4A97;
+    }
+  }
 }

package/src/assets/scss/components/_pagination.scss

@@ -2,11 +2,14 @@
 
 .itf-pagination.pagination {
   padding-left: 0;
+  display: flex;
+  align-items: center;
+  gap: .5rem;
 
   .page-item {
-    margin-right: 3px;
     .page-link {
       border-radius: .5rem;
+      padding: .125rem .25rem
     }
 
     &.disabled .page-link {

package/src/assets/scss/components/_select.scss

@@ -41,7 +41,7 @@
   cursor: pointer;
 
   .form-control {
-    padding: 0.3125rem 0.75rem;
+    padding: 0.25rem 0.75rem;
 
     &.is-valid, &.is-invalid {
       background-image: none;
@@ -66,8 +66,6 @@
     background-color: $body-bg;
     //border: 2px solid $input-focus-border;
     border: 0 none;
-    padding-left: 0.125rem !important;
-    padding-right: 0.125rem !important;
     left: -2px;
     right: -2px;
     width: auto;

package/src/assets/scss/components/_text-field.scss

@@ -2,10 +2,10 @@
 
 .itf-text-field {
   &__input {
-    .addon + & {
-      border-top-left-radius: $input-border-radius !important;
-      border-bottom-left-radius: $input-border-radius !important;
-    }
+    min-height: 2rem;
+    border: 0 none;
+    background-color: transparent !important;
+
     -moz-appearance: textfield; // Hide Arrows From Input Number (Firefox)
 
     &::-webkit-outer-spin-button,  // Hide Arrows From Input Number (Chrome, Safari, Edge, Opera)
@@ -14,9 +14,19 @@
       margin: 0;
     }
   }
-  .addon-end {
-    pointer-events: all;
-    padding-right: 0.25rem;
+  .input-group-text {
+    background: transparent;
+    padding: 0.375rem 0 0.375rem 0.75rem;
+  }
+  &.is-valid .input-group-text {
+    color: var(--bs-form-valid-border-color);
+  }
+  &.is-invalid .input-group-text {
+    color: var(--bs-form-invalid-border-color);
+  }
+  .was-validated &.form-control:valid, &.form-control.is-valid,
+  .was-validated &.form-control:invalid, &.form-control.is-invalid {
+    background-image: none;
   }
 }
 

package/src/assets/scss/main.scss

@@ -28,8 +28,8 @@
 @import './directives/tooltip';
 
 .form-control {
-  min-height: 2.5rem;
-  box-shadow: 0 2px 10px rgba(0,0,0,.05);
+  //min-height: 2.5rem;
+  //box-shadow: 0 2px 10px rgba(0,0,0,.05);
 }
 
 .color-project-tnm {
@@ -60,3 +60,37 @@ kbd {
     color: var(--bs-primary-color) !important
   }
 }
+
+// згідно з дизайном
+.dropdown-header {
+  font-size: .75rem;
+  padding: .75rem .5rem .25rem;
+
+  &:first-child {
+    padding-top: .25rem;
+  }
+}
+.dropdown-item {
+  --bs-dropdown-link-active-bg: #F1F2F4;
+  --bs-dropdown-link-active-color: var(--bs-body-color);
+  &:not(:last-child) {
+    margin-bottom: 1px;
+  }
+
+  svg {
+    color: #8E97A5;
+  }
+  &:hover svg {
+    color: var(--bs-body-color);
+  }
+}
+.form-check-input:checked[type=checkbox] {
+  --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L3.5 6.5L1 4' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  box-shadow: 0px 2px 3px 0px #00000026;
+}
+.form-check-input:indeterminate[type=checkbox] {
+  box-shadow: 0px 2px 3px 0px #00000026;
+}
+.text-muted {
+  color: #666770;
+}

package/src/components/app/message.js

@@ -38,7 +38,7 @@ const Message = function (options) {
   const parent = document.getElementById('itf-app');
 
   const instance = new ToastContainer({
-    parent: $nuxt.$el.__vue__,
+    // parent: $nuxt.$el.__vue__,
     el: document.createElement('itf-toast-container'),
     data: options
   });

package/src/components/button/Button.vue

@@ -10,6 +10,7 @@ export default @Component({
 class itfButton extends Vue {
   @Prop(Boolean) labeled;
   @Prop(Boolean) primary;
+  @Prop(Boolean) default;
   @Prop(Boolean) secondary;
   @Prop(Boolean) loading;
   @Prop(Boolean) small;
@@ -27,7 +28,7 @@ class itfButton extends Vue {
 
   render (createElement, { data, slots, children, props }) {
     const {
-      to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText, squircle,
+      to, href, target, disabled, color, block, loading, labeled, secondary, primary, small, large, icon, loadingText, squircle, default: defaultStyle,
       class: classNames
     } = props;
     const component = to ? 'nuxt-link' : (props.href ? 'a' : 'button');
@@ -44,7 +45,8 @@ class itfButton extends Vue {
         'labeled': labeled,
         'disabled': disabled || loading,
         'btn-primary': primary,
-        'btn-basic': !primary && !secondary && !color,
+        'btn-default': defaultStyle,
+        'btn-basic': !primary && !secondary && !color && !defaultStyle,
         'btn-secondary': secondary,
         'btn-squircle': squircle,
         'btn-sm': small,

package/src/components/filter/FilterAmountRange.vue

@@ -1,27 +1,25 @@
 <template>
-  <div class="py-2" @mousemove="onRefresh" @mouseup="onUpdateValue">
-    <div class="px-1">
-      <div v-if="histogram" class="histogram px-3">
-        <div v-for="(item, n) in histogramPerc" :key="n" :style="`--bar-height: ${item}px`"></div>
-      </div>
-
-      <itf-range
-        ref="range"
-        :value="value"
-        :width="260"
-        @input="onChange"
-        :min="min"
-        :max="max"
-        :stop-propagation="false"
-        :use-keyboard="false"
-        :tooltip="false"
-        :tooltip-merge="false"
+  <div class="py-1 px-1 small text-muted">
+    <itf-label :label="$t('components.filter.filterBy')" hide-details class="w-100">
+      <itf-select
+        v-model="filterType"
+        :options="filterTypes"
+        :get-option-label="option => option.text"
+        :reduce="option => option.value"
+        @input="onChangeType"
       />
+    </itf-label>
 
-      <div v-if="internalValue" class="d-flex justify-content-between gap-5">
-        <itf-text-field small type="number" :value="internalValue[0]" @input="onChange([$event, internalValue[1]], true)" />
-        <itf-text-field small type="number" :value="internalValue[1]" @input="onChange([internalValue[0], $event], true)" />
-      </div>
+    <itf-label v-if="filterType === 'exact'" :label="$t('components.filter.value')" hide-details class="mb-0 w-100">
+      <itf-text-field type="number" :value="internalValue" @input="onChange($event)" />
+    </itf-label>
+    <div v-else-if="internalValue" class="d-flex justify-content-between gap-2">
+      <itf-label :label="$t('components.filter.from')" hide-details class="mb-0 w-100">
+        <itf-text-field type="number" :value="internalValue[0]" @input="onChange([$event, internalValue[1]])" />
+      </itf-label>
+      <itf-label :label="$t('components.filter.to')" hide-details class="mb-0 w-100">
+        <itf-text-field type="number" :value="internalValue[1]" @input="onChange([internalValue[0], $event])" />
+      </itf-label>
     </div>
   </div>
 </template>
@@ -42,13 +40,18 @@
 </style>
 <script>
 import { Vue, Prop, Model, Component } from 'vue-property-decorator';
+import itfLabel from '../form/Label.vue';
+import itfSelect from '../select/Select.vue';
 import itfTextField from '../text-field/TextField.vue';
 import itfRange from '../range/Range.vue';
+import debounce from 'lodash/debounce';
 
 export default @Component({
   name: 'FilterAmountRange',
   components: {
+    itfSelect,
     itfTextField,
+    itfLabel,
     itfRange
   }
 })
@@ -58,36 +61,41 @@ class FilterAmountRange extends Vue {
   @Prop() max;
   @Prop() histogram;
 
-  isRefreshed = false;
-  internalValue = null;
-
-  mounted() {
-    this.internalValue = this.value;
-  }
+  filterType = false;
+  internalValue = 'exact';
+  onChangeFn = null;
 
-  get histogramPerc() {
-    const max = Math.max(...this.histogram);
-    return this.histogram.map(item => Math.round(item / max * 100));
+  get filterTypes() {
+    return [
+      { text: this.$t('components.filter.exact'), value: 'exact' },
+      { text: this.$t('components.filter.range'), value: 'range' }
+    ];
   }
 
-  onRefresh() {
-    if (this.isRefreshed) {
-      return;
-    }
-    this.isRefreshed = true;
-    this.$refs.range.refresh();
+  mounted() {
+    this.internalValue = this.value;
+    this.filterType = Array.isArray(this.internalValue) ? 'range' : 'exact';
+    this.onChangeFn = debounce(() => {
+      this.$emit('input', this.internalValue);
+    }, 500);
   }
 
-  onChange(val, isSet = false) {
-    this.isRefreshed = false;
+  onChange(val) {
     this.internalValue = val;
-    if (isSet) {
-      this.onUpdateValue();
+    if (!Number.isNaN(parseFloat(val))) {
+      this.onChangeFn()
+    }
+    if (!val) {
+      this.onChangeFn();
     }
   }
 
-  onUpdateValue() {
-    this.$emit('input', this.internalValue);
+  onChangeType(type) {
+    if (type === 'range') {
+      this.internalValue = [parseFloat(this.internalValue), parseFloat(this.internalValue)];
+    } else {
+      this.internalValue = Array.isArray(this.internalValue) ? parseFloat(this.internalValue[0]) : parseFloat(this.internalValue);
+    }
   }
 }
 </script>

package/src/components/filter/FilterBadge.vue

@@ -1,13 +1,13 @@
 <template>
-  <itf-dropdown text ref="dropdown" autoclose="outside">
+  <itf-dropdown text ref="dropdown" autoclose="outside" shadow class="h-100">
     <template #button>
-      <div class="filter-pill" :class="{'filter-not-default-pill': !isDefault && !isInvalid, 'filter-invalid-pill': isInvalid}">
+      <div class="filter-pill rounded" :class="{'filter-not-default-pill': !isDefault && !isInvalid, 'filter-invalid-pill': isInvalid}">
         <div class="filter-pill__label" :class="{'filter-pill__not-default-value': !isDefault && !isInvalid, 'filter-pill__default-value': isDefault, 'filter-pill__label-invalid': isInvalid}">
-          <itf-icon v-if="icon" :size="18" :name="icon" />
+          <itf-icon v-if="icon" :size="20" new :name="icon" class="icon" />
           {{ text }}
         </div>
         <div @click.stop.prevent="resetValue" v-if="!isDefault" class="filter-pill__icon" :class="{'filter-pill__icon-not-default-value': !isDefault && !isInvalid, 'filter-pill__icon-invalid': isInvalid}">
-          <svg width="8" height="8" viewBox="0 0 8 8" fill="#788195" xmlns="http://www.w3.org/2000/svg"><path d="M8 0.94L7.06 0L4 3.06L0.94 0L0 0.94L3.06 4L0 7.06L0.94 8L4 4.94L7.06 8L8 7.06L4.94 4L8 0.94Z" fill="inherit"></path></svg>
+          <itf-icon new name="close" />
         </div>
       </div>
     </template>
@@ -34,7 +34,7 @@
           @input="onFilterChange({ value: $event })"
         />
       </template>
-      <div class="px-2" v-else-if="type === 'facets-list'" style="width: 300px;">
+      <div v-else-if="type === 'facets-list'" style="width: 300px;">
         <filter-facets-list
           :title="options.title"
           :value="value.value"
@@ -44,7 +44,7 @@
           @input="onFilterChange({ value: $event })"
         />
       </div>
-      <div class="px-2" v-else-if="type === 'amount'" style="width: 300px;">
+      <div v-else-if="type === 'amount'" style="width: 300px;">
         <filter-amount-range
           :value="value.value"
           :histogram="options.histogram"
@@ -59,29 +59,33 @@
 <style lang="scss">
 :root {
   --filter-badge__default-color: #475266;
-  --filter-badge__default-bg-color: #4752661A;
-  --filter-badge__default-bg-color-hover: #47526642;
+  --filter-badge__default-border-color: #0000001A;
+  --filter-badge__default-bg-color: transparent;
+  --filter-badge__default-bg-color-hover: #1A4A970D;
 
   --filter-badge__invalid-color: #D83C31;
   --filter-badge__invalid-bg-color: #D83C311A;
   --filter-badge__invalid-bg-color-hover: #D83C3142;
 
-  --filter-badge__selected-color: #2f51fe; // #0d935b;
-  --filter-badge__selected-bg-color: #2f51fe1a; // #0d935b1A;
-  --filter-badge__selected-bg-color-hover: #2f51fe42; // #0d935b42;
-  --filter-badge__padding-x: 6px; // 10px;
-  --filter-badge__padding-y: 12px;// 18px;
+  --filter-badge__selected-color: #1A4A97; // #0d935b;
+  --filter-badge__selected-bg-color: #1A4A970D; // #0d935b1A;
+  --filter-badge__selected-bg-color-hover: rgba(26, 74, 151, 0.1); // #0d935b42;
+  --filter-badge__padding-y: .5rem;
+  --filter-badge__padding-x: .75rem;
 }
 .filter-pill {
   align-items: center;
-  border-radius: 21px;
   font-size: 14px;
   line-height: 100%;
+  outline: 1px solid var(--filter-badge__default-border-color);
   background-color: var(--filter-badge__default-bg-color);
   display: flex;
   min-height: 2rem;
   transition: 0.1s;
 
+  .icon {
+    margin: -2px;
+  }
   &:hover {
     background-color: var(--filter-badge__default-bg-color-hover);
     cursor: pointer;
@@ -94,12 +98,12 @@
     background-color: var(--filter-badge__invalid-bg-color);
   }
   &.filter-pill__default-value {
-    padding: var(--filter-badge__padding-x) var(--filter-badge__padding-y);
+    padding: var(--filter-badge__padding-y) var(--filter-badge__padding-x);
   }
 }
 .filter-pill__label {
   color: var(--filter-badge__default-color);
-  padding: var(--filter-badge__padding-x) 0 var(--filter-badge__padding-x) var(--filter-badge__padding-y);
+  padding: var(--filter-badge__padding-y) 0 var(--filter-badge__padding-y) var(--filter-badge__padding-x);
   max-width: 330px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -109,7 +113,7 @@
   align-items: center;
 
   &.filter-pill__default-value {
-    padding: var(--filter-badge__padding-x) var(--filter-badge__padding-y);
+    padding: var(--filter-badge__padding-y) var(--filter-badge__padding-x);
   }
   &.filter-pill__not-default-value {
     color: var(--filter-badge__selected-color);
@@ -120,17 +124,16 @@
 }
 
 .filter-pill__icon {
-  padding: var(--filter-badge__padding-x) calc(var(--filter-badge__padding-x) * 2) var(--filter-badge__padding-x) var(--filter-badge__padding-x);
-  margin-top: -2px;
+  padding: 0 calc(var(--filter-badge__padding-x) / 2) 0 calc(var(--filter-badge__padding-x) / 4);
 
   svg {
-    fill: var(--filter-badge__default-color);
+    color: var(--filter-badge__default-color);
   }
   &.filter-pill__icon-invalid svg {
-    fill: var(--filter-badge__invalid-color);
+    color: var(--filter-badge__invalid-color);
   }
   &.filter-pill__icon-not-default-value svg {
-    fill: var(--filter-badge__selected-color);
+    color: var(--filter-badge__selected-color);
   }
 }
 </style>

package/src/components/filter/FilterFacetsList.vue

@@ -62,7 +62,7 @@
   transition: none 0s ease 0s;
   margin: 1px 0;
   &.active {
-    background-color: rgba(var(--bs-primary-rgb), 25%);
+    background-color: rgba(var(--bs-primary-rgb), 10%);
 
     .facet-bar-progress {
       background-color: rgba(var(--bs-primary-rgb), 75%);

package/src/components/filter/FilterPanel.vue

@@ -1,28 +1,40 @@
 <template>
-  <div class="d-flex gap-2 align-items-center flex-wrap">
-    <template v-if="search">
+  <div class="itf-filter-panel d-flex flex-column gap-3 align-items-start">
+    <div v-if="search" class="d-flex gap-2 justify-content-between w-100">
       <itf-text-field
-        style="width: 200px"
+        style="width: 300px"
         small
-        :placeholder="$t('components.filter.search')"
-        prepend---icon="search"
+        :placeholder="searchPlaceholder"
+        prepend-icon="search"
         :delay-input="250"
         clearable
         :value="filterValue.query"
         @input="(e) => onFilterChange({ type: 'text', name: 'query' }, { value: e })"
       />
-    </template>
-    <filter-badge
-      v-for="(facet, n) in filters"
-      :key="n"
-      v-model="filter[facet.name]"
-      :is-default="filter[facet.name].isDefault"
-      :text="filter[facet.name].label"
-      :type="facet.type"
-      :icon="facet.icon"
-      :options="facet.options"
-      @change="onFilterChange(facet, $event)"
-    />
+      <div class="d-flex gap-2">
+        <itf-button default icon class="position-relative" @click="showFilters = !showFilters">
+          <itf-icon new name="filter" />
+          <span v-if="activeFiltersCount" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">
+            {{activeFiltersCount}}
+            <span class="visually-hidden">unread messages</span>
+          </span>
+        </itf-button>
+        <slot name="after-filter-btn"></slot>
+      </div>
+    </div>
+    <div v-if="showFilters" class="d-flex gap-2 flex-wrap">
+      <filter-badge
+        v-for="(facet, n) in filters"
+        :key="n"
+        v-model="filter[facet.name]"
+        :is-default="filter[facet.name].isDefault"
+        :text="filter[facet.name].label"
+        :type="facet.type"
+        :icon="facet.icon"
+        :options="facet.options"
+        @change="onFilterChange(facet, $event)"
+      />
+    </div>
     <div v-if="loading">
       <span class="itf-spinner"></span>
       {{$t('loading')}}
@@ -30,6 +42,24 @@
   </div>
 </template>
 <style lang="scss">
+.itf-filter-panel {
+  .itf-text-field:not(.is-valid):not(.is-invalid) .itf-icon {
+    color: #8E97A5;
+  }
+  .itf-text-field__input {
+    border: 0 none;
+    box-shadow: none;
+    background-color: #F2F4F7;
+    border-radius: .5rem;
+    font-family: var(--bs-font-sans-serif);
+    .addon-start {
+      padding-left: 2rem;
+    }
+    &::placeholder {
+      color: #8E97A5;
+    }
+  }
+}
 </style>
 <script>
 import { DateTime } from 'luxon';
@@ -56,24 +86,34 @@ export default @Component({
 })
 class FilterPanel extends Vue {
   @Model('input') value;
+  @Prop({ type: Array }) staticFilters;
   @Prop({ type: String }) endpoint;
   @Prop() panel;
   @Prop(Boolean) search;
+  @Prop({ type: String, default: function() { return this.$t('components.filter.search'); } }) searchPlaceholder;
 
   filter = {};
   filterValue = {};
   filters = [];
   loading = false;
+  showFilters = true;
 
   async mounted() {
-    this.loading = true;
-    await this.$try(async () => {
-      const { filters } = await this.$axios.$get(this.endpoint);
-      this.filters = filters;
+    this.filters = this.staticFilters ?? [];
+    if (this.endpoint) {
+      this.loading = true;
+      await this.$try(async () => {
+        const {filters} = await this.$axios.$get(this.endpoint);
+        this.filters = filters;
+        this.loadFiltersValue();
+      });
+      this.loading = false;
+    } else {
       this.loadFiltersValue();
-    });
-    this.loading = false;
-    this.panel.on('panels.changed', () => this.loadFiltersValue());
+    }
+    if (this.panel) {
+      this.panel.on('panels.changed', () => this.loadFiltersValue());
+    }
   }
 
   loadFiltersValue() {
@@ -134,6 +174,10 @@ class FilterPanel extends Vue {
     ];
   }
 
+  get activeFiltersCount() {
+    return Object.values(this.filter).filter(facet => !facet.isDefault).length;
+  }
+
   formatValue(facet, value) {
     if (facet.type === 'period') {
       if (value.value) {
@@ -170,11 +214,22 @@ class FilterPanel extends Vue {
       }
       value.isDefault = facet.options.defaultValue ? JSON.stringify(value.value) === JSON.stringify(facet.options.defaultValue.value) : false;
     } else if (facet.type === 'amount') {
-      if (typeof value.value[0] !== 'number' || typeof value.value[1] !== 'number') {
-        value.value = [facet.options.min, facet.options.max];
+      if (value.value === null || (Array.isArray(value.value) && value.value.every(v => v === null))) {
+        value.value = facet.options.defaultValue.value;
+      } else if (Array.isArray(value.value)) {
+      } else {
+        if (Number.isNaN(value.value)) {
+          value.value = facet.options.defaultValue.value;
+        }
+      }
+      value.isDefault = facet.options.defaultValue ? JSON.stringify(value.value) === JSON.stringify(facet.options.defaultValue.value) : false;
+
+      if (Array.isArray(value.value)) {
+        value.label = value.isDefault ? facet.options.defaultValue.label : `${formatMoney(value.value[0], null, 2)} - ${formatMoney(value.value[1], null, 2)}`;
+      } else {
+        value.label = value.isDefault ? facet.options.defaultValue.label : formatMoney(value.value, null, 2);
       }
       value.isDefault = facet.options.defaultValue ? JSON.stringify(value.value) === JSON.stringify(facet.options.defaultValue.value) : false;
-      value.label = value.isDefault ? facet.options.defaultValue.label : `${formatMoney(value.value[0], null, 0)} - ${formatMoney(value.value[1], null, 0)}`;
     } else if (facet.type === 'list') {
       const item = facet.options.items.find(item => item.value === value.value);
       value.isDefault = facet.options.defaultValue ? JSON.stringify(value.value) === JSON.stringify(facet.options.defaultValue.value) : false;