@nysds/nys-label 1.13.0 → 1.14.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/index.d.ts +1 -0
- package/dist/nys-label.d.ts +35 -0
- package/dist/nys-label.js +56 -39
- package/dist/nys-label.js.map +1 -1
- package/package.json +4 -4
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./nys-label";
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* **Internal component.** Renders form labels with description, required/optional flag, and tooltip.
|
|
4
|
+
*
|
|
5
|
+
* Used internally by form components (textinput, select, checkbox, etc.). Not intended for direct use.
|
|
6
|
+
* Handles label association via `for`, displays asterisk for required fields, and integrates tooltips.
|
|
7
|
+
*
|
|
8
|
+
* @summary Internal label component for form fields with flag and tooltip support.
|
|
9
|
+
* @element nys-label
|
|
10
|
+
*
|
|
11
|
+
* @slot description - Custom HTML description content below the label.
|
|
12
|
+
*/
|
|
13
|
+
export declare class NysLabel extends LitElement {
|
|
14
|
+
static styles: import("lit").CSSResult;
|
|
15
|
+
/** ID of the form element this label is associated with. */
|
|
16
|
+
for: string;
|
|
17
|
+
/** Label text displayed above the form field. */
|
|
18
|
+
label: string;
|
|
19
|
+
/** Helper text displayed below the label. */
|
|
20
|
+
description: string;
|
|
21
|
+
/** Flag type: `required` shows asterisk, `optional` shows "(Optional)". */
|
|
22
|
+
flag: string;
|
|
23
|
+
/** Adjusts colors for dark backgrounds. */
|
|
24
|
+
inverted: boolean;
|
|
25
|
+
/** Tooltip text shown on hover/focus of info icon next to label. */
|
|
26
|
+
get tooltip(): string;
|
|
27
|
+
set tooltip(value: string);
|
|
28
|
+
private _tooltip;
|
|
29
|
+
/**
|
|
30
|
+
* Event Handlers
|
|
31
|
+
* --------------------------------------------------------------------------
|
|
32
|
+
*/
|
|
33
|
+
private _handleLabelClick;
|
|
34
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
35
|
+
}
|
package/dist/nys-label.js
CHANGED
|
@@ -1,31 +1,44 @@
|
|
|
1
|
-
import { LitElement as c, unsafeCSS as _, html as
|
|
2
|
-
import { property as
|
|
3
|
-
const
|
|
4
|
-
var v = Object.defineProperty,
|
|
5
|
-
for (var
|
|
6
|
-
(
|
|
7
|
-
return
|
|
1
|
+
import { LitElement as c, unsafeCSS as _, html as r } from "lit";
|
|
2
|
+
import { property as i } from "lit/decorators.js";
|
|
3
|
+
const h = ':host{--_nys-label-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-label-font-weight: var(--nys-font-weight-semibold, 600);--_nys-label-font-size: var(--nys-font-size-ui-md, 16px);--_nys-label-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-label-letter-spacing: var(--nys-font-letterspacing-ui-md, .044px);--_nys-label-color: var(--nys-color-text, #1b1b1b);--_nys-label-cursor: normal;--_nys-description-font-weight: var(--nys-font-weight-regular, 400);--_nys-description-font-style: normal;--_nys-description-font-color: var(--nys-color-text-weak, #4a4d4f);--_nys-required-font-color: var(--nys-color-danger, #b52c2c);--_nys-optional-font-weight: var(--nys-font-weight-regular, 400);--_nys-optional-font-color: var(--nys-color-text-weak, #4a4d4f);--_nys-label-gap: var(--nys-space-4px, 4px)}p{margin:0}.nys-label{display:flex;flex-direction:column;align-items:flex-start;font-family:var(--_nys-label-font-family);font-size:var(--_nys-label-font-size);line-height:var(--_nys-label-line-height);letter-spacing:var(--_nys-label-letter-spacing)}.nys-label *{cursor:var(--_nys-label-cursor)}.nys-label__label{display:flex;gap:var(--_nys-label-gap);text-align:left;font-weight:var(--_nys-label-font-weight);color:var(--_nys-label-color)}.nys-label__description{text-align:left;font-weight:var(--_nys-description-font-weight);font-style:var(--_nys-description-font-style);color:var(--_nys-description-font-color)}.nys-label__required{display:contents;font-weight:var(--_nys-label-font-weight);color:var(--_nys-required-font-color)}.nys-label__optional{display:contents;font-weight:var(--_nys-optional-font-weight);color:var(--_nys-optional-font-color)}.nys-label__tooltip-wrapper{display:flex;gap:2px;align-items:center}.nys-label.invert .nys-label__label,.nys-label.invert .nys-label__description,.nys-label.invert .nys-label__optional{color:var(--nys-color-text-reverse, #ffffff)}.nys-label.invert .nys-label__tooltip-icon{color:var(--nys-color-ink-reverse, #ffffff)}';
|
|
4
|
+
var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (y, e, o, t) => {
|
|
5
|
+
for (var n = t > 1 ? void 0 : t ? b(e, o) : e, a = y.length - 1, p; a >= 0; a--)
|
|
6
|
+
(p = y[a]) && (n = (t ? p(e, o, n) : p(n)) || n);
|
|
7
|
+
return t && n && v(e, o, n), n;
|
|
8
8
|
};
|
|
9
|
-
const
|
|
9
|
+
const f = class f extends c {
|
|
10
10
|
constructor() {
|
|
11
11
|
super(...arguments), this.for = "", this.label = "", this.description = "", this.flag = "", this.inverted = !1, this._tooltip = "";
|
|
12
12
|
}
|
|
13
13
|
get tooltip() {
|
|
14
14
|
return this._tooltip;
|
|
15
15
|
}
|
|
16
|
-
set tooltip(
|
|
17
|
-
this._tooltip =
|
|
16
|
+
set tooltip(e) {
|
|
17
|
+
this._tooltip = e;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Event Handlers
|
|
21
|
+
* --------------------------------------------------------------------------
|
|
22
|
+
*/
|
|
23
|
+
_handleLabelClick(e) {
|
|
24
|
+
if (!this.for) return;
|
|
25
|
+
const o = this.getRootNode().host;
|
|
26
|
+
let t = null;
|
|
27
|
+
o && o.shadowRoot && (t = o.shadowRoot.querySelector(`#${this.for}`)), t && (t instanceof HTMLInputElement ? (e.preventDefault(), e.stopPropagation(), t.type === "file" ? t.click() : t.type === "checkbox" || t.type === "radio" ? (t.focus(), t.click()) : t.focus()) : t.focus());
|
|
18
28
|
}
|
|
19
29
|
render() {
|
|
20
|
-
return
|
|
30
|
+
return r`
|
|
21
31
|
<div class="nys-label ${this.inverted ? "invert" : ""}">
|
|
22
32
|
<div class="nys-label__tooltip-wrapper">
|
|
23
|
-
<label
|
|
33
|
+
<label
|
|
34
|
+
for=${this.for}
|
|
35
|
+
class="nys-label__label"
|
|
36
|
+
@click=${this._handleLabelClick}
|
|
24
37
|
>${this.label}
|
|
25
|
-
${this.flag === "required" ?
|
|
26
|
-
${this.flag === "optional" ?
|
|
38
|
+
${this.flag === "required" ? r`<div class="nys-label__required">*</div>` : ""}
|
|
39
|
+
${this.flag === "optional" ? r`<div class="nys-label__optional">(Optional)</div>` : ""}</label
|
|
27
40
|
>
|
|
28
|
-
${this._tooltip ?
|
|
41
|
+
${this._tooltip ? r`<nys-tooltip
|
|
29
42
|
text="${this._tooltip}"
|
|
30
43
|
position="top"
|
|
31
44
|
focusable
|
|
@@ -39,35 +52,39 @@ const p = class p extends c {
|
|
|
39
52
|
size="3xl"
|
|
40
53
|
></nys-icon> ` : ""}
|
|
41
54
|
</div>
|
|
42
|
-
<
|
|
55
|
+
<p
|
|
56
|
+
for=${this.for}
|
|
57
|
+
class="nys-label__description"
|
|
58
|
+
@click=${this._handleLabelClick}
|
|
59
|
+
>
|
|
43
60
|
<slot name="description">${this.description}</slot>
|
|
44
|
-
</
|
|
61
|
+
</p>
|
|
45
62
|
</div>
|
|
46
63
|
`;
|
|
47
64
|
}
|
|
48
65
|
};
|
|
49
|
-
|
|
50
|
-
let
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
],
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
],
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
],
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
],
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
],
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
],
|
|
69
|
-
customElements.get("nys-label") || customElements.define("nys-label",
|
|
66
|
+
f.styles = _(h);
|
|
67
|
+
let l = f;
|
|
68
|
+
s([
|
|
69
|
+
i({ type: String })
|
|
70
|
+
], l.prototype, "for", 2);
|
|
71
|
+
s([
|
|
72
|
+
i({ type: String })
|
|
73
|
+
], l.prototype, "label", 2);
|
|
74
|
+
s([
|
|
75
|
+
i({ type: String })
|
|
76
|
+
], l.prototype, "description", 2);
|
|
77
|
+
s([
|
|
78
|
+
i({ type: String })
|
|
79
|
+
], l.prototype, "flag", 2);
|
|
80
|
+
s([
|
|
81
|
+
i({ type: Boolean, reflect: !0 })
|
|
82
|
+
], l.prototype, "inverted", 2);
|
|
83
|
+
s([
|
|
84
|
+
i({ type: String })
|
|
85
|
+
], l.prototype, "tooltip", 1);
|
|
86
|
+
customElements.get("nys-label") || customElements.define("nys-label", l);
|
|
70
87
|
export {
|
|
71
|
-
|
|
88
|
+
l as NysLabel
|
|
72
89
|
};
|
|
73
90
|
//# sourceMappingURL=nys-label.js.map
|
package/dist/nys-label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nys-label.js","sources":["../src/nys-label.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-label.scss?inline\";\n\n/**\n *
|
|
1
|
+
{"version":3,"file":"nys-label.js","sources":["../src/nys-label.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-label.scss?inline\";\n\n/**\n * **Internal component.** Renders form labels with description, required/optional flag, and tooltip.\n *\n * Used internally by form components (textinput, select, checkbox, etc.). Not intended for direct use.\n * Handles label association via `for`, displays asterisk for required fields, and integrates tooltips.\n *\n * @summary Internal label component for form fields with flag and tooltip support.\n * @element nys-label\n *\n * @slot description - Custom HTML description content below the label.\n */\nexport class NysLabel extends LitElement {\n static styles = unsafeCSS(styles);\n\n /** ID of the form element this label is associated with. */\n @property({ type: String }) for = \"\";\n\n /** Label text displayed above the form field. */\n @property({ type: String }) label = \"\";\n\n /** Helper text displayed below the label. */\n @property({ type: String }) description = \"\";\n\n /** Flag type: `required` shows asterisk, `optional` shows \"(Optional)\". */\n @property({ type: String }) flag = \"\";\n\n /** Adjusts colors for dark backgrounds. */\n @property({ type: Boolean, reflect: true }) inverted = false;\n /** Tooltip text shown on hover/focus of info icon next to label. */\n @property({ type: String })\n get tooltip() {\n return this._tooltip;\n }\n set tooltip(value: string) {\n this._tooltip = value;\n }\n private _tooltip: string = \"\";\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n private _handleLabelClick(event: Event) {\n if (!this.for) return;\n\n const parentShadowDOM = (this.getRootNode() as ShadowRoot).host;\n let target: HTMLElement | null = null;\n\n if (parentShadowDOM && parentShadowDOM.shadowRoot) {\n target = parentShadowDOM.shadowRoot.querySelector(`#${this.for}`);\n }\n\n if (!target) return;\n\n if (target instanceof HTMLInputElement) {\n event.preventDefault();\n event.stopPropagation();\n if (target.type === \"file\") {\n target.click();\n } else if (target.type === \"checkbox\" || target.type === \"radio\") {\n target.focus();\n target.click();\n } else {\n // For other inputs (text, date, number, email, etc.), just focus\n target.focus();\n }\n } else {\n (target as HTMLElement).focus();\n }\n }\n\n render() {\n return html`\n <div class=\"nys-label ${this.inverted ? \"invert\" : \"\"}\">\n <div class=\"nys-label__tooltip-wrapper\">\n <label\n for=${this.for}\n class=\"nys-label__label\"\n @click=${this._handleLabelClick}\n >${this.label}\n ${this.flag === \"required\"\n ? html`<div class=\"nys-label__required\">*</div>`\n : \"\"}\n ${this.flag === \"optional\"\n ? html`<div class=\"nys-label__optional\">(Optional)</div>`\n : \"\"}</label\n >\n ${this._tooltip\n ? html`<nys-tooltip\n text=\"${this._tooltip}\"\n position=\"top\"\n focusable\n ?inverted=${this.inverted}\n for=\"tooltip-icon-${this.for}\"\n >\n </nys-tooltip>\n <nys-icon\n id=\"tooltip-icon-${this.for}\"\n name=\"info\"\n size=\"3xl\"\n ></nys-icon> `\n : \"\"}\n </div>\n <p\n for=${this.for}\n class=\"nys-label__description\"\n @click=${this._handleLabelClick}\n >\n <slot name=\"description\">${this.description}</slot>\n </p>\n </div>\n `;\n }\n}\n\nif (!customElements.get(\"nys-label\")) {\n customElements.define(\"nys-label\", NysLabel);\n}\n"],"names":["_NysLabel","LitElement","value","event","parentShadowDOM","target","html","unsafeCSS","styles","NysLabel","__decorateClass","property"],"mappings":";;;;;;;;AAgBO,MAAMA,IAAN,MAAMA,UAAiBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIuB,KAAA,MAAM,IAGN,KAAA,QAAQ,IAGR,KAAA,cAAc,IAGd,KAAA,OAAO,IAGS,KAAA,WAAW,IASvD,KAAQ,WAAmB;AAAA,EAAA;AAAA,EAN3B,IAAI,UAAU;AACZ,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,QAAQC,GAAe;AACzB,SAAK,WAAWA;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,kBAAkBC,GAAc;AACtC,QAAI,CAAC,KAAK,IAAK;AAEf,UAAMC,IAAmB,KAAK,YAAA,EAA6B;AAC3D,QAAIC,IAA6B;AAMjC,IAJID,KAAmBA,EAAgB,eACrCC,IAASD,EAAgB,WAAW,cAAc,IAAI,KAAK,GAAG,EAAE,IAG7DC,MAEDA,aAAkB,oBACpBF,EAAM,eAAA,GACNA,EAAM,gBAAA,GACFE,EAAO,SAAS,SAClBA,EAAO,MAAA,IACEA,EAAO,SAAS,cAAcA,EAAO,SAAS,WACvDA,EAAO,MAAA,GACPA,EAAO,MAAA,KAGPA,EAAO,MAAA,KAGRA,EAAuB,MAAA;AAAA,EAE5B;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA,8BACmB,KAAK,WAAW,WAAW,EAAE;AAAA;AAAA;AAAA,kBAGzC,KAAK,GAAG;AAAA;AAAA,qBAEL,KAAK,iBAAiB;AAAA,eAC5B,KAAK,KAAK;AAAA,cACX,KAAK,SAAS,aACZA,8CACA,EAAE;AAAA,cACJ,KAAK,SAAS,aACZA,uDACA,EAAE;AAAA;AAAA,YAEN,KAAK,WACHA;AAAA,0BACY,KAAK,QAAQ;AAAA;AAAA;AAAA,8BAGT,KAAK,QAAQ;AAAA,sCACL,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA,qCAIT,KAAK,GAAG;AAAA;AAAA;AAAA,iCAI/B,EAAE;AAAA;AAAA;AAAA,gBAGA,KAAK,GAAG;AAAA;AAAA,mBAEL,KAAK,iBAAiB;AAAA;AAAA,qCAEJ,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,EAInD;AACF;AArGEN,EAAO,SAASO,EAAUC,CAAM;AAD3B,IAAMC,IAANT;AAIuBU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfF,EAIiB,WAAA,OAAA,CAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPfF,EAOiB,WAAA,SAAA,CAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVfF,EAUiB,WAAA,eAAA,CAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAbfF,EAaiB,WAAA,QAAA,CAAA;AAGgBC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhB/BF,EAgBiC,WAAA,YAAA,CAAA;AAGxCC,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlBfF,EAmBP,WAAA,WAAA,CAAA;AAqFD,eAAe,IAAI,WAAW,KACjC,eAAe,OAAO,aAAaA,CAAQ;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-label",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"description": "The Label component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-label.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -23,13 +23,13 @@
|
|
|
23
23
|
"lit-analyze": "lit-analyzer '**/*.ts'"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@nysds/nys-icon": "^1.
|
|
27
|
-
"@nysds/nys-tooltip": "^1.
|
|
26
|
+
"@nysds/nys-icon": "^1.14.0",
|
|
27
|
+
"@nysds/nys-tooltip": "^1.14.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"lit": "^3.3.1",
|
|
31
31
|
"typescript": "^5.9.3",
|
|
32
|
-
"vite": "^7.1
|
|
32
|
+
"vite": "^7.3.1"
|
|
33
33
|
},
|
|
34
34
|
"keywords": [
|
|
35
35
|
"new-york-state",
|