8d7c7a0d6e
Add a command to the test script to output up-to-date Vue component templates. Most of the Vue component tests rely on HTML templates built from Jinja.
572 lines
20 KiB
HTML
572 lines
20 KiB
HTML
|
|
<clin-fields
|
|
|
|
v-bind:initial-clin-index='0'
|
|
v-bind:initial-total='0'
|
|
v-bind:initial-obligated='0'
|
|
v-bind:initial-start-date="'None'"
|
|
v-bind:initial-end-date="'None'"
|
|
v-bind:initial-clin-number="'None'"
|
|
|
|
v-bind:contract-start="'2019-09-14'"
|
|
v-bind:contract-end="'2022-09-14'"
|
|
inline-template>
|
|
<div class="clin-card" v-if="showClin">
|
|
<div class="card__title">
|
|
<span class="h4" v-html='clinTitle'></span>
|
|
<button
|
|
v-if='clinIndex > 0'
|
|
class="icon-link icon-link__remove-clin"
|
|
v-on:click="openModal(removeModalId)"
|
|
type="button">
|
|
|
|
<span class="icon icon--x " aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"/><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"/></svg>
|
|
</span>
|
|
|
|
</button>
|
|
</div>
|
|
<div class="card">
|
|
<div class="form-row">
|
|
<div class="h4 clin-card__title">
|
|
CLIN Details
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-col">
|
|
|
|
<textinput
|
|
v-cloak
|
|
name='number'
|
|
validation='anything'
|
|
|
|
|
|
|
|
|
|
v-bind:optional=false
|
|
key='number'
|
|
:watch='true'
|
|
inline-template>
|
|
|
|
<div
|
|
class=' '
|
|
v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid, 'usa-input--validation--paragraph': paragraph, 'no-max-width': noMaxWidth }]">
|
|
|
|
|
|
<label for=number>
|
|
<div class="usa-input__title">
|
|
CLIN
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<span v-show='showError'>
|
|
<span class="icon icon--alert icon-validation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
|
|
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
|
|
</svg>
|
|
</span>
|
|
</span>
|
|
<span v-show='showValid'>
|
|
<span class="icon icon--ok icon-validation" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
|
|
</span>
|
|
|
|
|
|
</label>
|
|
|
|
|
|
|
|
|
|
<masked-input
|
|
v-on:input='onInput'
|
|
v-on:blur='onBlur'
|
|
v-on:change='onChange'
|
|
v-bind:value='value'
|
|
v-bind:mask='mask'
|
|
v-bind:pipe='pipe'
|
|
v-bind:keep-char-positions='keepCharPositions'
|
|
v-bind:aria-invalid='showError'
|
|
type='text'
|
|
|
|
id='number'
|
|
|
|
ref='input'
|
|
placeholder=''>
|
|
</masked-input>
|
|
|
|
|
|
|
|
<input
|
|
type='hidden'
|
|
v-bind:value='rawValue'
|
|
|
|
name='number'
|
|
|
|
/>
|
|
|
|
|
|
<template v-if='showError'>
|
|
<span class='usa-input__message' v-html='validationError'></span>
|
|
</template>
|
|
<template v-else>
|
|
<span class='usa-input__message'></span>
|
|
</template>
|
|
|
|
|
|
</div>
|
|
</textinput>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-col">
|
|
|
|
<optionsinput
|
|
name='jedi_clin_type'
|
|
inline-template
|
|
|
|
|
|
key='jedi_clin_type'
|
|
v-bind:watch='true'
|
|
v-bind:optional=false
|
|
v-bind:null-option="'None'"
|
|
>
|
|
<div
|
|
v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">
|
|
|
|
<fieldset data-ally-disabled="true" v-on:change="onInput" class="usa-input__choices ">
|
|
|
|
<legend>
|
|
<div class="usa-input__title-inline">
|
|
Corresponding IDIQ CLIN
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</legend>
|
|
|
|
|
|
<select id="jedi_clin_type" name="jedi_clin_type"><option value="JEDI_CLIN_1">IaaS/PaaS (IDIQ CLIN 0001)</option><option value="JEDI_CLIN_2">IDIQ CLIN 0002</option><option value="JEDI_CLIN_3">IDIQ CLIN 0003</option><option value="JEDI_CLIN_4">IDIQ CLIN 0004</option></select>
|
|
|
|
<template v-if='showError'>
|
|
<span class='usa-input__message' v-html='validationError'></span>
|
|
</template>
|
|
|
|
</fieldset>
|
|
</div>
|
|
|
|
</optionsinput>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="form-row">
|
|
<div class="h4 clin-card__title">
|
|
CLIN Funding
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="form-row">
|
|
<div class="form-col">
|
|
<clindollaramount
|
|
v-cloak
|
|
inline-template
|
|
|
|
:funding-valid='true'
|
|
|
|
|
|
name='total_amount'
|
|
|
|
|
|
key='total_amount'
|
|
|
|
|
|
validation="clinDollars"
|
|
:watch='true'>
|
|
<div v-bind:class="['usa-input usa-input--validation--dollars', { 'usa-input--error': showFundingError, 'usa-input--success': showFundingValid}]">
|
|
|
|
<label for='total_amount'>
|
|
|
|
|
|
|
|
<div class="usa-input__title">Total CLIN Value</div>
|
|
|
|
<span v-show='showFundingError'>
|
|
<span class="icon icon--alert icon-validation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
|
|
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
|
|
</svg>
|
|
</span>
|
|
</span>
|
|
<span v-show='showFundingValid'>
|
|
<span class="icon icon--ok icon-validation" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
|
|
</span>
|
|
</label>
|
|
|
|
<masked-input
|
|
v-on:input='onInput'
|
|
v-on:blur='onBlur'
|
|
v-on:change='onChange'
|
|
v-bind:value='value'
|
|
v-bind:mask='mask'
|
|
v-bind:pipe='pipe'
|
|
v-bind:keep-char-positions='keepCharPositions'
|
|
v-bind:aria-invalid='showError'
|
|
type='text'
|
|
:id='name'
|
|
ref='input'>
|
|
</masked-input>
|
|
|
|
<input type='hidden' v-bind:value='rawValue' :name='name' />
|
|
<template v-if='!fundingValid'>
|
|
<span class='usa-input__message'>Obligated amount must be less than or equal to total amount</span>
|
|
</template>
|
|
<template v-else-if='showError'>
|
|
<span class='usa-input__message' v-html='validationError'></span>
|
|
</template>
|
|
<template v-else>
|
|
<span class='usa-input__message'></span>
|
|
</template>
|
|
</div>
|
|
</clindollaramount>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-col">
|
|
<clindollaramount
|
|
v-cloak
|
|
inline-template
|
|
|
|
:funding-valid='fundingValid'
|
|
|
|
|
|
name='obligated_amount'
|
|
|
|
|
|
key='obligated_amount'
|
|
|
|
|
|
validation="clinDollars"
|
|
:watch='true'>
|
|
<div v-bind:class="['usa-input usa-input--validation--dollars', { 'usa-input--error': showFundingError, 'usa-input--success': showFundingValid}]">
|
|
|
|
<label for='obligated_amount'>
|
|
|
|
|
|
|
|
<div class="usa-input__title">Obligated Funds</div>
|
|
|
|
<span v-show='showFundingError'>
|
|
<span class="icon icon--alert icon-validation" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
|
|
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
|
|
</svg>
|
|
</span>
|
|
</span>
|
|
<span v-show='showFundingValid'>
|
|
<span class="icon icon--ok icon-validation" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
|
|
</span>
|
|
</label>
|
|
|
|
<masked-input
|
|
v-on:input='onInput'
|
|
v-on:blur='onBlur'
|
|
v-on:change='onChange'
|
|
v-bind:value='value'
|
|
v-bind:mask='mask'
|
|
v-bind:pipe='pipe'
|
|
v-bind:keep-char-positions='keepCharPositions'
|
|
v-bind:aria-invalid='showError'
|
|
type='text'
|
|
:id='name'
|
|
ref='input'>
|
|
</masked-input>
|
|
|
|
<input type='hidden' v-bind:value='rawValue' :name='name' />
|
|
<template v-if='!fundingValid'>
|
|
<span class='usa-input__message'>Obligated amount must be less than or equal to total amount</span>
|
|
</template>
|
|
<template v-else-if='showError'>
|
|
<span class='usa-input__message' v-html='validationError'></span>
|
|
</template>
|
|
<template v-else>
|
|
<span class='usa-input__message'></span>
|
|
</template>
|
|
</div>
|
|
</clindollaramount>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="h5 clin-card__title">Percent Obligated</div>
|
|
<p id="percent-obligated" v-html='percentObligated'></p>
|
|
|
|
<hr>
|
|
<div class="form-row">
|
|
<div class="h4 clin-card__title">
|
|
Period of Performance
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="form-row">
|
|
<div class="form-col">
|
|
<date-selector
|
|
|
|
|
|
name-tag='start_date'
|
|
initialmonth=""
|
|
initialday=""
|
|
initialyear=""
|
|
v-bind:watch='true'
|
|
:optional='false'
|
|
inline-template>
|
|
|
|
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
|
|
<legend>
|
|
<div class="usa-input__title">
|
|
Start Date
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p class='usa-input__help'>
|
|
For example: 07 04 1776
|
|
</p>
|
|
|
|
</legend>
|
|
|
|
<div class="date-picker-component">
|
|
<input name="start_date" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
|
|
|
|
<div class="usa-form-group usa-form-group-month">
|
|
<label>Month</label>
|
|
<input
|
|
name="date-month"
|
|
max="12"
|
|
maxlength="2"
|
|
min="1"
|
|
type="number"
|
|
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
|
|
v-model="month"
|
|
v-on:change="onInput"
|
|
/>
|
|
</div>
|
|
|
|
<div class="usa-form-group usa-form-group-day">
|
|
<label>Day</label>
|
|
<input
|
|
name="date-day"
|
|
maxlength="2"
|
|
min="1"
|
|
type="number"
|
|
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
|
|
v-bind:max="daysMaxCalculation"
|
|
v-model="day"
|
|
v-on:change="onInput"
|
|
/>
|
|
</div>
|
|
|
|
<div class="usa-form-group usa-form-group-year">
|
|
<label>Year</label>
|
|
<input
|
|
id="date-year"
|
|
maxlength="4"
|
|
type="number"
|
|
v-model="year"
|
|
|
|
|
|
v-on:change="onInput"
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div v-if="showValidation">
|
|
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
|
|
|
<span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
|
|
|
|
</div>
|
|
<div class="usa-form-group-date-ok" v-else>
|
|
|
|
<span class="icon icon--alert icon--red" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
|
|
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
|
|
</svg>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</date-selector>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-col">
|
|
<date-selector
|
|
|
|
|
|
name-tag='end_date'
|
|
initialmonth=""
|
|
initialday=""
|
|
initialyear=""
|
|
v-bind:watch='true'
|
|
:optional='false'
|
|
inline-template>
|
|
|
|
<fieldset class="usa-input date-picker" v-bind:class="{ 'usa-input--success': isDateValid && showValidation }">
|
|
<legend>
|
|
<div class="usa-input__title">
|
|
End Date
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class='usa-alert usa-alert-info' role='alert' aria-live='polite'>
|
|
|
|
<div class='usa-alert-body'>
|
|
|
|
|
|
|
|
<p class='usa-alert-text'>
|
|
A CLIN's period of performance must end before September 14, 2022.
|
|
</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p class='usa-input__help'>
|
|
For example: 07 04 1776
|
|
</p>
|
|
|
|
</legend>
|
|
|
|
<div class="date-picker-component">
|
|
<input name="end_date" v-bind:value="formattedDate" v-on:change="onInput" type="hidden" />
|
|
|
|
<div class="usa-form-group usa-form-group-month">
|
|
<label>Month</label>
|
|
<input
|
|
name="date-month"
|
|
max="12"
|
|
maxlength="2"
|
|
min="1"
|
|
type="number"
|
|
v-bind:class="{ 'usa-input-error': (month && !isMonthValid) }"
|
|
v-model="month"
|
|
v-on:change="onInput"
|
|
/>
|
|
</div>
|
|
|
|
<div class="usa-form-group usa-form-group-day">
|
|
<label>Day</label>
|
|
<input
|
|
name="date-day"
|
|
maxlength="2"
|
|
min="1"
|
|
type="number"
|
|
v-bind:class="{ 'usa-input-error': (day && !isDayValid) }"
|
|
v-bind:max="daysMaxCalculation"
|
|
v-model="day"
|
|
v-on:change="onInput"
|
|
/>
|
|
</div>
|
|
|
|
<div class="usa-form-group usa-form-group-year">
|
|
<label>Year</label>
|
|
<input
|
|
id="date-year"
|
|
maxlength="4"
|
|
type="number"
|
|
v-model="year"
|
|
|
|
|
|
v-on:change="onInput"
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div v-if="showValidation">
|
|
<div class="usa-form-group-date-ok" v-if="isDateValid">
|
|
|
|
<span class="icon icon--ok icon--green" aria-hidden="true"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check-circle" class="svg-inline--fa fa-check-circle fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path></svg></span>
|
|
|
|
</div>
|
|
<div class="usa-form-group-date-ok" v-else>
|
|
|
|
<span class="icon icon--alert icon--red" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fdb81e">
|
|
<path d="M8 16c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM8 2C4.691 2 2 4.691 2 8s2.691 6 6 6 6-2.691 6-6-2.691-6-6-6zm0 8c-.552 0-1-.447-1-1V4c0-.552.448-1 1-1s1 .448 1 1v5c0 .553-.448 1-1 1zm0 3c-.26 0-.52-.11-.71-.29-.18-.19-.29-.45-.29-.71 0-.271.11-.521.29-.71.38-.37 1.05-.37 1.42 0 .18.189.29.45.29.71s-.11.52-.29.71c-.19.18-.45.29-.71.29z"/>
|
|
</svg>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</date-selector>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="usa-input-error-message form-has-errors">
|
|
<p v-for="error in popErrors" :key="error" v-html='error'></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show="$root.activeModal === removeModalId" v-cloak>
|
|
<div :id='"modal--" + removeModalId' class='modal modal--dismissable'>
|
|
<div class='modal__container'>
|
|
<div class='modal__dialog' role='dialog' aria-modal='true'>
|
|
<div class='modal__body'>
|
|
<div class="task-order__modal-cancel">
|
|
<h1 v-html='"Do you want to remove " + clinTitle + "?"'></h1>
|
|
<div class="task-order__modal-cancel_buttons">
|
|
<button
|
|
v-on:click='closeModal(removeModalId)'
|
|
class="usa-button usa-button-primary"
|
|
type="button">
|
|
No, go back
|
|
</button>
|
|
<button
|
|
v-on:click="removeClin()"
|
|
class="usa-button usa-button-primary"
|
|
type="button">
|
|
Yes, remove CLIN
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button type='button' class='icon-link modal__dismiss' v-on:click='closeModal(removeModalId)'>
|
|
|
|
<span class="icon icon--x " aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 2l12 12M14 15c-.256 0-.512-.098-.707-.293l-12-12c-.391-.391-.391-1.023 0-1.414s1.023-.391 1.414 0l12 12c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293zm0-13L2 14"/><path d="M2 15c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l12-12c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-12 12C2.512 14.902 2.256 15 2 15z"/></svg>
|
|
</span>
|
|
|
|
<span>
|
|
Close
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</clin-fields>
|