Coding Guidelines and standards for custom elements (ace-elements)

Guideline	Description	Example
Component naming standards	All the custom tags have to follow the standard naming convention.Tag Name: All the custom tag names start with the prefix ace-. (This is the mark-up tag)	tag name: Starting with '<ace-' <ace-record-form></ace-record-form>, <ace-table-grid></ace-table-grid>, <ace-activity-history></ace-activity-history>, <ace-login></ace-login>.
	Input/Attribute Names: Input or attribute should be in camel case inside the component and dash separated in tag name.	tag name: Starting with '<ace-' <ace-record-form object-id="cases" record-id="456546654"></ace-record-form>
	Standard Attributes: style related attribute : css-classlist Note: Input parameter is cssClassList, and DOM Attribute is css-classlist.
Component Typography	All the wrappers of the custom-element should be in mat-typography class	mat-typography <div class="mat-typography" [ngClass]="cssClasslist"> <aac-record-form [objectId]="objectId" [recordId]="recordId" [fieldDisplayMode]="fieldDisplayMode">Loading... </aac-record-form> </div>
Spinner State Change Event	Event that takes place while the component is making an asynchronous call to APIs. It helps to display a custom spinner/loader component on the page. Note: Parameter name is spinnerStateChange. Parameter details {showSpinner: true}	sample usage // HTML tag ref // <ace-record-form id="rfId"></ace-record-form> // const rFElem = document.querySelector('#rfId'); rFElem.addEventListener('spinnerStateChange',(event)=>{document.querySelector('#spinner').style.display = event.detail.showSpinner ? "block":"none"})
Other Custom Events	Standard events for the components. For example, onSave, onLoad, onSubmit, and so on have to be published. Note: Parameter name is customEventName.	sample usage 1 // HTML tag ref // <ace-record-form id="rfId"></ace-record-form> // const rFElem = document.querySelector('#rfId'); rFElem.addEventListener('customEventName',(event)=>{}) // handle the event data from 'event.detail' property sample usage 2 //jQuery version $('#rfId').on("onLoad", function(){}) // onLoad handler // Multiple events $('#rfId').on("onLoad onSave onReset", function(){}) // common handler function for onLoad, onSave and onReset.
Accessing the public method of the components	This is a mechanism to access the public method of a component. For this, all the wrapper components have to use the following techniques: Let us assume that a component has a methodA() which you want to expose outside. So in the wrapper of this component, you should have a @Input directory which links the component method to the outside. You have to call this wrapper method in the JavaScript function.	Component public methodA(x) { console.log(x) ;} Wrapper @Input() accessMethodA = (value) => { this.component.methodA(value) ;} JavaScript function callComponentPublicMethod(){ wrapper.accessMethodA('Hello world') ;}
Component Inputs	Provide details such as inputs which are optional, which are mandatory, and what is the input format.
Global Routing subscription	Whenever the components perform some routing action on the browser, wrapper component should catch the action and use it to trigger some other actions.
Component Wildcard router	When there is no URL path matching with the entered URL by user, then a common PageNotFound component should be triggered.
Common lock-component for 400/500 response	All the components should maintain the 400/500 response from an API. One common error-component should be used by all the wrappers for the solution.