@nordhealth/components 1.0.0-beta.13 → 1.0.0-beta.14
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 +396 -378
- package/lib/Avatar.js +1 -1
- package/lib/Avatar.js.map +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/Input.js +1 -1
- package/lib/Radio.js +1 -1
- package/lib/Radio.js.map +1 -1
- package/lib/Select.js +1 -1
- package/lib/Select.js.map +1 -1
- package/lib/Stack.js +1 -1
- package/lib/Stack.js.map +1 -1
- package/lib/{TextField-b4155167.js → TextField-00822066.js} +2 -2
- package/lib/TextField-00822066.js.map +1 -0
- package/lib/Textarea.js +1 -1
- package/lib/Tooltip.js +1 -1
- package/lib/Tooltip.js.map +1 -1
- package/lib/bundle.js +2 -2
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/stack/Stack.d.ts +4 -0
- package/package.json +2 -2
- package/lib/TextField-b4155167.js.map +0 -1
package/lib/Avatar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,s as r,$ as s,w as a}from"./lit-element-9646ab7e.js";import{l as o}from"./if-defined-2a4c6dbc.js";import{e as n}from"./property-03f59dce.js";import{t as l}from"./state-70f38ceb.js";import{s as c}from"./Component-6762b5eb.js";const d=i`:host{--n-avatar-size:var(--n-size-icon-l);display:inline-flex;block-size:var(--n-avatar-size);inline-size:var(--n-avatar-size)}.n-avatar{background:var(--n-color-status-info);border-radius:var(--n-border-radius-circle);overflow:hidden;inline-size:100%;block-size:100%}img,svg{inline-size:100%;block-size:auto;object-fit:cover}.n-loading{display:none}:host([size="l"]){--n-avatar-size:var(--n-size-icon-xl)}:host([size=xl]){--n-avatar-size:var(--n-size-icon-xxl)}`;const{transition:h}=(v={initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}},{transition:(e,t)=>v[e][t]||e});var v;let m=class extends r{constructor(){super(...arguments),this.state="initial",this.size="m",this.name=""}willUpdate(e){if(e.has("src")){const e=this.src?"src-set":"src-clear";this.state=h(this.state,e)}}render(){return s`<div class="n-avatar">${"initial"!==this.state?this.renderImage():a} ${"loaded"!==this.state?this.renderFallback():a}</div>`}renderImage(){return this.src?s`<img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:a}renderFallback(){return s`<svg aria-label="${this.name}" role="${o(this.name?"img":void 0)}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--n-color-status-info)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="
|
|
1
|
+
import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,s as r,$ as s,w as a}from"./lit-element-9646ab7e.js";import{l as o}from"./if-defined-2a4c6dbc.js";import{e as n}from"./property-03f59dce.js";import{t as l}from"./state-70f38ceb.js";import{s as c}from"./Component-6762b5eb.js";const d=i`:host{--n-avatar-size:var(--n-size-icon-l);display:inline-flex;block-size:var(--n-avatar-size);inline-size:var(--n-avatar-size)}.n-avatar{background:var(--n-color-status-info);border-radius:var(--n-border-radius-circle);overflow:hidden;inline-size:100%;block-size:100%}img,svg{inline-size:100%;block-size:auto;object-fit:cover}.n-loading{display:none}:host([size="l"]){--n-avatar-size:var(--n-size-icon-xl)}:host([size=xl]){--n-avatar-size:var(--n-size-icon-xxl)}`;const{transition:h}=(v={initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}},{transition:(e,t)=>v[e][t]||e});var v;let m=class extends r{constructor(){super(...arguments),this.state="initial",this.size="m",this.name=""}willUpdate(e){if(e.has("src")){const e=this.src?"src-set":"src-clear";this.state=h(this.state,e)}}render(){return s`<div class="n-avatar">${"initial"!==this.state?this.renderImage():a} ${"loaded"!==this.state?this.renderFallback():a}</div>`}renderImage(){return this.src?s`<img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:a}renderFallback(){return s`<svg aria-label="${this.name}" role="${o(this.name?"img":void 0)}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--n-color-status-info)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="#fff" opacity=".5"><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")}};m.styles=[c,d],e([l()],m.prototype,"state",void 0),e([n({reflect:!0})],m.prototype,"size",void 0),e([n({reflect:!0})],m.prototype,"src",void 0),e([n()],m.prototype,"name",void 0),m=e([t("nord-avatar")],m);var f=m;export{f 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","../src/common/fsm.ts"],"sourcesContent":["// eslint-disable-next-line max-classes-per-file\nimport { LitElement, html, PropertyValues, nothing } from \"lit\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm } from \"../common/fsm.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\ntype States = Parameters<typeof transition>[0]\n\n/**\n * Avatar is used for showing a thumbnail representation of a user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status new\n * @category image\n */\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n static styles = [componentStyle, style]\n\n @state() private state: States = \"initial\"\n\n /**\n * The size of the avatar.\n */\n @property({ reflect: true }) size: \"m\" | \"l\" | \"xl\" = \"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.\n */\n @property() name: string = \"\"\n\n protected willUpdate(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has(\"src\")) {\n const event = this.src ? \"src-set\" : \"src-clear\"\n this.state = transition(this.state, event)\n }\n }\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 protected renderImage() {\n return this.src\n ? html`\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 renderFallback() {\n return html`\n <svg\n aria-label=${this.name}\n role=${ifDefined(this.name ? \"img\" : undefined)}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 27 27\"\n >\n <rect fill=\"var(--n-color-status-info)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n <g fill=\"
|
|
1
|
+
{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts","../src/common/fsm.ts"],"sourcesContent":["// eslint-disable-next-line max-classes-per-file\nimport { LitElement, html, PropertyValues, nothing } from \"lit\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm } from \"../common/fsm.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\ntype States = Parameters<typeof transition>[0]\n\n/**\n * Avatar is used for showing a thumbnail representation of a user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status new\n * @category image\n */\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n static styles = [componentStyle, style]\n\n @state() private state: States = \"initial\"\n\n /**\n * The size of the avatar.\n */\n @property({ reflect: true }) size: \"m\" | \"l\" | \"xl\" = \"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.\n */\n @property() name: string = \"\"\n\n protected willUpdate(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has(\"src\")) {\n const event = this.src ? \"src-set\" : \"src-clear\"\n this.state = transition(this.state, event)\n }\n }\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 protected renderImage() {\n return this.src\n ? html`\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 renderFallback() {\n return html`\n <svg\n aria-label=${this.name}\n role=${ifDefined(this.name ? \"img\" : undefined)}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 27 27\"\n >\n <rect fill=\"var(--n-color-status-info)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n <g fill=\"#fff\" opacity=\".5\">\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 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","type MemberUnion<T> = T extends any ? keyof T : never\n\nexport function fsm<TStates extends keyof TTransitions, TTransitions extends Record<TStates, Record<string, TStates>>>(\n config: TTransitions\n) {\n return {\n transition(currentState: TStates, event: MemberUnion<TTransitions[TStates]>) {\n const nextState = config[currentState][event]\n return nextState || currentState\n },\n }\n}\n"],"names":["transition","config","initial","loading","load","error","loaded","currentState","event","Avatar","LitElement","constructor","this","willUpdate","changedProperties","has","src","state","render","html","renderImage","nothing","renderFallback","handleLoad","handleError","name","ifDefined","undefined","componentStyle","style","__decorate","property","reflect","customElement"],"mappings":"2wBASA,MAAMA,WAAEA,ICNNC,EDMyB,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAM,SACNC,MAAO,UACP,YAAa,WAEfC,OAAQ,CACN,UAAW,UACX,YAAa,YCfR,CACLN,WAAU,CAACO,EAAuBC,IACdP,EAAOM,GAAcC,IACnBD,QALxBN,ED+BF,IAAqBQ,EAArB,cAAoCC,EAApCC,kCAGmBC,WAAgB,UAKJA,UAAyB,IAU1CA,UAAe,GAEjBC,WAAWC,GACnB,GAAIA,EAAkBC,IAAI,OAAQ,CAChC,MAAMP,EAAQI,KAAKI,IAAM,UAAY,YACrCJ,KAAKK,MAAQjB,EAAWY,KAAKK,MAAOT,IAIxCU,SACE,OAAOC,CAAI,yBAEU,YAAfP,KAAKK,MAAsBL,KAAKQ,cAAgBC,KACjC,WAAfT,KAAKK,MAAqBL,KAAKU,iBAAmBD,UAKhDD,cACR,OAAOR,KAAKI,IACRG,CAAI,iBAEWP,KAAKK,eACVL,KAAKI,eACHJ,KAAKW,uBACJX,KAAKY,qBACRZ,KAAKa,MAAQ,OAGvBJ,EAGNC,iBACE,OAAOH,CAAI,oBAEMP,KAAKa,eACXC,EAAUd,KAAKa,KAAO,WAAQE,iRAanCJ,aACNX,KAAKK,MAAQjB,EAAWY,KAAKK,MAAO,QAG9BO,cACNZ,KAAKK,MAAQjB,EAAWY,KAAKK,MAAO,WAvE/BR,SAAS,CAACmB,EAAgBC,GAExBC,GAARb,iCAK4Ba,GAA5BC,EAAS,CAAEC,SAAS,gCAKQF,GAA5BC,EAAS,CAAEC,SAAS,+BAKTF,GAAXC,gCAlBkBtB,KADpBwB,EAAc,gBACMxB,SAAAA"}
|
package/lib/DatePicker.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,$ as a,w as o,s as n}from"./lit-element-9646ab7e.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{S as l,i as d,a as c}from"./Calendar-664c2b4c.js";import{o as p}from"./class-map-61e9e8c1.js";import{n as h}from"./ref-eb5cfa10.js";import{l as m}from"./if-defined-2a4c6dbc.js";import{F as u}from"./FocusableMixin-98e13999.js";import{F as b}from"./FormAssociatedMixin-bfbbe389.js";import{I as v}from"./InputMixin-94d15730.js";import{k as g,p as f,a as y}from"./dates-ccf5a897.js";import{N as w}from"./events-731d0007.js";import"./Button.js";import x from"./Icon.js";import"./VisuallyHidden.js";import{s as k}from"./Component-6762b5eb.js";import{s as z}from"./FormField-b1c18e6e.js";import{s as j}from"./TextField-b4155167.js";import{isoAdapter as $}from"./date-adapter.js";import D from"./date-localization.js";import{L as F}from"./LightDismissController-cc5b4bf2.js";import"./number-e7cd246c.js";import"./directive-de55b00a.js";import"./directive-helpers-e7b6bf4b.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-82794ee9.js";import"./calendar-localization.js";import"./month-view.js";import"./collection-f3631dc8.js";import"./DateSelectEvent.js";import"./SlotController-5bfc47d1.js";import"./LightDomController-f56fa1a4.js";import"./unsafe-html-4da54dd2.js";import"./ShortcutController-93173ff4.js";var L=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z"/></svg>',title:"interface-close-small",tags:"nordicon interface close remove small cross delete erase symbol"});const C=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);font-size:var(--n-font-size-m);position:relative}.n-input-container{inline-size:fit-content}:host([expand]) .n-input-container{inline-size:100%}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-primary);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-dropdown)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-dropdown)}nord-calendar{box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform .4s ease,opacity .4s ease,visibility .4s ease;visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding:0}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0;z-index:10}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-primary);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`;x.registerIcon(L),x.registerIcon(A);const B=/[^0-9./-]+/g,E=()=>!1;let I=class extends(b(v(u(n)))){constructor(){super(...arguments),this.dismiss=new F(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new l(this,{target:()=>this.dialog,matchesGesture:d,onSwipeEnd:()=>this.hide(!1)}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.localization=D,this.dateAdapter=$,this.isDateDisabled=E,this.handleDaySelect=e=>{this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new w("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new w("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,a=e.selectionStart,o=i.slice(0,a),n=i.slice(a,i.length),r=o.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,B),this.dispatchEvent(new w("input"));const i=this.dateAdapter.parse(t.value,g);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return f(this.value)}set valueAsDate(e){this.value=e?y(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?y(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new w("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new w("close")),e&&this.toggleButton.focus()}willUpdate(e){e.has("localization")&&this.createDateFormatters()}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localization.locale,{day:"numeric",month:"long",year:"numeric"})}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return a`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${this.name}" .value="${t}" placeholder="${m(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${h(this.focusableRef)} aria-invalid="${m(this.error?"true":void 0)}" aria-describedby="${m(this.getDescribedBy())}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${D.buttonLabel} ${e?a`<span>, ${D.selectedDateMessage} ${this.dateFormatLong.format(e)}</span>`:o}</nord-visually-hidden></button></div>${this.renderError()}<div class="${p({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localization.calendarHeading}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localization.closeLabel}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .localization="${this.localization}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @nord-select="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?y(e):"",this.dispatchEvent(new w("change"))}};I.styles=[k,z,j,C],e([c(".n-date-toggle",!0)],I.prototype,"toggleButton",void 0),e([c(".n-date-close",!0)],I.prototype,"closeButton",void 0),e([c("nord-calendar",!0)],I.prototype,"calendar",void 0),e([c('[role="dialog"]',!0)],I.prototype,"dialog",void 0),e([s()],I.prototype,"open",void 0),e([r()],I.prototype,"value",void 0),e([r()],I.prototype,"min",void 0),e([r()],I.prototype,"max",void 0),e([r()],I.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],I.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],I.prototype,"localization",void 0),e([r({attribute:!1})],I.prototype,"dateAdapter",void 0),e([r({attribute:!1})],I.prototype,"isDateDisabled",void 0),I=e([t("nord-date-picker")],I);var O=I;export{O as default};
|
|
1
|
+
import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,$ as a,w as o,s as n}from"./lit-element-9646ab7e.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{S as l,i as d,a as c}from"./Calendar-664c2b4c.js";import{o as p}from"./class-map-61e9e8c1.js";import{n as h}from"./ref-eb5cfa10.js";import{l as m}from"./if-defined-2a4c6dbc.js";import{F as u}from"./FocusableMixin-98e13999.js";import{F as b}from"./FormAssociatedMixin-bfbbe389.js";import{I as v}from"./InputMixin-94d15730.js";import{k as g,p as f,a as y}from"./dates-ccf5a897.js";import{N as w}from"./events-731d0007.js";import"./Button.js";import x from"./Icon.js";import"./VisuallyHidden.js";import{s as k}from"./Component-6762b5eb.js";import{s as z}from"./FormField-b1c18e6e.js";import{s as j}from"./TextField-00822066.js";import{isoAdapter as $}from"./date-adapter.js";import D from"./date-localization.js";import{L as F}from"./LightDismissController-cc5b4bf2.js";import"./number-e7cd246c.js";import"./directive-de55b00a.js";import"./directive-helpers-e7b6bf4b.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-82794ee9.js";import"./calendar-localization.js";import"./month-view.js";import"./collection-f3631dc8.js";import"./DateSelectEvent.js";import"./SlotController-5bfc47d1.js";import"./LightDomController-f56fa1a4.js";import"./unsafe-html-4da54dd2.js";import"./ShortcutController-93173ff4.js";var L=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z"/></svg>',title:"interface-close-small",tags:"nordicon interface close remove small cross delete erase symbol"});const C=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);font-size:var(--n-font-size-m);position:relative}.n-input-container{inline-size:fit-content}:host([expand]) .n-input-container{inline-size:100%}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-primary);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-dropdown)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-dropdown)}nord-calendar{box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform .4s ease,opacity .4s ease,visibility .4s ease;visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding:0}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0;z-index:10}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-primary);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`;x.registerIcon(L),x.registerIcon(A);const B=/[^0-9./-]+/g,E=()=>!1;let I=class extends(b(v(u(n)))){constructor(){super(...arguments),this.dismiss=new F(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new l(this,{target:()=>this.dialog,matchesGesture:d,onSwipeEnd:()=>this.hide(!1)}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.localization=D,this.dateAdapter=$,this.isDateDisabled=E,this.handleDaySelect=e=>{this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new w("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new w("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,a=e.selectionStart,o=i.slice(0,a),n=i.slice(a,i.length),r=o.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,B),this.dispatchEvent(new w("input"));const i=this.dateAdapter.parse(t.value,g);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return f(this.value)}set valueAsDate(e){this.value=e?y(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?y(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new w("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new w("close")),e&&this.toggleButton.focus()}willUpdate(e){e.has("localization")&&this.createDateFormatters()}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localization.locale,{day:"numeric",month:"long",year:"numeric"})}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return a`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${this.name}" .value="${t}" placeholder="${m(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${h(this.focusableRef)} aria-invalid="${m(this.error?"true":void 0)}" aria-describedby="${m(this.getDescribedBy())}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${D.buttonLabel} ${e?a`<span>, ${D.selectedDateMessage} ${this.dateFormatLong.format(e)}</span>`:o}</nord-visually-hidden></button></div>${this.renderError()}<div class="${p({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localization.calendarHeading}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localization.closeLabel}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .localization="${this.localization}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @nord-select="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?y(e):"",this.dispatchEvent(new w("change"))}};I.styles=[k,z,j,C],e([c(".n-date-toggle",!0)],I.prototype,"toggleButton",void 0),e([c(".n-date-close",!0)],I.prototype,"closeButton",void 0),e([c("nord-calendar",!0)],I.prototype,"calendar",void 0),e([c('[role="dialog"]',!0)],I.prototype,"dialog",void 0),e([s()],I.prototype,"open",void 0),e([r()],I.prototype,"value",void 0),e([r()],I.prototype,"min",void 0),e([r()],I.prototype,"max",void 0),e([r()],I.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],I.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],I.prototype,"localization",void 0),e([r({attribute:!1})],I.prototype,"dateAdapter",void 0),e([r({attribute:!1})],I.prototype,"isDateDisabled",void 0),I=e([t("nord-date-picker")],I);var O=I;export{O as default};
|
|
2
2
|
//# sourceMappingURL=DatePicker.js.map
|
package/lib/Input.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,w as s,$ as r,s as n}from"./lit-element-9646ab7e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-2a4c6dbc.js";import{n as l}from"./ref-eb5cfa10.js";import{o as d}from"./unsafe-html-4da54dd2.js";import{F as p}from"./FocusableMixin-98e13999.js";import{F as c}from"./FormAssociatedMixin-bfbbe389.js";import{I as m}from"./InputMixin-94d15730.js";import{s as h}from"./Component-6762b5eb.js";import{s as b}from"./FormField-b1c18e6e.js";import{s as u}from"./TextField-
|
|
1
|
+
import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,w as s,$ as r,s as n}from"./lit-element-9646ab7e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-2a4c6dbc.js";import{n as l}from"./ref-eb5cfa10.js";import{o as d}from"./unsafe-html-4da54dd2.js";import{F as p}from"./FocusableMixin-98e13999.js";import{F as c}from"./FormAssociatedMixin-bfbbe389.js";import{I as m}from"./InputMixin-94d15730.js";import{s as h}from"./Component-6762b5eb.js";import{s as b}from"./FormField-b1c18e6e.js";import{s as u}from"./TextField-00822066.js";import{S as f}from"./SlotController-5bfc47d1.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const v=i`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}slot[name=before]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=before]:not([hidden])+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s);inline-size:var(--n-size-icon-s)}`;let y=class extends(c(m(p(n)))){constructor(){super(...arguments),this.beforeSlot=new f(this,"before"),this.type="text"}render(){var e;const t="search"===this.type||this.beforeSlot.hasContent,i="number"===this.type,n="search"===this.type?d('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):s;return r`${this.renderLabel()}<div class="n-input-container"><slot name="before" ?hidden="${!t}">${n}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${i?"text":this.type}" inputmode="${a(i?"numeric":void 0)}" pattern="${a(i?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false"></div>${this.renderError()}`}handleKeydown(e){var t;"Enter"===e.key&&this.form&&(null===(t=this.form.querySelector('button[type="submit"]'))||void 0===t||t.click())}};y.styles=[h,b,u,v],e([o()],y.prototype,"type",void 0),y=e([t("nord-input")],y);var $=y;export{$ as default};
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
package/lib/Radio.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{w as i,r as o,$ as n,s as r}from"./lit-element-9646ab7e.js";import{e as s}from"./property-03f59dce.js";import{l as a}from"./if-defined-2a4c6dbc.js";import{n as l}from"./ref-eb5cfa10.js";import{L as d}from"./LightDomController-f56fa1a4.js";import{S as c}from"./SlotController-5bfc47d1.js";import{F as h}from"./FocusableMixin-98e13999.js";import{F as p}from"./FormAssociatedMixin-bfbbe389.js";import{I as
|
|
1
|
+
import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{w as i,r as o,$ as n,s as r}from"./lit-element-9646ab7e.js";import{e as s}from"./property-03f59dce.js";import{l as a}from"./if-defined-2a4c6dbc.js";import{n as l}from"./ref-eb5cfa10.js";import{L as d}from"./LightDomController-f56fa1a4.js";import{S as c}from"./SlotController-5bfc47d1.js";import{F as h}from"./FocusableMixin-98e13999.js";import{F as p}from"./FormAssociatedMixin-bfbbe389.js";import{I as m}from"./InputMixin-94d15730.js";import{s as b}from"./Component-6762b5eb.js";import{s as u}from"./FormField-b1c18e6e.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";class v extends c{constructor(e,t){super(e,t.slotName),this.options=t,this.onChange=()=>{this.syncLightDom()},this.options=t,this.renderHook=document.createComment(this.slotName),this.lightDom=new d(e,{render:()=>this.hasContent?i:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}hostDisconnected(){super.hostDisconnected(),this.renderHook.remove()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const f=o`:host{--n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height);font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--n-radio-accent-color:var(--n-color-primary);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;border:1px solid var(--n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;display:block!important;inline-size:var(--n-radio-size)!important;block-size:var(--n-radio-size)!important;cursor:pointer}::slotted(input:checked){--n-radio-border-color:var(--n-color-primary);background:var(--n-radio-accent-color)}::slotted(input[aria-invalid]){--n-radio-accent-color:var(--n-color-status-danger);--n-radio-border-color:var(--n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-primary)}:host([disabled]) ::slotted(input){--n-radio-accent-color:var(--n-color-border-strong);--n-radio-border-color:var(--n-radio-accent-color);background:var(--n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}.n-dot{--n-radio-dot-size:var(--n-space-s);--n-radio-dot-inset:calc((var(--n-radio-size) - var(--n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--n-radio-dot-size);block-size:var(--n-radio-dot-size);background-color:var(--n-color-text-inverse);inset-inline-start:var(--n-radio-dot-inset);inset-block-start:var(--n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{padding-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}`;let g=0;const k=e=>`nord-radio-${e}-${g++}`;let y=class extends(p(m(h(r)))){constructor(){super(...arguments),this.inputId=k("input"),this.hintId=k("hint"),this.errorId=k("error"),this.hintSlot=new v(this,{slotName:"hint",render:()=>this.hint?n`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:i,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new v(this,{slotName:"label",render:()=>this.label?n`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:i,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new v(this,{slotName:"error",render:()=>this.error?n`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:i,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new d(this,{render:()=>n`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}willUpdate(e){if(e.has("checked")){!e.get("checked")&&this.checked&&this.uncheckSiblings()}}render(){return n`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?n`<div class="n-dot"></div>`:i}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,t=()=>n`<slot name="label"></slot><slot name="label-internal"></slot>`,o=e=>n`<nord-visually-hidden>${e}</nord-visually-hidden>`,e?o(t()):t()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var e,t,o}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};y.styles=[b,u,f],e([s({type:Boolean,reflect:!0})],y.prototype,"checked",void 0),y=e([t("nord-radio")],y);var $=y;export{$ as default};
|
|
2
2
|
//# sourceMappingURL=Radio.js.map
|
package/lib/Radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../src/common/controllers/LightSlotController.ts","../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n slotName: string\n render: () => unknown\n syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n private renderHook: Comment\n private lightDom: LightDomController\n\n constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n super(host, options.slotName)\n this.options = options\n\n // we need a node to hook onto for rendering\n // without this, multiple controllers rendering to the light DOM\n // will overwrite each others' content\n this.renderHook = document.createComment(this.slotName)\n\n this.lightDom = new LightDomController(host, {\n render: () => (this.hasContent ? nothing : this.options.render()),\n renderOptions: { renderBefore: this.renderHook },\n })\n }\n\n hostConnected() {\n super.hostConnected()\n this.host.appendChild(this.renderHook)\n this.syncLightDom()\n }\n\n hostDisconnected() {\n super.hostDisconnected()\n this.renderHook.remove()\n }\n\n protected override onChange = () => {\n this.syncLightDom()\n }\n\n private syncLightDom() {\n const node = this.content\n\n if (node) {\n this.options.syncLightDom(node)\n }\n }\n}\n","import { html, LitElement, nothing } 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 { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { wrapIf } from \"../common/directives/wrapIf.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Radio.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-radio-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n return element.localName === \"label\"\n}\n\n/**\n * Radio buttons are graphical user interface elements that allow user to choose only one option from\n * a predefined set of mutually exclusive options.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-radio\")\nexport default class Radio extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override inputId = createId(\"input\")\n protected override hintId = createId(\"hint\")\n protected override errorId = createId(\"error\")\n\n /**\n * For accessibility reasons, we render some parts of the component to the light DOM.\n */\n protected override hintSlot = new LightSlotController(this, {\n slotName: \"hint\",\n render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n syncLightDom: element => {\n element.id = this.hintId\n },\n })\n\n protected override labelSlot = new LightSlotController(this, {\n slotName: \"label\",\n render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n syncLightDom: element => {\n if (!isLabel(element)) {\n // eslint-disable-next-line no-console\n console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n } else {\n element.htmlFor = this.inputId\n }\n },\n })\n\n protected override errorSlot = new LightSlotController(this, {\n slotName: \"error\",\n render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n syncLightDom: element => {\n element.id = this.hintId\n },\n })\n\n protected inputSlot = new LightDomController(this, {\n render: () =>\n html`\n <input\n slot=\"input\"\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n ${ref(this.focusableRef)}\n class=\"n-input\"\n id=${this.inputId}\n type=\"radio\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${this.checked}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n />\n `,\n })\n\n // eslint-disable-next-line class-methods-use-this\n protected override get formValue() {\n // opt out of formdata event, since radio button is in light dom\n return undefined\n }\n\n /**\n * Controls whether the checkbox is checked or not.\n */\n @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n willUpdate(changedProperties: Map<string | number | symbol, unknown>) {\n if (changedProperties.has(\"checked\")) {\n const previousChecked = changedProperties.get(\"checked\")\n\n // if this component was previous unchecked but is now checked,\n // then we need to uncheck any radios in the same group\n if (!previousChecked && this.checked) {\n this.uncheckSiblings()\n }\n }\n }\n\n render() {\n return html`\n <div class=\"n-flex\">\n <div class=\"n-input-container\" @change=${this.handleChange}>\n <slot name=\"input\"></slot>\n ${this.checked ? html`<div class=\"n-dot\"></div>` : nothing}\n </div>\n <div class=\"n-expand\">\n <div class=\"n-label-container\">\n ${wrapIf(\n this.hideLabel,\n () => html`\n <slot name=\"label\"></slot>\n <slot name=\"label-internal\"></slot>\n `,\n content => html`<nord-visually-hidden>${content}</nord-visually-hidden>`\n )}\n <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n <slot name=\"hint\"></slot>\n <slot name=\"hint-internal\"></slot>\n </div>\n </div>\n <div class=\"n-caption n-error\" role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\"></slot>\n <slot name=\"error-internal\"></slot>\n </div>\n </div>\n </div>\n `\n }\n\n private uncheckSiblings() {\n const root = this.getRootNode() as Document | ShadowRoot\n\n root.querySelectorAll<Radio>(`nord-radio[name=\"${this.name}\"]`).forEach(radio => {\n if (radio !== this) {\n radio.checked = false\n }\n })\n }\n\n protected handleChange(e: Event): void {\n e.stopPropagation()\n const target = e.target as HTMLInputElement\n\n this.checked = target.checked\n super.handleChange(e)\n }\n\n private handleBlur = (e: Event) => {\n e.stopPropagation()\n this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n }\n\n private handleFocus = (e: Event) => {\n e.stopPropagation()\n this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-radio\": Radio\n }\n}\n","// some clever typing so that TS knows what happens if you pass true/false values\nexport function wrapIf<TInner, TWrapper>(\n condition: false,\n inner: () => TInner,\n wrapper: (inner: TInner) => TWrapper\n): TInner\nexport function wrapIf<TInner, TWrapper>(\n condition: true,\n inner: () => TInner,\n wrapper: (inner: TInner) => TWrapper\n): TWrapper\nexport function wrapIf<TInner, TWrapper>(\n condition: unknown,\n inner: () => TInner,\n wrapper: (inner: TInner) => TWrapper\n): TInner | TWrapper\n\n/**\n * @returns if condition is truthy, return result of wrapper, passing result of inner as arg. if falsy, return result of inner\n */\nexport function wrapIf<TInner, TWrapper>(condition: any, inner: () => TInner, wrapper: (innards: TInner) => TWrapper) {\n return condition ? wrapper(inner()) : inner()\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","hostDisconnected","remove","node","content","id","createId","suffix","Radio","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","hint","html","hintId","element","label","inputId","localName","isLabel","console","warn","htmlFor","error","errorId","handleBlur","handleFocus","ref","focusableRef","ifDefined","name","value","checked","disabled","required","getDescribedBy","getInvalid","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","willUpdate","changedProperties","has","get","uncheckSiblings","handleChange","condition","hideLabel","inner","wrapper","hasHint","hasError","getRootNode","querySelectorAll","forEach","radio","target","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","reflect","customElement"],"mappings":"2tBAcaA,UAA4BC,EAIvCC,YAAYC,EAAoDC,GAC9DC,MAAMF,EAAMC,EAAQE,UAD0CC,aAAAH,EA0B7CG,cAAW,KAC5BA,KAAKC,gBAzBLD,KAAKH,QAAUA,EAKfG,KAAKE,WAAaC,SAASC,cAAcJ,KAAKD,UAE9CC,KAAKK,SAAW,IAAIC,EAAmBV,EAAM,CAC3CW,OAAQ,IAAOP,KAAKQ,WAAaC,EAAUT,KAAKH,QAAQU,SACxDG,cAAe,CAAEC,aAAcX,KAAKE,cAIxCU,gBACEd,MAAMc,gBACNZ,KAAKJ,KAAKiB,YAAYb,KAAKE,YAC3BF,KAAKC,eAGPa,mBACEhB,MAAMgB,mBACNd,KAAKE,WAAWa,SAOVd,eACN,MAAMe,EAAOhB,KAAKiB,QAEdD,GACFhB,KAAKH,QAAQI,aAAae,skECpChC,IAAIE,EAAK,EACT,MAAMC,EAAYC,GAAmB,cAAcA,KAAUF,MAiB7D,IAAqBG,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjF9B,kCAGqBK,aAAUmB,EAAS,SACnBnB,YAASmB,EAAS,QAClBnB,aAAUmB,EAAS,SAKnBnB,cAAW,IAAIP,EAAoBO,KAAM,CAC1DD,SAAU,OACVQ,OAAQ,IAAOP,KAAK0B,KAAOC,CAAI,iCAAgC3B,KAAK4B,WAAU5B,KAAK0B,aAAejB,EAClGR,aAAc4B,IACZA,EAAQX,GAAKlB,KAAK4B,UAIH5B,eAAY,IAAIP,EAAoBO,KAAM,CAC3DD,SAAU,QACVQ,OAAQ,IAAOP,KAAK8B,MAAQH,CAAI,qCAAoC3B,KAAK+B,YAAW/B,KAAK8B,gBAAkBrB,EAC3GR,aAAc4B,KApClB,SAAiBA,GACf,MAA6B,UAAtBA,EAAQG,UAoCNC,CAAQJ,GAEXK,QAAQC,KAAK,yEAEbN,EAAQO,QAAUpC,KAAK+B,WAKV/B,eAAY,IAAIP,EAAoBO,KAAM,CAC3DD,SAAU,QACVQ,OAAQ,IAAOP,KAAKqC,MAAQV,CAAI,kCAAiC3B,KAAKsC,YAAWtC,KAAKqC,cAAgB5B,EACtGR,aAAc4B,IACZA,EAAQX,GAAKlB,KAAK4B,UAIZ5B,eAAY,IAAIM,EAAmBN,KAAM,CACjDO,OAAQ,IACNoB,CAAI,8BAGQ3B,KAAKuC,uBACJvC,KAAKwC,gBACZC,EAAIzC,KAAK0C,qCAEN1C,KAAK+B,+BAEHY,EAAU3C,KAAK4C,kBACb5C,KAAK6C,oBACH7C,KAAK8C,uBACJ9C,KAAK+C,wBACL/C,KAAKgD,+BACEL,EAAU3C,KAAKiD,oCACnBN,EAAU3C,KAAKkD,oBAcMlD,cAAmB,EA+DvDA,gBAAcmD,IACpBA,EAAEC,kBACFpD,KAAKqD,cAAc,IAAIC,MAAM,OAAQ,CAAEC,SAAS,EAAOC,YAAY,MAG7DxD,iBAAemD,IACrBA,EAAEC,kBACFpD,KAAKqD,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAOC,YAAY,MA9E/CC,iBAUvBC,WAAWC,GACT,GAAIA,EAAkBC,IAAI,WAAY,EACZD,EAAkBE,IAAI,YAItB7D,KAAK8C,SAC3B9C,KAAK8D,mBAKXvD,SACE,OAAOoB,CAAI,+DAEkC3B,KAAK+D,2CAE1C/D,KAAK8C,QAAUnB,CAAI,4BAA8BlB,+DCvGpBuD,ED4G3BhE,KAAKiE,UC5GsCC,ED6G3C,IAAMvC,CAAI,gEC7GsDwC,EDiHhElD,GAAWU,CAAI,yBAAyBV,2BChH7C+C,EAAYG,EAAQD,KAAWA,8CDkHalE,KAAKoE,yIAKOpE,KAAKqE,gGCxH7BL,EAAgBE,EAAqBC,EDiIpEL,kBACO9D,KAAKsE,cAEbC,iBAAwB,oBAAoBvE,KAAK4C,UAAU4B,SAAQC,IAClEA,IAAUzE,OACZyE,EAAM3B,SAAU,MAKZiB,aAAaZ,GACrBA,EAAEC,kBACF,MAAMsB,EAASvB,EAAEuB,OAEjB1E,KAAK8C,QAAU4B,EAAO5B,QACtBhD,MAAMiE,aAAaZ,KAjId9B,SAAS,CAACsD,EAAgBC,EAAgBC,GAqELC,GAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,mCAtEjB7D,KADpB8D,EAAc,eACM9D,SAAAA"}
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../src/common/controllers/LightSlotController.ts","../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n slotName: string\n render: () => unknown\n syncLightDom: (element: Element) => void\n}\n\n/**\n * Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n */\nexport class LightSlotController extends SlotController {\n private renderHook: Comment\n private lightDom: LightDomController\n\n constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n super(host, options.slotName)\n this.options = options\n\n // we need a node to hook onto for rendering\n // without this, multiple controllers rendering to the light DOM\n // will overwrite each others' content\n this.renderHook = document.createComment(this.slotName)\n\n this.lightDom = new LightDomController(host, {\n render: () => (this.hasContent ? nothing : this.options.render()),\n renderOptions: { renderBefore: this.renderHook },\n })\n }\n\n hostConnected() {\n super.hostConnected()\n this.host.appendChild(this.renderHook)\n this.syncLightDom()\n }\n\n hostDisconnected() {\n super.hostDisconnected()\n this.renderHook.remove()\n }\n\n protected override onChange = () => {\n this.syncLightDom()\n }\n\n private syncLightDom() {\n const node = this.content\n\n if (node) {\n this.options.syncLightDom(node)\n }\n }\n}\n","import { html, LitElement, nothing } 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 { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { wrapIf } from \"../common/directives/wrapIf.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Radio.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-radio-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n return element.localName === \"label\"\n}\n\n/**\n * Radio buttons are graphical user interface elements that allow user to choose only one option from\n * a predefined set of mutually exclusive options.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-radio\")\nexport default class Radio extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override inputId = createId(\"input\")\n protected override hintId = createId(\"hint\")\n protected override errorId = createId(\"error\")\n\n /**\n * For accessibility reasons, we render some parts of the component to the light DOM.\n */\n protected override hintSlot = new LightSlotController(this, {\n slotName: \"hint\",\n render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n syncLightDom: element => {\n element.id = this.hintId\n },\n })\n\n protected override labelSlot = new LightSlotController(this, {\n slotName: \"label\",\n render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n syncLightDom: element => {\n if (!isLabel(element)) {\n // eslint-disable-next-line no-console\n console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n } else {\n element.htmlFor = this.inputId\n }\n },\n })\n\n protected override errorSlot = new LightSlotController(this, {\n slotName: \"error\",\n render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n syncLightDom: element => {\n element.id = this.hintId\n },\n })\n\n protected inputSlot = new LightDomController(this, {\n render: () =>\n html`\n <input\n slot=\"input\"\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n ${ref(this.focusableRef)}\n class=\"n-input\"\n id=${this.inputId}\n type=\"radio\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${this.checked}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n />\n `,\n })\n\n // eslint-disable-next-line class-methods-use-this\n protected override get formValue() {\n // opt out of formdata event, since radio button is in light dom\n return undefined\n }\n\n /**\n * Controls whether the checkbox is checked or not.\n */\n @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n willUpdate(changedProperties: Map<string | number | symbol, unknown>) {\n if (changedProperties.has(\"checked\")) {\n const previousChecked = changedProperties.get(\"checked\")\n\n // if this component was previous unchecked but is now checked,\n // then we need to uncheck any radios in the same group\n if (!previousChecked && this.checked) {\n this.uncheckSiblings()\n }\n }\n }\n\n render() {\n return html`\n <div class=\"n-flex\">\n <div class=\"n-input-container\" @change=${this.handleChange}>\n <slot name=\"input\"></slot>\n ${this.checked ? html`<div class=\"n-dot\"></div>` : nothing}\n </div>\n <div class=\"n-expand\">\n <div class=\"n-label-container\">\n ${wrapIf(\n this.hideLabel,\n () => html`\n <slot name=\"label\"></slot>\n <slot name=\"label-internal\"></slot>\n `,\n content => html`<nord-visually-hidden>${content}</nord-visually-hidden>`\n )}\n <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n <slot name=\"hint\"></slot>\n <slot name=\"hint-internal\"></slot>\n </div>\n </div>\n <div class=\"n-caption n-error\" role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\"></slot>\n <slot name=\"error-internal\"></slot>\n </div>\n </div>\n </div>\n `\n }\n\n private uncheckSiblings() {\n const root = this.getRootNode() as Document | ShadowRoot\n\n root.querySelectorAll<Radio>(`nord-radio[name=\"${this.name}\"]`).forEach(radio => {\n if (radio !== this) {\n radio.checked = false\n }\n })\n }\n\n protected handleChange(e: Event): void {\n e.stopPropagation()\n const target = e.target as HTMLInputElement\n\n this.checked = target.checked\n super.handleChange(e)\n }\n\n private handleBlur = (e: Event) => {\n e.stopPropagation()\n this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n }\n\n private handleFocus = (e: Event) => {\n e.stopPropagation()\n this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-radio\": Radio\n }\n}\n","// some clever typing so that TS knows what happens if you pass true/false values\nexport function wrapIf<TInner, TWrapper>(\n condition: false,\n inner: () => TInner,\n wrapper: (inner: TInner) => TWrapper\n): TInner\nexport function wrapIf<TInner, TWrapper>(\n condition: true,\n inner: () => TInner,\n wrapper: (inner: TInner) => TWrapper\n): TWrapper\nexport function wrapIf<TInner, TWrapper>(\n condition: unknown,\n inner: () => TInner,\n wrapper: (inner: TInner) => TWrapper\n): TInner | TWrapper\n\n/**\n * @returns if condition is truthy, return result of wrapper, passing result of inner as arg. if falsy, return result of inner\n */\nexport function wrapIf<TInner, TWrapper>(condition: any, inner: () => TInner, wrapper: (innards: TInner) => TWrapper) {\n return condition ? wrapper(inner()) : inner()\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","hostDisconnected","remove","node","content","id","createId","suffix","Radio","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","hint","html","hintId","element","label","inputId","localName","isLabel","console","warn","htmlFor","error","errorId","handleBlur","handleFocus","ref","focusableRef","ifDefined","name","value","checked","disabled","required","getDescribedBy","getInvalid","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","willUpdate","changedProperties","has","get","uncheckSiblings","handleChange","condition","hideLabel","inner","wrapper","hasHint","hasError","getRootNode","querySelectorAll","forEach","radio","target","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","reflect","customElement"],"mappings":"2tBAcaA,UAA4BC,EAIvCC,YAAYC,EAAoDC,GAC9DC,MAAMF,EAAMC,EAAQE,UAD0CC,aAAAH,EA0B7CG,cAAW,KAC5BA,KAAKC,gBAzBLD,KAAKH,QAAUA,EAKfG,KAAKE,WAAaC,SAASC,cAAcJ,KAAKD,UAE9CC,KAAKK,SAAW,IAAIC,EAAmBV,EAAM,CAC3CW,OAAQ,IAAOP,KAAKQ,WAAaC,EAAUT,KAAKH,QAAQU,SACxDG,cAAe,CAAEC,aAAcX,KAAKE,cAIxCU,gBACEd,MAAMc,gBACNZ,KAAKJ,KAAKiB,YAAYb,KAAKE,YAC3BF,KAAKC,eAGPa,mBACEhB,MAAMgB,mBACNd,KAAKE,WAAWa,SAOVd,eACN,MAAMe,EAAOhB,KAAKiB,QAEdD,GACFhB,KAAKH,QAAQI,aAAae,4oECpChC,IAAIE,EAAK,EACT,MAAMC,EAAYC,GAAmB,cAAcA,KAAUF,MAiB7D,IAAqBG,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjF9B,kCAGqBK,aAAUmB,EAAS,SACnBnB,YAASmB,EAAS,QAClBnB,aAAUmB,EAAS,SAKnBnB,cAAW,IAAIP,EAAoBO,KAAM,CAC1DD,SAAU,OACVQ,OAAQ,IAAOP,KAAK0B,KAAOC,CAAI,iCAAgC3B,KAAK4B,WAAU5B,KAAK0B,aAAejB,EAClGR,aAAc4B,IACZA,EAAQX,GAAKlB,KAAK4B,UAIH5B,eAAY,IAAIP,EAAoBO,KAAM,CAC3DD,SAAU,QACVQ,OAAQ,IAAOP,KAAK8B,MAAQH,CAAI,qCAAoC3B,KAAK+B,YAAW/B,KAAK8B,gBAAkBrB,EAC3GR,aAAc4B,KApClB,SAAiBA,GACf,MAA6B,UAAtBA,EAAQG,UAoCNC,CAAQJ,GAEXK,QAAQC,KAAK,yEAEbN,EAAQO,QAAUpC,KAAK+B,WAKV/B,eAAY,IAAIP,EAAoBO,KAAM,CAC3DD,SAAU,QACVQ,OAAQ,IAAOP,KAAKqC,MAAQV,CAAI,kCAAiC3B,KAAKsC,YAAWtC,KAAKqC,cAAgB5B,EACtGR,aAAc4B,IACZA,EAAQX,GAAKlB,KAAK4B,UAIZ5B,eAAY,IAAIM,EAAmBN,KAAM,CACjDO,OAAQ,IACNoB,CAAI,8BAGQ3B,KAAKuC,uBACJvC,KAAKwC,gBACZC,EAAIzC,KAAK0C,qCAEN1C,KAAK+B,+BAEHY,EAAU3C,KAAK4C,kBACb5C,KAAK6C,oBACH7C,KAAK8C,uBACJ9C,KAAK+C,wBACL/C,KAAKgD,+BACEL,EAAU3C,KAAKiD,oCACnBN,EAAU3C,KAAKkD,oBAcMlD,cAAmB,EA+DvDA,gBAAcmD,IACpBA,EAAEC,kBACFpD,KAAKqD,cAAc,IAAIC,MAAM,OAAQ,CAAEC,SAAS,EAAOC,YAAY,MAG7DxD,iBAAemD,IACrBA,EAAEC,kBACFpD,KAAKqD,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAOC,YAAY,MA9E/CC,iBAUvBC,WAAWC,GACT,GAAIA,EAAkBC,IAAI,WAAY,EACZD,EAAkBE,IAAI,YAItB7D,KAAK8C,SAC3B9C,KAAK8D,mBAKXvD,SACE,OAAOoB,CAAI,+DAEkC3B,KAAK+D,2CAE1C/D,KAAK8C,QAAUnB,CAAI,4BAA8BlB,+DCvGpBuD,ED4G3BhE,KAAKiE,UC5GsCC,ED6G3C,IAAMvC,CAAI,gEC7GsDwC,EDiHhElD,GAAWU,CAAI,yBAAyBV,2BChH7C+C,EAAYG,EAAQD,KAAWA,8CDkHalE,KAAKoE,yIAKOpE,KAAKqE,gGCxH7BL,EAAgBE,EAAqBC,EDiIpEL,kBACO9D,KAAKsE,cAEbC,iBAAwB,oBAAoBvE,KAAK4C,UAAU4B,SAAQC,IAClEA,IAAUzE,OACZyE,EAAM3B,SAAU,MAKZiB,aAAaZ,GACrBA,EAAEC,kBACF,MAAMsB,EAASvB,EAAEuB,OAEjB1E,KAAK8C,QAAU4B,EAAO5B,QACtBhD,MAAMiE,aAAaZ,KAjId9B,SAAS,CAACsD,EAAgBC,EAAgBC,GAqELC,GAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,mCAtEjB7D,KADpB8D,EAAc,eACM9D,SAAAA"}
|
package/lib/Select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as o,$ as n,s as r}from"./lit-element-9646ab7e.js";import{l as i}from"./if-defined-2a4c6dbc.js";import{n as s}from"./ref-eb5cfa10.js";import{o as a}from"./unsafe-html-4da54dd2.js";import"./Button.js";import{I as l}from"./InputMixin-94d15730.js";import{F as d}from"./FocusableMixin-98e13999.js";import{F as c}from"./FormAssociatedMixin-bfbbe389.js";import{s as p}from"./Component-6762b5eb.js";import{s as b}from"./FormField-b1c18e6e.js";import{S as u}from"./SlotController-5bfc47d1.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./LightDomController-f56fa1a4.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const m=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-primary);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}::slotted(:not([slot])){display:none}[slot=after] svg{color:var(--n-color-icon);margin-inline-start:var(--n-space-m);margin-inline-end:calc(var(--n-space-s)/ -2);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=before]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let v=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new u(this),this.inputId="select"}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${s(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${i(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="before" name="before"></slot>${t}<div slot="after">${a('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${i(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value}">${e.text}</option>`}};v.styles=[p,b,m],v=e([t("nord-select")],v);var h=v;export{h as default};
|
|
1
|
+
import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as o,$ as n,s as r}from"./lit-element-9646ab7e.js";import{l as i}from"./if-defined-2a4c6dbc.js";import{n as s}from"./ref-eb5cfa10.js";import{o as a}from"./unsafe-html-4da54dd2.js";import"./Button.js";import{I as l}from"./InputMixin-94d15730.js";import{F as d}from"./FocusableMixin-98e13999.js";import{F as c}from"./FormAssociatedMixin-bfbbe389.js";import{s as p}from"./Component-6762b5eb.js";import{s as b}from"./FormField-b1c18e6e.js";import{S as u}from"./SlotController-5bfc47d1.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./LightDomController-f56fa1a4.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const m=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-primary);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}::slotted(:not([slot])){display:none}[slot=after] svg{color:var(--n-color-icon);margin-inline-start:var(--n-space-m);margin-inline-end:calc(var(--n-space-s)/ -2);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=before]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let v=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new u(this),this.inputId="select"}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${s(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${i(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="before" name="before"></slot>${t}<div slot="after">${a('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${i(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value}">${e.text}</option>`}};v.styles=[p,b,m],v=e([t("nord-select")],v);var h=v;export{h as default};
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|
package/lib/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../../icons/lib/assets/interface-dropdown-small.js"],"sourcesContent":["/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport \"../button/Button.js\"\n\nimport dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.value || undefined\n }\n\n private defaultSlot = new SlotController(this)\n\n protected inputId = \"select\"\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n\n return html`\n <slot></slot>\n ${this.renderLabel()}\n\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"before\" name=\"before\"></slot>\n ${buttonText}\n <div slot=\"after\">${unsafeHTML(dropdownIcon)}</div>\n </nord-button>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private get options() {\n return Array.from(this.querySelectorAll(\"option\"))\n }\n\n private getButtonText(options: HTMLOptionElement[]): string {\n const selected = options.find(option => option.value === this.value)\n\n if (selected) {\n return selected.text\n }\n\n if (this.placeholder) {\n return this.placeholder\n }\n\n if (options[0]) {\n return options[0].text\n }\n\n return \"\"\n }\n\n private renderOption(option: HTMLOptionElement) {\n return html`\n <option value=${ifDefined(option.value)} ?disabled=${option.disabled} ?selected=${option.value === this.value}>\n ${option.text}\n </option>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-select\": Select\n }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z\"/></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n"],"names":["Select","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","SlotController","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","inputId","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","placeholder","map","option","renderOption","expand","unsafeHTML","renderError","Array","from","querySelectorAll","selected","find","text","componentStyle","formFieldStyle","style","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../../icons/lib/assets/interface-dropdown-small.js"],"sourcesContent":["/* eslint-disable lit-a11y/no-invalid-change-handler */\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport \"../button/Button.js\"\n\nimport dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.value || undefined\n }\n\n private defaultSlot = new SlotController(this)\n\n protected inputId = \"select\"\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n\n return html`\n <slot></slot>\n ${this.renderLabel()}\n\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"before\" name=\"before\"></slot>\n ${buttonText}\n <div slot=\"after\">${unsafeHTML(dropdownIcon)}</div>\n </nord-button>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private get options() {\n return Array.from(this.querySelectorAll(\"option\"))\n }\n\n private getButtonText(options: HTMLOptionElement[]): string {\n const selected = options.find(option => option.value === this.value)\n\n if (selected) {\n return selected.text\n }\n\n if (this.placeholder) {\n return this.placeholder\n }\n\n if (options[0]) {\n return options[0].text\n }\n\n return \"\"\n }\n\n private renderOption(option: HTMLOptionElement) {\n return html`\n <option value=${ifDefined(option.value)} ?disabled=${option.disabled} ?selected=${option.value === this.value}>\n ${option.text}\n </option>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-select\": Select\n }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z\"/></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n"],"names":["Select","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","SlotController","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","inputId","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","placeholder","map","option","renderOption","expand","unsafeHTML","renderError","Array","from","querySelectorAll","selected","find","text","componentStyle","formFieldStyle","style","customElement"],"mappings":"+pEA+BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,MAAlFC,kCAOUC,iBAAc,IAAIC,EAAeD,MAE/BA,aAAU,SANGE,gBACrB,OAAOF,KAAKG,YAASC,EAOvBC,SACE,MAAMC,EAAiBN,KAAKO,QACtBC,EAAaR,KAAKS,cAAcH,GAEtC,OAAOI,CAAI,gBAEPV,KAAKW,wDAIDC,EAAIZ,KAAKa,qBACNb,KAAKc,uBACEd,KAAKe,wBACLf,KAAKgB,mBACVC,EAAUjB,KAAKkB,mBACZlB,KAAKmB,yBACNnB,KAAKoB,kCACKH,EAAUjB,KAAKqB,oCACnBJ,EAAUjB,KAAKsB,kBAE5BtB,KAAKuB,aAAeb,CAAI,oDAAwCV,KAAKG,UAASH,KAAKuB,0BACnFjB,EAAekB,KAAIC,GAAUzB,KAAK0B,aAAaD,sDAGZzB,KAAKe,sBAAoBf,KAAK2B,qFAEjEnB,sBACkBoB,ECrEf,ofDyEP5B,KAAK6B,gBAICtB,cACV,OAAOuB,MAAMC,KAAK/B,KAAKgC,iBAAiB,WAGlCvB,cAAcF,GACpB,MAAM0B,EAAW1B,EAAQ2B,MAAKT,GAAUA,EAAOtB,QAAUH,KAAKG,QAE9D,OAAI8B,EACKA,EAASE,KAGdnC,KAAKuB,YACAvB,KAAKuB,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,GAGDT,aAAaD,GACnB,OAAOf,CAAI,kBACOO,EAAUQ,EAAOtB,sBAAoBsB,EAAOV,wBAAsBU,EAAOtB,QAAUH,KAAKG,UACpGsB,EAAOU,kBAtERzC,SAAS,CAAC0C,EAAgBC,EAAgBC,GAD9B5C,KADpB6C,EAAc,gBACM7C,SAAAA"}
|
package/lib/Stack.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,n as e}from"./query-assigned-elements-37b095c4.js";import{r as s,s as
|
|
1
|
+
import{_ as t,n as e}from"./query-assigned-elements-37b095c4.js";import{r as s,s as n,$ as o}from"./lit-element-9646ab7e.js";import{e as a}from"./property-03f59dce.js";import{s as r}from"./Component-6762b5eb.js";const i=s`:host{display:flex;flex-flow:column wrap;justify-content:flex-start;font-size:var(--n-font-size-m);color:var(--n-color-text);gap:var(--n-stack-gap,var(--n-space-m))}:host([direction=horizontal]){align-items:center;flex-direction:row}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([justify-content=center]){justify-content:center}:host([justify-content=start]){justify-content:flex-start}:host([justify-content=end]){justify-content:flex-end}::slotted(*){margin:0!important}:host([gap=none]){--n-stack-gap:0}:host([gap="s"]){--n-stack-gap:var(--n-space-s)}:host([gap="m"]){--n-stack-gap:var(--n-space-m)}:host([gap="l"]){--n-stack-gap:var(--n-space-l)}:host([gap=xl]){--n-stack-gap:var(--n-space-xl)}:host([gap=xxl]){--n-stack-gap:var(--n-space-xxl)}`;let c=class extends n{constructor(){super(...arguments),this.gap="m",this.direction="vertical"}render(){return o`<slot></slot>`}};c.styles=[r,i],t([a({reflect:!0})],c.prototype,"gap",void 0),t([a({reflect:!0})],c.prototype,"direction",void 0),t([a({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),t([a({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=t([e("nord-stack")],c);var l=c;export{l as default};
|
|
2
2
|
//# sourceMappingURL=Stack.js.map
|
package/lib/Stack.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.js","sources":["../src/stack/Stack.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Stack.css\"\n\n/**\n * Stack component manages layout of immediate children along the\n * vertical or horizontal axis with optional spacing between each child.\n *\n * @status ready\n * @category structure\n * @slot - The stack content.\n */\n@customElement(\"nord-stack\")\nexport default class Stack extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * The space injected between components.\n */\n @property({ reflect: true }) gap: \"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n /**\n * The direction of the stack.\n */\n @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\"\n\n /**\n * How to align the child items inside the stack.\n */\n @property({ reflect: true, attribute: \"align-items\" }) alignItems?: \"center\" | \"start\" | \"end\"\n\n render() {\n return html`<slot></slot>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-stack\": Stack\n }\n}\n"],"names":["Stack","LitElement","constructor","this","render","html","componentStyle","style","__decorate","property","reflect","attribute","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Stack.js","sources":["../src/stack/Stack.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Stack.css\"\n\n/**\n * Stack component manages layout of immediate children along the\n * vertical or horizontal axis with optional spacing between each child.\n *\n * @status ready\n * @category structure\n * @slot - The stack content.\n */\n@customElement(\"nord-stack\")\nexport default class Stack extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * The space injected between components.\n */\n @property({ reflect: true }) gap: \"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\" = \"m\"\n\n /**\n * The direction of the stack.\n */\n @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\"\n\n /**\n * How to align the child items inside the stack.\n */\n @property({ reflect: true, attribute: \"align-items\" }) alignItems?: \"center\" | \"start\" | \"end\"\n\n /**\n * How to justify the child items inside the stack.\n */\n @property({ reflect: true, attribute: \"justify-content\" }) justifyContent?: \"center\" | \"start\" | \"end\"\n\n render() {\n return html`<slot></slot>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-stack\": Stack\n }\n}\n"],"names":["Stack","LitElement","constructor","this","render","html","componentStyle","style","__decorate","property","reflect","attribute","customElement"],"mappings":"mjCAcA,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAM+BC,SAA+C,IAK/CA,eAAuC,WAYpEC,SACE,OAAOC,CAAI,kBAvBNL,SAAS,CAACM,EAAgBC,GAKJC,GAA5BC,EAAS,CAAEC,SAAS,+BAKQF,GAA5BC,EAAS,CAAEC,SAAS,qCAKkCF,GAAtDC,EAAS,CAAEC,SAAS,EAAMC,UAAW,kDAKqBH,GAA1DC,EAAS,CAAEC,SAAS,EAAMC,UAAW,0DArBnBX,KADpBY,EAAc,eACMZ,SAAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as n}from"./lit-element-9646ab7e.js";const r=n`.n-input-container{position:relative}.n-input{background:var(--n-color-active);color:var(--n-color-text);padding-block-start:calc(var(--n-space-s) - 1px);padding-block-end:calc(var(--n-space-s) - 1px);padding-inline-start:calc(var(--n-space-s) * 1.6);padding-inline-end:calc(var(--n-space-s) * 1.6);border-radius:var(--n-border-radius-s);border:1px solid var(--n-input-border-color,var(--n-color-border-strong));font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height-form);min-inline-size:240px;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:480px){.n-input{font-size:var(--n-font-size-l)}}:host([expand]) .n-input{display:block;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--n-input-border-color:var(--n-color-border-hover)}.n-input:focus{--n-input-border-color:var(--n-color-primary);background:var(--n-color-surface);outline:0;box-shadow:0 0 0 1px var(--n-input-border-color)}.n-input::placeholder{color:var(--n-color-text-
|
|
2
|
-
//# sourceMappingURL=TextField-
|
|
1
|
+
import{r as n}from"./lit-element-9646ab7e.js";const r=n`.n-input-container{position:relative}.n-input{background:var(--n-color-active);color:var(--n-color-text);padding-block-start:calc(var(--n-space-s) - 1px);padding-block-end:calc(var(--n-space-s) - 1px);padding-inline-start:calc(var(--n-space-s) * 1.6);padding-inline-end:calc(var(--n-space-s) * 1.6);border-radius:var(--n-border-radius-s);border:1px solid var(--n-input-border-color,var(--n-color-border-strong));font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height-form);min-inline-size:240px;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:480px){.n-input{font-size:var(--n-font-size-l)}}:host([expand]){inline-size:100%}:host([expand]) .n-input{display:block;min-inline-size:0;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--n-input-border-color:var(--n-color-border-hover)}.n-input:focus{--n-input-border-color:var(--n-color-primary);background:var(--n-color-surface);outline:0;box-shadow:0 0 0 1px var(--n-input-border-color)}.n-input::placeholder{color:var(--n-color-text-weakest)}.n-input:disabled{--n-input-border-color:var(--n-color-active);color:var(--n-color-text-weakest)}.n-input[aria-invalid=true]{--n-input-border-color:var(--n-color-status-danger)!important}`;export{r as s};
|
|
2
|
+
//# sourceMappingURL=TextField-00822066.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextField-00822066.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/lib/Textarea.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,$ as s,s as r}from"./lit-element-9646ab7e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-2a4c6dbc.js";import{n}from"./ref-eb5cfa10.js";import{F as l}from"./FocusableMixin-98e13999.js";import{F as d}from"./FormAssociatedMixin-bfbbe389.js";import{I as h}from"./InputMixin-94d15730.js";import{s as p}from"./Component-6762b5eb.js";import{s as m}from"./FormField-b1c18e6e.js";import{s as c}from"./TextField-
|
|
1
|
+
import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,$ as s,s as r}from"./lit-element-9646ab7e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-2a4c6dbc.js";import{n}from"./ref-eb5cfa10.js";import{F as l}from"./FocusableMixin-98e13999.js";import{F as d}from"./FormAssociatedMixin-bfbbe389.js";import{I as h}from"./InputMixin-94d15730.js";import{s as p}from"./Component-6762b5eb.js";import{s as m}from"./FormField-b1c18e6e.js";import{s as c}from"./TextField-00822066.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./SlotController-5bfc47d1.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const u=i`.n-input{min-block-size:var(--n-textarea-height,76px);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}`;let b=class extends(d(h(l(r)))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical"}updated(e){(e.has("resize")||e.has("value"))&&this.resizeToFitContent()}render(){var e;return s`${this.renderLabel()}<div class="n-input-container"><textarea ${n(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}"></textarea></div>${this.renderError()}`}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=null)}};b.styles=[p,m,c,u],e([o({reflect:!0})],b.prototype,"resize",void 0),b=e([t("nord-textarea")],b);var f=b;export{f as default};
|
|
2
2
|
//# sourceMappingURL=Textarea.js.map
|
package/lib/Tooltip.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,n as e}from"./query-assigned-elements-37b095c4.js";import{r as n,s as o,$ as i}from"./lit-element-9646ab7e.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{S as l}from"./SlotController-5bfc47d1.js";import{s as a}from"./Component-6762b5eb.js";function c(t){return t.split("-")[0]}function d(t){return t.split("-")[1]}function f(t){return["top","bottom"].includes(c(t))?"x":"y"}function h(t){return"y"===t?"height":"width"}function u(t){let{reference:e,floating:n,placement:o}=t;const i=e.x+e.width/2-n.width/2,r=e.y+e.height/2-n.height/2;let s;switch(c(o)){case"top":s={x:i,y:e.y-n.height};break;case"bottom":s={x:i,y:e.y+e.height};break;case"right":s={x:e.x+e.width,y:r};break;case"left":s={x:e.x-n.width,y:r};break;default:s={x:e.x,y:e.y}}const l=f(o),a=h(l);switch(d(o)){case"start":s[l]=s[l]-(e[a]/2-n[a]/2);break;case"end":s[l]=s[l]+(e[a]/2-n[a]/2)}return s}function p(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function m(t,e){void 0===e&&(e={});const{x:n,y:o,platform:i,rects:r,elements:s,strategy:l}=t,{boundary:a="clippingParents",rootBoundary:c="viewport",elementContext:d="floating",altBoundary:f=!1,padding:h=0}=e,u=function(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}(h),m=s[f?"floating"===d?"reference":"floating":d],g=await i.getClippingClientRect({element:await i.isElement(m)?m:m.contextElement||await i.getDocumentElement({element:s.floating}),boundary:a,rootBoundary:c}),y=p(await i.convertOffsetParentRelativeRectToViewportRelativeRect({rect:"floating"===d?{...r.floating,x:n,y:o}:r.reference,offsetParent:await i.getOffsetParent({element:s.floating}),strategy:l}));return{top:g.top-y.top+u.top,bottom:y.bottom-g.bottom+u.bottom,left:g.left-y.left+u.left,right:y.right-g.right+u.right}}const g=Math.min,y=Math.max;function v(t,e,n){return y(t,g(e,n))}const b={left:"right",right:"left",bottom:"top",top:"bottom"};function x(t){return t.replace(/left|right|bottom|top/g,(t=>b[t]))}const w={start:"end",end:"start"};function E(t){return t.replace(/start|end/g,(t=>w[t]))}const k=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,o;const{placement:i,middlewareData:r,rects:s,initialPlacement:l}=e;if(null!=(n=r.flip)&&n.skip)return{};const{mainAxis:a=!0,crossAxis:u=!0,fallbackPlacements:p,fallbackStrategy:g="bestFit",flipAlignment:y=!0,...v}=t,b=c(i),w=p||(b===l||!y?[x(l)]:function(t){const e=x(t);return[E(t),e,E(e)]}(l)),k=[l,...w],L=await m(e,v),T=[];let R=(null==(o=r.flip)?void 0:o.overflows)||[];if(a&&T.push(L[b]),u){const{main:t,cross:e}=function(t,e){const n="start"===d(t),o=f(t),i=h(o);let r="x"===o?n?"right":"left":n?"bottom":"top";return e.reference[i]>e.floating[i]&&(r=x(r)),{main:r,cross:x(r)}}(i,s);T.push(L[t],L[e])}if(R=[...R,{placement:i,overflows:T}],!T.every((t=>t<=0))){var C,D;const t=(null!=(C=null==(D=r.flip)?void 0:D.index)?C:0)+1,e=k[t];if(e)return{data:{index:t,overflows:R},reset:{placement:e}};let n="bottom";switch(g){case"bestFit":{var S;const t=null==(S=R.slice().sort(((t,e)=>t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)-e.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)))[0])?void 0:S.placement;t&&(n=t);break}case"initialPlacement":n=l}return{data:{skip:!0},reset:{placement:n}}}return{}}}};const L=function(t){return void 0===t&&(t=0),{name:"offset",options:t,fn(e){const{x:n,y:o,placement:i,rects:r}=e,s=function(t){let{placement:e,rects:n,value:o}=t;const i=c(e),r=["left","top"].includes(i)?-1:1,s="function"==typeof o?o({...n,placement:e}):o,{mainAxis:l,crossAxis:a}="number"==typeof s?{mainAxis:s,crossAxis:0}:{mainAxis:0,crossAxis:0,...s};return"x"===f(i)?{x:a,y:l*r}:{x:l*r,y:a}}({placement:i,rects:r,value:t});return{x:n+s.x,y:o+s.y,data:s}}}};function T(t){return"[object Window]"===(null==t?void 0:t.toString())}function R(t){if(null==t)return window;if(!T(t)){const e=t.ownerDocument;return e&&e.defaultView||window}return t}function C(t){return R(t).getComputedStyle(t)}function D(t){return T(t)?"":t?(t.nodeName||"").toLowerCase():""}function S(t){return t instanceof R(t).HTMLElement}function P(t){return t instanceof R(t).Element}function A(t){return t instanceof R(t).ShadowRoot||t instanceof ShadowRoot}function W(t){const{overflow:e,overflowX:n,overflowY:o}=C(t);return/auto|scroll|overlay|hidden/.test(e+o+n)}function O(t){return["table","td","th"].includes(D(t))}function z(t){const e=navigator.userAgent.toLowerCase().includes("firefox"),n=C(t);return"none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||["transform","perspective"].includes(n.willChange)||e&&"filter"===n.willChange||e&&!!n.filter&&"none"!==n.filter}const H=Math.min,N=Math.max,j=Math.round;function B(t,e){void 0===e&&(e=!1);const n=t.getBoundingClientRect();let o=1,i=1;return e&&S(t)&&(o=t.offsetWidth>0&&j(n.width)/t.offsetWidth||1,i=t.offsetHeight>0&&j(n.height)/t.offsetHeight||1),{width:n.width/o,height:n.height/i,top:n.top/i,right:n.right/o,bottom:n.bottom/i,left:n.left/o,x:n.left/o,y:n.top/i}}function M(t){return(e=t,(e instanceof R(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function V(t){return T(t)?{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}:{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function $(t){return B(M(t)).left+V(t).scrollLeft}function q(t,e,n){const o=S(e),i=M(e),r=B(t,o&&function(t){const e=B(t);return j(e.width)!==t.offsetWidth||j(e.height)!==t.offsetHeight}(e));let s={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if(o||!o&&"fixed"!==n)if(("body"!==D(e)||W(i))&&(s=V(e)),S(e)){const t=B(e,!0);l.x=t.x+e.clientLeft,l.y=t.y+e.clientTop}else i&&(l.x=$(i));return{x:r.left+s.scrollLeft-l.x,y:r.top+s.scrollTop-l.y,width:r.width,height:r.height}}function F(t){return"html"===D(t)?t:t.assignedSlot||t.parentNode||(A(t)?t.host:null)||M(t)}function X(t){return S(t)&&"fixed"!==getComputedStyle(t).position?t.offsetParent:null}function Y(t){const e=R(t);let n=X(t);for(;n&&O(n)&&"static"===getComputedStyle(n).position;)n=X(n);return n&&("html"===D(n)||"body"===D(n)&&"static"===getComputedStyle(n).position&&!z(n))?e:n||function(t){let e=F(t);for(;S(e)&&!["html","body"].includes(D(e));){if(z(e))return e;e=e.parentNode}return null}(t)||e}function I(t){return{width:t.offsetWidth,height:t.offsetHeight}}function U(t){return["html","body","#document"].includes(D(t))?t.ownerDocument.body:S(t)&&W(t)?t:U(F(t))}function _(t,e){var n;void 0===e&&(e=[]);const o=U(t),i=o===(null==(n=t.ownerDocument)?void 0:n.body),r=R(o),s=i?[r].concat(r.visualViewport||[],W(o)?o:[]):o,l=e.concat(s);return i?l:l.concat(_(F(s)))}function G(t,e){return"viewport"===e?p(function(t){const e=R(t),n=M(t),o=e.visualViewport;let i=n.clientWidth,r=n.clientHeight,s=0,l=0;return o&&(i=o.width,r=o.height,Math.abs(e.innerWidth/o.scale-o.width)<.01&&(s=o.offsetLeft,l=o.offsetTop)),{width:i,height:r,x:s,y:l}}(t)):P(e)?function(t){const e=B(t),n=e.top+t.clientTop,o=e.left+t.clientLeft;return{top:n,left:o,x:o,y:n,right:o+t.clientWidth,bottom:n+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}(e):p(function(t){var e;const n=M(t),o=V(t),i=null==(e=t.ownerDocument)?void 0:e.body,r=N(n.scrollWidth,n.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0),s=N(n.scrollHeight,n.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0);let l=-o.scrollLeft+$(t);const a=-o.scrollTop;return"rtl"===C(i||n).direction&&(l+=N(n.clientWidth,i?i.clientWidth:0)-r),{width:r,height:s,x:l,y:a}}(M(t)))}function J(t){const e=_(F(t)),n=["absolute","fixed"].includes(C(t).position)&&S(t)?Y(t):t;return P(n)?e.filter((t=>P(t)&&function(t,e){const n=null==e.getRootNode?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&A(n)){let n=e;do{if(n&&t===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(t,n)&&"body"!==D(t))):[]}const K={getElementRects:t=>{let{reference:e,floating:n,strategy:o}=t;return{reference:q(e,Y(n),o),floating:{...I(n),x:0,y:0}}},convertOffsetParentRelativeRectToViewportRelativeRect:t=>function(t){let{rect:e,offsetParent:n,strategy:o}=t;const i=S(n),r=M(n);if(n===r)return e;let s={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if((i||!i&&"fixed"!==o)&&(("body"!==D(n)||W(r))&&(s=V(n)),S(n))){const t=B(n,!0);l.x=t.x+n.clientLeft,l.y=t.y+n.clientTop}return{...e,x:e.x-s.scrollLeft+l.x,y:e.y-s.scrollTop+l.y}}(t),getOffsetParent:t=>{let{element:e}=t;return Y(e)},isElement:t=>P(t),getDocumentElement:t=>{let{element:e}=t;return M(e)},getClippingClientRect:t=>function(t){let{element:e,boundary:n,rootBoundary:o}=t;const i=[..."clippingParents"===n?J(e):[].concat(n),o],r=i[0],s=i.reduce(((t,n)=>{const o=G(e,n);return t.top=N(o.top,t.top),t.right=H(o.right,t.right),t.bottom=H(o.bottom,t.bottom),t.left=N(o.left,t.left),t}),G(e,r));return s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left,s.y=s.top,s}(t),getDimensions:t=>{let{element:e}=t;return I(e)},getClientRects:t=>{let{element:e}=t;return e.getClientRects()}},Q=(t,e,n)=>(async(t,e,n)=>{const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:s}=n;let l=await s.getElementRects({reference:t,floating:e,strategy:i}),{x:a,y:c}=u({...l,placement:o}),d=o,f={};for(let n=0;n<r.length;n++){const{name:h,fn:p}=r[n],{x:m,y:g,data:y,reset:v}=await p({x:a,y:c,initialPlacement:o,placement:d,strategy:i,middlewareData:f,rects:l,platform:s,elements:{reference:t,floating:e}});a=null!=m?m:a,c=null!=g?g:c,f={...f,[h]:null!=y?y:{}},v&&("object"==typeof v&&(v.placement&&(d=v.placement),v.rects&&(l=!0===v.rects?await s.getElementRects({reference:t,floating:e,strategy:i}):v.rects),({x:a,y:c}=u({...l,placement:d}))),n=-1)}return{x:a,y:c,placement:d,strategy:i,middlewareData:f}})(t,e,{platform:K,...n});function Z(t,e){const n=t.getAttribute(e);return n?n.split(/\s+/):[]}function tt(t,e,n){t.setAttribute(e,n.join(" "))}const et=n`:host{--n-tooltip-background:rgba(20, 20, 20, 0.95);--n-tooltip-key-border:rgba(255, 255, 255, 0.03);--n-tooltip-key-background:rgba(255, 255, 255, 0.1);position:absolute;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .4s ease,visibility .4s ease;z-index:var(--n-index-popout)}.n-tooltip{gap:var(--n-space-s);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);line-height:var(--n-line-height);color:var(--n-color-text-inverse);padding:calc(var(--n-space-s)/ 1.5) var(--n-space-s);background-color:var(--n-tooltip-background);border-radius:var(--n-border-radius-s)}.n-tooltip,.n-tooltip-shortcut{display:flex;align-items:center}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){box-sizing:border-box;margin:0;inline-size:var(--n-size-icon-m);block-size:var(--n-size-icon-m);border-radius:var(--n-border-radius-s);border:1px solid var(--n-tooltip-key-border)!important;padding:1px!important;text-align:center;font-size:var(--n-font-size-xs);line-height:var(--n-line-height-tight);letter-spacing:-.5px;vertical-align:middle!important;background-color:var(--n-tooltip-key-background)}`;var nt;let ot=nt=class extends o{constructor(){super(...arguments),this.shortcutSlot=new l(this,"shortcut"),this.proxy=document.createElement("span"),this.visible=!1,this.position="top",this.role="tooltip",this.id="",this.delay=300,this.updatePosition=()=>{return Q(this.targetElement,this,{placement:this.position,middleware:[(t={padding:8},void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:o,placement:i}=e,{mainAxis:r=!0,crossAxis:s=!1,limiter:l={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...a}=t,d={x:n,y:o},h=await m(e,a),u=f(c(i)),p="x"===u?"y":"x";let g=d[u],y=d[p];if(r){const t="y"===u?"bottom":"right";g=v(g+h["y"===u?"top":"left"],g,g-h[t])}if(s){const t="y"===p?"bottom":"right";y=v(y+h["y"===p?"top":"left"],y,y-h[t])}const b=l.fn({...e,[u]:g,[p]:y});return{...b,data:{x:b.x-n,y:b.y-o}}}}),L(8),k()]}).then((({x:t,y:e})=>{this.style.insetInlineStart=`${t}px`,this.style.insetBlockStart=`${e}px`}));var t},this.handleScroll=()=>{this.visible&&this.updatePosition()},this.showTooltip=()=>{var t;this.visible||(null===(t=nt.lastOpened)||void 0===t||t.hideTooltip(),nt.lastOpened=this,this.updatePosition().then((()=>{this.visible=!0})))},this.hideTooltip=()=>{this.visible=!1},this.hideOnEscape=t=>{this.visible&&"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{var t,e;const n=null===(e=null===(t=this.targetElement)||void 0===t?void 0:t.focusableRef)||void 0===e?void 0:e.value;n&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,n.insertAdjacentElement("afterend",this.proxy),function(t,e,n){const o=Z(t,e);o.includes(n)||tt(t,e,o.concat(n))}(n,"aria-describedby",this.id))},this.removeDescribedBy=()=>{var t,e;const n=null===(e=null===(t=this.targetElement)||void 0===t?void 0:t.focusableRef)||void 0===e?void 0:e.value;n&&(this.proxy.remove(),function(t,e,n){const o=Z(t,e);o.includes(n)&&tt(t,e,o.filter((t=>t!==n)))}(n,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();const t=this.getRootNode(),e=`[aria-describedby='${this.id}']`,n=t.querySelector(e);n?(this.targetElement=n,n.addEventListener("keydown",this.hideOnEscape),n.addEventListener("mouseenter",this.showTooltip),n.addEventListener("mouseleave",this.hideTooltip),n.addEventListener("focus",this.showTooltip),n.addEventListener("blur",this.hideTooltip),window.addEventListener("resize",this.updatePosition,{passive:!0}),window.addEventListener("scroll",this.handleScroll,{passive:!0})):console.warn("NORD: tooltip found no element matching selector:",e)}disconnectedCallback(){super.disconnectedCallback(),this.targetElement&&(this.targetElement.removeEventListener("keydown",this.hideOnEscape),this.targetElement.removeEventListener("mouseenter",this.showTooltip),this.targetElement.removeEventListener("mouseleave",this.hideTooltip),this.targetElement.removeEventListener("focus",this.showTooltip),this.targetElement.removeEventListener("blur",this.hideTooltip),window.removeEventListener("resize",this.updatePosition),window.removeEventListener("scroll",this.handleScroll))}willUpdate(t){t.has("id")&&!this.id&&console.warn("NORD: The tooltip requires an id attribute and value"),t.has("visible")&&(this.visible?(this.addDescribedBy(),this.style.transitionDelay=`${this.delay}ms`,this.style.visibility="visible",this.style.opacity="1"):(this.removeDescribedBy(),this.style.transitionDelay="0ms",this.style.visibility="hidden",this.style.opacity="0"))}render(){return i`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}};ot.styles=[a,et],t([s()],ot.prototype,"visible",void 0),t([r({reflect:!0})],ot.prototype,"position",void 0),t([r({reflect:!0})],ot.prototype,"role",void 0),t([r({reflect:!0})],ot.prototype,"id",void 0),t([r({reflect:!0,type:Number})],ot.prototype,"delay",void 0),ot=nt=t([e("nord-tooltip")],ot);var it=ot;export{it as default};
|
|
1
|
+
import{_ as t,n as e}from"./query-assigned-elements-37b095c4.js";import{r as n,s as o,$ as i}from"./lit-element-9646ab7e.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{S as l}from"./SlotController-5bfc47d1.js";import{s as a}from"./Component-6762b5eb.js";function c(t){return t.split("-")[0]}function d(t){return t.split("-")[1]}function f(t){return["top","bottom"].includes(c(t))?"x":"y"}function h(t){return"y"===t?"height":"width"}function u(t){let{reference:e,floating:n,placement:o}=t;const i=e.x+e.width/2-n.width/2,r=e.y+e.height/2-n.height/2;let s;switch(c(o)){case"top":s={x:i,y:e.y-n.height};break;case"bottom":s={x:i,y:e.y+e.height};break;case"right":s={x:e.x+e.width,y:r};break;case"left":s={x:e.x-n.width,y:r};break;default:s={x:e.x,y:e.y}}const l=f(o),a=h(l);switch(d(o)){case"start":s[l]=s[l]-(e[a]/2-n[a]/2);break;case"end":s[l]=s[l]+(e[a]/2-n[a]/2)}return s}function p(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function m(t,e){void 0===e&&(e={});const{x:n,y:o,platform:i,rects:r,elements:s,strategy:l}=t,{boundary:a="clippingParents",rootBoundary:c="viewport",elementContext:d="floating",altBoundary:f=!1,padding:h=0}=e,u=function(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}(h),m=s[f?"floating"===d?"reference":"floating":d],g=await i.getClippingClientRect({element:await i.isElement(m)?m:m.contextElement||await i.getDocumentElement({element:s.floating}),boundary:a,rootBoundary:c}),y=p(await i.convertOffsetParentRelativeRectToViewportRelativeRect({rect:"floating"===d?{...r.floating,x:n,y:o}:r.reference,offsetParent:await i.getOffsetParent({element:s.floating}),strategy:l}));return{top:g.top-y.top+u.top,bottom:y.bottom-g.bottom+u.bottom,left:g.left-y.left+u.left,right:y.right-g.right+u.right}}const g=Math.min,y=Math.max;function v(t,e,n){return y(t,g(e,n))}const b={left:"right",right:"left",bottom:"top",top:"bottom"};function x(t){return t.replace(/left|right|bottom|top/g,(t=>b[t]))}const w={start:"end",end:"start"};function E(t){return t.replace(/start|end/g,(t=>w[t]))}const k=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,o;const{placement:i,middlewareData:r,rects:s,initialPlacement:l}=e;if(null!=(n=r.flip)&&n.skip)return{};const{mainAxis:a=!0,crossAxis:u=!0,fallbackPlacements:p,fallbackStrategy:g="bestFit",flipAlignment:y=!0,...v}=t,b=c(i),w=p||(b===l||!y?[x(l)]:function(t){const e=x(t);return[E(t),e,E(e)]}(l)),k=[l,...w],L=await m(e,v),T=[];let R=(null==(o=r.flip)?void 0:o.overflows)||[];if(a&&T.push(L[b]),u){const{main:t,cross:e}=function(t,e){const n="start"===d(t),o=f(t),i=h(o);let r="x"===o?n?"right":"left":n?"bottom":"top";return e.reference[i]>e.floating[i]&&(r=x(r)),{main:r,cross:x(r)}}(i,s);T.push(L[t],L[e])}if(R=[...R,{placement:i,overflows:T}],!T.every((t=>t<=0))){var C,D;const t=(null!=(C=null==(D=r.flip)?void 0:D.index)?C:0)+1,e=k[t];if(e)return{data:{index:t,overflows:R},reset:{placement:e}};let n="bottom";switch(g){case"bestFit":{var S;const t=null==(S=R.slice().sort(((t,e)=>t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)-e.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)))[0])?void 0:S.placement;t&&(n=t);break}case"initialPlacement":n=l}return{data:{skip:!0},reset:{placement:n}}}return{}}}};const L=function(t){return void 0===t&&(t=0),{name:"offset",options:t,fn(e){const{x:n,y:o,placement:i,rects:r}=e,s=function(t){let{placement:e,rects:n,value:o}=t;const i=c(e),r=["left","top"].includes(i)?-1:1,s="function"==typeof o?o({...n,placement:e}):o,{mainAxis:l,crossAxis:a}="number"==typeof s?{mainAxis:s,crossAxis:0}:{mainAxis:0,crossAxis:0,...s};return"x"===f(i)?{x:a,y:l*r}:{x:l*r,y:a}}({placement:i,rects:r,value:t});return{x:n+s.x,y:o+s.y,data:s}}}};function T(t){return"[object Window]"===(null==t?void 0:t.toString())}function R(t){if(null==t)return window;if(!T(t)){const e=t.ownerDocument;return e&&e.defaultView||window}return t}function C(t){return R(t).getComputedStyle(t)}function D(t){return T(t)?"":t?(t.nodeName||"").toLowerCase():""}function S(t){return t instanceof R(t).HTMLElement}function P(t){return t instanceof R(t).Element}function A(t){return t instanceof R(t).ShadowRoot||t instanceof ShadowRoot}function W(t){const{overflow:e,overflowX:n,overflowY:o}=C(t);return/auto|scroll|overlay|hidden/.test(e+o+n)}function O(t){return["table","td","th"].includes(D(t))}function z(t){const e=navigator.userAgent.toLowerCase().includes("firefox"),n=C(t);return"none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||["transform","perspective"].includes(n.willChange)||e&&"filter"===n.willChange||e&&!!n.filter&&"none"!==n.filter}const H=Math.min,N=Math.max,j=Math.round;function B(t,e){void 0===e&&(e=!1);const n=t.getBoundingClientRect();let o=1,i=1;return e&&S(t)&&(o=t.offsetWidth>0&&j(n.width)/t.offsetWidth||1,i=t.offsetHeight>0&&j(n.height)/t.offsetHeight||1),{width:n.width/o,height:n.height/i,top:n.top/i,right:n.right/o,bottom:n.bottom/i,left:n.left/o,x:n.left/o,y:n.top/i}}function M(t){return(e=t,(e instanceof R(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function V(t){return T(t)?{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}:{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function $(t){return B(M(t)).left+V(t).scrollLeft}function q(t,e,n){const o=S(e),i=M(e),r=B(t,o&&function(t){const e=B(t);return j(e.width)!==t.offsetWidth||j(e.height)!==t.offsetHeight}(e));let s={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if(o||!o&&"fixed"!==n)if(("body"!==D(e)||W(i))&&(s=V(e)),S(e)){const t=B(e,!0);l.x=t.x+e.clientLeft,l.y=t.y+e.clientTop}else i&&(l.x=$(i));return{x:r.left+s.scrollLeft-l.x,y:r.top+s.scrollTop-l.y,width:r.width,height:r.height}}function F(t){return"html"===D(t)?t:t.assignedSlot||t.parentNode||(A(t)?t.host:null)||M(t)}function X(t){return S(t)&&"fixed"!==getComputedStyle(t).position?t.offsetParent:null}function Y(t){const e=R(t);let n=X(t);for(;n&&O(n)&&"static"===getComputedStyle(n).position;)n=X(n);return n&&("html"===D(n)||"body"===D(n)&&"static"===getComputedStyle(n).position&&!z(n))?e:n||function(t){let e=F(t);for(;S(e)&&!["html","body"].includes(D(e));){if(z(e))return e;e=e.parentNode}return null}(t)||e}function I(t){return{width:t.offsetWidth,height:t.offsetHeight}}function U(t){return["html","body","#document"].includes(D(t))?t.ownerDocument.body:S(t)&&W(t)?t:U(F(t))}function _(t,e){var n;void 0===e&&(e=[]);const o=U(t),i=o===(null==(n=t.ownerDocument)?void 0:n.body),r=R(o),s=i?[r].concat(r.visualViewport||[],W(o)?o:[]):o,l=e.concat(s);return i?l:l.concat(_(F(s)))}function G(t,e){return"viewport"===e?p(function(t){const e=R(t),n=M(t),o=e.visualViewport;let i=n.clientWidth,r=n.clientHeight,s=0,l=0;return o&&(i=o.width,r=o.height,Math.abs(e.innerWidth/o.scale-o.width)<.01&&(s=o.offsetLeft,l=o.offsetTop)),{width:i,height:r,x:s,y:l}}(t)):P(e)?function(t){const e=B(t),n=e.top+t.clientTop,o=e.left+t.clientLeft;return{top:n,left:o,x:o,y:n,right:o+t.clientWidth,bottom:n+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}(e):p(function(t){var e;const n=M(t),o=V(t),i=null==(e=t.ownerDocument)?void 0:e.body,r=N(n.scrollWidth,n.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0),s=N(n.scrollHeight,n.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0);let l=-o.scrollLeft+$(t);const a=-o.scrollTop;return"rtl"===C(i||n).direction&&(l+=N(n.clientWidth,i?i.clientWidth:0)-r),{width:r,height:s,x:l,y:a}}(M(t)))}function J(t){const e=_(F(t)),n=["absolute","fixed"].includes(C(t).position)&&S(t)?Y(t):t;return P(n)?e.filter((t=>P(t)&&function(t,e){const n=null==e.getRootNode?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&A(n)){let n=e;do{if(n&&t===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(t,n)&&"body"!==D(t))):[]}const K={getElementRects:t=>{let{reference:e,floating:n,strategy:o}=t;return{reference:q(e,Y(n),o),floating:{...I(n),x:0,y:0}}},convertOffsetParentRelativeRectToViewportRelativeRect:t=>function(t){let{rect:e,offsetParent:n,strategy:o}=t;const i=S(n),r=M(n);if(n===r)return e;let s={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if((i||!i&&"fixed"!==o)&&(("body"!==D(n)||W(r))&&(s=V(n)),S(n))){const t=B(n,!0);l.x=t.x+n.clientLeft,l.y=t.y+n.clientTop}return{...e,x:e.x-s.scrollLeft+l.x,y:e.y-s.scrollTop+l.y}}(t),getOffsetParent:t=>{let{element:e}=t;return Y(e)},isElement:t=>P(t),getDocumentElement:t=>{let{element:e}=t;return M(e)},getClippingClientRect:t=>function(t){let{element:e,boundary:n,rootBoundary:o}=t;const i=[..."clippingParents"===n?J(e):[].concat(n),o],r=i[0],s=i.reduce(((t,n)=>{const o=G(e,n);return t.top=N(o.top,t.top),t.right=H(o.right,t.right),t.bottom=H(o.bottom,t.bottom),t.left=N(o.left,t.left),t}),G(e,r));return s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left,s.y=s.top,s}(t),getDimensions:t=>{let{element:e}=t;return I(e)},getClientRects:t=>{let{element:e}=t;return e.getClientRects()}},Q=(t,e,n)=>(async(t,e,n)=>{const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:s}=n;let l=await s.getElementRects({reference:t,floating:e,strategy:i}),{x:a,y:c}=u({...l,placement:o}),d=o,f={};for(let n=0;n<r.length;n++){const{name:h,fn:p}=r[n],{x:m,y:g,data:y,reset:v}=await p({x:a,y:c,initialPlacement:o,placement:d,strategy:i,middlewareData:f,rects:l,platform:s,elements:{reference:t,floating:e}});a=null!=m?m:a,c=null!=g?g:c,f={...f,[h]:null!=y?y:{}},v&&("object"==typeof v&&(v.placement&&(d=v.placement),v.rects&&(l=!0===v.rects?await s.getElementRects({reference:t,floating:e,strategy:i}):v.rects),({x:a,y:c}=u({...l,placement:d}))),n=-1)}return{x:a,y:c,placement:d,strategy:i,middlewareData:f}})(t,e,{platform:K,...n});function Z(t,e){const n=t.getAttribute(e);return n?n.split(/\s+/):[]}function tt(t,e,n){t.setAttribute(e,n.join(" "))}const et=n`:host{--n-tooltip-background:rgba(20, 20, 20, 0.95);--n-tooltip-color:#fff;--n-tooltip-key-border:rgba(255, 255, 255, 0.03);--n-tooltip-key-background:rgba(255, 255, 255, 0.1);position:absolute;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .4s ease,visibility .4s ease;z-index:var(--n-index-popout)}.n-tooltip{gap:var(--n-space-s);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);line-height:var(--n-line-height);color:var(--n-tooltip-color);padding:calc(var(--n-space-s)/ 1.5) var(--n-space-s);background-color:var(--n-tooltip-background);border-radius:var(--n-border-radius-s)}.n-tooltip,.n-tooltip-shortcut{display:flex;align-items:center}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){box-sizing:border-box;margin:0;inline-size:var(--n-size-icon-m);block-size:var(--n-size-icon-m);border-radius:var(--n-border-radius-s);border:1px solid var(--n-tooltip-key-border)!important;padding:1px!important;text-align:center;font-size:var(--n-font-size-xs);line-height:var(--n-line-height-tight);letter-spacing:-.5px;vertical-align:middle!important;background-color:var(--n-tooltip-key-background)}`;var nt;let ot=nt=class extends o{constructor(){super(...arguments),this.shortcutSlot=new l(this,"shortcut"),this.proxy=document.createElement("span"),this.visible=!1,this.position="top",this.role="tooltip",this.id="",this.delay=300,this.updatePosition=()=>{return Q(this.targetElement,this,{placement:this.position,middleware:[(t={padding:8},void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:o,placement:i}=e,{mainAxis:r=!0,crossAxis:s=!1,limiter:l={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...a}=t,d={x:n,y:o},h=await m(e,a),u=f(c(i)),p="x"===u?"y":"x";let g=d[u],y=d[p];if(r){const t="y"===u?"bottom":"right";g=v(g+h["y"===u?"top":"left"],g,g-h[t])}if(s){const t="y"===p?"bottom":"right";y=v(y+h["y"===p?"top":"left"],y,y-h[t])}const b=l.fn({...e,[u]:g,[p]:y});return{...b,data:{x:b.x-n,y:b.y-o}}}}),L(8),k()]}).then((({x:t,y:e})=>{this.style.insetInlineStart=`${t}px`,this.style.insetBlockStart=`${e}px`}));var t},this.handleScroll=()=>{this.visible&&this.updatePosition()},this.showTooltip=()=>{var t;this.visible||(null===(t=nt.lastOpened)||void 0===t||t.hideTooltip(),nt.lastOpened=this,this.updatePosition().then((()=>{this.visible=!0})))},this.hideTooltip=()=>{this.visible=!1},this.hideOnEscape=t=>{this.visible&&"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{var t,e;const n=null===(e=null===(t=this.targetElement)||void 0===t?void 0:t.focusableRef)||void 0===e?void 0:e.value;n&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,n.insertAdjacentElement("afterend",this.proxy),function(t,e,n){const o=Z(t,e);o.includes(n)||tt(t,e,o.concat(n))}(n,"aria-describedby",this.id))},this.removeDescribedBy=()=>{var t,e;const n=null===(e=null===(t=this.targetElement)||void 0===t?void 0:t.focusableRef)||void 0===e?void 0:e.value;n&&(this.proxy.remove(),function(t,e,n){const o=Z(t,e);o.includes(n)&&tt(t,e,o.filter((t=>t!==n)))}(n,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();const t=this.getRootNode(),e=`[aria-describedby='${this.id}']`,n=t.querySelector(e);n?(this.targetElement=n,n.addEventListener("keydown",this.hideOnEscape),n.addEventListener("mouseenter",this.showTooltip),n.addEventListener("mouseleave",this.hideTooltip),n.addEventListener("focus",this.showTooltip),n.addEventListener("blur",this.hideTooltip),window.addEventListener("resize",this.updatePosition,{passive:!0}),window.addEventListener("scroll",this.handleScroll,{passive:!0})):console.warn("NORD: tooltip found no element matching selector:",e)}disconnectedCallback(){super.disconnectedCallback(),this.targetElement&&(this.targetElement.removeEventListener("keydown",this.hideOnEscape),this.targetElement.removeEventListener("mouseenter",this.showTooltip),this.targetElement.removeEventListener("mouseleave",this.hideTooltip),this.targetElement.removeEventListener("focus",this.showTooltip),this.targetElement.removeEventListener("blur",this.hideTooltip),window.removeEventListener("resize",this.updatePosition),window.removeEventListener("scroll",this.handleScroll))}willUpdate(t){t.has("id")&&!this.id&&console.warn("NORD: The tooltip requires an id attribute and value"),t.has("visible")&&(this.visible?(this.addDescribedBy(),this.style.transitionDelay=`${this.delay}ms`,this.style.visibility="visible",this.style.opacity="1"):(this.removeDescribedBy(),this.style.transitionDelay="0ms",this.style.visibility="hidden",this.style.opacity="0"))}render(){return i`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}};ot.styles=[a,et],t([s()],ot.prototype,"visible",void 0),t([r({reflect:!0})],ot.prototype,"position",void 0),t([r({reflect:!0})],ot.prototype,"role",void 0),t([r({reflect:!0})],ot.prototype,"id",void 0),t([r({reflect:!0,type:Number})],ot.prototype,"delay",void 0),ot=nt=t([e("nord-tooltip")],ot);var it=ot;export{it as default};
|
|
2
2
|
//# sourceMappingURL=Tooltip.js.map
|