@aquera/nile-elements 0.1.56-beta-1.0 → 0.1.56-beta-1.1

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

@@ -49,7 +49,6 @@ let NileOption = class NileOption extends NileElement {
          * multiple values.
          */
         this.value = '';
-        this.showCheckbox = false;
         /** Draws the option in a disabled state, preventing selection. */
         this.disabled = false;
     }
@@ -70,11 +69,6 @@ let NileOption = class NileOption extends NileElement {
             }
         }
     }
-    updated(_changedProperties) {
-        if (_changedProperties.has('showCheckbox')) {
-            this.isMultipleSelect = this.showCheckbox;
-        }
-    }
     handleDefaultSlotChange() {
         const textLabel = this.getTextLabel();
         // Ignore the first time the label is set
@@ -178,9 +172,6 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], NileOption.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean })
-], NileOption.prototype, "showCheckbox", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileOption.prototype, "disabled", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.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 { LitElement, CSSResultArray, TemplateResult } from 'lit';\nimport { styles } from './nile-option.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport NileElement from '../internal/nile-element';\nimport '../nile-checkbox';\n\n/**\n * Nile icon component.\n *\n * @tag nile-option\n *\n */\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @status stable\n *\n * @dependency nile-icon\n *\n * @slot - The option'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 checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\n\n@customElement('nile-option')\nexport class NileOption extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private cachedTextLabel: string;\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() selected = false; // the option is selected and has aria-selected=\"true\"\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n  @state() hidden = false; // the option is hidden\n  @state() isMultipleSelect = false;\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  @property({ type: Boolean }) showCheckbox: boolean = false;\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n\n    // Find the closest parent 'nile-select' element\n    const parentSelect = this.closest('nile-select');\n\n    // Check if the parent has the 'multiple' attribute\n    if (parentSelect && parentSelect.hasAttribute('multiple')) {\n      let multipleValue = parentSelect.getAttribute('multiple');\n      if (multipleValue !== 'false') {\n        if(multipleValue === ''){\n          multipleValue = 'true';\n        }\n        this.isMultipleSelect = Boolean(multipleValue);\n      }\n    }\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    if(_changedProperties.has('showCheckbox')) {\n      this.isMultipleSelect = this.showCheckbox;\n    }\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 handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('value')\n  handleValueChange() {\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value);\n    }\n\n    // if (this.value.includes(' ')) {\n    //   console.error(\n    //     `Option values cannot include a space. All spaces have been replaced with underscores.`,\n    //     this\n    //   );\n    //   this.value = this.value.replace(/ /g, '_');\n    // }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    // Search for a label element inside the component\n    const labelElement = this.querySelector('label');\n\n    // If a label element is found, return its text content\n    if (labelElement) {\n      return labelElement.textContent?.trim() ?? '';\n    }\n\n    // If no label element is found, return the existing behavior\n    return (this.textContent ?? '').trim();\n  }\n\n  render() {\n    return html`\n      ${!this.hidden\n        ? html` <div\n            part=\"base\"\n            class=${classMap({\n              option: true,\n              'option--single-select': !this.isMultipleSelect,\n              'option--current': this.selected && !this.isMultipleSelect,\n              'option--disabled': this.disabled,\n              'option--selected': this.selected && !this.isMultipleSelect,\n              'option--hover': this.hasHover,\n            })}\n            @mouseenter=${this.handleMouseEnter}\n            @mouseleave=${this.handleMouseLeave}\n          >\n\n          ${this.isMultipleSelect ? html`<nile-checkbox class=\"option--checkbox\" .checked=${this.selected}></nile-checkbox>` : ''}\n\n            <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n            <slot\n              part=\"label\"\n              class=\"option__label\"\n              @slotchange=${this.handleDefaultSlotChange}\n            ></slot>\n            <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n          </div>`\n        : ''}\n    `;\n  }\n}\n\nexport default NileOption;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-option': NileOption;\n  }\n}\n"]}
+{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAGH,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAE1B;;;;;GAKG;AAEH;;;;;;;;;;;;;;;GAeG;AAGI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,WAAW;IAApC;;QAOI,YAAO,GAAG,KAAK,CAAC,CAAC,qFAAqF;QACtG,aAAQ,GAAG,KAAK,CAAC,CAAC,sDAAsD;QACxE,aAAQ,GAAG,KAAK,CAAC,CAAC,yEAAyE;QAC3F,WAAM,GAAG,KAAK,CAAC,CAAC,uBAAuB;QACvC,qBAAgB,GAAG,KAAK,CAAC;QAElC;;;;WAIG;QAC0B,UAAK,GAAG,EAAE,CAAC;QAExC,kEAAkE;QACtB,aAAQ,GAAG,KAAK,CAAC;IAqH/D,CAAC;IAnHC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;QAE5C,gDAAgD;QAChD,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAEjD,mDAAmD;QACnD,IAAI,YAAY,IAAI,YAAY,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;YAC1D,IAAI,aAAa,GAAG,YAAY,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;YAC1D,IAAI,aAAa,KAAK,OAAO,EAAE,CAAC;gBAC9B,IAAG,aAAa,KAAK,EAAE,EAAC,CAAC;oBACvB,aAAa,GAAG,MAAM,CAAC;gBACzB,CAAC;gBACD,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;YACjD,CAAC;QACH,CAAC;IACH,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,gBAAgB;QACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACvB,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,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,oBAAoB;QAClB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IACvE,CAAC;IAGD,iBAAiB;QACf,oHAAoH;QACpH,2DAA2D;QAC3D,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;YACnC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;QAED,kCAAkC;QAClC,mBAAmB;QACnB,+FAA+F;QAC/F,WAAW;QACX,OAAO;QACP,gDAAgD;QAChD,IAAI;IACN,CAAC;IAED,gEAAgE;IAChE,YAAY;QACV,kDAAkD;QAClD,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAEjD,uDAAuD;QACvD,IAAI,YAAY,EAAE,CAAC;YACjB,OAAO,YAAY,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QAChD,CAAC;QAED,6DAA6D;QAC7D,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IACzC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;QACP,CAAC,IAAI,CAAC,MAAM;YACZ,CAAC,CAAC,IAAI,CAAA;;oBAEM,QAAQ,CAAC;gBACf,MAAM,EAAE,IAAI;gBACZ,uBAAuB,EAAE,CAAC,IAAI,CAAC,gBAAgB;gBAC/C,iBAAiB,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,gBAAgB;gBAC1D,kBAAkB,EAAE,IAAI,CAAC,QAAQ;gBACjC,kBAAkB,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,gBAAgB;gBAC3D,eAAe,EAAE,IAAI,CAAC,QAAQ;aAC/B,CAAC;0BACY,IAAI,CAAC,gBAAgB;0BACrB,IAAI,CAAC,gBAAgB;;;YAGnC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAA,oDAAoD,IAAI,CAAC,QAAQ,mBAAmB,CAAC,CAAC,CAAC,EAAE;;;;;;4BAMrG,IAAI,CAAC,uBAAuB;;;iBAGvC;YACT,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;;AAxIM,iBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAId;IAAxB,KAAK,CAAC,gBAAgB,CAAC;+CAA8B;AAE7C;IAAR,KAAK,EAAE;2CAAiB;AAChB;IAAR,KAAK,EAAE;4CAAkB;AACjB;IAAR,KAAK,EAAE;4CAAkB;AACjB;IAAR,KAAK,EAAE;0CAAgB;AACf;IAAR,KAAK,EAAE;oDAA0B;AAOL;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAY;AAGI;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAkB;AA+C7D;IADC,KAAK,CAAC,UAAU,CAAC;sDAGjB;AAGD;IADC,KAAK,CAAC,UAAU,CAAC;sDAGjB;AAGD;IADC,KAAK,CAAC,OAAO,CAAC;mDAed;AA5FU,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA0ItB;;AAED,eAAe,UAAU,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 { LitElement, CSSResultArray, TemplateResult } from 'lit';\nimport { styles } from './nile-option.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup } from 'lit';\nimport NileElement from '../internal/nile-element';\nimport '../nile-checkbox';\n\n/**\n * Nile icon component.\n *\n * @tag nile-option\n *\n */\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @status stable\n *\n * @dependency nile-icon\n *\n * @slot - The option'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 checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\n\n@customElement('nile-option')\nexport class NileOption extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private cachedTextLabel: string;\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() selected = false; // the option is selected and has aria-selected=\"true\"\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n  @state() hidden = false; // the option is hidden\n  @state() isMultipleSelect = false;\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n\n    // Find the closest parent 'nile-select' element\n    const parentSelect = this.closest('nile-select');\n\n    // Check if the parent has the 'multiple' attribute\n    if (parentSelect && parentSelect.hasAttribute('multiple')) {\n      let multipleValue = parentSelect.getAttribute('multiple');\n      if (multipleValue !== 'false') {\n        if(multipleValue === ''){\n          multipleValue = 'true';\n        }\n        this.isMultipleSelect = Boolean(multipleValue);\n      }\n    }\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 handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('value')\n  handleValueChange() {\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value);\n    }\n\n    // if (this.value.includes(' ')) {\n    //   console.error(\n    //     `Option values cannot include a space. All spaces have been replaced with underscores.`,\n    //     this\n    //   );\n    //   this.value = this.value.replace(/ /g, '_');\n    // }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    // Search for a label element inside the component\n    const labelElement = this.querySelector('label');\n\n    // If a label element is found, return its text content\n    if (labelElement) {\n      return labelElement.textContent?.trim() ?? '';\n    }\n\n    // If no label element is found, return the existing behavior\n    return (this.textContent ?? '').trim();\n  }\n\n  render() {\n    return html`\n      ${!this.hidden\n        ? html` <div\n            part=\"base\"\n            class=${classMap({\n              option: true,\n              'option--single-select': !this.isMultipleSelect,\n              'option--current': this.selected && !this.isMultipleSelect,\n              'option--disabled': this.disabled,\n              'option--selected': this.selected && !this.isMultipleSelect,\n              'option--hover': this.hasHover,\n            })}\n            @mouseenter=${this.handleMouseEnter}\n            @mouseleave=${this.handleMouseLeave}\n          >\n\n          ${this.isMultipleSelect ? html`<nile-checkbox class=\"option--checkbox\" .checked=${this.selected}></nile-checkbox>` : ''}\n\n            <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n            <slot\n              part=\"label\"\n              class=\"option__label\"\n              @slotchange=${this.handleDefaultSlotChange}\n            ></slot>\n            <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n          </div>`\n        : ''}\n    `;\n  }\n}\n\nexport default NileOption;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-option': NileOption;\n  }\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"nile-pagination-utils.js","sourceRoot":"","sources":["../../../src/nile-pagination/nile-pagination-utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,mBAAmB,CACjC,UAAkB,EAClB,QAAgB;IAEhB,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,UAAkB,EAClB,WAAmB;IAEnB,IAAI,UAAU,IAAI,CAAC,EAAE,CAAC;QACpB,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAC7D,CAAC;IAED,MAAM,KAAK,GAAwB,CAAC,CAAC,CAAC,CAAC;IACvC,IAAI,WAAW,IAAI,CAAC,EAAE,CAAC;QACrB,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;IAC9B,CAAC;SAAM,IAAI,WAAW,IAAI,UAAU,GAAG,CAAC,EAAE,CAAC;QACzC,KAAK,CAAC,IAAI,CACR,GAAG,EACH,UAAU,GAAG,CAAC,EACd,UAAU,GAAG,CAAC,EACd,UAAU,GAAG,CAAC,EACd,UAAU,GAAG,CAAC,CACf,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,WAAW,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;IACtE,CAAC;IACD,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACvB,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,UAAkB,EAClB,KAA0B,EAC1B,WAAmB,EACnB,QAA0B;IAE1B,IAAI,UAAU,IAAI,CAAC;QAAE,OAAO,EAAE,CAAC;IAE/B,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAChE,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,CAAa,CAAC;IACrE,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAErD,IAAI,QAAQ,KAAK,MAAM,EAAE,CAAC;QACxB,MAAM,kBAAkB,GAAG,OAAO,CAAC,CAAC,CAAW,CAAC;QAChD,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC;IACpD,CAAC;SAAM,CAAC;QACN,MAAM,kBAAkB,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAW,CAAC;QACjE,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC;IACpD,CAAC;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAC1B,UAAkB,EAClB,QAAgB,EAChB,WAAmB;IAEnB,MAAM,KAAK,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,QAAQ,GAAG,CAAC,CAAC;IAC/C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,QAAQ,EAAE,UAAU,CAAC,CAAC;IACzD,OAAO,WAAW,KAAK,IAAI,GAAG,OAAO,UAAU,EAAE,CAAC;AACpD,CAAC","sourcesContent":["export function calculateTotalPages(\n  totalItems: number,\n  pageSize: number\n): number {\n  return Math.ceil(totalItems / pageSize);\n}\n\nexport function getPaginationItems(\n  totalPages: number,\n  currentPage: number\n): (number | string)[] {\n  if (totalPages <= 7) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const pages: (number | string)[] = [1];\n  if (currentPage <= 4) {\n    pages.push(2, 3, 4, 5, '…');\n  } else if (currentPage >= totalPages - 3) {\n    pages.push(\n      '…',\n      totalPages - 4,\n      totalPages - 3,\n      totalPages - 2,\n      totalPages - 1\n    );\n  } else {\n    pages.push('…', currentPage - 1, currentPage, currentPage + 1, '…');\n  }\n  pages.push(totalPages);\n  return pages;\n}\n\nexport function getHiddenPages(\n  totalPages: number,\n  items: (number | string)[],\n  currentPage: number,\n  position: 'left' | 'right'\n): number[] {\n  if (totalPages <= 7) return [];\n\n  const all = Array.from({ length: totalPages }, (_, i) => i + 1);\n  const visible = items.filter(x => typeof x === 'number') as number[];\n  const hidden = all.filter(p => !visible.includes(p));\n\n  if (position === 'left') {\n    const firstAfterEllipsis = visible[1] as number;\n    return hidden.filter(p => p < firstAfterEllipsis);\n  } else {\n    const lastBeforeEllipsis = visible[visible.length - 2] as number;\n    return hidden.filter(p => p > lastBeforeEllipsis);\n  }\n}\n\nexport function getRangeText(\n  totalItems: number,\n  pageSize: number,\n  currentPage: number\n): string {\n  const start = (currentPage - 1) * pageSize + 1;\n  const end = Math.min(currentPage * pageSize, totalItems);\n  return `Showing ${start}–${end} of ${totalItems}`;\n}\n"]}
+{"version":3,"file":"nile-pagination-utils.js","sourceRoot":"","sources":["../../../src/nile-pagination/nile-pagination-utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,mBAAmB,CACjC,UAAkB,EAClB,QAAgB;IAEhB,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,kBAAkB,CAChC,UAAkB,EAClB,WAAmB;IAEnB,IAAI,UAAU,IAAI,CAAC,EAAE;QACnB,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;KAC5D;IAED,MAAM,KAAK,GAAwB,CAAC,CAAC,CAAC,CAAC;IACvC,IAAI,WAAW,IAAI,CAAC,EAAE;QACpB,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;KAC7B;SAAM,IAAI,WAAW,IAAI,UAAU,GAAG,CAAC,EAAE;QACxC,KAAK,CAAC,IAAI,CACR,GAAG,EACH,UAAU,GAAG,CAAC,EACd,UAAU,GAAG,CAAC,EACd,UAAU,GAAG,CAAC,EACd,UAAU,GAAG,CAAC,CACf,CAAC;KACH;SAAM;QACL,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,WAAW,GAAG,CAAC,EAAE,WAAW,EAAE,WAAW,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;KACrE;IACD,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACvB,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,cAAc,CAC5B,UAAkB,EAClB,KAA0B,EAC1B,WAAmB,EACnB,QAA0B;IAE1B,IAAI,UAAU,IAAI,CAAC;QAAE,OAAO,EAAE,CAAC;IAE/B,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAChE,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,CAAa,CAAC;IACrE,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAErD,IAAI,QAAQ,KAAK,MAAM,EAAE;QACvB,MAAM,kBAAkB,GAAG,OAAO,CAAC,CAAC,CAAW,CAAC;QAChD,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC;KACnD;SAAM;QACL,MAAM,kBAAkB,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAW,CAAC;QACjE,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC;KACnD;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAC1B,UAAkB,EAClB,QAAgB,EAChB,WAAmB;IAEnB,MAAM,KAAK,GAAG,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,QAAQ,GAAG,CAAC,CAAC;IAC/C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,QAAQ,EAAE,UAAU,CAAC,CAAC;IACzD,OAAO,WAAW,KAAK,IAAI,GAAG,OAAO,UAAU,EAAE,CAAC;AACpD,CAAC","sourcesContent":["export function calculateTotalPages(\n  totalItems: number,\n  pageSize: number\n): number {\n  return Math.ceil(totalItems / pageSize);\n}\n\nexport function getPaginationItems(\n  totalPages: number,\n  currentPage: number\n): (number | string)[] {\n  if (totalPages <= 7) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const pages: (number | string)[] = [1];\n  if (currentPage <= 4) {\n    pages.push(2, 3, 4, 5, '…');\n  } else if (currentPage >= totalPages - 3) {\n    pages.push(\n      '…',\n      totalPages - 4,\n      totalPages - 3,\n      totalPages - 2,\n      totalPages - 1\n    );\n  } else {\n    pages.push('…', currentPage - 1, currentPage, currentPage + 1, '…');\n  }\n  pages.push(totalPages);\n  return pages;\n}\n\nexport function getHiddenPages(\n  totalPages: number,\n  items: (number | string)[],\n  currentPage: number,\n  position: 'left' | 'right'\n): number[] {\n  if (totalPages <= 7) return [];\n\n  const all = Array.from({ length: totalPages }, (_, i) => i + 1);\n  const visible = items.filter(x => typeof x === 'number') as number[];\n  const hidden = all.filter(p => !visible.includes(p));\n\n  if (position === 'left') {\n    const firstAfterEllipsis = visible[1] as number;\n    return hidden.filter(p => p < firstAfterEllipsis);\n  } else {\n    const lastBeforeEllipsis = visible[visible.length - 2] as number;\n    return hidden.filter(p => p > lastBeforeEllipsis);\n  }\n}\n\nexport function getRangeText(\n  totalItems: number,\n  pageSize: number,\n  currentPage: number\n): string {\n  const start = (currentPage - 1) * pageSize + 1;\n  const end = Math.min(currentPage * pageSize, totalItems);\n  return `Showing ${start}–${end} of ${totalItems}`;\n}\n"]}

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

@@ -16,10 +16,14 @@ export const styles = css `
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg) ;
+    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg);
+  }
+
+  .pagination-wrapper.v2 {
+    justify-content: flex-start;
+    gap: var(--nile-spacing-spacing-lg);
   }
 
- 
   .pagination-wrapper.v2 .pager-container {
     flex-direction: row;
     align-items: center;
@@ -35,79 +39,12 @@ export const styles = css `
     font-weight: var(--nile-font-weight-regular);
   }
 
- 
-  .pagination-wrapper.compact {
-    min-width: 324px;
-    justify-content: space-between;
-  }
-
-
-
-.pagination-wrapper.compact .range-text {
-  margin-right: var(--nile-spacing-spacing-md);
-  white-space: nowrap;
-}
-
-
-.pagination-wrapper.compact .pager-container {
-  gap: var(--nile-spacing-spacing-md);
-}
-
-
-  .pagination-wrapper.compact .pager-container {
-    display: flex;
-    align-items: center;
-    gap: var(--nile-spacing-spacing-md);
-  }
-
-  .pagination-wrapper.compact .page-size-dropdown ::part(base) {
-    min-width: 32px;
-    height: 32px;
-    padding: 0 6px;
-  }
-
-  .pagination-wrapper.compact .page-size-dropdown .chevron {
-    transition: transform 0.2s;
-  }
-  .pagination-wrapper.compact .page-size-dropdown .open .chevron {
-    transform: rotate(180deg);
-  }
-
-  .pagination-wrapper.compact ul.pagination:not(.compact-pagination) {
-    display: none;
-  }
-
-  .compact-pagination {
-    display: flex;
-    align-items: center;
-    gap: var(--nile-spacing-spacing-xs);
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  .page-dropdown .current-page-btn {
-    padding: 2px;
-    font-size: var(--nile-font-size-small);
-  }
-
-  nile-button.current-page-btn::part(base){
-    min-width: 51px;
-  }
-
-  nile-button.current-page-btn::part(base):active {
-  min-width: 51px;
-}
-
   .pager-container {
     display: flex;
     align-items: center;
     gap: var(--nile-spacing-spacing-3xl);
   }
 
-.pagination-wrapper.compact .pager-container {
-  gap: var(--nile-spacing-xxs) !important;
-}
-
   .range-text {
     font-size: var(--nile-font-size-small);
     color: var(--nile-colors-dark-900);
@@ -136,48 +73,6 @@ export const styles = css `
     overflow-y: auto;
     width: 66px;
   }
-    .down-scroll-wrapper {
-    max-height: 150px;
-    overflow-y: auto;
-    width: 60px;
-  }
-
-
-    .compact-scroll-wrapper {
-    max-height: 160px;
-    overflow-y: auto;
-    width: 60px;
-  }
-  .compact-dropdown nile-menu {
-    overflow-y: auto;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
-    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
-  }
-  
-    .page-size-dropdown nile-menu {
-    overflow-y: auto;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
-    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
-  }
-
-      .compact-scroll-wrapper1 {
-    max-height: 164px;
-    overflow-y: auto;
-    width: 60px;
-  }
-
-  .compact-dropdown1 nile-menu {
-    overflow-y: auto;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
-    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
-  }
-  
-    .compact-dropdown1 nile-menu {
-    overflow-y: auto;
-    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
-    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
-  }
-
 
   .ellipsis-dropdown nile-menu {
     overflow-y: auto;
@@ -185,64 +80,56 @@ export const styles = css `
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
+ 
+
   .page-size-menu {
     max-height: 144px;
     overflow-y: auto;
   }
 
-.pagination-wrapper.fluid ul.pagination li:first-child {
-  margin-right: var(--nile-spacing-spacing-xs);
-}
-.pagination-wrapper.fluid ul.pagination li:last-child {
-  margin-left: var(--nile-spacing-spacing-md);
-}
-
+  ul.pagination li:first-child {
+    margin-right: var(--nile-spacing-spacing-xs);
+  }
+  ul.pagination li:last-child {
+    margin-left: var(--nile-spacing-spacing-md);
+  }
 
   .page-size-label {
     font-size: var(--nile-type-scale-3);
     color: var(--nile-colors-dark-500);
     margin-left: var(--nile-spacing-spacing-md);
     font-feature-settings: 'liga' off, 'clig' off;
-    font-weight: var(--nile-font-weight-regular); 
+    font-weight: var(--nile-font-weight-regular);
   }
 
   nile-button::part(base) {
-    min-width: 32px;
-    height: 32px;
-    padding: 0px 6px;
-    box-shadow: none;
-  }
+      min-width: 32px;
+  height: 32px;
+  padding: 0px 6px;
+  box-shadow: none;
+}
 
   nile-button::part(base):active {
-    min-width: 32px;
-    height: 32px;
-    padding: 0px 6px;
-    box-shadow: none;
-    border: none;
-  }
+  min-width: 32px;
+  height: 32px;
+  padding: 0px 6px;
+  box-shadow: none;
+  border:none;
+}
+ 
+ nile-button.down::part(base){
+  min-width: 62px;
+
+ }
+.page-size-dropdown .chevron {
+  transition: transform 0.2s;
+}
+.page-size-dropdown .open .chevron {
+  transform: rotate(180deg);
+}
+
 
-  nile-button.down::part(base) {
-    min-width: 62px;
-  }
 
-  nile-button.compactbtn:part(base){
-    background-color: red;
-  }
-  .page-size-dropdown .chevron {
-    transition: transform 0.2s;
-  }
-  .page-size-dropdown .open .chevron {
-    transform: rotate(180deg);
-  }
- 
-  .pagination-wrapper.compact .compact-dropdown .chevron,
-  .pagination-wrapper.compact .compact-dropdown1 .chevron {
-    transition: transform 0.2s;
-  }
-  .pagination-wrapper.compact .compact-dropdown .down.open .chevron,
-  .pagination-wrapper.compact .compact-dropdown1 .current-page-btn.open .chevron {
-    transform: rotate(180deg);
-  }
 
 
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"nile-pagination.css.js","sourceRoot":"","sources":["../../../src/nile-pagination/nile-pagination.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6OxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 { css } from 'lit';\n\n/**\n * Pagination CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .pagination-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg) ;\n  }\n\n \n  .pagination-wrapper.v2 .pager-container {\n    flex-direction: row;\n    align-items: center;\n    gap: var(--nile-spacing-spacing-md);\n    margin-right: var(--nile-spacing-spacing-xl);\n  }\n\n  .pagination-wrapper.v2 .range-text {\n    margin-right: var(--nile-spacing-spacing-md);\n    font-size: var(--nile-font-size-small);\n    color: var(--nile-colors-dark-900);\n    font-feature-settings: 'liga' off, 'clig' off;\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n \n  .pagination-wrapper.compact {\n    min-width: 324px;\n    justify-content: space-between;\n  }\n\n\n\n.pagination-wrapper.compact .range-text {\n  margin-right: var(--nile-spacing-spacing-md);\n  white-space: nowrap;\n}\n\n\n.pagination-wrapper.compact .pager-container {\n  gap: var(--nile-spacing-spacing-md);\n}\n\n\n  .pagination-wrapper.compact .pager-container {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-spacing-md);\n  }\n\n  .pagination-wrapper.compact .page-size-dropdown ::part(base) {\n    min-width: 32px;\n    height: 32px;\n    padding: 0 6px;\n  }\n\n  .pagination-wrapper.compact .page-size-dropdown .chevron {\n    transition: transform 0.2s;\n  }\n  .pagination-wrapper.compact .page-size-dropdown .open .chevron {\n    transform: rotate(180deg);\n  }\n\n  .pagination-wrapper.compact ul.pagination:not(.compact-pagination) {\n    display: none;\n  }\n\n  .compact-pagination {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-spacing-xs);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .page-dropdown .current-page-btn {\n    padding: 2px;\n    font-size: var(--nile-font-size-small);\n  }\n\n  nile-button.current-page-btn::part(base){\n    min-width: 51px;\n  }\n\n  nile-button.current-page-btn::part(base):active {\n  min-width: 51px;\n}\n\n  .pager-container {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-spacing-3xl);\n  }\n\n.pagination-wrapper.compact .pager-container {\n  gap: var(--nile-spacing-xxs) !important;\n}\n\n  .range-text {\n    font-size: var(--nile-font-size-small);\n    color: var(--nile-colors-dark-900);\n    white-space: nowrap;\n  }\n\n  .page-size-select {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  ul.pagination {\n    display: flex;\n    list-style: none;\n    padding: var(--nile-spacing-spacing-none);\n    margin: var(--nile-spacing-spacing-none);\n    gap: var(--nile-radius-radius-xxs);\n  }\n\n  ul.pagination li {\n    margin: var(--nile-spacing-spacing-none);\n  }\n\n  .ellipsis-scroll-wrapper {\n    max-height: 194px;\n    overflow-y: auto;\n    width: 66px;\n  }\n    .down-scroll-wrapper {\n    max-height: 150px;\n    overflow-y: auto;\n    width: 60px;\n  }\n\n\n    .compact-scroll-wrapper {\n    max-height: 160px;\n    overflow-y: auto;\n    width: 60px;\n  }\n  .compact-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n  \n    .page-size-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n      .compact-scroll-wrapper1 {\n    max-height: 164px;\n    overflow-y: auto;\n    width: 60px;\n  }\n\n  .compact-dropdown1 nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n  \n    .compact-dropdown1 nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n\n  .ellipsis-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n  .page-size-menu {\n    max-height: 144px;\n    overflow-y: auto;\n  }\n\n.pagination-wrapper.fluid ul.pagination li:first-child {\n  margin-right: var(--nile-spacing-spacing-xs);\n}\n.pagination-wrapper.fluid ul.pagination li:last-child {\n  margin-left: var(--nile-spacing-spacing-md);\n}\n\n\n  .page-size-label {\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-500);\n    margin-left: var(--nile-spacing-spacing-md);\n    font-feature-settings: 'liga' off, 'clig' off;\n    font-weight: var(--nile-font-weight-regular); \n  }\n\n  nile-button::part(base) {\n    min-width: 32px;\n    height: 32px;\n    padding: 0px 6px;\n    box-shadow: none;\n  }\n\n  nile-button::part(base):active {\n    min-width: 32px;\n    height: 32px;\n    padding: 0px 6px;\n    box-shadow: none;\n    border: none;\n  }\n\n  nile-button.down::part(base) {\n    min-width: 62px;\n  }\n\n  nile-button.compactbtn:part(base){\n    background-color: red;\n  }\n  .page-size-dropdown .chevron {\n    transition: transform 0.2s;\n  }\n  .page-size-dropdown .open .chevron {\n    transform: rotate(180deg);\n  }\n \n  .pagination-wrapper.compact .compact-dropdown .chevron,\n  .pagination-wrapper.compact .compact-dropdown1 .chevron {\n    transition: transform 0.2s;\n  }\n  .pagination-wrapper.compact .compact-dropdown .down.open .chevron,\n  .pagination-wrapper.compact .compact-dropdown1 .current-page-btn.open .chevron {\n    transform: rotate(180deg);\n  }\n\n\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-pagination.css.js","sourceRoot":"","sources":["../../../src/nile-pagination/nile-pagination.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 { css } from 'lit';\n\n/**\n * Pagination CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .pagination-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg);\n  }\n\n  .pagination-wrapper.v2 {\n    justify-content: flex-start;\n    gap: var(--nile-spacing-spacing-lg);\n  }\n\n  .pagination-wrapper.v2 .pager-container {\n    flex-direction: row;\n    align-items: center;\n    gap: var(--nile-spacing-spacing-md);\n    margin-right: var(--nile-spacing-spacing-xl);\n  }\n\n  .pagination-wrapper.v2 .range-text {\n    margin-right: var(--nile-spacing-spacing-md);\n    font-size: var(--nile-font-size-small);\n    color: var(--nile-colors-dark-900);\n    font-feature-settings: 'liga' off, 'clig' off;\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  .pager-container {\n    display: flex;\n    align-items: center;\n    gap: var(--nile-spacing-spacing-3xl);\n  }\n\n  .range-text {\n    font-size: var(--nile-font-size-small);\n    color: var(--nile-colors-dark-900);\n    white-space: nowrap;\n  }\n\n  .page-size-select {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  ul.pagination {\n    display: flex;\n    list-style: none;\n    padding: var(--nile-spacing-spacing-none);\n    margin: var(--nile-spacing-spacing-none);\n    gap: var(--nile-radius-radius-xxs);\n  }\n\n  ul.pagination li {\n    margin: var(--nile-spacing-spacing-none);\n  }\n\n  .ellipsis-scroll-wrapper {\n    max-height: 194px;\n    overflow-y: auto;\n    width: 66px;\n  }\n\n  .ellipsis-dropdown nile-menu {\n    overflow-y: auto;\n    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);\n    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n  }\n\n \n\n  .page-size-menu {\n    max-height: 144px;\n    overflow-y: auto;\n  }\n\n  ul.pagination li:first-child {\n    margin-right: var(--nile-spacing-spacing-xs);\n  }\n  ul.pagination li:last-child {\n    margin-left: var(--nile-spacing-spacing-md);\n  }\n\n  .page-size-label {\n    font-size: var(--nile-type-scale-3);\n    color: var(--nile-colors-dark-500);\n    margin-left: var(--nile-spacing-spacing-md);\n    font-feature-settings: 'liga' off, 'clig' off;\n    font-weight: var(--nile-font-weight-regular);\n  }\n\n  nile-button::part(base) {\n      min-width: 32px;\n  height: 32px;\n  padding: 0px 6px;\n  box-shadow: none;\n}\n\n  nile-button::part(base):active {\n  min-width: 32px;\n  height: 32px;\n  padding: 0px 6px;\n  box-shadow: none;\n  border:none;\n}\n \n nile-button.down::part(base){\n  min-width: 62px;\n\n }\n.page-size-dropdown .chevron {\n  transition: transform 0.2s;\n}\n.page-size-dropdown .open .chevron {\n  transform: rotate(180deg);\n}\n\n\n\n\n\n`;\n\nexport default [styles];\n"]}

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

@@ -16,16 +16,13 @@ export declare class NilePagination extends NileElement {
     disabled: boolean;
     showTitle: boolean;
     private _pageSizeOpen;
-    private _pageOpen;
     private _pageSizeDropdown;
     firstUpdated(): void;
     private get totalPages();
     private goToPage;
     private onPageSizeSelect;
-    private renderCompactRangeText;
     private renderRangeText;
     private renderPageSizeSelect;
-    private renderCompactPageSize;
     private renderPrevButton;
     private renderNextButton;
     private renderPageItem;