@nordhealth/components 1.8.1 → 1.8.3

package/lib/Button.js

@@ -1,2 +1,2 @@
-import{_ as t,n as o}from"./query-assigned-elements-ef860822.js";import{r as n,$ as r,w as e,s as a}from"./lit-element-67e6cd99.js";import{e as s}from"./property-03f59dce.js";import{e as i,n as l}from"./ref-57ff8ffc.js";import{E as b}from"./EventController-d99ebeef.js";import{L as d}from"./LightDomController-6d26dea2.js";import{c}from"./cond-97c45476.js";import{F as u}from"./FocusableMixin-175ea4d7.js";import{I as h}from"./InputMixin-9334d385.js";import{s as p}from"./Component-a61df53a.js";import"./directive-de55b00a.js";const v=n`:host{display:inline-block}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-button-background-color,var(--n-color-button));border-radius:var(--n-button-border-radius,var(--n-border-radius-s));border:1px var(--n-button-border-style,solid) var(--n-button-border-color,var(--n-color-border-strong));box-shadow:var(--n-button-box-shadow,var(--n-box-shadow));color:var(--n-button-color,var(--n-color-text));cursor:pointer;display:flex;gap:var(--n-button-gap,var(--n-space-s));font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-button-font-size,var(--n-font-size-m));font-weight:var(--n-button-font-weight,var(--n-font-weight));line-height:var(--n-line-height-form);margin:0;min-block-size:var(--n-button-min-height,var(--n-space-xl));padding:var(--n-button-padding-y,calc(var(--n-space-s)/ 1.6)) var(--n-button-padding-x,calc(var(--n-space-m)/ 1.2));text-align:var(--n-button-text-align,center);text-decoration:none;transition:.1s ease;transition-property:background-color,opacity,color,box-shadow;-webkit-user-select:none;user-select:none;position:relative;inline-size:var(--n-button-width,fit-content)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--n-button-gradient,linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%));background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--n-button-width:100%;display:block}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-button:focus{--n-button-border-color:var(--n-color-accent);--n-button-border-style:solid;--n-button-box-shadow:0 0 0 1px var(--n-button-border-color);outline:0}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--n-button-background-color:var(--n-color-accent);--n-button-border-color:transparent;--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]) .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=primary]) .n-button:hover{--n-button-border-color:transparent;--n-button-background-color:var(--n-color-accent);filter:brightness(93%)}:host([variant=dashed]){--n-button-color:var(--n-color-text-weaker);--n-button-border-color:var(--n-color-border-hover);--n-button-border-style:dashed;--n-button-box-shadow:none}:host([variant=dashed]) .n-button:hover{--n-button-color:var(--n-color-text)}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--n-button-border-color:transparent;--n-button-box-shadow:none}:host([variant=plain]) .n-button:hover{--n-button-border-color:transparent}:host([variant=plain]) .n-button:focus{--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--n-button-background-color:var(--n-color-status-danger);--n-button-border-color:transparent;--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]) .n-button:focus{--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=danger]) .n-button:hover{--n-button-border-color:transparent;--n-button-background-color:var(--n-color-status-danger);filter:brightness(93%)}:host([variant=switch]){--n-button-border-color:transparent;--n-button-color:var(--n-color-text);--n-button-font-weight:var(--n-font-weight-heading);--n-button-box-shadow:none;--n-button-min-height:calc(var(--n-space-xxl) - 1px);--n-button-text-align:left;--n-button-font-size:var(--n-font-size-l);--n-button-border-radius:var(--n-border-radius-sharp);--n-button-background-color:transparent;--n-button-padding-x: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:transparent;--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([disabled]){--n-button-background-color:var(--n-color-border);--n-button-box-shadow:none;--n-button-border-color:var(--n-button-background-color);--n-button-color:var(--n-color-text-weaker);opacity:.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}:host([size="s"]){--n-button-font-size:var(--n-font-size-s);--n-button-min-height:var(--n-space-l);--n-button-padding-y:calc(var(--n-space-s) / 1.5);--n-button-padding-x:var(--n-space-s);--n-button-gap:calc(var(--n-space-s) / 2)}:host([size="s"]) .n-button{line-height:var(--n-line-height-tight)}:host([size="l"]){--n-button-border-radius:var(--n-border-radius);--n-button-font-size:var(--n-font-size-l);--n-button-min-height:calc(var(--n-space-xxl) - var(--n-space-l));--n-button-padding-x:calc(var(--n-space-l) / 1.3);--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}`;let f=class extends(h(u(a))){constructor(){super(...arguments),this.buttonRef=i(),this.events=new b(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.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"click",this.handleOuterClick,!0)}render(){const t=r`<slot name="start"></slot><div class="n-content"><slot></slot></div><slot name="end"></slot>`;return this.href?this.renderLink(t):this.renderButton(t)}renderLink(t){return r`<a ${l(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${c(this.disabled,e,this.href)}" tabindex="${c(this.disabled,"-1")}" aria-disabled="${c(this.disabled,"true")}" role="${c(this.disabled,"link")}">${t}</a>`}renderButton(t){return r`<slot name="proxy"></slot><button ${l(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${c(this.name)}" value="${c(this.value)}" @click="${this.handleClick}" aria-expanded="${c(this.accessibleExpanded)}" aria-haspopup="${c(this.accessibleHasPopup)}">${t}</button>`}renderLightDom(){return this.href||!this.form?e:r`<button ${l(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())}};f.styles=[p,v],t([s({reflect:!0})],f.prototype,"variant",void 0),t([s({reflect:!0})],f.prototype,"type",void 0),t([s({reflect:!0})],f.prototype,"size",void 0),t([s({attribute:"aria-expanded"})],f.prototype,"accessibleExpanded",void 0),t([s({attribute:"aria-haspopup"})],f.prototype,"accessibleHasPopup",void 0),t([s({reflect:!0})],f.prototype,"href",void 0),t([s({type:Boolean})],f.prototype,"download",void 0),t([s({reflect:!0})],f.prototype,"target",void 0),t([s({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),f=t([o("nord-button")],f);var g=f;export{g as default};
+import{_ as t,n as o}from"./query-assigned-elements-ef860822.js";import{r as n,$ as r,w as e,s as a}from"./lit-element-67e6cd99.js";import{e as s}from"./property-03f59dce.js";import{e as i,n as l}from"./ref-57ff8ffc.js";import{E as b}from"./EventController-d99ebeef.js";import{L as d}from"./LightDomController-6d26dea2.js";import{c}from"./cond-97c45476.js";import{F as u}from"./FocusableMixin-175ea4d7.js";import{I as h}from"./InputMixin-9334d385.js";import{s as p}from"./Component-a61df53a.js";import"./directive-de55b00a.js";const v=n`:host{display:inline-block}.n-button{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-button-background-color,var(--n-color-button));border-radius:var(--n-button-border-radius,var(--n-border-radius-s));border:1px var(--n-button-border-style,solid) var(--n-button-border-color,var(--n-color-border-strong));box-shadow:var(--n-button-box-shadow,var(--n-box-shadow));color:var(--n-button-color,var(--n-color-text));cursor:pointer;display:flex;gap:var(--n-button-gap,var(--n-space-s));font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-button-font-size,var(--n-font-size-m));font-weight:var(--n-button-font-weight,var(--n-font-weight));line-height:var(--n-line-height-form);margin:0;min-block-size:var(--n-button-min-height,var(--n-space-xl));padding:var(--n-button-padding-y,calc(var(--n-space-s)/ 1.6)) var(--n-button-padding-x,calc(var(--n-space-m)/ 1.2));text-align:var(--n-button-text-align,center);text-decoration:none;transition:.1s ease;transition-property:background-color,opacity,color,box-shadow;-webkit-user-select:none;user-select:none;position:relative;inline-size:var(--n-button-width,fit-content)}.n-button::after{content:"";position:absolute;background:0 0;background-image:var(--n-button-gradient,linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%));background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--n-button-width:100%;display:block}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-button:focus{--n-button-border-color:var(--n-color-accent);--n-button-border-style:solid;--n-button-box-shadow:0 0 0 1px var(--n-button-border-color);outline:0}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--n-button-background-color:var(--n-color-accent);--n-button-border-color:transparent;--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]) .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=primary]) .n-button:hover{--n-button-border-color:transparent;--n-button-background-color:var(--n-color-accent);filter:brightness(93%)}:host([variant=dashed]){--n-button-color:var(--n-color-text-weaker);--n-button-border-color:var(--n-color-border-hover);--n-button-border-style:dashed;--n-button-box-shadow:none}:host([variant=dashed]) .n-button:hover{--n-button-color:var(--n-color-text)}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--n-button-border-color:transparent;--n-button-box-shadow:none}:host([variant=plain]) .n-button:hover{--n-button-border-color:transparent}:host([variant=plain]) .n-button:focus{--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--n-button-background-color:var(--n-color-status-danger);--n-button-border-color:transparent;--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]) .n-button:focus{--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=danger]) .n-button:hover{--n-button-border-color:transparent;--n-button-background-color:var(--n-color-status-danger);filter:brightness(93%)}:host([variant=switch]){--n-button-border-color:transparent;--n-button-color:var(--n-color-text);--n-button-font-weight:var(--n-font-weight-heading);--n-button-box-shadow:none;--n-button-min-height:calc(var(--n-space-xxl) - 1px);--n-button-text-align:left;--n-button-font-size:var(--n-font-size-l);--n-button-border-radius:var(--n-border-radius-sharp);--n-button-background-color:transparent;--n-button-padding-x: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:transparent;--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([disabled]){--n-button-background-color:var(--n-color-border);--n-button-box-shadow:none;--n-button-border-color:var(--n-button-background-color);--n-button-color:var(--n-color-text-weaker);opacity:.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}:host([size="s"]){--n-button-font-size:var(--n-font-size-s);--n-button-min-height:var(--n-space-l);--n-button-padding-y:calc(var(--n-space-s) / 1.5);--n-button-padding-x:var(--n-space-s);--n-button-gap:calc(var(--n-space-s) / 2)}:host([size="s"]) .n-button{line-height:var(--n-line-height-tight)}:host([size="l"]){--n-button-border-radius:var(--n-border-radius);--n-button-font-size:var(--n-font-size-l);--n-button-min-height:calc(var(--n-space-xxl) - var(--n-space-l));--n-button-padding-x:calc(var(--n-space-l) / 1.3);--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}`;let f=class extends(h(u(a))){constructor(){super(...arguments),this.buttonRef=i(),this.events=new b(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.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"click",this.handleOuterClick,!0)}render(){const t=r`<slot name="start"></slot><div class="n-content"><slot></slot></div><slot name="end"></slot>`;return this.href?this.renderLink(t):this.renderButton(t)}renderLink(t){return r`<a ${l(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${c(this.disabled,e,this.href)}" tabindex="${c(this.disabled,"-1")}" aria-disabled="${c(this.disabled,"true")}" role="${c(this.disabled,"link")}">${t}</a>`}renderButton(t){return r`<slot name="proxy" @slotchange="${this.handleProxyChange}"></slot><button ${l(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${c(this.name)}" value="${c(this.value)}" @click="${this.handleClick}" aria-expanded="${c(this.accessibleExpanded)}" aria-haspopup="${c(this.accessibleHasPopup)}">${t}</button>`}renderLightDom(){return this.href||!this.form?e:r`<button ${l(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(){const t=this.buttonRef.value;t&&!t.isConnected&&this.appendChild(t)}};f.styles=[p,v],t([s({reflect:!0})],f.prototype,"variant",void 0),t([s({reflect:!0})],f.prototype,"type",void 0),t([s({reflect:!0})],f.prototype,"size",void 0),t([s({attribute:"aria-expanded"})],f.prototype,"accessibleExpanded",void 0),t([s({attribute:"aria-haspopup"})],f.prototype,"accessibleHasPopup",void 0),t([s({reflect:!0})],f.prototype,"href",void 0),t([s({type:Boolean})],f.prototype,"download",void 0),t([s({reflect:!0})],f.prototype,"target",void 0),t([s({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),f=t([o("nord-button")],f);var g=f;export{g as default};
 //# sourceMappingURL=Button.js.map

package/lib/Button.js.map

@@ -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 { 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@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  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      <slot name=\"end\"></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\"></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-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\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","handleOuterClick","e","composedPath","some","node","focusableRef","value","stopPropagation","connectedCallback","super","listen","innards","html","href","renderLink","renderButton","ref","cond","disabled","nothing","name","handleClick","accessibleExpanded","accessibleHasPopup","form","getAttribute","click","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","Boolean","customElement"],"mappings":"06LAwBA,IAAqBA,EAArB,cAAoCC,EAAWC,EAAeC,KAA9DC,kCAGUC,KAASC,UAAGC,IACZF,KAAAG,OAAS,IAAIC,EAAgBJ,MAC7BA,KAAAK,SAAW,IAAIC,EAAmBN,KAAM,CAC9CO,OAAQ,IAAMP,KAAKQ,mBAMQR,KAAOS,QAAqE,UAK5ET,KAAIU,KAAkC,SAMtCV,KAAIW,KAAoB,IAmCxBX,KAAQY,UAAG,EAWXZ,KAAMa,OAA4C,QAKnCb,KAAMc,QAAG,EA8E7Cd,KAAAe,iBAAoBC,IAIDA,EACtBC,eACAC,MAAKC,GAAQA,IAASnB,KAAKoB,aAAaC,OAASF,IAASnB,KAAKC,UAAUoB,SAG1EL,EAAEM,mBArFNC,oBACEC,MAAMD,oBACNvB,KAAKG,OAAOsB,OAAOzB,KAAM,QAASA,KAAKe,kBAAkB,GAG3DR,SACE,MAAMmB,EAAUC,CAAI,+FAQpB,OAAO3B,KAAK4B,KAAO5B,KAAK6B,WAAWH,GAAW1B,KAAK8B,aAAaJ,GAU1DG,WAAWH,GACjB,OAAOC,CAAI,MAELI,EAAI/B,KAAKoB,0CAEFpB,KAAKa,sBACFb,KAAKY,mBACVoB,EAAKhC,KAAKiC,SAAUC,EAASlC,KAAK4B,oBAC9BI,EAAKhC,KAAKiC,SAAU,yBACfD,EAAKhC,KAAKiC,SAAU,kBAC7BD,EAAKhC,KAAKiC,SAAU,YACxBP,QAKDI,aAAaJ,GACnB,OAAOC,CAAI,qCAGLI,EAAI/B,KAAKoB,6CAECpB,KAAKiC,mBACVD,EAAKhC,KAAKmC,iBACTH,EAAKhC,KAAKqB,mBACTrB,KAAKoC,+BACEJ,EAAKhC,KAAKqC,uCACVL,EAAKhC,KAAKsC,wBAExBZ,aAKAlB,iBACN,OAAIR,KAAK4B,OAAS5B,KAAKuC,KACdL,EAGFP,CAAI,WAELI,EAAI/B,KAAKC,iCAEJ+B,EAAKhC,KAAKmC,iBACTH,EAAKhC,KAAKqB,sBACNrB,KAAKiC,mBACVD,EAAKhC,KAAKwC,aAAa,mBACvBxC,KAAKU,kBAkBV0B,YAAYpB,GACdhB,KAAKC,UAAUoB,QAEjBL,EAAEM,kBACFtB,KAAKC,UAAUoB,MAAMoB,WAxKlB9C,EAAA+C,OAAS,CAACC,EAAgBC,GAWJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6FpD,EAAAqD,UAAA,eAAA,GAKrFH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsDpD,EAAAqD,UAAA,YAAA,GAM9CH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCpD,EAAAqD,UAAA,YAAA,GAQdH,EAAA,CAAzCC,EAAS,CAAEG,UAAW,mBAAwDtD,EAAAqD,UAAA,0BAAA,GAQrCH,EAAA,CAAzCC,EAAS,CAAEG,UAAW,mBAOXtD,EAAAqD,UAAA,0BAAA,GAMiBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBpD,EAAAqD,UAAA,YAAA,GAMbH,EAAA,CAA5BC,EAAS,CAAEpC,KAAMwC,WAA2BvD,EAAAqD,UAAA,gBAAA,GAWhBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiEpD,EAAAqD,UAAA,cAAA,GAK1CH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMrC,KAAMwC,WAAyBvD,EAAAqD,UAAA,cAAA,GA1EvCrD,EAAMkD,EAAA,CAD1BM,EAAc,gBACMxD,SAAAA"}
+{"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 { 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@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  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      <slot name=\"end\"></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-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() {\n    const proxyButton = this.buttonRef.value\n\n    if (proxyButton && !proxyButton.isConnected) {\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","handleOuterClick","e","composedPath","some","node","focusableRef","value","stopPropagation","connectedCallback","super","listen","innards","html","href","renderLink","renderButton","ref","cond","disabled","nothing","handleProxyChange","name","handleClick","accessibleExpanded","accessibleHasPopup","form","getAttribute","click","proxyButton","isConnected","appendChild","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","Boolean","customElement"],"mappings":"06LAwBA,IAAqBA,EAArB,cAAoCC,EAAWC,EAAeC,KAA9DC,kCAGUC,KAASC,UAAGC,IACZF,KAAAG,OAAS,IAAIC,EAAgBJ,MAC7BA,KAAAK,SAAW,IAAIC,EAAmBN,KAAM,CAC9CO,OAAQ,IAAMP,KAAKQ,mBAMQR,KAAOS,QAAqE,UAK5ET,KAAIU,KAAkC,SAMtCV,KAAIW,KAAoB,IAmCxBX,KAAQY,UAAG,EAWXZ,KAAMa,OAA4C,QAKnCb,KAAMc,QAAG,EA8E7Cd,KAAAe,iBAAoBC,IAIDA,EACtBC,eACAC,MAAKC,GAAQA,IAASnB,KAAKoB,aAAaC,OAASF,IAASnB,KAAKC,UAAUoB,SAG1EL,EAAEM,mBArFNC,oBACEC,MAAMD,oBACNvB,KAAKG,OAAOsB,OAAOzB,KAAM,QAASA,KAAKe,kBAAkB,GAG3DR,SACE,MAAMmB,EAAUC,CAAI,+FAQpB,OAAO3B,KAAK4B,KAAO5B,KAAK6B,WAAWH,GAAW1B,KAAK8B,aAAaJ,GAU1DG,WAAWH,GACjB,OAAOC,CAAI,MAELI,EAAI/B,KAAKoB,0CAEFpB,KAAKa,sBACFb,KAAKY,mBACVoB,EAAKhC,KAAKiC,SAAUC,EAASlC,KAAK4B,oBAC9BI,EAAKhC,KAAKiC,SAAU,yBACfD,EAAKhC,KAAKiC,SAAU,kBAC7BD,EAAKhC,KAAKiC,SAAU,YACxBP,QAKDI,aAAaJ,GACnB,OAAOC,CAAI,mCACwB3B,KAAKmC,qCAElCJ,EAAI/B,KAAKoB,6CAECpB,KAAKiC,mBACVD,EAAKhC,KAAKoC,iBACTJ,EAAKhC,KAAKqB,mBACTrB,KAAKqC,+BACEL,EAAKhC,KAAKsC,uCACVN,EAAKhC,KAAKuC,wBAExBb,aAKAlB,iBACN,OAAIR,KAAK4B,OAAS5B,KAAKwC,KACdN,EAGFP,CAAI,WAELI,EAAI/B,KAAKC,iCAEJ+B,EAAKhC,KAAKoC,iBACTJ,EAAKhC,KAAKqB,sBACNrB,KAAKiC,mBACVD,EAAKhC,KAAKyC,aAAa,mBACvBzC,KAAKU,kBAkBV2B,YAAYrB,GACdhB,KAAKC,UAAUoB,QAEjBL,EAAEM,kBACFtB,KAAKC,UAAUoB,MAAMqB,SAQjBP,oBACN,MAAMQ,EAAc3C,KAAKC,UAAUoB,MAE/BsB,IAAgBA,EAAYC,aAC9B5C,KAAK6C,YAAYF,KApLdhD,EAAAmD,OAAS,CAACC,EAAgBC,GAWJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6FxD,EAAAyD,UAAA,eAAA,GAKrFH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsDxD,EAAAyD,UAAA,YAAA,GAM9CH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmCxD,EAAAyD,UAAA,YAAA,GAQdH,EAAA,CAAzCC,EAAS,CAAEG,UAAW,mBAAwD1D,EAAAyD,UAAA,0BAAA,GAQrCH,EAAA,CAAzCC,EAAS,CAAEG,UAAW,mBAOX1D,EAAAyD,UAAA,0BAAA,GAMiBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBxD,EAAAyD,UAAA,YAAA,GAMbH,EAAA,CAA5BC,EAAS,CAAExC,KAAM4C,WAA2B3D,EAAAyD,UAAA,gBAAA,GAWhBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiExD,EAAAyD,UAAA,cAAA,GAK1CH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMzC,KAAM4C,WAAyB3D,EAAAyD,UAAA,cAAA,GA1EvCzD,EAAMsD,EAAA,CAD1BM,EAAc,gBACM5D,SAAAA"}

package/lib/{Calendar-a59d353e.js → Calendar-e5fc9c3b.js}

@@ -1,2 +1,2 @@
 import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as a,s as n,$ as o}from"./lit-element-67e6cd99.js";import{e as i}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{c as l}from"./repeat-084c4167.js";import{o as d}from"./tinykeys.module-84e6cc41.js";import"./Button.js";import"./VisuallyHidden.js";import c from"./Icon.js";import{E as h}from"./EventController-d99ebeef.js";import{D as u}from"./DirectionController-8b298382.js";import{LocalizeController as p}from"./LocalizeController.js";import{r as v}from"./number-c3ab3e95.js";import{i as m,p as f,a as g,s as y,e as b,b as x,g as w,c as D,d as z,f as k,h as F,j as M,k as S,l as Y}from"./dates-a8de5b83.js";import{o as $}from"./observe-a9c6dfb6.js";import{monthView as j}from"./month-view.js";import{DateSelectEvent as C}from"./DateSelectEvent.js";import{s as L}from"./Component-a61df53a.js";var N=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 T=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 O=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 _=e=>e.preventDefault();class I{constructor(e,t){this.hadFirstUpdate=!1,this.initialTouchX=0,this.initialTouchY=0,this.handleTouchStart=e=>{const[{pageX:t,pageY:a}]=e.changedTouches;this.initialTouchX=t,this.initialTouchY=a},this.handleTouchEnd=e=>{const[{pageX:t,pageY:a}]=e.changedTouches,{matchesGesture:n,onSwipeEnd:o}=this.options,i=t-this.initialTouchX,s=a-this.initialTouchY,r={initialX:this.initialTouchX,initialY:this.initialTouchY,pageX:t,pageY:a,distX:i,distY:s};n(r)&&(e.preventDefault(),o(r))},e.addController(this),this.events=new h(e),this.options={target:()=>e,...t}}hostUpdated(){if(!this.hadFirstUpdate){this.hadFirstUpdate=!0;const e=this.options.target();this.events.listen(e,"touchstart",this.handleTouchStart),this.events.listen(e,"touchmove",_),this.events.listen(e,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}const X=({distX:e,distY:t})=>Math.abs(e)>=70&&Math.abs(t)<=70,A=({distX:e,distY:t})=>Math.abs(t)>=70&&Math.abs(e)<=70&&t>0,E=a`:host{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,var(--n-box-shadow-popout));border-radius:var(--n-border-radius-s);max-inline-size:310px;min-inline-size:290px;padding:var(--n-calendar-padding,16px 16px 20px)}:host([expand]) .n-calendar{max-inline-size:100%;inline-size:100%}@media (max-width:35.9375em){.n-calendar{max-inline-size:100%}}.n-calendar-table{border-collapse:collapse;border-spacing:0;color:var(--n-color-text);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-date-picker-line-height);text-align:center;inline-size:100%}.n-calendar-table-header{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);letter-spacing:1px;line-height:var(--n-date-picker-line-height);padding-block-end:8px;text-decoration:none;text-transform:uppercase}.n-calendar-cell{text-align:center}.n-calendar-day{-moz-appearance:none;-webkit-appearance:none;appearance:none;background:0 0;border:0;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:inline-block;font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-variant-numeric:tabular-nums;font-weight:var(--n-font-weight);block-size:36px;padding:0 0 1px;position:relative;text-align:center;vertical-align:middle;inline-size:36px;z-index:1}.n-calendar-day[aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link);position:relative;z-index:200}.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);z-index:200}.n-calendar-day:focus{box-shadow:0 0 5px var(--n-color-accent);z-index:200}.n-calendar-day:not(.is-month){box-shadow:none}.n-calendar-day:not(.is-month),.n-calendar-day[aria-disabled=true]{background:0 0;color:var(--n-color-text-weakest);cursor:default}.n-calendar-day[aria-disabled=true]{color:var(--n-color-text-weaker);text-decoration:line-through}.n-calendar-day:not(.is-month)[aria-disabled=true]{color:var(--n-color-text-weakest);text-decoration:none}.n-calendar-day[aria-disabled=true][aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link)}.n-calendar-day[aria-disabled=true][aria-current=date]:focus{box-shadow:0 0 5px var(--n-color-accent);background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-calendar-day[aria-disabled=true]:not([aria-current=date])::before{display:none}.n-calendar-day.is-outside{background:0 0;box-shadow:none;color:var(--n-color-text-weakest);cursor:default;pointer-events:none}.n-calendar-day.is-outside::before{display:none}.n-calendar-header{align-items:start;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-calendar-nav{white-space:nowrap}.n-calendar-nav nord-button{--n-button-padding-x:11px;margin-inline-start:calc(var(--n-space-s)/ 2)}.n-calendar-select{display:inline-flex;margin-block-start:4px;position:relative;line-height:var(--n-line-height)}.n-calendar-select span{margin-inline-end:var(--n-space-s)}.n-calendar-select select{cursor:pointer;font-size:var(--n-font-size-l);block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.n-calendar-select select:focus+.n-calendar-select-label{box-shadow:0 0 0 2px var(--n-color-accent)}.n-calendar-select-label{align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);display:flex;font-size:var(--n-font-size-xl);font-weight:var(--n-font-weight-active);line-height:var(--n-date-picker-line-height);padding:0 4px 0 8px;pointer-events:none;position:relative;inline-size:100%;z-index:1;text-transform:capitalize}`;c.registerIcon(N),c.registerIcon(T),c.registerIcon(O);const W=e=>t=>{t.preventDefault(),e(t)},U=()=>!1;let B=class extends n{constructor(){super(...arguments),this.dialogLabelId="dialog-header",this.direction=new u(this),this.swipe=new I(this,{matchesGesture:X,onSwipeEnd:({distX:e})=>this.addMonths(e<0?1:-1)}),this.shortcuts=d({ArrowRight:W((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:W((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:W((()=>this.addDays(7))),ArrowUp:W((()=>this.addDays(-7))),Home:W((()=>this.startOfWeek())),End:W((()=>this.endOfWeek())),PageUp:W((()=>this.addMonths(-1))),PageDown:W((()=>this.addMonths(1))),"Shift+PageUp":W((()=>this.addYears(-1))),"Shift+PageDown":W((()=>this.addYears(1)))}),this.localize=new p(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=1,this.min="",this.max="",this.expand=!1,this.isDateDisabled=U,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=e=>{const t=m(e,f(this.min),f(this.max)),a=!this.isDateDisabled(e);t&&a&&(this.value=g(e),this.dispatchEvent(new C("change",e)))},this.handleMonthSelect=e=>{this.setMonth(parseInt(e.target.value,10))},this.handleYearSelect=e=>{this.setYear(parseInt(e.target.value,10))},this.handleNextMonthClick=e=>{e.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=e=>{e.preventDefault(),this.addMonths(-1)},this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=()=>{this.activeFocus=!1}}focus(e){var t;const a=null!==(t=null==e?void 0:e.target)&&void 0!==t?t:"day";"day"===a?this.focusedDayNode.focus():"month"===a&&this.monthSelectNode.focus()}render(){const e=f(this.value),t=this.focusedDay.getMonth(),a=this.focusedDay.getFullYear(),n=f(this.min),i=f(this.max),s=n?y(n):void 0,r=i?b(i):void 0,d=(e||this.focusedDay).getFullYear(),c=n?n.getFullYear():d-10,h=i?i.getFullYear():d+10;return o`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${this.dialogLabelId}" aria-live="polite" aria-atomic="true">${this.monthNames[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,n)=>o`<option value="${n}" ?selected="${n===t}" ?disabled="${!m(new Date(a,n,1),s,r)}">${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="xs"></nord-icon></div></div><div class="n-calendar-select"><select aria-label="${this.localize.term("yearSelectLabel")}" class="n-calendar-select-year" @input="${this.handleYearSelect}">${l(v(c,h),(e=>e),(e=>o`<option ?selected="${e===a}">${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="xs"></nord-icon></div></div></div><div class="n-calendar-nav"><nord-button class="n-calendar-prev" @click="${this.handlePreviousMonthClick}" ?disabled="${x(n,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("prevMonthLabel")}</nord-visually-hidden><nord-icon color="var(--n-color-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="${x(i,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("nextMonthLabel")}</nord-visually-hidden><nord-icon color="var(--n-color-icon)" name="${this.direction.isLTR?"arrow-right-small":"arrow-left-small"}" size="s"></nord-icon></nord-button></div></div>${j({onFocusOut:this.disableActiveFocus,onFocusIn:this.enableActiveFocus,dateFormatter:this.dateFormatShort,selectedDate:e,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.shortcuts,labelledById:this.dialogLabelId,dayNames:this.dayNames,dayNamesShort:this.dayNamesShort,firstDayOfWeek:this.firstDayOfWeek,min:n,max:i,isDateDisabled:this.isDateDisabled})}</div>`}handleValueChange(){this.setFocusedDay(f(this.value)||new Date)}handleFocusedDayChange(){this.activeFocus&&this.focusedDayNode.focus()}handleLangChange(){const e=this.localize.resolvedLang;this.dateFormatShort=new Intl.DateTimeFormat(e,{day:"numeric",month:"long"}),this.monthNames=w(e,"long"),this.monthNamesShort=w(e,"short"),this.dayNames=D(e,"long"),this.dayNamesShort=D(e,"narrow")}addDays(e){this.setFocusedDay(z(this.focusedDay,e))}addMonths(e){this.setMonth(this.focusedDay.getMonth()+e)}addYears(e){this.setYear(this.focusedDay.getFullYear()+e)}startOfWeek(){this.setFocusedDay(k(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(F(this.focusedDay,this.firstDayOfWeek))}setMonth(e){const t=M(y(this.focusedDay),e),a=b(t),n=M(this.focusedDay,e);this.setFocusedDay(S(n,t,a))}setYear(e){const t=Y(y(this.focusedDay),e),a=b(t),n=Y(this.focusedDay,e);this.setFocusedDay(S(n,t,a))}setFocusedDay(e){this.focusedDay=S(e,f(this.min),f(this.max)),this.dispatchEvent(new C("nord-focus-date",this.focusedDay))}};B.styles=[L,E],e([r(".n-calendar-select-month",!0)],B.prototype,"monthSelectNode",void 0),e([r('button[tabindex="0"]')],B.prototype,"focusedDayNode",void 0),e([i()],B.prototype,"value",void 0),e([i({type:Number})],B.prototype,"firstDayOfWeek",void 0),e([i()],B.prototype,"min",void 0),e([i()],B.prototype,"max",void 0),e([i({reflect:!0,type:Boolean})],B.prototype,"expand",void 0),e([i({attribute:!1})],B.prototype,"isDateDisabled",void 0),e([s()],B.prototype,"activeFocus",void 0),e([s()],B.prototype,"focusedDay",void 0),e([$("value")],B.prototype,"handleValueChange",null),e([$("focusedDay","updated")],B.prototype,"handleFocusedDayChange",null),B=e([t("nord-calendar")],B);var P=B;export{P as C,I as S,A as i};
-//# sourceMappingURL=Calendar-a59d353e.js.map
+//# sourceMappingURL=Calendar-e5fc9c3b.js.map

package/lib/{Calendar-a59d353e.js.map → Calendar-e5fc9c3b.js.map}

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

package/lib/Calendar.js

@@ -1,2 +1,2 @@
-import"./query-assigned-elements-ef860822.js";import"./lit-element-67e6cd99.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";import"./query-2d22378e.js";import"./repeat-084c4167.js";import"./tinykeys.module-84e6cc41.js";export{C as default}from"./Calendar-a59d353e.js";import"./Button.js";import"./VisuallyHidden.js";import"./Icon.js";import"./DirectionController-8b298382.js";import"./LocalizeController.js";import"./number-c3ab3e95.js";import"./dates-a8de5b83.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./DateSelectEvent.js";import"./Component-a61df53a.js";import"./directive-de55b00a.js";import"./ref-57ff8ffc.js";import"./EventController-d99ebeef.js";import"./LightDomController-6d26dea2.js";import"./cond-97c45476.js";import"./FocusableMixin-175ea4d7.js";import"./InputMixin-9334d385.js";import"./if-defined-fe1a64e3.js";import"./unsafe-html-61a04601.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./class-map-f1b6f1fa.js";import"./collection-800f5002.js";import"./events-731d0007.js";
+import"./query-assigned-elements-ef860822.js";import"./lit-element-67e6cd99.js";import"./property-03f59dce.js";import"./state-70f38ceb.js";import"./query-2d22378e.js";import"./repeat-084c4167.js";import"./tinykeys.module-84e6cc41.js";export{C as default}from"./Calendar-e5fc9c3b.js";import"./Button.js";import"./VisuallyHidden.js";import"./Icon.js";import"./DirectionController-8b298382.js";import"./LocalizeController.js";import"./number-c3ab3e95.js";import"./dates-a8de5b83.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./DateSelectEvent.js";import"./Component-a61df53a.js";import"./directive-de55b00a.js";import"./ref-57ff8ffc.js";import"./EventController-d99ebeef.js";import"./LightDomController-6d26dea2.js";import"./cond-97c45476.js";import"./FocusableMixin-175ea4d7.js";import"./InputMixin-9334d385.js";import"./if-defined-fe1a64e3.js";import"./unsafe-html-61a04601.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./class-map-f1b6f1fa.js";import"./collection-800f5002.js";import"./events-731d0007.js";
 //# sourceMappingURL=Calendar.js.map

package/lib/DatePicker.js

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as i,$ as o,w as a,s as n}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-f1b6f1fa.js";import{n as c}from"./ref-57ff8ffc.js";import{l as p}from"./if-defined-fe1a64e3.js";import{F as m}from"./FocusableMixin-175ea4d7.js";import{F as h}from"./FormAssociatedMixin-d3124755.js";import{I as u}from"./InputMixin-9334d385.js";import{m as v,p as g,a as b}from"./dates-a8de5b83.js";import{N as f}from"./events-731d0007.js";import{S as y,i as w}from"./Calendar-a59d353e.js";import{L as x}from"./LightDismissController-a2645ae6.js";import{LocalizeController as j}from"./LocalizeController.js";import"./Button.js";import k from"./Icon.js";import"./VisuallyHidden.js";import{s as z}from"./Component-a61df53a.js";import{s as $}from"./FormField-d3767c2e.js";import{s as D}from"./TextField-93a3922f.js";import{isoAdapter as L}from"./date-adapter.js";import{c as F}from"./cond-97c45476.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./repeat-084c4167.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./LightDomController-6d26dea2.js";import"./unsafe-html-61a04601.js";var C=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z"/></svg>',title:"interface-close-small",tags:"nordicon interface close remove small cross delete erase symbol"});const B=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);position:relative}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-dropdown)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-dropdown)}nord-calendar{box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding:0}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0;z-index:10}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`;k.registerIcon(C),k.registerIcon(A);const E=/[^0-9./-]+/g,I=()=>!1;let O=class extends(h(u(m(n)))){constructor(){super(...arguments),this.dismiss=new x(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new y(this,{target:()=>this.dialog,matchesGesture:w,onSwipeEnd:()=>this.hide(!1)}),this.localize=new j(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=I,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new f("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new f("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,o=e.selectionStart,a=i.slice(0,o),n=i.slice(o,i.length),r=a.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,E),this.dispatchEvent(new f("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return g(this.value)}set valueAsDate(e){this.value=e?b(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?b(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new f("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new f("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return o`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${p(this.name)}" .value="${t}" placeholder="${p(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${c(this.focusableRef)} aria-invalid="${F(this.error,"true")}" aria-describedby="${p(this.getDescribedBy())}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:a}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localize.term("modalHeading")}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?b(e):"",this.dispatchEvent(new f("change"))}};O.styles=[z,$,D,B],e([l(".n-date-toggle",!0)],O.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],O.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],O.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],O.prototype,"dialog",void 0),e([s()],O.prototype,"open",void 0),e([r()],O.prototype,"value",void 0),e([r()],O.prototype,"min",void 0),e([r()],O.prototype,"max",void 0),e([r()],O.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],O.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],O.prototype,"dateAdapter",void 0),e([r({attribute:!1})],O.prototype,"isDateDisabled",void 0),O=e([t("nord-date-picker")],O);var S=O;export{S as default};
+import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as i,$ as o,w as a,s as n}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as l}from"./query-2d22378e.js";import{o as d}from"./class-map-f1b6f1fa.js";import{n as c}from"./ref-57ff8ffc.js";import{l as p}from"./if-defined-fe1a64e3.js";import{F as m}from"./FocusableMixin-175ea4d7.js";import{F as h}from"./FormAssociatedMixin-d3124755.js";import{I as u}from"./InputMixin-9334d385.js";import{m as v,p as b,a as g}from"./dates-a8de5b83.js";import{N as f}from"./events-731d0007.js";import{S as y,i as w}from"./Calendar-e5fc9c3b.js";import{L as x}from"./LightDismissController-a2645ae6.js";import{LocalizeController as j}from"./LocalizeController.js";import"./Button.js";import k from"./Icon.js";import"./VisuallyHidden.js";import{s as z}from"./Component-a61df53a.js";import{s as $}from"./FormField-d3767c2e.js";import{s as D}from"./TextField-93a3922f.js";import{isoAdapter as L}from"./date-adapter.js";import{c as F}from"./cond-97c45476.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./repeat-084c4167.js";import"./tinykeys.module-84e6cc41.js";import"./DirectionController-8b298382.js";import"./number-c3ab3e95.js";import"./observe-a9c6dfb6.js";import"./month-view.js";import"./collection-800f5002.js";import"./DateSelectEvent.js";import"./ShortcutController-87615e31.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./LightDomController-6d26dea2.js";import"./unsafe-html-61a04601.js";var C=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 21h126v112H7zM35 7v28m70-28v28M7 63h126" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>',title:"interface-calendar",tags:"nordicon interface calendar date time day week month year"});var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z"/></svg>',title:"interface-close-small",tags:"nordicon interface close remove small cross delete erase symbol"});const B=i`:host{--n-date-picker-color-overlay:rgba(0, 0, 0, 0.8);--n-date-picker-line-height:1.25;--n-date-picker-toggle-height:34px;color:var(--n-color-text);position:relative}.n-date-toggle{-webkit-appearance:none;appearance:none;min-block-size:var(--n-date-picker-toggle-height);border-start-end-radius:var(--n-border-radius-s);border-end-end-radius:var(--n-border-radius-s);box-shadow:var(--n-box-shadow),var(--n-box-shadow);padding:1px calc(var(--n-space-m)/ 1.5) 0;color:var(--n-color-icon);cursor:pointer;background:var(--n-color-button);position:absolute;inset-inline-end:1px;inset-block-start:1px;border:0;border-inline-start:1px solid var(--n-color-border-strong);transition:color var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:35.9375em){.n-date-toggle{padding-block-start:0}}.n-date-toggle:hover{color:var(--n-color-icon-hover)}.n-date-toggle:focus{border:0;box-shadow:0 0 0 2px var(--n-color-accent);outline:0}.n-date-toggle:active{opacity:.8}.n-date-toggle:disabled{box-shadow:none;background:0 0;border:0;color:var(--n-color-text-weakest);cursor:default}.n-date-toggle::after{content:"";position:absolute;background:0 0;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,.013) 100%);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}.n-input{padding-inline-end:calc(var(--n-space-s) * 1.6 + var(--n-date-picker-toggle-height))}[role=dialog]{display:flex;font-feature-settings:var(--n-font-features-reduced);opacity:0;position:absolute;inset-block-start:100%;inset-inline-start:0;transform:scale(.98) translateZ(0) translateY(-10px);transform-origin:top right;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);visibility:hidden;will-change:transform,opacity,visibility;z-index:var(--n-index-dropdown)}@media (max-width:35.9375em){[role=dialog]{inset-block:0;position:fixed;inline-size:100%;inset-inline-end:0;min-inline-size:320px;transform:translateZ(0);transform-origin:bottom center}.n-date-dialog-content{box-shadow:var(--n-box-shadow-modal)}}[role=dialog].is-left{inset-inline:auto 0;inline-size:auto}[role=dialog][aria-hidden=false]{transition-property:transform,opacity;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.n-date-dialog-content{margin-inline-start:auto;margin-block-start:8px;position:relative;transform:none;z-index:var(--n-index-dropdown)}nord-calendar{box-shadow:var(--n-box-shadow-popup)}@media (max-width:35.9375em){.n-date-dialog-content{background:var(--n-color-background);border:0;border-radius:0;border-start-start-radius:var(--n-border-radius-s);border-start-end-radius:var(--n-border-radius-s);inset-block-end:0;inset-inline-start:0;inline-size:100%;margin:0;max-inline-size:none;min-block-size:26em;opacity:0;padding:0 8% 20px;position:absolute;transform:translateZ(0) translateY(100%);transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);visibility:hidden;will-change:transform,opacity,visibility}[role=dialog][aria-hidden=false] .n-date-dialog-content{opacity:1;transform:translateZ(0) translateY(0);visibility:visible}nord-calendar{--n-calendar-box-shadow:none;--n-calendar-padding:0}}.n-date-header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.n-date-mobile{align-items:center;border-block-end:1px solid rgba(0,0,0,.12);display:flex;justify-content:space-between;margin-block-end:20px;margin-inline-start:-10%;overflow:hidden;padding:12px 20px;position:relative;text-overflow:ellipsis;white-space:nowrap;inline-size:120%}@media (min-width:36em){.n-date-mobile{border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto}}.n-date-mobile-heading{display:inline-block;font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-active);max-inline-size:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:36em){.n-date-mobile-heading{display:none}}.n-date-close{-webkit-appearance:none;align-items:center;appearance:none;background:var(--n-color-background);border:0;border-radius:var(--n-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;block-size:var(--n-size-icon-l);inline-size:var(--n-size-icon-l);justify-content:center;padding:0;z-index:10}@media (min-width:36em){.n-date-close{opacity:0}}.n-date-close:focus{box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@media (min-width:36em){.n-date-close:focus{opacity:1}}.n-date-close svg{margin:0 auto}`;k.registerIcon(C),k.registerIcon(A);const E=/[^0-9./-]+/g,I=()=>!1;let O=class extends(h(u(m(n)))){constructor(){super(...arguments),this.dismiss=new x(this,{isOpen:()=>this.open,onDismiss:e=>this.hide("click"!==e.type),isDismissible:e=>e!==this.calendar&&e!==this.toggleButton}),this.swipe=new y(this,{target:()=>this.dialog,matchesGesture:w,onSwipeEnd:()=>this.hide(!1)}),this.localize=new j(this,{onLangChange:()=>this.createDateFormatters()}),this.open=!1,this.value="",this.min="",this.max="",this.direction="right",this.firstDayOfWeek=1,this.dateAdapter=L,this.isDateDisabled=I,this.handleDaySelect=e=>{e.stopPropagation(),this.setValue(e.date),this.hide()},this.toggleOpen=e=>{e.preventDefault(),this.open?this.hide(!1):this.show()},this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new f("blur"))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new f("focus"))},this.handleInputChange=e=>{const t=e.target;!function(e,t){const{value:i}=e,o=e.selectionStart,a=i.slice(0,o),n=i.slice(o,i.length),r=a.replace(t,""),s=r+n.replace(t,""),l=r.length;e.value=s,e.selectionStart=l,e.selectionEnd=l}(t,E),this.dispatchEvent(new f("input"));const i=this.dateAdapter.parse(t.value,v);(i||""===t.value)&&this.setValue(i)}}get valueAsDate(){return b(this.value)}set valueAsDate(e){this.value=e?g(e):""}get valueAsNumber(){var e,t;return null!==(t=null===(e=this.valueAsDate)||void 0===e?void 0:e.getTime())&&void 0!==t?t:NaN}set valueAsNumber(e){this.value=e?g(new Date(e)):""}show(){this.open=!0,this.dispatchEvent(new f("open")),this.updateComplete.then((()=>this.calendar.focus({target:"month"})))}hide(e=!0){this.open=!1,this.dispatchEvent(new f("close")),e&&this.toggleButton.focus()}render(){const{valueAsDate:e}=this,t=e?this.dateAdapter.format(e):"";return o`${this.renderLabel()}<div class="n-input-container"><input class="n-input" name="${p(this.name)}" .value="${t}" placeholder="${p(this.placeholder)}" id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" aria-autocomplete="none" @input="${this.handleInputChange}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" autocomplete="off" ${c(this.focusableRef)} aria-invalid="${F(this.error,"true")}" aria-describedby="${p(this.getDescribedBy())}"> <button class="n-date-toggle" @click="${this.toggleOpen}" ?disabled="${this.disabled}" type="button"><nord-icon name="interface-calendar" size="s"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${e?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(e)}</span>`:a}</nord-visually-hidden></button></div>${this.renderError()}<div class="${d({"is-left":"left"===this.direction,"is-active":this.open})}" role="dialog" aria-modal="true" aria-hidden="${this.open?"false":"true"}" aria-labelledby="dialog-header"><div class="n-date-dialog-content"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><div class="n-date-mobile"><div class="n-date-mobile-heading" id="dialog-header">${this.localize.term("modalHeading")}</div><button class="n-date-close" @click="${this.hide}" type="button"><nord-icon color="var(--n-color-icon)" name="interface-close-small" size="xs"></nord-icon><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden></button></div><nord-calendar value="${this.value}" min="${this.min}" max="${this.max}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></div></div>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}setValue(e){this.value=e?g(e):"",this.dispatchEvent(new f("change"))}};O.styles=[z,$,D,B],e([l(".n-date-toggle",!0)],O.prototype,"toggleButton",void 0),e([l(".n-date-close",!0)],O.prototype,"closeButton",void 0),e([l("nord-calendar",!0)],O.prototype,"calendar",void 0),e([l('[role="dialog"]',!0)],O.prototype,"dialog",void 0),e([s()],O.prototype,"open",void 0),e([r()],O.prototype,"value",void 0),e([r()],O.prototype,"min",void 0),e([r()],O.prototype,"max",void 0),e([r()],O.prototype,"direction",void 0),e([r({attribute:"first-day-of-week",type:Number})],O.prototype,"firstDayOfWeek",void 0),e([r({attribute:!1})],O.prototype,"dateAdapter",void 0),e([r({attribute:!1})],O.prototype,"isDateDisabled",void 0),O=e([t("nord-date-picker")],O);var S=O;export{S as default};
 //# sourceMappingURL=DatePicker.js.map

package/lib/Layout.js

@@ -1,2 +1,2 @@
-import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as t,s as a,$ as i}from"./lit-element-67e6cd99.js";import{e as o}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{o as d}from"./class-map-f1b6f1fa.js";import{D as l}from"./DirectionController-8b298382.js";import{L as h}from"./LightDismissController-a2645ae6.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as v}from"./cond-97c45476.js";import{f as p}from"./fsm-50373df9.js";import{c as g}from"./number-c3ab3e95.js";import{s as u}from"./Component-a61df53a.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";class m{constructor(e,n,t){this.host=e,this.onChange=t,this.handleChange=()=>{var e;null===(e=this.onChange)||void 0===e||e.call(this),this.host.requestUpdate()},e.addController(this),this.mq="string"==typeof n?matchMedia(n):n}get matches(){return this.mq.matches}hostConnected(){this.mq.addListener(this.handleChange)}hostDisconnected(){this.mq.removeListener(this.handleChange)}}const k=t`:host{--n-layout-padding:var(--n-space-l);--n-nav-transition-duration:0.3s;background:var(--n-color-background);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);inset-block-start:0;min-block-size:100%;position:absolute}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--n-nav-width);z-index:2;inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav);overflow:hidden}.n-layout-main{inset-inline-end:0;z-index:1;inline-size:100%}main{padding:var(--n-layout-padding)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{transition:transform var(--n-nav-transition-duration) ease}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .n-layout-nav{transition:transform var(--n-nav-transition-duration) ease;border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened] .n-layout-main{inline-size:calc(100% - var(--n-nav-width))}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-5px;inline-size:12px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity .2s .15s ease;opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--n-layout-padding:0}`,f=matchMedia("(min-width: 768px)"),b=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){const t=localStorage.getItem(e);try{return t?a(t):n}catch(e){return n}},set value(n){localStorage.setItem(e,t(n))}}}("nord-layout.navWidth",250),y=p({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let T=class extends a{constructor(){super(...arguments),this.navWidth=b.value,this.isDragging=!1,this.navState=f.matches?"opened":"closed",this.navOpen="opened"===this.navState,this.padding="m",this.lightDismiss=new h(this,{isOpen:()=>"opened"===this.navState&&!this.mq.matches,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl&&e!==this.navToggleEl}),this.mq=new m(this,f,(()=>this.handleMediaQueryChange())),this.direction=new l(this),this.handleMediaQueryChange=()=>{this.navTransition(this.mq.matches?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=e=>{e.target!==this.navToggleEl&&this.navTransition("focusout")},this.handleMouseEnter=()=>{this.mq.matches&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}render(){const{navWidth:e,navState:n,mq:t,isDragging:a,direction:o}=this,s="opened"===n&&t.matches?e:250;return i`<div class="${d({"n-layout":!0,"n-rtl":o.isRTL,"n-dragging":a})}" style="${`--n-nav-width: ${s}px`}" data-nav="${n}" data-screen="${t.matches?"wide":"narrow"}"><div class="n-layout-nav" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${v("opened"===n,this.startDragging)}" @pointermove="${v(a,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleClick}"><slot name="header"></slot><main><slot></slot></main></div></div>`}getToggleElement(){if(this.cleanup(),!this.navToggle)return;const e=this.getRootNode().querySelector(`#${this.navToggle}`);e&&(this.navToggleEl=e,this.navToggleEl.addEventListener("click",this.handleToggleClick),this.navToggleEl.addEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.addEventListener("mouseleave",this.handleMouseLeave))}cleanup(){this.navToggleEl&&(this.navToggleEl.removeEventListener("click",this.handleToggleClick),this.navToggleEl.removeEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.removeEventListener("mouseleave",this.handleMouseLeave),this.navToggleEl=void 0)}handleNavWidthChange(){b.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=y.transition(this.navState,e)}handleClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=g(Math.round(e),220,400)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(e){const n=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};T.styles=[u,k],e([r(".n-layout-nav",!0)],T.prototype,"navEl",void 0),e([s()],T.prototype,"navWidth",void 0),e([s()],T.prototype,"isDragging",void 0),e([s()],T.prototype,"navState",void 0),e([o({reflect:!0,type:Boolean,attribute:"nav-open"})],T.prototype,"navOpen",void 0),e([o({attribute:"nav-toggle"})],T.prototype,"navToggle",void 0),e([o({reflect:!0})],T.prototype,"padding",void 0),e([c("navToggle")],T.prototype,"getToggleElement",null),e([c("navWidth","updated")],T.prototype,"handleNavWidthChange",null),e([c("navState")],T.prototype,"handleNavStateChange",null),e([c("navOpen","updated")],T.prototype,"handleOpenChange",null),T=e([n("nord-layout")],T);var w=T;export{w as default};
+import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as t,s as a,$ as i}from"./lit-element-67e6cd99.js";import{e as s}from"./property-03f59dce.js";import{t as o}from"./state-70f38ceb.js";import{i as r}from"./query-2d22378e.js";import{o as d}from"./class-map-f1b6f1fa.js";import{D as l}from"./DirectionController-8b298382.js";import{L as h}from"./LightDismissController-a2645ae6.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as v}from"./cond-97c45476.js";import{f as p}from"./fsm-50373df9.js";import{c as g}from"./number-c3ab3e95.js";import{s as u}from"./Component-a61df53a.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";class m{constructor(e,n,t){this.host=e,this.onChange=t,this.handleChange=()=>{var e;null===(e=this.onChange)||void 0===e||e.call(this),this.host.requestUpdate()},e.addController(this),this.mq="string"==typeof n?matchMedia(n):n}get matches(){return this.mq.matches}hostConnected(){this.mq.addListener(this.handleChange)}hostDisconnected(){this.mq.removeListener(this.handleChange)}}const k=t`:host{--n-layout-padding:var(--n-space-l);--n-nav-transition-duration:0.3s;background:var(--n-color-background);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);inset-block-start:0;min-block-size:100%;position:absolute}.n-layout-nav{position:fixed;user-select:none;inline-size:var(--n-nav-width);z-index:2;inset-block-start:0;inset-inline-start:0;inset-block-end:0;transform:translateX(var(--n-nav-transform));box-shadow:var(--n-box-shadow-nav)}.n-layout-main{inset-inline-end:0;z-index:1;inline-size:100%}main{padding:var(--n-layout-padding)}:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(-110%)}.n-rtl:is([data-nav=closed],[data-nav=unpeek]) .n-layout-nav{transform:translateX(110%)}[data-screen=narrow] .n-layout-nav{transition:transform var(--n-nav-transition-duration) ease}[data-screen=wide]:is([data-nav=peek],[data-nav=wait],[data-nav=unpeek],[data-nav=blocked]) .n-layout-nav{transition:transform var(--n-nav-transition-duration) ease;border-start-end-radius:var(--n-border-radius);border-end-end-radius:var(--n-border-radius);min-block-size:0;inset-block-start:calc(var(--n-space-m) * 4);inset-block-end:var(--n-space-l)}[data-screen=wide][data-nav=opened] .n-layout-nav{border-inline-end:1px solid var(--n-color-border);box-shadow:none}[data-screen=wide][data-nav=opened] .n-layout-main{inline-size:calc(100% - var(--n-nav-width))}.n-resize{touch-action:none;position:absolute;min-block-size:100%;inset-block:0;inset-inline-end:-8px;inline-size:10px;background:0 0}[data-nav=opened] .n-resize{cursor:col-resize}.n-resize::after{content:"";position:absolute;z-index:var(--n-index-sticky);inset-block:0;inset-inline-end:5px;inline-size:3px;background:var(--n-color-accent);transition:opacity .2s .15s ease;opacity:0}.n-resize:focus{outline:0}.n-dragging .n-resize::after,.n-resize:focus::after,[data-nav=opened] .n-resize:hover::after{opacity:1}@supports selector(:focus-visible){.n-resize:focus::after{opacity:0}.n-resize:focus-visible::after{opacity:1}}.n-dragging{cursor:col-resize!important;-webkit-user-select:none;user-select:none}:host([padding=none]){--n-layout-padding:0}`,f=matchMedia("(min-width: 768px)"),b=function(e,n,t=JSON.stringify,a=JSON.parse){return{get value(){const t=localStorage.getItem(e);try{return t?a(t):n}catch(e){return n}},set value(n){localStorage.setItem(e,t(n))}}}("nord-layout.navWidth",250),y=p({opened:{toggle:"closed",close:"closed"},closed:{toggle:"opened",open:"opened",focusin:"peek",pointerenter:"peek"},peek:{toggle:"opened",focusout:"unpeek",pointerleave:"wait",dropdownOpen:"blocked",click:"unpeek",open:"opened"},blocked:{dropdownClose:"peek",open:"opened"},wait:{toggle:"opened",focusin:"peek",pointerenter:"peek",timeout:"unpeek"},unpeek:{toggle:"opened",focusin:"peek",pointerenter:"peek",transitionend:"closed"}});let T=class extends a{constructor(){super(...arguments),this.navWidth=b.value,this.isDragging=!1,this.navState=f.matches?"opened":"closed",this.navOpen="opened"===this.navState,this.padding="m",this.lightDismiss=new h(this,{isOpen:()=>"opened"===this.navState&&!this.mq.matches,onDismiss:()=>this.navTransition("close"),isDismissible:e=>e!==this.navEl&&e!==this.navToggleEl}),this.mq=new m(this,f,(()=>this.handleMediaQueryChange())),this.direction=new l(this),this.handleMediaQueryChange=()=>{this.navTransition(this.mq.matches?"open":"close")},this.handleToggleClick=()=>{this.navTransition("toggle")},this.handleNavFocus=()=>{this.navTransition("focusin")},this.handleMainFocus=e=>{e.target!==this.navToggleEl&&this.navTransition("focusout")},this.handleMouseEnter=()=>{this.mq.matches&&this.navTransition("pointerenter")},this.handleMouseLeave=()=>{this.navTransition("pointerleave")},this.handleTransitionEnd=()=>{this.navTransition("transitionend")}}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}render(){const{navWidth:e,navState:n,mq:t,isDragging:a,direction:s}=this,o="opened"===n&&t.matches?e:250;return i`<div class="${d({"n-layout":!0,"n-rtl":s.isRTL,"n-dragging":a})}" style="${`--n-nav-width: ${o}px`}" data-nav="${n}" data-screen="${t.matches?"wide":"narrow"}"><div class="n-layout-nav" @focusin="${this.handleNavFocus}" @mouseenter="${this.handleMouseEnter}" @mouseleave="${this.handleMouseLeave}" @open="${this.handleDropdownOpen}" @close="${this.handleDropdownClose}"><slot name="nav"></slot><div class="n-resize" role="separator" aria-orientation="vertical" tabindex="0" @pointerdown="${v("opened"===n,this.startDragging)}" @pointermove="${v(a,this.handleDrag)}" @pointerleave="${this.stopDragging}" @pointerup="${this.stopDragging}" @keydown="${this.handleKeyboardResize}"></div></div><div class="n-layout-main" @focusin="${this.handleMainFocus}" @click="${this.handleClick}"><slot name="header"></slot><main><slot></slot></main></div></div>`}getToggleElement(){if(this.cleanup(),!this.navToggle)return;const e=this.getRootNode().querySelector(`#${this.navToggle}`);e&&(this.navToggleEl=e,this.navToggleEl.addEventListener("click",this.handleToggleClick),this.navToggleEl.addEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.addEventListener("mouseleave",this.handleMouseLeave))}cleanup(){this.navToggleEl&&(this.navToggleEl.removeEventListener("click",this.handleToggleClick),this.navToggleEl.removeEventListener("mouseenter",this.handleMouseEnter),this.navToggleEl.removeEventListener("mouseleave",this.handleMouseLeave),this.navToggleEl=void 0)}handleNavWidthChange(){b.value=this.navWidth}handleNavStateChange(e){switch("wait"===e&&this.peekTimeoutId&&clearTimeout(this.peekTimeoutId),"unpeek"===e&&this.navEl.removeEventListener("transitionend",this.handleTransitionEnd),this.navState){case"closed":this.navOpen=!1;break;case"opened":this.navOpen=!0;break;case"wait":this.peekTimeoutId=setTimeout((()=>this.navTransition("timeout")),300);break;case"unpeek":this.navEl.addEventListener("transitionend",this.handleTransitionEnd,{once:!0})}}handleOpenChange(){this.isDragging||this.setNavWidth(Math.max(this.navWidth,250)),this.navTransition(this.navOpen?"open":"close")}navTransition(e){this.navState=y.transition(this.navState,e)}handleClick(){this.navTransition("click")}handleDropdownOpen(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownOpen")}handleDropdownClose(e){"nord-dropdown"===e.target.localName&&this.navTransition("dropdownClose")}handleKeyboardResize(e){const{navWidth:n,direction:{isLTR:t}}=this;switch(e.key){case"ArrowLeft":this.setNavWidth(n+(t?-30:30));break;case"ArrowRight":this.setNavWidth(n+(t?30:-30));break;case"Enter":this.navTransition("toggle");break;case"Home":this.setNavWidth(220);break;case"End":this.setNavWidth(400);break;default:return}e.preventDefault()}setNavWidth(e){this.navWidth=g(Math.round(e),220,400)}startDragging(e){if(0===e.button){e.target.setPointerCapture(e.pointerId),this.isDragging=!0}}stopDragging(){this.isDragging=!1}handleDrag(e){const n=this.direction.isRTL?this.clientWidth-e.clientX:e.clientX;this.setNavWidth(n),this.navTransition(n>=100?"open":"close")}};T.styles=[u,k],e([r(".n-layout-nav",!0)],T.prototype,"navEl",void 0),e([o()],T.prototype,"navWidth",void 0),e([o()],T.prototype,"isDragging",void 0),e([o()],T.prototype,"navState",void 0),e([s({reflect:!0,type:Boolean,attribute:"nav-open"})],T.prototype,"navOpen",void 0),e([s({attribute:"nav-toggle"})],T.prototype,"navToggle",void 0),e([s({reflect:!0})],T.prototype,"padding",void 0),e([c("navToggle")],T.prototype,"getToggleElement",null),e([c("navWidth","updated")],T.prototype,"handleNavWidthChange",null),e([c("navState")],T.prototype,"handleNavStateChange",null),e([c("navOpen","updated")],T.prototype,"handleOpenChange",null),T=e([n("nord-layout")],T);var w=T;export{w as default};
 //# sourceMappingURL=Layout.js.map

package/lib/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../src/common/controllers/MediaQueryController.ts","../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype MediaQueryChange = () => void\n\nexport class MediaQueryController implements ReactiveController {\n  private mq: MediaQueryList\n\n  constructor(host: ReactiveControllerHost, mediaQuery: MediaQueryList, onChange?: MediaQueryChange)\n  constructor(host: ReactiveControllerHost, mediaQuery: string, onChange?: MediaQueryChange)\n\n  constructor(\n    private host: ReactiveControllerHost,\n    mediaQuery: string | MediaQueryList,\n    private onChange?: MediaQueryChange\n  ) {\n    host.addController(this)\n    this.mq = typeof mediaQuery === \"string\" ? matchMedia(mediaQuery) : mediaQuery\n  }\n\n  get matches() {\n    return this.mq.matches\n  }\n\n  hostConnected() {\n    this.mq.addListener(this.handleChange)\n  }\n\n  hostDisconnected() {\n    this.mq.removeListener(this.handleChange)\n  }\n\n  handleChange = () => {\n    this.onChange?.()\n    this.host.requestUpdate()\n  }\n}\n","/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { MediaQueryController } from \"../common/controllers/MediaQueryController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\n\nconst navMachine = fsm({\n  opened: {\n    toggle: \"closed\",\n    close: \"closed\",\n  },\n  closed: {\n    toggle: \"opened\",\n    open: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n  },\n  peek: {\n    toggle: \"opened\",\n    focusout: \"unpeek\",\n    pointerleave: \"wait\",\n    dropdownOpen: \"blocked\",\n    click: \"unpeek\",\n    open: \"opened\",\n  },\n  blocked: {\n    dropdownClose: \"peek\",\n    open: \"opened\",\n  },\n  wait: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    timeout: \"unpeek\",\n  },\n  unpeek: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    transitionend: \"closed\",\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n  private navToggleEl?: Element\n\n  @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = store.value\n  @state() private isDragging = false\n  @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen: boolean = this.navState === \"opened\"\n\n  /**\n   * ID reference of element used to toggle the navigation.\n   */\n  @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n  /**\n   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: \"m\" | \"none\" = \"m\"\n\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.mq.matches,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl && node !== this.navToggleEl,\n  })\n\n  private mq = new MediaQueryController(this, mediaQuery, () => this.handleMediaQueryChange())\n  private direction = new DirectionController(this)\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.cleanup()\n  }\n\n  render() {\n    const { navWidth, navState, mq, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && mq.matches ? navWidth : NAV_DEFAULT_WIDTH\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-layout\": true,\n          \"n-rtl\": direction.isRTL,\n          \"n-dragging\": isDragging,\n        })}\n        style=${`--n-nav-width: ${adjustedNavWidth}px`}\n        data-nav=${navState}\n        data-screen=${mq.matches ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\"></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n          ></div>\n        </div>\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleClick}>\n          <slot name=\"header\"></slot>\n          <main>\n            <slot></slot>\n          </main>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"navToggle\")\n  protected getToggleElement() {\n    // clean up\n    this.cleanup()\n\n    // handle case where id removed\n    if (!this.navToggle) {\n      return\n    }\n\n    const root = this.getRootNode() as Document | ShadowRoot\n    const toggleEl = root.querySelector(`#${this.navToggle}`)\n\n    if (toggleEl) {\n      this.navToggleEl = toggleEl\n      this.navToggleEl.addEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.addEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.addEventListener(\"mouseleave\", this.handleMouseLeave)\n    }\n  }\n\n  private cleanup() {\n    if (this.navToggleEl) {\n      this.navToggleEl.removeEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.removeEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.removeEventListener(\"mouseleave\", this.handleMouseLeave)\n      this.navToggleEl = undefined\n    }\n  }\n\n  @observe(\"navWidth\", \"updated\")\n  protected handleNavWidthChange() {\n    store.value = this.navWidth\n  }\n\n  @observe(\"navState\")\n  protected handleNavStateChange(prev: NavState) {\n    if (prev === \"wait\" && this.peekTimeoutId) {\n      clearTimeout(this.peekTimeoutId)\n    }\n    if (prev === \"unpeek\") {\n      this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n    }\n\n    switch (this.navState) {\n      case \"closed\":\n        this.navOpen = false\n        break\n      case \"opened\":\n        this.navOpen = true\n        break\n      case \"wait\":\n        this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n        break\n      case \"unpeek\":\n        this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n        break\n      default:\n        break\n    }\n  }\n\n  @observe(\"navOpen\", \"updated\")\n  protected handleOpenChange() {\n    if (!this.isDragging) {\n      // when opening nav, it should restore to default width (or larger).\n      // unless it is being dragged, in which case the drag width wins\n      this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n    }\n\n    this.navTransition(this.navOpen ? \"open\" : \"close\")\n  }\n\n  /* ---------------------------------------------\n  / NAVIGATION OPEN/CLOSE LOGIC\n  / --------------------------------------------- */\n\n  private navTransition(event: NavEvent) {\n    this.navState = navMachine.transition(this.navState, event)\n  }\n\n  private handleClick() {\n    this.navTransition(\"click\")\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownOpen\")\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownClose\")\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.navTransition(this.mq.matches ? \"open\" : \"close\")\n  }\n\n  private handleToggleClick = () => {\n    this.navTransition(\"toggle\")\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition(\"focusin\")\n  }\n\n  private handleMainFocus = (e: FocusEvent) => {\n    if (e.target !== this.navToggleEl) {\n      this.navTransition(\"focusout\")\n    }\n  }\n\n  private handleMouseEnter = () => {\n    if (this.mq.matches) {\n      this.navTransition(\"pointerenter\")\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition(\"pointerleave\")\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition(\"transitionend\")\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case \"ArrowLeft\":\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case \"ArrowRight\":\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case \"Enter\":\n        this.navTransition(\"toggle\")\n        break\n      case \"Home\":\n        this.setNavWidth(NAV_MIN_WIDTH)\n        break\n      case \"End\":\n        this.setNavWidth(NAV_MAX_WIDTH)\n        break\n      default:\n        return\n    }\n\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n  }\n\n  private startDragging(e: PointerEvent) {\n    if (e.button === 0) {\n      const target = e.target as Element\n      target.setPointerCapture(e.pointerId)\n      this.isDragging = true\n    }\n  }\n\n  private stopDragging() {\n    this.isDragging = false\n  }\n\n  private handleDrag(e: PointerEvent) {\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-layout\": Layout\n  }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse\n) {\n  return {\n    get value(): T {\n      const value = localStorage.getItem(key)\n\n      try {\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      localStorage.setItem(key, serialize(value))\n    },\n  }\n}\n"],"names":["MediaQueryController","constructor","host","mediaQuery","onChange","this","handleChange","_a","call","requestUpdate","addController","mq","matchMedia","matches","hostConnected","addListener","hostDisconnected","removeListener","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navWidth","isDragging","navState","navOpen","padding","lightDismiss","LightDismissController","isOpen","onDismiss","navTransition","isDismissible","node","navEl","navToggleEl","handleMediaQueryChange","direction","DirectionController","handleToggleClick","handleNavFocus","handleMainFocus","e","target","handleMouseEnter","handleMouseLeave","handleTransitionEnd","disconnectedCallback","super","cleanup","render","adjustedNavWidth","html","classMap","isRTL","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","getToggleElement","navToggle","toggleEl","getRootNode","querySelector","addEventListener","removeEventListener","undefined","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Layout.js","sources":["../src/common/controllers/MediaQueryController.ts","../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype MediaQueryChange = () => void\n\nexport class MediaQueryController implements ReactiveController {\n  private mq: MediaQueryList\n\n  constructor(host: ReactiveControllerHost, mediaQuery: MediaQueryList, onChange?: MediaQueryChange)\n  constructor(host: ReactiveControllerHost, mediaQuery: string, onChange?: MediaQueryChange)\n\n  constructor(\n    private host: ReactiveControllerHost,\n    mediaQuery: string | MediaQueryList,\n    private onChange?: MediaQueryChange\n  ) {\n    host.addController(this)\n    this.mq = typeof mediaQuery === \"string\" ? matchMedia(mediaQuery) : mediaQuery\n  }\n\n  get matches() {\n    return this.mq.matches\n  }\n\n  hostConnected() {\n    this.mq.addListener(this.handleChange)\n  }\n\n  hostDisconnected() {\n    this.mq.removeListener(this.handleChange)\n  }\n\n  handleChange = () => {\n    this.onChange?.()\n    this.host.requestUpdate()\n  }\n}\n","/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { LitElement, html } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { MediaQueryController } from \"../common/controllers/MediaQueryController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\n\nconst navMachine = fsm({\n  opened: {\n    toggle: \"closed\",\n    close: \"closed\",\n  },\n  closed: {\n    toggle: \"opened\",\n    open: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n  },\n  peek: {\n    toggle: \"opened\",\n    focusout: \"unpeek\",\n    pointerleave: \"wait\",\n    dropdownOpen: \"blocked\",\n    click: \"unpeek\",\n    open: \"opened\",\n  },\n  blocked: {\n    dropdownClose: \"peek\",\n    open: \"opened\",\n  },\n  wait: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    timeout: \"unpeek\",\n  },\n  unpeek: {\n    toggle: \"opened\",\n    focusin: \"peek\",\n    pointerenter: \"peek\",\n    transitionend: \"closed\",\n  },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\n/**\n * Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n *\n * @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n  static styles = [componentStyle, style]\n\n  private peekTimeoutId?: ReturnType<typeof setTimeout>\n  private navToggleEl?: Element\n\n  @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n  @state() private navWidth = store.value\n  @state() private isDragging = false\n  @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\n\n  /**\n   * Controls whether the navigation is hidden off-screen or not.\n   * Defaults to `true` for wide viewports, and `false` otherwise.\n   */\n  @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen: boolean = this.navState === \"opened\"\n\n  /**\n   * ID reference of element used to toggle the navigation.\n   */\n  @property({ attribute: \"nav-toggle\" }) navToggle?: string\n\n  /**\n   * Controls the padding of the default main section slot. When set to “none”,\n   * the nav and header slots will still have padding.\n   */\n  @property({ reflect: true }) padding: \"m\" | \"none\" = \"m\"\n\n  private lightDismiss = new LightDismissController(this, {\n    isOpen: () => this.navState === \"opened\" && !this.mq.matches,\n    onDismiss: () => this.navTransition(\"close\"),\n    isDismissible: node => node !== this.navEl && node !== this.navToggleEl,\n  })\n\n  private mq = new MediaQueryController(this, mediaQuery, () => this.handleMediaQueryChange())\n  private direction = new DirectionController(this)\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.cleanup()\n  }\n\n  render() {\n    const { navWidth, navState, mq, isDragging, direction } = this\n    const adjustedNavWidth = navState === \"opened\" && mq.matches ? navWidth : NAV_DEFAULT_WIDTH\n\n    return html`\n      <div\n        class=${classMap({\n          \"n-layout\": true,\n          \"n-rtl\": direction.isRTL,\n          \"n-dragging\": isDragging,\n        })}\n        style=${`--n-nav-width: ${adjustedNavWidth}px`}\n        data-nav=${navState}\n        data-screen=${mq.matches ? \"wide\" : \"narrow\"}\n      >\n        <div\n          class=\"n-layout-nav\"\n          @focusin=${this.handleNavFocus}\n          @mouseenter=${this.handleMouseEnter}\n          @mouseleave=${this.handleMouseLeave}\n          @open=${this.handleDropdownOpen}\n          @close=${this.handleDropdownClose}\n        >\n          <slot name=\"nav\"></slot>\n          <div\n            class=\"n-resize\"\n            role=\"separator\"\n            aria-orientation=\"vertical\"\n            tabindex=\"0\"\n            @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n            @pointermove=${cond(isDragging, this.handleDrag)}\n            @pointerleave=${this.stopDragging}\n            @pointerup=${this.stopDragging}\n            @keydown=${this.handleKeyboardResize}\n          ></div>\n        </div>\n        <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleClick}>\n          <slot name=\"header\"></slot>\n          <main>\n            <slot></slot>\n          </main>\n        </div>\n      </div>\n    `\n  }\n\n  @observe(\"navToggle\")\n  protected getToggleElement() {\n    // clean up\n    this.cleanup()\n\n    // handle case where id removed\n    if (!this.navToggle) {\n      return\n    }\n\n    const root = this.getRootNode() as Document | ShadowRoot\n    const toggleEl = root.querySelector(`#${this.navToggle}`)\n\n    if (toggleEl) {\n      this.navToggleEl = toggleEl\n      this.navToggleEl.addEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.addEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.addEventListener(\"mouseleave\", this.handleMouseLeave)\n    }\n  }\n\n  private cleanup() {\n    if (this.navToggleEl) {\n      this.navToggleEl.removeEventListener(\"click\", this.handleToggleClick)\n      this.navToggleEl.removeEventListener(\"mouseenter\", this.handleMouseEnter)\n      this.navToggleEl.removeEventListener(\"mouseleave\", this.handleMouseLeave)\n      this.navToggleEl = undefined\n    }\n  }\n\n  @observe(\"navWidth\", \"updated\")\n  protected handleNavWidthChange() {\n    store.value = this.navWidth\n  }\n\n  @observe(\"navState\")\n  protected handleNavStateChange(prev: NavState) {\n    if (prev === \"wait\" && this.peekTimeoutId) {\n      clearTimeout(this.peekTimeoutId)\n    }\n    if (prev === \"unpeek\") {\n      this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n    }\n\n    switch (this.navState) {\n      case \"closed\":\n        this.navOpen = false\n        break\n      case \"opened\":\n        this.navOpen = true\n        break\n      case \"wait\":\n        this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n        break\n      case \"unpeek\":\n        this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n        break\n      default:\n        break\n    }\n  }\n\n  @observe(\"navOpen\", \"updated\")\n  protected handleOpenChange() {\n    if (!this.isDragging) {\n      // when opening nav, it should restore to default width (or larger).\n      // unless it is being dragged, in which case the drag width wins\n      this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n    }\n\n    this.navTransition(this.navOpen ? \"open\" : \"close\")\n  }\n\n  /* ---------------------------------------------\n  / NAVIGATION OPEN/CLOSE LOGIC\n  / --------------------------------------------- */\n\n  private navTransition(event: NavEvent) {\n    this.navState = navMachine.transition(this.navState, event)\n  }\n\n  private handleClick() {\n    this.navTransition(\"click\")\n  }\n\n  private handleDropdownOpen(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownOpen\")\n    }\n  }\n\n  private handleDropdownClose(e: Event) {\n    const target = e.target as Element\n\n    if (target.localName === \"nord-dropdown\") {\n      this.navTransition(\"dropdownClose\")\n    }\n  }\n\n  private handleMediaQueryChange = () => {\n    this.navTransition(this.mq.matches ? \"open\" : \"close\")\n  }\n\n  private handleToggleClick = () => {\n    this.navTransition(\"toggle\")\n  }\n\n  private handleNavFocus = () => {\n    this.navTransition(\"focusin\")\n  }\n\n  private handleMainFocus = (e: FocusEvent) => {\n    if (e.target !== this.navToggleEl) {\n      this.navTransition(\"focusout\")\n    }\n  }\n\n  private handleMouseEnter = () => {\n    if (this.mq.matches) {\n      this.navTransition(\"pointerenter\")\n    }\n  }\n\n  private handleMouseLeave = () => {\n    this.navTransition(\"pointerleave\")\n  }\n\n  private handleTransitionEnd = () => {\n    this.navTransition(\"transitionend\")\n  }\n\n  /* ---------------------------------------------\n  / RESIZE LOGIC\n  / --------------------------------------------- */\n\n  private handleKeyboardResize(e: KeyboardEvent) {\n    const {\n      navWidth,\n      direction: { isLTR },\n    } = this\n\n    switch (e.key) {\n      case \"ArrowLeft\":\n        this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n        break\n      case \"ArrowRight\":\n        this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n        break\n      case \"Enter\":\n        this.navTransition(\"toggle\")\n        break\n      case \"Home\":\n        this.setNavWidth(NAV_MIN_WIDTH)\n        break\n      case \"End\":\n        this.setNavWidth(NAV_MAX_WIDTH)\n        break\n      default:\n        return\n    }\n\n    e.preventDefault()\n  }\n\n  private setNavWidth(width: number) {\n    this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n  }\n\n  private startDragging(e: PointerEvent) {\n    if (e.button === 0) {\n      const target = e.target as Element\n      target.setPointerCapture(e.pointerId)\n      this.isDragging = true\n    }\n  }\n\n  private stopDragging() {\n    this.isDragging = false\n  }\n\n  private handleDrag(e: PointerEvent) {\n    const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n    this.setNavWidth(width)\n    this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-layout\": Layout\n  }\n}\n","/**\n * Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n */\nexport function storage<T>(\n  key: string,\n  defaultValue: T,\n  serialize: (value: T) => string = JSON.stringify,\n  deserialize: (value: string) => T = JSON.parse\n) {\n  return {\n    get value(): T {\n      const value = localStorage.getItem(key)\n\n      try {\n        return value ? deserialize(value) : defaultValue\n      } catch {\n        return defaultValue\n      }\n    },\n\n    set value(value: T) {\n      localStorage.setItem(key, serialize(value))\n    },\n  }\n}\n"],"names":["MediaQueryController","constructor","host","mediaQuery","onChange","this","handleChange","_a","call","requestUpdate","addController","mq","matchMedia","matches","hostConnected","addListener","hostDisconnected","removeListener","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","storage","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navWidth","isDragging","navState","navOpen","padding","lightDismiss","LightDismissController","isOpen","onDismiss","navTransition","isDismissible","node","navEl","navToggleEl","handleMediaQueryChange","direction","DirectionController","handleToggleClick","handleNavFocus","handleMainFocus","e","target","handleMouseEnter","handleMouseLeave","handleTransitionEnd","disconnectedCallback","super","cleanup","render","adjustedNavWidth","html","classMap","isRTL","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","getToggleElement","navToggle","toggleEl","getRootNode","querySelector","addEventListener","removeEventListener","undefined","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}

package/lib/NavItem.js

@@ -1,2 +1,2 @@
-import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as t,$ as o,w as r,s as a}from"./lit-element-67e6cd99.js";import{e as i}from"./property-03f59dce.js";import{o as s}from"./class-map-f1b6f1fa.js";import{n as c}from"./ref-57ff8ffc.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-ea6eff46.js";import{c as v}from"./cond-97c45476.js";import{N as p}from"./events-731d0007.js";import{F as f}from"./FocusableMixin-175ea4d7.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const h=t`:host{all:unset;display:block;font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--n-nav-item-box-shadow,none)}.n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@supports selector(:focus-visible){.n-nav-item:focus{--n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);position:relative;z-index:var(--n-index-masked)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-highlight);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight-active);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let m=class extends(f(a)){constructor(){super(...arguments),this.subnavSlot=new d(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=o`${this.icon?o`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:r}<div class="n-content"><slot></slot>${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:r}</div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),o`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return o`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${v(this.active,"page")}" href="${this.href||""}">${e}</a>`}renderToggle(e){return o`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return o`<button class="n-nav-item" ${c(this.focusableRef)}>${e}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};m.styles=h,e([i({type:Boolean,reflect:!0})],m.prototype,"active",void 0),e([i()],m.prototype,"icon",void 0),e([i()],m.prototype,"href",void 0),e([i()],m.prototype,"badge",void 0),e([i({type:Boolean})],m.prototype,"open",void 0),m=e([n("nord-nav-item")],m);var g=m;export{g as default};
+import{_ as e,n}from"./query-assigned-elements-ef860822.js";import{r as t,$ as o,w as a,s as i}from"./lit-element-67e6cd99.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./class-map-f1b6f1fa.js";import{n as c}from"./ref-57ff8ffc.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-ea6eff46.js";import{c as v}from"./cond-97c45476.js";import{N as p}from"./events-731d0007.js";import{F as f}from"./FocusableMixin-175ea4d7.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const m=t`:host{all:unset;display:block;font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;max-inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--n-nav-item-box-shadow,none);position:relative}.n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0}@supports selector(:focus-visible){.n-nav-item:focus{--n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);position:relative;z-index:var(--n-index-masked)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-highlight);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight-active);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let h=class extends(f(i)){constructor(){super(...arguments),this.subnavSlot=new d(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=o`${this.icon?o`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),o`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return o`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${v(this.active,"page")}" href="${this.href||""}">${e}</a>`}renderToggle(e){return o`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return o`<button class="n-nav-item" ${c(this.focusableRef)}>${e}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};h.styles=m,e([r({type:Boolean,reflect:!0})],h.prototype,"active",void 0),e([r()],h.prototype,"icon",void 0),e([r()],h.prototype,"href",void 0),e([r()],h.prototype,"badge",void 0),e([r({type:Boolean})],h.prototype,"open",void 0),h=e([n("nord-nav-item")],h);var b=h;export{b as default};
 //# sourceMappingURL=NavItem.js.map

package/lib/NavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = style\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property() icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property() href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property() badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ type: Boolean }) open = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // in cases where there is nested nav, and one of the items is active\n    // we should auto-open the nav item for developer convenience\n    if (this.querySelector(`nord-nav-item[active]`)) {\n      this.open = true\n    }\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-content\">\n        <slot></slot>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","connectedCallback","super","querySelector","render","innards","html","icon","nothing","badge","element","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","styles","style","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"gxFAuBA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBxBL,KAAIM,MAAG,EAEpCC,oBACEC,MAAMD,oBAIFP,KAAKS,cAAc,2BACrBT,KAAKM,MAAO,GAIhBI,SACE,MAAMC,EAAUC,CAAI,GAChBZ,KAAKa,KAAOD,CAAI,uCAAsCZ,KAAKa,8BAA+BC,wCAGxFd,KAAKe,MAAQH,CAAI,6BAA6BZ,KAAKe,eAAiBD,UAG1E,IAAIE,EAUJ,OAPEA,EADEhB,KAAKC,WAAWgB,WACRjB,KAAKkB,aAAaP,GACnBX,KAAKmB,KACJnB,KAAKoB,WAAWT,GAEhBX,KAAKqB,aAAaV,GAGvBC,CAAI,wBAELI,gBACWhB,KAAKC,WAAWqB,uBAAqBtB,KAAKM,sBAKrDc,WAAWT,GACjB,OAAOC,CAAI,yBACeW,EAAIvB,KAAKwB,+BAA8BC,EAAKzB,KAAKK,OAAQ,kBAAgBL,KAAKmB,MAAQ,OAC1GR,QAKAO,aAAaP,GACnB,OAAOC,CAAI,sCAGEZ,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCiB,EAAIvB,KAAKwB,iBAETb,gCAIQgB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAKG,UAAUyB,iEAOlEP,aAAaV,GACnB,OAAOC,CAAI,8BAA8BW,EAAIvB,KAAKwB,iBAAiBb,aAG7De,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK6B,cAAc,IAAIC,EAAU,aAtG5BlC,EAAMmC,OAAGC,EAS4BC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK9CL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAAyBtC,EAAA0C,UAAA,aAAA,GAMGL,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GAhCtB1C,EAAOqC,EAAA,CAD3BM,EAAc,kBACM3C,SAAAA"}
+{"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/**\n * Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n *\n * @status ready\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n */\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(LitElement) {\n  static styles = style\n\n  private subnavSlot = new SlotController(this, \"subnav\")\n  private direction = new DirectionController(this)\n\n  /**\n   * Used for indicating the current page. This gives a prominent background to the nav item,\n   * and marks the item as the current page for assistive technology.\n   */\n  @property({ type: Boolean, reflect: true }) active = false\n\n  /**\n   * The name of an icon from Nordicons to display for the nav item.\n   */\n  @property() icon?: string\n\n  /**\n   * The url the nav item should link to.\n   * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property() href?: string\n\n  /**\n   * Allows you to add a notification badge with a number next to the nav item.\n   */\n  @property() badge?: string\n\n  /**\n   * When the nav items contains a subnav, controls whether the section is expanded or not.\n   * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n   */\n  @property({ type: Boolean }) open = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // in cases where there is nested nav, and one of the items is active\n    // we should auto-open the nav item for developer convenience\n    if (this.querySelector(`nord-nav-item[active]`)) {\n      this.open = true\n    }\n  }\n\n  render() {\n    const innards = html`\n      ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n      <div class=\"n-nav-content\">\n        <span class=\"n-nav-label\"><slot></slot></span>\n        ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n      </div>\n    `\n    let element: TemplateResult\n\n    if (this.subnavSlot.hasContent) {\n      element = this.renderToggle(innards)\n    } else if (this.href) {\n      element = this.renderLink(innards)\n    } else {\n      element = this.renderButton(innards)\n    }\n\n    return html`\n      <div role=\"listitem\">\n        ${element}\n        <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n      </div>\n    `\n  }\n\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a class=\"n-nav-item\" ${ref(this.focusableRef)} aria-current=${cond(this.active, \"page\")} href=${this.href || \"\"}>\n        ${innards}\n      </a>\n    `\n  }\n\n  private renderToggle(innards: TemplateResult) {\n    return html`\n      <button\n        class=\"n-nav-item\"\n        @click=${this.toggleOpen}\n        aria-expanded=${this.open ? \"true\" : \"false\"}\n        ${ref(this.focusableRef)}\n      >\n        ${innards}\n\n        <nord-icon\n          size=\"xs\"\n          class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n          name=\"arrow-expand-right-small\"\n        ></nord-icon>\n      </button>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>${innards}</button>`\n  }\n\n  private toggleOpen() {\n    this.open = !this.open\n    this.dispatchEvent(new NordEvent(\"toggle\"))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"nord-nav-item\": NavItem\n  }\n}\n"],"names":["NavItem","FocusableMixin","LitElement","constructor","this","subnavSlot","SlotController","direction","DirectionController","active","open","connectedCallback","super","querySelector","render","innards","html","icon","nothing","badge","element","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","cond","toggleOpen","classMap","isRTL","dispatchEvent","NordEvent","styles","style","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"mgGAuBA,IAAqBA,EAArB,cAAqCC,EAAeC,IAApDC,kCAGUC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,UAAY,IAAIC,EAAoBJ,MAMAA,KAAMK,QAAG,EAsBxBL,KAAIM,MAAG,EAEpCC,oBACEC,MAAMD,oBAIFP,KAAKS,cAAc,2BACrBT,KAAKM,MAAO,GAIhBI,SACE,MAAMC,EAAUC,CAAI,GAChBZ,KAAKa,KAAOD,CAAI,uCAAsCZ,KAAKa,8BAA+BC,6EAGxFd,KAAKe,MAAQH,CAAI,6BAA6BZ,KAAKe,eAAiBD,UAG1E,IAAIE,EAUJ,OAPEA,EADEhB,KAAKC,WAAWgB,WACRjB,KAAKkB,aAAaP,GACnBX,KAAKmB,KACJnB,KAAKoB,WAAWT,GAEhBX,KAAKqB,aAAaV,GAGvBC,CAAI,wBAELI,gBACWhB,KAAKC,WAAWqB,uBAAqBtB,KAAKM,sBAKrDc,WAAWT,GACjB,OAAOC,CAAI,yBACeW,EAAIvB,KAAKwB,+BAA8BC,EAAKzB,KAAKK,OAAQ,kBAAgBL,KAAKmB,MAAQ,OAC1GR,QAKAO,aAAaP,GACnB,OAAOC,CAAI,sCAGEZ,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCiB,EAAIvB,KAAKwB,iBAETb,gCAIQgB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAKG,UAAUyB,iEAOlEP,aAAaV,GACnB,OAAOC,CAAI,8BAA8BW,EAAIvB,KAAKwB,iBAAiBb,aAG7De,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK6B,cAAc,IAAIC,EAAU,aAtG5BlC,EAAMmC,OAAGC,EAS4BC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAsBzC,EAAA0C,UAAA,cAAA,GAK9CL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAMbL,EAAA,CAAXC,KAAwBtC,EAAA0C,UAAA,YAAA,GAKbL,EAAA,CAAXC,KAAyBtC,EAAA0C,UAAA,aAAA,GAMGL,EAAA,CAA5BC,EAAS,CAAEC,KAAMC,WAAuBxC,EAAA0C,UAAA,YAAA,GAhCtB1C,EAAOqC,EAAA,CAD3BM,EAAc,kBACM3C,SAAAA"}