@nysds/nys-avatar 1.11.4 → 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.
- package/dist/nys-avatar.js +1 -1
- package/dist/nys-avatar.js.map +1 -1
- package/package.json +2 -2
package/dist/nys-avatar.js
CHANGED
|
@@ -12,7 +12,7 @@ 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
|
-
|
|
15
|
+
// Functions
|
|
16
16
|
// Generate a unique ID if one is not provided
|
|
17
17
|
connectedCallback() {
|
|
18
18
|
super.connectedCallback(), this.id || (this.id = `nys-avatar-${Date.now()}-${k++}`);
|
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; // Counter for generating unique IDs\n\nexport class NysAvatar extends LitElement {\n static styles = unsafeCSS(styles);\n\n
|
|
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; // Counter for generating unique IDs\n\nexport class NysAvatar extends LitElement {\n static styles = unsafeCSS(styles);\n\n // Properties\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 // Functions\n // Generate a unique ID if one is not provided\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 // Wait a tick to ensure slot assignment settled\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 // This function accounts for user set \"color\" prop and return the appropriate foreground contrast.\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.12.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.12.0"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"lit": "^3.3.1",
|