@itfin/components 2.0.79 → 2.0.81

package/src/components/icon/new-icons/ai-alt.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.000000" height="24.000000" fill="none">
+	<rect id="Filled/ai" width="24.000000" height="24.000000" x="0.000000" y="0.000000" fill="rgb(255,255,255)" fill-opacity="0" />
+	<path id="Vector" d="M17.7877 13.5465C17.7893 13.7995 17.7124 14.0468 17.5677 14.2543C17.4229 14.4619 17.2174 14.6194 16.9794 14.7054L12.9782 16.1839L11.5043 20.1882C11.4171 20.4253 11.2591 20.63 11.0519 20.7745C10.8447 20.9191 10.5981 20.9966 10.3454 20.9966C10.0927 20.9966 9.84614 20.9191 9.6389 20.7745C9.43167 20.63 9.27375 20.4253 9.18647 20.1882L7.70328 16.1839L3.69898 14.71C3.46187 14.6228 3.25723 14.4649 3.11268 14.2576C2.96813 14.0504 2.89062 13.8038 2.89062 13.5511C2.89062 13.2984 2.96813 13.0519 3.11268 12.8446C3.25723 12.6374 3.46187 12.4795 3.69898 12.3922L7.70328 10.909L9.17716 6.90469C9.26444 6.66757 9.42236 6.46293 9.62959 6.31839C9.83683 6.17384 10.0834 6.09633 10.3361 6.09633C10.5888 6.09633 10.8354 6.17384 11.0426 6.31839C11.2498 6.46293 11.4077 6.66757 11.495 6.90469L12.9782 10.909L16.9825 12.3829C17.2207 12.4696 17.4261 12.6281 17.5703 12.8365C17.7145 13.045 17.7905 13.293 17.7877 13.5465ZM13.4437 6.09949L14.6848 6.09949L14.6848 7.34065C14.6848 7.50524 14.7502 7.66308 14.8666 7.77947C14.983 7.89585 15.1408 7.96123 15.3054 7.96123C15.47 7.96123 15.6278 7.89585 15.7442 7.77947C15.8606 7.66308 15.926 7.50524 15.926 7.34065L15.926 6.09949L17.1671 6.09949C17.3317 6.09949 17.4896 6.0341 17.606 5.91772C17.7223 5.80134 17.7877 5.64349 17.7877 5.47891C17.7877 5.31432 17.7223 5.15647 17.606 5.04009C17.4896 4.92371 17.3317 4.85833 17.1671 4.85833L15.926 4.85833L15.926 3.61716C15.926 3.45257 15.8606 3.29473 15.7442 3.17835C15.6278 3.06196 15.47 2.99658 15.3054 2.99658C15.1408 2.99658 14.983 3.06196 14.8666 3.17835C14.7502 3.29473 14.6848 3.45257 14.6848 3.61716L14.6848 4.85833L13.4437 4.85833C13.2791 4.85833 13.1212 4.92371 13.0048 5.04009C12.8885 5.15647 12.8231 5.31432 12.8231 5.47891C12.8231 5.64349 12.8885 5.80134 13.0048 5.91772C13.1212 6.0341 13.2791 6.09949 13.4437 6.09949ZM20.27 8.58181L19.6495 8.58181L19.6495 7.96123C19.6495 7.79664 19.5841 7.63879 19.4677 7.52241C19.3513 7.40603 19.1935 7.34065 19.0289 7.34065C18.8643 7.34065 18.7064 7.40603 18.5901 7.52241C18.4737 7.63879 18.4083 7.79664 18.4083 7.96123L18.4083 8.58181L17.7877 8.58181C17.6231 8.58181 17.4653 8.64719 17.3489 8.76357C17.2325 8.87996 17.1671 9.0378 17.1671 9.20239C17.1671 9.36698 17.2325 9.52483 17.3489 9.64121C17.4653 9.75759 17.6231 9.82297 17.7877 9.82297L18.4083 9.82297L18.4083 10.4436C18.4083 10.6081 18.4737 10.766 18.5901 10.8824C18.7064 10.9988 18.8643 11.0641 19.0289 11.0641C19.1935 11.0641 19.3513 10.9988 19.4677 10.8824C19.5841 10.766 19.6495 10.6081 19.6495 10.4436L19.6495 9.82297L20.27 9.82297C20.4346 9.82297 20.5925 9.75759 20.7089 9.64121C20.8252 9.52483 20.8906 9.36698 20.8906 9.20239C20.8906 9.0378 20.8252 8.87996 20.7089 8.76357C20.5925 8.64719 20.4346 8.58181 20.27 8.58181Z" fill="currentColor" fill-rule="nonzero" />
+</svg>

package/src/components/icon/new-icons/start.svg

@@ -0,0 +1,27 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32.000000" height="32.000000" fill="none" clip-path="url(#clipPath_0)" customFrame="url(#clipPath_0)">
+	<defs>
+		<clipPath id="clipPath_0">
+			<rect width="32.000000" height="32.000000" x="0.000000" y="0.000000" rx="6.153846" fill="rgb(255,255,255)" />
+		</clipPath>
+	</defs>
+	<rect id="start" width="32.000000" height="32.000000" x="0.000000" y="0.000000" rx="6.153846" />
+	<path id="Vector" d="M22.8126 9.55948C22.7556 9.49796 22.6869 9.44902 22.6108 9.41564C22.5348 9.38226 22.4529 9.36515 22.3701 9.36533L22.3653 9.36533C22.1623 9.40866 21.9797 9.48171 21.8173 9.58448L21.8246 9.58031C21.5497 9.72252 21.2585 9.88194 20.9511 10.0586C20.617 10.2472 20.2663 10.4031 19.9038 10.5244L19.8592 10.5377C19.4846 10.674 19.0908 10.7466 18.6934 10.7527L18.6901 10.7527L18.6495 10.7535C18.3467 10.7535 18.0602 10.6819 17.8052 10.5535L17.8166 10.5585C17.1534 10.2247 16.4688 9.93765 15.7676 9.69946L15.6425 9.66197C15.0154 9.46353 14.3626 9.3638 13.7063 9.36617L13.6536 9.36617L13.656 9.36617C12.1713 9.43417 10.7233 9.86189 9.43046 10.6144L9.47673 10.5894C9.152 10.7543 8.92307 10.8818 8.77369 10.976L8.62513 9.85861C8.87777 9.63392 9.05479 9.33306 9.13092 8.99897C9.20706 8.66488 9.17842 8.31464 9.04909 7.99825C8.91976 7.68186 8.69635 7.41549 8.41076 7.23717C8.12516 7.05885 7.79198 6.97769 7.45877 7.00527C7.12556 7.03286 6.80936 7.16778 6.55531 7.39078C6.30125 7.61378 6.12233 7.91345 6.04407 8.24703C5.96582 8.5806 5.99224 8.93102 6.11957 9.24827C6.24689 9.56551 6.4686 9.83337 6.75306 10.0136L6.75955 10.0178L8.90277 26.1701C8.96691 26.6409 9.35658 26.9992 9.82744 27C9.8729 27 9.91837 26.9969 9.9622 26.9908L9.95733 26.9917C10.0798 26.9752 10.1979 26.934 10.3048 26.8704C10.4117 26.8068 10.5052 26.7222 10.5801 26.6213C10.655 26.5205 10.7096 26.4054 10.741 26.2828C10.7723 26.1602 10.7797 26.0324 10.7627 25.9068L10.7635 25.9118L9.90132 19.42C11.1393 18.7113 12.5183 18.3013 13.9337 18.221L13.9588 18.2202L13.9661 18.2202C14.4686 18.2202 14.9533 18.3018 15.4063 18.4535L15.373 18.4443C15.7821 18.5697 16.1772 18.739 16.5518 18.9492L16.5201 18.9326C16.8238 19.1084 17.1793 19.2734 17.5495 19.4067L17.5966 19.4217C17.9611 19.5617 18.3825 19.6433 18.8217 19.6467L18.8233 19.6467C20.1328 19.5616 21.4021 19.1488 22.5203 18.4443L22.4854 18.4651C22.6348 18.3901 22.7647 18.2965 22.8751 18.1843C22.9647 18.0745 23.0089 17.9331 22.9985 17.7902L22.9985 17.7919L22.9985 10.0136C22.9988 9.92914 22.9824 9.84551 22.9503 9.76774C22.9182 9.68998 22.8711 9.6197 22.8118 9.56115L22.8126 9.55948Z" opacity="0" fill="currentColor" fill-rule="nonzero" />
+	<path id="Vector" d="M9.26667 17.1765L9.26667 23.8823C9.26667 24.199 9.15787 24.4646 8.94027 24.6792C8.72267 24.8938 8.45369 25.0007 8.13333 25C7.81298 24.9993 7.544 24.892 7.3264 24.6781C7.1088 24.4643 7 24.199 7 23.8823L7 7.11765C7 6.80098 7.1088 6.53573 7.3264 6.32188C7.544 6.10804 7.81298 6.00075 8.13333 6L16.265 6C16.5294 6 16.7656 6.08382 16.9733 6.25147C17.1811 6.41912 17.3133 6.63333 17.37 6.89412L17.6533 8.23529L22.8667 8.23529C23.1878 8.23529 23.4571 8.34259 23.6747 8.55718C23.8923 8.77176 24.0008 9.03702 24 9.35294L24 18.2941C24 18.6108 23.8912 18.8764 23.6736 19.091C23.456 19.3056 23.187 19.4125 22.8667 19.4118L17.0017 19.4118C16.7372 19.4118 16.5011 19.3279 16.2933 19.1603C16.0856 18.9926 15.9533 18.7784 15.8967 18.5176L15.6133 17.1765L9.26667 17.1765Z" opacity="0" fill="currentColor" fill-rule="nonzero" />
+	<path id="Vector" d="M16.1098 10.0207L26.7746 13.7236C27.0751 13.8338 27.0751 14.2764 26.7746 14.3866L25.0518 14.9672L25.0518 16.957C25.2158 17.0403 25.3524 17.2061 25.3524 17.3987L25.3524 18.145C25.3524 18.3108 25.2699 18.4487 25.1334 18.5321L25.5164 19.3608C25.0518 19.6099 24.3957 19.6099 23.9302 19.3608L24.2858 18.5321C24.1767 18.4487 24.0942 18.3108 24.0942 18.145L24.0942 17.3987C24.0942 17.2052 24.2033 17.0394 24.3673 16.957L24.3673 15.2162L16.1092 18.0896C16.0267 18.1173 15.9726 18.1173 15.8902 18.0896L5.22544 14.3867C4.92485 14.2765 4.92485 13.8339 5.22544 13.7237L15.8902 10.0208C15.9726 9.99306 16.0267 9.99306 16.1092 10.0208L16.1098 10.0207ZM22.3172 16.6247L22.3172 21.0729C18.1066 23.6424 13.8948 23.6424 9.68414 21.0729L9.68414 16.6247L15.6725 18.697C15.8915 18.7803 16.1097 18.7803 16.3287 18.697L22.3172 16.6247Z" opacity="0" fill="currentColor" fill-rule="evenodd" />
+	<g id="Group">
+		<g id="Group">
+			<path id="Vector" d="M16 6C10.4842 6 6 10.4842 6 16C6 21.5158 10.4842 26 16 26C21.5158 26 26 21.5158 26 16C26 10.4842 21.5158 6 16 6ZM20.0421 12.8421L16.7789 20.9895C16.5474 21.6 15.6632 21.5368 15.4947 20.9053L14.6737 17.7684C14.6105 17.5368 14.4211 17.3474 14.1895 17.2842L11.0526 16.4632C10.4211 16.2947 10.3789 15.4316 10.9684 15.1789L19.1579 11.9579C19.7053 11.7474 20.2526 12.2947 20.0421 12.8421Z" fill="currentColor" fill-rule="nonzero" />
+		</g>
+	</g>
+	<g id="Group" opacity="0">
+		<path id="Vector" d="M24 8L21 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+		<path id="Vector" d="M0 0L4 0" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="matrix(0,1,-1,0,17,6)" />
+		<path id="Vector" d="M17 8L6 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+		<path id="Vector" d="M10 15L6 15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+		<path id="Vector" d="M0 0L4 0" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="matrix(0,1,-1,0,14,13)" />
+		<path id="Vector" d="M25 15L14 15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+		<path id="Vector" d="M24 22L21 22" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+		<path id="Vector" d="M0 0L4 0" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="matrix(0,1,-1,0,17,20)" />
+		<path id="Vector" d="M17 22L6 22" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+	</g>
+</svg>

package/src/components/panels/Panel.vue

@@ -40,30 +40,44 @@
     <div v-show="!collapsed" class="b-panel-body">
       <slot></slot>
     </div>
+
+    <template v-if="!isMobile">
+      <itf-popover
+        v-for="step of popoversToRender"
+        :key="step.name"
+        :ref="`popover-${step.name}`"
+        :visible="step.isSequence ? true : step.visible"
+        :locator="step.locator"
+        :is-activator-highlighted="step.isActivatorHighlighted"
+        :trigger="step.isSequence ? 'manual' : 'click'"
+        :placement="step.placement || 'bottom'"
+        custom-class="onboarding-popover"
+      >
+        <div>
+          <div v-if="step.title" class="d-flex align-items-center gap-2 px-3 py-2 border-bottom border-secondary h6 mb-0">
+            <itf-icon v-if="step.titleIcon" new :name="step.titleIcon" />
+            {{ step.title }}
+          </div>
+          <div class="d-flex flex-column gap-3 p-3">
+            <div v-if="step.html" v-html="step.html" />
+            <div v-else-if="step.text">{{ step.text }}</div>
+            <div class="d-flex justify-content-between align-items-center">
+              <div>
+                <div v-if="step.isSequence && !step.isOutOfCount" class="py-1 px-2 rounded-3 text-white" style="background: #5981C0">
+                  {{ currentOnboardingStepIndex + 1 }} <span class="opacity-50">з {{ sequenceOnboardingStepsCount }}</span>
+                </div>
+              </div>
+              <itf-button small secondary @click="onboardingStepProgress(step)">
+                {{ $t('components.iveGotIt') }}
+              </itf-button>
+            </div>
+          </div>
+        </div>
+      </itf-popover>
+    </template>
   </div>
 </template>
 <style lang="scss">
-@keyframes bellRing {
-  0% {
-    transform: rotate(0deg);
-  }
-  10% {
-    transform: rotate(30deg);
-  }
-  20% {
-    transform: rotate(0deg);
-  }
-  30% {
-    transform: rotate(30deg);
-  }
-  40% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-}
-
 .b-panel {
   --b-panel-bg: var(--bs-body-bg);
   --b-panel-color: var(--bs-body-color);
@@ -165,14 +179,16 @@
 }
 </style>
 <script>
-import { Vue, Prop, Component } from 'vue-property-decorator';
+import { Vue, Prop, Component, Watch } from 'vue-property-decorator';
 import itfIcon from '@itfin/components/src/components/icon/Icon';
 import itfButton from '@itfin/components/src/components/button/Button.vue';
+import itfPopover from '@itfin/components/src/components/popover/Popover';
 
 export default @Component({
   components: {
     itfIcon,
-    itfButton
+    itfButton,
+    itfPopover,
   },
   directives: {
   },
@@ -195,6 +211,50 @@ class Panel extends Vue {
   @Prop(Boolean) animate;
   @Prop(Boolean) nocard;
 
+  onboardingSteps = [];
+  currentOnboardingStepIndex = 0;
+
+  @Watch('panel.inAppOnboarding', { deep: true })
+  onOnboardingDataChange() {
+    this.initOnboarding();
+    this.rebuildOnboardingPopovers(0);
+  }
+
+  @Watch('currentSequenceOnboardingStep', { deep: true })
+  onCurrentStepChange() {
+    this.$emit('onboarding-step-viewed', this.currentSequenceOnboardingStep);
+  }
+
+  mounted() {
+    this.initOnboarding();
+  }
+
+  get isMobile() {
+    return window.matchMedia('(max-width: 768px)').matches;
+  }
+
+  get sequenceOnboardingSteps() {
+    return this.onboardingSteps?.filter(s => s.isSequence) ?? [];
+  }
+
+  get staticOnboardingSteps() {
+    return this.onboardingSteps?.filter(s => !s.isSequence) ?? [];
+  }
+
+  get currentSequenceOnboardingStep() {
+    return this.sequenceOnboardingSteps?.[this.currentOnboardingStepIndex];
+  }
+
+  get popoversToRender() {
+    const list = [...this.staticOnboardingSteps.filter(s => !s.isFinished)];
+    if (this.currentSequenceOnboardingStep) list.push(this.currentSequenceOnboardingStep);
+    return list;
+  }
+
+  get sequenceOnboardingStepsCount() {
+    return this.sequenceOnboardingSteps.filter(s => !s.isOutOfCount).length;
+  }
+
   openPanel(...args) {
     this.$emit('open', args);
   }
@@ -214,5 +274,32 @@ class Panel extends Vue {
   closePanel() {
     this.$emit('close');
   }
+
+  initOnboarding() {
+    this.onboardingSteps = this.panel?.inAppOnboarding?.steps ?? [];
+    const firstUnfinishedIndex = this.sequenceOnboardingSteps.findIndex(s => !s.isFinished);
+    this.currentOnboardingStepIndex = firstUnfinishedIndex === -1 ? this.sequenceOnboardingSteps.length : firstUnfinishedIndex;
+  }
+
+  rebuildOnboardingPopovers(refreshDelay) {
+    this.popoversToRender.forEach(step => {
+      const popoverRef = this.$refs[`popover-${step.name}`];
+      if (popoverRef?.[0]) popoverRef[0].refresh(refreshDelay);
+    });
+  }
+
+  onboardingStepProgress(step) {
+    const popoverRef = this.$refs[`popover-${step.name}`];
+    if (popoverRef?.[0]) popoverRef[0].hide();
+
+    if (step.isSequence) {
+      const nextUnfinishedIndex = this.sequenceOnboardingSteps.findIndex((s, index) => {
+        return index > this.currentOnboardingStepIndex && !s.isFinished;
+      });
+      this.currentOnboardingStepIndex = nextUnfinishedIndex === -1 ? this.sequenceOnboardingSteps.length : nextUnfinishedIndex;
+    }
+
+    this.$emit('onboarding-progress', step);
+  }
 }
 </script>

package/src/components/panels/PanelList.vue

@@ -10,6 +10,7 @@
       <template v-for="(panel, n) of panelsStack">
         <panel
           :key="n"
+          :ref="`panel-${panel.id}`"
           :index="n"
           :panel="panel"
           :title="panel.title"
@@ -27,6 +28,8 @@
           @collapse="collapsePanel(panel)"
           @close="closePanel(panel)"
           @open-menu="$emit('open-menu', panel.type, panel.payload)"
+          @onboarding-progress="$emit('onboarding-progress', $event)"
+          @onboarding-step-viewed="$emit('onboarding-step-viewed', $event)"
         >
           <template #before-header>
             <slot name="before-header" :panel="panel" :index="n" :payload="panel.payload"></slot>
@@ -163,7 +166,7 @@ $double-an-time: $an-time * 2;
 //}
 </style>
 <script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon.vue';
 import Panel from './Panel.vue';
 import {hashToStack, stackToHash} from "@itfin/components/src/components/panels/helpers";
@@ -223,6 +226,17 @@ export default class PanelList extends Vue {
 
   nextId:number = 0;
 
+  @Watch('panels', { deep: true })
+  onPanelsPropChanged(newPanels: Record<string, Component>) {
+    this.panelsStack.forEach(stackedPanel => {
+      const newPanel = newPanels[stackedPanel.type];
+      if (newPanel && typeof newPanel.inAppOnboarding === 'function') {
+        const updatedOnboarding = newPanel.inAppOnboarding(this.$t.bind(this));
+        stackedPanel.inAppOnboarding = updatedOnboarding;
+      }
+    });
+  }
+
   created() {
     setRootPanelList(this);
     if (this.firstPanel) {
@@ -307,6 +321,7 @@ export default class PanelList extends Vue {
       isCollapsed: false,
       isCloseable: true,
       __events: {},
+      inAppOnboarding: panel.inAppOnboarding ? panel.inAppOnboarding(this.$t.bind(this)) : null,
     };
     if (!this.panelsStack.length || openIndex === 0) {
       newPanel.isCloseable = false;
@@ -369,6 +384,10 @@ export default class PanelList extends Vue {
           newPanel.payload = value;
           this.setPanelHash();
         }
+        newPanel.rebuildAllOnboardingPopovers = (refreshDelay?: number) => this.rebuildAllOnboardingPopovers(refreshDelay);
+        newPanel.rebuildPanelOnboardingPopovers = (panelId: string | number, refreshDelay?: number) => {
+          this.rebuildPanelOnboardingPopovers(panelId, refreshDelay);
+        }
         newStack.push(newPanel);
         this.panelsStack = newStack;
         this.ensureOnlyTwoOpenPanels(newPanel.id);
@@ -390,6 +409,7 @@ export default class PanelList extends Vue {
   async openPanel(type: string, payload: any, openIndex?: number) {
     await this.internalOpenPanel(type, payload, openIndex);
     this.setPanelHash();
+    if(openIndex) this.$nextTick(() => { this.rebuildAllOnboardingPopovers() });
   }
 
   emitEvent(event: string, ...args: any[]) {
@@ -418,6 +438,7 @@ export default class PanelList extends Vue {
     this.setPanelHash();
     this.emitEvent('panels.closed', panel);
     this.emitEvent('panels.changed', this.panelsStack);
+    this.$nextTick(() => { this.rebuildAllOnboardingPopovers() });
   }
 
   fullsizePanel(panel: IPanel) {
@@ -428,6 +449,7 @@ export default class PanelList extends Vue {
     }
     this.panelsStack = newStack;
     this.setPanelHash();
+    this.$nextTick(() => { this.rebuildAllOnboardingPopovers() });
   }
 
   get isFullSize() {
@@ -441,6 +463,7 @@ export default class PanelList extends Vue {
     this.panelsStack = newStack;
     this.ensureOnlyTwoOpenPanels(panel.id);
     this.setPanelHash();
+    this.$nextTick(() => { this.rebuildAllOnboardingPopovers() });
   }
 
   collapsePanel(panel: IPanel) {
@@ -455,6 +478,7 @@ export default class PanelList extends Vue {
     this.panelsStack = newStack;
     this.ensureOnlyTwoOpenPanels(panel.id);
     this.setPanelHash();
+    this.$nextTick(() => { this.rebuildAllOnboardingPopovers() });
   }
 
   getPanels(type) {
@@ -521,5 +545,16 @@ export default class PanelList extends Vue {
       element.classList.add('animate');
     }
   }
+
+  rebuildPanelOnboardingPopovers(panelId: string | number, refreshDelay?: number) {
+    const panelRef = this.$refs[`panel-${panelId}`];
+    if (panelRef?.[0]) panelRef[0].rebuildOnboardingPopovers(refreshDelay);
+  }
+
+  rebuildAllOnboardingPopovers(refreshDelay?: number) {
+    this.panelsStack.forEach((panel) => {
+      this.rebuildPanelOnboardingPopovers(panel.id, refreshDelay);
+    });
+  }
 }
 </script>

package/src/components/popover/Popover.vue

@@ -24,22 +24,26 @@ export default @Component({
 class itfPopover extends Vue {
   @PropSync('visible') value;
 
-  @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top'].includes(value) }) placement;
+  @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top', 'auto'].includes(value) }) placement;
 
   @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;
 
   @Prop({ type: String, default: '' }) customClass;
   @Prop({ type: Boolean }) appendToBody;
   @Prop({ type: Boolean }) appendToContext;
+  @Prop({ type: String }) locator;
+  @Prop({ type: Boolean, default: false }) isActivatorHighlighted;
 
   modalId = '';
-
   modalEl = null;
+  targetEl = null;
 
   ignoreUpdate = false; // потрібно щоб не оновлювалось visible декілька разів, бо буде баг коли вікно відкривається і одразу закривається
 
+  initTimeout = null;
+
   beforeDestroy() {
-    this.hide();
+    this.destroy();
   }
 
   @Watch('value')
@@ -48,9 +52,26 @@ class itfPopover extends Vue {
       return;
     }
     if (newValue) {
-      this.modalEl.show();
+      this.modalEl?.show();
     } else {
-      this.modalEl.hide();
+      this.modalEl?.hide();
+    }
+  }
+
+  @Watch('locator')
+  onLocatorChanged(newValue, oldValue) {
+    if (newValue !== oldValue && newValue && this.modalEl) {
+      this.initPopover();
+    }
+  }
+
+  @Watch('isActivatorHighlighted')
+  onIsActivatorHighlightedChanged(newValue, oldValue) {
+    if (!this.targetEl) return;
+    if (newValue) {
+      this.targetEl.classList.add('pulsing');
+    } else {
+      this.targetEl.classList.remove('pulsing');
     }
   }
 
@@ -60,22 +81,62 @@ class itfPopover extends Vue {
   }
 
   async mounted() {
+    this.refresh(100);
+  }
+
+  destroy() {
+    if (this.initTimeout) {
+      clearTimeout(this.initTimeout);
+      this.initTimeout = null;
+    }
+    if (this.modalEl) {
+      this.modalEl.dispose();
+      this.modalEl = null;
+    }
+    if (this.targetEl) this.resetTargetEl();
+  }
+
+  refresh(delay = 300) {
+    this.destroy();
+
+    if (this.initTimeout) clearTimeout(this.initTimeout);
+    this.initTimeout = setTimeout(() => this.initPopover(), delay);
+  }
+
+  async initPopover() {
     if (typeof window === 'undefined') {
       return;
     }
-    const el = this.$refs.popover;
+
+    // Remove listeners from the previous target element before finding the new one
+    if (this.modalEl) this.destroy();
+
+    // Determine target
+    if (this.locator) {
+      this.targetEl = document.querySelector(this.locator);
+      if (!this.targetEl) return;
+    } else {
+      this.targetEl = this.$el;
+    }
+
+    if (this.isActivatorHighlighted) this.targetEl.classList.add('pulsing');
+
+    const el = this.$refs.popover || "";
     const { default: Popover } = await import('bootstrap/js/src/popover');
 
+    if (this._isDestroyed) return;
+
     let context = document.body;
-    if (this.appendToContext && this.$el instanceof Node && this.$el.parentNode) {
-      context = this.$el.closest('.itf-append-context') || document.body;
-      this.$el.parentNode.removeChild(this.$el);
-      context.appendChild(this.$el); // should append only to body
-    } else if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el);
-      context.appendChild(this.$el); // should append only to body
+    if (this.appendToContext && this.targetEl instanceof Node && this.targetEl.parentNode) {
+      context = this.targetEl.closest('.itf-append-context') || document.body;
+      this.targetEl.parentNode.removeChild(this.targetEl);
+      context.appendChild(this.targetEl); // should append only to body
+    } else if (this.appendToBody && this.targetEl instanceof Node && this.targetEl.parentNode) {
+      this.targetEl.parentNode.removeChild(this.targetEl);
+      context.appendChild(this.targetEl); // should append only to body
     }
-    this.modalEl = new Popover(this.$el, {
+
+    this.modalEl = new Popover(this.targetEl, {
       content: el,
       container: context,
       sanitize: false,
@@ -84,26 +145,38 @@ class itfPopover extends Vue {
       placement: this.placement,
       trigger: this.trigger,
     });
+
     this.onVisibleChanged(this.value);
-    this.$el.addEventListener('shown.bs.popover', () => {
-      this.ignoreUpdate = true;
-      this.value = true;
-      document.body.addEventListener('click', this.clickOutside);
-      this.$nextTick(() => this.ignoreUpdate = false);
-    });
-    this.$el.addEventListener('hidden.bs.popover', () => {
-      this.ignoreUpdate = true;
-      this.value = false;
-      document.body.removeEventListener('click', this.clickOutside);
-      this.$nextTick(() => this.ignoreUpdate = false);
-    });
+    this.targetEl.addEventListener('shown.bs.popover', this.handleShown);
+    this.targetEl.addEventListener('hidden.bs.popover', this.handleHidden);
+  }
+
+  resetTargetEl() {
+    this.targetEl.removeEventListener('shown.bs.popover', this.handleShown);
+    this.targetEl.removeEventListener('hidden.bs.popover', this.handleHidden);
+    this.targetEl.classList.remove('pulsing');
+    this.targetEl = null;
+  }
+
+  handleShown() {
+    this.ignoreUpdate = true;
+    this.value = true;
+    document.body.addEventListener('click', this.clickOutside);
+    this.$nextTick(() => this.ignoreUpdate = false);
+  }
+
+  handleHidden() {
+    this.ignoreUpdate = true;
+    this.value = false;
+    document.body.removeEventListener('click', this.clickOutside);
+    this.$nextTick(() => this.ignoreUpdate = false);
   }
 
   clickOutside(e) {
     if (this.trigger !== 'click' || !e.target) {
       return;
     }
-    if (this.$el !== e.target && e.target.closest('.itf-popover') !== this.$refs.popover) {
+    if (this.targetEl !== e.target && e.target.closest('.itf-popover') !== this.$refs.popover) {
       this.hide();
     }
   }
@@ -117,7 +190,7 @@ class itfPopover extends Vue {
   hide() {
     if (this.modalEl) {
       // треба затримка щоб попав не показався знову через отримання фокусу
-      setTimeout(() => this.modalEl.hide(), 10);
+      setTimeout(() => this.modalEl?.hide(), 10);
     }
   }
 }

package/src/components/table/TableHeader.vue

@@ -4,7 +4,7 @@
     <div ref="container" class="table-row-template">
       <div accept-group="items" class="table-view-body-space" v-dropzone="{ payload: 0 }"></div>
       <div class="shadow-area"></div>
-      <div class="table-view-header-value reserved sticky">
+      <div class="table-view-header-value reserved sticky" data-test="table-header-checkbox">
         <itf-checkbox v-if="indicatorType === 'checkbox' && visibleHeader && !noSelectAll" ungrouped value="all" v-model="selectAll" ref="selectAll" />
       </div>
 

package/src/locales/en.js

@@ -154,4 +154,5 @@ module.exports = {
     value: 'Value',
   },
   passwordValidation: 'Password should contain at least 8 characters, including uppercase letters, lowercase letters, numbers, and special characters (e.g. @, $, !, %, *, ?, &)',
+  iveGotIt: 'I\'ve got it',
 };

package/src/locales/pl.js

@@ -154,4 +154,5 @@ module.exports = {
     value: 'Wartość',
   },
   passwordValidation: 'Hasło powinno zawierać co najmniej 8 znaków, w tym wielkie i małe litery, cyfry oraz znaki specjalne (np. @, $, !, %, *, ?, &)',
+  iveGotIt: 'Rozumiem',
 };

package/src/locales/uk.js

@@ -155,4 +155,5 @@ module.exports = {
     value: 'Значення',
   },
   passwordValidation: 'Пароль має містити принаймні 8 символів, включаючи великі літери, малі літери, цифри та спеціальні символи (@, $, !, %, *, ?, &)',
+  iveGotIt: 'Зрозуміло',
 };