@nordhealth/components 4.2.0 → 4.3.1

package/lib/Calendar-CYcI340m.js

@@ -0,0 +1,2 @@
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as a,LitElement as t,isServer as n,html as s}from"lit";import{query as i,property as o,state as r,customElement as l}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{repeat as c}from"lit/directives/repeat.js";import{o as h}from"./tinykeys.module-_6MZt7MP.js";import"./Button.js";import"./VisuallyHidden.js";import u from"./Icon.js";import{E as p}from"./EventController-BBOmvfLa.js";import{D as v}from"./DirectionController-ChvNGESZ.js";import{LocalizeController as g}from"./LocalizeController.js";import{m as f,c as m}from"./collection-Dvg2XbxV.js";import{c as y}from"./cond-CI1KbneT.js";import{r as b}from"./number-Dg2vCfGd.js";import{i as w,p as x,a as D,s as k,e as z,b as $,g as F,d as _,f as Y,h as T,j as S,k as j,l as M,m as C,n as N,o as L}from"./dates-lbaNvUdr.js";import{o as O}from"./observe-D0n0zOfU.js";import{DateSelectEvent as X}from"./DateSelectEvent.js";import{s as E}from"./Component-DSU3Qp0O.js";var W=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m6.92903.100342-2.12132 2.121318 7.77819 7.77818-7.77828 7.77826 2.12132 2.1213 8.48536-8.4853c.7811-.7811.7811-2.04743 0-2.82848z" fill="currentColor"/></svg>',tags:"nordicon arrow right small caret pointing triangle chevron",title:"arrow-right-small"});var U=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z" fill="currentColor"/></svg>',tags:"nordicon arrow left small caret pointing triangle chevron",title:"arrow-left-small"});var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m.100342 6.92903 2.121318-2.12132 7.77818 7.77819 7.77826-7.77828 2.1213 2.12132-8.4853 8.48536c-.7811.7811-2.04743.7811-2.82848 0z" fill="currentColor"/></svg>',tags:"nordicon arrow down small caret pointing triangle chevron",title:"arrow-down-small"});const I=e=>e.preventDefault();class P{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:s}=this.options,i=a-this.initialTouchX,o=t-this.initialTouchY,r={initialX:this.initialTouchX,initialY:this.initialTouchY,pageX:a,pageY:t,distX:i,distY:o};n(r)&&(e.preventDefault(),s(r))},e.addController(this),this.events=new p(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",I),this.events.listen(e,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}const B=({distX:e,distY:a})=>Math.abs(e)>=70&&Math.abs(a)<=70,H=({distX:e,distY:a})=>Math.abs(a)>=70&&Math.abs(e)<=70&&a>0,R=a`: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-highlight-color:var(--n-calendar-highlight-color, var(--n-color-accent));--_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);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;padding-block-end:var(--n-space-s);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-weight:var(--n-font-weight);font-variant-numeric:tabular-nums;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);padding:0 0 1px;position:relative;text-align:center;vertical-align:middle}.n-calendar-day[aria-current=date]{box-shadow:0 0 0 1px var(--n-color-text-link);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-day.is-highlighted::after{--_n-calendar-highlight-size:5px;content:"";position:absolute;inset-inline-start:calc(50% - (var(--_n-calendar-highlight-size)/ 2));inset-block-end:var(--n-space-xs);block-size:var(--_n-calendar-highlight-size);inline-size:var(--_n-calendar-highlight-size);border-radius:var(--n-border-radius-circle);background-color:var(--_n-calendar-highlight-color)}.n-calendar-day.is-highlighted.is-month:is([aria-pressed=true],:focus):not([aria-disabled=true])::after{background-color:var(--n-color-text-on-accent)}.n-calendar-day.is-highlighted:is(:not(.is-month),.is-outside,[aria-disabled=true])::after{background-color:var(--n-color-text-weakest)}.n-calendar-header{align-items:start;display:flex;justify-content:space-between;margin-block-end:var(--n-space-m);inline-size:100%}.n-calendar-nav{white-space:nowrap}.n-calendar-nav nord-button{--_n-button-padding-inline:11px;margin-inline-start:var(--n-space-xs)}.n-calendar-select{display:inline-flex;margin-block-start:var(--n-space-xs);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{display:flex;align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);font-size:var(--n-font-size-xl);font-weight:var(--n-font-weight-active);padding-block:0;padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-xs);pointer-events:none;position:relative;inline-size:100%}`;u.registerIcon(W),u.registerIcon(U),u.registerIcon(A);const V=e=>a=>{a.preventDefault(),e(a)},G=()=>!1,q=()=>!1,Z="dialog-header";let J=class extends t{constructor(){super(...arguments),this.direction=new v(this),this.swipe=new P(this,{matchesGesture:B,onSwipeEnd:({distX:e})=>this.addMonths(e<0?1:-1)}),this.shortcuts=h({ArrowRight:V((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:V((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:V((()=>this.addDays(7))),ArrowUp:V((()=>this.addDays(-7))),Home:V((()=>this.startOfWeek())),End:V((()=>this.endOfWeek())),PageUp:V((()=>this.addMonths(-1))),PageDown:V((()=>this.addMonths(1))),"Shift+PageUp":V((()=>this.addYears(-1))),"Shift+PageDown":V((()=>this.addYears(1)))}),this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=1,this.expand=!1,this.isDateDisabled=G,this.isDateHighlighted=q,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=e=>{const a=w(e,x(this.min||""),x(this.max||"")),t=!this.isDateDisabled(e);a&&t&&(this.value=D(e),this.dispatchEvent(new X("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=e=>{const a=e.currentTarget,t=e.relatedTarget;t&&!a.contains(t)&&(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=this.getToday(),a=x(this.value),t=this.focusedDay.getMonth(),i=this.focusedDay.getFullYear(),o=x(this.min||""),r=x(this.max||""),l=o?k(o):void 0,h=r?z(r):void 0,u=(a||this.focusedDay).getFullYear(),p=o?o.getFullYear():u-10,v=r?r.getFullYear():u+10;return n&&this.handleLangChange(),s`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${Z}" aria-live="polite" aria-atomic="true">${this.monthNames[t]}, ${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,a)=>s`<option value="${a}" ?selected="${a===t}" ?disabled="${!w(new Date(i,a,1),l,h)}">${e}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.monthNamesShort[t]}</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}">${c(b(p,v),(e=>e),(e=>s`<option ?selected="${e===i}">${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="${$(o,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="${$(r,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><table class="n-calendar-table" aria-labelledby="${Z}" @focusin="${this.enableActiveFocus}" @focusout="${this.disableActiveFocus}"><thead><tr>${f(this.dayNames,this.firstDayOfWeek,((e,a)=>s`<th class="n-calendar-table-header" scope="col"><span aria-hidden="true">${this.dayNamesShort[a]}</span><nord-visually-hidden>${e}</nord-visually-hidden></th>`))}</tr></thead><tbody>${m(F(this.focusedDay,this.firstDayOfWeek),7).map((t=>s`<tr class="n-calendar-row">${t.map((t=>{const n=!w(t,o,r),i=_(t,e),l=this.isDateDisabled(t),c=_(t,a),h=$(t,this.focusedDay),u=this.isDateHighlighted(t),p=this.dateFormatShort.format(t),v=u&&"string"==typeof u?`${p}, ${u}`:p;return s`<td class="n-calendar-cell"><button type="button" tabindex="${_(t,this.focusedDay)?0:-1}" class="${d({"n-calendar-day":!0,"is-outside":n,"is-month":h,"is-highlighted":u})}" @click="${()=>this.handleDaySelect(t)}" @keydown="${this.shortcuts}" ?disabled="${n}" aria-disabled="${y(l,"true")}" aria-pressed="${c?"true":"false"}" aria-current="${y(i,"date")}" aria-label="${v}"><span aria-hidden="true">${t.getDate()}</span></button></td>`}))}</tr>`))}</tbody></table></div>`}handleValueChange(){this.setFocusedDay(x(this.value)||this.getToday())}handleFocusedDayChange(){this.activeFocus&&this.focusedDayNode.focus()}handleLangChange(){const e=this.localize.resolvedLang;this.dateFormatShort=new Intl.DateTimeFormat(e,{timeZone:"UTC",day:"numeric",month:"long"}),this.monthNames=Y(e,"long"),this.monthNamesShort=Y(e,"short"),this.dayNames=T(e,"long"),this.dayNamesShort=T(e,"narrow")}getToday(){return x(this.today||"")||new Date}addDays(e){this.setFocusedDay(S(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(j(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(M(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const a=C(k(this.focusedDay),e),t=z(a),n=C(this.focusedDay,e);this.setFocusedDay(N(n,a,t))}setYear(e){const a=L(k(this.focusedDay),e),t=z(a),n=L(this.focusedDay,e);this.setFocusedDay(N(n,a,t))}setFocusedDay(e){this.focusedDay=N(e,x(this.min||""),x(this.max||"")),this.dispatchEvent(new X("nord-focus-date",this.focusedDay))}};J.styles=[E,R],e([i(".n-calendar-select-month",!0)],J.prototype,"monthSelectNode",void 0),e([i('button[tabindex="0"]')],J.prototype,"focusedDayNode",void 0),e([o()],J.prototype,"value",void 0),e([o({reflect:!0,type:Number,attribute:"first-day-of-week"})],J.prototype,"firstDayOfWeek",void 0),e([o({reflect:!0})],J.prototype,"min",void 0),e([o({reflect:!0})],J.prototype,"max",void 0),e([o({reflect:!0})],J.prototype,"today",void 0),e([o({reflect:!0,type:Boolean})],J.prototype,"expand",void 0),e([o({attribute:!1})],J.prototype,"isDateDisabled",void 0),e([o({attribute:!1})],J.prototype,"isDateHighlighted",void 0),e([r()],J.prototype,"activeFocus",void 0),e([r()],J.prototype,"focusedDay",void 0),e([O("value")],J.prototype,"handleValueChange",null),e([O("focusedDay","updated")],J.prototype,"handleFocusedDayChange",null),J=e([l("nord-calendar")],J);var K=J;export{K as C,P as S,H as i};
+//# sourceMappingURL=Calendar-CYcI340m.js.map

package/lib/Calendar-CYcI340m.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar-CYcI340m.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 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.92903.100342-2.12132 2.121318 7.77819 7.77818-7.77828 7.77826 2.12132 2.1213 8.48536-8.4853c.7811-.7811.7811-2.04743 0-2.82848z\" fill=\"currentColor\"/></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 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z\" fill=\"currentColor\"/></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 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m.100342 6.92903 2.121318-2.12132 7.77818 7.77819 7.77826-7.77828 2.1213 2.12132-8.4853 8.48536c-.7811.7811-2.04743.7811-2.82848 0z\" fill=\"currentColor\"/></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, isServer, LitElement } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.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\"\nimport { chunk, mapWithOffset } from \"../common/collection.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { range } from \"../common/number.js\"\nimport {\n  addDays,\n  clamp,\n  DaysOfWeek,\n  endOfMonth,\n  endOfWeek,\n  getDayNames,\n  getMonthNames,\n  getViewOfMonth,\n  inRange,\n  isEqual,\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 { DateSelectEvent } from \"./DateSelectEvent.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Calendar.css\"\n\nexport type DatePredicate = (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: DatePredicate = () => false\nconst isDateHighlighted = () => false\n\nconst dialogLabelId = \"dialog-header\"\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 * @localization prevMonthLabel - Accessible label for the previous month button.\n * @localization nextMonthLabel - Accessible label for the next month button.\n * @localization monthSelectLabel - Accessible label for the month select.\n * @localization yearSelectLabel - Accessible label for the year select.\n */\n@customElement(\"nord-calendar\")\nexport default class Calendar extends LitElement {\n  static styles = [componentStyle, style]\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({ reflect: true, type: Number, attribute: \"first-day-of-week\" }) firstDayOfWeek: DaysOfWeek =\n    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({ reflect: true }) 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({ reflect: true }) max?: string\n\n  /**\n   * The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\n   * If not set, the current local date of the user is used.\n   */\n  @property({ reflect: true }) today?: 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: DatePredicate = isDateDisabled\n\n  /**\n   * Controls which days are highlighted with a small indicator.\n   * Returning a \"falsy\" value will not show an indicator.\n   * Returning \"truthy\" value will show the indicator, but without an accessible label.\n   * Returning a string will show the indicator, and use the string as accessible label.\n   * It is recommended to return a string rather than a truthy value whenever possible.\n   */\n  @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\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 today = this.getToday()\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    if (isServer) {\n      // Needed when run on a server, because the `onLangChange` callback does not get triggered, so we need to manually\n      // call `handleLangChange` to set the localized values for month and day names, which the `render` method relies on.\n      this.handleLangChange()\n    }\n\n    return html`\n      <div class=\"n-calendar\">\n        <div class=\"n-calendar-header\">\n          <div>\n            <nord-visually-hidden>\n              <h2 id=${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) => 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        <table\n          class=\"n-calendar-table\"\n          aria-labelledby=${dialogLabelId}\n          @focusin=${this.enableActiveFocus}\n          @focusout=${this.disableActiveFocus}\n        >\n          <thead>\n            <tr>\n              ${mapWithOffset(\n                this.dayNames,\n                this.firstDayOfWeek,\n                (dayName, i) => html`\n                  <th class=\"n-calendar-table-header\" scope=\"col\">\n                    <span aria-hidden=\"true\">${this.dayNamesShort[i]}</span>\n                    <nord-visually-hidden>${dayName}</nord-visually-hidden>\n                  </th>\n                `\n              )}\n            </tr>\n          </thead>\n          <tbody>\n            ${chunk(getViewOfMonth(this.focusedDay, this.firstDayOfWeek), 7).map(\n              week => html`\n                <tr class=\"n-calendar-row\">\n                  ${week.map(day => {\n                    const outsideRange = !inRange(day, minDate, maxDate)\n                    const isToday = isEqual(day, today)\n                    const isDisabled = this.isDateDisabled(day)\n                    const isSelected = isEqual(day, valueAsDate)\n                    const isInMonth = isEqualMonth(day, this.focusedDay)\n                    const isHighlighted = this.isDateHighlighted(day)\n                    const formattedDate = this.dateFormatShort.format(day)\n\n                    const accessibleLabel =\n                      isHighlighted && typeof isHighlighted === \"string\"\n                        ? `${formattedDate}, ${isHighlighted}`\n                        : formattedDate\n\n                    return html`\n                      <td class=\"n-calendar-cell\">\n                        <button\n                          type=\"button\"\n                          tabindex=${isEqual(day, this.focusedDay) ? 0 : -1}\n                          class=${classMap({\n                            \"n-calendar-day\": true,\n                            \"is-outside\": outsideRange,\n                            \"is-month\": isInMonth,\n                            \"is-highlighted\": isHighlighted,\n                          })}\n                          @click=${() => this.handleDaySelect(day)}\n                          @keydown=${this.shortcuts}\n                          ?disabled=${outsideRange}\n                          aria-disabled=${cond(isDisabled, \"true\")}\n                          aria-pressed=${isSelected ? \"true\" : \"false\"}\n                          aria-current=${cond(isToday, \"date\")}\n                          aria-label=${accessibleLabel}\n                        >\n                          <span aria-hidden=\"true\">${day.getDate()}</span>\n                        </button>\n                      </td>\n                    `\n                  })}\n                </tr>\n              `\n            )}\n          </tbody>\n        </table>\n      </div>\n    `\n  }\n\n  @observe(\"value\")\n  protected handleValueChange() {\n    this.setFocusedDay(parseISODate(this.value) || this.getToday())\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, { timeZone: \"UTC\", 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 getToday() {\n    return parseISODate(this.today || \"\") || new Date()\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: Event) => {\n    this.setMonth(parseInt((e.target as HTMLSelectElement).value, 10))\n  }\n\n  private handleYearSelect = (e: Event) => {\n    this.setYear(parseInt((e.target as HTMLSelectElement).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 = (e: FocusEvent) => {\n    const table = e.currentTarget as Node\n    const relatedTarget = e.relatedTarget as Node\n\n    if (relatedTarget && !table.contains(relatedTarget)) {\n      this.activeFocus = false\n    }\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","isDateHighlighted","dialogLabelId","Calendar","LitElement","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","expand","activeFocus","focusedDay","Date","handleDaySelect","day","isInRange","inRange","parseISODate","min","max","isAllowed","printISODate","dispatchEvent","DateSelectEvent","handleMonthSelect","setMonth","parseInt","handleYearSelect","setYear","handleNextMonthClick","handlePreviousMonthClick","enableActiveFocus","disableActiveFocus","table","currentTarget","relatedTarget","contains","focus","_a","focusedDayNode","monthSelectNode","render","today","getToday","valueAsDate","focusedMonth","getMonth","focusedYear","getFullYear","minDate","maxDate","minDateStartOfMonth","startOfMonth","undefined","maxDateEndOfMonth","endOfMonth","selectedYear","minYear","maxYear","isServer","html","monthNames","term","map","month","i","monthNamesShort","repeat","range","year","isEqualMonth","mapWithOffset","dayNames","dayName","dayNamesShort","chunk","getViewOfMonth","week","outsideRange","isToday","isEqual","isDisabled","isSelected","isInMonth","isHighlighted","formattedDate","dateFormatShort","format","accessibleLabel","classMap","cond","getDate","handleValueChange","setFocusedDay","handleFocusedDayChange","lang","resolvedLang","Intl","DateTimeFormat","timeZone","getMonthNames","getDayNames","days","months","years","date","clamp","styles","componentStyle","style","__decorate","query","prototype","property","reflect","type","Number","attribute","Boolean","state","observe","customElement"],"mappings":"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"}

package/lib/Calendar.js

@@ -1,2 +1,2 @@
-import"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";export{C as default}from"./Calendar-Cuumq57y.js";import"./Button.js";import"./VisuallyHidden.js";import"./Icon.js";import"./DirectionController-ChvNGESZ.js";import"./LocalizeController.js";import"./collection-Dvg2XbxV.js";import"./cond-CI1KbneT.js";import"./number-Dg2vCfGd.js";import"./dates-lbaNvUdr.js";import"./observe-D0n0zOfU.js";import"./DateSelectEvent.js";import"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";import"lit/directives/ref.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./SlotController-Z6eG7LSZ.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./events-Bv6wNHwJ.js";
+import"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";export{C as default}from"./Calendar-CYcI340m.js";import"./Button.js";import"./VisuallyHidden.js";import"./Icon.js";import"./DirectionController-ChvNGESZ.js";import"./LocalizeController.js";import"./collection-Dvg2XbxV.js";import"./cond-CI1KbneT.js";import"./number-Dg2vCfGd.js";import"./dates-lbaNvUdr.js";import"./observe-D0n0zOfU.js";import"./DateSelectEvent.js";import"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";import"lit/directives/ref.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./SlotController-Z6eG7LSZ.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./events-Bv6wNHwJ.js";
 //# sourceMappingURL=Calendar.js.map

package/lib/DatePicker.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as i,nothing as o,LitElement as a}from"lit";import{query as s,property as r,customElement as n}from"lit/decorators.js";import{ref as l}from"lit/directives/ref.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{c as p}from"./interface-close-small-CnpAFMO3.js";import{F as c}from"./FocusableMixin-BlQLNPdJ.js";import{F as h}from"./FormAssociatedMixin-DFL7yabe.js";import{I as m}from"./InputMixin-LetXsCyv.js";import{c as u,p as v,a as f}from"./dates-lbaNvUdr.js";import{N as b}from"./events-Bv6wNHwJ.js";import{S as g,i as j}from"./Calendar-Cuumq57y.js";import{LocalizeController as y}from"./LocalizeController.js";import $ from"./Icon.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-5MtZ4gbP.js";import"./Stack.js";import{s as k}from"./Component-DSU3Qp0O.js";import{s as D}from"./FormField-CUC_H-0e.js";import{R as x,s as w}from"./TextField-C5gYzfOp.js";import{isoAdapter as z}from"./date-adapter.js";import{c as C}from"./cond-CI1KbneT.js";import{S as F}from"./SizeMixin-CU9cLbLC.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./DirectionController-ChvNGESZ.js";import"./collection-Dvg2XbxV.js";import"./number-Dg2vCfGd.js";import"./observe-D0n0zOfU.js";import"./DateSelectEvent.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-CsfLhMSW.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./ScrollbarController-C5CMxfb3.js";var S=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',tags:"nordicon interface calendar date time day week month year",title:"interface-calendar"});const A=e`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;$.registerIcon(S),$.registerIcon(p);const I=()=>!1,L=()=>!1;let B=class extends(F(h(x(m(c(a)))))){constructor(){super(...arguments),this.swipe=new g(this,{target:()=>this.popout,matchesGesture:j,onSwipeEnd:()=>this.hide()}),this.localize=new y(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=1,this.dateAdapter=z,this.isDateDisabled=I,this.isDateHighlighted=L,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new b("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new b("focus"))},this.handleInputChange=t=>{var e;const i=t.target,o=this.dateAdapter.parse(i.value,u);this.rawValue=null===(e=this.focusableRef.value)||void 0===e?void 0:e.value,(o||""===i.value)&&this.setValue(o)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?f(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:NaN}set valueAsNumber(t){this.value=t?f(new Date(t)):""}firstUpdated(){var t;this.rawValue=null===(t=this.focusableRef.value)||void 0===t?void 0:t.value}render(){const{valueAsDate:t}=this,e=t?this.dateAdapter.format(t):"";return i`<nord-input class="n-date-picker-input" value="${e}" label="${d(this.label)}" hint="${d(this.hint)}" error="${C(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${l(this.focusableRef)} aria-invalid="${C(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?o:i`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?o:i`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?i`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:o}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{timeZone:"UTC",day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"";const{valueAsDate:e}=this,i=e?this.dateAdapter.format(e):"";this.rawValue=i,this.dispatchEvent(new b("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};B.styles=[k,D,w,A],t([s(".n-date-picker-toggle",!0)],B.prototype,"toggleButton",void 0),t([s(".n-date-picker-close-button",!0)],B.prototype,"closeButton",void 0),t([s("nord-calendar",!0)],B.prototype,"calendar",void 0),t([s('[role="dialog"]',!0)],B.prototype,"popout",void 0),t([r()],B.prototype,"value",void 0),t([r({attribute:!1})],B.prototype,"rawValue",void 0),t([r({type:Boolean,reflect:!0})],B.prototype,"open",void 0),t([r({reflect:!0})],B.prototype,"min",void 0),t([r({reflect:!0})],B.prototype,"max",void 0),t([r({reflect:!0,attribute:"first-day-of-week",type:Number})],B.prototype,"firstDayOfWeek",void 0),t([r({attribute:!1})],B.prototype,"dateAdapter",void 0),t([r({attribute:!1})],B.prototype,"isDateDisabled",void 0),t([r({attribute:!1})],B.prototype,"isDateHighlighted",void 0),t([r({reflect:!0,type:Boolean})],B.prototype,"expand",void 0),B=t([n("nord-date-picker")],B);var E=B;export{E as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as i,nothing as o,LitElement as a}from"lit";import{query as s,property as r,customElement as n}from"lit/decorators.js";import{ref as l}from"lit/directives/ref.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{c as p}from"./interface-close-small-CnpAFMO3.js";import{F as c}from"./FocusableMixin-BlQLNPdJ.js";import{F as h}from"./FormAssociatedMixin-DFL7yabe.js";import{I as m}from"./InputMixin-LetXsCyv.js";import{c as u,p as v,a as f}from"./dates-lbaNvUdr.js";import{N as b}from"./events-Bv6wNHwJ.js";import{S as g,i as j}from"./Calendar-CYcI340m.js";import{LocalizeController as y}from"./LocalizeController.js";import $ from"./Icon.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-BnM-vhZ-.js";import"./Stack.js";import{s as k}from"./Component-DSU3Qp0O.js";import{s as D}from"./FormField-CUC_H-0e.js";import{R as x,s as w}from"./TextField-C5gYzfOp.js";import{isoAdapter as z}from"./date-adapter.js";import{c as C}from"./cond-CI1KbneT.js";import{S as F}from"./SizeMixin-CU9cLbLC.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./DirectionController-ChvNGESZ.js";import"./collection-Dvg2XbxV.js";import"./number-Dg2vCfGd.js";import"./observe-D0n0zOfU.js";import"./DateSelectEvent.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-CsfLhMSW.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./ScrollbarController-C5CMxfb3.js";var S=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',tags:"nordicon interface calendar date time day week month year",title:"interface-calendar"});const A=e`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;$.registerIcon(S),$.registerIcon(p);const I=()=>!1,L=()=>!1;let B=class extends(F(h(x(m(c(a)))))){constructor(){super(...arguments),this.swipe=new g(this,{target:()=>this.popout,matchesGesture:j,onSwipeEnd:()=>this.hide()}),this.localize=new y(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=1,this.dateAdapter=z,this.isDateDisabled=I,this.isDateHighlighted=L,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.dispatchEvent(new b("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new b("focus"))},this.handleInputChange=t=>{var e;const i=t.target,o=this.dateAdapter.parse(i.value,u);this.rawValue=null===(e=this.focusableRef.value)||void 0===e?void 0:e.value,(o||""===i.value)&&this.setValue(o)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?f(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:NaN}set valueAsNumber(t){this.value=t?f(new Date(t)):""}firstUpdated(){var t;this.rawValue=null===(t=this.focusableRef.value)||void 0===t?void 0:t.value}render(){const{valueAsDate:t}=this,e=t?this.dateAdapter.format(t):"";return i`<nord-input class="n-date-picker-input" value="${e}" label="${d(this.label)}" hint="${d(this.hint)}" error="${C(this.error,this.error)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hide-label="${this.hideLabel}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${l(this.focusableRef)} aria-invalid="${C(this.error,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?o:i`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?o:i`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?i`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:o}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" today="${d(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{timeZone:"UTC",day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"";const{valueAsDate:e}=this,i=e?this.dateAdapter.format(e):"";this.rawValue=i,this.dispatchEvent(new b("change"))}hide(t){this.popout.hide(t)}show(){this.popout.show()}};B.styles=[k,D,w,A],t([s(".n-date-picker-toggle",!0)],B.prototype,"toggleButton",void 0),t([s(".n-date-picker-close-button",!0)],B.prototype,"closeButton",void 0),t([s("nord-calendar",!0)],B.prototype,"calendar",void 0),t([s('[role="dialog"]',!0)],B.prototype,"popout",void 0),t([r()],B.prototype,"value",void 0),t([r({attribute:!1})],B.prototype,"rawValue",void 0),t([r({type:Boolean,reflect:!0})],B.prototype,"open",void 0),t([r({reflect:!0})],B.prototype,"min",void 0),t([r({reflect:!0})],B.prototype,"max",void 0),t([r({reflect:!0})],B.prototype,"today",void 0),t([r({reflect:!0,attribute:"first-day-of-week",type:Number})],B.prototype,"firstDayOfWeek",void 0),t([r({attribute:!1})],B.prototype,"dateAdapter",void 0),t([r({attribute:!1})],B.prototype,"isDateDisabled",void 0),t([r({attribute:!1})],B.prototype,"isDateHighlighted",void 0),t([r({reflect:!0,type:Boolean})],B.prototype,"expand",void 0),B=t([n("nord-date-picker")],B);var E=B;export{E as default};
 //# sourceMappingURL=DatePicker.js.map

package/lib/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../src/date-picker/DatePicker.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport type Button from \"../button/Button.js\"\nimport type Popout from \"../popout/Popout.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../input/Input.js\"\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../popout/Popout.js\"\nimport \"../stack/Stack.js\"\nimport \"../calendar/Calendar.js\"\n\nimport type { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DatePredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst isDateDisabled = () => false\nconst isDateHighlighted = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @localization modalHeading - Heading for the date picker's modal.\n * @localization closeLabel - Accessible label for the close button.\n * @localization buttonLabel - Accessible label for the toggle button that opens the date picker modal.\n * @localization selectedDateMessage - Describes the selected date. This message is appended to the toggle button label when a date is selected.\n *\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends SizeMixin(\n  FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-picker-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-picker-close-button`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private popout!: Popout\n\n  private swipe = new SwipeController(this, {\n    target: () => this.popout,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(),\n  })\n\n  private localize = new LocalizeController<\"nord-date-picker\">(this, {\n    onLangChange: () => this.createDateFormatters(),\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 dateFormatLong!: Intl.DateTimeFormat\n\n  /**\n   * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = \"\"\n\n  get valueAsDate(): Date | undefined {\n    return parseISODate(this.value)\n  }\n\n  /**\n   * Get/set the value of the picker as a Date object.\n   */\n  set valueAsDate(date: Date | undefined) {\n    this.value = date ? printISODate(date) : \"\"\n  }\n\n  get valueAsNumber(): number {\n    return this.valueAsDate?.getTime() ?? NaN\n  }\n\n  /**\n   * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n   */\n  set valueAsNumber(date: number) {\n    this.value = date ? printISODate(new Date(date)) : \"\"\n  }\n\n  /**\n   * Get the raw value of the input field without date formatting. This is a read-only property.\n   */\n  @property({ attribute: false }) rawValue?: string\n\n  /**\n   * Controls whether date picker dialog is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\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({ reflect: true }) 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({ reflect: true }) max?: 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({ reflect: true, attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek =\n    DaysOfWeek.Monday\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   * Default is IS0-8601 parsing and formatting.\n   */\n  @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\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: DatePredicate = isDateDisabled\n\n  /**\n   * Controls which days are highlighted with a small indicator.\n   * Returning `false` will not show an indicator.\n   * Returning `true` will show the indicator, but without an accessible label. Therefore\n   * Returning a string will show the indicator, and use the string as accessible label.\n   * It is recommended to return a string rather than `true` whenever possible.\n   */\n  @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n  /**\n   * Controls whether the date picker expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  firstUpdated() {\n    // Make sure the date picker has a raw value when the value is initially set\n    this.rawValue = (<HTMLInputElement | null>this.focusableRef.value)?.value\n  }\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      <nord-input\n        class=\"n-date-picker-input\"\n        value=${formattedDate}\n        label=${ifDefined(this.label)}\n        hint=${ifDefined(this.hint)}\n        error=${cond(this.error, this.error)}\n        placeholder=${ifDefined(this.placeholder)}\n        id=${this.inputId}\n        size=${this.size}\n        ?expand=${this.expand}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        ?readonly=${this.readonly}\n        ?hide-label=${this.hideLabel}\n        disallow-pattern=\"[^0-9./-]\"\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @input=${this.handleInputChange}\n        ${ref(this.focusableRef)}\n        aria-invalid=${cond(this.error, \"true\")}\n        aria-describedby=${ifDefined(this.getDescribedBy())}\n      >\n        ${!this.hintSlot.isEmpty ? html`<slot name=\"hint\" slot=\"hint\"></slot>` : nothing}\n        ${!this.labelSlot.isEmpty ? html`<slot name=\"label\" slot=\"label\"></slot>` : nothing}\n        <nord-button\n          size=${this.size}\n          ?disabled=${this.disabled || this.readonly}\n          slot=\"end\"\n          class=\"n-date-picker-toggle\"\n          aria-controls=\"popout\"\n          type=\"button\"\n        >\n          <nord-icon name=\"interface-calendar\"></nord-icon>\n          <nord-visually-hidden>\n            ${this.localize.term(\"buttonLabel\")}\n            ${valueAsDate\n              ? html`\n                  <span>\n                    , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n                  </span>\n                `\n              : nothing}\n          </nord-visually-hidden>\n        </nord-button>\n      </nord-input>\n      <nord-popout\n        id=\"popout\"\n        anchor=${this.inputId}\n        align=\"end\"\n        position=\"block-end\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        ?open=${this.open}\n        @open=${this.handleOpen}\n        @close=${this.handleClose}\n        aria-labelledby=\"header\"\n      >\n        <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n        <nord-stack class=\"n-date-picker-header\" direction=\"horizontal\" justify-content=\"space-between\">\n          <div class=\"n-date-picker-heading\" id=\"header\">${this.localize.term(\"modalHeading\")}</div>\n          <nord-button\n            class=\"n-date-picker-close-button\"\n            type=\"button\"\n            size=\"s\"\n            variant=\"plain\"\n            @click=${this.handleClose}\n          >\n            <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n            <nord-icon name=\"interface-close-small\"></nord-icon>\n          </nord-button>\n        </nord-stack>\n\n        <nord-calendar\n          class=\"n-date-picker-calendar\"\n          expand\n          value=${this.value}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          .firstDayOfWeek=${this.firstDayOfWeek}\n          .isDateDisabled=${this.isDateDisabled}\n          .isDateHighlighted=${this.isDateHighlighted}\n          @change=${this.handleDaySelect}\n        ></nord-calendar>\n\n        <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n      </nord-popout>\n    `\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n      timeZone: \"UTC\",\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    })\n  }\n\n  private focusFirst() {\n    this.closeButton.focus()\n  }\n\n  private focusLast() {\n    this.calendar.focus({ target: \"day\" })\n  }\n\n  private handleDaySelect = (e: DateSelectEvent) => {\n    e.stopPropagation()\n    this.setValue(e.date)\n    this.hide()\n  }\n\n  private handleOpen() {\n    this.open = true\n    this.calendar.focus({ target: \"month\" })\n  }\n\n  private handleClose() {\n    this.open = false\n  }\n\n  private handleBlur = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"blur\"))\n  }\n\n  private handleFocus = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"focus\"))\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    const parsed = this.dateAdapter.parse(target.value, createDate)\n    this.rawValue = (<HTMLInputElement | null>this.focusableRef.value)?.value\n\n    if (parsed || target.value === \"\") {\n      this.setValue(parsed)\n    }\n  }\n\n  private setValue(date?: Date) {\n    this.value = date ? printISODate(date) : \"\"\n\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n    this.rawValue = formattedDate\n\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n\n  /**\n   * Hide the date picker programmatically.\n   * @param moveFocusToButton A boolean option to move the focus to the original button that opens the popout.\n   */\n  hide(moveFocusToButton?: boolean) {\n    this.popout.hide(moveFocusToButton)\n  }\n\n  /**\n   * Show the date picker programmatically.\n   */\n  show() {\n    this.popout.show()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","isDateDisabled","isDateHighlighted","DatePicker","SizeMixin","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","swipe","SwipeController","target","popout","matchesGesture","isDownwardsSwipe","onSwipeEnd","hide","localize","LocalizeController","onLangChange","createDateFormatters","value","open","firstDayOfWeek","dateAdapter","isoAdapter","expand","handleDaySelect","e","stopPropagation","setValue","date","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","parsed","parse","createDate","rawValue","_a","focusableRef","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","getTime","NaN","Date","firstUpdated","render","formattedDate","format","html","ifDefined","label","hint","cond","error","placeholder","inputId","size","disabled","required","readonly","hideLabel","ref","getDescribedBy","hintSlot","isEmpty","nothing","labelSlot","term","dateFormatLong","handleOpen","handleClose","focusLast","min","max","focusFirst","Intl","DateTimeFormat","resolvedLang","timeZone","day","month","year","closeButton","focus","calendar","moveFocusToButton","show","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","attribute","type","Boolean","reflect","Number","customElement"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../src/date-picker/DatePicker.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z\" fill=\"currentColor\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\nimport { LocalizeController } from \"../localization/LocalizeController.js\"\n\nimport type Button from \"../button/Button.js\"\nimport type Popout from \"../popout/Popout.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../input/Input.js\"\nimport \"../button/Button.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport \"../popout/Popout.js\"\nimport \"../stack/Stack.js\"\nimport \"../calendar/Calendar.js\"\n\nimport type { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DatePredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { ReadonlyMixin } from \"../common/mixins/ReadonlyMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst isDateDisabled = () => false\nconst isDateHighlighted = () => false\n\n/**\n *\n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n *\n * @status ready\n * @category form\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @localization modalHeading - Heading for the date picker's modal.\n * @localization closeLabel - Accessible label for the close button.\n * @localization buttonLabel - Accessible label for the toggle button that opens the date picker modal.\n * @localization selectedDateMessage - Describes the selected date. This message is appended to the toggle button label when a date is selected.\n *\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends SizeMixin(\n  FormAssociatedMixin(ReadonlyMixin(InputMixin(FocusableMixin(LitElement))))\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  @query(`.n-date-picker-toggle`, true) private toggleButton!: Button\n  @query(`.n-date-picker-close-button`, true) private closeButton!: HTMLButtonElement\n  @query(`nord-calendar`, true) private calendar!: Calendar\n  @query(`[role=\"dialog\"]`, true) private popout!: Popout\n\n  private swipe = new SwipeController(this, {\n    target: () => this.popout,\n    matchesGesture: isDownwardsSwipe,\n    onSwipeEnd: () => this.hide(),\n  })\n\n  private localize = new LocalizeController<\"nord-date-picker\">(this, {\n    onLangChange: () => this.createDateFormatters(),\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 dateFormatLong!: Intl.DateTimeFormat\n\n  /**\n   * Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = \"\"\n\n  get valueAsDate(): Date | undefined {\n    return parseISODate(this.value)\n  }\n\n  /**\n   * Get/set the value of the picker as a Date object.\n   */\n  set valueAsDate(date: Date | undefined) {\n    this.value = date ? printISODate(date) : \"\"\n  }\n\n  get valueAsNumber(): number {\n    return this.valueAsDate?.getTime() ?? NaN\n  }\n\n  /**\n   * Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n   */\n  set valueAsNumber(date: number) {\n    this.value = date ? printISODate(new Date(date)) : \"\"\n  }\n\n  /**\n   * Get the raw value of the input field without date formatting. This is a read-only property.\n   */\n  @property({ attribute: false }) rawValue?: string\n\n  /**\n   * Controls whether date picker dialog is open or not.\n   */\n  @property({ type: Boolean, reflect: true }) open = false\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({ reflect: true }) 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({ reflect: true }) max?: string\n\n  /**\n   * The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\n   * If not set, the current local date of the user is used.\n   */\n  @property({ reflect: true }) today?: 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({ reflect: true, attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek =\n    DaysOfWeek.Monday\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   * Default is IS0-8601 parsing and formatting.\n   */\n  @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\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: DatePredicate = isDateDisabled\n\n  /**\n   * Controls which days are highlighted with a small indicator.\n   * Returning `false` will not show an indicator.\n   * Returning `true` will show the indicator, but without an accessible label. Therefore\n   * Returning a string will show the indicator, and use the string as accessible label.\n   * It is recommended to return a string rather than `true` whenever possible.\n   */\n  @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n  /**\n   * Controls whether the date picker expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  firstUpdated() {\n    // Make sure the date picker has a raw value when the value is initially set\n    this.rawValue = (<HTMLInputElement | null>this.focusableRef.value)?.value\n  }\n\n  render() {\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n    return html`\n      <nord-input\n        class=\"n-date-picker-input\"\n        value=${formattedDate}\n        label=${ifDefined(this.label)}\n        hint=${ifDefined(this.hint)}\n        error=${cond(this.error, this.error)}\n        placeholder=${ifDefined(this.placeholder)}\n        id=${this.inputId}\n        size=${this.size}\n        ?expand=${this.expand}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        ?readonly=${this.readonly}\n        ?hide-label=${this.hideLabel}\n        disallow-pattern=\"[^0-9./-]\"\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        @input=${this.handleInputChange}\n        ${ref(this.focusableRef)}\n        aria-invalid=${cond(this.error, \"true\")}\n        aria-describedby=${ifDefined(this.getDescribedBy())}\n      >\n        ${!this.hintSlot.isEmpty ? html`<slot name=\"hint\" slot=\"hint\"></slot>` : nothing}\n        ${!this.labelSlot.isEmpty ? html`<slot name=\"label\" slot=\"label\"></slot>` : nothing}\n        <nord-button\n          size=${this.size}\n          ?disabled=${this.disabled || this.readonly}\n          slot=\"end\"\n          class=\"n-date-picker-toggle\"\n          aria-controls=\"popout\"\n          type=\"button\"\n        >\n          <nord-icon name=\"interface-calendar\"></nord-icon>\n          <nord-visually-hidden>\n            ${this.localize.term(\"buttonLabel\")}\n            ${valueAsDate\n              ? html`\n                  <span>\n                    , ${this.localize.term(\"selectedDateMessage\")} ${this.dateFormatLong.format(valueAsDate)}\n                  </span>\n                `\n              : nothing}\n          </nord-visually-hidden>\n        </nord-button>\n      </nord-input>\n      <nord-popout\n        id=\"popout\"\n        anchor=${this.inputId}\n        align=\"end\"\n        position=\"block-end\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        ?open=${this.open}\n        @open=${this.handleOpen}\n        @close=${this.handleClose}\n        aria-labelledby=\"header\"\n      >\n        <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n        <nord-stack class=\"n-date-picker-header\" direction=\"horizontal\" justify-content=\"space-between\">\n          <div class=\"n-date-picker-heading\" id=\"header\">${this.localize.term(\"modalHeading\")}</div>\n          <nord-button\n            class=\"n-date-picker-close-button\"\n            type=\"button\"\n            size=\"s\"\n            variant=\"plain\"\n            @click=${this.handleClose}\n          >\n            <nord-visually-hidden>${this.localize.term(\"closeLabel\")}</nord-visually-hidden>\n            <nord-icon name=\"interface-close-small\"></nord-icon>\n          </nord-button>\n        </nord-stack>\n\n        <nord-calendar\n          class=\"n-date-picker-calendar\"\n          expand\n          value=${this.value}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          today=${ifDefined(this.today)}\n          .firstDayOfWeek=${this.firstDayOfWeek}\n          .isDateDisabled=${this.isDateDisabled}\n          .isDateHighlighted=${this.isDateHighlighted}\n          @change=${this.handleDaySelect}\n        ></nord-calendar>\n\n        <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n      </nord-popout>\n    `\n  }\n\n  private createDateFormatters() {\n    this.dateFormatLong = new Intl.DateTimeFormat(this.localize.resolvedLang, {\n      timeZone: \"UTC\",\n      day: \"numeric\",\n      month: \"long\",\n      year: \"numeric\",\n    })\n  }\n\n  private focusFirst() {\n    this.closeButton.focus()\n  }\n\n  private focusLast() {\n    this.calendar.focus({ target: \"day\" })\n  }\n\n  private handleDaySelect = (e: DateSelectEvent) => {\n    e.stopPropagation()\n    this.setValue(e.date)\n    this.hide()\n  }\n\n  private handleOpen() {\n    this.open = true\n    this.calendar.focus({ target: \"month\" })\n  }\n\n  private handleClose() {\n    this.open = false\n  }\n\n  private handleBlur = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"blur\"))\n  }\n\n  private handleFocus = (event: Event) => {\n    event.stopPropagation()\n    this.dispatchEvent(new NordEvent(\"focus\"))\n  }\n\n  private handleInputChange = (e: Event) => {\n    const target = e.target as HTMLInputElement\n\n    const parsed = this.dateAdapter.parse(target.value, createDate)\n    this.rawValue = (<HTMLInputElement | null>this.focusableRef.value)?.value\n\n    if (parsed || target.value === \"\") {\n      this.setValue(parsed)\n    }\n  }\n\n  private setValue(date?: Date) {\n    this.value = date ? printISODate(date) : \"\"\n\n    const { valueAsDate } = this\n    const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n    this.rawValue = formattedDate\n\n    this.dispatchEvent(new NordEvent(\"change\"))\n  }\n\n  /**\n   * Hide the date picker programmatically.\n   * @param moveFocusToButton A boolean option to move the focus to the original button that opens the popout.\n   */\n  hide(moveFocusToButton?: boolean) {\n    this.popout.hide(moveFocusToButton)\n  }\n\n  /**\n   * Show the date picker programmatically.\n   */\n  show() {\n    this.popout.show()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-date-picker\": DatePicker\n  }\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","isDateDisabled","isDateHighlighted","DatePicker","SizeMixin","FormAssociatedMixin","ReadonlyMixin","InputMixin","FocusableMixin","LitElement","constructor","this","swipe","SwipeController","target","popout","matchesGesture","isDownwardsSwipe","onSwipeEnd","hide","localize","LocalizeController","onLangChange","createDateFormatters","value","open","firstDayOfWeek","dateAdapter","isoAdapter","expand","handleDaySelect","e","stopPropagation","setValue","date","handleBlur","event","dispatchEvent","NordEvent","handleFocus","handleInputChange","parsed","parse","createDate","rawValue","_a","focusableRef","valueAsDate","parseISODate","printISODate","valueAsNumber","_b","getTime","NaN","Date","firstUpdated","render","formattedDate","format","html","ifDefined","label","hint","cond","error","placeholder","inputId","size","disabled","required","readonly","hideLabel","ref","getDescribedBy","hintSlot","isEmpty","nothing","labelSlot","term","dateFormatLong","handleOpen","handleClose","focusLast","min","max","today","focusFirst","Intl","DateTimeFormat","resolvedLang","timeZone","day","month","year","closeButton","focus","calendar","moveFocusToButton","show","styles","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","prototype","property","attribute","type","Boolean","reflect","Number","customElement"],"mappings":"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"}

package/lib/Dropdown.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,LitElement as n}from"lit";import{query as r,property as s,customElement as d}from"lit/decorators.js";import{ifDefined as i}from"lit/directives/if-defined.js";import{S as a}from"./SlotController-Z6eG7LSZ.js";import{F as l}from"./Popout-5MtZ4gbP.js";import{o as p}from"./observe-D0n0zOfU.js";import{s as c}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";import"./positioning-CsfLhMSW.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-C5CMxfb3.js";import"./events-Bv6wNHwJ.js";import"./DirectionController-ChvNGESZ.js";const h=e`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px);--_n-dropdown-max-block-size:var(--n-dropdown-max-block-size, 460px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size="s"]){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size="l"]){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(l(n)){constructor(){super(...arguments),this.headerSlot=new a(this,"header"),this.headerEndSlot=new a(this,"header-end"),this.expand=!1,this.size="m"}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return t`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${i(this.align)}" position="${i(this.position)}" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([r(".n-dropdown-content")],m.prototype,"list",void 0),o([r("nord-popout",!0)],m.prototype,"popout",void 0),o([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),o([s({reflect:!0})],m.prototype,"size",void 0),o([p("open","updated")],m.prototype,"handleOpenChange",null),m=o([d("nord-dropdown")],m);var u=m;export{u as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as t,LitElement as n}from"lit";import{query as r,property as s,customElement as d}from"lit/decorators.js";import{ifDefined as i}from"lit/directives/if-defined.js";import{S as a}from"./SlotController-Z6eG7LSZ.js";import{F as l}from"./Popout-BnM-vhZ-.js";import{o as p}from"./observe-D0n0zOfU.js";import{s as c}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";import"./positioning-CsfLhMSW.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-C5CMxfb3.js";import"./events-Bv6wNHwJ.js";import"./DirectionController-ChvNGESZ.js";const h=e`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px);--_n-dropdown-max-block-size:var(--n-dropdown-max-block-size, 460px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size="s"]){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size="l"]){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(l(n)){constructor(){super(...arguments),this.headerSlot=new a(this,"header"),this.headerEndSlot=new a(this,"header-end"),this.expand=!1,this.size="m"}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return t`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${i(this.align)}" position="${i(this.position)}" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([r(".n-dropdown-content")],m.prototype,"list",void 0),o([r("nord-popout",!0)],m.prototype,"popout",void 0),o([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),o([s({reflect:!0})],m.prototype,"size",void 0),o([p("open","updated")],m.prototype,"handleOpenChange",null),m=o([d("nord-dropdown")],m);var u=m;export{u as default};
 //# sourceMappingURL=Dropdown.js.map

package/lib/IconManager.js

@@ -1,2 +1,2 @@
-const e=e=>fetch(`https://nordcdn.net/ds/icons/3.9.0/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
+const e=e=>fetch(`https://nordcdn.net/ds/icons/3.10.0/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
 //# sourceMappingURL=IconManager.js.map

package/lib/IconManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconManager.js","sources":["../src/icon/IconManager.ts"],"sourcesContent":["export type IconResolver = (iconName: string) => Promise<string>\n\n// in dev we should just load from node_modules\nconst loadIcon: IconResolver = (name: string) =>\n  import(`@nordhealth/icons/lib/assets/${name}.js`).then(({ default: svg }) => svg)\n\n// in prod we should load from the CDN, as a sensible default\nconst loadIconCdn: IconResolver = (name: string) =>\n  fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => {\n    if (!response.ok) {\n      throw new TypeError(`NORD: unknown icon: '${name}'`)\n    }\n\n    return response.text()\n  })\n\nexport class IconManager {\n  private cache = new Map<string, string | Promise<string>>()\n  resolver: IconResolver = process.env.NODE_ENV === \"development\" ? loadIcon : loadIconCdn\n\n  resolve(name: string, onResolved: (svg: string) => void) {\n    let cached = this.cache.get(name)\n\n    // if it's a string, we can resolve immediately\n    if (typeof cached === \"string\") {\n      onResolved(cached)\n      return\n    }\n\n    // if it's null, then we should initiate a fetch\n    if (!cached) {\n      cached = this.resolver(name)\n        .catch(() => \"\")\n        .then(svg => {\n          // replace the promise with the resolved value, for faster resolution next time\n          this.cache.set(name, svg)\n          return svg\n        })\n\n      // store the promise so that duplicate icons do not make separate requests\n      this.cache.set(name, cached)\n    }\n\n    cached.then(onResolved)\n  }\n\n  registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n    let name: string | undefined\n    let svg: string | undefined\n\n    if (typeof iconOrName === \"string\") {\n      name = iconOrName\n      svg = icon\n    } else {\n      name = iconOrName.title\n      svg = iconOrName.default\n    }\n\n    // handle errors\n    if (!name) {\n      throw new Error(\"name is required when registering an icon\")\n    }\n    if (!svg) {\n      throw new Error(\"icon must not be empty\")\n    }\n\n    this.cache.set(name, svg)\n  }\n\n  clear() {\n    this.cache.clear()\n  }\n}\n"],"names":["loadIconCdn","name","fetch","then","response","ok","TypeError","text","IconManager","constructor","this","cache","Map","resolver","resolve","onResolved","cached","get","catch","svg","set","registerIcon","iconOrName","icon","title","default","Error","clear"],"mappings":"AAOA,MAAMA,EAA6BC,GACjCC,MAAM,6CAAmED,SAAYE,MAAKC,IACxF,IAAKA,EAASC,GACZ,MAAM,IAAIC,UAAU,wBAAwBL,MAG9C,OAAOG,EAASG,MAAM,UAGbC,EAAb,WAAAC,GACUC,KAAAC,MAAQ,IAAIC,IACpBF,KAAAG,SAA6Eb,CAsD9E,CApDC,OAAAc,CAAQb,EAAcc,GACpB,IAAIC,EAASN,KAAKC,MAAMM,IAAIhB,GAGN,iBAAXe,GAMNA,IACHA,EAASN,KAAKG,SAASZ,GACpBiB,OAAM,IAAM,KACZf,MAAKgB,IAEJT,KAAKC,MAAMS,IAAInB,EAAMkB,GACdA,KAIXT,KAAKC,MAAMS,IAAInB,EAAMe,IAGvBA,EAAOb,KAAKY,IAlBVA,EAAWC,EAmBd,CAED,YAAAK,CAAaC,EAAyDC,GACpE,IAAItB,EACAkB,EAWJ,GAT0B,iBAAfG,GACTrB,EAAOqB,EACPH,EAAMI,IAENtB,EAAOqB,EAAWE,MAClBL,EAAMG,EAAWG,UAIdxB,EACH,MAAM,IAAIyB,MAAM,6CAElB,IAAKP,EACH,MAAM,IAAIO,MAAM,0BAGlBhB,KAAKC,MAAMS,IAAInB,EAAMkB,EACtB,CAED,KAAAQ,GACEjB,KAAKC,MAAMgB,OACZ"}
+{"version":3,"file":"IconManager.js","sources":["../src/icon/IconManager.ts"],"sourcesContent":["export type IconResolver = (iconName: string) => Promise<string>\n\n// in dev we should just load from node_modules\nconst loadIcon: IconResolver = (name: string) =>\n  import(`@nordhealth/icons/lib/assets/${name}.js`).then(({ default: svg }) => svg)\n\n// in prod we should load from the CDN, as a sensible default\nconst loadIconCdn: IconResolver = (name: string) =>\n  fetch(`https://nordcdn.net/ds/icons/${process.env.ICON_VERSION}/assets/${name}.svg`).then(response => {\n    if (!response.ok) {\n      throw new TypeError(`NORD: unknown icon: '${name}'`)\n    }\n\n    return response.text()\n  })\n\nexport class IconManager {\n  private cache = new Map<string, string | Promise<string>>()\n  resolver: IconResolver = process.env.NODE_ENV === \"development\" ? loadIcon : loadIconCdn\n\n  resolve(name: string, onResolved: (svg: string) => void) {\n    let cached = this.cache.get(name)\n\n    // if it's a string, we can resolve immediately\n    if (typeof cached === \"string\") {\n      onResolved(cached)\n      return\n    }\n\n    // if it's null, then we should initiate a fetch\n    if (!cached) {\n      cached = this.resolver(name)\n        .catch(() => \"\")\n        .then(svg => {\n          // replace the promise with the resolved value, for faster resolution next time\n          this.cache.set(name, svg)\n          return svg\n        })\n\n      // store the promise so that duplicate icons do not make separate requests\n      this.cache.set(name, cached)\n    }\n\n    cached.then(onResolved)\n  }\n\n  registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n    let name: string | undefined\n    let svg: string | undefined\n\n    if (typeof iconOrName === \"string\") {\n      name = iconOrName\n      svg = icon\n    } else {\n      name = iconOrName.title\n      svg = iconOrName.default\n    }\n\n    // handle errors\n    if (!name) {\n      throw new Error(\"name is required when registering an icon\")\n    }\n    if (!svg) {\n      throw new Error(\"icon must not be empty\")\n    }\n\n    this.cache.set(name, svg)\n  }\n\n  clear() {\n    this.cache.clear()\n  }\n}\n"],"names":["loadIconCdn","name","fetch","then","response","ok","TypeError","text","IconManager","constructor","this","cache","Map","resolver","resolve","onResolved","cached","get","catch","svg","set","registerIcon","iconOrName","icon","title","default","Error","clear"],"mappings":"AAOA,MAAMA,EAA6BC,GACjCC,MAAM,8CAAmED,SAAYE,MAAKC,IACxF,IAAKA,EAASC,GACZ,MAAM,IAAIC,UAAU,wBAAwBL,MAG9C,OAAOG,EAASG,MAAM,UAGbC,EAAb,WAAAC,GACUC,KAAAC,MAAQ,IAAIC,IACpBF,KAAAG,SAA6Eb,CAsD9E,CApDC,OAAAc,CAAQb,EAAcc,GACpB,IAAIC,EAASN,KAAKC,MAAMM,IAAIhB,GAGN,iBAAXe,GAMNA,IACHA,EAASN,KAAKG,SAASZ,GACpBiB,OAAM,IAAM,KACZf,MAAKgB,IAEJT,KAAKC,MAAMS,IAAInB,EAAMkB,GACdA,KAIXT,KAAKC,MAAMS,IAAInB,EAAMe,IAGvBA,EAAOb,KAAKY,IAlBVA,EAAWC,EAmBd,CAED,YAAAK,CAAaC,EAAyDC,GACpE,IAAItB,EACAkB,EAWJ,GAT0B,iBAAfG,GACTrB,EAAOqB,EACPH,EAAMI,IAENtB,EAAOqB,EAAWE,MAClBL,EAAMG,EAAWG,UAIdxB,EACH,MAAM,IAAIyB,MAAM,6CAElB,IAAKP,EACH,MAAM,IAAIO,MAAM,0BAGlBhB,KAAKC,MAAMS,IAAInB,EAAMkB,EACtB,CAED,KAAAQ,GACEjB,KAAKC,MAAMgB,OACZ"}

package/lib/{Popout-5MtZ4gbP.js → Popout-BnM-vhZ-.js}

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as e,LitElement as i}from"lit";import{property as s,query as n,state as r,customElement as a}from"lit/decorators.js";import{o as l,a as h,s as p,h as d,l as c,c as m,b as u,f as v}from"./positioning-CsfLhMSW.js";import{L as g}from"./LightDismissController-4pH8cdko.js";import{S as f}from"./ScrollbarController-C5CMxfb3.js";import{N as y,t as b}from"./events-Bv6wNHwJ.js";import{s as w}from"./Component-DSU3Qp0O.js";import{D as E}from"./DirectionController-ChvNGESZ.js";import{o as x}from"./observe-D0n0zOfU.js";import{E as k}from"./EventController-BBOmvfLa.js";function C(o){class e extends o{constructor(){super(...arguments),this.open=!1,this.align="start",this.position="block-end"}}return t([s({type:Boolean,reflect:!0})],e.prototype,"open",void 0),t([s({reflect:!0})],e.prototype,"align",void 0),t([s({reflect:!0})],e.prototype,"position",void 0),e}const A=o`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--_n-popout-position-x);top:var(--_n-popout-position-y);color:var(--n-color-text);opacity:0;transition:opacity var(--n-transition-slowly)}.n-popout{pointer-events:none;transform:translateY(-10px) scale(.97);visibility:hidden;transition:transform var(--n-transition-slowly),visibility var(--n-transition-slowly);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}:host([open]){opacity:1}:host([open]) .n-popout{transition-property:transform;visibility:visible;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}@media (max-width:35.9375em){:host{position:fixed;inset:0;overflow-y:auto;opacity:1;background:0 0;transition:background var(--n-transition-mobile)}:host([open]){pointer-events:auto;background:var(--n-color-overlay)}:host .n-popout{position:fixed;inset:0;inset-block-start:auto;transform:translateY(100%);transition:transform var(--n-transition-mobile),visibility var(--n-transition-mobile);transform-origin:bottom center;border-radius:0}}.top-end,.top-start{transform:translateY(10px) scale(.97)}.left-end,.left-start{transform:translateX(10px) scale(.97)}.right-end,.right-start{transform:translateX(-10px) scale(.97)}.bottom-start.is-rtl,.left-end,.top-end{transform-origin:bottom right}.bottom-end,.left-start,.top-start.is-rtl{transform-origin:top right}.bottom-end.is-rtl,.right-end,.right-start{transform-origin:bottom left}.right-start,.top-end.is-rtl{transform-origin:top left}`,P="undefined"==typeof matchMedia?{matches:!1,addEventListener(){}}:matchMedia("(max-width: 35.9375em)");let S=class extends(C(i)){constructor(){super(...arguments),this.scrollBar=new f(this),this.dismiss=new g(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this.popout&&t!==this.targetElement}),this.events=new k(this),this.direction=new E(this),this.smallViewport=P.matches,this.id="",this.enableScroll=()=>{this.open||this.scrollBar.unlockScroll()},this.updatePosition=async()=>{var t;if(!this.anchorElement)return;const o={strategy:"fixed"};"auto"===this.position?o.middleware=[l(8),h({alignment:this.align,padding:8}),p({padding:8}),d()]:(o.placement=c(this.position,this.align,this.direction.dir),o.middleware=[l(8),v(),p({padding:8}),d()]);const{x:e,y:i,placement:s,middlewareData:n}=await m(this.anchorElement,this,o);this.computedPosition=s,this.style.setProperty("--_n-popout-position-x",`${e}px`),this.style.setProperty("--_n-popout-position-y",`${i}px`),(null===(t=n.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.smallViewport?this.show():this.updatePosition().then((()=>this.show()))},this.handleMediaQueryChange=()=>{var t;this.smallViewport=P.matches,null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),!this.smallViewport&&this.open&&this.anchorElement?(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition),this.scrollBar.unlockScroll()):this.open&&this.scrollBar.lockScroll()}}async show(){return this.open?Promise.resolve():(this.open=!0,await this.updateComplete,this.dispatchEvent(new y("open")),b(this.popout))}async hide(t=!0){var o,e;return this.open?(this.open=!1,null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this),this.dispatchEvent(new y("close")),t&&(null===(e=this.targetElement)||void 0===e||e.focus({preventScroll:!0})),b(this.popout)):Promise.resolve()}firstUpdated(){this.smallViewport||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.events.listen(P,"change",this.handleMediaQueryChange)}disconnectedCallback(){var t,o;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),null===(o=this.targetElement)||void 0===o||o.removeAttribute("aria-expanded")}render(){return e`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}" @transitionend="${this.enableScroll}"><slot></slot></div>`}handleIdChange(){var t;null===(t=this.targetElement)||void 0===t||t.removeEventListener("click",this.toggleOpen),this.id?(this.targetElement=this.getToggle(),this.anchorElement=this.getAnchor(),this.events.listen(this.targetElement,"click",this.toggleOpen)):console.warn("NORD: popout requires an id attribute and value")}handleOpenChange(){var t,o;null===(t=this.targetElement)||void 0===t||t.setAttribute("aria-expanded",`${this.open}`),this.open?this.smallViewport?this.scrollBar.lockScroll():this.anchorElement&&(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition)):null===(o=this.cleanupAutoUpdate)||void 0===o||o.call(this)}handleAnchorChange(){var t;null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.anchorElement=this.getAnchor(),this.open&&!this.smallViewport&&this.anchorElement&&(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition))}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}getAnchor(){if(!this.anchor)return this.targetElement;const t=this.getRootNode().querySelector(`#${this.anchor}`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};S.styles=[w,A],t([n(".n-popout",!0)],S.prototype,"popout",void 0),t([r()],S.prototype,"computedPosition",void 0),t([r()],S.prototype,"smallViewport",void 0),t([s({reflect:!0})],S.prototype,"id",void 0),t([s({reflect:!0})],S.prototype,"anchor",void 0),t([x("id")],S.prototype,"handleIdChange",null),t([x("open")],S.prototype,"handleOpenChange",null),t([x("anchor")],S.prototype,"handleAnchorChange",null),S=t([a("nord-popout")],S);var j=S;export{C as F,j as P};
-//# sourceMappingURL=Popout-5MtZ4gbP.js.map
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as o,LitElement as i}from"lit";import{property as s,query as n,state as r,customElement as a}from"lit/decorators.js";import{o as l,a as h,s as p,h as d,l as c,c as m,b as u,f as v}from"./positioning-CsfLhMSW.js";import{L as g}from"./LightDismissController-4pH8cdko.js";import{S as f}from"./ScrollbarController-C5CMxfb3.js";import{N as y,t as b}from"./events-Bv6wNHwJ.js";import{s as w}from"./Component-DSU3Qp0O.js";import{D as E}from"./DirectionController-ChvNGESZ.js";import{o as x}from"./observe-D0n0zOfU.js";import{E as k}from"./EventController-BBOmvfLa.js";function C(e){class o extends e{constructor(){super(...arguments),this.open=!1,this.align="start",this.position="block-end"}}return t([s({type:Boolean,reflect:!0})],o.prototype,"open",void 0),t([s({reflect:!0})],o.prototype,"align",void 0),t([s({reflect:!0})],o.prototype,"position",void 0),o}const A=e`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--_n-popout-position-x);top:var(--_n-popout-position-y);color:var(--n-color-text);opacity:0;transition:opacity var(--n-transition-slowly)}.n-popout{pointer-events:none;transform:translateY(-10px) scale(.97);visibility:hidden;transition:transform var(--n-transition-slowly),visibility var(--n-transition-slowly);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}:host([open]){opacity:1}:host([open]) .n-popout{transition-property:transform;visibility:visible;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}@media (max-width:35.9375em){:host{position:fixed;inset:0;overflow-y:auto;opacity:1;background:0 0;transition:background var(--n-transition-mobile)}:host([open]){pointer-events:auto;background:var(--n-color-overlay)}:host .n-popout{position:fixed;inset:0;inset-block-start:auto;transform:translateY(100%);transition:transform var(--n-transition-mobile),visibility var(--n-transition-mobile);transform-origin:bottom center;border-radius:0}}.top-end,.top-start{transform:translateY(10px) scale(.97)}.left-end,.left-start{transform:translateX(10px) scale(.97)}.right-end,.right-start{transform:translateX(-10px) scale(.97)}.bottom-start.is-rtl,.left-end,.top-end{transform-origin:bottom right}.bottom-end,.left-start,.top-start.is-rtl{transform-origin:top right}.bottom-end.is-rtl,.right-end,.right-start{transform-origin:bottom left}.right-start,.top-end.is-rtl{transform-origin:top left}`,P="undefined"==typeof matchMedia?{matches:!1,addEventListener(){}}:matchMedia("(max-width: 35.9375em)");let S=class extends(C(i)){constructor(){super(...arguments),this.scrollBar=new f(this),this.dismiss=new g(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this.popout&&t!==this.targetElement}),this.events=new k(this),this.direction=new E(this),this.smallViewport=P.matches,this.id="",this.enableScroll=()=>{this.open||this.scrollBar.unlockScroll()},this.updatePosition=async()=>{var t;if(!this.anchorElement)return;const e={strategy:"fixed"};"auto"===this.position?e.middleware=[l(8),h({alignment:this.align,padding:8}),p({padding:8}),d()]:(e.placement=c(this.position,this.align,this.direction.dir),e.middleware=[l(8),v(),p({padding:8}),d()]);const{x:o,y:i,placement:s,middlewareData:n}=await m(this.anchorElement,this,e);this.computedPosition=s,this.style.setProperty("--_n-popout-position-x",`${o}px`),this.style.setProperty("--_n-popout-position-y",`${i}px`),(null===(t=n.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.smallViewport?this.show():this.updatePosition().then((()=>this.show()))},this.handleMediaQueryChange=()=>{var t;this.smallViewport=P.matches,null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),!this.smallViewport&&this.open&&this.anchorElement?(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition),this.scrollBar.unlockScroll()):this.open&&this.scrollBar.lockScroll()}}async show(){return this.open?Promise.resolve():(this.open=!0,await this.updateComplete,this.dispatchEvent(new y("open")),b(this.popout))}async hide(t=!0){var e,o;return this.open?(this.open=!1,null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.dispatchEvent(new y("close")),t&&(null===(o=this.targetElement)||void 0===o||o.focus({preventScroll:!0})),b(this.popout)):Promise.resolve()}firstUpdated(){this.smallViewport||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.events.listen(P,"change",this.handleMediaQueryChange),this.initializeElements()}disconnectedCallback(){var t,e;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),null===(e=this.targetElement)||void 0===e||e.removeAttribute("aria-expanded")}render(){return o`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}" @transitionend="${this.enableScroll}"><slot></slot></div>`}handleIdChange(){var t;null===(t=this.targetElement)||void 0===t||t.removeEventListener("click",this.toggleOpen),this.id?this.initializeElements():console.warn("NORD: popout requires an id attribute and value")}initializeElements(){this.targetElement=this.getToggle(),this.anchorElement=this.getAnchor(),this.events.listen(this.targetElement,"click",this.toggleOpen)}handleOpenChange(){var t,e;null===(t=this.targetElement)||void 0===t||t.setAttribute("aria-expanded",`${this.open}`),this.open?this.smallViewport?this.scrollBar.lockScroll():this.anchorElement&&(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition)):null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this)}handleAnchorChange(){var t;null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.anchorElement=this.getAnchor(),this.open&&!this.smallViewport&&this.anchorElement&&(this.cleanupAutoUpdate=u(this.anchorElement,this,this.updatePosition))}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}getAnchor(){if(!this.anchor)return this.targetElement;const t=this.getRootNode().querySelector(`#${this.anchor}`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};S.styles=[w,A],t([n(".n-popout",!0)],S.prototype,"popout",void 0),t([r()],S.prototype,"computedPosition",void 0),t([r()],S.prototype,"smallViewport",void 0),t([s({reflect:!0})],S.prototype,"id",void 0),t([s({reflect:!0})],S.prototype,"anchor",void 0),t([x("id")],S.prototype,"handleIdChange",null),t([x("open")],S.prototype,"handleOpenChange",null),t([x("anchor")],S.prototype,"handleAnchorChange",null),S=t([a("nord-popout")],S);var j=S;export{C as F,j as P};
+//# sourceMappingURL=Popout-BnM-vhZ-.js.map

package/lib/Popout-BnM-vhZ-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popout-BnM-vhZ-.js","sources":["../src/common/mixins/FloatingComponentMixin.ts","../src/popout/Popout.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { LitElement } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { Alignment } from \"@floating-ui/dom\"\nimport { LogicalSide } from \"../positioning.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FloatingMixinInterface {\n  open: boolean\n  align: Alignment\n  position: LogicalSide | \"auto\"\n}\n\nexport function FloatingMixin<T extends Constructor<LitElement>>(\n  superClass: T\n): Constructor<FloatingMixinInterface> & T {\n  class FloatingElement extends superClass {\n    /**\n     * Controls whether the component is open or not.\n     */\n    @property({ type: Boolean, reflect: true }) open = false\n\n    /**\n     * Set the alignment in relation to the toggle (or anchor) depending on the position.\n     * `start` will align it to the left of the toggle (or anchor).\n     * `end` will align it to the right of the toggle (or anchor).\n     * Setting the `position` to `inline-start` or `inline-end` will switch\n     * `start` and `end` to the top and bottom respectively.\n     */\n    @property({ reflect: true }) align: \"start\" | \"end\" = \"start\"\n\n    /**\n     * Set the position in relation to the toggle (or anchor).\n     * Options follow logical properties.\n     * `block-start` and `block-end` referring to top and bottom respectively,\n     * `inline-start` and `inline-end` referring to left and right respectively.\n     * You can also set it to `auto` for automatic positioning depending on\n     * which side has the most space available.\n     */\n    @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" | \"auto\" =\n      \"block-end\"\n  }\n\n  return FloatingElement\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport {\n  computePosition,\n  shift,\n  offset,\n  flip,\n  autoPlacement,\n  hide,\n  autoUpdate,\n  Placement,\n  ComputePositionConfig,\n} from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { ScrollbarController } from \"../common/controllers/ScrollbarController.js\"\nimport { NordEvent, transition } from \"../common/events.js\"\nimport { FloatingMixin } from \"../common/mixins/FloatingComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery =\n  typeof matchMedia === \"undefined\"\n    ? ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n    : matchMedia(\"(max-width: 35.9375em)\")\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status ready\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends FloatingMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private targetElement?: HTMLElement\n  private anchorElement?: HTMLElement\n  private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n  @query(\".n-popout\", true) private popout!: HTMLDivElement\n\n  private scrollBar = new ScrollbarController(this)\n\n  /**\n   * Handle dismissal of the popout, clicking outside the target button and popout.\n   */\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== \"click\"),\n    isDismissible: node => node !== this.popout && node !== this.targetElement,\n  })\n\n  private events = new EventController(this)\n  private direction = new DirectionController(this)\n\n  @state() private computedPosition?: Placement\n\n  @state() private smallViewport = mediaQuery.matches\n\n  /**\n   * The id for the active element to reference via aria-controls.\n   */\n  // eslint-disable-next-line lit/no-native-attributes\n  @property({ reflect: true }) id: string = \"\"\n\n  /**\n   * Set an optional anchor element to align against, replacing the triggering element.\n   */\n  @property({ reflect: true }) anchor?: string\n\n  /**\n   * Show the popout.\n   * A promise that resolves to a `TransitionEvent` when the popout's show animation ends or is cancelled.\n   * If the popout is already open, the promise resolves immediately with `undefined`.\n   */\n  async show(): Promise<TransitionEvent | void> {\n    if (this.open) {\n      return Promise.resolve()\n    }\n\n    this.open = true\n\n    // we should only focus once the popout is visible after render is complete\n    await this.updateComplete\n\n    /**\n     * Dispatched when the popout is opened.\n     */\n    this.dispatchEvent(new NordEvent(\"open\"))\n\n    return transition(this.popout)\n  }\n\n  /**\n   * Hide the popout.\n   * Returns a promise that resolves to a `TransitionEvent` when the popout's hide animation ends or is cancelled.\n   * If the popout is already closed, the promise resolves immediately with `undefined`.\n   * @param {boolean} moveFocusToButton prevent focus returning to the target button. Default is true.\n   */\n  async hide(moveFocusToButton: boolean = true): Promise<TransitionEvent | void> {\n    if (!this.open) {\n      return Promise.resolve()\n    }\n\n    this.open = false\n\n    this.cleanupAutoUpdate?.()\n\n    /**\n     * Dispatched when the popout is closed.\n     */\n    this.dispatchEvent(new NordEvent(\"close\"))\n\n    if (moveFocusToButton) {\n      this.targetElement?.focus({ preventScroll: true })\n    }\n\n    return transition(this.popout)\n  }\n\n  /**\n   * Position the popout on load.\n   */\n  firstUpdated() {\n    if (!this.smallViewport) {\n      this.updatePosition()\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n\n    this.initializeElements()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.cleanupAutoUpdate?.()\n    this.targetElement?.removeAttribute(\"aria-expanded\")\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n        aria-hidden=${this.open ? \"false\" : \"true\"}\n        @transitionend=${this.enableScroll}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n\n  @observe(\"id\")\n  protected handleIdChange() {\n    // clean up any old listeners\n    this.targetElement?.removeEventListener(\"click\", this.toggleOpen)\n\n    if (!this.id) {\n      // eslint-disable-next-line no-console\n      console.warn(\"NORD: popout requires an id attribute and value\")\n    } else {\n      this.initializeElements()\n    }\n  }\n\n  private initializeElements() {\n    this.targetElement = this.getToggle()\n    this.anchorElement = this.getAnchor()\n\n    this.events.listen(this.targetElement, \"click\", this.toggleOpen)\n  }\n\n  @observe(\"open\")\n  protected handleOpenChange() {\n    this.targetElement?.setAttribute(\"aria-expanded\", `${this.open}`)\n\n    if (this.open) {\n      if (this.smallViewport) {\n        // hide scrollbar and prevent scroll on body\n        this.scrollBar.lockScroll()\n      } else if (this.anchorElement) {\n        this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n      }\n    } else {\n      this.cleanupAutoUpdate?.()\n    }\n  }\n\n  @observe(\"anchor\")\n  protected handleAnchorChange() {\n    this.cleanupAutoUpdate?.()\n    this.anchorElement = this.getAnchor()\n\n    // if the popout is already open when the anchor changes, we should update its position\n    if (this.open && !this.smallViewport && this.anchorElement) {\n      this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n    }\n  }\n\n  private enableScroll = () => {\n    // scrollbar should only be restored when the backdrop has transitioned\n    // that way we avoid awkward double scrollbars.\n    if (!this.open) {\n      this.scrollBar.unlockScroll()\n    }\n  }\n\n  /**\n   * Get the position of the element toggling the popout\n   * and position the popout underneath it, taking into account the optional placement.\n   */\n  private updatePosition = async () => {\n    if (!this.anchorElement) {\n      return\n    }\n\n    const computePositionConfig: ComputePositionConfig = {\n      strategy: \"fixed\",\n    }\n\n    if (this.position === \"auto\") {\n      computePositionConfig.middleware = [\n        offset(8),\n        autoPlacement({ alignment: this.align, padding: 8 }),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ]\n    } else {\n      computePositionConfig.placement = logicalToPhysical(this.position, this.align, this.direction.dir)\n      computePositionConfig.middleware = [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ]\n    }\n\n    const { x, y, placement, middlewareData } = await computePosition(this.anchorElement, this, computePositionConfig)\n\n    this.computedPosition = placement\n\n    // use physical properties here since floating-ui\n    // works exclusively in physical dimensions\n    // we do all the mapping in logicalToPhysical\n    this.style.setProperty(\"--_n-popout-position-x\", `${x}px`)\n    this.style.setProperty(\"--_n-popout-position-y\", `${y}px`)\n\n    if (middlewareData.hide?.referenceHidden) {\n      this.hide()\n    }\n  }\n\n  /**\n   * Toggle the popout open or closed using state.\n   * Updating the position to underneath the target button before the popout is opened.\n   */\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n    if (this.open) {\n      this.hide(false)\n    } else if (!this.smallViewport) {\n      this.updatePosition().then(() => this.show())\n    } else {\n      this.show()\n    }\n  }\n\n  private getToggle() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n    if (toggle instanceof HTMLSlotElement) {\n      return toggle.assignedElements()[0] as HTMLElement\n    }\n\n    return toggle\n  }\n\n  private getAnchor() {\n    if (!this.anchor) {\n      return this.targetElement\n    }\n\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const anchor = <HTMLElement>rootNode.querySelector(`#${this.anchor}`)\n\n    if (anchor instanceof HTMLSlotElement) {\n      return anchor.assignedElements()[0] as HTMLElement\n    }\n\n    return anchor\n  }\n\n  /**\n   * Update the smallViewport flag to switch between \"sheet\" and \"floating\".\n   * autoUpdate is needed when a viewport gets larger and the popout is open.\n   */\n  private handleMediaQueryChange = () => {\n    this.smallViewport = mediaQuery.matches\n\n    this.cleanupAutoUpdate?.()\n\n    if (!this.smallViewport && this.open && this.anchorElement) {\n      this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n      this.scrollBar.unlockScroll()\n    } else if (this.open) {\n      this.scrollBar.lockScroll()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-popout\": Popout\n  }\n}\n"],"names":["FloatingMixin","superClass","FloatingElement","constructor","this","open","align","position","__decorate","property","type","Boolean","reflect","prototype","mediaQuery","matchMedia","matches","addEventListener","Popout","LitElement","scrollBar","ScrollbarController","dismiss","LightDismissController","isOpen","onDismiss","e","hide","isDismissible","node","popout","targetElement","events","EventController","direction","DirectionController","smallViewport","id","enableScroll","unlockScroll","updatePosition","async","anchorElement","computePositionConfig","strategy","middleware","offset","autoPlacement","alignment","padding","shift","placement","logicalToPhysical","dir","flip","x","y","middlewareData","computePosition","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","show","then","handleMediaQueryChange","cleanupAutoUpdate","call","autoUpdate","lockScroll","Promise","resolve","updateComplete","dispatchEvent","NordEvent","transition","moveFocusToButton","_b","focus","preventScroll","firstUpdated","connectedCallback","super","listen","initializeElements","disconnectedCallback","removeAttribute","render","html","handleIdChange","removeEventListener","console","warn","getToggle","getAnchor","handleOpenChange","setAttribute","handleAnchorChange","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","anchor","styles","componentStyle","query","state","observe","customElement"],"mappings":"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"}

package/lib/Popout.js

@@ -1,2 +1,2 @@
-import"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"./positioning-CsfLhMSW.js";import"./LightDismissController-4pH8cdko.js";import"./ScrollbarController-C5CMxfb3.js";import"./events-Bv6wNHwJ.js";export{P as default}from"./Popout-5MtZ4gbP.js";import"./Component-DSU3Qp0O.js";import"./DirectionController-ChvNGESZ.js";import"./observe-D0n0zOfU.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";
+import"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"./positioning-CsfLhMSW.js";import"./LightDismissController-4pH8cdko.js";import"./ScrollbarController-C5CMxfb3.js";import"./events-Bv6wNHwJ.js";export{P as default}from"./Popout-BnM-vhZ-.js";import"./Component-DSU3Qp0O.js";import"./DirectionController-ChvNGESZ.js";import"./observe-D0n0zOfU.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";
 //# sourceMappingURL=Popout.js.map