@surfside/ads-core-web 0.1.21 → 0.1.23

package/lib/esm/rendering/Carousel.js

@@ -279,126 +279,126 @@ export class EmptyFirstPageError extends Error {
     }
 }
 ;
-const template = `<div class="carousel-wrapper">
-    <div class="sponsored-carousel"></div>
-    <div class="surf-carousel">
-        <div class="items"></div>
-        <div class="arrows">
-            <div class="arrow left"></div>
-            <div class="arrow right"></div>
-        </div>
-    </div>
+const template = `<div class="carousel-wrapper">
+    <div class="sponsored-carousel"></div>
+    <div class="surf-carousel">
+        <div class="items"></div>
+        <div class="arrows">
+            <div class="arrow left"></div>
+            <div class="arrow right"></div>
+        </div>
+    </div>
 </div>`;
-const style = `
-.surf-carousel {
-    display: flex;
-    position: relative;
-    flex-grow: 1;
-
-    .sponsored-carousel {
-        font-family: 'Helvetica', Verdana, Geneva, Tahoma, sans-serif;
-        margin: 10px 0;
-        font-size: 24px;
-
-        &::before {
-            content: 'For you';
-        }
-
-        &.sponsoredByOne::before {
-            content: 'Sponsored by ';
-        }
-
-        &.recommended::before {
-            content: 'Recommended';
-        }
-
-        &.sponsoredByMany::before {
-            content: 'Sponsored';
-        }
-    }
-
-    .carousel-wrapper {
-        width: 100%;
-        overflow-x: clip;
-        position: relative;
-    }
-
-    .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;
-        width: 100%;
-
-        .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);
-        }
-
-        &.disabled {
-            cursor: not-allowed;
-            filter: grayscale(100%);
-            opacity: 0.2;
-        }
-
-        &.left {
-            left: -10px;
-
-            &:before {
-                content: "";
-                background: url('//cdn.surfside.io/icons/left-arrow.svg')
-                no-repeat center;
-                width: 40px;
-                height: 40px;
-            }
-        }
-
-        &.right {
-            right: 0;
-
-            &:before {
-                content: "";
-                background: url('//cdn.surfside.io/icons/right-arrow.svg')
-                no-repeat center;
-                width: 40px;
-                height: 40px;
-            }
-
-        }
-    }
+const style = `
+.surf-carousel {
+    display: flex;
+    position: relative;
+    flex-grow: 1;
+
+    .sponsored-carousel {
+        font-family: 'Helvetica', Verdana, Geneva, Tahoma, sans-serif;
+        margin: 10px 0;
+        font-size: 24px;
+
+        &::before {
+            content: 'For you';
+        }
+
+        &.sponsoredByOne::before {
+            content: 'Sponsored by ';
+        }
+
+        &.recommended::before {
+            content: 'Recommended';
+        }
+
+        &.sponsoredByMany::before {
+            content: 'Sponsored';
+        }
+    }
+
+    .carousel-wrapper {
+        width: 100%;
+        overflow-x: clip;
+        position: relative;
+    }
+
+    .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;
+        width: 100%;
+
+        .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);
+        }
+
+        &.disabled {
+            cursor: not-allowed;
+            filter: grayscale(100%);
+            opacity: 0.2;
+        }
+
+        &.left {
+            left: -10px;
+
+            &:before {
+                content: "";
+                background: url('//cdn.surfside.io/icons/left-arrow.svg')
+                no-repeat center;
+                width: 40px;
+                height: 40px;
+            }
+        }
+
+        &.right {
+            right: 0;
+
+            &:before {
+                content: "";
+                background: url('//cdn.surfside.io/icons/right-arrow.svg')
+                no-repeat center;
+                width: 40px;
+                height: 40px;
+            }
+
+        }
+    }
 }`;
 //# sourceMappingURL=Carousel.js.map

package/lib/esm/rendering/ProductCard.js

@@ -105,24 +105,24 @@ export class MissingTrackersError extends Error {
     }
 }
 ;
-const style = `.surf-product-card {
-    width: 100%;
-
-    &.sponsored {
-        position: relative;
-
-        &::after {
-            content: 'Sponsored';
-            position: absolute;
-            font-family: Verdana, Helvetica, 'sans-serif';
-            font-weight: 100;
-            color: #e0e0e0;
-            font-size: 12px;
-            box-sizing: border-box;
-            bottom: 0px;
-            width: 100%;
-            text-align: center;
-        }
-    }
+const style = `.surf-product-card {
+    width: 100%;
+
+    &.sponsored {
+        position: relative;
+
+        &::after {
+            content: 'Sponsored';
+            position: absolute;
+            font-family: Verdana, Helvetica, 'sans-serif';
+            font-weight: 100;
+            color: #e0e0e0;
+            font-size: 12px;
+            box-sizing: border-box;
+            bottom: 0px;
+            width: 100%;
+            text-align: center;
+        }
+    }
 }`;
 //# sourceMappingURL=ProductCard.js.map

package/lib/esm/rendering/Video.js

@@ -169,127 +169,127 @@ const toggleMute = (logger, videoElement, e) => {
         element.classList.remove('muted');
     }
 };
-const template = `<div>
-    <video id="surf-video-container" autoplay muted></video>
-
-    <div class="timer">
-        <svg
-            width="36"
-            height="36"
-            viewBox="-2 2 36 36"
-        >
-            <circle
-                cx="16"
-                cy="16"
-                r="15"
-                stroke="#7b4af4"
-                stroke-width="4"
-                fill="none"
-                class="timer-circle"
-            />
-        </svg>
-        <div class="timer-value"></div>
-    </div>
-
-    <div class="watermark"></div>
-    <div class="mute-button muted"></div>
+const template = `<div>
+    <video id="surf-video-container" autoplay muted></video>
+
+    <div class="timer">
+        <svg
+            width="36"
+            height="36"
+            viewBox="-2 2 36 36"
+        >
+            <circle
+                cx="16"
+                cy="16"
+                r="15"
+                stroke="#7b4af4"
+                stroke-width="4"
+                fill="none"
+                class="timer-circle"
+            />
+        </svg>
+        <div class="timer-value"></div>
+    </div>
+
+    <div class="watermark"></div>
+    <div class="mute-button muted"></div>
 </div>`;
-const style = `@keyframes grow-arc {
-    0% {
-        stroke-dasharray: 0 94;   /* 0% of the circumference */
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 47 94; /* 90 degrees of the circle */
-        stroke-dashoffset: 0;
-    }
-    100% {
-        stroke-dasharray: 94 94; /* Full circle */
-        stroke-dashoffset: 0;
-    }
-}
-
-
-.surfside-video {
-    --icon-muted: url('//cdn.surfside.io/icons/muted.svg');
-    --icon-unmuted: url('//cdn.surfside.io/icons/unmuted.svg');
-
-    position: relative;
-    overflow: hidden;
-
-    video {
-        width: 100%;
-        height: auto;
-    }
-
-    .timer {
-        position: absolute;
-        left: 5px;
-        top: 5px;
-        width: 32px;
-        height: 32px;
-
-        .timer-value {
-            position: absolute;
-            top: 0px;
-            left: 0;
-            width: 36px;
-            height: 36px;
-
-            color: white;
-
-            font-family: Poppins, Arial;
-            text-align: center;
-            font-size: 12px;
-            line-height: 36px;
-        }
-
-        .timer-circle {
-            fill: none;
-            stroke-width: 4;
-            animation-name: grow-arc;
-            animation-iteration-count: 1;
-            animation-timing-function: linear;
-            animation-fill-mode: forwards;
-            transform: rotate(-90deg);
-            transform-origin: 50% 50%;
-        }
-
-    }
-
-    .mute-button {
-        position: absolute;
-        width: 24px;
-        height: 24px;
-        right: 5px;
-        bottom: 5px;
-        cursor: pointer;
-        transition: transform 0.2s;
-        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px white);
-
-        &:hover {
-            transform: scale(1.3);
-        }
-
-        &:active {
-            transform: scale(0.8);
-        }
-
-        &.muted {
-            background-image: var(--icon-muted);
-
-            &:hover {
-                background-image: var(--icon-unmuted);
-            }
-        }
-
-        &.unmuted {
-            background-image: var(--icon-unmuted);
-
-            &:hover {
-                background-image: var(--icon-muted);
-            }
-        }
-    }
+const style = `@keyframes grow-arc {
+    0% {
+        stroke-dasharray: 0 94;   /* 0% of the circumference */
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 47 94; /* 90 degrees of the circle */
+        stroke-dashoffset: 0;
+    }
+    100% {
+        stroke-dasharray: 94 94; /* Full circle */
+        stroke-dashoffset: 0;
+    }
+}
+
+
+.surfside-video {
+    --icon-muted: url('//cdn.surfside.io/icons/muted.svg');
+    --icon-unmuted: url('//cdn.surfside.io/icons/unmuted.svg');
+
+    position: relative;
+    overflow: hidden;
+
+    video {
+        width: 100%;
+        height: auto;
+    }
+
+    .timer {
+        position: absolute;
+        left: 5px;
+        top: 5px;
+        width: 32px;
+        height: 32px;
+
+        .timer-value {
+            position: absolute;
+            top: 0px;
+            left: 0;
+            width: 36px;
+            height: 36px;
+
+            color: white;
+
+            font-family: Poppins, Arial;
+            text-align: center;
+            font-size: 12px;
+            line-height: 36px;
+        }
+
+        .timer-circle {
+            fill: none;
+            stroke-width: 4;
+            animation-name: grow-arc;
+            animation-iteration-count: 1;
+            animation-timing-function: linear;
+            animation-fill-mode: forwards;
+            transform: rotate(-90deg);
+            transform-origin: 50% 50%;
+        }
+
+    }
+
+    .mute-button {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        right: 5px;
+        bottom: 5px;
+        cursor: pointer;
+        transition: transform 0.2s;
+        filter: drop-shadow(0 0 2px white) drop-shadow(0 0 4px white);
+
+        &:hover {
+            transform: scale(1.3);
+        }
+
+        &:active {
+            transform: scale(0.8);
+        }
+
+        &.muted {
+            background-image: var(--icon-muted);
+
+            &:hover {
+                background-image: var(--icon-unmuted);
+            }
+        }
+
+        &.unmuted {
+            background-image: var(--icon-unmuted);
+
+            &:hover {
+                background-image: var(--icon-muted);
+            }
+        }
+    }
 }`;
 //# sourceMappingURL=Video.js.map

package/lib/esm/rendering/Watermark.js

@@ -18,38 +18,38 @@ export const RenderWatermark = (logger) => {
     }
     return Ok(wrapper);
 };
-const template = `<div class="watermark">
-    <a href="https://surfside.io/contact" target="_blank">
-        <div class="watermark-svg">
-            <img src="https://cdn.surfside.io/assets/surfside-logo.svg" alt="Surfside logo"/>
-        </div>
-    </a>
-</div>
+const template = `<div class="watermark">
+    <a href="https://surfside.io/contact" target="_blank">
+        <div class="watermark-svg">
+            <img src="https://cdn.surfside.io/assets/surfside-logo.svg" alt="Surfside logo"/>
+        </div>
+    </a>
+</div>
 `;
-const style = `.watermark {
-    background: rgba(255, 255, 255, 0.7);
-
-    position: absolute;
-    right: -67px;
-    width: 85px;
-    /* transform: scale(0.8); */
-    transform-origin: bottom right;
-    bottom: 0;
-
-    padding: 3px 2px 0px 6px;
-    border-radius: 5px 0 0 5px !important;
-    transition: right 300ms ease-out;
-
-    &:hover {
-        right: 0
-    }
-}
-
-.surfside-video .watermark {
-    top: 0;
-    height: auto;
-    bottom: initial;
-    overflow: hidden;
-}
+const style = `.watermark {
+    background: rgba(255, 255, 255, 0.7);
+
+    position: absolute;
+    right: -67px;
+    width: 85px;
+    /* transform: scale(0.8); */
+    transform-origin: bottom right;
+    bottom: 0;
+
+    padding: 3px 2px 0px 6px;
+    border-radius: 5px 0 0 5px !important;
+    transition: right 300ms ease-out;
+
+    &:hover {
+        right: 0
+    }
+}
+
+.surfside-video .watermark {
+    top: 0;
+    height: auto;
+    bottom: initial;
+    overflow: hidden;
+}
 `;
 //# sourceMappingURL=Watermark.js.map

package/lib/types/Init.d.ts

@@ -0,0 +1,24 @@
+import { type ILoadSurfAdsClientConfiguration, type ISurfAdsCoreConfiguration, type Result, type AsyncResult, type ISurfAdsClientDependencies, type ILogger, type ISurfAdsClientConfigurationOverrides } from '@surfside/ads-core-client';
+import { type ISurfsideWebApi } from '.';
+export interface ISurfAdsWebConfigurationOverrides extends ISurfAdsClientConfigurationOverrides {
+}
+export interface ISurfAdsWebConfiguration extends ISurfAdsCoreConfiguration {
+    overrides?: {
+        services?: Partial<ISurfAdsWebConfigurationOverrides>;
+    };
+}
+export interface ILoadSurfAdsWebConfiguration extends ILoadSurfAdsClientConfiguration {
+    overrides?: {
+        services?: Partial<ISurfAdsWebConfigurationOverrides>;
+        dependencies?: Partial<ISurfAdsWebDependencies>;
+    };
+}
+export interface ISurfAdsWebDependencies extends ISurfAdsClientDependencies {
+}
+export declare const CreateSurfAdsWeb: (config: ISurfAdsWebConfiguration) => Result<ISurfsideWebApi>;
+export declare const LoadSurfAdsWebDependencies: (config: ILoadSurfAdsWebConfiguration) => AsyncResult<ISurfAdsWebDependencies>;
+export declare const LoadSurfAdsWeb: (config: ILoadSurfAdsWebConfiguration) => AsyncResult<ISurfsideWebApi>;
+export declare const LoadSurfAdsWebSimple: (accountId: string, siteId: string, channelId: string, locationId: string, userId?: string, logger?: ILogger, telemetry?: boolean, overrides?: {
+    services?: Partial<ISurfAdsWebConfigurationOverrides>;
+    dependencies?: Partial<ISurfAdsWebDependencies>;
+}) => AsyncResult<ISurfsideWebApi>;

package/lib/types/helpers/WebTelemetryCollector.d.ts

@@ -0,0 +1,24 @@
+import { ITelemetryCollector, type ITelemetryDevice, type ITelemetryEntry } from '@surfside/ads-core-client';
+export interface IWebTelemetryCollectorOptions {
+    accountId: string;
+    siteId: string;
+    channelId: string;
+    locationId: string;
+    endpoint: string;
+    tags?: Record<string, string>;
+    batchIntervalMs?: number;
+    url?: string;
+    device: ITelemetryDevice | undefined;
+}
+export declare class WebTelemetryCollector extends ITelemetryCollector {
+    private readonly _endpoint;
+    private readonly _tags;
+    private readonly _batchIntervalMs;
+    private readonly _pageUrl;
+    private _queue;
+    private _flushTimer;
+    private _device;
+    constructor(options: IWebTelemetryCollectorOptions);
+    record(entry: ITelemetryEntry): void;
+    flush(): void;
+}