Fixed onclick hidden values (carbon-design-system#10917)

### Related Ticket(s)

[Noitce & Choice w3 Publisher](https://w3.ibm.com/w3publisher/urx/notice-and-choice-v23)

### Description

Notice & Choice is a legally required component to create a form where IBM collects its customer information.
This section shows the specific product's legal links, terms, and conditions. Along with it, it collects users' consent regarding communication preferences.

### Changelog

**New**

-  A new web component to create a notice & choice user interface.

**Changed**

-  Notice and Choice content loaded by languages.
-   Set the default language to English.
-  Gain access to the hidden email and phone fields. 

**Removed**

- Postal option removed from new notice and choice version 

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts

@@ -81,6 +81,8 @@ export const Default = (args) => {
     questionchoices,
     enableAllOptIn,
     bpidLegalText,
+    hiddenEmail,
+    hiddenPhone,
   } = args?.NoticeChoice ?? {};
   return html`
     <dds-notice-choice
@@ -92,6 +94,8 @@ export const Default = (args) => {
       terms-condition-link="${termsConditionLink}"
       ?enable-all-opt-in=${enableAllOptIn}
       bpid-legal-text="${bpidLegalText}"
+      .hiddenEmail="${hiddenEmail}"
+      .hiddenPhone="${hiddenPhone}"
       @dds-notice-choice-change=${onChange}></dds-notice-choice>
   `;
 };

packages/web-components/src/components/notice-choice/notice-choice.ts

@@ -98,6 +98,12 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
     NC_HIDDEN_PHONE: worldWideContent.cc_default_status,
   };
 
+  @property({ reflect: true })
+  hiddenEmail = '';
+
+  @property({ reflect: true })
+  hiddenPhone = '';
+
   prepareCheckboxes() {
     if (this.ncData) {
       const OptInContent = this.ncData;
@@ -238,6 +244,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
 
   private checkBoxChange($event: any) {
     const id = $event.target.id;
+
     const checked = $event.target.checked;
     const newValues = {
       ...this.values,
@@ -248,7 +255,8 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
     this.changed = true;
     const hiddenFieldName = `NC_HIDDEN_${id}`;
     const hiddenFieldStatus = checked ? 'PERMISSION' : 'SUPPRESSION';
-    this.values['checkBoxStatus'] = hiddenFieldStatus;
+    this.values[id] = {};
+    this.values[id]['checkBoxStatus'] = hiddenFieldStatus;
     this._onChange(hiddenFieldName, hiddenFieldStatus);
   }
   static get stableSelector() {
@@ -282,7 +290,6 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
   }
   preTextTemplate() {
     if (this.ncData) {
-      const lang = this.locale;
       const country = this.country.toLocaleLowerCase();
       const ecmTranslateContent = this.ncData;
       let preText = ecmTranslateContent.preText;
@@ -305,35 +312,6 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
         preText = ecmTranslateContent.country[country.toLowerCase()].preText;
       }
 
-      const opt_out_url =
-        'https://www.ibm.com/account/reg/' +
-        country +
-        '-' +
-        lang +
-        '/signup?formid=urx-42537';
-
-      const noticeChoiceRegex = {
-        optoutMath: new RegExp('<optout>.*</optout>', 'g'),
-        optoutReplace: new RegExp('<optout>|</optout>', 'g'),
-      };
-      const optOutLink = preText.match(noticeChoiceRegex.optoutMath);
-      if (optOutLink) {
-        const optoutAnrTagHtml = optOutLink[0].replace(
-          noticeChoiceRegex.optoutReplace,
-          ''
-        );
-        const optoutReplaceValue =
-          "<a href='" +
-          opt_out_url +
-          "' target='_blank' class='ibm-tooltip' >" +
-          optoutAnrTagHtml +
-          '</a>';
-        preText = preText.replace(
-          noticeChoiceRegex.optoutMath,
-          optoutReplaceValue
-        );
-      }
-
       return html`${unsafeHTML(preText)}`;
     } else {
       return html``;
@@ -345,7 +323,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
       let postText = this.ncData.postText;
 
       if (postText) {
-        postText = '<p>' + postText + '</p>';
+        postText = '<p part="ncPostText">' + postText + '</p>';
       }
 
       if (this.termsConditionLink) {
@@ -359,7 +337,10 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
         }
       }
       if (postText !== '') {
-        postText = "<div id='ncPostTextContainer'>" + postText + '</div>';
+        postText =
+          "<div part='ncPostTextContainer' id='ncPostTextContainer'>" +
+          postText +
+          '</div>';
       }
       return html`${unsafeHTML(postText)}`;
     } else {
@@ -375,8 +356,8 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
   }
   render() {
     return html`<section class="${prefix}--nc">
-    <p id="ncHeading" class="${ddsPrefix}--nc__pre-text">${this.preTextTemplate()} </p>
-      <div class="${prefix}--checkbox-group">
+    <p part='ncHeading' id="ncHeading" class="${ddsPrefix}--nc__pre-text">${this.preTextTemplate()} </p>
+      <div part='${prefix}--checkbox-group' class="${prefix}--checkbox-group">
             ${
               Object.keys(this.checkboxes).length !== 0
                 ? Object.keys(this.checkboxes).length > 0 &&
@@ -385,19 +366,23 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
                     const checkbox = this.checkboxes[key];
                     const hiddenBox = {
                       id: 'NC_HIDDEN_' + key,
-                      value: this.values['checkBoxStatus']
-                        ? this.values['checkBoxStatus']
+                      value: this.values[key]['checkBoxStatus']
+                        ? this.values[key]['checkBoxStatus']
                         : this.values[key]
                         ? 'PERMISSION'
                         : 'UNCHANGED',
                     };
+                    key === 'EMAIL' ? (this.hiddenEmail = hiddenBox.value) : '';
+                    key === 'PHONE' ? (this.hiddenPhone = hiddenBox.value) : '';
                     return this.checkBoxTemplate(checkbox, checked, hiddenBox);
                   })
-                : 'Loading ...'
+                : ''
             }
+
           </div>
-          <div class="${prefix}--nc__post-text"
+          <div part='${prefix}--nc__post-text' class="${prefix}--nc__post-text"
           >${this.postTextTemplate()}</div>
+          
         </div>
         ${this.getBpidLegalText()}
     </section>`;