{"version":3,"sources":["webpack:///./src/mixins/columnized-options.ts"],"names":["data","optionOrder","calculatedColumns","this","columns","minimumColWidth","useCssColumns","elementWidth","props","type","Number","default","options","Array","mounted","sortIntoColumns","window","addEventListener","addResetDataCallback","beforeDestroy","removeEventListener","computed","hasColumns","columnClasses","watch","methods","Math","max","min","floor","$el","clientWidth","numberOfColumns","numberOfItems","allowOther","length","itemsPerColumn","itemsPerColumnRounded","ceil","partialColumns","hasPartialColumns","col","row","i","j"],"mappings":"+FAAe,KACdA,OACC,MAAO,CACNC,YAAa,GACbC,kBAAmBC,KAAKC,QACxBC,gBAAiB,IACjBC,eAAe,EACfC,aAAc,IAGhBC,MAAO,CACNJ,QAAS,CAAEK,KAAMC,OAAQC,QAAS,GAClCC,QAAS,CAAEH,KAAMI,MAAOF,QAAS,OAElCG,UACKX,KAAKC,QAAU,IAClBD,KAAKY,kBACLC,OAAOC,iBAAiB,SAAUd,KAAKY,iBACvCZ,KAAKe,qBAAqBf,KAAKY,mBAGjCI,gBACCH,OAAOI,oBAAoB,SAAUjB,KAAKY,kBAE3CM,SAAU,CACTC,aACC,OAAOnB,KAAKD,mBAAqB,GAAKC,KAAKD,mBAAqB,GAEjEqB,gBACC,MAAO,iCAAmCpB,KAAKG,cAAgB,cAAgB,kBAAoB,mBAAqBH,KAAKD,oBAG/HsB,MAAO,CACNZ,UACKT,KAAKC,QAAU,GAClBD,KAAKY,oBAGRU,QAAS,CACRV,kBACCZ,KAAKD,kBAAoBwB,KAAKC,IAAI,EAAGD,KAAKE,IAAIF,KAAKG,MAAM1B,KAAK2B,IAAIC,YAAc5B,KAAKE,iBAAkBF,KAAKC,UAC5G,MAAM4B,EAAkB7B,KAAKD,kBACvB+B,EAAgB9B,KAAK+B,WAAa/B,KAAKS,QAAQuB,OAAS,EAAIhC,KAAKS,QAAQuB,OACzEC,EAAiBH,EAAgBD,EASvC,GADA7B,KAAKG,cAAgB8B,EAAiB,KAAQA,EAAiB,KAAOA,EAAiB,EACnFjC,KAAKG,cACR,OAAO,EAER,IAAI+B,EAAwBX,KAAKY,KAAKF,GACtC,MAAMG,EAAiBP,EAAmBC,EAAgBD,EAC1D,IAAIQ,EAAoBD,IAAmBP,EAC3C,MAAM5B,EAAU,GAChB,IAAIqC,EAAM,EAAOC,GAAO,EACxB,IAAK,IAAIC,EAAI,EAAGA,EAAIV,EAAeU,IAClCD,IACIA,GAAOL,IACVK,EAAM,EACND,KAEDrC,EAAQsC,EAAMV,EAAkBS,GAAOE,EACnCH,GAAqBG,EAAI,IAAMV,EAAiBM,GAAkBF,EAAwB,KAC7FA,IACAG,GAAoB,GAItB,MAAM5B,EAAU,GAChB,IAAK,IAAIgC,EAAI,EAAGA,EAAIX,EAAeW,IAClChC,EAAQR,EAAQwC,IAAMA,EAGvBzC,KAAKF,YAAcW","file":"21.1c9f802b414ae0753d1b.js","sourcesContent":["export default {\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\toptionOrder: [],\r\n\t\t\tcalculatedColumns: this.columns,\r\n\t\t\tminimumColWidth: 130,\r\n\t\t\tuseCssColumns: false,\r\n\t\t\telementWidth: 0\r\n\t\t};\r\n\t},\r\n\tprops: {\r\n\t\tcolumns: { type: Number, default: 0 },\r\n\t\toptions: { type: Array, default: null }\r\n\t},\r\n\tmounted() {\r\n\t\tif (this.columns > 0) {\r\n\t\t\tthis.sortIntoColumns();\r\n\t\t\twindow.addEventListener('resize', this.sortIntoColumns);\r\n\t\t\tthis.addResetDataCallback(this.sortIntoColumns);\r\n\t\t}\r\n\t},\r\n\tbeforeDestroy() {\r\n\t\twindow.removeEventListener('resize', this.sortIntoColumns);\r\n\t},\r\n\tcomputed: {\r\n\t\thasColumns() {\r\n\t\t\treturn this.calculatedColumns >= 1 && this.calculatedColumns <= 4;\r\n\t\t},\r\n\t\tcolumnClasses() {\r\n\t\t\treturn 'cog-inner-col cog-inner-col--' + (this.useCssColumns ? 'css-columns' : 'no-css-columns') + ' cog-inner-col--' + this.calculatedColumns;\r\n\t\t}\r\n\t},\r\n\twatch: {\r\n\t\toptions() {\r\n\t\t\tif (this.columns > 0)\r\n\t\t\t\tthis.sortIntoColumns();\r\n\t\t}\r\n\t},\r\n\tmethods: {\r\n\t\tsortIntoColumns() {\r\n\t\t\tthis.calculatedColumns = Math.max(1, Math.min(Math.floor(this.$el.clientWidth / this.minimumColWidth), this.columns));\r\n\t\t\tconst numberOfColumns = this.calculatedColumns;\r\n\t\t\tconst numberOfItems = this.allowOther ? this.options.length + 1 : this.options.length;\r\n\t\t\tconst itemsPerColumn = numberOfItems / numberOfColumns;\r\n\t\t\t// Use CSS columns whenever possible.\r\n\t\t\t// By default CSS columns fill columns on an as-needed basis. When there are very few items it will favor visual balance\r\n\t\t\t// over column number specified. So if it doesn't feel like it needs all the columns allocated, it won't use them.absolute\r\n\t\t\t// The column-fill property can be used to override this behavior but it has very poor browser support.\r\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill\r\n\t\t\t// If (numberOfItems / numberOfColumns) is 3 or more, CSS columns is always safe to use, but if there are fewer items the\r\n\t\t\t// number of items on the last \"row\" need to be checked.\r\n\t\t\tthis.useCssColumns = itemsPerColumn > 2.5 || (itemsPerColumn > 1.5 && itemsPerColumn < 2);\r\n\t\t\tif (this.useCssColumns)\r\n\t\t\t\treturn false;\r\n\r\n\t\t\tlet itemsPerColumnRounded = Math.ceil(itemsPerColumn);\r\n\t\t\tconst partialColumns = numberOfColumns - (numberOfItems % numberOfColumns);\r\n\t\t\tlet hasPartialColumns = partialColumns !== numberOfColumns;\r\n\t\t\tconst columns = [];\r\n\t\t\tlet col = 0; let row = -1;\r\n\t\t\tfor (let i = 0; i < numberOfItems; i++) {\r\n\t\t\t\trow++;\r\n\t\t\t\tif (row >= itemsPerColumnRounded) {\r\n\t\t\t\t\trow = 0;\r\n\t\t\t\t\tcol++;\r\n\t\t\t\t}\r\n\t\t\t\tcolumns[row * numberOfColumns + col] = i;\r\n\t\t\t\tif (hasPartialColumns && i + 1 === numberOfItems - (partialColumns * (itemsPerColumnRounded - 1))) {\r\n\t\t\t\t\titemsPerColumnRounded--;\r\n\t\t\t\t\thasPartialColumns = false;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tconst options = [];\r\n\t\t\tfor (let j = 0; j < numberOfItems; j++) {\r\n\t\t\t\toptions[columns[j]] = j;\r\n\t\t\t}\r\n\r\n\t\t\tthis.optionOrder = options;\r\n\t\t}\r\n\t}\r\n};"],"sourceRoot":""}