@nordhealth/components 4.2.0 → 4.3.1

package/lib/index.js

@@ -1,2 +1,2 @@
-export{isTranslationRegistered,registerTranslation}from"./translation.js";export{default as Badge}from"./Badge.js";export{default as Button}from"./Button.js";export{default as Card}from"./Card.js";export{default as Input}from"./Input.js";export{default as Icon}from"./Icon.js";export{default as CommandMenu}from"./CommandMenu.js";export{default as CommandMenuAction}from"./CommandMenuAction.js";export{default as Select}from"./Select.js";export{default as Stack}from"./Stack.js";export{default as Spinner}from"./Spinner.js";export{default as Table}from"./Table.js";export{default as VisuallyHidden}from"./VisuallyHidden.js";export{default as Textarea}from"./Textarea.js";export{C as Calendar}from"./Calendar-Cuumq57y.js";export{default as DatePicker}from"./DatePicker.js";export{default as Checkbox}from"./Checkbox.js";export{default as Tooltip}from"./Tooltip.js";export{default as Fieldset}from"./Fieldset.js";export{default as Radio}from"./Radio.js";export{default as Header}from"./Header.js";export{default as Message}from"./Message.js";export{default as NavGroup}from"./NavGroup.js";export{default as NavItem}from"./NavItem.js";export{default as Navigation}from"./Navigation.js";export{default as Layout}from"./Layout.js";export{default as EmptyState}from"./EmptyState.js";export{default as Banner}from"./Banner.js";export{default as Avatar}from"./Avatar.js";export{default as ProgressBar}from"./ProgressBar.js";export{P as Popout}from"./Popout-5MtZ4gbP.js";export{default as Dropdown}from"./Dropdown.js";export{default as DropdownItem}from"./DropdownItem.js";export{default as DropdownGroup}from"./DropdownGroup.js";export{default as TabGroup}from"./TabGroup.js";export{default as Tab}from"./Tab.js";export{default as TabPanel}from"./TabPanel.js";export{default as Toggle}from"./Toggle.js";export{default as Modal}from"./Modal.js";export{default as Skeleton}from"./Skeleton.js";export{default as Toast}from"./Toast.js";export{default as ToastGroup}from"./ToastGroup.js";export{default as Divider}from"./Divider.js";export{default as Qrcode}from"./Qrcode.js";export{default as Drawer}from"./Drawer.js";export{N as NavToggle}from"./NavToggle-D-udBTou.js";export{default as Range}from"./Range.js";export{default as ButtonGroup}from"./ButtonGroup.js";export{default as Notification}from"./Notification.js";export{default as NotificationGroup}from"./NotificationGroup.js";export{default as TopBar}from"./TopBar.js";export{default as Footer}from"./Footer.js";export{default as Tag}from"./Tag.js";export{default as TagGroup}from"./TagGroup.js";export{default as SegmentedControl}from"./SegmentedControl.js";export{default as SegmentedControlItem}from"./SegmentedControlItem.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"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"./Component-DSU3Qp0O.js";import"lit/directives/ref.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./cond-CI1KbneT.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./SlotController-Z6eG7LSZ.js";import"lit/directives/if-defined.js";import"lit/directives/class-map.js";import"lit/directives/style-map.js";import"./FormAssociatedMixin-DFL7yabe.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.js";import"./TextField-C5gYzfOp.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./SizeMixin-CU9cLbLC.js";import"./FormField-CUC_H-0e.js";import"./DirectionController-ChvNGESZ.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./observe-D0n0zOfU.js";import"lit/directives/repeat.js";import"./collection-Dvg2XbxV.js";import"./number-Dg2vCfGd.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./KeyboardController.js";import"./SelectEvent.js";import"./LocalizeController.js";import"./dates-lbaNvUdr.js";import"./DateSelectEvent.js";import"./interface-close-small-CnpAFMO3.js";import"./date-adapter.js";import"./interface-checked-small-BtICPEsp.js";import"./positioning-CsfLhMSW.js";import"./fsm-Bq5jMQrK.js";import"./LightSlotController-Coyy4nqS.js";import"./DropdownItem-BheCmR9u.js";import"./Sticky-DqnqENYN.js";import"./ScrollbarController-C5CMxfb3.js";import"./ModalController.js";import"./NotificationMixin-DOUQsx7N.js";
+export{isTranslationRegistered,registerTranslation}from"./translation.js";export{default as Badge}from"./Badge.js";export{default as Button}from"./Button.js";export{default as Card}from"./Card.js";export{default as Input}from"./Input.js";export{default as Icon}from"./Icon.js";export{default as CommandMenu}from"./CommandMenu.js";export{default as CommandMenuAction}from"./CommandMenuAction.js";export{default as Select}from"./Select.js";export{default as Stack}from"./Stack.js";export{default as Spinner}from"./Spinner.js";export{default as Table}from"./Table.js";export{default as VisuallyHidden}from"./VisuallyHidden.js";export{default as Textarea}from"./Textarea.js";export{C as Calendar}from"./Calendar-CYcI340m.js";export{default as DatePicker}from"./DatePicker.js";export{default as Checkbox}from"./Checkbox.js";export{default as Tooltip}from"./Tooltip.js";export{default as Fieldset}from"./Fieldset.js";export{default as Radio}from"./Radio.js";export{default as Header}from"./Header.js";export{default as Message}from"./Message.js";export{default as NavGroup}from"./NavGroup.js";export{default as NavItem}from"./NavItem.js";export{default as Navigation}from"./Navigation.js";export{default as Layout}from"./Layout.js";export{default as EmptyState}from"./EmptyState.js";export{default as Banner}from"./Banner.js";export{default as Avatar}from"./Avatar.js";export{default as ProgressBar}from"./ProgressBar.js";export{P as Popout}from"./Popout-BnM-vhZ-.js";export{default as Dropdown}from"./Dropdown.js";export{default as DropdownItem}from"./DropdownItem.js";export{default as DropdownGroup}from"./DropdownGroup.js";export{default as TabGroup}from"./TabGroup.js";export{default as Tab}from"./Tab.js";export{default as TabPanel}from"./TabPanel.js";export{default as Toggle}from"./Toggle.js";export{default as Modal}from"./Modal.js";export{default as Skeleton}from"./Skeleton.js";export{default as Toast}from"./Toast.js";export{default as ToastGroup}from"./ToastGroup.js";export{default as Divider}from"./Divider.js";export{default as Qrcode}from"./Qrcode.js";export{default as Drawer}from"./Drawer.js";export{N as NavToggle}from"./NavToggle-D-udBTou.js";export{default as Range}from"./Range.js";export{default as ButtonGroup}from"./ButtonGroup.js";export{default as Notification}from"./Notification.js";export{default as NotificationGroup}from"./NotificationGroup.js";export{default as TopBar}from"./TopBar.js";export{default as Footer}from"./Footer.js";export{default as Tag}from"./Tag.js";export{default as TagGroup}from"./TagGroup.js";export{default as SegmentedControl}from"./SegmentedControl.js";export{default as SegmentedControlItem}from"./SegmentedControlItem.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"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"./Component-DSU3Qp0O.js";import"lit/directives/ref.js";import"./EventController-BBOmvfLa.js";import"./LightDomController-DIwtVelV.js";import"./cond-CI1KbneT.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./SlotController-Z6eG7LSZ.js";import"lit/directives/if-defined.js";import"lit/directives/class-map.js";import"lit/directives/style-map.js";import"./FormAssociatedMixin-DFL7yabe.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.js";import"./TextField-C5gYzfOp.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./SizeMixin-CU9cLbLC.js";import"./FormField-CUC_H-0e.js";import"./DirectionController-ChvNGESZ.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./observe-D0n0zOfU.js";import"lit/directives/repeat.js";import"./collection-Dvg2XbxV.js";import"./number-Dg2vCfGd.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./KeyboardController.js";import"./SelectEvent.js";import"./LocalizeController.js";import"./dates-lbaNvUdr.js";import"./DateSelectEvent.js";import"./interface-close-small-CnpAFMO3.js";import"./date-adapter.js";import"./interface-checked-small-BtICPEsp.js";import"./positioning-CsfLhMSW.js";import"./fsm-Bq5jMQrK.js";import"./LightSlotController-Coyy4nqS.js";import"./DropdownItem-BheCmR9u.js";import"./Sticky-DqnqENYN.js";import"./ScrollbarController-C5CMxfb3.js";import"./ModalController.js";import"./NotificationMixin-DOUQsx7N.js";
 //# sourceMappingURL=index.js.map

package/lib/src/calendar/Calendar.d.ts

@@ -61,6 +61,11 @@ export default class Calendar extends LitElement {
      * This setting can be used alone or together with the min property.
      */
     max?: string;
+    /**
+     * The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.
+     * If not set, the current local date of the user is used.
+     */
+    today?: string;
     /**
      * Controls whether the calendar expands to fill the width of its container.
      */
@@ -92,6 +97,7 @@ export default class Calendar extends LitElement {
     protected handleFocusedDayChange(): void;
     private handleLangChange;
     private handleDaySelect;
+    private getToday;
     private addDays;
     private addMonths;
     private addYears;

package/lib/src/date-picker/DatePicker.d.ts

@@ -78,6 +78,11 @@ export default class DatePicker extends DatePicker_base {
      * This setting can be used alone or together with the min property.
      */
     max?: string;
+    /**
+     * The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.
+     * If not set, the current local date of the user is used.
+     */
+    today?: string;
     /**
      * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
      * Default is Monday.

package/lib/src/popout/Popout.d.ts

@@ -51,6 +51,7 @@ export default class Popout extends Popout_base {
     disconnectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
     protected handleIdChange(): void;
+    private initializeElements;
     protected handleOpenChange(): void;
     protected handleAnchorChange(): void;
     private enableScroll;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordhealth/components",
-  "version": "4.2.0",
+  "version": "4.3.1",
   "description": "This package includes Nord Design System Web Components",
   "author": "Nordhealth <support@nordhealth.design>",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
-    "@nordhealth/icons": "^3.9.0",
+    "@nordhealth/icons": "^3.10.0",
     "lit": "^3.3.0",
     "qr": "^0.4.2",
     "tinykeys": "^1.4.0"
@@ -178,5 +178,5 @@
       }
     ]
   },
-  "gitHead": "943c0bd80cf3e3f36613e5a11a74ed2c32e83701"
+  "gitHead": "5cd5e41400269b39c525e880d602e1b35a2a6026"
 }

package/lib/Calendar-Cuumq57y.js

@@ -1,2 +0,0 @@
-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 b}from"./cond-CI1KbneT.js";import{r as y}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 S,j,k as M,l as C,m as T,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=new Date,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(y(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="${b(l,"true")}" aria-pressed="${c?"true":"false"}" aria-current="${b(i,"date")}" aria-label="${v}"><span aria-hidden="true">${t.getDate()}</span></button></td>`}))}</tr>`))}</tbody></table></div>`}handleValueChange(){this.setFocusedDay(x(this.value)||new Date)}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=S(e,"long"),this.dayNamesShort=S(e,"narrow")}addDays(e){this.setFocusedDay(j(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(M(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(C(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const a=T(k(this.focusedDay),e),t=z(a),n=T(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,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-Cuumq57y.js.map

package/lib/Calendar-Cuumq57y.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Calendar-Cuumq57y.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   * 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 = new Date()\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) || new Date())\n  }\n\n  @observe(\"focusedDay\", \"updated\")\n  protected handleFocusedDayChange() {\n    if (this.activeFocus) {\n      this.focusedDayNode.focus()\n    }\n  }\n\n  private handleLangChange() {\n    const lang = this.localize.resolvedLang\n    this.dateFormatShort = new Intl.DateTimeFormat(lang, { 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 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","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/Popout-5MtZ4gbP.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Popout-5MtZ4gbP.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\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.targetElement = this.getToggle()\n      this.anchorElement = this.getAnchor()\n\n      this.events.listen(this.targetElement, \"click\", this.toggleOpen)\n    }\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","disconnectedCallback","removeAttribute","render","html","handleIdChange","removeEventListener","getToggle","getAnchor","console","warn","handleOpenChange","setAttribute","handleAnchorChange","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","anchor","styles","componentStyle","query","state","observe","customElement"],"mappings":"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"}