Form

<form class="js-auto-save" action="action.php" method="POST">
    <div class="form-heading">
        <h3>What type of Coversheet would you like to create?</h3>

        <h4>Chief Investigator</h4>
    </div>

    <!-- data table ("excel style") -->

    <div class="form-group -full-width">
        <div class="form-field">
            <label>Spreadsheet</label>

            <table class="spreadsheet">
                <tr class="table-header table-row">

                    <th class="table-cell ">
                        <span class="text">Description</span>
                    </th>

                    <th class="table-cell -align-right">
                        <span class="text">Year 1</span>
                        <span class="unit">$</span>
                    </th>

                    <th class="table-cell -align-right">
                        <span class="text">Year 2</span>
                        <span class="unit">$</span>
                    </th>

                    <th class="table-cell -align-right">
                        <span class="text">Year 3</span>
                        <span class="unit">$</span>
                    </th>

                    <th class="table-cell -align-right">
                        <span class="text">Year 4</span>
                        <span class="unit">$</span>
                    </th>

                    <th class="table-cell -align-right">
                        <span class="text">Year 5</span>
                        <span class="unit">$</span>
                    </th>

                    <th class="table-cell -align-right">
                        <span class="text">Total</span>
                        <span class="unit">$</span>
                    </th>

                </tr>

                <tr class="table-row">
                    <td class="table-cell ">
                        <input aria-label="Description for row 1" value="Grant ABC">
                    </td>
                    <td class="table-cell -align-right">
                        <input aria-label="Year 1 for row 1" value="99999999.99">
                    </td>
                    <td class="table-cell -align-right">
                        <input aria-label="Year 2 for row 1" value="99999999.99">
                    </td>
                    <td class="table-cell -align-right">
                        <input aria-label="Year 3 for row 1" value="99999999.99">
                    </td>
                    <td class="table-cell -align-right">
                        <input aria-label="Year 4 for row 1" value="99999999.99">
                    </td>
                    <td class="table-cell -align-right">
                        <input aria-label="Year 5 for row 1" value="99999999.99">
                    </td>
                    <td class="table-cell -align-right">
                        <input aria-label="Total for row 1" value="99999999.99">
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <!-- basic fields -->

    <div class="form-group">
        <div class="form-field">
            <label for="chrFieldName">Basic field</label>

            <input type="text" name="chrFieldName">
        </div>
    </div>

    <div class="form-group">
        <div class="form-field">
            <label for="chrFieldName">Text area</label>

            <textarea name="chrText" rows="6"></textarea>
        </div>
    </div>

    <!-- use data-col (max 12) on form-group and data-flex on form-field to adjust width of field -->

    <div class="form-group" data-col="2">
        <div class="form-field" data-flex="1">
            <label for="chrFieldName">Short field</label>

            <input type="text" name="chrFieldName">
        </div>
    </div>

    <!-- valid field -->

    <div class="form-group">
        <div class="form-field -valid">
            <label for="chrValid">Valid field</label>

            <input type="text" name="chrValid">
        </div>
    </div>

    <!-- invalid field -->

    <div class="form-group">
        <div class="form-field -invalid">
            <label for="chrInvalid">
				<span class="message">Please follow the rules</span>

				<span>Invalid field<span>
			</label>

            <input type="text" name="chrInvalid">
        </div>
    </div>

    <!-- dropdown -->

    <div class="form-group">
        <div class="form-field">
            <label for="chrFormType">Dropdown</label>

            <div type="button" class="btn dropdown js-dropdown " data-role="form" role="menu" tabindex="0" aria-haspopup="true" aria-label="">

                <div class="dropdown-label">
                    <label class="-hidden" for="chrFormType"></label>
                    <input type="hidden" name="chrFormType" value="Amend an application">
                    <span class="text">Amend an application</span>
                </div>

                <ul class="dropdown-options" aria-hidden="true">
                    <li class="dropdown-item" data-value="Amend an application" role="menuitem">Amend an application</li>
                    <li class="dropdown-item" data-value="Start an application" role="menuitem">Start an application</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- use data-col (max 12) on form-group and data-flex on form-field to place inputs side-by-side -->

    <div class="form-group" data-col="8">
        <div class="form-field" data-flex="5">
            <label for="chrFormType">Dropdown</label>

            <div type="button" class="btn dropdown js-dropdown " data-role="form" role="menu" tabindex="0" aria-haspopup="true" aria-label="">

                <div class="dropdown-label">
                    <label class="-hidden" for="chrFormType"></label>
                    <input type="hidden" name="chrFormType" value="Amend an application">
                    <span class="text">Amend an application</span>
                </div>

                <ul class="dropdown-options" aria-hidden="true">
                    <li class="dropdown-item" data-value="Amend an application" role="menuitem">Amend an application</li>
                    <li class="dropdown-item" data-value="Start an application" role="menuitem">Start an application</li>
                </ul>
            </div>
        </div>

        <div class="form-field" data-flex="3">
            <label for="chrFormType">Dropdown</label>

            <div type="button" class="btn dropdown js-dropdown " data-role="form" role="menu" tabindex="0" aria-haspopup="true" aria-label="">

                <div class="dropdown-label">
                    <label class="-hidden" for="chrFormType"></label>
                    <input type="hidden" name="chrFormType" value="Amend an application">
                    <span class="text">Amend an application</span>
                </div>

                <ul class="dropdown-options" aria-hidden="true">
                    <li class="dropdown-item" data-value="Amend an application" role="menuitem">Amend an application</li>
                    <li class="dropdown-item" data-value="Start an application" role="menuitem">Start an application</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="form-subheading">
        <h4>Form subheading</h4>
    </div>

    <!-- advanced lookup -->

    <div class="form-group">
        <div class="form-field search-box" data-name="chrProject" data-advanced="people" data-advanced-crit="Surname" data-return="chrStaffNumber" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
            data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [  { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" }  ]  }]'
            data-actions='[ { "name": "details", "icon": "details" }]'>

            <label for="chrProject">Advanced Lookup</label>

            <div class="input-group">
                <input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="&hellip;" data-modal="advanced-search">

                <ul class="search-tags"></ul>

                <div class="search-advanced">
                    <button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
						<span class="fa fa-search"></span> 
						<span class="link link-strong">Lookup</span>
					</button>
                </div>
            </div>
        </div>
    </div>

    <!-- advanced lookup with createMyRecord action -->

    <div class="form-group">
        <div class="form-field search-box" data-name="chrNewRecord" data-advanced="people" data-advanced-crit="Surname" data-parent="parentIDxyz" data-module="grants" data-return="chrStaffNumber" data-row-class="js-create-record" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
            data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [  { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" }  ]  }]'
            data-actions='[ { "name": "details", "icon": "details" }]'>

            <label for="chrProject">Advanced Lookup (CreateMyRecord)</label>

            <div class="input-group">
                <input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="&hellip;" data-modal="advanced-search">

                <ul class="search-tags"></ul>

                <div class="search-advanced">
                    <button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
						<span class="fa fa-search"></span> 
						<span class="link link-strong">Lookup</span>
					</button>
                </div>
            </div>
        </div>
    </div>

    <!-- advanced lookup with createMyRecord action -->

    <div class="form-group">
        <div class="form-field search-box" data-name="chrNewRecord" data-advanced="people" data-advanced-crit="Surname" data-parent="parentIDxyz" data-create="2309849" data-module="grants" data-return="chrStaffNumber" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
            data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [  { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" }  ]  }]'
            data-actions='[ { "name": "details", "icon": "details" }]'>

            <label for="chrProject">Advanced Lookup (Create New Record)</label>

            <div class="input-group">
                <input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="&hellip;" data-modal="advanced-search">

                <ul class="search-tags"></ul>

                <div class="search-advanced">
                    <button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
						<span class="fa fa-search"></span> 
						<span class="link link-strong">Lookup</span>
					</button>
                </div>
            </div>
        </div>
    </div>

    <!-- date picker -->

    <div class="form-group">
        <div class="form-field date-field">
            <label>Start Date</label>

            <div class="input-group date-input-container">
                <input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY" data-initial-value="03/04/1990">

                <!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
                <input type="text" name="chrDate" hidden>

                <button type="button" class="btn btn-date-picker js-date-picker"></button>
            </div>
        </div>
    </div>

    <!-- two date fields of equal width -->

    <div class="form-group" data-col="2">
        <div class="form-field date-field" data-flex="1">
            <label>Start Date</label>

            <div class="input-group date-input-container">
                <input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">

                <!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
                <input type="text" name="chrStartDate" hidden>

                <button type="button" class="btn btn-date-picker js-date-picker"></button>
            </div>
        </div>

        <div class="form-field date-field" data-flex="1">
            <label>End Date</label>

            <div class="input-group date-input-container">
                <input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">

                <!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
                <input type="text" name="chrEndDate" hidden>

                <button type="button" class="btn btn-date-picker js-date-picker"></button>
            </div>
        </div>
    </div>

    <!-- checkbox group (select multiple) -->

    <div class="form-group">
        <div class="form-field">
            <label>Checkbox Group</label>

            <div class="input-group checkbox-group">
                <label for="option1">
					<input name="option1" id="option1" type="checkbox" >

					<div class="label">
						<span class="text">Option 1</span>
					</div>
				</label>
            </div>

            <div class="input-group checkbox-group">
                <label for="option2">
					<input name="option2" id="option2" type="checkbox" >

					<div class="label">
						<span class="text">Option 2</span>
					</div>
				</label>
            </div>
        </div>
    </div>

    <!-- radio group (select one) -->

    <div class="form-group">
        <div class="form-field">
            <label for="radioGroup">Radio Button Group</label>

            <div class="input-group radio-group">
                <label for="radio1">
					<input id="radio1" name="radioGroup" value="option1" type="radio" >

					<div class="label">
						<span class="text">First choice</span>
					</div>
				</label>

                <label for="radio2">
					<input id="radio2" name="radioGroup" value="option2" type="radio" >

					<div class="label">
						<span class="text">Second choice</span>
					</div>
				</label>
            </div>
        </div>
    </div>

    <!-- single checkbox with check -->

    <div class="form-group">
        <div class="form-field">
            <label>
				<span class="text">Single checkbox</span>

				<div class="form-help">
					<button type="button" class="btn btn-help -to-right js-tooltip-help">
						<i class="fa fa-question-circle" aria-hidden="true"></i>

						<div class="help-text">A small amount of info about this.</div>
					</button>

					<span class="help-text">Visible by default</span>
				</div>
			</label>

            <div class="input-group checkbox-group -with-check">
                <label for="singleCheck">
					<input name="singleCheck" id="singleCheck" type="checkbox">

					<div class="label">
						<span class="text">Hide status</span>
					</div>
				</label>
            </div>
        </div>
    </div>

    <!-- WYSIWYG -->

    <div class="form-group">
        <div class="form-field">
            <label for="editor-1">WYSIWYG</label>

            <textarea class="js-wysiwyg" name="editor-1" id="editor-1" rows="10">
		        <p><span class="math-tex">\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span>&nbsp;&nbsp;</p>
		    </textarea>
        </div>
    </div>

    <!-- toggle with multiple fields -->

    <div class="form-group -full-width">
        <label>Toggle field group</label>

        <div class="compound-field">
            <div class="form-field -fixed-width">
                <div class="input-group toggle-group">
                    <label for="toggle1">
						<input id="toggle1" type="checkbox" >

						<div class="label"></div>
					</label>
                </div>
            </div>

            <label>by</label>

            <div class="form-field search-box" data-name="chrCompound1" data-advanced="people" data-advanced-crit="Surname" data-return="chrStaffNumber" data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
                data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [  { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" }  ]  }]'
                data-actions='[ { "name": "details", "icon": "details" }]'>

                <div class="input-group">
                    <input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="&hellip;" data-modal="advanced-search">

                    <ul class="search-tags"></ul>

                    <div class="search-advanced">
                        <button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
							<span class="fa fa-search"></span> 
							<span class="link link-strong">Lookup</span>
						</button>
                    </div>
                </div>
            </div>

            <label>on</label>

            <div class="date-field form-field">
                <div class="input-group date-input-container">
                    <input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">

                    <!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
                    <input type="text" name="chrCompound2" hidden>

                    <button type="button" class="btn btn-date-picker js-date-picker"></button>
                </div>
            </div>
        </div>
    </div>

    <!-- accordion -->

    <div class="form-subheading">
        <h4>Accordions</h4>

        <div class="heading-links">
            <div class="label">Accordions:</div>

            <button type="button" class="btn link js-accordion-expand" data-accordion="group-name">Expand all</button>

            <button type="button" class="btn link js-accordion-collapse" data-accordion="group-name">Collapse all</button>
        </div>
    </div>

    <div class="accordion-group" data-accordion="group-name">
        <div class="accordion">
            <button type="button" class="btn accordion-header js-accordion">
				<h4 class="accordion-title">
					<span class="text">Accordion</span>
				</h4>
			</button>

            <div class="accordion-content">
                <div class="form-group">
                    <div class="form-field">
                        <label for="chrFieldName">Basic field</label>

                        <input type="text" name="chrFieldName">
                    </div>
                </div>
            </div>
        </div>

        <div class="accordion -collapsed">
            <button type="button" class="btn accordion-header js-accordion">
				<h4 class="accordion-title">
					<span class="text">Accordion Collapsed</span>
				</h4>
			</button>

            <div class="accordion-content">
                <div class="form-group">
                    <div class="form-field">
                        <label for="chrFieldName">Basic field</label>

                        <input type="text" name="chrFieldName">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- submit button -->

    <div class="submit-group">
        <div class="form-field">
            <div class="input-group checkbox-group -with-check">
                <label for="complete">
					<input name="complete" id="complete" type="checkbox">

					<div class="label">
						<span class="text">Mark this section as complete</span>
					</div>
				</label>
            </div>
        </div>

        <div class="dropdown-button">
            <button type="submit" class="btn btn-default" formaction="/submit-and-redirect">Save and continue</button>

            <div role="button" class="btn dropdown js-dropdown" data-role="button" role="menu" aria-haspopup="true" tabindex="0" aria-label="Select an action" tabindex="0">
                <div class="icon"></div>

                <ul class="dropdown-options" aria-hidden="true">
                    <li class="btn dropdown-item" data-action="" role="menuitem">
                        <button type="submit" class="btn link link-strong" formaction="/submit-and-stay">Save</button>
                    </li>

                    <li class="btn dropdown-item" data-action="" role="menuitem">
                        <button type="submit" class="btn link link-strong" formaction="/submit-and-redirect">Save and continue</button>
                    </li>

                    <li class="btn dropdown-item" data-action="" role="menuitem">
                        <button type="submit" class="btn link link-strong" formaction="/submit-and-exit">Save and exit</button>
                    </li>

                    <li class="btn dropdown-item" data-action="" role="menuitem">
                        <a href="/preview" title="Preview" class="link link-strong">Preview</a>
                    </li>

                    <li class="btn dropdown-item" data-action="" role="menuitem">
                        <a href="/restore" title="Restore" class="link link-strong">Restore</a>
                    </li>

                    <li class="btn dropdown-item" data-action="" role="menuitem">
                        <a href="/exit" title="Discard changes" class="link link-strong">Discard changes</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="autosave-label">
        <span class="timestamp"></span>
    </div>

    <div class="modal modal-advanced-search js-modal js-modal-exit -nav-padded -with-overlay" data-modal="advanced-search">
        <div class="modal-inner inner">
            <div class="modal-panel advanced-search-container">
                <div class="modal-header">
                    <button type="button" class="btn btn-default btn-modal-exit js-modal-exit svg-wrap" aria-label="Exit Modal">
						<span class="fa fa-times"></span>
					</button>
                    <h3 class="modal-title">
                        <span class="text">Advanced Lookup</span>
                    </h3>
                </div>
                <div class="modal-section advanced-search-form modal-advanced-form">
                    <div data-col="6">
                        <div class="form-field advanced-search-field" data-flex="4" data-col="4" data-required="true" data-min-length="2">
                            <label class="advanced-search-label" data-flex="1" for="SearchValue"></label>
                            <input data-flex="3" name="SearchValue" class="advanced-search-input"></input>
                        </div>

                        <div class="criteria-text form-field advanced-search-field" data-col="6" data-flex="2">
                            <div data-flex="2"></div>
                            <label class="advanced-search-label" data-flex="2" for="SearchValue"></label>
                            <input data-flex="2" name="SearchValue" class="advanced-search-input"></input>
                        </div>
                    </div>
                    <div class="advanced-search-criteria" data-col="6">
                        <div class="criteria-dropdown form-field advanced-search-field" data-col="6" data-flex="6"></div>
                        <div class="criteria-checkbox form-field advanced-search-field" data-col="3" data-flex="3"></div>

                        <div class="btn-container" data-flex="3">
                            <a class="btn btn-create-record js-parent-create-record">
								<span class="fa fa-plus-circle"></span>
								<span class="link link-strong">Create a new record</span>
							</a>

                            <button type="button" class="btn btn-default btn-update-advanced js-btn-update-advanced">
								<div class="text">Show Records</div>
							</button>
                        </div>
                    </div>
                </div>

                <div class="modal-section modal-results advanced-search-results">

                </div>
            </div>
        </div>
    </div>
</form>
<form class="js-auto-save" action="action.php" method="POST">
	<div class="form-heading">
		<h3>What type of Coversheet would you like to create?</h3>

		<h4>Chief Investigator</h4>
	</div>

	<!-- data table ("excel style") -->

	<div class="form-group -full-width">
		<div class="form-field">
			<label>Spreadsheet</label>

			{{#with form.table }}
				{{> @table--spreadsheet }}
			{{/with}}
		</div>
	</div>

	<!-- basic fields -->

	<div class="form-group">
		<div class="form-field">
			<label for="chrFieldName">Basic field</label>

			<input type="text" name="chrFieldName">
		</div>
	</div>                                                   

	<div class="form-group">
		<div class="form-field">
			<label for="chrFieldName">Text area</label>

		    <textarea name="chrText" rows="6"></textarea>
		</div>
	</div>

	<!-- use data-col (max 12) on form-group and data-flex on form-field to adjust width of field -->

	<div class="form-group" data-col="2">
		<div class="form-field" data-flex="1">
			<label for="chrFieldName">Short field</label>

			<input type="text" name="chrFieldName">
		</div>
	</div>

	<!-- valid field -->

	<div class="form-group">
		<div class="form-field -valid">
			<label for="chrValid">Valid field</label>

			<input type="text" name="chrValid">
		</div>
	</div>

	<!-- invalid field -->

	<div class="form-group">
		<div class="form-field -invalid">
			<label for="chrInvalid">
				<span class="message">Please follow the rules</span>

				<span>Invalid field<span>
			</label>

			<input type="text" name="chrInvalid">
		</div>
	</div>

	<!-- dropdown -->

	<div class="form-group">
		<div class="form-field">
			<label for="chrFormType">Dropdown</label>

			{{#with form.dropdownType }}
				{{> @dropdown }}
			{{/with}}
		</div>
	</div>

	<!-- use data-col (max 12) on form-group and data-flex on form-field to place inputs side-by-side -->

	<div class="form-group" data-col="8">
		<div class="form-field" data-flex="5">
			<label for="chrFormType">Dropdown</label>

			{{#with form.dropdownType }}
				{{> @dropdown }}
			{{/with}}
		</div>

		<div class="form-field" data-flex="3">
			<label for="chrFormType">Dropdown</label>

			{{#with form.dropdownType }}
				{{> @dropdown }}
			{{/with}}
		</div>
	</div>

	<div class="form-subheading">
		<h4>Form subheading</h4>
	</div>

	<!-- advanced lookup -->

	<div class="form-group">
		<div class="form-field search-box"
			data-name="chrProject"
			data-advanced="people" 
			data-advanced-crit="Surname"
			data-return="chrStaffNumber" 
			data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
			data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [  { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" }  ]  }]'
			data-actions='[ { "name": "details", "icon": "details" }]'>

			<label for="chrProject">Advanced Lookup</label>

			<div class="input-group">
				<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="&hellip;" data-modal="advanced-search">

				<ul class="search-tags"></ul>

				<div class="search-advanced">
					<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
						<span class="fa fa-search"></span> 
						<span class="link link-strong">Lookup</span>
					</button>
				</div>
			</div>
		</div>
	</div>

	<!-- advanced lookup with createMyRecord action -->

	<div class="form-group">
		<div class="form-field search-box"
			data-name="chrNewRecord"
			data-advanced="people" 
			data-advanced-crit="Surname"

			data-parent="parentIDxyz"
			data-module="grants"
			data-return="chrStaffNumber"
			data-row-class="js-create-record"

			data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
			data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [  { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" }  ]  }]'
			data-actions='[ { "name": "details", "icon": "details" }]'>

			<label for="chrProject">Advanced Lookup (CreateMyRecord)</label>

			<div class="input-group">
				<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="&hellip;" data-modal="advanced-search">

				<ul class="search-tags"></ul>

				<div class="search-advanced">
					<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
						<span class="fa fa-search"></span> 
						<span class="link link-strong">Lookup</span>
					</button>
				</div>
			</div>
		</div>
	</div>

	<!-- advanced lookup with createMyRecord action -->

	<div class="form-group">
		<div class="form-field search-box"
			data-name="chrNewRecord"
			data-advanced="people" 
			data-advanced-crit="Surname"

			data-parent="parentIDxyz" 
			data-create="2309849"
			data-module="grants"
			data-return="chrStaffNumber"

			data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
			data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [  { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" }  ]  }]'
			data-actions='[ { "name": "details", "icon": "details" }]'>

			<label for="chrProject">Advanced Lookup (Create New Record)</label>

			<div class="input-group">
				<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="&hellip;" data-modal="advanced-search">

				<ul class="search-tags"></ul>

				<div class="search-advanced">
					<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
						<span class="fa fa-search"></span> 
						<span class="link link-strong">Lookup</span>
					</button>
				</div>
			</div>
		</div>
	</div>

	<!-- date picker -->

	<div class="form-group">
		<div class="form-field date-field">
			<label>Start Date</label>

			<div class="input-group date-input-container">
				<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY" data-initial-value="03/04/1990">

				<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
				<input type="text" name="chrDate" hidden>

				<button type="button" class="btn btn-date-picker js-date-picker"></button>
			</div>
		</div>
	</div>

	<!-- two date fields of equal width -->

	<div class="form-group" data-col="2">
		<div class="form-field date-field" data-flex="1">
			<label>Start Date</label>

			<div class="input-group date-input-container">
				<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">

				<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
				<input type="text" name="chrStartDate" hidden>

				<button type="button" class="btn btn-date-picker js-date-picker"></button>
			</div>
		</div>

		<div class="form-field date-field" data-flex="1">
			<label>End Date</label>

			<div class="input-group date-input-container">
				<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">

				<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
				<input type="text" name="chrEndDate" hidden>

				<button type="button" class="btn btn-date-picker js-date-picker"></button>
			</div>
		</div>
	</div>

	<!-- checkbox group (select multiple) -->

	<div class="form-group">
		<div class="form-field">
			<label>Checkbox Group</label>

			<div class="input-group checkbox-group">
				<label for="option1">
					<input name="option1" id="option1" type="checkbox" >

					<div class="label">
						<span class="text">Option 1</span>
					</div>
				</label>
			</div>

			<div class="input-group checkbox-group">
				<label for="option2">
					<input name="option2" id="option2" type="checkbox" >

					<div class="label">
						<span class="text">Option 2</span>
					</div>
				</label>
			</div>
		</div>
	</div>

	<!-- radio group (select one) -->

	<div class="form-group">
		<div class="form-field">
			<label for="radioGroup">Radio Button Group</label>

			<div class="input-group radio-group">
				<label for="radio1">
					<input id="radio1" name="radioGroup" value="option1" type="radio" >

					<div class="label">
						<span class="text">First choice</span>
					</div>
				</label>

				<label for="radio2">
					<input id="radio2" name="radioGroup" value="option2" type="radio" >

					<div class="label">
						<span class="text">Second choice</span>
					</div>
				</label>
			</div>
		</div>
	</div>

	<!-- single checkbox with check -->

	<div class="form-group">
		<div class="form-field">
			<label>
				<span class="text">Single checkbox</span>

				<div class="form-help">
					<button type="button" class="btn btn-help -to-right js-tooltip-help">
						<i class="fa fa-question-circle" aria-hidden="true"></i>

						<div class="help-text">A small amount of info about this.</div>
					</button>

					<span class="help-text">Visible by default</span>
				</div>
			</label>

			<div class="input-group checkbox-group -with-check">
				<label for="singleCheck">
					<input name="singleCheck" id="singleCheck" type="checkbox">

					<div class="label">
						<span class="text">Hide status</span>
					</div>
				</label>
			</div>
		</div>
	</div>

	<!-- WYSIWYG -->

	<div class="form-group">
		<div class="form-field">
			<label for="editor-1">WYSIWYG</label>
			
		    <textarea class="js-wysiwyg" name="editor-1" id="editor-1" rows="10">
		        <p><span class="math-tex">\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span>&nbsp;&nbsp;</p>
		    </textarea>
		</div>
	</div>

	<!-- toggle with multiple fields -->

	<div class="form-group -full-width">
		<label>Toggle field group</label>

		<div class="compound-field">
			<div class="form-field -fixed-width">
				<div class="input-group toggle-group">
					<label for="toggle1">
						<input id="toggle1" type="checkbox" >

						<div class="label"></div>
					</label>
				</div>
			</div>

			<label>by</label>

			<div class="form-field search-box"
				data-name="chrCompound1"
				data-advanced="people" 
				data-advanced-crit="Surname"
				data-return="chrStaffNumber" 
				data-columns='[ { "name": "chrSurname", "title": "Surname", "em": true }, { "name": "chrFirstName", "title": "First Name", "em": true }, { "name": "chrTier3Name", "title": "Department" }, { "name": "chrEmail", "title": "Email" }]'
				data-options='[ { "name": "IncludeLinked", "title": "Include Linked", "type": "checkbox" }, { "name": "FirstNamed", "title": "First Named", "type": "checkbox" }, { "name": "SearchValue2", "title": "Initials", "type": "text" }, { "name": "SearchValue3", "title": "Operator", "type": "dropdown", "list": [  { "value": "contains", "title": "contains" } , { "value": "begins", "title": "begins with" } , { "value": "sounds", "title": "sounds like" }  ]  }]'
				data-actions='[ { "name": "details", "icon": "details" }]'>

				<div class="input-group">
					<input class="search-box-input js-advanced-search-input js-keypress-modal" placeholder="&hellip;" data-modal="advanced-search">

					<ul class="search-tags"></ul>

					<div class="search-advanced">
						<button type="button" class="btn btn-link btn-advanced-search js-advanced-search js-btn-modal" data-modal="advanced-search">
							<span class="fa fa-search"></span> 
							<span class="link link-strong">Lookup</span>
						</button>
					</div>
				</div>
			</div>

			<label>on</label>

			<div class="date-field form-field">
				<div class="input-group date-input-container">
					<input type="text" class="date-input" maxlength="10" placeholder="DD/MM/YYYY">

					<!-- the named, hidden input will submit with value of format YYYY-MM-DDT00:00:00100:00 -->
					<input type="text" name="chrCompound2" hidden>

					<button type="button" class="btn btn-date-picker js-date-picker"></button>
				</div>
			</div>
		</div>
	</div>


	<!-- accordion -->

	<div class="form-subheading">
		<h4>Accordions</h4>

		<div class="heading-links">
			<div class="label">Accordions:</div>

			<button type="button" class="btn link js-accordion-expand" data-accordion="group-name">Expand all</button>

			<button type="button" class="btn link js-accordion-collapse" data-accordion="group-name">Collapse all</button>
		</div>
	</div>

	<div class="accordion-group" data-accordion="group-name">
		<div class="accordion">
			<button type="button" class="btn accordion-header js-accordion">
				<h4 class="accordion-title">
					<span class="text">Accordion</span>
				</h4>
			</button>

			<div class="accordion-content">
				<div class="form-group">
					<div class="form-field">
						<label for="chrFieldName">Basic field</label>

						<input type="text" name="chrFieldName">
					</div>
				</div>
			</div>
		</div>

		<div class="accordion -collapsed">
			<button type="button" class="btn accordion-header js-accordion">
				<h4 class="accordion-title">
					<span class="text">Accordion Collapsed</span>
				</h4>
			</button>

			<div class="accordion-content">
				<div class="form-group">
					<div class="form-field">
						<label for="chrFieldName">Basic field</label>

						<input type="text" name="chrFieldName">
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- submit button -->

	<div class="submit-group">
		<div class="form-field">
			<div class="input-group checkbox-group -with-check">
				<label for="complete">
					<input name="complete" id="complete" type="checkbox">

					<div class="label">
						<span class="text">Mark this section as complete</span>
					</div>
				</label>
			</div>
		</div>

		<div class="dropdown-button">
			<button type="submit" class="btn btn-default" formaction="/submit-and-redirect">Save and continue</button>

			<div role="button" class="btn dropdown js-dropdown" data-role="button" role="menu" aria-haspopup="true" tabindex="0" aria-label="Select an action" tabindex="0">
				<div class="icon"></div>

				<ul class="dropdown-options" aria-hidden="true">
					<li class="btn dropdown-item" data-action="" role="menuitem">
						<button type="submit" class="btn link link-strong" formaction="/submit-and-stay">Save</button>
					</li>

					<li class="btn dropdown-item" data-action="" role="menuitem">
						<button type="submit" class="btn link link-strong" formaction="/submit-and-redirect">Save and continue</button>
					</li>

					<li class="btn dropdown-item" data-action="" role="menuitem">
						<button type="submit" class="btn link link-strong" formaction="/submit-and-exit">Save and exit</button>
					</li>

					<li class="btn dropdown-item" data-action="" role="menuitem">
						<a href="/preview" title="Preview" class="link link-strong">Preview</a>
					</li>

					<li class="btn dropdown-item" data-action="" role="menuitem">
						<a href="/restore" title="Restore" class="link link-strong">Restore</a>
					</li>

					<li class="btn dropdown-item" data-action="" role="menuitem">
						<a href="/exit" title="Discard changes" class="link link-strong">Discard changes</a>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<div class="autosave-label">
		<span class="timestamp"></span>
	</div>

	{{> '@modal--search' }}
</form>
{
  "form": {
    "dropdownType": {
      "name": "chrFormType",
      "options": [
        {
          "title": "Amend an application",
          "value": "Amend an application"
        },
        {
          "title": "Start an application",
          "value": "Start an application"
        }
      ]
    },
    "table": {
      "columns": [
        {
          "title": "Description"
        },
        {
          "title": "Year 1",
          "unit": "$",
          "columnClass": "-align-right"
        },
        {
          "title": "Year 2",
          "unit": "$",
          "columnClass": "-align-right"
        },
        {
          "title": "Year 3",
          "unit": "$",
          "columnClass": "-align-right"
        },
        {
          "title": "Year 4",
          "unit": "$",
          "columnClass": "-align-right"
        },
        {
          "title": "Year 5",
          "unit": "$",
          "columnClass": "-align-right"
        },
        {
          "title": "Total",
          "unit": "$",
          "columnClass": "-align-right"
        }
      ],
      "rows": [
        {
          "data": [
            {
              "value": "Grant ABC",
              "label": "Description for row 1"
            },
            {
              "value": 99999999.99,
              "label": "Year 1 for row 1",
              "columnClass": "-align-right"
            },
            {
              "value": 99999999.99,
              "label": "Year 2 for row 1",
              "columnClass": "-align-right"
            },
            {
              "value": 99999999.99,
              "label": "Year 3 for row 1",
              "columnClass": "-align-right"
            },
            {
              "value": 99999999.99,
              "label": "Year 4 for row 1",
              "columnClass": "-align-right"
            },
            {
              "value": 99999999.99,
              "label": "Year 5 for row 1",
              "columnClass": "-align-right"
            },
            {
              "value": 99999999.99,
              "label": "Total for row 1",
              "columnClass": "-align-right"
            }
          ]
        }
      ]
    }
  }
}
  • Content:
    .ui-datepicker {
    	position: absolute;
    	right: 0;
    	bottom: 0;
    	transform: translateY(100%);
    	z-index: 20;
    
    	padding: 0;
    	width: auto;
    
    	background: $color-irma-white;
    	border-radius: 0;
    	border: 0 !important;
    	box-shadow: 0 1rem 3.5rem 0.5rem rgba(black, 0.05);
    
    	@include font-primary-medium;
    	@include font-size-other(14px);
    
    	* {
    		border: 0 !important;
    		color: $color-irma-navy;
    	}
    
    	.ui-datepicker-header {
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		height: calc(10rem + 5px);
    		padding: 0;
    
    		background: $color-irma-navy;
    		border: 0;
    		border-radius: 0;
    		color: white;
    
    		@include font-primary-bold;
    		text-transform: uppercase;
    		@include font-size;
    
    		* {
    			color: inherit;
    		}
    
    		.ui-corner-all {
    			top: 50%;
    			transform: translateY(-50%);
    
    			display: flex;
    			justify-content: center;
    			align-items: center;
    			height: 100%;
    			padding: 0;
    			width: 10rem;
    			overflow: hidden;
    
    			border-radius: 0;
    
    			transition: all $transition;
    
    			&:hover, &:focus {
    				background: $color-irma-slate;
    				border: 0 !important;
    				outline: 0;
    			}
    		}
    
    		.ui-datepicker-prev {
    			left: 0 !important;
    
    			.ui-icon {
    				background: {
    					image: url('../img/arrow-left-white.svg');
    					size: 2rem auto;
    					repeat: no-repeat;
    					position: center;
    				}
    			}
    		}
    
    		.ui-datepicker-next {
    			right: 0 !important;
    
    			.ui-icon {
    				background: {
    					image: url('../img/arrow-right-white.svg');
    					size: 2rem auto;
    					repeat: no-repeat;
    					position: center;
    				}
    			}
    		}
    	}
    
    	.ui-datepicker-calendar {
    		display: block;
    		padding: 4rem 5rem 6rem;
    		margin-bottom: 0;
    		width: auto;
    
    		box-shadow: 0 0 0 1px $color-irma-silver inset;
    
    		thead {
    			text-transform: uppercase;
    			@include font-size;
    		}
    
    		td {
    			padding: 1rem 2rem;
    		}
    
    		.ui-state-default {
    			display: flex;
    			justify-content: center;
    			align-items: center;
    			padding: 0;
    			width: 6rem;
    			height: 6rem;
    
    			border-radius: 0.5rem;
    			background: transparent;
    			color: $color-irma-slate;
    
    			&.ui-state-highlight {
    				box-shadow: 0 0 0 1px $color-irma-gray;
    				background: transparent;
    				color: $color-irma-navy;
    			}
    
    			&:hover, &:focus {
    				background: $color-irma-mint;
    				color: $color-irma-navy;
    
    				@include font-primary-bold;
    			}
    		}
    	}
    }
    
    .ui-datepicker-trigger {
    	display: none !important;
    }
  • URL: /components/raw/form/_date-picker.scss
  • Filesystem Path: components/01-components/form/_date-picker.scss
  • Size: 2.3 KB
  • Content:
    input, select, textarea {
    	box-shadow: 0 0 0 1px $color-irma-border;
    	border: 0;
    	outline: 0;
    
    	&:focus {
    		box-shadow: 0 0 0 1px $color-irma-focus;
    	}
    
    	&[disabled] {
    		background: $color-irma-silver;
    	}
    
    	&.-disabled {
    		padding: 0;
    
    		pointer-events: none;
    	}
    
    	&[readonly] {
    		background: $color-irma-readonly;
    		color: rgba($color-irma-slate, 0.7);
    	}
    }
    
    input, select {
    	height: 10rem;
    	padding: 0 4rem;
    
    	line-height: 10rem;
    }
    
    textarea {
    	padding: 4rem;
    }
    
    label, input {
    	&.-hidden {
    		display: none;
    	}
    }
    
    label {
    	// line-height: 10rem;
    }
    
    .form-help {
    	display: inline-block;
    
    	&:not(:first-child) {
    		margin-left: 1rem;
    	}
    
    	.help-text {
    		margin-left: 0.5rem;
    
    		opacity: 0.5;
    
    		font-style: italic;
    		text-transform: none;
    	}
    }
    
    input {
    	border-radius: 0.5rem;
    }
    
    select {
    	appearance: none;
    	border-radius: 0.5rem;
    	background: {
    		color: transparent;
    		image: url('../img/svg/arrow.svg');
    		size: 3rem 1.75rem;
    		repeat: no-repeat;
    		position: calc(100% - 5.5rem) 4rem;
    	}
    
    	&::-ms-expand { 
    		display: none;
    	}
    
    	// &:focus {
    	// 	filter: drop-shadow(0 4px 4px rgba(black, 0.05));
    	// }
    }
    
    input[type='checkbox'], input[type='radio'] {
    	position: relative;
    
    	height: 5rem;
    	width: 5rem;
    
    	appearance: none;
    	background: white;
    	vertical-align: middle;
    	border-radius: 2px;
    	opacity: 0;
    
    	&:checked {
    		& + label, & + .label {
    			&::after {
    				opacity: 1;
    			}
    
    			&::before {
    				box-shadow: 0 0 0 1px $color-irma-navy;
    			}
    		}
    	}
    
    	&:focus {
    		& + label, & + .label {
    			&::before {
    				box-shadow: 0 0 0 1px $color-irma-focus;
    			}
    		}
    	}
    
    	& + label, & + .label {
    		position: relative;
    
    		display: inline-block;
    		margin-left: 2rem;
    		vertical-align: middle;
    
    		&::before, &::after {
    			pointer-events: none;
    		}
    
    		&::before {
    			content: '';
    
    			position: absolute;
    			left: -2rem;
    			top: 50%;
    			transform: translate(-100%, -50%);
    
    			display: block;
    			width: 5rem;
    			height: 5rem;
    
    			box-shadow: 0 0 0 1px $color-irma-border;
    			border-radius: 2px;
    		}
    		
    		&::after {
    			content: '';
    
    			position: absolute;
    			left: -3rem;
    			top: 50%;
    			transform: translate(-100%, -50%);
    
    			display: block;
    			width: 3rem;
    			height: 3rem;
    			opacity: 0;
    
    			background: $color-irma-blue;
    			border-radius: 2px;
    
    			transition: opacity ($transition / 2);
    		}
    	}
    }
    
    input[type='radio'] {
    	& + label, & + .label {
    		&::before, &::after {
    			border-radius: 50%;
    		}
    	}
    }
    
    .checkbox-group {
    	* {
    		&:hover {
    			cursor: pointer;
    		}
    	}
    
    	&.-with-check {
    		input {
    			&:hover, &:focus {
    				& + label, & + .label {
    					&::after {
    						opacity: 0.5;
    					}
    
    					&::before {
    						box-shadow: 0 0 0 1px $color-irma-navy !important;
    					}
    				}
    			}
    
    			&:checked {
    				& + label, & + .label {
    					&::before {
    						box-shadow: 0 0 0 1px $color-irma-navy !important;
    					}
    				}
    			}
    			
    			& + label, & + .label {
    				&::after {
    					content: '\f00c';
    
    					left: -2.5rem;
    
    					display: flex;
    					justify-content: center;
    					align-items: center;
    					width: 4rem;
    					height: 4rem;
    
    					background: transparent !important;
    					color: $color-irma-slate;
    
    					@include font-icon;
    					@include font-size-other(16px);
    				}
    
    				.text {
    					&::before {
    						display: none !important;
    					}
    				}
    			}
    		}
    	}
    }
    
    $validation-position: -4rem;
    
    .form-group {
    	max-width: 155rem;
    	flex-wrap: nowrap;
    	align-items: flex-end;
    
    	&.-full-width {
    		max-width: none;
    	}
    
    	&.-with-button {
    		display: flex;
    
    		.form-field {
    			flex: 1 1 auto;
    		}
    
    		.button-group {
    			margin-top: 0 !important;
    			padding-left: 4rem;
    
    			.btn {
    				min-height: 10rem;
    			}
    		}
    	}
    
    	&:not(:first-child) {
    		margin-top: 7.5rem;
    	}
    
    	&[data-col] {
    		$field-gutter: 4rem;
    
    		width: calc(100% + #{$field-gutter * 2});
    		max-width: 163rem;
    
    		.form-field {
    			padding: 0 $field-gutter;
    
    			&:first-child {
    				margin-left: -#{$field-gutter};
    			}
    
    			&.-valid, &.-invalid {
    				&::after {
    					right: $validation-position + $field-gutter;
    				}
    			}
    
    			.ui-datepicker {
    				right: $field-gutter;
    			}
    		}
    	}
    
    	label {
    		color: rgba($color-irma-slate, 0.7);
    
    		text-transform: uppercase;
    		@include font-primary-bold;
    		@include font-size;
    
    		& + input, & + .input-group, & + .dropdown, & + textarea, & + .compound-field, & + textarea + .cke, & + .form-note, & + .body, & + .table, & + table {
    			margin-top: 3rem;
    		}
    
    		.message {
    			padding-bottom: 2rem;
    
    			@include font-primary-light;
    			font-style: italic;
    			text-transform: none;
    		}
    	}
    
    	.compound-field {
    		display: flex;
    		flex-wrap: wrap;
    		width: 100%;
    		align-items: center;
    
    		& > * {
    			margin-top: 0 !important;
    		}
    
    		& > :not(:first-child) {
    			margin-left: 4rem;
    		}
    
    		.form-field:not(.-fixed-width) {
    			min-width: 50rem;
    			flex: 1 1 auto;
    		}
    
    		.search-box {
    			min-width: 90rem;
    		}
    
    		.toggle-group, .checkbox-group, .radio-group {
    			width: auto;
    		}
    
    		.toggle-group {
    			label {
    				width: 10rem !important;
    				padding: 0 !important;
    			}
    		}
    
    		.checkbox-group, .radio-group {
    			label {
    				width: 5rem !important;
    				padding: 0 !important;
    			}
    		}
    	}
    
    	.form-field {
    		position: relative;
    
    		&.-invalid, &.-valid {
    			&::after {
    				position: absolute;
    				bottom: 5rem;
    				right: $validation-position;
    				transform: translate(50%, 50%);
    
    				display: flex;
    				justify-content: center;
    				align-items: center;
    				width: 4rem;
    				height: 4rem;
    
    				border-radius: 50%;
    				color: white;
    
    				@include font-size-other(10px);
    				@include font-icon;
    			}
    
    			& > label {
    				.message {
    					display: block;
    				}
    			}
    		}
    
    		&.-invalid {
    			&::after {
    				content: '\f00d';
    
    				background-color: $color-irma-danger;
    			}
    
    			input, textarea, select, .dropdown .dropdown-label, .cke {
    				box-shadow: 0 0 0 1px $color-irma-danger;
    				color: $color-irma-danger;
    			}
    
    			& > label {
    				.message {
    					color: $color-irma-danger;
    				}
    			}
    		}
    
    		&.-valid {
    			&::after {
    				content: '\f00c';
    
    				background-color: $color-irma-spearmint;
    			}
    
    			input, textarea, select, .dropdown .dropdown-label, .cke {
    				box-shadow: 0 0 0 1px $color-irma-spearmint;
    				color: $color-irma-spearmint;
    			}
    
    			& > label {
    				.message {
    					color: $color-irma-spearmint;
    				}
    			}
    		}
    
    		&.-readonly {
    			pointer-events: none;
    
    			.dropdown {
    				.dropdown-label {
    					background: $color-irma-readonly;
    				}
    			}
    
    			input {
    				&[type='radio'], &[type='checkbox'] {
    					&:checked { 
    						& + .label {
    							.text {
    								&::before {
    									background: $color-irma-readonly;
    								}
    							}
    						}
    					}
    				}
    			}
    		}
    
    		input:not([hidden]):not([type='checkbox']):not([type='radio']) {
    			display: inline-block;
    			width: 100%;
    		}
    
    		textarea {
    			width: 100%;
    			resize: vertical;
    		}
    
    		.input-group {
    			position: relative;
    		}
    
    		.checkbox-group, .radio-group, .toggle-group {
    			z-index: 1;
    
    			label {
    				position: relative;
    
    				display: block;
    				width: 100%;
    				height: 100%;
    				padding: 2.5rem;
    			}
    
    			& + .checkbox-group {
    				margin-top: 1px;
    			}
    		}
    
    		.radio-group {
    
    		}
    
    		.toggle-group {
    			input[type='checkbox'] {
    				& + .label {
    					&::before {
    						width: 9rem;
    
    						border-radius: 4.5rem;
    
    						transition: all $transition;
    					}
    
    					&::after {
    						left: 3rem;
    
    						border-radius: 50%;
    						background: $color-irma-gray;
    						opacity: 1;
    
    						transition: all $transition;
    					}
    				}
    
    				&:focus, &:hover {
    					cursor: pointer;
    
    					& + .label {
    						&::before {
    							background: $color-irma-mint;
    							opacity: 0.5;
    						}
    
    						&::after {
    							opacity: 1;
    							background: white;
    						}
    					}
    				}
    
    				&:checked {
    					& + .label {
    						&::before {
    							background: $color-irma-mint;
    							box-shadow: 0 0 0 1px $color-irma-mint;
    						}
    
    						&::after {
    							left: 7rem;
    
    							background: white;
    						}
    
    						.text {
    							&::before {
    								background: transparent;
    							}
    						}
    					}
    				}
    			}
    		}
    
    		input[type='checkbox'], input[type='radio'] {
    			& + .label {
    				position: initial;
    
    				&::before {
    					background: white;
    				}
    
    				&::after {
    					background: $color-irma-mint;
    				}
    
    				&::before, &::after {
    					left: 5rem;
    					transform: translate(-50%, -50%);
    				}
    
    				.text {
    					&::before {
    						content: '';
    
    						position: absolute;
    						top: 0;
    						left: 0;
    						z-index: -1;
    
    						display: block;
    						width: 100%;
    						height: 100%;
    
    						border-radius: 0.5rem;
    					}
    				}
    			}
    
    			&:focus, &:hover {
    				& + .label {
    					&::before {
    						box-shadow: 0 0 0 1px $color-irma-mint;
    						opacity: 0.5;
    					}
    
    					&::after {
    						background: $color-irma-mint;
    						opacity: 0.5;
    					}
    
    					.text {
    						&::before {
    							box-shadow: 0 0 0 1px rgba($color-irma-mint, 0.33) inset;
    						}
    					}
    				}
    			}
    
    			&:checked {
    				& + .label {
    					&::before {
    						box-shadow: 0 0 0 1px $color-irma-mint;
    					}
    
    					.text {
    						&::before {
    							background: rgba($color-irma-mint, 0.15);
    						}
    					}
    				}
    			}
    		}
    	}
    }
    
    .form-field {
    	.search-advanced {
    		top: 50%;
    		right: 4rem;
    		transform: translateY(-50%);
    	}
    
    	.search-tags {
    		left: 4rem;
    	}
    }
    
    .date-field {
    	position: relative;
    
    	.date-input {
    		&::placeholder {
    			opacity: 0.7;
    
    			font-style: italic;
    		}
    	}
    
    	.btn-date-picker {
    		position: absolute;
    		right: 0;
    		top: 0;
    
    		width: 10rem;
    		height: 10rem;
    
    		border: {
    			top-right-radius: 0.5rem;
    			bottom-right-radius: 0.5rem;
    		}
    		border-left: 1px solid $color-irma-border;
    		color: $color-irma-navy;
    
    		text-align: center;
    
    		&::after {
    			content: '\f073';
    
    			line-height: 10rem;
    			@include font-size-other(14px);
    			@include font-icon;
    		}
    
    		&:hover, &:focus, &.-active {
    			background: $color-irma-navy;
    			color: white; 
    		}
    	}
    }
    
    .submit-group {
    	display: flex;
    	width: 100%;
    	justify-content: flex-end;
    	align-items: center;
    	padding-top: 6rem;
    
    	border-top: 1px solid $color-irma-silver;
    
    	&:not(:first-child) {
    		margin-top: 10rem;
    	}
    
    	&.-align-left {
    		justify-content: flex-start;
    	}
    
    	& > * {
    		&:not(:first-child) {
    			margin-left: 4rem;
    		}
    	}
    }
    
    .form-heading {
    	min-height: 12rem;
    	padding-bottom: 2.5rem;
    
    	border-bottom: 1px solid $color-irma-silver;
    
    	h3 {
    		& + h4 {
    			margin-top: 7.5rem;
    		}
    	}
    
    	h4 {
    		text-transform: uppercase;
    	}
    }
    
    .form-subheading {
    	display: flex;
    	width: 100%;
    	justify-content: space-between;
    	padding-bottom: 2rem;
    
    	border-bottom: 1px solid $color-irma-silver;
    
    	text-transform: uppercase;
    
    	&:not(:first-child) {
    		margin-top: 10rem;
    	}
    }
    
    .heading-links {
    	display: flex;
    	align-items: center;
    
    	* {
    		&:not(:first-child) {
    			margin-left: 4rem;
    		}
    	}
    
    	.label {
    		color: rgba($color-irma-slate, 0.7);
    
    		@include font-primary-bold;
    	}
    
    	.link {
    		&:not(:last-child) {
    			margin-right: 4rem;
    
    			&::before {
    				content: '';
    
    				position: absolute;
    				right: -4rem;
    				top: 50%;
    				transform: translateY(-50%);
    
    				display: block;
    				width: 1px;
    				height: 5rem;
    
    				background: $color-irma-silver;
    			}
    		}
    	}
    }
    
    .file-field {
    	&.-with-file {
    		border: 0;
    		background: rgba($color-irma-mint, 0.15);
    
    		pointer-events: none;
    
    		&::before {
    			content: '\f15b';
    
    			color: $color-irma-navy;
    		}
    
    		.link {
    			color: $color-irma-navy;
    		}
    	}
    }
    
    // .form-note {
    // 	&.alert {
    // 		margin-top: 0;
    // 	}
    // }
  • URL: /components/raw/form/_form.scss
  • Filesystem Path: components/01-components/form/_form.scss
  • Size: 11.2 KB
  • Content:
    /* 
     *	_code-lookup.js
     */
    
    irma.codeLookup = (function () {
    	'use strict';
    
    	var advancedPageLength = 25,
    		lookupSource,
    		codeTree,
    		$currentRow;
    
    	var openLookup = function ($btn) {
    		lookupSource = $btn.closest('.table').data().lookupSource;
    
    		var tree = irma.storage.get('codeTree') || {};
    		codeTree = tree[lookupSource];
    
    		$('.advanced-search-results').empty().addClass('-loading')
    			.closest('.modal-slider').removeClass('-slid')
    			.find('.code-lookup-input').val('');
    
    		$('.browse-tree').scrollTop(0);
    		
    		if (typeof(codeTree) !== 'undefined' && codeTree !== null && typeof(codeTree.codes) !== 'undefined') {
    			initLookup($btn);
    		}
    		else {
    			getTree($btn);
    		}
    	};
    
    	var browseTo = function ($btn) {
    		var code = $btn.data().code.toString(),
    			$modal = $btn.closest('.modal'),
    			$browseCode = $('#browse-code-' + code),
    			scrollTop;
    
    		$modal.find('.modal-browse .accordion').addClass('-collapsed');
    
    		$browseCode.removeClass('-collapsed');
    		$browseCode.parents('.accordion').removeClass('-collapsed');
    		$('.browse-tree').scrollTop(0);
    
    		setTimeout(function () {
    			scrollTop = $browseCode.position().top;
    			$('.browse-tree').animate({
    				'scrollTop': '' + scrollTop + 'px'
    			}, 300);
    		}, 500);
    	};
    
    	var getTree = function ($btn) {
    		var url = irma.baseURL + 'getMyCode.asp?' + irma.urlParams + '&lookupSource=' + lookupSource + '&lookupCode=tree';
    
    		$('.browse-tree').addClass('-loading');
    
    		$.ajax({
    			url: url
    		}).done(function (results) {
    
    			sortTree(results.codes, $btn);
    
    		}).fail(function (jqXHR, textStatus) {
    			irma.logger.postLog(textStatus, url);
    		});
    	};
    
    	var sortTree = function (res, $btn) {
    		var codes = {},
    			categories = {};
    
    		_.forEach(res, function (code, i) {
    			var levelName = "level";
    			levelName += code.level == 1 ? "One" : code.level == 2 ? "Two" : "Three";
    			levelName += "Code";
    
    			var c = {
    				level: code.level,
    				code: code[levelName],
    				description: code[[levelName + "Description"]].toTitleCase()
    			};
    
    			codes[code[levelName]] = c;
    
    			if (c.level == 1) {
    				if (categories[c.code]) {
    					categories[c.code].level = c.level;
    					categories[c.code].code = c.code;
    					categories[c.code].description = c.description;
    				}
    				else {
    					categories[c.code] = c;
    					categories[c.code].subcategories = {};
    				}
    			}
    			else if (c.level == 2) {
    				if (categories[code.levelOneCode]) {
    					if (categories[code.levelOneCode].subcategories[c.code]) {
    						categories[code.levelOneCode].subcategories[c.code].level = c.level;
    						categories[code.levelOneCode].subcategories[c.code].code = c.code;
    						categories[code.levelOneCode].subcategories[c.code].description = c.description;
    					}
    					else {
    						categories[code.levelOneCode].subcategories[c.code] = c;
    						categories[code.levelOneCode].subcategories[c.code].codes = {};
    					}
    				}
    				else {
    					categories[code.levelOneCode] = {
    						subcategories: {}
    					};
    					categories[code.levelOneCode].subcategories[c.code] = c;
    					categories[code.levelOneCode].subcategories[c.code].codes = {};
    				}
    			}
    			else {
    				if (categories[code.levelOneCode]) {
    					if (categories[code.levelOneCode].subcategories[code.levelTwoCode]) {
    						categories[code.levelOneCode].subcategories[code.levelTwoCode].codes[c.code] = c;
    					}
    					else {
    						categories[code.levelOneCode].subcategories[code.levelTwoCode] = {
    							codes: {}
    						};
    						categories[code.levelOneCode].subcategories[code.levelTwoCode].codes[c.code] = c;
    					}
    				}
    				else {
    					categories[code.levelOneCode] = {
    						subcategories: {}
    					};
    					categories[code.levelOneCode].subcategories[code.levelTwoCode] = {
    						codes: {}
    					};
    					categories[code.levelOneCode].subcategories[code.levelTwoCode].codes[c.code] = c;
    				}
    			}
    		});
    
    		codeTree = {
    			codes: codes,
    			categories: _.sortBy(categories, 'code')
    		};
    
    		var tree = irma.storage.get('codeTree') || {};
    		tree[lookupSource] = codeTree;
    
    		irma.storage.set('codeTree', tree);
    
    		initLookup($btn);
    	};
    
    	var renderTree = function () {
    		$.get(irma.assetPath + '/templates/search-results/search-results--browse.hbs?v=' + irma.templateVersion, function (template) {
    			var templateScript = Handlebars.compile(template);
    
    			var html = templateScript({ categories: codeTree.categories });
    
    			$('.modal-code-lookup .modal-browse .browse-tree').removeClass('-loading').html(html);
    		});
    	};
    
    	var initLookup = function ($btn) {
    		renderTree();
    
    		$currentRow = $btn.closest('.table-row');
    
    		var $row = $btn.closest('.table-row'),
    			data = {
    				code: $row.find('[data-lookup=\'code\']').val(),
    				description: $row.find('[data-lookup=\'description\']').val(),
    				level: $row.find('[data-lookup=\'level\']').val()
    			},
    			name = 'code';
    
    		if (data.code.length === 0) {
    			if (data.description.length > 0) {
    				name = 'description';
    			}
    			else {
    				name = '';
    			}
    		}
    
    		var $dropdown = $('.modal-code-lookup .code-lookup-select'),
    			$input = $('.modal-code-lookup .code-lookup-input'),
    			$dropdownItem = $dropdown.find('.dropdown-item').filter(function () {
    				var value = name.length > 0 ? name : 'code';
    				return $(this).data().value == value;
    			});
    
    		$dropdownItem.trigger('click');
    		$dropdown.data('open', false)
    			.removeClass('-active')
    			.find('.dropdown-options').attr('aria-hidden', true);
    		$dropdown.find('.dropdown-item').removeClass('-selected');
    
    		var placeholder = name == 'code' || name === '' ? 'Enter 2, 4, or 6 digits' : 'Enter keyword(s)';
    
    		$input.attr('placeholder', placeholder);
    
    		var level = $currentRow.find('[data-lookup=\'level\']').val();
    
    		$('.code-level-select .dropdown-label .text').text(level);
    
    		if (name.length > 0) {
    			$('.code-lookup-input').val(data[name]);
    
    			runLookup(name, data[name], data.level);
    		}
    		else {
    			$('.advanced-search-results').removeClass('-loading');
    		}
    	};
    
    	var runLookup = function (name, value, level) {
    		var lookupName = name.replace(/^./, function ($1) { 
    				return $1.toUpperCase();
    			}),
    			url = irma.baseURL + 'getMyCode.asp?' + irma.urlParams + '&lookupSource=' + lookupSource + '&lookup' + lookupName + '=' + value;
    
    		if (name == 'description') {
    			url += '&lookupDescriptionLevel=' + level;
    		}
    
    		$.ajax({
    			url: url
    		}).done(function (results) {
    
    			sortCodes(results.codes, { name: name, value: value }, results.status);
    
    		}).fail(function (jqXHR, textStatus) {
    			irma.logger.postLog(textStatus, url);
    
    			sortCodes([], data, 'failed');
    		});
    	};
    
    	var sortCodes = function (codes, data, status) {
    		var results = [],
    			noResults = false,
    			columns = [
    				{
    					name: "levelThreeCode",
    					title: "Code",
    					width: "10"
    				},
    				{
    					name: "levelThreeCodeDescription",
    					title: "Description",
    					width: "30"
    				},
    				{
    					name: "levelOneDescription",
    					title: "Category",
    					width: "30",
    					action: {
    						name: "browse",
    						icon: "list"
    					}
    				},
    				{
    					name: "levelTwoDescription",
    					title: "Subcategory",
    					width: "30",
    					action: {
    						name: "browse",
    						icon: "list"
    					}
    				}
    			];
    
    		if (status == 'failed' || status == 'no matching records') {
    			noResults = true;
    		}
    		else {
    			_.forEach(codes, function (result, i) {
    				var r = { columns: [] },
    					code = '';
    
    				_.forEach(columns, function (column, j) {
    					var value = 'n/a';
    
    					if (result[column.name]) {
    						value = result[column.name].toTitleCase();
    					}
    
    					if (column.name.indexOf('levelOne') > -1 && result.levelOneCode) {
    						code = result.levelOneCode;
    					}
    					else if (column.name.indexOf('levelTwo') > -1 && result.levelTwoCode) {
    						code = result.levelTwoCode;
    					}
    
    					r.columns[j] = {
    						value: value
    					};
    					
    					_.forEach(column, function (value, key) {
    						r.columns[j][key] = value;
    					});
    
    					if (code.length) {
    						r.columns[j].code = code;
    					}
    				});
    
    				r.data = {
    					code: result.levelThreeCode,
    					description: result.levelThreeCodeDescription.toTitleCase()
    				};
    
    				if (result.levelThreeCodeDescription == result.levelOneDescription) {
    					for (var k = 2; k <= 3; k++) {		
    						r.columns[k].value = '';
    						r.columns[k].action = null;
    					}
    				}
    				else if (result.levelThreeCodeDescription == result.levelTwoDescription) {
    					r.columns[3].value = '';
    					r.columns[3].action = null;
    				}
    
    				results.push(r);
    			});
    		}
    
    		var context = {
    			columns: columns,
    			rowClass: "table-link js-use-code js-modal-exit",
    			results: results,
    			noResults: noResults,
    			data: {
    				scope: data.advanced,
    				filter: data.name,
    				"search-type": "advanced",
    				parent: data.parent,
    				module: data.module
    			}
    		};
    
    		showRecords(context);
    	};
    
    	var showRecords = function (context) {
    		$.get(irma.assetPath + '/templates/search-results/search-results--code.hbs?v=' + irma.templateVersion, function (template) {
    			var templateScript = Handlebars.compile(template);
    
    			var html = templateScript(context);
    
    			$('.advanced-search-results').removeClass('-loading').html(html);
    		});
    	};
    
    // ******* INIT ******* //
    
    	var init = function () {
    		$(document).on('click', '.js-run-code-lookup', function () {
    			openLookup($(this));
    
    		}).on('keypress', '[data-lookup]', function (e) {
    			if (e.which == 13) {
    				$(this).closest('.table-row').find('.js-run-code-lookup').trigger('click');
    			}
    
    		}).on('click', '.js-update-code-lookup', function () {
    			var $form = $(this).closest('.modal-advanced-form'),
    				name = $form.find('.code-lookup-select .dropdown-label .text').text().toLowerCase(),
    				value = $form.find('.code-lookup-input').val(),
    				level = $form.find('.code-level-select .dropdown-label .text').text();
    
    			$('.advanced-search-results').addClass('-loading');
    
    			runLookup(name, value, level);
    
    		}).on('keypress', '.js-code-lookup-input', function (e) {
    			if (e.which == 13) {
    				var $form = $(this).closest('.modal-advanced-form'),
    					name = $form.find('.code-lookup-select .dropdown-label .text').text().toLowerCase(),
    					value = $form.find('.code-lookup-input').val(),
    					level = $form.find('.code-level-select .dropdown-label .text').text();
    
    				$('.advanced-search-results').addClass('-loading');
    
    				runLookup(name, value, level);
    			}
    
    		}).on('click', '.js-toggle-browse-code, .js-action-browse', function () {
    			$(this).closest('.modal-slider').toggleClass('-slid');
    
    		}).on('click', '.js-action-browse', function () {
    			browseTo($(this));
    
    		}).on('click', '.js-use-code', function () {
    			var data = $(this).data();
    
    			$currentRow.find('[data-lookup=\'code\']').val(data.code);
    			$currentRow.find('[data-lookup=\'description\']').val(data.description);
    
    		}).on('click', '.code-lookup-select .dropdown-item', function () {
    			var name = $(this).text().toLowerCase(),
    				placeholder = name == 'code' || name === '' ? 'Enter 2, 4, or 6 digits' : 'Enter keyword(s)',
    				$level = $('.code-level-group');
    
    			$('.code-lookup-input').attr('placeholder', placeholder);
    
    			if (name == 'description') {
    				$level.show();
    			}
    			else {
    				$level.hide();
    			}
    
    		});
    	};
    
    	return {
    		init: init
    	};
    
    }());
  • URL: /components/raw/form/code-lookup.js
  • Filesystem Path: components/01-components/form/code-lookup.js
  • Size: 11.1 KB
  • Content:
    /* 
     *	_form.js
     */
    
    irma.form = (function () {
    	'use strict';
    
    	var dayNames = [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],
    		advancedPageLength = 25,
    		currentData;
    
    	var getRecentSearch = function () {
    		var recentSearches = irma.storage.get('recentSearches') || {},
    			page = recentSearches[irma.pageId] || {};
    
    		return page;
    	};
    
    	var setRecentSearch = function (search) {
    		var recentSearches = irma.storage.get('recentSearches') || {},
    			page = recentSearches[irma.pageId] || {};
    
    		_.forEach(search, function (value, key) {
    			page[key] = value;
    		});
    		recentSearches[irma.pageId] = page;
    		irma.storage.set('recentSearches', recentSearches);
    	};
    
    	var setDate = function ($field) {
    		$field.closest('.js-auto-save').data({ changed: true });
    		
    		$field.find('.js-date-picker').removeClass('-active');
    
    		var date = moment($field.find('.date-input').val(), "DD/MM/YYYY").format('YYYY-MM-DDT00:00:00100:00');
    		date = date == "Invalid date" ? "" : date;
    
    		$field.find('input[hidden]').val(date);
    	};
    
    	var showRecords = function (context) {
    		setRecentSearch({ index: context.index });
    
    		$.get(irma.assetPath + '/templates/search-results/' + context.template + '.hbs?v=' + irma.templateVersion, function (template) {
    			var templateScript = Handlebars.compile(template);
    
    			var html = templateScript(context);
    
    			var $scope = $(context.scope);
    
    			$scope.removeClass('-loading').html(html);
    			MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
    
    			paginate(context);
    
    			if (irma.newSearch) {
    				irma.newSearch = false;
    
    				if (context.toggle) {
    					irma.searchPanel.toggleSearch(true);
    				}
    			}
    		});
    	};
    
    // ******* ADVANCED LOOKUP RESULTS ******* //
    
    	var validateInput = function ($input) {
    
    		var $field = $input.closest('.form-field'),
    			invalid = false;
    
    		var minLength = $field.attr('data-min-length') ? parseInt($field.attr('data-min-length')) : 1;
    
    		if ($input.val().length < minLength) {
    			$field.addClass('-invalid');
    			invalid = true;
    		}
    		else {
    			$field.removeClass('-invalid');
    		}
    
    		return invalid;
    	};
    
    	var advancedLookup = function (data, term) {
    		buildCriteria(data, term);
    
    		currentData = data;
    
    		var $required = $('.advanced-search-field[data-required]'),
    			invalid = false;
    
    		$required.each(function () {
    			invalid = validateInput($(this).find('input'));
    		});
    
    		if (invalid) {
    		}
    		else {
    			$('.modal-advanced-search .advanced-search-results').empty().addClass('-loading');
    
    			runAdvancedLookup(data, "&SearchName=" + data.advanced + "&SearchValue=" + term);
    		}
    
    		setTimeout(function () {
    			$('.modal-advanced-search').find('input').eq(0).focus();
    		}, 100);
    	};
    
    	var updateAdvancedLookup = function ($input) {
    		var $form = $input.closest('.advanced-search-form'),
    			$inputs = $form.find("input").filter(function (i) {
    				return $(this).val().length > 0;
    			});
    
    		var $required = $form.find('.advanced-search-field[data-required]'),
    			invalid = false;
    
    		$required.each(function () {
    			invalid = validateInput($(this).find('input'));
    		});
    
    		if (invalid) {
    		}
    		else {
    			var searchString = "&SearchName=" + currentData.advanced + "&" + $inputs.serialize();
    
    			runAdvancedLookup(currentData, searchString);
    		}
    	};
    
    	var runAdvancedLookup = function (data, searchString) {
    		var url = irma.baseURL + "getSearchResults.asp?" + irma.urlParams + searchString;
    
    		var $results = $('.modal.-active .advanced-search-results');
    		$results.empty().addClass('-loading');
    
    		$.ajax({
    			url: url
    		}).done(function (results) {
    
    			sortAdvancedRecords(results.data, data, results.status);
    
    		}).fail(function (jqXHR, textStatus) {
    			irma.logger.postLog(textStatus, url);
    
    			sortAdvancedRecords([], data, 'failed');
    		}).always(function () {
    			$results.removeClass('-loading');
    		});
    	};
    
    	var sortAdvancedRecords = function (res, data, status) {
    		var results = [], pages = [],
    			noResults = false;
    
    		if (status == 'failed' || status == 'no matching records') {
    			noResults = true;
    		}
    		else {
    			_.forEach(res, function (result, i) {
    				var r = { columns: [] };
    
    				_.forEach(data.columns, function (column, j) {
    					var value = result[column.name] ? result[column.name] : "n/a";
    
    					r.columns[j] = {
    						value: value
    					};
    					
    					_.forEach(column, function (value, key) {
    						r.columns[j][key] = value;
    					});
    				});
    
    				var display = data.returnDisplay || '$chrSurname, $chrFirstName';
    				var returnDisplay = display.replace(/\$(\w+)/g, function (match, p1) {
    					return result[p1];
    				});
    
    				r.data = {
    					return: result[data.return],
    					"return-display": returnDisplay,
    					"custom-modal-search-value": data.customModalSearchValue
    				};
    
    				results.push(r);
    			});
    
    			for (var i = 0; i < Math.ceil(results.length / advancedPageLength); i++) {
    				pages[i] = results.slice(i * advancedPageLength, (i + 1) * advancedPageLength);
    				pages[i].number = i + 1;
    			}
    		}
    
    		var totalResults = results.length,
    			totalColumns = data.columns.length * 2,
    			range;
    
    		if (totalResults > 0) {
    			range = "1 - " + (pages[0].length).toString();
    		}
    
    		if (data.actions) {
    			totalColumns++;
    		}
    
    		var context = {
    			totalColumns: totalColumns,
    			columns: data.columns,
    			rowClass: "table-link " + data.rowClass,
    			actions: data.actions,
    			actionsTitle: "Info",
    			pages: pages,
    			range: range,
    			index: 0,
    			noResults: noResults,
    			currentPage: pages[0],
    			totalResults: totalResults,
    			title: data.title,
    			pageLength: advancedPageLength,
    			data: {
    				scope: data.advanced,
    				filter: data.name,
    				"search-type": "advanced",
    				parent: data.parent,
    				create: data.create,
    				module: data.module
    			},
    			template: "search-results--lookup",
    			scope: '.advanced-search-results'
    		};
    
    		irma.records.advanced = context;
    
    		showRecords(irma.records.advanced);
    	};
    
    // ******* ADVANCED SEARCH FORM ******* //
    
    	var buildCriteria = function (data, term) {
    		var $form = $('.modal-advanced-search .advanced-search-form'),
    			$criteria = {
    				checkbox: $form.find('.advanced-search-criteria .criteria-checkbox'),
    				text: $form.find('.criteria-text'),
    				dropdown: $form.find('.advanced-search-criteria .criteria-dropdown')
    			};
    
    		_.forEach($criteria, function ($crit, i) {
    			$crit.empty();
    		});
    
    		$form.find('.advanced-search-field label').attr('for', 'searchValue').text(data.advancedCrit).addClass('advanced-search-label');
    		$form.find('.advanced-search-field input').val(term);
    
    		if (_.find(data.options, ['type', 'checkbox'])) {
    			var additional = $('<label>Other Criteria</label>').attr({
    				'data-flex': '1'
    			}).addClass('advanced-search-label');
    			var checkboxes = $('<div></div>').addClass('checkbox-list').attr({
    				'data-flex': '6',
    				'data-col': '5'
    			});
    
    			$criteria.checkbox.append(additional).append(checkboxes);
    		}
    
    		if (_.find(data.options, ['type', 'text'])) {
    			$criteria.text.show();
    		}
    		else {
    			$criteria.text.hide();
    		}
    
    		if (_.find(data.options, ['type', 'dropdown'])) {
    			$criteria.dropdown.show();
    		}
    		else {
    			$criteria.dropdown.hide();
    		}
    
    		_.forEach(data.options, function (option, i) {
    			var label = $('<label>' + option.title + '</label>').attr({
    					'data-flex': '1'
    				}),
    				criterion;
    
    			if (option.type == 'checkbox') {
    				var checkbox = $('<input>').attr({
    					type: 'checkbox',
    					name: option.name
    				}).val('true').addClass('advanced-search-input');
    
    				criterion = $('<div>').attr({
    					// 'data-flex': '1'
    				}).addClass('checkbox-item');
    
    				criterion.append(checkbox).append(label);
    
    				$criteria.checkbox.find('.checkbox-list').append(criterion);
    			}
    			else if (option.type == 'dropdown') {
    				$.get(irma.assetPath + '/templates/dropdown/dropdown.hbs?v=' + irma.templateVersion, function (template) {
    					var templateScript = Handlebars.compile(template),
    						context = {
    							title: option.title,
    							name: option.name,
    							options: option.list
    						};
    
    					var html = templateScript(context);
    
    					$criteria.dropdown.html(html)
    						.prepend(label.addClass('advanced-search-label'))
    						.find('.dropdown').attr('data-flex', '5')
    						.find('input').addClass('advanced-search-input');
    				});
    			}
    			else if (option.type == 'text') {
    				criterion = $('<input>').attr({
    					'name': option.name,
    					'data-flex': '2'
    				}).addClass('advanced-search-input');
    
    				$criteria.text.append(label.attr('data-flex', '2').addClass('advanced-search-label')).append(criterion).prepend($('<div />').attr('data-flex', '2'));
    			}
    		});
    
    		$form.find('.btn-create-record')
    			.toggle(data.hasOwnProperty('create') && (data.create > 0 || data.create.length > 0))
    			.data({
    				create: data.create,
    				parent: data.parent,
    				module: data.module
    			});
    	};
    
    // ******* ADVANCED SEARCH TAG ******* //
    
    	var addTag = function (label, display, input) {
    		var $searchBox = $('.search-box').filter(function () {
    				return $(this).attr('data-name') == label;
    			});
    
    		$.get(irma.assetPath + '/templates/search-tag/search-tag.hbs?v=' + irma.templateVersion, function (template) {
    			var templateScript = Handlebars.compile(template),
    				context = {
    					label: label,
    					display: display,
    					input: input
    				};
    
    			var html = templateScript(context);
    
    			$searchBox.addClass('-tagged')
    				.find('.search-box-input').val('');
    			$searchBox.find('.search-tags').html(html);
    		});
    	};
    
    	var removeTag = function ($tag) {
    		if ($tag.closest('.search-tags').find('.tag-item').length == 1) {
    			$tag.closest('.search-box').removeClass('-tagged');
    		}
    
    		$tag.closest('.tag-item').remove();
    	};
    
    // ******* PAGINATION ******* //
    
    	var paginate = function (context) {
    		var $scope = $(context.scope),
    			$pagination = $scope.find('.results-pagination li'),
    			$nav = $scope.find('.results-pagination .pagination-item');
    
    		$pagination.removeClass('-active').find('.btn').removeAttr('tabindex');
    		$pagination.eq(context.index).addClass('-active').removeClass('-ellipsis')
    			.find('.btn').attr('tabindex', '-1');
    
    		if (context.index === 0) {
    			$nav.eq(0).hide();
    		}
    		else {
    			$nav.eq(0).show();
    		}
    
    		if (context.index === context.pages.length - 1) {
    			$nav.eq(1).hide();
    		}
    		else {
    			$nav.eq(1).show();
    		}
    
    		if (context.pages.length > 10) {
    			if (context.index < 4) {
    				$pagination.addClass('-hidden')
    					.find('.btn').attr('tabindex', -1);
    				$pagination.slice(0, 9).removeClass('-hidden')
    					.find('.btn').removeAttr('tabindex');
    			}
    			else if (context.index >= context.pages.length - 4) {
    				$pagination.addClass('-hidden').attr('tabindex', -1)
    					.find('.btn').attr('tabindex', -1);
    				$pagination.slice(context.pages.length - 9, context.pages.length).removeClass('-hidden')
    					.find('.btn').removeAttr('tabindex');
    			}
    			else {
    				$pagination.addClass('-hidden')
    					.find('.btn').attr('tabindex', -1);
    				$pagination.slice(context.index - 4, context.index + 5).removeClass('-hidden')
    					.find('.btn').removeAttr('tabindex');
    			}
    
    			if (context.index >= 5) {
    				$pagination.eq(0).removeClass('-hidden')
    					.find('.btn').removeAttr('tabindex');
    
    				if (context.index >= 6) {
    					$pagination.eq(0).addClass('-ellipsis');
    				}
    			}
    
    			if (context.index < context.pages.length - 5) {
    				$pagination.eq(context.pages.length - 1).removeClass('-hidden')
    					.find('.btn').removeAttr('tabindex');
    
    				if (context.index < context.pages.length - 6) {
    					$pagination.eq(context.pages.length - 1).addClass('-ellipsis');
    				}
    			}
    		}
    	};
    
    	var pageNav = function ($scope, recordName, callback) {
    		if (recordName == 'main') {
    			if ($scope.is('.pagination-item')) {
    				irma.records.main.index += ($scope.index() * 2 - 1);
    			}
    			else {
    				irma.records.main.index = $scope.closest('li').index();
    			}
    			var currentSearch = irma.searchPanel.getCurrentSearch();
    			irma.searchPanel.submitSearch(currentSearch.$inputs, currentSearch.data);
    		}
    		else {
    			var page,
    				context = irma.records[recordName];
    
    			if ($scope.is('.pagination-item')) {
    				page = context.index + ($scope.index() * 2 - 1);
    			}
    			else {
    				page = $scope.closest('li').index();
    			}
    
    			context.index = page;
    			context.currentPage = context.pages[page];
    
    			var range = [
    					 page * context.pageLength + 1,
    					 (page + 1) * context.pageLength
    				];
    			if (context.currentPage.length < context.pageLength) {
    				range[1] = range[0] + context.currentPage.length - 1;
    			}
    
    			context.range = "" + range[0] + " - " + range[1] + "";
    
    			callback(context);
    		}
    	};
    
    // ******* INIT ******* //
    
    	var init = function () {
    		$('.date-input').each(function () {
    			$(this).datepicker({
    				showOn: "button"
    			});
    		});
    
    		$('.form-field.-readonly')
    			.find(':input, button, .btn, a, [tabindex]')
    			.attr('tabindex', '-1');
    
    	// ck editor 
    	
    		$('.js-wysiwyg').each(function () {
    			var options = {};
    
    			if ($(this).data().toolbar) {
    				options.toolbar = $(this).data().toolbar;
    			}
    
    			CKEDITOR.timestamp = irma.templateVersion;
    
    			CKEDITOR.replace($(this).attr('id'), options);
    		});
    
    	// date picker
    
    		$('.date-input').each(function () {
    			$(this)
    				.datepicker('option', 'dayNamesMin', dayNames)
    				.datepicker('option', 'defaultDate', $(this).attr('data-initial-value'))
    				.datepicker('option', 'dateFormat', 'dd/mm/yy')
    				.datepicker('option', 'showOtherMonths', true);
    
    				$(this).val($(this).attr('data-initial-value'))
    					.removeAttr('data-initial-value');
    
    				setDate($(this).closest('.date-field'));
    		});
    
    		$(document).on('keyup change paste', 'input.date-input', function (e) {
    			var value = $(this).val();
    
    			if (e.which != 8) {
    				var digits = value.replace(/\D+/g, ''),
    					date = digits.substr(0, 2);
    
    				if (digits.length > 1) date += '/';
    				if (digits.length > 2) date += digits.substr(2, 2);
    				if (digits.length > 3) date += '/';
    				if (digits.length > 4) date += digits.substr(4, 4);
    
    				$(this).val(date);
    
    				setDate($(this).closest('.date-field'));
    			}
    
    			if (/^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/.test(value)) {
    				setDate($(this).closest('.date-field'));
    			}
    
    		}).on('click', '.js-date-picker', function (e) {
    			e.stopPropagation();
    
    			var $input = $(this).siblings('.date-input');
    
    			var $field = $(this).closest('.date-field');
    
    			$(this).toggleClass('-active').blur();
    
    			if ($(this).is('.-active')) {
    				$input.datepicker();
    				$input
    					.datepicker('option', 'dayNamesMin', dayNames)
    					.datepicker('option', 'defaultDate', $input.attr('data-initial-value'))
    					.datepicker('option', 'dateFormat', 'dd/mm/yy')
    					.datepicker('option', 'showOtherMonths', true)
    					.datepicker('option', 'onClose', function () {
    						setDate($field);
    					})
    					.datepicker('option', 'showOn', 'button')
    					.datepicker('show');
    
    				$('.ui-datepicker').appendTo($field).removeAttr('style').show();
    			}
    			else {
    				$(this).siblings('.date-input').datepicker('hide');
    			}
    
    		}).on('click', '.site-container', function () {
    			$('.date-input').datepicker('hide');
    
    			$('.js-date-picker').removeClass('-active');
    
    		});
    
    	// advanced lookup
    
    		// add pre-defined search tags
    
    		$('.search-box[data-prefill-value]').each(function () {
    			var data = $(this).data();
    			var value = data.prefillValue;
    			var display = data.prefillDisplay;
    			var name = data.name;
    
    			addTag(name, display, value);
    		});
    
    		// ---------
    
    		$(document).on('click', '.js-advanced-search', function () {
    			var term = $(this).closest('.search-box').find('.search-box-input').val(),
    				$searchBox = $(this).closest('.search-box'),
    				data = $searchBox.data();
    
    			if (!data.name) {
    				data.name = $searchBox.find('input').attr('name');
    			}
    
    			if (term.length === 0) {
    				term = $(this).closest('.search-box').find('.tag-item .text').text().split(', ')[0];
    			}
    
    			data.rowClass = data.hasOwnProperty('rowClass') ? data.rowClass : "js-add-tag";
    
    			advancedLookup(data, term);
    
    		}).on('keypress', '.js-advanced-search-input', function (e) {
    			if (e.which == 13) {
    				e.preventDefault();
    
    				var term = $(this).val(),
    					$searchBox = $(this).closest('.search-box'),
    					data = $searchBox.data();
    
    				if (!data.name) {
    					data.name = $searchBox.find('input').attr('name');
    				}
    
    				data.rowClass = data.hasOwnProperty('rowClass') ? data.rowClass : "js-add-tag";
    
    				advancedLookup(data, term);
    			}
    
    		}).on('click', '.js-table-lookup', function () {
    			var $row = $(this).closest('.table-row'),
    				$table = $(this).closest('.table');
    
    			currentData = $row.data();
    			currentData.columns = $table.data().columns;
    			currentData.title = $table.data().title;
    			if ($table.data().actions) {
    				currentData.actions = $table.data().actions;
    			}
    			currentData.rowClass = "js-update-row";
    
    			$table.find('.table-row').removeClass('-active');
    			$row.addClass('-active');
    
    			setTimeout(function () {
    				$('.modal-advanced-search').find('input').eq(0).focus();
    			}, 100);
    
    		}).on('click', ".advanced-search-form input[type='checkbox'], .js-btn-update-advanced", function () {
    			updateAdvancedLookup($(this));
    
    		}).on('keypress', '.advanced-search-form input', function (e) {
    			if (e.which == 13) {
    				e.preventDefault();
    
    				updateAdvancedLookup($(this));
    			}
    
    		}).on('change keyup', '.modal .form-field input', function () {
    			if ($(this).closest('.form-field').is('[data-required]')) {
    				var invalid = validateInput($(this));
    			}
    
    		}).on('click', '.results-pagination .btn', function () {
    			pageNav($(this), $(this).closest('.search-results').attr('data-search-type'), showRecords);
    
    		}).on('click', '.js-add-tag', function () {
    			var id = $(this).attr('data-return'),
    				name = $(this).attr('data-return-display'),
    				label = $(this).closest('.search-results').attr('data-filter');
    
    			if (id && id.length) {
    				addTag(label, name, id);
    
    				$(this).closest('.js-modal').find('.js-modal-exit').eq(0).trigger('click');
    			}
    
    		}).on('click', '.js-remove-tag', function () {
    			removeTag($(this));
    
    		}).on('click', '.js-update-row', function () {
    			var $dataCells = $(this).find('.table-cell'),
    				$tableCells = $('.table-row.-active .table-cell');
    
    			$dataCells.each(function (i) {
    				var data = {
    					name: $(this).attr('data-search-attr'),
    					value: $(this).find('.text').text()
    				};
    
    				$tableCells.each(function () {
    					if (data.name == $(this).attr('data-name')) {
    						$(this).find('input').val(data.value);
    					}
    				});
    			});
    
    			irma.modal.closeModal();
    		});
    
    		$(document).on('keydown', '.btn, [role=\'button\']', function (e) {
    			if (e.which == 13 || e.which == 32) {
    				e.preventDefault();
    				e.stopPropagation();
    
    				$(this).trigger('click');
    			}
    		}).on('click', '.btn:not(.js-dropdown), [role=\'button\']:not(.js-dropdown)', function (e) {
    			if (!$(this).is('.js-tooltip-help')) {
    				$(this).blur();
    			}
    
    		}).on('click', "input[type='checkbox']", function () {
    			$(this).blur();
    
    		}).on('keyup', "input[type='radio']", function (e) {
    			e.preventDefault();
    
    			if (e.which == 13 || e.which == 32) {
    				$(this).trigger('click');
    			}
    		});
    
    		// compound field 
    
    		var $forms = $('form').filter(function () {
    			return $(this).find('.compound-field').length;
    		});
    
    		$forms.on('submit', function (e) {
    
    			var $form = $(this);
    
    			var $inputs = $form.find('input[name]').filter(function () {
    				var $field = $(this).closest('.compound-field');
    				return $field.length & $field.find("input[type='checkbox']").length;
    			});
    
    			$inputs.each(function () {
    				var $checkbox = $(this).closest('.compound-field').find("input[type='checkbox']");
    
    				if ($checkbox[0].checked) {
    					$(this).attr('name', $(this).data().name);
    				}
    				else {
    					$(this).data({ name: $(this).attr('name') })
    					.removeAttr('name');
    				}
    			});
    		});
    
    		// ckeditor
    
    		$(document).on('click', '.cke_dialog_background_cover', function () {
    			CKEDITOR.dialog.getCurrent().hide();
    
    		});
    
    		// modal input 
    
    		var updateInput = function (id, value) {
    			console.log('#' + id, $('#' + id));
    			$('#' + id).val(value);
    		};
    
    		$(document).on('click', '.js-edit-input', function () {
    			var $modal = $('.modal-input');
    			var data = $(this).data();
    			var text = $('#' + data.id).val();
    			$modal.data(data);
    			$modal.find('.js-label').text(data.label);
    			$modal.find('.js-update-input-textarea')
    				.val(text)
    				.attr('maxlength', data.maxlength);
    
    		}).on('keypress', '.js-update-input-textarea', function (e) {
    			if (e.which === 13) {
    				var $modal = $(this).closest('.modal');
    				var id = $modal.data().id;
    				updateInput(id, $(this).val());
    				irma.modal.closeModal($modal);
    			}
    
    		}).on('click', '.js-update-input', function () {
    			var $modal = $(this).closest('.modal');
    			var value = $modal.find('.js-update-input-textarea').val();
    			var id = $modal.data().id;
    			updateInput(id, value);
    			irma.modal.closeModal($modal);
    
    		});
    	};
    
    	return {
    		init: init,
    		showRecords: showRecords,
    		validateInput: validateInput,
    		addTag: addTag,
    		setRecentSearch: setRecentSearch,
    		getRecentSearch: getRecentSearch
    	};
    
    }());
  • URL: /components/raw/form/form.js
  • Filesystem Path: components/01-components/form/form.js
  • Size: 20.9 KB

There are no notes for this item.