69 lines
2 KiB
Handlebars
69 lines
2 KiB
Handlebars
|
<div class="field">
|
||
|
|
<div class="regex-label-wrapper">
|
||
|
|
<div class="regex-label">
|
||
|
|
<label for="{{@attr.name}}" class="is-label">
|
||
|
|
{{@labelString}}
|
||
|
|
{{#if @attr.options.helpText}}
|
||
|
|
{{#info-tooltip}}
|
||
|
|
<span data-test-help-text>
|
||
|
|
{{@attr.options.helpText}}
|
||
|
|
</span>
|
||
|
|
{{/info-tooltip}}
|
||
|
|
{{/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 this.showTestValue}}
|
||
|
|
<div data-test-regex-validator-test-string>
|
||
|
|
<label for="{{@attr.name}}" class="is-label">
|
||
|
|
Test string
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
data-test-input={{concat @attr.name "-testval"}}
|
||
|
|
id={{concat @attr.name "-testval"}}
|
||
|
|
autocomplete="off"
|
||
|
|
spellcheck="false"
|
||
|
|
value={{this.testValue}}
|
||
|
|
{{on 'change' this.updateTestValue}}
|
||
|
|
class="input {{if this.regexError 'has-error'}}" />
|
||
|
|
|
||
|
|
{{#if (and this.testValue @value)}}
|
||
|
|
<div data-test-regex-validation-message>
|
||
|
|
{{#if this.regexError}}
|
||
|
|
<AlertInline @type="danger" @message="Your regex doesn't match the subject string" />
|
||
|
|
{{else}}
|
||
|
|
<div class="message-inline">
|
||
|
|
<Icon @glyph="check-circle-fill" class="has-text-success" aria-hidden="true" />
|
||
|
|
<p data-test-inline-success-message>Your regex matches the subject string</p>
|
||
|
|
</div>
|
||
|
|
{{/if}}
|
||
|
|
</div>
|
||
|
|
{{/if}}
|
||
|
|
</div>
|
||
|
|
{{/if}}
|
||
|
|
|