@dnb/eufemia/es/components/slider/SliderInstance.js

DNB Eufemia Design System UI Library

"use client";

var _SubtractButton, _AddButton, _AlignmentHelper, _SliderThumb, _SliderTrackBefore, _SliderTrackAfter, _SliderSuffix;
import React from 'react';
import clsx from 'clsx';
import AlignmentHelper from "../../shared/AlignmentHelper.js";
import { applySpacing } from "../space/SpacingUtils.js";
import { createSkeletonClass, skeletonDOMAttributes } from "../skeleton/SkeletonHelper.js";
import Context from "../../shared/Context.js";
import Suffix from "../../shared/helpers/Suffix.js";
import Button from "../button/Button.js";
import FormLabel from "../form-label/FormLabel.js";
import FormStatus from "../form-status/FormStatus.js";
import { SliderMainTrack, SliderTrackBefore, SliderTrackAfter } from "./SliderTrack.js";
import { SliderThumb } from "./SliderThumb.js";
import { useSliderProps } from "./hooks/useSliderProps.js";
import { clamp, getFormattedNumber } from "./SliderHelpers.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function SliderInstance() {
  const context = React.useContext(Context);
  const {
    isReverse,
    isVertical,
    showButtons,
    showStatus,
    shouldAnimate,
    allProps
  } = useSliderProps();
  const {
    id,
    label,
    labelSrOnly,
    labelDirection,
    status,
    statusProps,
    statusState,
    statusNoAnimation,
    globalStatus,
    stretch,
    skeleton,
    disabled,
    className,
    extensions
  } = allProps;
  const mainParams = applySpacing(allProps, {
    className: clsx("dnb-slider dnb-form-component", createSkeletonClass(null, skeleton), className, isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', shouldAnimate && 'dnb-slider__state--animate', !showButtons && 'dnb-slider--no-buttons', stretch && 'dnb-slider--stretch', label && labelDirection && `dnb-slider__label--${labelDirection}`, showStatus && 'dnb-slider__form-status', status && `dnb-slider__status--${statusState}`)
  });
  const subtractButton = showButtons ? _SubtractButton || (_SubtractButton = _jsx(SubtractButton, {})) : null;
  const addButton = showButtons ? _AddButton || (_AddButton = _jsx(AddButton, {})) : null;
  skeletonDOMAttributes(mainParams, skeleton, context);
  return _jsxs("span", {
    ...mainParams,
    children: [label && _jsx(FormLabel, {
      forId: `${id}-thumb-0`,
      id: id + '-label',
      text: label,
      disabled: disabled,
      skeleton: skeleton,
      labelDirection: labelDirection,
      srOnly: labelSrOnly
    }), _jsxs("span", {
      className: "dnb-slider__wrapper",
      children: [_AlignmentHelper || (_AlignmentHelper = _jsx(AlignmentHelper, {})), _jsx(FormStatus, {
        show: showStatus,
        id: id + '-form-status',
        globalStatus: globalStatus,
        textId: id + '-status',
        text: status,
        state: statusState,
        noAnimation: statusNoAnimation,
        skeleton: skeleton,
        ...statusProps
      }), _jsxs("span", {
        className: "dnb-slider__inner",
        children: [showButtons && (isReverse ? addButton : subtractButton), _jsxs(SliderMainTrack, {
          children: [extensions && Object.entries(extensions).map(([key, {
            instance,
            ...options
          }]) => {
            const Element = instance;
            return _jsx(Element, {
              ...options
            }, key);
          }), _SliderThumb || (_SliderThumb = _jsx(SliderThumb, {})), _SliderTrackBefore || (_SliderTrackBefore = _jsx(SliderTrackBefore, {})), _SliderTrackAfter || (_SliderTrackAfter = _jsx(SliderTrackAfter, {}))]
        }), showButtons && (isReverse ? subtractButton : addButton), _SliderSuffix || (_SliderSuffix = _jsx(SliderSuffix, {}))]
      })]
    })]
  });
}
function SliderSuffix() {
  const {
    allProps
  } = useSliderProps();
  const {
    id,
    suffix
  } = allProps;
  return suffix ? _jsx(Suffix, {
    className: "dnb-slider__suffix",
    id: id + '-suffix',
    context: allProps,
    children: suffix
  }) : null;
}
function SubtractButton() {
  const {
    emitChange,
    value,
    attributes,
    allProps
  } = useSliderProps();
  const {
    step,
    min,
    max,
    disabled,
    skeleton,
    subtractTitle,
    numberFormat
  } = allProps;
  const onSubtractClickHandler = event => {
    emitChange(event, clamp(value - (step || 1), min, max));
  };
  const subtractParams = {};
  if (typeof attributes['aria-hidden'] !== 'undefined') {
    subtractParams['aria-hidden'] = attributes['aria-hidden'];
  }
  const humanNumber = getFormattedNumber(value, numberFormat);
  return _jsx(Button, {
    className: "dnb-slider__button dnb-slider__button--subtract",
    variant: "secondary",
    icon: "subtract",
    size: "small",
    "aria-label": subtractTitle?.replace('%s', humanNumber.aria || String(value)),
    onClick: onSubtractClickHandler,
    disabled: disabled,
    skeleton: skeleton,
    ...subtractParams
  });
}
function AddButton() {
  const {
    emitChange,
    value,
    attributes,
    allProps
  } = useSliderProps();
  const {
    step,
    min,
    max,
    disabled,
    skeleton,
    addTitle,
    numberFormat
  } = allProps;
  const onAddClickHandler = event => {
    emitChange(event, clamp(value + (step || 1), min, max));
  };
  const addParams = {};
  if (typeof attributes['aria-hidden'] !== 'undefined') {
    addParams['aria-hidden'] = attributes['aria-hidden'];
  }
  const humanNumber = getFormattedNumber(value, numberFormat);
  return _jsx(Button, {
    className: "dnb-slider__button dnb-slider__button--add",
    variant: "secondary",
    icon: "add",
    size: "small",
    "aria-label": addTitle?.replace('%s', humanNumber.aria || String(value)),
    onClick: onAddClickHandler,
    disabled: disabled,
    skeleton: skeleton,
    ...addParams
  });
}
//# sourceMappingURL=SliderInstance.js.map