@zcomponent/core 0.0.23 → 0.0.24

package/css/zcomponent.css

@@ -119,4 +119,94 @@
 
 .zcomponent-textalert-shown {
     opacity: 1;
+}
+
+.zcomponent-cookieconsent {
+    z-index: 10000000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#zcomponent-cookieconsent-panel {
+    background: white;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    margin-top: auto;
+    max-width: 500px;
+    font-family: sans-serif;
+    padding: 24px;
+    margin-left: 24px;
+    margin-right: 24px;
+    max-height: 80%;
+    overflow: scroll;
+}
+
+#zcomponent-cookieconsent-panel > h1 {
+    font-size: 24px;
+}
+
+#zcomponent-cookieconsent-panel button {
+    padding: 12px 24px;
+    background: none;
+    border: 2px solid black;
+    border-radius: 4px;
+    color: black;
+}
+
+#zcomponent-cookieconsent-panel button {
+    padding: 12px 24px;
+    background: none;
+    border: 2px solid black;
+    border-radius: 4px;
+    color: black;
+    display: block;
+    outline: none;
+}
+
+#zcomponent-cookieconsent-panel #zcomponent-cookieconsent-settings {
+    padding: 0;
+    border: 0;
+    background: none;
+    font-weight: bold;
+    text-decoration: underline;
+    padding-top: 12px;
+}
+
+.zcomponent-cookieconsent-type {
+    position: relative;
+}
+
+.zcomponent-cookieconsent-type input {
+    float: right;
+    /* top: 0px; */
+    /* right: 0px; */
+    width: 32px;
+    height: 32px;
+}
+
+#zcomponent-cookieconsent-panel h3 {
+    margin-bottom: 6px;
+}
+
+#zcomponent-cookieconsent-panel h5 {
+    margin-bottom: 6px;
+}
+
+#zcomponent-cookieconsent-panel #zcomponent-cookieconsent-save {
+    padding-top: 12px;
+}
+
+#zcomponent-cookieconsent-panel ul {
+    list-style-type: none;
+}
+
+#zcomponent-cookieconsent-privacypolicy {
+    padding-bottom: 12px;
 }

package/lib/components/DefaultCookieConsent.d.ts

@@ -0,0 +1,157 @@
+import { Component } from "../component";
+import { ContextManager } from "../context";
+import { Observable } from "../observable";
+export interface DefaultCookieConsentConstructorProps {
+    /**
+     * Show the cookie consent dialog when the experience starts, rather than when the component is initialized.
+     * @zui
+     * @zdefault false
+     */
+    waitForStart: boolean;
+    /**
+     * Only show the cookie consent dialog if the experience contains analytics components that indicate they use cookies.
+     * @zui
+     * @zdefault true
+     */
+    onlyShowIfVendors: boolean;
+    /**
+     * Previews how the consent dialog looks at design time.
+     * @zui
+     * @zdefault false
+     */
+    preview: boolean;
+}
+/**
+ * @zcomponent
+ * @zgroup Cookie Consent
+ * @zicon cookie
+ */
+export declare class DefaultCookieConsent extends Component {
+    constructorProps: DefaultCookieConsentConstructorProps;
+    /**
+     * @zprop
+     * @zgroup Consent Screen
+     * @zgrouppriority 20
+     * @zdefault "This website uses cookies to store information on your computer."
+     */
+    title: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Consent Screen
+     * @zgrouppriority 20
+     * @zdefault "Some of these cookies are essential, while others help us to improve your experience by providing insights into how the site is being used."
+     */
+    description: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Privacy Policy"
+     */
+    privacyPolicyText: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault ""
+     */
+    privacyPolicyURL: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Consent Screen
+     * @zgrouppriority 20
+     * @zdefault "I Accept Cookies"
+     */
+    acceptButton: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Consent Screen
+     * @zgrouppriority 20
+     * @zdefault "Settings"
+     */
+    settingsButton: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Consent Screen
+     * @zgrouppriority 20
+     * @zdefault "Save"
+     */
+    saveButton: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Essential"
+     */
+    essentialTitle: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Cookies that are necessary to provide the service."
+     */
+    essentialDescription: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Functional"
+     */
+    functionalTitle: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Cookies that provide you with useful functionality, such as saving your preferences."
+     */
+    functionalDescription: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Performance"
+     */
+    performanceTitle: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Cookies that help us measure and understand how the site is being used."
+     */
+    performanceDescription: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Marketing"
+     */
+    marketingTitle: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Cookies that help us market our site and services."
+     */
+    marketingDescription: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Required"
+     */
+    required: Observable<string>;
+    private _dom;
+    private _functional;
+    private _performance;
+    private _marketing;
+    constructor(contextManager: ContextManager, constructorProps: DefaultCookieConsentConstructorProps);
+    private _loadDOM;
+    private _save;
+    private _createEntry;
+    private _getConsentStatus;
+    private _setConsentStatus;
+    show(isSettings: boolean): void;
+    hide(): void;
+    acceptAll(): void;
+    dispose(): never;
+}

package/lib/components/DefaultCookieConsent.js

@@ -0,0 +1,205 @@
+import { Component } from "../component";
+import { ConsentStatus, CookieConsentContext, CookieType, Status, useCookieConsentFunctional, useCookieConsentMarketing, useCookieConsentPerformance, useMarketingVendors, usePerformanceVendors } from "../contexts/cookieconsentcontext";
+import { isDesignTime } from "../contexts/environmentcontext";
+import { constructed, started } from "../contexts/loadcontext";
+import { Observable } from "../observable";
+const html = `
+<div id='zcomponent-cookieconsent-panel'>
+	<h1 id='zcomponent-cookieconsent-title'></h1>
+	<p id='zcomponent-cookieconsent-description'></p>
+	<a id='zcomponent-cookieconsent-privacypolicy' target='_blank' ref='noreferrer noopener'></a>
+</div>
+`;
+/**
+ * @zcomponent
+ * @zgroup Cookie Consent
+ * @zicon cookie
+ */
+export class DefaultCookieConsent extends Component {
+    constructor(contextManager, constructorProps) {
+        super(contextManager, constructorProps);
+        this.constructorProps = constructorProps;
+        this._dom = document.createElement('div');
+        this._functional = document.createElement('input');
+        this._performance = document.createElement('input');
+        this._marketing = document.createElement('input');
+        const context = contextManager.get(CookieConsentContext);
+        context.functionalCookies.value = this._getConsentStatus(CookieType.functional);
+        context.performanceCookies.value = this._getConsentStatus(CookieType.performance);
+        context.marketingCookies.value = this._getConsentStatus(CookieType.marketing);
+        context.status.value = Status.initialized;
+        context.showSettings.value = () => this.show(true);
+        this._dom.classList.add('zcomponent-cookieconsent');
+        this.privacyPolicyText = new Observable('Privacy Policy');
+        this.privacyPolicyURL = new Observable('');
+        if (constructorProps.waitForStart)
+            started(contextManager).then(() => this.show(false));
+        else
+            constructed(contextManager).then(() => this.show(false));
+    }
+    _loadDOM(isSettings) {
+        this._dom.innerHTML = html;
+        this._functional.type = 'checkbox';
+        this._performance.type = 'checkbox';
+        this._marketing.type = 'checkbox';
+        const panel = this._dom.querySelector('#zcomponent-cookieconsent-panel');
+        if (!panel)
+            return;
+        const title = this._dom.querySelector('#zcomponent-cookieconsent-title');
+        this.title = new Observable('This website uses cookies to store information on your computer.', v => { if (title)
+            title.textContent = v; });
+        const description = this._dom.querySelector('#zcomponent-cookieconsent-description');
+        this.description = new Observable('Some of these cookies are essential, while others help us to improve your experience by providing insights into how the site is being used.', v => { if (description)
+            description.textContent = v; });
+        const privacyPolicy = this._dom.querySelector('#zcomponent-cookieconsent-privacypolicy');
+        this.privacyPolicyText.addListener(val => { if (privacyPolicy && privacyPolicy instanceof HTMLAnchorElement)
+            privacyPolicy.innerText = val; });
+        this.privacyPolicyURL.addListener(val => {
+            if (!privacyPolicy || !(privacyPolicy instanceof HTMLAnchorElement))
+                return;
+            privacyPolicy.style.display = val.length === 0 ? 'none' : 'block';
+            privacyPolicy.href = val;
+        });
+        if (isSettings) {
+            this.essentialTitle = new Observable('Essential');
+            this.essentialDescription = new Observable('Cookies that are necessary to provide the service.');
+            this.functionalTitle = new Observable('Functional');
+            this.functionalDescription = new Observable('Cookies that provide you with useful functionality, such as saving your preferences.');
+            this.performanceTitle = new Observable('Performance');
+            this.performanceDescription = new Observable('Cookies that help us measure and understand how the site is being used.');
+            this.marketingTitle = new Observable('Marketing');
+            this.marketingDescription = new Observable('Cookies that help us market our site and services.');
+            const requiredDOM = document.createElement('span');
+            requiredDOM.innerText = 'Required';
+            this.required = new Observable('Required', val => requiredDOM.innerText = val);
+            requiredDOM.style.float = 'right';
+            panel.appendChild(this._createEntry(this.essentialTitle, this.essentialDescription, [], requiredDOM));
+            panel.appendChild(this._createEntry(this.functionalTitle, this.functionalDescription, [], this._functional));
+            panel.appendChild(this._createEntry(this.performanceTitle, this.performanceDescription, usePerformanceVendors(this.contextManager), this._performance));
+            panel.appendChild(this._createEntry(this.marketingTitle, this.marketingDescription, useMarketingVendors(this.contextManager), this._marketing));
+            this._functional.checked = useCookieConsentFunctional(this.contextManager).value === ConsentStatus.granted;
+            this._performance.checked = useCookieConsentPerformance(this.contextManager).value === ConsentStatus.granted;
+            this._marketing.checked = useCookieConsentMarketing(this.contextManager).value === ConsentStatus.granted;
+            const saveButton = document.createElement('button');
+            saveButton.id = 'zcomponent-cookieconsent-save';
+            this.saveButton = new Observable('Save', v => { saveButton.textContent = v; });
+            panel.appendChild(saveButton);
+            if (!isDesignTime(this.contextManager)) {
+                saveButton.addEventListener('click', () => this._save());
+            }
+            return;
+        }
+        const acceptButton = document.createElement('button');
+        acceptButton.id = 'zcomponent-cookieconsent-accept';
+        this.acceptButton = new Observable('I Accept Cookies', v => { acceptButton.textContent = v; });
+        panel.appendChild(acceptButton);
+        const settingsButton = document.createElement('button');
+        settingsButton.id = 'zcomponent-cookieconsent-settings';
+        this.settingsButton = new Observable('Settings', v => { settingsButton.textContent = v; });
+        settingsButton.addEventListener('click', () => {
+            console.log('Settings click');
+            this._loadDOM(true);
+        });
+        panel.appendChild(settingsButton);
+        if (!isDesignTime(this.contextManager)) {
+            acceptButton.addEventListener('click', () => this.acceptAll());
+        }
+        this._dom.addEventListener('click', () => { });
+    }
+    _save() {
+        this._setConsentStatus(CookieType.essential, ConsentStatus.granted);
+        this._setConsentStatus(CookieType.functional, this._functional.checked ? ConsentStatus.granted : ConsentStatus.rejected);
+        this._setConsentStatus(CookieType.performance, this._performance.checked ? ConsentStatus.granted : ConsentStatus.rejected);
+        this._setConsentStatus(CookieType.marketing, this._marketing.checked ? ConsentStatus.granted : ConsentStatus.rejected);
+        this.hide();
+    }
+    _createEntry(title, description, vendors, elm) {
+        const container = document.createElement('div');
+        container.classList.add('zcomponent-cookieconsent-type');
+        container.appendChild(elm);
+        const header = document.createElement('h3');
+        title.addListener(val => header.innerText = val);
+        container.appendChild(header);
+        const descriptionDom = document.createElement('div');
+        description.addListener(val => descriptionDom.innerText = val);
+        container.appendChild(descriptionDom);
+        if (vendors.length === 0)
+            return container;
+        const ul = document.createElement('ul');
+        for (const vendor of vendors) {
+            const li = document.createElement('li');
+            ul.appendChild(li);
+            const header = document.createElement('h5');
+            header.innerText = vendor.name;
+            li.appendChild(header);
+            li.append(vendor.description);
+            li.append(document.createElement('br'));
+            if (vendor.privacyPolicyUrl?.length > 0) {
+                const privacy = document.createElement('a');
+                this.privacyPolicyText.addListener(val => privacy.innerText = val);
+                privacy.href = vendor.privacyPolicyUrl;
+                privacy.rel = 'noreferrer noopener';
+                privacy.target = '_blank';
+                li.appendChild(privacy);
+            }
+        }
+        container.appendChild(ul);
+        return container;
+    }
+    _getConsentStatus(type) {
+        const val = window.localStorage.getItem('zcomponent-cookieconsent-' + type);
+        if (val === null)
+            return ConsentStatus.unknown;
+        if (val === '1')
+            return ConsentStatus.granted;
+        return ConsentStatus.rejected;
+    }
+    _setConsentStatus(type, status) {
+        if (status === ConsentStatus.unknown)
+            window.localStorage.removeItem('zcomponent-cookieconsent-' + type);
+        else
+            window.localStorage.setItem('zcomponent-cookieconsent-' + type, status === ConsentStatus.granted ? '1' : '0');
+        if (type === CookieType.functional)
+            useCookieConsentFunctional(this.contextManager).value = status;
+        if (type === CookieType.performance)
+            useCookieConsentPerformance(this.contextManager).value = status;
+        if (type === CookieType.marketing)
+            useCookieConsentMarketing(this.contextManager).value = status;
+    }
+    show(isSettings) {
+        const designTimeOverride = isDesignTime(this.contextManager) && (this.constructorProps.preview ?? false);
+        if (isDesignTime(this.contextManager) && !designTimeOverride)
+            return;
+        const context = this.contextManager.get(CookieConsentContext);
+        if (context.functionalCookies.value !== ConsentStatus.unknown &&
+            context.marketingCookies.value !== ConsentStatus.unknown &&
+            context.performanceCookies.value !== ConsentStatus.unknown &&
+            !designTimeOverride)
+            return;
+        this._loadDOM(isSettings);
+        const acceptedEssential = window.localStorage.getItem('zcomponent-cookieconsent-essential');
+        if (acceptedEssential !== null && !designTimeOverride)
+            return;
+        if ((this.constructorProps.onlyShowIfVendors ?? true) && !designTimeOverride) {
+            const performanceVendors = usePerformanceVendors(this.contextManager);
+            const marketingVendors = useMarketingVendors(this.contextManager);
+            if (performanceVendors.length === 0 && marketingVendors.length === 0)
+                return;
+        }
+        document.body.appendChild(this._dom);
+    }
+    hide() {
+        this._dom.remove();
+    }
+    acceptAll() {
+        this._setConsentStatus(CookieType.essential, ConsentStatus.granted);
+        this._setConsentStatus(CookieType.functional, ConsentStatus.granted);
+        this._setConsentStatus(CookieType.performance, ConsentStatus.granted);
+        this._setConsentStatus(CookieType.marketing, ConsentStatus.granted);
+        this.hide();
+    }
+    dispose() {
+        this._dom.remove();
+        return super.dispose();
+    }
+}

package/lib/contexts/cookieconsentcontext.d.ts

@@ -10,6 +10,12 @@ export declare enum ConsentStatus {
     "granted" = "granted",
     "rejected" = "rejected"
 }
+export declare enum CookieType {
+    "essential" = "essential",
+    "functional" = "functional",
+    "performance" = "performance",
+    "marketing" = "marketing"
+}
 export interface Vendor {
     name: string;
     description: string;

package/lib/contexts/cookieconsentcontext.js

@@ -12,6 +12,13 @@ export var ConsentStatus;
     ConsentStatus["granted"] = "granted";
     ConsentStatus["rejected"] = "rejected";
 })(ConsentStatus || (ConsentStatus = {}));
+export var CookieType;
+(function (CookieType) {
+    CookieType["essential"] = "essential";
+    CookieType["functional"] = "functional";
+    CookieType["performance"] = "performance";
+    CookieType["marketing"] = "marketing";
+})(CookieType || (CookieType = {}));
 export class CookieConsentContext extends Context {
     constructor() {
         super(...arguments);

package/lib/contexts/loadcontext.d.ts

@@ -12,11 +12,14 @@ export declare class LoadContext extends Context {
     progressPercent: Observable<number, never>;
     private _startedResolved;
     started: Promise<void>;
+    private _constructedResolved;
+    constructed: Promise<void>;
     private _loadables;
     private _startWhenLoaded;
     private _totalLoadables;
     private _loadedCount;
     start(): void;
+    constructionComplete(): void;
     private _update;
     startWhenLoaded(): void;
     registerLoadable(p: Promise<any>): void;
@@ -32,3 +35,5 @@ export declare function registerLoadable(mgr: ContextManager, p: Promise<any>):
 export declare function start(mgr: ContextManager): void;
 export declare function startWhenLoaded(mgr: ContextManager): void;
 export declare function started(mgr: ContextManager): Promise<void>;
+export declare function constructed(mgr: ContextManager): Promise<void>;
+export declare function constructionComplete(mgr: ContextManager): void;

package/lib/contexts/loadcontext.js

@@ -13,6 +13,7 @@ export class LoadContext extends Context {
         /** @zui */
         this.progressPercent = new Observable(0);
         this.started = new Promise(resolve => this._startedResolved = resolve);
+        this.constructed = new Promise(resolve => this._constructedResolved = resolve);
         this._loadables = new Set();
         this._startWhenLoaded = false;
         this._totalLoadables = 0;
@@ -26,6 +27,10 @@ export class LoadContext extends Context {
         if (document.body)
             document.body.classList.add('zcomponent-started');
     }
+    constructionComplete() {
+        this._constructedResolved();
+        this.isConstructed.value = true;
+    }
     _update() {
         if (this._loadables.size > 0 && this.isLoaded.value === true) {
             this.isLoaded.value = false;
@@ -94,3 +99,9 @@ export function startWhenLoaded(mgr) {
 export function started(mgr) {
     return mgr.get(LoadContext).started;
 }
+export function constructed(mgr) {
+    return mgr.get(LoadContext).constructed;
+}
+export function constructionComplete(mgr) {
+    return mgr.get(LoadContext).constructionComplete();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",