{"version":3,"file":"listBox.obs.js","sources":["../../../Framework/Controls/listBox.obs"],"sourcesContent":["<!-- Copyright by the Spark Development Network; Licensed under the Rock Community License -->\r\n<template>\r\n    <RockFormField\r\n                   :modelValue=\"internalValue\"\r\n                   formGroupClasses=\"rock-drop-down-list\"\r\n                   name=\"dropdownlist\">\r\n        <template #default=\"{ uniqueId, field }\">\r\n            <div class=\"control-wrapper\">\r\n                <select :id=\"uniqueId\" class=\"form-control\" :class=\"compiledFormControlClasses\" v-bind=\"field\" v-model=\"internalValue\" ref=\"theSelect\" multiple>\r\n                    <option v-if=\"showBlankItem\" :value=\"blankValue\"></option>\r\n                    <option v-for=\"item in items\" :key=\"item.value ?? undefined\" :value=\"item.value\">{{ item.text }}</option>\r\n                </select>\r\n            </div>\r\n        </template>\r\n    </RockFormField>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n    import { ListItemBag } from \"@Obsidian/ViewModels/Utility/listItemBag\";\r\n    import { computed, nextTick, onMounted, PropType, ref, watch } from \"vue\";\r\n    import { newGuid } from \"@Obsidian/Utility/guid\";\r\n    import RockFormField from \"./rockFormField.obs\";\r\n\r\n    const props = defineProps({\r\n        modelValue: {\r\n            type: Array as PropType<Array<string>>,\r\n            default: []\r\n        },\r\n\r\n        items: {\r\n            type: Array as PropType<ListItemBag[]>,\r\n            default: []\r\n        },\r\n\r\n        formControlClasses: {\r\n            type: String as PropType<string>,\r\n            default: \"\"\r\n        },\r\n\r\n        enhanceForLongLists: {\r\n            type: Boolean as PropType<boolean>,\r\n            default: false\r\n        },\r\n\r\n        showBlankItem: {\r\n            type: Boolean as PropType<boolean>,\r\n            default: false\r\n        },\r\n\r\n        blankValue: {\r\n            type: String as PropType<string>,\r\n            default: \"\"\r\n        }\r\n    });\r\n\r\n    const emit = defineEmits<{\r\n        (e: \"update:modelValue\", value: string[]): void;\r\n    }>();\r\n\r\n    const uniqueId = `rock-listbox-${newGuid()}`;\r\n    const internalValue = ref<string[]>([]);\r\n    const theSelect = ref<HTMLElement>();\r\n    let isMounted = false;\r\n\r\n\r\n    /** The compiled list of CSS classes (props and calculated from other inputs) for the select element */\r\n    const compiledFormControlClasses = computed((): string => {\r\n        if (props.enhanceForLongLists) {\r\n            return props.formControlClasses + \" chosen-select\";\r\n        }\r\n\r\n        return props.formControlClasses;\r\n    });\r\n\r\n    /* eslint-disable @typescript-eslint/no-explicit-any */\r\n    /** Uses jQuery to get the chosen element */\r\n    function getChosenJqueryEl(): any {\r\n        const jquery = <any>window[<any>\"$\"];\r\n        let $chosenDropDown = jquery(theSelect.value);\r\n\r\n        if (!$chosenDropDown || !$chosenDropDown.length) {\r\n            $chosenDropDown = jquery(`#${uniqueId}`);\r\n        }\r\n\r\n        return $chosenDropDown;\r\n    }\r\n    /* eslint-enable @typescript-eslint/no-explicit-any */\r\n\r\n    function createOrDestroyChosen(): void {\r\n        if (!isMounted) {\r\n            return;\r\n        }\r\n\r\n        const $chosenDropDown = getChosenJqueryEl();\r\n\r\n        if (props.enhanceForLongLists) {\r\n            $chosenDropDown\r\n                .chosen({\r\n                    width: \"100%\",\r\n                    placeholder_text_multiple: \" \",\r\n                    placeholder_text_single: \" \"\r\n                })\r\n                .change(() => {\r\n                    internalValue.value = $chosenDropDown.val();\r\n                });\r\n        }\r\n        else {\r\n            $chosenDropDown.chosen(\"destroy\");\r\n        }\r\n    }\r\n\r\n    function syncValue(): void {\r\n        if (internalValue.value.length === props.modelValue.length && internalValue.value.every((v, i) => v === props.modelValue[i])) {\r\n            return;\r\n        }\r\n\r\n        internalValue.value = props.modelValue;\r\n\r\n        if (props.enhanceForLongLists) {\r\n            nextTick(() => {\r\n                const $chosenDropDown = getChosenJqueryEl();\r\n                $chosenDropDown.trigger(\"chosen:updated\");\r\n            });\r\n        }\r\n    }\r\n\r\n    watch(() => props.modelValue, () => {\r\n        syncValue();\r\n    }, { immediate: true });\r\n\r\n    watch(() => props.items, () => {\r\n        syncValue();\r\n    }, { immediate: true });\r\n\r\n    watch(internalValue, () => {\r\n        emit(\"update:modelValue\", internalValue.value);\r\n    });\r\n\r\n    watch(() => props.enhanceForLongLists, () => {\r\n        createOrDestroyChosen();\r\n    });\r\n\r\n    onMounted(() => {\r\n        isMounted = true;\r\n        createOrDestroyChosen();\r\n    });\r\n</script>\r\n"],"names":["uniqueId","concat","newGuid","internalValue","ref","theSelect","isMounted","compiledFormControlClasses","computed","props","enhanceForLongLists","formControlClasses","getChosenJqueryEl","jquery","window","$chosenDropDown","value","length","createOrDestroyChosen","chosen","width","placeholder_text_multiple","placeholder_text_single","change","val","syncValue","modelValue","every","v","i","nextTick","trigger","watch","immediate","items","emit","onMounted"],"mappings":"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"}