@nordhealth/components 4.12.9 → 4.14.0

package/lib/Navigation.js

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as a,html as t,nothing as e}from"lit";import{property as r,customElement as i}from"lit/decorators.js";import{E as l}from"./EventController-BBOmvfLa.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{s as d}from"./Component-DSU3Qp0O.js";const c=o`:host{--_n-navigation-background-color:var(--n-navigation-background-color, var(--n-color-nav-surface));--_n-navigation-header-block-size:var(--n-navigation-header-block-size, var(--n-space-xxl));--_n-navigation-header-padding-inline:var(--n-navigation-header-padding-inline);--_n-navigation-header-background:var(--n-navigation-header-background, var(--_n-navigation-background-color));--_n-navigation-header-divider:var(--n-navigation-header-divider, 1px solid var(--n-color-border));--_n-navigation-header-color:var(--n-navigation-header-color);--_n-navigation-header-toggle-icon-color:var(--n-navigation-header-toggle-icon-color);--_n-navigation-header-focus-style:var(--n-navigation-header-focus-style, var(--_n-navigation-dropdown-box-shadow));--_n-navigation-dropdown-box-shadow:0 0 0 1px var(--n-color-accent) inset;display:flex;flex-direction:column;block-size:100%;background:var(--_n-navigation-background-color)}.n-navigation-main{display:flex;flex-direction:column;flex:1;overflow-y:auto;overscroll-behavior-y:none}nav{flex:1;padding:var(--n-space-m)}::slotted(nord-nav-group[heading]:first-of-type){margin-block-start:calc(var(--n-space-s) * -1)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center;--n-button-text-align:start;--n-button-background-color:transparent;--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-gradient:none}slot[name=header]{--n-button-border-radius:0;--n-button-color:var(--_n-navigation-header-color);--n-button-min-block-size:var(--_n-navigation-header-block-size);--n-select-block-size:var(--n-button-min-block-size);--n-button-font-weight:var(--n-font-weight-active);--n-button-toggle-icon-color:var(--_n-navigation-header-toggle-icon-color);--n-button-padding-inline:var(--_n-navigation-header-padding-inline);block-size:var(--_n-navigation-header-block-size);background-color:var(--_n-navigation-header-background);border-block-end:var(--_n-navigation-header-divider)}slot[name=footer]{--n-button-color:var(--n-color-text-weak);--n-button-padding-inline:var(--n-space-xs);margin:var(--n-space-m)}:is([name=header],[name=footer])::slotted(:not([open]):focus-within){--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:var(--_n-navigation-dropdown-box-shadow)}slot[name=header]::slotted(:not([open], :active):focus-within){--n-button-box-shadow:var(--_n-navigation-header-focus-style)}[name=footer]::slotted(:is(:hover, [open])){--n-button-border-color:var(--n-color-border-hover)}:host([sticky-footer]) slot[name=footer]{background:var(--_n-navigation-background-color);z-index:var(--n-index-sticky);padding:var(--n-space-s) var(--n-space-m);margin:0;position:sticky;inset-block-end:0}:host([sticky-footer]) .n-navigation-main{background:linear-gradient(var(--_n-navigation-background-color) 30%,rgb(255,255,255,0)) center top,linear-gradient(rgb(255,255,255,0),var(--_n-navigation-background-color) 70%) center bottom,radial-gradient(farthest-side at 50% 0,rgb(0,0,0,.1),rgb(0,0,0,0)) center top,radial-gradient(farthest-side at 50% 100%,rgb(0,0,0,.1),rgb(0,0,0,0)) center bottom;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 7px,100% 7px;background-attachment:local,local,scroll,scroll}`;let v=class extends a{constructor(){super(...arguments),this.headerSlot=new s(this,"header"),this.events=new l(this),this.allowItemsToRemainOpen=!1,this.stickyFooter=!1,this.handleActivate=n=>{var o,a;const t=n.target,e=new Set;let r=null===(o=t.parentElement)||void 0===o?void 0:o.closest("nord-nav-item");for(;r;)e.add(r),r=null===(a=r.parentElement)||void 0===a?void 0:a.closest("nord-nav-item");for(const n of this.querySelectorAll("nord-nav-item"))if(n!==t){const o=e.has(n);n.open=o||this.allowItemsToRemainOpen&&n.open,n.active=o}this.allowItemsToRemainOpen=!1}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"activate",this.handleActivate);const n=this.querySelector("nord-nav-item[active]");this.allowItemsToRemainOpen=null!=n}render(){return t`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav>${this.stickyFooter?e:t`<slot name="footer"></slot>`}</div>${this.stickyFooter?t`<slot name="footer"></slot>`:e}`}};v.styles=[d,c],n([r({type:Boolean,reflect:!0,attribute:"sticky-footer"})],v.prototype,"stickyFooter",void 0),v=n([i("nord-navigation")],v);var g=v;export{g as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as e,html as t,nothing as a}from"lit";import{property as r,customElement as i}from"lit/decorators.js";import{E as s}from"./EventController-BBOmvfLa.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as d}from"./Component-DSU3Qp0O.js";const c=n`:host{--_n-navigation-background-color:var(--n-navigation-background-color, var(--n-color-nav-surface));--_n-navigation-header-block-size:var(--n-navigation-header-block-size, var(--n-space-xxl));--_n-navigation-header-padding-inline:var(--n-navigation-header-padding-inline);--_n-navigation-header-background:var(--n-navigation-header-background, var(--_n-navigation-background-color));--_n-navigation-header-divider:var(--n-navigation-header-divider, 1px solid var(--n-color-border));--_n-navigation-header-color:var(--n-navigation-header-color);--_n-navigation-header-toggle-icon-color:var(--n-navigation-header-toggle-icon-color);--_n-navigation-header-focus-style:var(--n-navigation-header-focus-style, var(--_n-navigation-dropdown-box-shadow));--_n-navigation-dropdown-box-shadow:0 0 0 1px var(--n-color-accent) inset;display:flex;flex-direction:column;block-size:100%;background:var(--_n-navigation-background-color)}.n-navigation-main{display:flex;flex-direction:column;flex:1;overflow-y:auto;overscroll-behavior-y:none}nav{flex:1;padding:var(--n-space-m)}::slotted(nord-nav-group[heading]:first-of-type){margin-block-start:calc(var(--n-space-s) * -1)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center;--n-button-text-align:start;--n-button-background-color:transparent;--n-button-border-color:transparent;--n-button-box-shadow:none;--n-button-gradient:none}slot[name=header]{--n-button-border-radius:0;--n-button-color:var(--_n-navigation-header-color);--n-button-min-block-size:var(--_n-navigation-header-block-size);--n-select-block-size:var(--n-button-min-block-size);--n-button-font-weight:var(--n-font-weight-active);--n-button-toggle-icon-color:var(--_n-navigation-header-toggle-icon-color);--n-button-padding-inline:var(--_n-navigation-header-padding-inline);block-size:var(--_n-navigation-header-block-size);background-color:var(--_n-navigation-header-background);border-block-end:var(--_n-navigation-header-divider)}slot[name=footer]{--n-button-color:var(--n-color-text-weak);--n-button-padding-inline:var(--n-space-xs);margin:var(--n-space-m)}:is([name=header],[name=footer])::slotted(:not([open]):focus-within){--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:var(--_n-navigation-dropdown-box-shadow)}slot[name=header]::slotted(:not([open], :active):focus-within){--n-button-box-shadow:var(--_n-navigation-header-focus-style)}[name=footer]::slotted(:is(:hover, [open])){--n-button-border-color:var(--n-color-border-hover)}:host([sticky-footer]) slot[name=footer]{background:var(--_n-navigation-background-color);z-index:var(--n-index-sticky);padding:var(--n-space-s) var(--n-space-m);margin:0;position:sticky;inset-block-end:0}:host([sticky-footer]) .n-navigation-main{background:linear-gradient(var(--_n-navigation-background-color) 30%,rgb(255,255,255,0)) center top,linear-gradient(rgb(255,255,255,0),var(--_n-navigation-background-color) 70%) center bottom,radial-gradient(farthest-side at 50% 0,rgb(0,0,0,.1),rgb(0,0,0,0)) center top,radial-gradient(farthest-side at 50% 100%,rgb(0,0,0,.1),rgb(0,0,0,0)) center bottom;background-repeat:no-repeat;background-size:100% 40px,100% 40px,100% 7px,100% 7px;background-attachment:local,local,scroll,scroll}`;let v=class extends e{constructor(){super(...arguments),this.headerSlot=new l(this,"header"),this.events=new s(this),this.footerObserver=null,this.allowItemsToRemainOpen=!1,this.stickyFooter=!1,this.handleActivate=o=>{var n,e;const t=o.target,a=new Set;let r=null===(n=t.parentElement)||void 0===n?void 0:n.closest("nord-nav-item");for(;r;)a.add(r),r=null===(e=r.parentElement)||void 0===e?void 0:e.closest("nord-nav-item");for(const o of this.querySelectorAll("nord-nav-item"))if(o!==t){const n=a.has(o);o.open=n||this.allowItemsToRemainOpen&&o.open,o.active=n}this.allowItemsToRemainOpen=!1}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"activate",this.handleActivate);const o=this.querySelector("nord-nav-item[active]");this.allowItemsToRemainOpen=null!=o,"undefined"!=typeof window&&this.observeFooter()}disconnectedCallback(){var o;super.disconnectedCallback(),null===(o=this.footerObserver)||void 0===o||o.disconnect(),this.footerObserver=null}observeFooter(){this.footerObserver=new MutationObserver((()=>this.requestUpdate())),this.footerObserver.observe(this,{childList:!0});const o=this.querySelector(':scope > [slot="footer"]');o&&this.footerObserver.observe(o,{attributes:!0,attributeFilter:["style","class"]})}get isFooterVisible(){if("undefined"==typeof window)return!0;const o=this.querySelector(':scope > [slot="footer"]');if(!o)return!1;const n=window.getComputedStyle(o);return"none"!==n.display&&"hidden"!==n.visibility&&"collapse"!==n.visibility&&"0"!==n.opacity&&"hidden"!==n.contentVisibility}render(){return t`<slot name="header" ?hidden="${this.headerSlot.isEmpty}"></slot><div class="n-navigation-main"><nav><slot></slot></nav>${this.stickyFooter?a:t`<slot name="footer" ?hidden="${!this.isFooterVisible}"></slot>`}</div>${this.stickyFooter?t`<slot name="footer" ?hidden="${!this.isFooterVisible}"></slot>`:a}`}};v.styles=[d,c],o([r({type:Boolean,reflect:!0,attribute:"sticky-footer"})],v.prototype,"stickyFooter",void 0),v=o([i("nord-navigation")],v);var b=v;export{b as default};
 //# sourceMappingURL=Navigation.js.map

package/lib/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["import type NavItem from '../nav-item/NavItem.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { EventController } from '../common/controllers/EventController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Navigation.css'\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-navigation-background-color=var(--n-color-nav-surface)] - Controls the background color of the navigation element.\n */\n@customElement('nord-navigation')\nexport default class Navigation extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, 'header')\n  private events = new EventController(this)\n  private allowItemsToRemainOpen = false\n\n  /**\n   * Controls whether the navigations's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    // if we add this event listener during render\n    // we seem to miss the first activate event.\n    // so let's add it as early as possible.\n    this.events.listen(this, 'activate', this.handleActivate)\n\n    // in cases where there is an initially active nav-item,\n    // we should allow any nav-items with the `open` attribute to remain open.\n    const activeItem = this.querySelector('nord-nav-item[active]')\n    this.allowItemsToRemainOpen = activeItem != null\n  }\n\n  render() {\n    return html`\n      <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n      <div class=\"n-navigation-main\">\n        <nav>\n          <slot></slot>\n        </nav>\n        ${!this.stickyFooter ? html`<slot name=\"footer\"></slot>` : nothing}\n      </div>\n      ${this.stickyFooter ? html`<slot name=\"footer\"></slot>` : nothing}\n    `\n  }\n\n  private handleActivate = (e: Event) => {\n    const target = e.target as NavItem\n    const ancestors = new Set<NavItem>()\n\n    // walk up the DOM, gathering all ancestors from the target to its top-most nav-item.\n    // it's more efficient to first gather ancestors here,\n    // than to repeatedly call item.contains(target) in the for-loop below.\n    let parent = target.parentElement?.closest('nord-nav-item')\n    while (parent) {\n      ancestors.add(parent)\n      parent = parent.parentElement?.closest('nord-nav-item')\n    }\n\n    // open and activate any items on the path, otherwise close and deactivate.\n    // however, if the item is set to open initially, we should not close it.\n    for (const item of this.querySelectorAll('nord-nav-item')) {\n      if (item !== target) {\n        const isAncestor = ancestors.has(item)\n        item.open = isAncestor || (this.allowItemsToRemainOpen && item.open)\n        item.active = isAncestor\n      }\n    }\n\n    // this is a one-time thing, purely for initial open state\n    this.allowItemsToRemainOpen = false\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-navigation': Navigation\n  }\n}\n"],"names":["Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","allowItemsToRemainOpen","stickyFooter","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","connectedCallback","super","listen","activeItem","querySelector","render","html","isEmpty","nothing","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","attribute","prototype","customElement"],"mappings":"4+GA0Be,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,OAAS,IAAIC,EAAgBJ,MAC7BA,KAAsBK,wBAAG,EAKuCL,KAAYM,cAAY,EA4BxFN,KAAAO,eAAkBC,YACxB,MAAMC,EAASD,EAAEC,OACXC,EAAY,IAAIC,IAKtB,IAAIC,EAA6B,QAApBC,EAAAJ,EAAOK,qBAAa,IAAAD,OAAA,EAAAA,EAAEE,QAAQ,iBAC3C,KAAOH,GACLF,EAAUM,IAAIJ,GACdA,UAASK,EAAAL,EAAOE,oCAAeC,QAAQ,iBAKzC,IAAK,MAAMG,KAAQlB,KAAKmB,iBAAiB,iBACvC,GAAID,IAAST,EAAQ,CACnB,MAAMW,EAAaV,EAAUW,IAAIH,GACjCA,EAAKI,KAAOF,GAAepB,KAAKK,wBAA0Ba,EAAKI,KAC/DJ,EAAKK,OAASH,CACf,CAIHpB,KAAKK,wBAAyB,CAAK,CAEtC,CApDC,iBAAAmB,GACEC,MAAMD,oBAINxB,KAAKG,OAAOuB,OAAO1B,KAAM,WAAYA,KAAKO,gBAI1C,MAAMoB,EAAa3B,KAAK4B,cAAc,yBACtC5B,KAAKK,uBAAuC,MAAdsB,CAC/B,CAED,MAAAE,GACE,OAAOC,CAAI,gCACqB9B,KAAKC,WAAW8B,0EAKzC/B,KAAKM,aAAmD0B,EAApCF,CAAI,sCAE3B9B,KAAKM,aAAewB,CAAI,8BAAgCE,GAE7D,GAnCMnC,EAAAoC,OAAS,CAACC,EAAgBC,GASuCC,EAAA,CAAvEC,EAAS,CAAEC,KAAMC,QAASC,SAAS,EAAMC,UAAW,mBAAgD5C,EAAA6C,UAAA,oBAAA,GAVlF7C,EAAUuC,EAAA,CAD9BO,EAAc,oBACM9C,SAAAA"}
+{"version":3,"file":"Navigation.js","sources":["../src/navigation/Navigation.ts"],"sourcesContent":["import type NavItem from '../nav-item/NavItem.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { EventController } from '../common/controllers/EventController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Navigation.css'\n\n/**\n * Navigation is used to display the primary navigation in the sidebar\n * of an application. Navigation includes a list of links that users\n * use to move between sections of the application.\n *\n * @status ready\n * @category navigation\n * @slot - The main section of the sidebar, for holding nav components.\n * @slot header - The top section of the sidebar.\n * @slot footer - The bottom section of the sidebar.\n *\n * @fires {NordEvent} toggle - Dispatched whenever a nav item's state changes between open and closed.\n * @fires {NordEvent} activate - Dispatched whenever a nav item has been marked as active\n *\n * @cssprop [--n-navigation-background-color=var(--n-color-nav-surface)] - Controls the background color of the navigation element.\n */\n@customElement('nord-navigation')\nexport default class Navigation extends LitElement {\n  static styles = [componentStyle, style]\n\n  private headerSlot = new SlotController(this, 'header')\n  private events = new EventController(this)\n  private footerObserver: MutationObserver | null = null\n  private allowItemsToRemainOpen = false\n\n  /**\n   * Controls whether the navigations's footer has sticky positioning.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-footer' }) stickyFooter: boolean = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    // if we add this event listener during render\n    // we seem to miss the first activate event.\n    // so let's add it as early as possible.\n    this.events.listen(this, 'activate', this.handleActivate)\n\n    // in cases where there is an initially active nav-item,\n    // we should allow any nav-items with the `open` attribute to remain open.\n    const activeItem = this.querySelector('nord-nav-item[active]')\n    this.allowItemsToRemainOpen = activeItem != null\n\n    if (typeof window !== 'undefined') {\n      this.observeFooter()\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.footerObserver?.disconnect()\n    this.footerObserver = null\n  }\n\n  /**\n   * Observe the footer slot element for visibility changes.\n   * Watches style and class attributes on the footer element itself, and\n   * childList on the host to detect footer being added/removed (e.g. v-if).\n   */\n  private observeFooter() {\n    this.footerObserver = new MutationObserver(() => this.requestUpdate())\n\n    // Watch for footer element being added/removed from the host\n    this.footerObserver.observe(this, { childList: true })\n\n    // Watch hidden attribute on the footer element directly\n    const footerEl = this.querySelector(':scope > [slot=\"footer\"]')\n    if (footerEl) {\n      this.footerObserver.observe(footerEl, {\n        attributes: true,\n        attributeFilter: ['style', 'class'],\n      })\n    }\n  }\n\n  private get isFooterVisible() {\n    // In SSR, the element is backed by a minimal DOM shim that does not implement\n    // querySelector or window.getComputedStyle. Return true so the footer slot\n    // renders as visible during server-side rendering.\n    if (typeof window === 'undefined') {\n      return true\n    }\n\n    const footerEl = this.querySelector<HTMLElement>(':scope > [slot=\"footer\"]')\n    if (!footerEl) {\n      return false\n    }\n\n    const style = window.getComputedStyle(footerEl)\n    return (\n      style.display !== 'none'\n      && style.visibility !== 'hidden'\n      && style.visibility !== 'collapse'\n      && style.opacity !== '0'\n      && style.contentVisibility !== 'hidden'\n    )\n  }\n\n  render() {\n    return html`\n      <slot name=\"header\" ?hidden=${this.headerSlot.isEmpty}></slot>\n      <div class=\"n-navigation-main\">\n        <nav>\n          <slot></slot>\n        </nav>\n        ${!this.stickyFooter ? html`<slot name=\"footer\" ?hidden=${!this.isFooterVisible}></slot>` : nothing}\n      </div>\n      ${this.stickyFooter ? html`<slot name=\"footer\" ?hidden=${!this.isFooterVisible}></slot>` : nothing}\n    `\n  }\n\n  private handleActivate = (e: Event) => {\n    const target = e.target as NavItem\n    const ancestors = new Set<NavItem>()\n\n    // walk up the DOM, gathering all ancestors from the target to its top-most nav-item.\n    // it's more efficient to first gather ancestors here,\n    // than to repeatedly call item.contains(target) in the for-loop below.\n    let parent = target.parentElement?.closest('nord-nav-item')\n    while (parent) {\n      ancestors.add(parent)\n      parent = parent.parentElement?.closest('nord-nav-item')\n    }\n\n    // open and activate any items on the path, otherwise close and deactivate.\n    // however, if the item is set to open initially, we should not close it.\n    for (const item of this.querySelectorAll('nord-nav-item')) {\n      if (item !== target) {\n        const isAncestor = ancestors.has(item)\n        item.open = isAncestor || (this.allowItemsToRemainOpen && item.open)\n        item.active = isAncestor\n      }\n    }\n\n    // this is a one-time thing, purely for initial open state\n    this.allowItemsToRemainOpen = false\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-navigation': Navigation\n  }\n}\n"],"names":["Navigation","LitElement","constructor","this","headerSlot","SlotController","events","EventController","footerObserver","allowItemsToRemainOpen","stickyFooter","handleActivate","e","target","ancestors","Set","parent","_a","parentElement","closest","add","_b","item","querySelectorAll","isAncestor","has","open","active","connectedCallback","super","listen","activeItem","querySelector","window","observeFooter","disconnectedCallback","disconnect","MutationObserver","requestUpdate","observe","childList","footerEl","attributes","attributeFilter","isFooterVisible","style","getComputedStyle","display","visibility","opacity","contentVisibility","render","html","isEmpty","nothing","styles","componentStyle","__decorate","property","type","Boolean","reflect","attribute","prototype","customElement"],"mappings":"4+GA0Be,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAAG,OAAS,IAAIC,EAAgBJ,MAC7BA,KAAcK,eAA4B,KAC1CL,KAAsBM,wBAAG,EAKuCN,KAAYO,cAAY,EAkFxFP,KAAAQ,eAAkBC,YACxB,MAAMC,EAASD,EAAEC,OACXC,EAAY,IAAIC,IAKtB,IAAIC,EAA6B,QAApBC,EAAAJ,EAAOK,qBAAa,IAAAD,OAAA,EAAAA,EAAEE,QAAQ,iBAC3C,KAAOH,GACLF,EAAUM,IAAIJ,GACdA,UAASK,EAAAL,EAAOE,oCAAeC,QAAQ,iBAKzC,IAAK,MAAMG,KAAQnB,KAAKoB,iBAAiB,iBACvC,GAAID,IAAST,EAAQ,CACnB,MAAMW,EAAaV,EAAUW,IAAIH,GACjCA,EAAKI,KAAOF,GAAerB,KAAKM,wBAA0Ba,EAAKI,KAC/DJ,EAAKK,OAASH,CACf,CAIHrB,KAAKM,wBAAyB,CAAK,CAEtC,CA1GC,iBAAAmB,GACEC,MAAMD,oBAINzB,KAAKG,OAAOwB,OAAO3B,KAAM,WAAYA,KAAKQ,gBAI1C,MAAMoB,EAAa5B,KAAK6B,cAAc,yBACtC7B,KAAKM,uBAAuC,MAAdsB,EAER,oBAAXE,QACT9B,KAAK+B,eAER,CAED,oBAAAC,SACEN,MAAMM,uBACe,QAArBlB,EAAAd,KAAKK,sBAAgB,IAAAS,GAAAA,EAAAmB,aACrBjC,KAAKK,eAAiB,IACvB,CAOO,aAAA0B,GACN/B,KAAKK,eAAiB,IAAI6B,kBAAiB,IAAMlC,KAAKmC,kBAGtDnC,KAAKK,eAAe+B,QAAQpC,KAAM,CAAEqC,WAAW,IAG/C,MAAMC,EAAWtC,KAAK6B,cAAc,4BAChCS,GACFtC,KAAKK,eAAe+B,QAAQE,EAAU,CACpCC,YAAY,EACZC,gBAAiB,CAAC,QAAS,UAGhC,CAED,mBAAYC,GAIV,GAAsB,oBAAXX,OACT,OAAO,EAGT,MAAMQ,EAAWtC,KAAK6B,cAA2B,4BACjD,IAAKS,EACH,OAAO,EAGT,MAAMI,EAAQZ,OAAOa,iBAAiBL,GACtC,MACoB,SAAlBI,EAAME,SACkB,WAArBF,EAAMG,YACe,aAArBH,EAAMG,YACY,MAAlBH,EAAMI,SACsB,WAA5BJ,EAAMK,iBAEZ,CAED,MAAAC,GACE,OAAOC,CAAI,gCACqBjD,KAAKC,WAAWiD,0EAKzClD,KAAKO,aAAoF4C,EAArEF,CAAI,iCAAgCjD,KAAKyC,mCAEhEzC,KAAKO,aAAe0C,CAAI,iCAAgCjD,KAAKyC,2BAA4BU,GAE9F,GA1FMtD,EAAAuD,OAAS,CAACC,EAAgBX,GAUuCY,EAAA,CAAvEC,EAAS,CAAEC,KAAMC,QAASC,SAAS,EAAMC,UAAW,mBAAgD9D,EAAA+D,UAAA,oBAAA,GAXlF/D,EAAUyD,EAAA,CAD9BO,EAAc,oBACMhE,SAAAA"}

package/lib/Popout-vR6LxNS9.js

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

package/lib/Popout-vR6LxNS9.js.map

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

package/lib/Popout.js

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