\n ${d.label\n ? `${d.tooltip ? '' : ''}\n ${d.label} \n ${d.tooltip ? `${TooltipTemplate({ ...defaultTooltipData, ...d.tooltip })}
` : ''}\n `\n : ''}\n \n ${\n (d.showInSlider)\n ? ChoiceListOptionTemplateVerticalBoxed(d)\n : getOptionItems(d).join('')\n }\n
\n \n
\n\n`\n}\n\nexport const ChoiceListOptionTemplateVerticalBoxed = (d) => {\n return SliderTemplate({\n id: 'choice-list--slider',\n extraClasses: 'c-choice-list--boxed-slider',\n center: true,\n stretch: true,\n luminosity: 'light',\n outerNavigation: true,\n withGradient: true,\n attributes: {\n 'data-loop': false,\n 'data-resolve-on-intersect': false,\n 'data-responsive': 'xs:1,sml:2,md:3',\n 'data-gutter': '12'\n },\n items: getOptionItems(d)\n })\n}\n","import Component from '../../../js/core/component/component'\nimport { defaultCheckboxData } from '../checkbox/c-checkbox.template'\nimport { defaultRadioButtonData } from '../radio-button/c-radio-button.template'\nimport { BtnTemplate } from '../btn/c-btn.template'\nimport { elementFromString } from '../../../js/document/html-helper'\nimport { registerComponent } from '../../../js/core/component/component-directory'\nimport domEventsHelper from '../../../js/document/dom-events-helper'\nimport { ChoicelistMessagesTemplate } from './c-choice-list__messages.template'\nimport registeredEvents from '../../../js/helpers/registered-events'\nimport { choiceListEvents } from '../../../js/document/event-types'\nimport { register } from '../../../js/document/namespace'\nimport { language } from '../../../js/user/locale-settings'\nimport { renderOption, renderRichOption } from './c-choice-list.template'\n\nconst globalLocales = register(`window.sundio.i18n.${language}.global`)\n\nconst attr = {\n track: 'data-track'\n}\n\nconst definition = {\n\n name: 'c-choice-list',\n props: [\n {\n name: 'method',\n type: 'string',\n attr: 'data-c-choice-list__method',\n allowedValues: [\n 'single',\n 'multiple',\n 'dynamic'\n ]\n },\n {\n name: 'variant',\n type: 'string',\n attr: 'data-c-choice-list__variant',\n allowedValues: [\n 'default',\n 'boxed'\n ],\n defaultValue: 'default'\n },\n {\n name: 'options',\n type: 'collection'\n },\n {\n name: 'label',\n type: 'string',\n defaultValue: ''\n },\n {\n name: 'required',\n type: 'boolean',\n attr: 'required',\n defaultValue: false\n },\n {\n name: 'showInSlider',\n type: 'boolean',\n attr: 'data-c-choice-list__show-in-slider',\n defaultValue: false\n }\n ]\n}\n\nconst ChoiceListExtraClasses = {\n extraClasses: 'c-choice-list__option '\n}\n\n/**\n * Choice list content\n *\n */\nexport default class ChoiceList extends Component {\n /**\n * Creates a new choice list behaviour, exposes an API to the element.\n *\n * @constructor\n * @param {HTMLElement} element - The HTML element.\n */\n constructor (element) {\n super(element, definition.name)\n this.silentErrors = true\n\n this.selectedValues = this.getSelectedValuesFromOptions()\n\n this.attachEvents()\n\n // Update all elements when method changes\n this.events.on('propChanged', (changes) => {\n if (changes.name === 'method') { this.setProp('options', this.props.options, { silent: true, forceUpdate: true }) }\n })\n\n this.messagesElement = this.element.querySelector('.c-choice-list__messages')\n this.messageRequired = null\n if (element.getAttribute('data-message-required')) {\n this.messageRequired = element.getAttribute('data-message-required')\n } else {\n this.messageRequired = this.getOptionsElement().getAttribute('data-message-required')\n }\n this.labelElement = this.element.querySelector('.c-choice-list__label')\n\n this.element[definition.name].getSelectedValues = (this.getSelectedValues).bind(this)\n this.element[definition.name].getReducedSelectedValuesFromOptions = (this.getReducedSelectedValuesFromOptions).bind(this)\n this.element[definition.name].disableComponent = (this.disableComponent).bind(this)\n this.element[definition.name].enableComponent = (this.enableComponent).bind(this)\n this.element[definition.name].validate = this.validate.bind(this)\n this.element[definition.name].enableErrors = this.enableErrors.bind(this)\n this.element[definition.name].styleValidity = this.styleValidity.bind(this)\n this.element[definition.name].getValidationMessages = this.getValidationMessages.bind(this)\n\n registeredEvents.registerComponentEvents(definition.name, this.events, {\n ...this.element.hasAttribute(attr.track) && { track: this.element.attributes[attr.track].value }\n })\n }\n\n attachEvents () {\n const events = []\n const items = this.element.querySelectorAll('.c-choice-list__option > .c-radio-button__input , .c-choice-list__option > .c-checkbox__input')\n items.forEach(item => {\n events.push([item, { change: (ev) => this.onChange(ev) }])\n })\n\n if (this.clearElement) {\n events.push([this.clearElement, { click: (ev) => this.onClear(ev) }])\n }\n domEventsHelper.attachEvents(events, definition.name)\n }\n\n getOptionsElement () {\n this.optionsElement = this.optionsElement || this.element.querySelector('.c-choice-list__options')\n return this.optionsElement\n }\n\n getShowInSlider () {\n return this.element.hasAttribute('data-c-choice-list__show-in-slider') || false\n }\n\n /**\n * Get the whole array of options from current DOM\n *\n * @return {RadioButtonData[]|CheckboxData[]} The parsed options data\n */\n getOptions () {\n const optionsSelector = this.getProp('method') === 'single' ? '.c-radio-button__children' : '.c-checkbox__children'\n const optionItemElements = this.getShowInSlider() ? [...this.getOptionsElement().querySelectorAll('.c-slider__item .c-choice-list__option-rich')] : [...this.getOptionsElement().children]\n\n return optionItemElements.filter(el => !el.matches(optionsSelector))\n .map(el => ChoiceList.getOptionDataFromOptionElement(el))\n }\n\n /**\n * Disable the component\n */\n disableComponent () {\n this.setProp('options', this.getProp('options').map((option) => ({ ...option, disabled: true })))\n }\n\n /**\n * Enable the component\n */\n enableComponent () {\n this.setProp('options', this.getProp('options').map((option) => ({ ...option, disabled: false })))\n }\n\n /**\n * Set the label text\n */\n setLabel (text) {\n if (this.labelElement) {\n this.labelElement.innerText = text\n }\n }\n\n /**\n * Get the label text\n */\n getLabel () {\n return this.labelElement ? this.labelElement.innerText : ''\n }\n\n setSliderOptions (input) {\n const mappedOptions = this.getProp('options').map((option) => ({ ...option, checked: (option.value === input.value) }))\n this.setProp('options', mappedOptions, { isSlider: true })\n\n const optionItemElements = [...this.getOptionsElement().querySelectorAll('.c-slider__item .c-choice-list__option-rich')]\n\n optionItemElements.forEach(optionItemElement => {\n const inputElement = optionItemElement.querySelector('input')\n if (inputElement) {\n if (inputElement.value === input.value && input.checked) {\n optionItemElement.classList.add('is-checked')\n } else {\n inputElement.checked = false\n optionItemElement.classList.remove('is-checked')\n }\n }\n })\n }\n\n /**\n * Set the array of options the choice-list will have\n *\n * @param {Object[]} items - Items to be set\n * @param {Object} options - Options object\n * @param {Boolean} options.silent - If true, does not fire events\n * @param {Boolean} options.isSlider - If true, does forceRepaint\n * @param {Object[]} oldItems - Old value of the items\n */\n setOptions (items, options, oldItems) {\n items = items || []\n if (!options.isSlider) {\n this._flushOptionElements()\n const itemsToElements = (items) => {\n const fragment = document.createDocumentFragment()\n items.forEach(item => {\n fragment.appendChild(this._newOptionElement(item))\n if (item.items) {\n const subFragment = elementFromString('
')\n subFragment.appendChild(itemsToElements(item.items))\n fragment.appendChild(subFragment)\n }\n })\n return fragment\n }\n this.getOptionsElement().appendChild(itemsToElements(items))\n }\n this.updateSelectedOptionsAndElements()\n this.selectedValues = this.getSelectedValuesFromOptions()\n if (options.isDynamic && this.props.method === 'single' && this.selectedValues.length > 0) {\n this.clearElement = this._clearButtonElement(globalLocales)\n this.element.appendChild(this.clearElement)\n }\n this.attachEvents()\n if (!options.silent) {\n this.events.emit('changeOptions', this.props.options, oldItems, this.props.method)\n }\n }\n\n /**\n * Get selected values\n *\n * @return {String[]} values\n */\n getSelectedValues () {\n return this.selectedValues\n }\n\n /**\n * Get selected values from options prop\n *\n * @return {String[]} values\n */\n getSelectedValuesFromOptions () {\n const getSelectedOptions = (options) => {\n const selectedValues = []\n options\n .forEach(option => {\n if (option.checked) selectedValues.push(option.value)\n if (option.items) selectedValues.push(...getSelectedOptions(option.items))\n })\n return selectedValues\n }\n return getSelectedOptions(this.props.options)\n }\n\n /**\n * Get reduced selected values from options prop\n * - Reduced means on nested choice lists, lower level values will be skipped if parent is selected\n *\n * @return {String[]} values\n */\n getReducedSelectedValuesFromOptions () {\n const getSelectedOptions = (options) => {\n const selectedValues = []\n options\n .forEach(option => {\n if (option.checked) selectedValues.push(option.value)\n if (!option.checked && option.items) selectedValues.push(...getSelectedOptions(option.items))\n })\n return selectedValues\n }\n return getSelectedOptions(this.props.options)\n }\n\n /**\n * Handle element change events\n */\n onChange (ev) {\n const input = ev.target\n this.events.emit('click', input)\n // Handle single choice list\n if (this.getProp('method') === 'single') {\n if (this.getShowInSlider()) {\n this.setSliderOptions(input)\n return\n }\n this.setProp('options', this.getProp('options').map((option) => ({ ...option, checked: (option.value === input.value) })))\n return\n }\n\n // Handle multiple (and nested) choice list\n const matchOption = this.findOptionByValue(input.value)\n if (!matchOption) return\n matchOption.checked = input.checked\n\n if (this.isNestedChoiceList()) {\n const getOptionLevel = (el) => {\n let level = 1\n do {\n if (el === this.getOptionsElement()) return level\n if (el.matches('.c-checkbox__children')) level++\n el = el.parentElement || el.parentNode\n } while (el !== null && el !== this.getOptionsElement() && el.nodeType === 1)\n return level\n }\n const optionLevel = getOptionLevel(input)\n const option = this.findOptionByValue(input.value)\n this.setEveryChildSelected(option, input.checked)\n if (optionLevel === 1) this.findElementByValue(input.value).classList.remove('is-half-checked')\n if (optionLevel > 1) this.updateSelectedOptionsAndElements()\n }\n\n this.selectedValues = this.getSelectedValuesFromOptions()\n this.events.emit('changeOptions', this.props.options)\n ev.stopPropagation()\n }\n\n onClear (ev) {\n this.props.options.forEach(option => { option.checked = false })\n this.selectedValues = this.getSelectedValuesFromOptions()\n this.events.emit('changeOptions', this.props.options)\n }\n\n isNestedChoiceList () {\n let nested = false\n this.props.options.forEach(option => {\n if (nested) return\n nested = !!option.items\n })\n return nested\n }\n\n setEveryChildSelected (option, checked = true) {\n if (!option.items) return\n option.items.forEach(subOption => {\n this.setOptionChecked(subOption, checked)\n if (subOption.items) this.setEveryChildSelected(subOption, checked)\n })\n }\n\n /**\n * Updates selected options and elements with nested values\n */\n updateSelectedOptionsAndElements () {\n const hasAnySelectedChild = (option) => {\n if (!option.items) return false\n let childSelected = false\n option.items.forEach(subOption => {\n if (childSelected) return\n if (subOption.checked) childSelected = true\n })\n return childSelected\n }\n const hasEverySelectedChild = (option) => {\n if (!option.items) return false\n let everySelected = true\n option.items.forEach(subOption => {\n if (!everySelected) return\n if (!subOption.checked) everySelected = false\n })\n return everySelected\n }\n\n this.props.options.forEach(option => {\n if (!option.items) return\n if (hasEverySelectedChild(option)) {\n this.setOptionChecked(option)\n return\n }\n this.setOptionHalfChecked(option, hasAnySelectedChild(option))\n })\n\n return this\n }\n\n /**\n * Set checked prop to certain option\n */\n setOptionChecked (option, checked = true) {\n if (option.checked === checked) return\n option.checked = checked\n this.findInputByValue(option.value).checked = checked\n if (this.isNestedChoiceList()) {\n this.findElementByValue(option.value)\n .classList.remove('is-half-checked')\n }\n }\n\n /**\n * Set checked prop to certain option\n */\n setOptionHalfChecked (option, halfChecked = true) {\n option.checked = false\n this.findInputByValue(option.value).checked = false\n this.findElementByValue(option.value)\n .classList[halfChecked ? 'add' : 'remove']('is-half-checked')\n }\n\n /**\n * Find an option by value\n */\n findOptionByValue (value) {\n const findOptionByValue = (value, options) => {\n let matchOption\n options.forEach(option => {\n if (option.value === value) matchOption = option\n if (!matchOption && option.items) matchOption = findOptionByValue(value, option.items)\n })\n return matchOption\n }\n return findOptionByValue(value, this.props.options)\n }\n\n /**\n * Find an element by value\n */\n findElementByValue (value) {\n const input = this.findInputByValue(value)\n return input\n ? input.closest('.c-checkbox, .c-radio-button')\n : input\n }\n\n /**\n * Find an input by value\n */\n findInputByValue (value) {\n return this.getOptionsElement().querySelector(`input[value=\"${value}\"]`)\n }\n\n /**\n * Flush all option elements for this component\n *\n * @return {ChoiceList} self instance\n */\n _flushOptionElements () {\n while (this.getOptionsElement().firstChild) {\n this.getOptionsElement().removeChild(this.getOptionsElement().firstChild)\n }\n if (this.messagesElement) {\n while (this.messagesElement.firstChild) {\n this.messagesElement.removeChild(this.messagesElement.firstChild)\n }\n }\n if (this.clearElement) {\n this.clearElement.remove()\n }\n this.element.classList.remove('has-error')\n return this\n }\n\n /**\n * Creates an option element from option data\n *\n * @param {RadioButtonData|CheckboxData} option - The data to create the view with\n *\n * @return {HTMLElement}\n *\n */\n _newOptionElement (option) {\n const checkBoxData = { ...defaultCheckboxData, ...ChoiceListExtraClasses }\n const radioButtonData = { ...defaultRadioButtonData, ...ChoiceListExtraClasses }\n const d = { method: this.props.method, id: this.element.id }\n\n return elementFromString(\n option.isRichOption\n ? renderRichOption(d, option, radioButtonData, checkBoxData)\n : renderOption(d, option, radioButtonData, checkBoxData)\n )\n }\n\n _clearButtonElement (locales) {\n return elementFromString(\n BtnTemplate({\n variant: 'flat-neutral',\n attributes: { 'data-c-choice-list-action': 'clear' },\n text: locales.clearFilter,\n extraClasses: 'c-choice-list__dynamic-clear-btn'\n }))\n }\n\n /**\n * Gets the option data from an existent element, RadioButton or Checkbox\n *\n * @param {HTMLElement} optionElement - The option element to get data from\n *\n * @return {RadioButtonData|CheckboxData}\n *\n */\n static getOptionDataFromOptionElement (optionElement) {\n const input = optionElement.querySelector('input')\n const count = optionElement.querySelector('.c-checkbox__count, .c-radio-button__count')\n const additionalText = optionElement.querySelector('.c-checkbox__additional-text, .c-radio-button__additional-text')\n const extraContent = optionElement.querySelector('[data-c-radio-button__extra-content]')\n const extraRichContentElement = optionElement.querySelector('[data-choice-list__option-rich-item__content]')\n const children = optionElement.nextElementSibling && optionElement.nextElementSibling.matches('.c-checkbox__children')\n const highlightText = optionElement.querySelector('.c-radio-button__highlight-text')\n const htmlContent = optionElement.querySelector('.c-checkbox__text-custom-content')\n const isRichOption = optionElement.classList.contains('c-choice-list__option-rich')\n\n if (!input.checked) { optionElement.classList.remove('is-checked') }\n\n return {\n id: input.id,\n name: input.name,\n value: input.value,\n text: input.dataset.text,\n checked: input.checked,\n disabled: optionElement.classList.contains('is-disabled'),\n hasChild: !!children,\n unresolved: optionElement.classList.contains('is-unresolved'),\n count: count ? parseInt(count.textContent) : undefined,\n additionalText: additionalText ? (additionalText.textContent || additionalText.innerHTML) : undefined,\n dataset: { ...input.dataset, text: undefined },\n highlightText: highlightText ? highlightText.textContent : undefined,\n items: children\n ? [...optionElement.nextElementSibling.children]\n .filter(el => !el.matches('.c-checkbox__children'))\n .map(el => ChoiceList.getOptionDataFromOptionElement(el))\n : undefined,\n validity: input.validity,\n messageRequired: input.getAttribute('data-message-required'),\n showExtraContentDiv: !!extraContent,\n extraClasses: !isRichOption ? [...optionElement.classList].join(' ') : '',\n extraClassesForRichOption: isRichOption ? [...optionElement.classList].join(' ') : '',\n isRichOption,\n extraRichContent: extraRichContentElement ? extraRichContentElement.innerHTML : undefined,\n html: htmlContent ? htmlContent.innerHTML : undefined\n }\n }\n\n enableErrors () {\n this.silentErrors = false\n }\n\n validate (validateOnly = false) {\n let isValid = true\n const elements = this.getOptions()\n if (this._isSingleSelectionChoceList()) {\n if (this.props.required) {\n const selectedElement = elements.find(element => element.checked)\n isValid = !!(selectedElement)\n }\n } else {\n const minlength = this.element.getAttribute('minlength')\n if (minlength) {\n isValid = parseInt(minlength) <= elements.filter(element => element.checked).length\n } else {\n elements.forEach(element => {\n const elementIsValid = element.validity.valid\n isValid = elementIsValid ? isValid : false\n })\n }\n }\n\n let messages = []\n if (!validateOnly && !this.silentErrors) {\n if (!isValid) {\n messages = this.getValidationMessages()\n }\n this.styleValidity(isValid, messages)\n }\n\n const firstOptionElement = this.getOptionsElement().querySelector('input')\n\n const validationObject = {\n isValid,\n errorMessages: messages,\n fieldName: firstOptionElement ? firstOptionElement.name : '',\n fieldType: firstOptionElement ? firstOptionElement.type : ''\n }\n if (!isValid) {\n this.events.emit(choiceListEvents.CHOICE_LIST_VALIDATION_ERROR, validationObject)\n }\n return validationObject\n }\n\n getValidationMessages () {\n const messages = []\n let messageRequired = ''\n if (this.props.method === 'single') {\n const firstOption = this.getOptions()[0]\n if (this.messageRequired) {\n messageRequired = this.messageRequired\n } else if (firstOption && firstOption.messageRequired) {\n messageRequired = firstOption.messageRequired\n }\n } else if (this.messageRequired) {\n messageRequired = this.messageRequired\n }\n messages.push(messageRequired)\n return messages\n }\n\n styleValidity (isValid, messages) {\n if (!isValid) {\n this.element.classList.add('has-error')\n Array.from(this.getOptionsElement().children).forEach(element => {\n element.classList.add('has-error')\n })\n if (this.messagesElement !== null && this.messagesElement !== undefined) {\n this.messagesElement.innerHTML = ChoicelistMessagesTemplate(messages)\n }\n } else {\n this.element.classList.remove('has-error')\n Array.from(this.getOptionsElement().children).forEach(element => {\n element.classList.remove('has-error')\n })\n if (this.messagesElement !== null && this.messagesElement !== undefined) {\n this.messagesElement.innerHTML = ''\n }\n }\n }\n\n _isSingleSelectionChoceList () {\n return this.props.method === 'single'\n }\n}\n\nregisterComponent(ChoiceList, definition.name, definition)\n","/**\n * The ChoicelistMessagesTemplate contains all the data needed to hydrate a messages component\n *\n * @typedef {Object} defaultChoicelistMessagesData\n *\n * @property {String} extraClasses - Extra classes if needed\n */\n\nexport const defaultChoicelistMessagesData = {\n extraClasses: ''\n}\n\nexport const ChoicelistMessagesTemplate = (d) => `\n ${d\n ? `\n ${d.map(message => `\n \n ${message} \n
\n `).join('')}\n `\n : ''}\n`\n","/**\n * The CollapseData contains all data needed to hydrate a Collapse selector view\n *\n * @typedef {Object} CollapseData\n *\n * @property {String} id - Collapse's id\n * @property {String} html - HTML snippet\n * @property {String} extraClasses\n * @property {Number} maxItems - Number of items to be visible when collapsed\n * @property {Boolean} opened - If true, content is expanded\n * @property {Boolean} childrenWrapper\n * @property {Boolean} disabled\n * @property {Object} attributes - HTML attributes\n */\n\nimport { encodeAttributes } from '../../../js/helpers/string'\n\nexport const defaultCollapseData = {\n id: '',\n html: '',\n blockText: false,\n collapseHeight: null,\n extraClasses: '',\n maxItems: null,\n opened: false,\n childrenWrapper: null,\n disabled: false,\n collapseFrom: '',\n track: '',\n attributes: {}\n}\n\nexport const CollapseTemplate = (d) => {\n d = { ...defaultCollapseData, ...d }\n return `\n 0) ? `data-c-collapse__max-items=\"${d.maxItems}\"` : ''}\n ${d.childrenWrapper ? `data-c-collapse__children-wrapper=${d.childrenWrapper}` : ''}\n ${d.groupId ? `data-c-collapse__group-id=${d.groupId}` : ''}\n ${d.disabled ? 'data-c-collapse__disabled' : ''}\n ${d.track ? `data-track=${d.track}` : ''}\n ${d.attributes ? encodeAttributes(d.attributes) : ''}>\n ${d.html}\n
\n`\n}\n","/**\n * The CollapseTriggerTemplate contains all data needed to hydrate a Collapse selector view\n *\n * @typedef {Object} CollapseTriggerTemplate\n *\n * @property {String} id - Collapse Trigger's id\n * @property {String} action - Action to be done\n * @property {String} extraClasses - ExtraClasses if needed\n * @property {Number} smooth - Smooth\n * @property {Boolean} textPattern - Text pattern\n * @property {Boolean} text - Text shown\n * @property {Object} arrow - Arrow of collapse\n */\nimport { getTokenClass } from '../../../js/helpers/tokens'\n\n// Import tokens\nconst tokensShared = require('./data/c-collapse__tokens.json')['c-collapse']\nconst tokensBrand = (() => {\n try {\n return require(`../../../../brands/${WEBPACK_BRAND}/modules/components/collapse/data/c-collapse__tokens.json`)['c-collapse'] // eslint-disable-line\n } catch (error) {\n return {}\n }\n})()\nconst tokens = { ...tokensShared, ...tokensBrand }\n\nexport const defaultCollapseTriggerData = {\n id: '',\n action: '',\n extraClasses: '',\n smooth: false,\n textPattern: '',\n text: '',\n arrow: false,\n ariaLabel: ''\n}\n\nexport const CollapseTriggerTemplate = (d) => {\n d = { ...defaultCollapseTriggerData, ...d }\n return `\n \n ${d.text\n ? `${d.text} `\n : ''\n }\n ${d.arrow\n ? ` \n`\n}\n","import Component from '../../../js/core/component/component'\nimport { registerComponent } from '../../../js/core/component/component-directory'\nimport * as utilsHelper from '../../../js/utils'\nimport domEventsHelper from '../../../js/document/dom-events-helper'\nimport { getStyle, cssTimeToMs, forceRepaint } from '../../../js/document/css'\nimport { smooth } from '../../../js/document/scroll'\nimport { collapseEvents } from '../../../js/document/event-types'\nimport registeredEvents from '../../../js/helpers/registered-events'\n\nconst classNames = {\n opened: 'in',\n opening: 'is-opening',\n closing: 'is-closing',\n checking: 'is-checking'\n}\n\nconst settings = {\n numberPattern: '{N}',\n resizeDelay: 200\n}\n\nconst definition = {\n name: 'c-collapse',\n props: [{\n name: 'open',\n attr: '.in',\n type: 'boolean',\n defaultValue: false\n }, {\n name: 'maxItems',\n type: 'number',\n attr: 'data-c-collapse__max-items',\n defaultValue: 0\n }, {\n name: 'childrenWrapper',\n type: 'string',\n attr: 'data-c-collapse__children-wrapper',\n defaultValue: null\n },\n {\n name: 'groupId',\n type: 'string',\n attr: 'data-c-collapse__group-id',\n defaultValue: null\n },\n {\n name: 'disabled',\n type: 'boolean',\n attr: 'data-c-collapse__disabled',\n defaultValue: false\n },\n {\n name: 'scrollable',\n type: 'boolean',\n attr: 'data-c-collapse__scrollable',\n defaultValue: false\n },\n {\n name: 'scrollableSafeMargin',\n type: 'number',\n attr: 'data-c-collapse__scrollable--safe-margin',\n defaultValue: 0\n },\n {\n name: 'collapseFrom',\n type: 'string',\n attr: 'data-c-collapse__from',\n defaultValue: null\n }],\n actionElements: true\n}\n\nconst attr = {\n track: 'data-track'\n}\n\n/**\n * Collapse content\n *\n */\nexport default class Collapse extends Component {\n /**\n * Creates a new Collapse behaviour, exposes an API to the element.\n *\n * @constructor\n * @param {HTMLElement} element - The HTML element.\n */\n constructor (element) {\n super(element, definition.name)\n this.childrenWrapperElement = this.getProp('childrenWrapper')\n ? this.element.querySelector(this.getProp('childrenWrapper'))\n : this.element\n\n this.collapseHeight = element.getAttribute('data-c-collapse__collapse-height')\n this.collapseFrom = this.getProp('collapseFrom')\n\n this._buildEvents()\n this._getActionElements()\n this._getGroupCollapseElements()\n this._showHiddenItems(false)\n this._updateActionElements()\n this._updateHeight()\n this._updateActionElementsVisibility()\n this._updateActionElementsDisabled()\n\n element[this.name].open = this.open.bind(this)\n element[this.name].close = this.close.bind(this)\n element[this.name].toggle = this.toggle.bind(this)\n element[this.name].update = this.update.bind(this)\n element[this.name].isOpened = this.isOpened.bind(this)\n\n this.events.on('propChanged', (changes) => {\n if (changes.name === 'disabled') { this._updateActionElementsDisabled() }\n })\n\n this.eventData = this._getEventData()\n registeredEvents.registerComponentEvents(definition.name, this.events, {\n ...this.element.hasAttribute(attr.track) && { track: this.element.attributes[attr.track].value }\n })\n }\n\n /**\n * Set if content expands or collapses\n *\n * @param {boolean} opc - True for expanding; False for collapsing\n * @param options - Object with silent property: boolean\n */\n setOpen (opc, options) { return opc ? this._open(options) : this._close(options) }\n\n /**\n * Set the max number of items to be shown when collapsed\n *\n * @param {number} value - Number of items\n */\n setMaxItems (value) {\n this._setMaxItemsAttribute(value)\n if (!this.getProp('open')) { this._showHiddenItems(false) }\n this._updateActionElements()\n this._updateActionElementsVisibility()\n }\n\n /**\n * Expands the content\n */\n open (options) { return this.setProp('open', true, options) }\n\n /**\n * Collapses the content\n */\n close (options) { return this.setProp('open', false, options) }\n\n /**\n * Expand or collapses the content\n */\n toggle (options) { return this.getProp('open') ? this.close(options) : this.open(options) }\n\n /**\n * Updates collapse component\n */\n update () {\n this._updateActionElementsVisibility()\n return this.setMaxItems(this.getProp('maxItems'))\n }\n\n /**\n * Return if collapse is opened\n *\n * @returns {Boolean}\n */\n isOpened () {\n return this.getProp('open')\n }\n\n _getEventData () {\n const eventData = {}\n if (this.element) {\n eventData.attr = this.element.dataset\n }\n return eventData\n }\n\n _open (options = { silent: false }) {\n if (!options.silent) {\n this.events.emit(collapseEvents.OPEN, this.eventData)\n }\n this._updateActionElements()\n this._closeGroupCollapses()\n\n const transitionTime = cssTimeToMs(getStyle(this.element, 'transition-duration'))\n this.element.style.transitionDuration = '0'\n this.element.style.maxHeight = this.element.clientHeight + 'px'\n this.element.style.transitionDuration = null\n this._showHiddenItems()\n this.element.style.maxHeight = this.element.scrollHeight + 'px'\n this.element.classList.add(classNames.opening)\n const isScrollable = this.getProp('scrollable')\n const safeMargin = this.getProp('scrollableSafeMargin')\n this._showAllItemsOfCollapse(isScrollable, safeMargin)\n\n if (this.currentTransition) window.clearTimeout(this.currentTransition)\n this.currentTransition = setTimeout(() => {\n this.element.style.maxHeight = null\n this._updateActionElementsVisibility()\n this.element.classList.add(classNames.opened)\n this.element.classList.remove(classNames.opening)\n if (!options.silent) {\n this.events.emit(collapseEvents.OPENED, this.eventData)\n }\n }, transitionTime)\n }\n\n _close (options = { silent: false }) {\n if (!options.silent) {\n this.events.emit(collapseEvents.CLOSE, this.eventData)\n }\n this._updateActionElements()\n\n const transitionTime = cssTimeToMs(getStyle(this.element, 'transition-duration'))\n\n // Collapsing method affects how the element technically collapses, so do it by case\n this.element.style.transitionDuration = '0'\n this.element.style.maxHeight = this.element.scrollHeight + 'px'\n this.element.style.transitionDuration = null\n forceRepaint(this.element)\n\n this._showHiddenItems(false)\n this.element.style.maxHeight = (this._isByItems() ? this.element.scrollHeight : (this.collapseHeight) || 0) + 'px'\n this._showHiddenItems()\n this.element.classList.remove(classNames.opened)\n this.element.classList.add(classNames.closing)\n\n // Once transition is done, remove transitioning class, restore natural height and emit closed event\n if (this.currentTransition) window.clearTimeout(this.currentTransition)\n this.currentTransition = setTimeout(() => {\n this._showHiddenItems(false)\n this.element.style.maxHeight = null\n this._updateActionElementsVisibility()\n this.element.classList.remove(classNames.closing)\n if (!options.silent) {\n this.events.emit(collapseEvents.CLOSED, this.eventData)\n }\n }, transitionTime)\n }\n\n _showAllItemsOfCollapse (scrollable = false, safeMargin) {\n if (scrollable) {\n const documentScrollingElement = document.scrollingElement || document.documentElement\n const collapsibleBoundingRect = this.element.getBoundingClientRect()\n let scroll\n if (documentScrollingElement.scrollTop + collapsibleBoundingRect.y + this.element.scrollHeight >= documentScrollingElement.scrollTop + documentScrollingElement.clientHeight) {\n scroll = documentScrollingElement.scrollTop + collapsibleBoundingRect.y - safeMargin\n } else {\n scroll = documentScrollingElement.scrollTop\n }\n smooth(documentScrollingElement, documentScrollingElement.scrollLeft, scroll)\n }\n return this\n }\n\n /**\n * Search for ActionElements on document.\n *\n * @returns {HTMLElement[]} Array of action elements.\n */\n _getActionElements () {\n this._actionElements = this._actionElements || (this.element.id\n ? Array.from(window.document.querySelectorAll(`[data-${this.name}__id=\"${this.element.id}\"]:not(.${this.name})`))\n : []\n )\n return this._actionElements\n }\n\n /**\n * Search for Collapse components of same group on document.\n *\n * @returns {Collapse[]} Array of collapse components.\n */\n _getGroupCollapseElements () {\n this._groupCollapseElements = this._groupCollapseElements || (this.getProp('groupId')\n ? Array.from(window.document.querySelectorAll(`[data-${this.name}__group-id=\"${this.getProp('groupId')}\"]`)).filter(element => element !== this.element)\n : null)\n return this._groupCollapseElements\n }\n\n _isByItems () { return (this.getProp('maxItems') > 0) }\n\n _setMaxItemsAttribute (value) {\n this.element[(value ? 'set' : 'remove') + 'Attribute'](`data-${this.name}__max-items`, value)\n }\n\n /**\n * Show more or less items when collapse depends on item's count\n *\n * @param {boolean} opc - if true, all items are shown\n */\n _showHiddenItems (opc = true) {\n const maxItems = this.getProp('maxItems')\n if (maxItems > 0) {\n Array.from(this.childrenWrapperElement.children)\n .forEach((element, index) => (element.style.display = (opc || (index < maxItems)) ? '' : 'none'))\n }\n }\n\n _updateHeight () {\n const finalFn = () => {\n this._updateActionElementsVisibility()\n this.element.classList.remove(classNames.checking)\n }\n if (this.getProp('open')) {\n this.element.classList.remove(classNames.opened)\n setTimeout(() => {\n this._height = this.element.clientHeight\n this.element.classList.add(classNames.opened)\n finalFn()\n }, this._transitionTime)\n } else { finalFn() }\n }\n\n _updateActionElements () {\n return this\n ._updateActionElementsState()\n ._updateActionElementsText()\n }\n\n _updateActionElementsDisabled () {\n this._actionElements.forEach(element => {\n element[this.getProp('disabled') ? 'setAttribute' : 'removeAttribute']('disabled', true)\n })\n return this\n }\n\n _updateActionElementsState () {\n this._actionElements.forEach(element => {\n element[this.getProp('open') ? 'setAttribute' : 'removeAttribute'](`data-${this.name}__opened`, true)\n })\n return this\n }\n\n _updateActionElementsVisibility () {\n let showActionElements = true\n const isBlockText = this.element.hasAttribute('data-c-collapse__block-text')\n if (this._isByItems()) {\n const hiddenItems = this.childrenWrapperElement.childElementCount - this.getProp('maxItems')\n showActionElements = (hiddenItems > 0)\n } else if (isBlockText && this.childrenWrapperElement.scrollHeight > 0) {\n if (this.childrenWrapperElement.scrollHeight < this.collapseHeight) {\n showActionElements = false\n this.element.classList.add('in')\n } else {\n this.element.style.minHeight = this.collapseHeight + 'px'\n }\n } else {\n if (!this.getProp('open')) { this._height = this.element.clientHeight }\n showActionElements = (this._height < this.element.scrollHeight)\n }\n this._actionElements.forEach((element) => { element.classList[showActionElements ? 'remove' : 'add']('is-hidden') })\n // Adds or remove the state class is-idle to in order to identify that the collapse is not needed at this moment\n if (!isBlockText) {\n this.element.classList[showActionElements ? 'remove' : 'add']('is-idle')\n }\n\n return this\n }\n\n _updateActionElementsText () {\n if (this._isByItems()) {\n const hiddenItems = this.childrenWrapperElement.childElementCount - this.getProp('maxItems')\n if (hiddenItems > 0) {\n this._actionElements.forEach((element) => {\n const textPattern = element.getAttribute(`data-${this.name}__text-pattern`)\n if (textPattern) element.innerText = textPattern.replace(settings.numberPattern, hiddenItems.toString())\n })\n }\n }\n return this\n }\n\n _closeGroupCollapses () {\n if (this._groupCollapseElements) {\n this._groupCollapseElements.forEach(element => {\n const component = element[this.name]\n if (component) {\n component.close()\n }\n })\n }\n }\n\n _buildEvents () {\n this._events = [[window, { resize: utilsHelper.debounce(() => this.update(), settings.resizeDelay) }]]\n domEventsHelper.attachEvents(this._events, definition.name)\n return this\n }\n}\n\nregisterComponent(Collapse, definition.name, definition)\n","import { getToken } from '../../../js/helpers/tokens'\nimport { ImgTemplate, defaultImgData } from '../img/c-img.template'\n\n/**\n * The CollectionItemData contains all data needed to hydrate a Collection Item view\n *\n * @typedef {Object} CollectionItemData\n *\n\n * @property {String} titleTag - Title tag\n * @property {String} collection - Collection\n * @property {String} title - Title\n * @property {String} subTitle - Subtitle\n * @property {String} link - Link\n * @property {String} image - Image\n * @property {String} extraClasses - Extra classes\n */\n\nimport { encodeAttributes } from '../../../js/helpers/string'\n\n// Import cross-component shared tokens.\nconst tokensCollections = (() => {\n try {\n return require(`../../../../brands/${WEBPACK_BRAND}/data/ds-tokens-shared.json`)['collections']; // eslint-disable-line\n } catch (error) {\n return {}\n }\n})()\n\nexport const defaultCollectionImageData = {\n sync: true,\n resolve: 3 // intersect\n}\n\nexport const defaultCollectionItemData = {\n titleTag: 'h5',\n collection: '',\n title: '',\n subTitle: '',\n link: null,\n image: {},\n extraClasses: '',\n attributes: {}\n}\n\nexport const CollectionItemTemplate = d => {\n d = { ...defaultCollectionItemData, ...d }\n const collectionId = d.collection ? d.collection.id : ''\n const collectionToken = getToken('collection', collectionId, tokensCollections) || undefined\n\n return `\n\n \n ${ImgTemplate({ ...defaultImgData, ...defaultCollectionImageData, ...d.image })}\n
\n \n <${d.titleTag} class=\"c-collection-row__item-title\">${d.title}\n ${d.subTitle ? `
${d.subTitle}
` : ''}\n
\n
\n
\n`\n}\n","/**\n * The CollectionRawData contains all data needed to hydrate a Collection Row view\n *\n * @typedef {Object} CollectionRowData\n *\n\n * @property {String} html - HTML snippet\n * @property {String} expandedFrom - Expanded from\n * @property {Boolean} neutral\n * @property {Boolean} collectionLabelHidden\n * @property {String} tiledFrom - Tiled from\n * @property {String} extraClasses\n * @property {Object} attributes - HTML attributes\n */\n\nimport { encodeAttributes } from '../../../js/helpers/string'\n\nexport const defaultCollectionRowData = {\n html: '',\n expandedFrom: '',\n neutral: false,\n collectionLabelHidden: false,\n tiledFrom: '',\n extraClasses: '',\n attributes: {}\n}\n\nexport const CollectionRowTemplate = d => {\n d = { ...defaultCollectionRowData, ...d }\n return `\n\n ${d.html}\n
\n`\n}\n","/**\n * The Dropdown Single Option contains all data needed to hydrate a Dropdown Single\n *\n * @typedef {Object} DateSelectorData\n *\n * @property {String} [extraClasses]\n * @property {Boolean} [blockModifier]\n * @property {DateString} [date] - Current date\n * @property {DateString} [minDate] - Min date selectable\n * @property {DateString} [maxDate] - Max date selectable\n * @property {Boolean} [disabled]\n * @property {String[]} [validations] - Validations to bear in mind (isReal, isInBounds)\n * @property {DateString} [monthType] - Short (Jan, Feb...) or default (January, february)\n * @property {Boolean} [hiddenMainLabel] - True if label should be hidden\n * @property {String} [mainLabel]\n * @property {Object} [attributes]\n * @property {Object} [dropdownConfig]\n * @property {String} [dropdownConfig.placeholder]\n * @property {Boolean} [dropdownConfig.showDefaultOption]\n * @property {Boolean} [dropdownConfig.state]\n * @property {Boolean} [dropdownConfig.highlighted]\n * @property {Boolean} [dropdownConfig.hiddenLabel]\n * @property {String} [dropdownConfig.hasClearButton]\n * @property {Boolean} [dropdownConfig.icon]\n * @property {Object} [tooltip] - data for the tooltip label\n */\n\nimport uid from '../../../js/core/uid'\nimport { DropdownTemplate } from '../dropdown/c-dropdown.template'\nimport { TooltipTemplate, defaultTooltipData } from '../../components/tooltip/c-tooltip.template'\nimport { encodeAttributes } from '../../../js/helpers/string'\n\nimport { language } from '../../../js/user/locale-settings'\nimport { register } from '../../../js/document/namespace'\nimport { DateSelectorMessagesTemplate } from './c-date-selector__messages.template'\nconst componentLocales = register(`window.sundio.i18n.${language}.dateSelector`)\n\nexport const defaultDateSelectorData = {\n id: null,\n extraClasses: '',\n blockModifier: false,\n date: null,\n minDate: null,\n maxDate: null,\n disabled: false,\n validations: ['isReal', 'isInBounds'],\n monthType: 'default',\n hiddenMainLabel: false,\n mainLabel: '',\n dayPlaceholder: componentLocales.dayPlaceholder,\n monthPlaceholder: componentLocales.monthPlaceholder,\n yearPlaceholder: componentLocales.yearPlaceholder,\n attributes: {},\n messageInvalid: '',\n messageRequired: '',\n messageOutOfBounds: '',\n dropdownConfig: {\n placeholder: '',\n showDefaultOption: true,\n state: '',\n highlighted: false,\n hiddenLabel: true,\n hasClearButton: false,\n icon: false,\n clearButtonAttributes: {\n 'data-c-dropdown__clear': ''\n }\n },\n hideRequiredSymbol: false,\n tooltip: null\n}\n\nexport const DateSelectorTemplate = (d) => {\n d = { ...defaultDateSelectorData, ...d }\n d.id = d.id || 'my-date-selector' + uid()\n return `\n\n ${d.hiddenMainLabel\n ? `
`\n : `${d.mainLabel\n ? `${d.tooltip ? '
' : ''}\n ${d.mainLabel} \n ${d.tooltip ? `${TooltipTemplate({ ...defaultTooltipData, ...d.tooltip })}
` : ''}`\n : ''}\n `}\n\n
\n ${DropdownTemplate({\n ...d.dropdownConfig,\n id: `${d.id}__day`,\n placeholder: d.dayPlaceholder,\n disabled: d.disabled,\n attributes: { 'data-c-date-selector__type': 'day' }\n })}\n ${DropdownTemplate({\n ...d.dropdownConfig,\n id: `${d.id}__month`,\n placeholder: d.monthPlaceholder,\n disabled: d.disabled,\n attributes: { 'data-c-date-selector__type': 'month' }\n })}\n ${DropdownTemplate({\n ...d.dropdownConfig,\n id: `${d.id}__year`,\n placeholder: d.yearPlaceholder,\n disabled: d.disabled,\n attributes: { 'data-c-date-selector__type': 'year' }\n })}\n
\n
\n ${DateSelectorMessagesTemplate(d.messages)}\n
\n
\n ${message} \n
`\n ).join('')\n : ''\n}\n","\nexport const da = {\n dayPlaceholder: 'Dag',\n monthPlaceholder: 'Måned',\n yearPlaceholder: 'År'\n}\n\nexport const de = {\n dayPlaceholder: 'Tag',\n monthPlaceholder: 'Monat',\n yearPlaceholder: 'Jahr'\n}\n\nexport const en = {\n dayPlaceholder: 'Day',\n monthPlaceholder: 'Month',\n yearPlaceholder: 'Year'\n}\n\nexport const nb = {\n dayPlaceholder: 'Dag',\n monthPlaceholder: 'Måned',\n yearPlaceholder: 'År'\n}\nexport const fr = {\n dayPlaceholder: 'Jour',\n monthPlaceholder: 'Mois',\n yearPlaceholder: 'Année'\n}\n\nexport const nl = {\n dayPlaceholder: 'Dag',\n monthPlaceholder: 'Maand',\n yearPlaceholder: 'Jaar'\n}\n\nexport const sv = {\n dayPlaceholder: 'Dag',\n monthPlaceholder: 'Månad',\n yearPlaceholder: 'År'\n}\n","import Component from '../../../js/core/component/component'\r\nimport { registerComponent } from '../../../js/core/component/component-directory'\r\nimport {\r\n areDatesInSameMonth,\r\n areDatesInSameYear,\r\n dateToString,\r\n isInvalidDate,\r\n isValidDateString,\r\n createDate,\r\n noTimeZoneDate\r\n} from '../../../js/helpers/dates'\r\nimport { range } from '../../../js/utils'\r\nimport { register } from '../../../js/document/namespace'\r\nimport { language } from '../../../js/user/locale-settings'\r\nimport { fromCamelCase } from '../../../js/helpers/string'\r\nimport domEventsHelper from '../../../js/document/dom-events-helper'\r\nimport { DateSelectorMessagesTemplate } from './c-date-selector__messages.template'\r\nconst dateLocales = register(`window.sundio.i18n.${language}.dates`)\r\nconst componentLocales = register(`window.sundio.i18n.${language}.dateSelector`)\r\n\r\n// Ensure other child component APIs are loaded on time\r\nrequire('../dropdown/main')\r\n\r\nconst classNames = { dropdownElement: 'c-date-selector__' }\r\nconst monthNames = {\r\n default: dateLocales.months,\r\n short: dateLocales.months_short\r\n}\r\n\r\nconst today = new Date()\r\n\r\n/**\r\n * Props & State\r\n *\r\n * There are two types of data that control a component: props and state.\r\n * Props are set on instantiation and they are fixed throughout the lifetime\r\n * of a component. For data that is going to change, we have to use state.\r\n */\r\n\r\nconst definition = {\r\n\r\n name: 'c-date-selector',\r\n\r\n /**\r\n * Props\r\n *\r\n * Most components can be customized with different parameters when they\r\n * are created. These creation parameters are called props.\r\n *\r\n * This lets you make a single component that is used in many different\r\n * places in your app, with slightly different properties in each place.\r\n *\r\n *\r\n */\r\n props: [\r\n {\r\n name: 'date',\r\n type: 'string',\r\n attr: 'data-c-date-selector__date'\r\n }, {\r\n name: 'rawDate',\r\n type: 'string'\r\n }, {\r\n name: 'validations',\r\n type: 'array',\r\n attr: 'data-c-date-selector__validations',\r\n defaultValue: ['isReal', 'isInBounds']\r\n }, {\r\n name: 'minDate',\r\n type: 'string',\r\n attr: 'data-c-date-selector__min-date',\r\n defaultValue: dateToString(new Date(today.getFullYear() - 100, today.getMonth(), today.getDate()))\r\n }, {\r\n name: 'maxDate',\r\n type: 'string',\r\n attr: 'data-c-date-selector__max-date',\r\n defaultValue: dateToString(today)\r\n }, {\r\n name: 'monthType',\r\n type: 'string',\r\n attr: 'data-c-date-selector__month-type',\r\n defaultValue: 'default',\r\n allowedValues: [\r\n 'default',\r\n 'short'\r\n ]\r\n },\r\n {\r\n name: 'disabled',\r\n type: 'boolean',\r\n attr: '.is-disabled',\r\n defaultValue: false\r\n },\r\n {\r\n name: 'state',\r\n type: 'string',\r\n attr: '.has-',\r\n allowedValues: [\r\n '',\r\n 'error'\r\n ],\r\n defaultValue: ''\r\n }\r\n ]\r\n}\r\n\r\n/**\r\n * Dropdown content\r\n *\r\n */\r\nexport default class DateSelector extends Component {\r\n /**\r\n * Creates a new date selector behaviour, exposes an API to the element.\r\n *\r\n * @constructor\r\n * @param {HTMLElement} element - The HTML element.\r\n */\r\n constructor (element) {\r\n super(element, definition.name)\r\n this.dateConfig = {}\r\n this.silentErrors = true\r\n this._init()\r\n\r\n this.element[definition.name].validate = (this.validate).bind(this)\r\n this.element[definition.name].getShownDate = (this.getShownDate).bind(this)\r\n this.element[definition.name].enableErrors = this.enableErrors.bind(this)\r\n\r\n this.validationErrors = {\r\n isReal: this.element.getAttribute('data-message-invalid'),\r\n isInBounds: this.element.getAttribute('data-message-out-of-bounds') ? this.element.getAttribute('data-message-out-of-bounds') : dateLocales.isOutOfBounds,\r\n isValid: this.element.getAttribute('data-message-required')\r\n }\r\n\r\n this._attachMonthEventListeners()\r\n }\r\n\r\n /**\r\n * Checks first if date is valid and within min-max boundaries\r\n *\r\n * @param {string} dateString - Date in format 'YYYY-MM-DD'\r\n */\r\n checkDate (dateString) {\r\n const property = this._getPropInstance('date')\r\n if (!property.isAllowedValue.bind(property)(dateString)) { return false }\r\n const isNullable = dateString == null || dateString === ''\r\n const { isValid, isInBounds } = this._validateAll(dateString)\r\n if (!isNullable) {\r\n if (!isValid) {\r\n console.warn('The date is invalid')\r\n } else if (!isInBounds) { console.warn('The date cannot be out of min-max date boundaries') }\r\n }\r\n return isNullable || (isValid && isInBounds)\r\n }\r\n\r\n /**\r\n * Set date for the date-selector component\r\n *\r\n * @param {DateString|Date} dateString - Following built-in new Date(dateString) behaviour\r\n * @param {Object} options - Options object\r\n * @param {Boolean} options.justCheck - If true, does not set the dropdowns (case when the user sets it)\r\n */\r\n setDate (dateString, options = {}) {\r\n const date = dateString ? createDate(dateString) : noTimeZoneDate('') // Creates invalid date to set dropdowns to blank\r\n this._setDatePropAndAttribute('date', this._parseDate(date))\r\n this.setProp('rawDate', dateString)\r\n\r\n if (!options.justCheck) {\r\n const [day, month, year] = [date.getDate(), date.getMonth(), date.getFullYear()]\r\n const dateDropdowns = this._getDateDropdowns()\r\n const valueToStringOrEmpty = (value) => isNaN(value) ? '' : value.toString()\r\n dateDropdowns.day.setProp('value', valueToStringOrEmpty(day), { silent: true })\r\n dateDropdowns.month.setProp('value', valueToStringOrEmpty(month), { silent: true })\r\n dateDropdowns.year.setProp('value', valueToStringOrEmpty(year), { silent: true })\r\n this._setValidationState()\r\n }\r\n }\r\n\r\n /**\r\n * Set disabled property for the dropdowns component\r\n *\r\n * @param {Boolean} isDisabled - If true, the dropdowns will be disabled\r\n */\r\n\r\n setDisabled (isDisabled = false) {\r\n this.props.disabled = isDisabled\r\n const dateDropdowns = this._getDateDropdowns()\r\n dateDropdowns.day.setProp('disabled', isDisabled)\r\n dateDropdowns.month.setProp('disabled', isDisabled)\r\n dateDropdowns.year.setProp('disabled', isDisabled)\r\n }\r\n\r\n /**\r\n * Set minimum date for the date-selector component\r\n *\r\n * @param {string|Date} dateString - if incorrect, minimum computable date\r\n */\r\n setMinDate (dateString = this.props.minDate) {\r\n this._setDateConfig('minDate', dateString)\r\n }\r\n\r\n /**\r\n * Set maximum date for the date-selector component\r\n *\r\n * @param {string|Date} dateString - if incorrect, today's date\r\n */\r\n setMaxDate (dateString = this.props.maxDate) {\r\n this._setDateConfig('maxDate', dateString)\r\n }\r\n\r\n /**\r\n * Set month type (short or long month name)\r\n *\r\n * @param {string} opc - short or default\r\n */\r\n setMonthType (opc) {\r\n this._setDatePropAndAttribute('monthType', opc)\r\n const dateDropdowns = this._getDateDropdowns()\r\n const options = [...dateDropdowns.month.getProp('options')]\r\n options.forEach((monthItem) => (monthItem.text = (monthNames[opc][monthItem.value] || monthItem.text)))\r\n dateDropdowns.month.setProp('options', options)\r\n }\r\n\r\n enableErrors () {\r\n this.silentErrors = false\r\n }\r\n\r\n /**\r\n * Validates the current date, adding error validation if date is invalid\r\n *\r\n * @param {Object} validateOnly - If true, we only validate\r\n * @return {boolean} - true if Date is valid\r\n */\r\n\r\n validate (validateOnly = false) {\r\n const validations = this._validateAll()\r\n const isRequired = this.element.hasAttribute('required')\r\n const isEmpty = this._fullDateIsEmpty()\r\n const isValidDate = (!isRequired && isEmpty) || Object.values(validations).every((item) => item)\r\n let messages = []\r\n let messageTypes = []\r\n if ((!validateOnly && !this.silentErrors) || this.isErrorState) {\r\n this._setValidationState(isValidDate ? '' : 'error')\r\n messages = this._setValidationErrors(validations)\r\n messageTypes = this._getValidationMessageTypes(validations)\r\n }\r\n\r\n const dateDropdowns = this._getDateDropdowns()\r\n return {\r\n isValid: isValidDate,\r\n errorMessages: messages,\r\n errorTypes: messageTypes,\r\n fieldName: dateDropdowns.day.element.querySelector('select').name + '-' +\r\n dateDropdowns.month.element.querySelector('select').name + '-' +\r\n dateDropdowns.year.element.querySelector('select').name\r\n }\r\n }\r\n\r\n /**\r\n * Returns the current date shown in date selector (even if date is not within boundaries)\r\n *\r\n * @return {DateString}\r\n */\r\n getShownDate () {\r\n return dateToString(createDate(this._getFullDateString()))\r\n }\r\n\r\n /**\r\n * Check if date is valid, within min-max boundaries and real date (Unreal date example: 31/02/2010)\r\n *\r\n * @param {DateString} [dateString] - if not specified, we take the component's date\r\n *\r\n * @return {Object} - with the different validations\r\n */\r\n _validateAll (dateString = this._getFullDateString()) {\r\n const date = noTimeZoneDate(dateString || '')\r\n const validations = this.getProp('validations').reduce((obj, value) => ({ ...obj, [value]: true }), {})\r\n const isRequired = this.element.hasAttribute('required')\r\n const isEmpty = this._fullDateIsEmpty()\r\n return {\r\n isValid: (!isRequired && isEmpty) || !isInvalidDate(date),\r\n isInBounds: (!isRequired && isEmpty) || !validations.isInBounds || ((date >= this.dateConfig.minDate) && (date <= this.dateConfig.maxDate)),\r\n isReal: (!isRequired && isEmpty) || !validations.isReal || isValidDateString(dateString)\r\n }\r\n }\r\n\r\n _init () {\r\n this._normalizeDates()\r\n this._setListeners()\r\n if (this.props.date) {\r\n const date = this.props.date\r\n this.props.date = null\r\n this.setProp('date', date)\r\n }\r\n }\r\n\r\n _parseDate (date) {\r\n return (date instanceof Date) ? dateToString(date) : (date || '')\r\n }\r\n\r\n _setValidationErrors (validations) {\r\n let validationType = Object.entries(validations).find(([type, isValid]) => !isValid)\r\n validationType = validationType && validationType[0]\r\n const errorElement = this._getErrorElement()\r\n errorElement.innerHTML = ''\r\n const messages = []\r\n if (validationType !== undefined) {\r\n const errorMessage = this._getValidationMessages(validationType)\r\n if (errorMessage) {\r\n if (this.errorElement !== null && this.errorElement !== undefined) {\r\n this.errorElement.innerHTML = DateSelectorMessagesTemplate(errorMessage)\r\n }\r\n }\r\n }\r\n return messages\r\n }\r\n\r\n _getValidationMessages (validationType) {\r\n const messages = []\r\n if (validationType === 'isReal' && this.validationErrors?.isReal) {\r\n messages.push(this.validationErrors.isReal)\r\n }\r\n if (validationType === 'isInBounds' && this.validationErrors?.isInBounds) {\r\n messages.push(this.validationErrors.isInBounds)\r\n }\r\n if (validationType === 'isValid' && this.validationErrors?.isValid) {\r\n messages.push(this.validationErrors.isValid)\r\n }\r\n return messages\r\n }\r\n\r\n _getValidationMessageTypes (validations) {\r\n const messageTypes = []\r\n let validationType = Object.entries(validations).find(([type, isValid]) => !isValid)\r\n validationType = validationType && validationType[0]\r\n if (validationType) {\r\n messageTypes.push(validationType)\r\n }\r\n return messageTypes\r\n }\r\n\r\n _setDatePropAndAttribute (propName, value) {\r\n this.props[propName] = value\r\n this.element.setAttribute(`data-${classNames.dropdownElement}${fromCamelCase(propName)}`, value)\r\n }\r\n\r\n _setDateConfig (opc, dateString) {\r\n const dateTemp = noTimeZoneDate(dateString)\r\n // If invalid date, we set min/max date to its minimun/maximun, respectively\r\n const date = (dateString == null || isInvalidDate(dateTemp))\r\n ? noTimeZoneDate(opc === 'minDate' ? 0 : undefined)\r\n : dateTemp\r\n\r\n this._checkDates({ ...this.dateConfig, [opc]: date }, opc)\r\n this.dateConfig[opc] = date\r\n this._setDatePropAndAttribute(opc, this._parseDate(date))\r\n this._setDropdownPlaceholders()\r\n this._populateDropdowns()\r\n }\r\n\r\n _getFullDateString () {\r\n const dateDropdowns = this._getDateDropdowns()\r\n const monthDropdownValue = dateDropdowns.month.getProp('value')\r\n const incrementNumberForRealMonth = 1\r\n const [day, month, year] = [dateDropdowns.day.getProp('value'),\r\n monthDropdownValue ? (Number(monthDropdownValue) + incrementNumberForRealMonth) : '',\r\n dateDropdowns.year.getProp('value')]\r\n\r\n const isNumberNotNull = (value) => (value === 0 || value)\r\n return (isNumberNotNull(day) && isNumberNotNull(month) && isNumberNotNull(year)) ? `${year}-${month}-${day}` : null\r\n }\r\n\r\n _fullDateIsEmpty () {\r\n const dateDropdowns = this._getDateDropdowns()\r\n const day = dateDropdowns.day.getProp('value')\r\n const month = dateDropdowns.month.getProp('value')\r\n const year = dateDropdowns.year.getProp('value')\r\n return day === '' && month === '' && year === ''\r\n }\r\n\r\n _getDateDropdowns () {\r\n this.dateDropdowns = this.dateDropdowns ||\r\n Array.from(this.element.querySelectorAll(`[data-${classNames.dropdownElement}type]`))\r\n .map((dropdownElement) => [dropdownElement.getAttribute(`data-${classNames.dropdownElement}type`), dropdownElement])\r\n .reduce((obj, [type, dropdownElement]) => ({ ...obj, [type]: dropdownElement['c-dropdown'] }), {})\r\n return this.dateDropdowns\r\n }\r\n\r\n _getErrorElement () {\r\n this.errorElement = this.errorElement || this.element.querySelector('.c-date-selector__messages')\r\n return this.errorElement\r\n }\r\n\r\n _normalizeDates () {\r\n this.setMinDate()\r\n this.setMaxDate()\r\n }\r\n\r\n _checkDates (config = this.dateConfig, opc) {\r\n const { minDate, maxDate, date } = config\r\n if (minDate && maxDate && (minDate > maxDate)) {\r\n const dateToChange = (opc === 'maxDate') ? 'minDate' : 'maxDate'\r\n console.warn(`The minDate cannot be greater than the maxDate, setting ${dateToChange} to ${opc}`)\r\n this.setProp(dateToChange, this.getProp(opc))\r\n } else if (date && ((minDate && date < minDate) || (maxDate && date > maxDate))) {\r\n console.warn(`The date cannot be out of min-max date boundaries, setting date to ${opc}`)\r\n }\r\n }\r\n\r\n _setListeners () {\r\n Object.values(this._getDateDropdowns())\r\n .forEach((dropdownComponent) => dropdownComponent.events.on('propChanged', (changes) => {\r\n if (changes.name === 'value') {\r\n const fullDateString = this._getFullDateString()\r\n const isValid = this.validate().isValid\r\n this.setProp('date', isValid ? fullDateString : '', { justCheck: true })\r\n }\r\n }))\r\n }\r\n\r\n _setValidationState (stateValue) {\r\n this.isErrorState = !!stateValue\r\n this.setProp('state', stateValue || '')\r\n }\r\n\r\n _populateDropdowns () {\r\n const { minDate, maxDate } = this.dateConfig\r\n\r\n if (minDate && maxDate) {\r\n let days = range(31)\r\n let months = range(0, 11)\r\n const years = range(minDate.getFullYear(), maxDate.getFullYear()).reverse()\r\n if (areDatesInSameYear(minDate, maxDate)) {\r\n months = range(minDate.getMonth(), maxDate.getMonth())\r\n if (areDatesInSameMonth(minDate, maxDate)) { days = range(minDate.getDate(), maxDate.getDate()) }\r\n }\r\n const defaultEmptyOption = { text: '', value: '', default: true, disabled: true }\r\n const dateDropdowns = this._getDateDropdowns()\r\n dateDropdowns.day.setProp('options', [defaultEmptyOption, ...days.map((value) => ({ value: value.toString(), text: value }))])\r\n dateDropdowns.month.setProp('options', [defaultEmptyOption, ...months.map((value) => ({ value: value.toString(), text: monthNames[this.getProp('monthType')][value] }))])\r\n dateDropdowns.year.setProp('options', [defaultEmptyOption, ...years.map((value) => ({ value: value.toString(), text: value }))])\r\n }\r\n }\r\n\r\n _setDropdownPlaceholders () {\r\n const dateDropdowns = this._getDateDropdowns()\r\n const [dayPlaceholder, monthPlaceholder, yearPlaceholder] = [\r\n dateDropdowns.day.getProp('placeholder'),\r\n dateDropdowns.month.getProp('placeholder'),\r\n dateDropdowns.year.getProp('placeholder')\r\n ]\r\n\r\n dayPlaceholder || dateDropdowns.day.setProp('placeholder', componentLocales.dayPlaceholder)\r\n monthPlaceholder || dateDropdowns.month.setProp('placeholder', componentLocales.monthPlaceholder)\r\n yearPlaceholder || dateDropdowns.year.setProp('placeholder', componentLocales.yearPlaceholder)\r\n }\r\n\r\n _attachMonthEventListeners () {\r\n this.buffer = []\r\n this.lastKeyTime = Date.now()\r\n\r\n const monthDropdown = this._getDateDropdowns().month\r\n\r\n domEventsHelper.attachEvents([\r\n [monthDropdown.element, { keydown: (ev) => this.onKeyDown(ev, monthDropdown) }]\r\n ], definition.name)\r\n }\r\n\r\n onKeyDown (ev, monthDropdown) {\r\n const charList = '0123456789'\r\n const key = ev.key.toLowerCase()\r\n\r\n // we are only interested in numeric keys\r\n if (charList.indexOf(key) === -1) return\r\n\r\n const currentTime = Date.now()\r\n if (currentTime - this.lastKeyTime > 1000) {\r\n this.buffer = []\r\n }\r\n\r\n this.buffer.push(key)\r\n this.lastKeyTime = currentTime\r\n const decrementNumberForMonth = 1\r\n const valueForMonthOption = Number(this.buffer.join('')) > 0 ? (Number(this.buffer.join('')) - decrementNumberForMonth).toString() : Number(0).toString()\r\n\r\n const optionCandidate = this.buffer.join('') && valueForMonthOption >= 0 ? monthDropdown.element.querySelector(`[value=\"${valueForMonthOption}\"]`) : monthDropdown.element.firstChild\r\n if (optionCandidate) {\r\n monthDropdown.setProp('value', valueForMonthOption)\r\n }\r\n ev.stopPropagation()\r\n ev.preventDefault()\r\n }\r\n}\r\n\r\nregisterComponent(DateSelector, definition.name, definition)\r\n","/**\n * C-Dropdown Helper for the Dropdown template\n */\n\n/**\n *\n * @param {options} options from dropdown\n * @returns {boolean} if any option is selected\n */\nexport const isAnyOptionSelected = function (options) {\n let anySelected = false\n if (options) {\n anySelected = options.some(o => o !== null && o.selected)\n }\n return anySelected\n}\n\n/**\n *\n * @param {option} option from dropdown\n * @returns {String} content with the rendered items\n */\nexport const selectedItemSingle = function (option) {\n return `${option.text ? option.text : ''} `\n}\n\n/**\n *\n * @param {options} options from dropdown\n * @returns {String} content with the rendered items\n */\nexport const renderSelectedItemsCompact = function (options) {\n let selectedItems = ''\n if (options) {\n options.forEach(option => {\n if (option.selected) {\n selectedItems += selectedItemSingle(option)\n }\n if (option.nestedOptions != null && option.nestedOptions.some(n => n.selected)) {\n option.nestedOptions.forEach(n => {\n if (n.selected) {\n selectedItems += selectedItemSingle(n)\n }\n })\n }\n })\n }\n return selectedItems\n}\n\n/**\n *\n * @param {options} option from dropdown (item)\n * @returns {bool} if item is half checked\n */\nexport const isHalfChecked = function (option) {\n let isHalfChecked = false\n if (option.selected && option.nestedOptions != null && option.nestedOptions.some(n => n.selected) && !option.NestedOptions.every(n => n.selected)) {\n isHalfChecked = true\n }\n return isHalfChecked\n}\n\n/**\n *\n * @param {options} dropdownId dropdown's id\n * @param {options} indexParent index from the parent loop it is in\n * @param {options} options from dropdown\n * @returns {Array} All content in a item nested option\n */\nexport const mapNestedOptionsToCheckboxViewModels = function (dropdownId, indexParent, options) {\n const nestedOptions = []\n if (options) {\n let index = 0\n options.forEach(option => {\n const item = {\n value: option.value,\n text: option.text,\n disabled: option.disabled,\n checked: option.selected,\n id: dropdownId + 'choice-list' + indexParent + 'nested-item' + index,\n name: dropdownId + 'choice-list' + indexParent + 'nested-items',\n count: option.count\n }\n nestedOptions.push(item)\n index++\n })\n }\n return nestedOptions\n}\n\n/**\n *\n * @param {options} dropdownId dropdown's id\n * @param {options} options from dropdown\n * @returns {Array} All the items in the choicelist\n */\nexport const buildChoiceListItem = function (options, dropdownId) {\n const choiceListItems = []\n if (options) {\n let index = 0\n options.forEach(option => {\n const item = {\n value: option.value,\n text: option.text,\n disabled: option.disabled,\n checked: option.selected,\n id: dropdownId + '-' + index,\n name: dropdownId + '-choice-list',\n items: mapNestedOptionsToCheckboxViewModels(dropdownId + '-nested', index, option.nestedOptions),\n isHalfChecked: isHalfChecked(option),\n count: option.count\n }\n choiceListItems.push(item)\n index++\n })\n }\n return choiceListItems\n}\n","/**\n * The Dropdown Multiple Option contains all data needed to hydrate a Dropdown Multiple\n *\n * @typedef {Object} DropdownData\n *\n * @property {String} [id] Form element id\n * @property {String} [placeholder] Form element placeholder\n * @property {Boolean} [icon]\n * @property {Object} [attributes] Extra attributes to be shown\n */\n\nimport { ChipTemplate } from '../chip/c-chip.template'\nimport { FloatingBoxTemplate } from '../floating-box/c-floating-box.template'\nimport { renderSelectedItemsCompact, buildChoiceListItem } from './c-dropdown_helper'\nimport { FloatingBoxBodyTemplate } from '../floating-box/c-floating-box__body.template'\nimport { BtnTemplate, defaultButtonData } from '../../components/btn/c-btn.template'\nimport { FloatingBoxFooterTemplate } from '../floating-box/c-floating-box__footer.template'\nimport { ChoiceListTemplate } from '../choice-list/c-choice-list.template'\n\nexport const defaultDropdownMultipleData = {\n id: '',\n placeholder: '',\n variant: 'default',\n icon: false,\n options: [],\n floatingBoxContent: ''\n}\n\n/**\n *\n * @param {options} d dropdown's data\n * @returns {String} Body content for the dropdown\n */\nexport const buildFloatingBoxBody = function (d) {\n let floatingBoxBody = ''\n if (d) {\n floatingBoxBody = FloatingBoxBodyTemplate(\n {\n extraClasses: '',\n attributes: {}\n },\n ChoiceListTemplate(\n {\n id: d.id,\n method: 'multiple',\n label: '',\n attributes: { 'data-c-dropdown__choice-list': '' },\n items: buildChoiceListItem(d.options, d.id)\n }\n )\n )\n }\n return floatingBoxBody\n}\n\n/**\n *\n * @param {options} d dropdown's data\n * @returns {String} Footer content for the dropdown\n */\nexport const buildFloatingBoxFooter = function (d) {\n let floatingBoxFooter = ''\n if (d) {\n floatingBoxFooter = FloatingBoxFooterTemplate(\n {\n extraClasses: '',\n attributes: {}\n },\n BtnTemplate({\n ...defaultButtonData,\n ...{\n text: d.cancelButtonText,\n variant: 'flat-neutral',\n attributes: { 'data-c-dropdown__action': 'cancel' }\n }\n }) + BtnTemplate({\n ...defaultButtonData,\n ...{\n text: d.okButtonText,\n attributes: { 'data-c-dropdown__action': 'submit' }\n }\n })\n )\n }\n return floatingBoxFooter\n}\n\nexport const DropdownMultipleTemplate = (d) => {\n d = { ...defaultDropdownMultipleData, ...d }\n return `\n ${d.variant === 'compact' ? `
${d.label} ` : ''}\n ${d.icon ? `
` : ''}\n
\n
\n
${d.variant === 'compact'\n ? renderSelectedItemsCompact(d.options)\n : `${d.options.filter(o => o.selected).map(option => ChipTemplate(option)).join('')}`}
\n
\n \n
\n \n
${d.placeholder} \n
\n
\n
\n ${d.floatingBoxContent\n ? d.floatingBoxContent\n : FloatingBoxTemplate(\n {\n opened: false,\n gradient: true,\n floatsFrom: 'xs',\n extraClasses: 'c-dropdown__floating-box',\n attributes: {\n 'data-c-dropdown__floating-box': ''\n }\n },\n buildFloatingBoxBody(d) + buildFloatingBoxFooter(d)\n )}\n
${d.text || ''} ${d.count ? `(${d.count})` : ''} \n `\n}\n","/**\n * The Dropdown Single Option contains all data needed to hydrate a Dropdown Single\n *\n * @typedef {Object} DropdownData\n *\n * @property {String} [id] Form element id\n * @property {String} [placeholder] Form element placeholder\n * @property {Boolean} [disabled] When true any change cannot be done\n * @property {Boolean} [icon]\n * @property {Object} [options] all optins for the dropdown to build\n */\nimport { encodeAttributes } from '../../../js/helpers/string'\nimport { BtnTemplate, defaultButtonData } from '../btn/c-btn.template'\nimport { DropdownSingleOptionTemplate } from './c-dropdown_single-option.template'\n\nexport const defaultDropdownSingleData = {\n id: '',\n placeholder: '',\n disabled: false,\n variant: 'default',\n icon: false,\n options: []\n}\n\nexport const DropdownSingleTemplate = (d) => {\n d = { ...defaultDropdownSingleData, ...d }\n return `\n ${d.variant === 'compact' ? `${d.label} ` : ''}\n ${d.icon ? `\n \n ${d.placeholder\n? `${d.placeholder} `\n : (d.variant === 'compact' && d.label) ? `${d.label} ` : ''\n }\n ${d.options.map(option => DropdownSingleOptionTemplate(option)).join('')}\n \n ${d.hasClearButton\n ? BtnTemplate({\n ...defaultButtonData,\n ...{\n text: '',\n variant: 'icon-only',\n icon: 'cross',\n iconPosition: 'left',\n extraClasses: 'c-dropdown__clear',\n attributes: d.clearButtonAttributes\n }\n })\n : ''}\n
`\n}\n","\n/**\n * The Dropdown Multiple Compact Item contains all data needed to hydrate a Dropdown Multiple when it is compact\n *\n * @typedef {Object} DropdownMultipleCompactItemData\n *\n * @property {String} text - Option text\n * @property {String} value - Associated option's value\n */\n\nexport const defaultDropdownMultipleCompactItemData = {\n text: '',\n value: ''\n\n}\n\nexport const DropdownMultipleCompactItemTemplate = (d) => {\n d = { ...defaultDropdownMultipleCompactItemData, ...d }\n return `${d.text || ''} \n `\n}\n","import Component from '../../../../js/core/component/component'\nimport { ChipTemplate } from '../../chip/c-chip.template'\nimport { registerComponent } from '../../../../js/core/component/component-directory'\nimport domEventsHelper from '../../../../js/document/dom-events-helper'\nimport { elementFromString } from '../../../../js/document/html-helper'\nimport { queueFilterEvent } from '../../../../js/helpers/queue-filter-event'\nimport registeredEvents from '../../../../js/helpers/registered-events'\nimport { DropdownMultipleCompactItemTemplate } from './c-dropdown__multiple__compact-item.template'\n\n// Ensure other child component APIs are loaded on time\nrequire('../../choice-list/main')\nrequire('../../floating-box/main')\n\nconst componentApi = 'c-dropdown-multiple'\n\nconst attr = {\n track: 'data-track'\n}\n\nconst definition = {\n name: componentApi,\n props: [\n {\n name: 'disabled',\n type: 'boolean',\n attr: '.is-disabled',\n defaultValue: false\n },\n {\n name: 'options',\n type: 'collection'\n },\n {\n name: 'optionsData',\n type: 'collection'\n },\n {\n name: 'variant',\n type: 'string',\n attr: 'data-variant',\n defaultValue: 'default'\n },\n {\n name: 'saveOnDomClick',\n type: 'boolean',\n attr: 'data-save-dom-click',\n defaultValue: false\n }\n ]\n}\n\nconst componentQueries = {\n focusElement: '.c-dropdown__element',\n optionsList: '.c-dropdown__selected-item-list',\n chipRemove: '[data-c-chip__action=\"remove\"]',\n floatingBox: '[data-c-dropdown__floating-box]',\n choiceList: '[data-c-dropdown__choice-list]',\n cancel: '[data-c-dropdown__action=\"cancel\"]',\n submit: '[data-c-dropdown__action=\"submit\"]',\n label: '[data-c-dropdown__label]',\n arrow: '.c-dropdown__arrow',\n compact: 'compact',\n hasValues: 'has-values'\n}\n\nconst defaults = {\n minHeight: '260px',\n maxHeight: '400px'\n}\n\nconst changeEvent = new window.CustomEvent('change', { bubbles: true, cancelable: false })\n\n/**\n * DropdownMultiple content\n *\n */\nexport default class DropdownMultiple extends Component {\n /**\n * Creates a new dropdown behaviour, exposes an API to the element.\n *\n * @constructor\n * @param {HTMLElement} element - The HTML element.\n */\n constructor (element) {\n super(element, definition.name)\n this.opened = false\n\n // Access to floatingBox element and it's API\n this.floatingBox = this.element.querySelector(componentQueries.floatingBox)\n this.floatingBoxApi = this.floatingBox['c-floating-box']\n this.floatingBoxApi.setProp('minHeight', defaults.minHeight, { silent: true })\n this.floatingBoxApi.setProp('maxHeight', defaults.maxHeight, { silent: true })\n\n this.arrow = this.element.querySelector(componentQueries.arrow)\n\n // Access to ChoiceList element and it's API\n this.xoiceList = this.element.querySelector(componentQueries.choiceList)\n this.xoiceListApi = this.xoiceList['c-choice-list']\n\n // Populate missing props\n this.props.options = [...this.getOptions()]\n this.props.optionsData = [...this.getOptionsData()]\n this.selectedValues = [...this.xoiceListApi.getSelectedValues()]\n\n // Find for child elements and bind some DOM events associated\n this.focusElement = this.element.querySelector(componentQueries.focusElement)\n this.optionsListElement = this.element.querySelector(componentQueries.optionsList)\n this.cancelElement = this.element.querySelector(componentQueries.cancel)\n this.submitElement = this.element.querySelector(componentQueries.submit)\n domEventsHelper.attachEvents([\n [this.element, { keydown: (ev) => this.onKeyDown(ev) }],\n [this.focusElement, { focus: (ev) => this.onFocus(ev) }],\n [this.optionsListElement, { mousedown: (ev) => this.onClickChipList(ev) }],\n [this.cancelElement, { click: (ev) => this.onCancel(ev) }],\n [this.submitElement, { click: (ev) => this.onSubmit(ev) }]\n ], definition.name)\n\n this.isCompact = this.element.getAttribute('data-variant') === componentQueries.compact\n\n // Bind ChoiceList events\n this.xoiceListApi.events.on('changeOptions', options => {\n this.props.options = JSON.parse(JSON.stringify(options))\n this.props.optionsData = [...this.getOptionsData()]\n this.selectedValues = [...this.xoiceListApi.getSelectedValues()]\n this._updateOptions()\n // IE/Edge bug does not update the :empty state on time, by toggling a fake class forces a repaint solving the bug that overlaps placeholder on the filters selected\n this.element.classList.toggle('weird')\n this.selectedValues.length !== 0 ? this.element.classList.add(componentQueries.hasValues) : this.element.classList.remove(componentQueries.hasValues)\n this._recoverFocus()\n this.events.emit('changeOptions', this.props.options)\n })\n // Bind chevron event\n\n this.arrow.addEventListener('click', this.toggleFloatingBox.bind(this))\n\n element[this.name].getSelectedValues = (this.getSelectedValues).bind(this)\n element[this.name].getOkButtonLabelText = (this.getOkButtonLabelText).bind(this)\n element[this.name].getOkButton = (this.getOkButton).bind(this)\n element[this.name].getCancelButtonLabelText = (this.getCancelButtonLabelText).bind(this)\n element[this.name].getCancelButton = (this.getCancelButton).bind(this)\n element[this.name].getLabel = (this.getLabel).bind(this)\n element[this.name].open = (this.open).bind(this)\n\n registeredEvents.registerComponentEvents(definition.name, this.events, {\n ...this.element.hasAttribute(attr.track) && { track: this.element.attributes[attr.track].value }\n })\n }\n\n /**\n * Opens the Dropdown\n *\n * - Init the fallback values to handle cancel events\n * - Opens the FloatingBox\n * - Bind documentClick event\n * - Set focus on first option\n * - Emit OPEN event\n *\n * @param {Object} options - Options object\n * @param {Boolean} [options.silent] - If true, does not fire events\n *\n * @return {DropdownMultiple} self instance\n */\n open (options = {}) {\n if (this.opened) return this\n this.focusElement.classList.add('is-focused')\n this.fallbackValues = [...this.selectedValues]\n this.floatingBoxApi.setProp('opened', true)\n this._openedEvents = [\n [document, { mousedown: (ev) => this.onDocumentClick(ev) }]\n ]\n domEventsHelper.attachEvents(this._openedEvents, definition.name)\n // Move the focus to first element\n this.moveFocusToFirstElement()\n this.opened = true\n this.updateChevron()\n if (!options.silent) this.events.emit('open')\n return this\n }\n\n moveFocusToFirstElement () {\n this.focusableOptions = this.xoiceList.querySelectorAll('input')\n if (!this.focusableOptions.length) return\n this.focusableOptions[0].focus()\n this.lastFocusedElement = this.focusableOptions[0]\n this.lastFocusedIndex = 0\n }\n\n /**\n * Closes the Dropdown\n *\n * - UnBind documentClick event\n * - Closes the FloatingBox\n * - Set focus on first option\n * - If SAVE is TRUE:\n * - Emit SUBMIT event\n * - If SAVE is FALSE:\n * - Restore fallback options\n * - Emit CLOSE event\n *\n * @param {Object} options - Options object\n * @param {Boolean} [options.silent] - If true, does not fire events\n * @param {Boolean} [options.save] - If true, save the changes\n *\n * @return {DropdownMultiple} self instance\n */\n close (options = {}) {\n if (!this.opened) return this\n domEventsHelper.detachEvents(this._openedEvents, definition.name)\n this.focusElement.classList.remove('is-focused')\n this.floatingBoxApi.setProp('opened', false)\n let shouldEmit = false\n if (!options.save) {\n const newOptions = JSON.parse(JSON.stringify(this.props.options))\n .map(option => {\n option.checked = this.fallbackValues.includes(option.value)\n return option\n })\n this.xoiceListApi.setProp('options', newOptions)\n } else {\n shouldEmit = options.silent\n ? false\n : (JSON.stringify(this.fallbackValues) !== JSON.stringify(this.selectedValues))\n }\n this.fallbackValues = undefined\n this.focusableOptions = undefined\n this.lastFocusedElement = undefined\n this.lastFocusedIndex = undefined\n this.opened = false\n this.updateChevron()\n if (shouldEmit) {\n this.events.emit('submit', this.props.options)\n }\n if (!options.silent) this.events.emit('close')\n return this\n }\n\n toggleFloatingBox () {\n if (this.opened) {\n this.close()\n } else {\n this.open()\n }\n }\n\n updateChevron () {\n if (this.opened) {\n this.arrow.classList.remove('m-icon--chevron-down')\n this.arrow.classList.add('m-icon--chevron-up')\n } else {\n this.arrow.classList.remove('m-icon--chevron-up')\n this.arrow.classList.add('m-icon--chevron-down')\n }\n }\n\n /**\n * Get the whole array of options from ChoiceList\n */\n getOptions () {\n return this.xoiceListApi ? this.xoiceListApi.props.options : []\n }\n\n /**\n * Set the array of options to Dropdown and ChoiceList\n *\n * @param {Object[]} items - Items to be set\n * @param {Object} options - Options object\n * @param {Boolean}[options.silent]- If true, does not fire events\n *\n */\n setOptions (items, options) {\n this.xoiceListApi.setProp('options', items, options)\n }\n\n /**\n * Get optionsData from props\n *\n * @returns {OptionsData[]}\n */\n getOptionsData () {\n const getOptionsDataFromOptions = (options) => {\n const optionsData = []\n options\n .forEach(option => {\n optionsData.push({\n value: option.value,\n text: option.text\n })\n if (option.items) optionsData.push(...getOptionsDataFromOptions(option.items))\n })\n return optionsData\n }\n return getOptionsDataFromOptions(this.props.options)\n }\n\n /**\n * Set optionsData collection, expecting a value and text for every one\n *\n * @param {OptionsData[]} optionsData\n * @param {Object} options - Options object\n * @param {Boolean}[options.silent]- If true, does not fire events\n * @param {Boolean}[options.forceUpdate]- If true, also updates the items\n */\n setOptionsData (optionsData, options) {\n this._updateOptions()\n }\n\n /**\n * Get selected values\n *\n * @return {String[]} values\n */\n getSelectedValues () {\n return this.selectedValues\n }\n\n /**\n * Get 'OK' button label text\n *\n * @return {String} Ok button label text\n */\n getOkButtonLabelText () {\n return this.submitElement['c-btn'].getText()\n }\n\n /**\n * Get 'OK' button\n *\n * @return {String} Ok button\n */\n getOkButton () {\n return this.submitElement\n }\n\n /**\n * Get 'Cancel' button label text\n *\n * @return {String} Cancel button label text\n */\n getCancelButtonLabelText () {\n return this.cancelElement['c-btn'].getText()\n }\n\n /**\n * Get 'Cancel' button\n *\n * @return {String} Cancel button\n */\n getCancelButton () {\n return this.cancelElement\n }\n\n /**\n * Get label text\n *\n * @return {String} label text\n */\n getLabel () {\n return this.element.querySelector(componentQueries.label).innerHTML\n }\n\n /**\n * Handle clicks on chipsElement, by mousedown to handle before other events like blur\n */\n onClickChipList (ev) {\n if (!ev.target.matches(componentQueries.chipRemove)) {\n this.onFocus()\n return\n }\n const matchValue = ev.target.parentElement.dataset.value\n const matchInput = this.xoiceList.querySelector(`input[value='${matchValue}']`)\n if (!matchInput) return\n matchInput.checked = false\n matchInput.dispatchEvent(changeEvent)\n\n // Removing a chip must only trigger a submit event if the dropdown is closed\n if (!this.opened) {\n this.events.emit('submit', this.props.options)\n }\n ev.preventDefault()\n ev.stopPropagation()\n }\n\n /**\n * Handled by keyDOWN on element\n *\n * - For UP and DOWN arrow keys\n * - Focus next/prev input\n * - Ensure result visibility\n *\n * - For ENTER and TAB keys\n * - Submit tempSelection\n *\n * - For ESC key\n * - Cancel tempSelection\n */\n onKeyDown (ev) {\n // Ignore event if the FloatingBox is not opened\n if (!this.floatingBoxApi.props.opened) return\n\n const key = ev.keyCode\n\n // Change keys: Down (40), Up (38)\n if (key === 40 || key === 38) {\n const currentElementIndex = [...this.focusableOptions].includes(document.activeElement)\n ? [...this.focusableOptions].indexOf(document.activeElement)\n : this.lastFocusedIndex\n const nextElement = key === 40\n ? this.focusableOptions.length > currentElementIndex + 1\n ? this.focusableOptions[currentElementIndex + 1]\n : this.focusableOptions[currentElementIndex]\n : (currentElementIndex - 1) >= 0\n ? this.focusableOptions[currentElementIndex - 1]\n : this.focusableOptions[currentElementIndex]\n if (nextElement !== this.lastFocusedElement) {\n const newIndex = [...this.focusableOptions].indexOf(nextElement)\n this.focusableOptions[newIndex].focus()\n this.lastFocusedElement = this.focusableOptions[newIndex]\n this.lastFocusedIndex = newIndex\n }\n ev.preventDefault()\n }\n\n // Submit keys: Enter (13), Tab (9)\n if (key === 13 || key === 9) { this.close({ save: true }) }\n\n // Discard keys: Esc (27)\n if (key === 27) { this.close() }\n }\n\n /**\n * Handle cancel events\n */\n onCancel () {\n this.close()\n }\n\n /**\n * Handle element focus events\n */\n onFocus () {\n this.open()\n }\n\n /**\n * Handle submit events\n */\n onSubmit () {\n this.close({ save: true })\n }\n\n /**\n * Handle document click event\n */\n onDocumentClick (ev) {\n const shouldSave = this.getProp('saveOnDomClick')\n const shouldEmit = (JSON.stringify(this.fallbackValues) !== JSON.stringify(this.selectedValues))\n queueFilterEvent(\n ev,\n this.element,\n () => this.close({ silent: !shouldEmit, save: shouldSave }),\n shouldEmit\n )\n\n // Handle input clicks to focus there\n if (ev.target.closest('.c-choice-list__option')) {\n const targetClicked = ev.target.closest('.c-choice-list__option').querySelector('.c-checkbox__input')\n if ([...this.focusableOptions].includes(targetClicked)) {\n const newIndex = [...this.focusableOptions].indexOf(targetClicked)\n this.focusableOptions[newIndex].focus()\n this.lastFocusedElement = this.focusableOptions[newIndex]\n this.lastFocusedIndex = newIndex\n }\n }\n }\n\n /**\n * Recover focus after a change on ChoiceList\n *\n * @return {DropdownMultiple} self instance\n */\n _recoverFocus () {\n if (!this.floatingBoxApi.props.opened) return this\n this.focusableOptions = this.xoiceList.querySelectorAll('input')\n if (this.focusableOptions[this.lastFocusedIndex]) {\n this.focusableOptions[this.lastFocusedIndex].focus()\n this.lastFocusedElement = this.focusableOptions[this.lastFocusedIndex]\n }\n return this\n }\n\n /**\n * Flush all item elements for this component\n *\n * @return {DropdownMultiple} self instance\n */\n _flushOptionsElements () {\n while (this.optionsListElement.firstChild) {\n this.optionsListElement.removeChild(this.optionsListElement.firstChild)\n }\n return this\n }\n\n /**\n * Renew all item elements for this component\n *\n * @param {Object[]} options - Options from where to update items\n *\n * @return {DropdownMultiple} self instance\n */\n _updateOptions (options = this.props.options) {\n this._flushOptionsElements()\n if (this.isCompact) {\n this.xoiceListApi.getReducedSelectedValuesFromOptions()\n .forEach(value => {\n const newItem = this._newItemElement(value)\n if (newItem) { this.optionsListElement.appendChild(newItem) }\n })\n } else {\n this.xoiceListApi.getReducedSelectedValuesFromOptions()\n .forEach(value => {\n const newChip = this._newChipElement(value)\n if (newChip) { this.optionsListElement.appendChild(newChip) }\n })\n }\n return this\n }\n\n /**\n * Creates a chip element from option data\n *\n * @param {String} value - The associated value to create the view with\n *\n * @return {HTMLElement}\n *\n */\n _newChipElement (value) {\n const chipData = this.props.optionsData\n .find(chip => chip.value === value)\n if (!chipData) {\n return undefined\n }\n const newChipData = {\n value: chipData.value,\n text: chipData.text\n }\n return elementFromString(ChipTemplate(newChipData))\n }\n\n /**\n * Creates a item element from option data when multiple option is compact\n *\n * @param {String} value - The associated value to create the view with\n *\n * @return {HTMLElement}\n *\n */\n _newItemElement (value) {\n const ItemData = this.props.optionsData\n .find(chip => chip.value === value)\n if (!ItemData) {\n return undefined\n }\n const newItemData = {\n value: ItemData.value,\n text: ItemData.text\n }\n return elementFromString(DropdownMultipleCompactItemTemplate(newItemData))\n }\n}\n\nregisterComponent(DropdownMultiple, definition.name, definition)\n","import Component from '../../../js/core/component/component'\r\nimport { registerComponent } from '../../../js/core/component/component-directory'\r\nimport { elementFromString } from '../../../js/document/html-helper'\r\nimport domEventsHelper from '../../../js/document/dom-events-helper'\r\nimport { DropdownSingleOptionTemplate } from './c-dropdown_single-option.template'\r\nimport { DropdownMessagesTemplate } from './c-dropdown__messages.template'\r\nimport registeredEvents from '../../../js/helpers/registered-events'\r\nimport { requestAnimationFrame } from '../../../js/document/requestAnimationFrame'\r\n\r\n/**\r\n * Props & State\r\n *\r\n * There are two types of data that control a component: props and state.\r\n * Props are set on instantiation and they are fixed throughout the lifetime\r\n * of a component. For data that is going to change, we have to use state.\r\n */\r\n\r\nconst attr = {\r\n track: 'data-track'\r\n}\r\n\r\nconst componentQueries = {\r\n arrow: '.c-dropdown__arrow'\r\n}\r\n\r\nconst definition = {\r\n\r\n name: 'c-dropdown',\r\n\r\n /**\r\n * Props\r\n *\r\n * Most components can be customized with different parameters when they\r\n * are created. These creation parameters are called props.\r\n *\r\n * This lets you make a single component that is used in many different\r\n * places in your app, with slightly different properties in each place.\r\n *\r\n *\r\n */\r\n\r\n props: [\r\n {\r\n name: 'value',\r\n type: 'string'\r\n }, {\r\n name: 'options',\r\n type: 'collection'\r\n }, {\r\n name: 'placeholder',\r\n type: 'string',\r\n attr: 'data-c-dropdown__placeholder'\r\n }, {\r\n name: 'disabled',\r\n type: 'boolean',\r\n attr: '.is-disabled',\r\n defaultValue: false\r\n }, {\r\n name: 'state',\r\n type: 'string',\r\n attr: '.has-',\r\n allowedValues: [\r\n '',\r\n 'success',\r\n 'warning',\r\n 'error'\r\n ],\r\n defaultValue: ''\r\n },\r\n {\r\n name: 'label',\r\n type: 'string',\r\n defaultValue: ''\r\n },\r\n {\r\n name: 'sync-selected',\r\n type: 'boolean',\r\n attr: 'data-sync-selected-on-load',\r\n defaultValue: false\r\n },\r\n {\r\n name: 'saveOnDomClick',\r\n type: 'boolean',\r\n attr: 'data-save-dom-click',\r\n defaultValue: false\r\n }\r\n ]\r\n\r\n}\r\n\r\n/**\r\n * Dropdown content\r\n *\r\n */\r\nexport default class Dropdown extends Component {\r\n /**\r\n * Creates a new dropdown behaviour, exposes an API to the element.\r\n *\r\n * @constructor\r\n * @param {HTMLElement} element - The HTML element.\r\n */\r\n constructor (element) {\r\n super(element, definition.name)\r\n\r\n this.silentErrors = true\r\n this.opened = false\r\n\r\n this.arrow = this.element.querySelector(componentQueries.arrow)\r\n\r\n const syncSelectedOnLoad = this.getProp('sync-selected')\r\n if (syncSelectedOnLoad) {\r\n requestAnimationFrame(() => this.syncSelected())\r\n }\r\n\r\n const clearNode = this._getClearNode(element)\r\n if (clearNode) {\r\n clearNode.addEventListener('click', (e) => {\r\n const newValue = ''\r\n if (this.props.value !== newValue) this.setProp('value', newValue)\r\n })\r\n }\r\n\r\n this.isRequired = this.element.hasAttribute('required')\r\n this.messagesElement = this.element.querySelector('.c-dropdown__messages')\r\n this.messageRequired = null\r\n if (element.getAttribute('data-message-required')) {\r\n this.messageRequired = element.getAttribute('data-message-required')\r\n } else {\r\n this.messageRequired = this.getSelectNode().getAttribute('data-message-required')\r\n }\r\n this.labelElement = this.element.querySelector('.c-dropdown__label')\r\n\r\n this.element[definition.name].validate = this.validate.bind(this)\r\n this.element[definition.name].enableErrors = this.enableErrors.bind(this)\r\n this.element[definition.name].getValue = this.getValue.bind(this)\r\n this.element[definition.name].open = (this.open).bind(this)\r\n this.element[definition.name].getPlaceholder = this.getPlaceholder.bind(this)\r\n this.element[definition.name].getLabel = this.getLabel.bind(this)\r\n this.element[definition.name].getSelectNode = this.getSelectNode.bind(this)\r\n\r\n const selectNode = this.getSelectNode(element)\r\n\r\n domEventsHelper.attachEvents([\r\n [selectNode, { change: (ev) => this.onChange(ev) }],\r\n [selectNode, { click: (ev) => this.onClick(ev) }],\r\n [selectNode, { focusout: (ev) => this.onFocusOut(ev) }]\r\n ], definition.name)\r\n\r\n registeredEvents.registerComponentEvents(definition.name, this.events, {\r\n ...this.element.hasAttribute(attr.track) && { track: this.element.attributes[attr.track].value }\r\n })\r\n }\r\n\r\n onChange (ev) {\r\n this.setProp('value', ev.target.value)\r\n this.close()\r\n }\r\n\r\n onClick () {\r\n if (this.opened) {\r\n this.close()\r\n } else {\r\n this.open()\r\n }\r\n }\r\n\r\n onFocusOut () {\r\n if (this.opened) {\r\n this.close()\r\n }\r\n }\r\n\r\n open () {\r\n this.opened = true\r\n this.updateChevron()\r\n }\r\n\r\n close () {\r\n this.opened = false\r\n this.updateChevron()\r\n }\r\n\r\n updateChevron () {\r\n if (this.opened) {\r\n this.arrow.classList.remove('m-icon--chevron-down')\r\n this.arrow.classList.add('m-icon--chevron-up')\r\n } else {\r\n this.arrow.classList.remove('m-icon--chevron-up')\r\n this.arrow.classList.add('m-icon--chevron-down')\r\n }\r\n }\r\n\r\n getValue () {\r\n return this.getSelectNode(this.element).value\r\n }\r\n\r\n getPlaceholder () {\r\n return this.element.dataset.cDropdown__placeholder\r\n }\r\n\r\n async setValue (value, options = {}) {\r\n const optionCandidate = value ? this.getSelectNode(this.element).querySelector(`[value=\"${value}\"]`) : this.getSelectNode(this.element).firstChild\r\n if (optionCandidate) {\r\n this.getSelectNode(this.element).value = value\r\n this.element.classList[value ? 'add' : 'remove']('has-value')\r\n if (!options.stopPropagation) {\r\n this.setProp('options', this.props.options.map(o => ({ ...o, selected: o.value === value })), { ...options, stopPropagation: true })\r\n }\r\n\r\n if (!options.silent) {\r\n this.events.emit('change', value)\r\n }\r\n return value\r\n } else {\r\n this.element.classList.remove('has-value')\r\n throw new Error(`${value} is not a valid option for`, this.element)\r\n }\r\n }\r\n\r\n /**\r\n * Get the whole array of options from current DOM\r\n *\r\n * @return {HTMLElement[]} The parsed options data\r\n */\r\n getOptions () {\r\n return Array.from(this.getSelectNode().options)\r\n .filter((option) => option.classList.contains('c-dropdown__option'))\r\n .reduce((array, option) => ([...array, {\r\n text: option.text,\r\n value: option.value,\r\n selected: option.selected,\r\n disabled: option.disabled\r\n }]), [])\r\n }\r\n\r\n /**\r\n * Set the array of options the dropdown will have\r\n * If option selected is provided, that will be set, else, the previous value before the options changed\r\n *\r\n * @param {Object[]} items - Items to be set\r\n * @param {Object} options - Options object\r\n * @param {Boolean} options.silent - If true, does not fire events\r\n */\r\n setOptions (items, options = {}, oldItems) {\r\n items = items || []\r\n Array.from(this.getSelectNode().options).forEach((option) => option.remove())\r\n\r\n const placeholder = this.getProp('placeholder')\r\n if (placeholder && placeholder !== '') {\r\n const noDefaultItems = items.filter((item) => !item.default)\r\n items = [{\r\n default: true,\r\n text: placeholder,\r\n selected: (items.find((item) => item.default) || {}).selected || !noDefaultItems.some(item => item.selected)\r\n }, ...noDefaultItems]\r\n }\r\n\r\n const itemsToElements = (items) => {\r\n const fragment = document.createDocumentFragment()\r\n items.forEach(item => {\r\n if (item.default) { item = { ...item, value: '', disabled: true } }\r\n fragment.appendChild(elementFromString(DropdownSingleOptionTemplate(item)))\r\n })\r\n return fragment\r\n }\r\n\r\n this.getSelectNode().appendChild(itemsToElements(items))\r\n\r\n if (!options.stopPropagation) {\r\n const selectedOption = this.props.options.find(o => o.selected)\r\n const selectedValue = selectedOption ? selectedOption.value : ''\r\n this.setProp('value', selectedValue, { ...options, stopPropagation: true })\r\n }\r\n\r\n if (!options.silent) {\r\n this.events.emit('changedOptions', this.props.options, oldItems)\r\n }\r\n }\r\n\r\n getSelectNode () {\r\n this.selectNode = this.selectNode || this.element.querySelector('.c-dropdown__element')\r\n return this.selectNode\r\n }\r\n\r\n _getClearNode () {\r\n this.clearNode = this.clearNode || this.element.querySelector('.c-dropdown__clear')\r\n return this.clearNode\r\n }\r\n\r\n setDisabled (value) {\r\n const selectElement = this.element.querySelector('[data-dropdown-select]')\r\n if (value) {\r\n this.element.classList.add('is-disabled')\r\n if (selectElement) selectElement.setAttribute('disabled', '')\r\n } else {\r\n this.element.classList.remove('is-disabled')\r\n if (selectElement) selectElement.removeAttribute('disabled', '')\r\n }\r\n }\r\n\r\n enableErrors () {\r\n this.silentErrors = false\r\n }\r\n\r\n validate (validateOnly = false) {\r\n const isEmptyAndRequired = this.getValue() === '' && this.isRequired\r\n let isValid = this.getSelectNode().validity.valid\r\n if (isEmptyAndRequired) {\r\n isValid = false\r\n }\r\n let messages = []\r\n let messageTypes = []\r\n if (!validateOnly && !this.silentErrors) {\r\n if (!isValid) {\r\n messages = this._getValidationMessages()\r\n messageTypes = this._getValidationMessageTypes()\r\n }\r\n this._styleValidity(isValid, messages)\r\n }\r\n return {\r\n isValid,\r\n errorMessages: messages,\r\n errorTypes: messageTypes,\r\n fieldName: this.getSelectNode(this.element).name\r\n }\r\n }\r\n\r\n /**\r\n * Set the label text\r\n */\r\n setLabel (text) {\r\n if (this.labelElement) {\r\n this.labelElement.innerText = text\r\n }\r\n }\r\n\r\n /**\r\n * Get the label text\r\n */\r\n getLabel () {\r\n return this.labelElement ? this.labelElement.innerText : ''\r\n }\r\n\r\n syncSelected () {\r\n const selectedOption = this.element.querySelector('[selected]')\r\n if (selectedOption && selectedOption.value) {\r\n this.getSelectNode().value = selectedOption.value\r\n this.setProp('value', selectedOption.value)\r\n }\r\n }\r\n\r\n _getValidationMessages () {\r\n const messages = []\r\n const validity = this.getValue()\r\n if (validity === '' && this.messageRequired) {\r\n messages.push(this.messageRequired)\r\n }\r\n return messages\r\n }\r\n\r\n _getValidationMessageTypes () {\r\n const messageTypes = []\r\n const validity = this.getValue()\r\n if (validity === '' && this.messageRequired) {\r\n messageTypes.push('ValueMissing')\r\n }\r\n\r\n return messageTypes\r\n }\r\n\r\n _styleValidity (isValid, messages) {\r\n if (!isValid) {\r\n this.element.classList.add('has-error')\r\n if (this.messagesElement !== null && this.messagesElement !== undefined) {\r\n this.messagesElement.innerHTML = DropdownMessagesTemplate(messages)\r\n }\r\n } else {\r\n this.element.classList.remove('has-error')\r\n if (this.messagesElement !== null && this.messagesElement !== undefined) {\r\n this.messagesElement.innerHTML = ''\r\n }\r\n }\r\n }\r\n}\r\n\r\nregisterComponent(Dropdown, definition.name, definition)\r\n","/**\n * The DropdownMessagesTemplate contains all the data needed to hydrate a dropdown messages component\n *\n * @typedef {Object} defaultDropdownMessagesData\n *\n * @property {String} extraClasses - Extra classes if needed\n */\n\nexport const defaultDropdownMessagesData = {\n extraClasses: ''\n}\n\nexport const DropdownMessagesTemplate = (d) => `\n ${d\n ? `\n ${d.map(message => `\n \n ${message} \n
\n `).join('')}\n `\n : ''}\n`\n","import Component from '../../../js/core/component/component'\nimport { registerComponent } from '../../../js/core/component/component-directory'\nimport { newGUID } from '../../../js/helpers/guid'\nimport { ModalTemplate } from '../modal/c-modal.template'\nimport { BtnTemplate } from '../btn/c-btn.template'\nimport { elementFromString } from '../../../js/document/html-helper'\nimport { favoriteEvents } from '../../../js/document/event-types'\nimport registeredEvents from '../../../js/helpers/registered-events'\nimport favorites from './main'\n\nconst definition = {\n name: 'c-favorite-btn',\n props: [\n {\n name: 'active',\n type: 'boolean',\n attr: '.is-active'\n },\n {\n name: 'itemId',\n type: 'string',\n attr: 'data-favorite__item-id'\n },\n {\n name: 'publicationCode',\n type: 'string',\n attr: 'data-favorite__publication-code'\n },\n {\n name: 'parentContextId',\n type: 'string',\n attr: 'data-favorite__parent-contextId'\n }\n ]\n}\nconst ELEMENT_QUERIES = {\n trackAttr: 'data-track'\n}\nconst fallbackTexts = {\n title: 'Log in to add favourites',\n body: 'You need to be logged in to add a favourite',\n loginBtn: 'Login',\n footer: \"Don't have an account?\",\n footerBtn: 'Create an account'\n}\n\n/**\n * FavoriteButton content\n */\nexport default class FavoriteButton extends Component {\n /**\n * Creates a new FavoriteCollector behaviour, exposes an API to the element.\n *\n * @constructor\n * @param {HTMLElement} element - The HTML element.\n */\n constructor (element) {\n super(element, definition.name)\n\n this.staticData = this.getStaticData()\n // Update active prop with current favorites\n favorites.events.on('init', () => {\n this.setProp('active', favorites.hasItem(this.props.itemId), { silent: true })\n })\n // Bind click event\n element.addEventListener('click', async (ev) => {\n if (favorites.shouldDisplayModal()) {\n this.openModal()\n } else {\n let itemToggled\n const contextItemId = this.getProp('parentContextId')\n let eventCallback\n if (this.props.active) {\n itemToggled = await favorites.removeItemAsync(this.props.itemId, contextItemId, this.props.publicationCode)\n eventCallback = () => this.events.emit(favoriteEvents.FAVORITE_REMOVE, { id: this.getProp('itemId'), staticData: this.staticData })\n } else {\n itemToggled = await favorites.addItemAsync(this.props.itemId, contextItemId, this.props.publicationCode)\n eventCallback = () => this.events.emit(favoriteEvents.FAVORITE_ADD, { id: this.getProp('itemId'), staticData: this.staticData })\n }\n\n if (itemToggled) {\n this.setProp('active', !this.props.active, { silent: true })\n eventCallback()\n } else if (favorites.shouldDisplayModal()) {\n this.openModal()\n }\n }\n })\n\n registeredEvents.registerWidgetEvents(definition.name, this.events, {\n ...this.element.hasAttribute(ELEMENT_QUERIES.trackAttr) && { track: this.element.attributes[ELEMENT_QUERIES.trackAttr].value }\n })\n }\n\n openModal () {\n if (!this.modal) {\n this.modal = elementFromString(this.renderModal())\n document.body.appendChild(this.modal)\n Component.initDocumentComponentsFromAPI(this.modal)\n this.attachModalEvents(this.modal['c-modal'])\n }\n this.modal['c-modal'].open()\n }\n\n renderModal () {\n const id = newGUID()\n const modalId = `${id}_modal`\n return `${ModalTemplate({\n id: modalId,\n size: 'small',\n title: favorites.modalTitle || fallbackTexts.title,\n style: 'neutral',\n attributes: { 'data-c-favorite__modal': '' },\n bodyContent: this.getModalBody(),\n footerContent: this.getModalFooter(),\n extraClasses: 'c-modal__favorites',\n headerSize: 'medium'\n })}`\n }\n\n getModalBody () {\n return `\n ${favorites.modalBodyText || fallbackTexts.body}\n
`\n }\n\n getModalFooter () {\n const loginUrl = `${favorites.loginUrl()}?returnurl=${encodeURIComponent(document.URL)}`\n return ``\n }\n\n attachModalEvents (modalApi) {\n modalApi.events.on('open', () => {\n this.events.emit(favoriteEvents.FAVORITE_MODAL_OPEN, { id: this.getProp('itemId'), staticData: this.staticData })\n })\n modalApi.events.on('close', () => {\n this.events.emit(favoriteEvents.FAVORITE_MODAL_CLOSE, { id: this.getProp('itemId'), staticData: this.staticData })\n })\n\n const modalSignUpElement = this.modal.querySelector('.c-modal__favorites-signup-btn')\n modalSignUpElement.addEventListener(\n 'click', () => this.events.emit(favoriteEvents.FAVORITE_SIGNUP, { id: this.getProp('itemId'), staticData: this.staticData }))\n\n const modalLoginElement = this.modal.querySelector('.c-modal__favorites-login-btn')\n modalLoginElement.addEventListener(\n 'click', () => this.events.emit(favoriteEvents.FAVORITE_LOGIN, { id: this.getProp('itemId'), staticData: this.staticData }))\n }\n\n getStaticData () {\n const staticDataElement = document.querySelector('.w-static-data-content')\n let data = null\n if (staticDataElement) {\n data = staticDataElement.dataset\n ? {\n id: staticDataElement.dataset.wStaticContentDataId,\n name: staticDataElement.dataset.wStaticContentDataName,\n countryId: staticDataElement.dataset.wStaticContentDataAccoCountryId,\n cityId: staticDataElement.dataset.wStaticContentDataAccoRegionId,\n rating: staticDataElement.dataset.wStaticContentDataRating,\n badges: staticDataElement.dataset.wStaticContentDataBadges,\n category: staticDataElement.dataset.wStaticContentDataCategory,\n location: staticDataElement.dataset.wStaticContentDataLocationId,\n accoStarts: staticDataElement.dataset.wStaticContentDataAccoStars\n }\n : null\n }\n return data\n }\n}\n\nregisterComponent(FavoriteButton, definition.name, definition)\n","import Component from '../../../js/core/component/component'\nimport { registerComponent } from '../../../js/core/component/component-directory'\nimport favorites from './main'\n\nconst definition = {\n name: 'c-favorite-cleaner'\n}\n\n/**\n * FavoriteCleaner content\n *\n */\nexport default class FavoriteCleaner extends Component {\n /**\n * Creates a new FavoriteCleaner behaviour, exposes an API to the element.\n *\n * @constructor\n * @param {HTMLElement} element - The HTML element.\n */\n constructor (element) {\n super(element, definition.name)\n\n // Bind click event\n const btn = element.querySelector('.c-favorite-cleaner')\n const search = document.querySelector('.fr-search')\n const emptyFavorites = document.querySelector('.fr-empty-favorites')\n btn && btn.addEventListener('click', async () => {\n await favorites.reset([])\n btn.classList.add('u-hidden')\n search && search.classList.add('u-hidden')\n emptyFavorites && emptyFavorites.classList.remove('u-hidden')\n })\n }\n}\n\nregisterComponent(FavoriteCleaner, definition.name, definition)\n","import Component from '../../../js/core/component/component'\nimport { registerComponent } from '../../../js/core/component/component-directory'\nimport favorites from './main'\nimport { forceRepaint } from '../../../js/document/css'\n\nconst definition = {\n name: 'c-favorite-collector',\n props: [\n {\n name: 'count',\n type: 'number',\n attr: 'data-c-favorite-collector__count'\n }\n ]\n}\n\n/**\n * FavoriteCollector content\n *\n */\nexport default class FavoriteCollector extends Component {\n /**\n * Creates a new FavoriteCollector behaviour, exposes an API to the element.\n *\n * @constructor\n * @param {HTMLElement} element - The HTML element.\n */\n constructor (element) {\n super(element, definition.name)\n\n // Update counter with current value\n this.setProp('count', favorites.itemsLength(), { silent: true })\n favorites.events.on('init', () => {\n this.setProp('count', favorites.itemsLength(), { silent: true })\n })\n\n // Bind favorites change event\n favorites.events.on('change', () => {\n const newCount = favorites.itemsLength()\n if (newCount === this.props.count) return\n this.element.classList.remove('is-incrementing', 'is-decrementing')\n forceRepaint(this.element)\n this.element.classList.add(newCount > this.props.count ? 'is-incrementing' : 'is-decrementing')\n this.setProp('count', favorites.itemsLength())\n })\n }\n}\n\nregisterComponent(FavoriteCollector, definition.name, definition)\n","import Collection from '../../../js/core/collection'\nimport storage from '../../../js/document/web-storage'\nimport { fetchJsonData, fetchJsonDataAndHeaders } from '../../../js/helpers/json-fetch'\nimport { getUrlFromString } from '../../../js/document/url'\n\nconst EventEmitter = require('eventemitter3')\nconst componentQueries = {\n favoriteToggle: 'data-product-favourites',\n addUrl: 'data-product-favourites-add-url',\n removeUrl: 'data-product-favourites-remove-url',\n removeAllUrl: 'data-product-favourites-remove-all-url',\n getUrl: 'data-product-favourites-get-url',\n loginUrl: 'data-product-favourites-login-url'\n}\nconst cookieName = 'favs'\nconst cookieApiName = `${cookieName}_api`\nconst cookieMigratedName = `${cookieName}_migrated`\n\nconst cookieSettings = {\n expirationDays: 365,\n path: '/'\n}\n\nclass Favorites {\n /**\n * Favorites manager\n *\n * @constructor\n */\n constructor () {\n this.events = new EventEmitter()\n this.favouritesElement = document.querySelector(`div[${componentQueries.favoriteToggle}]`)\n this.isUserLoggedIn = false\n this.useApi = this.favouritesElement !== null\n if (this.useApi) {\n this.favouritesElement.urls = {\n addUrl: this.favouritesElement.getAttribute(componentQueries.addUrl),\n removeUrl: this.favouritesElement.getAttribute(componentQueries.removeUrl),\n removeAllUrl: this.favouritesElement.getAttribute(componentQueries.removeAllUrl),\n getUrl: this.favouritesElement.getAttribute(componentQueries.getUrl),\n loginUrl: this.favouritesElement.getAttribute(componentQueries.loginUrl)\n }\n this._getFavouritesAsync().then(response => {\n if (!!response && !response.favouritesException && this.isUserLoggedIn) {\n this._init({ accos: response.jsonData.accoIds })\n\n if (response.favouritesMigrated) {\n this._deleteCookie(cookieName)\n this._setCookieMigrated()\n }\n\n this._updateCookie(cookieApiName)\n } else if (!!response && this.isSunwebCeLoggedIn) {\n const cookieData = this._getCookie(cookieName)\n this._init(cookieData)\n }\n })\n } else {\n let cookieData = this._getCookie(cookieName)\n\n if (this._isCookieMigrated()) {\n cookieData = this._getCookie(cookieApiName)\n\n this._deleteCookie(cookieApiName)\n this._deleteCookie(cookieMigratedName)\n }\n\n this._init(cookieData)\n }\n }\n\n _init (currentData) {\n const accos = currentData && currentData.accos\n ? currentData.accos.map(m => ({ id: m.toString() }))\n : []\n\n this.data = new Collection(accos)\n this.events.emit('init')\n }\n\n _canUseApi () {\n return this.useApi && !this.isSunwebCeLoggedIn\n }\n\n shouldDisplayModal () {\n return this._canUseApi() && !this.isUserLoggedIn\n }\n\n itemsLength () {\n return this.data?.models.length || 0\n }\n\n loginUrl () {\n return this.favouritesElement?.urls?.loginUrl || ''\n }\n\n async addItemAsync (itemId, contextItemId, publicationCode) {\n let added = false\n\n if (this._canUseApi()) {\n const result = await this._addFavouriteAsync(itemId, contextItemId, publicationCode)\n\n if (result.success) {\n this.data.addItem({ id: itemId })\n this._updateCookie(cookieApiName)\n added = true\n }\n } else {\n this.data.addItem({ id: itemId })\n this._updateCookie(cookieName)\n added = true\n }\n\n if (added) {\n this.events.emit('change', itemId)\n }\n\n return added\n }\n\n async removeItemAsync (itemId, contextItemId, publicationCode) {\n let removed = false\n const itemToRemove = this.data.findWhere('id', itemId)\n\n if (itemToRemove) {\n if (this._canUseApi()) {\n const result = await this._removeFavouriteAsync(itemId, contextItemId, publicationCode)\n\n if (result.success) {\n this.data.remove(itemToRemove)\n this._updateCookie(cookieApiName)\n removed = true\n }\n } else {\n this.data.remove(itemToRemove)\n this._updateCookie(cookieName)\n removed = true\n }\n\n if (removed) {\n this.events.emit('change', itemId)\n }\n }\n\n return removed\n }\n\n hasItem (itemId) {\n return !!this.data.findWhere('id', itemId)\n }\n\n _getCookie (name) {\n return storage.cookie.get(name)\n }\n\n _updateCookie (name) {\n storage.cookie.set(name, {\n accos: this.data.models.map(m => m.attributes.id)\n }, cookieSettings)\n }\n\n _deleteCookie (name) {\n storage.cookie.delete(name)\n }\n\n _setCookieMigrated () {\n storage.cookie.set(cookieMigratedName, true, cookieSettings)\n }\n\n _isCookieMigrated () {\n const favouritedMigrated = storage.cookie.get(cookieMigratedName)\n\n return favouritedMigrated === true\n }\n\n async reset (items) {\n if (this._canUseApi()) {\n await this._removeAllFavouritesAsync()\n }\n this.data.reset(items)\n this._updateCookie(cookieName)\n this.events.emit('change')\n }\n\n // Async Favourites\n async _getFavouritesAsync () {\n const response = await this._getFavouritesApiCallAsync(this.favouritesElement.urls.getUrl)\n\n if (!response || !response.jsonData) return null\n\n this.isSunwebCeLoggedIn = response.jsonData.isSunwebCeLoggedIn\n if (response.jsonData.isUserLoggedIn) {\n this.isUserLoggedIn = true\n } else {\n this.modalTitle = response.jsonData.modalTitle\n this.modalBodyText = response.jsonData.modalBodyText\n this.modalLoginButtonText = response.jsonData.modalLoginButtonText\n this.modalFooterText = response.jsonData.modalFooterText\n this.modalFooterLinkText = response.jsonData.modalFooterLinkText\n }\n\n const favouritesMigratedHeader = response.headers.get('x-productfavourites-cookiemigrated')\n const favouritesExceptionHeader = response.headers.get('x-productfavourites-exception')\n\n return {\n jsonData: response.jsonData,\n favouritesMigrated: /true/i.test(favouritesMigratedHeader),\n favouritesException: !!favouritesExceptionHeader\n }\n }\n\n async _addFavouriteAsync (accommodationId, contextItemId, publicationCode) {\n const result = await this._editFavouritesApiCallAsync(this.favouritesElement.urls.addUrl, accommodationId, contextItemId, publicationCode)\n this.isUserLoggedIn = result.isUserLoggedIn\n return result\n }\n\n async _removeFavouriteAsync (accommodationId, contextItemId, publicationCode) {\n const result = await this._editFavouritesApiCallAsync(this.favouritesElement.urls.removeUrl, accommodationId, contextItemId, publicationCode)\n this.isUserLoggedIn = result.isUserLoggedIn\n return result\n }\n\n async _removeAllFavouritesAsync () {\n const result = await this._editFavouritesApiCallAsync(this.favouritesElement.urls.removeAllUrl)\n this.isUserLoggedIn = result.isUserLoggedIn\n return result\n }\n\n async _editFavouritesApiCallAsync (url, accommodationId, contextItemId, publicationCode) {\n try {\n const requestUrl = getUrlFromString(url, { accommodationId, contextItemId, publicationCode })\n const result = await fetchJsonData(requestUrl, { fullReferrerOnCrossOrigin: true })\n\n return result\n } catch (error) {\n console.log(error)\n }\n }\n\n async _getFavouritesApiCallAsync (url) {\n try {\n const requestUrl = getUrlFromString(url)\n const result = await fetchJsonDataAndHeaders(requestUrl, { fullReferrerOnCrossOrigin: true })\n\n return {\n jsonData: result.jsonData,\n headers: result.headers\n }\n } catch (error) {\n console.log(error)\n }\n }\n}\n\nconst favorites = new Favorites()\nexport default favorites\n","/**\n * The FloatingBoxData contains all data needed to hydrate the view\n *\n * @typedef {Object} FloatingBoxData\n *\n * @property {Boolean} opened - True if opened\n * @property {Boolean} gradient - True if gradient\n * @property {String} floatsFrom - Breakpoint where should start floating\n * @property {String} [minHeight] - Minimum height\n * @property {String} [maxHeight] - Maximum height\n * @property {String} [extraClasses]\n * @property {Object} [attributes]\n *\n */\n\nimport { encodeAttributes } from '../../../js/helpers/string'\n\nexport const defaultFloatingBoxData = {\n opened: false,\n gradient: false,\n floatsFrom: 'xs',\n extraClasses: '',\n attributes: {}\n}\n\nexport const FloatingBoxTemplate = (d, content) => {\n d = { ...defaultFloatingBoxData, ...d }\n return `\n ${content}\n
`\n}\n","/**\n * The FloatingBoxBodyData contains all data needed to hydrate the view\n *\n * @typedef {Object} FloatingBoxBodyData\n *\n * @property {String} [extraClasses]\n * @property {Object} [attributes]\n *\n */\n\nimport { encodeAttributes } from '../../../js/helpers/string'\n\nexport const defaultFloatingBoxBodyData = {\n extraClasses: '',\n attributes: {}\n}\n\nexport const FloatingBoxBodyTemplate = (d, content) => {\n d = { ...defaultFloatingBoxBodyData, ...d }\n return ``\n}\n","/**\n * The FloatingBoxFooterData contains all data needed to hydrate the view\n *\n * @typedef {Object} FloatingBoxFooterData\n *\n * @property {String} [extraClasses]\n * @property {Object} [attributes]\n *\n */\n\nimport { encodeAttributes } from '../../../js/helpers/string'\n\nexport const defaultFloatingBoxFooterData = {\n extraClasses: '',\n attributes: {}\n}\n\nexport const FloatingBoxFooterTemplate = (d, content) => {\n d = { ...defaultFloatingBoxFooterData, ...d }\n return ``\n}\n","/**\n * The FloatingBoxHeaderData contains all data needed to hydrate the view\n *\n * @typedef {Object} FloatingBoxHeaderData\n *\n * @property {String} [extraClasses]\n * @property {Object} [attributes]\n *\n */\n\nimport { encodeAttributes } from '../../../js/helpers/string'\n\nexport const defaultFloatingBoxHeaderData = {\n extraClasses: '',\n attributes: {}\n}\n\nexport const FloatingBoxHeaderTemplate = (d, content) => {\n d = { ...defaultFloatingBoxHeaderData, ...d }\n return ``\n}\n","import Component from '../../../js/core/component/component'\nimport { registerComponent } from '../../../js/core/component/component-directory'\nimport { forceRepaint, getStyle, cssTimeToMs } from '../../../js/document/css'\n/**\n * Props & State\n *\n * There are two types of data that control a component: props and state.\n * Props are set on instantiation and they are fixed throughout the lifetime\n * of a component. For data that is going to change, we have to use state.\n */\n\nconst definition = {\n\n name: 'c-floating-box',\n\n /**\n * Props\n *\n * Most components can be customized with different parameters when they\n * are created. These creation parameters are called props.\n *\n * This lets you make a single component that is used in many different\n * places in your app, with slightly different properties in each place.\n *\n *\n */\n\n props: [\n {\n name: 'opened',\n type: 'boolean',\n defaultValue: 'false'\n }, {\n name: 'minHeight',\n type: 'string',\n attr: 'data-c-floating-box__min-height',\n defaultValue: ''\n }, {\n name: 'maxHeight',\n type: 'string',\n attr: 'data-c-floating-box__max-height',\n defaultValue: ''\n }\n ]\n\n}\n\n/**\n * FloatingBox content\n *\n */\nexport default class FloatingBox extends Component {\n /**\n * Creates a new FloatingBox behaviour, exposes an API to the element.\n *\n * @constructor\n * @param {HTMLElement} element - The HTML element.\n */\n constructor (element) {\n super(element, definition.name)\n this.element[definition.name].adjustSize = this.adjustSize.bind(this)\n this.element[definition.name].forceClosedCallback = this._closed.bind(this)\n window.addEventListener('resize', this.adjustSize())\n }\n\n getOpened () {\n return this.isOpened !== undefined ? this.isOpened : this.element.classList.contains('in')\n }\n\n setOpened (opened) {\n return this[opened ? 'open' : 'close']()\n }\n\n open () {\n return new Promise((resolve) => {\n this.adjustSize()\n if (this.isOpened) resolve()\n this.element.classList.add('is-opening')\n forceRepaint(this.element)\n this.element.classList.add('in')\n\n this.transitionTimeout(() => {\n this.element.classList.remove('is-opening')\n this.isOpened = true\n resolve()\n })\n })\n }\n\n close () {\n return new Promise((resolve) => {\n this.isOpened = false\n this.element.classList.add('is-closing')\n this.element.classList.remove('is-opening')\n this.element.classList.remove('in')\n this.closedResolve = resolve\n this.closedBound = this.closedBound || this._closed.bind(this)\n this.transitionTimeout(this.closedBound)\n })\n }\n\n _closed () {\n this.element.classList.remove('is-closing')\n if (this.closedResolve && typeof this.closedResolve === 'function') this.closedResolve()\n delete this.closedResolve\n }\n\n transitionTimeout (cb) {\n const transitionTime = cssTimeToMs(getStyle(this.element, 'transition-duration'))\n if (this.currentTransition) window.clearTimeout(this.currentTransition)\n this.currentTransition = setTimeout(() => {\n cb()\n }, transitionTime)\n }\n\n adjustSize () {\n const minHeight = this.getProp('minHeight')\n const maxHeight = this.getProp('maxHeight')\n\n const bodyNode = this._getBodyNode()\n const isOpened = this.element.classList.contains('in')\n\n if (getStyle(this.element, 'position') === 'fixed') {\n // Fixed position does not need to deal with min and max heights\n // Remove overridden properties if position is fixed\n bodyNode.style.height = null\n this.element.style.right = null\n this.element.style.left = null\n } else {\n // NonFixed position needs to deal with min and max heights, horizontal overflow as well\n\n // Force a transparent display to get the computed heights\n bodyNode.style.height = maxHeight || null\n this.element.style.opacity = '0'\n this.element.style.right = null\n this.element.style.left = null\n if (!isOpened) this.element.classList.add('in')\n forceRepaint(this.element)\n\n // Fix horizontal overflow\n let elementRect = this.element.getBoundingClientRect()\n const horizontalOverflow = (elementRect.right < 0 || (elementRect.right > window.innerWidth))\n this.element.style.right = horizontalOverflow ? '0' : null\n this.element.style.left = horizontalOverflow ? '0' : null\n\n // Fix vertical sizes\n if (minHeight && maxHeight) {\n // Get header and footer heights to adjust a more real height for the body\n const headerNode = this._getHeaderNode()\n const footerNode = this._getFooterNode()\n const contentNode = this._getContentNode()\n const headerHeight = headerNode ? parseInt(headerNode.getBoundingClientRect().height) : 0\n const footerHeight = footerNode ? parseInt(footerNode.getBoundingClientRect().height) : 0\n const contentHeight = contentNode ? parseInt(contentNode.getBoundingClientRect().height) : 0\n let idealMaxHeight = parseInt(maxHeight) - headerHeight - footerHeight\n idealMaxHeight = contentHeight < idealMaxHeight ? contentHeight : idealMaxHeight\n bodyNode.style.height = `${idealMaxHeight}px`\n forceRepaint(this.element)\n\n // Get other numbers to make final calculations\n const viewportHeight = (window.innerHeight || document.documentElement.clientHeight)\n const edgeMargin = 20\n elementRect = this.element.getBoundingClientRect()\n\n if ((viewportHeight - edgeMargin) < elementRect.bottom) {\n // Overflows, a better height is necessary\n let betterHeight = parseInt(viewportHeight - elementRect.top - edgeMargin)\n betterHeight = betterHeight >= parseInt(minHeight) ? betterHeight : parseInt(minHeight)\n bodyNode.style.height = `${betterHeight - headerHeight - footerHeight}px`\n }\n }\n\n // Restore previous properties\n if (!isOpened) this.element.classList.remove('in')\n this.element.style.opacity = null\n this.element.style.transitionDuration = null\n forceRepaint(this.element)\n }\n\n return this\n }\n\n _getBodyNode () {\n return this.element.querySelector('.c-floating-box__body')\n }\n\n _getContentNode () {\n return this.element.querySelector('.c-floating-box__body-content')\n }\n\n _getHeaderNode () {\n return this.element.querySelector('.c-floating-box__header')\n }\n\n _getFooterNode () {\n return this.element.querySelector('.c-floating-box__footer')\n }\n}\n\nregisterComponent(FloatingBox, definition.name, definition)\n","import { TitleTemplate } from '../../components/title/c-title.template'\nimport { TextboxTemplate } from '../textbox/c-textbox.template'\nimport { DropdownTemplate } from '../dropdown/c-dropdown.template'\nimport { DateSelectorTemplate } from '../date-selector/c-date-selector.template'\nimport { ChoiceListTemplate, defaultChoiceListData } from '../choice-list/c-choice-list.template'\nimport { PhoneInputTemplate } from '../phone-input/c-phone-input.template'\n\n/**\n * The FormFieldset contains all data needed to hydrate a Form Fieldset view\n *\n * @typedef {Object} FormFieldsetData\n *\n * @property {String} title - Title of the field set\n * @property {String} extraClasses - Extra classes to be rendered\n * @property {String} html - Content of the field set\n * @property {String} components - List of components to render automatically in replacement of html field\n */\nexport const defaultFormFieldsetData = {\n}\n\nexport const FormFieldsetTemplate = (d) => {\n d = { ...defaultFormFieldsetData, ...d }\n return `\n \n `\n}\n\nconst defaultFieldData = {\n size: 'small',\n data: {\n extraClasses: ''\n }\n}\n\nconst FieldTemplate = (d) => {\n d = { ...defaultFieldData, ...d }\n d.data.extraClasses = d.data.extraClasses + ' c-form__item c-form__item--' + d.size\n\n return `\n ${d.type === 'c-textbox'\n ? TextboxTemplate(d.data)\n : ''}\n \n ${d.type === 'c-dropdown'\n ? DropdownTemplate(d.data)\n : ''}\n \n ${d.type === 'c-date-selector'\n ? DateSelectorTemplate(d.data)\n : ''}\n \n ${d.type === 'c-choice-list'\n ? ChoiceListTemplate({ ...defaultChoiceListData, ...d.data })\n : ''}\n\n ${d.type === 'c-phone-input'\n ? PhoneInputTemplate(d.data)\n : ''}\n \n `\n}\n","const defaultOptions = {\n siteKey: '6LeAy1cUAAAAALiBq30Rt-gcDYnZGCgEWq-anpg-'\n}\n\n/**\n * An engine to include reCAPTCHA in c-form components that are setup to have one.\n * Types supported:\n * * reCAPTCHA v2 Invisible. Validates requests in the background.\n * It attaches to the button submit of the c-form and *needs* post-processing of event 'recaptcha-form-submit'.\n */\nexport default class RecaptchaEngine {\n /**\n * Creates a new recaptcha in the form provided as element with the options provided.\n * @constructor\n * @param {Element} element - The targeted HTML form element\n * @param {Object} options - The recaptcha options\n */\n constructor (element, options = {}) {\n this.element = element\n this.options = Object.assign({}, defaultOptions, options)\n this.selectors = {}\n this._init()\n }\n\n /**\n * Creates a recaptchas in all forms that have the attribute data-c-form__recaptcha to true.\n * @returns {RecaptchaEngine[]} The created instances\n */\n static createRecaptchasOnDocument () {\n const recaptchaInstances = []\n const currentComponents = RecaptchaEngine.getRecaptchasOnDocument()\n for (let i = 0; i < currentComponents.length; i++) {\n const current = currentComponents[i]\n const options = RecaptchaEngine.getOptions(current)\n const instance = RecaptchaEngine.createRecaptchaOnForm(current, options)\n\n recaptchaInstances.push(instance)\n }\n\n return recaptchaInstances\n }\n\n static getRecaptchasOnDocument () {\n return window.document.querySelectorAll('.c-form[data-c-form__recaptcha]')\n }\n\n /**\n * Creates a new RecaptchaEngine in the form provided as element.\n * @param {Element} element - The targeted HTML form element\n * @param {Object} options - The options of the recaptcha\n * @returns {RecaptchaEngine} The created instance\n */\n static createRecaptchaOnForm (element, options) {\n return new RecaptchaEngine(element, options)\n }\n\n /**\n * Resolves the recaptcha options for the element provided.\n * @param {Element} element - the element for which options will be resolved.\n */\n static getOptions (element) {\n const options = defaultOptions\n const siteKey = element.getAttribute('data-c-form__recaptcha-site-key')\n if (siteKey && siteKey !== '') {\n options.siteKey = siteKey\n }\n return options\n }\n\n /**\n * Indicates if grecaptcha script is available or not.\n */\n static isGRecaptchaAvailable () {\n return typeof window.grecaptcha !== 'undefined' && window.grecaptcha\n }\n\n /**\n * Injects the recaptcha API script into the document.\n */\n static injectRecaptchaScript (callbackName) {\n const currentComponents = RecaptchaEngine.getRecaptchasOnDocument()\n if (currentComponents.length > 0) {\n // resolve the src\n let src = 'https://www.google.com/recaptcha/api.js?onload=' + callbackName + '&render=explicit'\n const language = document.documentElement.getAttribute('lang')\n if (language && language !== '') {\n src = src + '&hl=' + language\n }\n\n // Inject the script\n const tag = document.createElement('script')\n document.head.appendChild(tag)\n tag.src = src\n }\n }\n\n /**\n * Initialization of the RecaptchaEngine, creating the recaptcha inside the form with the options provided.\n * @returns {RecaptchaEngine} self instance\n */\n _init () {\n this.selectors.submitButton = this.element.querySelector('[type=\"submit\"]')\n this.element.addEventListener('form-validation-failed', this._reset.bind(this))\n this._initRecaptcha()\n }\n\n _initRecaptcha () {\n if (RecaptchaEngine.isGRecaptchaAvailable()) {\n this.recaptchaId = window.grecaptcha.render(this.selectors.submitButton, {\n sitekey: this.options.siteKey,\n size: 'invisible',\n callback: function (token) {\n this._submitForm()\n }.bind(this)\n })\n }\n return this\n }\n\n _submitForm () {\n this.element.dispatchEvent(new window.CustomEvent('recaptcha-form-submit'))\n }\n\n _reset () {\n if (RecaptchaEngine.isGRecaptchaAvailable()) {\n window.grecaptcha.reset(this.recaptchaId)\n }\n }\n}\n","import * as loadQueueHelper from '../../../js/document/load-queue'\nimport RecaptchaEngine from './recaptcha'\n\nloadQueueHelper.add(function () {\n window.createRecaptchasOnDocument = RecaptchaEngine.createRecaptchasOnDocument\n RecaptchaEngine.injectRecaptchaScript('createRecaptchasOnDocument')\n}, 3)\n"],"names":["defaultCheckboxData","id","name","value","text","size","checked","halfChecked","disabled","unresolved","hasChild","link","html","CheckboxTemplate","d","concat","required","state","dataset","illustrationSrc","extraClasses","replace","Object","keys","map","k","fromCamelCase","join","illustrationAlt","imageSrc","imageAlt","href","target","count","additionalText","tokensShared","require","tokensBrand","error","tokens","_objectSpread","defaultChipData","variant","undefined","highlighted","removable","linkable","mandatory","attributes","ChipTemplate","getTokenClass","encodeAttributes","ChoiceListExtraClasses","defaultChoiceListData","track","method","label","items","tooltip","hasRichOptions","showInSlider","hideRequiredSymbol","defaultRichChoiceItemData","extraClassesForRichOption","retrieveExtraClassesForOption","defaultItemData","itemData","arrDefaultItemExtraClasses","split","arrItemExtraClasses","_toConsumableArray","Set","filter","e","renderOption","item","radioButtonData","checkBoxData","dataFromParent","uid","RadioButtonTemplate","renderRichOption","richOptionExtraClassesArray","s","richOptionExtraClasses","extraRichContent","getOptionItems","defaultRadioButtonData","ChoiceListTemplate","minlength","TooltipTemplate","defaultTooltipData","ChoiceListOptionTemplateVerticalBoxed","SliderTemplate","center","stretch","luminosity","outerNavigation","withGradient","globalLocales","register","language","attr","definition","props","type","allowedValues","defaultValue","ChoiceList","_Component","_inherits","_super","element","_this","_classCallCheck","call","silentErrors","selectedValues","getSelectedValuesFromOptions","attachEvents","events","on","changes","setProp","options","silent","forceUpdate","messagesElement","querySelector","messageRequired","getAttribute","getOptionsElement","labelElement","getSelectedValues","bind","_assertThisInitialized","getReducedSelectedValuesFromOptions","disableComponent","enableComponent","validate","enableErrors","styleValidity","getValidationMessages","registeredEvents","registerComponentEvents","hasAttribute","key","_this2","this","querySelectorAll","forEach","push","change","ev","onChange","clearElement","click","onClear","domEventsHelper","optionsElement","optionsSelector","getProp","getShowInSlider","children","el","matches","getOptionDataFromOptionElement","option","innerText","input","mappedOptions","isSlider","optionItemElement","inputElement","classList","add","remove","oldItems","_this3","_flushOptionElements","appendChild","itemsToElements","fragment","document","createDocumentFragment","_newOptionElement","subFragment","elementFromString","updateSelectedOptionsAndElements","isDynamic","length","_clearButtonElement","emit","getSelectedOptions","apply","_this4","setSliderOptions","matchOption","findOptionByValue","isNestedChoiceList","optionLevel","level","parentElement","parentNode","nodeType","getOptionLevel","setEveryChildSelected","findElementByValue","stopPropagation","nested","_this5","arguments","subOption","setOptionChecked","_this6","everySelected","hasEverySelectedChild","setOptionHalfChecked","childSelected","hasAnySelectedChild","findInputByValue","closest","firstChild","removeChild","isRichOption","locales","BtnTemplate","clearFilter","validateOnly","isValid","elements","getOptions","_isSingleSelectionChoceList","selectedElement","find","parseInt","elementIsValid","validity","valid","messages","firstOptionElement","validationObject","errorMessages","fieldName","fieldType","choiceListEvents","CHOICE_LIST_VALIDATION_ERROR","firstOption","Array","from","innerHTML","message","optionElement","extraContent","extraRichContentElement","nextElementSibling","highlightText","htmlContent","contains","textContent","showExtraContentDiv","Component","registerComponent","defaultCollapseData","blockText","collapseHeight","maxItems","opened","childrenWrapper","collapseFrom","CollapseTemplate","groupId","defaultCollapseTriggerData","action","smooth","textPattern","arrow","ariaLabel","CollapseTriggerTemplate","classNames","actionElements","Collapse","childrenWrapperElement","_buildEvents","_getActionElements","_getGroupCollapseElements","_showHiddenItems","_updateActionElements","_updateHeight","_updateActionElementsVisibility","_updateActionElementsDisabled","open","close","toggle","update","isOpened","eventData","_getEventData","opc","_open","_close","_setMaxItemsAttribute","setMaxItems","collapseEvents","OPEN","_closeGroupCollapses","transitionTime","cssTimeToMs","getStyle","style","transitionDuration","maxHeight","clientHeight","scrollHeight","isScrollable","safeMargin","_showAllItemsOfCollapse","currentTransition","window","clearTimeout","setTimeout","OPENED","CLOSE","forceRepaint","_isByItems","CLOSED","scroll","documentScrollingElement","scrollingElement","documentElement","collapsibleBoundingRect","getBoundingClientRect","scrollTop","y","scrollLeft","_actionElements","_groupCollapseElements","index","display","finalFn","_height","_transitionTime","_updateActionElementsState","_updateActionElementsText","_this7","showActionElements","isBlockText","hiddenItems","childElementCount","minHeight","_this8","toString","_this9","component","_this10","_events","resize","utilsHelper","tokensCollections","defaultCollectionImageData","sync","resolve","defaultCollectionItemData","titleTag","collection","title","subTitle","image","CollectionItemTemplate","collectionId","collectionToken","getToken","ImgTemplate","defaultImgData","colorScheme","defaultCollectionRowData","expandedFrom","neutral","collectionLabelHidden","tiledFrom","CollectionRowTemplate","componentLocales","defaultDateSelectorData","blockModifier","date","minDate","maxDate","validations","monthType","hiddenMainLabel","mainLabel","dayPlaceholder","monthPlaceholder","yearPlaceholder","messageInvalid","messageOutOfBounds","dropdownConfig","placeholder","showDefaultOption","hiddenLabel","hasClearButton","icon","clearButtonAttributes","DateSelectorTemplate","DropdownTemplate","DateSelectorMessagesTemplate","da","de","en","nb","fr","nl","sv","dateLocales","monthNames","default","months","short","months_short","today","Date","dateToString","getFullYear","getMonth","getDate","DateSelector","dateConfig","_init","getShownDate","validationErrors","isReal","isInBounds","isOutOfBounds","_attachMonthEventListeners","dateString","property","_getPropInstance","isAllowedValue","isNullable","_this$_validateAll","_validateAll","console","warn","createDate","noTimeZoneDate","_setDatePropAndAttribute","_parseDate","justCheck","_ref","day","month","year","dateDropdowns","_getDateDropdowns","valueToStringOrEmpty","isNaN","_setValidationState","isDisabled","_setDateConfig","monthItem","isRequired","isEmpty","_fullDateIsEmpty","isValidDate","values","every","messageTypes","isErrorState","_setValidationErrors","_getValidationMessageTypes","errorTypes","_getFullDateString","reduce","obj","_defineProperty","isInvalidDate","isValidDateString","_normalizeDates","_setListeners","validationType","entries","_ref2","_ref3","_slicedToArray","_getErrorElement","errorMessage","_getValidationMessages","errorElement","_this$validationError","_this$validationError2","_this$validationError3","_ref4","_ref5","propName","setAttribute","dateTemp","_checkDates","_setDropdownPlaceholders","_populateDropdowns","monthDropdownValue","_ref6","Number","isNumberNotNull","dropdownElement","_ref7","_ref8","setMinDate","setMaxDate","config","dateToChange","dropdownComponent","fullDateString","stateValue","_this$dateConfig","days","range","years","reverse","areDatesInSameYear","areDatesInSameMonth","defaultEmptyOption","_ref9","buffer","lastKeyTime","now","monthDropdown","keydown","onKeyDown","toLowerCase","indexOf","currentTime","valueForMonthOption","preventDefault","isAnyOptionSelected","anySelected","some","o","selected","selectedItemSingle","renderSelectedItemsCompact","selectedItems","nestedOptions","n","isHalfChecked","NestedOptions","mapNestedOptionsToCheckboxViewModels","dropdownId","indexParent","buildChoiceListItem","choiceListItems","defaultDropdownMultipleData","floatingBoxContent","DropdownMultipleTemplate","FloatingBoxTemplate","gradient","floatsFrom","floatingBoxBody","FloatingBoxBodyTemplate","buildFloatingBoxBody","floatingBoxFooter","FloatingBoxFooterTemplate","defaultButtonData","cancelButtonText","okButtonText","buildFloatingBoxFooter","defaultDropdownSingleOptionData","DropdownSingleOptionTemplate","defaultDropdownSingleData","DropdownSingleTemplate","elementAttributes","iconPosition","defaultDropdownMultipleCompactItemData","componentQueries","changeEvent","CustomEvent","bubbles","cancelable","DropdownMultiple","floatingBox","floatingBoxApi","xoiceList","xoiceListApi","optionsData","getOptionsData","focusElement","optionsListElement","cancelElement","submitElement","focus","onFocus","mousedown","onClickChipList","onCancel","onSubmit","isCompact","JSON","parse","stringify","_updateOptions","_recoverFocus","addEventListener","toggleFloatingBox","getOkButtonLabelText","getOkButton","getCancelButtonLabelText","getCancelButton","getLabel","fallbackValues","_openedEvents","onDocumentClick","moveFocusToFirstElement","updateChevron","focusableOptions","lastFocusedElement","lastFocusedIndex","detachEvents","shouldEmit","save","newOptions","includes","getOptionsDataFromOptions","getText","matchValue","matchInput","dispatchEvent","keyCode","currentElementIndex","activeElement","nextElement","newIndex","shouldSave","queueFilterEvent","targetClicked","_flushOptionsElements","newItem","_newItemElement","newChip","_newChipElement","chipData","chip","newChipData","ItemData","newItemData","_regeneratorRuntime","t","r","prototype","hasOwnProperty","defineProperty","i","Symbol","a","iterator","c","asyncIterator","u","toStringTag","define","enumerable","configurable","writable","wrap","Generator","create","Context","makeInvokeMethod","tryCatch","arg","h","l","f","GeneratorFunction","GeneratorFunctionPrototype","p","getPrototypeOf","v","g","defineIteratorMethods","_invoke","AsyncIterator","invoke","_typeof","__await","then","callInvokeWithMethodAndArg","Error","done","delegate","maybeInvokeDelegate","sent","_sent","dispatchException","abrupt","return","TypeError","resultName","next","nextLoc","pushTryEntry","tryLoc","catchLoc","finallyLoc","afterLoc","tryEntries","resetTryEntry","completion","reset","displayName","isGeneratorFunction","constructor","mark","setPrototypeOf","__proto__","awrap","async","Promise","pop","prev","charAt","slice","stop","rval","handle","complete","finish","catch","delegateYield","asyncGeneratorStep","gen","reject","_next","_throw","info","ownKeys","getOwnPropertySymbols","getOwnPropertyDescriptor","_toPropertyKey","getOwnPropertyDescriptors","defineProperties","_defineProperties","descriptor","hint","prim","toPrimitive","res","String","_toPrimitive","_setPrototypeOf","self","ReferenceError","_getPrototypeOf","Dropdown","_setValue","subClass","superClass","Constructor","protoProps","Derived","hasNativeReflectConstruct","Reflect","construct","sham","Proxy","Boolean","valueOf","_isNativeReflectConstruct","result","Super","NewTarget","_possibleConstructorReturn","instance","requestAnimationFrame","syncSelected","clearNode","_getClearNode","getSelectNode","getValue","getPlaceholder","selectNode","onClick","focusout","onFocusOut","cDropdown__placeholder","_x","fn","_callee","_args","_context","args","err","array","noDefaultItems","selectedOption","selectedValue","selectElement","removeAttribute","isEmptyAndRequired","_styleValidity","ELEMENT_QUERIES","FavoriteButton","staticData","getStaticData","favorites","hasItem","itemId","itemToggled","contextItemId","eventCallback","shouldDisplayModal","openModal","active","removeItemAsync","publicationCode","favoriteEvents","FAVORITE_REMOVE","addItemAsync","FAVORITE_ADD","registerWidgetEvents","modal","renderModal","body","initDocumentComponentsFromAPI","attachModalEvents","newGUID","modalId","ModalTemplate","modalTitle","bodyContent","getModalBody","footerContent","getModalFooter","headerSize","modalBodyText","loginUrl","encodeURIComponent","URL","modalLoginButtonText","modalFooterText","modalFooterLinkText","modalApi","FAVORITE_MODAL_OPEN","FAVORITE_MODAL_CLOSE","FAVORITE_SIGNUP","FAVORITE_LOGIN","staticDataElement","data","wStaticContentDataId","wStaticContentDataName","countryId","wStaticContentDataAccoCountryId","cityId","wStaticContentDataAccoRegionId","rating","wStaticContentDataRating","badges","wStaticContentDataBadges","category","wStaticContentDataCategory","location","wStaticContentDataLocationId","accoStarts","wStaticContentDataAccoStars","_asyncToGenerator","FavoriteCleaner","btn","search","emptyFavorites","FavoriteCollector","itemsLength","newCount","EventEmitter","cookieName","cookieApiName","cookieMigratedName","cookieSettings","expirationDays","path","_addItemAsync","_removeItemAsync","_reset","_getFavouritesAsync2","_addFavouriteAsync2","_removeFavouriteAsync2","_removeAllFavouritesAsync2","_editFavouritesApiCallAsync2","_getFavouritesApiCallAsync2","Favorites","favouritesElement","isUserLoggedIn","useApi","urls","addUrl","removeUrl","removeAllUrl","getUrl","_getFavouritesAsync","response","favouritesException","accos","jsonData","accoIds","favouritesMigrated","_deleteCookie","_setCookieMigrated","_updateCookie","isSunwebCeLoggedIn","cookieData","_getCookie","_isCookieMigrated","currentData","m","Collection","_canUseApi","_this$data","models","_this$favouritesEleme","_x2","_x3","added","_addFavouriteAsync","success","addItem","_x4","_x5","_x6","_callee2","removed","itemToRemove","_context2","findWhere","_removeFavouriteAsync","storage","cookie","get","set","delete","_x7","_callee3","_context3","_removeAllFavouritesAsync","_callee4","favouritesMigratedHeader","favouritesExceptionHeader","_context4","_getFavouritesApiCallAsync","headers","test","_x8","_x9","_x10","_callee5","accommodationId","_context5","_editFavouritesApiCallAsync","_x11","_x12","_x13","_callee6","_context6","_callee7","_context7","_x14","_x15","_x16","_x17","_callee8","url","requestUrl","_context8","getUrlFromString","fetchJsonData","fullReferrerOnCrossOrigin","t0","log","_x18","_callee9","_context9","fetchJsonDataAndHeaders","defaultFloatingBoxData","content","defaultFloatingBoxBodyData","defaultFloatingBoxFooterData","defaultFloatingBoxHeaderData","FloatingBoxHeaderTemplate","FloatingBox","adjustSize","forceClosedCallback","_closed","transitionTimeout","closedResolve","closedBound","cb","bodyNode","_getBodyNode","height","right","left","opacity","elementRect","horizontalOverflow","innerWidth","headerNode","_getHeaderNode","footerNode","_getFooterNode","contentNode","_getContentNode","headerHeight","footerHeight","contentHeight","idealMaxHeight","viewportHeight","innerHeight","bottom","betterHeight","top","defaultFormFieldsetData","FormFieldsetTemplate","description","TitleTemplate","components","FieldTemplate","defaultFieldData","TextboxTemplate","PhoneInputTemplate","defaultOptions","siteKey","RecaptchaEngine","assign","selectors","recaptchaInstances","currentComponents","getRecaptchasOnDocument","current","createRecaptchaOnForm","grecaptcha","callbackName","src","tag","createElement","head","submitButton","_initRecaptcha","isGRecaptchaAvailable","recaptchaId","render","sitekey","callback","token","_submitForm","loadQueueHelper","createRecaptchasOnDocument","injectRecaptchaScript"],"sourceRoot":""}