@everchron/ec-shards 3.1.3 → 3.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everchron/ec-shards",
-  "version": "3.1.3",
+  "version": "3.1.5",
   "private": false,
   "description": "Everchron Shards UI Library",
   "repository": "https://github.com/everchron/ec-shards.git",

package/src/components/alert/alert.vue

@@ -1,11 +1,11 @@
 <template>
   <div v-if="show" class="ecs-alert" :class="[typeClass, dismissable ? 'ecs-alert-dismissable' : '', inset ? 'ecs-alert-inset' : '']">
     <button v-if="dismissable" @click="dismiss" class="close">
-      <ecs-icon type="close" width="20" height="20" />
+      <ecs-icon type="close" size="20" />
     </button>
     <div class="ecs-alert-inner">
       <h4 v-if="headline" class="ecs-alert-headline">
-        <ecs-icon v-if="icon" :type="icon" width="20" height="20" />
+        <ecs-icon v-if="icon" :type="icon" size="20" />
         {{ headline }}
       </h4>
       <div v-if="$slots.default" class="ecs-alert-content">

package/src/components/breadcrumb-button/breadcrumb-button.vue

@@ -7,8 +7,8 @@
               typeClass
             ]"
   >
-    <ecs-icon v-if="icon" :type="icon" width="20" height="20" />
-    <ecs-icon v-if="type == 'more'" type="more" width="20" height="20" />
+    <ecs-icon v-if="icon" :type="icon" size="20" />
+    <ecs-icon v-if="type == 'more'" type="more" size="20" />
     <span v-if="type != 'more'">
       <slot></slot>
     </span>

package/src/components/button/button.vue

@@ -13,7 +13,7 @@
       @mouseover="$emit('mouseover', $event)"
       @mouseleave="$emit('mouseleave', $event)">
 
-    <ecs-icon v-if="icon || loading" :type="iconType" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon || loading" :type="iconType" :size="iconSize" />
     <slot></slot>
   </a>
 
@@ -31,7 +31,7 @@
       @mouseover="$emit('mouseover', $event)"
       @mouseleave="$emit('mouseleave', $event)">
 
-    <ecs-icon v-if="icon || loading" :type="iconType" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon || loading" :type="iconType" :size="iconSize" />
     <slot></slot>
   </button>
 

package/src/components/button-context/button-context.vue

@@ -5,7 +5,7 @@
     :style="selectedColorText"
     @click="$emit('click', $event)">
 
-    <ecs-icon v-if="icon || loading" :type="iconType" width="20" height="20" />
+    <ecs-icon v-if="icon || loading" :type="iconType" size="20" />
     <div v-if="selectedColor" class="ecs-context-button-color" :style="selectedColorBackground" />
     <slot></slot>
   </button>

package/src/components/button-more/button-more.vue

@@ -5,7 +5,7 @@
             ]"
     @click="$emit('click', $event)">
 
-    <ecs-icon v-if="type == 'ellipsis'" type="more" width="20" height="20" color="#FFF" />
+    <ecs-icon v-if="type == 'ellipsis'" type="more" size="20" color="#FFF" />
     <slot></slot>
   </button>
 </template>

package/src/components/button-table/button-table.vue

@@ -15,7 +15,7 @@
     @mouseover="$emit('mouseover', $event)"
     @mouseleave="$emit('mouseleave', $event)">
 
-    <ecs-icon v-if="icon || loading" :type="iconType" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon || loading" :type="iconType" :size="iconSize" />
     <div v-if="label != null" class="button-label">{{ label }}</div>
     <div v-if="chevron" class="chevron" :class="active ? 'expand' : ''" />
   </button>

package/src/components/button-toolbar/button-toolbar.vue

@@ -9,10 +9,10 @@
             dropdownClass]"
             @click="$emit('click', $event)">
 
-    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
+    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
     <slot></slot>
     <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
-    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
+    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
   </a>
 
   <button v-else class="ecs-toolbar-button"
@@ -25,10 +25,10 @@
             dropdownClass]"
             @click="$emit('click', $event)">
 
-    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
+    <ecs-icon v-if="(icon && iconPosition == 'left') || (loading && iconPosition == 'left')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
     <slot></slot>
     <span class="badge" v-if="badge" :style="{ background: badgeColor }"></span>
-    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :width="iconSize" :height="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
+    <ecs-icon v-if="(icon && iconPosition == 'right') || (loading && iconPosition == 'right')" :size="iconSize" :color="iconTint" :type="iconType" :spinning="loading" />
   </button>
 </template>
 

package/src/components/button-toolbar-icon/button-toolbar-icon.vue

@@ -8,7 +8,7 @@
     <ecs-icon :type="icon" />
     <span v-if="hasBadge" class="badge" />
     <div class="sub-icon">
-      <ecs-icon v-if="subIcon" :type="subIcon" width="14" height="14" />
+      <ecs-icon v-if="subIcon" :type="subIcon" size="14" />
     </div>
   </button>
 </template>

package/src/components/collection-control/collection-control.vue

@@ -8,7 +8,7 @@
       isVisible || nonInteractive ? '' : 'collapsed',
       nonInteractive ? '' : 'interactive',
       ]">
-      <ecs-icon v-if="icon" :type="icon" color="#858E9E" :width="iconSize" :height="iconSize" />
+      <ecs-icon v-if="icon" :type="icon" color="#858E9E" :size="iconSize" />
       <div class="description" v-if="label">{{ label }}</div>
       <div class="collection"
         @mouseover="toggleTooltip"

package/src/components/data-card/data-card.vue

@@ -15,7 +15,7 @@
       <slot name="control"></slot>
     </div>
 
-    <ecs-icon v-if="icon" :type="icon" :color="iconColor" :spinning="spinning" width="26" height="26" />
+    <ecs-icon v-if="icon" :type="icon" :color="iconColor" :spinning="spinning" size="26" />
     <ecs-skeleton-loader v-if="icon && loading" type="rect" :width="26" :height="26" />
 
     <div class="ecs-data-card-inner">

package/src/components/dialog/dialog.vue

@@ -1,14 +1,14 @@
 <template>
-    <dialog ref="dialog" :class="[large ? 'ecs-dialog-large' : '']" class="ecs-dialog">
-      <div class="ecs-dialog-body">
-        <slot></slot>
-      </div>
-
-      <div v-if="$slots.actions" class="ecs-dialog-footer" :class="[stackedFooter ? 'ecs-dialog-footer-stacked' : '']">
-        <!-- @slot Slot for the dialog footer buttons. Should only contain EcsButtonDialog components. -->
-        <slot name="actions"></slot>
-      </div>
-    </dialog>
+  <dialog v-if="lazyLoad" ref="dialog" :class="[large ? 'ecs-dialog-large' : '']" class="ecs-dialog">
+    <div class="ecs-dialog-body">
+      <slot></slot>
+    </div>
+
+    <div v-if="$slots.actions" class="ecs-dialog-footer" :class="[stackedFooter ? 'ecs-dialog-footer-stacked' : '']">
+      <!-- @slot Slot for the dialog footer buttons. Should only contain EcsButtonDialog components. -->
+      <slot name="actions"></slot>
+    </div>
+  </dialog>
 </template>
 
 <script>
@@ -33,7 +33,8 @@
 
     data () {
       return {
-        isShown: this.show
+        isShown: this.show,
+        lazyLoad: false
       }
     },
 
@@ -49,10 +50,17 @@
       show(){
         this.isShown = this.show
 
-        if(this.isShown)
-          this.$refs.dialog.showModal()
-        else
+        if(this.isShown){
+          this.lazyLoad = true
+          this.$nextTick(() => {
+            this.$refs.dialog.showModal()
+          })
+        } else {
           this.$refs.dialog.close()
+          this.$nextTick(() => {
+            this.lazyLoad = false
+          })
+        }
       }
     },
 
@@ -80,8 +88,8 @@
   display: flex;
   flex-direction: column;
   margin: auto;
-  margin-bottom: auto;
-  margin-top: auto;
+  margin-bottom: auto !important;
+  margin-top: auto !important;
   border: none;
   padding: 0;
   overflow: visible;

package/src/components/document-state/document-state.vue

@@ -5,7 +5,7 @@
     <div v-if="instantView" class="instant" />
     <div v-else class="no-instant" />
     <span v-if="loading" class="loading">
-      <ecs-icon type="loading" width="18px" height="18px" color="#202127" />
+      <ecs-icon type="loading" size="18" color="#202127" />
     </span>
   </div>
 </template>

package/src/components/empty-state/empty-state.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ecs-empty-state">
-    <ecs-icon v-if="type!='loading'" :type="type" :color="iconColor" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="type!='loading'" :type="type" :color="iconColor" :size="iconSize" />
     <div v-else class="ecs-empty-state-loading" />
     <div v-if="type!='loading'" class="ecs-empty-state-message" :class="size">
       <slot></slot>

package/src/components/excerpt-snippet/excerpt-snippet.vue

@@ -3,7 +3,7 @@
     <div class="ecs-excerpt-title">
       <div class="ecs-excerpt-title-headline">
         <ecs-skeleton-loader v-if="icon && loading" type="rect" :width="20" :height="20" />
-        <ecs-icon v-if="icon && !loading" :type="icon" width="20" height="20" />
+        <ecs-icon v-if="icon && !loading" :type="icon" size="20" />
         <ecs-skeleton-loader v-if="loading" type="single" :width="20" />
         <span v-else>{{ headline }}</span>
       </div>

package/src/components/formatted/formatted.vue

@@ -37,11 +37,13 @@
 
 .ecs-formatted{
   font-size: $type-scale-3-font-size;
-  line-height: 1.4em;
-  min-height: 1.4em;
+  line-height: $type-scale-3-line-height;
+  min-height: $type-scale-3-line-height;
 
   &-sml{
     font-size: $type-scale-2-font-size;
+    line-height: $type-scale-2-line-height;
+    min-height: $type-scale-2-line-height;
   }
 
   p{
@@ -77,19 +79,6 @@
         opacity: 1;
       }
     }
-
-    &[href*="//"]:not([href*="everchron.com"]):after,
-    &[href*="//"]:not([href*="everchron.me"]):after,
-    &[href*="//"]:not([href*="everchron.co.uk"]):after,
-    &[href*="//"]:not([href*="everchron.com.au"]):after,
-    &[href*="//"]:not([href*="everchron.wtf"]):after{
-      content: "";
-      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path fill="#858E9E" d="M7.625,3.5 C7.524,3.5 7.434,3.459 7.366,3.395 C7.364,3.393 7.361,3.393 7.359,3.391 L6.427,2.458 L4.067,4.818 C3.823,5.061 3.427,5.061 3.183,4.818 C2.939,4.574 2.939,4.178 3.183,3.934 L5.542,1.575 L4.609,0.641 C4.607,0.639 4.607,0.636 4.605,0.634 C4.541,0.566 4.5,0.476 4.5,0.375 C4.5,0.168 4.668,0 4.875,0 L7.5,0 C7.776,0 8,0.224 8,0.5 L8,3.125 C8,3.332 7.832,3.5 7.625,3.5 Z M1,2.25 L1,6.75 C1,6.888 1.112,7 1.25,7 L5.75,7 C5.888,7 6,6.888 6,6.75 L6,4 L7,5 L7,7 C7,7.553 6.553,8 6,8 L1,8 C0.448,8 0,7.553 0,7 L0,2 C0,1.448 0.448,1 1,1 L3,1 L4,2 L1.25,2 C1.112,2 1,2.112 1,2.25 Z"/></svg>');
-      width: 8px;
-      display: inline-block;
-      height: 8px;
-      margin-left: 4px;
-    }
   }
 
   ul{

package/src/components/info-tooltip/info-tooltip.vue

@@ -2,7 +2,7 @@
   <i class="ecs-info-tooltip"
     @click="handleClick"
   >
-    <ecs-icon :type="icon" width="20" height="20" />
+    <ecs-icon :type="icon" size="20" />
   </i>
 </template>
 

package/src/components/input/input.vue

@@ -42,7 +42,7 @@
     v-bind="$attrs"
     :ref="refr"
     :id="refr"
-  >
+  />
 </template>
 
 <script>
@@ -130,12 +130,6 @@
           return `ecs-form-control-format-${this.format}`
         return this.format
       }
-    },
-
-    watch:{
-      value(){
-        console.warn('value is nao', this.value)
-      }
     }
   }
 </script>
@@ -169,13 +163,16 @@
     border: 0;
   }
 
-  &:disabled,
-  &[readonly] {
+  &:disabled{
     background-color: rgba($color-gray-6, .15);
     color: $color-gray-8;
     cursor: default;
   }
 
+  &[readonly] {
+    cursor: default;
+  }
+
   &-subtle{
     background-color: rgba($color-gray-8, .15);
     border: 1px solid rgba($color-gray-8, .2);
@@ -186,8 +183,7 @@
       box-shadow: none;
     }
 
-    &:disabled,
-    &[readonly] {
+    &:disabled{
       background-color: rgba($color-gray-8, .1);
       border: 1px solid rgba($color-gray-8, .1);
       opacity: .8;

package/src/components/input-addon/input-addon.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="ecs-input-group-addon" :class="[iconClass, button ? `has-button` : '',]">
     <slot></slot>
-    <ecs-icon v-if="icon" :type="icon" width="80%" height="80%" />
+    <ecs-icon v-if="icon" :type="icon" size="80%" />
   </span>
 </template>
 

package/src/components/input-clear/input-clear.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="ecs-input-clear">
     <button @click="$emit('click', $event)" :title="tooltip" class="ecs-input-clear-button" />
-    <ecs-icon v-if="loading" type="loading" width="32" height="32" spinning color="#AEB1B9" />
+    <ecs-icon v-if="loading" type="loading" size="32" spinning color="#AEB1B9" />
   </div>
 </template>
 

package/src/components/input-search/input-search.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ecs-search-group" :class="groupSizeClass">
-    <ecs-icon type="search" color="#B9BCC2" :width="iconSize" :height="iconSize" />
+    <ecs-icon type="search" color="#B9BCC2" :size="iconSize" />
     <input ref="input"
       :name="name"
       :disabled="disabled"

package/src/components/multiselect-option/multiselect-option.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ecs-multiselect-option" :class="typeClass">
-    <ecs-icon v-if="icon" :type="icon" width="20" height="20" />
+    <ecs-icon v-if="icon" :type="icon" size="20" />
     <slot></slot>
   </div>
 </template>

package/src/components/multiselect-search-token/multiselect-search-token.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="ecs-multiselect-search-token" :class="typeClass">
     <div v-if="icon || operator" class="symbol">
-      <ecs-icon :type="icon" width="20" height="20" color="#FFF" />
+      <ecs-icon :type="icon" size="20" color="#FFF" />
       <div v-if="operator" class="operator">{{ operator }}</div>
     </div>
     <div class="query">
       <div v-if="descriptor" class="descriptor">{{ descriptor }}</div>
       <slot></slot>
       <button @click="$emit('remove', $event)" class="remove" title="Remove">
-        <ecs-icon type="close" width="14" height="14" color="#FFF" />
+        <ecs-icon type="close" size="14" color="#FFF" />
       </button>
     </div>
   </div>

package/src/components/multiselect-token/multiselect-token.vue

@@ -2,7 +2,7 @@
   <div class="ecs-multiselect-token">
     <slot></slot>
     <button @click="$emit('remove', $event)" class="remove">
-      <ecs-icon type="close" width="14" height="14" color="#FFF" />
+      <ecs-icon type="close" size="14" color="#FFF" />
     </button>
   </div>
 </template>

package/src/components/overlay/overlay.vue

@@ -3,7 +3,7 @@
     <div v-if="isShown" class="ecs-overlay" :style="{ top: offsetTop + 'px', height: 'calc(100vh - '+ offsetTop +'px' }">
       <div class="ecs-overlay-header">
         <div class="ecs-overlay-titles">
-          <ecs-icon v-if="icon" :type="icon" width="40" height="40" color="#B9BCC2" />
+          <ecs-icon v-if="icon" :type="icon" size="40" color="#B9BCC2" />
           <div>
             <span class="title"><span v-if="headerTitleEmphasized" class="emphasized">{{ headerTitleEmphasized }}</span> {{ headerTitle }}</span>
             <span v-if="headerTitleSubline" class="subline">{{ headerTitleSubline }}</span>

package/src/components/pagination/pagination.vue

@@ -18,6 +18,9 @@
           <ecs-button @click="$emit('lastPage', $event)" :disabled="loading || currentPage === totalPages" icon="chevron-double-right" icon-only type="secondary" title="Last Page" data-test="pagination-last-button" />
         </ecs-flex-row>
       </template>
+      <template v-else-if="hasRange">
+        <span class="ecs-pagination-range">Showing entries <span>{{itemRangeFrom}} to {{itemRangeTo}}</span> of <span>{{itemRangeTotal}}</span></span>
+      </template>
       <transition name="fade">
         <ecs-flex-row v-if="loading" :gap="4" :class="$slots.tabs && type =='paginated' ? 'push-right' : ''">
           <div v-if="!$slots.tabs && type =='paginated'" class="separator" />
@@ -105,6 +108,31 @@
       itemsPerPageSelected: {
         type: Number,
         default: 100
+      },
+      /** Number of the visible item range (starting). */
+      itemRangeFrom: {
+        type: [Number, String]
+      },
+      /** Number of the visible item range (ending). */
+      itemRangeTo: {
+        type: [Number, String]
+      },
+      /** Number of the total items in the index. */
+      itemRangeTotal: {
+        type: [Number, String]
+      }
+    },
+
+    computed: {
+      hasRange() {
+        if (
+          this.itemRangeFrom &&
+          this.itemRangeTo &&
+          this.itemRangeTotal &&
+          this.itemRangeFrom !== '' &&
+          this.itemRangeTo !== '' &&
+          this.itemRangeTotal !== '')
+          return true
       }
     }
   }
@@ -152,6 +180,18 @@
     }
   }
 
+  &-range{
+    padding-left: $spacing-15;
+    font-size: $type-scale-2-font-size;
+    line-height: $type-scale-2-line-height;
+    color: $color-gray-10;
+
+    > span{
+      font-weight: $font-weight-medium;
+      color: $color-gray-14;
+    }
+  }
+
   &-controls{
     margin-left: $spacing-10;
   }

package/src/components/party-entry/party-entry.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="ecs-party-entry" :class="[ party, shared ? 'shared' : '', (color && background) ? 'ecs-party-entry-colored' : '']" :style="{ color: color }">
-    <ecs-icon v-if="icon && iconPosition == 'left'" :type="iconType" :color="iconColor" :style="'margin-right:'+iconSpacing" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon && iconPosition == 'left'" :type="iconType" :color="iconColor" :style="'margin-right:'+iconSpacing" :size="iconSize" />
     <span>
       <slot></slot>
     </span>
-    <ecs-icon v-if="icon && iconPosition == 'right'" :type="iconType" :color="iconColor" :style="'margin-left:'+iconSpacing" :width="iconSize" :height="iconSize" />
+    <ecs-icon v-if="icon && iconPosition == 'right'" :type="iconType" :color="iconColor" :style="'margin-left:'+iconSpacing" :size="iconSize" />
     <div v-if="background" class="ecs-party-entry-background" />
   </div>
 </template>

package/src/components/popover-header/popover-header.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="ecs-popover-header">
     <div class="ecs-popover-header-title">
-      <ecs-icon v-if="icon" :type="icon" width="36" height="36" class="icon" color="#B4B9BE" />
+      <ecs-icon v-if="icon" :type="icon" size="36" class="icon" color="#B4B9BE" />
       <h2 class="ecs-headline-2">{{title}}</h2>
     </div>
     <div v-if="hasControls" class="ecs-popover-header-actions">

package/src/components/segment/segment.vue

@@ -3,7 +3,7 @@
     <label v-for="option in options" :key="option.id" :for="option.id">
       <input type="radio" :name="name" :value="option.id" :id="option.id" :checked="value==option.id" :disabled="option.disabled" @click="$emit('click', option.id)">
       <span class="ecs-segment" :title="option.title">
-        <ecs-icon v-if="option.icon" :class="[option.icon && option.label ? 'icon-spacing' : '']" :type="option.icon" width="20" height="20" color="#2F333C" />
+        <ecs-icon v-if="option.icon" :class="[option.icon && option.label ? 'icon-spacing' : '']" :type="option.icon" size="20" color="#2F333C" />
         {{ option.label }}
       </span>
     </label>

package/src/components/sequence-map-button/sequence-map-button.vue

@@ -4,7 +4,7 @@
           :class="[active ? 'active' : '', loading ? 'loading' : '', disabled ? 'disabled' : '', completed ? 'completed' : '']">
     <span class="count">
       {{ step }}
-      <ecs-icon v-if="loading" type="loading" class="loading" width="34" height="34" />
+      <ecs-icon v-if="loading" type="loading" class="loading" size="34" />
     </span>
     <slot></slot>
     <div class="step-indicator" />

package/src/components/tab-button/tab-button.vue

@@ -8,7 +8,7 @@
     @click="handleClick">
 
     <ecs-icon v-if="icon" :type="icon" />
-    <ecs-icon v-if="icon && sticker" :type="`sticker-${sticker}`" class="sticker" width="16" height="16" />
+    <ecs-icon v-if="icon && sticker" :type="`sticker-${sticker}`" class="sticker" size="16" />
     <slot></slot>
     <span v-if="shortcut" class="shortcut">{{ shortcut }}</span>
     <span class="hover" />
@@ -316,10 +316,10 @@
   padding-left: 1px;
   
   .ecs-tab-button{
-    border-radius: 0 0 3px 3px;
+    border-radius: 0 0 $border-radius-small $border-radius-small;
     color: $color-gray-14;
     height: 38px;
-    padding: 0 20px;
+    padding: 0 $spacing-25;
     text-align: center;
     font-size: $type-scale-3-font-size;
     line-height: 26px;
@@ -330,6 +330,11 @@
     border-top-color: $color-gray-4;
     position: relative;
     margin-left: -1px;
+    transition: .2s background-color, .2s border-color, .2s color;
+
+    &:hover{
+      background-color: $color-gray-3;
+    }
 
     &:before{
       content: "";
@@ -338,7 +343,7 @@
       background: $color-gray-4;
       border-radius: 1px;
       position: absolute;
-      right: 0;
+      left: 0;
     }
 
     &:after{
@@ -354,18 +359,24 @@
     &.show{
       color: $color-blue-10;
       font-weight: $font-weight-medium;
+      letter-spacing: -.015em;
       background: #FFFFFF;
       border: 1px solid $color-gray-4;
       border-top-color: #FFF;
+      z-index: 1;
 
       &:after{
         transform: scale(1);
         opacity: 1;
       }
+
+      + .ecs-tab-button:before{
+        opacity: 0;
+      }
     }
 
     &.show:before,
-    &:last-child:before{
+    &:first-child:before{
       opacity: 0;
     }
   }

package/src/components/transcript-state/transcript-state.vue

@@ -5,7 +5,7 @@
     <div v-if="state =='repairing'" class="repairing" />
     <div v-if="state =='corrupted'" class="corrupted" />
     <span v-if="state == 'loading'" class="loading">
-      <ecs-icon type="loading" width="18px" height="18px" color="#202127" />
+      <ecs-icon type="loading" size="18px" color="#202127" />
     </span>
   </div>
 </template>

package/src/components/tree-list-item/tree-list-item.vue

@@ -15,7 +15,7 @@
         :collapsed="!isVisible"
         @click="toggleCollapse" />
 
-      <ecs-icon v-if="icon" :type="icon" :color="iconColor" :width="iconSize" :height="iconSize" />
+      <ecs-icon v-if="icon" :type="icon" :color="iconColor" :size="iconSize" />
 
       <div v-if="$slots.control" class="ecs-tree-view-entry-control">
         <!-- @slot Slot for a selection control, such as a checkbox or radiobutton. -->