pui9-components 2.0.8 → 3.0.0

package/src/components/PuiSelect.vue

@@ -1,1675 +0,0 @@
-<template>
-	<!-- DESKTOP -->
-	<div v-if="!isMobile">
-		<div v-if="toplabel" class="ml-1 mr-1">
-			<v-layout>
-				<v-flex xs12>
-					<label v-if="getLabel === '$nbsp;'">&nbsp;</label>
-					<label v-else :class="getLabelRequiredClass">{{ getLabel }}</label>
-					<pui-form-tooltip v-bind="{ tooltipDescription, tooltipIcon }" v-if="showTooltip" ref="tooltip"></pui-form-tooltip>
-					<v-btn v-if="copyClipboardEnabled && !multiple" style="color:var(--N-300)" class="pb-1" x-small text @click="copySelectedItemToClipboard">
-						<v-icon x-small>far fa-copy</v-icon>
-					</v-btn>
-				</v-flex>
-			</v-layout>
-			<v-layout>
-				<v-flex
-					:class="
-						(prependInnerIconRead || prependInnerIconUpdate) && prependInnerIconInsert
-							? 'xs10'
-							: (prependInnerIconRead || prependInnerIconUpdate) && !prependInnerIconInsert
-							? 'xs11'
-							: 'xs12'
-					"
-				>
-					<v-autocomplete
-						v-model="selectedItems"
-						class="pui-select"
-						:class="getEditedClass"
-						solo
-						flat
-						ref="arrowUp"
-						:attach="attach ? true : false"
-						:autocomplete="!filterServerSide"
-						:no-filter="filterServerSide"
-						:readonly="readonly"
-						:return-object="return_object"
-						:clearable="clearable"
-						:items="theItems"
-						:error="internalError"
-						:error-messages="internalErrorMessages"
-						:item-text="itemText"
-						:item-value="itemValue"
-						:search-input.sync="search"
-						:required="required"
-						:rules="getRules"
-						:disabled="disabled"
-						:multiple="multiple"
-						:placeholder="getPlaceholder"
-						:filter="filter"
-						v-bind="allProps"
-						:hide-details="hideDetails"
-						@focus="focusValue"
-						@blur="checkValue"
-						@keydown="setDropDownDirection"
-						@click:append="menuArrow"
-						@click:clear="requestItems"
-					>
-						<template slot="append-item" v-if="modelName">
-							<infinite-loading @infinite="loading === false && getMoreItemsFromPuiList(search)" ref="infiniteLoading">
-								<span style="font-weight: bold" slot="no-more">{{ allShownMesage }}</span>
-								<span slot="no-results"></span>
-							</infinite-loading>
-						</template>
-						<template v-slot:item="{ item, attrs, on }">
-							<template v-if="!itemTemplate">
-								<v-list-item v-bind="attrs" v-on="on" class="pui-select__item">
-									<v-list-item-content class="pl-3">
-										<pui-select-text-service :item="item" :itemText="itemText" />
-									</v-list-item-content>
-									<v-list-item-action class="pr-3" v-if="attrs['aria-selected'] === 'true'">
-										<v-icon small class="pui-select__item-icon">fa fa-check</v-icon>
-									</v-list-item-action>
-								</v-list-item>
-							</template>
-							<template v-else>
-								<slot name="theTemplate" :item="item" :selected="attrs.selected"></slot>
-							</template>
-						</template>
-						<template slot="selection" slot-scope="{ item, selected, parent }">
-							<template v-if="selectTemplate">
-								<slot name="selectionTemplate" :item="item"></slot>
-							</template>
-							<template v-else-if="multiple === true">
-								<v-chip color="grey lighten-2" :input-value="selected" label small tabindex="-1">
-									<pui-select-text-service :item="item" type="select" :itemText="itemText" />
-									<v-icon v-if="!(disabled || readonly)" small @click.native.stop.prevent.capture="parent.selectItem(item)">fal fa-times</v-icon>
-								</v-chip>
-							</template>
-							<template v-else>
-								<pui-select-text-service
-									:truncate="!isDisabled"
-									:writing="isMenuOpened"
-									:disabled="disabled"
-									:item="item"
-									type="select"
-									:itemText="itemText"
-								/>
-							</template>
-						</template>
-					</v-autocomplete>
-				</v-flex>
-				<v-flex xs1 v-if="prependInnerIconUpdate || prependInnerIconRead">
-					<v-btn v-if="prependInnerIconUpdate" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('update')">
-						<v-icon>{{ prependInnerIconUpdate }}</v-icon>
-					</v-btn>
-					<v-btn v-else-if="prependInnerIconRead" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('read')">
-						<v-icon>{{ prependInnerIconRead }}</v-icon>
-					</v-btn>
-				</v-flex>
-				<v-flex xs1 v-if="prependInnerIconInsert">
-					<v-btn v-if="prependInnerIconInsert" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('create')">
-						<v-icon>{{ prependInnerIconInsert }}</v-icon>
-					</v-btn>
-				</v-flex>
-			</v-layout>
-		</div>
-		<div v-else class="ml-1 mr-1">
-			<v-layout>
-				<v-flex :class="labelColumnStyles ? labelColumnStyles : 'xs12 sm6 md4 xl3'">
-					<label :class="getLabelRequiredClass">{{ getLabel }}</label>
-					<pui-form-tooltip v-bind="{ tooltipDescription, tooltipIcon }" v-if="showTooltip" ref="tooltip"></pui-form-tooltip>
-					<v-btn v-if="copyClipboardEnabled && !multiple" style="color:var(--N-300)" class="pb-1" x-small text @click="copySelectedItemToClipboard">
-						<v-icon x-small>far fa-copy</v-icon>
-					</v-btn>
-				</v-flex>
-				<v-flex
-					:class="
-						valueColumnStyles
-							? valueColumnStyles
-							: !prependInnerIconRead && !prependInnerIconUpdate && !prependInnerIconInsert
-							? 'xs12 sm6 md8 xl9'
-							: 'xs10 sm5 md7 xl8'
-					"
-				>
-					<v-autocomplete
-						v-model="selectedItems"
-						class="pui-select"
-						:class="getEditedClass"
-						solo
-						flat
-						ref="arrowUp"
-						:attach="attach ? true : false"
-						:autocomplete="!filterServerSide"
-						:no-filter="filterServerSide"
-						:readonly="readonly"
-						:return-object="return_object"
-						:clearable="clearable"
-						:label="label"
-						:error="internalError"
-						:error-messages="internalErrorMessages"
-						:items="theItems"
-						:item-text="itemText"
-						:item-value="itemValue"
-						:search-input.sync="search"
-						:required="required"
-						:rules="getRules"
-						:disabled="isDisabled"
-						:multiple="multiple"
-						:placeholder="getPlaceholder"
-						:filter="filter"
-						v-bind="allProps"
-						:hide-details="hideDetails"
-						@focus="focusValue"
-						@blur="checkValue"
-						@click:append="menuArrow"
-						@click:clear="requestItems"
-					>
-						<template slot="append-item" v-if="modelName">
-							<infinite-loading @infinite="loading === false && getMoreItemsFromPuiList(search)" ref="infiniteLoading">
-								<span style="font-weight: bold" slot="no-more">{{ allShownMesage }}</span>
-								<span slot="no-results"></span>
-							</infinite-loading>
-						</template>
-						<template v-slot:item="{ item, attrs, on }">
-							<template v-if="!itemTemplate">
-								<v-list-item v-bind="attrs" v-on="on" class="pui-select__item">
-									<v-list-item-content class="pl-3">
-										<pui-select-text-service :item="item" :itemText="itemText" />
-									</v-list-item-content>
-									<v-list-item-action class="pr-3" v-if="attrs['aria-selected'] === 'true'">
-										<v-icon small class="pui-select__item-icon">fa fa-check</v-icon>
-									</v-list-item-action>
-								</v-list-item>
-							</template>
-							<template v-else>
-								<slot name="theTemplate" :item="item" :selected="attrs.selected" :tile="attrs.tile"></slot>
-							</template>
-						</template>
-						<template slot="selection" slot-scope="{ item, selected, parent }">
-							<template v-if="selectTemplate === true">
-								<slot name="selectionTemplate" :item="item"></slot>
-							</template>
-							<template v-else-if="multiple === true">
-								<v-chip color="grey lighten-2" :input-value="selected" label small tabindex="-1">
-									<pui-select-text-service :item="item" type="select" :itemText="itemText" />
-									<v-icon small @click.native.stop.prevent.capture="parent.selectItem(item)">close</v-icon>
-								</v-chip>
-							</template>
-							<template v-else>
-								<pui-select-text-service
-									:truncate="!isDisabled"
-									:writing="isMenuOpened"
-									:item="item"
-									type="select"
-									:itemText="itemText"
-								/>
-							</template>
-						</template>
-					</v-autocomplete>
-				</v-flex>
-				<v-flex xs1 v-if="prependInnerIconUpdate || prependInnerIconRead">
-					<v-btn v-if="prependInnerIconUpdate" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('update')">
-						<v-icon>{{ prependInnerIconUpdate }}</v-icon>
-					</v-btn>
-					<v-btn v-else-if="prependInnerIconRead" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('read')">
-						<v-icon>{{ prependInnerIconRead }}</v-icon>
-					</v-btn>
-				</v-flex>
-				<v-flex xs1 v-if="prependInnerIconInsert">
-					<v-btn v-if="prependInnerIconInsert" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('create')">
-						<v-icon>{{ prependInnerIconInsert }}</v-icon>
-					</v-btn>
-				</v-flex>
-			</v-layout>
-		</div>
-		<pui-select-detail-dialog
-			v-if="showDetailComponent"
-			:parentId="puiSelectId"
-			:componentLabel="detailComponentLabel"
-			:componentName="detailComponentName"
-			:componentPk="detailComponentPk"
-			:componentMethod="detailComponentMethod"
-			:modelName="detailModelName"
-		></pui-select-detail-dialog>
-	</div>
-	<!-- MOBILE -->
-	<div v-else>
-		<v-layout>
-			<v-flex xs12>
-				<label v-if="getLabel === '$nbsp;'">&nbsp;</label>
-				<label v-else class="pui-select__label-mobile" :class="getLabelRequiredClass">{{ getLabel }}</label>
-			</v-flex>
-		</v-layout>
-		<v-layout>
-			<v-flex
-				:class="
-					(prependInnerIconRead || prependInnerIconUpdate) && prependInnerIconInsert
-						? 'xs10'
-						: (prependInnerIconRead || prependInnerIconUpdate) && !prependInnerIconInsert
-						? 'xs11'
-						: 'xs12'
-				"
-			>
-				<v-autocomplete
-					v-model="selectedItems"
-					class="pui-select"
-					:class="getEditedClass"
-					solo
-					flat
-					ref="arrowUp"
-					:attach="attach ? true : false"
-					:autocomplete="!filterServerSide"
-					:no-filter="filterServerSide"
-					:readonly="readonly"
-					:return-object="return_object"
-					:clearable="clearable"
-					:items="theItems"
-					:error="internalError"
-					:error-messages="internalErrorMessages"
-					:item-text="itemText"
-					:item-value="itemValue"
-					:search-input.sync="search"
-					:required="required"
-					:rules="getRules"
-					:disabled="disabled"
-					:multiple="multiple"
-					:placeholder="getPlaceholder"
-					:filter="filter"
-					v-bind="allProps"
-					:hide-details="hideDetails"
-					@focus="focusValue"
-					@blur="checkValue"
-					@click:append="menuArrow"
-					@click:clear="requestItems"
-				>
-					<template slot="append-item" v-if="modelName">
-						<infinite-loading @infinite="loading === false && getMoreItemsFromPuiList(search)" ref="infiniteLoading">
-							<span style="font-weight: bold" slot="no-more">{{ allShownMesage }}</span>
-							<span slot="no-results"></span>
-						</infinite-loading>
-					</template>
-					<template v-slot:item="{ item, attrs, on }">
-						<template v-if="!itemTemplate">
-							<v-list-item v-bind="attrs" v-on="on" class="pui-select__item">
-								<v-list-item-content class="pl-3">
-									<pui-select-text-service :item="item" :itemText="itemText" />
-								</v-list-item-content>
-								<v-list-item-action class="pr-3" v-if="attrs['aria-selected'] === 'true'">
-									<v-icon class="pui-select__item-icon">fa fa-check</v-icon>
-								</v-list-item-action>
-							</v-list-item>
-						</template>
-						<template v-else>
-							<slot name="theTemplate" :item="item" :selected="attrs.selected"></slot>
-						</template>
-					</template>
-					<template slot="selection" slot-scope="{ item, selected, parent }">
-						<template v-if="selectTemplate">
-							<slot name="selectionTemplate" :item="item"></slot>
-						</template>
-						<template v-else-if="multiple === true">
-							<v-chip color="grey lighten-2" :input-value="selected" label small>
-								<pui-select-text-service :item="item" type="select" :itemText="itemText" />
-								<v-icon small @click.native.stop.prevent.capture="parent.selectItem(item)">close</v-icon>
-							</v-chip>
-						</template>
-						<template v-else>
-							<pui-select-text-service
-								:truncate="!isDisabled"
-								:writing="isMenuOpened"
-								:item="item"
-								type="select"
-								:itemText="itemText"
-							/>
-						</template>
-					</template>
-				</v-autocomplete>
-			</v-flex>
-			<v-flex xs1 v-if="prependInnerIconUpdate || prependInnerIconRead">
-				<v-btn v-if="prependInnerIconUpdate" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('update')">
-					<v-icon>{{ prependInnerIconUpdate }}</v-icon>
-				</v-btn>
-				<v-btn v-else-if="prependInnerIconRead" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('read')">
-					<v-icon>{{ prependInnerIconRead }}</v-icon>
-				</v-btn>
-			</v-flex>
-			<v-flex xs1 v-if="prependInnerIconInsert">
-				<v-btn v-if="prependInnerIconInsert" class="pui-select__prepend-inner-icon--desktop" icon @click="goToDetail('create')">
-					<v-icon>{{ prependInnerIconInsert }}</v-icon>
-				</v-btn>
-			</v-flex>
-		</v-layout>
-		<pui-select-detail-dialog
-			v-if="showDetailComponent"
-			:parentId="puiSelectId"
-			:componentLabel="detailComponentLabel"
-			:componentName="detailComponentName"
-			:componentPk="detailComponentPk"
-			:componentMethod="detailComponentMethod"
-			:modelName="detailModelName"
-		></pui-select-detail-dialog>
-	</div>
-</template>
-
-<script>
-import PuiSelectTextService from './PuiSelectTextService';
-import PuiSelectDetailDialog from './PuiSelectDetailDialog';
-import InfiniteLoading from 'vue-infinite-loading';
-
-export default {
-	//TOFOLLOW
-	//https://github.com/vuetifyjs/vuetify/issues/5087 Al cerrar las chips del multiselect se abre el menú
-	name: 'PuiSelect',
-	inject: {
-		form: {
-			default: null
-		}
-	},
-	components: {
-		PuiSelectTextService,
-		PuiSelectDetailDialog,
-		'infinite-loading': InfiniteLoading
-	},
-	/* Properties provided by the pui-select */
-	props: {
-		value: {
-			required: false
-		},
-		/* Type: Boolean
-        Native by the v-select
-        If true adds a close icon to the selection*/
-		clearable: {
-			type: [Boolean],
-			default: false,
-			required: false
-		},
-		/* Type: Boolean
-        Native by the v-select
-        If true allows to select multiple items, selectedItems becomes an Array*/
-		multiple: {
-			type: [Boolean],
-			default: false,
-			required: false
-		},
-		/* Type: Boolean
-        If true applies a custom template slot for the list of items
-        The parent has to provide it*/
-		itemTemplate: {
-			type: Boolean,
-			default: false
-		},
-		selectTemplate: {
-			type: Boolean,
-			default: false
-		},
-		/* Type: Number {Integer}
-		It is used when the items come from a Service,
-		it will requeste paginated requests of ths number of items*/
-		rows: {
-			type: Number,
-			default: -1
-		},
-		disabled: {
-			type: [Boolean],
-			default: false,
-			required: false
-		},
-		filter: {
-			type: Function,
-			required: false
-		},
-		readonly: {
-			type: [Boolean],
-			default: false,
-			required: false
-		},
-		toplabel: {
-			type: [Boolean],
-			default: false,
-			required: false
-		},
-		placeholder: {
-			type: [String],
-			default: ' ',
-			required: false
-		},
-		return_object: {
-			type: Boolean,
-			default: true
-		},
-		noeditable: {
-			type: [Boolean],
-			default: false,
-			required: false
-		},
-		attach: {
-			type: String,
-			default: null,
-			required: false
-		},
-		labelColumnStyles: {
-			type: [String],
-			required: false
-		},
-		valueColumnStyles: {
-			type: [String],
-			required: false
-		},
-		hideDetails: {
-			type: Boolean,
-			default: false,
-			required: false
-		},
-		'hide-selected': {
-			type: Boolean,
-			default: false,
-			required: false
-		},
-		'hide-no-data': {
-			type: Boolean,
-			default: false,
-			required: false
-		},
-		detailModelName: {
-			type: String,
-			default: null,
-			required: false
-		},
-		detailComponentName: {
-			type: String,
-			default: null,
-			required: false
-		},
-		detailActions: {
-			type: Object,
-			default: () => {
-				return {
-					read: true,
-					create: true,
-					update: true
-				};
-			},
-			required: false
-		},
-		/*
-		Type: Array of Objects
-		Items provided by the parent component */
-		items: {
-			type: Array,
-			default: null,
-			required: false
-		},
-		/**
-		 * Los items seleccionados que se pasan de inicio, se pasa en la directiva v-model al utilizar este componente
-		 * puede ser un array de Items igual que en la propiedad :items, o un array con los id's solamente
-		 */
-		itemsToSelect: {
-			type: Array,
-			default: () => []
-		},
-		/**
-		 * The fields to be searched
-		 */
-		queryFields: {
-			type: Array,
-			default: () => [],
-			required: false
-		},
-		/* Type: String
-		Native by the v-select
-		If Present the select will show this label in the input */
-		label: {
-			type: [String],
-			default: '',
-			required: false
-		},
-		/* Type: String
-		Instead of providing the items, if controller is provided it will get the items by calling this web service in @getItemsFromPuiList */
-		controller: {
-			type: String,
-			default: '/puisearch',
-			required: false
-		},
-		/* Type: Object
-		The pui9 list filter object*/
-		pui9filter: {
-			type: Object,
-			default: null,
-			required: false
-		},
-		filterId: {
-			type: String
-		},
-		filterMap: {
-			type: Object,
-			default: null
-		},
-		filterMapOp: {
-			type: String,
-			default: 'and'
-		},
-		filterParentMap: {
-			type: Object,
-			default: null
-		},
-		fixedFilter: {
-			type: Object,
-			default: null
-		},
-		order: {
-			type: Object,
-			default: null
-		},
-		/* Type: String
-		Instead of providing the items, if controller is provided it will get the items by calling the controller in @getItems */
-		modelFormMapping: {
-			type: Object,
-			default: null,
-			required: false
-		},
-		/* Type: String
-		The items text property name */
-		itemText: {
-			type: [String, Array, Function],
-			default: 'text',
-			required: true
-		},
-		modelName: {
-			type: String
-		},
-		rules: {
-			type: Array,
-			default: () => {
-				return [];
-			}
-		},
-		/* Type: String
-		The items id property name */
-		itemValue: {
-			type: [String, Array, Function],
-			default: 'value',
-			required: false
-		},
-		/* Type: Boolean
-		Native by the v-select
-		If true adds a close icon to the selection, @model[property] */
-		searchable: {
-			type: [Boolean],
-			default: true,
-			required: false
-		},
-
-		/* Type: Boolean
-		If true applies the required rule in @rules.required */
-		required: {
-			type: [Boolean],
-			default: false,
-			required: false
-		},
-		/* Type: Number
-		Default number of rows for a multiselect */
-		rowNum: {
-			type: Number,
-			default: 1000,
-			required: false
-		},
-		/* Type: Boolean
-		Fix for reactivity, require itemsToSelect to be a computed */
-		reactive: {
-			type: Boolean,
-			default: false,
-			required: false
-		},
-		emitSelectedItemsEventOnFirstLoad: {
-			type: Boolean,
-			default: true,
-			required: false
-		},
-		tooltipDescription: {
-			type: String,
-			required: false
-		},
-		tooltipIcon: {
-			type: String,
-			required: false
-		},
-		singleItemAutoselect: {
-			type: Boolean,
-			required: false
-		},
-		copyClipboard: {
-			type: Boolean,
-			default: null,
-			required: false
-		}
-	},
-	data() {
-		return {
-			isMobile: false,
-			initialValue: null,
-			selectedItems: null,
-			page: 0,
-			showDetailComponent: false,
-			newDisabled: undefined,
-			hasBeenFocused: false,
-			itemTextMultiple: false,
-			itemValueMultiple: false,
-			itemTextNested: false,
-			itemValueNested: false,
-			search: '',
-			loading: false,
-			theItems: [],
-			internalError: false,
-			internalErrorMessages: '',
-			selected: false,
-			initialItemsToSelect: [],
-			previousSelectedItems: undefined,
-			doingThings: false,
-			itemManuallySelected: false,
-			itemProgrammaticallySelected: false,
-			firstLoad: true,
-			requestDataPromise: undefined,
-			selectedItemsEventFirstLoad: true,
-			internalQueryFields: [],
-			singleItemAutoselectEnabled: false,
-			valid: true
-		};
-	},
-	computed: {
-		allProps() {
-			const propsWithoutLabel = { ...this.$props };
-			delete propsWithoutLabel.label;
-			return { ...this.$attrs, propsWithoutLabel };
-		},
-		theModel() {
-			return this.$store.getters.getModelByName(this.modelName);
-		},
-		internalController() {
-			return this.controller; // || this.theModel.url.list;
-		},
-		fixedFilterWatcher() {
-			return JSON.stringify(this.fixedFilter);
-		},
-		filterMapWatcher() {
-			return JSON.stringify(this.filterMap);
-		},
-		requiredMessage() {
-			return this.$t('pui9.error.field_required');
-		},
-		allShownMesage() {
-			return this.$t('pui9.components.select.all-items-showed');
-		},
-		isDisabled() {
-			if (!this.hasEmptyValue(this.newDisabled)) {
-				return this.newDisabled;
-			}
-			return this.disabled;
-		},
-		filterServerSide() {
-			if (this.items) {
-				return false;
-			}
-			return true;
-		},
-		getLabel() {
-			return this.label;
-		},
-		getLabelRequiredClass() {
-			return { 'v-label--required': this.required };
-		},
-		getEditedClass() {
-			const editedClass = { 'v-text-field--edited': this.isEdited };
-			if (this.attach) {
-				editedClass['puiselect-' + this.attach] = true;
-			}
-			return editedClass;
-		},
-		getPlaceholder() {
-			var placeholder = this.placeholder;
-			if (this.isMobile && this.placeholder === ' ') {
-				placeholder = this.label;
-			}
-			return placeholder;
-		},
-		prependInnerIconRead() {
-			if (this.detailModelName && this.detailComponentName && this.detailActions.read) {
-				const model = this.$store.getters.getModelByName(this.detailModelName);
-				if (model && model.functionalities) {
-					if (this.$store.getters.hasFunctionality(model.functionalities.get)) {
-						return 'far fa-info-circle';
-					}
-				}
-			}
-			return null;
-		},
-		prependInnerIconUpdate() {
-			if (this.detailModelName && !this.disabled && this.detailActions.update) {
-				const model = this.$store.getters.getModelByName(this.detailModelName);
-				if (model && model.functionalities) {
-					// eslint-disable-next-line
-					if (this.$store.getters.hasFunctionality(model.functionalities.update)) {
-						return 'far fa-edit';
-					}
-				}
-			}
-			return null;
-		},
-		prependInnerIconInsert() {
-			if (this.detailModelName && !this.disabled && this.detailActions.create) {
-				const model = this.$store.getters.getModelByName(this.detailModelName);
-				if (model && model.functionalities) {
-					// eslint-disable-next-line
-					if (this.$store.getters.hasFunctionality(model.functionalities.insert)) {
-						return 'far fa-plus-circle';
-					}
-				}
-			}
-			return null;
-		},
-		getRules() {
-			return [...this.rules];
-		},
-		isEdited() {
-			if (this.noeditable || this.disabled || this.readonly || this.selected === false) {
-				return false;
-			} else {
-				return this.compareInitialWithCurrentSelected();
-			}
-		},
-		isMenuOpened() {
-			return this.$refs.arrowUp ? this.$refs.arrowUp.isMenuActive || this.$refs.arrowUp.isFocused : false;
-		},
-		showTooltip() {
-			if (this.getLabel === '' || this.getLabel === null) {
-				return false;
-			}
-			return this.tooltipDescription || this.tooltip;
-		},
-		copyClipboardEnabled() {
-			return this.copyClipboard != null ? this.copyClipboard : this.$store.state.components.copyClipboardSelect;
-		}
-	},
-	watch: {
-		modelName(modelName) {
-			if (modelName && this.hasEmptyValue(this.theItems)) {
-				this.setInternalQueryFields();
-				this.getItemsFromPuiList();
-			}
-		},
-		itemsToSelect: {
-			handler(newValue) {
-				this.reactiveHandler(newValue);
-			},
-			deep: true
-		},
-		fixedFilterWatcher: {
-			handler(newFilter, oldFilter) {
-				if (newFilter === oldFilter) {
-					return;
-				}
-				this.previousSelectedItems = this.previousSelectedItems || this.selectedItems;
-				this.resetItems();
-				this.filterItems();
-			},
-			deep: true
-		},
-		filterMapWatcher: {
-			handler(newFilter, oldFilter) {
-				if (newFilter === oldFilter) {
-					return;
-				}
-				this.resetItems(JSON.parse(newFilter));
-				this.filterItems(null);
-			},
-			deep: true
-		},
-		loading(newValue, oldValue) {
-			if (newValue === false && oldValue === true && !this.hasEmptyValue(this.previousSelectedItems)) {
-				this.selectPreviousValidItems();
-				this.previousSelectedItems = undefined;
-			}
-		},
-		search(newValue, oldValue) {
-			if (this.multiple && this.hasEmptyValue(newValue) && this.hasEmptyValue(oldValue)) {
-				return;
-			}
-			this.searchable && this.filterItems(newValue);
-		},
-		selectedItems(newVal) {
-			if (this.reactive) {
-				if (this.firstLoad) {
-					this.firstLoad = false;
-				} else if (!this.itemProgrammaticallySelected) {
-					this.itemManuallySelected = true;
-				} else {
-					this.itemProgrammaticallySelected = false;
-				}
-			}
-			this.clearMessages();
-			if (this.modelFormMapping) {
-				this.$emit('input', this.replaceMapping());
-			} else {
-				this.$emit('input', newVal);
-			}
-			this.$emit('change', newVal);
-
-			if (this.emitSelectedItemsEventOnFirstLoad || !this.selectedItemsEventFirstLoad) {
-				this.$puiEvents.$emit(`onPuiSelect_selectedItems-${this.puiSelectId}`, { id: this.puiSelectId, model: newVal });
-			}
-			this.selectedItemsEventFirstLoad = false;
-			if (this.attach && this.puiSelectId && !this.multiple && newVal) {
-				// Need for browser to recalculate correctly getBoundingClientSelectPosition
-				document.getElementById(this.puiSelectId).click();
-			}
-		},
-		disabled(newVal) {
-			this.newDisabled = newVal;
-			if (newVal) {
-				this.clearMessages();
-			}
-		},
-		detailComponentName(newValue, oldValue) {
-			if (!this.hasEmptyValue(oldValue)) {
-				this.$puiEvents.$off(`pui-modalDialog-${oldValue}_${this.puiSelectId}_popup-hide`);
-			}
-			if (!this.hasEmptyValue(newValue)) {
-				const self = this;
-				this.$puiEvents.$on(`pui-modalDialog-${newValue}_${this.puiSelectId}_popup-hide`, (data) => {
-					self.showDetailComponent = false;
-					if (data) {
-						const newItem = {};
-						const itemValues = this.itemValue;
-						itemValues.forEach((pkValue) => {
-							newItem[pkValue] = data[pkValue];
-						});
-						self.itemsToSelect[0] = newItem;
-						self.onPuiSelectItemsToSelect = [newItem];
-						self.getSelectedItemsFromPuiList();
-					}
-				});
-			}
-		},
-		theItems() {
-			if (this.singleItemAutoselectEnabled && this.theItems.length == 1) {
-				this.selectedItems = this.theItems[0];
-			}
-		}
-	},
-	created() {
-		// v-form injected
-		this.form && this.form.register(this);
-
-		this.puiSelectId = this.$attrs.id;
-		this.isMobile = this.$store.getters.isMobile;
-
-		//TODO poner itemValues como un array si viene de string, para unificar simplificar donde haya comprobaciones itemValuesMultiple
-		this.itemsToSelect && this.itemsToSelect.forEach((item) => {
-			this.initialItemsToSelect.push(item);
-		});
-
-		// Check Item Text
-		this.itemTextMultiple = Array.isArray(this.itemText);
-		if (this.itemTextMultiple === false) {
-			this.itemTextNested = this.checkForNestedFields(this.itemText);
-		}
-
-		// Check Item Value
-		this.itemValueMultiple = Array.isArray(this.itemValue);
-		if (this.itemValueMultiple === false) {
-			this.itemValueNested = this.checkForNestedFields(this.itemValue);
-		}
-
-		this.setInternalQueryFields();
-		this.getItems();
-
-		this.setSingleItemAutoselectEnabled();
-
-		// Subscribe events
-		this.$puiEvents.$on(`onPuiSelect_${this.puiSelectId}`, (newVal) => {
-			this.itemsToSelect[0] = newVal;
-			this.onPuiSelectItemsToSelect = [newVal];
-			this.getSelectedItemsFromPuiList();
-		});
-	},
-	mounted() {
-		if (this.detailComponentName) {
-			const self = this;
-			this.$puiEvents.$on(`pui-modalDialog-${this.detailComponentName}_${this.puiSelectId}_popup-hide`, (data) => {
-				self.showDetailComponent = false;
-				if (data) {
-					const newItem = {};
-					const itemValues = this.itemValue;
-					itemValues.forEach((pkValue) => {
-						newItem[pkValue] = data[pkValue];
-					});
-					self.itemsToSelect[0] = newItem;
-					self.onPuiSelectItemsToSelect = [newItem];
-					self.getSelectedItemsFromPuiList();
-				}
-			});
-		}
-	},
-	beforeDestroy() {
-		// Unsubscribe events
-		this.$puiEvents.$off(`onPuiSelect_${this.puiSelectId}`);
-		this.$puiEvents.$off(`pui-modalDialog-${this.detailComponentName}_${this.puiSelectId}_popup-hide`);
-	},
-	methods: {
-		validate() {
-			this.checkValue();
-			this.valid = !this.internalError;
-			return this.valid;
-		},
-		requestItems() {
-			this.getItemsFromPuiList();
-		},
-		setInternalQueryFields() {
-			this.internalQueryFields = this.queryFields;
-
-			if (this.modelName && this.hasEmptyValue(this.queryFields)) {
-				this.internalQueryFields = this.theModel.columns?.map((c) => c.name);
-			}
-		},
-		setSingleItemAutoselectEnabled() {
-			if (this.singleItemAutoselect || (this.$store.state.global.singleItemAutoselectOnRequired && this.required)) {
-				this.singleItemAutoselectEnabled = true;
-			}
-		},
-		focusValue() {
-			this.hasBeenFocused = true;
-			this.$refs.arrowUp.isMenuActive = true;
-			this.setDropDownDirection();
-		},
-		setDropDownDirection() {
-			if (this.$refs.arrowUp && this.attach) {
-				setTimeout(() => {
-					const puiSelect = this.$refs.arrowUp.$el;
-					const puiSelectPositions = puiSelect.getBoundingClientRect();
-
-					const heightBrowser = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-					const screenAvailableForDropDown = heightBrowser - puiSelectPositions.top;
-
-					const dropDown = puiSelect.querySelector('.v-menu__content');
-					if (dropDown) {
-						if (screenAvailableForDropDown < parseInt(dropDown.style['max-height']?.replace('px', '')) + 10) {
-							dropDown.style.top = 'initial';
-							dropDown.style.bottom = '40px';
-						} else {
-							dropDown.style.bottom = 'initial';
-							dropDown.style.top = '40px';
-						}
-					}
-				}, 0);
-			}
-		},
-		menuArrow() {
-			const arrowEl = this.$refs.arrowUp;
-			if (arrowEl.isMenuActive) {
-				arrowEl.isMenuActive = false;
-				arrowEl.blur();
-			} else {
-				arrowEl.isFocused = true;
-				this.focusValue();
-			}
-		},
-		compareInitialWithCurrentSelected() {
-			if (this.multiple) {
-				//comprobamos existencias, luego dimensiones y por último contenido de los arrays
-				if (!this.initialItemsToSelect || this.selectedItems.length === 0) {
-					if (this.initialItemsToSelect) {
-						return true;
-					} else if (this.selectedItems.length > 0) {
-						return true;
-					}
-					//los dos estan vacios
-					return false;
-				}
-				if (!this.hasEmptyValue(this.itemValue)) {
-					if (this.initialItemsToSelect.length !== this.selectedItems.length) {
-						return true;
-					} else if (this.itemValueNested === true) {
-						//TODO
-					} else if (this.itemValueMultiple === true) {
-						for (let index = 0, length = this.initialItemsToSelect.length; index < length; index++) {
-							const item = this.initialItemsToSelect[index];
-							const selectedItem = this.selectedItems[index];
-							for (let i = 0, length = this.itemValue.length; i < length; i++) {
-								const pkProp = this.itemValue[i];
-								if (item[pkProp] !== selectedItem[pkProp]) {
-									return true;
-								}
-							}
-						}
-					} else {
-						for (let i = 0, length = this.initialItemsToSelect.length; i < length; i++) {
-							if (this.initialItemsToSelect[i][this.itemValue] !== this.selectedItems[i][this.itemValue]) {
-								return true;
-							}
-						}
-					}
-					return false;
-				} else {
-					for (let i = 0, length = this.initialItemsToSelect.length; i < length; i++) {
-						if (this.initialItemsToSelect[i] !== this.selectedItems[i]) {
-							return true;
-						}
-					}
-				}
-				return false;
-			} else {
-				//comprobamos existencias y por último contenido de los objetos
-				if (this.hasEmptyValue(this.initialItemsToSelect) || this.hasEmptyValue(this.selectedItems)) {
-					if (this.initialItemsToSelect && this.initialItemsToSelect.length > 0) {
-						if (this.itemValueMultiple === true) {
-							return !this.hasEmptyValue(this.initialItemsToSelect[this.itemValue[0]]);
-						} else {
-							return !this.hasEmptyValue(this.initialItemsToSelect[this.itemValue]);
-						}
-					} else if (!this.hasEmptyValue(this.selectedItems)) {
-						return true;
-					}
-					//los dos estan vacios
-					return false;
-				}
-				if (!this.hasEmptyValue(this.itemValue)) {
-					if (this.itemValueMultiple === true) {
-						for (let i = 0, length = this.itemValue.length; i < length; i++) {
-							if (this.selectedItems[this.itemValue[i]] !== this.initialItemsToSelect[0][this.itemValue[i]]) {
-								return true;
-							}
-						}
-						return false;
-					} else if (this.itemValueNested === true) {
-						//TODO
-					}
-					return this.initialItemsToSelect[0] != null && this.initialItemsToSelect[0][this.itemValue] !== this.selectedItems[this.itemValue];
-				}
-				return this.initialItemsToSelect[0] !== this.selectedItems;
-			}
-		},
-		checkValue() {
-			this.search = '';
-			this.clearMessages();
-			if (this.required) {
-				if (this.hasEmptyValue(this.selectedItems)) {
-					this.showErrorMessage();
-				}
-			}
-		},
-		clearMessages() {
-			this.internalError = false;
-			this.internalErrorMessages = [];
-		},
-		showErrorMessage() {
-			this.internalError = true;
-			this.internalErrorMessages = [this.requiredMessage];
-		},
-		filterItems(search) {
-			if (this.modelName) {
-				clearTimeout(this.delayTimer);
-				this.delayTimer = setTimeout(() => {
-					this.getItemsFromPuiList(search);
-				}, 500);
-			}
-		},
-		disableInput() {
-			this.$el.children[0].children[0].children[0].children[0].children[0].children[1].setAttribute('disabled', '');
-			this.disabledInput = true;
-		},
-		goToDetail(method) {
-			if (!this.hasEmptyValue(this.selectedItems)) {
-				const detailPk = {};
-				let itemValues = this.itemValue;
-				if (this.itemValueMultiple === false) {
-					itemValues = [this.itemValue];
-				}
-				itemValues.forEach((pkProperty) => {
-					if (!this.hasEmptyValue(this.selectedItems[pkProperty])) {
-						detailPk[pkProperty] = this.selectedItems[pkProperty];
-					}
-				});
-
-				this.detailComponentMethod = method;
-				this.detailComponentLabel = this.label;
-				this.detailComponentPk = this.$puiUtils.utf8ToB64(JSON.stringify(detailPk));
-				this.showDetailComponent = true;
-			} else if (method === 'create') {
-				this.detailComponentMethod = method;
-				this.detailComponentLabel = this.label;
-				this.detailComponentPk = 'new';
-				this.showDetailComponent = true;
-			}
-		},
-		replaceMapping() {
-			let itemValues = this.itemValue;
-			if (this.itemValueMultiple === false) {
-				itemValues = [this.itemValue];
-			}
-			if (this.multiple !== true) {
-				itemValues.forEach((pkValue) => {
-					if (this.hasEmptyValue(this.selectedItems)) {
-						if (this.filterId && this.filterMap) {
-							let isParentPkValue = false;
-							for (const property in this.filterMap) {
-								if (property === pkValue) {
-									isParentPkValue = true;
-									break;
-								}
-							}
-							if (!isParentPkValue) {
-								this.value[this.modelFormMapping[pkValue]] = null;
-							}
-						} else {
-							this.value[this.modelFormMapping[pkValue]] = null;
-						}
-						return;
-					}
-					this.value[this.modelFormMapping[pkValue]] = this.selectedItems[pkValue];
-					for (const property in this.selectedItems) {
-						if (pkValue === property && !Object.prototype.hasOwnProperty.call(this.value, property)) {
-							this.value[property] = this.selectedItems[property];
-						}
-					}
-					if (this.filterId && this.filterMap) {
-						const oldMapNull = Object.values(this.filterMap).some((e) => e === null);
-						if ((oldMapNull && !this.firstLoad) || !this.selectedItemsEventFirstLoad) {
-							this.sendDataToParent();
-						}
-					}
-				});
-			} else {
-				this.selectedItems.forEach((item, index) => {
-					itemValues.forEach((pkValue) => {
-						this.value[index][this.modelFormMapping[pkValue]] = item[pkValue];
-						for (var property in this.selectedItems[index]) {
-							if (pkValue === property && !Object.prototype.hasOwnProperty.call(this.value[index], property)) {
-								this.value[index][property] = this.selectedItems[index][property];
-							}
-						}
-					});
-				});
-			}
-			return this.value;
-		},
-		sendDataToParent() {
-			const selectedObject = {};
-			for (const property in this.filterMap) {
-				let parentProperty = property;
-				if (this.filterParentMap && !this.hasEmptyValue(this.filterParentMap[property])) {
-					parentProperty = this.filterParentMap[property];
-				}
-				selectedObject[parentProperty] = this.selectedItems[property];
-			}
-			this.$puiEvents.$emit(`onPuiSelect_${this.filterId}`, selectedObject);
-		},
-		getItems() {
-			if (this.items) {
-				this.theItems = this.items;
-			}
-			this.loading = false;
-			this.selectItems();
-		},
-		getItemsFromPuiList(search) {
-			this.page = 1;
-			this.loading = true;
-			const loadItems = (response) => {
-				this.$refs.infiniteLoading && this.$refs.infiniteLoading.stateChanger.reset();
-				if (response && response.data) {
-					this.theItems = response.data.data;
-					if (this.selected === false) {
-						this.selectItems();
-					} else {
-						this.checkSelectedItems();
-					}
-					this.$refs.infiniteLoading && this.$refs.infiniteLoading.stateChanger.loaded();
-				}
-				if (response.data.totalPages <= this.page) {
-					this.$refs.infiniteLoading && this.$refs.infiniteLoading.stateChanger.complete();
-				}
-				this.loading = false;
-			};
-			const bodyRequest = this.getBodyRequest(search);
-			this.postRequest(bodyRequest, loadItems);
-		},
-		/**
-		 * Metodo llamado por el componente infinteloading al hacer scroll, nadie más lo llama directamente
-		 */
-		getMoreItemsFromPuiList(search) {
-			this.loading = true;
-			this.page++;
-			const bodyRequest = this.getBodyRequest(search);
-			const loadMoreItems = (response) => {
-				if (response && response.data) {
-					this.theItems = this.theItems.concat(response.data.data);
-					this.$refs.infiniteLoading.stateChanger.loaded();
-					if (response.data.totalPages <= this.page) {
-						this.$refs.infiniteLoading.stateChanger.complete();
-					}
-				}
-				this.loading = false;
-			};
-			this.postRequest(bodyRequest, loadMoreItems);
-		},
-		postRequest(body, successCallback) {
-			this.$puiRequests.postRequest(this.internalController, body, successCallback, (error) => {
-				console.log(error);
-			});
-		},
-		getBodyRequest(search) {
-			let paginateItemsParams = {
-				model: this.modelName,
-				filter: this.createFilter()
-			};
-
-			paginateItemsParams.rows = this.rows;
-			paginateItemsParams.page = this.page;
-			paginateItemsParams.queryText = search;
-			paginateItemsParams.queryFields = this.internalQueryFields;
-
-			const searchOrder = this.createOrder();
-			if (searchOrder) {
-				paginateItemsParams.order = searchOrder;
-			}
-			return paginateItemsParams;
-		},
-		createFilter() {
-			let theFilter = this.pui9filter;
-
-			if (this.filterMap) {
-				const group = this.createRelatedComboFilterGroup();
-				if (group && group.rules && group.rules.length > 0) {
-					if (theFilter) {
-						theFilter.groups.push(group);
-					} else {
-						theFilter = group;
-					}
-				}
-			}
-
-			if (this.fixedFilter && !this.isDisabled) {
-				if (theFilter) {
-					theFilter.groups.push(this.fixedFilter);
-				} else {
-					theFilter = this.fixedFilter;
-				}
-			}
-
-			return theFilter;
-		},
-		createRelatedComboFilterGroup() {
-			const group = {
-				groupOp: this.filterMapOp ? this.filterMapOp.toLowerCase() : 'and',
-				rules: [],
-				groups: []
-			};
-
-			if (this.multiple !== true) {
-				for (const colmodel in this.filterMap) {
-					const value = this.filterMap[colmodel];
-					if (Object.prototype.hasOwnProperty.call(this.filterMap, colmodel) && !this.hasEmptyValue(value)) {
-						group.rules.push({
-							field: colmodel,
-							op: 'eq',
-							data: value
-						});
-					}
-				}
-			} else {
-				// TODO: multiple with filter...
-			}
-
-			return group;
-		},
-		createOrder() {
-			if (!this.order) {
-				return null;
-			}
-			const searchOrder = [];
-			for (const column in this.order) {
-				const direction = this.order[column];
-				searchOrder.push({ column: column, direction: direction });
-			}
-
-			return searchOrder;
-		},
-		checkForNestedFields(stringField) {
-			if (stringField instanceof Function) {
-				return false;
-			}
-
-			return stringField.split('.').length > 1;
-		},
-		getFilterRequest(itemsToSelect) {
-			const filter = {
-				groupOp: 'and',
-				rules: [],
-				groups: []
-			};
-
-			const itemValuesToSearch = this.itemValueMultiple === false ? [this.itemValue] : this.itemValue;
-			const itemsToSearch = itemsToSelect || this.itemsToSelect;
-
-			itemsToSearch.forEach((itemToSearch) => {
-				itemValuesToSearch.forEach((pkProperty) => {
-					if (itemToSearch && !this.hasEmptyValue(itemToSearch[pkProperty])) {
-						filter.rules.push({ field: pkProperty, op: 'eq', data: itemToSearch[pkProperty] });
-					}
-				});
-			});
-
-			if (this.filterMap) {
-				const group = this.createRelatedComboFilterGroup();
-				if (group && group.rules && group.rules.length > 0) {
-					filter.groups.push(group);
-				}
-			}
-
-			if (this.fixedFilter && !this.isDisabled) {
-				filter.groups.push(this.fixedFilter);
-			}
-
-			return filter;
-		},
-		getSelectedItems() {
-			for (let i = 0, length = this.itemsToSelect.length; i < length; i++) {
-				this.selectItemById(this.itemsToSelect[i][this.itemValue] || this.itemsToSelect[i], this.itemsToSelect[i]);
-			}
-			this.checkSelectedItems();
-			if (!this.hasEmptyValue(this.modelFormMapping, this.selectedItems)) {
-				this.replaceMapping();
-			}
-		},
-		selectItemById(id) {
-			var itemValueTemp = this.itemValue;
-			var selectedItem;
-			for (let index = 0, length = this.theItems.length; index < length; index++) {
-				var item = this.theItems[index];
-				if (this.itemValueMultiple === true) {
-					let allPropsEqual = false;
-					for (let i = 0, length = this.itemValue.length; i < length; i++) {
-						if (item[this.itemValue[i]] !== id[this.itemValue[i]]) {
-							allPropsEqual = true;
-							break;
-						}
-					}
-					if (allPropsEqual === true) {
-						continue;
-					}
-					selectedItem = this.return_object ? item : id;
-					if (this.multiple === false) {
-						this.selectedItems = selectedItem;
-					} else {
-						this.selectedItems.push(selectedItem);
-					}
-					//eslint-disable-next-line no-useless-return
-					return;
-				} else if (item[itemValueTemp] === id) {
-					selectedItem = this.return_object ? item : id;
-					if (this.multiple === false) {
-						this.selectedItems = selectedItem;
-					} else {
-						this.selectedItems.push(selectedItem);
-					}
-					//eslint-disable-next-line no-useless-return
-					return;
-				} else if (item === id) {
-					this.selectedItems = item;
-					return;
-				}
-			}
-		},
-		getSelectedItemsFromPuiList() {
-			const filter = this.getFilterRequest();
-			if (this.hasEmptyValue(filter.rules) && this.hasEmptyValue(filter.groups)) {
-				if (this.firstLoad) this.firstLoad = false;
-				return;
-			}
-
-			const data = {
-				model: this.modelName,
-				queryFields: this.internalQueryFields,
-				filter
-			};
-
-			const searchOrder = this.createOrder();
-			if (searchOrder) {
-				data.order = searchOrder;
-			}
-
-			const itemsToSelectOldValue = JSON.stringify(this.itemsToSelect);
-
-			let promise = new Promise((resolve) => {
-				this.$puiRequests.postRequest(this.internalController, data, (response) => {
-					if (response && response.data) {
-						if (this.multiple === false) {
-							const itemsToSelectHaveValue = this.haveItemsToSelectValue();
-							if (itemsToSelectHaveValue) {
-								const itemsToSelectNewValue = JSON.stringify(this.itemsToSelect);
-								if (itemsToSelectNewValue != itemsToSelectOldValue && this.firstLoad) {
-									this.theItems = response.data.data;
-									this.selectItem(this.itemsToSelect);
-								} else {
-									this.selectedItems = response.data.data[0];
-								}
-							} else {
-								this.selectedItems = this.multiple ? [] : null;
-							}
-						} else {
-							this.selectedItems = response.data.data;
-						}
-						this.checkSelectedItems();
-						resolve(response.data.data);
-						if (this.firstLoad) this.firstLoad = false;
-					}
-				});
-			});
-
-			if (!this.firstLoad) {
-				this.requestDataPromise = promise;
-			}
-		},
-		haveItemsToSelectValue() {
-			const itemValues = this.itemValueMultiple === false ? [this.itemValue] : this.itemValue;
-			let itemsToSelectHasValue = true;
-			this.itemsToSelect.forEach((item) => {
-				itemValues.forEach((pkProperty) => {
-					if (item && this.hasEmptyValue(item[pkProperty])) {
-						itemsToSelectHasValue = false;
-					}
-				});
-			});
-			if (!itemsToSelectHasValue && this.onPuiSelectItemsToSelect) {
-				itemsToSelectHasValue = true;
-				this.onPuiSelectItemsToSelect.forEach((item) => {
-					itemValues.forEach((pkProperty) => {
-						if (this.hasEmptyValue(item[pkProperty])) {
-							itemsToSelectHasValue = false;
-						}
-					});
-				});
-				this.onPuiSelectItemsToSelect = null;
-			}
-			return itemsToSelectHasValue;
-		},
-		selectItems() {
-			this.selectedItems = this.multiple ? [] : null;
-			if (this.multiple === true) {
-				this.selectedItems = [];
-			}
-
-			// only for multiselect
-			this.setAvailableItems && this.setAvailableItems();
-			if (this.hasEmptyValue(this.itemsToSelect)) {
-				return;
-			}
-
-			if (this.multiple === false && this.modelName) {
-				this.getSelectedItemsFromPuiList();
-			} else {
-				this.getSelectedItems();
-			}
-
-			this.selected = true;
-		},
-		/**
-		 * Este método se aplica en el componente pui-select y cuando hay un controlador de pui.
-		 *
-		 * Lo que hace es: como el listado de items cuando hay un controlador es paginado, puede ser que,
-		 * los items a seleccionar no se encuentren en la primera página de items.
-		 * Por esto comprueba que si no coincide itemsToSelect y selectedItems, y si no coinciden,
-		 * cargará los primeros a theItems y después seleccionará
-		 **/
-		checkSelectedItems() {
-			if (this.modelName) {
-				if (this.multiple === false) {
-					// si es la selección inicial y itemsToSelect no esta en theItems, por tanto no se ha seleccionado
-					if (this.selected === false && !this.selectedItems && this.itemsToSelect && this.itemsToSelect.length > 0) {
-						this.selectedItems = this.itemsToSelect[0];
-					}
-
-					this.selectedItems && this.theItems.unshift(this.selectedItems);
-				} else {
-					// si no es la selección inicial, viene de una selección por un getItems de una búsqueda, ya no utilizamos itemsToSelect
-					if (this.selected === true) {
-						this.selectedItems.forEach((item) => {
-							this.theItems.unshift(item);
-						});
-						// si es la selección inicial
-					} else {
-						if (this.selectedItems.length < this.itemsToSelect.length) {
-							this.selectedItems = [];
-							this.itemsToSelect.forEach((item) => {
-								this.theItems.unshift(item);
-								this.selectedItems.push(item);
-							});
-						}
-					}
-				}
-			}
-		},
-		resetItems(newValue) {
-			if (this.hasEmptyValue(newValue)) {
-				this.selectedItems = this.multiple ? [] : null;
-			}
-			if (this.hasEmptyValue(this.selectedItems)) {
-				return;
-			}
-			let filtersValid = true;
-			for (var pkProperty in this.filterMap) {
-				let parentPkProperty = pkProperty;
-				if (this.filterParentMap && this.filterParentMap[pkProperty]) {
-					parentPkProperty = this.filterParentMap[pkProperty];
-				}
-				if (
-					!this.hasEmptyValue(newValue[pkProperty]) &&
-					newValue[pkProperty] !== this.selectedItems[pkProperty] &&
-					!this.hasEmptyValue(newValue[parentPkProperty]) &&
-					newValue[parentPkProperty] !== this.selectedItems[pkProperty]
-				) {
-					filtersValid = false;
-				}
-			}
-			if (!filtersValid || !this.filterMap) this.selectedItems = this.multiple ? [] : null;
-		},
-		selectPreviousValidItems() {
-			if (this.multiple === true) {
-				this.selectedItems = [];
-				this.previousSelectedItems.forEach((previousItem) => {
-					const strPkPrevItem = JSON.stringify(this.getPkFromItem(previousItem));
-					this.theItems.forEach((requestItem) => {
-						const strPkRequestItem = JSON.stringify(this.getPkFromItem(requestItem));
-						if (strPkPrevItem === strPkRequestItem) {
-							this.selectedItems.push(previousItem);
-						}
-					});
-				});
-			} else {
-				const strPkPrevItem = JSON.stringify(this.getPkFromItem(this.previousSelectedItems));
-				this.theItems.forEach((requestItem) => {
-					const strPkRequestItem = JSON.stringify(this.getPkFromItem(requestItem));
-					if (strPkPrevItem === strPkRequestItem) {
-						this.theItems.unshift(requestItem);
-						this.selectedItems = requestItem;
-					}
-				});
-			}
-		},
-		getPkFromItem(item) {
-			const theItemPkFields = Array.isArray(this.itemValue) ? this.itemValue : [this.itemValue];
-			const objectPk = {};
-			theItemPkFields.forEach((pkField) => {
-				objectPk[pkField] = item[pkField];
-			});
-			return objectPk;
-		},
-		selectItem(itemToSelect) {
-			this.itemProgrammaticallySelected = true;
-			const newSelected = this.theItems.find((element) => {
-				for (const key in itemToSelect[0]) {
-					if (Object.prototype.hasOwnProperty.call(itemToSelect[0], key)) {
-						if (itemToSelect[0][key] !== element[key]) return false;
-					}
-				}
-				return true;
-			});
-			const filter = this.getFilterRequest(itemToSelect);
-			if (this.hasEmptyValue(newSelected) && this.modelName && filter.rules.length > 0) {
-				const params = {
-					model: this.modelName,
-					filter: filter
-				};
-				this.postRequest(params, (response) => {
-					if (response && response.data && response.data.data.length > 0) {
-						this.theItems = this.theItems.concat(this.multiple === true ? response.data.data : [response.data.data[0]]);
-						this.selectedItems = this.multiple === true ? response.data.data : response.data.data[0];
-					} else {
-						this.selectedItems = undefined;
-					}
-				});
-			} else {
-				this.selectedItems = newSelected;
-			}
-		},
-		reactiveHandler(newValue) {
-			if (this.reactive) {
-				if ((!this.itemManuallySelected || Object.values(newValue[0]).some((x) => !x)) && !this.firstLoad) {
-					this.itemManuallySelected = false;
-					this.selectItem(newValue);
-				} else {
-					if (this.requestDataPromise) {
-						this.requestDataPromise.then((theItems) => {
-							if (!this.itemManuallySelected) {
-								this.theItems = theItems;
-								this.selectItem(newValue);
-							}
-							delete this.requestDataPromise;
-						});
-					}
-					this.itemManuallySelected = false;
-				}
-			}
-		},
-		hasEmptyValue(...values) {
-			return values.some(
-				(value) =>
-					value === undefined ||
-					value === null ||
-					(typeof value === 'string' && value.trim() === '') ||
-					(Array.isArray(value) && value.length === 0)
-			);
-		},
-		copySelectedItemToClipboard() {
-			let selectedText = this.$refs.arrowUp.$el.firstChild.firstChild.firstChild.firstChild.firstChild.innerHTML;
-			navigator.clipboard.writeText(selectedText).then(
-				() => {
-					// console.log('Content copied to clipboard');
-				},
-				() => {
-					// console.error('Failed to copy');
-				}
-			);
-		}
-	}
-};
-</script>