@nordhealth/components 2.12.0 → 2.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/README.md +1 -1
  2. package/custom-elements.json +2336 -2232
  3. package/lib/Button.js +1 -1
  4. package/lib/Button.js.map +1 -1
  5. package/lib/{Calendar-e3786f07.js → Calendar-9d3d6d01.js} +2 -2
  6. package/lib/{Calendar-e3786f07.js.map → Calendar-9d3d6d01.js.map} +1 -1
  7. package/lib/Calendar.js +1 -1
  8. package/lib/Card.js +1 -1
  9. package/lib/Checkbox.js +1 -1
  10. package/lib/Checkbox.js.map +1 -1
  11. package/lib/CommandMenu.js +1 -1
  12. package/lib/CommandMenu.js.map +1 -1
  13. package/lib/DatePicker.js +1 -1
  14. package/lib/DatePicker.js.map +1 -1
  15. package/lib/Drawer.js +1 -1
  16. package/lib/DropdownItem.js +1 -1
  17. package/lib/DropdownItem.js.map +1 -1
  18. package/lib/Fieldset.js +1 -1
  19. package/lib/{FormAssociatedMixin-e8bc2869.js → FormAssociatedMixin-f4da77a8.js} +2 -2
  20. package/lib/{FormAssociatedMixin-e8bc2869.js.map → FormAssociatedMixin-f4da77a8.js.map} +1 -1
  21. package/lib/Header.js +1 -1
  22. package/lib/Icon.js +1 -1
  23. package/lib/Icon.js.map +1 -1
  24. package/lib/Input.js +1 -1
  25. package/lib/Input.js.map +1 -1
  26. package/lib/Layout.js +1 -1
  27. package/lib/Layout.js.map +1 -1
  28. package/lib/LocalizeController.js +1 -1
  29. package/lib/LocalizeController.js.map +1 -1
  30. package/lib/Modal.js +1 -1
  31. package/lib/Modal.js.map +1 -1
  32. package/lib/NavItem.js +1 -1
  33. package/lib/NavToggle.js +1 -1
  34. package/lib/NavToggle.js.map +1 -1
  35. package/lib/Radio.js +1 -1
  36. package/lib/Range.js +1 -1
  37. package/lib/Range.js.map +1 -1
  38. package/lib/Select.js +1 -1
  39. package/lib/Select.js.map +1 -1
  40. package/lib/SizeMixin-4d04817d.js +2 -0
  41. package/lib/{SizeMixin-d5afdb92.js.map → SizeMixin-4d04817d.js.map} +1 -1
  42. package/lib/SlotController-d733c575.js +2 -0
  43. package/lib/SlotController-d733c575.js.map +1 -0
  44. package/lib/Tab.js +1 -1
  45. package/lib/TabGroup.js +1 -1
  46. package/lib/Textarea.js +1 -1
  47. package/lib/Textarea.js.map +1 -1
  48. package/lib/Toggle.js +1 -1
  49. package/lib/Tooltip.js +1 -1
  50. package/lib/Tooltip.js.map +1 -1
  51. package/lib/bundle.js +6 -6
  52. package/lib/bundle.js.map +1 -1
  53. package/lib/en-us.js +1 -1
  54. package/lib/en-us.js.map +1 -1
  55. package/lib/fi-fi.js +1 -1
  56. package/lib/fi-fi.js.map +1 -1
  57. package/lib/index.js +1 -1
  58. package/lib/localization6.js +2 -0
  59. package/lib/localization6.js.map +1 -0
  60. package/lib/src/button/Button.d.ts +1 -0
  61. package/lib/src/common/controllers/SlotController.d.ts +2 -0
  62. package/lib/src/common/mixins/SizeMixin.d.ts +0 -1
  63. package/lib/src/icon/Icon.d.ts +1 -1
  64. package/lib/src/localization/en-us.d.ts +3 -0
  65. package/lib/src/textarea/Textarea.d.ts +13 -1
  66. package/lib/src/textarea/localization.d.ts +4 -0
  67. package/lib/translation.js +1 -1
  68. package/lib/translation.js.map +1 -1
  69. package/package.json +5 -4
  70. package/lib/SizeMixin-d5afdb92.js +0 -2
  71. package/lib/SlotController-89834aef.js +0 -2
  72. package/lib/SlotController-89834aef.js.map +0 -1
package/lib/Button.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as t,y as o,b as n,_ as r,e as a,s as e}from"./query-assigned-elements-cf502539.js";import{e as i}from"./property-03f59dce.js";import{e as s,n as b}from"./ref-c44e9f3c.js";import{E as l}from"./EventController-d99ebeef.js";import{L as d}from"./LightDomController-052f446a.js";import{c}from"./cond-2da54107.js";import"./Spinner.js";import{F as u}from"./FocusableMixin-32631bff.js";import{I as h}from"./InputMixin-7fa755e1.js";import{s as v}from"./Component-449e40fb.js";import"./directive-de55b00a.js";import"./if-defined-720964c0.js";const p=t`:host{--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-s));--_n-button-gap:var(--n-button-gap, var(--n-space-s));--_n-button-gradient:var(--n-button-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button));--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-strong));--_n-button-text-align:var(--n-button-text-align, center);--_n-button-box-shadow:var(--n-button-box-shadow, var(--n-box-shadow));--_n-button-padding-inline:calc(var(--n-space-m) / 1.2);--_n-button-color:var(--n-color-text);--_n-button-opacity:1;--_n-button-border-style:solid;--_n-button-font-size:var(--n-font-size-m);--_n-button-font-weight:var(--n-font-weight);--_n-button-min-block-size:var(--n-space-xl);--_n-button-inline-size:fit-content;--_n-button-padding-block:calc(var(--n-space-s) / 1.6);display:inline-block}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--_n-button-background-color);opacity:var(--_n-button-opacity);border-radius:var(--_n-button-border-radius);border:1px var(--_n-button-border-style) var(--_n-button-border-color);box-shadow:var(--_n-button-box-shadow);color:var(--_n-button-color);cursor:pointer;display:flex;gap:var(--_n-button-gap);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-button-font-size);font-weight:var(--_n-button-font-weight);line-height:var(--n-line-height-form);margin:0;min-block-size:var(--_n-button-min-block-size);padding:var(--_n-button-padding-block) var(--_n-button-padding-inline);text-align:var(--_n-button-text-align);text-decoration:none;transition:.1s ease;transition-property:background-color,opacity,color,box-shadow,border-color;-webkit-user-select:none;user-select:none;position:relative;inline-size:var(--_n-button-inline-size)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--_n-button-gradient);border-radius:var(--_n-button-border-radius);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--_n-button-inline-size:100%;display:block}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-accent));--_n-button-border-style:solid;--_n-button-box-shadow:0 0 0 1px var(--n-color-accent),var(--n-box-shadow);outline:0}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-color-text-on-accent);--_n-button-font-weight:var(--n-font-weight-active)}:host([variant=primary]),:host([variant=primary]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-accent))}:host([variant=primary]) .n-button:hover{filter:brightness(93%)}:host([variant=primary]) .n-button:focus{--_n-button-box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--_n-button-border-color)}:host([variant=dashed]){--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-color-text-weaker);--_n-button-border-style:dashed}:host([variant=dashed]) .n-button:hover{--_n-button-color:var(--n-color-text)}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--_n-button-box-shadow:var(--n-button-box-shadow, none)}:host([variant=plain]),:host([variant=plain]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-color-text-on-accent);--_n-button-font-weight:var(--n-font-weight-active)}:host([variant=danger]),:host([variant=danger]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-status-danger))}:host([variant=danger]) .n-button:hover{filter:brightness(93%)}:host([variant=danger]) .n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-status-danger));--_n-button-box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-status-danger)}:host([variant=switch]){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-sharp));--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-text-align:var(--n-button-text-align, start);--_n-button-background-color:var(--n-button-background-color, transparent);--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-color-text);--_n-button-font-weight:var(--n-font-weight-heading);--_n-button-min-block-size:calc(var(--n-space-xxl) - 1px);--_n-button-font-size:var(--n-font-size-l);--_n-button-padding-inline:var(--n-space-m);display:flex;align-items:center}:host([variant=switch]) .n-button *{pointer-events:none}:host([variant=switch]) .n-button::after{display:none}:host([variant=switch]) .n-button:hover,:host([variant=switch][aria-expanded=true]) .n-button{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-nav-hover))}:host([variant=switch]) .n-button:focus{--_n-button-box-shadow:inset 0 0 0 1px var(--_n-button-border-color)}.n-button-switch-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s)}:host([disabled]){--_n-button-border-color:var(--n-button-border-color, var(--_n-button-background-color));--_n-button-background-color:var(--n-button-background-color, var(--n-color-border));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-color-text-weaker);--_n-button-opacity:0.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}.n-button-spinner{position:absolute;transform:translateX(-50%) translateY(-50%);inset-block-start:50%;inset-inline-start:50%}:host([loading]:not([href])){pointer-events:none}:host([loading]:not([href])) .n-content,:host([loading]:not([href])) ::slotted([slot=end]),:host([loading]:not([href])) ::slotted([slot=start]){opacity:0}:host([size="s"]){--_n-button-gap:var(--n-button-gap, calc(var(--n-space-s) / 2));--_n-button-padding-inline:var(--n-space-s);--_n-button-padding-block:calc(var(--n-space-s) / 1.5);--_n-button-font-size:var(--n-font-size-s);--_n-button-min-block-size:var(--n-space-l)}:host([size="s"]) .n-button{line-height:var(--n-line-height-tight)}:host([size="l"]){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius));--_n-button-padding-inline:calc(var(--n-space-l) / 1.3);--_n-button-font-size:var(--n-font-size-l);--_n-button-min-block-size:calc(var(--n-space-xxl) - var(--n-space-l));--_n-button-font-weight:var(--n-font-weight-active)}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}:host(:not([variant=primary],[variant=danger])) ::slotted(nord-icon){color:var(--n-color-icon)}slot:not([name])::slotted(nord-icon:not([size=xs])){transform:translateY(1px)}`;let f=class extends(h(u(e))){constructor(){super(...arguments),this.buttonRef=s(),this.events=new l(this),this.lightDom=new d(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.loading=!1,this.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"click",this.handleOuterClick,!0)}render(){const t=o`<slot name="start"></slot><div class="n-content"><slot></slot></div><nord-spinner class="n-button-spinner" color="currentColor" ?hidden="${!this.loading||this.href}"></nord-spinner><slot name="end">${"switch"!==this.variant||this.href?n:o`<nord-icon class="n-button-switch-icon" name="interface-dropdown-small" size="s"></nord-icon>`}</slot>`;return this.href?this.renderLink(t):this.renderButton(t)}renderLink(t){return o`<a ${b(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${c(this.disabled,n,this.href)}" tabindex="${c(this.disabled,"-1")}" aria-disabled="${c(this.disabled,"true")}" role="${c(this.disabled,"link")}">${t}</a>`}renderButton(t){return o`<slot name="proxy" @slotchange="${this.handleProxyChange}"></slot><button ${b(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${c(this.name)}" value="${c(this.value)}" @click="${this.handleClick}" aria-disabled="${c(this.loading,"true")}" aria-expanded="${c(this.accessibleExpanded)}" aria-haspopup="${c(this.accessibleHasPopup)}">${t}</button>`}renderLightDom(){return this.href||!this.form?n:o`<button ${b(this.buttonRef)} slot="proxy" name="${c(this.name)}" value="${c(this.value)}" ?disabled="${this.disabled}" form="${c(this.getAttribute("form"))}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}handleProxyChange(t){const o=t.target,n=this.buttonRef.value;n&&n.assignedSlot!==o&&this.appendChild(n)}};f.styles=[v,p],r([i({reflect:!0})],f.prototype,"variant",void 0),r([i({reflect:!0})],f.prototype,"type",void 0),r([i({reflect:!0})],f.prototype,"size",void 0),r([i({attribute:"aria-expanded"})],f.prototype,"accessibleExpanded",void 0),r([i({attribute:"aria-haspopup"})],f.prototype,"accessibleHasPopup",void 0),r([i({reflect:!0})],f.prototype,"href",void 0),r([i({type:Boolean})],f.prototype,"download",void 0),r([i({reflect:!0})],f.prototype,"target",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"loading",void 0),f=r([a("nord-button")],f);var g=f;export{g as default};
1
+ import{i as t,y as o,b as n,_ as r,e as a,s as e}from"./query-assigned-elements-cf502539.js";import{e as i}from"./property-03f59dce.js";import{e as s,n as b}from"./ref-c44e9f3c.js";import{E as l}from"./EventController-d99ebeef.js";import{L as d}from"./LightDomController-052f446a.js";import{c}from"./cond-2da54107.js";import"./Spinner.js";import{F as u}from"./FocusableMixin-32631bff.js";import{I as h}from"./InputMixin-7fa755e1.js";import{s as v}from"./Component-449e40fb.js";import{S as p}from"./SlotController-d733c575.js";import"./directive-de55b00a.js";import"./if-defined-720964c0.js";const g=t`:host{--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-s));--_n-button-gap:var(--n-button-gap, var(--n-space-s));--_n-button-gradient:var(--n-button-gradient, linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button));--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-strong));--_n-button-text-align:var(--n-button-text-align, center);--_n-button-box-shadow:var(--n-button-box-shadow, var(--n-box-shadow));--_n-button-padding-inline:calc(var(--n-space-m) / 1.2);--_n-button-color:var(--n-color-text);--_n-button-opacity:1;--_n-button-border-style:solid;--_n-button-font-size:var(--n-font-size-m);--_n-button-font-weight:var(--n-font-weight);--_n-button-min-block-size:var(--n-space-xl);--_n-button-inline-size:fit-content;--_n-button-padding-block:calc(var(--n-space-s) / 1.6);--_n-button-icon-size:var(--n-size-icon-s);display:inline-block}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--_n-button-background-color);opacity:var(--_n-button-opacity);border-radius:var(--_n-button-border-radius);border:1px var(--_n-button-border-style) var(--_n-button-border-color);box-shadow:var(--_n-button-box-shadow);color:var(--_n-button-color);cursor:pointer;display:flex;gap:var(--_n-button-gap);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-button-font-size);font-weight:var(--_n-button-font-weight);line-height:var(--n-line-height-form);margin:0;min-block-size:var(--_n-button-min-block-size);padding:var(--_n-button-padding-block) var(--_n-button-padding-inline);text-align:var(--_n-button-text-align);text-decoration:none;transition:.1s ease;transition-property:background-color,opacity,color,box-shadow,border-color;-webkit-user-select:none;user-select:none;position:relative;inline-size:var(--_n-button-inline-size)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--_n-button-gradient);border-radius:var(--_n-button-border-radius);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--_n-button-inline-size:100%;display:block}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-accent));--_n-button-border-style:solid;--_n-button-box-shadow:0 0 0 1px var(--n-color-accent),var(--n-box-shadow);outline:0}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-color-text-on-accent);--_n-button-font-weight:var(--n-font-weight-active)}:host([variant=primary]),:host([variant=primary]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-accent))}:host([variant=primary]) .n-button:hover{filter:brightness(93%)}:host([variant=primary]) .n-button:focus{--_n-button-box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--_n-button-border-color)}:host([variant=dashed]){--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-color-text-weaker);--_n-button-border-style:dashed}:host([variant=dashed]) .n-button:hover{--_n-button-color:var(--n-color-text)}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--_n-button-box-shadow:var(--n-button-box-shadow, none)}:host([variant=plain]),:host([variant=plain]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-color-text-on-accent);--_n-button-font-weight:var(--n-font-weight-active)}:host([variant=danger]),:host([variant=danger]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-status-danger))}:host([variant=danger]) .n-button:hover{filter:brightness(93%)}:host([variant=danger]) .n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-status-danger));--_n-button-box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-status-danger)}:host([variant=switch]){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-sharp));--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-text-align:var(--n-button-text-align, start);--_n-button-background-color:var(--n-button-background-color, transparent);--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-color-text);--_n-button-font-weight:var(--n-font-weight-heading);--_n-button-min-block-size:calc(var(--n-space-xxl) - 1px);--_n-button-font-size:var(--n-font-size-l);--_n-button-padding-inline:var(--n-space-m);--_n-button-icon-size:var(--n-size-icon-s);display:flex;align-items:center}:host([variant=switch]) .n-button *{pointer-events:none}:host([variant=switch]) .n-button::after{display:none}:host([variant=switch]) .n-button:hover,:host([variant=switch][aria-expanded=true]) .n-button{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-nav-hover))}:host([variant=switch]) .n-button:focus{--_n-button-box-shadow:inset 0 0 0 1px var(--_n-button-border-color)}:host([variant=switch]) slot[name=end] nord-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s)}:host([disabled]){--_n-button-border-color:var(--n-button-border-color, var(--_n-button-background-color));--_n-button-background-color:var(--n-button-background-color, var(--n-color-border));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-color-text-weaker);--_n-button-opacity:0.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}.n-button-spinner{position:absolute;transform:translateX(-50%) translateY(-50%);inset-block-start:50%;inset-inline-start:50%}:host([loading]:not([href])){pointer-events:none}:host([loading]:not([href])) .n-content,:host([loading]:not([href])) ::slotted([slot=end]),:host([loading]:not([href])) ::slotted([slot=start]){opacity:0}:host([size="s"]){--_n-button-gap:var(--n-button-gap, calc(var(--n-space-s) / 2));--_n-button-padding-inline:var(--n-space-s);--_n-button-padding-block:calc(var(--n-space-s) / 1.5);--_n-button-font-size:var(--n-font-size-s);--_n-button-min-block-size:var(--n-space-l);--_n-button-icon-size:var(--n-size-icon-xs)}:host([size="s"]) .n-button{line-height:var(--n-line-height-tight)}:host([size="l"]){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius));--_n-button-padding-inline:calc(var(--n-space-l) / 1.3);--_n-button-font-size:var(--n-font-size-l);--_n-button-min-block-size:calc(var(--n-space-xxl) - var(--n-space-l));--_n-button-font-weight:var(--n-font-weight-active);--_n-button-icon-size:var(--n-size-icon-m)}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}:host(:not([variant=primary],[variant=danger])) ::slotted(nord-icon),:host(:not([variant=primary],[variant=danger])) nord-icon{color:var(--n-color-icon)}slot:not([name])::slotted(nord-icon){transform:translateY(1px)}:host([size="s"]) slot:not([name])::slotted(nord-icon:not([size])),slot:not([name])::slotted(nord-icon[size=xs]){transform:translateY(0)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-button-icon-size)}`;let f=class extends(h(u(e))){constructor(){super(...arguments),this.defaultSlot=new p(this),this.buttonRef=s(),this.events=new l(this),this.lightDom=new d(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.loading=!1,this.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"click",this.handleOuterClick,!0)}render(){var t;const r="switch"===this.variant,a="toggle"===(null===(t=this.assignedSlot)||void 0===t?void 0:t.name),e=this.defaultSlot.assigned.some((t=>"nord-icon"===t.localName)),i=(r||a&&!e)&&!this.href,s=o`<slot name="start"></slot><div class="n-content"><slot></slot></div><nord-spinner class="n-button-spinner" color="currentColor" ?hidden="${!this.loading||Boolean(this.href)}"></nord-spinner><slot name="end">${i?o`<nord-icon name="interface-dropdown-small"></nord-icon>`:n}</slot>`;return this.href?this.renderLink(s):this.renderButton(s)}renderLink(t){return o`<a ${b(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${c(this.disabled,n,this.href)}" tabindex="${c(this.disabled,"-1")}" aria-disabled="${c(this.disabled,"true")}" role="${c(this.disabled,"link")}">${t}</a>`}renderButton(t){return o`<slot name="proxy" @slotchange="${this.handleProxyChange}"></slot><button ${b(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${c(this.name)}" value="${c(this.value)}" @click="${this.handleClick}" aria-disabled="${c(this.loading,"true")}" aria-expanded="${c(this.accessibleExpanded)}" aria-haspopup="${c(this.accessibleHasPopup)}">${t}</button>`}renderLightDom(){return this.href||!this.form?n:o`<button ${b(this.buttonRef)} slot="proxy" name="${c(this.name)}" value="${c(this.value)}" ?disabled="${this.disabled}" form="${c(this.getAttribute("form"))}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}handleProxyChange(t){const o=t.target,n=this.buttonRef.value;n&&n.assignedSlot!==o&&this.appendChild(n)}};f.styles=[v,g],r([i({reflect:!0})],f.prototype,"variant",void 0),r([i({reflect:!0})],f.prototype,"type",void 0),r([i({reflect:!0})],f.prototype,"size",void 0),r([i({attribute:"aria-expanded"})],f.prototype,"accessibleExpanded",void 0),r([i({attribute:"aria-haspopup"})],f.prototype,"accessibleHasPopup",void 0),r([i({reflect:!0})],f.prototype,"href",void 0),r([i({type:Boolean})],f.prototype,"download",void 0),r([i()],f.prototype,"target",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),r([i({reflect:!0,type:Boolean})],f.prototype,"loading",void 0),f=r([a("nord-button")],f);var _=f;export{_ as default};
2
2
  //# sourceMappingURL=Button.js.map
package/lib/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport \"../spinner/Spinner.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Button.css\"\n\n/**\n * Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n *\n * @status ready\n * @category action\n * @slot - The button content\n * @slot start - Used to place content at the start of button text. Typically used for icons.\n * @slot end - Used to place content at the end of button text. Typically used for icons.\n *\n * @cssprop [--n-button-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-button-gap=var(--n-space-s)] - Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the button.\n * @cssprop [--n-button-background-color=var(--n-color-button)] - Controls the background color of the button, using [color tokens](/tokens/#color).\n * @cssprop [--n-button-border-color=var(--n-color-border-strong)] - Controls the border color of the button, using [color tokens](/tokens/#color).\n * @cssprop [--n-button-text-align=center] - Controls the text alignment for the text in the button.\n * @cssprop [--n-button-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n */\n@customElement(\"nord-button\")\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n static styles = [componentStyle, style]\n\n private buttonRef = createRef<HTMLButtonElement>()\n private events = new EventController(this)\n private lightDom = new LightDomController(this, {\n render: () => this.renderLightDom(),\n })\n\n /**\n * The style variant of the button.\n */\n @property({ reflect: true }) variant: \"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\" = \"default\"\n\n /**\n * The type of the button.\n */\n @property({ reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"submit\"\n\n /**\n * The size of the button.\n * This affects font-size and padding.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n /**\n * @private\n * This does not need to be documented,\n * since it is only for forwarding the aria-expanded attribute\n * to the internal button element.\n */\n @property({ attribute: \"aria-expanded\" }) accessibleExpanded?: \"true\" | \"false\"\n\n /**\n * @private\n * This does not need to be documented,\n * since it is only for forwarding the aria-haspopup attribute\n * to the internal button element.\n */\n @property({ attribute: \"aria-haspopup\" }) accessibleHasPopup?:\n | \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\"\n\n /**\n * When provided, renders the button as a link,\n * with its href attribute set to the given value.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * When provided together with a href property, the button will\n * trigger a file download instead of a page visit.\n */\n @property({ type: Boolean }) download = false\n\n /**\n * When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n */\n @property({ reflect: true }) target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\n\n /**\n * Controls whether the button expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * Controls whether the button is in loading state. Please note that the spinner\n * is hidden from assistive technologies, so you need to make sure to announce\n * the loading state to e.g. screen reader users. We also recommend disabling\n * all user interactions on the button itself while in loading state.\n */\n @property({ reflect: true, type: Boolean }) loading = false\n\n connectedCallback() {\n super.connectedCallback()\n this.events.listen(this, \"click\", this.handleOuterClick, true)\n }\n\n render() {\n const innards = html`\n <slot name=\"start\"></slot>\n <div class=\"n-content\">\n <slot></slot>\n </div>\n <nord-spinner class=\"n-button-spinner\" color=\"currentColor\" ?hidden=${!this.loading || this.href}></nord-spinner>\n <slot name=\"end\">\n ${this.variant === \"switch\" && !this.href\n ? html`<nord-icon class=\"n-button-switch-icon\" name=\"interface-dropdown-small\" size=\"s\"></nord-icon>`\n : nothing}\n </slot>\n `\n\n return this.href ? this.renderLink(innards) : this.renderButton(innards)\n }\n\n /**\n * We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n *\n * @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n private renderLink(innards: TemplateResult) {\n return html`\n <a\n ${ref(this.focusableRef)}\n class=\"n-button\"\n target=${this.target}\n ?download=${this.download}\n href=${cond(this.disabled, nothing, this.href)}\n tabindex=${cond(this.disabled, \"-1\")}\n aria-disabled=${cond(this.disabled, \"true\")}\n role=${cond(this.disabled, \"link\")}\n >${innards}\n </a>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return html`\n <slot name=\"proxy\" @slotchange=${this.handleProxyChange}></slot>\n <button\n ${ref(this.focusableRef)}\n class=\"n-button\"\n ?disabled=${this.disabled}\n name=${cond(this.name)}\n value=${cond(this.value)}\n @click=${this.handleClick}\n aria-disabled=${cond(this.loading, \"true\")}\n aria-expanded=${cond(this.accessibleExpanded)}\n aria-haspopup=${cond(this.accessibleHasPopup)}\n >\n ${innards}\n </button>\n `\n }\n\n private renderLightDom() {\n if (this.href || !this.form) {\n return nothing\n }\n\n return html`\n <button\n ${ref(this.buttonRef)}\n slot=\"proxy\"\n name=${cond(this.name)}\n value=${cond(this.value)}\n ?disabled=${this.disabled}\n form=${cond(this.getAttribute(\"form\"))}\n type=${this.type}\n ></button>\n `\n }\n\n private handleOuterClick = (e: MouseEvent) => {\n // we want to avoid emitting click events when a click\n // happens in blank space in the host, but not on the button\n // so we stop propagation of any events if click didn't happen on the internal or proxy button\n const isInternalButton = e\n .composedPath()\n .some(node => node === this.focusableRef.value || node === this.buttonRef.value)\n\n if (!isInternalButton) {\n e.stopPropagation()\n }\n }\n\n private handleClick(e: Event) {\n if (this.buttonRef.value) {\n // prevents two events: one from internal button, one from proxy button\n e.stopPropagation()\n this.buttonRef.value.click()\n }\n }\n\n /**\n * React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\n * So we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in.\n */\n private handleProxyChange(e: Event) {\n const slot = e.target as HTMLSlotElement\n const proxyButton = this.buttonRef.value\n\n if (proxyButton && proxyButton.assignedSlot !== slot) {\n this.appendChild(proxyButton)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button\": Button\n }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","buttonRef","createRef","events","EventController","lightDom","LightDomController","render","renderLightDom","variant","type","size","download","target","expand","loading","handleOuterClick","e","composedPath","some","node","focusableRef","value","stopPropagation","connectedCallback","super","listen","innards","html","href","nothing","renderLink","renderButton","ref","cond","disabled","handleProxyChange","name","handleClick","accessibleExpanded","accessibleHasPopup","form","getAttribute","click","slot","proxyButton","assignedSlot","appendChild","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","Boolean","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { createRef, ref } from \"lit/directives/ref.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport \"../spinner/Spinner.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Button.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/**\n * Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n *\n * @status ready\n * @category action\n * @slot - The button content\n * @slot start - Used to place content at the start of button text. Typically used for icons.\n * @slot end - Used to place content at the end of button text. Typically used for icons.\n *\n * @cssprop [--n-button-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-button-gap=var(--n-space-s)] - Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the button.\n * @cssprop [--n-button-background-color=var(--n-color-button)] - Controls the background color of the button, using [color tokens](/tokens/#color).\n * @cssprop [--n-button-border-color=var(--n-color-border-strong)] - Controls the border color of the button, using [color tokens](/tokens/#color).\n * @cssprop [--n-button-text-align=center] - Controls the text alignment for the text in the button.\n * @cssprop [--n-button-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n */\n@customElement(\"nord-button\")\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n static styles = [componentStyle, style]\n\n private defaultSlot = new SlotController(this)\n private buttonRef = createRef<HTMLButtonElement>()\n private events = new EventController(this)\n private lightDom = new LightDomController(this, {\n render: () => this.renderLightDom(),\n })\n\n /**\n * The style variant of the button.\n */\n @property({ reflect: true }) variant: \"default\" | \"primary\" | \"dashed\" | \"plain\" | \"danger\" | \"switch\" = \"default\"\n\n /**\n * The type of the button.\n */\n @property({ reflect: true }) type: \"button\" | \"submit\" | \"reset\" = \"submit\"\n\n /**\n * The size of the button.\n * This affects font-size and padding.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n /**\n * @private\n * This does not need to be documented,\n * since it is only for forwarding the aria-expanded attribute\n * to the internal button element.\n */\n @property({ attribute: \"aria-expanded\" }) accessibleExpanded?: \"true\" | \"false\"\n\n /**\n * @private\n * This does not need to be documented,\n * since it is only for forwarding the aria-haspopup attribute\n * to the internal button element.\n */\n @property({ attribute: \"aria-haspopup\" }) accessibleHasPopup?:\n | \"false\"\n | \"true\"\n | \"menu\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"\n | \"dialog\"\n\n /**\n * When provided, renders the button as a link,\n * with its href attribute set to the given value.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * When provided together with a href property, the button will\n * trigger a file download instead of a page visit.\n */\n @property({ type: Boolean }) download = false\n\n /**\n * When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n */\n @property() target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\n\n /**\n * Controls whether the button expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * Controls whether the button is in loading state. Please note that the spinner\n * is hidden from assistive technologies, so you need to make sure to announce\n * the loading state to e.g. screen reader users. We also recommend disabling\n * all user interactions on the button itself while in loading state.\n */\n @property({ reflect: true, type: Boolean }) loading = false\n\n connectedCallback() {\n super.connectedCallback()\n this.events.listen(this, \"click\", this.handleOuterClick, true)\n }\n\n render() {\n const isSwitch = this.variant === \"switch\"\n const isDropdownToggle = this.assignedSlot?.name === \"toggle\"\n const isIconButton = this.defaultSlot.assigned.some(node => node.localName === \"nord-icon\")\n const shouldShowDropdownIcon = (isSwitch || (isDropdownToggle && !isIconButton)) && !this.href\n\n const innards = html`\n <slot name=\"start\"></slot>\n <div class=\"n-content\">\n <slot></slot>\n </div>\n <nord-spinner\n class=\"n-button-spinner\"\n color=\"currentColor\"\n ?hidden=${!this.loading || Boolean(this.href)}\n ></nord-spinner>\n <slot name=\"end\">\n ${shouldShowDropdownIcon ? html`<nord-icon name=\"interface-dropdown-small\"></nord-icon>` : nothing}\n </slot>\n `\n\n return this.href ? this.renderLink(innards) : this.renderButton(innards)\n }\n\n /**\n * We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n *\n * @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n */\n private renderLink(innards: TemplateResult) {\n return html`\n <a\n ${ref(this.focusableRef)}\n class=\"n-button\"\n target=${this.target}\n ?download=${this.download}\n href=${cond(this.disabled, nothing, this.href)}\n tabindex=${cond(this.disabled, \"-1\")}\n aria-disabled=${cond(this.disabled, \"true\")}\n role=${cond(this.disabled, \"link\")}\n >${innards}\n </a>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return html`\n <slot name=\"proxy\" @slotchange=${this.handleProxyChange}></slot>\n <button\n ${ref(this.focusableRef)}\n class=\"n-button\"\n ?disabled=${this.disabled}\n name=${cond(this.name)}\n value=${cond(this.value)}\n @click=${this.handleClick}\n aria-disabled=${cond(this.loading, \"true\")}\n aria-expanded=${cond(this.accessibleExpanded)}\n aria-haspopup=${cond(this.accessibleHasPopup)}\n >\n ${innards}\n </button>\n `\n }\n\n private renderLightDom() {\n if (this.href || !this.form) {\n return nothing\n }\n\n return html`\n <button\n ${ref(this.buttonRef)}\n slot=\"proxy\"\n name=${cond(this.name)}\n value=${cond(this.value)}\n ?disabled=${this.disabled}\n form=${cond(this.getAttribute(\"form\"))}\n type=${this.type}\n ></button>\n `\n }\n\n private handleOuterClick = (e: MouseEvent) => {\n // we want to avoid emitting click events when a click\n // happens in blank space in the host, but not on the button\n // so we stop propagation of any events if click didn't happen on the internal or proxy button\n const isInternalButton = e\n .composedPath()\n .some(node => node === this.focusableRef.value || node === this.buttonRef.value)\n\n if (!isInternalButton) {\n e.stopPropagation()\n }\n }\n\n private handleClick(e: Event) {\n if (this.buttonRef.value) {\n // prevents two events: one from internal button, one from proxy button\n e.stopPropagation()\n this.buttonRef.value.click()\n }\n }\n\n /**\n * React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\n * So we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in.\n */\n private handleProxyChange(e: Event) {\n const slot = e.target as HTMLSlotElement\n const proxyButton = this.buttonRef.value\n\n if (proxyButton && proxyButton.assignedSlot !== slot) {\n this.appendChild(proxyButton)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button\": Button\n }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","buttonRef","createRef","events","EventController","lightDom","LightDomController","render","renderLightDom","variant","type","size","download","target","expand","loading","handleOuterClick","e","composedPath","some","node","focusableRef","value","stopPropagation","connectedCallback","super","listen","isSwitch","isDropdownToggle","_a","assignedSlot","name","isIconButton","assigned","localName","shouldShowDropdownIcon","href","innards","html","Boolean","nothing","renderLink","renderButton","ref","cond","disabled","handleProxyChange","handleClick","accessibleExpanded","accessibleHasPopup","form","getAttribute","click","slot","proxyButton","appendChild","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","customElement"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{i as e,_ as a,s as t,y as n,e as s}from"./query-assigned-elements-cf502539.js";import{e as i}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{o as l}from"./class-map-21152cee.js";import{c as d,m as c,a as h}from"./collection-7eee4e72.js";import{o as u}from"./tinykeys.module-84e6cc41.js";import"./Button.js";import"./VisuallyHidden.js";import p from"./Icon.js";import{E as v}from"./EventController-d99ebeef.js";import{D as g}from"./DirectionController-8b298382.js";import{LocalizeController as f}from"./LocalizeController.js";import{c as m}from"./cond-2da54107.js";import{r as b}from"./number-c3ab3e95.js";import{i as y,p as w,a as x,s as D,e as k,b as z,g as $,c as F,d as _,f as M,h as Y,j,k as S,l as T,m as C,n as L}from"./dates-5b651fbe.js";import{o as N}from"./observe-a9c6dfb6.js";import{DateSelectEvent as O}from"./DateSelectEvent.js";import{s as X}from"./Component-449e40fb.js";var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 57.4 47.6 2.8a10.566 10.566 0 1 0-14.56 15.316l51.968 49.35a3.486 3.486 0 0 1 0 5.068l-51.968 49.35a10.502 10.502 0 0 0 14.462 15.232l57.638-54.74A17.584 17.584 0 0 0 105 57.4z"/></svg>',title:"arrow-right-small",tags:"nordicon arrow right small caret pointing triangle chevron"});var E=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M99.736 140a10.486 10.486 0 0 1-7.238-2.884L35 82.6a17.598 17.598 0 0 1-.14-24.976l57.638-54.74a10.502 10.502 0 1 1 14.462 15.232l-51.968 49.35a3.486 3.486 0 0 0 0 5.068l51.968 49.35A10.5 10.5 0 0 1 99.736 140z"/></svg>',title:"arrow-left-small",tags:"nordicon arrow left small caret pointing triangle chevron"});var W=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M70 110.236a17.332 17.332 0 0 1-12.306-5.096L2.884 47.502A10.502 10.502 0 1 1 18.116 33.04l49.35 51.968a3.486 3.486 0 0 0 5.068 0l49.35-51.968a10.502 10.502 0 1 1 15.232 14.462L82.6 105a17.766 17.766 0 0 1-12.6 5.236z"/></svg>',title:"arrow-down-small",tags:"nordicon arrow down small caret pointing triangle chevron"});const U=e=>e.preventDefault();class I{constructor(e,a){this.hadFirstUpdate=!1,this.initialTouchX=0,this.initialTouchY=0,this.handleTouchStart=e=>{const[{pageX:a,pageY:t}]=e.changedTouches;this.initialTouchX=a,this.initialTouchY=t},this.handleTouchEnd=e=>{const[{pageX:a,pageY:t}]=e.changedTouches,{matchesGesture:n,onSwipeEnd: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 v(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",U),this.events.listen(e,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}const P=({distX:e,distY:a})=>Math.abs(e)>=70&&Math.abs(a)<=70,B=({distX:e,distY:a})=>Math.abs(a)>=70&&Math.abs(e)<=70&&a>0,H=e`: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-accent);color:var(--n-color-text-link);position:relative}.n-calendar-day:hover{background:var(--n-color-active)}.n-calendar-day:focus,.n-calendar-day[aria-pressed=true]{background:var(--n-color-accent);box-shadow:none;color:var(--n-color-text-on-accent);outline:0}.n-calendar-day:active{background:var(--n-color-accent);box-shadow:none!important;color:var(--n-color-text-on-accent)}.n-calendar-day:focus{box-shadow:0 0 5px var(--n-color-accent)}.n-calendar-day:not(.is-month){box-shadow:none}.n-calendar-day:not(.is-month),.n-calendar-day[aria-disabled=true]{background:0 0;color:var(--n-color-text-weakest);cursor:default}.n-calendar-day[aria-disabled=true]{color:var(--n-color-text-weaker);text-decoration:line-through}.n-calendar-day:not(.is-month)[aria-disabled=true]{color:var(--n-color-text-weakest);text-decoration:none}.n-calendar-day[aria-disabled=true][aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link)}.n-calendar-day[aria-disabled=true][aria-current=date]:focus{box-shadow:0 0 5px var(--n-color-accent);background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-calendar-day[aria-disabled=true]:not([aria-current=date])::before{display:none}.n-calendar-day.is-outside{background:0 0;box-shadow:none;color:var(--n-color-text-weakest);cursor:default;pointer-events:none}.n-calendar-day.is-outside::before{display:none}.n-calendar-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:calc(var(--n-space-s)/ 2);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:calc(var(--n-space-s)/ 2)}.n-calendar-select{display:inline-flex;margin-block-start:calc(var(--n-space-s)/ 2);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:calc(var(--n-space-s)/ 2);pointer-events:none;position:relative;inline-size:100%;text-transform:capitalize}`;p.registerIcon(A),p.registerIcon(E),p.registerIcon(W);const R=e=>a=>{a.preventDefault(),e(a)},V=()=>!1,q=()=>!1;let G=class extends t{constructor(){super(...arguments),this.direction=new g(this),this.swipe=new I(this,{matchesGesture:P,onSwipeEnd:({distX:e})=>this.addMonths(e<0?1:-1)}),this.shortcuts=u({ArrowRight:R((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:R((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:R((()=>this.addDays(7))),ArrowUp:R((()=>this.addDays(-7))),Home:R((()=>this.startOfWeek())),End:R((()=>this.endOfWeek())),PageUp:R((()=>this.addMonths(-1))),PageDown:R((()=>this.addMonths(1))),"Shift+PageUp":R((()=>this.addYears(-1))),"Shift+PageDown":R((()=>this.addYears(1)))}),this.localize=new f(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=1,this.min="",this.max="",this.expand=!1,this.isDateDisabled=V,this.isDateHighlighted=q,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=e=>{const a=y(e,w(this.min),w(this.max)),t=!this.isDateDisabled(e);a&&t&&(this.value=x(e),this.dispatchEvent(new O("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=w(this.value),t=this.focusedDay.getMonth(),s=this.focusedDay.getFullYear(),i=w(this.min),o=w(this.max),r=i?D(i):void 0,u=o?k(o):void 0,p=(a||this.focusedDay).getFullYear(),v=i?i.getFullYear():p-10,g=o?o.getFullYear():p+10;return n`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${"dialog-header"}" 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)=>n`<option value="${a}" ?selected="${a===t}" ?disabled="${!y(new Date(s,a,1),r,u)}">${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}">${d(b(v,g),(e=>e),(e=>n`<option ?selected="${e===s}">${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="${z(i,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="${z(o,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="${"dialog-header"}" @focusin="${this.enableActiveFocus}" @focusout="${this.disableActiveFocus}"><thead><tr>${c(this.dayNames,this.firstDayOfWeek,((e,a)=>n`<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>${h($(this.focusedDay,this.firstDayOfWeek),7).map((t=>n`<tr class="n-calendar-row">${t.map((t=>{const s=!y(t,i,o),r=F(t,e),d=this.isDateDisabled(t),c=F(t,a),h=z(t,this.focusedDay),u=this.isDateHighlighted(t),p=this.dateFormatShort.format(t),v=u&&"string"==typeof u?`${p}, ${u}`:p;return n`<td class="n-calendar-cell"><button type="button" tabindex="${F(t,this.focusedDay)?0:-1}" class="${l({"n-calendar-day":!0,"is-outside":s,"is-month":h,"is-highlighted":u})}" @click="${()=>this.handleDaySelect(t)}" @keydown="${this.shortcuts}" ?disabled="${s}" aria-disabled="${m(d,"true")}" aria-pressed="${c?"true":"false"}" aria-current="${m(r,"date")}" aria-label="${v}"><span aria-hidden="true">${t.getDate()}</span></button></td>`}))}</tr>`))}</tbody></table></div>`}handleValueChange(){this.setFocusedDay(w(this.value)||new Date)}handleFocusedDayChange(){this.activeFocus&&this.focusedDayNode.focus()}handleLangChange(){const e=this.localize.resolvedLang;this.dateFormatShort=new Intl.DateTimeFormat(e,{day:"numeric",month:"long"}),this.monthNames=_(e,"long"),this.monthNamesShort=_(e,"short"),this.dayNames=M(e,"long"),this.dayNamesShort=M(e,"narrow")}addDays(e){this.setFocusedDay(Y(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(S(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const a=T(D(this.focusedDay),e),t=k(a),n=T(this.focusedDay,e);this.setFocusedDay(C(n,a,t))}setYear(e){const a=L(D(this.focusedDay),e),t=k(a),n=L(this.focusedDay,e);this.setFocusedDay(C(n,a,t))}setFocusedDay(e){this.focusedDay=C(e,w(this.min),w(this.max)),this.dispatchEvent(new O("nord-focus-date",this.focusedDay))}};G.styles=[X,H],a([r(".n-calendar-select-month",!0)],G.prototype,"monthSelectNode",void 0),a([r('button[tabindex="0"]')],G.prototype,"focusedDayNode",void 0),a([i()],G.prototype,"value",void 0),a([i({type:Number})],G.prototype,"firstDayOfWeek",void 0),a([i()],G.prototype,"min",void 0),a([i()],G.prototype,"max",void 0),a([i({reflect:!0,type:Boolean})],G.prototype,"expand",void 0),a([i({attribute:!1})],G.prototype,"isDateDisabled",void 0),a([i({attribute:!1})],G.prototype,"isDateHighlighted",void 0),a([o()],G.prototype,"activeFocus",void 0),a([o()],G.prototype,"focusedDay",void 0),a([N("value")],G.prototype,"handleValueChange",null),a([N("focusedDay","updated")],G.prototype,"handleFocusedDayChange",null),G=a([s("nord-calendar")],G);var J=G;export{J as C,I as S,B as i};
2
- //# sourceMappingURL=Calendar-e3786f07.js.map
1
+ import{i as e,_ as a,s as t,y as n,e as s}from"./query-assigned-elements-cf502539.js";import{e as i}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{o as l}from"./class-map-21152cee.js";import{c as d,m as c,a as h}from"./collection-7eee4e72.js";import{o as u}from"./tinykeys.module-84e6cc41.js";import"./Button.js";import"./VisuallyHidden.js";import p from"./Icon.js";import{E as v}from"./EventController-d99ebeef.js";import{D as g}from"./DirectionController-8b298382.js";import{LocalizeController as f}from"./LocalizeController.js";import{c as m}from"./cond-2da54107.js";import{r as b}from"./number-c3ab3e95.js";import{i as y,p as w,a as x,s as D,e as k,b as z,g as $,c as F,d as _,f as M,h as Y,j,k as S,l as T,m as C,n as L}from"./dates-5b651fbe.js";import{o as N}from"./observe-a9c6dfb6.js";import{DateSelectEvent as O}from"./DateSelectEvent.js";import{s as X}from"./Component-449e40fb.js";var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 57.4 47.6 2.8a10.566 10.566 0 1 0-14.56 15.316l51.968 49.35a3.486 3.486 0 0 1 0 5.068l-51.968 49.35a10.502 10.502 0 0 0 14.462 15.232l57.638-54.74A17.584 17.584 0 0 0 105 57.4z"/></svg>',title:"arrow-right-small",tags:"nordicon arrow right small caret pointing triangle chevron"});var E=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M99.736 140a10.486 10.486 0 0 1-7.238-2.884L35 82.6a17.598 17.598 0 0 1-.14-24.976l57.638-54.74a10.502 10.502 0 1 1 14.462 15.232l-51.968 49.35a3.486 3.486 0 0 0 0 5.068l51.968 49.35A10.5 10.5 0 0 1 99.736 140z"/></svg>',title:"arrow-left-small",tags:"nordicon arrow left small caret pointing triangle chevron"});var W=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M70 110.236a17.332 17.332 0 0 1-12.306-5.096L2.884 47.502A10.502 10.502 0 1 1 18.116 33.04l49.35 51.968a3.486 3.486 0 0 0 5.068 0l49.35-51.968a10.502 10.502 0 1 1 15.232 14.462L82.6 105a17.766 17.766 0 0 1-12.6 5.236z"/></svg>',title:"arrow-down-small",tags:"nordicon arrow down small caret pointing triangle chevron"});const U=e=>e.preventDefault();class I{constructor(e,a){this.hadFirstUpdate=!1,this.initialTouchX=0,this.initialTouchY=0,this.handleTouchStart=e=>{const[{pageX:a,pageY:t}]=e.changedTouches;this.initialTouchX=a,this.initialTouchY=t},this.handleTouchEnd=e=>{const[{pageX:a,pageY:t}]=e.changedTouches,{matchesGesture:n,onSwipeEnd: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 v(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",U),this.events.listen(e,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}const P=({distX:e,distY:a})=>Math.abs(e)>=70&&Math.abs(a)<=70,B=({distX:e,distY:a})=>Math.abs(a)>=70&&Math.abs(e)<=70&&a>0,H=e`: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-accent);color:var(--n-color-text-link);position:relative}.n-calendar-day:hover{background:var(--n-color-active)}.n-calendar-day:focus,.n-calendar-day[aria-pressed=true]{background:var(--n-color-accent);box-shadow:none;color:var(--n-color-text-on-accent);outline:0}.n-calendar-day:active{background:var(--n-color-accent);box-shadow:none!important;color:var(--n-color-text-on-accent)}.n-calendar-day:focus{box-shadow:0 0 5px var(--n-color-accent)}.n-calendar-day:not(.is-month){box-shadow:none}.n-calendar-day:not(.is-month),.n-calendar-day[aria-disabled=true]{background:0 0;color:var(--n-color-text-weakest);cursor:default}.n-calendar-day[aria-disabled=true]{color:var(--n-color-text-weaker);text-decoration:line-through}.n-calendar-day:not(.is-month)[aria-disabled=true]{color:var(--n-color-text-weakest);text-decoration:none}.n-calendar-day[aria-disabled=true][aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link)}.n-calendar-day[aria-disabled=true][aria-current=date]:focus{box-shadow:0 0 5px var(--n-color-accent);background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-calendar-day[aria-disabled=true]:not([aria-current=date])::before{display:none}.n-calendar-day.is-outside{background:0 0;box-shadow:none;color:var(--n-color-text-weakest);cursor:default;pointer-events:none}.n-calendar-day.is-outside::before{display:none}.n-calendar-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:calc(var(--n-space-s)/ 2);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:calc(var(--n-space-s)/ 2)}.n-calendar-select{display:inline-flex;margin-block-start:calc(var(--n-space-s)/ 2);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:calc(var(--n-space-s)/ 2);pointer-events:none;position:relative;inline-size:100%}`;p.registerIcon(A),p.registerIcon(E),p.registerIcon(W);const R=e=>a=>{a.preventDefault(),e(a)},V=()=>!1,q=()=>!1;let G=class extends t{constructor(){super(...arguments),this.direction=new g(this),this.swipe=new I(this,{matchesGesture:P,onSwipeEnd:({distX:e})=>this.addMonths(e<0?1:-1)}),this.shortcuts=u({ArrowRight:R((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:R((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:R((()=>this.addDays(7))),ArrowUp:R((()=>this.addDays(-7))),Home:R((()=>this.startOfWeek())),End:R((()=>this.endOfWeek())),PageUp:R((()=>this.addMonths(-1))),PageDown:R((()=>this.addMonths(1))),"Shift+PageUp":R((()=>this.addYears(-1))),"Shift+PageDown":R((()=>this.addYears(1)))}),this.localize=new f(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=1,this.min="",this.max="",this.expand=!1,this.isDateDisabled=V,this.isDateHighlighted=q,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=e=>{const a=y(e,w(this.min),w(this.max)),t=!this.isDateDisabled(e);a&&t&&(this.value=x(e),this.dispatchEvent(new O("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=w(this.value),t=this.focusedDay.getMonth(),s=this.focusedDay.getFullYear(),i=w(this.min),o=w(this.max),r=i?D(i):void 0,u=o?k(o):void 0,p=(a||this.focusedDay).getFullYear(),v=i?i.getFullYear():p-10,g=o?o.getFullYear():p+10;return n`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${"dialog-header"}" 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)=>n`<option value="${a}" ?selected="${a===t}" ?disabled="${!y(new Date(s,a,1),r,u)}">${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}">${d(b(v,g),(e=>e),(e=>n`<option ?selected="${e===s}">${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="${z(i,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="${z(o,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="${"dialog-header"}" @focusin="${this.enableActiveFocus}" @focusout="${this.disableActiveFocus}"><thead><tr>${c(this.dayNames,this.firstDayOfWeek,((e,a)=>n`<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>${h($(this.focusedDay,this.firstDayOfWeek),7).map((t=>n`<tr class="n-calendar-row">${t.map((t=>{const s=!y(t,i,o),r=F(t,e),d=this.isDateDisabled(t),c=F(t,a),h=z(t,this.focusedDay),u=this.isDateHighlighted(t),p=this.dateFormatShort.format(t),v=u&&"string"==typeof u?`${p}, ${u}`:p;return n`<td class="n-calendar-cell"><button type="button" tabindex="${F(t,this.focusedDay)?0:-1}" class="${l({"n-calendar-day":!0,"is-outside":s,"is-month":h,"is-highlighted":u})}" @click="${()=>this.handleDaySelect(t)}" @keydown="${this.shortcuts}" ?disabled="${s}" aria-disabled="${m(d,"true")}" aria-pressed="${c?"true":"false"}" aria-current="${m(r,"date")}" aria-label="${v}"><span aria-hidden="true">${t.getDate()}</span></button></td>`}))}</tr>`))}</tbody></table></div>`}handleValueChange(){this.setFocusedDay(w(this.value)||new Date)}handleFocusedDayChange(){this.activeFocus&&this.focusedDayNode.focus()}handleLangChange(){const e=this.localize.resolvedLang;this.dateFormatShort=new Intl.DateTimeFormat(e,{day:"numeric",month:"long"}),this.monthNames=_(e,"long"),this.monthNamesShort=_(e,"short"),this.dayNames=M(e,"long"),this.dayNamesShort=M(e,"narrow")}addDays(e){this.setFocusedDay(Y(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(S(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const a=T(D(this.focusedDay),e),t=k(a),n=T(this.focusedDay,e);this.setFocusedDay(C(n,a,t))}setYear(e){const a=L(D(this.focusedDay),e),t=k(a),n=L(this.focusedDay,e);this.setFocusedDay(C(n,a,t))}setFocusedDay(e){this.focusedDay=C(e,w(this.min),w(this.max)),this.dispatchEvent(new O("nord-focus-date",this.focusedDay))}};G.styles=[X,H],a([r(".n-calendar-select-month",!0)],G.prototype,"monthSelectNode",void 0),a([r('button[tabindex="0"]')],G.prototype,"focusedDayNode",void 0),a([i()],G.prototype,"value",void 0),a([i({type:Number})],G.prototype,"firstDayOfWeek",void 0),a([i()],G.prototype,"min",void 0),a([i()],G.prototype,"max",void 0),a([i({reflect:!0,type:Boolean})],G.prototype,"expand",void 0),a([i({attribute:!1})],G.prototype,"isDateDisabled",void 0),a([i({attribute:!1})],G.prototype,"isDateHighlighted",void 0),a([o()],G.prototype,"activeFocus",void 0),a([o()],G.prototype,"focusedDay",void 0),a([N("value")],G.prototype,"handleValueChange",null),a([N("focusedDay","updated")],G.prototype,"handleFocusedDayChange",null),G=a([s("nord-calendar")],G);var J=G;export{J as C,I as S,B as i};
2
+ //# sourceMappingURL=Calendar-9d3d6d01.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Calendar-e3786f07.js","sources":["../../icons/lib/assets/arrow-right-small.js","../../icons/lib/assets/arrow-left-small.js","../../icons/lib/assets/arrow-down-small.js","../src/common/controllers/SwipeController.ts","../src/calendar/Calendar.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M105 57.4 47.6 2.8a10.566 10.566 0 1 0-14.56 15.316l51.968 49.35a3.486 3.486 0 0 1 0 5.068l-51.968 49.35a10.502 10.502 0 0 0 14.462 15.232l57.638-54.74A17.584 17.584 0 0 0 105 57.4z\"/></svg>'\nexport const title = \"arrow-right-small\"\nexport const tags = \"nordicon arrow right small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M99.736 140a10.486 10.486 0 0 1-7.238-2.884L35 82.6a17.598 17.598 0 0 1-.14-24.976l57.638-54.74a10.502 10.502 0 1 1 14.462 15.232l-51.968 49.35a3.486 3.486 0 0 0 0 5.068l51.968 49.35A10.5 10.5 0 0 1 99.736 140z\"/></svg>'\nexport const title = \"arrow-left-small\"\nexport const tags = \"nordicon arrow left small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M70 110.236a17.332 17.332 0 0 1-12.306-5.096L2.884 47.502A10.502 10.502 0 1 1 18.116 33.04l49.35 51.968a3.486 3.486 0 0 0 5.068 0l49.35-51.968a10.502 10.502 0 1 1 15.232 14.462L82.6 105a17.766 17.766 0 0 1-12.6 5.236z\"/></svg>'\nexport const title = \"arrow-down-small\"\nexport const tags = \"nordicon arrow down small caret pointing triangle chevron\"\n","import { ReactiveController, ReactiveElement } from \"lit\"\nimport { EventController } from \"./EventController.js\"\n\nexport type SwipeDetails = {\n initialX: number\n initialY: number\n pageX: number\n pageY: number\n distX: number\n distY: number\n}\n\nconst preventDefault = (e: Event) => e.preventDefault()\n\ntype SetRequired<T, K extends keyof T> = T & { [Property in K]-?: T[K] }\ntype SwipeControllerOptions = {\n target?: () => HTMLElement\n matchesGesture: (details: SwipeDetails) => boolean\n onSwipeEnd: (details: SwipeDetails) => void\n}\n\nexport class SwipeController implements ReactiveController {\n private events: EventController\n private hadFirstUpdate = false\n\n private initialTouchX: number = 0\n private initialTouchY: number = 0\n private options: SetRequired<SwipeControllerOptions, \"target\">\n\n constructor(host: ReactiveElement, options: SwipeControllerOptions) {\n host.addController(this)\n this.events = new EventController(host)\n\n this.options = {\n target: () => host,\n ...options,\n }\n }\n\n hostUpdated() {\n if (!this.hadFirstUpdate) {\n this.hadFirstUpdate = true\n\n const target = this.options.target()\n this.events.listen(target, \"touchstart\", this.handleTouchStart)\n this.events.listen(target, \"touchmove\", preventDefault)\n this.events.listen(target, \"touchend\", this.handleTouchEnd)\n }\n }\n\n hostDisconnected() {\n this.hadFirstUpdate = false\n }\n\n private handleTouchStart = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n this.initialTouchX = pageX\n this.initialTouchY = pageY\n }\n\n private handleTouchEnd = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n const { matchesGesture, onSwipeEnd } = this.options\n\n const distX = pageX - this.initialTouchX\n const distY = pageY - this.initialTouchY\n const details = { initialX: this.initialTouchX, initialY: this.initialTouchY, pageX, pageY, distX, distY }\n\n if (matchesGesture(details)) {\n event.preventDefault()\n onSwipeEnd(details)\n }\n }\n}\n\nconst THRESHOLD = 70\n\nexport const isHorizontalSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distX) >= THRESHOLD && Math.abs(distY) <= THRESHOLD\n\nexport const isDownwardsSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distY) >= THRESHOLD && Math.abs(distX) <= THRESHOLD && distY > 0\n","import { html, LitElement } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { 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@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({ type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /**\n * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n */\n @property() min: string = \"\"\n\n /**\n * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n */\n @property() max: string = \"\"\n\n /**\n * Controls whether the calendar expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n */\n @property({ attribute: false }) isDateDisabled: 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 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) =>\n html`\n <option\n value=${i}\n ?selected=${i === focusedMonth}\n ?disabled=${!inRange(new Date(focusedYear, i, 1), minDateStartOfMonth, maxDateEndOfMonth)}\n >\n ${month}\n </option>\n `\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.monthNamesShort[focusedMonth]}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localize.term(\"yearSelectLabel\")}\n class=\"n-calendar-select-year\"\n @input=${this.handleYearSelect}\n >\n ${repeat(\n range(minYear, maxYear),\n year => year,\n year => html`<option ?selected=${year === focusedYear}>${year}</option>`\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.focusedDay.getFullYear()}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n </div>\n\n <div class=\"n-calendar-nav\">\n <nord-button\n class=\"n-calendar-prev\"\n @click=${this.handlePreviousMonthClick}\n ?disabled=${isEqualMonth(minDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"prevMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-left-small\" : \"arrow-right-small\"} size=\"s\"></nord-icon>\n </nord-button>\n\n <nord-button\n class=\"n-calendar-next\"\n @click=${this.handleNextMonthClick}\n ?disabled=${isEqualMonth(maxDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"nextMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-right-small\" : \"arrow-left-small\"} size=\"s\"></nord-icon>\n </nord-button>\n </div>\n </div>\n\n <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) =>\n 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 =>\n 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, { 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","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","min","max","expand","activeFocus","focusedDay","Date","handleDaySelect","day","isInRange","inRange","parseISODate","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","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","getMonthNames","getDayNames","days","months","years","date","clamp","styles","componentStyle","style","__decorate","query","prototype","property","type","Number","reflect","Boolean","attribute","state","observe","customElement"],"mappings":"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"}
1
+ {"version":3,"file":"Calendar-9d3d6d01.js","sources":["../../icons/lib/assets/arrow-right-small.js","../../icons/lib/assets/arrow-left-small.js","../../icons/lib/assets/arrow-down-small.js","../src/common/controllers/SwipeController.ts","../src/calendar/Calendar.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M105 57.4 47.6 2.8a10.566 10.566 0 1 0-14.56 15.316l51.968 49.35a3.486 3.486 0 0 1 0 5.068l-51.968 49.35a10.502 10.502 0 0 0 14.462 15.232l57.638-54.74A17.584 17.584 0 0 0 105 57.4z\"/></svg>'\nexport const title = \"arrow-right-small\"\nexport const tags = \"nordicon arrow right small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M99.736 140a10.486 10.486 0 0 1-7.238-2.884L35 82.6a17.598 17.598 0 0 1-.14-24.976l57.638-54.74a10.502 10.502 0 1 1 14.462 15.232l-51.968 49.35a3.486 3.486 0 0 0 0 5.068l51.968 49.35A10.5 10.5 0 0 1 99.736 140z\"/></svg>'\nexport const title = \"arrow-left-small\"\nexport const tags = \"nordicon arrow left small caret pointing triangle chevron\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M70 110.236a17.332 17.332 0 0 1-12.306-5.096L2.884 47.502A10.502 10.502 0 1 1 18.116 33.04l49.35 51.968a3.486 3.486 0 0 0 5.068 0l49.35-51.968a10.502 10.502 0 1 1 15.232 14.462L82.6 105a17.766 17.766 0 0 1-12.6 5.236z\"/></svg>'\nexport const title = \"arrow-down-small\"\nexport const tags = \"nordicon arrow down small caret pointing triangle chevron\"\n","import { ReactiveController, ReactiveElement } from \"lit\"\nimport { EventController } from \"./EventController.js\"\n\nexport type SwipeDetails = {\n initialX: number\n initialY: number\n pageX: number\n pageY: number\n distX: number\n distY: number\n}\n\nconst preventDefault = (e: Event) => e.preventDefault()\n\ntype SetRequired<T, K extends keyof T> = T & { [Property in K]-?: T[K] }\ntype SwipeControllerOptions = {\n target?: () => HTMLElement\n matchesGesture: (details: SwipeDetails) => boolean\n onSwipeEnd: (details: SwipeDetails) => void\n}\n\nexport class SwipeController implements ReactiveController {\n private events: EventController\n private hadFirstUpdate = false\n\n private initialTouchX: number = 0\n private initialTouchY: number = 0\n private options: SetRequired<SwipeControllerOptions, \"target\">\n\n constructor(host: ReactiveElement, options: SwipeControllerOptions) {\n host.addController(this)\n this.events = new EventController(host)\n\n this.options = {\n target: () => host,\n ...options,\n }\n }\n\n hostUpdated() {\n if (!this.hadFirstUpdate) {\n this.hadFirstUpdate = true\n\n const target = this.options.target()\n this.events.listen(target, \"touchstart\", this.handleTouchStart)\n this.events.listen(target, \"touchmove\", preventDefault)\n this.events.listen(target, \"touchend\", this.handleTouchEnd)\n }\n }\n\n hostDisconnected() {\n this.hadFirstUpdate = false\n }\n\n private handleTouchStart = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n this.initialTouchX = pageX\n this.initialTouchY = pageY\n }\n\n private handleTouchEnd = (event: TouchEvent) => {\n const [{ pageX, pageY }] = event.changedTouches\n const { matchesGesture, onSwipeEnd } = this.options\n\n const distX = pageX - this.initialTouchX\n const distY = pageY - this.initialTouchY\n const details = { initialX: this.initialTouchX, initialY: this.initialTouchY, pageX, pageY, distX, distY }\n\n if (matchesGesture(details)) {\n event.preventDefault()\n onSwipeEnd(details)\n }\n }\n}\n\nconst THRESHOLD = 70\n\nexport const isHorizontalSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distX) >= THRESHOLD && Math.abs(distY) <= THRESHOLD\n\nexport const isDownwardsSwipe = ({ distX, distY }: SwipeDetails) =>\n Math.abs(distY) >= THRESHOLD && Math.abs(distX) <= THRESHOLD && distY > 0\n","import { html, LitElement } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { 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@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({ type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /**\n * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n */\n @property() min: string = \"\"\n\n /**\n * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n */\n @property() max: string = \"\"\n\n /**\n * Controls whether the calendar expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n */\n @property({ attribute: false }) isDateDisabled: 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 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) =>\n html`\n <option\n value=${i}\n ?selected=${i === focusedMonth}\n ?disabled=${!inRange(new Date(focusedYear, i, 1), minDateStartOfMonth, maxDateEndOfMonth)}\n >\n ${month}\n </option>\n `\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.monthNamesShort[focusedMonth]}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n\n <div class=\"n-calendar-select\">\n <select\n aria-label=${this.localize.term(\"yearSelectLabel\")}\n class=\"n-calendar-select-year\"\n @input=${this.handleYearSelect}\n >\n ${repeat(\n range(minYear, maxYear),\n year => year,\n year => html`<option ?selected=${year === focusedYear}>${year}</option>`\n )}\n </select>\n <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n <span>${this.focusedDay.getFullYear()}</span>\n <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n </div>\n </div>\n </div>\n\n <div class=\"n-calendar-nav\">\n <nord-button\n class=\"n-calendar-prev\"\n @click=${this.handlePreviousMonthClick}\n ?disabled=${isEqualMonth(minDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"prevMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-left-small\" : \"arrow-right-small\"} size=\"s\"></nord-icon>\n </nord-button>\n\n <nord-button\n class=\"n-calendar-next\"\n @click=${this.handleNextMonthClick}\n ?disabled=${isEqualMonth(maxDate, this.focusedDay)}\n type=\"button\"\n >\n <nord-visually-hidden>${this.localize.term(\"nextMonthLabel\")}</nord-visually-hidden>\n <nord-icon name=${this.direction.isLTR ? \"arrow-right-small\" : \"arrow-left-small\"} size=\"s\"></nord-icon>\n </nord-button>\n </div>\n </div>\n\n <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) =>\n 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 =>\n 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, { 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","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","min","max","expand","activeFocus","focusedDay","Date","handleDaySelect","day","isInRange","inRange","parseISODate","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","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","getMonthNames","getDayNames","days","months","years","date","clamp","styles","componentStyle","style","__decorate","query","prototype","property","type","Number","reflect","Boolean","attribute","state","observe","customElement"],"mappings":"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"}
package/lib/Calendar.js CHANGED
@@ -1,2 +1,2 @@
1
- import"./query-assigned-elements-cf502539.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";import"./query-2d22378e.js";import"./class-map-21152cee.js";import"./collection-7eee4e72.js";import"./tinykeys.module-84e6cc41.js";export{C as default}from"./Calendar-e3786f07.js";import"./Button.js";import"./VisuallyHidden.js";import"./Icon.js";import"./DirectionController-8b298382.js";import"./LocalizeController.js";import"./cond-2da54107.js";import"./number-c3ab3e95.js";import"./dates-5b651fbe.js";import"./observe-a9c6dfb6.js";import"./DateSelectEvent.js";import"./Component-449e40fb.js";import"./directive-de55b00a.js";import"./ref-c44e9f3c.js";import"./EventController-d99ebeef.js";import"./LightDomController-052f446a.js";import"./Spinner.js";import"./if-defined-720964c0.js";import"./FocusableMixin-32631bff.js";import"./InputMixin-7fa755e1.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./events-731d0007.js";
1
+ import"./query-assigned-elements-cf502539.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";import"./query-2d22378e.js";import"./class-map-21152cee.js";import"./collection-7eee4e72.js";import"./tinykeys.module-84e6cc41.js";export{C as default}from"./Calendar-9d3d6d01.js";import"./Button.js";import"./VisuallyHidden.js";import"./Icon.js";import"./DirectionController-8b298382.js";import"./LocalizeController.js";import"./cond-2da54107.js";import"./number-c3ab3e95.js";import"./dates-5b651fbe.js";import"./observe-a9c6dfb6.js";import"./DateSelectEvent.js";import"./Component-449e40fb.js";import"./directive-de55b00a.js";import"./ref-c44e9f3c.js";import"./EventController-d99ebeef.js";import"./LightDomController-052f446a.js";import"./Spinner.js";import"./if-defined-720964c0.js";import"./FocusableMixin-32631bff.js";import"./InputMixin-7fa755e1.js";import"./SlotController-d733c575.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"./events-731d0007.js";
2
2
  //# sourceMappingURL=Calendar.js.map
package/lib/Card.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as a,_ as r,s as e,y as d,e as o}from"./query-assigned-elements-cf502539.js";import{e as t}from"./property-03f59dce.js";import{S as n}from"./SlotController-89834aef.js";import{s}from"./Component-449e40fb.js";import"./EventController-d99ebeef.js";const i=a`:host{--_n-card-padding:var(--n-card-padding, var(--n-space-m));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-m));--_n-card-box-shadow:var(--n-card-box-shadow, var(--n-box-shadow-card));--_n-card-border-radius:var(--n-card-border-radius, var(--n-border-radius));color:var(--n-color-text);display:block;inline-size:100%}.n-card{background:var(--n-color-surface);border-radius:var(--_n-card-border-radius);box-shadow:var(--_n-card-box-shadow);block-size:100%;display:flex;flex-direction:column}.header{border-block-end:1px solid var(--n-color-border);padding:var(--n-space-m) var(--_n-card-slot-padding);display:flex;gap:var(--n-space-s);align-items:center;justify-content:space-between;flex-wrap:wrap}:host([padding="l"]){--_n-card-padding:var(--n-card-padding, var(--n-space-l));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-l))}:host([padding=none]){--_n-card-padding:var(--n-card-padding, 0)}slot{display:block}slot:not([name]){padding:var(--_n-card-padding);flex:1}slot[name=footer]{padding:var(--_n-card-slot-padding);padding-block-start:0;white-space:nowrap}::slotted([slot=header-end]){--n-stack-gap:var(--n-space-s);display:flex;gap:var(--n-stack-gap);align-items:center;flex-wrap:wrap}::slotted([slot=header]){font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading);margin:0}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends e{constructor(){super(...arguments),this.headerSlot=new n(this,"header"),this.headerEndSlot=new n(this,"header-end"),this.footerSlot=new n(this,"footer"),this.padding="m"}render(){return d`<div class="n-card"><div class="header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><slot></slot><slot name="${this.footerSlot.slotName}" ?hidden="${this.footerSlot.isEmpty}"></slot></div>`}};l.styles=[s,i],r([t({reflect:!0})],l.prototype,"padding",void 0),l=r([o("nord-card")],l);var c=l;export{c as default};
1
+ import{i as a,_ as r,s as d,y as e,e as o}from"./query-assigned-elements-cf502539.js";import{e as t}from"./property-03f59dce.js";import{S as n}from"./SlotController-d733c575.js";import{s}from"./Component-449e40fb.js";import"./EventController-d99ebeef.js";const i=a`:host{--_n-card-padding:var(--n-card-padding, var(--n-space-m));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-m));--_n-card-box-shadow:var(--n-card-box-shadow, var(--n-box-shadow-card));--_n-card-border-radius:var(--n-card-border-radius, var(--n-border-radius));color:var(--n-color-text);display:block;inline-size:100%}.n-card{background:var(--n-color-surface);border-radius:var(--_n-card-border-radius);box-shadow:var(--_n-card-box-shadow);block-size:100%;display:flex;flex-direction:column}.header{border-block-end:1px solid var(--n-color-border);padding:var(--n-space-m) var(--_n-card-slot-padding);display:flex;gap:var(--n-space-s);align-items:center;justify-content:space-between;flex-wrap:wrap}:host([padding="l"]){--_n-card-padding:var(--n-card-padding, var(--n-space-l));--_n-card-slot-padding:var(--n-card-slot-padding, var(--n-space-l))}:host([padding=none]){--_n-card-padding:var(--n-card-padding, 0)}slot{display:block}slot:not([name]){padding:var(--_n-card-padding);flex:1}slot[name=footer]{padding:var(--_n-card-slot-padding);padding-block-start:0;white-space:nowrap}::slotted([slot=header-end]){--n-stack-gap:var(--n-space-s);display:flex;gap:var(--n-stack-gap);align-items:center;flex-wrap:wrap}::slotted([slot=header]){font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading);margin:0}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends d{constructor(){super(...arguments),this.headerSlot=new n(this,"header"),this.headerEndSlot=new n(this,"header-end"),this.footerSlot=new n(this,"footer"),this.padding="m"}render(){return e`<div class="n-card"><div class="header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><slot></slot><slot name="${this.footerSlot.slotName}" ?hidden="${this.footerSlot.isEmpty}"></slot></div>`}};l.styles=[s,i],r([t({reflect:!0})],l.prototype,"padding",void 0),l=r([o("nord-card")],l);var c=l;export{c as default};
2
2
  //# sourceMappingURL=Card.js.map
package/lib/Checkbox.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as e,y as n,_ as o,e as r,s as i}from"./query-assigned-elements-cf502539.js";import{e as c}from"./property-03f59dce.js";import{l as a}from"./if-defined-720964c0.js";import{n as t}from"./ref-c44e9f3c.js";import s from"./Icon.js";import{F as l}from"./FocusableMixin-32631bff.js";import{F as d}from"./FormAssociatedMixin-e8bc2869.js";import{I as p}from"./InputMixin-7fa755e1.js";import{S as h,i as m}from"./SizeMixin-d5afdb92.js";import{s as b}from"./Component-449e40fb.js";import{s as v}from"./FormField-413f22f5.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./observe-a9c6dfb6.js";import"./cond-2da54107.js";import"./EventController-d99ebeef.js";import"./SlotController-89834aef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z"/></svg>',title:"interface-checked-small",tags:"nordicon interface checked small symbol checkmark done ready"});var f=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z"/></svg>',title:"interface-remove-small",tags:"nordicon interface remove small delete erase minimize line"});const k=e`:host{--_n-checkbox-size:calc(var(--n-space-m) * 1.25);--_n-checkbox-accent-color:var(--n-color-accent);--_n-checkbox-border-color:var(--n-color-border-hover);display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{-moz-appearance:none;-webkit-appearance:none;appearance:none;border:1px solid var(--_n-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-checkbox-size);block-size:var(--_n-checkbox-size);cursor:pointer}input:checked,input:indeterminate{--_n-checkbox-border-color:var(--n-color-accent);background:var(--_n-checkbox-accent-color)}input[aria-invalid]{--_n-checkbox-accent-color:var(--n-color-status-danger);--_n-checkbox-border-color:var(--_n-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}input:active{opacity:.8}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{--_n-checkbox-accent-color:var(--n-color-border-strong);--_n-checkbox-border-color:var(--_n-checkbox-accent-color);background:var(--_n-checkbox-accent-color);cursor:default;opacity:1}nord-icon{display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-s)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.n-label-container{margin-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-form);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}:host([size="s"]){--_n-checkbox-size:var(--n-space-m)}:host([size="s"]) nord-icon{inset:calc(var(--n-space-s)/ 2.6)}:host([size="s"]:not([hide-label])) .n-input-container{margin:calc(var(--n-space-s)/ 2.6) 0}:host([size="l"]){--_n-checkbox-size:var(--n-space-l)}`;s.registerIcon(u),s.registerIcon(f);let x=class extends(h(d(p(l(i))))){constructor(){super(...arguments),this.indeterminate=!1,this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=m[this.size]||m.m;return n`<div class="n-flex"><div class="n-input-container"><input ${t(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" .indeterminate="${this.indeterminate}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small" size="${e}"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small" size="${e}"></nord-icon></div><div class="n-expand">${this.renderLabel()} ${this.renderError()}</div></div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};x.styles=[b,v,k],o([c({type:Boolean})],x.prototype,"indeterminate",void 0),o([c({type:Boolean})],x.prototype,"checked",void 0),x=o([r("nord-checkbox")],x);var g=x;export{g as default};
1
+ import{i as e,y as n,_ as o,e as r,s as i}from"./query-assigned-elements-cf502539.js";import{e as c}from"./property-03f59dce.js";import{l as a}from"./if-defined-720964c0.js";import{n as t}from"./ref-c44e9f3c.js";import s from"./Icon.js";import{F as l}from"./FocusableMixin-32631bff.js";import{F as d}from"./FormAssociatedMixin-f4da77a8.js";import{I as p}from"./InputMixin-7fa755e1.js";import{S as h}from"./SizeMixin-4d04817d.js";import{s as m}from"./Component-449e40fb.js";import{s as v}from"./FormField-413f22f5.js";import"./directive-de55b00a.js";import"./state-70f38ceb.js";import"./observe-a9c6dfb6.js";import"./cond-2da54107.js";import"./EventController-d99ebeef.js";import"./SlotController-d733c575.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var b=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z"/></svg>',title:"interface-checked-small",tags:"nordicon interface checked small symbol checkmark done ready"});var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z"/></svg>',title:"interface-remove-small",tags:"nordicon interface remove small delete erase minimize line"});const f=e`:host{--_n-checkbox-size:calc(var(--n-space-m) * 1.25);--_n-checkbox-accent-color:var(--n-color-accent);--_n-checkbox-border-color:var(--n-color-border-hover);--_n-checkbox-icon-size:var(--n-size-icon-s);display:inline-block}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}input{-moz-appearance:none;-webkit-appearance:none;appearance:none;border:1px solid var(--_n-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-checkbox-size);block-size:var(--_n-checkbox-size);cursor:pointer}input:checked,input:indeterminate{--_n-checkbox-border-color:var(--n-color-accent);background:var(--_n-checkbox-accent-color)}input[aria-invalid]{--_n-checkbox-accent-color:var(--n-color-status-danger);--_n-checkbox-border-color:var(--_n-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}input:active{opacity:.8}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{--_n-checkbox-accent-color:var(--n-color-border-strong);--_n-checkbox-border-color:var(--_n-checkbox-accent-color);background:var(--_n-checkbox-accent-color);cursor:default;opacity:1}nord-icon{--_n-icon-size:var(--_n-checkbox-icon-size);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-s)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~.icon-checked,input:indeterminate~.icon-indeterminate{display:block}.n-label-container{margin-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-form);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}:host([size="s"]){--_n-checkbox-size:var(--n-space-m);--_n-checkbox-icon-size:var(--n-size-icon-xs)}:host([size="s"]) nord-icon{inset:calc(var(--n-space-s)/ 2.6)}:host([size="s"]:not([hide-label])) .n-input-container{margin:calc(var(--n-space-s)/ 2.6) 0}:host([size="l"]){--_n-checkbox-size:var(--n-space-l);--_n-checkbox-icon-size:var(--n-size-icon-m)}`;s.registerIcon(b),s.registerIcon(u);let k=class extends(h(d(p(l(i))))){constructor(){super(...arguments),this.indeterminate=!1,this.checked=!1}get formValue(){return this.checked?this.value||"on":void 0}render(){return n`<div class="n-flex"><div class="n-input-container"><input ${t(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" .indeterminate="${this.indeterminate}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon><nord-icon class="icon-indeterminate" name="interface-remove-small"></nord-icon></div><div class="n-expand">${this.renderLabel()} ${this.renderError()}</div></div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};k.styles=[m,v,f],o([c({type:Boolean})],k.prototype,"indeterminate",void 0),o([c({type:Boolean})],k.prototype,"checked",void 0),k=o([r("nord-checkbox")],k);var x=k;export{x as default};
2
2
  //# sourceMappingURL=Checkbox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-checked-small.js","../../icons/lib/assets/interface-remove-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z\"/></svg>'\nexport const title = \"interface-checked-small\"\nexport const tags = \"nordicon interface checked small symbol checkmark done ready\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z\"/></svg>'\nexport const title = \"interface-remove-small\"\nexport const tags = \"nordicon interface remove small delete erase minimize line\"\n","import { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport * as checkedIcon from \"@nordhealth/icons/lib/assets/interface-checked-small.js\"\nimport * as indeterminateIcon from \"@nordhealth/icons/lib/assets/interface-remove-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { SizeMixin, iconSizeMap } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Checkbox.css\"\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(indeterminateIcon)\n\n/**\n * Checkboxes allow user to choose one or more options from a limited set of options.\n * If you have more than 10 options, please use Select component instead.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-checkbox\")\nexport default class Checkbox extends SizeMixin(FormAssociatedMixin(InputMixin(FocusableMixin(LitElement)))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.checked ? this.value || \"on\" : undefined\n }\n\n /**\n * Controls whether the checkbox is in an indeterminate state.\n */\n @property({ type: Boolean }) indeterminate = false\n\n /**\n * Controls whether the checkbox is checked or not.\n */\n @property({ type: Boolean }) checked: boolean = false\n\n render() {\n const iconSize = iconSizeMap[this.size] || iconSizeMap.m\n\n return html`\n <div class=\"n-flex\">\n <div class=\"n-input-container\">\n <input\n ${ref(this.focusableRef)}\n class=\"n-input\"\n id=${this.inputId}\n type=\"checkbox\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${this.checked}\n .indeterminate=${this.indeterminate}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n @change=${this.handleChange}\n />\n <nord-icon class=\"icon-checked\" name=\"interface-checked-small\" size=${iconSize}></nord-icon>\n <nord-icon class=\"icon-indeterminate\" name=\"interface-remove-small\" size=${iconSize}></nord-icon>\n </div>\n <div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>\n </div>\n `\n }\n\n protected handleChange(e: Event): void {\n const target = e.target as HTMLInputElement\n this.checked = target.checked\n super.handleChange(e)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-checkbox\": Checkbox\n }\n}\n"],"names":["Icon","registerIcon","checkedIcon","indeterminateIcon","Checkbox","SizeMixin","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","indeterminate","checked","formValue","value","undefined","render","iconSize","iconSizeMap","size","m","html","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","renderLabel","renderError","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","prototype","customElement"],"mappings":"izBAAe,6VACM,+BACD,6GCFL,4KACM,8BACD,+mECepBA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAalB,IAAqBC,EAArB,cAAsCC,EAAUC,EAAoBC,EAAWC,EAAeC,OAA9FC,kCAU+BC,KAAaC,eAAG,EAKhBD,KAAOE,SAAY,CAoCjD,CAhDwBC,gBACrB,OAAOH,KAAKE,QAAUF,KAAKI,OAAS,UAAOC,CAC5C,CAYDC,SACE,MAAMC,EAAWC,EAAYR,KAAKS,OAASD,EAAYE,EAEvD,OAAOC,CAAI,6DAIDC,EAAIZ,KAAKa,qCAENb,KAAKc,kCAEHC,EAAUf,KAAKgB,kBACbhB,KAAKI,oBACHJ,KAAKE,4BACCF,KAAKC,6BACVD,KAAKiB,wBACLjB,KAAKkB,+BACEH,EAAUf,KAAKmB,oCACnBJ,EAAUf,KAAKoB,2BACpBpB,KAAKqB,sFAEqDd,4FACKA,8CAErDP,KAAKsB,iBAAiBtB,KAAKuB,2BAGxD,CAESF,aAAaG,GACrB,MAAMC,EAASD,EAAEC,OACjBzB,KAAKE,QAAUuB,EAAOvB,QACtBwB,MAAML,aAAaG,EACpB,GAjDM/B,EAAMkC,OAAG,CAACC,EAAgBC,EAAgBC,GASpBC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAgCzC,EAAA0C,UAAA,qBAAA,GAKrBJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCzC,EAAA0C,UAAA,eAAA,GAflC1C,EAAQsC,EAAA,CAD5BK,EAAc,kBACM3C,SAAAA"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../../icons/lib/assets/interface-checked-small.js","../../icons/lib/assets/interface-remove-small.js","../src/checkbox/Checkbox.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M41.86 131.25a23.982 23.982 0 0 1-18.494-8.666L2.254 95.746a10.5 10.5 0 1 1 16.492-12.992l21 26.6a2.24 2.24 0 0 0 2.212.882 3.038 3.038 0 0 0 2.38-1.148l76.958-96.39a10.5 10.5 0 1 1 16.408 13.104L60.606 122.29A24.038 24.038 0 0 1 42 131.25z\"/></svg>'\nexport const title = \"interface-checked-small\"\nexport const tags = \"nordicon interface checked small symbol checkmark done ready\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M129.5 80.5h-119a10.5 10.5 0 0 1 0-21h119a10.5 10.5 0 0 1 0 21z\"/></svg>'\nexport const title = \"interface-remove-small\"\nexport const tags = \"nordicon interface remove small delete erase minimize line\"\n","import { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport * as checkedIcon from \"@nordhealth/icons/lib/assets/interface-checked-small.js\"\nimport * as indeterminateIcon from \"@nordhealth/icons/lib/assets/interface-remove-small.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { SizeMixin } from \"../common/mixins/SizeMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Checkbox.css\"\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(indeterminateIcon)\n\n/**\n * Checkboxes allow user to choose one or more options from a limited set of options.\n * If you have more than 10 options, please use Select component instead.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the input.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-checkbox\")\nexport default class Checkbox extends SizeMixin(FormAssociatedMixin(InputMixin(FocusableMixin(LitElement)))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.checked ? this.value || \"on\" : undefined\n }\n\n /**\n * Controls whether the checkbox is in an indeterminate state.\n */\n @property({ type: Boolean }) indeterminate = false\n\n /**\n * Controls whether the checkbox is checked or not.\n */\n @property({ type: Boolean }) checked: boolean = false\n\n render() {\n return html`\n <div class=\"n-flex\">\n <div class=\"n-input-container\">\n <input\n ${ref(this.focusableRef)}\n class=\"n-input\"\n id=${this.inputId}\n type=\"checkbox\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${this.checked}\n .indeterminate=${this.indeterminate}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n @change=${this.handleChange}\n />\n <nord-icon class=\"icon-checked\" name=\"interface-checked-small\"></nord-icon>\n <nord-icon class=\"icon-indeterminate\" name=\"interface-remove-small\"></nord-icon>\n </div>\n <div class=\"n-expand\">${this.renderLabel()} ${this.renderError()}</div>\n </div>\n `\n }\n\n protected handleChange(e: Event): void {\n const target = e.target as HTMLInputElement\n this.checked = target.checked\n super.handleChange(e)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-checkbox\": Checkbox\n }\n}\n"],"names":["Icon","registerIcon","checkedIcon","indeterminateIcon","Checkbox","SizeMixin","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","indeterminate","checked","formValue","value","undefined","render","html","ref","focusableRef","inputId","ifDefined","name","disabled","required","getDescribedBy","getInvalid","handleChange","renderLabel","renderError","e","target","super","styles","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","prototype","customElement"],"mappings":"0yBAAe,6VACM,+BACD,6GCFL,4KACM,8BACD,myECepBA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAalB,IAAqBC,EAArB,cAAsCC,EAAUC,EAAoBC,EAAWC,EAAeC,OAA9FC,kCAU+BC,KAAaC,eAAG,EAKhBD,KAAOE,SAAY,CAkCjD,CA9CwBC,gBACrB,OAAOH,KAAKE,QAAUF,KAAKI,OAAS,UAAOC,CAC5C,CAYDC,SACE,OAAOC,CAAI,6DAIDC,EAAIR,KAAKS,qCAENT,KAAKU,kCAEHC,EAAUX,KAAKY,kBACbZ,KAAKI,oBACHJ,KAAKE,4BACCF,KAAKC,6BACVD,KAAKa,wBACLb,KAAKc,+BACEH,EAAUX,KAAKe,oCACnBJ,EAAUX,KAAKgB,2BACpBhB,KAAKiB,wMAKKjB,KAAKkB,iBAAiBlB,KAAKmB,2BAGxD,CAESF,aAAaG,GACrB,MAAMC,EAASD,EAAEC,OACjBrB,KAAKE,QAAUmB,EAAOnB,QACtBoB,MAAML,aAAaG,EACpB,GA/CM3B,EAAM8B,OAAG,CAACC,EAAgBC,EAAgBC,GASpBC,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAgCrC,EAAAsC,UAAA,qBAAA,GAKrBJ,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAmCrC,EAAAsC,UAAA,eAAA,GAflCtC,EAAQkC,EAAA,CAD5BK,EAAc,kBACMvC,SAAAA"}
@@ -1,2 +1,2 @@
1
- import{i as e,_ as o,s as t,y as n,b as s,e as i}from"./query-assigned-elements-cf502539.js";import{e as r}from"./property-03f59dce.js";import{t as a}from"./state-70f38ceb.js";import{g as l,c as d}from"./collection-7eee4e72.js";import{e as c,n as p}from"./ref-c44e9f3c.js";import{o as m}from"./class-map-21152cee.js";import{l as h}from"./if-defined-720964c0.js";import{w as v}from"./number-c3ab3e95.js";import{N as u}from"./events-731d0007.js";import{L as f}from"./LightDismissController-a2645ae6.js";import{KeyboardController as b}from"./KeyboardController.js";import g from"./Icon.js";import"./VisuallyHidden.js";import"./CommandMenuAction.js";import{SelectEvent as x}from"./SelectEvent.js";import{s as y}from"./Component-449e40fb.js";import{LocalizeController as k}from"./LocalizeController.js";import{c as w}from"./cond-2da54107.js";import{o as z}from"./observe-a9c6dfb6.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";const j="keyboard-arrow-up-down";var $=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M105.833 24v93m0-93L80 49.833M105.833 24l25.834 25.833M34.167 117V24m0 93L60 91.167M34.167 117 8.333 91.167" fill="none" stroke="currentColor" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:j,tags:"nordicon keyboard keys arrow up down shortcut"});var C=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"><path d="M35 133 7 105l28-28"/><path d="M7 105h112a14 14 0 0 0 14-14V21a14 14 0 0 0-14-14H77"/></g></svg>',title:"keyboard-return",tags:"nordicon keyboard return key shortcut"});const _="keyboard-backspace";var I=Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M6.707 4.879A3 3 0 0 1 8.828 4H15a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H8.828a3 3 0 0 1-2.12-.879l-4.415-4.414a1 1 0 0 1 0-1.414l4.414-4.414zm4 2.414a1 1 0 0 0-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 1 0 1.414 1.414L12 11.414l1.293 1.293a1 1 0 0 0 1.414-1.414L13.414 10l1.293-1.293a1 1 0 0 0-1.414-1.414L12 8.586l-1.293-1.293z" clip-rule="evenodd"/></svg>',title:_,tags:"nordicon keyboard backspace back delete key shortcut"});function L(e){var o;return(null===(o=e.activeElement)||void 0===o?void 0:o.shadowRoot)?L(e.activeElement.shadowRoot):e.activeElement||void 0}const B=e`:host{--_n-command-menu-inline-size:var(--n-command-menu-inline-size, 640px);--_n-command-menu-block-size:var(--n-command-menu-block-size, 290px);--_n-command-menu-block-start:var(--n-command-menu-block-start, 16%)}.n-modal{display:none;position:fixed;pointer-events:none;z-index:var(--n-index-modal);inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;overflow:auto}.n-modal.n-visible{display:block}.n-modal-content{position:relative;pointer-events:all;inset-block-start:var(--_n-command-menu-block-start);margin:auto;display:flex;flex-direction:column;min-inline-size:0;background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-modal);max-inline-size:var(--_n-command-menu-inline-size);overflow:hidden}.n-bump{animation:zoom-in-zoom-out var(--n-transition-slowly)}@keyframes zoom-in-zoom-out{0%{transform:translateY(-10px) scale(.97);opacity:0}100%{transform:translateY(0) scale(1.0001);opacity:1}}.n-modal-footer{display:flex;gap:var(--n-space-s);padding:var(--n-space-s) var(--n-space-m);font-size:calc(var(--n-font-size-s) - 1px);color:var(--n-color-text-weaker)}.n-help{display:flex;align-items:center;gap:2px}.n-help+.n-help{padding-inline-start:var(--n-space-s);border-inline-start:1px solid var(--n-color-border-strong)}.n-help nord-icon{--_n-icon-size:10px;color:currentColor;margin:3px 4px}.n-help.n-backspace nord-icon{--_n-icon-size:12px}.n-search-wrapper{display:flex;border-block-end:1px solid var(--n-color-border)}[role=combobox]{flex:1;font-size:var(--n-font-size-l);font-weight:var(--n-font-weight);font-family:inherit;background:0 0;color:var(--n-color-text);border:none;border-radius:0;appearance:none;outline:0;margin:0;padding:var(--n-space-m)}[role=combobox]::-webkit-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-moz-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-ms-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=listbox]{max-block-size:var(--_n-command-menu-block-size);overflow:auto;margin:0;padding:0}.n-group-header{line-height:var(--n-line-height);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-s)/ 1.4) var(--n-space-m);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:var(--n-font-size-s);background:var(--n-color-surface-raised);font-weight:var(--n-font-weight-active);color:var(--n-color-text-weaker)}.n-command-empty{display:flex;flex:1;flex-direction:column;border-inline-start:2px solid transparent;align-items:flex-start;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command-empty .n-title{flex:1;margin-block-start:var(--n-space-s);margin-inline-end:calc(var(--n-space-s)/ 2);max-inline-size:100%;font-size:var(--n-font-size-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-command-empty .n-tip{flex:1;margin-block-start:var(--n-space-s);margin-block-end:var(--n-space-m);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker)}`;g.registerIcon($),g.registerIcon(C),g.registerIcon(I);let E=class extends t{constructor(){super(...arguments),this.inputRef=c(),this.listRef=c(),this.localize=new k(this),this.dismissController=new f(this,{isOpen:()=>this.open,onDismiss:()=>this.close()}),this.keyboardController=new b(this,{trigger:()=>this.select(),goBack:()=>this.goBack(),end:()=>this.end(),start:()=>this.start(),next:()=>this.next(),previous:()=>this.previous(),toggleOpen:()=>this.toggleOpen()}),this.open=!1,this.placeholder="Type a command or search...",this.commands=[],this.search="",this.bump=!0,this.selectedIndex=0,this.filteredCommands=[]}get selected(){return this.filteredCommands[this.selectedIndex]}show(e={}){this.dispatchEvent(new u("open",{cancelable:!0}))&&(this.open=!0,this.setParent(e.parent))}close(){var e;this.open=!1,null===(e=this.previousFocus)||void 0===e||e.focus(),this.previousFocus=void 0,this.dispatchEvent(new u("close"))}toggleOpen(){this.open?this.close():this.show()}focus(){var e;null===(e=this.inputRef.value)||void 0===e||e.focus()}render(){var e;const o=l(this.filteredCommands,"section"),t=0===this.filteredCommands.length?"no-results":null===(e=this.selected)||void 0===e?void 0:e.id;return n`<div class="${m({"n-visible":this.open,"n-modal":!0})}"><div @animationend="${this.handleAnimationEnd}" class="${m({"n-bump":this.bump,"n-modal-content":!0})}"><div class="n-search-wrapper"><nord-visually-hidden id="instructions">${this.localize.term("instructions")}</nord-visually-hidden><input type="text" id="search" @input="${this.handleInput}" @blur="${this.handleBlur}" ${p(this.inputRef)} placeholder="${this.placeholder}" .value="${this.search}" spellcheck="false" autocomplete="off" autocapitalize="off" aria-label="${this.localize.term("inputLabel")}" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" aria-controls="list" aria-expanded="true" aria-activedescendant="${h(t)}" aria-describedby="instructions"></div><div class="n-modal-body"><div id="list" ${p(this.listRef)} role="listbox">${0===this.filteredCommands.length?this.renderNoResults():Array.from(o,(([e,o])=>this.renderSection(e,o)))}</div></div><slot name="footer"><div class="n-modal-footer"><span class="n-help"><nord-icon label="Arrow keys" name="${j}"></nord-icon>${this.localize.term("footerArrowKeys")} </span><span class="n-help"><nord-icon label="Enter key" name="${"keyboard-return"}"></nord-icon>${this.localize.term("footerEnterKey")} </span><span class="n-help">${this.localize.term("footerEscapeKey")}</span> <span class="n-help n-backspace"><nord-icon label="Backspace key" name="${_}"></nord-icon>${this.localize.term("footerBackspaceKey")}</span></div></slot></div></div>`}renderNoResults(){return n`<div id="no-results" class="n-command-empty" role="option" aria-selected="true"><div class="n-title">${this.localize.term("noResults",this.search)}</div><div class="n-tip">${this.localize.term("tip")}</div></div>`}renderSection(e,o){const t=`section-${e}`;return n`<div role="group" aria-labelledby="${w(e,t)}">${e?n`<div class="n-group-header" role="presentation" id="${t}">${e}</div>`:s} ${d(o,(e=>e.id),(e=>{var o,t;return n`<nord-command-menu-action id="${e.id}" .command="${e}" ?selected="${this.open&&e.id===(null===(o=this.selected)||void 0===o?void 0:o.id)}" @click="${()=>this.select(e)}" role="option" aria-selected="${w(e.id===(null===(t=this.selected)||void 0===t?void 0:t.id),"true")}"></nord-command-menu-action>`}))}</div>`}handleCommandsChange(){this.keyboardController.registerCommandShortcuts()}handleBump(){this.open&&(this.bump=!0)}focusOnOpen(){this.open&&(this.previousFocus=L(document),this.focus(),this.listRef.value&&(this.listRef.value.scrollTop=0))}handleAnimationEnd(){this.bump=!1}handleBlur(){this.open&&this.focus()}handleInput(e){const o=e.target;this.setSearch(o.value)}select(e=this.selected){var o;this.commands.some((o=>o.parent===e.id))?(this.setParent(e.id),this.bump=!0,this.focus()):this.close(),this.setSearch(""),null===(o=e.handler)||void 0===o||o.call(e,this);const t=new x(e);this.dispatchEvent(t)}start(){this.selectedIndex=0}end(){this.selectedIndex=this.filteredCommands.length-1}next(){this.selectedIndex=v(this.selectedIndex+1,0,this.filteredCommands.length-1)}previous(){this.selectedIndex=v(this.selectedIndex-1,0,this.filteredCommands.length-1)}goBack(){if(!this.search&&this.parent){const e=this.commands.find((e=>e.id===this.parent));this.setParent(null==e?void 0:e.parent)}}setParent(e){this.parent=e,this.setSearch("")}setSearch(e){this.search=e,this.selectedIndex=0}filterCommands(){const e=this.search.toLocaleLowerCase().split(/\s+/);this.filteredCommands=this.commands.filter((({title:o,keywords:t="",parent:n})=>{const s=`${o} ${t}`.toLocaleLowerCase(),i=e.every((e=>s.includes(e)));return(!this.parent&&this.search||n==this.parent)&&i}))}};E.styles=[y,B],o([r({type:Boolean})],E.prototype,"open",void 0),o([r({type:String})],E.prototype,"placeholder",void 0),o([r({type:Array,attribute:!1})],E.prototype,"commands",void 0),o([a()],E.prototype,"parent",void 0),o([a()],E.prototype,"search",void 0),o([a()],E.prototype,"bump",void 0),o([a()],E.prototype,"selectedIndex",void 0),o([a()],E.prototype,"filteredCommands",void 0),o([z("commands")],E.prototype,"handleCommandsChange",null),o([z("open")],E.prototype,"handleBump",null),o([z("open","updated")],E.prototype,"focusOnOpen",null),o([z("search"),z("parent"),z("commands")],E.prototype,"filterCommands",null),E=o([i("nord-command-menu")],E);var R=E;export{R as default};
1
+ import{i as e,_ as o,s as t,y as n,b as i,e as s}from"./query-assigned-elements-cf502539.js";import{e as r}from"./property-03f59dce.js";import{t as a}from"./state-70f38ceb.js";import{g as l,c as d}from"./collection-7eee4e72.js";import{e as c,n as p}from"./ref-c44e9f3c.js";import{o as m}from"./class-map-21152cee.js";import{l as h}from"./if-defined-720964c0.js";import{w as v}from"./number-c3ab3e95.js";import{N as u}from"./events-731d0007.js";import{L as f}from"./LightDismissController-a2645ae6.js";import{KeyboardController as b}from"./KeyboardController.js";import g from"./Icon.js";import"./VisuallyHidden.js";import"./CommandMenuAction.js";import{SelectEvent as x}from"./SelectEvent.js";import{s as y}from"./Component-449e40fb.js";import{LocalizeController as k}from"./LocalizeController.js";import{c as w}from"./cond-2da54107.js";import{o as z}from"./observe-a9c6dfb6.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.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";const j="keyboard-arrow-up-down";var $=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M105.833 24v93m0-93L80 49.833M105.833 24l25.834 25.833M34.167 117V24m0 93L60 91.167M34.167 117 8.333 91.167" fill="none" stroke="currentColor" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:j,tags:"nordicon keyboard keys arrow up down shortcut"});var C=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"><path d="M35 133 7 105l28-28"/><path d="M7 105h112a14 14 0 0 0 14-14V21a14 14 0 0 0-14-14H77"/></g></svg>',title:"keyboard-return",tags:"nordicon keyboard return key shortcut"});const _="keyboard-backspace";var I=Object.freeze({__proto__:null,default:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M6.707 4.879A3 3 0 0 1 8.828 4H15a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H8.828a3 3 0 0 1-2.12-.879l-4.415-4.414a1 1 0 0 1 0-1.414l4.414-4.414zm4 2.414a1 1 0 0 0-1.414 1.414L10.586 10l-1.293 1.293a1 1 0 1 0 1.414 1.414L12 11.414l1.293 1.293a1 1 0 0 0 1.414-1.414L13.414 10l1.293-1.293a1 1 0 0 0-1.414-1.414L12 8.586l-1.293-1.293z" clip-rule="evenodd"/></svg>',title:_,tags:"nordicon keyboard backspace back delete key shortcut"});function L(e){var o;return(null===(o=e.activeElement)||void 0===o?void 0:o.shadowRoot)?L(e.activeElement.shadowRoot):e.activeElement||void 0}const B=e`:host{--_n-command-menu-inline-size:var(--n-command-menu-inline-size, 640px);--_n-command-menu-block-size:var(--n-command-menu-block-size, 290px);--_n-command-menu-block-start:var(--n-command-menu-block-start, 16%)}.n-modal{display:none;position:fixed;pointer-events:none;z-index:var(--n-index-modal);inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:100%;overflow:auto}.n-modal.n-visible{display:block}.n-modal-content{position:relative;pointer-events:all;inset-block-start:var(--_n-command-menu-block-start);margin:auto;display:flex;flex-direction:column;min-inline-size:0;background:var(--n-color-surface);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-modal);max-inline-size:var(--_n-command-menu-inline-size);overflow:hidden}.n-bump{animation:zoom-in-zoom-out var(--n-transition-slowly)}@keyframes zoom-in-zoom-out{0%{transform:translateY(-10px) scale(.97);opacity:0}100%{transform:translateY(0) scale(1.0001);opacity:1}}.n-modal-footer{display:flex;gap:var(--n-space-s);padding:var(--n-space-s) var(--n-space-m);font-size:calc(var(--n-font-size-s) - 1px);color:var(--n-color-text-weaker)}.n-help{display:flex;align-items:center;gap:2px}.n-help+.n-help{padding-inline-start:var(--n-space-s);border-inline-start:1px solid var(--n-color-border-strong)}.n-help nord-icon{--_n-icon-size:10px;color:currentColor;margin:3px 4px}.n-help.n-backspace nord-icon{--_n-icon-size:12px}.n-search-wrapper{display:flex;border-block-end:1px solid var(--n-color-border)}[role=combobox]{flex:1;font-size:var(--n-font-size-l);font-weight:var(--n-font-weight);font-family:inherit;background:0 0;color:var(--n-color-text);border:none;border-radius:0;appearance:none;outline:0;margin:0;padding:var(--n-space-m)}[role=combobox]::-webkit-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-moz-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=combobox]::-ms-input-placeholder{color:var(--n-color-text-weaker);opacity:.6!important}[role=listbox]{max-block-size:var(--_n-command-menu-block-size);overflow:auto;margin:0;padding:0}.n-group-header{line-height:var(--n-line-height);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-s)/ 1.4) var(--n-space-m);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:var(--n-font-size-s);background:var(--n-color-surface-raised);font-weight:var(--n-font-weight-active);color:var(--n-color-text-weaker)}.n-command-empty{display:flex;flex:1;flex-direction:column;border-inline-start:2px solid transparent;align-items:flex-start;color:var(--n-color-text);border-block-end:1px solid var(--n-color-border);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-command-empty .n-title{flex:1;margin-block-start:var(--n-space-s);margin-inline-end:calc(var(--n-space-s)/ 2);max-inline-size:100%;font-size:var(--n-font-size-m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.n-command-empty .n-tip{flex:1;margin-block-start:var(--n-space-s);margin-block-end:var(--n-space-m);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker)}`;g.registerIcon($),g.registerIcon(C),g.registerIcon(I);let E=class extends t{constructor(){super(...arguments),this.inputRef=c(),this.listRef=c(),this.localize=new k(this),this.dismissController=new f(this,{isOpen:()=>this.open,onDismiss:()=>this.close()}),this.keyboardController=new b(this,{trigger:()=>this.select(),goBack:()=>this.goBack(),end:()=>this.end(),start:()=>this.start(),next:()=>this.next(),previous:()=>this.previous(),toggleOpen:()=>this.toggleOpen()}),this.open=!1,this.placeholder="Type a command or search...",this.commands=[],this.search="",this.bump=!0,this.selectedIndex=0,this.filteredCommands=[]}get selected(){return this.filteredCommands[this.selectedIndex]}show(e={}){this.dispatchEvent(new u("open",{cancelable:!0}))&&(this.open=!0,this.setParent(e.parent))}close(){var e;this.open=!1,null===(e=this.previousFocus)||void 0===e||e.focus(),this.previousFocus=void 0,this.dispatchEvent(new u("close"))}toggleOpen(){this.open?this.close():this.show()}focus(){var e;null===(e=this.inputRef.value)||void 0===e||e.focus()}render(){var e;const o=l(this.filteredCommands,"section"),t=0===this.filteredCommands.length?"no-results":null===(e=this.selected)||void 0===e?void 0:e.id;return n`<div class="${m({"n-visible":this.open,"n-modal":!0})}"><div @animationend="${this.handleAnimationEnd}" class="${m({"n-bump":this.bump,"n-modal-content":!0})}"><div class="n-search-wrapper"><nord-visually-hidden id="instructions">${this.localize.term("instructions")}</nord-visually-hidden><input type="text" id="search" @input="${this.handleInput}" @blur="${this.handleBlur}" ${p(this.inputRef)} placeholder="${this.placeholder}" .value="${this.search}" spellcheck="false" autocomplete="off" autocapitalize="off" aria-label="${this.localize.term("inputLabel")}" aria-autocomplete="list" aria-haspopup="listbox" role="combobox" aria-controls="list" aria-expanded="true" aria-activedescendant="${h(t)}" aria-describedby="instructions"></div><div class="n-modal-body"><div id="list" ${p(this.listRef)} role="listbox">${0===this.filteredCommands.length?this.renderNoResults():Array.from(o,(([e,o])=>this.renderSection(e,o)))}</div></div><slot name="footer"><div class="n-modal-footer"><span class="n-help"><nord-icon label="Arrow keys" name="${j}"></nord-icon>${this.localize.term("footerArrowKeys")} </span><span class="n-help"><nord-icon label="Enter key" name="${"keyboard-return"}"></nord-icon>${this.localize.term("footerEnterKey")} </span><span class="n-help">${this.localize.term("footerEscapeKey")}</span> <span class="n-help n-backspace"><nord-icon label="Backspace key" name="${_}"></nord-icon>${this.localize.term("footerBackspaceKey")}</span></div></slot></div></div>`}renderNoResults(){return n`<div id="no-results" class="n-command-empty" role="option" aria-selected="true"><div class="n-title">${this.localize.term("noResults",this.search)}</div><div class="n-tip">${this.localize.term("tip")}</div></div>`}renderSection(e,o){const t=`section-${e}`;return n`<div role="group" aria-labelledby="${w(e,t)}">${e?n`<div class="n-group-header" role="presentation" id="${t}">${e}</div>`:i} ${d(o,(e=>e.id),(e=>{var o,t;return n`<nord-command-menu-action id="${e.id}" .command="${e}" ?selected="${this.open&&e.id===(null===(o=this.selected)||void 0===o?void 0:o.id)}" @click="${()=>this.select(e)}" role="option" aria-selected="${w(e.id===(null===(t=this.selected)||void 0===t?void 0:t.id),"true")}"></nord-command-menu-action>`}))}</div>`}handleCommandsChange(){this.keyboardController.registerCommandShortcuts()}handleBump(){this.open&&(this.bump=!0)}focusOnOpen(){this.open&&(this.previousFocus=L(document),this.focus(),this.listRef.value&&(this.listRef.value.scrollTop=0))}handleAnimationEnd(){this.bump=!1}handleBlur(){this.open&&this.focus()}handleInput(e){const o=e.target;this.setSearch(o.value)}select(e=this.selected){var o;this.commands.some((o=>o.parent===e.id))?(this.setParent(e.id),this.bump=!0,this.focus()):this.close(),this.setSearch(""),null===(o=e.handler)||void 0===o||o.call(e,this);const t=new x(e);this.dispatchEvent(t)}start(){this.selectedIndex=0}end(){this.selectedIndex=this.filteredCommands.length-1}next(){this.selectedIndex=v(this.selectedIndex+1,0,this.filteredCommands.length-1)}previous(){this.selectedIndex=v(this.selectedIndex-1,0,this.filteredCommands.length-1)}goBack(){if(!this.search&&this.parent){const e=this.commands.find((e=>e.id===this.parent));this.setParent(null==e?void 0:e.parent)}}setParent(e){this.parent=e,this.setSearch("")}setSearch(e){this.search=e,this.selectedIndex=0}filterCommands(){const e=this.search.toLocaleLowerCase().split(/\s+/);this.filteredCommands=this.commands.filter((({title:o,keywords:t="",parent:n})=>{const i=`${o} ${t}`.toLocaleLowerCase(),s=e.every((e=>i.includes(e)));return(!this.parent&&this.search||n==this.parent)&&s}))}};E.styles=[y,B],o([r({type:Boolean})],E.prototype,"open",void 0),o([r({type:String})],E.prototype,"placeholder",void 0),o([r({type:Array,attribute:!1})],E.prototype,"commands",void 0),o([a()],E.prototype,"parent",void 0),o([a()],E.prototype,"search",void 0),o([a()],E.prototype,"bump",void 0),o([a()],E.prototype,"selectedIndex",void 0),o([a()],E.prototype,"filteredCommands",void 0),o([z("commands")],E.prototype,"handleCommandsChange",null),o([z("open")],E.prototype,"handleBump",null),o([z("open","updated")],E.prototype,"focusOnOpen",null),o([z("search"),z("parent"),z("commands")],E.prototype,"filterCommands",null),E=o([s("nord-command-menu")],E);var R=E;export{R as default};
2
2
  //# sourceMappingURL=CommandMenu.js.map