{"version":3,"file":"index.es.min.js","sources":["../../../packages/helpers/src/props.helpers.js","../../../packages/helpers/src/viewport.helpers.ts","../../../packages/helpers/src/utils.ts","../../../packages/design-system/src/components/detailed-description/detailed-description.js"],"sourcesContent":["const getData = attributes => attributes.find(attribute => attribute.nodeName === 'data')\n\nconst createProps = attributes => {\n const data = getData([...attributes])\n const props = [...attributes]\n .filter(attribute => attribute.nodeName !== 'data')\n .reduce((all, attr) => {\n return { ...all, [attr.nodeName]: attr.nodeValue }\n }, {})\n\n if (isNil(data)) {\n return props\n }\n\n try {\n return { ...props, ...JSON.parse(data.nodeValue) }\n } catch (error) {\n console.log('ERROR: No data', error, data?.nodeValue)\n }\n}\n\nconst isNil = obj => obj === undefined || obj === null\n\nexport const parseBool = value => (!value || value === 'false' ? false : true)\n\nexport default createProps\n","import { BREAKPOINT_M, BREAKPOINT_TABLET } from '@kissui/design-system'\n\nconst viewport = () => {\n const lt = (ref: number) => {\n return window.innerWidth < ref\n }\n\n return {\n get is() {\n const { innerWidth: vw, devicePixelRatio } = window\n return {\n mobile: vw < BREAKPOINT_M,\n mobile_tablet: vw < BREAKPOINT_TABLET,\n tablet: vw >= BREAKPOINT_M && vw < BREAKPOINT_TABLET,\n desktop: vw >= BREAKPOINT_TABLET && devicePixelRatio <= 1,\n retina: vw >= BREAKPOINT_TABLET && devicePixelRatio > 1\n }\n },\n lt\n }\n}\n\nconst helper = viewport()\n\nexport default helper\n","export { waitForSelector } from './waitForSelector'\n\nexport const constants = {\n LEFT: 37,\n UP: 38,\n RIGHT: 39,\n DOWN: 40,\n ESC: 27,\n SPACE: 32,\n ENTER: 13,\n TAB: 9\n}\n\nexport function capitalize(s = '') {\n return s[0].toUpperCase() + s.slice(1)\n}\n\nexport const convertToCamelCase = (str: string): string => {\n const arr = str.match(/[a-z]+|\\d+/gi)\n if (!arr) { return str }\n return arr.map((m, i) => {\n let low = m.toLowerCase()\n if (i !== 0) {\n low = low.split('').map((s, k) => (k === 0 ? s.toUpperCase() : s)).join(\"\")\n }\n return low\n }).join(\"\")\n}\n\nexport function slug(s = '') {\n return s\n .toLowerCase()\n .trim()\n .replace(/\\s+/g, '-') // Replace spaces with -\n .replace(/[^\\w-]+/g, '') // Remove all non-word chars\n .replace(/--+/g, '-') // Replace multiple - with single -\n}\n\nexport function pxToEm(target: number, stripedInnerFontSize = 1) {\n return target / 14 / stripedInnerFontSize + 'em'\n}\n\nexport function percent(target: number) {\n return target + '%'\n}\n\nexport function parseHTML(str: string) {\n const tmp = document.implementation.createHTMLDocument('')\n tmp.body.innerHTML = str\n return tmp.body.childNodes\n}\n\nexport function stripHTML(str: string) {\n const tmp = document.implementation.createHTMLDocument('')\n tmp.body.innerHTML = str\n return (tmp.body.textContent ?? \"\").replace(RegExp('[\\\\s|\\'|\"]', 'g'), '')\n}\n\nexport function makeId(length: number) {\n var result = ''\n var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'\n var charactersLength = characters.length\n for (var i = 0; i < length; i++) {\n result += characters.charAt(Math.floor(Math.random() * charactersLength))\n }\n return result\n}\n\nexport function removeEmptyValues(obj: { [key: string]: any }): { [key: string]: any } {\n for (let key in obj) {\n if (obj[key] === null || obj[key] === undefined || obj[key] === '') {\n delete obj[key]\n }\n }\n\n return obj\n}\n\nexport function makeHash(str: string) {\n var hash = 0,\n i,\n chr\n if (!str) {\n return hash\n }\n for (i = 0; i < str.length; i++) {\n chr = str.charCodeAt(i)\n hash = (hash << 5) - hash + chr\n hash |= 0 // Convert to 32bit integer\n }\n return 'id-' + hash\n}\n\nexport function getHashLink(link: string) {\n let linkHash = link\n let linkNoHash = link\n if (link.indexOf('#') !== -1) {\n linkNoHash = link.replace('#', '')\n } else {\n linkHash = '#' + link\n }\n\n return { linkNoHash, linkHash }\n}\n\nexport function lazyLoad(node: Element, attribute: string, value: any, url: string) {\n const CLASSNAME_OUT_OF_SCREEN = 'lazy-load'\n const CLASSNAME_IN_SCREEN = 'lazy-loaded'\n const CLASSNAME_ON_ERROR = 'lazy-loaded-error'\n\n const isOldIOS = () => {\n var agent = window.navigator.userAgent,\n start = agent.indexOf('OS ')\n if ((agent.indexOf('iPhone') > -1 || agent.indexOf('iPad') > -1) && start > -1) {\n return window.Number(agent.substr(start + 3, 3).replace('_', '.')) < 14\n }\n return false\n }\n\n const inViewPort = (attribute: string, value: any) => {\n node.setAttribute(attribute, value)\n\n const cb = () => node.classList.add(CLASSNAME_IN_SCREEN)\n\n if (url) {\n const img = new Image()\n img.src = url\n img.onload = cb\n img.onerror = () => {\n cb()\n node.classList.add(CLASSNAME_ON_ERROR)\n throw new Error(`Image ${url} cannot be loaded`)\n }\n\n return\n }\n\n cb()\n }\n\n if (/Trident\\/|MSIE/.test(window.navigator.userAgent) || isOldIOS()) {\n inViewPort(attribute, value)\n } else {\n if ('IntersectionObserver' in window) {\n node.classList.add(CLASSNAME_OUT_OF_SCREEN)\n let lazyBackgroundObserver = new IntersectionObserver(function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n inViewPort(attribute, value)\n lazyBackgroundObserver.unobserve(entry.target)\n }\n })\n })\n lazyBackgroundObserver.observe(node)\n } else {\n inViewPort(attribute, value)\n }\n }\n}\n\nexport function lazyLoadCallback(node: Element, cb: () => void) {\n const isOldIOS = () => {\n var agent = window.navigator.userAgent,\n start = agent.indexOf('OS ')\n if ((agent.indexOf('iPhone') > -1 || agent.indexOf('iPad') > -1) && start > -1) {\n return window.Number(agent.substr(start + 3, 3).replace('_', '.')) < 14\n }\n return false\n }\n\n if (/Trident\\/|MSIE/.test(window.navigator.userAgent) || isOldIOS()) {\n cb()\n } else {\n if ('IntersectionObserver' in window) {\n let lazyBackgroundObserver = new IntersectionObserver(\n function (entries) {\n entries.forEach(function (entry) {\n if (entry.isIntersecting) {\n cb()\n lazyBackgroundObserver.unobserve(entry.target)\n }\n })\n },\n { rootMargin: '150% 0px' }\n )\n lazyBackgroundObserver.observe(node)\n }\n }\n}\n\n// Debounce\nexport function debounce<T>(func: (v: T) => void, time = 100) {\n let timer: number\n return function (event: T) {\n if (timer) {\n window.clearTimeout(timer)\n }\n timer = window.setTimeout(func, time, event)\n }\n}\n\n// isIE - to check for internet explorer\nexport function isIE() {\n let ua = window.navigator.userAgent,\n isIE = /MSIE|Trident/.test(ua)\n\n return isIE\n}\n\n// Load external script\nexport const loadExternalScript = ({\n src,\n callback = null,\n async = false,\n defer = false,\n module = false,\n id = ''\n}: {\n src: string;\n callback: null | GlobalEventHandlers[\"onload\"]\n module: boolean,\n defer: boolean,\n async: boolean,\n id: string\n}) => {\n const script = document.createElement('script')\n script.type = module ? 'module' : 'text/javascript'\n script.src = src\n id ? (script.id = id) : false // add id attribute only if passed\n if (typeof callback === 'function') {\n script.onload = callback\n }\n script.async = async\n script.defer = defer\n document.body.appendChild(script)\n}\n\n// Load external css\nexport const loadExternalCss = ({ src }: { src: string }) => {\n const script = document.createElement('link')\n script.rel = 'stylesheet'\n script.href = src\n document.body.appendChild(script)\n}\n// Lazy load vendor script\nexport const lazyLoadVendorScript = (handler, el) => {\n const observer = new IntersectionObserver(handler)\n observer.observe(el)\n}\n\n/**\n * Replaces variable inside a given string\n * Each variable have to be enclosed between stChr and enChr\n * The values have to be contained in the vars object, they key must match\n * example :\n * txt : 'See {resultsLength} Results'\n * vars : {resultsLength:'30'}\n * stChr : '{'\n * enChr : '}'\n *\n * will return : 'See 30 Results'\n *\n * @param {string} txt\n * @param {object} vars\n * @param {string} stChr\n * @param {string} enChr\n */\nexport function interpolate(txt: string, vars: Record<string, null | undefined | string>, stChr: string, enChr: string) {\n let curIdx = 0\n\n while (txt) {\n const stIdx = txt.indexOf(stChr, curIdx)\n if (stIdx === -1) {\n break\n }\n const enIdx = txt.indexOf(enChr, stIdx + 1)\n if (enIdx === -1) {\n break\n }\n const hashId = txt.substring(stIdx + stChr.length, enIdx)\n if (vars[hashId] != null) {\n txt = txt.substr(0, stIdx) + vars[hashId] + txt.substr(enIdx + enChr.length)\n curIdx = stIdx\n } else {\n curIdx = enIdx\n }\n }\n return txt\n}\n\n/**\n * Find in container element, add height to equal size of element\n * @param container css path where my element is contain e.g. `.c-container`\n * @param el css path of elements to equalized\n */\nexport const equalHeight = (containerSelector: string, el: string, elementScope: HTMLElement) => {\n const container = elementScope.querySelector<HTMLElement>(containerSelector)\n if (!container) {\n return\n }\n\n const items = container.querySelectorAll<HTMLElement>(el)\n let max = -1\n\n for (let i = 0; i < [...items].length; i++) {\n const item = [...items][i]\n let h = item.offsetHeight\n max = h > max ? h : max\n }\n\n if (max <= 0) {\n return\n }\n\n for (let i = 0; i < [...items].length; i++) {\n const item = [...items][i]\n item.style.height = `${max}px`\n }\n}\n\nexport const stringifyCurlyQuote = (data: {}) => JSON.stringify(data).replace(\"'\", '’')\n\nexport const stringifyForAttribute = (data = {}) => {\n return escapeHtml(JSON.stringify(data))\n}\n\n/**\n * This function is included instead of sanitizeString because for\n * inserting HTML into innerHTML we need to make sure all HTML\n * entities are escaped.\n */\nexport const escapeHtml = (text: string) => {\n const map = {\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": '''\n } as { [s: string]: string }\n\n return text.replace(/[&<>\"']/g, (m) => map[m])\n}\n\n/**\n * Because setting attributes escapes more than the characters above and then preact also\n * escapes text we need a more complete way of unescaping all html entities (not just the ones\n * above)\n */\nconst domParser = new DOMParser()\nexport const unescapeHtml = (text: string) => {\n return domParser.parseFromString(text, \"text/html\").body.textContent\n}\n\nexport const sanitizeString = (data: {}) => {\n if (!data) {\n return ''\n }\n\n return data.toString().replace(/\"/g, '"').replace(/'/g, ''')\n}\n\nexport const stripTags = (s: string) => {\n return (s || '').replace(/(<([^>]+)>)/gi, '')\n}\n\nexport const setAttributes = (element: Element, attrs: Record<string, any>) => {\n for (let key in attrs) {\n element.setAttribute(key, attrs[key])\n }\n return element\n}\n\nexport const getMetaContent = (metaName: string) => {\n const metaTag = document.querySelector(`meta[name=${metaName}]`)\n if (!metaTag) {\n return ''\n }\n return metaTag.getAttribute('content')\n}\n\nexport const isObjectEmpty = (obj: {}) => {\n return Object.keys(obj).length === 0\n}\n","import createProps from '@kissui/helpers/src/props.helpers.js'\nimport viewportHelper from '@kissui/helpers/src/viewport.helpers'\nimport { stringifyForAttribute } from '@kissui/helpers/src/utils'\n\nclass DetailedDescription extends HTMLElement {\n connectedCallback() {\n this.props = createProps(this.attributes)\n this.render()\n }\n\n render() {\n const { campaign, layout, copywriting } = this.props\n const { levels = [] } = copywriting\n\n const { padding_top, padding_bottom, background_color = 'white_1000' } = layout\n\n const levelsAvailable = levels.length && levels.every(({ value }) => value !== 0)\n\n this.innerHTML = `\n <nb-container\n background_color=\"${background_color}\"\n campaign_id=\"${campaign.id}\"\n campaign_name=\"${campaign.name}\"\n campaign_creative=\"${campaign.creative}\"\n campaign_position=\"${campaign.position}\"\n classname=\"${padding_top} ${padding_bottom}\"\n contrast=\"light\">\n\n <div class=\"cb-header\">\n ${this.renderHeader()}\n ${levelsAvailable ? this.renderDescription() : ''}\n </div>\n ${\n levelsAvailable\n ? this.setPropertiesList()\n : `<div class=\"cb-desc cb-no-capsule-prop\">\n ${this.renderDescription()}\n ${this.setPropertiesList()}\n </div>`\n }\n </nb-container>\n `\n }\n\n setPropertiesList() {\n const { sizes, notes } = this.props.copywriting\n\n return `<div class=\"cb-cols\">\n <div class=\"cb-col caption\">\n ${this.renderRoastText()}\n ${this.renderList(sizes)}\n ${this.renderList(notes)}\n </div>\n <div class=\"cb-col\">\n ${this.renderLevels()}\n ${this.renderDetails()}\n </div>\n </div>`\n }\n\n transformRoastLevelToString() {\n const { roast, levels_roast } = this.props.copywriting\n\n if (roast.description < levels_roast.label_light_property) {\n return levels_roast.label_light\n } else if (roast.description < levels_roast.label_medium_property) {\n return levels_roast.label_medium\n } else if (roast.description < levels_roast.label_dark_property) {\n return levels_roast.label_dark\n } else {\n return levels_roast.label_light\n }\n }\n\n renderHeader() {\n const { header_title } = this.props.copywriting\n if (!header_title) {\n return ''\n }\n\n return `<h2 class=\"h-2xl-700\">${header_title}</h2>`\n }\n\n renderDescription() {\n const { description } = this.props.copywriting\n if (!description) {\n return ''\n }\n\n return `<div class=\"description wysiwyg ${\n viewportHelper.is.mobile ? 't-sm-400' : 't-md-400'\n }\">${description}</div>`\n }\n\n renderRoastText() {\n const { roast = {} } = this.props.copywriting\n const { heading, description } = roast\n if (!heading || !description) {\n return ''\n }\n\n return `\n <div class=\"cb-table\">\n <div class=\"cb-row\">\n <p class=\"t-xs-700-sl\">${heading}</p>\n <div class=\"cb-cell is-text\">\n <nb-icon icon=\"24/coffeenote/roasted\"></nb-icon> ${this.transformRoastLevelToString(\n description\n )}\n </div>\n </div>\n </div>\n `\n }\n\n renderList(list) {\n if (!list) {\n return ''\n }\n\n return `<div class=\"cb-cell\">\n <nb-list data='${stringifyForAttribute(list)}'></nb-list>\n </div>`\n }\n\n renderLevels() {\n const { levels } = this.props.copywriting\n\n if (!levels?.length) {\n return ''\n }\n const renderedLevels = levels.reduce(\n (output, level) => `${output}${this.renderLevel(level)}`,\n ''\n )\n if (!renderedLevels) {\n return ''\n }\n return `<div class=\"cb-table\">${renderedLevels}</div>`\n }\n\n renderLevel({ label, value, information }) {\n const { a11y_level_of } = this.props.copywriting\n if (!value) {\n return ''\n }\n return `\n <div class=\"cb-row\">\n <p class=\"t-xs-700-sl\">${label}</p>\n <div class=\"cb-cell\">\n <nb-level value=\"${value}\" a11y_of=\"${a11y_level_of}\"></nb-level>\n </div>\n <nb-tooltip\n content=\"${information}\"\n position=\"top\"\n alignment=\"${viewportHelper.is.mobile ? 'right' : 'center'}\">\n </nb-tooltip>\n </div>\n `\n }\n\n renderDetails() {\n const { details = {} } = this.props.copywriting\n if (!details.heading || !details.text) {\n return ''\n }\n const data = stringifyForAttribute({\n ...details,\n classes: { title: 't-sm-700-sl' }\n })\n return `<nb-collapse data='${data}'></nb-collapse>`\n }\n}\n\ncustomElements.get('nb-detailed-description') ||\n customElements.define('nb-detailed-description', DetailedDescription)\n\nexport default DetailedDescription\n"],"names":["isNil","obj","helper","is","innerWidth","vw","devicePixelRatio","window","mobile","BREAKPOINT_M","mobile_tablet","BREAKPOINT_TABLET","tablet","desktop","retina","lt","ref","stringifyForAttribute","data","escapeHtml","JSON","stringify","text","map","replace","m","DOMParser","DetailedDescription","HTMLElement","connectedCallback","this","props","attributes","find","attribute","nodeName","getData","filter","reduce","all","attr","nodeValue","parse","error","console","log","createProps","render","campaign","layout","copywriting","levels","padding_top","padding_bottom","background_color","levelsAvailable","length","every","value","innerHTML","id","name","creative","position","renderHeader","renderDescription","setPropertiesList","sizes","notes","renderRoastText","renderList","renderLevels","renderDetails","transformRoastLevelToString","roast","levels_roast","description","label_light_property","label_light","label_medium_property","label_medium","label_dark_property","label_dark","header_title","viewportHelper","heading","list","renderedLevels","output","level","renderLevel","label","information","a11y_level_of","details","classes","title","customElements","get","define"],"mappings":"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"}