-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSortTable-SortTable-stories.c8283806.iframe.bundle.js
1 lines (1 loc) · 39.8 KB
/
SortTable-SortTable-stories.c8283806.iframe.bundle.js
1
"use strict";(self.webpackChunkcommon_components=self.webpackChunkcommon_components||[]).push([[1082],{"./node_modules/@react-aria/visually-hidden/dist/import.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{s:()=>$5c3e21d68f1c4674$export$439d29a4e110a164});var _react_aria_utils__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@react-aria/utils/dist/import.mjs"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../epi-systems-frontend/node_modules/react/index.js"),_react_aria_interactions__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@react-aria/interactions/dist/import.mjs");const $5c3e21d68f1c4674$var$styles={border:0,clip:"rect(0 0 0 0)",clipPath:"inset(50%)",height:"1px",margin:"-1px",overflow:"hidden",padding:0,position:"absolute",width:"1px",whiteSpace:"nowrap"};function $5c3e21d68f1c4674$export$439d29a4e110a164(props){let{children,elementType:Element="div",isFocusable,style,...otherProps}=props,{visuallyHiddenProps}=function $5c3e21d68f1c4674$export$a966af930f325cab(props={}){let{style,isFocusable}=props,[isFocused,setFocused]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(!1),{focusWithinProps}=(0,_react_aria_interactions__WEBPACK_IMPORTED_MODULE_1__.Rb)({isDisabled:!isFocusable,onFocusWithinChange:val=>setFocused(val)});return{visuallyHiddenProps:{...focusWithinProps,style:(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>isFocused?style:style?{...$5c3e21d68f1c4674$var$styles,...style}:$5c3e21d68f1c4674$var$styles),[isFocused])}}}(props);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Element,(0,_react_aria_utils__WEBPACK_IMPORTED_MODULE_2__.v6)(otherProps,visuallyHiddenProps),children)}},"./src/Components/SortTable/SortTable.stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ControlledInputs:()=>ControlledInputs,Primary:()=>Primary,TableWithInputs:()=>TableWithInputs,__namedExportsOrder:()=>__namedExportsOrder,default:()=>SortTable_stories});var react=__webpack_require__("../epi-systems-frontend/node_modules/react/index.js"),SortTable=__webpack_require__("./src/Components/SortTable/index.js"),injectStylesIntoStyleTag=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),styleDomAPI=__webpack_require__("./node_modules/style-loader/dist/runtime/styleDomAPI.js"),styleDomAPI_default=__webpack_require__.n(styleDomAPI),insertBySelector=__webpack_require__("./node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),setAttributesWithoutAttributes=__webpack_require__("./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),setAttributesWithoutAttributes_default=__webpack_require__.n(setAttributesWithoutAttributes),insertStyleElement=__webpack_require__("./node_modules/style-loader/dist/runtime/insertStyleElement.js"),insertStyleElement_default=__webpack_require__.n(insertStyleElement),styleTagTransform=__webpack_require__("./node_modules/style-loader/dist/runtime/styleTagTransform.js"),styleTagTransform_default=__webpack_require__.n(styleTagTransform),styles_stories=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Components/SortTable/styles.stories.scss"),options={};options.styleTagTransform=styleTagTransform_default(),options.setAttributes=setAttributesWithoutAttributes_default(),options.insert=insertBySelector_default().bind(null,"head"),options.domAPI=styleDomAPI_default(),options.insertStyleElement=insertStyleElement_default();injectStylesIntoStyleTag_default()(styles_stories.A,options);styles_stories.A&&styles_stories.A.locals&&styles_stories.A.locals;var Select=__webpack_require__("./src/Components/Select/index.js"),TextField=__webpack_require__("./src/Components/TextField/index.js"),jsx_runtime=__webpack_require__("../epi-systems-frontend/node_modules/react/jsx-runtime.js");const SortTable_stories={title:"Example/SortTable",component:SortTable.A,tags:["autodocs"]};function statusFormatter(text){return(0,jsx_runtime.jsx)("span",{className:`status-${text.toLowerCase()}`,children:text})}statusFormatter.displayName="statusFormatter";const Primary={args:{id:"visits",columns:[{id:"date",name:"Date",sortBy:"date"},{id:"auditor",name:"Auditor"},{id:"location",name:"Location"},{id:"type",name:"Type"},{id:"status",name:"Status",formatter:statusFormatter}],data:[{date:"01/31/2011",auditor:"Angie Ritchie",location:"virtual",type:"evaluation",status:"Scheduled"},{date:"06/21/2021",auditor:"Beulah Ferry",location:"virtual",type:"training",status:"Scheduled"},{date:"01/07/2023",auditor:"Danielle Price",location:"on-site",type:"evaluation",status:"Cancelled"},{date:"09/20/2021",auditor:"Paula Beatty",location:"on-site",type:"training",status:"Scheduled"},{date:"02/25/2013",auditor:"Janet Schimmel",location:"virtual",type:"evaluation",status:"Cancelled"},{date:"05/14/2015",auditor:"Jimmy Buckridge",location:"virtual",type:"evaluation",status:"Scheduled"},{date:"04/13/2015",auditor:"Doris Reilly",location:"on-site",type:"training",status:"Scheduled"},{date:"11/02/2012",auditor:"Homer Roob",location:"on-site",type:"evaluation",status:"Completed"},{date:"02/07/2010",auditor:"Roy Windler",location:"virtual",type:"evaluation",status:"Scheduled"},{date:"04/28/2014",auditor:"Lorena Kutch",location:"on-site",type:"training",status:"Completed"}],label:"Visits Table",caption:"Facility Visits",initialSortDescriptor:{column:"date",direction:"descending",sortBy:"date"},onSelectionChange:e=>console.log("selectionChange callback",e.entries())},parameters:{docs:{description:{story:"Sort Table with minimal setup"}}}};function renderCheckbox(text,cell,row){return(0,jsx_runtime.jsx)("input",{type:"checkbox",name:"input-select",value:row.id,"aria-label":"Select row",onClick:e=>{const tr=e.target.closest("tr");tr.hasAttribute("aria-selected")?tr.removeAttribute("aria-selected"):tr.setAttribute("aria-selected",!0)}})}function renderInput(text,cell){return(0,jsx_runtime.jsx)(TextField.A,{type:"text",name:cell.key,label:cell.parentKey,showLabel:!1,defaultValue:text})}renderCheckbox.displayName="renderCheckbox",renderInput.displayName="renderInput";const handleKeyDown=e=>{e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()};function renderTextarea(text,cell){return(0,jsx_runtime.jsx)("textarea",{name:cell.key,defaultValue:text,onKeyDown:handleKeyDown,onKeyUp:handleKeyDown})}function renderSelectbox(text,cell){return(0,jsx_runtime.jsx)(Select.A,{value:text,name:cell.key,options:[{name:"Submitted",value:"submitted"},{name:"Pending",value:"pending"},{name:"Complete",value:"complete"}],label:"status",showLabel:!1})}renderTextarea.displayName="renderTextarea",renderSelectbox.displayName="renderSelectbox";const TableWithInputs={args:{columns:[{id:"select",name:"",sort:!1,formatter:renderCheckbox},{id:"dateEntered",name:"Date Entered"},{id:"description",name:"Description",sort:!1,formatter:renderTextarea},{id:"amount",name:"Amount",formatter:renderInput},{id:"status",name:"Status",formatter:renderSelectbox}],footer:[{},{text:"Styled Footer Cell",className:"footerCellStyle"},{text:"Total Amount:"},{callback:data=>data.reduce(((prev,curr)=>prev+curr.amount),0),className:"bold"},{}],data:[{id:1,dateEntered:"08/16/2021",description:"Total Extra Cost",amount:1200,status:"complete"},{id:2,dateEntered:"09/23/2021",description:"Extra Obligation",amount:200,status:"pending"},{id:3,dateEntered:"12/25/2020",description:"Contract Cost",amount:50,status:"submitted"}],id:"invoice",selectionMode:"none",caption:"Invoices",onRowClick:function onRowClick(e,item,index){const checkbox=e.target.closest("tr").querySelector("[name=input-select]");if("INPUT"!==e.target.tagName&&"TEXTAREA"!==e.target.tagName&&"SELECT"!==e.target.tagName)return checkbox.click()},hasInputElements:!0},parameters:{docs:{description:{story:"An example of how to transform your data into form elements. The callback `onRowClick` is used here for row selection instead of `onRowAction` or `onSelection` which do not play well with clickable elements in the table cell."}}}},ControlledInputsTemplate=args=>{const{data,...props}=args,[tableData,setTableData]=(0,react.useState)(data),[totalCount,setTotalCount]=(0,react.useState)(0),[totalPrice,setTotalPrice]=(0,react.useState)(0);function renderControlledInput(text,cell){return(0,jsx_runtime.jsx)(TextField.A,{type:"number",name:cell.key,label:cell.parentKey,showLabel:!1,defaultValue:text,onChange:function handleChange(val){const[index,key]=cell.key.split("--"),newData=[...tableData];newData[index-1][key]=parseFloat(val),newData[index-1].total=newData[index-1].count*newData[index-1].price,setTableData(newData)},spinner:!0})}(0,react.useEffect)((()=>{setTotalCount(tableData.reduce(((prev,curr)=>prev+curr.count),0)),setTotalPrice(new Intl.NumberFormat("en-US",{style:"currency",currency:"USD"}).format(tableData.reduce(((prev,curr)=>prev+curr.total),0)))}),[tableData]);const columns=[{id:"dateEntered",name:"Date Entered"},{id:"count",name:"Count",formatter:renderControlledInput},{id:"price",name:"Price",formatter:renderControlledInput},{id:"total",name:"Total",formatter:function renderTotals(text,cell){const[index,key]=cell.key.split("--");return(0,jsx_runtime.jsx)(TextField.A,{type:"number",name:cell.key,label:cell.parentKey,showLabel:!1,value:tableData[index-1].total,isDisabled:!0})}}],footer=[{text:"Total Count:",className:"CC-ut-display-block CC-ut-align-right"},{text:totalCount},{text:"Total Price:",className:"CC-ut-display-block CC-ut-align-right"},{text:totalPrice}];return(0,jsx_runtime.jsx)(SortTable.A,{data:tableData,columns,footer,...props})};ControlledInputsTemplate.displayName="ControlledInputsTemplate";const ControlledInputs=ControlledInputsTemplate.bind();ControlledInputs.args={data:[{id:1,dateEntered:"08/16/2021",count:4,price:1200,total:4800},{id:2,dateEntered:"09/23/2021",count:3,price:200,total:600},{id:3,dateEntered:"12/25/2020",count:10,price:50,total:500}],id:"invoice",selectionMode:"none",caption:"Invoices",hasInputElements:!0},ControlledInputs.parameters={docs:{description:{story:"A detailed example of how one might use controlled inputs withing a sortable table to calculate column totals in real time"}}},Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n args: {\n id: 'visits',\n columns,\n data,\n label: 'Visits Table',\n caption: 'Facility Visits',\n initialSortDescriptor: {\n column: 'date',\n direction: 'descending',\n sortBy: 'date'\n },\n onSelectionChange: e => console.log('selectionChange callback', e.entries())\n // onRowClick: (e) => console.log('rowClick callback'),\n },\n parameters: {\n docs: {\n description: {\n story: 'Sort Table with minimal setup'\n }\n }\n }\n}",...Primary.parameters?.docs?.source}}},TableWithInputs.parameters={...TableWithInputs.parameters,docs:{...TableWithInputs.parameters?.docs,source:{originalSource:"{\n args: {\n columns: [{\n id: 'select',\n name: '',\n sort: false,\n formatter: renderCheckbox\n }, {\n id: 'dateEntered',\n name: 'Date Entered'\n }, {\n id: 'description',\n name: 'Description',\n sort: false,\n formatter: renderTextarea\n }, {\n id: 'amount',\n name: 'Amount',\n formatter: renderInput\n }, {\n id: 'status',\n name: 'Status',\n formatter: renderSelectbox\n }],\n footer: [{}, {\n text: 'Styled Footer Cell',\n className: 'footerCellStyle'\n }, {\n text: 'Total Amount:'\n }, {\n callback: data => data.reduce((prev, curr) => prev + curr.amount, 0),\n className: 'bold'\n }, {}],\n data: [{\n id: 1,\n dateEntered: '08/16/2021',\n description: 'Total Extra Cost',\n amount: 1200,\n status: 'complete'\n }, {\n id: 2,\n dateEntered: '09/23/2021',\n description: 'Extra Obligation',\n amount: 200,\n status: 'pending'\n }, {\n id: 3,\n dateEntered: '12/25/2020',\n description: 'Contract Cost',\n amount: 50,\n status: 'submitted'\n }],\n id: 'invoice',\n selectionMode: 'none',\n caption: 'Invoices',\n onRowClick,\n // onRowAction: onRowClick,\n hasInputElements: true\n },\n parameters: {\n docs: {\n description: {\n story: 'An example of how to transform your data into form elements. The callback `onRowClick` is used here for row selection instead of `onRowAction` or `onSelection` which do not play well with clickable elements in the table cell.'\n }\n }\n }\n}",...TableWithInputs.parameters?.docs?.source}}},ControlledInputs.parameters={...ControlledInputs.parameters,docs:{...ControlledInputs.parameters?.docs,source:{originalSource:"args => {\n const {\n data,\n ...props\n } = args;\n const [tableData, setTableData] = useState(data);\n const [totalCount, setTotalCount] = useState(0);\n const [totalPrice, setTotalPrice] = useState(0);\n useEffect(() => {\n setTotalCount(tableData.reduce((prev, curr) => prev + curr.count, 0));\n setTotalPrice(new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD'\n }).format(tableData.reduce((prev, curr) => prev + curr.total, 0)));\n }, [tableData]);\n function renderControlledInput(text, cell) {\n function handleChange(val) {\n const [index, key] = cell.key.split('--');\n const newData = [...tableData];\n newData[index - 1][key] = parseFloat(val);\n newData[index - 1].total = newData[index - 1].count * newData[index - 1].price;\n setTableData(newData);\n }\n return <TextField type='number' name={cell.key} label={cell.parentKey} showLabel={false} defaultValue={text} onChange={handleChange} spinner />;\n }\n function renderTotals(text, cell) {\n const [index, key] = cell.key.split('--');\n return <TextField type='number' name={cell.key} label={cell.parentKey} showLabel={false} value={tableData[index - 1].total} isDisabled />;\n }\n const columns = [{\n id: 'dateEntered',\n name: 'Date Entered'\n }, {\n id: 'count',\n name: 'Count',\n formatter: renderControlledInput\n }, {\n id: 'price',\n name: 'Price',\n formatter: renderControlledInput\n }, {\n id: 'total',\n name: 'Total',\n formatter: renderTotals\n }];\n const footer = [{\n text: 'Total Count:',\n className: 'CC-ut-display-block CC-ut-align-right'\n }, {\n text: totalCount\n }, {\n text: 'Total Price:',\n className: 'CC-ut-display-block CC-ut-align-right'\n }, {\n text: totalPrice\n }];\n return <SortTable data={tableData} columns={columns} footer={footer} {...props} />;\n}",...ControlledInputs.parameters?.docs?.source}}};const __namedExportsOrder=["Primary","TableWithInputs","ControlledInputs"]},"./src/Components/SortTable/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>Components_SortTable});var react=__webpack_require__("../epi-systems-frontend/node_modules/react/index.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),dist_import=__webpack_require__("./node_modules/@react-stately/data/dist/import.mjs"),table_dist_import=__webpack_require__("./node_modules/@react-stately/table/dist/import.mjs"),clsx=__webpack_require__("./node_modules/clsx/dist/clsx.mjs"),Table=__webpack_require__("./src/Components/Table/index.js"),utils=__webpack_require__("./src/utils/index.js"),injectStylesIntoStyleTag=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),styleDomAPI=__webpack_require__("./node_modules/style-loader/dist/runtime/styleDomAPI.js"),styleDomAPI_default=__webpack_require__.n(styleDomAPI),insertBySelector=__webpack_require__("./node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),setAttributesWithoutAttributes=__webpack_require__("./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),setAttributesWithoutAttributes_default=__webpack_require__.n(setAttributesWithoutAttributes),insertStyleElement=__webpack_require__("./node_modules/style-loader/dist/runtime/insertStyleElement.js"),insertStyleElement_default=__webpack_require__.n(insertStyleElement),styleTagTransform=__webpack_require__("./node_modules/style-loader/dist/runtime/styleTagTransform.js"),styleTagTransform_default=__webpack_require__.n(styleTagTransform),styles=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Components/SortTable/styles.scss"),options={};options.styleTagTransform=styleTagTransform_default(),options.setAttributes=setAttributesWithoutAttributes_default(),options.insert=insertBySelector_default().bind(null,"head"),options.domAPI=styleDomAPI_default(),options.insertStyleElement=insertStyleElement_default();injectStylesIntoStyleTag_default()(styles.A,options);styles.A&&styles.A.locals&&styles.A.locals;var jsx_runtime=__webpack_require__("../epi-systems-frontend/node_modules/react/jsx-runtime.js");const SortTable=({id=(0,utils.V)(6),className,data,columns,label="Search results table",showLabel=!1,rowKey,initialSortDescriptor,footer,...props})=>{const list=(0,dist_import.wp)({async sort({sortDescriptor}){const{sortBy}=sortDescriptor;"function"==typeof sortBy?data.sort(sortBy.bind(sortDescriptor)):"date"===sortBy?data.sort(dateSort.bind(sortDescriptor)):data.sort(defaultSort.bind(sortDescriptor))},initialSortDescriptor}),handleSort=sortDescriptor=>{const{sortBy}=columns.filter((column=>column.id===sortDescriptor.column))[0];list.sort({...sortDescriptor,sortBy})};return(0,react.useEffect)((()=>{initialSortDescriptor&&handleSort(initialSortDescriptor)}),[initialSortDescriptor]),(0,jsx_runtime.jsxs)("div",{className:"sortTable",children:[label&&showLabel&&(0,jsx_runtime.jsx)("div",{className:"CC-sortTable-label",children:label}),(0,jsx_runtime.jsxs)(Table.A,{...props,id,className:(0,clsx.A)(["CC-sortTable",className]),"aria-label":label,sortDescriptor:list.sortDescriptor,onSortChange:handleSort,children:[(0,jsx_runtime.jsx)(table_dist_import.A0,{children:columns.map((column=>{let{sort=!0,id:columnId,name,...options}=column;return(0,jsx_runtime.jsx)(table_dist_import.VP,{allowsSorting:sort,...options,children:column.name},columnId)}))}),(0,jsx_runtime.jsx)(table_dist_import.BF,{items:data,children:item=>{const key=rowKey?item[rowKey]:item.id?item.id:(0,utils.V)(6);return(0,jsx_runtime.jsx)(table_dist_import.fI,{children:columnKey=>(0,jsx_runtime.jsx)(table_dist_import.fh,{children:item[columnKey]},`${key}--${columnKey}`)},key)}}),footer&&(0,jsx_runtime.jsx)("tfoot",{children:(0,jsx_runtime.jsx)("tr",{children:footer.map(((cell,i)=>{let content,Content;return Object.hasOwn(cell,"text")&&(content=cell.text),Object.hasOwn(cell,"callback")&&(content=cell.callback(data)),Object.hasOwn(cell,"className")&&(Content=()=>(0,jsx_runtime.jsx)("span",{className:cell.className,children:content},`span-${i}`)),(0,jsx_runtime.jsx)("td",{children:Content?(0,jsx_runtime.jsx)(Content,{}):content},i)}))})})]})]})};function defaultSort(a,b){const first=a[this.column],second=b[this.column];let cmp=(parseInt(first)||first)<(parseInt(second)||second)?-1:1;return"descending"===this.direction&&(cmp*=-1),cmp}function dateSort(a,b){let cmp=new Date(a[this.column])<new Date(b[this.column])?-1:1;return"descending"===this.direction&&(cmp*=-1),cmp}SortTable.displayName="SortTable";const Components_SortTable=SortTable;SortTable.propTypes={data:prop_types_default().arrayOf(prop_types_default().object).isRequired,columns:prop_types_default().arrayOf(prop_types_default().shape({id:prop_types_default().string,name:prop_types_default().string,sort:prop_types_default().bool,sortBy:prop_types_default().oneOfType([prop_types_default().string,prop_types_default().func]),formatter:prop_types_default().func})).isRequired,id:prop_types_default().string,className:prop_types_default().string,headerClassName:prop_types_default().string,label:prop_types_default().string,showLabel:prop_types_default().bool,selectionMode:prop_types_default().oneOf(["none","single","multiple"]),rowKey:prop_types_default().string,onSelectionChange:prop_types_default().func,onSelection:prop_types_default().func,onRowAction:prop_types_default().func,onRowClick:prop_types_default().func,initialSortDescriptor:prop_types_default().shape({column:prop_types_default().string,direction:prop_types_default().string,sortBy:prop_types_default().string}),caption:prop_types_default().string,hasInputElements:prop_types_default().bool},SortTable.defaultProps={label:"Search results table",showLabel:!1,selectionMode:"single",hasInputElements:!1},SortTable.__docgenInfo={description:"This component handles setting up the boilerplate markup for most data table use cases. Just provide the columns and the data",methods:[],displayName:"SortTable",props:{id:{defaultValue:{value:"UID(6)",computed:!0},description:"defaults to a six character UID",type:{name:"string"},required:!1},label:{defaultValue:{value:"'Search results table'",computed:!1},description:"Also used for 'aria-label' tag",type:{name:"string"},required:!1},showLabel:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},selectionMode:{defaultValue:{value:"'single'",computed:!1},description:"",type:{name:"enum",value:[{value:"'none'",computed:!1},{value:"'single'",computed:!1},{value:"'multiple'",computed:!1}]},required:!1},hasInputElements:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},data:{description:"The data key names should match with `columns` id values",type:{name:"arrayOf",value:{name:"object"}},required:!0},columns:{description:"`id` should match data key names. <br>\n`name` is the pretty-print name for the table column header text. <br>\n`sort` toggles column sort functionality. <br>\n`sortBy` can be `date` or a custom sort function. <br>\nThe formatter function allows you to completly transform what's rendered in the table cell. `formatter` custom function args are (text: `string`, cell: `object`, row: `object`)",type:{name:"arrayOf",value:{name:"shape",value:{id:{name:"string",required:!1},name:{name:"string",required:!1},sort:{name:"bool",required:!1},sortBy:{name:"union",value:[{name:"string"},{name:"func"}],required:!1},formatter:{name:"func",required:!1}}}},required:!0},className:{description:"applied to the '<table>' element",type:{name:"string"},required:!1},headerClassName:{description:"applied to the '<thead>' element",type:{name:"string"},required:!1},rowKey:{description:"Assign any data property key to be the rowKey (such as `uuid`). By default, using data object's 'id' property.",type:{name:"string"},required:!1},onSelectionChange:{description:"",type:{name:"func"},required:!1},onSelection:{description:"",type:{name:"func"},required:!1},onRowAction:{description:"",type:{name:"func"},required:!1},onRowClick:{description:"Assigning a function here will force `selectionMode: 'none'`. Callback function arguments are (e: `Event`, row: `Object`, index: `int`)",type:{name:"func"},required:!1},initialSortDescriptor:{description:"",type:{name:"shape",value:{column:{name:"string",required:!1},direction:{name:"string",required:!1},sortBy:{name:"string",required:!1}}},required:!1},caption:{description:"Table '<caption>' element can be used instead of the label. Useful when you want the caption to be different from the 'aria-label'",type:{name:"string"},required:!1}}}},"./src/utils/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{V:()=>UID,r:()=>getFormValues});const getFormValues=(form,returnQueryString=!1)=>{const data=new FormData(form);if(returnQueryString){return new URLSearchParams(data).toString()}const formDataObj={};return data.forEach(((value,key)=>{Object.prototype.hasOwnProperty.call(formDataObj,key)?"string"!=typeof formDataObj[key]?formDataObj[key].push(value):formDataObj[key]=[formDataObj[key],value]:formDataObj[key]=value})),Object.keys(formDataObj).length||console.warn("Warning: No form data! Did you add 'name' attributes to your inputs?"),formDataObj},UID=size=>{const letters="abcdefghijklmnopqrstuvwxyz",charset=`1234567890${letters}${letters.toUpperCase()}_-`.split(""),bytes=new Uint8Array(size);return crypto.getRandomValues(bytes),bytes.reduce(((acc,byte)=>`${acc}${charset[61&byte]}`),"")}},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Components/SortTable/styles.scss":(module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".CC-sortTable{overflow:auto}.CC-sortTable-label{text-align:center;font-weight:500;text-transform:uppercase;margin:10px 0 5px}","",{version:3,sources:["webpack://./src/Components/SortTable/styles.scss"],names:[],mappings:"AAAA,cACE,aAAA,CAEF,oBACE,iBAAA,CACA,eAAA,CACA,wBAAA,CACA,iBAAA",sourcesContent:[".CC-sortTable {\n overflow: auto;\n}\n.CC-sortTable-label {\n text-align: center;\n font-weight: 500;\n text-transform: uppercase;\n margin: 10px 0 5px;\n}\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Components/SortTable/styles.stories.scss":(module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,'#visits [class^=status],#visits div[class*=" status"]{font-weight:bold}#visits .status-completed{color:#039d12}#visits .status-scheduled{color:#215295}#visits .status-cancelled{color:#767676}.footerCellStyle{margin-top:0px;margin-bottom:10px;font-family:sans-serif;font-size:1.5rem;background:linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0)}',"",{version:3,sources:["webpack://./src/Components/SortTable/styles.stories.scss","webpack://./src/styles/variables.scss"],names:[],mappings:"AAGE,sDAEE,gBAAA,CAGF,0BACE,aCeU,CDbZ,0BACE,aCOW,CDLb,0BACE,aCJW,CDOf,iBACE,cAAA,CACA,kBAAA,CACA,sBAAA,CACA,gBAAA,CACA,qHAAA,CAYA,4BAAA,CACA,qCAAA",sourcesContent:["@use '../../styles/variables';\n\n#visits {\n [class^='status'],\n div[class*=' status'] {\n font-weight: bold;\n }\n\n .status-completed {\n color: variables.$color-green;\n }\n .status-scheduled {\n color: variables.$color-blue-2;\n }\n .status-cancelled {\n color: variables.$color-gray-2;\n }\n}\n.footerCellStyle {\n margin-top: 0px;\n margin-bottom: 10px;\n font-family: sans-serif;\n font-size: 1.5rem;\n background: linear-gradient(\n to right,\n #ef5350,\n #f48fb1,\n #7e57c2,\n #2196f3,\n #26c6da,\n #43a047,\n #eeff41,\n #f9a825,\n #ff5722\n );\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n","// ********************* PATHS *********************\n$path-img: '/src/assets/images/';\n\n// ********************* COLORS *********************\n// lowest = darkest hue\n\n$color-white: #ffffff;\n$color-black: #000000;\n\n// Grays\n$color-gray-1: #333333; // Standard text color & color for all disabled text\n$color-gray-2: #767676; // Lightest allowable text; input placeholder text and helper text.\n$color-gray-3: #c4c4c4; // Form borders\n$color-gray-4: #ebebeb; // Disabled elements backgrounds\n$color-gray-5: #f6f7fb; // Page background & table zebra stripes\n$color-gray-6: #e0e6f2; // Alternative lighter color.\n\n// Blues\n$color-blue-1: #101168; // Darkerst blue\n$color-blue-2: #215295; // medium blue\n$color-blue-3: #286fa8; // lighest blue for header, footer, most headers, buttons, and links in text.\n\n// Other colors\n$color-red: #c7270f; // color for warnings, errors, or message notifications\n$color-green: #039d12; // color for finished / affirmative messages\n$color-yellow-1: #f1b33c; // active/rollover buttons or highlight location\n$color-yellow-2: #f6f0ea; // Highlight for selected rows in tables (accounting & ERVs pages)\n$color-yellow-3: #fae0aa; // tooltip bg color\n\n// the BG used for all modal overlays and the like\n$color-bg-modal: rgba(0, 0, 0, 0.75);\n\n// color for 508 focus around elements\n$color-focus: pink; // undecided. TODO: pick a color\n\n$color-divider: rgba(255, 255, 255, 0.25); //the semi-translucent dividers used in header & footer\n\n// ********************* BOX SHADOWS *********************\n$box-shadow-color-focus: 0px 0px 5px $color-focus;\n\n// ********************* BORDER RADIUS *********************\n$border-radius: 4px;\n$border-radius-forms: 0px;\n\n// ********************* STANDARD MARGINS *********************\n\n$margin-horz-desktop: 32px;\n$margin-horz-phone: 12px;\n\n$margin-vert-desktop: 24px;\n$margin-vert-phone: 12px;\n\n// ********************* VIEWPORTS FOR MEDIA QUERIES *********************\n$phone-width: 480px;\n$tablet-width: 768px;\n$desktop-width: 1024px;\n$giant-desktop-width: 1600px;\n\n// ********************* FONTS *********************\n$text-thin: 'roboto-thin', Roboto, sans-serif;\n$text-light: 'roboto-light', Roboto, sans-serif;\n$text-regular: 'roboto-regular', Roboto, sans-serif;\n$text-medium: 'roboto-medium', Roboto, sans-serif;\n$text-bold: 'roboto-bold', Roboto, sans-serif;\n\n// ********************* FORM ELEMENTS *********************\n$height-form-elements: 22px;\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/icons.scss":(module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,'.fa{display:inline-block;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:auto;font-style:normal;font-weight:normal;font-stretch:normal;font-variant:normal;font-family:"Font Awesome 5 Free","FontAwesome",sans-serif;line-height:1}.fa-circle-plus::before{content:""}.fa-circle-minus::before{content:""}.fa-copy::before{content:""}.fa-triangle-exclamation::before{content:""}.fa-calendar-days::before{content:""}.fa-caret-down::before{content:""}.fa-close::before{content:""}.fa-sort::before{content:""}.fa-sort-ascending::before{content:""}.fa-sort-descending::before{content:""}.fa-success::before{content:""}.fa-info::before{content:""}.fa-warning::before{content:""}.fa-alert::before{content:""}.fa-spyglass::before{content:""}',"",{version:3,sources:["webpack://./src/styles/icons.scss","webpack://./src/styles/mixins.scss"],names:[],mappings:"AAAA,IAEA,oBCkCE,CAAA,iCACA,CAAA,kCACA,CAAA,mBACA,CAAA,iBACA,CAAA,kBACA,CAAA,mBACA,CAAA,mBACA,CAAA,0DACA,CAAA,aACA,CAAA,wBDvCF,WACE,CAAA,yBAEF,WACE,CAAA,iBAEF,WACE,CAAA,iCAEF,WACE,CAAA,0BAEF,WACE,CAAA,uBAEF,WACE,CAAA,kBAEF,WACE,CAAA,iBAEF,WACE,CAAA,2BAEF,WACE,CAAA,4BAEF,WACE,CAAA,oBAEF,WACE,CAAA,iBAEF,WACE,CAAA,oBAEF,WACE,CAAA,kBAEF,WACE,CAAA,qBAEF,WACE",sourcesContent:["@use './mixins.scss';\n\n.fa {\n @include mixins.fontawesome;\n}\n\n.fa-circle-plus::before {\n content: '\\f055';\n}\n.fa-circle-minus::before {\n content: '\\f056';\n}\n.fa-copy::before {\n content: '\\f0c5';\n}\n.fa-triangle-exclamation::before {\n content: '\\f071';\n}\n.fa-calendar-days::before {\n content: '\\f073';\n}\n.fa-caret-down::before {\n content: '\\f0d7';\n}\n.fa-close::before {\n content: '\\f00d';\n}\n.fa-sort::before {\n content: '\\f0DC';\n}\n.fa-sort-ascending::before {\n content: '\\f0DE';\n}\n.fa-sort-descending::before {\n content: '\\f0DD';\n}\n.fa-success::before {\n content: '\\f00c';\n}\n.fa-info::before {\n content: '\\f05a';\n}\n.fa-warning::before {\n content: '\\f071';\n}\n.fa-alert::before {\n content: '\\f06a';\n}\n.fa-spyglass::before {\n content: '\\f002';\n}\n","@use './variables';\n// ************************* FONT FAMILIES *******************\n// done this way so that if fonts don't load the will still look somewhat okay\n@mixin text-regular {\n font-family: Roboto, sans-serif;\n font-weight: 400;\n}\n\n@mixin text-thin {\n font-family: Roboto, sans-serif;\n font-weight: 100;\n}\n\n@mixin text-medium {\n font-family: Roboto, sans-serif;\n font-weight: 500;\n}\n\n@mixin text-light {\n font-family: Roboto, sans-serif;\n font-weight: 300;\n}\n\n@mixin text-bold {\n font-family: Roboto, sans-serif;\n font-weight: 700;\n}\n\n@mixin text-no-results {\n @include text-regular();\n text-align: center;\n font-size: 1.2rem;\n color: variables.$color-gray-2;\n}\n\n@mixin fontawesome {\n display: inline-block;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: auto;\n font-style: normal;\n font-weight: normal;\n font-stretch: normal;\n font-variant: normal;\n font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif;\n line-height: 1;\n}\n\n// use this to de-ellipsis overflow an element\n@mixin ut-word-wrap {\n word-wrap: break-word;\n overflow-wrap: break-word;\n white-space: normal;\n}\n\n@mixin ut-nowrap {\n white-space: nowrap;\n}\n\n@mixin zebra {\n background: variables.$color-gray-5;\n}\n\n// ************************* MEDIA QUERIES *******************\n@mixin mq-phone {\n @media (min-width: 0 ) and (max-width: #{variables.$phone-width}) {\n @content;\n }\n}\n\n@mixin mq-tablet {\n @media (min-width: #{variables.$phone-width (+1)}) and (max-width: #{variables.$tablet-width}) {\n @content;\n }\n}\n\n@mixin mq-phone-and-tablet {\n @media (min-width: 0 ) and (max-width: #{variables.$tablet-width}) {\n @content;\n }\n}\n\n@mixin mq-desktop {\n @media (min-width: #{variables.$tablet-width + 1}) {\n @content;\n }\n}\n\n// ************************* UTILITY MIXINS *******************\n@mixin ut-only-sr {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___},"./src/styles/icons.scss":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/style-loader/dist/runtime/styleDomAPI.js"),_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__),_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/style-loader/dist/runtime/insertBySelector.js"),_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__),_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__),_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/style-loader/dist/runtime/insertStyleElement.js"),_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__),_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/style-loader/dist/runtime/styleTagTransform.js"),_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__),_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_icons_scss__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/icons.scss"),options={};options.styleTagTransform=_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default(),options.setAttributes=_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default(),options.insert=_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null,"head"),options.domAPI=_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default(),options.insertStyleElement=_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default();_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_icons_scss__WEBPACK_IMPORTED_MODULE_6__.A,options),_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_icons_scss__WEBPACK_IMPORTED_MODULE_6__.A&&_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_icons_scss__WEBPACK_IMPORTED_MODULE_6__.A.locals&&_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_icons_scss__WEBPACK_IMPORTED_MODULE_6__.A.locals}}]);