New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@zywave/zui-base
Advanced tools
@zywave/zui-base - npm Package Compare versions
Comparing version 4.3.0 to 4.4.0-pre.0
@@ -43,18 +43,11 @@ { | ||
| "kind": "field", | ||
| "name": "_formControlSelector", | ||
| "name": "shadowRootOptions", | ||
| "type": { | ||
| "text": "string" | ||
| "text": "ShadowRootInit" | ||
| }, | ||
| "privacy": "protected", | ||
| "description": "Provides the \"form control\" query. Any valid querySelector expression is allowed.\nExample:\nget _formControlSelector() {\n return \\'input\\';\n}", | ||
| "readonly": true | ||
| "static": true, | ||
| "default": "{ ...ZuiBaseElement.shadowRootOptions, delegatesFocus: true }" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "_focusControlSelector", | ||
| "privacy": "protected", | ||
| "readonly": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "formAssociated", | ||
@@ -149,29 +142,2 @@ "privacy": "protected", | ||
| "kind": "field", | ||
| "name": "_formControl", | ||
| "type": { | ||
| "text": "HTMLElement | HTMLInputElement | null | undefined" | ||
| }, | ||
| "privacy": "protected", | ||
| "default": "null" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "_focusControl", | ||
| "type": { | ||
| "text": "HTMLElement | HTMLInputElement | null | undefined" | ||
| }, | ||
| "privacy": "protected", | ||
| "default": "null" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "_submitOnEnter", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "protected", | ||
| "default": "true" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "#internals", | ||
@@ -185,21 +151,2 @@ "privacy": "private", | ||
| "kind": "field", | ||
| "name": "_deferFocus", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "protected", | ||
| "default": "false", | ||
| "description": "TODO(pat): Temporary hack for zui-select-dropdown; focus should be refactored in that component" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "_deferClick", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "protected", | ||
| "default": "false" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "_formSubmitButton", | ||
@@ -232,10 +179,2 @@ "type": { | ||
| "kind": "method", | ||
| "name": "click" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "focus" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "checkValidity" | ||
@@ -242,0 +181,0 @@ }, |
@@ -16,12 +16,4 @@ import { ZuiBaseElement } from './zui-base.js'; | ||
| #private; | ||
| static shadowRootOptions: ShadowRootInit; | ||
| /** | ||
| * Provides the "form control" query. Any valid querySelector expression is allowed. | ||
| * Example: | ||
| * get _formControlSelector() { | ||
| * return \'input\'; | ||
| * } | ||
| */ | ||
| protected get _formControlSelector(): string; | ||
| protected get _focusControlSelector(): string; | ||
| /** | ||
| * Tells the browser that this is a form-associated custom element: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | ||
@@ -60,10 +52,2 @@ */ | ||
| get validationMessage(): string; | ||
| protected _formControl?: HTMLElement | HTMLInputElement | null; | ||
| protected _focusControl?: HTMLElement | HTMLInputElement | null; | ||
| protected _submitOnEnter: boolean; | ||
| /** | ||
| * TODO(pat): Temporary hack for zui-select-dropdown; focus should be refactored in that component | ||
| */ | ||
| protected _deferFocus: boolean; | ||
| protected _deferClick: boolean; | ||
| protected get _formSubmitButton(): HTMLButtonElement | HTMLInputElement | null; | ||
@@ -74,4 +58,2 @@ constructor(); | ||
| protected formResetCallback(): void; | ||
| click(): void; | ||
| focus(): void; | ||
| checkValidity(): boolean; | ||
@@ -78,0 +60,0 @@ reportValidity(): boolean; |
@@ -42,16 +42,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { | ||
| export class ZuiFormAssociatedElement extends ZuiBaseElement { | ||
| static { this.shadowRootOptions = { ...ZuiBaseElement.shadowRootOptions, delegatesFocus: true }; } | ||
| /** | ||
| * Provides the "form control" query. Any valid querySelector expression is allowed. | ||
| * Example: | ||
| * get _formControlSelector() { | ||
| * return \'input\'; | ||
| * } | ||
| */ | ||
| get _formControlSelector() { | ||
| throw new Error('You must implement a getter for "form control" query in the `_formControlSelector` property.'); | ||
| } | ||
| get _focusControlSelector() { | ||
| return this._formControlSelector; | ||
| } | ||
| /** | ||
| * Tells the browser that this is a form-associated custom element: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | ||
@@ -138,10 +126,2 @@ */ | ||
| this.#priorValidationMessage = ''; | ||
| this._formControl = null; | ||
| this._focusControl = null; | ||
| this._submitOnEnter = true; | ||
| /** | ||
| * TODO(pat): Temporary hack for zui-select-dropdown; focus should be refactored in that component | ||
| */ | ||
| this._deferFocus = false; | ||
| this._deferClick = false; | ||
| this.#internals = this.attachInternals?.(); | ||
@@ -151,12 +131,2 @@ } | ||
| super.firstUpdated(changedProps); | ||
| this._formControl = this.shadowRoot?.querySelector(this._formControlSelector); | ||
| this._focusControl = | ||
| this._formControlSelector === this._focusControlSelector | ||
| ? this._formControl | ||
| : this.shadowRoot?.querySelector(this._focusControlSelector); | ||
| this.addEventListener('click', () => { | ||
| if (!this.disabled && !this._deferClick) { | ||
| this.focus(); | ||
| } | ||
| }); | ||
| // once the form control has received and lost focus, we can consider the user to have interacted with the control | ||
@@ -179,12 +149,2 @@ // this is necessary to workaround the lack of :user-invalid support in ElementInternals | ||
| } | ||
| click() { | ||
| if (!this._deferClick) { | ||
| this._focusControl?.click(); | ||
| } | ||
| } | ||
| focus() { | ||
| if (!this._deferFocus) { | ||
| this._focusControl?.focus(); | ||
| } | ||
| } | ||
| checkValidity() { | ||
@@ -207,6 +167,6 @@ return this.#internals?.checkValidity() ?? true; | ||
| } | ||
| this.#internals?.setValidity({ ...cloneValidityState(this.validity), customError: true }, message, this._focusControl); | ||
| this.#internals?.setValidity({ ...cloneValidityState(this.validity), customError: true }, message); | ||
| } | ||
| else if (this.#priorValidationMessage) { | ||
| this.#internals?.setValidity({ ...cloneValidityState(this.validity), customError: false }, this.#priorValidationMessage, this._focusControl); | ||
| this.#internals?.setValidity({ ...cloneValidityState(this.validity), customError: false }, this.#priorValidationMessage); | ||
| } | ||
@@ -233,5 +193,3 @@ else { | ||
| _setValidity(validity, message) { | ||
| message | ||
| ? this.#internals?.setValidity?.(validity, message, this._focusControl) | ||
| : this.#internals?.setValidity?.({}); | ||
| message ? this.#internals?.setValidity?.(validity, message) : this.#internals?.setValidity?.({}); | ||
| } | ||
@@ -238,0 +196,0 @@ _mapValidationMessage(message, validityState, validationMessageMap) { |
| { | ||
| "name": "@zywave/zui-base", | ||
| "version": "4.3.0", | ||
| "version": "4.4.0-pre.0", | ||
| "main": "dist/index.js", | ||
@@ -23,3 +23,3 @@ "module": "dist/index.js", | ||
| }, | ||
| "gitHead": "f2f4bf7f90de5b306d5df2225b178d4bb447f37c" | ||
| "gitHead": "af5c5593589b0d976d1c0d851116d8c3e95ae467" | ||
| } |
@@ -42,17 +42,4 @@ import { ZuiBaseElement } from './zui-base.js'; | ||
| export abstract class ZuiFormAssociatedElement extends ZuiBaseElement { | ||
| /** | ||
| * Provides the "form control" query. Any valid querySelector expression is allowed. | ||
| * Example: | ||
| * get _formControlSelector() { | ||
| * return \'input\'; | ||
| * } | ||
| */ | ||
| protected get _formControlSelector(): string { | ||
| throw new Error('You must implement a getter for "form control" query in the `_formControlSelector` property.'); | ||
| } | ||
| static shadowRootOptions: ShadowRootInit = { ...ZuiBaseElement.shadowRootOptions, delegatesFocus: true }; | ||
| protected get _focusControlSelector() { | ||
| return this._formControlSelector; | ||
| } | ||
| /** | ||
@@ -140,14 +127,4 @@ * Tells the browser that this is a form-associated custom element: https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example | ||
| protected _formControl?: HTMLElement | HTMLInputElement | null = null; | ||
| protected _focusControl?: HTMLElement | HTMLInputElement | null = null; | ||
| protected _submitOnEnter = true; | ||
| #internals?: ElementInternals; | ||
| /** | ||
| * TODO(pat): Temporary hack for zui-select-dropdown; focus should be refactored in that component | ||
| */ | ||
| protected _deferFocus = false; | ||
| protected _deferClick = false; | ||
| protected get _formSubmitButton(): HTMLButtonElement | HTMLInputElement | null { | ||
@@ -170,14 +147,2 @@ if (this.form) { | ||
| this._formControl = this.shadowRoot?.querySelector(this._formControlSelector); | ||
| this._focusControl = | ||
| this._formControlSelector === this._focusControlSelector | ||
| ? this._formControl | ||
| : this.shadowRoot?.querySelector(this._focusControlSelector); | ||
| this.addEventListener('click', () => { | ||
| if (!this.disabled && !this._deferClick) { | ||
| this.focus(); | ||
| } | ||
| }); | ||
| // once the form control has received and lost focus, we can consider the user to have interacted with the control | ||
@@ -204,14 +169,2 @@ // this is necessary to workaround the lack of :user-invalid support in ElementInternals | ||
| click() { | ||
| if (!this._deferClick) { | ||
| this._focusControl?.click(); | ||
| } | ||
| } | ||
| focus() { | ||
| if (!this._deferFocus) { | ||
| this._focusControl?.focus(); | ||
| } | ||
| } | ||
| checkValidity() { | ||
@@ -236,12 +189,7 @@ return this.#internals?.checkValidity() ?? true; | ||
| } | ||
| this.#internals?.setValidity( | ||
| { ...cloneValidityState(this.validity), customError: true }, | ||
| message, | ||
| this._focusControl | ||
| ); | ||
| this.#internals?.setValidity({ ...cloneValidityState(this.validity), customError: true }, message); | ||
| } else if (this.#priorValidationMessage) { | ||
| this.#internals?.setValidity( | ||
| { ...cloneValidityState(this.validity), customError: false }, | ||
| this.#priorValidationMessage, | ||
| this._focusControl | ||
| this.#priorValidationMessage | ||
| ); | ||
@@ -269,5 +217,3 @@ } else { | ||
| protected _setValidity(validity: ValidityStateFlags, message: string) { | ||
| message | ||
| ? this.#internals?.setValidity?.(validity, message, this._focusControl) | ||
| : this.#internals?.setValidity?.({}); | ||
| message ? this.#internals?.setValidity?.(validity, message) : this.#internals?.setValidity?.({}); | ||
| } | ||
@@ -274,0 +220,0 @@ |
@@ -59,24 +59,2 @@ // eslint-disable-next-line @typescript-eslint/triple-slash-reference | ||
| test('Not configuring _formControlSelector throws error', async () => { | ||
| const elementTagName = 'test-form-selector-error'; | ||
| customElements.define( | ||
| elementTagName, | ||
| class extends FACETestBase { | ||
| render() { | ||
| return html`<input />`; | ||
| } | ||
| } | ||
| ); | ||
| const element = createFACEElement(elementTagName); | ||
| form.append(element); | ||
| try { | ||
| await element.updateComplete; | ||
| assert.isFalse(true, 'Expected an error'); | ||
| } catch { | ||
| // left empty on purpose | ||
| } | ||
| }); | ||
| test('Not configuring formResetCallback throws error', async () => { | ||
@@ -110,6 +88,2 @@ const elementTagName = 'test-form-reset-callback-error'; | ||
| class extends FACETestBase { | ||
| get _formControlSelector() { | ||
| return 'input'; | ||
| } | ||
| render() { | ||
@@ -134,6 +108,2 @@ return html`<input />`; | ||
| class extends FACETestBase { | ||
| get _formControlSelector() { | ||
| return 'input'; | ||
| } | ||
| render() { | ||
@@ -157,6 +127,2 @@ return html`<input />`; | ||
| class extends FACETestBase { | ||
| get _formControlSelector() { | ||
| return 'input'; | ||
| } | ||
| render() { | ||
@@ -187,6 +153,2 @@ return html`<input />`; | ||
| class extends FACETestBase { | ||
| get _formControlSelector() { | ||
| return 'input'; | ||
| } | ||
| render() { | ||
@@ -223,6 +185,2 @@ return html`<input />`; | ||
| class extends FACETestBase { | ||
| get _formControlSelector() { | ||
| return 'input'; | ||
| } | ||
| render() { | ||
@@ -261,6 +219,2 @@ return html`<input />`; | ||
| class extends FACETestBase { | ||
| get _formControlSelector() { | ||
| return 'input'; | ||
| } | ||
| render() { | ||
@@ -295,6 +249,2 @@ return html`<input />`; | ||
| class extends FACETestBase { | ||
| get _formControlSelector() { | ||
| return 'input'; | ||
| } | ||
| render() { | ||
@@ -326,6 +276,2 @@ return html`<input />`; | ||
| class extends FACETestBase { | ||
| get _formControlSelector() { | ||
| return 'input'; | ||
| } | ||
| render() { | ||
@@ -360,6 +306,2 @@ return html`<input />`; | ||
| class extends FACETestBase { | ||
| get _formControlSelector() { | ||
| return 'input'; | ||
| } | ||
| render() { | ||
@@ -388,6 +330,2 @@ return html`<input />`; | ||
| class extends FACETestBase { | ||
| get _formControlSelector() { | ||
| return 'input'; | ||
| } | ||
| render() { | ||
@@ -422,6 +360,2 @@ return html`<input type="checkbox" />`; | ||
| class extends FACETestBase { | ||
| get _formControlSelector() { | ||
| return 'input'; | ||
| } | ||
| render() { | ||
@@ -465,6 +399,2 @@ return html`<input />`; | ||
| class extends FACETestBase { | ||
| get _formControlSelector() { | ||
| return 'input'; | ||
| } | ||
| firstUpdated(changedProps: PropertyValues<this>) { | ||
@@ -471,0 +401,0 @@ super.firstUpdated(changedProps); |
Sorry, the diff of this file is not supported yet
New alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-7.43%
113405
- Lines of code
- decreased by-11.23%
1762
- Number of low quality alerts
- increased by100%
2
No dependency changes