@surfside/ads-core-web 0.1.0 → 0.1.2

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"src/","sources":["index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+DAMmC;AACnC,mDAA6E;AAC7E,2CAAgE;AAChE,yDAAsF;AACtF,6CAAoE;AAEpE,8CAA4B;AAC5B,4CAA0B;AASnB,MAAM,sBAAsB,GAAG,KAAK,EACvC,WAA4C,EAChB,EAAE;IAC9B,MAAM,MAAM,GAAG,MAAM,WAAW,CAAC;IACjC,IAAI,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;QACb,OAAO,MAAM,CAAC;IAClB,CAAC;IAED,MAAM,EACF,MAAM,EACN,aAAa,EACb,MAAM,EACN,GAAG,EACH,2BAA2B,EAC3B,SAAS,EACZ,GAAG,MAAM,CAAC,KAAK,CAAC;IAEjB,2BAA2B,CAAC,EAAE,CAAC,CAAC;IAEhC,MAAM,YAAY,GAAG,wBAAY,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAC1D,MAAM,iBAAiB,GAAG,+BAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAC9D,aAAa,CAAC,SAAS,CAAC,qBAAqB,EAC7C,aAAa,CAAC,SAAS,CAAC,mBAAmB,EAC3C,2BAA2B,CAC9B,CAAC;IACF,MAAM,cAAc,GAAG,yBAAc,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EACxD,2BAA2B,EAC3B,aAAa,CAAC,QAAQ,CAAC,kBAAkB,KAAK,IAAI,EAClD,aAAa,CAAC,SAAS,CAAC,qBAAqB,EAC7C,aAAa,CAAC,SAAS,CAAC,kBAAkB,EAC1C,aAAa,CAAC,SAAS,CAAC,mBAAmB,CAC9C,CAAC;IAEF,MAAM,WAAW,GAAG,mBAAW,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1F,OAAO,IAAA,oBAAE,EAAC;QACN,GAAG,MAAM,CAAC,KAAK;QACf,YAAY;QACZ,iBAAiB;QACjB,cAAc;QACd,WAAW;KACd,CAAC,CAAC;AACP,CAAC,CAAC;AA1CW,QAAA,sBAAsB,0BA0CjC;AAEK,MAAM,cAAc,GAAG,KAAK,EAC/B,SAAiB,EACjB,MAAc,EACd,SAAiB,EACjB,UAAkB,EAClB,MAA0B,EAC1B,MAAgB,EACY,EAAE;IAC9B,OAAO,IAAA,8BAAsB,EAAC,IAAA,uCAAqB,EAC/C,SAAS,EACT,MAAM,EACN,SAAS,EACT,UAAU,EACV,MAAM,EACN,MAAM,CACT,CAAC,CAAC;AACP,CAAC,CAAC;AAhBW,QAAA,cAAc,kBAgBzB"}

package/lib/cjs/rendering/Banner.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MissingNurlError = exports.RenderBanner = void 0;
+const ads_core_1 = require("@surfside/ads-core");
+const Framework_1 = require("./Framework");
+const Watermark_1 = require("./Watermark");
+const Trackers_1 = require("../helpers/Trackers");
+const RenderBanner = (logger, builtBanner) => {
+    const log = (0, ads_core_1.Ctx)(logger)?.with('RenderBanner');
+    log?.info('Rendering banner');
+    log?.debug(builtBanner);
+    /* Create container dom element */
+    const bannerContainer = document.createElement('div');
+    const shadow = bannerContainer.attachShadow({ mode: 'open' });
+    const creativeContainerRes = (0, Framework_1.Template)(log, 'surfside-banner', template, style);
+    if (!creativeContainerRes.ok) {
+        return creativeContainerRes;
+    }
+    const creativeContainer = creativeContainerRes.value;
+    shadow.appendChild(creativeContainer);
+    log?.debug('aspect', `${builtBanner.bid.w} / ${builtBanner.bid.h}`);
+    if (builtBanner.bid.w !== undefined && builtBanner.bid.h !== undefined) {
+        creativeContainer.style.aspectRatio = `${builtBanner.bid.w} / ${builtBanner.bid.h}`;
+    }
+    /* Create adm container */
+    const admContainerRes = (0, Framework_1.Template)(log, 'surfside-banner-adm', builtBanner.adm);
+    if (!admContainerRes.ok) {
+        return admContainerRes;
+    }
+    /* Replace adm container in template with new adm container */
+    const admRes = (0, Framework_1.ReplaceWith)(creativeContainer, '.surfside-banner-adm', admContainerRes.value);
+    if (!admRes.ok) {
+        return admRes;
+    }
+    /* Create Watermark */
+    const watermark = (0, Watermark_1.RenderWatermark)(log);
+    if (!watermark.ok) {
+        return watermark;
+    }
+    /* Replace watermark container in template with new watermark container */
+    const watermarkRes = (0, Framework_1.ReplaceWith)(creativeContainer, '.surfside-banner-watermark', watermark.value);
+    if (!watermarkRes.ok) {
+        return watermarkRes;
+    }
+    const tracker = builtBanner.bid.nurl;
+    if (tracker === undefined) {
+        return (0, ads_core_1.Err)(new MissingNurlError(builtBanner));
+    }
+    log?.debug('Appending banner win pixel', tracker);
+    creativeContainer.appendChild((0, Trackers_1.PixelTracker)(tracker));
+    return (0, ads_core_1.Ok)(bannerContainer);
+};
+exports.RenderBanner = RenderBanner;
+class MissingNurlError extends Error {
+    bannerResponse;
+    constructor(bannerResponse) {
+        super('Missing win URL in banner - cannot render banner as it would result in uncounted impressions');
+        this.bannerResponse = bannerResponse;
+    }
+}
+exports.MissingNurlError = MissingNurlError;
+;
+const template = `<div>
+    <div class="surfside-banner-adm">
+
+    </div>
+    <div class="surfside-banner-watermark">
+
+    </div>
+</div>
+`;
+const style = `.surfside-banner {
+    position: relative;
+    display: inline-block;
+    overflow: hidden;
+    max-width: 100%;
+    height: auto;
+    width: 100%;
+}
+
+.surfside-banner-adm {
+    display: flex;
+
+    a {
+        width: 100%;
+
+        img {
+            width: 100%;
+            height: auto;
+        }
+    }
+}`;
+//# sourceMappingURL=Banner.js.map

package/lib/cjs/rendering/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sourceRoot":"src/","sources":["rendering/Banner.ts"],"names":[],"mappings":"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"}

package/lib/cjs/rendering/Carousel.js

@@ -0,0 +1,350 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyFirstPageError = exports.MalformedCarouselError = exports.RenderCarousel = void 0;
+const ads_core_client_1 = require("@surfside/ads-core-client");
+const ProductCard_1 = require("./ProductCard");
+const Dom_1 = require("../helpers/Dom");
+const Framework_1 = require("./Framework");
+;
+;
+;
+const RenderCarousel = async (logger, evaluateProductCardTemplate, sponsoredByEnabled, productCardStylesheet, carouselStylesheet, callbacks, carousel, cardMinWidth, carouselLimits, nextType) => {
+    const log = (0, ads_core_client_1.Ctx)(logger)?.with('RenderCarousel');
+    log?.info('Rendering Carousel', cardMinWidth, carouselLimits);
+    const container = (0, Framework_1.Template)(log, 'surf-carousel', template, style + '\n' + carouselStylesheet);
+    if (!container.ok) {
+        return container;
+    }
+    log?.debug(container.value.outerHTML);
+    const rightArrow = container.value.querySelector('.arrow.right') ?? null;
+    const leftArrow = container.value.querySelector('.arrow.left') ?? null;
+    const items = container.value.querySelector('.items') ?? null;
+    if (rightArrow === null || leftArrow === null || items === null) {
+        return (0, ads_core_client_1.Err)(new MalformedCarouselError(container.value));
+    }
+    const carouselState = {
+        element: container.value,
+        init: async () => {
+            const firstPage = await handleNextPage(log, evaluateProductCardTemplate, sponsoredByEnabled, productCardStylesheet, callbacks, container.value, items, cardMinWidth, carouselLimits, nextType, generator);
+            if (!firstPage.ok) {
+                return firstPage;
+            }
+            else if (firstPage.value.length === 0) {
+                log?.info('First page was empty!');
+                return (0, ads_core_client_1.Err)(new EmptyFirstPageError(container.value));
+            }
+            log?.info('First page not empty', firstPage);
+            return (0, ads_core_client_1.Ok)(true);
+        }
+    };
+    const generator = carousel.getProduct();
+    rightArrow.addEventListener('click', () => {
+        handleNextPage(log, evaluateProductCardTemplate, sponsoredByEnabled, productCardStylesheet, callbacks, container.value, items, cardMinWidth, carouselLimits, nextType, generator);
+    });
+    leftArrow.addEventListener('click', () => {
+        handleBackPage(log, sponsoredByEnabled, container.value, items, cardMinWidth);
+    });
+    return (0, ads_core_client_1.Ok)(carouselState);
+};
+exports.RenderCarousel = RenderCarousel;
+const addItems = (logger, stylesheet, callbacks, evaluateProductCardTemplate, items, itemsDiv, minWidth) => {
+    const log = (0, ads_core_client_1.Ctx)(logger)?.with('addItems');
+    log?.info('Adding items to carousel', items.length);
+    const renderedCards = [];
+    for (const item of items) {
+        const productCard = (0, ProductCard_1.RenderProductCard)(log, stylesheet, callbacks, evaluateProductCardTemplate, item);
+        if (!productCard.ok) {
+            log?.warn('Failed to render product card, skipping', productCard.error);
+            continue;
+        }
+        log?.debug('Rendering card', productCard.value.outerHTML);
+        const cardIndex = itemsDiv.children.length;
+        productCard.value.classList.add(`card-${cardIndex}`);
+        productCard.value.classList.add('surf-product-card');
+        productCard.value.style.width = `${minWidth}px`;
+        itemsDiv.appendChild(productCard.value);
+        renderedCards.push(item);
+    }
+    return renderedCards;
+};
+const handleNextPage = async (logger, evaluateProductCardTemplate, sponsoredByEnabled, stylesheet, callbacks, rootElement, itemsDiv, cardMinWidth, carouselLimits, nextType, carouselGenerator) => {
+    const log = (0, ads_core_client_1.Ctx)(logger)?.with('handleNextPage');
+    log?.info('Handling next page request');
+    log?.debug(cardMinWidth, carouselLimits);
+    /* Get the card which the carousel is currently scrolled to (i.e, the left-most card) */
+    const currentIndex = (0, Dom_1.GetNumberAttributeOr)(itemsDiv, 'current-index', 0);
+    /* Get the total number of cards which have been rendered so far */
+    const totalRendered = itemsDiv.childElementCount;
+    log?.debug('currentIndex', currentIndex);
+    log?.debug('totalRendered', totalRendered);
+    /* Calculate how many cards fit into view currently */
+    const slotsAvailable = Math.ceil(rootElement.clientWidth / cardMinWidth);
+    log?.debug('slotsAvailable', slotsAvailable);
+    /* Calculate the total number of cards which have already been rendered to the RIGHT of the current page */
+    const totalSlotsRenderedAfterThisPage = Math.max(0, Math.min(totalRendered, totalRendered - (currentIndex + slotsAvailable)));
+    logger?.table({
+        clientWidth: itemsDiv.clientWidth,
+        currentIndex,
+        totalRendered,
+        slotsAvailable,
+        totalSlotsRenderedAfterThisPage
+    });
+    const numberOfCardsToAdd = Math.max(0, (() => {
+        /* NextType = product means only request a single product */
+        if (nextType === 'product') {
+            return 1;
+        }
+        else if (carouselLimits.type === 'infinite') {
+            /* If infinite, that means we don't need to calculate how many slots are still available to fill,
+             * just request a whole page */
+            log?.debug('Infinite scroll, use slots available');
+            return slotsAvailable;
+        }
+        else {
+            /* If 'limited', we need to calculate how many slots are still available in the entire carousel */
+            const slotsRemaining = carouselLimits.limit - totalRendered;
+            return Math.min(slotsRemaining, slotsAvailable);
+        }
+    })() - totalSlotsRenderedAfterThisPage); /* Finally, remove the slots which have already been rendered within the
+                                              * next visible page scroll */
+    log?.debug('numberOfCardsToAdd', numberOfCardsToAdd);
+    const slotsVisible = Math.floor(rootElement.clientWidth / cardMinWidth);
+    if (numberOfCardsToAdd === 0) {
+        /* Scroll either to the calculated next page index, or to the last page, depending on which is smaller */
+        log?.info('No new cards requested');
+        log?.info('slotsVisible', slotsVisible);
+        const nextCardToScrollTo = Math.max(0, Math.min(totalRendered - slotsVisible, currentIndex + slotsVisible));
+        scrollTo(log, itemsDiv, nextCardToScrollTo);
+        checkSponsored(log, sponsoredByEnabled, rootElement, itemsDiv, nextCardToScrollTo, cardMinWidth);
+        return (0, ads_core_client_1.Ok)([]);
+    }
+    const [builtProducts] = await (0, ads_core_client_1.ConsumeNAsync)(carouselGenerator, numberOfCardsToAdd);
+    const nextCardToScrollTo = Math.min(currentIndex + slotsVisible, itemsDiv.childElementCount);
+    log?.info('Adding cards and scrolling!', numberOfCardsToAdd, builtProducts);
+    log?.info('builtProducts', builtProducts);
+    const items = addItems(log, stylesheet, callbacks, evaluateProductCardTemplate, builtProducts, itemsDiv, cardMinWidth);
+    scrollTo(log, itemsDiv, nextCardToScrollTo);
+    checkSponsored(log, sponsoredByEnabled, rootElement, itemsDiv, nextCardToScrollTo, cardMinWidth);
+    return (0, ads_core_client_1.Ok)(items);
+};
+const handleBackPage = (logger, sponsoredByEnabled, rootElement, itemsDiv, cardMinWidth) => {
+    const log = (0, ads_core_client_1.Ctx)(logger)?.with('handleBackPage');
+    log?.info('scrolling back');
+    const currentIndex = (0, Dom_1.GetNumberAttributeOr)(itemsDiv, 'current-index', 0);
+    const slotsInView = Math.floor(rootElement.clientWidth / cardMinWidth);
+    const nextIndex = Math.max(0, currentIndex - slotsInView);
+    scrollTo(log, itemsDiv, Math.max(0, currentIndex - slotsInView));
+    checkSponsored(log, sponsoredByEnabled, rootElement, itemsDiv, nextIndex, cardMinWidth);
+};
+const scrollTo = (logger, itemsDiv, index) => {
+    const log = (0, ads_core_client_1.Ctx)(logger)?.with('scrollTo');
+    if (index === 0) {
+        log?.debug('Going back to origin');
+        itemsDiv.style.transform = 'translateX(0)';
+        itemsDiv.setAttribute('current-index', `${index}`);
+        return;
+    }
+    ;
+    log?.info(`Scrolling to item #${index}`);
+    const item = itemsDiv.querySelector(`.card-${index}`);
+    if (item === null) {
+        log?.warn(`Unable to scroll to .card-${index}: element does not exists`);
+        return;
+    }
+    const itemOffset = item.offsetLeft;
+    log?.info('itemOffset', itemOffset, item.clientWidth);
+    itemsDiv.setAttribute('current-index', `${index}`);
+    itemsDiv.style.transform = `translateX(calc(-${itemOffset}px + 37px))`;
+};
+const checkSponsored = (logger, sponsoredByEnabled, root, itemsDiv, index, cardMinWidth) => {
+    const log = (0, ads_core_client_1.Ctx)(logger)?.with('checkSponsored');
+    log?.info('Checking sponsored tags');
+    const totalVisibleCards = Math.ceil(root.clientWidth / cardMinWidth);
+    const visibleCards = [];
+    for (let i = index; i < index + totalVisibleCards; i++) {
+        const card = itemsDiv.querySelector(`.card-${i}`);
+        if (card === null) {
+            break; // end of carousel, probably;
+        }
+        visibleCards.push(card);
+    }
+    const products = visibleCards
+        .map(card => card.productData)
+        .filter(product => product.sponsored);
+    const brands = new Set();
+    for (const product of products) {
+        brands.add(product.product.brandName ?? '');
+    }
+    const allSponsored = visibleCards.length === products.length;
+    log?.info('visibleCards', visibleCards.length, index);
+    const setTitle = (item, title, by) => {
+        item.classList.remove('sponsoredByMany');
+        item.classList.remove('sponsoredByOne');
+        item.classList.remove('recommended');
+        if (by !== undefined) {
+            item.innerHTML = by;
+        }
+        else {
+            item.innerHTML = '';
+        }
+        item.classList.add(title);
+    };
+    if (sponsoredByEnabled === true) {
+        log?.info('Attempting sponsoredBy title');
+        const sponsoredBy = root.querySelector('.sponsored-by');
+        if (sponsoredBy === null) {
+            log?.error('Could not find sponsored by element');
+            return;
+        }
+        if (allSponsored) {
+            log?.info('All products are sponsored');
+            visibleCards.forEach(card => {
+                card.shadowRoot
+                    ?.querySelector('.surf-product-card')
+                    ?.classList.remove('sponsored');
+            });
+            if (brands.size === 1) {
+                log?.info('All brands are the same');
+                setTitle(sponsoredBy, 'sponsoredByOne', [...brands.values()][0]);
+            }
+            else {
+                log?.info('Multiple brands', brands);
+                setTitle(sponsoredBy, 'sponsoredByMany');
+            }
+        }
+        else {
+            visibleCards.forEach(card => {
+                if (card.productData.sponsored) {
+                    card.shadowRoot
+                        ?.querySelector('.surf-product-card')
+                        ?.classList.add('sponsored');
+                }
+            });
+            setTitle(sponsoredBy, 'recommended');
+        }
+    }
+};
+class MalformedCarouselError extends Error {
+    parent;
+    constructor(parent) {
+        super('Failed to construct carousel template! Missing child components');
+        this.parent = parent;
+    }
+}
+exports.MalformedCarouselError = MalformedCarouselError;
+;
+class EmptyFirstPageError extends Error {
+    parent;
+    constructor(parent) {
+        super('First page of carousel was empty. Returning nothing');
+        this.parent = parent;
+    }
+}
+exports.EmptyFirstPageError = EmptyFirstPageError;
+;
+const template = `<div class="carousel-wrapper">
+    <div class="sponsored-by"></div>
+    <div class="surf-carousel">
+        <div class="items"></div>
+    </div>
+    <div class="arrows">
+        <div class="arrow left"></div>
+        <div class="arrow right"></div>
+    </div>
+</div>`;
+const style = `.surf-carousel {
+    width: 100%;
+    display: flex;
+    position: relative;
+    flex-grow: 1;
+
+    .sponsored-by {
+        font-family: 'Helvetica', Verdana, Geneva, Tahoma, sans-serif;
+        margin: 10px 0;
+        font-size: 24px;
+
+        &.sponsoredByOne::before {
+            content: 'Sponsored by ';
+        }
+
+        &.recommended::before {
+            content: 'Recommended';
+        }
+
+        &.sponsoredByMany::before {
+            content: 'Sponsored';
+        }
+    }
+
+    .items {
+        z-index: 1;
+        display: flex;
+        flex-direction: row;
+        flex-grow: 1;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        padding: 0 37px;
+        box-sizing: border-box;
+        transition: transform 0.4s ease-out;
+
+        .surf-product-card {
+            flex: 1;
+            display: flex;
+            padding: 5px;
+            box-sizing: border-box;
+        }
+    }
+
+    
+}
+
+.arrows {
+
+    .arrow {
+        z-index: 2;
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 40px;
+        height: 40px;
+        display: flex;
+        background-color: rgba(0, 0, 0, 0.5);
+        margin: 0 1rem;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        cursor: pointer;
+        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2),
+                    0 2px 8px 0 rgba(0, 0, 0, 0.2);
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.6);
+        }
+
+        &.left {
+            left: -10px;
+
+            &:before {
+                content: "";
+                background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none"><path stroke="%23fff" stroke-opacity=".9" stroke-width="2" d="M24 10 14 20l10 10"/></svg>')
+                no-repeat center;
+                width: 40px;
+                height: 40px;
+            }
+        }
+
+        &.right {
+            right: 0;
+
+            &:before {
+                content: "";
+                background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none"><path stroke="%23fff" stroke-opacity=".9" stroke-width="2" d="M16 30l10-10L16 10"/></svg>')
+                no-repeat center;
+                width: 40px;
+                height: 40px;
+            }
+
+        }
+    }
+}`;
+//# sourceMappingURL=Carousel.js.map

package/lib/cjs/rendering/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sourceRoot":"src/","sources":["rendering/Carousel.ts"],"names":[],"mappings":";;;AAAA,+DASmC;AAEnC,+CAAkD;AAClD,wCAAsD;AACtD,2CAAuC;AAMtC,CAAC;AAID,CAAC;AAMD,CAAC;AASK,MAAM,cAAc,GAAG,KAAK,EAC/B,MAA2B,EAC3B,2BAA0D,EAC1D,kBAA2B,EAC3B,qBAA6B,EAC7B,kBAA0B,EAC1B,SAAoB,EACpB,QAAwB,EACxB,YAAoB,EACpB,cAA8B,EAC9B,QAA4B,EACE,EAAE;IAChC,MAAM,GAAG,GAAG,IAAA,qBAAG,EAAC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAChD,GAAG,EAAE,IAAI,CAAC,oBAAoB,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC;IAE9D,MAAM,SAAS,GAAG,IAAA,oBAAQ,EAAC,GAAG,EAAE,eAAe,EAC3C,QAAQ,EACR,KAAK,GAAG,IAAI,GAAG,kBAAkB,CACpC,CAAC;IACF,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC;QAChB,OAAO,SAAS,CAAC;IACrB,CAAC;IAED,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAEtC,MAAM,UAAU,GAAG,SAAS,CAAC,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC;IACzE,MAAM,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC;IACvE,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC;IAE9D,IAAI,UAAU,KAAK,IAAI,IAAI,SAAS,KAAK,IAAI,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;QAC9D,OAAO,IAAA,qBAAG,EAAC,IAAI,sBAAsB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAC5D,CAAC;IAED,MAAM,aAAa,GAAG;QAClB,OAAO,EAAE,SAAS,CAAC,KAAK;QACxB,IAAI,EAAE,KAAK,IAA0B,EAAE;YACnC,MAAM,SAAS,GAAG,MAAM,cAAc,CAAC,GAAG,EACtC,2BAA2B,EAC3B,kBAAkB,EAClB,qBAAqB,EACrB,SAAS,EACT,SAAS,CAAC,KAAK,EACf,KAAuB,EACvB,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,SAAS,CACZ,CAAC;YACF,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC;gBAChB,OAAO,SAAS,CAAC;YACrB,CAAC;iBAAM,IAAI,SAAS,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACtC,GAAG,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;gBACnC,OAAO,IAAA,qBAAG,EAAC,IAAI,mBAAmB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;YACzD,CAAC;YACD,GAAG,EAAE,IAAI,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC;YAC7C,OAAO,IAAA,oBAAE,EAAC,IAAI,CAAC,CAAC;QACpB,CAAC;KACJ,CAAC;IAEF,MAAM,SAAS,GAAG,QAAQ,CAAC,UAAU,EAAE,CAAC;IACxC,UAAU,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QACtC,cAAc,CAAC,GAAG,EACd,2BAA2B,EAC3B,kBAAkB,EAClB,qBAAqB,EACrB,SAAS,EACT,SAAS,CAAC,KAAK,EACf,KAAuB,EACvB,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,SAAS,CACZ,CAAC;IACN,CAAC,CAAC,CAAC;IACH,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QACrC,cAAc,CAAC,GAAG,EACd,kBAAkB,EAClB,SAAS,CAAC,KAAK,EACf,KAAuB,EACvB,YAAY,CACf,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,OAAO,IAAA,oBAAE,EAAC,aAAa,CAAC,CAAC;AAC7B,CAAC,CAAC;AApFW,QAAA,cAAc,kBAoFzB;AAEF,MAAM,QAAQ,GAAG,CACb,MAA2B,EAC3B,UAAkB,EAClB,SAAoB,EACpB,2BAA0D,EAC1D,KAAkC,EAClC,QAAwB,EACxB,QAAgB,EACW,EAAE;IAC7B,MAAM,GAAG,GAAG,IAAA,qBAAG,EAAC,MAAM,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,GAAG,EAAE,IAAI,CAAC,0BAA0B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAEpD,MAAM,aAAa,GAAgC,EAAE,CAAC;IACtD,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACvB,MAAM,WAAW,GAAG,IAAA,+BAAiB,EAAC,GAAG,EACrC,UAAU,EACV,SAAS,EACT,2BAA2B,EAC3B,IAAI,CACP,CAAC;QACF,IAAI,CAAC,WAAW,CAAC,EAAE,EAAE,CAAC;YAClB,GAAG,EAAE,IAAI,CAAC,yCAAyC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;YACxE,SAAS;QACb,CAAC;QACD,GAAG,EAAE,KAAK,CAAC,gBAAgB,EAAE,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAC1D,MAAM,SAAS,GAAG,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC;QAC3C,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,SAAS,EAAE,CAAC,CAAC;QACrD,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QACrD,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,QAAQ,IAAI,CAAC;QAChD,QAAQ,CAAC,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACxC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IACD,OAAO,aAAa,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,cAAc,GAAI,KAAK,EACzB,MAA2B,EAC3B,2BAA0D,EAC1D,kBAA2B,EAC3B,UAAkB,EAClB,SAAoB,EACpB,WAAwB,EACxB,QAAwB,EACxB,YAAoB,EACpB,cAA8B,EAC9B,QAA4B,EAC5B,iBAA4D,EACpB,EAAE;IAC1C,MAAM,GAAG,GAAG,IAAA,qBAAG,EAAC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAChD,GAAG,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;IACxC,GAAG,EAAE,KAAK,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;IACzC,wFAAwF;IACxF,MAAM,YAAY,GAAG,IAAA,0BAAoB,EAAC,QAAQ,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC;IACxE,mEAAmE;IACnE,MAAM,aAAa,GAAG,QAAQ,CAAC,iBAAiB,CAAC;IACjD,GAAG,EAAE,KAAK,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;IACzC,GAAG,EAAE,KAAK,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IAE3C,sDAAsD;IACtD,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,GAAG,YAAY,CAAC,CAAC;IACzE,GAAG,EAAE,KAAK,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;IAE7C,2GAA2G;IAC3G,MAAM,+BAA+B,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAC9C,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,aAAa,GAAG,CAAC,YAAY,GAAG,cAAc,CAAC,CAAC,CAC3E,CAAC;IACF,MAAM,EAAE,KAAK,CAAC;QACV,WAAW,EAAE,QAAQ,CAAC,WAAW;QACjC,YAAY;QACZ,aAAa;QACb,cAAc;QACd,+BAA+B;KAClC,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE;QACzC,4DAA4D;QAC5D,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YACzB,OAAO,CAAC,CAAC;QACb,CAAC;aAAM,IAAI,cAAc,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC5C;2CAC+B;YAC/B,GAAG,EAAE,KAAK,CAAC,sCAAsC,CAAC,CAAC;YACnD,OAAO,cAAc,CAAC;QAC1B,CAAC;aAAM,CAAC;YACJ,kGAAkG;YAClG,MAAM,cAAc,GAAI,cAAmC,CAAC,KAAK,GAAG,aAAa,CAAC;YAClF,OAAO,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;QACpD,CAAC;IACL,CAAC,CAAC,EAAE,GAAG,+BAA+B,CAAC,CAAC,CAAC;2EAC8B;IACvE,GAAG,EAAE,KAAK,CAAC,oBAAoB,EAAE,kBAAkB,CAAC,CAAC;IACrD,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,GAAG,YAAY,CAAC,CAAC;IACxE,IAAI,kBAAkB,KAAK,CAAC,EAAE,CAAC;QAC3B,yGAAyG;QACzG,GAAG,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;QACpC,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;QACxC,MAAM,kBAAkB,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,GAAG,YAAY,EAAE,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC;QAC5G,QAAQ,CAAC,GAAG,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CAAC;QAC5C,cAAc,CAAC,GAAG,EAAE,kBAAkB,EAAE,WAAW,EAAE,QAAQ,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAAC;QACjG,OAAO,IAAA,oBAAE,EAAC,EAAE,CAAC,CAAC;IAClB,CAAC;IACD,MAAM,CAAE,aAAa,CAAE,GAAG,MAAM,IAAA,+BAAa,EAAC,iBAAiB,EAAE,kBAAkB,CAAC,CAAC;IACrF,MAAM,kBAAkB,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,YAAY,EAAE,QAAQ,CAAC,iBAAiB,CAAC,CAAC;IAC7F,GAAG,EAAE,IAAI,CAAC,6BAA6B,EAAE,kBAAkB,EAAE,aAAa,CAAC,CAAC;IAC5E,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IAC1C,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EACtB,UAAU,EACV,SAAS,EACT,2BAA2B,EAC3B,aAAa,EACb,QAAQ,EACR,YAAY,CACf,CAAC;IACF,QAAQ,CAAC,GAAG,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CAAC;IAC5C,cAAc,CAAC,GAAG,EAAE,kBAAkB,EAAE,WAAW,EAAE,QAAQ,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAAC;IACjG,OAAO,IAAA,oBAAE,EAAC,KAAK,CAAC,CAAC;AACrB,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CACnB,MAA2B,EAC3B,kBAA2B,EAC3B,WAAwB,EACxB,QAAwB,EACxB,YAAoB,EACtB,EAAE;IACA,MAAM,GAAG,GAAG,IAAA,qBAAG,EAAC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAChD,GAAG,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC5B,MAAM,YAAY,GAAG,IAAA,0BAAoB,EAAC,QAAQ,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC;IACxE,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,WAAW,GAAG,YAAY,CAAC,CAAC;IAEvE,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,GAAG,WAAW,CAAC,CAAC;IAC1D,QAAQ,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,GAAG,WAAW,CAAC,CAAC,CAAC;IACjE,cAAc,CAAC,GAAG,EAAE,kBAAkB,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AAC5F,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CACb,MAA2B,EAC3B,QAAwB,EACxB,KAAa,EACf,EAAE;IACA,MAAM,GAAG,GAAG,IAAA,qBAAG,EAAC,MAAM,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;QACd,GAAG,EAAE,KAAK,CAAC,sBAAsB,CAAC,CAAC;QACnC,QAAQ,CAAC,KAAK,CAAC,SAAS,GAAG,eAAe,CAAC;QAC3C,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;QACnD,OAAO;IACX,CAAC;IAAA,CAAC;IACF,GAAG,EAAE,IAAI,CAAC,sBAAsB,KAAK,EAAE,CAAC,CAAC;IACzC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,KAAK,EAAE,CAA0B,CAAC;IAC/E,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;QAChB,GAAG,EAAE,IAAI,CAAC,6BAA6B,KAAK,2BAA2B,CAAC,CAAC;QACzE,OAAO;IACX,CAAC;IACD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;IACnC,GAAG,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACtD,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;IACnD,QAAQ,CAAC,KAAK,CAAC,SAAS,GAAG,oBAAoB,UAAU,aAAa,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CACnB,MAA2B,EAC3B,kBAA2B,EAC3B,IAAiB,EACjB,QAAwB,EACxB,KAAa,EACb,YAAoB,EAChB,EAAE;IACN,MAAM,GAAG,GAAG,IAAA,qBAAG,EAAC,MAAM,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAChD,GAAG,EAAE,IAAI,CAAC,yBAAyB,CAAC,CAAC;IAErC,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,YAAY,CAAC,CAAC;IACrE,MAAM,YAAY,GAAG,EAAE,CAAC;IACxB,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,GAAG,KAAK,GAAG,iBAAiB,EAAE,CAAC,EAAE,EAAE,CAAC;QACrD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;QAClD,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;YAChB,MAAM,CAAC,6BAA6B;QACxC,CAAC;QACD,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED,MAAM,QAAQ,GAAG,YAAY;SACxB,GAAG,CAAC,IAAI,CAAC,EAAE,CAAE,IAAY,CAAC,WAAwC,CAAC;SACnE,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAE1C,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU,CAAC;IACjC,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE,CAAC;QAC7B,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,KAAK,QAAQ,CAAC,MAAM,CAAC;IAC7D,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAEtD,MAAM,QAAQ,GAAG,CAAC,IAAa,EAAE,KAAa,EAAE,EAAW,EAAE,EAAE;QAC3D,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;QACzC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;QACxC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QACrC,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;QACxB,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;QACxB,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,IAAI,kBAAkB,KAAK,IAAI,EAAE,CAAC;QAC9B,GAAG,EAAE,IAAI,CAAC,8BAA8B,CAAC,CAAC;QAC1C,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QACxD,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;YACvB,GAAG,EAAE,KAAK,CAAC,qCAAqC,CAAC,CAAC;YAClD,OAAO;QACX,CAAC;QACD,IAAI,YAAY,EAAE,CAAC;YACf,GAAG,EAAE,IAAI,CAAC,4BAA4B,CAAC,CAAC;YACxC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACxB,IAAI,CAAC,UAAU;oBACX,EAAE,aAAa,CAAC,oBAAoB,CAAC;oBACrC,EAAE,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YACxC,CAAC,CAAC,CAAC;YAEH,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;gBACpB,GAAG,EAAE,IAAI,CAAC,yBAAyB,CAAC,CAAC;gBACrC,QAAQ,CAAC,WAAW,EAAE,gBAAgB,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAE,CAAC,CAAC;YACtE,CAAC;iBAAM,CAAC;gBACJ,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;gBACrC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;YAC7C,CAAC;QACL,CAAC;aAAM,CAAC;YACJ,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACxB,IAAM,IAAY,CAAC,WAAyC,CAAC,SAAS,EAAE,CAAC;oBACrE,IAAI,CAAC,UAAU;wBACX,EAAE,aAAa,CAAC,oBAAoB,CAAC;wBACrC,EAAE,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;gBACrC,CAAC;YACL,CAAC,CAAC,CAAC;YACH,QAAQ,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;QACzC,CAAC;IACL,CAAC;AACL,CAAC,CAAC;AAEF,MAAa,sBAAuB,SAAQ,KAAK;IACjB;IAA5B,YAA4B,MAAmB;QAC3C,KAAK,CAAC,iEAAiE,CAAC,CAAC;QADjD,WAAM,GAAN,MAAM,CAAa;IAE/C,CAAC;CACJ;AAJD,wDAIC;AAAA,CAAC;AAEF,MAAa,mBAAoB,SAAQ,KAAK;IACd;IAA5B,YAA4B,MAAmB;QAC3C,KAAK,CAAC,qDAAqD,CAAC,CAAC;QADrC,WAAM,GAAN,MAAM,CAAa;IAE/C,CAAC;CACJ;AAJD,kDAIC;AAAA,CAAC;AAEF,MAAM,QAAQ,GAAG;;;;;;;;;OASV,CAAC;AAER,MAAM,KAAK,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8FZ,CAAC"}

package/lib/cjs/rendering/Framework.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MissingTemplateElementError = exports.ReplaceWith = exports.QuerySelectorResult = exports.Template = void 0;
+const ads_core_1 = require("@surfside/ads-core");
+const BoundEvents = [
+    'click',
+    'mousemove',
+    'mouseover',
+    'mouseleave',
+    'mouseout',
+    'mouseup',
+    'mousedown',
+    'loadeddata',
+    'error',
+    'touchend',
+    'touchstart',
+    'touchmove'
+];
+;
+const Template = (logger, className, template, style, callbacks) => {
+    const log = (0, ads_core_1.Ctx)(logger)?.with('Template');
+    log?.info('Rendering Template');
+    try {
+        const wrapper = document.createElement('div');
+        wrapper.classList.add(className);
+        if (style !== undefined) {
+            const styleElement = document.createElement('style');
+            styleElement.innerHTML = style;
+            wrapper.appendChild(styleElement);
+        }
+        wrapper.innerHTML += template;
+        if (callbacks !== undefined) {
+            log?.info('Adding callbacks');
+            for (const eventName of BoundEvents) {
+                log?.info('Adding', eventName);
+                const eventNameSelector = `_${eventName}`;
+                const boundNodes = wrapper.querySelectorAll(`[${eventNameSelector}]`);
+                log?.info('boundNodes', boundNodes);
+                boundNodes.forEach(node => {
+                    log?.debug('binding node event ', eventNameSelector);
+                    const handlerName = node.getAttribute(eventNameSelector);
+                    if (handlerName === null) {
+                        log?.warn('Failed to bind handler - handlerName is null');
+                        return;
+                    }
+                    const handler = callbacks.callbacks[handlerName];
+                    if (handler === undefined) {
+                        log?.warn('Could not find handler ', handlerName, callbacks.callbacks);
+                        return;
+                    }
+                    log?.info('Added event ', eventNameSelector);
+                    node.addEventListener(eventName, e => handler(e, callbacks.product));
+                });
+            }
+        }
+        return (0, ads_core_1.Ok)(wrapper);
+    }
+    catch (err) {
+        return (0, ads_core_1.Err)(err);
+    }
+};
+exports.Template = Template;
+const QuerySelectorResult = (element, selector) => {
+    const child = element.querySelector(selector) ?? element.shadowRoot?.querySelector(selector) ?? null;
+    if (child === null) {
+        return (0, ads_core_1.Err)(new MissingTemplateElementError(element, selector));
+    }
+    return (0, ads_core_1.Ok)(child);
+};
+exports.QuerySelectorResult = QuerySelectorResult;
+const ReplaceWith = (parent, originalSelector, element) => {
+    const original = (0, exports.QuerySelectorResult)(parent, originalSelector);
+    if (!original.ok) {
+        return original;
+    }
+    original.value.replaceWith(element);
+    return (0, ads_core_1.Ok)(element);
+};
+exports.ReplaceWith = ReplaceWith;
+class MissingTemplateElementError extends Error {
+    parent;
+    selector;
+    constructor(parent, selector) {
+        super(`Missing child element "${selector}" on parent "${parent.tagName}"`);
+        this.parent = parent;
+        this.selector = selector;
+    }
+}
+exports.MissingTemplateElementError = MissingTemplateElementError;
+//# sourceMappingURL=Framework.js.map

package/lib/cjs/rendering/Framework.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Framework.js","sourceRoot":"src/","sources":["rendering/Framework.ts"],"names":[],"mappings":"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"}