@m2c2kit/addons 0.3.6 → 0.3.7

package/README.md

@@ -1,5 +1,22 @@
 # @m2c2kit/addons
 
-This package contains additions to m2c2kit core functionalty, such as button, grid, and instructions.
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![CI/CD](https://github.com/m2c2-project/m2c2kit/actions/workflows/ci.yml/badge.svg)](https://github.com/m2c2-project/m2c2kit/actions/workflows/ci.yml)
+[![npm version](https://img.shields.io/npm/v/@m2c2kit/addons.svg)](https://www.npmjs.com/package/@m2c2kit/addons)
 
-License: MIT
+This package contains additions to m2c2kit core functionally, such as buttons, grids, and instructions.
+
+**m2c2kit** is a library for cross-platform cognitive assessments. Features:
+
+- **Mobile first**. Optimized for touch and mobile devices while also usable on desktops.
+- **Portable**. Use on browsers, compile within native apps using web views, or embed in products like Qualtrics. A shared assessment codebase reduces development time and promotes experiment standardization across devices and services.
+- **Rapid iteration**. Quickly develop and test new assessments with the JavaScript-based library and deploy them in studies.
+
+## Resources
+
+---
+
+- [Website](https://m2c2-project.github.io/m2c2kit/)
+- [Live Examples](https://m2c2-project.github.io/m2c2kit/docs/category/examples)
+- [Getting Started](https://m2c2-project.github.io/m2c2kit/docs/getting-started)
+- [Interactive Tutorial](https://m2c2-project.github.io/m2c2kit/docs/tutorial-fundamentals/fundamentals)

package/dist/index.js

@@ -1,24 +1,28 @@
 import { Composite, WebColors, Shape, Label, CanvasKitHelpers, EventType, Easings, Story, Transition, TransitionDirection, LabelHorizontalAlignmentMode, Scene, Dimensions, Sprite } from '@m2c2kit/core';
 
-var __defProp$1 = Object.defineProperty;
+var __defProp$3 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
 var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
 var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
 var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$1 = (a, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
+      __defNormalProp$3(a, prop, b[prop]);
   if (__getOwnPropSymbols$1)
     for (var prop of __getOwnPropSymbols$1(b)) {
       if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
+        __defNormalProp$3(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 class Grid extends Composite {
   /**
    * A rectangular grid that supports placement of entities within the grid's
@@ -32,16 +36,19 @@ class Grid extends Composite {
    */
   constructor(options) {
     super(options);
-    this.compositeType = "grid";
+    __publicField$3(this, "compositeType", "grid");
     // Grid options
     // TODO: make getter, setter for these so they can be changed after initial construction
-    this.rows = 0;
-    this.columns = 0;
+    __publicField$3(this, "rows", 0);
+    __publicField$3(this, "columns", 0);
     // default Grid is: transparent gray, red lines, line width 1
-    this.gridBackgroundColor = [0, 0, 233, 0.25];
-    this.gridLineColor = WebColors.Red;
-    this.gridLineWidth = 1;
-    this.gridChildren = new Array();
+    __publicField$3(this, "gridBackgroundColor", [0, 0, 233, 0.25]);
+    __publicField$3(this, "gridLineColor", WebColors.Red);
+    __publicField$3(this, "gridLineWidth", 1);
+    __publicField$3(this, "cellWidth");
+    __publicField$3(this, "cellHeight");
+    __publicField$3(this, "gridChildren", new Array());
+    __publicField$3(this, "gridBackground");
     if (options.size) {
       this.size = options.size;
     } else {
@@ -239,25 +246,29 @@ class Grid extends Composite {
   }
 }
 
-var __defProp = Object.defineProperty;
+var __defProp$2 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
+      __defNormalProp$2(a, prop, b[prop]);
   if (__getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(b)) {
       if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+        __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 class Button extends Composite {
   // todo: add getters/setters so button can respond to changes in its options
   // todo: add default "behaviors" (?) like button click animation?
@@ -272,14 +283,15 @@ class Button extends Composite {
    */
   constructor(options) {
     super(options);
-    this.compositeType = "button";
+    __publicField$2(this, "compositeType", "button");
     // Button options
-    this._backgroundColor = WebColors.Black;
-    this.size = { width: 200, height: 50 };
-    this.cornerRadius = 9;
-    this.fontSize = 20;
-    this.text = "";
-    this._fontColor = WebColors.White;
+    __publicField$2(this, "_backgroundColor", WebColors.Black);
+    __publicField$2(this, "size", { width: 200, height: 50 });
+    __publicField$2(this, "cornerRadius", 9);
+    __publicField$2(this, "fontSize", 20);
+    __publicField$2(this, "text", "");
+    __publicField$2(this, "_fontColor", WebColors.White);
+    __publicField$2(this, "backgroundPaint");
     if (options.text) {
       this.text = options.text;
     }
@@ -383,6 +395,12 @@ class Button extends Composite {
   }
 }
 
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 var DialogResult = /* @__PURE__ */ ((DialogResult2) => {
   DialogResult2["Dismiss"] = "Dismiss";
   DialogResult2["Positive"] = "Positive";
@@ -394,16 +412,17 @@ class Dialog extends Composite {
   // todo: add default "behaviors" (?) like button click animation?
   constructor(options) {
     super(options);
-    this.compositeType = "dialog";
-    this._backgroundColor = WebColors.White;
-    this.cornerRadius = 9;
-    this.overlayAlpha = 0.5;
-    this.contentText = "";
-    this.positiveButtonText = "";
-    this.negativeButtonText = "";
-    this.zPosition = Number.MAX_VALUE;
-    this.hidden = true;
-    this._fontColor = WebColors.White;
+    __publicField$1(this, "compositeType", "dialog");
+    __publicField$1(this, "_backgroundColor", WebColors.White);
+    __publicField$1(this, "cornerRadius", 9);
+    __publicField$1(this, "overlayAlpha", 0.5);
+    __publicField$1(this, "contentText", "");
+    __publicField$1(this, "positiveButtonText", "");
+    __publicField$1(this, "negativeButtonText", "");
+    __publicField$1(this, "zPosition", Number.MAX_VALUE);
+    __publicField$1(this, "hidden", true);
+    __publicField$1(this, "_fontColor", WebColors.White);
+    __publicField$1(this, "backgroundPaint");
     if (!options) {
       return;
     }
@@ -591,6 +610,12 @@ class Dialog extends Composite {
   }
 }
 
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 class VirtualKeyboard extends Composite {
   /**
    * An on-screen keyboard that can be used to enter text.
@@ -600,8 +625,23 @@ class VirtualKeyboard extends Composite {
   constructor(options) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
     super(options);
-    this.rowsConfiguration = new Array();
-    this.shiftActivated = false;
+    __publicField(this, "keyboardHorizontalPaddingPercent");
+    __publicField(this, "keyboardVerticalPaddingPercent");
+    __publicField(this, "keyHorizontalPaddingPercent");
+    __publicField(this, "keyVerticalPaddingPercent");
+    __publicField(this, "rowsConfiguration", new Array());
+    __publicField(this, "keysPerRow");
+    __publicField(this, "fontSize");
+    __publicField(this, "fontNames");
+    __publicField(this, "hiddenKeys");
+    __publicField(this, "capitalLettersOnly");
+    __publicField(this, "keyColor");
+    __publicField(this, "keyDownColor");
+    __publicField(this, "specialKeyDownColor");
+    __publicField(this, "backgroundColor");
+    __publicField(this, "showKeyDownPreview");
+    __publicField(this, "shiftActivated", false);
+    __publicField(this, "shiftKeyShape");
     this.size = options.size;
     this.position = (_a = options.position) != null ? _a : { x: 0, y: 0 };
     this.keyboardHorizontalPaddingPercent = (_b = options.keyboardHorizontalPaddingPercent) != null ? _b : 0.02;
@@ -677,7 +717,7 @@ class VirtualKeyboard extends Composite {
       const shiftArrowShapeOptions = {
         path: {
           // Public Domain from https://www.freesvg.org
-          svgString: "m288-6.6849e-14 -288 288h144v288h288v-288h144l-288-288z",
+          svgPathString: "m288-6.6849e-14 -288 288h144v288h288v-288h144l-288-288z",
           width: 24
         },
         lineWidth: 2,
@@ -687,7 +727,7 @@ class VirtualKeyboard extends Composite {
       const backspaceShapeOptions = {
         path: {
           // CC0 from https://www.svgrepo.com
-          svgString: "M10.625 5.09 0 22.09l10.625 17H44.18v-34H10.625zm31.555 32H11.734l-9.375-15 9.375-15H42.18v30zm-23.293-6.293 7.293-7.293 7.293 7.293 1.414-1.414-7.293-7.293 7.293-7.293-1.414-1.414-7.293 7.293-7.293-7.293-1.414 1.414 7.293 7.293-7.293 7.293",
+          svgPathString: "M10.625 5.09 0 22.09l10.625 17H44.18v-34H10.625zm31.555 32H11.734l-9.375-15 9.375-15H42.18v30zm-23.293-6.293 7.293-7.293 7.293 7.293 1.414-1.414-7.293-7.293 7.293-7.293-1.414-1.414-7.293 7.293-7.293-7.293-1.414 1.414 7.293 7.293-7.293 7.293",
           width: 24
         },
         lineWidth: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m2c2kit/addons",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "Additions to m2c2kit core functionalty, such as button, grid, and instructions",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@rollup/plugin-babel": "6.0.3",
     "rimraf": "5.0.1",
-    "rollup": "3.21.0",
+    "rollup": "3.25.1",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-dts": "5.3.0",
     "rollup-plugin-esbuild": "5.0.0",