bfg-common 1.5.413 → 1.5.414

package/components/common/layout/theHeader/feedback/new/additionalDetails/Headline.vue

@@ -1,38 +1,38 @@
-<template>
-  <div class="headline">
-    <span class="headline__label">
-      {{ localization.common.additionalDetails }}
-    </span>
-
-    <common-tooltip-help
-      test-id="feedback-additional-details-help"
-      help-id="feedback-additional-details-info-icon"
-      dropdown-width="288px"
-      :title="localization.feedback.additionalDetailsHelp"
-      :help-text="localization.feedback.additionalDetailsTooltip"
-      dropdown-left
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-</script>
-
-<style lang="scss" scoped>
-@import 'assets/scss/common/mixins.scss';
-.headline {
-  @include flex($align: center);
-  margin: 32px 0 16px;
-
-  &__label {
-    line-height: 19.36px;
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--feedback-text-color);
-    margin-right: 8px;
-  }
-}
-</style>
+<template>
+  <div class="headline">
+    <span class="headline__label">
+      {{ localization.common.additionalDetails }}
+    </span>
+
+    <common-tooltip-help
+      :title="localization.feedback.additionalDetailsHelp"
+      :help-text="localization.feedback.additionalDetailsTooltip"
+      test-id="feedback-additional-details-help"
+      help-id="feedback-additional-details-info-icon"
+      dropdown-width="288px"
+      dropdown-left
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.headline {
+  @include flex($align: center);
+  margin: 32px 0 16px;
+
+  &__label {
+    line-height: 19.36px;
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--feedback-text-color);
+    margin-right: 8px;
+  }
+}
+</style>

package/components/common/layout/theHeader/feedback/new/description/Description.vue

@@ -1,59 +1,59 @@
-<template>
-  <div class="description">
-    <h4 class="description__title">{{ localization.common.description }}</h4>
-
-    <ui-textarea
-      v-model="descriptionModelLocal"
-      :disabled="!selectedTab"
-      :placeholder="descriptionTextPlaceholder"
-      :error="descriptionErrorText"
-      test-id="feedback-description"
-    >
-    </ui-textarea>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
-
-const props = defineProps<{
-  selectedTab: UI_T_FeedbackTab
-}>()
-const descriptionModelLocal = defineModel<string>({ required: true })
-const isValidModel = defineModel<boolean>('isValid', { required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const descriptionTextPlaceholder = computed<string>(() => {
-  if (props.selectedTab === 'warning-outline')
-    return localization.value.common.whatIsTheProblemHowCan
-  if (props.selectedTab === 'heart-outline')
-    return localization.value.common.tellUsWhatYouEnjoyedSo
-  return localization.value.common.selectFeedbackType
-})
-
-const descriptionErrorText = computed<boolean>(() => {
-  return !isValidModel.value && !descriptionModelLocal.value
-    ? localization.value.common.fieldRequired
-    : ''
-})
-</script>
-
-<style lang="scss" scoped>
-.description {
-  margin-top: 32px;
-  &__title {
-    line-height: 19.36px;
-    margin-bottom: 16px;
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--feedback-text-color);
-  }
-  :deep(.ui-main-textarea) {
-    resize: none;
-    height: 68px;
-    font-size: 12px;
-  }
-}
-</style>
+<template>
+  <div class="description">
+    <h4 class="description__title">{{ localization.common.description }}</h4>
+
+    <ui-textarea
+      v-model="descriptionModelLocal"
+      :disabled="!selectedTab"
+      :placeholder="descriptionTextPlaceholder"
+      :error="descriptionErrorText"
+      test-id="feedback-description"
+    >
+    </ui-textarea>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
+
+const props = defineProps<{
+  selectedTab: UI_T_FeedbackTab
+}>()
+const descriptionModelLocal = defineModel<string>({ required: true })
+const isValidModel = defineModel<boolean>('isValid', { required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const descriptionTextPlaceholder = computed<string>(() => {
+  if (props.selectedTab === 'warning-outline')
+    return localization.value.common.whatIsTheProblemHowCan
+  if (props.selectedTab === 'heart-outline')
+    return localization.value.common.tellUsWhatYouEnjoyedSo
+  return localization.value.common.selectFeedbackType
+})
+
+const descriptionErrorText = computed<boolean>(() => {
+  return !isValidModel.value && !descriptionModelLocal.value
+    ? localization.value.common.fieldRequired
+    : ''
+})
+</script>
+
+<style lang="scss" scoped>
+.description {
+  margin-top: 32px;
+  &__title {
+    line-height: 19.36px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--feedback-text-color);
+  }
+  :deep(.ui-main-textarea) {
+    resize: none;
+    height: 68px;
+    font-size: 12px;
+  }
+}
+</style>

package/components/common/layout/theHeader/feedback/new/email/Email.vue

@@ -1,43 +1,43 @@
-<template>
-  <div class="email">
-    <h4 class="email__title">{{ localization.common.emailAddress }}</h4>
-
-    <ui-input
-      v-model="emailModelLocal"
-      :error="emailErrorText"
-      :placeholder="localization.common.emailAddressOptional"
-      type="text"
-      test-id="feedback-email"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { RegExp } from '~/lib/config/regExp'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const emailModelLocal = defineModel<string>({ required: true })
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const emailErrorText = computed<string>(() => {
-  if (!emailModelLocal.value) return ''
-
-  return RegExp.email.test(emailModelLocal.value)
-    ? ''
-    : localization.value.common.emailErrorText
-})
-</script>
-
-<style scoped lang="scss">
-.email {
-  margin-top: 32px;
-  &__title {
-    line-height: 19.36px;
-    margin-bottom: 16px;
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--feedback-text-color);
-  }
-}
-</style>
+<template>
+  <div class="email">
+    <h4 class="email__title">{{ localization.common.emailAddress }}</h4>
+
+    <ui-input
+      v-model="emailModelLocal"
+      :error="emailErrorText"
+      :placeholder="localization.common.emailAddressOptional"
+      type="text"
+      test-id="feedback-email"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RegExp } from '~/lib/config/regExp'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const emailModelLocal = defineModel<string>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const emailErrorText = computed<string>(() => {
+  if (!emailModelLocal.value) return ''
+
+  return RegExp.email.test(emailModelLocal.value)
+    ? ''
+    : localization.value.common.emailErrorText
+})
+</script>
+
+<style scoped lang="scss">
+.email {
+  margin-top: 32px;
+  &__title {
+    line-height: 19.36px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--feedback-text-color);
+  }
+}
+</style>

package/components/common/layout/theHeader/feedback/new/lib/models/interfaces.ts

@@ -1,4 +1,4 @@
-export interface UI_I_FeedbackCanvasOptions {
-  isAnnotateImage: boolean
-  hasTakeScreenshot: boolean
-}
+export interface UI_I_FeedbackCanvasOptions {
+  isAnnotateImage: boolean
+  hasTakeScreenshot: boolean
+}

package/components/common/layout/theHeader/feedback/new/subtitle/Subtitle.vue

@@ -1,39 +1,38 @@
-<template>
-  <div class="subtitle">
-    <span class="subtitle__label">
-      {{ localization.common.helpUsImprove }}
-    </span>
-
-    <common-tooltip-help
-        test-id="feedback-description-help"
-        help-id="feedback-description-info-icon"
-        dropdown-width="320px"
-        :title="localization.common.feedbackHelp"
-        :help-text="localization.common.anyFeedbackYouProvideMay"
-        dropdown-left
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-</script>
-
-<style lang="scss" scoped>
-.subtitle {
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--horizontal-line);
-  padding: 24px 0 12px;
-
-  &__label {
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 14.52px;
-    color: #9da6ad;
-  }
-}
-</style>
+<template>
+  <div class="subtitle">
+    <span class="subtitle__label">
+      {{ localization.common.helpUsImprove }}
+    </span>
+
+    <common-tooltip-help
+      :title="localization.common.feedbackHelp"
+      :help-text="localization.common.anyFeedbackYouProvideMay"
+      test-id="feedback-description-help"
+      help-id="feedback-description-info-icon"
+      dropdown-width="320px"
+      dropdown-left
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+.subtitle {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--horizontal-line);
+  padding: 24px 0 12px;
+
+  &__label {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 14.52px;
+    color: #9da6ad;
+  }
+}
+</style>

package/components/common/layout/theHeader/feedback/new/tabs/Tabs.vue

@@ -1,97 +1,80 @@
-<template>
-  <div class="tabs">
-    <h4 class="tabs__title">{{ localization.feedback.selectType }}</h4>
-
-    <div class="tabs__container">
-      <ui-block
-        v-for="item in tabs"
-        :key="item.iconName"
-        :class="{ selected: item.isSelected }"
-        @click="selectedTab = item.iconName"
-      >
-        <div class="main-info">
-          <ui-icon :name="item.iconName" width="18" height="18" />
-          <span class="main-info-label">{{ item.label }}</span>
-        </div>
-      </ui-block>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
-import { tabsFunc } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/config/tabs'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const selectedTab = defineModel<UI_T_FeedbackTab>({ required: true })
-const tabs = computed<any[]>(() =>
-  tabsFunc(localization.value, selectedTab.value)
-)
-</script>
-
-<style scoped lang="scss">
-.tabs {
-  &__title {
-    color: var(--feedback-text-color);
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 19.36px;
-    margin-bottom: 16px;
-  }
-  &__container {
-    display: flex;
-    gap: 12px;
-  }
-
-  :deep(.block) {
-    width: max-content;
-    padding: 8px 12px;
-    color: var(--feedback-text-color);
-    background: var(--feedback-tab-bg-color);
-    border: 1px solid var(--feedback-tab-border-color);
-    box-shadow: none;
-    cursor: pointer;
-
-    &.selected {
-      border: 1.5px solid var(--feedback-tab-active-text-color);
-      background: var(--feedback-tab-active-bg-color);
-      color: var(--feedback-tab-active-text-color);
-      cursor: default;
-    }
-    &:not(.selected):hover {
-      background: var(--feedback-tab-hover-bg-color);
-    }
-  }
-
-  .main-info {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-
-    &-label {
-      font-size: 13px;
-      font-weight: 500;
-      line-height: 15.73px;
-    }
-  }
-}
-</style>
-<style lang="scss">
-:root {
-  --feedback-tab-bg-color: #ffffff;
-  --feedback-tab-hover-bg-color: #f6f7f8;
-  --feedback-tab-active-bg-color: #f0f8fd;
-  --feedback-tab-border-color: #e9ebed;
-  --feedback-tab-active-text-color: #008fd6;
-}
-
-:root.dark-theme {
-  --feedback-tab-bg-color: #1b2a373d;
-  --feedback-tab-hover-bg-color: #283948;
-  --feedback-tab-active-bg-color: #213b4e;
-  --feedback-tab-border-color: #e9ebed1f;
-  --feedback-tab-active-text-color: #2ba2de;
-}
-</style>
+<template>
+  <div class="tabs">
+    <h4 class="tabs__title">{{ localization.feedback.selectType }}</h4>
+
+    <div class="tabs__container">
+      <ui-block
+        v-for="item in tabs"
+        :key="item.iconName"
+        :class="{ selected: item.isSelected }"
+        @click="selectedTab = item.iconName"
+      >
+        <div class="main-info">
+          <ui-icon :name="item.iconName" width="18" height="18" />
+          <span class="main-info-label">{{ item.label }}</span>
+        </div>
+      </ui-block>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
+import { tabsFunc } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/config/tabs'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedTab = defineModel<UI_T_FeedbackTab>({ required: true })
+const tabs = computed<any[]>(() =>
+  tabsFunc(localization.value, selectedTab.value)
+)
+</script>
+
+<style scoped lang="scss">
+.tabs {
+  &__title {
+    color: var(--feedback-text-color);
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 19.36px;
+    margin-bottom: 16px;
+  }
+  &__container {
+    display: flex;
+    gap: 12px;
+  }
+
+  :deep(.block) {
+    width: max-content;
+    padding: 8px 12px;
+    color: var(--feedback-text-color);
+    background: var(--feedback-tab-bg-color);
+    border: 1px solid var(--feedback-tab-border-color);
+    box-shadow: none;
+    cursor: pointer;
+
+    &.selected {
+      border: 1.5px solid var(--feedback-tab-active-text-color);
+      background: var(--feedback-tab-active-bg-color);
+      color: var(--feedback-tab-active-text-color);
+      cursor: default;
+    }
+    &:not(.selected):hover {
+      background: var(--feedback-tab-hover-bg-color);
+    }
+  }
+
+  .main-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &-label {
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 15.73px;
+    }
+  }
+}
+</style>

package/components/common/layout/theHeader/feedback/new/tabs/lib/config/tabs.ts

@@ -1,25 +1,25 @@
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
-
-export const tabsFunc = (
-  localization: UI_I_Localization,
-  selectedTab: UI_T_FeedbackTab
-): any[] => {
-  return [
-    {
-      iconName: 'warning-outline',
-      label: localization.common.problem,
-      isSelected: selectedTab === 'warning-outline',
-    },
-    {
-      iconName: 'heart-outline',
-      label: localization.common.complement,
-      isSelected: selectedTab === 'heart-outline',
-    },
-    {
-      iconName: 'light-bulb',
-      label: localization.common.idea,
-      isSelected: selectedTab === 'light-bulb',
-    },
-  ]
-}
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
+
+export const tabsFunc = (
+  localization: UI_I_Localization,
+  selectedTab: UI_T_FeedbackTab
+): any[] => {
+  return [
+    {
+      iconName: 'warning-outline',
+      label: localization.common.problem,
+      isSelected: selectedTab === 'warning-outline',
+    },
+    {
+      iconName: 'heart-outline',
+      label: localization.common.complement,
+      isSelected: selectedTab === 'heart-outline',
+    },
+    {
+      iconName: 'light-bulb',
+      label: localization.common.idea,
+      isSelected: selectedTab === 'light-bulb',
+    },
+  ]
+}

package/components/common/layout/theHeader/feedback/new/tabs/lib/models/enums.ts

@@ -1,6 +1,6 @@
-export enum UI_E_FeedbackType {
-  'warning-outline',
-  'heart-outline',
-  WARNING,
-  'light-bulb',
-}
+export enum UI_E_FeedbackType {
+  'warning-outline',
+  'heart-outline',
+  WARNING,
+  'light-bulb',
+}

package/components/common/layout/theHeader/feedback/new/tabs/lib/models/types.ts

@@ -1 +1 @@
-export type UI_T_FeedbackTab = 'warning-outline' | 'heart-outline' | 'light-bulb'
+export type UI_T_FeedbackTab = 'warning-outline' | 'heart-outline' | 'light-bulb'