@politiet/sheriff-web-components 1.0.2 → 1.1.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/dist/playwright-util/custom-matchers.d.ts +1 -0
- package/dist/playwright-util/custom-matchers.d.ts.map +1 -1
- package/dist/playwright-util/custom-matchers.js +10 -0
- package/dist/playwright-util/custom-matchers.js.map +1 -1
- package/dist/playwright-util/form.d.ts +1 -1
- package/dist/playwright-util/form.d.ts.map +1 -1
- package/dist/playwright-util/form.js +12 -7
- package/dist/playwright-util/form.js.map +1 -1
- package/dist/react-wrappers/SDSTextFieldWrapper.js +1 -1
- package/dist/react-wrappers/SDSTextFieldWrapper.js.map +1 -1
- package/dist/sds-button/sds-button.d.ts.map +1 -1
- package/dist/sds-button/sds-button.js +3 -2
- package/dist/sds-button/sds-button.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.d.ts +1 -0
- package/dist/sds-checkbox/sds-checkbox.d.ts.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.js +9 -13
- package/dist/sds-checkbox/sds-checkbox.js.map +1 -1
- package/dist/sds-checkbox/sds-checkbox.spec.js +18 -12
- package/dist/sds-checkbox/sds-checkbox.spec.js.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.d.ts.map +1 -1
- package/dist/sds-checkbox-group/sds-checkbox-group.js +3 -2
- package/dist/sds-checkbox-group/sds-checkbox-group.js.map +1 -1
- package/dist/sds-chip/sds-chip.d.ts +2 -0
- package/dist/sds-chip/sds-chip.d.ts.map +1 -1
- package/dist/sds-chip/sds-chip.js +13 -3
- package/dist/sds-chip/sds-chip.js.map +1 -1
- package/dist/sds-chip/sds-chip.styles.d.ts.map +1 -1
- package/dist/sds-chip/sds-chip.styles.js +9 -8
- package/dist/sds-chip/sds-chip.styles.js.map +1 -1
- package/dist/sds-detail/sds-detail.d.ts.map +1 -1
- package/dist/sds-detail/sds-detail.js +3 -2
- package/dist/sds-detail/sds-detail.js.map +1 -1
- package/dist/sds-heading/sds-heading.d.ts.map +1 -1
- package/dist/sds-heading/sds-heading.js +3 -2
- package/dist/sds-heading/sds-heading.js.map +1 -1
- package/dist/sds-icon/sds-icon.allowed-colors.d.ts +3 -0
- package/dist/sds-icon/sds-icon.allowed-colors.d.ts.map +1 -0
- package/dist/sds-icon/sds-icon.allowed-colors.js +17 -0
- package/dist/sds-icon/sds-icon.allowed-colors.js.map +1 -0
- package/dist/sds-icon/sds-icon.allowed-names.d.ts +3 -0
- package/dist/sds-icon/sds-icon.allowed-names.d.ts.map +1 -0
- package/dist/sds-icon/sds-icon.allowed-names.js +2 -0
- package/dist/sds-icon/sds-icon.allowed-names.js.map +1 -0
- package/dist/sds-icon/sds-icon.color-types.d.ts +2 -0
- package/dist/sds-icon/sds-icon.color-types.d.ts.map +1 -0
- package/dist/sds-icon/sds-icon.color-types.js +2 -0
- package/dist/sds-icon/sds-icon.color-types.js.map +1 -0
- package/dist/sds-icon/sds-icon.d.ts.map +1 -1
- package/dist/sds-icon/sds-icon.icon-types.d.ts +2 -0
- package/dist/sds-icon/sds-icon.icon-types.d.ts.map +1 -0
- package/dist/sds-icon/sds-icon.icon-types.js +2 -0
- package/dist/sds-icon/sds-icon.icon-types.js.map +1 -0
- package/dist/sds-icon/sds-icon.js +3 -2
- package/dist/sds-icon/sds-icon.js.map +1 -1
- package/dist/sds-label/sds-label.d.ts.map +1 -1
- package/dist/sds-label/sds-label.js +3 -2
- package/dist/sds-label/sds-label.js.map +1 -1
- package/dist/sds-link/sds-link.d.ts.map +1 -1
- package/dist/sds-link/sds-link.js +3 -2
- package/dist/sds-link/sds-link.js.map +1 -1
- package/dist/sds-loader/sds-loader.d.ts.map +1 -1
- package/dist/sds-loader/sds-loader.js +3 -2
- package/dist/sds-loader/sds-loader.js.map +1 -1
- package/dist/sds-nav-card/sds-nav-card.d.ts.map +1 -1
- package/dist/sds-nav-card/sds-nav-card.js +3 -2
- package/dist/sds-nav-card/sds-nav-card.js.map +1 -1
- package/dist/sds-notification/sds-notification.d.ts.map +1 -1
- package/dist/sds-notification/sds-notification.js +3 -2
- package/dist/sds-notification/sds-notification.js.map +1 -1
- package/dist/sds-paragraph/sds-paragraph.d.ts.map +1 -1
- package/dist/sds-paragraph/sds-paragraph.js +3 -2
- package/dist/sds-paragraph/sds-paragraph.js.map +1 -1
- package/dist/sds-radio/sds-radio.d.ts +1 -0
- package/dist/sds-radio/sds-radio.d.ts.map +1 -1
- package/dist/sds-radio/sds-radio.js +12 -6
- package/dist/sds-radio/sds-radio.js.map +1 -1
- package/dist/sds-radio/sds-radio.spec.d.ts +2 -0
- package/dist/sds-radio/sds-radio.spec.d.ts.map +1 -0
- package/dist/sds-radio/sds-radio.spec.js +71 -0
- package/dist/sds-radio/sds-radio.spec.js.map +1 -0
- package/dist/sds-radio/sds-radio.styles.js +1 -1
- package/dist/sds-radio/sds-radio.styles.js.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -1
- package/dist/sds-radio-group/sds-radio-group.js +3 -2
- package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
- package/dist/sds-switch/sds-switch.d.ts.map +1 -1
- package/dist/sds-switch/sds-switch.js +3 -2
- package/dist/sds-switch/sds-switch.js.map +1 -1
- package/dist/sds-text/sds-text.d.ts.map +1 -1
- package/dist/sds-text/sds-text.js +3 -2
- package/dist/sds-text/sds-text.js.map +1 -1
- package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
- package/dist/sds-textfield/sds-textfield.js +3 -2
- package/dist/sds-textfield/sds-textfield.js.map +1 -1
- package/dist/sds-textfield/sds-textfield.spec.d.ts +2 -0
- package/dist/sds-textfield/sds-textfield.spec.d.ts.map +1 -0
- package/dist/sds-textfield/sds-textfield.spec.js +139 -0
- package/dist/sds-textfield/sds-textfield.spec.js.map +1 -0
- package/dist/sheriff-web-components.js +307 -288
- package/dist/utils/guarded-custom-element.d.ts +5 -0
- package/dist/utils/guarded-custom-element.d.ts.map +1 -0
- package/dist/utils/guarded-custom-element.js +9 -0
- package/dist/utils/guarded-custom-element.js.map +1 -0
- package/dist/utils/hmr-helper.d.ts +2 -0
- package/dist/utils/hmr-helper.d.ts.map +1 -0
- package/dist/utils/hmr-helper.js +17 -0
- package/dist/utils/hmr-helper.js.map +1 -0
- package/dist/utils/safe-custom-element.d.ts +2 -0
- package/dist/utils/safe-custom-element.d.ts.map +1 -0
- package/dist/utils/safe-custom-element.js +9 -0
- package/dist/utils/safe-custom-element.js.map +1 -0
- package/package.json +1 -1
|
@@ -5,8 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html } from 'lit';
|
|
8
|
-
import {
|
|
8
|
+
import { property } from 'lit/decorators.js';
|
|
9
9
|
import { classMap } from 'lit/directives/class-map.js';
|
|
10
|
+
import { guardedCustomElement } from '../utils/guarded-custom-element';
|
|
10
11
|
import { styles } from './sds-text.styles';
|
|
11
12
|
let SDSText = class SDSText extends LitElement {
|
|
12
13
|
constructor() {
|
|
@@ -31,7 +32,7 @@ __decorate([
|
|
|
31
32
|
property({ type: String })
|
|
32
33
|
], SDSText.prototype, "size", void 0);
|
|
33
34
|
SDSText = __decorate([
|
|
34
|
-
|
|
35
|
+
guardedCustomElement('sds-text')
|
|
35
36
|
], SDSText);
|
|
36
37
|
export { SDSText };
|
|
37
38
|
//# sourceMappingURL=sds-text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-text.js","sourceRoot":"","sources":["../../src/sds-text/sds-text.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"sds-text.js","sourceRoot":"","sources":["../../src/sds-text/sds-text.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AASpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAIN,iBAAiB;QACW,SAAI,GAAS,GAAG,CAAC;IAc9C,CAAC;IAZS,MAAM;QACd,MAAM,YAAY,GAAG;YACpB,UAAU,EAAE,IAAI;YAChB,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;YAChC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;YAChC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;SAChC,CAAC;QAEF,MAAM,OAAO,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;QAEvC,OAAO,IAAI,CAAA,YAAY,OAAO,oBAAoB,CAAC;IACpD,CAAC;;AAjBD,UAAU;AACM,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAAkB;AALjC,OAAO;IADnB,oBAAoB,CAAC,UAAU,CAAC;GACpB,OAAO,CAmBnB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-text.styles';\n\ntype Size = 'l' | 'm' | 's';\n\nexport interface SDSTextProps {\n\tsize?: Size;\n}\n\n@guardedCustomElement('sds-text')\nexport class SDSText extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String }) size: Size = 'l';\n\n\toverride render() {\n\t\tconst styleClasses = {\n\t\t\t'sds-text': true,\n\t\t\t'sds-text--l': this.size === 'l',\n\t\t\t'sds-text--m': this.size === 'm',\n\t\t\t'sds-text--s': this.size === 's',\n\t\t};\n\n\t\tconst classes = classMap(styleClasses);\n\n\t\treturn html`<p class=${classes}><slot></slot></p>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-text': SDSText;\n\t}\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-textfield.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"sds-textfield.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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"}
|
|
@@ -5,9 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html, nothing } from 'lit';
|
|
8
|
-
import {
|
|
8
|
+
import { property, state, query } from 'lit/decorators.js';
|
|
9
9
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
10
10
|
import { classMap } from 'lit/directives/class-map.js';
|
|
11
|
+
import { guardedCustomElement } from '../utils/guarded-custom-element';
|
|
11
12
|
import { styles } from './sds-textfield.styles';
|
|
12
13
|
import '../sds-icon/sds-icon';
|
|
13
14
|
let SDSTextField = class SDSTextField extends LitElement {
|
|
@@ -222,7 +223,7 @@ __decorate([
|
|
|
222
223
|
query('#sds-textfield')
|
|
223
224
|
], SDSTextField.prototype, "control", void 0);
|
|
224
225
|
SDSTextField = __decorate([
|
|
225
|
-
|
|
226
|
+
guardedCustomElement('sds-textfield')
|
|
226
227
|
], SDSTextField);
|
|
227
228
|
export { SDSTextField };
|
|
228
229
|
//# sourceMappingURL=sds-textfield.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-textfield.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-textfield.styles';\n\nimport '../sds-icon/sds-icon';\n\ntype InputType = 'text' | 'email' | 'tel' | 'number' | 'password' | 'search' | 'url';\nexport type AutocompleteTypes =\n\t| 'off'\n\t| 'on'\n\t| 'name'\n\t| 'honorific-prefix'\n\t| 'given-name'\n\t| 'additional-name'\n\t| 'family-name'\n\t| 'honorific-suffix'\n\t| 'nickname'\n\t| 'email'\n\t| 'username'\n\t| 'new-password'\n\t| 'current-password'\n\t| 'one-time-code'\n\t| 'organization-title'\n\t| 'organization'\n\t| 'street-address'\n\t| 'address-line1'\n\t| 'address-line2'\n\t| 'address-line3'\n\t| 'address-level4'\n\t| 'address-level3'\n\t| 'address-level2'\n\t| 'address-level1'\n\t| 'country'\n\t| 'country-name'\n\t| 'postal-code'\n\t| 'cc-name'\n\t| 'cc-given-name'\n\t| 'cc-additional-name'\n\t| 'cc-family-name'\n\t| 'cc-number'\n\t| 'cc-exp'\n\t| 'cc-exp-month'\n\t| 'cc-exp-year'\n\t| 'cc-csc'\n\t| 'cc-type'\n\t| 'transaction-currency'\n\t| 'transaction-amount'\n\t| 'language'\n\t| 'bday'\n\t| 'bday-day'\n\t| 'bday-month'\n\t| 'bday-year'\n\t| 'sex'\n\t| 'tel'\n\t| 'tel-country-code'\n\t| 'tel-national'\n\t| 'tel-area-code'\n\t| 'tel-local'\n\t| 'tel-extension'\n\t| 'impp'\n\t| 'url'\n\t| 'photo';\n\nexport interface SDSTextFieldProps {\n\ttype?: InputType;\n\tvalue?: string;\n\tname?: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n\tautocomplete?: AutocompleteTypes;\n\trequired?: boolean;\n\tpattern?: string;\n\tminlength?: number;\n\tmaxlength?: number;\n\tonInput?: (event: Event) => void;\n\tonChange?: (event: Event) => void;\n\tonSelect?: (event: Event) => void;\n\tonFocus?: (event: Event) => void;\n\tonBlur?: (event: Event) => void;\n}\n\n@customElement('sds-textfield')\nexport class SDSTextField extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) type: InputType = 'text';\n\t@property({ type: String }) value?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String, reflect: true }) placeholder?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) autocomplete?: AutocompleteTypes;\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: String, reflect: true }) pattern?: string;\n\t@property({ type: Number, reflect: true }) minlength?: number;\n\t@property({ type: Number, reflect: true }) maxlength?: number;\n\n\t// State\n\t@state() private hasIcon = false;\n\n\t@query('#sds-textfield') control!: HTMLInputElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tprivate _defaultValue: string = '';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? '';\n\t}\n\n\tprivate readonly handleSlotChange = (e: Event) => {\n\t\tconst slot = e.target as HTMLSlotElement;\n\t\tthis.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n\t};\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate readonly _handleInputChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst currentValue = (event.target as HTMLInputElement).value;\n\t\t\tthis.value = currentValue;\n\t\t\tthis.internals.setFormValue(currentValue === '' ? null : currentValue);\n\t\t\tthis.updateValidity();\n\t\t\tthis.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tformResetCallback() {\n\t\tthis.control.value = this._defaultValue;\n\t\tthis.internals.setFormValue(this._defaultValue === '' ? null : this._defaultValue);\n\t\tthis.value = this._defaultValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.control.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.control.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.control.click();\n\t}\n\n\tget selectionStart(): number | null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number | null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textfieldClasses = {\n\t\t\t'sds-textfield': true,\n\t\t\t'sds-textfield--error': Boolean(this.errorMessage),\n\t\t\t'sds-textfield--disabled': Boolean(this.disabled),\n\t\t\t'sds-textfield--readonly': Boolean(this.readOnly),\n\t\t\t'sds-textfield--has-icon': this.hasIcon,\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textfieldClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html`<label for=\"sds-textfield\" class=\"sds-textfield__label\">${this.label}</label>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-textfield__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textfield__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"sds-textfield__input\"\n\t\t\t\t\t\ttype=\"${this.type}\"\n\t\t\t\t\t\tid=\"sds-textfield\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tautocomplete=\"${ifDefined(this.autocomplete as any)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\tpattern=\"${ifDefined(this.pattern)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t/>\n\t\t\t\t\t<slot name=\"after\" @slotchange=\"${this.handleSlotChange}\" aria-hidden=\"true\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`<p class=\"sds-textfield__error-message\">\n\t\t\t\t\t\t\t<sds-icon\n\t\t\t\t\t\t\t\tname=\"warning-material-filled\"\n\t\t\t\t\t\t\t\tsize=\"m\"\n\t\t\t\t\t\t\t\tcolor=\"${!this.disabled\n\t\t\t\t\t\t\t\t\t? `var(--sds-color-semantic-icon-critical)`\n\t\t\t\t\t\t\t\t\t: `var(--sds-color-semantic-icon-disabled)`}\"\n\t\t\t\t\t\t\t></sds-icon>\n\t\t\t\t\t\t\t${this.errorMessage}\n\t\t\t\t\t\t</p>`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textfield': SDSTextField;\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sds-textfield.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,sBAAsB,CAAC;AAkFvB,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IA6B3C;QACC,KAAK,EAAE,CAAC;QA1BkC,SAAI,GAAc,MAAM,CAAC;QAOxB,aAAQ,GAAY,KAAK,CAAC;QACH,aAAQ,GAAY,KAAK,CAAC;QAEjD,aAAQ,GAAY,KAAK,CAAC;QAKtE,QAAQ;QACS,YAAO,GAAG,KAAK,CAAC;QAOzB,kBAAa,GAAW,EAAE,CAAC;QAalB,qBAAgB,GAAG,CAAC,CAAQ,EAAE,EAAE;YAChD,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;YACzC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QACjE,CAAC,CAAC;QAUe,uBAAkB,GAAG,CAAC,KAAY,EAAE,EAAE;YACtD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpB,MAAM,YAAY,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;gBAC9D,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;gBAC1B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,YAAY,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;gBACvE,IAAI,CAAC,cAAc,EAAE,CAAC;gBACtB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YACpF,CAAC;QACF,CAAC,CAAC;QAEe,kBAAa,GAAG,CAAC,KAAY,EAAE,EAAE;YACjD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACpB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YAClF,CAAC;QACF,CAAC,CAAC;QAEe,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;YACrD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACjF,CAAC,CAAC;QAEe,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACpD,KAAK,CAAC,wBAAwB,EAAE,CAAC;YACjC,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAChF,CAAC,CAAC;QAjDD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3D,CAAC;IAEQ,iBAAiB;QACzB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;IACvC,CAAC;IAOO,cAAc;QACrB,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC;YAClC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACjG,CAAC;IACF,CAAC;IA+BD,iBAAiB;QAChB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;QACxC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACnF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;QAChC,IAAI,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC;IAED,MAAM;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;IAC3C,CAAC;IAEQ,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAC1C,CAAC;IAEQ,IAAI;QACZ,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACzC,CAAC;IAEQ,KAAK;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAC1C,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC;IAC1D,CAAC;IAED,IAAI,cAAc,CAAC,KAAoB;QACtC,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACpC,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,KAAK,CAAC;QACrC,CAAC;IACF,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC;IACxD,CAAC;IACD,IAAI,YAAY,CAAC,KAAoB;QACpC,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACpC,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,KAAK,CAAC;QACnC,CAAC;IACF,CAAC;IAED,iBAAiB,CAAC,KAAa,EAAE,GAAW,EAAE,SAA2C;QACxF,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC;QACvD,CAAC;IACF,CAAC;IAED,aAAa;QACZ,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC;IACrC,CAAC;IAED,cAAc;QACb,OAAO,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC;IACtC,CAAC;IAED,iBAAiB,CAAC,OAAe;QAChC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QACxC,IAAI,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC;IAEQ,MAAM;QACd,MAAM,gBAAgB,GAAG;YACxB,eAAe,EAAE,IAAI;YACrB,sBAAsB,EAAE,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC;YAClD,yBAAyB,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;YACjD,yBAAyB,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;YACjD,yBAAyB,EAAE,IAAI,CAAC,OAAO;SACvC,CAAC;QAEF,OAAO,IAAI,CAAA;iBACI,QAAQ,CAAC,gBAAgB,CAAC;MACrC,IAAI,CAAC,KAAK;YACX,CAAC,CAAC,IAAI,CAAA,2DAA2D,IAAI,CAAC,KAAK,UAAU;YACrF,CAAC,CAAC,OAAO;MACR,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC,CAAC,OAAO;;;;cAIhF,IAAI,CAAC,IAAI;;mBAEJ,IAAI,CAAC,QAAQ;mBACb,IAAI,CAAC,QAAQ;qBACX,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC;eACjC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;cACtB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;sBACZ,SAAS,CAAC,IAAI,CAAC,YAAmB,CAAC;mBACtC,IAAI,CAAC,QAAQ;iBACf,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;mBACrB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;mBACzB,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;gBAC5B,IAAI,CAAC,kBAAkB;iBACtB,IAAI,CAAC,kBAAkB;iBACvB,IAAI,CAAC,aAAa;gBACnB,IAAI,CAAC,YAAY;eAClB,IAAI,CAAC,WAAW;;uCAEQ,IAAI,CAAC,gBAAgB;;MAEtD,IAAI,CAAC,YAAY;YAClB,CAAC,CAAC,IAAI,CAAA;;;;iBAIM,CAAC,IAAI,CAAC,QAAQ;gBACtB,CAAC,CAAC,yCAAyC;gBAC3C,CAAC,CAAC,yCAAyC;;SAE3C,IAAI,CAAC,YAAY;WACf;YACN,CAAC,CAAC,OAAO;;GAEX,CAAC;IACH,CAAC;;AAlMD,UAAU;AACM,mBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAsB3B,2BAAc,GAAG,IAAI,AAAP,CAAQ;AApBc;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAA0B;AACxC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAgB;AACA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAe;AACd;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAgB;AACf;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAsB;AACG;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAmB;AACd;IAAtE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAuB;AACjD;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAA2B;AACH;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAA2B;AAClD;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAkC;AAChC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAA2B;AAC3B;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AACjB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAoB;AACnB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAoB;AAG7C;IAAhB,KAAK,EAAE;6CAAyB;AAER;IAAxB,KAAK,CAAC,gBAAgB,CAAC;6CAA4B;AAtBxC,YAAY;IADxB,oBAAoB,CAAC,eAAe,CAAC;GACzB,YAAY,CAoMxB","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-textfield.styles';\n\nimport '../sds-icon/sds-icon';\n\ntype InputType = 'text' | 'email' | 'tel' | 'number' | 'password' | 'search' | 'url';\nexport type AutocompleteTypes =\n\t| 'off'\n\t| 'on'\n\t| 'name'\n\t| 'honorific-prefix'\n\t| 'given-name'\n\t| 'additional-name'\n\t| 'family-name'\n\t| 'honorific-suffix'\n\t| 'nickname'\n\t| 'email'\n\t| 'username'\n\t| 'new-password'\n\t| 'current-password'\n\t| 'one-time-code'\n\t| 'organization-title'\n\t| 'organization'\n\t| 'street-address'\n\t| 'address-line1'\n\t| 'address-line2'\n\t| 'address-line3'\n\t| 'address-level4'\n\t| 'address-level3'\n\t| 'address-level2'\n\t| 'address-level1'\n\t| 'country'\n\t| 'country-name'\n\t| 'postal-code'\n\t| 'cc-name'\n\t| 'cc-given-name'\n\t| 'cc-additional-name'\n\t| 'cc-family-name'\n\t| 'cc-number'\n\t| 'cc-exp'\n\t| 'cc-exp-month'\n\t| 'cc-exp-year'\n\t| 'cc-csc'\n\t| 'cc-type'\n\t| 'transaction-currency'\n\t| 'transaction-amount'\n\t| 'language'\n\t| 'bday'\n\t| 'bday-day'\n\t| 'bday-month'\n\t| 'bday-year'\n\t| 'sex'\n\t| 'tel'\n\t| 'tel-country-code'\n\t| 'tel-national'\n\t| 'tel-area-code'\n\t| 'tel-local'\n\t| 'tel-extension'\n\t| 'impp'\n\t| 'url'\n\t| 'photo';\n\nexport interface SDSTextFieldProps {\n\ttype?: InputType;\n\tvalue?: string;\n\tname?: string;\n\tlabel?: string;\n\tplaceholder?: string;\n\t'help-text'?: string;\n\t'error-message'?: string;\n\tdisabled?: boolean;\n\treadonly?: boolean;\n\tautocomplete?: AutocompleteTypes;\n\trequired?: boolean;\n\tpattern?: string;\n\tminlength?: number;\n\tmaxlength?: number;\n\tonInput?: (event: Event) => void;\n\tonChange?: (event: Event) => void;\n\tonSelect?: (event: Event) => void;\n\tonFocus?: (event: Event) => void;\n\tonBlur?: (event: Event) => void;\n}\n\n@guardedCustomElement('sds-textfield')\nexport class SDSTextField extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) type: InputType = 'text';\n\t@property({ type: String }) value?: string;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String, reflect: true }) label?: string;\n\t@property({ type: String, reflect: true }) placeholder?: string;\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: string;\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: string;\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) autocomplete?: AutocompleteTypes;\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: String, reflect: true }) pattern?: string;\n\t@property({ type: Number, reflect: true }) minlength?: number;\n\t@property({ type: Number, reflect: true }) maxlength?: number;\n\n\t// State\n\t@state() private hasIcon = false;\n\n\t@query('#sds-textfield') control!: HTMLInputElement;\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\tprivate _defaultValue: string = '';\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis._defaultValue = this.value ?? '';\n\t}\n\n\tprivate readonly handleSlotChange = (e: Event) => {\n\t\tconst slot = e.target as HTMLSlotElement;\n\t\tthis.hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n\t};\n\n\tprivate updateValidity() {\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate readonly _handleInputChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tconst currentValue = (event.target as HTMLInputElement).value;\n\t\t\tthis.value = currentValue;\n\t\t\tthis.internals.setFormValue(currentValue === '' ? null : currentValue);\n\t\t\tthis.updateValidity();\n\t\t\tthis.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleSelect = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (!this.disabled) {\n\t\t\tthis.dispatchEvent(new CustomEvent('select', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tformResetCallback() {\n\t\tthis.control.value = this._defaultValue;\n\t\tthis.internals.setFormValue(this._defaultValue === '' ? null : this._defaultValue);\n\t\tthis.value = this._defaultValue;\n\t\tthis.updateValidity();\n\t}\n\n\tselect(): void {\n\t\tif (!this.disabled) this.control.select();\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.control.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.control.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.control.click();\n\t}\n\n\tget selectionStart(): number | null {\n\t\treturn this.control ? this.control.selectionStart : null;\n\t}\n\n\tset selectionStart(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionStart = value;\n\t\t}\n\t}\n\n\tget selectionEnd(): number | null {\n\t\treturn this.control ? this.control.selectionEnd : null;\n\t}\n\tset selectionEnd(value: number | null) {\n\t\tif (this.control && value !== null) {\n\t\t\tthis.control.selectionEnd = value;\n\t\t}\n\t}\n\n\tsetSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void {\n\t\tif (this.control) {\n\t\t\tthis.control.setSelectionRange(start, end, direction);\n\t\t}\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.control.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.control.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.control.setCustomValidity(message);\n\t\tthis.updateValidity();\n\t}\n\n\toverride render() {\n\t\tconst textfieldClasses = {\n\t\t\t'sds-textfield': true,\n\t\t\t'sds-textfield--error': Boolean(this.errorMessage),\n\t\t\t'sds-textfield--disabled': Boolean(this.disabled),\n\t\t\t'sds-textfield--readonly': Boolean(this.readOnly),\n\t\t\t'sds-textfield--has-icon': this.hasIcon,\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(textfieldClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html`<label for=\"sds-textfield\" class=\"sds-textfield__label\">${this.label}</label>`\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-textfield__help-text\">${this.helpText}</p>` : nothing}\n\t\t\t\t<div class=\"sds-textfield__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"sds-textfield__input\"\n\t\t\t\t\t\ttype=\"${this.type}\"\n\t\t\t\t\t\tid=\"sds-textfield\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t\tplaceholder=\"${ifDefined(this.placeholder)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tautocomplete=\"${ifDefined(this.autocomplete as any)}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\tpattern=\"${ifDefined(this.pattern)}\"\n\t\t\t\t\t\tminlength=\"${ifDefined(this.minlength)}\"\n\t\t\t\t\t\tmaxlength=\"${ifDefined(this.maxlength)}\"\n\t\t\t\t\t\t@input=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@change=\"${this._handleInputChange}\"\n\t\t\t\t\t\t@select=\"${this._handleSelect}\"\n\t\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\t/>\n\t\t\t\t\t<slot name=\"after\" @slotchange=\"${this.handleSlotChange}\" aria-hidden=\"true\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`<p class=\"sds-textfield__error-message\">\n\t\t\t\t\t\t\t<sds-icon\n\t\t\t\t\t\t\t\tname=\"warning-material-filled\"\n\t\t\t\t\t\t\t\tsize=\"m\"\n\t\t\t\t\t\t\t\tcolor=\"${!this.disabled\n\t\t\t\t\t\t\t\t\t? `var(--sds-color-semantic-icon-critical)`\n\t\t\t\t\t\t\t\t\t: `var(--sds-color-semantic-icon-disabled)`}\"\n\t\t\t\t\t\t\t></sds-icon>\n\t\t\t\t\t\t\t${this.errorMessage}\n\t\t\t\t\t\t</p>`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-textfield': SDSTextField;\n\t}\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-textfield.spec.d.ts","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.spec.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { test, expect } from '@playwright/test';
|
|
2
|
+
import { expect as sdsExpect } from '../playwright-util/custom-matchers';
|
|
3
|
+
const textfieldIds = [
|
|
4
|
+
'textfield-name',
|
|
5
|
+
'textfield-label',
|
|
6
|
+
'textfield-placeholder',
|
|
7
|
+
'textfield-helptext',
|
|
8
|
+
'textfield-disabled',
|
|
9
|
+
'textfield-readonly',
|
|
10
|
+
'textfield-required',
|
|
11
|
+
'textfield-error',
|
|
12
|
+
'textfield-icon',
|
|
13
|
+
'textfield-autocomplete-off',
|
|
14
|
+
'textfield-autocomplete-on',
|
|
15
|
+
'textfield-pattern',
|
|
16
|
+
'textfield-min',
|
|
17
|
+
'textfield-max',
|
|
18
|
+
];
|
|
19
|
+
const pageUrl = 'iframe.html?viewMode=docs&id=test-textfield--docs';
|
|
20
|
+
test.describe('textfield-component', () => {
|
|
21
|
+
test.beforeEach(async ({ page }) => {
|
|
22
|
+
await page.goto(pageUrl);
|
|
23
|
+
});
|
|
24
|
+
test('visibility', async ({ page }) => {
|
|
25
|
+
for (const id of textfieldIds) {
|
|
26
|
+
await expect(page.locator(`#${id}`)).toBeVisible();
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
test('design-implementation', async ({ page }) => {
|
|
30
|
+
await page.reload();
|
|
31
|
+
for (const id of textfieldIds) {
|
|
32
|
+
// Default state
|
|
33
|
+
await expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}.png`);
|
|
34
|
+
// Hover state
|
|
35
|
+
page.locator(`#${id}`).hover();
|
|
36
|
+
await expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}-hover.png`);
|
|
37
|
+
// Focus state
|
|
38
|
+
await page.evaluate((id) => {
|
|
39
|
+
const element = document.getElementById(id);
|
|
40
|
+
if (element) {
|
|
41
|
+
const parentDiv = document.createElement('div');
|
|
42
|
+
parentDiv.style.padding = '10px';
|
|
43
|
+
parentDiv.style.backgroundColor = 'white';
|
|
44
|
+
element.parentNode?.insertBefore(parentDiv, element);
|
|
45
|
+
parentDiv.appendChild(element);
|
|
46
|
+
}
|
|
47
|
+
}, id);
|
|
48
|
+
page.locator(`#${id}`).focus();
|
|
49
|
+
const parentDiv = await page.locator(`#${id}`).locator('xpath=..');
|
|
50
|
+
await expect(parentDiv).toHaveScreenshot(`${id}-focus.png`);
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
test('form-submission', async ({ page }) => {
|
|
54
|
+
let requestUrl;
|
|
55
|
+
page.on('request', (request) => {
|
|
56
|
+
if (request.url().includes('iframe.html?name=John')) {
|
|
57
|
+
requestUrl = new URL(request.url());
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
await page.locator('#textfield-name').pressSequentially('John');
|
|
61
|
+
await page.locator('#submit-button').click();
|
|
62
|
+
await expect(requestUrl?.searchParams.get('name')).toBe('John');
|
|
63
|
+
});
|
|
64
|
+
test('form-reset', async ({ page }) => {
|
|
65
|
+
await page.locator('#textfield-name').pressSequentially('John');
|
|
66
|
+
await page.locator('#reset-button').click();
|
|
67
|
+
const value = await page.locator('#textfield-name').getAttribute('value');
|
|
68
|
+
expect(value).toBeNull();
|
|
69
|
+
});
|
|
70
|
+
test('minlength', async ({ page }) => {
|
|
71
|
+
const textfield = page.locator('#textfield-min');
|
|
72
|
+
await textfield.pressSequentially('abc');
|
|
73
|
+
const isValidShort = await textfield.evaluate((el) => el.checkValidity());
|
|
74
|
+
expect(isValidShort).toBe(false);
|
|
75
|
+
await page.goto(pageUrl);
|
|
76
|
+
await textfield.pressSequentially('abcd');
|
|
77
|
+
const isValidExact = await textfield.evaluate((el) => el.checkValidity());
|
|
78
|
+
expect(isValidExact).toBe(true);
|
|
79
|
+
});
|
|
80
|
+
test('maxlength', async ({ page }) => {
|
|
81
|
+
const textfield = page.locator('#textfield-max');
|
|
82
|
+
await textfield.pressSequentially('abcdef');
|
|
83
|
+
await sdsExpect(textfield).toHaveValue('abcd');
|
|
84
|
+
});
|
|
85
|
+
test('pattern', async ({ page }) => {
|
|
86
|
+
const textfield = page.locator('#textfield-pattern');
|
|
87
|
+
// Non-digits → invalid
|
|
88
|
+
await textfield.pressSequentially('abcd');
|
|
89
|
+
let isValid = await textfield.evaluate((el) => el.checkValidity());
|
|
90
|
+
expect(isValid).toBe(false);
|
|
91
|
+
// Too few digits → invalid
|
|
92
|
+
await page.goto(pageUrl);
|
|
93
|
+
await textfield.pressSequentially('123');
|
|
94
|
+
isValid = await textfield.evaluate((el) => el.checkValidity());
|
|
95
|
+
expect(isValid).toBe(false);
|
|
96
|
+
// Exactly 4 digits → valid
|
|
97
|
+
await page.goto(pageUrl);
|
|
98
|
+
await textfield.pressSequentially('1234');
|
|
99
|
+
isValid = await textfield.evaluate((el) => el.checkValidity());
|
|
100
|
+
expect(isValid).toBe(true);
|
|
101
|
+
// Too many digits → invalid
|
|
102
|
+
await page.goto(pageUrl);
|
|
103
|
+
await textfield.pressSequentially('12345');
|
|
104
|
+
isValid = await textfield.evaluate((el) => el.checkValidity());
|
|
105
|
+
expect(isValid).toBe(false);
|
|
106
|
+
});
|
|
107
|
+
test('required', async ({ page }) => {
|
|
108
|
+
const textfield = page.locator('#textfield-required');
|
|
109
|
+
// No value → invalid
|
|
110
|
+
let isValid = await textfield.evaluate((el) => el.checkValidity());
|
|
111
|
+
expect(isValid).toBe(false);
|
|
112
|
+
// Has value → valid
|
|
113
|
+
await page.goto(pageUrl);
|
|
114
|
+
await textfield.pressSequentially('abc');
|
|
115
|
+
isValid = await textfield.evaluate((el) => el.checkValidity());
|
|
116
|
+
expect(isValid).toBe(true);
|
|
117
|
+
});
|
|
118
|
+
test('readonly', async ({ page }) => {
|
|
119
|
+
const textfield = page.locator('#textfield-readonly');
|
|
120
|
+
await textfield.pressSequentially('abc');
|
|
121
|
+
await sdsExpect(textfield).toHaveValue('Kan ikke endres');
|
|
122
|
+
});
|
|
123
|
+
test('autocomplete on/off', async ({ page }) => {
|
|
124
|
+
const textfields = [
|
|
125
|
+
{ id: 'textfield-autocomplete-off', expected: 'off' },
|
|
126
|
+
{ id: 'textfield-autocomplete-on', expected: 'on' },
|
|
127
|
+
];
|
|
128
|
+
for (const { id, expected } of textfields) {
|
|
129
|
+
const host = page.locator(`#${id}`);
|
|
130
|
+
await expect(host).toHaveAttribute('autocomplete', expected);
|
|
131
|
+
const shadowDomInput = await host.evaluate((el) => {
|
|
132
|
+
const input = el.shadowRoot?.querySelector('input');
|
|
133
|
+
return input?.autocomplete ?? null;
|
|
134
|
+
});
|
|
135
|
+
expect(shadowDomInput).toBe(expected);
|
|
136
|
+
}
|
|
137
|
+
});
|
|
138
|
+
});
|
|
139
|
+
//# sourceMappingURL=sds-textfield.spec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-textfield.spec.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from '@playwright/test';\nimport { expect as sdsExpect } from '../playwright-util/custom-matchers';\n\nconst textfieldIds = [\n\t'textfield-name',\n\t'textfield-label',\n\t'textfield-placeholder',\n\t'textfield-helptext',\n\t'textfield-disabled',\n\t'textfield-readonly',\n\t'textfield-required',\n\t'textfield-error',\n\t'textfield-icon',\n\t'textfield-autocomplete-off',\n\t'textfield-autocomplete-on',\n\t'textfield-pattern',\n\t'textfield-min',\n\t'textfield-max',\n];\n\nconst pageUrl = 'iframe.html?viewMode=docs&id=test-textfield--docs';\n\ntest.describe('textfield-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto(pageUrl);\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tfor (const id of textfieldIds) {\n\t\t\tawait expect(page.locator(`#${id}`)).toBeVisible();\n\t\t}\n\t});\n\n\ttest('design-implementation', async ({ page }) => {\n\t\tawait page.reload();\n\n\t\tfor (const id of textfieldIds) {\n\t\t\t// Default state\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}.png`);\n\t\t\t// Hover state\n\t\t\tpage.locator(`#${id}`).hover();\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}-hover.png`);\n\t\t\t// Focus state\n\t\t\tawait page.evaluate((id) => {\n\t\t\t\tconst element = document.getElementById(id);\n\t\t\t\tif (element) {\n\t\t\t\t\tconst parentDiv = document.createElement('div');\n\t\t\t\t\tparentDiv.style.padding = '10px';\n\t\t\t\t\tparentDiv.style.backgroundColor = 'white';\n\t\t\t\t\telement.parentNode?.insertBefore(parentDiv, element);\n\t\t\t\t\tparentDiv.appendChild(element);\n\t\t\t\t}\n\t\t\t}, id);\n\t\t\tpage.locator(`#${id}`).focus();\n\t\t\tconst parentDiv = await page.locator(`#${id}`).locator('xpath=..');\n\t\t\tawait expect(parentDiv).toHaveScreenshot(`${id}-focus.png`);\n\t\t}\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tlet requestUrl: URL | undefined;\n\t\tpage.on('request', (request) => {\n\t\t\tif (request.url().includes('iframe.html?name=John')) {\n\t\t\t\trequestUrl = new URL(request.url());\n\t\t\t}\n\t\t});\n\n\t\tawait page.locator('#textfield-name').pressSequentially('John');\n\t\tawait page.locator('#submit-button').click();\n\t\tawait expect(requestUrl?.searchParams.get('name')).toBe('John');\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#textfield-name').pressSequentially('John');\n\t\tawait page.locator('#reset-button').click();\n\t\tconst value = await page.locator('#textfield-name').getAttribute('value');\n\t\texpect(value).toBeNull();\n\t});\n\n\ttest('minlength', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-min');\n\n\t\tawait textfield.pressSequentially('abc');\n\t\tconst isValidShort = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValidShort).toBe(false);\n\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('abcd');\n\t\tconst isValidExact = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValidExact).toBe(true);\n\t});\n\n\ttest('maxlength', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-max');\n\n\t\tawait textfield.pressSequentially('abcdef');\n\t\tawait sdsExpect(textfield).toHaveValue('abcd');\n\t});\n\n\ttest('pattern', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-pattern');\n\n\t\t// Non-digits → invalid\n\t\tawait textfield.pressSequentially('abcd');\n\t\tlet isValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Too few digits → invalid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('123');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Exactly 4 digits → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('1234');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(true);\n\n\t\t// Too many digits → invalid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('12345');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\t});\n\n\ttest('required', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-required');\n\n\t\t// No value → invalid\n\t\tlet isValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Has value → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('abc');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(true);\n\t});\n\n\ttest('readonly', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-readonly');\n\t\tawait textfield.pressSequentially('abc');\n\t\tawait sdsExpect(textfield).toHaveValue('Kan ikke endres');\n\t});\n\n\ttest('autocomplete on/off', async ({ page }) => {\n\t\tconst textfields = [\n\t\t\t{ id: 'textfield-autocomplete-off', expected: 'off' },\n\t\t\t{ id: 'textfield-autocomplete-on', expected: 'on' },\n\t\t];\n\n\t\tfor (const { id, expected } of textfields) {\n\t\t\tconst host = page.locator(`#${id}`);\n\n\t\t\tawait expect(host).toHaveAttribute('autocomplete', expected);\n\t\t\tconst shadowDomInput = await host.evaluate((el: HTMLElement) => {\n\t\t\t\tconst input = el.shadowRoot?.querySelector('input') as HTMLInputElement | null;\n\t\t\t\treturn input?.autocomplete ?? null;\n\t\t\t});\n\t\t\texpect(shadowDomInput).toBe(expected);\n\t\t}\n\t});\n});\n"]}
|