bfg-common 1.5.92 → 1.5.94

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

@@ -1,98 +1,98 @@
-<template>
-  <div class="headline">
-    <span class="headline__label">
-      {{ localization.common.additionalDetails }}
-    </span>
-    <ui-icon
-      id="feedback-additional-details-info-icon"
-      :class="['headline__icon pointer', isShowInfo && 'active']"
-      name="info"
-      width="16"
-      height="16"
-      @click="isShowInfo = !isShowInfo"
-    />
-    <ui-popup-window
-      v-model="isShowInfo"
-      :elem-id="'feedback-additional-details-info-icon'"
-      width="288px"
-      is-priority-right-position
-    >
-      <div class="common-widget-info">
-        <div class="flex justify-between">
-          <div class="flex">
-            <ui-icon-icon3 name="info-2" width="16px" height="16px" />
-            <span class="title">
-              {{ localization.feedback.additionalDetailsHelp }}
-            </span>
-          </div>
-          <ui-icon
-            name="close"
-            class="pointer hide-icon"
-            width="16px"
-            height="16px"
-            @click="isShowInfo = false"
-          />
-        </div>
-
-        <div class="common-widget-info-description">
-          {{ localization.feedback.additionalDetailsTooltip }}
-        </div>
-      </div>
-    </ui-popup-window>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isShowInfo = ref<boolean>(false)
-</script>
-
-<style lang="scss" scoped>
-@import 'assets/scss/common/mixins.scss';
-.headline {
-  @include flex($align: center);
-  margin: 32px 0 16px;
-
-  &__icon {
-    color: var(--feedback-tooltip-trigger-color);
-    &:hover {
-      color: var(--feedback-tooltip-hover-trigger-color);
-    }
-    &.active {
-      color: var(--feedback-tooltip-acctive-trigger-color);
-    }
-  }
-  &__label {
-    line-height: 19.36px;
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--feedback-text-color);
-    margin-right: 8px;
-  }
-  .common-widget-info {
-    padding: 16px;
-    .title {
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 16.94px;
-      color: var(--feedback-text-color);
-      margin-left: 8px;
-    }
-
-    .common-widget-info-description {
-      font-size: 13px;
-      line-height: 15.73px;
-      color: var(--feedback-text-color);
-      margin-top: 12px;
-    }
-
-    svg {
-      color: var(--feedback-tooltip-close-color);
-      min-width: 16px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="headline">
+    <span class="headline__label">
+      {{ localization.common.additionalDetails }}
+    </span>
+    <ui-icon
+      id="feedback-additional-details-info-icon"
+      :class="['headline__icon pointer', isShowInfo && 'active']"
+      name="info"
+      width="16"
+      height="16"
+      @click="isShowInfo = !isShowInfo"
+    />
+    <ui-popup-window
+      v-model="isShowInfo"
+      :elem-id="'feedback-additional-details-info-icon'"
+      width="288px"
+      is-priority-right-position
+    >
+      <div class="common-widget-info">
+        <div class="flex justify-between">
+          <div class="flex">
+            <ui-icon-icon3 name="info-2" width="16px" height="16px" />
+            <span class="title">
+              {{ localization.feedback.additionalDetailsHelp }}
+            </span>
+          </div>
+          <ui-icon
+            name="close"
+            class="pointer hide-icon"
+            width="16px"
+            height="16px"
+            @click="isShowInfo = false"
+          />
+        </div>
+
+        <div class="common-widget-info-description">
+          {{ localization.feedback.additionalDetailsTooltip }}
+        </div>
+      </div>
+    </ui-popup-window>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowInfo = ref<boolean>(false)
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.headline {
+  @include flex($align: center);
+  margin: 32px 0 16px;
+
+  &__icon {
+    color: var(--feedback-tooltip-trigger-color);
+    &:hover {
+      color: var(--feedback-tooltip-hover-trigger-color);
+    }
+    &.active {
+      color: var(--feedback-tooltip-acctive-trigger-color);
+    }
+  }
+  &__label {
+    line-height: 19.36px;
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--feedback-text-color);
+    margin-right: 8px;
+  }
+  .common-widget-info {
+    padding: 16px;
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16.94px;
+      color: var(--feedback-text-color);
+      margin-left: 8px;
+    }
+
+    .common-widget-info-description {
+      font-size: 13px;
+      line-height: 15.73px;
+      color: var(--feedback-text-color);
+      margin-top: 12px;
+    }
+
+    svg {
+      color: var(--feedback-tooltip-close-color);
+      min-width: 16px;
+    }
+  }
+}
+</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/subtitle/Subtitle.vue

@@ -1,103 +1,103 @@
-<template>
-  <div class="subtitle">
-    <span class="subtitle__label">
-      {{ localization.common.helpUsImprove }}
-    </span>
-    <ui-icon
-      id="feedback-description-info-icon"
-      name="info"
-      width="16"
-      height="16"
-      :class="['subtitle__icon pointer', isShowInfo && 'active']"
-      @click="isShowInfo = !isShowInfo"
-    />
-    <ui-popup-window
-      v-model="isShowInfo"
-      :elem-id="'feedback-description-info-icon'"
-      width="320px"
-      class="subtitle__tooltip"
-      is-priority-right-position
-    >
-      <div class="common-widget-info">
-        <div class="headline justify-between flex-align-start">
-          <div class="flex-align-start">
-            <ui-icon name="info-2" width="16px" height="16px" />
-            <span class="title">{{ localization.common.feedbackHelp }}</span>
-          </div>
-          <ui-icon
-            name="close"
-            class="pointer hide-icon"
-            width="16px"
-            height="16px"
-            @click="isShowInfo = false"
-          />
-        </div>
-
-        <div class="common-widget-info-description">
-          {{ localization.common.anyFeedbackYouProvideMay }}
-        </div>
-      </div>
-    </ui-popup-window>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isShowInfo = ref<boolean>(false)
-</script>
-
-<style lang="scss" scoped>
-.subtitle {
-  display: flex;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--horizontal-line);
-  padding: 24px 0 12px;
-
-  &__icon {
-    color: var(--feedback-tooltip-trigger-color);
-    &:hover {
-      color: var(--feedback-tooltip-hover-trigger-color);
-    }
-    &.active {
-      color: var(--feedback-tooltip-acctive-trigger-color);
-    }
-  }
-  &__tooltip {
-    .flex-align-center {
-      height: 16px;
-    }
-  }
-
-  &__label {
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 14.52px;
-    color: #9da6ad;
-  }
-  .common-widget-info {
-    padding: 16px;
-    .title {
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 16.94px;
-      color: var(--feedback-text-color);
-      margin-left: 8px;
-    }
-
-    .common-widget-info-description {
-      font-size: 13px;
-      line-height: 15.73px;
-      color: var(--feedback-text-color);
-      margin-top: 12px;
-    }
-
-    svg {
-      flex: none;
-      color: var(--feedback-tooltip-close-color);
-    }
-  }
-}
-</style>
+<template>
+  <div class="subtitle">
+    <span class="subtitle__label">
+      {{ localization.common.helpUsImprove }}
+    </span>
+    <ui-icon
+      id="feedback-description-info-icon"
+      name="info"
+      width="16"
+      height="16"
+      :class="['subtitle__icon pointer', isShowInfo && 'active']"
+      @click="isShowInfo = !isShowInfo"
+    />
+    <ui-popup-window
+      v-model="isShowInfo"
+      :elem-id="'feedback-description-info-icon'"
+      width="320px"
+      class="subtitle__tooltip"
+      is-priority-right-position
+    >
+      <div class="common-widget-info">
+        <div class="headline justify-between flex-align-start">
+          <div class="flex-align-start">
+            <ui-icon name="info-2" width="16px" height="16px" />
+            <span class="title">{{ localization.common.feedbackHelp }}</span>
+          </div>
+          <ui-icon
+            name="close"
+            class="pointer hide-icon"
+            width="16px"
+            height="16px"
+            @click="isShowInfo = false"
+          />
+        </div>
+
+        <div class="common-widget-info-description">
+          {{ localization.common.anyFeedbackYouProvideMay }}
+        </div>
+      </div>
+    </ui-popup-window>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowInfo = ref<boolean>(false)
+</script>
+
+<style lang="scss" scoped>
+.subtitle {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--horizontal-line);
+  padding: 24px 0 12px;
+
+  &__icon {
+    color: var(--feedback-tooltip-trigger-color);
+    &:hover {
+      color: var(--feedback-tooltip-hover-trigger-color);
+    }
+    &.active {
+      color: var(--feedback-tooltip-acctive-trigger-color);
+    }
+  }
+  &__tooltip {
+    .flex-align-center {
+      height: 16px;
+    }
+  }
+
+  &__label {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 14.52px;
+    color: #9da6ad;
+  }
+  .common-widget-info {
+    padding: 16px;
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16.94px;
+      color: var(--feedback-text-color);
+      margin-left: 8px;
+    }
+
+    .common-widget-info-description {
+      font-size: 13px;
+      line-height: 15.73px;
+      color: var(--feedback-text-color);
+      margin-top: 12px;
+    }
+
+    svg {
+      flex: none;
+      color: var(--feedback-tooltip-close-color);
+    }
+  }
+}
+</style>