@design-factory/core 21.1.0-next.1

package/components/rating/rating.d.ts

@@ -0,0 +1,191 @@
+import type { Directive, Widget, WidgetFactory } from '../../types';
+import type { WidgetsCommonPropsAndState } from '../commonProps';
+/**
+ * Represents the context for a star in a rating component.
+ */
+export interface StarContext {
+    /**
+     * indicates how much the current star is filled, from 0 to 100
+     */
+    fill: number;
+    /**
+     * the position of the star in the rating
+     */
+    index: number;
+}
+interface RatingCommonPropsAndState extends WidgetsCommonPropsAndState {
+    /**
+     * The current rating. Could be a decimal value like `3.75`.
+     *
+     * @defaultValue `0`
+     */
+    rating: number;
+    /**
+     * The maximum rating that can be given.
+     *
+     * @defaultValue `10`
+     */
+    maxRating: number;
+    /**
+     * If `true`, the rating is disabled.
+     *
+     * @defaultValue `false`
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the rating can't be changed.
+     *
+     * @defaultValue `false`
+     */
+    readonly: boolean;
+    /**
+     * Define if the rating can be reset.
+     *
+     * If set to true, the user can 'unset' the rating value by cliking on the current rating value.
+     *
+     * @defaultValue `true`
+     */
+    resettable: boolean;
+    /**
+     * Allows setting a custom rating tabindex.
+     * If the component is disabled, `tabindex` will still be set to `-1`.
+     *
+     * @defaultValue `0`
+     */
+    tabindex: number;
+    /**
+     * The aria label
+     *
+     * @defaultValue `'Rating'`
+     */
+    ariaLabel: string;
+    /**
+     * The aria labelled by
+     *
+     * @defaultValue `''`
+     */
+    ariaLabelledBy: string;
+}
+/**
+ * Interface representing the properties for the Rating widget.
+ */
+export interface RatingProps extends RatingCommonPropsAndState {
+    /**
+     * Return the value for the 'aria-valuetext' attribute.
+     * @param rating - Current rating value.
+     * @param maxRating - maxRating value.
+     *
+     * @defaultValue
+     * ```ts
+     * (rating: number, maxRating: number) => `${rating} out of ${maxRating}`
+     * ```
+     */
+    ariaValueTextFn: (rating: number, maxRating: number) => string;
+    /**
+     * An event emitted when the rating is changed.
+     *
+     * Event payload is equal to the newly selected rating.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onRatingChange: (rating: number) => void;
+    /**
+     * An event emitted when the user is hovering over a given rating.
+     *
+     * Event payload is equal to the rating being hovered over.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onHover: (rating: number) => void;
+    /**
+     * An event emitted when the user stops hovering over a given rating.
+     *
+     * Event payload is equal to the rating of the last item being hovered over.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onLeave: (rating: number) => void;
+}
+/**
+ * Interface representing directives for a rating component.
+ */
+export interface RatingDirectives {
+    /**
+     * A directive to be applied to the main container
+     * This will handle the keydown, mouseleave, tabindex and aria attributes
+     */
+    containerDirective: Directive;
+    /**
+     * A directive to be applied on each star element
+     */
+    starDirective: Directive<{
+        index: number;
+    }>;
+}
+/**
+ * Represents the state of a rating component.
+ */
+export interface RatingState extends RatingCommonPropsAndState {
+    /**
+     * the aria value of the rating
+     */
+    ariaValueText: string;
+    /**
+     * the visible value of the rating (it changes when hovering over the rating even though the real value did not change)
+     */
+    visibleRating: number;
+    /**
+     * is the rating interactive i.e. listening to hover, click and keyboard events
+     */
+    interactive: boolean;
+    /**
+     * the list of stars
+     */
+    stars: StarContext[];
+}
+/**
+ * Interface representing the API that can be performed on a rating component.
+ */
+export interface RatingApi {
+    /**
+     * Sets the rating value.
+     *
+     * @param index - Star index, starting from 1
+     */
+    setRating(index: number): void;
+    /**
+     * Sets the hovered rating value.
+     *
+     * @param index - Star index, starting from 1
+     */
+    setHoveredRating(index: number): void;
+    /**
+     * Leave the rating, resetting the visible rating to the rating value and triggering the onLeave callback
+     */
+    leave(): void;
+}
+/**
+ * Represents a Rating widget.
+ */
+export type RatingWidget = Widget<RatingProps, RatingState, RatingApi, RatingDirectives>;
+/**
+ * Returns a shallow copy of the default rating config.
+ * @returns a copy of the default config
+ */
+export declare function getRatingDefaultConfig(): RatingProps;
+/**
+ * Create a RatingWidget with given config props
+ * @param config - an optional alert config
+ * @returns a RatingWidget
+ */
+export declare const createRating: WidgetFactory<RatingWidget>;
+export {};

package/components/slider/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const slider = require("../../slider-pgDq1V5r.cjs");
+exports.createSlider = slider.createSlider;
+exports.getSliderDefaultConfig = slider.getSliderDefaultConfig;

package/components/slider/index.d.ts

@@ -0,0 +1 @@
+export * from './slider';

package/components/slider/index.js

@@ -0,0 +1,5 @@
+import { c, g } from "../../slider-Br_Qiopx.js";
+export {
+  c as createSlider,
+  g as getSliderDefaultConfig
+};

package/components/slider/slider-utils.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Manages minimum and maximum range constraints for values in an array by adjusting adjacent values.
+ *
+ * This function ensures that the value at the specified index maintains proper minimum and maximum
+ * distance constraints with its neighboring values. It pushes adjacent handles when necessary to
+ * maintain the required range constraints.
+ *
+ * @param values - Array of numeric values to be managed (typically slider handle positions)
+ * @param index - Index of the value in the array that serves as the reference point
+ * @param minRange - Minimum allowed distance between adjacent values
+ * @param maxRange - Maximum allowed distance between adjacent values
+ * @param min - Minimum boundary of the slider
+ * @param max - Maximum boundary of the slider
+ * @param pushRange - Whether to enable pushing of adjacent values to maintain range constraints
+ *
+ * @returns The modified values array with range constraints applied
+ *
+ * @example
+ * ```typescript
+ * const values = [10, 20, 30, 40];
+ * const result = manageMinMaxRange(values, 1, 5, 15, 0, 50, true);
+ * // Result ensures value at index 1 maintains 5-15 unit distance from neighbors
+ * ```
+ */
+export declare const manageMinMaxRange: (values: number[], index: number, minRange: number, maxRange: number, min: number, max: number, pushRange: boolean) => number[];

package/components/slider/slider.d.ts

@@ -0,0 +1,383 @@
+import type { WidgetsCommonPropsAndState } from '../commonProps';
+import type { Directive, Widget, WidgetFactory } from '../../types';
+/**
+ * Options for displaying progress in a slider component.
+ */
+export interface ProgressDisplayOptions {
+    /**
+     * Right offset of the progress in %
+     */
+    left: number | null;
+    /**
+     * Left offset of the progress in %
+     */
+    right: number | null;
+    /**
+     * Top offset of the progress in %
+     */
+    top: number | null;
+    /**
+     * Bottom offset of the progress in %
+     */
+    bottom: number | null;
+    /**
+     * Width of the progress in %
+     */
+    width: number;
+    /**
+     * Height of the progress in %
+     */
+    height: number;
+    /**
+     * Id of the progress
+     */
+    id: number;
+}
+/**
+ * Options for displaying a handle in a slider component.
+ */
+export interface HandleDisplayOptions {
+    /**
+     * Left offset of the handle in %
+     */
+    left: number | null;
+    /**
+     * Top offset of the handle in %
+     */
+    top: number | null;
+}
+/**
+ * Represents a handle in a slider component.
+ */
+export interface SliderHandle {
+    /**
+     * Value of the handle
+     */
+    value: number;
+    /**
+     * Handle id
+     */
+    id: number;
+    /**
+     * ariaLabel of the handle
+     */
+    ariaLabel: string | undefined;
+    /**
+     * ariaValueText of the handle
+     */
+    ariaValueText: string | undefined;
+    /**
+     * aria-labelledBy of the handle
+     */
+    ariaLabelledBy: string | undefined;
+}
+/**
+ * Represents a tick in a slider component.
+ */
+export interface SliderTick {
+    /**
+     * CSS classes to be applied on the tick
+     */
+    className?: string | null;
+    /**
+     * Visualized optional explanation of the label
+     */
+    legend?: string | null;
+    /**
+     * Position of the tick in percent
+     */
+    position: number;
+    /**
+     * If `true` the tick has selected style
+     */
+    selected: boolean;
+    /**
+     * Value of the tick
+     */
+    value: number;
+    /**
+     * If `true` the tick label is displayed
+     */
+    displayLabel: boolean;
+}
+interface SliderCommonPropsAndState extends WidgetsCommonPropsAndState {
+    /**
+     * Minimum value that can be assigned to the slider
+     *
+     * @defaultValue `0`
+     */
+    min: number;
+    /**
+     * Maximum value that can be assigned to the slider
+     *
+     * @defaultValue `100`
+     */
+    max: number;
+    /**
+     * Unit value between slider steps
+     *
+     * @defaultValue `1`
+     */
+    stepSize: number;
+    /**
+     * If `true` slider value cannot be changed but the slider is still focusable
+     *
+     * @defaultValue `false`
+     */
+    readonly: boolean;
+    /**
+     * If `true` slider value cannot be changed and the slider cannot be focused
+     *
+     * @defaultValue `false`
+     */
+    disabled: boolean;
+    /**
+     * If `true` is vertically positioned otherwise it is horizontal
+     *
+     * @defaultValue `false`
+     */
+    vertical: boolean;
+    /**
+     * Current slider values
+     *
+     * @defaultValue `[0]`
+     */
+    values: number[];
+    /**
+     * If `true` the value labels are displayed on the slider
+     *
+     * @defaultValue `true`
+     */
+    showValueLabels: boolean;
+    /**
+     * If `true` the min and max labels are displayed on the slider
+     *
+     * @defaultValue `true`
+     */
+    showMinMaxLabels: boolean;
+    /**
+     * If `true` the ticks are displayed on the slider
+     *
+     * @defaultValue `false`
+     */
+    showTicks: boolean;
+    /**
+     * It `true` slider display is inversed
+     *
+     * @defaultValue `false`
+     */
+    rtl: boolean;
+}
+/**
+ * Represents the state of a slider component.
+ */
+export interface SliderState extends SliderCommonPropsAndState {
+    /**
+     * Sorted slider values
+     */
+    sortedValues: number[];
+    /**
+     * Combined label left offset in %
+     */
+    combinedLabelPositionLeft: number;
+    /**
+     * Combined label top offset in %
+     */
+    combinedLabelPositionTop: number;
+    /**
+     * If true, the minimum label will be visible
+     */
+    minValueLabelDisplay: boolean;
+    /**
+     * If true, the maximum label will be visible
+     */
+    maxValueLabelDisplay: boolean;
+    /**
+     * If true, the label when the handles are close is visible
+     */
+    combinedLabelDisplay: boolean;
+    /**
+     * Array of the sorted handles to display
+     */
+    sortedHandles: SliderHandle[];
+    /**
+     * Array of objects representing progress display options
+     */
+    progressDisplayOptions: ProgressDisplayOptions[];
+    /**
+     * Array of objects representing handle display options
+     */
+    handleDisplayOptions: HandleDisplayOptions[];
+    /**
+     * Check if the slider is interactive, meaning it is not disabled or readonly
+     */
+    interactive: boolean;
+    /**
+     * Array of ticks to display on the slider component
+     */
+    ticks: SliderTick[];
+}
+/**
+ * Interface representing the properties for the Slider component.
+ */
+export interface SliderProps extends SliderCommonPropsAndState {
+    /**
+     * Return the value for the 'aria-label' attribute for the handle
+     * @param sortedIndex - index of the handle in the sorted list
+     *
+     * @defaultValue
+     * ```ts
+     * () => 'Value'
+     * ```
+     */
+    ariaLabel: (sortedIndex: number) => string;
+    /**
+     * Return the value for the 'aria-labelledBy' attribute for the handle
+     * @param sortedIndex - index of the handle in the sorted list
+     *
+     * @defaultValue
+     * ```ts
+     * () => ''
+     * ```
+     */
+    ariaLabelledBy: (sortedIndex: number) => string;
+    /**
+     * Return the value for the 'aria-valuetext' attribute for the handle
+     * @param value - value of the handle
+     * @param sortedIndex - index of the handle in the sorted list
+     *
+     * @defaultValue
+     * ```ts
+     * () => ''
+     * ```
+     */
+    ariaValueText: (value: number, sortedIndex: number) => string;
+    /**
+     * An event emitted when slider values are changed
+     *
+     * Event payload equals to the updated slider values
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onValuesChange: (values: number[]) => void;
+    /**
+     * Unit value between the ticks
+     * If value is set to `0` the {@link stepSize} is used to space the ticks
+     *
+     * @defaultValue `0`
+     */
+    tickInterval: number;
+    /**
+     * If `true` the tick values are displayed on the slider
+     *
+     * @defaultValue `true`
+     */
+    showTickValues: boolean;
+    /**
+     * Minimum distance between two values.
+     * When set to 0, no minimum distance constraint is applied.
+     *
+     * @defaultValue `0`
+     */
+    minRange: number;
+    /**
+     * Maximum distance between two values
+     * When set to 0, no maximum distance constraint is applied.
+     *
+     * @defaultValue `0`
+     */
+    maxRange: number;
+    /**
+     * When true, if moving a value would break the minRange or maxRange constraint,
+     * it will instead push or pull the neighboring values to keep the allowed range rather than just stopping.
+     *
+     * @defaultValue `false`
+     */
+    pushRange: boolean;
+}
+/**
+ * Interface representing various directives used in the slider component.
+ */
+export interface SliderDirectives {
+    /**
+     * Directive to get the slider component elementRef
+     */
+    sliderDirective: Directive;
+    /**
+     * Directive to apply to the slider container wrapping the slider content
+     */
+    containerDirective: Directive;
+    /**
+     * Directive used to style the progress display for each handle
+     */
+    progressDisplayDirective: Directive<{
+        option: ProgressDisplayOptions;
+    }>;
+    /**
+     * Directive to apply to the slider clickable area, to directly move the handle to a given specific position
+     */
+    clickableAreaDirective: Directive;
+    /**
+     * Directive to apply handle events handlers
+     */
+    handleEventsDirective: Directive<{
+        item: {
+            id: number;
+        };
+    }>;
+    /**
+     * Directive to apply to the slider handle if any
+     */
+    handleDirective: Directive<{
+        item: SliderHandle;
+    }>;
+    /**
+     * Directive to get the minLabel elementRef
+     */
+    minLabelDirective: Directive;
+    /**
+     * Directive to get the maxLabel elementRef
+     */
+    maxLabelDirective: Directive;
+    /**
+     * Directive to apply to the handle when combined label display is active
+     */
+    combinedHandleLabelDisplayDirective: Directive;
+    /**
+     * Directive to apply to the handle when combined label display is not active
+     */
+    handleLabelDisplayDirective: Directive<{
+        index: number;
+    }>;
+    /**
+     * Directive to apply to the slider tick
+     */
+    tickDirective: Directive<{
+        tick: SliderTick;
+    }>;
+    /**
+     * Directive to apply to the slider tick label
+     */
+    tickLabelDirective: Directive<{
+        tick: SliderTick;
+    }>;
+}
+/**
+ * Represents a slider widget component.
+ */
+export type SliderWidget = Widget<SliderProps, SliderState, object, SliderDirectives>;
+/**
+ * Returns a shallow copy of the default slider config.
+ * @returns a copy of the default config
+ */
+export declare function getSliderDefaultConfig(): SliderProps;
+/**
+ * Create a slider widget with given config props
+ * @param config - an optional slider config
+ * @returns a SliderWidget
+ */
+export declare const createSlider: WidgetFactory<SliderWidget>;
+export {};

package/components/toast/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const toaster = require("../../toaster-Dlube4Ya.cjs");
+exports.Toaster = toaster.Toaster;
+exports.createToast = toaster.createToast;
+exports.defaultToasterProps = toaster.defaultToasterProps;
+exports.getToastDefaultConfig = toaster.getToastDefaultConfig;

package/components/toast/index.d.ts

@@ -0,0 +1,2 @@
+export * from './toast';
+export * from './toaster';

package/components/toast/index.js

@@ -0,0 +1,7 @@
+import { T, c, d, g } from "../../toaster-BUBzFeJM.js";
+export {
+  T as Toaster,
+  c as createToast,
+  d as defaultToasterProps,
+  g as getToastDefaultConfig
+};

package/components/toast/toast.d.ts

@@ -0,0 +1,66 @@
+import type { Directive, Widget, WidgetFactory } from '../../types';
+import type { CommonAlertApi, CommonAlertDirectives, CommonAlertProps, CommonAlertState } from '../alert/common';
+interface ToastExtraProps {
+    /**
+     * If `true` automatically hides the toast after the delay.
+     *
+     * @defaultValue `true`
+     */
+    autoHide: boolean;
+    /**
+     * Delay in milliseconds before hiding the toast.
+     *
+     * @defaultValue `5000`
+     */
+    delay: number;
+}
+interface ExtraDirectives {
+    /**
+     * Directive that handles the autohide of the toast component
+     */
+    autoHideDirective: Directive;
+    /**
+     * Directive that adds all the necessary attributes to the body
+     */
+    bodyDirective: Directive;
+    /**
+     * Directive that adds all the necessary attributes to the close button depending on the presence of the header
+     */
+    closeButtonDirective: Directive;
+}
+/**
+ * Represents the state of a toast component.
+ */
+export interface ToastState extends CommonAlertState, ToastExtraProps {
+}
+/**
+ * Represents the properties for the toast component.
+ */
+export interface ToastProps extends CommonAlertProps, ToastExtraProps {
+}
+/**
+ * Represents the API for the toast component.
+ */
+export interface ToastApi extends CommonAlertApi {
+}
+/**
+ * Interface representing the directives for a toast component.
+ */
+export interface ToastDirectives extends CommonAlertDirectives, ExtraDirectives {
+}
+/**
+ * Represents a toast widget with specific properties, state, API, and directives.
+ */
+export type ToastWidget = Widget<ToastProps, ToastState, ToastApi, ToastDirectives>;
+/**
+ * Retrieve a shallow copy of the default toast config
+ * @returns the default toast config
+ */
+export declare function getToastDefaultConfig(): ToastProps;
+/**
+ * Create a ToastWidget with given config props
+ * @param config - an optional toast config
+ * @returns a ToastWidget
+ */
+export declare const createToast: WidgetFactory<ToastWidget>;
+export {};