npm - @zywave/zui-formfield - Versions diffs - 4.3.0-pre.0 → 4.3.0 - Mend

@zywave/zui-formfield 4.3.0-pre.0 → 4.3.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.

Files changed (14) hide show

package/CHANGELOG.md +9 -0
package/dist/custom-elements.json +19 -0
package/dist/zui-formfield-css.js +1 -1
package/dist/zui-formfield-css.js.map +1 -1
package/dist/zui-formfield.d.ts +5 -0
package/dist/zui-formfield.js +10 -1
package/dist/zui-formfield.js.map +1 -1
package/docs/demo.html +14 -0
package/lab.html +23 -4
package/package.json +4 -3
package/src/zui-formfield-css.js +1 -1
package/src/zui-formfield.scss +15 -1
package/src/zui-formfield.ts +9 -1
package/test/zui-formfield.test.ts +76 -0

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [4.3.0](https://gitlab.com/zywave/inner-source/booster/zui/compare/@zywave/zui-formfield@4.3.0-pre.1...@zywave/zui-formfield@4.3.0) (2026-03-04)
+### Bug Fixes
+* hide 'No results' essage during async select loading ([bc8e139](https://gitlab.com/zywave/inner-source/booster/zui/commit/bc8e139))
 ## [4.2.1](https://gitlab.com/zywave/inner-source/booster/zui/compare/@zywave/zui-formfield@4.2.1-pre.2...@zywave/zui-formfield@4.2.1) (2025-09-19)
 **Note:** Version bump only for package @zywave/zui-formfield

package/dist/custom-elements.json CHANGED Viewed

@@ -47,6 +47,16 @@
               "description": "(optional): Provide a valid CSS selector to help `zui-formfield` find the correct form control. Defaults to the first child element.",
               "attribute": "control-selector"
             },
+            {
+              "kind": "field",
+              "name": "tooltip",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "(optional): Tooltip text to display in a help icon next to the label.",
+              "attribute": "tooltip"
+            },
             {
               "kind": "field",
               "name": "_slotEl",
@@ -150,6 +160,15 @@
               "default": "'*'",
               "description": "(optional): Provide a valid CSS selector to help `zui-formfield` find the correct form control. Defaults to the first child element.",
               "fieldName": "controlSelector"
+            },
+            {
+              "name": "tooltip",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "(optional): Tooltip text to display in a help icon next to the label.",
+              "fieldName": "tooltip"
             }
           ],
           "superclass": {

package/dist/zui-formfield-css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css `:host .container label,:host .container ::slotted(label){display:inline-flex;margin:0;font-weight:600;color:var(--zui-gray-800)}:host{contain:none}:host .container{display:flex;flex-direction:column;margin-bottom:1.25rem}:host .container ::slotted(*:not(zui-toggle):not(zui-checkbox):not(zui-radio)){margin-top:.25rem !important}:host .container ::slotted(zui-toggle){margin:.9375rem 0}:host .validation-message:empty{display:none}:host .validation-message{color:var(--zui-red-500)}:host label.required::after{content:"*";margin-left:.5ch;color:var(--zui-red-500)}`;
+export const style = css `:host .container label,:host .container ::slotted(label){display:inline-flex;margin:0;font-weight:600;color:var(--zui-gray-800)}:host{contain:none}:host .container{display:flex;flex-direction:column;margin-bottom:1.25rem}:host .container label,:host .container ::slotted(label){width:100%;align-items:center;gap:1rem}:host .container label .label-text,:host .container ::slotted(label) .label-text{flex:0 1 auto}:host .container label zui-tooltip,:host .container ::slotted(label) zui-tooltip{flex:0 0 auto;margin-left:.5rem;line-height:1}:host .container ::slotted(*:not(zui-toggle):not(zui-checkbox):not(zui-radio)){margin-top:.25rem !important}:host .container ::slotted(zui-toggle){margin:.9375rem 0}:host .validation-message:empty{display:none}:host .validation-message{color:var(--zui-red-500)}:host label.required .label-text::after{content:"*";margin-left:.5ch;color:var(--zui-red-500)}`;
 //# sourceMappingURL=zui-formfield-css.js.map

package/dist/zui-formfield-css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"zui-formfield-css.js","sourceRoot":"","sources":["../src/zui-formfield-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,~~sjBAAsjB~~,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host .container label,:host .container ::slotted(label){display:inline-flex;margin:0;font-weight:600;color:var(--zui-gray-800)}:host{contain:none}:host .container{display:flex;flex-direction:column;margin-bottom:1.25rem}:host .container ::slotted(:not(zui-toggle):not(zui-checkbox):not(zui-radio)){margin-top:.25rem !important}:host .container ::slotted(zui-toggle){margin:.9375rem 0}:host .validation-message:empty{display:none}:host .validation-message{color:var(--zui-red-500)}:host label.required::after{content:\"\";margin-left:.5ch;color:var(--zui-red-500)}`;\n"]}
1	+ {"version":3,"file":"zui-formfield-css.js","sourceRoot":"","sources":["../src/zui-formfield-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,g4BAAg4B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host .container label,:host .container ::slotted(label){display:inline-flex;margin:0;font-weight:600;color:var(--zui-gray-800)}:host{contain:none}:host .container{display:flex;flex-direction:column;margin-bottom:1.25rem}:host .container label,:host .container ::slotted(label){width:100%;align-items:center;gap:1rem}:host .container label .label-text,:host .container ::slotted(label) .label-text{flex:0 1 auto}:host .container label zui-tooltip,:host .container ::slotted(label) zui-tooltip{flex:0 0 auto;margin-left:.5rem;line-height:1}:host .container ::slotted(:not(zui-toggle):not(zui-checkbox):not(zui-radio)){margin-top:.25rem !important}:host .container ::slotted(zui-toggle){margin:.9375rem 0}:host .validation-message:empty{display:none}:host .validation-message{color:var(--zui-red-500)}:host label.required .label-text::after{content:\"\";margin-left:.5ch;color:var(--zui-red-500)}`;\n"]}

package/dist/zui-formfield.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { ZuiBaseElement } from '@zywave/zui-base';
 import type { PropertyValues } from 'lit';
+import '@zywave/zui-tooltip';
 /**
  * `<zui-formfield>` provides a standardized way of labeling and styling form controls.
  *
@@ -18,6 +19,10 @@ export declare class ZuiFormField extends ZuiBaseElement {
      * (optional): Provide a valid CSS selector to help `zui-formfield` find the correct form control. Defaults to the first child element.
      */
     controlSelector: string;
+    /**
+     * (optional): Tooltip text to display in a help icon next to the label.
+     */
+    tooltip: string | null;
     _slotEl: HTMLSlotElement;
     static get styles(): (import("lit").CSSResult | import("lit").CSSResultArray)[];
     firstUpdated(changedProps: PropertyValues): Promise<void>;

package/dist/zui-formfield.js CHANGED Viewed

@@ -9,6 +9,7 @@ import { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-e
 import { html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { style } from './zui-formfield-css.js';
+import '@zywave/zui-tooltip';
 /**
  * `<zui-formfield>` provides a standardized way of labeling and styling form controls.
  *
@@ -28,6 +29,10 @@ export class ZuiFormField extends ZuiBaseElement {
          * (optional): Provide a valid CSS selector to help `zui-formfield` find the correct form control. Defaults to the first child element.
          */
         this.controlSelector = '*';
+        /**
+         * (optional): Tooltip text to display in a help icon next to the label.
+         */
+        this.tooltip = null;
         this.#isRequired = false;
     }
     #validationMessageField;
@@ -81,7 +86,8 @@ export class ZuiFormField extends ZuiBaseElement {
         ${this.label
             ? html `
               <label @click="${this.#onLabelClick}" part="label" class="${this.#isRequired ? 'required' : ''}">
-                ${this.label}
+                <span class="label-text">${this.label}</span>
+                ${this.tooltip ? html `<zui-tooltip position="right"> ${this.tooltip} </zui-tooltip>` : nothing}
               </label>
             `
             : nothing}
@@ -136,6 +142,9 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'control-selector' })
 ], ZuiFormField.prototype, "controlSelector", void 0);
+__decorate([
+    property({ type: String })
+], ZuiFormField.prototype, "tooltip", void 0);
 __decorate([
     query('slot')
 ], ZuiFormField.prototype, "_slotEl", void 0);

package/dist/zui-formfield.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"zui-formfield.js","sourceRoot":"","sources":["../src/zui-formfield.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAG/C;;;;;;;GAOG;AACH,MAAM,OAAO,YAAa,SAAQ,cAAc;IAAhD;;QACE;;WAEG;QAEH,UAAK,GAAkB,IAAI,CAAC;QAE5B;;WAEG;QAEH,oBAAe,GAAG,GAAG,CAAC;QAStB,gBAAW,GAAG,KAAK,CAAC;IAwHtB,CAAC;IA5HC,uBAAuB,CAA6B;IAEpD,qBAAqB,CAAsB;IAE3C,WAAW,CAAS;IAEpB,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,uBAAuB,CAAC;IACtC,CAAC;IAED,IAAI,kBAAkB,CAAC,GAA8B;QACnD,MAAM,QAAQ,GAAG,IAAI,CAAC,uBAAuB,CAAC;QAC9C,IAAI,QAAQ,KAAK,GAAG,EAAE,CAAC;YACrB,IAAI,CAAC,uBAAuB,GAAG,GAAG,EAAE,IAAI,EAAE,CAAC;YAC3C,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,mBAAmB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IACjE,CAAC;IAED,cAAc;QACZ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,IAAI,CAAC,WAAW,GAAG,OAAO,EAAE,YAAY,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC;QAE9D,IAAI,WAAW,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;YACrC,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,KAAK,CAAC,YAAY,CAAC,YAA4B;QAC7C,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAEjC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC;gBACjC,CAAC,CAAC,cAAc;qBACX,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;qBAChD,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,QAAiC,CAAC,CAAC;gBAClF,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,QAAiC,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,aAAa,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;YAC1C,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;QACzC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA;+BACe,IAAI,CAAC,aAAa,yBAAyB,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;kBAC1F,IAAI,CAAC,KAAK;;aAEf;YACH,CAAC,CAAC,OAAO;6BACU,IAAI,CAAC,aAAa;0CACL,IAAI,CAAC,kBAAkB,IAAI,EAAE;;KAElE,CAAC;IACJ,CAAC;IAED,aAAa;QACX,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;QACvB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;IACzB,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,QAAiC,CAAC,CAAC;QACpE,CAAC;IACH,CAAC;IAED,oBAAoB,CAAC,OAA8B;QACjD,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,CAAC,aAAa,KAAK,UAAU,EAAE,CAAC;YAC5D,OAAO;QACT,CAAC;QAED,OAAO,CAAC,gBAAgB,CACtB,SAAS,EACT,KAAK,EAAE,KAAK,EAAE,EAAE;YACd,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,MAAM,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC;QAChD,CAAC,EACD,EAAE,OAAO,EAAE,IAAI,EAAE,CAClB,CAAC;QAEF,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC,CAAC;QAC5F,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC,CAAC;QAC7F,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC,CAAC;QAC9F,OAAO,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE,CAAC,MAAM,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC,CAAC;QAE3G,sIAAsI;QACtI,iDAAiD;QACjD,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YACnC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;YAEjD,IAAI,CAAC,qBAAqB,GAAG,MAAM,CAAC,WAAW,CAAC,KAAK,IAAI,EAAE;gBACzD,IAAI,OAAO,CAAC,OAAO,CAAC,2BAA2B,CAAC,EAAE,CAAC;oBACjD,MAAM,IAAI,CAAC,yBAAyB,CAAC,OAAO,CAAC,CAAC;gBAChD,CAAC;YACH,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC;IACH,CAAC;IAED,KAAK,CAAC,yBAAyB,CAAC,OAA8B;QAC5D,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC;YAC3B,MAAM,OAAO,CAAC,cAAc,CAAC;QAC/B,CAAC;QACD,IAAI,CAAC,kBAAkB,GAAG,OAAO,CAAC,iBAAiB,CAAC;IACtD,CAAC;CACF;AAvIC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACC;AAM5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;qDACpC;AAGtB;IADC,KAAK,CAAC,MAAM,CAAC;6CACW;AAgI3B,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element.js';\nimport { html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { style } from './zui-formfield-css.js';\nimport type { PropertyValues } from 'lit';\n\n/*\n `<zui-formfield>` provides a standardized way of labeling and styling form controls.\n \n @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`\n \n @csspart container - The container for form fields inserted into `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(container)`.\n * @csspart label - The label for `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(label)`.\n /\nexport class ZuiFormField extends ZuiBaseElement {\n /\n (optional): Label text, for the form control. Alternatively can slot in label text instead. If necessary, can be styled with `::part(label)`.\n /\n @property({ type: String })\n label: string \| null = null;\n\n /\n (optional): Provide a valid CSS selector to help `zui-formfield` find the correct form control. Defaults to the first child element.\n /\n @property({ type: String, attribute: 'control-selector' })\n controlSelector = '';\n\n @query('slot')\n _slotEl: HTMLSlotElement;\n\n #validationMessageField?: string \| null \| undefined;\n\n #validationIntervalId?: number \| undefined;\n\n #isRequired = false;\n\n get #validationMessage() {\n return this.#validationMessageField;\n }\n\n set #validationMessage(msg: string \| null \| undefined) {\n const oldValue = this.#validationMessageField;\n if (oldValue !== msg) {\n this.#validationMessageField = msg?.trim();\n this.requestUpdate();\n }\n }\n\n get #control() {\n return findAssignedElement(this._slotEl, this.controlSelector);\n }\n\n #checkRequired() {\n const control = this.#control;\n const wasRequired = this.#isRequired;\n this.#isRequired = control?.hasAttribute('required') ?? false;\n\n if (wasRequired !== this.#isRequired) {\n this.requestUpdate();\n }\n }\n\n static get styles() {\n return [super.styles, style];\n }\n\n async firstUpdated(changedProps: PropertyValues) {\n super.firstUpdated(changedProps);\n\n if (this.#control) {\n this.#checkRequired();\n this.#control.tagName.includes('-')\n ? customElements\n .whenDefined(this.#control.tagName.toLowerCase())\n .then(() => this.#configureValidation(this.#control as ValidatableLitElement))\n : this.#configureValidation(this.#control as ValidatableLitElement);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this.#validationIntervalId) {\n clearInterval(this.#validationIntervalId);\n this.#validationIntervalId = undefined;\n }\n }\n\n render() {\n return html`\n <div class=\"container\" part=\"container\">\n ${this.label\n ? html`\n <label @click=\"${this.#onLabelClick}\" part=\"label\" class=\"${this.#isRequired ? 'required' : ''}\">\n ${this.label}\n </label>\n `\n : nothing}\n <slot @slotchange=\"${this.#onSlotChange}\"></slot>\n <div class=\"validation-message\">${this.#validationMessage ?? ''}</div>\n </div>\n `;\n }\n\n #onLabelClick() {\n this.#control?.focus();\n this.#control?.click();\n }\n\n #onSlotChange() {\n if (this.#control) {\n this.#checkRequired();\n this.#configureValidation(this.#control as ValidatableLitElement);\n }\n }\n\n #configureValidation(control: ValidatableLitElement) {\n if (!control \|\| typeof control.checkValidity !== 'function') {\n return;\n }\n\n control.addEventListener(\n 'invalid',\n async (event) => {\n event.preventDefault();\n await this.#extractValidationMessage(control);\n },\n { capture: true }\n );\n\n control.addEventListener('blur', async () => await this.#extractValidationMessage(control));\n control.addEventListener('input', async () => await this.#extractValidationMessage(control));\n control.addEventListener('change', async () => await this.#extractValidationMessage(control));\n control.addEventListener('validitystatechange', async () => await this.#extractValidationMessage(control));\n\n // workaround native elements not necessarily raising events for direct manipulation (i.e. input.value = 'foo' doesn't trigger events)\n // see https://github.com/whatwg/html/issues/9878\n if (!control.tagName.includes('-')) {\n window.clearInterval(this.#validationIntervalId);\n\n this.#validationIntervalId = window.setInterval(async () => {\n if (control.matches(':user-invalid,:user-valid')) {\n await this.#extractValidationMessage(control);\n }\n }, 100);\n }\n }\n\n async #extractValidationMessage(control: ValidatableLitElement) {\n if (control.updateComplete) {\n await control.updateComplete;\n }\n this.#validationMessage = control.validationMessage;\n }\n}\n\nwindow.customElements.define('zui-formfield', ZuiFormField);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-formfield': ZuiFormField;\n }\n}\n\ntype ValidatableLitElement = ValidatableHTMLElement & {\n updateComplete?: Promise<void>;\n};\n\ntype ValidatableHTMLElement = HTMLElement & {\n setCustomValidity(message: string): void;\n checkValidity(): boolean;\n reportValidity(): boolean;\n validationMessage: string;\n validity: ValidityState;\n};\n"]}
1	+ {"version":3,"file":"zui-formfield.js","sourceRoot":"","sources":["../src/zui-formfield.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport { findAssignedElement } from '@zywave/zui-base/dist/utils/find-assigned-element.js';\nimport { html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { style } from './zui-formfield-css.js';\nimport type { PropertyValues } from 'lit';\nimport '@zywave/zui-tooltip';\n\n/*\n `<zui-formfield>` provides a standardized way of labeling and styling form controls.\n \n @slot - Default, unnamed slot; for inserting form controls, such as `<select>`, `<input>`, `<zui-input>`, `<zui-select>`, etc., into `<zui-formfield>`\n \n @csspart container - The container for form fields inserted into `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(container)`.\n * @csspart label - The label for `zui-formfield`; this is exposed as a CSS shadow part and can be accessed with `::part(label)`.\n /\nexport class ZuiFormField extends ZuiBaseElement {\n /\n (optional): Label text, for the form control. Alternatively can slot in label text instead. If necessary, can be styled with `::part(label)`.\n /\n @property({ type: String })\n label: string \| null = null;\n\n /\n (optional): Provide a valid CSS selector to help `zui-formfield` find the correct form control. Defaults to the first child element.\n /\n @property({ type: String, attribute: 'control-selector' })\n controlSelector = '';\n\n /*\n (optional): Tooltip text to display in a help icon next to the label.\n */\n @property({ type: String })\n tooltip: string \| null = null;\n\n @query('slot')\n _slotEl: HTMLSlotElement;\n\n #validationMessageField?: string \| null \| undefined;\n\n #validationIntervalId?: number \| undefined;\n\n #isRequired = false;\n\n get #validationMessage() {\n return this.#validationMessageField;\n }\n\n set #validationMessage(msg: string \| null \| undefined) {\n const oldValue = this.#validationMessageField;\n if (oldValue !== msg) {\n this.#validationMessageField = msg?.trim();\n this.requestUpdate();\n }\n }\n\n get #control() {\n return findAssignedElement(this._slotEl, this.controlSelector);\n }\n\n #checkRequired() {\n const control = this.#control;\n const wasRequired = this.#isRequired;\n this.#isRequired = control?.hasAttribute('required') ?? false;\n\n if (wasRequired !== this.#isRequired) {\n this.requestUpdate();\n }\n }\n\n static get styles() {\n return [super.styles, style];\n }\n\n async firstUpdated(changedProps: PropertyValues) {\n super.firstUpdated(changedProps);\n\n if (this.#control) {\n this.#checkRequired();\n this.#control.tagName.includes('-')\n ? customElements\n .whenDefined(this.#control.tagName.toLowerCase())\n .then(() => this.#configureValidation(this.#control as ValidatableLitElement))\n : this.#configureValidation(this.#control as ValidatableLitElement);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this.#validationIntervalId) {\n clearInterval(this.#validationIntervalId);\n this.#validationIntervalId = undefined;\n }\n }\n\n render() {\n return html`\n <div class=\"container\" part=\"container\">\n ${this.label\n ? html`\n <label @click=\"${this.#onLabelClick}\" part=\"label\" class=\"${this.#isRequired ? 'required' : ''}\">\n <span class=\"label-text\">${this.label}</span>\n ${this.tooltip ? html`<zui-tooltip position=\"right\"> ${this.tooltip} </zui-tooltip>` : nothing}\n </label>\n `\n : nothing}\n <slot @slotchange=\"${this.#onSlotChange}\"></slot>\n <div class=\"validation-message\">${this.#validationMessage ?? ''}</div>\n </div>\n `;\n }\n\n #onLabelClick() {\n this.#control?.focus();\n this.#control?.click();\n }\n\n #onSlotChange() {\n if (this.#control) {\n this.#checkRequired();\n this.#configureValidation(this.#control as ValidatableLitElement);\n }\n }\n\n #configureValidation(control: ValidatableLitElement) {\n if (!control \|\| typeof control.checkValidity !== 'function') {\n return;\n }\n\n control.addEventListener(\n 'invalid',\n async (event) => {\n event.preventDefault();\n await this.#extractValidationMessage(control);\n },\n { capture: true }\n );\n\n control.addEventListener('blur', async () => await this.#extractValidationMessage(control));\n control.addEventListener('input', async () => await this.#extractValidationMessage(control));\n control.addEventListener('change', async () => await this.#extractValidationMessage(control));\n control.addEventListener('validitystatechange', async () => await this.#extractValidationMessage(control));\n\n // workaround native elements not necessarily raising events for direct manipulation (i.e. input.value = 'foo' doesn't trigger events)\n // see https://github.com/whatwg/html/issues/9878\n if (!control.tagName.includes('-')) {\n window.clearInterval(this.#validationIntervalId);\n\n this.#validationIntervalId = window.setInterval(async () => {\n if (control.matches(':user-invalid,:user-valid')) {\n await this.#extractValidationMessage(control);\n }\n }, 100);\n }\n }\n\n async #extractValidationMessage(control: ValidatableLitElement) {\n if (control.updateComplete) {\n await control.updateComplete;\n }\n this.#validationMessage = control.validationMessage;\n }\n}\n\nwindow.customElements.define('zui-formfield', ZuiFormField);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-formfield': ZuiFormField;\n }\n}\n\ntype ValidatableLitElement = ValidatableHTMLElement & {\n updateComplete?: Promise<void>;\n};\n\ntype ValidatableHTMLElement = HTMLElement & {\n setCustomValidity(message: string): void;\n checkValidity(): boolean;\n reportValidity(): boolean;\n validationMessage: string;\n validity: ValidityState;\n};\n"]}

package/docs/demo.html CHANGED Viewed

@@ -17,6 +17,20 @@
   </zui-formfield>
 </section>
+<section component="zui-formfield" heading="Formfield with tooltip - explaining technical term">
+  <zui-formfield label="API Key" tooltip="A unique identifier used to authenticate requests to external services">
+    <zui-input name="api-key"></zui-input>
+  </zui-formfield>
+</section>
+<section component="zui-formfield" heading="Tooltip explaining field purpose">
+  <zui-formfield
+    label="Cost center code"
+    tooltip="The accounting code your department uses for budget tracking and expense allocation">
+    <zui-input name="cost-center"></zui-input>
+  </zui-formfield>
+</section>
 <section component="zui-formfield" heading="Specify control selector">
   <zui-formfield class="zui-formfield-demo-control-selector" label="North America phone number" control-selector="zui-input[name=areaCode]">
     <zui-input name="countryCode" value="+1" class="xsmall"></zui-input>

package/lab.html CHANGED Viewed

@@ -69,9 +69,6 @@
         display: none;
       }
-      .part-demo::part(label) {
-        color: var(--zui-blue);
-      }
     </style>
   </head>
@@ -86,6 +83,12 @@
         <zui-card>
           <h2>Native form controls</h2>
           <form id="form-native-element">
+            <zui-formfield label="Native select with tooltip" tooltip="Select one of the available options">
+              <select name="Native-select">
+                <option>Native1</option>
+                <option>Native2</option>
+              </select>
+            </zui-formfield>
             <zui-formfield label="Native select">
               <select name="Native-select">
                 <option>Native1</option>
@@ -162,7 +165,11 @@
                 <zui-option value="test-5">Test5</zui-option>
               </zui-select>
             </zui-formfield>
-            <zui-formfield class="part-demo" label="ZUI input">
+            <zui-formfield
+              class="part-demo"
+              label="ZUI input with tooltip"
+              tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit auctor dui, at volutpat metus"
+            >
               <zui-input
                 name="zui-input"
                 required=""
@@ -170,6 +177,18 @@
                 validation-message-minlength="Please use at least 2 characters."
               ></zui-input>
             </zui-formfield>
+            <zui-formfield
+              label="NAICS Code"
+              tooltip="Enter a 2 to 6-digit NAICS code (e.g., '54' for Professional Services or '541511' for Programming).">
+              <zui-input
+                  type="text"
+                  inputmode="numeric"
+                  minlength="2"
+                  maxlength="6"
+                  regex="^[0-9]{2,6}$"
+                  placeholder="Enter 2-6 NAICS code">
+              </zui-input>
+            </zui-formfield>
             <zui-formfield label="ZUI date input">
               <zui-input name="zui-input-date" type="date"></zui-input>
             </zui-formfield>

package/package.json CHANGED Viewed

@@ -1,11 +1,12 @@
 {
   "name": "@zywave/zui-formfield",
-  "version": "4.3.0-pre.0",
+  "version": "4.3.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "UNLICENSED",
   "dependencies": {
-    "@zywave/zui-base": "^4.6.1-pre.0"
+    "@zywave/zui-base": "^4.6.1",
+    "@zywave/zui-tooltip": "^4.3.3"
   },
   "scripts": {
     "build": "npm run build:scss && npm run build:ts",
@@ -24,5 +25,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "cdf7b9622b4f662734912310f3582350ab1afd75"
+  "gitHead": "6ccacba5d09f8f9b2548272f06482a8c392af6c9"
 }

package/src/zui-formfield-css.js CHANGED Viewed

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const style = css`:host .container label,:host .container ::slotted(label){display:inline-flex;margin:0;font-weight:600;color:var(--zui-gray-800)}:host{contain:none}:host .container{display:flex;flex-direction:column;margin-bottom:1.25rem}:host .container ::slotted(*:not(zui-toggle):not(zui-checkbox):not(zui-radio)){margin-top:.25rem !important}:host .container ::slotted(zui-toggle){margin:.9375rem 0}:host .validation-message:empty{display:none}:host .validation-message{color:var(--zui-red-500)}:host label.required::after{content:"*";margin-left:.5ch;color:var(--zui-red-500)}`;
+export const style = css`:host .container label,:host .container ::slotted(label){display:inline-flex;margin:0;font-weight:600;color:var(--zui-gray-800)}:host{contain:none}:host .container{display:flex;flex-direction:column;margin-bottom:1.25rem}:host .container label,:host .container ::slotted(label){width:100%;align-items:center;gap:1rem}:host .container label .label-text,:host .container ::slotted(label) .label-text{flex:0 1 auto}:host .container label zui-tooltip,:host .container ::slotted(label) zui-tooltip{flex:0 0 auto;margin-left:.5rem;line-height:1}:host .container ::slotted(*:not(zui-toggle):not(zui-checkbox):not(zui-radio)){margin-top:.25rem !important}:host .container ::slotted(zui-toggle){margin:.9375rem 0}:host .validation-message:empty{display:none}:host .validation-message{color:var(--zui-red-500)}:host label.required .label-text::after{content:"*";margin-left:.5ch;color:var(--zui-red-500)}`;

package/src/zui-formfield.scss CHANGED Viewed

@@ -11,6 +11,20 @@
     label,
     ::slotted(label) {
       @extend %label;
+      width: 100%;
+      align-items: center;
+      gap: 1rem;
+      .label-text {
+        flex: 0 1 auto;
+      }
+      zui-tooltip {
+        flex: 0 0 auto;
+        margin-left: rem(8);
+        line-height: 1;
+      }
     }
     ::slotted(*:not(zui-toggle):not(zui-checkbox):not(zui-radio)) {
@@ -30,7 +44,7 @@
     color: var(--zui-red-500);
   }
-  label.required::after {
+  label.required .label-text::after {
     content: '*';
     margin-left: 0.5ch;
     color: var(--zui-red-500);

package/src/zui-formfield.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import { html, nothing } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { style } from './zui-formfield-css.js';
 import type { PropertyValues } from 'lit';
+import '@zywave/zui-tooltip';
 /**
  * `<zui-formfield>` provides a standardized way of labeling and styling form controls.
@@ -26,6 +27,12 @@ export class ZuiFormField extends ZuiBaseElement {
   @property({ type: String, attribute: 'control-selector' })
   controlSelector = '*';
+  /**
+   * (optional): Tooltip text to display in a help icon next to the label.
+   */
+  @property({ type: String })
+  tooltip: string | null = null;
   @query('slot')
   _slotEl: HTMLSlotElement;
@@ -93,7 +100,8 @@ export class ZuiFormField extends ZuiBaseElement {
         ${this.label
           ? html`
               <label @click="${this.#onLabelClick}" part="label" class="${this.#isRequired ? 'required' : ''}">
-                ${this.label}
+                <span class="label-text">${this.label}</span>
+                ${this.tooltip ? html`<zui-tooltip position="right"> ${this.tooltip} </zui-tooltip>` : nothing}
               </label>
             `
           : nothing}

package/test/zui-formfield.test.ts CHANGED Viewed

@@ -226,4 +226,80 @@ suite('zui-formfield', () => {
       );
     });
   });
+  suite('tooltip functionality', () => {
+    test('renders zui-tooltip when tooltip attribute is provided', async () => {
+      const tooltipText = 'This is help text';
+      formField.tooltip = tooltipText;
+      await formField.updateComplete;
+      const tooltip = formField.shadowRoot.querySelector('zui-tooltip') as HTMLElement;
+      assert.exists(tooltip, 'zui-tooltip should exist');
+      assert.equal(tooltip.textContent.trim(), tooltipText);
+    });
+    test('does not render zui-tooltip when tooltip attribute is not provided', async () => {
+      await formField.updateComplete;
+      const tooltip = formField.shadowRoot.querySelector('zui-tooltip');
+      assert.notExists(tooltip, 'zui-tooltip should not exist');
+    });
+    test('tooltip position is set to right', async () => {
+      formField.tooltip = 'Help text';
+      await formField.updateComplete;
+      const tooltip = formField.shadowRoot.querySelector('zui-tooltip') as HTMLElement;
+      assert.equal(tooltip.getAttribute('position'), 'right');
+    });
+    test('does not render tooltip when label is not provided', async () => {
+      const formFieldNoLabel = document.createElement('zui-formfield') as ZuiFormField;
+      formFieldNoLabel.tooltip = 'Help text';
+      const inputNoLabel = document.createElement('input');
+      formFieldNoLabel.appendChild(inputNoLabel);
+      document.body.appendChild(formFieldNoLabel);
+      await formFieldNoLabel.updateComplete;
+      const tooltip = formFieldNoLabel.shadowRoot.querySelector('zui-tooltip');
+      assert.notExists(tooltip, 'tooltip should not render without a label');
+      formFieldNoLabel.remove();
+      inputNoLabel.remove();
+    });
+    test('tooltip updates when tooltip property changes', async () => {
+      const initialText = 'Initial help text';
+      const updatedText = 'Updated help text';
+      formField.tooltip = initialText;
+      await formField.updateComplete;
+      let tooltip = formField.shadowRoot.querySelector('zui-tooltip') as HTMLElement;
+      assert.equal(tooltip.textContent.trim(), initialText);
+      formField.tooltip = updatedText;
+      await formField.updateComplete;
+      tooltip = formField.shadowRoot.querySelector('zui-tooltip') as HTMLElement;
+      assert.equal(tooltip.textContent.trim(), updatedText);
+    });
+    test('tooltip is removed when tooltip property is set to null', async () => {
+      formField.tooltip = 'Help text';
+      await formField.updateComplete;
+      let tooltip = formField.shadowRoot.querySelector('zui-tooltip');
+      assert.exists(tooltip, 'tooltip should exist initially');
+      formField.tooltip = null;
+      await formField.updateComplete;
+      tooltip = formField.shadowRoot.querySelector('zui-tooltip');
+      assert.notExists(tooltip, 'tooltip should not exist after being set to null');
+    });
+  });
 });