Simple Demo: <af-calculator-open-component>

Using <af-calculator-open-component> on Other Platforms

WordPress (Example: Kitchen Cabinet Financing Page)

Reserved Height / CLS Setup (WordPress)

Add the following CSS (theme stylesheet or a Customizer Additional CSS block) to reserve the correct height up front and prevent layout shift. These custom properties map layout + viewport combinations to fixed pixel heights.

:root {
  --calc-standard-desktop:306px;
  --calc-standard-mobile:398px;
  --calc-additional-desktop:319px;
  --calc-additional-mobile:414px;
  --calc-fallback:398px; /* majority: mobile standard */
}
af-calculator-open-component,
af-calculator-open-component[loading] { display:block; min-height:var(--calc-fallback); }
af-calculator-open-component[layout="standard"],
af-calculator-open-component[layout="standard"][loading] { min-height:var(--calc-standard-desktop); }
af-calculator-open-component[layout="additional"],
af-calculator-open-component[layout="additional"][loading] { min-height:var(--calc-additional-desktop); }
@media (max-width:640px) {
  af-calculator-open-component[layout="standard"],
  af-calculator-open-component[layout="standard"][loading] { min-height:var(--calc-standard-mobile); }
  af-calculator-open-component[layout="additional"],
  af-calculator-open-component[layout="additional"][loading] { min-height:var(--calc-additional-mobile); }
}

Early Layout Attribute (Optional but Recommended): Insert this small inline script before the component tag (or in the header) to set layout early based on URL params so the correct height is chosen before the component upgrades:

<script>(function(){
  const hasLoanAmount = new URLSearchParams(location.search).has('loanAmount');
  function setLayout(){
    const el = document.querySelector('af-calculator-open-component');
    if(!el){ requestAnimationFrame(setLayout); return; }
    if(!el.hasAttribute('layout')){
      el.setAttribute('layout', hasLoanAmount ? 'additional' : 'standard');
    }
  }
  setLayout();
})();</script>

• Fallback height covers the most common mobile case to minimize unexpected growth.
• Desktop vs Mobile handled via a single media query breakpoint (640px) matching internal design.
• Loading state shares the same reserved heights ([loading] selector) so spinner/content swap does not shift layout.
• Adjusting values? Increase only if new UI elements add vertical space; reducing below actual content height will reintroduce CLS.
• Multiple instances? Same CSS works globally; each instance reads its own layout attribute.

1. Host the component file (keep path or place in your theme: /wp-content/themes/<theme>/assets/af-calculator-open-component.js) or use the existing QA URL.
2. Edit the WordPress page and add a Custom HTML block where you want the calculator.
3. Paste:

   <script type="module" src="https://qa.your.acornfinance.com/widgets/calculator-open/src/af-calculator-open-component.js"></script>
   <af-calculator-open-component
     loanAmount="15000"
     d="WP-KITCHEN"
     subPurpose="Kitchen Cabinets"
     cname="Your Contractor Name"
     pcid="1234"
     processEnv="PROD">
   </af-calculator-open-component>

4. Optional: Pass URL parameters (e.g. append ?loanAmount=22000&d=WP-KITCHEN) – the component will auto‑parse them overriding attributes.
5. If a security plugin strips the script, allowlist module scripts or enqueue via theme:

   // functions.php
   function af_calc_enqueue() {
     wp_enqueue_script(
       'af-open-calculator',
       'https://qa.your.acornfinance.com/widgets/calculator-open/src/af-calculator-open-component.js',
       [],
       null,
       true
     );
   }
   add_action('wp_enqueue_scripts','af_calc_enqueue');

   Then only place the HTML tag in the editor.

Styling Notes (WordPress)

• Component uses Shadow DOM; global CSS will not override internals except via CSS vars (e.g. --font-open-sans, --font-bitter).
• Ensure no caching plugin serves the module as inline ES5 (must remain ES module).

Quasar (Vue 3) Integration (Example QA Calculator Page)

1. Ensure the module loads once. In public/index.html (Quasar CLI) or src/index.template.html (Vite):

   <script type="module" src="https://qa.your.acornfinance.com/widgets/calculator-open/src/af-calculator-open-component.js"></script>

2. Add the custom element to a page component template:

   <template>
     <q-page padding>
       <h2>Financing Calculator</h2>
       <af-calculator-open-component
         loanAmount="18000"
         d="QSR-001"
         subPurpose="Roofing"
         cname="Quasar Demo Contractor"
         pcid="5555"
         processEnv="QA">
       </af-calculator-open-component>
     </q-page>
   </template>

3. Tell Vue to ignore (if using template compiler warnings). In Vite / Quasar config:

   // quasar.config.js (Vite)
   build: {
     vueOptions: {
       compilerOptions: {
         isCustomElement: tag => tag === 'af-calculator-open-component'
       }
     }
   }

   (Or register a set if adding more web components.)
4. Listen for events inside the Vue component:

   onMounted(() => {
     const el = document.querySelector('af-calculator-open-component');
     el.addEventListener('validity-change', e => {
       console.log('Valid?', e.detail.isValid);
     });
   });

5. To drive props dynamically, just set attributes or assign properties:

   el.requiredAmount = '25,000'; el.requestUpdate();

Routing Considerations (Quasar)

• URL query updates (e.g. changing ?loanAmount=) will not auto‑reinitialize unless the page reloads; call a re-parse method if you add one later or reload intentionally.
• For SSR mode, ensure component only rendered client-side (wrap in <client-only> or check process.env.CLIENT).

Parameter Strategy

Prefer explicit attributes for stable embeds; use URL params when generating marketing campaign links so tracking values flow automatically.

Minimal Embed (Any Platform)

<script type="module" src="https://qa.your.acornfinance.com/widgets/calculator-open/src/af-calculator-open-component.js"></script>
<af-calculator-open-component loanAmount="10000"></af-calculator-open-component>