@genesislcap/foundation-ui 14.401.4 → 14.402.0

package/dist/dts/status-pill/status-pill.d.ts

@@ -122,18 +122,51 @@ export declare class StatusPill extends FoundationElement {
      * ```
      */
     dateCountdownUnit: CountdownUnit;
+    /**
+     * @attr date-countdown-visible-after - a timestamp (in milliseconds) that controls
+     * when the countdown (and pill) becomes visible. If present, the pill will only
+     * be shown once the current time is equal to or after this timestamp.
+     * @example
+     * Show pill and countdown only after a specific start time
+     * ```html
+     *  <rapid-status-pill
+     *    date-countdown="1750955880385"
+     *    date-countdown-visible-after="1750952280385"
+     *  ></rapid-status-pill>
+     * ```
+     */
+    dateCountdownVisibleAfter: number;
+    /**
+     * @attr hide-when-countdown-completed - if true, the status pill will be removed
+     * from the template once the countdown has expired.
+     */
+    hideWhenCountdownCompleted: boolean;
     /**
      * @internal
      */
     countdown: string;
+    /**
+     * @internal
+     * Tracks whether the countdown has reached or passed its target.
+     */
+    isCountdownExpired: boolean;
+    /**
+     * @internal
+     * Controls whether the pill should be rendered based on the optional
+     * date-countdown-visible-after start time.
+     */
+    isCountdownVisible: boolean;
     private dateInterval;
     /**
      * @internal
      */
     dateCountdownChanged(oldValue: any, newValue: any): void;
+    dateCountdownVisibleAfterChanged(oldValue: any, newValue: any): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     private setUpDateCountdown;
     private updateCountdown;
+    private updateVisibilityFromStartTime;
     private clearCountdownTimer;
 }
 /**

package/dist/dts/status-pill/status-pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-pill.d.ts","sourceRoot":"","sources":["../../../src/status-pill/status-pill.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAU/D;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,sBAAsB,GACjC,mBAAmB,MAAM,EACzB,UAAS,aAAwB,KAChC,MAoCF,CAAC;AAEF;;GAEG;AACH,qBAAa,UAAW,SAAQ,iBAAiB;IAC/C;;;;;;;;OAQG;IACsC,eAAe,EAAE,MAAM,CAAC;IAEjE;;;;;;;;OAQG;IAC+B,QAAQ,EAAE,MAAM,CAAC;IAEnD;;;;;;;;OAQG;IAC8B,OAAO,EAAE,MAAM,CAAC;IAEjD;;;;;;;;OAQG;IACkC,WAAW,EAAE,MAAM,CAAC;IAEzD;;;;;;;;OAQG;IACmD,0BAA0B,EAAE,MAAM,CAAC;IAEzF;;;;;;;;OAQG;IAC+B,QAAQ,EAAE,MAAM,CAAQ;IAE1D;;;;;;;;OAQG;IACgC,SAAS,EAAE,MAAM,CAAC;IAErD;;;;;;;;OAQG;IACG,IAAI,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACoC,aAAa,EAAE,MAAM,CAAC;IAE7D;;;;;;;;OAQG;IACsD,6BAA6B,EAAE,MAAM,CAClF;IAEZ;;;;;;;;OAQG;IACyC,iBAAiB,EAAE,aAAa,CAAY;IAExF;;OAEG;IACS,SAAS,EAAE,MAAM,CAAC;IAE9B,OAAO,CAAC,YAAY,CAAC;IAErB;;OAEG;IACH,oBAAoB,CAAC,QAAQ,KAAA,EAAE,QAAQ,KAAA;IAWvC,oBAAoB;IAKpB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,mBAAmB;CAO5B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;qBAI/B,CAAC"}
+{"version":3,"file":"status-pill.d.ts","sourceRoot":"","sources":["../../../src/status-pill/status-pill.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAU/D;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEzD;;GAEG;AACH,eAAO,MAAM,sBAAsB,GACjC,mBAAmB,MAAM,EACzB,UAAS,aAAwB,KAChC,MAoCF,CAAC;AAEF;;GAEG;AACH,qBAAa,UAAW,SAAQ,iBAAiB;IAC/C;;;;;;;;OAQG;IACsC,eAAe,EAAE,MAAM,CAAC;IAEjE;;;;;;;;OAQG;IAC+B,QAAQ,EAAE,MAAM,CAAC;IAEnD;;;;;;;;OAQG;IAC8B,OAAO,EAAE,MAAM,CAAC;IAEjD;;;;;;;;OAQG;IACkC,WAAW,EAAE,MAAM,CAAC;IAEzD;;;;;;;;OAQG;IACmD,0BAA0B,EAAE,MAAM,CAAC;IAEzF;;;;;;;;OAQG;IAC+B,QAAQ,EAAE,MAAM,CAAQ;IAE1D;;;;;;;;OAQG;IACgC,SAAS,EAAE,MAAM,CAAC;IAErD;;;;;;;;OAQG;IACG,IAAI,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACoC,aAAa,EAAE,MAAM,CAAC;IAE7D;;;;;;;;OAQG;IACsD,6BAA6B,EAAE,MAAM,CAClF;IAEZ;;;;;;;;OAQG;IACyC,iBAAiB,EAAE,aAAa,CAAY;IAExF;;;;;;;;;;;;OAYG;IACkD,yBAAyB,EAAE,MAAM,CAAC;IAEvF;;;OAGG;IAEH,0BAA0B,EAAE,OAAO,CAAS;IAE5C;;OAEG;IACS,SAAS,EAAE,MAAM,CAAC;IAE9B;;;OAGG;IACS,kBAAkB,EAAE,OAAO,CAAS;IAEhD;;;;OAIG;IACS,kBAAkB,EAAE,OAAO,CAAQ;IAE/C,OAAO,CAAC,YAAY,CAAC;IAErB;;OAEG;IACH,oBAAoB,CAAC,QAAQ,KAAA,EAAE,QAAQ,KAAA;IAYvC,gCAAgC,CAAC,QAAQ,KAAA,EAAE,QAAQ,KAAA;IAMnD,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,eAAe;IAgCvB,OAAO,CAAC,6BAA6B;IAcrC,OAAO,CAAC,mBAAmB;CAO5B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;qBAI/B,CAAC"}

package/dist/dts/status-pill/status-pill.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status-pill.template.d.ts","sourceRoot":"","sources":["../../../src/status-pill/status-pill.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AA4ChD,eAAO,MAAM,4BAA4B,iEAExC,CAAC"}
+{"version":3,"file":"status-pill.template.d.ts","sourceRoot":"","sources":["../../../src/status-pill/status-pill.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAiDhD,eAAO,MAAM,4BAA4B,iEAExC,CAAC"}

package/dist/esm/status-pill/status-pill.js

@@ -85,6 +85,22 @@ export class StatusPill extends FoundationElement {
          * ```
          */
         this.dateCountdownUnit = 'second';
+        /**
+         * @attr hide-when-countdown-completed - if true, the status pill will be removed
+         * from the template once the countdown has expired.
+         */
+        this.hideWhenCountdownCompleted = false;
+        /**
+         * @internal
+         * Tracks whether the countdown has reached or passed its target.
+         */
+        this.isCountdownExpired = false;
+        /**
+         * @internal
+         * Controls whether the pill should be rendered based on the optional
+         * date-countdown-visible-after start time.
+         */
+        this.isCountdownVisible = true;
     }
     /**
      * @internal
@@ -95,9 +111,19 @@ export class StatusPill extends FoundationElement {
                 this.clearCountdownTimer();
                 return;
             }
+            this.isCountdownExpired = false;
             this.setUpDateCountdown(newValue);
         }
     }
+    dateCountdownVisibleAfterChanged(oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.updateVisibilityFromStartTime();
+        }
+    }
+    connectedCallback() {
+        this.updateVisibilityFromStartTime();
+        super.connectedCallback();
+    }
     disconnectedCallback() {
         this.clearCountdownTimer();
         super.disconnectedCallback();
@@ -117,20 +143,49 @@ export class StatusPill extends FoundationElement {
     updateCountdown(targetDate) {
         const now = new Date().getTime();
         const diff = Math.floor(targetDate.getTime() - now);
+        const visibleAfterMs = this.dateCountdownVisibleAfter !== undefined && this.dateCountdownVisibleAfter !== null
+            ? Number(this.dateCountdownVisibleAfter)
+            : undefined;
+        if (visibleAfterMs !== undefined && !isNaN(visibleAfterMs) && now < visibleAfterMs) {
+            // Not yet reached the start time; hide the entire pill/countdown.
+            this.isCountdownVisible = false;
+            this.countdown = null;
+            this.isCountdownExpired = false;
+            return;
+        }
+        this.isCountdownVisible = true;
         if (diff <= 0) {
-            this.countdown = this.dateCountdownCompletedMessage;
-            clearInterval(this.dateInterval);
+            if (this.hideWhenCountdownCompleted) {
+                this.isCountdownExpired = true;
+                this.clearCountdownTimer();
+            }
+            else {
+                this.countdown = this.dateCountdownCompletedMessage;
+                clearInterval(this.dateInterval);
+            }
         }
         else {
             this.countdown = formatTimeForCountDown(diff, this.dateCountdownUnit);
         }
     }
+    updateVisibilityFromStartTime() {
+        const visibleAfterMs = this.dateCountdownVisibleAfter !== undefined && this.dateCountdownVisibleAfter !== null
+            ? Number(this.dateCountdownVisibleAfter)
+            : undefined;
+        if (visibleAfterMs !== undefined && !isNaN(visibleAfterMs)) {
+            const now = Date.now();
+            this.isCountdownVisible = now >= visibleAfterMs;
+        }
+        else {
+            this.isCountdownVisible = true;
+        }
+    }
     clearCountdownTimer() {
         if (this.dateInterval) {
             clearInterval(this.dateInterval);
             this.dateInterval = null;
-            this.countdown = null;
         }
+        this.countdown = null;
     }
 }
 __decorate([
@@ -166,9 +221,21 @@ __decorate([
 __decorate([
     attr({ attribute: 'date-countdown-unit' })
 ], StatusPill.prototype, "dateCountdownUnit", void 0);
+__decorate([
+    attr({ attribute: 'date-countdown-visible-after' })
+], StatusPill.prototype, "dateCountdownVisibleAfter", void 0);
+__decorate([
+    attr({ mode: 'boolean', attribute: 'hide-when-countdown-completed' })
+], StatusPill.prototype, "hideWhenCountdownCompleted", void 0);
 __decorate([
     observable
 ], StatusPill.prototype, "countdown", void 0);
+__decorate([
+    observable
+], StatusPill.prototype, "isCountdownExpired", void 0);
+__decorate([
+    observable
+], StatusPill.prototype, "isCountdownVisible", void 0);
 /**
  * The Foundation Status Pill
  *

package/dist/esm/status-pill/status-pill.template.js

@@ -1,32 +1,34 @@
 import { html, when } from '@microsoft/fast-element';
 import { getPrefix } from '../utils';
 const getPrefixedStatusPillTemplate = (prefix) => html `
-  <div
-    data-test-id="status-pill"
-    part="status-pill"
-    class="status-pill"
-    style="color: ${(x) => x.textColor || ''}; background: ${(x) => x.backgroundColor || ''};"
-  >
-    ${when((x) => x.iconName, html `
-        <${prefix}-icon name="${(x) => x.iconName}" size="${(x) => x.iconSize}"></${prefix}-icon>
-      `)}
-    ${when((x) => x.iconSrc, html `
-        <img alt="${(x) => x.iconSrc}" class="status-pill-image" src="${(x) => x.iconSrc}" />
-      `)}
-    ${when((x) => x.iconInitial, html `
-        <div
-          data-test-id="status-pill-initial"
-          class="status-pill-initial"
-          style="color:${(x) => x.textColor}; background-color: ${(x) => x.iconInitialBackgroundColor}"
-        >
-          ${(x) => x.iconInitial.substring(0, 1)}
-        </div>
-      `)}
-    <span data-test-id="status-pill-text">${(x) => x.text}</span>
-    ${when((x) => x.countdown, html `
-        <span data-test-id="status-pill-countdown">${(x) => x.countdown}</span>
-      `)}
-  </div>
+  ${when((x) => x.isCountdownVisible && !(x.hideWhenCountdownCompleted && x.isCountdownExpired), html `
+      <div
+        data-test-id="status-pill"
+        part="status-pill"
+        class="status-pill"
+        style="color: ${(x) => x.textColor || ''}; background: ${(x) => x.backgroundColor || ''};"
+      >
+        ${when((x) => x.iconName, html `
+            <${prefix}-icon name="${(x) => x.iconName}" size="${(x) => x.iconSize}"></${prefix}-icon>
+          `)}
+        ${when((x) => x.iconSrc, html `
+            <img alt="${(x) => x.iconSrc}" class="status-pill-image" src="${(x) => x.iconSrc}" />
+          `)}
+        ${when((x) => x.iconInitial, html `
+            <div
+              data-test-id="status-pill-initial"
+              class="status-pill-initial"
+              style="color:${(x) => x.textColor}; background-color: ${(x) => x.iconInitialBackgroundColor}"
+            >
+              ${(x) => x.iconInitial.substring(0, 1)}
+            </div>
+          `)}
+        <span data-test-id="status-pill-text">${(x) => x.text}</span>
+        ${when((x) => x.countdown, html `
+            <span data-test-id="status-pill-countdown">${(x) => x.countdown}</span>
+          `)}
+      </div>
+    `)}
 `;
 export const foundationStatusPillTemplate = html `
   ${(x) => getPrefixedStatusPillTemplate(getPrefix(x))}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.401.4",
+  "version": "14.402.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -85,13 +85,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.401.4",
-    "@genesislcap/genx": "14.401.4",
-    "@genesislcap/rollup-builder": "14.401.4",
-    "@genesislcap/ts-builder": "14.401.4",
-    "@genesislcap/uvu-playwright-builder": "14.401.4",
-    "@genesislcap/vite-builder": "14.401.4",
-    "@genesislcap/webpack-builder": "14.401.4",
+    "@genesislcap/foundation-testing": "14.402.0",
+    "@genesislcap/genx": "14.402.0",
+    "@genesislcap/rollup-builder": "14.402.0",
+    "@genesislcap/ts-builder": "14.402.0",
+    "@genesislcap/uvu-playwright-builder": "14.402.0",
+    "@genesislcap/vite-builder": "14.402.0",
+    "@genesislcap/webpack-builder": "14.402.0",
     "copyfiles": "^2.4.1"
   },
   "dependencies": {
@@ -100,16 +100,16 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/expression-builder": "14.401.4",
-    "@genesislcap/foundation-ai": "14.401.4",
-    "@genesislcap/foundation-comms": "14.401.4",
-    "@genesislcap/foundation-criteria": "14.401.4",
-    "@genesislcap/foundation-errors": "14.401.4",
-    "@genesislcap/foundation-events": "14.401.4",
-    "@genesislcap/foundation-logger": "14.401.4",
-    "@genesislcap/foundation-notifications": "14.401.4",
-    "@genesislcap/foundation-user": "14.401.4",
-    "@genesislcap/foundation-utils": "14.401.4",
+    "@genesislcap/expression-builder": "14.402.0",
+    "@genesislcap/foundation-ai": "14.402.0",
+    "@genesislcap/foundation-comms": "14.402.0",
+    "@genesislcap/foundation-criteria": "14.402.0",
+    "@genesislcap/foundation-errors": "14.402.0",
+    "@genesislcap/foundation-events": "14.402.0",
+    "@genesislcap/foundation-logger": "14.402.0",
+    "@genesislcap/foundation-notifications": "14.402.0",
+    "@genesislcap/foundation-user": "14.402.0",
+    "@genesislcap/foundation-utils": "14.402.0",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -131,5 +131,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "9cb3e4e65da820acbd373f6524d0452e8cb6d613"
+  "gitHead": "7ffded0edb096db3e60298c0d0a216071aa1d970"
 }