@nysds/nys-label 1.16.1 → 1.17.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/nys-label.d.ts +38 -0
- package/dist/nys-label.js +52 -58
- package/dist/nys-label.js.map +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,38 @@
|
|
|
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
|
+
/** The ID of the label. */
|
|
16
|
+
id: 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
|
+
tooltip: string;
|
|
27
|
+
connectedCallback(): void;
|
|
28
|
+
/**
|
|
29
|
+
* Event Handlers
|
|
30
|
+
* --------------------------------------------------------------------------
|
|
31
|
+
*/
|
|
32
|
+
/**
|
|
33
|
+
* While most components don't need to listen for this event.
|
|
34
|
+
* Special components like "nys-fileinput" and "nys-toggle" need to listen for label to execute their specific functionalities.
|
|
35
|
+
*/
|
|
36
|
+
private _dispatchLabelClick;
|
|
37
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
38
|
+
}
|
package/dist/nys-label.js
CHANGED
|
@@ -1,100 +1,94 @@
|
|
|
1
|
-
import { LitElement as c, unsafeCSS as
|
|
2
|
-
import { property as
|
|
1
|
+
import { LitElement as c, unsafeCSS as f, html as i } from "lit";
|
|
2
|
+
import { property as l } from "lit/decorators.js";
|
|
3
3
|
/*!
|
|
4
4
|
* █▄ █ █ █ █▀▀▀█ █▀▀▄ █▀▀▀█
|
|
5
5
|
* █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
|
|
6
6
|
* █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
|
|
7
7
|
*
|
|
8
|
-
* Label Component v1.
|
|
8
|
+
* Label Component v1.17.0
|
|
9
9
|
* Part of the New York State Design System
|
|
10
10
|
* Repository: https://github.com/its-hcd/nysds
|
|
11
11
|
* License: MIT
|
|
12
12
|
*/
|
|
13
|
-
const
|
|
14
|
-
var
|
|
15
|
-
for (var
|
|
16
|
-
(p =
|
|
17
|
-
return
|
|
13
|
+
const d = ':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)}';
|
|
14
|
+
var b = Object.defineProperty, n = (a, r, y, v) => {
|
|
15
|
+
for (var e = void 0, o = a.length - 1, p; o >= 0; o--)
|
|
16
|
+
(p = a[o]) && (e = p(r, y, e) || e);
|
|
17
|
+
return e && b(r, y, e), e;
|
|
18
18
|
};
|
|
19
|
-
|
|
19
|
+
let _ = 0;
|
|
20
|
+
const s = class s extends c {
|
|
20
21
|
constructor() {
|
|
21
|
-
super(...arguments), this.
|
|
22
|
+
super(...arguments), this.id = "", this.label = "", this.description = "", this.flag = "", this.inverted = !1, this.tooltip = "";
|
|
22
23
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
set tooltip(e) {
|
|
27
|
-
this._tooltip = e;
|
|
24
|
+
connectedCallback() {
|
|
25
|
+
super.connectedCallback(), this.id || (this.id = `nys-label-${Date.now()}-${_++}`);
|
|
28
26
|
}
|
|
29
27
|
/**
|
|
30
28
|
* Event Handlers
|
|
31
29
|
* --------------------------------------------------------------------------
|
|
32
30
|
*/
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
31
|
+
/**
|
|
32
|
+
* While most components don't need to listen for this event.
|
|
33
|
+
* Special components like "nys-fileinput" and "nys-toggle" need to listen for label to execute their specific functionalities.
|
|
34
|
+
*/
|
|
35
|
+
_dispatchLabelClick() {
|
|
36
|
+
this.dispatchEvent(
|
|
37
|
+
new CustomEvent("nys-label-click", { bubbles: !0, composed: !0 })
|
|
38
|
+
);
|
|
38
39
|
}
|
|
39
40
|
render() {
|
|
40
|
-
return
|
|
41
|
+
return i`
|
|
41
42
|
<div class="nys-label ${this.inverted ? "invert" : ""}">
|
|
42
43
|
<div class="nys-label__tooltip-wrapper">
|
|
43
|
-
<label
|
|
44
|
-
for=${this.for}
|
|
45
|
-
class="nys-label__label"
|
|
46
|
-
@click=${this._handleLabelClick}
|
|
44
|
+
<label class="nys-label__label" @click=${this._dispatchLabelClick}
|
|
47
45
|
>${this.label}
|
|
48
|
-
${this.flag === "required" ?
|
|
49
|
-
${this.flag === "optional" ?
|
|
46
|
+
${this.flag === "required" ? i`<div class="nys-label__required">*</div>` : ""}
|
|
47
|
+
${this.flag === "optional" ? i`<div class="nys-label__optional">(Optional)</div>` : ""}</label
|
|
50
48
|
>
|
|
51
|
-
${this.
|
|
52
|
-
text="${this.
|
|
49
|
+
${this.tooltip ? i`<nys-tooltip
|
|
50
|
+
text="${this.tooltip}"
|
|
53
51
|
position="top"
|
|
54
52
|
focusable
|
|
55
53
|
?inverted=${this.inverted}
|
|
56
|
-
for="tooltip-icon-${this.
|
|
54
|
+
for="tooltip-icon-${this.id}"
|
|
57
55
|
>
|
|
58
56
|
</nys-tooltip>
|
|
59
57
|
<nys-icon
|
|
60
|
-
id="tooltip-icon-${this.
|
|
58
|
+
id="tooltip-icon-${this.id}"
|
|
61
59
|
name="info"
|
|
62
60
|
size="3xl"
|
|
63
61
|
></nys-icon> ` : ""}
|
|
64
62
|
</div>
|
|
65
|
-
<p
|
|
66
|
-
for=${this.for}
|
|
67
|
-
class="nys-label__description"
|
|
68
|
-
@click=${this._handleLabelClick}
|
|
69
|
-
>
|
|
63
|
+
<p class="nys-label__description" @click=${this._dispatchLabelClick}>
|
|
70
64
|
<slot name="description">${this.description}</slot>
|
|
71
65
|
</p>
|
|
72
66
|
</div>
|
|
73
67
|
`;
|
|
74
68
|
}
|
|
75
69
|
};
|
|
76
|
-
|
|
77
|
-
let
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
],
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
],
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
],
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
],
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
],
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
],
|
|
96
|
-
customElements.get("nys-label") || customElements.define("nys-label",
|
|
70
|
+
s.styles = f(d);
|
|
71
|
+
let t = s;
|
|
72
|
+
n([
|
|
73
|
+
l({ type: String, reflect: !0 })
|
|
74
|
+
], t.prototype, "id");
|
|
75
|
+
n([
|
|
76
|
+
l({ type: String })
|
|
77
|
+
], t.prototype, "label");
|
|
78
|
+
n([
|
|
79
|
+
l({ type: String })
|
|
80
|
+
], t.prototype, "description");
|
|
81
|
+
n([
|
|
82
|
+
l({ type: String })
|
|
83
|
+
], t.prototype, "flag");
|
|
84
|
+
n([
|
|
85
|
+
l({ type: Boolean, reflect: !0 })
|
|
86
|
+
], t.prototype, "inverted");
|
|
87
|
+
n([
|
|
88
|
+
l({ type: String })
|
|
89
|
+
], t.prototype, "tooltip");
|
|
90
|
+
customElements.get("nys-label") || customElements.define("nys-label", t);
|
|
97
91
|
export {
|
|
98
|
-
|
|
92
|
+
t as NysLabel
|
|
99
93
|
};
|
|
100
94
|
//# 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 * **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
|
|
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\nlet labelIdCounter = 0;\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 /** The ID of the label. */\n @property({ type: String, reflect: true }) id = \"\";\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 }) tooltip = \"\";\n\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-label-${Date.now()}-${labelIdCounter++}`;\n }\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n /**\n * While most components don't need to listen for this event.\n * Special components like \"nys-fileinput\" and \"nys-toggle\" need to listen for label to execute their specific functionalities.\n */\n private _dispatchLabelClick() {\n this.dispatchEvent(\n new CustomEvent(\"nys-label-click\", { bubbles: true, composed: true }),\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 class=\"nys-label__label\" @click=${this._dispatchLabelClick}\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.id}\"\n >\n </nys-tooltip>\n <nys-icon\n id=\"tooltip-icon-${this.id}\"\n name=\"info\"\n size=\"3xl\"\n ></nys-icon> `\n : \"\"}\n </div>\n <p class=\"nys-label__description\" @click=${this._dispatchLabelClick}>\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":["labelIdCounter","_NysLabel","LitElement","html","unsafeCSS","styles","NysLabel","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,IAAIA,IAAiB;AAad,MAAMC,IAAN,MAAMA,UAAiBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIsC,KAAA,KAAK,IAGpB,KAAA,QAAQ,IAGR,KAAA,cAAc,IAGd,KAAA,OAAO,IAGS,KAAA,WAAW,IAE3B,KAAA,UAAU;AAAA,EAAA;AAAA,EAEtC,oBAAoB;AAClB,UAAM,kBAAA,GACD,KAAK,OACR,KAAK,KAAK,aAAa,KAAK,KAAK,IAAIF,GAAgB;AAAA,EAEzD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWQ,sBAAsB;AAC5B,SAAK;AAAA,MACH,IAAI,YAAY,mBAAmB,EAAE,SAAS,IAAM,UAAU,IAAM;AAAA,IAAA;AAAA,EAExE;AAAA,EAEA,SAAS;AACP,WAAOG;AAAA,8BACmB,KAAK,WAAW,WAAW,EAAE;AAAA;AAAA,mDAER,KAAK,mBAAmB;AAAA,eAC5D,KAAK,KAAK;AAAA,cACX,KAAK,SAAS,aACZA,8CACA,EAAE;AAAA,cACJ,KAAK,SAAS,aACZA,uDACA,EAAE;AAAA;AAAA,YAEN,KAAK,UACHA;AAAA,0BACY,KAAK,OAAO;AAAA;AAAA;AAAA,8BAGR,KAAK,QAAQ;AAAA,sCACL,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA,qCAIR,KAAK,EAAE;AAAA;AAAA;AAAA,iCAI9B,EAAE;AAAA;AAAA,mDAEmC,KAAK,mBAAmB;AAAA,qCACtC,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,EAInD;AACF;AA5EEF,EAAO,SAASG,EAAUC,CAAM;AAD3B,IAAMC,IAANL;AAIsCM,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BF,EAIgC,WAAA,IAAA;AAGfC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPfF,EAOiB,WAAA,OAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVfF,EAUiB,WAAA,aAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAbfF,EAaiB,WAAA,MAAA;AAGgBC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhB/BF,EAgBiC,WAAA,UAAA;AAEhBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlBfF,EAkBiB,WAAA,SAAA;AA6DzB,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.17.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,8 +23,8 @@
|
|
|
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.17.0",
|
|
27
|
+
"@nysds/nys-tooltip": "^1.17.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"lit": "^3.3.1",
|