@everchron/ec-shards 7.4.9 → 8.0.0

package/src/components/map/map.vue

@@ -1,91 +0,0 @@
-<template>
-  <div class="ecs-map" :class="[marker ? 'ecs-map-marker' : '']">
-    <a target="_blank" :href="mapUrl" title="View on Google Maps">
-      <img :src="mapImageUrl" :alt="'Map of ' + address">
-      <ecs-focus-ring :inset="0" :radius="4"/>
-    </a>
-  </div>
-</template>
-
-<script>
-  import EcsFocusRing from '../mixins/focus-ring'
-
-  export default {
-    components: { EcsFocusRing },
-
-    props: {
-      /** Address of the location, needs to be known by Google Maps. */
-      address: {
-        type: String,
-        required: true
-      },
-      /** Determines if the centered address location should be shown with a marker. */
-      marker: {
-        type: Boolean,
-        default: false
-      },
-    },
-
-    computed: {
-      mapUrl() {
-        return `https://www.google.com/maps/place/${this.address}`
-      },
-
-      mapImageUrl() {
-        return `https://maps.googleapis.com/maps/api/staticmap?maptype=terrain&sensor=false&format=png&zoom=13&key=AIzaSyBEv9bJVd1MU5zSs_Ezxkvc8FOfIO7Q1Fk&visual_refresh=true&scale=2&size=320x220&style=feature:poi|visibility:off&center=${this.address}`
-      }
-    },
-  }
-</script>
-
-<style lang="scss" scoped>
-@import "../../tokens/build/scss/tokens.scss";
-@import "../mixins/svg-uri";
-
-.ecs-map{
-  width: 100%;
-  max-width: 360px;
-  border-radius: $border-radius-small;
-  overflow: hidden;
-  position: relative;
-
-  img{
-    max-width: 100%;
-    display: block;
-  }
-
-  a{
-    &:focus-visible{
-      z-index: 1;
-      outline: none;
-      
-      .ecs-focus-ring{
-        display: block;
-      }
-    }
-  }
-
-  &-marker{
-    &:before{
-      content: "";
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      width: 12px;
-      height: 12px;
-      margin: -6px 0 0 -6px;
-      background: $color-blue-8;
-      border-radius: 100%;
-      border: 2px solid #FFF;
-      box-shadow: 0 0 0 5px rgba($color-blue-8, .2);
-      z-index: 2;
-      transition: .2s;
-    }
-
-    &:hover:before{
-      transform: scale(1.3);
-      box-shadow: 0 0 0 7px rgba($color-blue-8, .2);
-    }
-  }
-}
-</style>

package/src/components/mixins/focus-ring.vue

@@ -1,47 +0,0 @@
-<template>
-  <span class="ecs-focus-ring" :style="styles" :class="danger ? 'ecs-focus-ring-danger' : ''" />
-</template>
-
-<script>
-export default {
-  props: {
-    /** Defines the distance of the focus ring from it focusable element. Should be smaller than `0` (negative) in almost all cases. */
-    inset: {
-      type: Number,
-      default: -4
-    },
-    /** Defines the border radius of the focus ring. The radius depends on the inset and the radius of the focused element. A general rule of the radius to be applied is: `radius` = `element radius` - (-`inset`/2). */
-    radius: {
-      type: Number,
-      default: 8
-    },
-    /** Sets the focus ring color to red, which should be used for destructive actions. */
-    danger: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  computed: {
-    styles(){
-      return `inset: ${this.inset}px; border-radius: ${this.radius}px;`;
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  @import "../../tokens/build/scss/tokens.scss";
-
-  .ecs-focus-ring{
-    position: absolute;
-    pointer-events: none;
-    z-index: 1;
-    display: none;
-    border: 2px solid $color-blue-9;
-
-    &-danger{
-      border-color: $color-red-10;
-    }
-  }
-</style>

package/src/components/mixins/svg-uri.scss

@@ -1,29 +0,0 @@
-@function svg-uri($svg) {
-  $encoded: '';
-  $slice: 2000;
-  $index: 0;
-  $loops: ceil(str-length($svg) / $slice);
-
-  @for $i from 1 through $loops {
-    $chunk: str-slice($svg, $index, $index + $slice - 1);
-    $chunk: str-replace($chunk, '"', "'");
-    $chunk: str-replace($chunk, '<', '%3C');
-    $chunk: str-replace($chunk, '>', '%3E');
-    $chunk: str-replace($chunk, '&', '%26');
-    $chunk: str-replace($chunk, '#', '%23');
-    $encoded: #{$encoded}#{$chunk};
-    $index: $index + $slice;
-  }
-
-  @return url("data:image/svg+xml;charset=utf8,#{$encoded}");
-}
-
-@function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-
-  @return $string;
-}

package/src/components/mixins/unique-id.js

@@ -1,17 +0,0 @@
-export const uniqueIdMixin = {
-  data() {
-    return {
-      uniqueId: '',
-    }
-  },
-  created() {
-    this.uniqueId = this.generateUniqueId()
-  },
-  methods: {
-    generateUniqueId() {
-      const timestamp = new Date().getTime()
-      const random = Math.floor(Math.random() * 100000)
-      return `uid_${timestamp}_${random}`
-    },
-  },
-}

package/src/components/modal/modal.vue

@@ -1,168 +0,0 @@
-<template>
-  <transition name="dialog-fade">
-    <div
-      v-if="isShown"
-      class="ecs-modal"
-      :class="[typeClass, clickthrough ? 'ecs-modal-click-through' : '']">
-
-      <div class="ecs-modal-dialog ecs-modal-sheet" :style="fixedHeightStyle">
-        <div v-if="$slots.header" class="ecs-modal-header-wrap">
-          <!-- @slot Slot for the modal header content. -->
-          <slot name="header"></slot>
-        </div>
-        <div class="ecs-modal-content-wrap scrollbar">
-          <slot></slot>
-        </div>
-        <div v-if="$slots.footer" class="ecs-modal-footer-wrap">
-          <!-- @slot Slot for the modal footer content. -->
-          <slot name="footer"></slot>
-        </div>
-      </div>
-
-      <div class="ecs-modal-backdrop ecs-modal-sheet-backdrop" />
-    </div>
-  </transition>
-</template>
-
-<script>
-  import EcsModalBase from '../modal-base/modal-base'
-
-  export default {
-    components: { EcsModalBase },
-
-    props: {
-      /** Shows the modal. */
-      show: {
-        type: Boolean,
-        default: false
-      },
-      /** Determines the visual variant of modal. Default is a regular vertically and horizontally centered modal, while the drawer variant is a full width, but limited height modal that slides in from the bottom of the screen. */
-      type: {
-        type: String,
-        validator: v => ['default', 'drawer',].includes(v),
-        default: 'default'
-      },
-      /** If set, the user can click throught the backdrop of the modal and interact with any controls underneath the modal. This should only be used with the `drawer` type. */
-      clickthrough: {
-        type: Boolean,
-        default: false
-      },
-      /** Sets the modal height to a fixed pixel value. If not passed, the modal height will auto adapt it's height. The modal height will never exceed 90% height of viewport. */
-      fixedHeight: {
-        type: Number
-      }
-    },
-
-    data () {
-      return {
-        isShown: false
-      }
-    },
-
-     computed: {
-      typeClass() {
-        if (this.type && this.type !== '')
-          return `ecs-modal-${this.type}`
-        return this.type
-      },
-
-      fixedHeightStyle() {
-        if (this.fixedHeight && this.fixedHeight !== '')
-          return `height:${this.fixedHeight}px`
-        return this.fixedHeight
-      }
-    },
-
-    methods : {
-      toggleShow(){
-        this.isShown = !this.isShown
-        this.$emit('toggled', this.id, this.isShown)
-      }
-    },
-
-    watch: {
-      show(){
-        this.isShown = this.show
-      }
-    },
-
-    mounted() {
-      if (this.show) {
-        this.isShown = true
-      }
-    }
-  }
-</script>
-
-<style lang="scss">
-@import "../../tokens/build/scss/tokens.scss";
-@import "../mixins/svg-uri";
-
-.ecs-modal{
-  &-sheet{
-    background: #FFFFFF;
-    background-clip: padding-box;
-    border-radius: $border-radius-medium;
-    outline: 0;
-    box-shadow: 0 0 0 1px rgba(47,51,60,0.03), 0 1px 5px 0 rgba(47,51,60,0.25);
-
-    &-backdrop{
-      background: rgba(47,51,60,0.25);
-      background-image: linear-gradient(-180deg, rgba(137,144,156,0.20) 0%, rgba(140,148,161,0.00) 39%);
-    }
-  }
-}
-
-// Default modal variant
-
-.ecs-modal-default{
-  .ecs-modal-sheet{
-    margin: 30px auto;
-    width: 820px;
-  }
-}
-
-// Drawer modal variant
-
-.ecs-modal-drawer{
-  .ecs-modal-sheet{
-    margin: 5px auto;
-    width: calc(100vw - 10px);
-  }
-}
-
-.ecs-modal{
-  &-inner{
-    display: flex;
-    flex-direction: column;
-  }
-
-  &-header-wrap{
-    flex-shrink: 0;
-    z-index: 2;
-    position: relative;
-  }
-
-  &-content-wrap{
-    flex: 1;
-    min-height: 0;
-    overflow: auto;
-    position: relative;
-    z-index: 1;
-  }
-
-  &-footer-wrap{
-    flex-shrink: 0;
-    z-index: 2;
-    position: relative;
-  }
-
-  &.ecs-modal-click-through{
-    pointer-events: none;
-
-    .ecs-modal-dialog{
-      pointer-events: auto;
-    }
-  }
-}
-</style>

package/src/components/modal-base/modal-base.vue

@@ -1,75 +0,0 @@
-<style lang="scss">
-@import "../../tokens/build/scss/tokens.scss";
-@import "../mixins/svg-uri";
-
-.ecs-modal{
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1072;
-  outline: 0;
-  background: transparent;
-  will-change: transform;
-  display: flex;
-  justify-content: center;
-
-  &-default{
-    align-items: center;
-
-    .ecs-modal-dialog{
-      max-height: calc(100vh - 60px);
-    }
-  }
-
-  &-drawer{
-    align-items: flex-end;
-
-    .ecs-modal-dialog{
-      max-height: calc(65vh - 140px);
-    }
-  }
-
-  &-dialog{
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    margin: 0 auto;
-    z-index: 1072;
-    overflow: hidden;
-    transform: translateY(0) scale(1);
-    opacity: 1;
-    transition: .3s cubic-bezier(0.595, -0.275, 0.330, 1.280) .1s;
-  }
-
-  &-backdrop{
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1071;
-    will-change: opacity;
-    background: rgba(49,52,57, .5);
-    opacity: 1;
-    transition: .25s cubic-bezier(0.595, -0.275, 0.330, 1.280);
-  }
-}
-
-/**
-* Transition
-*/
-.dialog-fade-enter, .dialog-fade-leave-to
-.dialog-fade-leave-active {
-  .ecs-modal-backdrop{
-    opacity: 0;
-  }
-  
-  .ecs-modal-dialog{
-    transform: translateY(-20px) scale(.98);
-    opacity: 0;
-  }
-}
-
-</style>

package/src/components/modal-footer/modal-footer.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="ecs-modal-footer">
-    <div v-if="$slots.secondary" class="ecs-modal-footer-secondary">
-      <!-- @slot Slot for a secondary footer area. Should only be used for informational content, not actionable. -->
-      <slot name="secondary"></slot>
-    </div>
-    <div class="ecs-modal-footer-main">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-@import "../../tokens/build/scss/tokens.scss";
-@import "../mixins/svg-uri";
-
-.ecs-modal-footer{
-  background: #FFF;
-  box-shadow: 0 -1px 0 rgba(#858E9E, .35);
-  border-radius: 0 0 4px 4px;
-
-  &-main{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    min-height: 62px;
-    padding: 10px;
-  }
-
-  &-secondary{
-    border-bottom: 1px solid #ECEDF2;
-    padding: 8px 10px;
-  }
-}
-</style>

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

@@ -1,121 +0,0 @@
-<template>
-  <div class="ecs-modal-header" :class="typeClass">
-    <div class="ecs-modal-header-main" ref="firstFocusable" tabindex="0">
-      <div class="ecs-modal-header-main-inner">
-        <slot></slot>
-      </div>
-      <ecs-button
-        @click="$emit('close')"
-        title="Close"
-        aria-label="Close"
-        icon="close"
-        icon-only
-        type="secondary"
-        size="lg"
-        :focus-inset="-1"
-        data-close-button
-        data-test="close-modal-button" />
-    </div>
-    <div v-if="$slots.extension" class="ecs-modal-header-extended">
-      <!-- @slot Slot for a header extension row that appears underneath the main header. Can be used for tabs, sequence maps, etc. -->
-      <slot name="extension"></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import EcsFocusRing from '../mixins/focus-ring'
-import EcsButton from '../button/button'
-
-  export default {
-    components: {
-      EcsButton,
-      EcsFocusRing
-    },
-
-    props: {
-      /** Sets the visual style of the modal header. Tabs should always be used when the modal tab header contains a tab bar, while Scroll can be used as an optional indicator for scrollable modals with long contents. */
-      type: {
-        type: String,
-        validator: v => ['tabs', 'scroll', null].includes(v),
-        default: null
-      }
-    },
-
-    computed: {
-      typeClass() {
-        if (this.type && this.type !== '')
-          return `ecs-modal-header-${this.type}`
-        return this.type
-      }
-    },
-
-    mounted() {
-      document.addEventListener('keydown', this.handleKeyDown);
-
-      this.$nextTick(() => {
-        this.$refs.firstFocusable.focus();
-      });
-    },
-
-    beforeUnmount() {
-      document.removeEventListener('keydown', this.handleKeyDown);
-    },
-
-    methods: {
-      handleKeyDown(event) {
-        if (event.keyCode === 27) { // Esc
-          const closeButton = document.querySelector('[data-close-button]');
-          if (closeButton) {
-            closeButton.focus();
-          }
-        }
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-@import "../../tokens/build/scss/tokens.scss";
-@import "../mixins/svg-uri";
-
-.ecs-modal-header{
-  background: #FFF;
-  border-radius: $border-radius-medium 6px 0 0;
-  box-shadow: 0 1px 0 $color-gray-3;
-  min-height: 48px;
-
-  &-tabs{
-    background: $color-gray-3;
-    box-shadow: none;
-    padding: 0 4px 0 0;
-
-    .ecs-modal-header-main{
-      padding: 0;
-    }
-  }
-
-  &-scroll{
-    box-shadow: 0 1px 0 0 rgba(47,51,60,0.05), 0 1px 4px 0 rgba(47,51,60,0.20);
-  }
-
-  &-main{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 4px 0 20px;
-    height: 48px;
-
-    &-inner{
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex: 1;
-    }
-  }
-
-  &-extended{
-    padding: 5px 0 0 0;
-  }
-}
-</style>

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

@@ -1,88 +0,0 @@
-<template>
-  <div class="ecs-multiselect-option" :class="typeClass" :role="type == 'key' ? 'menuitem' : false">
-    <ecs-icon v-if="icon" :type="icon" size="20" />
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-  import EcsIcon from '../icon/icon'
-
-  export default {
-    components: {
-      EcsIcon
-    },
-    props: {
-      /** Sets the type of option. `key` is a regular option to select, while `header` should be used for group header headlines. */
-      type: {
-        type: String,
-        validator: v => ['key', 'header'].includes(v),
-        default: 'key'
-      },
-      /** Adds an icon to the option. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
-      icon: String
-    },
-
-    computed: {
-      typeClass() {
-        if (this.type && this.type !== '')
-          return `ecs-multiselect-option-${this.type}`
-        return this.type
-      }
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-@import "../../tokens/build/scss/tokens.scss";
-
-.ecs-multiselect-option{
-  border-radius: $border-radius-x-small;
-
-  &-key{
-    font-size: $type-scale-3-font-size;
-    color: $color-gray-14;
-    line-height: 20px;
-    padding: 5px 10px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    transition: .1s;
-
-    .icon{
-      color: $color-gray-6;
-      margin-right: 10px;
-      transition: .1s;
-    }
-
-    &:hover{
-      background: $color-blue-1;
-
-      .icon{
-        color: $color-blue-8;
-      }
-    }
-  }
-
-  &-header{
-    font-size: $type-scale-2-font-size;
-    color: $color-gray-7;
-    padding: 8px 10px;
-    cursor: default;
-    font-weight: $font-weight-medium;
-    letter-spacing: .01em;
-  }
-}
-</style>
-
-<style lang="scss">
-@import "../../tokens/build/scss/tokens.scss";
-
-.multiselect__option--highlight .ecs-multiselect-option-key{
-  background: $color-blue-1;
-
-  .icon{
-    color: $color-blue-8;
-  }
-}
-</style>