cja-phoenix 1.2.39 → 1.2.41

package/dist/runtime/components/CjaButton.d.vue.ts

@@ -0,0 +1,33 @@
+import type { AnchorHTMLAttributes } from "vue";
+import type { Icon } from "../types/Icon.js";
+type __VLS_Props = {
+    type?: "primary" | "secondary" | "tertiary";
+    color?: "blue" | "orange" | "white" | "light-blue" | "gradient-green-blue";
+    textAlign?: "center" | "left" | "right";
+    size?: "sm" | "md" | "lg";
+    shadow?: boolean;
+    iconRight?: Icon;
+    iconLeft?: Icon;
+    iconOnly?: boolean;
+    loading?: boolean;
+    href?: AnchorHTMLAttributes["href"];
+    target?: AnchorHTMLAttributes["target"];
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "primary" | "secondary" | "tertiary";
+    size: "sm" | "md" | "lg";
+    color: "blue" | "orange" | "white" | "light-blue" | "gradient-green-blue";
+    textAlign: "center" | "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/CjaButton.vue

@@ -0,0 +1,437 @@
+<template>
+  <component
+    external
+    :is="href ? NuxtLink : 'button'"
+    class="cja-btn"
+    :href="href"
+    :target="target"
+    :class="[
+  `btn-${type}`,
+  `btn-size-${size}`,
+  `btn-color-${color}`,
+  `btn-align-${textAlign}`,
+  { 'btn-loading': loading, 'btn-shadow': shadow, 'icon-only': iconOnly }
+]"
+  >
+    <Transition name="fade" mode="out-in">
+      <div v-if="loading" class="spinner" />
+      <div v-else class="text-wrapper">
+        <span v-if="iconLeft" :class="iconLeft" />
+        <span v-if="!iconOnly" class="text">
+          <slot />
+        </span>
+        <span v-if="iconRight" :class="iconRight" />
+      </div>
+    </Transition>
+  </component>
+</template>
+
+<script setup>
+import { NuxtLink } from "#components";
+defineProps({
+  type: { type: String, required: false, default: "primary" },
+  color: { type: String, required: false, default: "blue" },
+  textAlign: { type: String, required: false, default: "center" },
+  size: { type: String, required: false, default: "md" },
+  shadow: { type: Boolean, required: false },
+  iconRight: { type: null, required: false },
+  iconLeft: { type: null, required: false },
+  iconOnly: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  href: { type: null, required: false },
+  target: { type: null, required: false }
+});
+</script>
+
+<style lang="scss" scoped>
+.cja-btn {
+  display: inline-flex;
+  font-family: Nunito Sans, Helvetica, sans-serif;
+  font-weight: 700;
+  cursor: pointer;
+  transition-property: background, color, border-color, width;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  background: none;
+  text-decoration: none;
+
+  .text-wrapper {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+  }
+
+  * {
+    pointer-events: none;
+  }
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &.btn-size-sm {
+    font-size: 14px;
+    line-height: 18px;
+    padding: 8px 12px;
+    border-radius: 8px;
+
+    .text-wrapper {
+      gap: 8px;
+    }
+
+    &.icon-only {
+      padding: 6px 10px;
+    }
+  }
+
+  &.btn-size-md {
+    padding: 11px 12px;
+    border-radius: 8px;
+    font-size: 16px;
+    line-height: 20px;
+
+    .text-wrapper {
+      gap: 8px;
+    }
+
+    &.icon-only {
+      padding: 9px 13px;
+    }
+  }
+
+  &.btn-size-lg {
+    font-size: 18px;
+    line-height: 22px;
+    padding: 16px;
+    border-radius: 8px;
+
+    .text-wrapper {
+      gap: 12px;
+    }
+
+    &.icon-only {
+      padding: 16px 18px;
+    }
+  }
+
+  @each $align in center, left, right {
+    &.btn-align-#{$align} .text-wrapper {
+      text-align: $align;
+      @if $align == center {
+        justify-content: center;
+      }
+
+      @if $align == left or $align == right {
+        .text {
+          flex-grow: 1;
+        }
+      }
+    }
+  }
+
+  &.btn-primary {
+    &.btn-shadow {
+      box-shadow: $box-shadow-s;
+    }
+
+    &.btn-color-orange:not(:disabled) {
+      background: $main-orange;
+      border-color: $main-orange;
+      color: $white;
+
+      &:hover {
+        background: $dark-orange;
+        border-color: $dark-orange;
+      }
+
+      &:focus {
+        background: $extra-dark-orange;
+        border-color: $extra-dark-orange;
+      }
+    }
+
+    &.btn-color-blue:not(:disabled) {
+      background: $main-blue;
+      border-color: $main-blue;
+      color: $white;
+
+      &:hover {
+        background: $dark-blue;
+        border-color: $dark-blue;
+      }
+
+      &:focus {
+        background: $extra-dark-blue;
+        border-color: $extra-dark-blue;
+      }
+    }
+
+    &.btn-color-light-blue:not(:disabled) {
+      background: $light-blue;
+      border-color: $light-blue;
+      color: $main-blue;
+
+      &:hover {
+        background: $main-blue;
+        border-color: $main-blue;
+        color: $white;
+      }
+
+      &:focus {
+        background: $extra-dark-blue;
+        border-color: $extra-dark-blue;
+        color: $white;
+      }
+    }
+
+    &.btn-color-white:not(:disabled) {
+      background: $white;
+      border-color: $light-grey;
+      color: $extra-dark-blue;
+
+      &:hover {
+        background: $dark-white;
+      }
+
+      &:focus {
+        background: $light-grey;
+        border-color: $light-grey;
+      }
+    }
+
+    &:disabled {
+      background: $disabled-grey;
+      border-color: $disabled-grey;
+      color: $blue-grey;
+      cursor: auto;
+    }
+  }
+
+  &.btn-secondary {
+    &.btn-color-orange:not(:disabled) {
+      border-color: $main-orange;
+      color: $main-orange;
+
+      &:hover {
+        background: $light-orange;
+        border-color: $main-orange;
+        color: $main-orange;
+      }
+
+      &:focus {
+        background: $light-orange;
+        border-color: $extra-dark-orange;
+        color: $extra-dark-orange;
+      }
+    }
+
+    &.btn-color-blue:not(:disabled) {
+      border-color: $main-blue;
+      color: $main-blue;
+
+      &:hover {
+        background: $light-blue;
+        border-color: $main-blue;
+        color: $main-blue;
+      }
+
+      &:focus {
+        background: $light-blue;
+        border-color: $extra-dark-blue;
+        color: $extra-dark-blue;
+      }
+    }
+
+    &.btn-color-light-blue:not(:disabled) {
+      border-color: $light-blue;
+      color: $light-blue;
+
+      &:hover {
+        background: $light-blue;
+        border-color: $light-blue;
+        color: $main-blue;
+      }
+
+      &:focus {
+        background: $light-blue;
+        border-color: $light-blue;
+        color: $dark-blue;
+      }
+    }
+
+    &.btn-color-white:not(:disabled) {
+      border-color: $white;
+      color: $white;
+
+      &:hover {
+        background: $white;
+        border-color: $white;
+        color: $main-blue;
+      }
+
+      &:focus {
+        background: $dark-white;
+        border-color: $dark-white;
+        color: $dark-blue;
+      }
+    }
+
+    &:disabled {
+      background: $disabled-grey;
+      border-color: $disabled-grey;
+      color: $blue-grey;
+      cursor: auto;
+    }
+  }
+
+  &.btn-tertiary {
+    padding: 0;
+
+    &.btn-color-blue:not(:disabled) {
+      color: $main-blue;
+
+      &:hover {
+        color: $dark-blue;
+      }
+
+      &:focus {
+        color: $extra-dark-blue;
+      }
+    }
+
+    &.btn-color-light-blue:not(:disabled) {
+      color: $light-blue;
+
+      &:hover {
+        color: $light-blue;
+      }
+
+      &:focus {
+        color: $medium-blue;
+      }
+    }
+
+    &.btn-color-orange:not(:disabled) {
+      color: $main-orange;
+
+      &:hover {
+        color: $bright-orange;
+      }
+
+      &:focus {
+        color: $dark-orange;
+      }
+    }
+
+    &.btn-color-white:not(:disabled) {
+      color: $white;
+
+      &:hover {
+        color: $dark-white;
+      }
+
+      &:focus {
+        color: $blue-grey;
+      }
+    }
+
+    &:disabled {
+      color: $disabled-grey;
+      cursor: auto;
+    }
+  }
+
+  &.btn-color-gradient-green-blue {
+    background: linear-gradient(90deg, $bright-green -62.79%, $main-blue 100%),
+      $main-blue;
+    border: none;
+    color: $white;
+
+    &:hover {
+      background: $main-blue;
+    }
+
+    &:focus {
+      background: $dark-blue;
+    }
+  }
+
+  &.btn-loading {
+    cursor: auto;
+  }
+
+  .spinner {
+    display: block;
+    border-width: 2px;
+    border-style: solid;
+    border-color: inherit;
+    border-top-color: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    animation: spin 1s infinite;
+    animation-timing-function: linear;
+    margin: 0 auto;
+
+    &.fade-leave-active {
+      animation: none;
+    }
+  }
+
+  @mixin spinner-color($on-color, $off-color: rgba(255, 255, 255, 0.2)) {
+    .spinner {
+      border-color: $on-color;
+      border-top-color: $off-color;
+    }
+  }
+
+  @each $size, $value in "sm" 18px, "md" 20px, "lg" 22px {
+    &.btn-size-#{$size} .spinner {
+      width: $value;
+      height: $value;
+    }
+  }
+
+  &.btn-primary {
+    @include spinner-color($white);
+    @each $btn, $color in ("light-blue": $main-blue, "white": $light-grey) {
+      &.btn-color-#{$btn} {
+        @include spinner-color($color);
+      }
+    }
+  }
+
+  &.btn-tertiary {
+    @each $btn,
+      $color
+        in (
+          "blue": $main-blue,
+          "orange": $main-orange,
+          "light-blue": $light-blue,
+          "white": $white
+        )
+    {
+      &.btn-color-#{$btn} {
+        @include spinner-color($color);
+      }
+    }
+  }
+
+  @include fade-transition(0.2s);
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/dist/runtime/components/CjaButton.vue.d.ts

@@ -0,0 +1,33 @@
+import type { AnchorHTMLAttributes } from "vue";
+import type { Icon } from "../types/Icon.js";
+type __VLS_Props = {
+    type?: "primary" | "secondary" | "tertiary";
+    color?: "blue" | "orange" | "white" | "light-blue" | "gradient-green-blue";
+    textAlign?: "center" | "left" | "right";
+    size?: "sm" | "md" | "lg";
+    shadow?: boolean;
+    iconRight?: Icon;
+    iconLeft?: Icon;
+    iconOnly?: boolean;
+    loading?: boolean;
+    href?: AnchorHTMLAttributes["href"];
+    target?: AnchorHTMLAttributes["target"];
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "primary" | "secondary" | "tertiary";
+    size: "sm" | "md" | "lg";
+    color: "blue" | "orange" | "white" | "light-blue" | "gradient-green-blue";
+    textAlign: "center" | "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/CollapseContainer.d.vue.ts

@@ -0,0 +1,35 @@
+type __VLS_Props = {
+    active?: boolean;
+    scrollToContent?: {
+        element: HTMLElement;
+    };
+};
+declare var __VLS_1: {}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    content?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    toggleCollapse: () => void;
+    openCollapse: () => void;
+    closeCollapse: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "toggle:collapse": (...args: any[]) => void;
+    "open:collapse": (...args: any[]) => void;
+    "close:collapse": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onToggle:collapse"?: ((...args: any[]) => any) | undefined;
+    "onOpen:collapse"?: ((...args: any[]) => any) | undefined;
+    "onClose:collapse"?: ((...args: any[]) => any) | undefined;
+}>, {
+    active: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/CollapseContainer.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="collapse-container" :class="{ active }">
+    <div class="collapse-header" @click="toggleCollapse">
+      <div class="header-wrapper">
+        <slot name="header" />
+      </div>
+      <span class="m-cgg-icon--chevron-down" />
+    </div>
+    <Transition name="slide" @enter="slideEnter" @leave="slideLeave">
+      <div v-show="active" ref="contentContainer" class="content-container">
+        <div ref="contentWrapper" class="content-wrapper">
+          <slot name="content" />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  active: { type: Boolean, required: false, default: false },
+  scrollToContent: { type: Object, required: false }
+});
+const active = ref(props.active);
+const contentContainer = ref();
+const contentWrapper = ref();
+const emit = defineEmits([
+  "toggle:collapse",
+  "open:collapse",
+  "close:collapse"
+]);
+const toggleCollapse = () => {
+  active.value = !active.value;
+  emit("toggle:collapse", active.value);
+  emit(`${active.value ? "open" : "close"}:collapse`);
+};
+const openCollapse = () => {
+  active.value = true;
+  emit("open:collapse");
+};
+const closeCollapse = () => {
+  active.value = false;
+  emit("close:collapse");
+};
+const slideEnter = () => {
+  contentContainer.value.style.height = "0";
+  requestAnimationFrame(() => {
+    if (contentContainer.value && contentWrapper.value) {
+      contentContainer.value.style.height = `${contentWrapper.value.clientHeight}px`;
+      setTimeout(() => {
+        contentContainer.value.style.height = "";
+      }, 200);
+      if (active.value && props.scrollToContent) {
+        setTimeout(() => {
+          props.scrollToContent?.element.scrollTo({
+            top: contentWrapper.value.offsetTop,
+            left: 0,
+            behavior: "smooth"
+          });
+        }, 250);
+      }
+    }
+  });
+};
+const slideLeave = () => {
+  contentContainer.value.style.height = `${contentWrapper.value.clientHeight}px`;
+  requestAnimationFrame(() => {
+    contentContainer.value.style.height = "0";
+  });
+};
+defineExpose({ toggleCollapse, openCollapse, closeCollapse });
+</script>
+
+<style lang="scss" scoped>
+.collapse-container {
+  .collapse-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    cursor: pointer;
+    user-select: none;
+
+    > span {
+      transition: all 0.2s linear;
+    }
+  }
+
+  .content-container {
+    transition: all 0.2s linear;
+
+    &.slide-leave-active,
+    &.slide-enter-active {
+      overflow: hidden;
+    }
+
+    .content-wrapper {
+      padding-top: 16px;
+    }
+  }
+
+  &.active > .collapse-header > span {
+    transform: rotate(180deg);
+  }
+
+  &:not(.active) > .content-container {
+    overflow: hidden;
+  }
+}
+</style>

package/dist/runtime/components/CollapseContainer.vue.d.ts

@@ -0,0 +1,35 @@
+type __VLS_Props = {
+    active?: boolean;
+    scrollToContent?: {
+        element: HTMLElement;
+    };
+};
+declare var __VLS_1: {}, __VLS_12: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    content?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    toggleCollapse: () => void;
+    openCollapse: () => void;
+    closeCollapse: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "toggle:collapse": (...args: any[]) => void;
+    "open:collapse": (...args: any[]) => void;
+    "close:collapse": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onToggle:collapse"?: ((...args: any[]) => any) | undefined;
+    "onOpen:collapse"?: ((...args: any[]) => any) | undefined;
+    "onClose:collapse"?: ((...args: any[]) => any) | undefined;
+}>, {
+    active: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ContentTabs.d.vue.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    defaultTab: number;
+    tabs: string[];
+};
+declare var __VLS_8: number, __VLS_9: {};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_8>]?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    activeTab: import("vue").Ref<number, number>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "tab:changed": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onTab:changed"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};