@itfin/components 1.3.39 → 1.3.40

package/package.json

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

package/src/ITFSettings.js

@@ -10,6 +10,7 @@ class ITFSettings {
     defaultLocale: 'en_US',
     defaultDisplayDateFormat: 'MM/dd/yyyy',
     // defaultDisplayDateFormat: 'dd.MM.yyyy',
+    currencies: []
   };
 
   get defaultLocale() {
@@ -20,6 +21,14 @@ class ITFSettings {
     this.options.defaultLocale = val;
   }
 
+  get currencies() {
+    return this.options.currencies;
+  }
+
+  set currencies(val) {
+    this.options.currencies = val;
+  }
+
   get supportLanguages() {
     return [
       { locale: 'en_US', name: 'English', dateFormat: 'MM/dd/yyyy' },

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

@@ -2,7 +2,6 @@
 
 .itf-text-field {
   &__input {
-    border-radius: $input-border-radius !important;
     -moz-appearance: textfield; // Hide Arrows From Input Number (Firefox)
 
     &::-webkit-outer-spin-button,  // Hide Arrows From Input Number (Chrome, Safari, Edge, Opera)
@@ -27,7 +26,6 @@
     z-index: 10;
   }
   &__input {
-    border-radius: $input-border-radius !important;
     resize: none;
   }
   &__autogrow &__input {

package/src/assets/scss/components/select/_dropdown-toggle.scss

@@ -16,6 +16,8 @@ $border-radius: $vs-border-radius;
   appearance: none;
   display: flex;
   white-space: normal;
+  height: 100%;
+  width: 100%;
 }
 
 .vs__selected-options {

package/src/components/datepicker/DatePickerInline.vue

@@ -39,6 +39,7 @@ class itfDatePickerInline extends Vue {
   @Prop({ type: Boolean, default: false }) range;
   @Prop({ type: Object, default: () => ({}) }) customDays;
   @Prop({ type:  [String, Date], default: '' }) minDate;
+  @Prop({ type:  [String, Date], default: '' }) maxDate;
   @Prop({
     type: Array,
     default: function () {
@@ -90,6 +91,7 @@ class itfDatePickerInline extends Vue {
       view: (this.valueAsLuxon && !this.minView) ? 'days' : this.startView,
       minView: this.minView,
       minDate: this.minDate,
+      maxDate: this.maxDate,
       selectedDates: this.valueAsLuxon ? [this.valueAsLuxon.toJSDate()] : [],
       onSelect: ({ date }) => {
         if (this.range && !this.calendar.rangeDateTo) {

package/src/components/datepicker/MonthPicker.vue

@@ -6,28 +6,29 @@
       </slot>
     </div>
     <input
-        ref="input"
-        readonly
-        :disabled="disabled"
-        class="form-control text-capitalize"
-        :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
-        @focus="onFocus"
-        @blur="onBlur"
-        :value="displayValue"
-        :placeholder="placeholder"
+      ref="input"
+      readonly
+      :disabled="disabled"
+      class="form-control text-capitalize"
+      :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
+      @focus="onFocus"
+      @blur="onBlur"
+      :value="displayValue"
+      :placeholder="placeholder"
     />
     <div style="display: none">
       <div ref="dropdown" class="itf-monthpicker__dropdown border rounded">
         <div>
           <itf-date-picker-inline
-              :value="value"
-              start-view="months"
-              min-view="months"
-              :min-date="minDate"
-              only-calendar
-              :display-format="displayFormat"
-              :value-format="valueFormat"
-              @input="selectInlineDate"
+            :value="value"
+            start-view="months"
+            min-view="months"
+            :min-date="minDate"
+            :max-date="maxDate"
+            only-calendar
+            :display-format="displayFormat"
+            :value-format="valueFormat"
+            @input="selectInlineDate"
           />
         </div>
         <slot name="after-calendar" />
@@ -57,6 +58,7 @@ class itfMonthPicker extends Vue {
   @Prop({ type: Boolean }) disabled;
   @Prop({ type: String, default: 'ISO' }) valueFormat;
   @Prop({ type:  [String, Date], default: '' }) minDate;
+  @Prop({ type:  [String, Date], default: '' }) maxDate;
   @Prop({ type: String, default: 'LLLL, yyyy' }) displayFormat;
   @Prop({ type: String, default: '' }) placeholder;
   @Prop({ type: String, default: '' }) prependIcon;

package/src/components/form/index.stories.js

@@ -42,6 +42,8 @@ storiesOf('Common', module)
       }
     },
     template: `<div>
+      <itf-app ref="app">
+
       <p>You need wrap whole application with this tag</p>
 
       <h2>Usage</h2>
@@ -57,8 +59,6 @@ storiesOf('Common', module)
 
       <h2>Example</h2>
 
-      <itf-app ref="app">
-
         <itf-form ref="form">
 
           <itf-icon name="project_tnm" size="32" />
@@ -71,6 +71,7 @@ storiesOf('Common', module)
 
                 <itf-select
                   :options="['tnm', 'fixed', 'nonprofit']"
+                  append-to-body
                   v-model="text">
 
                   <template #selected-option="{ option }">
@@ -96,7 +97,11 @@ storiesOf('Common', module)
             <div class="col-12">
               <itf-label :rules="[$v.emptyValidation()]" :value="text" label="Text field" required>
 
-                <itf-text-field v-model="text"></itf-text-field>
+                  <itf-text-field v-model="text">
+                    <template #addon>
+                      <span class="input-group-text" id="basic-addon1">@</span>
+                    </template>
+                  </itf-text-field>
 
               </itf-label>
             </div>

package/src/components/table/Table2.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="scrollable scrollable-x big-scrollbar" :class="{'permanent-checkboxes': selectedIds.length}">
+  <div class="itf-table2 scrollable scrollable-x" :class="{'permanent-checkboxes': selectedIds.length}">
     <itf-checkbox-group v-model="selectedIds">
       <template v-for="(group, index) in groups">
         <div class="table-view-body">
@@ -40,22 +40,6 @@
 
 </template>
 <style lang="scss">
-.scrollable {
-  --itf-table-hover-bg: #f2f2f2;
-  --itf-table-min-width: 45px;
-
-  body[data-theme="dark"] & {
-    --itf-table-hover-bg: #393b41;
-  }
-
-  -webkit-overflow-scrolling: touch;
-  overflow: hidden scroll;
-
-  &.scrollable-x {
-    overflow-x: scroll;
-    padding-right: 4px;
-  }
-}
 .last-sticky-column:after {
   content: '';
   background: linear-gradient(to right,#dfe0e2,rgba(255,0,0,0));
@@ -77,6 +61,7 @@ import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
 import itfTableGroup from './TableGroup.vue';
 import itfTableHeader from './TableHeader.vue';
+import './table2.scss';
 
 export default @Component({
   name: 'itfTable2',

package/src/components/table/TableBody.vue

@@ -4,7 +4,11 @@
     <div
       v-for="(item, n) in rows"
       :key="n"
-      group="items" data-test="table-item" class="table-view-item grouped draggable-item">
+      group="items"
+      data-test="table-item"
+      class="table-view-item grouped draggable-item"
+      :class="{'selected': selectedIds.includes(item[idProperty])}"
+    >
       <div class="table-row-template">
         <div accept-group="items" class="table-view-body-space"></div>
         <div class="shadow-area">
@@ -31,7 +35,7 @@
               v-if="column.visible !== false"
               :data-column="k"
               :style="`width: ${column.width}px; max-width: ${column.width}px; left: ${column.left}px;`"
-              :class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !column.editable, 'p-1': column.editable}"
+              :class="{'sticky': column.pinned, 'last-sticky-column': k === lastPinnedIndex, 'flex-grow-1': column.grow, 'px-2': !column.editable, 'editable': column.editable}"
               class="table-view-item-value d-flex h-100 align-items-stretch">
               <slot :name="`column.${column.property}`" :item="item" :column="column">
                 <template v-if="column.editable">
@@ -45,7 +49,7 @@
                       @update:hours="updateValue(item, $event, n, column)"
                     />
                     <itf-textarea class="w-100" :rows="2" autogrow v-else-if="column.type === 'textarea'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
-                    <itf-money-field class="w-100" v-else-if="column.type === 'money'" no-currency-sign currency-disabled :currency-select="false" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
+                    <itf-money-field class="w-100" currency-select v-else-if="column.type === 'money'" :value="getValue(item, column)" @input="updateValue(item, $event, n, column)" />
                   </slot>
                 </template>
                 <template v-else>
@@ -92,45 +96,6 @@
   flex-direction: row;
 }
 
-.table-view-item-value {
-  text-overflow: ellipsis;
-  background-color: var(--bs-body-bg);
-  border-right: 1px solid var(--bs-border-color);
-  border-bottom: 1px solid var(--bs-border-color);
-  align-items: stretch;
-  display: flex;
-  position: relative;
-  min-width: var(--itf-table-min-width);
-
-  &.highlight-drop-column {
-    position: relative;
-
-    &:after {
-      content: "";
-      height: 100%;
-      z-index: 100;
-      width: 2px;
-      background: #47beff;
-      margin-left: -1px;
-      position: absolute;
-      left: 0;
-    }
-    &.right:after {
-      left: auto;
-      right: 0;
-    }
-  }
-  &:hover {
-    background-color: var(--bs-tertiary-bg);
-  }
-
-  &.sticky {
-    z-index: 4;
-    position: -webkit-sticky;
-    position: sticky;
-  }
-}
-
 .table-item-inner .extra {
   flex-grow: 1;
   border-color: var(--bs-border-color);
@@ -143,9 +108,9 @@
   z-index: 4;
   position: -webkit-sticky;
   position: sticky;
-  background-color: var(--bs-body-bg);
+  background-color: var(--itf-table2-row-bg);
   //border-right: 1px solid var(--bs-border-color);
-  border-bottom: 1px solid var(--bs-border-color);
+  //border-bottom: 1px solid var(--bs-border-color);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -201,6 +166,7 @@
 
 .table-item-inner .boundary.right {
   left: auto;
+  border-right: 1px solid var(--itf-table-border-color);
   right: 0;
 }
 
@@ -255,6 +221,7 @@ class itfTableBody extends Vue {
   @Prop() idProperty;
   @Prop(Boolean) showAddColumn;
   @Prop(Boolean) noSelectAll;
+  @Prop() selectedIds;
 
   getValue(item, column) {
     return get(item, column.property);

package/src/components/table/TableGroup.vue

@@ -59,6 +59,7 @@
             :rows="rows"
             :columns="visibleColumns"
             :no-select-all="noSelectAll"
+            :selected-ids="selectedIds"
             :show-add-column="showAddColumn">
             <template v-for="(_, name) in $slots" #[name]="slotData">
               <slot :name="name" v-bind="slotData || {}"/>
@@ -243,8 +244,9 @@
   }
 
   .table-add-new-item {
-    border-right: 1px solid rgb(238 238 238 / 1);
-    border-bottom: 1px solid rgb(238 238 238 / 1);
+    border-left: 1px solid var(--itf-table-border-color);
+    border-right: 1px solid var(--itf-table-border-color);
+    border-bottom: 1px solid var(--itf-table-border-color);
     outline: none;
 
     & > span {

package/src/components/table/TableHeader.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="itf-table-header" :class="{'no-header': !visibleHeader}">
+  <div class="itf-table2__header" :class="{'no-header': !visibleHeader}">
     <div ref="container" class="table-row-template">
       <div accept-group="items" class="table-view-body-space" v-dropzone="{ payload: 0 }"></div>
       <div class="shadow-area"></div>
@@ -36,8 +36,9 @@
                 <span :title="column.title[locale] || column.title['en_US']">
                   <span v-if="column.icon" :class="column.icon"></span>
                   {{column.title[locale] || column.title['en_US']}}
+                  <div class="itf-table2__subtitle">kr</div>
                 </span>
-<!--                <itf-icon name="arrow_up" :size="16" class="ms-1" />-->
+                <itf-icon name="arrow_up" :size="16" class="ms-1" />
               </template>
 
               <div v-if="column.sortable">
@@ -127,162 +128,6 @@
   </div>
 
 </template>
-<style lang="scss">
-.itf-table-header {
-  position: sticky;
-  top: 0;
-  z-index: calc(var(--row-count) + 1);
-
-  &.no-header {
-    --table-row-height: 0px;
-    --table-small-row-size: 0px;
-
-    .table-view-header-value {
-      border-top: 0 none;
-      border-bottom: 0 none;
-    }
-  }
-  .table-header.draggable-mirror{
-    z-index: 100000001;
-    background: rgba(235,237,239,0.75);
-  }
-  .table-row-template {
-    display: flex;
-    align-items: stretch;
-    height: var(--table-small-row-size);
-    user-select: none;
-  }
-  .table-view-header-value {
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    height: var(--table-row-height);
-    white-space: nowrap;
-    //border-top: 0;
-    border-top: 1px solid transparent;
-    border-left: 0;
-    border-right-width: thin;
-    border-bottom-width: thin;
-    border-style: solid;
-    position: relative;
-    display: flex;
-    min-width: var(--itf-table-min-width);
-    border-right-color: transparent;
-    border-bottom-color: var(--bs-border-color);
-    background-color: var(--bs-body-bg);
-    //background-color: rgb(238 238 238 / 1);
-    font-weight: 500;
-
-    &.last-sticky-column {
-      border-right-color: var(--bs-border-color);
-    }
-    &.reserved {
-      left: var(--shadow-area-width);
-      width: var(--indicator-area-width);
-    }
-    &.sticky {
-      position: sticky;
-      position: -webkit-sticky;
-      z-index: calc(var(--row-count) + 4);
-    }
-  }
-  .table-header {
-    flex: 0 0 auto;
-    overflow: hidden;
-    width: 100%;
-    text-overflow: ellipsis;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    gap: 0.25rem;
-    align-items: center;
-    & > div {
-      min-height: var(--table-row-height);
-      align-items: center;
-      justify-content: space-between;
-      display: flex;
-    }
-
-    &.table-header-add-column {
-      text-overflow: clip;
-    }
-  }
-  .resize-handle {
-    width: 4px;
-    height: var(--table-row-height);
-    position: absolute;
-    right: -2px;
-    top: 0;
-    background: #29ACE1;
-    border-radius: 2px;
-    z-index: 100;
-    opacity: 0;
-    cursor: ew-resize;
-    transition: .2s;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-  .context-menu-toggle {
-    flex: 1 1 auto;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-
-    span {
-      font-size: 12px;
-      line-height: 36px;
-    }
-  }
-  .itf-sortable-list {
-    display: flex;
-  }
-  .table-view-header-space {
-    height: 100%;
-    position: absolute;
-    left: 0;
-    display: none;
-    background: transparent;
-    z-index: 100;
-    width: 2px;
-    margin-left: -1px;
-
-    &.right {
-      left: auto;
-      right: 0;
-      top: 0;
-    }
-    &.active {
-      display: block;
-      &.over {
-        background: #47BEFF;
-      }
-    }
-  }
-  .draggable-mirror {
-    opacity: .5;
-  }
-  .draggable-container--over .table-view-header-space {
-    display: block;
-  }
-  .draggable-container--over .draggable--over .table-view-header-space {
-    background: #47BEFF;
-  }
-  .table-view-header-space > .table-view-header-dropzone {
-    position: absolute;
-    top: 0;
-    right: -50px;
-    bottom: 0;
-    left: -50px;
-  }
-  .table-view-header-value:not(.reserved):hover {
-    background-color: var(--bs-tertiary-bg);
-  }
-  .draggable-source--is-dragging {
-    z-index: 100;
-  }
-}
-</style>
 <script>
 import {Vue, Component, Prop, PropSync, Watch, Inject} from 'vue-property-decorator';
 import itfCheckbox from '../checkbox/Checkbox.vue';

package/src/components/table/index.stories.js

@@ -1,8 +1,10 @@
 import { storiesOf } from '@storybook/vue';
+import ITFSettings from '../../ITFSettings';
 import itfApp from '../app/App.vue';
 import itfButton from '../button/Button.vue';
 import itfTable from './Table.vue';
 import itfTable2 from './Table2.vue';
+import itfSelect from '../select/Select.vue';
 
 const exampleData = [{
   Employee: 'Cool',
@@ -72,12 +74,17 @@ const exampleData = [{
   Notes: 'Test'
 }];
 
+ITFSettings.currencies = [
+  { Id: '1', Code: 'USD', Title: 'USD', IsDefault: true, Symbol: '$' }
+];
+
 storiesOf('Common', module)
   .add('Simple Table', () => ({
     components: {
       itfTable,
       itfButton,
-      itfTable2
+      itfTable2,
+      itfSelect
     },
     data() {
       return {
@@ -111,7 +118,7 @@ storiesOf('Common', module)
             Id: 1,
             summary: true,
             Description: 'Total',
-            EmployeeId: 'Vitalii Savchuk',
+            EmployeeId: 1,
             Total: 100,
             FTE: 1.0,
             Position: { Title: 'Developer', Id: 1 },
@@ -131,7 +138,7 @@ storiesOf('Common', module)
             {
               "property": "Description",
               "title": { "en_US": "Description", "uk_UA": "Прізвище" },
-              "type": "textarea",
+              "type": "text",
               "editable": true,
               "sortable": false,
               width: 200,
@@ -331,7 +338,12 @@ storiesOf('Common', module)
           {{item.EmployeeId}}
         </template>
         <template #edit.employee="{ item }">
-          {{item.EmployeeId}}
+          <itf-select
+            class="w-100"
+            v-model="item.EmployeeId"
+            :reduce="item => item.Id"
+            :get-option-label="item => item.Name"
+            :options="[{ Id: 1, Name: 'Vitalii Savchuk' }]" />
         </template>
       </itf-table2>
 

package/src/components/table/table2.scss

@@ -0,0 +1,261 @@
+.itf-table2 {
+  --itf-table-border-color: #dbddd1;
+  --itf-table-header-bg: #f9faf5;
+  --itf-table-hover-bg: #f2f2f2;
+  --itf-table-bg: var(--bs-body-bg);
+  --itf-table-min-width: 45px;
+  --itf-table-input-border-color: #aaaba6;
+  --itf-table-input-focus-border-color: #0028aa;
+  --itf-table-selected-bg: #cbd6f4;
+  --itf-table-header-subtitle-color: #aeafaa;
+
+  // dark
+  body[data-theme="dark"] & {
+    --itf-table-hover-bg: #393b41;
+  }
+
+  &.scrollable {
+    -webkit-overflow-scrolling: touch;
+    overflow: hidden scroll;
+  }
+  &.scrollable-x {
+    overflow-x: scroll;
+    padding-right: 4px;
+  }
+
+  &__header {
+    background-color: var(--itf-table-header-bg);
+    position: sticky;
+    top: 0;
+    z-index: calc(var(--row-count) + 1);
+
+    &.no-header {
+      --table-row-height: 0px;
+      --table-small-row-size: 0px;
+
+      .table-view-header-value {
+        border-top: 0 none;
+        border-bottom: 0 none;
+      }
+    }
+    .table-header.draggable-mirror{
+      z-index: 100000001;
+      background: rgba(235,237,239,0.75);
+    }
+    .table-row-template {
+      display: flex;
+      align-items: stretch;
+      height: auto;
+      user-select: none;
+    }
+    .table-view-header-value {
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+      height: auto;
+      white-space: nowrap;
+      //border-top: 0;
+      border-top: 1px solid var(--itf-table-border-color);
+      border-left: 0;
+      border-right: 1px solid var(--itf-table-border-color);
+      border-bottom: 1px solid var(--itf-table-border-color);
+      position: relative;
+      display: flex;
+      min-width: var(--itf-table-min-width);
+      //background-color: var(--bs-body-bg);
+      //background-color: rgb(238 238 238 / 1);
+      //font-weight: 500;
+
+      &.last-sticky-column {
+        border-right-color: var(--bs-border-color);
+      }
+      &.reserved {
+        border-left: 1px solid var(--itf-table-border-color);
+        left: var(--shadow-area-width);
+        width: var(--indicator-area-width);
+      }
+      &.sticky {
+        position: sticky;
+        position: -webkit-sticky;
+        z-index: calc(var(--row-count) + 4);
+      }
+    }
+    .table-header {
+      flex: 0 0 auto;
+      overflow: hidden;
+      width: 100%;
+      text-overflow: ellipsis;
+      padding-left: 0.75rem;
+      padding-right: 0.5rem;
+      gap: 0.25rem;
+      align-items: center;
+      & > div {
+        min-height: var(--table-row-height);
+        align-items: center;
+        justify-content: space-between;
+        display: flex;
+      }
+
+      &.table-header-add-column {
+        text-overflow: clip;
+      }
+    }
+    .resize-handle {
+      width: 4px;
+      bottom: 0;
+      position: absolute;
+      right: -2px;
+      top: 0;
+      background: #29ACE1;
+      border-radius: 2px;
+      z-index: 100;
+      opacity: 0;
+      cursor: ew-resize;
+      transition: .2s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+    .context-menu-toggle {
+      flex: 1 1 auto;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+
+      span {
+        font-size: 12px;
+        line-height: 36px;
+      }
+    }
+    .itf-sortable-list {
+      display: flex;
+    }
+    .table-view-header-space {
+      height: 100%;
+      position: absolute;
+      left: 0;
+      display: none;
+      background: transparent;
+      z-index: 100;
+      width: 2px;
+      margin-left: -1px;
+
+      &.right {
+        left: auto;
+        right: 0;
+        top: 0;
+      }
+      &.active {
+        display: block;
+        &.over {
+          background: #47BEFF;
+        }
+      }
+    }
+    .draggable-mirror {
+      opacity: .5;
+    }
+    .draggable-container--over .table-view-header-space {
+      display: block;
+    }
+    .draggable-container--over .draggable--over .table-view-header-space {
+      background: #47BEFF;
+    }
+    .table-view-header-space > .table-view-header-dropzone {
+      position: absolute;
+      top: 0;
+      right: -50px;
+      bottom: 0;
+      left: -50px;
+    }
+    .table-view-header-value:not(.reserved):hover {
+      background-color: var(--bs-tertiary-bg);
+    }
+    .draggable-source--is-dragging {
+      z-index: 100;
+    }
+  }
+
+  &__subtitle {
+    color: var(--itf-table-header-subtitle-color);
+  }
+
+  .table-view-item {
+    --itf-table2-row-bg: var(--itf-table-bg);
+
+    background-color: var(--itf-table2-row-bg);
+
+    &.selected {
+      --itf-table2-row-bg: var(--itf-table-selected-bg);
+    }
+    &:hover {
+      --itf-table2-row-bg: var(--itf-table-selected-bg);
+    }
+
+    .indicator {
+      border-left: 1px solid var(--itf-table-border-color);
+    }
+  }
+
+
+  &:hover {
+    .table-view-item-value.editable {
+      .form-control {
+        border: 1px solid var(--itf-table-input-border-color);
+      }
+    }
+  }
+  .table-view-item-value {
+    text-overflow: ellipsis;
+    align-items: stretch;
+    display: flex;
+    position: relative;
+    min-width: var(--itf-table-min-width);
+
+    .itf-table2__striped & {
+      border-right: 1px solid var(--bs-border-color);
+      border-bottom: 1px solid var(--bs-border-color);
+    }
+
+    &.editable {
+      padding: 2px;
+
+      .form-control {
+        border-radius: 0;
+        border: 1px solid transparent;
+        background-color: transparent;
+        box-shadow: none;
+
+        &:focus {
+          border-color: var(--itf-table-input-focus-border-color);
+        }
+      }
+    }
+
+    &.highlight-drop-column {
+      position: relative;
+
+      &:after {
+        content: "";
+        height: 100%;
+        z-index: 100;
+        width: 2px;
+        background: #47beff;
+        margin-left: -1px;
+        position: absolute;
+        left: 0;
+      }
+      &.right:after {
+        left: auto;
+        right: 0;
+      }
+    }
+
+    &.sticky {
+      z-index: 4;
+      position: -webkit-sticky;
+      position: sticky;
+    }
+  }
+}

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

@@ -15,9 +15,9 @@
     </div>
 
     <div v-if="currencySelect" class="itf-money-field__currency">
-      <span>{{ selectedCurrencyCode }}<itf-icon v-if="!currencyDisabled" name="chevron_down" /></span>
+      <span>{{ selectedCurrencyCode }}<itf-icon v-if="!currencyDisabled && currenciesList.length > 1" name="chevron_down" /></span>
       <select v-if="!disabled && !currencyDisabled" :value="currencyId" @input="onCurrencyChanged">
-        <option v-for="currency in currencies" :key="currency.Id" :value="currency.Id" :selected="currencyId === currency.Id">
+        <option v-for="currency in currenciesList" :key="currency.Id" :value="currency.Id" :selected="currencyId === currency.Id">
           {{ currency.Symbol }}, {{ currency.Code }} - {{ currency.Title }}
         </option>
       </select>
@@ -77,6 +77,7 @@ import itfSelect from '../select/Select';
 import itfLabel from '../form/Label';
 import itfIcon from '../icon/Icon';
 import {stringToNumber} from '../../helpers/formatters';
+import ITFSettings from '../../ITFSettings';
 
 export default @Component({
   name: 'itfMoneyField',
@@ -101,6 +102,10 @@ class itfMoneyField extends Vue {
   @Prop({ type: Number, default: -1000000000}) minValue;
   @Prop({ type: Number, default: 1000000000}) maxValue;
 
+  get currenciesList() {
+    return this.currencies?.length ? this.currencies : ITFSettings.currencies;
+  }
+
   get mask() {
     return {
       mask: Number,
@@ -128,11 +133,11 @@ class itfMoneyField extends Vue {
   }
 
   onCurrencyChanged(e) {
-    const currency = this.currencies.find((c) => c.Id === parseInt(e.target.value));
+    const currency = this.currenciesList.find((c) => c.Id === parseInt(e.target.value));
     this.$emit('update:currency', currency)
   }
 
-  get  precition() {
+  get precition() {
     return this.selectedCurrency ? this.selectedCurrency.Precision : 2;
   }
 
@@ -149,10 +154,10 @@ class itfMoneyField extends Vue {
   }
 
   get selectedCurrency() {
-    if (!this.currency || !this.currencies) {
-      return null;
+    if (!this.currency || !this.currenciesList) {
+      return this.currenciesList.find(({ IsDefault }) => IsDefault) || null;
     }
-    return this.currencies.find(({ Id }) => this.currency.Id === Id);
+    return this.currenciesList.find(({ Id }) => this.currency.Id === Id);
   }
 
   setValue (val) {

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

@@ -1,11 +1,11 @@
 <template>
 
   <div class="itf-text-field input-group" :class="{ 'with-addon addon-start': prependIcon, 'with-addon addon-end': clearable }">
-    <div class="addon" v-if="prependIcon || $slots.addon">
-      <slot name="addon">
+    <slot name="addon">
+      <div class="addon" v-if="prependIcon">
         <itf-icon :name="prependIcon"/>
-      </slot>
-    </div>
+      </div>
+    </slot>
 
     <input
       ref="input"

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

@@ -5,7 +5,7 @@
       <slot></slot>
     </div>
 
-    <div class="position-relative input-group">
+    <div class="position-relative" :class="{'input-group': prependIcon}">
       <div class="addon" v-if="prependIcon">
         <slot name="addon">
           <itf-icon :name="prependIcon"/>