blue-web 1.21.0 → 1.21.2

package/dist/js/odometer.d.ts

@@ -1,17 +1,30 @@
-declare class Odometer extends HTMLElement {
-    private wrapper;
-    private _initialized;
-    static get observedAttributes(): string[];
-    constructor();
-    connectedCallback(): void;
-    private setup;
-    private rebuildNumbers;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    private updateValue;
-    set value(value: number);
-    get value(): number;
-    set max(value: number);
-    get max(): number;
-}
-export { Odometer };
-export default Odometer;
+/**
+ * Odometer web component for animated number display
+ *
+ * @element bl-odometer
+ * @attr {number} value - Current value to display
+ * @attr {number} max - Maximum value before showing "+"
+ * @fires change - Fired when value changes
+ * @cssprop --bl-odometer-duration - Transition duration for number animation (default: 0.4s)
+ */
+declare class Odometer extends HTMLElement {
+    private wrapper;
+    private _initialized;
+    private _resetTimer;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    private setup;
+    private rebuildNumbers;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private updateValue;
+    private clearResetTimer;
+    private scheduleResetChange;
+    private applyChangeState;
+    set value(value: number);
+    get value(): number;
+    set max(value: number);
+    get max(): number;
+}
+export { Odometer };
+export default Odometer;

package/dist/js/odometer.js

@@ -1,6 +1,15 @@
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Odometer web component for animated number display
+ *
+ * @element bl-odometer
+ * @attr {number} value - Current value to display
+ * @attr {number} max - Maximum value before showing "+"
+ * @fires change - Fired when value changes
+ * @cssprop --bl-odometer-duration - Transition duration for number animation (default: 0.4s)
+ */
 class Odometer extends HTMLElement {
   static get observedAttributes() {
     return ["value", "max"];
@@ -8,6 +17,7 @@ class Odometer extends HTMLElement {
   constructor() {
     super();
     _defineProperty(this, "_initialized", false);
+    _defineProperty(this, "_resetTimer", null);
     this.attachShadow({
       mode: "open"
     });
@@ -22,7 +32,7 @@ class Odometer extends HTMLElement {
   }
   setup() {
     const style = document.createElement("style");
-    style.textContent = /* CSS */"\n        :host {\n          display: inline-flex;\n          min-width: 1em;\n          height: 1em;\n          text-align: center;\n          overflow: hidden;\n          line-height: 1em;\n          transition: background-color 0.3s;\n        }\n        .numbers {\n          display: flex;\n          flex-direction: column;\n          transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n        .numbers span {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          height: 1em;\n        }";
+    style.textContent = /* CSS */"\n        :host {\n          display: inline-flex;\n          min-width: 1em;\n          height: 1em;\n          text-align: center;\n          overflow: hidden;\n          line-height: 1em;\n        }\n        .numbers {\n          display: flex;\n          flex-direction: column;\n          transition: transform var(--bl-odometer-duration, 0.4s) cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n        .numbers span {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          height: 1em;\n        }";
     const wrapper = document.createElement("span");
     wrapper.classList.add("numbers");
     wrapper.setAttribute("aria-hidden", "true");
@@ -50,7 +60,10 @@ class Odometer extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     if (newValue !== oldValue && this._initialized) {
       if (name === "value") {
-        this.updateValue(parseInt(newValue !== null && newValue !== void 0 ? newValue : "0", 10));
+        const prev = parseInt(oldValue !== null && oldValue !== void 0 ? oldValue : "0", 10) || 0;
+        const next = parseInt(newValue !== null && newValue !== void 0 ? newValue : "0", 10) || 0;
+        this.applyChangeState(prev, next);
+        this.updateValue(next);
       } else if (name === "max") {
         this.rebuildNumbers();
       }
@@ -64,12 +77,34 @@ class Odometer extends HTMLElement {
     const displayValue = value > max ? "".concat(max, "+") : "".concat(value);
     this.setAttribute("aria-label", displayValue);
   }
+  clearResetTimer() {
+    if (this._resetTimer !== null) {
+      clearTimeout(this._resetTimer);
+      this._resetTimer = null;
+    }
+  }
+  scheduleResetChange() {
+    this.clearResetTimer();
+    const delay = 3000;
+    this._resetTimer = window.setTimeout(() => {
+      this.removeAttribute("data-change");
+      this._resetTimer = null;
+    }, delay);
+  }
+  applyChangeState(previous, next) {
+    if (next > previous) {
+      this.setAttribute("data-change", "up");
+      this.scheduleResetChange();
+    } else if (next < previous) {
+      this.setAttribute("data-change", "down");
+      this.scheduleResetChange();
+    }
+  }
   set value(value) {
     const current = this.value;
     if (current !== value) {
       this.setAttribute("value", String(value));
       if (this._initialized) {
-        this.updateValue(value);
         this.dispatchEvent(new CustomEvent("change", {
           detail: {
             value

package/dist/js/progress.d.ts

@@ -1,2 +1,2 @@
-declare const _default: any;
-export default _default;
+declare const _default: any;
+export default _default;

package/dist/js/read-view.d.ts

@@ -1,35 +1,35 @@
-/**
- * A Web Component that displays a read view of its content and allows the user to switch to an edit view.
- * Fires event "EditRequested" when the user clicks the read view.
- * @element read-view
- * @fires EditRequested
- * @attr {boolean} disabled - Disables the component, preventing interactions and removing hover effects.
- * @cssprop --bs-primary-rgb - The primary color as an RGB value.
- * @cssprop --bs-secondary-bg-subtle - The subtle background color for the read view.
- * @cssprop --bs-border-radius-sm - The border radius for the read view.
- * @slot - The content to display in the read view.
- * @example
- * <bl-read-view id="my-read-view" onEditRequested="setEditing(true)">
- *    <a href="#">bla</a> {value}
- * </bl-read-view>
- * @example
- * document.getElementById("my-read-view").addEventListener("EditRequested", () => {
- *    setEditing(true)
- * })
- */
-export declare class ReadView extends HTMLElement {
-    private button;
-    private container;
-    private startX;
-    private startY;
-    constructor();
-    static get observedAttributes(): string[];
-    connectedCallback(): void;
-    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
-    private render;
-    private updateDisabledState;
-    private onEditRequested;
-    private onMouseDown;
-    private mouseHasMovedAfterMouseDown;
-    private onReadViewClick;
-}
+/**
+ * A Web Component that displays a read view of its content and allows the user to switch to an edit view.
+ * Fires event "EditRequested" when the user clicks the read view.
+ * @element read-view
+ * @fires EditRequested
+ * @attr {boolean} disabled - Disables the component, preventing interactions and removing hover effects.
+ * @cssprop --bs-primary-rgb - The primary color as an RGB value.
+ * @cssprop --bs-secondary-bg-subtle - The subtle background color for the read view.
+ * @cssprop --bs-border-radius-sm - The border radius for the read view.
+ * @slot - The content to display in the read view.
+ * @example
+ * <bl-read-view id="my-read-view" onEditRequested="setEditing(true)">
+ *    <a href="#">bla</a> {value}
+ * </bl-read-view>
+ * @example
+ * document.getElementById("my-read-view").addEventListener("EditRequested", () => {
+ *    setEditing(true)
+ * })
+ */
+export declare class ReadView extends HTMLElement {
+    private button;
+    private container;
+    private startX;
+    private startY;
+    constructor();
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private render;
+    private updateDisabledState;
+    private onEditRequested;
+    private onMouseDown;
+    private mouseHasMovedAfterMouseDown;
+    private onReadViewClick;
+}

package/dist/js/read-view.js

@@ -3,24 +3,24 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const DRAG_THRESHOLD = 5;
 
-/**
- * A Web Component that displays a read view of its content and allows the user to switch to an edit view.
- * Fires event "EditRequested" when the user clicks the read view.
- * @element read-view
- * @fires EditRequested
- * @attr {boolean} disabled - Disables the component, preventing interactions and removing hover effects.
- * @cssprop --bs-primary-rgb - The primary color as an RGB value.
- * @cssprop --bs-secondary-bg-subtle - The subtle background color for the read view.
- * @cssprop --bs-border-radius-sm - The border radius for the read view.
- * @slot - The content to display in the read view.
- * @example
- * <bl-read-view id="my-read-view" onEditRequested="setEditing(true)">
- *    <a href="#">bla</a> {value}
- * </bl-read-view>
- * @example
- * document.getElementById("my-read-view").addEventListener("EditRequested", () => {
- *    setEditing(true)
- * })
+/**
+ * A Web Component that displays a read view of its content and allows the user to switch to an edit view.
+ * Fires event "EditRequested" when the user clicks the read view.
+ * @element read-view
+ * @fires EditRequested
+ * @attr {boolean} disabled - Disables the component, preventing interactions and removing hover effects.
+ * @cssprop --bs-primary-rgb - The primary color as an RGB value.
+ * @cssprop --bs-secondary-bg-subtle - The subtle background color for the read view.
+ * @cssprop --bs-border-radius-sm - The border radius for the read view.
+ * @slot - The content to display in the read view.
+ * @example
+ * <bl-read-view id="my-read-view" onEditRequested="setEditing(true)">
+ *    <a href="#">bla</a> {value}
+ * </bl-read-view>
+ * @example
+ * document.getElementById("my-read-view").addEventListener("EditRequested", () => {
+ *    setEditing(true)
+ * })
  */
 export class ReadView extends HTMLElement {
   constructor() {

package/dist/js/select-list.d.ts

@@ -1,46 +1,46 @@
-declare class BlSelectEvent extends Event {
-    static readonly eventName = "bl-select";
-    readonly index: number;
-    readonly item: HTMLElement;
-    constructor(index: number, item: HTMLElement);
-}
-/**
- * A Web Component that provides a keyboard-accessible selectable list, typically used for dropdowns or autocomplete lists.
- * Together with `popover` and CSS Anchoring, it's also useful to create a dropdown list.
- * Supports keyboard navigation and selection, and integrates with an input element for combobox behavior.
- *
- * The Web Component will automatically set attributes for accessibility.
- *
- * @element bl-select-list
- * @attr {string} for - The id of the input element to associate as the combobox controller.
- * @attr {string} active-class - The CSS class name to apply to the active item (default: "active").
- * @slot - The list options.
- * @example
- * <input id="my-input" />
- * <bl-select-list for="my-input">
- *   <div>Option 1</div>
- *   <div>Option 2</div>
- * </bl-select-list>
- */
-declare class SelectList extends HTMLElement {
-    activeIndex: number;
-    items: HTMLElement[];
-    inputElement: HTMLElement | null;
-    slotElement: HTMLSlotElement | null;
-    observer: MutationObserver | null;
-    constructor();
-    get activeClass(): string;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    handleChildrenChanged: () => void;
-    syncActiveIndexFromDataSelected(): void;
-    updateItems(): void;
-    onKeyDown(e: {
-        key: string;
-        preventDefault: () => void;
-    }): void;
-    updateActiveItem(): void;
-    select(index: number): void;
-}
-export { SelectList, BlSelectEvent };
-export default SelectList;
+declare class BlSelectEvent extends Event {
+    static readonly eventName = "bl-select";
+    readonly index: number;
+    readonly item: HTMLElement;
+    constructor(index: number, item: HTMLElement);
+}
+/**
+ * A Web Component that provides a keyboard-accessible selectable list, typically used for dropdowns or autocomplete lists.
+ * Together with `popover` and CSS Anchoring, it's also useful to create a dropdown list.
+ * Supports keyboard navigation and selection, and integrates with an input element for combobox behavior.
+ *
+ * The Web Component will automatically set attributes for accessibility.
+ *
+ * @element bl-select-list
+ * @attr {string} for - The id of the input element to associate as the combobox controller.
+ * @attr {string} active-class - The CSS class name to apply to the active item (default: "active").
+ * @slot - The list options.
+ * @example
+ * <input id="my-input" />
+ * <bl-select-list for="my-input">
+ *   <div>Option 1</div>
+ *   <div>Option 2</div>
+ * </bl-select-list>
+ */
+declare class SelectList extends HTMLElement {
+    activeIndex: number;
+    items: HTMLElement[];
+    inputElement: HTMLElement | null;
+    slotElement: HTMLSlotElement | null;
+    observer: MutationObserver | null;
+    constructor();
+    get activeClass(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleChildrenChanged: () => void;
+    syncActiveIndexFromDataSelected(): void;
+    updateItems(): void;
+    onKeyDown(e: {
+        key: string;
+        preventDefault: () => void;
+    }): void;
+    updateActiveItem(): void;
+    select(index: number): void;
+}
+export { SelectList, BlSelectEvent };
+export default SelectList;

package/dist/js/select-list.js

@@ -12,23 +12,23 @@ class BlSelectEvent extends Event {
   }
 }
 
-/**
- * A Web Component that provides a keyboard-accessible selectable list, typically used for dropdowns or autocomplete lists.
- * Together with `popover` and CSS Anchoring, it's also useful to create a dropdown list.
- * Supports keyboard navigation and selection, and integrates with an input element for combobox behavior.
- *
- * The Web Component will automatically set attributes for accessibility.
- *
- * @element bl-select-list
- * @attr {string} for - The id of the input element to associate as the combobox controller.
- * @attr {string} active-class - The CSS class name to apply to the active item (default: "active").
- * @slot - The list options.
- * @example
- * <input id="my-input" />
- * <bl-select-list for="my-input">
- *   <div>Option 1</div>
- *   <div>Option 2</div>
- * </bl-select-list>
+/**
+ * A Web Component that provides a keyboard-accessible selectable list, typically used for dropdowns or autocomplete lists.
+ * Together with `popover` and CSS Anchoring, it's also useful to create a dropdown list.
+ * Supports keyboard navigation and selection, and integrates with an input element for combobox behavior.
+ *
+ * The Web Component will automatically set attributes for accessibility.
+ *
+ * @element bl-select-list
+ * @attr {string} for - The id of the input element to associate as the combobox controller.
+ * @attr {string} active-class - The CSS class name to apply to the active item (default: "active").
+ * @slot - The list options.
+ * @example
+ * <input id="my-input" />
+ * <bl-select-list for="my-input">
+ *   <div>Option 1</div>
+ *   <div>Option 2</div>
+ * </bl-select-list>
  */
 _defineProperty(BlSelectEvent, "eventName", "bl-select");
 class SelectList extends HTMLElement {

package/dist/js/shared.d.ts

@@ -1,14 +1,14 @@
-export type breakOption = "sm" | "md" | "lg" | "xl";
-export type StatusType = null | "loading" | "success" | "info" | "warning" | "danger";
-export interface StatusAlert {
-    title?: string;
-    alertClassName?: string;
-    close?: boolean;
-    detailText?: string;
-    status?: StatusType;
-}
-interface Phrases {
-    [key: string]: string[];
-}
-export declare function getPhrase(keyword: string, countryCode?: string | undefined, _phrases?: Phrases | undefined): string;
-export {};
+export type breakOption = "sm" | "md" | "lg" | "xl";
+export type StatusType = null | "loading" | "success" | "info" | "warning" | "danger";
+export interface StatusAlert {
+    title?: string;
+    alertClassName?: string;
+    close?: boolean;
+    detailText?: string;
+    status?: StatusType;
+}
+interface Phrases {
+    [key: string]: string[];
+}
+export declare function getPhrase(keyword: string, countryCode?: string | undefined, _phrases?: Phrases | undefined): string;
+export {};

package/dist/js/side-layout.d.ts

@@ -1,7 +1,7 @@
-export declare class SideLayout extends HTMLElement {
-    constructor();
-    connectedCallback(): void;
-    render(): void;
-    addEventListeners(): void;
-    handleLayoutExpandChange(event: Event): void;
-}
+export declare class SideLayout extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    render(): void;
+    addEventListeners(): void;
+    handleLayoutExpandChange(event: Event): void;
+}

package/dist/js/utils.d.ts

@@ -1,18 +1,18 @@
-import { StatusType } from "./shared";
-export declare function startLoading(): void;
-export declare function finishLoading(): void;
-export declare function showSuccess(): void;
-export declare function hideSuccess(): void;
-/**
- * Resets alert messages that was set with `setAlertMessage`.
- * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v9/component/StatusProvider
- * @param alertClassName Leave empty to reset messages of any status type
- */
-export declare function resetAlertMessage(alertClassName?: StatusType): void;
-/**
- * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v9/component/StatusProvider
- */
-export declare function setAlertMessage(message: string, alertClassName?: StatusType, close?: boolean, detailText?: string): void;
-export declare const guid: () => string;
-export declare function scrollToTop(): void;
-export declare function fetchData(input: RequestInfo | URL, init?: RequestInit | undefined, showErrorDetail?: boolean | undefined, onError?: (errorMessage: string, reason: Response) => void): Promise<Response>;
+import { StatusType } from "./shared";
+export declare function startLoading(): void;
+export declare function finishLoading(): void;
+export declare function showSuccess(): void;
+export declare function hideSuccess(): void;
+/**
+ * Resets alert messages that was set with `setAlertMessage`.
+ * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v9/component/StatusProvider
+ * @param alertClassName Leave empty to reset messages of any status type
+ */
+export declare function resetAlertMessage(alertClassName?: StatusType): void;
+/**
+ * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v9/component/StatusProvider
+ */
+export declare function setAlertMessage(message: string, alertClassName?: StatusType, close?: boolean, detailText?: string): void;
+export declare const guid: () => string;
+export declare function scrollToTop(): void;
+export declare function fetchData(input: RequestInfo | URL, init?: RequestInit | undefined, showErrorDetail?: boolean | undefined, onError?: (errorMessage: string, reason: Response) => void): Promise<Response>;

package/dist/js/utils.js

@@ -15,10 +15,10 @@ export function hideSuccess() {
   document.querySelector(".blue-status-success").style.display = "";
 }
 
-/**
- * Resets alert messages that was set with `setAlertMessage`.
- * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v9/component/StatusProvider
- * @param alertClassName Leave empty to reset messages of any status type
+/**
+ * Resets alert messages that was set with `setAlertMessage`.
+ * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v9/component/StatusProvider
+ * @param alertClassName Leave empty to reset messages of any status type
  */
 export function resetAlertMessage(alertClassName) {
   if (!alertClassName) {
@@ -37,8 +37,8 @@ export function resetAlertMessage(alertClassName) {
   }
 }
 
-/**
- * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v9/component/StatusProvider
+/**
+ * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v9/component/StatusProvider
  */
 export function setAlertMessage(message) {
   let alertClassName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "info";