@carbon/ibmdotcom-web-components 1.37.0-rc.0 → 1.37.0-rc.2

package/es/components/notice-choice/notice-choice.d.ts

@@ -6,7 +6,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { LitElement } from 'lit-element';
+import { LitElement, TemplateResult } from 'lit-element';
 declare const NoticeChoice_base: {
     new (...args: any[]): {
         linkNode: any;
@@ -194,7 +194,7 @@ declare const NoticeChoice_base: {
         ariaValueMin: string | null;
         ariaValueNow: string | null;
         ariaValueText: string | null;
-        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
+        animate(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
         getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
         after(...nodes: (string | Node)[]): void;
         before(...nodes: (string | Node)[]): void;
@@ -339,24 +339,27 @@ declare class NoticeChoice extends NoticeChoice_base {
     country: string;
     state: string;
     language: string;
-    termsConditionLink: import("lit-element").TemplateResult;
-    bpidLegalText: import("lit-element").TemplateResult;
+    termsConditionLink: TemplateResult;
+    bpidLegalText: TemplateResult;
     enableAllOptIn: any;
     defaultValues: {};
     email: string;
+    hideErrorMessage: boolean;
+    showLegalNotice: boolean;
     checkboxes: {};
     ncData: any;
     changed: boolean;
     fetchedPref: string;
     optInContent: {};
+    preventFormSubmission: boolean;
     /**
      * End properties for passed attributes.
      */
     /**
      * properties for local state state management.
      */
-    preText: import("lit-element").TemplateResult;
-    defaultPreText: import("lit-element").TemplateResult;
+    preText: TemplateResult;
+    defaultPreText: TemplateResult;
     values: {
         EMAIL: boolean;
         PHONE: boolean;
@@ -381,11 +384,13 @@ declare class NoticeChoice extends NoticeChoice_base {
     private checkBoxChange;
     static get stableSelector(): string;
     static styles: any;
-    checkBoxTemplate(checkbox: any, checked: any, hiddenBox: any): import("lit-element").TemplateResult;
-    preTextTemplate(): import("lit-element").TemplateResult;
-    postTextTemplate(): import("lit-element").TemplateResult;
-    getBpidLegalText(): "" | import("lit-element").TemplateResult;
-    render(): import("lit-element").TemplateResult;
+    checkBoxLegalChange($event: any): void;
+    countryBasedLegalNotice(): TemplateResult[];
+    checkBoxTemplate(checkbox: any, checked: any, hiddenBox: any): TemplateResult;
+    preTextTemplate(): TemplateResult;
+    postTextTemplate(): TemplateResult;
+    getBpidLegalText(): TemplateResult | "";
+    render(): TemplateResult;
     protected emailChanged(email: any): void;
     protected _getOptionByQuestion: (question: any) => any;
     protected _buildCheckboxes(): any;

package/es/components/notice-choice/notice-choice.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/notice-choice/notice-choice.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAQ,UAAU,EAAY,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBzD;;;;;;;GAOG;AACH,cACM,YAAa,SAAQ,iBAA+B;IACxD;;OAEG;IAEH,eAAe,SAAO;IAGtB,OAAO,SAAQ;IAGf,KAAK,SAAM;IAGX,QAAQ,SAAQ;IAGhB,kBAAkB,uCAAU;IAG5B,aAAa,uCAAU;IAGvB,cAAc,MAAC;IAGf,aAAa,KAAM;IAGnB,KAAK,SAAM;IAGX,UAAU,KAAM;IAGhB,MAAM,EAAE,GAAG,CAAC;IAGZ,OAAO,UAAS;IAGhB,WAAW,SAAM;IAGjB,YAAY,KAAM;IAElB;;OAEG;IAEH;;OAEG;IAEH,OAAO,uCAAU;IAGjB,cAAc,uCAAU;IAGxB,MAAM;;;;;MAKJ;IAGF,WAAW,SAAM;IAGjB,WAAW,SAAM;IAEjB,iBAAiB;IAUjB,kBAAkB;IAalB,iBAAiB;IAuBjB,oBAAoB;IAuBpB,mBAAmB;IAiBnB,cAAc;IAId;;;;;OAKG;IACH,wBAAwB,CAAC,IAAI,KAAA,EAAE,MAAM,KAAA,EAAE,MAAM,KAAA;IAyE7C,OAAO,CAAC,cAAc;IAiBtB,MAAM,KAAK,cAAc,WAExB;IACD,MAAM,CAAC,MAAM,MAAU;IACvB,gBAAgB,CAAC,QAAQ,KAAA,EAAE,OAAO,KAAA,EAAE,SAAS,KAAA;IAyB7C,eAAe;IA6Bf,gBAAgB;IA8BhB,gBAAgB;IAOhB,MAAM;IAiCN,SAAS,CAAC,YAAY,CAAC,KAAK,KAAA;IA6B5B,SAAS,CAAC,oBAAoB,yBAyC5B;IACF,SAAS,CAAC,gBAAgB;IAyB1B,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;CAqB9C;AAED,eAAe,YAAY,CAAC","file":"notice-choice.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { checkPreferencesv3, loadContent } from './services';\nimport { html, LitElement, property } from 'lit-element';\nimport {\n  emailRegExp,\n  pwsValueMap,\n  resetToWorldWideContent,\n  supportedLanguages,\n} from './utils';\nimport countrySettings from './country-settings';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport styles from './notice-choice.scss';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport { worldWideContent } from './world-wide-content';\nimport { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';\n\nconst { stablePrefix: ddsPrefix } = ddsSettings;\nconst { prefix } = settings;\n\n/**\n * Notice Choice\n *\n * @element dds-notice-choice\n * @fires dds-notice-choice-change\n * The custom event fired when default choice loaded or user change some preferences.\n * The field and value should be taken from the detail object and send it to MRS.\n */\n@customElement(`dds-notice-choice`)\nclass NoticeChoice extends StableSelectorMixin(LitElement) {\n  /**\n   * properties for passed attributes.\n   */\n  @property({ type: String, reflect: true, attribute: 'question-choices' })\n  questionchoices = '1';\n\n  @property({ type: String, attribute: 'country' })\n  country = 'US';\n\n  @property({ type: String, attribute: 'state' })\n  state = '';\n\n  @property({ type: String, attribute: 'language' })\n  language = 'en';\n\n  @property({ type: String, attribute: 'terms-condition-link' })\n  termsConditionLink = html``;\n\n  @property({ type: String, attribute: 'bpid-legal-text' })\n  bpidLegalText = html``;\n\n  @property({ type: Boolean, attribute: 'enable-all-opt-in' })\n  enableAllOptIn;\n\n  @property({ attribute: 'default-values' })\n  defaultValues = {};\n\n  @property({ type: String, attribute: 'email' })\n  email = '';\n\n  @property({ type: Object, attribute: false })\n  checkboxes = {};\n\n  @property({ type: Object, attribute: false })\n  ncData: any;\n\n  @property({ type: Boolean, attribute: false })\n  changed = false;\n\n  @property({ type: String, attribute: false })\n  fetchedPref = '';\n\n  @property({ type: Object, attribute: false })\n  optInContent = {};\n\n  /**\n   * End properties for passed attributes.\n   */\n\n  /**\n   * properties for local state state management.\n   */\n  @property({ type: html, attribute: false })\n  preText = html``;\n\n  @property({ type: html, attribute: false })\n  defaultPreText = html``;\n\n  @property({ type: Object, attribute: false })\n  values = {\n    EMAIL: false,\n    PHONE: false,\n    NC_HIDDEN_EMAIL: worldWideContent.cc_default_status,\n    NC_HIDDEN_PHONE: worldWideContent.cc_default_status,\n  };\n\n  @property({ reflect: true })\n  hiddenEmail = '';\n\n  @property({ reflect: true })\n  hiddenPhone = '';\n\n  prepareCheckboxes() {\n    if (this.ncData) {\n      const OptInContent = this.ncData;\n      this.preText = OptInContent.preText;\n      this.defaultPreText = OptInContent.preText;\n      const newCheckboxes = this._buildCheckboxes();\n      this.checkboxes = newCheckboxes;\n      this.performUpdate();\n    }\n  }\n  defaultLoadContent() {\n    loadContent(\n      'en',\n      (ncData) => {\n        this.ncData = ncData;\n        this.prepareCheckboxes();\n        this.countryChanged();\n      },\n      (error) => {\n        console.error('error loading content', error);\n      }\n    );\n  }\n  connectedCallback() {\n    super.connectedCallback();\n    const [language] = this.language.split(/[-_]/);\n\n    let defaultLanguage = 'en';\n    if (supportedLanguages(this.language)) {\n      defaultLanguage = supportedLanguages(this.language);\n    } else if (supportedLanguages(language)) {\n      defaultLanguage = supportedLanguages(language);\n    }\n\n    loadContent(\n      defaultLanguage,\n      (ncData) => {\n        this.ncData = ncData;\n        this.prepareCheckboxes();\n        this.countryChanged();\n      },\n      () => {\n        this.defaultLoadContent();\n      }\n    );\n  }\n  setDefaultSelections() {\n    if (!this.enableAllOptIn && this.checkboxes) {\n      const newValues = { ...this.values };\n      Object.keys(this.checkboxes).forEach((key) => {\n        const option = this._getOptionByQuestion(key);\n        newValues[key] = !!(\n          option.checked === 'true' || option.checked === true\n        );\n        if (\n          this.defaultValues &&\n          Object.prototype.hasOwnProperty.call(this.defaultValues, key)\n        ) {\n          newValues[key] = this.defaultValues[key];\n        }\n        const hiddenFieldName = `NC_HIDDEN_${key}`;\n        newValues[hiddenFieldName] = option[hiddenFieldName];\n        this._onChange(hiddenFieldName, newValues[key] ? 'OPT_IN' : null);\n      });\n      if (JSON.stringify(this.values) !== JSON.stringify(newValues)) {\n        this.values = newValues;\n      }\n    }\n  }\n  countryChangeAction() {\n    const splitValue = this.language;\n    if (splitValue == 'en') {\n      this.preText = this.preTextTemplate();\n    }\n    /**\n     * @description if the user already interacted with the checkboxes,\n     * skip country default selection.\n     */\n    if (!this.changed && !this.fetchedPref) {\n      /**\n       * @description\n       * change checkbox checked option based on new country.\n       */\n      this.setDefaultSelections();\n    }\n  }\n  countryChanged() {\n    resetToWorldWideContent();\n    this.countryChangeAction();\n  }\n  /**\n   *\n   * @param name name of the attribute\n   * @param oldVal old value of the attribute\n   * @param newVal new value of the attrbute\n   */\n  attributeChangedCallback(name, oldVal, newVal) {\n    const hasValue = newVal !== null && oldVal !== null;\n    super.attributeChangedCallback(name, oldVal, newVal);\n    switch (name) {\n      case 'question-choices': {\n        // Reload checkbox options when questionchoices changed\n        if (oldVal !== newVal) {\n          this.prepareCheckboxes();\n          this.setDefaultSelections();\n        }\n        break;\n      }\n      case 'language': {\n        // load content when locale changed.\n        const [language] = newVal.split(/[-_]/);\n\n        let defaultLanguage = 'en';\n        if (supportedLanguages(newVal)) {\n          defaultLanguage = supportedLanguages(newVal);\n        } else if (supportedLanguages(language)) {\n          defaultLanguage = supportedLanguages(language);\n        }\n\n        if (hasValue && oldVal !== newVal) {\n          loadContent(\n            defaultLanguage,\n            (ncData) => {\n              this.ncData = ncData;\n              this.prepareCheckboxes();\n            },\n            () => {\n              this.defaultLoadContent();\n            }\n          );\n        }\n        break;\n      }\n      case 'country': {\n        /**\n         * load content when country value changed.\n         */\n        if (\n          hasValue &&\n          oldVal !== newVal &&\n          countrySettings[newVal.toLocaleLowerCase()]\n        ) {\n          this.countryChanged();\n        }\n        break;\n      }\n      case 'enable-all-opt-in':\n        this.setDefaultSelections();\n        break;\n      case 'email': {\n        if (newVal) {\n          if (newVal !== this.fetchedPref) {\n            // Handle throttle using debounce approach.\n            if (emailRegExp.test(newVal)) {\n              setTimeout(() => {\n                this.emailChanged(newVal);\n              }, 1000);\n            }\n          }\n        } else {\n          if (this.fetchedPref) {\n            this.fetchedPref = newVal;\n          }\n        }\n        break;\n      }\n    }\n  }\n\n  private checkBoxChange($event: any) {\n    const id = $event.target.id;\n\n    const checked = $event.target.checked;\n    const newValues = {\n      ...this.values,\n    };\n    newValues[id] = !!checked;\n    this.values = newValues;\n\n    this.changed = true;\n    const hiddenFieldName = `NC_HIDDEN_${id}`;\n    const hiddenFieldStatus = checked ? 'PERMISSION' : 'SUPPRESSION';\n    this.values[id] = {};\n    this.values[id]['checkBoxStatus'] = hiddenFieldStatus;\n    this._onChange(hiddenFieldName, hiddenFieldStatus);\n  }\n  static get stableSelector() {\n    return `${ddsPrefix}--notice-choice`;\n  }\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n  checkBoxTemplate(checkbox, checked, hiddenBox) {\n    return html`<span>\n      <div class=\"${prefix}--form-item bx--checkbox-wrapper\">\n        <input\n          type=\"checkbox\"\n          class=\"${prefix}--checkbox\"\n          id=\"${checkbox.id}\"\n          name=\"${checkbox.id}\"\n          ?checked=${checked}\n          @change=\"${this.checkBoxChange}\" />\n        <label\n          for=\"${checkbox.id}\"\n          class=\"${prefix}--checkbox-label ${prefix}--nc__checkbox-${checkbox.id}\"\n          ><span class=\"${prefix}--checkbox-label-text\" dir=\"auto\"\n            >${checkbox.labelText}\n          </span>\n        </label>\n        <input\n          type=\"hidden\"\n          id=${hiddenBox.id}\n          name=${hiddenBox.id}\n          value=${hiddenBox.value} />\n      </div>\n    </span>`;\n  }\n  preTextTemplate() {\n    if (this.ncData) {\n      const country = this.country?.toLocaleLowerCase();\n      const ecmTranslateContent = this.ncData;\n      let preText = ecmTranslateContent.preText;\n\n      if (ecmTranslateContent.state[country]) {\n        const state = this.state.toLocaleLowerCase() || '';\n        if (\n          country === 'us' &&\n          (state === 'ca' || state === '' || typeof state === 'undefined')\n        ) {\n          preText = ecmTranslateContent.state[country]['ca'].preText;\n        } else {\n          preText = ecmTranslateContent.state[country][state]\n            ? ecmTranslateContent.state[country][state].preText\n            : ecmTranslateContent.preText;\n        }\n      }\n\n      if (ecmTranslateContent.country[country]) {\n        preText = ecmTranslateContent.country[country.toLowerCase()].preText;\n      }\n\n      return html`${unsafeHTML(preText)}`;\n    } else {\n      return html``;\n    }\n  }\n  postTextTemplate() {\n    if (this.ncData) {\n      const OtherPreferences = this.ncData.trialPrivacyText;\n      let postText = this.ncData.postText;\n\n      if (postText) {\n        postText = '<p part=\"ncPostText\">' + postText + '</p>';\n      }\n\n      if (!this.termsConditionLink.strings && this.termsConditionLink) {\n        let originalValue = OtherPreferences;\n        const matchedValue = originalValue.match(/<tc>.*<\\/tc>/g);\n        if (matchedValue) {\n          const anrTagHtml = matchedValue[0].replace(/<tc>|<\\/tc>/g, '');\n          const link = `<a href='${this.termsConditionLink}' target='_blank' class='ibm-tooltip' >${anrTagHtml}</a>`;\n          const reg = new RegExp('<tc>' + anrTagHtml + '</tc>', 'g');\n          postText = postText + originalValue.replace(reg, link);\n        }\n      }\n      if (postText !== '') {\n        postText =\n          \"<div part='ncPostTextContainer' id='ncPostTextContainer'>\" +\n          postText +\n          '</div>';\n      }\n      return html`${unsafeHTML(postText)}`;\n    } else {\n      return html``;\n    }\n  }\n  getBpidLegalText() {\n    if (this.bpidLegalText) {\n      return html`<p>${this.bpidLegalText}</p>`;\n    } else {\n      return ``;\n    }\n  }\n  render() {\n    return html`<section class=\"${prefix}--nc\">\n    <p part='ncHeading' id=\"ncHeading\" class=\"${ddsPrefix}--nc__pre-text\">${this.preTextTemplate()} </p>\n      <div part='${prefix}--checkbox-group' class=\"${prefix}--checkbox-group\">\n            ${\n              Object.keys(this.checkboxes).length !== 0\n                ? Object.keys(this.checkboxes).length > 0 &&\n                  Object.keys(this.checkboxes).map((key) => {\n                    const checked = this.values[key];\n                    const checkbox = this.checkboxes[key];\n                    const hiddenBox = {\n                      id: 'NC_HIDDEN_' + key,\n                      value: this.values[key]['checkBoxStatus']\n                        ? this.values[key]['checkBoxStatus']\n                        : this.values[key]\n                        ? 'PERMISSION'\n                        : 'UNCHANGED',\n                    };\n                    key === 'EMAIL' ? (this.hiddenEmail = hiddenBox.value) : '';\n                    key === 'PHONE' ? (this.hiddenPhone = hiddenBox.value) : '';\n                    return this.checkBoxTemplate(checkbox, checked, hiddenBox);\n                  })\n                : ''\n            }\n\n          </div>\n          <div part='${prefix}--nc__post-text' class=\"${prefix}--nc__post-text\"\n          >${this.postTextTemplate()}</div>\n          \n        </div>\n        ${this.getBpidLegalText()}\n    </section>`;\n  }\n  protected emailChanged(email) {\n    if (this.changed === false) {\n      checkPreferencesv3(email).then((response) => {\n        const questionChoiceStatus =\n          countrySettings[this.country.toLocaleLowerCase()];\n\n        if (response === 'S' && questionChoiceStatus.email === 'opt-out') {\n          this.values = {\n            ...this.values,\n            EMAIL: false,\n            ...{ checkBoxStatus: 'UNCHANGED' },\n          };\n          this._onChange('NC_HIDDEN_EMAIL', null);\n        } else {\n          this.values = {\n            ...this.values,\n            EMAIL: questionChoiceStatus.email === 'opt-out' ? true : false,\n            ...{\n              checkBoxStatus:\n                questionChoiceStatus.email === 'opt-out'\n                  ? 'PERMISSION'\n                  : 'UNCHANGED',\n            },\n          };\n          this._onChange('NC_HIDDEN_EMAIL', null);\n        }\n      });\n    }\n  }\n  protected _getOptionByQuestion = (question) => {\n    const questionChoiceStatus = this.country\n      ? countrySettings[this.country.toLocaleLowerCase()]\n      : { email: 'opt-in', phone: 'opt-in' };\n\n    let option;\n    switch (question) {\n      case 'EMAIL': {\n        option = {\n          id: '0',\n          checked: questionChoiceStatus.email === 'opt-out' ? true : false,\n          optionTextPost: this.ncData.email,\n          NC_HIDDEN_EMAIL:\n            questionChoiceStatus.email === 'opt-out' ? 'OPT_OUT' : 'OPT_IN',\n        };\n        break;\n      }\n      case 'PHONE': {\n        option = {\n          id: '1',\n          checked: questionChoiceStatus.phone === 'opt-out' ? true : false,\n          optionTextPost: this.ncData.telephone,\n          NC_HIDDEN_PHONE:\n            questionChoiceStatus.phone === 'opt-out' ? 'OPT_OUT' : 'OPT_IN',\n        };\n        break;\n      }\n\n      default: {\n        option = {\n          id: '0',\n          checked: questionChoiceStatus.email === 'opt-out' ? true : false,\n          optionTextPost: this.ncData.email,\n          NC_HIDDEN_EMAIL:\n            questionChoiceStatus.email === 'opt-out' ? 'OPT_OUT' : 'OPT_IN',\n        };\n        break;\n      }\n    }\n\n    return option;\n  };\n  protected _buildCheckboxes() {\n    const fieldElements: any = {};\n    const fieldCollections = {\n      EMAIL: {\n        id: 'EMAIL',\n        labelText: this._getOptionByQuestion('EMAIL').optionTextPost,\n      },\n      PHONE: {\n        id: 'PHONE',\n        labelText: this._getOptionByQuestion('PHONE').optionTextPost,\n      },\n    };\n    if (this.questionchoices) {\n      // by email\n      if (this.questionchoices.indexOf('1') > -1) {\n        fieldElements.EMAIL = fieldCollections.EMAIL;\n      }\n      // by Phone\n      if (this.questionchoices.indexOf('2') > -1) {\n        fieldElements.PHONE = fieldCollections.PHONE;\n      }\n    }\n    return fieldElements;\n  }\n\n  _onChange(field: string, value: string | null) {\n    const pwsFieldsMap = {\n      NC_HIDDEN_EMAIL: 'permission_email',\n      NC_HIDDEN_PHONE: 'permission_phone',\n    };\n\n    if (Object.prototype.hasOwnProperty.call(pwsFieldsMap, field)) {\n      field = pwsFieldsMap[field];\n    }\n\n    const init = {\n      bubbles: true,\n      detail: {\n        field,\n        value: pwsValueMap(value),\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(`${ddsPrefix}-notice-choice-change`, init)\n    );\n  }\n}\n\nexport default NoticeChoice;\n"]}
+{"version":3,"sources":["components/notice-choice/notice-choice.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAQ,UAAU,EAAY,cAAc,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBzE;;;;;;;GAOG;AACH,cACM,YAAa,SAAQ,iBAA+B;IACxD;;OAEG;IAEH,eAAe,SAAO;IAGtB,OAAO,SAAQ;IAGf,KAAK,SAAM;IAGX,QAAQ,SAAQ;IAGhB,kBAAkB,iBAAU;IAG5B,aAAa,iBAAU;IAGvB,cAAc,MAAC;IAGf,aAAa,KAAM;IAGnB,KAAK,SAAM;IAGX,gBAAgB,UAAS;IAGzB,eAAe,UAAQ;IAGvB,UAAU,KAAM;IAGhB,MAAM,EAAE,GAAG,CAAC;IAGZ,OAAO,UAAS;IAGhB,WAAW,SAAM;IAGjB,YAAY,KAAM;IAGlB,qBAAqB,UAAS;IAE9B;;OAEG;IAEH;;OAEG;IAEH,OAAO,iBAAU;IAGjB,cAAc,iBAAU;IAGxB,MAAM;;;;;MAKJ;IAGF,WAAW,SAAM;IAGjB,WAAW,SAAM;IAEjB,iBAAiB;IAUjB,kBAAkB;IAalB,iBAAiB;IAuBjB,oBAAoB;IAwBpB,mBAAmB;IAsBnB,cAAc;IAId;;;;;OAKG;IACH,wBAAwB,CAAC,IAAI,KAAA,EAAE,MAAM,KAAA,EAAE,MAAM,KAAA;IAqF7C,OAAO,CAAC,cAAc;IAqBtB,MAAM,KAAK,cAAc,WAExB;IACD,MAAM,CAAC,MAAM,MAAU;IACvB,mBAAmB,CAAC,MAAM,EAAE,GAAG;IAmB/B,uBAAuB;IAkDvB,gBAAgB,CAAC,QAAQ,KAAA,EAAE,OAAO,KAAA,EAAE,SAAS,KAAA;IA0B7C,eAAe;IA6Bf,gBAAgB;IAmChB,gBAAgB;IAOhB,MAAM;IAqCN,SAAS,CAAC,YAAY,CAAC,KAAK,KAAA;IA6B5B,SAAS,CAAC,oBAAoB,yBAyC5B;IACF,SAAS,CAAC,gBAAgB;IAyB1B,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;CAyB9C;AAED,eAAe,YAAY,CAAC","file":"notice-choice.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { checkPreferencesv3, loadContent } from './services';\nimport { html, LitElement, property, TemplateResult } from 'lit-element';\nimport {\n  emailRegExp,\n  pwsValueMap,\n  resetToWorldWideContent,\n  supportedLanguages,\n} from './utils';\nimport countrySettings from './country-settings';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport styles from './notice-choice.scss';\nimport { unsafeHTML } from 'lit-html/directives/unsafe-html';\nimport { worldWideContent } from './world-wide-content';\nimport { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';\n\nconst { stablePrefix: ddsPrefix } = ddsSettings;\nconst { prefix } = settings;\n\n/**\n * Notice Choice\n *\n * @element dds-notice-choice\n * @fires dds-notice-choice-change\n * The custom event fired when default choice loaded or user change some preferences.\n * The field and value should be taken from the detail object and send it to MRS.\n */\n@customElement(`dds-notice-choice`)\nclass NoticeChoice extends StableSelectorMixin(LitElement) {\n  /**\n   * properties for passed attributes.\n   */\n  @property({ type: String, reflect: true, attribute: 'question-choices' })\n  questionchoices = '1';\n\n  @property({ type: String, attribute: 'country' })\n  country = 'US';\n\n  @property({ type: String, attribute: 'state' })\n  state = '';\n\n  @property({ type: String, attribute: 'language' })\n  language = 'en';\n\n  @property({ type: String, attribute: 'terms-condition-link' })\n  termsConditionLink = html``;\n\n  @property({ type: String, attribute: 'bpid-legal-text' })\n  bpidLegalText = html``;\n\n  @property({ type: Boolean, attribute: 'enable-all-opt-in' })\n  enableAllOptIn;\n\n  @property({ attribute: 'default-values' })\n  defaultValues = {};\n\n  @property({ type: String, attribute: 'email' })\n  email = '';\n\n  @property({ type: Boolean, attribute: 'hide-error-message' })\n  hideErrorMessage = false;\n\n  @property({ type: Boolean, attribute: 'show-legal-notice' })\n  showLegalNotice = true;\n\n  @property({ type: Object, attribute: false })\n  checkboxes = {};\n\n  @property({ type: Object, attribute: false })\n  ncData: any;\n\n  @property({ type: Boolean, attribute: false })\n  changed = false;\n\n  @property({ type: String, attribute: false })\n  fetchedPref = '';\n\n  @property({ type: Object, attribute: false })\n  optInContent = {};\n\n  @property({ type: Boolean, attribute: false })\n  preventFormSubmission = false;\n\n  /**\n   * End properties for passed attributes.\n   */\n\n  /**\n   * properties for local state state management.\n   */\n  @property({ type: html, attribute: false })\n  preText = html``;\n\n  @property({ type: html, attribute: false })\n  defaultPreText = html``;\n\n  @property({ type: Object, attribute: false })\n  values = {\n    EMAIL: false,\n    PHONE: false,\n    NC_HIDDEN_EMAIL: worldWideContent.cc_default_status,\n    NC_HIDDEN_PHONE: worldWideContent.cc_default_status,\n  };\n\n  @property({ reflect: true })\n  hiddenEmail = '';\n\n  @property({ reflect: true })\n  hiddenPhone = '';\n\n  prepareCheckboxes() {\n    if (this.ncData) {\n      const OptInContent = this.ncData;\n      this.preText = OptInContent.preText;\n      this.defaultPreText = OptInContent.preText;\n      const newCheckboxes = this._buildCheckboxes();\n      this.checkboxes = newCheckboxes;\n      this.performUpdate();\n    }\n  }\n  defaultLoadContent() {\n    loadContent(\n      'en',\n      (ncData) => {\n        this.ncData = ncData;\n        this.prepareCheckboxes();\n        this.countryChanged();\n      },\n      (error) => {\n        console.error('error loading content', error);\n      }\n    );\n  }\n  connectedCallback() {\n    super.connectedCallback();\n    const [language] = this.language.split(/[-_]/);\n\n    let defaultLanguage = 'en';\n    if (supportedLanguages(this.language)) {\n      defaultLanguage = supportedLanguages(this.language);\n    } else if (supportedLanguages(language)) {\n      defaultLanguage = supportedLanguages(language);\n    }\n\n    loadContent(\n      defaultLanguage,\n      (ncData) => {\n        this.ncData = ncData;\n        this.prepareCheckboxes();\n        this.countryChanged();\n      },\n      () => {\n        this.defaultLoadContent();\n      }\n    );\n  }\n  setDefaultSelections() {\n    if (!this.enableAllOptIn && this.checkboxes) {\n      const newValues = { ...this.values };\n      Object.keys(this.checkboxes).forEach((key) => {\n        const option = this._getOptionByQuestion(key);\n        newValues[key] = !!(\n          option.checked === 'true' || option.checked === true\n        );\n        if (\n          this.defaultValues &&\n          Object.prototype.hasOwnProperty.call(this.defaultValues, key)\n        ) {\n          newValues[key] = this.defaultValues[key];\n        }\n        const hiddenFieldName = `NC_HIDDEN_${key}`;\n        newValues[hiddenFieldName] = option[hiddenFieldName];\n\n        this._onChange(hiddenFieldName, newValues[key] ? 'OPT_IN' : 'OPT_OUT');\n      });\n      if (JSON.stringify(this.values) !== JSON.stringify(newValues)) {\n        this.values = newValues;\n      }\n    }\n  }\n  countryChangeAction() {\n    const splitValue = this.language;\n    if (splitValue == 'en') {\n      this.preText = this.preTextTemplate();\n    }\n    this.preventFormSubmission = false;\n    if (this.ncData?.mandatoryCheckbox[this.country?.toLocaleLowerCase()]) {\n      this.preventFormSubmission = true;\n      this._onChange('preventFormSubmission', 'formSubmissionNo');\n    }\n    /**\n     * @description if the user already interacted with the checkboxes,\n     * skip country default selection.\n     */\n    if (!this.changed && !this.fetchedPref) {\n      /**\n       * @description\n       * change checkbox checked option based on new country.\n       */\n      this.setDefaultSelections();\n    }\n  }\n  countryChanged() {\n    resetToWorldWideContent();\n    this.countryChangeAction();\n  }\n  /**\n   *\n   * @param name name of the attribute\n   * @param oldVal old value of the attribute\n   * @param newVal new value of the attrbute\n   */\n  attributeChangedCallback(name, oldVal, newVal) {\n    const hasValue = newVal !== null && oldVal !== null;\n    super.attributeChangedCallback(name, oldVal, newVal);\n    switch (name) {\n      case 'question-choices': {\n        // Reload checkbox options when questionchoices changed\n        if (oldVal !== newVal) {\n          this.prepareCheckboxes();\n          this.setDefaultSelections();\n        }\n        break;\n      }\n      case 'language': {\n        // load content when locale changed.\n        const [language] = newVal.split(/[-_]/);\n\n        let defaultLanguage = 'en';\n        if (supportedLanguages(newVal)) {\n          defaultLanguage = supportedLanguages(newVal);\n        } else if (supportedLanguages(language)) {\n          defaultLanguage = supportedLanguages(language);\n        }\n\n        if (hasValue && oldVal !== newVal) {\n          loadContent(\n            defaultLanguage,\n            (ncData) => {\n              this.ncData = ncData;\n              this.prepareCheckboxes();\n            },\n            () => {\n              this.defaultLoadContent();\n            }\n          );\n        }\n        break;\n      }\n      case 'country': {\n        /**\n         * load content when country value changed.\n         */\n        if (\n          hasValue &&\n          oldVal !== newVal &&\n          countrySettings[newVal.toLocaleLowerCase()]\n        ) {\n          this.countryChanged();\n        }\n        break;\n      }\n      case 'enable-all-opt-in':\n        this.setDefaultSelections();\n        break;\n      case 'email': {\n        if (newVal) {\n          if (newVal !== this.fetchedPref) {\n            // Handle throttle using debounce approach.\n            if (emailRegExp.test(newVal)) {\n              setTimeout(() => {\n                this.emailChanged(newVal);\n              }, 1000);\n            }\n          }\n        } else {\n          if (this.fetchedPref) {\n            this.fetchedPref = newVal;\n          }\n        }\n        break;\n      }\n      case 'hide-error-message': {\n        if (oldVal !== newVal) {\n          this.hideErrorMessage = JSON.parse(newVal);\n          this.countryBasedLegalNotice();\n        }\n\n        break;\n      }\n      case 'show-legal-notice': {\n        this.showLegalNotice = JSON.parse(newVal);\n        break;\n      }\n    }\n  }\n\n  private checkBoxChange($event: any) {\n    const id = $event.target.id;\n\n    const checked = $event.target.checked;\n    const newValues = {\n      ...this.values,\n    };\n    newValues[id] = !!checked;\n    this.values = newValues;\n\n    this.changed = true;\n    const hiddenFieldName = `NC_HIDDEN_${id}`;\n    const hiddenFieldStatus = checked ? 'PERMISSION' : 'SUPPRESSION';\n    this.values[id] = {};\n    this.values[id]['checkBoxStatus'] = hiddenFieldStatus;\n    this._onChange(hiddenFieldName, hiddenFieldStatus);\n    this._onChange(\n      `${hiddenFieldName}_VALUE`,\n      `NC_HIDDEN_${hiddenFieldStatus}`\n    );\n  }\n  static get stableSelector() {\n    return `${ddsPrefix}--notice-choice`;\n  }\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n  checkBoxLegalChange($event: any) {\n    const legalCheckbox = $event.target;\n    const isChecked = legalCheckbox.checked;\n    const legalTextError = legalCheckbox.parentNode.querySelector('.nc-error');\n    const qChinaPIPl = isChecked ? 'qChinaPIPlYes' : 'qChinaPIPlNo';\n\n    if (legalTextError) {\n      legalTextError.style.display = isChecked ? 'none' : '';\n    }\n\n    legalCheckbox.value = isChecked ? 1 : 0;\n    this.preventFormSubmission = !isChecked;\n    const preventFormSubmissionValue = isChecked\n      ? 'formSubmissionYes'\n      : 'formSubmissionNo';\n    this._onChange('preventFormSubmission', preventFormSubmissionValue);\n    this._onChange('Q_CHINA_PIPL', qChinaPIPl);\n  }\n\n  countryBasedLegalNotice() {\n    const country = this.country.toLocaleLowerCase();\n    const itemTemplates: Array<TemplateResult> = [];\n\n    if (\n      this.ncData?.mandatoryCheckbox &&\n      this.ncData.mandatoryCheckbox[country]\n    ) {\n      const mandatoryCheckboxes: { [key: string]: any } =\n        this.ncData.mandatoryCheckbox[country];\n\n      for (const [key, mandatoryCheckbox] of Object.entries(\n        mandatoryCheckboxes\n      )) {\n        const legalTextName = key.replace(/([A-Z]+)/g, '-$1').toLowerCase();\n        let mandatoryCheckboxTemplate = html`\n          <span>\n            <div class=\"${prefix}--form-item bx--checkbox-wrapper\">\n              <p part=${legalTextName} class=${legalTextName}>\n                <input\n                  type=\"checkbox\"\n                  class=\"${prefix}--checkbox\"\n                  id=\"${mandatoryCheckbox.mrs_field}\"\n                  name=\"${mandatoryCheckbox.mrs_field}\"\n                  @change=\"${this.checkBoxLegalChange}\" />\n                <label\n                  for=\"${mandatoryCheckbox.mrs_field}\"\n                  class=\"${prefix}--checkbox-label ${prefix}--nc__checkbox-${mandatoryCheckbox.mrs_field}\"\n                  ><span class=\"${prefix}--checkbox-label-text\" dir=\"auto\"\n                    >${mandatoryCheckbox.text}\n                  </span>\n                </label>\n                ${!this.hideErrorMessage && this.preventFormSubmission\n                  ? html`<span\n                      class=\"nc-error\"\n                      style=\"color:#da1e28;font-size:.75rem\"\n                      >${mandatoryCheckbox.error}</span\n                    >`\n                  : ''}\n              </p>\n            </div>\n          </span>\n        `;\n        itemTemplates.push(mandatoryCheckboxTemplate);\n      }\n    }\n\n    return itemTemplates;\n  }\n\n  checkBoxTemplate(checkbox, checked, hiddenBox) {\n    this._onChange(`${hiddenBox.id}_VALUE`, `NC_HIDDEN_${hiddenBox.value}`);\n    return html`<span>\n      <div class=\"${prefix}--form-item bx--checkbox-wrapper\">\n        <input\n          type=\"checkbox\"\n          class=\"${prefix}--checkbox\"\n          id=\"${checkbox.id}\"\n          name=\"${checkbox.id}\"\n          ?checked=${checked}\n          @change=\"${this.checkBoxChange}\" />\n        <label\n          for=\"${checkbox.id}\"\n          class=\"${prefix}--checkbox-label ${prefix}--nc__checkbox-${checkbox.id}\"\n          ><span class=\"${prefix}--checkbox-label-text\" dir=\"auto\"\n            >${checkbox.labelText}\n          </span>\n        </label>\n        <input\n          type=\"hidden\"\n          id=${hiddenBox.id}\n          name=${hiddenBox.id}\n          value=${hiddenBox.value} />\n      </div>\n    </span>`;\n  }\n  preTextTemplate() {\n    if (this.ncData) {\n      const country = this.country?.toLocaleLowerCase();\n      const ecmTranslateContent = this.ncData;\n      let preText = ecmTranslateContent.preText;\n\n      if (ecmTranslateContent.state[country]) {\n        const state = this.state.toLocaleLowerCase() || '';\n        if (\n          country === 'us' &&\n          (state === 'ca' || state === '' || typeof state === 'undefined')\n        ) {\n          preText = ecmTranslateContent.state[country]['ca'].preText;\n        } else {\n          preText = ecmTranslateContent.state[country][state]\n            ? ecmTranslateContent.state[country][state].preText\n            : ecmTranslateContent.preText;\n        }\n      }\n\n      if (ecmTranslateContent.country[country]) {\n        preText = ecmTranslateContent.country[country.toLowerCase()].preText;\n      }\n\n      return html`${unsafeHTML(preText)}`;\n    } else {\n      return html``;\n    }\n  }\n  postTextTemplate() {\n    if (this.ncData) {\n      const OtherPreferences = this.ncData.trialPrivacyText;\n      let postText = this.ncData.postText;\n\n      if (postText) {\n        postText = '<p part=\"ncPostText\">' + postText + '</p>';\n      }\n\n      if (!this.termsConditionLink.strings && this.termsConditionLink) {\n        let originalValue = OtherPreferences;\n        const matchedValue = originalValue.match(/<tc>.*<\\/tc>/g);\n        if (matchedValue) {\n          const anrTagHtml = matchedValue[0].replace(/<tc>|<\\/tc>/g, '');\n          const link = `<a href='${this.termsConditionLink}' target='_blank' class='ibm-tooltip' >${anrTagHtml}</a>`;\n          const reg = new RegExp('<tc>' + anrTagHtml + '</tc>', 'g');\n\n          postText =\n            postText +\n            originalValue\n              .replace(reg, link)\n              .replace(/<p>/g, '<p part=\"nc-trial-text\" id=\"nc-trial-text\">');\n        }\n      }\n      if (postText !== '') {\n        postText =\n          \"<div part='ncPostTextContainer' id='ncPostTextContainer'>\" +\n          postText +\n          '</div>';\n      }\n      return html`${unsafeHTML(postText)}`;\n    } else {\n      return html``;\n    }\n  }\n  getBpidLegalText() {\n    if (this.bpidLegalText) {\n      return html`<p>${this.bpidLegalText}</p>`;\n    } else {\n      return ``;\n    }\n  }\n  render() {\n    return html`<section class=\"${prefix}--nc\">\n    <p part='ncHeading' id=\"ncHeading\" class=\"${ddsPrefix}--nc__pre-text\">${\n      this.showLegalNotice ? this.countryBasedLegalNotice() : ''\n    } ${this.preTextTemplate()} </p>\n      <div part='${prefix}--checkbox-group' class=\"${prefix}--checkbox-group\">\n            ${\n              Object.keys(this.checkboxes).length !== 0\n                ? Object.keys(this.checkboxes).length > 0 &&\n                  Object.keys(this.checkboxes).map((key) => {\n                    const checked = this.values[key];\n                    const checkbox = this.checkboxes[key];\n                    const hiddenBox = {\n                      id: 'NC_HIDDEN_' + key,\n                      value: this.values[key]['checkBoxStatus']\n                        ? this.values[key]['checkBoxStatus']\n                        : this.values[key]\n                        ? 'PERMISSION'\n                        : 'UNCHANGED',\n                    };\n                    key === 'EMAIL' ? (this.hiddenEmail = hiddenBox.value) : '';\n                    key === 'PHONE' ? (this.hiddenPhone = hiddenBox.value) : '';\n                    return this.checkBoxTemplate(checkbox, checked, hiddenBox);\n                  })\n                : ''\n            }\n\n          </div>\n          <div part='${prefix}--nc__post-text' class=\"${prefix}--nc__post-text\"\n          >${this.postTextTemplate()}</div>\n          <input type='hidden' id=\"preventFormSubmission\" name=\"preventFormSubmission\" value=${\n            this.preventFormSubmission\n          } />\n        </div>\n        ${this.getBpidLegalText()}\n    </section>`;\n  }\n  protected emailChanged(email) {\n    if (this.changed === false) {\n      checkPreferencesv3(email).then((response) => {\n        const questionChoiceStatus =\n          countrySettings[this.country.toLocaleLowerCase()];\n\n        if (response === 'S' && questionChoiceStatus.email === 'opt-out') {\n          this.values = {\n            ...this.values,\n            EMAIL: false,\n            ...{ checkBoxStatus: 'UNCHANGED' },\n          };\n          this._onChange('NC_HIDDEN_EMAIL', null);\n        } else {\n          this.values = {\n            ...this.values,\n            EMAIL: questionChoiceStatus.email === 'opt-out' ? true : false,\n            ...{\n              checkBoxStatus:\n                questionChoiceStatus.email === 'opt-out'\n                  ? 'PERMISSION'\n                  : 'UNCHANGED',\n            },\n          };\n          this._onChange('NC_HIDDEN_EMAIL', null);\n        }\n      });\n    }\n  }\n  protected _getOptionByQuestion = (question) => {\n    const questionChoiceStatus = this.country\n      ? countrySettings[this.country.toLocaleLowerCase()]\n      : { email: 'opt-in', phone: 'opt-in' };\n\n    let option;\n    switch (question) {\n      case 'EMAIL': {\n        option = {\n          id: '0',\n          checked: questionChoiceStatus.email === 'opt-out' ? true : false,\n          optionTextPost: this.ncData.email,\n          NC_HIDDEN_EMAIL:\n            questionChoiceStatus.email === 'opt-out' ? 'OPT_OUT' : 'OPT_IN',\n        };\n        break;\n      }\n      case 'PHONE': {\n        option = {\n          id: '1',\n          checked: questionChoiceStatus.phone === 'opt-out' ? true : false,\n          optionTextPost: this.ncData.telephone,\n          NC_HIDDEN_PHONE:\n            questionChoiceStatus.phone === 'opt-out' ? 'OPT_OUT' : 'OPT_IN',\n        };\n        break;\n      }\n\n      default: {\n        option = {\n          id: '0',\n          checked: questionChoiceStatus.email === 'opt-out' ? true : false,\n          optionTextPost: this.ncData.email,\n          NC_HIDDEN_EMAIL:\n            questionChoiceStatus.email === 'opt-out' ? 'OPT_OUT' : 'OPT_IN',\n        };\n        break;\n      }\n    }\n\n    return option;\n  };\n  protected _buildCheckboxes() {\n    const fieldElements: any = {};\n    const fieldCollections = {\n      EMAIL: {\n        id: 'EMAIL',\n        labelText: this._getOptionByQuestion('EMAIL').optionTextPost,\n      },\n      PHONE: {\n        id: 'PHONE',\n        labelText: this._getOptionByQuestion('PHONE').optionTextPost,\n      },\n    };\n    if (this.questionchoices) {\n      // by email\n      if (this.questionchoices.indexOf('1') > -1) {\n        fieldElements.EMAIL = fieldCollections.EMAIL;\n      }\n      // by Phone\n      if (this.questionchoices.indexOf('2') > -1) {\n        fieldElements.PHONE = fieldCollections.PHONE;\n      }\n    }\n    return fieldElements;\n  }\n\n  _onChange(field: string, value: string | null) {\n    const pwsFieldsMap = {\n      NC_HIDDEN_EMAIL: 'permission_email',\n      NC_HIDDEN_PHONE: 'permission_phone',\n      preventFormSubmission: 'preventFormSubmission',\n      Q_CHINA_PIPL: 'Q_CHINA_PIPL',\n      NC_HIDDEN_EMAIL_VALUE: 'NC_HIDDEN_EMAIL',\n      NC_HIDDEN_PHONE_VALUE: 'NC_HIDDEN_PHONE',\n    };\n\n    if (Object.prototype.hasOwnProperty.call(pwsFieldsMap, field)) {\n      field = pwsFieldsMap[field];\n    }\n\n    const init = {\n      bubbles: true,\n      detail: {\n        field,\n        value: pwsValueMap(value),\n      },\n    };\n    this.dispatchEvent(\n      new CustomEvent(`${ddsPrefix}-notice-choice-change`, init)\n    );\n  }\n}\n\nexport default NoticeChoice;\n"]}

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

@@ -27,7 +27,7 @@ var _noticeChoiceCss = _interopRequireDefault(require("././notice-choice.css.js"
 var _unsafeHtml = require("lit-html/directives/unsafe-html");
 var _worldWideContent = require("./world-wide-content.js");
 var _carbonElement = require("../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
@@ -163,6 +163,26 @@ var NoticeChoice = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)
       value: function value() {
         return '';
       }
+    }, {
+      kind: "field",
+      decorators: [(0, _litElement.property)({
+        type: Boolean,
+        attribute: 'hide-error-message'
+      })],
+      key: "hideErrorMessage",
+      value: function value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [(0, _litElement.property)({
+        type: Boolean,
+        attribute: 'show-legal-notice'
+      })],
+      key: "showLegalNotice",
+      value: function value() {
+        return true;
+      }
     }, {
       kind: "field",
       decorators: [(0, _litElement.property)({
@@ -211,6 +231,16 @@ var NoticeChoice = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)
       value: function value() {
         return {};
       }
+    }, {
+      kind: "field",
+      decorators: [(0, _litElement.property)({
+        type: Boolean,
+        attribute: false
+      })],
+      key: "preventFormSubmission",
+      value: function value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [(0, _litElement.property)({
@@ -339,7 +369,7 @@ var NoticeChoice = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)
             }
             var hiddenFieldName = "NC_HIDDEN_".concat(key);
             newValues[hiddenFieldName] = option[hiddenFieldName];
-            _this4._onChange(hiddenFieldName, newValues[key] ? 'OPT_IN' : null);
+            _this4._onChange(hiddenFieldName, newValues[key] ? 'OPT_IN' : 'OPT_OUT');
           });
           if (JSON.stringify(this.values) !== JSON.stringify(newValues)) {
             this.values = newValues;
@@ -350,10 +380,16 @@ var NoticeChoice = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)
       kind: "method",
       key: "countryChangeAction",
       value: function countryChangeAction() {
+        var _this$ncData, _this$country;
         var splitValue = this.language;
         if (splitValue == 'en') {
           this.preText = this.preTextTemplate();
         }
+        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()]) {
+          this.preventFormSubmission = true;
+          this._onChange('preventFormSubmission', 'formSubmissionNo');
+        }
         /**
          * @description if the user already interacted with the checkboxes,
          * skip country default selection.
@@ -449,6 +485,19 @@ var NoticeChoice = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)
               }
               break;
             }
+          case 'hide-error-message':
+            {
+              if (oldVal !== newVal) {
+                this.hideErrorMessage = JSON.parse(newVal);
+                this.countryBasedLegalNotice();
+              }
+              break;
+            }
+          case 'show-legal-notice':
+            {
+              this.showLegalNotice = JSON.parse(newVal);
+              break;
+            }
         }
       }
     }, {
@@ -466,6 +515,7 @@ var NoticeChoice = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)
         this.values[id] = {};
         this.values[id]['checkBoxStatus'] = hiddenFieldStatus;
         this._onChange(hiddenFieldName, hiddenFieldStatus);
+        this._onChange("".concat(hiddenFieldName, "_VALUE"), "NC_HIDDEN_".concat(hiddenFieldStatus));
       }
     }, {
       kind: "get",
@@ -483,18 +533,56 @@ var NoticeChoice = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)
       }
     }, {
       kind: "method",
-      key: "checkBoxTemplate",
+      key: "checkBoxLegalChange",
       value: // `styles` here is a `CSSResult` generated by custom WebPack loader
-      function checkBoxTemplate(checkbox, checked, hiddenBox) {
-        return (0, _litElement.html)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["<span>\n      <div class=\"", "--form-item bx--checkbox-wrapper\">\n        <input\n          type=\"checkbox\"\n          class=\"", "--checkbox\"\n          id=\"", "\"\n          name=\"", "\"\n          ?checked=", "\n          @change=\"", "\" />\n        <label\n          for=\"", "\"\n          class=\"", "--checkbox-label ", "--nc__checkbox-", "\"\n          ><span class=\"", "--checkbox-label-text\" dir=\"auto\"\n            >", "\n          </span>\n        </label>\n        <input\n          type=\"hidden\"\n          id=", "\n          name=", "\n          value=", " />\n      </div>\n    </span>"])), prefix, prefix, checkbox.id, checkbox.id, checked, this.checkBoxChange, checkbox.id, prefix, prefix, checkbox.id, prefix, checkbox.labelText, hiddenBox.id, hiddenBox.id, hiddenBox.value);
+      function checkBoxLegalChange($event) {
+        var legalCheckbox = $event.target;
+        var isChecked = legalCheckbox.checked;
+        var legalTextError = legalCheckbox.parentNode.querySelector('.nc-error');
+        var qChinaPIPl = isChecked ? 'qChinaPIPlYes' : 'qChinaPIPlNo';
+        if (legalTextError) {
+          legalTextError.style.display = isChecked ? 'none' : '';
+        }
+        legalCheckbox.value = isChecked ? 1 : 0;
+        this.preventFormSubmission = !isChecked;
+        var preventFormSubmissionValue = isChecked ? 'formSubmissionYes' : 'formSubmissionNo';
+        this._onChange('preventFormSubmission', preventFormSubmissionValue);
+        this._onChange('Q_CHINA_PIPL', qChinaPIPl);
+      }
+    }, {
+      kind: "method",
+      key: "countryBasedLegalNotice",
+      value: function countryBasedLegalNotice() {
+        var _this$ncData2;
+        var country = this.country.toLocaleLowerCase();
+        var itemTemplates = [];
+        if ((_this$ncData2 = this.ncData) !== null && _this$ncData2 !== void 0 && _this$ncData2.mandatoryCheckbox && this.ncData.mandatoryCheckbox[country]) {
+          var mandatoryCheckboxes = this.ncData.mandatoryCheckbox[country];
+          for (var _i = 0, _Object$entries = Object.entries(mandatoryCheckboxes); _i < _Object$entries.length; _i++) {
+            var _Object$entries$_i = (0, _slicedToArray2["default"])(_Object$entries[_i], 2),
+              _key2 = _Object$entries$_i[0],
+              mandatoryCheckbox = _Object$entries$_i[1];
+            var legalTextName = _key2.replace(/([A-Z]+)/g, '-$1').toLowerCase();
+            var mandatoryCheckboxTemplate = (0, _litElement.html)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n          <span>\n            <div class=\"", "--form-item bx--checkbox-wrapper\">\n              <p part=", " class=", ">\n                <input\n                  type=\"checkbox\"\n                  class=\"", "--checkbox\"\n                  id=\"", "\"\n                  name=\"", "\"\n                  @change=\"", "\" />\n                <label\n                  for=\"", "\"\n                  class=\"", "--checkbox-label ", "--nc__checkbox-", "\"\n                  ><span class=\"", "--checkbox-label-text\" dir=\"auto\"\n                    >", "\n                  </span>\n                </label>\n                ", "\n              </p>\n            </div>\n          </span>\n        "])), 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 ? (0, _litElement.html)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["<span\n                      class=\"nc-error\"\n                      style=\"color:#da1e28;font-size:.75rem\"\n                      >", "</span\n                    >"])), mandatoryCheckbox.error) : '');
+            itemTemplates.push(mandatoryCheckboxTemplate);
+          }
+        }
+        return itemTemplates;
+      }
+    }, {
+      kind: "method",
+      key: "checkBoxTemplate",
+      value: function checkBoxTemplate(checkbox, checked, hiddenBox) {
+        this._onChange("".concat(hiddenBox.id, "_VALUE"), "NC_HIDDEN_".concat(hiddenBox.value));
+        return (0, _litElement.html)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["<span>\n      <div class=\"", "--form-item bx--checkbox-wrapper\">\n        <input\n          type=\"checkbox\"\n          class=\"", "--checkbox\"\n          id=\"", "\"\n          name=\"", "\"\n          ?checked=", "\n          @change=\"", "\" />\n        <label\n          for=\"", "\"\n          class=\"", "--checkbox-label ", "--nc__checkbox-", "\"\n          ><span class=\"", "--checkbox-label-text\" dir=\"auto\"\n            >", "\n          </span>\n        </label>\n        <input\n          type=\"hidden\"\n          id=", "\n          name=", "\n          value=", " />\n      </div>\n    </span>"])), prefix, prefix, checkbox.id, checkbox.id, checked, this.checkBoxChange, checkbox.id, prefix, prefix, checkbox.id, prefix, checkbox.labelText, hiddenBox.id, hiddenBox.id, hiddenBox.value);
       }
     }, {
       kind: "method",
       key: "preTextTemplate",
       value: function preTextTemplate() {
         if (this.ncData) {
-          var _this$country;
-          var country = (_this$country = this.country) === null || _this$country === void 0 ? void 0 : _this$country.toLocaleLowerCase();
+          var _this$country2;
+          var country = (_this$country2 = this.country) === null || _this$country2 === void 0 ? void 0 : _this$country2.toLocaleLowerCase();
           var ecmTranslateContent = this.ncData;
           var preText = ecmTranslateContent.preText;
           if (ecmTranslateContent.state[country]) {
@@ -508,9 +596,9 @@ var NoticeChoice = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)
           if (ecmTranslateContent.country[country]) {
             preText = ecmTranslateContent.country[country.toLowerCase()].preText;
           }
-          return (0, _litElement.html)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["", ""])), (0, _unsafeHtml.unsafeHTML)(preText));
+          return (0, _litElement.html)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["", ""])), (0, _unsafeHtml.unsafeHTML)(preText));
         } else {
-          return (0, _litElement.html)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])([""])));
+          return (0, _litElement.html)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])([""])));
         }
       }
     }, {
@@ -530,15 +618,15 @@ var NoticeChoice = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)
               var anrTagHtml = matchedValue[0].replace(/<tc>|<\/tc>/g, '');
               var link = "<a href='".concat(this.termsConditionLink, "' target='_blank' class='ibm-tooltip' >").concat(anrTagHtml, "</a>");
               var reg = new RegExp('<tc>' + anrTagHtml + '</tc>', 'g');
-              postText = postText + originalValue.replace(reg, link);
+              postText = postText + originalValue.replace(reg, link).replace(/<p>/g, '<p part="nc-trial-text" id="nc-trial-text">');
             }
           }
           if (postText !== '') {
             postText = "<div part='ncPostTextContainer' id='ncPostTextContainer'>" + postText + '</div>';
           }
-          return (0, _litElement.html)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["", ""])), (0, _unsafeHtml.unsafeHTML)(postText));
+          return (0, _litElement.html)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["", ""])), (0, _unsafeHtml.unsafeHTML)(postText));
         } else {
-          return (0, _litElement.html)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])([""])));
+          return (0, _litElement.html)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])([""])));
         }
       }
     }, {
@@ -546,7 +634,7 @@ var NoticeChoice = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)
       key: "getBpidLegalText",
       value: function getBpidLegalText() {
         if (this.bpidLegalText) {
-          return (0, _litElement.html)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["<p>", "</p>"])), this.bpidLegalText);
+          return (0, _litElement.html)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["<p>", "</p>"])), this.bpidLegalText);
         } else {
           return "";
         }
@@ -556,7 +644,7 @@ var NoticeChoice = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)
       key: "render",
       value: function render() {
         var _this6 = this;
-        return (0, _litElement.html)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["<section class=\"", "--nc\">\n    <p part='ncHeading' id=\"ncHeading\" class=\"", "--nc__pre-text\">", " </p>\n      <div part='", "--checkbox-group' class=\"", "--checkbox-group\">\n            ", "\n\n          </div>\n          <div part='", "--nc__post-text' class=\"", "--nc__post-text\"\n          >", "</div>\n          \n        </div>\n        ", "\n    </section>"])), prefix, ddsPrefix, this.preTextTemplate(), prefix, prefix, Object.keys(this.checkboxes).length !== 0 ? Object.keys(this.checkboxes).length > 0 && Object.keys(this.checkboxes).map(function (key) {
+        return (0, _litElement.html)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["<section class=\"", "--nc\">\n    <p part='ncHeading' id=\"ncHeading\" class=\"", "--nc__pre-text\">", " ", " </p>\n      <div part='", "--checkbox-group' class=\"", "--checkbox-group\">\n            ", "\n\n          </div>\n          <div part='", "--nc__post-text' class=\"", "--nc__post-text\"\n          >", "</div>\n          <input type='hidden' id=\"preventFormSubmission\" name=\"preventFormSubmission\" value=", " />\n        </div>\n        ", "\n    </section>"])), prefix, ddsPrefix, this.showLegalNotice ? this.countryBasedLegalNotice() : '', this.preTextTemplate(), prefix, prefix, Object.keys(this.checkboxes).length !== 0 ? Object.keys(this.checkboxes).length > 0 && Object.keys(this.checkboxes).map(function (key) {
           var checked = _this6.values[key];
           var checkbox = _this6.checkboxes[key];
           var hiddenBox = {
@@ -566,7 +654,7 @@ var NoticeChoice = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)
           key === 'EMAIL' ? _this6.hiddenEmail = hiddenBox.value : '';
           key === 'PHONE' ? _this6.hiddenPhone = hiddenBox.value : '';
           return _this6.checkBoxTemplate(checkbox, checked, hiddenBox);
-        }) : '', prefix, prefix, this.postTextTemplate(), this.getBpidLegalText());
+        }) : '', prefix, prefix, this.postTextTemplate(), this.preventFormSubmission, this.getBpidLegalText());
       }
     }, {
       kind: "method",
@@ -673,7 +761,11 @@ var NoticeChoice = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)
       value: function _onChange(field, value) {
         var pwsFieldsMap = {
           NC_HIDDEN_EMAIL: 'permission_email',
-          NC_HIDDEN_PHONE: 'permission_phone'
+          NC_HIDDEN_PHONE: 'permission_phone',
+          preventFormSubmission: 'preventFormSubmission',
+          Q_CHINA_PIPL: 'Q_CHINA_PIPL',
+          NC_HIDDEN_EMAIL_VALUE: 'NC_HIDDEN_EMAIL',
+          NC_HIDDEN_PHONE_VALUE: 'NC_HIDDEN_PHONE'
         };
         if (Object.prototype.hasOwnProperty.call(pwsFieldsMap, field)) {
           field = pwsFieldsMap[field];