@jjlmoya/utils-finance 1.20.0 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-finance",
-    "version": "1.20.0",
+    "version": "1.21.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/tool/compoundInterest/compound-interest-calculator.css

@@ -22,6 +22,16 @@
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
   border: 1px solid var(--cic-border-subtle);
   overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.cic-root,
+.cic-root *,
+.cic-root *::before,
+.cic-root *::after {
+  box-sizing: border-box;
 }
 
 .theme-dark .cic-root {
@@ -52,12 +62,14 @@
   gap: 1rem;
   align-items: center;
   justify-content: space-between;
+  min-width: 0;
 }
 
 .cic-header-left {
   display: flex;
   align-items: center;
   gap: 0.75rem;
+  min-width: 0;
 }
 
 .cic-icon-wrap {
@@ -68,6 +80,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 
 .cic-icon {
@@ -79,6 +92,7 @@
   font-size: 1.25rem;
   font-weight: 700;
   color: var(--cic-text);
+  overflow-wrap: anywhere;
 }
 
 .cic-realtime {
@@ -104,6 +118,7 @@
 
 .cic-grid {
   display: grid;
+  min-width: 0;
 }
 
 .cic-panel-left {
@@ -113,18 +128,21 @@
   gap: 1.5rem;
   background: var(--cic-bg-panel);
   border-bottom: 1px solid var(--cic-border-subtle);
+  min-width: 0;
 }
 
 .cic-fields {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  min-width: 0;
 }
 
 .cic-grid-2 {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 1rem;
+  min-width: 0;
 }
 
 .cic-label {
@@ -139,6 +157,7 @@
 
 .cic-input-wrap {
   position: relative;
+  min-width: 0;
 }
 
 .cic-currency {
@@ -168,7 +187,7 @@
   color: var(--cic-text);
   font-weight: 700;
   font-size: 1.125rem;
-  box-sizing: border-box;
+  min-width: 0;
 }
 
 .cic-input-prefixed {
@@ -192,6 +211,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  min-width: 0;
 }
 
 .cic-summary-row {
@@ -199,12 +219,15 @@
   justify-content: space-between;
   align-items: center;
   font-size: 0.875rem;
+  gap: 0.75rem;
+  min-width: 0;
 }
 
 .cic-summary-label {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  min-width: 0;
 }
 
 .cic-dot-neutral {
@@ -235,6 +258,8 @@
 .cic-summary-value {
   font-weight: 700;
   color: var(--cic-text);
+  overflow-wrap: anywhere;
+  text-align: right;
 }
 
 .cic-summary-value-accent {
@@ -248,6 +273,8 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
+  gap: 1rem;
+  min-width: 0;
 }
 
 .cic-total-label {
@@ -262,6 +289,8 @@
   font-size: 1.5rem;
   font-weight: 900;
   color: var(--cic-text);
+  overflow-wrap: anywhere;
+  text-align: right;
 }
 
 .cic-panel-right {
@@ -269,12 +298,56 @@
   display: flex;
   flex-direction: column;
   min-height: 500px;
+  min-width: 0;
 }
 
 .cic-canvas-wrap {
   position: relative;
   width: 100%;
   flex: 1;
+  min-width: 0;
+  min-height: 280px;
+}
+
+.cic-canvas-wrap canvas {
+  max-width: 100%;
+}
+
+@media (max-width: 640px) {
+  .cic-root {
+    border-radius: 1.25rem;
+  }
+
+  .cic-header,
+  .cic-panel-left,
+  .cic-panel-right {
+    padding: 1rem;
+  }
+
+  .cic-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .cic-grid-2 {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .cic-input {
+    font-size: 1rem;
+  }
+
+  .cic-input-prefixed {
+    padding-left: 2.5rem;
+  }
+
+  .cic-input-suffixed {
+    padding-right: 2.5rem;
+  }
+
+  .cic-panel-right {
+    min-height: 320px;
+  }
 }
 
 .cic-insight {

package/src/tool/courtFeeCalculator/spanish-court-fees-calculator.css

@@ -114,6 +114,22 @@
   transition: all 0.2s;
 }
 
+select.ctf-input-control {
+  appearance: none;
+  background-color: var(--ctf-bg-input);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23f1f5f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-position: right 0.875rem center;
+  background-repeat: no-repeat;
+  background-size: 1rem;
+  line-height: 1.25;
+  min-height: 2.75rem;
+  padding-right: 2.75rem;
+}
+
+.theme-light select.ctf-input-control {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
 .ctf-input-control:focus {
   outline: none;
   border-color: var(--ctf-accent);

package/src/tool/ibanBicSwiftConverter/component.astro

@@ -27,7 +27,7 @@ const { ui } = Astro.props;
                         id="iban-input"
                         placeholder={ui.labelInputPlaceholder}
                         autocomplete="off"
-                        maxlength="34"
+                        maxlength="42"
                     />
                     <span class="ibs-input-icon" data-icon="card"></span>
                 </div>
@@ -91,6 +91,7 @@ const { ui } = Astro.props;
             formatted += value[i];
         }
         principalInput.value = formatted;
+        principalInput.scrollLeft = principalInput.scrollWidth;
 
         errorMsg?.classList.add("ibs-hidden");
         if (value.length === 0) {

package/src/tool/ibanBicSwiftConverter/iban-to-bic-swift-converter.css

@@ -189,6 +189,7 @@
     border: 2px solid var(--ibs-border-input);
     transition: all 0.3s ease;
     min-width: 0;
+    width: 100%;
 }
 
 .ibs-input-wrapper:focus-within {
@@ -207,6 +208,9 @@
     outline: none;
     letter-spacing: 0.02em;
     min-width: 0;
+    overflow-x: auto;
+    text-overflow: clip;
+    white-space: nowrap;
 }
 
 .ibs-input-wrapper input::placeholder {
@@ -454,13 +458,12 @@
     }
 
     .ibs-input-wrapper input {
-        padding: 1rem;
-        font-size: 1rem;
+        padding: 0.875rem 1rem;
+        font-size: 0.95rem;
     }
 
     .ibs-input-icon {
-        margin-right: 1rem;
-        font-size: 1.25rem;
+        display: none;
     }
 
     .ibs-bank-name-value,