{"version":3,"file":"/Users/anthonygubler/development/dojo-org/widgets/src/card/index.tsx","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAExD,OAAO,KAAK,GAAG,MAAM,6BAA6B,CAAC;AACnD,OAAO,KAAK,MAAM,qBAAqB,CAAC;AA0BxC,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;KAC/B,UAAU,EAAkB;KAC5B,QAAQ,EAA4B,CAAC;AAEvC,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE;IACxF,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IACpC,MAAM,EACL,OAAO,EACP,QAAQ,EACR,UAAU,EACV,MAAM,EACN,KAAK,EACL,QAAQ,EACR,IAAI,GAAG,UAAU,EACjB,GAAG,UAAU,EAAE,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAK,EAAmB,CAAC;IAE9F,OAAO,CACN,aACC,GAAG,EAAC,MAAM,EACV,OAAO,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,QAAQ,CAAC,IAAI,EAAE,IAAI,KAAK,UAAU,IAAI,QAAQ,CAAC,QAAQ,CAAC;QAEnF,aACC,GAAG,EAAC,SAAS,EACb,OAAO,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAC9D,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,IAAI,OAAO,EAAE;YAElC,MAAM,IAAI,CACV,aAAK,GAAG,EAAC,QAAQ,EAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,IACxC,MAAM,CACF,CACN;YACA,QAAQ,IAAI,CACZ,aACC,KAAK,EAAE,UAAU,EACjB,OAAO,EAAE;oBACR,QAAQ,CAAC,KAAK;oBACd,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU;iBACnD,EACD,MAAM,EAAE;oBACP,eAAe,EAAE,QAAQ,QAAQ,IAAI;iBACrC,GACA,CACF;YACA,KAAK,IAAI,CACT,aAAK,OAAO,EAAE,QAAQ,CAAC,YAAY;gBACjC,YAAI,OAAO,EAAE,QAAQ,CAAC,KAAK,IAAG,KAAK,CAAM;gBACzC,QAAQ,IAAI,YAAI,OAAO,EAAE,QAAQ,CAAC,QAAQ,IAAG,QAAQ,CAAM,CACvD,CACN;YACA,OAAO,IAAI,aAAK,OAAO,EAAE,QAAQ,CAAC,cAAc,IAAG,OAAO,CAAO,CAC7D;QACL,CAAC,aAAa,IAAI,WAAW,CAAC,IAAI,CAClC,aAAK,GAAG,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,CAAC,OAAO;YAC1C,aAAa,IAAI,aAAK,OAAO,EAAE,QAAQ,CAAC,aAAa,IAAG,aAAa,CAAO;YAC5E,WAAW,IAAI,aAAK,OAAO,EAAE,QAAQ,CAAC,WAAW,IAAG,WAAW,CAAO,CAClE,CACN,CACI,CACN,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,eAAe,IAAI,CAAC","sourcesContent":["import { tsx, create } from '@dojo/framework/core/vdom';\nimport { RenderResult } from '@dojo/framework/core/interfaces';\nimport * as css from '../theme/default/card.m.css';\nimport theme from '../middleware/theme';\n\nexport interface CardProperties {\n\t/** Handler for events triggered by click of the card */\n\tonClick?: () => void;\n\t/** url source for media */\n\tmediaSrc?: string;\n\t/** The title description fo the media */\n\tmediaTitle?: string;\n\t/** to render a square card */\n\tsquare?: boolean;\n\t/** The title text for the card */\n\ttitle?: string;\n\t/** The subtitle text for the card */\n\tsubtitle?: string;\n\t/** The kind of card */\n\tkind?: 'elevated' | 'outlined';\n}\n\nexport interface CardChildren {\n\theader?: RenderResult;\n\tcontent?: RenderResult;\n\tactionButtons?: RenderResult;\n\tactionIcons?: RenderResult;\n}\n\nconst factory = create({ theme })\n\t.properties<CardProperties>()\n\t.children<CardChildren | undefined>();\n\nexport const Card = factory(function Card({ children, properties, middleware: { theme } }) {\n\tconst themeCss = theme.classes(css);\n\tconst {\n\t\tonClick,\n\t\tmediaSrc,\n\t\tmediaTitle,\n\t\tsquare,\n\t\ttitle,\n\t\tsubtitle,\n\t\tkind = 'elevated'\n\t} = properties();\n\tconst { header, content, actionButtons, actionIcons } = children()[0] || ({} as CardChildren);\n\n\treturn (\n\t\t<div\n\t\t\tkey=\"root\"\n\t\t\tclasses={[theme.variant(), themeCss.root, kind === 'outlined' && themeCss.outlined]}\n\t\t>\n\t\t\t<div\n\t\t\t\tkey=\"content\"\n\t\t\t\tclasses={[themeCss.content, onClick ? themeCss.primary : null]}\n\t\t\t\tonclick={() => onClick && onClick()}\n\t\t\t>\n\t\t\t\t{header && (\n\t\t\t\t\t<div key=\"header\" classes={themeCss.header}>\n\t\t\t\t\t\t{header}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{mediaSrc && (\n\t\t\t\t\t<div\n\t\t\t\t\t\ttitle={mediaTitle}\n\t\t\t\t\t\tclasses={[\n\t\t\t\t\t\t\tthemeCss.media,\n\t\t\t\t\t\t\tsquare ? themeCss.mediaSquare : themeCss.media16by9\n\t\t\t\t\t\t]}\n\t\t\t\t\t\tstyles={{\n\t\t\t\t\t\t\tbackgroundImage: `url(\"${mediaSrc}\")`\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{title && (\n\t\t\t\t\t<div classes={themeCss.titleWrapper}>\n\t\t\t\t\t\t{<h2 classes={themeCss.title}>{title}</h2>}\n\t\t\t\t\t\t{subtitle && <h3 classes={themeCss.subtitle}>{subtitle}</h3>}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{content && <div classes={themeCss.contentWrapper}>{content}</div>}\n\t\t\t</div>\n\t\t\t{(actionButtons || actionIcons) && (\n\t\t\t\t<div key=\"actions\" classes={themeCss.actions}>\n\t\t\t\t\t{actionButtons && <div classes={themeCss.actionButtons}>{actionButtons}</div>}\n\t\t\t\t\t{actionIcons && <div classes={themeCss.actionIcons}>{actionIcons}</div>}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n});\n\nexport default Card;\n"]}