@foxy.io/elements 1.14.0-beta.7 → 1.14.0-beta.8

package/dist/elements/public/TemplateConfigForm/TemplateConfigForm.js

@@ -16,10 +16,64 @@ import { getDefaultJSON } from "./defaults.js";
 import { live } from 'lit-html/directives/live';
 const NS = 'template-config-form';
 const Base = ScopedElementsMixin(ResponsiveMixin(ConfigurableMixin(ThemeableMixin(TranslatableMixin(NucleonElement, NS)))));
+/**
+ * Form element for creating or editing template configs (`fx:template_config`).
+ *
+ * @slot cart-type:before
+ * @slot cart-type:after
+ *
+ * @slot foxycomplete:before
+ * @slot foxycomplete:after
+ *
+ * @slot locations:before
+ * @slot locations:after
+ *
+ * @slot hidden-fields:before
+ * @slot hidden-fields:after
+ *
+ * @slot cards:before
+ * @slot cards:after
+ *
+ * @slot checkout-type:before
+ * @slot checkout-type:after
+ *
+ * @slot consent:before
+ * @slot consent:after
+ *
+ * @slot fields:before
+ * @slot fields:after
+ *
+ * @slot google-analytics:before
+ * @slot google-analytics:after
+ *
+ * @slot segment-io:before
+ * @slot segment-io:after
+ *
+ * @slot troubleshooting:before
+ * @slot troubleshooting:after
+ *
+ * @slot custom-config:before
+ * @slot custom-config:after
+ *
+ * @slot header:before
+ * @slot header:after
+ *
+ * @slot custom-fields:before
+ * @slot custom-fields:after
+ *
+ * @slot footer:before
+ * @slot footer:after
+ *
+ * @element foxy-template-config-form
+ * @since 1.14.0
+ */
 export class TemplateConfigForm extends Base {
     constructor() {
         super(...arguments);
+        this.templates = {};
+        /** URI of the `fx:countries` hAPI resource. */
         this.countries = '';
+        /** URI of the `fx:regions` hAPI resource. */
         this.regions = '';
         this.__addHiddenFieldInputValue = '';
     }
@@ -95,17 +149,25 @@ export class TemplateConfigForm extends Base {
     __renderCartType(json) {
         const { lang, ns } = this;
         const items = ['default', 'fullpage', 'custom'];
+        const isDisabled = this.disabledSelector.matches('cart-type', true);
         return html `
       <div>
         ${this.renderTemplateOrSlot('cart-type:before')}
 
         <x-group frame>
-          <foxy-i18n slot="header" lang=${lang} key="cart_type" ns=${ns}></foxy-i18n>
+          <foxy-i18n
+            class=${isDisabled ? 'text-disabled' : ''}
+            slot="header"
+            lang=${lang}
+            key="cart_type"
+            ns=${ns}
+          >
+          </foxy-i18n>
 
           <x-choice
             .value=${json.cart_type}
             .items=${items}
-            ?disabled=${this.disabledSelector.matches('cart-type', true)}
+            ?disabled=${isDisabled}
             ?readonly=${this.readonlySelector.matches('cart-type', true)}
             @change=${(evt) => {
             this.edit({ json: JSON.stringify({ ...json, cart_type: evt.detail }) });
@@ -116,7 +178,7 @@ export class TemplateConfigForm extends Base {
                 <div slot="${item}-label" class="grid leading-s py-s">
                   <foxy-i18n lang=${lang} key="cart_type_${item}" ns=${ns}></foxy-i18n>
                   <foxy-i18n
-                    class="text-secondary text-xs"
+                    class="text-xs ${isDisabled ? 'text-disabled' : 'text-secondary'}"
                     lang=${lang}
                     key="cart_type_${item}_explainer"
                     ns=${ns}
@@ -155,8 +217,7 @@ export class TemplateConfigForm extends Base {
             this.edit({ json: JSON.stringify({ ...json, foxycomplete: newConfig }) });
         }}
       >
-        <foxy-i18n class="leading-s block" lang=${lang} key="show_country_flags" ns=${ns}>
-        </foxy-i18n>
+        <foxy-i18n lang=${lang} key="show_country_flags" ns=${ns}></foxy-i18n>
       </x-checkbox>
     `;
         return html `
@@ -164,7 +225,14 @@ export class TemplateConfigForm extends Base {
         ${this.renderTemplateOrSlot('foxycomplete:before')}
 
         <x-group frame>
-          <foxy-i18n slot="header" lang=${lang} key="foxycomplete" ns=${ns}></foxy-i18n>
+          <foxy-i18n
+            class=${isDisabled ? 'text-disabled' : ''}
+            slot="header"
+            lang=${lang}
+            key="foxycomplete"
+            ns=${ns}
+          >
+          </foxy-i18n>
 
           <x-choice
             .value=${value}
@@ -187,7 +255,7 @@ export class TemplateConfigForm extends Base {
                 <div slot="${item}-label" class="grid leading-s py-s">
                   <foxy-i18n lang=${lang} key="foxycomplete_${item}" ns=${ns}></foxy-i18n>
                   <foxy-i18n
-                    class="text-secondary text-xs"
+                    class="text-xs ${isDisabled ? 'text-disabled' : 'text-secondary'}"
                     lang=${lang}
                     key="foxycomplete_${item}_explainer"
                     ns=${ns}
@@ -253,6 +321,8 @@ export class TemplateConfigForm extends Base {
     __renderLocations(json) {
         const { lang, ns } = this;
         const config = json.location_filtering;
+        const isDisabled = this.disabledSelector.matches('locations', true);
+        const isReadonly = this.readonlySelector.matches('locations', true);
         const shippingChoice = config.shipping_filter_type === 'blacklist' ? 'block' : 'allow';
         const billingChoice = config.usage === 'both'
             ? 'copy'
@@ -285,16 +355,31 @@ export class TemplateConfigForm extends Base {
       ${this.renderTemplateOrSlot('locations:before')}
 
       <x-group frame>
-        <foxy-i18n slot="header" lang=${lang} key="location_plural" ns=${ns}></foxy-i18n>
+        <foxy-i18n
+          class=${isDisabled ? 'text-disabled' : ''}
+          slot="header"
+          lang=${lang}
+          key="location_plural"
+          ns=${ns}
+        >
+        </foxy-i18n>
 
         <div class="grid sm-grid-cols-2 bg-contrast-10" style="gap: 1px">
           <x-group class="bg-base pt-m">
-            <foxy-i18n class="text-tertiary" slot="header" lang=${lang} key="shipping" ns=${ns}>
+            <foxy-i18n
+              class=${isDisabled ? 'text-disabled' : 'text-tertiary'}
+              slot="header"
+              lang=${lang}
+              key="shipping"
+              ns=${ns}
+            >
             </foxy-i18n>
 
             <x-choice
               .items=${['allow', 'block']}
               .value=${shippingChoice}
+              ?disabled=${isDisabled}
+              ?readonly=${isReadonly}
               @change=${(evt) => {
             if (config.usage !== 'both')
                 config.usage = 'independent';
@@ -314,8 +399,8 @@ export class TemplateConfigForm extends Base {
                 slot=${shippingChoice}
                 lang=${lang}
                 ns=${ns}
-                ?disabled=${this.disabledSelector.matches('locations', true)}
-                ?readonly=${this.readonlySelector.matches('locations', true)}
+                ?disabled=${isDisabled}
+                ?readonly=${isReadonly}
                 @update:countries=${(evt) => {
             config.shipping_filter_values = evt.currentTarget.countries;
             normalize();
@@ -327,12 +412,20 @@ export class TemplateConfigForm extends Base {
           </x-group>
 
           <x-group class="bg-base pt-m">
-            <foxy-i18n class="text-tertiary" slot="header" lang=${lang} key="billing" ns=${ns}>
+            <foxy-i18n
+              class=${isDisabled ? 'text-disabled' : 'text-tertiary'}
+              slot="header"
+              lang=${lang}
+              key="billing"
+              ns=${ns}
+            >
             </foxy-i18n>
 
             <x-choice
               .items=${['allow', 'block', 'copy']}
               .value=${billingChoice}
+              ?disabled=${isDisabled}
+              ?readonly=${isReadonly}
               @change=${(evt) => {
             if (evt.detail === 'copy') {
                 config.usage = 'both';
@@ -357,8 +450,8 @@ export class TemplateConfigForm extends Base {
                 slot=${billingChoice}
                 lang=${lang}
                 ns=${ns}
-                ?disabled=${this.disabledSelector.matches('locations', true)}
-                ?readonly=${this.readonlySelector.matches('locations', true)}
+                ?disabled=${isDisabled}
+                ?readonly=${isReadonly}
                 ?hidden=${billingChoice === 'copy'}
                 @update:countries=${(evt) => {
             config.billing_filter_values = evt.currentTarget.countries;
@@ -380,6 +473,8 @@ export class TemplateConfigForm extends Base {
         const suggestions = [];
         const fields = [];
         const config = json.cart_display_config;
+        const isDisabled = this.disabledSelector.matches('hidden-fields', true);
+        const isReadonly = this.readonlySelector.matches('hidden-fields', true);
         for (const key in config) {
             if (!key.startsWith('show_'))
                 continue;
@@ -409,31 +504,54 @@ export class TemplateConfigForm extends Base {
         ${this.renderTemplateOrSlot('hidden-fields:before')}
 
         <x-group frame>
-          <foxy-i18n slot="header" lang=${lang} key="hidden_fields" ns=${ns}></foxy-i18n>
+          <foxy-i18n
+            class=${isDisabled ? 'text-disabled' : ''}
+            slot="header"
+            lang=${lang}
+            key="hidden_fields"
+            ns=${ns}
+          >
+          </foxy-i18n>
 
           <div class="divide-y divide-contrast-10">
-            ${fields.map(field => html `
-                <div class="h-m ml-m pr-xs flex items-center justify-between">
+            ${fields.map(field => {
+            return html `
+                <div
+                  class=${classMap({
+                'h-m ml-m pr-xs flex items-center justify-between': true,
+                'text-secondary': isReadonly,
+                'text-disabled': isDisabled,
+            })}
+                >
                   ${suggestions.includes(field)
-            ? html `<foxy-i18n lang=${lang} key=${field} ns=${ns}></foxy-i18n>`
-            : html `<span>${field}</span>`}
+                ? html `<foxy-i18n lang=${lang} key=${field} ns=${ns}></foxy-i18n>`
+                : html `<span>${field}</span>`}
 
                   <button
-                    class="flex w-xs h-xs items-center justify-center rounded-full transition-colors hover-bg-error-10 hover-text-error focus-outline-none focus-ring-2 focus-ring-inset focus-ring-error-50"
+                    class=${classMap({
+                'w-xs h-xs rounded-full transition-colors': true,
+                'hover-bg-error-10 hover-text-error': !isDisabled,
+                'focus-outline-none focus-ring-2 ring-inset ring-error-50': !isDisabled,
+                'cursor-default': isDisabled,
+                'flex': !isReadonly,
+                'hidden': isReadonly,
+            })}
+                    ?disabled=${isDisabled}
                     @click=${() => {
-            if (typeof config[`show_${field}`] === 'boolean') {
-                config[`show_${field}`] = true;
-            }
-            else {
-                config.hidden_product_options = config.hidden_product_options.filter(option => option !== field);
-            }
-            this.edit({ json: JSON.stringify(json) });
-        }}
+                if (typeof config[`show_${field}`] === 'boolean') {
+                    config[`show_${field}`] = true;
+                }
+                else {
+                    config.hidden_product_options = config.hidden_product_options.filter(option => option !== field);
+                }
+                this.edit({ json: JSON.stringify(json) });
+            }}
                   >
-                    <iron-icon icon="icons:close" class="icon-inline text-m"></iron-icon>
+                    <iron-icon icon="icons:close" class="icon-inline text-m m-auto"></iron-icon>
                   </button>
                 </div>
-              `)}
+              `;
+        })}
           </div>
 
           <div
@@ -441,6 +559,8 @@ export class TemplateConfigForm extends Base {
             class=${classMap({
             'h-m flex items-center ring-inset ring-primary-50 focus-within-ring-2': true,
             'border-t border-contrast-10': fields.length > 0,
+            'flex': !isReadonly,
+            'hidden': isReadonly,
         })}
           >
             <input
@@ -448,6 +568,7 @@ export class TemplateConfigForm extends Base {
               class="w-full bg-transparent appearance-none h-m px-m focus-outline-none"
               list="hidden-fields-list"
               .value=${live(this.__addHiddenFieldInputValue)}
+              ?disabled=${isDisabled}
               @keydown=${(evt) => evt.key === 'Enter' && addField()}
               @input=${(evt) => {
             this.__addHiddenFieldInputValue = evt.currentTarget.value;
@@ -485,6 +606,7 @@ export class TemplateConfigForm extends Base {
     __renderCards(json) {
         const { lang, ns } = this;
         const isDisabled = this.disabledSelector.matches('cards', true);
+        const isReadonly = this.readonlySelector.matches('cards', true);
         const config = json.supported_payment_cards;
         let skipForSaved;
         let skipForSSO;
@@ -516,7 +638,14 @@ export class TemplateConfigForm extends Base {
 
         <div class="space-y-xs">
           <x-group frame>
-            <foxy-i18n slot="header" lang=${lang} key="supported_cards" ns=${ns}></foxy-i18n>
+            <foxy-i18n
+              class=${isDisabled ? 'text-disabled' : ''}
+              slot="header"
+              lang=${lang}
+              key="supported_cards"
+              ns=${ns}
+            >
+            </foxy-i18n>
 
             <div class="flex flex-wrap m-xs p-s">
               ${Object.entries(logos).map(([type, logo]) => {
@@ -534,10 +663,12 @@ export class TemplateConfigForm extends Base {
                     <label
                       class=${classMap({
                 'overflow-hidden transition-colors flex rounded border': true,
-                'border-primary bg-primary-10 text-primary': isChecked,
-                'hover-text-body': isChecked && !isDisabled,
+                'border-primary bg-primary-10 text-primary': isChecked && !isReadonly,
+                'border-contrast bg-contrast-5 text-secondary': isChecked && isReadonly,
+                'hover-text-body': isChecked && !isDisabled && !isReadonly,
                 'border-contrast-10': !isChecked,
-                'hover-border-primary hover-text-primary': !isChecked && !isDisabled,
+                'hover-border-primary': !isChecked && !isDisabled && !isReadonly,
+                'hover-text-primary': !isChecked && !isDisabled && !isReadonly,
             })}
                     >
                       <div class="h-s">${logo}</div>
@@ -552,6 +683,8 @@ export class TemplateConfigForm extends Base {
                         ?disabled=${isDisabled}
                         ?checked=${isChecked}
                         @change=${(evt) => {
+                if (isReadonly)
+                    return evt.preventDefault();
                 evt.stopPropagation();
                 if (isChecked) {
                     config.splice(config.indexOf(type), 1);
@@ -572,6 +705,7 @@ export class TemplateConfigForm extends Base {
               <x-checkbox
                 class="m-s"
                 ?disabled=${isDisabled || json.csc_requirements === 'new_cards_only'}
+                ?readonly=${isReadonly}
                 ?checked=${skipForSaved}
                 @change=${(evt) => {
             json.csc_requirements = evt.detail ? 'sso_only' : 'all_cards';
@@ -585,6 +719,7 @@ export class TemplateConfigForm extends Base {
               <x-checkbox
                 class="m-s"
                 ?disabled=${isDisabled}
+                ?readonly=${isReadonly}
                 ?checked=${skipForSSO}
                 @change=${(evt) => {
             json.csc_requirements = evt.detail
@@ -602,7 +737,7 @@ export class TemplateConfigForm extends Base {
           </x-group>
 
           <foxy-i18n
-            class="text-xs text-secondary leading-s block"
+            class="text-xs leading-s block ${isDisabled ? 'text-disabled' : 'text-secondary'}"
             lang=${lang}
             key="supported_cards_disclaimer"
             ns=${ns}
@@ -616,17 +751,26 @@ export class TemplateConfigForm extends Base {
     }
     __renderCheckoutType(json) {
         const { lang, ns } = this;
+        const isDisabled = this.disabledSelector.matches('checkout-type', true);
+        const isReadonly = this.readonlySelector.matches('checkout-type', true);
         return html `
       <div>
         ${this.renderTemplateOrSlot('checkout-type:before')}
 
         <div class="space-y-xs">
           <x-group frame>
-            <foxy-i18n slot="header" lang=${lang} key="checkout_type" ns=${ns}></foxy-i18n>
+            <foxy-i18n
+              class=${isDisabled ? 'text-disabled' : ''}
+              slot="header"
+              lang=${lang}
+              key="checkout_type"
+              ns=${ns}
+            >
+            </foxy-i18n>
 
             <x-choice
-              ?disabled=${this.disabledSelector.matches('checkout-type', true)}
-              ?readonly=${this.readonlySelector.matches('checkout-type', true)}
+              ?disabled=${isDisabled}
+              ?readonly=${isReadonly}
               .items=${['default_account', 'default_guest', 'guest_only', 'account_only']}
               .value=${json.checkout_type}
               .getText=${(item) => this.t(`checkout_type_${item}`)}
@@ -639,7 +783,7 @@ export class TemplateConfigForm extends Base {
           </x-group>
 
           <foxy-i18n
-            class="text-secondary text-xs leading-s block"
+            class="text-xs leading-s block ${isDisabled ? 'text-disabled' : 'text-secondary'}"
             lang=${lang}
             key="checkout_type_helper_text"
             ns=${ns}
@@ -664,7 +808,14 @@ export class TemplateConfigForm extends Base {
         ${this.renderTemplateOrSlot('consent:before')}
 
         <x-group frame>
-          <foxy-i18n slot="header" lang=${lang} key="consent" ns=${ns}></foxy-i18n>
+          <foxy-i18n
+            class=${isDisabled ? 'text-disabled' : ''}
+            slot="header"
+            lang=${lang}
+            key="consent"
+            ns=${ns}
+          >
+          </foxy-i18n>
 
           <x-checkbox
             ?disabled=${isDisabled}
@@ -682,7 +833,7 @@ export class TemplateConfigForm extends Base {
             <div class="flex flex-col">
               <foxy-i18n lang=${lang} key="display_tos_link" ns=${ns}></foxy-i18n>
               <foxy-i18n
-                class="text-xs leading-s text-secondary"
+                class="text-xs leading-s ${isDisabled ? 'text-disabled' : 'text-secondary'}"
                 lang=${lang}
                 key="display_tos_link_explainer"
                 ns=${ns}
@@ -751,7 +902,7 @@ export class TemplateConfigForm extends Base {
             <div class="flex flex-col">
               <foxy-i18n lang=${lang} key="newsletter_subscribe" ns=${ns}></foxy-i18n>
               <foxy-i18n
-                class="text-xs leading-s text-secondary"
+                class="text-xs leading-s ${isDisabled ? 'text-disabled' : 'text-secondary'}"
                 lang=${lang}
                 key="newsletter_subscribe_explainer"
                 ns=${ns}
@@ -775,7 +926,7 @@ export class TemplateConfigForm extends Base {
             <div class="flex flex-col">
               <foxy-i18n lang=${lang} key="display_sdta" ns=${ns}></foxy-i18n>
               <foxy-i18n
-                class="text-xs leading-s text-secondary"
+                class="text-xs leading-s ${isDisabled ? 'text-disabled' : 'text-secondary'}"
                 lang=${lang}
                 key="display_sdta_explainer"
                 ns=${ns}
@@ -792,6 +943,7 @@ export class TemplateConfigForm extends Base {
     __renderFields(json) {
         const { lang, ns } = this;
         const isDisabled = this.disabledSelector.matches('fields', true);
+        const isReadonly = this.readonlySelector.matches('fields', true);
         const config = json.custom_checkout_field_requirements;
         const options = {
             cart_controls: ['enabled', 'disabled'],
@@ -813,12 +965,25 @@ export class TemplateConfigForm extends Base {
         ${this.renderTemplateOrSlot('fields:before')}
 
         <x-group frame>
-          <foxy-i18n slot="header" lang=${lang} key="field_plural" ns=${ns}></foxy-i18n>
+          <foxy-i18n
+            class=${isDisabled ? 'text-disabled' : ''}
+            slot="header"
+            lang=${lang}
+            key="field_plural"
+            ns=${ns}
+          >
+          </foxy-i18n>
 
           <div class="bg-contrast-10 grid grid-cols-1 md-grid-cols-2" style="gap: 1px">
             ${Object.entries(options).map(([property, values]) => {
             return html `
-                <label class="flex items-center pl-m bg-base">
+                <label
+                  class=${classMap({
+                'flex items-center pl-m bg-base': true,
+                'text-secondary': isReadonly,
+                'text-disabled': isDisabled,
+            })}
+                >
                   <foxy-i18n
                     class="flex-1"
                     lang=${lang}
@@ -829,14 +994,32 @@ export class TemplateConfigForm extends Base {
 
                   <div
                     class=${classMap({
-                'px-s m-xs flex items-center cursor-pointer rounded leading-none': true,
+                'flex items-center text-right font-medium h-s px-s m-xs': isReadonly,
+                'hidden': !isReadonly,
+            })}
+                  >
+                    ${this.t(values.find(value => config[property] === value))}
+                  </div>
+
+                  <div
+                    class=${classMap({
+                'px-s m-xs flex items-center rounded leading-none': true,
                 'ring-primary-50 ring-inset focus-within-ring-2': !isDisabled,
                 'hover-text-primary': !isDisabled,
-                'opacity-50': isDisabled,
+                'cursor-pointer': !isDisabled,
+                'cursor-default': isDisabled,
+                'flex': !isReadonly,
+                'hidden': isReadonly,
             })}
                   >
                     <select
-                      class="h-s mr-xs text-right appearance-none bg-transparent cursor-pointer focus-outline-none font-medium"
+                      class=${classMap({
+                'h-s mr-xs text-right appearance-none bg-transparent font-medium': true,
+                'focus-outline-none cursor-pointer': !isDisabled,
+                'cursor-default': isDisabled,
+            })}
+                      ?disabled=${isDisabled}
+                      ?readonly=${isReadonly}
                       @change=${(evt) => {
                 const select = evt.currentTarget;
                 const value = select.options[select.options.selectedIndex].value;
@@ -886,7 +1069,7 @@ export class TemplateConfigForm extends Base {
         ${this.renderTemplateOrSlot('google-analytics:before')}
 
         <x-group frame>
-          <span slot="header">Google Analytics</span>
+          <span class=${isDisabled ? 'text-disabled' : ''} slot="header">Google Analytics</span>
 
           <div class="p-m space-y-m">
             <vaadin-text-field
@@ -919,7 +1102,7 @@ export class TemplateConfigForm extends Base {
               <div class="flex flex-col">
                 <foxy-i18n lang=${lang} key="ga_include_on_site" ns=${ns}></foxy-i18n>
                 <foxy-i18n
-                  class="text-xs leading-s text-secondary"
+                  class="text-xs leading-s ${isDisabled ? 'text-disabled' : 'text-secondary'}"
                   lang=${lang}
                   key="ga_include_on_site_explainer"
                   ns=${ns}
@@ -945,7 +1128,7 @@ export class TemplateConfigForm extends Base {
         ${this.renderTemplateOrSlot('segment-io:before')}
 
         <x-group frame>
-          <span slot="header">Segment.io</span>
+          <span class=${isDisabled ? 'text-disabled' : ''} slot="header">Segment.io</span>
 
           <div class="p-m">
             <vaadin-text-field
@@ -975,17 +1158,26 @@ export class TemplateConfigForm extends Base {
     __renderTroubleshooting(json) {
         const { lang, ns } = this;
         const config = json.debug;
+        const isDisabled = this.disabledSelector.matches('troubleshooting', true);
+        const isReadonly = this.readonlySelector.matches('troubleshooting', true);
         return html `
       <div>
         ${this.renderTemplateOrSlot('troubleshooting:before')}
 
         <x-group frame>
-          <foxy-i18n slot="header" lang=${lang} key="troubleshooting" ns=${ns}></foxy-i18n>
+          <foxy-i18n
+            class=${isDisabled ? 'text-disabled' : ''}
+            slot="header"
+            lang=${lang}
+            key="troubleshooting"
+            ns=${ns}
+          >
+          </foxy-i18n>
 
           <div class="p-m space-y-m">
             <x-checkbox
-              ?disabled=${this.disabledSelector.matches('troubleshooting', true)}
-              ?readonly=${this.readonlySelector.matches('troubleshooting', true)}
+              ?disabled=${isDisabled}
+              ?readonly=${isReadonly}
               ?checked=${config.usage === 'required'}
               @change=${(evt) => {
             config.usage = evt.detail ? 'required' : 'none';
@@ -995,7 +1187,7 @@ export class TemplateConfigForm extends Base {
               <div class="flex flex-col">
                 <foxy-i18n lang=${lang} key="troubleshooting_debug" ns=${ns}></foxy-i18n>
                 <foxy-i18n
-                  class="text-xs leading-s text-secondary"
+                  class="text-xs leading-s ${isDisabled ? 'text-disabled' : 'text-secondary'}"
                   lang=${lang}
                   key="troubleshooting_debug_explainer"
                   ns=${ns}