114 lines
3.5 KiB
Handlebars
114 lines
3.5 KiB
Handlebars
{{#if @attr}}
|
|
<div class="field" data-test-regex-validator-pattern>
|
|
<div class="regex-label-wrapper">
|
|
<div class="regex-label">
|
|
<label for={{@attr.name}} class="is-label">
|
|
{{@labelString}}
|
|
{{#if @attr.options.helpText}}
|
|
<InfoTooltip>
|
|
<span data-test-help-text>
|
|
{{@attr.options.helpText}}
|
|
</span>
|
|
</InfoTooltip>
|
|
{{/if}}
|
|
</label>
|
|
{{#if @attr.options.subText}}
|
|
<p class="sub-text">
|
|
{{@attr.options.subText}}
|
|
{{#if @attr.options.docLink}}
|
|
<a href={{@attr.options.docLink}} target="_blank" rel="noopener noreferrer">
|
|
See our documentation
|
|
</a>
|
|
for help.
|
|
{{/if}}
|
|
</p>
|
|
{{/if}}
|
|
</div>
|
|
<div>
|
|
<Toggle
|
|
@name={{concat @attr.name "-validation-toggle"}}
|
|
@status="success"
|
|
@size="small"
|
|
@checked={{this.showTestValue}}
|
|
@onChange={{this.toggleTestValue}}
|
|
>
|
|
<span class="has-text-grey">Validation</span>
|
|
</Toggle>
|
|
</div>
|
|
</div>
|
|
<input
|
|
id={{@attr.name}}
|
|
data-test-input={{@attr.name}}
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
{{on "change" @onChange}}
|
|
value={{@value}}
|
|
class="input"
|
|
/>
|
|
</div>
|
|
{{/if}}
|
|
{{#if this.showTestValue}}
|
|
<div data-test-regex-validator-test-string>
|
|
<label for="regex-test-val" class="is-label">
|
|
{{this.testInputLabel}}
|
|
</label>
|
|
{{#if @testInputSubText}}
|
|
<p class="sub-text">{{@testInputSubText}}</p>
|
|
{{/if}}
|
|
<input
|
|
data-test-input="regex-test-val"
|
|
id="regex-test-val"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
value={{this.testValue}}
|
|
{{on "change" this.updateTestValue}}
|
|
class="input {{if this.regexError "has-error"}}"
|
|
/>
|
|
|
|
{{#if this.testValue}}
|
|
<div data-test-regex-validation-message>
|
|
{{#if (not @value)}}
|
|
<AlertInline
|
|
@type="warning"
|
|
@message={{concat
|
|
"A pattern has not been entered. Enter a pattern to check this "
|
|
(lowercase this.testInputLabel)
|
|
" against it."
|
|
}}
|
|
/>
|
|
{{else if this.regexError}}
|
|
<AlertInline @type="danger" @message="This test string does not match the pattern regex." />
|
|
{{else}}
|
|
<div class="message-inline">
|
|
<Icon @name="check-circle-fill" class="has-text-success" />
|
|
<p data-test-inline-success-message>
|
|
This test string matches the pattern regex.
|
|
</p>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
{{#if @showGroups}}
|
|
<div class="has-top-margin-l">
|
|
<label class="is-label">Groups</label>
|
|
{{! check with design but should likely show a placeholder if testValue is blank }}
|
|
{{#if (and @value this.testValue (not this.regexError))}}
|
|
<div class="regex-group">
|
|
{{#each this.captureGroups as |group|}}
|
|
<span class="regex-group-position" data-test-regex-group-position={{group.position}}>
|
|
<span>{{group.position}}</span>
|
|
</span>
|
|
<span class="regex-group-value" data-test-regex-group-value={{group.position}}>
|
|
{{group.value}}
|
|
</span>
|
|
{{/each}}
|
|
</div>
|
|
{{else}}
|
|
<p class="sub-text" data-test-regex-validator-groups-placeholder>
|
|
Enter pattern and test string to show groupings.
|
|
</p>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}} |