@nordhealth/components 4.7.0 → 4.8.1

package/lib/index.js

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

package/lib/src/dropdown/Dropdown.d.ts

@@ -48,6 +48,10 @@ export default class Dropdown extends Dropdown_base {
      * of the dropdown.
      */
     size: "s" | "m" | "l";
+    /**
+     * Set to true to always display the dropdown as a floating overlay, even on smaller viewports.
+     */
+    alwaysFloating: boolean;
     connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;
     private handleBlur;

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

@@ -30,6 +30,10 @@ export default class Popout extends Popout_base {
      * Set an optional anchor element to align against, replacing the triggering element.
      */
     anchor?: string;
+    /**
+     * Set to true to always display the popout as a floating overlay, even on smaller viewports.
+     */
+    alwaysFloating: boolean;
     /**
      * Show the popout.
      * A promise that resolves to a `TransitionEvent` when the popout's show animation ends or is cancelled.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordhealth/components",
-  "version": "4.7.0",
+  "version": "4.8.1",
   "description": "This package includes Nord Design System Web Components",
   "author": "Nordhealth <support@nordhealth.design>",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -179,5 +179,5 @@
       }
     ]
   },
-  "gitHead": "9ded0738f437907ddaa5f68066225db9d4211e9b"
+  "gitHead": "8387c68db1c92953fdf5e4aa5612d10b488b5437"
 }

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

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

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

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