@nordhealth/components 4.24.2 → 4.25.0

package/lib/Popout-DtEL0HZ0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popout-DtEL0HZ0.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 * @cssprop [--n-popout-offset-inline=0] - Extra inline-axis offset applied to the popout's computed position. Positive values shift the popout toward the inline-end (right in LTR).\n * @cssprop [--n-popout-offset-block=0] - Extra block-axis offset applied to the popout's computed position. Positive values shift the popout downward.\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-vR6LxNS9.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-DtEL0HZ0.js";import"./Component-DSU3Qp0O.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";
 //# sourceMappingURL=Popout.js.map

package/lib/Tooltip.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as i,l as e,o as s,f as o,s as n}from"./positioning-D-K8Mueq.js";import{css as r,LitElement as a,html as l}from"lit";import{state as d,property as h,customElement as c}from"lit/decorators.js";import{E as p}from"./EventController-BBOmvfLa.js";import{S as u}from"./SlotController-Z6eG7LSZ.js";import{o as v}from"./observe-D0n0zOfU.js";import{f as m}from"./fsm-Bq5jMQrK.js";import{s as y}from"./Component-DSU3Qp0O.js";function b(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function f(t,i,e){t.setAttribute(i,e.join(" "))}const g=r`:host{--_n-tooltip-max-size:var(--n-tooltip-max-size, 50ch);--_n-tooltip-background:rgb(20, 20, 20, 0.95);--_n-tooltip-color:#fff;--_n-tooltip-key-border:rgb(255, 255, 255, 0.03);--_n-tooltip-key-background:rgb(255, 255, 255, 0.1);position:fixed;pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transition-timing-function:ease;z-index:var(--n-index-popout)}.n-tooltip{gap:var(--n-space-s);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);line-height:var(--n-line-height);color:var(--_n-tooltip-color);padding:calc(var(--n-space-s)/ 1.5) var(--n-space-s);background-color:var(--_n-tooltip-background);border-radius:var(--n-border-radius-s);word-break:break-word;max-inline-size:var(--_n-tooltip-max-size)}.n-tooltip,.n-tooltip-shortcut{display:flex;align-items:center}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){box-sizing:border-box;margin:0;inline-size:var(--n-size-icon-m);block-size:var(--n-size-icon-m);border-radius:var(--n-border-radius-s);border:1px solid var(--_n-tooltip-key-border)!important;padding:1px!important;text-align:center;font-size:var(--n-font-size-xs);line-height:var(--n-line-height-tight);letter-spacing:-.5px;vertical-align:middle!important;background-color:var(--_n-tooltip-key-background)}[slot=shortcut]::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;var x;function k(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}function w(t){var i;const e=null===(i=null==t?void 0:t.focusableRef)||void 0===i?void 0:i.value;return e&&"focusableRef"in e?w(e):e}const{transition:z}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let E=x=class extends a{constructor(){super(...arguments),this.shortcutSlot=new u(this,"shortcut"),this.events=new p(this),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>i(t,this,{strategy:"fixed",placement:e(this.position),middleware:[s(8),o(),n({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=z(this.state,"positioned")})),this.hideTooltip=()=>{this.state=z(this.state,"hide")},this.reposition=()=>{this.state=z(this.state,"reposition")},this.handleShow=t=>{const i=t.target;k(i,this)&&(this.currentElement=i,this.state=z(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{const t=w(this.currentElement);t&&this.proxy&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,t.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=b(t,i);s.includes(e)||f(t,i,s.concat(e))}(t,"aria-describedby",this.id))},this.removeDescribedBy=()=>{const t=w(this.currentElement);t&&this.proxy&&(this.proxy.remove(),function(t,i,e){const s=b(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(t,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback(),this.proxy=document.createElement("span");const t=this.getRootNode();this.events.listen(t,"keydown",this.hideOnEscape),this.events.listen(t,"mouseover",this.handleShow),this.events.listen(t,"focusin",this.handleShow),this.events.listen(t,"mouseout",this.handleHide),this.events.listen(t,"focusout",this.handleHide),this.events.listen(t,"click",this.handleHide,{capture:!0}),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.proxy)||void 0===t||t.remove(),this.proxy=void 0}render(){return l`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}handleIdChange(){this.id||console.warn("NORD: The tooltip requires an id attribute and value")}handleStateChange(t){var i;switch(this.state){case"hidden":"waiting"===t&&this.timeoutId&&clearTimeout(this.timeoutId),this.removeDescribedBy(),this.currentElement=void 0,this.style.visibility="hidden",this.style.opacity="0";break;case"visible":{this.timeoutId=void 0,x.lastOpened=this,this.addDescribedBy();const[t,i]=this.coords;this.style.left=`${t}px`,this.style.top=`${i}px`,this.style.visibility="visible",this.style.opacity="1";break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=z(this.state,"timeout")}),this.delay);break;case"positioning":x.lastOpened!==this&&(null===(i=x.lastOpened)||void 0===i||i.hideTooltip()),this.currentElement&&this.updatePosition(this.currentElement)}}};E.styles=[y,g],t([d()],E.prototype,"state",void 0),t([h({reflect:!0})],E.prototype,"position",void 0),t([h({reflect:!0})],E.prototype,"role",void 0),t([h({reflect:!0})],E.prototype,"id",void 0),t([h({reflect:!0,type:Number})],E.prototype,"delay",void 0),t([v("id")],E.prototype,"handleIdChange",null),t([v("state")],E.prototype,"handleStateChange",null),E=x=t([c("nord-tooltip")],E);var C=E;export{C as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as i,l as e,o,f as s,s as n}from"./positioning-D-K8Mueq.js";import{css as r,LitElement as a,html as l}from"lit";import{state as d,property as h,customElement as p}from"lit/decorators.js";import{E as c}from"./EventController-BBOmvfLa.js";import{S as u}from"./SlotController-Z6eG7LSZ.js";import{o as v}from"./observe-D0n0zOfU.js";import{f as m}from"./fsm-Bq5jMQrK.js";import{s as y}from"./Component-DSU3Qp0O.js";function b(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function f(t,i,e){t.setAttribute(i,e.join(" "))}const g=r`:host{--_n-tooltip-max-size:var(--n-tooltip-max-size, 50ch);--_n-tooltip-background:rgb(20, 20, 20, 0.95);--_n-tooltip-color:#fff;--_n-tooltip-key-border:rgb(255, 255, 255, 0.03);--_n-tooltip-key-background:rgb(255, 255, 255, 0.1);position:fixed;pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transition-timing-function:ease;z-index:var(--n-index-popout);inset:auto;inline-size:auto;block-size:auto;margin:0;padding:0;border:none;background:0 0;overflow:visible;color:inherit}.n-tooltip{gap:var(--n-space-s);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);line-height:var(--n-line-height);color:var(--_n-tooltip-color);padding:calc(var(--n-space-s)/ 1.5) var(--n-space-s);background-color:var(--_n-tooltip-background);border-radius:var(--n-border-radius-s);word-break:break-word;max-inline-size:var(--_n-tooltip-max-size)}.n-tooltip,.n-tooltip-shortcut{display:flex;align-items:center}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){box-sizing:border-box;margin:0;inline-size:var(--n-size-icon-m);block-size:var(--n-size-icon-m);border-radius:var(--n-border-radius-s);border:1px solid var(--_n-tooltip-key-border)!important;padding:1px!important;text-align:center;font-size:var(--n-font-size-xs);line-height:var(--n-line-height-tight);letter-spacing:-.5px;vertical-align:middle!important;background-color:var(--_n-tooltip-key-background)}[slot=shortcut]::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;var x;function k(t){return t.nodeType===Node.ELEMENT_NODE}function w(t){var i;const e=null===(i=null==t?void 0:t.focusableRef)||void 0===i?void 0:i.value;return e&&"focusableRef"in e?w(e):e}const{transition:z}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let E=x=class extends a{constructor(){super(...arguments),this.shortcutSlot=new u(this,"shortcut"),this.events=new c(this),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.open=!1,this.updatePosition=t=>i(t,this,{strategy:"fixed",placement:e(this.position),middleware:[o(8),s(),n({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=z(this.state,"positioned")})),this.hideTooltip=()=>{this.state=z(this.state,"hide")},this.reposition=()=>{this.state=z(this.state,"reposition")},this.handleShow=t=>{const i=function(t,i){return i.id&&k(t)?t.closest(`[aria-describedby~="${CSS.escape(i.id)}"]`):null}(t.target,this);i&&(this.currentElement=i,this.state=z(this.state,"show"))},this.handleHide=t=>{const i=t.target;this.currentElement&&k(i)&&this.currentElement.contains(i)&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{const t=w(this.currentElement);t&&this.proxy&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,t.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const o=b(t,i);o.includes(e)||f(t,i,o.concat(e))}(t,"aria-describedby",this.id))},this.removeDescribedBy=()=>{const t=w(this.currentElement);t&&this.proxy&&(this.proxy.remove(),function(t,i,e){const o=b(t,i);o.includes(e)&&f(t,i,o.filter((t=>t!==e)))}(t,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback(),this.proxy=document.createElement("span");const t=this.getRootNode();this.events.listen(t,"keydown",this.hideOnEscape),this.events.listen(t,"mouseover",this.handleShow),this.events.listen(t,"focusin",this.handleShow),this.events.listen(t,"mouseout",this.handleHide),this.events.listen(t,"focusout",this.handleHide),this.events.listen(t,"click",this.handleHide,{capture:!0}),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.proxy)||void 0===t||t.remove(),this.proxy=void 0}render(){return l`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}handleIdChange(){this.id||console.warn("NORD: The tooltip requires an id attribute and value")}handleStateChange(t){var i;switch(this.state){case"hidden":"waiting"===t&&this.timeoutId&&clearTimeout(this.timeoutId),this.removeDescribedBy(),this.currentElement=void 0,this.style.visibility="hidden",this.style.opacity="0",this.open=!1,this.leaveTopLayer();break;case"visible":{this.timeoutId=void 0,x.lastOpened=this,this.addDescribedBy();const[t,i]=this.coords;this.style.left=`${t}px`,this.style.top=`${i}px`,this.style.visibility="visible",this.style.opacity="1",this.open=!0;break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=z(this.state,"timeout")}),this.delay);break;case"positioning":x.lastOpened!==this&&(null===(i=x.lastOpened)||void 0===i||i.hideTooltip()),this.enterTopLayer(),this.currentElement&&this.updatePosition(this.currentElement)}}enterTopLayer(){if("function"==typeof this.showPopover)try{this.setAttribute("popover","manual"),this.showPopover()}catch(t){this.removeAttribute("popover")}}leaveTopLayer(){this.removeAttribute("popover")}};E.styles=[y,g],t([d()],E.prototype,"state",void 0),t([h({reflect:!0})],E.prototype,"position",void 0),t([h({reflect:!0})],E.prototype,"role",void 0),t([h({reflect:!0})],E.prototype,"id",void 0),t([h({reflect:!0,type:Number})],E.prototype,"delay",void 0),t([h({type:Boolean,reflect:!0})],E.prototype,"open",void 0),t([v("id")],E.prototype,"handleIdChange",null),t([v("state")],E.prototype,"handleStateChange",null),E=x=t([p("nord-tooltip")],E);var C=E;export{C as default};
 //# sourceMappingURL=Tooltip.js.map

package/lib/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/common/attribute.ts","../src/tooltip/Tooltip.ts"],"sourcesContent":["function getTokens(element: Element, attr: string) {\n  const value = element.getAttribute(attr)\n  return value ? value.split(/\\s+/) : []\n}\n\nfunction setTokens(element: Element, attr: string, tokens: string[]) {\n  element.setAttribute(attr, tokens.join(' '))\n}\n\n/**\n * Carefully adds a token to a space-separated attribute\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add\n */\nexport function add(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (!tokens.includes(token)) {\n    setTokens(element, attr, tokens.concat(token))\n  }\n}\n\n/**\n * Carefully removes a token from a space-separated attribute.\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove\n */\nexport function remove(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (tokens.includes(token)) {\n    setTokens(\n      element,\n      attr,\n      tokens.filter(t => t !== token),\n    )\n  }\n}\n","import type { States } from '../common/fsm.js'\nimport type { FocusableMixinInterface } from '../common/mixins/FocusableMixin.js'\nimport { computePosition, flip, offset, shift } from '@floating-ui/dom'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport * as attr from '../common/attribute.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { fsm } from '../common/fsm.js'\nimport { logicalToPhysical } from '../common/positioning.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Tooltip.css'\n\n// @ts-expect-error we're being naughty and accessing a protected field!\n// however this means we always get the correct types,\n// and it will ensure this file is not forgotten about if focusable mixin ever changes\ntype FocusableElement = HTMLElement & Pick<FocusableMixinInterface, 'focusableRef'>\n\nfunction isElement(el: Node): el is Element {\n  return el.nodeType === Node.ELEMENT_NODE\n}\n\nfunction referencesTooltip(node: Node, tooltip: Tooltip) {\n  return Boolean(tooltip.id) && isElement(node) && node.getAttribute('aria-describedby') === tooltip.id\n}\n\nfunction getFocusable(el?: FocusableElement): HTMLElement | undefined {\n  const focusable = el?.focusableRef?.value as HTMLElement | FocusableElement | undefined\n\n  if (focusable && 'focusableRef' in focusable) {\n    return getFocusable(focusable)\n  }\n\n  return focusable\n}\n\nconst { transition } = fsm({\n  hidden: {\n    show: 'waiting',\n  },\n  visible: {\n    hide: 'hidden',\n    reposition: 'positioning',\n    show: 'positioning',\n  },\n  waiting: {\n    timeout: 'positioning',\n    hide: 'hidden',\n  },\n  positioning: {\n    positioned: 'visible',\n    hide: 'hidden',\n  },\n})\n\ntype TooltipStates = States<typeof transition>\n\n/**\n * Tooltips are floating containers for displaying additional information\n * for the currently focused element. A tooltip can be useful when you want\n * to e.g. give a hint about an existing Command Menu shortcut.\n *\n * @status ready\n * @category overlay\n * @slot - The tooltip content\n * @slot shortcut - Optional slot that holds shortcut keys to access the subject\n * @cssprop [--n-tooltip-max-size=50ch] - Controls the maximum inline size, or width, of the tooltip.\n */\n@customElement('nord-tooltip')\nexport default class Tooltip extends LitElement {\n  static styles = [componentStyle, style]\n\n  // tracks the last tooltip opened, so we can enforce only one is ever open at a time\n  private static lastOpened?: Tooltip\n\n  private shortcutSlot = new SlotController(this, 'shortcut')\n  private events = new EventController(this)\n\n  // The current element which revealed the tooltip shown\n  private currentElement?: FocusableElement\n  private timeoutId?: ReturnType<typeof setTimeout>\n\n  /**\n   * the proxy element is for cases where the targetElement is a web component,\n   * and the WC has a focusable child in its shadow root e.g. a button component.\n   * in this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\n   * and wire up aria-describedby from the focusable element to the proxy.\n   * when the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship.\n   */\n  private proxy?: HTMLSpanElement\n\n  /**\n   * The current state of the tooltip, dependent on the state machine\n   */\n  @state() private state: TooltipStates = 'hidden'\n\n  // The current coordinates for the tooltip\n  private coords: [number, number] = [0, 0]\n\n  /**\n   * Control the position of the tooltip component.\n   * When set to \"none\", the tooltip will be shown above\n   * but accommodate for browser boundaries.\n   */\n  @property({ reflect: true }) position: 'block-end' | 'block-start' | 'inline-start' | 'inline-end' = 'block-start'\n\n  /**\n   * The tooltip role, set on the component by default.\n   */\n\n  @property({ reflect: true }) role = 'tooltip'\n\n  /**\n   * The id for the active element to reference via aria-describedby.\n   */\n\n  @property({ reflect: true }) id: string = ''\n\n  /**\n   * The delay in milliseconds before the tooltip is opened.\n   */\n  @property({ reflect: true, type: Number }) delay: number = 500\n\n  /**\n   * Apply all event listeners\n   */\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.proxy = document.createElement('span')\n\n    const rootNode = this.getRootNode() as Document\n\n    this.events.listen(rootNode, 'keydown', this.hideOnEscape)\n\n    // we treat mouseover and focusin the same, since they both show tooltip\n    this.events.listen(rootNode, 'mouseover', this.handleShow)\n    this.events.listen(rootNode, 'focusin', this.handleShow)\n\n    // we treat focusout, mouseout, click the same, since they all hide tooltip\n    this.events.listen(rootNode, 'mouseout', this.handleHide)\n    this.events.listen(rootNode, 'focusout', this.handleHide)\n    // we use event capture here to handle cases where e.g. a close button causes its ancestor to be removed from the DOM.\n    // in this case the click event will never bubble up to the rootNode, so we never receive it, and the tooltip can remain open\n    // by capturing, we get this event first, and can close the tooltip eagerly\n    this.events.listen(rootNode, 'click', this.handleHide, { capture: true })\n\n    this.events.listen(window, 'resize', this.reposition, { passive: true })\n    this.events.listen(window, 'scroll', this.reposition, { passive: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.proxy?.remove()\n    this.proxy = undefined\n  }\n\n  render() {\n    return html`\n      <div class=\"n-tooltip\">\n        <slot></slot>\n        <div class=\"n-tooltip-shortcut\" ?hidden=${this.shortcutSlot.isEmpty}>\n          <slot class=\"n-tooltip-key\" name=\"shortcut\"></slot>\n        </div>\n      </div>\n    `\n  }\n\n  @observe('id')\n  protected handleIdChange() {\n    if (!this.id) {\n      console.warn('NORD: The tooltip requires an id attribute and value')\n    }\n  }\n\n  @observe('state')\n  private handleStateChange(prevState: TooltipStates) {\n    switch (this.state) {\n      case 'hidden': {\n        if (prevState === 'waiting' && this.timeoutId) {\n          clearTimeout(this.timeoutId)\n        }\n\n        this.removeDescribedBy()\n        this.currentElement = undefined\n        this.style.visibility = 'hidden'\n        this.style.opacity = '0'\n        break\n      }\n\n      case 'visible': {\n        this.timeoutId = undefined\n        Tooltip.lastOpened = this\n        this.addDescribedBy()\n\n        const [x, y] = this.coords\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.left = `${x}px`\n        this.style.top = `${y}px`\n        this.style.visibility = 'visible'\n        this.style.opacity = '1'\n        break\n      }\n\n      case 'waiting': {\n        this.timeoutId = setTimeout(() => {\n          this.state = transition(this.state, 'timeout')\n        }, this.delay)\n        break\n      }\n\n      case 'positioning': {\n        if (Tooltip.lastOpened !== this) {\n          Tooltip.lastOpened?.hideTooltip()\n        }\n\n        if (this.currentElement) {\n          this.updatePosition(this.currentElement)\n        }\n        break\n      }\n    }\n  }\n\n  /**\n   * Setting and updating the position of the tooltip\n   */\n  private updatePosition = (currentElement: HTMLElement) =>\n    computePosition(currentElement, this, {\n      strategy: 'fixed',\n      placement: logicalToPhysical(this.position),\n      middleware: [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n      ],\n    }).then(({ x, y }) => {\n      this.coords = [x, y]\n      this.state = transition(this.state, 'positioned')\n    })\n\n  private hideTooltip = () => {\n    this.state = transition(this.state, 'hide')\n  }\n\n  private reposition = () => {\n    this.state = transition(this.state, 'reposition')\n  }\n\n  private handleShow = (e: Event) => {\n    const target = e.target as FocusableElement\n\n    if (referencesTooltip(target, this)) {\n      this.currentElement = target\n      this.state = transition(this.state, 'show')\n    }\n  }\n\n  private handleHide = (e: Event) => {\n    if (e.target === this.currentElement) {\n      this.hideTooltip()\n    }\n  }\n\n  private hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this.hideTooltip()\n    }\n  }\n\n  private addDescribedBy = () => {\n    const focusable = getFocusable(this.currentElement)\n\n    if (focusable && this.proxy) {\n      this.proxy.hidden = true\n      this.proxy.id = this.id\n      this.proxy.textContent = this.textContent\n\n      focusable.insertAdjacentElement('afterend', this.proxy)\n      attr.add(focusable, 'aria-describedby', this.id)\n    }\n  }\n\n  private removeDescribedBy = () => {\n    const focusable = getFocusable(this.currentElement)\n\n    if (focusable && this.proxy) {\n      this.proxy.remove()\n      attr.remove(focusable, 'aria-describedby', this.id)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tooltip': Tooltip\n  }\n}\n"],"names":["getTokens","element","attr","value","getAttribute","split","setTokens","tokens","setAttribute","join","referencesTooltip","node","tooltip","Boolean","id","nodeType","Node","ELEMENT_NODE","getFocusable","el","focusable","_a","focusableRef","transition","fsm","hidden","show","visible","hide","reposition","waiting","timeout","positioning","positioned","Tooltip","Tooltip_1","LitElement","constructor","this","shortcutSlot","SlotController","events","EventController","state","coords","position","role","delay","updatePosition","currentElement","computePosition","strategy","placement","logicalToPhysical","middleware","offset","flip","shift","padding","then","x","y","hideTooltip","handleShow","e","target","handleHide","hideOnEscape","key","addDescribedBy","proxy","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","document","createElement","rootNode","getRootNode","listen","capture","window","passive","disconnectedCallback","undefined","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","style","visibility","opacity","lastOpened","left","top","setTimeout","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../src/common/attribute.ts","../src/tooltip/Tooltip.ts"],"sourcesContent":["function getTokens(element: Element, attr: string) {\n  const value = element.getAttribute(attr)\n  return value ? value.split(/\\s+/) : []\n}\n\nfunction setTokens(element: Element, attr: string, tokens: string[]) {\n  element.setAttribute(attr, tokens.join(' '))\n}\n\n/**\n * Carefully adds a token to a space-separated attribute\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add\n */\nexport function add(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (!tokens.includes(token)) {\n    setTokens(element, attr, tokens.concat(token))\n  }\n}\n\n/**\n * Carefully removes a token from a space-separated attribute.\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove\n */\nexport function remove(element: Element, attr: string, token: string) {\n  const tokens = getTokens(element, attr)\n\n  if (tokens.includes(token)) {\n    setTokens(\n      element,\n      attr,\n      tokens.filter(t => t !== token),\n    )\n  }\n}\n","import type { States } from '../common/fsm.js'\nimport type { FocusableMixinInterface } from '../common/mixins/FocusableMixin.js'\nimport { computePosition, flip, offset, shift } from '@floating-ui/dom'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport * as attr from '../common/attribute.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { fsm } from '../common/fsm.js'\nimport { logicalToPhysical } from '../common/positioning.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Tooltip.css'\n\n// @ts-expect-error we're being naughty and accessing a protected field!\n// however this means we always get the correct types,\n// and it will ensure this file is not forgotten about if focusable mixin ever changes\ntype FocusableElement = HTMLElement & Pick<FocusableMixinInterface, 'focusableRef'>\n\nfunction isElement(el: Node): el is Element {\n  return el.nodeType === Node.ELEMENT_NODE\n}\n\nfunction referencesTooltip(node: Node, tooltip: Tooltip): Element | null {\n  if (!tooltip.id || !isElement(node))\n    return null\n\n  // Walk up so hovering a descendant (icon, span, etc.) still resolves to\n  // the ancestor that carries aria-describedby.\n  return node.closest(`[aria-describedby~=\"${CSS.escape(tooltip.id)}\"]`)\n}\n\nfunction getFocusable(el?: FocusableElement): HTMLElement | undefined {\n  const focusable = el?.focusableRef?.value as HTMLElement | FocusableElement | undefined\n\n  if (focusable && 'focusableRef' in focusable) {\n    return getFocusable(focusable)\n  }\n\n  return focusable\n}\n\nconst { transition } = fsm({\n  hidden: {\n    show: 'waiting',\n  },\n  visible: {\n    hide: 'hidden',\n    reposition: 'positioning',\n    show: 'positioning',\n  },\n  waiting: {\n    timeout: 'positioning',\n    hide: 'hidden',\n  },\n  positioning: {\n    positioned: 'visible',\n    hide: 'hidden',\n  },\n})\n\ntype TooltipStates = States<typeof transition>\n\n/**\n * Tooltips are floating containers for displaying additional information\n * for the currently focused element. A tooltip can be useful when you want\n * to e.g. give a hint about an existing Command Menu shortcut.\n *\n * @status ready\n * @category overlay\n * @slot - The tooltip content\n * @slot shortcut - Optional slot that holds shortcut keys to access the subject\n * @cssprop [--n-tooltip-max-size=50ch] - Controls the maximum inline size, or width, of the tooltip.\n */\n@customElement('nord-tooltip')\nexport default class Tooltip extends LitElement {\n  static styles = [componentStyle, style]\n\n  // tracks the last tooltip opened, so we can enforce only one is ever open at a time\n  private static lastOpened?: Tooltip\n\n  private shortcutSlot = new SlotController(this, 'shortcut')\n  private events = new EventController(this)\n\n  // The current element which revealed the tooltip shown\n  private currentElement?: FocusableElement\n  private timeoutId?: ReturnType<typeof setTimeout>\n\n  /**\n   * the proxy element is for cases where the targetElement is a web component,\n   * and the WC has a focusable child in its shadow root e.g. a button component.\n   * in this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\n   * and wire up aria-describedby from the focusable element to the proxy.\n   * when the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship.\n   */\n  private proxy?: HTMLSpanElement\n\n  /**\n   * The current state of the tooltip, dependent on the state machine\n   */\n  @state() private state: TooltipStates = 'hidden'\n\n  // The current coordinates for the tooltip\n  private coords: [number, number] = [0, 0]\n\n  /**\n   * Control the position of the tooltip component.\n   * When set to \"none\", the tooltip will be shown above\n   * but accommodate for browser boundaries.\n   */\n  @property({ reflect: true }) position: 'block-end' | 'block-start' | 'inline-start' | 'inline-end' = 'block-start'\n\n  /**\n   * The tooltip role, set on the component by default.\n   */\n\n  @property({ reflect: true }) role = 'tooltip'\n\n  /**\n   * The id for the active element to reference via aria-describedby.\n   */\n\n  @property({ reflect: true }) id: string = ''\n\n  /**\n   * The delay in milliseconds before the tooltip is opened.\n   */\n  @property({ reflect: true, type: Number }) delay: number = 500\n\n  /**\n   * Indicates whether the tooltip is currently open.\n   */\n  @property({ type: Boolean, reflect: true }) open: boolean = false\n\n  /**\n   * Apply all event listeners\n   */\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.proxy = document.createElement('span')\n\n    const rootNode = this.getRootNode() as Document\n\n    this.events.listen(rootNode, 'keydown', this.hideOnEscape)\n\n    // we treat mouseover and focusin the same, since they both show tooltip\n    this.events.listen(rootNode, 'mouseover', this.handleShow)\n    this.events.listen(rootNode, 'focusin', this.handleShow)\n\n    // we treat focusout, mouseout, click the same, since they all hide tooltip\n    this.events.listen(rootNode, 'mouseout', this.handleHide)\n    this.events.listen(rootNode, 'focusout', this.handleHide)\n    // we use event capture here to handle cases where e.g. a close button causes its ancestor to be removed from the DOM.\n    // in this case the click event will never bubble up to the rootNode, so we never receive it, and the tooltip can remain open\n    // by capturing, we get this event first, and can close the tooltip eagerly\n    this.events.listen(rootNode, 'click', this.handleHide, { capture: true })\n\n    this.events.listen(window, 'resize', this.reposition, { passive: true })\n    this.events.listen(window, 'scroll', this.reposition, { passive: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.proxy?.remove()\n    this.proxy = undefined\n  }\n\n  render() {\n    return html`\n      <div class=\"n-tooltip\">\n        <slot></slot>\n        <div class=\"n-tooltip-shortcut\" ?hidden=${this.shortcutSlot.isEmpty}>\n          <slot class=\"n-tooltip-key\" name=\"shortcut\"></slot>\n        </div>\n      </div>\n    `\n  }\n\n  @observe('id')\n  protected handleIdChange() {\n    if (!this.id) {\n      console.warn('NORD: The tooltip requires an id attribute and value')\n    }\n  }\n\n  @observe('state')\n  private handleStateChange(prevState: TooltipStates) {\n    switch (this.state) {\n      case 'hidden': {\n        if (prevState === 'waiting' && this.timeoutId) {\n          clearTimeout(this.timeoutId)\n        }\n\n        this.removeDescribedBy()\n        this.currentElement = undefined\n        this.style.visibility = 'hidden'\n        this.style.opacity = '0'\n        this.open = false\n        this.leaveTopLayer()\n        break\n      }\n\n      case 'visible': {\n        this.timeoutId = undefined\n        Tooltip.lastOpened = this\n        this.addDescribedBy()\n\n        const [x, y] = this.coords\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.left = `${x}px`\n        this.style.top = `${y}px`\n        this.style.visibility = 'visible'\n        this.style.opacity = '1'\n        this.open = true\n        break\n      }\n\n      case 'waiting': {\n        this.timeoutId = setTimeout(() => {\n          this.state = transition(this.state, 'timeout')\n        }, this.delay)\n        break\n      }\n\n      case 'positioning': {\n        if (Tooltip.lastOpened !== this) {\n          Tooltip.lastOpened?.hideTooltip()\n        }\n\n        this.enterTopLayer()\n        if (this.currentElement) {\n          this.updatePosition(this.currentElement)\n        }\n        break\n      }\n    }\n  }\n\n  /**\n   * Setting and updating the position of the tooltip\n   */\n  private updatePosition = (currentElement: HTMLElement) =>\n    computePosition(currentElement, this, {\n      strategy: 'fixed',\n      placement: logicalToPhysical(this.position),\n      middleware: [\n        offset(8),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n      ],\n    }).then(({ x, y }) => {\n      this.coords = [x, y]\n      this.state = transition(this.state, 'positioned')\n    })\n\n  private hideTooltip = () => {\n    this.state = transition(this.state, 'hide')\n  }\n\n  private reposition = () => {\n    this.state = transition(this.state, 'reposition')\n  }\n\n  private handleShow = (e: Event) => {\n    const node = e.target as Node\n    const reference = referencesTooltip(node, this) as FocusableElement | null\n\n    if (reference) {\n      this.currentElement = reference\n      this.state = transition(this.state, 'show')\n    }\n  }\n\n  private handleHide = (e: Event) => {\n    const node = e.target as Node\n    if (this.currentElement && isElement(node) && this.currentElement.contains(node)) {\n      this.hideTooltip()\n    }\n  }\n\n  private hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      this.hideTooltip()\n    }\n  }\n\n  private addDescribedBy = () => {\n    const focusable = getFocusable(this.currentElement)\n\n    if (focusable && this.proxy) {\n      this.proxy.hidden = true\n      this.proxy.id = this.id\n      this.proxy.textContent = this.textContent\n\n      focusable.insertAdjacentElement('afterend', this.proxy)\n      attr.add(focusable, 'aria-describedby', this.id)\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   * `overflow: hidden|auto` or `contain` on any ancestor.\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  private removeDescribedBy = () => {\n    const focusable = getFocusable(this.currentElement)\n\n    if (focusable && this.proxy) {\n      this.proxy.remove()\n      attr.remove(focusable, 'aria-describedby', this.id)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tooltip': Tooltip\n  }\n}\n"],"names":["getTokens","element","attr","value","getAttribute","split","setTokens","tokens","setAttribute","join","isElement","el","nodeType","Node","ELEMENT_NODE","getFocusable","focusable","_a","focusableRef","transition","fsm","hidden","show","visible","hide","reposition","waiting","timeout","positioning","positioned","Tooltip","Tooltip_1","LitElement","constructor","this","shortcutSlot","SlotController","events","EventController","state","coords","position","role","id","delay","open","updatePosition","currentElement","computePosition","strategy","placement","logicalToPhysical","middleware","offset","flip","shift","padding","then","x","y","hideTooltip","handleShow","e","reference","node","tooltip","closest","CSS","escape","referencesTooltip","target","handleHide","contains","hideOnEscape","key","addDescribedBy","proxy","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","document","createElement","rootNode","getRootNode","listen","capture","window","passive","disconnectedCallback","undefined","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","style","visibility","opacity","leaveTopLayer","lastOpened","left","top","setTimeout","enterTopLayer","showPopover","removeAttribute","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","Boolean","observe","customElement"],"mappings":"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"}

package/lib/Truncate.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as i,isServer as r,html as s}from"lit";import{state as o,property as n,customElement as l}from"lit/decorators.js";import{createRef as a,ref as c}from"lit/directives/ref.js";import"./Tooltip.js";import"./positioning-D-K8Mueq.js";import"./EventController-BBOmvfLa.js";import"./SlotController-Z6eG7LSZ.js";import"./observe-D0n0zOfU.js";import"./fsm-Bq5jMQrK.js";import"./Component-DSU3Qp0O.js";const d=e`:host{display:inline-block;inline-size:100%;max-inline-size:100%;min-inline-size:0;vertical-align:bottom}.n-truncate{display:block;white-space:nowrap;overflow:hidden}:host([line-clamp]) .n-truncate{white-space:normal;max-block-size:calc(var(--_n-truncate-line-clamp,2) * 1lh)}.n-truncate-source{display:none}`;let p=0;let h=class extends i{constructor(){super(...arguments),this.spanRef=a(),this.tooltipId="n-truncate-"+ ++p,this.currentTrigger=null,this.isTruncated=!1,this.text="",this.position="block-start",this.delay=500,this.lineClamp=1,this.noTooltip=!1}connectedCallback(){super.connectedCallback(),r||(this.observer=new ResizeObserver((()=>{requestAnimationFrame((()=>this.measure()))})),this.contentObserver=new MutationObserver((()=>{this.captureText(),this.measure()})),this.contentObserver.observe(this,{characterData:!0,childList:!0,subtree:!0}),this.captureText())}firstUpdated(){const t=this.spanRef.value;t&&this.observer&&this.observer.observe(t)}updated(){this.syncTooltip()}disconnectedCallback(){var t,e,i;super.disconnectedCallback(),null===(t=this.observer)||void 0===t||t.disconnect(),this.observer=void 0,null===(e=this.contentObserver)||void 0===e||e.disconnect(),this.contentObserver=void 0,null===(i=this.tooltipElement)||void 0===i||i.remove(),this.tooltipElement=void 0,this.clearTrigger()}captureText(){var t;const e=(null!==(t=this.textContent)&&void 0!==t?t:"").trim();e!==this.text&&(this.text=e)}measure(){const t=this.spanRef.value;if(!t)return;const e=this.text;if(!e)return t.textContent="",void(this.isTruncated=!1);if(t.textContent=e,this.fits(t))return void(this.isTruncated=!1);let i=0,r=e.length;for(;i<r;){const s=Math.ceil((i+r)/2);t.textContent=m(e.slice(0,s))+"…",this.fits(t)?i=s:r=s-1}t.textContent=m(e.slice(0,i))+"…",this.isTruncated=!0}fits(t){return this.lineClamp>1?t.scrollHeight<=t.clientHeight:t.scrollWidth<=t.clientWidth}findTriggerElement(){let t=this;for(;t&&t!==document.body&&t!==document.documentElement;){if("none"!==getComputedStyle(t).pointerEvents)return t;t=t.parentElement}return this}addDescribedById(t,e){const i=t.getAttribute("aria-describedby"),r=i?i.split(/\s+/).filter(Boolean):[];r.includes(e)||(r.push(e),t.setAttribute("aria-describedby",r.join(" ")))}removeDescribedById(t,e){const i=t.getAttribute("aria-describedby");if(!i)return;const r=i.split(/\s+/).filter(Boolean).filter((t=>t!==e));r.length?t.setAttribute("aria-describedby",r.join(" ")):t.removeAttribute("aria-describedby")}clearTrigger(){this.currentTrigger&&(this.removeDescribedById(this.currentTrigger,this.tooltipId),this.currentTrigger=null)}syncTooltip(){var t,e;if(!this.isTruncated||!this.text)return this.removeAttribute("truncated"),null===(t=this.tooltipElement)||void 0===t||t.remove(),this.tooltipElement=void 0,void this.clearTrigger();if(this.setAttribute("truncated",""),this.noTooltip)return null===(e=this.tooltipElement)||void 0===e||e.remove(),this.tooltipElement=void 0,void this.clearTrigger();this.tooltipElement||(this.tooltipElement=document.createElement("nord-tooltip"),this.tooltipElement.id=this.tooltipId,document.body.appendChild(this.tooltipElement)),this.tooltipElement.setAttribute("position",this.position),this.tooltipElement.setAttribute("delay",String(this.delay)),this.tooltipElement.textContent=this.text;const i=this.findTriggerElement();i!==this.currentTrigger&&(this.currentTrigger&&this.removeDescribedById(this.currentTrigger,this.tooltipId),this.currentTrigger=i),this.addDescribedById(i,this.tooltipId)}willUpdate(t){t.has("lineClamp")&&(this.lineClamp>1?(this.setAttribute("line-clamp",String(this.lineClamp)),this.style.setProperty("--_n-truncate-line-clamp",String(this.lineClamp))):(this.removeAttribute("line-clamp"),this.style.removeProperty("--_n-truncate-line-clamp")))}render(){return s`<span ${c(this.spanRef)} class="n-truncate"></span><slot class="n-truncate-source" aria-hidden="true"></slot>`}};h.styles=d,t([o()],h.prototype,"isTruncated",void 0),t([o()],h.prototype,"text",void 0),t([n({reflect:!0})],h.prototype,"position",void 0),t([n({reflect:!0,type:Number})],h.prototype,"delay",void 0),t([n({type:Number,attribute:"line-clamp"})],h.prototype,"lineClamp",void 0),t([n({type:Boolean,reflect:!0,attribute:"no-tooltip"})],h.prototype,"noTooltip",void 0),h=t([l("nord-truncate")],h);var u=h;function m(t){return t.replace(/[\s.,;:!?-]+$/u,"")}export{u as default};
+//# sourceMappingURL=Truncate.js.map

package/lib/Truncate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Truncate.js","sources":["../src/truncate/Truncate.ts"],"sourcesContent":["import type { PropertyValues } from 'lit'\nimport { html, isServer, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport style from './Truncate.css'\nimport '../tooltip/Tooltip.js'\n\nlet counter = 0\n\nconst ELLIPSIS = '…'\n\n/**\n * Truncate is a text wrapper that applies single-line or multi-line ellipsis\n * truncation and automatically reveals a tooltip with the full text when the\n * content actually overflows its container.\n *\n * Truncation is performed in JS (the DOM text node is replaced with a\n * pre-truncated string + ellipsis), matching the approach used by Ant Design\n * Pro's `Ellipsis` component. This avoids the well-known CSS\n * `text-overflow: ellipsis` quirk where clicking inside the clipped text\n * shifts the line and loses the ellipsis — there is no overflow to scroll\n * because the visible text fits exactly.\n *\n * @status ready\n * @category text\n * @slot - The full text content. Plain text is recommended; rich markup is\n *   not supported (only `textContent` is read for truncation).\n */\n@customElement('nord-truncate')\nexport default class Truncate extends LitElement {\n  static styles = style\n\n  private spanRef = createRef<HTMLSpanElement>()\n  private observer?: ResizeObserver\n  private contentObserver?: MutationObserver\n  private tooltipId = `n-truncate-${++counter}`\n  // The tooltip lives in document.body (not in shadow DOM) so its\n  // root-level mouseover listener can see hovers on the trigger element,\n  // and so aria-describedby can resolve across the same document tree.\n  private tooltipElement?: HTMLElement\n  // The element that actually receives pointer events (often this host, but\n  // when slotted into nord-button — which sets `::slotted(*) { pointer-events:\n  // none }` — it resolves to the nord-button itself). aria-describedby is set\n  // on this element so the tooltip's `closest()` lookup succeeds.\n  private currentTrigger: Element | null = null\n\n  @state() private isTruncated = false\n  @state() private text = ''\n\n  /**\n   * Position of the tooltip relative to the truncated text. Mirrors `nord-tooltip`.\n   */\n  @property({ reflect: true })\n  position: 'block-end' | 'block-start' | 'inline-start' | 'inline-end' = 'block-start'\n\n  /**\n   * Delay in milliseconds before the tooltip opens.\n   */\n  @property({ reflect: true, type: Number })\n  delay = 500\n\n  /**\n   * Maximum number of lines before truncating. Defaults to `1` (single line).\n   * Values `>= 2` allow the text to wrap up to that many lines before the\n   * ellipsis kicks in.\n   */\n  @property({ type: Number, attribute: 'line-clamp' })\n  lineClamp = 1\n\n  /**\n   * When set, the component still truncates the text but does not render\n   * a hover tooltip with the full content. The `truncated` attribute is\n   * still reflected so consumers can style it.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-tooltip' })\n  noTooltip = false\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    if (isServer)\n      return\n\n    this.observer = new ResizeObserver(() => {\n      // Defer to next frame so the browser has finished the layout pass\n      // triggered by the resize before we read geometry.\n      requestAnimationFrame(() => this.measure())\n    })\n    // Catch content changes the ResizeObserver can't see: text-only mutations\n    // via reactive bindings (Lit/Vue/React often mutate characterData), or\n    // children being replaced. Without this, swapping the label to a\n    // longer/shorter string after first render would never re-evaluate\n    // truncation.\n    this.contentObserver = new MutationObserver(() => {\n      this.captureText()\n      this.measure()\n    })\n    this.contentObserver.observe(this, {\n      characterData: true,\n      childList: true,\n      subtree: true,\n    })\n    this.captureText()\n  }\n\n  protected firstUpdated() {\n    const span = this.spanRef.value\n    if (span && this.observer) {\n      this.observer.observe(span)\n    }\n  }\n\n  protected updated() {\n    this.syncTooltip()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.observer?.disconnect()\n    this.observer = undefined\n    this.contentObserver?.disconnect()\n    this.contentObserver = undefined\n    this.tooltipElement?.remove()\n    this.tooltipElement = undefined\n    this.clearTrigger()\n  }\n\n  private captureText() {\n    const next = (this.textContent ?? '').trim()\n    if (next !== this.text) {\n      this.text = next\n    }\n  }\n\n  /**\n   * Measure overflow and, if needed, binary-search the longest prefix of the\n   * full text that fits in the available space, then commit `<prefix>…` as\n   * the visible text. Same algorithm as Ant Design Pro's `Ellipsis`.\n   */\n  private measure() {\n    const span = this.spanRef.value\n    if (!span)\n      return\n\n    const fullText = this.text\n    if (!fullText) {\n      span.textContent = ''\n      this.isTruncated = false\n      return\n    }\n\n    // Reset to full text and check whether it already fits.\n    span.textContent = fullText\n    if (this.fits(span)) {\n      this.isTruncated = false\n      return\n    }\n\n    // Binary search: largest prefix length such that `prefix + …` fits.\n    let lo = 0\n    let hi = fullText.length\n    while (lo < hi) {\n      const mid = Math.ceil((lo + hi) / 2)\n      span.textContent = trimEnd(fullText.slice(0, mid)) + ELLIPSIS\n      if (this.fits(span)) {\n        lo = mid\n      }\n      else {\n        hi = mid - 1\n      }\n    }\n\n    span.textContent = trimEnd(fullText.slice(0, lo)) + ELLIPSIS\n    this.isTruncated = true\n  }\n\n  private fits(span: HTMLElement): boolean {\n    if (this.lineClamp > 1) {\n      return span.scrollHeight <= span.clientHeight\n    }\n    return span.scrollWidth <= span.clientWidth\n  }\n\n  /**\n   * Walk up the DOM until we find an ancestor that actually receives pointer\n   * events. Needed because `nord-button` (and similar) set\n   * `::slotted(*) { pointer-events: none }`, so this host can never see hover.\n   * Falls back to this host if no such ancestor is found.\n   */\n  private findTriggerElement(): Element {\n    // pointer-events walk from the host itself so a standalone truncate\n    // (default pointer-events: auto) is correctly returned as the trigger.\n    // eslint-disable-next-line ts/no-this-alias -- intentional: start the\n    let element: Element | null = this\n    while (element && element !== document.body && element !== document.documentElement) {\n      if (getComputedStyle(element).pointerEvents !== 'none') {\n        return element\n      }\n      element = element.parentElement\n    }\n    return this\n  }\n\n  private addDescribedById(element: Element, id: string) {\n    const existing = element.getAttribute('aria-describedby')\n    const ids = existing ? existing.split(/\\s+/).filter(Boolean) : []\n    if (!ids.includes(id)) {\n      ids.push(id)\n      element.setAttribute('aria-describedby', ids.join(' '))\n    }\n  }\n\n  private removeDescribedById(element: Element, id: string) {\n    const existing = element.getAttribute('aria-describedby')\n    if (!existing)\n      return\n    const ids = existing.split(/\\s+/).filter(Boolean).filter(x => x !== id)\n    if (ids.length) {\n      element.setAttribute('aria-describedby', ids.join(' '))\n    }\n    else {\n      element.removeAttribute('aria-describedby')\n    }\n  }\n\n  private clearTrigger() {\n    if (this.currentTrigger) {\n      this.removeDescribedById(this.currentTrigger, this.tooltipId)\n      this.currentTrigger = null\n    }\n  }\n\n  private syncTooltip() {\n    if (!this.isTruncated || !this.text) {\n      this.removeAttribute('truncated')\n      this.tooltipElement?.remove()\n      this.tooltipElement = undefined\n      this.clearTrigger()\n      return\n    }\n\n    this.setAttribute('truncated', '')\n\n    if (this.noTooltip) {\n      this.tooltipElement?.remove()\n      this.tooltipElement = undefined\n      this.clearTrigger()\n      return\n    }\n\n    if (!this.tooltipElement) {\n      this.tooltipElement = document.createElement('nord-tooltip')\n      this.tooltipElement.id = this.tooltipId\n      document.body.appendChild(this.tooltipElement)\n    }\n    this.tooltipElement.setAttribute('position', this.position)\n    this.tooltipElement.setAttribute('delay', String(this.delay))\n    this.tooltipElement.textContent = this.text\n\n    const trigger = this.findTriggerElement()\n    if (trigger !== this.currentTrigger) {\n      if (this.currentTrigger) {\n        this.removeDescribedById(this.currentTrigger, this.tooltipId)\n      }\n      this.currentTrigger = trigger\n    }\n    this.addDescribedById(trigger, this.tooltipId)\n  }\n\n  protected willUpdate(changed: PropertyValues) {\n    if (changed.has('lineClamp')) {\n      if (this.lineClamp > 1) {\n        this.setAttribute('line-clamp', String(this.lineClamp))\n        this.style.setProperty('--_n-truncate-line-clamp', String(this.lineClamp))\n      }\n      else {\n        this.removeAttribute('line-clamp')\n        this.style.removeProperty('--_n-truncate-line-clamp')\n      }\n    }\n  }\n\n  render() {\n    // The visible truncated text lives in a dedicated shadow-DOM span whose\n    // `textContent` is managed imperatively in `measure()` (binary-search\n    // updates would otherwise destroy Lit's ChildPart markers). The slot,\n    // hidden visually, keeps the full text in light DOM so that assistive\n    // tech and copy/paste of the host element still see the complete content.\n    return html`\n      <span ${ref(this.spanRef)} class=\"n-truncate\"></span>\n      <slot class=\"n-truncate-source\" aria-hidden=\"true\"></slot>\n    `\n  }\n}\n\nfunction trimEnd(input: string): string {\n  return input.replace(/[\\s.,;:!?-]+$/u, '')\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-truncate': Truncate\n  }\n}\n"],"names":["counter","Truncate","LitElement","constructor","this","spanRef","createRef","tooltipId","currentTrigger","isTruncated","text","position","delay","lineClamp","noTooltip","connectedCallback","super","isServer","observer","ResizeObserver","requestAnimationFrame","measure","contentObserver","MutationObserver","captureText","observe","characterData","childList","subtree","firstUpdated","span","value","updated","syncTooltip","disconnectedCallback","_a","disconnect","undefined","_b","_c","tooltipElement","remove","clearTrigger","next","textContent","trim","fullText","fits","lo","hi","length","mid","Math","ceil","trimEnd","slice","scrollHeight","clientHeight","scrollWidth","clientWidth","findTriggerElement","element","document","body","documentElement","getComputedStyle","pointerEvents","parentElement","addDescribedById","id","existing","getAttribute","ids","split","filter","Boolean","includes","push","setAttribute","join","removeDescribedById","x","removeAttribute","createElement","appendChild","String","trigger","willUpdate","changed","has","style","setProperty","removeProperty","render","html","ref","styles","__decorate","state","prototype","property","reflect","type","Number","attribute","customElement","input","replace"],"mappings":"8wBAOA,IAAIA,EAAU,EAsBC,IAAMC,EAAN,cAAuBC,EAAvB,WAAAC,uBAGLC,KAAOC,QAAGC,IAGVF,KAAAG,UAAY,iBAAgBP,EAS5BI,KAAcI,eAAmB,KAExBJ,KAAWK,aAAG,EACdL,KAAIM,KAAG,GAMxBN,KAAQO,SAAgE,cAMxEP,KAAKQ,MAAG,IAQRR,KAASS,UAAG,EAQZT,KAASU,WAAG,CA0Nb,CAxNC,iBAAAC,GACEC,MAAMD,oBAEFE,IAGJb,KAAKc,SAAW,IAAIC,gBAAe,KAGjCC,uBAAsB,IAAMhB,KAAKiB,WAAU,IAO7CjB,KAAKkB,gBAAkB,IAAIC,kBAAiB,KAC1CnB,KAAKoB,cACLpB,KAAKiB,SAAS,IAEhBjB,KAAKkB,gBAAgBG,QAAQrB,KAAM,CACjCsB,eAAe,EACfC,WAAW,EACXC,SAAS,IAEXxB,KAAKoB,cACN,CAES,YAAAK,GACR,MAAMC,EAAO1B,KAAKC,QAAQ0B,MACtBD,GAAQ1B,KAAKc,UACfd,KAAKc,SAASO,QAAQK,EAEzB,CAES,OAAAE,GACR5B,KAAK6B,aACN,CAED,oBAAAC,aACElB,MAAMkB,uBACS,QAAfC,EAAA/B,KAAKc,gBAAU,IAAAiB,GAAAA,EAAAC,aACfhC,KAAKc,cAAWmB,EACM,QAAtBC,EAAAlC,KAAKkB,uBAAiB,IAAAgB,GAAAA,EAAAF,aACtBhC,KAAKkB,qBAAkBe,EACF,QAArBE,EAAAnC,KAAKoC,sBAAgB,IAAAD,GAAAA,EAAAE,SACrBrC,KAAKoC,oBAAiBH,EACtBjC,KAAKsC,cACN,CAEO,WAAAlB,SACN,MAAMmB,GAAwB,QAAhBR,EAAA/B,KAAKwC,mBAAW,IAAAT,EAAAA,EAAI,IAAIU,OAClCF,IAASvC,KAAKM,OAChBN,KAAKM,KAAOiC,EAEf,CAOO,OAAAtB,GACN,MAAMS,EAAO1B,KAAKC,QAAQ0B,MAC1B,IAAKD,EACH,OAEF,MAAMgB,EAAW1C,KAAKM,KACtB,IAAKoC,EAGH,OAFAhB,EAAKc,YAAc,QACnBxC,KAAKK,aAAc,GAMrB,GADAqB,EAAKc,YAAcE,EACf1C,KAAK2C,KAAKjB,GAEZ,YADA1B,KAAKK,aAAc,GAKrB,IAAIuC,EAAK,EACLC,EAAKH,EAASI,OAClB,KAAOF,EAAKC,GAAI,CACd,MAAME,EAAMC,KAAKC,MAAML,EAAKC,GAAM,GAClCnB,EAAKc,YAAcU,EAAQR,EAASS,MAAM,EAAGJ,IA1JlC,IA2JP/C,KAAK2C,KAAKjB,GACZkB,EAAKG,EAGLF,EAAKE,EAAM,CAEd,CAEDrB,EAAKc,YAAcU,EAAQR,EAASS,MAAM,EAAGP,IAnKhC,IAoKb5C,KAAKK,aAAc,CACpB,CAEO,IAAAsC,CAAKjB,GACX,OAAI1B,KAAKS,UAAY,EACZiB,EAAK0B,cAAgB1B,EAAK2B,aAE5B3B,EAAK4B,aAAe5B,EAAK6B,WACjC,CAQO,kBAAAC,GAIN,IAAIC,EAA0BzD,KAC9B,KAAOyD,GAAWA,IAAYC,SAASC,MAAQF,IAAYC,SAASE,iBAAiB,CACnF,GAAgD,SAA5CC,iBAAiBJ,GAASK,cAC5B,OAAOL,EAETA,EAAUA,EAAQM,aACnB,CACD,OAAO/D,IACR,CAEO,gBAAAgE,CAAiBP,EAAkBQ,GACzC,MAAMC,EAAWT,EAAQU,aAAa,oBAChCC,EAAMF,EAAWA,EAASG,MAAM,OAAOC,OAAOC,SAAW,GAC1DH,EAAII,SAASP,KAChBG,EAAIK,KAAKR,GACTR,EAAQiB,aAAa,mBAAoBN,EAAIO,KAAK,MAErD,CAEO,mBAAAC,CAAoBnB,EAAkBQ,GAC5C,MAAMC,EAAWT,EAAQU,aAAa,oBACtC,IAAKD,EACH,OACF,MAAME,EAAMF,EAASG,MAAM,OAAOC,OAAOC,SAASD,QAAOO,GAAKA,IAAMZ,IAChEG,EAAItB,OACNW,EAAQiB,aAAa,mBAAoBN,EAAIO,KAAK,MAGlDlB,EAAQqB,gBAAgB,mBAE3B,CAEO,YAAAxC,GACFtC,KAAKI,iBACPJ,KAAK4E,oBAAoB5E,KAAKI,eAAgBJ,KAAKG,WACnDH,KAAKI,eAAiB,KAEzB,CAEO,WAAAyB,WACN,IAAK7B,KAAKK,cAAgBL,KAAKM,KAK7B,OAJAN,KAAK8E,gBAAgB,aACA,QAArB/C,EAAA/B,KAAKoC,sBAAgB,IAAAL,GAAAA,EAAAM,SACrBrC,KAAKoC,oBAAiBH,OACtBjC,KAAKsC,eAMP,GAFAtC,KAAK0E,aAAa,YAAa,IAE3B1E,KAAKU,UAIP,OAHqB,QAArBwB,EAAAlC,KAAKoC,sBAAgB,IAAAF,GAAAA,EAAAG,SACrBrC,KAAKoC,oBAAiBH,OACtBjC,KAAKsC,eAIFtC,KAAKoC,iBACRpC,KAAKoC,eAAiBsB,SAASqB,cAAc,gBAC7C/E,KAAKoC,eAAe6B,GAAKjE,KAAKG,UAC9BuD,SAASC,KAAKqB,YAAYhF,KAAKoC,iBAEjCpC,KAAKoC,eAAesC,aAAa,WAAY1E,KAAKO,UAClDP,KAAKoC,eAAesC,aAAa,QAASO,OAAOjF,KAAKQ,QACtDR,KAAKoC,eAAeI,YAAcxC,KAAKM,KAEvC,MAAM4E,EAAUlF,KAAKwD,qBACjB0B,IAAYlF,KAAKI,iBACfJ,KAAKI,gBACPJ,KAAK4E,oBAAoB5E,KAAKI,eAAgBJ,KAAKG,WAErDH,KAAKI,eAAiB8E,GAExBlF,KAAKgE,iBAAiBkB,EAASlF,KAAKG,UACrC,CAES,UAAAgF,CAAWC,GACfA,EAAQC,IAAI,eACVrF,KAAKS,UAAY,GACnBT,KAAK0E,aAAa,aAAcO,OAAOjF,KAAKS,YAC5CT,KAAKsF,MAAMC,YAAY,2BAA4BN,OAAOjF,KAAKS,cAG/DT,KAAK8E,gBAAgB,cACrB9E,KAAKsF,MAAME,eAAe,6BAG/B,CAED,MAAAC,GAME,OAAOC,CAAI,SACDC,EAAI3F,KAAKC,+FAGpB,GAtQMJ,EAAM+F,OAAGN,EAgBCO,EAAA,CAAhBC,KAAmCjG,EAAAkG,UAAA,mBAAA,GACnBF,EAAA,CAAhBC,KAAyBjG,EAAAkG,UAAA,YAAA,GAM1BF,EAAA,CADCG,EAAS,CAAEC,SAAS,KACgEpG,EAAAkG,UAAA,gBAAA,GAMrFF,EAAA,CADCG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,UACtBtG,EAAAkG,UAAA,aAAA,GAQXF,EAAA,CADCG,EAAS,CAAEE,KAAMC,OAAQC,UAAW,gBACxBvG,EAAAkG,UAAA,iBAAA,GAQbF,EAAA,CADCG,EAAS,CAAEE,KAAM3B,QAAS0B,SAAS,EAAMG,UAAW,gBACpCvG,EAAAkG,UAAA,iBAAA,GA9CElG,EAAQgG,EAAA,CAD5BQ,EAAc,kBACMxG,SAAAA,EA0QrB,SAASqD,EAAQoD,GACf,OAAOA,EAAMC,QAAQ,iBAAkB,GACzC"}