@aquera/nile-elements 1.9.0 → 1.9.2

package/dist/src/nile-menu/nile-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-menu.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport { styles } from './nile-menu.css';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n  static styles: CSSResultGroup = styles;\n  @state() searchValue: string = '';\n  @state() searchWidth: number = 0;\n\n  @property({ type: Boolean, reflect: true }) searchEnabled = false;\n  @property({ type: Boolean, reflect: true }) customSearch = false;\n\n  @property({ type: Boolean }) showNoResults: boolean = false;\n\n  @property({ type: Boolean }) allowSpaceKey: boolean = false;\n\n  @property({ type: String }) noResultsMessage: string = 'No results found';\n\n  @query('slot:not([name])') defaultSlot!: HTMLSlotElement;\n\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'menu__footer',\n    'menu__header'\n  );\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n  }\n\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nile-menu-item');\n\n    if (item?.hasSubMenu) {\n      return;\n    }\n\n    // if (!item || item.disabled || item.inert) {\n    if (!item || item.disabled) {\n      return;\n    }\n\n    if (item.type === 'checkbox') {\n      item.checked = !item.checked;\n    }\n\n    this.emit('nile-select', { value: item.value });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n\n    // Make a selection when pressing enter\n    if (event.key === 'Enter') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n      item?.click();\n    }\n\n    // Prevent scrolling when space is pressed (ONLY if not typing)\n    if (!this.allowSpaceKey && event.key === ' ') {\n      event.preventDefault();\n    }\n\n    // Move selection\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') index++;\n        else if (event.key === 'ArrowUp') index--;\n        else if (event.key === 'Home') index = 0;\n        else if (event.key === 'End') index = items.length - 1;\n\n        if (index < 0) index = items.length - 1;\n        if (index > items.length - 1) index = 0;\n\n        this.setCurrentItem(items[index]);\n        items[index].focus();\n      }\n    }\n  }\n\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as NileMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllItems();\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'nile-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n        item.getAttribute('role') ?? ''\n      )\n    );\n  }\n\n  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n  getAllItems() {\n    return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n      (el: HTMLElement) => {\n        if (!this.isMenuItem(el)) {\n          // if (el.inert || !this.isMenuItem(el)) {\n          return false;\n        }\n        return true;\n      }\n    ) as NileMenuItem[];\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: NileMenuItem) {\n    const items = this.getAllItems();\n\n    // Update tab indexes\n    items.forEach(i => {\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  private handleSearchChange(e: any) {\n    let items = this.getAllItems();\n    let searchValue = e.target.value;\n    if (this.customSearch) {\n      this.emit('nile-search-value', { value: searchValue });\n      return;\n    }\n\n    let counter = 0;\n    items.map(curr_item => {\n      this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);\n      if (\n        curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())\n      ) {\n        curr_item.style.display = 'block';\n        counter++;\n      } else {\n        curr_item.style.display = 'none';\n      }\n    });\n    this.showNoResults = counter === 0;\n  }\n\n  render() {\n    return html`\n      ${this.searchEnabled\n        ? html`<div class=\"search__wrapper\" part=\"search__wrapper\">\n            <nile-input\n              size=\"medium\"\n              .value=${this.searchValue}\n              placeholder=\"Search...\"\n              @nile-input=${this.handleSearchChange}\n              part=\"menu__input\"\n              clearable\n            >\n              <nile-icon name=\"var(--nile-icon-search, var(--ng-icon-search-lg))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" slot=\"suffix\"> </nile-icon>\n            </nile-input>\n          </div>`\n        : html``}\n      <div part=\"menu__items-wrapper\" class=\"menu__items-wrapper\">\n        ${this.showNoResults\n          ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `\n          : ''}\n\n        <slot\n          name=\"menu__header\"\n          part=\"menu__header\"\n          @click=${(e: Event) => {\n            e.stopPropagation();\n          }}\n        ></slot>\n        <slot\n          class=\"menu__item-wrapper\"\n          @slotchange=${this.handleSlotChange}\n          @click=${this.handleClick}\n          @keydown=${this.handleKeyDown}\n          @mousedown=${this.handleMouseDown}\n        ></slot>\n        ${this.hasSlotController.test('menu__footer')\n          ? html` <slot\n              part=\"menu__footer\"\n              name=\"menu__footer\"\n              class=\"menu__footer\"\n            ></slot>`\n          : null}\n      </div>\n    `;\n  }\n}\nexport default NileMenu;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-menu': NileMenu;\n  }\n}\n"]}
+{"version":3,"file":"nile-menu.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport { styles } from './nile-menu.css';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * An nile-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n\n@customElement('nile-menu')\nexport class NileMenu extends NileElement {\n  static styles: CSSResultGroup = styles;\n  @state() searchValue: string = '';\n  @state() searchWidth: number = 0;\n\n  @property({ type: Boolean, reflect: true }) searchEnabled = false;\n  @property({ type: Boolean, reflect: true }) customSearch = false;\n\n  @property({ type: Boolean }) showNoResults: boolean = false;\n\n  @property({ type: Boolean }) allowSpaceKey: boolean = false;\n\n  @property({ type: String }) noResultsMessage: string = 'No results found';\n\n  @query('slot:not([name])') defaultSlot!: HTMLSlotElement;\n\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'menu__footer',\n    'menu__header'\n  );\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n  }\n\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nile-menu-item');\n\n    if (item?.hasSubMenu) {\n      return;\n    }\n\n    // if (!item || item.disabled || item.inert) {\n    if (!item || item.disabled) {\n      return;\n    }\n\n    if (item.type === 'checkbox' || item.type === 'multiple') {\n      item.checked = !item.checked;\n    }\n\n    this.emit('nile-select', { value: item.value });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n\n    // Make a selection when pressing enter\n    if (event.key === 'Enter') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n      item?.click();\n    }\n\n    // Prevent scrolling when space is pressed (ONLY if not typing)\n    if (!this.allowSpaceKey && event.key === ' ') {\n      event.preventDefault();\n    }\n\n    // Move selection\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') index++;\n        else if (event.key === 'ArrowUp') index--;\n        else if (event.key === 'Home') index = 0;\n        else if (event.key === 'End') index = items.length - 1;\n\n        if (index < 0) index = items.length - 1;\n        if (index > items.length - 1) index = 0;\n\n        this.setCurrentItem(items[index]);\n        items[index].focus();\n      }\n    }\n  }\n\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as NileMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllItems();\n\n    // Reset the roving tab index when the slotted items change\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'nile-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n        item.getAttribute('role') ?? ''\n      )\n    );\n  }\n\n  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n  getAllItems() {\n    return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n      (el: HTMLElement) => {\n        if (!this.isMenuItem(el)) {\n          // if (el.inert || !this.isMenuItem(el)) {\n          return false;\n        }\n        return true;\n      }\n    ) as NileMenuItem[];\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: NileMenuItem) {\n    const items = this.getAllItems();\n\n    // Update tab indexes\n    items.forEach(i => {\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  private handleSearchChange(e: any) {\n    let items = this.getAllItems();\n    let searchValue = e.target.value;\n    if (this.customSearch) {\n      this.emit('nile-search-value', { value: searchValue });\n      return;\n    }\n\n    let counter = 0;\n    items.map(curr_item => {\n      this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);\n      if (\n        curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())\n      ) {\n        curr_item.style.display = 'block';\n        counter++;\n      } else {\n        curr_item.style.display = 'none';\n      }\n    });\n    this.showNoResults = counter === 0;\n  }\n\n  render() {\n    return html`\n      ${this.searchEnabled\n        ? html`<div class=\"search__wrapper\" part=\"search__wrapper\">\n            <nile-input\n              size=\"medium\"\n              .value=${this.searchValue}\n              placeholder=\"Search...\"\n              @nile-input=${this.handleSearchChange}\n              part=\"menu__input\"\n              clearable\n            >\n              <nile-icon name=\"var(--nile-icon-search, var(--ng-icon-search-lg))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" slot=\"suffix\"> </nile-icon>\n            </nile-input>\n          </div>`\n        : html``}\n      <div part=\"menu__items-wrapper\" class=\"menu__items-wrapper\">\n        ${this.showNoResults\n          ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `\n          : ''}\n\n        <slot\n          name=\"menu__header\"\n          part=\"menu__header\"\n          @click=${(e: Event) => {\n            e.stopPropagation();\n          }}\n        ></slot>\n        <slot\n          class=\"menu__item-wrapper\"\n          @slotchange=${this.handleSlotChange}\n          @click=${this.handleClick}\n          @keydown=${this.handleKeyDown}\n          @mousedown=${this.handleMouseDown}\n        ></slot>\n        ${this.hasSlotController.test('menu__footer')\n          ? html` <slot\n              part=\"menu__footer\"\n              name=\"menu__footer\"\n              class=\"menu__footer\"\n            ></slot>`\n          : null}\n      </div>\n    `;\n  }\n}\nexport default NileMenu;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-menu': NileMenu;\n  }\n}\n"]}

package/dist/src/nile-menu-item/nile-menu-item.css.js

@@ -123,6 +123,14 @@ export const styles = css `
     visibility: visible;
   }
 
+  .menu-item .menu-item__checkbox {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
+    pointer-events: none;
+  }
+  
   @media (forced-colors: active) {
     :host(:hover:not([aria-disabled='true'])) .menu-item,
     :host(:focus-visible) .menu-item {

package/dist/src/nile-menu-item/nile-menu-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * MenuItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n    min-height:40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .menu-item.menu-item--active {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n    color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item .menu-item__label {\n    margin: auto var(--nile-spacing-none,var(--ng-spacing-none));\n    display: inline-flex;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {\n    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-secondary-hover));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));\n  }\n\n  :host([active]:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n    color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));\n    color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * MenuItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    align-items: stretch;\n    font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n    min-height:40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .menu-item.menu-item--active {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n    color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item .menu-item__label {\n    margin: auto var(--nile-spacing-none,var(--ng-spacing-none));\n    display: inline-flex;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([active], [aria-disabled='true'], :focus-visible)) .menu-item {\n    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-secondary-hover));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));\n  }\n\n  :host([active]:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n    color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));\n    color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  .menu-item .menu-item__checkbox {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n    pointer-events: none;\n  }\n  \n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-menu-item/nile-menu-item.d.ts

@@ -6,6 +6,7 @@
  */
 import { TemplateResult } from 'lit';
 import '../nile-icon';
+import '../nile-checkbox';
 import NileElement from '../internal/nile-element';
 import type { CSSResultGroup } from 'lit';
 /**
@@ -35,8 +36,10 @@ export declare class NileMenuItem extends NileElement {
     private cachedTextLabel;
     defaultSlot: HTMLSlotElement;
     menuItem: HTMLElement;
-    /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
-    type: 'normal' | 'checkbox';
+    /** The type of menu item to render. To use `checked`, this value must be set to `checkbox` or `multiple` (both render a checkbox and behave identically). */
+    type: 'normal' | 'checkbox' | 'multiple';
+    /** Whether this item renders as a checkbox (true for both `checkbox` and `multiple` types). */
+    private get isCheckable();
     /** Draws the item in a checked state. */
     checked: boolean;
     /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */

package/dist/src/nile-menu-item/nile-menu-item.js

@@ -9,6 +9,7 @@ import { html, } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-menu-item.css';
 import '../nile-icon';
+import '../nile-checkbox';
 import { classMap } from 'lit/directives/class-map.js';
 import { query } from 'lit/decorators.js';
 import { getTextContent } from '../internal/slot';
@@ -39,7 +40,7 @@ import NileElement from '../internal/nile-element';
 let NileMenuItem = class NileMenuItem extends NileElement {
     constructor() {
         super(...arguments);
-        /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
+        /** The type of menu item to render. To use `checked`, this value must be set to `checkbox` or `multiple` (both render a checkbox and behave identically). */
         this.type = 'normal';
         /** Draws the item in a checked state. */
         this.checked = false;
@@ -52,6 +53,10 @@ let NileMenuItem = class NileMenuItem extends NileElement {
         /** Draws the item in a checked state. */
         this.hasSubMenu = false;
     }
+    /** Whether this item renders as a checkbox (true for both `checkbox` and `multiple` types). */
+    get isCheckable() {
+        return this.type === 'checkbox' || this.type === 'multiple';
+    }
     connectedCallback() {
         super.connectedCallback();
         this.handleHostClick = this.handleHostClick.bind(this);
@@ -82,14 +87,14 @@ let NileMenuItem = class NileMenuItem extends NileElement {
         }
     }
     handleCheckedChange() {
-        // For proper accessibility, users have to use type="checkbox" to use the checked attribute
-        if (this.checked && this.type !== 'checkbox') {
+        // For proper accessibility, users have to use type="checkbox" or type="multiple" to use the checked attribute
+        if (this.checked && !this.isCheckable) {
             this.checked = false;
-            console.error('The checked attribute can only be used on menu items with type="checkbox"', this);
+            console.error('The checked attribute can only be used on menu items with type="checkbox" or type="multiple"', this);
             return;
         }
-        // Only checkbox types can receive the aria-checked attribute
-        if (this.type === 'checkbox') {
+        // Only checkable types can receive the aria-checked attribute
+        if (this.isCheckable) {
             this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
         }
         else {
@@ -100,7 +105,7 @@ let NileMenuItem = class NileMenuItem extends NileElement {
         this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
     }
     handleTypeChange() {
-        if (this.type === 'checkbox') {
+        if (this.isCheckable) {
             this.setAttribute('role', 'menuitemcheckbox');
             this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
         }
@@ -125,8 +130,19 @@ let NileMenuItem = class NileMenuItem extends NileElement {
             'menu-item--has-submenu': this.hasSubMenu,
         })}
       >
-        ${this.checked
+      ${this.isCheckable
             ? html `
+              <nile-checkbox
+                part="checkbox"
+                class="menu-item__checkbox"
+                .checked=${this.checked}
+                .disabled=${this.disabled}
+                aria-hidden="true"
+                tabindex="-1"
+              ></nile-checkbox>
+            `
+            : this.checked
+                ? html `
               <span part="checked-icon" class="menu-item__check">
                 <nile-icon
                   name="var(--nile-icon-tick, var(--ng-icon-check))"
@@ -136,7 +152,7 @@ let NileMenuItem = class NileMenuItem extends NileElement {
                 ></nile-icon>
               </span>
             `
-            : ``}
+                : ``}
 
         <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
 

package/dist/src/nile-menu-item/nile-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-menu-item.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QASL,+FAA+F;QACnF,SAAI,GAA0B,QAAQ,CAAC;QAEnD,yCAAyC;QACG,YAAO,GAAG,KAAK,CAAC;QAE5D,gHAAgH;QACpG,UAAK,GAAG,EAAE,CAAC;QAEvB,qEAAqE;QACzB,aAAQ,GAAG,KAAK,CAAC;QAE7D,uDAAuD;QACX,WAAM,GAAG,KAAK,CAAC;QAE3D,yCAAyC;QACG,eAAU,GAAG,KAAK,CAAC;IA8HjE,CAAC;IA5HC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IACvD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAC1D,CAAC;IAEO,uBAAuB;QAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QAEtC,yCAAyC;QACzC,IAAI,OAAO,IAAI,CAAC,eAAe,KAAK,WAAW,EAAE,CAAC;YAChD,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;YACjC,OAAO;QACT,CAAC;QAED,4EAA4E;QAC5E,IAAI,SAAS,KAAK,IAAI,CAAC,eAAe,EAAE,CAAC;YACvC,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;YACjC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,oFAAoF;QACpF,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACnC,CAAC;IACH,CAAC;IAGD,mBAAmB;QACjB,2FAA2F;QAC3F,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC7C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,OAAO,CAAC,KAAK,CACX,2EAA2E,EAC3E,IAAI,CACL,CAAC;YACF,OAAO;QACT,CAAC;QAED,6DAA6D;QAC7D,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC7B,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACrE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;QACvC,CAAC;IACH,CAAC;IAGD,oBAAoB;QAClB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACvE,CAAC;IAGD,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC7B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;YAC9C,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACrE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;YACtC,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;QACvC,CAAC;IACH,CAAC;IAED,kFAAkF;IAClF,YAAY;QACV,OAAO,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,WAAW,EAAE,IAAI;YACjB,oBAAoB,EAAE,IAAI,CAAC,OAAO;YAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;YACpC,mBAAmB,EAAE,IAAI,CAAC,MAAM;YAChC,wBAAwB,EAAE,IAAI,CAAC,UAAU;SAC1C,CAAC;;UAEA,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;;;;;;;;;aASH;YACH,CAAC,CAAC,EAAE;;;;;;;wBAOU,IAAI,CAAC,uBAAuB;;;;;UAK1C,IAAI,CAAC,UAAU;YACf,CAAC,CAAC,IAAI,CAAA;;;;;;;oBAOI;YACV,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AArJM,mBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAIZ;IAA1B,KAAK,CAAC,kBAAkB,CAAC;iDAA8B;AAEnC;IAApB,KAAK,CAAC,YAAY,CAAC;8CAAuB;AAG/B;IAAX,QAAQ,EAAE;0CAAwC;AAGP;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAiB;AAGhD;IAAX,QAAQ,EAAE;2CAAY;AAGqB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAgB;AAGf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAoB;AAsC/D;IADC,KAAK,CAAC,SAAS,CAAC;uDAkBhB;AAGD;IADC,KAAK,CAAC,UAAU,CAAC;wDAGjB;AAGD;IADC,KAAK,CAAC,MAAM,CAAC;oDASb;AAhGU,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAuJxB;;AAED,eAAe,YAAY,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-menu-item.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport { getTextContent } from '../internal/slot';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-menu-item\n *\n * @summary Menu items provide options for the user to pick from in a menu.\n * @status stable\n * @since 2.0\n *\n * @dependency nile-icon\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart base - The component's base wrapper.\n * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.\n * @csspart prefix - The prefix container.\n * @csspart label - The menu item label.\n * @csspart suffix - The suffix container.\n * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).\n */\n\n@customElement('nile-menu-item')\nexport class NileMenuItem extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private cachedTextLabel: string;\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n  @query('.menu-item') menuItem: HTMLElement;\n\n  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */\n  @property() type: 'normal' | 'checkbox' = 'normal';\n\n  /** Draws the item in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n  @property() value = '';\n\n  /** Draws the menu item in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the menu item in an active/selected state. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Draws the item in a checked state. */\n  @property({ type: Boolean, reflect: true }) hasSubMenu = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleHostClick = this.handleHostClick.bind(this);\n    this.addEventListener('click', this.handleHostClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleHostClick);\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange');\n    }\n  }\n\n  private handleHostClick(event: MouseEvent) {\n    // Prevent the click event from being emitted when the button is disabled or loading\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @watch('checked')\n  handleCheckedChange() {\n    // For proper accessibility, users have to use type=\"checkbox\" to use the checked attribute\n    if (this.checked && this.type !== 'checkbox') {\n      this.checked = false;\n      console.error(\n        'The checked attribute can only be used on menu items with type=\"checkbox\"',\n        this\n      );\n      return;\n    }\n\n    // Only checkbox types can receive the aria-checked attribute\n    if (this.type === 'checkbox') {\n      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    } else {\n      this.removeAttribute('aria-checked');\n    }\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('type')\n  handleTypeChange() {\n    if (this.type === 'checkbox') {\n      this.setAttribute('role', 'menuitemcheckbox');\n      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    } else {\n      this.setAttribute('role', 'menuitem');\n      this.removeAttribute('aria-checked');\n    }\n  }\n\n  /** Returns a text label based on the contents of the menu item's default slot. */\n  getTextLabel() {\n    return getTextContent(this.defaultSlot);\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          'menu-item': true,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--active': this.active,\n          'menu-item--has-submenu': this.hasSubMenu,\n        })}\n      >\n        ${this.checked\n          ? html`\n              <span part=\"checked-icon\" class=\"menu-item__check\">\n                <nile-icon\n                  name=\"var(--nile-icon-tick, var(--ng-icon-check))\"\n                  method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n                  library=\"system\"\n                  aria-hidden=\"true\"\n                ></nile-icon>\n              </span>\n            `\n          : ``}\n\n        <slot name=\"prefix\" part=\"prefix\" class=\"menu-item__prefix\"></slot>\n\n        <slot\n          part=\"label\"\n          class=\"menu-item__label\"\n          @slotchange=${this.handleDefaultSlotChange}\n        ></slot>\n\n        <slot name=\"suffix\" part=\"suffix\" class=\"menu-item__suffix\"></slot>\n\n        ${this.hasSubMenu\n          ? html` <span part=\"submenu-icon\" class=\"menu-item__chevron\">\n              <nile-icon\n                name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\"\n                method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n                library=\"system\"\n                aria-hidden=\"true\"\n              ></nile-icon>\n            </span>`\n          : ``}\n      </div>\n    `;\n  }\n}\n\nexport default NileMenuItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-menu-item': NileMenuItem;\n  }\n}\n"]}
+{"version":3,"file":"nile-menu-item.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-item.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-menu-item.css';\nimport '../nile-icon';\nimport '../nile-checkbox';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport { getTextContent } from '../internal/slot';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-menu-item\n *\n * @summary Menu items provide options for the user to pick from in a menu.\n * @status stable\n * @since 2.0\n *\n * @dependency nile-icon\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart base - The component's base wrapper.\n * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.\n * @csspart prefix - The prefix container.\n * @csspart label - The menu item label.\n * @csspart suffix - The suffix container.\n * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).\n */\n\n@customElement('nile-menu-item')\nexport class NileMenuItem extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private cachedTextLabel: string;\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n\n  @query('.menu-item') menuItem: HTMLElement;\n\n  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox` or `multiple` (both render a checkbox and behave identically). */\n  @property() type: 'normal' | 'checkbox' | 'multiple' = 'normal';\n\n  /** Whether this item renders as a checkbox (true for both `checkbox` and `multiple` types). */\n  private get isCheckable(): boolean {\n    return this.type === 'checkbox' || this.type === 'multiple';\n  }\n\n  /** Draws the item in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n  @property() value = '';\n\n  /** Draws the menu item in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the menu item in an active/selected state. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Draws the item in a checked state. */\n  @property({ type: Boolean, reflect: true }) hasSubMenu = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.handleHostClick = this.handleHostClick.bind(this);\n    this.addEventListener('click', this.handleHostClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.handleHostClick);\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange');\n    }\n  }\n\n  private handleHostClick(event: MouseEvent) {\n    // Prevent the click event from being emitted when the button is disabled or loading\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @watch('checked')\n  handleCheckedChange() {\n    // For proper accessibility, users have to use type=\"checkbox\" or type=\"multiple\" to use the checked attribute\n    if (this.checked && !this.isCheckable) {\n      this.checked = false;\n      console.error(\n        'The checked attribute can only be used on menu items with type=\"checkbox\" or type=\"multiple\"',\n        this\n      );\n      return;\n    }\n\n    // Only checkable types can receive the aria-checked attribute\n    if (this.isCheckable) {\n      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    } else {\n      this.removeAttribute('aria-checked');\n    }\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('type')\n  handleTypeChange() {\n    if (this.isCheckable) {\n      this.setAttribute('role', 'menuitemcheckbox');\n      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n    } else {\n      this.setAttribute('role', 'menuitem');\n      this.removeAttribute('aria-checked');\n    }\n  }\n\n  /** Returns a text label based on the contents of the menu item's default slot. */\n  getTextLabel() {\n    return getTextContent(this.defaultSlot);\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          'menu-item': true,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--active': this.active,\n          'menu-item--has-submenu': this.hasSubMenu,\n        })}\n      >\n      ${this.isCheckable\n          ? html`\n              <nile-checkbox\n                part=\"checkbox\"\n                class=\"menu-item__checkbox\"\n                .checked=${this.checked}\n                .disabled=${this.disabled}\n                aria-hidden=\"true\"\n                tabindex=\"-1\"\n              ></nile-checkbox>\n            `\n          : this.checked\n          ? html`\n              <span part=\"checked-icon\" class=\"menu-item__check\">\n                <nile-icon\n                  name=\"var(--nile-icon-tick, var(--ng-icon-check))\"\n                  method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n                  library=\"system\"\n                  aria-hidden=\"true\"\n                ></nile-icon>\n              </span>\n            `\n          : ``}\n\n        <slot name=\"prefix\" part=\"prefix\" class=\"menu-item__prefix\"></slot>\n\n        <slot\n          part=\"label\"\n          class=\"menu-item__label\"\n          @slotchange=${this.handleDefaultSlotChange}\n        ></slot>\n\n        <slot name=\"suffix\" part=\"suffix\" class=\"menu-item__suffix\"></slot>\n\n        ${this.hasSubMenu\n          ? html` <span part=\"submenu-icon\" class=\"menu-item__chevron\">\n              <nile-icon\n                name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\"\n                method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n                library=\"system\"\n                aria-hidden=\"true\"\n              ></nile-icon>\n            </span>`\n          : ``}\n      </div>\n    `;\n  }\n}\n\nexport default NileMenuItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-menu-item': NileMenuItem;\n  }\n}\n"]}

package/dist/src/nile-pagination/nile-pagination.d.ts

@@ -15,6 +15,7 @@ export declare class NilePagination extends NileElement {
     variant: 'fluid' | 'compact' | 'mini';
     disabled: boolean;
     showTitle: boolean;
+    portal: boolean;
     private _pageSizeOpen;
     private _pageOpen;
     private _miniPageOpen;

package/dist/src/nile-pagination/nile-pagination.js

@@ -20,6 +20,7 @@ let NilePagination = class NilePagination extends NileElement {
         this.variant = 'fluid';
         this.disabled = false;
         this.showTitle = true;
+        this.portal = false;
         this._pageSizeOpen = false;
         this._pageOpen = false;
         this._miniPageOpen = false;
@@ -79,7 +80,7 @@ let NilePagination = class NilePagination extends NileElement {
             return null;
         return html `
       <div class="page-size-select">
-        <nile-dropdown class="page-size-dropdown" ?disabled=${this.disabled}>
+        <nile-dropdown class="page-size-dropdown" ?portal=${this.portal} ?disabled=${this.disabled}>
           <nile-button
             slot="trigger"
             variant="tertiary"
@@ -115,6 +116,7 @@ let NilePagination = class NilePagination extends NileElement {
         return html `
       <nile-dropdown
         class="compact-dropdown"
+        ?portal=${this.portal}
         ?disabled=${this.disabled}
         @nile-show=${() => (this._pageSizeOpen = true)}
         @nile-after-hide=${() => (this._pageSizeOpen = false)}
@@ -180,7 +182,7 @@ let NilePagination = class NilePagination extends NileElement {
         if (item === '…') {
             return html `
         <li>
-          <nile-dropdown class="ellipsis-dropdown" ?disabled=${this.disabled}>
+          <nile-dropdown class="ellipsis-dropdown" ?portal=${this.portal} ?disabled=${this.disabled}>
             <nile-button slot="trigger" variant="ghost" ?disabled=${this.disabled}>
               …
             </nile-button>
@@ -247,6 +249,7 @@ let NilePagination = class NilePagination extends NileElement {
         <nile-dropdown
           part="mini-page-dropdown"
           class="mini-page-dropdown"
+          ?portal=${this.portal}
           ?disabled=${this.disabled}
           @nile-show=${() => (this._miniPageOpen = true)}
           @nile-after-hide=${() => (this._miniPageOpen = false)}
@@ -297,6 +300,7 @@ let NilePagination = class NilePagination extends NileElement {
             <li>
               <nile-dropdown
                 class="compact-dropdown1"
+                ?portal=${this.portal}
                 ?disabled=${this.disabled}
                 @nile-show=${() => (this._pageOpen = true)}
                 @nile-after-hide=${() => (this._pageOpen = false)}
@@ -414,6 +418,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NilePagination.prototype, "showTitle", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NilePagination.prototype, "portal", void 0);
 __decorate([
     state()
 ], NilePagination.prototype, "_pageSizeOpen", void 0);

package/dist/src/nile-pagination/nile-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-pagination.js","sourceRoot":"","sources":["../../../src/nile-pagination/nile-pagination.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-pagination.css';\nimport NileElement from '../internal/nile-element';\nimport {\n  calculateTotalPages,\n  getPaginationItems,\n  getHiddenPages,\n  getRangeText,\n} from './nile-pagination-utils';\n\n@customElement('nile-pagination')\nexport class NilePagination extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property({attribute: 'totalitems',reflect: true,converter: {\n      fromAttribute: (v: string) => {\n        const n = Number(v);\n        return Number.isFinite(n) && n >= 0 ? Math.floor(n) : 0;\n      },\n    },\n  })totalItems: number = 0;\n\n  @property({attribute: 'currentpage', reflect: true, converter: {\n      fromAttribute: (v: string) => {\n        const n = Number(v);\n        return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 1;\n      },\n    },\n  })currentPage: number = 1;\n\n  @property({attribute: 'pagesize',reflect: true,converter: {\n      fromAttribute: (v: string) => {\n        const n = Number(v);\n        return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 50;\n      },\n    },\n  })pageSize: number = 50;\n\n  @property({ attribute: 'pagesizeoptions', reflect: false, converter: { fromAttribute: (v: string) => {\n        try {\n          const arr = JSON.parse(v);\n          if (Array.isArray(arr) && arr.every(x => typeof x === 'number')) {\n            return arr as number[];\n          }\n        } catch {}\n        return [10, 25, 50, 100];\n  }}})\n pageSizeOptions: number[] = [10, 25, 50, 100];\n\n  @property({ type: String })variant: 'fluid' | 'compact' | 'mini' = 'fluid';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean }) showTitle = true;\n\n  @state() private _pageSizeOpen = false;\n  @state() private _pageOpen = false;\n  @state() private _miniPageOpen = false;\n  @query('.page-size-dropdown') private _pageSizeDropdown!: HTMLElement;\n\n  firstUpdated() {\n    if (this._pageSizeDropdown) { \n    this._pageSizeDropdown.addEventListener('nile-show', () => {\n      this._pageSizeOpen = true;\n    });\n    this._pageSizeDropdown.addEventListener('nile-after-hide', () => {\n      this._pageSizeOpen = false;\n    });\n  }\n  }\n\n  private get totalPages(): number {\n    return Math.max(1, calculateTotalPages(this.totalItems, this.pageSize));\n  }\n\n  private goToPage(newPage: number) {\n    \n    if (this.disabled) return;\n    const previousPage = this.currentPage;\n    this.currentPage = newPage;\n    this.emit('nile-change', { page: newPage, previousPage, pageSize: this.pageSize });\n  }\n\n private onPageSizeSelect(newSize: number) {\n  if (this.disabled || this.pageSize === newSize) return;\n\n  const previousPage = this.currentPage;\n  this.pageSize = newSize;\n  this.currentPage = 1;\n  this.emit('nile-change', {\n    page: 1,\n    previousPage,\n    pageSize: newSize\n  });\n}\n\nprivate renderCompactRangeText(): TemplateResult {\n  const full = getRangeText(this.totalItems, this.pageSize, this.currentPage);\n  const trimmed = full.replace(/^Showing\\s*/, ''); \n  return html`<div class=\"range-text\">${trimmed}</div>`;\n}\n\n\n  private renderRangeText(): TemplateResult {\n    if (this.totalItems === 0) {\n      return html`<div class=\"range-text\">Showing 0 of 0</div>`;\n    }\n    return html`\n      <div part=\"range-text\" class=\"range-text\">\n        ${getRangeText(this.totalItems, this.pageSize, this.currentPage)}\n      </div>\n    `;\n  }\n\n  private renderPageSizeSelect(): TemplateResult | null {\n    if (this.variant !== 'fluid') return null;\n    return html`\n      <div class=\"page-size-select\">\n        <nile-dropdown class=\"page-size-dropdown\" ?disabled=${this.disabled}>\n          <nile-button\n            slot=\"trigger\"\n            variant=\"tertiary\"\n            class=\"down ${this._pageSizeOpen ? 'open' : ''}\"\n            ?disabled=${this.disabled}\n          >\n            ${this.pageSize}\n            <nile-icon\n                 name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n              size=\"14\"\n              method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n              class=\"chevron\"\n            ></nile-icon>\n          </nile-button>\n          <nile-menu>\n            <div class=\"down-scroll-wrapper\">\n              ${this.pageSizeOptions.map(\n                size => html`\n                  <nile-menu-item\n                    ?disabled=${this.disabled}\n                    @click=${() => this.onPageSizeSelect(size)}\n                  >\n                    ${size}\n                  </nile-menu-item>\n                `\n              )}\n            </div>\n          </nile-menu>\n        </nile-dropdown>\n        <span part=\"pagesize-label\" class=\"page-size-label\">Items per page</span>\n      </div>\n    `;\n  }\n\n\n  private renderCompactPageSize(): TemplateResult {\n    return html`\n      <nile-dropdown\n        class=\"compact-dropdown\"\n        ?disabled=${this.disabled}\n        @nile-show=${() => (this._pageSizeOpen = true)}\n        @nile-after-hide=${() => (this._pageSizeOpen = false)}\n      >\n        <nile-button\n          slot=\"trigger\"\n          variant=\"tertiary\"\n          class=\"down ${this._pageSizeOpen ? 'open' : ''}\"\n          ?disabled=${this.disabled}\n        >\n          ${this.pageSize}\n          <nile-icon\n               name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n            size=\"14\"\n            method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n            class=\"chevron\"\n          ></nile-icon>\n        </nile-button>\n        <nile-menu>\n          <div class=\"compact-scroll-wrapper\">\n            ${this.pageSizeOptions.map(\n              size => html`\n                <nile-menu-item\n                  ?disabled=${this.disabled}\n                  @click=${() => this.onPageSizeSelect(size)}\n                >\n                  ${size}\n                </nile-menu-item>\n              `\n            )}\n          </div>\n        </nile-menu>\n      </nile-dropdown>\n    `;\n  }\n  \n\n  private renderPrevButton(): TemplateResult {\n    return html`\n      <li>\n        <nile-button\n          variant=\"tertiary\"\n          ?disabled=${this.currentPage === 1 || this.disabled}\n          @click=${() => this.goToPage(this.currentPage - 1)}\n          class=\"prev-button\"\n        >\n          <nile-icon name=\"var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n        </nile-button>\n      </li>\n    `;\n  }\n\n  private renderNextButton(): TemplateResult {\n    return html`\n      <li>\n        <nile-button\n          variant=\"tertiary\"\n          ?disabled=${this.currentPage === this.totalPages || this.disabled}\n          @click=${() => this.goToPage(this.currentPage + 1)}\n          class=\"next-button\"\n        >\n          <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n        </nile-button>\n      </li>\n    `;\n  }\n\n  private renderPageItem(\n    item: number | string,\n    idx: number,\n    items: (number | string)[]\n  ): TemplateResult {\n    if (item === '…') {\n      return html`\n        <li>\n          <nile-dropdown class=\"ellipsis-dropdown\" ?disabled=${this.disabled}>\n            <nile-button slot=\"trigger\" variant=\"ghost\" ?disabled=${this.disabled}>\n              …\n            </nile-button>\n            <nile-menu>\n              <div class=\"ellipsis-scroll-wrapper\">\n                ${getHiddenPages(\n                  this.totalPages,\n                  items,\n                  this.currentPage,\n                  idx < items.indexOf(this.currentPage) ? 'left' : 'right'\n                ).map(\n                  page => html`\n                    <nile-menu-item\n                      ?disabled=${this.disabled}\n                      @click=${() => this.goToPage(page)}\n                    >\n                      ${page}\n                    </nile-menu-item>\n                  `\n                )}\n              </div>\n            </nile-menu>\n          </nile-dropdown>\n        </li>\n      `;\n    }\n    return html`\n      <li>\n        <nile-button\n          variant=${item === this.currentPage ? 'primary' : 'ghost'}\n          ?disabled=${this.disabled}\n          @click=${() => this.goToPage(item as number)}\n        >\n          ${item}\n        </nile-button>\n      </li>\n    `;\n  }\n\n  private renderMiniPrevButton(): TemplateResult {\n    return html`\n      <li>\n        <nile-button\n          variant=\"tertiary\"\n          ?disabled=${this.currentPage === 1 || this.disabled}\n          @click=${() => this.goToPage(this.currentPage - 1)}\n          class=\"mini-prev-button\"\n        >\n          <nile-icon name=\"var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"12\"></nile-icon>\n        </nile-button>\n      </li>\n    `;\n  }\n\n  private renderMiniNextButton(): TemplateResult {\n    return html`\n      <li>\n        <nile-button\n          variant=\"tertiary\"\n          ?disabled=${this.currentPage === this.totalPages || this.disabled}\n          @click=${() => this.goToPage(this.currentPage + 1)}\n          class=\"mini-next-button\"\n        >\n          <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"12\"></nile-icon>\n        </nile-button>\n      </li>\n    `;\n  }\n\n  private renderMini(): TemplateResult {\n    return html`\n      <div part=\"wrapper\" class=\"pagination-wrapper mini\">\n        <span part=\"mini-showing-label\" class=\"mini-showing-label\">Showing</span>\n        <nile-dropdown\n          part=\"mini-page-dropdown\"\n          class=\"mini-page-dropdown\"\n          ?disabled=${this.disabled}\n          @nile-show=${() => (this._miniPageOpen = true)}\n          @nile-after-hide=${() => (this._miniPageOpen = false)}\n        >\n          <nile-button\n            slot=\"trigger\"\n            variant=\"tertiary\"\n            class=\"mini-page-btn ${this._miniPageOpen ? 'open' : ''}\"\n            ?disabled=${this.disabled}\n          >\n            ${this.currentPage}\n            <nile-icon\n              name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n              size=\"12\"\n              method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n              class=\"chevron\"\n            ></nile-icon>\n          </nile-button>\n          <nile-menu>\n            <div class=\"mini-scroll-wrapper\">\n              ${Array.from({ length: this.totalPages }, (_, i) => i + 1).map(\n                p => html`\n                  <nile-menu-item\n                    ?disabled=${this.disabled}\n                    @click=${() => this.goToPage(p)}\n                  >\n                    ${p}\n                  </nile-menu-item>\n                `\n              )}\n            </div>\n          </nile-menu>\n        </nile-dropdown>\n        <span part=\"mini-of-label\" class=\"mini-of-label\">of ${this.totalPages}</span>\n        <nav aria-label=\"Pagination\" part=\"mini-nav\" class=\"mini-nav\">\n          <ul part=\"mini-page-list\" class=\"pagination mini-pagination\">\n            ${this.renderMiniPrevButton()}\n            ${this.renderMiniNextButton()}\n          </ul>\n        </nav>\n      </div>\n    `;\n  }\n\n  private renderPageList(): TemplateResult {\n    if (this.variant === 'compact') {\n      return html`\n        <nav aria-label=\"Pagination\">\n          <ul class=\"pagination compact-pagination\">\n            ${this.renderPrevButton()}\n            <li>\n              <nile-dropdown\n                class=\"compact-dropdown1\"\n                ?disabled=${this.disabled}\n                @nile-show=${() => (this._pageOpen = true)}\n                @nile-after-hide=${() => (this._pageOpen = false)}\n              >\n                <nile-button\n                  slot=\"trigger\"\n                  variant=\"tertiary\"\n                  class=\"current-page-btn ${this._pageOpen ? 'open' : ''}\"\n                  ?disabled=${this.disabled}\n                >\n                  ${this.currentPage}\n                  <nile-icon\n                    name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n                    size=\"14\"\n                    method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n                    class=\"chevron\"\n                  ></nile-icon>\n                </nile-button>\n                <nile-menu>\n                  <div class=\"compact-scroll-wrapper1\">\n                    ${Array.from({ length: this.totalPages }, (_, i) => i + 1).map(\n                      p => html`\n                        <nile-menu-item\n                          ?disabled=${this.disabled}\n                          @click=${() => this.goToPage(p)}\n                        >\n                          ${p}\n                        </nile-menu-item>\n                      `\n                    )}\n                  </div>\n                </nile-menu>\n              </nile-dropdown>\n            </li>\n            ${this.renderNextButton()}\n          </ul>\n        </nav>\n      `;\n    }\n    const items = getPaginationItems(this.totalPages, this.currentPage);\n    return html`\n      <nav aria-label=\"Pagination\">\n        <ul part=\"page-list\" class=\"pagination\">\n          ${this.renderPrevButton()}\n          ${items.map((item, idx) => this.renderPageItem(item, idx, items))}\n          ${this.renderNextButton()}\n        </ul>\n      </nav>\n    `;\n  }\n\n public render(): TemplateResult {\n  if (this.variant === 'mini') {\n    return this.renderMini();\n  }\n  return html`\n    <div part=\"wrapper\" class=\"pagination-wrapper ${this.variant}\">\n      <div part=\"pager-container\" class=\"pager-container\">\n        ${this.variant === 'fluid' && this.showTitle\n            ? this.renderRangeText()\n          : this.variant === 'compact'\n            ? this.renderCompactRangeText()\n            : null}\n        ${this.variant === 'fluid'\n          ? this.renderPageSizeSelect()\n          : this.renderCompactPageSize()}\n      </div>\n      ${this.renderPageList()}\n    </div>\n  `;\n}\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-pagination': NilePagination;\n  }\n}\n"]}
+{"version":3,"file":"nile-pagination.js","sourceRoot":"","sources":["../../../src/nile-pagination/nile-pagination.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-pagination.css';\nimport NileElement from '../internal/nile-element';\nimport {\n  calculateTotalPages,\n  getPaginationItems,\n  getHiddenPages,\n  getRangeText,\n} from './nile-pagination-utils';\n\n@customElement('nile-pagination')\nexport class NilePagination extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property({attribute: 'totalitems',reflect: true,converter: {\n      fromAttribute: (v: string) => {\n        const n = Number(v);\n        return Number.isFinite(n) && n >= 0 ? Math.floor(n) : 0;\n      },\n    },\n  })totalItems: number = 0;\n\n  @property({attribute: 'currentpage', reflect: true, converter: {\n      fromAttribute: (v: string) => {\n        const n = Number(v);\n        return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 1;\n      },\n    },\n  })currentPage: number = 1;\n\n  @property({attribute: 'pagesize',reflect: true,converter: {\n      fromAttribute: (v: string) => {\n        const n = Number(v);\n        return Number.isFinite(n) && n >= 1 ? Math.floor(n) : 50;\n      },\n    },\n  })pageSize: number = 50;\n\n  @property({ attribute: 'pagesizeoptions', reflect: false, converter: { fromAttribute: (v: string) => {\n        try {\n          const arr = JSON.parse(v);\n          if (Array.isArray(arr) && arr.every(x => typeof x === 'number')) {\n            return arr as number[];\n          }\n        } catch {}\n        return [10, 25, 50, 100];\n  }}})\n pageSizeOptions: number[] = [10, 25, 50, 100];\n\n  @property({ type: String })variant: 'fluid' | 'compact' | 'mini' = 'fluid';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property({ type: Boolean }) showTitle = true;\n  @property({ type: Boolean, reflect: true }) portal = false;\n\n  @state() private _pageSizeOpen = false;\n  @state() private _pageOpen = false;\n  @state() private _miniPageOpen = false;\n  @query('.page-size-dropdown') private _pageSizeDropdown!: HTMLElement;\n\n  firstUpdated() {\n    if (this._pageSizeDropdown) { \n    this._pageSizeDropdown.addEventListener('nile-show', () => {\n      this._pageSizeOpen = true;\n    });\n    this._pageSizeDropdown.addEventListener('nile-after-hide', () => {\n      this._pageSizeOpen = false;\n    });\n  }\n  }\n\n  private get totalPages(): number {\n    return Math.max(1, calculateTotalPages(this.totalItems, this.pageSize));\n  }\n\n  private goToPage(newPage: number) {\n    \n    if (this.disabled) return;\n    const previousPage = this.currentPage;\n    this.currentPage = newPage;\n    this.emit('nile-change', { page: newPage, previousPage, pageSize: this.pageSize });\n  }\n\n private onPageSizeSelect(newSize: number) {\n  if (this.disabled || this.pageSize === newSize) return;\n\n  const previousPage = this.currentPage;\n  this.pageSize = newSize;\n  this.currentPage = 1;\n  this.emit('nile-change', {\n    page: 1,\n    previousPage,\n    pageSize: newSize\n  });\n}\n\nprivate renderCompactRangeText(): TemplateResult {\n  const full = getRangeText(this.totalItems, this.pageSize, this.currentPage);\n  const trimmed = full.replace(/^Showing\\s*/, ''); \n  return html`<div class=\"range-text\">${trimmed}</div>`;\n}\n\n\n  private renderRangeText(): TemplateResult {\n    if (this.totalItems === 0) {\n      return html`<div class=\"range-text\">Showing 0 of 0</div>`;\n    }\n    return html`\n      <div part=\"range-text\" class=\"range-text\">\n        ${getRangeText(this.totalItems, this.pageSize, this.currentPage)}\n      </div>\n    `;\n  }\n\n  private renderPageSizeSelect(): TemplateResult | null {\n    if (this.variant !== 'fluid') return null;\n    return html`\n      <div class=\"page-size-select\">\n        <nile-dropdown class=\"page-size-dropdown\" ?portal=${this.portal} ?disabled=${this.disabled}>\n          <nile-button\n            slot=\"trigger\"\n            variant=\"tertiary\"\n            class=\"down ${this._pageSizeOpen ? 'open' : ''}\"\n            ?disabled=${this.disabled}\n          >\n            ${this.pageSize}\n            <nile-icon\n                 name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n              size=\"14\"\n              method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n              class=\"chevron\"\n            ></nile-icon>\n          </nile-button>\n          <nile-menu>\n            <div class=\"down-scroll-wrapper\">\n              ${this.pageSizeOptions.map(\n                size => html`\n                  <nile-menu-item\n                    ?disabled=${this.disabled}\n                    @click=${() => this.onPageSizeSelect(size)}\n                  >\n                    ${size}\n                  </nile-menu-item>\n                `\n              )}\n            </div>\n          </nile-menu>\n        </nile-dropdown>\n        <span part=\"pagesize-label\" class=\"page-size-label\">Items per page</span>\n      </div>\n    `;\n  }\n\n\n  private renderCompactPageSize(): TemplateResult {\n    return html`\n      <nile-dropdown\n        class=\"compact-dropdown\"\n        ?portal=${this.portal}\n        ?disabled=${this.disabled}\n        @nile-show=${() => (this._pageSizeOpen = true)}\n        @nile-after-hide=${() => (this._pageSizeOpen = false)}\n      >\n        <nile-button\n          slot=\"trigger\"\n          variant=\"tertiary\"\n          class=\"down ${this._pageSizeOpen ? 'open' : ''}\"\n          ?disabled=${this.disabled}\n        >\n          ${this.pageSize}\n          <nile-icon\n               name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n            size=\"14\"\n            method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n            class=\"chevron\"\n          ></nile-icon>\n        </nile-button>\n        <nile-menu>\n          <div class=\"compact-scroll-wrapper\">\n            ${this.pageSizeOptions.map(\n              size => html`\n                <nile-menu-item\n                  ?disabled=${this.disabled}\n                  @click=${() => this.onPageSizeSelect(size)}\n                >\n                  ${size}\n                </nile-menu-item>\n              `\n            )}\n          </div>\n        </nile-menu>\n      </nile-dropdown>\n    `;\n  }\n  \n\n  private renderPrevButton(): TemplateResult {\n    return html`\n      <li>\n        <nile-button\n          variant=\"tertiary\"\n          ?disabled=${this.currentPage === 1 || this.disabled}\n          @click=${() => this.goToPage(this.currentPage - 1)}\n          class=\"prev-button\"\n        >\n          <nile-icon name=\"var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n        </nile-button>\n      </li>\n    `;\n  }\n\n  private renderNextButton(): TemplateResult {\n    return html`\n      <li>\n        <nile-button\n          variant=\"tertiary\"\n          ?disabled=${this.currentPage === this.totalPages || this.disabled}\n          @click=${() => this.goToPage(this.currentPage + 1)}\n          class=\"next-button\"\n        >\n          <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"14\"></nile-icon>\n        </nile-button>\n      </li>\n    `;\n  }\n\n  private renderPageItem(\n    item: number | string,\n    idx: number,\n    items: (number | string)[]\n  ): TemplateResult {\n    if (item === '…') {\n      return html`\n        <li>\n          <nile-dropdown class=\"ellipsis-dropdown\" ?portal=${this.portal} ?disabled=${this.disabled}>\n            <nile-button slot=\"trigger\" variant=\"ghost\" ?disabled=${this.disabled}>\n              …\n            </nile-button>\n            <nile-menu>\n              <div class=\"ellipsis-scroll-wrapper\">\n                ${getHiddenPages(\n                  this.totalPages,\n                  items,\n                  this.currentPage,\n                  idx < items.indexOf(this.currentPage) ? 'left' : 'right'\n                ).map(\n                  page => html`\n                    <nile-menu-item\n                      ?disabled=${this.disabled}\n                      @click=${() => this.goToPage(page)}\n                    >\n                      ${page}\n                    </nile-menu-item>\n                  `\n                )}\n              </div>\n            </nile-menu>\n          </nile-dropdown>\n        </li>\n      `;\n    }\n    return html`\n      <li>\n        <nile-button\n          variant=${item === this.currentPage ? 'primary' : 'ghost'}\n          ?disabled=${this.disabled}\n          @click=${() => this.goToPage(item as number)}\n        >\n          ${item}\n        </nile-button>\n      </li>\n    `;\n  }\n\n  private renderMiniPrevButton(): TemplateResult {\n    return html`\n      <li>\n        <nile-button\n          variant=\"tertiary\"\n          ?disabled=${this.currentPage === 1 || this.disabled}\n          @click=${() => this.goToPage(this.currentPage - 1)}\n          class=\"mini-prev-button\"\n        >\n          <nile-icon name=\"var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"12\"></nile-icon>\n        </nile-button>\n      </li>\n    `;\n  }\n\n  private renderMiniNextButton(): TemplateResult {\n    return html`\n      <li>\n        <nile-button\n          variant=\"tertiary\"\n          ?disabled=${this.currentPage === this.totalPages || this.disabled}\n          @click=${() => this.goToPage(this.currentPage + 1)}\n          class=\"mini-next-button\"\n        >\n          <nile-icon name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\" size=\"12\"></nile-icon>\n        </nile-button>\n      </li>\n    `;\n  }\n\n  private renderMini(): TemplateResult {\n    return html`\n      <div part=\"wrapper\" class=\"pagination-wrapper mini\">\n        <span part=\"mini-showing-label\" class=\"mini-showing-label\">Showing</span>\n        <nile-dropdown\n          part=\"mini-page-dropdown\"\n          class=\"mini-page-dropdown\"\n          ?portal=${this.portal}\n          ?disabled=${this.disabled}\n          @nile-show=${() => (this._miniPageOpen = true)}\n          @nile-after-hide=${() => (this._miniPageOpen = false)}\n        >\n          <nile-button\n            slot=\"trigger\"\n            variant=\"tertiary\"\n            class=\"mini-page-btn ${this._miniPageOpen ? 'open' : ''}\"\n            ?disabled=${this.disabled}\n          >\n            ${this.currentPage}\n            <nile-icon\n              name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n              size=\"12\"\n              method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n              class=\"chevron\"\n            ></nile-icon>\n          </nile-button>\n          <nile-menu>\n            <div class=\"mini-scroll-wrapper\">\n              ${Array.from({ length: this.totalPages }, (_, i) => i + 1).map(\n                p => html`\n                  <nile-menu-item\n                    ?disabled=${this.disabled}\n                    @click=${() => this.goToPage(p)}\n                  >\n                    ${p}\n                  </nile-menu-item>\n                `\n              )}\n            </div>\n          </nile-menu>\n        </nile-dropdown>\n        <span part=\"mini-of-label\" class=\"mini-of-label\">of ${this.totalPages}</span>\n        <nav aria-label=\"Pagination\" part=\"mini-nav\" class=\"mini-nav\">\n          <ul part=\"mini-page-list\" class=\"pagination mini-pagination\">\n            ${this.renderMiniPrevButton()}\n            ${this.renderMiniNextButton()}\n          </ul>\n        </nav>\n      </div>\n    `;\n  }\n\n  private renderPageList(): TemplateResult {\n    if (this.variant === 'compact') {\n      return html`\n        <nav aria-label=\"Pagination\">\n          <ul class=\"pagination compact-pagination\">\n            ${this.renderPrevButton()}\n            <li>\n              <nile-dropdown\n                class=\"compact-dropdown1\"\n                ?portal=${this.portal}\n                ?disabled=${this.disabled}\n                @nile-show=${() => (this._pageOpen = true)}\n                @nile-after-hide=${() => (this._pageOpen = false)}\n              >\n                <nile-button\n                  slot=\"trigger\"\n                  variant=\"tertiary\"\n                  class=\"current-page-btn ${this._pageOpen ? 'open' : ''}\"\n                  ?disabled=${this.disabled}\n                >\n                  ${this.currentPage}\n                  <nile-icon\n                    name=\"var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))\"\n                    size=\"14\"\n                    method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n                    class=\"chevron\"\n                  ></nile-icon>\n                </nile-button>\n                <nile-menu>\n                  <div class=\"compact-scroll-wrapper1\">\n                    ${Array.from({ length: this.totalPages }, (_, i) => i + 1).map(\n                      p => html`\n                        <nile-menu-item\n                          ?disabled=${this.disabled}\n                          @click=${() => this.goToPage(p)}\n                        >\n                          ${p}\n                        </nile-menu-item>\n                      `\n                    )}\n                  </div>\n                </nile-menu>\n              </nile-dropdown>\n            </li>\n            ${this.renderNextButton()}\n          </ul>\n        </nav>\n      `;\n    }\n    const items = getPaginationItems(this.totalPages, this.currentPage);\n    return html`\n      <nav aria-label=\"Pagination\">\n        <ul part=\"page-list\" class=\"pagination\">\n          ${this.renderPrevButton()}\n          ${items.map((item, idx) => this.renderPageItem(item, idx, items))}\n          ${this.renderNextButton()}\n        </ul>\n      </nav>\n    `;\n  }\n\n public render(): TemplateResult {\n  if (this.variant === 'mini') {\n    return this.renderMini();\n  }\n  return html`\n    <div part=\"wrapper\" class=\"pagination-wrapper ${this.variant}\">\n      <div part=\"pager-container\" class=\"pager-container\">\n        ${this.variant === 'fluid' && this.showTitle\n            ? this.renderRangeText()\n          : this.variant === 'compact'\n            ? this.renderCompactRangeText()\n            : null}\n        ${this.variant === 'fluid'\n          ? this.renderPageSizeSelect()\n          : this.renderCompactPageSize()}\n      </div>\n      ${this.renderPageList()}\n    </div>\n  `;\n}\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-pagination': NilePagination;\n  }\n}\n"]}

package/dist/src/version.js

@@ -1,5 +1,5 @@
 // Version utility - placeholders will be replaced during build
-export const NILE_ELEMENTS_VERSION = '1.9.0';
+export const NILE_ELEMENTS_VERSION = '1.9.2';
 export const NILE_VERSION = '1.2.7';
 // Set global versions for runtime access
 if (typeof window !== 'undefined') {

package/dist/src/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.9.0';\nexport const NILE_VERSION = '1.2.7';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n  window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.9.2';\nexport const NILE_VERSION = '1.2.7';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n  window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}