@carbon/ibmdotcom-web-components 2.28.0 → 2.30.0

package/es/components/notice-choice/notice-choice.js

@@ -14,7 +14,8 @@ let _ = t => t,
   _t9,
   _t10,
   _t11,
-  _t12;
+  _t12,
+  _t13;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _superPropGet(t, e, r, o) { var p = _get(_getPrototypeOf(1 & o ? t.prototype : t), e, r); return 2 & o ? function (t) { return p.apply(r, t); } : p; }
@@ -34,7 +35,7 @@ function _superPropGet(t, e, r, o) { var p = _get(_getPrototypeOf(1 & o ? t.prot
      * LICENSE file in the root directory of this source tree.
      */
 
-import { loadContent, loadSettings } from "./services.js";
+import { loadContent, loadSettings, checkEmailStatus } from "./services.js";
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { pwsValueMap, resetToWorldWideContent, supportedLanguages } from "./utils.js";
@@ -43,16 +44,17 @@ import StableSelectorMixin from "../../globals/mixins/stable-selector.js";
 import styles from "././notice-choice.css.js";
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import '@carbon/web-components/es/components/skeleton-text/index.js';
 const {
   prefix,
   stablePrefix: c4dPrefix
 } = settings;
-
 /**
  * Notice Choice
  *
  * @element c4d-notice-choice
  * @fires c4d-notice-choice-change
+ * @fires c4d-notice-choice-email-status-changed
  * The custom event fired when default choice loaded or user change some preferences.
  * The field and value should be taken from the detail object and send it to MRS.
  * @csspart checkbox-wrapper - The checkbox wrapper. Usage `c4d-notice-choice::part(checkbox-wrapper)`
@@ -84,6 +86,16 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
       value() {
         return '1';
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: String,
+        attribute: 'email'
+      })],
+      key: "email",
+      value() {
+        return '';
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -114,16 +126,6 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
       value() {
         return 'en';
       }
-    }, {
-      kind: "field",
-      decorators: [property({
-        type: String,
-        attribute: 'current-language'
-      })],
-      key: "currentLanguage",
-      value() {
-        return 'en';
-      }
     }, {
       kind: "field",
       decorators: [property({
@@ -137,51 +139,41 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
     }, {
       kind: "field",
       decorators: [property({
-        type: Boolean,
+        type: String,
         attribute: 'enable-all-opt-in'
       })],
       key: "enableAllOptIn",
       value() {
-        return false;
+        return 'false';
       }
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'default-values'
-      })],
-      key: "defaultValues",
-      value() {
-        return {};
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        type: Boolean,
+        type: String,
         attribute: 'hide-error-message'
       })],
       key: "hideErrorMessage",
       value() {
-        return false;
+        return 'false';
       }
     }, {
       kind: "field",
       decorators: [property({
-        type: Boolean,
-        attribute: 'combine-email-phone'
+        type: String,
+        attribute: 'environment'
       })],
-      key: "combineEmailPhone",
+      key: "environment",
       value() {
-        return false;
+        return 'prod';
       }
     }, {
       kind: "field",
       decorators: [property({
-        type: String,
-        attribute: 'environment'
+        attribute: 'default-values'
       })],
-      key: "environment",
+      key: "defaultValues",
       value() {
-        return 'prod';
+        return {};
       }
     }, {
       kind: "field",
@@ -276,7 +268,7 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
         type: Boolean,
         attribute: false
       })],
-      key: "emailPrechecked",
+      key: "emailValid",
       value() {
         return false;
       }
@@ -300,6 +292,36 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
       value() {
         return false;
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: false
+      })],
+      key: "isAnnualPeriodExpired",
+      value() {
+        return true;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: false
+      })],
+      key: "showCheckBox",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: false
+      })],
+      key: "isLoading",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -338,44 +360,39 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
     }, {
       kind: "field",
       decorators: [property({
-        reflect: true
+        type: Object,
+        attribute: false
       })],
-      key: "hiddenEmail",
+      key: "valuesForEmailPhone",
       value() {
-        return '';
+        return {
+          EMAIL: {
+            checkBoxStatus: 'PERMISSION',
+            punsStatus: ''
+          }
+        };
       }
     }, {
       kind: "field",
       decorators: [property({
         reflect: true
       })],
-      key: "hiddenPhone",
-      value() {
-        return '';
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        reflect: true,
-        attribute: 'nc-tele-detail'
-      })],
-      key: "ncTeleDetail",
+      key: "hiddenEmail",
       value() {
         return '';
       }
     }, {
       kind: "field",
       decorators: [property({
-        reflect: true,
-        attribute: 'nc-email-detail'
+        reflect: true
       })],
-      key: "ncEmailDetail",
+      key: "hiddenPhone",
       value() {
         return '';
       }
     }, {
       kind: "method",
-      key: "prepareCheckboxes",
+      key: "connectedCallback",
       value:
       /**
        * properties for passed attributes.
@@ -389,284 +406,199 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
        * properties for local state state management.
        */
 
-      function prepareCheckboxes() {
-        if (this.ncData) {
-          const OptInContent = this.ncData;
-          this.preText = OptInContent.preText;
-          this.defaultPreText = OptInContent.preText;
-          const newCheckboxes = this._buildCheckboxes();
-          this.checkboxes = newCheckboxes;
-          this.performUpdate();
-        }
-      }
-    }, {
-      kind: "method",
-      key: "defaultLoadContent",
-      value: function defaultLoadContent() {
-        loadContent('en', this.environment, ncData => {
-          this.ncData = ncData;
-          this.prepareCheckboxes();
-          this.countryChanged();
-        }, error => {
-          console.error('error loading content', error);
-        });
-      }
-    }, {
-      kind: "method",
-      key: "defaultLoadSettings",
-      value: function defaultLoadSettings() {
-        loadSettings(this.environment, countryPreferencesSettings => {
-          this.countrySettings = countryPreferencesSettings.preferences;
-          this.noticeOnly = countryPreferencesSettings.noticeOnly || ['us'];
-        }, error => {
-          console.error('error loading content', error);
-        });
-      }
-    }, {
-      kind: "method",
-      key: "connectedCallback",
-      value: function connectedCallback() {
+      function connectedCallback() {
         _superPropGet(NoticeChoice, "connectedCallback", this, 3)([]);
-        const [language] = this.language.split(/[-_]/);
-        let defaultLanguage = 'en';
-        if (supportedLanguages(this.language)) {
-          defaultLanguage = supportedLanguages(this.language);
-        } else if (supportedLanguages(language)) {
-          defaultLanguage = supportedLanguages(language);
-        }
-        loadSettings(this.environment, countryPreferencesSettings => {
-          this.countrySettings = countryPreferencesSettings.preferences;
-          this.noticeOnly = countryPreferencesSettings.noticeOnly || ['us'];
-        }, () => {
-          this.countrySettings = this.defaultLoadSettings();
-        });
-        loadContent(defaultLanguage, this.environment, ncData => {
-          this.ncData = ncData;
-          this.prepareCheckboxes();
-          this.countryChanged();
-        }, () => {
-          this.defaultLoadContent();
-        });
+        this._initSettingsAndContent(this.language);
       }
     }, {
-      kind: "method",
-      key: "setDefaultSelections",
-      value: function setDefaultSelections() {
-        if (!this.enableAllOptIn && this.checkboxes) {
-          const newValues = _objectSpread({}, this.values);
-          Object.keys(this.checkboxes).forEach(key => {
-            const option = this._getOptionByQuestion(key);
-            newValues[key] = !!(option.checked === 'true' || option.checked === true);
-            if (this.defaultValues && Object.prototype.hasOwnProperty.call(this.defaultValues, key)) {
-              newValues[key] = this.defaultValues[key];
-            }
-            const hiddenFieldName = `NC_HIDDEN_${key}`;
-            newValues[hiddenFieldName] = option[hiddenFieldName];
-            this._onChange(hiddenFieldName, newValues.EMAIL ? 'OPT_IN' : 'OPT_OUT');
-          });
-          if (JSON.stringify(this.values) !== JSON.stringify(newValues)) {
-            this.values = newValues;
-          }
-        }
+      kind: "get",
+      static: true,
+      key: "stableSelector",
+      value: function () {
+        return `${c4dPrefix}--notice-choice`;
       }
     }, {
-      kind: "method",
-      key: "countryChangeAction",
-      value: function countryChangeAction() {
-        var _this$ncData, _this$country;
-        this.preventFormSubmission = false;
-        if ((_this$ncData = this.ncData) !== null && _this$ncData !== void 0 && _this$ncData.mandatoryCheckbox[(_this$country = this.country) === null || _this$country === void 0 ? void 0 : _this$country.toLocaleLowerCase()]) {
-          var _this$country2, _this$ncData2, _this$ncData3, _this$ncData4;
-          const countyCode = (_this$country2 = this.country) === null || _this$country2 === void 0 ? void 0 : _this$country2.toLocaleLowerCase();
-          const mrsField = (_this$ncData2 = this.ncData) !== null && _this$ncData2 !== void 0 && _this$ncData2.mandatoryCheckbox[countyCode].countryTransferText ? (_this$ncData3 = this.ncData) === null || _this$ncData3 === void 0 ? void 0 : _this$ncData3.mandatoryCheckbox[countyCode].countryTransferText.mrs_field : (_this$ncData4 = this.ncData) === null || _this$ncData4 === void 0 ? void 0 : _this$ncData4.mandatoryCheckbox[countyCode].chinaPIPLtext.mrs_field;
-          this._onChange(mrsField, 'countyBasedCheckedNo');
-          this.isMandatoryCheckboxDisplayed.countryCode = countyCode;
-          this.isMandatoryCheckboxDisplayed.isDisplayed = true;
-          this.preventFormSubmission = true;
-          this._onChange('preventFormSubmission', 'formSubmissionNo');
-        } else {
-          this._onChange('preventFormSubmission', 'formSubmissionYes');
-        }
-
-        /**
-         * @description if the user already interacted with the checkboxes,
-         * skip country default selection.
-         */
-        if (!this.changed && !this.fetchedPref) {
-          /**
-           * @description
-           * change checkbox checked option based on new country.
-           */
-
-          this.setDefaultSelections();
-        }
+      kind: "field",
+      static: true,
+      key: "styles",
+      value() {
+        return styles;
       }
     }, {
       kind: "method",
-      key: "countryChanged",
-      value: function countryChanged() {
-        resetToWorldWideContent();
-        this.countryChangeAction();
+      key: "updated",
+      value: function updated(changedProps) {
+        changedProps.forEach((oldValue, propName) => {
+          const newValue = this[propName];
+          const hasValue = newValue !== undefined && newValue !== null;
+          this._dispatchChange(propName, newValue, hasValue, oldValue);
+        });
       }
-      /**
-       *
-       * @param name name of the attribute
-       * @param oldVal old value of the attribute
-       * @param newVal new value of the attrbute
-       */
     }, {
       kind: "method",
-      key: "attributeChangedCallback",
-      value: function attributeChangedCallback(name, oldVal, newVal) {
-        const hasValue = newVal !== null && oldVal !== null;
-        _superPropGet(NoticeChoice, "attributeChangedCallback", this, 3)([name, oldVal, newVal]);
-        switch (name) {
-          case 'question-choices':
+      key: "_dispatchChange",
+      value: function _dispatchChange(field, value, hasValue, oldValue) {
+        switch (field) {
+          case 'questionchoices':
             {
-              // Reload checkbox options when questionchoices changed
-              if (oldVal !== newVal) {
-                this.prepareCheckboxes();
-                this.setDefaultSelections();
-              }
+              this.prepareCheckboxes();
+              this.setDefaultSelections();
               break;
             }
           case 'language':
           case 'environment':
             {
-              // load content when locale changed.
-              const [language] = newVal.split(/[-_]/);
-              let defaultLanguage = 'en';
-              if (supportedLanguages(newVal)) {
-                defaultLanguage = supportedLanguages(newVal);
-              } else if (supportedLanguages(language)) {
-                defaultLanguage = supportedLanguages(language);
-              }
-              this.currentLanguage = defaultLanguage;
-              if (hasValue && oldVal !== newVal) {
-                loadSettings(this.environment, countryPreferencesSettings => {
-                  this.countrySettings = countryPreferencesSettings.preferences;
-                }, error => {
-                  console.error('error loading content', error);
-                });
-                loadContent(defaultLanguage, this.environment, ncData => {
-                  this.ncData = ncData;
-                  this.prepareCheckboxes();
-                }, () => {
-                  this.defaultLoadContent();
-                });
+              var _this$language;
+              if (['stage', 'prod'].includes(value)) {
+                this.environment = value;
+              } else {
+                this.language = value;
               }
+              const langPart = (_this$language = this.language) === null || _this$language === void 0 ? void 0 : _this$language.split(/[-_]/)[0];
+              const supportedLang = supportedLanguages(this.language) || supportedLanguages(langPart) || 'en';
+              this.isLoading = true;
+              loadSettings(this.environment, settings => {
+                this.countrySettings = settings.preferences;
+              }, err => console.error('error loading settings', err));
+              loadContent(supportedLang, this.environment, ncData => {
+                this.isLoading = false;
+                this.ncData = ncData;
+                this.prepareCheckboxes();
+              }, () => this.defaultLoadContent());
               break;
             }
           case 'country':
             {
-              /**
-               * load content when country value changed.
-               */
-              if (hasValue && oldVal !== newVal && this.countrySettings[newVal.toLocaleLowerCase()]) {
+              var _this$countrySettings;
+              if (hasValue && typeof value === 'string' && oldValue !== value && (_this$countrySettings = this.countrySettings) !== null && _this$countrySettings !== void 0 && _this$countrySettings[value.toLowerCase()]) {
                 this.countryChanged();
               }
               break;
             }
-          case 'enable-all-opt-in':
-            if (oldVal !== newVal) {
-              this.enableAllOptIn = JSON.parse(newVal);
-              this.setDefaultSelections();
+          case 'enableAllOptIn':
+            {
+              if (oldValue !== value && typeof value === 'string') {
+                this.enableAllOptIn = JSON.parse(value);
+                this.setDefaultSelections();
+              }
+              break;
             }
-            break;
-          case 'hide-error-message':
+          case 'hideErrorMessage':
             {
-              if (oldVal !== newVal) {
-                this.hideErrorMessage = JSON.parse(newVal);
+              if (oldValue !== value && typeof value === 'string') {
+                this.hideErrorMessage = JSON.parse(value);
                 this.countryBasedLegalNotice();
               }
               break;
             }
+          case 'email':
+            {
+              const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+              this.emailValid = false;
+              if (hasValue && oldValue !== value && typeof value === 'string' && emailRegex.test(value.trim()) && value.trim() !== '') {
+                this.email = value.trim();
+                this.onEmailChange();
+              } else {
+                this.showCheckBox = false;
+              }
+              break;
+            }
         }
       }
     }, {
-      kind: "get",
-      static: true,
-      key: "stableSelector",
-      value: function () {
-        return `${c4dPrefix}--notice-choice`;
+      kind: "method",
+      key: "onEmailChange",
+      value: function onEmailChange() {
+        const email = this.email;
+        const oneYearAgo = new Date(Date.now() - 365 * 24 * 60 * 60 * 1000);
+        this.isAnnualPeriodExpired = true;
+        this.isLoading = true;
+        checkEmailStatus(email, this.environment, data => {
+          this.isLoading = false;
+          this.emailValid = true;
+          const {
+            email: emailStatus,
+            lastUpdated
+          } = data;
+          const annualPeriodDate = new Date(lastUpdated);
+          const isValidDate = !isNaN(annualPeriodDate.getTime());
+          const isExpired = isValidDate && emailStatus === 'P' && annualPeriodDate < oneYearAgo;
+
+          // If bad date, treat as expired
+          if (!isValidDate) {
+            console.warn('Invalid annualPeriod:', lastUpdated);
+            this.isAnnualPeriodExpired = true;
+            this._handleEmailCheckFailure(data, true);
+            return;
+          }
+          this.isAnnualPeriodExpired = emailStatus !== 'P' || isExpired;
+          this.showCheckBox = isExpired || emailStatus !== 'P';
+          this._onEmailStatusChanged('emailStats', _objectSpread(_objectSpread({}, data), {}, {
+            isAnnualPeriodExpired: isExpired
+          }));
+        }, error => {
+          this.emailValid = true;
+          this.isLoading = false;
+          console.error('checkEmailStatus error:', error);
+          this._handleEmailCheckFailure(error, true);
+        });
       }
+
+      /**
+       * Centralized handler for failed or invalid responses.
+       */
     }, {
-      kind: "field",
-      static: true,
-      key: "styles",
-      value() {
-        return styles;
+      kind: "method",
+      key: "_handleEmailCheckFailure",
+      value: function _handleEmailCheckFailure(responseData, expired) {
+        this.isAnnualPeriodExpired = expired;
+        this.showCheckBox = true;
+        this.renderCombinedEmailPhoneSection();
+        this._onEmailStatusChanged('emailStats', _objectSpread(_objectSpread({}, responseData), {}, {
+          isAnnualPeriodExpired: expired
+        }));
       }
     }, {
       kind: "method",
-      key: "checkBoxLegalChange",
-      value: // `styles` here is a `CSSResult` generated by custom WebPack loader
-      function checkBoxLegalChange($event) {
-        var _this$country3, _this$ncData5, _this$ncData6, _this$ncData7;
-        const legalCheckbox = $event.target;
-        const isChecked = legalCheckbox.checked;
-        const legalTextError = legalCheckbox.parentNode.querySelector('.nc-error');
-        const countyBasedText = isChecked ? 'countyBasedCheckedYes' : 'countyBasedCheckedNo';
-        if (legalTextError) {
-          legalTextError.style.display = isChecked ? 'none' : '';
-        }
-        const countyCode = (_this$country3 = this.country) === null || _this$country3 === void 0 ? void 0 : _this$country3.toLocaleLowerCase();
-        const mrsField = (_this$ncData5 = this.ncData) !== null && _this$ncData5 !== void 0 && _this$ncData5.mandatoryCheckbox[countyCode].countryTransferText ? (_this$ncData6 = this.ncData) === null || _this$ncData6 === void 0 ? void 0 : _this$ncData6.mandatoryCheckbox[this.isMandatoryCheckboxDisplayed.countryCode].countryTransferText.mrs_field : (_this$ncData7 = this.ncData) === null || _this$ncData7 === void 0 ? void 0 : _this$ncData7.mandatoryCheckbox[countyCode].chinaPIPLtext.mrs_field;
-        legalCheckbox.value = isChecked ? 1 : 0;
-        this.preventFormSubmission = !isChecked;
-        const preventFormSubmissionValue = isChecked ? 'formSubmissionYes' : 'formSubmissionNo';
-        this._onChange('preventFormSubmission', preventFormSubmissionValue);
-        this._onChange(mrsField, countyBasedText);
+      key: "_initSettingsAndContent",
+      value: function _initSettingsAndContent(language) {
+        const [lang] = language.split(/[-_]/);
+        const defaultLang = supportedLanguages(language) || supportedLanguages(lang) || 'en';
+        loadSettings(this.environment, settings => {
+          this.countrySettings = settings.preferences;
+          this.noticeOnly = settings.noticeOnly || ['us'];
+        }, () => this.defaultLoadSettings());
+        loadContent(defaultLang, this.environment, ncData => {
+          this.ncData = ncData;
+          this.prepareCheckboxes();
+          this.countryChanged();
+        }, () => this.defaultLoadContent());
       }
     }, {
       kind: "method",
-      key: "countryBasedLegalNotice",
-      value: function countryBasedLegalNotice() {
-        var _this$ncData8;
-        const country = this.country.toLocaleLowerCase();
-        const itemTemplates = [];
-        if ((_this$ncData8 = this.ncData) !== null && _this$ncData8 !== void 0 && _this$ncData8.mandatoryCheckbox && this.ncData.mandatoryCheckbox[country]) {
-          const mandatoryCheckboxes = this.ncData.mandatoryCheckbox[country];
-          for (const [key, mandatoryCheckbox] of Object.entries(mandatoryCheckboxes)) {
-            const legalTextName = key.replace(/([A-Z]+)/g, '-$1').toLowerCase();
-            const mandatoryCheckboxTemplate = html(_t4 || (_t4 = _`
-          <span>
-            <div
-              class="${0}--form-item bx--checkbox-wrapper"
-              part="checkbox-wrapper checkbox-wrapper--mandatory">
-              <p part=${0} class=${0}>
-                <input
-                  type="checkbox"
-                  class="${0}--checkbox"
-                  part="checkbox checkbox--mandatory"
-                  id="${0}"
-                  name="${0}"
-                  @change="${0}" />
-                <label
-                  for="${0}"
-                  class="${0}--checkbox-label ${0}--nc__checkbox-${0}"
-                  part="checkbox-label checkbox-label--mandatory"
-                  ><span
-                    class="${0}--checkbox-label-text"
-                    part="checkbox-label-text checkbox-label-text--mandatory"
-                    dir="auto"
-                    >${0}
-                  </span>
-                </label>
-                ${0}
-              </p>
-            </div>
-          </span>
-        `), prefix, legalTextName, legalTextName, prefix, mandatoryCheckbox.mrs_field, mandatoryCheckbox.mrs_field, this.checkBoxLegalChange, mandatoryCheckbox.mrs_field, prefix, prefix, mandatoryCheckbox.mrs_field, prefix, mandatoryCheckbox.text, !this.hideErrorMessage && this.preventFormSubmission ? html(_t5 || (_t5 = _`<span
-                      class="nc-error"
-                      part="error"
-                      style="color:#da1e28;font-size:.75rem"
-                      >${0}</span
-                    >`), mandatoryCheckbox.error) : '');
-            itemTemplates.push(mandatoryCheckboxTemplate);
+      key: "countryChangeAction",
+      value: function countryChangeAction() {
+        var _this$country, _this$ncData;
+        const countryCode = (_this$country = this.country) === null || _this$country === void 0 ? void 0 : _this$country.toLowerCase();
+        this.preventFormSubmission = false;
+        const mandatory = (_this$ncData = this.ncData) === null || _this$ncData === void 0 || (_this$ncData = _this$ncData.mandatoryCheckbox) === null || _this$ncData === void 0 ? void 0 : _this$ncData[countryCode];
+        this.setDefaultSelections();
+        if (mandatory) {
+          var _mandatory$countryTra, _mandatory$chinaPIPLt;
+          // determine which field to update
+          const mrsField = ((_mandatory$countryTra = mandatory.countryTransferText) === null || _mandatory$countryTra === void 0 ? void 0 : _mandatory$countryTra.mrs_field) || ((_mandatory$chinaPIPLt = mandatory.chinaPIPLtext) === null || _mandatory$chinaPIPLt === void 0 ? void 0 : _mandatory$chinaPIPLt.mrs_field);
+          if (mrsField) {
+            this._onChange(mrsField, 'countyBasedCheckedNo');
           }
+          this.isMandatoryCheckboxDisplayed = {
+            countryCode,
+            isDisplayed: true
+          };
+          this.preventFormSubmission = true;
+          this._onChange('preventFormSubmission', 'formSubmissionNo');
+        } else {
+          this._onChange('preventFormSubmission', 'formSubmissionYes');
         }
-        return itemTemplates;
       }
     }, {
       kind: "method",
@@ -691,48 +623,108 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
           if (postText !== '') {
             postText = "<div part='ncPostTextContainer' id='ncPostTextContainer'>" + postText + '</div>';
           }
-          return html(_t6 || (_t6 = _`${0}`), unsafeHTML(postText));
+          return html(_t4 || (_t4 = _`${0}`), unsafeHTML(postText));
         } else {
-          return html(_t7 || (_t7 = _``));
+          return html(_t5 || (_t5 = _``));
         }
       }
     }, {
       kind: "method",
-      key: "combinedPreTextTemplate",
-      value: function combinedPreTextTemplate() {
-        var _this$country4, _this$state, _ecmTranslateContent$4;
-        if (!this.ncData) {
-          return html(_t8 || (_t8 = _``));
+      key: "countryChanged",
+      value: function countryChanged() {
+        resetToWorldWideContent();
+        this.countryChangeAction();
+      }
+    }, {
+      kind: "method",
+      key: "setDefaultSelections",
+      value: function setDefaultSelections() {
+        var _this$country2, _this$countrySettings2, _this$countrySettings3;
+        if (this.enableAllOptIn || !this.checkboxes) {
+          return;
         }
-        const ecmTranslateContent = this.ncData;
-        const country = ((_this$country4 = this.country) === null || _this$country4 === void 0 ? void 0 : _this$country4.toLocaleLowerCase()) || '';
-        const state = ((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.toLocaleLowerCase()) || '';
-        let preText = ecmTranslateContent.combinedConsent;
-        if (ecmTranslateContent.state[country]) {
-          if ((this.noticeOnly || []).includes(country)) {
-            preText = state === 'ca' || state === '' ? ecmTranslateContent.state[country]['ca'].noticeOnly : ecmTranslateContent.noticeOnly;
-          } else {
-            var _ecmTranslateContent$;
-            preText = ((_ecmTranslateContent$ = ecmTranslateContent.state[country][state]) === null || _ecmTranslateContent$ === void 0 ? void 0 : _ecmTranslateContent$.combinedConsent) || ecmTranslateContent.combinedConsent;
+        const countryCode = (_this$country2 = this.country) === null || _this$country2 === void 0 ? void 0 : _this$country2.toLowerCase();
+        const countryStatus = (_this$countrySettings2 = (_this$countrySettings3 = this.countrySettings) === null || _this$countrySettings3 === void 0 ? void 0 : _this$countrySettings3[countryCode]) !== null && _this$countrySettings2 !== void 0 ? _this$countrySettings2 : {
+          email: 'opt-in',
+          phone: 'opt-in'
+        };
+        const newValues = _objectSpread({}, this.values);
+        for (const key of Object.keys(this.checkboxes)) {
+          const isOptOut = countryStatus[key.toLowerCase()] === 'opt-out';
+          newValues[key] = isOptOut;
+          const hiddenFieldName = `NC_HIDDEN_${key}`;
+          newValues[hiddenFieldName] = isOptOut ? 'OPT_OUT' : 'OPT_IN';
+          if (Object.prototype.hasOwnProperty.call(this.defaultValues, key)) {
+            newValues[key] = this.defaultValues[key];
           }
-        } else if ((this.noticeOnly || []).includes(country)) {
-          var _ecmTranslateContent$2, _ecmTranslateContent$3;
-          preText = state === 'ca' || state === '' || typeof state === 'undefined' ? (_ecmTranslateContent$2 = ecmTranslateContent.state) !== null && _ecmTranslateContent$2 !== void 0 && (_ecmTranslateContent$2 = _ecmTranslateContent$2[country]) !== null && _ecmTranslateContent$2 !== void 0 && (_ecmTranslateContent$2 = _ecmTranslateContent$2['ca']) !== null && _ecmTranslateContent$2 !== void 0 && _ecmTranslateContent$2.noticeOnly ? (_ecmTranslateContent$3 = ecmTranslateContent.state) === null || _ecmTranslateContent$3 === void 0 || (_ecmTranslateContent$3 = _ecmTranslateContent$3[country]) === null || _ecmTranslateContent$3 === void 0 || (_ecmTranslateContent$3 = _ecmTranslateContent$3['ca']) === null || _ecmTranslateContent$3 === void 0 ? void 0 : _ecmTranslateContent$3.noticeOnly : ecmTranslateContent.noticeOnly : ecmTranslateContent.noticeOnly;
+          this._onChange(hiddenFieldName, newValues[key] ? 'OPT_IN' : 'OPT_OUT');
         }
-        if ((_ecmTranslateContent$4 = ecmTranslateContent.country) !== null && _ecmTranslateContent$4 !== void 0 && _ecmTranslateContent$4[country]) {
-          preText = ecmTranslateContent.country[country].combinedConsent;
+        const changed = Object.keys(newValues).some(field => newValues[field] !== this.values[field]);
+        if (changed) {
+          this.values = newValues;
         }
-        if (!(this.noticeOnly || []).includes(country)) {
-          let isPermissionOrSuppression = false;
-          if (typeof this.values.EMAIL === 'object') {
-            const checkStatus = this.values.EMAIL;
-            isPermissionOrSuppression = checkStatus.checkBoxStatus === 'PERMISSION';
+      }
+    }, {
+      kind: "method",
+      key: "_buildCheckboxes",
+      value: function _buildCheckboxes() {
+        var _this$ncData2, _this$ncData3;
+        const fieldElements = {};
+        const fieldCollections = {
+          EMAIL: {
+            id: 'EMAIL',
+            labelText: (_this$ncData2 = this.ncData) === null || _this$ncData2 === void 0 ? void 0 : _this$ncData2.email
+          },
+          PHONE: {
+            id: 'PHONE',
+            labelText: (_this$ncData3 = this.ncData) === null || _this$ncData3 === void 0 ? void 0 : _this$ncData3.telephone
           }
-          const checked = typeof this.values.EMAIL === 'object' ? isPermissionOrSuppression : this.values.EMAIL;
-          preText = preText ? this.renderCheckbox(preText, checked) : this.renderCheckbox(ecmTranslateContent.preText, checked);
-          return preText;
+        };
+        if (this.questionchoices) {
+          // by email
+          if (this.questionchoices.indexOf('1') > -1) {
+            fieldElements.EMAIL = fieldCollections.EMAIL;
+          }
+          // by Phone
+          if (this.questionchoices.indexOf('2') > -1) {
+            fieldElements.PHONE = fieldCollections.PHONE;
+          }
+        }
+        return fieldElements;
+      }
+    }, {
+      kind: "method",
+      key: "prepareCheckboxes",
+      value: function prepareCheckboxes() {
+        if (this.ncData) {
+          const newCheckboxes = this._buildCheckboxes();
+          this.checkboxes = newCheckboxes;
+          this.performUpdate();
         }
-        return html(_t9 || (_t9 = _`${0}`), unsafeHTML(preText));
+      }
+    }, {
+      kind: "method",
+      key: "defaultLoadContent",
+      value: function defaultLoadContent() {
+        loadContent('en', this.environment, ncData => {
+          this.ncData = ncData;
+          this.prepareCheckboxes();
+          this.countryChanged();
+        }, error => {
+          this.isLoading = false;
+          console.error('error loading content', error);
+        });
+      }
+    }, {
+      kind: "method",
+      key: "defaultLoadSettings",
+      value: function defaultLoadSettings() {
+        loadSettings(this.environment, countryPreferencesSettings => {
+          this.countrySettings = countryPreferencesSettings.preferences;
+          this.noticeOnly = countryPreferencesSettings.noticeOnly || ['us'];
+        }, error => {
+          console.error('error loading content', error);
+        });
       }
     }, {
       kind: "method",
@@ -746,8 +738,7 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
           this.values = newValues;
           const hiddenFieldName = `NC_HIDDEN_${id}`;
           const hiddenFieldStatus = checked ? 'PERMISSION' : 'SUPPRESSION';
-          this.values[id] = {};
-          this.values[id]['checkBoxStatus'] = hiddenFieldStatus;
+          this.valuesForEmailPhone[id]['checkBoxStatus'] = hiddenFieldStatus;
           let statusPrechecked = '';
           switch (id) {
             case 'EMAIL':
@@ -755,7 +746,7 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
               statusPrechecked = this.combinedEmailPhonePrechecked && !checked ? 'CU' : !this.combinedEmailPhonePrechecked && checked ? 'UC' : this.combinedEmailPhonePrechecked && checked ? 'CC' : 'UU';
               break;
           }
-          this.values[id]['punsStatus'] = statusPrechecked;
+          this.valuesForEmailPhone[id]['punsStatus'] = statusPrechecked;
           this._onChange(hiddenFieldName, hiddenFieldStatus);
           this._onChange(`${hiddenFieldName}_VALUE`, `NC_HIDDEN_${hiddenFieldStatus}`);
         });
@@ -765,7 +756,7 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
       key: "renderCheckbox",
       value: function renderCheckbox(preText, checked) {
         const checkboxId = 'EMAIL_PHONE_CHECKBOX';
-        return html(_t10 || (_t10 = _`
+        return html(_t6 || (_t6 = _`
       <span part="container">
         <div
           class="${0}--form-item cds--checkbox-wrapper"
@@ -793,37 +784,188 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
       </span>
     `), prefix, prefix, checkboxId, checkboxId, checked, this.checkCombineEmailPhoneBoxChange, checkboxId, prefix, prefix, checkboxId, prefix, unsafeHTML(preText));
       }
+    }, {
+      kind: "method",
+      key: "combinedPreTextTemplate",
+      value: function combinedPreTextTemplate() {
+        var _this$country3, _this$state, _content$state, _content$country;
+        if (!this.ncData) {
+          return html(_t7 || (_t7 = _``));
+        }
+        const content = this.ncData;
+        const country = ((_this$country3 = this.country) === null || _this$country3 === void 0 ? void 0 : _this$country3.toLowerCase()) || '';
+        const state = ((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.toLowerCase()) || '';
+        let preText = '';
+
+        // 1. Base text depending on email
+        if (!this.emailValid) {
+          preText = content.annualDefaultText;
+        } else {
+          preText = this.showCheckBox ? content.combinedConsent : content.annualText;
+        }
+
+        // 2. country+state specific override
+        const stateConfig = (_content$state = content.state) === null || _content$state === void 0 ? void 0 : _content$state[country];
+        if (stateConfig) {
+          if ((this.noticeOnly || []).includes(country)) {
+            var _stateConfig$ca;
+            preText = state === 'ca' || state === '' ? ((_stateConfig$ca = stateConfig['ca']) === null || _stateConfig$ca === void 0 ? void 0 : _stateConfig$ca.noticeOnly) || content.noticeOnly : content.noticeOnly;
+          } else {
+            var _stateConfig$state;
+            preText = ((_stateConfig$state = stateConfig[state]) === null || _stateConfig$state === void 0 ? void 0 : _stateConfig$state.combinedConsent) || content.combinedConsent;
+          }
+        } else if ((this.noticeOnly || []).includes(country)) {
+          var _content$state2;
+          preText = state === 'ca' || state === '' || typeof state === 'undefined' ? ((_content$state2 = content.state) === null || _content$state2 === void 0 || (_content$state2 = _content$state2[country]) === null || _content$state2 === void 0 || (_content$state2 = _content$state2['ca']) === null || _content$state2 === void 0 ? void 0 : _content$state2.noticeOnly) || content.noticeOnly : content.noticeOnly;
+        }
+
+        // 3. country content override if exists
+
+        const countryContent = (_content$country = content.country) === null || _content$country === void 0 ? void 0 : _content$country[country];
+        if (countryContent) {
+          preText = !this.emailValid ? content.annualDefaultText : this.isAnnualPeriodExpired ? countryContent.combinedConsent : countryContent.annualText;
+        }
+
+        // 4. permission/suppression logic
+        if (!(this.noticeOnly || []).includes(country)) {
+          let isPermission = false;
+          isPermission = this.values.EMAIL;
+          const checked = isPermission;
+          if (this.showCheckBox) {
+            return this.renderCheckbox(preText, checked);
+          }
+        }
+        return html(_t8 || (_t8 = _`${0}`), unsafeHTML(preText));
+      }
+    }, {
+      kind: "method",
+      key: "checkBoxLegalChange",
+      value: function checkBoxLegalChange(event) {
+        var _target$parentElement, _this$country4, _this$ncData4, _mandatoryCheckbox$co, _mandatoryCheckbox$ch;
+        const target = event.target;
+        if (!target) {
+          return;
+        }
+        const isChecked = target.checked;
+
+        // handle potential missing error element safely
+        const errorEl = (_target$parentElement = target.parentElement) === null || _target$parentElement === void 0 ? void 0 : _target$parentElement.querySelector('.nc-error');
+        if (errorEl) {
+          errorEl.style.display = isChecked ? 'none' : '';
+        }
+        const countryCode = (_this$country4 = this.country) === null || _this$country4 === void 0 ? void 0 : _this$country4.toLowerCase();
+        const mandatoryCheckbox = (_this$ncData4 = this.ncData) === null || _this$ncData4 === void 0 || (_this$ncData4 = _this$ncData4.mandatoryCheckbox) === null || _this$ncData4 === void 0 ? void 0 : _this$ncData4[countryCode];
+        if (!mandatoryCheckbox) {
+          console.warn('No mandatoryCheckbox for country:', countryCode);
+          return;
+        }
+        const mrsField = ((_mandatoryCheckbox$co = mandatoryCheckbox.countryTransferText) === null || _mandatoryCheckbox$co === void 0 ? void 0 : _mandatoryCheckbox$co.mrs_field) || ((_mandatoryCheckbox$ch = mandatoryCheckbox.chinaPIPLtext) === null || _mandatoryCheckbox$ch === void 0 ? void 0 : _mandatoryCheckbox$ch.mrs_field);
+        if (!mrsField) {
+          console.warn('No mrs_field found for country mandatory checkbox');
+          return;
+        }
+        target.value = isChecked ? '1' : '0';
+        this.preventFormSubmission = !isChecked;
+        this._onChange('preventFormSubmission', isChecked ? 'formSubmissionYes' : 'formSubmissionNo');
+        this._onChange(mrsField, isChecked ? 'countyBasedCheckedYes' : 'countyBasedCheckedNo');
+      }
+    }, {
+      kind: "method",
+      key: "countryBasedLegalNotice",
+      value: function countryBasedLegalNotice() {
+        var _this$ncData5;
+        const countryCode = this.country.toLowerCase();
+        const mandatoryCheckboxes = (_this$ncData5 = this.ncData) === null || _this$ncData5 === void 0 || (_this$ncData5 = _this$ncData5.mandatoryCheckbox) === null || _this$ncData5 === void 0 ? void 0 : _this$ncData5[countryCode];
+        if (!mandatoryCheckboxes) {
+          return [];
+        }
+        return Object.entries(mandatoryCheckboxes).map(([key, checkbox]) => {
+          const legalTextName = key.replace(/([A-Z]+)/g, '-$1').toLowerCase();
+          const errorTemplate = !this.hideErrorMessage && this.preventFormSubmission ? html(_t9 || (_t9 = _`<span
+              class="nc-error"
+              part="error"
+              style="color:#da1e28;font-size:.75rem">
+              ${0}
+            </span>`), checkbox.error) : null;
+          return html(_t10 || (_t10 = _`
+        <span>
+          <div
+            class="${0}--form-item bx--checkbox-wrapper"
+            part="checkbox-wrapper checkbox-wrapper--mandatory">
+            <p part=${0} class=${0}>
+              <input
+                type="checkbox"
+                class="${0}--checkbox"
+                part="checkbox checkbox--mandatory"
+                id="${0}"
+                name="${0}"
+                @change="${0}" />
+              <label
+                for="${0}"
+                class="${0}--checkbox-label ${0}--nc__checkbox-${0}"
+                part="checkbox-label checkbox-label--mandatory">
+                <span
+                  class="${0}--checkbox-label-text"
+                  part="checkbox-label-text checkbox-label-text--mandatory"
+                  dir="auto">
+                  ${0}
+                </span>
+              </label>
+              ${0}
+            </p>
+          </div>
+        </span>
+      `), prefix, legalTextName, legalTextName, prefix, checkbox.mrs_field, checkbox.mrs_field, this.checkBoxLegalChange, checkbox.mrs_field, prefix, prefix, checkbox.mrs_field, prefix, checkbox.text, errorTemplate);
+        });
+      }
     }, {
       kind: "method",
       key: "renderCombinedEmailPhoneSection",
       value: function renderCombinedEmailPhoneSection() {
+        var _this$country5, _this$countrySettings4;
+        const countryLower = (_this$country5 = this.country) === null || _this$country5 === void 0 ? void 0 : _this$country5.toLocaleLowerCase();
+        const isNoticeOnly = (this.noticeOnly || []).includes(countryLower);
+        const defaultCountryStatus = {
+          email: 'opt-in',
+          phone: 'opt-in'
+        };
+        const countryStatus = ((_this$countrySettings4 = this.countrySettings) === null || _this$countrySettings4 === void 0 ? void 0 : _this$countrySettings4[countryLower]) || defaultCountryStatus;
         const getPunsStatus = (key, checked) => {
-          var _this$country5, _this$values$key, _this$values$key2;
-          const countryLowerCase = (_this$country5 = this.country) === null || _this$country5 === void 0 ? void 0 : _this$country5.toLocaleLowerCase();
-          const isNoticeOnly = (this.noticeOnly || []).includes(countryLowerCase);
+          var _this$valuesForEmailP, _this$valuesForEmailP2;
           if (isNoticeOnly) {
             return 'NOTICE_ONLY';
           }
-          const defaultCountryStatus = {
-            email: 'opt-in',
-            phone: 'opt-in'
-          };
-          const countryStatus = countryLowerCase ? this.countrySettings[countryLowerCase] || defaultCountryStatus : defaultCountryStatus;
-          const checkboxStatus = (_this$values$key = this.values[key]) === null || _this$values$key === void 0 ? void 0 : _this$values$key.checkBoxStatus;
+          const checkboxStatus = (_this$valuesForEmailP = this.valuesForEmailPhone[key]) === null || _this$valuesForEmailP === void 0 ? void 0 : _this$valuesForEmailP.checkBoxStatus;
           if (checkboxStatus === 'SUPPRESSION') {
-            if (countryStatus.email === 'opt-in') {
-              return 'UU';
-            }
-            if (countryStatus.email === 'opt-out') {
-              return 'CU';
-            }
+            return countryStatus.email === 'opt-out' ? 'CU' : 'UU';
           }
-          return ((_this$values$key2 = this.values[key]) === null || _this$values$key2 === void 0 ? void 0 : _this$values$key2.punsStatus) || (checked ? 'CC' : 'UU');
+          return ((_this$valuesForEmailP2 = this.valuesForEmailPhone[key]) === null || _this$valuesForEmailP2 === void 0 ? void 0 : _this$valuesForEmailP2.punsStatus) || (checked ? 'CC' : 'UU');
         };
-        const createHiddenInput = (id, value) => html(_t11 || (_t11 = _`<input type="hidden" id=${0} name=${0} value=${0} />`), id, id, value);
+        const createHiddenInput = (id, value) => html(_t11 || (_t11 = _`
+      <input type="hidden" id=${0} name=${0} value=${0} />
+    `), id, id, value);
+        const hiddenInputs = Object.keys(this.checkboxes).map(key => {
+          var _this$values$key$chec, _this$values$key;
+          const checked = this.values.EMAIL;
+          const punsStatus = getPunsStatus(key, checked);
+          let hiddenValue = (_this$values$key$chec = (_this$values$key = this.values[key]) === null || _this$values$key === void 0 ? void 0 : _this$values$key.checkBoxStatus) !== null && _this$values$key$chec !== void 0 ? _this$values$key$chec : this.values.EMAIL ? 'PERMISSION' : 'SUPPRESSION';
+          if (typeof checked !== 'object') {
+            this.combinedEmailPhonePrechecked = !!checked;
+          }
+          if (isNoticeOnly) {
+            hiddenValue = countryStatus.email === 'opt-out' ? 'PERMISSION' : 'SUPPRESSION';
+          }
+          const hiddenBoxId = `NC_HIDDEN_${key}`;
+          this._onChange(`NC_${key === 'PHONE' ? 'TELE' : key}_DETAIL`, `${key}_${punsStatus}`);
+          this._onChange(`${hiddenBoxId}_VALUE`, `NC_HIDDEN_${hiddenValue}`);
+          if (Object.keys(this.checkboxes).length === 1) {
+            this._onChange(`NC_HIDDEN_PHONE_VALUE`, `NC_HIDDEN_PHONE_NONE`);
+          }
+          return createHiddenInput(hiddenBoxId, hiddenValue);
+        });
         return html(_t12 || (_t12 = _`
       <section class="${0}--nc" part="section">
-        <p part="ncHeading" id="ncHeading" class="${0}--nc__pre-text ">
+        <p part="ncHeading" id="ncHeading" class="${0}--nc__pre-text">
           ${0} ${0}
         </p>
         ${0}
@@ -831,156 +973,69 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
           ${0}
         </div>
         ${0}
-        <input
-          type="hidden"
-          id="preventFormSubmission"
-          name="preventFormSubmission"
-          value=${0} />
       </section>
-    `), prefix, c4dPrefix, this.countryBasedLegalNotice(), this.combinedPreTextTemplate(), Object.keys(this.checkboxes).map(key => {
-          const checked = this.values.EMAIL;
-          const punsStatus = getPunsStatus(key, checked);
-          const hiddenBox = {
-            id: `NC_HIDDEN_${key}`,
-            value: this.values[key]['checkBoxStatus'] ? this.values[key]['checkBoxStatus'] : this.values.EMAIL ? 'PERMISSION' : 'SUPPRESSION'
-          };
-          if (typeof checked !== 'object') {
-            this.combinedEmailPhonePrechecked = checked ? true : false;
-          }
-          if ((this.noticeOnly || []).includes(this.country.toLocaleLowerCase())) {
-            const countryStatus = this.country ? this.countrySettings[this.country.toLocaleLowerCase()] : {
-              email: 'opt-in',
-              phone: 'opt-in'
-            };
-            hiddenBox.value = countryStatus.email === 'opt-out' ? 'PERMISSION' : 'SUPPRESSION';
-          }
-          this._onChange(`NC_${key === 'PHONE' ? 'TELE' : key}_DETAIL`, `${key}_${punsStatus}`);
-          console.log(`${hiddenBox.id}_VALUE`, `NC_HIDDEN_${hiddenBox.value}`);
-          this._onChange(`${hiddenBox.id}_VALUE`, `NC_HIDDEN_${hiddenBox.value}`);
-          if (Object.keys(this.checkboxes).length === 1) {
-            this._onChange(`NC_HIDDEN_PHONE_VALUE`, `NC_HIDDEN_PHONE_NONE`);
-          }
-          return createHiddenInput(hiddenBox.id, hiddenBox.value);
-        }), prefix, prefix, this.postTextTemplate(), createHiddenInput('preventFormSubmission', this.preventFormSubmission), this.preventFormSubmission);
-      }
-    }, {
-      kind: "method",
-      key: "render",
-      value: function render() {
-        if (this.isMandatoryCheckboxDisplayed.isDisplayed && this.country.toLocaleLowerCase() !== this.isMandatoryCheckboxDisplayed.countryCode) {
-          var _this$ncData9, _this$ncData10, _this$ncData11;
-          const mrsField = (_this$ncData9 = this.ncData) !== null && _this$ncData9 !== void 0 && _this$ncData9.mandatoryCheckbox[this.isMandatoryCheckboxDisplayed.countryCode].countryTransferText ? (_this$ncData10 = this.ncData) === null || _this$ncData10 === void 0 ? void 0 : _this$ncData10.mandatoryCheckbox[this.isMandatoryCheckboxDisplayed.countryCode].countryTransferText.mrs_field : (_this$ncData11 = this.ncData) === null || _this$ncData11 === void 0 ? void 0 : _this$ncData11.mandatoryCheckbox[this.isMandatoryCheckboxDisplayed.countryCode].chinaPIPLtext.mrs_field;
-          this._onChange(mrsField, 'countyBasedCheckedNo');
-        }
-        return this.renderCombinedEmailPhoneSection();
+    `), prefix, c4dPrefix, this.countryBasedLegalNotice(), this.combinedPreTextTemplate(), hiddenInputs, prefix, prefix, this.postTextTemplate(), createHiddenInput('preventFormSubmission', String(this.preventFormSubmission)));
       }
     }, {
       kind: "field",
-      key: "_getOptionByQuestion",
+      key: "pwsFieldsMap",
       value() {
-        return question => {
-          const questionChoiceStatus = this.country ? this.countrySettings[this.country.toLocaleLowerCase()] : {
-            email: 'opt-in',
-            phone: 'opt-in'
-          };
-          let option;
-          switch (question) {
-            case 'EMAIL':
-              {
-                option = {
-                  id: '0',
-                  checked: questionChoiceStatus.email === 'opt-out' ? true : false,
-                  optionTextPost: this.ncData.email,
-                  NC_HIDDEN_EMAIL: questionChoiceStatus.email === 'opt-out' ? 'OPT_OUT' : 'OPT_IN'
-                };
-                break;
-              }
-            case 'PHONE':
-              {
-                option = {
-                  id: '1',
-                  checked: questionChoiceStatus.phone === 'opt-out' ? true : false,
-                  optionTextPost: this.ncData.telephone,
-                  NC_HIDDEN_PHONE: questionChoiceStatus.phone === 'opt-out' ? 'OPT_OUT' : 'OPT_IN'
-                };
-                break;
-              }
-            default:
-              {
-                option = {
-                  id: '0',
-                  checked: questionChoiceStatus.email === 'opt-out' ? true : false,
-                  optionTextPost: this.ncData.email,
-                  NC_HIDDEN_EMAIL: questionChoiceStatus.email === 'opt-out' ? 'OPT_OUT' : 'OPT_IN'
-                };
-                break;
-              }
-          }
-          return option;
-        };
+        return new Map([['NC_HIDDEN_EMAIL', 'permission_email'], ['NC_HIDDEN_PHONE', 'permission_phone'], ['preventFormSubmission', 'preventFormSubmission'], ['Q_CHINA_PIPL', 'Q_CHINA_PIPL'], ['Q_COUNTRY_TRANSFER', 'Q_COUNTRY_TRANSFER'], ['NC_HIDDEN_EMAIL_VALUE', 'NC_HIDDEN_EMAIL'], ['NC_HIDDEN_PHONE_VALUE', 'NC_HIDDEN_PHONE'], ['EMAIL_CU', 'EMAIL_CU'], ['EMAIL_CC', 'EMAIL_CC'], ['EMAIL_UC', 'EMAIL_UC'], ['EMAIL_UU', 'EMAIL_UU'], ['PHONE_CU', 'PHONE_CU'], ['PHONE_CC', 'PHONE_CC'], ['PHONE_UC', 'PHONE_UC'], ['PHONE_UU', 'PHONE_UU'], ['EMAIL_NOTICE_ONLY', 'EMAIL_NOTICE_ONLY'], ['PHONE_NOTICE_ONLY', 'PHONE_NOTICE_ONLY'], ['NC_HIDDEN_PHONE_NONE', 'NC_HIDDEN_PHONE_NONE']]);
       }
     }, {
       kind: "method",
-      key: "_buildCheckboxes",
-      value: function _buildCheckboxes() {
-        const fieldElements = {};
-        const fieldCollections = {
-          EMAIL: {
-            id: 'EMAIL',
-            labelText: this._getOptionByQuestion('EMAIL').optionTextPost
-          },
-          PHONE: {
-            id: 'PHONE',
-            labelText: this._getOptionByQuestion('PHONE').optionTextPost
-          }
-        };
-        if (this.questionchoices) {
-          // by email
-          if (this.questionchoices.indexOf('1') > -1) {
-            fieldElements.EMAIL = fieldCollections.EMAIL;
-          }
-          // by Phone
-          if (this.questionchoices.indexOf('2') > -1) {
-            fieldElements.PHONE = fieldCollections.PHONE;
-          }
+      key: "dispatchCustomEvent",
+      value:
+      /**
+       * Dispatch field change event to parent form
+       */
+      function dispatchCustomEvent(eventName, field, value) {
+        try {
+          const eventDetail = {
+            bubbles: true,
+            detail: {
+              field,
+              value
+            }
+          };
+          this.dispatchEvent(new CustomEvent(eventName, eventDetail));
+        } catch (error) {
+          console.error(`[${eventName}] dispatch failed:`, error);
         }
-        return fieldElements;
       }
     }, {
       kind: "method",
       key: "_onChange",
       value: function _onChange(field, value) {
-        const pwsFieldsMap = {
-          NC_HIDDEN_EMAIL: 'permission_email',
-          NC_HIDDEN_PHONE: 'permission_phone',
-          preventFormSubmission: 'preventFormSubmission',
-          Q_CHINA_PIPL: 'Q_CHINA_PIPL',
-          Q_COUNTRY_TRANSFER: 'Q_COUNTRY_TRANSFER',
-          NC_HIDDEN_EMAIL_VALUE: 'NC_HIDDEN_EMAIL',
-          NC_HIDDEN_PHONE_VALUE: 'NC_HIDDEN_PHONE',
-          EMAIL_CU: 'EMAIL_CU',
-          EMAIL_CC: 'EMAIL_CC',
-          EMAIL_UC: 'EMAIL_UC',
-          EMAIL_UU: 'EMAIL_UU',
-          PHONE_CU: 'PHONE_CU',
-          PHONE_CC: 'PHONE_CC',
-          PHONE_UC: 'PHONE_UC',
-          PHONE_UU: 'PHONE_UU',
-          EMAIL_NOTICE_ONLY: 'EMAIL_NOTICE_ONLY',
-          PHONE_NOTICE_ONLY: 'PHONE_NOTICE_ONLY',
-          NC_HIDDEN_PHONE_NONE: 'NC_HIDDEN_PHONE_NONE'
-        };
-        if (Object.prototype.hasOwnProperty.call(pwsFieldsMap, field)) {
-          field = pwsFieldsMap[field];
+        var _this$pwsFieldsMap$ge, _this$pwsFieldsMap, _pwsValueMap;
+        const mappedField = (_this$pwsFieldsMap$ge = (_this$pwsFieldsMap = this.pwsFieldsMap) === null || _this$pwsFieldsMap === void 0 ? void 0 : _this$pwsFieldsMap.get(field)) !== null && _this$pwsFieldsMap$ge !== void 0 ? _this$pwsFieldsMap$ge : field;
+        const mappedValue = (_pwsValueMap = pwsValueMap === null || pwsValueMap === void 0 ? void 0 : pwsValueMap(value)) !== null && _pwsValueMap !== void 0 ? _pwsValueMap : value;
+        this.dispatchCustomEvent(`${c4dPrefix}-notice-choice-change`, mappedField, mappedValue);
+      }
+    }, {
+      kind: "method",
+      key: "_onEmailStatusChanged",
+      value: function _onEmailStatusChanged(field, value) {
+        this.dispatchCustomEvent(`${c4dPrefix}-notice-choice-email-status-changed`, field, value);
+      }
+    }, {
+      kind: "method",
+      key: "render",
+      value: function render() {
+        if (this.isLoading) {
+          return html(_t13 || (_t13 = _`<div part="skeleton-notice-choice">
+        <cds-skeleton-text
+          linecount="3"
+          width="100%"
+          paragraph="true"></cds-skeleton-text>
+      </div>`));
         }
-        const init = {
-          bubbles: true,
-          detail: {
-            field,
-            value: pwsValueMap(value)
-          }
-        };
-        this.dispatchEvent(new CustomEvent(`${c4dPrefix}-notice-choice-change`, init));
+        if (this.isMandatoryCheckboxDisplayed.isDisplayed && this.country.toLocaleLowerCase() !== this.isMandatoryCheckboxDisplayed.countryCode) {
+          var _this$ncData6, _this$ncData7, _this$ncData8;
+          const mrsField = (_this$ncData6 = this.ncData) !== null && _this$ncData6 !== void 0 && _this$ncData6.mandatoryCheckbox[this.isMandatoryCheckboxDisplayed.countryCode].countryTransferText ? (_this$ncData7 = this.ncData) === null || _this$ncData7 === void 0 ? void 0 : _this$ncData7.mandatoryCheckbox[this.isMandatoryCheckboxDisplayed.countryCode].countryTransferText.mrs_field : (_this$ncData8 = this.ncData) === null || _this$ncData8 === void 0 ? void 0 : _this$ncData8.mandatoryCheckbox[this.isMandatoryCheckboxDisplayed.countryCode].chinaPIPLtext.mrs_field;
+          this._onChange(mrsField, 'countyBasedCheckedNo');
+        }
+        return this.renderCombinedEmailPhoneSection();
       }
     }]
   };