npm - @iamproperty/components - Versions diffs - 7.8.2--beta3 → 7.8.2--beta4 - Mend

@iamproperty/components 7.8.2--beta3 → 7.8.2--beta4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (200) hide show

package/assets/js/components/video-card/video-card.component.min.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"video-card.component.min.js","sources":["../_global.js","../../modules/card.module.js","../../modules/videos.js","../../modules/modal.js","video-card.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n // Data layer Web component created\n window.dataLayer = window.dataLayer \|\| [];\n window.dataLayer.push({\n event: 'customElementRegistered',\n element: componentName,\n });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n // Data layer Web component created\n window.dataLayer = window.dataLayer \|\| [];\n window.dataLayer.push({\n event: 'customElementAdded',\n element: componentName,\n });\n trackEvents.forEach((eventName) => {\n component.addEventListener(eventName, function (event) {\n const eventDetails = {\n event: eventName,\n element: componentName,\n target: event.target,\n };\n Object.keys(event.detail).forEach((eventKey) => {\n const eventDetail = event.detail[eventKey];\n eventDetails[eventKey] = eventDetail;\n });\n window.dataLayer.push(eventDetails);\n });\n });\n return true;\n};\n","export const cardHTML = `<div class=\"wrapper\">\n <div class=\"card__head\" part=\"head\">\n <slot name=\"head\"></slot>\n </div>\n <div class=\"card__badges\"><slot name=\"badges\"></slot></div>\n <slot name=\"checkbox\" class=\"activate-prevent-hover\"></slot>\n <div class=\"card__body\" part=\"body\">\n <slot></slot>\n <slot name=\"secondary\" part=\"secondary\"></slot>\n </div>\n <div class=\"card__details\" part=\"details\">\n <slot name=\"details\"></slot>\n </div>\n <div class=\"card__footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n </div>\n</div>`;\nexport const setupCard = (cardComponent) => {\n cardComponent.classList.add('card');\n const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n const cardBody = cardComponent.shadowRoot.querySelector('.card__body');\n if (cardComponent.hasAttribute('data-image')) {\n cardHead.innerHTML += `<img src=\"${cardComponent.getAttribute('data-image')}\" alt=\"\" loading=\"lazy\" part=\"image\" />`;\n }\n // Inset the HTML for the data total or icon fallback\n if (cardComponent.hasAttribute('data-total')) {\n if (!(cardBody === null \|\| cardBody === void 0 ? void 0 : cardBody.querySelector('.card__total')))\n cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\">${cardComponent.getAttribute('data-total')}</div>`);\n else {\n const cardTotal = cardBody === null \|\| cardBody === void 0 ? void 0 : cardBody.querySelector('.card__total');\n if (cardTotal)\n cardTotal.innerHTML = cardComponent.getAttribute('data-total');\n }\n }\n else if (cardComponent.querySelector('[slot=\"total-icon\"]')) {\n cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\"><slot name=\"total-icon\"></slot></div>`);\n }\n if (!cardComponent.querySelector('[slot=\"badges\"]')) {\n cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');\n }\n else {\n cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');\n }\n};\n","var __awaiter = (this && this.__awaiter) \|\| function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P \|\| (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments \|\| [])).next());\n });\n};\nconst videoSupport = (body) => __awaiter(void 0, void 0, void 0, function* () {\n if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const loaded = yield loadYouTubeScripts();\n }\n setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {\n if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const loaded = yield loadYouTubeScripts();\n }\n }), '2000');\n body.addEventListener('click', (event) => __awaiter(void 0, void 0, void 0, function* () {\n let target = event.target.closest('.youtube-link[data-youtube]');\n if (!target) {\n target = event.target.closest('.vimeo-link[data-vimeo]');\n }\n if (target && target.hasAttribute('data-youtube')) {\n event.preventDefault();\n if (!document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const loaded = yield loadYouTubeScripts();\n }\n const link_id = 'youtube-' + target.getAttribute('data-youtube');\n if (!document.getElementById(`${link_id}-dialog`)) {\n document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n }\n const dialog = document.getElementById(`${link_id}-dialog`);\n const embed = document.getElementById(link_id);\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'YoutTube', ID: target.getAttribute('data-youtube') },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n createYoutTubeVideo(embed, target.getAttribute('data-youtube'));\n dialog.showModal();\n dialog.addEventListener('close', () => {\n if (window.player[embed.getAttribute('id')] &&\n typeof window.player[embed.getAttribute('id')].pauseVideo == 'function') {\n window.player[embed.getAttribute('id')].pauseVideo();\n }\n const customEvent = new CustomEvent('close-video', {\n detail: { 'Video Type': 'YoutTube', ID: target.getAttribute('data-youtube') },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n });\n }\n else if (target && target.hasAttribute('data-vimeo')) {\n event.preventDefault();\n const link_id = 'vimeo-' + target.getAttribute('data-youtube');\n if (!document.getElementById(`${link_id}-dialog`)) {\n document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n }\n const dialog = document.getElementById(`${link_id}-dialog`);\n const embed = document.getElementById(link_id);\n const videoId = target.getAttribute('data-vimeo');\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'Vimeo', ID: videoId },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n if (!embed.querySelector('iframe'))\n embed.innerHTML = `<iframe src=\"https://player.vimeo.com/video/${videoId}?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;\n dialog.showModal();\n dialog.addEventListener('close', () => {\n embed.innerHTML = ``; // Remove the video since we cant pause it\n const customEvent = new CustomEvent('close-video', {\n detail: { 'Video Type': 'Vimeo', ID: target.getAttribute('data-vimeo') },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n });\n }\n }));\n});\nexport const videoHTML = `<div class=\"video-wrapper\">\n <slot name=\"video\"></slot>\n <picture>\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" lazy=\"\" />\n </picture>\n <button class=\"btn btn-compact fa-play m-0 colour-success\">Play</button>\n</div>`;\nexport const loadYouTubeScripts = () => __awaiter(void 0, void 0, void 0, function* () {\n return new Promise((resolve, reject) => {\n const image = new Image();\n image.onload = function () {\n // This code loads the IFrame Player API code asynchronously.\n const tag = document.createElement('script');\n tag.src = 'https://www.youtube.com/iframe_api';\n const firstScriptTag = document.getElementsByTagName('script')[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n document.body.classList.add('youtubeLoaded');\n resolve(true);\n };\n image.onerror = function () {\n reject(false);\n };\n image.src = 'https://youtube.com/favicon.ico';\n });\n});\nexport const createYoutTubeVideo = (target, video_id) => __awaiter(void 0, void 0, void 0, function* () {\n if (typeof window.player == 'undefined') {\n window.player = [];\n }\n //const link_id = target.getAttribute('id');\n if (typeof window.player[video_id] != 'undefined' && typeof window.player[video_id].pauseVideo == 'function') {\n window.player[video_id].playVideo();\n return false;\n }\n console.log('hi2');\n // This function creates an <iframe> (and YouTube player) after the API code downloads.\n //function onYouTubeIframeAPIReady() {\n window.player[video_id] = new YT.Player(video_id, {\n height: '100%',\n width: '100%',\n videoId: video_id,\n playerVars: {\n modestbranding: 1,\n playsinline: 1,\n rel: 0,\n showinfo: 0,\n },\n events: {\n onReady: onPlayerReady,\n onStateChange: onPlayerStateChange,\n },\n });\n //}\n //onYouTubeIframeAPIReady();\n // The API will call this function when the video player is ready.\n function onPlayerReady(event) {\n // Play the video straight away\n event.target.playVideo();\n }\n // The API calls this function when the player's state changes.\n // The function indicates that when playing a video (state=1)\n let done = false;\n function onPlayerStateChange(event) {\n if (event.data == YT.PlayerState.PLAYING && !done) {\n const link = document.getElementById(video_id);\n link.classList.add('player-ready');\n done = true;\n }\n }\n});\nexport const openYoutubeVideo = (component) => __awaiter(void 0, void 0, void 0, function* () {\n const embed = component.shadowRoot.querySelector('.embed');\n const youtubeId = component.getAttribute('data-youtube');\n let loaded;\n if (!document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n loaded = yield loadYouTubeScripts();\n }\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'YoutTube', ID: youtubeId },\n });\n component.dispatchEvent(customEvent);\n const interval = setInterval(() => {\n if (typeof YT != \"undefined\") {\n clearInterval(interval);\n createYoutTubeVideo(embed, youtubeId);\n }\n }, 200);\n // Limit the number of calls\n setTimeout(function () {\n clearInterval(interval);\n }, 2000);\n});\nexport const openVimeoVideo = (component) => __awaiter(void 0, void 0, void 0, function* () {\n const embed = component.querySelector('.embed');\n const vimeoId = component.getAttribute('data-vimeo');\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'Vimeo', ID: vimeoId },\n });\n component.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n if (!embed.querySelector('iframe'))\n embed.innerHTML = `<iframe src=\"https://player.vimeo.com/video/${vimeoId}?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;\n});\nexport default videoSupport;\n","export const openModal = (modal) => {\n var _a;\n const dialog = modal.closest('dialog') \|\| ((_a = modal.shadowRoot) === null \|\| _a === void 0 ? void 0 : _a.querySelector('dialog'));\n const id = modal.hasAttribute('id') ? modal.getAttribute('id') : 'unknown';\n dialog === null \|\| dialog === void 0 ? void 0 : dialog.showModal();\n dialog === null \|\| dialog === void 0 ? void 0 : dialog.focus();\n const closeEvent = new CustomEvent('modal-opened', {\n bubbles: true,\n cancelable: true,\n detail: { modalId: id },\n });\n modal.dispatchEvent(closeEvent);\n window.dataLayer = window.dataLayer \|\| [];\n window.dataLayer.push({\n event: 'openModal',\n id: id,\n });\n};\nexport const closeModal = (modal) => {\n var _a;\n const dialog = modal.closest('dialog') \|\| ((_a = modal.shadowRoot) === null \|\| _a === void 0 ? void 0 : _a.querySelector('dialog'));\n const id = modal.hasAttribute('id') ? modal.getAttribute('id') : 'unknown';\n dialog === null \|\| dialog === void 0 ? void 0 : dialog.close();\n const closeEvent = new CustomEvent('modal-closed', {\n bubbles: true,\n cancelable: true,\n detail: { modalId: id },\n });\n modal.dispatchEvent(closeEvent);\n window.dataLayer = window.dataLayer \|\| [];\n window.dataLayer.push({\n event: 'closeModal',\n id: id,\n });\n};\nexport const closeButtonHtml = `<button class=\"btn btn-compact btn-secondary fa-xmark-large\" data-close>Close</button>`;\n","var __awaiter = (this && this.__awaiter) \|\| function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P \|\| (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments \|\| [])).next());\n });\n};\nimport { trackComponent, trackComponentRegistered } from '../_global';\nimport { cardHTML, setupCard } from '../../modules/card.module';\nimport { videoHTML, openYoutubeVideo, openVimeoVideo } from '../../modules/videos';\nimport { openModal, closeModal, closeButtonHtml } from '../../modules/modal';\ntrackComponentRegistered('iam-video-card');\nclass iamVideoCard extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location')\n ? document.body.getAttribute('data-assets-location')\n : '/assets';\n const loadCSS = `@import \"${assetLocation}/css/components/video-card.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n \n ${loadCSS}\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\" />\n ${cardHTML}\n <dialog>\n ${closeButtonHtml}\n ${videoHTML}\n </dialog>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n return __awaiter(this, void 0, void 0, function* () {\n var _a, _b, _c;\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const cardComponent = this;\n const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n const closeButton = (_a = this.shadowRoot) === null \|\| _a === void 0 ? void 0 : _a.querySelector('[data-close]');\n this.insertAdjacentHTML('beforeend', `<div class=\"embed\" slot=\"video\"></div>`);\n const embed = this.querySelector('.embed');\n setupCard(cardComponent);\n if (cardComponent.querySelector('[data-youtube]')) {\n cardComponent.setAttribute('data-youtube', cardComponent.querySelector('[data-youtube]').getAttribute('data-youtube'));\n (_b = cardComponent.querySelector('[data-youtube]')) === null \|\| _b === void 0 ? void 0 : _b.remove();\n }\n if (cardComponent.querySelector('[data-vimeo]')) {\n cardComponent.setAttribute('data-vimeo', cardComponent.querySelector('[data-vimeo]').getAttribute('data-vimeo'));\n (_c = cardComponent.querySelector('[data-vimeo]')) === null \|\| _c === void 0 ? void 0 : _c.remove();\n }\n cardHead.insertAdjacentHTML('beforeend', `<button class=\"btn btn-compact fa-play colour-success\">Play</button>`);\n const button = cardHead === null \|\| cardHead === void 0 ? void 0 : cardHead.querySelector('button');\n cardHead.tabIndex = 6;\n button === null \|\| button === void 0 ? void 0 : button.tabIndex = -1;\n cardHead.addEventListener('click', () => {\n if (this.hasAttribute('data-youtube')) {\n const youtubeId = this.getAttribute('data-youtube');\n embed === null \|\| embed === void 0 ? void 0 : embed.setAttribute('id', youtubeId);\n openYoutubeVideo(this);\n openModal(this);\n }\n else if (this.hasAttribute('data-vimeo')) {\n openVimeoVideo(this);\n openModal(this);\n }\n });\n closeButton === null \|\| closeButton === void 0 ? void 0 : closeButton.addEventListener('click', () => {\n closeModal(this);\n if (this.hasAttribute('data-youtube')) {\n const youtubeId = this.getAttribute('data-youtube');\n if (window.player[youtubeId] && typeof window.player[youtubeId].pauseVideo == 'function') {\n window.player[youtubeId].pauseVideo();\n }\n }\n else if (this.hasAttribute('data-vimeo')) {\n embed.innerHTML = ``; // Remove the video since we cant pause it\n const customEvent = new CustomEvent('close-video', {\n detail: { 'Video Type': 'Vimeo', ID: this.getAttribute('data-vimeo') },\n });\n this.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n }\n });\n trackComponent(cardComponent, 'iam-video-card', ['play-video', 'close-video']);\n });\n }\n static get observedAttributes() {\n return ['data-image'];\n }\n attributeChangedCallback(attrName, oldVal, newVal) {\n switch (attrName) {\n case 'data-image': {\n if (oldVal != newVal) {\n const cardHeadImg = this.shadowRoot.querySelector('.card__head img');\n if (cardHeadImg)\n cardHeadImg.setAttribute('src', newVal);\n }\n break;\n }\n }\n }\n}\nexport default iamVideoCard;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","cardHTML","setupCard","cardComponent","cardHead","cardBody","cardTotal","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","videoHTML","loadYouTubeScripts","image","tag","firstScriptTag","createYoutTubeVideo","target","video_id","onPlayerReady","onPlayerStateChange","done","openYoutubeVideo","embed","youtubeId","customEvent","interval","openVimeoVideo","vimeoId","openModal","modal","_a","dialog","id","closeEvent","closeModal","closeButtonHtml","iamVideoCard","template","_b","_c","closeButton","button","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}
1	+ {"version":3,"file":"video-card.component.min.js","sources":["../_global.js","../../modules/card.module.js","../../modules/videos.js","../../modules/modal.js","video-card.component.js"],"sourcesContent":["export const trackComponentRegistered = (componentName) => {\n // Data layer Web component created\n window.dataLayer = window.dataLayer \|\| [];\n window.dataLayer.push({\n event: 'customElementRegistered',\n element: componentName,\n });\n};\nexport const trackComponent = (component, componentName, trackEvents) => {\n // Data layer Web component created\n window.dataLayer = window.dataLayer \|\| [];\n window.dataLayer.push({\n event: 'customElementAdded',\n element: componentName,\n });\n trackEvents.forEach((eventName) => {\n component.addEventListener(eventName, function (event) {\n const eventDetails = {\n event: eventName,\n element: componentName,\n target: event.target,\n };\n Object.keys(event.detail).forEach((eventKey) => {\n const eventDetail = event.detail[eventKey];\n eventDetails[eventKey] = eventDetail;\n });\n window.dataLayer.push(eventDetails);\n });\n });\n return true;\n};\n","export const cardHTML = `<div class=\"wrapper\">\n <div class=\"card__head\" part=\"head\">\n <slot name=\"head\"></slot>\n </div>\n <div class=\"card__badges\"><slot name=\"badges\"></slot></div>\n <slot name=\"checkbox\" class=\"activate-prevent-hover\"></slot>\n <div class=\"card__body\" part=\"body\">\n <slot></slot>\n <slot name=\"secondary\" part=\"secondary\"></slot>\n </div>\n <div class=\"card__details\" part=\"details\">\n <slot name=\"details\"></slot>\n </div>\n <div class=\"card__footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n </div>\n</div>`;\nconst getCardPart = (cardComponent, selector) => { var _a; return ((_a = cardComponent.shadowRoot) === null \|\| _a === void 0 ? void 0 : _a.querySelector(selector)) \|\| null; };\nexport const setupCard = (cardComponent) => {\n cardComponent.classList.add('card');\n const cardHead = getCardPart(cardComponent, '.card__head');\n const cardBody = getCardPart(cardComponent, '.card__body');\n const cardBadges = getCardPart(cardComponent, '.card__badges');\n if (cardComponent.hasAttribute('data-image')) {\n cardHead === null \|\| cardHead === void 0 ? void 0 : cardHead.insertAdjacentHTML('beforeend', `<img src=\"${cardComponent.getAttribute('data-image') \|\| ''}\" alt=\"\" loading=\"lazy\" part=\"image\" />`);\n }\n // Inset the HTML for the data total or icon fallback\n if (cardComponent.hasAttribute('data-total')) {\n const cardTotal = cardBody === null \|\| cardBody === void 0 ? void 0 : cardBody.querySelector('.card__total');\n if (!cardTotal)\n cardBody === null \|\| cardBody === void 0 ? void 0 : cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\">${cardComponent.getAttribute('data-total') \|\| ''}</div>`);\n else {\n cardTotal.innerHTML = cardComponent.getAttribute('data-total') \|\| '';\n }\n }\n else if (cardComponent.querySelector('[slot=\"total-icon\"]')) {\n cardBody === null \|\| cardBody === void 0 ? void 0 : cardBody.insertAdjacentHTML('beforeend', `<div class=\"card__total\"><slot name=\"total-icon\"></slot></div>`);\n }\n if (!cardComponent.querySelector('[slot=\"badges\"]')) {\n cardBadges === null \|\| cardBadges === void 0 ? void 0 : cardBadges.classList.add('empty');\n }\n else {\n cardBadges === null \|\| cardBadges === void 0 ? void 0 : cardBadges.classList.remove('empty');\n }\n};\n","var __awaiter = (this && this.__awaiter) \|\| function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P \|\| (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments \|\| [])).next());\n });\n};\nconst videoSupport = (body) => __awaiter(void 0, void 0, void 0, function* () {\n if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const loaded = yield loadYouTubeScripts();\n }\n setTimeout(() => __awaiter(void 0, void 0, void 0, function* () {\n if (document.querySelector('.youtube-link[data-youtube]') && !document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const loaded = yield loadYouTubeScripts();\n }\n }), '2000');\n body.addEventListener('click', (event) => __awaiter(void 0, void 0, void 0, function* () {\n let target = event.target.closest('.youtube-link[data-youtube]');\n if (!target) {\n target = event.target.closest('.vimeo-link[data-vimeo]');\n }\n if (target && target.hasAttribute('data-youtube')) {\n event.preventDefault();\n if (!document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const loaded = yield loadYouTubeScripts();\n }\n const link_id = 'youtube-' + target.getAttribute('data-youtube');\n if (!document.getElementById(`${link_id}-dialog`)) {\n document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n }\n const dialog = document.getElementById(`${link_id}-dialog`);\n const embed = document.getElementById(link_id);\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'YoutTube', ID: target.getAttribute('data-youtube') },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n createYoutTubeVideo(embed, target.getAttribute('data-youtube'));\n dialog.showModal();\n dialog.addEventListener('close', () => {\n if (window.player[embed.getAttribute('id')] &&\n typeof window.player[embed.getAttribute('id')].pauseVideo == 'function') {\n window.player[embed.getAttribute('id')].pauseVideo();\n }\n const customEvent = new CustomEvent('close-video', {\n detail: { 'Video Type': 'YoutTube', ID: target.getAttribute('data-youtube') },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n });\n }\n else if (target && target.hasAttribute('data-vimeo')) {\n event.preventDefault();\n const link_id = 'vimeo-' + target.getAttribute('data-youtube');\n if (!document.getElementById(`${link_id}-dialog`)) {\n document.body.insertAdjacentHTML('beforeend', `<dialog id=\"${link_id}-dialog\"><div class=\"embed\" id=\"${link_id}\"></div></dialog>`);\n }\n const dialog = document.getElementById(`${link_id}-dialog`);\n const embed = document.getElementById(link_id);\n const videoId = target.getAttribute('data-vimeo');\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'Vimeo', ID: videoId },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n if (!embed.querySelector('iframe'))\n embed.innerHTML = `<iframe src=\"https://player.vimeo.com/video/${videoId}?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;\n dialog.showModal();\n dialog.addEventListener('close', () => {\n embed.innerHTML = ``; // Remove the video since we cant pause it\n const customEvent = new CustomEvent('close-video', {\n detail: { 'Video Type': 'Vimeo', ID: target.getAttribute('data-vimeo') },\n });\n target.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n });\n }\n }));\n});\nexport const videoHTML = `<div class=\"video-wrapper\">\n <slot name=\"video\"></slot>\n <picture>\n <img src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" lazy=\"\" />\n </picture>\n <button class=\"btn btn-compact fa-play m-0 colour-success\">Play</button>\n</div>`;\nexport const loadYouTubeScripts = () => __awaiter(void 0, void 0, void 0, function* () {\n return new Promise((resolve, reject) => {\n const image = new Image();\n image.onload = function () {\n // This code loads the IFrame Player API code asynchronously.\n const tag = document.createElement('script');\n tag.src = 'https://www.youtube.com/iframe_api';\n const firstScriptTag = document.getElementsByTagName('script')[0];\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n document.body.classList.add('youtubeLoaded');\n resolve(true);\n };\n image.onerror = function () {\n reject(false);\n };\n image.src = 'https://youtube.com/favicon.ico';\n });\n});\nexport const createYoutTubeVideo = (target, video_id) => __awaiter(void 0, void 0, void 0, function* () {\n if (typeof window.player == 'undefined') {\n window.player = [];\n }\n //const link_id = target.getAttribute('id');\n if (typeof window.player[video_id] != 'undefined' && typeof window.player[video_id].pauseVideo == 'function') {\n window.player[video_id].playVideo();\n return false;\n }\n console.log('hi2');\n // This function creates an <iframe> (and YouTube player) after the API code downloads.\n //function onYouTubeIframeAPIReady() {\n window.player[video_id] = new YT.Player(video_id, {\n height: '100%',\n width: '100%',\n videoId: video_id,\n playerVars: {\n modestbranding: 1,\n playsinline: 1,\n rel: 0,\n showinfo: 0,\n },\n events: {\n onReady: onPlayerReady,\n onStateChange: onPlayerStateChange,\n },\n });\n //}\n //onYouTubeIframeAPIReady();\n // The API will call this function when the video player is ready.\n function onPlayerReady(event) {\n // Play the video straight away\n event.target.playVideo();\n }\n // The API calls this function when the player's state changes.\n // The function indicates that when playing a video (state=1)\n let done = false;\n function onPlayerStateChange(event) {\n if (event.data == YT.PlayerState.PLAYING && !done) {\n const link = document.getElementById(video_id);\n link.classList.add('player-ready');\n done = true;\n }\n }\n});\nexport const openYoutubeVideo = (component) => __awaiter(void 0, void 0, void 0, function* () {\n const embed = component.shadowRoot.querySelector('.embed');\n const youtubeId = component.getAttribute('data-youtube');\n let loaded;\n if (!document.body.classList.contains('youtubeLoaded')) {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n loaded = yield loadYouTubeScripts();\n }\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'YoutTube', ID: youtubeId },\n });\n component.dispatchEvent(customEvent);\n const interval = setInterval(() => {\n if (typeof YT != \"undefined\") {\n clearInterval(interval);\n createYoutTubeVideo(embed, youtubeId);\n }\n }, 200);\n // Limit the number of calls\n setTimeout(function () {\n clearInterval(interval);\n }, 2000);\n});\nexport const openVimeoVideo = (component) => __awaiter(void 0, void 0, void 0, function* () {\n const embed = component.querySelector('.embed');\n const vimeoId = component.getAttribute('data-vimeo');\n const customEvent = new CustomEvent('play-video', {\n detail: { 'Video Type': 'Vimeo', ID: vimeoId },\n });\n component.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n if (!embed.querySelector('iframe'))\n embed.innerHTML = `<iframe src=\"https://player.vimeo.com/video/${vimeoId}?autoplay=1\" width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;\n});\nexport default videoSupport;\n","export const openModal = (modal) => {\n var _a;\n const dialog = modal.closest('dialog') \|\| ((_a = modal.shadowRoot) === null \|\| _a === void 0 ? void 0 : _a.querySelector('dialog'));\n const id = modal.hasAttribute('id') ? modal.getAttribute('id') : 'unknown';\n dialog === null \|\| dialog === void 0 ? void 0 : dialog.showModal();\n dialog === null \|\| dialog === void 0 ? void 0 : dialog.focus();\n const closeEvent = new CustomEvent('modal-opened', {\n bubbles: true,\n cancelable: true,\n detail: { modalId: id },\n });\n modal.dispatchEvent(closeEvent);\n window.dataLayer = window.dataLayer \|\| [];\n window.dataLayer.push({\n event: 'openModal',\n id: id,\n });\n};\nexport const closeModal = (modal) => {\n var _a;\n const dialog = modal.closest('dialog') \|\| ((_a = modal.shadowRoot) === null \|\| _a === void 0 ? void 0 : _a.querySelector('dialog'));\n const id = modal.hasAttribute('id') ? modal.getAttribute('id') : 'unknown';\n dialog === null \|\| dialog === void 0 ? void 0 : dialog.close();\n const closeEvent = new CustomEvent('modal-closed', {\n bubbles: true,\n cancelable: true,\n detail: { modalId: id },\n });\n modal.dispatchEvent(closeEvent);\n window.dataLayer = window.dataLayer \|\| [];\n window.dataLayer.push({\n event: 'closeModal',\n id: id,\n });\n};\nexport const closeButtonHtml = `<button class=\"btn btn-compact btn-secondary fa-xmark-large\" data-close>Close</button>`;\n","var __awaiter = (this && this.__awaiter) \|\| function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P \|\| (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments \|\| [])).next());\n });\n};\nimport { trackComponent, trackComponentRegistered } from '../_global';\nimport { cardHTML, setupCard } from '../../modules/card.module';\nimport { videoHTML, openYoutubeVideo, openVimeoVideo } from '../../modules/videos';\nimport { openModal, closeModal, closeButtonHtml } from '../../modules/modal';\ntrackComponentRegistered('iam-video-card');\nclass iamVideoCard extends HTMLElement {\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n const assetLocation = document.body.hasAttribute('data-assets-location')\n ? document.body.getAttribute('data-assets-location')\n : '/assets';\n const loadCSS = `@import \"${assetLocation}/css/components/video-card.component.css\";`;\n const template = document.createElement('template');\n template.innerHTML = `\n <style>\n ${this.hasAttribute('css') ? `@import \"${this.getAttribute('css')}\";` : ``}\n \n ${loadCSS}\n </style>\n <link rel=\"stylesheet\" href=\"https://kit.fontawesome.com/8bd0fca975.css\" crossorigin=\"anonymous\" />\n ${cardHTML}\n <dialog>\n ${closeButtonHtml}\n ${videoHTML}\n </dialog>\n `;\n this.shadowRoot.appendChild(template.content.cloneNode(true));\n }\n connectedCallback() {\n return __awaiter(this, void 0, void 0, function* () {\n var _a, _b, _c;\n // eslint-disable-next-line @typescript-eslint/no-this-alias\n const cardComponent = this;\n const cardHead = cardComponent.shadowRoot.querySelector('.card__head');\n const closeButton = (_a = this.shadowRoot) === null \|\| _a === void 0 ? void 0 : _a.querySelector('[data-close]');\n this.insertAdjacentHTML('beforeend', `<div class=\"embed\" slot=\"video\"></div>`);\n const embed = this.querySelector('.embed');\n setupCard(cardComponent);\n if (cardComponent.querySelector('[data-youtube]')) {\n cardComponent.setAttribute('data-youtube', cardComponent.querySelector('[data-youtube]').getAttribute('data-youtube'));\n (_b = cardComponent.querySelector('[data-youtube]')) === null \|\| _b === void 0 ? void 0 : _b.remove();\n }\n if (cardComponent.querySelector('[data-vimeo]')) {\n cardComponent.setAttribute('data-vimeo', cardComponent.querySelector('[data-vimeo]').getAttribute('data-vimeo'));\n (_c = cardComponent.querySelector('[data-vimeo]')) === null \|\| _c === void 0 ? void 0 : _c.remove();\n }\n cardHead.insertAdjacentHTML('beforeend', `<button class=\"btn btn-compact fa-play colour-success\">Play</button>`);\n const button = cardHead === null \|\| cardHead === void 0 ? void 0 : cardHead.querySelector('button');\n cardHead.tabIndex = 6;\n button === null \|\| button === void 0 ? void 0 : button.tabIndex = -1;\n cardHead.addEventListener('click', () => {\n if (this.hasAttribute('data-youtube')) {\n const youtubeId = this.getAttribute('data-youtube');\n embed === null \|\| embed === void 0 ? void 0 : embed.setAttribute('id', youtubeId);\n openYoutubeVideo(this);\n openModal(this);\n }\n else if (this.hasAttribute('data-vimeo')) {\n openVimeoVideo(this);\n openModal(this);\n }\n });\n closeButton === null \|\| closeButton === void 0 ? void 0 : closeButton.addEventListener('click', () => {\n closeModal(this);\n if (this.hasAttribute('data-youtube')) {\n const youtubeId = this.getAttribute('data-youtube');\n if (window.player[youtubeId] && typeof window.player[youtubeId].pauseVideo == 'function') {\n window.player[youtubeId].pauseVideo();\n }\n }\n else if (this.hasAttribute('data-vimeo')) {\n embed.innerHTML = ``; // Remove the video since we cant pause it\n const customEvent = new CustomEvent('close-video', {\n detail: { 'Video Type': 'Vimeo', ID: this.getAttribute('data-vimeo') },\n });\n this.dispatchEvent(customEvent);\n window.dataLayer.push(customEvent.detail);\n }\n });\n trackComponent(cardComponent, 'iam-video-card', ['play-video', 'close-video']);\n });\n }\n static get observedAttributes() {\n return ['data-image'];\n }\n attributeChangedCallback(attrName, oldVal, newVal) {\n switch (attrName) {\n case 'data-image': {\n if (oldVal != newVal) {\n const cardHeadImg = this.shadowRoot.querySelector('.card__head img');\n if (cardHeadImg)\n cardHeadImg.setAttribute('src', newVal);\n }\n break;\n }\n }\n }\n}\nexport default iamVideoCard;\n"],"names":["trackComponentRegistered","componentName","trackComponent","component","trackEvents","eventName","event","eventDetails","eventKey","eventDetail","cardHTML","getCardPart","cardComponent","selector","_a","setupCard","cardHead","cardBody","cardBadges","cardTotal","__awaiter","thisArg","_arguments","P","generator","adopt","value","resolve","reject","fulfilled","step","e","rejected","result","videoHTML","loadYouTubeScripts","image","tag","firstScriptTag","createYoutTubeVideo","target","video_id","onPlayerReady","onPlayerStateChange","done","openYoutubeVideo","embed","youtubeId","customEvent","interval","openVimeoVideo","vimeoId","openModal","modal","dialog","id","closeEvent","closeModal","closeButtonHtml","iamVideoCard","template","_b","_c","closeButton","button","attrName","oldVal","newVal","cardHeadImg"],"mappings":"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"}

package/assets/js/components/video-modal/video-modal.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.8.2--beta3
+  * iamKey v7.8.2--beta4
   * Copyright 2022-2026 iamproperty
   */const b=r=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:r})};var s=function(r,t,o,e){function i(a){return a instanceof o?a:new o(function(c){c(a)})}return new(o||(o=Promise))(function(a,c){function m(n){try{l(e.next(n))}catch(d){c(d)}}function p(n){try{l(e.throw(n))}catch(d){c(d)}}function l(n){n.done?a(n.value):i(n.value).then(m,p)}l((e=e.apply(r,t||[])).next())})};const g=`<div class="video-wrapper">
   <slot name="video"></slot>

package/assets/js/components/word-count/word-count.component.min.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
-  * iamKey v7.8.2--beta3
+  * iamKey v7.8.2--beta4
   * Copyright 2022-2026 iamproperty
   */const o=i=>{window.dataLayer=window.dataLayer||[],window.dataLayer.push({event:"customElementRegistered",element:i})};o("iam-word-count");class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),document.body.hasAttribute("data-assets-location")&&document.body.getAttribute("data-assets-location");const t=document.createElement("template");t.innerHTML=`
     <style>

package/assets/js/modules/card.module.js CHANGED Viewed

@@ -15,30 +15,31 @@ export const cardHTML = `<div class="wrapper">
     <slot name="footer"></slot>
   </div>
 </div>`;
+const getCardPart = (cardComponent, selector) => { var _a; return ((_a = cardComponent.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(selector)) || null; };
 export const setupCard = (cardComponent) => {
     cardComponent.classList.add('card');
-    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');
-    const cardBody = cardComponent.shadowRoot.querySelector('.card__body');
+    const cardHead = getCardPart(cardComponent, '.card__head');
+    const cardBody = getCardPart(cardComponent, '.card__body');
+    const cardBadges = getCardPart(cardComponent, '.card__badges');
     if (cardComponent.hasAttribute('data-image')) {
-        cardHead.innerHTML += `<img src="${cardComponent.getAttribute('data-image')}" alt="" loading="lazy" part="image" />`;
+        cardHead === null || cardHead === void 0 ? void 0 : cardHead.insertAdjacentHTML('beforeend', `<img src="${cardComponent.getAttribute('data-image') || ''}" alt="" loading="lazy" part="image" />`);
     }
     // Inset the HTML for the data total or icon fallback
     if (cardComponent.hasAttribute('data-total')) {
-        if (!(cardBody === null || cardBody === void 0 ? void 0 : cardBody.querySelector('.card__total')))
-            cardBody.insertAdjacentHTML('beforeend', `<div class="card__total">${cardComponent.getAttribute('data-total')}</div>`);
+        const cardTotal = cardBody === null || cardBody === void 0 ? void 0 : cardBody.querySelector('.card__total');
+        if (!cardTotal)
+            cardBody === null || cardBody === void 0 ? void 0 : cardBody.insertAdjacentHTML('beforeend', `<div class="card__total">${cardComponent.getAttribute('data-total') || ''}</div>`);
         else {
-            const cardTotal = cardBody === null || cardBody === void 0 ? void 0 : cardBody.querySelector('.card__total');
-            if (cardTotal)
-                cardTotal.innerHTML = cardComponent.getAttribute('data-total');
+            cardTotal.innerHTML = cardComponent.getAttribute('data-total') || '';
         }
     }
     else if (cardComponent.querySelector('[slot="total-icon"]')) {
-        cardBody.insertAdjacentHTML('beforeend', `<div class="card__total"><slot name="total-icon"></slot></div>`);
+        cardBody === null || cardBody === void 0 ? void 0 : cardBody.insertAdjacentHTML('beforeend', `<div class="card__total"><slot name="total-icon"></slot></div>`);
     }
     if (!cardComponent.querySelector('[slot="badges"]')) {
-        cardComponent.shadowRoot.querySelector('.card__badges').classList.add('empty');
+        cardBadges === null || cardBadges === void 0 ? void 0 : cardBadges.classList.add('empty');
     }
     else {
-        cardComponent.shadowRoot.querySelector('.card__badges').classList.remove('empty');
+        cardBadges === null || cardBadges === void 0 ? void 0 : cardBadges.classList.remove('empty');
     }
 };

package/assets/js/modules/content.js CHANGED Viewed

@@ -1,11 +1,43 @@
-export const transformButtons = (component) => {
-    Array.from(document.querySelectorAll('.wp-block-buttons')).forEach((buttons) => {
-        const fragment = document.createDocumentFragment();
-        Array.from(buttons.querySelectorAll('.wp-block-button')).forEach((element) => {
-            const link = element.querySelector('a');
-            link.setAttribute('class', element.getAttribute('class'));
-            fragment.appendChild(link);
+export const loadComponents = (component) => {
+    const components = ['skeleton', 'bone', 'carousel', 'card', 'banner', 'notification'];
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+        ? document.body.getAttribute('data-assets-location')
+        : '/assets';
+    components.forEach((loadComponent) => {
+        if (component.getElementsByTagName(`iam-${loadComponent}`).length === 0)
+            return;
+        import(/*! @vite-ignore */ `${assetLocation}/js/components/${loadComponent}/${loadComponent}.component.min.js`)
+            .then((module) => {
+            if (!window.customElements.get(`iam-${loadComponent}`))
+                window.customElements.define(`iam-${loadComponent}`, module.default);
+        })
+            .catch((err) => {
+            console.log(err.message);
         });
-        buttons.parentNode.replaceChild(fragment, buttons);
     });
 };
+export const replaceShortcode = (content) => {
+    return content.replaceAll(/<p>\[([^\]]+)\]<\/p>/g, "<span data-shortcode=\"$1\"><iam-skeleton><iam-bone class=\"search\"></iam-bone></iam-skeleton></span>");
+};
+export const createTitle = (component, title) => {
+    if (component.hasAttribute('data-title-tag') && title)
+        return `<${component.getAttribute('data-title-tag')} class="${component.getAttribute('data-title-class')} iam-content--title">${title}</${component.getAttribute('data-title-tag')}>`;
+    return '';
+};
+export const transformElement = (component, renderedTitle, renderedContent) => {
+    const transform = component.getAttribute('data-transform');
+    let elementAttributes = '';
+    for (const attr of component.attributes) {
+        elementAttributes += `${attr.name}="${attr.value}" `;
+    }
+    return `<${transform} ${elementAttributes}>${renderedTitle + renderedContent}</${transform}>`;
+};
+export const transformButtons = (buttons) => {
+    const fragment = document.createDocumentFragment();
+    Array.from(buttons.querySelectorAll('.wp-block-button')).forEach((element) => {
+        const link = element.querySelector('a');
+        link.setAttribute('class', element.getAttribute('class'));
+        fragment.appendChild(link);
+    });
+    return fragment;
+};

package/assets/js/modules/content.test.js CHANGED Viewed

@@ -1,20 +1,70 @@
 import { describe, expect, it } from './test.ts';
 import { createElement, installTestDom } from './test-dom.ts';
 import { append } from './test-utils.ts';
-import { transformButtons } from './content.ts';
-const { document } = installTestDom();
+import { createTitle, loadComponents, replaceShortcode, transformButtons, transformElement } from './content.ts';
+installTestDom();
+const createAttributeComponent = (attributes) => ({
+    attributes,
+    getAttribute(name) {
+        const attribute = attributes.find((attr) => attr.name === name);
+        return attribute ? attribute.value : null;
+    },
+    hasAttribute(name) {
+        return attributes.some((attr) => attr.name === name);
+    },
+});
 describe('Content module', () => {
+    it('replaces WordPress shortcode paragraphs with loading placeholders', () => {
+        const content = '<p>Intro</p><p>[search-learning-articles]</p><p>[search-contacts]</p>';
+        const transformed = replaceShortcode(content);
+        expect(transformed.includes('<p>Intro</p>'));
+        expect(transformed.includes('data-shortcode="search-learning-articles"'));
+        expect(transformed.includes('data-shortcode="search-contacts"'));
+        expect(!transformed.includes('<p>[search-learning-articles]</p>'));
+        expect(!transformed.includes('<p>[search-contacts]</p>'));
+    });
+    it('creates configured titles and skips missing titles', () => {
+        const component = createElement('iam-content', {
+            dataTitleTag: 'h2',
+            dataTitleClass: 'bg-light',
+        });
+        expect(createTitle(component, 'Latest news') === '<h2 class="bg-light iam-content--title">Latest news</h2>');
+        expect(createTitle(component, '') === '');
+        expect(createTitle(createElement('iam-content'), 'Latest news') === '');
+    });
+    it('wraps rendered content in the requested transform element', () => {
+        const component = createAttributeComponent([
+            { name: 'data-transform', value: 'article' },
+            { name: 'data-url', value: '/wp-json/wp/v2/pages/1' },
+            { name: 'class', value: 'content-panel' },
+        ]);
+        const transformed = transformElement(component, '<h2>Heading</h2>', '<p>Body</p>');
+        expect(transformed.startsWith('<article '));
+        expect(transformed.includes('data-transform="article"'));
+        expect(transformed.includes('data-url="/wp-json/wp/v2/pages/1"'));
+        expect(transformed.includes('class="content-panel"'));
+        expect(transformed.includes('<h2>Heading</h2><p>Body</p>'));
+        expect(transformed.endsWith('</article>'));
+    });
     it('transforms WordPress button wrappers into direct links', () => {
-        const parent = createElement('div');
         const buttons = createElement('div', { class: 'wp-block-buttons' });
-        const button = createElement('div', { class: 'btn btn-primary wp-block-button' });
-        const link = createElement('a', { href: '/test' }, 'Open');
-        append(button, link);
-        append(buttons, button);
-        append(parent, buttons);
-        append(document.body, parent);
-        transformButtons();
-        expect(link.getAttribute('class') === 'btn btn-primary wp-block-button');
-        expect(parent.children[0].localName === 'fragment');
+        const primaryButton = createElement('div', { class: 'btn btn-primary wp-block-button' });
+        const secondaryButton = createElement('div', { class: 'btn btn-secondary wp-block-button' });
+        const primaryLink = createElement('a', { href: '/primary' }, 'Primary');
+        const secondaryLink = createElement('a', { href: '/secondary' }, 'Secondary');
+        append(primaryButton, primaryLink);
+        append(secondaryButton, secondaryLink);
+        append(buttons, primaryButton, secondaryButton);
+        const fragment = transformButtons(buttons);
+        expect(fragment.children.length === 2);
+        expect(fragment.children[0] === primaryLink);
+        expect(fragment.children[1] === secondaryLink);
+        expect(primaryLink.getAttribute('class') === 'btn btn-primary wp-block-button');
+        expect(secondaryLink.getAttribute('class') === 'btn btn-secondary wp-block-button');
+    });
+    it('does not load component bundles when content contains no supported custom elements', () => {
+        const component = createElement('iam-content');
+        loadComponents(component);
+        expect(component.getElementsByTagName('iam-card').length === 0);
     });
 });

package/assets/js/modules/data-layer.js CHANGED Viewed

@@ -1,13 +1,14 @@
+const dataLayerWindow = window;
 function createDataLayer() {
-    window.dataLayer = window.dataLayer || [];
-    window.dataLayer.push({
+    dataLayerWindow.dataLayer = dataLayerWindow.dataLayer || [];
+    dataLayerWindow.dataLayer.push({
         event: 'Pageview',
         pageTitle: document.title,
     });
     document.addEventListener('click', (event) => {
         const target = event.target.closest('[open] summary');
         if (target) {
-            window.dataLayer.push({
+            dataLayerWindow.dataLayer.push({
                 event: 'closeDetails',
                 detailsTitle: target.textContent || '',
             });
@@ -17,13 +18,13 @@ function createDataLayer() {
             const link = event.target.closest('a');
             const button = event.target.closest('button');
             if (summary) {
-                window.dataLayer.push({
+                dataLayerWindow.dataLayer.push({
                     event: 'openDetails',
                     detailsTitle: summary.textContent || '',
                 });
             }
             if (link) {
-                window.dataLayer.push({
+                dataLayerWindow.dataLayer.push({
                     event: 'linkClicked',
                     linkText: link.hasAttribute('title') ? link.getAttribute('title') || '' : link.textContent || '',
                     class: link.hasAttribute('class') ? link.getAttribute('class') || '' : '',
@@ -31,7 +32,7 @@ function createDataLayer() {
                 });
             }
             if (button) {
-                window.dataLayer.push({
+                dataLayerWindow.dataLayer.push({
                     event: 'buttonClicked',
                     buttonText: button.textContent || '',
                     class: button.hasAttribute('class') ? button.getAttribute('class') || '' : '',

package/assets/js/modules/dropdown.js CHANGED Viewed

@@ -26,7 +26,6 @@ export const searchAjax = (component, search, callback) => __awaiter(void 0, voi
     const searchterm = search.value;
     const ajaxURL = component.getAttribute('data-url');
     const firstInput = component.querySelector('input');
-    console.log(firstInput);
     const inputType = firstInput && firstInput.hasAttribute('type') ? firstInput.getAttribute('type') : 'checkbox';
     let inputName = firstInput && firstInput.hasAttribute('name') ? firstInput.getAttribute('name') : 'tags';
     if (component.hasAttribute('data-name'))

package/assets/js/modules/nav.js CHANGED Viewed

@@ -56,8 +56,8 @@ export const populateLinks = (data) => {
     return html;
 };
 export const loadNavData = (Cookies) => __awaiter(void 0, void 0, void 0, function* () {
-    //const ajaxURL = 'https://dev.hub.iamproperty.group/data/ecosystem-switcher.json';
-    const ajaxURL = '/nav.json';
+    const ajaxURL = 'https://dev.hub.iamproperty.group/data/ecosystem-switcher.json';
+    //const ajaxURL = '/nav.json';
     // Setup controller vars if not already set
     if (!window.controller)
         window.controller = [];
@@ -119,7 +119,14 @@ export const loadUserData = (Cookies) => __awaiter(void 0, void 0, void 0, funct
     }
 });
 export const setEnabledLinks = (component, data) => {
-    component.querySelectorAll(`[data-product][data-feature]`).forEach((element) => {
+    const selector = `[data-product][data-feature]`;
+    const elements = component
+        ? [
+            ...component.querySelectorAll(selector),
+            ...(component.shadowRoot ? component.shadowRoot.querySelectorAll(selector) : []),
+        ]
+        : document.querySelectorAll(`iam-nav ${selector}`);
+    elements.forEach((element) => {
         const isEnabled = data.attributes.products[element.getAttribute('data-product')].features[element.getAttribute('data-feature')];
         element.setAttribute('data-is-enabled', isEnabled);
         if (isEnabled && element.getAttribute('data-enabled')) {

package/assets/js/modules/search.js ADDED Viewed

@@ -0,0 +1,153 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { resolvePath, isTraversable } from './helpers';
+const isRecord = (value) => value !== null && typeof value === 'object' && !Array.isArray(value);
+const getResultValue = (item, key) => (isRecord(item) ? item[key] : undefined);
+const toOptionText = (value) => String(value !== null && value !== void 0 ? value : '').replace('\n', ', ');
+const appendDatalistOption = (datalistElement, item, valueSchema, displaySchema, groupLabel = '') => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const resolvedValue = resolvePath(item, valueSchema, undefined);
+    const resolvedDisplay = resolvePath(item, displaySchema, undefined);
+    const fallbackValue = isTraversable(item) ? '' : item;
+    const actualValue = (_e = (_d = (_c = (_b = (_a = resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : getResultValue(item, 'value')) !== null && _a !== void 0 ? _a : getResultValue(item, 'id')) !== null && _b !== void 0 ? _b : resolvedDisplay) !== null && _c !== void 0 ? _c : getResultValue(item, 'title')) !== null && _d !== void 0 ? _d : getResultValue(item, 'label')) !== null && _e !== void 0 ? _e : fallbackValue;
+    const displayValue = toOptionText((_g = (_f = resolvedDisplay !== null && resolvedDisplay !== void 0 ? resolvedDisplay : getResultValue(item, 'title')) !== null && _f !== void 0 ? _f : getResultValue(item, 'label')) !== null && _g !== void 0 ? _g : actualValue);
+    if (!displayValue)
+        return;
+    const optionElement = document.createElement('option');
+    optionElement.value = String(actualValue);
+    optionElement.textContent = `${groupLabel}${displayValue}`;
+    datalistElement.appendChild(optionElement);
+};
+const getFormControls = (component) => Array.from(component.querySelectorAll('input,select'));
+const getSearchSchema = (component, attributeName, fallback) => component.hasAttribute(attributeName) ? component.getAttribute(attributeName) || '' : fallback;
+const search = (component, datalistElement, searchTerm) => __awaiter(void 0, void 0, void 0, function* () {
+    let url = component.getAttribute('data-url');
+    if (!url)
+        return;
+    const method = component.getAttribute('data-method') || 'GET';
+    const body = {};
+    const searchWindow = window;
+    // Setup controller vars if not already set
+    if (!searchWindow.controller)
+        searchWindow.controller = {};
+    // Abort if controller already present for this url
+    if (searchWindow.controller[url])
+        searchWindow.controller[url].abort();
+    // Create a new controller so it can be aborted if new fetch made
+    searchWindow.controller[url] = new AbortController();
+    const { signal } = searchWindow.controller[url];
+    const requestOptions = {
+        signal,
+        method,
+        headers: new Headers({
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+        }),
+    };
+    if (method.toUpperCase() === 'GET') {
+        getFormControls(component).forEach((input) => {
+            const name = input.getAttribute('name');
+            const value = input.value;
+            if (name && value) {
+                url += `${url.includes('?') ? '&' : '?'}${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
+            }
+        });
+    }
+    else {
+        getFormControls(component).forEach((input) => {
+            const name = input.getAttribute('name');
+            const value = input.value;
+            if (name && value) {
+                body[name] = value;
+            }
+        });
+        requestOptions['body'] = JSON.stringify(body);
+    }
+    try {
+        const response = yield fetch(url, requestOptions);
+        const responseData = (yield response.json());
+        const loopSchema = getSearchSchema(component, 'data-schema', 'data');
+        const valueSchema = getSearchSchema(component, 'data-value-schema', 'value');
+        const displaySchema = getSearchSchema(component, 'data-display-schema', 'label');
+        const loopValues = resolvePath(responseData, loopSchema, []);
+        if (Array.isArray(loopValues)) {
+            loopValues.forEach((item) => {
+                appendDatalistOption(datalistElement, item, valueSchema, displaySchema);
+            });
+        }
+        else if (isRecord(loopValues)) {
+            Object.entries(loopValues).forEach(([key, value]) => {
+                if (Array.isArray(value)) {
+                    value.forEach((item) => {
+                        appendDatalistOption(datalistElement, item, valueSchema, displaySchema, `${key}: `);
+                    });
+                }
+            });
+        }
+        filterDatalist(datalistElement, searchTerm);
+    }
+    catch (error) {
+        console.log(error);
+    }
+});
+export const filterDatalist = (datalistElement, searchTerm) => {
+    var _a;
+    for (const optionElement of datalistElement.options) {
+        const optionText = ((_a = optionElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || optionElement.value;
+        if (optionText.toLowerCase().includes(searchTerm.toLowerCase())) {
+            optionElement.classList.remove('js-hide');
+        }
+        else {
+            optionElement.classList.add('js-hide');
+        }
+    }
+};
+export const datalistSelectOption = (component, inputElement, optionElement) => {
+    var _a;
+    const datalistElement = optionElement.closest('datalist');
+    const optionText = ((_a = optionElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || optionElement.value;
+    const inputName = inputElement.getAttribute('name') || '';
+    const alternateInputName = `${inputName}Alt`;
+    inputElement.value = optionText;
+    inputElement.setAttribute('data-value', optionText);
+    //inputElement.setAttribute('data-placeholder', optionText);
+    inputElement.setAttribute('placeholder', optionText);
+    // Make sure the value of the option is passed when in a form
+    if (optionElement.value && optionElement.value !== optionText) {
+        const alternateInput = component.querySelector(`input[name="${alternateInputName}"]`);
+        if (!alternateInput)
+            component.insertAdjacentHTML('beforeend', `<input type="hidden" name="${alternateInputName}" value="${optionElement.value}">`);
+        else
+            alternateInput.value = optionElement.value;
+    }
+    else {
+        const alternateInput = component.querySelector(`input[name="${alternateInputName}"]`);
+        if (alternateInput)
+            alternateInput.remove();
+    }
+    // Set the active value on the datalist option
+    if (!datalistElement)
+        return;
+    for (const optionLoopElement of datalistElement.options) {
+        if (optionLoopElement === optionElement)
+            optionLoopElement.classList.add('active');
+        else
+            optionLoopElement.classList.remove('active');
+    }
+    const customEvent = new CustomEvent('option-selected', {
+        detail: {
+            title: optionText,
+            value: optionElement.value || '',
+            url: optionElement.hasAttribute('data-url') ? optionElement.getAttribute('data-url') || '' : '',
+        },
+    });
+    component.dispatchEvent(customEvent);
+};
+export default search;