case-editor-tools 1.1.1 → 1.2.1

package/constants/key-definitions.d.ts

@@ -3,6 +3,7 @@ export declare const singleChoiceKey = "scg";
 export declare const likertScaleGroupKey = "lg";
 export declare const responsiveSingleChoiceArrayKey = "rsca";
 export declare const responsiveBipolarLikertArrayKey = "rsbla";
+export declare const responsiveMatrix = "rm";
 export declare const likertScaleKey = "likert";
 export declare const multipleChoiceKey = "mcg";
 export declare const dropDownKey = "ddg";

package/constants/key-definitions.js

@@ -7,6 +7,7 @@ const singleChoiceKey = 'scg';
 const likertScaleGroupKey = 'lg';
 const responsiveSingleChoiceArrayKey = 'rsca';
 const responsiveBipolarLikertArrayKey = 'rsbla';
+const responsiveMatrix = 'rm';
 const likertScaleKey = 'likert';
 const multipleChoiceKey = 'mcg';
 const dropDownKey = 'ddg';
@@ -31,6 +32,7 @@ exports.multipleChoiceKey = multipleChoiceKey;
 exports.numericInputKey = numericInputKey;
 exports.responseGroupKey = responseGroupKey;
 exports.responsiveBipolarLikertArrayKey = responsiveBipolarLikertArrayKey;
+exports.responsiveMatrix = responsiveMatrix;
 exports.responsiveSingleChoiceArrayKey = responsiveSingleChoiceArrayKey;
 exports.singleChoiceKey = singleChoiceKey;
 exports.sliderCategoricalKey = sliderCategoricalKey;

package/constants/key-definitions.js.map

@@ -1 +1 @@
-{"version":3,"file":"key-definitions.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"key-definitions.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "case-editor-tools",
   "description": "Javascript tools to simplify survey and study coding for CASE.",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "main": "index.js",
   "license": "Apache-2.0",
   "repository": "github:case-framework/case-editor-tools",

package/surveys/responseTypeGenerators/likertGroupComponents.d.ts

@@ -1,5 +1,5 @@
 import { Expression, ItemComponent, ItemGroupComponent } from "survey-engine/data_types";
-import { ResponsiveBipolarLikertArrayProps, ResponsiveSingleChoiceArrayProps } from "../types";
+import { ResponsiveBipolarLikertArrayProps, ResponsiveMatrixProps, ResponsiveSingleChoiceArrayProps } from "../types";
 export interface LikertGroupRow {
     key: string;
     content: Map<string, string>;
@@ -19,6 +19,7 @@ export declare const initLikertScaleGroup: (key: string, rows: Array<LikertGroup
 }[], stackOnSmallScreen?: boolean | undefined, displayCondition?: Expression | undefined) => ItemGroupComponent;
 export declare const initResponsiveSingleChoiceArray: (rgKey: string, props: ResponsiveSingleChoiceArrayProps, displayCondition?: Expression | undefined) => ItemGroupComponent;
 export declare const initResponsiveBipolarLikertArray: (rgKey: string, props: ResponsiveBipolarLikertArrayProps, displayCondition?: Expression | undefined) => ItemGroupComponent;
+export declare const initResponsiveMatrixItem: (rgKey: string, props: ResponsiveMatrixProps, displayCondition?: Expression | undefined) => ItemGroupComponent;
 export declare const initLikertScaleItem: (key: string, options: {
     key: string;
     className?: string | undefined;

package/surveys/responseTypeGenerators/likertGroupComponents.js

@@ -311,6 +311,96 @@ const initResponsiveBipolarLikertArray = (rgKey, props, displayCondition) => {
     });
     return groupEdit.getComponent();
 };
+function hasDuplicates(array) {
+    return (new Set(array)).size !== array.length;
+}
+const initResponsiveMatrixItem = (rgKey, props, displayCondition) => {
+    const groupEdit = new surveys_surveyEditor_componentEditor.ComponentEditor(undefined, {
+        key: rgKey,
+        isGroup: true,
+        role: 'responsiveMatrix',
+    });
+    if (hasDuplicates(props.rows.map(item => item.key))) {
+        throw Error(`has duplicate row keys in ${rgKey}`);
+    }
+    if (hasDuplicates(props.columns.map(item => item.key))) {
+        throw Error(`has duplicate column keys in ${rgKey}`);
+    }
+    if (displayCondition) {
+        groupEdit.setDisplayCondition(displayCondition);
+    }
+    const style = [
+        { key: 'responseType', value: props.responseType },
+    ];
+    if (props.breakpoint) {
+        style.push({ key: 'breakpoint', value: props.breakpoint });
+    }
+    groupEdit.setStyles(style);
+    // ADD COLUMNS
+    groupEdit.addItemComponent({
+        key: 'cols',
+        role: 'columns',
+        items: props.columns.map(option => {
+            return {
+                key: option.key,
+                role: 'category',
+                content: !Array.isArray(option.label) ? surveys_utils_simpleGenerators.generateLocStrings(option.label) : undefined,
+                items: Array.isArray(option.label) ? option.label.map((cont, index) => {
+                    return {
+                        key: index.toFixed(),
+                        role: 'text',
+                        content: surveys_utils_simpleGenerators.generateLocStrings(cont.content),
+                        style: cont.className ? [{ key: 'className', value: cont.className }] : undefined,
+                    };
+                }) : [],
+            };
+        })
+    });
+    // ADD DROPDOWN OPTIONS (if applicable)
+    if (props.responseType == 'dropdown' && props.dropdownConfig !== undefined) {
+        groupEdit.addItemComponent({
+            key: 'do',
+            role: 'dropdownOptions',
+            content: surveys_utils_simpleGenerators.generateLocStrings(props.dropdownConfig.unselectedLabeL),
+            items: props.dropdownConfig.options.map(option => {
+                return {
+                    key: option.key,
+                    role: 'option',
+                    content: surveys_utils_simpleGenerators.generateLocStrings(option.label),
+                };
+            })
+        });
+    }
+    // ADD ROWS
+    const rowGroupEdit = new surveys_surveyEditor_componentEditor.ComponentEditor(undefined, {
+        key: 'rows',
+        isGroup: true,
+        role: 'rows',
+    });
+    props.rows.forEach((row, index) => {
+        const rowStyles = [];
+        if (row.className !== undefined) {
+            rowStyles.push({ key: 'className', value: row.className });
+        }
+        rowGroupEdit.addItemComponent({
+            key: row.key,
+            role: row.role,
+            displayCondition: row.displayCondition,
+            style: rowStyles.length > 0 ? rowStyles : undefined,
+            content: !Array.isArray(row.label) ? surveys_utils_simpleGenerators.generateLocStrings(row.label) : undefined,
+            items: Array.isArray(row.label) ? row.label.map((cont, index) => {
+                return {
+                    key: index.toFixed(),
+                    role: 'text',
+                    content: surveys_utils_simpleGenerators.generateLocStrings(cont.content),
+                    style: cont.className ? [{ key: 'className', value: cont.className }] : undefined,
+                };
+            }) : [],
+        });
+    });
+    groupEdit.addItemComponent(rowGroupEdit.getComponent());
+    return groupEdit.getComponent();
+};
 const initLikertScaleItem = (key, options, stackOnSmallScreen, displayCondition) => {
     // init group
     const groupEdit = new surveys_surveyEditor_componentEditor.ComponentEditor(undefined, {
@@ -346,5 +436,6 @@ const initLikertScaleItem = (key, options, stackOnSmallScreen, displayCondition)
 exports.initLikertScaleGroup = initLikertScaleGroup;
 exports.initLikertScaleItem = initLikertScaleItem;
 exports.initResponsiveBipolarLikertArray = initResponsiveBipolarLikertArray;
+exports.initResponsiveMatrixItem = initResponsiveMatrixItem;
 exports.initResponsiveSingleChoiceArray = initResponsiveSingleChoiceArray;
 //# sourceMappingURL=likertGroupComponents.js.map

package/surveys/responseTypeGenerators/likertGroupComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"likertGroupComponents.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"likertGroupComponents.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/surveys/survey-items.d.ts

@@ -1,5 +1,5 @@
 import { ItemGroupComponent, Expression, ItemComponent, SurveyItem, ExpressionArg, ResponseComponent } from "survey-engine/data_types";
-import { ClozeQuestionProps, ConsentQuestionProps, DateInputQuestionProps, GenericQuestionProps, MultiLineTextInput, NumericInputQuestionProps, OptionDef, ResponsiveBipolarLikertArrayQuestionProps, ResponsiveSingleChoiceArrayQuestionProps, TextInputQuestionProps, TimeInputQuestionProps } from "./types/item-properties";
+import { ClozeQuestionProps, ConsentQuestionProps, DateInputQuestionProps, GenericQuestionProps, MultiLineTextInput, NumericInputQuestionProps, OptionDef, ResponsiveBipolarLikertArrayQuestionProps, ResponsiveMatrixQuestionProps, ResponsiveSingleChoiceArrayQuestionProps, TextInputQuestionProps, TimeInputQuestionProps } from "./types/item-properties";
 import { LikertGroupRow } from "./responseTypeGenerators/likertGroupComponents";
 interface OptionQuestionProps extends GenericQuestionProps {
     responseOptions: Array<OptionDef>;
@@ -53,6 +53,7 @@ export declare const SurveyItems: {
     singleChoice: (props: OptionQuestionProps) => SurveyItem;
     responsiveSingleChoiceArray: (props: ResponsiveSingleChoiceArrayQuestionProps) => SurveyItem;
     responsiveBipolarLikertArray: (props: ResponsiveBipolarLikertArrayQuestionProps) => SurveyItem;
+    responsiveMatrix: (props: ResponsiveMatrixQuestionProps) => SurveyItem;
     multipleChoice: (props: OptionQuestionProps) => SurveyItem;
     dateInput: (props: DateInputQuestionProps) => SurveyItem;
     timeInput: (props: TimeInputQuestionProps) => SurveyItem;

package/surveys/survey-items.js

@@ -141,6 +141,32 @@ const generateResponsiveBipolarLikertArray = (props) => {
     }
     return commonQuestionGenerator(props, rg_inner);
 };
+const generateResponsiveMatrix = (props) => {
+    var _a;
+    const rg_inner = surveys_responseTypeGenerators_likertGroupComponents.initResponsiveMatrixItem(constants_keyDefinitions.responsiveMatrix, Object.assign({}, props));
+    // Add extra validation
+    if (props.isRequired) {
+        if (!props.customValidations) {
+            props.customValidations = [];
+        }
+        (_a = props.customValidations) === null || _a === void 0 ? void 0 : _a.push({
+            key: 'r',
+            type: 'hard',
+            rule: surveys_utils_simpleGenerators.expWithArgs('and', ...props.rows.map(row => {
+                return [
+                    ...props.columns.map(col => {
+                        const hasRespExp = surveys_surveyEngineExpressions.SurveyEngine.hasResponse([props.parentKey, props.itemKey].join('.'), [constants_keyDefinitions.responseGroupKey, constants_keyDefinitions.responsiveMatrix, `${row.key}-${col.key}`].join('.'));
+                        if (row.displayCondition === undefined) {
+                            return hasRespExp;
+                        }
+                        return surveys_surveyEngineExpressions.SurveyEngine.logic.or(surveys_surveyEngineExpressions.SurveyEngine.logic.not(row.displayCondition), hasRespExp);
+                    })
+                ];
+            }))
+        });
+    }
+    return commonQuestionGenerator(props, rg_inner);
+};
 const generateNumericSliderQuestion = (props) => {
     const rg_inner = {
         key: 'slider', role: 'sliderNumeric',
@@ -364,6 +390,7 @@ const SurveyItems = {
     singleChoice: generateSingleChoiceQuestion,
     responsiveSingleChoiceArray: generateResponsiveSingleChoiceArrayQuestion,
     responsiveBipolarLikertArray: generateResponsiveBipolarLikertArray,
+    responsiveMatrix: generateResponsiveMatrix,
     multipleChoice: generateMultipleChoiceQuestion,
     dateInput: generateDatePickerInput,
     timeInput: generateTimeInput,

package/surveys/survey-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"survey-items.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"survey-items.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/surveys/types/item-properties.d.ts

@@ -222,3 +222,30 @@ export interface ResponsiveBipolarLikertArrayProps {
     };
 }
 export declare type ResponsiveBipolarLikertArrayQuestionProps = GenericQuestionProps & ResponsiveBipolarLikertArrayProps;
+/**
+ * Responsive Matrix
+ */
+export declare type ResponsiveMatrixResponseType = 'dropdown' | 'input' | 'numberInput';
+export interface ResponsiveMatrixProps {
+    responseType: ResponsiveMatrixResponseType;
+    breakpoint?: 'sm' | 'md' | 'lg' | 'xl';
+    columns: Array<{
+        key: string;
+        label: Map<string, string> | StyledTextComponentProp[];
+    }>;
+    rows: Array<{
+        key: string;
+        role: 'row' | 'category';
+        label: Map<string, string> | StyledTextComponentProp[];
+        displayCondition?: Expression;
+        className?: string;
+    }>;
+    dropdownConfig?: {
+        unselectedLabeL: Map<string, string>;
+        options: Array<{
+            key: string;
+            label: Map<string, string>;
+        }>;
+    };
+}
+export declare type ResponsiveMatrixQuestionProps = GenericQuestionProps & ResponsiveMatrixProps;