@visitscotland/component-library 5.1.0 → 5.1.1

package/dist/client/manifest.json

@@ -2434,7 +2434,7 @@
       "scripts/376f0cdfa31d1022f85e.js",
       "scripts/640c5fc043899fb44448.js",
       "scripts/75135807152939cb5ae9.js",
-      "scripts/e1d08375d60e1ad4b8ad.js"
+      "scripts/0b527189990321607b75.js"
     ],
     "styles": [
       "styles/18a7a8deda3fe8cb077d.css",
@@ -2447,7 +2447,7 @@
       "styles/376f0cdfa31d1022f85e.css",
       "styles/640c5fc043899fb44448.css",
       "styles/75135807152939cb5ae9.css",
-      "styles/e1d08375d60e1ad4b8ad.css"
+      "styles/0b527189990321607b75.css"
     ]
   },
   "VsGlobalMenuLanguage": {

package/dist/client/scripts/0b527189990321607b75.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VsForm=t():e.VsForm=t()}(self,(function(){return(self.webpackChunk_visitscotland_component_library=self.webpackChunk_visitscotland_component_library||[]).push([[1736],{3081:function(e,t,a){"use strict";a(41133)},18668:function(e,t,a){"use strict";a.d(t,{A:function(){return i.A}});var i=a(97272)},19464:function(e,t,a){"use strict";a.r(t);var i=a(82167),n=a(18668);a(3081);const r=(0,a(66262).A)(n.A,[["render",i.X]]);t.default=r},26047:function(){},41133:function(e,t,a){"use strict";var i=a(85072),n=a.n(i),r=a(97825),s=a.n(r),o=a(77659),l=a.n(o),d=a(55056),u=a.n(d),f=a(10540),g=a.n(f),c=a(41113),m=a.n(c),h=a(26047),p=a.n(h),v={};v.styleTagTransform=m(),v.setAttributes=u(),v.insert=l().bind(null,"head"),v.domAPI=s(),v.insertStyleElement=g(),n()(p(),v),p()&&p().locals&&p().locals},82167:function(e,t,a){"use strict";a.d(t,{X:function(){return i.X}});var i=a(83911)},83911:function(e,t,a){"use strict";a.d(t,{X:function(){return c}});var i=a(20641),n=a(53751),r=a(90033),s={class:"vs-form","data-test":"vs-form"},o={class:"vs-form__main-heading vs-heading vs-heading--heading-l float-none","data-test":"vs-form__main-heading"},l={key:0},d={"aria-live":"assertive"},u={key:0},f=["innerHTML"],g={key:2,class:"mt-200"};function c(e,t,a,c,m,h){var p=(0,i.g2)("VsInput"),v=(0,i.g2)("VsSelect"),b=(0,i.g2)("VsCheckbox"),y=(0,i.g2)("VsTextarea"),D=(0,i.g2)("BFormGroup"),F=(0,i.g2)("VsRecaptcha"),k=(0,i.g2)("VsButton"),T=(0,i.g2)("VsWarning"),E=(0,i.g2)("VsHeading");return(0,i.uX)(),(0,i.CE)("div",s,[t[1]||(t[1]=(0,i.Lk)("form",{class:"d-none"},null,-1)),m.submitted?(0,i.Q3)("",!0):((0,i.uX)(),(0,i.CE)("form",{key:0,onSubmit:t[0]||(t[0]=(0,n.withModifiers)((function(){return h.preSubmit&&h.preSubmit.apply(h,arguments)}),["prevent"]))},[(0,i.Lk)("fieldset",null,[(0,i.Lk)("legend",o,(0,r.toDisplayString)(h.getTranslatedContent("heading")),1),((0,i.uX)(!0),(0,i.CE)(i.FK,null,(0,i.pI)(m.formData.fields,(function(e,t){return(0,i.uX)(),(0,i.Wv)(D,{key:e.name,label:h.needsLabel(e)?h.getTranslatedLabel(e.name,t):"","label-for":h.needsLabel(e)?e.name:"",class:(0,r.normalizeClass)(h.conditionalElementClass(e.name))},{default:(0,i.k6)((function(){return[h.isUndefined(e.descriptor)||"checkbox"!==e.element?(0,i.Q3)("",!0):((0,i.uX)(),(0,i.CE)("legend",l,(0,r.toDisplayString)(h.getTranslatedLegend(e.name,t)),1)),(0,i.Lk)("div",{class:(0,r.normalizeClass)(h.conditionalElementClass(e.name))},["input"===e.element?((0,i.uX)(),(0,i.Wv)(p,{key:0,ref_for:!0,ref:e.name,onStatusUpdate:h.updateFieldData,"field-name":e.name,type:e.type,"validation-rules":e.validation||{},"validation-messages":h.getTranslatedValidation(e.name,t)||{},"generic-validation":h.getMessagingData("validation",a.language),invalid:m.errorFields.indexOf(e.name)>-1,"trigger-validate":m.triggerValidate,"hint-text":h.getTranslatedHint(e.name,t),placeholder:e.placeholder||"","re-alert-errors":m.reAlertErrors},null,8,["onStatusUpdate","field-name","type","validation-rules","validation-messages","generic-validation","invalid","trigger-validate","hint-text","placeholder","re-alert-errors"])):(0,i.Q3)("",!0),"select"===e.element?((0,i.uX)(),(0,i.Wv)(v,{key:1,options:h.getTranslatedOptions(e.name,t),ref_for:!0,ref:e.name,onStatusUpdate:h.updateFieldData,"field-name":e.name,"validation-rules":e.validation||{},"validation-messages":h.getTranslatedValidation(e.name,t)||{},"generic-validation":h.getMessagingData("validation",a.language),invalid:m.errorFields.indexOf(e.name)>-1,"trigger-validate":m.triggerValidate,"country-list-url":a.countryListUrl,countries:e.countries,"hint-text":h.getTranslatedHint(e.name,t),"re-alert-errors":m.reAlertErrors},null,8,["options","onStatusUpdate","field-name","validation-rules","validation-messages","generic-validation","invalid","trigger-validate","country-list-url","countries","hint-text","re-alert-errors"])):(0,i.Q3)("",!0),"checkbox"===e.element?((0,i.uX)(),(0,i.Wv)(b,{key:e.name,ref_for:!0,ref:e.name,name:e.name,value:e.value,label:h.getTranslatedLabel(e.name,t),onStatusUpdate:h.updateFieldData,"field-name":e.name,"validation-rules":e.validation||{},"validation-messages":h.getTranslatedValidation(e.name,t)||{},"generic-validation":h.getMessagingData("validation",a.language),invalid:m.errorFields.indexOf(e.name)>-1,"trigger-validate":m.triggerValidate,"optional-text":h.getMessagingData("optional",a.language),"hint-text":h.getTranslatedHint(e.name,t),"info-text":h.getTranslatedInfo(e.name,t),"re-alert-errors":m.reAlertErrors},null,8,["name","value","label","onStatusUpdate","field-name","validation-rules","validation-messages","generic-validation","invalid","trigger-validate","optional-text","hint-text","info-text","re-alert-errors"])):(0,i.Q3)("",!0),"textarea"===e.element?((0,i.uX)(),(0,i.Wv)(y,{key:3,ref_for:!0,ref:e.name,onStatusUpdate:h.updateFieldData,"field-name":e.name,"validation-rules":e.validation||{},"validation-messages":h.getTranslatedValidation(e.name,t)||{},"generic-validation":h.getMessagingData("validation",a.language),invalid:m.errorFields.indexOf(e.name)>-1,"trigger-validate":m.triggerValidate,"hint-text":h.getTranslatedHint(e.name,t),placeholder:e.placeholder||"","re-alert-errors":m.reAlertErrors,rows:e.rows||null},null,8,["onStatusUpdate","field-name","validation-rules","validation-messages","generic-validation","invalid","trigger-validate","hint-text","placeholder","re-alert-errors","rows"])):(0,i.Q3)("",!0)],2)]})),_:2},1032,["label","label-for","class"])})),128))]),(0,i.RG)(e.$slots,"hidden-fields"),(0,i.bF)(F,{onVerified:h.onRecaptchaVerify,"site-key":a.recaptchaKey,invalid:!m.recaptchaVerified&&m.showErrorMessage,language:a.language,"error-msg":h.getMessagingData("recaptchaError",a.language),class:"mt-300","textarea-label":a.recaptchaTextareaLabel,"re-alert-errors":m.reAlertErrors},null,8,["onVerified","site-key","invalid","language","error-msg","textarea-label","re-alert-errors"]),(0,i.bF)(k,{variant:"primary",type:"submit",class:"vs-form__submit mt-300",onClick:h.preSubmit},{default:(0,i.k6)((function(){return[(0,i.eW)((0,r.toDisplayString)(h.getTranslatedContent("submit")),1)]})),_:1},8,["onClick"])],32)),(0,i.bF)(T,{class:"vs-form__no-js"},{default:(0,i.k6)((function(){return[(0,i.RG)(e.$slots,"no-js")]})),_:3}),(0,i.Lk)("div",d,[m.submitting?((0,i.uX)(),(0,i.CE)("p",u,[(0,i.RG)(e.$slots,"submitting")])):(0,i.Q3)("",!0),m.submitted?((0,i.uX)(),(0,i.CE)(i.FK,{key:1},[h.getTranslatedContent("successHeading")?((0,i.uX)(),(0,i.Wv)(E,{key:0,level:"2","heading-style":"heading-l"},{default:(0,i.k6)((function(){return[(0,i.eW)((0,r.toDisplayString)(h.getTranslatedContent("successHeading")),1)]})),_:1})):(0,i.Q3)("",!0),(0,i.Lk)("p",{class:"vs-form__content",innerHTML:h.getTranslatedContent("successContent")},null,8,f)],64)):(0,i.Q3)("",!0),m.submitError?((0,i.uX)(),(0,i.CE)("p",g,[(0,i.RG)(e.$slots,"submit-error")])):(0,i.Q3)("",!0)])])}},97272:function(e,t,a){"use strict";var i=a(64467),n=a(3453),r=a(89394),s=a(34352),o=a(57536),l=a(88620),d=a(22142),u=a(51688),f=a(26358),g=a(88258),c=a(48836),m=a(13838),h=a(79122),p=a(11696),v=a(98745);function b(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,i)}return a}function y(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?b(Object(a),!0).forEach((function(t){(0,i.A)(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):b(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}t.A={name:"VsForm",status:"prototype",release:"0.0.1",components:{VsInput:d.default,VsSelect:u.default,VsCheckbox:f.default,BFormGroup:s.a3,VsRecaptcha:g.default,VsButton:c.default,VsHeading:m.default,VsWarning:h.default,VsTextarea:p.default},mixins:[v.default],props:{isMarketo:{type:Boolean,default:!0},submissionType:{type:String,default:"breg"},submitUrl:{type:String,default:""},dataUrl:{type:String,required:!0},recaptchaKey:{type:String,default:(0,l.A)("RECAPTCHA_TOKEN")},recaptchaTextareaLabel:{type:String,default:"Does not need any text"},isProd:{type:Boolean,default:!1},munchkinId:{type:String,default:""},marketoInstance:{type:String,default:""},language:{type:String,default:"en"},messagingUrl:{type:String,required:!0},countryListUrl:{type:String,default:""},isTest:{type:Boolean,default:!0}},data:function(){return{submitted:!1,submitting:!1,submitError:!1,formData:{},messagingData:{},form:{},formIsInvalid:!1,showErrorMessage:!1,errorFields:[],triggerValidate:!1,recaptchaVerified:!1,conditionalFields:{},inputVal:"",reAlertErrors:!1,emailFieldName:""}},computed:{formId:function(){return this.isProd?this.formData.formLiveId:this.formData.formSandboxId},showFormHeading:function(){return!this.isUndefined(this.getTranslatedContent)&&!this.isUndefined(this.getTranslatedContent("heading"))}},created:function(){this.getFormData(),this.getGlobalMessaging()},methods:{getFormData:function(){var e=this;o.A.get(this.dataUrl).then((function(t){e.formData=t.data,e.isMarketo&&window.MktoForms2&&window.MktoForms2.loadForm(e.marketoInstance,e.munchkinId,e.formId),t.data.fields.forEach((function(t){e.form[t.name]="",t.conditional&&(e.conditionalFields[t.name]=!1)})),e.checkConditionalFields()})).catch((function(){}))},getGlobalMessaging:function(){var e=this;o.A.get(this.messagingUrl).then((function(t){e.messagingData=t.data})).catch((function(){}))},getLanguageObj:function(){return this.isUndefined(this.formData[this.language])?{}:this.formData[this.language]||void 0},getTranslatedLabel:function(e,t){var a=this.getLanguageObj(),i="";return i="en"===this.language||this.isUndefined(a[e])||this.isUndefined(a[e].label)?this.formData.fields[t].label:a[e].label,this.showOptionalText(this.formData.fields[t])&&!this.isUndefined(this.getMessagingData("optional",this.language))&&(i="".concat(i," (").concat(this.getMessagingData("optional",this.language),")")),i},getTranslatedLegend:function(e,t){var a=this.getLanguageObj();return"en"===this.language||this.isUndefined(a[e])||this.isUndefined(a[e].descriptor)?this.formData.fields[t].descriptor:a[e].descriptor},getTranslatedInfo:function(e,t){var a=this.getLanguageObj();return"en"===this.language||this.isUndefined(a[e])||this.isUndefined(a[e].info)?this.formData.fields[t].info:a[e].info},getTranslatedValidation:function(e,t){var a,i=this.getLanguageObj();return"en"!==this.language||this.isUndefined(this.formData.fields[t].validationMessages)?this.isUndefined(i[e])||this.isUndefined(i[e].validationMessages)?"en"===this.language&&(a=this.formData.fields[t].validationMessages):a=i[e].validationMessages:a=this.formData.fields[t].validationMessages,a},getTranslatedOptions:function(e,t){var a=this.getLanguageObj(),i=[];return void 0===(i="en"===this.language||this.isUndefined(a[e])||this.isUndefined([e].options)?this.formData.fields[t].options:a[e].options)&&(i=[]),i},getTranslatedHint:function(e,t){var a=this.getLanguageObj();return"en"===this.language||this.isUndefined(a[e])||this.isUndefined(a[e].hint)?this.isUndefined(this.formData.fields[t].hint)?"":this.formData.fields[t].hint:a[e].hint},getTranslatedContent:function(e){var t=this.getLanguageObj();return"en"!==this.language||this.isUndefined(this.formData.content)||this.isUndefined(this.formData.content[e])?this.isUndefined(t.content)||this.isUndefined(t.content[e])?this.getMessagingData(e,this.language):t.content[e]:this.formData.content[e]},getMessagingData:function(e,t){return Object.keys(this.messagingData).length>0?this.messagingData[t][e]:"validation"===e?{}:""},getHiddenFields:function(){return(0,r.A)(this.$el.querySelectorAll("input[type=hidden]")).map(this.parseBooleanStringsFromInputField).reduce((function(e,t){return e[t.name]=t.value,e}),{})},parseBooleanStringsFromInputField:function(e){var t=e.value;return"true"===t?t=!0:"false"===t&&(t=!1),{name:e.name,value:t}},isUndefined:function(e){return void 0===e},updateFieldData:function(e){this.form[e.field]=e.value||"",Array.isArray(e.errors)?this.formIsInvalid=e.errors.length>0:this.formIsInvalid=null!==e.errors,this.manageErrorStatus(e.field,e.errors),this.checkConditionalFields()},manageErrorStatus:function(e,t){var a=this.errorFields.indexOf(e);-1!==a?(!t||t.length<1)&&this.errorFields.splice(a,1):t&&t.length>0&&this.errorFields.push(e)},showOptionalText:function(e){return!(!this.isUndefined(e.validation)&&!this.isUndefined(e.validation.required))},needsLabel:function(e){return"radio"!==e.element&&"submit"!==e.element&&"checkbox"!==e.element},preSubmit:function(e){var t=this;e.preventDefault(),this.submitError=!1,this.isTest||this.onRecaptchaVerify(),this.triggerValidate=!0;var a=this.formData.fields.filter((function(e){return e.validation&&e.validation.required}));0===a.length?this.formIsInvalid=!1:a.forEach((function(e){if(!/\S/.test(t.form[e.name])){var a=!0;e.name in t.conditionalFields&&!t.conditionalFields[e.name]&&(a=!1),t.formIsInvalid=a}})),this.showErrorMessage=this.formIsInvalid,Object.entries(this.conditionalFields).forEach((function(e){var a=(0,n.A)(e,2),i=a[0];a[1]||(t.form[i]="")})),this.errorFields.length>0&&(this.formIsInvalid=!0),!this.formIsInvalid&&this.recaptchaVerified?this.isMarketo?this.marketoSubmit():this.axiosSubmit():(this.showErrorMessage=!0,this.reAlertErrors=!0,setTimeout((function(){t.reAlertErrors=!1}),100))},marketoSubmit:function(){var e=this;this.createDataLayerObject("formsDataEvent");var t=window.MktoForms2.allForms()[0];t.addHiddenFields(this.form),window.grecaptcha&&t.addHiddenFields({lastReCAPTCHAUserFingerprint:window.grecaptcha.getResponse(),lastRecaptchaEnabledFormID:this.formId}),t.onSuccess((function(){return e.submitting=!1,e.submitted=!0,!1})),t.onSubmit((function(){e.submitting=!0})),t.submit()},axiosSubmit:function(){var e=this;this.createDataLayerObject("formsDataEvent"),this.submitting=!0;var t="";window.grecaptcha&&(t=window.grecaptcha.getResponse());var a=this.getHiddenFields();o.A.post(this.submitUrl,y(y(y({},this.form),a),{},{formType:this.formData.content?this.formData.content.formType:"","g-recaptcha-response":t})).then((function(){return e.submitting=!1,e.submitted=!0,e.attachEmail(),!1})).catch((function(){return e.submitError=!0,!1}))},attachEmail:function(){var e=this;this.submissionType&&"breg"===this.submissionType&&(this.formData.fields.forEach((function(t){"email"!==t.type||e.emailFieldName||(e.emailFieldName=t.name)})),this.emailFieldName&&"undefined"!=typeof exponea&&exponea.identify({email_id:this.form[this.emailFieldName]},{},(function(){}),(function(){}),!0))},onRecaptchaVerify:function(){window.grecaptcha&&"function"==typeof window.grecaptcha.getResponse&&""!==window.grecaptcha.getResponse()?this.recaptchaVerified=!0:this.recaptchaVerified=!1},checkConditionalFields:function(){var e=this;Object.keys(this.conditionalFields).forEach((function(t){var a=e.formData.fields.find((function(e){return e.name===t})),i=!0;Object.keys(a.conditional).forEach((function(n){var r=a.conditional[n];Array.isArray(r)?-1===r.indexOf(e.form[n])&&(i=!1):e.form[n]!==r&&(i=!1),i?e.conditionalFields[t]||(e.conditionalFields[t]=!0,e.$refs[t]&&e.$refs[t][0].manualValidate()):(e.manageErrorStatus(t,[]),e.conditionalFields[t]=!1)}))}))},conditionalElementClass:function(e){return!0===this.conditionalFields[e]||void 0===this.conditionalFields[e]?"":"d-none"}}}}},function(e){return e.O(0,[641,6262,7510,3751,4352,4467,7527,8086,810,7800,9394,2543,3453,281,7536,7171,4982,6422,8745,8836,3838,4580,9122,4282,2142,1688,6358,1696,8258],(function(){return e(e.s=19464)})),e.O()}])}));

package/dist/components/components/form/Form.vue.d.ts

@@ -8,6 +8,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * For non-marketo forms this dictates which data processing layer the form uses - 'breg',
+     * 'fepl', or 'dp'. This adjusts certain behaviour, for example the `exponea.identify()`
+     * tracking is only desirable for breg forms.
+     *
+     * Defaults to breg as it is by far the most common form type, and from within the
+     * freemarker sites we don't currently have access to the information to distinguish them.
+     */
+    submissionType: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * The target url for the form, if not marketo
      */
@@ -238,8 +250,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
      */
     axiosSubmit(): void;
     /**
-     * If exponea is present in the window (via gtm with accepted cookies), attach the
-     * current user to the record associated with their email address
+     * If exponea is present in the window (via gtm with accepted cookies), and the form uses
+     * BREG, attach the current user to the record associated with their email address
      */
     attachEmail(): void;
     /**
@@ -282,6 +294,18 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * For non-marketo forms this dictates which data processing layer the form uses - 'breg',
+     * 'fepl', or 'dp'. This adjusts certain behaviour, for example the `exponea.identify()`
+     * tracking is only desirable for breg forms.
+     *
+     * Defaults to breg as it is by far the most common form type, and from within the
+     * freemarker sites we don't currently have access to the information to distinguish them.
+     */
+    submissionType: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * The target url for the form, if not marketo
      */
@@ -365,6 +389,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     language: string;
     countryListUrl: string;
     isMarketo: boolean;
+    submissionType: string;
     submitUrl: string;
     recaptchaKey: string;
     recaptchaTextareaLabel: string;
@@ -1877,12 +1902,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 autofocus?: boolean | undefined;
                 disabled?: boolean | undefined;
                 form?: string | undefined;
-                multiple? /**
-                 * Text for invisible recaptcha textarea - tells
-                 * screenreader users it's not needed
-                 */: boolean | undefined;
+                multiple?: boolean | undefined;
                 required?: boolean | undefined;
-                size?: keyof import('bootstrap-vue-next').BaseSize | undefined;
+                size
+                /**
+                 * The target url for the form, if not marketo
+                 */
+                ? /**
+                 * The target url for the form, if not marketo
+                 */: keyof import('bootstrap-vue-next').BaseSize | undefined;
                 plain?: boolean | undefined;
                 state?: boolean | null | undefined;
                 modelValue?: ((string | number | boolean | readonly unknown[] | Readonly<Record<string, unknown>> | null) & T) | undefined;
@@ -1891,9 +1919,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 textField?: string | undefined;
                 htmlField?: string | undefined;
                 disabledField?: string | undefined;
-                optionsField? /**
-                 * Marketo instance URL for the form
-                 */: string | undefined;
+                optionsField?: string | undefined;
                 labelField?: string | undefined;
                 selectSize?: import('node_modules/bootstrap-vue-next/dist/src/types').Numberish | undefined;
             } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
@@ -1904,15 +1930,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             }>): void;
             attrs: any;
             slots: Readonly<{
-                default? /**
-                 * URL for generic messaging config
-                 */: ((props: Record<string, never>) => any) | undefined;
+                default?: ((props: Record<string, never>) => any) | undefined;
                 first?: ((props: Record<string, never>) => any) | undefined;
             }> & {
-                default? /**
-                 * We can't interact with recaptcha in the test environment and should
-                 * remove it from the form flow.
-                 */: ((props: Record<string, never>) => any) | undefined;
+                default?: ((props: Record<string, never>) => any) | undefined;
                 first?: ((props: Record<string, never>) => any) | undefined;
             };
             emit: any;