@nordhealth/components 2.8.0 → 2.8.2
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.
- package/custom-elements.json +1891 -1879
- package/lib/{Calendar-685c3990.js → Calendar-1904bf2f.js} +1 -1
- package/lib/{Calendar-685c3990.js.map → Calendar-1904bf2f.js.map} +1 -1
- package/lib/Calendar.js +1 -1
- package/lib/Card.js +1 -1
- package/lib/Card.js.map +1 -1
- package/lib/Checkbox.js +1 -1
- package/lib/DatePicker.js +1 -1
- package/lib/Drawer.js +1 -1
- package/lib/Fieldset.js +1 -1
- package/lib/{FormAssociatedMixin-3cc6e83b.js → FormAssociatedMixin-0d57fdc8.js} +2 -2
- package/lib/{FormAssociatedMixin-3cc6e83b.js.map → FormAssociatedMixin-0d57fdc8.js.map} +1 -1
- package/lib/Header.js +1 -1
- package/lib/Icon.js +1 -1
- package/lib/Input.js +1 -1
- package/lib/Layout.js +1 -1
- package/lib/Layout.js.map +1 -1
- package/lib/Modal.js +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/Radio.js +1 -1
- package/lib/Select.js +1 -1
- package/lib/{SlotController-ea6eff46.js → SlotController-89834aef.js} +2 -2
- package/lib/SlotController-89834aef.js.map +1 -0
- package/lib/Tab.js +1 -1
- package/lib/TabGroup.js +1 -1
- package/lib/Textarea.js +1 -1
- package/lib/ToastGroup.js.map +1 -1
- package/lib/Toggle.js +1 -1
- package/lib/Tooltip.js +1 -1
- package/lib/Tooltip.js.map +1 -1
- package/lib/bundle.js +3 -3
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/card/Card.test.d.ts +2 -1
- package/lib/src/layout/Layout.d.ts +1 -0
- package/lib/src/toast-group/ToastGroup.d.ts +1 -1
- package/lib/src/tooltip/Tooltip.d.ts +1 -0
- package/package.json +5 -5
- package/lib/SlotController-ea6eff46.js.map +0 -1
package/lib/Layout.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["/* 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 { 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\"\n\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\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 store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\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\nfunction isElement(el: any): el is Element {\n return el != null && el.nodeType === Node.ELEMENT_NODE\n}\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 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 */\n@customElement(\"nord-layout\")\nexport default class Layout extends LitElement {\n static styles = [componentStyle, 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 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 = store.value\n @state() private isDragging = false\n @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\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 = this.navState === \"opened\"\n\n /**\n * ID reference of element used to toggle the navigation.\n * This is deprecated, the layout component will now render its own nav toggle to simplify usage.\n * @deprecated\n */\n @property({ attribute: \"nav-toggle\" }) navToggle?: string\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 connectedCallback(): void {\n super.connectedCallback()\n\n this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n\n this.events.listen(this, \"click\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleToggleClick()\n }\n })\n this.events.listen(this, \"mouseover\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleMouseEnter()\n }\n })\n this.events.listen(this, \"mouseout\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleMouseLeave()\n }\n })\n }\n\n render() {\n const { navWidth, navState, navSlot, isDragging, direction } = this\n const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n const shouldRenderOwnNavToggle = navSlot.hasContent && !this.navToggle\n\n return html`\n <div\n class=${classMap({\n \"n-layout\": true,\n \"n-rtl\": direction.isRTL,\n \"n-dragging\": isDragging,\n })}\n style=${`--_n-layout-nav-width: ${adjustedNavWidth}px`}\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\"></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 ></div>\n </div>\n\n <div\n class=${classMap({ \"n-layout-main\": true, \"n-has-own-nav-toggle\": shouldRenderOwnNavToggle })}\n @focusin=${this.handleMainFocus}\n @click=${this.handleClick}\n >\n ${shouldRenderOwnNavToggle ? this.renderNavToggle() : nothing}\n <div class=${classMap({ \"n-has-drawer\": this.drawerSlot.hasContent })}>\n <slot name=\"header\"></slot>\n <main>\n <slot></slot>\n </main>\n </div>\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 @observe(\"navWidth\", \"updated\")\n protected handleNavWidthChange() {\n store.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\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 handleClick() {\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 private isNavToggle(node: EventTarget | null) {\n return Boolean(this.navToggle) && isElement(node) && node.id === this.navToggle\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","/**\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"],"names":["mediaQuery","matchMedia","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","storage","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","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","navWidth","isDragging","matches","navOpen","padding","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","connectedCallback","super","listen","e","isNavToggle","target","render","adjustedNavWidth","shouldRenderOwnNavToggle","hasContent","navToggle","html","classMap","isRTL","isEmpty","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","Boolean","el","nodeType","Node","ELEMENT_NODE","id","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","attribute","observe","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts","../src/common/storage.ts"],"sourcesContent":["/* 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 { 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\"\n\nimport \"../nav-toggle/NavToggle.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\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 store = storage(\"nord-layout.navWidth\", NAV_DEFAULT_WIDTH)\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\nfunction isElement(el: any): el is Element {\n return el != null && el.nodeType === Node.ELEMENT_NODE\n}\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 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, 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 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 = store.value\n @state() private isDragging = false\n @state() private navState: NavState = mediaQuery.matches ? \"opened\" : \"closed\"\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 = this.navState === \"opened\"\n\n /**\n * ID reference of element used to toggle the navigation.\n * This is deprecated, the layout component will now render its own nav toggle to simplify usage.\n * @deprecated\n */\n @property({ attribute: \"nav-toggle\" }) navToggle?: string\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 connectedCallback(): void {\n super.connectedCallback()\n\n this.events.listen(mediaQuery, \"change\", this.handleMediaQueryChange)\n\n this.events.listen(this, \"click\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleToggleClick()\n }\n })\n this.events.listen(this, \"mouseover\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleMouseEnter()\n }\n })\n this.events.listen(this, \"mouseout\", e => {\n if (this.isNavToggle(e.target)) {\n this.handleMouseLeave()\n }\n })\n }\n\n render() {\n const { navWidth, navState, navSlot, isDragging, direction } = this\n const adjustedNavWidth = navState === \"opened\" && this.wideScreen ? navWidth : NAV_DEFAULT_WIDTH\n const shouldRenderOwnNavToggle = navSlot.hasContent && !this.navToggle\n\n return html`\n <div\n class=${classMap({\n \"n-layout\": true,\n \"n-rtl\": direction.isRTL,\n \"n-dragging\": isDragging,\n })}\n style=${`--_n-layout-nav-width: ${adjustedNavWidth}px`}\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\"></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 ></div>\n </div>\n\n <div\n class=${classMap({ \"n-layout-main\": true, \"n-has-own-nav-toggle\": shouldRenderOwnNavToggle })}\n @focusin=${this.handleMainFocus}\n @click=${this.handleClick}\n >\n ${shouldRenderOwnNavToggle ? this.renderNavToggle() : nothing}\n <div class=${classMap({ \"n-has-drawer\": this.drawerSlot.hasContent })}>\n <slot name=\"header\"></slot>\n <main>\n <slot></slot>\n </main>\n </div>\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 @observe(\"navWidth\", \"updated\")\n protected handleNavWidthChange() {\n store.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\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 handleClick() {\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 private isNavToggle(node: EventTarget | null) {\n return Boolean(this.navToggle) && isElement(node) && node.id === this.navToggle\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","/**\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"],"names":["mediaQuery","matchMedia","store","key","defaultValue","serialize","JSON","stringify","deserialize","parse","value","localStorage","getItem","_a","setItem","storage","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","direction","DirectionController","events","EventController","lightDismiss","LightDismissController","isOpen","navState","wideScreen","onDismiss","navTransition","isDismissible","node","navEl","navWidth","isDragging","matches","navOpen","padding","handleMediaQueryChange","handleToggleClick","handleNavFocus","handleMainFocus","handleMouseEnter","handleMouseLeave","handleTransitionEnd","connectedCallback","super","listen","e","isNavToggle","target","render","adjustedNavWidth","shouldRenderOwnNavToggle","hasContent","navToggle","html","classMap","isRTL","isEmpty","handleDropdownOpen","handleDropdownClose","cond","startDragging","handleDrag","stopDragging","handleKeyboardResize","handleClick","renderNavToggle","nothing","handleNavWidthChange","handleNavStateChange","prev","peekTimeoutId","clearTimeout","removeEventListener","setTimeout","addEventListener","once","handleOpenChange","setNavWidth","Math","max","event","transition","localName","Boolean","el","nodeType","Node","ELEMENT_NODE","id","isLTR","preventDefault","width","clamp","round","button","setPointerCapture","pointerId","clientWidth","clientX","styles","componentStyle","style","__decorate","query","prototype","state","property","reflect","type","attribute","observe","customElement"],"mappings":"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"}
|
package/lib/Modal.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as o,e}from"./query-assigned-elements-e6cbac30.js";import{i as a,s as n,y as i}from"./lit-element-9178eae5.js";import{e as t}from"./property-03f59dce.js";import{i as s}from"./query-2d22378e.js";import{c as l}from"./interface-close-small-44ababc3.js";import r from"./Icon.js";import{S as d}from"./SlotController-
|
|
1
|
+
import{_ as o,e}from"./query-assigned-elements-e6cbac30.js";import{i as a,s as n,y as i}from"./lit-element-9178eae5.js";import{e as t}from"./property-03f59dce.js";import{i as s}from"./query-2d22378e.js";import{c as l}from"./interface-close-small-44ababc3.js";import r from"./Icon.js";import{S as d}from"./SlotController-89834aef.js";import{o as c}from"./observe-a9c6dfb6.js";import{N as p}from"./events-731d0007.js";import{s as m}from"./Component-92eb6234.js";import{LocalizeController as v}from"./LocalizeController.js";import{ModalController as h}from"./ModalController.js";import"./state-70f38ceb.js";import"./if-defined-4598a996.js";import"./unsafe-html-6be42999.js";import"./directive-de55b00a.js";import"./cond-338158e9.js";import"./EventController-d99ebeef.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./LightDismissController-a2645ae6.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";import"./ScrollbarController-680392c9.js";const b=a`:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-padding-block:var(--n-modal-padding-block, var(--n-space-m));--_n-modal-focus-ring:0 0 0 2px var(--n-color-accent);--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 620px);color:var(--n-color-text);position:fixed;inset:0;visibility:hidden;transition:visibility var(--n-transition-slowly);z-index:var(--n-index-overlay)}:host([open]){transition-property:none;visibility:visible}.n-modal-backdrop{position:fixed;inset:0;background:var(--n-color-overlay);transition:opacity var(--n-transition-slowly);padding:var(--n-space-l);padding-block-start:clamp(var(--n-space-l),min(10vh,10vw) - 1em,calc(var(--n-space-xxl) + var(--n-space-s)));overflow-y:auto}:host(:not([open])) .n-modal-backdrop{opacity:0}.n-modal{position:relative;display:flex;flex-direction:column;inline-size:100%;max-inline-size:var(--_n-modal-max-inline-size);margin:auto;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-modal);border-radius:var(--n-border-radius);transition:opacity var(--n-transition-slowly),transform var(--n-transition-slowly)}.n-rounded-top{border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}:host(:not([open])) .n-modal{transform:translateY(-10px) scale(.97);opacity:0}.n-modal:focus{outline:0}.n-modal-body{flex:1}.n-body-padded{display:block;padding:var(--n-space-l) var(--_n-modal-padding-inline) var(--n-space-xl)}.n-modal-header{display:flex;gap:var(--n-space-m);align-items:start;background:var(--n-color-nav-surface);border-block-end:1px solid var(--n-color-border)}.n-modal-footer{border-block-start:1px solid var(--n-color-border)}.n-padded{padding:var(--_n-modal-padding-block) var(--_n-modal-padding-inline)}.n-close{border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);background-color:transparent;border-radius:var(--n-border-radius);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);color:var(--n-color-text);cursor:pointer;transition:color var(--n-transition-quickly);position:relative}.n-close::after{content:"";position:absolute;display:block;inset:calc(var(--n-space-s) * -1);border-radius:var(--n-border-radius)}.n-close:not(:hover){color:var(--n-color-icon)}.n-close:active{transform:translateY(1px)}.n-close:focus{outline:0;box-shadow:var(--_n-modal-focus-ring)}@supports selector(:focus-visible){.n-close:focus{box-shadow:none}.n-close:focus-visible{box-shadow:var(--_n-modal-focus-ring)}}:host([scrollable]) .n-modal{max-block-size:100%}:host([scrollable]) .n-modal-body{overflow-y:auto}@media (min-width:489px){:host{--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l))}:host([size="s"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-m));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 440px)}:host([size="l"]){--_n-modal-padding-inline:var(--n-modal-padding-inline, var(--n-space-l));--_n-modal-max-inline-size:var(--n-modal-max-inline-size, 1320px)}}slot[name]{display:flex}slot[name=header]{flex:1}slot[name=header]::slotted(*){margin:0!important;padding:0!important;font-size:var(--n-font-size-l)!important;font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading)!important}slot[name=footer]{gap:calc(var(--n-space-s)/ 2);flex-direction:column}@media (min-width:489px){slot[name=footer]{gap:var(--n-space-s);flex-direction:row;justify-content:flex-end;align-items:center}}slot[name=feature]{overflow:hidden}slot[name=feature]::slotted(*){inline-size:100%;block-size:auto}`;r.registerIcon(l);let f=class extends n{constructor(){super(...arguments),this.headerSlot=new d(this,"header"),this.featureSlot=new d(this,"feature"),this.footerSlot=new d(this,"footer"),this.localize=new v(this),this.modalController=new h(this,{isOpen:()=>this.open,onDismiss:()=>this.handleDismiss(),dialog:()=>this.modal,backdrop:()=>this.backdrop,close:o=>this.close(o)}),this.open=!1,this.size="m",this.returnValue="",this.scrollable=!1}connectedCallback(){super.connectedCallback(),this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true")}showModal(){this.open=!0}close(o){this.open=!1,null!=o&&(this.returnValue=o),this.dispatchEvent(new p("close"))}focus(o){this.modal.focus({preventScroll:!0,...o})}render(){return i`<div class="n-modal-backdrop"><div class="n-modal" tabindex="0"><div class="n-modal-header n-rounded-top" ?hidden="${this.headerSlot.isEmpty}"><slot class="n-padded" name="${this.headerSlot.slotName}"></slot><button class="n-close" @click="${this.handleDismiss}"><nord-icon name="interface-close-small" size="s" label="${this.localize.term("closeLabel")}"></nord-icon></button></div><div class="n-modal-body"><slot name="${this.featureSlot.slotName}" class="${this.headerSlot.isEmpty?"n-rounded-top":""}" ?hidden="${this.featureSlot.isEmpty}"></slot><slot class="n-body-padded"></slot></div><div class="n-modal-footer n-padded" ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></div></div></div>`}handleOpenUpdated(o){this.open?this.modalController.block():!0===o&&this.modalController.unblock()}handleDismiss(){this.dispatchEvent(new p("cancel",{cancelable:!0}))&&this.close()}};f.styles=[m,b],f.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},o([s(".n-modal",!0)],f.prototype,"modal",void 0),o([s(".n-modal-backdrop",!0)],f.prototype,"backdrop",void 0),o([t({type:Boolean,reflect:!0})],f.prototype,"open",void 0),o([t({reflect:!0})],f.prototype,"size",void 0),o([t({attribute:!1})],f.prototype,"returnValue",void 0),o([t({type:Boolean,reflect:!0})],f.prototype,"scrollable",void 0),o([c("open","updated")],f.prototype,"handleOpenUpdated",null),f=o([e("nord-modal")],f);var u=f;export{u as default};
|
|
2
2
|
//# sourceMappingURL=Modal.js.map
|
package/lib/NavItem.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as t,b as a,s as i}from"./lit-element-9178eae5.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./class-map-949b7d3b.js";import{n as c}from"./ref-0e619221.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-
|
|
1
|
+
import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as t,b as a,s as i}from"./lit-element-9178eae5.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./class-map-949b7d3b.js";import{n as c}from"./ref-0e619221.js";import{D as l}from"./DirectionController-8b298382.js";import{S as d}from"./SlotController-89834aef.js";import{c as v}from"./cond-338158e9.js";import{N as p}from"./events-731d0007.js";import{F as m}from"./FocusableMixin-34870ed3.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";const h=o`:host{--_n-nav-item-box-shadow:none;all:unset;display:block;font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{-webkit-user-select:none;user-select:none;display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;max-inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--_n-nav-item-box-shadow);position:relative}.n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-nav-item:focus{--_n-nav-item-box-shadow:none}.n-nav-item:focus-visible{--_n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent)}}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-nav-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([badge]) .n-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-inline-size:calc(100% - calc(var(--n-space-m) + var(--n-space-m)));margin-block-end:-3px}:host([active]) .n-nav-item{--_n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--_n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-warning);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;position:absolute;margin-block-start:-2px;margin-inline-start:calc(var(--n-space-s)/ 1.5);font-size:var(--n-font-size-xs);display:inline-block}`;let f=class extends(m(i)){constructor(){super(...arguments),this.subnavSlot=new d(this,"subnav"),this.direction=new l(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=t`${this.icon?t`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}<div class="n-nav-content"><span class="n-nav-label"><slot></slot></span>${this.badge?t`<span class="n-nav-badge">${this.badge}</span>`:a}</div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),t`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return t`<a class="n-nav-item" ${c(this.focusableRef)} aria-current="${v(this.active,"page")}" href="${this.href||""}">${e}</a>`}renderToggle(e){return t`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${c(this.focusableRef)}>${e}<nord-icon size="xxs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return t`<button class="n-nav-item" ${c(this.focusableRef)}>${e}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};f.styles=h,e([r({type:Boolean,reflect:!0})],f.prototype,"active",void 0),e([r()],f.prototype,"icon",void 0),e([r()],f.prototype,"href",void 0),e([r()],f.prototype,"badge",void 0),e([r({type:Boolean})],f.prototype,"open",void 0),f=e([n("nord-nav-item")],f);var b=f;export{b as default};
|
|
2
2
|
//# sourceMappingURL=NavItem.js.map
|
package/lib/Radio.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{b as o,i as n,y as i,s as r}from"./lit-element-9178eae5.js";import{e as a}from"./property-03f59dce.js";import{n as s}from"./ref-0e619221.js";import{L as l}from"./LightDomController-3c726b20.js";import{S as d}from"./SlotController-
|
|
1
|
+
import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{b as o,i as n,y as i,s as r}from"./lit-element-9178eae5.js";import{e as a}from"./property-03f59dce.js";import{n as s}from"./ref-0e619221.js";import{L as l}from"./LightDomController-3c726b20.js";import{S as d}from"./SlotController-89834aef.js";import{o as c}from"./observe-a9c6dfb6.js";import{c as h}from"./cond-338158e9.js";import{F as p}from"./FocusableMixin-34870ed3.js";import{F as m}from"./FormAssociatedMixin-0d57fdc8.js";import{I as u}from"./InputMixin-158f63fb.js";import{s as v}from"./Component-92eb6234.js";import{s as b}from"./FormField-081da729.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";class f extends d{constructor(e,t){super(e,t.slotName),this.options=t,this.onChange=()=>{this.syncLightDom()},this.renderHook=document.createComment(this.slotName),this.lightDom=new l(e,{render:()=>this.hasContent?o:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}hostDisconnected(){this.renderHook.remove()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const g=n`:host{--_n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--_n-radio-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;padding:0!important;border:1px solid var(--_n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;transition:none!important;display:block!important;inline-size:var(--_n-radio-size)!important;block-size:var(--_n-radio-size)!important;cursor:pointer}::slotted(input:checked){--_n-radio-border-color:var(--n-color-accent);background:var(--_n-radio-accent-color)!important}::slotted(input[aria-invalid]){--_n-radio-accent-color:var(--n-color-status-danger);--_n-radio-border-color:var(--_n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)!important}:host([disabled]) ::slotted(input){--_n-radio-accent-color:var(--n-color-border-strong);--_n-radio-border-color:var(--_n-radio-accent-color);background:var(--_n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}.n-dot{--_n-radio-dot-size:var(--n-space-s);--_n-radio-dot-inset:calc((var(--_n-radio-size) - var(--_n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--_n-radio-dot-size);block-size:var(--_n-radio-dot-size);background-color:var(--n-color-text-on-accent);inset-inline-start:var(--_n-radio-dot-inset);inset-block-start:var(--_n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{padding-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}`;let k=0;const $=e=>`nord-radio-${e}-${k++}`;let y=class extends(m(u(p(r)))){constructor(){super(...arguments),this.inputId=$("input"),this.hintId=$("hint"),this.errorId=$("error"),this.hintSlot=new f(this,{slotName:"hint",render:()=>this.hint?i`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:o,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new f(this,{slotName:"label",render:()=>this.label?i`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:o,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new f(this,{slotName:"error",render:()=>this.error?i`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:o,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new l(this,{render:()=>i`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${s(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${h(this.name)}" .value="${h(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${h(this.getDescribedBy())}" aria-invalid="${h(this.getInvalid())}" form="${h(this.getAttribute("form")||void 0)}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}render(){return i`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?i`<div class="n-dot"></div>`:o}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,t=()=>i`<slot name="label"></slot><slot name="label-internal"></slot>`,n=e=>i`<nord-visually-hidden>${e}</nord-visually-hidden>`,e?n(t()):t()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var e,t,n}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};y.styles=[v,b,g],e([a({type:Boolean,reflect:!0})],y.prototype,"checked",void 0),e([c("checked")],y.prototype,"handleCheckedChange",null),y=e([t("nord-radio")],y);var _=y;export{_ as default};
|
|
2
2
|
//# sourceMappingURL=Radio.js.map
|
package/lib/Select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as n,s as r}from"./lit-element-9178eae5.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-4598a996.js";import{n as a}from"./ref-0e619221.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-158f63fb.js";import{F as c}from"./FocusableMixin-34870ed3.js";import{F as p}from"./FormAssociatedMixin-
|
|
1
|
+
import{_ as e,e as t}from"./query-assigned-elements-e6cbac30.js";import{i as o,y as n,s as r}from"./lit-element-9178eae5.js";import{e as i}from"./property-03f59dce.js";import{l as s}from"./if-defined-4598a996.js";import{n as a}from"./ref-0e619221.js";import"./Button.js";import l from"./Icon.js";import{I as d}from"./InputMixin-158f63fb.js";import{F as c}from"./FocusableMixin-34870ed3.js";import{F as p}from"./FormAssociatedMixin-0d57fdc8.js";import{A as u}from"./AutocompleteMixin-370de2be.js";import{S as b,i as m}from"./SizeMixin-4559b224.js";import{s as h}from"./Component-92eb6234.js";import{s as v}from"./FormField-081da729.js";import{S as f}from"./SlotController-89834aef.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./LightDomController-3c726b20.js";import"./cond-338158e9.js";import"./Spinner.js";import"./state-70f38ceb.js";import"./unsafe-html-6be42999.js";import"./observe-a9c6dfb6.js";import"./events-731d0007.js";import"./VisuallyHidden.js";var x=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><g transform="translate(6,6) scale(0.9)"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></g></svg>',title:"interface-dropdown-small",tags:"nordicon small interface dropdown select arrow up down caret triangle chevron"});const g=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}nord-button{--n-button-text-align:start}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-border-color:var(--n-color-border-hover);--_n-button-background-color:var(--n-color-button-hover)}.n-label-container:hover+.n-select-container nord-button nord-icon,select:hover+nord-button nord-icon{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--_n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-input-border-color:var(--n-color-active);--_n-button-color:var(--n-color-text-weakest);--_n-button-background-color:var(--n-color-active);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;l.registerIcon(x);let j=class extends(b(p(u(d(c(r)))))){constructor(){super(...arguments),this.defaultSlot=new f(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e),o=m[this.size]||m.m;return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${a(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${s(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button size="${this.size}" tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="start" name="icon"></slot>${t}<nord-icon slot="end" size="${o}" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value.toString()));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${s(e.value)}" ?disabled="${e.disabled}" .selected="${e.value===this.value.toString()}">${e.text}</option>`}};j.styles=[h,v,g],e([i({reflect:!0,type:Boolean})],j.prototype,"expand",void 0),j=e([t("nord-select")],j);var $=j;export{$ as default};
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{E as t}from"./EventController-d99ebeef.js";class s{constructor(s,e=""){this.host=s,this.slotName=e,this.handleSlotChange=t=>{t.target.name===this.slotName&&this.onChange(t)},s.addController(this),this.events=new t(s)}hostConnected(){this.host.shadowRoot&&this.events.listen(this.host.shadowRoot,"slotchange",this.handleSlotChange)}get hasContent(){return null!=this.content}get isEmpty(){return!this.hasContent}get content(){const t=this.slotName?`[slot="${this.slotName}"]`:":not([slot])";return this.host.querySelector(t)}onChange(t){this.host.requestUpdate()}}export{s as S};
|
|
2
|
-
//# sourceMappingURL=SlotController-
|
|
1
|
+
import{E as t}from"./EventController-d99ebeef.js";class s{constructor(s,e=""){this.host=s,this.slotName=e,this.handleSlotChange=t=>{t.target.name===this.slotName&&this.onChange(t)},s.addController(this),this.events=new t(s)}hostConnected(){this.host.shadowRoot&&this.events.listen(this.host.shadowRoot,"slotchange",this.handleSlotChange)}get hasContent(){return null!=this.content}get isEmpty(){return!this.hasContent}get content(){const t=this.slotName?`[slot="${this.slotName}"]`:":not([slot])";return this.host.querySelector(`:scope > ${t}`)}onChange(t){this.host.requestUpdate()}}export{s as S};
|
|
2
|
+
//# sourceMappingURL=SlotController-89834aef.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SlotController-89834aef.js","sources":["../src/common/controllers/SlotController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { EventController } from \"./EventController.js\"\n\nexport class SlotController implements ReactiveController {\n private events: EventController\n\n constructor(protected host: ReactiveControllerHost & HTMLElement, public slotName: string = \"\") {\n host.addController(this)\n this.events = new EventController(host)\n }\n\n hostConnected() {\n if (this.host.shadowRoot) {\n this.events.listen(this.host.shadowRoot, \"slotchange\", this.handleSlotChange)\n }\n }\n\n get hasContent() {\n return this.content != null\n }\n\n get isEmpty() {\n return !this.hasContent\n }\n\n get content() {\n const selector = this.slotName ? `[slot=\"${this.slotName}\"]` : `:not([slot])`\n return this.host.querySelector(`:scope > ${selector}`)\n }\n\n private handleSlotChange = (e: Event) => {\n const slot = e.target as HTMLSlotElement\n\n if (slot.name === this.slotName) {\n this.onChange(e)\n }\n }\n\n protected onChange(_e: Event) {\n this.host.requestUpdate()\n }\n}\n"],"names":["SlotController","constructor","host","slotName","this","handleSlotChange","e","target","name","onChange","addController","events","EventController","hostConnected","shadowRoot","listen","hasContent","content","isEmpty","selector","querySelector","_e","requestUpdate"],"mappings":"wDAGaA,EAGXC,YAAsBC,EAAmDC,EAAmB,IAAtEC,KAAIF,KAAJA,EAAmDE,KAAQD,SAARA,EAwBjEC,KAAAC,iBAAoBC,IACbA,EAAEC,OAENC,OAASJ,KAAKD,UACrBC,KAAKK,SAASH,EACf,EA5BDJ,EAAKQ,cAAcN,MACnBA,KAAKO,OAAS,IAAIC,EAAgBV,EACnC,CAEDW,gBACMT,KAAKF,KAAKY,YACZV,KAAKO,OAAOI,OAAOX,KAAKF,KAAKY,WAAY,aAAcV,KAAKC,iBAE/D,CAEGW,iBACF,OAAuB,MAAhBZ,KAAKa,OACb,CAEGC,cACF,OAAQd,KAAKY,UACd,CAEGC,cACF,MAAME,EAAWf,KAAKD,SAAW,UAAUC,KAAKD,aAAe,eAC/D,OAAOC,KAAKF,KAAKkB,cAAc,YAAYD,IAC5C,CAUSV,SAASY,GACjBjB,KAAKF,KAAKoB,eACX"}
|
package/lib/Tab.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as a,s as o,y as n}from"./lit-element-9178eae5.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./observe-a9c6dfb6.js";import{S as i}from"./SlotController-
|
|
1
|
+
import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as a,s as o,y as n}from"./lit-element-9178eae5.js";import{e as r}from"./property-03f59dce.js";import{o as s}from"./observe-a9c6dfb6.js";import{S as i}from"./SlotController-89834aef.js";import{s as l}from"./Component-92eb6234.js";import"./EventController-d99ebeef.js";const c=a`:host{--_n-tab-color:var(--n-tab-color, var(--n-color-text-weak));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight));--_n-tab-border:1px solid transparent;-webkit-user-select:none;user-select:none;cursor:pointer;padding:calc(var(--n-space-l)/ 2) calc(var(--n-space-s)/ 2);border-block-end:var(--_n-tab-border);transition:border var(--n-transition-quickly) ease}.n-tab{color:var(--_n-tab-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-m);font-weight:var(--_n-tab-font-weight);line-height:var(--n-line-height-form);border-radius:var(--n-border-radius-sharp);white-space:nowrap}.n-tab,.n-tab[data-text]:not([data-text=""])::before{font-weight:var(--_n-tab-font-weight)}.n-tab[data-text=""]{display:flex;gap:var(--n-space-s);align-items:center}.n-tab[data-text]:not([data-text=""]){text-align:center}.n-tab[data-text]:not([data-text=""])::before{content:attr(data-text);display:block;block-size:0;visibility:hidden}:host(:hover){--_n-tab-color:var(--n-tab-color, var(--n-color-text))}.n-tab[data-text]:not([data-text=""])::before,:host([aria-selected=true]){--_n-tab-color:var(--n-tab-color, var(--n-color-text-link));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight-active));--_n-tab-border:2px solid var(--n-color-text-link)}:host(:active){opacity:.8;transform:translateY(1px)}:host(:focus) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-text-link);outline:0}@supports selector(:focus-visible){:host(:focus) .n-tab{box-shadow:none}:host(:focus-visible) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-text-link)}}`;let b=class extends o{constructor(){super(...arguments),this.defaultSlot=new i(this),this.selected=!1}render(){return n`<div class="n-tab" data-text="${this.defaultSlot.isEmpty?this.textContent:""}"><slot></slot></div>`}handleSelectionChange(){this.setAttribute("aria-selected",`${this.selected}`),this.setAttribute("tabindex",this.selected?"0":"-1")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}};b.styles=[l,c],t([r({reflect:!0,type:Boolean})],b.prototype,"selected",void 0),t([s("selected")],b.prototype,"handleSelectionChange",null),b=t([e("nord-tab")],b);var d=b;export{d as default};
|
|
2
2
|
//# sourceMappingURL=Tab.js.map
|
package/lib/TabGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as r,s as a,y as s}from"./lit-element-9178eae5.js";import{e as o}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{s as n}from"./Component-92eb6234.js";import l from"./Tab.js";import{D as d}from"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";import"./SlotController-
|
|
1
|
+
import{_ as t,e}from"./query-assigned-elements-e6cbac30.js";import{i as r,s as a,y as s}from"./lit-element-9178eae5.js";import{e as o}from"./property-03f59dce.js";import{t as i}from"./state-70f38ceb.js";import{s as n}from"./Component-92eb6234.js";import l from"./Tab.js";import{D as d}from"./DirectionController-8b298382.js";import"./observe-a9c6dfb6.js";import"./SlotController-89834aef.js";import"./EventController-d99ebeef.js";const b=r`:host{--_n-tab-group-padding:var(--n-tab-group-padding, 0);--_n-tab-group-list-background:var(--n-color-background);--_n-tab-group-list-border:inset 0 -1px 0 0 var(--n-color-border);--_n-tab-group-list-shadow:var(--n-box-shadow-header);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}.n-tab-group-list{list-style:none;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:none;box-shadow:var(--_n-tab-group-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;gap:var(--n-space-s);background-color:var(--_n-tab-group-list-background);background-image:radial-gradient(ellipse farthest-side at 0 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background)),radial-gradient(ellipse farthest-side at 100% 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background));background-repeat:no-repeat;background-position:0 calc(var(--n-space-s)/ 2),100% calc(var(--n-space-s)/ 2);background-size:var(--n-space-s) var(--n-space-xl),var(--n-space-s) var(--n-space-xl)}.n-tab-group-list::after,.n-tab-group-list::before{content:"";box-sizing:content-box;align-self:stretch;min-inline-size:var(--n-space-l);margin-block-end:1px}.n-tab-group-list::before{margin-inline-end:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-start:var(--_n-tab-group-padding)}.n-tab-group-list::after{margin-inline-start:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-end:var(--_n-tab-group-padding);flex:1}.n-tab-group-list::before,.n-tab-group.is-rtl .n-tab-group-list::after{box-shadow:inset var(--n-space-l) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}.n-tab-group-list::after,.n-tab-group.is-rtl .n-tab-group-list::before{box-shadow:inset calc(-1 * var(--n-space-l)) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}::slotted(nord-tab-panel){display:none;padding:var(--_n-tab-group-padding)}::slotted(nord-tab-panel[aria-hidden=false]){display:block}::slotted(nord-tab){z-index:var(--n-index-default)}:host([padding="m"]){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-m))}:host([padding="l"]){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-l))}:host([sticky]) .n-tab-group-list{box-shadow:var(--_n-tab-group-list-border),var(--_n-tab-group-list-shadow);position:sticky;inset:0 0 auto 0;z-index:var(--n-index-sticky);inset-block-start:0}`;var c;let p=1,u=c=class extends a{constructor(){super(...arguments),this.direction=new d(this),this.tabGroupId="nord-tab-group-"+p++,this.label="",this.padding="m",this.sticky=!1,this.selectedTab=this.initialSelectedTab,this.handleMutation=t=>{t.forEach((t=>{var e,r;if("selected"===t.attributeName&&null===t.oldValue){const a=t.target;null===(e=this.observer)||void 0===e||e.disconnect(),this.updateSelectedTab(a),null===(r=this.observer)||void 0===r||r.observe(this,c.observerOptions)}}))}}render(){return s`<div class="n-tab-group is-${this.direction.dir}"><div class="n-tab-group-list" role="tablist" aria-label="${this.label}" @click="${this.handleTabChange}" @keydown="${this.handleKeydown}"><slot name="tab"></slot></div><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.updateSlots()}updateSlots(){this.setupTabs(),this.setupPanels()}firstUpdated(){var t;this.observer=new MutationObserver(this.handleMutation),null===(t=this.observer)||void 0===t||t.observe(this,c.observerOptions)}get initialSelectedTab(){return this.querySelector("nord-tab[selected]")||this.querySelector("nord-tab")}setupTabs(){this.querySelectorAll("nord-tab").forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-controls",`${this.tabGroupId}-panel-${e+1}`),t.toggleAttribute("selected",t===this.selectedTab)}))}setupPanels(){var t;const e=this.querySelectorAll("nord-tab-panel"),r=null===(t=this.selectedTab)||void 0===t?void 0:t.getAttribute("aria-controls");e.forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-panel-${e+1}`),t.setAttribute("aria-labelledby",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-hidden",`${t.getAttribute("id")!==r}`)}))}handleTabChange(t){this.scrollTo({top:0}),t.target instanceof l&&t.target!==this.selectedTab&&this.updateSelectedTab(t.target)}previousTab(t){const e=[...this.querySelectorAll("nord-tab")],r=e.indexOf(t);return e[r-1]}handleKeydown(t){const e=t.target,r=this.querySelector("nord-tab:first-of-type"),a=this.querySelector("nord-tab:last-of-type"),s=this.querySelector(`#${e.getAttribute("id")} ~ nord-tab`)||r,o=this.previousTab(e)||a,i=(t,e)=>{e.preventDefault(),this.scrollTo({top:0}),this.updateSelectedTab(t)};switch(t.key){case"ArrowLeft":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":i(this.direction.isLTR?s:o,t);break;case"Home":i(r,t);break;case"End":i(a,t)}}updateSelectedTab(t){const e=this.querySelector(`#${t.getAttribute("aria-controls")}`);t!==this.selectedTab&&(this.querySelectorAll("nord-tab").forEach((e=>{e.removeAttribute("selected"),e===t&&(e.setAttribute("selected",""),e.focus(),e.scrollIntoView({block:"nearest",inline:"nearest"}),this.selectedTab=e)})),this.querySelectorAll("nord-tab-panel").forEach((t=>{t.setAttribute("aria-hidden",`${t!==e}`)})))}};u.styles=[n,b],u.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},t([o({reflect:!0})],u.prototype,"label",void 0),t([o({reflect:!0})],u.prototype,"padding",void 0),t([o({reflect:!0,type:Boolean})],u.prototype,"sticky",void 0),t([i()],u.prototype,"selectedTab",void 0),u=c=t([e("nord-tab-group")],u);var g=u;export{g as default};
|
|
2
2
|
//# sourceMappingURL=TabGroup.js.map
|
package/lib/Textarea.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as t,y as o,s as n}from"./lit-element-9178eae5.js";import{e as a}from"./property-03f59dce.js";import{l as i}from"./if-defined-4598a996.js";import{n as s}from"./ref-0e619221.js";import{o as l}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-34870ed3.js";import{F as c}from"./FormAssociatedMixin-
|
|
1
|
+
import{_ as e,e as r}from"./query-assigned-elements-e6cbac30.js";import{i as t,y as o,s as n}from"./lit-element-9178eae5.js";import{e as a}from"./property-03f59dce.js";import{l as i}from"./if-defined-4598a996.js";import{n as s}from"./ref-0e619221.js";import{o as l}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-34870ed3.js";import{F as c}from"./FormAssociatedMixin-0d57fdc8.js";import{I as p}from"./InputMixin-158f63fb.js";import{R as u,s as v}from"./TextField-a7382912.js";import{A as b}from"./AutocompleteMixin-370de2be.js";import{S as m}from"./SizeMixin-4559b224.js";import{s as h}from"./Component-92eb6234.js";import{s as x}from"./FormField-081da729.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-89834aef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const f=t`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size, 240px);--_n-textarea-block-size:var(--n-textarea-block-size, 76px);--_n-input-background:var(--n-textarea-background, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius, var(--n-border-radius-s))}.n-input-container{position:relative;inline-size:var(--_n-textarea-inline-size)}.n-input{min-block-size:var(--_n-textarea-block-size);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}:host([expand]){--_n-textarea-inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent));--_n-input-background:var(--n-textarea-background, var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color, var(--n-color-text-weak))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent))}`;let y=class extends(m(c(b(u(p(d(n))))))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical",this.expand=!1}render(){var e;return o`${this.renderLabel()}<div class="n-input-container"><textarea ${s(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${i(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${i(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea></div>${this.renderError()}`}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=null)}};y.styles=[h,x,v,f],e([a({reflect:!0})],y.prototype,"resize",void 0),e([a({reflect:!0,type:Boolean})],y.prototype,"expand",void 0),e([l("resize","updated"),l("value","updated")],y.prototype,"resizeToFitContent",null),y=e([r("nord-textarea")],y);var j=y;export{j as default};
|
|
2
2
|
//# sourceMappingURL=Textarea.js.map
|
package/lib/ToastGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastGroup.js","sources":["../src/toast-group/ToastGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport Toast from \"../toast/Toast.js\"\nimport style from \"./ToastGroup.css\"\n\ntype ToastOptions = Partial<Pick<Toast, \"variant\" | \"autoDismiss\">>\n\n/**\n * Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.\n *\n * @status new\n * @category feedback\n * @slot - Default slot in which to place toasts.\n */\n@customElement(\"nord-toast-group\")\nexport default class ToastGroup extends LitElement {\n static styles = [componentStyle, style]\n\n render() {\n return html`\n <div class=\"n-toast-group\" role=\"log\" aria-relevant=\"additions\">\n <slot></slot>\n </div>\n `\n }\n\n /**\n * Convenience method for creating and adding a toast to the group.\n * @param {string} text - The text/message of the toast.\n * @param options - An optional object for configuring the toast's `variant` and `autoDismiss`.\n * @returns The toast instance.\n */\n addToast(text: string, options: ToastOptions = {}) {\n const { variant, autoDismiss } = options\n const toast = document.createElement(\"nord-toast\")\n\n if (variant) {\n toast.variant = variant\n }\n\n if (autoDismiss != null) {\n toast.autoDismiss = autoDismiss\n }\n\n toast.textContent = text\n this.appendChild(toast)\n\n return toast\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-toast-group\": ToastGroup\n }\n}\n"],"names":["ToastGroup","LitElement","render","html","addToast","text","options","variant","autoDismiss","toast","document","createElement","textContent","this","appendChild","styles","componentStyle","style","__decorate","customElement"],"mappings":"ogBAiBA,IAAqBA,EAArB,cAAwCC,EAGtCC,SACE,OAAOC,CAAI,qFAKZ,CAQDC,SAASC,EAAcC,EAAwB,IAC7C,MAAMC,QAAEA,EAAOC,YAAEA,GAAgBF,EAC3BG,EAAQC,SAASC,cAAc,cAarC,OAXIJ,IACFE,EAAMF,QAAUA,GAGC,MAAfC,IACFC,EAAMD,YAAcA,GAGtBC,EAAMG,YAAcP,EACpBQ,KAAKC,YAAYL,GAEVA,CACR,GAhCMT,EAAAe,OAAS,CAACC,EAAgBC,GADdjB,EAAUkB,EAAA,CAD9BC,EAAc,qBACMnB,SAAAA"}
|
|
1
|
+
{"version":3,"file":"ToastGroup.js","sources":["../src/toast-group/ToastGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport Toast from \"../toast/Toast.js\"\nimport style from \"./ToastGroup.css\"\n\ntype ToastOptions = Partial<Pick<Toast, \"variant\" | \"autoDismiss\">>\n\n/**\n * Toast group is used to position and style a group of toasts, whilst ensuring they are announced by screen readers.\n *\n * @status new\n * @category feedback\n * @slot - Default slot in which to place toasts.\n */\n@customElement(\"nord-toast-group\")\nexport default class ToastGroup extends LitElement {\n static styles = [componentStyle, style]\n\n render() {\n return html`\n <div class=\"n-toast-group\" role=\"log\" aria-relevant=\"additions\">\n <slot></slot>\n </div>\n `\n }\n\n /**\n * Convenience method for creating and adding a toast to the group.\n * @param {string} text - The text/message of the toast.\n * @param options - An optional object for configuring the toast's `variant` and `autoDismiss`.\n * @returns {Toast} The toast instance.\n */\n addToast(text: string, options: ToastOptions = {}) {\n const { variant, autoDismiss } = options\n const toast = document.createElement(\"nord-toast\")\n\n if (variant) {\n toast.variant = variant\n }\n\n if (autoDismiss != null) {\n toast.autoDismiss = autoDismiss\n }\n\n toast.textContent = text\n this.appendChild(toast)\n\n return toast\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-toast-group\": ToastGroup\n }\n}\n"],"names":["ToastGroup","LitElement","render","html","addToast","text","options","variant","autoDismiss","toast","document","createElement","textContent","this","appendChild","styles","componentStyle","style","__decorate","customElement"],"mappings":"ogBAiBA,IAAqBA,EAArB,cAAwCC,EAGtCC,SACE,OAAOC,CAAI,qFAKZ,CAQDC,SAASC,EAAcC,EAAwB,IAC7C,MAAMC,QAAEA,EAAOC,YAAEA,GAAgBF,EAC3BG,EAAQC,SAASC,cAAc,cAarC,OAXIJ,IACFE,EAAMF,QAAUA,GAGC,MAAfC,IACFC,EAAMD,YAAcA,GAGtBC,EAAMG,YAAcP,EACpBQ,KAAKC,YAAYL,GAEVA,CACR,GAhCMT,EAAAe,OAAS,CAACC,EAAgBC,GADdjB,EAAUkB,EAAA,CAD9BC,EAAc,qBACMnB,SAAAA"}
|
package/lib/Toggle.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i,y as r,s as t}from"./lit-element-9178eae5.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-4598a996.js";import{n as s}from"./ref-0e619221.js";import{F as l}from"./FocusableMixin-34870ed3.js";import{F as c}from"./FormAssociatedMixin-
|
|
1
|
+
import{_ as e,e as n}from"./query-assigned-elements-e6cbac30.js";import{i,y as r,s as t}from"./lit-element-9178eae5.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-4598a996.js";import{n as s}from"./ref-0e619221.js";import{F as l}from"./FocusableMixin-34870ed3.js";import{F as c}from"./FormAssociatedMixin-0d57fdc8.js";import{I as d}from"./InputMixin-158f63fb.js";import{s as g}from"./Component-92eb6234.js";import{s as p}from"./FormField-081da729.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-89834aef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const h=i`:host{--_n-toggle-block-size:calc(var(--_n-toggle-inline-size) / 1.6);--_n-toggle-inline-size:3.2143em;--_n-toggle-thumb-margin:0.35em;display:inline-block;font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1;display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-block-size:100%}.n-input-container{position:relative}.n-toggle{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;inline-size:var(--_n-toggle-inline-size);block-size:var(--_n-toggle-block-size);border-radius:var(--n-border-radius-pill);background:var(--_n-toggle-background,var(--n-color-border-strong));cursor:pointer;transition:background var(--n-transition-slowly);font-size:var(--_n-toggle-size,var(--n-font-size-m))}.n-toggle::before{content:"";display:block;aspect-ratio:1/1;block-size:calc(100% - 2 * var(--_n-toggle-thumb-margin));background:var(--n-color-text-on-accent);border-radius:var(--n-border-radius-circle);transition:margin;transition-duration:inherit;margin-inline-start:var(--_n-toggle-thumb-margin);box-shadow:var(--n-box-shadow)}input:checked{--_n-toggle-background:var(--n-color-text-link)}input:checked::before{margin-inline-start:calc(var(--_n-toggle-inline-size) - var(--_n-toggle-block-size) + var(--_n-toggle-thumb-margin))}input:checked[aria-invalid]{--_n-toggle-background:var(--n-color-status-danger)}input:focus{outline:0;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) label{color:var(--n-color-text-weaker);cursor:default}:host([disabled]) input{opacity:.3;cursor:not-allowed}.n-label-container{padding-block-end:0}label{-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}:host([reverse]) .n-error,:host([reverse]) .n-hint,:host([reverse]) label{padding-inline-start:0;padding-inline-end:var(--n-space-s)}:host([size="s"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xs)}:host([size="l"]) .n-toggle{--_n-toggle-size:var(--n-font-size-xl)}`;let v=class extends(c(d(l(t)))){constructor(){super(...arguments),this.checked=!1,this.reverse=!1,this.size="m"}get formValue(){return this.checked?this.value||"on":void 0}render(){const e=r`<div class="n-expand">${this.renderLabel()} ${this.renderError()}</div>`,n=r`<div class="n-input-container"><input ${s(this.focusableRef)} class="n-toggle" id="${this.inputId}" type="checkbox" role="switch" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" @change="${this.handleChange}"></div>`;return r`<div class="n-flex">${this.reverse?[e,n]:[n,e]}</div>`}handleChange(e){const n=e.target;this.checked=n.checked,super.handleChange(e)}};v.styles=[g,p,h],e([o({type:Boolean})],v.prototype,"checked",void 0),e([o({type:Boolean})],v.prototype,"reverse",void 0),e([o({reflect:!0})],v.prototype,"size",void 0),v=e([n("nord-toggle")],v);var m=v;export{m as default};
|
|
2
2
|
//# sourceMappingURL=Toggle.js.map
|
package/lib/Tooltip.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,e as i}from"./query-assigned-elements-e6cbac30.js";import{i as e,s,y as o}from"./lit-element-9178eae5.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,o as l,f as h,s as
|
|
1
|
+
import{_ as t,e as i}from"./query-assigned-elements-e6cbac30.js";import{i as e,s,y as o}from"./lit-element-9178eae5.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,o as l,f as h,s as p}from"./positioning-3bbd3548.js";import{S as c}from"./SlotController-89834aef.js";import{s as u}from"./Component-92eb6234.js";import{E as v}from"./EventController-d99ebeef.js";import{f as m}from"./fsm-50373df9.js";import{o as b}from"./observe-a9c6dfb6.js";function y(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function f(t,i,e){t.setAttribute(i,e.join(" "))}const g=e`:host{--_n-tooltip-max-size:var(--n-tooltip-max-size, 50ch);--_n-tooltip-background:rgba(20, 20, 20, 0.95);--_n-tooltip-color:#fff;--_n-tooltip-key-border:rgba(255, 255, 255, 0.03);--_n-tooltip-key-background:rgba(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)}`;var x;function w(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}function k(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?k(e):e}const{transition:E}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let z=x=class extends s{constructor(){super(...arguments),this.shortcutSlot=new c(this,"shortcut"),this.events=new v(this),this.proxy=document.createElement("span"),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>a(t,this,{strategy:"fixed",placement:d(this.position),middleware:[l(8),h(),p({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=E(this.state,"positioned")})),this.hideTooltip=()=>{this.state=E(this.state,"hide")},this.reposition=()=>{this.state=E(this.state,"reposition")},this.handleShow=t=>{const i=t.target;w(i,this)&&(this.currentElement=i,this.state=E(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{const t=k(this.currentElement);t&&(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=y(t,i);s.includes(e)||f(t,i,s.concat(e))}(t,"aria-describedby",this.id))},this.removeDescribedBy=()=>{const t=k(this.currentElement);t&&(this.proxy.remove(),function(t,i,e){const s=y(t,i);s.includes(e)&&f(t,i,s.filter((t=>t!==e)))}(t,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();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})}render(){return o`<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=E(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)}}};z.styles=[u,g],t([r()],z.prototype,"state",void 0),t([n({reflect:!0})],z.prototype,"position",void 0),t([n({reflect:!0})],z.prototype,"role",void 0),t([n({reflect:!0})],z.prototype,"id",void 0),t([n({reflect:!0,type:Number})],z.prototype,"delay",void 0),t([b("id")],z.prototype,"handleIdChange",null),t([b("state")],z.prototype,"handleStateChange",null),z=x=t([i("nord-tooltip")],z);var j=z;export{j as default};
|
|
2
2
|
//# sourceMappingURL=Tooltip.js.map
|
package/lib/Tooltip.js.map
CHANGED
|
@@ -1 +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 { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, flip, shift, offset } from \"@floating-ui/dom\"\n\nimport * as attr from \"../common/attribute.js\"\nimport type { FocusableMixinInterface } from \"../common/mixins/FocusableMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tooltip.css\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { States, fsm } from \"../common/fsm.js\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { observe } from \"../common/decorators/observe.js\"\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 */\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 = document.createElement(\"span\")\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 @property({ reflect: true }) role = \"tooltip\"\n\n /**\n * The id for the active element to reference via aria-describedby.\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 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 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 // eslint-disable-next-line no-console\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) {\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) {\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","proxy","document","createElement","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","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","listen","capture","window","passive","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","undefined","style","visibility","opacity","lastOpened","left","top","setTimeout","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","observe","customElement"],"mappings":"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"}
|
|
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 { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, flip, shift, offset } from \"@floating-ui/dom\"\n\nimport * as attr from \"../common/attribute.js\"\nimport type { FocusableMixinInterface } from \"../common/mixins/FocusableMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tooltip.css\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { States, fsm } from \"../common/fsm.js\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { observe } from \"../common/decorators/observe.js\"\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 = document.createElement(\"span\")\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 @property({ reflect: true }) role = \"tooltip\"\n\n /**\n * The id for the active element to reference via aria-describedby.\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 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 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 // eslint-disable-next-line no-console\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) {\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) {\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","proxy","document","createElement","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","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","listen","capture","window","passive","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","undefined","style","visibility","opacity","lastOpened","left","top","setTimeout","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","observe","customElement"],"mappings":"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"}
|