@sebgroup/green-core 1.88.7 → 1.89.0

package/components/alert/alert.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.QTSIPXV3.js";
-var _timeoutId, _progressIntervalId, _alertRef, _timerController, _startTimer, startTimer_fn, _clearTimers, clearTimers_fn, _dismiss, dismiss_fn, _handleButtonClick, handleButtonClick_fn, _handleKeyDown, handleKeyDown_fn, _config, config_get, _renderIcon, renderIcon_fn, _renderMessage, renderMessage_fn, _renderActionButton, renderActionButton_fn, _renderCloseButton, renderCloseButton_fn, _renderTimerBar, renderTimerBar_fn;
+var _timeoutId, _progressIntervalId, _alertRef, _observer, _isVisible, _remaining, _lastTick, _timerController, _setupObserver, setupObserver_fn, _disconnectObserver, disconnectObserver_fn, _startTicking, startTicking_fn, _resumeTimer, resumeTimer_fn, _pauseTimer, pauseTimer_fn, _clearTimers, clearTimers_fn, _dismiss, dismiss_fn, _handleButtonClick, handleButtonClick_fn, _handleKeyDown, handleKeyDown_fn, _config, config_get, _renderIcon, renderIcon_fn, _renderMessage, renderMessage_fn, _renderActionButton, renderActionButton_fn, _renderCloseButton, renderCloseButton_fn, _renderTimerBar, renderTimerBar_fn;
 import { localized, msg } from "@lit/localize";
 import { nothing } from "lit";
 import { property, state } from "lit/decorators.js";
@@ -43,8 +43,12 @@ const PROGRESS_INTERVAL = 100;
 let GdsAlert = class extends GdsElement {
   constructor() {
     super();
-    // Timer management
-    __privateAdd(this, _startTimer);
+    __privateAdd(this, _setupObserver);
+    __privateAdd(this, _disconnectObserver);
+    // Timer management (pausable)
+    __privateAdd(this, _startTicking);
+    __privateAdd(this, _resumeTimer);
+    __privateAdd(this, _pauseTimer);
     __privateAdd(this, _clearTimers);
     __privateAdd(this, _dismiss);
     // Event handlers
@@ -70,20 +74,31 @@ let GdsAlert = class extends GdsElement {
     __privateAdd(this, _timeoutId, void 0);
     __privateAdd(this, _progressIntervalId, void 0);
     __privateAdd(this, _alertRef, createRef());
+    __privateAdd(this, _observer, void 0);
+    __privateAdd(this, _isVisible, false);
+    __privateAdd(this, _remaining, 0);
+    __privateAdd(this, _lastTick, 0);
     __privateAdd(this, _timerController, {
       hostConnected: () => {
-        if (this.timeout > 0)
-          __privateMethod(this, _startTimer, startTimer_fn).call(this);
+        if (this.timeout > 0) {
+          __privateMethod(this, _setupObserver, setupObserver_fn).call(this);
+        }
       },
-      hostDisconnected: () => __privateMethod(this, _clearTimers, clearTimers_fn).call(this)
+      hostDisconnected: () => {
+        __privateMethod(this, _disconnectObserver, disconnectObserver_fn).call(this);
+        __privateMethod(this, _clearTimers, clearTimers_fn).call(this);
+      }
     });
     this.addController(__privateGet(this, _timerController));
   }
   updated(changed) {
     if (changed.has("timeout")) {
+      __privateMethod(this, _disconnectObserver, disconnectObserver_fn).call(this);
       __privateMethod(this, _clearTimers, clearTimers_fn).call(this);
+      __privateSet(this, _remaining, Math.max(0, this.timeout));
+      this._progress = 100;
       if (this.timeout > 0)
-        __privateMethod(this, _startTimer, startTimer_fn).call(this);
+        __privateMethod(this, _setupObserver, setupObserver_fn).call(this);
     }
   }
   render() {
@@ -114,22 +129,68 @@ let GdsAlert = class extends GdsElement {
 _timeoutId = new WeakMap();
 _progressIntervalId = new WeakMap();
 _alertRef = new WeakMap();
+_observer = new WeakMap();
+_isVisible = new WeakMap();
+_remaining = new WeakMap();
+_lastTick = new WeakMap();
 _timerController = new WeakMap();
-_startTimer = new WeakSet();
-startTimer_fn = function() {
-  const start = Date.now();
-  this._progress = 100;
+_setupObserver = new WeakSet();
+setupObserver_fn = function() {
+  if (__privateGet(this, _observer))
+    return;
+  if (!__privateGet(this, _remaining))
+    __privateSet(this, _remaining, Math.max(0, this.timeout));
+  __privateSet(this, _observer, new IntersectionObserver(
+    (entries) => {
+      const entry = entries[0];
+      const ratio = entry?.intersectionRatio ?? 0;
+      const nowVisible = ratio >= 0.1;
+      if (nowVisible && !__privateGet(this, _isVisible)) {
+        __privateSet(this, _isVisible, true);
+        __privateMethod(this, _resumeTimer, resumeTimer_fn).call(this);
+      } else if (!nowVisible && __privateGet(this, _isVisible)) {
+        __privateSet(this, _isVisible, false);
+        __privateMethod(this, _pauseTimer, pauseTimer_fn).call(this);
+      }
+    },
+    {
+      root: null,
+      threshold: [0, 0.1, 1]
+    }
+  ));
+  __privateGet(this, _observer).observe(this);
+};
+_disconnectObserver = new WeakSet();
+disconnectObserver_fn = function() {
+  if (__privateGet(this, _observer)) {
+    __privateGet(this, _observer).disconnect();
+    __privateSet(this, _observer, void 0);
+  }
+  __privateSet(this, _isVisible, false);
+};
+_startTicking = new WeakSet();
+startTicking_fn = function() {
+  __privateSet(this, _lastTick, Date.now());
   __privateSet(this, _progressIntervalId, window.setInterval(() => {
-    const elapsed = Date.now() - start;
-    this._progress = Math.max(
-      0,
-      (this.timeout - elapsed) / this.timeout * 100
-    );
+    const now = Date.now();
+    const dt = now - __privateGet(this, _lastTick);
+    __privateSet(this, _lastTick, now);
+    __privateSet(this, _remaining, Math.max(0, __privateGet(this, _remaining) - dt));
+    this._progress = this.timeout > 0 ? Math.max(0, __privateGet(this, _remaining) / this.timeout * 100) : 0;
+    if (__privateGet(this, _remaining) <= 0) {
+      __privateMethod(this, _dismiss, dismiss_fn).call(this, "timeout");
+    }
   }, PROGRESS_INTERVAL));
-  __privateSet(this, _timeoutId, window.setTimeout(
-    () => __privateMethod(this, _dismiss, dismiss_fn).call(this, "timeout"),
-    this.timeout
-  ));
+};
+_resumeTimer = new WeakSet();
+resumeTimer_fn = function() {
+  if (__privateGet(this, _remaining) <= 0 || __privateGet(this, _timeoutId) || __privateGet(this, _progressIntervalId))
+    return;
+  __privateMethod(this, _startTicking, startTicking_fn).call(this);
+};
+_pauseTimer = new WeakSet();
+pauseTimer_fn = function() {
+  __privateMethod(this, _clearTimers, clearTimers_fn).call(this);
 };
 _clearTimers = new WeakSet();
 clearTimers_fn = function() {
@@ -140,6 +201,7 @@ clearTimers_fn = function() {
 _dismiss = new WeakSet();
 dismiss_fn = async function(source) {
   this._isClosing = true;
+  __privateMethod(this, _disconnectObserver, disconnectObserver_fn).call(this);
   __privateMethod(this, _clearTimers, clearTimers_fn).call(this);
   await this.updateComplete;
   this.dispatchCustomEvent("gds-close", {

package/generated/react/index.d.ts

@@ -23,10 +23,10 @@ export * from './grid/index.js';
 export * from './grouped-list/index.js';
 export * from './list-item/index.js';
 export * from './icons/icon/index.js';
+export * from './img/index.js';
 export * from './input/index.js';
 export * from './link/index.js';
 export * from './mask/index.js';
-export * from './img/index.js';
 export * from './menu-button/index.js';
 export * from './backdrop/index.js';
 export * from './popover/index.js';

package/generated/react/index.js

@@ -23,10 +23,10 @@ export * from "./grid/index.js";
 export * from "./grouped-list/index.js";
 export * from "./list-item/index.js";
 export * from "./icons/icon/index.js";
+export * from "./img/index.js";
 export * from "./input/index.js";
 export * from "./link/index.js";
 export * from "./mask/index.js";
-export * from "./img/index.js";
 export * from "./menu-button/index.js";
 export * from "./backdrop/index.js";
 export * from "./popover/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.88.7",
+  "version": "1.89.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QTSIPXV3.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-f2b062";
+const VER_SUFFIX = "-dc748c";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])