@nysds/nys-errormessage 1.16.0 → 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.
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* **Internal component.** Displays error messages for form validation with icon and ARIA alert role.
|
|
4
|
+
*
|
|
5
|
+
* Used internally by form components. Not intended for direct use. Shows error icon and message
|
|
6
|
+
* when `showError` is true. Integrates with ElementInternals for native form validation messages.
|
|
7
|
+
*
|
|
8
|
+
* @summary Internal error message display with icon and ARIA alert support.
|
|
9
|
+
* @element nys-errormessage
|
|
10
|
+
*/
|
|
11
|
+
export declare class NysErrorMessage extends LitElement {
|
|
12
|
+
static styles: import("lit").CSSResult;
|
|
13
|
+
/** The "id" of the error message. */
|
|
14
|
+
id: string;
|
|
15
|
+
/** Whether to display the error message. */
|
|
16
|
+
showError: boolean;
|
|
17
|
+
/** Error text to display. Falls back to native validation message if available. */
|
|
18
|
+
errorMessage: string;
|
|
19
|
+
/** Shows a divider line above the error message. */
|
|
20
|
+
showDivider: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Lifecycle methods
|
|
23
|
+
* --------------------------------------------------------------------------
|
|
24
|
+
*/
|
|
25
|
+
constructor();
|
|
26
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
27
|
+
}
|
package/dist/nys-errormessage.js
CHANGED
|
@@ -1,50 +1,60 @@
|
|
|
1
|
-
import { LitElement as
|
|
2
|
-
import { property as
|
|
1
|
+
import { LitElement as d, unsafeCSS as l, html as y } from "lit";
|
|
2
|
+
import { property as s } from "lit/decorators.js";
|
|
3
3
|
/*!
|
|
4
4
|
* █▄ █ █ █ █▀▀▀█ █▀▀▄ █▀▀▀█
|
|
5
5
|
* █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
|
|
6
6
|
* █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
|
|
7
7
|
*
|
|
8
|
-
* Error message Component v1.
|
|
8
|
+
* Error message 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 v = Object.defineProperty,
|
|
15
|
-
for (var
|
|
16
|
-
(m = i
|
|
17
|
-
return
|
|
13
|
+
const p = ':host{--_nys-errormessage-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-errormessage-font-weight: var(--nys-font-weight-regular, 400);--_nys-errormessage-font-size: var(--nys-font-size-ui-md, 16px);--_nys-errormessage-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-errormessage-letter-spacing: var( --nys-font-letterspacing-ui-md, .044px );--_nys-errormessage-color: var(--nys-color-danger, #b52c2c);--_nys-errormessage-gap: var(--nys-space-100, 8px);--_nys-errormessage-padding--divider: var(--nys-space-50, 4px);--_nys-errormessage-width--divider: var(--nys-border-width-sm, 1px);--_nys-errormessage-margin-top: 0}.nys-errormessage{display:flex;align-items:center;gap:var(--_nys-errormessage-gap);font-family:var(--_nys-errormessage-font-family);font-weight:var(--_nys-errormessage-font-weight);font-size:var(--_nys-errormessage-font-size);line-height:var(--_nys-errormessage-line-height);letter-spacing:var(--_nys-errormessage-letter-spacing);color:var(--_nys-errormessage-color);margin-top:var(--_nys-errormessage-margin-top)}.nys-errormessage[showDivider]{padding-top:var(--_nys-errormessage-padding--divider);margin-top:var(--_nys-errormessage-padding--divider);border-top:var(--_nys-errormessage-width--divider) solid var(--_nys-errormessage-color)}nys-icon{margin-top:-2px}';
|
|
14
|
+
var v = Object.defineProperty, o = (n, t, g, h) => {
|
|
15
|
+
for (var r = void 0, i = n.length - 1, m; i >= 0; i--)
|
|
16
|
+
(m = n[i]) && (r = m(t, g, r) || r);
|
|
17
|
+
return r && v(t, g, r), r;
|
|
18
18
|
};
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
let f = 0;
|
|
20
|
+
const a = class a extends d {
|
|
21
|
+
/**
|
|
22
|
+
* Lifecycle methods
|
|
23
|
+
* --------------------------------------------------------------------------
|
|
24
|
+
*/
|
|
21
25
|
constructor() {
|
|
22
|
-
super(), this.showError = !1, this.errorMessage = "", this.showDivider = !1, this.
|
|
26
|
+
super(), this.id = "", this.showError = !1, this.errorMessage = "", this.showDivider = !1, this.id || (this.id = `nys-errormessage-${Date.now()}-${f++}`);
|
|
23
27
|
}
|
|
24
28
|
render() {
|
|
25
|
-
return y
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
29
|
+
return y`<div
|
|
30
|
+
role="alert"
|
|
31
|
+
aria-live="assertive"
|
|
32
|
+
aria-atomic="true"
|
|
33
|
+
class="nys-errormessage__region"
|
|
34
|
+
>
|
|
35
|
+
${this.showError ? y`<div class="nys-errormessage" ?showDivider=${this.showDivider}>
|
|
36
|
+
<nys-icon name="error" size="2xl"></nys-icon>
|
|
37
|
+
${this.errorMessage}
|
|
38
|
+
</div>` : ""}
|
|
39
|
+
</div>`;
|
|
33
40
|
}
|
|
34
41
|
};
|
|
35
|
-
|
|
36
|
-
let
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
],
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
],
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
],
|
|
46
|
-
|
|
42
|
+
a.styles = l(p);
|
|
43
|
+
let e = a;
|
|
44
|
+
o([
|
|
45
|
+
s({ type: String, reflect: !0 })
|
|
46
|
+
], e.prototype, "id");
|
|
47
|
+
o([
|
|
48
|
+
s({ type: Boolean })
|
|
49
|
+
], e.prototype, "showError");
|
|
50
|
+
o([
|
|
51
|
+
s({ type: String })
|
|
52
|
+
], e.prototype, "errorMessage");
|
|
53
|
+
o([
|
|
54
|
+
s({ type: Boolean, reflect: !0 })
|
|
55
|
+
], e.prototype, "showDivider");
|
|
56
|
+
customElements.get("nys-errormessage") || customElements.define("nys-errormessage", e);
|
|
47
57
|
export {
|
|
48
|
-
|
|
58
|
+
e as NysErrorMessage
|
|
49
59
|
};
|
|
50
60
|
//# sourceMappingURL=nys-errormessage.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nys-errormessage.js","sources":["../src/nys-errormessage.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-errormessage.scss?inline\";\n\n/**\n * **Internal component.** Displays error messages for form validation with icon and ARIA alert role.\n *\n * Used internally by form components. Not intended for direct use. Shows error icon and message\n * when `showError` is true. Integrates with ElementInternals for native form validation messages.\n *\n * @summary Internal error message display with icon and ARIA alert support.\n * @element nys-errormessage\n */\nexport class NysErrorMessage extends LitElement {\n static styles = unsafeCSS(styles);\n\n /** Whether to display the error message. */\n @property({ type: Boolean }) showError = false;\n\n /** Error text to display. Falls back to native validation message if available. */\n @property({ type: String }) errorMessage = \"\";\n\n /** Shows a divider line above the error message. */\n @property({ type: Boolean, reflect: true }) showDivider = false;\n
|
|
1
|
+
{"version":3,"file":"nys-errormessage.js","sources":["../src/nys-errormessage.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-errormessage.scss?inline\";\n\nlet errorMessageIdCounter = 0;\n\n/**\n * **Internal component.** Displays error messages for form validation with icon and ARIA alert role.\n *\n * Used internally by form components. Not intended for direct use. Shows error icon and message\n * when `showError` is true. Integrates with ElementInternals for native form validation messages.\n *\n * @summary Internal error message display with icon and ARIA alert support.\n * @element nys-errormessage\n */\nexport class NysErrorMessage extends LitElement {\n static styles = unsafeCSS(styles);\n\n /** The \"id\" of the error message. */\n @property({ type: String, reflect: true }) id = \"\";\n\n /** Whether to display the error message. */\n @property({ type: Boolean }) showError = false;\n\n /** Error text to display. Falls back to native validation message if available. */\n @property({ type: String }) errorMessage = \"\";\n\n /** Shows a divider line above the error message. */\n @property({ type: Boolean, reflect: true }) showDivider = false;\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n constructor() {\n super();\n if (!this.id) {\n this.id = `nys-errormessage-${Date.now()}-${errorMessageIdCounter++}`;\n }\n }\n\n render() {\n return html`<div\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n class=\"nys-errormessage__region\"\n >\n ${this.showError\n ? html`<div class=\"nys-errormessage\" ?showDivider=${this.showDivider}>\n <nys-icon name=\"error\" size=\"2xl\"></nys-icon>\n ${this.errorMessage}\n </div>`\n : \"\"}\n </div>`;\n }\n}\n\nif (!customElements.get(\"nys-errormessage\")) {\n customElements.define(\"nys-errormessage\", NysErrorMessage);\n}\n"],"names":["errorMessageIdCounter","_NysErrorMessage","LitElement","html","unsafeCSS","styles","NysErrorMessage","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;;;AAKA,IAAIA,IAAwB;AAWrB,MAAMC,IAAN,MAAMA,UAAwBC,EAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAmB9C,cAAc;AACZ,UAAA,GAhByC,KAAA,KAAK,IAGnB,KAAA,YAAY,IAGb,KAAA,eAAe,IAGC,KAAA,cAAc,IAQnD,KAAK,OACR,KAAK,KAAK,oBAAoB,KAAK,KAAK,IAAIF,GAAuB;AAAA,EAEvE;AAAA,EAEA,SAAS;AACP,WAAOG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMH,KAAK,YACHA,+CAAkD,KAAK,WAAW;AAAA;AAAA,cAE9D,KAAK,YAAY;AAAA,oBAErB,EAAE;AAAA;AAAA,EAEV;AACF;AAxCEF,EAAO,SAASG,EAAUC,CAAM;AAD3B,IAAMC,IAANL;AAIsCM,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BF,EAIgC,WAAA,IAAA;AAGdC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAPhBF,EAOkB,WAAA,WAAA;AAGDC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVfF,EAUiB,WAAA,cAAA;AAGgBC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAb/BF,EAaiC,WAAA,aAAA;AA8BzC,eAAe,IAAI,kBAAkB,KACxC,eAAe,OAAO,oBAAoBA,CAAe;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-errormessage",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.17.0",
|
|
4
4
|
"description": "The Errormessage component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-errormessage.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"lit-analyze": "lit-analyzer '**/*.ts'"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@nysds/nys-icon": "^1.
|
|
26
|
+
"@nysds/nys-icon": "^1.17.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"lit": "^3.3.1",
|