@patternfly/elements
Version:
PatternFly Elements
1 lines • 26.6 kB
Source Map (JSON)
{"version":3,"file":"pf-text-input.js","sourceRoot":"","sources":["pf-text-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, isServer, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport styles from './pf-text-input.css';\n\n/**\n * A **text input** is used to gather free-form text from a user.\n * @cssprop [--pf-c-form-control--Color=var(--pf-global--Color--100, #151515)] -\n * @cssprop [--pf-c-form-control--FontSize=var(--pf-global--FontSize--md, 1rem)] -\n * @cssprop [--pf-c-form-control--LineHeight=var(--pf-global--LineHeight--md, 1.5)] -\n * @cssprop [--pf-c-form-control--BorderWidth=var(--pf-global--BorderWidth--sm, 1px)] -\n * @cssprop [--pf-c-form-control--BorderTopColor=var(--pf-global--BorderColor--300, #f0f0f0)] -\n * @cssprop [--pf-c-form-control--BorderRightColor=var(--pf-global--BorderColor--300, #f0f0f0)] -\n * @cssprop [--pf-c-form-control--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)] -\n * @cssprop [--pf-c-form-control--BorderLeftColor=var(--pf-global--BorderColor--300, #f0f0f0)] -\n * @cssprop [--pf-c-form-control--BorderRadius=0] -\n * @cssprop [--pf-c-form-control--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)] -\n * @cssprop [--pf-c-form-control--Width=100] -\n * @cssprop [--pf-c-form-control--Height=calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom))] -\n * @cssprop [--pf-c-form-control--inset--base=var(--pf-global--spacer--sm, 0.5rem)] -\n * @cssprop [--pf-c-form-control--PaddingTop=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))] -\n * @cssprop [--pf-c-form-control--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))] -\n * @cssprop [--pf-c-form-control--PaddingRight=var(--pf-c-form-control--inset--base)] -\n * @cssprop [--pf-c-form-control--PaddingLeft=var(--pf-c-form-control--inset--base)] -\n * @cssprop [--pf-c-form-control--hover--BorderBottomColor=var(--pf-global--primary-color--100, #06c)] -\n * @cssprop [--pf-c-form-control--focus--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -\n * @cssprop [--pf-c-form-control--focus--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))] -\n * @cssprop [--pf-c-form-control--focus--BorderBottomColor=var(--pf-global--primary-color--100, #06c)] -\n * @cssprop [--pf-c-form-control--m-expanded--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -\n * @cssprop [--pf-c-form-control--m-expanded--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))] -\n * @cssprop [--pf-c-form-control--m-expanded--BorderBottomColor=var(--pf-global--primary-color--100, #06c)] -\n * @cssprop [--pf-c-form-control--placeholder--Color=var(--pf-global--Color--dark-200, #6a6e73)] -\n * @cssprop [--pf-c-form-control--placeholder--child--Color=var(--pf-global--Color--100, #151515)] -\n * @cssprop [--pf-c-form-control--disabled--Color=var(--pf-global--disabled-color--100, #6a6e73)] -\n * @cssprop [--pf-c-form-control--disabled--BackgroundColor=var(--pf-global--disabled-color--300, #f0f0f0)] -\n * @cssprop [--pf-c-form-control--disabled--BorderColor=transparent] -\n * @cssprop [--pf-c-form-control--readonly--BackgroundColor=var(--pf-global--disabled-color--300, #f0f0f0)] -\n * @cssprop [--pf-c-form-control--readonly--hover--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)] -\n * @cssprop [--pf-c-form-control--readonly--focus--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))] -\n * @cssprop [--pf-c-form-control--readonly--focus--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)] -\n * @cssprop [--pf-c-form-control--readonly--focus--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)] -\n * @cssprop [--pf-c-form-control--readonly--m-plain--BackgroundColor=transparent] -\n * @cssprop [--pf-c-form-control--readonly--m-plain--inset--base=0] -\n * @cssprop [--pf-c-form-control--success--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -\n * @cssprop [--pf-c-form-control--success--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth))] -\n * @cssprop [--pf-c-form-control--success--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)] -\n * @cssprop [--pf-c-form-control--success--PaddingRight=var(--pf-global--spacer--xl, 2rem)] -\n * @cssprop [--pf-c-form-control--success--BackgroundPositionX=calc(100 - var(--pf-c-form-control--PaddingLeft))] -\n * @cssprop [--pf-c-form-control--success--BackgroundPositionY=center] -\n * @cssprop [--pf-c-form-control--success--BackgroundPosition=var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY)] -\n * @cssprop [--pf-c-form-control--success--BackgroundSizeX=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--success--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--success--BackgroundSize=var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY)] -\n * @cssprop --pf-c-form-control--success--BackgroundUrl -\n * @cssprop [--pf-c-form-control--m-warning--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -\n * @cssprop [--pf-c-form-control--m-warning--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth))] -\n * @cssprop [--pf-c-form-control--m-warning--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)] -\n * @cssprop [--pf-c-form-control--m-warning--PaddingRight=var(--pf-global--spacer--xl, 2rem)] -\n * @cssprop [--pf-c-form-control--m-warning--BackgroundPositionX=calc(100 - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem))] -\n * @cssprop [--pf-c-form-control--m-warning--BackgroundPositionY=center] -\n * @cssprop [--pf-c-form-control--m-warning--BackgroundPosition=var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY)] -\n * @cssprop [--pf-c-form-control--m-warning--BackgroundSizeX=1.25rem] -\n * @cssprop [--pf-c-form-control--m-warning--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--m-warning--BackgroundSize=var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY)] -\n * @cssprop --pf-c-form-control--m-warning--BackgroundUrl -\n * @cssprop [--pf-c-form-control--invalid--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -\n * @cssprop [--pf-c-form-control--invalid--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth))] -\n * @cssprop [--pf-c-form-control--invalid--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)] -\n * @cssprop [--pf-c-form-control--invalid--PaddingRight=var(--pf-global--spacer--xl, 2rem)] -\n * @cssprop [--pf-c-form-control--invalid--BackgroundPositionX=calc(100 - var(--pf-c-form-control--PaddingLeft))] -\n * @cssprop [--pf-c-form-control--invalid--BackgroundPositionY=center] -\n * @cssprop [--pf-c-form-control--invalid--BackgroundPosition=var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY)] -\n * @cssprop [--pf-c-form-control--invalid--BackgroundSizeX=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--invalid--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--invalid--BackgroundSize=var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY)] -\n * @cssprop --pf-c-form-control--invalid--BackgroundUrl -\n * @cssprop [--pf-c-form-control--invalid--exclamation--Background=var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat] -\n * @cssprop [--pf-c-form-control--invalid--Background=var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background)] -\n * @cssprop [--pf-c-form-control--m-search--PaddingLeft=var(--pf-global--spacer--xl, 2rem)] -\n * @cssprop [--pf-c-form-control--m-search--BackgroundPosition=var(--pf-c-form-control--PaddingRight)] -\n * @cssprop [--pf-c-form-control--m-search--BackgroundSize=var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize)] -\n * @cssprop --pf-c-form-control--m-search--BackgroundUrl -\n * @cssprop [--pf-c-form-control--m-icon--PaddingRight=calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))] -\n * @cssprop [--pf-c-form-control--m-icon--BackgroundUrl=none] -\n * @cssprop [--pf-c-form-control--m-icon--BackgroundPositionX=calc(100 - var(--pf-c-form-control--inset--base))] -\n * @cssprop [--pf-c-form-control--m-icon--BackgroundPositionY=center] -\n * @cssprop [--pf-c-form-control--m-icon--BackgroundSizeX=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--m-icon--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--m-icon--icon--spacer=var(--pf-global--spacer--sm, 0.5rem)] -\n * @cssprop [--pf-c-form-control--m-icon--icon--PaddingRight=calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))] -\n * @cssprop [--pf-c-form-control--m-icon--icon--BackgroundPositionX=calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX))] -\n * @cssprop [--pf-c-form-control--m-icon--invalid--BackgroundUrl=var(--pf-c-form-control--invalid--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)] -\n * @cssprop [--pf-c-form-control--m-icon--invalid--BackgroundPosition=var(--pf-c-form-control--invalid--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)] -\n * @cssprop [--pf-c-form-control--m-icon--invalid--BackgroundSize=var(--pf-c-form-control--invalid--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)] -\n * @cssprop [--pf-c-form-control--m-icon--success--BackgroundUrl=var(--pf-c-form-control--success--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)] -\n * @cssprop [--pf-c-form-control--m-icon--success--BackgroundPosition=var(--pf-c-form-control--success--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)] -\n * @cssprop [--pf-c-form-control--m-icon--success--BackgroundSize=var(--pf-c-form-control--success--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)] -\n * @cssprop [--pf-c-form-control--m-icon--m-warning--BackgroundUrl=var(--pf-c-form-control--m-warning--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)] -\n * @cssprop [--pf-c-form-control--m-icon--m-warning--BackgroundPosition=var(--pf-c-form-control--m-warning--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)] -\n * @cssprop [--pf-c-form-control--m-icon--m-warning--BackgroundSize=var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)] -\n * @cssprop --pf-c-form-control--m-calendar--BackgroundUrl -\n * @cssprop --pf-c-form-control--m-clock--BackgroundUrl -\n * @cssprop [--pf-c-form-control__select--PaddingRight=calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth))] -\n * @cssprop [--pf-c-form-control__select--PaddingLeft=calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth))] -\n * @cssprop --pf-c-form-control__select--BackgroundUrl -\n * @cssprop [--pf-c-form-control__select--BackgroundSize=.625em] -\n * @cssprop [--pf-c-form-control__select--BackgroundPositionX=calc(100 - var(--pf-global--spacer--md, 1rem) + 1px)] -\n * @cssprop [--pf-c-form-control__select--BackgroundPositionY=center] -\n * @cssprop [--pf-c-form-control__select--BackgroundPosition=var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY)] -\n * @cssprop [--pf-c-form-control__select--success--PaddingRight=var(--pf-global--spacer--3xl, 4rem)] -\n * @cssprop [--pf-c-form-control__select--success--BackgroundPosition=calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))] -\n * @cssprop [--pf-c-form-control__select--m-warning--PaddingRight=var(--pf-global--spacer--3xl, 4rem)] -\n * @cssprop [--pf-c-form-control__select--m-warning--BackgroundPosition=calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)] -\n * @cssprop [--pf-c-form-control__select--invalid--PaddingRight=var(--pf-global--spacer--3xl, 4rem)] -\n * @cssprop [--pf-c-form-control__select--invalid--BackgroundPosition=calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))] -\n * @cssprop [--pf-c-form-control--textarea--Width=var(--pf-c-form-control--Width)] -\n * @cssprop [--pf-c-form-control--textarea--Height=auto] -\n * @cssprop [--pf-c-form-control--textarea--success--BackgroundPositionY=var(--pf-c-form-control--PaddingLeft)] -\n * @cssprop [--pf-c-form-control--textarea--m-warning--BackgroundPositionY=var(--pf-c-form-control--PaddingLeft)] -\n * @cssprop [--pf-c-form-control--textarea--invalid--BackgroundPositionY=var(--pf-c-form-control--PaddingLeft)] -\n * @cssprop --pf-c-form-control--m-icon-sprite--success--BackgroundUrl -\n * @cssprop --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl -\n * @cssprop --pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl -\n * @cssprop --pf-c-form-control--m-icon-sprite__select--BackgroundUrl -\n * @cssprop --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl -\n * @cssprop --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl -\n * @cssprop [--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl=url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#clock)] -\n * @cssprop [--pf-c-form-control--m-icon-sprite__select--BackgroundSize=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX=calc(100 - var(--pf-global--spacer--md, 1rem) + 7px)] -\n * @cssprop [--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition=calc(100 - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg, 1.5rem))] -\n * @cssprop [--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition=calc(100 - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)] -\n * @cssprop [--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition=calc(100 - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem))] -\n * @cssprop [--pf-c-form-control__error-text--m-status--Color=var(--pf-global--danger-color--100, #c9190b)] -\n */\n@customElement('pf-text-input')\nexport class PfTextInput extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n static readonly formAssociated = true;\n\n static override readonly shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** Trim text on left */\n @property({ type: Boolean, reflect: true, attribute: 'left-truncated' }) leftTruncated = false;\n\n /**\n * Value to indicate if the input is modified to show that validation state.\n * If set to success, input will be modified to indicate valid state.\n * If set to warning, input will be modified to indicate warning state.\n * Invalid inputs will display an error state\n */\n @property({ reflect: true }) validated?: 'success' | 'warning';\n\n /** icon variant */\n @property({ reflect: true }) icon?: 'calendar' | 'clock' | 'search';\n\n /** Accessible label for the input when no `<label>` element is provided. */\n @property({ reflect: true, attribute: 'accessible-label' }) accessibleLabel?: string;\n\n /** Custom icon url to set as the text input's background-image */\n @property({ reflect: true, attribute: 'custom-icon-url' }) customIconUrl?: string;\n\n /** Dimensions for the custom icon set as the text input's background-size */\n @property({ reflect: true, attribute: 'custom-icon-dimensions' }) customIconDimensions?: string;\n\n @property({ type: Boolean, reflect: true }) plain = false;\n\n /** Type that the input accepts. */\n @property({ reflect: true }) type?:\n | 'text'\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'month'\n | 'number'\n | 'password'\n | 'search'\n | 'tel'\n | 'time'\n | 'url';\n\n /** Flag to show if the input is disabled. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Flag to show if the input is required. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Validation pattern, like `<input>` */\n @property() pattern?: string;\n\n /** Flag to show if the input is read only. */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /** Helper text is text below a form field that helps a user provide the right information, like \"Enter a unique name\". */\n @property({ attribute: 'helper-text' }) helperText?: string;\n\n /** If set to 'blur', will validate when focus leaves the input */\n @property({ attribute: 'validate-on' }) validateOn?: 'blur';\n\n /** Displayed when validation fails */\n @property({ attribute: 'error-text' }) errorText?: string;\n\n /** Input placeholder. */\n @property() placeholder?: string;\n\n /** Value of the input. */\n @property() value = '';\n\n #internals = InternalsController.of(this);\n\n #derivedLabel = '';\n\n #touched = false;\n\n get #disabled() {\n return (!isServer && this.matches(':disabled')) || this.disabled;\n }\n\n get #input() {\n return this.shadowRoot?.getElementById('input') as HTMLInputElement ?? null;\n }\n\n override willUpdate(): void {\n this.#derivedLabel = this.accessibleLabel || this.#internals.computedLabelText;\n }\n\n override render(): TemplateResult<1> {\n const { valid } = this.#internals.validity;\n return html`\n <input id=\"input\"\n .placeholder=\"${this.placeholder ?? ''}\"\n .value=\"${this.value}\"\n pattern=\"${ifDefined(this.pattern)}\"\n @input=\"${this.#onInput}\"\n @keydown=\"${this.#onKeydown}\"\n @blur=\"${this.#onBlur}\"\n ?disabled=\"${this.#disabled}\"\n ?readonly=\"${this.readonly}\"\n ?required=\"${this.required}\"\n aria-label=\"${this.#derivedLabel}\"\n type=\"${ifDefined(this.type)}\"\n style=\"${ifDefined(this.customIconUrl && styleMap({\n backgroundImage: `url('${this.customIconUrl}')`,\n backgroundSize: this.customIconDimensions,\n }))}\">\n <span id=\"helper-text\" ?hidden=\"${!this.helperText || valid}\">${this.helperText}</span>\n <span id=\"error-text\" ?hidden=\"${valid}\">${this.#internals.validationMessage}</span>\n `;\n }\n\n #onInput(event: Event & { target: HTMLInputElement }) {\n const { value } = event.target;\n this.value = value;\n this.#internals.setFormValue(value);\n if (this.#touched && !this.#internals.validity.valid) {\n this.#onBlur();\n }\n this.#touched = true;\n }\n\n #onKeydown(event: Event) {\n switch ((event as KeyboardEvent).key) {\n case 'Enter':\n if (this.reportValidity()) {\n this.#internals.form?.requestSubmit(null);\n }\n }\n }\n\n #onBlur() {\n if (this.validateOn === 'blur') {\n this.checkValidity();\n }\n }\n\n #setValidityFromInput() {\n this.#internals.setValidity(\n this.#input?.validity,\n this.errorText ?? this.#input.validationMessage,\n );\n this.requestUpdate();\n }\n\n async formStateRestoreCallback(state: string, mode: string): Promise<void> {\n if (mode === 'restore') {\n const [controlMode, value] = state.split('/');\n this.value = value ?? controlMode;\n this.requestUpdate();\n await this.updateComplete;\n this.#setValidityFromInput();\n }\n }\n\n\n async formDisabledCallback(): Promise<void> {\n await this.updateComplete;\n this.requestUpdate();\n }\n\n setCustomValidity(message: string): void {\n this.#internals.setValidity({}, message);\n this.requestUpdate();\n }\n\n checkValidity(): boolean {\n this.#setValidityFromInput();\n const validity = this.#internals.checkValidity();\n this.requestUpdate();\n return validity;\n }\n\n reportValidity(): boolean {\n this.#setValidityFromInput();\n return this.#internals.reportValidity();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-text-input': PfTextInput;\n }\n}\n"]}