@spectrum-web-components/textfield 0.34.0 → 0.35.0
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/custom-elements.json +18 -0
- package/package.json +9 -9
- package/src/Textfield.d.ts +1 -0
- package/src/Textfield.dev.js +12 -5
- package/src/Textfield.dev.js.map +2 -2
- package/src/Textfield.js +13 -9
- package/src/Textfield.js.map +2 -2
- package/src/textfield.css.dev.js +2 -22
- package/src/textfield.css.dev.js.map +2 -2
- package/src/textfield.css.js +2 -22
- package/src/textfield.css.js.map +2 -2
- package/stories/textarea.stories.js +33 -1
- package/stories/textarea.stories.js.map +2 -2
- package/test/textfield.test.js +71 -1
- package/test/textfield.test.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -26,6 +26,13 @@
|
|
|
26
26
|
"description": "",
|
|
27
27
|
"name": "TextfieldBase",
|
|
28
28
|
"members": [
|
|
29
|
+
{
|
|
30
|
+
"kind": "field",
|
|
31
|
+
"name": "appliedLabel",
|
|
32
|
+
"type": {
|
|
33
|
+
"text": "string | undefined"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
29
36
|
{
|
|
30
37
|
"kind": "field",
|
|
31
38
|
"name": "allowedKeys",
|
|
@@ -602,6 +609,17 @@
|
|
|
602
609
|
"module": "src/Textfield.js"
|
|
603
610
|
}
|
|
604
611
|
},
|
|
612
|
+
{
|
|
613
|
+
"kind": "field",
|
|
614
|
+
"name": "appliedLabel",
|
|
615
|
+
"type": {
|
|
616
|
+
"text": "string | undefined"
|
|
617
|
+
},
|
|
618
|
+
"inheritedFrom": {
|
|
619
|
+
"name": "TextfieldBase",
|
|
620
|
+
"module": "src/Textfield.js"
|
|
621
|
+
}
|
|
622
|
+
},
|
|
605
623
|
{
|
|
606
624
|
"kind": "field",
|
|
607
625
|
"name": "allowedKeys",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/textfield",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.35.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -57,15 +57,15 @@
|
|
|
57
57
|
"lit-html"
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@spectrum-web-components/base": "^0.
|
|
61
|
-
"@spectrum-web-components/help-text": "^0.
|
|
62
|
-
"@spectrum-web-components/icon": "^0.
|
|
63
|
-
"@spectrum-web-components/icons-ui": "^0.
|
|
64
|
-
"@spectrum-web-components/icons-workflow": "^0.
|
|
65
|
-
"@spectrum-web-components/shared": "^0.
|
|
60
|
+
"@spectrum-web-components/base": "^0.35.0",
|
|
61
|
+
"@spectrum-web-components/help-text": "^0.35.0",
|
|
62
|
+
"@spectrum-web-components/icon": "^0.35.0",
|
|
63
|
+
"@spectrum-web-components/icons-ui": "^0.35.0",
|
|
64
|
+
"@spectrum-web-components/icons-workflow": "^0.35.0",
|
|
65
|
+
"@spectrum-web-components/shared": "^0.35.0"
|
|
66
66
|
},
|
|
67
67
|
"devDependencies": {
|
|
68
|
-
"@spectrum-css/textfield": "^6.0.
|
|
68
|
+
"@spectrum-css/textfield": "^6.0.7"
|
|
69
69
|
},
|
|
70
70
|
"types": "./src/index.d.ts",
|
|
71
71
|
"customElements": "custom-elements.json",
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"./sp-*.js",
|
|
74
74
|
"./**/*.dev.js"
|
|
75
75
|
],
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "1ee5a6c92838cdf48321276d97f61c20f8476ac1"
|
|
77
77
|
}
|
package/src/Textfield.d.ts
CHANGED
|
@@ -17,6 +17,7 @@ declare const TextfieldBase_base: typeof Focusable & {
|
|
|
17
17
|
*/
|
|
18
18
|
export declare class TextfieldBase extends TextfieldBase_base {
|
|
19
19
|
static get styles(): CSSResultArray;
|
|
20
|
+
appliedLabel?: string;
|
|
20
21
|
allowedKeys: string;
|
|
21
22
|
focused: boolean;
|
|
22
23
|
protected inputElement: HTMLInputElement | HTMLTextAreaElement;
|
package/src/Textfield.dev.js
CHANGED
|
@@ -154,13 +154,15 @@ export class TextfieldBase extends ManageHelpText(
|
|
|
154
154
|
}
|
|
155
155
|
get renderMultiline() {
|
|
156
156
|
return html`
|
|
157
|
-
${this.grows &&
|
|
158
|
-
<div id="sizer"
|
|
157
|
+
${this.grows && this.rows === -1 ? html`
|
|
158
|
+
<div id="sizer" class="input" aria-hidden="true">
|
|
159
|
+
${this.value}​
|
|
160
|
+
</div>
|
|
159
161
|
` : nothing}
|
|
160
162
|
<!-- @ts-ignore -->
|
|
161
163
|
<textarea
|
|
162
164
|
aria-describedby=${this.helpTextId}
|
|
163
|
-
aria-label=${this.label || this.placeholder}
|
|
165
|
+
aria-label=${this.label || this.appliedLabel || this.placeholder}
|
|
164
166
|
aria-invalid=${ifDefined(this.invalid || void 0)}
|
|
165
167
|
class="input"
|
|
166
168
|
maxlength=${ifDefined(
|
|
@@ -169,6 +171,7 @@ export class TextfieldBase extends ManageHelpText(
|
|
|
169
171
|
minlength=${ifDefined(
|
|
170
172
|
this.minlength > -1 ? this.minlength : void 0
|
|
171
173
|
)}
|
|
174
|
+
title=${this.invalid ? "" : nothing}
|
|
172
175
|
pattern=${ifDefined(this.pattern)}
|
|
173
176
|
placeholder=${this.placeholder}
|
|
174
177
|
.value=${this.displayValue}
|
|
@@ -190,9 +193,10 @@ export class TextfieldBase extends ManageHelpText(
|
|
|
190
193
|
<input
|
|
191
194
|
type=${this.type}
|
|
192
195
|
aria-describedby=${this.helpTextId}
|
|
193
|
-
aria-label=${this.label || this.placeholder}
|
|
196
|
+
aria-label=${this.label || this.appliedLabel || this.placeholder}
|
|
194
197
|
aria-invalid=${ifDefined(this.invalid || void 0)}
|
|
195
198
|
class="input"
|
|
199
|
+
title=${this.invalid ? "" : nothing}
|
|
196
200
|
maxlength=${ifDefined(
|
|
197
201
|
this.maxlength > -1 ? this.maxlength : void 0
|
|
198
202
|
)}
|
|
@@ -249,6 +253,9 @@ export class TextfieldBase extends ManageHelpText(
|
|
|
249
253
|
return validity;
|
|
250
254
|
}
|
|
251
255
|
}
|
|
256
|
+
__decorateClass([
|
|
257
|
+
state()
|
|
258
|
+
], TextfieldBase.prototype, "appliedLabel", 2);
|
|
252
259
|
__decorateClass([
|
|
253
260
|
property({ attribute: "allowed-keys" })
|
|
254
261
|
], TextfieldBase.prototype, "allowedKeys", 2);
|
|
@@ -256,7 +263,7 @@ __decorateClass([
|
|
|
256
263
|
property({ type: Boolean, reflect: true })
|
|
257
264
|
], TextfieldBase.prototype, "focused", 2);
|
|
258
265
|
__decorateClass([
|
|
259
|
-
query(".input")
|
|
266
|
+
query(".input:not(#sizer)")
|
|
260
267
|
], TextfieldBase.prototype, "inputElement", 2);
|
|
261
268
|
__decorateClass([
|
|
262
269
|
property({ type: Boolean, reflect: true })
|
package/src/Textfield.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Textfield.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n ifDefined,\n live,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\n\nimport textfieldStyles from './textfield.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\n\nconst textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;\nexport type TextfieldType = typeof textfieldTypes[number];\n\n/**\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class TextfieldBase extends ManageHelpText(\n SizedMixin(Focusable, {\n noDefaultSize: true,\n })\n) {\n public static override get styles(): CSSResultArray {\n return [textfieldStyles, checkmarkStyles];\n }\n\n @property({ attribute: 'allowed-keys' })\n allowedKeys = '';\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @query('.input')\n protected inputElement!: HTMLInputElement | HTMLTextAreaElement;\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property()\n public label = '';\n\n @property()\n public placeholder = '';\n\n @property({ attribute: 'type', reflect: true })\n private _type: TextfieldType = 'text';\n\n @state()\n get type(): TextfieldType {\n return textfieldTypes.find((t) => t === this._type) ?? 'text';\n }\n\n set type(val: TextfieldType) {\n const prev = this._type;\n this._type = val;\n this.requestUpdate('type', prev);\n }\n\n @property()\n public pattern?: string;\n\n @property({ type: Boolean, reflect: true })\n public grows = false;\n\n @property({ type: Number })\n public maxlength = -1;\n\n @property({ type: Number })\n public minlength = -1;\n\n @property({ type: Boolean, reflect: true })\n public multiline = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n @property({ type: Number })\n public rows = -1;\n\n @property({ type: Boolean, reflect: true })\n public valid = false;\n\n @property({ type: String })\n public set value(value: string | number) {\n if (value === this.value) {\n return;\n }\n const oldValue = this._value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n public get value(): string | number {\n return this._value;\n }\n\n protected _value: string | number = '';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: Boolean, reflect: true })\n public required = false;\n\n @property({ type: String, reflect: true })\n public autocomplete?:\n | HTMLInputElement['autocomplete']\n | HTMLTextAreaElement['autocomplete'];\n\n public override get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n return this.inputElement;\n }\n\n /**\n * Sets the start and end positions of the current selection.\n *\n * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the\n * element's value is treated as pointing to the end of the value.\n * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than\n * the length of the element's value is treated as pointing to the end of the value.\n * @param [selectionDirection=\"none\"] A string indicating the direction in which the selection is considered to\n * have been performed.\n */\n public setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n ): void {\n this.inputElement.setSelectionRange(\n selectionStart,\n selectionEnd,\n selectionDirection\n );\n }\n\n /**\n * Selects all the text.\n */\n public select(): void {\n this.inputElement.select();\n }\n\n protected handleInput(): void {\n if (this.allowedKeys && this.inputElement.value) {\n const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');\n if (!regExp.test(this.inputElement.value)) {\n const selectionStart = this.inputElement\n .selectionStart as number;\n const nextSelectStart = selectionStart - 1;\n this.inputElement.value = this.value.toString();\n this.inputElement.setSelectionRange(\n nextSelectStart,\n nextSelectStart\n );\n return;\n }\n }\n this.value = this.inputElement.value;\n }\n\n protected handleChange(): void {\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n protected onFocus(): void {\n this.focused = !this.readonly && true;\n }\n\n protected onBlur(): void {\n this.focused = !this.readonly && false;\n }\n\n protected renderStateIcons(): TemplateResult | typeof nothing {\n if (this.invalid) {\n return html`\n <sp-icon-alert id=\"invalid\" class=\"icon\"></sp-icon-alert>\n `;\n } else if (this.valid) {\n return html`\n <sp-icon-checkmark100\n id=\"valid\"\n class=\"icon spectrum-UIIcon-Checkmark100\"\n ></sp-icon-checkmark100>\n `;\n }\n return nothing;\n }\n\n protected get displayValue(): string {\n return this.value.toString();\n }\n\n private get renderMultiline(): TemplateResult {\n return html`\n ${this.grows && !this.quiet && this.rows === -1\n ? html`\n <div id=\"sizer\">${this.value}​</div>\n `\n : nothing}\n <!-- @ts-ignore -->\n <textarea\n aria-describedby=${this.helpTextId}\n aria-label=${this.label || this.placeholder}\n aria-invalid=${ifDefined(this.invalid || undefined)}\n class=\"input\"\n maxlength=${ifDefined(\n this.maxlength > -1 ? this.maxlength : undefined\n )}\n minlength=${ifDefined(\n this.minlength > -1 ? this.minlength : undefined\n )}\n pattern=${ifDefined(this.pattern)}\n placeholder=${this.placeholder}\n .value=${this.displayValue}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.onFocus}\n @blur=${this.onBlur}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n rows=${ifDefined(this.rows > -1 ? this.rows : undefined)}\n autocomplete=${ifDefined(this.autocomplete)}\n ></textarea>\n `;\n }\n\n private get renderInput(): TemplateResult {\n return html`\n <!-- @ts-ignore -->\n <input\n type=${this.type}\n aria-describedby=${this.helpTextId}\n aria-label=${this.label || this.placeholder}\n aria-invalid=${ifDefined(this.invalid || undefined)}\n class=\"input\"\n maxlength=${ifDefined(\n this.maxlength > -1 ? this.maxlength : undefined\n )}\n minlength=${ifDefined(\n this.minlength > -1 ? this.minlength : undefined\n )}\n pattern=${ifDefined(this.pattern)}\n placeholder=${this.placeholder}\n .value=${live(this.displayValue)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.onFocus}\n @blur=${this.onBlur}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n autocomplete=${ifDefined(this.autocomplete)}\n />\n `;\n }\n\n protected renderField(): TemplateResult {\n return html`\n ${this.renderStateIcons()}\n ${this.multiline ? this.renderMultiline : this.renderInput}\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n <div id=\"textfield\">${this.renderField()}</div>\n ${this.renderHelpText(this.invalid)}\n `;\n }\n\n protected override update(changedProperties: PropertyValues): void {\n if (\n changedProperties.has('value') ||\n (changedProperties.has('required') && this.required)\n ) {\n this.updateComplete.then(() => {\n this.checkValidity();\n });\n }\n super.update(changedProperties);\n }\n\n public checkValidity(): boolean {\n let validity = this.inputElement.checkValidity();\n if (this.required || (this.value && this.pattern)) {\n if ((this.disabled || this.multiline) && this.pattern) {\n const regex = new RegExp(`^${this.pattern}$`, 'u');\n validity = regex.test(this.value.toString());\n }\n if (typeof this.minlength !== 'undefined') {\n validity =\n validity && this.value.toString().length >= this.minlength;\n }\n this.valid = validity;\n this.invalid = !validity;\n }\n return validity;\n }\n}\n\n/**\n * @element sp-textfield\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n */\nexport class Textfield extends TextfieldBase {\n @property({ type: String })\n public override set value(value: string) {\n if (value === this.value) {\n return;\n }\n const oldValue = this._value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n public override get value(): string {\n return this._value;\n }\n\n protected override _value = '';\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,OAAO;AACP,OAAO;AAEP,OAAO,qBAAqB;AAC5B,OAAO,qBAAqB;AAE5B,MAAM,iBAAiB,CAAC,QAAQ,OAAO,OAAO,SAAS,UAAU;AAO1D,aAAM,sBAAsB;AAAA,EAC/B,WAAW,WAAW;AAAA,IAClB,eAAe;AAAA,EACnB,CAAC;AACL,EAAE;AAAA,EAJK;AAAA;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n ifDefined,\n live,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\n\nimport textfieldStyles from './textfield.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\n\nconst textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;\nexport type TextfieldType = typeof textfieldTypes[number];\n\n/**\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class TextfieldBase extends ManageHelpText(\n SizedMixin(Focusable, {\n noDefaultSize: true,\n })\n) {\n public static override get styles(): CSSResultArray {\n return [textfieldStyles, checkmarkStyles];\n }\n\n @state()\n appliedLabel?: string;\n\n @property({ attribute: 'allowed-keys' })\n allowedKeys = '';\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @query('.input:not(#sizer)')\n protected inputElement!: HTMLInputElement | HTMLTextAreaElement;\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property()\n public label = '';\n\n @property()\n public placeholder = '';\n\n @property({ attribute: 'type', reflect: true })\n private _type: TextfieldType = 'text';\n\n @state()\n get type(): TextfieldType {\n return textfieldTypes.find((t) => t === this._type) ?? 'text';\n }\n\n set type(val: TextfieldType) {\n const prev = this._type;\n this._type = val;\n this.requestUpdate('type', prev);\n }\n\n @property()\n public pattern?: string;\n\n @property({ type: Boolean, reflect: true })\n public grows = false;\n\n @property({ type: Number })\n public maxlength = -1;\n\n @property({ type: Number })\n public minlength = -1;\n\n @property({ type: Boolean, reflect: true })\n public multiline = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n @property({ type: Number })\n public rows = -1;\n\n @property({ type: Boolean, reflect: true })\n public valid = false;\n\n @property({ type: String })\n public set value(value: string | number) {\n if (value === this.value) {\n return;\n }\n const oldValue = this._value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n public get value(): string | number {\n return this._value;\n }\n\n protected _value: string | number = '';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: Boolean, reflect: true })\n public required = false;\n\n @property({ type: String, reflect: true })\n public autocomplete?:\n | HTMLInputElement['autocomplete']\n | HTMLTextAreaElement['autocomplete'];\n\n public override get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n return this.inputElement;\n }\n\n /**\n * Sets the start and end positions of the current selection.\n *\n * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the\n * element's value is treated as pointing to the end of the value.\n * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than\n * the length of the element's value is treated as pointing to the end of the value.\n * @param [selectionDirection=\"none\"] A string indicating the direction in which the selection is considered to\n * have been performed.\n */\n public setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n ): void {\n this.inputElement.setSelectionRange(\n selectionStart,\n selectionEnd,\n selectionDirection\n );\n }\n\n /**\n * Selects all the text.\n */\n public select(): void {\n this.inputElement.select();\n }\n\n protected handleInput(): void {\n if (this.allowedKeys && this.inputElement.value) {\n const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');\n if (!regExp.test(this.inputElement.value)) {\n const selectionStart = this.inputElement\n .selectionStart as number;\n const nextSelectStart = selectionStart - 1;\n this.inputElement.value = this.value.toString();\n this.inputElement.setSelectionRange(\n nextSelectStart,\n nextSelectStart\n );\n return;\n }\n }\n this.value = this.inputElement.value;\n }\n\n protected handleChange(): void {\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n protected onFocus(): void {\n this.focused = !this.readonly && true;\n }\n\n protected onBlur(): void {\n this.focused = !this.readonly && false;\n }\n\n protected renderStateIcons(): TemplateResult | typeof nothing {\n if (this.invalid) {\n return html`\n <sp-icon-alert id=\"invalid\" class=\"icon\"></sp-icon-alert>\n `;\n } else if (this.valid) {\n return html`\n <sp-icon-checkmark100\n id=\"valid\"\n class=\"icon spectrum-UIIcon-Checkmark100\"\n ></sp-icon-checkmark100>\n `;\n }\n return nothing;\n }\n\n protected get displayValue(): string {\n return this.value.toString();\n }\n\n private get renderMultiline(): TemplateResult {\n return html`\n ${this.grows && this.rows === -1\n ? html`\n <div id=\"sizer\" class=\"input\" aria-hidden=\"true\">\n ${this.value}​\n </div>\n `\n : nothing}\n <!-- @ts-ignore -->\n <textarea\n aria-describedby=${this.helpTextId}\n aria-label=${this.label ||\n this.appliedLabel ||\n this.placeholder}\n aria-invalid=${ifDefined(this.invalid || undefined)}\n class=\"input\"\n maxlength=${ifDefined(\n this.maxlength > -1 ? this.maxlength : undefined\n )}\n minlength=${ifDefined(\n this.minlength > -1 ? this.minlength : undefined\n )}\n title=${this.invalid ? '' : nothing}\n pattern=${ifDefined(this.pattern)}\n placeholder=${this.placeholder}\n .value=${this.displayValue}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.onFocus}\n @blur=${this.onBlur}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n rows=${ifDefined(this.rows > -1 ? this.rows : undefined)}\n autocomplete=${ifDefined(this.autocomplete)}\n ></textarea>\n `;\n }\n\n private get renderInput(): TemplateResult {\n return html`\n <!-- @ts-ignore -->\n <input\n type=${this.type}\n aria-describedby=${this.helpTextId}\n aria-label=${this.label ||\n this.appliedLabel ||\n this.placeholder}\n aria-invalid=${ifDefined(this.invalid || undefined)}\n class=\"input\"\n title=${this.invalid ? '' : nothing}\n maxlength=${ifDefined(\n this.maxlength > -1 ? this.maxlength : undefined\n )}\n minlength=${ifDefined(\n this.minlength > -1 ? this.minlength : undefined\n )}\n pattern=${ifDefined(this.pattern)}\n placeholder=${this.placeholder}\n .value=${live(this.displayValue)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.onFocus}\n @blur=${this.onBlur}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n autocomplete=${ifDefined(this.autocomplete)}\n />\n `;\n }\n\n protected renderField(): TemplateResult {\n return html`\n ${this.renderStateIcons()}\n ${this.multiline ? this.renderMultiline : this.renderInput}\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n <div id=\"textfield\">${this.renderField()}</div>\n ${this.renderHelpText(this.invalid)}\n `;\n }\n\n protected override update(changedProperties: PropertyValues): void {\n if (\n changedProperties.has('value') ||\n (changedProperties.has('required') && this.required)\n ) {\n this.updateComplete.then(() => {\n this.checkValidity();\n });\n }\n super.update(changedProperties);\n }\n\n public checkValidity(): boolean {\n let validity = this.inputElement.checkValidity();\n if (this.required || (this.value && this.pattern)) {\n if ((this.disabled || this.multiline) && this.pattern) {\n const regex = new RegExp(`^${this.pattern}$`, 'u');\n validity = regex.test(this.value.toString());\n }\n if (typeof this.minlength !== 'undefined') {\n validity =\n validity && this.value.toString().length >= this.minlength;\n }\n this.valid = validity;\n this.invalid = !validity;\n }\n return validity;\n }\n}\n\n/**\n * @element sp-textfield\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n */\nexport class Textfield extends TextfieldBase {\n @property({ type: String })\n public override set value(value: string) {\n if (value === this.value) {\n return;\n }\n const oldValue = this._value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n public override get value(): string {\n return this._value;\n }\n\n protected override _value = '';\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Textfield.js
CHANGED
|
@@ -1,22 +1,25 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var t=(u,a,e,l)=>{for(var r=l>1?void 0:l?m(a,e):a,o=u.length-1,h;o>=0;o--)(h=u[o])&&(r=(l?h(a,e,r):h(r))||r);return l&&r&&c(a,e,r),r};import{html as s,nothing as p,SizedMixin as v}from"@spectrum-web-components/base";import{ifDefined as n,live as y}from"@spectrum-web-components/base/src/directives.js";import{property as i,query as b,state as d}from"@spectrum-web-components/base/src/decorators.js";import{ManageHelpText as g}from"@spectrum-web-components/help-text/src/manage-help-text.js";import{Focusable as f}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import $ from"./textfield.css.js";import S from"@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";const E=["text","url","tel","email","password"];export class TextfieldBase extends g(v(f,{noDefaultSize:!0})){constructor(){super(...arguments);this.allowedKeys="";this.focused=!1;this.invalid=!1;this.label="";this.placeholder="";this._type="text";this.grows=!1;this.maxlength=-1;this.minlength=-1;this.multiline=!1;this.readonly=!1;this.rows=-1;this.valid=!1;this._value="";this.quiet=!1;this.required=!1}static get styles(){return[$,S]}get type(){var e;return(e=E.find(l=>l===this._type))!=null?e:"text"}set type(e){const l=this._type;this._type=e,this.requestUpdate("type",l)}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}get focusElement(){return this.inputElement}setSelectionRange(e,l,r="none"){this.inputElement.setSelectionRange(e,l,r)}select(){this.inputElement.select()}handleInput(){if(this.allowedKeys&&this.inputElement.value&&!new RegExp(`^[${this.allowedKeys}]*$`,"u").test(this.inputElement.value)){const r=this.inputElement.selectionStart-1;this.inputElement.value=this.value.toString(),this.inputElement.setSelectionRange(r,r);return}this.value=this.inputElement.value}handleChange(){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}onFocus(){this.focused=!this.readonly&&!0}onBlur(){this.focused=!this.readonly&&!1}renderStateIcons(){return this.invalid?s`
|
|
2
2
|
<sp-icon-alert id="invalid" class="icon"></sp-icon-alert>
|
|
3
3
|
`:this.valid?s`
|
|
4
4
|
<sp-icon-checkmark100
|
|
5
5
|
id="valid"
|
|
6
6
|
class="icon spectrum-UIIcon-Checkmark100"
|
|
7
7
|
></sp-icon-checkmark100>
|
|
8
|
-
`:
|
|
9
|
-
${this.grows
|
|
10
|
-
<div id="sizer"
|
|
11
|
-
|
|
8
|
+
`:p}get displayValue(){return this.value.toString()}get renderMultiline(){return s`
|
|
9
|
+
${this.grows&&this.rows===-1?s`
|
|
10
|
+
<div id="sizer" class="input" aria-hidden="true">
|
|
11
|
+
${this.value}​
|
|
12
|
+
</div>
|
|
13
|
+
`:p}
|
|
12
14
|
<!-- @ts-ignore -->
|
|
13
15
|
<textarea
|
|
14
16
|
aria-describedby=${this.helpTextId}
|
|
15
|
-
aria-label=${this.label||this.placeholder}
|
|
17
|
+
aria-label=${this.label||this.appliedLabel||this.placeholder}
|
|
16
18
|
aria-invalid=${n(this.invalid||void 0)}
|
|
17
19
|
class="input"
|
|
18
20
|
maxlength=${n(this.maxlength>-1?this.maxlength:void 0)}
|
|
19
21
|
minlength=${n(this.minlength>-1?this.minlength:void 0)}
|
|
22
|
+
title=${this.invalid?"":p}
|
|
20
23
|
pattern=${n(this.pattern)}
|
|
21
24
|
placeholder=${this.placeholder}
|
|
22
25
|
.value=${this.displayValue}
|
|
@@ -35,14 +38,15 @@
|
|
|
35
38
|
<input
|
|
36
39
|
type=${this.type}
|
|
37
40
|
aria-describedby=${this.helpTextId}
|
|
38
|
-
aria-label=${this.label||this.placeholder}
|
|
41
|
+
aria-label=${this.label||this.appliedLabel||this.placeholder}
|
|
39
42
|
aria-invalid=${n(this.invalid||void 0)}
|
|
40
43
|
class="input"
|
|
44
|
+
title=${this.invalid?"":p}
|
|
41
45
|
maxlength=${n(this.maxlength>-1?this.maxlength:void 0)}
|
|
42
46
|
minlength=${n(this.minlength>-1?this.minlength:void 0)}
|
|
43
47
|
pattern=${n(this.pattern)}
|
|
44
48
|
placeholder=${this.placeholder}
|
|
45
|
-
.value=${
|
|
49
|
+
.value=${y(this.displayValue)}
|
|
46
50
|
@change=${this.handleChange}
|
|
47
51
|
@input=${this.handleInput}
|
|
48
52
|
@focus=${this.onFocus}
|
|
@@ -58,5 +62,5 @@
|
|
|
58
62
|
`}render(){return s`
|
|
59
63
|
<div id="textfield">${this.renderField()}</div>
|
|
60
64
|
${this.renderHelpText(this.invalid)}
|
|
61
|
-
`}update(e){(e.has("value")||e.has("required")&&this.required)&&this.updateComplete.then(()=>{this.checkValidity()}),super.update(e)}checkValidity(){let e=this.inputElement.checkValidity();return(this.required||this.value&&this.pattern)&&((this.disabled||this.multiline)&&this.pattern&&(e=new RegExp(`^${this.pattern}$`,"u").test(this.value.toString())),typeof this.minlength!="undefined"&&(e=e&&this.value.toString().length>=this.minlength),this.valid=e,this.invalid=!e),e}}t([i({attribute:"allowed-keys"})],TextfieldBase.prototype,"allowedKeys",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"focused",2),t([
|
|
65
|
+
`}update(e){(e.has("value")||e.has("required")&&this.required)&&this.updateComplete.then(()=>{this.checkValidity()}),super.update(e)}checkValidity(){let e=this.inputElement.checkValidity();return(this.required||this.value&&this.pattern)&&((this.disabled||this.multiline)&&this.pattern&&(e=new RegExp(`^${this.pattern}$`,"u").test(this.value.toString())),typeof this.minlength!="undefined"&&(e=e&&this.value.toString().length>=this.minlength),this.valid=e,this.invalid=!e),e}}t([d()],TextfieldBase.prototype,"appliedLabel",2),t([i({attribute:"allowed-keys"})],TextfieldBase.prototype,"allowedKeys",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"focused",2),t([b(".input:not(#sizer)")],TextfieldBase.prototype,"inputElement",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"invalid",2),t([i()],TextfieldBase.prototype,"label",2),t([i()],TextfieldBase.prototype,"placeholder",2),t([i({attribute:"type",reflect:!0})],TextfieldBase.prototype,"_type",2),t([d()],TextfieldBase.prototype,"type",1),t([i()],TextfieldBase.prototype,"pattern",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"grows",2),t([i({type:Number})],TextfieldBase.prototype,"maxlength",2),t([i({type:Number})],TextfieldBase.prototype,"minlength",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"multiline",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"readonly",2),t([i({type:Number})],TextfieldBase.prototype,"rows",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"valid",2),t([i({type:String})],TextfieldBase.prototype,"value",1),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"quiet",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"required",2),t([i({type:String,reflect:!0})],TextfieldBase.prototype,"autocomplete",2);export class Textfield extends TextfieldBase{constructor(){super(...arguments);this._value=""}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}}t([i({type:String})],Textfield.prototype,"value",1);
|
|
62
66
|
//# sourceMappingURL=Textfield.js.map
|
package/src/Textfield.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Textfield.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n ifDefined,\n live,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\n\nimport textfieldStyles from './textfield.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\n\nconst textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;\nexport type TextfieldType = typeof textfieldTypes[number];\n\n/**\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class TextfieldBase extends ManageHelpText(\n SizedMixin(Focusable, {\n noDefaultSize: true,\n })\n) {\n public static override get styles(): CSSResultArray {\n return [textfieldStyles, checkmarkStyles];\n }\n\n @property({ attribute: 'allowed-keys' })\n allowedKeys = '';\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @query('.input')\n protected inputElement!: HTMLInputElement | HTMLTextAreaElement;\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property()\n public label = '';\n\n @property()\n public placeholder = '';\n\n @property({ attribute: 'type', reflect: true })\n private _type: TextfieldType = 'text';\n\n @state()\n get type(): TextfieldType {\n return textfieldTypes.find((t) => t === this._type) ?? 'text';\n }\n\n set type(val: TextfieldType) {\n const prev = this._type;\n this._type = val;\n this.requestUpdate('type', prev);\n }\n\n @property()\n public pattern?: string;\n\n @property({ type: Boolean, reflect: true })\n public grows = false;\n\n @property({ type: Number })\n public maxlength = -1;\n\n @property({ type: Number })\n public minlength = -1;\n\n @property({ type: Boolean, reflect: true })\n public multiline = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n @property({ type: Number })\n public rows = -1;\n\n @property({ type: Boolean, reflect: true })\n public valid = false;\n\n @property({ type: String })\n public set value(value: string | number) {\n if (value === this.value) {\n return;\n }\n const oldValue = this._value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n public get value(): string | number {\n return this._value;\n }\n\n protected _value: string | number = '';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: Boolean, reflect: true })\n public required = false;\n\n @property({ type: String, reflect: true })\n public autocomplete?:\n | HTMLInputElement['autocomplete']\n | HTMLTextAreaElement['autocomplete'];\n\n public override get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n return this.inputElement;\n }\n\n /**\n * Sets the start and end positions of the current selection.\n *\n * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the\n * element's value is treated as pointing to the end of the value.\n * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than\n * the length of the element's value is treated as pointing to the end of the value.\n * @param [selectionDirection=\"none\"] A string indicating the direction in which the selection is considered to\n * have been performed.\n */\n public setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n ): void {\n this.inputElement.setSelectionRange(\n selectionStart,\n selectionEnd,\n selectionDirection\n );\n }\n\n /**\n * Selects all the text.\n */\n public select(): void {\n this.inputElement.select();\n }\n\n protected handleInput(): void {\n if (this.allowedKeys && this.inputElement.value) {\n const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');\n if (!regExp.test(this.inputElement.value)) {\n const selectionStart = this.inputElement\n .selectionStart as number;\n const nextSelectStart = selectionStart - 1;\n this.inputElement.value = this.value.toString();\n this.inputElement.setSelectionRange(\n nextSelectStart,\n nextSelectStart\n );\n return;\n }\n }\n this.value = this.inputElement.value;\n }\n\n protected handleChange(): void {\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n protected onFocus(): void {\n this.focused = !this.readonly && true;\n }\n\n protected onBlur(): void {\n this.focused = !this.readonly && false;\n }\n\n protected renderStateIcons(): TemplateResult | typeof nothing {\n if (this.invalid) {\n return html`\n <sp-icon-alert id=\"invalid\" class=\"icon\"></sp-icon-alert>\n `;\n } else if (this.valid) {\n return html`\n <sp-icon-checkmark100\n id=\"valid\"\n class=\"icon spectrum-UIIcon-Checkmark100\"\n ></sp-icon-checkmark100>\n `;\n }\n return nothing;\n }\n\n protected get displayValue(): string {\n return this.value.toString();\n }\n\n private get renderMultiline(): TemplateResult {\n return html`\n ${this.grows && !this.quiet && this.rows === -1\n ? html`\n <div id=\"sizer\">${this.value}​</div>\n `\n : nothing}\n <!-- @ts-ignore -->\n <textarea\n aria-describedby=${this.helpTextId}\n aria-label=${this.label || this.placeholder}\n aria-invalid=${ifDefined(this.invalid || undefined)}\n class=\"input\"\n maxlength=${ifDefined(\n this.maxlength > -1 ? this.maxlength : undefined\n )}\n minlength=${ifDefined(\n this.minlength > -1 ? this.minlength : undefined\n )}\n pattern=${ifDefined(this.pattern)}\n placeholder=${this.placeholder}\n .value=${this.displayValue}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.onFocus}\n @blur=${this.onBlur}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n rows=${ifDefined(this.rows > -1 ? this.rows : undefined)}\n autocomplete=${ifDefined(this.autocomplete)}\n ></textarea>\n `;\n }\n\n private get renderInput(): TemplateResult {\n return html`\n <!-- @ts-ignore -->\n <input\n type=${this.type}\n aria-describedby=${this.helpTextId}\n aria-label=${this.label || this.placeholder}\n aria-invalid=${ifDefined(this.invalid || undefined)}\n class=\"input\"\n maxlength=${ifDefined(\n this.maxlength > -1 ? this.maxlength : undefined\n )}\n minlength=${ifDefined(\n this.minlength > -1 ? this.minlength : undefined\n )}\n pattern=${ifDefined(this.pattern)}\n placeholder=${this.placeholder}\n .value=${live(this.displayValue)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.onFocus}\n @blur=${this.onBlur}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n autocomplete=${ifDefined(this.autocomplete)}\n />\n `;\n }\n\n protected renderField(): TemplateResult {\n return html`\n ${this.renderStateIcons()}\n ${this.multiline ? this.renderMultiline : this.renderInput}\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n <div id=\"textfield\">${this.renderField()}</div>\n ${this.renderHelpText(this.invalid)}\n `;\n }\n\n protected override update(changedProperties: PropertyValues): void {\n if (\n changedProperties.has('value') ||\n (changedProperties.has('required') && this.required)\n ) {\n this.updateComplete.then(() => {\n this.checkValidity();\n });\n }\n super.update(changedProperties);\n }\n\n public checkValidity(): boolean {\n let validity = this.inputElement.checkValidity();\n if (this.required || (this.value && this.pattern)) {\n if ((this.disabled || this.multiline) && this.pattern) {\n const regex = new RegExp(`^${this.pattern}$`, 'u');\n validity = regex.test(this.value.toString());\n }\n if (typeof this.minlength !== 'undefined') {\n validity =\n validity && this.value.toString().length >= this.minlength;\n }\n this.valid = validity;\n this.invalid = !validity;\n }\n return validity;\n }\n}\n\n/**\n * @element sp-textfield\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n */\nexport class Textfield extends TextfieldBase {\n @property({ type: String })\n public override set value(value: string) {\n if (value === this.value) {\n return;\n }\n const oldValue = this._value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n public override get value(): string {\n return this._value;\n }\n\n protected override _value = '';\n}\n"],
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EAEA,cAAAC,MAEG,gCACP,OACI,aAAAC,EACA,QAAAC,MACG,kDACP,OACI,YAAAC,EACA,SAAAC,EACA,SAAAC,MACG,kDAEP,OAAS,kBAAAC,MAAsB,6DAC/B,OAAS,aAAAC,MAAiB,mDAC1B,MAAO,kEACP,MAAO,iEAEP,OAAOC,MAAqB,qBAC5B,OAAOC,MAAqB,mEAE5B,MAAMC,EAAiB,CAAC,OAAQ,MAAO,MAAO,QAAS,UAAU,EAO1D,aAAM,sBAAsBJ,EAC/BN,EAAWO,EAAW,CAClB,cAAe,EACnB,CAAC,CACL,CAAE,CAJK,
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n ifDefined,\n live,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\n\nimport textfieldStyles from './textfield.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\n\nconst textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;\nexport type TextfieldType = typeof textfieldTypes[number];\n\n/**\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class TextfieldBase extends ManageHelpText(\n SizedMixin(Focusable, {\n noDefaultSize: true,\n })\n) {\n public static override get styles(): CSSResultArray {\n return [textfieldStyles, checkmarkStyles];\n }\n\n @state()\n appliedLabel?: string;\n\n @property({ attribute: 'allowed-keys' })\n allowedKeys = '';\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @query('.input:not(#sizer)')\n protected inputElement!: HTMLInputElement | HTMLTextAreaElement;\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property()\n public label = '';\n\n @property()\n public placeholder = '';\n\n @property({ attribute: 'type', reflect: true })\n private _type: TextfieldType = 'text';\n\n @state()\n get type(): TextfieldType {\n return textfieldTypes.find((t) => t === this._type) ?? 'text';\n }\n\n set type(val: TextfieldType) {\n const prev = this._type;\n this._type = val;\n this.requestUpdate('type', prev);\n }\n\n @property()\n public pattern?: string;\n\n @property({ type: Boolean, reflect: true })\n public grows = false;\n\n @property({ type: Number })\n public maxlength = -1;\n\n @property({ type: Number })\n public minlength = -1;\n\n @property({ type: Boolean, reflect: true })\n public multiline = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n @property({ type: Number })\n public rows = -1;\n\n @property({ type: Boolean, reflect: true })\n public valid = false;\n\n @property({ type: String })\n public set value(value: string | number) {\n if (value === this.value) {\n return;\n }\n const oldValue = this._value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n public get value(): string | number {\n return this._value;\n }\n\n protected _value: string | number = '';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: Boolean, reflect: true })\n public required = false;\n\n @property({ type: String, reflect: true })\n public autocomplete?:\n | HTMLInputElement['autocomplete']\n | HTMLTextAreaElement['autocomplete'];\n\n public override get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n return this.inputElement;\n }\n\n /**\n * Sets the start and end positions of the current selection.\n *\n * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the\n * element's value is treated as pointing to the end of the value.\n * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than\n * the length of the element's value is treated as pointing to the end of the value.\n * @param [selectionDirection=\"none\"] A string indicating the direction in which the selection is considered to\n * have been performed.\n */\n public setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n ): void {\n this.inputElement.setSelectionRange(\n selectionStart,\n selectionEnd,\n selectionDirection\n );\n }\n\n /**\n * Selects all the text.\n */\n public select(): void {\n this.inputElement.select();\n }\n\n protected handleInput(): void {\n if (this.allowedKeys && this.inputElement.value) {\n const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');\n if (!regExp.test(this.inputElement.value)) {\n const selectionStart = this.inputElement\n .selectionStart as number;\n const nextSelectStart = selectionStart - 1;\n this.inputElement.value = this.value.toString();\n this.inputElement.setSelectionRange(\n nextSelectStart,\n nextSelectStart\n );\n return;\n }\n }\n this.value = this.inputElement.value;\n }\n\n protected handleChange(): void {\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n protected onFocus(): void {\n this.focused = !this.readonly && true;\n }\n\n protected onBlur(): void {\n this.focused = !this.readonly && false;\n }\n\n protected renderStateIcons(): TemplateResult | typeof nothing {\n if (this.invalid) {\n return html`\n <sp-icon-alert id=\"invalid\" class=\"icon\"></sp-icon-alert>\n `;\n } else if (this.valid) {\n return html`\n <sp-icon-checkmark100\n id=\"valid\"\n class=\"icon spectrum-UIIcon-Checkmark100\"\n ></sp-icon-checkmark100>\n `;\n }\n return nothing;\n }\n\n protected get displayValue(): string {\n return this.value.toString();\n }\n\n private get renderMultiline(): TemplateResult {\n return html`\n ${this.grows && this.rows === -1\n ? html`\n <div id=\"sizer\" class=\"input\" aria-hidden=\"true\">\n ${this.value}​\n </div>\n `\n : nothing}\n <!-- @ts-ignore -->\n <textarea\n aria-describedby=${this.helpTextId}\n aria-label=${this.label ||\n this.appliedLabel ||\n this.placeholder}\n aria-invalid=${ifDefined(this.invalid || undefined)}\n class=\"input\"\n maxlength=${ifDefined(\n this.maxlength > -1 ? this.maxlength : undefined\n )}\n minlength=${ifDefined(\n this.minlength > -1 ? this.minlength : undefined\n )}\n title=${this.invalid ? '' : nothing}\n pattern=${ifDefined(this.pattern)}\n placeholder=${this.placeholder}\n .value=${this.displayValue}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.onFocus}\n @blur=${this.onBlur}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n rows=${ifDefined(this.rows > -1 ? this.rows : undefined)}\n autocomplete=${ifDefined(this.autocomplete)}\n ></textarea>\n `;\n }\n\n private get renderInput(): TemplateResult {\n return html`\n <!-- @ts-ignore -->\n <input\n type=${this.type}\n aria-describedby=${this.helpTextId}\n aria-label=${this.label ||\n this.appliedLabel ||\n this.placeholder}\n aria-invalid=${ifDefined(this.invalid || undefined)}\n class=\"input\"\n title=${this.invalid ? '' : nothing}\n maxlength=${ifDefined(\n this.maxlength > -1 ? this.maxlength : undefined\n )}\n minlength=${ifDefined(\n this.minlength > -1 ? this.minlength : undefined\n )}\n pattern=${ifDefined(this.pattern)}\n placeholder=${this.placeholder}\n .value=${live(this.displayValue)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.onFocus}\n @blur=${this.onBlur}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n autocomplete=${ifDefined(this.autocomplete)}\n />\n `;\n }\n\n protected renderField(): TemplateResult {\n return html`\n ${this.renderStateIcons()}\n ${this.multiline ? this.renderMultiline : this.renderInput}\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n <div id=\"textfield\">${this.renderField()}</div>\n ${this.renderHelpText(this.invalid)}\n `;\n }\n\n protected override update(changedProperties: PropertyValues): void {\n if (\n changedProperties.has('value') ||\n (changedProperties.has('required') && this.required)\n ) {\n this.updateComplete.then(() => {\n this.checkValidity();\n });\n }\n super.update(changedProperties);\n }\n\n public checkValidity(): boolean {\n let validity = this.inputElement.checkValidity();\n if (this.required || (this.value && this.pattern)) {\n if ((this.disabled || this.multiline) && this.pattern) {\n const regex = new RegExp(`^${this.pattern}$`, 'u');\n validity = regex.test(this.value.toString());\n }\n if (typeof this.minlength !== 'undefined') {\n validity =\n validity && this.value.toString().length >= this.minlength;\n }\n this.valid = validity;\n this.invalid = !validity;\n }\n return validity;\n }\n}\n\n/**\n * @element sp-textfield\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n */\nexport class Textfield extends TextfieldBase {\n @property({ type: String })\n public override set value(value: string) {\n if (value === this.value) {\n return;\n }\n const oldValue = this._value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n public override get value(): string {\n return this._value;\n }\n\n protected override _value = '';\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OAEI,QAAAA,EACA,WAAAC,EAEA,cAAAC,MAEG,gCACP,OACI,aAAAC,EACA,QAAAC,MACG,kDACP,OACI,YAAAC,EACA,SAAAC,EACA,SAAAC,MACG,kDAEP,OAAS,kBAAAC,MAAsB,6DAC/B,OAAS,aAAAC,MAAiB,mDAC1B,MAAO,kEACP,MAAO,iEAEP,OAAOC,MAAqB,qBAC5B,OAAOC,MAAqB,mEAE5B,MAAMC,EAAiB,CAAC,OAAQ,MAAO,MAAO,QAAS,UAAU,EAO1D,aAAM,sBAAsBJ,EAC/BN,EAAWO,EAAW,CAClB,cAAe,EACnB,CAAC,CACL,CAAE,CAJK,kCAaH,iBAAc,GAGd,KAAO,QAAU,GAMjB,KAAO,QAAU,GAGjB,KAAO,MAAQ,GAGf,KAAO,YAAc,GAGrB,KAAQ,MAAuB,OAiB/B,KAAO,MAAQ,GAGf,KAAO,UAAY,GAGnB,KAAO,UAAY,GAGnB,KAAO,UAAY,GAGnB,KAAO,SAAW,GAGlB,KAAO,KAAO,GAGd,KAAO,MAAQ,GAgBf,KAAU,OAA0B,GAGpC,KAAO,MAAQ,GAGf,KAAO,SAAW,GAnFlB,WAA2B,QAAyB,CAChD,MAAO,CAACC,EAAiBC,CAAe,CAC5C,CA2BA,IAAI,MAAsB,CA/E9B,IAAAE,EAgFQ,OAAOA,EAAAD,EAAe,KAAME,GAAMA,IAAM,KAAK,KAAK,IAA3C,KAAAD,EAAgD,MAC3D,CAEA,IAAI,KAAKE,EAAoB,CACzB,MAAMC,EAAO,KAAK,MAClB,KAAK,MAAQD,EACb,KAAK,cAAc,OAAQC,CAAI,CACnC,CA2BA,IAAW,MAAMC,EAAwB,CACrC,GAAIA,IAAU,KAAK,MACf,OAEJ,MAAMC,EAAW,KAAK,OACtB,KAAK,OAASD,EACd,KAAK,cAAc,QAASC,CAAQ,CACxC,CAEA,IAAW,OAAyB,CAChC,OAAO,KAAK,MAChB,CAeA,IAAoB,cAAuD,CACvE,OAAO,KAAK,YAChB,CAYO,kBACHC,EACAC,EACAC,EAAsD,OAClD,CACJ,KAAK,aAAa,kBACdF,EACAC,EACAC,CACJ,CACJ,CAKO,QAAe,CAClB,KAAK,aAAa,OAAO,CAC7B,CAEU,aAAoB,CAC1B,GAAI,KAAK,aAAe,KAAK,aAAa,OAElC,CADW,IAAI,OAAO,KAAK,KAAK,iBAAkB,GAAG,EAC7C,KAAK,KAAK,aAAa,KAAK,EAAG,CAGvC,MAAMC,EAFiB,KAAK,aACvB,eACoC,EACzC,KAAK,aAAa,MAAQ,KAAK,MAAM,SAAS,EAC9C,KAAK,aAAa,kBACdA,EACAA,CACJ,EACA,OAGR,KAAK,MAAQ,KAAK,aAAa,KACnC,CAEU,cAAqB,CAC3B,KAAK,cACD,IAAI,MAAM,SAAU,CAChB,QAAS,GACT,SAAU,EACd,CAAC,CACL,CACJ,CAEU,SAAgB,CACtB,KAAK,QAAU,CAAC,KAAK,UAAY,EACrC,CAEU,QAAe,CACrB,KAAK,QAAU,CAAC,KAAK,UAAY,EACrC,CAEU,kBAAoD,CAC1D,OAAI,KAAK,QACEtB;AAAA;AAAA,cAGA,KAAK,MACLA;AAAA;AAAA;AAAA;AAAA;AAAA,cAOJC,CACX,CAEA,IAAc,cAAuB,CACjC,OAAO,KAAK,MAAM,SAAS,CAC/B,CAEA,IAAY,iBAAkC,CAC1C,OAAOD;AAAA,cACD,KAAK,OAAS,KAAK,OAAS,GACxBA;AAAA;AAAA,4BAEU,KAAK;AAAA;AAAA,oBAGfC;AAAA;AAAA;AAAA,mCAGiB,KAAK;AAAA,6BACX,KAAK,OAClB,KAAK,cACL,KAAK;AAAA,+BACUE,EAAU,KAAK,SAAW,MAAS;AAAA;AAAA,4BAEtCA,EACR,KAAK,UAAY,GAAK,KAAK,UAAY,MAC3C;AAAA,4BACYA,EACR,KAAK,UAAY,GAAK,KAAK,UAAY,MAC3C;AAAA,wBACQ,KAAK,QAAU,GAAKF;AAAA,0BAClBE,EAAU,KAAK,OAAO;AAAA,8BAClB,KAAK;AAAA,yBACV,KAAK;AAAA,0BACJ,KAAK;AAAA,yBACN,KAAK;AAAA,yBACL,KAAK;AAAA,wBACN,KAAK;AAAA,4BACD,KAAK;AAAA,4BACL,KAAK;AAAA,4BACL,KAAK;AAAA,uBACVA,EAAU,KAAK,KAAO,GAAK,KAAK,KAAO,MAAS;AAAA,+BACxCA,EAAU,KAAK,YAAY;AAAA;AAAA,SAGtD,CAEA,IAAY,aAA8B,CACtC,OAAOH;AAAA;AAAA;AAAA,uBAGQ,KAAK;AAAA,mCACO,KAAK;AAAA,6BACX,KAAK,OAClB,KAAK,cACL,KAAK;AAAA,+BACUG,EAAU,KAAK,SAAW,MAAS;AAAA;AAAA,wBAE1C,KAAK,QAAU,GAAKF;AAAA,4BAChBE,EACR,KAAK,UAAY,GAAK,KAAK,UAAY,MAC3C;AAAA,4BACYA,EACR,KAAK,UAAY,GAAK,KAAK,UAAY,MAC3C;AAAA,0BACUA,EAAU,KAAK,OAAO;AAAA,8BAClB,KAAK;AAAA,yBACVC,EAAK,KAAK,YAAY;AAAA,0BACrB,KAAK;AAAA,yBACN,KAAK;AAAA,yBACL,KAAK;AAAA,wBACN,KAAK;AAAA,4BACD,KAAK;AAAA,4BACL,KAAK;AAAA,4BACL,KAAK;AAAA,+BACFD,EAAU,KAAK,YAAY;AAAA;AAAA,SAGtD,CAEU,aAA8B,CACpC,OAAOH;AAAA,cACD,KAAK,iBAAiB;AAAA,cACtB,KAAK,UAAY,KAAK,gBAAkB,KAAK;AAAA,SAEvD,CAEmB,QAAyB,CACxC,OAAOA;AAAA,kCACmB,KAAK,YAAY;AAAA,cACrC,KAAK,eAAe,KAAK,OAAO;AAAA,SAE1C,CAEmB,OAAOuB,EAAyC,EAE3DA,EAAkB,IAAI,OAAO,GAC5BA,EAAkB,IAAI,UAAU,GAAK,KAAK,WAE3C,KAAK,eAAe,KAAK,IAAM,CAC3B,KAAK,cAAc,CACvB,CAAC,EAEL,MAAM,OAAOA,CAAiB,CAClC,CAEO,eAAyB,CAC5B,IAAIC,EAAW,KAAK,aAAa,cAAc,EAC/C,OAAI,KAAK,UAAa,KAAK,OAAS,KAAK,YAChC,KAAK,UAAY,KAAK,YAAc,KAAK,UAE1CA,EADc,IAAI,OAAO,IAAI,KAAK,WAAY,GAAG,EAChC,KAAK,KAAK,MAAM,SAAS,CAAC,GAE3C,OAAO,KAAK,WAAc,cAC1BA,EACIA,GAAY,KAAK,MAAM,SAAS,EAAE,QAAU,KAAK,WAEzD,KAAK,MAAQA,EACb,KAAK,QAAU,CAACA,GAEbA,CACX,CACJ,CAhSIC,EAAA,CADClB,EAAM,GATE,cAUT,4BAGAkB,EAAA,CADCpB,EAAS,CAAE,UAAW,cAAe,CAAC,GAZ9B,cAaT,2BAGOoB,EAAA,CADNpB,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAfjC,cAgBF,uBAGGoB,EAAA,CADTnB,EAAM,oBAAoB,GAlBlB,cAmBC,4BAGHmB,EAAA,CADNpB,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GArBjC,cAsBF,uBAGAoB,EAAA,CADNpB,EAAS,GAxBD,cAyBF,qBAGAoB,EAAA,CADNpB,EAAS,GA3BD,cA4BF,2BAGCoB,EAAA,CADPpB,EAAS,CAAE,UAAW,OAAQ,QAAS,EAAK,CAAC,GA9BrC,cA+BD,qBAGJoB,EAAA,CADHlB,EAAM,GAjCE,cAkCL,oBAWGkB,EAAA,CADNpB,EAAS,GA5CD,cA6CF,uBAGAoB,EAAA,CADNpB,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA/CjC,cAgDF,qBAGAoB,EAAA,CADNpB,EAAS,CAAE,KAAM,MAAO,CAAC,GAlDjB,cAmDF,yBAGAoB,EAAA,CADNpB,EAAS,CAAE,KAAM,MAAO,CAAC,GArDjB,cAsDF,yBAGAoB,EAAA,CADNpB,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAxDjC,cAyDF,yBAGAoB,EAAA,CADNpB,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA3DjC,cA4DF,wBAGAoB,EAAA,CADNpB,EAAS,CAAE,KAAM,MAAO,CAAC,GA9DjB,cA+DF,oBAGAoB,EAAA,CADNpB,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAjEjC,cAkEF,qBAGIoB,EAAA,CADVpB,EAAS,CAAE,KAAM,MAAO,CAAC,GApEjB,cAqEE,qBAgBJoB,EAAA,CADNpB,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApFjC,cAqFF,qBAGAoB,EAAA,CADNpB,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAvFjC,cAwFF,wBAGAoB,EAAA,CADNpB,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA1FhC,cA2FF,4BAsNJ,aAAM,kBAAkB,aAAc,CAAtC,kCAeH,KAAmB,OAAS,GAb5B,IAAoB,MAAMY,EAAe,CACrC,GAAIA,IAAU,KAAK,MACf,OAEJ,MAAMC,EAAW,KAAK,OACtB,KAAK,OAASD,EACd,KAAK,cAAc,QAASC,CAAQ,CACxC,CAEA,IAAoB,OAAgB,CAChC,OAAO,KAAK,MAChB,CAGJ,CAdwBO,EAAA,CADnBpB,EAAS,CAAE,KAAM,MAAO,CAAC,GADjB,UAEW",
|
|
6
6
|
"names": ["html", "nothing", "SizedMixin", "ifDefined", "live", "property", "query", "state", "ManageHelpText", "Focusable", "textfieldStyles", "checkmarkStyles", "textfieldTypes", "_a", "t", "val", "prev", "value", "oldValue", "selectionStart", "selectionEnd", "selectionDirection", "nextSelectStart", "changedProperties", "validity", "__decorateClass"]
|
|
7
7
|
}
|
package/src/textfield.css.dev.js
CHANGED
|
@@ -558,33 +558,13 @@ var(--spectrum-Textfield-workflow-icon-width)
|
|
|
558
558
|
--system-spectrum-textfield-border-color-keyboard-focus
|
|
559
559
|
);--spectrum-textfield-border-width:var(
|
|
560
560
|
--system-spectrum-textfield-border-width
|
|
561
|
-
)}:host{display:inline-flex;flex-direction:column;inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width))}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}#textfield{inline-size:100%}#textfield,textarea{resize:inherit}.input{min-inline-size:var(--spectrum-textfield-min-width)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}:host([grows]
|
|
561
|
+
)}:host{display:inline-flex;flex-direction:column;inline-size:var(--mod-textfield-width,var(--spectrum-textfield-width))}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}#textfield{inline-size:100%}#textfield,textarea{resize:inherit}.input{min-inline-size:var(--spectrum-textfield-min-width)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}:host([grows]:not([quiet])) #textfield:after{grid-area:unset;min-block-size:calc(var(
|
|
562
562
|
--mod-text-area-min-block-size,
|
|
563
563
|
var(--spectrum-text-area-min-block-size)
|
|
564
564
|
) + var(
|
|
565
565
|
--mod-textfield-focus-indicator-gap,
|
|
566
566
|
var(--spectrum-textfield-focus-indicator-gap)
|
|
567
|
-
)*2)}:host([
|
|
568
|
-
--mod-text-area-min-block-size,var(--spectrum-text-area-min-block-size)
|
|
569
|
-
);outline:none;overflow:visible;overflow-wrap:break-word;padding-block-end:calc(var(
|
|
570
|
-
--mod-textfield-spacing-block-end,
|
|
571
|
-
var(--spectrum-textfield-spacing-block-end)
|
|
572
|
-
) + var(
|
|
573
|
-
--mod-textfield-border-width,
|
|
574
|
-
var(--spectrum-textfield-border-width)
|
|
575
|
-
));padding-block-start:calc(var(
|
|
576
|
-
--mod-textfield-spacing-block-start,
|
|
577
|
-
var(--spectrum-textfield-spacing-block-start)
|
|
578
|
-
) + var(
|
|
579
|
-
--mod-textfield-border-width,
|
|
580
|
-
var(--spectrum-textfield-border-width)
|
|
581
|
-
));padding-inline:calc(var(
|
|
582
|
-
--mod-textfield-spacing-inline,
|
|
583
|
-
var(--spectrum-textfield-spacing-inline)
|
|
584
|
-
) + var(
|
|
585
|
-
--mod-textfield-border-width,
|
|
586
|
-
var(--spectrum-textfield-border-width)
|
|
587
|
-
));text-indent:0;text-overflow:ellipsis;transition:border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out,box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out;vertical-align:top;white-space:pre-wrap;word-break:break-word}:host([grows][quiet]) #sizer{border-radius:var(--spectrum-textfield-quiet-texticon-border-radius);border-width:0 0 var(--spectrum-textfield-quiet-texticon-border-size) 0;overflow-y:hidden;resize:none}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #textfield{display:inline-grid}:host([multiline]) textarea{transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([multiline]:not([quiet])) #textfield:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([disabled][quiet]) #textfield .input,:host([disabled][quiet]) #textfield:hover .input,:host([quiet]) .input :disabled{background-color:var(
|
|
567
|
+
)*2)}#sizer{block-size:auto;opacity:0;word-break:break-word}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #textfield{display:inline-grid}:host([multiline]) textarea{transition:box-shadow var(--spectrum-global-animation-duration-100,.13s) ease-in-out,border-color var(--spectrum-global-animation-duration-100,.13s) ease-in-out}:host([multiline]:not([quiet])) #textfield:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([grows]:not([rows])) .input:not(#sizer){height:100%;left:0;overflow:hidden;position:absolute;resize:none;top:0}:host([disabled][quiet]) #textfield .input,:host([disabled][quiet]) #textfield:hover .input,:host([quiet]) .input :disabled{background-color:var(
|
|
588
568
|
--spectrum-textfield-m-quiet-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent)
|
|
589
569
|
);border-color:var(
|
|
590
570
|
--spectrum-textfield-m-quiet-texticon-border-color-disabled,var(--spectrum-alias-input-border-color-quiet-disabled)
|