@media-quest/builder 0.0.40 → 0.0.41

package/dist/public-api.d.ts

@@ -1,4 +1,4 @@
-import { PStyle as PStyle$1, Condition, PageQueRules, SchemaDto, DStyle } from '@media-quest/engine';
+import { PStyle, Condition, PageQueRules, SchemaDto, DStyle } from '@media-quest/engine';
 
 /**
  * Builder objects are complex objects that are embedded inside
@@ -89,19 +89,19 @@ interface BuilderOptionDto {
     readonly value: number;
     readonly label: string;
     readonly labelAudio?: AudioFile;
-    readonly cssOverride?: PStyle$1;
+    readonly cssOverride?: PStyle;
 }
 declare class BuilderOption extends BuilderObject<"builder-question-option", BuilderOptionDto> {
     readonly objectType = "builder-question-option";
     id: OptionID;
     value: number;
     label: string;
-    cssOverride: PStyle$1;
+    cssOverride: PStyle;
     private _labelAudioFile;
     get labelAudioFile(): AudioFile | false;
     set labelAudioFile(audioFile: AudioFile | false);
     private constructor();
-    static create(value: number, label: string, css?: PStyle$1): BuilderOption;
+    static create(value: number, label: string, css?: PStyle): BuilderOption;
     static fromJson(dto: BuilderOptionDto): BuilderOption;
     toJson(): BuilderOptionDto;
     clone(): BuilderOptionDto;
@@ -610,7 +610,6 @@ interface CssTheme<S extends Partial<DStyle> = Partial<DStyle>> {
     cssDisabled: Partial<DStyle>;
 }
 
-type PStyle = Partial<DStyle>;
 interface IDefaultTheme {
     name: string;
     schemaBackgroundColor: string;

package/dist/public-api.js

@@ -178,8 +178,7 @@ var BuilderOption = class _BuilderOption extends BuilderObject {
     return instance;
   }
   static fromJson(dto) {
-    const instance = new _BuilderOption(dto);
-    return instance;
+    return new _BuilderOption(dto);
   }
   toJson() {
     const dto = {
@@ -216,8 +215,7 @@ var BuilderQuestion = class _BuilderQuestion extends BuilderObject {
     });
   };
   static fromJson(dto) {
-    const question = new _BuilderQuestion(dto);
-    return question;
+    return new _BuilderQuestion(dto);
   }
   constructor(dto) {
     super(dto);
@@ -1664,6 +1662,9 @@ var THEME_2_ICONS = {
 };
 
 // src/theme/theme2.ts
+var deepClone = (obj) => {
+  return JSON.parse(JSON.stringify(obj));
+};
 var translate = (pos) => {
   const x = pos.x || 0;
   const y = pos.y || 0;
@@ -1723,20 +1724,21 @@ var PAGE_BACKGROUND_HEIGHT = 100 - PAGE_BACKGROUND_BOTTOM - H_M1;
 var BUTTON_BAR_WIDTH = Q_AREA_WIDTH - 2 * W_M3;
 var MAIN_TEXT_WIDE = Q_AREA_WIDTH - 2 * W_M3;
 var MAIN_TEXT_NARROW = MAIN_TEXT_WIDE - AUDIO_ICON_WIDTH - W_M3;
-var btnTextBase = {
-  fontSize: { _unit: "px", value: 25 },
-  bottom: VIDEO_CONTROLS_BOTTOM + 1.2,
-  zIndex: LAYER_5,
-  width: VIDEO_CONTROLS_WIDTH / 2,
-  textAlign: "center",
-  visibility: "hidden",
-  margin: { _unit: "px", value: 0 }
-  // backgroundColor: Colors.yellow,
+var btnTextBaseObj = () => {
+  return {
+    fontSize: { _unit: "px", value: 25 },
+    bottom: VIDEO_CONTROLS_BOTTOM + 1.2,
+    zIndex: LAYER_5,
+    width: VIDEO_CONTROLS_WIDTH / 2,
+    textAlign: "center",
+    visibility: "hidden",
+    margin: { _unit: "px", value: 0 }
+  };
 };
-var muteUnmuteText = { ...btnTextBase, right: VIDEO_CONTROLS_RIGHT };
-var playPauseText = { ...btnTextBase, left: VIDEO_CONTROLS_LEFT };
+var muteUnmuteText = { ...btnTextBaseObj(), right: VIDEO_CONTROLS_RIGHT };
+var playPauseText = { ...btnTextBaseObj(), left: VIDEO_CONTROLS_LEFT };
 var replayText = {
-  ...btnTextBase,
+  ...btnTextBaseObj(),
   width: VIDEO_CONTROLS_WIDTH,
   left: VIDEO_CONTROLS_LEFT,
   // backgroundColor: Colors.yellow,
@@ -1786,8 +1788,9 @@ var responseButtonBaseCss = () => ({
     fontWeight: 600,
     fontSize: { _unit: "px", value: 28 },
     lineHeight: 1.1,
-    // TODO Denne angir knappens max-bredde. Default bør være 25.
-    maxWidth: 25,
+    // TODO Skal knappene vokse, med mindre det settes en maksbredde?
+    // maxWidth: 25,
+    // maxWidth: { _unit: "percent", value: 10 },
     minWidth: 12,
     // width: 20,
     // flex: "0 0 auto",
@@ -1801,7 +1804,6 @@ var responseButtonBaseCss = () => ({
     position: "relative",
     display: "block",
     cursor: "pointer"
-    // maxWidth: { _unit: "percent", value: 10 },
   },
   cssDisabled: { opacity: 0.3, cursor: "not-allowed" },
   cssEnabled: { opacity: 1, cursor: "pointer" }
@@ -1813,8 +1815,8 @@ var primaryButton = (overridesCss) => {
     normal: {
       btn: {
         css: {
-          ...base.css,
-          ...overridesCss,
+          ...deepClone(base.css),
+          ...deepClone(overridesCss),
           backgroundColor: Colors.primary,
           borderColor: Colors.primary,
           textColor: Colors.white
@@ -1829,8 +1831,8 @@ var primaryButton = (overridesCss) => {
     dontKnow: {
       btn: {
         css: {
-          ...base.css,
-          ...overridesCss,
+          ...deepClone(base.css),
+          ...deepClone(overridesCss),
           backgroundColor: Colors.secondary,
           borderColor: Colors.secondary,
           textColor: Colors.primary
@@ -1998,16 +2000,17 @@ var Theme2 = {
         bottom: Q_AREA_BOTTOM + H_M3,
         left: Q_AREA_LEFT + W_M3,
         // backgroundColor: "green",
-        gap: { _unit: "px", value: 40 },
+        gap: { _unit: "px", value: 32 },
         alignItems: "stretch"
       },
       whenSingle: { justifyContent: "center" },
       whenMany: { justifyContent: "flex-start" }
     },
-    nextButtonTheme: primaryButton({}),
-    responseButtons: primaryButton({})
+    nextButtonTheme: primaryButton({ fontSize: { _unit: "px", value: 28 }, maxWidth: { _unit: "percent", value: 25 } }),
+    responseButtons: primaryButton({ fontSize: { _unit: "px", value: 28 }, maxWidth: { _unit: "percent", value: 25 } })
   }
 };
+console.log(Theme2);
 
 // src/theme/default-theme-compiler.ts
 var DefaultThemeCompiler = class {
@@ -2511,17 +2514,19 @@ var DefaultThemeCompiler = class {
         referenceLabel: options.questionText
       }
     } : { kind: "next-page" };
-    let btnStyles = value === 9 ? t.buttonBar.responseButtons.dontKnow : t.buttonBar.responseButtons.normal;
+    const _btnStyles = value === 9 ? t.buttonBar.responseButtons.dontKnow : t.buttonBar.responseButtons.normal;
+    let css = import_engine2.DStyle.clone(_btnStyles.btn.css);
+    const cssEnabled = import_engine2.DStyle.clone(_btnStyles.btn.cssEnabled);
     if (t.buttonBar.vibrateMs) {
-      onclickAction.vibrateMs = t.buttonBar.vibrateMs;
     }
     if (cssOverride) {
-      btnStyles.btn.css = { ...btnStyles.btn.css, ...cssOverride };
+      console.log(cssOverride);
+      css = { ...css, ...cssOverride };
     }
     const btn = {
       _tag: "button",
       innerText: label,
-      style: { ...btnStyles.btn.css, ...btnStyles.btn.cssEnabled },
+      style: { ...css, ...cssEnabled },
       onClick: onclickAction
     };
     return btn;