cja-phoenix 0.7.13 → 0.7.15

package/src/assets/iconia/style.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'CGG-icomoon';
-  src:  url('fonts/CGG-icomoon.eot?slsz2');
-  src:  url('fonts/CGG-icomoon.eot?slsz2#iefix') format('embedded-opentype'),
-    url('fonts/CGG-icomoon.ttf?slsz2') format('truetype'),
-    url('fonts/CGG-icomoon.woff?slsz2') format('woff'),
-    url('fonts/CGG-icomoon.svg?slsz2#CGG-icomoon') format('svg');
+  src:  url('fonts/CGG-icomoon.eot?o80s4a');
+  src:  url('fonts/CGG-icomoon.eot?o80s4a#iefix') format('embedded-opentype'),
+    url('fonts/CGG-icomoon.ttf?o80s4a') format('truetype'),
+    url('fonts/CGG-icomoon.woff?o80s4a') format('woff'),
+    url('fonts/CGG-icomoon.svg?o80s4a#CGG-icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +25,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.m-cgg-icon--home:before {
+  content: "\ea2b";
+}
 .m-cgg-icon--categories:before {
   content: "\ea39";
 }
@@ -70,9 +73,6 @@
 .m-cgg-icon--affiliates-dashboard:before {
   content: "\ea2a";
 }
-.m-cgg-icon--affiliates-home:before {
-  content: "\ea2b";
-}
 .m-cgg-icon--affiliates-settings:before {
   content: "\ea2c";
 }
@@ -459,9 +459,6 @@
 .m-cgg-icon--arrow-right:before {
   content: "\e604";
 }
-.m-cgg-icon--home:before {
-  content: "\e605";
-}
 .m-cgg-icon--cross:before {
   content: "\e606";
 }

package/src/assets/iconia/style.scss

@@ -2,11 +2,11 @@
 
 @font-face {
   font-family: '#{$icomoon-font-family}';
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?slsz2');
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?slsz2#iefix') format('embedded-opentype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?slsz2') format('truetype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?slsz2') format('woff'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?slsz2##{$icomoon-font-family}') format('svg');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?o80s4a');
+  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?o80s4a#iefix') format('embedded-opentype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?o80s4a') format('truetype'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?o80s4a') format('woff'),
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?o80s4a##{$icomoon-font-family}') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -27,6 +27,11 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.m-cgg-icon--home {
+  &:before {
+    content: $m-cgg-icon--home; 
+  }
+}
 .m-cgg-icon--categories {
   &:before {
     content: $m-cgg-icon--categories; 
@@ -102,11 +107,6 @@
     content: $m-cgg-icon--affiliates-dashboard; 
   }
 }
-.m-cgg-icon--affiliates-home {
-  &:before {
-    content: $m-cgg-icon--affiliates-home; 
-  }
-}
 .m-cgg-icon--affiliates-settings {
   &:before {
     content: $m-cgg-icon--affiliates-settings; 
@@ -743,11 +743,6 @@
     content: $m-cgg-icon--arrow-right; 
   }
 }
-.m-cgg-icon--home {
-  &:before {
-    content: $m-cgg-icon--home; 
-  }
-}
 .m-cgg-icon--cross {
   &:before {
     content: $m-cgg-icon--cross; 

package/src/assets/iconia/variables.scss

@@ -1,6 +1,7 @@
 $icomoon-font-family: "CGG-icomoon" !default;
 $icomoon-font-path: "fonts" !default;
 
+$m-cgg-icon--home: "\ea2b";
 $m-cgg-icon--categories: "\ea39";
 $m-cgg-icon--facebook-2: "\ea33";
 $m-cgg-icon--linkedin-2: "\ea34";
@@ -16,7 +17,6 @@ $m-cgg-icon--macro-step-results: "\ea2f";
 $m-cgg-icon--macro-step-funnel: "\ea30";
 $m-cgg-icon--affiliates-add: "\e900";
 $m-cgg-icon--affiliates-dashboard: "\ea2a";
-$m-cgg-icon--affiliates-home: "\ea2b";
 $m-cgg-icon--affiliates-settings: "\ea2c";
 $m-cgg-icon--tiktok: "\ea27";
 $m-cgg-icon--list-mode: "\ea22";
@@ -142,7 +142,6 @@ $m-cgg-icon--arrow-up: "\e601";
 $m-cgg-icon--arrow-left: "\e602";
 $m-cgg-icon--arrow-down: "\e603";
 $m-cgg-icon--arrow-right: "\e604";
-$m-cgg-icon--home: "\e605";
 $m-cgg-icon--cross: "\e606";
 $m-cgg-icon--signal: "\e607";
 $m-cgg-icon--gift: "\e608";

package/src/assets/variables/colors.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 $extra-dark-blue: #0d2745;
 $dark-blue: #155072;
 $main-blue: #076b9c;
@@ -51,3 +53,37 @@ $gradient-en: linear-gradient(75deg, #fffbef, #fff);
 $gradient-bb: linear-gradient(75deg, #fff7f1, #fff);
 $gradient-cc: linear-gradient(75deg, #fff4ff, #fff);
 $gradient-cja-1: linear-gradient(90deg, #b5e187 2.5%, #076b9c 100%);
+
+$colors: (
+  "extra-dark-blue": $extra-dark-blue,
+  "dark-blue": $dark-blue,
+  "main-blue": $main-blue,
+  "medium-blue": $medium-blue,
+  "bright-blue": $bright-blue,
+  "light-blue": $light-blue,
+  "extra-light-blue": $extra-light-blue,
+  "extra-dark-green": $extra-dark-green,
+  "dark-green": $dark-green,
+  "main-green": $main-green,
+  "bright-green": $bright-green,
+  "light-green": $light-green,
+  "extra-light-green": $extra-light-green,
+  "extra-dark-orange": $extra-dark-orange,
+  "dark-orange": $dark-orange,
+  "main-orange": $main-orange,
+  "bright-orange": $bright-orange,
+  "light-orange": $light-orange,
+  "main-yellow": $main-yellow,
+  "main-purple": $main-purple,
+  "medium-purple": $medium-purple,
+  "bright-purple": $bright-purple,
+);
+
+$gradients: (
+  "hl": $gradient-hl,
+  "pl": $gradient-pl,
+  "in": $gradient-in,
+  "en": $gradient-en,
+  "bb": $gradient-bb,
+  "cc": $gradient-cc,
+);

package/src/components/forms/CurrencyInput.vue

@@ -11,10 +11,11 @@
       <input
         :class="[`size-${size}`]"
         type="text"
+        :value="processedValue"
         :id="id"
-        :placeholder="placeholder && placeholder"
+        :placeholder="placeholder"
         :disabled="disabled"
-        ref="inputRef"
+        @input="updateValue"
       />
 
       <span class="input-currency">
@@ -28,11 +29,11 @@
 
 <script lang="ts" setup>
 import { useField } from "vee-validate";
-import { InputHTMLAttributes, watch } from "vue";
-import { CurrencyDisplay, useCurrencyInput } from "vue-currency-input";
+import { InputHTMLAttributes } from "vue";
 import InputContainer from "./structure/InputContainer.vue";
 import InputTitle from "./structure/InputTitle.vue";
 import InputError from "./structure/InputError.vue";
+import { computed } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -56,29 +57,28 @@ const props = withDefaults(
   }
 );
 
-const { inputRef, setValue: setCurrency } = useCurrencyInput({
-  currency: "EUR",
-  locale: "de-DE",
-  hideCurrencySymbolOnFocus: false,
-  hideGroupingSeparatorOnFocus: false,
-  currencyDisplay: CurrencyDisplay.hidden,
-});
-
-const { errorMessage, meta, validate, setValue } = useField(
+const { value, errorMessage, meta, validate, handleChange } = useField(
   "input",
   props.validation,
   { initialValue: props.modelValue }
 );
 
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    setValue(newVal);
-    setCurrency(newVal);
-  }
+const processedValue = computed(() =>
+  Intl.NumberFormat("de-DE", { maximumFractionDigits: 2 }).format(
+    value.value || 0
+  )
 );
 
-const emit = defineEmits(["update:modelValue", "change"]);
+const updateValue = (e: Event) => {
+  const parsedValue = parseFloat(
+    (e.target as HTMLInputElement).value.replaceAll(".", "").replace(",", ".")
+  );
+
+  handleChange(parsedValue);
+  emit("update:modelValue", parsedValue);
+};
+
+const emit = defineEmits(["update:modelValue"]);
 
 defineExpose({ errorMessage, meta, validate });
 </script>
@@ -91,15 +91,33 @@ defineExpose({ errorMessage, meta, validate });
     @include input-template;
     padding-right: 24px;
 
-    &:focus {
+    &:disabled {
       + .input-currency {
-        color: $extra-dark-blue;
+        color: $input-disabled-color;
       }
     }
 
-    &:disabled {
+    &.size-sm {
+      padding-right: $sm-padding-h * 2 + 10;
+
       + .input-currency {
-        color: $input-disabled-color;
+        right: $sm-padding-h;
+      }
+    }
+
+    &.size-md {
+      padding-right: $md-padding-h * 2 + 10;
+
+      + .input-currency {
+        right: $md-padding-h;
+      }
+    }
+
+    &.size-lg {
+      padding-right: $lg-padding-h * 2 + 10;
+
+      + .input-currency {
+        right: $lg-padding-h;
       }
     }
   }
@@ -114,11 +132,8 @@ defineExpose({ errorMessage, meta, validate });
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    right: 8px;
-    line-height: 16px;
-    font-size: 16px;
-    color: $blue-grey;
-    transition: color 0.1s ease-in;
+    line-height: 12px;
+    font-size: 12px;
   }
 }
 </style>

package/src/components/forms/SliderInput.vue

@@ -0,0 +1,176 @@
+<template>
+  <InputContainer v-bind="{ layout }">
+    <InputTitle v-bind="{ title, tooltip, size, disabled }" v-if="title" />
+
+    <div
+      class="input-wrapper"
+      :class="{
+        error: errorMessage,
+      }"
+      :style="`--slider-progress-value:${sliderProgressValue}`"
+    >
+      <input
+        ref="inputEl"
+        type="range"
+        :min="min"
+        :max="max"
+        :step="step"
+        :value="modelValue ? modelValue : 0"
+        @input="
+          emit(
+            'update:modelValue',
+            (<HTMLInputElement>$event.target).valueAsNumber
+          )
+        "
+      />
+    </div>
+
+    <InputError :error="errorMessage" v-if="errorMessage && errorDisplay" />
+  </InputContainer>
+</template>
+
+<script lang="ts" setup>
+import { useField } from "vee-validate";
+import { InputHTMLAttributes, ref } from "vue";
+import InputTitle from "./structure/InputTitle.vue";
+import InputError from "./structure/InputError.vue";
+import InputContainer from "./structure/InputContainer.vue";
+import { computed } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    tooltip?: string;
+    layout?: "vertical" | "horizontal";
+    size?: "sm" | "md" | "lg";
+    validation?: any;
+    errorDisplay?: boolean;
+    modelValue: InputHTMLAttributes["value"];
+    disabled?: InputHTMLAttributes["disabled"];
+    min: number;
+    max: number;
+    step: number;
+  }>(),
+  {
+    layout: "vertical",
+    size: "md",
+    type: "text",
+    errorDisplay: true,
+  }
+);
+
+const { value, errorMessage, meta, validate } = useField(
+  "input",
+  props.validation,
+  { initialValue: props.modelValue }
+);
+
+defineExpose({ errorMessage, meta, validate });
+
+const emit = defineEmits(["update:modelValue"]);
+
+const inputEl = ref();
+
+const sliderProgressValue = computed(
+  () =>
+    (Math.round((props.modelValue / props.step) * props.step) - props.min) /
+    (props.max - props.min)
+);
+</script>
+
+<style lang="scss" scoped>
+$sliderHeight: 12px;
+$sliderThumb: 20px;
+$sliderProgress: calc(
+  0.5 * #{$sliderThumb} + var(--slider-progress-value) * (100% - #{$sliderThumb})
+);
+
+.input-wrapper {
+  input {
+    display: block;
+    margin: 4px 0;
+    width: 100%;
+    appearance: none;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+    }
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: $sliderThumb;
+      height: $sliderThumb;
+      border-radius: 50%;
+      background: #77aa43;
+      border: none;
+      margin-top: calc($sliderHeight * 0.5 - $sliderThumb * 0.5);
+      cursor: grab;
+    }
+
+    &::-webkit-slider-runnable-track {
+      height: $sliderHeight;
+      border: none;
+      border-radius: $sliderHeight;
+      box-shadow: inset 0px 0px 10px rgba(129, 129, 129, 0.25);
+      background: linear-gradient(#b5e187, #b5e187) 0 / $sliderProgress 100%
+          no-repeat,
+        #eef4e8;
+    }
+
+    &::-moz-range-thumb {
+      width: $sliderThumb;
+      height: $sliderThumb;
+      border-radius: 50%;
+      background: #77aa43;
+      border: none;
+      cursor: grab;
+    }
+
+    &::-moz-range-track {
+      height: $sliderHeight;
+      border: none;
+      border-radius: $sliderHeight;
+      box-shadow: none;
+      background: linear-gradient(#b5e187, #b5e187) 0 / $sliderProgress 100%
+          no-repeat,
+        #eef4e8;
+    }
+
+    &::-ms-fill-upper {
+      background: transparent;
+      border-color: transparent;
+    }
+
+    &::-ms-fill-lower {
+      background: transparent;
+      border-color: transparent;
+      height: $sliderHeight;
+      border-radius: $sliderHeight 0 0 $sliderHeight;
+      background: #b5e187;
+      border: none;
+      border-right-width: 0;
+    }
+
+    &::-ms-thumb {
+      width: $sliderThumb;
+      height: $sliderThumb;
+      border-radius: 50%;
+      background: #77aa43;
+      border: none;
+      margin-top: 0;
+      box-sizing: border-box;
+      cursor: grab;
+    }
+
+    &::-ms-track {
+      height: $sliderHeight;
+      border-radius: $sliderHeight;
+      background: #eef4e8;
+      border: none;
+      box-shadow: none;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

package/src/components/forms/TextInput.vue

@@ -103,12 +103,6 @@ const emit = defineEmits(["update:modelValue"]);
   input {
     @include input-template;
 
-    &:focus {
-      + .input-suffix {
-        color: $extra-dark-blue;
-      }
-    }
-
     &[type="number"] {
       /* Firefox */
       -moz-appearance: textfield;
@@ -120,6 +114,24 @@ const emit = defineEmits(["update:modelValue"]);
         margin: 0;
       }
     }
+
+    &.size-sm {
+      + .input-suffix {
+        right: $sm-padding-h;
+      }
+    }
+
+    &.size-md {
+      + .input-suffix {
+        right: $md-padding-h;
+      }
+    }
+
+    &.size-lg {
+      + .input-suffix {
+        right: $lg-padding-h;
+      }
+    }
   }
 
   &.error {
@@ -132,11 +144,8 @@ const emit = defineEmits(["update:modelValue"]);
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    right: 8px;
-    line-height: 11px;
-    font-size: 11px;
-    color: $blue-grey;
-    transition: color 0.1s ease-in;
+    line-height: 12px;
+    font-size: 12px;
   }
 }
 </style>

package/src/components/index.ts

@@ -19,8 +19,10 @@ import SelectInput from "./forms/SelectInput.vue";
 import FileInput from "./forms/FileInput.vue";
 import NumberInput from "./forms/NumberInput.vue";
 import ToggleInput from "./forms/ToggleInput.vue";
+import SliderInput from "./forms/SliderInput.vue";
 import CurrencyInput from "./forms/CurrencyInput.vue";
 import SelectionTiles from "./forms/SelectionTiles.vue";
+import InputError from "./forms/structure/InputError.vue";
 
 import JourneyMacroSteps from "./composite/JourneyMacroSteps.vue";
 import FunnelLayout from "./composite/FunnelLayout.vue";
@@ -48,10 +50,12 @@ export {
   SelectInput,
   CurrencyInput,
   SelectionTiles,
+  InputError,
   LoadingSpinner,
   Scaffold,
   ProductDetails,
   ToggleInput,
+  SliderInput,
   FileInput,
   ContentTabs,
   CollapseContainer,