jb-select 1.0.11 → 1.1.0

package/dist/JBSelect.js

@@ -84,9 +84,13 @@ class JBSelectWebComponent extends HTMLElement {
     }
     initProp() {
         this.textValue = '';
+        /**
+         * @type {Record<string, function|null>} callbacks
+         */
         this.callbacks = {
             getOptionTitle: (option) => { return option; },
-            getOptionValue: (option) => { return option; }
+            getOptionValue: (option) => { return option; },
+            getOptionDOM:null
         };
         this.value = this.getAttribute('value') || null;
         // if user set value and current option list is not contain the option. 
@@ -264,6 +268,14 @@ class JBSelectWebComponent extends HTMLElement {
 
     }
     createOptionDOM(item){
+        if(typeof this.callbacks.getOptionDOM == 'function'){
+            return this.callbacks.getOptionDOM(item,this.onOptionClicked.bind(this));
+        }else {
+            return this._createOptionDom(item);
+        }
+    }
+
+    _createOptionDom(item){
         const optionElement = document.createElement('div');
         optionElement.classList.add('select-option');
         //it has defualt function who return wxact same input

package/dist/JBSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"JBSelect.js","sources":["../lib/JBSelect.js"],"sourcesContent":["import HTML from './JBSelect.html';\r\nimport CSS from './JBSelect.scss';\r\nclass JBSelectWebComponent extends HTMLElement {\r\n    get value() {\r\n        if(this._value){\r\n            return this.callbacks.getOptionValue(this._value);\r\n        }else{\r\n            return null;\r\n        }\r\n    }\r\n    set value(value) {\r\n        this._setValueFromOutside(value);\r\n    }\r\n    get textValue() {\r\n        return this._textValue;\r\n    }\r\n    set textValue(value) {\r\n        this._textValue = value;\r\n        this._inputElement.value = value;\r\n    }\r\n    get optionList() {\r\n        return this._optionList || [];\r\n    }\r\n    set optionList(value) {\r\n        if(!Array.isArray(value)){\r\n            console.error('your provided option list to jb-select is not a array. you must provide array value',{value});\r\n            return;\r\n        }\r\n        this._optionList = value;\r\n        //every time optionList get updated we set our value base on current option list we use _notFindedValue in case of value provided to component before optionList\r\n        this._displayOptionList = this.filterOptionList(this.textValue);\r\n        this._setValueOnOptionListChanged();\r\n        this.updateOptionListDOM();\r\n    }\r\n    get displayOptionList() {\r\n        return this._displayOptionList;\r\n    }\r\n    get isMobileDevice (){ return /Mobi/i.test(window.navigator.userAgent);}\r\n\r\n\r\n    constructor() {\r\n        super();\r\n        this.initWebComponent();\r\n        this.initProp();\r\n        \r\n    }\r\n    connectedCallback() {\r\n        // standard web component event that called when all of dom is binded\r\n        this.callOnLoadEvent();\r\n        this.callOnInitEvent();\r\n    }\r\n    callOnInitEvent() {\r\n        var event = new CustomEvent('init', { bubbles: true, composed: true });\r\n        this.dispatchEvent(event);\r\n    }\r\n    callOnLoadEvent() {\r\n        var event = new CustomEvent('load', { bubbles: true, composed: true });\r\n        this.dispatchEvent(event);\r\n    }\r\n    initWebComponent() {\r\n        this._shadowRoot = this.attachShadow({\r\n            mode: 'open'\r\n        });\r\n        const html = `<style>${CSS}</style>` + '\\n' + HTML;\r\n        const element = document.createElement('template');\r\n        element.innerHTML = html;\r\n        this._shadowRoot.appendChild(element.content.cloneNode(true));\r\n        this._webComponentWrapper = this._shadowRoot.querySelector('.jb-select-web-component');\r\n        this._inputElement = this._shadowRoot.querySelector('.select-box input');\r\n        this._optionListElement = this._shadowRoot.querySelector('.select-list');\r\n        this._optionListElementWrapper = this._shadowRoot.querySelector('.select-list-wrapper');\r\n        this.registerEventListener();\r\n       \r\n    }\r\n    registerEventListener() {\r\n        this._inputElement.addEventListener('change', this.onInputChange.bind(this));\r\n        this._inputElement.addEventListener('keypress', this.onInputKeyPress.bind(this));\r\n        this._inputElement.addEventListener('keyup', this.onInputKeyup.bind(this));\r\n        this._inputElement.addEventListener('focus', this.onInputFocus.bind(this));\r\n        this._inputElement.addEventListener('blur', this.onInputBlur.bind(this));\r\n        this.shadowRoot.querySelector('.arrow-icon').addEventListener('click', this.onArrowKeyClick.bind(this));\r\n    }\r\n    initProp() {\r\n        this.textValue = '';\r\n        this.callbacks = {\r\n            getOptionTitle: (option) => { return option; },\r\n            getOptionValue: (option) => { return option; }\r\n        };\r\n        this.value = this.getAttribute('value') || null;\r\n        // if user set value and current option list is not contain the option. \r\n        // we hold it in _notFindedValue and select value when option value get updated\r\n        this._notFindedValue = null;\r\n        this.required = false;\r\n    }\r\n    static get observedAttributes() {\r\n        return ['label', 'message', 'value', 'required', 'placeholder'];\r\n    }\r\n    attributeChangedCallback(name, oldValue, newValue) {\r\n        // do something when an attribute has changed\r\n        this.onAttributeChange(name, newValue);\r\n    }\r\n    onAttributeChange(name, value) {\r\n        switch (name) {\r\n            case 'label':\r\n                this._shadowRoot.querySelector('label .label-value').innerHTML = value;\r\n                if(value == null || value == undefined || value == \"\"){\r\n                    this._shadowRoot.querySelector('label').classList.add('--hide');\r\n                }else{\r\n                    this._shadowRoot.querySelector('label').classList.remove('--hide');\r\n                }\r\n                break;\r\n            case 'message':\r\n                this._shadowRoot.querySelector('.message-box').innerHTML = value;\r\n                break;\r\n            case 'value':\r\n                this._setValueFromOutside(value);\r\n                break;\r\n            case 'required':\r\n                if (value === \"\" || value == \"true\" || value == true) {\r\n                    this.required = true;\r\n                } else {\r\n                    this.required = false;\r\n                }\r\n                break;\r\n            case 'placeholder':\r\n                this._inputElement.placeholder = value;\r\n                break;\r\n        }\r\n\r\n    }\r\n    _setValueOnOptionListChanged(){\r\n        //when option list changed we see if current value is valid for new optionlist we set it if not we reset value to null.\r\n        //in some scenario value is setted before otionList attached so we store it on this._notFindedValue and after option list setted we set value from this._notFindedValue\r\n        if(this.value || this._notFindedValue){\r\n            //if select has no prev value or pending not finded value we dont set it becuase user may input some search terms in input box and developer-user update list base on that value\r\n            //if we set it to null the search term and this.textvalue will become null and empty too and it make impossible for user to search in dynamic back-end provided searchable list so we put this condition to prevent it\r\n            this._setValueFromOutside(this.value || this._notFindedValue);\r\n        }\r\n    }\r\n    _setValueFromOutside(value) {\r\n        //when user set value by attribute or value prop directly we call this function\r\n        const matchedOption = this.optionList.find((option) => { // if we have value mapper we set selected value by object that match mapper\r\n            if (this.callbacks.getOptionValue(option) == value) {\r\n                return option;\r\n            }\r\n        });\r\n        if (matchedOption || value == null) {\r\n            this._setValue(matchedOption);\r\n        } else {\r\n            this._notFindedValue = value;\r\n        }\r\n\r\n    }\r\n    _setValue(value) {\r\n        this._notFindedValue = null;\r\n        this._value = value;\r\n        if ((value == null || value == undefined)) {\r\n            this.textValue = '';\r\n            this._shadowRoot.querySelector('.jb-select-web-component').classList.remove('--has-value');\r\n        } else {\r\n            this.textValue = this.callbacks.getOptionTitle(value);\r\n            this._shadowRoot.querySelector('.jb-select-web-component').classList.add('--has-value');\r\n        }\r\n        //if user select an option we rest filter so user see all option again when open a select\r\n        this.updateOptionList('');\r\n    }\r\n    onArrowKeyClick(){\r\n        if(this._optionListElementWrapper.classList.contains('--show')){\r\n            this.blur();\r\n        }else{\r\n            this.focus();\r\n        }\r\n    }\r\n    onInputKeyPress() {\r\n        //TODO: raise keypress event\r\n        //hint: keypres dont called on backspace key\r\n        this.onUserTypeResetValue();\r\n    }\r\n    onInputKeyup(e) {\r\n        const inputText = e.target.value;\r\n        //here is the rare  time we update _value directly becuase we want trigger event that may read value directly from dom\r\n        if (e.key === \"Backspace\") {\r\n            //becuase on keyprees dont recieve backspace key press\r\n            //we use keypress and dont do it all here becuase we dont want arrow key or any other function key to reset value \r\n            this.onUserTypeResetValue();\r\n        }\r\n        this._textValue = inputText;\r\n        this.triggerOnInputKeyup(e);\r\n        this.updateOptionList(inputText);\r\n    }\r\n    triggerOnInputKeyup(e){\r\n        const event = new KeyboardEvent('keyup',{\r\n            altKey:e.altKey,\r\n            bubbles:e.bubbles,\r\n            cancelable:e.cancelable,\r\n            code:e.code,\r\n            ctrlKey:e.ctrlKey,\r\n            detail:e.detail,\r\n            key:e.key,\r\n            shiftKey:e.shiftKey,\r\n            charCode:e.charCode,\r\n            location:e.location,\r\n            composed:e.composed,\r\n            isComposing:e.isComposing,\r\n            metaKey:e.metaKey,\r\n            repeat:e.repeat,\r\n            keyCode:e.keyCode,\r\n            view:e.view\r\n        });\r\n        this.dispatchEvent(event);\r\n    }\r\n    onUserTypeResetValue() {\r\n        //when use type but dont select we want to reset value becuase typed value is not a valid value\r\n        //TODO: check if typed value is the same as current selected value title dont null it\r\n        this._value = null;\r\n        this._shadowRoot.querySelector('.jb-select-web-component').classList.remove('--has-value');\r\n    }\r\n    onInputChange(e) {\r\n        const inputText = e.target.value;\r\n        //here is the rare  time we update _text_value directly becuase we want trigger event that may read value directly from dom\r\n        this._textValue = inputText;\r\n    }\r\n    onInputFocus() {\r\n        this.focus();\r\n    }\r\n    onInputBlur(e) {\r\n        let focusedElement = e.relatedTarget;\r\n        if (focusedElement === this._optionListElement) {\r\n            //user click on a menu item\r\n        } else {\r\n            this.blur();\r\n        }\r\n    }\r\n    focus(){\r\n        this._inputElement.focus();\r\n        this.showOptionList();\r\n        this._webComponentWrapper.classList.add('--focused');\r\n        \r\n    }\r\n    blur(){\r\n        this._webComponentWrapper.classList.remove('--focused');\r\n        this.hideOptionList();\r\n        this.triggerInputValidation();\r\n    }\r\n    showOptionList(){\r\n        this._optionListElementWrapper.classList.add('--show');\r\n    }\r\n    hideOptionList() {\r\n        this._optionListElementWrapper.classList.remove('--show');\r\n    }\r\n    updateOptionList(filterText) {\r\n        this._displayOptionList = this.filterOptionList(filterText);\r\n        this.updateOptionListDOM();\r\n    }\r\n    updateOptionListDOM() {\r\n        const optionDomList = [];\r\n        this.displayOptionList.forEach((item) => {\r\n            const optionDOM = this.createOptionDOM(item);\r\n            optionDomList.push(optionDOM);\r\n        });\r\n        this._optionListElement.innerHTML = '';\r\n        optionDomList.forEach(optionElement => { this._optionListElement.appendChild(optionElement);});\r\n\r\n\r\n    }\r\n    createOptionDOM(item){\r\n        const optionElement = document.createElement('div');\r\n        optionElement.classList.add('select-option');\r\n        //it has defualt function who return wxact same input\r\n        optionElement.innerHTML = this.callbacks.getOptionTitle(item);\r\n        optionElement.value = item;\r\n        optionElement.addEventListener('click', this.onOptionClicked.bind(this));\r\n        return optionElement;\r\n    }\r\n    onOptionClicked(e) {\r\n        const value = e.target.value;\r\n        this.selectOption(value);\r\n        this.blur();\r\n        this._triggerOnChangeEvent();\r\n    }\r\n    selectOption(value) {\r\n        this._setValue(value);\r\n        this.triggerInputValidation();\r\n    }\r\n    filterOptionList(filterString) {\r\n        const displayOptionList = [];\r\n        this.optionList.filter((option) => {\r\n            const optionTitle = this.callbacks.getOptionTitle(option);\r\n            const isString = typeof optionTitle == 'string';\r\n            if (isString && optionTitle.includes(filterString)) {\r\n                displayOptionList.push(option);\r\n            }\r\n            if (!isString) {\r\n                console.warn(\"the provided values for optionsList is not of type string.\", { option, title: optionTitle });\r\n            }\r\n        });\r\n        return displayOptionList;\r\n    }\r\n    triggerInputValidation(showError = true) {\r\n        // this method is public and used outside of component to check if field validity param are met\r\n        let errorType = '';\r\n        let requiredValid = true;\r\n        if (this.required) {\r\n\r\n            requiredValid = this.value != null;\r\n            if (!requiredValid) {\r\n                errorType = 'REQUIRED';\r\n            }\r\n        }\r\n        let isAllValid = requiredValid; //& other validation if they added\r\n        if (isAllValid) {\r\n            this.clearValidationError();\r\n        } else if (showError) {\r\n            this.showValidationError(errorType);\r\n        }\r\n        return {\r\n            isAllValid\r\n        };\r\n    }\r\n    showValidationError(errorType) {\r\n        if (errorType == 'REQUIRED') {\r\n            const label = this.getAttribute('label');\r\n            this._shadowRoot.querySelector('.message-box').innerHTML = `${label} حتما باید انتخاب شود`;\r\n            this._shadowRoot.querySelector('.message-box').classList.add('--error');\r\n        }\r\n    }\r\n    clearValidationError() {\r\n        this._shadowRoot.querySelector('.message-box').innerHTML = this.getAttribute('message') || '';\r\n        this._shadowRoot.querySelector('.message-box').classList.remove('--error');\r\n\r\n    }\r\n    _triggerOnChangeEvent() {\r\n        const event = new Event(\"change\");\r\n        this.dispatchEvent(event);\r\n    }\r\n}\r\nconst myElementNotExists = !customElements.get('jb-select');\r\nif(myElementNotExists){\r\n    //prevent duplicate registering\r\n    window.customElements.define('jb-select', JBSelectWebComponent);\r\n}\r\n"],"names":["CSS"],"mappings":"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"}
+{"version":3,"file":"JBSelect.js","sources":["../lib/JBSelect.js"],"sourcesContent":["import HTML from './JBSelect.html';\r\nimport CSS from './JBSelect.scss';\r\nclass JBSelectWebComponent extends HTMLElement {\r\n    get value() {\r\n        if(this._value){\r\n            return this.callbacks.getOptionValue(this._value);\r\n        }else{\r\n            return null;\r\n        }\r\n    }\r\n    set value(value) {\r\n        this._setValueFromOutside(value);\r\n    }\r\n    get textValue() {\r\n        return this._textValue;\r\n    }\r\n    set textValue(value) {\r\n        this._textValue = value;\r\n        this._inputElement.value = value;\r\n    }\r\n    get optionList() {\r\n        return this._optionList || [];\r\n    }\r\n    set optionList(value) {\r\n        if(!Array.isArray(value)){\r\n            console.error('your provided option list to jb-select is not a array. you must provide array value',{value});\r\n            return;\r\n        }\r\n        this._optionList = value;\r\n        //every time optionList get updated we set our value base on current option list we use _notFindedValue in case of value provided to component before optionList\r\n        this._displayOptionList = this.filterOptionList(this.textValue);\r\n        this._setValueOnOptionListChanged();\r\n        this.updateOptionListDOM();\r\n    }\r\n    get displayOptionList() {\r\n        return this._displayOptionList;\r\n    }\r\n    get isMobileDevice (){ return /Mobi/i.test(window.navigator.userAgent);}\r\n\r\n\r\n    constructor() {\r\n        super();\r\n        this.initWebComponent();\r\n        this.initProp();\r\n        \r\n    }\r\n    connectedCallback() {\r\n        // standard web component event that called when all of dom is binded\r\n        this.callOnLoadEvent();\r\n        this.callOnInitEvent();\r\n    }\r\n    callOnInitEvent() {\r\n        var event = new CustomEvent('init', { bubbles: true, composed: true });\r\n        this.dispatchEvent(event);\r\n    }\r\n    callOnLoadEvent() {\r\n        var event = new CustomEvent('load', { bubbles: true, composed: true });\r\n        this.dispatchEvent(event);\r\n    }\r\n    initWebComponent() {\r\n        this._shadowRoot = this.attachShadow({\r\n            mode: 'open'\r\n        });\r\n        const html = `<style>${CSS}</style>` + '\\n' + HTML;\r\n        const element = document.createElement('template');\r\n        element.innerHTML = html;\r\n        this._shadowRoot.appendChild(element.content.cloneNode(true));\r\n        this._webComponentWrapper = this._shadowRoot.querySelector('.jb-select-web-component');\r\n        this._inputElement = this._shadowRoot.querySelector('.select-box input');\r\n        this._optionListElement = this._shadowRoot.querySelector('.select-list');\r\n        this._optionListElementWrapper = this._shadowRoot.querySelector('.select-list-wrapper');\r\n        this.registerEventListener();\r\n       \r\n    }\r\n    registerEventListener() {\r\n        this._inputElement.addEventListener('change', this.onInputChange.bind(this));\r\n        this._inputElement.addEventListener('keypress', this.onInputKeyPress.bind(this));\r\n        this._inputElement.addEventListener('keyup', this.onInputKeyup.bind(this));\r\n        this._inputElement.addEventListener('focus', this.onInputFocus.bind(this));\r\n        this._inputElement.addEventListener('blur', this.onInputBlur.bind(this));\r\n        this.shadowRoot.querySelector('.arrow-icon').addEventListener('click', this.onArrowKeyClick.bind(this));\r\n    }\r\n    initProp() {\r\n        this.textValue = '';\r\n        /**\r\n         * @type {Record<string, function|null>} callbacks\r\n         */\r\n        this.callbacks = {\r\n            getOptionTitle: (option) => { return option; },\r\n            getOptionValue: (option) => { return option; },\r\n            getOptionDOM:null\r\n        };\r\n        this.value = this.getAttribute('value') || null;\r\n        // if user set value and current option list is not contain the option. \r\n        // we hold it in _notFindedValue and select value when option value get updated\r\n        this._notFindedValue = null;\r\n        this.required = false;\r\n    }\r\n    static get observedAttributes() {\r\n        return ['label', 'message', 'value', 'required', 'placeholder'];\r\n    }\r\n    attributeChangedCallback(name, oldValue, newValue) {\r\n        // do something when an attribute has changed\r\n        this.onAttributeChange(name, newValue);\r\n    }\r\n    onAttributeChange(name, value) {\r\n        switch (name) {\r\n            case 'label':\r\n                this._shadowRoot.querySelector('label .label-value').innerHTML = value;\r\n                if(value == null || value == undefined || value == \"\"){\r\n                    this._shadowRoot.querySelector('label').classList.add('--hide');\r\n                }else{\r\n                    this._shadowRoot.querySelector('label').classList.remove('--hide');\r\n                }\r\n                break;\r\n            case 'message':\r\n                this._shadowRoot.querySelector('.message-box').innerHTML = value;\r\n                break;\r\n            case 'value':\r\n                this._setValueFromOutside(value);\r\n                break;\r\n            case 'required':\r\n                if (value === \"\" || value == \"true\" || value == true) {\r\n                    this.required = true;\r\n                } else {\r\n                    this.required = false;\r\n                }\r\n                break;\r\n            case 'placeholder':\r\n                this._inputElement.placeholder = value;\r\n                break;\r\n        }\r\n\r\n    }\r\n    _setValueOnOptionListChanged(){\r\n        //when option list changed we see if current value is valid for new optionlist we set it if not we reset value to null.\r\n        //in some scenario value is setted before otionList attached so we store it on this._notFindedValue and after option list setted we set value from this._notFindedValue\r\n        if(this.value || this._notFindedValue){\r\n            //if select has no prev value or pending not finded value we dont set it becuase user may input some search terms in input box and developer-user update list base on that value\r\n            //if we set it to null the search term and this.textvalue will become null and empty too and it make impossible for user to search in dynamic back-end provided searchable list so we put this condition to prevent it\r\n            this._setValueFromOutside(this.value || this._notFindedValue);\r\n        }\r\n    }\r\n    _setValueFromOutside(value) {\r\n        //when user set value by attribute or value prop directly we call this function\r\n        const matchedOption = this.optionList.find((option) => { // if we have value mapper we set selected value by object that match mapper\r\n            if (this.callbacks.getOptionValue(option) == value) {\r\n                return option;\r\n            }\r\n        });\r\n        if (matchedOption || value == null) {\r\n            this._setValue(matchedOption);\r\n        } else {\r\n            this._notFindedValue = value;\r\n        }\r\n\r\n    }\r\n    _setValue(value) {\r\n        this._notFindedValue = null;\r\n        this._value = value;\r\n        if ((value == null || value == undefined)) {\r\n            this.textValue = '';\r\n            this._shadowRoot.querySelector('.jb-select-web-component').classList.remove('--has-value');\r\n        } else {\r\n            this.textValue = this.callbacks.getOptionTitle(value);\r\n            this._shadowRoot.querySelector('.jb-select-web-component').classList.add('--has-value');\r\n        }\r\n        //if user select an option we rest filter so user see all option again when open a select\r\n        this.updateOptionList('');\r\n    }\r\n    onArrowKeyClick(){\r\n        if(this._optionListElementWrapper.classList.contains('--show')){\r\n            this.blur();\r\n        }else{\r\n            this.focus();\r\n        }\r\n    }\r\n    onInputKeyPress() {\r\n        //TODO: raise keypress event\r\n        //hint: keypres dont called on backspace key\r\n        this.onUserTypeResetValue();\r\n    }\r\n    onInputKeyup(e) {\r\n        const inputText = e.target.value;\r\n        //here is the rare  time we update _value directly becuase we want trigger event that may read value directly from dom\r\n        if (e.key === \"Backspace\") {\r\n            //becuase on keyprees dont recieve backspace key press\r\n            //we use keypress and dont do it all here becuase we dont want arrow key or any other function key to reset value \r\n            this.onUserTypeResetValue();\r\n        }\r\n        this._textValue = inputText;\r\n        this.triggerOnInputKeyup(e);\r\n        this.updateOptionList(inputText);\r\n    }\r\n    triggerOnInputKeyup(e){\r\n        const event = new KeyboardEvent('keyup',{\r\n            altKey:e.altKey,\r\n            bubbles:e.bubbles,\r\n            cancelable:e.cancelable,\r\n            code:e.code,\r\n            ctrlKey:e.ctrlKey,\r\n            detail:e.detail,\r\n            key:e.key,\r\n            shiftKey:e.shiftKey,\r\n            charCode:e.charCode,\r\n            location:e.location,\r\n            composed:e.composed,\r\n            isComposing:e.isComposing,\r\n            metaKey:e.metaKey,\r\n            repeat:e.repeat,\r\n            keyCode:e.keyCode,\r\n            view:e.view\r\n        });\r\n        this.dispatchEvent(event);\r\n    }\r\n    onUserTypeResetValue() {\r\n        //when use type but dont select we want to reset value becuase typed value is not a valid value\r\n        //TODO: check if typed value is the same as current selected value title dont null it\r\n        this._value = null;\r\n        this._shadowRoot.querySelector('.jb-select-web-component').classList.remove('--has-value');\r\n    }\r\n    onInputChange(e) {\r\n        const inputText = e.target.value;\r\n        //here is the rare  time we update _text_value directly becuase we want trigger event that may read value directly from dom\r\n        this._textValue = inputText;\r\n    }\r\n    onInputFocus() {\r\n        this.focus();\r\n    }\r\n    onInputBlur(e) {\r\n        let focusedElement = e.relatedTarget;\r\n        if (focusedElement === this._optionListElement) {\r\n            //user click on a menu item\r\n        } else {\r\n            this.blur();\r\n        }\r\n    }\r\n    focus(){\r\n        this._inputElement.focus();\r\n        this.showOptionList();\r\n        this._webComponentWrapper.classList.add('--focused');\r\n        \r\n    }\r\n    blur(){\r\n        this._webComponentWrapper.classList.remove('--focused');\r\n        this.hideOptionList();\r\n        this.triggerInputValidation();\r\n    }\r\n    showOptionList(){\r\n        this._optionListElementWrapper.classList.add('--show');\r\n    }\r\n    hideOptionList() {\r\n        this._optionListElementWrapper.classList.remove('--show');\r\n    }\r\n    updateOptionList(filterText) {\r\n        this._displayOptionList = this.filterOptionList(filterText);\r\n        this.updateOptionListDOM();\r\n    }\r\n    updateOptionListDOM() {\r\n        const optionDomList = [];\r\n        this.displayOptionList.forEach((item) => {\r\n            const optionDOM = this.createOptionDOM(item);\r\n            optionDomList.push(optionDOM);\r\n        });\r\n        this._optionListElement.innerHTML = '';\r\n        optionDomList.forEach(optionElement => { this._optionListElement.appendChild(optionElement);});\r\n\r\n\r\n    }\r\n    createOptionDOM(item){\r\n        if(typeof this.callbacks.getOptionDOM == 'function'){\r\n            return this.callbacks.getOptionDOM(item,this.onOptionClicked.bind(this));\r\n        }else{\r\n            return this._createOptionDom(item);\r\n        }\r\n    }\r\n\r\n    _createOptionDom(item){\r\n        const optionElement = document.createElement('div');\r\n        optionElement.classList.add('select-option');\r\n        //it has defualt function who return wxact same input\r\n        optionElement.innerHTML = this.callbacks.getOptionTitle(item);\r\n        optionElement.value = item;\r\n        optionElement.addEventListener('click', this.onOptionClicked.bind(this));\r\n        return optionElement;\r\n    }\r\n    onOptionClicked(e) {\r\n        const value = e.target.value;\r\n        this.selectOption(value);\r\n        this.blur();\r\n        this._triggerOnChangeEvent();\r\n    }\r\n    selectOption(value) {\r\n        this._setValue(value);\r\n        this.triggerInputValidation();\r\n    }\r\n    filterOptionList(filterString) {\r\n        const displayOptionList = [];\r\n        this.optionList.filter((option) => {\r\n            const optionTitle = this.callbacks.getOptionTitle(option);\r\n            const isString = typeof optionTitle == 'string';\r\n            if (isString && optionTitle.includes(filterString)) {\r\n                displayOptionList.push(option);\r\n            }\r\n            if (!isString) {\r\n                console.warn(\"the provided values for optionsList is not of type string.\", { option, title: optionTitle });\r\n            }\r\n        });\r\n        return displayOptionList;\r\n    }\r\n    triggerInputValidation(showError = true) {\r\n        // this method is public and used outside of component to check if field validity param are met\r\n        let errorType = '';\r\n        let requiredValid = true;\r\n        if (this.required) {\r\n\r\n            requiredValid = this.value != null;\r\n            if (!requiredValid) {\r\n                errorType = 'REQUIRED';\r\n            }\r\n        }\r\n        let isAllValid = requiredValid; //& other validation if they added\r\n        if (isAllValid) {\r\n            this.clearValidationError();\r\n        } else if (showError) {\r\n            this.showValidationError(errorType);\r\n        }\r\n        return {\r\n            isAllValid\r\n        };\r\n    }\r\n    showValidationError(errorType) {\r\n        if (errorType == 'REQUIRED') {\r\n            const label = this.getAttribute('label');\r\n            this._shadowRoot.querySelector('.message-box').innerHTML = `${label} حتما باید انتخاب شود`;\r\n            this._shadowRoot.querySelector('.message-box').classList.add('--error');\r\n        }\r\n    }\r\n    clearValidationError() {\r\n        this._shadowRoot.querySelector('.message-box').innerHTML = this.getAttribute('message') || '';\r\n        this._shadowRoot.querySelector('.message-box').classList.remove('--error');\r\n\r\n    }\r\n    _triggerOnChangeEvent() {\r\n        const event = new Event(\"change\");\r\n        this.dispatchEvent(event);\r\n    }\r\n}\r\nconst myElementNotExists = !customElements.get('jb-select');\r\nif(myElementNotExists){\r\n    //prevent duplicate registering\r\n    window.customElements.define('jb-select', JBSelectWebComponent);\r\n}\r\n"],"names":["CSS"],"mappings":"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"}

package/lib/JBSelect.js

@@ -82,9 +82,13 @@ class JBSelectWebComponent extends HTMLElement {
     }
     initProp() {
         this.textValue = '';
+        /**
+         * @type {Record<string, function|null>} callbacks
+         */
         this.callbacks = {
             getOptionTitle: (option) => { return option; },
-            getOptionValue: (option) => { return option; }
+            getOptionValue: (option) => { return option; },
+            getOptionDOM:null
         };
         this.value = this.getAttribute('value') || null;
         // if user set value and current option list is not contain the option. 
@@ -264,6 +268,14 @@ class JBSelectWebComponent extends HTMLElement {
 
     }
     createOptionDOM(item){
+        if(typeof this.callbacks.getOptionDOM == 'function'){
+            return this.callbacks.getOptionDOM(item,this.onOptionClicked.bind(this));
+        }else{
+            return this._createOptionDom(item);
+        }
+    }
+
+    _createOptionDom(item){
         const optionElement = document.createElement('div');
         optionElement.classList.add('select-option');
         //it has defualt function who return wxact same input

package/package.json

@@ -12,7 +12,7 @@
     "select",
     "web component"
   ],
-  "version": "1.0.11",
+  "version": "1.1.0",
   "bugs": "https://github.com/javadbat/jb-select/issues",
   "license": "MIT",
   "files": [