@nordhealth/components 3.7.0 → 3.8.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/custom-elements.json +546 -541
- package/lib/Avatar.js +1 -1
- package/lib/Avatar.js.map +1 -1
- package/lib/bundle.js +1 -1
- package/lib/bundle.js.map +1 -1
- package/lib/src/avatar/Avatar.d.ts +1 -0
- package/package.json +2 -2
package/lib/Avatar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as a,_ as r,s as t,x as e,A as o,e as i}from"./query-assigned-elements-92ce7494.js";import{n}from"./property-c78323b1.js";import{t as s}from"./state-d31c6912.js";import{s as
|
|
1
|
+
import{i as a,_ as r,s as t,x as e,A as o,e as i}from"./query-assigned-elements-92ce7494.js";import{n}from"./property-c78323b1.js";import{t as s}from"./state-d31c6912.js";import{s as v}from"./Component-2253424f.js";import{f as c}from"./fsm-50373df9.js";import{o as l}from"./observe-a9c6dfb6.js";import"./VisuallyHidden.js";import"./Icon.js";import"./if-defined-cccde88f.js";import"./directive-e9ce14b4.js";import"./cond-bb9ee891.js";import"./IconManager.js";const d=a`:host{--_n-avatar-color:var(--n-avatar-color, var(--n-color-text-weaker));--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-l));--_n-avatar-box-shadow:var(--n-avatar-box-shadow, none);--_n-avatar-text-color:var(--n-avatar-text-color, var(--n-color-text-on-accent));--_n-avatar-border-radius:var(--n-border-radius-circle);--_n-avatar-font-size:var(--n-font-size-xs);display:inline-flex;block-size:var(--_n-avatar-size);inline-size:var(--_n-avatar-size)}:host(:empty) .n-avatar-inner,:host(:not(:empty)) svg{display:none}:host(:empty){--_n-avatar-color:var(--n-avatar-color, var(--n-color-border))}.n-avatar{background:var(--_n-avatar-color);border-radius:var(--_n-avatar-border-radius);box-shadow:var(--_n-avatar-box-shadow);overflow:hidden;inline-size:100%;block-size:100%;display:grid;place-items:center;color:var(--_n-avatar-text-color);font-size:var(--_n-avatar-font-size);font-weight:var(--n-font-weight-active)}img,svg{inline-size:100%;block-size:auto;object-fit:cover}nord-icon{--_n-icon-size:calc(var(--_n-avatar-size) / 1.6)}.n-loading{display:none}:host([size="s"]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xs) * 2));--_n-avatar-font-size:calc(var(--n-font-size-xs) / 1.1)}:host([size="l"]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xl));--_n-avatar-font-size:var(--n-font-size-m)}:host([size=xl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xl) + var(--n-size-icon-s)));--_n-avatar-font-size:var(--n-font-size-xl)}:host([size=xxl]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xxl));--_n-avatar-font-size:var(--n-font-size-xxl)}:host([size=xxxl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xxl) + var(--n-size-icon-xl)));--_n-avatar-font-size:var(--n-font-size-xxxl)}:host([variant=square]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-accent));--_n-avatar-box-shadow:var(--n-avatar-box-shadow, var(--n-box-shadow), 0 0 0 1px rgba(255, 255, 255, 0.6));--_n-avatar-border-radius:var(--n-border-radius)}:host([icon]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-surface-lowered));--_n-avatar-text-color:var(--n-avatar-text-color, var(--n-color-text))}`,{transition:h}=c({initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}});let z=class extends t{constructor(){super(...arguments),this.state="initial",this.size="m",this.name="",this.icon="",this.variant="default"}render(){return e`<div class="n-avatar">${"initial"!==this.state?this.renderImage():o} ${"loaded"!==this.state?this.renderFallback():o}</div>`}handleSrcChange(){const a=this.src?"src-set":"src-clear";this.state=h(this.state,a)}renderImage(){return this.src?e`<slot hidden></slot><img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:o}renderFallback(){return e`<nord-visually-hidden>${this.name}</nord-visually-hidden><div class="n-avatar-inner" aria-hidden="true"><slot></slot></div>${this.icon?e`<nord-icon name="${this.icon}"></nord-icon>`:e`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--_n-avatar-color)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="#fff" opacity=".7"><circle cx="13.5" cy="30" r="13"></circle><circle cx="13.5" cy="11" r="5"></circle></g></svg>`}`}handleLoad(){this.state=h(this.state,"load")}handleError(){this.state=h(this.state,"error")}};z.styles=[v,d],r([s()],z.prototype,"state",void 0),r([n({reflect:!0})],z.prototype,"size",void 0),r([n({reflect:!0})],z.prototype,"src",void 0),r([n()],z.prototype,"name",void 0),r([n()],z.prototype,"icon",void 0),r([n({reflect:!0})],z.prototype,"variant",void 0),r([l("src")],z.prototype,"handleSrcChange",null),z=r([i("nord-avatar")],z);var x=z;export{x as default};
|
|
2
2
|
//# sourceMappingURL=Avatar.js.map
|
package/lib/Avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm, States } from \"../common/fsm.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../icon/Icon.js\"\n\nconst { transition } = fsm({\n initial: {\n \"src-set\": \"loading\",\n },\n loading: {\n load: \"loaded\",\n error: \"initial\",\n \"src-clear\": \"initial\",\n },\n loaded: {\n \"src-set\": \"loading\",\n \"src-clear\": \"initial\",\n },\n})\n\n/**\n * Avatar is used for showing a thumbnail representation of a single user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status ready\n * @category image\n *\n * @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).\n * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).\n * @cssprop [--n-avatar-box-shadow=none] - Controls the box shadow for the avatar.\n */\n\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n static styles = [componentStyle, style]\n\n @state() private state: States<typeof transition> = \"initial\"\n\n /**\n * The size of the avatar.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | \"xxxl\" = \"m\"\n\n /**\n * The URL of the avatar image uploaded by the user.\n */\n @property({ reflect: true }) src?: string\n\n /**\n * The name of the person or entity.\n */\n @property() name: string = \"\"\n\n /**\n * The fallback icon.\n */\n @property() icon: string = \"\"\n\n /**\n * The style variant of the avatar.\n */\n @property({ reflect: true }) variant: \"default\" | \"square\" = \"default\"\n\n render() {\n return html`\n <div class=\"n-avatar\">\n ${this.state !== \"initial\" ? this.renderImage() : nothing}\n ${this.state !== \"loaded\" ? this.renderFallback() : nothing}\n </div>\n `\n }\n\n @observe(\"src\")\n protected handleSrcChange() {\n const event = this.src ? \"src-set\" : \"src-clear\"\n this.state = transition(this.state, event)\n }\n\n protected renderImage() {\n return this.src\n ? html`\n <slot hidden></slot>\n <img\n class=\"n-${this.state}\"\n src=${this.src}\n @load=${this.handleLoad}\n @error=${this.handleError}\n alt=${this.name || \"\"}\n />\n `\n : nothing\n }\n\n protected renderFallback() {\n return html`\n <nord-visually-hidden>${this.name}</nord-visually-hidden>\n <div class=\"n-avatar-inner\" aria-hidden=\"true\">\n <slot></slot>\n </div>\n ${this.icon\n ? html`<nord-icon name=\"${this.icon}\"></nord-icon>`\n : html`\n <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 27 27\">\n <rect fill=\"var(--_n-avatar-color)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n <g fill=\"#fff\" opacity=\".7\">\n <circle cx=\"13.5\" cy=\"30\" r=\"13\"></circle>\n <circle cx=\"13.5\" cy=\"11\" r=\"5\"></circle>\n </g>\n </svg>\n `}\n `\n }\n\n private handleLoad() {\n this.state = transition(this.state, \"load\")\n }\n\n private handleError() {\n this.state = transition(this.state, \"error\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-avatar\": Avatar\n }\n}\n"],"names":["transition","fsm","initial","loading","load","error","loaded","Avatar","LitElement","constructor","this","state","size","name","icon","variant","render","html","renderImage","nothing","renderFallback","handleSrcChange","event","src","handleLoad","handleError","styles","componentStyle","style","__decorate","prototype","property","reflect","observe","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm, States } from \"../common/fsm.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../icon/Icon.js\"\n\nconst { transition } = fsm({\n initial: {\n \"src-set\": \"loading\",\n },\n loading: {\n load: \"loaded\",\n error: \"initial\",\n \"src-clear\": \"initial\",\n },\n loaded: {\n \"src-set\": \"loading\",\n \"src-clear\": \"initial\",\n },\n})\n\n/**\n * Avatar is used for showing a thumbnail representation of a single user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status ready\n * @category image\n *\n * @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).\n * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).\n * @cssprop [--n-avatar-box-shadow=none] - Controls the box shadow for the avatar.\n * @cssprop [--n-avatar-text-color=var(--n-color-text-on-accent)] - Controls the color of the avatar’s text and icon, using [color tokens](/tokens/#color).\n */\n\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n static styles = [componentStyle, style]\n\n @state() private state: States<typeof transition> = \"initial\"\n\n /**\n * The size of the avatar.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" | \"xxxl\" = \"m\"\n\n /**\n * The URL of the avatar image uploaded by the user.\n */\n @property({ reflect: true }) src?: string\n\n /**\n * The name of the person or entity.\n */\n @property() name: string = \"\"\n\n /**\n * The fallback icon.\n */\n @property() icon: string = \"\"\n\n /**\n * The style variant of the avatar.\n */\n @property({ reflect: true }) variant: \"default\" | \"square\" = \"default\"\n\n render() {\n return html`\n <div class=\"n-avatar\">\n ${this.state !== \"initial\" ? this.renderImage() : nothing}\n ${this.state !== \"loaded\" ? this.renderFallback() : nothing}\n </div>\n `\n }\n\n @observe(\"src\")\n protected handleSrcChange() {\n const event = this.src ? \"src-set\" : \"src-clear\"\n this.state = transition(this.state, event)\n }\n\n protected renderImage() {\n return this.src\n ? html`\n <slot hidden></slot>\n <img\n class=\"n-${this.state}\"\n src=${this.src}\n @load=${this.handleLoad}\n @error=${this.handleError}\n alt=${this.name || \"\"}\n />\n `\n : nothing\n }\n\n protected renderFallback() {\n return html`\n <nord-visually-hidden>${this.name}</nord-visually-hidden>\n <div class=\"n-avatar-inner\" aria-hidden=\"true\">\n <slot></slot>\n </div>\n ${this.icon\n ? html`<nord-icon name=\"${this.icon}\"></nord-icon>`\n : html`\n <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 27 27\">\n <rect fill=\"var(--_n-avatar-color)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n <g fill=\"#fff\" opacity=\".7\">\n <circle cx=\"13.5\" cy=\"30\" r=\"13\"></circle>\n <circle cx=\"13.5\" cy=\"11\" r=\"5\"></circle>\n </g>\n </svg>\n `}\n `\n }\n\n private handleLoad() {\n this.state = transition(this.state, \"load\")\n }\n\n private handleError() {\n this.state = transition(this.state, \"error\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-avatar\": Avatar\n }\n}\n"],"names":["transition","fsm","initial","loading","load","error","loaded","Avatar","LitElement","constructor","this","state","size","name","icon","variant","render","html","renderImage","nothing","renderFallback","handleSrcChange","event","src","handleLoad","handleError","styles","componentStyle","style","__decorate","prototype","property","reflect","observe","customElement"],"mappings":"0kFAUMA,WAAEA,GAAeC,EAAI,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAM,SACNC,MAAO,UACP,YAAa,WAEfC,OAAQ,CACN,UAAW,UACX,YAAa,aAkBF,IAAMC,EAAN,cAAqBC,EAArB,WAAAC,uBAGIC,KAAKC,MAA8B,UAKvBD,KAAIE,KAA4C,IAUjEF,KAAIG,KAAW,GAKfH,KAAII,KAAW,GAKEJ,KAAOK,QAAyB,SA2D9D,CAzDC,MAAAC,GACE,OAAOC,CAAI,yBAEU,YAAfP,KAAKC,MAAsBD,KAAKQ,cAAgBC,KACjC,WAAfT,KAAKC,MAAqBD,KAAKU,iBAAmBD,SAGzD,CAGS,eAAAE,GACR,MAAMC,EAAQZ,KAAKa,IAAM,UAAY,YACrCb,KAAKC,MAAQX,EAAWU,KAAKC,MAAOW,EACrC,CAES,WAAAJ,GACR,OAAOR,KAAKa,IACRN,CAAI,qCAGWP,KAAKC,eACVD,KAAKa,eACHb,KAAKc,uBACJd,KAAKe,qBACRf,KAAKG,MAAQ,OAGvBM,CACL,CAES,cAAAC,GACR,OAAOH,CAAI,yBACeP,KAAKG,gGAI3BH,KAAKI,KACHG,CAAI,oBAAoBP,KAAKI,qBAC7BG,CAAI,kSAUX,CAEO,UAAAO,GACNd,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,OACrC,CAEO,WAAAc,GACNf,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,QACrC,GArFMJ,EAAAmB,OAAS,CAACC,EAAgBC,GAEhBC,EAAA,CAAhBlB,KAA4DJ,EAAAuB,UAAA,aAAA,GAKhCD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAA2DzB,EAAAuB,UAAA,YAAA,GAKnDD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAoBzB,EAAAuB,UAAA,WAAA,GAK7BD,EAAA,CAAXE,KAA4BxB,EAAAuB,UAAA,YAAA,GAKjBD,EAAA,CAAXE,KAA4BxB,EAAAuB,UAAA,YAAA,GAKAD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAiDzB,EAAAuB,UAAA,eAAA,GAY5DD,EAAA,CADTI,EAAQ,QAIR1B,EAAAuB,UAAA,kBAAA,MA3CkBvB,EAAMsB,EAAA,CAD1BK,EAAc,gBACM3B,SAAAA"}
|