@nysds/nys-alert 1.11.3 → 1.12.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 (3) hide show
  1. package/dist/nys-alert.js +66 -81
  2. package/dist/nys-alert.js.map +1 -1
  3. package/package.json +3 -3
package/dist/nys-alert.js CHANGED
@@ -1,30 +1,21 @@
1
1
  import { LitElement as h, unsafeCSS as _, html as n } from "lit";
2
- import { property as o, state as v } from "lit/decorators.js";
3
- import { ifDefined as d } from "lit/directives/if-defined.js";
2
+ import { property as t, state as p } from "lit/decorators.js";
3
+ import { ifDefined as c } from "lit/directives/if-defined.js";
4
4
  const g = ':host{--_nys-alert-border-width: var(--nys-border-width-lg, 4px);--_nys-alert-border-radius: var(--nys-radius-md, 4px);--_nys-alert-color: var( --nys-alert-color, var(--nys-color-text, var(--nys-color-neutral-900, #1b1b1b)) );--_nys-alert-color--link: var( --nys-alert-color--link, var(--nys-color-link, var(--nys-color-blue-600, #004dd1)) );--_nys-alert-color--link--hover: var( --nys-alert-color--link--hover, var(--nys-color-link-strong, var(--nys-color-blue-700, #003ba1)) );--_nys-alert-color--link--active: var( --nys-alert-color--link--active, var(--nys-color-link-strongest, var(--nys-color-blue-800, #002971)) );--_nys-alert-padding: var(--nys-space-250, 20px);--_nys-alert-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-alert-font-size: var(--nys-font-size-ui-md, 16px);--_nys-alert-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-alert-letter-spacing: var( --nys-font-letterspacing-ui-md, var(--nys-font-letterspacing-400, .044px) );--_nys-alert-font-weight--regular: var(--nys-font-weight-regular, 400);--_nys-alert-font-weight--semibold: var(--nys-font-weight-semibold, 600);--_nys-alert-border-color: var( --nys-alert-border-color, var(--nys-color-base, var(--nys-color-neutral-600, #62666a)) );--_nys-alert-background-color: var( --nys-alert-background-color, var(--nys-color-base-weak, var(--nys-color-neutral-10, #f6f6f6)) );--_nys-alert-gap--icon: var(--nys-space-150, 12px);--_nys-alert-gap--text: var(--nys-space-50, 4px);--_nys-alert-gap--actions: var(--nys-space-150, 12px)}.nys-alert__container{display:flex;background-color:var(--_nys-alert-background-color);border-left:var(--_nys-alert-border-width) solid var(--_nys-alert-border-color);border-radius:var(--_nys-alert-border-radius);color:var(--_nys-alert-color);padding:var(--_nys-alert-padding);font-style:normal;font-family:var(--_nys-alert-font-family);font-size:var(--_nys-alert-font-size);line-height:var(--_nys-alert-line-height);letter-spacing:var(--_nys-alert-letter-spacing);gap:var(--_nys-alert-gap--icon)}p{margin:0}::slotted(p){margin-bottom:0!important}.nys-alert__icon{margin-top:-1.5px}a,a:visited{font-weight:var(--_nys-alert-font-weight--semibold);font-size:var(--_nys-alert-font-size);color:var(--_nys-alert-color--link)}a:hover{color:var(--_nys-alert-color--link--hover)}a:active{color:var(--_nys-alert-color--link--active)}::slotted(a){color:var(--_nys-alert-color--link)}.nys-alert__texts{position:relative;display:flex;flex-direction:column;flex:1;gap:var(--_nys-alert-gap--text)}.nys-alert__header{margin:0;font-weight:var(--_nys-alert-font-weight--semibold)}.nys-alert__text{font-weight:var(--_nys-alert-font-weight--regular);margin:0}::slotted(*){font-weight:var(--_nys-alert-font-weight--regular);margin:0}.nys-alert--centered{display:flex;align-items:center}.nys-alert--centered .nys-alert__header{margin-bottom:-3px}.nys-alert--centered div[part=nys-alert__icon]{margin-top:0;display:flex;align-items:center;justify-content:center}.nys-alert__actions{display:flex;gap:var(--_nys-alert-gap--actions);flex-wrap:wrap}#dismiss-btn{margin-top:-8px}:host([type=info]){--_nys-alert-border-color: var( --nys-alert-border-color, var(--nys-color-info, var(--nys-color-blue-600, #004dd1)) );--_nys-alert-background-color: var( --nys-alert-background-color, var(--nys-color-info-weak, var(--nys-color-blue-50, #e5effa)) )}:host([type=success]){--_nys-alert-border-color: var( --nys-alert-border-color, var(--nys-color-success, var(--nys-color-green-600, #1e752e)) );--_nys-alert-background-color: var( --nys-alert-background-color, var(--nys-color-success-weak, var(--nys-color-green-50, #e8f1ea)) )}:host([type=warning]){--_nys-alert-border-color: var( --nys-alert-border-color, var(--nys-color-warning, var(--nys-color-yellow-400, #face00)) );--_nys-alert-background-color: var( --nys-alert-background-color, var(--nys-color-warning-weak, var(--nys-color-yellow-50, #fefae5)) )}:host([type=danger]){--_nys-alert-border-color: var( --nys-alert-border-color, var(--nys-color-danger, var(--nys-color-red-600, #b52c2c)) );--_nys-alert-background-color: var( --nys-alert-background-color, var(--nys-color-danger-weak, var(--nys-color-red-50, #f7eaea)) )}:host([type=emergency]){--_nys-alert-border-color: var( --nys-alert-border-color, var(--nys-color-emergency, var(--nys-color-red-800, #721c1c)) );--_nys-alert-background-color: var( --nys-alert-background-color, var(--nys-color-emergency, var(--nys-color-red-800, #721c1c)) );--_nys-alert-color: var( --nys-alert-color, var(--nys-color-text-reverse, var(--nys-color-white, #fff)) );--_nys-alert-color--link: var( --nys-alert-color--link, var(--nys-color-link-reverse-neutral, var(--nys-color-white, #fff)) );--_nys-alert-color--link--hover: var( --nys-alert-color--link--hover, var(--nys-color-link-reverse-neutral, var(--nys-color-white, #fff)) );--_nys-alert-color--link--active: var( --nys-alert-color--link--active, var(--nys-color-link-reverse-neutral, var(--nys-color-white, #fff)) )}:host([type=emergency]) a:hover{text-decoration-thickness:2px}:host([type=emergency]) a:active{text-decoration-thickness:3px}';
5
- var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, t = (p, e, a, s) => {
6
- for (var i = s > 1 ? void 0 : s ? u(e, a) : e, c = p.length - 1, y; c >= 0; c--)
7
- (y = p[c]) && (i = (s ? y(e, a, i) : y(i)) || i);
8
- return s && i && f(e, a, i), i;
5
+ var f = Object.defineProperty, r = (d, o, a, l) => {
6
+ for (var s = void 0, i = d.length - 1, v; i >= 0; i--)
7
+ (v = d[i]) && (s = v(o, a, s) || s);
8
+ return s && f(o, a, s), s;
9
9
  };
10
- let m = 0;
11
- var l;
12
- const r = (l = class extends h {
10
+ let u = 0;
11
+ const y = class y extends h {
13
12
  constructor() {
14
- super(...arguments), this.id = "", this.heading = "", this.icon = "", this.dismissible = !1, this.duration = 0, this.text = "", this.primaryAction = "", this.secondaryAction = "", this.primaryLabel = "Learn more", this.secondaryLabel = "Dismiss", this._alertClosed = !1, this._slotHasContent = !0, this._type = "base", this._timeoutId = null;
15
- }
16
- get type() {
17
- return this._type;
18
- }
19
- set type(e) {
20
- this._type = l.VALID_TYPES.includes(
21
- e
22
- ) ? e : "base";
13
+ super(...arguments), this.id = "", this.heading = "", this.icon = "", this.dismissible = !1, this.duration = 0, this.text = "", this.primaryAction = "", this.secondaryAction = "", this.primaryLabel = "Learn more", this.secondaryLabel = "Dismiss", this.type = "base", this._alertClosed = !1, this._slotHasContent = !0, this._timeoutId = null;
23
14
  }
24
15
  // Aria attributes based on the type
25
16
  get ariaAttributes() {
26
- const e = this.type === "danger" || this.type === "emergency" ? "alert" : this.type === "success" ? "status" : "region", a = e === "region" ? `${this.type} alert` : "";
27
- return { role: e, ariaLabel: a };
17
+ const o = this.type === "danger" || this.type === "emergency" ? "alert" : this.type === "success" ? "status" : "region", a = o === "region" ? `${this.type} alert` : "";
18
+ return { role: o, ariaLabel: a };
28
19
  }
29
20
  // For alerts that have durations, we set a timer to close them.
30
21
  connectedCallback() {
@@ -38,9 +29,9 @@ const r = (l = class extends h {
38
29
  firstUpdated() {
39
30
  this._checkSlotContent();
40
31
  }
41
- /******************** Functions ********************/
32
+ // Functions
42
33
  _generateUniqueId() {
43
- return `nys-alert-${Date.now()}-${m++}`;
34
+ return `nys-alert-${Date.now()}-${u++}`;
44
35
  }
45
36
  // Helper function for overriding default icons or checking special naming cases (e.g. type=success)
46
37
  _getIconName() {
@@ -59,21 +50,21 @@ const r = (l = class extends h {
59
50
  );
60
51
  }
61
52
  async _checkSlotContent() {
62
- const e = this.shadowRoot?.querySelector("slot");
63
- if (e) {
64
- const a = e.assignedNodes({ flatten: !0 }).filter(
65
- (s) => s.nodeType === Node.ELEMENT_NODE || s.nodeType === Node.TEXT_NODE && s.textContent?.trim()
53
+ const o = this.shadowRoot?.querySelector("slot");
54
+ if (o) {
55
+ const a = o.assignedNodes({ flatten: !0 }).filter(
56
+ (l) => l.nodeType === Node.ELEMENT_NODE || l.nodeType === Node.TEXT_NODE && l.textContent?.trim()
66
57
  );
67
58
  await Promise.resolve(), this._slotHasContent = a.length > 0;
68
59
  } else
69
60
  await Promise.resolve(), this._slotHasContent = !1;
70
61
  }
71
62
  render() {
72
- const { role: e, ariaLabel: a } = this.ariaAttributes;
63
+ const { role: o, ariaLabel: a } = this.ariaAttributes;
73
64
  return n`
74
65
  ${this._alertClosed ? "" : n` <div
75
66
  class="nys-alert__container ${this._slotHasContent || this.text?.trim().length > 0 ? "" : "nys-alert--centered"}"
76
- aria-label=${d(
67
+ aria-label=${c(
77
68
  a.trim() !== "" ? a : void 0
78
69
  )}
79
70
  >
@@ -84,18 +75,18 @@ const r = (l = class extends h {
84
75
  label="${this.type} icon"
85
76
  ></nys-icon>
86
77
  </div>
87
- <div class="nys-alert__texts" role=${e}>
78
+ <div class="nys-alert__texts" role=${o}>
88
79
  <p class="nys-alert__header">${this.heading}</p>
89
80
  ${this._slotHasContent ? n`<slot></slot>` : this.text?.trim().length > 0 ? n`<p class="nys-alert__text">${this.text}</p>` : ""}
90
81
  ${this.primaryAction || this.secondaryAction ? n`<div class="nys-alert__actions">
91
82
  ${this.primaryAction ? n`<a
92
- href=${d(this.primaryAction || void 0)}
83
+ href=${c(this.primaryAction || void 0)}
93
84
  class="nys-alert__action nys-alert__primary"
94
85
  >
95
86
  ${this.primaryLabel}
96
87
  </a>` : ""}
97
88
  ${this.secondaryAction ? n`<a
98
- href=${d(this.secondaryAction || void 0)}
89
+ href=${c(this.secondaryAction || void 0)}
99
90
  class="nys-alert__action nys-alert__secondary"
100
91
  >
101
92
  ${this.secondaryLabel}
@@ -115,56 +106,50 @@ const r = (l = class extends h {
115
106
  </div>`}
116
107
  `;
117
108
  }
118
- }, l.styles = _(g), l.VALID_TYPES = [
119
- "base",
120
- "info",
121
- "success",
122
- "warning",
123
- "danger",
124
- "emergency"
125
- ], l);
126
- t([
127
- o({ type: String, reflect: !0 })
128
- ], r.prototype, "id", 2);
129
- t([
130
- o({ type: String })
131
- ], r.prototype, "heading", 2);
132
- t([
133
- o({ type: String })
134
- ], r.prototype, "icon", 2);
135
- t([
136
- o({ type: Boolean, reflect: !0 })
137
- ], r.prototype, "dismissible", 2);
138
- t([
139
- o({ type: Number, reflect: !0 })
140
- ], r.prototype, "duration", 2);
141
- t([
142
- o({ type: String })
143
- ], r.prototype, "text", 2);
144
- t([
145
- o({ type: String })
146
- ], r.prototype, "primaryAction", 2);
147
- t([
148
- o({ type: String })
149
- ], r.prototype, "secondaryAction", 2);
150
- t([
151
- o({ type: String })
152
- ], r.prototype, "primaryLabel", 2);
153
- t([
154
- o({ type: String })
155
- ], r.prototype, "secondaryLabel", 2);
156
- t([
157
- v()
158
- ], r.prototype, "_alertClosed", 2);
159
- t([
160
- v()
161
- ], r.prototype, "_slotHasContent", 2);
162
- t([
163
- o({ reflect: !0 })
164
- ], r.prototype, "type", 1);
165
- let b = r;
166
- customElements.get("nys-alert") || customElements.define("nys-alert", b);
109
+ };
110
+ y.styles = _(g);
111
+ let e = y;
112
+ r([
113
+ t({ type: String, reflect: !0 })
114
+ ], e.prototype, "id");
115
+ r([
116
+ t({ type: String })
117
+ ], e.prototype, "heading");
118
+ r([
119
+ t({ type: String })
120
+ ], e.prototype, "icon");
121
+ r([
122
+ t({ type: Boolean, reflect: !0 })
123
+ ], e.prototype, "dismissible");
124
+ r([
125
+ t({ type: Number, reflect: !0 })
126
+ ], e.prototype, "duration");
127
+ r([
128
+ t({ type: String })
129
+ ], e.prototype, "text");
130
+ r([
131
+ t({ type: String })
132
+ ], e.prototype, "primaryAction");
133
+ r([
134
+ t({ type: String })
135
+ ], e.prototype, "secondaryAction");
136
+ r([
137
+ t({ type: String })
138
+ ], e.prototype, "primaryLabel");
139
+ r([
140
+ t({ type: String })
141
+ ], e.prototype, "secondaryLabel");
142
+ r([
143
+ t({ type: String, reflect: !0 })
144
+ ], e.prototype, "type");
145
+ r([
146
+ p()
147
+ ], e.prototype, "_alertClosed");
148
+ r([
149
+ p()
150
+ ], e.prototype, "_slotHasContent");
151
+ customElements.get("nys-alert") || customElements.define("nys-alert", e);
167
152
  export {
168
- b as NysAlert
153
+ e as NysAlert
169
154
  };
170
155
  //# sourceMappingURL=nys-alert.js.map
package/dist/nys-alert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nys-alert.js","sources":["../src/nys-alert.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-alert.scss?inline\";\n\nlet alertIdCounter = 0; // Counter for generating unique IDs\n\nexport class NysAlert extends LitElement {\n static styles = unsafeCSS(styles);\n\n /********************** Properties **********************/\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String }) heading = \"\";\n @property({ type: String }) icon = \"\";\n @property({ type: Boolean, reflect: true }) dismissible = false;\n @property({ type: Number, reflect: true }) duration = 0;\n @property({ type: String }) text = \"\";\n @property({ type: String }) primaryAction = \"\";\n @property({ type: String }) secondaryAction = \"\";\n @property({ type: String }) primaryLabel = \"Learn more\";\n @property({ type: String }) secondaryLabel = \"Dismiss\";\n\n @state() private _alertClosed = false;\n @state() private _slotHasContent = true;\n\n // --- Valid Alert Types --- //\n private static readonly VALID_TYPES = [\n \"base\",\n \"info\",\n \"success\",\n \"warning\",\n \"danger\",\n \"emergency\",\n ] as const;\n private _type: (typeof NysAlert.VALID_TYPES)[number] = \"base\";\n\n @property({ reflect: true })\n get type() {\n return this._type;\n }\n\n set type(value: string) {\n this._type = NysAlert.VALID_TYPES.includes(\n value as (typeof NysAlert.VALID_TYPES)[number],\n )\n ? (value as (typeof NysAlert.VALID_TYPES)[number])\n : \"base\";\n }\n\n // Aria attributes based on the type\n get ariaAttributes(): {\n role: \"alert\" | \"status\" | \"region\";\n ariaLabel: string;\n } {\n const ariaRole =\n this.type === \"danger\" || this.type === \"emergency\"\n ? \"alert\"\n : this.type === \"success\"\n ? \"status\"\n : \"region\"; // Default role\n\n // Set aria-label only for role=\"region\"\n const ariaLabel = ariaRole === \"region\" ? `${this.type} alert` : \"\";\n\n return { role: ariaRole, ariaLabel };\n }\n\n /**************** Lifecycle Methods ****************/\n\n private _timeoutId: any = null;\n\n // For alerts that have durations, we set a timer to close them.\n connectedCallback() {\n super.connectedCallback();\n\n // Generate a unique ID if not provided\n if (!this.id) {\n this.id = this._generateUniqueId();\n }\n\n if (this.duration > 0) {\n this._timeoutId = setTimeout(() => {\n this._closeAlert();\n }, this.duration);\n }\n }\n\n disconnectedCallback() {\n if (this._timeoutId) {\n clearTimeout(this._timeoutId);\n }\n super.disconnectedCallback();\n }\n\n firstUpdated() {\n this._checkSlotContent();\n }\n\n /******************** Functions ********************/\n private _generateUniqueId() {\n return `nys-alert-${Date.now()}-${alertIdCounter++}`;\n }\n\n // Helper function for overriding default icons or checking special naming cases (e.g. type=success)\n private _getIconName() {\n if (this.icon) {\n return this.icon;\n } else {\n return this._checkAltNaming(); // checking alternative svg naming\n }\n }\n\n private _checkAltNaming() {\n // map 'success' to 'check_circle'\n return this.type === \"success\"\n ? \"check_circle\"\n : this.type === \"base\"\n ? \"info\"\n : this.type === \"danger\"\n ? \"error\"\n : this.type === \"emergency\"\n ? \"emergency_home\"\n : this.type;\n }\n\n private _closeAlert() {\n this._alertClosed = true;\n /* Dispatch a custom event for the close action:\n * allows bubbling up so if developers wish to implement a local save to remember closed alerts.\n */\n this.dispatchEvent(\n new CustomEvent(\"nys-close\", {\n detail: { id: this.id, type: this.type, label: this.heading },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private async _checkSlotContent() {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(\"slot\");\n if (slot) {\n // Check if slot has assigned nodes with content (elements or non-empty text nodes)\n const assignedNodes = slot\n .assignedNodes({ flatten: true })\n .filter(\n (node) =>\n node.nodeType === Node.ELEMENT_NODE ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n );\n\n await Promise.resolve();\n this._slotHasContent = assignedNodes.length > 0;\n } else {\n await Promise.resolve();\n this._slotHasContent = false; // No slot found\n }\n }\n\n render() {\n const { role, ariaLabel } = this.ariaAttributes;\n\n return html`\n ${!this._alertClosed\n ? html` <div\n class=\"nys-alert__container ${this._slotHasContent ||\n this.text?.trim().length > 0\n ? \"\"\n : \"nys-alert--centered\"}\"\n aria-label=${ifDefined(\n ariaLabel.trim() !== \"\" ? ariaLabel : undefined,\n )}\n >\n <div part=\"nys-alert__icon\" class=\"nys-alert__icon\">\n <nys-icon\n name=\"${this._getIconName()}\"\n size=\"3xl\"\n label=\"${this.type} icon\"\n ></nys-icon>\n </div>\n <div class=\"nys-alert__texts\" role=${role}>\n <p class=\"nys-alert__header\">${this.heading}</p>\n ${this._slotHasContent\n ? html`<slot></slot>`\n : this.text?.trim().length > 0\n ? html`<p class=\"nys-alert__text\">${this.text}</p>`\n : \"\"}\n ${this.primaryAction || this.secondaryAction\n ? html`<div class=\"nys-alert__actions\">\n ${this.primaryAction\n ? html`<a\n href=${ifDefined(this.primaryAction || undefined)}\n class=\"nys-alert__action nys-alert__primary\"\n >\n ${this.primaryLabel}\n </a>`\n : \"\"}\n ${this.secondaryAction\n ? html`<a\n href=${ifDefined(this.secondaryAction || undefined)}\n class=\"nys-alert__action nys-alert__secondary\"\n >\n ${this.secondaryLabel}\n </a>`\n : \"\"}\n </div> `\n : \"\"}\n </div>\n ${this.dismissible\n ? html` <nys-button\n id=\"dismiss-btn\"\n variant=\"ghost\"\n circle\n icon=\"close\"\n size=\"sm\"\n ?inverted=${this.type === \"emergency\"}\n ariaLabel=\"${this.heading}, alert, Close\"\n @nys-click=${this._closeAlert}\n ></nys-button>`\n : \"\"}\n </div>`\n : \"\"}\n `;\n }\n}\n\nif (!customElements.get(\"nys-alert\")) {\n customElements.define(\"nys-alert\", NysAlert);\n}\n"],"names":["alertIdCounter","_NysAlert","_a","LitElement","value","ariaRole","ariaLabel","slot","assignedNodes","node","role","html","ifDefined","unsafeCSS","styles","__decorateClass","property","state","NysAlert"],"mappings":"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"}
1
+ {"version":3,"file":"nys-alert.js","sources":["../src/nys-alert.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-alert.scss?inline\";\n\nlet alertIdCounter = 0; // Counter for generating unique IDs\n\nexport class NysAlert extends LitElement {\n static styles = unsafeCSS(styles);\n\n // Properties\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String }) heading = \"\";\n @property({ type: String }) icon = \"\";\n @property({ type: Boolean, reflect: true }) dismissible = false;\n @property({ type: Number, reflect: true }) duration = 0;\n @property({ type: String }) text = \"\";\n @property({ type: String }) primaryAction = \"\";\n @property({ type: String }) secondaryAction = \"\";\n @property({ type: String }) primaryLabel = \"Learn more\";\n @property({ type: String }) secondaryLabel = \"Dismiss\";\n @property({ type: String, reflect: true }) type:\n | \"base\"\n | \"info\"\n | \"success\"\n | \"warning\"\n | \"danger\"\n | \"emergency\" = \"base\";\n\n @state() private _alertClosed = false;\n @state() private _slotHasContent = true;\n\n // Aria attributes based on the type\n get ariaAttributes(): {\n role: \"alert\" | \"status\" | \"region\";\n ariaLabel: string;\n } {\n const ariaRole =\n this.type === \"danger\" || this.type === \"emergency\"\n ? \"alert\"\n : this.type === \"success\"\n ? \"status\"\n : \"region\"; // Default role\n\n // Set aria-label only for role=\"region\"\n const ariaLabel = ariaRole === \"region\" ? `${this.type} alert` : \"\";\n\n return { role: ariaRole, ariaLabel };\n }\n\n // Lifecycle Methods\n private _timeoutId: any = null;\n\n // For alerts that have durations, we set a timer to close them.\n connectedCallback() {\n super.connectedCallback();\n\n // Generate a unique ID if not provided\n if (!this.id) {\n this.id = this._generateUniqueId();\n }\n\n if (this.duration > 0) {\n this._timeoutId = setTimeout(() => {\n this._closeAlert();\n }, this.duration);\n }\n }\n\n disconnectedCallback() {\n if (this._timeoutId) {\n clearTimeout(this._timeoutId);\n }\n super.disconnectedCallback();\n }\n\n firstUpdated() {\n this._checkSlotContent();\n }\n\n // Functions\n private _generateUniqueId() {\n return `nys-alert-${Date.now()}-${alertIdCounter++}`;\n }\n\n // Helper function for overriding default icons or checking special naming cases (e.g. type=success)\n private _getIconName() {\n if (this.icon) {\n return this.icon;\n } else {\n return this._checkAltNaming(); // checking alternative svg naming\n }\n }\n\n private _checkAltNaming() {\n // map 'success' to 'check_circle'\n return this.type === \"success\"\n ? \"check_circle\"\n : this.type === \"base\"\n ? \"info\"\n : this.type === \"danger\"\n ? \"error\"\n : this.type === \"emergency\"\n ? \"emergency_home\"\n : this.type;\n }\n\n private _closeAlert() {\n this._alertClosed = true;\n /* Dispatch a custom event for the close action:\n * allows bubbling up so if developers wish to implement a local save to remember closed alerts.\n */\n this.dispatchEvent(\n new CustomEvent(\"nys-close\", {\n detail: { id: this.id, type: this.type, label: this.heading },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private async _checkSlotContent() {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(\"slot\");\n if (slot) {\n // Check if slot has assigned nodes with content (elements or non-empty text nodes)\n const assignedNodes = slot\n .assignedNodes({ flatten: true })\n .filter(\n (node) =>\n node.nodeType === Node.ELEMENT_NODE ||\n (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n );\n\n await Promise.resolve();\n this._slotHasContent = assignedNodes.length > 0;\n } else {\n await Promise.resolve();\n this._slotHasContent = false; // No slot found\n }\n }\n\n render() {\n const { role, ariaLabel } = this.ariaAttributes;\n\n return html`\n ${!this._alertClosed\n ? html` <div\n class=\"nys-alert__container ${this._slotHasContent ||\n this.text?.trim().length > 0\n ? \"\"\n : \"nys-alert--centered\"}\"\n aria-label=${ifDefined(\n ariaLabel.trim() !== \"\" ? ariaLabel : undefined,\n )}\n >\n <div part=\"nys-alert__icon\" class=\"nys-alert__icon\">\n <nys-icon\n name=\"${this._getIconName()}\"\n size=\"3xl\"\n label=\"${this.type} icon\"\n ></nys-icon>\n </div>\n <div class=\"nys-alert__texts\" role=${role}>\n <p class=\"nys-alert__header\">${this.heading}</p>\n ${this._slotHasContent\n ? html`<slot></slot>`\n : this.text?.trim().length > 0\n ? html`<p class=\"nys-alert__text\">${this.text}</p>`\n : \"\"}\n ${this.primaryAction || this.secondaryAction\n ? html`<div class=\"nys-alert__actions\">\n ${this.primaryAction\n ? html`<a\n href=${ifDefined(this.primaryAction || undefined)}\n class=\"nys-alert__action nys-alert__primary\"\n >\n ${this.primaryLabel}\n </a>`\n : \"\"}\n ${this.secondaryAction\n ? html`<a\n href=${ifDefined(this.secondaryAction || undefined)}\n class=\"nys-alert__action nys-alert__secondary\"\n >\n ${this.secondaryLabel}\n </a>`\n : \"\"}\n </div> `\n : \"\"}\n </div>\n ${this.dismissible\n ? html` <nys-button\n id=\"dismiss-btn\"\n variant=\"ghost\"\n circle\n icon=\"close\"\n size=\"sm\"\n ?inverted=${this.type === \"emergency\"}\n ariaLabel=\"${this.heading}, alert, Close\"\n @nys-click=${this._closeAlert}\n ></nys-button>`\n : \"\"}\n </div>`\n : \"\"}\n `;\n }\n}\n\nif (!customElements.get(\"nys-alert\")) {\n customElements.define(\"nys-alert\", NysAlert);\n}\n"],"names":["alertIdCounter","_NysAlert","LitElement","ariaRole","ariaLabel","slot","assignedNodes","node","role","html","ifDefined","unsafeCSS","styles","NysAlert","__decorateClass","property","state"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/nys-alert",
3
- "version": "1.11.3",
3
+ "version": "1.12.0",
4
4
  "description": "The Alert component from the NYS Design System.",
5
5
  "module": "dist/nys-alert.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.11.3",
27
- "@nysds/nys-button": "^1.11.3"
26
+ "@nysds/nys-icon": "^1.12.0",
27
+ "@nysds/nys-button": "^1.12.0"
28
28
  },
29
29
  "devDependencies": {
30
30
  "lit": "^3.3.1",