@nordhealth/components 4.10.0-alpha.0 → 4.11.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.
@@ -1,2 +1,2 @@
1
- const e=e=>fetch(`https://nordcdn.net/ds/icons/3.12.0-alpha.0/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
1
+ const e=e=>fetch(`https://nordcdn.net/ds/icons/3.13.0/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
2
2
  //# sourceMappingURL=IconManager.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"IconManager.js","sources":["../src/icon/IconManager.ts"],"sourcesContent":["export type IconResolver = (iconName: string) => Promise<string>\n\n// in dev we should just load from node_modules\nconst loadIcon: IconResolver = (name: string) =>\n import(`@nordhealth/icons/lib/assets/${name}.js`).then(({ default: svg }) => svg)\n\n// in prod we should load from the CDN, as a sensible default\nconst loadIconCdn: IconResolver = (name: string) =>\n fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => {\n if (!response.ok) {\n throw new TypeError(`NORD: unknown icon: '${name}'`)\n }\n\n return response.text()\n })\n\nexport class IconManager {\n private cache = new Map<string, string | Promise<string>>()\n resolver: IconResolver = process.env.NODE_ENV === \"development\" ? loadIcon : loadIconCdn\n\n resolve(name: string, onResolved: (svg: string) => void) {\n let cached = this.cache.get(name)\n\n // if it's a string, we can resolve immediately\n if (typeof cached === \"string\") {\n onResolved(cached)\n return\n }\n\n // if it's null, then we should initiate a fetch\n if (!cached) {\n cached = this.resolver(name)\n .catch(() => \"\")\n .then(svg => {\n // replace the promise with the resolved value, for faster resolution next time\n this.cache.set(name, svg)\n return svg\n })\n\n // store the promise so that duplicate icons do not make separate requests\n this.cache.set(name, cached)\n }\n\n cached.then(onResolved)\n }\n\n registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n let name: string | undefined\n let svg: string | undefined\n\n if (typeof iconOrName === \"string\") {\n name = iconOrName\n svg = icon\n } else {\n name = iconOrName.title\n svg = iconOrName.default\n }\n\n // handle errors\n if (!name) {\n throw new Error(\"name is required when registering an icon\")\n }\n if (!svg) {\n throw new Error(\"icon must not be empty\")\n }\n\n this.cache.set(name, svg)\n }\n\n clear() {\n this.cache.clear()\n }\n}\n"],"names":["loadIconCdn","name","fetch","then","response","ok","TypeError","text","IconManager","constructor","this","cache","Map","resolver","resolve","onResolved","cached","get","catch","svg","set","registerIcon","iconOrName","icon","title","default","Error","clear"],"mappings":"AAOA,MAAMA,EAA6BC,GACjCC,MAAM,sDAAmED,SAAYE,MAAKC,IACxF,IAAKA,EAASC,GACZ,MAAM,IAAIC,UAAU,wBAAwBL,MAG9C,OAAOG,EAASG,MAAM,UAGbC,EAAb,WAAAC,GACUC,KAAAC,MAAQ,IAAIC,IACpBF,KAAAG,SAA6Eb,CAsD9E,CApDC,OAAAc,CAAQb,EAAcc,GACpB,IAAIC,EAASN,KAAKC,MAAMM,IAAIhB,GAGN,iBAAXe,GAMNA,IACHA,EAASN,KAAKG,SAASZ,GACpBiB,OAAM,IAAM,KACZf,MAAKgB,IAEJT,KAAKC,MAAMS,IAAInB,EAAMkB,GACdA,KAIXT,KAAKC,MAAMS,IAAInB,EAAMe,IAGvBA,EAAOb,KAAKY,IAlBVA,EAAWC,EAmBd,CAED,YAAAK,CAAaC,EAAyDC,GACpE,IAAItB,EACAkB,EAWJ,GAT0B,iBAAfG,GACTrB,EAAOqB,EACPH,EAAMI,IAENtB,EAAOqB,EAAWE,MAClBL,EAAMG,EAAWG,UAIdxB,EACH,MAAM,IAAIyB,MAAM,6CAElB,IAAKP,EACH,MAAM,IAAIO,MAAM,0BAGlBhB,KAAKC,MAAMS,IAAInB,EAAMkB,EACtB,CAED,KAAAQ,GACEjB,KAAKC,MAAMgB,OACZ"}
1
+ {"version":3,"file":"IconManager.js","sources":["../src/icon/IconManager.ts"],"sourcesContent":["export type IconResolver = (iconName: string) => Promise<string>\n\n// in dev we should just load from node_modules\nconst loadIcon: IconResolver = (name: string) =>\n import(`@nordhealth/icons/lib/assets/${name}.js`).then(({ default: svg }) => svg)\n\n// in prod we should load from the CDN, as a sensible default\nconst loadIconCdn: IconResolver = (name: string) =>\n fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => {\n if (!response.ok) {\n throw new TypeError(`NORD: unknown icon: '${name}'`)\n }\n\n return response.text()\n })\n\nexport class IconManager {\n private cache = new Map<string, string | Promise<string>>()\n resolver: IconResolver = process.env.NODE_ENV === \"development\" ? loadIcon : loadIconCdn\n\n resolve(name: string, onResolved: (svg: string) => void) {\n let cached = this.cache.get(name)\n\n // if it's a string, we can resolve immediately\n if (typeof cached === \"string\") {\n onResolved(cached)\n return\n }\n\n // if it's null, then we should initiate a fetch\n if (!cached) {\n cached = this.resolver(name)\n .catch(() => \"\")\n .then(svg => {\n // replace the promise with the resolved value, for faster resolution next time\n this.cache.set(name, svg)\n return svg\n })\n\n // store the promise so that duplicate icons do not make separate requests\n this.cache.set(name, cached)\n }\n\n cached.then(onResolved)\n }\n\n registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n let name: string | undefined\n let svg: string | undefined\n\n if (typeof iconOrName === \"string\") {\n name = iconOrName\n svg = icon\n } else {\n name = iconOrName.title\n svg = iconOrName.default\n }\n\n // handle errors\n if (!name) {\n throw new Error(\"name is required when registering an icon\")\n }\n if (!svg) {\n throw new Error(\"icon must not be empty\")\n }\n\n this.cache.set(name, svg)\n }\n\n clear() {\n this.cache.clear()\n }\n}\n"],"names":["loadIconCdn","name","fetch","then","response","ok","TypeError","text","IconManager","constructor","this","cache","Map","resolver","resolve","onResolved","cached","get","catch","svg","set","registerIcon","iconOrName","icon","title","default","Error","clear"],"mappings":"AAOA,MAAMA,EAA6BC,GACjCC,MAAM,8CAAmED,SAAYE,MAAKC,IACxF,IAAKA,EAASC,GACZ,MAAM,IAAIC,UAAU,wBAAwBL,MAG9C,OAAOG,EAASG,MAAM,UAGbC,EAAb,WAAAC,GACUC,KAAAC,MAAQ,IAAIC,IACpBF,KAAAG,SAA6Eb,CAsD9E,CApDC,OAAAc,CAAQb,EAAcc,GACpB,IAAIC,EAASN,KAAKC,MAAMM,IAAIhB,GAGN,iBAAXe,GAMNA,IACHA,EAASN,KAAKG,SAASZ,GACpBiB,OAAM,IAAM,KACZf,MAAKgB,IAEJT,KAAKC,MAAMS,IAAInB,EAAMkB,GACdA,KAIXT,KAAKC,MAAMS,IAAInB,EAAMe,IAGvBA,EAAOb,KAAKY,IAlBVA,EAAWC,EAmBd,CAED,YAAAK,CAAaC,EAAyDC,GACpE,IAAItB,EACAkB,EAWJ,GAT0B,iBAAfG,GACTrB,EAAOqB,EACPH,EAAMI,IAENtB,EAAOqB,EAAWE,MAClBL,EAAMG,EAAWG,UAIdxB,EACH,MAAM,IAAIyB,MAAM,6CAElB,IAAKP,EACH,MAAM,IAAIO,MAAM,0BAGlBhB,KAAKC,MAAMS,IAAInB,EAAMkB,EACtB,CAED,KAAAQ,GACEjB,KAAKC,MAAMgB,OACZ"}
package/lib/bundle.js CHANGED
@@ -86,7 +86,7 @@ const ft=t=>(e,n)=>{void 0!==n?n.addInitializer((()=>{customElements.define(t,e)
86
86
  * Copyright 2017 Google LLC
87
87
  * SPDX-License-Identifier: BSD-3-Clause
88
88
  */
89
- let Be=class extends Mt{constructor(t){if(super(t),this.it=H,t.type!==Nt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===H||null==t)return this._t=void 0,this.it=t;if(t===j)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}};Be.directiveName="unsafeHTML",Be.resultType=1;const Ie=Lt(Be),Ne=t=>fetch(`https://nordcdn.net/ds/icons/3.12.0-alpha.0/assets/${t}.svg`).then((e=>{if(!e.ok)throw new TypeError(`NORD: unknown icon: '${t}'`);return e.text()}));const Le=i`:host{--_n-icon-size:var(--n-icon-size, var(--n-size-icon-m));display:inline-block;block-size:var(--_n-icon-size);inline-size:var(--_n-icon-size);min-inline-size:var(--_n-icon-size)}:host([size=xxs]){--_n-icon-size:var(--n-size-icon-xxs)}:host([size=xs]){--_n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--_n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--_n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;class Me{constructor(t,e,n,o){this.host=t,this.key=e,this.cb=n,this.lifecycle=o,t.addController(this)}hostUpdate(){"update"===this.lifecycle&&this.handle()}hostUpdated(){"updated"===this.lifecycle&&this.handle()}handle(){const{key:t,_value:e,host:n}=this,o=n[t];e!==o&&(this._value=o,this.cb.call(n,e,o,t))}}function Pe(t,e="update"){return function(n,o){n.constructor.addInitializer((n=>{const r=n[o];n.addController(new Me(n,t,r,e))}))}}var Fe;let Ue=Fe=class extends lt{constructor(){super(...arguments),this.name="",this.svg=""}static registerResolver(t){this.manager.resolver=t}static registerIcon(t,e){return this.manager.registerIcon(t,e)}render(){return q`<div role="${Zt(this.label,"img")}" style="${Zt(this.color,`color:${this.color}`)}" aria-label="${Jt(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${Ie(this.svg)}</div></div>`}handleNameChange(){this.name?Fe.manager.resolve(this.name,(t=>{this.svg=t})):this.svg=""}};Ue.styles=[$t,Le],Ue.manager=new class{constructor(){this.cache=new Map,this.resolver=Ne}resolve(t,e){let n=this.cache.get(t);"string"!=typeof n?(n||(n=this.resolver(t).catch((()=>"")).then((e=>(this.cache.set(t,e),e))),this.cache.set(t,n)),n.then(e)):e(n)}registerIcon(t,e){let n,o;if("string"==typeof t?(n=t,o=e):(n=t.title,o=t.default),!n)throw new Error("name is required when registering an icon");if(!o)throw new Error("icon must not be empty");this.cache.set(n,o)}clear(){this.cache.clear()}},mt([wt({reflect:!0})],Ue.prototype,"name",void 0),mt([wt({reflect:!0})],Ue.prototype,"size",void 0),mt([wt({reflect:!0})],Ue.prototype,"color",void 0),mt([wt({reflect:!0})],Ue.prototype,"label",void 0),mt([kt()],Ue.prototype,"svg",void 0),mt([Pe("name")],Ue.prototype,"handleNameChange",null),Ue=Fe=mt([ft("nord-icon")],Ue);var qe=Ue;qe.registerIcon(ge);const je=t=>t?`${t}px`:void 0;let He=class extends(Ee(ze(Se($e(Ce(re(oe(lt)))))))){constructor(){super(...arguments),this.startObserver=new Oe(this,(()=>this.startSlot)),this.endObserver=new Oe(this,(()=>this.endSlot)),this.direction=new Re(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=t=>{const e=t.target;this.disallowPattern&&function(t,e){const{value:n}=t,o=t.selectionStart,r=n.slice(0,o),i=n.slice(o,n.length),a=r.replace(e,""),s=a+i.replace(e,""),l=a.length;t.value=s,t.selectionStart=l,t.selectionEnd=l}(e,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const e="number"===this.type;return q`${this.renderLabel()}<div class="${pe({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${be({"--_n-input-start-inline-size":je(this.startObserver.inlineSize),"--_n-input-end-inline-size":je(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?q`<nord-icon name="navigation-search"></nord-icon>`:H}</slot><input ${Xt(this.textSelectableRef)} ${Xt(this.focusableRef)} id="${this.inputId}" class="n-input" type="${e||"unit"===this.type?"text":this.type}" inputmode="${Zt(e,"numeric")}" pattern="${Zt(e,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${Jt(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${Jt(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" @select="${this.handleSelect}" aria-describedby="${Jt(this.getDescribedBy())}" aria-invalid="${Jt(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:e}=this;if(e){const t=function(t){let e=t.querySelector('button[type="submit"]');!e&&t.id&&(e=t.getRootNode().querySelector(`button[form=${t.id}]`));return e}(e);setTimeout((()=>null==t?void 0:t.click()),0)}}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new fe("select"))}};He.styles=[$t,Ae,De,Te],mt([zt("slot[name='start']")],He.prototype,"startSlot",void 0),mt([zt("slot[name='end']")],He.prototype,"endSlot",void 0),mt([wt({reflect:!0})],He.prototype,"type",void 0),mt([wt({reflect:!0,type:Boolean})],He.prototype,"expand",void 0),mt([wt({reflect:!0,attribute:"disallow-pattern"})],He.prototype,"disallowPattern",void 0),He=mt([ft("nord-input")],He);var We=He;
89
+ let Be=class extends Mt{constructor(t){if(super(t),this.it=H,t.type!==Nt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===H||null==t)return this._t=void 0,this.it=t;if(t===j)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}};Be.directiveName="unsafeHTML",Be.resultType=1;const Ie=Lt(Be),Ne=t=>fetch(`https://nordcdn.net/ds/icons/3.13.0/assets/${t}.svg`).then((e=>{if(!e.ok)throw new TypeError(`NORD: unknown icon: '${t}'`);return e.text()}));const Le=i`:host{--_n-icon-size:var(--n-icon-size, var(--n-size-icon-m));display:inline-block;block-size:var(--_n-icon-size);inline-size:var(--_n-icon-size);min-inline-size:var(--_n-icon-size)}:host([size=xxs]){--_n-icon-size:var(--n-size-icon-xxs)}:host([size=xs]){--_n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--_n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--_n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;class Me{constructor(t,e,n,o){this.host=t,this.key=e,this.cb=n,this.lifecycle=o,t.addController(this)}hostUpdate(){"update"===this.lifecycle&&this.handle()}hostUpdated(){"updated"===this.lifecycle&&this.handle()}handle(){const{key:t,_value:e,host:n}=this,o=n[t];e!==o&&(this._value=o,this.cb.call(n,e,o,t))}}function Pe(t,e="update"){return function(n,o){n.constructor.addInitializer((n=>{const r=n[o];n.addController(new Me(n,t,r,e))}))}}var Fe;let Ue=Fe=class extends lt{constructor(){super(...arguments),this.name="",this.svg=""}static registerResolver(t){this.manager.resolver=t}static registerIcon(t,e){return this.manager.registerIcon(t,e)}render(){return q`<div role="${Zt(this.label,"img")}" style="${Zt(this.color,`color:${this.color}`)}" aria-label="${Jt(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${Ie(this.svg)}</div></div>`}handleNameChange(){this.name?Fe.manager.resolve(this.name,(t=>{this.svg=t})):this.svg=""}};Ue.styles=[$t,Le],Ue.manager=new class{constructor(){this.cache=new Map,this.resolver=Ne}resolve(t,e){let n=this.cache.get(t);"string"!=typeof n?(n||(n=this.resolver(t).catch((()=>"")).then((e=>(this.cache.set(t,e),e))),this.cache.set(t,n)),n.then(e)):e(n)}registerIcon(t,e){let n,o;if("string"==typeof t?(n=t,o=e):(n=t.title,o=t.default),!n)throw new Error("name is required when registering an icon");if(!o)throw new Error("icon must not be empty");this.cache.set(n,o)}clear(){this.cache.clear()}},mt([wt({reflect:!0})],Ue.prototype,"name",void 0),mt([wt({reflect:!0})],Ue.prototype,"size",void 0),mt([wt({reflect:!0})],Ue.prototype,"color",void 0),mt([wt({reflect:!0})],Ue.prototype,"label",void 0),mt([kt()],Ue.prototype,"svg",void 0),mt([Pe("name")],Ue.prototype,"handleNameChange",null),Ue=Fe=mt([ft("nord-icon")],Ue);var qe=Ue;qe.registerIcon(ge);const je=t=>t?`${t}px`:void 0;let He=class extends(Ee(ze(Se($e(Ce(re(oe(lt)))))))){constructor(){super(...arguments),this.startObserver=new Oe(this,(()=>this.startSlot)),this.endObserver=new Oe(this,(()=>this.endSlot)),this.direction=new Re(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=t=>{const e=t.target;this.disallowPattern&&function(t,e){const{value:n}=t,o=t.selectionStart,r=n.slice(0,o),i=n.slice(o,n.length),a=r.replace(e,""),s=a+i.replace(e,""),l=a.length;t.value=s,t.selectionStart=l,t.selectionEnd=l}(e,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const e="number"===this.type;return q`${this.renderLabel()}<div class="${pe({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${be({"--_n-input-start-inline-size":je(this.startObserver.inlineSize),"--_n-input-end-inline-size":je(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?q`<nord-icon name="navigation-search"></nord-icon>`:H}</slot><input ${Xt(this.textSelectableRef)} ${Xt(this.focusableRef)} id="${this.inputId}" class="n-input" type="${e||"unit"===this.type?"text":this.type}" inputmode="${Zt(e,"numeric")}" pattern="${Zt(e,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${Jt(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${Jt(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" @select="${this.handleSelect}" aria-describedby="${Jt(this.getDescribedBy())}" aria-invalid="${Jt(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:e}=this;if(e){const t=function(t){let e=t.querySelector('button[type="submit"]');!e&&t.id&&(e=t.getRootNode().querySelector(`button[form=${t.id}]`));return e}(e);setTimeout((()=>null==t?void 0:t.click()),0)}}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new fe("select"))}};He.styles=[$t,Ae,De,Te],mt([zt("slot[name='start']")],He.prototype,"startSlot",void 0),mt([zt("slot[name='end']")],He.prototype,"endSlot",void 0),mt([wt({reflect:!0})],He.prototype,"type",void 0),mt([wt({reflect:!0,type:Boolean})],He.prototype,"expand",void 0),mt([wt({reflect:!0,attribute:"disallow-pattern"})],He.prototype,"disallowPattern",void 0),He=mt([ft("nord-input")],He);var We=He;
90
90
  /**
91
91
  * @license
92
92
  * Copyright 2017 Google LLC