<script lang="ts">
  export let value: string;
  export let title: string | undefined = undefined;

  $: valueStart = value.substring(0, value.length - 7).replace(/\s/g, "\xa0");
  $: valueEnd = value
    .substring(value.length - 7, value.length)
    .replace(/\s/g, "\xa0");
</script>

<div class="ellipsis" title={title || value}>
  <div class="start">{valueStart}</div>
  <div class="end">{valueEnd}</div>
</div>

<style lang="scss">
  .ellipsis {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;

    * {
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      min-width: 0;
    }

    .start {
      flex: 0 1 auto;
      text-overflow: ellipsis;
    }

    .end {
      flex: 1 0 auto;
      white-space: nowrap;
    }
  }
</style>
