@politiet/sheriff-web-components 1.0.3-alpha.0 → 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-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 +6 -11
- 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-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 +10 -1
- 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-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 +9 -4
- 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-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 +33 -24
- package/dist/utils/guarded-custom-element.d.ts +3 -5
- package/dist/utils/guarded-custom-element.d.ts.map +1 -1
- package/dist/utils/guarded-custom-element.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-radio.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property, 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-radio.styles';\n\nexport interface SDSRadioProps {\n\tdisabled?: boolean;\n\trequired?: boolean;\n\tlabel?: string;\n\t'hide-label'?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\terror?: boolean;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value?: string }>) => void;\n\tonFocus?: (event: CustomEvent) => void;\n\tonBlur?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-radio')\nexport class SDSRadio extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: String, reflect: true }) label: string = '';\n\t@property({ type: Boolean, reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String }) value: string = 'on';\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\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.internals.role = 'radio';\n\t\tif (!this._initialChecked) {\n\t\t\tthis._initialChecked = this.checked;\n\t\t}\n\t\tthis.addEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis.removeEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tthis._updateGroupValidation();\n\t}\n\n\tprivate _getGroupRadios(): SDSRadio[] {\n\t\tif (!this.name) return [this];\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radioGroup = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\treturn radioGroup;\n\t}\n\n\tprivate _updateGroupValidation() {\n\t\tconst group: Array<SDSRadio> = this._getGroupRadios();\n\t\tconst isAnyChecked = group.some((radio) => radio.checked);\n\t\tconst isAnyRequired = group.some((radio) => radio.required);\n\t\tgroup.forEach((radio) => {\n\t\t\tif (!radio.control) return;\n\t\t\tif (isAnyRequired) {\n\t\t\t\tisAnyChecked\n\t\t\t\t\t? radio.internals.setValidity({})\n\t\t\t\t\t: radio.internals.setValidity(\n\t\t\t\t\t\t\t{ valueMissing: true },\n\t\t\t\t\t\t\tradio.control.validationMessage,\n\t\t\t\t\t\t\tradio.control\n\t\t\t\t\t\t);\n\t\t\t\tradio.internals.setValidity(\n\t\t\t\t\tisAnyChecked ? {} : { valueMissing: true },\n\t\t\t\t\tisAnyChecked ? 'Error' : radio.control.validationMessage,\n\t\t\t\t\t...(radio.control ? [radio.control] : [])\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tradio.internals.setValidity({});\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleKeydown = (event: KeyboardEvent) => {\n\t\tif (!this.name || this.disabled) return;\n\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\tconst currentIndex = radios.indexOf(this);\n\n\t\tif (currentIndex === -1) return;\n\n\t\tlet targetIndex: number | null = null;\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowUp':\n\t\t\tcase 'ArrowLeft':\n\t\t\t\ttargetIndex = currentIndex > 0 ? currentIndex - 1 : radios.length - 1;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\tcase 'ArrowRight':\n\t\t\t\ttargetIndex = currentIndex < radios.length - 1 ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\tconst targetRadio = radios[targetIndex];\n\t\ttargetRadio?.focus();\n\t\ttargetRadio?.click();\n\t\tevent.preventDefault();\n\t};\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\t// TODO: \"on\" skal bare assignes til value dersom radio er avhuket og mangler value. Unchecked radio uten value skal settes til null\n\t\tthis.internals.setFormValue(this.checked ? this.value ?? 'on' : 'on');\n\t\tthis._updateGroupValidation();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('checked')) {\n\t\t\tif (this.checked) {\n\t\t\t\tthis._uncheckSiblings();\n\t\t\t\tthis.internals.setFormValue(this.value ?? null);\n\t\t\t} else {\n\t\t\t\tthis.internals.setFormValue(null);\n\t\t\t}\n\t\t\tthis._updateGroupValidation();\n\t\t}\n\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t}\n\n\tprivate _uncheckSiblings() {\n\t\tif (!this.name) return;\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`);\n\n\t\tradios.forEach((radio) => {\n\t\t\tif (radio !== this) {\n\t\t\t\tradio.checked = false;\n\t\t\t\tradio.internals.setFormValue(null);\n\t\t\t\tconst input: HTMLInputElement | null | undefined = radio.shadowRoot?.querySelector('#control');\n\t\t\t\tif (input) {\n\t\t\t\t\tinput.checked = false;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tif (!this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tif (this.checked) {\n\t\t\t\tthis._uncheckSiblings();\n\t\t\t}\n\t\t\tthis._updateGroupValidation();\n\t\t\tthis.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tget form() {\n\t\treturn this.internals.form;\n\t}\n\n\tget type() {\n\t\treturn this.localName;\n\t}\n\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.internals.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.internals.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.internals.setValidity({ customError: !!message }, message);\n\t}\n\n\tformDisabledCallback(disabled: boolean): void {\n\t\tthis.disabled = disabled;\n\t\tif (this.control) this.control.disabled = disabled;\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst radioClasses = {\n\t\t\t'sds-radio': true,\n\t\t\t'sds-radio--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-radio__input': true,\n\t\t\t'sds-radio__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(radioClasses)}\">\n\t\t\t\t<label class=\"sds-radio__label\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tid=\"control\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\t@change=\"${this._handleChange}\"\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\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t\t/>\n\t\t\t\t\t${this.label ? html`<span class=\"sds-radio__text\">${this.label}</span>` : nothing}\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio': SDSRadio;\n\t}\n}\n"]}
|
|
1
|
+
{"version":3,"file":"sds-radio.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property, 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-radio.styles';\n\nexport interface SDSRadioProps {\n\tdisabled?: boolean;\n\trequired?: boolean;\n\tlabel?: string;\n\t'hide-label'?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\terror?: boolean;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value?: string }>) => void;\n\tonFocus?: (event: CustomEvent) => void;\n\tonBlur?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-radio')\nexport class SDSRadio extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: String, reflect: true }) label: string = '';\n\t@property({ type: Boolean, reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String }) value: string = 'on';\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\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.internals.role = 'radio';\n\t\tif (!this._initialChecked) {\n\t\t\tthis._initialChecked = this.checked;\n\t\t}\n\t\tthis.addEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis.removeEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tthis._updateGroupValidation();\n\t}\n\n\tprivate _getGroupRadios(): SDSRadio[] {\n\t\tif (!this.name) return [this];\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radioGroup = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\treturn radioGroup;\n\t}\n\n\tprivate _updateGroupValidation() {\n\t\tconst group: Array<SDSRadio> = this._getGroupRadios();\n\t\tconst isAnyChecked = group.some((radio) => radio.checked);\n\t\tconst isAnyRequired = group.some((radio) => radio.required);\n\t\tgroup.forEach((radio) => {\n\t\t\tif (!radio.control) return;\n\t\t\tif (isAnyRequired) {\n\t\t\t\tisAnyChecked\n\t\t\t\t\t? radio.internals.setValidity({})\n\t\t\t\t\t: radio.internals.setValidity(\n\t\t\t\t\t\t\t{ valueMissing: true },\n\t\t\t\t\t\t\tradio.control.validationMessage,\n\t\t\t\t\t\t\tradio.control\n\t\t\t\t\t\t);\n\t\t\t\tradio.internals.setValidity(\n\t\t\t\t\tisAnyChecked ? {} : { valueMissing: true },\n\t\t\t\t\tisAnyChecked ? 'Error' : radio.control.validationMessage,\n\t\t\t\t\t...(radio.control ? [radio.control] : [])\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tradio.internals.setValidity({});\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleKeydown = (event: KeyboardEvent) => {\n\t\tif (!this.name || this.disabled) return;\n\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\tconst currentIndex = radios.indexOf(this);\n\n\t\tif (currentIndex === -1) return;\n\n\t\tlet targetIndex: number | null = null;\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowUp':\n\t\t\tcase 'ArrowLeft':\n\t\t\t\ttargetIndex = currentIndex > 0 ? currentIndex - 1 : radios.length - 1;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\tcase 'ArrowRight':\n\t\t\t\ttargetIndex = currentIndex < radios.length - 1 ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\tconst targetRadio = radios[targetIndex];\n\t\ttargetRadio?.focus();\n\t\ttargetRadio?.click();\n\t\tevent.preventDefault();\n\t};\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this.checked ? this.value ?? 'on' : null);\n\t\tthis._updateGroupValidation();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('checked')) {\n\t\t\tif (this.checked) {\n\t\t\t\tthis._uncheckSiblings();\n\t\t\t\tthis.internals.setFormValue(this.value ?? null);\n\t\t\t} else {\n\t\t\t\tthis.internals.setFormValue(null);\n\t\t\t}\n\t\t\tthis._updateGroupValidation();\n\t\t}\n\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t}\n\n\tprivate _uncheckSiblings() {\n\t\tif (!this.name) return;\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`);\n\n\t\tradios.forEach((radio) => {\n\t\t\tif (radio !== this) {\n\t\t\t\tradio.checked = false;\n\t\t\t\tradio.internals.setFormValue(null);\n\t\t\t\tconst input: HTMLInputElement | null | undefined = radio.shadowRoot?.querySelector('#control');\n\t\t\t\tif (input) {\n\t\t\t\t\tinput.checked = false;\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tif (!this.disabled) {\n\t\t\tconst elem = event.target as HTMLInputElement;\n\t\t\tthis.checked = elem.checked;\n\t\t\tif (this.checked) {\n\t\t\t\tthis._uncheckSiblings();\n\t\t\t}\n\t\t\tthis._updateGroupValidation();\n\t\t\tthis.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));\n\t\t}\n\t};\n\n\tprivate readonly _handleFocus = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleClick = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (event.currentTarget === event.target && !this.disabled) {\n\t\t\tthis.shadowRoot?.querySelector('input')?.click();\n\t\t}\n\t};\n\n\tget form() {\n\t\treturn this.internals.form;\n\t}\n\n\tget type(): string {\n\t\treturn 'radio';\n\t}\n\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.internals.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.internals.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.internals.setValidity({ customError: !!message }, message);\n\t}\n\n\tformDisabledCallback(disabled: boolean): void {\n\t\tthis.disabled = disabled;\n\t\tif (this.control) this.control.disabled = disabled;\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst radioClasses = {\n\t\t\t'sds-radio': true,\n\t\t\t'sds-radio--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-radio__input': true,\n\t\t\t'sds-radio__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(radioClasses)}\" @click=\"${this._handleClick}\">\n\t\t\t\t<label class=\"sds-radio__label\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tid=\"control\"\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t\t@change=\"${this._handleChange}\"\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\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t\t/>\n\t\t\t\t\t${this.label ? html`<span class=\"sds-radio__text\">${this.label}</span>` : nothing}\n\t\t\t\t</label>\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio': SDSRadio;\n\t}\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-radio.spec.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.spec.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { test } from '@playwright/test';
|
|
2
|
+
import { onFormSubmitCallback } from '../playwright-util/form';
|
|
3
|
+
import { expect } from '../playwright-util/custom-matchers';
|
|
4
|
+
test.describe('radio-component', () => {
|
|
5
|
+
test.beforeEach(async ({ page }) => {
|
|
6
|
+
await page.goto('iframe.html?viewMode=docs&id=test-radio--docs');
|
|
7
|
+
});
|
|
8
|
+
test('visibility', async ({ page }) => {
|
|
9
|
+
await expect(page.locator('#with-label')).toBeVisible();
|
|
10
|
+
await expect(page.locator('#unchecked')).toBeVisible();
|
|
11
|
+
await expect(page.locator('#checked')).toBeVisible();
|
|
12
|
+
await expect(page.locator('#custom-value')).toBeVisible();
|
|
13
|
+
await expect(page.locator('#disabled')).toBeVisible();
|
|
14
|
+
await expect(page.locator('#checked-disabled')).toBeVisible();
|
|
15
|
+
});
|
|
16
|
+
test('states', async ({ page }) => {
|
|
17
|
+
const radioWithLabel = page.locator('#with-label');
|
|
18
|
+
await expect(radioWithLabel).isNotChecked();
|
|
19
|
+
const uncheckedRadio = page.locator('#unchecked');
|
|
20
|
+
await expect(uncheckedRadio).isNotChecked();
|
|
21
|
+
const checkedRadio = page.locator('#checked');
|
|
22
|
+
await expect(checkedRadio).isChecked();
|
|
23
|
+
const disabledRadio = page.locator('#disabled');
|
|
24
|
+
await expect(disabledRadio).toHaveAttribute('disabled', '');
|
|
25
|
+
const checkedDisabledRadio = page.locator('#checked-disabled');
|
|
26
|
+
await expect(checkedDisabledRadio).isChecked();
|
|
27
|
+
await expect(checkedDisabledRadio).toHaveAttribute('disabled', '');
|
|
28
|
+
});
|
|
29
|
+
test('interaction', async ({ page }) => {
|
|
30
|
+
await page.getByLabel('Radio button with label').click();
|
|
31
|
+
const radioWithLabel = page.locator('#with-label');
|
|
32
|
+
await expect(radioWithLabel).isChecked();
|
|
33
|
+
const uncheckedRadio = page.locator('#unchecked');
|
|
34
|
+
await uncheckedRadio.click();
|
|
35
|
+
await expect(uncheckedRadio).isChecked();
|
|
36
|
+
const disabledRadio = page.locator('#disabled');
|
|
37
|
+
await disabledRadio.click();
|
|
38
|
+
await expect(disabledRadio).isNotChecked();
|
|
39
|
+
const checkedDisabledRadio = page.locator('#checked-disabled');
|
|
40
|
+
await checkedDisabledRadio.click();
|
|
41
|
+
await expect(checkedDisabledRadio).isChecked();
|
|
42
|
+
});
|
|
43
|
+
test('form-submission', async ({ page }) => {
|
|
44
|
+
const getFormData = await onFormSubmitCallback(page, 'radio-form');
|
|
45
|
+
const radioGroupMember = page.locator('#group-member-1');
|
|
46
|
+
await radioGroupMember.click();
|
|
47
|
+
const radioGroupMember2 = page.locator('#group-member-2');
|
|
48
|
+
await radioGroupMember2.click();
|
|
49
|
+
const radioGroupMember3 = page.locator('#group-member-3');
|
|
50
|
+
await radioGroupMember3.click();
|
|
51
|
+
await page.locator('#submit-button').click();
|
|
52
|
+
await expect.poll(async () => (await getFormData()) !== null, 'Form data not received').toBeTruthy();
|
|
53
|
+
const formData = await getFormData();
|
|
54
|
+
expect(formData).toMatchObject({
|
|
55
|
+
checked: 'on',
|
|
56
|
+
'custom-value': 'custom-value',
|
|
57
|
+
'radio-group': 'option-3',
|
|
58
|
+
});
|
|
59
|
+
expect(formData).not.toHaveProperty('unchecked');
|
|
60
|
+
expect(formData).not.toHaveProperty('disabled');
|
|
61
|
+
expect(formData).not.toHaveProperty('checked-disabled');
|
|
62
|
+
});
|
|
63
|
+
test('form-reset', async ({ page }) => {
|
|
64
|
+
await page.locator('#unchecked').click();
|
|
65
|
+
await page.locator('#checked').click();
|
|
66
|
+
await page.locator('#reset-button').click();
|
|
67
|
+
await expect(page.locator('#unchecked')).isNotChecked();
|
|
68
|
+
await expect(page.locator('#checked')).isChecked();
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
//# sourceMappingURL=sds-radio.spec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sds-radio.spec.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test } from '@playwright/test';\nimport { onFormSubmitCallback } from '../playwright-util/form';\nimport { expect } from '../playwright-util/custom-matchers';\n\ntest.describe('radio-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto('iframe.html?viewMode=docs&id=test-radio--docs');\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tawait expect(page.locator('#with-label')).toBeVisible();\n\t\tawait expect(page.locator('#unchecked')).toBeVisible();\n\t\tawait expect(page.locator('#checked')).toBeVisible();\n\t\tawait expect(page.locator('#custom-value')).toBeVisible();\n\t\tawait expect(page.locator('#disabled')).toBeVisible();\n\t\tawait expect(page.locator('#checked-disabled')).toBeVisible();\n\t});\n\n\ttest('states', async ({ page }) => {\n\t\tconst radioWithLabel = page.locator('#with-label');\n\t\tawait expect(radioWithLabel).isNotChecked();\n\n\t\tconst uncheckedRadio = page.locator('#unchecked');\n\t\tawait expect(uncheckedRadio).isNotChecked();\n\n\t\tconst checkedRadio = page.locator('#checked');\n\t\tawait expect(checkedRadio).isChecked();\n\n\t\tconst disabledRadio = page.locator('#disabled');\n\t\tawait expect(disabledRadio).toHaveAttribute('disabled', '');\n\n\t\tconst checkedDisabledRadio = page.locator('#checked-disabled');\n\t\tawait expect(checkedDisabledRadio).isChecked();\n\t\tawait expect(checkedDisabledRadio).toHaveAttribute('disabled', '');\n\t});\n\n\ttest('interaction', async ({ page }) => {\n\t\tawait page.getByLabel('Radio button with label').click();\n\t\tconst radioWithLabel = page.locator('#with-label');\n\t\tawait expect(radioWithLabel).isChecked();\n\n\t\tconst uncheckedRadio = page.locator('#unchecked');\n\t\tawait uncheckedRadio.click();\n\t\tawait expect(uncheckedRadio).isChecked();\n\n\t\tconst disabledRadio = page.locator('#disabled');\n\t\tawait disabledRadio.click();\n\t\tawait expect(disabledRadio).isNotChecked();\n\n\t\tconst checkedDisabledRadio = page.locator('#checked-disabled');\n\t\tawait checkedDisabledRadio.click();\n\t\tawait expect(checkedDisabledRadio).isChecked();\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tconst getFormData = await onFormSubmitCallback(page, 'radio-form');\n\n\t\tconst radioGroupMember = page.locator('#group-member-1');\n\t\tawait radioGroupMember.click();\n\n\t\tconst radioGroupMember2 = page.locator('#group-member-2');\n\t\tawait radioGroupMember2.click();\n\n\t\tconst radioGroupMember3 = page.locator('#group-member-3');\n\t\tawait radioGroupMember3.click();\n\n\t\tawait page.locator('#submit-button').click();\n\n\t\tawait expect.poll(async () => (await getFormData()) !== null, 'Form data not received').toBeTruthy();\n\t\tconst formData = await getFormData();\n\n\t\texpect(formData).toMatchObject({\n\t\t\tchecked: 'on',\n\t\t\t'custom-value': 'custom-value',\n\t\t\t'radio-group': 'option-3',\n\t\t});\n\t\texpect(formData).not.toHaveProperty('unchecked');\n\t\texpect(formData).not.toHaveProperty('disabled');\n\t\texpect(formData).not.toHaveProperty('checked-disabled');\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#unchecked').click();\n\t\tawait page.locator('#checked').click();\n\n\t\tawait page.locator('#reset-button').click();\n\n\t\tawait expect(page.locator('#unchecked')).isNotChecked();\n\t\tawait expect(page.locator('#checked')).isChecked();\n\t});\n});\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sds-radio.styles.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-radio__label {\n\t\talign-items: flex-start;\n\t\tcursor: pointer;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tdisplay:
|
|
1
|
+
{"version":3,"file":"sds-radio.styles.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tflex: 0 0 auto;\n\t}\n\n\t.sds-radio__label {\n\t\talign-items: flex-start;\n\t\tcursor: pointer;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tdisplay: flex;\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-size: 1rem;\n\t\tfont-weight: 400;\n\t\tgap: var(--sds-spacing-3);\n\t\tline-height: 1.25;\n\n\t\t&:has(:disabled) {\n\t\t\tcursor: default;\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-radio__input {\n\t\tappearance: none;\n\t\tbackground-color: transparent;\n\t\tcolor: currentColor;\n\t\tcursor: pointer;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\taspect-ratio: 1;\n\t\tborder: 2px solid var(--sds-color-semantic-border-default);\n\t\tborder-radius: 50%;\n\t\tmargin: 0;\n\t\tposition: relative;\n\n\t\t&:checked {\n\t\t\tbackground-color: white;\n\t\t\tborder-color: var(--sds-color-semantic-surface-action-selected);\n\t\t\tborder-width: 3px;\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\tleft: 50%;\n\t\t\t\twidth: 12px;\n\t\t\t\theight: 12px;\n\t\t\t\tbackground-color: var(--sds-color-semantic-icon-action-default);\n\t\t\t\tborder-radius: 50%;\n\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\tborder-width: 3px;\n\n\t\t\t&:checked {\n\t\t\t\t&::after {\n\t\t\t\t\twidth: 12px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\toutline-offset: 1px;\n\t\t}\n\n\t\t&.sds-radio__input--error {\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-critical-xtreme);\n\n\t\t\t&:checked {\n\t\t\t\t&::after {\n\t\t\t\t\twidth: 12px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t\ttransform: translate(-50%, -50%);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\n\t\t\t&:checked {\n\t\t\t\tborder-width: 3px;\n\t\t\t\tbackground-color: white;\n\n\t\t\t\t&::after {\n\t\t\t\t\tbackground-color: var(--sds-color-semantic-border-disabled);\n\t\t\t\t\twidth: 12px;\n\t\t\t\t\theight: 12px;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& + .sds-radio__text {\n\t\t\t\tcolor: var(--sds-color-semantic-border-disabled);\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-radio__text {\n\t\tdisplay: inline-block;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding-top: 2px;\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"]}
|
|
@@ -1060,7 +1060,7 @@ let SDSCheckbox = class extends i$1 {
|
|
|
1060
1060
|
if (!this.disabled) {
|
|
1061
1061
|
const elem = event.target;
|
|
1062
1062
|
this.checked = elem.checked;
|
|
1063
|
-
this.internals.setFormValue(elem.checked ? elem.value :
|
|
1063
|
+
this.internals.setFormValue(elem.checked ? elem.value : null);
|
|
1064
1064
|
this._validate();
|
|
1065
1065
|
this.dispatchEvent(
|
|
1066
1066
|
new CustomEvent("change", {
|
|
@@ -1101,16 +1101,8 @@ let SDSCheckbox = class extends i$1 {
|
|
|
1101
1101
|
super.connectedCallback();
|
|
1102
1102
|
this._initialChecked = this.checked;
|
|
1103
1103
|
this.internals.role = "checkbox";
|
|
1104
|
-
if ("FormDataEvent" in window) {
|
|
1105
|
-
this.internals.form?.addEventListener("formdata", (event) => {
|
|
1106
|
-
if (this.disabled || !this.name || !this.checked) {
|
|
1107
|
-
return;
|
|
1108
|
-
}
|
|
1109
|
-
event.formData.set(this.name, this.value ?? "on");
|
|
1110
|
-
});
|
|
1111
|
-
}
|
|
1112
1104
|
if (this.checked) {
|
|
1113
|
-
this.internals.setFormValue(this.value
|
|
1105
|
+
this.internals.setFormValue(this.value ?? "on");
|
|
1114
1106
|
}
|
|
1115
1107
|
}
|
|
1116
1108
|
firstUpdated(_changedProperties) {
|
|
@@ -1125,7 +1117,7 @@ let SDSCheckbox = class extends i$1 {
|
|
|
1125
1117
|
if (this.control) {
|
|
1126
1118
|
this.control.checked = this._initialChecked;
|
|
1127
1119
|
}
|
|
1128
|
-
const resetValue = this.checked
|
|
1120
|
+
const resetValue = this.checked ? this.value ?? "on" : null;
|
|
1129
1121
|
this.internals.setFormValue(resetValue);
|
|
1130
1122
|
this._validate();
|
|
1131
1123
|
}
|
|
@@ -1154,6 +1146,9 @@ let SDSCheckbox = class extends i$1 {
|
|
|
1154
1146
|
this._validate();
|
|
1155
1147
|
}
|
|
1156
1148
|
}
|
|
1149
|
+
get type() {
|
|
1150
|
+
return "checkbox";
|
|
1151
|
+
}
|
|
1157
1152
|
render() {
|
|
1158
1153
|
const checkboxClasses = {
|
|
1159
1154
|
"sds-checkbox": true,
|
|
@@ -1519,32 +1514,29 @@ const styles$d = i$4`
|
|
|
1519
1514
|
line-height: 1.25;
|
|
1520
1515
|
text-align: center;
|
|
1521
1516
|
|
|
1522
|
-
user-select:
|
|
1517
|
+
user-select: text;
|
|
1523
1518
|
cursor: pointer;
|
|
1524
1519
|
|
|
1525
|
-
&:has(
|
|
1520
|
+
&:has(:checked) {
|
|
1526
1521
|
background-color: var(--sds-color-semantic-surface-action-default);
|
|
1527
1522
|
border-color: var(--sds-color-semantic-surface-action-default);
|
|
1528
1523
|
color: var(--sds-color-semantic-text-on-action);
|
|
1529
1524
|
}
|
|
1530
1525
|
|
|
1531
|
-
&:has(
|
|
1532
|
-
input[type='checkbox'][disabled],
|
|
1533
|
-
input[type='checkbox']:checked[disabled]
|
|
1534
|
-
) {
|
|
1526
|
+
&:has(input[type='checkbox'][disabled], input[type='checkbox']:checked[disabled]) {
|
|
1535
1527
|
background-color: var(--sds-color-semantic-surface-disabled);
|
|
1536
1528
|
border: 2px solid var(--sds-color-semantic-surface-disabled);
|
|
1537
1529
|
color: var(--sds-color-semantic-text-disabled);
|
|
1538
1530
|
cursor: not-allowed;
|
|
1539
1531
|
}
|
|
1540
1532
|
|
|
1541
|
-
&:hover {
|
|
1533
|
+
&:not(:has([readonly])):hover {
|
|
1542
1534
|
background-color: var(--sds-color-semantic-surface-action-hover);
|
|
1543
1535
|
border-color: var(--sds-color-semantic-surface-action-hover);
|
|
1544
1536
|
color: var(--sds-color-semantic-text-on-action);
|
|
1545
1537
|
}
|
|
1546
1538
|
|
|
1547
|
-
&:active {
|
|
1539
|
+
&:not(:has([readonly])):active {
|
|
1548
1540
|
background-color: var(--sds-color-semantic-surface-action-active);
|
|
1549
1541
|
border: 2px solid var(--sds-color-semantic-surface-action-active);
|
|
1550
1542
|
}
|
|
@@ -1555,6 +1547,10 @@ const styles$d = i$4`
|
|
|
1555
1547
|
outline-offset: 2px;
|
|
1556
1548
|
}
|
|
1557
1549
|
|
|
1550
|
+
&:has([readonly]) {
|
|
1551
|
+
cursor: default;
|
|
1552
|
+
}
|
|
1553
|
+
|
|
1558
1554
|
&.sds-chip--small {
|
|
1559
1555
|
font-size: 0.875rem;
|
|
1560
1556
|
line-height: 1.125rem;
|
|
@@ -1592,10 +1588,12 @@ let SDSChip = class extends i$1 {
|
|
|
1592
1588
|
this.size = "large";
|
|
1593
1589
|
this.checked = false;
|
|
1594
1590
|
this.disabled = false;
|
|
1591
|
+
this.readonly = false;
|
|
1595
1592
|
this._initialChecked = false;
|
|
1596
1593
|
this._toggle = (event) => {
|
|
1597
1594
|
event.preventDefault();
|
|
1598
1595
|
event.stopImmediatePropagation();
|
|
1596
|
+
if (this.disabled || this.readonly) return;
|
|
1599
1597
|
this.checked = !this.checked;
|
|
1600
1598
|
this.internals.setFormValue(this.checked && this.value ? this.value : "");
|
|
1601
1599
|
this.dispatchEvent(
|
|
@@ -1606,6 +1604,7 @@ let SDSChip = class extends i$1 {
|
|
|
1606
1604
|
);
|
|
1607
1605
|
};
|
|
1608
1606
|
this._remove = () => {
|
|
1607
|
+
if (this.disabled || this.readonly) return;
|
|
1609
1608
|
this.dispatchEvent(
|
|
1610
1609
|
new CustomEvent("sds-remove", {
|
|
1611
1610
|
bubbles: true,
|
|
@@ -1643,7 +1642,7 @@ let SDSChip = class extends i$1 {
|
|
|
1643
1642
|
"sds-chip": true,
|
|
1644
1643
|
"sds-chip--small": this.size === "small"
|
|
1645
1644
|
};
|
|
1646
|
-
if (this.variant === "removable") {
|
|
1645
|
+
if (this.variant === "removable" && !this.readonly) {
|
|
1647
1646
|
return x`<button class="${e$1(chipClasses)}" @click=${this._remove}>
|
|
1648
1647
|
<slot></slot>
|
|
1649
1648
|
<sds-icon name="close-material-outlined" size="s"></sds-icon>
|
|
@@ -1657,6 +1656,7 @@ let SDSChip = class extends i$1 {
|
|
|
1657
1656
|
value="${o$1(this.value)}"
|
|
1658
1657
|
?checked="${this.checked}"
|
|
1659
1658
|
?disabled="${this.disabled}"
|
|
1659
|
+
?readonly="${this.readonly}"
|
|
1660
1660
|
/>
|
|
1661
1661
|
<slot></slot>
|
|
1662
1662
|
</label>`;
|
|
@@ -1682,6 +1682,9 @@ __decorateClass$d([
|
|
|
1682
1682
|
__decorateClass$d([
|
|
1683
1683
|
n2({ type: Boolean, reflect: true })
|
|
1684
1684
|
], SDSChip.prototype, "disabled", 2);
|
|
1685
|
+
__decorateClass$d([
|
|
1686
|
+
n2({ type: Boolean, reflect: true })
|
|
1687
|
+
], SDSChip.prototype, "readonly", 2);
|
|
1685
1688
|
__decorateClass$d([
|
|
1686
1689
|
e$3("#control")
|
|
1687
1690
|
], SDSChip.prototype, "control", 2);
|
|
@@ -2692,7 +2695,7 @@ const styles$4 = i$4`
|
|
|
2692
2695
|
align-items: flex-start;
|
|
2693
2696
|
cursor: pointer;
|
|
2694
2697
|
color: var(--sds-color-semantic-text-default);
|
|
2695
|
-
display:
|
|
2698
|
+
display: flex;
|
|
2696
2699
|
font-family: var(--sds-typography-font-family);
|
|
2697
2700
|
font-size: 1rem;
|
|
2698
2701
|
font-weight: 400;
|
|
@@ -2855,6 +2858,12 @@ let SDSRadio = class extends i$1 {
|
|
|
2855
2858
|
event.stopImmediatePropagation();
|
|
2856
2859
|
this.dispatchEvent(new CustomEvent("blur", { bubbles: true, composed: true }));
|
|
2857
2860
|
};
|
|
2861
|
+
this._handleClick = (event) => {
|
|
2862
|
+
event.stopImmediatePropagation();
|
|
2863
|
+
if (event.currentTarget === event.target && !this.disabled) {
|
|
2864
|
+
this.shadowRoot?.querySelector("input")?.click();
|
|
2865
|
+
}
|
|
2866
|
+
};
|
|
2858
2867
|
this.internals = this.attachInternals();
|
|
2859
2868
|
this.attachShadow({ mode: "open", delegatesFocus: true });
|
|
2860
2869
|
}
|
|
@@ -2905,7 +2914,7 @@ let SDSRadio = class extends i$1 {
|
|
|
2905
2914
|
formResetCallback() {
|
|
2906
2915
|
this.checked = this._initialChecked;
|
|
2907
2916
|
this.control.checked = this._initialChecked;
|
|
2908
|
-
this.internals.setFormValue(this.checked ? this.value ?? "on" :
|
|
2917
|
+
this.internals.setFormValue(this.checked ? this.value ?? "on" : null);
|
|
2909
2918
|
this._updateGroupValidation();
|
|
2910
2919
|
}
|
|
2911
2920
|
updated(changedProperties) {
|
|
@@ -2942,7 +2951,7 @@ let SDSRadio = class extends i$1 {
|
|
|
2942
2951
|
return this.internals.form;
|
|
2943
2952
|
}
|
|
2944
2953
|
get type() {
|
|
2945
|
-
return
|
|
2954
|
+
return "radio";
|
|
2946
2955
|
}
|
|
2947
2956
|
get validity() {
|
|
2948
2957
|
return this.internals.validity;
|
|
@@ -2985,7 +2994,7 @@ let SDSRadio = class extends i$1 {
|
|
|
2985
2994
|
"sds-radio__input--error": Boolean(this.error)
|
|
2986
2995
|
};
|
|
2987
2996
|
return x`
|
|
2988
|
-
<div class="${e$1(radioClasses)}">
|
|
2997
|
+
<div class="${e$1(radioClasses)}" @click="${this._handleClick}">
|
|
2989
2998
|
<label class="sds-radio__label">
|
|
2990
2999
|
<input
|
|
2991
3000
|
id="control"
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
type NonEmptyString
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export type SdsTagName = `sds-${NonEmptyString}`;
|
|
5
|
-
export declare function guardedCustomElement<Tag extends `sds-${string}`>(tagName: Tag): ClassDecorator;
|
|
1
|
+
type NonEmptyString<T extends string> = '' extends T ? never : T;
|
|
2
|
+
export type SdsTagName<T extends string> = `sds-${NonEmptyString<T>}`;
|
|
3
|
+
export declare function guardedCustomElement<Tag extends string>(tagName: SdsTagName<Tag>): ClassDecorator;
|
|
6
4
|
export {};
|
|
7
5
|
//# sourceMappingURL=guarded-custom-element.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"guarded-custom-element.d.ts","sourceRoot":"","sources":["../../src/utils/guarded-custom-element.ts"],"names":[],"mappings":"AAEA,KAAK,cAAc,
|
|
1
|
+
{"version":3,"file":"guarded-custom-element.d.ts","sourceRoot":"","sources":["../../src/utils/guarded-custom-element.ts"],"names":[],"mappings":"AAEA,KAAK,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI,EAAE,SAAS,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,IAAI,OAAO,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;AAEtE,wBAAgB,oBAAoB,CAAC,GAAG,SAAS,MAAM,EAAE,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC,GAAG,cAAc,CAMjG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"guarded-custom-element.js","sourceRoot":"","sources":["../../src/utils/guarded-custom-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAKtE,MAAM,UAAU,oBAAoB,
|
|
1
|
+
{"version":3,"file":"guarded-custom-element.js","sourceRoot":"","sources":["../../src/utils/guarded-custom-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAKtE,MAAM,UAAU,oBAAoB,CAAqB,OAAwB;IAChF,OAAO,CAAC,GAAG,EAAE,EAAE;QACd,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAClC,gBAAgB,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC;QAChC,CAAC;IACF,CAAC,CAAC;AACH,CAAC","sourcesContent":["import { customElement as litCustomElement } from 'lit/decorators.js';\n\ntype NonEmptyString<T extends string> = '' extends T ? never : T;\nexport type SdsTagName<T extends string> = `sds-${NonEmptyString<T>}`;\n\nexport function guardedCustomElement<Tag extends string>(tagName: SdsTagName<Tag>): ClassDecorator {\n\treturn (cls) => {\n\t\tif (!customElements.get(tagName)) {\n\t\t\tlitCustomElement(tagName)(cls);\n\t\t}\n\t};\n}\n"]}
|