npm - @nordhealth/components - Versions diffs - 3.4.0-alpha.2 → 3.4.0 - Mend

@nordhealth/components 3.4.0-alpha.2 → 3.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/custom-elements.json +240 -138
package/lib/Layout.js +1 -1
package/lib/Layout.js.map +1 -1
package/lib/TopBar.js +1 -1
package/lib/TopBar.js.map +1 -1
package/lib/bundle.js +5 -5
package/lib/bundle.js.map +1 -1
package/lib/src/common/controllers/BroadcastChannelController.d.ts +16 -0
package/lib/src/layout/Layout.d.ts +8 -2
package/lib/src/top-bar/TopBar.d.ts +1 -4
package/package.json +2 -2

package/lib/Layout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Layout.js","sources":["../src/common/storage.ts","../src/layout/Layout.ts"],"sourcesContent":["/*\n Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n /\nexport function storage<T>(\n key: string,\n defaultValue: T,\n serialize: (value: T) => string = JSON.stringify,\n deserialize: (value: string) => T = JSON.parse\n) {\n return {\n get value(): T {\n try {\n const value = localStorage.getItem(key)\n return value ? deserialize(value) : defaultValue\n } catch {\n return defaultValue\n }\n },\n\n set value(value: T) {\n try {\n localStorage.setItem(key, serialize(value))\n } catch {\n // nothing we can do here\n }\n },\n }\n}\n","/ eslint-disable lit-a11y/click-events-have-key-events /\nimport { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { styleMap } from \"lit/directives/style-map.js\"\nimport as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\nimport type NavItem from \"../nav-item/NavItem.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./Layout.css\"\n\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst navWidthStore = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage(\"nord-layout.navOpen\", true)\n\nconst navMachine = fsm({\n opened: {\n toggle: \"closed\",\n close: \"closed\",\n },\n closed: {\n toggle: \"opened\",\n open: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n },\n peek: {\n toggle: \"opened\",\n focusout: \"unpeek\",\n pointerleave: \"wait\",\n dropdownOpen: \"blocked\",\n click: \"unpeek\",\n open: \"opened\",\n },\n blocked: {\n dropdownClose: \"peek\",\n open: \"opened\",\n },\n wait: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n timeout: \"unpeek\",\n },\n unpeek: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n transitionend: \"closed\",\n },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/*\n Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n \n @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n \n @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n /\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n static styles = [componentStyle, stickyStyle, style]\n\n private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n private navSlot = new SlotController(this, \"nav\")\n private drawerSlot = new SlotController(this, \"drawer\")\n private topBarSlot = new SlotController(this, \"top-bar\")\n private headerSlot = new SlotController(this, \"header\")\n private direction = new DirectionController(this)\n private events = new EventController(this)\n private lightDismiss = new LightDismissController(this, {\n isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n onDismiss: () => this.navTransition(\"close\"),\n isDismissible: node => node !== this.navEl,\n })\n\n @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n @state() private navWidth = navWidthStore.value\n @state() private isDragging = false\n @state() private navState!: NavState\n @state() private wideScreen = mediaQuery.matches\n\n /\n Controls whether the navigation is hidden off-screen or not.\n * Defaults to `true` for wide viewports, and `false` otherwise.\n /\n @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen!: boolean\n\n /\n Controls whether the navigation's open/closed state is persisted across page loads.\n * This is useful for multi-page apps, where clicks on links trigger a full page load.\n /\n @property({ type: Boolean, attribute: \"persist-nav-state\" }) persistNavState = false\n\n /\n Controls the padding of the default main section slot. When set to “none”,\n * the nav and header slots will still have padding.\n /\n @property({ reflect: true }) padding: \"m\" \| \"none\" = \"m\"\n\n /\n Controls whether the layout's header has sticky positioning.\n /\n @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n /\n A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n * A narrow viewport is considered to be less than 768px wide.\n /\n get isNarrow(): boolean {\n return !this.wideScreen\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n }\n\n willUpdate() {\n // we only want this logic to run once, before first render\n if (this.hasUpdated) {\n return\n }\n\n // on mobile it should always start closed\n if (this.isNarrow) {\n this.navState = \"closed\"\n }\n // if nav state is persisted, and it was previously closed, start closed\n else if (this.persistNavState && navOpenStore.value === false) {\n this.navState = \"closed\"\n }\n // otherwise start open\n else {\n this.navState = \"opened\"\n }\n }\n\n render() {\n const { navWidth, navState, navSlot, headerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n\n return html`\n <div\n class=${classMap({\n \"n-layout\": true,\n \"n-rtl\": direction.isRTL,\n \"n-dragging\": isDragging,\n \"n-has-header\": headerSlot.hasContent,\n \"n-has-top-bar\": topBarSlot.hasContent,\n \"n-has-drawer\": drawerSlot.hasContent,\n \"n-has-nav\": navSlot.hasContent,\n })}\n style=${styleMap({\n \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n })}\n data-nav=${navSlot.hasContent ? navState : \"closed\"}\n data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n >\n <div\n class=\"n-layout-nav\"\n ?hidden=${navSlot.isEmpty}\n @focusin=${this.handleNavFocus}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n @open=${this.handleDropdownOpen}\n @close=${this.handleDropdownClose}\n >\n <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n <div\n class=\"n-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n tabindex=\"0\"\n @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n @pointermove=${cond(isDragging, this.handleDrag)}\n @pointerleave=${this.stopDragging}\n @pointerup=${this.stopDragging}\n @keydown=${this.handleKeyboardResize}\n ?hidden=${this.isNarrow}\n ></div>\n ${this.renderNavCollapse()}\n </div>\n\n <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n <div class=\"n-top-bar-container\">\n <slot name=\"top-bar\"></slot>\n </div>\n\n <div class=\"n-layout-content\">\n <div class=\"n-sticky\">\n <slot name=\"header\"></slot>\n </div>\n <main>\n <slot></slot>\n </main>\n </div>\n\n <aside ?hidden=${this.drawerSlot.isEmpty}>\n <slot name=\"drawer\"></slot>\n </aside>\n </div>\n </div>\n `\n }\n\n private renderNavToggle() {\n / eslint-disable lit-a11y/mouse-events-have-key-events /\n return html`\n <div class=\"n-nav-toggle-container\">\n <slot\n name=\"nav-toggle\"\n @click=${this.handleToggleClick}\n @mouseover=${this.handleMouseEnter}\n @mouseout=${this.handleMouseLeave}\n >\n <nord-nav-toggle></nord-nav-toggle>\n </slot>\n </div>\n `\n / eslint-enable lit-a11y/mouse-events-have-key-events /\n }\n\n private renderNavCollapse() {\n return html`\n <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n </button>\n `\n }\n\n @observe(\"navWidth\", \"updated\")\n protected handleNavWidthChange() {\n navWidthStore.value = this.navWidth\n }\n\n @observe(\"navState\")\n protected handleNavStateChange(prev: NavState) {\n if (prev === \"wait\" && this.peekTimeoutId) {\n clearTimeout(this.peekTimeoutId)\n }\n if (prev === \"unpeek\") {\n this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n }\n\n switch (this.navState) {\n case \"closed\":\n this.navOpen = false\n break\n case \"opened\":\n this.navOpen = true\n break\n case \"wait\":\n this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n break\n case \"unpeek\":\n this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n break\n default:\n break\n }\n }\n\n @observe(\"navOpen\", \"updated\")\n protected handleOpenChange() {\n if (!this.isDragging) {\n // when opening nav, it should restore to default width (or larger).\n // unless it is being dragged, in which case the drag width wins\n this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n }\n\n this.navTransition(this.navOpen ? \"open\" : \"close\")\n\n if (this.persistNavState) {\n navOpenStore.value = this.navOpen\n }\n }\n\n / ---------------------------------------------\n / NAVIGATION OPEN/CLOSE LOGIC\n / --------------------------------------------- /\n\n private navTransition(event: NavEvent) {\n this.navState = navMachine.transition(this.navState, event)\n }\n\n private handleNavClick(e: Event) {\n if (!e.defaultPrevented && !this.wideScreen) {\n const target = e.target as HTMLElement\n\n if (isNavItemLeaf(target)) {\n this.navTransition(\"close\")\n }\n }\n }\n\n private handleMainClick() {\n this.navTransition(\"click\")\n }\n\n private handleDropdownOpen(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownOpen\")\n }\n }\n\n private handleDropdownClose(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownClose\")\n }\n }\n\n private handleMediaQueryChange = () => {\n this.wideScreen = mediaQuery.matches\n this.navTransition(this.wideScreen ? \"open\" : \"close\")\n }\n\n private handleToggleClick = () => {\n this.navTransition(\"toggle\")\n }\n\n private handleNavFocus = () => {\n this.navTransition(\"focusin\")\n }\n\n private handleMainFocus = () => {\n this.navTransition(\"focusout\")\n }\n\n private handleMouseEnter = () => {\n if (this.wideScreen) {\n this.navTransition(\"pointerenter\")\n }\n }\n\n private handleMouseLeave = () => {\n this.navTransition(\"pointerleave\")\n }\n\n private handleTransitionEnd = () => {\n this.navTransition(\"transitionend\")\n }\n\n / ---------------------------------------------\n / RESIZE LOGIC\n / --------------------------------------------- */\n\n private handleKeyboardResize(e: KeyboardEvent) {\n const {\n navWidth,\n direction: { isLTR },\n } = this\n\n switch (e.key) {\n case \"ArrowLeft\":\n this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n break\n case \"ArrowRight\":\n this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n break\n case \"Enter\":\n this.navTransition(\"toggle\")\n break\n case \"Home\":\n this.setNavWidth(NAV_MIN_WIDTH)\n break\n case \"End\":\n this.setNavWidth(NAV_MAX_WIDTH)\n break\n default:\n return\n }\n\n e.preventDefault()\n }\n\n private setNavWidth(width: number) {\n this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n }\n\n private startDragging(e: PointerEvent) {\n if (e.button === 0) {\n const target = e.target as Element\n target.setPointerCapture(e.pointerId)\n this.isDragging = true\n }\n }\n\n private stopDragging() {\n this.isDragging = false\n }\n\n private handleDrag(e: PointerEvent) {\n const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n this.setNavWidth(width)\n this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-layout\": Layout\n }\n}\n"],"names":["storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","Icon","registerIcon","lockIcon","mediaQuery","matchMedia","navWidthStore","navOpenStore","navMachine","fsm","opened","toggle","close","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","constructor","this","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","navWidth","isDragging","matches","persistNavState","padding","sticky","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","willUpdate","hasUpdated","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","navOpen","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","Math","max","event","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"Layout.js","sources":["../src/common/controllers/BroadcastChannelController.ts","../src/common/storage.ts","../src/layout/Layout.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ntype Options<T> = {\n channelName: string\n onMessage: (message: T) => void\n enabled?: () => boolean\n}\n\nconst defaultEnabled = () => true\n\nexport class BroadcastChannelController<T> implements ReactiveController {\n private channel?: BroadcastChannel\n private options: Required<Options<T>>\n\n constructor(host: ReactiveControllerHost, options: Options<T>) {\n host.addController(this)\n this.options = { enabled: defaultEnabled, ...options }\n }\n\n hostConnected(): void {\n if (typeof BroadcastChannel !== \"undefined\") {\n this.channel = new BroadcastChannel(this.options.channelName)\n this.channel.addEventListener(\"message\", this)\n }\n }\n\n hostDisconnected(): void {\n this.channel?.removeEventListener(\"message\", this)\n this.channel?.close()\n }\n\n handleEvent(event: MessageEvent<T>) {\n if (this.options.enabled()) {\n this.options.onMessage(event.data)\n }\n }\n\n post(message: T) {\n if (this.options.enabled()) {\n this.channel?.postMessage(message)\n }\n }\n}\n","/*\n Thin wrapper around local storage which simplifies (de)serialization and default values.\n * By default, (de)serializes as JSON.\n /\nexport function storage<T>(\n key: string,\n defaultValue: T,\n serialize: (value: T) => string = JSON.stringify,\n deserialize: (value: string) => T = JSON.parse\n) {\n return {\n get value(): T {\n try {\n const value = localStorage.getItem(key)\n return value ? deserialize(value) : defaultValue\n } catch {\n return defaultValue\n }\n },\n\n set value(value: T) {\n try {\n localStorage.setItem(key, serialize(value))\n } catch {\n // nothing we can do here\n }\n },\n }\n}\n","/ eslint-disable lit-a11y/click-events-have-key-events /\nimport { LitElement, html, nothing } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { styleMap } from \"lit/directives/style-map.js\"\nimport as lockIcon from \"@nordhealth/icons/lib/assets/navigation-toggle-lock.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { BroadcastChannelController } from \"../common/controllers/BroadcastChannelController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { Events, fsm, States } from \"../common/fsm.js\"\nimport { clamp } from \"../common/number.js\"\nimport { storage } from \"../common/storage.js\"\nimport type NavItem from \"../nav-item/NavItem.js\"\n\nimport Icon from \"../icon/Icon.js\"\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport stickyStyle from \"../common/styles/Sticky.css\"\nimport style from \"./Layout.css\"\n\nIcon.registerIcon(lockIcon)\n\nconst NAV_DEFAULT_WIDTH = 250\nconst NAV_MIN_WIDTH = 220\nconst NAV_MAX_WIDTH = 400\nconst NAV_COLLAPSE_WIDTH = 100\nconst NAV_RESIZE_STEP = 30\nconst NAV_PEEK_DELAY = 300\n\nconst mediaQuery = matchMedia(\"(min-width: 768px)\")\nconst navWidthStore = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\nconst navOpenStore = storage(\"nord-layout.navOpen\", true)\n\nconst navMachine = fsm({\n opened: {\n toggle: \"closed\",\n close: \"closed\",\n },\n closed: {\n toggle: \"opened\",\n open: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n },\n peek: {\n toggle: \"opened\",\n focusout: \"unpeek\",\n pointerleave: \"wait\",\n dropdownOpen: \"blocked\",\n click: \"unpeek\",\n open: \"opened\",\n },\n blocked: {\n dropdownClose: \"peek\",\n open: \"opened\",\n },\n wait: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n timeout: \"unpeek\",\n },\n unpeek: {\n toggle: \"opened\",\n focusin: \"peek\",\n pointerenter: \"peek\",\n transitionend: \"closed\",\n },\n})\n\ntype NavState = States<typeof navMachine>\ntype NavEvent = Events<typeof navMachine>\n\nconst isNavItem = (el: HTMLElement): el is NavItem => el.localName === \"nord-nav-item\"\nconst isNavItemLeaf = (el: HTMLElement) => isNavItem(el) && !el.hasSubNav\n\n/*\n Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n \n @status ready\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot top-bar - Used to place the [Top Bar](../top-bar/) component.\n * @slot header - Used to place content inside the header section.\n * @slot drawer - Used to place additional content/details relating to a selected item.\n * @slot nav-toggle - Used to place a own nav-toggle component, for cases where you might need to add a tooltip.\n \n @cssprop [--n-layout-padding=var(--n-space-l)] - Controls the padding around the main layout area (the main slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-layout-drawer-inline-size=320px] - Controls the width of the drawer area, when used.\n * @cssprop [--n-layout-background-color=var(--n-color-background)] - Controls the background color of the layout, using [color tokens](/tokens/#color).\n /\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n static styles = [componentStyle, stickyStyle, style]\n\n private peekTimeoutId?: ReturnType<typeof setTimeout>\n\n private navSlot = new SlotController(this, \"nav\")\n private drawerSlot = new SlotController(this, \"drawer\")\n private topBarSlot = new SlotController(this, \"top-bar\")\n private headerSlot = new SlotController(this, \"header\")\n private direction = new DirectionController(this)\n private events = new EventController(this)\n private lightDismiss = new LightDismissController(this, {\n isOpen: () => this.navState === \"opened\" && !this.wideScreen,\n onDismiss: () => this.navTransition(\"close\"),\n isDismissible: node => node !== this.navEl,\n })\n\n private broadcast = new BroadcastChannelController<{ navOpen: boolean } \| { navWidth: number }>(this, {\n channelName: \"nord-layout-nav-state\",\n enabled: () => this.syncNavState && this.wideScreen,\n onMessage: data => {\n if (\"navOpen\" in data) {\n this.navOpen = data.navOpen\n }\n if (\"navWidth\" in data) {\n this.navWidth = data.navWidth\n }\n },\n })\n\n @query(\".n-layout-nav\", true) private navEl!: HTMLDivElement\n\n @state() private navWidth = navWidthStore.value\n @state() private isDragging = false\n @state() private navState!: NavState\n @state() private wideScreen = mediaQuery.matches\n\n /\n Controls whether the navigation is hidden off-screen or not.\n * Defaults to `true` for wide viewports, and `false` otherwise.\n /\n @property({ reflect: true, type: Boolean, attribute: \"nav-open\" }) navOpen!: boolean\n\n /\n Controls whether the navigation's open/closed state is persisted across page loads.\n * This is useful for multi-page apps, where clicks on links trigger a full page load.\n /\n @property({ type: Boolean, attribute: \"persist-nav-state\" }) persistNavState = false\n\n /\n Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin.\n * This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.\n /\n @property({ type: Boolean, reflect: true, attribute: \"sync-nav-state\" }) syncNavState = false\n\n /\n Controls the padding of the default main section slot. When set to “none”,\n * the nav and header slots will still have padding.\n /\n @property({ reflect: true }) padding: \"m\" \| \"none\" = \"m\"\n\n /\n Controls whether the layout's header has sticky positioning.\n /\n @property({ type: Boolean, reflect: true }) sticky: boolean = false\n\n /\n A getter whose values reflects whether the layout component considers the viewport to be narrow or not.\n * A narrow viewport is considered to be less than 768px wide.\n /\n get isNarrow(): boolean {\n return !this.wideScreen\n }\n\n connectedCallback(): void {\n super.connectedCallback()\n this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n }\n\n willUpdate() {\n // we only want this logic to run once, before first render\n if (this.hasUpdated) {\n return\n }\n\n // on mobile it should always start closed\n if (this.isNarrow) {\n this.navState = \"closed\"\n }\n // if nav state is persisted, and it was previously closed, start closed\n else if (this.persistNavState && navOpenStore.value === false) {\n this.navState = \"closed\"\n }\n // otherwise start open\n else {\n this.navState = \"opened\"\n }\n }\n\n render() {\n const { navWidth, navState, navSlot, headerSlot, topBarSlot, drawerSlot, isDragging, direction } = this\n const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n\n return html`\n <div\n class=${classMap({\n \"n-layout\": true,\n \"n-rtl\": direction.isRTL,\n \"n-dragging\": isDragging,\n \"n-has-header\": headerSlot.hasContent,\n \"n-has-top-bar\": topBarSlot.hasContent,\n \"n-has-drawer\": drawerSlot.hasContent,\n \"n-has-nav\": navSlot.hasContent,\n })}\n style=${styleMap({\n \"--_n-layout-nav-width\": `${adjustedNavWidth}px`,\n })}\n data-nav=${navSlot.hasContent ? navState : \"closed\"}\n data-screen=${this.wideScreen ? \"wide\" : \"narrow\"}\n >\n <div\n class=\"n-layout-nav\"\n ?hidden=${navSlot.isEmpty}\n @focusin=${this.handleNavFocus}\n @mouseenter=${this.handleMouseEnter}\n @mouseleave=${this.handleMouseLeave}\n @open=${this.handleDropdownOpen}\n @close=${this.handleDropdownClose}\n >\n <slot name=\"nav\" @click=${this.handleNavClick}></slot>\n <div\n class=\"n-resize\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n tabindex=\"0\"\n @pointerdown=${cond(navState === \"opened\", this.startDragging)}\n @pointermove=${cond(isDragging, this.handleDrag)}\n @pointerleave=${this.stopDragging}\n @pointerup=${this.stopDragging}\n @keydown=${this.handleKeyboardResize}\n ?hidden=${this.isNarrow}\n ></div>\n ${this.renderNavCollapse()}\n </div>\n\n <div class=\"n-layout-main\" @focusin=${this.handleMainFocus} @click=${this.handleMainClick}>\n ${navSlot.hasContent ? this.renderNavToggle() : nothing}\n\n <div class=\"n-top-bar-container\">\n <slot name=\"top-bar\"></slot>\n </div>\n\n <div class=\"n-layout-content\">\n <div class=\"n-sticky\">\n <slot name=\"header\"></slot>\n </div>\n <main>\n <slot></slot>\n </main>\n </div>\n\n <aside ?hidden=${this.drawerSlot.isEmpty}>\n <slot name=\"drawer\"></slot>\n </aside>\n </div>\n </div>\n `\n }\n\n private renderNavToggle() {\n / eslint-disable lit-a11y/mouse-events-have-key-events /\n return html`\n <div class=\"n-nav-toggle-container\">\n <slot\n name=\"nav-toggle\"\n @click=${this.handleToggleClick}\n @mouseover=${this.handleMouseEnter}\n @mouseout=${this.handleMouseLeave}\n >\n <nord-nav-toggle></nord-nav-toggle>\n </slot>\n </div>\n `\n / eslint-enable lit-a11y/mouse-events-have-key-events /\n }\n\n private renderNavCollapse() {\n return html`\n <button class=\"n-collapse-btn\" @click=${this.handleToggleClick}>\n <nord-icon name=\"navigation-toggle-lock\" size=\"s\"></nord-icon>\n </button>\n `\n }\n\n @observe(\"navWidth\", \"updated\")\n protected handleNavWidthChange(prev: number) {\n navWidthStore.value = this.navWidth\n\n // skip first update, we only want subsequent changes\n if (prev != null) {\n this.broadcast.post({ navWidth: this.navWidth })\n }\n }\n\n @observe(\"navState\")\n protected handleNavStateChange(prev: NavState) {\n if (prev === \"wait\" && this.peekTimeoutId) {\n clearTimeout(this.peekTimeoutId)\n }\n if (prev === \"unpeek\") {\n this.navEl.removeEventListener(\"transitionend\", this.handleTransitionEnd)\n }\n\n switch (this.navState) {\n case \"closed\":\n this.navOpen = false\n break\n case \"opened\":\n this.navOpen = true\n break\n case \"wait\":\n this.peekTimeoutId = setTimeout(() => this.navTransition(\"timeout\"), NAV_PEEK_DELAY)\n break\n case \"unpeek\":\n this.navEl.addEventListener(\"transitionend\", this.handleTransitionEnd, { once: true })\n break\n default:\n break\n }\n }\n\n @observe(\"navOpen\", \"updated\")\n protected handleOpenChange(prev: boolean) {\n if (!this.isDragging) {\n // when opening nav, it should restore to default width (or larger).\n // unless it is being dragged, in which case the drag width wins\n this.setNavWidth(Math.max(this.navWidth, NAV_DEFAULT_WIDTH))\n }\n\n this.navTransition(this.navOpen ? \"open\" : \"close\")\n\n if (this.persistNavState) {\n navOpenStore.value = this.navOpen\n }\n\n // skip first update, we only want subsequent changes\n if (prev != null) {\n this.broadcast.post({ navOpen: this.navOpen })\n }\n }\n\n / ---------------------------------------------\n / NAVIGATION OPEN/CLOSE LOGIC\n / --------------------------------------------- /\n\n private navTransition(event: NavEvent) {\n this.navState = navMachine.transition(this.navState, event)\n }\n\n private handleNavClick(e: Event) {\n if (!e.defaultPrevented && !this.wideScreen) {\n const target = e.target as HTMLElement\n\n if (isNavItemLeaf(target)) {\n this.navTransition(\"close\")\n }\n }\n }\n\n private handleMainClick() {\n this.navTransition(\"click\")\n }\n\n private handleDropdownOpen(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownOpen\")\n }\n }\n\n private handleDropdownClose(e: Event) {\n const target = e.target as Element\n\n if (target.localName === \"nord-dropdown\") {\n this.navTransition(\"dropdownClose\")\n }\n }\n\n private handleMediaQueryChange = () => {\n this.wideScreen = mediaQuery.matches\n this.navTransition(this.wideScreen ? \"open\" : \"close\")\n }\n\n private handleToggleClick = () => {\n this.navTransition(\"toggle\")\n }\n\n private handleNavFocus = () => {\n this.navTransition(\"focusin\")\n }\n\n private handleMainFocus = () => {\n this.navTransition(\"focusout\")\n }\n\n private handleMouseEnter = () => {\n if (this.wideScreen) {\n this.navTransition(\"pointerenter\")\n }\n }\n\n private handleMouseLeave = () => {\n this.navTransition(\"pointerleave\")\n }\n\n private handleTransitionEnd = () => {\n this.navTransition(\"transitionend\")\n }\n\n / ---------------------------------------------\n / RESIZE LOGIC\n / --------------------------------------------- */\n\n private handleKeyboardResize(e: KeyboardEvent) {\n const {\n navWidth,\n direction: { isLTR },\n } = this\n\n switch (e.key) {\n case \"ArrowLeft\":\n this.setNavWidth(navWidth + (isLTR ? -NAV_RESIZE_STEP : NAV_RESIZE_STEP))\n break\n case \"ArrowRight\":\n this.setNavWidth(navWidth + (isLTR ? NAV_RESIZE_STEP : -NAV_RESIZE_STEP))\n break\n case \"Enter\":\n this.navTransition(\"toggle\")\n break\n case \"Home\":\n this.setNavWidth(NAV_MIN_WIDTH)\n break\n case \"End\":\n this.setNavWidth(NAV_MAX_WIDTH)\n break\n default:\n return\n }\n\n e.preventDefault()\n }\n\n private setNavWidth(width: number) {\n this.navWidth = clamp(Math.round(width), NAV_MIN_WIDTH, NAV_MAX_WIDTH)\n }\n\n private startDragging(e: PointerEvent) {\n if (e.button === 0) {\n const target = e.target as Element\n target.setPointerCapture(e.pointerId)\n this.isDragging = true\n }\n }\n\n private stopDragging() {\n this.isDragging = false\n }\n\n private handleDrag(e: PointerEvent) {\n const width = this.direction.isRTL ? this.clientWidth - e.clientX : e.clientX\n\n this.setNavWidth(width)\n this.navTransition(width >= NAV_COLLAPSE_WIDTH ? \"open\" : \"close\")\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-layout\": Layout\n }\n}\n"],"names":["defaultEnabled","BroadcastChannelController","constructor","host","options","addController","this","enabled","hostConnected","BroadcastChannel","channel","channelName","addEventListener","hostDisconnected","_a","removeEventListener","_b","close","handleEvent","event","onMessage","data","post","message","postMessage","storage","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","setItem","Icon","registerIcon","lockIcon","mediaQuery","matchMedia","navWidthStore","navOpenStore","navMachine","fsm","opened","toggle","closed","open","focusin","pointerenter","peek","focusout","pointerleave","dropdownOpen","click","blocked","dropdownClose","wait","timeout","unpeek","transitionend","Layout","LitElement","navSlot","SlotController","drawerSlot","topBarSlot","headerSlot","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","broadcast","syncNavState","navOpen","navWidth","isDragging","matches","persistNavState","padding","sticky","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","isNarrow","connectedCallback","super","listen","willUpdate","hasUpdated","render","adjustedNavWidth","html","classMap","isRTL","hasContent","styleMap","isEmpty","handleDropdownOpen","handleDropdownClose","handleNavClick","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","renderNavCollapse","handleMainClick","renderNavToggle","nothing","handleNavWidthChange","prev","handleNavStateChange","peekTimeoutId","clearTimeout","setTimeout","once","handleOpenChange","setNavWidth","Math","max","transition","e","defaultPrevented","target","el","localName","isNavItem","hasSubNav","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","stickyStyle","style","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}

package/lib/TopBar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{i as n,x as o,_ as t,e as r,s as a}from"./query-assigned-elements-822fe360.js";import{D as e}from"./DraftComponentMixin-9e4b7b34.js";import{s as i}from"./Component-1f694235.js";const l=n`:host{background:var(--n-color-accent-secondary);block-size:52px;display:flex;align-items:center;color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active);padding-inline-start:calc(var(--n-space-m) + var(--_n-header-gutter,0px));padding-inline-end:var(--n-space-s);gap:var(--n-space-xs)}slot{display:block}slot:not([name]){flex:1}slot[name=end]{display:flex;margin-inline-start:auto;align-items:center;gap:1px}::slotted(:is(h1, h2, h3, h4, h5, h6, p, em, span)){color:var(--n-color-text-on-accent)!important;font-size:var(--n-font-size-m)!important;line-height:var(--n-line-height)!important;font-weight:var(--n-font-weight-active)!important;font-style:normal!important}::slotted(:is(nord-avatar, nord-dropdown)){--n-avatar-color:var(--n-color-accent-secondary);--n-avatar-box-shadow:inset 0 0 0 100px rgba(255, 255, 255, 0.2),0 0 0 1px rgba(255, 255, 255, 0.6)}::slotted(nord-input){--n-input-background:rgba(255, 255, 255, 0.15);--n-input-border-color:rgba(255, 255, 255, 0.4);--n-input-placeholder-color:rgba(255, 255, 255, 0.85);--n-input-icon-color:rgba(255, 255, 255, 0.85);--n-input-color:#fff;transition:inline-size var(--n-transition-slowly);inline-size:min(400px,100%)}::slotted(nord-input:hover){--n-input-border-color:rgba(255, 255, 255, 0.4);--n-input-placeholder-color:rgb(255, 255, 255);--n-input-icon-color:rgb(255, 255, 255)}::slotted(nord-input:focus){--n-input-background:var(--n-color-surface);--n-input-border-color:var(--n-color-surface);--n-input-placeholder-color:var(--n-color-text-weaker);--n-input-icon-color:var(--n-color-icon);--n-input-color:var(--n-color-text);--n-input-font-size:var(--n-font-size-l);inline-size:min(745px,100%)}::slotted(nord-dropdown){--n-button-gap:calc(var(--n-space-xs) / 2);--n-button-background-color:transparent;--n-button-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-button-padding-inline:calc(var(--n-space-s) + 2px);--n-button-overflow:visible}::slotted(nord-dropdown:is(:hover, [open], :focus-within)){--n-button-background-color:rgba(255, 255, 255, 0.18)}`;let s=class extends(e(a)){render(){return o`<slot></slot><slot name="end"></slot>`}};s.styles=[i,l],s=t([r("nord-top-bar")],s);var c=s;export{c as default};
+import{i as n,_ as o,s as t,x as r,e as a}from"./query-assigned-elements-822fe360.js";import{s as e}from"./Component-1f694235.js";const i=n`:host{background:var(--n-color-accent-secondary);block-size:52px;display:flex;align-items:center;color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active);padding-inline-start:calc(var(--n-space-m) + var(--_n-header-gutter,0px));padding-inline-end:var(--n-space-s);gap:var(--n-space-xs)}slot{display:block}slot:not([name]){flex:1}slot[name=end]{display:flex;margin-inline-start:auto;align-items:center;gap:1px}::slotted(:is(h1, h2, h3, h4, h5, h6, p, em, span)){color:var(--n-color-text-on-accent)!important;font-size:var(--n-font-size-m)!important;line-height:var(--n-line-height)!important;font-weight:var(--n-font-weight-active)!important;font-style:normal!important}::slotted(:is(nord-avatar, nord-dropdown)){--n-avatar-color:var(--n-color-accent-secondary);--n-avatar-box-shadow:inset 0 0 0 100px rgba(255, 255, 255, 0.2),0 0 0 1px rgba(255, 255, 255, 0.6)}::slotted(nord-input){--n-input-background:rgba(255, 255, 255, 0.15);--n-input-border-color:rgba(255, 255, 255, 0.4);--n-input-placeholder-color:rgba(255, 255, 255, 0.85);--n-input-icon-color:rgba(255, 255, 255, 0.85);--n-input-color:#fff;transition:inline-size var(--n-transition-slowly);inline-size:min(400px,100%)}::slotted(nord-input:hover){--n-input-border-color:rgba(255, 255, 255, 0.4);--n-input-placeholder-color:rgb(255, 255, 255);--n-input-icon-color:rgb(255, 255, 255)}::slotted(nord-input:focus){--n-input-background:var(--n-color-surface);--n-input-border-color:var(--n-color-surface);--n-input-placeholder-color:var(--n-color-text-weaker);--n-input-icon-color:var(--n-color-icon);--n-input-color:var(--n-color-text);--n-input-font-size:var(--n-font-size-l);inline-size:min(745px,100%)}::slotted(nord-dropdown){--n-button-gap:calc(var(--n-space-xs) / 2);--n-button-background-color:transparent;--n-button-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-button-padding-inline:calc(var(--n-space-s) + 2px);--n-button-overflow:visible}::slotted(nord-dropdown:is(:hover, [open], :focus-within)){--n-button-background-color:rgba(255, 255, 255, 0.18)}`;let l=class extends t{render(){return r`<slot></slot><slot name="end"></slot>`}};l.styles=[e,i],l=o([a("nord-top-bar")],l);var c=l;export{c as default};
 //# sourceMappingURL=TopBar.js.map

package/lib/TopBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TopBar.js","sources":["../src/top-bar/TopBar.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\~~nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\~~n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TopBar.css\"\n\n/*\n Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.\n \n @~~status draft\n * @~~category structure\n * @slot - Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.\n * @slot end - Optional slot for menus, buttons, toggles, etc.\n */\n@customElement(\"nord-top-bar\")\nexport default class TopBar extends ~~DraftComponentMixin(~~LitElement) {\n static styles = [componentStyle, style]\n\n render() {\n return html`\n <slot></slot>\n <slot name=\"end\"></slot>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-top-bar\": TopBar\n }\n}\n"],"names":["TopBar","~~DraftComponentMixin","~~LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"~~0rEAgBe~~,IAAMA,EAAN,cAAqBC,~~EAAoBC~~,~~IAGtDC,~~SACE,OAAOC,CAAI,uCAIZ,~~GAPMJ~~,~~EAAAK~~,OAAS,CAACC,EAAgBC,~~GADdP~~,~~EAAMQ~~,EAAA,CAD1BC,EAAc,~~iBACMT~~,SAAAA"}
1	+ {"version":3,"file":"TopBar.js","sources":["../src/top-bar/TopBar.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TopBar.css\"\n\n/*\n Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.\n \n @category structure\n * @slot - Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.\n * @slot end - Optional slot for menus, buttons, toggles, etc.\n */\n@customElement(\"nord-top-bar\")\nexport default class TopBar extends LitElement {\n static styles = [componentStyle, style]\n\n render() {\n return html`\n <slot></slot>\n <slot name=\"end\"></slot>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-top-bar\": TopBar\n }\n}\n"],"names":["TopBar","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"ooEAce,IAAMA,EAAN,cAAqBC,EAGlCC,SACE,OAAOC,CAAI,uCAIZ,GAPMH,EAAAI,OAAS,CAACC,EAAgBC,GADdN,EAAMO,EAAA,CAD1BC,EAAc,iBACMR,SAAAA"}