@spiffcommerce/core 21.20.4 → 21.20.5

package/dist/index.js

@@ -3222,6 +3222,7 @@ class en {
         scale: e.data.imageFillScale || 1
       } : void 0;
       t.updateStorage(e.stepName, {
+        text: e.data.defaultText || "",
         inputText: e.data.defaultText || "",
         color: ((i = await this.getDefaultColorVariant(e.data)) == null ? void 0 : i.color) || await this.getDefaultColor(e.data),
         fillImage: B

package/dist/index.umd.cjs

@@ -740,7 +740,7 @@
                     </svg>
                 `,Q={};Q[this.shapeFillId]={browserValue:u};const m=l.generate();return{id:m,region:d,command:new l.CreateElementCommand({stepRegion:d,stepName:e.stepName,colors:Q,id:m,svg:E,type:l.LayoutElementType.Illustration,y:d.top,x:d.left,rotation:d.rotation,width:d.width,height:d.height,layer:d.layer,layerIndex:d.layerIndex,immutable:d.immutable,excludeFromExport:e.data.excludeFromPrint},w)}},g=e.data.regions.map(r),C=g.filter(d=>!!d).map(d=>d==null?void 0:d.command),B=g.filter(d=>!!d).map(d=>({id:d.id,region:d.region}));return{command:new l.GroupCommand(C),followup:async()=>{await n.setSelectionsAndElements(e.stepName,t.variant?[t.variant]:[],B,async()=>{n.updateStorage(e.stepName,{colour:o()})})}}}}}const ie=new dn;class wn{constructor(){this.latestToast=null,this.toastType=null,this.toastCallbacks=[]}addToastCallback(e){e({toastMessage:this.latestToast,toastType:this.toastType}),this.toastCallbacks.push(e)}removeToastCallback(e){this.toastCallbacks=this.toastCallbacks.filter(t=>t!==e)}setLatestToast(e,t){this.latestToast=e,this.toastType=t,this.onToastChange()}onToastChange(){this.toastCallbacks.forEach(e=>e({toastMessage:this.latestToast,toastType:this.toastType}))}}const Gt=new wn,Ve=30;class Se extends Error{constructor(e){super(e),Object.setPrototypeOf(this,new.target.prototype),this.name=Se.name}}const En=["‘","’","“","”",`
 `];class Ye extends Error{constructor(e){super(e),Object.setPrototypeOf(this,new.target.prototype),this.name=Ye.name}}class hn{constructor(){this.cachedColors=new Map,this.filterUnsupportedCharacters=(e,t)=>{let A=e.replace(/(\r\n|\r|(\u2665|\u00a9|\u00ae|[\u2000-\u2017]|[\u201E-\u3300]]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]))/gm,"");const n=[],a=t?l.getFontMetrics(t.assetUrl):void 0;if(a){const i=A.split("").filter(s=>!En.includes(s)).join(""),o=i.split("").map(s=>a.getFont().charToGlyph(s));for(let s=0;s<o.length;s++)o[s].name===".notdef"&&n.push(String.fromCharCode(i.charCodeAt(s)))}for(let i=0;i<n.length;i++)A=A.replaceAll(n[i],"");return A},this.textAlign=e=>e.vertical?"center":e.textAlign||"center",this.getErrorsForText=(e,t,A)=>{const n=[];t.data&&t.data.maxLength&&e.length>t.data.maxLength&&n.push({localizationKey:"workflow.steps.text.characterLimit"});const a=A.getProfanities(),i=Ue.split(e.toLowerCase());for(const s of i)for(const r in a){const g=a[r].toLowerCase().replace(/\s/g,"");if(s===g){n.push({localizationKey:"workflow.steps.text.blockedProfanity"});break}}return!t.data.allowNewlines&&(e.includes(`
-`)||e.includes("\r"))&&n.push({localizationKey:"workflow.steps.text.multipleLines"}),n}}async init(e,t,A){var a,i,o;const n=e.option;if(!n)return null;if(A)await this.reload(e,t,A);else{const s=this.getDefaultImageFillVariant(e.data),r=(a=s==null?void 0:s.asset)==null?void 0:a.fileLink,g=r?await l.getPatternImageData(r):void 0,C=g?{src:g.src,height:g.height,width:g.width,scale:e.data.imageFillScale||1}:void 0;t.updateStorage(e.stepName,{inputText:e.data.defaultText||"",color:((i=await this.getDefaultColorVariant(e.data))==null?void 0:i.color)||await this.getDefaultColor(e.data),fillImage:C}),t.updateMetadata(e.stepName,{text:e.data.defaultText||"",color:((o=await this.getDefaultColorVariant(e.data))==null?void 0:o.name)||await this.getDefaultColor(e.data),fillImage:s==null?void 0:s.name});const B=L.getDefaultVariant(n);if(B)return this.selectVariantCommand(e,B,{},[],t,()=>{},()=>{},C)}return null}findLayoutElements(e,t){return e.getRegionElements(t.stepName).map(a=>l.findElement(a.id,e.getAllLayoutData()))}availableFillColors(e){var n;const t=this.cachedColors.get(e.stepName);if(t)return t;const A=e.data.colorOption;if(A){const a=((n=A.variants)==null?void 0:n.map(i=>({fill:i.color,stroke:i.color,variant:i})))||[];return this.cachedColors.set(e.stepName,a),a}return[]}changeAlignment(e,t,A,n){if(!e.data||!e.data.regions)return;const a=n.getCommandDispatcher();for(const i of A){const o=new l.FontAlignmentCommand(i.id,t);a(o)}}async changeFillColor(e,t,A,n){var s;if(!e.data||!e.data.regions)return;const a=n.getCommandDispatcher();t.variant?n.updateMetadata(e.stepName,{color:t.variant.name}):n.updateMetadata(e.stepName,{color:t.fill});const i=e.data.colorOption,o=i?this.createTextFillSpotColor(i,t.variant):void 0;i?n.updateStorage(e.stepName,{color:t.fill,colorProfileAssetKey:(s=i.colorProfile)==null?void 0:s.key}):n.updateStorage(e.stepName,{color:t.fill});for(const r of A){if(!t.fill)throw new Error("Fill not set on new color selection!");const g=new l.FontColorCommand(r.id,t.fill,o);a(g)}}async availableFillImages(e){var A,n;const t=e.data.imageFillOption;if(t){const a=((n=(A=t.variants)==null?void 0:A.map(i=>{var o;return(o=i.asset)==null?void 0:o.fileLink}))==null?void 0:n.filter(i=>!!i))||[];return Promise.all(a.map(async i=>{const o=await l.getPatternImageData(i);return{src:i,width:o.width,height:o.height,scale:e.data.imageFillScale||1}}))}return Promise.resolve([])}async changeFillImage(e,t,A,n){var o,s;if(!e.data||!e.data.regions)return;const a=n.getCommandDispatcher(),i=(s=(o=e.option)==null?void 0:o.variants)==null?void 0:s.find(r=>{var g;return((g=r.asset)==null?void 0:g.fileLink)===t.src});n.updateMetadata(e.stepName,{fillImage:i==null?void 0:i.name}),n.updateStorage(e.stepName,{fillImage:t});for(const r of A){const g=new l.FontImageFillCommand(r.id,t);a(g)}}getProcessedInput(e,t,A){const n=A?e:this.injectReplaceableText(e,t);return l.applyTextTransformations(n,{vertical:t.vertical,uppercase:t.uppercase})}updateInputText(e,t,A,n){const a=n.getStepStorage(A.stepName),i=this.getProcessedInput(e,A.data,!!a.customiseAllText),o={command:void 0,helperText:"",errors:this.getErrorsForText(e,A,n)};if(o.errors.length>0)return o.helperText=o.errors[0].localizationKey,o;const s=(A.data.maxLength-i.length).toString();o.helperText=`${s} characters remaining`;const r=[],g=new Map,C=new Map;for(const B of t){if(!B.fontData)throw new k("Failed to resolve font data for text.");const[d,w]=l.determineCorrectFontSizeAndLines(B.fontSize,B.fontData,{left:B.x,top:B.y,width:B.width,height:B.height,rotation:B.rotation,panelId:""},[i],{size:A.data.size,minSize:A.data.minSize,maxSize:A.data.maxSize});g.set(B.id,d),C.set(B.id,w);const u=A.data.curved?i:(w||[]).join(`
+`)||e.includes("\r"))&&n.push({localizationKey:"workflow.steps.text.multipleLines"}),n}}async init(e,t,A){var a,i,o;const n=e.option;if(!n)return null;if(A)await this.reload(e,t,A);else{const s=this.getDefaultImageFillVariant(e.data),r=(a=s==null?void 0:s.asset)==null?void 0:a.fileLink,g=r?await l.getPatternImageData(r):void 0,C=g?{src:g.src,height:g.height,width:g.width,scale:e.data.imageFillScale||1}:void 0;t.updateStorage(e.stepName,{text:e.data.defaultText||"",inputText:e.data.defaultText||"",color:((i=await this.getDefaultColorVariant(e.data))==null?void 0:i.color)||await this.getDefaultColor(e.data),fillImage:C}),t.updateMetadata(e.stepName,{text:e.data.defaultText||"",color:((o=await this.getDefaultColorVariant(e.data))==null?void 0:o.name)||await this.getDefaultColor(e.data),fillImage:s==null?void 0:s.name});const B=L.getDefaultVariant(n);if(B)return this.selectVariantCommand(e,B,{},[],t,()=>{},()=>{},C)}return null}findLayoutElements(e,t){return e.getRegionElements(t.stepName).map(a=>l.findElement(a.id,e.getAllLayoutData()))}availableFillColors(e){var n;const t=this.cachedColors.get(e.stepName);if(t)return t;const A=e.data.colorOption;if(A){const a=((n=A.variants)==null?void 0:n.map(i=>({fill:i.color,stroke:i.color,variant:i})))||[];return this.cachedColors.set(e.stepName,a),a}return[]}changeAlignment(e,t,A,n){if(!e.data||!e.data.regions)return;const a=n.getCommandDispatcher();for(const i of A){const o=new l.FontAlignmentCommand(i.id,t);a(o)}}async changeFillColor(e,t,A,n){var s;if(!e.data||!e.data.regions)return;const a=n.getCommandDispatcher();t.variant?n.updateMetadata(e.stepName,{color:t.variant.name}):n.updateMetadata(e.stepName,{color:t.fill});const i=e.data.colorOption,o=i?this.createTextFillSpotColor(i,t.variant):void 0;i?n.updateStorage(e.stepName,{color:t.fill,colorProfileAssetKey:(s=i.colorProfile)==null?void 0:s.key}):n.updateStorage(e.stepName,{color:t.fill});for(const r of A){if(!t.fill)throw new Error("Fill not set on new color selection!");const g=new l.FontColorCommand(r.id,t.fill,o);a(g)}}async availableFillImages(e){var A,n;const t=e.data.imageFillOption;if(t){const a=((n=(A=t.variants)==null?void 0:A.map(i=>{var o;return(o=i.asset)==null?void 0:o.fileLink}))==null?void 0:n.filter(i=>!!i))||[];return Promise.all(a.map(async i=>{const o=await l.getPatternImageData(i);return{src:i,width:o.width,height:o.height,scale:e.data.imageFillScale||1}}))}return Promise.resolve([])}async changeFillImage(e,t,A,n){var o,s;if(!e.data||!e.data.regions)return;const a=n.getCommandDispatcher(),i=(s=(o=e.option)==null?void 0:o.variants)==null?void 0:s.find(r=>{var g;return((g=r.asset)==null?void 0:g.fileLink)===t.src});n.updateMetadata(e.stepName,{fillImage:i==null?void 0:i.name}),n.updateStorage(e.stepName,{fillImage:t});for(const r of A){const g=new l.FontImageFillCommand(r.id,t);a(g)}}getProcessedInput(e,t,A){const n=A?e:this.injectReplaceableText(e,t);return l.applyTextTransformations(n,{vertical:t.vertical,uppercase:t.uppercase})}updateInputText(e,t,A,n){const a=n.getStepStorage(A.stepName),i=this.getProcessedInput(e,A.data,!!a.customiseAllText),o={command:void 0,helperText:"",errors:this.getErrorsForText(e,A,n)};if(o.errors.length>0)return o.helperText=o.errors[0].localizationKey,o;const s=(A.data.maxLength-i.length).toString();o.helperText=`${s} characters remaining`;const r=[],g=new Map,C=new Map;for(const B of t){if(!B.fontData)throw new k("Failed to resolve font data for text.");const[d,w]=l.determineCorrectFontSizeAndLines(B.fontSize,B.fontData,{left:B.x,top:B.y,width:B.width,height:B.height,rotation:B.rotation,panelId:""},[i],{size:A.data.size,minSize:A.data.minSize,maxSize:A.data.maxSize});g.set(B.id,d),C.set(B.id,w);const u=A.data.curved?i:(w||[]).join(`
 `);r.push(this.generateTextChangeCommandsForRegion(d,A.data,B.id,u))}return!A.data.curved&&t.length>0&&!Array.from(C.values()).every(d=>d)?(o.errors.push({localizationKey:"workflow.steps.text.doesNotFit"}),o):(n.updateStorage(A.stepName,{text:e}),n.updateMetadata(A.stepName,{text:i}),a.defaultCleared&&n.setMandatoryFulfilled(A.stepName,!0),o.command=new l.GroupCommand(r),o)}async selectVariant(e,t,A,n,a){const i=await this.selectVariantCommand(e,t,A.getStepStorage(e.stepName)||{},A.getRegionElements(e.stepName),A,n,a);i&&(i.command&&A.getCommandDispatcher()(i.command),i.followup&&await i.followup())}createTextFillSpotColor(e,t){const A=e.colorProfile;if(A){const n=(A.name||"").replace(/\s/g,"-"),a=n.lastIndexOf("/"),o=n.slice(a+1).slice(0,-4);if(!t.namedColor)throw new Error("variant named color not set!");return{profileName:o,namedColor:t.namedColor}}}async reload(e,t,A){var r,g,C;const n=t.getSerializedStep(e.stepName,A.serializableWorkflow.steps),o=Object.values(A.layouts).map(B=>B.elements).flat().filter(B=>B.stepName===e.stepName),s=e.option;if(n!=null&&n.selectedVariants){const B=n.selectedVariants[0].id;if(s&&B){const d=(r=s.variants)==null?void 0:r.find(w=>w.id===B);if(d){const w=await this.fontDataFromVariant(d),u=o.map(p=>({id:p.id,region:p.stepRegion})),E=(g=n.storage)==null?void 0:g.color,Q=(C=n.storage)==null?void 0:C.text;await t.setSelectionsAndElements(e.stepName,[d],u,async()=>{t.updateMetadata(e.stepName,{color:E,text:Q}),t.updateStorage(e.stepName,{text:Q,inputText:Q});const p=o.map(I=>new l.FontSourceCommand(I.id,w)),f=new l.GroupCommand(p);t.getCommandDispatcher()(f)});const{command:m}=z.updateInputText(Q||"",o,e,t);m&&t.getCommandDispatcher()(m)}}}}async getDefaultColorVariant(e){const t=e.colorOption;if(t)return L.getDefaultVariant(t)}async getDefaultColor(e){const t=e.colorOption;if(!t)return;const A=L.getDefaultVariant(t);return A==null?void 0:A.color}getDefaultImageFillVariant(e){const t=e.imageFillOption;if(t)return L.getDefaultVariant(t)}async fontDataFromVariant(e){const t=e.asset;if(!t)throw new W(e);const A=t.fileLink;if(!A)throw new $(t);const n=await l.loadFont(A);return{assetUrl:A,name:n.names.fullName.en}}async selectVariantCommand(e,t,A,n,a,i,o,s){var C;const r=a.markUpdatePending(),g=await this.fontDataFromVariant(t);if(n.length>0){const B=n.map(u=>new l.FontSourceCommand(u.id,g));if(s){const u=n.map(E=>new l.FontImageFillCommand(E.id,s));B.push(...u)}const d=await this.changeInputTextWithRegion(e,e.data.size||Ve,g,A.text||"",A,a,!!A.customiseAllText,i,o);return d&&B.push(d),{command:new l.GroupCommand(B),followup:async()=>{a.markUpdateCompleted(r),await a.setSelectionsAndElements(e.stepName,[t],n)}}}else{const B=await this.createTextboxRegions(e.stepName,t,e.data,g,A,a),d=await this.changeInputTextWithRegion(e,e.data.size||Ve,g,((C=B[0])==null?void 0:C.newElement.input)||A.text||e.data.defaultText||"",A,a,!!A.customiseAllText,i,o),w=B.flatMap(E=>E.commands);if(s){const E=B.map(Q=>new l.FontImageFillCommand(Q.regionElement.id,s));w.push(...E)}return d&&w.push(d),{command:new l.GroupCommand(w),followup:async()=>{a.markUpdateCompleted(r)}}}}injectReplaceableText(e,t){return t.replaceableText?t.replaceableText.replace("{{}}",e):e}async createTextboxRegions(e,t,A,n,a,i){if(!A||!A.regions)throw new Error("Step data not supplied");const o=a.text||A.defaultText||"",s=this.getProcessedInput(o,A,!1),r=async C=>{var u;const d=i.getLayouts().find(E=>E.panelId===C.panelId),w=l.generate();try{if(!d)throw new Ye("Failed to find layout for region: "+C.panelId);const E=A.colorOption;let Q;if(E&&E.variants){const R=E.variants.find(H=>{var T;return H.id===((T=E.defaultVariant)==null?void 0:T.id)})||E.variants[0];Q=this.createTextFillSpotColor(E,R),i.updateStorage(e,{colorProfileAssetKey:(u=E.colorProfile)==null?void 0:u.key})}const m=await this.getDefaultColor(A),p=m||"#000000",f={stepRegion:C,stepName:e,align:this.textAlign(A),fill:a.color?a.color:p,fontSize:A.size||Ve,fontData:n,id:w,layer:C.layer,layerIndex:C.layerIndex,rotation:C.rotation,text:s,input:o,type:l.LayoutElementType.Textbox,vertical:A.vertical,x:C.left,y:C.top,height:C.height,width:C.width,immutable:C.immutable,verticalAlign:A.verticalAlign||"middle",curved:A.curved,paths:A.paths,fillSpotColorDefinition:Q},I=[],D=new Map,F=new Map;if(!f.fontData)throw new k("Failed to resolve font data for text.");const[y,S]=l.determineCorrectFontSizeAndLines(f.fontSize,f.fontData,{left:f.x,top:f.y,width:f.width,height:f.height,rotation:f.rotation,panelId:""},[s],{size:A.size,minSize:A.minSize,maxSize:A.maxSize});D.set(f.id,y),F.set(f.id,S);const x=A.curved||A.vertical?s:(S||[]).join(`
 `);I.push(this.generateTextChangeCommandsForRegion(y,A,f.id,x));const P=new l.CreateElementCommand(f,d);return{regionElement:{id:w,region:C},commands:[P,...I],newElement:f,fontData:n}}catch(E){throw console.log(E),new Se("Error adding font to region")}},g=await Promise.all(A.regions.map(r)).catch(C=>{throw C instanceof Se?(Gt.setLatestToast("Failed to load font.",ue.Error),C):C instanceof Ye?C:new Error(C)});return await i.setSelectionsAndElements(e,[t],g.map(C=>C.regionElement),async()=>{i.updateMetadata(e,{text:o}),i.updateStorage(e,{text:o})}),g}generateTextChangeCommandsForRegion(e,t,A,n){const a=[],i=new l.TextChangeCommand(A,n);if(a.push(i),!t.size){const s=new l.FontSizeCommand(A,e);a.push(s)}return new l.GroupCommand(a)}async changeInputTextWithRegion(e,t,A,n,a,i,o,s,r,g){const C=(n||"").replace(/^(?![\u000A\u000D])[\u0000-\u001F\u007F-\u009F]/g,""),B=this.getProcessedInput(C,e.data,o),d=i.getRegionElements(e.stepName),w=new Map,u=new Map;for(const f of d)if(f.region){const[I,D]=l.determineCorrectFontSizeAndLines(t,A,f.region,[B],{size:e.data.size,minSize:e.data.minSize,maxSize:e.data.maxSize});w.set(f.id,I),u.set(f.id,D)}const Q=(()=>{if(e.data&&e.data.maxLength&&B.length>e.data.maxLength)return g&&g(!0),{info:"0"};const f=i.getProfanities(),I=Ue.split(B.toLowerCase());for(const D of I)for(const F in f){const y=f[F].toLowerCase().replace(/\s/g,"");if(D===y)return s(!0),{error:"Blocked profanity."}}return!e.data.vertical&&!e.data.allowNewlines&&(B.includes(`
 `)||B.includes("\r"))?(s(!0),{error:"Cannot span multiple lines."}):!e.data.curved&&!Array.from(u.values()).every(F=>F)?(s(!0),{error:"Does not fit."}):(s(!1),{info:(e.data.maxLength-B.length).toString()})})();if(Q.error){r(Q.error);return}if(r(`${Q.info} characters remaining`||""),g)return;i.updateStorage(e.stepName,{text:C}),i.updateMetadata(e.stepName,{text:this.injectReplaceableText(C,e.data)}),a.defaultCleared&&i.setMandatoryFulfilled(e.stepName,!0);const m=[];for(const f of d){const I=e.data.curved?B:(u.get(f.id)||[]).join(`

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spiffcommerce/core",
-    "version": "21.20.4",
+    "version": "21.20.5",
     "description": "Core client API for interacting with the Spiff Commerce backend.",
     "source": "src/index.ts",
     "main": "dist/index.umd.cjs",