npm - @dnb/eufemia - Versions diffs - 10.20.0 → 10.22.0 - Mend

@dnb/eufemia 10.20.0 → 10.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1062) hide show

package/components/progress-indicator/style/dnb-progress-indicator.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-progress-indicator{--progress-indicator-timing:cubic-bezier(0.5,0,0.5,0.99);--progress-indicator-circular-circle:88;--progress-indicator-circular-circle-offset--min:88;--progress-indicator-circular-circle-offset--max:1;--progress-indicator-circular-background-color:grey;--progress-indicator-circular-bar-color:var(--color-black);--progress-indicator-linear-background-color:grey;--progress-indicator-linear-bar-color:var(--color-black);align-items:center;display:inline-flex;position:relative}.dnb-progress-indicator--vertical{flex-direction:column}.dnb-progress-indicator--horizontal{justify-content:center}.dnb-progress-indicator__label{display:inline-flex}.dnb-progress-indicator__label .dnb-p{align-self:center}.dnb-spacing .dnb-progress-indicator .dnb-p,.dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]){margin:0}.dnb-progress-indicator--horizontal .dnb-progress-indicator__label{~~margin~~:0 1rem}.dnb-progress-indicator--vertical .dnb-progress-indicator__label{~~margin~~-top:.5rem}.dnb-progress-indicator__circular{height:2rem;position:relative;transform:rotate(-90deg);width:2rem}.dnb-progress-indicator__circular svg{height:100%;inset:0;position:absolute;width:100%}.dnb-progress-indicator__circular__line{animation-delay:.2s;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:var(--progress-indicator-timing)}.dnb-progress-indicator__circular__line.background,.dnb-progress-indicator__circular__line.light{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}.dnb-progress-indicator__circular__line.light{animation-name:progress-indicator-circular-line-light}.dnb-progress-indicator__circular__line.dark,.dnb-progress-indicator__circular__line.light{stroke-dasharray:var(--progress-indicator-circular-circle),var(--progress-indicator-circular-circle)}.dnb-progress-indicator__circular__line.dark{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min);animation-name:progress-indicator-circular-line-dark}.dnb-progress-indicator__circular__line.paused{animation-play-state:paused}.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark{transition:stroke-dashoffset .6s var(--progress-indicator-timing)}.dnb-progress-indicator__circular__circle{stroke-linecap:round}.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-background-color)}.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-bar-color)}.dnb-progress-indicator__circular--small{height:1rem;width:1rem}.dnb-progress-indicator__circular--medium{height:1.5rem;width:1.5rem}.dnb-progress-indicator__circular--large{height:3.5rem;width:3.5rem}.dnb-progress-indicator__circular--huge{height:20rem;width:20rem}.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.1}.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.3}.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.5}.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.7}.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.9}.dnb-progress-indicator__linear{background-color:var(--progress-indicator-linear-background-color);border-radius:.25rem;height:.5rem;overflow:hidden;position:relative;width:100%;will-change:transform}.dnb-progress-indicator__linear__bar{background-color:var(--progress-indicator-linear-bar-color);border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform-origin:left;width:100%}.dnb-progress-indicator__linear__bar-transition{transition:transform .2s linear}.dnb-progress-indicator__linear__bar1-animation{animation:progress-indicator-linear-bar-1 2.1s cubic-bezier(.65,.815,.735,.395) infinite;width:auto}.dnb-progress-indicator__linear__bar2-animation{animation:progress-indicator-linear-bar-2 2.1s cubic-bezier(.165,.84,.44,1) 1.15s infinite;width:auto}.dnb-progress-indicator__linear--small{border-radius:.125rem;height:.25rem}.dnb-progress-indicator__linear--medium{border-radius:.5rem;height:1rem}.dnb-progress-indicator__linear--large{border-radius:.75rem;height:1.5rem}.dnb-progress-indicator__linear--huge{border-radius:1rem;height:2rem}html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation{animation-duration:0ms;animation-iteration-count:0;left:-35%;right:100%}html[data-visual-test] .dnb-progress-indicator__linear__bar2-animation{animation-duration:0ms;animation-iteration-count:0;left:-200%;right:100%}.dnb-progress-indicator,.dnb-progress-indicator--visible{animation:progress-indicator-fade-in .2s ease-out 1 forwards;opacity:0}.dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible){animation:progress-indicator-fade-out .6s ease-out 1 forwards}html[data-visual-test] .dnb-progress-indicator{animation-duration:0ms;opacity:1}.dnb-progress-indicator--no-animation{animation-duration:0ms}html[data-visual-test] .dnb-progress-indicator__bar-transition{transition:none}.dnb-progress-indicator--full-width{min-width:1rem;width:100%}@keyframes progress-indicator-fade-in{0%{opacity:0}to{opacity:1}}@keyframes progress-indicator-fade-out{0%{opacity:1}to{opacity:0}}@keyframes progress-indicator-circular-line-light{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-circular-line-dark{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-linear-bar-1{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes progress-indicator-linear-bar-2{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}
1	+ .dnb-progress-indicator{--progress-indicator-timing:cubic-bezier(0.5,0,0.5,0.99);--progress-indicator-circular-circle:88;--progress-indicator-circular-circle-offset--min:88;--progress-indicator-circular-circle-offset--max:1;--progress-indicator-circular-background-color:grey;--progress-indicator-circular-bar-color:var(--color-black);--progress-indicator-linear-background-color:grey;--progress-indicator-linear-bar-color:var(--color-black);align-items:center;display:inline-flex;position:relative}.dnb-progress-indicator--vertical{flex-direction:column}.dnb-progress-indicator--horizontal{justify-content:center}.dnb-progress-indicator__label{display:inline-flex}.dnb-progress-indicator__label .dnb-p{align-self:center}.dnb-spacing .dnb-progress-indicator .dnb-p,.dnb-spacing .dnb-progress-indicator .dnb-p:not([class*=dnb-space]){margin:0}.dnb-progress-indicator--horizontal .dnb-progress-indicator__label{padding-left:1rem}.dnb-progress-indicator--horizontal.dnb-progress-indicator--small .dnb-progress-indicator__label{padding-left:.5rem}.dnb-progress-indicator--vertical .dnb-progress-indicator__label{padding-top:.5rem}.dnb-progress-indicator__circular{height:2rem;position:relative;transform:rotate(-90deg);width:2rem}.dnb-progress-indicator__circular svg{height:100%;inset:0;position:absolute;width:100%}.dnb-progress-indicator__circular__line{animation-delay:.2s;animation-duration:2s;animation-iteration-count:infinite;animation-timing-function:var(--progress-indicator-timing)}.dnb-progress-indicator__circular__line.background,.dnb-progress-indicator__circular__line.light{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}.dnb-progress-indicator__circular__line.light{animation-name:progress-indicator-circular-line-light}.dnb-progress-indicator__circular__line.dark,.dnb-progress-indicator__circular__line.light{stroke-dasharray:var(--progress-indicator-circular-circle),var(--progress-indicator-circular-circle)}.dnb-progress-indicator__circular__line.dark{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min);animation-name:progress-indicator-circular-line-dark}.dnb-progress-indicator__circular__line.paused{animation-play-state:paused}.dnb-progress-indicator__circular--has-progress-value .dnb-progress-indicator__circular__line.dark{transition:stroke-dashoffset .6s var(--progress-indicator-timing)}.dnb-progress-indicator__circular__circle{stroke-linecap:round}.dnb-progress-indicator__circular__line.light .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-background-color)}.dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke:var(--progress-indicator-circular-bar-color)}.dnb-progress-indicator__circular--small{height:1rem;width:1rem}.dnb-progress-indicator__circular--medium{height:1.5rem;width:1.5rem}.dnb-progress-indicator__circular--large{height:3.5rem;width:3.5rem}.dnb-progress-indicator__circular--huge{height:20rem;width:20rem}.dnb-progress-indicator__circular--small .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.1}.dnb-progress-indicator__circular--medium .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.3}.dnb-progress-indicator__circular--default .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.5}.dnb-progress-indicator__circular--large .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.7}.dnb-progress-indicator__circular--huge .dnb-progress-indicator__circular__line.dark .dnb-progress-indicator__circular__circle{stroke-width:3.9}.dnb-progress-indicator__linear{background-color:var(--progress-indicator-linear-background-color);border-radius:.25rem;height:.5rem;overflow:hidden;position:relative;width:100%;will-change:transform}.dnb-progress-indicator__linear__bar{background-color:var(--progress-indicator-linear-bar-color);border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform-origin:left;width:100%}.dnb-progress-indicator__linear__bar-transition{transition:transform .2s linear}.dnb-progress-indicator__linear__bar1-animation{animation:progress-indicator-linear-bar-1 2.1s cubic-bezier(.65,.815,.735,.395) infinite;width:auto}.dnb-progress-indicator__linear__bar2-animation{animation:progress-indicator-linear-bar-2 2.1s cubic-bezier(.165,.84,.44,1) 1.15s infinite;width:auto}.dnb-progress-indicator__linear--small{border-radius:.125rem;height:.25rem}.dnb-progress-indicator__linear--medium{border-radius:.5rem;height:1rem}.dnb-progress-indicator__linear--large{border-radius:.75rem;height:1.5rem}.dnb-progress-indicator__linear--huge{border-radius:1rem;height:2rem}html[data-visual-test] .dnb-progress-indicator__linear__bar1-animation{animation-duration:0ms;animation-iteration-count:0;left:-35%;right:100%}html[data-visual-test] .dnb-progress-indicator__linear__bar2-animation{animation-duration:0ms;animation-iteration-count:0;left:-200%;right:100%}.dnb-progress-indicator,.dnb-progress-indicator--visible{animation:progress-indicator-fade-in .2s ease-out 1 forwards;opacity:0}.dnb-progress-indicator--complete:not(.dnb-progress-indicator--visible){animation:progress-indicator-fade-out .6s ease-out 1 forwards}html[data-visual-test] .dnb-progress-indicator{animation-duration:0ms;opacity:1}.dnb-progress-indicator--no-animation{animation-duration:0ms}html[data-visual-test] .dnb-progress-indicator__bar-transition{transition:none}.dnb-progress-indicator--full-width{min-width:1rem;width:100%}@keyframes progress-indicator-fade-in{0%{opacity:0}to{opacity:1}}@keyframes progress-indicator-fade-out{0%{opacity:1}to{opacity:0}}@keyframes progress-indicator-circular-line-light{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-circular-line-dark{0%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--min)}50%{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}to{stroke-dashoffset:var(--progress-indicator-circular-circle-offset--max)}}@keyframes progress-indicator-linear-bar-1{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}@keyframes progress-indicator-linear-bar-2{0%{left:-200%;right:100%}60%{left:107%;right:-8%}to{left:107%;right:-8%}}

package/components/progress-indicator/style/dnb-progress-indicator.scss CHANGED Viewed

@@ -44,11 +44,14 @@
   }
   &--horizontal &__label {
-    margin: 0 1rem;
+    padding-left: 1rem;
+  }
+  &--horizontal#{&}--small &__label {
+    padding-left: 0.5rem;
   }
   &--vertical &__label {
-    margin-top: 0.5rem;
+    padding-top: 0.5rem;
   }
   // circular variant

package/components/slider/Slider.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@
  */
 import type { SliderAllProps } from './types';
 export * from './types';
+export { default as SliderMarker } from './SliderMarker';
 declare function Slider(localProps: SliderAllProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Slider {
     var _formElement: boolean;

package/components/slider/Slider.js CHANGED Viewed

@@ -3,6 +3,7 @@ import React from 'react';
 import { SliderProvider } from './SliderProvider';
 import { SliderInstance } from './SliderInstance';
 export * from './types';
+export { default as SliderMarker } from './SliderMarker';
 function Slider(localProps) {
   return React.createElement(SliderProvider, localProps, _SliderInstance || (_SliderInstance = React.createElement(SliderInstance, null)));
 }

package/components/slider/Slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Slider.js","names":["React","SliderProvider","SliderInstance","Slider","localProps","createElement","_SliderInstance","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["/*\n Web Slider Component\n \n /\n\nimport React from 'react'\n\nimport { SliderProvider } from './SliderProvider'\nimport { SliderInstance } from './SliderInstance'\n\nimport type { SliderAllProps } from './types'\n\nexport * from './types'\n\nfunction Slider(localProps: SliderAllProps) {\n return (\n <SliderProvider {...localProps}>\n <SliderInstance />\n </SliderProvider>\n )\n}\n\nSlider._formElement = true\nSlider._supportsSpacingProps = true\n\nexport default Slider\n"],"mappings":";AAKA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,cAAc,QAAQ,kBAAkB;AAIjD,cAAc,SAAS;~~AAEvB~~,SAASC,MAAMA,CAACC,UAA0B,EAAE;EAC1C,~~OACEJ~~,KAAA,~~CAAAK~~,aAAA,~~CAACJ~~,cAAc,~~EAAKG~~,UAAU,EAAAE,eAAA,KAAAA,eAAA,~~GAC5BN~~,KAAA,~~CAAAK~~,aAAA,~~CAACH~~,cAAc,MAAE,CAAC,CACJ,CAAC;AAErB;~~AAEAC~~,MAAM,CAACI,YAAY,GAAG,IAAI;AAC1BJ,MAAM,CAACK,qBAAqB,GAAG,IAAI;AAEnC,eAAeL,MAAM"}
1	+ {"version":3,"file":"Slider.js","names":["React","SliderProvider","SliderInstance","default","SliderMarker","Slider","localProps","createElement","_SliderInstance","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["/*\n Web Slider Component\n \n /\n\nimport React from 'react'\n\nimport { SliderProvider } from './SliderProvider'\nimport { SliderInstance } from './SliderInstance'\n\nimport type { SliderAllProps } from './types'\n\nexport * from './types'\n\n// Export the extensions\nexport { default as SliderMarker } from './SliderMarker'\n\nfunction Slider(localProps: SliderAllProps) {\n return (\n <SliderProvider {...localProps}>\n <SliderInstance />\n </SliderProvider>\n )\n}\n\nSlider._formElement = true\nSlider._supportsSpacingProps = true\n\nexport default Slider\n"],"mappings":";AAKA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,cAAc,QAAQ,kBAAkB;AACjD,SAASC,cAAc,QAAQ,kBAAkB;AAIjD,cAAc,SAAS;AAGvB,SAASC,OAAO,IAAIC,YAAY,QAAQ,gBAAgB;AAExD,SAASC,MAAMA,CAACC,UAA0B,EAAE;EAC1C,OACEN,KAAA,CAAAO,aAAA,CAACN,cAAc,EAAKK,UAAU,EAAAE,eAAA,KAAAA,eAAA,GAC5BR,KAAA,CAAAO,aAAA,CAACL,cAAc,MAAE,CAAC,CACJ,CAAC;AAErB;AAEAG,MAAM,CAACI,YAAY,GAAG,IAAI;AAC1BJ,MAAM,CAACK,qBAAqB,GAAG,IAAI;AAEnC,eAAeL,MAAM"}

package/components/slider/SliderInstance.js CHANGED Viewed

@@ -1,7 +1,9 @@
 "use client";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
-var _SubtractButton, _AddButton, _AlignmentHelper, _SliderMainTrack, _SliderSuffix;
+const _excluded = ["instance"];
+var _SubtractButton, _AddButton, _AlignmentHelper, _SliderThumb, _SliderTrackBefore, _SliderTrackAfter, _SliderSuffix;
 import React from 'react';
 import classnames from 'classnames';
 import { isTrue } from '../../shared/component-helper';
@@ -40,7 +42,8 @@ export function SliderInstance() {
     stretch,
     skeleton,
     disabled,
-    className
+    className,
+    extensions
   } = allProps;
   const mainParams = {
     className: classnames("dnb-slider dnb-form-component", createSkeletonClass(null, skeleton), createSpacingClasses(allProps), className, isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', shouldAnimate && 'dnb-slider__state--animate', !showButtons && 'dnb-slider--no-buttons', isTrue(stretch) && 'dnb-slider--stretch', label && labelDirection && `dnb-slider__label--${labelDirection}`, showStatus && 'dnb-slider__form-status', status && `dnb-slider__status--${statusState}`)
@@ -53,8 +56,8 @@ export function SliderInstance() {
     text: label,
     disabled: disabled,
     skeleton: skeleton,
-    label_direction: labelDirection,
-    sr_only: labelSrOnly
+    labelDirection: labelDirection,
+    srOnly: labelSrOnly
   }), React.createElement("span", {
     className: "dnb-slider__wrapper"
   }, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(FormStatus, _extends({
@@ -68,7 +71,17 @@ export function SliderInstance() {
     skeleton: skeleton
   }, statusProps)), React.createElement("span", {
     className: "dnb-slider__inner"
-  }, showButtons && (isReverse ? addButton : subtractButton), _SliderMainTrack || (_SliderMainTrack = React.createElement(SliderMainTrack, null, React.createElement(SliderThumb, null), React.createElement(SliderTrackBefore, null), React.createElement(SliderTrackAfter, null))), showButtons && (isReverse ? subtractButton : addButton), _SliderSuffix || (_SliderSuffix = React.createElement(SliderSuffix, null)))));
+  }, showButtons && (isReverse ? addButton : subtractButton), React.createElement(SliderMainTrack, null, extensions && Object.entries(extensions).map(_ref2 => {
+    let [key, _ref] = _ref2;
+    let {
+        instance
+      } = _ref,
+      options = _objectWithoutProperties(_ref, _excluded);
+    const Element = instance;
+    return React.createElement(Element, _extends({
+      key: key
+    }, options));
+  }), _SliderThumb || (_SliderThumb = React.createElement(SliderThumb, null)), _SliderTrackBefore || (_SliderTrackBefore = React.createElement(SliderTrackBefore, null)), _SliderTrackAfter || (_SliderTrackAfter = React.createElement(SliderTrackAfter, null))), showButtons && (isReverse ? subtractButton : addButton), _SliderSuffix || (_SliderSuffix = React.createElement(SliderSuffix, null)))));
 }
 function SliderSuffix() {
   const {

package/components/slider/SliderInstance.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderInstance.js","names":["React","classnames","isTrue","AlignmentHelper","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","Context","Suffix","Button","FormLabel","FormStatus","SliderMainTrack","SliderTrackBefore","SliderTrackAfter","SliderThumb","useSliderProps","clamp","getFormattedNumber","SliderInstance","context","useContext","isReverse","isVertical","showButtons","showStatus","shouldAnimate","allProps","id","label","labelSrOnly","labelDirection","status","statusProps","statusState","statusNoAnimation","globalStatus","stretch","skeleton","disabled","className","mainParams","subtractButton","_SubtractButton","createElement","SubtractButton","addButton","_AddButton","AddButton","text","label_direction","sr_only","_AlignmentHelper","_extends","show","text_id","state","no_animation","_SliderMainTrack","_SliderSuffix","SliderSuffix","suffix","emitChange","value","attributes","step","min","max","subtractTitle","numberFormat","onSubtractClickHandler","event","subtractParams","humanNumber","variant","icon","size","replace","aria","String","on_click","addTitle","onAddClickHandler","addParams"],"sources":["../../../../src/components/slider/SliderInstance.tsx"],"sourcesContent":["/*\n Web Slider Component\n \n /\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { isTrue } from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n createSkeletonClass,\n skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport Button from '../button/Button'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\nimport {\n SliderMainTrack,\n SliderTrackBefore,\n SliderTrackAfter,\n} from './SliderTrack'\nimport { SliderThumb } from './SliderThumb'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\n\nexport function SliderInstance() {\n const context = React.useContext(Context)\n\n const {\n isReverse,\n isVertical,\n showButtons,\n showStatus,\n shouldAnimate,\n allProps,\n } = useSliderProps()\n\n const {\n id,\n label,\n labelSrOnly,\n labelDirection,\n status,\n statusProps,\n statusState,\n statusNoAnimation,\n globalStatus,\n stretch,\n skeleton,\n disabled,\n className,\n } = allProps\n\n const mainParams = {\n className: classnames(\n 'dnb-slider',\n isVertical && 'dnb-slider--vertical',\n disabled && 'dnb-slider__state--disabled',\n shouldAnimate && 'dnb-slider__state--animate',\n !showButtons && 'dnb-slider--no-buttons',\n isTrue(stretch) && 'dnb-slider--stretch',\n label && labelDirection && `dnb-slider__label--${labelDirection}`,\n showStatus && 'dnb-slider__form-status',\n status && `dnb-slider__status--${statusState}`,\n 'dnb-form-component',\n createSkeletonClass(null, skeleton),\n createSpacingClasses(allProps),\n className\n ),\n }\n\n const subtractButton = showButtons ? <SubtractButton /> : null\n const addButton = showButtons ? <AddButton /> : null\n\n skeletonDOMAttributes(mainParams, skeleton, context)\n\n return (\n <span {...mainParams}>\n {label && (\n // do not use \"for_id\" as the ID element is not a fo\n <FormLabel\n id={id + '-label'}\n text={label}\n disabled={disabled}\n skeleton={skeleton}\n label_direction={labelDirection}\n sr_only={labelSrOnly}\n />\n )}\n\n <span className=\"dnb-slider__wrapper\">\n <AlignmentHelper />\n\n <FormStatus\n show={showStatus}\n id={id + '-form-status'}\n globalStatus={globalStatus}\n text_id={id + '-status'} // used for \"aria-describedby\"\n text={status}\n state={statusState}\n no_animation={statusNoAnimation}\n skeleton={skeleton}\n {...statusProps}\n />\n\n <span className=\"dnb-slider__inner\">\n {showButtons && (isReverse ? addButton : subtractButton)}\n\n <SliderMainTrack>\n <SliderThumb />\n <SliderTrackBefore />\n <SliderTrackAfter />\n </SliderMainTrack>\n\n {showButtons && (isReverse ? subtractButton : addButton)}\n\n <SliderSuffix />\n </span>\n </span>\n </span>\n )\n}\n\nfunction SliderSuffix() {\n const { allProps } = useSliderProps()\n const { id, suffix } = allProps\n\n return suffix ? (\n <Suffix\n className=\"dnb-slider__suffix\"\n id={id + '-suffix'} // used for \"aria-describedby\"\n context={allProps}\n >\n {suffix}\n </Suffix>\n ) : null\n}\n\nfunction SubtractButton() {\n const { emitChange, value, attributes, allProps } = useSliderProps()\n const {\n step,\n min,\n max,\n disabled,\n skeleton,\n subtractTitle,\n numberFormat,\n } = allProps\n\n const onSubtractClickHandler = (event: MouseEvent \| TouchEvent) => {\n emitChange(event, clamp((value as number) - (step \|\| 1), min, max))\n }\n\n const subtractParams = {}\n\n if (typeof attributes['aria-hidden'] !== 'undefined') {\n subtractParams['aria-hidden'] = attributes['aria-hidden']\n }\n\n const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n return (\n <Button\n className=\"dnb-slider__button dnb-slider__button--subtract\"\n variant=\"secondary\"\n icon=\"subtract\"\n size=\"small\"\n aria-label={subtractTitle?.replace(\n '%s',\n humanNumber.aria \|\| String(value)\n )}\n on_click={onSubtractClickHandler}\n disabled={disabled}\n skeleton={skeleton}\n {...subtractParams}\n />\n )\n}\n\nfunction AddButton() {\n const { emitChange, value, attributes, allProps } = useSliderProps()\n const { step, min, max, disabled, skeleton, addTitle, numberFormat } =\n allProps\n\n const onAddClickHandler = (event: MouseEvent \| TouchEvent) => {\n emitChange(event, clamp((value as number) + (step \|\| 1), min, max))\n }\n\n const addParams = {}\n\n if (typeof attributes['aria-hidden'] !== 'undefined') {\n addParams['aria-hidden'] = attributes['aria-hidden']\n }\n\n const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n return (\n <Button\n className=\"dnb-slider__button dnb-slider__button--add\"\n variant=\"secondary\"\n icon=\"add\"\n size=\"small\"\n aria-label={addTitle?.replace(\n '%s',\n humanNumber.aria \|\| String(value)\n )}\n on_click={onAddClickHandler}\n disabled={disabled}\n skeleton={skeleton}\n {...addParams}\n />\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"SliderInstance.js","names":["React","classnames","isTrue","AlignmentHelper","createSpacingClasses","createSkeletonClass","skeletonDOMAttributes","Context","Suffix","Button","FormLabel","FormStatus","SliderMainTrack","SliderTrackBefore","SliderTrackAfter","SliderThumb","useSliderProps","clamp","getFormattedNumber","SliderInstance","context","useContext","isReverse","isVertical","showButtons","showStatus","shouldAnimate","allProps","id","label","labelSrOnly","labelDirection","status","statusProps","statusState","statusNoAnimation","globalStatus","stretch","skeleton","disabled","className","extensions","mainParams","subtractButton","_SubtractButton","createElement","SubtractButton","addButton","_AddButton","AddButton","text","srOnly","_AlignmentHelper","_extends","show","text_id","state","no_animation","Object","entries","map","_ref2","key","_ref","instance","options","_objectWithoutProperties","_excluded","Element","_SliderThumb","_SliderTrackBefore","_SliderTrackAfter","_SliderSuffix","SliderSuffix","suffix","emitChange","value","attributes","step","min","max","subtractTitle","numberFormat","onSubtractClickHandler","event","subtractParams","humanNumber","variant","icon","size","replace","aria","String","on_click","addTitle","onAddClickHandler","addParams"],"sources":["../../../../src/components/slider/SliderInstance.tsx"],"sourcesContent":["/*\n Web Slider Component\n \n /\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport { isTrue } from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport {\n createSkeletonClass,\n skeletonDOMAttributes,\n} from '../skeleton/SkeletonHelper'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport Button from '../button/Button'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\nimport {\n SliderMainTrack,\n SliderTrackBefore,\n SliderTrackAfter,\n} from './SliderTrack'\nimport { SliderThumb } from './SliderThumb'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\n\nexport function SliderInstance() {\n const context = React.useContext(Context)\n\n const {\n isReverse,\n isVertical,\n showButtons,\n showStatus,\n shouldAnimate,\n allProps,\n } = useSliderProps()\n\n const {\n id,\n label,\n labelSrOnly,\n labelDirection,\n status,\n statusProps,\n statusState,\n statusNoAnimation,\n globalStatus,\n stretch,\n skeleton,\n disabled,\n className,\n extensions,\n } = allProps\n\n const mainParams = {\n className: classnames(\n 'dnb-slider',\n isVertical && 'dnb-slider--vertical',\n disabled && 'dnb-slider__state--disabled',\n shouldAnimate && 'dnb-slider__state--animate',\n !showButtons && 'dnb-slider--no-buttons',\n isTrue(stretch) && 'dnb-slider--stretch',\n label && labelDirection && `dnb-slider__label--${labelDirection}`,\n showStatus && 'dnb-slider__form-status',\n status && `dnb-slider__status--${statusState}`,\n 'dnb-form-component',\n createSkeletonClass(null, skeleton),\n createSpacingClasses(allProps),\n className\n ),\n }\n\n const subtractButton = showButtons ? <SubtractButton /> : null\n const addButton = showButtons ? <AddButton /> : null\n\n skeletonDOMAttributes(mainParams, skeleton, context)\n\n return (\n <span {...mainParams}>\n {label && (\n // do not use \"for_id\" as the ID element is not a fo\n <FormLabel\n id={id + '-label'}\n text={label}\n disabled={disabled}\n skeleton={skeleton}\n labelDirection={labelDirection}\n srOnly={labelSrOnly}\n />\n )}\n\n <span className=\"dnb-slider__wrapper\">\n <AlignmentHelper />\n\n <FormStatus\n show={showStatus}\n id={id + '-form-status'}\n globalStatus={globalStatus}\n text_id={id + '-status'} // used for \"aria-describedby\"\n text={status}\n state={statusState}\n no_animation={statusNoAnimation}\n skeleton={skeleton}\n {...statusProps}\n />\n\n <span className=\"dnb-slider__inner\">\n {showButtons && (isReverse ? addButton : subtractButton)}\n\n <SliderMainTrack>\n {extensions &&\n Object.entries(extensions).map(\n ([key, { instance, ...options }]) => {\n const Element = instance as React.ElementType\n return <Element key={key} {...options} />\n }\n )}\n <SliderThumb />\n <SliderTrackBefore />\n <SliderTrackAfter />\n </SliderMainTrack>\n\n {showButtons && (isReverse ? subtractButton : addButton)}\n\n <SliderSuffix />\n </span>\n </span>\n </span>\n )\n}\n\nfunction SliderSuffix() {\n const { allProps } = useSliderProps()\n const { id, suffix } = allProps\n\n return suffix ? (\n <Suffix\n className=\"dnb-slider__suffix\"\n id={id + '-suffix'} // used for \"aria-describedby\"\n context={allProps}\n >\n {suffix}\n </Suffix>\n ) : null\n}\n\nfunction SubtractButton() {\n const { emitChange, value, attributes, allProps } = useSliderProps()\n const {\n step,\n min,\n max,\n disabled,\n skeleton,\n subtractTitle,\n numberFormat,\n } = allProps\n\n const onSubtractClickHandler = (event: MouseEvent \| TouchEvent) => {\n emitChange(event, clamp((value as number) - (step \|\| 1), min, max))\n }\n\n const subtractParams = {}\n\n if (typeof attributes['aria-hidden'] !== 'undefined') {\n subtractParams['aria-hidden'] = attributes['aria-hidden']\n }\n\n const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n return (\n <Button\n className=\"dnb-slider__button dnb-slider__button--subtract\"\n variant=\"secondary\"\n icon=\"subtract\"\n size=\"small\"\n aria-label={subtractTitle?.replace(\n '%s',\n humanNumber.aria \|\| String(value)\n )}\n on_click={onSubtractClickHandler}\n disabled={disabled}\n skeleton={skeleton}\n {...subtractParams}\n />\n )\n}\n\nfunction AddButton() {\n const { emitChange, value, attributes, allProps } = useSliderProps()\n const { step, min, max, disabled, skeleton, addTitle, numberFormat } =\n allProps\n\n const onAddClickHandler = (event: MouseEvent \| TouchEvent) => {\n emitChange(event, clamp((value as number) + (step \|\| 1), min, max))\n }\n\n const addParams = {}\n\n if (typeof attributes['aria-hidden'] !== 'undefined') {\n addParams['aria-hidden'] = attributes['aria-hidden']\n }\n\n const humanNumber = getFormattedNumber(value as number, numberFormat)\n\n return (\n <Button\n className=\"dnb-slider__button dnb-slider__button--add\"\n variant=\"secondary\"\n icon=\"add\"\n size=\"small\"\n aria-label={addTitle?.replace(\n '%s',\n humanNumber.aria \|\| String(value)\n )}\n on_click={onAddClickHandler}\n disabled={disabled}\n skeleton={skeleton}\n {...addParams}\n />\n )\n}\n"],"mappings":"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"}

package/components/slider/SliderMarker.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import React from 'react';
+type SliderMarkerProps = {
+    value: number;
+    text: React.ReactNode;
+};
+export default function SliderMarker({ value, text }: SliderMarkerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/slider/SliderMarker.js ADDED Viewed

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useCallback } from 'react';
+import { makeUniqueId } from '../../shared/component-helper';
+import { useSliderProps } from './hooks/useSliderProps';
+import { clamp, getFormattedNumber } from './SliderHelpers';
+import Tooltip from '../tooltip/Tooltip';
+export default function SliderMarker(_ref) {
+  let {
+    value,
+    text
+  } = _ref;
+  const {
+    isReverse,
+    isVertical,
+    allProps
+  } = useSliderProps();
+  const {
+    min,
+    max,
+    numberFormat
+  } = allProps;
+  const getParams = useCallback(() => {
+    const markerId = `slider-marker-${makeUniqueId()}`;
+    const {
+      number,
+      aria
+    } = getFormattedNumber(value, numberFormat || {});
+    let percent = clamp((value - min) * 100 / (max - min));
+    if (isReverse) {
+      percent = 100 - percent;
+    }
+    const params = {
+      id: markerId,
+      'aria-label': aria,
+      tabIndex: 0,
+      style: {
+        [`${isVertical ? 'top' : 'left'}`]: `${percent}%`
+      },
+      children: React.createElement(Tooltip, {
+        targetSelector: `#${markerId}`
+      }, text || number)
+    };
+    return params;
+  }, [isReverse, isVertical, max, min, numberFormat, text, value]);
+  if (!value) {
+    return null;
+  }
+  const params = getParams();
+  return React.createElement("mark", _extends({
+    className: "dnb-slider__marker"
+  }, params));
+}
+//# sourceMappingURL=SliderMarker.js.map

package/components/slider/SliderMarker.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SliderMarker.js","names":["React","useCallback","makeUniqueId","useSliderProps","clamp","getFormattedNumber","Tooltip","SliderMarker","_ref","value","text","isReverse","isVertical","allProps","min","max","numberFormat","getParams","markerId","number","aria","percent","params","id","tabIndex","style","children","createElement","targetSelector","_extends","className"],"sources":["../../../../src/components/slider/SliderMarker.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { makeUniqueId } from '../../shared/component-helper'\nimport { useSliderProps } from './hooks/useSliderProps'\nimport { clamp, getFormattedNumber } from './SliderHelpers'\nimport Tooltip from '../tooltip/Tooltip'\n\ntype SliderMarkerProps = {\n value: number\n text: React.ReactNode\n}\n\nexport default function SliderMarker({ value, text }: SliderMarkerProps) {\n const { isReverse, isVertical, allProps } = useSliderProps()\n const { min, max, numberFormat } = allProps\n\n const getParams = useCallback(() => {\n const markerId = `slider-marker-${makeUniqueId()}`\n const { number, aria } = getFormattedNumber(value, numberFormat || {})\n\n let percent = clamp(((value - min) * 100) / (max - min))\n if (isReverse) {\n percent = 100 - percent\n }\n\n const params = {\n id: markerId,\n 'aria-label': aria,\n tabIndex: 0,\n style: {\n [`${isVertical ? 'top' : 'left'}`]: `${percent}%`,\n },\n children: (\n <Tooltip targetSelector={`#${markerId}`}>{text || number}</Tooltip>\n ),\n }\n\n return params\n }, [isReverse, isVertical, max, min, numberFormat, text, value])\n\n if (!value) {\n return null\n }\n\n const params = getParams()\n\n return <mark className=\"dnb-slider__marker\" {...params} />\n}\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,cAAc,QAAQ,wBAAwB;AACvD,SAASC,KAAK,EAAEC,kBAAkB,QAAQ,iBAAiB;AAC3D,OAAOC,OAAO,MAAM,oBAAoB;AAOxC,eAAe,SAASC,YAAYA,CAAAC,IAAA,EAAqC;EAAA,IAApC;IAAEC,KAAK;IAAEC;EAAwB,CAAC,GAAAF,IAAA;EACrE,MAAM;IAAEG,SAAS;IAAEC,UAAU;IAAEC;EAAS,CAAC,GAAGV,cAAc,CAAC,CAAC;EAC5D,MAAM;IAAEW,GAAG;IAAEC,GAAG;IAAEC;EAAa,CAAC,GAAGH,QAAQ;EAE3C,MAAMI,SAAS,GAAGhB,WAAW,CAAC,MAAM;IAClC,MAAMiB,QAAQ,GAAI,iBAAgBhB,YAAY,CAAC,CAAE,EAAC;IAClD,MAAM;MAAEiB,MAAM;MAAEC;IAAK,CAAC,GAAGf,kBAAkB,CAACI,KAAK,EAAEO,YAAY,IAAI,CAAC,CAAC,CAAC;IAEtE,IAAIK,OAAO,GAAGjB,KAAK,CAAE,CAACK,KAAK,GAAGK,GAAG,IAAI,GAAG,IAAKC,GAAG,GAAGD,GAAG,CAAC,CAAC;IACxD,IAAIH,SAAS,EAAE;MACbU,OAAO,GAAG,GAAG,GAAGA,OAAO;IACzB;IAEA,MAAMC,MAAM,GAAG;MACbC,EAAE,EAAEL,QAAQ;MACZ,YAAY,EAAEE,IAAI;MAClBI,QAAQ,EAAE,CAAC;MACXC,KAAK,EAAE;QACL,CAAE,GAAEb,UAAU,GAAG,KAAK,GAAG,MAAO,EAAC,GAAI,GAAES,OAAQ;MACjD,CAAC;MACDK,QAAQ,EACN1B,KAAA,CAAA2B,aAAA,CAACrB,OAAO;QAACsB,cAAc,EAAG,IAAGV,QAAS;MAAE,GAAER,IAAI,IAAIS,MAAgB;IAEtE,CAAC;IAED,OAAOG,MAAM;EACf,CAAC,EAAE,CAACX,SAAS,EAAEC,UAAU,EAAEG,GAAG,EAAED,GAAG,EAAEE,YAAY,EAAEN,IAAI,EAAED,KAAK,CAAC,CAAC;EAEhE,IAAI,CAACA,KAAK,EAAE;IACV,OAAO,IAAI;EACb;EAEA,MAAMa,MAAM,GAAGL,SAAS,CAAC,CAAC;EAE1B,OAAOjB,KAAA,CAAA2B,aAAA,SAAAE,QAAA;IAAMC,SAAS,EAAC;EAAoB,GAAKR,MAAM,CAAG,CAAC;AAC5D"}

package/components/slider/SliderProvider.js CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatus", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "multiThumbBehavior", "numberFormat", "tooltip", "alwaysShowTooltip", "skeleton", "max", "min", "disabled", "className", "id", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
+const _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatus", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "multiThumbBehavior", "numberFormat", "tooltip", "alwaysShowTooltip", "skeleton", "max", "min", "extensions", "disabled", "className", "id", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
 import React from 'react';
 import { pickFormElementProps } from '../../shared/helpers/filterValidProps';
 import { isTrue, makeUniqueId, dispatchCustomElementEvent, getStatusState, extendPropsWithContext } from '../../shared/component-helper';
@@ -54,6 +54,7 @@ export function SliderProvider(localProps) {
       skeleton,
       max,
       min,
+      extensions,
       disabled,
       className,
       id,

package/components/slider/SliderProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SliderProvider.js","names":["React","pickFormElementProps","isTrue","makeUniqueId","dispatchCustomElementEvent","getStatusState","extendPropsWithContext","Context","closestIndex","getFormattedNumber","getUpdatedValues","roundValue","convertSnakeCaseProps","defaultProps","statusState","addTitle","subtractTitle","min","max","value","multiThumbBehavior","SliderContext","createContext","SliderProvider","localProps","context","useContext","allProps","skeleton","getTranslation","Slider","FormRow","vertical","formElement","_id","useState","id","step","label","labelDirection","labelSrOnly","status","statusProps","statusNoAnimation","globalStatus","stretch","suffix","thumbTitle","title","hideButtons","numberFormat","tooltip","alwaysShowTooltip","disabled","className","onChange","onDragStart","onDragEnd","_vertical","reverse","_reverse","_value","children","_children","attributes","_objectWithoutProperties","_excluded","setValue","externValue","updateExternValue","realtimeValue","useRef","thumbState","setThumbState","thumbIndex","shouldAnimate","updateAnimateState","isVertical","isReverse","isMulti","Array","isArray","setThumbIndex","index","isNaN","current","getAndUpdateCurrentIndex","currentValue","currentIndex","updateValue","emitChange","event","rawValue","numberValue","multiValues","lower","upper","obj","number","useEffect","hasChanged","some","val","i","trackRef","animationTimeout","setShouldAnimate","state","clearTimeout","setTimeout","showStatus","showButtons","values","createElement","Provider"],"sources":["../../../../src/components/slider/SliderProvider.tsx"],"sourcesContent":["import React from 'react'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport {\n isTrue,\n makeUniqueId,\n dispatchCustomElementEvent,\n getStatusState,\n extendPropsWithContext,\n} from '../../shared/component-helper'\n\nimport Context from '../../shared/Context'\nimport {\n closestIndex,\n getFormattedNumber,\n getUpdatedValues,\n roundValue,\n} from './SliderHelpers'\n\nimport type {\n ValueTypes,\n onChangeEventProps,\n SliderAllProps,\n SliderContextTypes,\n ThumbStateEnums,\n} from './types'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nconst defaultProps = {\n statusState: 'error',\n addTitle: '+',\n subtractTitle: '−',\n min: 0,\n max: 100,\n value: -1,\n multiThumbBehavior: 'swap',\n}\n\nexport const SliderContext = React.createContext<SliderContextTypes>(null)\n\nexport function SliderProvider(localProps: SliderAllProps) {\n const context = React.useContext(Context)\n const allProps = convertSnakeCaseProps(\n extendPropsWithContext(\n localProps,\n defaultProps,\n { skeleton: context?.skeleton },\n context?.getTranslation(localProps).Slider,\n // Deprecated – can be removed in v11\n pickFormElementProps(\n context?.FormRow,\n\n /*\n Exclude some props\n /\n {\n vertical: null,\n }\n ),\n pickFormElementProps(\n context?.formElement,\n\n /\n Exclude some props\n */\n {\n vertical: null,\n }\n ),\n context?.Slider\n )\n )\n\n const [_id] = React.useState(makeUniqueId)\n if (!allProps.id) {\n allProps.id = _id\n }\n\n const {\n step,\n label, // eslint-disable-line\n labelDirection, // eslint-disable-line\n labelSrOnly, // eslint-disable-line\n status, // eslint-disable-line\n statusState, // eslint-disable-line\n statusProps, // eslint-disable-line\n statusNoAnimation, // eslint-disable-line\n globalStatus, // eslint-disable-line\n stretch, // eslint-disable-line\n suffix, // eslint-disable-line\n thumbTitle: title, // eslint-disable-line\n subtractTitle, // eslint-disable-line\n addTitle, // eslint-disable-line\n hideButtons, // eslint-disable-line\n multiThumbBehavior,\n numberFormat,\n tooltip, // eslint-disable-line\n alwaysShowTooltip, // eslint-disable-line\n skeleton,\n max, // eslint-disable-line\n min, // eslint-disable-line\n disabled,\n className, // eslint-disable-line\n id, // eslint-disable-line\n onChange,\n onDragStart, // eslint-disable-line\n onDragEnd, // eslint-disable-line\n vertical: _vertical,\n reverse: _reverse,\n value: _value,\n children: _children, // eslint-disable-line\n\n ...attributes // Find a DOM element to forwards props too when multi buttons are supported\n } = allProps\n\n const [value, setValue] = React.useState<ValueTypes>(_value)\n const [externValue, updateExternValue] =\n React.useState<ValueTypes>(_value)\n const realtimeValue = React.useRef<ValueTypes>(_value)\n const [thumbState, setThumbState] =\n React.useState<ThumbStateEnums>('initial')\n const thumbIndex = React.useRef<number>(-1)\n const [shouldAnimate, updateAnimateState] =\n React.useState<boolean>(false)\n const [isVertical] = React.useState(isTrue(_vertical))\n const [isReverse] = React.useState(\n isVertical ? !isTrue(_reverse) : isTrue(_reverse)\n )\n const isMulti = Array.isArray(value)\n const setThumbIndex = (index: number) => {\n if (!isNaN(index)) {\n thumbIndex.current = index\n }\n }\n\n const getAndUpdateCurrentIndex = (currentValue: number) => {\n let currentIndex = null\n\n if (thumbIndex.current > -1) {\n currentIndex = thumbIndex.current\n } else {\n currentIndex = closestIndex(currentValue, value as Array<number>)\n setThumbIndex(currentIndex)\n }\n\n return currentIndex\n }\n\n const updateValue = (value: ValueTypes) => {\n setValue(value)\n realtimeValue.current = value\n }\n\n const emitChange = (\n event: MouseEvent \| TouchEvent,\n rawValue: number\n ) => {\n if (disabled \|\| isTrue(skeleton)) {\n return\n }\n\n let numberValue = roundValue(rawValue, step)\n let multiValues: ValueTypes = numberValue\n\n if (numberValue >= min) {\n if (isMulti) {\n const currentIndex = getAndUpdateCurrentIndex(numberValue)\n const lower = realtimeValue.current[currentIndex - 1]\n const upper = realtimeValue.current[currentIndex + 1]\n\n if (multiThumbBehavior === 'omit') {\n if (numberValue < lower) {\n numberValue = lower\n }\n if (numberValue > upper) {\n numberValue = upper\n }\n }\n\n multiValues = getUpdatedValues(\n multiThumbBehavior === 'push'\n ? (realtimeValue.current as Array<number>)\n : value,\n currentIndex,\n numberValue\n )\n\n if (multiThumbBehavior === 'push') {\n if (typeof lower !== 'undefined' && numberValue < lower) {\n multiValues[currentIndex - 1] = numberValue\n }\n if (typeof upper !== 'undefined' && numberValue >= upper) {\n multiValues[currentIndex + 1] = numberValue\n }\n }\n\n if (numberValue === realtimeValue.current[currentIndex]) {\n return // stop here\n }\n } else if (numberValue === realtimeValue.current) {\n return // stop here\n }\n\n if (typeof onChange === 'function') {\n const obj: onChangeEventProps = {\n value: multiValues,\n rawValue,\n event,\n number: null,\n }\n\n if (numberFormat) {\n obj.number = getFormattedNumber(numberValue, numberFormat).number\n }\n\n dispatchCustomElementEvent(allProps, 'onChange', obj)\n }\n\n updateValue(multiValues)\n }\n }\n\n React.useEffect(() => {\n if (isMulti) {\n const hasChanged = (_value as Array<number>).some((val, i) => {\n return val !== externValue[i]\n })\n\n if (hasChanged) {\n updateValue(_value)\n updateExternValue(_value)\n }\n } else if (_value !== externValue) {\n updateValue(_value)\n updateExternValue(_value)\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [_value, isMulti])\n\n const trackRef = React.useRef<HTMLElement>()\n\n const animationTimeout = React.useRef<NodeJS.Timeout>()\n const setShouldAnimate = (state: boolean) => {\n updateAnimateState(state)\n clearTimeout(animationTimeout.current)\n if (state) {\n animationTimeout.current = setTimeout(\n () => updateAnimateState(false),\n 250\n )\n }\n }\n\n const showStatus = getStatusState(status)\n const showButtons = !isMulti && !isTrue(hideButtons)\n const values = (isMulti ? value : [value]) as Array<number>\n\n return (\n <SliderContext.Provider\n value={{\n isMulti,\n isReverse,\n isVertical,\n shouldAnimate,\n value,\n values,\n setValue,\n attributes,\n showStatus,\n showButtons,\n thumbState,\n setThumbState,\n thumbIndex,\n setThumbIndex,\n emitChange,\n allProps,\n trackRef,\n setShouldAnimate,\n animationTimeout,\n }}\n >\n {localProps.children}\n </SliderContext.Provider>\n )\n}\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,oBAAoB,QAAQ,uCAAuC;AAC5E,SACEC,MAAM,EACNC,YAAY,EACZC,0BAA0B,EAC1BC,cAAc,EACdC,sBAAsB,QACjB,+BAA+B;AAEtC,OAAOC,OAAO,MAAM,sBAAsB;AAC1C,SACEC,YAAY,EACZC,kBAAkB,EAClBC,gBAAgB,EAChBC,UAAU,QACL,iBAAiB;AASxB,SAASC,qBAAqB,QAAQ,yCAAyC;AAE/E,MAAMC,YAAY,GAAG;EACnBC,WAAW,EAAE,OAAO;EACpBC,QAAQ,EAAE,GAAG;EACbC,aAAa,EAAE,GAAG;EAClBC,GAAG,EAAE,CAAC;EACNC,GAAG,EAAE,GAAG;EACRC,KAAK,EAAE,CAAC,CAAC;EACTC,kBAAkB,EAAE;AACtB,CAAC;AAED,OAAO,MAAMC,aAAa,GAAGrB,KAAK,CAACsB,aAAa,CAAqB,IAAI,CAAC;AAE1E,OAAO,SAASC,cAAcA,CAACC,UAA0B,EAAE;EACzD,MAAMC,OAAO,GAAGzB,KAAK,CAAC0B,UAAU,CAACnB,OAAO,CAAC;EACzC,MAAMoB,QAAQ,GAAGf,qBAAqB,CACpCN,sBAAsB,CACpBkB,UAAU,EACVX,YAAY,EACZ;IAAEe,QAAQ,EAAEH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG;EAAS,CAAC,EAC/BH,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEI,cAAc,CAACL,UAAU,CAAC,CAACM,MAAM,EAE1C7B,oBAAoB,CAClBwB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,OAAO,EAKhB;IACEC,QAAQ,EAAE;EACZ,CACF,CAAC,EACD/B,oBAAoB,CAClBwB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEQ,WAAW,EAKpB;IACED,QAAQ,EAAE;EACZ,CACF,CAAC,EACDP,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,MACX,CACF,CAAC;EAED,MAAM,CAACI,GAAG,CAAC,GAAGlC,KAAK,CAACmC,QAAQ,CAAChC,YAAY,CAAC;EAC1C,IAAI,CAACwB,QAAQ,CAACS,EAAE,EAAE;IAChBT,QAAQ,CAACS,EAAE,GAAGF,GAAG;EACnB;EAEA,MAAM;MACJG,IAAI;MACJC,KAAK;MACLC,cAAc;MACdC,WAAW;MACXC,MAAM;MACN3B,WAAW;MACX4B,WAAW;MACXC,iBAAiB;MACjBC,YAAY;MACZC,OAAO;MACPC,MAAM;MACNC,UAAU,EAAEC,KAAK;MACjBhC,aAAa;MACbD,QAAQ;MACRkC,WAAW;MACX7B,kBAAkB;MAClB8B,YAAY;MACZC,OAAO;MACPC,iBAAiB;MACjBxB,QAAQ;MACRV,GAAG;MACHD,GAAG;MACHoC,QAAQ;MACRC,SAAS;MACTlB,EAAE;MACFmB,QAAQ;MACRC,WAAW;MACXC,SAAS;MACTzB,QAAQ,EAAE0B,SAAS;MACnBC,OAAO,EAAEC,QAAQ;MACjBzC,KAAK,EAAE0C,MAAM;MACbC,QAAQ,EAAEC;IAGZ,CAAC,GAAGpC,QAAQ;IADPqC,UAAU,GAAAC,wBAAA,CACXtC,QAAQ,EAAAuC,SAAA;EAEZ,MAAM,CAAC/C,KAAK,EAAEgD,QAAQ,CAAC,GAAGnE,KAAK,CAACmC,QAAQ,CAAa0B,MAAM,CAAC;EAC5D,MAAM,CAACO,WAAW,EAAEC,iBAAiB,CAAC,GACpCrE,KAAK,CAACmC,QAAQ,CAAa0B,MAAM,CAAC;EACpC,MAAMS,aAAa,GAAGtE,KAAK,CAACuE,MAAM,CAAaV,MAAM,CAAC;EACtD,MAAM,CAACW,UAAU,EAAEC,aAAa,CAAC,GAC/BzE,KAAK,CAACmC,QAAQ,CAAkB,SAAS,CAAC;EAC5C,MAAMuC,UAAU,GAAG1E,KAAK,CAACuE,MAAM,CAAS,CAAC,CAAC,CAAC;EAC3C,MAAM,CAACI,aAAa,EAAEC,kBAAkB,CAAC,GACvC5E,KAAK,CAACmC,QAAQ,CAAU,KAAK,CAAC;EAChC,MAAM,CAAC0C,UAAU,CAAC,GAAG7E,KAAK,CAACmC,QAAQ,CAACjC,MAAM,CAACwD,SAAS,CAAC,CAAC;EACtD,MAAM,CAACoB,SAAS,CAAC,GAAG9E,KAAK,CAACmC,QAAQ,CAChC0C,UAAU,GAAG,CAAC3E,MAAM,CAAC0D,QAAQ,CAAC,GAAG1D,MAAM,CAAC0D,QAAQ,CAClD,CAAC;EACD,MAAMmB,OAAO,GAAGC,KAAK,CAACC,OAAO,CAAC9D,KAAK,CAAC;EACpC,MAAM+D,aAAa,GAAIC,KAAa,IAAK;IACvC,IAAI,CAACC,KAAK,CAACD,KAAK,CAAC,EAAE;MACjBT,UAAU,CAACW,OAAO,GAAGF,KAAK;IAC5B;EACF,CAAC;EAED,MAAMG,wBAAwB,GAAIC,YAAoB,IAAK;IACzD,IAAIC,YAAY,GAAG,IAAI;IAEvB,IAAId,UAAU,CAACW,OAAO,GAAG,CAAC,CAAC,EAAE;MAC3BG,YAAY,GAAGd,UAAU,CAACW,OAAO;IACnC,CAAC,MAAM;MACLG,YAAY,GAAGhF,YAAY,CAAC+E,YAAY,EAAEpE,KAAsB,CAAC;MACjE+D,aAAa,CAACM,YAAY,CAAC;IAC7B;IAEA,OAAOA,YAAY;EACrB,CAAC;EAED,MAAMC,WAAW,GAAItE,KAAiB,IAAK;IACzCgD,QAAQ,CAAChD,KAAK,CAAC;IACfmD,aAAa,CAACe,OAAO,GAAGlE,KAAK;EAC/B,CAAC;EAED,MAAMuE,UAAU,GAAGA,CACjBC,KAA8B,EAC9BC,QAAgB,KACb;IACH,IAAIvC,QAAQ,IAAInD,MAAM,CAAC0B,QAAQ,CAAC,EAAE;MAChC;IACF;IAEA,IAAIiE,WAAW,GAAGlF,UAAU,CAACiF,QAAQ,EAAEvD,IAAI,CAAC;IAC5C,IAAIyD,WAAuB,GAAGD,WAAW;IAEzC,IAAIA,WAAW,IAAI5E,GAAG,EAAE;MACtB,IAAI8D,OAAO,EAAE;QACX,MAAMS,YAAY,GAAGF,wBAAwB,CAACO,WAAW,CAAC;QAC1D,MAAME,KAAK,GAAGzB,aAAa,CAACe,OAAO,CAACG,YAAY,GAAG,CAAC,CAAC;QACrD,MAAMQ,KAAK,GAAG1B,aAAa,CAACe,OAAO,CAACG,YAAY,GAAG,CAAC,CAAC;QAErD,IAAIpE,kBAAkB,KAAK,MAAM,EAAE;UACjC,IAAIyE,WAAW,GAAGE,KAAK,EAAE;YACvBF,WAAW,GAAGE,KAAK;UACrB;UACA,IAAIF,WAAW,GAAGG,KAAK,EAAE;YACvBH,WAAW,GAAGG,KAAK;UACrB;QACF;QAEAF,WAAW,GAAGpF,gBAAgB,CAC5BU,kBAAkB,KAAK,MAAM,GACxBkD,aAAa,CAACe,OAAO,GACtBlE,KAAK,EACTqE,YAAY,EACZK,WACF,CAAC;QAED,IAAIzE,kBAAkB,KAAK,MAAM,EAAE;UACjC,IAAI,OAAO2E,KAAK,KAAK,WAAW,IAAIF,WAAW,GAAGE,KAAK,EAAE;YACvDD,WAAW,CAACN,YAAY,GAAG,CAAC,CAAC,GAAGK,WAAW;UAC7C;UACA,IAAI,OAAOG,KAAK,KAAK,WAAW,IAAIH,WAAW,IAAIG,KAAK,EAAE;YACxDF,WAAW,CAACN,YAAY,GAAG,CAAC,CAAC,GAAGK,WAAW;UAC7C;QACF;QAEA,IAAIA,WAAW,KAAKvB,aAAa,CAACe,OAAO,CAACG,YAAY,CAAC,EAAE;UACvD;QACF;MACF,CAAC,MAAM,IAAIK,WAAW,KAAKvB,aAAa,CAACe,OAAO,EAAE;QAChD;MACF;MAEA,IAAI,OAAO9B,QAAQ,KAAK,UAAU,EAAE;QAClC,MAAM0C,GAAuB,GAAG;UAC9B9E,KAAK,EAAE2E,WAAW;UAClBF,QAAQ;UACRD,KAAK;UACLO,MAAM,EAAE;QACV,CAAC;QAED,IAAIhD,YAAY,EAAE;UAChB+C,GAAG,CAACC,MAAM,GAAGzF,kBAAkB,CAACoF,WAAW,EAAE3C,YAAY,CAAC,CAACgD,MAAM;QACnE;QAEA9F,0BAA0B,CAACuB,QAAQ,EAAE,UAAU,EAAEsE,GAAG,CAAC;MACvD;MAEAR,WAAW,CAACK,WAAW,CAAC;IAC1B;EACF,CAAC;EAED9F,KAAK,CAACmG,SAAS,CAAC,MAAM;IACpB,IAAIpB,OAAO,EAAE;MACX,MAAMqB,UAAU,GAAIvC,MAAM,CAAmBwC,IAAI,CAAC,CAACC,GAAG,EAAEC,CAAC,KAAK;QAC5D,OAAOD,GAAG,KAAKlC,WAAW,CAACmC,CAAC,CAAC;MAC/B,CAAC,CAAC;MAEF,IAAIH,UAAU,EAAE;QACdX,WAAW,CAAC5B,MAAM,CAAC;QACnBQ,iBAAiB,CAACR,MAAM,CAAC;MAC3B;IACF,CAAC,MAAM,IAAIA,MAAM,KAAKO,WAAW,EAAE;MACjCqB,WAAW,CAAC5B,MAAM,CAAC;MACnBQ,iBAAiB,CAACR,MAAM,CAAC;IAC3B;EAGF,CAAC,EAAE,CAACA,MAAM,EAAEkB,OAAO,CAAC,CAAC;EAErB,MAAMyB,QAAQ,GAAGxG,KAAK,CAACuE,MAAM,CAAc,CAAC;EAE5C,MAAMkC,gBAAgB,GAAGzG,KAAK,CAACuE,MAAM,CAAiB,CAAC;EACvD,MAAMmC,gBAAgB,GAAIC,KAAc,IAAK;IAC3C/B,kBAAkB,CAAC+B,KAAK,CAAC;IACzBC,YAAY,CAACH,gBAAgB,CAACpB,OAAO,CAAC;IACtC,IAAIsB,KAAK,EAAE;MACTF,gBAAgB,CAACpB,OAAO,GAAGwB,UAAU,CACnC,MAAMjC,kBAAkB,CAAC,KAAK,CAAC,EAC/B,GACF,CAAC;IACH;EACF,CAAC;EAED,MAAMkC,UAAU,GAAGzG,cAAc,CAACoC,MAAM,CAAC;EACzC,MAAMsE,WAAW,GAAG,CAAChC,OAAO,IAAI,CAAC7E,MAAM,CAAC+C,WAAW,CAAC;EACpD,MAAM+D,MAAM,GAAIjC,OAAO,GAAG5D,KAAK,GAAG,CAACA,KAAK,CAAmB;EAE3D,OACEnB,KAAA,CAAAiH,aAAA,CAAC5F,aAAa,CAAC6F,QAAQ;IACrB/F,KAAK,EAAE;MACL4D,OAAO;MACPD,SAAS;MACTD,UAAU;MACVF,aAAa;MACbxD,KAAK;MACL6F,MAAM;MACN7C,QAAQ;MACRH,UAAU;MACV8C,UAAU;MACVC,WAAW;MACXvC,UAAU;MACVC,aAAa;MACbC,UAAU;MACVQ,aAAa;MACbQ,UAAU;MACV/D,QAAQ;MACR6E,QAAQ;MACRE,gBAAgB;MAChBD;IACF;EAAE,GAEDjF,UAAU,CAACsC,QACU,CAAC;AAE7B"}
1	+ {"version":3,"file":"SliderProvider.js","names":["React","pickFormElementProps","isTrue","makeUniqueId","dispatchCustomElementEvent","getStatusState","extendPropsWithContext","Context","closestIndex","getFormattedNumber","getUpdatedValues","roundValue","convertSnakeCaseProps","defaultProps","statusState","addTitle","subtractTitle","min","max","value","multiThumbBehavior","SliderContext","createContext","SliderProvider","localProps","context","useContext","allProps","skeleton","getTranslation","Slider","FormRow","vertical","formElement","_id","useState","id","step","label","labelDirection","labelSrOnly","status","statusProps","statusNoAnimation","globalStatus","stretch","suffix","thumbTitle","title","hideButtons","numberFormat","tooltip","alwaysShowTooltip","extensions","disabled","className","onChange","onDragStart","onDragEnd","_vertical","reverse","_reverse","_value","children","_children","attributes","_objectWithoutProperties","_excluded","setValue","externValue","updateExternValue","realtimeValue","useRef","thumbState","setThumbState","thumbIndex","shouldAnimate","updateAnimateState","isVertical","isReverse","isMulti","Array","isArray","setThumbIndex","index","isNaN","current","getAndUpdateCurrentIndex","currentValue","currentIndex","updateValue","emitChange","event","rawValue","numberValue","multiValues","lower","upper","obj","number","useEffect","hasChanged","some","val","i","trackRef","animationTimeout","setShouldAnimate","state","clearTimeout","setTimeout","showStatus","showButtons","values","createElement","Provider"],"sources":["../../../../src/components/slider/SliderProvider.tsx"],"sourcesContent":["import React from 'react'\nimport { pickFormElementProps } from '../../shared/helpers/filterValidProps'\nimport {\n isTrue,\n makeUniqueId,\n dispatchCustomElementEvent,\n getStatusState,\n extendPropsWithContext,\n} from '../../shared/component-helper'\n\nimport Context from '../../shared/Context'\nimport {\n closestIndex,\n getFormattedNumber,\n getUpdatedValues,\n roundValue,\n} from './SliderHelpers'\n\nimport type {\n ValueTypes,\n onChangeEventProps,\n SliderAllProps,\n SliderContextTypes,\n ThumbStateEnums,\n} from './types'\nimport { convertSnakeCaseProps } from '../../shared/helpers/withSnakeCaseProps'\n\nconst defaultProps = {\n statusState: 'error',\n addTitle: '+',\n subtractTitle: '−',\n min: 0,\n max: 100,\n value: -1,\n multiThumbBehavior: 'swap',\n}\n\nexport const SliderContext = React.createContext<SliderContextTypes>(null)\n\nexport function SliderProvider(localProps: SliderAllProps) {\n const context = React.useContext(Context)\n const allProps = convertSnakeCaseProps(\n extendPropsWithContext(\n localProps,\n defaultProps,\n { skeleton: context?.skeleton },\n context?.getTranslation(localProps).Slider,\n // Deprecated – can be removed in v11\n pickFormElementProps(\n context?.FormRow,\n\n /*\n Exclude some props\n /\n {\n vertical: null,\n }\n ),\n pickFormElementProps(\n context?.formElement,\n\n /\n Exclude some props\n */\n {\n vertical: null,\n }\n ),\n context?.Slider\n )\n )\n\n const [_id] = React.useState(makeUniqueId)\n if (!allProps.id) {\n allProps.id = _id\n }\n\n const {\n step,\n label, // eslint-disable-line\n labelDirection, // eslint-disable-line\n labelSrOnly, // eslint-disable-line\n status, // eslint-disable-line\n statusState, // eslint-disable-line\n statusProps, // eslint-disable-line\n statusNoAnimation, // eslint-disable-line\n globalStatus, // eslint-disable-line\n stretch, // eslint-disable-line\n suffix, // eslint-disable-line\n thumbTitle: title, // eslint-disable-line\n subtractTitle, // eslint-disable-line\n addTitle, // eslint-disable-line\n hideButtons, // eslint-disable-line\n multiThumbBehavior,\n numberFormat,\n tooltip, // eslint-disable-line\n alwaysShowTooltip, // eslint-disable-line\n skeleton,\n max, // eslint-disable-line\n min, // eslint-disable-line\n extensions, // eslint-disable-line\n disabled,\n className, // eslint-disable-line\n id, // eslint-disable-line\n onChange,\n onDragStart, // eslint-disable-line\n onDragEnd, // eslint-disable-line\n vertical: _vertical,\n reverse: _reverse,\n value: _value,\n children: _children, // eslint-disable-line\n\n ...attributes // Find a DOM element to forwards props too when multi buttons are supported\n } = allProps\n\n const [value, setValue] = React.useState<ValueTypes>(_value)\n const [externValue, updateExternValue] =\n React.useState<ValueTypes>(_value)\n const realtimeValue = React.useRef<ValueTypes>(_value)\n const [thumbState, setThumbState] =\n React.useState<ThumbStateEnums>('initial')\n const thumbIndex = React.useRef<number>(-1)\n const [shouldAnimate, updateAnimateState] =\n React.useState<boolean>(false)\n const [isVertical] = React.useState(isTrue(_vertical))\n const [isReverse] = React.useState(\n isVertical ? !isTrue(_reverse) : isTrue(_reverse)\n )\n const isMulti = Array.isArray(value)\n const setThumbIndex = (index: number) => {\n if (!isNaN(index)) {\n thumbIndex.current = index\n }\n }\n\n const getAndUpdateCurrentIndex = (currentValue: number) => {\n let currentIndex = null\n\n if (thumbIndex.current > -1) {\n currentIndex = thumbIndex.current\n } else {\n currentIndex = closestIndex(currentValue, value as Array<number>)\n setThumbIndex(currentIndex)\n }\n\n return currentIndex\n }\n\n const updateValue = (value: ValueTypes) => {\n setValue(value)\n realtimeValue.current = value\n }\n\n const emitChange = (\n event: MouseEvent \| TouchEvent,\n rawValue: number\n ) => {\n if (disabled \|\| isTrue(skeleton)) {\n return\n }\n\n let numberValue = roundValue(rawValue, step)\n let multiValues: ValueTypes = numberValue\n\n if (numberValue >= min) {\n if (isMulti) {\n const currentIndex = getAndUpdateCurrentIndex(numberValue)\n const lower = realtimeValue.current[currentIndex - 1]\n const upper = realtimeValue.current[currentIndex + 1]\n\n if (multiThumbBehavior === 'omit') {\n if (numberValue < lower) {\n numberValue = lower\n }\n if (numberValue > upper) {\n numberValue = upper\n }\n }\n\n multiValues = getUpdatedValues(\n multiThumbBehavior === 'push'\n ? (realtimeValue.current as Array<number>)\n : value,\n currentIndex,\n numberValue\n )\n\n if (multiThumbBehavior === 'push') {\n if (typeof lower !== 'undefined' && numberValue < lower) {\n multiValues[currentIndex - 1] = numberValue\n }\n if (typeof upper !== 'undefined' && numberValue >= upper) {\n multiValues[currentIndex + 1] = numberValue\n }\n }\n\n if (numberValue === realtimeValue.current[currentIndex]) {\n return // stop here\n }\n } else if (numberValue === realtimeValue.current) {\n return // stop here\n }\n\n if (typeof onChange === 'function') {\n const obj: onChangeEventProps = {\n value: multiValues,\n rawValue,\n event,\n number: null,\n }\n\n if (numberFormat) {\n obj.number = getFormattedNumber(numberValue, numberFormat).number\n }\n\n dispatchCustomElementEvent(allProps, 'onChange', obj)\n }\n\n updateValue(multiValues)\n }\n }\n\n React.useEffect(() => {\n if (isMulti) {\n const hasChanged = (_value as Array<number>).some((val, i) => {\n return val !== externValue[i]\n })\n\n if (hasChanged) {\n updateValue(_value)\n updateExternValue(_value)\n }\n } else if (_value !== externValue) {\n updateValue(_value)\n updateExternValue(_value)\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [_value, isMulti])\n\n const trackRef = React.useRef<HTMLElement>()\n\n const animationTimeout = React.useRef<NodeJS.Timeout>()\n const setShouldAnimate = (state: boolean) => {\n updateAnimateState(state)\n clearTimeout(animationTimeout.current)\n if (state) {\n animationTimeout.current = setTimeout(\n () => updateAnimateState(false),\n 250\n )\n }\n }\n\n const showStatus = getStatusState(status)\n const showButtons = !isMulti && !isTrue(hideButtons)\n const values = (isMulti ? value : [value]) as Array<number>\n\n return (\n <SliderContext.Provider\n value={{\n isMulti,\n isReverse,\n isVertical,\n shouldAnimate,\n value,\n values,\n setValue,\n attributes,\n showStatus,\n showButtons,\n thumbState,\n setThumbState,\n thumbIndex,\n setThumbIndex,\n emitChange,\n allProps,\n trackRef,\n setShouldAnimate,\n animationTimeout,\n }}\n >\n {localProps.children}\n </SliderContext.Provider>\n )\n}\n"],"mappings":"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"}

package/components/slider/style/dnb-slider.css CHANGED Viewed

@@ -14,6 +14,9 @@
   --slider-line-after: gray;
   --slider-line-before--disabled: dimgray;
   --slider-line-after--disabled: lightgray;
+  --slider-marker: var(--slider-line-before);
+  --slider-marker-height: calc(var(--slider-thumb-size) * 0.75);
+  --slider-marker-width: 0.125rem;
   -webkit-user-select: none;
           user-select: none;
   -webkit-touch-callout: none;
@@ -53,6 +56,44 @@
   padding-left: 0;
   padding-top: 0.5rem;
 }
+.dnb-slider__marker {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+  margin: auto;
+  width: var(--slider-marker-width);
+  height: var(--slider-marker-height);
+  background-color: var(--slider-marker);
+}
+.dnb-slider__marker:focus {
+  outline: none;
+  outline: none;
+}
+html[data-whatinput=keyboard] .dnb-slider__marker:focus {
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-slider__marker::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform: scale(10, 1);
+}
+.dnb-slider--vertical .dnb-slider__marker {
+  top: auto;
+  right: 0;
+  bottom: auto;
+  left: 0;
+  height: var(--slider-marker-width);
+  width: var(--slider-marker-height);
+}
+.dnb-slider--vertical .dnb-slider__marker::before {
+  transform: scale(1, 10);
+}
 .dnb-slider__track {
   touch-action: none;
   position: relative;
@@ -119,7 +160,7 @@
   position: absolute;
   left: 0;
   top: 0;
-  z-index: 3;
+  z-index: 4;
   display: flex;
   justify-content: center;
   transform: translate3d(-50%, 0, 0);
@@ -207,7 +248,7 @@ html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus ~
     margin-bottom: 0.5rem;
   }
 }
-.dnb-slider.dnb-skeleton .dnb-slider__line, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line {
+.dnb-slider.dnb-skeleton .dnb-slider__line, .dnb-slider.dnb-skeleton .dnb-slider__marker, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line {
   background-color: var(--skeleton-color);
 }
 .dnb-slider.dnb-skeleton .dnb-slider__track::before, .dnb-slider.dnb-skeleton .dnb-slider__track::after, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track::before, .dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track::after {

package/components/slider/style/dnb-slider.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-slider{--slider-track-height:0.25rem;--slider-thumb-size:2rem;--slider-button-size:1.5rem;--slider-space:1rem;--slider-line-before:#000;--slider-line-after:gray;--slider-line-before--disabled:dimgray;--slider-line-after--disabled:#d3d3d3;-webkit-touch-callout:none;display:flex;font-size:var(--font-size-small);line-height:var(--slider-thumb-size);-webkit-user-select:none;user-select:none}.dnb-slider--stretch{width:100%}.dnb-slider--vertical{display:flex;height:100%;min-height:inherit;min-width:inherit;width:auto}.dnb-slider__wrapper{display:inline-flex;flex:1;flex-direction:column;width:100%}.dnb-slider--vertical .dnb-slider__wrapper{align-items:center;height:100%;width:auto}.dnb-slider__inner{display:inline-flex;height:var(--slider-thumb-size)}.dnb-slider__suffix{align-self:center}.dnb-slider--vertical .dnb-slider__suffix{padding-left:0;padding-top:.5rem}.dnb-slider__track{cursor:pointer;flex:1;margin:0 calc(var(--slider-space)1.5);min-width:2rem;position:relative;touch-action:none}.dnb-slider--vertical .dnb-slider__track{margin:calc(var(--slider-space)1.5) 0;min-height:2rem;min-width:auto}.dnb-slider--no-buttons .dnb-slider__track{margin:0 calc(var(--slider-space))}.dnb-slider--no-buttons.dnb-slider--vertical .dnb-slider__track{margin:calc(var(--slider-space)) 0}.dnb-slider--vertical .dnb-slider__inner{flex-direction:column;height:inherit;min-height:inherit;min-width:inherit;width:var(--slider-thumb-size)}.dnb-slider__line{background-color:var(--slider-line-before);border-radius:var(--slider-track-height);height:var(--slider-track-height);left:0;margin:0 calc(0px - var(--slider-space));position:absolute;top:50%;transform:translate3d(0,-50%,0)}.dnb-slider__line__before{z-index:2}.dnb-slider__line__after{background-color:var(--slider-line-after);right:0;z-index:1}.dnb-slider--vertical .dnb-slider__line{height:auto;left:50%;margin:calc(0px - var(--slider-space)) 0;top:0;transform:translate3d(-50%,0,0);width:var(--slider-track-height)}.dnb-slider--vertical .dnb-slider__line__before{bottom:0;top:0}.dnb-slider--vertical .dnb-slider__line__after{bottom:0}.dnb-slider__thumb{box-shadow:var(--shadow-default)}.dnb-slider__button-helper,.dnb-slider__thumb{border-radius:50%;display:flex;justify-content:center;left:0;position:absolute;top:0;transform:translate3d(-50%,0,0);z-index:3}.dnb-slider__button-helper,.dnb-slider__button-helper .dnb-button,.dnb-slider__thumb,.dnb-slider__thumb .dnb-button{height:var(--slider-thumb-size);width:var(--slider-thumb-size)}.dnb-slider--vertical .dnb-slider__thumb{transform:translate3d(0,-50%,0)}.dnb-slider__button.dnb-button--size-small{height:var(--slider-button-size);line-height:var(--slider-button-size);transform:translateY(.25rem);width:var(--slider-button-size);z-index:2}.dnb-slider--vertical .dnb-slider__button.dnb-button--size-small{transform:translateX(.25rem)}.dnb-slider__state--disabled .dnb-slider__line,.dnb-slider__state--disabled .dnb-slider__thumb,.dnb-slider__state--disabled .dnb-slider__track{cursor:not-allowed}.dnb-slider__state--animate .dnb-slider__line,.dnb-slider__state--animate .dnb-slider__thumb{transition:left .25s var(--easing-default),top .25s var(--easing-default),bottom .25s var(--easing-default),right .25s var(--easing-default),box-shadow .25s var(--easing-default)}html[data-visual-test] .dnb-slider__line,html[data-visual-test] .dnb-slider__thumb{transition:none!important}.dnb-slider__button-helper{opacity:0;pointer-events:none;transform:translate3d(.0625rem,0,0);z-index:2}.dnb-slider__button-helper:not(:disabled):focus~.dnb-button{outline:none}html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus~.dnb-button{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-slider>.dnb-form-label{align-self:flex-start;line-height:var(--slider-thumb-size);margin-right:1rem}.dnb-slider>.dnb-form-label--vertical{line-height:var(--line-height-basis);margin-right:0}.dnb-slider__label--vertical{flex-direction:column}.dnb-slider__label--vertical.dnb-slider--vertical{align-items:center}.dnb-slider__label--vertical.dnb-slider--vertical .dnb-form-label{margin-bottom:.5rem;margin-right:0;text-align:center;width:100%}.dnb-slider .dnb-form-status{margin-top:.5rem;order:2}.dnb-slider--vertical .dnb-form-status{margin-top:1rem}@media screen and (max-width:40em){.dnb-responsive-component .dnb-slider{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-slider>.dnb-form-label{margin-bottom:.5rem}}.dnb-slider.dnb-skeleton .dnb-slider__line,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track:after,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track:before,.dnb-slider.dnb-skeleton .dnb-slider__track:after,.dnb-slider.dnb-skeleton .dnb-slider__track:before{background-color:var(--skeleton-color)}
1	+ .dnb-slider{--slider-track-height:0.25rem;--slider-thumb-size:2rem;--slider-button-size:1.5rem;--slider-space:1rem;--slider-line-before:#000;--slider-line-after:gray;--slider-line-before--disabled:dimgray;--slider-line-after--disabled:#d3d3d3;--slider-marker:var(--slider-line-before);--slider-marker-height:calc(var(--slider-thumb-size)0.75);--slider-marker-width:0.125rem;-webkit-touch-callout:none;display:flex;font-size:var(--font-size-small);line-height:var(--slider-thumb-size);-webkit-user-select:none;user-select:none}.dnb-slider--stretch{width:100%}.dnb-slider--vertical{display:flex;height:100%;min-height:inherit;min-width:inherit;width:auto}.dnb-slider__wrapper{display:inline-flex;flex:1;flex-direction:column;width:100%}.dnb-slider--vertical .dnb-slider__wrapper{align-items:center;height:100%;width:auto}.dnb-slider__inner{display:inline-flex;height:var(--slider-thumb-size)}.dnb-slider__suffix{align-self:center}.dnb-slider--vertical .dnb-slider__suffix{padding-left:0;padding-top:.5rem}.dnb-slider__marker{background-color:var(--slider-marker);bottom:0;height:var(--slider-marker-height);margin:auto;position:absolute;top:0;width:var(--slider-marker-width);z-index:3}.dnb-slider__marker:focus{outline:none}html[data-whatinput=keyboard] .dnb-slider__marker:focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-slider__marker:before{content:"";height:100%;position:absolute;transform:scaleX(10);width:100%}.dnb-slider--vertical .dnb-slider__marker{bottom:auto;height:var(--slider-marker-width);left:0;right:0;top:auto;width:var(--slider-marker-height)}.dnb-slider--vertical .dnb-slider__marker:before{transform:scaleY(10)}.dnb-slider__track{cursor:pointer;flex:1;margin:0 calc(var(--slider-space)1.5);min-width:2rem;position:relative;touch-action:none}.dnb-slider--vertical .dnb-slider__track{margin:calc(var(--slider-space)*1.5) 0;min-height:2rem;min-width:auto}.dnb-slider--no-buttons .dnb-slider__track{margin:0 calc(var(--slider-space))}.dnb-slider--no-buttons.dnb-slider--vertical .dnb-slider__track{margin:calc(var(--slider-space)) 0}.dnb-slider--vertical .dnb-slider__inner{flex-direction:column;height:inherit;min-height:inherit;min-width:inherit;width:var(--slider-thumb-size)}.dnb-slider__line{background-color:var(--slider-line-before);border-radius:var(--slider-track-height);height:var(--slider-track-height);left:0;margin:0 calc(0px - var(--slider-space));position:absolute;top:50%;transform:translate3d(0,-50%,0)}.dnb-slider__line__before{z-index:2}.dnb-slider__line__after{background-color:var(--slider-line-after);right:0;z-index:1}.dnb-slider--vertical .dnb-slider__line{height:auto;left:50%;margin:calc(0px - var(--slider-space)) 0;top:0;transform:translate3d(-50%,0,0);width:var(--slider-track-height)}.dnb-slider--vertical .dnb-slider__line__before{bottom:0;top:0}.dnb-slider--vertical .dnb-slider__line__after{bottom:0}.dnb-slider__thumb{box-shadow:var(--shadow-default)}.dnb-slider__button-helper,.dnb-slider__thumb{border-radius:50%;display:flex;justify-content:center;left:0;position:absolute;top:0;transform:translate3d(-50%,0,0);z-index:4}.dnb-slider__button-helper,.dnb-slider__button-helper .dnb-button,.dnb-slider__thumb,.dnb-slider__thumb .dnb-button{height:var(--slider-thumb-size);width:var(--slider-thumb-size)}.dnb-slider--vertical .dnb-slider__thumb{transform:translate3d(0,-50%,0)}.dnb-slider__button.dnb-button--size-small{height:var(--slider-button-size);line-height:var(--slider-button-size);transform:translateY(.25rem);width:var(--slider-button-size);z-index:2}.dnb-slider--vertical .dnb-slider__button.dnb-button--size-small{transform:translateX(.25rem)}.dnb-slider__state--disabled .dnb-slider__line,.dnb-slider__state--disabled .dnb-slider__thumb,.dnb-slider__state--disabled .dnb-slider__track{cursor:not-allowed}.dnb-slider__state--animate .dnb-slider__line,.dnb-slider__state--animate .dnb-slider__thumb{transition:left .25s var(--easing-default),top .25s var(--easing-default),bottom .25s var(--easing-default),right .25s var(--easing-default),box-shadow .25s var(--easing-default)}html[data-visual-test] .dnb-slider__line,html[data-visual-test] .dnb-slider__thumb{transition:none!important}.dnb-slider__button-helper{opacity:0;pointer-events:none;transform:translate3d(.0625rem,0,0);z-index:2}.dnb-slider__button-helper:not(:disabled):focus~.dnb-button{outline:none}html[data-whatinput=keyboard] .dnb-slider__button-helper:not(:disabled):focus~.dnb-button{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-slider>.dnb-form-label{align-self:flex-start;line-height:var(--slider-thumb-size);margin-right:1rem}.dnb-slider>.dnb-form-label--vertical{line-height:var(--line-height-basis);margin-right:0}.dnb-slider__label--vertical{flex-direction:column}.dnb-slider__label--vertical.dnb-slider--vertical{align-items:center}.dnb-slider__label--vertical.dnb-slider--vertical .dnb-form-label{margin-bottom:.5rem;margin-right:0;text-align:center;width:100%}.dnb-slider .dnb-form-status{margin-top:.5rem;order:2}.dnb-slider--vertical .dnb-form-status{margin-top:1rem}@media screen and (max-width:40em){.dnb-responsive-component .dnb-slider{align-items:flex-start;display:flex;flex-direction:column;margin-bottom:.5rem}.dnb-responsive-component .dnb-slider>.dnb-form-label{margin-bottom:.5rem}}.dnb-slider.dnb-skeleton .dnb-slider__line,.dnb-slider.dnb-skeleton .dnb-slider__marker,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled .dnb-slider__line,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track:after,.dnb-slider.dnb-skeleton .dnb-slider__state--disabled.dnb-slider__track:before,.dnb-slider.dnb-skeleton .dnb-slider__track:after,.dnb-slider.dnb-skeleton .dnb-slider__track:before{background-color:var(--skeleton-color)}

package/components/slider/style/dnb-slider.scss CHANGED Viewed

@@ -14,6 +14,9 @@
   --slider-line-after: gray;
   --slider-line-before--disabled: dimgray;
   --slider-line-after--disabled: lightgray;
+  --slider-marker: var(--slider-line-before);
+  --slider-marker-height: calc(var(--slider-thumb-size) * 0.75);
+  --slider-marker-width: 0.125rem;
   user-select: none; // Safari / Touch fix
   -webkit-touch-callout: none; // Safari / Touch fix
@@ -68,6 +71,45 @@
     padding-top: 0.5rem;
   }
+  &__marker {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 3;
+    margin: auto;
+    width: var(--slider-marker-width);
+    height: var(--slider-marker-height);
+    background-color: var(--slider-marker);
+    &:focus {
+      outline: none; // we show a Tooltip instead
+      @include focusRing();
+    }
+    // Larger bounding area
+    &::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      transform: scale(10, 1);
+    }
+  }
+  &--vertical &__marker {
+    top: auto;
+    right: 0;
+    bottom: auto;
+    left: 0;
+    height: var(--slider-marker-width);
+    width: var(--slider-marker-height);
+    &::before {
+      transform: scale(1, 10);
+    }
+  }
   &__track {
     // make sure we do not alow page scroll on touch devices
     touch-action: none;
@@ -165,7 +207,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 3;
+    z-index: 4;
     display: flex;
     justify-content: center;
@@ -283,6 +325,7 @@
   }
   &.dnb-skeleton &__line,
+  &.dnb-skeleton &__marker,
   &.dnb-skeleton &__state--disabled &__line {
     background-color: var(--skeleton-color);
   }

package/components/slider/style/themes/dnb-slider-theme-sbanken.css CHANGED Viewed

@@ -7,4 +7,7 @@
   --slider-line-after: var(--sb-color-gray-light);
   --slider-line-before--disabled: var(--sb-color-gray);
   --slider-line-after--disabled: var(--sb-color-gray-light);
+}
+.dnb-slider__marker :hover {
+  background-color: var(--sb-color-violet);
 }

package/components/slider/style/themes/dnb-slider-theme-sbanken.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-slider{--slider-line-before:var(--sb-color-purple-alternative);--slider-line-after:var(--sb-color-gray-light);--slider-line-before--disabled:var(--sb-color-gray);--slider-line-after--disabled:var(--sb-color-gray-light)}
1	+ .dnb-slider{--slider-line-before:var(--sb-color-purple-alternative);--slider-line-after:var(--sb-color-gray-light);--slider-line-before--disabled:var(--sb-color-gray);--slider-line-after--disabled:var(--sb-color-gray-light)}.dnb-slider__marker :hover{background-color:var(--sb-color-violet)}

package/components/slider/style/themes/dnb-slider-theme-sbanken.scss CHANGED Viewed

@@ -8,4 +8,8 @@
   --slider-line-after: var(--sb-color-gray-light);
   --slider-line-before--disabled: var(--sb-color-gray);
   --slider-line-after--disabled: var(--sb-color-gray-light);
+  &__marker :hover {
+    background-color: var(--sb-color-violet);
+  }
 }

package/components/slider/style/themes/dnb-slider-theme-ui.css CHANGED Viewed

@@ -7,4 +7,7 @@
   --slider-line-after: var(--color-mint-green-50);
   --slider-line-before--disabled: var(--color-sea-green-30);
   --slider-line-after--disabled: var(--color-mint-green-25);
+}
+.dnb-slider__marker:hover, .dnb-slider__marker:focus-within {
+  background-color: var(--color-emerald-green);
 }

package/components/slider/style/themes/dnb-slider-theme-ui.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- .dnb-slider{--slider-line-before:var(--color-sea-green);--slider-line-after:var(--color-mint-green-50);--slider-line-before--disabled:var(--color-sea-green-30);--slider-line-after--disabled:var(--color-mint-green-25)}
1	+ .dnb-slider{--slider-line-before:var(--color-sea-green);--slider-line-after:var(--color-mint-green-50);--slider-line-before--disabled:var(--color-sea-green-30);--slider-line-after--disabled:var(--color-mint-green-25)}.dnb-slider__marker:focus-within,.dnb-slider__marker:hover{background-color:var(--color-emerald-green)}

package/components/slider/style/themes/dnb-slider-theme-ui.scss CHANGED Viewed

@@ -8,4 +8,9 @@
   --slider-line-after: var(--color-mint-green-50);
   --slider-line-before--disabled: var(--color-sea-green-30);
   --slider-line-after--disabled: var(--color-mint-green-25);
+  &__marker:hover,
+  &__marker:focus-within {
+    background-color: var(--color-emerald-green);
+  }
 }

package/components/slider/types.d.ts CHANGED Viewed

@@ -14,6 +14,10 @@ export type onChangeEventProps = {
     number?: formatReturnType | null;
     event?: Event;
 };
+export type SliderExtensions = Record<string, {
+    instance: React.ElementType;
+    [key: string]: unknown;
+}>;
 export type SliderProps = IncludeSnakeCase<{
     /** prepends the Form Label component. If no ID is provided, a random ID is created. */
     label?: React.ReactNode;
@@ -46,6 +50,8 @@ export type SliderProps = IncludeSnakeCase<{
     value?: ValueTypes;
     /** the steps the slider takes on changing the value. Defaults to `null`. */
     step?: number;
+    /** makes it possible to display overlays with other functionality such as a marker on the slider marking a given value. */
+    extensions: SliderExtensions;
     /** show the slider vertically. Defaults to `false`. */
     vertical?: boolean;
     /** show the slider reversed. Defaults to `false`. */