@everchron/ec-shards 7.4.8 → 8.0.0

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

@@ -1,229 +0,0 @@
-<template>
-  <div class="ecs-search-group" :class="groupSizeClass">
-    <ecs-icon type="search" color="#B9BCC2" :size="iconSize" />
-    <input ref="input"
-      :name="name"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :autocomplete="autocomplete"
-      :value="value"
-      v-bind="$attrs"
-      @input="onInput"
-      @change="onChange"
-      :class="[
-        'ecs-search-input',
-        sizeClass,
-        typeClass
-      ]"
-    />
-    <ecs-input-clear v-if="showClear" @click="clearSearch" />
-  </div>
-</template>
-
-<script>
-  import EcsIcon from '../icon/icon'
-  import EcsInputClear from '../input-clear/input-clear'
-
-  export default {
-    components: {
-      EcsIcon,
-      EcsInputClear
-    },
-
-    props: {
-      /** Sets the placeholder of the search input. */
-      placeholder: {
-        type: String,
-        default: 'Search...'
-      },
-      /** Enables or disables native browser auto complete. */
-      autocomplete: {
-        type: String,
-        default: null
-      },
-      /** Sets the initial value of the input. */
-      value: {
-        type: [String, Number],
-        default: ''
-      },
-      name: {
-        type: String,
-        default: null
-      },
-      /** Disables the input. */
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      /** Determines if the clear button should be shown. */
-      showClear: {
-        type: Boolean,
-        default: false
-      },
-      /** Sets the size of the input. */
-      size: {
-        type: String,
-        validator: v => ['md', 'lg', 'sml', null].includes(v),
-        default: 'md'
-      },
-      /** Determines the type of the search input. The default one looks like a regular form input, subtle has a gray transparent background, and naked has no visible input. */
-      type: {
-        type: String,
-        validator: v => ['subtle', 'naked', null].includes(v),
-        default: null
-      },
-    },
-
-    computed: {
-      groupSizeClass() {
-        return this.size ? `ecs-search-group-${this.size}` : null
-      },
-
-      sizeClass() {
-        return this.size ? `ecs-search-input-${this.size}` : null
-      },
-
-      typeClass() {
-        return this.type ? `ecs-search-input-${this.type}` : null
-      },
-
-      iconSize() {
-        if(this.size === 'sml') {
-          return '20px'
-        } else if(this.size === 'md') {
-          return '24px'
-        } else {
-          return '30px'
-        }
-      },
-    },
-
-    methods: {
-      setValue(value) {
-        this.$refs.input.value = value
-        this.$emit('input', value)
-      },
-
-      onInput(e) {
-        this.setValue(e.target.value)
-      },
-
-      onChange(e) {
-        this.setValue(e.target.value)
-        this.$emit('change', e.target.value)
-      },
-
-      clearSearch() {
-        this.setValue('')
-        this.$emit('input', '')
-        this.$emit('change', '')
-      },
-    },
-
-    watch: {
-      value (newVal) {
-        this.setValue(newVal)
-      }
-    },
-
-    mounted() {
-      if (this.value) {
-        this.setValue(this.value)
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-@import "../../tokens/build/scss/tokens.scss";
-@import "../mixins/svg-uri";
-
-.ecs-search-group{
-  position: relative;
-  display: block;
-  width: 100%;
-
-  .ecs-input-clear{
-    position: absolute;
-  }
-
-  .icon{
-    position: absolute;
-    top: 50%;
-    left: 4px;
-    transform: translateY(-50%);
-    pointer-events: none;
-  }
-}
-
-.ecs-search-input{
-  display: block;
-  width: 100%;
-  padding: 7px 32px;
-  font-size: $type-scale-3-font-size;
-  font-family: $font-family-system;
-  line-height: 16px;
-  color: $color-gray-15;
-  background-color: #FFF;
-  background-clip: padding-box;
-  border: 1px solid rgba($color-gray-8, .4);
-  border-radius: $border-radius-small;
-  transition: .2s;
-  box-shadow: none;
-
-  &:focus{
-    border-color: rgba($color-blue-8, .5);
-    box-shadow: 0 0 0 2px rgba($color-blue-8, .15);
-  }
-
-  &-subtle{
-    background-color: rgba($color-gray-8, .15);
-    border: 1px solid rgba($color-gray-8, .2);
-
-    &:focus{
-      background-color: rgba($color-gray-8, .17);
-      border: 1px solid $color-gray-4;
-      box-shadow: none;
-    }
-  }
-
-  &-naked{
-    background-color: transparent;
-    border: none;
-
-    &:focus{
-      box-shadow: none;
-    }
-  }
-
-  + .ecs-input-clear{
-    top: 0;
-    right: 0;
-  }
-
-  &-lg{
-    padding: 11px 32px 11px 40px;
-
-    + .ecs-input-clear{
-      top: 4px;
-      right: 4px;
-    }
-  }
-
-  &-sml{
-    font-size: $type-scale-2-font-size;
-    padding: 3px 24px;
-    line-height: 16px;
-
-    + .ecs-input-clear{
-      top: -4px;
-      right: -4px;
-    }
-  }
-
-  &::placeholder {
-    color: #858E9E;
-    opacity: 1;
-  }
-}
-</style>

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

@@ -1,131 +0,0 @@
-<template>
-  <ecs-button-toolbar-group class="ecs-viewer-toolbar-jumper">
-    <ecs-button-toolbar @click="$emit('goToPrev')" :disabled="currentEntry == 1 || navigating" class="previous" :title="prevTooltip" icon="toolbar-page-navigation" :aria-label="ariaLabelPrev" />
-    <div v-if="showCount" class="ecs-viewer-toolbar-jumper-inputs">
-      <div @click="$emit('selectCurEntryText')" @keydown="indexPosKeyPressed" @blur="$emit('blur')" contenteditable class="ecs-viewer-toolbar-jumper-input" :disabled="navigating" id="currEntry">{{ currentEntry }}</div>
-      /&nbsp;
-      <div>{{ totalEntries }}</div>
-    </div>
-    <ecs-button-toolbar @click="$emit('goToNext')" :disabled="currentEntry == totalEntries || navigating" class="next" :title="nextTooltip" icon="toolbar-page-navigation" :aria-label="ariaLabelNext" />
-  </ecs-button-toolbar-group>
-</template>
-
-<script>
-  import EcsButtonToolbar from '../button-toolbar/button-toolbar'
-  import EcsButtonToolbarGroup from '../button-toolbar-group/button-toolbar-group'
-
-  export default {
-    components: { EcsButtonToolbar, EcsButtonToolbarGroup },
-
-    props: {
-      /** Index position of the currently viewed object. */
-      currentEntry: {
-        type: Number,
-        required: true
-      },
-      /** Count of the total objects in a given index. */
-      totalEntries: {
-        type: Number,
-        required: true
-      },
-      /** Determines if the input with the current count as well as the total count should be shown, or not. */
-      showCount: {
-        type: Boolean,
-        default: false
-      },
-      /** Similar to a loading state, and disables all controls, which prevents users from navigating while the current navigation hasn't been completed. */
-      navigating: {
-        type: Boolean,
-        default: null
-      },
-      /** Describes the type of objects in the given index. E.g. "Item", "Entry", "Document". */
-      tooltipNoun: {
-        type: String,
-        default: "Item"
-      }
-    },
-
-    computed: {
-      prevTooltip(){
-        if(this.currentEntry > 1)
-          return this.tooltipNoun ? `Previous ${ this.tooltipNoun }` : 'Previous'
-        else
-          return ''
-      },
-
-      nextTooltip(){
-        if(this.currentEntry != this.totalEntries)
-          return this.tooltipNoun ? `Next ${ this.tooltipNoun }` : 'Next'
-        else
-          return ''
-      },
-
-      ariaLabelPrev(){
-        return this.tooltipNoun ? `Previous ${this.tooltipNoun}` : 'Previous' 
-      },
-
-      ariaLabelNext() {
-        return this.tooltipNoun ? `Next ${this.tooltipNoun}` : 'Next'
-      }
-    },
-
-    methods:{
-      indexPosKeyPressed(e){
-        this.$emit('indexPosKeyPressed', e)
-        e.stopPropagation()
-        if (e.key == 'Enter')
-          e.preventDefault()
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-@import "../../tokens/build/scss/tokens.scss";
-@import "../mixins/svg-uri";
-
-.ecs-viewer-toolbar-jumper{
-  .ecs-toolbar-button{
-    height: 32px;
-  }
-
-  .previous,
-  .next{
-    width: 42px;
-  }
-
-  &-inputs{
-    font-size: $type-scale-1-font-size;
-    color: $color-gray-6;
-    border-top: 1px solid #E7E8EC;
-    border-bottom: 1px solid #E7E8EC;
-    padding: 0 8px;
-    display: flex;
-    align-items: center; 
-  }
-
-  &-input{
-    border-radius: $border-radius-small;
-    background-color: rgba(90, 97, 102, 0.15);
-    border: none;
-    display: block;
-    height: 26px;
-    padding: 0 6px;
-    line-height: 26px;
-    margin-right: 7px;
-    font-size: $type-scale-3-font-size;
-    width: auto;
-    color: $color-gray-13;
-
-    &:focus{
-      outline: 1px solid $color-gray-5;
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.ecs-toolbar-button.next .icon{
-  transform: scaleX(-1);
-}
-</style>

package/src/components/jumper-index/jumper-index.vue

@@ -1,175 +0,0 @@
-<template>
-  <ecs-button-toolbar-group class="ecs-jumper">
-    <ecs-button-toolbar @click="previousSearchResult" :disabled="currentCount <= 1" :title="prevTooltip" :aria-label="ariaLabelPrev" class="ecs-jumper-previous" />
-    <div class="ecs-jumper-count" v-if="showCount && !inputPagination">
-      <span class="ecs-jumper-count-current">{{ currentPosition }}</span>
-      <span class="ecs-jumper-count-total">/{{ maxCount }}</span>
-    </div>
-    <div class="ecs-jumper-count-inputs" v-if="inputPagination">
-      <div @click="selectSearchResultCount" @keydown="setSearchResultCount" class="ecs-jumper-count-input" contenteditable>
-        {{ currentCount }}
-      </div>
-      of&nbsp;
-      <div>{{ maxCount }}</div>
-    </div>
-    <ecs-button-toolbar @click="nextSearchResult" :disabled="currentCount == maxCount" :title="nextTooltip" :aria-label="ariaLabelNext" class="ecs-jumper-next" />
-  </ecs-button-toolbar-group>
-</template>
-
-<script>
-  import EcsButtonToolbar from '../button-toolbar/button-toolbar'
-  import EcsButtonToolbarGroup from '../button-toolbar-group/button-toolbar-group'
-
-  export default {
-    components: { EcsButtonToolbar, EcsButtonToolbarGroup },
-
-    props: {
-      /** Count of the current object in the given index. */
-      currentCount: {
-        type: Number,
-        default: null,
-        required: true,
-      },
-      /** The total amount of objects in the given index. */
-      maxCount: {
-        type: Number,
-        default: null,
-        required: true,
-      },
-      /** Determines if the current count label should be an input to allow the user to enter a number. */
-      inputPagination: {
-        type: Boolean,
-        default: false
-      },
-      /** Determines if the current count and total count labels should be shown. */
-      showCount: {
-        type: Boolean,
-        default: false
-      },
-      /** Describes the type of objects in the given index. E.g. "Item", "Entry", "Document". */
-      tooltipNoun: {
-        type: String,
-        default: "Item"
-      }
-    },
-
-    computed: {
-      currentPosition(){
-        return this.currentCount < 1 ? '-' : this.currentCount
-      },
-
-      prevTooltip(){
-        if(this.currentCount > 1)
-          return this.tooltipNoun ? `Previous ${ this.tooltipNoun }` : 'Previous'
-        else
-          return ''
-      },
-
-      nextTooltip(){
-        if(this.currentCount != this.maxCount)
-          return this.tooltipNoun ? `Next ${ this.tooltipNoun }` : 'Next'
-        else
-          return ''
-      },
-
-      ariaLabelPrev() {
-        return this.tooltipNoun ? `Previous ${this.tooltipNoun}` : 'Previous'
-      },
-
-      ariaLabelNext() {
-        return this.tooltipNoun ? `Next ${this.tooltipNoun}` : 'Next'
-      }
-    },
-    
-    methods:{
-      nextSearchResult(){
-        this.$emit('nextSearchResult')
-      },
-      previousSearchResult(){
-        this.$emit('previousSearchResult')
-      },
-      selectSearchResultCount(){
-        this.$emit('selectSearchResultCount')
-      },
-      setSearchResultCount(e){
-        this.$emit('setSearchResultCount', e)
-        e.stopPropagation()
-        if (e.key == 'Enter')
-          e.preventDefault()
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-@import "../../tokens/build/scss/tokens.scss";
-@import "../mixins/svg-uri";
-
-.ecs-jumper{
-  .ecs-toolbar-button{
-    width: 28px;
-    height: 32px;
-
-    &:before{
-      content: "";
-      position: absolute;
-      width: 26px;
-      height: 30px;
-      background: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" width="26" height="30" viewBox="0 0 26 30"><path fill="#2E333C" fill-rule="evenodd" d="M4,8 L4,0 L5,0 L5,8 L7.899,8 L4.39950732,14 L0.899,8 L4,8 Z" transform="matrix(1 0 0 -1 9 22)"/></svg>');
-      top: 0;
-      left: 0;
-    }
-  }
-
-  &-next:before{
-    transform: rotate(180deg);
-  }
-
-  &-count{
-    display: flex;
-    align-items: center;
-    border-top: 1px solid rgba($color-gray-8, .2);
-    border-bottom: 1px solid rgba($color-gray-8, .2);
-    padding: 0 6px;
-
-    &-current{
-      font-size: $type-scale-2-font-size;
-      color: $color-gray-10;
-    }
-
-    &-total{
-      font-size: $type-scale-1-font-size;
-      color: $color-gray-8;
-      margin-left: 2px;
-    }
-
-    &-inputs{
-      font-size: $type-scale-2-font-size;
-      color: $color-gray-8;
-      border-top: 1px solid #E7E8EC;
-      border-bottom: 1px solid #E7E8EC;
-      padding: 0 6px;
-      display: flex;
-      align-items: center; 
-    }
-
-    &-input{
-      border-radius: $border-radius-small;
-      background-color: rgba(90, 97, 102, 0.15);
-      border: none;
-      display: block;
-      height: 26px;
-      padding: 0 6px;
-      line-height: 26px;
-      margin-right: 5px;
-      font-size: $type-scale-3-font-size;
-      width: auto;
-      color: $color-gray-13;
-
-      &:focus{
-        outline: 1px solid $color-gray-5;
-      }
-    }
-  }
-}
-</style>

package/src/components/jumper-page/jumper-page.vue

@@ -1,170 +0,0 @@
-<template>
-  <div class="ecs-viewer-pages">
-    <div class="ecs-viewer-pages-inner">
-
-      <template v-if="showAltPageNumbers">
-        <div class="ecs-viewer-pages-pagination">
-          <div @click="$emit('selectCurPageText')" @keydown="pageKeyPressed($event, 'relative')" @blur="$emit('currentPageBlurred')" contenteditable class="current-page" id="currPage">
-            {{ currentPage }}
-          </div>
-          <div class="total-pages">of {{ lastPage }}</div>
-          <span v-if="isTranscriptMissingPages" style="color:tomato">*</span>
-        </div>
-        <div class="ecs-viewer-pages-pagination">
-          <div class="total-pages-relative">{{ altPageNumber }}&nbsp;</div>
-          <div class="total-pages-relative">of {{ pageCount }}</div>
-        </div>
-      </template>
-
-      <template v-else>
-        <div class="ecs-viewer-pages-pagination">
-          <div v-html="currentPage" @click="$emit('selectCurPageText')" @keydown="pageKeyPressed($event)" @blur="$emit('currentPageBlurred')" contenteditable class="current-page" id="currPage"></div>
-          <div class="total-pages">of {{ lastPage }}</div>
-          <span v-if="isTranscriptMissingPages" style="color:tomato" title="This transcript has missing page gaps">*</span>
-        </div>
-      </template>
-
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    props: {
-      /** Count of the current page in the document. */
-      currentPage: {
-        type: Number,
-        required: true,
-        default: null
-      },
-      /** Total page count of the document. */
-      pageCount: {
-        type: Number,
-        required: true,
-        default: null
-      },
-      /** Adds a secondary count below the main count which reflects the relative current position in the document, if the document is part of a document collection (e.g. multiple transcript volumes). */
-      relativePage: {
-        type: Number,
-        default: null
-      },
-      /** Adds a secondary count below the main count which reflects the relative current position in the document, if the document has page gaps */
-      sequentialPage: {
-        type: Number,
-        default: null
-      },
-      /** If relative page count is used, this determines the total page count of the current document, but not the document collection. */
-      lastPage: {
-        type: Number,
-        default: null
-      },
-      /** To add an indication to the User that a Transcript is missing pages **/
-      isTranscriptMissingPages: {
-        type: Boolean,
-        default: false
-      }
-    },
-
-    computed:{
-      showAltPageNumbers(){
-        return (this.relativePage && (this.relativePage != this.currentPage)) || this.isTranscriptMissingPages
-      },
-
-      altPageNumber(){
-        if (this.sequentialPage && (this.sequentialPage != this.currentPage))
-          return this.sequentialPage
-        return this.relativePage
-      }
-    },
-    
-    methods:{
-      pageKeyPressed(e, which){
-        /*
-        if (which == 'relative')
-          this.$emit('relativePageKeyPressed', e)
-        else
-        */
-        this.$emit('currentPageKeyPressed', e)
-        e.stopPropagation()
-        if (e.key == 'Enter')
-          e.preventDefault()
-      }
-    },
-
-    watch: {
-      currentPage(){
-        console.log('shard', this.currentPage, this.relativePage, this.sequentialPage)
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-@import "../../tokens/build/scss/tokens.scss";
-@import "../mixins/svg-uri";
-
-.ecs-viewer-pages{
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-  padding: 0 20px;
-  position: relative;
-
-  &:before, &:after{
-    content: "";
-    position: absolute;
-    width: 1px;
-    height: 100%;
-    top: 0;
-    background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%);
-  }
-
-  &:before{
-    left: 0;
-  }
-
-  &:after{
-    right: 0;
-  }
-
-  &-inner{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  &-pagination{
-    display: flex;
-    align-items: center;
-  }
-}
-
-.current-page{
-  height: 26px;
-  padding: 0 6px;
-  line-height: 26px;
-  margin-right: 7px;
-  font-size: $type-scale-3-font-size;
-  width: auto;
-  border-radius: $border-radius-small;
-  transition: .2s;
-  background: rgba(90, 97, 102, 0.15);
-  
-  &:focus{
-    background: rgba(90, 97, 102, 0.2);
-  }
-}
-
-.total-pages{
-  font-size: $type-scale-3-font-size;
-  color: $color-gray-10;
-}
-
-.total-pages-relative{
-  text-align: center;
-  font-size: $type-scale-2-font-size;
-  color: $color-gray-8;
-  margin-top: 4px;
-}
-</style>