@carbon/ibmdotcom-web-components 2.16.3 → 2.17.0-rc.0

package/es/components/feature-section/feature-section.d.ts

@@ -1,14 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2024
+ * Copyright IBM Corp. 2020, 2025
  *
  * 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 C4DFeatureCard from '../feature-card/feature-card';
 import '../image/image';
-import { COLOR_SCHEME } from './defs';
+import { COLOR_SCHEME, MEDIA_ALIGNMENT } from './defs';
 declare const C4DFeatureSection_base: {
     new (...args: any[]): {
         linkNode: any;
@@ -370,6 +370,7 @@ declare class C4DFeatureSection extends C4DFeatureSection_base {
      * Color scheme type (regular (default) | inverse | cyan | purple )
      */
     colorScheme: COLOR_SCHEME;
+    mediaAlignment: MEDIA_ALIGNMENT;
     render(): import("lit-html").TemplateResult<1>;
     static get stableSelector(): string;
     static get styles(): import("lit").CSSResult;

package/es/components/feature-section/feature-section.js

@@ -3,12 +3,14 @@ import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _get from "@babel/runtime/helpers/esm/get";
 let _ = t => t,
   _t,
-  _t2;
+  _t2,
+  _t3,
+  _t4;
 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; }
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2024
+ * Copyright IBM Corp. 2020, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -21,7 +23,7 @@ import C4DFeatureCard from "../feature-card/feature-card.js";
 import "../image/image.js";
 import styles from "././feature-section.css.js";
 import StableSelectorMixin from "../../globals/mixins/stable-selector.js";
-import { COLOR_SCHEME } from "./defs.js";
+import { COLOR_SCHEME, MEDIA_ALIGNMENT } from "./defs.js";
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
 const {
   prefix,
@@ -62,6 +64,16 @@ let C4DFeatureSection = _decorate([customElement(`${c4dPrefix}-feature-section`)
       value() {
         return COLOR_SCHEME.REGULAR;
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'media-alignment',
+        reflect: true
+      })],
+      key: "mediaAlignment",
+      value() {
+        return MEDIA_ALIGNMENT.RIGHT;
+      }
     }, {
       kind: "method",
       key: "render",
@@ -72,36 +84,68 @@ let C4DFeatureSection = _decorate([customElement(`${c4dPrefix}-feature-section`)
 
       function render() {
         return html(_t || (_t = _`
-      <div
-        class="${0}--grid ${0}--feature-section"
-        part="grid grid--wrapper">
-        <div
-          class="${0}--row ${0}--feature-section__container"
-          part="row row--container">
-          <div
-            class="${0}--col-sm-4 ${0}--col-md-8 ${0}--col-lg-8 ${0}--feature-section__body"
-            part="col col--body-wrapper">
-            <div class="${0}--grid" part="grid grid--body">
-              <div class="${0}--row" part="row row--body">
+      ${0}
+    `), this.mediaAlignment === MEDIA_ALIGNMENT.LEFT ? html(_t2 || (_t2 = _`
+            <div
+              class="${0}--grid ${0}--feature-section"
+              part="grid grid--wrapper">
+              <div
+                class="${0}--row ${0}--feature-section__container"
+                part="row row--container">
+                <div
+                  class="${0}--col-sm-4 ${0}--col-md-8 ${0}--col-lg-8 ${0}--feature-section__image"
+                  part="col col--image">
+                  <slot name="image"></slot>
+                </div>
+                <div
+                  class="${0}--col-sm-4 ${0}--col-md-8 ${0}--col-lg-8 ${0}--feature-section__body"
+                  part="col col--body-wrapper">
+                  <div class="${0}--grid" part="grid grid--body">
+                    <div class="${0}--row" part="row row--body">
+                      <div
+                        class="${0}--col-sm-4 ${0}--col-md-6 ${0}--col-lg-12"
+                        part="col col--body">
+                        <slot name="eyebrow"></slot>
+                        <slot name="heading"></slot>
+                        <slot name="copy"></slot>
+                      </div>
+                    </div>
+                  </div>
+                  <slot name="footer"></slot>
+                </div>
+              </div>
+            </div>
+          `), prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix) : html(_t3 || (_t3 = _`
+            <div
+              class="${0}--grid ${0}--feature-section"
+              part="grid grid--wrapper">
+              <div
+                class="${0}--row ${0}--feature-section__container"
+                part="row row--container">
+                <div
+                  class="${0}--col-sm-4 ${0}--col-md-8 ${0}--col-lg-8 ${0}--feature-section__body"
+                  part="col col--body-wrapper">
+                  <div class="${0}--grid" part="grid grid--body">
+                    <div class="${0}--row" part="row row--body">
+                      <div
+                        class="${0}--col-sm-4 ${0}--col-md-6 ${0}--col-lg-12"
+                        part="col col--body">
+                        <slot name="eyebrow"></slot>
+                        <slot name="heading"></slot>
+                        <slot name="copy"></slot>
+                      </div>
+                    </div>
+                  </div>
+                </div>
                 <div
-                  class="${0}--col-sm-4 ${0}--col-md-6 ${0}--col-lg-12"
-                  part="col col--body">
-                  <slot name="eyebrow"></slot>
-                  <slot name="heading"></slot>
-                  <slot name="copy"></slot>
+                  class="${0}--col-sm-4 ${0}--col-md-8 ${0}--col-lg-8 ${0}--feature-section__image"
+                  part="col col--image">
+                  <slot name="image"></slot>
+                  <slot name="footer"></slot>
                 </div>
               </div>
             </div>
-          </div>
-          <div
-            class="${0}--col-sm-4 ${0}--col-md-8 ${0}--col-lg-8 ${0}--feature-section__image"
-            part="col col--image">
-            <slot name="image"></slot>
-            <slot name="footer"></slot>
-          </div>
-        </div>
-      </div>
-    `), prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix);
+          `), prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix, prefix));
       }
     }, {
       kind: "get",
@@ -115,7 +159,7 @@ let C4DFeatureSection = _decorate([customElement(`${c4dPrefix}-feature-section`)
       static: true,
       key: "styles",
       value: function () {
-        return css(_t2 || (_t2 = _`
+        return css(_t4 || (_t4 = _`
       ${0}${0}
     `), _superPropGet(C4DFeatureSection, "styles", this), styles);
       }

package/es/components/feature-section/feature-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature-section.js","names":["css","html","property","settings","C4DFeatureCard","styles","StableSelectorMixin","COLOR_SCHEME","carbonElement","customElement","prefix","stablePrefix","c4dPrefix","C4DFeatureSection","_decorate","_initialize","_StableSelectorMixin","constructor","args","F","d","kind","decorators","attribute","reflect","key","value","REGULAR","render","_t","_","static","_t2","_superPropGet"],"sources":["components/feature-section/feature-section.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2024\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 { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport C4DFeatureCard from '../feature-card/feature-card';\nimport '../image/image';\nimport styles from './feature-section.scss';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport { COLOR_SCHEME } from './defs';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\nconst { prefix, stablePrefix: c4dPrefix } = settings;\n\n/**\n * Feature Section.\n *\n * @element c4d-feature-section\n * @csspart grid - All grid itens. Usage: `c4d-feature-section::part(grid)`\n * @csspart grid--wrapper - The grid Wrapper. Usage: `c4d-feature-section::part(grid--wrapper)`\n * @csspart grid--body - Thw grid body. Usage: `c4d-feature-section::part(grid--body)`\n * @csspart row - All row items. Usage: `c4d-feature-section::part(row)`\n * @csspart row--container -  The row container. Usage: `c4d-feature-section::part(row--container)`\n * @csspart row--body -  The row body. Usage: `c4d-feature-section::part(row--body)`\n * @csspart col -  All column itens. Usage: `c4d-feature-section::part(col)`\n * @csspart col--body-wrapper - The column wrapper. Usage: `c4d-feature-section::part(col--body-wrapper)`\n * @csspart col--body -  The column body. Usage: `c4d-feature-section::part(col--body)`\n * @csspart col--image - The column image. Usage: `c4d-feature-section::part(col--image)`\n */\n@customElement(`${c4dPrefix}-feature-section`)\nclass C4DFeatureSection extends StableSelectorMixin(C4DFeatureCard) {\n  /**\n   * Color scheme type (regular (default) | inverse | cyan | purple )\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = COLOR_SCHEME.REGULAR;\n\n  render() {\n    return html`\n      <div\n        class=\"${prefix}--grid ${prefix}--feature-section\"\n        part=\"grid grid--wrapper\">\n        <div\n          class=\"${prefix}--row ${prefix}--feature-section__container\"\n          part=\"row row--container\">\n          <div\n            class=\"${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body\"\n            part=\"col col--body-wrapper\">\n            <div class=\"${prefix}--grid\" part=\"grid grid--body\">\n              <div class=\"${prefix}--row\" part=\"row row--body\">\n                <div\n                  class=\"${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12\"\n                  part=\"col col--body\">\n                  <slot name=\"eyebrow\"></slot>\n                  <slot name=\"heading\"></slot>\n                  <slot name=\"copy\"></slot>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div\n            class=\"${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image\"\n            part=\"col col--image\">\n            <slot name=\"image\"></slot>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  static get stableSelector() {\n    return `${c4dPrefix}--feature-section`;\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}${styles}\n    `;\n  }\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default C4DFeatureSection;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,GAAG,EAAEC,IAAI,QAAQ,KAAK;AAC/B,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,OAAOC,QAAQ,MAAM,+DAA+D;AACpF,OAAOC,cAAc,MAAM,iCAA8B;AACzD,OAAO,mBAAgB;AACvB,OAAOC,MAAM,MAAM,4BAAwB;AAC3C,OAAOC,mBAAmB,MAAM,yCAAsC;AACtE,SAASC,YAAY,QAAQ,WAAQ;AACrC,SAASC,aAAa,IAAIC,aAAa,QAAQ,gEAAgE;AAE/G,MAAM;EAAEC,MAAM;EAAEC,YAAY,EAAEC;AAAU,CAAC,GAAGT,QAAQ;;AAEpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAdA,IAgBMU,iBAAiB,GAAAC,SAAA,EADtBL,aAAa,CAAC,GAAGG,SAAS,kBAAkB,CAAC,aAAAG,WAAA,EAAAC,oBAAA;EAA9C,MACMH,iBAAiB,SAAAG,oBAAA,CAA6C;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAkDpE;EAAC;IAAAI,CAAA,EAlDKN,iBAAiB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIpBpB,QAAQ,CAAC;QAAEqB,SAAS,EAAE,cAAc;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAC,GAAA;MAAAC,MAAA;QAAA,OACzCnB,YAAY,CAACoB,OAAO;MAAA;IAAA;MAAAN,IAAA;MAAAI,GAAA;MAAAC,KAAA;MAJlC;AACF;AACA;;MAIE,SAAAE,MAAMA,CAAA,EAAG;QACP,OAAO3B,IAAI,CAAA4B,EAAA,KAAAA,EAAA,GAAAC,CAAA;AACf;AACA,iBAFe;AACf;AACA;AACA,mBAHe;AACf;AACA;AACA,qBAHe;AACf;AACA,0BAFe;AACf,4BADe;AACf;AACA,2BAFe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAVe;AACf;AACA;AACA;AACA;AACA;AACA;AACA,KAPe,GAEEpB,MAAM,EAAUA,MAAM,EAGpBA,MAAM,EAASA,MAAM,EAGnBA,MAAM,EAAcA,MAAM,EAAcA,MAAM,EAAcA,MAAM,EAE7DA,MAAM,EACJA,MAAM,EAEPA,MAAM,EAAcA,MAAM,EAAcA,MAAM,EAUpDA,MAAM,EAAcA,MAAM,EAAcA,MAAM,EAAcA,MAAM;MAQrF;IAAC;MAAAW,IAAA;MAAAU,MAAA;MAAAN,GAAA;MAAAC,KAAA,EAED,SAAAA,CAAA,EAA4B;QAC1B,OAAO,GAAGd,SAAS,mBAAmB;MACxC;IAAC;MAAAS,IAAA;MAAAU,MAAA;MAAAN,GAAA;MAAAC,KAAA,EAED,SAAAA,CAAA,EAAoB;QAClB,OAAO1B,GAAG,CAAAgC,GAAA,KAAAA,GAAA,GAAAF,CAAA;AACd,QADc;AACd,KADc,GAAAG,aAAA,CA9CRpB,iBAAiB,mBA+CAR,MAAM;MAE3B;IAAC;EAAA;AAAA,GAjD6BC,mBAAmB,CAACF,cAAc,CAAC;AAoDnE;AACA,eAAeS,iBAAiB","ignoreList":[]}
+{"version":3,"file":"feature-section.js","names":["css","html","property","settings","C4DFeatureCard","styles","StableSelectorMixin","COLOR_SCHEME","MEDIA_ALIGNMENT","carbonElement","customElement","prefix","stablePrefix","c4dPrefix","C4DFeatureSection","_decorate","_initialize","_StableSelectorMixin","constructor","args","F","d","kind","decorators","attribute","reflect","key","value","REGULAR","RIGHT","render","_t","_","mediaAlignment","LEFT","_t2","_t3","static","_t4","_superPropGet"],"sources":["components/feature-section/feature-section.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2025\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 { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';\nimport C4DFeatureCard from '../feature-card/feature-card';\nimport '../image/image';\nimport styles from './feature-section.scss';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport { COLOR_SCHEME, MEDIA_ALIGNMENT } from './defs';\nimport { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';\n\nconst { prefix, stablePrefix: c4dPrefix } = settings;\n\n/**\n * Feature Section.\n *\n * @element c4d-feature-section\n * @csspart grid - All grid itens. Usage: `c4d-feature-section::part(grid)`\n * @csspart grid--wrapper - The grid Wrapper. Usage: `c4d-feature-section::part(grid--wrapper)`\n * @csspart grid--body - Thw grid body. Usage: `c4d-feature-section::part(grid--body)`\n * @csspart row - All row items. Usage: `c4d-feature-section::part(row)`\n * @csspart row--container -  The row container. Usage: `c4d-feature-section::part(row--container)`\n * @csspart row--body -  The row body. Usage: `c4d-feature-section::part(row--body)`\n * @csspart col -  All column itens. Usage: `c4d-feature-section::part(col)`\n * @csspart col--body-wrapper - The column wrapper. Usage: `c4d-feature-section::part(col--body-wrapper)`\n * @csspart col--body -  The column body. Usage: `c4d-feature-section::part(col--body)`\n * @csspart col--image - The column image. Usage: `c4d-feature-section::part(col--image)`\n */\n@customElement(`${c4dPrefix}-feature-section`)\nclass C4DFeatureSection extends StableSelectorMixin(C4DFeatureCard) {\n  /**\n   * Color scheme type (regular (default) | inverse | cyan | purple )\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = COLOR_SCHEME.REGULAR;\n\n  @property({ attribute: 'media-alignment', reflect: true })\n  mediaAlignment = MEDIA_ALIGNMENT.RIGHT;\n\n  render() {\n    return html`\n      ${this.mediaAlignment === MEDIA_ALIGNMENT.LEFT\n        ? html`\n            <div\n              class=\"${prefix}--grid ${prefix}--feature-section\"\n              part=\"grid grid--wrapper\">\n              <div\n                class=\"${prefix}--row ${prefix}--feature-section__container\"\n                part=\"row row--container\">\n                <div\n                  class=\"${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image\"\n                  part=\"col col--image\">\n                  <slot name=\"image\"></slot>\n                </div>\n                <div\n                  class=\"${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body\"\n                  part=\"col col--body-wrapper\">\n                  <div class=\"${prefix}--grid\" part=\"grid grid--body\">\n                    <div class=\"${prefix}--row\" part=\"row row--body\">\n                      <div\n                        class=\"${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12\"\n                        part=\"col col--body\">\n                        <slot name=\"eyebrow\"></slot>\n                        <slot name=\"heading\"></slot>\n                        <slot name=\"copy\"></slot>\n                      </div>\n                    </div>\n                  </div>\n                  <slot name=\"footer\"></slot>\n                </div>\n              </div>\n            </div>\n          `\n        : html`\n            <div\n              class=\"${prefix}--grid ${prefix}--feature-section\"\n              part=\"grid grid--wrapper\">\n              <div\n                class=\"${prefix}--row ${prefix}--feature-section__container\"\n                part=\"row row--container\">\n                <div\n                  class=\"${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body\"\n                  part=\"col col--body-wrapper\">\n                  <div class=\"${prefix}--grid\" part=\"grid grid--body\">\n                    <div class=\"${prefix}--row\" part=\"row row--body\">\n                      <div\n                        class=\"${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12\"\n                        part=\"col col--body\">\n                        <slot name=\"eyebrow\"></slot>\n                        <slot name=\"heading\"></slot>\n                        <slot name=\"copy\"></slot>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div\n                  class=\"${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image\"\n                  part=\"col col--image\">\n                  <slot name=\"image\"></slot>\n                  <slot name=\"footer\"></slot>\n                </div>\n              </div>\n            </div>\n          `}\n    `;\n  }\n\n  static get stableSelector() {\n    return `${c4dPrefix}--feature-section`;\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}${styles}\n    `;\n  }\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default C4DFeatureSection;\n"],"mappings":"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","ignoreList":[]}

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

@@ -390,6 +390,7 @@ declare class NoticeChoice extends NoticeChoice_base {
         isDisplayed: boolean;
     };
     countrySettings: any;
+    noticeOnly: any;
     emailPrechecked: boolean;
     telephonePrechecked: boolean;
     combinedEmailPhonePrechecked: boolean;
@@ -425,13 +426,10 @@ declare class NoticeChoice extends NoticeChoice_base {
      * @param newVal new value of the attrbute
      */
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
-    private checkBoxChange;
     static get stableSelector(): string;
     static styles: any;
     checkBoxLegalChange($event: any): void;
     countryBasedLegalNotice(): TemplateResult[];
-    checkBoxTemplate(checkbox: any, checked: any, hiddenBox: any): TemplateResult<1>;
-    preTextTemplate(): TemplateResult<1>;
     postTextTemplate(): TemplateResult<1>;
     combinedPreTextTemplate(): any;
     checkCombineEmailPhoneBoxChange($event: any): void;

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

@@ -14,11 +14,7 @@ let _ = t => t,
   _t9,
   _t10,
   _t11,
-  _t12,
-  _t13,
-  _t14,
-  _t15,
-  _t16;
+  _t12;
 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; }
@@ -266,6 +262,14 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
       })],
       key: "countrySettings",
       value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Object,
+        attribute: false
+      })],
+      key: "noticeOnly",
+      value: void 0
     }, {
       kind: "field",
       decorators: [property({
@@ -411,8 +415,9 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
       kind: "method",
       key: "defaultLoadSettings",
       value: function defaultLoadSettings() {
-        loadSettings(countryPreferencesSettings => {
-          this.countrySettings = countryPreferencesSettings;
+        loadSettings(this.environment, countryPreferencesSettings => {
+          this.countrySettings = countryPreferencesSettings.preferences;
+          this.noticeOnly = countryPreferencesSettings.noticeOnly || ['us'];
         }, error => {
           console.error('error loading content', error);
         });
@@ -429,8 +434,9 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
         } else if (supportedLanguages(language)) {
           defaultLanguage = supportedLanguages(language);
         }
-        loadSettings(countryPreferencesSettings => {
-          this.countrySettings = countryPreferencesSettings;
+        loadSettings(this.environment, countryPreferencesSettings => {
+          this.countrySettings = countryPreferencesSettings.preferences;
+          this.noticeOnly = countryPreferencesSettings.noticeOnly || ['us'];
         }, () => {
           this.countrySettings = this.defaultLoadSettings();
         });
@@ -456,11 +462,7 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
             }
             const hiddenFieldName = `NC_HIDDEN_${key}`;
             newValues[hiddenFieldName] = option[hiddenFieldName];
-            if (this.combineEmailPhone) {
-              this._onChange(hiddenFieldName, newValues.EMAIL ? 'OPT_IN' : 'OPT_OUT');
-            } else {
-              this._onChange(hiddenFieldName, newValues[key] ? 'OPT_IN' : 'OPT_OUT');
-            }
+            this._onChange(hiddenFieldName, newValues.EMAIL ? 'OPT_IN' : 'OPT_OUT');
           });
           if (JSON.stringify(this.values) !== JSON.stringify(newValues)) {
             this.values = newValues;
@@ -472,10 +474,6 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
       key: "countryChangeAction",
       value: function countryChangeAction() {
         var _this$ncData, _this$country;
-        const 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()]) {
           var _this$country2, _this$ncData2, _this$ncData3, _this$ncData4;
@@ -489,6 +487,7 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
         } else {
           this._onChange('preventFormSubmission', 'formSubmissionYes');
         }
+
         /**
          * @description if the user already interacted with the checkboxes,
          * skip country default selection.
@@ -544,6 +543,11 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
               }
               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();
@@ -577,42 +581,8 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
               }
               break;
             }
-          case 'combine-email-phone':
-            {
-              if (oldVal !== newVal) {
-                this.combineEmailPhone = JSON.parse(newVal);
-              }
-              break;
-            }
         }
       }
-    }, {
-      kind: "method",
-      key: "checkBoxChange",
-      value: function checkBoxChange($event) {
-        const id = $event.target.id;
-        const checked = $event.target.checked;
-        const newValues = _objectSpread({}, this.values);
-        newValues[id] = !!checked;
-        this.values = newValues;
-        this.changed = true;
-        const hiddenFieldName = `NC_HIDDEN_${id}`;
-        const hiddenFieldStatus = checked ? 'PERMISSION' : 'SUPPRESSION';
-        this.values[id] = {};
-        this.values[id]['checkBoxStatus'] = hiddenFieldStatus;
-        let statusPrechecked = '';
-        switch (id) {
-          case 'EMAIL':
-            statusPrechecked = this.emailPrechecked && !checked ? 'CU' : !this.emailPrechecked && checked ? 'UC' : this.emailPrechecked && checked ? 'CC' : 'UU';
-            break;
-          case 'PHONE':
-            statusPrechecked = this.telephonePrechecked && checked ? 'CC' : this.telephonePrechecked && !checked ? 'CU' : !this.telephonePrechecked && checked ? 'UC' : 'UU';
-            break;
-        }
-        this.values[id]['punsStatus'] = statusPrechecked;
-        this._onChange(hiddenFieldName, hiddenFieldStatus);
-        this._onChange(`${hiddenFieldName}_VALUE`, `NC_HIDDEN_${hiddenFieldStatus}`);
-      }
     }, {
       kind: "get",
       static: true,
@@ -698,67 +668,6 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
         }
         return itemTemplates;
       }
-    }, {
-      kind: "method",
-      key: "checkBoxTemplate",
-      value: function checkBoxTemplate(checkbox, checked, hiddenBox) {
-        this._onChange(`${hiddenBox.id}_VALUE`, `NC_HIDDEN_${hiddenBox.value}`);
-        return html(_t6 || (_t6 = _`<span part="container">
-      <div
-        class="${0}--form-item cds--checkbox-wrapper"
-        part="checkbox-wrapper">
-        <input
-          type="checkbox"
-          class="${0}--checkbox"
-          part="checkbox"
-          id="${0}"
-          name="${0}"
-          ?checked=${0}
-          @change="${0}" />
-        <label
-          for="${0}"
-          class="${0}--checkbox-label ${0}--nc__checkbox-${0}"
-          part="checkbox-label"
-          ><span
-            class="${0}--checkbox-label-text"
-            part="checkbox-label-text"
-            dir="auto"
-            >${0}
-          </span>
-        </label>
-        <input
-          type="hidden"
-          id=${0}
-          name=${0}
-          value=${0} />
-      </div>
-    </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$country4;
-          const country = (_this$country4 = this.country) === null || _this$country4 === void 0 ? void 0 : _this$country4.toLocaleLowerCase();
-          const ecmTranslateContent = this.ncData;
-          let preText = ecmTranslateContent.preText;
-          if (ecmTranslateContent.state[country]) {
-            const state = this.state.toLocaleLowerCase() || '';
-            if (country === 'us' && (state === 'ca' || state === '' || typeof state === 'undefined')) {
-              preText = ecmTranslateContent.state[country]['ca'].preText;
-            } else {
-              preText = ecmTranslateContent.state[country][state] ? ecmTranslateContent.state[country][state].preText : ecmTranslateContent.preText;
-            }
-          }
-          if (ecmTranslateContent.country[country]) {
-            preText = ecmTranslateContent.country[country.toLowerCase()].preText;
-          }
-          return html(_t7 || (_t7 = _`${0}`), unsafeHTML(preText));
-        } else {
-          return html(_t8 || (_t8 = _``));
-        }
-      }
     }, {
       kind: "method",
       key: "postTextTemplate",
@@ -782,43 +691,48 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
           if (postText !== '') {
             postText = "<div part='ncPostTextContainer' id='ncPostTextContainer'>" + postText + '</div>';
           }
-          return html(_t9 || (_t9 = _`${0}`), unsafeHTML(postText));
+          return html(_t6 || (_t6 = _`${0}`), unsafeHTML(postText));
         } else {
-          return html(_t10 || (_t10 = _``));
+          return html(_t7 || (_t7 = _``));
         }
       }
     }, {
       kind: "method",
       key: "combinedPreTextTemplate",
       value: function combinedPreTextTemplate() {
-        var _this$country5, _this$state, _ecmTranslateContent$4;
+        var _this$country4, _this$state, _ecmTranslateContent$4;
         if (!this.ncData) {
-          return html(_t11 || (_t11 = _``));
+          return html(_t8 || (_t8 = _``));
         }
         const ecmTranslateContent = this.ncData;
-        const country = ((_this$country5 = this.country) === null || _this$country5 === void 0 ? void 0 : _this$country5.toLocaleLowerCase()) || '';
+        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 (country === 'us') {
+          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;
           }
-        } else if (country === 'us') {
+        } 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;
         }
         if ((_ecmTranslateContent$4 = ecmTranslateContent.country) !== null && _ecmTranslateContent$4 !== void 0 && _ecmTranslateContent$4[country]) {
           preText = ecmTranslateContent.country[country].combinedConsent;
         }
-        if (country !== 'us') {
-          const checked = this.values.EMAIL;
+        if (!(this.noticeOnly || []).includes(country)) {
+          let isPermissionOrSuppression = false;
+          if (typeof this.values.EMAIL === 'object') {
+            const checkStatus = this.values.EMAIL;
+            isPermissionOrSuppression = checkStatus.checkBoxStatus === 'PERMISSION';
+          }
+          const checked = typeof this.values.EMAIL === 'object' ? isPermissionOrSuppression : this.values.EMAIL;
           preText = preText ? this.renderCheckbox(preText, checked) : this.renderCheckbox(ecmTranslateContent.preText, checked);
           return preText;
         }
-        return html(_t12 || (_t12 = _`${0}`), unsafeHTML(preText));
+        return html(_t9 || (_t9 = _`${0}`), unsafeHTML(preText));
       }
     }, {
       kind: "method",
@@ -830,7 +744,6 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
         Object.keys(this.checkboxes).map(id => {
           newValues[id] = !!checked;
           this.values = newValues;
-          console.log(this.combinedEmailPhonePrechecked);
           const hiddenFieldName = `NC_HIDDEN_${id}`;
           const hiddenFieldStatus = checked ? 'PERMISSION' : 'SUPPRESSION';
           this.values[id] = {};
@@ -852,7 +765,7 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
       key: "renderCheckbox",
       value: function renderCheckbox(preText, checked) {
         const checkboxId = 'EMAIL_PHONE_CHECKBOX';
-        return html(_t13 || (_t13 = _`
+        return html(_t10 || (_t10 = _`
       <span part="container">
         <div
           class="${0}--form-item cds--checkbox-wrapper"
@@ -885,11 +798,30 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
       key: "renderCombinedEmailPhoneSection",
       value: function renderCombinedEmailPhoneSection() {
         const getPunsStatus = (key, checked) => {
-          var _this$country6, _this$values$key;
-          return ((_this$country6 = this.country) === null || _this$country6 === void 0 ? void 0 : _this$country6.toLocaleLowerCase()) === 'us' ? 'NOTICE_ONLY' : ((_this$values$key = this.values[key]) === null || _this$values$key === void 0 ? void 0 : _this$values$key.punsStatus) || (checked ? 'CC' : 'UU');
+          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);
+          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;
+          if (checkboxStatus === 'SUPPRESSION') {
+            if (countryStatus.email === 'opt-in') {
+              return 'UU';
+            }
+            if (countryStatus.email === 'opt-out') {
+              return 'CU';
+            }
+          }
+          return ((_this$values$key2 = this.values[key]) === null || _this$values$key2 === void 0 ? void 0 : _this$values$key2.punsStatus) || (checked ? 'CC' : 'UU');
         };
-        const createHiddenInput = (id, value) => html(_t14 || (_t14 = _`<input type="hidden" id=${0} name=${0} value=${0} />`), id, id, value);
-        return html(_t15 || (_t15 = _`
+        const createHiddenInput = (id, value) => html(_t11 || (_t11 = _`<input type="hidden" id=${0} name=${0} value=${0} />`), id, id, value);
+        return html(_t12 || (_t12 = _`
       <section class="${0}--nc" part="section">
         <p part="ncHeading" id="ncHeading" class="${0}--nc__pre-text ">
           ${0} ${0}
@@ -915,6 +847,13 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
           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}`);
@@ -933,47 +872,7 @@ let NoticeChoice = _decorate([customElement(`c4d-notice-choice`)], function (_in
           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');
         }
-        if (this.combineEmailPhone) {
-          return this.renderCombinedEmailPhoneSection();
-        }
-        return html(_t16 || (_t16 = _`<section class="${0}--nc" part="section">
-    <p part='ncHeading' id="ncHeading" class="${0}--nc__pre-text">${0} ${0} </p>
-      <div part='${0}--checkbox-group' class="${0}--checkbox-group">
-            ${0}
-
-          </div>
-          <div part='${0}--nc__post-text' class="${0}--nc__post-text"
-          >${0}</div>
-          <input type='hidden' id="preventFormSubmission" name="preventFormSubmission" value=${0} />
-        </div>
-    </section>`), prefix, c4dPrefix, this.countryBasedLegalNotice(), this.preTextTemplate(), prefix, prefix, Object.keys(this.checkboxes).length !== 0 ? Object.keys(this.checkboxes).length > 0 && Object.keys(this.checkboxes).map(key => {
-          const checked = this.values[key];
-          const checkbox = this.checkboxes[key];
-          const punsStatus = this.values[key]['punsStatus'] ? this.values[key]['punsStatus'] : checked ? 'CC' : 'UU';
-          const hiddenBox = {
-            id: 'NC_HIDDEN_' + key,
-            value: this.values[key]['checkBoxStatus'] ? this.values[key]['checkBoxStatus'] : this.values[key] ? 'PERMISSION' : 'SUPPRESSION'
-          };
-          switch (key) {
-            case 'EMAIL':
-              this.hiddenEmail = hiddenBox.value;
-              this.ncEmailDetail = punsStatus;
-              if (typeof checked !== 'object') {
-                this.emailPrechecked = checked ? true : false;
-              }
-              break;
-            case 'PHONE':
-              this.hiddenPhone = hiddenBox.value;
-              this.ncTeleDetail = punsStatus;
-              if (typeof checked !== 'object') {
-                this.telephonePrechecked = checked ? true : false;
-              }
-              break;
-          }
-          const punsValue = key === 'PHONE' ? 'TELE' : key;
-          this._onChange(`NC_${punsValue}_DETAIL`, `${key}_${punsStatus}`);
-          return this.checkBoxTemplate(checkbox, checked, hiddenBox);
-        }) : '', prefix, prefix, this.postTextTemplate(), this.preventFormSubmission);
+        return this.renderCombinedEmailPhoneSection();
       }
     }, {
       kind: "field",