@uportal/form-builder 2.0.0 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -12
- package/dist/form-builder.js +995 -161
- package/dist/form-builder.js.map +1 -1
- package/dist/form-builder.min.js +286 -73
- package/dist/form-builder.min.js.map +1 -1
- package/package.json +36 -8
- package/src/form-builder.js +937 -159
- package/src/index.js +0 -4
package/dist/form-builder.min.js
CHANGED
|
@@ -3,26 +3,27 @@
|
|
|
3
3
|
* Copyright 2019 Google LLC
|
|
4
4
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5
5
|
*/
|
|
6
|
-
const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),i=new WeakMap;let r=class{constructor(t,e,i){if(this._$cssResult$=!0,i!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const s=this.t;if(e&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=i.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&i.set(s,t))}return t}toString(){return this.cssText}};const n=(t,...e)=>{const i=1===t.length?t[0]:e.reduce((e,s,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[i+1],t[0]);return new r(i,t,s)},o=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return(t=>new r("string"==typeof t?t:t+"",void 0,s))(e)})(t):t,{is:a,defineProperty:
|
|
6
|
+
const t=globalThis,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),i=new WeakMap;let r=class{constructor(t,e,i){if(this._$cssResult$=!0,i!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const s=this.t;if(e&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=i.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&i.set(s,t))}return t}toString(){return this.cssText}};const n=(t,...e)=>{const i=1===t.length?t[0]:e.reduce((e,s,i)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[i+1],t[0]);return new r(i,t,s)},o=e?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return(t=>new r("string"==typeof t?t:t+"",void 0,s))(e)})(t):t,{is:a,defineProperty:l,getOwnPropertyDescriptor:h,getOwnPropertyNames:c,getOwnPropertySymbols:d,getPrototypeOf:u}=Object,p=globalThis,m=p.trustedTypes,f=m?m.emptyScript:"",g=p.reactiveElementPolyfillSupport,$=(t,e)=>t,b={toAttribute(t,e){switch(e){case Boolean:t=t?f:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(t){s=null}}return s}},y=(t,e)=>!a(t,e),v={attribute:!0,type:String,converter:b,reflect:!1,useDefault:!1,hasChanged:y};
|
|
7
7
|
/**
|
|
8
8
|
* @license
|
|
9
9
|
* Copyright 2017 Google LLC
|
|
10
10
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
11
|
-
*/Symbol.metadata??=Symbol("metadata"),
|
|
11
|
+
*/Symbol.metadata??=Symbol("metadata"),p.litPropertyMetadata??=new WeakMap;let _=class extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=v){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const s=Symbol(),i=this.getPropertyDescriptor(t,s,e);void 0!==i&&l(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){const{get:i,set:r}=h(this.prototype,t)??{get(){return this[e]},set(t){this[e]=t}};return{get:i,set(e){const n=i?.call(this);r?.call(this,e),this.requestUpdate(t,n,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??v}static _$Ei(){if(this.hasOwnProperty($("elementProperties")))return;const t=u(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty($("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty($("properties"))){const t=this.properties,e=[...c(t),...d(t)];for(const s of e)this.createProperty(s,t[s])}const t=this[Symbol.metadata];if(null!==t){const e=litPropertyMetadata.get(t);if(void 0!==e)for(const[t,s]of e)this.elementProperties.set(t,s)}this._$Eh=new Map;for(const[t,e]of this.elementProperties){const s=this._$Eu(t,e);void 0!==s&&this._$Eh.set(s,t)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(o(t))}else void 0!==t&&e.push(o(t));return e}static _$Eu(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const s=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((s,i)=>{if(e)s.adoptedStyleSheets=i.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of i){const i=document.createElement("style"),r=t.litNonce;void 0!==r&&i.setAttribute("nonce",r),i.textContent=e.cssText,s.appendChild(i)}})(s,this.constructor.elementStyles),s}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){const s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(void 0!==i&&!0===s.reflect){const r=(void 0!==s.converter?.toAttribute?s.converter:b).toAttribute(e,s.type);this._$Em=t,null==r?this.removeAttribute(i):this.setAttribute(i,r),this._$Em=null}}_$AK(t,e){const s=this.constructor,i=s._$Eh.get(t);if(void 0!==i&&this._$Em!==i){const t=s.getPropertyOptions(i),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:b;this._$Em=i;const n=r.fromAttribute(e,t.type);this[i]=n??this._$Ej?.get(i)??n,this._$Em=null}}requestUpdate(t,e,s){if(void 0!==t){const i=this.constructor,r=this[t];if(s??=i.getPropertyOptions(t),!((s.hasChanged??y)(r,e)||s.useDefault&&s.reflect&&r===this._$Ej?.get(t)&&!this.hasAttribute(i._$Eu(t,s))))return;this.C(t,e,s)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:r},n){s&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,n??e??this[t]),!0!==r||void 0!==n)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),!0===i&&this._$Em!==t&&(this._$Eq??=new Set).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(t){Promise.reject(t)}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,e]of this._$Ep)this[t]=e;this._$Ep=void 0}const t=this.constructor.elementProperties;if(t.size>0)for(const[e,s]of t){const{wrapped:t}=s,i=this[e];!0!==t||this._$AL.has(e)||void 0===i||this.C(e,void 0,s,i)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(e)):this._$EM()}catch(e){throw t=!1,this._$EM(),e}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM()}updated(t){}firstUpdated(t){}};_.elementStyles=[],_.shadowRootOptions={mode:"open"},_[$("elementProperties")]=new Map,_[$("finalized")]=new Map,g?.({ReactiveElement:_}),(p.reactiveElementVersions??=[]).push("2.1.1");
|
|
12
12
|
/**
|
|
13
13
|
* @license
|
|
14
14
|
* Copyright 2017 Google LLC
|
|
15
15
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
16
16
|
*/
|
|
17
|
-
const A=globalThis,
|
|
17
|
+
const A=globalThis,x=A.trustedTypes,w=x?x.createPolicy("lit-html",{createHTML:t=>t}):void 0,S="$lit$",E=`lit$${Math.random().toFixed(9).slice(2)}$`,C="?"+E,k=`<${C}>`,F=document,O=()=>F.createComment(""),U=t=>null===t||"object"!=typeof t&&"function"!=typeof t,P=Array.isArray,j="[ \t\n\f\r]",D=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,M=/-->/g,N=/>/g,T=RegExp(`>|${j}(?:([^\\s"'>=/]+)(${j}*=${j}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),R=/'/g,I=/"/g,z=/^(?:script|style|textarea|title)$/i,H=(t=>(e,...s)=>({_$litType$:t,strings:e,values:s}))(1),q=Symbol.for("lit-noChange"),B=Symbol.for("lit-nothing"),V=new WeakMap,L=F.createTreeWalker(F,129);function W(t,e){if(!P(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==w?w.createHTML(e):e}const J=(t,e)=>{const s=t.length-1,i=[];let r,n=2===e?"<svg>":3===e?"<math>":"",o=D;for(let e=0;e<s;e++){const s=t[e];let a,l,h=-1,c=0;for(;c<s.length&&(o.lastIndex=c,l=o.exec(s),null!==l);)c=o.lastIndex,o===D?"!--"===l[1]?o=M:void 0!==l[1]?o=N:void 0!==l[2]?(z.test(l[2])&&(r=RegExp("</"+l[2],"g")),o=T):void 0!==l[3]&&(o=T):o===T?">"===l[0]?(o=r??D,h=-1):void 0===l[1]?h=-2:(h=o.lastIndex-l[2].length,a=l[1],o=void 0===l[3]?T:'"'===l[3]?I:R):o===I||o===R?o=T:o===M||o===N?o=D:(o=T,r=void 0);const d=o===T&&t[e+1].startsWith("/>")?" ":"";n+=o===D?s+k:h>=0?(i.push(a),s.slice(0,h)+S+s.slice(h)+E+d):s+E+(-2===h?e:d)}return[W(t,n+(t[s]||"<?>")+(2===e?"</svg>":3===e?"</math>":"")),i]};class Z{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let r=0,n=0;const o=t.length-1,a=this.parts,[l,h]=J(t,e);if(this.el=Z.createElement(l,s),L.currentNode=this.el.content,2===e||3===e){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes)}for(;null!==(i=L.nextNode())&&a.length<o;){if(1===i.nodeType){if(i.hasAttributes())for(const t of i.getAttributeNames())if(t.endsWith(S)){const e=h[n++],s=i.getAttribute(t).split(E),o=/([.?@])?(.*)/.exec(e);a.push({type:1,index:r,name:o[2],strings:s,ctor:"."===o[1]?X:"?"===o[1]?tt:"@"===o[1]?et:Q}),i.removeAttribute(t)}else t.startsWith(E)&&(a.push({type:6,index:r}),i.removeAttribute(t));if(z.test(i.tagName)){const t=i.textContent.split(E),e=t.length-1;if(e>0){i.textContent=x?x.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],O()),L.nextNode(),a.push({type:2,index:++r});i.append(t[e],O())}}}else if(8===i.nodeType)if(i.data===C)a.push({type:2,index:r});else{let t=-1;for(;-1!==(t=i.data.indexOf(E,t+1));)a.push({type:7,index:r}),t+=E.length-1}r++}}static createElement(t,e){const s=F.createElement("template");return s.innerHTML=t,s}}function K(t,e,s=t,i){if(e===q)return e;let r=void 0!==i?s._$Co?.[i]:s._$Cl;const n=U(e)?void 0:e._$litDirective$;return r?.constructor!==n&&(r?._$AO?.(!1),void 0===n?r=void 0:(r=new n(t),r._$AT(t,s,i)),void 0!==i?(s._$Co??=[])[i]=r:s._$Cl=r),void 0!==r&&(e=K(t,r._$AS(t,e.values),r,i)),e}class Y{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:e},parts:s}=this._$AD,i=(t?.creationScope??F).importNode(e,!0);L.currentNode=i;let r=L.nextNode(),n=0,o=0,a=s[0];for(;void 0!==a;){if(n===a.index){let e;2===a.type?e=new G(r,r.nextSibling,this,t):1===a.type?e=new a.ctor(r,a.name,a.strings,this,t):6===a.type&&(e=new st(r,this,t)),this._$AV.push(e),a=s[++o]}n!==a?.index&&(r=L.nextNode(),n++)}return L.currentNode=F,i}p(t){let e=0;for(const s of this._$AV)void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}}class G{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=B,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t?.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=K(this,t,e),U(t)?t===B||null==t||""===t?(this._$AH!==B&&this._$AR(),this._$AH=B):t!==this._$AH&&t!==q&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):(t=>P(t)||"function"==typeof t?.[Symbol.iterator])(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==B&&U(this._$AH)?this._$AA.nextSibling.data=t:this.T(F.createTextNode(t)),this._$AH=t}$(t){const{values:e,_$litType$:s}=t,i="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=Z.createElement(W(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===i)this._$AH.p(e);else{const t=new Y(i,this),s=t.u(this.options);t.p(e),this.T(s),this._$AH=t}}_$AC(t){let e=V.get(t.strings);return void 0===e&&V.set(t.strings,e=new Z(t)),e}k(t){P(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let s,i=0;for(const r of t)i===e.length?e.push(s=new G(this.O(O()),this.O(O()),this,this.options)):s=e[i],s._$AI(r),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t))}}class Q{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,r){this.type=1,this._$AH=B,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=r,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=B}_$AI(t,e=this,s,i){const r=this.strings;let n=!1;if(void 0===r)t=K(this,t,e,0),n=!U(t)||t!==this._$AH&&t!==q,n&&(this._$AH=t);else{const i=t;let o,a;for(t=r[0],o=0;o<r.length-1;o++)a=K(this,i[s+o],e,o),a===q&&(a=this._$AH[o]),n||=!U(a)||a!==this._$AH[o],a===B?t=B:t!==B&&(t+=(a??"")+r[o+1]),this._$AH[o]=a}n&&!i&&this.j(t)}j(t){t===B?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}}class X extends Q{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===B?void 0:t}}class tt extends Q{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==B)}}class et extends Q{constructor(t,e,s,i,r){super(t,e,s,i,r),this.type=5}_$AI(t,e=this){if((t=K(this,t,e,0)??B)===q)return;const s=this._$AH,i=t===B&&s!==B||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,r=t!==B&&(s===B||i);i&&this.element.removeEventListener(this.name,this,s),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}}class st{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){K(this,t)}}const it=A.litHtmlPolyfillSupport;it?.(Z,G),(A.litHtmlVersions??=[]).push("3.3.1");const rt=globalThis;
|
|
18
18
|
/**
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2017 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
|
-
*/class nt extends
|
|
22
|
+
*/class nt extends _{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,s)=>{const i=s?.renderBefore??e;let r=i._$litPart$;if(void 0===r){const t=s?.renderBefore??null;i._$litPart$=r=new G(e.insertBefore(O(),t),t,void 0,s??{})}return r._$AI(t),r})(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return q}}nt._$litElement$=!0,nt.finalized=!0,rt.litElementHydrateSupport?.({LitElement:nt});const ot=rt.litElementPolyfillSupport;ot?.({LitElement:nt}),(rt.litElementVersions??=[]).push("4.2.1");class at extends Error{}function lt(t){let e=t.replace(/-/g,"+").replace(/_/g,"/");switch(e.length%4){case 0:break;case 2:e+="==";break;case 3:e+="=";break;default:throw new Error("base64 string is not of the correct length")}try{return function(t){return decodeURIComponent(atob(t).replace(/(.)/g,(t,e)=>{let s=e.charCodeAt(0).toString(16).toUpperCase();return s.length<2&&(s="0"+s),"%"+s}))}(e)}catch(t){return atob(e)}}at.prototype.name="InvalidTokenError";class ht extends nt{static properties={fbmsBaseUrl:{type:String,attribute:"fbms-base-url"},fbmsFormFname:{type:String,attribute:"fbms-form-fname"},oidcUrl:{type:String,attribute:"oidc-url"},customStyles:{type:String,attribute:"styles"},schema:{type:Object,state:!0},_formData:{type:Object,state:!0},uiSchema:{type:Object,state:!0},fbmsFormVersion:{type:String,state:!0},loading:{type:Boolean,state:!0},submitting:{type:Boolean,state:!0},error:{type:String,state:!0},token:{type:String,state:!0},decoded:{type:Object,state:!0},submitSuccess:{type:Boolean,state:!0},validationFailed:{type:Boolean,state:!0},initialFormData:{type:Object,state:!0},hasChanges:{type:Boolean,state:!0},submissionStatus:{type:Object,state:!0},formCompleted:{type:Boolean,state:!0},submissionError:{type:String,state:!0}};static styles=n`
|
|
23
23
|
:host {
|
|
24
24
|
display: block;
|
|
25
|
-
font-family:
|
|
25
|
+
font-family:
|
|
26
|
+
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
26
27
|
}
|
|
27
28
|
|
|
28
29
|
.container {
|
|
@@ -55,7 +56,27 @@ const A=globalThis,w=A.trustedTypes,E=w?w.createPolicy("lit-html",{createHTML:t=
|
|
|
55
56
|
.form-group {
|
|
56
57
|
display: flex;
|
|
57
58
|
flex-direction: column;
|
|
58
|
-
gap:
|
|
59
|
+
gap: 4px;
|
|
60
|
+
margin: 14px 0px;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.nested-object {
|
|
64
|
+
margin-left: 20px;
|
|
65
|
+
padding-left: 20px;
|
|
66
|
+
border-left: 2px solid #e0e0e0;
|
|
67
|
+
margin-top: 10px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.nested-object-title {
|
|
71
|
+
font-weight: 600;
|
|
72
|
+
color: #333;
|
|
73
|
+
margin-bottom: 10px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.nested-object-description {
|
|
77
|
+
font-size: 0.875rem;
|
|
78
|
+
color: #666;
|
|
79
|
+
margin-bottom: 15px;
|
|
59
80
|
}
|
|
60
81
|
|
|
61
82
|
label {
|
|
@@ -74,11 +95,11 @@ const A=globalThis,w=A.trustedTypes,E=w?w.createPolicy("lit-html",{createHTML:t=
|
|
|
74
95
|
margin-top: 4px;
|
|
75
96
|
}
|
|
76
97
|
|
|
77
|
-
input[type=
|
|
78
|
-
input[type=
|
|
79
|
-
input[type=
|
|
80
|
-
input[type=
|
|
81
|
-
input[type=
|
|
98
|
+
input[type='text'],
|
|
99
|
+
input[type='email'],
|
|
100
|
+
input[type='number'],
|
|
101
|
+
input[type='date'],
|
|
102
|
+
input[type='tel'],
|
|
82
103
|
textarea,
|
|
83
104
|
select {
|
|
84
105
|
padding: 8px 12px;
|
|
@@ -98,16 +119,40 @@ const A=globalThis,w=A.trustedTypes,E=w?w.createPolicy("lit-html",{createHTML:t=
|
|
|
98
119
|
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
|
|
99
120
|
}
|
|
100
121
|
|
|
122
|
+
select[multiple] {
|
|
123
|
+
min-height: 120px;
|
|
124
|
+
padding: 4px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
select[multiple] option {
|
|
128
|
+
padding: 4px 8px;
|
|
129
|
+
}
|
|
130
|
+
|
|
101
131
|
textarea {
|
|
102
132
|
min-height: 100px;
|
|
103
133
|
resize: vertical;
|
|
104
134
|
}
|
|
105
135
|
|
|
106
|
-
input[type=
|
|
107
|
-
input[type=
|
|
136
|
+
input[type='checkbox'],
|
|
137
|
+
input[type='radio'] {
|
|
108
138
|
margin-right: 8px;
|
|
109
139
|
}
|
|
110
140
|
|
|
141
|
+
fieldset {
|
|
142
|
+
border: none;
|
|
143
|
+
padding: 0;
|
|
144
|
+
margin: 0;
|
|
145
|
+
min-width: 0; /* Fix for some browsers */
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
legend {
|
|
149
|
+
font-weight: 700;
|
|
150
|
+
color: #333;
|
|
151
|
+
padding: 0;
|
|
152
|
+
margin-bottom: 8px;
|
|
153
|
+
font-size: 1rem;
|
|
154
|
+
}
|
|
155
|
+
|
|
111
156
|
.checkbox-group,
|
|
112
157
|
.radio-group {
|
|
113
158
|
display: flex;
|
|
@@ -121,6 +166,18 @@ const A=globalThis,w=A.trustedTypes,E=w?w.createPolicy("lit-html",{createHTML:t=
|
|
|
121
166
|
align-items: center;
|
|
122
167
|
}
|
|
123
168
|
|
|
169
|
+
.checkbox-group.inline,
|
|
170
|
+
.radio-group.inline {
|
|
171
|
+
flex-direction: row;
|
|
172
|
+
flex-wrap: wrap;
|
|
173
|
+
gap: 16px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.checkbox-group.inline .checkbox-item,
|
|
177
|
+
.radio-group.inline .radio-item {
|
|
178
|
+
margin-right: 0;
|
|
179
|
+
}
|
|
180
|
+
|
|
124
181
|
.error-message {
|
|
125
182
|
color: #c00;
|
|
126
183
|
font-size: 0.875rem;
|
|
@@ -143,21 +200,21 @@ const A=globalThis,w=A.trustedTypes,E=w?w.createPolicy("lit-html",{createHTML:t=
|
|
|
143
200
|
transition: background-color 0.2s;
|
|
144
201
|
}
|
|
145
202
|
|
|
146
|
-
button[type=
|
|
203
|
+
button[type='submit'] {
|
|
147
204
|
background-color: #0066cc;
|
|
148
205
|
color: white;
|
|
149
206
|
}
|
|
150
207
|
|
|
151
|
-
button[type=
|
|
208
|
+
button[type='submit']:hover {
|
|
152
209
|
background-color: #0052a3;
|
|
153
210
|
}
|
|
154
211
|
|
|
155
|
-
button[type=
|
|
212
|
+
button[type='button'] {
|
|
156
213
|
background-color: #c0c0c0;
|
|
157
214
|
color: #333;
|
|
158
215
|
}
|
|
159
216
|
|
|
160
|
-
button[type=
|
|
217
|
+
button[type='button']:hover {
|
|
161
218
|
background-color: #e0e0e0;
|
|
162
219
|
}
|
|
163
220
|
|
|
@@ -179,7 +236,9 @@ const A=globalThis,w=A.trustedTypes,E=w?w.createPolicy("lit-html",{createHTML:t=
|
|
|
179
236
|
}
|
|
180
237
|
|
|
181
238
|
@keyframes spin {
|
|
182
|
-
to {
|
|
239
|
+
to {
|
|
240
|
+
transform: rotate(360deg);
|
|
241
|
+
}
|
|
183
242
|
}
|
|
184
243
|
|
|
185
244
|
.button-content {
|
|
@@ -187,23 +246,135 @@ const A=globalThis,w=A.trustedTypes,E=w?w.createPolicy("lit-html",{createHTML:t=
|
|
|
187
246
|
align-items: center;
|
|
188
247
|
justify-content: center;
|
|
189
248
|
}
|
|
190
|
-
`;constructor(){super(),this.loading=!0,this.submitting=!1,this.error=null,this.schema=null,this.formData={},this.uiSchema=null,this.fbmsFormVersion=null,this.token=null,this.decoded={sub:"unknown"},this.fieldErrors={}}async connectedCallback(){super.connectedCallback(),await this.initialize()}async initialize(){try{this.loading=!0,this.error=null,this.oidcUrl&&await this.fetchToken(),await Promise.all([this.fetchSchema(),this.fetchFormData()]),this.loading=!1}catch(t){this.error=t.message||"Failed to initialize form",this.loading=!1}}async fetchToken(){try{const t=await fetch(this.oidcUrl,{credentials:"include"});if(!t.ok)throw new Error("Failed to authenticate");const e=await t.text();this.token=e,this.decoded=function(t,e){if("string"!=typeof t)throw new ct("Invalid token specified");var s=!0===(e=e||{}).header?0:1;try{return JSON.parse(lt(t.split(".")[s]))}catch(t){throw new ct("Invalid token specified: "+t.message)}}(this.token)}catch(t){throw console.error("Token fetch error:",t),new Error("Authentication failed")}}async fetchSchema(){const t=`${this.fbmsBaseUrl}/api/v1/forms/${this.fbmsFormFname}`,e={"content-type":"application/jwt"};this.token&&(e.Authorization=`Bearer ${this.token}`);const s=await fetch(t,{credentials:"same-origin",headers:e});if(!s.ok)throw new Error(`Failed to fetch schema: ${s.statusText}`);const i=await s.json();this.fbmsFormVersion=i.version,this.schema=i.schema||i,this.uiSchema=i.metadata}async fetchFormData(){const t=`${this.fbmsBaseUrl}/api/v1/submissions/${this.fbmsFormFname}?safarifix=${Math.random()}`,e={"content-type":"application/jwt"};this.token&&(e.Authorization=`Bearer ${this.token}`);try{const s=await fetch(t,{credentials:"same-origin",headers:e});if(s.ok){const t=await s.json();this.formData=t.answers}else this.formData={}}catch(t){console.warn("Could not fetch form data:",t),this.formData={}}}handleInputChange(t,e){const{type:s,value:i,checked:r}=e.target;this.formData={...this.formData,[t]:"checkbox"===s?r:i},this.fieldErrors[t]&&(this.fieldErrors={...this.fieldErrors},delete this.fieldErrors[t])}handleArrayChange(t,e,s){const i=[...this.formData[t]||[]];i[e]=s.target.value,this.formData={...this.formData,[t]:i}}validateForm(){const t={},{properties:e={},required:s=[]}=this.schema;return s.forEach(e=>{const s=this.formData[e];null!=s&&""!==s||(t[e]="This field is required")}),Object.entries(e).forEach(([e,s])=>{const i=this.formData[e];if(null!=i&&""!==i){if("email"===s.format){/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(i)||(t[e]="Invalid email address")}if("number"===s.type||"integer"===s.type){const r=Number(i);isNaN(r)?t[e]="Must be a number":(void 0!==s.minimum&&r<s.minimum&&(t[e]=`Must be at least ${s.minimum}`),void 0!==s.maximum&&r>s.maximum&&(t[e]=`Must be at most ${s.maximum}`))}"string"===s.type&&(s.minLength&&i.length<s.minLength&&(t[e]=`Must be at least ${s.minLength} characters`),s.maxLength&&i.length>s.maxLength&&(t[e]=`Must be at most ${s.maxLength} characters`))}}),this.fieldErrors=t,0===Object.keys(t).length}async handleSubmit(t){var e;if(t.preventDefault(),this.validateForm()){if(!this.submitting)try{this.submitting=!0,this.error=null;const t={username:this.decoded.sub,formFname:this.fbmsFormFname,formVersion:this.fbmsFormVersion,timestamp:Date.now(),answers:this.formData};await(e=300,new Promise(t=>setTimeout(t,e)));const s=`${this.fbmsBaseUrl}/api/v1/submissions/${this.fbmsFormFname}`,i={"content-type":"application/json"};this.token&&(i.Authorization=`Bearer ${this.token}`);const r=await fetch(s,{method:"POST",credentials:"same-origin",headers:i,body:JSON.stringify(t)});if(!r.ok)throw new Error(`Failed to submit form: ${r.statusText}`);this.dispatchEvent(new CustomEvent("form-submit-success",{detail:{data:t},bubbles:!0,composed:!0})),this.error=null}catch(t){this.error=t.message||"Failed to submit form",this.dispatchEvent(new CustomEvent("form-submit-error",{detail:{error:t.message},bubbles:!0,composed:!0}))}finally{this.submitting=!1}}else this.requestUpdate()}handleReset(){this.formData={},this.fieldErrors={},this.requestUpdate()}renderField(t,e){const s=this.formData[t],i=this.fieldErrors[t],r=this.schema.required?.includes(t),n=this.uiSchema?.[t]||{};return z`
|
|
191
|
-
<div class="form-group">
|
|
192
|
-
<label class="${r?"required":""}" for="${t}">
|
|
193
|
-
${e.title||t}
|
|
194
|
-
</label>
|
|
195
249
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
250
|
+
.status-message {
|
|
251
|
+
padding: 12px 16px;
|
|
252
|
+
border-radius: 4px;
|
|
253
|
+
margin-bottom: 20px;
|
|
254
|
+
font-weight: 500;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.status-message.success {
|
|
258
|
+
background-color: #d4edda;
|
|
259
|
+
border: 1px solid #c3e6cb;
|
|
260
|
+
color: #155724;
|
|
261
|
+
}
|
|
199
262
|
|
|
200
|
-
|
|
263
|
+
.status-message.validation-error {
|
|
264
|
+
background-color: #fff3cd;
|
|
265
|
+
border: 1px solid #ffeaa7;
|
|
266
|
+
color: #856404;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.status-message.error {
|
|
270
|
+
background-color: #f8d7da;
|
|
271
|
+
border: 1px solid #f5c6cb;
|
|
272
|
+
color: #721c24;
|
|
273
|
+
}
|
|
201
274
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
275
|
+
.status-message ul {
|
|
276
|
+
margin: 8px 0 0 0;
|
|
277
|
+
padding-left: 20px;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
.status-message li {
|
|
281
|
+
margin: 4px 0;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
form.submitting input,
|
|
285
|
+
form.submitting textarea,
|
|
286
|
+
form.submitting select,
|
|
287
|
+
form.submitting button:not([type='submit']) {
|
|
288
|
+
opacity: 0.6;
|
|
289
|
+
pointer-events: none;
|
|
290
|
+
cursor: not-allowed;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.info-only {
|
|
294
|
+
padding: 20px 0;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.info-only p {
|
|
298
|
+
line-height: 1.6;
|
|
299
|
+
color: #333;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.info-label {
|
|
303
|
+
font-weight: 500;
|
|
304
|
+
color: #333;
|
|
305
|
+
display: block;
|
|
306
|
+
}
|
|
307
|
+
`;get formData(){return this._formData}set formData(t){const e=this._formData;this._formData=t,this.requestUpdate("formData",e),this.updateStateFlags()}getCustomErrorMessage(t,e){const s=t.split(".");let i=this.schema;for(const t of s)if(i=i?.properties?.[t],!i)return null;return i?.messages?.[e]??null}constructor(){super(),this.loading=!0,this.submitting=!1,this.error=null,this.schema=null,this._formData={},this.uiSchema=null,this.fbmsFormVersion=null,this.token=null,this.decoded={sub:"unknown"},this.fieldErrors={},this.submitSuccess=!1,this.validationFailed=!1,this.initialFormData={},this.hasChanges=!1,this.submissionStatus=null,this.formCompleted=!1,this.submissionError=null}async connectedCallback(){super.connectedCallback(),await this.initialize()}async initialize(){try{this.loading=!0,this.error=null,this.oidcUrl&&await this.fetchToken(),await Promise.all([this.fetchSchema(),this.fetchFormData()]),this.loading=!1}catch(t){this.error=t.message||"Failed to initialize form",this.loading=!1}}deepClone(t){if(null==t)return t;if("function"==typeof structuredClone)try{return structuredClone(t)}catch(t){console.warn("structuredClone failed, falling back to manual clone:",t)}if(t instanceof Date)return new Date(t.getTime());if(Array.isArray(t))return t.map(t=>this.deepClone(t));if("object"==typeof t){const e={};for(const s in t)Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=this.deepClone(t[s]));return e}return t}deepEqual(t,e){if(t===e)return!0;if(null===t||null===e)return!1;if(void 0===t||void 0===e)return!1;if(t instanceof Date&&e instanceof Date)return t.getTime()===e.getTime();if(t instanceof Date||e instanceof Date)return!1;if(Array.isArray(t)&&Array.isArray(e))return t.length===e.length&&t.every((t,s)=>this.deepEqual(t,e[s]));if("object"==typeof t&&"object"==typeof e){const s=Object.keys(t),i=Object.keys(e);return s.length===i.length&&s.every(s=>this.deepEqual(t[s],e[s]))}return!1}async fetchToken(){try{const t=await fetch(this.oidcUrl,{credentials:"include"});if(!t.ok)throw new Error("Failed to authenticate");const e=await t.text();this.token=e;try{this.decoded=function(t,e){if("string"!=typeof t)throw new at("Invalid token specified: must be a string");e||(e={});const s=!0===e.header?0:1,i=t.split(".")[s];if("string"!=typeof i)throw new at(`Invalid token specified: missing part #${s+1}`);let r;try{r=lt(i)}catch(t){throw new at(`Invalid token specified: invalid base64 for part #${s+1} (${t.message})`)}try{return JSON.parse(r)}catch(t){throw new at(`Invalid token specified: invalid json for part #${s+1} (${t.message})`)}}(this.token)}catch(t){console.warn("Security Token failed to decode -- setting user to unknown"),this.decoded={sub:"unknown"}}}catch(t){throw console.error("Token fetch error:",t),new Error("Authentication failed")}}async fetchSchema(){const t=`${this.fbmsBaseUrl}/api/v1/forms/${this.fbmsFormFname}`,e={"content-type":"application/jwt"};this.token&&(e.Authorization=`Bearer ${this.token}`);const s=await fetch(t,{credentials:"same-origin",headers:e});if(!s.ok)throw new Error(`Failed to fetch schema: ${s.statusText}`);const i=await s.json();this.fbmsFormVersion=i.version,this.schema=i.schema||i,this.uiSchema=i.metadata}async fetchFormData(){const t=`${this.fbmsBaseUrl}/api/v1/submissions/${this.fbmsFormFname}?safarifix=${Math.random()}`,e={"content-type":"application/jwt"};this.token&&(e.Authorization=`Bearer ${this.token}`);try{const s=await fetch(t,{credentials:"same-origin",headers:e});if(s.ok){const t=await s.json();this._formData=t?.answers??{},this.initialFormData=this.deepClone(this._formData)}else this._formData={},this.initialFormData={};this.hasChanges=!1,this.requestUpdate()}catch(t){console.warn("Could not fetch form data:",t),this._formData={},this.initialFormData={},this.hasChanges=!1,this.requestUpdate()}}updateStateFlags(){this.submitSuccess=!1,this.validationFailed=!1,this.submissionError=null,this.hasChanges=!this.deepEqual(this.formData,this.initialFormData)}getNestedValue(t){if(!t||"string"!=typeof t)return;const e=t.split(".").filter(t=>t.length>0);if(0===e.length)return;let s=this.formData;for(const t of e)s=s?.[t];return s}sanitizeId(t){"string"!=typeof t&&(t=String(t??""));let e=t.replace(/[^a-zA-Z0-9-_.]/g,"-").replace(/-+/g,"-");return e=e.replace(/^-+/,"").replace(/-+$/,""),e||(e="id"),/^[A-Za-z]/.test(e)||(e="id-"+e),e}setNestedValue(t,e){if(!t||"string"!=typeof t)return;const s=t.split(".").filter(t=>t.length>0);if(0===s.length)return;const i={...this.formData};let r=i;for(let t=0;t<s.length-1;t++){const e=s[t],i=r[e];Array.isArray(i)?r[e]=[...i]:r[e]=i&&"object"==typeof i?{...i}:{},r=r[e]}r[s[s.length-1]]=e,this.formData=i}getSchemaAtPath(t){if(!t)return this.schema;const e=t.split(".").filter(t=>t.length>0);if(0===e.length)return this.schema;let s=this.schema;for(const t of e)if(s=s.properties?.[t],!s)return null;return s}handleInputChange(t,e){const{type:s,value:i,checked:r}=e.target;this.setNestedValue(t,"checkbox"===s?r:i),this.fieldErrors[t]&&(this.fieldErrors={...this.fieldErrors},delete this.fieldErrors[t]),this.updateStateFlags()}handleArrayChange(t,e,s){const i=[...this.getNestedValue(t)||[]];i[e]=s.target.value,this.setNestedValue(t,i),this.updateStateFlags()}handleMultiSelectChange(t,e){const s=Array.from(e.target.selectedOptions).map(t=>t.value);this.setNestedValue(t,s),this.fieldErrors[t]&&(this.fieldErrors={...this.fieldErrors},delete this.fieldErrors[t]),this.updateStateFlags()}handleCheckboxArrayChange(t,e,s){const{checked:i}=s.target,r=this.getNestedValue(t)||[];let n;n=i?r.includes(e)?r:[...r,e]:r.filter(t=>t!==e),this.setNestedValue(t,n),this.fieldErrors[t]&&(this.fieldErrors={...this.fieldErrors},delete this.fieldErrors[t]),this.updateStateFlags()}validateFormFields(t,e=[],s="",i=0){if(i>10)return console.warn(`Schema nesting exceeds maximum depth of 10 at path: ${s}`),{};const r={};return e.forEach(t=>{const e=s?`${s}.${t}`:t,i=this.getNestedValue(e);if(null==i||""===i){const t=this.getCustomErrorMessage(e,"required");r[e]=t||"This field is required"}}),Object.entries(t).forEach(([t,e])=>{const n=s?`${s}.${t}`:t,o=this.getNestedValue(n);if("object"===e.type&&e.properties){const t=this.validateFormFields(e.properties,e.required||[],n,i+1);return void Object.assign(r,t)}if(null!=o&&""!==o){if("email"===e.format){if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(o)){const t=this.getCustomErrorMessage(n,"format")||this.getCustomErrorMessage(n,"email");r[n]=t||"Invalid email address"}}if(e.pattern){if(!new RegExp(e.pattern).test(o)){const t=this.getCustomErrorMessage(n,"pattern");r[n]=t||"Invalid format"}}if("number"===e.type||"integer"===e.type){const t=Number(o);if(isNaN(t)){const t=this.getCustomErrorMessage(n,"type");r[n]=t||"Must be a number"}else{if(void 0!==e.minimum&&t<e.minimum){const t=this.getCustomErrorMessage(n,"minimum");r[n]=t||`Must be at least ${e.minimum}`}if(void 0!==e.maximum&&t>e.maximum){const t=this.getCustomErrorMessage(n,"maximum");r[n]=t||`Must be at most ${e.maximum}`}}}if("string"===e.type){if(e.minLength&&o.length<e.minLength){const t=this.getCustomErrorMessage(n,"minLength");r[n]=t||`Must be at least ${e.minLength} characters`}if(e.maxLength&&o.length>e.maxLength){const t=this.getCustomErrorMessage(n,"maxLength");r[n]=t||`Must be at most ${e.maxLength} characters`}}}}),r}validateForm(){const{properties:t={},required:e=[]}=this.schema;return this.fieldErrors=this.validateFormFields(t,e),0===Object.keys(this.fieldErrors).length}async handleSubmit(t){if(t.preventDefault(),this.submitSuccess=!1,this.validationFailed=!1,!this.validateForm()){this.validationFailed=!0,await this.updateComplete;const t=this.shadowRoot.querySelector(".status-message.validation-error");return void(t&&t.scrollIntoView({behavior:"smooth",block:"start"}))}this.submitting||await this.submitWithRetry(!1)}async submitWithRetry(t=!1){try{t||(this.submitting=!0),this.submissionError=null,this.submissionStatus=null;const e={username:this.decoded.sub,formFname:this.fbmsFormFname,formVersion:this.fbmsFormVersion,timestamp:Date.now(),answers:this.formData},s=`${this.fbmsBaseUrl}/api/v1/submissions/${this.fbmsFormFname}`,i={"content-type":"application/json"};this.token&&(i.Authorization=`Bearer ${this.token}`);const r=await fetch(s,{method:"POST",credentials:"same-origin",headers:i,body:JSON.stringify(e)});let n=null;try{n=await r.json(),this.submissionStatus=n}catch(t){console.warn("Could not parse response as JSON:",t)}if(403===r.status&&!t)if(console.warn("Received 403, attempting to refresh token and retry..."),this.oidcUrl)try{return await this.fetchToken(),console.warn("Token refreshed successfully, retrying submission..."),await this.submitWithRetry(!0)}catch(t){throw console.error("Failed to refresh token:",t),new Error("Authentication failed: Unable to refresh token")}else console.warn("OIDC URL is not configured; cannot refresh token. Skipping retry.");if(!r.ok){if(403===r.status&&t)throw new Error("Authorization failed: Access denied even after token refresh. You may not have permission to submit this form.");const e=n?.messageHeader||n?.message||`Failed to submit form: ${r.statusText}`;throw new Error(e)}const o=r.headers?.get?r.headers.get("x-fbms-formforward"):null;if(o){console.info(`Form submitted successfully. Forwarding to next form: ${o}`),this.fbmsFormFname=o,this.submitSuccess=!0,this.formCompleted=!1,this.loading=!0;try{return void await this.initialize()}catch(t){console.error("Failed to load forwarded form:",t),this.loading=!1,this.submissionError=t?.message||"Form was submitted, but loading the next form failed."}}this.dispatchEvent(new CustomEvent("form-submit-success",{detail:{data:e},bubbles:!0,composed:!0})),this.formCompleted=!0,this.submitSuccess=!0,this.submissionError=null,this.initialFormData=this.deepClone(this.formData),this.hasChanges=!1,await this.updateComplete;const a=this.shadowRoot.querySelector(".status-message.success");a&&a.scrollIntoView({behavior:"smooth",block:"start"})}catch(t){this.submissionError=t.message||"Failed to submit form",this.dispatchEvent(new CustomEvent("form-submit-error",{detail:{error:t.message},bubbles:!0,composed:!0})),await this.updateComplete;const e=this.shadowRoot.querySelector(".status-message.error");e&&e.scrollIntoView({behavior:"smooth",block:"start"})}finally{this.submitting=!1}}handleReset(){this.formData={},this.fieldErrors={},this.requestUpdate()}renderField(t,e,s="",i=0){if(i>10)return console.warn("Schema nesting exceeds maximum depth of 10"),H`<div class="error">Schema too deeply nested</div>`;const r=s?`${s}.${t}`:t;if("object"===e.type&&e.properties)return this.renderNestedObject(t,e,s,i);if(e.enum&&1===e.enum.length)return H`
|
|
308
|
+
<div class="form-group">
|
|
309
|
+
<span class="info-label">${e.title||t}</span>
|
|
310
|
+
${e.description?H`<span class="description">${e.description}</span>`:""}
|
|
311
|
+
</div>
|
|
312
|
+
`;const n=this.getNestedValue(r),o=this.fieldErrors[r],a=s?this.getSchemaAtPath(s):this.schema,l=a?.required?.includes(t)??!1,h=r.split(".");let c=this.uiSchema;for(const t of h)c=c?.[t];c=c||{};const d=c["ui:widget"],u="radio"===d||"checkboxes"===d;return H`
|
|
313
|
+
<div class="form-group">
|
|
314
|
+
${u?"":H`
|
|
315
|
+
<label class="${l?"required":""}" for="${r}">
|
|
316
|
+
${e.title||t}
|
|
317
|
+
</label>
|
|
318
|
+
`}
|
|
319
|
+
${e.description&&!u?H` <span class="description">${e.description}</span> `:""}
|
|
320
|
+
${this.renderInput(r,e,n,c)}
|
|
321
|
+
${o?H` <span class="error-message">${o}</span> `:""}
|
|
205
322
|
</div>
|
|
206
|
-
`}
|
|
323
|
+
`}renderNestedObject(t,e,s="",i=0){const r=s?`${s}.${t}`:t;return H`
|
|
324
|
+
<div class="nested-object">
|
|
325
|
+
${e.title?H`<div class="nested-object-title">${e.title}</div>`:""}
|
|
326
|
+
${e.description?H`<div class="nested-object-description">${e.description}</div>`:""}
|
|
327
|
+
${Object.entries(e.properties).map(([t,e])=>this.renderField(t,e,r,i+1))}
|
|
328
|
+
</div>
|
|
329
|
+
`}renderInput(t,e,s,i){const{type:r,enum:n,format:o,items:a}=e,l=i["ui:widget"],h=i["ui:options"]?.inline;if(n&&1===n.length)return H``;if("array"===r&&a?.enum&&"checkboxes"===l){const i=Array.isArray(s)?s:[],r=h?"checkbox-group inline":"checkbox-group",n=t.split("."),o=n[n.length-1],l=n.slice(0,-1).join("."),c=l?this.getSchemaAtPath(l):this.schema,d=c?.required?.includes(o)??!1;return H`
|
|
330
|
+
<fieldset class="${r}">
|
|
331
|
+
<legend class="${d?"required":""}">${e.title||o}</legend>
|
|
332
|
+
${e.description?H`<span class="description">${e.description}</span>`:""}
|
|
333
|
+
${a.enum.map(e=>{const s=this.sanitizeId(`${t}-${e}`);return H`
|
|
334
|
+
<div class="checkbox-item">
|
|
335
|
+
<input
|
|
336
|
+
type="checkbox"
|
|
337
|
+
id="${s}"
|
|
338
|
+
name="${t}"
|
|
339
|
+
value="${e}"
|
|
340
|
+
.checked="${i.includes(e)}"
|
|
341
|
+
@change="${s=>this.handleCheckboxArrayChange(t,e,s)}"
|
|
342
|
+
/>
|
|
343
|
+
<label for="${s}">${e}</label>
|
|
344
|
+
</div>
|
|
345
|
+
`})}
|
|
346
|
+
</fieldset>
|
|
347
|
+
`}if("array"===r&&a?.enum){const e=Array.isArray(s)?s:[];return H`
|
|
348
|
+
<select
|
|
349
|
+
id="${t}"
|
|
350
|
+
name="${t}"
|
|
351
|
+
multiple
|
|
352
|
+
size="5"
|
|
353
|
+
@change="${e=>this.handleMultiSelectChange(t,e)}"
|
|
354
|
+
>
|
|
355
|
+
${a.enum.map(t=>H`
|
|
356
|
+
<option value="${t}" ?selected="${e.includes(t)}">${t}</option>
|
|
357
|
+
`)}
|
|
358
|
+
</select>
|
|
359
|
+
`}if(n&&"radio"===l){const i=h?"radio-group inline":"radio-group",r=t.split("."),o=r[r.length-1],a=r.slice(0,-1).join("."),l=a?this.getSchemaAtPath(a):this.schema,c=l?.required?.includes(o)??!1;return H`
|
|
360
|
+
<fieldset class="${i}">
|
|
361
|
+
<legend class="${c?"required":""}">${e.title||o}</legend>
|
|
362
|
+
${e.description?H`<span class="description">${e.description}</span>`:""}
|
|
363
|
+
${n.map(e=>{const i=this.sanitizeId(`${t}-${e}`);return H`
|
|
364
|
+
<div class="radio-item">
|
|
365
|
+
<input
|
|
366
|
+
type="radio"
|
|
367
|
+
id="${i}"
|
|
368
|
+
name="${t}"
|
|
369
|
+
value="${e}"
|
|
370
|
+
.checked="${s===e}"
|
|
371
|
+
@change="${e=>this.handleInputChange(t,e)}"
|
|
372
|
+
/>
|
|
373
|
+
<label for="${i}">${e}</label>
|
|
374
|
+
</div>
|
|
375
|
+
`})}
|
|
376
|
+
</fieldset>
|
|
377
|
+
`}return n?H`
|
|
207
378
|
<select
|
|
208
379
|
id="${t}"
|
|
209
380
|
name="${t}"
|
|
@@ -211,13 +382,9 @@ const A=globalThis,w=A.trustedTypes,E=w?w.createPolicy("lit-html",{createHTML:t=
|
|
|
211
382
|
@change="${e=>this.handleInputChange(t,e)}"
|
|
212
383
|
>
|
|
213
384
|
<option value="">-- Select --</option>
|
|
214
|
-
${n.map(t=>
|
|
215
|
-
<option value="${t}" ?selected="${s===t}">
|
|
216
|
-
${t}
|
|
217
|
-
</option>
|
|
218
|
-
`)}
|
|
385
|
+
${n.map(t=>H` <option value="${t}" ?selected="${s===t}">${t}</option> `)}
|
|
219
386
|
</select>
|
|
220
|
-
`:"boolean"===r?
|
|
387
|
+
`:"boolean"===r?H`
|
|
221
388
|
<div class="checkbox-item">
|
|
222
389
|
<input
|
|
223
390
|
type="checkbox"
|
|
@@ -226,9 +393,9 @@ const A=globalThis,w=A.trustedTypes,E=w?w.createPolicy("lit-html",{createHTML:t=
|
|
|
226
393
|
.checked="${!!s}"
|
|
227
394
|
@change="${e=>this.handleInputChange(t,e)}"
|
|
228
395
|
/>
|
|
229
|
-
<label for="${t}">${e.title||t}</label>
|
|
396
|
+
<label for="${t}">${e.title||t.split(".").pop()}</label>
|
|
230
397
|
</div>
|
|
231
|
-
`:"string"===r?"email"===o?
|
|
398
|
+
`:"string"===r?"email"===o?H`
|
|
232
399
|
<input
|
|
233
400
|
type="email"
|
|
234
401
|
id="${t}"
|
|
@@ -236,7 +403,7 @@ const A=globalThis,w=A.trustedTypes,E=w?w.createPolicy("lit-html",{createHTML:t=
|
|
|
236
403
|
.value="${s||""}"
|
|
237
404
|
@input="${e=>this.handleInputChange(t,e)}"
|
|
238
405
|
/>
|
|
239
|
-
`:"date"===o?
|
|
406
|
+
`:"date"===o?H`
|
|
240
407
|
<input
|
|
241
408
|
type="date"
|
|
242
409
|
id="${t}"
|
|
@@ -244,14 +411,14 @@ const A=globalThis,w=A.trustedTypes,E=w?w.createPolicy("lit-html",{createHTML:t=
|
|
|
244
411
|
.value="${s||""}"
|
|
245
412
|
@input="${e=>this.handleInputChange(t,e)}"
|
|
246
413
|
/>
|
|
247
|
-
`:"textarea"===i["ui:widget"]?
|
|
414
|
+
`:"textarea"===i["ui:widget"]?H`
|
|
248
415
|
<textarea
|
|
249
416
|
id="${t}"
|
|
250
417
|
name="${t}"
|
|
251
418
|
.value="${s||""}"
|
|
252
419
|
@input="${e=>this.handleInputChange(t,e)}"
|
|
253
420
|
></textarea>
|
|
254
|
-
`:
|
|
421
|
+
`:H`
|
|
255
422
|
<input
|
|
256
423
|
type="text"
|
|
257
424
|
id="${t}"
|
|
@@ -259,7 +426,7 @@ const A=globalThis,w=A.trustedTypes,E=w?w.createPolicy("lit-html",{createHTML:t=
|
|
|
259
426
|
.value="${s||""}"
|
|
260
427
|
@input="${e=>this.handleInputChange(t,e)}"
|
|
261
428
|
/>
|
|
262
|
-
`:"number"===r||"integer"===r?
|
|
429
|
+
`:"number"===r||"integer"===r?H`
|
|
263
430
|
<input
|
|
264
431
|
type="number"
|
|
265
432
|
id="${t}"
|
|
@@ -268,7 +435,7 @@ const A=globalThis,w=A.trustedTypes,E=w?w.createPolicy("lit-html",{createHTML:t=
|
|
|
268
435
|
step="${"integer"===r?"1":"any"}"
|
|
269
436
|
@input="${e=>this.handleInputChange(t,e)}"
|
|
270
437
|
/>
|
|
271
|
-
`:
|
|
438
|
+
`:H`
|
|
272
439
|
<input
|
|
273
440
|
type="text"
|
|
274
441
|
id="${t}"
|
|
@@ -276,42 +443,88 @@ const A=globalThis,w=A.trustedTypes,E=w?w.createPolicy("lit-html",{createHTML:t=
|
|
|
276
443
|
.value="${s||""}"
|
|
277
444
|
@input="${e=>this.handleInputChange(t,e)}"
|
|
278
445
|
/>
|
|
279
|
-
`}render(){return
|
|
446
|
+
`}render(){if(this.error)return H`
|
|
447
|
+
<div class="container">
|
|
448
|
+
<div class="error"><strong>Error:</strong> ${this.error}</div>
|
|
449
|
+
</div>
|
|
450
|
+
`;if(this.loading)return H`
|
|
280
451
|
<div class="container">
|
|
281
452
|
<div class="loading">Loading form...</div>
|
|
282
453
|
</div>
|
|
283
|
-
|
|
454
|
+
`;if(!this.schema||!this.schema.properties)return H`
|
|
284
455
|
<div class="container">
|
|
285
|
-
<div class="error">
|
|
286
|
-
|
|
456
|
+
<div class="error">Invalid form schema</div>
|
|
457
|
+
</div>
|
|
458
|
+
`;if(this.formCompleted)return H`
|
|
459
|
+
${this.customStyles?H`<style>
|
|
460
|
+
${this.customStyles}
|
|
461
|
+
</style>`:""}
|
|
462
|
+
|
|
463
|
+
<div class="container">
|
|
464
|
+
<div class="status-message success">
|
|
465
|
+
<h2>✓ Form submitted successfully!</h2>
|
|
466
|
+
${this.submissionStatus?.messages?.length>0?H`
|
|
467
|
+
<ul>
|
|
468
|
+
${this.submissionStatus.messages.map(t=>H`<li>${t}</li>`)}
|
|
469
|
+
</ul>
|
|
470
|
+
`:""}
|
|
287
471
|
</div>
|
|
288
472
|
</div>
|
|
289
|
-
|
|
290
|
-
${this.customStyles?
|
|
473
|
+
`;const t=Object.keys(this.schema.properties).length>0;return H`
|
|
474
|
+
${this.customStyles?H`<style>
|
|
475
|
+
${this.customStyles}
|
|
476
|
+
</style>`:""}
|
|
291
477
|
|
|
292
478
|
<div class="container">
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
479
|
+
${this.submitSuccess?H`
|
|
480
|
+
<div class="status-message success">
|
|
481
|
+
✓ Your form was successfully submitted.
|
|
482
|
+
${this.submissionStatus?.messages?.length>0?H`
|
|
483
|
+
<ul>
|
|
484
|
+
${this.submissionStatus.messages.map(t=>H`<li>${t}</li>`)}
|
|
485
|
+
</ul>
|
|
486
|
+
`:""}
|
|
487
|
+
</div>
|
|
488
|
+
`:""}
|
|
489
|
+
${t?H`
|
|
490
|
+
<form @submit="${this.handleSubmit}" class="${this.submitting?"submitting":""}">
|
|
491
|
+
${this.schema.title?H`<h2>${this.schema.title}</h2>`:""}
|
|
492
|
+
${this.schema.description?H`<p>${this.schema.description}</p>`:""}
|
|
493
|
+
${this.validationFailed?H`
|
|
494
|
+
<div class="status-message validation-error">
|
|
495
|
+
⚠ Please correct the errors below before submitting.
|
|
496
|
+
</div>
|
|
497
|
+
`:""}
|
|
498
|
+
${this.submissionError?H`
|
|
499
|
+
<div class="status-message error">
|
|
500
|
+
<strong>Error:</strong> ${this.submissionError}
|
|
501
|
+
${this.submissionStatus?.messages?.length>0?H`
|
|
502
|
+
<ul>
|
|
503
|
+
${this.submissionStatus.messages.map(t=>H`<li>${t}</li>`)}
|
|
504
|
+
</ul>
|
|
505
|
+
`:""}
|
|
506
|
+
</div>
|
|
507
|
+
`:""}
|
|
508
|
+
${Object.entries(this.schema.properties).map(([t,e])=>this.renderField(t,e))}
|
|
509
|
+
|
|
510
|
+
<div class="buttons">
|
|
511
|
+
<button type="submit" ?disabled="${this.submitting}">
|
|
512
|
+
<span class="button-content">
|
|
513
|
+
${this.submitting?H`<span class="spinner"></span>`:""}
|
|
514
|
+
${this.submitting?"Submitting...":"Submit"}
|
|
515
|
+
</span>
|
|
516
|
+
</button>
|
|
517
|
+
<button type="button" @click="${this.handleReset}" ?disabled="${this.submitting}">
|
|
518
|
+
Reset
|
|
519
|
+
</button>
|
|
520
|
+
</div>
|
|
521
|
+
</form>
|
|
522
|
+
`:H`
|
|
523
|
+
<div class="info-only">
|
|
524
|
+
${this.schema.title?H`<h2>${this.schema.title}</h2>`:""}
|
|
525
|
+
${this.schema.description?H`<p>${this.schema.description}</p>`:""}
|
|
526
|
+
</div>
|
|
527
|
+
`}
|
|
311
528
|
</div>
|
|
312
|
-
|
|
313
|
-
<div class="container">
|
|
314
|
-
<div class="error">Invalid form schema</div>
|
|
315
|
-
</div>
|
|
316
|
-
`}}customElements.define("form-builder",dt);
|
|
529
|
+
`}}customElements.define("form-builder",ht);
|
|
317
530
|
//# sourceMappingURL=form-builder.min.js.map
|