{"version":3,"file":"./modules/WeekdayPicker-WeekdayPicker.xxxxxxxx.js","mappings":"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","sources":["webpack:///./modules/WeekdayPicker/WeekdayPickerLayerMarkup.ts","webpack:///./modules/WeekdayPicker/WeekdayPicker.ts"],"sourcesContent":["import { createElementFromString } from '../../helpers/DOMHelpers';\r\n\r\nconst getLayerContent = (details: WeekdayPickerLayerData): HTMLElement => {\r\n const { Image, Title, Subtitle, Days, Description, ButtonText } = details;\r\n\r\n const createDays = (days: Array) => {\r\n let pickerDays = '';\r\n days.forEach((val) => {\r\n pickerDays = pickerDays + `\r\n
\r\n
\r\n \r\n
\r\n
\r\n ` });\r\n return `\r\n
\r\n ${pickerDays}\r\n
\r\n `;\r\n };\r\n\r\n const layerContent = `\r\n
\r\n
\r\n \r\n
\r\n
\r\n ${Title}\r\n
\r\n
\r\n ${Subtitle}\r\n
\r\n\r\n ${createDays(Days)}\r\n\r\n
\r\n ${Description}\r\n
\r\n
\r\n ${ButtonText}\r\n
\r\n
\r\n `;\r\n\r\n return createElementFromString(layerContent);\r\n}\r\n\r\nexport default getLayerContent;","const moduleSelector = '[data-module=\"WeekdayPicker\"]';\r\n\r\nimport { getOptions, parseJSONSafe } from '../../helpers/helperFunctions';\r\nimport LayerTiny from '../LayerTiny';\r\nimport { hasClass } from '../../helpers/DOMHelpers';\r\nimport getLayerContent from './WeekdayPickerLayerMarkup';\r\n\r\nexport default class WeekdayPicker {\r\n protected options: WeekdayPickerOptions;\r\n protected inputField: HTMLInputElement;\r\n protected pickerSelect: HTMLElement;\r\n protected pickerResult: HTMLElement;\r\n protected maxOptionsSelected: number;\r\n private layer: LayerTiny;\r\n private layerData: WeekdayPickerLayerData;\r\n private layerContent: any;\r\n private layerOptions: any;\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 WeekdayPicker(element);\r\n element.dataset.moduleInitialized = 'true';\r\n });\r\n }\r\n\r\n constructor(public element: HTMLElement, options: WeekdayPickerOptions = {}) {\r\n this.options = getOptions(this.element, Object.assign(this.getDefaultOptions(), options));\r\n \r\n const strData = this.element.querySelector(`.${this.options.LayerData}`).innerHTML;\r\n this.layerData = parseJSONSafe(strData.replace(/[\\r\\n]/gm, '')).shift();\r\n\r\n this.inputField = this.element.querySelector(`.${this.options.InputFieldClass}`);\r\n this.pickerSelect = this.element.querySelector(`.${this.options.WeekdayPickerSelectClass}`);\r\n this.pickerResult = this.element.querySelector(`.${this.options.WeekdayPickerResultClass}`);\r\n this.maxOptionsSelected = parseInt(this.element.getAttribute('data-max-selected'));\r\n this.layer = new LayerTiny(this.element, { layerModifierClasses: 'nx-layer--popup' });\r\n \r\n\r\n this.init();\r\n }\r\n\r\n init(): WeekdayPicker {\r\n this.layerContent = getLayerContent(this.layerData);\r\n this.layer.insertContent(this.layerContent, () => this.addConfirmButtonListener(this.layer));\r\n this.pickerSelect.addEventListener('click', e => this.onElementClick(e));\r\n return this;\r\n }\r\n\r\n protected onElementClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n this.element.classList.add(`${this.options.WeekdayPickerSelectClass}--open`);\r\n\r\n if (hasClass(this.element, `${this.options.WeekdayPickerSelectClass}--open`)) {\r\n this.openLayerAndInitModules();\r\n this.selectCheckboxFromPreSelection();\r\n this.mobileDesktopChangeEventListener();\r\n } else {\r\n this.closeLayer();\r\n };\r\n }\r\n\r\n private getPreSelectedInputValueArray(): string[] {\r\n let pickerSelectText: string = this.pickerResult.innerHTML;\r\n if (!pickerSelectText) return;\r\n return pickerSelectText.split(/\\s*,\\s*/);\r\n }\r\n\r\n private selectCheckboxFromPreSelection() {\r\n if (this.pickerResult.innerHTML !== \"\") {\r\n (this.getPreSelectedInputValueArray()).forEach(optionValue => {\r\n (this.element.querySelector(`input[type='checkbox'][value='${optionValue}']`)).checked = true;\r\n });\r\n }\r\n }\r\n\r\n private mobileDesktopChangeEventListener(): WeekdayPicker {\r\n document.addEventListener('niveax:breakpointchange', (e) => {\r\n this.changePositionOfOpenedLayer((e).detail.deviceType == 'isMobile');\r\n });\r\n return this;\r\n }\r\n\r\n private setPositionOfOpenedLayer(): void {\r\n this.changePositionOfOpenedLayer(window.NiveaX.deviceType.isMobile);\r\n }\r\n\r\n private changePositionOfOpenedLayer(queryToCheck: any): void {\r\n queryToCheck ? this.setPositionOfWeekayPickerLayer() : this.clearLayerInlineStyles();\r\n }\r\n\r\n private setPositionOfWeekayPickerLayer(): void {\r\n const layerPopup: HTMLElement = this.element.querySelector('.nx-layer'),\r\n topPositionOfClickedButton: number = this.element.getBoundingClientRect().top,\r\n culcPositionOfPopup: number = Math.ceil((topPositionOfClickedButton * 100) / window.outerHeight);\r\n let correction = (window.innerHeight - layerPopup.offsetHeight) / 2;\r\n correction = correction > 0 ? correction : 20;\r\n const culcPositionOfPopupWithCorrection: string = `calc(${-culcPositionOfPopup}vh + ${correction}px)`;\r\n if (layerPopup) layerPopup.style.transform = `translate(-50%, ${culcPositionOfPopupWithCorrection})`;\r\n }\r\n\r\n private clearLayerInlineStyles(): void {\r\n const layerPopup: HTMLElement = this.layer.getElement().querySelector('.nx-layer');\r\n if (layerPopup) layerPopup.removeAttribute('style');\r\n }\r\n\r\n private openLayerAndInitModules(): WeekdayPicker {\r\n this.layer.open(() => NiveaX.initModules());\r\n this.setPositionOfOpenedLayer();\r\n return this;\r\n }\r\n\r\n private addConfirmButtonListener(layerNode: LayerTiny) {\r\n const layerConfirmButton: HTMLElement = (layerNode as any).layerContent.querySelector(`.${this.options.LayerButtonClass}`);\r\n this.layerOptions = (layerNode as any).layerContent.querySelector(`.${this.options.LayerOptionsClass}`);\r\n layerConfirmButton.addEventListener('click', e => this.inLayerClick(e));\r\n this.layerOptions.addEventListener('click', e => this.inLayerOptionsClick(e));\r\n }\r\n\r\n protected inLayerClick(e: Event): void {\r\n const target = e.target as HTMLElement;\r\n if (target.classList.contains(`${this.options.LayerButtonClass}`)) this.closeLayer();\r\n };\r\n\r\n protected inLayerOptionsClick(e: Event): void {\r\n const target = e.target as HTMLElement;\r\n setTimeout(() => {\r\n this.validateMaxSelected(target) }, 100);\r\n };\r\n\r\n private validateMaxSelected(element: HTMLElement) {\r\n const selected: number = Array.from(this.layerOptions.querySelectorAll('input:checked')).length;\r\n if (this.maxOptionsSelected <= selected) {\r\n this.disableOptions();\r\n } else {\r\n this.enableOptions();\r\n };\r\n }\r\n\r\n protected enableOptions(): WeekdayPicker {\r\n const nodeList: Array = Array.from(this.layerOptions.querySelectorAll('input:not(:checked)'));\r\n nodeList.map(element => {\r\n element.closest(`.${this.options.LayerOptionClass}`).classList.remove('nx-option-disabled');\r\n element.disabled = false;\r\n });\r\n return this;\r\n };\r\n\r\n protected disableOptions(): WeekdayPicker {\r\n const nodeList: Array = Array.from(this.layerOptions.querySelectorAll('input:not(:checked)'));\r\n nodeList.map(element => {\r\n element.closest(`.${this.options.LayerOptionClass}`).classList.add('nx-option-disabled');\r\n element.disabled = true;\r\n });\r\n return this;\r\n };\r\n\r\n protected closeLayer(): void {\r\n let selectedInputsArray: Array = Array.from(this.layerContent.querySelectorAll('input:checked'));\r\n let selectedInputs: string = this.getSelectedInputValues(selectedInputsArray);\r\n this.pickerResult.innerHTML = selectedInputs;\r\n this.element.dispatchEvent(new CustomEvent('niveax:WeekdayPicker:submit', { detail: { Options: selectedInputsArray } }));\r\n\r\n this.layer.close();\r\n }\r\n\r\n private getSelectedInputValues(inputArray: Array): string {\r\n return inputArray.map((input: HTMLInputElement) => { return input.value; }).join(\", \")\r\n }\r\n\r\n public getDefaultOptions(): WeekdayPickerOptions {\r\n return {\r\n WeekdayPickerClass: 'nx-weekday-picker',\r\n InputFieldClass: 'nx-autosuggest-input',\r\n LayerData: 'nx-weekday-picker-layer-data',\r\n LayerOptionsClass: 'nx-weekday-picker-layer-options',\r\n LayerOptionClass: 'nx-weekday-picker-option',\r\n LayerButtonClass: 'nx-weekday-picker-layer-button',\r\n WeekdayPickerSelectClass: 'nx-weekday-picker-select',\r\n WeekdayPickerResultClass: 'nx-weekday-picker-select-result',\r\n };\r\n }\r\n}\r\n\r\n// Hot Module Replacement\r\nif (module.hot) {\r\n let nodesCache: HMRNodes[] = Array.from(document.querySelectorAll(moduleSelector)).map((element: Node) => ({ nodeToReplace: element, nodeOrigin: element.cloneNode(true) }));\r\n\r\n WeekdayPicker.setup(moduleSelector);\r\n\r\n module.hot.accept(() => {\r\n WeekdayPicker.setup(moduleSelector);\r\n });\r\n module.hot.dispose(() => {\r\n nodesCache.forEach(({ nodeToReplace, nodeOrigin }) => { nodeToReplace = nodeToReplace.parentElement.replaceChild(nodeOrigin.cloneNode(true), nodeToReplace) });\r\n });\r\n} else {\r\n WeekdayPicker.setup(moduleSelector)\r\n};"],"names":["details","Image","Title","Subtitle","Days","Description","ButtonText","layerContent","days","pickerDays","forEach","val","createDays","moduleSelector","WeekdayPicker","setup","selector","Array","from","document","querySelectorAll","filter","node","dataset","moduleInitialized","element","constructor","options","this","Object","assign","getDefaultOptions","strData","querySelector","LayerData","innerHTML","layerData","replace","shift","inputField","InputFieldClass","pickerSelect","WeekdayPickerSelectClass","pickerResult","WeekdayPickerResultClass","maxOptionsSelected","parseInt","getAttribute","layer","layerModifierClasses","init","insertContent","addConfirmButtonListener","addEventListener","e","onElementClick","preventDefault","classList","add","openLayerAndInitModules","selectCheckboxFromPreSelection","mobileDesktopChangeEventListener","closeLayer","getPreSelectedInputValueArray","pickerSelectText","split","optionValue","checked","changePositionOfOpenedLayer","detail","deviceType","setPositionOfOpenedLayer","window","NiveaX","isMobile","queryToCheck","setPositionOfWeekayPickerLayer","clearLayerInlineStyles","layerPopup","topPositionOfClickedButton","getBoundingClientRect","top","culcPositionOfPopup","Math","ceil","outerHeight","correction","innerHeight","offsetHeight","culcPositionOfPopupWithCorrection","style","transform","getElement","removeAttribute","open","initModules","layerNode","layerConfirmButton","LayerButtonClass","layerOptions","LayerOptionsClass","inLayerClick","inLayerOptionsClick","target","contains","setTimeout","validateMaxSelected","selected","length","disableOptions","enableOptions","map","closest","LayerOptionClass","remove","disabled","selectedInputsArray","selectedInputs","getSelectedInputValues","dispatchEvent","CustomEvent","Options","close","inputArray","input","value","join","WeekdayPickerClass"],"sourceRoot":""}