@nordhealth/components 4.15.0 → 4.16.0

package/lib/DropdownSubmenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownSubmenu.js","sources":["../src/dropdown-submenu/DropdownSubmenu.ts"],"sourcesContent":["import type Dropdown from '../dropdown/Dropdown.js'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './DropdownSubmenu.css'\nimport '../popout/Popout.js'\n\nlet popoutCounter = 0\n\n/**\n * Dropdown submenu nests a secondary menu within a parent dropdown.\n * The trigger slot contains the item that opens the submenu, and the default slot contains the submenu items.\n *\n * Supports both hover (non-touch) and click (touch-devices/accessibility) interactions.\n *\n * On small screens, uses mobile stack navigation: tapping a submenu trigger replaces the\n * dropdown's visible content with the submenu's items and shows a back button.\n *\n * @status ready\n * @category action\n *\n * @slot trigger - The element that opens the submenu (typically nord-dropdown-item).\n * @slot - The submenu content items.\n *\n * @fires {NordEvent} open - Forwarded from the internal nord-popout.\n * @fires {NordEvent} close - Forwarded from the internal nord-popout.\n * @fires {CustomEvent} nord-submenu-navigate - Fired when mobile stack navigation activates this submenu.\n */\n@customElement('nord-dropdown-submenu')\nexport default class DropdownSubmenu extends LitElement {\n  static styles = [componentStyle, style]\n\n  @query('nord-popout')\n  private popout?: Popout\n\n  @property({ reflect: true, type: Boolean, attribute: 'mobile-active' })\n  mobileActive = false\n\n  private readonly popoutId = `nord-dropdown-submenu-popout-${++popoutCounter}`\n  private events = new EventController(this)\n  private currentTriggerElement: HTMLElement | null = null\n  private popoutOpen = false\n  private readonly mobileMediaQuery = window.matchMedia('(max-width: 35.9375em)')\n  @state() private isSmallScreen = this.mobileMediaQuery.matches\n  private parentDropdownAlwaysFloating = false\n\n  private get shouldUseMobileStack(): boolean {\n    return this.isSmallScreen && !this.parentDropdownAlwaysFloating\n  }\n\n  private get parentDropdown(): Dropdown | null {\n    return this.closest<Dropdown>('nord-dropdown')\n  }\n\n  private get isInSubmenuStack(): boolean {\n    const parent = this.parentDropdown\n    if (!parent)\n      return false\n    return parent.submenuStackRef.includes(this)\n  }\n\n  private get isDeepestInStack(): boolean {\n    const parent = this.parentDropdown\n    if (!parent)\n      return false\n    return parent.deepestSubmenu === this\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // Set aria-haspopup on trigger before first render\n    const triggerElement = this.querySelector<HTMLElement>('[slot=\"trigger\"]')\n    triggerElement?.setAttribute('aria-haspopup', 'menu')\n\n    // Read alwaysFloating from parent dropdown\n    const parentDropdown = this.closest<Dropdown>('nord-dropdown')\n    if (parentDropdown) {\n      this.parentDropdownAlwaysFloating = parentDropdown.alwaysFloating\n      // Close this submenu when a sibling regular item is hovered\n      this.events.listen(parentDropdown, 'mouseover', this.handleParentDropdownMouseOver)\n    }\n\n    // Listen for screen size changes (use correct breakpoint)\n    this.events.listen(this.mobileMediaQuery, 'change', (event: MediaQueryListEvent) => {\n      this.isSmallScreen = event.matches\n      this.requestUpdate()\n    })\n  }\n\n  render() {\n    // Mobile stack navigation: show content inline when active\n    if (this.shouldUseMobileStack && this.mobileActive) {\n      // Add active class for any submenu in the stack, and is-deepest-active for the deepest one\n      return html`\n        <slot name=\"trigger\"></slot>\n        <div class=${classMap({\n          'n-dropdown-submenu-content': true,\n          'active': this.isInSubmenuStack,\n          'is-deepest-active': this.isDeepestInStack,\n        })} @keydown=${this.handleContentKeydown}>\n          <slot></slot>\n        </div>\n      `\n    }\n\n    // Desktop/always-floating mode: show popout\n    return html`\n      <slot\n        name=\"trigger\"\n        aria-controls=${this.popoutId}\n        @slotchange=${this.handleTriggerSlotChange}\n      ></slot>\n      <nord-popout\n        id=${this.popoutId}\n        position=\"inline-end\"\n        always-floating\n        @open=${this.handlePopoutOpen}\n        @close=${this.handlePopoutClose}\n      >\n        <div\n          class=\"n-dropdown-submenu-content\"\n          @keydown=${this.handleContentKeydown}\n        >\n          <slot></slot>\n        </div>\n      </nord-popout>\n    `\n  }\n\n  private handleTriggerSlotChange() {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    const triggerElement = slot?.assignedElements()[0] as HTMLElement | undefined\n\n    // Remove listeners from previous trigger element\n    if (this.currentTriggerElement && this.currentTriggerElement !== triggerElement) {\n      this.currentTriggerElement.removeEventListener('mouseenter', this.handleTriggerMouseEnter)\n      this.currentTriggerElement.removeEventListener('click', this.handleTriggerClick)\n      this.currentTriggerElement.removeEventListener('keydown', this.handleTriggerKeydown)\n    }\n\n    this.currentTriggerElement = triggerElement ?? null\n\n    if (!triggerElement)\n      return\n\n    triggerElement.setAttribute('aria-haspopup', 'menu')\n\n    const isTouchDevice = !window.matchMedia('(hover: hover)').matches\n\n    // Non-touch devices: hover to open\n    this.events.listen(triggerElement, 'mouseenter', this.handleTriggerMouseEnter)\n    // Non-touch devices or small screens: click to navigate/open\n    if (!isTouchDevice || this.isSmallScreen) {\n      this.events.listen(triggerElement, 'click', this.handleTriggerClick)\n    }\n    // Keyboard: arrow keys for navigation\n    this.events.listen(triggerElement, 'keydown', this.handleTriggerKeydown)\n  }\n\n  private handleTriggerMouseEnter = () => {\n    // On mobile, don't open popout on hover — only on click\n    if (this.shouldUseMobileStack)\n      return\n\n    this.closeOtherSubmenus()\n    this.popout?.show()\n  }\n\n  private handleTriggerClick = (event: MouseEvent) => {\n    event.preventDefault()\n    event.stopImmediatePropagation()\n\n    if (this.shouldUseMobileStack) {\n      this.navigateIntoSubmenu()\n      return\n    }\n\n    this.closeOtherSubmenus()\n    this.popout?.show()\n  }\n\n  private handleTriggerKeydown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowRight' || event.key === 'Enter') {\n      event.preventDefault()\n\n      if (this.shouldUseMobileStack) {\n        this.navigateIntoSubmenu()\n        return\n      }\n\n      this.closeOtherSubmenus()\n      this.popout?.show()\n      this.updateComplete.then(() => {\n        this.querySelector<HTMLElement>('nord-dropdown-item')?.focus()\n      })\n    }\n  }\n\n  private handleContentKeydown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault()\n      event.stopPropagation()\n\n      if (this.shouldUseMobileStack && this.mobileActive) {\n        this.closest<Dropdown>('nord-dropdown')?.navigateBack()\n        return\n      }\n\n      this.popout?.hide(true)\n    }\n  }\n\n  private handlePopoutOpen = () => {\n    this.popoutOpen = true\n    this.closeOtherSubmenus()\n  }\n\n  private handlePopoutClose = (event: Event) => {\n    event.stopPropagation()\n    this.popoutOpen = false\n  }\n\n  private handleParentDropdownMouseOver = (event: MouseEvent) => {\n    // Don't close on mouseover during mobile stack navigation\n    if (this.shouldUseMobileStack)\n      return\n\n    const target = event.target as HTMLElement\n    const isRegularDropdownItem = target.tagName === 'NORD-DROPDOWN-ITEM' && !this.contains(target)\n    if (isRegularDropdownItem && this.popoutOpen) {\n      event.stopImmediatePropagation()\n      this.popout?.hide()\n    }\n  }\n\n  private closeOtherSubmenus() {\n    // Don't close siblings during mobile stack navigation\n    if (this.shouldUseMobileStack)\n      return\n\n    // Find the immediate parent container (dropdown or submenu)\n    const immediateParent = this.parentElement?.closest('nord-dropdown, nord-dropdown-submenu')\n    if (!immediateParent)\n      return\n\n    // Close only siblings at the same level\n    Array.from(\n      immediateParent.querySelectorAll<DropdownSubmenu>(':scope > nord-dropdown-submenu'),\n    ).forEach((sibling) => {\n      if (sibling !== this)\n        sibling.close()\n    })\n  }\n\n  /**\n   * Deactivate mobile stack navigation (remove from stack).\n   * @internal\n   */\n  deactivateMobile() {\n    this.mobileActive = false\n\n    // Clear aria-expanded that may have been set by Popout during hover\n    const triggerSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    const triggerElement = triggerSlot?.assignedElements()[0] as HTMLElement | undefined\n    triggerElement?.removeAttribute('aria-expanded')\n  }\n\n  /**\n   * Read trigger text for back button title in Dropdown.\n   * @internal\n   */\n  get label(): string {\n    const triggerSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    return triggerSlot?.assignedElements()[0]?.textContent?.trim() ?? ''\n  }\n\n  /**\n   * Close the submenu programmatically.\n   * Returns a promise that resolves when the close animation completes.\n   */\n  close(): Promise<TransitionEvent | void> {\n    if (this.mobileActive) {\n      this.deactivateMobile()\n      return Promise.resolve()\n    }\n\n    if (!this.popout) {\n      return Promise.reject(new Error('DropdownSubmenu: popout component not found or not ready'))\n    }\n    return this.popout.hide()\n  }\n\n  /**\n   * Navigate into this submenu using mobile stack navigation.\n   * @internal\n   */\n  private navigateIntoSubmenu() {\n    this.mobileActive = true\n    this.dispatchEvent(\n      new CustomEvent('nord-submenu-navigate', { bubbles: true, detail: { submenu: this } }),\n    )\n    this.updateComplete.then(() => {\n      // Focus on first submenu item (not back button in header)\n      const contentDiv = this.querySelector('.n-dropdown-submenu-content')\n      const firstItem = contentDiv?.querySelector<HTMLElement>('nord-dropdown-item')\n      firstItem?.focus()\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-dropdown-submenu': DropdownSubmenu\n  }\n}\n"],"names":["popoutCounter","DropdownSubmenu","LitElement","constructor","this","mobileActive","popoutId","events","EventController","currentTriggerElement","popoutOpen","mobileMediaQuery","window","matchMedia","isSmallScreen","matches","parentDropdownAlwaysFloating","handleTriggerMouseEnter","shouldUseMobileStack","closeOtherSubmenus","_a","popout","show","handleTriggerClick","event","preventDefault","stopImmediatePropagation","navigateIntoSubmenu","handleTriggerKeydown","key","updateComplete","then","querySelector","focus","handleContentKeydown","stopPropagation","closest","navigateBack","_b","hide","handlePopoutOpen","handlePopoutClose","handleParentDropdownMouseOver","target","tagName","contains","parentDropdown","isInSubmenuStack","parent","submenuStackRef","includes","isDeepestInStack","deepestSubmenu","connectedCallback","super","triggerElement","setAttribute","alwaysFloating","listen","requestUpdate","render","html","classMap","active","handleTriggerSlotChange","slot","shadowRoot","assignedElements","removeEventListener","isTouchDevice","immediateParent","parentElement","Array","from","querySelectorAll","forEach","sibling","close","deactivateMobile","triggerSlot","removeAttribute","label","_d","textContent","_c","trim","Promise","resolve","reject","Error","dispatchEvent","CustomEvent","bubbles","detail","submenu","contentDiv","firstItem","styles","componentStyle","style","__decorate","query","prototype","property","reflect","type","Boolean","attribute","state","customElement"],"mappings":"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"}

package/lib/LocalizeController.js

@@ -1,2 +1,2 @@
-import{isServer as t}from"lit";import{resolveTranslation as n,subscribeToTranslationRegistration as o,subscribeToDocumentLang as s}from"./translation.js";import i from"./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";function a(){}class l{constructor(t,o={onLangChange:a}){this.host=t,this.options=o,this.handleLangChange=()=>{const t=n(this.lang);this.resolvedTranslation!==t&&(this.resolvedTranslation=t,this.options.onLangChange(),this.host.requestUpdate())},t.addController(this),this.resolvedTranslation=n(this.lang)}get lang(){return t?this.host.lang||"en-US":this.host.lang||document.documentElement.lang}get resolvedLang(){return this.resolvedTranslation.$lang}hostConnected(){this.unsubscribeTranslationRegistration=o(this.handleLangChange);const t=n(this.lang);this.resolvedTranslation!==t&&(this.resolvedTranslation=t),this.host.getAttribute("lang")?(this.observer=new MutationObserver(this.handleLangChange),this.observer.observe(this.host,{attributes:!0,attributeFilter:["lang"]})):this.unsubscribeDocumentLang=s(this.handleLangChange),this.options.onLangChange()}hostDisconnected(){var t,n,o;null===(t=this.unsubscribeDocumentLang)||void 0===t||t.call(this),null===(n=this.unsubscribeTranslationRegistration)||void 0===n||n.call(this),null===(o=this.observer)||void 0===o||o.disconnect()}term(t,...n){var o,s;const{resolvedTranslation:a,resolvedLang:l}=this,e=this.host.localName;null==a[e]?console.warn(`NORD: Missing translations for component \`${e}\` in lang: \`${l}\``):null==a[e][t]&&console.warn(`NORD: Missing translation key \`${String(t)}\` for component \`${e}\` in lang \`${l}\``);const r=null!==(s=null===(o=a[e])||void 0===o?void 0:o[t])&&void 0!==s?s:i[e][t];return"function"==typeof r?r(...n):r}}export{l as LocalizeController};
+import{isServer as t}from"lit";import{resolveTranslation as n,subscribeToTranslationRegistration as o,subscribeToDocumentLang as s}from"./translation.js";import i from"./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";function a(){}class l{constructor(t,o={onLangChange:a}){this.host=t,this.options=o,this.handleLangChange=()=>{const t=n(this.lang);this.resolvedTranslation!==t&&(this.resolvedTranslation=t,this.options.onLangChange(),this.host.requestUpdate())},t.addController(this),this.resolvedTranslation=n(this.lang)}get lang(){return t?this.host.lang||"en-US":this.host.lang||document.documentElement.lang}get resolvedLang(){return this.resolvedTranslation.$lang}hostConnected(){this.unsubscribeTranslationRegistration=o(this.handleLangChange);const t=n(this.lang);this.resolvedTranslation!==t&&(this.resolvedTranslation=t),this.host.getAttribute("lang")?(this.observer=new MutationObserver(this.handleLangChange),this.observer.observe(this.host,{attributes:!0,attributeFilter:["lang"]})):this.unsubscribeDocumentLang=s(this.handleLangChange),this.options.onLangChange()}hostDisconnected(){var t,n,o;null===(t=this.unsubscribeDocumentLang)||void 0===t||t.call(this),null===(n=this.unsubscribeTranslationRegistration)||void 0===n||n.call(this),null===(o=this.observer)||void 0===o||o.disconnect()}term(t,...n){var o;const{resolvedTranslation:s,resolvedLang:a}=this,l=this.host.localName,e=s[l];null==e?console.warn(`NORD: Missing translations for component \`${l}\` in lang: \`${a}\``):null==e[t]&&console.warn(`NORD: Missing translation key \`${String(t)}\` for component \`${l}\` in lang \`${a}\``);const r=i[l],h=null!==(o=null==e?void 0:e[t])&&void 0!==o?o:r[t];return"function"==typeof h?h(...n):h}}export{l as LocalizeController};
 //# sourceMappingURL=LocalizeController.js.map

package/lib/LocalizeController.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type {\n  Translation,\n  WellKnownKeys,\n} from './translation.js'\nimport { isServer } from 'lit'\nimport {\n  fallback,\n  resolveTranslation,\n  subscribeToDocumentLang,\n  subscribeToTranslationRegistration,\n} from './translation.js'\n\n// helper types...\n\n// used to match any function\ntype Func = (...args: any[]) => any\n\n// if object property is function, use return type, else value type\ntype Result<Type, Key extends keyof Type> = Type[Key] extends Func ? ReturnType<Type[Key]> : Type[Key]\n\n// if object property is function,\ntype FuncParams<Type, K extends keyof Type> = Type[K] extends Func ? Parameters<Type[K]> : []\n\nfunction noop() {\n  // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\nimplements ReactiveController {\n  private unsubscribeDocumentLang?: ReturnType<typeof subscribeToDocumentLang>\n  private unsubscribeTranslationRegistration?: ReturnType<typeof subscribeToTranslationRegistration>\n  private observer?: MutationObserver\n  private resolvedTranslation: Translation\n\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    private options = { onLangChange: noop },\n  ) {\n    host.addController(this)\n    this.resolvedTranslation = resolveTranslation(this.lang)\n  }\n\n  /**\n   * The lang of the document or element, with element taking precedence\n   */\n  get lang() {\n    if (isServer) {\n      return this.host.lang || 'en-US'\n    }\n\n    return this.host.lang || document.documentElement.lang\n  }\n\n  /**\n   * The lang of the translation being applied.\n   * This may not match the document/element lang, in case of fallback translation\n   */\n  get resolvedLang() {\n    return this.resolvedTranslation.$lang\n  }\n\n  hostConnected() {\n    // Always subscribe to translation registration changes (for when new translations are registered)\n    this.unsubscribeTranslationRegistration = subscribeToTranslationRegistration(this.handleLangChange)\n\n    // Re-resolve translation now that the host is connected and attributes are set\n    // This handles cases where the lang attribute is set after the constructor runs (e.g., in Vue)\n    const resolved = resolveTranslation(this.lang)\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n    }\n\n    // If the host has its own `lang` attribute, create a local observer to watch for changes to that attribute\n    if (this.host.getAttribute('lang')) {\n      this.observer = new MutationObserver(this.handleLangChange)\n      this.observer.observe(this.host, {\n        attributes: true,\n        attributeFilter: ['lang'],\n      })\n    }\n    else {\n      // Otherwise, also subscribe to document language changes\n      this.unsubscribeDocumentLang = subscribeToDocumentLang(this.handleLangChange)\n    }\n\n    this.options.onLangChange()\n  }\n\n  hostDisconnected() {\n    this.unsubscribeDocumentLang?.()\n    this.unsubscribeTranslationRegistration?.()\n    this.observer?.disconnect()\n  }\n\n  term<Key extends keyof Translation[TComponentName]>(\n    key: Key,\n    ...args: FuncParams<Translation[TComponentName], Key>\n  ): Result<Translation[TComponentName], Key> {\n    const { resolvedTranslation, resolvedLang } = this\n    const component = this.host.localName as TComponentName\n\n    if (resolvedTranslation[component] == null) {\n      console.warn(`NORD: Missing translations for component \\`${component}\\` in lang: \\`${resolvedLang}\\``)\n    }\n    else if (resolvedTranslation[component][key] == null) {\n      console.warn(\n        `NORD: Missing translation key \\`${String(key)}\\` for component \\`${component}\\` in lang \\`${resolvedLang}\\``,\n      )\n    }\n\n    const t = resolvedTranslation[component]?.[key] ?? fallback[component][key]\n    return typeof t === 'function' ? t(...args) : t\n  }\n\n  private handleLangChange = () => {\n    const resolved = resolveTranslation(this.lang)\n\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n\n      this.options.onLangChange()\n      this.host.requestUpdate()\n    }\n  }\n}\n"],"names":["noop","LocalizeController","constructor","host","options","onLangChange","this","handleLangChange","resolved","resolveTranslation","lang","resolvedTranslation","requestUpdate","addController","isServer","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribeTranslationRegistration","subscribeToTranslationRegistration","getAttribute","observer","MutationObserver","observe","attributes","attributeFilter","unsubscribeDocumentLang","subscribeToDocumentLang","hostDisconnected","_a","call","_b","_c","disconnect","term","key","args","component","localName","console","warn","String","t","fallback"],"mappings":"saAwBA,SAASA,IAET,OAEaC,EAOX,WAAAC,CACUC,EACAC,EAAU,CAAEC,aAAcL,IAD1BM,KAAIH,KAAJA,EACAG,KAAOF,QAAPA,EA8EFE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EApFDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKD,QAAIA,GACF,OAAII,EACKR,KAAKH,KAAKO,MAAQ,QAGpBJ,KAAKH,KAAKO,MAAQK,SAASC,gBAAgBN,IACnD,CAMD,gBAAIO,GACF,OAAOX,KAAKK,oBAAoBO,KACjC,CAED,aAAAC,GAEEb,KAAKc,mCAAqCC,EAAmCf,KAAKC,kBAIlF,MAAMC,EAAWC,EAAmBH,KAAKI,MACrCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,GAIzBF,KAAKH,KAAKmB,aAAa,SACzBhB,KAAKiB,SAAW,IAAIC,iBAAiBlB,KAAKC,kBAC1CD,KAAKiB,SAASE,QAAQnB,KAAKH,KAAM,CAC/BuB,YAAY,EACZC,gBAAiB,CAAC,WAKpBrB,KAAKsB,wBAA0BC,EAAwBvB,KAAKC,kBAG9DD,KAAKF,QAAQC,cACd,CAED,gBAAAyB,aAC8B,QAA5BC,EAAAzB,KAAKsB,+BAAuB,IAAAG,GAAAA,EAAAC,KAAA1B,MACW,QAAvC2B,EAAA3B,KAAKc,0CAAkC,IAAAa,GAAAA,EAAAD,KAAA1B,MACxB,QAAf4B,EAAA5B,KAAKiB,gBAAU,IAAAW,GAAAA,EAAAC,YAChB,CAED,IAAAC,CACEC,KACGC,WAEH,MAAM3B,oBAAEA,EAAmBM,aAAEA,GAAiBX,KACxCiC,EAAYjC,KAAKH,KAAKqC,UAEU,MAAlC7B,EAAoB4B,GACtBE,QAAQC,KAAK,8CAA8CH,kBAA0BtB,OAEvC,MAAvCN,EAAoB4B,GAAWF,IACtCI,QAAQC,KACN,mCAAmCC,OAAON,wBAA0BE,iBAAyBtB,OAIjG,MAAM2B,EAAyC,QAArCX,EAA8B,UAA9BtB,EAAoB4B,UAAU,IAAAR,OAAA,EAAAA,EAAGM,UAAI,IAAAJ,EAAAA,EAAIY,EAASN,GAAWF,GACvE,MAAoB,mBAANO,EAAmBA,KAAKN,GAAQM,CAC/C"}
+{"version":3,"file":"LocalizeController.js","sources":["../src/localization/LocalizeController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\nimport type {\n  Translation,\n  WellKnownKeys,\n} from './translation.js'\nimport { isServer } from 'lit'\nimport {\n  fallback,\n  resolveTranslation,\n  subscribeToDocumentLang,\n  subscribeToTranslationRegistration,\n} from './translation.js'\n\n// Use fallback (en) as source of truth for valid translation keys\ntype FallbackType = typeof fallback\n\n// helper types...\n\n// used to match any function\ntype Func = (...args: any[]) => any\n\n// if object property is function, use return type, else value type\ntype Result<Type, Key extends keyof Type> = Type[Key] extends Func ? ReturnType<Type[Key]> : Type[Key]\n\n// if object property is function,\ntype FuncParams<Type, K extends keyof Type> = Type[K] extends Func ? Parameters<Type[K]> : []\n\nfunction noop() {\n  // this function is intentionally left blank\n}\n\nexport class LocalizeController<TComponentName extends Exclude<keyof Translation, WellKnownKeys>>\nimplements ReactiveController {\n  private unsubscribeDocumentLang?: ReturnType<typeof subscribeToDocumentLang>\n  private unsubscribeTranslationRegistration?: ReturnType<typeof subscribeToTranslationRegistration>\n  private observer?: MutationObserver\n  private resolvedTranslation: Translation\n\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    private options = { onLangChange: noop },\n  ) {\n    host.addController(this)\n    this.resolvedTranslation = resolveTranslation(this.lang)\n  }\n\n  /**\n   * The lang of the document or element, with element taking precedence\n   */\n  get lang() {\n    if (isServer) {\n      return this.host.lang || 'en-US'\n    }\n\n    return this.host.lang || document.documentElement.lang\n  }\n\n  /**\n   * The lang of the translation being applied.\n   * This may not match the document/element lang, in case of fallback translation\n   */\n  get resolvedLang() {\n    return this.resolvedTranslation.$lang\n  }\n\n  hostConnected() {\n    // Always subscribe to translation registration changes (for when new translations are registered)\n    this.unsubscribeTranslationRegistration = subscribeToTranslationRegistration(this.handleLangChange)\n\n    // Re-resolve translation now that the host is connected and attributes are set\n    // This handles cases where the lang attribute is set after the constructor runs (e.g., in Vue)\n    const resolved = resolveTranslation(this.lang)\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n    }\n\n    // If the host has its own `lang` attribute, create a local observer to watch for changes to that attribute\n    if (this.host.getAttribute('lang')) {\n      this.observer = new MutationObserver(this.handleLangChange)\n      this.observer.observe(this.host, {\n        attributes: true,\n        attributeFilter: ['lang'],\n      })\n    }\n    else {\n      // Otherwise, also subscribe to document language changes\n      this.unsubscribeDocumentLang = subscribeToDocumentLang(this.handleLangChange)\n    }\n\n    this.options.onLangChange()\n  }\n\n  hostDisconnected() {\n    this.unsubscribeDocumentLang?.()\n    this.unsubscribeTranslationRegistration?.()\n    this.observer?.disconnect()\n  }\n\n  term<Key extends keyof FallbackType[TComponentName]>(\n    key: Key,\n    ...args: FuncParams<FallbackType[TComponentName], Key>\n  ): Result<FallbackType[TComponentName], Key> {\n    const { resolvedTranslation, resolvedLang } = this\n    const component = this.host.localName as TComponentName\n\n    // Cast to specific component type to satisfy TS that key is valid for this component\n    const componentTranslation = resolvedTranslation[component] as FallbackType[TComponentName] | undefined\n\n    if (componentTranslation == null) {\n      console.warn(`NORD: Missing translations for component \\`${component}\\` in lang: \\`${resolvedLang}\\``)\n    }\n    else if (componentTranslation[key] == null) {\n      console.warn(\n        `NORD: Missing translation key \\`${String(key)}\\` for component \\`${component}\\` in lang \\`${resolvedLang}\\``,\n      )\n    }\n\n    const fallbackComponentTranslation = fallback[component] as FallbackType[TComponentName]\n    const translationValue = (componentTranslation?.[key] ?? fallbackComponentTranslation[key]) as Result<FallbackType[TComponentName], Key>\n    return typeof translationValue === 'function' ? translationValue(...args) : translationValue\n  }\n\n  private handleLangChange = () => {\n    const resolved = resolveTranslation(this.lang)\n\n    if (this.resolvedTranslation !== resolved) {\n      this.resolvedTranslation = resolved\n\n      this.options.onLangChange()\n      this.host.requestUpdate()\n    }\n  }\n}\n"],"names":["noop","LocalizeController","constructor","host","options","onLangChange","this","handleLangChange","resolved","resolveTranslation","lang","resolvedTranslation","requestUpdate","addController","isServer","document","documentElement","resolvedLang","$lang","hostConnected","unsubscribeTranslationRegistration","subscribeToTranslationRegistration","getAttribute","observer","MutationObserver","observe","attributes","attributeFilter","unsubscribeDocumentLang","subscribeToDocumentLang","hostDisconnected","_a","call","_b","_c","disconnect","term","key","args","component","localName","componentTranslation","console","warn","String","fallbackComponentTranslation","fallback","translationValue"],"mappings":"saA2BA,SAASA,IAET,OAEaC,EAOX,WAAAC,CACUC,EACAC,EAAU,CAAEC,aAAcL,IAD1BM,KAAIH,KAAJA,EACAG,KAAOF,QAAPA,EAkFFE,KAAgBC,iBAAG,KACzB,MAAMC,EAAWC,EAAmBH,KAAKI,MAErCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,EAE3BF,KAAKF,QAAQC,eACbC,KAAKH,KAAKS,gBACX,EAxFDT,EAAKU,cAAcP,MACnBA,KAAKK,oBAAsBF,EAAmBH,KAAKI,KACpD,CAKD,QAAIA,GACF,OAAII,EACKR,KAAKH,KAAKO,MAAQ,QAGpBJ,KAAKH,KAAKO,MAAQK,SAASC,gBAAgBN,IACnD,CAMD,gBAAIO,GACF,OAAOX,KAAKK,oBAAoBO,KACjC,CAED,aAAAC,GAEEb,KAAKc,mCAAqCC,EAAmCf,KAAKC,kBAIlF,MAAMC,EAAWC,EAAmBH,KAAKI,MACrCJ,KAAKK,sBAAwBH,IAC/BF,KAAKK,oBAAsBH,GAIzBF,KAAKH,KAAKmB,aAAa,SACzBhB,KAAKiB,SAAW,IAAIC,iBAAiBlB,KAAKC,kBAC1CD,KAAKiB,SAASE,QAAQnB,KAAKH,KAAM,CAC/BuB,YAAY,EACZC,gBAAiB,CAAC,WAKpBrB,KAAKsB,wBAA0BC,EAAwBvB,KAAKC,kBAG9DD,KAAKF,QAAQC,cACd,CAED,gBAAAyB,aAC8B,QAA5BC,EAAAzB,KAAKsB,+BAAuB,IAAAG,GAAAA,EAAAC,KAAA1B,MACW,QAAvC2B,EAAA3B,KAAKc,0CAAkC,IAAAa,GAAAA,EAAAD,KAAA1B,MACxB,QAAf4B,EAAA5B,KAAKiB,gBAAU,IAAAW,GAAAA,EAAAC,YAChB,CAED,IAAAC,CACEC,KACGC,SAEH,MAAM3B,oBAAEA,EAAmBM,aAAEA,GAAiBX,KACxCiC,EAAYjC,KAAKH,KAAKqC,UAGtBC,EAAuB9B,EAAoB4B,GAErB,MAAxBE,EACFC,QAAQC,KAAK,8CAA8CJ,kBAA0BtB,OAEjD,MAA7BwB,EAAqBJ,IAC5BK,QAAQC,KACN,mCAAmCC,OAAOP,wBAA0BE,iBAAyBtB,OAIjG,MAAM4B,EAA+BC,EAASP,GACxCQ,EAAmD,UAA/BN,aAAA,EAAAA,EAAuBJ,UAAQ,IAAAN,EAAAA,EAAAc,EAA6BR,GACtF,MAAmC,mBAArBU,EAAkCA,KAAoBT,GAAQS,CAC7E"}

package/lib/Message.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as r,LitElement as t}from"lit";import{property as i,customElement as n}from"lit/decorators.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{ref as a}from"lit/directives/ref.js";import{F as l}from"./FocusableMixin-BlQLNPdJ.js";import{s as c}from"./Component-DSU3Qp0O.js";import{s as d}from"./DropdownItem-Cy6lHtoG.js";import{LocalizeController as m}from"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const p=e`:host{--_n-message-border-color:var(--n-message-border-color, var(--n-color-border));padding:var(--n-space-s);border-block-end:1px solid var(--_n-message-border-color)}.n-message{flex-direction:column;gap:var(--n-space-xs);align-items:flex-start;padding-inline-start:var(--n-space-xl);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-line-height-heading);margin:0;color:var(--n-color-text);position:relative}.n-message:hover{color:var(--n-color-text-on-accent)}slot[name=footer]{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);line-height:var(--n-line-height-heading)}:host([highlight]) .n-message::after{content:'';position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.15;background:var(--n-color-accent);filter:brightness(150%)}.n-unread{position:absolute;min-inline-size:var(--n-size-icon-xxs);min-block-size:var(--n-size-icon-xxs);inset-block-start:calc(var(--n-space-s) + var(--n-space-xs));inset-inline-start:var(--n-space-m);background:var(--n-color-accent);border-radius:var(--n-border-radius-circle)}.n-message:hover .n-unread{background:var(--n-color-text-on-accent)}`;let f=class extends(l(t)){constructor(){super(...arguments),this.localize=new m(this)}render(){return(this.href?o=>r`<a href="${s(this.href)}" ${a(this.focusableRef)} class="n-dropdown-item n-message">${o}</a>`:o=>r`<button ${a(this.focusableRef)} class="n-dropdown-item n-message">${o}</button>`)(r`<div role="img" class="n-unread" aria-label="${this.localize.term("unreadLabel")}" ?hidden="${!this.unread}"></div><slot></slot><slot name="footer"></slot>`)}};f.styles=[c,d,p],o([i({reflect:!0})],f.prototype,"href",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([n("nord-message")],f);var h=f;export{h as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as r,LitElement as t}from"lit";import{property as i,customElement as n}from"lit/decorators.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{ref as a}from"lit/directives/ref.js";import{F as l}from"./FocusableMixin-BlQLNPdJ.js";import{s as c}from"./Component-DSU3Qp0O.js";import{s as d}from"./DropdownItem-tmJQrv7d.js";import{LocalizeController as m}from"./LocalizeController.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const p=e`:host{--_n-message-border-color:var(--n-message-border-color, var(--n-color-border));padding:var(--n-space-s);border-block-end:1px solid var(--_n-message-border-color)}.n-message{flex-direction:column;gap:var(--n-space-xs);align-items:flex-start;padding-inline-start:var(--n-space-xl);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-line-height-heading);margin:0;color:var(--n-color-text);position:relative}.n-message:hover{color:var(--n-color-text-on-accent)}slot[name=footer]{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);line-height:var(--n-line-height-heading)}:host([highlight]) .n-message::after{content:'';position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.15;background:var(--n-color-accent);filter:brightness(150%)}.n-unread{position:absolute;min-inline-size:var(--n-size-icon-xxs);min-block-size:var(--n-size-icon-xxs);inset-block-start:calc(var(--n-space-s) + var(--n-space-xs));inset-inline-start:var(--n-space-m);background:var(--n-color-accent);border-radius:var(--n-border-radius-circle)}.n-message:hover .n-unread{background:var(--n-color-text-on-accent)}`;let f=class extends(l(t)){constructor(){super(...arguments),this.localize=new m(this)}render(){return(this.href?o=>r`<a href="${s(this.href)}" ${a(this.focusableRef)} class="n-dropdown-item n-message">${o}</a>`:o=>r`<button ${a(this.focusableRef)} class="n-dropdown-item n-message">${o}</button>`)(r`<div role="img" class="n-unread" aria-label="${this.localize.term("unreadLabel")}" ?hidden="${!this.unread}"></div><slot></slot><slot name="footer"></slot>`)}};f.styles=[c,d,p],o([i({reflect:!0})],f.prototype,"href",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([n("nord-message")],f);var h=f;export{h as default};
 //# sourceMappingURL=Message.js.map