{#if props.readOnly}
{@const readValue = typeof props.value === "string" ? props.value : ""}
{#if readValue.length === 0}
{EM_DASH}
{:else if props.constraints.format === "email" && isSafeMailtoAddress(readValue)}
{readValue}
{:else if (props.constraints.format === "uri" || props.constraints.format === "url") && isSafeHyperlink(readValue)}
{readValue}
{:else if props.constraints.format === "date"}
{formatDate(readValue)}
{:else if props.constraints.format === "time"}
{formatTime(readValue)}
{:else if props.constraints.format === "date-time" || props.constraints.format === "datetime"}
{formatDateTime(readValue)}
{:else}
{readValue}
{/if}
{:else}
{@const dateType = dateInputType(props.constraints.format)}
{@const ariaAttrs = buildAriaAttrs(props.tree)}
{@const hintInfo = buildHintInfo(id, props.constraints)}
{@const enumValues =
props.tree.type === "enum" ? props.tree.enumValues : []}
{@const isCredential =
props.writeOnly === true && props.constraints.format === "password"}
{@const inputType = isCredential
? "password"
: props.constraints.format === "email"
? "email"
: props.constraints.format === "uri"
? "url"
: "text"}
{@const autoComplete = isCredential
? strValue.length > 0
? "current-password"
: "new-password"
: undefined}
{@const placeholderText =
typeof props.meta.description === "string"
? props.meta.description
: undefined}
{#if dateType !== undefined}
{
const target = e.currentTarget;
if (target instanceof HTMLInputElement) {
props.onChange(target.value);
}
}}
aria-describedby={hintInfo?.ariaDescribedBy}
{...ariaAttrs}
/>
{:else if props.tree.type === "enum" && enumValues.length > 0}
{:else}
{
const target = e.currentTarget;
if (target instanceof HTMLInputElement) {
props.onChange(target.value);
}
}}
placeholder={placeholderText}
minlength={props.constraints.minLength}
maxlength={props.constraints.maxLength}
aria-describedby={hintInfo?.ariaDescribedBy}
{...ariaAttrs}
/>
{/if}
{#if hintInfo !== undefined}
{hintInfo.hint}
{/if}
{/if}