{"version":3,"file":"/Users/anthonygubler/development/dojo-org/widgets/src/switch/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 theme from '../middleware/theme';\nimport { create, tsx } from '@dojo/framework/core/vdom';\n\nimport { formatAriaProperties } from '../common/util';\nimport Label from '../label';\nimport * as css from '../theme/default/switch.m.css';\n\ninterface SwitchProperties {\n\t/** Custom aria attributes */\n\taria?: { [key: string]: string | null };\n\t/** Whether the switch is disabled or clickable */\n\tdisabled?: boolean;\n\t/** Whether the label is hidden or displayed */\n\tlabelHidden?: boolean;\n\t/** The name attribute for the switch */\n\tname?: string;\n\t/** Handler for events triggered by switch losing focus */\n\tonBlur?(): void;\n\t/** Handler for events triggered by \"on focus\" */\n\tonFocus?(): void;\n\t/** Handler for events triggered by \"on out\" */\n\tonOut?(): void;\n\t/** Handler for events triggered by \"on over\" */\n\tonOver?(): void;\n\t/** Handler for when the value of the widget changes */\n\tonValue(checked: boolean): void;\n\t/** Makes the switch readonly (it may be focused but not changed) */\n\treadOnly?: boolean;\n\t/** Determines if this input is required, styles accordingly */\n\trequired?: boolean;\n\t/** Toggles the invalid/valid states of the switch */\n\tvalid?: boolean;\n\t/** The current value; checked state of the switch */\n\tvalue: boolean;\n}\n\nexport interface SwitchChildren {\n\t/** The label to be displayed for the switch */\n\tlabel?: RenderResult;\n\t/** Label to show in the \"off\" position of the switch */\n\toffLabel?: RenderResult;\n\t/** Label to show in the \"on\" position of the switch */\n\tonLabel?: RenderResult;\n}\n\nconst factory = create({ theme, focus })\n\t.properties<SwitchProperties>()\n\t.children<SwitchChildren | undefined>();\n\nexport default factory(function Switch({ children, properties, id, middleware: { theme, focus } }) {\n\tconst {\n\t\taria = {},\n\t\tclasses,\n\t\tdisabled,\n\t\tlabelHidden,\n\t\tname,\n\t\tonBlur,\n\t\tonFocus,\n\t\tonValue,\n\t\tonOut,\n\t\tonOver,\n\t\treadOnly,\n\t\trequired,\n\t\ttheme: themeProp,\n\t\tvalid,\n\t\tvariant,\n\t\tvalue = false\n\t} = properties();\n\n\tconst [{ label, offLabel, onLabel } = {} as SwitchChildren] = children();\n\tconst themedCss = theme.classes(css);\n\tconst idBase = `switch-${id}`;\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\tthemedCss.root,\n\t\t\t\tvalue ? themedCss.checked : null,\n\t\t\t\tdisabled ? themedCss.disabled : null,\n\t\t\t\tfocus.isFocused('root') ? themedCss.focused : null,\n\t\t\t\tvalid === false ? themedCss.invalid : null,\n\t\t\t\tvalid === true ? themedCss.valid : null,\n\t\t\t\treadOnly ? themedCss.readonly : null,\n\t\t\t\trequired ? themedCss.required : null\n\t\t\t]}\n\t\t>\n\t\t\t{offLabel && (\n\t\t\t\t<div\n\t\t\t\t\tkey=\"offlabel\"\n\t\t\t\t\tclasses={themedCss.offLabel}\n\t\t\t\t\taria-hidden={value ? 'true' : undefined}\n\t\t\t\t>\n\t\t\t\t\t{offLabel}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div classes={themedCss.inputWrapper}>\n\t\t\t\t<div classes={themedCss.track} />\n\t\t\t\t<div classes={themedCss.underlay}>\n\t\t\t\t\t<div classes={themedCss.thumb}>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid={idBase}\n\t\t\t\t\t\t\t{...formatAriaProperties(aria)}\n\t\t\t\t\t\t\tclasses={themedCss.nativeControl}\n\t\t\t\t\t\t\tchecked={value}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tfocus={focus.shouldFocus()}\n\t\t\t\t\t\t\taria-invalid={valid === false ? 'true' : undefined}\n\t\t\t\t\t\t\tname={name}\n\t\t\t\t\t\t\treadonly={readOnly}\n\t\t\t\t\t\t\taria-readonly={readOnly === true ? 'true' : undefined}\n\t\t\t\t\t\t\trequired={required}\n\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\tvalue={`${value}`}\n\t\t\t\t\t\t\trole=\"switch\"\n\t\t\t\t\t\t\taria-checked={value ? 'true' : 'false'}\n\t\t\t\t\t\t\tonblur={() => onBlur && onBlur()}\n\t\t\t\t\t\t\tonchange={(event: Event) => {\n\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\tconst checkbox = event.target as HTMLInputElement;\n\t\t\t\t\t\t\t\tonValue(checkbox.checked);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonfocus={() => onFocus && onFocus()}\n\t\t\t\t\t\t\tonpointerenter={() => onOver && onOver()}\n\t\t\t\t\t\t\tonpointerleave={() => onOut && onOut()}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{onLabel && (\n\t\t\t\t<div\n\t\t\t\t\tkey=\"onLabel\"\n\t\t\t\t\tclasses={themedCss.onLabel}\n\t\t\t\t\taria-hidden={value ? undefined : 'true'}\n\t\t\t\t>\n\t\t\t\t\t{onLabel}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{label && (\n\t\t\t\t<Label\n\t\t\t\t\tkey=\"label\"\n\t\t\t\t\tclasses={classes}\n\t\t\t\t\ttheme={themeProp}\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\tfocused={focus.isFocused('root')}\n\t\t\t\t\tvalid={valid}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\trequired={required}\n\t\t\t\t\thidden={labelHidden}\n\t\t\t\t\tforId={idBase}\n\t\t\t\t\tsecondary={true}\n\t\t\t\t>\n\t\t\t\t\t{label}\n\t\t\t\t</Label>\n\t\t\t)}\n\t\t</div>\n\t);\n});\n"]}