@geoblink/design-system/dist/components/GeoMultiSelect.js

Geoblink Design System for Vue.js

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("lodash")):"function"==typeof define&&define.amd?define(["lodash"],t):"object"==typeof exports?exports["components/GeoMultiSelect"]=t(require("lodash")):e["components/GeoMultiSelect"]=t(e.lodash)}(window,function(e){return o={},t.m=n={89:function(e,t,n){e.exports=n("Pzee")},Bnag:function(e,t){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.__esModule=!0,e.exports.default=e.exports},EA35:function(e,t,n){"use strict";n.r(t),n.d(t,"X_AXIS_POSITION",function(){return a}),n.d(t,"Y_AXIS_POSITION",function(){return l}),n.d(t,"geoDropdownMixinFactory",function(){return u});var o=n("lSNA"),i=n.n(o),r=n("YLtl"),s=n.n(r),a={right:"right",left:"left"},l={top:"top",bottom:"bottom"};function u(e){var t,n=s.a.camelCase(e),o="".concat(n[0].toUpperCase()).concat(n.slice(1)),r="is".concat(o,"DropdownOpened");return{data:function(){return i()({},r,!1)},methods:(t={},i()(t,"dismiss".concat(o,"Dropdown"),function(){this[r]=!1}),i()(t,"toggle".concat(o,"Dropdown"),function(){this[r]=!this[r]}),t)}}},EbDI:function(e,t){e.exports=function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)},e.exports.__esModule=!0,e.exports.default=e.exports},Ijbi:function(e,t,n){var o=n("WkPL");e.exports=function(e){if(Array.isArray(e))return o(e)},e.exports.__esModule=!0,e.exports.default=e.exports},"KHd+":function(e,t,n){"use strict";function o(e,t,n,o,i,r,s,a){var l,u="function"==typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=n,u._compiled=!0),o&&(u.functional=!0),r&&(u._scopeId="data-v-"+r),s?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},u._ssrRegister=l):i&&(l=a?function(){i.call(this,this.$root.$options.shadowRoot)}:i),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(e,t){return l.call(t),c(e,t)}}else{var d=u.beforeCreate;u.beforeCreate=d?[].concat(d,l):[l]}return{exports:e,options:u}}n.d(t,"a",function(){return o})},Pzee:function(e,t,n){"use strict";n.r(t);var o=n("RIqP"),i=n.n(o),r=n("lSNA"),s=n.n(r),a=n("YLtl"),l=n.n(a),u=n("q47E"),c={name:"GeoMultiSelect",status:"ready",release:"22.1.0",mixins:[n("l0Y7").a],props:{value:{type:Array,required:!1},keyForId:{type:String,required:!0},pillCloseIcon:{type:Array,default:function(){return["fal","times"]}},visibleSelectedOptionsLimit:{type:Number,default:3}},data:function(){return{showAllSelectedOptions:!1}},computed:{isGroupedSelect:function(){return this.grouped},filteredOptions:function(){var e=this;return l.a.flatMap(e.options,function(n){var o=function(t,n){var o;return o={matches:[],isOptGroupHeader:n},s()(o,e.keyForLabel,t[e.keyForLabel]),s()(o,"items",t.items),s()(o,"notPaginatedItems",t.items),s()(o,"item",t),o}(n,n.isOptGroup);if(!e.deburredSearchPattern)return o.isOptGroupHeader?l.a.assign({},o,{items:l.a.map(o.items,t)}):o;var i=(e.getMatchesForItem||e.defaultGetMatchesForItem)(o,e.deburredSearchPattern);if(o.matches=i,o.isOptGroupHeader){if(i.length)return l.a.assign({},o,{items:l.a.map(o.items,t)});var r=l.a.map(o.items,t),a=l.a.filter(r,function(e){return!!e.matches.length});return a.length?l.a.assign({},o,{items:a}):[]}return i.length?[o]:[]});function t(t){var n;return n={matches:(e.getMatchesForItem||e.defaultGetMatchesForItem)(t,e.deburredSearchPattern),isOptGroupHeader:!1},s()(n,e.keyForLabel,t[e.keyForLabel]),s()(n,"item",t),n}},deburredSearchPattern:function(){return l.a.deburr(this.searchPattern)},isEmpty:function(){return l.a.isEmpty(this.value)},selectedOptions:function(){var e=this;return l.a.fromPairs(l.a.map(this.value,function(t){return[t[e.keyForId],!0]}))},geoPillVariant:function(){return u.VARIANTS.opaque},visibleSelectedOptions:function(){return this.showAllSelectedOptions?this.value:l.a.take(this.value,this.visibleSelectedOptionsLimit)},hasMoreSelectedOptionsThanLimit:function(){return 0<this.numberOfHiddenSelectedOptions},numberOfHiddenSelectedOptions:function(){return this.value?this.value.length-this.visibleSelectedOptionsLimit:0},isGroupChecked:function(){return function(e){var t=this;return l.a.every(e.items,function(e){return t.selectedOptions[e.item[t.keyForId]]})}},isSomeGroupOptionChecked:function(){return function(e){var t=this;return!this.isGroupChecked(e)&&l.a.some(e.items,function(e){return t.selectedOptions[e.item[t.keyForId]]})}}},methods:{toggleList:function(){this.showAllSelectedOptions=!this.showAllSelectedOptions},toggleGroup:function(e){var t=this,n=this.isGroupChecked(e)?l.a.reject(this.value,function(n){return l.a.find(e.notPaginatedItems,s()({},t.keyForId,n[t.keyForId]))}):l.a.unionBy(this.value,e.notPaginatedItems,this.keyForId);this.changeModel(n)},toggleOption:function(e){var t=e.item||e,n=this.selectedOptions[t[this.keyForId]]?l.a.reject(this.value,s()({},this.keyForId,t[this.keyForId])):[].concat(i()(this.value||[]),[t]);this.changeModel(n)},changeModel:function(e){this.$emit("input",e)}}},d=n("KHd+"),p=Object(d.a)(c,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("geo-select-base",{ref:"selectBase",staticClass:"geo-multi-select",attrs:{opened:e.isOpened,"has-more-results":e.hasMoreResultsToLoad,"fixed-width":e.fixedWidth,"popup-class":["geo-multi-select__popup",e.popupClass]},on:{"click-outside":e.closeSelect,"load-more-results":e.loadNextPage}},[e._t("toggleButton",[n("geo-select-toggle-button",{attrs:{"dropdown-icon":e.dropdownIcon,"is-empty":e.isEmpty,disabled:e.disabled,variant:e.variant},on:{click:e.toggleSelect}},[e.isEmpty?[e._v("\n        "+e._s(e.placeholder)+"\n      ")]:n("div",{staticClass:"geo-multi-select__pills-container"},[e._t("buttonContent",e._l(e.visibleSelectedOptions,function(t,o){return n("geo-pill",{key:o,staticClass:"geo-multi-select__pill",attrs:{variant:e.geoPillVariant}},[n("geo-trimmed-content",[e._v(e._s(t[e.keyForLabel]))]),e._v(" "),n("font-awesome-icon",{staticClass:"geo-multi-select__pill-remove",attrs:{icon:e.pillCloseIcon,"fixed-width":""},on:{click:function(n){return n.stopPropagation(),e.toggleOption(t)}}})],1)}),{visibleSelectedOptions:e.visibleSelectedOptions,toggleOption:e.toggleOption}),e._v(" "),e._t("toggleList",[e.hasMoreSelectedOptionsThanLimit?n("geo-link-button",{on:{click:function(t){return t.stopPropagation(),e.toggleList()}}},[e.showAllSelectedOptions?e._t("showLessPills"):e._t("showMorePills",null,{hiddenOptionsSize:e.numberOfHiddenSelectedOptions})],2):e._e()],{hiddenOptionsSize:e.numberOfHiddenSelectedOptions,showAll:e.showAllSelectedOptions,toggleList:e.toggleList})],2)],2)],{slot:"toggleButton",dropdownIcon:e.dropdownIcon,isEmpty:e.isEmpty,disabled:e.disabled,toggleSelect:e.toggleSelect,visibleSelectedOptions:e.visibleSelectedOptions,hiddenOptionsSize:e.numberOfHiddenSelectedOptions,showAll:e.showAllSelectedOptions,toggleList:e.toggleList,toggleOption:e.toggleOption}),e._v(" "),n("template",{slot:"header"},[e._t("header",null,{toggleSelect:e.toggleSelect}),e._v(" "),e.searchable?e._t("searchHeader",[n("geo-bordered-box-header-search-form",{attrs:{"search-icon":e.searchIcon,placeholder:e.searchInputPlaceholder},model:{value:e.searchPattern,callback:function(t){e.searchPattern=t},expression:"searchPattern"}})],{searchPattern:e.searchPattern}):e._e()],2),e._v(" "),e.visibleOptions.length?[e.isGroupedSelect?[e._l(e.visibleOptions,function(t,o){return[e._t("group",[n("geo-list-group",[t.isOptGroupHeader?e._t("groupTitle",[n("label",{staticClass:"geo-multi-select__label geo-multi-select__label-group"},[n("geo-marquee",{scopedSlots:e._u([{key:"default",fn:function(o){return n("geo-highlighted-string",{attrs:{"highlighted-chars":t.matches,"reference-string":t[e.keyForLabel]}})}}],null,!0)}),e._v(" "),n("input",{staticClass:"geo-multi-select_input",attrs:{slot:"trailingAccessoryItem",type:"checkbox"},domProps:{checked:e.isGroupChecked(t),indeterminate:e.isSomeGroupOptionChecked(t)},on:{input:function(n){return e.toggleGroup(t)}},slot:"trailingAccessoryItem"})],1)],{slot:"title"}):e._e(),e._v(" "),e._l(t.items,function(t,o){return e._t("groupItem",[n("geo-list-item",{key:t[e.keyForLabel]+"--"+o},[n("label",{staticClass:"geo-multi-select__label"},[n("geo-marquee",{scopedSlots:e._u([{key:"default",fn:function(o){return n("geo-highlighted-string",{attrs:{"highlighted-chars":t.matches,"reference-string":t[e.keyForLabel]}})}}],null,!0)}),e._v(" "),n("input",{staticClass:"geo-multi-select_input",attrs:{slot:"trailingAccessoryItem",type:"checkbox"},domProps:{checked:e.selectedOptions[t.item[e.keyForId]]},on:{input:function(n){return e.toggleOption(t)}},slot:"trailingAccessoryItem"})],1)])],{slot:"item",suggestedKey:t[e.keyForLabel]+"--"+o,optionIndex:o,option:t,selectedOptions:e.selectedOptions,toggleOption:e.toggleOption})})],2)],{option:t,index:o,suggestedKey:t[e.keyForLabel]+"--"+o})]})]:[e._l(e.visibleOptions,function(t,o){return[e._t("default",[n("geo-list-item",{key:t[e.keyForLabel]+"--"+o},[n("label",{staticClass:"geo-multi-select__label"},[n("geo-marquee",{scopedSlots:e._u([{key:"default",fn:function(o){return n("geo-highlighted-string",{attrs:{"highlighted-chars":t.matches,"reference-string":t[e.keyForLabel]}})}}],null,!0)}),e._v(" "),n("input",{staticClass:"geo-multi-select_input",attrs:{slot:"trailingAccessoryItem",type:"checkbox"},domProps:{checked:e.selectedOptions[t.item[e.keyForId]]},on:{input:function(n){return e.toggleOption(t)}},slot:"trailingAccessoryItem"})],1)])],{option:t,optionIndex:o,suggestedKey:t[e.keyForLabel]+"--"+o,selectedOptions:e.selectedOptions,toggleOption:e.toggleOption})]})]]:n("geo-list-clear-item",[e._t("noResults")],2),e._v(" "),e._t("moreResultsTextContent",null,{slot:"moreResultsTextContent"}),e._v(" "),e._t("footer",null,{slot:"footer",toggleSelect:e.toggleSelect})],2)},[],!1,null,null,null);t.default=p.exports},RIqP:function(e,t,n){var o=n("Ijbi"),i=n("EbDI"),r=n("ZhPi"),s=n("Bnag");e.exports=function(e){return o(e)||i(e)||r(e)||s()},e.exports.__esModule=!0,e.exports.default=e.exports},TsoJ:function(e,t,n){"use strict";n.r(t),n.d(t,"VARIANTS",function(){return i});var o=n("i4Qp"),i={inputAccessorySuffix:"inputAccessorySuffix",inputAccessoryPrefix:"inputAccessoryPrefix"},r={name:"GeoSelectToggleButton",status:"ready",release:"4.1.0",constants:{VARIANTS:i},props:{deleteIcon:{type:Array,default:function(){return["fas","times-circle"]}},dropdownIcon:{type:Array,default:function(){return["fal","chevron-down"]}},dropdownDisabledIcon:{type:Array,default:function(){return["fal","lock"]}},isValueDeletable:{type:Boolean,default:!1},isEmpty:{type:Boolean,required:!0},disabled:{type:Boolean,default:!1},variant:Object(o.a)({componentName:"GeoSelectToggleButton",propertyName:"variant",enumDictionary:i,required:!1,checkUndefined:!0})},computed:{dropdownIconForCurrentStatus:function(){return this.disabled?this.dropdownDisabledIcon:this.dropdownIcon},shouldShowDeleteButton:function(){return this.isValueDeletable&&!this.isEmpty&&!this.disabled}},methods:{handleClick:function(e){this.disabled||this.$emit("click",e)},deleteValue:function(){this.$emit("delete-value")}}},s=n("KHd+"),a=Object(s.a)(r,function(){var e,t=this,n=t.$createElement,o=t._self._c||n;return o("div",{class:(e={"geo-select-toggle-button":!0,"geo-select-toggle-button--empty":t.isEmpty,"geo-select-toggle-button--disabled":t.disabled},e["geo-select-toggle-button--"+t.variant]=t.variant,e),on:{click:function(e){return t.handleClick(e)}}},[t._t("default"),t._v(" "),t.shouldShowDeleteButton?o("font-awesome-icon",{staticClass:"geo-select-toggle-button__delete-icon",attrs:{icon:t.deleteIcon},on:{click:function(e){return e.stopPropagation(),t.deleteValue(e)}}}):t._e(),t._v(" "),o("font-awesome-icon",{staticClass:"geo-select-toggle-button__toggle-icon",attrs:{icon:t.dropdownIconForCurrentStatus}})],2)},[],!1,null,null,null);t.default=a.exports},WkPL:function(e,t){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o},e.exports.__esModule=!0,e.exports.default=e.exports},YLtl:function(t,n){t.exports=e},ZhPi:function(e,t,n){var o=n("WkPL");e.exports=function(e,t){if(e){if("string"==typeof e)return o(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(e,t):void 0}},e.exports.__esModule=!0,e.exports.default=e.exports},i4Qp:function(e,t,n){"use strict";function o(e){var t={type:String,validator:function(t){if(e.checkUndefined&&void 0===t)return!0;var n=Object.values(e.enumDictionary);if(n.includes(t))return!0;var o=n.map(function(e){return"«".concat(e,"»")}).join(", ");return console.warn("".concat(e.componentName," [component] :: Unsupported value («").concat(t,"») for «").concat(e.propertyName,"» property. Use one of ").concat(o)),!1}};return"defaultValue"in e&&(t.default=e.defaultValue),"required"in e&&(t.required=!!e.required),t}n.d(t,"a",function(){return o})},l0Y7:function(e,t,n){"use strict";var o=n("lSNA"),i=n.n(o),r=n("YLtl"),s=n.n(r),a=n("EA35"),l=n("TsoJ"),u=n("i4Qp");t.a={constants:{X_AXIS_POSITION:a.X_AXIS_POSITION,Y_AXIS_POSITION:a.Y_AXIS_POSITION},props:{fixedWidth:{type:Boolean,default:!0},options:{type:Array,required:!0,validator:function(e){for(var t=0;t<e.length;t++){var n=e[t];if("isOptGroup"in n){if(!s.a.isBoolean(n.isOptGroup))return console.warn("GeoMultiSelect [component] :: group[".concat(t,"].isOptGroup attribute must be boolean")),!1;if(n.isOptGroup&&!o(n,t))return!1}}return!0;function o(e,t){var n="group[".concat(t,"]"),o=e.items;return!!s.a.isArray(o)||(console.warn("GeoMultiSelect [component] :: ".concat(n," must have a «items» attribute which is an array of items")),!1)}}},keyForLabel:{type:String,default:"label"},placeholder:{type:String,required:!1},searchable:{type:Boolean,default:!1},grouped:{type:Boolean,default:!1},searchInputPlaceholder:{type:String,required:!1},getMatchesForItem:{type:Function},pageSize:{type:Number,required:!1,validator:function(e){return!!s.a.isFinite(e)||0<e}},dropdownIcon:{type:Array,default:function(){return["fal","chevron-down"]}},deleteIcon:{type:Array,default:function(){return["fas","times-circle"]}},searchIcon:{type:Array,default:function(){return["fal","search"]}},forceYAxisPosition:Object(u.a)({componentName:"GeoSelect",propertyName:"forceYAxisPosition",enumDictionary:a.Y_AXIS_POSITION,required:!1,checkUndefined:!0}),isValueDeletable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},variant:Object(u.a)({componentName:"GeoSelect",propertyName:"variant",enumDictionary:l.VARIANTS,defaultValue:l.VARIANTS.regular}),popupClass:{type:[String,Array,Object],required:!1}},data:function(){return{isOpened:!1,searchPattern:null,lastVisiblePage:1}},computed:{isGroupedSelect:function(){return this.grouped},filteredOptions:function(){var e=this;return s.a.flatMap(e.options,function(n){var o=function(t,n){var o;return o={matches:[],isOptGroupHeader:n},i()(o,e.keyForLabel,t[e.keyForLabel]),i()(o,"items",t.items),i()(o,"item",t),o}(n,n.isOptGroup);if(!e.deburredSearchPattern)return o.isOptGroupHeader?s.a.assign({},o,{items:s.a.map(o.items,t)}):o;var r=(e.getMatchesForItem||e.defaultGetMatchesForItem)(o,e.deburredSearchPattern);if(o.matches=r,o.isOptGroupHeader){if(r.length)return s.a.assign({},o,{items:s.a.map(o.items,t)});var a=s.a.map(o.items,t),l=s.a.filter(a,function(e){return!!e.matches.length});return l.length?s.a.assign({},o,{items:l}):[]}return r.length?[o]:[]});function t(t){var n;return n={matches:(e.getMatchesForItem||e.defaultGetMatchesForItem)(t,e.deburredSearchPattern),isOptGroupHeader:!1},i()(n,e.keyForLabel,t[e.keyForLabel]),i()(n,"item",t),n}},deburredSearchPattern:function(){return s.a.deburr(this.searchPattern)},visibleChunkRange:function(){var e,t=this,n=this.pageSize?this.lastVisiblePage*this.pageSize:this.filteredOptions.length;return this.hasToCalculatePaginatedGroupItems&&s.a.forEach(this.filteredOptions,function(o,i){var r=s.a.sumBy(s.a.slice(t.filteredOptions,0,i+1),"items.length");if(n<=r)return e=i+1,n-=r-o.items.length,!1}),{start:0,end:n,endGroup:e}},visibleOptions:function(){if(this.hasToCalculatePaginatedGroupItems){var e=s.a.cloneDeep(s.a.slice(this.filteredOptions,this.visibleChunkRange.start,this.visibleChunkRange.endGroup)),t=s.a.last(e);return t.items=s.a.slice(t.items,this.visibleChunkRange.start,this.visibleChunkRange.end),e}return s.a.slice(this.filteredOptions,this.visibleChunkRange.start,this.visibleChunkRange.end)},hasMoreResultsToLoad:function(){if(this.hasToCalculatePaginatedGroupItems){var e=this.filteredOptions.length,t=s.a.get(s.a.last(this.filteredOptions),"items.length");return this.visibleChunkRange.endGroup<e||this.visibleChunkRange.end<t}return this.lastVisiblePage*this.pageSize<this.filteredOptions.length},hasToCalculatePaginatedGroupItems:function(){return this.grouped&&this.pageSize}},methods:{defaultGetMatchesForItem:function(e,t){var n=s.a.deburr(e[this.keyForLabel]).toLowerCase(),o=s.a.deburr(t).toLowerCase(),i=n.match(o);return i?s.a.map(i[0].split(""),function(e,t){return t+i.index}):[]},closeSelect:function(){this.isOpened=!1,this.$emit("toggle",this.isOpened)},toggleSelect:function(){this.disabled||(this.isOpened=!this.isOpened,this.$emit("toggle",this.isOpened))},loadNextPage:function(e){this.lastVisiblePage++,this.$nextTick(function(){e.scrollToLastEntry()})},deleteValue:function(){this.$emit("delete-value")}}}},lSNA:function(e,t){e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},e.exports.__esModule=!0,e.exports.default=e.exports},q47E:function(e,t,n){"use strict";n.r(t),n.d(t,"VARIANTS",function(){return i});var o=n("i4Qp"),i={default:"default",light:"light",dark:"dark",opaque:"opaque",outline:"outline"},r={name:"GeoPill",status:"ready",release:"11.3.0",constants:{VARIANTS:i},props:{variant:Object(o.a)({componentName:"GeoPill",propertyName:"variant",enumDictionary:i,defaultValue:i.default})}},s=n("KHd+"),a=Object(s.a)(r,function(){var e=this.$createElement;return(this._self._c||e)("div",{class:"geo-pill geo-pill--"+this.variant},[this._t("default")],2)},[],!1,null,null,null);t.default=a.exports}},t.c=o,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:o})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var i in e)t.d(o,i,function(t){return e[t]}.bind(null,i));return o},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s=89);function t(e){if(o[e])return o[e].exports;var i=o[e]={i:e,l:!1,exports:{}};return n[e].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n,o});