@nordhealth/components 3.14.0 → 3.14.1
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 +2081 -2081
- package/lib/Message.js +1 -1
- package/lib/Message.js.map +1 -1
- package/lib/bundle.js +1 -1
- package/lib/bundle.js.map +1 -1
- package/package.json +2 -2
package/lib/Message.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as o,x as r,e as
|
|
1
|
+
import{i as e,_ as o,x as r,e as t,s as i}from"./query-assigned-elements-15485e3d.js";import{e as n}from"./property-03f59dce.js";import{l as s}from"./if-defined-9b177db4.js";import{n as a}from"./ref-5526fb07.js";import{F as l}from"./FocusableMixin-4300e44e.js";import{s as c}from"./Component-420bbc41.js";import{s as d}from"./DropdownItem-579d8ef6.js";import{LocalizeController as m}from"./LocalizeController.js";import"./directive-de55b00a.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const p=e`:host{--_n-message-border-color:var(--n-message-border-color, var(--n-color-border));padding:var(--n-space-s);border-block-end:1px solid var(--_n-message-border-color)}.n-message{flex-direction:column;gap:var(--n-space-xs);align-items:flex-start;padding-inline-start:var(--n-space-xl);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-line-height-heading);margin:0;color:var(--n-color-text);position:relative}.n-message:hover{color:var(--n-color-text-on-accent)}slot[name=footer]{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);line-height:var(--n-line-height-heading)}:host([highlight]) .n-message::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.15;background:var(--n-color-accent);filter:brightness(150%)}.n-unread{position:absolute;min-inline-size:var(--n-size-icon-xxs);min-block-size:var(--n-size-icon-xxs);inset-block-start:calc(var(--n-space-s) + var(--n-space-xs));inset-inline-start:var(--n-space-m);background:var(--n-color-accent);border-radius:var(--n-border-radius-circle)}.n-message:hover .n-unread{background:var(--n-color-text-on-accent)}`;let f=class extends(l(i)){constructor(){super(...arguments),this.localize=new m(this)}render(){return(this.href?e=>r`<a href="${s(this.href)}" ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</a>`:e=>r`<button ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</button>`)(r`<div role="img" class="n-unread" aria-label="${this.localize.term("unreadLabel")}" ?hidden="${!this.unread}"></div><slot></slot><slot name="footer"></slot>`)}};f.styles=[c,d,p],o([n({reflect:!0})],f.prototype,"href",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([t("nord-message")],f);var h=f;export{h as default};
|
|
2
2
|
//# sourceMappingURL=Message.js.map
|
package/lib/Message.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.js","sources":["../src/message/Message.ts"],"sourcesContent":["import { LitElement, html, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport itemStyle from \"../dropdown-item/DropdownItem.css\"\nimport style from \"./Message.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\n/**\n * Message represents a specific item within a collection,\n * such as notifications, tasks or conversations. Message\n * can be placed directly inside a dropdown component.\n *\n * @status new\n * @category action\n * @slot - The message content.\n * @slot footer - Used to place content after the message. Typically used for a timestamp.\n *\n * @cssprop [--n-message-border-color=var(--n-color-border)] - Controls the border color of the message, using our [color tokens](/tokens/#color).\n *\n * @localization unreadLabel - Label for the unread messages.\n */\n@customElement(\"nord-message\")\nexport default class Message extends FocusableMixin(LitElement) {\n static styles = [componentStyle, itemStyle, style]\n\n private localize = new LocalizeController<\"nord-message\">(this)\n\n /**\n * The url the message should link to.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * Highlight the message visually. This is meant for highlighting\n * a new message that just appeared. Highlight style should be removed\n * after the user has seen the message and there’s been a timeout of\n * e.g. 30 seconds.\n */\n @property({ reflect: true, type: Boolean }) highlight?: boolean\n\n /**\n * Mark the message as unread. By default messages are read.\n */\n @property({ reflect: true, type: Boolean }) unread?: boolean\n\n // TODO: dropdown-item and message component have the same logic\n // for determining if it renders a link vs button. Perhaps we\n // can later see if both can use a mixin or similar instead?\n render() {\n const link = (content: TemplateResult) =>\n html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</a>`\n const button = (content: TemplateResult) =>\n html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</button>`\n\n const container = this.href ? link : button\n\n return container(html`\n <div role=\"img\" class=\"n-unread\" aria-label=${this.localize.term(\"unreadLabel\")} ?hidden=${!this.unread}></div>\n <slot></slot>\n <slot name=\"footer\"></slot>\n `)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-message\": Message\n }\n}\n"],"names":["Message","FocusableMixin","LitElement","constructor","this","localize","LocalizeController","render","href","content","html","ifDefined","ref","focusableRef","term","unread","styles","componentStyle","itemStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Message.js","sources":["../src/message/Message.ts"],"sourcesContent":["import { LitElement, html, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport itemStyle from \"../dropdown-item/DropdownItem.css\"\nimport style from \"./Message.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\n/**\n * Message represents a specific item within a collection,\n * such as notifications, tasks or conversations. Message\n * can be placed directly inside a dropdown component.\n *\n * @status new\n * @category action\n * @slot - The message content.\n * @slot footer - Used to place content after the message. Typically used for a timestamp.\n *\n * @cssprop [--n-message-border-color=var(--n-color-border)] - Controls the border color of the message, using our [color tokens](/tokens/#color).\n *\n * @localization unreadLabel - Label for the unread messages.\n */\n@customElement(\"nord-message\")\nexport default class Message extends FocusableMixin(LitElement) {\n static styles = [componentStyle, itemStyle, style]\n\n private localize = new LocalizeController<\"nord-message\">(this)\n\n /**\n * The url the message should link to.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * Highlight the message visually. This is meant for highlighting\n * a new message that just appeared. Highlight style should be removed\n * after the user has seen the message and there’s been a timeout of\n * e.g. 30 seconds.\n */\n @property({ reflect: true, type: Boolean }) highlight?: boolean\n\n /**\n * Mark the message as unread. By default messages are read.\n */\n @property({ reflect: true, type: Boolean }) unread?: boolean\n\n // TODO: dropdown-item and message component have the same logic\n // for determining if it renders a link vs button. Perhaps we\n // can later see if both can use a mixin or similar instead?\n render() {\n const link = (content: TemplateResult) =>\n html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</a>`\n const button = (content: TemplateResult) =>\n html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item n-message\">${content}</button>`\n\n const container = this.href ? link : button\n\n return container(html`\n <div role=\"img\" class=\"n-unread\" aria-label=${this.localize.term(\"unreadLabel\")} ?hidden=${!this.unread}></div>\n <slot></slot>\n <slot name=\"footer\"></slot>\n `)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-message\": Message\n }\n}\n"],"names":["Message","FocusableMixin","LitElement","constructor","this","localize","LocalizeController","render","href","content","html","ifDefined","ref","focusableRef","term","unread","styles","componentStyle","itemStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"k+DA0Be,IAAMA,EAAN,cAAsBC,EAAeC,IAArCC,kCAGLC,KAAAC,SAAW,IAAIC,EAAmCF,KAqC3D,CAdCG,SAQE,OAFkBH,KAAKI,KALTC,GACZC,CAAI,YAAWC,EAAUP,KAAKI,UAASI,EAAIR,KAAKS,mDAAmDJ,QACrFA,GACdC,CAAI,WAAWE,EAAIR,KAAKS,mDAAmDJ,cAI5DC,CAAI,gDAC2BN,KAAKC,SAASS,KAAK,6BAA2BV,KAAKW,yDAIpG,GAtCMf,EAAMgB,OAAG,CAACC,EAAgBC,EAAWC,GAOfC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBtB,EAAAuB,UAAA,YAAA,GAQEH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA8BzB,EAAAuB,UAAA,iBAAA,GAKnBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAA2BzB,EAAAuB,UAAA,cAAA,GArBzCvB,EAAOoB,EAAA,CAD3BM,EAAc,iBACM1B,SAAAA"}
|