aloha-vue 2.74.0 → 2.75.0

package/src/ui/ASelect/ASelect.js

@@ -1,68 +1,75 @@
-import {
-  computed,
-  h,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  Teleport,
-  toRef,
-  watch,
-} from "vue";
-import {
-  ACheckboxRadioGroups,
-  ACloak,
-  AElement,
-  AErrorsText,
-  AFormHelpText,
-  AFormLabelDescription,
-  AFormReadonly,
-  AIcon,
-  AInput,
-  AKeyId,
-  ALabel,
-  APlacements,
-  APopupAPI,
-  ATranslation,
-  UiAPI,
-  UiDataFromServerAPI,
-  UIDataGroupAPI,
-  UiDataSortAPI,
-  UiDataWatchEmitAPI,
-  UiDataWithKeyIdAndLabelAPI,
-  UIExcludeRenderAttributesAPI,
-  UiLabelClickEventBusAPI,
-  UiLoadingAPI,
-  UiSearchAPI,
-  UiStyleHideAPI,
-} from "../../index";
-
-import ASelectElement from "./ASelectElement/ASelectElement";
-import ASelectLabelElement from "./ASelectLabelElement/ASelectLabelElement";
-import ASelectValueCloseable from "./ASelectValueCloseable/ASelectValueCloseable";
-
-import AttributesAPI from "./compositionAPI/AttributesAPI";
-import DisabledAPI from "./compositionAPI/DisabledAPI";
-import DividerAPI from "./compositionAPI/DividerAPI";
-import ExclusiveOptionsAPI from "./compositionAPI/ExclusiveOptionsAPI";
-import ModeAPI from "./compositionAPI/ModeAPI";
-import ModelAPI from "./compositionAPI/ModelAPI";
-import ModelChangeAPI from "./compositionAPI/ModelChangeAPI";
-import PopperContainerAPI from "../../ATooltip/compositionAPI/PopperContainerAPI";
-import SelectedFirstAPI from "./compositionAPI/SelectedFirstAPI";
-import SelectedTitleAPI from "./compositionAPI/SelectedTitleAPI";
-import SelectedVisibleAPI from "./compositionAPI/SelectedVisibleAPI";
-import ToggleAPI from "./compositionAPI/ToggleAPI";
-
-import CheckLg from "aloha-svg/dist/js/bootstrap/CheckLg";
-import Search from "aloha-svg/dist/js/bootstrap/Search";
-import XLg from "aloha-svg/dist/js/bootstrap/XLg";
-import {
-  ASelectPluginOptions,
-} from "../../plugins/ASelectPlugin";
-import {
-  take,
-  uniqueId,
-} from "lodash-es";
+import {
+  computed,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  Teleport,
+  toRef,
+  watch,
+} from "vue";
+import {
+  ACheckboxRadioGroups,
+  ACloak,
+  AElement,
+  AErrorsText,
+  AFormHelpText,
+  AFormLabelDescription,
+  AFormReadonly,
+  AIcon,
+  AInput,
+  AKeyId,
+  ALabel,
+  APlacements,
+  APopupAPI,
+  ATranslation,
+  UiAPI,
+  UiDataFromServerAPI,
+  UIDataGroupAPI,
+  UiDataSortAPI,
+  UiDataWatchEmitAPI,
+  UiDataWithKeyIdAndLabelAPI,
+  UIExcludeRenderAttributesAPI,
+  UiLabelClickEventBusAPI,
+  UiLoadingAPI,
+  UiSearchAPI,
+  UiStyleHideAPI,
+} from "../../index";
+
+import ASelectElement from "./ASelectElement/ASelectElement";
+import ASelectLabelElement from "./ASelectLabelElement/ASelectLabelElement";
+import ASelectValueCloseable from "./ASelectValueCloseable/ASelectValueCloseable";
+
+import AttributesAPI from "./compositionAPI/AttributesAPI";
+import DisabledAPI from "./compositionAPI/DisabledAPI";
+import DividerAPI from "./compositionAPI/DividerAPI";
+import ExclusiveOptionsAPI from "./compositionAPI/ExclusiveOptionsAPI";
+import ModeAPI from "./compositionAPI/ModeAPI";
+import ModelAPI from "./compositionAPI/ModelAPI";
+import ModelChangeAPI from "./compositionAPI/ModelChangeAPI";
+import PopperContainerAPI from "../../ATooltip/compositionAPI/PopperContainerAPI";
+import SelectedFirstAPI from "./compositionAPI/SelectedFirstAPI";
+import SelectedTitleAPI from "./compositionAPI/SelectedTitleAPI";
+import SelectedVisibleAPI from "./compositionAPI/SelectedVisibleAPI";
+import ToggleAPI from "./compositionAPI/ToggleAPI";
+
+import {
+  ASelectPluginOptions,
+} from "../../plugins/ASelectPlugin";
+import {
+  take,
+  uniqueId,
+} from "lodash-es";
+
+const CheckLg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16">
+  <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
+</svg>`;
+const Search = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
+  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
+</svg>`;
+const XLg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
+  <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
+</svg>`;
 
 export default {
   name: "ASelect",
@@ -122,17 +129,17 @@ export default {
       required: false,
       default: undefined,
     },
-    dataExtra: {
-      type: Array,
-      required: false,
-      default: () => ASelectPluginOptions.propsDefault.dataExtra,
-    },
-    mergeData: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    dependencies: {
+    dataExtra: {
+      type: Array,
+      required: false,
+      default: () => ASelectPluginOptions.propsDefault.dataExtra,
+    },
+    mergeData: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    dependencies: {
       type: [Array, Object],
       required: false,
       default: undefined,
@@ -452,16 +459,16 @@ export default {
       required: false,
       default: undefined,
     },
-    showNotFound: {
-      type: Boolean,
-      required: false,
-      default: () => ASelectPluginOptions.propsDefault.showNotFound,
-    },
-    showSelectedFirst: {
-      type: Boolean,
-      required: false,
-      default: () => ASelectPluginOptions.propsDefault.showSelectedFirst,
-    },
+    showNotFound: {
+      type: Boolean,
+      required: false,
+      default: () => ASelectPluginOptions.propsDefault.showNotFound,
+    },
+    showSelectedFirst: {
+      type: Boolean,
+      required: false,
+      default: () => ASelectPluginOptions.propsDefault.showSelectedFirst,
+    },
     slotName: {
       type: String,
       required: false,
@@ -489,16 +496,16 @@ export default {
       required: false,
       default: () => ASelectPluginOptions.propsDefault.textSelectAll,
     },
-    translateData: {
-      type: Boolean,
-      required: false,
-      default: () => ASelectPluginOptions.propsDefault.translateData,
-    },
-    translateGroup: {
-      type: Boolean,
-      required: false,
-      default: () => ASelectPluginOptions.propsDefault.translateGroup,
-    },
+    translateData: {
+      type: Boolean,
+      required: false,
+      default: () => ASelectPluginOptions.propsDefault.translateData,
+    },
+    translateGroup: {
+      type: Boolean,
+      required: false,
+      default: () => ASelectPluginOptions.propsDefault.translateGroup,
+    },
     type: {
       type: String,
       required: false,
@@ -645,64 +652,64 @@ export default {
       htmlIdLocal,
     });
 
-    const {
-      dataSort,
-    } = UiDataSortAPI(props, {
-      data: dataLocal,
-    });
-
-    const {
-      dataExtraWithoutSelected,
-      dataSelected,
-      dataWithoutSelected,
-      exclusiveOptionWithoutSelected,
-    } = SelectedFirstAPI(props, {
-      data: dataSort,
-      dataExtra: dataExtraLocal,
-      exclusiveOption,
-    });
-
-    const {
-      dataGrouped,
-      groupsForLever,
-      hasKeyGroup,
-      keyGroupArray,
-    } = UIDataGroupAPI(props, {
-      data: dataWithoutSelected,
-    });
-
-    const {
-      dataGrouped: dataExtraGrouped,
-      groupsForLever: groupsForLeverExtra,
-    } = UIDataGroupAPI(props, {
-      data: dataExtraWithoutSelected,
-    });
-
-    const {
-      groupsForLever: groupsForLeverSearch,
-    } = UIDataGroupAPI(props, {
-      data: dataSort,
-    });
-
-    const {
-      groupsForLever: groupsForLeverExtraSearch,
-    } = UIDataGroupAPI(props, {
-      data: dataExtraLocal,
-    });
-
-    const {
-      dataGrouped: dataGroupedAll,
-    } = UIDataGroupAPI(props, {
-      data: dataAll,
-    });
+    const {
+      dataSort,
+    } = UiDataSortAPI(props, {
+      data: dataLocal,
+    });
+
+    const {
+      dataExtraWithoutSelected,
+      dataSelected,
+      dataWithoutSelected,
+      exclusiveOptionWithoutSelected,
+    } = SelectedFirstAPI(props, {
+      data: dataSort,
+      dataExtra: dataExtraLocal,
+      exclusiveOption,
+    });
+
+    const {
+      dataGrouped,
+      groupsForLever,
+      hasKeyGroup,
+      keyGroupArray,
+    } = UIDataGroupAPI(props, {
+      data: dataWithoutSelected,
+    });
 
-    const validDataSort = computed(() => {
-      return dataWithoutSelected.value.filter(item => !item.__invalidEntry__);
-    });
-
-    const invalidDataSort = computed(() => {
-      return dataWithoutSelected.value.filter(item => item.__invalidEntry__);
-    });
+    const {
+      dataGrouped: dataExtraGrouped,
+      groupsForLever: groupsForLeverExtra,
+    } = UIDataGroupAPI(props, {
+      data: dataExtraWithoutSelected,
+    });
+
+    const {
+      groupsForLever: groupsForLeverSearch,
+    } = UIDataGroupAPI(props, {
+      data: dataSort,
+    });
+
+    const {
+      groupsForLever: groupsForLeverExtraSearch,
+    } = UIDataGroupAPI(props, {
+      data: dataExtraLocal,
+    });
+
+    const {
+      dataGrouped: dataGroupedAll,
+    } = UIDataGroupAPI(props, {
+      data: dataAll,
+    });
+
+    const validDataSort = computed(() => {
+      return dataWithoutSelected.value.filter(item => !item.__invalidEntry__);
+    });
+
+    const invalidDataSort = computed(() => {
+      return dataWithoutSelected.value.filter(item => item.__invalidEntry__);
+    });
 
     const {
       dataGrouped: dataGroupedValid,
@@ -724,98 +731,98 @@ export default {
       searchingElements,
       searchingElementsExclusive,
       searchingElementsExtra,
-      searchingGroupsWithSearchInGroup,
+      searchingGroupsWithSearchInGroup,
       searchOutsideOrApi,
       searchOutsideRef,
       updateModelSearch,
       updateModelSearchOutside,
-    } = UiSearchAPI(props, context, {
-      data: dataSort,
-      dataExtra: dataExtraLocal,
-      exclusiveOption,
-      groupsForLever: groupsForLeverSearch,
-      groupsForLeverExtra: groupsForLeverExtraSearch,
+    } = UiSearchAPI(props, context, {
+      data: dataSort,
+      dataExtra: dataExtraLocal,
+      exclusiveOption,
+      groupsForLever: groupsForLeverSearch,
+      groupsForLeverExtra: groupsForLeverExtraSearch,
       hasKeyGroup,
       htmlIdLocal,
       keyGroupArray,
       onSearchInApi,
-      searchApiLocal,
-    });
-
-    const {
-      dataSelectedVisible,
-      searchingElementsSelected,
-      searchingGroupsVisible: searchingGroupsSelected,
-    } = SelectedVisibleAPI({
-      dataSelected,
-      keyGroupArray,
-      searching,
-      searchingElements,
-      searchingElementsExclusive,
-      searchingElementsExtra,
-      searchingGroupsWithSearchInGroup,
-    });
-
-    const dataOptionsWithoutSelected = computed(() => [
-      ...dataExtraWithoutSelected.value,
-      ...dataWithoutSelected.value,
-      exclusiveOptionWithoutSelected.value,
-    ].filter(Boolean));
-
-    const {
-      dataSelectedVisible: dataOptionsWithoutSelectedVisible,
-    } = SelectedVisibleAPI({
-      dataSelected: dataOptionsWithoutSelected,
-      keyGroupArray,
-      searching,
-      searchingElements,
-      searchingElementsExclusive,
-      searchingElementsExtra,
-      searchingGroupsWithSearchInGroup,
-    });
-
-    const {
-      dataSelectedVisible: dataWithoutSelectedVisible,
-    } = SelectedVisibleAPI({
-      dataSelected: dataWithoutSelected,
-      keyGroupArray,
-      searching,
-      searchingElements,
-      searchingElementsExclusive,
-      searchingElementsExtra,
-      searchingGroupsWithSearchInGroup,
-    });
-
-    const {
-      searchingGroupsVisible: searchingGroupsExtraWithoutSelected,
-    } = SelectedVisibleAPI({
-      dataSelected: dataExtraWithoutSelected,
-      keyGroupArray,
-      searching,
-      searchingElements,
-      searchingElementsExclusive,
-      searchingElementsExtra,
-      searchingGroupsWithSearchInGroup,
-    });
-
-    const {
-      searchingGroupsVisible: searchingGroupsValidWithoutSelected,
-    } = SelectedVisibleAPI({
-      dataSelected: validDataSort,
-      keyGroupArray,
-      searching,
-      searchingElements,
-      searchingElementsExclusive,
-      searchingElementsExtra,
-      searchingGroupsWithSearchInGroup,
-    });
-
-    const {
-      dataGrouped: dataSelectedGrouped,
-      groupsForLever: groupsForLeverSelected,
-    } = UIDataGroupAPI(props, {
-      data: dataSelectedVisible,
-    });
+      searchApiLocal,
+    });
+
+    const {
+      dataSelectedVisible,
+      searchingElementsSelected,
+      searchingGroupsVisible: searchingGroupsSelected,
+    } = SelectedVisibleAPI({
+      dataSelected,
+      keyGroupArray,
+      searching,
+      searchingElements,
+      searchingElementsExclusive,
+      searchingElementsExtra,
+      searchingGroupsWithSearchInGroup,
+    });
+
+    const dataOptionsWithoutSelected = computed(() => [
+      ...dataExtraWithoutSelected.value,
+      ...dataWithoutSelected.value,
+      exclusiveOptionWithoutSelected.value,
+    ].filter(Boolean));
+
+    const {
+      dataSelectedVisible: dataOptionsWithoutSelectedVisible,
+    } = SelectedVisibleAPI({
+      dataSelected: dataOptionsWithoutSelected,
+      keyGroupArray,
+      searching,
+      searchingElements,
+      searchingElementsExclusive,
+      searchingElementsExtra,
+      searchingGroupsWithSearchInGroup,
+    });
+
+    const {
+      dataSelectedVisible: dataWithoutSelectedVisible,
+    } = SelectedVisibleAPI({
+      dataSelected: dataWithoutSelected,
+      keyGroupArray,
+      searching,
+      searchingElements,
+      searchingElementsExclusive,
+      searchingElementsExtra,
+      searchingGroupsWithSearchInGroup,
+    });
+
+    const {
+      searchingGroupsVisible: searchingGroupsExtraWithoutSelected,
+    } = SelectedVisibleAPI({
+      dataSelected: dataExtraWithoutSelected,
+      keyGroupArray,
+      searching,
+      searchingElements,
+      searchingElementsExclusive,
+      searchingElementsExtra,
+      searchingGroupsWithSearchInGroup,
+    });
+
+    const {
+      searchingGroupsVisible: searchingGroupsValidWithoutSelected,
+    } = SelectedVisibleAPI({
+      dataSelected: validDataSort,
+      keyGroupArray,
+      searching,
+      searchingElements,
+      searchingElementsExclusive,
+      searchingElementsExtra,
+      searchingGroupsWithSearchInGroup,
+    });
+
+    const {
+      dataGrouped: dataSelectedGrouped,
+      groupsForLever: groupsForLeverSelected,
+    } = UIDataGroupAPI(props, {
+      data: dataSelectedVisible,
+    });
 
     const {
       buttonRef,
@@ -840,7 +847,7 @@ export default {
     } = ModelChangeAPI(props, {
       changeModel,
       dataAll,
-      dataGrouped: dataGroupedAll,
+      dataGrouped: dataGroupedAll,
       dataKeyByKeyIdLocal,
       disabledLocal,
       isMultiselect,
@@ -904,16 +911,16 @@ export default {
       clearModel,
       componentStyleHide,
       containerId,
-      dataExtraLocal,
-      dataExtraGrouped,
-      dataGrouped,
-      dataSelected,
-      dataSelectedGrouped,
-      dataSelectedVisible,
-      dataWithoutSelected,
-      dataWithoutSelectedVisible,
-      dataOptionsWithoutSelectedVisible,
-      dataGroupedValid,
+      dataExtraLocal,
+      dataExtraGrouped,
+      dataGrouped,
+      dataSelected,
+      dataSelectedGrouped,
+      dataSelectedVisible,
+      dataWithoutSelected,
+      dataWithoutSelectedVisible,
+      dataOptionsWithoutSelectedVisible,
+      dataGroupedValid,
       dataKeyByKeyIdLocal,
       dataLocal,
       dataSort,
@@ -923,16 +930,16 @@ export default {
       disabledLocalAttribut,
       errorsId,
       hasErrorIcon,
-      exclusiveDataKeyByKeyIdLocal,
-      exclusiveOption,
-      exclusiveOptionWithoutSelected,
-      groupsForLever,
-      groupsForLeverExtra,
-      groupsForLeverSelected,
+      exclusiveDataKeyByKeyIdLocal,
+      exclusiveOption,
+      exclusiveOptionWithoutSelected,
+      groupsForLever,
+      groupsForLeverExtra,
+      groupsForLeverSelected,
       groupsForLeverValid,
       handleKeydown,
-      hasDataExtra,
-      dataExtraWithoutSelected,
+      hasDataExtra,
+      dataExtraWithoutSelected,
       hasKeyGroup,
       invalidDataSort,
       hasNotElementsExclusiveWithSearch,
@@ -975,12 +982,12 @@ export default {
       searching,
       searchingElements,
       searchingElementsExclusive,
-      searchingElementsExtra,
-      searchingElementsSelected,
-      searchingGroupsExtraWithoutSelected,
-      searchingGroupsSelected,
-      searchingGroupsValidWithoutSelected,
-      searchingGroupsWithSearchInGroup,
+      searchingElementsExtra,
+      searchingElementsSelected,
+      searchingGroupsExtraWithoutSelected,
+      searchingGroupsSelected,
+      searchingGroupsValidWithoutSelected,
+      searchingGroupsWithSearchInGroup,
       searchOutsideOrApi,
       searchOutsideRef,
       selectedTitle,
@@ -1043,11 +1050,11 @@ export default {
         "");
     }
 
-    const hasInvalidEntries = this.invalidDataSort.length > 0;
-    const isDividerBeforeInvalidVisible = !!(
-      this.validDataSort.length ||
-      (this.exclusiveOptionWithoutSelected && !this.dataExtraWithoutSelected.length)
-    );
+    const hasInvalidEntries = this.invalidDataSort.length > 0;
+    const isDividerBeforeInvalidVisible = !!(
+      this.validDataSort.length ||
+      (this.exclusiveOptionWithoutSelected && !this.dataExtraWithoutSelected.length)
+    );
     const renderInvalidEntries = () => {
       if (!hasInvalidEntries) {
         return null;
@@ -1056,7 +1063,7 @@ export default {
       return h("div", {
         class: "a_select__invalid_entries",
       }, [
-        isDividerBeforeInvalidVisible && h("div", {
+        isDividerBeforeInvalidVisible && h("div", {
           class: "a_select__divider",
           ariaHidden: true,
         }),
@@ -1107,11 +1114,11 @@ export default {
           a_form_element__parent_not_empty: this.isModelValue || this.isOpen,
         }],
       }, [
-        this.label && h(ALabel, {
-          id: this.htmlIdLocal,
-          alwaysTranslate: this.alwaysTranslate,
-          extra: this.extra,
-          isLabelFloat: this.isLabelFloat,
+        this.label && h(ALabel, {
+          id: this.htmlIdLocal,
+          alwaysTranslate: this.alwaysTranslate,
+          extra: this.extra,
+          isLabelFloat: this.isLabelFloat,
           label: this.label,
           labelClass: this.labelClass,
           labelScreenReader: this.labelScreenReader,
@@ -1188,10 +1195,10 @@ export default {
                             keyGroupLabelCallback: this.keyGroupLabelCallback,
                             labelNotFound: this.labelNotFound,
                             showNotFound: this.showNotFound,
-                            mode: this.mode,
-                            slotName: this.slotName,
-                            translateGroup: this.translateGroup,
-                            onChangeModelValue: this.onChangeModelValue,
+                            mode: this.mode,
+                            slotName: this.slotName,
+                            translateGroup: this.translateGroup,
+                            onChangeModelValue: this.onChangeModelValue,
                           }, this.$slots);
                         }),
                         this.isModelLengthLimitExceeded && h(ASelectValueCloseable, {
@@ -1201,10 +1208,10 @@ export default {
                           disabled: this.disabledLocal,
                           keyGroup: this.keyGroup,
                           keyGroupLabelCallback: this.keyGroupLabelCallback,
-                          mode: this.mode,
-                          hideDeleteButton: !this.exceededItemsDeletable,
-                          translateGroup: this.translateGroup,
-                          onChangeModelValue: this.deleteExceededItems,
+                          mode: this.mode,
+                          hideDeleteButton: !this.exceededItemsDeletable,
+                          translateGroup: this.translateGroup,
+                          onChangeModelValue: this.deleteExceededItems,
                         }),
                       ]) :
                       h("span", {
@@ -1368,106 +1375,106 @@ export default {
                           tag: "span",
                         }),
                       ]),
-                      (this.isDividerSelectDeselectVisible) && h("div", {
-                        class: "a_select__divider",
-                        ariaHidden: true,
-                      }),
-                      !!this.dataSelectedVisible.length && h("div", {
-                        class: "a_select__selected_first",
-                      }, [
-                        ...(this.hasKeyGroup ?
-                          [h(ACheckboxRadioGroups, {
-                            id: `${ this.htmlIdLocal }_selected_lev_0`,
-                            alwaysTranslate: this.alwaysTranslate,
-                            dataGrouped: this.dataSelectedGrouped,
-                            disabled: this.disabled,
-                            groupsForLever: this.groupsForLeverSelected,
-                            isErrors: this.isErrors,
-                            keyDisabled: this.keyDisabled,
-                            keyDisabledCallback: this.keyDisabledCallback,
-                            levelIndex: 0,
-                            modelSearch: this.modelSearchLowerCase,
-                            modelValue: this.modelValue,
-                            searching: this.searching,
-                            searchingElements: this.searchingElementsSelected,
-                            searchingGroups: this.searchingGroupsSelected,
-                            searchingGroupsWithSearchInGroup: this.searchingGroupsWithSearchInGroup,
-                            searchTextInHtml: this.searchTextInHtml,
-                            slotName: this.slotName,
-                            type: this.type,
-                            onChangeModelValue: this.onChangeModelValue,
-                          }, this.$slots)] :
-                          this.dataSelectedVisible.map((item, itemIndex) => {
-                            return h(ASelectElement, {
-                              key: item[AKeyId],
-                              id: this.htmlIdLocal,
-                              alwaysTranslate: this.alwaysTranslate,
-                              dataItem: item,
-                              disabled: this.disabled,
-                              itemIndex,
-                              keyDisabled: this.keyDisabled,
-                              keyDisabledCallback: this.keyDisabledCallback,
-                              modelSearch: this.modelSearchLowerCase,
-                              modelValue: this.modelValue,
-                              searching: this.searching,
-                              searchingElements: this.searchingElementsSelected,
-                              searchTextInHtml: this.searchTextInHtml,
-                              slotName: this.slotName,
-                              type: this.type,
-                              onChangeModelValue: this.onChangeModelValue,
-                            }, this.$slots);
-                          })),
-                      ]),
-                      (!!this.dataSelectedVisible.length &&
-                        !!this.dataOptionsWithoutSelectedVisible.length) && h("div", {
-                        class: "a_select__divider",
-                        ariaHidden: true,
-                      }),
-                      (this.loadingLocal || this.loadingSearchApi) ?
-                        h(ACloak) :
-                        "",
-                      (this.isMultiselect && this.exclusiveOptionWithoutSelected) && h("div", {}, [
-                        h(ASelectElement, {
-                          key: this.exclusiveOptionValue,
-                          id: this.htmlIdLocal,
-                          alwaysTranslate: true,
-                          dataItem: this.exclusiveOptionWithoutSelected,
+                      (this.isDividerSelectDeselectVisible) && h("div", {
+                        class: "a_select__divider",
+                        ariaHidden: true,
+                      }),
+                      !!this.dataSelectedVisible.length && h("div", {
+                        class: "a_select__selected_first",
+                      }, [
+                        ...(this.hasKeyGroup ?
+                          [h(ACheckboxRadioGroups, {
+                            id: `${ this.htmlIdLocal }_selected_lev_0`,
+                            alwaysTranslate: this.alwaysTranslate,
+                            dataGrouped: this.dataSelectedGrouped,
+                            disabled: this.disabled,
+                            groupsForLever: this.groupsForLeverSelected,
+                            isErrors: this.isErrors,
+                            keyDisabled: this.keyDisabled,
+                            keyDisabledCallback: this.keyDisabledCallback,
+                            levelIndex: 0,
+                            modelSearch: this.modelSearchLowerCase,
+                            modelValue: this.modelValue,
+                            searching: this.searching,
+                            searchingElements: this.searchingElementsSelected,
+                            searchingGroups: this.searchingGroupsSelected,
+                            searchingGroupsWithSearchInGroup: this.searchingGroupsWithSearchInGroup,
+                            searchTextInHtml: this.searchTextInHtml,
+                            slotName: this.slotName,
+                            type: this.type,
+                            onChangeModelValue: this.onChangeModelValue,
+                          }, this.$slots)] :
+                          this.dataSelectedVisible.map((item, itemIndex) => {
+                            return h(ASelectElement, {
+                              key: item[AKeyId],
+                              id: this.htmlIdLocal,
+                              alwaysTranslate: this.alwaysTranslate,
+                              dataItem: item,
+                              disabled: this.disabled,
+                              itemIndex,
+                              keyDisabled: this.keyDisabled,
+                              keyDisabledCallback: this.keyDisabledCallback,
+                              modelSearch: this.modelSearchLowerCase,
+                              modelValue: this.modelValue,
+                              searching: this.searching,
+                              searchingElements: this.searchingElementsSelected,
+                              searchTextInHtml: this.searchTextInHtml,
+                              slotName: this.slotName,
+                              type: this.type,
+                              onChangeModelValue: this.onChangeModelValue,
+                            }, this.$slots);
+                          })),
+                      ]),
+                      (!!this.dataSelectedVisible.length &&
+                        !!this.dataOptionsWithoutSelectedVisible.length) && h("div", {
+                        class: "a_select__divider",
+                        ariaHidden: true,
+                      }),
+                      (this.loadingLocal || this.loadingSearchApi) ?
+                        h(ACloak) :
+                        "",
+                      (this.isMultiselect && this.exclusiveOptionWithoutSelected) && h("div", {}, [
+                        h(ASelectElement, {
+                          key: this.exclusiveOptionValue,
+                          id: this.htmlIdLocal,
+                          alwaysTranslate: true,
+                          dataItem: this.exclusiveOptionWithoutSelected,
                           disabled: false,
                           itemIndex: 0,
                           modelSearch: this.modelSearchLowerCase,
                           modelValue: this.modelValue,
                           searching: this.searching,
                           searchingElements: this.searchingElementsExclusive,
-                          searchTextInHtml: this.searchTextInHtml,
+                          searchTextInHtml: this.searchTextInHtml,
                           type: this.type,
                           onChangeModelValue: this.onChangeModelValue,
                         }, this.$slots),
                       ]),
-                      !!this.dataExtraWithoutSelected.length && h("div", {}, [
-                        ...(this.hasKeyGroup ?
-                          [h(ACheckboxRadioGroups, {
-                            id: `${ this.htmlIdLocal }_extra_lev_0`,
-                            alwaysTranslate: this.alwaysTranslate,
-                            dataGrouped: this.dataExtraGrouped,
-                            disabled: this.disabledLocal,
-                            groupsForLever: this.groupsForLeverExtra,
-                            isErrors: this.isErrors,
-                            keyDisabled: this.keyDisabled,
-                            keyDisabledCallback: this.keyDisabledCallback,
-                            levelIndex: 0,
-                            modelSearch: this.modelSearchLowerCase,
-                            modelValue: this.modelValue,
-                            searching: this.searching,
-                            searchingElements: this.searchingElementsExtra,
-                            searchingGroups: this.searchingGroupsExtraWithoutSelected,
-                            searchingGroupsWithSearchInGroup: this.searchingGroupsWithSearchInGroup,
-                            searchTextInHtml: this.searchTextInHtml,
-                            slotName: this.slotName,
-                            type: this.type,
-                            onChangeModelValue: this.onChangeModelValue,
-                          }, this.$slots)] :
-                          this.dataExtraWithoutSelected.map((item, itemIndex) => {
-                            return h(ASelectElement, {
+                      !!this.dataExtraWithoutSelected.length && h("div", {}, [
+                        ...(this.hasKeyGroup ?
+                          [h(ACheckboxRadioGroups, {
+                            id: `${ this.htmlIdLocal }_extra_lev_0`,
+                            alwaysTranslate: this.alwaysTranslate,
+                            dataGrouped: this.dataExtraGrouped,
+                            disabled: this.disabledLocal,
+                            groupsForLever: this.groupsForLeverExtra,
+                            isErrors: this.isErrors,
+                            keyDisabled: this.keyDisabled,
+                            keyDisabledCallback: this.keyDisabledCallback,
+                            levelIndex: 0,
+                            modelSearch: this.modelSearchLowerCase,
+                            modelValue: this.modelValue,
+                            searching: this.searching,
+                            searchingElements: this.searchingElementsExtra,
+                            searchingGroups: this.searchingGroupsExtraWithoutSelected,
+                            searchingGroupsWithSearchInGroup: this.searchingGroupsWithSearchInGroup,
+                            searchTextInHtml: this.searchTextInHtml,
+                            slotName: this.slotName,
+                            type: this.type,
+                            onChangeModelValue: this.onChangeModelValue,
+                          }, this.$slots)] :
+                          this.dataExtraWithoutSelected.map((item, itemIndex) => {
+                            return h(ASelectElement, {
                               key: item[AKeyId],
                               id: this.htmlIdLocal,
                               alwaysTranslate: this.alwaysTranslate,
@@ -1483,12 +1490,12 @@ export default {
                               modelValue: this.modelValue,
                               slotName: this.slotName,
                               type: this.type,
-                              onChangeModelValue: this.onChangeModelValue,
-                            }, this.$slots);
-                          })),
-                        !!this.dataWithoutSelectedVisible.length &&
-                        !this.hasNotElementsExtraWithSearch &&
-                        !this.hasNotElementsExclusiveWithSearch && h("div", {
+                              onChangeModelValue: this.onChangeModelValue,
+                            }, this.$slots);
+                          })),
+                        !!this.dataWithoutSelectedVisible.length &&
+                        !this.hasNotElementsExtraWithSearch &&
+                        !this.hasNotElementsExclusiveWithSearch && h("div", {
                           class: "a_select__divider",
                           ariaHidden: true,
                         }),
@@ -1509,7 +1516,7 @@ export default {
                             modelValue: this.modelValue,
                             searching: this.searching,
                             searchingElements: this.searchingElements,
-                            searchingGroups: this.searchingGroupsValidWithoutSelected,
+                            searchingGroups: this.searchingGroupsValidWithoutSelected,
                             searchingGroupsWithSearchInGroup: this.searchingGroupsWithSearchInGroup,
                             searchTextInHtml: this.searchTextInHtml,
                             slotName: this.slotName,
@@ -1542,11 +1549,11 @@ export default {
                           ]),
                         ]),
                       renderInvalidEntries(),
-                      ((!this.dataWithoutSelected.length &&
-                        !this.dataExtraWithoutSelected.length &&
-                        !this.exclusiveOptionWithoutSelected &&
-                        !this.dataSelected.length
-                      ) || this.hasNotElementsWithSearch) ?
+                      ((!this.dataWithoutSelected.length &&
+                        !this.dataExtraWithoutSelected.length &&
+                        !this.exclusiveOptionWithoutSelected &&
+                        !this.dataSelected.length
+                      ) || this.hasNotElementsWithSearch) ?
                         h(ATranslation, {
                           alwaysTranslate: this.alwaysTranslate,
                           class: "a_form__not_elements",