selectic 3.1.1 → 3.1.3

package/README.md

@@ -112,13 +112,3 @@ Run unitary tests:
 ```console
 $ npm run test
 ```
-
-## Migration information
-
-### From 3.0 to 3.1
-
-Selectic no more depends on Font-awesome. It embeds its own icons (from Material Design Icons).
-
-It is still possible to use Font-awesome icons (or from any other libraries).
-
-Read [the documentation section related to changing icons](./doc/changeIcons.md) for more information on how to handle them.

package/dist/selectic.common.js

@@ -32,7 +32,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* {{{ Variables */\n\n:root {\n    --selectic-font-size: 14px;\n    --selectic-cursor-disabled: not-allowed;\n\n    /* The main element */\n    --selectic-color: #555555;\n    --selectic-bg: #ffffff;\n\n    /* The main element (when disabled) */\n    --selectic-color-disabled: #787878;\n    --selectic-bg-disabled: #eeeeee;\n\n    /* The list */\n    --selectic-panel-bg: #f0f0f0;\n    --selectic-separator-bordercolor: #cccccc;\n    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */\n\n    /* The current selected item */\n    --selectic-selected-item-color: #428bca;\n\n    /* When mouse is over items or by selecting with key arrows */\n    --selectic-active-item-color: #ffffff;\n    --selectic-active-item-bg: #66afe9;\n\n    /* Selected values in main element */\n    --selectic-value-bg: #f0f0f0;\n    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */\n    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */\n    --selectic-more-items-bg-disabled: #cccccc;\n\n    /* Information message */\n    --selectic-info-bg: #5bc0de;\n    --selectic-info-color: #ffffff;\n\n    /* Error message */\n    --selectic-error-bg: #b72c29;\n    --selectic-error-color: #ffffff;\n\n    /* XXX: Currently it is important to keep this size for a correct scroll\n     * height estimation */\n    --selectic-input-height: 30px;\n}\n\n/* }}} */\n/* {{{ Bootstrap equivalent style */\n\n.selectic .form-control {\n    display: block;\n    width: 100%;\n    height: calc(var(--selectic-input-height) - 2px);\n    font-size: var(--selectic-font-size);\n    line-height: 1.42857143;\n    color: var(--selectic-color);\n    background-color: var(--selectic-bg);\n    background-image: none;\n    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */\n    border-radius: 4px;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.selectic .has-feedback {\n    position: relative;\n}\n.selectic .has-feedback .form-control {\n    padding-right: calc(var(--selectic-input-height) + 4px);\n}\n\n.selectic .form-control-feedback.fa,\n.selectic .form-control-feedback {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    display: block;\n    width: calc(var(--selectic-input-height) + 4px);\n    height: calc(var(--selectic-input-height) + 4px);\n    line-height: var(--selectic-input-height);\n    text-align: center;\n    pointer-events: none;\n}\n\n.selectic .alert-info {\n    background-color: var(--selectic-info-bg);\n    color: var(--selectic-info-color);\n}\n\n.selectic .alert-danger {\n    background-color: var(--selectic-error-bg);\n    color: var(--selectic-error-color);\n}\n\n/* }}} */\n\n.selectic * {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n.selectic.form-control {\n    display: inline-block;\n    padding: 0;\n    cursor: pointer;\n    border: unset;\n}\n\n.has-feedback .selectic__icon-container.form-control-feedback {\n    right: 0;\n}\n\n/* The input which contains the selected value\n * XXX: This input should stay hidden behind other elements, but is \"visible\"\n * (in term of DOM point of view) in order to get and to trigger the `focus`\n * DOM event. */\n.selectic__input-value {\n    position: fixed;\n    opacity: 0;\n    z-index: -1000;\n    top: -100px;\n}\n\n/* XXX: .form-control has been added to this selector to improve priority and\n * override some rules of the original .form-control */\n.selectic-input.form-control {\n    display: inline-flex;\n    justify-content: space-between;\n    overflow: hidden;\n    width: 100%;\n    min-height: var(--selectic-input-height);\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 5px;\n    line-height: calc(var(--selectic-input-height) - 4px);\n    color: var(--selectic-color);\n}\n\n.selectic-input__reverse-icon {\n    align-self: center;\n    margin-right: 3px;\n    cursor: default;\n}\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\n.selectic-input__clear-icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-input.focused {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.selectic-input.disabled {\n    cursor: var(--selectic-cursor-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n.selectic-input.disabled .more-items {\n\tbackground-color: var(--selectic-more-items-bg-disabled);\n}\n\n.selectic-input__selected-items {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__placeholder {\n    font-style: italic;\n    opacity: 0.7;\n    white-space: nowrap;\n}\n\n.selectic-icon {\n    color: var(--selectic-color);\n    text-align: center;\n    vertical-align: middle;\n}\n\n.selectic__extended-list {\n    position: fixed;\n    top: var(--top-position, 0);\n    z-index: 2000;\n    height: auto;\n    max-height: var(--availableSpace);\n    background-color: var(--selectic-bg, #ffffff);\n    box-shadow: 2px 5px 12px 0px #888888;\n    border-radius: 0 0 4px 4px;\n    padding: 0;\n    width: var(--list-width, 200px);\n    min-width: 200px;\n    display: grid;\n    grid-template-rows: minmax(0, max-content) 1fr;\n}\n.selectic__extended-list.selectic-position-top {\n    box-shadow: 2px -3px 12px 0px #888888;\n}\n.selectic__extended-list__list-container{\n    overflow: auto;\n}\n.selectic__extended-list__list-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    min-width: max-content;\n    padding-left: 0;\n}\n\n.selectic-item {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    padding: 2px 8px;\n    color: var(--selectic-item-color, var(--selectic-color));\n    min-height: calc(var(--selectic-input-height) - 3px);\n    list-style-type: none;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item__active {\n    background-color: var(--selectic-active-item-bg);\n    color: var(--selectic-active-item-color);\n}\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n\n.selectic-item__disabled {\n    color: var(--selectic-color-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n\n.selectic-item__is-in-group {\n    padding-left: 2em;\n}\n\n.selectic-item__is-group {\n    font-weight: bold;\n    cursor: default;\n}\n\n.selectic-item__is-group.selectable {\n    cursor: pointer;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\n.selectic .form-control-feedback.fa.selectic-search-scope {\n    width: calc(var(--selectic-input-height) * 0.75);\n    height: calc(var(--selectic-input-height) * 0.75);\n    line-height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic__message {\n    text-align: center;\n    padding: 3px;\n}\n\n.selectic .filter-panel {\n    padding: 3px;\n    margin-left: 0px;\n    margin-right: 0px;\n    background-color: var(--selectic-panel-bg);\n    border-bottom: 1px solid var(--selectic-separator-bordercolor);\n}\n\n.selectic .panelclosed {\n    max-height: 0px;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.panelopened {\n    max-height: 200px;\n    transition: max-height 0.3s ease-in;\n    overflow: hidden;\n}\n\n.selectic .filter-panel__input {\n    padding-left: 0px;\n    padding-right: 0px;\n    padding-bottom: 10px;\n    margin-bottom: 0px;\n}\n.selectic .filter-input {\n    height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic .checkbox-filter {\n    padding: 5px;\n    text-align: center;\n}\n\n.selectic .curtain-handler {\n    text-align: center;\n}\n\n.selectic .toggle-selectic {\n    margin: 5px;\n    padding-left: 0px;\n    padding-right: 0px;\n}\n\n.selectic .toggle-boolean-select-all-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .toggle-boolean-excluding-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .single-value {\n    display: grid;\n    grid-template: \"value icon\" 1fr / max-content max-content;\n\n    padding: 2px;\n    padding-left: 5px;\n    margin-left: 0;\n    margin-right: 5px;\n    /* margin top/bottom are mainly to create a gutter in multilines */\n    margin-top: 2px;\n    margin-bottom: 2px;\n\n    border-radius: 3px;\n    background-color: var(--selectic-value-bg);\n    max-height: calc(var(--selectic-input-height) - 10px);\n    max-width: 100%;\n    min-width: 30px;\n\n    overflow: hidden;\n    white-space: nowrap;\n    line-height: initial;\n    vertical-align: middle;\n}\n\n.selectic .more-items {\n    display: inline-block;\n\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 10px;\n\n    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));\n    color: var(--selectic-more-items-color, var(--selectic-info-color));\n    cursor: help;\n}\n.selectic-input__selected-items__value {\n    grid-area: value;\n    align-self: center;\n    justify-self: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__icon {\n    grid-area: icon;\n    align-self: center;\n    justify-self: center;\n    margin-left: 5px;\n}\n.selectic-input__selected-items__icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic__label-disabled {\n    opacity: 0.5;\n    transition: opacity 400ms;\n}\n\n/* XXX: override padding of bootstrap input-sm.\n * This padding introduce a line shift. */\n.selectic.input-sm {\n    padding: 0;\n}\n\n/* {{{ overflow multiline */\n\n.selectic--overflow-multiline,\n.selectic--overflow-multiline.form-control,\n.selectic--overflow-multiline .form-control {\n    height: unset;\n}\n\n.selectic--overflow-multiline .selectic-input {\n    overflow: unset;\n}\n\n.selectic--overflow-multiline .selectic-input__selected-items {\n    flex-wrap: wrap;\n}\n\n/* {{{ icons */\n\n@keyframes selectic-animation-spin {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(359deg);\n    }\n}\n\n.selectic__icon {\n    height: 1em;\n    fill: currentColor;\n}\n\n.selectic-spin {\n    animation: selectic-animation-spin 2s infinite linear;\n}\n\n/* }}} */\n";
+var css_248z = "/* {{{ Variables */\n\n:root {\n    --selectic-font-size: 14px;\n    --selectic-cursor-disabled: not-allowed;\n\n    /* The main element */\n    --selectic-color: #555555;\n    --selectic-bg: #ffffff;\n\n    /* The main element (when disabled) */\n    --selectic-color-disabled: #787878;\n    --selectic-bg-disabled: #eeeeee;\n\n    /* The list */\n    --selectic-panel-bg: #f0f0f0;\n    --selectic-separator-bordercolor: #cccccc;\n    /* --selectic-item-color: var(--selectic-color); /* Can be set in any CSS configuration */\n\n    /* The current selected item */\n    --selectic-selected-item-color: #428bca;\n\n    /* When mouse is over items or by selecting with key arrows */\n    --selectic-active-item-color: #ffffff;\n    --selectic-active-item-bg: #66afe9;\n\n    /* Selected values in main element */\n    --selectic-value-bg: #f0f0f0;\n    /* --selectic-more-items-bg: var(--selectic-info-bg); /* can be set in any CSS configuration */\n    /* --selectic-more-items-color: var(--selectic-info-color); /* can be set in any CSS configuration */\n    --selectic-more-items-bg-disabled: #cccccc;\n\n    /* Information message */\n    --selectic-info-bg: #5bc0de;\n    --selectic-info-color: #ffffff;\n\n    /* Error message */\n    --selectic-error-bg: #b72c29;\n    --selectic-error-color: #ffffff;\n\n    /* XXX: Currently it is important to keep this size for a correct scroll\n     * height estimation */\n    --selectic-input-height: 30px;\n}\n\n/* }}} */\n/* {{{ Bootstrap equivalent style */\n\n.selectic .form-control {\n    display: block;\n    width: 100%;\n    height: calc(var(--selectic-input-height) - 2px);\n    font-size: var(--selectic-font-size);\n    line-height: 1.42857143;\n    color: var(--selectic-color);\n    background-color: var(--selectic-bg);\n    background-image: none;\n    border: 1px solid var(--selectic-separator-bordercolor); /* should use a better variable */\n    border-radius: 4px;\n    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);\n    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.selectic .has-feedback {\n    position: relative;\n}\n.selectic .has-feedback .form-control {\n    padding-right: calc(var(--selectic-input-height) + 4px);\n}\n\n.selectic .form-control-feedback.fa,\n.selectic .form-control-feedback {\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 2;\n    display: block;\n    width: calc(var(--selectic-input-height) + 4px);\n    height: calc(var(--selectic-input-height) + 4px);\n    line-height: var(--selectic-input-height);\n    text-align: center;\n    pointer-events: none;\n}\n\n.selectic .alert-info {\n    background-color: var(--selectic-info-bg);\n    color: var(--selectic-info-color);\n}\n\n.selectic .alert-danger {\n    background-color: var(--selectic-error-bg);\n    color: var(--selectic-error-color);\n}\n\n/* }}} */\n\n.selectic * {\n    -webkit-box-sizing: border-box;\n    -moz-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n.selectic.form-control {\n    display: inline-block;\n    padding: 0;\n    cursor: pointer;\n    border: unset;\n}\n\n.has-feedback .selectic__icon-container.form-control-feedback {\n    right: 0;\n}\n\n/* The input which contains the selected value\n * XXX: This input should stay hidden behind other elements, but is \"visible\"\n * (in term of DOM point of view) in order to get and to trigger the `focus`\n * DOM event. */\n.selectic__input-value {\n    position: fixed;\n    opacity: 0;\n    z-index: -1000;\n    top: -100px;\n}\n\n/* XXX: .form-control has been added to this selector to improve priority and\n * override some rules of the original .form-control */\n.selectic-input.form-control {\n    display: inline-flex;\n    justify-content: space-between;\n    overflow: hidden;\n    width: 100%;\n    min-height: var(--selectic-input-height);\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-left: 5px;\n    line-height: calc(var(--selectic-input-height) - 4px);\n    color: var(--selectic-color);\n}\n\n.selectic-input__reverse-icon {\n    align-self: center;\n    margin-right: 3px;\n    cursor: default;\n}\n.selectic-input__clear-icon {\n    align-self: center;\n    margin-left: 3px;\n    cursor: pointer;\n}\n.selectic-input__clear-icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic-input.focused {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n}\n\n.selectic-input.disabled {\n    cursor: var(--selectic-cursor-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n.selectic-input.disabled .more-items {\n\tbackground-color: var(--selectic-more-items-bg-disabled);\n}\n\n.selectic-input__selected-items {\n    display: inline-flex;\n    flex-wrap: nowrap;\n    align-items: center;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__placeholder {\n    font-style: italic;\n    opacity: 0.7;\n    white-space: nowrap;\n}\n\n.selectic-icon {\n    color: var(--selectic-color);\n    text-align: center;\n    vertical-align: middle;\n}\n\n.selectic__extended-list {\n    position: fixed;\n    top: var(--top-position, 0);\n    z-index: 2000;\n    height: auto;\n    max-height: var(--availableSpace);\n    background-color: var(--selectic-bg, #ffffff);\n    box-shadow: 2px 5px 12px 0px #888888;\n    border-radius: 0 0 4px 4px;\n    padding: 0;\n    width: var(--list-width, 200px);\n    min-width: 200px;\n    display: grid;\n    grid-template-rows: minmax(0, max-content) 1fr;\n}\n.selectic__extended-list.selectic-position-top {\n    box-shadow: 2px -3px 12px 0px #888888;\n}\n.selectic__extended-list__list-container{\n    overflow: auto;\n}\n.selectic__extended-list__list-items {\n    max-height: calc(var(--selectic-input-height) * 10);\n    min-width: max-content;\n    padding-left: 0;\n}\n\n.selectic-item {\n    display: block;\n    position: relative;\n    box-sizing: border-box;\n    padding: 2px 8px;\n    color: var(--selectic-item-color, var(--selectic-color));\n    min-height: calc(var(--selectic-input-height) - 3px);\n    list-style-type: none;\n    white-space: nowrap;\n    cursor: pointer;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item_text {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n.selectic-item__active {\n    background-color: var(--selectic-active-item-bg);\n    color: var(--selectic-active-item-color);\n}\n.selectic-item__active:not(.selected) .selectic-item_icon {\n    opacity: 0.2;\n}\n.selectic-item__active.selectic-item__disabled:not(.selected) .selectic-item_icon {\n    opacity: 0;\n}\n\n.selectic-item__disabled {\n    color: var(--selectic-color-disabled);\n    background-color: var(--selectic-bg-disabled);\n}\n\n.selectic-item__is-in-group {\n    padding-left: 2em;\n}\n\n.selectic-item__is-group {\n    font-weight: bold;\n    cursor: default;\n}\n\n.selectic-item__is-group.selectable {\n    cursor: pointer;\n}\n\n.selectic-item.selected {\n    color: var(--selectic-selected-item-color);\n}\n.selectic-search-scope {\n    color: #e0e0e0;\n    left: auto;\n    right: 10px;\n}\n.selectic .form-control-feedback.fa.selectic-search-scope {\n    width: calc(var(--selectic-input-height) * 0.75);\n    height: calc(var(--selectic-input-height) * 0.75);\n    line-height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic__message {\n    text-align: center;\n    padding: 3px;\n}\n\n.selectic .filter-panel {\n    padding: 3px;\n    margin-left: 0px;\n    margin-right: 0px;\n    background-color: var(--selectic-panel-bg);\n    border-bottom: 1px solid var(--selectic-separator-bordercolor);\n}\n\n.selectic .panelclosed {\n    max-height: 0px;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.panelopened {\n    max-height: 200px;\n    transition: max-height 0.3s ease-in;\n    overflow: hidden;\n}\n\n.selectic .filter-panel__input {\n    padding-left: 0px;\n    padding-right: 0px;\n    padding-bottom: 10px;\n    margin-bottom: 0px;\n}\n.selectic .filter-input {\n    height: calc(var(--selectic-input-height) * 0.75);\n}\n\n.selectic .checkbox-filter {\n    padding: 5px;\n    text-align: center;\n}\n\n.selectic .curtain-handler {\n    text-align: center;\n}\n\n.selectic .toggle-selectic {\n    margin: 5px;\n    padding-left: 0px;\n    padding-right: 0px;\n}\n\n.selectic .toggle-boolean-select-all-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .toggle-boolean-excluding-toggle {\n    display: inline;\n    margin-right: 15px;\n}\n\n.selectic .single-value {\n    display: grid;\n    grid-template: \"value icon\" 1fr / max-content max-content;\n\n    padding: 2px;\n    padding-left: 5px;\n    margin-left: 0;\n    margin-right: 5px;\n    /* margin top/bottom are mainly to create a gutter in multilines */\n    margin-top: 2px;\n    margin-bottom: 2px;\n\n    border-radius: 3px;\n    background-color: var(--selectic-value-bg);\n    max-height: calc(var(--selectic-input-height) - 10px);\n    max-width: 100%;\n    min-width: 30px;\n\n    overflow: hidden;\n    white-space: nowrap;\n    line-height: initial;\n    vertical-align: middle;\n}\n\n.selectic .more-items {\n    display: inline-block;\n\n    padding-left: 5px;\n    padding-right: 5px;\n    border-radius: 10px;\n\n    background-color: var(--selectic-more-items-bg, var(--selectic-info-bg));\n    color: var(--selectic-more-items-color, var(--selectic-info-color));\n    cursor: help;\n}\n.selectic-input__selected-items__value {\n    grid-area: value;\n    align-self: center;\n    justify-self: normal;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.selectic-input__selected-items__icon {\n    grid-area: icon;\n    align-self: center;\n    justify-self: center;\n    margin-left: 5px;\n}\n.selectic-input__selected-items__icon:hover {\n    color: var(--selectic-selected-item-color);\n}\n\n.selectic__label-disabled {\n    opacity: 0.5;\n    transition: opacity 400ms;\n}\n\n/* XXX: override padding of bootstrap input-sm.\n * This padding introduce a line shift. */\n.selectic.input-sm {\n    padding: 0;\n}\n\n/* {{{ overflow multiline */\n\n.selectic--overflow-multiline,\n.selectic--overflow-multiline.form-control,\n.selectic--overflow-multiline .form-control {\n    height: unset;\n}\n\n.selectic--overflow-multiline .selectic-input {\n    overflow: unset;\n}\n\n.selectic--overflow-multiline .selectic-input__selected-items {\n    flex-wrap: wrap;\n}\n\n/* {{{ icons */\n\n@keyframes selectic-animation-spin {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(359deg);\n    }\n}\n\n.selectic__icon {\n    height: 1em;\n    fill: currentColor;\n}\n\n.selectic-spin {\n    animation: selectic-animation-spin 2s infinite linear;\n}\n\n/* }}} */\n";
 styleInject(css_248z);
 
 /**
@@ -138,12 +138,25 @@ function compareOptions(oldOptions, newOptions) {
         });
     });
 }
+let displayLog = false;
+function debug(fName, step, ...args) {
+    if (!displayLog) {
+        return;
+    }
+    console.log('--%s-- [%s]', fName, step, ...args);
+}
+/** Enable logs for debugging */
+debug.enable = (display) => {
+    displayLog = display;
+};
 
 /* File Purpose:
  * It keeps and computes all states at a single place.
  * Every inner components of Selectic should communicate with this file to
  * change or to get states.
  */
+/* For debugging */
+debug.enable(false);
 /* }}} */
 /* {{{ Static */
 function changeTexts$1(texts) {
@@ -178,12 +191,19 @@ let messages = {
 let defaultFamilyIcon = 'selectic';
 let icons = {};
 let closePreviousSelectic;
+/**
+ * Time to wait before considering there is no other requests.
+ * This time is await only if there is already a requested request.
+ */
+const DEBOUNCE_REQUEST = 250;
 /* }}} */
 let uid = 0;
 class SelecticStore {
     constructor(props = {}) {
         /* Do not need reactivity */
         this.requestId = 0;
+        this.requestSearchId = 0; /* Used for search request */
+        this.isRequesting = false;
         this._uid = ++uid;
         /* {{{ Props */
         const defaultProps = {
@@ -299,6 +319,7 @@ class SelecticStore {
             this.data.cacheItem.clear();
             this.setAutomaticClose();
             this.commit('isOpen', false);
+            this.clearDisplay();
             this.buildAllOptions(true);
             this.buildSelectedOptions();
         }, { deep: true });
@@ -389,6 +410,7 @@ class SelecticStore {
     /* {{{ public methods */
     commit(name, value) {
         const oldValue = this.state[name];
+        debug('commit', 'start', name, value, 'oldValue:', oldValue);
         if (oldValue === value) {
             return;
         }
@@ -397,8 +419,7 @@ class SelecticStore {
             case 'searchText':
                 this.state.offsetItem = 0;
                 this.state.activeItemIdx = -1;
-                this.state.filteredOptions = [];
-                this.state.totalFilteredOptions = Infinity;
+                this.clearDisplay();
                 if (value) {
                     this.buildFilteredOptions();
                 }
@@ -446,6 +467,7 @@ class SelecticStore {
                 }
                 break;
         }
+        debug('commit', '(done)', name);
     }
     setAutomaticChange() {
         this.state.status.automaticChange = true;
@@ -536,25 +558,54 @@ class SelecticStore {
             if (selected === undefined) {
                 selected = !isAlreadySelected;
             }
+            const selectedOptions = Array.isArray(state.selectedOptions)
+                ? state.selectedOptions
+                : [];
             if (id === null) {
-                state.internalValue = [];
-                hasChanged = internalValue.length > 0;
+                /* Keep disabled items: we cannot removed them because they
+                 * are disabled */
+                const newSelection = selectedOptions.reduce((list, item) => {
+                    if (item.disabled && item.id) {
+                        list.push(item.id);
+                    }
+                    return list;
+                }, []);
+                state.internalValue = newSelection;
+                hasChanged = internalValue.length > newSelection.length;
             }
             else if (selected && !isAlreadySelected) {
+                let addItem = true;
                 if (item === null || item === void 0 ? void 0 : item.exclusive) {
-                    /* clear the current selection because the item is exclusive */
-                    internalValue.splice(0, Infinity);
+                    const hasDisabledSelected = selectedOptions.some((opt) => {
+                        return opt.disabled;
+                    });
+                    if (hasDisabledSelected) {
+                        /* do not remove disabled item from selection */
+                        addItem = false;
+                    }
+                    else {
+                        /* clear the current selection because the item is exclusive */
+                        internalValue.splice(0, Infinity);
+                    }
                 }
                 else if (internalValue.length === 1) {
                     const selectedId = internalValue[0];
                     const selectedItem = state.allOptions.find((opt) => opt.id === selectedId);
                     if (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.exclusive) {
-                        /* clear the current selection because the old item was exclusive */
-                        internalValue.pop();
+                        if (selectedItem.disabled) {
+                            /* If selected item is disabled and exclusive do not change the selection */
+                            addItem = false;
+                        }
+                        else {
+                            /* clear the current selection because the old item was exclusive */
+                            internalValue.pop();
+                        }
                     }
                 }
-                internalValue.push(id);
-                hasChanged = true;
+                if (addItem) {
+                    internalValue.push(id);
+                    hasChanged = true;
+                }
             }
             else if (!selected && isAlreadySelected) {
                 internalValue.splice(internalValue.indexOf(id), 1);
@@ -577,6 +628,11 @@ class SelecticStore {
                 if (id !== oldValue) {
                     return hasChanged;
                 }
+                const oldOption = state.selectedOptions;
+                if (oldOption === null || oldOption === void 0 ? void 0 : oldOption.disabled) {
+                    /* old selection is disabled so do not unselect it */
+                    return hasChanged;
+                }
                 id = null;
             }
             else if (id === oldValue) {
@@ -631,14 +687,14 @@ class SelecticStore {
         this.state.status.errorMessage = '';
     }
     clearCache(forceReset = false) {
+        debug('clearCache', 'start', forceReset);
         const isPartial = vue.unref(this.isPartial);
         const total = isPartial ? Infinity : 0;
         this.data.cacheItem.clear();
         this.state.allOptions = [];
         this.state.totalAllOptions = total;
         this.state.totalDynOptions = total;
-        this.state.filteredOptions = [];
-        this.state.totalFilteredOptions = Infinity;
+        this.clearDisplay();
         this.state.status.errorMessage = '';
         this.state.status.hasChanged = false;
         if (forceReset) {
@@ -770,6 +826,13 @@ class SelecticStore {
             this.checkAutoSelect();
         }
     }
+    /** Reset the display cache in order to rebuild it */
+    clearDisplay() {
+        debug('clearDisplay', 'start');
+        this.state.filteredOptions = [];
+        this.state.totalFilteredOptions = Infinity;
+    }
+    /** rebuild the state filteredOptions to normalize their values */
     updateFilteredOptions() {
         if (!this.data.doNotUpdate) {
             this.state.filteredOptions = this.buildItems(this.state.filteredOptions);
@@ -819,7 +882,7 @@ class SelecticStore {
         });
         return listOptions;
     }
-    /* This method is for the computed property elementOptions */
+    /** This method is for the computed property elementOptions */
     getElementOptions() {
         const options = deepClone(this.props.childOptions, ['data']);
         const childOptions = [];
@@ -850,7 +913,9 @@ class SelecticStore {
         });
         return childOptions;
     }
+    /** Generate the list of all options by combining the 3 option lists */
     buildAllOptions(keepFetched = false, stopFetch = false) {
+        debug('buildAllOptions', 'start', 'keepFetched', keepFetched, 'stopFetch', stopFetch);
         const allOptions = [];
         let listOptions = [];
         let elementOptions = [];
@@ -922,8 +987,6 @@ class SelecticStore {
             }
         }
         if (!stopFetch) {
-            this.state.filteredOptions = [];
-            this.state.totalFilteredOptions = Infinity;
             this.buildFilteredOptions().then(() => {
                 /* XXX: To recompute for strict mode and auto-select */
                 this.assertCorrectValue();
@@ -939,18 +1002,21 @@ class SelecticStore {
             const options = this.filterOptions(allOptions, search);
             this.setFilteredOptions(options);
         }
+        debug('buildAllOptions', 'end', 'allOptions:', this.state.allOptions.length, 'totalAllOptions:', this.state.totalAllOptions);
     }
     async buildFilteredOptions() {
-        if (!this.state.isOpen) {
+        const state = this.state;
+        if (!state.isOpen) {
             /* Do not try to fetch anything while the select is not open */
             return;
         }
-        const allOptions = this.state.allOptions;
-        const search = this.state.searchText;
-        const totalAllOptions = this.state.totalAllOptions;
+        const allOptions = state.allOptions;
+        const search = state.searchText;
+        const totalAllOptions = state.totalAllOptions;
         const allOptionsLength = allOptions.length;
-        let filteredOptionsLength = this.state.filteredOptions.length;
+        let filteredOptionsLength = state.filteredOptions.length;
         const hasAllItems = vue.unref(this.hasAllItems);
+        debug('buildFilteredOptions', 'start', 'hasAllItems:', hasAllItems, 'allOptions', allOptions.length, 'search:', search, 'filteredOptionsLength:', filteredOptionsLength);
         if (hasAllItems) {
             /* Everything has already been fetched and stored in filteredOptions */
             return;
@@ -967,16 +1033,17 @@ class SelecticStore {
             return;
         }
         /* When we only have partial options */
-        const offsetItem = this.state.offsetItem;
+        const offsetItem = state.offsetItem;
         const marginSize = vue.unref(this.marginSize);
         const endIndex = offsetItem + marginSize;
+        debug('buildFilteredOptions', 'partial options', 'offsetItem:', offsetItem, 'marginSize:', marginSize, 'filteredOptionsLength', filteredOptionsLength);
         if (endIndex <= filteredOptionsLength) {
             return;
         }
         if (!search && endIndex <= allOptionsLength) {
-            this.setFilteredOptions(this.buildGroupItems(allOptions), false, totalAllOptions + this.state.groups.size);
+            this.setFilteredOptions(this.buildGroupItems(allOptions), false, totalAllOptions + state.groups.size);
             const isPartial = vue.unref(this.isPartial);
-            if (isPartial && this.state.totalDynOptions === Infinity) {
+            if (isPartial && state.totalDynOptions === Infinity) {
                 this.fetchData();
             }
             return;
@@ -989,6 +1056,7 @@ class SelecticStore {
                 return;
             }
         }
+        debug('buildFilteredOptions', 'end', '(will call fetchData)', this.state.filteredOptions.length);
         await this.fetchData();
     }
     async buildSelectedOptions() {
@@ -1042,6 +1110,39 @@ class SelecticStore {
             state.selectedOptions = items[0];
         }
     }
+    async fetchRequest(fetchCallback, search, offset, limit) {
+        const searchRqId = ++this.requestSearchId;
+        if (!search) {
+            ++this.requestId;
+        }
+        const requestId = this.requestId;
+        debug('fetchRequest', 'start', 'search:', search, 'offset:', offset, 'limit:', limit, 'requestId:', requestId, 'requestSearchId:', searchRqId, 'isRequesting:', this.isRequesting);
+        if (this.isRequesting) {
+            debug('fetchRequest', `await ${DEBOUNCE_REQUEST}ms`);
+            /* debounce the call to avoid sending too much requests */
+            await new Promise((resolve) => {
+                setTimeout(resolve, DEBOUNCE_REQUEST);
+            });
+            /* Check if there are other requested requests, in such case drop this one */
+            if (requestId !== this.requestId || (search && searchRqId !== this.requestSearchId)) {
+                debug('fetchRequest', '××deprecated××', requestId, searchRqId);
+                return false;
+            }
+        }
+        this.isRequesting = true;
+        const response = await fetchCallback(search, offset, limit);
+        /* Check if request is obsolete */
+        if (requestId !== this.requestId || (search && searchRqId !== this.requestSearchId)) {
+            debug('fetchRequest', '×××deprecated×××', requestId, searchRqId);
+            return false;
+        }
+        this.isRequesting = false;
+        const deprecated = searchRqId !== this.requestSearchId;
+        debug('fetchRequest', 'end', response.result.length, response.total, deprecated);
+        return Object.assign(Object.assign({}, response), { 
+            /* this is to fulfill the cache */
+            deprecated: deprecated });
+    }
     async fetchData() {
         const state = this.state;
         const labels = this.data.labels;
@@ -1063,9 +1164,14 @@ class SelecticStore {
         const offset = filteredOptionsLength - this.nbGroups(state.filteredOptions) - dynOffset;
         const nbItems = endIndex - offset;
         const limit = Math.ceil(nbItems / pageSize) * pageSize;
+        debug('fetchData', 'start', 'search:', search, 'offset:', offset, 'limit:', limit);
         try {
-            const requestId = ++this.requestId;
-            const { total: rTotal, result } = await fetchCallback(search, offset, limit);
+            const response = await this.fetchRequest(fetchCallback, search, offset, limit);
+            if (!response) {
+                debug('fetchData', '×× deprecated ××', search, offset, limit);
+                return;
+            }
+            const { total: rTotal, result, deprecated } = response;
             let total = rTotal;
             let errorMessage = '';
             /* Assert result is correctly formatted */
@@ -1083,11 +1189,12 @@ class SelecticStore {
             if (!search) {
                 /* update cache */
                 state.totalDynOptions = total;
-                const old = state.dynOptions.splice(offset, limit, ...result);
+                const old = state.dynOptions.splice(offset, result.length, ...result);
                 if (compareOptions(old, result)) {
                     /* Added options are the same as previous ones.
                      * Stop fetching to avoid infinite loop
                      */
+                    debug('fetchData', 'no new values');
                     if (!vue.unref(this.hasFetchedAllItems)) {
                         /* Display error if all items are not fetch
                          * We can have the case where old value and result
@@ -1095,14 +1202,21 @@ class SelecticStore {
                          * total is 0 */
                         errorMessage = labels.wrongQueryResult;
                     }
-                    setTimeout(() => this.buildAllOptions(true, true), 0);
+                    setTimeout(() => {
+                        debug('fetchData', 'before buildAllOptions (stopped)', 'offsetItem:', this.state.offsetItem, 'allOptions:', this.state.allOptions.length);
+                        this.buildAllOptions(true, true);
+                    }, 0);
                 }
                 else {
-                    setTimeout(() => this.buildAllOptions(true), 0);
+                    setTimeout(() => {
+                        debug('fetchData', 'before buildAllOptions', 'offsetItem:', this.state.offsetItem, 'allOptions:', this.state.allOptions.length);
+                        this.buildAllOptions(true);
+                    }, 0);
                 }
             }
-            /* Check request is not obsolete */
-            if (requestId !== this.requestId) {
+            /* Check request (without search) is not obsolete */
+            if (deprecated) {
+                debug('fetchData', '××× deprecated ×××', search, offset, limit);
                 return;
             }
             if (!search) {
@@ -1131,14 +1245,17 @@ class SelecticStore {
         }
         catch (e) {
             state.status.errorMessage = e.message;
+            debug('fetchData', 'error', e.message);
             if (!search) {
                 state.totalDynOptions = 0;
                 this.buildAllOptions(true, true);
             }
         }
         this.state.status.searching = false;
+        debug('fetchData', 'end');
     }
     filterOptions(options, search) {
+        debug('filterOptions', 'start', 'options:', options.length, 'search:', search);
         if (!search) {
             return this.buildGroupItems(options);
         }
@@ -1149,6 +1266,7 @@ class SelecticStore {
     addStaticFilteredOptions(fromDynamic = false) {
         const search = this.state.searchText;
         let continueLoop = fromDynamic;
+        debug('addStaticFilteredOptions', 'start', 'fromDynamic:', fromDynamic, 'optionBehaviorOperation:', this.state.optionBehaviorOperation);
         if (this.state.optionBehaviorOperation !== 'sort') {
             return;
         }
@@ -1174,6 +1292,7 @@ class SelecticStore {
             }
             this.setFilteredOptions(options, true);
         }
+        debug('addStaticFilteredOptions', 'end');
     }
     buildSelectedItems(ids) {
         return this.buildItems(ids.map((id) => {
@@ -1215,6 +1334,7 @@ class SelecticStore {
     }
     buildGroupItems(options, previousItem) {
         let previousGroupId = previousItem && previousItem.group;
+        debug('buildGroupItems', 'start', 'options:', options.length, 'previousGroupId:', previousGroupId);
         const list = this.buildItems(options).reduce((items, item) => {
             if (item.group !== previousGroupId) {
                 const groupId = item.group;
@@ -1231,6 +1351,7 @@ class SelecticStore {
             items.push(item);
             return items;
         }, []);
+        debug('buildGroupItems', 'end', list.length);
         return list;
     }
     buildOptionBehavior(optionBehavior, state) {
@@ -1281,15 +1402,23 @@ class SelecticStore {
         if (doNotCheck || !hasFetchedAllItems) {
             return;
         }
+        const selectedOptions = state.selectedOptions;
         const enabledOptions = state.allOptions.filter((opt) => !opt.disabled);
-        const nb = enabledOptions.length;
+        const nbEnabled = enabledOptions.length;
         const value = state.internalValue;
         const hasValue = Array.isArray(value) ? value.length > 0 : value !== null;
-        const hasValidValue = hasValue && (Array.isArray(value) ? value.every((val) => this.hasValue(val)) :
+        const hasDisabledSelected = Array.isArray(selectedOptions)
+            ? selectedOptions.some((opt) => opt.disabled)
+            : false;
+        const hasOnlyValidValue = hasValue && !hasDisabledSelected && (Array.isArray(value) ? value.every((val) => this.hasValue(val)) :
             this.hasValue(value));
-        const isEmpty = nb === 0;
-        const hasOnlyOneOption = nb === 1 && hasValidValue && !state.allowClearSelection;
-        if (hasOnlyOneOption || isEmpty) {
+        const isEmpty = nbEnabled === 0;
+        const hasOnlyOneOption = nbEnabled === 1 && hasOnlyValidValue && !state.allowClearSelection;
+        const isExclusiveDisabledItem = Array.isArray(selectedOptions) /* which means "multiple" mode */
+            && selectedOptions.length === 1
+            && selectedOptions[0].exclusive
+            && selectedOptions[0].disabled;
+        if (hasOnlyOneOption || isEmpty || isExclusiveDisabledItem) {
             if (state.isOpen) {
                 this.setAutomaticClose();
                 this.commit('isOpen', false);
@@ -1348,6 +1477,7 @@ class SelecticStore {
     }
     /** assign new value to the filteredOptions and apply change depending on it */
     setFilteredOptions(options, add = false, length = 0) {
+        debug('setFilteredOptions', 'start', 'options:', options.length, 'add', add, 'length', length);
         if (!add) {
             this.state.filteredOptions = options;
             this.state.totalFilteredOptions = length || options.length;
@@ -1708,6 +1838,18 @@ let MainInput = class MainInput extends vtyx.Vue {
             ? Array.isArray(value) && value.length > 0
             : value !== null;
     }
+    get disabledList() {
+        const state = this.store.state;
+        const isMultiple = state.multiple;
+        const value = state.selectedOptions;
+        if (!isMultiple || !value) {
+            return [];
+        }
+        const disabledValues = value.filter((option) => {
+            return option.disabled;
+        });
+        return disabledValues;
+    }
     get displayPlaceholder() {
         const placeholder = this.store.state.placeholder;
         const hasValue = this.hasValue;
@@ -1726,10 +1868,12 @@ let MainInput = class MainInput extends vtyx.Vue {
         const state = this.store.state;
         const isMultiple = state.multiple;
         const value = state.internalValue;
-        const hasOnlyOneValue = Array.isArray(value) && value.length === 1;
+        const nbSelection = (Array.isArray(value) && value.length) || 0;
+        const hasOnlyOneValue = nbSelection === 1;
+        const hasOnlyDisabled = nbSelection <= this.disabledList.length;
         /* Should not display the clear action if there is only one selected
          * item in multiple (as this item has already its remove icon) */
-        return !isMultiple || !hasOnlyOneValue;
+        return !isMultiple || !hasOnlyOneValue || !hasOnlyDisabled;
     }
     get clearedLabel() {
         const isMultiple = this.store.state.multiple;
@@ -1847,6 +1991,9 @@ let MainInput = class MainInput extends vtyx.Vue {
         /* Check if there is enough space to display items like there are
          * currently shown */
         const el = this.$refs.selectedItems;
+        if (!el) {
+            return;
+        }
         const parentEl = el.parentElement;
         if (!document.contains(parentEl)) {
             /* The element is currently not in DOM */
@@ -1945,7 +2092,7 @@ let MainInput = class MainInput extends vtyx.Vue {
                             click: () => this.$emit('item:click', item.id),
                         } },
                         vtyx.h("span", { class: "selectic-input__selected-items__value" }, item.text),
-                        !this.isDisabled && (vtyx.h(Icon$1, { icon: "times", class: "selectic-input__selected-items__icon", store: this.store, on: {
+                        !this.isDisabled && !item.disabled && (vtyx.h(Icon$1, { icon: "times", class: "selectic-input__selected-items__icon", store: this.store, on: {
                                 'click.prevent.stop': () => this.selectItem(item.id),
                             } }))))),
                     this.moreSelectedNb && (vtyx.h("div", { class: "single-value more-items", title: this.moreSelectedTitle }, this.moreSelectedNb)))),
@@ -2699,7 +2846,8 @@ let Selectic = class Selectic extends vtyx.Vue {
             const store = this.store;
             const keepOpenWithOtherSelectic = this.params.keepOpenWithOtherSelectic;
             const extendedList = this.$refs.extendedList;
-            if (!extendedList) {
+            const extendedListEl = extendedList === null || extendedList === void 0 ? void 0 : extendedList.$el;
+            if (!extendedListEl) {
                 /* this component is not focused anymore */
                 if (!keepOpenWithOtherSelectic) {
                     this.removeListeners();
@@ -2708,7 +2856,7 @@ let Selectic = class Selectic extends vtyx.Vue {
                 return;
             }
             const target = evt.target;
-            if (!extendedList.$el.contains(target) && !this.$el.contains(target)) {
+            if (!extendedListEl.contains(target) && !this.$el.contains(target)) {
                 store.commit('isOpen', false);
             }
         };
@@ -2801,14 +2949,23 @@ let Selectic = class Selectic extends vtyx.Vue {
     /* }}} */
     /* {{{ private methods */
     computeWidth() {
-        const el = this.$refs.mainInput.$el;
-        this.width = el.offsetWidth;
+        var _a;
+        const mainInput = (_a = this.$refs) === null || _a === void 0 ? void 0 : _a.mainInput;
+        const mainEl = mainInput === null || mainInput === void 0 ? void 0 : mainInput.$el;
+        if (!mainEl) {
+            /* This method has been called too soon (before render function)
+             * or too late (after unmount) */
+            return;
+        }
+        this.width = mainEl.offsetWidth;
     }
     computeOffset(doNotAddListener = false) {
-        const mainInput = this.$refs.mainInput;
+        var _a;
+        const mainInput = (_a = this.$refs) === null || _a === void 0 ? void 0 : _a.mainInput;
         const mainEl = mainInput === null || mainInput === void 0 ? void 0 : mainInput.$el;
         if (!mainEl) {
-            /* This method has been called too soon (before render function) */
+            /* This method has been called too soon (before render function)
+             * or too late (after unmount) */
             return;
         }
         const _elementsListeners = this._elementsListeners;
@@ -2942,13 +3099,14 @@ let Selectic = class Selectic extends vtyx.Vue {
     checkFocus() {
         /* Await that focused element becomes active */
         setTimeout(() => {
+            var _a;
             const focusedEl = document.activeElement;
-            const extendedList = this.$refs.extendedList;
+            const extendedList = (_a = this.$refs) === null || _a === void 0 ? void 0 : _a.extendedList;
             /* check if there is a focused element (if none the body is
              * selected) and if it is inside current Selectic */
             if (focusedEl === document.body
                 || this.$el.contains(focusedEl)
-                || (extendedList && extendedList.$el.contains(focusedEl))) {
+                || (extendedList === null || extendedList === void 0 ? void 0 : extendedList.$el.contains(focusedEl))) {
                 return;
             }
             this.store.commit('isOpen', false);