@spectrum-web-components/textfield 0.10.1 → 0.10.2
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/package.json +3 -3
- package/src/Textfield.js +0 -4
- package/src/Textfield.js.map +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/textfield",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@spectrum-web-components/icon": "^0.11.1",
|
|
50
50
|
"@spectrum-web-components/icons-ui": "^0.8.1",
|
|
51
51
|
"@spectrum-web-components/icons-workflow": "^0.8.1",
|
|
52
|
-
"@spectrum-web-components/shared": "^0.13.
|
|
52
|
+
"@spectrum-web-components/shared": "^0.13.2",
|
|
53
53
|
"tslib": "^2.0.0"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"sideEffects": [
|
|
61
61
|
"./sp-*.js"
|
|
62
62
|
],
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "5ad16bd185710525afa48bd76099cb0ebde4c4cb"
|
|
64
64
|
}
|
package/src/Textfield.js
CHANGED
|
@@ -82,10 +82,6 @@ export class TextfieldBase extends ManageHelpText(Focusable) {
|
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
this.value = this.inputElement.value;
|
|
85
|
-
const selectionStart = this.inputElement.selectionStart;
|
|
86
|
-
this.updateComplete.then(() => {
|
|
87
|
-
this.inputElement.setSelectionRange(selectionStart, selectionStart);
|
|
88
|
-
});
|
|
89
85
|
}
|
|
90
86
|
onChange() {
|
|
91
87
|
this.dispatchEvent(new Event('change', {
|
package/src/Textfield.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textfield.js","sourceRoot":"","sources":["Textfield.ts"],"names":[],"mappings":"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","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 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(Focusable) {\n public static 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: 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 get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n return this.inputElement;\n }\n\n protected onInput(): 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 const selectionStart = this.inputElement.selectionStart as number;\n this.updateComplete.then(() => {\n this.inputElement.setSelectionRange(selectionStart, selectionStart);\n });\n }\n\n protected onChange(): 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 = true;\n }\n\n protected onBlur(): void {\n this.focused = 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 public select(): void {\n this.inputElement.select();\n }\n\n private get renderMultiline(): TemplateResult {\n return html`\n ${this.grows && !this.quiet\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.onChange}\n @input=${this.onInput}\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 ></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.onChange}\n @input=${this.onInput}\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 render(): TemplateResult {\n return html`\n <div id=\"textfield\">${this.renderField()}</div>\n ${this.renderHelpText(this.invalid)}\n `;\n }\n\n protected updated(changedProperties: PropertyValues): void {\n if (\n changedProperties.has('value') ||\n (changedProperties.has('required') && this.required)\n ) {\n this.checkValidity();\n }\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 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 get value(): string {\n return this._value;\n }\n\n protected _value = '';\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Textfield.js","sourceRoot":"","sources":["Textfield.ts"],"names":[],"mappings":"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","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 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(Focusable) {\n public static 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: 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 get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n return this.inputElement;\n }\n\n protected onInput(): 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 onChange(): 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 = true;\n }\n\n protected onBlur(): void {\n this.focused = 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 public select(): void {\n this.inputElement.select();\n }\n\n private get renderMultiline(): TemplateResult {\n return html`\n ${this.grows && !this.quiet\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.onChange}\n @input=${this.onInput}\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 ></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.onChange}\n @input=${this.onInput}\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 render(): TemplateResult {\n return html`\n <div id=\"textfield\">${this.renderField()}</div>\n ${this.renderHelpText(this.invalid)}\n `;\n }\n\n protected updated(changedProperties: PropertyValues): void {\n if (\n changedProperties.has('value') ||\n (changedProperties.has('required') && this.required)\n ) {\n this.checkValidity();\n }\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 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 get value(): string {\n return this._value;\n }\n\n protected _value = '';\n}\n"]}
|