{"version":3,"file":"/Users/anthonygubler/development/dojo-org/widgets/src/slider/index.tsx","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RenderResult } from '@dojo/framework/core/interfaces';\nimport focus from '@dojo/framework/core/middleware/focus';\nimport { createICacheMiddleware } from '@dojo/framework/core/middleware/icache';\nimport theme from '../middleware/theme';\nimport { create, tsx } from '@dojo/framework/core/vdom';\nimport { formatAriaProperties } from '../common/util';\nimport Label from '../label/index';\nimport * as css from '../theme/default/slider.m.css';\nimport * as fixedCss from './styles/slider.m.css';\n\nexport interface SliderProperties {\n\t/** Custom aria attributes */\n\taria?: { [key: string]: string | null };\n\t/** Set the disabled property of the control */\n\tdisabled?: boolean;\n\t/** Adds the label element after (true) or before (false) */\n\tlabelAfter?: boolean;\n\t/** Hides the label from view while still remaining accessible for screen readers */\n\tlabelHidden?: boolean;\n\t/** The maximum value for the slider */\n\tmax?: number;\n\t/** The minimum value for the slider */\n\tmin?: number;\n\t/** The name of the input element */\n\tname?: string;\n\t/** Handler for when the element is blurred */\n\tonBlur?(): void;\n\t/** Handler for when the element is focused */\n\tonFocus?(): void;\n\t/** Handler for when the pointer moves out of the element */\n\tonOut?(): void;\n\t/** Handler for when the pointer moves over the element */\n\tonOver?(): void;\n\t/** Handler for when the value of the widget changes */\n\tonValue?(value?: number): void;\n\t/** If the rendered output should be displayed as a tooltip */\n\toutputIsTooltip?: boolean;\n\t/** Makes the slider readonly (it may be focused but not changed) */\n\treadOnly?: boolean;\n\t/** If the slider must be set */\n\trequired?: boolean;\n\t/** Toggles visibility of slider output */\n\tshowOutput?: boolean;\n\t/** Size of the slider increment */\n\tstep?: number;\n\t/** If the value provided by the slider are valid */\n\tvalid?: boolean;\n\t/** The initial value */\n\tinitialValue?: number;\n\t/** A controlled slider value */\n\tvalue?: number;\n\t/** Orients the slider vertically, false by default. */\n\tvertical?: boolean;\n\t/** Length of the vertical slider (only used if vertical is true) */\n\tverticalHeight?: string;\n\t/** The id used for the form input element */\n\twidgetId?: string;\n}\n\nexport interface SliderChildren {\n\t/** Adds a <label> element with the supplied text */\n\tlabel?: RenderResult;\n\t/** An optional function that returns a string or DNode for custom output format */\n\toutput?(value: number): RenderResult;\n}\n\nexport interface SliderICache {\n\tvalue?: number;\n\tinitialValue?: number;\n}\n\nconst factory = create({\n\ttheme,\n\tfocus,\n\ticache: createICacheMiddleware<SliderICache>()\n})\n\t.properties<SliderProperties>()\n\t.children<SliderChildren | undefined>();\n\nexport const Slider = factory(function Slider({\n\tid,\n\tmiddleware: { theme, focus, icache },\n\tproperties,\n\tchildren\n}) {\n\tconst {\n\t\taria = {},\n\t\tdisabled,\n\t\twidgetId = `slider-${id}}`,\n\t\tvalid,\n\t\tlabelAfter,\n\t\tlabelHidden,\n\t\tmax = 100,\n\t\tmin = 0,\n\t\tname,\n\t\treadOnly,\n\t\trequired,\n\t\tshowOutput = true,\n\t\tstep = 1,\n\t\tvertical = false,\n\t\tverticalHeight = '200px',\n\t\toutputIsTooltip = false,\n\t\ttheme: themeProp,\n\t\tvariant,\n\t\tclasses,\n\t\tonOut,\n\t\tonOver,\n\t\tonBlur,\n\t\tonFocus,\n\t\tonValue\n\t} = properties();\n\tconst [{ output, label } = { output: undefined, label: undefined }] = children();\n\n\tconst { initialValue = min } = properties();\n\tlet { value } = properties();\n\n\tif (value === undefined) {\n\t\tvalue = icache.get('value') || initialValue;\n\t\tconst existingInitialValue = icache.getOrSet('initialValue', min);\n\n\t\tif (initialValue !== existingInitialValue) {\n\t\t\tvalue = initialValue;\n\t\t\tif (initialValue > max) {\n\t\t\t\tvalue = max;\n\t\t\t} else if (initialValue < min) {\n\t\t\t\tvalue = min;\n\t\t\t}\n\n\t\t\ticache.set('value', value);\n\t\t\ticache.set('initialValue', initialValue);\n\t\t\tonValue && onValue(value);\n\t\t}\n\t} else {\n\t\tif (value > max) {\n\t\t\tvalue = max;\n\t\t} else if (value < min) {\n\t\t\tvalue = min;\n\t\t}\n\t\ticache.set('value', value);\n\t}\n\n\tconst themeCss = theme.classes(css);\n\n\tconst percentValue = ((value - min) / (max - min)) * 100;\n\n\tlet outputStyles: any = {};\n\tif (outputIsTooltip) {\n\t\toutputStyles = vertical ? { top: `${100 - percentValue}%` } : { left: `${percentValue}%` };\n\t}\n\n\tconst slider = (\n\t\t<div\n\t\t\tclasses={[themeCss.inputWrapper, fixedCss.inputWrapperFixed]}\n\t\t\tstyles={vertical ? { height: verticalHeight } : {}}\n\t\t>\n\t\t\t<input\n\t\t\t\tkey=\"input\"\n\t\t\t\t{...formatAriaProperties(aria)}\n\t\t\t\tclasses={[themeCss.input, fixedCss.nativeInput]}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tid={widgetId}\n\t\t\t\tfocus={focus.shouldFocus}\n\t\t\t\taria-invalid={valid === false ? 'true' : undefined}\n\t\t\t\tmax={`${max}`}\n\t\t\t\tmin={`${min}`}\n\t\t\t\tname={name}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\taria-readonly={readOnly ? 'true' : undefined}\n\t\t\t\trequired={required}\n\t\t\t\tstep={`${step}`}\n\t\t\t\tstyles={vertical ? { width: verticalHeight } : {}}\n\t\t\t\ttype=\"range\"\n\t\t\t\tvalue={`${value}`}\n\t\t\t\tonblur={() => onBlur && onBlur()}\n\t\t\t\tonfocus={() => onFocus && onFocus()}\n\t\t\t\tonpointerenter={() => onOver && onOver()}\n\t\t\t\tonpointerleave={() => onOut && onOut()}\n\t\t\t\toninput={(event: Event) => {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tconst value = parseFloat((event.target as HTMLInputElement).value);\n\n\t\t\t\t\ticache.set('value', value);\n\t\t\t\t\tonValue && onValue(value);\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tclasses={[themeCss.track, fixedCss.trackFixed]}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tstyles={vertical ? { width: verticalHeight } : {}}\n\t\t\t>\n\t\t\t\t<span\n\t\t\t\t\tclasses={[themeCss.fill, fixedCss.fillFixed]}\n\t\t\t\t\tstyles={{ width: `${percentValue}%` }}\n\t\t\t\t/>\n\t\t\t\t<span\n\t\t\t\t\tclasses={[themeCss.thumb, fixedCss.thumbFixed]}\n\t\t\t\t\tstyles={{ left: `${percentValue}%` }}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{showOutput ? (\n\t\t\t\t<output\n\t\t\t\t\tclasses={[themeCss.output, outputIsTooltip ? themeCss.outputTooltip : null]}\n\t\t\t\t\tfor={widgetId}\n\t\t\t\t\tstyles={outputStyles}\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t>\n\t\t\t\t\t{output ? output(value) : `${value}`}\n\t\t\t\t</output>\n\t\t\t) : null}\n\t\t</div>\n\t);\n\n\tconst content = [\n\t\tlabel ? (\n\t\t\t<Label\n\t\t\t\ttheme={themeProp}\n\t\t\t\tclasses={classes}\n\t\t\t\tvariant={variant}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tfocused={focus.shouldFocus()}\n\t\t\t\tvalid={valid}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\trequired={required}\n\t\t\t\thidden={labelHidden}\n\t\t\t\tsecondary={true}\n\t\t\t\tforId={widgetId}\n\t\t\t>\n\t\t\t\t{label}\n\t\t\t</Label>\n\t\t) : null,\n\t\tslider\n\t];\n\n\treturn (\n\t\t<div\n\t\t\tkey=\"root\"\n\t\t\tclasses={[\n\t\t\t\ttheme.variant(),\n\t\t\t\tthemeCss.root,\n\t\t\t\tdisabled ? themeCss.disabled : null,\n\t\t\t\tfocus.isFocused('input') ? themeCss.focused : null,\n\t\t\t\tvalid === false ? themeCss.invalid : null,\n\t\t\t\tvalid === true ? themeCss.valid : null,\n\t\t\t\treadOnly ? themeCss.readonly : null,\n\t\t\t\tvertical ? themeCss.vertical : null,\n\t\t\t\tfixedCss.rootFixed\n\t\t\t]}\n\t\t>\n\t\t\t{labelAfter ? content.reverse() : content}\n\t\t</div>\n\t);\n});\n\nexport default Slider;\n"]}