@nysds/nys-avatar 1.12.0 → 1.13.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-avatar.js +14 -3
- package/dist/nys-avatar.js.map +1 -1
- package/package.json +2 -2
package/dist/nys-avatar.js
CHANGED
|
@@ -12,8 +12,10 @@ const d = class d extends g {
|
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments), this.id = "", this.ariaLabel = "", this.image = "", this.initials = "", this.icon = "", this.color = "", this.interactive = !1, this.disabled = !1, this.lazy = !1, this._slotHasContent = !1;
|
|
14
14
|
}
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
/**
|
|
16
|
+
* Lifecycle methods
|
|
17
|
+
* --------------------------------------------------------------------------
|
|
18
|
+
*/
|
|
17
19
|
connectedCallback() {
|
|
18
20
|
super.connectedCallback(), this.id || (this.id = `nys-avatar-${Date.now()}-${k++}`);
|
|
19
21
|
}
|
|
@@ -29,7 +31,16 @@ const d = class d extends g {
|
|
|
29
31
|
);
|
|
30
32
|
this._slotHasContent = s.length > 0;
|
|
31
33
|
}
|
|
32
|
-
|
|
34
|
+
/**
|
|
35
|
+
* Functions
|
|
36
|
+
* --------------------------------------------------------------------------
|
|
37
|
+
*/
|
|
38
|
+
/**
|
|
39
|
+
* Computes the appropriate foreground color (icon or initials)
|
|
40
|
+
* based on the avatar's background color for sufficient contrast.
|
|
41
|
+
*
|
|
42
|
+
* @returns CSS color string for foreground
|
|
43
|
+
*/
|
|
33
44
|
getContrastForeground() {
|
|
34
45
|
const n = "var(--nys-color-ink, #000)", s = "var(--nys-color-ink-reverse, #fff)", i = "var(--nys-color-text, #000)", r = "var(--nys-color-text-reverse, #fff)";
|
|
35
46
|
if (!this.color) return;
|
package/dist/nys-avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nys-avatar.js","sources":["../src/nys-avatar.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-avatar.scss?inline\";\n\nlet avatarIdCounter = 0
|
|
1
|
+
{"version":3,"file":"nys-avatar.js","sources":["../src/nys-avatar.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-avatar.scss?inline\";\n\nlet avatarIdCounter = 0;\n\n/**\n * `<nys-avatar>` displays a user avatar as an image, initials, or icon.\n *\n * @slot - Default slot for custom icon content. Fallback icon is used if slot is empty.\n *\n * Features:\n * - Computes foreground color for sufficient contrast based on background.\n * - Supports interactive avatars with button role.\n * - Fallback to icon when image or initials are missing.\n * - Lazy loading for performance optimization.\n */\n\nexport class NysAvatar extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String }) ariaLabel = \"\";\n @property({ type: String }) image = \"\";\n @property({ type: String }) initials = \"\";\n @property({ type: String }) icon = \"\";\n @property({ type: String }) color = \"\";\n @property({ type: Boolean, reflect: true }) interactive = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: Boolean, reflect: true }) lazy = false;\n @state() private _slotHasContent = false;\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-avatar-${Date.now()}-${avatarIdCounter++}`;\n }\n }\n\n private async _handleSlotChange() {\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(\"slot\");\n if (!slot) {\n this._slotHasContent = false;\n return;\n }\n\n await Promise.resolve();\n\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 this._slotHasContent = assignedNodes.length > 0;\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n /**\n * Computes the appropriate foreground color (icon or initials)\n * based on the avatar's background color for sufficient contrast.\n *\n * @returns CSS color string for foreground\n */\n private getContrastForeground() {\n // Default NYSDS CSS vars for foreground.\n // Contrast must return =>\n // IF icon: \"--nys-color-ink-reverse\" or \"--nys-color-ink\"\n // If initials: \"--nys-color-text-reverse\" or \"--nys-color-text\"\n const fgIconDark = \"var(--nys-color-ink, #000)\";\n const fgIconLight = \"var(--nys-color-ink-reverse, #fff)\";\n const fgInitialDark = \"var(--nys-color-text, #000)\";\n const fgInitialLight = \"var(--nys-color-text-reverse, #fff)\";\n\n if (!this.color) return;\n\n // Create a temporary element to compute luminance (this is in case user pass in \"var(--nys-color-stuff)\")\n const div = document.createElement(\"div\");\n div.style.color = this.color;\n document.body.appendChild(div);\n const computedColor = getComputedStyle(div).color;\n document.body.removeChild(div);\n\n // Parse RGB\n const match = computedColor.match(/\\d+/g);\n if (!match) return;\n\n const r = Number(match[0]);\n const g = Number(match[1]);\n const b = Number(match[2]);\n\n // Calculate relative luminance\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n\n const isDark = luminance < 0.5;\n if (this.initials?.length > 0) {\n return isDark ? fgInitialLight : fgInitialDark;\n } else {\n return isDark ? fgIconLight : fgIconDark;\n }\n }\n\n render() {\n return html`\n <div class=\"nys-avatar\">\n <div class=\"nys-avatar__content\">\n <div\n part=\"nys-avatar\"\n class=\"nys-avatar__component\"\n style=${this.color\n ? `--_nys-avatar-background-color: ${this.color}; color: ${this.getContrastForeground()}`\n : \"\"}\n role=${ifDefined(\n this.interactive ? \"button\" : this.image ? undefined : \"img\",\n )}\n aria-label=${ifDefined(\n this.image\n ? undefined\n : this.ariaLabel\n ? this.ariaLabel\n : \"avatar\",\n )}\n tabindex=${ifDefined(\n this.interactive && !this.disabled ? 0 : undefined,\n )}\n >\n ${this.image?.length > 0\n ? html`<img\n part=\"nys-avatar__image\"\n class=\"nys-avatar__image\"\n src=${this.image}\n alt=${this.ariaLabel || \"avatar\"}\n loading=${this.lazy ? \"lazy\" : \"eager\"}\n />`\n : this.initials?.length > 0\n ? html`<span\n part=\"nys-avatar__initials\"\n class=\"nys-avatar__initials\"\n aria-hidden=\"true\"\n >${this.initials}</span\n >`\n : html`<div part=\"nys-avatar__icon\">\n <slot @slotchange=${this._handleSlotChange}></slot>\n ${!this._slotHasContent\n ? html`<nys-icon\n label=\"nys-avatar__icon\"\n name=${this.icon?.length > 0\n ? this.icon\n : \"account_circle\"}\n ></nys-icon>`\n : null}\n </div>`}\n </div>\n </div>\n </div>\n `;\n }\n}\n\nif (!customElements.get(\"nys-avatar\")) {\n customElements.define(\"nys-avatar\", NysAvatar);\n}\n"],"names":["avatarIdCounter","_NysAvatar","LitElement","slot","assignedNodes","node","fgIconDark","fgIconLight","fgInitialDark","fgInitialLight","div","computedColor","match","r","g","b","isDark","html","ifDefined","unsafeCSS","styles","NysAvatar","__decorateClass","property","state"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-avatar",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.13.0",
|
|
4
4
|
"description": "The Avatar component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-avatar.js",
|
|
6
6
|
"exports": {
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"lit-analyze": "lit-analyzer '**/*.ts'"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@nysds/nys-icon": "^1.
|
|
25
|
+
"@nysds/nys-icon": "^1.13.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"lit": "^3.3.1",
|