TEMPLATE MISSING
\"),\n\t\t\t\t\tfixBody = this.getAttribute(\"data-fixbody\")\n\t\t\t\t\t\t? this.getAttribute(\"data-fixbody\") == \"true\"\n\t\t\t\t\t\t: false,\n\t\t\t\t\tcssClasses = template.getAttribute(\"data-classes\")\n\t\t\t\t\t\t? template.getAttribute(\"data-classes\")\n\t\t\t\t\t\t: \"\";\n\n\t\t\t\tcssClasses += this.getAttribute(\"data-classes\")\n\t\t\t\t\t? \" \" + this.getAttribute(\"data-classes\")\n\t\t\t\t\t: \"\";\n\n\t\t\t\tlet instantiationFail = false;\n\n\t\t\t\tif (typeof template == \"undefined\") {\n\t\t\t\t\tinstantiationFail = true;\n\t\t\t\t}\n\t\t\t\tif (typeof content == \"undefined\") {\n\t\t\t\t\tinstantiationFail = true;\n\t\t\t\t}\n\t\t\t\tif (typeof fixBody == \"undefined\") {\n\t\t\t\t\tinstantiationFail = true;\n\t\t\t\t}\n\t\t\t\tif (typeof cssClasses == \"undefined\") {\n\t\t\t\t\tinstantiationFail = true;\n\t\t\t\t}\n\t\t\t\tif (instantiationFail) return false;\n\n\t\t\t\tlet modal = new ModalBox({\n\t\t\t\t\tcontent: content,\n\t\t\t\t\tcssClasses: cssClasses,\n\t\t\t\t\tfixBody: fixBody\n\t\t\t\t});\n\t\t\t\tmodal;\n\t\t\t});\n\t\t});\n\n\t\tlet notifications = document.querySelectorAll(\".js--notification\");\n\t\t[...notifications].map(elem => {\n\t\t\tlet notification = new Notification(elem);\n\t\t});\n\n\t\tlet pageHeaderSearches = document.querySelectorAll(\n\t\t\t\".js--page-header-search\"\n\t\t);\n\t\t[...pageHeaderSearches].map(elem => {\n\t\t\tlet pageHeaderSearch = new PageHeaderSearch(elem);\n\t\t});\n\n\t\tlet panelLayouts = document.querySelectorAll(\".js--panel-layout\");\n\t\t[...panelLayouts].map(elem => {\n\t\t\tlet panelLayout = new PanelLayout(elem);\n\t\t});\n\n\t\tlet reveals = document.querySelectorAll(\".js--reveal\");\n\t\t[...reveals].map(elem => {\n\t\t\tlet reveal = new Reveal(elem);\n\t\t});\n\n\t\tlet searchFiltersOverlays = document.querySelectorAll(\n\t\t\t\".js--search-filters-overlay\"\n\t\t);\n\t\t[...searchFiltersOverlays].map(elem => {\n\t\t\tlet searchFiltersOverlay = new SearchFiltersOverlay(elem);\n\t\t});\n\n\t\tlet searchLayers = document.querySelectorAll(\".js--search-layer\");\n\t\t[...searchLayers].map(elem => {\n\t\t\tlet searchLayer = new SearchLayer(elem);\n\t\t});\n\n\t\tlet shortcutses = document.querySelectorAll(\".js--shortcuts\");\n\t\t[...shortcutses].map(elem => {\n\t\t\tlet shortcuts = new Shortcuts(elem);\n\t\t});\n\n\t\tlet siteFooters = document.querySelectorAll(\".js--site-footer\");\n\t\t[...siteFooters].map(elem => {\n\t\t\tlet siteFooter = new SiteFooter(elem);\n\t\t});\n\n\t\tlet siteHeaders = document.querySelectorAll(\".js--site-header\");\n\t\t[...siteHeaders].map(elem => {\n\t\t\tlet siteHeader = new SiteHeader(elem);\n\t\t});\n\n\t\tlet sliders = document.querySelectorAll(\".js--slider\");\n\t\t[...sliders].map(elem => {\n\t\t\tlet slider = new Slider(elem);\n\t\t});\n\n\t\tlet statusControlses = document.querySelectorAll(\n\t\t\t\".js--status-controls\"\n\t\t);\n\t\t[...statusControlses].map(elem => {\n\t\t\tlet statusControls = new StatusControls(elem);\n\t\t});\n\n\t\tlet subscribePanels = document.querySelectorAll(\".js--subscribe-panel\");\n\t\t[...subscribePanels].map(elem => {\n\t\t\tlet subscribePanel = new SubscribePanel(elem);\n\t\t});\n\n\t\tlet toggleButtons = document.querySelectorAll(\".js--toggle-button\");\n\t\t[...toggleButtons].map(elem => {\n\t\t\tlet toggleButton = new ToggleButton(elem);\n\t\t});\n\n\t\tlet updateLogs = document.querySelectorAll(\".js--update-log\");\n\t\t[...updateLogs].map(elem => {\n\t\t\tlet updateLog = new UpdateLog(elem);\n\t\t});\n\n\t\t//Update the masonry layout\n\t\tlet masonryUpdates = document.querySelectorAll(\".js--masonry-update\");\n\t\t[...masonryUpdates].map(elem => {\n\t\t\telem.addEventListener(\"click\", () =>\n\t\t\t\tEmitter.trigger(\"panel:update\")\n\t\t\t);\n\t\t});\n\n\t\tlet videos = document.querySelectorAll(\".js--video\");\n\t\t[...videos].map(elem => {\n\t\t\tlet video = new Video(elem);\n\t\t});\n\n\t\tconst fbFeed = document.querySelector(\".facebook-wrapper\");\n\t\tif (fbFeed) new FacebookPageFeed(fbFeed);\n\n\t\tconst stickybits = new Stickybits();\n\t}\n\t// for modules that's ready to be re initiated\n\tupdateModules() {\n\t\tconst reveals = document.querySelectorAll(\".js--reveal\");\n\t\t[...reveals].forEach(elem => {\n\t\t\tconst reveal = new Reveal(elem);\n\t\t});\n\t\tconst formses = document.querySelectorAll(\".form\");\n\t\t[...formses].map(elem => {\n\t\t\tlet forms = new Forms(elem);\n\t\t});\n\n\t\tlet accordionControllers = document.querySelectorAll(\n\t\t\t\".js--accordion-controller\"\n\t\t);\n\t\t[...accordionControllers].map(elem => {\n\t\t\tlet controller = new AccordionController(elem);\n\t\t});\n\n\t\tlet accordions = document.querySelectorAll(\".js--accordion\");\n\t\t[...accordions].map(elem => {\n\t\t\tlet noController = !elem.closest(\".js--accordion-controller\");\n\t\t\tif (noController) {\n\t\t\t\tlet accordion = new Accordion(elem);\n\t\t\t}\n\t\t});\n\t}\n\n\tstatic factory() {\n\t\treturn new PrototypeApp();\n\t}\n}\n\nconst App = new DesignsystemApp();\n\nexport {\n\tApp,\n\tAccordionController,\n\tAccordion,\n\tAlphabeticNavigation,\n\tAnimatedReveal,\n\tReveal,\n\tCommentForm,\n\tCookieCompliance,\n\tCriterionList,\n\tEntriesNavigation,\n\tFilterButtons,\n\tForms,\n\tKeywordEdit,\n\tKeywordToggle,\n\tModalBox,\n\tNotification,\n\tPageHeaderSearch,\n\tPanelLayout,\n\tSearchLayer,\n\tSearchFiltersOverlay,\n\tShortcuts,\n\tSiteFooter,\n\tSiteHeader,\n\tSlider,\n\tStatusControls,\n\tSubscribePanel,\n\tToggleButton,\n\tUpdateLog,\n\tStickybits,\n\tFacebookPageFeed\n};\n","import Emitter from './emitter';\nimport Accordion from './accordion';\nimport Utils from './utils';\nimport View from '../view';\nclass AccordionController extends View {\n\n\tconstructor(el){\n\t\tsuper(el);\n\t\tif(this.el.getAttribute('data-mounted')) return;\n\t\tthis.el.setAttribute('data-mounted', true);\n\t\tthis.autoOpen = false;\n\t\tthis.allOpen = false;\n\t\tvar wW = window.innerWidth;\n\t\tthis.uuid = Utils.uniqueId(4);\n\t\t\n\t\tvar dataAutoOpen = this.el.dataset.autoopen;\n\n\t\tif ( dataAutoOpen ) {\n\t\t\tif ( dataAutoOpen == \"desktop\" && wW > 767 ) {\n\t\t\t\tthis.autoOpen = true;\n\t\t\t}\n\t\t\telse if ( dataAutoOpen == \"mobile\" && window.innerWidth < 768) {\n\t\t\t\tthis.autoOpen = true;\n\t\t\t}\n\t\t}\n\n\t\tlet accordions = this.el.querySelectorAll('.js--accordion');\n\t\t\t[...accordions].map((elem)=> {\n\t\t\t\tconst accordion = new Accordion(elem, this.uuid);\n\t\t\t});\n\n\t\tthis.trigger = this.el.querySelector('.js--accordion-controller-trigger');\n\t\tthis.trigger && this.trigger.addEventListener('click', this.onToggleAll.bind(this));\n\n\t\tif ( this.autoOpen ) setTimeout(function(){\n\t\t\tthis.onToggleAll(null);\n\t\t}.bind(this), 200);\n\t}\n\n\tonToggleAll(e){\n\t\ttry {\n\t\t\te.preventDefault();\n\t\t\te.stopPropagation();\n\t\t} catch (error) { }\n\t\tthis.allOpen = !this.allOpen;\n\t\tEmitter.trigger(this.allOpen ? 'accordion:open' : 'accordion:close', { id: this.uuid });\n\t}\n}\n\nexport default AccordionController;\n","import Emitter from \"./emitter\";\nimport Utils from \"./utils\";\nimport View from \"../view\";\nimport { TweenLite } from \"gsap\";\n\nclass Accordion extends View {\n\tget getInitialOptions() {\n\t\treturn {\n\t\t\tallowMultiple: true,\n\t\t\tallowToggle: true,\n\t\t\tduration: 0.3\n\t\t};\n\t}\n\tconstructor(el, id = null) {\n\t\tsuper(el);\n\t\t// this.el = Utils.elProxy(el);\n\n\t\tthis.id = id;\n\t\tif (this.el.getAttribute(\"data-mounted\")) return;\n\t\tthis.options = this.getInitialOptions;\n\t\tthis.el.setAttribute(\"data-mounted\", true);\n\n\t\tthis.open = this.open.bind(this);\n\t\tthis.close = this.close.bind(this);\n\n\t\tfor (let key in this.el.dataset) {\n\t\t\tif (this.options.hasOwnProperty(key)) {\n\t\t\t\tthis.options[key] =\n\t\t\t\t\tthis.el.dataset[key] === \"true\" ? true : false;\n\t\t\t}\n\t\t}\n\n\t\tthis.trigger = this.el.querySelector(\".js--accordion-trigger\");\n\t\tthis.internalButtons = this.el.querySelectorAll(\".button\");\n\n\t\tthis.trigger.addEventListener(\"click\", this.onToggle.bind(this));\n\n\t\t[...this.internalButtons].map(button => {\n\t\t\tbutton.addEventListener(\n\t\t\t\t\"click\",\n\t\t\t\tthis.handleInlineButtonClick.bind(this)\n\t\t\t);\n\t\t});\n\n\t\tthis.savedWindowWidth = 0;\n\n\t\tthis.content = this.el.querySelector(\".js--accordion-content\");\n\n\t\tthis.content.setAttribute(\n\t\t\t\"aria-hidden\",\n\t\t\tthis.trigger.getAttribute(\"aria-expanded\") == \"false\"\n\t\t);\n\t\tthis.content.style.display =\n\t\t\tthis.trigger.getAttribute(\"aria-expanded\") == \"true\"\n\t\t\t\t? \"block\"\n\t\t\t\t: \"none\";\n\n\t\tEmitter.on(\"accordion:update\", this.updateHeight.bind(this));\n\t\tEmitter.on(\"accordion:close\", event => {\n\t\t\tif (this.id === event.id) {\n\t\t\t\tthis.close(this);\n\t\t\t}\n\t\t});\n\t\tEmitter.on(\"accordion:open\", event => {\n\t\t\tif (this.id === event.id) {\n\t\t\t\tthis.open();\n\t\t\t}\n\t\t});\n\t}\n\n\tonToggle(e) {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tconst target = e.currentTarget;\n\t\t// const content = target.parentElement.nextElementSibling;\n\t\t// Check if the current toggle is expanded.\n\t\tconst isOpen = this.trigger.getAttribute(\"aria-expanded\") == \"true\";\n\n\t\tif (!isOpen) {\n\t\t\t// to open state\n\t\t\tthis.open();\n\n\t\t} else if (\n\t\t\tthis.options.allowToggle ||\n\t\t\t(this.options.allowMultiple && isOpen)\n\t\t) {\n\t\t\t// to close\n\t\t\tthis.close();\n\t\t}\n\t}\n\n\thandleInlineButtonClick(event) {\n\t\tevent.stopPropagation();\n\t}\n\n\topen() {\n\t\tthis.content.setAttribute(\"aria-hidden\", \"false\");\n\t\tthis.el.classList.add(\"is-active\");\n\t\tthis.content.style.height = \"auto\";\n\t\tthis.content.style.display = \"block\";\n\n\t\tTweenLite.to(this.content, this.options.duration, { opacity: 1 });\n\t\tTweenLite.from(this.content, this.options.duration, {\n\t\t\theight: 0,\n\t\t\tonComplete: () => {\n\t\t\t\t// Set the expanded state on the triggering element\n\t\t\t\tthis.trigger.setAttribute(\"aria-expanded\", \"true\");\n\n\t\t\t\t// If toggling is not allowed, set disabled state on trigger\n\t\t\t\tif (!this.options.allowToggle) {\n\t\t\t\t\tthis.trigger.setAttribute(\"aria-disabled\", \"true\");\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\tsetTimeout(\n\t\t\tfunction() {\n\t\t\t\tEmitter.trigger(\"panel:update\");\n\t\t\t}.bind(this),\n\t\t\t500\n\t\t);\n\t}\n\n\tclose() {\n\t\t// Set the expanded state on the triggering element\n\t\tthis.el.classList.remove(\"is-active\");\n\t\t// animate content to closed\n\n\t\tTweenLite.to(this.content, this.options.duration, {\n\t\t\theight: 0,\n\t\t\topacity: 0,\n\t\t\tonComplete: () => {\n\t\t\t\tthis.trigger.setAttribute(\"aria-expanded\", \"false\");\n\t\t\t\t// Hide the accordion sections, using aria-controls to specify the desired section\n\t\t\t\tthis.content.setAttribute(\"aria-hidden\", \"true\");\n\t\t\t\tthis.content.style.display = \"none\";\n\t\t\t\t// When toggling is not allowed, clean up disabled state\n\t\t\t\tif (!this.options.allowToggle) {\n\t\t\t\t\tthis.trigger.removeAttribute(\"aria-disabled\");\n\t\t\t\t}\n\t\t\t\tsetTimeout(\n\t\t\t\t\tfunction() {\n\t\t\t\t\t\tEmitter.trigger(\"panel:update\");\n\t\t\t\t\t}.bind(this),\n\t\t\t\t\t500\n\t\t\t\t);\n\t\t\t}\n\t\t});\n\t}\n\n\tresizeHandler(event) {\n\t\tvar width = window.outerWidth;\n\t\tif (this.savedWindowWidth === width) return false;\n\t\telse {\n\t\t\tthis.savedWindowWidth = width;\n\t\t\tthis.updateHeight();\n\t\t}\n\t}\n\n\tupdateHeight(event) {\n\t\t// if ( this.active ) {\n\t\t// \tthis.content.style.maxHeight = 'none';\n\t\t// \tthis.maxHeight = this.content.offsetHeight;\n\t\t// }\n\t\t// else {\n\t\t// \tthis.content.style.maxHeight = '0px';\n\t\t// }\n\t\treturn;\n\t}\n\tstatic eventEmitter() {\n\t\treturn Emitter;\n\t}\n}\n\nexport default Accordion;\n\n// import Base from '../../basics/js/base';\n// import { TweenLite } from 'gsap';\n\n// // with inspiration from https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html\n\n// /**\n// * @param {HTMLElement} el accordion container\n// * @param {Obj} options Object containing options for allowMultiple, allowToggle, duration\n// */\n\n// class Accordion extends Base {\n// \tget initialOptions() {\n// \t\treturn {\n// \t\t\tallowMultiple: false,\n// \t\t\tallowToggle: false,\n// \t\t\tduration: 0.3\n// \t\t}\n// \t}\n// \tconstructor(el, options) {\n// \t\tsuper(el, options);\n// \t\tthis.active = false;\n\n// \t\tfor (let key in this.el.dataset) {\n// \t\t\tif( this.options.hasOwnProperty( key ) ) {\n// \t\t\t\tthis.options[key] = this.el.dataset[key] === \"true\" ? true : false;\n// \t\t\t}\n// \t\t}\n\n// \t\tconsole.log('hi from Accordion', this.options);\n// \t\t//const button = this.el.querySelector('.button');\n// \t\t//button.addEventListener('click', this.handleInlineButtonClick.bind(this));\n\n// \t\t//scope binding\n// //\t\tthis.onToggle = this.onToggle.bind(this);\n// \t\tthis.triggers = this.find('*:not(.accordion) .js--accordion-trigger');\n// \t\tconsole.log(this.triggers)\n\n// \t}\n\n// \tdelegateEvents () {\n// \t\t[].forEach.call(this.el.children, cn => { // allow nesting of accordions\n// \t\t\tif(cn.classList.contains('accordion__title')) {\n// \t\t\t\tthis.on('click', cn.querySelector('.js--accordion-trigger'), this.onToggle.bind(this));\n\n// \t\t\t}\n// \t\t});\n\n// \t\tthis.on('keydown', this.el, this.onKeyDown.bind(this));\n// \t}\n\n// \tundelegateEvents () {\n// \t\t[].forEach.call(this.el.children, cn => { // allow nesting\n// \t\t\tif(cn.classList.contains('accordion__title')) {\n// \t\t\t\tthis.off('click', cn.querySelector('.js--accordion-trigger'), this.onToggle.bind(this));\n\n// \t\t\t}\n// \t\t});\n// \t\tthis.off('keydown', this.el, this.onKeyDown.bind(this));\n// \t}\n\n// \tonToggle(e) {\n// \t\te.preventDefault();\n// \t\te.stopPropagation();\n// \t\tconst target = e.currentTarget;\n// \t\t//const content = target.parentElement.nextElementSibling;\n// \t\t// Check if the current toggle is expanded.\n// \t\tconst isOpen = target.getAttribute('aria-expanded') == 'true';\n// \t\tconst active = this.find('[aria-expanded=\"true\"]')[0];\n// \t\tconst content = this.find(`#${target.getAttribute('aria-controls')}`)[0];\n// \t\t// without allowMultiple, close the open accordion\n// \t\tif (!this.options.allowMultiple && active && active !== target) { // to close\n// \t\t\tconst tmpContent = this.find(`#${active.getAttribute('aria-controls')}`)[0];\n// \t\t\t// animate content to closed\n// \t\t\tTweenLite.to(tmpContent, this.options.duration, { height:0, onComplete: ()=>{\n// \t\t\t\t// Set the expanded state on the triggering element\n// \t\t\t\tactive.setAttribute('aria-expanded', 'false');\n// \t\t\t\t// Hide the accordion sections, using aria-controls to specify the desired section\n// \t\t\t\ttmpContent.setAttribute('aria-hidden', 'true');\n// \t\t\t\t// When toggling is not allowed, clean up disabled state\n// \t\t\t\tif (!this.options.allowToggle) {\n// \t\t\t\t\tactive.removeAttribute('aria-disabled');\n// \t\t\t\t}\n// \t\t\t}})\n// \t\t}\n// \t\tif (!isOpen) { // to open state\n// \t\t\t// Hide the accordion sections, using aria-controls to specify the desired section\n// \t\t\tcontent.setAttribute('aria-hidden', 'false');\n// \t\t\tcontent.style.height = \"auto\";\n// \t\t\tTweenLite.to(content, this.options.duration, { opacity: 1});\n// \t\t\tTweenLite.from(content, this.options.duration, { height:0, onComplete:()=>{\n// \t\t\t\t// Set the expanded state on the triggering element\n// \t\t\t\ttarget.setAttribute('aria-expanded', 'true');\n// \t\t\t\t// set state class\n// \t\t\t\ttarget.parentElement.classList.add('is-open');\n// \t\t\t\t// If toggling is not allowed, set disabled state on trigger\n// \t\t\t\tif (!this.options.allowToggle) {\n// \t\t\t\t target.setAttribute('aria-disabled', 'true');\n// \t\t\t\t}\n// \t\t\t}});\n// \t\t} else if (this.options.allowToggle || this.options.allowMultiple && isOpen) { // to close\n// \t\t\tTweenLite.to(content, this.options.duration, {height: 0, opacity: 0, onComplete:()=>{\n// \t\t\t\t// Set the expanded state on the triggering element\n// \t\t\t\ttarget.parentElement.classList.remove('is-open');\n// \t\t\t\ttarget.setAttribute('aria-expanded', 'false');\n// \t\t\t\t// Hide the accordion sections, using aria-controls to specify the desired section\n// \t\t\t\tcontent.setAttribute('aria-hidden', 'true');\n// \t\t\t}})\n// \t\t}\n// \t}\n\n// \tonKeyDown (e) {\n// \t\tconsole.log(e);\n// \t}\n\n// \thandleInlineButtonClick(e){\n// \t\te.stopPropagation();\n// \t}\n\n// }\n\n// export default Accordion;\n","class AlphabeticNavigation {\n\n\tconstructor(el) {\n\t\tthis.el = el;\n\t\tthis.buttons = this.el.querySelectorAll('.button');\n\t\tthis.toggleAllButton = this.el.querySelector('[data-all]');\n\t\tthis.notMultiple = this.el.dataset.multiple === 'false';\n\n\t\t[...this.buttons].map((button)=>{\n\t\t\tbutton.addEventListener('click', this.toggleFilterButton.bind(this));\n\t\t});\n\t}\n\n\ttoggleFilterButton(event) {\n\t\tlet button = event.currentTarget,\n\t\t\tisAllButton = button.dataset.all ? true : false;\n\n\t\tif ( isAllButton || this.notMultiple ) {\n\t\t\t[...this.buttons].map((button)=>{\n\t\t\t\tbutton.classList.remove('is-active');\n\t\t\t});\n\t\t}\n\t\telse {\n\t\t\tthis.toggleAllButton.classList.remove('is-active');\n\t\t}\n\t\tbutton.classList.toggle('is-active');\n\t}\n}\n\nexport default AlphabeticNavigation;\n","\nimport TimelineLite from 'gsap/umd/TimelineLite';\nimport TweenLite from 'gsap/umd/TweenLite';\nimport Power3 from 'gsap/umd/EasePack';\nimport ScrollMagic from 'scrollmagic';\n\nclass AnimatedReveal {\n\n\tconstructor() {\n\t\tthis.scrollMagicController = new ScrollMagic.Controller();\n\t\tthis.scenes = [];\n\n\t\tthis.defaultProps = {\n\t\t\tdistance: 30\n\t\t};\n\n\t\tlet animatedElements = document.querySelectorAll('.js--animated-reveal');\n\n\t\tlet wh = window.innerHeight\n\t\t|| document.documentElement.clientHeight\n\t\t|| document.body.clientHeight;\n\n\t\t[...animatedElements].map((elem)=>{\n\t\t\tlet scene = new ScrollMagic.Scene({triggerElement: elem, offset:-(wh/5)});\n\t\t\t\tscene.addTo(this.scrollMagicController);\n\t\t\t\tscene.on(\"enter\", this.elementInView.bind(this));\n\n\t\t\tthis.scenes.push(scene);\n\t\t});\n\t}\n\n\telementInView(event) {\n\t\tlet element = event.target.triggerElement();\n\t\tlet dataset = element.dataset;\n\n\t\tif ( !element.classList.contains('is-animated') ) {\n\t\t\telement.classList.add('is-animated');\n\n\t\t\tif (dataset.animtype == 'stagger' && dataset.animtarget) {\n\t\t\t\tlet children = element.querySelectorAll('.'+dataset.animtarget);\n\t\t\t\tlet tl = new TimelineLite();\n\t\t\t\ttl.staggerFromTo(children, 0.4, {y:-10,opacity:0},{y:0,opacity:1}, 0.1, \"stagger\");\n\t\t\t}\n\t\t\telse {\n\t\t\t\tlet toProps = {\n\t\t\t\t\tdelay:dataset.animdelay ? dataset.animdelay : 0,\n\t\t\t\t\tease:dataset.animease ? window[dataset.animease].easeOut : Power3.easeOut\n\t\t\t\t};\n\t\t\t\tlet fromProps = {\n\t\t\t\t\tdelay:dataset.animdelay ? dataset.animdelay : 0,\n\t\t\t\t\tease:dataset.animease ? window[dataset.animease].easeOut : Power3.easeOut\n\t\t\t\t};\n\n\t\t\t\tswitch (dataset.animtype){\n\t\t\t\t\tcase 'up':\n\t\t\t\t\t\tfromProps.opacity = 1;\n\t\t\t\t\t\ttoProps.opacity = 1;\n\t\t\t\t\t\tfromProps.y = this.defaultProps.distance;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'fade':\n\t\t\t\t\t\ttoProps.opacity = 1;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'fadedown':\n\t\t\t\t\t\ttoProps.opacity = 1;\n\t\t\t\t\t\tfromProps.y = -this.defaultProps.distance;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'fadeup':\n\t\t\t\t\t\ttoProps.opacity = 1;\n\t\t\t\t\t\tfromProps.y = this.defaultProps.distance;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'faderight':\n\t\t\t\t\t\ttoProps.opacity = 1;\n\t\t\t\t\t\tfromProps.x = this.defaultProps.distance;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'fadeleft':\n\t\t\t\t\t\ttoProps.opacity = 1;\n\t\t\t\t\t\tfromProps.x = -this.defaultProps.distance;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'fadescale':\n\t\t\t\t\t\ttoProps.opacity = 1;\n\t\t\t\t\t\tfromProps.scale = 0.6;\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tlet duration = dataset.animduration ? dataset.animduration : 2;\n\n\t\t\t\tTweenLite.to(element,duration,toProps);\n\t\t\t\tTweenLite.from(element,duration,fromProps);\n\t\t\t}\n\t\t}\n\t}\n}\n\n\nexport default new AnimatedReveal();\n","import Emitter from './emitter';\nimport View from '../view';\n\nclass CommentForm extends View {\n\tconstructor(el) {\n\t\tsuper(el);\n\t\tthis.button = this.el.querySelector('.js--comment-form-button');\n\t\tthis.tagsContainer = this.el.querySelector('.js--comment-form-tags');\n\t\tthis.textArea = this.el.querySelector('textarea');\n\t\tthis.tagButtons = this.el.querySelectorAll('.js--tag');\n\t\tthis.toggleAllTagButton = this.el.querySelector('[data-all]');\n\t\t\n\t\t\t\t\n\t\tif (!this.el.classList.contains('is-active')) {\n\t\t\tdocument.querySelector('body').addEventListener('click', this.onBodyClick.bind(this) );\n\t\t}\n\t\t\n\t\t\n\t\tthis.textArea.addEventListener('focus', this.onFocus.bind(this) );\n\n\t\t[...this.tagButtons].map((tagButton)=> {\n\t\t\ttagButton.addEventListener('click', this.onTagClick.bind(this) );\n\t\t});\n\n\n\t\tEmitter.on('textarea:resize', this.panelUpdate.bind(this) );\n\t\t\n\t}\n\n\tonFocus() {\t\n\t\tthis.tagsContainer.setAttribute('style','display: block;');\n\t\tif (this.button instanceof HTMLElement){\n\t\t\tthis.button.setAttribute('style','display: inline-block;');\n\t\t}\n\t\tsetTimeout(function(){\n\t\t\tthis.el.classList.add('is-active');\t\t\t\t\t\n\t\t\tthis.panelUpdate();\n\t\t}.bind(this), 50);\n\t}\n\n\tonBodyClick(event) {\n\t\t\n\t\tif ( !this.el.classList.contains('is-active') ) return false;\n\t\t\n\n\t\tvar foundEl = event.target.closest('.js--comment-form');\n\n\t\tif ( !foundEl ) {\n\t\t\tthis.el.classList.remove('is-active');\n\t\t\t\n\t\t\tsetTimeout(function() {\n\t\t\t\tthis.tagsContainer.setAttribute('style','');\n\t\t\t\tif (this.button instanceof HTMLElement){\n\t\t\t\t\tthis.button.setAttribute('style','');\n\t\t\t\t}\n\t\t\t\tthis.panelUpdate();\n\t\t\t}.bind(this), 300);\n\t\t}\n\t}\n\n\tonTagClick(event){\n\t\t\n\t\tlet tagButton = event.currentTarget;\n\t\tvar isAllButton = tagButton.dataset.all ? true : false;\n\n\t\tif ( isAllButton ) {\n\t\t\t[...this.tagButtons].map((tagButton)=> {\n\t\t\t\ttagButton.classList.remove('is-active');\n\t\t\t\t\n\t\t\t});\n\t\t}\n\t\telse {\n\t\t\tthis.toggleAllTagButton.classList.remove('is-active');\t\t\t\n\t\t}\n\t\ttagButton.classList.toggle('is-active');\t\t\n\t}\n\n\tpanelUpdate(){\n\t\tEmitter.trigger('accordion:update');\n\n\t\tsetTimeout(function() {\n\t\t\tEmitter.trigger('panel:update');\n\t\t}.bind(this), 500);\n\t}\n}\n\n\nexport default CommentForm;\n","import { isCookieEnabled, getCookie, setCookie, removeCookie } from 'tiny-cookie';\nimport Utils from './utils';\nimport View from '../view';\n\nclass CookieCompliance extends View {\n\n\tconstructor(el) {\n\t\tsuper(el);\n\n\t\tlet cookie = getCookie(window.cookieProps.name);\n\n\t\tlet acceptButton = this.el.querySelector('.js--accept');\n\t\tlet rejectButton = this.el.querySelector('.js--reject');\n\n\t\tacceptButton.addEventListener('click', this.acceptHandler.bind(this) );\n\t\trejectButton.addEventListener('click', this.rejectHandler.bind(this) );\n\n\n\t\tif ( cookie == 'true' ){\n\t\t\tUtils.remove(this.el);\n\t\t}\n\t\telse {\n\t\t\tsetTimeout(function(){\n\t\t\t\tthis.el.classList.add('is-active');\n\t\t\t}.bind(this),3000);\n\t\t}\n\t}\n\n\tacceptHandler() {\n\t\tsetCookie(window.cookieProps.name, \"true\", { expires:this.expirationDate(), domain:window.cookieProps.domain } );\n\n\t\tUtils.remove(this.el);\n\t}\n\n\trejectHandler() {\n\t\tsetCookie(window.cookieProps.name, \"false\", { expires:this.expirationDate(), domain:window.cookieProps.domain } );\n\n\t\tUtils.remove(this.el);\n\t}\n\n\texpirationDate() {\n\t\tlet date = new Date();\n\t\tdate.setDate(date.getDate() + window.cookieProps.days);\n\t\tlet dateStr = date.toGMTString();\n\n\t\treturn dateStr;\n\t}\n}\n\nexport default CookieCompliance;\n","import Emitter from './emitter';\n\nclass CriterionList {\n\n\tconstructor(el) {\n\t\tthis.el = el;\n\n\t\tthis.labelId = this.el.dataset.labelid;\n\n\t\tif ( this.labelId ) this.countLabelRef = document.querySelector('#'+this.labelId);\n\n\t\tEmitter.trigger('criterionlist:init', this.instanceId);\n\t\tEmitter.on('criterionlist:clear', this.clearAll.bind(this));\n\n\t\tthis.criterionElements = this.el.querySelectorAll('.js--criterion');\n\n\t\tthis.criteria = this.el.querySelectorAll('.js--criterion');\n\t\t[...this.criteria].map((criterion)=>{\n\t\t\tcriterion.addEventListener('click',this.toggleCriterion.bind(this));\n\t\t});\n\n\t}\n\n\ttoggleCriterion(event) {\n\t\tlet criterion = event.currentTarget;\n\t\tcriterion.classList.toggle('is-active');\n\t\tlet active = criterion.classList.contains('is-active');\n\t\tcriterion.setAttribute('aria-checked', active);\n\n\t\tthis.countActives();\n\t}\n\n\tcountActives(argument) {\n\t\tlet activeCount = this.el.querySelectorAll('a.is-active').length;\n\t\tif ( activeCount > 0 ) {\n\t\t\tEmitter.trigger('criterionlist:actives', this.instanceId);\n\t\t\tif ( this.countLabelRef ) {\n\t\t\t\tthis.countLabelRef.textContent = activeCount + \" valgt\";\n\t\t\t\tthis.countLabelRef.classList.add('is-active');\n\t\t\t}\n\t\t}\n\t\telse {\n\t\t\tEmitter.trigger('criterionlist:empty', this.instanceId);\n\t\t\tif ( this.countLabelRef ) {\n\t\t\t\tthis.countLabelRef.classList.remove('is-active');\n\t\t\t}\n\t\t}\n\t}\n\n\tclearAll() {\n\t\t[...this.criteria].map((criterion)=>{\n\t\t\tcriterion.classList.remove('is-active');\n\t\t});\n\t}\n\n}\n\nexport default CriterionList;\n","import ES6EventEmitter from \"es6-event-emitter\";\n\nclass Emitter extends ES6EventEmitter {\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addListener = this.addListener.bind(this);\n\t\tthis.removeListner = this.removeListner.bind(this);\n\t}\n\taddListener(evnet, handler) {\n\t\tthis.on(event, handler);\n\t}\n\tremoveListner(evnet, handler) {\n\t\tthis.off(event, handler);\n\t}\n}\n\n// export singleton\nexport default new Emitter();\n","import Utils from './utils';\n\nclass EntriesNavigation {\n\n\tconstructor(el) {\n\t\tthis.el = el;\n\n\t\tthis.entryButtons = null;\n\t\tthis.animationDuration = 150;\n\t\tthis.secondaries = null;\n\t\tthis.secondariesContent = null;\n\n\t\tthis.oldEntryId = -1;\n\t\tthis.currentEntryId = -1;\n\t\tthis.oldSecondaryId = -1;\n\t\tthis.currentSecondaryId = -1;\n\t\tthis.currentSecondaryContentId = -1;\n\n\t\tthis.currentEntryButton = null;\n\t\tthis.currentSecondary = null;\n\t\tthis.secondaryOpen = false;\n\n\t\tthis.savedWindowWidth = 0;\n\n\t\tthis.secondaryCloseButtons = this.el.querySelectorAll('.js--secondary-close');\n\t\t[...this.secondaryCloseButtons].map((secondaryCloseButton)=>{\n\t\t\tsecondaryCloseButton.addEventListener('click',this.secondaryCloseHandler.bind(this));\n\t\t});\n\n\t\tthis.secondaries = this.el.querySelectorAll('.js--entries-navigation-secondary');\n\t\tthis.secondariesContent = this.el.querySelectorAll('.js--secondary-content');\n\t\tthis.entryButtons = this.el.querySelectorAll('.js--primary-entry');\n\n\n\t\tthis.bodyRef = document.querySelector('body');\n\t\tthis.htmlRef = document.querySelector('html');\n\n\n\t\tthis.savedWindowWidth = window.innerWidth;\n\n\t\twindow.addEventListener('resize', this.resizeHandler.bind(this) );\n\n\t\t[...this.entryButtons].map((entryButton)=>{\n\t\t\tentryButton.addEventListener('click', this.clickHandler.bind(this) );\n\t\t});\n\n\t}\n\n\tclickHandler(event) {\n\t\tthis.primaryEntryHandler(event);\n\t}\n\n\tprimaryEntryHandler(event) {\n\n\t\tif ( !event.currentTarget ) return false;\n\n\n\t\tthis.oldEntryId = this.currentEntryId;\n\t\tif ( this.currentEntryButton instanceof HTMLElement ) {\n\t\t\tthis.currentEntryButton.setAttribute('aria-expanded', 'false');\n\t\t}\n\t\tthis.currentEntryButton = event.currentTarget;\n\n\t\tthis.currentEntryId = parseInt(this.currentEntryButton.getAttribute('data-entryid'));\n\t\tthis.oldSecondaryId = this.currentSecondaryId;\n\n\t\tthis.currentSecondaryId = parseInt(this.currentEntryButton.getAttribute('data-secondaryid'));\n\t\tthis.currentSecondaryContentId = parseInt(this.currentEntryButton.getAttribute('data-contentid'));\n\n\t\tthis.currentSecondary = this.secondaries[this.currentSecondaryId];\n\t\tthis.currentSecondaryContent = this.currentSecondary.querySelector(\"[data-contentid='\"+this.currentSecondaryContentId+\"']\");\n\n\t\t// Log.db(\"cEI=\"+this.currentEntryId+\", cSI=\"+this.currentSecondaryId+\", cSCI=\"+this.currentSecondaryContentId);\n\t\t// Log.db(\"this.secondaries\",this.secondaries);\n\t\t// Log.db(\"this.currentSecondary\",this.currentSecondary);\n\t\t// Log.db(\"this.currentSecondaryContent\",this.currentSecondaryContent);\n\n\t\tif ( this.oldEntryId == this.currentEntryId ) {\n\t\t\t//clicked same button again\n\t\t\tthis.controlSecondaryNavigation(false);\n\t\t}\n\t\telse if ( this.oldSecondaryId == this.currentSecondaryId ) {\n\t\t\t//clicked something new - same secondary\n\t\t\tthis.controlSecondaryNavigation(true);\n\t\t}\n\t\telse {\n\t\t\t//clicked something new - secondary open\n\t\t\tthis.controlSecondaryNavigation(true, true);\n\t\t}\n\t}\n\n\tresetSecondaryContent(animate) {\n\t\t[...this.secondariesContent].map((elem)=>{\n\t\t\telem.classList.remove('is-animating');\n\t\t\tif ( animate ) setTimeout(function() {elem.classList.remove('is-active');}.bind(this),this.animationDuration);\n\t\t\telse elem.classList.remove('is-active');\n\t\t});\n\t}\n\n\tresetSecondary(animate, force) {\n\t\t[...this.secondaries].map((elem)=>{\n\t\t\tif ( elem != this.currentSecondary || force ) {\n\t\t\t\telem.classList.remove('is-animating');\n\t\t\t\tif ( animate ) setTimeout(function() {elem.classList.remove('is-active');}.bind(this),this.animationDuration);\n\t\t\t\telse elem.classList.remove('is-active');\n\t\t\t\telem.setAttribute(\"style\",\"\");\n\t\t\t}\n\t\t});\n\t}\n\n\tcontrolSecondaryNavigation(showingNewContent, newSecondary) {\n\n\t\tif ( showingNewContent ) {\n\n\t\t\tif ( newSecondary ) {\n\t\t\t\tthis.resetSecondary(true);\n\t\t\t}\n\t\t\tthis.resetSecondaryContent();\n\t\t\tthis.currentSecondary.classList.add('is-active');\n\n\t\t\tsetTimeout(function() {\n\t\t\t\tthis.currentSecondary.classList.add('is-animating');\n\t\t\t\tthis.currentSecondaryContent.classList.add('is-active');\n\t\t\t\tvar height = Utils.getHeight(this.currentSecondaryContent);\n\n\t\t\t\tthis.currentSecondary.setAttribute(\"style\",\"height:\"+height+\"px;\");\n\n\t\t\t\tsetTimeout(function() {\n\t\t\t\t\tthis.currentSecondaryContent.classList.add('is-animating');\n\t\t\t\t}.bind(this), 50);\n\n\t\t\t}.bind(this), 50);\n\n\t\t\tthis.currentEntryButton.setAttribute('aria-expanded', 'true');\n\t\t}\n\t\telse {\n\t\t\tthis.resetSecondary(true,true);\n\t\t\tthis.resetSecondaryContent(true);\n\n\t\t\tthis.oldEntryId = -1;\n\t\t\tthis.currentEntryId = -1;\n\t\t\tthis.oldSecondaryId = -1;\n\t\t\tthis.currentSecondaryId = -1;\n\t\t\tthis.currentSecondaryContentId = -1;\n\t\t}\n\t}\n\n\tresizeHandler() {\n\n\t\tvar width = window.innerWidth;\n\t\tif ( this.savedWindowWidth === width ) return false;\n\t\telse {\n\t\t\tthis.savedWindowWidth = width;\n\t\t\tthis.measureCols();\n\t\t}\n\t}\n\n\tmeasureCols(){\n\t\tvar width = window.outerWidth;\n\t\tif ( typeof width == \"undefined\" || width <= 0) width = window.innerWidth;\n\n\t\t//Log.db(\"measureCols | width=\"+width)\n\t\tif ( width < 768 ) {\n\t\t\t//mobile landscape\n\t\t\tthis.rearrangeEntries(1);\n\t\t}\n\t\telse if ( width < 1024) {\n\t\t\t//tablet portrait\n\t\t\tthis.rearrangeEntries(2);\n\t\t}\n\t\telse {\n\t\t\t//tablet landscape + desktop\n\t\t\tthis.rearrangeEntries(3);\n\t\t}\n\t}\n\n\trearrangeEntries(cols) {\n\t\t// Log.fn(\"EntriesNavigation | rearrangeEntries\");\n\t}\n\n\tsecondaryCloseHandler() {\n\t\tthis.controlSecondaryNavigation(false);\n\t}\n\n}\n\nexport default EntriesNavigation;\n","import View from '../view';\nimport debounce from 'debounce';\n\nclass FacebookPageFeed extends View {\n\n\tconstructor(el){\n super(el);\n this.el = el;\n this.FBready = false;\n\n // Listen to render event to make sure we can manipulate it\n window.addEventListener('resize', debounce(() => this.handleResize(), 300));\n\n window.fbAsyncInit = () => {\n FB.Event.subscribe('xfbml.render', () => {\n this.FBready = true;\n if (!this.fbPageEl) this.fbPageEl = el.querySelector('.fb-page');\n if (!this.iFrameWrapper) this.iFrameWrapper = this.fbPageEl.firstElementChild;\n if (!this.iframe) this.iframe = el.querySelector('iframe');\n this.handleResize();\n });\n }\n }\n\n handleResize() {\n if (!this.FBready) return;\n const w = this.el.offsetWidth;\n if (w === this.currentWidth) return;\n this.currentWidth = w;\n\n this.fbPageEl.setAttribute('data-width', w);\n this.fbPageEl.setAttribute('data-height', w);\n this.iframe.style.width = `${w}px`;\n this.iframe.style.height = `${w}px`;\n this.iFrameWrapper.style.width = `${w}px`;\n this.iFrameWrapper.style.height = `${w}px`;\n if (FB) FB.XFBML.parse();\n }\n\n}\n\nexport default FacebookPageFeed;\n","class FilterButtons {\n\n\tconstructor(el) {\n\t\tthis.el = el;\n\n\t\tthis.labelRefId = this.el.dataset.labelid;\n\n\t\tif ( this.labelRefId.length > 0 ) {\n\t\t\tthis.labelRef = document.querySelector('#'+this.labelRefId);\n\t\t}\n\n\t\tthis.buttons = this.el.querySelectorAll('.button');\n\t\tthis.toggleAllButton = this.el.querySelector('[data-all]');\n\n\t\t[...this.buttons].map((button)=>{\n\t\t\tbutton.addEventListener('click',this.toggleFilterButton.bind(this) );\n\t\t});\n\t}\n\n\n\ttoggleFilterButton(event) {\n\t\tvar selectedCount = 0;\n\n\t\tvar isAllButton = event.currentTarget.dataset.all ? true : false;\n\t\tif ( isAllButton ) {\n\t\t\t[...this.buttons].map((button)=>{\n\t\t\t\tbutton.classList.remove('is-active');\n\t\t\t});\n\t\t}\n\t\telse {\n\t\t\tthis.toggleAllButton.classList.remove('is-active');\n\t\t}\n\t\tevent.currentTarget.classList.toggle('is-active');\n\n\t\tsetTimeout(function() {\n\t\t\tselectedCount = this.el.querySelectorAll('.button.is-active').length;\n\t\t\tif ( isAllButton ) selectedCount = 0;\n\n\t\t\tif ( this.labelRef instanceof HTMLElement ) {\n\t\t\t\tthis.labelRef.textContent = selectedCount + \" valgt\";\n\t\t\t}\n\t\t\tif ( selectedCount == 0 ) {\n\t\t\t\tthis.labelRef.textContent = \"\";\n\t\t\t}\n\t\t}.bind(this),50);\n\t}\n}\n\nexport default FilterButtons;\n","import flatpickr from \"flatpickr/dist/flatpickr\";\nimport { Danish } from \"../vendor/flatpickr/da\";\nimport Emitter from \"./emitter\";\nimport View from \"../view\";\nimport cuid from \"cuid\";\nimport { html, render } from \"es5-lit-html\";\n\nclass Forms extends View {\n\tconstructor(el) {\n\t\tsuper(el);\n\n\t\tlet formFields = this.el.querySelectorAll(\".form__field\");\n\n\t\t[...formFields].map(elem => {\n\t\t\tif (!elem.classList.contains(\"is-bound\")) {\n\t\t\t\tif (elem.classList.contains(\"form__field--select\")) {\n\t\t\t\t\tif (!elem.classList.contains(\"js--select-multiple\")) {\n\t\t\t\t\t\tnew Select(elem);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (elem.classList.contains(\"form__field--radio\")) {\n\t\t\t\t\tnew Radio(elem);\n\t\t\t\t}\n\t\t\t\tif (elem.classList.contains(\"form__field--textarea\")) {\n\t\t\t\t\tnew Textarea(elem);\n\t\t\t\t}\n\t\t\t\tif (elem.classList.contains(\"form__field--checkbox\")) {\n\t\t\t\t\tnew CheckBox(elem);\n\t\t\t\t}\n\t\t\t\tif (elem.classList.contains(\"form__field--text\")) {\n\t\t\t\t\tnew Text(elem);\n\t\t\t\t}\n\t\t\t\tif (elem.classList.contains(\"form__field--file\")) {\n\t\t\t\t\tnew FileUpload(elem);\n\t\t\t\t}\n\t\t\t\tif (elem.classList.contains(\"form__field--date\")) {\n\t\t\t\t\tnew DatePicker(elem);\n\t\t\t\t}\n\t\t\t\tif (elem.classList.contains(\"js--select-multiple\")) {\n\t\t\t\t\tnew MultipleSelect(elem);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n\n//Select\nclass Select {\n\tconstructor(el) {\n\t\tthis.el = el;\n\n\t\tthis.el.classList.add(\"is-bound\");\n\t\tthis.formItem = this.el.querySelector(\".form__item\");\n\n\t\tthis.formItem.addEventListener(\"focus\", this.onFocus.bind(this));\n\t\tthis.formItem.addEventListener(\"blur\", this.onBlur.bind(this));\n\t\tthis.formItem.addEventListener(\"change\", this.onChange.bind(this));\n\t\tthis.formItem.addEventListener(\"select\", this.onSelect.bind(this));\n\t}\n\n\tonFocus() {\n\t\tif (this.el.classList.contains(\"is-disabled\")) return;\n\t\tthis.el.classList.add(\"has-focus\");\n\t\tthis.el.classList.add(\"is-filled\");\n\t}\n\n\tonChange() {\n\t\tthis.formItem.blur();\n\t\tthis.onBlur();\n\t}\n\n\tonSelect() {}\n\n\tonBlur() {\n\t\tthis.el.classList.remove(\"has-focus\");\n\t\tif (\n\t\t\tthis.formItem.options[this.formItem.selectedIndex].text == \"default\"\n\t\t) {\n\t\t\tthis.el.classList.remove(\"is-filled\");\n\t\t}\n\t}\n}\n\n//Radio\nclass Radio {\n\tconstructor(el) {\n\t\tthis.el = el;\n\n\t\tthis.el.classList.add(\"is-bound\");\n\t\tthis.formItem = this.el.querySelector(\".form__item\");\n\t\tEmitter.on(\"radio:change\", this.onChange.bind(this));\n\n\t\tthis.formItem.addEventListener(\"click\", this.onClick.bind(this));\n\t}\n\n\tonClick(e) {\n\t\tEmitter.trigger(\"radio:change\", e, this.formItem.name);\n\t}\n\n\tonChange(e, name) {\n\t\tif (this.formItem.name === name) {\n\t\t\tthis.el.classList.toggle(\"is--checked\", this.formItem.checked);\n\t\t}\n\t}\n}\n\n//CheckBox\nclass CheckBox {\n\tconstructor(el) {\n\t\tthis.el = el;\n\t\tthis.formItem = this.el.querySelector(\".form__item\");\n\n\t\tthis.el.classList.add(\"is-bound\");\n\t\tthis.formItem.addEventListener(\"click\", this.onClick.bind(this));\n\t}\n\n\tonClick(e) {}\n}\n\n//Textarea\nclass Textarea {\n\tconstructor(el) {\n\t\tthis.el = el;\n\n\t\tthis.el.classList.add(\"is-bound\");\n\t\tthis.formItem = this.el.querySelector(\".form__item\");\n\t\tthis.minHeight = this.formItem.scrollHeight;\n\t\tthis.maxHeight = 150;\n\n\t\tthis.formItem.addEventListener(\"focus\", this.onFocus.bind(this));\n\t\tthis.formItem.addEventListener(\"blur\", this.onBlur.bind(this));\n\t\tthis.formItem.addEventListener(\"input\", this.adjustHeight.bind(this));\n\n\t\twindow.addEventListener(\"resize\", this.adjustHeight.bind(this));\n\n\t\t// we adjust height to the initial content\n\t\tthis.adjustHeight();\n\t}\n\n\tonFocus() {\n\t\tif (this.el.classList.contains(\"is-disabled\")) return;\n\t\tthis.el.classList.add(\"has-focus\");\n\t\tthis.el.classList.add(\"is-filled\");\n\t}\n\n\tonBlur() {\n\t\tthis.el.classList.remove(\"has-focus\");\n\t\tif (this.formItem.value.length == 0)\n\t\t\tthis.el.classList.remove(\"is-filled\");\n\t}\n\n\tadjustHeight() {\n\t\t// compute the height difference which is caused by border and outline\n\t\tvar outerHeight = parseInt(\n\t\t\twindow.getComputedStyle(this.formItem).height,\n\t\t\t10\n\t\t);\n\t\tvar diff = outerHeight - this.formItem.clientHeight;\n\n\t\t// set the height to 0 in case of it has to be shrinked\n\t\tthis.formItem.style.height = 0;\n\n\t\t// set the correct height\n\t\t// el.scrollHeight is the full height of the content, not just the visible part\n\t\tthis.formItem.style.height =\n\t\t\tMath.min(\n\t\t\t\tthis.maxHeight,\n\t\t\t\tMath.max(this.minHeight, this.formItem.scrollHeight + diff)\n\t\t\t) + \"px\";\n\n\t\tEmitter.trigger(\"textarea:resize\");\n\t}\n}\n\n//Text\nclass Text {\n\tconstructor(el) {\n\t\tthis.el = el;\n\n\t\tthis.el.classList.add(\"is-bound\");\n\t\tthis.formItem = this.el.querySelector(\".form__item\");\n\n\t\tthis.formItem.addEventListener(\"focus\", this.onFocus.bind(this));\n\t\tthis.formItem.addEventListener(\"blur\", this.onBlur.bind(this));\n\t}\n\n\tonFocus() {\n\t\tif (this.el.classList.contains(\"is-disabled\")) return;\n\t\tthis.el.classList.add(\"has-focus\");\n\t\tthis.el.classList.add(\"is-filled\");\n\t}\n\n\tonBlur() {\n\t\tthis.el.classList.remove(\"has-focus\");\n\t\tif (this.formItem.value.length == 0)\n\t\t\tthis.el.classList.remove(\"is-filled\");\n\t}\n}\n\n//FileUpload\nclass FileUpload {\n\tconstructor(el) {\n\t\tthis.el = el;\n\n\t\tthis.el.classList.add(\"is-bound\");\n\t\tthis.formItem = this.el.querySelector(\".form__item\");\n\t\tthis.multipleCaption = this.formItem.getAttribute(\n\t\t\t\"data-multiplecaption\"\n\t\t);\n\t\tthis.fileNames = this.find(\".file-names\");\n\n\t\tthis.formItem.addEventListener(\"change\", this.changeHandle.bind(this));\n\t}\n\n\tchangeHandler(event) {\n\t\tvar fileName = \"\";\n\t\tvar fileList = this.formItem.files;\n\t\tif (fileList && fileList.length > 1) {\n\t\t\tfileName = (this.multipleCaption || \"\").replace(\n\t\t\t\t\"{count}\",\n\t\t\t\tfileList.length\n\t\t\t);\n\t\t} else {\n\t\t\tfileName = event.target.value.split(\"\\\\\").pop();\n\t\t}\n\n\t\tif (fileName) this.fileNames.text = fileName;\n\t}\n}\n\nclass DatePicker {\n\tconstructor(el) {\n\t\tthis.el = el;\n\t\tthis.options = Object.assign({ locale: Danish }, this.el.dataset);\n\t\tthis.calendar = flatpickr(\n\t\t\tthis.el.querySelector(\".form__item\"),\n\t\t\tthis.options\n\t\t);\n\t}\n}\n\nclass MultipleSelect {\n\tconstructor(el) {\n\t\tthis.el = el;\n\n\t\tthis.el.classList.add(\"is-bound\");\n\t\tthis.container = this.el.querySelector(\".select-multiple-container\");\n\t\tthis.hiddenSelect = this.el.querySelector(\".hidden-select\");\n\n\t\tthis.controllerId = cuid();\n\n\t\tthis.selectedItems = [];\n\n\t\trender(this.render(), this.container);\n\n\t\tthis.list = this.el.querySelector(\".dropdown__list\");\n\t\tthis.triggerBtn = this.el.querySelector(\".form__item\");\n\t\tthis.listContainer = this.el.querySelector(\".dropdown__list-container\");\n\t\tthis.dropdownArrow = this.el.querySelector(\".dropdown__arrow\");\n\t\tthis.listItems = this.el.querySelectorAll(\".dropdown__list-item\");\n\t\tthis.selectAllBtn = this.el.querySelector(\".select-all\");\n\t\tthis.clearAllBtn = this.el.querySelector(\".clear-all\");\n\t\tthis.initialLabel = this.el.querySelector(\n\t\t\t\".form__label__text\"\n\t\t).innerText;\n\t\tthis.isOpen = false;\n\n\t\t[...this.hiddenSelect.options].forEach(option => {\n\t\t\tif (option.selected === true) {\n\t\t\t\tthis.selectedItems.push(option.dataset.id);\n\t\t\t}\n\t\t});\n\t\tthis.triggerBtn.id = this.controllerId;\n\n\t\tthis.selectText = this.el.querySelector(\".select-text\");\n\n\t\tthis.listItemIds = [];\n\n\t\t// Add each list item's id to the listItems array\n\t\tthis.listItems.forEach(item => this.listItemIds.push(item.dataset.id));\n\n\t\tthis.addEvents();\n\t}\n\n\taddEvents() {\n\t\tthis.setSelectedListItem();\n\t\t// Init dropdown\n\t\tthis.triggerBtn.addEventListener(\"click\", e =>\n\t\t\tthis.toggleListVisibility(e)\n\t\t);\n\n\t\tthis.selectAllBtn.addEventListener(\"click\", e => {\n\t\t\tthis.selectAllOptions(e);\n\t\t});\n\t\tthis.clearAllBtn.addEventListener(\"click\", e => {\n\t\t\tthis.clearAllOptions(e);\n\t\t});\n\t\tthis.listContainer.addEventListener(\"transitionend\", () => {\n\t\t\tthis.listContainer.classList.toggle(\"is-hidden\", !this.isOpen);\n\t\t});\n\t\t// key events\n\t\twindow.addEventListener(\"keydown\", this.handleKeys.bind(this), false);\n\t\tdocument.addEventListener(\n\t\t\t\"click\",\n\t\t\te => {\n\t\t\t\tif (\n\t\t\t\t\tthis.isOpen &&\n\t\t\t\t\t!e.target.closest(\".form__field--select-multiple\")\n\t\t\t\t) {\n\t\t\t\t\tthis.closeList();\n\t\t\t\t}\n\t\t\t},\n\t\t\tfalse\n\t\t);\n\t\t// checkboxes\n\t\tthis.el.addEventListener(\"click\", e => {\n\t\t\t// checkbox click\n\t\t\tif (\n\t\t\t\te.target.type === \"checkbox\" &&\n\t\t\t\te.target.classList.contains(\"form__item\")\n\t\t\t) {\n\t\t\t\tconst item = e.target;\n\t\t\t\tif (!this.selectedItems.includes(item.id)) {\n\t\t\t\t\tthis.selectedItems.push(item.id);\n\t\t\t\t\t[...this.hiddenSelect.options].forEach(option => {\n\t\t\t\t\t\tif (option.dataset.id === item.id) {\n\t\t\t\t\t\t\toption.setAttribute(\"selected\", true);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tthis.selectedItems.splice(\n\t\t\t\t\t\tthis.selectedItems.indexOf(item.id),\n\t\t\t\t\t\t1\n\t\t\t\t\t);\n\t\t\t\t\t[...this.hiddenSelect.options].forEach(option => {\n\t\t\t\t\t\tif (option.dataset.id === item.id) {\n\t\t\t\t\t\t\toption.removeAttribute(\"selected\", true);\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tthis.setSelectedListItem(e);\n\t\t\t\tthis.bundleBtnColorToggle(e);\n\t\t\t}\n\t\t});\n\t}\n\n\thandleKeys(e) {\n\t\tif (!this.isOpen) return;\n\t\t// e.preventDefault();\n\t\tswitch (e.keyCode) {\n\t\t\tcase ENTER_KEY_CODE:\n\t\t\t\tif (e.target.id === this.controllerId) {\n\t\t\t\t\twindow.requestAnimationFrame(() => {\n\t\t\t\t\t\tthis.setSelectedListItem(e);\n\t\t\t\t\t\tthis.bundleBtnColorToggle(e);\n\t\t\t\t\t\tthis.closeList();\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tthis.selectListItem(e);\n\t\t\t\t}\n\t\t\t\treturn;\n\t\t\tcase SPACEBAR_KEY_CODE[1]:\n\t\t\t\tif (e.target.classList.contains(\"dropdown__list-item\")) {\n\t\t\t\t\tthis.selectListItem(e);\n\t\t\t\t}\n\n\t\t\tcase DOWN_ARROW_KEY_CODE:\n\t\t\t\tthis.focusNextListItem(DOWN_ARROW_KEY_CODE);\n\t\t\t\treturn;\n\n\t\t\tcase UP_ARROW_KEY_CODE:\n\t\t\t\tthis.focusNextListItem(UP_ARROW_KEY_CODE);\n\t\t\t\treturn;\n\n\t\t\tcase ESCAPE_KEY_CODE:\n\t\t\t\tthis.closeList();\n\t\t\t\treturn;\n\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\t}\n\tselectListItem(e) {\n\t\te.preventDefault();\n\t\tconst item = e.target;\n\t\tconst checkbox = item.querySelector(\"input\");\n\t\tif (!this.selectedItems.includes(item.dataset.id)) {\n\t\t\tthis.selectedItems.push(item.dataset.id);\n\t\t\t[...this.hiddenSelect.options].forEach(option => {\n\t\t\t\tif (option.dataset.id === item.dataset.id) {\n\t\t\t\t\toption.setAttribute(\"selected\", true);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tif (checkbox) {\n\t\t\t\tcheckbox.checked = true;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.selectedItems.splice(\n\t\t\t\tthis.selectedItems.indexOf(item.dataset.id),\n\t\t\t\t1\n\t\t\t);\n\t\t\t[...this.hiddenSelect.options].forEach(option => {\n\t\t\t\tif (option.dataset.id === item.dataset.id) {\n\t\t\t\t\toption.removeAttribute(\"selected\", true);\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (checkbox) {\n\t\t\t\tcheckbox.checked = false;\n\t\t\t}\n\t\t}\n\t\tthis.setSelectedListItem(e);\n\t\tthis.bundleBtnColorToggle(e);\n\t}\n\tbundleBtnColorToggle(e) {\n\t\tthis.selectAllBtn.disabled =\n\t\t\tthis.selectedItems.length === this.listItems.length;\n\t\tthis.clearAllBtn.disabled = this.selectedItems.length === 0;\n\t}\n\n\t// takes an event and updates the currently selected item in the \"select\" box.\n\tsetSelectedListItem(e) {\n\t\tlet ifOneChosenText;\n\t\tthis.listItems.forEach(item => {\n\t\t\tif (this.selectedItems[0] === item.dataset.id) {\n\t\t\t\tifOneChosenText = item.innerText;\n\t\t\t}\n\t\t});\n\n\t\tlet text = \"\";\n\t\tif (this.selectedItems.length > 1) {\n\t\t\ttext = `${this.selectedItems.length} valgt`;\n\t\t} else if (this.selectedItems.length == 1) {\n\t\t\ttext = ifOneChosenText;\n\t\t} else {\n\t\t\ttext = this.initialLabel;\n\t\t}\n\n\t\tthis.selectText.innerText = text.trim();\n\t}\n\n\t// closes the list and updates the aria-expanded value.\n\tcloseList() {\n\t\tthis.isOpen = false;\n\t\tthis.list.classList.remove(\"open\");\n\t\t// this.dropdownArrow.classList.remove(\"expanded\");\n\t\tthis.listContainer.setAttribute(\"aria-expanded\", false);\n\t\tthis.triggerBtn.focus();\n\t}\n\n\t// takes an event. If the Escape key was pressed, close the list. Otherwise, if the user has clicked or pressed the Spacebar or Enter key, toggle the expanded state and update the aria-expanded value accordingly. Finally, if the down or up arrow keys were pressed, focus the next list item.\n\ttoggleListVisibility(e) {\n\t\tthis.isOpen = !this.isOpen;\n\t\tif (this.isOpen) {\n\t\t\tthis.listContainer.classList.remove(\"is-hidden\");\n\t\t}\n\t\twindow.requestAnimationFrame(() => {\n\t\t\tthis.listContainer.setAttribute(\"aria-expanded\", this.isOpen);\n\t\t});\n\t}\n\n\tselectAllOptions(e) {\n\t\tthis.listItems.forEach(item => {\n\t\t\tconst checkbox = item.querySelector(\"input\");\n\t\t\tif (!this.selectedItems.includes(item.dataset.id)) {\n\t\t\t\tthis.selectedItems.push(item.dataset.id);\n\t\t\t\tcheckbox.checked = true;\n\t\t\t}\n\t\t});\n\t\t[...this.hiddenSelect.options].forEach(option => {\n\t\t\toption.setAttribute(\"selected\", true);\n\t\t});\n\t\tthis.bundleBtnColorToggle(e);\n\t\tthis.setSelectedListItem();\n\t}\n\tclearAllOptions(e) {\n\t\tthis.listItems.forEach(item => {\n\t\t\tconst checkbox = item.querySelector(\"input\");\n\t\t\tif (this.selectedItems.includes(item.dataset.id)) {\n\t\t\t\tthis.selectedItems.splice(\n\t\t\t\t\tthis.selectedItems.indexOf(item.dataset.id),\n\t\t\t\t\t1\n\t\t\t\t);\n\t\t\t\tcheckbox.checked = false;\n\t\t\t}\n\t\t\t[...this.hiddenSelect.options].forEach(option => {\n\t\t\t\toption.removeAttribute(\"selected\", true);\n\t\t\t});\n\t\t});\n\t\tthis.bundleBtnColorToggle();\n\t\tthis.setSelectedListItem();\n\t}\n\n\t/* takes a direction which is either the const DOWN_ARROW_KEY_PRESSED or UP_ARROW_KEY_PRESSED. If the user is currently focused on the \"select\", focus on the first list item. Otherwise we need to find the index of the currently focused list item. This is where the listItemsId array comes in handy. Now that we know where in the list the currently focused item is, we can decide what to do. If the user pressed the down arrow key, and they're not at the last list item, focus on the next list item. If the user pressed the up arrow key, and they're not at the first list item, focus on the previous list item. */\n\tfocusNextListItem(direction) {\n\t\tif (\n\t\t\tdocument.activeElement.id === this.controllerId &&\n\t\t\tdirection !== UP_ARROW_KEY_CODE\n\t\t) {\n\t\t\tthis.list.children[0].focus();\n\t\t} else {\n\t\t\tconst currentActiveElIndex = this.listItemIds.indexOf(\n\t\t\t\tdocument.activeElement.dataset.id\n\t\t\t);\n\n\t\t\tif (direction === DOWN_ARROW_KEY_CODE) {\n\t\t\t\tif (currentActiveElIndex < this.listItemIds.length - 1) {\n\t\t\t\t\tthis.list.children[currentActiveElIndex + 1].focus();\n\t\t\t\t}\n\t\t\t} else if (direction === UP_ARROW_KEY_CODE) {\n\t\t\t\tif (currentActiveElIndex > 0) {\n\t\t\t\t\tthis.list.children[currentActiveElIndex - 1].focus();\n\t\t\t\t}\n\t\t\t\tif (currentActiveElIndex === 0) {\n\t\t\t\t\tthis.triggerBtn.focus();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\trender() {\n\t\treturn html`\n\t\t\t