@zcomponent/core 1.29.0 → 2.0.0-alpha.2

package/lib/components/DefaultCookieConsent.js

@@ -1,8 +1,42 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
 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';
+import { zComponent, zUI } from '../decorators';
 const html = `
 <div id='zcomponent-cookieconsent-panel'>
 	<h1 id='zcomponent-cookieconsent-title'></h1>
@@ -17,326 +51,410 @@ const html = `
  * The component handles the logic for displaying the banner, receiving the user's consent, and storing this consent.
  * It also provides methods to check if the user has already given their consent.
  * @zcomponent
- * @zgroup Cookie Consent
  * @zicon cookie
+ * @zgroup Cookie Consent
  */
-export class DefaultCookieConsent extends Component {
-    /**
-     * Creates an instance of DefaultCookieConsent.
-     * @param contextManager - The current ContextManager
-     * @param constructorProps - The properties of the component
-     */
-    constructor(contextManager, constructorProps) {
-        super(contextManager, constructorProps);
-        this.constructorProps = constructorProps;
+let DefaultCookieConsent = (() => {
+    let _classDecorators = [zComponent({ icon: 'cookie', group: 'Cookie Consent' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Component;
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _description_decorators;
+    let _description_initializers = [];
+    let _description_extraInitializers = [];
+    let _privacyPolicyText_decorators;
+    let _privacyPolicyText_initializers = [];
+    let _privacyPolicyText_extraInitializers = [];
+    let _privacyPolicyURL_decorators;
+    let _privacyPolicyURL_initializers = [];
+    let _privacyPolicyURL_extraInitializers = [];
+    let _acceptButton_decorators;
+    let _acceptButton_initializers = [];
+    let _acceptButton_extraInitializers = [];
+    let _settingsButton_decorators;
+    let _settingsButton_initializers = [];
+    let _settingsButton_extraInitializers = [];
+    let _saveButton_decorators;
+    let _saveButton_initializers = [];
+    let _saveButton_extraInitializers = [];
+    let _essentialTitle_decorators;
+    let _essentialTitle_initializers = [];
+    let _essentialTitle_extraInitializers = [];
+    let _essentialDescription_decorators;
+    let _essentialDescription_initializers = [];
+    let _essentialDescription_extraInitializers = [];
+    let _functionalTitle_decorators;
+    let _functionalTitle_initializers = [];
+    let _functionalTitle_extraInitializers = [];
+    let _functionalDescription_decorators;
+    let _functionalDescription_initializers = [];
+    let _functionalDescription_extraInitializers = [];
+    let _performanceTitle_decorators;
+    let _performanceTitle_initializers = [];
+    let _performanceTitle_extraInitializers = [];
+    let _performanceDescription_decorators;
+    let _performanceDescription_initializers = [];
+    let _performanceDescription_extraInitializers = [];
+    let _marketingTitle_decorators;
+    let _marketingTitle_initializers = [];
+    let _marketingTitle_extraInitializers = [];
+    let _marketingDescription_decorators;
+    let _marketingDescription_initializers = [];
+    let _marketingDescription_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    var DefaultCookieConsent = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _title_decorators = [zUI({ group: 'Consent Screen', priority: 20 })];
+            _description_decorators = [zUI({ group: 'Consent Screen', priority: 20 })];
+            _privacyPolicyText_decorators = [zUI({ group: 'Settings', priority: 10 })];
+            _privacyPolicyURL_decorators = [zUI({ group: 'Settings', priority: 10 })];
+            _acceptButton_decorators = [zUI({ group: 'Consent Screen', priority: 20 })];
+            _settingsButton_decorators = [zUI({ group: 'Consent Screen', priority: 20 })];
+            _saveButton_decorators = [zUI({ group: 'Settings', priority: 10 })];
+            _essentialTitle_decorators = [zUI({ group: 'Settings', priority: 10 })];
+            _essentialDescription_decorators = [zUI({ group: 'Settings', priority: 10 })];
+            _functionalTitle_decorators = [zUI({ group: 'Settings', priority: 10 })];
+            _functionalDescription_decorators = [zUI({ group: 'Settings', priority: 10 })];
+            _performanceTitle_decorators = [zUI({ group: 'Settings', priority: 10 })];
+            _performanceDescription_decorators = [zUI({ group: 'Settings', priority: 10 })];
+            _marketingTitle_decorators = [zUI({ group: 'Settings', priority: 10 })];
+            _marketingDescription_decorators = [zUI({ group: 'Settings', priority: 10 })];
+            _required_decorators = [zUI({ group: 'Settings', priority: 10 })];
+            __esDecorate(null, null, _title_decorators, { kind: "field", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
+            __esDecorate(null, null, _description_decorators, { kind: "field", name: "description", static: false, private: false, access: { has: obj => "description" in obj, get: obj => obj.description, set: (obj, value) => { obj.description = value; } }, metadata: _metadata }, _description_initializers, _description_extraInitializers);
+            __esDecorate(null, null, _privacyPolicyText_decorators, { kind: "field", name: "privacyPolicyText", static: false, private: false, access: { has: obj => "privacyPolicyText" in obj, get: obj => obj.privacyPolicyText, set: (obj, value) => { obj.privacyPolicyText = value; } }, metadata: _metadata }, _privacyPolicyText_initializers, _privacyPolicyText_extraInitializers);
+            __esDecorate(null, null, _privacyPolicyURL_decorators, { kind: "field", name: "privacyPolicyURL", static: false, private: false, access: { has: obj => "privacyPolicyURL" in obj, get: obj => obj.privacyPolicyURL, set: (obj, value) => { obj.privacyPolicyURL = value; } }, metadata: _metadata }, _privacyPolicyURL_initializers, _privacyPolicyURL_extraInitializers);
+            __esDecorate(null, null, _acceptButton_decorators, { kind: "field", name: "acceptButton", static: false, private: false, access: { has: obj => "acceptButton" in obj, get: obj => obj.acceptButton, set: (obj, value) => { obj.acceptButton = value; } }, metadata: _metadata }, _acceptButton_initializers, _acceptButton_extraInitializers);
+            __esDecorate(null, null, _settingsButton_decorators, { kind: "field", name: "settingsButton", static: false, private: false, access: { has: obj => "settingsButton" in obj, get: obj => obj.settingsButton, set: (obj, value) => { obj.settingsButton = value; } }, metadata: _metadata }, _settingsButton_initializers, _settingsButton_extraInitializers);
+            __esDecorate(null, null, _saveButton_decorators, { kind: "field", name: "saveButton", static: false, private: false, access: { has: obj => "saveButton" in obj, get: obj => obj.saveButton, set: (obj, value) => { obj.saveButton = value; } }, metadata: _metadata }, _saveButton_initializers, _saveButton_extraInitializers);
+            __esDecorate(null, null, _essentialTitle_decorators, { kind: "field", name: "essentialTitle", static: false, private: false, access: { has: obj => "essentialTitle" in obj, get: obj => obj.essentialTitle, set: (obj, value) => { obj.essentialTitle = value; } }, metadata: _metadata }, _essentialTitle_initializers, _essentialTitle_extraInitializers);
+            __esDecorate(null, null, _essentialDescription_decorators, { kind: "field", name: "essentialDescription", static: false, private: false, access: { has: obj => "essentialDescription" in obj, get: obj => obj.essentialDescription, set: (obj, value) => { obj.essentialDescription = value; } }, metadata: _metadata }, _essentialDescription_initializers, _essentialDescription_extraInitializers);
+            __esDecorate(null, null, _functionalTitle_decorators, { kind: "field", name: "functionalTitle", static: false, private: false, access: { has: obj => "functionalTitle" in obj, get: obj => obj.functionalTitle, set: (obj, value) => { obj.functionalTitle = value; } }, metadata: _metadata }, _functionalTitle_initializers, _functionalTitle_extraInitializers);
+            __esDecorate(null, null, _functionalDescription_decorators, { kind: "field", name: "functionalDescription", static: false, private: false, access: { has: obj => "functionalDescription" in obj, get: obj => obj.functionalDescription, set: (obj, value) => { obj.functionalDescription = value; } }, metadata: _metadata }, _functionalDescription_initializers, _functionalDescription_extraInitializers);
+            __esDecorate(null, null, _performanceTitle_decorators, { kind: "field", name: "performanceTitle", static: false, private: false, access: { has: obj => "performanceTitle" in obj, get: obj => obj.performanceTitle, set: (obj, value) => { obj.performanceTitle = value; } }, metadata: _metadata }, _performanceTitle_initializers, _performanceTitle_extraInitializers);
+            __esDecorate(null, null, _performanceDescription_decorators, { kind: "field", name: "performanceDescription", static: false, private: false, access: { has: obj => "performanceDescription" in obj, get: obj => obj.performanceDescription, set: (obj, value) => { obj.performanceDescription = value; } }, metadata: _metadata }, _performanceDescription_initializers, _performanceDescription_extraInitializers);
+            __esDecorate(null, null, _marketingTitle_decorators, { kind: "field", name: "marketingTitle", static: false, private: false, access: { has: obj => "marketingTitle" in obj, get: obj => obj.marketingTitle, set: (obj, value) => { obj.marketingTitle = value; } }, metadata: _metadata }, _marketingTitle_initializers, _marketingTitle_extraInitializers);
+            __esDecorate(null, null, _marketingDescription_decorators, { kind: "field", name: "marketingDescription", static: false, private: false, access: { has: obj => "marketingDescription" in obj, get: obj => obj.marketingDescription, set: (obj, value) => { obj.marketingDescription = value; } }, metadata: _metadata }, _marketingDescription_initializers, _marketingDescription_extraInitializers);
+            __esDecorate(null, null, _required_decorators, { kind: "field", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            DefaultCookieConsent = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructorProps;
         /**
-         * @zprop
+         * @default "This website uses cookies to store information on your computer."
+         * @zui
          * @zgroup Consent Screen
-         * @zgrouppriority 20
-         * @zdefault "This website uses cookies to store information on your computer."
          */
-        this.title = new Observable('This website uses cookies to store information on your computer.');
+        title = __runInitializers(this, _title_initializers, 'This website uses cookies to store information on your computer.');
         /**
-         * @zprop
+         * @default "Some of these cookies are essential, while others help us to improve your experience by providing insights into how the site is being used."
+         * @zui
          * @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."
          */
-        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.');
+        description = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _description_initializers, 'Some of these cookies are essential, while others help us to improve your experience by providing insights into how the site is being used.'));
         /**
-         * @zprop
+         * @default "Privacy Policy"
+         * @zui
          * @zgroup Settings
-         * @zgrouppriority 10
-         * @zdefault "Privacy Policy"
          */
-        this.privacyPolicyText = new Observable('Privacy Policy');
+        privacyPolicyText = (__runInitializers(this, _description_extraInitializers), __runInitializers(this, _privacyPolicyText_initializers, 'Privacy Policy'));
         /**
-         * @zprop
+         * @default ""
+         * @zui
          * @zgroup Settings
-         * @zgrouppriority 10
-         * @zdefault ""
          */
-        this.privacyPolicyURL = new Observable('');
+        privacyPolicyURL = (__runInitializers(this, _privacyPolicyText_extraInitializers), __runInitializers(this, _privacyPolicyURL_initializers, ''));
         /**
-         * @zprop
+         * @default "I Accept Cookies"
+         * @zui
          * @zgroup Consent Screen
-         * @zgrouppriority 20
-         * @zdefault "I Accept Cookies"
          */
-        this.acceptButton = new Observable('I Accept Cookies');
+        acceptButton = (__runInitializers(this, _privacyPolicyURL_extraInitializers), __runInitializers(this, _acceptButton_initializers, 'I Accept Cookies'));
         /**
-         * @zprop
+         * @default "Settings"
+         * @zui
          * @zgroup Consent Screen
-         * @zgrouppriority 20
-         * @zdefault "Settings"
          */
-        this.settingsButton = new Observable('Settings');
+        settingsButton = (__runInitializers(this, _acceptButton_extraInitializers), __runInitializers(this, _settingsButton_initializers, 'Settings'));
         /**
-         * @zprop
-         * @zgroup Consent Screen
-         * @zgrouppriority 20
-         * @zdefault "Save"
+         * @default "Save"
+         * @zui
+         * @zgroup Settings
          */
-        this.saveButton = new Observable('Save');
+        saveButton = (__runInitializers(this, _settingsButton_extraInitializers), __runInitializers(this, _saveButton_initializers, 'Save'));
         /**
-         * @zprop
+         * @default "Essential"
+         * @zui
          * @zgroup Settings
-         * @zgrouppriority 10
-         * @zdefault "Essential"
          */
-        this.essentialTitle = new Observable('Essential');
+        essentialTitle = (__runInitializers(this, _saveButton_extraInitializers), __runInitializers(this, _essentialTitle_initializers, 'Essential'));
         /**
-         * @zprop
+         * @default "Cookies that are necessary to provide the service."
+         * @zui
          * @zgroup Settings
-         * @zgrouppriority 10
-         * @zdefault "Cookies that are necessary to provide the service."
          */
-        this.essentialDescription = new Observable('Cookies that are necessary to provide the service.');
+        essentialDescription = (__runInitializers(this, _essentialTitle_extraInitializers), __runInitializers(this, _essentialDescription_initializers, 'Cookies that are necessary to provide the service.'));
         /**
-         * @zprop
+         * @default "Functional"
+         * @zui
          * @zgroup Settings
-         * @zgrouppriority 10
-         * @zdefault "Functional"
          */
-        this.functionalTitle = new Observable('Functional');
+        functionalTitle = (__runInitializers(this, _essentialDescription_extraInitializers), __runInitializers(this, _functionalTitle_initializers, 'Functional'));
         /**
-         * @zprop
+         * @default "Cookies that provide you with useful functionality, such as saving your preferences."
+         * @zui
          * @zgroup Settings
-         * @zgrouppriority 10
-         * @zdefault "Cookies that provide you with useful functionality, such as saving your preferences."
          */
-        this.functionalDescription = new Observable('Cookies that provide you with useful functionality, such as saving your preferences.');
+        functionalDescription = (__runInitializers(this, _functionalTitle_extraInitializers), __runInitializers(this, _functionalDescription_initializers, 'Cookies that provide you with useful functionality, such as saving your preferences.'));
         /**
-         * @zprop
+         * @default "Performance"
+         * @zui
          * @zgroup Settings
-         * @zgrouppriority 10
-         * @zdefault "Performance"
          */
-        this.performanceTitle = new Observable('Performance');
+        performanceTitle = (__runInitializers(this, _functionalDescription_extraInitializers), __runInitializers(this, _performanceTitle_initializers, 'Performance'));
         /**
-         * @zprop
+         * @default "Cookies that help us measure and understand how the site is being used."
+         * @zui
          * @zgroup Settings
-         * @zgrouppriority 10
-         * @zdefault "Cookies that help us measure and understand how the site is being used."
          */
-        this.performanceDescription = new Observable('Cookies that help us measure and understand how the site is being used.');
+        performanceDescription = (__runInitializers(this, _performanceTitle_extraInitializers), __runInitializers(this, _performanceDescription_initializers, 'Cookies that help us measure and understand how the site is being used.'));
         /**
-         * @zprop
+         * @default "Marketing"
+         * @zui
          * @zgroup Settings
-         * @zgrouppriority 10
-         * @zdefault "Marketing"
          */
-        this.marketingTitle = new Observable('Marketing');
+        marketingTitle = (__runInitializers(this, _performanceDescription_extraInitializers), __runInitializers(this, _marketingTitle_initializers, 'Marketing'));
         /**
-         * @zprop
+         * @default "Cookies that help us market our site and services."
+         * @zui
          * @zgroup Settings
-         * @zgrouppriority 10
-         * @zdefault "Cookies that help us market our site and services."
          */
-        this.marketingDescription = new Observable('Cookies that help us market our site and services.');
+        marketingDescription = (__runInitializers(this, _marketingTitle_extraInitializers), __runInitializers(this, _marketingDescription_initializers, 'Cookies that help us market our site and services.'));
         /**
-         * @zprop
+         * @default "Required"
+         * @zui
          * @zgroup Settings
-         * @zgrouppriority 10
-         * @zdefault "Required"
          */
-        this.required = new Observable('Required');
-        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');
-        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.addListener(v => {
-            if (title)
-                title.textContent = v;
-        }, undefined, true);
-        const description = this._dom.querySelector('#zcomponent-cookieconsent-description');
-        this.description.addListener(v => {
-            if (description)
-                description.textContent = v;
-        }, undefined, true);
-        const privacyPolicy = this._dom.querySelector('#zcomponent-cookieconsent-privacypolicy');
-        this.privacyPolicyText.addListener(val => {
-            if (privacyPolicy && privacyPolicy instanceof HTMLAnchorElement)
-                privacyPolicy.innerText = val;
-        }, undefined, true);
-        this.privacyPolicyURL.addListener(val => {
-            if (!privacyPolicy || !(privacyPolicy instanceof HTMLAnchorElement))
+        required = (__runInitializers(this, _marketingDescription_extraInitializers), __runInitializers(this, _required_initializers, 'Required'));
+        _dom = (__runInitializers(this, _required_extraInitializers), document.createElement('div'));
+        _functional = document.createElement('input');
+        _performance = document.createElement('input');
+        _marketing = document.createElement('input');
+        /**
+         * Creates an instance of DefaultCookieConsent.
+         * @param contextManager - The current ContextManager
+         * @param constructorProps - The properties of the component
+         */
+        constructor(contextManager, constructorProps) {
+            super(contextManager, constructorProps);
+            this.constructorProps = constructorProps;
+            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');
+            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;
-            privacyPolicy.style.display = val.length === 0 ? 'none' : 'block';
-            privacyPolicy.href = val;
-        }, undefined, true);
-        if (isSettings) {
-            const requiredDOM = document.createElement('span');
-            requiredDOM.innerText = 'Required';
-            this.required.addListener(v => {
-                if (requiredDOM)
-                    requiredDOM.textContent = v;
-            }, undefined, true);
-            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.addListener(v => {
-                if (saveButton)
-                    saveButton.textContent = v;
-            }, undefined, true);
-            panel.appendChild(saveButton);
+            const title = this._dom.querySelector('#zcomponent-cookieconsent-title');
+            this.observe(this, 'title', v => {
+                if (title)
+                    title.textContent = v;
+            }, { callImmediately: true });
+            const description = this._dom.querySelector('#zcomponent-cookieconsent-description');
+            this.observe(this, 'description', v => {
+                if (description)
+                    description.textContent = v;
+            }, { callImmediately: true });
+            const privacyPolicy = this._dom.querySelector('#zcomponent-cookieconsent-privacypolicy');
+            this.observe(this, 'privacyPolicyText', val => {
+                if (privacyPolicy && privacyPolicy instanceof HTMLAnchorElement)
+                    privacyPolicy.innerText = val;
+            }, { callImmediately: true });
+            this.observe(this, 'privacyPolicyURL', val => {
+                if (!privacyPolicy || !(privacyPolicy instanceof HTMLAnchorElement))
+                    return;
+                privacyPolicy.style.display = val.length === 0 ? 'none' : 'block';
+                privacyPolicy.href = val;
+            }, { callImmediately: true });
+            if (isSettings) {
+                const requiredDOM = document.createElement('span');
+                requiredDOM.innerText = 'Required';
+                this.observe(this, 'required', v => {
+                    if (requiredDOM)
+                        requiredDOM.textContent = v;
+                }, { callImmediately: true });
+                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.observe(this, 'saveButton', v => {
+                    if (saveButton)
+                        saveButton.textContent = v;
+                }, { callImmediately: true });
+                panel.appendChild(saveButton);
+                if (!isDesignTime(this.contextManager)) {
+                    saveButton.addEventListener('click', () => this._save());
+                }
+                return;
+            }
+            const acceptButton = document.createElement('button');
+            acceptButton.id = 'zcomponent-cookieconsent-accept';
+            this.observe(this, 'acceptButton', v => {
+                if (acceptButton)
+                    acceptButton.textContent = v;
+            }, { callImmediately: true });
+            panel.appendChild(acceptButton);
+            const settingsButton = document.createElement('button');
+            settingsButton.id = 'zcomponent-cookieconsent-settings';
+            this.observe(this, 'settingsButton', v => {
+                if (settingsButton)
+                    settingsButton.textContent = v;
+            }, { callImmediately: true });
+            settingsButton.addEventListener('click', () => {
+                console.log('Settings click');
+                this._loadDOM(true);
+            });
+            panel.appendChild(settingsButton);
             if (!isDesignTime(this.contextManager)) {
-                saveButton.addEventListener('click', () => this._save());
+                acceptButton.addEventListener('click', () => this.acceptAll());
             }
-            return;
+            this._dom.addEventListener('click', () => { });
         }
-        const acceptButton = document.createElement('button');
-        acceptButton.id = 'zcomponent-cookieconsent-accept';
-        this.acceptButton.addListener(v => {
-            if (acceptButton)
-                acceptButton.textContent = v;
-        }, undefined, true);
-        panel.appendChild(acceptButton);
-        const settingsButton = document.createElement('button');
-        settingsButton.id = 'zcomponent-cookieconsent-settings';
-        this.settingsButton.addListener(v => {
-            if (settingsButton)
-                settingsButton.textContent = v;
-        }, undefined, true);
-        settingsButton.addEventListener('click', () => {
-            console.log('Settings click');
-            this._loadDOM(true);
-        });
-        panel.appendChild(settingsButton);
-        if (!isDesignTime(this.contextManager)) {
-            acceptButton.addEventListener('click', () => this.acceptAll());
+        _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();
         }
-        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), undefined, true);
-        container.appendChild(header);
-        const descriptionDom = document.createElement('div');
-        description.addListener(val => (descriptionDom.innerText = val), undefined, true);
-        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), undefined, true);
-                privacy.href = vendor.privacyPolicyUrl;
-                privacy.rel = 'noreferrer noopener';
-                privacy.target = '_blank';
-                li.appendChild(privacy);
+        _createEntry(title, description, vendors, elm) {
+            const container = document.createElement('div');
+            container.classList.add('zcomponent-cookieconsent-type');
+            container.appendChild(elm);
+            const header = document.createElement('h3');
+            header.innerText = title;
+            container.appendChild(header);
+            const descriptionDom = document.createElement('div');
+            descriptionDom.innerText = description;
+            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.observe(this, 'privacyPolicyText', val => {
+                        privacy.innerText = val;
+                    }, { callImmediately: true });
+                    privacy.href = vendor.privacyPolicyUrl;
+                    privacy.rel = 'noreferrer noopener';
+                    privacy.target = '_blank';
+                    li.appendChild(privacy);
+                }
             }
+            container.appendChild(ul);
+            return container;
         }
-        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;
-    }
-    /**
-     * Shows the cookie consent dialog.
-     * @param isSettings - Determines if the settings screen should be shown
-     * @param force - Forces the dialog to be shown, regardless of the current consent status. Defaults to false.
-     */
-    show(isSettings, force = false) {
-        if (force) {
+        _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;
+        }
+        /**
+         * Shows the cookie consent dialog.
+         * @param isSettings - Determines if the settings screen should be shown
+         * @param force - Forces the dialog to be shown, regardless of the current consent status. Defaults to false.
+         */
+        show(isSettings, force = false) {
+            if (force) {
+                this._loadDOM(isSettings);
+                document.body.appendChild(this._dom);
+                return;
+            }
+            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);
-            return;
         }
-        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;
+        hide() {
+            this._dom.remove();
         }
-        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();
-    }
-}
+        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();
+        }
+    };
+    return DefaultCookieConsent = _classThis;
+})();
+export { DefaultCookieConsent };