{"version":3,"file":"./modules/RangeDropdown.xxxxxxxx.js","mappings":"0LAce,MAAMA,EASjB,YAAOC,CAAMC,EAfM,iCAgBfC,MAAMC,KAAKC,SAASC,iBAAiBJ,IAAWK,OAAQC,IAAuBA,EAAKC,QAAQC,mBAAmBC,QAASC,IACpH,IAAIZ,EAAcY,GAClBA,EAAQH,QAAQC,kBAAoB,QAE5C,CAEA,WAAAG,CAAYD,EAAsBE,EAA0C,CAAC,GACzEC,KAAKH,QAAUA,EACfG,KAAKD,SAAU,QAAWC,KAAKH,QAASI,OAAOC,OAAOF,KAAKG,oBAAqBJ,IAChFC,KAAKI,MAAQJ,KAAKH,QAAQQ,cAAc,IAAIL,KAAKD,QAAQO,oBACzDN,KAAKO,eAAiBP,KAAKH,QAAQQ,cAAc,IAAIL,KAAKD,QAAQO,0BAClEN,KAAKQ,KAAOR,KAAKH,QAAQQ,cAAc,IAAIL,KAAKD,QAAQO,mBACxDN,KAAKS,QAAS,EAEdT,KAAKU,gBAAgBC,SAASX,KAAKO,eAAeK,YAClDZ,KAAKa,MACT,CAEU,IAAAA,GAQN,OAPAb,KAAKc,qBACAC,oBACAC,oBACAC,2BACAC,uBAGElB,IACX,CAEU,QAAAmB,CAASC,GAMf,OALApB,KAAKU,gBAAgBU,GAErBpB,KAAKO,eAAeK,UAAYZ,KAAKoB,MAAMC,WAC3CrB,KAAKH,QAAQyB,cAAc,IAAIC,YAAY,SAAU,CAAEC,SAAS,KAEzDxB,IACX,CAEU,eAAAU,CAAgBU,GACtBpB,KAAKoB,MAAQpB,KAAKH,QAAQuB,MAAQA,CACtC,CAEU,SAAAK,CAAUL,GAIhB,OAHApB,KAAKS,OAASW,GACd,QAAYpB,KAAKH,QAAS,GAAGG,KAAKD,QAAQO,kBAAmBN,KAAKS,QAE3DT,KAAKS,MAChB,CAEU,kBAAAK,GAWN,OAVA,OAAUd,KAAKI,MAAO,SAASsB,UAAU,IAAM1B,KAAKyB,WAAWzB,KAAKS,UACpE,OAAUT,KAAKH,QAAS,SAAS6B,UAAWC,IACxC,MAAMC,EAASD,EAAEC,OACbC,EAAiBD,EAAOE,UAAUC,SAAS,gBAAkBH,EAAOE,UAAUC,SAAS,gBAE9E,UAAVJ,EAAEK,KAA6B,WAAVL,EAAEK,KAAoBH,IAC1C7B,KAAKyB,WAAWzB,KAAKS,UAItBT,IACX,CAEU,iBAAAe,GAON,OANA,OAAUzB,SAAU,aAAa2C,MAC7B,OAAO,IAAMjC,KAAKS,SAClB,OAAI,EAAGmB,YAAaA,IACpB,OAAOA,KAAW,QAAUA,EAAQ5B,KAAKH,WAC3C6B,UAAU,IAAM1B,KAAKyB,WAAU,IAE1BzB,IACX,CAEU,iBAAAgB,GAMN,OALA,OAAUhB,KAAKQ,KAAM,aAAayB,MAC9B,OAAI,EAAEL,YAAaA,IACnB,OAAI,EAAGlC,SAAW0B,YAAcT,SAASS,KAC3CM,UAAUN,GAASpB,KAAKmB,SAASC,GAAOK,WAAU,IAE7CzB,IACX,CAEU,wBAAAiB,GAUN,OATAjB,KAAKQ,KAAK0B,iBAAiB,WAAaC,IACpC,MAAMP,EAAsBO,EAAMP,OAChCR,EAAQT,SAASiB,EAAOlC,QAAQ0B,OAEjB,UAAde,EAAMH,KACLhC,KAAKmB,SAASC,KAIfpB,IACX,CAEU,oBAAAkB,GAEN,OADAlB,KAAKH,QAAQqC,iBAAiB,cAAgBC,GAAuBnC,KAAKmB,SAASiB,OAAOD,EAAME,OAAOjB,SAChGpB,IACX,CAEU,iBAAAG,GACN,MAAO,CACHG,UAAW,WAEnB,EAGJrB,EAAcC,O","sources":["webpack:///./modules/RangeDropdown.ts"],"sourcesContent":["import { fromEvent } from 'rxjs';\r\nimport { map, filter } from 'rxjs/operators';\r\n\r\nimport { getOptions } from '../helpers/helperFunctions';\r\nimport { toggleClass, isChildOf } from '../helpers/DOMHelpers';\r\n\r\nimport { Optional } from '../typings/mapped-types';\r\n\r\nconst moduleSelector = '[data-module=\"RangeDropdown\"]';\r\n\r\nexport interface RangeDropdownOptions {\r\n    mainClass?: string;\r\n}\r\n\r\nexport default class RangeDropdown {\r\n    protected element: HTMLElementWithNumberValue;\r\n    protected options: RangeDropdownOptions;\r\n    protected list: HTMLElement;\r\n    protected label: HTMLElement;\r\n    protected labelValueNode: HTMLElement;\r\n    protected value: number;\r\n    protected isOpen: boolean;\r\n\r\n    static setup(selector: string = moduleSelector): void {\r\n        Array.from(document.querySelectorAll(selector)).filter((node: HTMLElement) => !node.dataset.moduleInitialized).forEach((element: HTMLElement) => {\r\n            new RangeDropdown(element);\r\n            element.dataset.moduleInitialized = 'true';\r\n        });\r\n    }\r\n\r\n    constructor(element: HTMLElement, options: Optional<RangeDropdownOptions> = {}) {\r\n        this.element = element as HTMLElementWithNumberValue;\r\n        this.options = getOptions(this.element, Object.assign(this.getDefaultOptions(), options));\r\n        this.label = this.element.querySelector(`.${this.options.mainClass}__label`);\r\n        this.labelValueNode = this.element.querySelector(`.${this.options.mainClass}__label-value`);\r\n        this.list = this.element.querySelector(`.${this.options.mainClass}__list`);\r\n        this.isOpen = false;\r\n\r\n        this.setInitialValue(parseInt(this.labelValueNode.innerHTML));\r\n        this.init();\r\n    }\r\n\r\n    protected init(): RangeDropdown {\r\n        this.listenToLableClick()\r\n            .listenToBodyClick()\r\n            .listenToListClick()\r\n            .listenToItemListKeyPress()\r\n            .listenToCustomChange();\r\n\r\n      \r\n        return this;\r\n    }\r\n\r\n    protected setValue(value: number): this {\r\n        this.setInitialValue(value);\r\n\r\n        this.labelValueNode.innerHTML = this.value.toString();\r\n        this.element.dispatchEvent(new CustomEvent('change', { bubbles: true }));\r\n\r\n        return this;\r\n    }\r\n\r\n    protected setInitialValue(value: number): void {\r\n        this.value = this.element.value = value;\r\n    }\r\n\r\n    protected setIsOpen(value: boolean): boolean {\r\n        this.isOpen = value;\r\n        toggleClass(this.element, `${this.options.mainClass}--open`, this.isOpen);\r\n\r\n        return this.isOpen;\r\n    }\r\n\r\n    protected listenToLableClick(): RangeDropdown {\r\n        fromEvent(this.label, 'click').subscribe(() => this.setIsOpen(!this.isOpen));\r\n        fromEvent(this.element, 'keyup').subscribe((e:KeyboardEvent) => {   \r\n            const target = e.target as HTMLElement,\r\n                isThumbFocused = target.classList.contains('ps__thumb-x') || target.classList.contains('ps__thumb-y');    \r\n\r\n            if(e.key === \"Enter\" || e.key === \"Escape\" || isThumbFocused) {\r\n                this.setIsOpen(!this.isOpen)\r\n            }\r\n        });\r\n\r\n        return this;\r\n    }\r\n\r\n    protected listenToBodyClick(): RangeDropdown {\r\n        fromEvent(document, 'mousedown').pipe(\r\n            filter(() => this.isOpen),\r\n            map(({ target }) => target as HTMLElement),\r\n            filter(target => !isChildOf(target, this.element)),\r\n        ).subscribe(() => this.setIsOpen(false));\r\n\r\n        return this;\r\n    }\r\n\r\n    protected listenToListClick(): RangeDropdown {\r\n        fromEvent(this.list, 'mousedown').pipe(\r\n            map(({target }) => target as HTMLElement),\r\n            map(({ dataset: { value } }) => parseInt(value)),\r\n        ).subscribe(value => this.setValue(value).setIsOpen(false));\r\n\r\n        return this;\r\n    }\r\n\r\n    protected listenToItemListKeyPress() {\r\n        this.list.addEventListener('keypress', (event: KeyboardEvent)=> {\r\n            const target = <HTMLElement>event.target,\r\n              value = parseInt(target.dataset.value);\r\n            \r\n            if(event.key === \"Enter\") {\r\n                this.setValue(value);\r\n            }\r\n        });\r\n\r\n        return this\r\n    }\r\n\r\n    protected listenToCustomChange(): this {\r\n        this.element.addEventListener('dd:setvalue', (event: CustomEvent) => this.setValue(Number(event.detail.value)));\r\n        return this;\r\n    }\r\n\r\n    protected getDefaultOptions(): RangeDropdownOptions {\r\n        return {\r\n            mainClass: 'nx-range',\r\n        };\r\n    }\r\n};\r\n\r\nRangeDropdown.setup();\r\n"],"names":["RangeDropdown","setup","selector","Array","from","document","querySelectorAll","filter","node","dataset","moduleInitialized","forEach","element","constructor","options","this","Object","assign","getDefaultOptions","label","querySelector","mainClass","labelValueNode","list","isOpen","setInitialValue","parseInt","innerHTML","init","listenToLableClick","listenToBodyClick","listenToListClick","listenToItemListKeyPress","listenToCustomChange","setValue","value","toString","dispatchEvent","CustomEvent","bubbles","setIsOpen","subscribe","e","target","isThumbFocused","classList","contains","key","pipe","addEventListener","event","Number","detail"],"sourceRoot":""}