npm - @nordhealth/components - Versions diffs - 2.7.0 → 2.8.0 - Mend

@nordhealth/components 2.7.0 → 2.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/custom-elements.json +1184 -1091
package/lib/Avatar.js +1 -1
package/lib/Avatar.js.map +1 -1
package/lib/Button.js +1 -1
package/lib/Button.js.map +1 -1
package/lib/{Calendar-1cdf8429.js → Calendar-685c3990.js} +1 -1
package/lib/{Calendar-1cdf8429.js.map → Calendar-685c3990.js.map} +1 -1
package/lib/Calendar.js +1 -1
package/lib/DatePicker.js +1 -1
package/lib/LightDismissController-a2645ae6.js.map +1 -1
package/lib/Modal.js +1 -1
package/lib/Modal.js.map +1 -1
package/lib/ModalController.js +2 -0
package/lib/ModalController.js.map +1 -0
package/lib/Select.js +1 -1
package/lib/Select.js.map +1 -1
package/lib/bundle.js +7 -7
package/lib/bundle.js.map +1 -1
package/lib/index.js +1 -1
package/lib/src/common/controllers/LightDismissController.d.ts +1 -2
package/lib/src/modal/Modal.d.ts +14 -14
package/lib/src/modal/ModalController.d.ts +34 -0
package/package.json +3 -3

package/lib/Avatar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as a,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as e,y as s,b as i}from"./lit-element-9178eae5.js";import{e as n}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{s as l}from"./Component-92eb6234.js";import{f as v}from"./fsm-50373df9.js";import{o as c}from"./observe-a9c6dfb6.js";import"./VisuallyHidden.js";const d=t`:host{--_n-avatar-color:var(--n-avatar-color, var(--n-color-status-highlight));--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-l));--_n-avatar-border-radius:var(--n-border-radius-circle);--_n-avatar-font-size:var(--n-font-size-s);--_n-avatar-box-shadow:none;display:inline-flex;block-size:var(--_n-avatar-size);inline-size:var(--_n-avatar-size)}:host(:empty) .n-avatar-inner,:host(:not(:empty)) svg{display:none}.n-avatar{background:var(--_n-avatar-color);border-radius:var(--_n-avatar-border-radius);box-shadow:var(--_n-avatar-box-shadow);overflow:hidden;inline-size:100%;block-size:100%;display:grid;place-items:center;color:var(--n-color-text-on-accent);font-size:var(--_n-avatar-font-size);font-weight:var(--n-font-weight-active)}img,svg{inline-size:100%;block-size:auto;object-fit:cover}.n-loading{display:none}:host([size="s"]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-m) * 1.25));--_n-avatar-font-size:var(--n-font-size-xs)}:host([size="l"]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xl));--_n-avatar-font-size:var(--n-font-size-l)}:host([size=xl]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xxl));--_n-avatar-font-size:var(--n-font-size-xxl)}:host([size=xxl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xxl) * 1.5));--_n-avatar-font-size:var(--n-font-size-xxxl)}:host([variant=square]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-accent));--_n-avatar-border-radius:var(--n-border-radius);--_n-avatar-box-shadow:var(--n-box-shadow)}`,{transition:h}=v({initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}});let z=class extends e{constructor(){super(...arguments),this.state="initial",this.size="m",this.name="",this.variant="default"}render(){return s`<div class="n-avatar">${"initial"!==this.state?this.renderImage():i} ${"loaded"!==this.state?this.renderFallback():i}</div>`}handleSrcChange(){const a=this.src?"src-set":"src-clear";this.state=h(this.state,a)}renderImage(){return this.src?s`<slot hidden></slot><img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:i}renderFallback(){return s`<nord-visually-hidden>${this.name}</nord-visually-hidden><div class="n-avatar-inner" aria-hidden="true"><slot></slot></div><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--_n-avatar-color)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="#fff" opacity=".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")}};z.styles=[l,d],a([o()],z.prototype,"state",void 0),a([n({reflect:!0})],z.prototype,"size",void 0),a([n({reflect:!0})],z.prototype,"src",void 0),a([n()],z.prototype,"name",void 0),a([n({reflect:!0})],z.prototype,"variant",void 0),a([c("src")],z.prototype,"handleSrcChange",null),z=a([r("nord-avatar")],z);var f=z;export{f as default};
+import{_ as a,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as e,y as s,b as i}from"./lit-element-9178eae5.js";import{e as n}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{s as l}from"./Component-92eb6234.js";import{f as v}from"./fsm-50373df9.js";import{o as c}from"./observe-a9c6dfb6.js";import"./VisuallyHidden.js";const d=t`:host{--_n-avatar-color:var(--n-avatar-color, var(--n-color-status-highlight));--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-l));--_n-avatar-border-radius:var(--n-border-radius-circle);--_n-avatar-font-size:var(--n-font-size-xs);--_n-avatar-box-shadow:none;display:inline-flex;block-size:var(--_n-avatar-size);inline-size:var(--_n-avatar-size)}:host(:empty) .n-avatar-inner,:host(:not(:empty)) svg{display:none}.n-avatar{background:var(--_n-avatar-color);border-radius:var(--_n-avatar-border-radius);box-shadow:var(--_n-avatar-box-shadow);overflow:hidden;inline-size:100%;block-size:100%;display:grid;place-items:center;color:var(--n-color-text-on-accent);font-size:var(--_n-avatar-font-size);font-weight:var(--n-font-weight-active)}img,svg{inline-size:100%;block-size:auto;object-fit:cover}.n-loading{display:none}:host([size="s"]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-m) * 1.25));--_n-avatar-font-size:calc(var(--n-font-size-xs) / 1.1)}:host([size="l"]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xl));--_n-avatar-font-size:var(--n-font-size-m)}:host([size=xl]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xxl));--_n-avatar-font-size:var(--n-font-size-xxl)}:host([size=xxl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xxl) * 1.5));--_n-avatar-font-size:var(--n-font-size-xxxl)}:host([variant=square]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-accent));--_n-avatar-border-radius:var(--n-border-radius);--_n-avatar-box-shadow:var(--n-box-shadow)}`,{transition:h}=v({initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}});let z=class extends e{constructor(){super(...arguments),this.state="initial",this.size="m",this.name="",this.variant="default"}render(){return s`<div class="n-avatar">${"initial"!==this.state?this.renderImage():i} ${"loaded"!==this.state?this.renderFallback():i}</div>`}handleSrcChange(){const a=this.src?"src-set":"src-clear";this.state=h(this.state,a)}renderImage(){return this.src?s`<slot hidden></slot><img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:i}renderFallback(){return s`<nord-visually-hidden>${this.name}</nord-visually-hidden><div class="n-avatar-inner" aria-hidden="true"><slot></slot></div><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--_n-avatar-color)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="#fff" opacity=".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")}};z.styles=[l,d],a([o()],z.prototype,"state",void 0),a([n({reflect:!0})],z.prototype,"size",void 0),a([n({reflect:!0})],z.prototype,"src",void 0),a([n()],z.prototype,"name",void 0),a([n({reflect:!0})],z.prototype,"variant",void 0),a([c("src")],z.prototype,"handleSrcChange",null),z=a([r("nord-avatar")],z);var f=z;export{f as default};
 //# sourceMappingURL=Avatar.js.map

package/lib/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm, States } from \"../common/fsm.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nconst { transition } = fsm({\n initial: {\n \"src-set\": \"loading\",\n },\n loading: {\n load: \"loaded\",\n error: \"initial\",\n \"src-clear\": \"initial\",\n },\n loaded: {\n \"src-set\": \"loading\",\n \"src-clear\": \"initial\",\n },\n})\n\n/*\n Avatar is used for showing a thumbnail representation of a user or entity.\n * Default avatar illustration is displayed when no src is specified.\n \n @status ready\n * @category image\n \n @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).\n * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).\n /\n\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n static styles = [componentStyle, style]\n\n @state() private state: States<typeof transition> = \"initial\"\n\n /\n The size of the avatar.\n /\n @property({ reflect: true }) size: \"s\" \| \"m\" \| \"l\" \| \"xl\" \| \"xxl\" = \"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 /\n The style variant of the avatar.\n */\n @property({ reflect: true }) variant: \"default\" \| \"square\" = \"default\"\n\n render() {\n return html`\n <div class=\"n-avatar\">\n ${this.state !== \"initial\" ? this.renderImage() : nothing}\n ${this.state !== \"loaded\" ? this.renderFallback() : nothing}\n </div>\n `\n }\n\n @observe(\"src\")\n protected handleSrcChange() {\n const event = this.src ? \"src-set\" : \"src-clear\"\n this.state = transition(this.state, event)\n }\n\n protected renderImage() {\n return this.src\n ? html`\n <slot hidden></slot>\n <img\n class=\"n-${this.state}\"\n src=${this.src}\n @load=${this.handleLoad}\n @error=${this.handleError}\n alt=${this.name \|\| \"\"}\n />\n `\n : nothing\n }\n\n protected renderFallback() {\n return html`\n <nord-visually-hidden>${this.name}</nord-visually-hidden>\n <div class=\"n-avatar-inner\" aria-hidden=\"true\">\n <slot></slot>\n </div>\n <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 27 27\">\n <rect fill=\"var(--_n-avatar-color)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n <g fill=\"#fff\" opacity=\".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"],"names":["transition","fsm","initial","loading","load","error","loaded","Avatar","LitElement","constructor","this","state","size","name","variant","render","html","renderImage","nothing","renderFallback","handleSrcChange","event","src","handleLoad","handleError","styles","componentStyle","style","__decorate","prototype","property","reflect","observe","customElement"],"mappings":"~~82DASMA~~,WAAEA,GAAeC,EAAI,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAM,SACNC,MAAO,UACP,YAAa,WAEfC,OAAQ,CACN,UAAW,UACX,YAAa,aAgBjB,IAAqBC,EAArB,cAAoCC,EAApCC,kCAGmBC,KAAKC,MAA8B,UAKvBD,KAAIE,KAAmC,IAUxDF,KAAIG,KAAW,GAKEH,KAAOI,QAAyB,SAuD9D,CArDCC,SACE,OAAOC,CAAI,yBAEU,YAAfN,KAAKC,MAAsBD,KAAKO,cAAgBC,KACjC,WAAfR,KAAKC,MAAqBD,KAAKS,iBAAmBD,SAGzD,CAGSE,kBACR,MAAMC,EAAQX,KAAKY,IAAM,UAAY,YACrCZ,KAAKC,MAAQX,EAAWU,KAAKC,MAAOU,EACrC,CAESJ,cACR,OAAOP,KAAKY,IACRN,CAAI,qCAGWN,KAAKC,eACVD,KAAKY,eACHZ,KAAKa,uBACJb,KAAKc,qBACRd,KAAKG,MAAQ,OAGvBK,CACL,CAESC,iBACR,OAAOH,CAAI,yBACeN,KAAKG,6XAYhC,CAEOU,aACNb,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,OACrC,CAEOa,cACNd,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,QACrC,GA5EMJ,EAAAkB,OAAS,CAACC,EAAgBC,GAExBC,EAAA,CAARjB,KAA4DJ,EAAAsB,UAAA,aAAA,GAKhCD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAkDxB,EAAAsB,UAAA,YAAA,GAK1CD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAoBxB,EAAAsB,UAAA,WAAA,GAK7BD,EAAA,CAAXE,KAA4BvB,EAAAsB,UAAA,YAAA,GAKAD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAiDxB,EAAAsB,UAAA,eAAA,GAYtED,EAAA,CADCI,EAAQ,QAIRzB,EAAAsB,UAAA,kBAAA,MAtCkBtB,EAAMqB,EAAA,CAD1BK,EAAc,gBACM1B,SAAAA"}
1	+ {"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Avatar.css\"\nimport { fsm, States } from \"../common/fsm.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\n\nconst { transition } = fsm({\n initial: {\n \"src-set\": \"loading\",\n },\n loading: {\n load: \"loaded\",\n error: \"initial\",\n \"src-clear\": \"initial\",\n },\n loaded: {\n \"src-set\": \"loading\",\n \"src-clear\": \"initial\",\n },\n})\n\n/*\n Avatar is used for showing a thumbnail representation of a user or entity.\n * Default avatar illustration is displayed when no src is specified.\n \n @status ready\n * @category image\n \n @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).\n * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).\n /\n\n@customElement(\"nord-avatar\")\nexport default class Avatar extends LitElement {\n static styles = [componentStyle, style]\n\n @state() private state: States<typeof transition> = \"initial\"\n\n /\n The size of the avatar.\n /\n @property({ reflect: true }) size: \"s\" \| \"m\" \| \"l\" \| \"xl\" \| \"xxl\" = \"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 /\n The style variant of the avatar.\n */\n @property({ reflect: true }) variant: \"default\" \| \"square\" = \"default\"\n\n render() {\n return html`\n <div class=\"n-avatar\">\n ${this.state !== \"initial\" ? this.renderImage() : nothing}\n ${this.state !== \"loaded\" ? this.renderFallback() : nothing}\n </div>\n `\n }\n\n @observe(\"src\")\n protected handleSrcChange() {\n const event = this.src ? \"src-set\" : \"src-clear\"\n this.state = transition(this.state, event)\n }\n\n protected renderImage() {\n return this.src\n ? html`\n <slot hidden></slot>\n <img\n class=\"n-${this.state}\"\n src=${this.src}\n @load=${this.handleLoad}\n @error=${this.handleError}\n alt=${this.name \|\| \"\"}\n />\n `\n : nothing\n }\n\n protected renderFallback() {\n return html`\n <nord-visually-hidden>${this.name}</nord-visually-hidden>\n <div class=\"n-avatar-inner\" aria-hidden=\"true\">\n <slot></slot>\n </div>\n <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 27 27\">\n <rect fill=\"var(--_n-avatar-color)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n <g fill=\"#fff\" opacity=\".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"],"names":["transition","fsm","initial","loading","load","error","loaded","Avatar","LitElement","constructor","this","state","size","name","variant","render","html","renderImage","nothing","renderFallback","handleSrcChange","event","src","handleLoad","handleError","styles","componentStyle","style","__decorate","prototype","property","reflect","observe","customElement"],"mappings":"23DASMA,WAAEA,GAAeC,EAAI,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAM,SACNC,MAAO,UACP,YAAa,WAEfC,OAAQ,CACN,UAAW,UACX,YAAa,aAgBjB,IAAqBC,EAArB,cAAoCC,EAApCC,kCAGmBC,KAAKC,MAA8B,UAKvBD,KAAIE,KAAmC,IAUxDF,KAAIG,KAAW,GAKEH,KAAOI,QAAyB,SAuD9D,CArDCC,SACE,OAAOC,CAAI,yBAEU,YAAfN,KAAKC,MAAsBD,KAAKO,cAAgBC,KACjC,WAAfR,KAAKC,MAAqBD,KAAKS,iBAAmBD,SAGzD,CAGSE,kBACR,MAAMC,EAAQX,KAAKY,IAAM,UAAY,YACrCZ,KAAKC,MAAQX,EAAWU,KAAKC,MAAOU,EACrC,CAESJ,cACR,OAAOP,KAAKY,IACRN,CAAI,qCAGWN,KAAKC,eACVD,KAAKY,eACHZ,KAAKa,uBACJb,KAAKc,qBACRd,KAAKG,MAAQ,OAGvBK,CACL,CAESC,iBACR,OAAOH,CAAI,yBACeN,KAAKG,6XAYhC,CAEOU,aACNb,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,OACrC,CAEOa,cACNd,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,QACrC,GA5EMJ,EAAAkB,OAAS,CAACC,EAAgBC,GAExBC,EAAA,CAARjB,KAA4DJ,EAAAsB,UAAA,aAAA,GAKhCD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAkDxB,EAAAsB,UAAA,YAAA,GAK1CD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAoBxB,EAAAsB,UAAA,WAAA,GAK7BD,EAAA,CAAXE,KAA4BvB,EAAAsB,UAAA,YAAA,GAKAD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAiDxB,EAAAsB,UAAA,eAAA,GAYtED,EAAA,CADCI,EAAQ,QAIRzB,EAAAsB,UAAA,kBAAA,MAtCkBtB,EAAMqB,EAAA,CAD1BK,EAAc,gBACM1B,SAAAA"}

package/lib/Button.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as t,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as r,b as e,s as a}from"./lit-element-9178eae5.js";import{e as i}from"./property-03f59dce.js";import{e as s,n as b}from"./ref-0e619221.js";import{E as l}from"./EventController-d99ebeef.js";import{L as d}from"./LightDomController-3c726b20.js";import{c}from"./cond-338158e9.js";import"./Spinner.js";import{F as u}from"./FocusableMixin-34870ed3.js";import{I as h}from"./InputMixin-158f63fb.js";import{s as v}from"./Component-92eb6234.js";import"./directive-de55b00a.js";import"./if-defined-4598a996.js";const p=o`:host{--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-s));--_n-button-gap:var(--n-button-gap, var(--n-space-s));--_n-button-gradient:var(--n-button-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button));--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-strong));--_n-button-text-align:var(--n-button-text-align, center);--_n-button-padding-inline:calc(var(--n-space-m) / 1.2);--_n-button-box-shadow:var(--n-box-shadow);--_n-button-color:var(--n-color-text);--_n-button-opacity:1;--_n-button-border-style:solid;--_n-button-font-size:var(--n-font-size-m);--_n-button-font-weight:var(--n-font-weight);--_n-button-min-block-size:var(--n-space-xl);--_n-button-inline-size:fit-content;--_n-button-padding-block:calc(var(--n-space-s) / 1.6);display:inline-block}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--_n-button-background-color);opacity:var(--_n-button-opacity);border-radius:var(--_n-button-border-radius);border:1px var(--_n-button-border-style) var(--_n-button-border-color);box-shadow:var(--_n-button-box-shadow);color:var(--_n-button-color);cursor:pointer;display:flex;gap:var(--_n-button-gap);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-button-font-size);font-weight:var(--_n-button-font-weight);line-height:var(--n-line-height-form);margin:0;min-block-size:var(--_n-button-min-block-size);padding:var(--_n-button-padding-block) var(--_n-button-padding-inline);text-align:var(--_n-button-text-align);text-decoration:none;transition:.1s ease;transition-property:background-color,opacity,color,box-shadow;-webkit-user-select:none;user-select:none;position:relative;inline-size:var(--_n-button-inline-size)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--_n-button-gradient);border-radius:var(--_n-button-border-radius);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--_n-button-inline-size:100%;display:block}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-accent));--_n-button-border-style:solid;--_n-button-box-shadow:0 0 0 1px var(--n-color-accent),var(--n-box-shadow);outline:0}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--_n-button-box-shadow:none;--_n-button-color:var(--n-color-text-on-accent);--_n-button-font-weight:var(--n-font-weight-active)}:host([variant=primary]),:host([variant=primary]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-accent))}:host([variant=primary]) .n-button:hover{filter:brightness(93%)}:host([variant=primary]) .n-button:focus{--_n-button-box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--_n-button-border-color)}:host([variant=dashed]){--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-color:var(--n-color-text-weaker);--_n-button-border-style:dashed;--_n-button-box-shadow:none}:host([variant=dashed]) .n-button:hover{--_n-button-color:var(--n-color-text)}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--_n-button-box-shadow:none}:host([variant=plain]),:host([variant=plain]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--_n-button-box-shadow:none;--_n-button-color:var(--n-color-text-on-accent);--_n-button-font-weight:var(--n-font-weight-active)}:host([variant=danger]),:host([variant=danger]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-status-danger))}:host([variant=danger]) .n-button:hover{filter:brightness(93%)}:host([variant=danger]) .n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-status-danger));--_n-button-box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-status-danger)}:host([variant=switch]){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-sharp));--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-text-align:var(--n-button-text-align, start);--_n-button-background-color:var(--n-button-background-color, transparent);--_n-button-color:var(--n-color-text);--_n-button-font-weight:var(--n-font-weight-heading);--_n-button-box-shadow:none;--_n-button-min-block-size:calc(var(--n-space-xxl) - 1px);--_n-button-font-size:var(--n-font-size-l);--_n-button-padding-inline:var(--n-space-m);display:flex;align-items:center}:host([variant=switch]) .n-button *{pointer-events:none}:host([variant=switch]) .n-button::after{display:none}:host([variant=switch]) .n-button:hover,:host([variant=switch][aria-expanded=true]) .n-button{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-nav-hover))}:host([variant=switch]) .n-button:focus{--_n-button-box-shadow:inset 0 0 0 1px var(--_n-button-border-color)}.n-button-switch-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s)}:host([disabled]){--_n-button-border-color:var(--n-button-border-color, var(--_n-button-background-color));--_n-button-background-color:var(--n-button-background-color, var(--n-color-border));--_n-button-box-shadow:none;--_n-button-color:var(--n-color-text-weaker);--_n-button-opacity:0.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}.n-button-spinner{position:absolute;transform:translateX(-50%) translateY(-50%);inset-block-start:50%;inset-inline-start:50%}:host([loading]:not([href])){pointer-events:none}:host([loading]:not([href])) .n-content,:host([loading]:not([href])) ::slotted([slot=end]),:host([loading]:not([href])) ::slotted([slot=start]){opacity:0}:host([size="s"]){--_n-button-gap:var(--n-button-gap, calc(var(--n-space-s) / 2));--_n-button-padding-inline:var(--n-space-s);--_n-button-padding-block:calc(var(--n-space-s) / 1.5);--_n-button-font-size:var(--n-font-size-s);--_n-button-min-block-size:var(--n-space-l)}:host([size="s"]) .n-button{line-height:var(--n-line-height-tight)}:host([size="l"]){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius));--_n-button-padding-inline:calc(var(--n-space-l) / 1.3);--_n-button-font-size:var(--n-font-size-l);--_n-button-min-block-size:calc(var(--n-space-xxl) - var(--n-space-l));--_n-button-font-weight:var(--n-font-weight-active)}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}:host(:not([variant=primary],[variant=danger])) ::slotted(nord-icon){color:var(--n-color-icon)}slot:not([name])::slotted(nord-icon:not([size=xs])){transform:translateY(1px)}`;let g=class extends(h(u(a))){constructor(){super(...arguments),this.buttonRef=s(),this.events=new l(this),this.lightDom=new d(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.loading=!1,this.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"click",this.handleOuterClick,!0)}render(){const t=r`<slot name="start"></slot><div class="n-content"><slot></slot></div><nord-spinner class="n-button-spinner" color="currentColor" ?hidden="${!this.loading||this.href}"></nord-spinner><slot name="end">${"switch"===this.variant?r`<nord-icon class="n-button-switch-icon" name="interface-dropdown-small" size="s"></nord-icon>`:e}</slot>`;return this.href?this.renderLink(t):this.renderButton(t)}renderLink(t){return r`<a ${b(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${c(this.disabled,e,this.href)}" tabindex="${c(this.disabled,"-1")}" aria-disabled="${c(this.disabled,"true")}" role="${c(this.disabled,"link")}">${t}</a>`}renderButton(t){return r`<slot name="proxy" @slotchange="${this.handleProxyChange}"></slot><button ${b(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${c(this.name)}" value="${c(this.value)}" @click="${this.handleClick}" aria-disabled="${c(this.loading,"true")}" aria-expanded="${c(this.accessibleExpanded)}" aria-haspopup="${c(this.accessibleHasPopup)}">${t}</button>`}renderLightDom(){return this.href||!this.form?e:r`<button ${b(this.buttonRef)} slot="proxy" name="${c(this.name)}" value="${c(this.value)}" ?disabled="${this.disabled}" form="${c(this.getAttribute("form"))}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}handleProxyChange(t){const n=t.target,o=this.buttonRef.value;o&&o.assignedSlot!==n&&this.appendChild(o)}};g.styles=[v,p],t([i({reflect:!0})],g.prototype,"variant",void 0),t([i({reflect:!0})],g.prototype,"type",void 0),t([i({reflect:!0})],g.prototype,"size",void 0),t([i({attribute:"aria-expanded"})],g.prototype,"accessibleExpanded",void 0),t([i({attribute:"aria-haspopup"})],g.prototype,"accessibleHasPopup",void 0),t([i({reflect:!0})],g.prototype,"href",void 0),t([i({type:Boolean})],g.prototype,"download",void 0),t([i({reflect:!0})],g.prototype,"target",void 0),t([i({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),t([i({reflect:!0,type:Boolean})],g.prototype,"loading",void 0),g=t([n("nord-button")],g);var f=g;export{f as default};
+import{_ as t,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as r,b as e,s as a}from"./lit-element-9178eae5.js";import{e as i}from"./property-03f59dce.js";import{e as s,n as b}from"./ref-0e619221.js";import{E as l}from"./EventController-d99ebeef.js";import{L as d}from"./LightDomController-3c726b20.js";import{c}from"./cond-338158e9.js";import"./Spinner.js";import{F as u}from"./FocusableMixin-34870ed3.js";import{I as h}from"./InputMixin-158f63fb.js";import{s as v}from"./Component-92eb6234.js";import"./directive-de55b00a.js";import"./if-defined-4598a996.js";const p=o`:host{--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-s));--_n-button-gap:var(--n-button-gap, var(--n-space-s));--_n-button-gradient:var(--n-button-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button));--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-strong));--_n-button-text-align:var(--n-button-text-align, center);--_n-button-padding-inline:calc(var(--n-space-m) / 1.2);--_n-button-box-shadow:var(--n-box-shadow);--_n-button-color:var(--n-color-text);--_n-button-opacity:1;--_n-button-border-style:solid;--_n-button-font-size:var(--n-font-size-m);--_n-button-font-weight:var(--n-font-weight);--_n-button-min-block-size:var(--n-space-xl);--_n-button-inline-size:fit-content;--_n-button-padding-block:calc(var(--n-space-s) / 1.6);display:inline-block}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--_n-button-background-color);opacity:var(--_n-button-opacity);border-radius:var(--_n-button-border-radius);border:1px var(--_n-button-border-style) var(--_n-button-border-color);box-shadow:var(--_n-button-box-shadow);color:var(--_n-button-color);cursor:pointer;display:flex;gap:var(--_n-button-gap);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-button-font-size);font-weight:var(--_n-button-font-weight);line-height:var(--n-line-height-form);margin:0;min-block-size:var(--_n-button-min-block-size);padding:var(--_n-button-padding-block) var(--_n-button-padding-inline);text-align:var(--_n-button-text-align);text-decoration:none;transition:.1s ease;transition-property:background-color,opacity,color,box-shadow;-webkit-user-select:none;user-select:none;position:relative;inline-size:var(--_n-button-inline-size)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--_n-button-gradient);border-radius:var(--_n-button-border-radius);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--_n-button-inline-size:100%;display:block}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-accent));--_n-button-border-style:solid;--_n-button-box-shadow:0 0 0 1px var(--n-color-accent),var(--n-box-shadow);outline:0}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--_n-button-box-shadow:none;--_n-button-color:var(--n-color-text-on-accent);--_n-button-font-weight:var(--n-font-weight-active)}:host([variant=primary]),:host([variant=primary]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-accent))}:host([variant=primary]) .n-button:hover{filter:brightness(93%)}:host([variant=primary]) .n-button:focus{--_n-button-box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--_n-button-border-color)}:host([variant=dashed]){--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-color:var(--n-color-text-weaker);--_n-button-border-style:dashed;--_n-button-box-shadow:none}:host([variant=dashed]) .n-button:hover{--_n-button-color:var(--n-color-text)}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--_n-button-box-shadow:none}:host([variant=plain]),:host([variant=plain]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--_n-button-box-shadow:none;--_n-button-color:var(--n-color-text-on-accent);--_n-button-font-weight:var(--n-font-weight-active)}:host([variant=danger]),:host([variant=danger]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-status-danger))}:host([variant=danger]) .n-button:hover{filter:brightness(93%)}:host([variant=danger]) .n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-status-danger));--_n-button-box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-status-danger)}:host([variant=switch]){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-sharp));--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-text-align:var(--n-button-text-align, start);--_n-button-background-color:var(--n-button-background-color, transparent);--_n-button-color:var(--n-color-text);--_n-button-font-weight:var(--n-font-weight-heading);--_n-button-box-shadow:none;--_n-button-min-block-size:calc(var(--n-space-xxl) - 1px);--_n-button-font-size:var(--n-font-size-l);--_n-button-padding-inline:var(--n-space-m);display:flex;align-items:center}:host([variant=switch]) .n-button *{pointer-events:none}:host([variant=switch]) .n-button::after{display:none}:host([variant=switch]) .n-button:hover,:host([variant=switch][aria-expanded=true]) .n-button{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-nav-hover))}:host([variant=switch]) .n-button:focus{--_n-button-box-shadow:inset 0 0 0 1px var(--_n-button-border-color)}.n-button-switch-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s)}:host([disabled]){--_n-button-border-color:var(--n-button-border-color, var(--_n-button-background-color));--_n-button-background-color:var(--n-button-background-color, var(--n-color-border));--_n-button-box-shadow:none;--_n-button-color:var(--n-color-text-weaker);--_n-button-opacity:0.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}.n-button-spinner{position:absolute;transform:translateX(-50%) translateY(-50%);inset-block-start:50%;inset-inline-start:50%}:host([loading]:not([href])){pointer-events:none}:host([loading]:not([href])) .n-content,:host([loading]:not([href])) ::slotted([slot=end]),:host([loading]:not([href])) ::slotted([slot=start]){opacity:0}:host([size="s"]){--_n-button-gap:var(--n-button-gap, calc(var(--n-space-s) / 2));--_n-button-padding-inline:var(--n-space-s);--_n-button-padding-block:calc(var(--n-space-s) / 1.5);--_n-button-font-size:var(--n-font-size-s);--_n-button-min-block-size:var(--n-space-l)}:host([size="s"]) .n-button{line-height:var(--n-line-height-tight)}:host([size="l"]){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius));--_n-button-padding-inline:calc(var(--n-space-l) / 1.3);--_n-button-font-size:var(--n-font-size-l);--_n-button-min-block-size:calc(var(--n-space-xxl) - var(--n-space-l));--_n-button-font-weight:var(--n-font-weight-active)}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}:host(:not([variant=primary],[variant=danger])) ::slotted(nord-icon){color:var(--n-color-icon)}slot:not([name])::slotted(nord-icon:not([size=xs])){transform:translateY(1px)}`;let g=class extends(h(u(a))){constructor(){super(...arguments),this.buttonRef=s(),this.events=new l(this),this.lightDom=new d(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.loading=!1,this.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"click",this.handleOuterClick,!0)}render(){const t=r`<slot name="start"></slot><div class="n-content"><slot></slot></div><nord-spinner class="n-button-spinner" color="currentColor" ?hidden="${!this.loading||this.href}"></nord-spinner><slot name="end">${"switch"!==this.variant||this.href?e:r`<nord-icon class="n-button-switch-icon" name="interface-dropdown-small" size="s"></nord-icon>`}</slot>`;return this.href?this.renderLink(t):this.renderButton(t)}renderLink(t){return r`<a ${b(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${c(this.disabled,e,this.href)}" tabindex="${c(this.disabled,"-1")}" aria-disabled="${c(this.disabled,"true")}" role="${c(this.disabled,"link")}">${t}</a>`}renderButton(t){return r`<slot name="proxy" @slotchange="${this.handleProxyChange}"></slot><button ${b(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${c(this.name)}" value="${c(this.value)}" @click="${this.handleClick}" aria-disabled="${c(this.loading,"true")}" aria-expanded="${c(this.accessibleExpanded)}" aria-haspopup="${c(this.accessibleHasPopup)}">${t}</button>`}renderLightDom(){return this.href||!this.form?e:r`<button ${b(this.buttonRef)} slot="proxy" name="${c(this.name)}" value="${c(this.value)}" ?disabled="${this.disabled}" form="${c(this.getAttribute("form"))}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}handleProxyChange(t){const n=t.target,o=this.buttonRef.value;o&&o.assignedSlot!==n&&this.appendChild(o)}};g.styles=[v,p],t([i({reflect:!0})],g.prototype,"variant",void 0),t([i({reflect:!0})],g.prototype,"type",void 0),t([i({reflect:!0})],g.prototype,"size",void 0),t([i({attribute:"aria-expanded"})],g.prototype,"accessibleExpanded",void 0),t([i({attribute:"aria-haspopup"})],g.prototype,"accessibleHasPopup",void 0),t([i({reflect:!0})],g.prototype,"href",void 0),t([i({type:Boolean})],g.prototype,"download",void 0),t([i({reflect:!0})],g.prototype,"target",void 0),t([i({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),t([i({reflect:!0,type:Boolean})],g.prototype,"loading",void 0),g=t([n("nord-button")],g);var f=g;export{f as default};
 //# sourceMappingURL=Button.js.map

package/lib/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport \"../spinner/Spinner.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Button.css\"\n\n/*\n Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n \n @status ready\n * @category action\n * @slot - The button content\n * @slot start - Used to place content at the start of button text. Typically used for icons.\n * @slot end - Used to place content at the end of button text. Typically used for icons.\n \n @cssprop [--n-button-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-button-gap=var(--n-space-s)] - Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the button.\n * @cssprop [--n-button-background-color=var(--n-color-button)] - Controls the background color of the button, using [color tokens](/tokens/#color).\n * @cssprop [--n-button-border-color=var(--n-color-border-strong)] - Controls the border color of the button, using [color tokens](/tokens/#color).\n * @cssprop [--n-button-text-align=center] - Controls the text alignment for the text in the button.\n /\n@customElement(\"nord-button\")\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n static styles = [componentStyle, style]\n\n private buttonRef = createRef<HTMLButtonElement>()\n private events = new EventController(this)\n private lightDom = new LightDomController(this, {\n render: () => this.renderLightDom(),\n })\n\n /\n The style variant of the button.\n /\n @property({ reflect: true }) variant: \"default\" \| \"primary\" \| \"dashed\" \| \"plain\" \| \"danger\" \| \"switch\" = \"default\"\n\n /\n The type of the button.\n /\n @property({ reflect: true }) type: \"button\" \| \"submit\" \| \"reset\" = \"submit\"\n\n /\n The size of the button.\n * This affects font-size and padding.\n /\n @property({ reflect: true }) size: \"s\" \| \"m\" \| \"l\" = \"m\"\n\n /\n @private\n * This does not need to be documented,\n * since it is only for forwarding the aria-expanded attribute\n * to the internal button element.\n /\n @property({ attribute: \"aria-expanded\" }) accessibleExpanded?: \"true\" \| \"false\"\n\n /\n @private\n * This does not need to be documented,\n * since it is only for forwarding the aria-haspopup attribute\n * to the internal button element.\n /\n @property({ attribute: \"aria-haspopup\" }) accessibleHasPopup?:\n \| \"false\"\n \| \"true\"\n \| \"menu\"\n \| \"listbox\"\n \| \"tree\"\n \| \"grid\"\n \| \"dialog\"\n\n /\n When provided, renders the button as a link,\n * with its href attribute set to the given value.\n /\n @property({ reflect: true }) href?: string\n\n /\n When provided together with a href property, the button will\n * trigger a file download instead of a page visit.\n /\n @property({ type: Boolean }) download = false\n\n /\n When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n /\n @property({ reflect: true }) target: \"_self\" \| \"_blank\" \| \"_parent\" \| \"_top\" = \"_self\"\n\n /\n Controls whether the button expands to fill the width of its container.\n /\n @property({ reflect: true, type: Boolean }) expand = false\n\n /\n Controls whether the button is in loading state. Please note that the spinner\n * is hidden from assistive technologies, so you need to make sure to announce\n * the loading state to e.g. screen reader users. We also recommend disabling\n * all user interactions on the button itself while in loading state.\n /\n @property({ reflect: true, type: Boolean }) loading = false\n\n connectedCallback() {\n super.connectedCallback()\n this.events.listen(this, \"click\", this.handleOuterClick, true)\n }\n\n render() {\n const innards = html`\n <slot name=\"start\"></slot>\n <div class=\"n-content\">\n <slot></slot>\n </div>\n <nord-spinner class=\"n-button-spinner\" color=\"currentColor\" ?hidden=${!this.loading \|\| this.href}></nord-spinner>\n <slot name=\"end\">\n ${this.variant === \"switch\"\n ? html`<nord-icon class=\"n-button-switch-icon\" name=\"interface-dropdown-small\" size=\"s\"></nord-icon>`\n : nothing}\n </slot>\n `\n\n return this.href ? this.renderLink(innards) : this.renderButton(innards)\n }\n\n /\n We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n \n @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n /\n private renderLink(innards: TemplateResult) {\n return html`\n <a\n ${ref(this.focusableRef)}\n class=\"n-button\"\n target=${this.target}\n ?download=${this.download}\n href=${cond(this.disabled, nothing, this.href)}\n tabindex=${cond(this.disabled, \"-1\")}\n aria-disabled=${cond(this.disabled, \"true\")}\n role=${cond(this.disabled, \"link\")}\n >${innards}\n </a>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return html`\n <slot name=\"proxy\" @slotchange=${this.handleProxyChange}></slot>\n <button\n ${ref(this.focusableRef)}\n class=\"n-button\"\n ?disabled=${this.disabled}\n name=${cond(this.name)}\n value=${cond(this.value)}\n @click=${this.handleClick}\n aria-disabled=${cond(this.loading, \"true\")}\n aria-expanded=${cond(this.accessibleExpanded)}\n aria-haspopup=${cond(this.accessibleHasPopup)}\n >\n ${innards}\n </button>\n `\n }\n\n private renderLightDom() {\n if (this.href \|\| !this.form) {\n return nothing\n }\n\n return html`\n <button\n ${ref(this.buttonRef)}\n slot=\"proxy\"\n name=${cond(this.name)}\n value=${cond(this.value)}\n ?disabled=${this.disabled}\n form=${cond(this.getAttribute(\"form\"))}\n type=${this.type}\n ></button>\n `\n }\n\n private handleOuterClick = (e: MouseEvent) => {\n // we want to avoid emitting click events when a click\n // happens in blank space in the host, but not on the button\n // so we stop propagation of any events if click didn't happen on the internal or proxy button\n const isInternalButton = e\n .composedPath()\n .some(node => node === this.focusableRef.value \|\| node === this.buttonRef.value)\n\n if (!isInternalButton) {\n e.stopPropagation()\n }\n }\n\n private handleClick(e: Event) {\n if (this.buttonRef.value) {\n // prevents two events: one from internal button, one from proxy button\n e.stopPropagation()\n this.buttonRef.value.click()\n }\n }\n\n /\n React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\n * So we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in.\n */\n private handleProxyChange(e: Event) {\n const slot = e.target as HTMLSlotElement\n const proxyButton = this.buttonRef.value\n\n if (proxyButton && proxyButton.assignedSlot !== slot) {\n this.appendChild(proxyButton)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button\": Button\n }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","buttonRef","createRef","events","EventController","lightDom","LightDomController","render","renderLightDom","variant","type","size","download","target","expand","loading","handleOuterClick","e","composedPath","some","node","focusableRef","value","stopPropagation","connectedCallback","super","listen","innards","html","href","nothing","renderLink","renderButton","ref","cond","disabled","handleProxyChange","name","handleClick","accessibleExpanded","accessibleHasPopup","form","getAttribute","click","slot","proxyButton","assignedSlot","appendChild","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","Boolean","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport \"../spinner/Spinner.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Button.css\"\n\n/*\n Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n \n @status ready\n * @category action\n * @slot - The button content\n * @slot start - Used to place content at the start of button text. Typically used for icons.\n * @slot end - Used to place content at the end of button text. Typically used for icons.\n \n @cssprop [--n-button-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-button-gap=var(--n-space-s)] - Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the button.\n * @cssprop [--n-button-background-color=var(--n-color-button)] - Controls the background color of the button, using [color tokens](/tokens/#color).\n * @cssprop [--n-button-border-color=var(--n-color-border-strong)] - Controls the border color of the button, using [color tokens](/tokens/#color).\n * @cssprop [--n-button-text-align=center] - Controls the text alignment for the text in the button.\n /\n@customElement(\"nord-button\")\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n static styles = [componentStyle, style]\n\n private buttonRef = createRef<HTMLButtonElement>()\n private events = new EventController(this)\n private lightDom = new LightDomController(this, {\n render: () => this.renderLightDom(),\n })\n\n /\n The style variant of the button.\n /\n @property({ reflect: true }) variant: \"default\" \| \"primary\" \| \"dashed\" \| \"plain\" \| \"danger\" \| \"switch\" = \"default\"\n\n /\n The type of the button.\n /\n @property({ reflect: true }) type: \"button\" \| \"submit\" \| \"reset\" = \"submit\"\n\n /\n The size of the button.\n * This affects font-size and padding.\n /\n @property({ reflect: true }) size: \"s\" \| \"m\" \| \"l\" = \"m\"\n\n /\n @private\n * This does not need to be documented,\n * since it is only for forwarding the aria-expanded attribute\n * to the internal button element.\n /\n @property({ attribute: \"aria-expanded\" }) accessibleExpanded?: \"true\" \| \"false\"\n\n /\n @private\n * This does not need to be documented,\n * since it is only for forwarding the aria-haspopup attribute\n * to the internal button element.\n /\n @property({ attribute: \"aria-haspopup\" }) accessibleHasPopup?:\n \| \"false\"\n \| \"true\"\n \| \"menu\"\n \| \"listbox\"\n \| \"tree\"\n \| \"grid\"\n \| \"dialog\"\n\n /\n When provided, renders the button as a link,\n * with its href attribute set to the given value.\n /\n @property({ reflect: true }) href?: string\n\n /\n When provided together with a href property, the button will\n * trigger a file download instead of a page visit.\n /\n @property({ type: Boolean }) download = false\n\n /\n When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n /\n @property({ reflect: true }) target: \"_self\" \| \"_blank\" \| \"_parent\" \| \"_top\" = \"_self\"\n\n /\n Controls whether the button expands to fill the width of its container.\n /\n @property({ reflect: true, type: Boolean }) expand = false\n\n /\n Controls whether the button is in loading state. Please note that the spinner\n * is hidden from assistive technologies, so you need to make sure to announce\n * the loading state to e.g. screen reader users. We also recommend disabling\n * all user interactions on the button itself while in loading state.\n /\n @property({ reflect: true, type: Boolean }) loading = false\n\n connectedCallback() {\n super.connectedCallback()\n this.events.listen(this, \"click\", this.handleOuterClick, true)\n }\n\n render() {\n const innards = html`\n <slot name=\"start\"></slot>\n <div class=\"n-content\">\n <slot></slot>\n </div>\n <nord-spinner class=\"n-button-spinner\" color=\"currentColor\" ?hidden=${!this.loading \|\| this.href}></nord-spinner>\n <slot name=\"end\">\n ${this.variant === \"switch\" && !this.href\n ? html`<nord-icon class=\"n-button-switch-icon\" name=\"interface-dropdown-small\" size=\"s\"></nord-icon>`\n : nothing}\n </slot>\n `\n\n return this.href ? this.renderLink(innards) : this.renderButton(innards)\n }\n\n /\n We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n \n @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n /\n private renderLink(innards: TemplateResult) {\n return html`\n <a\n ${ref(this.focusableRef)}\n class=\"n-button\"\n target=${this.target}\n ?download=${this.download}\n href=${cond(this.disabled, nothing, this.href)}\n tabindex=${cond(this.disabled, \"-1\")}\n aria-disabled=${cond(this.disabled, \"true\")}\n role=${cond(this.disabled, \"link\")}\n >${innards}\n </a>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return html`\n <slot name=\"proxy\" @slotchange=${this.handleProxyChange}></slot>\n <button\n ${ref(this.focusableRef)}\n class=\"n-button\"\n ?disabled=${this.disabled}\n name=${cond(this.name)}\n value=${cond(this.value)}\n @click=${this.handleClick}\n aria-disabled=${cond(this.loading, \"true\")}\n aria-expanded=${cond(this.accessibleExpanded)}\n aria-haspopup=${cond(this.accessibleHasPopup)}\n >\n ${innards}\n </button>\n `\n }\n\n private renderLightDom() {\n if (this.href \|\| !this.form) {\n return nothing\n }\n\n return html`\n <button\n ${ref(this.buttonRef)}\n slot=\"proxy\"\n name=${cond(this.name)}\n value=${cond(this.value)}\n ?disabled=${this.disabled}\n form=${cond(this.getAttribute(\"form\"))}\n type=${this.type}\n ></button>\n `\n }\n\n private handleOuterClick = (e: MouseEvent) => {\n // we want to avoid emitting click events when a click\n // happens in blank space in the host, but not on the button\n // so we stop propagation of any events if click didn't happen on the internal or proxy button\n const isInternalButton = e\n .composedPath()\n .some(node => node === this.focusableRef.value \|\| node === this.buttonRef.value)\n\n if (!isInternalButton) {\n e.stopPropagation()\n }\n }\n\n private handleClick(e: Event) {\n if (this.buttonRef.value) {\n // prevents two events: one from internal button, one from proxy button\n e.stopPropagation()\n this.buttonRef.value.click()\n }\n }\n\n /\n React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\n * So we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in.\n */\n private handleProxyChange(e: Event) {\n const slot = e.target as HTMLSlotElement\n const proxyButton = this.buttonRef.value\n\n if (proxyButton && proxyButton.assignedSlot !== slot) {\n this.appendChild(proxyButton)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button\": Button\n }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","buttonRef","createRef","events","EventController","lightDom","LightDomController","render","renderLightDom","variant","type","size","download","target","expand","loading","handleOuterClick","e","composedPath","some","node","focusableRef","value","stopPropagation","connectedCallback","super","listen","innards","html","href","nothing","renderLink","renderButton","ref","cond","disabled","handleProxyChange","name","handleClick","accessibleExpanded","accessibleHasPopup","form","getAttribute","click","slot","proxyButton","assignedSlot","appendChild","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","Boolean","customElement"],"mappings":"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"}

package/lib/{Calendar-1cdf8429.js → Calendar-685c3990.js} RENAMED Viewed

@@ -1,2 +1,2 @@
 import{_ as e,e as a}from"./query-assigned-elements-e6cbac30.js";import{i as t,s as n,y as o}from"./lit-element-9178eae5.js";import{e as s}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{c as l}from"./repeat-ae6f075f.js";import{o as d}from"./tinykeys.module-84e6cc41.js";import"./Button.js";import"./VisuallyHidden.js";import c from"./Icon.js";import{E as h}from"./EventController-d99ebeef.js";import{D as u}from"./DirectionController-8b298382.js";import{LocalizeController as p}from"./LocalizeController.js";import{r as v}from"./number-c3ab3e95.js";import{i as m,p as f,a as g,s as y,e as b,b as w,g as x,c as D,d as k,f as z,h as F,j as M,k as S,l as Y}from"./dates-a8de5b83.js";import{o as $}from"./observe-a9c6dfb6.js";import{monthView as j}from"./month-view.js";import{DateSelectEvent as _}from"./DateSelectEvent.js";import{s as C}from"./Component-92eb6234.js";var L=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 57.4 47.6 2.8a10.566 10.566 0 1 0-14.56 15.316l51.968 49.35a3.486 3.486 0 0 1 0 5.068l-51.968 49.35a10.502 10.502 0 0 0 14.462 15.232l57.638-54.74A17.584 17.584 0 0 0 105 57.4z"/></svg>',title:"arrow-right-small",tags:"nordicon arrow right small caret pointing triangle chevron"});var N=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M99.736 140a10.486 10.486 0 0 1-7.238-2.884L35 82.6a17.598 17.598 0 0 1-.14-24.976l57.638-54.74a10.502 10.502 0 1 1 14.462 15.232l-51.968 49.35a3.486 3.486 0 0 0 0 5.068l51.968 49.35A10.5 10.5 0 0 1 99.736 140z"/></svg>',title:"arrow-left-small",tags:"nordicon arrow left small caret pointing triangle chevron"});var T=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M70 110.236a17.332 17.332 0 0 1-12.306-5.096L2.884 47.502A10.502 10.502 0 1 1 18.116 33.04l49.35 51.968a3.486 3.486 0 0 0 5.068 0l49.35-51.968a10.502 10.502 0 1 1 15.232 14.462L82.6 105a17.766 17.766 0 0 1-12.6 5.236z"/></svg>',title:"arrow-down-small",tags:"nordicon arrow down small caret pointing triangle chevron"});const O=e=>e.preventDefault();class I{constructor(e,a){this.hadFirstUpdate=!1,this.initialTouchX=0,this.initialTouchY=0,this.handleTouchStart=e=>{const[{pageX:a,pageY:t}]=e.changedTouches;this.initialTouchX=a,this.initialTouchY=t},this.handleTouchEnd=e=>{const[{pageX:a,pageY:t}]=e.changedTouches,{matchesGesture:n,onSwipeEnd:o}=this.options,s=a-this.initialTouchX,i=t-this.initialTouchY,r={initialX:this.initialTouchX,initialY:this.initialTouchY,pageX:a,pageY:t,distX:s,distY:i};n(r)&&(e.preventDefault(),o(r))},e.addController(this),this.events=new h(e),this.options={target:()=>e,...a}}hostUpdated(){if(!this.hadFirstUpdate){this.hadFirstUpdate=!0;const e=this.options.target();this.events.listen(e,"touchstart",this.handleTouchStart),this.events.listen(e,"touchmove",O),this.events.listen(e,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}const X=({distX:e,distY:a})=>Math.abs(e)>=70&&Math.abs(a)<=70,A=({distX:e,distY:a})=>Math.abs(a)>=70&&Math.abs(e)<=70&&a>0,E=t`:host{--_n-calendar-box-shadow:var(--n-calendar-box-shadow, var(--n-box-shadow-popout));--_n-calendar-border-radius:var(--n-calendar-border-radius, var(--n-border-radius-s));--_n-calendar-padding:var(--n-space-m) var(--n-space-m) calc(var(--n-space-m) * 1.25);--_n-calendar-inline-size:max-content;font-feature-settings:var(--n-font-features-reduced)}.n-calendar{-webkit-user-select:none;user-select:none;background:var(--n-color-surface);box-shadow:var(--_n-calendar-box-shadow);border-radius:var(--_n-calendar-border-radius);inline-size:var(--_n-calendar-inline-size);min-inline-size:min-content;padding:var(--_n-calendar-padding)}:host([expand]){--_n-calendar-inline-size:100%}.n-calendar-table{border-collapse:collapse;border-spacing:0;color:var(--n-color-text);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-date-picker-line-height);text-align:center;inline-size:100%}.n-calendar-table-header{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);letter-spacing:1px;line-height:var(--n-date-picker-line-height);padding-block-end:8px;text-decoration:none;text-transform:uppercase}.n-calendar-cell{text-align:center;padding:1px}.n-calendar-day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:0 0;border:0;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:inline-block;font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-variant-numeric:tabular-nums;font-weight:var(--n-font-weight);block-size:36px;padding:0 0 1px;position:relative;text-align:center;vertical-align:middle;inline-size:36px}.n-calendar-day[aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link);position:relative}.n-calendar-day:hover{background:var(--n-color-active)}.n-calendar-day:focus,.n-calendar-day[aria-pressed=true]{background:var(--n-color-accent);box-shadow:none;color:var(--n-color-text-on-accent);outline:0}.n-calendar-day:active{background:var(--n-color-accent);box-shadow:none!important;color:var(--n-color-text-on-accent)}.n-calendar-day:focus{box-shadow:0 0 5px var(--n-color-accent)}.n-calendar-day:not(.is-month){box-shadow:none}.n-calendar-day:not(.is-month),.n-calendar-day[aria-disabled=true]{background:0 0;color:var(--n-color-text-weakest);cursor:default}.n-calendar-day[aria-disabled=true]{color:var(--n-color-text-weaker);text-decoration:line-through}.n-calendar-day:not(.is-month)[aria-disabled=true]{color:var(--n-color-text-weakest);text-decoration:none}.n-calendar-day[aria-disabled=true][aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link)}.n-calendar-day[aria-disabled=true][aria-current=date]:focus{box-shadow:0 0 5px var(--n-color-accent);background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-calendar-day[aria-disabled=true]:not([aria-current=date])::before{display:none}.n-calendar-day.is-outside{background:0 0;box-shadow:none;color:var(--n-color-text-weakest);cursor:default;pointer-events:none}.n-calendar-day.is-outside::before{display:none}.n-calendar-header{align-items:start;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-calendar-nav{white-space:nowrap}.n-calendar-nav nord-button{--_n-button-padding-inline:11px;margin-inline-start:calc(var(--n-space-s)/ 2)}.n-calendar-select{display:inline-flex;margin-block-start:4px;position:relative;line-height:var(--n-line-height)}.n-calendar-select span{margin-inline-end:var(--n-space-s)}.n-calendar-select select{cursor:pointer;font-size:var(--n-font-size-l);block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%}.n-calendar-select select:focus+.n-calendar-select-label{box-shadow:0 0 0 2px var(--n-color-accent)}.n-calendar-select-label{align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);display:flex;font-size:var(--n-font-size-xl);font-weight:var(--n-font-weight-active);line-height:var(--n-date-picker-line-height);padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;text-transform:capitalize}`;c.registerIcon(L),c.registerIcon(N),c.registerIcon(T);const W=e=>a=>{a.preventDefault(),e(a)},U=()=>!1;let B=class extends n{constructor(){super(...arguments),this.dialogLabelId="dialog-header",this.direction=new u(this),this.swipe=new I(this,{matchesGesture:X,onSwipeEnd:({distX:e})=>this.addMonths(e<0?1:-1)}),this.shortcuts=d({ArrowRight:W((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:W((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:W((()=>this.addDays(7))),ArrowUp:W((()=>this.addDays(-7))),Home:W((()=>this.startOfWeek())),End:W((()=>this.endOfWeek())),PageUp:W((()=>this.addMonths(-1))),PageDown:W((()=>this.addMonths(1))),"Shift+PageUp":W((()=>this.addYears(-1))),"Shift+PageDown":W((()=>this.addYears(1)))}),this.localize=new p(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=1,this.min="",this.max="",this.expand=!1,this.isDateDisabled=U,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=e=>{const a=m(e,f(this.min),f(this.max)),t=!this.isDateDisabled(e);a&&t&&(this.value=g(e),this.dispatchEvent(new _("change",e)))},this.handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))},this.handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))},this.handleNextMonthClick=e=>{e.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=e=>{e.preventDefault(),this.addMonths(-1)},this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=()=>{this.activeFocus=!1}}focus(e){var a;const t=null!==(a=null==e?void 0:e.target)&&void 0!==a?a:"day";"day"===t?this.focusedDayNode.focus():"month"===t&&this.monthSelectNode.focus()}render(){const e=f(this.value),a=this.focusedDay.getMonth(),t=this.focusedDay.getFullYear(),n=f(this.min),s=f(this.max),i=n?y(n):void 0,r=s?b(s):void 0,d=(e||this.focusedDay).getFullYear(),c=n?n.getFullYear():d-10,h=s?s.getFullYear():d+10;return o`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${this.dialogLabelId}" aria-live="polite" aria-atomic="true">${this.monthNames[a]}, ${this.focusedDay.getFullYear()}</h2></nord-visually-hidden><div class="n-calendar-select"><select aria-label="${this.localize.term("monthSelectLabel")}" class="n-calendar-select-month" @input="${this.handleMonthSelect}">${this.monthNames.map(((e,n)=>o`<option value="${n}" ?selected="${n===a}" ?disabled="${!m(new Date(t,n,1),i,r)}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.monthNamesShort[a]}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div><div class="n-calendar-select"><select aria-label="${this.localize.term("yearSelectLabel")}" class="n-calendar-select-year" @input="${this.handleYearSelect}">${l(v(c,h),(e=>e),(e=>o`<option ?selected="${e===t}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.focusedDay.getFullYear()}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div></div><div class="n-calendar-nav"><nord-button class="n-calendar-prev" @click="${this.handlePreviousMonthClick}" ?disabled="${w(n,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("prevMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-left-small":"arrow-right-small"}" size="s"></nord-icon></nord-button><nord-button class="n-calendar-next" @click="${this.handleNextMonthClick}" ?disabled="${w(s,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("nextMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-right-small":"arrow-left-small"}" size="s"></nord-icon></nord-button></div></div>${j({onFocusOut:this.disableActiveFocus,onFocusIn:this.enableActiveFocus,dateFormatter:this.dateFormatShort,selectedDate:e,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.shortcuts,labelledById:this.dialogLabelId,dayNames:this.dayNames,dayNamesShort:this.dayNamesShort,firstDayOfWeek:this.firstDayOfWeek,min:n,max:s,isDateDisabled:this.isDateDisabled})}</div>`}handleValueChange(){this.setFocusedDay(f(this.value)||new Date)}handleFocusedDayChange(){this.activeFocus&&this.focusedDayNode.focus()}handleLangChange(){const e=this.localize.resolvedLang;this.dateFormatShort=new Intl.DateTimeFormat(e,{day:"numeric",month:"long"}),this.monthNames=x(e,"long"),this.monthNamesShort=x(e,"short"),this.dayNames=D(e,"long"),this.dayNamesShort=D(e,"narrow")}addDays(e){this.setFocusedDay(k(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(z(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(F(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const a=M(y(this.focusedDay),e),t=b(a),n=M(this.focusedDay,e);this.setFocusedDay(S(n,a,t))}setYear(e){const a=Y(y(this.focusedDay),e),t=b(a),n=Y(this.focusedDay,e);this.setFocusedDay(S(n,a,t))}setFocusedDay(e){this.focusedDay=S(e,f(this.min),f(this.max)),this.dispatchEvent(new _("nord-focus-date",this.focusedDay))}};B.styles=[C,E],e([r(".n-calendar-select-month",!0)],B.prototype,"monthSelectNode",void 0),e([r('button[tabindex="0"]')],B.prototype,"focusedDayNode",void 0),e([s()],B.prototype,"value",void 0),e([s({type:Number})],B.prototype,"firstDayOfWeek",void 0),e([s()],B.prototype,"min",void 0),e([s()],B.prototype,"max",void 0),e([s({reflect:!0,type:Boolean})],B.prototype,"expand",void 0),e([s({attribute:!1})],B.prototype,"isDateDisabled",void 0),e([i()],B.prototype,"activeFocus",void 0),e([i()],B.prototype,"focusedDay",void 0),e([$("value")],B.prototype,"handleValueChange",null),e([$("focusedDay","updated")],B.prototype,"handleFocusedDayChange",null),B=e([a("nord-calendar")],B);var P=B;export{P as C,I as S,A as i};
-//# sourceMappingURL=Calendar-1cdf8429.js.map
+//# sourceMappingURL=Calendar-685c3990.js.map

package/lib/{Calendar-1cdf8429.js.map → Calendar-685c3990.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar-1cdf8429.js","sources":["../../icons/lib/assets/arrow-right-small.js","../../icons/lib/assets/arrow-left-small.js","../../icons/lib/assets/arrow-down-small.js","../src/common/controllers/SwipeController.ts","../src/calendar/Calendar.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M105 57.4 47.6 2.8a10.566 10.566 0 1 0-14.56 15.316l51.968 49.35a3.486 3.486 0 0 1 0 5.068l-51.968 49.35a10.502 10.502 0 0 0 14.462 15.232l57.638-54.74A17.584 17.584 0 0 0 105 57.4z\"/></svg>'\nexport const title = \"arrow-right-small\"\nexport const tags = \"nordicon arrow right small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M99.736 140a10.486 10.486 0 0 1-7.238-2.884L35 82.6a17.598 17.598 0 0 1-.14-24.976l57.638-54.74a10.502 10.502 0 1 1 14.462 15.232l-51.968 49.35a3.486 3.486 0 0 0 0 5.068l51.968 49.35A10.5 10.5 0 0 1 99.736 140z\"/></svg>'\nexport const title = \"arrow-left-small\"\nexport const tags = \"nordicon arrow left small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M70 110.236a17.332 17.332 0 0 1-12.306-5.096L2.884 47.502A10.502 10.502 0 1 1 18.116 33.04l49.35 51.968a3.486 3.486 0 0 0 5.068 0l49.35-51.968a10.502 10.502 0 1 1 15.232 14.462L82.6 105a17.766 17.766 0 0 1-12.6 5.236z\"/></svg>'\nexport const title = \"arrow-down-small\"\nexport const tags = \"nordicon arrow down small caret pointing triangle chevron\"\n","import { ReactiveController, ReactiveElement } from \"lit\"\nimport { EventController } from \"./EventController.js\"\n\nexport type SwipeDetails = {\n initialX: number\n initialY: number\n pageX: number\n pageY: number\n distX: number\n distY: number\n}\n\nconst preventDefault = (e: Event) => e.preventDefault()\n\ntype SetRequired<T, K extends keyof T> = T & { [Property in K]-?: T[K] }\ntype SwipeControllerOptions = {\n target?: () => HTMLElement\n matchesGesture: (details: SwipeDetails) => boolean\n onSwipeEnd: (details: SwipeDetails) => void\n}\n\nexport class SwipeController implements ReactiveController {\n private events: EventController\n private hadFirstUpdate = false\n\n private initialTouchX: number = 0\n private initialTouchY: number = 0\n private options: SetRequired<SwipeControllerOptions, \"target\">\n\n constructor(host: ReactiveElement, options: SwipeControllerOptions) {\n host.addController(this)\n this.events = new EventController(host)\n\n this.options = {\n target: () => host,\n ...options,\n }\n }\n\n hostUpdated() {\n if (!this.hadFirstUpdate) {\n this.hadFirstUpdate = true\n\n const target = this.options.target()\n this.events.listen(target, \"touchstart\", this.handleTouchStart)\n this.events.listen(target, \"touchmove\", preventDefault)\n this.events.listen(target, \"touchend\", this.handleTouchEnd)\n }\n }\n\n hostDisconnected() {\n this.hadFirstUpdate = false\n }\n\n private handleTouchStart = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n this.initialTouchX = pageX\n this.initialTouchY = pageY\n }\n\n private handleTouchEnd = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n const { matchesGesture, onSwipeEnd } = this.options\n\n const distX = pageX - this.initialTouchX\n const distY = pageY - this.initialTouchY\n const details = { initialX: this.initialTouchX, initialY: this.initialTouchY, pageX, pageY, distX, distY }\n\n if (matchesGesture(details)) {\n event.preventDefault()\n onSwipeEnd(details)\n }\n }\n}\n\nconst THRESHOLD = 70\n\nexport const isHorizontalSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distX) >= THRESHOLD && Math.abs(distY) <= THRESHOLD\n\nexport const isDownwardsSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distY) >= THRESHOLD && Math.abs(distX) <= THRESHOLD && distY > 0\n","import { html, LitElement } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { repeat } from \"lit/directives/repeat.js\"\nimport { createKeybindingsHandler } from \"tinykeys\"\nimport * as arrowRightIcon from \"@nordhealth/icons/lib/assets/arrow-right-small.js\"\nimport * as arrowLeftIcon from \"@nordhealth/icons/lib/assets/arrow-left-small.js\"\nimport * as arrowDownIcon from \"@nordhealth/icons/lib/assets/arrow-down-small.js\"\n\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { isHorizontalSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport { range } from \"../common/number.js\"\nimport {\n addDays,\n clamp,\n DaysOfWeek,\n endOfMonth,\n endOfWeek,\n getDayNames,\n getMonthNames,\n inRange,\n isEqualMonth,\n parseISODate,\n printISODate,\n setMonth,\n setYear,\n startOfMonth,\n startOfWeek,\n} from \"../common/dates.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport { monthView } from \"./month-view.js\"\nimport { DateSelectEvent } from \"./DateSelectEvent.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Calendar.css\"\n\nexport type DateDisabledPredicate = (date: Date) => boolean\n\nIcon.registerIcon(arrowRightIcon)\nIcon.registerIcon(arrowLeftIcon)\nIcon.registerIcon(arrowDownIcon)\n\nconst preventDefault = (fn: EventListener) => (e: Event) => {\n e.preventDefault()\n fn(e)\n}\n\nconst isDateDisabled: DateDisabledPredicate = () => false\n\n/*\n Calendar allows user to pick a date. It comes with built-in\n * functionality that allows you to set a minimum and a maximum allowed date.\n * Please note that the date must be passed in ISO-8601 format.\n \n @status ready\n * @category list\n * @fires {DateSelectEvent} change - Dispatched when a date is selected and the value changes.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n \n @cssprop [--n-calendar-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-calendar-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n /\n@customElement(\"nord-calendar\")\nexport default class Calendar extends LitElement {\n static styles = [componentStyle, style]\n\n private dialogLabelId = \"dialog-header\"\n\n @query(\".n-calendar-select-month\", true) private monthSelectNode!: HTMLElement\n @query(`button[tabindex=\"0\"]`) private focusedDayNode!: HTMLButtonElement\n\n private direction = new DirectionController(this)\n private swipe = new SwipeController(this, {\n matchesGesture: isHorizontalSwipe,\n onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n })\n\n private shortcuts = createKeybindingsHandler({\n ArrowRight: preventDefault(() => this.addDays(this.direction.isLTR ? 1 : -1)),\n ArrowLeft: preventDefault(() => this.addDays(this.direction.isLTR ? -1 : 1)),\n ArrowDown: preventDefault(() => this.addDays(7)),\n ArrowUp: preventDefault(() => this.addDays(-7)),\n Home: preventDefault(() => this.startOfWeek()),\n End: preventDefault(() => this.endOfWeek()),\n PageUp: preventDefault(() => this.addMonths(-1)),\n PageDown: preventDefault(() => this.addMonths(1)),\n \"Shift+PageUp\": preventDefault(() => this.addYears(-1)),\n \"Shift+PageDown\": preventDefault(() => this.addYears(1)),\n })\n\n private localize = new LocalizeController<\"nord-calendar\">(this, {\n onLangChange: () => this.handleLangChange(),\n })\n\n /\n Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n * these are used to format dates exclusively for the benefit of screen readers.\n \n We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n /\n private dateFormatShort!: Intl.DateTimeFormat\n private monthNames!: string[]\n private monthNamesShort!: string[]\n private dayNames!: string[]\n private dayNamesShort!: string[]\n\n /\n The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.\n /\n @property() value: string = \"\"\n\n /\n Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n /\n @property({ type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /\n Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n /\n @property() min: string = \"\"\n\n /\n Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n /\n @property() max: string = \"\"\n\n /\n Controls whether the calendar expands to fill the width of its container.\n /\n @property({ reflect: true, type: Boolean }) expand = false\n\n /\n Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n /\n @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n @state() private activeFocus = false\n @state() private focusedDay = new Date()\n\n /\n Programmatically move focus to the calendar.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions & { target: \"day\" \| \"month\" }) {\n const target = options?.target ?? \"day\"\n\n if (target === \"day\") {\n this.focusedDayNode.focus()\n } else if (target === \"month\") {\n this.monthSelectNode.focus()\n }\n }\n\n render() {\n const valueAsDate = parseISODate(this.value)\n const focusedMonth = this.focusedDay.getMonth()\n const focusedYear = this.focusedDay.getFullYear()\n\n const minDate = parseISODate(this.min)\n const maxDate = parseISODate(this.max)\n const minDateStartOfMonth = minDate ? startOfMonth(minDate) : undefined\n const maxDateEndOfMonth = maxDate ? endOfMonth(maxDate) : undefined\n\n const selectedYear = (valueAsDate \|\| this.focusedDay).getFullYear()\n const minYear = minDate ? minDate.getFullYear() : selectedYear - 10\n const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10\n\n return html`\n <div class=\"n-calendar\">\n <div class=\"n-calendar-header\">\n <div>\n <nord-visually-hidden>\n <h2 id=${this.dialogLabelId} aria-live=\"polite\" aria-atomic=\"true\">\n ${this.monthNames[focusedMonth]}, ${this.focusedDay.getFullYear()}\n </h2>\n </nord-visually-hidden>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localize.term(\"monthSelectLabel\")}\n class=\"n-calendar-select-month\"\n @input=${this.handleMonthSelect}\n >\n ${this.monthNames.map(\n (month, i) =>\n html`\n <option\n value=${i}\n ?selected=${i === focusedMonth}\n ?disabled=${!inRange(new Date(focusedYear, i, 1), minDateStartOfMonth, maxDateEndOfMonth)}\n >\n ${month}\n </option>\n `\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.monthNamesShort[focusedMonth]}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localize.term(\"yearSelectLabel\")}\n class=\"n-calendar-select-year\"\n @input=${this.handleYearSelect}\n >\n ${repeat(\n range(minYear, maxYear),\n year => year,\n year => html`<option ?selected=${year === focusedYear}>${year}</option>`\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.focusedDay.getFullYear()}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n </div>\n\n <div class=\"n-calendar-nav\">\n <nord-button\n class=\"n-calendar-prev\"\n @click=${this.handlePreviousMonthClick}\n ?disabled=${isEqualMonth(minDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"prevMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-left-small\" : \"arrow-right-small\"} size=\"s\"></nord-icon>\n </nord-button>\n\n <nord-button\n class=\"n-calendar-next\"\n @click=${this.handleNextMonthClick}\n ?disabled=${isEqualMonth(maxDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"nextMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-right-small\" : \"arrow-left-small\"} size=\"s\"></nord-icon>\n </nord-button>\n </div>\n </div>\n\n ${monthView({\n onFocusOut: this.disableActiveFocus,\n onFocusIn: this.enableActiveFocus,\n dateFormatter: this.dateFormatShort,\n selectedDate: valueAsDate,\n focusedDate: this.focusedDay,\n onDateSelect: this.handleDaySelect,\n onKeyboardNavigation: this.shortcuts,\n labelledById: this.dialogLabelId,\n dayNames: this.dayNames,\n dayNamesShort: this.dayNamesShort,\n firstDayOfWeek: this.firstDayOfWeek,\n min: minDate,\n max: maxDate,\n isDateDisabled: this.isDateDisabled,\n })}\n </div>\n `\n }\n\n @observe(\"value\")\n protected handleValueChange() {\n this.setFocusedDay(parseISODate(this.value) \|\| new Date())\n }\n\n @observe(\"focusedDay\", \"updated\")\n protected handleFocusedDayChange() {\n if (this.activeFocus) {\n this.focusedDayNode.focus()\n }\n }\n\n private handleLangChange() {\n const lang = this.localize.resolvedLang\n this.dateFormatShort = new Intl.DateTimeFormat(lang, { day: \"numeric\", month: \"long\" })\n this.monthNames = getMonthNames(lang, \"long\")\n this.monthNamesShort = getMonthNames(lang, \"short\")\n this.dayNames = getDayNames(lang, \"long\")\n this.dayNamesShort = getDayNames(lang, \"narrow\")\n }\n\n private handleDaySelect = (day: Date) => {\n const isInRange = inRange(day, parseISODate(this.min), parseISODate(this.max))\n const isAllowed = !this.isDateDisabled(day)\n\n if (isInRange && isAllowed) {\n this.value = printISODate(day)\n this.dispatchEvent(new DateSelectEvent(\"change\", day))\n }\n }\n\n private addDays(days: number) {\n this.setFocusedDay(addDays(this.focusedDay, days))\n }\n\n private addMonths(months: number) {\n this.setMonth(this.focusedDay.getMonth() + months)\n }\n\n private addYears(years: number) {\n this.setYear(this.focusedDay.getFullYear() + years)\n }\n\n private startOfWeek() {\n this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private endOfWeek() {\n this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private setMonth(month: number) {\n const min = setMonth(startOfMonth(this.focusedDay), month)\n const max = endOfMonth(min)\n const date = setMonth(this.focusedDay, month)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setYear(year: number) {\n const min = setYear(startOfMonth(this.focusedDay), year)\n const max = endOfMonth(min)\n const date = setYear(this.focusedDay, year)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setFocusedDay(day: Date) {\n this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max))\n this.dispatchEvent(new DateSelectEvent(\"nord-focus-date\", this.focusedDay))\n }\n\n private handleMonthSelect = (e: any) => {\n this.setMonth(parseInt(e.target.value, 10))\n }\n\n private handleYearSelect = (e: any) => {\n this.setYear(parseInt(e.target.value, 10))\n }\n\n private handleNextMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(1)\n }\n\n private handlePreviousMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(-1)\n }\n\n private enableActiveFocus = () => {\n this.activeFocus = true\n }\n\n private disableActiveFocus = () => {\n this.activeFocus = false\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-calendar\": Calendar\n }\n}\n"],"names":["preventDefault","e","SwipeController","constructor","host","options","this","hadFirstUpdate","initialTouchX","initialTouchY","handleTouchStart","event","pageX","pageY","changedTouches","handleTouchEnd","matchesGesture","onSwipeEnd","distX","distY","details","initialX","initialY","addController","events","EventController","target","hostUpdated","listen","hostDisconnected","isHorizontalSwipe","Math","abs","isDownwardsSwipe","Icon","registerIcon","arrowRightIcon","arrowLeftIcon","arrowDownIcon","fn","isDateDisabled","Calendar","LitElement","dialogLabelId","direction","DirectionController","swipe","addMonths","shortcuts","createKeybindingsHandler","ArrowRight","addDays","isLTR","ArrowLeft","ArrowDown","ArrowUp","Home","startOfWeek","End","endOfWeek","PageUp","PageDown","addYears","localize","LocalizeController","onLangChange","handleLangChange","value","firstDayOfWeek","min","max","expand","activeFocus","focusedDay","Date","handleDaySelect","day","isInRange","inRange","parseISODate","isAllowed","printISODate","dispatchEvent","DateSelectEvent","handleMonthSelect","setMonth","parseInt","handleYearSelect","setYear","handleNextMonthClick","handlePreviousMonthClick","enableActiveFocus","disableActiveFocus","focus","_a","focusedDayNode","monthSelectNode","render","valueAsDate","focusedMonth","getMonth","focusedYear","getFullYear","minDate","maxDate","minDateStartOfMonth","startOfMonth","undefined","maxDateEndOfMonth","endOfMonth","selectedYear","minYear","maxYear","html","monthNames","term","map","month","i","monthNamesShort","repeat","range","year","isEqualMonth","monthView","onFocusOut","onFocusIn","dateFormatter","dateFormatShort","selectedDate","focusedDate","onDateSelect","onKeyboardNavigation","labelledById","dayNames","dayNamesShort","handleValueChange","setFocusedDay","handleFocusedDayChange","lang","resolvedLang","Intl","DateTimeFormat","getMonthNames","getDayNames","days","months","years","date","clamp","styles","componentStyle","style","__decorate","query","prototype","property","type","Number","reflect","Boolean","attribute","state","observe","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"Calendar-685c3990.js","sources":["../../icons/lib/assets/arrow-right-small.js","../../icons/lib/assets/arrow-left-small.js","../../icons/lib/assets/arrow-down-small.js","../src/common/controllers/SwipeController.ts","../src/calendar/Calendar.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M105 57.4 47.6 2.8a10.566 10.566 0 1 0-14.56 15.316l51.968 49.35a3.486 3.486 0 0 1 0 5.068l-51.968 49.35a10.502 10.502 0 0 0 14.462 15.232l57.638-54.74A17.584 17.584 0 0 0 105 57.4z\"/></svg>'\nexport const title = \"arrow-right-small\"\nexport const tags = \"nordicon arrow right small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M99.736 140a10.486 10.486 0 0 1-7.238-2.884L35 82.6a17.598 17.598 0 0 1-.14-24.976l57.638-54.74a10.502 10.502 0 1 1 14.462 15.232l-51.968 49.35a3.486 3.486 0 0 0 0 5.068l51.968 49.35A10.5 10.5 0 0 1 99.736 140z\"/></svg>'\nexport const title = \"arrow-left-small\"\nexport const tags = \"nordicon arrow left small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M70 110.236a17.332 17.332 0 0 1-12.306-5.096L2.884 47.502A10.502 10.502 0 1 1 18.116 33.04l49.35 51.968a3.486 3.486 0 0 0 5.068 0l49.35-51.968a10.502 10.502 0 1 1 15.232 14.462L82.6 105a17.766 17.766 0 0 1-12.6 5.236z\"/></svg>'\nexport const title = \"arrow-down-small\"\nexport const tags = \"nordicon arrow down small caret pointing triangle chevron\"\n","import { ReactiveController, ReactiveElement } from \"lit\"\nimport { EventController } from \"./EventController.js\"\n\nexport type SwipeDetails = {\n initialX: number\n initialY: number\n pageX: number\n pageY: number\n distX: number\n distY: number\n}\n\nconst preventDefault = (e: Event) => e.preventDefault()\n\ntype SetRequired<T, K extends keyof T> = T & { [Property in K]-?: T[K] }\ntype SwipeControllerOptions = {\n target?: () => HTMLElement\n matchesGesture: (details: SwipeDetails) => boolean\n onSwipeEnd: (details: SwipeDetails) => void\n}\n\nexport class SwipeController implements ReactiveController {\n private events: EventController\n private hadFirstUpdate = false\n\n private initialTouchX: number = 0\n private initialTouchY: number = 0\n private options: SetRequired<SwipeControllerOptions, \"target\">\n\n constructor(host: ReactiveElement, options: SwipeControllerOptions) {\n host.addController(this)\n this.events = new EventController(host)\n\n this.options = {\n target: () => host,\n ...options,\n }\n }\n\n hostUpdated() {\n if (!this.hadFirstUpdate) {\n this.hadFirstUpdate = true\n\n const target = this.options.target()\n this.events.listen(target, \"touchstart\", this.handleTouchStart)\n this.events.listen(target, \"touchmove\", preventDefault)\n this.events.listen(target, \"touchend\", this.handleTouchEnd)\n }\n }\n\n hostDisconnected() {\n this.hadFirstUpdate = false\n }\n\n private handleTouchStart = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n this.initialTouchX = pageX\n this.initialTouchY = pageY\n }\n\n private handleTouchEnd = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n const { matchesGesture, onSwipeEnd } = this.options\n\n const distX = pageX - this.initialTouchX\n const distY = pageY - this.initialTouchY\n const details = { initialX: this.initialTouchX, initialY: this.initialTouchY, pageX, pageY, distX, distY }\n\n if (matchesGesture(details)) {\n event.preventDefault()\n onSwipeEnd(details)\n }\n }\n}\n\nconst THRESHOLD = 70\n\nexport const isHorizontalSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distX) >= THRESHOLD && Math.abs(distY) <= THRESHOLD\n\nexport const isDownwardsSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distY) >= THRESHOLD && Math.abs(distX) <= THRESHOLD && distY > 0\n","import { html, LitElement } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { repeat } from \"lit/directives/repeat.js\"\nimport { createKeybindingsHandler } from \"tinykeys\"\nimport * as arrowRightIcon from \"@nordhealth/icons/lib/assets/arrow-right-small.js\"\nimport * as arrowLeftIcon from \"@nordhealth/icons/lib/assets/arrow-left-small.js\"\nimport * as arrowDownIcon from \"@nordhealth/icons/lib/assets/arrow-down-small.js\"\n\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport Icon from \"../icon/Icon.js\"\n\nimport { isHorizontalSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport { range } from \"../common/number.js\"\nimport {\n addDays,\n clamp,\n DaysOfWeek,\n endOfMonth,\n endOfWeek,\n getDayNames,\n getMonthNames,\n inRange,\n isEqualMonth,\n parseISODate,\n printISODate,\n setMonth,\n setYear,\n startOfMonth,\n startOfWeek,\n} from \"../common/dates.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport { monthView } from \"./month-view.js\"\nimport { DateSelectEvent } from \"./DateSelectEvent.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Calendar.css\"\n\nexport type DateDisabledPredicate = (date: Date) => boolean\n\nIcon.registerIcon(arrowRightIcon)\nIcon.registerIcon(arrowLeftIcon)\nIcon.registerIcon(arrowDownIcon)\n\nconst preventDefault = (fn: EventListener) => (e: Event) => {\n e.preventDefault()\n fn(e)\n}\n\nconst isDateDisabled: DateDisabledPredicate = () => false\n\n/*\n Calendar allows user to pick a date. It comes with built-in\n * functionality that allows you to set a minimum and a maximum allowed date.\n * Please note that the date must be passed in ISO-8601 format.\n \n @status ready\n * @category list\n * @fires {DateSelectEvent} change - Dispatched when a date is selected and the value changes.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n \n @cssprop [--n-calendar-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-calendar-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n /\n@customElement(\"nord-calendar\")\nexport default class Calendar extends LitElement {\n static styles = [componentStyle, style]\n\n private dialogLabelId = \"dialog-header\"\n\n @query(\".n-calendar-select-month\", true) private monthSelectNode!: HTMLElement\n @query(`button[tabindex=\"0\"]`) private focusedDayNode!: HTMLButtonElement\n\n private direction = new DirectionController(this)\n private swipe = new SwipeController(this, {\n matchesGesture: isHorizontalSwipe,\n onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n })\n\n private shortcuts = createKeybindingsHandler({\n ArrowRight: preventDefault(() => this.addDays(this.direction.isLTR ? 1 : -1)),\n ArrowLeft: preventDefault(() => this.addDays(this.direction.isLTR ? -1 : 1)),\n ArrowDown: preventDefault(() => this.addDays(7)),\n ArrowUp: preventDefault(() => this.addDays(-7)),\n Home: preventDefault(() => this.startOfWeek()),\n End: preventDefault(() => this.endOfWeek()),\n PageUp: preventDefault(() => this.addMonths(-1)),\n PageDown: preventDefault(() => this.addMonths(1)),\n \"Shift+PageUp\": preventDefault(() => this.addYears(-1)),\n \"Shift+PageDown\": preventDefault(() => this.addYears(1)),\n })\n\n private localize = new LocalizeController<\"nord-calendar\">(this, {\n onLangChange: () => this.handleLangChange(),\n })\n\n /\n Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n * these are used to format dates exclusively for the benefit of screen readers.\n \n We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n /\n private dateFormatShort!: Intl.DateTimeFormat\n private monthNames!: string[]\n private monthNamesShort!: string[]\n private dayNames!: string[]\n private dayNamesShort!: string[]\n\n /\n The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.\n /\n @property() value: string = \"\"\n\n /\n Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n * Default is Monday.\n /\n @property({ type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /\n Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n /\n @property() min: string = \"\"\n\n /\n Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n /\n @property() max: string = \"\"\n\n /\n Controls whether the calendar expands to fill the width of its container.\n /\n @property({ reflect: true, type: Boolean }) expand = false\n\n /\n Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n /\n @property({ attribute: false }) isDateDisabled: DateDisabledPredicate = isDateDisabled\n\n @state() private activeFocus = false\n @state() private focusedDay = new Date()\n\n /\n Programmatically move focus to the calendar.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions & { target: \"day\" \| \"month\" }) {\n const target = options?.target ?? \"day\"\n\n if (target === \"day\") {\n this.focusedDayNode.focus()\n } else if (target === \"month\") {\n this.monthSelectNode.focus()\n }\n }\n\n render() {\n const valueAsDate = parseISODate(this.value)\n const focusedMonth = this.focusedDay.getMonth()\n const focusedYear = this.focusedDay.getFullYear()\n\n const minDate = parseISODate(this.min)\n const maxDate = parseISODate(this.max)\n const minDateStartOfMonth = minDate ? startOfMonth(minDate) : undefined\n const maxDateEndOfMonth = maxDate ? endOfMonth(maxDate) : undefined\n\n const selectedYear = (valueAsDate \|\| this.focusedDay).getFullYear()\n const minYear = minDate ? minDate.getFullYear() : selectedYear - 10\n const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10\n\n return html`\n <div class=\"n-calendar\">\n <div class=\"n-calendar-header\">\n <div>\n <nord-visually-hidden>\n <h2 id=${this.dialogLabelId} aria-live=\"polite\" aria-atomic=\"true\">\n ${this.monthNames[focusedMonth]}, ${this.focusedDay.getFullYear()}\n </h2>\n </nord-visually-hidden>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localize.term(\"monthSelectLabel\")}\n class=\"n-calendar-select-month\"\n @input=${this.handleMonthSelect}\n >\n ${this.monthNames.map(\n (month, i) =>\n html`\n <option\n value=${i}\n ?selected=${i === focusedMonth}\n ?disabled=${!inRange(new Date(focusedYear, i, 1), minDateStartOfMonth, maxDateEndOfMonth)}\n >\n ${month}\n </option>\n `\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.monthNamesShort[focusedMonth]}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localize.term(\"yearSelectLabel\")}\n class=\"n-calendar-select-year\"\n @input=${this.handleYearSelect}\n >\n ${repeat(\n range(minYear, maxYear),\n year => year,\n year => html`<option ?selected=${year === focusedYear}>${year}</option>`\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.focusedDay.getFullYear()}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n </div>\n\n <div class=\"n-calendar-nav\">\n <nord-button\n class=\"n-calendar-prev\"\n @click=${this.handlePreviousMonthClick}\n ?disabled=${isEqualMonth(minDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"prevMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-left-small\" : \"arrow-right-small\"} size=\"s\"></nord-icon>\n </nord-button>\n\n <nord-button\n class=\"n-calendar-next\"\n @click=${this.handleNextMonthClick}\n ?disabled=${isEqualMonth(maxDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"nextMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-right-small\" : \"arrow-left-small\"} size=\"s\"></nord-icon>\n </nord-button>\n </div>\n </div>\n\n ${monthView({\n onFocusOut: this.disableActiveFocus,\n onFocusIn: this.enableActiveFocus,\n dateFormatter: this.dateFormatShort,\n selectedDate: valueAsDate,\n focusedDate: this.focusedDay,\n onDateSelect: this.handleDaySelect,\n onKeyboardNavigation: this.shortcuts,\n labelledById: this.dialogLabelId,\n dayNames: this.dayNames,\n dayNamesShort: this.dayNamesShort,\n firstDayOfWeek: this.firstDayOfWeek,\n min: minDate,\n max: maxDate,\n isDateDisabled: this.isDateDisabled,\n })}\n </div>\n `\n }\n\n @observe(\"value\")\n protected handleValueChange() {\n this.setFocusedDay(parseISODate(this.value) \|\| new Date())\n }\n\n @observe(\"focusedDay\", \"updated\")\n protected handleFocusedDayChange() {\n if (this.activeFocus) {\n this.focusedDayNode.focus()\n }\n }\n\n private handleLangChange() {\n const lang = this.localize.resolvedLang\n this.dateFormatShort = new Intl.DateTimeFormat(lang, { day: \"numeric\", month: \"long\" })\n this.monthNames = getMonthNames(lang, \"long\")\n this.monthNamesShort = getMonthNames(lang, \"short\")\n this.dayNames = getDayNames(lang, \"long\")\n this.dayNamesShort = getDayNames(lang, \"narrow\")\n }\n\n private handleDaySelect = (day: Date) => {\n const isInRange = inRange(day, parseISODate(this.min), parseISODate(this.max))\n const isAllowed = !this.isDateDisabled(day)\n\n if (isInRange && isAllowed) {\n this.value = printISODate(day)\n this.dispatchEvent(new DateSelectEvent(\"change\", day))\n }\n }\n\n private addDays(days: number) {\n this.setFocusedDay(addDays(this.focusedDay, days))\n }\n\n private addMonths(months: number) {\n this.setMonth(this.focusedDay.getMonth() + months)\n }\n\n private addYears(years: number) {\n this.setYear(this.focusedDay.getFullYear() + years)\n }\n\n private startOfWeek() {\n this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private endOfWeek() {\n this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek))\n }\n\n private setMonth(month: number) {\n const min = setMonth(startOfMonth(this.focusedDay), month)\n const max = endOfMonth(min)\n const date = setMonth(this.focusedDay, month)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setYear(year: number) {\n const min = setYear(startOfMonth(this.focusedDay), year)\n const max = endOfMonth(min)\n const date = setYear(this.focusedDay, year)\n\n this.setFocusedDay(clamp(date, min, max))\n }\n\n private setFocusedDay(day: Date) {\n this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max))\n this.dispatchEvent(new DateSelectEvent(\"nord-focus-date\", this.focusedDay))\n }\n\n private handleMonthSelect = (e: any) => {\n this.setMonth(parseInt(e.target.value, 10))\n }\n\n private handleYearSelect = (e: any) => {\n this.setYear(parseInt(e.target.value, 10))\n }\n\n private handleNextMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(1)\n }\n\n private handlePreviousMonthClick = (event: MouseEvent) => {\n event.preventDefault()\n this.addMonths(-1)\n }\n\n private enableActiveFocus = () => {\n this.activeFocus = true\n }\n\n private disableActiveFocus = () => {\n this.activeFocus = false\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-calendar\": Calendar\n }\n}\n"],"names":["preventDefault","e","SwipeController","constructor","host","options","this","hadFirstUpdate","initialTouchX","initialTouchY","handleTouchStart","event","pageX","pageY","changedTouches","handleTouchEnd","matchesGesture","onSwipeEnd","distX","distY","details","initialX","initialY","addController","events","EventController","target","hostUpdated","listen","hostDisconnected","isHorizontalSwipe","Math","abs","isDownwardsSwipe","Icon","registerIcon","arrowRightIcon","arrowLeftIcon","arrowDownIcon","fn","isDateDisabled","Calendar","LitElement","dialogLabelId","direction","DirectionController","swipe","addMonths","shortcuts","createKeybindingsHandler","ArrowRight","addDays","isLTR","ArrowLeft","ArrowDown","ArrowUp","Home","startOfWeek","End","endOfWeek","PageUp","PageDown","addYears","localize","LocalizeController","onLangChange","handleLangChange","value","firstDayOfWeek","min","max","expand","activeFocus","focusedDay","Date","handleDaySelect","day","isInRange","inRange","parseISODate","isAllowed","printISODate","dispatchEvent","DateSelectEvent","handleMonthSelect","setMonth","parseInt","handleYearSelect","setYear","handleNextMonthClick","handlePreviousMonthClick","enableActiveFocus","disableActiveFocus","focus","_a","focusedDayNode","monthSelectNode","render","valueAsDate","focusedMonth","getMonth","focusedYear","getFullYear","minDate","maxDate","minDateStartOfMonth","startOfMonth","undefined","maxDateEndOfMonth","endOfMonth","selectedYear","minYear","maxYear","html","monthNames","term","map","month","i","monthNamesShort","repeat","range","year","isEqualMonth","monthView","onFocusOut","onFocusIn","dateFormatter","dateFormatShort","selectedDate","focusedDate","onDateSelect","onKeyboardNavigation","labelledById","dayNames","dayNamesShort","handleValueChange","setFocusedDay","handleFocusedDayChange","lang","resolvedLang","Intl","DateTimeFormat","getMonthNames","getDayNames","days","months","years","date","clamp","styles","componentStyle","style","__decorate","query","prototype","property","type","Number","reflect","Boolean","attribute","state","observe","customElement"],"mappings":"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"}

package/lib/Calendar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./query-assigned-elements-e6cbac30.js";import"./lit-element-9178eae5.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";import"./query-2d22378e.js";import"./repeat-ae6f075f.js";import"./tinykeys.module-84e6cc41.js";export{C as default}from"./Calendar-1cdf8429.js";import"./Button.js";import"./VisuallyHidden.js";import"./Icon.js";import"./DirectionController-8b298382.js";import"./LocalizeController.js";import"./number-c3ab3e95.js";import"./dates-a8de5b83.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./DateSelectEvent.js";import"./Component-92eb6234.js";import"./directive-de55b00a.js";import"./ref-0e619221.js";import"./EventController-d99ebeef.js";import"./LightDomController-3c726b20.js";import"./cond-338158e9.js";import"./Spinner.js";import"./if-defined-4598a996.js";import"./FocusableMixin-34870ed3.js";import"./InputMixin-158f63fb.js";import"./unsafe-html-6be42999.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./class-map-949b7d3b.js";import"./collection-800f5002.js";import"./events-731d0007.js";
+import"./query-assigned-elements-e6cbac30.js";import"./lit-element-9178eae5.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";import"./query-2d22378e.js";import"./repeat-ae6f075f.js";import"./tinykeys.module-84e6cc41.js";export{C as default}from"./Calendar-685c3990.js";import"./Button.js";import"./VisuallyHidden.js";import"./Icon.js";import"./DirectionController-8b298382.js";import"./LocalizeController.js";import"./number-c3ab3e95.js";import"./dates-a8de5b83.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./DateSelectEvent.js";import"./Component-92eb6234.js";import"./directive-de55b00a.js";import"./ref-0e619221.js";import"./EventController-d99ebeef.js";import"./LightDomController-3c726b20.js";import"./cond-338158e9.js";import"./Spinner.js";import"./if-defined-4598a996.js";import"./FocusableMixin-34870ed3.js";import"./InputMixin-158f63fb.js";import"./unsafe-html-6be42999.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./class-map-949b7d3b.js";import"./collection-800f5002.js";import"./events-731d0007.js";
 //# sourceMappingURL=Calendar.js.map

package/lib/DatePicker.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i,y as a,b as o,s as n}from"./lit-element-9178eae5.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-949b7d3b.js";import{n as c}from"./ref-0e619221.js";import{l as p}from"./if-defined-4598a996.js";import{c as m}from"./interface-close-small-44ababc3.js";import{F as h}from"./FocusableMixin-34870ed3.js";import{F as u}from"./FormAssociatedMixin-3cc6e83b.js";import{I as b}from"./InputMixin-158f63fb.js";import{m as v,p as g,a as f}from"./dates-a8de5b83.js";import{N as y}from"./events-731d0007.js";import{S as x,i as w}from"./Calendar-1cdf8429.js";import{L as j}from"./LightDismissController-a2645ae6.js";import{LocalizeController as k}from"./LocalizeController.js";import"./Button.js";import z from"./Icon.js";import"./VisuallyHidden.js";import{s as $}from"./Component-92eb6234.js";import{s as D}from"./FormField-081da729.js";import{R as F,s as C}from"./TextField-a7382912.js";import{isoAdapter as L}from"./date-adapter.js";import{c as S}from"./cond-338158e9.js";import{S as A,i as E}from"./SizeMixin-4559b224.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./repeat-ae6f075f.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./LightDomController-3c726b20.js";import"./Spinner.js";import"./unsafe-html-6be42999.js";var B=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"});const I=i`:host{--_n-date-picker-toggle-block-size:calc(100% - 2px);color:var(--n-color-text);position:relative}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--_n-date-picker-toggle-block-size);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-accent);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-container .n-input{padding-inline-end:calc(var(--n-space-xl) * 1.25)}[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-popout)}@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-popout)}nord-calendar{--n-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 var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);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-calendar-inline-size:100%}}.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}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}:host([size="s"]) .n-input-container .n-input{padding-inline-end:var(--n-space-xl)}:host([size="l"]) .n-date-toggle{padding-inline-start:var(--n-space-m);padding-inline-end:var(--n-space-m)}:host([size="l"]) .n-input-container .n-input{padding-inline-end:var(--n-space-xxl)}`;z.registerIcon(B),z.registerIcon(m);const _=/[^0-9./-]+/g,M=()=>!1;let O=class extends(A(u(F(b(h(n)))))){constructor(){super(...arguments),this.dismiss=new j(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new x(this,{target:()=>this.dialog,matchesGesture:w,onSwipeEnd:()=>this.hide(!1)}),this.localize=new k(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=M,this.handleDaySelect=e=>{e.stopPropagation(),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 y("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new y("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,_),this.dispatchEvent(new y("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return g(this.value)}set valueAsDate(e){this.value=e?f(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?f(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new y("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new y("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"",i=E[this.size]||E.m;return a`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${p(this.name)}" .value="${t}" placeholder="${p(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" ${c(this.focusableRef)} aria-invalid="${S(this.error,"true")}" aria-describedby="${p(this.getDescribedBy())}" ?readonly="${this.readonly}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled||this.readonly}" type="button"><nord-icon name="interface-calendar" size="${i}"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?a`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:o}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"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.localize.term("modalHeading")}</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.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?f(e):"",this.dispatchEvent(new y("change"))}};O.styles=[$,D,C,I],e([l(".n-date-toggle",!0)],O.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],O.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],O.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],O.prototype,"dialog",void 0),e([s()],O.prototype,"open",void 0),e([r()],O.prototype,"value",void 0),e([r()],O.prototype,"min",void 0),e([r()],O.prototype,"max",void 0),e([r()],O.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],O.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],O.prototype,"dateAdapter",void 0),e([r({attribute:!1})],O.prototype,"isDateDisabled",void 0),O=e([t("nord-date-picker")],O);var N=O;export{N as default};
+import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i,y as a,b as o,s as n}from"./lit-element-9178eae5.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-949b7d3b.js";import{n as c}from"./ref-0e619221.js";import{l as p}from"./if-defined-4598a996.js";import{c as m}from"./interface-close-small-44ababc3.js";import{F as h}from"./FocusableMixin-34870ed3.js";import{F as u}from"./FormAssociatedMixin-3cc6e83b.js";import{I as b}from"./InputMixin-158f63fb.js";import{m as v,p as g,a as f}from"./dates-a8de5b83.js";import{N as y}from"./events-731d0007.js";import{S as x,i as w}from"./Calendar-685c3990.js";import{L as j}from"./LightDismissController-a2645ae6.js";import{LocalizeController as k}from"./LocalizeController.js";import"./Button.js";import z from"./Icon.js";import"./VisuallyHidden.js";import{s as $}from"./Component-92eb6234.js";import{s as D}from"./FormField-081da729.js";import{R as F,s as C}from"./TextField-a7382912.js";import{isoAdapter as L}from"./date-adapter.js";import{c as S}from"./cond-338158e9.js";import{S as A,i as E}from"./SizeMixin-4559b224.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./repeat-ae6f075f.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./LightDomController-3c726b20.js";import"./Spinner.js";import"./unsafe-html-6be42999.js";var B=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"});const I=i`:host{--_n-date-picker-toggle-block-size:calc(100% - 2px);color:var(--n-color-text);position:relative}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--_n-date-picker-toggle-block-size);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-accent);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-container .n-input{padding-inline-end:calc(var(--n-space-xl) * 1.25)}[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-popout)}@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-popout)}nord-calendar{--n-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 var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);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-calendar-inline-size:100%}}.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}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}:host([size="s"]) .n-input-container .n-input{padding-inline-end:var(--n-space-xl)}:host([size="l"]) .n-date-toggle{padding-inline-start:var(--n-space-m);padding-inline-end:var(--n-space-m)}:host([size="l"]) .n-input-container .n-input{padding-inline-end:var(--n-space-xxl)}`;z.registerIcon(B),z.registerIcon(m);const _=/[^0-9./-]+/g,M=()=>!1;let O=class extends(A(u(F(b(h(n)))))){constructor(){super(...arguments),this.dismiss=new j(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new x(this,{target:()=>this.dialog,matchesGesture:w,onSwipeEnd:()=>this.hide(!1)}),this.localize=new k(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=M,this.handleDaySelect=e=>{e.stopPropagation(),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 y("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new y("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,_),this.dispatchEvent(new y("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return g(this.value)}set valueAsDate(e){this.value=e?f(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?f(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new y("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new y("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"",i=E[this.size]||E.m;return a`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${p(this.name)}" .value="${t}" placeholder="${p(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" ${c(this.focusableRef)} aria-invalid="${S(this.error,"true")}" aria-describedby="${p(this.getDescribedBy())}" ?readonly="${this.readonly}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled||this.readonly}" type="button"><nord-icon name="interface-calendar" size="${i}"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?a`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:o}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"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.localize.term("modalHeading")}</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.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?f(e):"",this.dispatchEvent(new y("change"))}};O.styles=[$,D,C,I],e([l(".n-date-toggle",!0)],O.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],O.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],O.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],O.prototype,"dialog",void 0),e([s()],O.prototype,"open",void 0),e([r()],O.prototype,"value",void 0),e([r()],O.prototype,"min",void 0),e([r()],O.prototype,"max",void 0),e([r()],O.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],O.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],O.prototype,"dateAdapter",void 0),e([r({attribute:!1})],O.prototype,"isDateDisabled",void 0),O=e([t("nord-date-picker")],O);var N=O;export{N as default};
 //# sourceMappingURL=DatePicker.js.map

package/lib/LightDismissController-a2645ae6.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LightDismissController-a2645ae6.js","sources":["../src/common/controllers/LightDismissController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"./EventController.js\"\nimport { ShortcutController } from \"./ShortcutController.js\"\n\~~ntype~~ LightDismissOptions = {\n isOpen: () => boolean\n onDismiss: EventListener\n isDismissible?: (node: EventTarget) => boolean\n}\n\nexport class LightDismissController implements ReactiveController {\n private shortcut: ShortcutController\n private events: EventController\n\n constructor(private host: ReactiveControllerHost & Element, private options: LightDismissOptions) {\n host.addController(this)\n this.shortcut = new ShortcutController(host, { Escape: this.handleEsc })\n this.events = new EventController(host)\n }\n\n hostConnected() {\n this.events.listen(document, \"click\", this.handleClickOut, true)\n }\n\n private handleEsc = (e: KeyboardEvent) => {\n if (!this.options.isOpen()) {\n return\n }\n\n this.options.onDismiss(e)\n }\n\n private handleClickOut = (e: MouseEvent) => {\n if (!this.options.isOpen()) {\n return\n }\n\n const predicate: LightDismissOptions[\"isDismissible\"] = this.options.isDismissible ?? (node => node !== this.host)\n const isClickOutside = e.composedPath().every(predicate)\n\n if (isClickOutside) {\n this.options.onDismiss(e)\n }\n }\n}\n"],"names":["LightDismissController","constructor","host","options","this","handleEsc","e","isOpen","onDismiss","handleClickOut","predicate","_a","isDismissible","node","composedPath","every","addController","shortcut","ShortcutController","Escape","events","EventController","hostConnected","listen","document"],"mappings":"6GAUaA,EAIXC,YAAoBC,EAAgDC,GAAhDC,KAAIF,KAAJA,EAAgDE,KAAOD,QAAPA,EAU5DC,KAAAC,UAAaC,IACdF,KAAKD,QAAQI,UAIlBH,KAAKD,QAAQK,UAAUF,EAAE,EAGnBF,KAAAK,eAAkBH,UACxB,IAAKF,KAAKD,QAAQI,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAP,KAAKD,QAAQS,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAAST,KAAKF,KACtFI,EAAEQ,eAAeC,MAAML,IAG5CN,KAAKD,QAAQK,UAAUF,EACxB,EA3BDJ,EAAKc,cAAcZ,MACnBA,KAAKa,SAAW,IAAIC,EAAmBhB,EAAM,CAAEiB,OAAQf,KAAKC,YAC5DD,KAAKgB,OAAS,IAAIC,EAAgBnB,EACnC,CAEDoB,gBACElB,KAAKgB,OAAOG,OAAOC,SAAU,QAASpB,KAAKK,gBAAgB,EAC5D"}
1	+ {"version":3,"file":"LightDismissController-a2645ae6.js","sources":["../src/common/controllers/LightDismissController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"./EventController.js\"\nimport { ShortcutController } from \"./ShortcutController.js\"\n\nexport type LightDismissOptions = {\n isOpen: () => boolean\n onDismiss: EventListener\n isDismissible?: (node: EventTarget) => boolean\n}\n\nexport class LightDismissController implements ReactiveController {\n private shortcut: ShortcutController\n private events: EventController\n\n constructor(private host: ReactiveControllerHost & Element, private options: LightDismissOptions) {\n host.addController(this)\n this.shortcut = new ShortcutController(host, { Escape: this.handleEsc })\n this.events = new EventController(host)\n }\n\n hostConnected() {\n this.events.listen(document, \"click\", this.handleClickOut, true)\n }\n\n private handleEsc = (e: KeyboardEvent) => {\n if (!this.options.isOpen()) {\n return\n }\n\n this.options.onDismiss(e)\n }\n\n private handleClickOut = (e: MouseEvent) => {\n if (!this.options.isOpen()) {\n return\n }\n\n const predicate: LightDismissOptions[\"isDismissible\"] = this.options.isDismissible ?? (node => node !== this.host)\n const isClickOutside = e.composedPath().every(predicate)\n\n if (isClickOutside) {\n this.options.onDismiss(e)\n }\n }\n}\n"],"names":["LightDismissController","constructor","host","options","this","handleEsc","e","isOpen","onDismiss","handleClickOut","predicate","_a","isDismissible","node","composedPath","every","addController","shortcut","ShortcutController","Escape","events","EventController","hostConnected","listen","document"],"mappings":"6GAUaA,EAIXC,YAAoBC,EAAgDC,GAAhDC,KAAIF,KAAJA,EAAgDE,KAAOD,QAAPA,EAU5DC,KAAAC,UAAaC,IACdF,KAAKD,QAAQI,UAIlBH,KAAKD,QAAQK,UAAUF,EAAE,EAGnBF,KAAAK,eAAkBH,UACxB,IAAKF,KAAKD,QAAQI,SAChB,OAGF,MAAMG,EAAgF,QAA9BC,EAAAP,KAAKD,QAAQS,qBAAiB,IAAAD,EAAAA,EAACE,GAAQA,IAAST,KAAKF,KACtFI,EAAEQ,eAAeC,MAAML,IAG5CN,KAAKD,QAAQK,UAAUF,EACxB,EA3BDJ,EAAKc,cAAcZ,MACnBA,KAAKa,SAAW,IAAIC,EAAmBhB,EAAM,CAAEiB,OAAQf,KAAKC,YAC5DD,KAAKgB,OAAS,IAAIC,EAAgBnB,EACnC,CAEDoB,gBACElB,KAAKgB,OAAOG,OAAOC,SAAU,QAASpB,KAAKK,gBAAgB,EAC5D"}

package/lib/Modal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as o,e}from"./query-assigned-elements-e6cbac30.js";import{i as t,s,y as i}from"./lit-element-9178eae5.js";import{e as a}from"./property-03f59dce.js";import{i as n}from"./query-2d22378e.js";import{c as r}from"./interface-close-small-44ababc3.js";import l from"./Icon.js";import{E as d}from"./EventController-d99ebeef.js";import{L as c}from"./LightDismissController-a2645ae6.js";import{S as p}from"./ScrollbarController-680392c9.js";import{S as m}from"./SlotController-ea6eff46.js";import{o as h}from"./observe-a9c6dfb6.js";import{N as u}from"./events-731d0007.js";import{s as v}from"./Component-92eb6234.js";import{LocalizeController as b}from"./LocalizeController.js";import"./state-70f38ceb.js";import"./if-defined-4598a996.js";import"./unsafe-html-6be42999.js";import"./directive-de55b00a.js";import"./cond-338158e9.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";class f{constructor(o,e=(()=>o)){this.boundary=e,this.lastScrollY=0,this.handleFocusOut=o=>{this.lastFocused=o.target,o.relatedTarget===this.boundary()&&this.recaptureFocus()},this.handleFocusIn=o=>{!o.composedPath().includes(this.boundary())&&this.recaptureFocus()},this.restoreScroll=()=>{window.scrollTo(window.scrollX,this.lastScrollY)},o.addController(this)}hostDisconnected(){this.release()}trap(){this.lastScrollY=window.scrollY,this.boundary().addEventListener("focusout",this.handleFocusOut),window.addEventListener("scroll",this.restoreScroll),window.addEventListener("focusin",this.handleFocusIn)}release(){this.lastScrollY=0,this.lastFocused=void 0,this.boundary().removeEventListener("focusout",this.handleFocusOut),window.removeEventListener("scroll",this.restoreScroll),window.removeEventListener("focusin",this.handleFocusIn)}recaptureFocus(){var o;null===(o=this.lastFocused)||void 0===o||o.focus({preventScroll:!0})}}const g=t`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-overlay)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-nav-surface);border-block-end:1px solid var(--n-color-border)}.n-modal-footer{border-block-start:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 1320px)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:calc(var(--n-space-s)/ 2);flex-direction:column}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;l.registerIcon(r);let y=class extends s{constructor(){super(...arguments),this.headerSlot=new m(this,"header"),this.featureSlot=new m(this,"feature"),this.footerSlot=new m(this,"footer"),this.scrollBar=new p(this),this.focusTrap=new f(this,(()=>this.modal)),this.localize=new b(this),this.events=new d(this),this.lightDismiss=new c(this,{isOpen:()=>this.open,isDismissible:o=>o!==this.modal,onDismiss:()=>this.handleDismiss()}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1,this.enableScroll=o=>{this.open||o.target!==this.backdrop||this.scrollBar.restore()},this.trackLastButton=o=>{const e=o.target;"button"===e.localName&&(this.lastButton=e)},this.polyfillSubmitter=o=>{o.submitter=this.lastButton},this.handleSubmit=o=>{this.lastButton=void 0;const e=o.target,t=o.submitter,s="dialog"===e.method,i="dialog"===e.getAttribute("method");i&&!s&&o.preventDefault(),(i||s)&&this.close(null==t?void 0:t.value)}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),window.SubmitEvent||(this.events.listen(this,"click",this.trackLastButton,!0),this.events.listen(this,"submit",this.polyfillSubmitter,!0))}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new u("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return i`<div class="n-modal-backdrop" @transitionend="${this.enableScroll}"><div class="n-modal" tabindex="0" @submit="${this.handleSubmit}"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="n-body-padded"></slot></div><div class="n-modal-footer n-padded" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div></div>`}handleOpenUpdated(){var o;if(this.open){this.scrollBar.hide(),this.trigger=document.activeElement;(this.querySelector("[autofocus]")||this).focus(),this.focusTrap.trap()}else this.backdrop.scrollTop=0,this.focusTrap.release(),null===(o=this.trigger)||void 0===o||o.focus(),this.trigger=void 0}handleDismiss(){this.dispatchEvent(new u("cancel",{cancelable:!0}))&&this.close()}};y.styles=[v,g],o([n(".n-modal",!0)],y.prototype,"modal",void 0),o([n(".n-modal-backdrop",!0)],y.prototype,"backdrop",void 0),o([a({type:Boolean,reflect:!0})],y.prototype,"open",void 0),o([a({reflect:!0})],y.prototype,"size",void 0),o([a({attribute:!1})],y.prototype,"returnValue",void 0),o([a({type:Boolean,reflect:!0})],y.prototype,"scrollable",void 0),o([h("open","updated")],y.prototype,"handleOpenUpdated",null),y=o([e("nord-modal")],y);var x=y;export{x as default};
+import{_ as o,e}from"./query-assigned-elements-e6cbac30.js";import{i as a,s as n,y as i}from"./lit-element-9178eae5.js";import{e as t}from"./property-03f59dce.js";import{i as s}from"./query-2d22378e.js";import{c as l}from"./interface-close-small-44ababc3.js";import r from"./Icon.js";import{S as d}from"./SlotController-ea6eff46.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as p}from"./events-731d0007.js";import{s as m}from"./Component-92eb6234.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./state-70f38ceb.js";import"./if-defined-4598a996.js";import"./unsafe-html-6be42999.js";import"./directive-de55b00a.js";import"./cond-338158e9.js";import"./EventController-d99ebeef.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-680392c9.js";const b=a`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-overlay)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-nav-surface);border-block-end:1px solid var(--n-color-border)}.n-modal-footer{border-block-start:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 1320px)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:calc(var(--n-space-s)/ 2);flex-direction:column}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;r.registerIcon(l);let f=class extends n{constructor(){super(...arguments),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new h(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new p("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return i`<div class="n-modal-backdrop"><div class="n-modal" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="n-body-padded"></slot></div><div class="n-modal-footer n-padded" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new p("cancel",{cancelable:!0}))&&this.close()}};f.styles=[m,b],f.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([s(".n-modal",!0)],f.prototype,"modal",void 0),o([s(".n-modal-backdrop",!0)],f.prototype,"backdrop",void 0),o([t({type:Boolean,reflect:!0})],f.prototype,"open",void 0),o([t({reflect:!0})],f.prototype,"size",void 0),o([t({attribute:!1})],f.prototype,"returnValue",void 0),o([t({type:Boolean,reflect:!0})],f.prototype,"scrollable",void 0),o([c("open","updated")],f.prototype,"handleOpenUpdated",null),f=o([e("nord-modal")],f);var u=f;export{u as default};
 //# sourceMappingURL=Modal.js.map

package/lib/Modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.js","sources":["../src/common/controllers/FocusTrapController.ts","../src/modal/Modal.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\nexport class FocusTrapController implements ReactiveController {\n private lastScrollY = 0\n private lastFocused?: HTMLElement\n\n constructor(host: ReactiveControllerHost & HTMLElement, private boundary: () => HTMLElement = () => host) {\n host.addController(this)\n }\n\n hostDisconnected() {\n this.release()\n }\n\n trap() {\n this.lastScrollY = window.scrollY\n this.boundary().addEventListener(\"focusout\", this.handleFocusOut)\n window.addEventListener(\"scroll\", this.restoreScroll)\n window.addEventListener(\"focusin\", this.handleFocusIn)\n }\n\n release() {\n this.lastScrollY = 0\n this.lastFocused = undefined\n\n this.boundary().removeEventListener(\"focusout\", this.handleFocusOut)\n window.removeEventListener(\"scroll\", this.restoreScroll)\n window.removeEventListener(\"focusin\", this.handleFocusIn)\n }\n\n private handleFocusOut = (e: FocusEvent) => {\n this.lastFocused = e.target as HTMLElement\n\n if (e.relatedTarget === this.boundary()) {\n this.recaptureFocus()\n }\n }\n\n private handleFocusIn = (e: FocusEvent) => {\n const isOutside = !e.composedPath().includes(this.boundary())\n\n if (isOutside) {\n this.recaptureFocus()\n }\n }\n\n private recaptureFocus() {\n this.lastFocused?.focus({ preventScroll: true })\n }\n\n private restoreScroll = () => {\n window.scrollTo(window.scrollX, this.lastScrollY)\n }\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { FocusTrapController } from \"../common/controllers/FocusTrapController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\n\nIcon.registerIcon(closeIcon)\n\nconst isButton = (element: Element): element is HTMLButtonElement => element.localName === \"button\"\n\n/*\n Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n \n @status new\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n \n @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n /\n@customElement(\"nord-modal\")\nexport default class Modal extends LitElement {\n static styles = [componentStyle, style]\n\n @query(\".n-modal\", true) private modal!: HTMLDivElement\n @query(\".n-modal-backdrop\", true) private backdrop!: HTMLDivElement\n\n private trigger?: HTMLElement\n private lastButton?: HTMLButtonElement\n\n private headerSlot = new SlotController(this, \"header\")\n private featureSlot = new SlotController(this, \"feature\")\n private footerSlot = new SlotController(this, \"footer\")\n\n private scrollBar = new ScrollbarController(this)\n private focusTrap = new FocusTrapController(this, () => this.modal)\n private localize = new LocalizeController<\"nord-modal\">(this)\n private events = new EventController(this)\n private lightDismiss = new LightDismissController(this, {\n isOpen: () => this.open,\n isDismissible: node => node !== this.modal,\n onDismiss: () => this.handleDismiss(),\n })\n\n /\n Controls whether the modal is open or not.\n /\n @property({ type: Boolean, reflect: true }) open = false\n\n /\n Controls the max-width of the modal when open.\n /\n @property({ reflect: true }) size: \"s\" \| \"m\" \| \"l\" = \"m\"\n\n /\n The reason why the modal was closed. This typically indicates\n * which button the user pressed to close the modal, though any value\n * can be supplied if the modal is programmatically closed.\n /\n @property({ attribute: false }) returnValue: string = \"\"\n\n /\n By default if a modal is too big for the browser window,\n * the entire modal will scroll. This setting changes that behavior\n * so that the body of the modal scrolls instead, with the modal\n * itself remaining fixed.\n /\n @property({ type: Boolean, reflect: true }) scrollable = false\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.setAttribute(\"role\", \"dialog\")\n this.setAttribute(\"aria-modal\", \"true\")\n\n // if submit event is not supported, let's do a basic polyfill\n if (!window.SubmitEvent) {\n this.events.listen(this, \"click\", this.trackLastButton, true)\n this.events.listen(this, \"submit\", this.polyfillSubmitter, true)\n }\n }\n\n /\n Show the modal, automatically moving focus to the modal or a child\n * element with an `autofocus` attribute.\n /\n showModal() {\n this.open = true\n }\n\n /\n Programmatically close the modal.\n * @param returnValue An optional value to indicate why the modal was closed.\n /\n close(returnValue?: string) {\n this.open = false\n\n if (returnValue != null) {\n this.returnValue = returnValue\n }\n\n this.dispatchEvent(new NordEvent(\"close\"))\n }\n\n /\n Programmatically focus the modal.\n * @param options An object which controls aspects of the focusing process.\n /\n focus(options?: FocusOptions) {\n this.modal.focus({ preventScroll: true, ...options })\n }\n\n render() {\n return html`\n <div class=\"n-modal-backdrop\" @transitionend=${this.enableScroll}>\n <div class=\"n-modal\" tabindex=\"0\" @submit=${this.handleSubmit}>\n <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n <button class=\"n-close\" @click=${this.handleDismiss}>\n <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term(\"closeLabel\")}></nord-icon>\n </button>\n </div>\n\n <div class=\"n-modal-body\">\n <slot\n name=${this.featureSlot.slotName}\n class=${this.headerSlot.isEmpty ? \"n-rounded-top\" : \"\"}\n ?hidden=${this.featureSlot.isEmpty}\n ></slot>\n <slot class=\"n-body-padded\"></slot>\n </div>\n\n <div class=\"n-modal-footer n-padded\" ?hidden=${this.footerSlot.isEmpty}>\n <slot name=${this.footerSlot.slotName}></slot>\n </div>\n </div>\n </div>\n `\n }\n\n @observe(\"open\", \"updated\")\n protected handleOpenUpdated() {\n // the order which things happen here is important!\n\n if (this.open) {\n // hide scrollbar and prevent scroll on body\n this.scrollBar.hide()\n\n // store the element that was focused prior to modal opening\n this.trigger = document.activeElement as HTMLElement\n\n // handle initial (auto)focus\n const focusTarget = this.querySelector<HTMLElement>(\"[autofocus]\") \|\| this\n focusTarget.focus()\n\n // finally, we should enable the focus trap\n this.focusTrap.trap()\n } else {\n // ensure modal is scrolled to top ready for re-open\n this.backdrop.scrollTop = 0\n\n // we need to release the focus trap...\n this.focusTrap.release()\n\n // ...before we can return focus to the trigger button\n this.trigger?.focus()\n this.trigger = undefined\n }\n }\n\n private enableScroll = (e: TransitionEvent) => {\n // scrollbar should only be restored when the backdrop has transitioned\n // that way we avoid awkward double scrollbars.\n if (!this.open && e.target === this.backdrop) {\n this.scrollBar.restore()\n }\n }\n\n private handleDismiss() {\n // allow cancelling of close\n const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n if (allowed) {\n this.close()\n }\n }\n\n /\n capture the last button clicked, so that we can polyfill `submitter` property in submit event\n */\n private trackLastButton = (e: Event) => {\n const target = e.target as HTMLElement\n\n if (isButton(target)) {\n this.lastButton = target\n }\n }\n\n private polyfillSubmitter = (e: Event) => {\n // @ts-expect-error submitter is readonly, but this is only called if SubmitEvent is not supported\n e.submitter = this.lastButton\n }\n\n private handleSubmit = (e: SubmitEvent) => {\n this.lastButton = undefined\n\n const target = e.target as HTMLFormElement\n const submitter = e.submitter as HTMLButtonElement\n\n const isDialogProperty = target.method === \"dialog\"\n const isDialogAttr = target.getAttribute(\"method\") === \"dialog\"\n\n // if they mismatch, it means \"dialog\" method is not supported,\n // so we should polyfill the fact it does not do a full submit\n if (isDialogAttr && !isDialogProperty) {\n e.preventDefault()\n }\n\n if (isDialogAttr \|\| isDialogProperty) {\n this.close(submitter?.value)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-modal\": Modal\n }\n}\n"],"names":["FocusTrapController","constructor","host","boundary","this","lastScrollY","handleFocusOut","e","lastFocused","target","relatedTarget","recaptureFocus","handleFocusIn","composedPath","includes","restoreScroll","window","scrollTo","scrollX","addController","hostDisconnected","release","trap","scrollY","addEventListener","undefined","removeEventListener","_a","focus","preventScroll","Icon","registerIcon","closeIcon","Modal","LitElement","headerSlot","SlotController","featureSlot","footerSlot","scrollBar","ScrollbarController","focusTrap","modal","localize","LocalizeController","events","EventController","lightDismiss","LightDismissController","isOpen","open","isDismissible","node","onDismiss","handleDismiss","size","returnValue","scrollable","enableScroll","backdrop","restore","trackLastButton","localName","lastButton","polyfillSubmitter","submitter","handleSubmit","isDialogProperty","method","isDialogAttr","getAttribute","preventDefault","close","value","connectedCallback","super","setAttribute","SubmitEvent","listen","showModal","dispatchEvent","NordEvent","options","render","html","isEmpty","slotName","term","handleOpenUpdated","hide","trigger","document","activeElement","querySelector","scrollTop","cancelable","styles","componentStyle","style","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"Modal.js","sources":["../src/modal/Modal.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\nimport style from \"./Modal.css\"\nimport { ModalController } from \"./ModalController.js\"\n\nIcon.registerIcon(closeIcon)\n\n/*\n Modal component is used to display content that temporarily blocks interactions\n * with the main view of an application. Modal should be used sparingly and\n * only when necessary.\n \n @status new\n * @category overlay\n * @slot - Default slot\n * @slot header - Slot which holds the header of the modal, positioned next to the close button.\n * @slot footer - Slot which is typically used to hold call to action buttons, but can also be used to build custom footers.\n * @fires cancel - Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.\n * @fires close - Dispatched when a modal is closed for any reason.\n \n @cssprop [--n-modal-padding-inline=var(--n-space-m)] - Controls the padding on the sides of the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-padding-block=var(--n-space-m)] - Controls the padding above and below the modal, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-modal-max-inline-size=620px] - Controls the width of the modal.\n /\n@customElement(\"nord-modal\")\nexport default class Modal extends LitElement {\n static styles = [componentStyle, style]\n\n /\n @internal\n * ensures clicking on the backdrop does not move focus to <body>,\n * which can causes issues with focus trapping, and returning focus on modal close,\n * when there are multiple modals.\n /\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n @query(\".n-modal\", true) private modal!: HTMLDivElement\n @query(\".n-modal-backdrop\", true) private backdrop!: HTMLDivElement\n\n private headerSlot = new SlotController(this, \"header\")\n private featureSlot = new SlotController(this, \"feature\")\n private footerSlot = new SlotController(this, \"footer\")\n\n private localize = new LocalizeController<\"nord-modal\">(this)\n private modalController = new ModalController(this, {\n isOpen: () => this.open,\n onDismiss: () => this.handleDismiss(),\n dialog: () => this.modal,\n backdrop: () => this.backdrop,\n close: returnValue => this.close(returnValue),\n })\n\n /\n Controls whether the modal is open or not.\n /\n @property({ type: Boolean, reflect: true }) open = false\n\n /\n Controls the max-width of the modal when open.\n /\n @property({ reflect: true }) size: \"s\" \| \"m\" \| \"l\" = \"m\"\n\n /\n The reason why the modal was closed. This typically indicates\n * which button the user pressed to close the modal, though any value\n * can be supplied if the modal is programmatically closed.\n /\n @property({ attribute: false }) returnValue: string = \"\"\n\n /\n By default if a modal is too big for the browser window,\n * the entire modal will scroll. This setting changes that behavior\n * so that the body of the modal scrolls instead, with the modal\n * itself remaining fixed.\n /\n @property({ type: Boolean, reflect: true }) scrollable = false\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.setAttribute(\"role\", \"dialog\")\n this.setAttribute(\"aria-modal\", \"true\")\n }\n\n /\n Show the modal, automatically moving focus to the modal or a child\n * element with an `autofocus` attribute.\n /\n showModal() {\n this.open = true\n }\n\n /\n Programmatically close the modal.\n * @param returnValue An optional value to indicate why the modal was closed.\n /\n close(returnValue?: string) {\n this.open = false\n\n if (returnValue != null) {\n this.returnValue = returnValue\n }\n\n this.dispatchEvent(new NordEvent(\"close\"))\n }\n\n /\n Programmatically focus the modal.\n * @param options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions) {\n this.modal.focus({ preventScroll: true, ...options })\n }\n\n render() {\n return html`\n <div class=\"n-modal-backdrop\">\n <div class=\"n-modal\" tabindex=\"0\">\n <div class=\"n-modal-header n-rounded-top\" ?hidden=${this.headerSlot.isEmpty}>\n <slot class=\"n-padded\" name=${this.headerSlot.slotName}></slot>\n <button class=\"n-close\" @click=${this.handleDismiss}>\n <nord-icon name=\"interface-close-small\" size=\"s\" label=${this.localize.term(\"closeLabel\")}></nord-icon>\n </button>\n </div>\n\n <div class=\"n-modal-body\">\n <slot\n name=${this.featureSlot.slotName}\n class=${this.headerSlot.isEmpty ? \"n-rounded-top\" : \"\"}\n ?hidden=${this.featureSlot.isEmpty}\n ></slot>\n <slot class=\"n-body-padded\"></slot>\n </div>\n\n <div class=\"n-modal-footer n-padded\" ?hidden=${this.footerSlot.isEmpty}>\n <slot name=${this.footerSlot.slotName}></slot>\n </div>\n </div>\n </div>\n `\n }\n\n @observe(\"open\", \"updated\")\n protected handleOpenUpdated(prev: boolean) {\n if (this.open) {\n this.modalController.block()\n } else if (prev === true) {\n this.modalController.unblock()\n }\n }\n\n private handleDismiss() {\n // allow cancelling of close\n const allowed = this.dispatchEvent(new NordEvent(\"cancel\", { cancelable: true }))\n\n if (allowed) {\n this.close()\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-modal\": Modal\n }\n}\n"],"names":["Icon","registerIcon","closeIcon","Modal","LitElement","constructor","this","headerSlot","SlotController","featureSlot","footerSlot","localize","LocalizeController","modalController","ModalController","isOpen","open","onDismiss","handleDismiss","dialog","modal","backdrop","close","returnValue","size","scrollable","connectedCallback","super","setAttribute","showModal","dispatchEvent","NordEvent","focus","options","preventScroll","render","html","isEmpty","slotName","term","handleOpenUpdated","prev","block","unblock","cancelable","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","type","Boolean","reflect","attribute","observe","customElement"],"mappings":"8mJAcAA,EAAKC,aAAaC,GAoBlB,IAAqBC,EAArB,cAAmCC,EAAnCC,kCAcUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAWG,YAAG,IAAID,EAAeF,KAAM,WACvCA,KAAUI,WAAG,IAAIF,EAAeF,KAAM,UAEtCA,KAAAK,SAAW,IAAIC,EAAiCN,MAChDA,KAAAO,gBAAkB,IAAIC,EAAgBR,KAAM,CAClDS,OAAQ,IAAMT,KAAKU,KACnBC,UAAW,IAAMX,KAAKY,gBACtBC,OAAQ,IAAMb,KAAKc,MACnBC,SAAU,IAAMf,KAAKe,SACrBC,MAAOC,GAAejB,KAAKgB,MAAMC,KAMSjB,KAAIU,MAAG,EAKtBV,KAAIkB,KAAoB,IAOrBlB,KAAWiB,YAAW,GAQVjB,KAAUmB,YAAG,CAoF1D,CAlFCC,oBACEC,MAAMD,oBAENpB,KAAKsB,aAAa,OAAQ,UAC1BtB,KAAKsB,aAAa,aAAc,OACjC,CAMDC,YACEvB,KAAKU,MAAO,CACb,CAMDM,MAAMC,GACJjB,KAAKU,MAAO,EAEO,MAAfO,IACFjB,KAAKiB,YAAcA,GAGrBjB,KAAKwB,cAAc,IAAIC,EAAU,SAClC,CAMDC,MAAMC,GACJ3B,KAAKc,MAAMY,MAAM,CAAEE,eAAe,KAASD,GAC5C,CAEDE,SACE,OAAOC,CAAI,sHAG+C9B,KAAKC,WAAW8B,yCACpC/B,KAAKC,WAAW+B,oDACbhC,KAAKY,0EACqBZ,KAAKK,SAAS4B,KAAK,mFAMrEjC,KAAKG,YAAY6B,oBAChBhC,KAAKC,WAAW8B,QAAU,gBAAkB,gBAC1C/B,KAAKG,YAAY4B,0GAKgB/B,KAAKI,WAAW2B,wBAChD/B,KAAKI,WAAW4B,qCAKtC,CAGSE,kBAAkBC,GACtBnC,KAAKU,KACPV,KAAKO,gBAAgB6B,SACH,IAATD,GACTnC,KAAKO,gBAAgB8B,SAExB,CAEOzB,gBAEUZ,KAAKwB,cAAc,IAAIC,EAAU,SAAU,CAAEa,YAAY,MAGvEtC,KAAKgB,OAER,GApIMnB,EAAA0C,OAAS,CAACC,EAAgBC,GAQ1B5C,EAAiB6C,kBAAG,IAAK5C,EAAW4C,kBAAmBC,gBAAgB,GAErDC,EAAA,CAAxBC,EAAM,YAAY,IAAoChD,EAAAiD,UAAA,aAAA,GACrBF,EAAA,CAAjCC,EAAM,qBAAqB,IAAuChD,EAAAiD,UAAA,gBAAA,GAkBvBF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAoBrD,EAAAiD,UAAA,YAAA,GAK3BF,EAAA,CAA5BG,EAAS,CAAEG,SAAS,KAAmCrD,EAAAiD,UAAA,YAAA,GAOxBF,EAAA,CAA/BG,EAAS,CAAEI,WAAW,KAAiCtD,EAAAiD,UAAA,mBAAA,GAQZF,EAAA,CAA3CG,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAA0BrD,EAAAiD,UAAA,kBAAA,GAoE9DF,EAAA,CADCQ,EAAQ,OAAQ,YAOhBvD,EAAAiD,UAAA,oBAAA,MA5HkBjD,EAAK+C,EAAA,CADzBS,EAAc,eACMxD,SAAAA"}

package/lib/ModalController.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{E as t}from"./EventController-d99ebeef.js";import{L as s}from"./LightDismissController-a2645ae6.js";import{S as o}from"./ScrollbarController-680392c9.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";class i{constructor(t,s=(()=>t)){this.boundary=s,this.lastScrollY=0,this.handleFocusOut=t=>{this.lastFocused=t.target,t.relatedTarget===this.boundary()&&this.recaptureFocus()},this.handleFocusIn=t=>{!t.composedPath().includes(this.boundary())&&this.recaptureFocus()},this.restoreScroll=()=>{window.scrollTo(window.scrollX,this.lastScrollY)},t.addController(this)}hostDisconnected(){this.release()}trap(){this.lastScrollY=window.scrollY,this.boundary().addEventListener("focusout",this.handleFocusOut),window.addEventListener("scroll",this.restoreScroll),window.addEventListener("focusin",this.handleFocusIn)}release(){this.lastScrollY=0,this.lastFocused=void 0,this.boundary().removeEventListener("focusout",this.handleFocusOut),window.removeEventListener("scroll",this.restoreScroll),window.removeEventListener("focusin",this.handleFocusIn)}recaptureFocus(){var t;null===(t=this.lastFocused)\|\|void 0===t\|\|t.focus({preventScroll:!0})}}class e{constructor(e,n){this.host=e,this.trackLastButton=t=>{const s=t.target;"button"===s.localName&&(this.lastButton=s)},this.polyfillSubmitter=t=>{t.submitter=this.lastButton},this.handleTransitionEnd=t=>{this.options.isOpen()\|\|t.target!==this.options.backdrop()\|\|this.scrollBar.restore()},this.handleLightDismiss=t=>{this.host.contains(t.target)&&this.options.onDismiss(t)},this.handleSubmit=t=>{this.lastButton=void 0;const s=t.target,o=t.submitter,i="dialog"===s.method,e="dialog"===s.getAttribute("method");e&&!i&&t.preventDefault(),(e\|\|i)&&this.options.close(null==o?void 0:o.value)},e.addController(this),this.options=n,this.scrollBar=new o(e),this.focusTrap=new i(e,n.dialog),this.events=new t(e),this.lightDismiss=new s(e,{isOpen:n.isOpen,isDismissible:t=>t!==n.dialog(),onDismiss:this.handleLightDismiss})}hostConnected(){window.SubmitEvent\|\|(this.events.listen(this.host,"click",this.trackLastButton,!0),this.events.listen(this.host,"submit",this.polyfillSubmitter,!0)),this.events.listen(this.host,"transitionend",this.handleTransitionEnd),this.events.listen(this.host,"submit",this.handleSubmit)}hostDisconnected(){e.openModals.remove(this)}block(){var t;null===(t=e.openModals.top)\|\|void 0===t\|\|t.focusTrap.release(),e.openModals.push(this),this.scrollBar.hide(),this.trigger=document.activeElement;(this.host.querySelector("[autofocus]")\|\|this.host).focus(),this.focusTrap.trap()}unblock(){var t,s;e.openModals.top===this&&(e.openModals.pop(),this.options.backdrop().scrollTop=0,this.focusTrap.release(),null===(t=this.trigger)\|\|void 0===t\|\|t.focus(),this.trigger=void 0,null===(s=e.openModals.top)\|\|void 0===s\|\|s.focusTrap.trap())}}e.openModals=new class{constructor(){this.items=[]}get length(){return this.items.length}get top(){return this.items[this.length-1]}push(t){this.items.push(t)}pop(){return this.items.pop()}remove(t){const s=this.items.indexOf(t);-1!==s&&this.items.splice(s,1)}};export{e as ModalController};
2	+ //# sourceMappingURL=ModalController.js.map