@itfin/components 2.0.14 → 2.0.15

package/package.json

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

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

@@ -151,6 +151,10 @@
     &.active, &:hover, &.show {
       border: 1px solid #1A4A974D;
       color: #1A4A97;
+
+      .itf-icon {
+        color: #1A4A97;
+      }
     }
   }
 }

package/src/assets/scss/main.scss

@@ -91,8 +91,8 @@ body .form-check-input:checked[type=checkbox] {
 body .form-check-input:indeterminate[type=checkbox] {
   box-shadow: 0px 2px 3px 0px #00000026;
 }
-.text-muted {
-  color: #666770;
+body .text-muted {
+  color: #7A818E !important;
 }
 body .form-control {
   &:focus {

package/src/components/filter/FilterBadge.vue

@@ -1,5 +1,5 @@
 <template>
-  <itf-dropdown text ref="dropdown" autoclose="outside" shadow class="h-100">
+  <itf-dropdown text ref="dropdown" autoclose="outside" shadow class="h-100" append-to-context>
     <template #button>
       <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}">

package/src/components/filter/FilterPanel.vue

@@ -24,7 +24,7 @@
         <slot name="after-filter-btn"></slot>
       </div>
     </div>
-    <div v-if="showFilters" class="d-flex gap-2 flex-nowrap">
+    <div v-if="showFilters" class="d-flex gap-2 flex-nowrap filters-row">
       <filter-badge
         v-for="(facet, n) in visibleFilters"
         :key="n"
@@ -61,6 +61,15 @@
       color: #8E97A5;
     }
   }
+
+  .filters-row {
+    @media (max-width: 768px) {
+      overflow: auto;
+      width: 100%;
+      padding: 2px;
+      margin: -2px;
+    }
+  }
 }
 </style>
 <script>

package/src/components/panels/Panel.vue

@@ -12,12 +12,12 @@
     </div>
     <div v-if="!nocard" v-show="!collapsed" class="b-panel-header px-3 pt-3 pb-2">
       <slot name="header">
-        <div class="d-flex gap-3 align-items-center">
+        <div class="d-flex gap-3 align-items-center text-truncate">
           <itf-button v-if="closeable" icon default class="d-md-none" @click="closePanel">
             <itf-icon name="chevron_left" />
           </itf-button>
           <slot name="title">
-            <div class="b-panel__title fw-bold mb-0 h2" v-text="title"></div>
+            <div class="b-panel__title fw-bold mb-0 h2 text-truncate" v-text="title"></div>
           </slot>
         </div>
         <div class="d-flex gap-1">

package/src/components/table/table2.scss

@@ -103,10 +103,19 @@ body[data-theme="dark"] {
     padding-left: 5px;
     display: flex;
     align-items: center;
+
+    @media (max-width: 768px) {
+      position: relative;
+      opacity: 1;
+    }
   }
   .on-hover {
     opacity: 0;
     pointer-events: none;
+
+    @media (max-width: 768px) {
+      opacity: 1;
+    }
   }
   .table-row-template:hover .on-hover {
     opacity: 1;

package/src/components/text-field/MoneyField.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="itf-money-field ph-no-capture" :class="{'currency-arrow': !currencyDisabled, 'currency-select': currencySelect}">
-    <div :class="{'input-group h-100': noCurrencySign}" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
+    <div class="h-100" :class="{'input-group h-100': noCurrencySign}" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
       <span class="itf-money-field__prepend" v-if="!noCurrencySign">{{ selectedCurrencySymbol }}</span>
       <i-mask-component
         ref="input"