v3.23.0

CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## v3.23.0
+- Add ability to reference inputs.NAME in valid-if attributes. [#65](https://github.com/Tangerine-Community/tangy-form/pull/65)
+
 ## v3.22.1
 - Fix resuming a `<tangy-parial-date>` and use of boolean attributes. [#62](https://github.com/Tangerine-Community/tangy-form/pull/62)
 

dist/bundle.js

@@ -3936,7 +3936,7 @@ Object(n.a)({is:"paper-input",_template:r.a`
           </template>
         </div>
       </paper-card>
-    `}static get properties(){return{id:{type:String,value:"tangy-form-item",reflectToAttribute:!0},title:{type:String,value:"",reflectToAttribute:!0},summary:{type:Boolean,value:!1,reflectToAttribute:!0},fullscreen:{type:Boolean,value:!1,reflectToAttribute:!0},hideButtons:{type:Boolean,value:!1,reflectToAttribute:!0},hideBackButton:{type:Boolean,value:!1,reflectToAttribute:!0},rightToLeft:{type:Boolean,value:!1,reflectToAttribute:!0},hideNextButton:{type:Boolean,value:!1,reflectToAttribute:!0},showCompleteButton:{type:Boolean,value:!1,reflectToAttribute:!0},inputs:{type:Array,observer:"reflect",value:[]},open:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"onOpenChange"},incomplete:{type:Boolean,value:!0,reflectToAttribute:!0},disabled:{type:Boolean,value:!1,reflectToAttribute:!0},hidden:{type:Boolean,value:!1,reflectToAttribute:!0},locked:{type:Boolean,value:!1,reflectToAttribute:!0},isDirty:{type:Boolean,value:!1,reflectToAttribute:!0},incorrectThreshold:{type:Number,value:void 0,reflectToAttribute:!0}}}reflect(){this.inputs.filter(e=>"TANGY-INPUT-GROUPS"===e.tagName).forEach(e=>{let t=this.shadowRoot.querySelector(`[name="${e.name}"]`);t&&(t.setProps(e),t.value=e.value)}),this.inputs.filter(e=>"TANGY-INPUT-GROUPS"!==e.tagName).forEach(e=>{let t=this.shadowRoot.querySelector(`[name="${e.name}"]`);t&&t.setProps(e)})}fireHook(e,t){if(this.locked)return;this.eval(this.getAttribute(e),e);let i={visible:{truthy:e=>this.eval(`inputShow("${e}")`,"show-if",e),falsey:e=>this.eval(`inputHide("${e}")`,"show-if",e)},editable:{truthy:e=>this.eval(`inputEnable("${e}")`,"disable-if",e),falsey:e=>this.eval(`inputDisable("${e}")`,"disable-if",e)}};this.shadowRoot.querySelectorAll("[name]").forEach(e=>{e.hasAttribute("show-if")&&(this.eval(e.getAttribute("show-if"),"show-if",e.getAttribute("name"))?i.visible.truthy(e.name):i.visible.falsey(e.name)),e.hasAttribute("tangy-if")&&e.hasAttribute("tangy-action")?this.eval(e.getAttribute("tangy-if"),"tangy-if",e.getAttribute("name"))?i[e.getAttribute("tangy-action")].truthy(e.name):i[e.getAttribute("tangy-action")].falsey(e.name):e.hasAttribute("tangy-if")&&!e.hasAttribute("tangy-action")&&(this.eval(e.getAttribute("tangy-if"),"tangy-if",e.getAttribute("name"))?i.visible.truthy(e.name):i.visible.falsey(e.name))}),this.shadowRoot.querySelectorAll("tangy-template").forEach(e=>{e.shadowRoot&&(e.$.container.innerHTML=this.eval("`"+e.template+"`","tangy-template",e.getAttribute("name")))})}eval(code,hook,context=""){let state=this.store.getState(),inputsArray=[];state.items.forEach(e=>inputsArray=[...inputsArray,...e.inputs]),this.shadowRoot.querySelectorAll("[name]").forEach(e=>inputsArray.push(e));let inputsKeyedByName={};inputsArray.forEach(e=>inputsKeyedByName[e.name]=e);let inputs=inputsKeyedByName,elementsById={};this.shadowRoot.querySelectorAll("[id]").forEach(e=>elementsById[e.id]=e);let items={};state.items.forEach(e=>items[e.name]=e);let inputEls=this.shadowRoot.querySelectorAll("[name]"),tangyFormStore=this.store,{getValue:getValue,inputHide:inputHide,inputShow:inputShow,inputDisable:inputDisable,inputEnable:inputEnable,itemHide:itemHide,itemShow:itemShow,itemDisable:itemDisable,itemEnable:itemEnable,isChecked:isChecked,notChecked:notChecked,itemsPerMinute:itemsPerMinute,numberOfItemsAttempted:numberOfItemsAttempted,numberOfCorrectItems:numberOfCorrectItems,numberOfIncorrectItems:numberOfIncorrectItems,gridAutoStopped:gridAutoStopped,hideInputsUponThreshhold:hideInputsUponThreshhold}=this.exposeHelperFunctions();try{const result=eval(code);return result}catch(e){const t=`${Object(_util_t_js__WEBPACK_IMPORTED_MODULE_1__.a)("Error detected in the section logic:")} ${context} :: ${hook} :: <br> <pre> ${code} </pre>`;return console.log(t),console.log(e),this.dispatchEvent(new CustomEvent("logic-error",{detail:t})),!1}}exposeHelperFunctions(){let e=new _tangy_form_item_callback_helpers_js__WEBPACK_IMPORTED_MODULE_5__.a(this);return{getValue:t=>e.getValue(t),inputHide:t=>e.inputHide(t),inputShow:t=>e.inputShow(t),inputDisable:t=>e.inputDisable(t),inputEnable:t=>e.inputEnable(t),itemHide:t=>e.inputHide(t),itemShow:t=>e.inputShow(t),itemDisable:t=>e.inputDisable(t),itemEnable:t=>e.inputEnable(t),isChecked:t=>e.isChecked(t),notChecked:t=>e.notChecked(t),itemsPerMinute:t=>e.itemsPerMinute(t),numberOfItemsAttempted:t=>e.numberOfItemsAttempted(t),numberOfCorrectItems:t=>e.numberOfCorrectItems(t),numberOfIncorrectItems:t=>e.numberOfIncorrectItems(t),gridAutoStopped:t=>e.gridAutoStopped(t),hideInputsUponThreshhold:t=>e.hideInputsUponThreshhold(t)}}onOpenButtonPress(){this.open=!0,this.dispatchEvent(new CustomEvent("ITEM_OPENED"))}onCloseButtonPress(){this.locked?(this.open=!1,this.dispatchEvent(new CustomEvent("ITEM_CLOSED"))):this.validate()&&(this.submit(),this.open=!1,this.dispatchEvent(new CustomEvent("ITEM_CLOSED")))}onOpenChange(e){!1===e&&(this.$.content.innerHTML=""),!0===e&&""===this.$.content.innerHTML&&this.openWithContent(this.template)}openWithContent(e){this.$.content.innerHTML=e,this.$.content.querySelectorAll("[name]").forEach(e=>{e.addEventListener("next",()=>this.next()),e.addEventListener("change",e=>{this.dispatchEvent(new Event("change",{details:e.target})),this.fireHook("on-change",e)})});let t=this.$.content.querySelector("tangy-complete-button");t&&(this.showCompleteButton=!1,t.addEventListener("click",this.clickedComplete.bind(this)));let i=this.shadowRoot.querySelector("tangy-consent");i&&(this.showCompleteButton=!1,i.addEventListener("TANGY_INPUT_CONSENT_NO",this.clickedNoConsent.bind(this))),this.reflect(),!0===this.open&&(this.fireHook("on-open"),this.fireHook("on-change")),this.dispatchEvent(new CustomEvent("TANGY_FORM_ITEM_OPENED"))}onDisabledChange(e,t){!0===e&&!1===t&&this.dispatch({type:ITEM_DISABLED,itemId:this.id})}submit(){let e=[];return this.shadowRoot.querySelectorAll("[name]").forEach(t=>e.push(t.getProps())),this.inputs=e,window.devtools&&window.devtools.open&&console.table(this.inputs.map(e=>({name:e.name,value:e.value}))),!0}validate(){let inputEls=[...this.shadowRoot.querySelector("#content").children].filter(e=>e.hasAttribute("name")),invalidInputNames=[],validInputNames=[];for(let input of inputEls)if(input.hidden)input.invalid=!1,validInputNames.push(input.name);else{let{getValue:getValue,inputHide:inputHide,inputShow:inputShow,inputDisable:inputDisable,inputEnable:inputEnable,itemHide:itemHide,itemShow:itemShow,itemDisable:itemDisable,itemEnable:itemEnable,isChecked:isChecked,notChecked:notChecked,itemsPerMinute:itemsPerMinute,numberOfItemsAttempted:numberOfItemsAttempted,numberOfCorrectItems:numberOfCorrectItems,numberOfIncorrectItems:numberOfIncorrectItems,gridAutoStopped:gridAutoStopped,hideInputsUponThreshhold:hideInputsUponThreshhold}=this.exposeHelperFunctions();input.validate&&!input.validate()||input.hasAttribute("valid-if")&&!eval(input.getAttribute("valid-if"))?(input.invalid=!0,invalidInputNames.push(input.name)):(input.invalid=!1,validInputNames.push(input.name))}return 0!==invalidInputNames.length?(this.shadowRoot.querySelector(`[name="${invalidInputNames[0]}"]`).scrollIntoView({behavior:"smooth",block:"start"}),this.incomplete=!0,this.fireHook("on-change"),!1):(this.incomplete=!1,this.fireHook("on-change"),!0)}next(){this.validate()&&(this.submit(),this.dispatchEvent(new CustomEvent("ITEM_NEXT")))}back(){this.submit(),this.dispatchEvent(new CustomEvent("ITEM_BACK"))}clickedComplete(){this.validate()&&(this.submit(),this.dispatchEvent(new CustomEvent("FORM_RESPONSE_COMPLETE",{bubbles:!0})))}clickedNoConsent(){this.validate()&&(this.submit(),this.dispatchEvent(new CustomEvent("FORM_RESPONSE_NO_CONSENT",{bubbles:!0})))}}window.customElements.define(TangyFormItem.is,TangyFormItem)},function(e,t,i){"use strict";var n=i(0);i(11),i(13),i(9);class r extends n.a{static get template(){return n.b`
+    `}static get properties(){return{id:{type:String,value:"tangy-form-item",reflectToAttribute:!0},title:{type:String,value:"",reflectToAttribute:!0},summary:{type:Boolean,value:!1,reflectToAttribute:!0},fullscreen:{type:Boolean,value:!1,reflectToAttribute:!0},hideButtons:{type:Boolean,value:!1,reflectToAttribute:!0},hideBackButton:{type:Boolean,value:!1,reflectToAttribute:!0},rightToLeft:{type:Boolean,value:!1,reflectToAttribute:!0},hideNextButton:{type:Boolean,value:!1,reflectToAttribute:!0},showCompleteButton:{type:Boolean,value:!1,reflectToAttribute:!0},inputs:{type:Array,observer:"reflect",value:[]},open:{type:Boolean,value:!1,reflectToAttribute:!0,observer:"onOpenChange"},incomplete:{type:Boolean,value:!0,reflectToAttribute:!0},disabled:{type:Boolean,value:!1,reflectToAttribute:!0},hidden:{type:Boolean,value:!1,reflectToAttribute:!0},locked:{type:Boolean,value:!1,reflectToAttribute:!0},isDirty:{type:Boolean,value:!1,reflectToAttribute:!0},incorrectThreshold:{type:Number,value:void 0,reflectToAttribute:!0}}}reflect(){this.inputs.filter(e=>"TANGY-INPUT-GROUPS"===e.tagName).forEach(e=>{let t=this.shadowRoot.querySelector(`[name="${e.name}"]`);t&&(t.setProps(e),t.value=e.value)}),this.inputs.filter(e=>"TANGY-INPUT-GROUPS"!==e.tagName).forEach(e=>{let t=this.shadowRoot.querySelector(`[name="${e.name}"]`);t&&t.setProps(e)})}fireHook(e,t){if(this.locked)return;this.eval(this.getAttribute(e),e);let i={visible:{truthy:e=>this.eval(`inputShow("${e}")`,"show-if",e),falsey:e=>this.eval(`inputHide("${e}")`,"show-if",e)},editable:{truthy:e=>this.eval(`inputEnable("${e}")`,"disable-if",e),falsey:e=>this.eval(`inputDisable("${e}")`,"disable-if",e)}};this.shadowRoot.querySelectorAll("[name]").forEach(e=>{e.hasAttribute("show-if")&&(this.eval(e.getAttribute("show-if"),"show-if",e.getAttribute("name"))?i.visible.truthy(e.name):i.visible.falsey(e.name)),e.hasAttribute("tangy-if")&&e.hasAttribute("tangy-action")?this.eval(e.getAttribute("tangy-if"),"tangy-if",e.getAttribute("name"))?i[e.getAttribute("tangy-action")].truthy(e.name):i[e.getAttribute("tangy-action")].falsey(e.name):e.hasAttribute("tangy-if")&&!e.hasAttribute("tangy-action")&&(this.eval(e.getAttribute("tangy-if"),"tangy-if",e.getAttribute("name"))?i.visible.truthy(e.name):i.visible.falsey(e.name))}),this.shadowRoot.querySelectorAll("tangy-template").forEach(e=>{e.shadowRoot&&(e.$.container.innerHTML=this.eval("`"+e.template+"`","tangy-template",e.getAttribute("name")))})}eval(code,hook,context=""){let state=this.store.getState(),inputsArray=[];state.items.forEach(e=>inputsArray=[...inputsArray,...e.inputs]),this.shadowRoot.querySelectorAll("[name]").forEach(e=>inputsArray.push(e));let inputsKeyedByName={};inputsArray.forEach(e=>inputsKeyedByName[e.name]=e);let inputs=inputsKeyedByName,elementsById={};this.shadowRoot.querySelectorAll("[id]").forEach(e=>elementsById[e.id]=e);let items={};state.items.forEach(e=>items[e.name]=e);let inputEls=this.shadowRoot.querySelectorAll("[name]"),tangyFormStore=this.store,{getValue:getValue,inputHide:inputHide,inputShow:inputShow,inputDisable:inputDisable,inputEnable:inputEnable,itemHide:itemHide,itemShow:itemShow,itemDisable:itemDisable,itemEnable:itemEnable,isChecked:isChecked,notChecked:notChecked,itemsPerMinute:itemsPerMinute,numberOfItemsAttempted:numberOfItemsAttempted,numberOfCorrectItems:numberOfCorrectItems,numberOfIncorrectItems:numberOfIncorrectItems,gridAutoStopped:gridAutoStopped,hideInputsUponThreshhold:hideInputsUponThreshhold}=this.exposeHelperFunctions();try{const result=eval(code);return result}catch(e){const t=`${Object(_util_t_js__WEBPACK_IMPORTED_MODULE_1__.a)("Error detected in the section logic:")} ${context} :: ${hook} :: <br> <pre> ${code} </pre>`;return console.log(t),console.log(e),this.dispatchEvent(new CustomEvent("logic-error",{detail:t})),!1}}exposeHelperFunctions(){let e=new _tangy_form_item_callback_helpers_js__WEBPACK_IMPORTED_MODULE_5__.a(this);return{getValue:t=>e.getValue(t),inputHide:t=>e.inputHide(t),inputShow:t=>e.inputShow(t),inputDisable:t=>e.inputDisable(t),inputEnable:t=>e.inputEnable(t),itemHide:t=>e.inputHide(t),itemShow:t=>e.inputShow(t),itemDisable:t=>e.inputDisable(t),itemEnable:t=>e.inputEnable(t),isChecked:t=>e.isChecked(t),notChecked:t=>e.notChecked(t),itemsPerMinute:t=>e.itemsPerMinute(t),numberOfItemsAttempted:t=>e.numberOfItemsAttempted(t),numberOfCorrectItems:t=>e.numberOfCorrectItems(t),numberOfIncorrectItems:t=>e.numberOfIncorrectItems(t),gridAutoStopped:t=>e.gridAutoStopped(t),hideInputsUponThreshhold:t=>e.hideInputsUponThreshhold(t)}}onOpenButtonPress(){this.open=!0,this.dispatchEvent(new CustomEvent("ITEM_OPENED"))}onCloseButtonPress(){this.locked?(this.open=!1,this.dispatchEvent(new CustomEvent("ITEM_CLOSED"))):this.validate()&&(this.submit(),this.open=!1,this.dispatchEvent(new CustomEvent("ITEM_CLOSED")))}onOpenChange(e){!1===e&&(this.$.content.innerHTML=""),!0===e&&""===this.$.content.innerHTML&&this.openWithContent(this.template)}openWithContent(e){this.$.content.innerHTML=e,this.$.content.querySelectorAll("[name]").forEach(e=>{e.addEventListener("next",()=>this.next()),e.addEventListener("change",e=>{this.dispatchEvent(new Event("change",{details:e.target})),this.fireHook("on-change",e)})});let t=this.$.content.querySelector("tangy-complete-button");t&&(this.showCompleteButton=!1,t.addEventListener("click",this.clickedComplete.bind(this)));let i=this.shadowRoot.querySelector("tangy-consent");i&&(this.showCompleteButton=!1,i.addEventListener("TANGY_INPUT_CONSENT_NO",this.clickedNoConsent.bind(this))),this.reflect(),!0===this.open&&(this.fireHook("on-open"),this.fireHook("on-change")),this.dispatchEvent(new CustomEvent("TANGY_FORM_ITEM_OPENED"))}onDisabledChange(e,t){!0===e&&!1===t&&this.dispatch({type:ITEM_DISABLED,itemId:this.id})}submit(){let e=[];return this.shadowRoot.querySelectorAll("[name]").forEach(t=>e.push(t.getProps())),this.inputs=e,window.devtools&&window.devtools.open&&console.table(this.inputs.map(e=>({name:e.name,value:e.value}))),!0}validate(){let inputEls=[...this.shadowRoot.querySelector("#content").children].filter(e=>e.hasAttribute("name"));const inputs=inputEls.reduce((e,t)=>({[t.name]:t,...e}),{});let invalidInputNames=[],validInputNames=[];for(let input of inputEls)if(input.hidden)input.invalid=!1,validInputNames.push(input.name);else{let{getValue:getValue,inputHide:inputHide,inputShow:inputShow,inputDisable:inputDisable,inputEnable:inputEnable,itemHide:itemHide,itemShow:itemShow,itemDisable:itemDisable,itemEnable:itemEnable,isChecked:isChecked,notChecked:notChecked,itemsPerMinute:itemsPerMinute,numberOfItemsAttempted:numberOfItemsAttempted,numberOfCorrectItems:numberOfCorrectItems,numberOfIncorrectItems:numberOfIncorrectItems,gridAutoStopped:gridAutoStopped,hideInputsUponThreshhold:hideInputsUponThreshhold}=this.exposeHelperFunctions();input.validate&&!input.validate()||input.hasAttribute("valid-if")&&!eval(input.getAttribute("valid-if"))?(input.invalid=!0,invalidInputNames.push(input.name)):(input.invalid=!1,validInputNames.push(input.name))}return 0!==invalidInputNames.length?(this.shadowRoot.querySelector(`[name="${invalidInputNames[0]}"]`).scrollIntoView({behavior:"smooth",block:"start"}),this.incomplete=!0,this.fireHook("on-change"),!1):(this.incomplete=!1,this.fireHook("on-change"),!0)}next(){this.validate()&&(this.submit(),this.dispatchEvent(new CustomEvent("ITEM_NEXT")))}back(){this.submit(),this.dispatchEvent(new CustomEvent("ITEM_BACK"))}clickedComplete(){this.validate()&&(this.submit(),this.dispatchEvent(new CustomEvent("FORM_RESPONSE_COMPLETE",{bubbles:!0})))}clickedNoConsent(){this.validate()&&(this.submit(),this.dispatchEvent(new CustomEvent("FORM_RESPONSE_NO_CONSENT",{bubbles:!0})))}}window.customElements.define(TangyFormItem.is,TangyFormItem)},function(e,t,i){"use strict";var n=i(0);i(11),i(13),i(9);class r extends n.a{static get template(){return n.b`
     <style include="tangy-common-styles"></style>
     <style>
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tangy-form",
   "description": "A form element for lazy loaded multipage forms",
-  "version": "3.22.1",
+  "version": "3.23.0",
   "main": "tangy-form.js",
   "scripts": {
     "start": "polymer serve",