@citizenplane/pimp 8.26.1 → 8.28.1

package/dist/IconScheduleChange-CEIGEhU4.js

@@ -1,19 +0,0 @@
-import { createElementBlock as o, openBlock as e, createStaticVNode as n } from "vue";
-import { _ as r } from "./index-DbgX3-2I.js";
-const i = {}, d = {
-  width: "24",
-  height: "25",
-  viewBox: "0 0 24 25",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg",
-  stroke: "#3E3E5B"
-};
-function s(a, t) {
-  return e(), o("svg", d, t[0] || (t[0] = [
-    n('<path d="M18.3431 9.31279V6.16077C18.3431 5.0562 17.4476 4.16077 16.3431 4.16077H4.50354C3.39897 4.16077 2.50354 5.0562 2.50354 6.16077V18.0003C2.50354 19.1049 3.39897 20.0003 4.50354 20.0003H6.11962" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.9432 2.40076V5.92065" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.90344 2.40076V5.92065" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M2.50354 9.44055H18.3431" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.9196 14.4542V17.8002L18.1502 18.9156" stroke-width="1.78937" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.3429 17.8002C10.3429 14.7202 12.8397 12.2235 15.9196 12.2235C18.9995 12.2235 21.4963 14.7202 21.4963 17.8002C21.4963 20.8462 19.005 23.3771 15.9196 23.3771" stroke-width="1.78937" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.96887 17.1132L10.3429 18.4872L11.7169 17.1132" stroke-width="1.78937" stroke-linecap="round" stroke-linejoin="round"></path>', 7)
-  ]));
-}
-const k = /* @__PURE__ */ r(i, [["render", s]]);
-export {
-  k as default
-};

package/src/components/date-pickers/CpDatepicker.vue

@@ -1,229 +0,0 @@
-<template>
-  <div class="cpDatepicker">
-    <cp-input
-      v-show="!isInline"
-      :id="datePickerReferenceId"
-      :model-value="inputComputedValue"
-      type="text"
-      :placeholder="placeholder"
-      :is-invalid="isError"
-      :error-message="errorMessage"
-      :disabled="isDisabled"
-      :label="label"
-      class="cpDatepicker__input"
-    />
-    <core-datepicker
-      :date-one="dateOne"
-      :date-two="dateTwo"
-      :trigger-element-id="datePickerReferenceId"
-      :close-after-select="closeAfterSelect"
-      :mode="mode"
-      :inline="isInline"
-      :months-to-show="numberOfMonths"
-      :min-date="computedMinDate"
-      :max-date="maxDate"
-      :locale="locale"
-      class="cpDatepicker__datepicker"
-      :class="{ 'cpDatepicker__datepicker--isInline': isInline }"
-      @date-one-selected="(date) => selectDate('dateOne', date)"
-      @date-two-selected="(date) => selectDate('dateTwo', date)"
-      @opened="() => (isDisabled = true)"
-      @closed="() => (isDisabled = null)"
-    />
-  </div>
-</template>
-
-<script>
-import CoreDatepicker from '@/libs/CoreDatepicker.vue'
-import CpInput from '@/components/inputs/CpInput.vue'
-import { randomString, formatDates } from '@/helpers'
-import { DateTime } from 'luxon'
-
-export default {
-  name: 'CpDatepicker',
-  components: {
-    CoreDatepicker,
-    CpInput,
-  },
-  props: {
-    triggerElementId: {
-      type: String,
-      default: '',
-    },
-    mode: {
-      type: String,
-      default: 'single',
-      validator: (value) => {
-        return ['range', 'single'].includes(value)
-      },
-    },
-    closeAfterSelect: {
-      type: Boolean,
-      default: true,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    placeholder: {
-      type: String,
-      default: 'Select a date',
-    },
-    inputValue: {
-      type: String,
-      default: '',
-    },
-    isError: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-    initDateOne: {
-      type: String,
-      default: '',
-      validator: (value) => {
-        return value === '' || value.length === 10
-      },
-    },
-    initDateTwo: {
-      type: String,
-      default: '',
-      validator: (value) => {
-        return value === '' || value.length === 10
-      },
-    },
-    minDate: {
-      type: [String, Date],
-      default: () => DateTime.local().toISODate(),
-    },
-    maxDate: {
-      type: [String, Date],
-      default: '',
-    },
-    allowPastDates: {
-      type: Boolean,
-      default: false,
-    },
-    isInline: {
-      type: Boolean,
-      default: false,
-    },
-    singleMonth: {
-      type: Boolean,
-      default: false,
-    },
-    locale: {
-      type: String,
-      default: () => {
-        return navigator.language
-      },
-    },
-  },
-  emits: ['dates'],
-  data() {
-    return {
-      calendarFormat: 'YYYY-MM-DD',
-      humanFormat: 'EEE DD',
-      dateOne: this.initDateOne || '',
-      dateTwo: this.mode === 'range' ? this.initDateTwo : '',
-      isDisabled: null,
-      datePickerReferenceId: this.triggerElementId || randomString(),
-    }
-  },
-  computed: {
-    inputComputedValue() {
-      if (this.inputValue) return this.inputValue
-
-      return formatDates({
-        dateOne: this.dateOne,
-        dateTwo: this.dateTwo,
-        format: this.humanFormat,
-        locale: this.locale,
-      })
-    },
-    numberOfMonths() {
-      return this.singleMonth ? 1 : 2
-    },
-    computedMinDate() {
-      return this.allowPastDates ? '' : this.minDate
-    },
-    dynamicClasses() {
-      return { 'cpDatepicker__datepicker--isInline': this.isInline }
-    },
-  },
-  watch: {
-    initDateOne(newValue, oldValue) {
-      this.updateDateValue('dateOne', newValue, oldValue)
-    },
-    initDateTwo(newValue, oldValue) {
-      this.updateDateValue('dateTwo', newValue, oldValue)
-    },
-  },
-  methods: {
-    selectDate(dateType, dateValue) {
-      this[dateType] = dateValue
-      this.$emit('dates', [this.dateOne, ...(this.dateTwo && [this.dateTwo])])
-    },
-    updateDateValue(date, newValue, oldValue) {
-      if (newValue !== oldValue) {
-        this[date] = newValue
-      }
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-.cpDatepicker {
-  // Opening transition layout adaptation
-  .asd__fade-enter-from {
-    transform: translateX(-50%) scale(0.8);
-  }
-
-  .asd__fade-enter-to {
-    transform: translateX(-50%) scale(1);
-  }
-
-  &__input input:disabled {
-    background-color: colors.$neutral-light;
-  }
-
-  &__datepicker {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  &__datepicker:not(&__datepicker--isInline) {
-    margin-top: 10px;
-  }
-
-  @media (min-width: 350px) {
-    position: relative;
-  }
-
-  @media (max-width: 767px) and (min-width: 350px) {
-    &__datepicker {
-      left: 0;
-      right: 0;
-      transform: initial;
-    }
-
-    &__datepicker:not(&__datepicker--isInline) {
-      margin-top: 16px;
-    }
-
-    // Opening transition layout adaptation
-    .asd__fade-enter-from {
-      transform: scale(0.8);
-    }
-
-    .asd__fade-enter-to {
-      transform: scale(1);
-    }
-  }
-}
-</style>

package/src/components/feedback-indicators/CpToaster.vue

@@ -1,372 +0,0 @@
-<template>
-  <transition @enter="enter" @leave="leave">
-    <div
-      v-show="isOpen"
-      :id="toasterId"
-      :key="toasterId"
-      class="cpToaster"
-      :class="dynamicClass"
-      role="alert"
-      @mouseenter="setHoverState()"
-      @mouseleave="setHoverState(false)"
-    >
-      <div class="cpToaster__content">
-        <cp-icon :type="toasterIcon" class="cpToaster__icon" />
-        <div class="cpToaster__body">
-          <cp-heading heading-level="h4" :size="400" class="cpToaster__title">{{ title }}</cp-heading>
-          <p v-if="description" class="cpToaster__description">{{ description }}</p>
-        </div>
-      </div>
-      <button type="button" class="cpToaster__close" @click="closeToaster"><cp-icon type="x" /></button>
-      <div v-if="actionLabel" class="cpToaster__footer">
-        <button type="button" class="cpToaster__button" @click="handleActionMethod">
-          {{ actionLabel }}
-        </button>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-import { animate } from 'animejs'
-
-import { Intent } from '@/utils/constants'
-import { randomString } from '@/helpers'
-
-import CpHeading from '@/components/typography/CpHeading.vue'
-import CpIcon from '@/components/visual/CpIcon.vue'
-
-export default {
-  name: 'CpToaster',
-  components: {
-    CpHeading,
-    CpIcon,
-  },
-  props: {
-    title: {
-      type: String,
-      required: true,
-      default: '',
-    },
-    description: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    type: {
-      type: String,
-      required: false,
-      default: 'info',
-      validator(value) {
-        const intentValues = Object.values(Intent).map((item) => item.value)
-        return intentValues.includes(value)
-      },
-    },
-    delayBeforeCloseInMs: {
-      type: Number,
-      required: false,
-      default: 5000,
-    },
-    actionLabel: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    actionMethod: {
-      type: Function,
-      required: false,
-      default: () => {},
-    },
-    isUnique: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      toasterId: null,
-      toastersContainer: null,
-      isOpen: false,
-      isHovered: false,
-      deleteCountDown: this.delayBeforeCloseInMs,
-      timeoutID: null,
-      countDownInterval: null,
-      publicProperties: ['closeToaster'],
-    }
-  },
-  computed: {
-    toasterIcon() {
-      const intentValues = Object.values(Intent)
-      const intent = intentValues.find((intentItem) => intentItem.value === this.type)
-      return intent ? intent.icon : Intent.INFO.icon
-    },
-    dynamicClass() {
-      return `cpToaster--${this.type || Intent.INFO.value}`
-    },
-  },
-  watch: {
-    isHovered(newValue) {
-      if (!newValue) {
-        this.handleDeleteEvent()
-      } else {
-        this.cancelDelete()
-      }
-    },
-  },
-  beforeMount() {
-    this.createContainer()
-    this.setupContainer()
-    this.removeSiblings()
-    this.setToasterId()
-  },
-  mounted() {
-    this.showToaster()
-    this.handleDeleteEvent()
-  },
-  methods: {
-    createContainer() {
-      this.toastersContainer = document.querySelector('.cpToaster__container')
-
-      if (this.toastersContainer) return
-
-      if (!this.toastersContainer) {
-        this.toastersContainer = document.createElement('section')
-        this.toastersContainer.className = 'cpToaster__container'
-      }
-    },
-    setupContainer() {
-      document.body.appendChild(this.toastersContainer)
-    },
-    removeSiblings() {
-      if (!this.isUnique) return
-
-      const siblings = document.querySelectorAll('.cpToaster')
-      siblings.forEach(this.removeElement)
-    },
-    setToasterId() {
-      this.toasterId = randomString()
-    },
-    showToaster() {
-      this.isOpen = true
-
-      this.$nextTick(() => {
-        this.toastersContainer.insertAdjacentElement('afterbegin', this.$el)
-      })
-    },
-    setHoverState(state = true) {
-      this.isHovered = state
-    },
-    handleDeleteEvent() {
-      this.startCountDown()
-
-      this.timeoutID = setTimeout(() => {
-        this.closeToaster()
-      }, this.delayBeforeCloseInMs)
-    },
-    cancelDelete() {
-      clearTimeout(this.timeoutID)
-      clearInterval(this.countDownInterval)
-      this.resetCountDown()
-    },
-    startCountDown() {
-      this.countDownInterval = setInterval(() => {
-        this.deleteCountDown -= 1000
-        if (this.deleteCountDown <= 0) {
-          clearInterval(this.countDownInterval)
-        }
-      }, 1000)
-    },
-    resetCountDown() {
-      const delay = this.delayBeforeCloseInMs
-      this.deleteCountDown = delay
-    },
-    handleActionMethod() {
-      // Unexpected aliasing of 'this' to local variable  @typescript-eslint/no-this-alias
-      // eslint-disable-next-line
-      const vm = this
-      const vmProperties = Object.keys(vm)
-        .filter((key) => this.publicProperties.includes(key))
-        .reduce((allowedProperties, key) => {
-          allowedProperties[key] = vm[key]
-          return allowedProperties
-        }, {})
-      return this.actionMethod(vmProperties)
-    },
-    closeToaster() {
-      this.cancelDelete()
-      this.isOpen = false
-
-      setTimeout(() => {
-        this.removeElement(this.$el)
-      }, 240)
-    },
-    removeElement(el) {
-      if (typeof el.remove !== 'undefined') {
-        el.remove()
-      } else {
-        el.parentNode.removeChild(el)
-      }
-    },
-    async enter(el, done) {
-      animate(el, {
-        translateY: [-60, 0],
-        opacity: [0, 1],
-        duration: 240,
-        ease: 'cubicBezier(0.175, 0.885, 0.32, 1.175)',
-        complete: function () {
-          done()
-        },
-      })
-    },
-    async leave(el, done) {
-      animate(el, {
-        scale: [1, 0.8],
-        opacity: [1, 0],
-        duration: 240,
-        ease: 'cubicBezier(0.0, 0.0, 0.2, 1)',
-        complete: function () {
-          done()
-        },
-      })
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-@mixin cp-toaster-style($color, $className) {
-  &--#{$className} &__icon {
-    color: $color;
-  }
-
-  &--#{$className}:before {
-    background-color: $color;
-  }
-}
-
-.cpToaster {
-  position: relative;
-  box-shadow:
-    rgba(67, 90, 111, 0.3) 0 0 1px,
-    rgba(67, 90, 111, 0.47) 0 8px 10px -4px;
-  background: colors.$neutral-light;
-  padding: sp.$space-md;
-  overflow: hidden;
-  width: max-content;
-  max-width: 100%;
-  margin: auto;
-  pointer-events: auto;
-  font-size: fn.px-to-rem(14);
-
-  @media (min-width: 769px) {
-    border-radius: fn.px-to-rem(8);
-  }
-
-  @media (max-width: 768px) {
-    min-width: 100%;
-  }
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: fn.px-to-rem(3);
-    height: 100%;
-  }
-
-  &__container {
-    position: fixed;
-    z-index: 9999;
-    top: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    padding: sp.$space-lg;
-    max-width: fn.px-to-rem(400);
-    pointer-events: none;
-
-    & > *:not(:last-child) {
-      margin-bottom: sp.$space;
-    }
-
-    @media (max-width: 768px) {
-      max-width: 100%;
-    }
-  }
-
-  &__content {
-    display: flex;
-    align-items: flex-start;
-  }
-
-  &__body {
-    flex: 1;
-    margin-left: sp.$space;
-    padding-right: calc(sp.$space-lg + sp.$space-lg);
-  }
-
-  &__icon {
-    flex-shrink: 0;
-    height: fn.px-to-rem(16);
-    width: fn.px-to-rem(16);
-  }
-
-  &__content,
-  &__title {
-    line-height: fn.px-to-rem(16);
-  }
-
-  &__title {
-    font-weight: 600;
-
-    &:not(:only-child) {
-      margin-bottom: sp.$space-sm;
-    }
-  }
-
-  &__description {
-    font-size: fn.px-to-rem(14);
-  }
-
-  &__close {
-    position: absolute;
-    right: sp.$space;
-    top: sp.$space;
-    display: flex;
-    border-radius: fn.px-to-rem(4);
-    padding: sp.$space-sm;
-    color: colors.$neutral-dark-1;
-
-    svg {
-      margin: 0;
-      width: fn.px-to-rem(18);
-      height: fn.px-to-rem(18);
-    }
-
-    &:hover {
-      background-color: rgba(colors.$neutral-dark-1, 0.1);
-    }
-  }
-
-  &__footer {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: sp.$space-lg;
-  }
-
-  &__button {
-    font-size: fn.px-to-rem(12);
-    color: colors.$secondary-color;
-
-    &:not(:hover) {
-      text-decoration: underline;
-    }
-  }
-
-  @include cp-toaster-style(colors.$secondary-color, 'info');
-  @include cp-toaster-style(colors.$warning-color, 'warning');
-  @include cp-toaster-style(colors.$success-color, 'success');
-  @include cp-toaster-style(colors.$error-color, 'critical');
-}
-</style>

package/src/components/helpers-utilities/TransitionExpand.vue

@@ -1,72 +0,0 @@
-<template>
-  <transition name="expand" @enter="enter" @after-enter="afterEnter" @leave="leave">
-    <slot />
-  </transition>
-</template>
-
-<script>
-export default {
-  methods: {
-    afterEnter(element) {
-      element.style.height = `auto`
-    },
-    enter(element) {
-      const { width } = getComputedStyle(element)
-
-      element.style.width = width
-      element.style.position = `absolute`
-      element.style.visibility = `hidden`
-      element.style.height = `auto`
-
-      const { height } = getComputedStyle(element)
-
-      element.style.width = null
-      element.style.position = null
-      element.style.visibility = null
-      element.style.height = 0
-
-      // Force repaint to make sure the
-      // animation is triggered correctly.
-      requestAnimationFrame(() => {
-        element.style.height = height
-      })
-    },
-    leave(element) {
-      const { height } = getComputedStyle(element)
-
-      element.style.height = height
-
-      // Force repaint to make sure the
-      // animation is triggered correctly.
-      requestAnimationFrame(() => {
-        element.style.height = 0
-      })
-    },
-  },
-}
-</script>
-
-<style scoped>
-* {
-  will-change: height;
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  perspective: 1000px;
-}
-</style>
-
-<style lang="scss">
-.expand-enter-active,
-.expand-leave-active {
-  transition-property: opacity, height;
-  transition-duration: 0.2s;
-  transition-timing-function: ease-out;
-  overflow: hidden;
-}
-
-.expand-enter-from,
-.expand-leave-to {
-  height: 0;
-  opacity: 0;
-}
-</style>

package/src/constants/src/CpTableConfig.ts

@@ -1,14 +0,0 @@
-const VISIBLE_ROWS_MAX = 100
-
-const RESERVED_KEYS = {
-  GROUP_BY: 'groupBy',
-  FULL_WIDTH: 'fullWidth',
-  IS_SELECTED: 'isSelected',
-}
-
-const PAGINATION_FORMATS = {
-  RESULTS: 'results',
-  PAGES: 'pages',
-}
-
-export default { VISIBLE_ROWS_MAX, RESERVED_KEYS, PAGINATION_FORMATS }

package/src/constants/src/Position.ts

@@ -1,10 +0,0 @@
-export default {
-  TOP: 'top',
-  TOP_LEFT: 'top-left',
-  TOP_RIGHT: 'top-right',
-  BOTTOM: 'bottom',
-  BOTTOM_LEFT: 'bottom-left',
-  BOTTOM_RIGHT: 'bottom-right',
-  LEFT: 'left',
-  RIGHT: 'right',
-}