fix import errors, onclickoutside for cv component

Author: jeanbfly

@libs/users-front/package.json

@@ -62,6 +62,8 @@
     "decorator-transforms": "catalog:",
     "ember-auto-import": "2.12.0",
     "ember-cli-page-object": "catalog:",
+    "ember-click-outside": "^6.1.1",
+    "ember-click-outside-modifier": "^4.1.2",
     "ember-immer-changeset": "catalog:",
     "ember-intl": "catalog:",
     "ember-simple-auth": "catalog:",

@libs/users-front/src/components/curriculums/curriculum-item.gts

@@ -62,7 +62,7 @@ class CurriculumItem extends Component<CurriculumItemSignature> {
             />
             <span class="text-sm text-gray-500">
                 {{t "curriculums.view.lastModified"}} 
-                {{relativeTime @curriculum.lastModified}}
+                {{relativeTime (String @curriculum.lastModified)}}
             </span>
         </div>
     </template>

@libs/users-front/src/components/curriculums/curriculum-more-actions.gts

@@ -5,6 +5,7 @@ import { tracked } from '@glimmer/tracking';
 import t from 'ember-intl/helpers/t';
 import type RouterService from '@ember/routing/router-service';
 import { service } from '@ember/service';
+import { clickOutside } from 'ember-click-outside-modifier';
 
 import EditIcon from '#src/assets/icons/edit.gts';
 import RenameIcon from '#src/assets/icons/rename.gts';
@@ -24,39 +25,16 @@ class CurriculumMoreActions extends Component<CurriculumMoreActionsSignature> {
 
     @tracked isOpen = false;
 
-    private handleClickOutside = (event: MouseEvent) => {
-        const target = event.target as HTMLElement;
-        const popup = document.querySelector('.curriculum-popup');
-
-        if (popup && !popup.contains(target)) {
-        this.isOpen = false;
-        }
-    };
-
     @action
-    toggle(event: MouseEvent) {
-        event.stopPropagation();
+    toggle() {
         this.isOpen = !this.isOpen;
-
-        if (this.isOpen) {
-            document.addEventListener('click', this.handleClickOutside);
-        } else {
-            document.removeEventListener('click', this.handleClickOutside);
-        }
-    }
-
-    willDestroy() {
-        super.willDestroy();
-        document.removeEventListener('click', this.handleClickOutside);
     }
 
     @action
-        rename(event: MouseEvent) {
+    rename(event: MouseEvent) {
         event.stopPropagation();
 
         this.isOpen = false;
-        document.removeEventListener('click', this.handleClickOutside);
-
         this.args.onRename?.();
     }
 
@@ -75,7 +53,7 @@ class CurriculumMoreActions extends Component<CurriculumMoreActionsSignature> {
         <button
             type="button"
             class="cursor-pointer p-2 rounded-full w-8 h-8 flex items-center justify-center bg-white shadow-lg hover:border-blue-500 hover:bg-blue-50 hover:border transition-colors duration-200"
-            {{on "click" this.toggle}}
+            {{clickOutside this.close}} {{on "click" this.toggle}}
         >
             <span class="text-lg">⋮</span>
         </button>

@libs/users-front/src/helpers/relative-time.ts

@@ -35,7 +35,7 @@ export default class RelativeTimeHelper extends Helper {
     }
 
     const formatter = new Intl.RelativeTimeFormat(
-      this.intl.locales,
+      this.intl.primaryLocale,
       { numeric: 'auto' }
     );