@commute/bloom - npm Package Compare versions

Comparing version 0.0.1 to 1.0.0

dist/index.js.map

+{
+  "version": 3,
+  "sources": ["../bin/live-reload.js", "../src/utils/index.ts", "../src/components/calculator.ts", "../src/components/custom-range.ts", "../src/components/price-input.ts", "../src/index.ts"],
+  "sourcesContent": ["new EventSource(`${SERVE_ORIGIN}/esbuild`).addEventListener('change', () => location.reload());\n", "type PriceFormatter = (price: number, currency?: string, locale?: string) => string;\n\nexport const priceFormatter: PriceFormatter = (price, currency = 'USD', locale = 'es-AR') => {\n  return new Intl.NumberFormat(locale, {\n    style: 'currency',\n    currencyDisplay: 'narrowSymbol',\n    currency,\n    minimumFractionDigits: 0,\n    maximumFractionDigits: 0,\n  }).format(price);\n};\n", "import { priceFormatter } from '$utils/index';\n\nimport type { CustomRangeProps } from './custom-range';\nimport type { PriceInputProps } from './price-input';\n\n// Extend the global Window interface to include custom properties for price input and range\ndeclare global {\n  interface Window {\n    customRange: CustomRangeProps; // Custom range component\n    priceInput: PriceInputProps; // Price input component\n  }\n}\n\n// Initialize the calculator functionality\nconst initCalculator = (selector: string) => {\n  const targetEl = document.querySelector(selector); // Select the target element\n  if (!targetEl) return; // Exit if the target element is not found\n\n  // Cache references to DOM elements for performance\n  const element = {\n    minProjected: targetEl.querySelector('[data-element=\"min-projected\"]') as HTMLDivElement,\n    maxProjected: targetEl.querySelector('[data-element=\"max-projected\"]') as HTMLDivElement,\n    anualProjected: targetEl.querySelector('[data-element=\"anual-projected\"]') as HTMLDivElement,\n    rangeEl: window.customRange, // Reference to the custom range component\n    priceInput: window.priceInput, // Reference to the price input component\n  };\n\n  // Configuration object to hold rate and projected return values\n  const config = {\n    rate: {\n      min: targetEl.querySelector('[data-element=\"min-rate\"]')?.textContent as string,\n      max: targetEl.querySelector('[data-element=\"max-rate\"]')?.textContent as string,\n      anual: targetEl.querySelector('[data-element=\"anual-rate\"]')?.textContent as string,\n    },\n    projectedReturn: {\n      min: 0,\n      max: 0,\n      anual: 0,\n    },\n    lastAmount: 0, // Store the last input amount\n  };\n\n  // Function to calculate future rent based on amount, rate, and duration in months\n  const calculateRentInMonths = (amount: number, rate: number, months = 12) => {\n    if (!amount || !rate || !months) return; // Exit if any parameter is invalid\n    const rent = rate / 100; // Convert percentage to decimal\n    const futureValue = amount * Math.pow(1 + rent, months / 12); // Calculate future value\n    return futureValue.toFixed(2); // Return formatted future value\n  };\n\n  // Handle price input changes\n  const handlePriceInput = (event: Event) => {\n    const { value } = event.target as HTMLInputElement; // Get the input value\n\n    config.lastAmount = Number(value); // Update lastAmount with the current slider value\n\n    // Validate input value\n    if (value === '') return; // Exit if input is empty\n    if (Number(value) < Number(element.priceInput.minValue)) return; // Check minimum value\n    if (Number(value) > Number(element.priceInput.maxValue)) return; // Check maximum value\n\n    setProjectedRent(Number(value)); // Update projected rent based on input\n    element.priceInput?.setValue?.(Number(value)); // Update price input component\n    element.rangeEl?.setValue?.(Number(value)); // Update range component\n  };\n\n  // Handle range slider changes\n  const handleRangeSlider = (event: Event) => {\n    const { value } = event.target as HTMLInputElement; // Get the slider value\n    config.lastAmount = Number(value); // Update lastAmount with the current slider value\n    setProjectedRent(Number(value)); // Update projected rent based on slider value\n    element.priceInput?.setValue?.(Number(value)); // Update price input component\n  };\n\n  // Set projected rent values based on the current amount\n  const setProjectedRent = (amount: number) => {\n    const maxRent = calculateRentInMonths(amount, Number(config.rate.max), 12); // Calculate max rent\n    const minRent = calculateRentInMonths(amount, Number(config.rate.min), 12); // Calculate min rent\n\n    // Update the projected rent display elements\n    if (element.minProjected && element.maxProjected) {\n      element.minProjected.innerText = priceFormatter(Number(minRent)); // Format and set min rent\n      element.maxProjected.innerText = priceFormatter(Number(maxRent)); // Format and set max rent\n    }\n\n    // Update projected return values\n    config.projectedReturn = {\n      max: Number(maxRent),\n      min: Number(minRent),\n      anual: 0,\n    };\n\n    // Calculate and display annual rent if applicable\n    if (element.anualProjected) {\n      const anualRent = calculateRentInMonths(amount, Number(config.rate.anual), 12); // Calculate annual rent\n      element.anualProjected.innerText = priceFormatter(Number(anualRent)); // Format and set annual rent\n\n      config.projectedReturn.anual = Number(anualRent); // Update annual return in config\n    }\n  };\n\n  // Initialize event listeners and set initial values\n  const init = () => {\n    element.rangeEl?.on?.('input', handleRangeSlider); // Attach input event to range slider\n    element.priceInput?.on?.('input', handlePriceInput); // Attach input event to price input\n    setProjectedRent(element.rangeEl?.getValue?.() ?? 0); // Set initial projected rent\n    config.lastAmount = element.rangeEl?.getValue?.() ?? 0; // Store initial last amount\n  };\n\n  init(); // Call the initialization function\n};\n\nexport { initCalculator }; // Export the initCalculator function for use in other modules\n", "import { priceFormatter } from '$utils/index';\n\n// Extend the global Window interface to include priceInput\ndeclare global {\n  interface Window {\n    customRange: CustomRangeProps;\n  }\n}\n\n// Define properties for the price input component\nexport type CustomRangeProps = {\n  targetEl?: HTMLInputElement; // The input element\n  element?: {\n    rangeInput: HTMLInputElement;\n    progressBar: HTMLDivElement;\n    progressValue: HTMLDivElement;\n    rangeThumb: HTMLDivElement;\n  };\n  minValue?: string; // Minimum price value\n  maxValue?: string; // Maximum price value\n  error?: boolean; // Error state\n  errorMessage?: string | null; // Error message\n  locale?: string; // Locale for formatting\n  currency?: string; // Currency type\n  getValue?: () => number; // Method to get the current value\n  setValue?: (value: number) => void; // Method to set a new value\n  on?: (eventType: EventType, callback: (event: Event) => void) => void; // Event listener method\n};\n\n// Define event types for the input\ntype EventType = 'input' | 'change' | 'blur';\n\n// Function to create a price slider component\nfunction createCustomRange(rangeElement: string) {\n  const targetEl = document.querySelector(rangeElement) as HTMLInputElement;\n\n  if (!targetEl) {\n    throw new Error('Custom range element not found');\n  }\n\n  const element: CustomRangeProps['element'] = {\n    rangeInput: targetEl?.querySelector('[data-element=\"range-input\"]') as HTMLInputElement,\n    progressBar: targetEl?.querySelector('[data-element=\"range-progress-bar\"]') as HTMLDivElement,\n    progressValue: targetEl?.querySelector(\n      '[data-element=\"range-progress-value\"]'\n    ) as HTMLDivElement,\n    rangeThumb: targetEl?.querySelector('[data-element=\"range-thumb\"]') as HTMLDivElement,\n  };\n\n  const config = {\n    minValue: element.rangeInput.min,\n    maxValue: element.rangeInput.max,\n    step: element.rangeInput.step,\n  };\n\n  // Initialize the custom range\n  const init = () => {\n    // Update progress value\n    updateProgressValue(Number(config.minValue));\n    // Set the value of the input\n    element.rangeInput.value = config.minValue;\n    // Add event listener to the input\n    element.rangeInput.addEventListener('input', handleInput);\n\n    // Set the customRange object on the window\n    window.customRange = {\n      element,\n      getValue,\n      setValue,\n      on,\n    };\n  };\n\n  // Handle input event\n  const handleInput = (event: Event) => {\n    const { value } = event.target as HTMLInputElement;\n    updateProgressValue(Number(value));\n  };\n\n  // Calculate progress percentage\n  const calculateProgress = (value: number) => {\n    const inputs = {\n      value: Number(value) === Number(config.minValue) ? 0 : Number(value),\n      minValue: Number(config.minValue),\n      maxValue: Number(config.maxValue),\n    };\n    const calculatedProgress =\n      ((inputs.value - inputs.minValue) / (inputs.maxValue - inputs.minValue)) * 100;\n\n    return calculatedProgress;\n  };\n\n  // Update progress value display\n  const updateProgressValue = (value: number) => {\n    const progressVal = calculateProgress(value);\n    const progressValueWidth = element.progressValue.clientWidth;\n\n    element.progressValue.innerText = priceFormatter(value, 'USD');\n    element.progressValue.style.setProperty('--progress-value-size', `${progressValueWidth}px`);\n    element.progressValue.style.setProperty('--range-val', `${progressVal}%`);\n    element.rangeThumb.style.setProperty('--range-val', `${progressVal}%`);\n    element.progressBar.style.setProperty('--range-val', `${progressVal}%`);\n  };\n\n  // Setter for input value\n  const setValue = (value: number) => {\n    element.rangeInput.value = value.toString();\n    updateProgressValue(value);\n  };\n\n  // Getter for input value\n  const getValue = () => {\n    return Number(element.rangeInput.value);\n  };\n\n  // Event listener for custom events\n  const on = (eventType: EventType, callback: (event: Event) => void) => {\n    element.rangeInput.addEventListener(eventType, callback);\n  };\n\n  init();\n\n  return {\n    element,\n    getValue,\n    setValue,\n    on,\n  };\n}\n\nexport { createCustomRange };\n", "import { priceFormatter } from '$utils/index';\n\n// Extend the global Window interface to include priceInput\ndeclare global {\n  interface Window {\n    priceInput: PriceInputProps;\n  }\n}\n\n// Define properties for the price input component\nexport type PriceInputProps = {\n  targetEl?: HTMLInputElement; // The input element\n  minValue?: string; // Minimum price value\n  maxValue?: string; // Maximum price value\n  error?: boolean; // Error state\n  errorMessage?: string | null; // Error message\n  locale?: string; // Locale for formatting\n  currency?: string; // Currency type\n  getValue?: () => number; // Method to get the current value\n  setValue?: (value: number) => void; // Method to set a new value\n  on?: (eventType: EventType, callback: (event: Event) => void) => void; // Event listener method\n};\n\n// Define event types for the input\ntype EventType = 'input' | 'change' | 'blur';\n\n// Function to create a price input component\nfunction createPriceInput(element: string) {\n  const targetEl = document.querySelector(element) as HTMLInputElement;\n\n  if (!targetEl) {\n    throw new Error('Price input element not found');\n  }\n\n  // Configuration for the price input\n  const config: PriceInputProps = {\n    minValue: targetEl.min || '0',\n    maxValue: targetEl.max || '100',\n    error: false,\n    errorMessage: null,\n    locale: 'es-AR',\n    currency: 'USD',\n  };\n\n  // Initialize the price input\n  const init = () => {\n    targetEl.value = config.minValue || '0'; // Set initial value\n    targetEl.placeholder = priceFormatter(Number(config.minValue)); // Set formatted placeholder\n    // Set the priceInput object on the window\n    window.priceInput = {\n      targetEl,\n      ...config,\n      getValue,\n      setValue,\n      on,\n    };\n  };\n\n  // Get the current value of the input\n  const getValue = () => {\n    return Number(targetEl.value);\n  };\n\n  // Set a new value for the input\n  const setValue = (value: number) => {\n    targetEl.value = value.toString();\n    targetEl.placeholder = priceFormatter(value); // Update placeholder with formatted value\n  };\n\n  // Add event listeners to the input\n  const on = (eventType: EventType, callback: (event: Event) => void) => {\n    targetEl.addEventListener(eventType, callback);\n  };\n\n  init(); // Initialize the component\n\n  // Return the public API of the price input\n  return {\n    targetEl,\n    ...config,\n    getValue,\n    setValue,\n    on,\n  };\n}\n\nexport { createPriceInput };\n", "import { initCalculator } from '$components/calculator';\nimport { createCustomRange } from '$components/custom-range';\nimport { createPriceInput } from '$components/price-input';\n\n/**\n * Function to get cards from grid\n */\nfunction getCards() {\n  const list = document.querySelector('[cmt-card-element=\"list\"]');\n  if (!list) {\n    return;\n  }\n  const cards = list.childNodes;\n  return cards;\n}\n\nfunction calcularPorcentajeAvance(startDate: string, durationMonths: number) {\n  const [startMonth, startYear] = startDate.split('/').map(Number);\n\n  // Crear una fecha para el inicio del proyecto\n  const startDateProject = new Date(startYear, startMonth - 1);\n\n  // Crear una fecha para la fecha actual\n  const currentDate = new Date();\n\n  // Calcular la diferencia en meses desde el inicio hasta hoy\n  const monthsDifference =\n    (currentDate.getFullYear() - startDateProject.getFullYear()) * 12 +\n    (currentDate.getMonth() - startDateProject.getMonth());\n\n  // Calcular el porcentaje de avance\n  let progress = (monthsDifference / durationMonths) * 100;\n\n  // Limitar el porcentaje entre 0% y 100%\n  progress = Math.min(100, Math.max(0, progress));\n\n  return progress.toFixed(0); // Formato con 2 decimales\n}\n\ninterface CardElement extends HTMLElement {\n  querySelector(selectors: '[cmt-card-element=\"start-date\"]'): HTMLElement;\n  querySelector(selectors: '[cmt-card-element=\"months\"]'): HTMLElement;\n  querySelector(selectors: '[cmt-card-element=\"progress\"]'): HTMLElement;\n}\n\nfunction showProgress(cards: NodeListOf<ChildNode>) {\n  cards.forEach((card) => {\n    const cardElement = card as CardElement;\n    const startDate = cardElement.querySelector('[cmt-card-element=\"start-date\"]').innerText;\n    const months = cardElement.querySelector('[cmt-card-element=\"months\"]').innerText;\n    const progress = cardElement.querySelector('[cmt-card-element=\"progress\"]');\n    if (!progress || !startDate || !months) {\n      return;\n    }\n    progress.innerText = calcularPorcentajeAvance(startDate, parseInt(months, 10));\n  });\n}\n\nfunction init() {\n  createPriceInput('[data-element=\"price-input\"]');\n  createCustomRange('[data-element=\"custom-range\"]');\n  initCalculator('[data-element=\"product-calculator\"]');\n\n  const cards = getCards();\n  if (cards) {\n    showProgress(cards);\n  } else {\n    // eslint-disable-next-line no-console\n    console.log('No cards found in the grid');\n  }\n}\n\n// Run the check for Chart.js after DOM is loaded\ndocument.addEventListener('DOMContentLoaded', () => init());\n"],
+  "mappings": "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",
+  "names": ["init", "init", "init"]
+}

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";(()=>{function a(){let e=document.querySelector('[cmt-card-element="list"]');return e?e.childNodes:void 0}function l(e,c){let[t,s]=e.split("/").map(Number),r=new Date(s,t-1),n=new Date,o=((n.getFullYear()-r.getFullYear())*12+(n.getMonth()-r.getMonth()))/c*100;return o=Math.min(100,Math.max(0,o)),o.toFixed(0)}function m(e){e.forEach(c=>{let t=c,s=t.querySelector('[cmt-card-element="start-date"]').innerText,r=t.querySelector('[cmt-card-element="months"]').innerText,n=t.querySelector('[cmt-card-element="progress"]');!n||!s||!r||(n.innerText=l(s,parseInt(r,10)))})}function d(){let e=a();e&&m(e)}document.addEventListener("DOMContentLoaded",()=>d());})();
+"use strict";(()=>{var i=(o,t="USD",e="es-AR")=>new Intl.NumberFormat(e,{style:"currency",currencyDisplay:"narrowSymbol",currency:t,minimumFractionDigits:0,maximumFractionDigits:0}).format(o);var b=o=>{let t=document.querySelector(o);if(!t)return;let e={minProjected:t.querySelector('[data-element="min-projected"]'),maxProjected:t.querySelector('[data-element="max-projected"]'),anualProjected:t.querySelector('[data-element="anual-projected"]'),rangeEl:window.customRange,priceInput:window.priceInput},r={rate:{min:t.querySelector('[data-element="min-rate"]')?.textContent,max:t.querySelector('[data-element="max-rate"]')?.textContent,anual:t.querySelector('[data-element="anual-rate"]')?.textContent},projectedReturn:{min:0,max:0,anual:0},lastAmount:0},s=(c,n,a=12)=>{if(!c||!n||!a)return;let u=n/100;return(c*Math.pow(1+u,a/12)).toFixed(2)},m=c=>{let{value:n}=c.target;r.lastAmount=Number(n),n!==""&&(Number(n)<Number(e.priceInput.minValue)||Number(n)>Number(e.priceInput.maxValue)||(l(Number(n)),e.priceInput?.setValue?.(Number(n)),e.rangeEl?.setValue?.(Number(n))))},p=c=>{let{value:n}=c.target;r.lastAmount=Number(n),l(Number(n)),e.priceInput?.setValue?.(Number(n))},l=c=>{let n=s(c,Number(r.rate.max),12),a=s(c,Number(r.rate.min),12);if(e.minProjected&&e.maxProjected&&(e.minProjected.innerText=i(Number(a)),e.maxProjected.innerText=i(Number(n))),r.projectedReturn={max:Number(n),min:Number(a),anual:0},e.anualProjected){let u=s(c,Number(r.rate.anual),12);e.anualProjected.innerText=i(Number(u)),r.projectedReturn.anual=Number(u)}};(()=>{e.rangeEl?.on?.("input",p),e.priceInput?.on?.("input",m),l(e.rangeEl?.getValue?.()??0),r.lastAmount=e.rangeEl?.getValue?.()??0})()};function v(o){let t=document.querySelector(o);if(!t)throw new Error("Custom range element not found");let e={rangeInput:t?.querySelector('[data-element="range-input"]'),progressBar:t?.querySelector('[data-element="range-progress-bar"]'),progressValue:t?.querySelector('[data-element="range-progress-value"]'),rangeThumb:t?.querySelector('[data-element="range-thumb"]')},r={minValue:e.rangeInput.min,maxValue:e.rangeInput.max,step:e.rangeInput.step},s=()=>{l(Number(r.minValue)),e.rangeInput.value=r.minValue,e.rangeInput.addEventListener("input",m),window.customRange={element:e,getValue:c,setValue:g,on:n}},m=a=>{let{value:u}=a.target;l(Number(u))},p=a=>{let u={value:Number(a)===Number(r.minValue)?0:Number(a),minValue:Number(r.minValue),maxValue:Number(r.maxValue)};return(u.value-u.minValue)/(u.maxValue-u.minValue)*100},l=a=>{let u=p(a),d=e.progressValue.clientWidth;e.progressValue.innerText=i(a,"USD"),e.progressValue.style.setProperty("--progress-value-size",`${d}px`),e.progressValue.style.setProperty("--range-val",`${u}%`),e.rangeThumb.style.setProperty("--range-val",`${u}%`),e.progressBar.style.setProperty("--range-val",`${u}%`)},g=a=>{e.rangeInput.value=a.toString(),l(a)},c=()=>Number(e.rangeInput.value),n=(a,u)=>{e.rangeInput.addEventListener(a,u)};return s(),{element:e,getValue:c,setValue:g,on:n}}function E(o){let t=document.querySelector(o);if(!t)throw new Error("Price input element not found");let e={minValue:t.min||"0",maxValue:t.max||"100",error:!1,errorMessage:null,locale:"es-AR",currency:"USD"},r=()=>{t.value=e.minValue||"0",t.placeholder=i(Number(e.minValue)),window.priceInput={targetEl:t,...e,getValue:s,setValue:m,on:p}},s=()=>Number(t.value),m=l=>{t.value=l.toString(),t.placeholder=i(l)},p=(l,g)=>{t.addEventListener(l,g)};return r(),{targetEl:t,...e,getValue:s,setValue:m,on:p}}function y(){let o=document.querySelector('[cmt-card-element="list"]');return o?o.childNodes:void 0}function f(o,t){let[e,r]=o.split("/").map(Number),s=new Date(r,e-1),m=new Date,l=((m.getFullYear()-s.getFullYear())*12+(m.getMonth()-s.getMonth()))/t*100;return l=Math.min(100,Math.max(0,l)),l.toFixed(0)}function V(o){o.forEach(t=>{let e=t,r=e.querySelector('[cmt-card-element="start-date"]').innerText,s=e.querySelector('[cmt-card-element="months"]').innerText,m=e.querySelector('[cmt-card-element="progress"]');!m||!r||!s||(m.innerText=f(r,parseInt(s,10)))})}function x(){E('[data-element="price-input"]'),v('[data-element="custom-range"]'),b('[data-element="product-calculator"]');let o=y();o?V(o):console.log("No cards found in the grid")}document.addEventListener("DOMContentLoaded",()=>x());})();

package.json

 {
   "name": "@commute/bloom",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "Functionality for Bloom project",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/Commute-Agency/bloom#readme",

src/index.ts

@@ -0,4 +1,9 @@
+import { initCalculator } from '$components/calculator';
+import { createCustomRange } from '$components/custom-range';
+import { createPriceInput } from '$components/price-input';
+
 /**
  * Function to get cards from grid
  */
+/*
 function getCards() {
@@ -12,3 +17,9 @@ const list = document.querySelector('[cmt-card-element="list"]');
 }
+  */
 
+function getElements(filter: string) {
+  const elements = document.querySelectorAll(`[cmt-progress-element="${filter}"]`);
+  return elements as NodeListOf<HTMLElement>;
+}
+
 function calcularPorcentajeAvance(startDate: string, durationMonths: number) {
@@ -38,8 +49,10 @@ const [startMonth, startYear] = startDate.split('/').map(Number);
 interface CardElement extends HTMLElement {
-  querySelector(selectors: '[cmt-card-element="start-date"]'): HTMLElement;
-  querySelector(selectors: '[cmt-card-element="months"]'): HTMLElement;
-  querySelector(selectors: '[cmt-card-element="progress"]'): HTMLElement;
+  querySelector(selectors: '[cmt-progress-element="start-date"]'): HTMLElement;
+  querySelector(selectors: '[cmt-progress-element="months"]'): HTMLElement;
+  querySelector(selectors: '[cmt-progress-element="progress"]'): HTMLElement;
+  querySelector(selectors: '[cmt-progress-element="percentage-number"]'): HTMLElement;
+  querySelector(selectors: '[cmt-progress-element="percentage-filler"]'): HTMLElement;
 }
-
-function showProgress(cards: NodeListOf<ChildNode>) {
+/*
+function showProgressLegacy(cards: NodeListOf<ChildNode>) {
   cards.forEach((card) => {
@@ -50,13 +63,45 @@ const cardElement = card as CardElement;
     const progress = cardElement.querySelector('[cmt-card-element="progress"]');
-    if (!progress || !startDate || !months) {
-      return;
+    if (progress && startDate && months) {
+      progress.innerText = calcularPorcentajeAvance(startDate, parseInt(months, 10));
     }
-    progress.innerText = calcularPorcentajeAvance(startDate, parseInt(months, 10));
+    const pctNumber = cardElement.querySelector('[cmt-card-element="percentage-number"]').innerText;
+    const pctFiller = cardElement.querySelector('[cmt-card-element="percentage-filler"]');
+    if (pctFiller && pctNumber) {
+      pctFiller.style.width = `${pctNumber}%`;
+    }
   });
 }
+*/
+function showProgress(elements: NodeListOf<HTMLElement>) {
+  elements.forEach((element) => {
+    const cardElement = element as CardElement;
+    const startDate = cardElement.querySelector('[cmt-progress-element="start-date"]'); //.innerText;
+    const months = cardElement.querySelector('[cmt-progress-element="months"]'); //.innerText;
+    const progress = cardElement.querySelector('[cmt-progress-element="progress"]');
+    if (progress && startDate && months) {
+      progress.innerText = calcularPorcentajeAvance(
+        startDate.innerText,
+        parseInt(months.innerText, 10)
+      );
+    }
+    const pctNumber = cardElement.querySelector('[cmt-progress-element="percentage-number"]');
+    const pctFiller = cardElement.querySelector('[cmt-progress-element="percentage-filler"]');
+    if (pctFiller && pctNumber) {
+      pctFiller.style.width = `${pctNumber.innerText}%`;
+    }
+  });
+}
 
 function init() {
-  const cards = getCards();
-  if (cards) {
-    showProgress(cards);
+  createPriceInput('[data-element="price-input"]');
+  createCustomRange('[data-element="custom-range"]');
+  initCalculator('[data-element="product-calculator"]');
+
+  //const cards = getCards();
+  const elements = getElements('container');
+  if (elements.length > 0) {
+    showProgress(elements);
+  } else {
+    // eslint-disable-next-line no-console
+    console.log('No cards found in the grid');
   }
@@ -63,0 +108,0 @@ }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43726

155.14%

Number of package files

5

25%

Lines of code

112

103.64%

Number of low quality alerts

2

-33.33%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes