@itfin/components 1.3.100 → 1.4.0

package/package.json

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

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/card/BentoCard.vue

@@ -1,33 +1,74 @@
 <template>
-  <div class="itf-bento-card-wrapper shadow-sm rounded bg-white">
+  <div class="itf-bento-card-wrapper rounded bg-white" :class="{ enabled }">
+    <div class="itf-bento-card__drag">
+      <svg width="35" height="23" viewBox="0 0 35 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g filter="url(#filter0_d_1320_32101)">
+          <rect x="4" y="2" width="27" height="15" rx="4" fill="#22222B"/>
+          <circle cx="23.5" cy="9.5" r="1.5" fill="white"/>
+          <circle cx="17.5" cy="9.5" r="1.5" fill="white"/>
+          <circle cx="11.5" cy="9.5" r="1.5" fill="white"/>
+        </g>
+        <defs>
+          <filter id="filter0_d_1320_32101" x="0" y="0" width="35" height="23" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="2"/>
+            <feGaussianBlur stdDeviation="2"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1320_32101"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1320_32101" result="shape"/>
+          </filter>
+        </defs>
+      </svg>
+    </div>
+
     <slot/>
 
-    <div class="settings shadow rounded bg-black gap-2 align-items-center">
-      <button @click="$emit('resize', [2, 2])" class="rounded-1" :class="{'active': w === 2 && h === 2}">
-        <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8 7H8.2C7.60695 7 7.28244 7.00156 7.04927 7.02061C7.03998 7.02136 7.0312 7.02213 7.0229 7.0229C7.02213 7.0312 7.02136 7.03998 7.02061 7.04927C7.00156 7.28244 7 7.60695 7 8.2V11.8C7 12.3931 7.00156 12.7176 7.02061 12.9507C7.02136 12.96 7.02213 12.9688 7.0229 12.9771C7.0312 12.9779 7.03998 12.9786 7.04927 12.9794C7.28244 12.9984 7.60695 13 8.2 13H11.8C12.3931 13 12.7176 12.9984 12.9507 12.9794C12.96 12.9786 12.9688 12.9779 12.9771 12.9771C12.9779 12.9688 12.9786 12.96 12.9794 12.9507C12.9984 12.7176 13 12.3931 13 11.8V8.2C13 7.60695 12.9984 7.28244 12.9794 7.04927C12.9786 7.03998 12.9779 7.0312 12.9771 7.0229C12.9688 7.02213 12.96 7.02136 12.9507 7.02061C12.7176 7.00156 12.3931 7 11.8 7ZM5.21799 6.09202C5 6.51984 5 7.0799 5 8.2V11.8C5 12.9201 5 13.4802 5.21799 13.908C5.40973 14.2843 5.71569 14.5903 6.09202 14.782C6.51984 15 7.0799 15 8.2 15H11.8C12.9201 15 13.4802 15 13.908 14.782C14.2843 14.5903 14.5903 14.2843 14.782 13.908C15 13.4802 15 12.9201 15 11.8V8.2C15 7.0799 15 6.51984 14.782 6.09202C14.5903 5.71569 14.2843 5.40973 13.908 5.21799C13.4802 5 12.9201 5 11.8 5H8.2C7.0799 5 6.51984 5 6.09202 5.21799C5.71569 5.40973 5.40973 5.71569 5.21799 6.09202Z" fill="currentColor"></path></svg>
-      </button>
-      <button @click="$emit('resize', [3, 1])" class="rounded-1" :class="{'active': w === 3 && h === 1}">
-        <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 9H3C2.50669 9 2.23688 9.00108 2.04183 9.01439C2.03276 9.01501 2.02424 9.01564 2.01626 9.01626C2.01564 9.02424 2.01501 9.03276 2.01439 9.04183C2.00108 9.23688 2 9.50669 2 10C2 10.4933 2.00108 10.7631 2.01439 10.9582C2.01501 10.9672 2.01564 10.9758 2.01626 10.9837C2.02424 10.9844 2.03276 10.985 2.04183 10.9856C2.23688 10.9989 2.50669 11 3 11H17C17.4933 11 17.7631 10.9989 17.9582 10.9856C17.9672 10.985 17.9758 10.9844 17.9837 10.9837C17.9844 10.9758 17.985 10.9672 17.9856 10.9582C17.9989 10.7631 18 10.4933 18 10C18 9.50669 17.9989 9.23688 17.9856 9.04183C17.985 9.03276 17.9844 9.02424 17.9837 9.01626C17.9758 9.01564 17.9672 9.01501 17.9582 9.01439C17.7631 9.00108 17.4933 9 17 9ZM0.152241 8.23463C0 8.60218 0 9.06812 0 10C0 10.9319 0 11.3978 0.152241 11.7654C0.355229 12.2554 0.744577 12.6448 1.23463 12.8478C1.60218 13 2.06812 13 3 13H17C17.9319 13 18.3978 13 18.7654 12.8478C19.2554 12.6448 19.6448 12.2554 19.8478 11.7654C20 11.3978 20 10.9319 20 10C20 9.06812 20 8.60218 19.8478 8.23463C19.6448 7.74458 19.2554 7.35523 18.7654 7.15224C18.3978 7 17.9319 7 17 7H3C2.06812 7 1.60218 7 1.23463 7.15224C0.744577 7.35523 0.355229 7.74458 0.152241 8.23463Z" fill="currentColor"></path></svg>
+    <div class="settings shadow bg-black gap-2 align-items-center">
+      <button @click="$emit('resize', [1, 1])" class="rounded-1" :class="{'active': w === 1 && h === 1}">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14 16L10 16C8.89543 16 8 15.1046 8 14L8 10C8 8.89543 8.89543 8 10 8L14 8C15.1046 8 16 8.89543 16 10L16 14C16 15.1046 15.1046 16 14 16Z" stroke="white" stroke-width="1.2"/>
+        </svg>
       </button>
-      <button @click="$emit('resize', [3, 2])" class="rounded-1" :class="{'active': w === 3 && h === 2}">
-        <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.2 7H4.8C3.92692 7 3.39239 7.00156 2.99247 7.03423C2.80617 7.04945 2.69345 7.06857 2.625 7.08469C2.59244 7.09236 2.57241 7.09879 2.56158 7.10265C2.55118 7.10636 2.54681 7.10858 2.54601 7.10899C2.35785 7.20487 2.20487 7.35785 2.10899 7.54601C2.10858 7.54681 2.10636 7.55118 2.10265 7.56158C2.09879 7.57241 2.09236 7.59244 2.08469 7.625C2.06857 7.69345 2.04945 7.80617 2.03423 7.99247C2.00156 8.39239 2 8.92692 2 9.8V10.2C2 11.0731 2.00156 11.6076 2.03423 12.0075C2.04945 12.1938 2.06857 12.3065 2.08469 12.375C2.09236 12.4076 2.09879 12.4276 2.10265 12.4384C2.10636 12.4488 2.10858 12.4532 2.10899 12.454C2.20487 12.6422 2.35785 12.7951 2.54601 12.891C2.54681 12.8914 2.55118 12.8936 2.56158 12.8973C2.57241 12.9012 2.59244 12.9076 2.625 12.9153C2.69345 12.9314 2.80617 12.9505 2.99247 12.9658C3.39239 12.9984 3.92692 13 4.8 13H15.2C16.0731 13 16.6076 12.9984 17.0075 12.9658C17.1938 12.9505 17.3065 12.9314 17.375 12.9153C17.4076 12.9076 17.4276 12.9012 17.4384 12.8973C17.4488 12.8936 17.4532 12.8914 17.454 12.891C17.6422 12.7951 17.7951 12.6422 17.891 12.454C17.8914 12.4532 17.8936 12.4488 17.8973 12.4384C17.9012 12.4276 17.9076 12.4076 17.9153 12.375C17.9314 12.3065 17.9505 12.1938 17.9658 12.0075C17.9984 11.6076 18 11.0731 18 10.2V9.8C18 8.92692 17.9984 8.39239 17.9658 7.99247C17.9505 7.80617 17.9314 7.69345 17.9153 7.625C17.9076 7.59244 17.9012 7.57241 17.8973 7.56158C17.8936 7.55118 17.8914 7.54681 17.891 7.54601C17.7951 7.35785 17.6422 7.20487 17.454 7.10899C17.4532 7.10858 17.4488 7.10636 17.4384 7.10265C17.4276 7.09879 17.4076 7.09236 17.375 7.08469C17.3065 7.06857 17.1938 7.04945 17.0075 7.03423C16.6076 7.00156 16.0731 7 15.2 7ZM0.32698 6.63803C0 7.27976 0 8.11984 0 9.8V10.2C0 11.8802 0 12.7202 0.32698 13.362C0.614601 13.9265 1.07354 14.3854 1.63803 14.673C2.27976 15 3.11984 15 4.8 15H15.2C16.8802 15 17.7202 15 18.362 14.673C18.9265 14.3854 19.3854 13.9265 19.673 13.362C20 12.7202 20 11.8802 20 10.2V9.8C20 8.11984 20 7.27976 19.673 6.63803C19.3854 6.07354 18.9265 5.6146 18.362 5.32698C17.7202 5 16.8802 5 15.2 5H4.8C3.11984 5 2.27976 5 1.63803 5.32698C1.07354 5.6146 0.614601 6.07354 0.32698 6.63803Z" fill="currentColor"></path></svg>
+      <button @click="$emit('resize', [2, 2])" class="rounded-1" :class="{'active': w === 2 && h === 2}">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M17 16L7 16C5.89543 16 5 15.1046 5 14L5 10C5 8.89543 5.89543 8 7 8L17 8C18.1046 8 19 8.89543 19 10L19 14C19 15.1046 18.1046 16 17 16Z" stroke="white" stroke-width="1.2"/>
+        </svg>
       </button>
-      <button @click="$emit('resize', [3, 3])" class="rounded-1" :class="{'active': w === 3 && h === 3}">
-        <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.6 2H6.4C5.24689 2 4.50235 2.00156 3.93567 2.04785C3.39235 2.09225 3.19091 2.1676 3.09202 2.21799C2.71569 2.40973 2.40973 2.71569 2.21799 3.09202C2.1676 3.19091 2.09225 3.39235 2.04785 3.93567C2.00156 4.50235 2 5.24689 2 6.4V13.6C2 14.7531 2.00156 15.4977 2.04785 16.0643C2.09225 16.6077 2.1676 16.8091 2.21799 16.908C2.40973 17.2843 2.71569 17.5903 3.09202 17.782C3.19091 17.8324 3.39235 17.9078 3.93567 17.9521C4.50235 17.9984 5.24689 18 6.4 18H13.6C14.7531 18 15.4977 17.9984 16.0643 17.9521C16.6077 17.9078 16.8091 17.8324 16.908 17.782C17.2843 17.5903 17.5903 17.2843 17.782 16.908C17.8324 16.8091 17.9078 16.6077 17.9521 16.0643C17.9984 15.4977 18 14.7531 18 13.6V6.4C18 5.24689 17.9984 4.50235 17.9521 3.93567C17.9078 3.39235 17.8324 3.19091 17.782 3.09202C17.5903 2.71569 17.2843 2.40973 16.908 2.21799C16.8091 2.1676 16.6077 2.09225 16.0643 2.04785C15.4977 2.00156 14.7531 2 13.6 2ZM0.435974 2.18404C0 3.03969 0 4.15979 0 6.4V13.6C0 15.8402 0 16.9603 0.435974 17.816C0.819467 18.5686 1.43139 19.1805 2.18404 19.564C3.03969 20 4.15979 20 6.4 20H13.6C15.8402 20 16.9603 20 17.816 19.564C18.5686 19.1805 19.1805 18.5686 19.564 17.816C20 16.9603 20 15.8402 20 13.6V6.4C20 4.15979 20 3.03969 19.564 2.18404C19.1805 1.43139 18.5686 0.819467 17.816 0.435974C16.9603 0 15.8402 0 13.6 0H6.4C4.15979 0 3.03969 0 2.18404 0.435974C1.43139 0.819467 0.819467 1.43139 0.435974 2.18404Z" fill="currentColor"></path></svg>
+      <button @click="$emit('resize', [4, 4])" class="rounded-1" :class="{'active': w === 4 && h === 4}">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M17 19L7 19C5.89543 19 5 18.1046 5 17L5 7C5 5.89543 5.89543 5 7 5L17 5C18.1046 5 19 5.89543 19 7L19 17C19 18.1046 18.1046 19 17 19Z" stroke="white" stroke-width="1.2"/>
+        </svg>
       </button>
     </div>
   </div>
 </template>
 <style scoped lang="scss">
+.itf-bento-card {
+  &__drag {
+    transition: opacity .3s;
+    position: absolute;
+    top: -12px;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+  }
+}
 .itf-bento-card-wrapper {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
+  border: 1px solid #E7E8EC;
 
-  &:hover .settings {
-    opacity: 1;
+  &.enabled:hover {
+    border-color: #0B1315;
+
+    .settings, .itf-bento-card__drag {
+      opacity: 1;
+    }
   }
   .vue-draggable-dragging &:hover .settings {
     opacity: 0;
@@ -35,17 +76,27 @@
 
   .settings {
     transition: opacity .3s;
-    transition-delay: .3s;
     opacity: 0;
     display: flex;
     position: absolute;
-    bottom: -10px;
+    bottom: -5px;
     left: 50%;
-    padding: .375rem;
     transform: translateX(-50%);
     z-index: 100;
+    width: 24px;
+    height: 9px;
+    border-radius: .5rem;
 
+    &:hover {
+      width: auto;
+      height: auto;
+      padding: .175rem;
+      button {
+        display: flex;
+      }
+    }
     button {
+      display: none;
       color: #fff;
       padding: 0;
       width: 25px;
@@ -54,11 +105,10 @@
       background: transparent;
       justify-content: center;
       align-items: center;
-      display: flex;
 
       &.active {
-        background: rgba(255, 255, 255, 1);
-        color: #000;
+        background-color: #494A55;
+        color: #FFF;
       }
     }
   }
@@ -75,5 +125,6 @@ export default @Component({
 class itfBentoCard extends Vue {
   @Prop() w;
   @Prop() h;
+  @Prop() enabled;
 }
 </script>

package/src/components/card/BentoGrid.vue

@@ -1,13 +1,14 @@
 <template>
   <grid-layout
     :layout="layout"
-    @update:layout="$emit('update:layout', $event)"
+    @update:layout="onUpdateLayout"
     class="itf-bento-grid"
-    :col-num="6"
-    :cols="{ lg: 6, md: 6, sm: 6, xs: 3, xxs: 3 }"
+    :col-num="4"
+    :row-height="200"
+    :cols="{ lg: 4, md: 4, sm: 2, xs: 2, xxs: 2 }"
     :preserve-aspect-ratio="true"
     :responsive="true"
-    :is-draggable="true"
+    :is-draggable="enabled"
     :is-resizable="false"
     :is-mirrored="false"
     :is-bounded="true"
@@ -15,14 +16,15 @@
     :margin="[10, 10]"
     :use-css-transforms="true">
     <grid-item v-for="item in layout"
+               drag-allow-from=".itf-bento-card__drag"
                :x="item.x"
                :y="item.y"
                :w="item.w"
                :h="item.h"
                :i="item.i"
                :key="item.i">
-      <bento-card @resize="(e) => onResize(item, e)" :w="item.w" :h="item.h">
-        <slot name="cell" :item="item" :index="item.i"></slot>
+      <bento-card :enabled="enabled" @resize="(e) => onResize(item, e)" :w="item.w" :h="item.h">
+        <slot name="cell" :item="item" :index="item.i" :component="getComponent(item.i)"></slot>
       </bento-card>
     </grid-item>
   </grid-layout>
@@ -32,8 +34,9 @@
   margin: -10px;
 
   .vue-grid-item.vue-grid-placeholder {
-    background: rgba(0, 0, 0, 0.15);
-    border: 2px dashed rgba(0, 0, 0, 0.5);
+    background-color: #F5F7F9;
+    border: 1px solid #F5F7F9;
+    opacity: 1 !important;
     border-radius: 10px;
   }
 }
@@ -53,6 +56,8 @@ export default @Component({
 })
 class itfBentoGrid extends Vue {
   @Prop() layout;
+  @Prop() components;
+  @Prop({ type: Boolean, default: true }) enabled;
 
   onResize(item, [w, h]) {
     const newLayout = this.layout.map((i) => {
@@ -64,5 +69,13 @@ class itfBentoGrid extends Vue {
     });
     this.$emit('update:layout', newLayout);
   }
+
+  getComponent(id) {
+    return this.components[id] ?? null;
+  }
+
+  onUpdateLayout(layout) {
+    this.$emit('update:layout', layout);
+  }
 }
 </script>

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>
@@ -24,17 +24,19 @@
       </template>
       <template v-else-if="type === 'period'">
         <itf-date-range-picker-inline
+          style="margin: -.5rem"
           :value="value.value"
           @input="onFilterChange({ value: $event })"
         />
       </template>
       <template v-else-if="type === 'date'">
         <itf-date-picker-inline
+          style="margin: -.5rem"
           :value="value.value"
           @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 +46,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 +61,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 +100,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 +115,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 +126,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

@@ -1,23 +1,25 @@
 <template>
   <div>
     <div class="px-1">
-      <div v-if="title" class="fw-bold mb-1">{{title}}</div>
+      <div class="facets-filter-header">
+        <div v-if="title">{{title}}</div>
+      </div>
 
       <itf-text-field small v-model="query" class="mb-2" :placeholder="$t('components.filter.search')" clearable />
 
-      <div v-if="mappedValues.length" class="d-flex justify-content-between small mb-2">
+      <div class="d-flex justify-content-between small mb-2">
         <a v-if="isSelectedAll" href="" @click.stop.prevent="onSelectAll(false)">{{$t('components.filter.deselectAll')}}</a>
         <a v-else href="" @click.stop.prevent="onSelectAll(true)">{{$t('components.filter.selectAll')}}</a>
 
         <span class="text-muted" v-if="!isHasSelected" href="" @click.stop.prevent="onShowSelected(true)">{{$t('components.filter.showSelected')}}</span>
         <a v-else-if="!isShowSelected" href="" @click.stop.prevent="onShowSelected(true)">{{$t('components.filter.showSelected')}}</a>
-        <a v-else href="" @click.stop.prevent="onShowSelected(false)">{{$t('components.filter.showSelected')}}</a>
+        <a v-else href="" @click.stop.prevent="onShowSelected(false)">{{$t('components.filter.showAll')}}</a>
       </div>
-      <div v-else>
+      <div v-if="!mappedValues.length">
         <div class="text-muted text-center py-4">{{ $t('components.filter.noResults') }}</div>
       </div>
     </div>
-    <div v-for="(val, n) of mappedValues" :key="n" class="facet-item" :class="{'active': val.isSelected}" @click="onFilterClick(val)">
+    <div v-for="(val, n) of mappedValues" :key="n" class="dropdown-item" :class="{'active': val.isSelected}" @click="onFilterClick(val)">
       <span class="facet-name text-dark d-flex align-items-center">
         <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
         <div class="w-100 text-truncate">{{ val.label }}</div>
@@ -28,15 +30,20 @@
       </span>
     </div>
 
-    <itf-button class="mt-1" v-if="hasMore" small block @click="toggleMore">
+    <itf-button default class="mt-1" v-if="hasMore" small block @click="toggleMore">
       <span v-if="showMore">{{ $t('components.filter.hideMore', { count: visibleList.length }) }}</span>
       <span v-else>{{ $t('components.filter.showMore', { count: visibleList.length }) }}</span>
     </itf-button>
   </div>
 </template>
 <style lang="scss" scoped>
-.facet-item {
-  background: transparent;
+.facets-filter-header {
+  border-bottom: 1px solid var(--bs-border-color-translucent);
+  color: #A5A5A9;
+  padding: 0 0.75rem .5rem;
+  margin: 0 -.75rem .75rem;
+}
+.dropdown-item {
   cursor: pointer;
   display: inline-flex;
   -webkit-box-align: center;
@@ -47,8 +54,6 @@
   box-sizing: border-box;
   height: 1.75rem;
   width: 100%;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 400;
@@ -62,16 +67,12 @@
   transition: none 0s ease 0s;
   margin: 1px 0;
   &.active {
-    background-color: rgba(var(--bs-primary-rgb), 25%);
-
     .facet-bar-progress {
-      background-color: rgba(var(--bs-primary-rgb), 75%);
+      background-color: var(--bs-blue);
     }
   }
-  &:hover, &:focus, &.active {
-    border-color: var(--bs-primary);
-  }
   .facet-name {
+    min-width: 0;
     text-align: left;
     white-space: nowrap;
 
@@ -95,7 +96,7 @@
     width: var(--bar-width);
     min-width: 5px;
     height: 10px;
-    background-color: rgb(197, 205, 223);
+    background-color: rgba(var(--bs-blue-rgb), 50%);
     transition: width 0.3s ease 0s;
   }
 }
@@ -200,6 +201,9 @@ class FilterFacetsList extends Vue {
   }
 
   onShowSelected(isShow = false) {
+    if (!this.value.length && isShow) { // не показувати, якщо нічого не вибрано
+      return;
+    }
     this.isShowSelected = isShow;
   }
 }