@quandis/qbo4.ui 4.0.1-CI-20241116-001926 → 4.0.1-CI-20241118-225310

package/package.json

@@ -3,7 +3,7 @@
   "author": "Quandis, Inc.",
   "license": "MIT",
   "type": "module",
-  "version": "4.0.1-CI-20241116-001926",
+  "version": "4.0.1-CI-20241118-225310",
   "workspaces": [
     "code"
   ],

package/scss/qbo.scss

@@ -170,6 +170,10 @@
     overflow: auto;
 }
 
+.qbo-card-bottom {
+    margin-bottom: .5em;
+}
+
 .qbo-card-left {
     margin-left: .5em;
 }
@@ -178,6 +182,10 @@
     margin-right: .5em;
 }
 
+.qbo-card-top {
+    margin-top: .5em;
+}
+
 svg {
     height: 1rem;
     width: 1rem;
@@ -436,7 +444,7 @@ nav {
 
     > span {
         font-weight: bold;
-        margin-top: 17px;
+        margin-top: 15px;
         padding-inline-start: 10px;
     }
 
@@ -640,6 +648,7 @@ div.qbo-row-subsequent {
 h3.title {
     margin-block-end: 0;
     margin-block-start: .5em;
+    margin-bottom: .5em;
     margin-left: .5em;
 }
 

package/src/qbo/Program.d.ts

@@ -43,5 +43,3 @@ export declare function matches(source: any, match: any, wildCard?: string, igno
 export declare function elementData(element: HTMLElement): Record<string, string>;
 export declare function elementDate(date: string): string;
 export declare function elementDateTime(date: string): string;
-export declare function elementMoney(amount: string, currency?: string, locale?: string): string;
-export declare function elementPercentage(value: string, decimals?: number, locale?: string): string;

package/src/qbo/Program.js

@@ -54,20 +54,3 @@ export function elementDateTime(date) {
         return '';
     return new Date(date).toLocaleString().replace(',', '');
 }
-export function elementMoney(amount, currency = 'USD', locale = 'en-US') {
-    if (!amount)
-        return '';
-    return new Intl.NumberFormat(locale, {
-        style: 'currency',
-        currency,
-    }).format(Number(amount));
-}
-export function elementPercentage(value, decimals = 2, locale = 'en-US') {
-    if (!value)
-        return '';
-    return new Intl.NumberFormat(locale, {
-        style: 'percent',
-        minimumFractionDigits: decimals,
-        maximumFractionDigits: decimals,
-    }).format(Number(value));
-}

package/src/qbo/Program.ts

@@ -73,20 +73,3 @@ export function elementDateTime(date: string) {
     if (!date || date.trim() == '') return '';
     return new Date(date).toLocaleString().replace(',', '');
 }
-
-export function elementMoney(amount: string, currency: string = 'USD', locale: string = 'en-US'): string {
-    if (!amount) return '';
-    return new Intl.NumberFormat(locale, {
-        style: 'currency',
-        currency,
-    }).format(Number(amount));
-}
-
-export function elementPercentage(value: string, decimals: number = 2, locale: string = 'en-US'): string {
-    if (!value) return '';
-    return new Intl.NumberFormat(locale, {
-        style: 'percent',
-        minimumFractionDigits: decimals,
-        maximumFractionDigits: decimals,
-    }).format(Number(value));
-}

package/src/qbo/qbo-user-preferences.d.ts

@@ -16,3 +16,6 @@ export declare function setUserPreference(preference: string, value: any, storag
 export declare function getUserPreference(preference: string, storageKey?: string): any;
 export declare function join(values: (string | null | undefined)[], separator?: string): string;
 export declare function formatDate(dateString: string | Date | undefined | null, format?: string | null): string | null;
+export declare function formatMoney(amount: string | number | undefined | null, currency?: string, locale?: string): string;
+export declare function formatPercentage(value: string | number | undefined | null, decimals?: number, locale?: string): string;
+export declare function timeRemaining(targetDate: string | Date | undefined | null, interval?: string): import("lit-html").TemplateResult<1> | null;

package/src/qbo/qbo-user-preferences.js

@@ -176,3 +176,36 @@ export function formatDate(dateString, format = null) {
     const formattedDate = new Intl.DateTimeFormat(undefined, options).format(new Date(dateString));
     return formattedDate;
 }
+export function formatMoney(amount, currency = 'USD', locale = 'en-US') {
+    if (!amount)
+        return '';
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+    }).format(Number(amount));
+}
+export function formatPercentage(value, decimals = 2, locale = 'en-US') {
+    if (!value)
+        return '';
+    return new Intl.NumberFormat(locale, {
+        style: 'percent',
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+    }).format(Number(value));
+}
+export function timeRemaining(targetDate, interval = 'months') {
+    if (targetDate == null || isNaN(new Date(targetDate).getTime()))
+        return null;
+    let years = new Date(targetDate).getFullYear() - new Date().getFullYear();
+    let months = new Date(targetDate).getMonth() - new Date().getMonth();
+    if (months < 0) {
+        years -= 1;
+        months = 12 + months;
+    }
+    if (years < 1 && months < 1)
+        return html ``;
+    else if (years < 1 && months > 0)
+        return html `${months} month${months > 1 ? 's' : ''}`;
+    else
+        return html `${years} year${years > 1 ? 's' : ''}, ${months} month${months != 1 ? 's' : ''} (${years * 12 + months})`;
+}

package/src/qbo/qbo-user-preferences.ts

@@ -165,3 +165,41 @@ export function formatDate(dateString: string | Date | undefined | null, format:
 
     return formattedDate;
 }
+
+export function formatMoney(amount: string | number | undefined | null, currency: string = 'USD', locale: string = 'en-US'): string {
+    if (!amount) return '';
+    return new Intl.NumberFormat(locale, {
+        style: 'currency',
+        currency,
+    }).format(Number(amount));
+}
+
+export function formatPercentage(value: string | number | undefined | null, decimals: number = 2, locale: string = 'en-US'): string {
+    if (!value) return '';
+    return new Intl.NumberFormat(locale, {
+        style: 'percent',
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+    }).format(Number(value));
+}
+
+export function timeRemaining(targetDate: string | Date | undefined | null, interval: string = 'months') {
+
+    if (targetDate == null || isNaN(new Date(targetDate).getTime()))
+        return null;
+
+    let years = new Date(targetDate).getFullYear() - new Date().getFullYear();
+    let months = new Date(targetDate).getMonth() - new Date().getMonth();
+
+    if (months < 0) {
+        years -= 1;
+        months = 12 + months;
+    }
+
+    if (years < 1 && months < 1)
+        return html``;
+    else if (years < 1 && months > 0)
+        return html`${months} month${months > 1 ? 's' : ''}`;
+    else
+        return html`${years} year${years > 1 ? 's' : ''}, ${months} month${months != 1 ? 's' : ''} (${years * 12 + months})`;
+}