@itfin/components 2.0.34 → 2.0.36

package/src/components/icon/new-icons/check.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14.6936 5.43799C14.8771 5.29535 15.1419 5.29656 15.3254 5.45362C15.5088 5.61084 15.5505 5.87237 15.4377 6.07569L15.3801 6.15869L8.95137 13.6587C8.85689 13.7689 8.71861 13.8328 8.57344 13.8335C8.42843 13.834 8.2899 13.7718 8.19453 13.6626L4.62324 9.57178L4.56465 9.48877C4.45006 9.28652 4.48917 9.02459 4.67109 8.86573C4.85306 8.70687 5.11798 8.70339 5.30293 8.84424L5.37715 8.91358L8.56758 12.5689L14.6203 5.5083L14.6936 5.43799Z" fill="currentColor"/>
+</svg>

package/src/components/icon/new-icons/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 8.41421L9 15.5858C9 16.4767 10.0771 16.9229 10.7071 16.2929L14.2929 12.7071C14.6834 12.3166 14.6834 11.6834 14.2929 11.2929L10.7071 7.70711C10.0771 7.07714 9 7.52331 9 8.41421Z" fill="currentColor"/>
+</svg>

package/src/components/icon/new-icons/minus.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M5.83325 10H14.1666" stroke="#7A818E" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/panels/PanelItemEdit.vue

@@ -1,8 +1,8 @@
 <template>
-  <div v-loading="loading" class="px-3 pt-2 h-100">
+  <div v-loading="loading" class="px-3 pt-2 h-100 d-flex flex-column">
     <itf-form
       ref="editForm"
-      class="d-flex flex-column justify-content-between h-100"
+      class="d-flex flex-column justify-content-between flex-grow-1"
       @keydown.native.shift.enter.stop.prevent="onSaveClick"
       @keydown.native.esc.stop.prevent="$emit('cancel')"
     >
@@ -10,10 +10,10 @@
       <div class="py-3 justify-content-end d-flex align-items-center sticky-container">
         <div v-if="!hideFooter">
           <itf-button v-tooltip.delay="'Hot key: Esc'" secondary squircle :loading="loading" :disabled="loading" @click="$emit('cancel')">
-            <span>{{ $t('components.modal.cancel') }}</span>
+            <span>{{ cancelBtnText }}</span>
           </itf-button>
           <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary squircle :loading="loading" :disabled="loading" @click="onSaveClick">
-            <span>{{ $t('components.modal.save') }}</span>
+            <span>{{ saveBtnText }}</span>
           </itf-button>
         </div>
       </div>
@@ -51,6 +51,8 @@ import itfButton from '../button/Button.vue';
 export default class PanelItemEdit extends Vue {
   @Prop(Boolean) loading;
   @Prop(Boolean) hideFooter;
+  @Prop({ type: String, default: function() { return this.$t('components.modal.save') } }) saveBtnText;
+  @Prop({ type: String, default: function() { return this.$t('components.modal.cancel') } }) cancelBtnText;
 
   onSaveClick() {
     if (this.$refs.editForm && !this.$refs.editForm.doValidation()) {

package/src/components/panels/PanelLink.vue

@@ -25,6 +25,7 @@ export default class PanelLink extends Vue {
   @Prop() list;
   @Prop({ type: String, default: 'active' }) activeClass: string;
   @Prop(Boolean) append: boolean;
+  @Prop(Boolean) replace: boolean;
 
   get on() {
     const handlers = {};
@@ -51,6 +52,9 @@ export default class PanelLink extends Vue {
     if (!this.append) {
       stack = stack.splice(0, this.currentPanel?.index + 1);
     }
+    if (this.replace) {
+      stack = [];
+    }
     const hash = stackToHash([
       ...stack,
       {
@@ -64,15 +68,16 @@ export default class PanelLink extends Vue {
   onClick(e) {
     e.preventDefault();
     e.stopPropagation();
+    const index = this.replace ? 0 : (this.append ? undefined : this.currentPanel?.index + 1);
     this.$emit('open', {
       panel: this.panel,
       payload: this.payload || {},
-      index: this.append ? undefined : this.currentPanel?.index + 1
+      index
     });
     if (!this.activeList) {
       return;
     }
-    this.activeList.openPanel(this.panel, this.payload || {}, this.append ? undefined : this.currentPanel?.index + 1);
+    this.activeList.openPanel(this.panel, this.payload || {}, index);
   }
 }
 </script>

package/src/components/panels/PanelList.vue

@@ -364,9 +364,7 @@ export default class PanelList extends Vue {
         newPanel.getPayload = () => newPanel.payload;
         newPanel.setPayload = (value: any) => {
           newPanel.payload = value;
-          newPanel.title = panel.caption(this.$t.bind(this), value);
-          newPanel.icon = panel.icon ? panel.icon(this.$t.bind(this), payload) : null,
-            this.setPanelHash()
+          this.setPanelHash();
         }
         newStack.push(newPanel);
         this.panelsStack = newStack;

package/src/components/popover/Popover.vue

@@ -29,6 +29,8 @@ class itfPopover extends Vue {
   @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;
 
   @Prop({ type: String, default: '' }) customClass;
+  @Prop({ type: Boolean }) appendToBody;
+  @Prop({ type: Boolean }) appendToContext;
 
   modalId = '';
 
@@ -64,7 +66,15 @@ class itfPopover extends Vue {
     const el = this.$refs.popover;
     const { default: Popover } = await import('bootstrap/js/src/popover');
 
-    const context = this.$el.closest('.itf-append-context') || document.body;
+    let context = document.body;
+    if (this.appendToContext && this.$el instanceof Node && this.$el.parentNode) {
+      context = this.$el.closest('.itf-append-context') || document.body;
+      this.$el.parentNode.removeChild(this.$el);
+      context.appendChild(this.$el); // should append only to body
+    } else if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+      context.appendChild(this.$el); // should append only to body
+    }
     this.modalEl = new Popover(this.$el, {
       content: el,
       container: context,

package/src/components/segmented-control/SegmentedControl.vue

@@ -4,14 +4,14 @@
       <span v-if="!isUndefined" ref="slider" class="selection" :class="{'elevation-1': !disabled}"></span>
 
       <div class="option" v-for="(item, n) in itemsWithNames" :key="n">
-        <label v-tooltip="tooltipCallback(item)" :key="n">
+        <label v-tooltip="tooltipCallback(item)" :key="n" :class="{'disabled': disabled || item[itemDisabled]}">
           <slot name="itemMarkup" :item="item" />
           <input
             ref="input"
             type="radio"
             :name="name"
             :value="n"
-            :disabled="disabled"
+            :disabled="disabled || item[itemDisabled]"
             :checked="isChecked(item)"
             @change="onItemChanged(item)" />
           <span>
@@ -51,6 +51,7 @@ class itfSegmentedControl extends Vue {
   @Prop({ type: Array, required: true }) items;
   @Prop({ type: String, default: 'Id' }) itemKey;
   @Prop({ type: String, default: 'Name' }) itemText;
+  @Prop({ type: String, default: 'Disabled' }) itemDisabled;
   @Prop({ type: Boolean, default: false }) returnObject;
   @Prop({ type: Boolean, default: false }) disabled;
   @Prop({ type: Function, default: () => null }) tooltipCallback;

package/src/components/table/TableHeader.vue

@@ -4,8 +4,8 @@
     <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>
-      <div v-if="indicatorType !== 'none'" class="table-view-header-value reserved sticky">
-        <itf-checkbox v-if="indicatorType !== 'none' && visibleHeader && !noSelectAll" ungrouped value="all" v-model="selectAll" ref="selectAll" />
+      <div class="table-view-header-value reserved sticky">
+        <itf-checkbox v-if="indicatorType === 'checkbox' && visibleHeader && !noSelectAll" ungrouped value="all" v-model="selectAll" ref="selectAll" />
       </div>
 
       <template v-for="(column, n) in visibleAttributes">

package/src/components/table/table2.scss

@@ -97,10 +97,8 @@ body[data-theme="dark"] {
     position: sticky;
     top: 0;
     bottom: 0;
-    right: -5px;
+    right: -.5rem;
     z-index: 8;
-    padding-right: 5px;
-    padding-left: 5px;
     display: flex;
     align-items: center;
 
@@ -112,12 +110,17 @@ body[data-theme="dark"] {
   .on-hover {
     opacity: 0;
     width: 0;
+    padding: 4px .5rem;
     overflow: hidden;
     pointer-events: none;
+    position: absolute;
+    right: 0;
+    background: linear-gradient(90deg, transparent 0, var(--itf-table2-row-bg) 10px);
 
     @media (max-width: 768px) {
       width: max-content;
       opacity: 1;
+      position: relative;
     }
   }
   .table-row-template:hover .on-hover {

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

@@ -154,11 +154,11 @@ class itfMoneyField extends Vue {
   }
 
   get selectedCurrencySymbol() {
-    return this.selectedCurrency ? this.selectedCurrency[this.symbolKey] : '#';
+    return this.selectedCurrency ? this.selectedCurrency[this.symbolKey] : '';
   }
 
   get selectedCurrencyCode() {
-    return this.selectedCurrency ? this.selectedCurrency[this.codeKey] : '###';
+    return this.selectedCurrency ? this.selectedCurrency[this.codeKey] : '';
   }
 
   get currencyId() {