{"version":3,"file":"/Users/anthonygubler/development/dojo-org/widgets/src/wizard/index.tsx","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { create, tsx } from '@dojo/framework/core/vdom';\nimport { RenderResult } from '@dojo/framework/core/interfaces';\nimport theme from '../middleware/theme';\nimport Icon from '../icon';\nimport * as css from '../theme/default/wizard.m.css';\nimport * as avatarCss from '../theme/default/avatar.m.css';\nimport Avatar from '../avatar';\nimport { isRenderResult } from '../common/util';\n\nexport interface Step {\n\ttitle?: RenderResult;\n\tsubTitle?: RenderResult;\n\tdescription?: RenderResult;\n\tstatus?: StepStatus;\n}\nexport interface WizardProperties {\n\t/** A callback that will be notified when a step is clicked if this is clickable */\n\tonStep?(step: number): void;\n\t/** Direction for steps. Defaults to horizontal */\n\tdirection?: 'horizontal' | 'vertical';\n\t/** Indicates whether steps should respond to clicks. Defaults to false */\n\tclickable?: boolean;\n\t/** The active step can be controlled to automatically set step status. Will be overridden by statuses provided to each step. If this property is not used, individual statuses should be passed to steps */\n\tactiveStep?: number;\n\t/** The steps available to the wizard */\n\tsteps: Step[];\n}\n\nexport type StepRenderer = (\n\tstatus: StepStatus | undefined,\n\tindex: number,\n\tstep: Step\n) => RenderResult;\n\nexport interface WizardChildren {\n\t/** Custom renderer for the wizardSteps, receives the checkbox group middleware and options */\n\tstep?: StepRenderer;\n}\n\nexport type StepStatus = 'pending' | 'inProgress' | 'complete' | 'error';\n\nconst factory = create({ theme })\n\t.properties<WizardProperties>()\n\t.children<WizardChildren | RenderResult | RenderResult[] | undefined>();\n\nexport default factory(function Wizard({ properties, children, middleware: { theme } }) {\n\tconst themedCss = theme.classes(css);\n\tconst {\n\t\tactiveStep,\n\t\tdirection = 'horizontal',\n\t\tonStep,\n\t\tclickable = false,\n\t\tclasses,\n\t\tvariant,\n\t\tsteps,\n\t\ttheme: themeProp\n\t} = properties();\n\n\tlet stepRenderer: StepRenderer | undefined;\n\tconst [renderer] = children();\n\n\tif (renderer && !isRenderResult(renderer)) {\n\t\tstepRenderer = renderer.step;\n\t}\n\n\tconst stepWrappers = steps.map((step, index) => {\n\t\tlet content;\n\t\tlet defaultStatus: StepStatus | undefined;\n\n\t\tif (activeStep === undefined) {\n\t\t\tdefaultStatus = undefined;\n\t\t} else if (activeStep > index) {\n\t\t\tdefaultStatus = 'complete';\n\t\t} else if (activeStep < index) {\n\t\t\tdefaultStatus = 'pending';\n\t\t} else {\n\t\t\tdefaultStatus = 'inProgress';\n\t\t}\n\n\t\tconst { title, description, subTitle, status = defaultStatus } = step;\n\n\t\tif (stepRenderer) {\n\t\t\treturn {\n\t\t\t\tcontent: stepRenderer(defaultStatus, index, step),\n\t\t\t\tstatus\n\t\t\t};\n\t\t}\n\n\t\tswitch (status) {\n\t\t\tcase 'complete':\n\t\t\t\tcontent = (\n\t\t\t\t\t<Icon type=\"checkIcon\" theme={themeProp} classes={classes} variant={variant} />\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\tcase 'error':\n\t\t\t\tcontent = (\n\t\t\t\t\t<Icon type=\"closeIcon\" theme={themeProp} classes={classes} variant={variant} />\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tcontent = String(index + 1);\n\t\t}\n\n\t\treturn {\n\t\t\tcontent: (\n\t\t\t\t<virtual>\n\t\t\t\t\t<div classes={themedCss.stepIcon}>\n\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\ttheme={theme.compose(\n\t\t\t\t\t\t\t\tavatarCss,\n\t\t\t\t\t\t\t\tcss,\n\t\t\t\t\t\t\t\t'avatar'\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tclasses={classes}\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\toutline={Boolean(status !== 'inProgress')}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t</Avatar>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div classes={[theme.variant(), themedCss.stepContent]}>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclasses={[\n\t\t\t\t\t\t\t\tthemedCss.stepTitle,\n\t\t\t\t\t\t\t\t!title && themedCss.noTitle,\n\t\t\t\t\t\t\t\t!description && themedCss.noDescription\n\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t\t<div classes={themedCss.stepSubTitle}>{subTitle}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div classes={themedCss.stepDescription}>{description}</div>\n\t\t\t\t\t\t{children()[index]}\n\t\t\t\t\t</div>\n\t\t\t\t</virtual>\n\t\t\t),\n\t\t\tstatus\n\t\t};\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\tthemedCss.root,\n\t\t\t\tdirection === 'horizontal' ? themedCss.horizontal : themedCss.vertical,\n\t\t\t\tclickable && themedCss.clickable\n\t\t\t]}\n\t\t>\n\t\t\t{stepWrappers.map(({ content, status }, index) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={`step${index + 1}`}\n\t\t\t\t\tclasses={[\n\t\t\t\t\t\tthemedCss.step,\n\t\t\t\t\t\tstatus === 'complete' && themedCss.complete,\n\t\t\t\t\t\tstatus === 'pending' && themedCss.pending,\n\t\t\t\t\t\tstatus === 'error' && themedCss.error\n\t\t\t\t\t]}\n\t\t\t\t\tonclick={() => {\n\t\t\t\t\t\tif (clickable && onStep) {\n\t\t\t\t\t\t\tonStep(index);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div classes={themedCss.tail} />\n\t\t\t\t\t{content}\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n});\n"]}