bfg-common 1.5.92 → 1.5.94

package/components/common/details/DetailsItem.vue

@@ -1,109 +1,109 @@
-<template>
-  <div
-    :class="[
-      'stack-block',
-      { 'not-children': !props.hasChildren, open: isOpen },
-    ]"
-  >
-    <div class="stack-block__label">
-      <atoms-the-icon
-        :data-id="`${props.testId}-toggle-icon`"
-        name="angle"
-        class="stack-block__icon"
-        @click="onToggle"
-      />
-
-      <div class="stack-view-key">
-        <slot name="stackBlockKey" />
-      </div>
-      <div class="stack-block-content" :data-id="props.testId">
-        <slot name="stackBlockContent" />
-      </div>
-    </div>
-
-    <div v-show="isOpen" class="stack-children">
-      <div class="h-auto">
-        <slot name="stackChildren" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    openByDefault?: boolean
-    hasChildren: boolean
-    testId?: string
-  }>(),
-  {
-    openByDefault: false,
-    testId: '',
-  }
-)
-const emits = defineEmits<{
-  (event: 'toggle', value: boolean): void
-}>()
-const isOpen = ref<boolean>(props.openByDefault || false)
-const onToggle = (): void => {
-  isOpen.value = !isOpen.value
-  emits('toggle', isOpen.value)
-}
-</script>
-
-<style scoped lang="scss">
-@import '~/assets/scss/common/mixins.scss';
-.stack-block {
-  &.open {
-    .stack-block__icon {
-      transform: rotate(180deg);
-    }
-  }
-
-  &__label {
-    //padding: 7px 0 6px;
-    @include flex($align: center);
-    max-width: unset;
-
-    &::before {
-      display: none;
-    }
-
-    .stack-view-key {
-      max-width: 40%;
-    }
-
-    .stack-block-content {
-      padding: 0;
-      flex: 1 1 auto;
-      width: 60%;
-      background-color: transparent;
-    }
-  }
-  &__icon {
-    width: 16px;
-    height: 16px;
-    margin-right: 4px;
-    transform: rotate(90deg);
-    align-self: center;
-    fill: var(--triger-icon-color);
-    cursor: pointer;
-  }
-
-  &.not-children {
-    .stack-block__label {
-      padding: 0 0 3px 0;
-      background-color: transparent;
-
-      .stack-view-key {
-        max-width: 20%;
-        flex: 1 1 130px;
-      }
-    }
-
-    .stack-block__icon {
-      opacity: 0;
-    }
-  }
-}
-</style>
+<template>
+  <div
+    :class="[
+      'stack-block',
+      { 'not-children': !props.hasChildren, open: isOpen },
+    ]"
+  >
+    <div class="stack-block__label">
+      <atoms-the-icon
+        :data-id="`${props.testId}-toggle-icon`"
+        name="angle"
+        class="stack-block__icon"
+        @click="onToggle"
+      />
+
+      <div class="stack-view-key">
+        <slot name="stackBlockKey" />
+      </div>
+      <div class="stack-block-content" :data-id="props.testId">
+        <slot name="stackBlockContent" />
+      </div>
+    </div>
+
+    <div v-show="isOpen" class="stack-children">
+      <div class="h-auto">
+        <slot name="stackChildren" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    openByDefault?: boolean
+    hasChildren: boolean
+    testId?: string
+  }>(),
+  {
+    openByDefault: false,
+    testId: '',
+  }
+)
+const emits = defineEmits<{
+  (event: 'toggle', value: boolean): void
+}>()
+const isOpen = ref<boolean>(props.openByDefault || false)
+const onToggle = (): void => {
+  isOpen.value = !isOpen.value
+  emits('toggle', isOpen.value)
+}
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/scss/common/mixins.scss';
+.stack-block {
+  &.open {
+    .stack-block__icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__label {
+    //padding: 7px 0 6px;
+    @include flex($align: center);
+    max-width: unset;
+
+    &::before {
+      display: none;
+    }
+
+    .stack-view-key {
+      max-width: 40%;
+    }
+
+    .stack-block-content {
+      padding: 0;
+      flex: 1 1 auto;
+      width: 60%;
+      background-color: transparent;
+    }
+  }
+  &__icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
+    transform: rotate(90deg);
+    align-self: center;
+    fill: var(--triger-icon-color);
+    cursor: pointer;
+  }
+
+  &.not-children {
+    .stack-block__label {
+      padding: 0 0 3px 0;
+      background-color: transparent;
+
+      .stack-view-key {
+        max-width: 20%;
+        flex: 1 1 130px;
+      }
+    }
+
+    .stack-block__icon {
+      opacity: 0;
+    }
+  }
+}
+</style>

package/components/common/feedback/Buttons.vue

@@ -1,229 +1,229 @@
-<template>
-  <div class="buttons">
-    <div class="buttons-info">
-      <div class="icon-wrap">
-        <atoms-the-icon
-          id="showHelpInfo"
-          data-id="toggle-help-info-icon"
-          fill="#0072a3"
-          width="24px"
-          height="24px"
-          name="info-circle"
-          @click="isShowHelpInfo = !isShowHelpInfo"
-        />
-      </div>
-      <span class="info-text">{{ localization.common.helpUsImprove }}</span>
-    </div>
-    <atoms-tooltip-signpost
-      v-if="isShowHelpInfo"
-      test-id="feedback-button"
-      elem-id="showHelpInfo"
-      class="help-info"
-      @hide="isShowHelpInfo = false"
-    >
-      <h3>{{ localization.common.feedbackHelp }}</h3>
-      <p>
-        {{ localization.common.anyFeedbackYouProvideMay }}
-      </p>
-    </atoms-tooltip-signpost>
-    <div class="buttons-body">
-      <span class="text">{{ localization.common.selectAType }}</span>
-      <div class="button-wrap">
-        <button
-          v-for="item in props.items"
-          id="feedback-button"
-          :key="item.key"
-          :class="[
-            'btn btn-outline feedback-button',
-            { active: item.key === props.select },
-          ]"
-          :data-id="item.testId"
-          @click="onSelect(item.key)"
-        >
-          <atoms-the-icon2
-            :name="item.iconName"
-            class="feedback-icon btn-icon has-solid clr-i-outline clr-i-outline-path-2"
-          />
-          <span>{{ item.text }}</span>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_FeedbackButtonsItem } from './lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  select: number | null
-  items: UI_I_FeedbackButtonsItem[]
-}>()
-const emits = defineEmits<{
-  (event: 'update:select', value: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const onSelect = (value: number): void => {
-  emits('update:select', value)
-}
-const isShowHelpInfo = ref<boolean>(false)
-</script>
-
-<style scoped lang="scss">
-.buttons {
-  .buttons-info {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: 20px;
-
-    :deep(.icon-info-standart) {
-      width: 20px !important;
-      min-width: 20px !important;
-      height: 20px;
-      min-height: 20px;
-    }
-    .icon-wrap {
-      cursor: pointer;
-      height: 24px;
-      width: 24px;
-      .info-icon {
-        height: 24px;
-      }
-    }
-
-    .info-text {
-      margin-left: 5px;
-    }
-  }
-  .buttons-body {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    margin-bottom: 20px;
-    .text {
-      padding-top: 5px;
-      min-width: 140px;
-      margin-right: 10px;
-    }
-    .email {
-      width: 100%;
-    }
-    .button-wrap {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      font-size: 13px;
-      font-weight: 400;
-      letter-spacing: normal;
-
-      .btn {
-        transform: translate(0, 3px);
-        text-transform: capitalize;
-        padding: 5px;
-        .text {
-          color: var(--icon-fill-hover-color);
-        }
-
-        &.btn-outline.feedback-button {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-        }
-        &.btn-outline.feedback-button .feedback-icon {
-          width: 16px;
-          height: 16px;
-          margin-right: 3px;
-        }
-
-        color: var(--icon-fill-color);
-        border: 1px solid var(--btn-border-color);
-        border-bottom: 5px solid var(--btn-border-color);
-        .has-solid.clr-i-outline.clr-i-outline-path-2 {
-          fill: var(--icon-fill-color);
-        }
-      }
-    }
-    .button-wrap {
-      .btn.btn-outline.feedback-button:hover {
-        transform: translate(0px, 0px);
-        color: var(--icon-fill-hover-color);
-        border: 1px solid var(--btn-border-hover-color);
-        border-bottom: 5px solid var(--btn-border-hover-color);
-        .has-solid.clr-i-outline.clr-i-outline-path-2 {
-          fill: var(--icon-fill-hover-color);
-        }
-      }
-      .btn.btn-outline.feedback-button.active {
-        border: 1px solid var(--btn-border-hover-color);
-        border-bottom: 5px solid var(--btn-border-hover-color);
-      }
-    }
-
-    &__last {
-      margin-top: -20px;
-    }
-  }
-}
-.tooltip {
-  position: relative;
-  display: inline-block;
-
-  & .tooltiptext {
-    text-align: center;
-    padding: 5px 2px;
-    border-radius: 2px;
-    border: 1px solid var(--global-font-color);
-    color: var(--global-font-color);
-    background-color: var(--global-bg-color);
-    position: absolute;
-    z-index: var(--z-popover);
-  }
-}
-.help-info {
-  display: block;
-  text-align: left;
-  width: 360px;
-  color: var(--modal-first-title);
-
-  h3 {
-    font-size: 22px;
-    color: inherit;
-    margin-top: 0;
-    //text-transform: capitalize;
-  }
-
-  p {
-    margin-top: 24px;
-    text-transform: none;
-    white-space: break-spaces;
-  }
-  a {
-    color: var(--a-link-color);
-    text-decoration: none;
-  }
-}
-</style>
-<style>
-:root {
-  --modal-secondary-title: #565656;
-  --modal-first-title: #565656;
-  --icon-fill-color: #1d1c1c;
-  --icon-fill-hover-color: rgb(0, 121, 184);
-  --btn-border-hover-color: #0079b8;
-  --btn-border-color: #dedede;
-  --a-link-color: #0072a3;
-}
-:root.dark-theme {
-  --modal-secondary-title: #e9ecef;
-  --modal-first-title: #adbbc4;
-  --icon-fill-color: rgb(233, 236, 239);
-  --icon-fill-hover-color: rgb(73, 175, 217);
-  --btn-border-hover-color: #0079b8;
-  --btn-border-color: rgb(14, 22, 27);
-  --a-link-color: #4aaed9;
-}
-</style>
+<template>
+  <div class="buttons">
+    <div class="buttons-info">
+      <div class="icon-wrap">
+        <atoms-the-icon
+          id="showHelpInfo"
+          data-id="toggle-help-info-icon"
+          fill="#0072a3"
+          width="24px"
+          height="24px"
+          name="info-circle"
+          @click="isShowHelpInfo = !isShowHelpInfo"
+        />
+      </div>
+      <span class="info-text">{{ localization.common.helpUsImprove }}</span>
+    </div>
+    <atoms-tooltip-signpost
+      v-if="isShowHelpInfo"
+      test-id="feedback-button"
+      elem-id="showHelpInfo"
+      class="help-info"
+      @hide="isShowHelpInfo = false"
+    >
+      <h3>{{ localization.common.feedbackHelp }}</h3>
+      <p>
+        {{ localization.common.anyFeedbackYouProvideMay }}
+      </p>
+    </atoms-tooltip-signpost>
+    <div class="buttons-body">
+      <span class="text">{{ localization.common.selectAType }}</span>
+      <div class="button-wrap">
+        <button
+          v-for="item in props.items"
+          id="feedback-button"
+          :key="item.key"
+          :class="[
+            'btn btn-outline feedback-button',
+            { active: item.key === props.select },
+          ]"
+          :data-id="item.testId"
+          @click="onSelect(item.key)"
+        >
+          <atoms-the-icon2
+            :name="item.iconName"
+            class="feedback-icon btn-icon has-solid clr-i-outline clr-i-outline-path-2"
+          />
+          <span>{{ item.text }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_FeedbackButtonsItem } from './lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  select: number | null
+  items: UI_I_FeedbackButtonsItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:select', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onSelect = (value: number): void => {
+  emits('update:select', value)
+}
+const isShowHelpInfo = ref<boolean>(false)
+</script>
+
+<style scoped lang="scss">
+.buttons {
+  .buttons-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 20px;
+
+    :deep(.icon-info-standart) {
+      width: 20px !important;
+      min-width: 20px !important;
+      height: 20px;
+      min-height: 20px;
+    }
+    .icon-wrap {
+      cursor: pointer;
+      height: 24px;
+      width: 24px;
+      .info-icon {
+        height: 24px;
+      }
+    }
+
+    .info-text {
+      margin-left: 5px;
+    }
+  }
+  .buttons-body {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin-bottom: 20px;
+    .text {
+      padding-top: 5px;
+      min-width: 140px;
+      margin-right: 10px;
+    }
+    .email {
+      width: 100%;
+    }
+    .button-wrap {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      font-size: 13px;
+      font-weight: 400;
+      letter-spacing: normal;
+
+      .btn {
+        transform: translate(0, 3px);
+        text-transform: capitalize;
+        padding: 5px;
+        .text {
+          color: var(--icon-fill-hover-color);
+        }
+
+        &.btn-outline.feedback-button {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+        }
+        &.btn-outline.feedback-button .feedback-icon {
+          width: 16px;
+          height: 16px;
+          margin-right: 3px;
+        }
+
+        color: var(--icon-fill-color);
+        border: 1px solid var(--btn-border-color);
+        border-bottom: 5px solid var(--btn-border-color);
+        .has-solid.clr-i-outline.clr-i-outline-path-2 {
+          fill: var(--icon-fill-color);
+        }
+      }
+    }
+    .button-wrap {
+      .btn.btn-outline.feedback-button:hover {
+        transform: translate(0px, 0px);
+        color: var(--icon-fill-hover-color);
+        border: 1px solid var(--btn-border-hover-color);
+        border-bottom: 5px solid var(--btn-border-hover-color);
+        .has-solid.clr-i-outline.clr-i-outline-path-2 {
+          fill: var(--icon-fill-hover-color);
+        }
+      }
+      .btn.btn-outline.feedback-button.active {
+        border: 1px solid var(--btn-border-hover-color);
+        border-bottom: 5px solid var(--btn-border-hover-color);
+      }
+    }
+
+    &__last {
+      margin-top: -20px;
+    }
+  }
+}
+.tooltip {
+  position: relative;
+  display: inline-block;
+
+  & .tooltiptext {
+    text-align: center;
+    padding: 5px 2px;
+    border-radius: 2px;
+    border: 1px solid var(--global-font-color);
+    color: var(--global-font-color);
+    background-color: var(--global-bg-color);
+    position: absolute;
+    z-index: var(--z-popover);
+  }
+}
+.help-info {
+  display: block;
+  text-align: left;
+  width: 360px;
+  color: var(--modal-first-title);
+
+  h3 {
+    font-size: 22px;
+    color: inherit;
+    margin-top: 0;
+    //text-transform: capitalize;
+  }
+
+  p {
+    margin-top: 24px;
+    text-transform: none;
+    white-space: break-spaces;
+  }
+  a {
+    color: var(--a-link-color);
+    text-decoration: none;
+  }
+}
+</style>
+<style>
+:root {
+  --modal-secondary-title: #565656;
+  --modal-first-title: #565656;
+  --icon-fill-color: #1d1c1c;
+  --icon-fill-hover-color: rgb(0, 121, 184);
+  --btn-border-hover-color: #0079b8;
+  --btn-border-color: #dedede;
+  --a-link-color: #0072a3;
+}
+:root.dark-theme {
+  --modal-secondary-title: #e9ecef;
+  --modal-first-title: #adbbc4;
+  --icon-fill-color: rgb(233, 236, 239);
+  --icon-fill-hover-color: rgb(73, 175, 217);
+  --btn-border-hover-color: #0079b8;
+  --btn-border-color: rgb(14, 22, 27);
+  --a-link-color: #4aaed9;
+}
+</style>