@digital-realty/ix-textbox 2.4.6 → 2.4.7-IXUAT-11250.561445

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/IxTextbox.js CHANGED
@@ -233,7 +233,18 @@ export class IxTextbox extends IxTextboxBase {
233
233
  this.clearInput = () => {
234
234
  this.value = '';
235
235
  this.hasText = false;
236
+ // The field is uncontrolled while typing (onInput doesn't write back to
237
+ // this.value), so this.value is already '' and the `.value` binding won't
238
+ // re-apply. Clear the rendered field directly so the visible text goes too.
239
+ if (this.component)
240
+ this.component.value = '';
236
241
  this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
242
+ // Mirror onInput so search consumers (e.g. ix-search-bar) react to the clear —
243
+ // the bare `input` event above doesn't retrigger onInput, so without this they
244
+ // keep stale results/dropdown after the field is cleared.
245
+ this.dispatchEvent(new CustomEvent('search-text-change', {
246
+ detail: { searchText: '' },
247
+ }));
237
248
  };
238
249
  }
239
250
  connectedCallback() {
@@ -1 +1 @@
1
- {"version":3,"file":"IxTextbox.js","sourceRoot":"","sources":["../src/IxTextbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { html as staticHtml, StaticValue, literal } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport '@material/web/textfield/filled-text-field.js';\nimport '@material/web/textfield/outlined-text-field.js';\nimport {\n TextFieldType,\n UnsupportedTextFieldType,\n} from '@material/web/textfield/internal/text-field.js';\nimport { AriaForwardMixin } from '@digital-realty/ix-shared-fns/aria-forward-mixin.js';\nimport { spread } from '@open-wc/lit-helpers';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-phone-input/ix-phone-input.js';\n\nconst IxTextboxBase = AriaForwardMixin(LitElement);\n\nexport class IxTextbox extends IxTextboxBase {\n @query('.textfield')\n readonly component!: HTMLInputElement;\n\n @property({ type: Boolean, reflect: true }) filled = false;\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Gets or sets whether or not the text field is in a visually invalid state.\n *\n * Calling `reportValidity()` will automatically update `error`.\n */\n @property({ type: Boolean, reflect: true }) error = false;\n\n /**\n * The error message that replaces supporting text when `error` is true. If\n * `errorText` is an empty string, then the supporting text will continue to\n * show.\n *\n * Calling `reportValidity()` will automatically update `errorText` to the\n * native `validationMessage`.\n */\n @property({ attribute: 'error-text' }) errorText = '';\n\n @property() label = '';\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n /**\n * Screen-reader text appended to the label when `required` is true.\n * Defaults to \"required\" (English). Overridden for i18n by consumer apps.\n *\n * The visible asterisk (rendered by MD3 when `required` is true) is\n * kept as the visual affordance for sighted users; this string is\n * ONLY appended to the accessible name so NVDA reads\n * \"First name, required\" instead of \"First name, star\".\n */\n @property({ attribute: 'required-text' }) requiredText = 'required';\n\n /**\n * The current value of the text field. It is always a string.\n */\n @property() value = '';\n\n /**\n * The name of the text field. It is always a string.\n */\n @property() name = '';\n\n /**\n * An optional prefix to display before the input value.\n */\n @property({ attribute: 'prefix-text' }) prefixText = '';\n\n /**\n * An optional suffix to display after the input value.\n */\n @property({ attribute: 'suffix-text' }) suffixText = '';\n\n /**\n * Name of icon. It is always a string.\n */\n @property({ attribute: 'leading-icon' })\n leadingIcon = '';\n\n /**\n * Name of icon. It is always a string.\n */\n @property({ attribute: 'trailing-icon' })\n trailingIcon = '';\n\n /**\n * Enables navigation icons for search input types.\n */\n @property({ type: Boolean }) searchEnabled = false;\n\n /**\n * The number of search results found.\n */\n @property({ type: Number }) searchResultCount = 0;\n\n /**\n * The index of the selected search result. This property is 1-based (i.e. begins with 1, not zero-based).\n */\n @property({ type: Number }) searchResultIndex = 0;\n\n /**\n * Conveys additional information below the text field, such as how it should\n * be used.\n */\n @property({ attribute: 'supporting-text' }) supportingText = '';\n\n /**\n * Override the input text CSS `direction`. Useful for RTL languages that use\n * LTR notation for fractions.\n */\n @property({ attribute: 'text-direction' }) textDirection = '';\n\n /**\n * The number of rows to display for a `type=\"textarea\"` text field.\n * Defaults to 2.\n */\n @property({ type: Number }) rows = 2;\n\n // <input> properties\n @property({ reflect: true }) override inputMode = '';\n\n /**\n * Defines the greatest value in the range of permitted values.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max\n */\n @property() max = '';\n\n /**\n * The maximum number of characters a user can enter into the text field. Set\n * to -1 for none.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength\n */\n @property({ type: Number }) maxLength = -1;\n\n /**\n * Defines the most negative value in the range of permitted values.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min\n */\n @property() min = '';\n\n /**\n * The minimum number of characters a user can enter into the text field. Set\n * to -1 for none.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength\n */\n @property({ type: Number }) minLength = -1;\n\n /**\n * A regular expression that the text field's value must match to pass\n * constraint validation.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern\n */\n @property() pattern = '';\n\n @property({ reflect: true }) placeholder = '';\n\n /**\n * Indicates whether or not a user should be able to edit the text field's\n * value.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly\n */\n @property({ type: Boolean, reflect: true }) readOnly = false;\n\n /**\n * Indicates that input accepts multiple email addresses.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple\n */\n @property({ type: Boolean, reflect: true }) multiple = false;\n\n /**\n * Returns or sets the element's step attribute, which works with min and max\n * to limit the increments at which a numeric or date-time value can be set.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n */\n @property() step = '';\n\n /**\n * The `<input>` type to use, defaults to \"text\". The type greatly changes how\n * the text field behaves.\n *\n * Text fields support a limited number of `<input>` types:\n *\n * - text\n * - textarea\n * - email\n * - number\n * - password\n * - search\n * - tel\n * - url\n *\n * See\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n * for more details on each input type.\n */\n @property({ reflect: true })\n type: TextFieldType | UnsupportedTextFieldType = 'text';\n\n /**\n * Describes what, if any, type of autocomplete functionality the input\n * should provide.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @property({ reflect: true }) autocomplete = '';\n\n /**\n * True if the input has text.\n */\n @state() hasText: boolean = false;\n\n @state() private _characterLimitMessage = '';\n\n private _characterLimitAnnounced = false;\n\n textarea: HTMLTextAreaElement | null | undefined;\n\n handleKeydownHandler: any = undefined;\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.type === 'textarea') {\n this.addEventListener('input', this.resizeTextArea);\n this.addEventListener('keydown', this.resizeTextArea);\n window.addEventListener('load', this.resizeTextArea);\n }\n }\n\n async firstUpdated() {\n if (this.type === 'textarea') {\n if (this.component instanceof LitElement) {\n await this.component.updateComplete;\n }\n await this.updateComplete;\n\n this.textarea = this.component?.shadowRoot?.querySelector('textarea');\n this.resizeTextArea();\n if (\n this.textarea?.value &&\n this.textarea.selectionStart === this.textarea.value.length &&\n this.textarea.selectionEnd === this.textarea.value.length\n ) {\n this.textarea.setSelectionRange(0, 0);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this.handleKeydownHandler) {\n this.removeEventListener('input', this.resizeTextArea);\n this.removeEventListener('keydown', this.resizeTextArea);\n window.removeEventListener('load', this.resizeTextArea);\n }\n }\n\n resizeTextArea = () => {\n if (this.textarea) {\n this.textarea.style.height = 'auto';\n if (this.textarea.scrollHeight > 0) {\n this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n }\n }\n };\n\n focus() {\n this.component.focus();\n }\n\n protected createRenderRoot() {\n return this;\n }\n\n renderStyles() {\n return html`\n <style>\n [error] {\n --md-outlined-field-outline-width: 2px;\n }\n ix-textbox {\n &.comment {\n --md-outlined-text-field-container-shape: 32px;\n --md-outlined-text-field-outline-color: rgba(9, 34, 65, 0.12);\n --md-outlined-text-field-outline-width: 1px;\n --md-outlined-text-field-hover-outline-color: rgba(9, 34, 65, 0.12);\n --md-outlined-text-field-hover-outline-width: 1px;\n --md-outlined-text-field-focus-outline-color: rgba(9, 34, 65, 0.12);\n --md-outlined-text-field-focus-outline-width: 1px;\n --md-outlined-text-field-input-text-placeholder-color: rgba(\n 9,\n 34,\n 65,\n 0.42\n );\n --md-filled-text-field-focus-active-indicator-color: rgba(\n 9,\n 34,\n 65,\n 0.12\n );\n --md-outlined-text-field-input-text-color: rgb(9, 34, 65);\n --md-outlined-field-leading-space: 8px;\n }\n [type='textarea'] {\n resize: none;\n }\n }\n .character-limit-status {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n </style>\n `;\n }\n\n /**\n * Handles search navigation icon clicks and emits search-navigation event.\n */\n private onSearchNavigation(e: CustomEvent, direction: string) {\n this.dispatchEvent(\n new CustomEvent('search-navigation', {\n detail: { direction },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /**\n * Handles input event and sets hasText state when an input event is received.\n */\n private onInput = (e: Event) => {\n const input = e.target as HTMLInputElement;\n this.hasText = input.value.length > 0;\n if (this.maxLength < 0 || input.value.length < this.maxLength) {\n this._characterLimitAnnounced = false;\n this._characterLimitMessage = '';\n }\n\n this.dispatchEvent(\n new CustomEvent('search-text-change', {\n detail: { searchText: input.value },\n })\n );\n };\n\n private onBeforeInput = (e: InputEvent) => {\n if (\n this.maxLength < 0 ||\n this.disabled ||\n this.readOnly ||\n !e.inputType.startsWith('insert')\n ) {\n return;\n }\n\n const input = e.composedPath()[0] as HTMLInputElement | HTMLTextAreaElement;\n if (!('value' in input)) return;\n\n const selectionStart = input.selectionStart ?? input.value.length;\n const selectionEnd = input.selectionEnd ?? selectionStart;\n const selectedLength = selectionEnd - selectionStart;\n const insertedText =\n e.data ??\n (e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph'\n ? '\\n'\n : '');\n const proposedLength =\n input.value.length - selectedLength + insertedText.length;\n\n if (proposedLength > this.maxLength && !this._characterLimitAnnounced) {\n this._characterLimitAnnounced = true;\n this._characterLimitMessage = `Maximum ${this.maxLength} characters reached.`;\n }\n };\n\n /**\n * Clears the input field and resets hasText state.\n */\n private clearInput = () => {\n this.value = '';\n this.hasText = false;\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n };\n\n /**\n * Sets the search result text based on the current search state.\n * @returns The search result text.\n */\n private setSearchResultText(): string {\n if (this.searchResultCount === 0) {\n return `${this.searchResultCount} results`;\n }\n\n if (this.searchResultIndex === 0) {\n return `${this.searchResultCount} results`;\n }\n\n return `${this.searchResultIndex}/${this.searchResultCount} results`;\n }\n\n /**\n * Merge consumer-supplied ARIA attributes with the required-field\n * accessible name. MD3 renders a visual asterisk but does not expose a\n * useful spoken cue in every screen reader.\n *\n * This getter injects `aria-label=\"${label}, ${requiredText}\"` when\n * required, but only if the consumer has not supplied their own\n * `aria-label`, in which case their value takes precedence. It also sets\n * `aria-required=\"true\"` when required.\n */\n private get _effectiveAriaAttributes(): Record<string, string> {\n const merged: Record<string, string> = { ...this.ariaAttributes };\n if (this.required) {\n merged['aria-required'] = 'true';\n if (!merged['aria-label'] && this.label) {\n merged['aria-label'] = `${this.label}, ${this.requiredText}`;\n }\n }\n return merged;\n }\n\n protected override render() {\n if (this.type === 'tel') {\n return html`<ix-phone-input\n class=\"textfield\"\n style=\"display: block;\"\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?error=${this.error}\n error-text=${this.errorText}\n supporting-text=${this.supportingText}\n type=${this.type}\n label=${this.label}\n name=${this.name}\n .value=${this.value ?? ''}\n ${spread(this._effectiveAriaAttributes)}\n ></ix-phone-input>`;\n }\n\n const tag: StaticValue = this.filled\n ? literal`md-filled-text-field`\n : literal`md-outlined-text-field`;\n\n return staticHtml`\n ${this.renderStyles()}\n <${tag}\n class=\"textfield\"\n style=\"display: block;\"\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?error=${this.error}\n ?multipule=${this.multiple}\n ?readOnly=${this.readOnly}\n ?has-leading-icon=${this.leadingIcon.length > 0}\n ?has-trailing-icon=${this.trailingIcon.length > 0}\n step=${this.step || nothing}\n autocomplete=${this.autocomplete || nothing}\n error-text=${this.errorText}\n placeholder=${this.placeholder}\n text-direction=${this.textDirection}\n rows=${this.rows}\n max=${this.max}\n maxLength=${this.maxLength}\n min=${this.min}\n minLength=${this.minLength}\n pattern=${this.pattern}\n prefix-text=${this.prefixText}\n suffix-text=${this.suffixText}\n supporting-text=${this.supportingText}\n inputMode=${this.inputMode}\n type=${this.type}\n label=${this.label}\n name=${this.name}\n .value=${this.value ?? ''}\n @beforeinput=${this.onBeforeInput}\n @input=${this.onInput}\n ${spread(this._effectiveAriaAttributes)}\n >\n ${\n this.leadingIcon\n ? html`<ix-icon slot=\"leading-icon\">${this.leadingIcon}</ix-icon>`\n : nothing\n }\n ${\n this.searchEnabled && this.hasText && this.value.length > 1\n ? html`<div\n style=\"font-size: 14px; align-items: center;\"\n slot=\"trailing-icon\"\n >\n ${this.setSearchResultText()}\n </div>`\n : nothing\n }\n ${\n this.searchEnabled && this.searchResultCount > 0\n ? html`<ix-icon\n style=\"padding: 0px 3px; align-items: center; cursor: pointer;\"\n slot=\"trailing-icon\"\n @click=${(ev: CustomEvent) =>\n this.onSearchNavigation(ev, 'previous')}\n >chevron_left</ix-icon\n >\n\n <ix-icon\n slot=\"trailing-icon\"\n style=\"padding: 0px 3px; align-items: center; cursor: pointer;\"\n @click=${(ev: CustomEvent) =>\n this.onSearchNavigation(ev, 'next')}\n >chevron_right</ix-icon\n >`\n : nothing\n }\n ${\n this.hasText\n ? html`<ix-icon\n style=\"padding: 0px 3px; align-items: center; cursor: pointer;\"\n slot=\"trailing-icon\"\n @click=${this.clearInput}\n >close</ix-icon\n >`\n : nothing\n }\n ${\n this.trailingIcon\n ? html`<ix-icon slot=\"trailing-icon\"\n >${this.trailingIcon}</ix-icon\n >`\n : nothing\n }\n </${tag}>\n ${\n this._characterLimitMessage\n ? html`<span\n class=\"character-limit-status\"\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n >${this._characterLimitMessage}</span\n >`\n : nothing\n }\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"IxTextbox.js","sourceRoot":"","sources":["../src/IxTextbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { html as staticHtml, StaticValue, literal } from 'lit/static-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport '@material/web/textfield/filled-text-field.js';\nimport '@material/web/textfield/outlined-text-field.js';\nimport {\n TextFieldType,\n UnsupportedTextFieldType,\n} from '@material/web/textfield/internal/text-field.js';\nimport { AriaForwardMixin } from '@digital-realty/ix-shared-fns/aria-forward-mixin.js';\nimport { spread } from '@open-wc/lit-helpers';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-phone-input/ix-phone-input.js';\n\nconst IxTextboxBase = AriaForwardMixin(LitElement);\n\nexport class IxTextbox extends IxTextboxBase {\n @query('.textfield')\n readonly component!: HTMLInputElement;\n\n @property({ type: Boolean, reflect: true }) filled = false;\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Gets or sets whether or not the text field is in a visually invalid state.\n *\n * Calling `reportValidity()` will automatically update `error`.\n */\n @property({ type: Boolean, reflect: true }) error = false;\n\n /**\n * The error message that replaces supporting text when `error` is true. If\n * `errorText` is an empty string, then the supporting text will continue to\n * show.\n *\n * Calling `reportValidity()` will automatically update `errorText` to the\n * native `validationMessage`.\n */\n @property({ attribute: 'error-text' }) errorText = '';\n\n @property() label = '';\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n /**\n * Screen-reader text appended to the label when `required` is true.\n * Defaults to \"required\" (English). Overridden for i18n by consumer apps.\n *\n * The visible asterisk (rendered by MD3 when `required` is true) is\n * kept as the visual affordance for sighted users; this string is\n * ONLY appended to the accessible name so NVDA reads\n * \"First name, required\" instead of \"First name, star\".\n */\n @property({ attribute: 'required-text' }) requiredText = 'required';\n\n /**\n * The current value of the text field. It is always a string.\n */\n @property() value = '';\n\n /**\n * The name of the text field. It is always a string.\n */\n @property() name = '';\n\n /**\n * An optional prefix to display before the input value.\n */\n @property({ attribute: 'prefix-text' }) prefixText = '';\n\n /**\n * An optional suffix to display after the input value.\n */\n @property({ attribute: 'suffix-text' }) suffixText = '';\n\n /**\n * Name of icon. It is always a string.\n */\n @property({ attribute: 'leading-icon' })\n leadingIcon = '';\n\n /**\n * Name of icon. It is always a string.\n */\n @property({ attribute: 'trailing-icon' })\n trailingIcon = '';\n\n /**\n * Enables navigation icons for search input types.\n */\n @property({ type: Boolean }) searchEnabled = false;\n\n /**\n * The number of search results found.\n */\n @property({ type: Number }) searchResultCount = 0;\n\n /**\n * The index of the selected search result. This property is 1-based (i.e. begins with 1, not zero-based).\n */\n @property({ type: Number }) searchResultIndex = 0;\n\n /**\n * Conveys additional information below the text field, such as how it should\n * be used.\n */\n @property({ attribute: 'supporting-text' }) supportingText = '';\n\n /**\n * Override the input text CSS `direction`. Useful for RTL languages that use\n * LTR notation for fractions.\n */\n @property({ attribute: 'text-direction' }) textDirection = '';\n\n /**\n * The number of rows to display for a `type=\"textarea\"` text field.\n * Defaults to 2.\n */\n @property({ type: Number }) rows = 2;\n\n // <input> properties\n @property({ reflect: true }) override inputMode = '';\n\n /**\n * Defines the greatest value in the range of permitted values.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max\n */\n @property() max = '';\n\n /**\n * The maximum number of characters a user can enter into the text field. Set\n * to -1 for none.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength\n */\n @property({ type: Number }) maxLength = -1;\n\n /**\n * Defines the most negative value in the range of permitted values.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min\n */\n @property() min = '';\n\n /**\n * The minimum number of characters a user can enter into the text field. Set\n * to -1 for none.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength\n */\n @property({ type: Number }) minLength = -1;\n\n /**\n * A regular expression that the text field's value must match to pass\n * constraint validation.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern\n */\n @property() pattern = '';\n\n @property({ reflect: true }) placeholder = '';\n\n /**\n * Indicates whether or not a user should be able to edit the text field's\n * value.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly\n */\n @property({ type: Boolean, reflect: true }) readOnly = false;\n\n /**\n * Indicates that input accepts multiple email addresses.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple\n */\n @property({ type: Boolean, reflect: true }) multiple = false;\n\n /**\n * Returns or sets the element's step attribute, which works with min and max\n * to limit the increments at which a numeric or date-time value can be set.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step\n */\n @property() step = '';\n\n /**\n * The `<input>` type to use, defaults to \"text\". The type greatly changes how\n * the text field behaves.\n *\n * Text fields support a limited number of `<input>` types:\n *\n * - text\n * - textarea\n * - email\n * - number\n * - password\n * - search\n * - tel\n * - url\n *\n * See\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types\n * for more details on each input type.\n */\n @property({ reflect: true })\n type: TextFieldType | UnsupportedTextFieldType = 'text';\n\n /**\n * Describes what, if any, type of autocomplete functionality the input\n * should provide.\n *\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\n @property({ reflect: true }) autocomplete = '';\n\n /**\n * True if the input has text.\n */\n @state() hasText: boolean = false;\n\n @state() private _characterLimitMessage = '';\n\n private _characterLimitAnnounced = false;\n\n textarea: HTMLTextAreaElement | null | undefined;\n\n handleKeydownHandler: any = undefined;\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.type === 'textarea') {\n this.addEventListener('input', this.resizeTextArea);\n this.addEventListener('keydown', this.resizeTextArea);\n window.addEventListener('load', this.resizeTextArea);\n }\n }\n\n async firstUpdated() {\n if (this.type === 'textarea') {\n if (this.component instanceof LitElement) {\n await this.component.updateComplete;\n }\n await this.updateComplete;\n\n this.textarea = this.component?.shadowRoot?.querySelector('textarea');\n this.resizeTextArea();\n if (\n this.textarea?.value &&\n this.textarea.selectionStart === this.textarea.value.length &&\n this.textarea.selectionEnd === this.textarea.value.length\n ) {\n this.textarea.setSelectionRange(0, 0);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this.handleKeydownHandler) {\n this.removeEventListener('input', this.resizeTextArea);\n this.removeEventListener('keydown', this.resizeTextArea);\n window.removeEventListener('load', this.resizeTextArea);\n }\n }\n\n resizeTextArea = () => {\n if (this.textarea) {\n this.textarea.style.height = 'auto';\n if (this.textarea.scrollHeight > 0) {\n this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n }\n }\n };\n\n focus() {\n this.component.focus();\n }\n\n protected createRenderRoot() {\n return this;\n }\n\n renderStyles() {\n return html`\n <style>\n [error] {\n --md-outlined-field-outline-width: 2px;\n }\n ix-textbox {\n &.comment {\n --md-outlined-text-field-container-shape: 32px;\n --md-outlined-text-field-outline-color: rgba(9, 34, 65, 0.12);\n --md-outlined-text-field-outline-width: 1px;\n --md-outlined-text-field-hover-outline-color: rgba(9, 34, 65, 0.12);\n --md-outlined-text-field-hover-outline-width: 1px;\n --md-outlined-text-field-focus-outline-color: rgba(9, 34, 65, 0.12);\n --md-outlined-text-field-focus-outline-width: 1px;\n --md-outlined-text-field-input-text-placeholder-color: rgba(\n 9,\n 34,\n 65,\n 0.42\n );\n --md-filled-text-field-focus-active-indicator-color: rgba(\n 9,\n 34,\n 65,\n 0.12\n );\n --md-outlined-text-field-input-text-color: rgb(9, 34, 65);\n --md-outlined-field-leading-space: 8px;\n }\n [type='textarea'] {\n resize: none;\n }\n }\n .character-limit-status {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n </style>\n `;\n }\n\n /**\n * Handles search navigation icon clicks and emits search-navigation event.\n */\n private onSearchNavigation(e: CustomEvent, direction: string) {\n this.dispatchEvent(\n new CustomEvent('search-navigation', {\n detail: { direction },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n /**\n * Handles input event and sets hasText state when an input event is received.\n */\n private onInput = (e: Event) => {\n const input = e.target as HTMLInputElement;\n this.hasText = input.value.length > 0;\n if (this.maxLength < 0 || input.value.length < this.maxLength) {\n this._characterLimitAnnounced = false;\n this._characterLimitMessage = '';\n }\n\n this.dispatchEvent(\n new CustomEvent('search-text-change', {\n detail: { searchText: input.value },\n })\n );\n };\n\n private onBeforeInput = (e: InputEvent) => {\n if (\n this.maxLength < 0 ||\n this.disabled ||\n this.readOnly ||\n !e.inputType.startsWith('insert')\n ) {\n return;\n }\n\n const input = e.composedPath()[0] as HTMLInputElement | HTMLTextAreaElement;\n if (!('value' in input)) return;\n\n const selectionStart = input.selectionStart ?? input.value.length;\n const selectionEnd = input.selectionEnd ?? selectionStart;\n const selectedLength = selectionEnd - selectionStart;\n const insertedText =\n e.data ??\n (e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph'\n ? '\\n'\n : '');\n const proposedLength =\n input.value.length - selectedLength + insertedText.length;\n\n if (proposedLength > this.maxLength && !this._characterLimitAnnounced) {\n this._characterLimitAnnounced = true;\n this._characterLimitMessage = `Maximum ${this.maxLength} characters reached.`;\n }\n };\n\n /**\n * Clears the input field and resets hasText state.\n */\n private clearInput = () => {\n this.value = '';\n this.hasText = false;\n // The field is uncontrolled while typing (onInput doesn't write back to\n // this.value), so this.value is already '' and the `.value` binding won't\n // re-apply. Clear the rendered field directly so the visible text goes too.\n if (this.component) this.component.value = '';\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n // Mirror onInput so search consumers (e.g. ix-search-bar) react to the clear —\n // the bare `input` event above doesn't retrigger onInput, so without this they\n // keep stale results/dropdown after the field is cleared.\n this.dispatchEvent(\n new CustomEvent('search-text-change', {\n detail: { searchText: '' },\n })\n );\n };\n\n /**\n * Sets the search result text based on the current search state.\n * @returns The search result text.\n */\n private setSearchResultText(): string {\n if (this.searchResultCount === 0) {\n return `${this.searchResultCount} results`;\n }\n\n if (this.searchResultIndex === 0) {\n return `${this.searchResultCount} results`;\n }\n\n return `${this.searchResultIndex}/${this.searchResultCount} results`;\n }\n\n /**\n * Merge consumer-supplied ARIA attributes with the required-field\n * accessible name. MD3 renders a visual asterisk but does not expose a\n * useful spoken cue in every screen reader.\n *\n * This getter injects `aria-label=\"${label}, ${requiredText}\"` when\n * required, but only if the consumer has not supplied their own\n * `aria-label`, in which case their value takes precedence. It also sets\n * `aria-required=\"true\"` when required.\n */\n private get _effectiveAriaAttributes(): Record<string, string> {\n const merged: Record<string, string> = { ...this.ariaAttributes };\n if (this.required) {\n merged['aria-required'] = 'true';\n if (!merged['aria-label'] && this.label) {\n merged['aria-label'] = `${this.label}, ${this.requiredText}`;\n }\n }\n return merged;\n }\n\n protected override render() {\n if (this.type === 'tel') {\n return html`<ix-phone-input\n class=\"textfield\"\n style=\"display: block;\"\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?error=${this.error}\n error-text=${this.errorText}\n supporting-text=${this.supportingText}\n type=${this.type}\n label=${this.label}\n name=${this.name}\n .value=${this.value ?? ''}\n ${spread(this._effectiveAriaAttributes)}\n ></ix-phone-input>`;\n }\n\n const tag: StaticValue = this.filled\n ? literal`md-filled-text-field`\n : literal`md-outlined-text-field`;\n\n return staticHtml`\n ${this.renderStyles()}\n <${tag}\n class=\"textfield\"\n style=\"display: block;\"\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?error=${this.error}\n ?multipule=${this.multiple}\n ?readOnly=${this.readOnly}\n ?has-leading-icon=${this.leadingIcon.length > 0}\n ?has-trailing-icon=${this.trailingIcon.length > 0}\n step=${this.step || nothing}\n autocomplete=${this.autocomplete || nothing}\n error-text=${this.errorText}\n placeholder=${this.placeholder}\n text-direction=${this.textDirection}\n rows=${this.rows}\n max=${this.max}\n maxLength=${this.maxLength}\n min=${this.min}\n minLength=${this.minLength}\n pattern=${this.pattern}\n prefix-text=${this.prefixText}\n suffix-text=${this.suffixText}\n supporting-text=${this.supportingText}\n inputMode=${this.inputMode}\n type=${this.type}\n label=${this.label}\n name=${this.name}\n .value=${this.value ?? ''}\n @beforeinput=${this.onBeforeInput}\n @input=${this.onInput}\n ${spread(this._effectiveAriaAttributes)}\n >\n ${\n this.leadingIcon\n ? html`<ix-icon slot=\"leading-icon\">${this.leadingIcon}</ix-icon>`\n : nothing\n }\n ${\n this.searchEnabled && this.hasText && this.value.length > 1\n ? html`<div\n style=\"font-size: 14px; align-items: center;\"\n slot=\"trailing-icon\"\n >\n ${this.setSearchResultText()}\n </div>`\n : nothing\n }\n ${\n this.searchEnabled && this.searchResultCount > 0\n ? html`<ix-icon\n style=\"padding: 0px 3px; align-items: center; cursor: pointer;\"\n slot=\"trailing-icon\"\n @click=${(ev: CustomEvent) =>\n this.onSearchNavigation(ev, 'previous')}\n >chevron_left</ix-icon\n >\n\n <ix-icon\n slot=\"trailing-icon\"\n style=\"padding: 0px 3px; align-items: center; cursor: pointer;\"\n @click=${(ev: CustomEvent) =>\n this.onSearchNavigation(ev, 'next')}\n >chevron_right</ix-icon\n >`\n : nothing\n }\n ${\n this.hasText\n ? html`<ix-icon\n style=\"padding: 0px 3px; align-items: center; cursor: pointer;\"\n slot=\"trailing-icon\"\n @click=${this.clearInput}\n >close</ix-icon\n >`\n : nothing\n }\n ${\n this.trailingIcon\n ? html`<ix-icon slot=\"trailing-icon\"\n >${this.trailingIcon}</ix-icon\n >`\n : nothing\n }\n </${tag}>\n ${\n this._characterLimitMessage\n ? html`<span\n class=\"character-limit-status\"\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n >${this._characterLimitMessage}</span\n >`\n : nothing\n }\n `;\n }\n}\n"]}
@@ -1,4 +1,4 @@
1
- import{__decorate as t}from"tslib";import{LitElement as e,html as i,nothing as r}from"lit";import{literal as o,html as s}from"lit/static-html.js";import{query as a,property as n,state as l}from"lit/decorators.js";import"@material/web/textfield/filled-text-field.js";import"@material/web/textfield/outlined-text-field.js";import{AriaForwardMixin as h}from"@digital-realty/ix-shared-fns/aria-forward-mixin.js";import{spread as d}from"@open-wc/lit-helpers";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-phone-input/ix-phone-input.js";const p=h(e);class c extends p{constructor(){super(...arguments),this.filled=!1,this.disabled=!1,this.error=!1,this.errorText="",this.label="",this.required=!1,this.requiredText="required",this.value="",this.name="",this.prefixText="",this.suffixText="",this.leadingIcon="",this.trailingIcon="",this.searchEnabled=!1,this.searchResultCount=0,this.searchResultIndex=0,this.supportingText="",this.textDirection="",this.rows=2,this.inputMode="",this.max="",this.maxLength=-1,this.min="",this.minLength=-1,this.pattern="",this.placeholder="",this.readOnly=!1,this.multiple=!1,this.step="",this.type="text",this.autocomplete="",this.hasText=!1,this._characterLimitMessage="",this._characterLimitAnnounced=!1,this.handleKeydownHandler=void 0,this.resizeTextArea=()=>{this.textarea&&(this.textarea.style.height="auto",this.textarea.scrollHeight>0&&(this.textarea.style.height=`${this.textarea.scrollHeight}px`))},this.onInput=t=>{const e=t.target;this.hasText=e.value.length>0,(this.maxLength<0||e.value.length<this.maxLength)&&(this._characterLimitAnnounced=!1,this._characterLimitMessage=""),this.dispatchEvent(new CustomEvent("search-text-change",{detail:{searchText:e.value}}))},this.onBeforeInput=t=>{var e,i,r;if(this.maxLength<0||this.disabled||this.readOnly||!t.inputType.startsWith("insert"))return;const o=t.composedPath()[0];if(!("value"in o))return;const s=null!==(e=o.selectionStart)&&void 0!==e?e:o.value.length,a=(null!==(i=o.selectionEnd)&&void 0!==i?i:s)-s,n=null!==(r=t.data)&&void 0!==r?r:"insertLineBreak"===t.inputType||"insertParagraph"===t.inputType?"\n":"";o.value.length-a+n.length>this.maxLength&&!this._characterLimitAnnounced&&(this._characterLimitAnnounced=!0,this._characterLimitMessage=`Maximum ${this.maxLength} characters reached.`)},this.clearInput=()=>{this.value="",this.hasText=!1,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),"textarea"===this.type&&(this.addEventListener("input",this.resizeTextArea),this.addEventListener("keydown",this.resizeTextArea),window.addEventListener("load",this.resizeTextArea))}async firstUpdated(){var t,i,r;"textarea"===this.type&&(this.component instanceof e&&await this.component.updateComplete,await this.updateComplete,this.textarea=null===(i=null===(t=this.component)||void 0===t?void 0:t.shadowRoot)||void 0===i?void 0:i.querySelector("textarea"),this.resizeTextArea(),(null===(r=this.textarea)||void 0===r?void 0:r.value)&&this.textarea.selectionStart===this.textarea.value.length&&this.textarea.selectionEnd===this.textarea.value.length&&this.textarea.setSelectionRange(0,0))}disconnectedCallback(){super.disconnectedCallback(),this.handleKeydownHandler&&(this.removeEventListener("input",this.resizeTextArea),this.removeEventListener("keydown",this.resizeTextArea),window.removeEventListener("load",this.resizeTextArea))}focus(){this.component.focus()}createRenderRoot(){return this}renderStyles(){return i`
1
+ import{__decorate as t}from"tslib";import{LitElement as e,html as i,nothing as r}from"lit";import{literal as o,html as s}from"lit/static-html.js";import{query as a,property as n,state as l}from"lit/decorators.js";import"@material/web/textfield/filled-text-field.js";import"@material/web/textfield/outlined-text-field.js";import{AriaForwardMixin as h}from"@digital-realty/ix-shared-fns/aria-forward-mixin.js";import{spread as d}from"@open-wc/lit-helpers";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-phone-input/ix-phone-input.js";const p=h(e);class c extends p{constructor(){super(...arguments),this.filled=!1,this.disabled=!1,this.error=!1,this.errorText="",this.label="",this.required=!1,this.requiredText="required",this.value="",this.name="",this.prefixText="",this.suffixText="",this.leadingIcon="",this.trailingIcon="",this.searchEnabled=!1,this.searchResultCount=0,this.searchResultIndex=0,this.supportingText="",this.textDirection="",this.rows=2,this.inputMode="",this.max="",this.maxLength=-1,this.min="",this.minLength=-1,this.pattern="",this.placeholder="",this.readOnly=!1,this.multiple=!1,this.step="",this.type="text",this.autocomplete="",this.hasText=!1,this._characterLimitMessage="",this._characterLimitAnnounced=!1,this.handleKeydownHandler=void 0,this.resizeTextArea=()=>{this.textarea&&(this.textarea.style.height="auto",this.textarea.scrollHeight>0&&(this.textarea.style.height=`${this.textarea.scrollHeight}px`))},this.onInput=t=>{const e=t.target;this.hasText=e.value.length>0,(this.maxLength<0||e.value.length<this.maxLength)&&(this._characterLimitAnnounced=!1,this._characterLimitMessage=""),this.dispatchEvent(new CustomEvent("search-text-change",{detail:{searchText:e.value}}))},this.onBeforeInput=t=>{var e,i,r;if(this.maxLength<0||this.disabled||this.readOnly||!t.inputType.startsWith("insert"))return;const o=t.composedPath()[0];if(!("value"in o))return;const s=null!==(e=o.selectionStart)&&void 0!==e?e:o.value.length,a=(null!==(i=o.selectionEnd)&&void 0!==i?i:s)-s,n=null!==(r=t.data)&&void 0!==r?r:"insertLineBreak"===t.inputType||"insertParagraph"===t.inputType?"\n":"";o.value.length-a+n.length>this.maxLength&&!this._characterLimitAnnounced&&(this._characterLimitAnnounced=!0,this._characterLimitMessage=`Maximum ${this.maxLength} characters reached.`)},this.clearInput=()=>{this.value="",this.hasText=!1,this.component&&(this.component.value=""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("search-text-change",{detail:{searchText:""}}))}}connectedCallback(){super.connectedCallback(),"textarea"===this.type&&(this.addEventListener("input",this.resizeTextArea),this.addEventListener("keydown",this.resizeTextArea),window.addEventListener("load",this.resizeTextArea))}async firstUpdated(){var t,i,r;"textarea"===this.type&&(this.component instanceof e&&await this.component.updateComplete,await this.updateComplete,this.textarea=null===(i=null===(t=this.component)||void 0===t?void 0:t.shadowRoot)||void 0===i?void 0:i.querySelector("textarea"),this.resizeTextArea(),(null===(r=this.textarea)||void 0===r?void 0:r.value)&&this.textarea.selectionStart===this.textarea.value.length&&this.textarea.selectionEnd===this.textarea.value.length&&this.textarea.setSelectionRange(0,0))}disconnectedCallback(){super.disconnectedCallback(),this.handleKeydownHandler&&(this.removeEventListener("input",this.resizeTextArea),this.removeEventListener("keydown",this.resizeTextArea),window.removeEventListener("load",this.resizeTextArea))}focus(){this.component.focus()}createRenderRoot(){return this}renderStyles(){return i`
2
2
  <style>
3
3
  [error] {
4
4
  --md-outlined-field-outline-width: 2px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digital-realty/ix-textbox",
3
- "version": "2.4.6",
3
+ "version": "2.4.7-IXUAT-11250.561445",
4
4
  "description": "Webcomponent ix-textbox following open-wc recommendations",
5
5
  "license": "MIT",
6
6
  "author": "Digital Realty",
@@ -106,5 +106,5 @@
106
106
  "README.md",
107
107
  "LICENSE"
108
108
  ],
109
- "gitHead": "ff1bc94054ea7c7c585d1e59c921624748cdb08f"
109
+ "gitHead": "90d9f5f84eb6e85ef7c6d4ec01925b4a03112835"
110
110
  }