@orangelogic/design-system 2.44.0 → 2.45.0

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.44.0",
+  "version": "2.45.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/atoms/src/components/range/mark-controller.d.ts

@@ -0,0 +1,34 @@
+import { Mark } from '../../../../types/src/range';
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { default as CxRange } from './range';
+
+/** A reactive controller to manage the rendering of marks for the range component. */
+export declare class MarkController implements ReactiveController {
+    private readonly host;
+    private readonly localize;
+    private readonly marksContainerRef;
+    private containerWidth;
+    private marksWithLabels;
+    constructor(host: ReactiveControllerHost & CxRange);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    /**
+     * Gets all mark elements from the datalist slot.
+     * @returns NodeList of option elements or null
+     */
+    getAllMarks(): NodeListOf<HTMLElement> | undefined;
+    /**
+     * Initializes marks based on the datalist slot or auto-generates them from step.
+     * @returns Array of valid mark objects
+     */
+    initMarks(): Mark[];
+    renderMark(mark: Mark): import('lit').TemplateResult<1>;
+    /**
+     * Calculates which marks should display labels based on available width.
+     * Uses a minimum spacing between labels to prevent overcrowding.
+     */
+    private calculateVisibleLabels;
+    handleResize(): void;
+    renderMarks(): import('lit').TemplateResult<1>;
+}

package/library/packages/atoms/src/components/range/range.d.ts

@@ -1,12 +1,9 @@
+import { default as CxResizeObserver } from '../resize-observer/resize-observer.ts';
 import { CortexFormControl, default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { Mark } from '../../../../types/src/range';
 import { CSSResultGroup } from 'lit';
 import { default as CxTooltip } from '../tooltip/tooltip';
 
-type Mark = {
-    hidden: boolean;
-    label: string;
-    value: number;
-};
 /**
  * @summary Ranges allow the user to select a single value or a range of values using a slider.
  *
@@ -49,11 +46,13 @@ type Mark = {
 export default class CxRange extends CortexElement implements CortexFormControl {
     static readonly styles: CSSResultGroup;
     static readonly dependencies: {
+        'cx-resize-observer': typeof CxResizeObserver;
         'cx-tooltip': typeof CxTooltip;
     };
     private readonly formControlController;
     private readonly hasSlotController;
     private readonly localize;
+    private readonly markController;
     private resizeObserver;
     input: HTMLInputElement;
     multiInputMin: HTMLInputElement;
@@ -102,6 +101,8 @@ export default class CxRange extends CortexElement implements CortexFormControl
     max: number;
     /** The interval at which the range will increase and decrease. */
     step: number | undefined;
+    /** The minimum spacing between marks labels. */
+    markLabelSpacing: number;
     /** The preferred placement of the range's tooltip. */
     tooltipPlacement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
     /**
@@ -254,8 +255,6 @@ export default class CxRange extends CortexElement implements CortexFormControl
     reportValidity(): boolean;
     /** Sets a custom validation message. Pass an empty string to restore validity. */
     setCustomValidity(message: string): void;
-    getAllMarks(): NodeListOf<HTMLElement> | undefined;
-    renderMarks(): import('lit').TemplateResult<1>[];
     private handleMultiResize;
     private multiValueToPercent;
     private multiPercentToValue;
@@ -284,4 +283,3 @@ declare global {
         'cx-range': CxRange;
     }
 }
-export {};

package/library/packages/atoms/src/components/range/range.utils.d.ts

@@ -1,4 +1,5 @@
-export type ThumbEdgeMode = 'center' | 'inside';
+import { Mark, ThumbEdgeMode } from '../../../../types/src/range';
+
 export type ThumbConstraints = {
     /**
      * Max thumb's maxLeft constraint (can't go outside right edge).
@@ -46,3 +47,59 @@ export declare function getMultiThumbConstraints({ edgeMode, maxOffset, minOffse
     minOffset: number;
     percentValue: number;
 }): ThumbConstraints;
+/**
+ * Converts a value to a percentage based on min and max range.
+ * @param value - The value to convert
+ * @param min - Minimum value of the range
+ * @param max - Maximum value of the range
+ * @returns Percentage value (0-100)
+ */
+export declare function valueToPercentage(value: number, min: number, max: number): number;
+/**
+ * Filters out hidden marks from the marks array.
+ * @param marks - Array of marks to filter
+ * @returns Array of visible marks
+ */
+export declare function filterVisibleMarks(marks: Mark[]): Mark[];
+/**
+ * Calculates the maximum number of labels that can fit in the available width.
+ * @param width - Container width in pixels
+ * @param spacing - Minimum spacing between labels in pixels
+ * @returns Maximum number of labels that can fit
+ */
+export declare function calculateMaxLabels(width: number, spacing: number): number;
+/**
+ * Calculates the step size for distributing labels evenly between first and last marks.
+ * @param totalMarks - Total number of visible marks
+ * @param remainingLabels - Number of labels to distribute (excluding first and last)
+ * @returns Step size for label distribution
+ */
+export declare function calculateLabelStep(totalMarks: number, remainingLabels: number): number;
+/**
+ * Calculates the minimum spacing between labels as a percentage of container width.
+ * @param spacing - Minimum spacing in pixels
+ * @param width - Container width in pixels
+ * @returns Minimum spacing as a percentage (0-100)
+ */
+export declare function calculateMinSpacingPercentage(spacing: number, width: number): number;
+/**
+ * Checks if a mark position is far enough from both first and last positions.
+ * @param markPosition - Position of the mark as a percentage
+ * @param firstPosition - Position of the first mark as a percentage
+ * @param lastPosition - Position of the last mark as a percentage
+ * @param minSpacingPercentage - Minimum spacing required as a percentage
+ * @returns True if the mark is far enough from both boundaries
+ */
+export declare function isMarkFarEnoughFromBoundaries(markPosition: number, firstPosition: number, lastPosition: number, minSpacingPercentage: number): boolean;
+/**
+ * Calculates which marks should display labels based on available width.
+ * Uses a minimum spacing between labels to prevent overcrowding.
+ *
+ * @param marks - Array of all marks
+ * @param width - Container width in pixels
+ * @param spacing - Minimum spacing between labels in pixels
+ * @param min - Minimum value of the range
+ * @param max - Maximum value of the range
+ * @returns Set of mark values that should display labels
+ */
+export declare function calculateVisibleLabelValues(marks: Mark[], width: number, spacing: number, min: number, max: number): Set<number>;

package/library/packages/organisms/src/downloader/downloader.d.ts

@@ -164,6 +164,7 @@ export default class CxDownloader extends CortexElement {
     }): void;
     handleFullscreenChange(): void;
     handleWindowResize(): void;
+    private handleRangePointerStart;
     handleDrag(event: PointerEvent): void;
     hide(): void;
     show(): void;

package/library/packages/tools/src/fetch-image/fetch-image.d.ts

@@ -4,12 +4,16 @@ import { ReactiveController, ReactiveElement } from 'lit';
 export type ExtendedGalleryItem = GalleryItem & {
     [key: string]: string | undefined;
 };
+type FetchImageControllerOptions = {
+    maxEnd?: number;
+};
 export declare class FetchImageController implements ReactiveController {
     private readonly host;
     private data;
     private folderId;
     private totalCount;
-    constructor(host: ReactiveElement);
+    private maxEnd;
+    constructor(host: ReactiveElement, options?: FetchImageControllerOptions);
     get totalDataCount(): number;
     fetchImages({ end, extraFields, start, }: {
         end: number;
@@ -47,3 +51,4 @@ export declare class FetchImageController implements ReactiveController {
     hostConnected?(): void;
     hostDisconnected?(): void;
 }
+export {};

package/library/react-web-component.d.ts

@@ -3544,6 +3544,10 @@
           * The interval at which the range will increase and decrease.
         */
         step?: number;
+        /**
+          * The minimum spacing between marks labels.
+        */
+        markLabelSpacing?: number;
         /**
           * The preferred placement of the range's tooltip.
         */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.44.0",
+  "version": "2.45.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {