@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

package/dist/components/pagination/pagination.element.js

@@ -1,176 +1,160 @@
-import { LitElement, html, css } from "lit";
-import { queryAll, query, property, state } from "lit/decorators.js";
-import { UUIPaginationEvent } from "./UUIPaginationEvent.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import "../button/button.js";
 import "../button-group/button-group.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const PAGE_BUTTON_MAX_WIDTH = 45;
-const limit = (val, min, max) => {
-  return Math.min(Math.max(val, min), max);
+import { UUIPaginationEvent } from "./UUIPaginationEvent.js";
+import { LitElement, css, html } from "lit";
+import { property, query, queryAll, state } from "lit/decorators.js";
+//#region src/components/pagination/pagination.element.ts
+var PAGE_BUTTON_MAX_WIDTH = 45;
+var limit = (val, min, max) => {
+	return Math.min(Math.max(val, min), max);
 };
-const arrayOfNumbers = (start, stop) => {
-  return Array.from({ length: stop - start + 1 }, (_, i) => start + i);
+var arrayOfNumbers = (start, stop) => {
+	return Array.from({ length: stop - start + 1 }, (_, i) => start + i);
 };
-const _UUIPaginationElement = class _UUIPaginationElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    this._observer = new ResizeObserver(
-      this._calculateRange.bind(this)
-    );
-    this.label = "";
-    this.ariaLabel = "";
-    this.firstLabel = "First";
-    this.previousLabel = "Previous";
-    this.nextLabel = "Next";
-    this.lastLabel = "Last";
-    this._total = 100;
-    this._range = 0;
-    this._visiblePages = [];
-    this._current = 1;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.hasAttribute("role")) this.setAttribute("role", "navigation");
-    this._visiblePages = this._generateVisiblePages(this.current);
-  }
-  disconnectedCallback() {
-    this._observer.disconnect();
-  }
-  firstUpdated() {
-    this._observer.observe(this._pagesGroup);
-    this.updateLabel();
-    this._calculateRange();
-  }
-  willUpdate(changedProperties) {
-    if (changedProperties.has("current") || changedProperties.has("label")) {
-      this.updateLabel();
-    }
-  }
-  updateLabel() {
-    this.ariaLabel = `${this.label || "Pagination navigation"}. Current page: ${this.current}.`;
-  }
-  _calculateRange() {
-    const containerWidth = this.offsetWidth;
-    const navButtonsWidth = Array.from(this._navButtons).reduce(
-      (totalWidth, button) => {
-        return totalWidth + button.getBoundingClientRect().width;
-      },
-      0
-    );
-    const rangeBaseWidth = containerWidth - navButtonsWidth;
-    const range = rangeBaseWidth / PAGE_BUTTON_MAX_WIDTH / 2;
-    this._range = Math.max(0, Math.floor(range));
-    this._visiblePages = this._generateVisiblePages(this.current);
-  }
-  _generateVisiblePages(current) {
-    let start;
-    if (current < this._range) {
-      start = 1;
-    } else if (current < this.total - this._range) {
-      start = current - this._range;
-    } else {
-      start = this.total - this._range * 2;
-    }
-    let stop;
-    if (current <= this._range) {
-      stop = this._range * 2 + 1;
-    } else if (current < this.total - this._range) {
-      stop = current + this._range;
-    } else {
-      stop = this.total;
-    }
-    const pages = arrayOfNumbers(
-      limit(start, 1, this.total),
-      limit(stop, 1, this.total)
-    );
-    return pages;
-  }
-  get total() {
-    return this._total;
-  }
-  set total(newValue) {
-    this._total = newValue;
-    this._visiblePages = this._generateVisiblePages(this._current);
-    this.requestUpdate("total", newValue);
-  }
-  get current() {
-    return this._current;
-  }
-  set current(newValue) {
-    const oldValue = this._current;
-    this._current = limit(newValue, 1, this.total);
-    this._visiblePages = this._generateVisiblePages(this._current);
-    this.requestUpdate("current", oldValue);
-  }
-  /**
-   * This method will change the page to a next one.
-   * @memberof UUIPaginationElement
-   */
-  goToNextPage() {
-    this.current++;
-    this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));
-  }
-  /**
-   * Change the page to a previous one.
-   * @memberof UUIPaginationElement
-   */
-  goToPreviousPage() {
-    this.current--;
-    this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));
-  }
-  /**
-   * Change the page to the one passed as an argument to this method.
-   * @param {number} page
-   * @memberof UUIPaginationElement
-   */
-  goToPage(page) {
-    this.current = page;
-    this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));
-  }
-  /** When having limited display of page-buttons and clicking a page-button that changes the current range, the focus stays on the position of the clicked button which is not anymore representing the number clicked, therefore we move focus to the button that represents the current page. */
-  focusActivePage() {
-    requestAnimationFrame(() => {
-      const activeButtonElement = this.renderRoot.querySelector(".active");
-      if (activeButtonElement) {
-        activeButtonElement.focus();
-      }
-    });
-  }
-  renderFirst() {
-    return html`<uui-button
+/**
+* @element uui-pagination
+* @description Jump to a certain page and navigate to the next, last, previous or first page. The amount of visible page-buttons are adjusted to the available space.
+* @fires change - When clicked on the page button fires change event
+*/
+var UUIPaginationElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._observer = new ResizeObserver(this._calculateRange.bind(this));
+		this.label = "";
+		this.ariaLabel = "";
+		this.firstLabel = "First";
+		this.previousLabel = "Previous";
+		this.nextLabel = "Next";
+		this.lastLabel = "Last";
+		this._total = 100;
+		this._range = 0;
+		this._visiblePages = [];
+		this._current = 1;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute("role")) this.setAttribute("role", "navigation");
+		this._visiblePages = this._generateVisiblePages(this.current);
+	}
+	disconnectedCallback() {
+		this._observer.disconnect();
+	}
+	firstUpdated() {
+		this._observer.observe(this._pagesGroup);
+		this.updateLabel();
+		this._calculateRange();
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("current") || changedProperties.has("label")) this.updateLabel();
+	}
+	updateLabel() {
+		this.ariaLabel = `${this.label || "Pagination navigation"}. Current page: ${this.current}.`;
+	}
+	_calculateRange() {
+		const range = (this.offsetWidth - Array.from(this._navButtons).reduce((totalWidth, button) => {
+			return totalWidth + button.getBoundingClientRect().width;
+		}, 0)) / PAGE_BUTTON_MAX_WIDTH / 2;
+		this._range = Math.max(0, Math.floor(range));
+		this._visiblePages = this._generateVisiblePages(this.current);
+	}
+	_generateVisiblePages(current) {
+		let start;
+		if (current < this._range) start = 1;
+		else if (current < this.total - this._range) start = current - this._range;
+		else start = this.total - this._range * 2;
+		let stop;
+		if (current <= this._range) stop = this._range * 2 + 1;
+		else if (current < this.total - this._range) stop = current + this._range;
+		else stop = this.total;
+		return arrayOfNumbers(limit(start, 1, this.total), limit(stop, 1, this.total));
+	}
+	/**
+	* Set the amount of pages to navigate.
+	* @type {number}
+	* @attr
+	* @default: 1
+	*/
+	get total() {
+		return this._total;
+	}
+	set total(newValue) {
+		this._total = newValue;
+		this._visiblePages = this._generateVisiblePages(this._current);
+		this.requestUpdate("total", newValue);
+	}
+	/**
+	* Define the current active page.
+	* @type {number}
+	* @attr
+	*/
+	get current() {
+		return this._current;
+	}
+	set current(newValue) {
+		const oldValue = this._current;
+		this._current = limit(newValue, 1, this.total);
+		this._visiblePages = this._generateVisiblePages(this._current);
+		this.requestUpdate("current", oldValue);
+	}
+	/**
+	* This method will change the page to a next one.
+	* @memberof UUIPaginationElement
+	*/
+	goToNextPage() {
+		this.current++;
+		this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));
+	}
+	/**
+	* Change the page to a previous one.
+	* @memberof UUIPaginationElement
+	*/
+	goToPreviousPage() {
+		this.current--;
+		this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));
+	}
+	/**
+	* Change the page to the one passed as an argument to this method.
+	* @param {number} page
+	* @memberof UUIPaginationElement
+	*/
+	goToPage(page) {
+		this.current = page;
+		this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));
+	}
+	/** When having limited display of page-buttons and clicking a page-button that changes the current range, the focus stays on the position of the clicked button which is not anymore representing the number clicked, therefore we move focus to the button that represents the current page. */
+	focusActivePage() {
+		requestAnimationFrame(() => {
+			const activeButtonElement = this.renderRoot.querySelector(".active");
+			if (activeButtonElement) activeButtonElement.focus();
+		});
+	}
+	renderFirst() {
+		return html`<uui-button
       compact
       class="nav"
       label=${this.firstLabel}
       ?disabled=${this._current === 1}
       @click=${() => this.goToPage(1)}></uui-button>`;
-  }
-  renderPrevious() {
-    return html`<uui-button
+	}
+	renderPrevious() {
+		return html`<uui-button
       compact
       class="nav"
       label=${this.previousLabel}
       ?disabled=${this._current === 1}
       @click=${this.goToPreviousPage}></uui-button>`;
-  }
-  renderNext() {
-    return html`<uui-button
+	}
+	renderNext() {
+		return html`<uui-button
       compact
       class="nav"
       label=${this.nextLabel}
       ?disabled=${this._current === this.total}
       @click=${this.goToNextPage}></uui-button>`;
-  }
-  renderLast() {
-    return html`
+	}
+	renderLast() {
+		return html`
       <uui-button
         compact
         class="nav"
@@ -178,9 +162,9 @@ const _UUIPaginationElement = class _UUIPaginationElement extends LitElement {
         ?disabled=${this.total === this._current}
         @click=${() => this.goToPage(this.total)}></uui-button>
     `;
-  }
-  renderDots() {
-    return html`<uui-button
+	}
+	renderDots() {
+		return html`<uui-button
       compact
       look="outline"
       role="listitem"
@@ -189,9 +173,9 @@ const _UUIPaginationElement = class _UUIPaginationElement extends LitElement {
       label="More pages"
       >...</uui-button
     >`;
-  }
-  renderPage(page) {
-    return html`<uui-button
+	}
+	renderPage(page) {
+		return html`<uui-button
       compact
       look="outline"
       role="listitem"
@@ -199,41 +183,38 @@ const _UUIPaginationElement = class _UUIPaginationElement extends LitElement {
       class=${"page" + (page === this._current ? " active" : "")}
       tabindex=${page === this._current ? "-1" : ""}
       @click=${() => {
-      if (page === this._current) return;
-      this.goToPage(page);
-      this.focusActivePage();
-    }}>
+			if (page === this._current) return;
+			this.goToPage(page);
+			this.focusActivePage();
+		}}>
       ${page}
     </uui-button>`;
-  }
-  renderLeftDots() {
-    return html` ${this._visiblePages.includes(1) ? "" : this.renderDots()}`;
-  }
-  renderRightDots() {
-    return html`${this._visiblePages.includes(this.total) ? "" : this.renderDots()}`;
-  }
-  renderNavigationLeft() {
-    return html` ${this.renderFirst()} ${this.renderPrevious()}`;
-  }
-  renderNavigationRight() {
-    return html` ${this.renderNext()} ${this.renderLast()}`;
-  }
-  render() {
-    return html`
+	}
+	renderLeftDots() {
+		return html` ${this._visiblePages.includes(1) ? "" : this.renderDots()}`;
+	}
+	renderRightDots() {
+		return html`${this._visiblePages.includes(this.total) ? "" : this.renderDots()}`;
+	}
+	renderNavigationLeft() {
+		return html` ${this.renderFirst()} ${this.renderPrevious()}`;
+	}
+	renderNavigationRight() {
+		return html` ${this.renderNext()} ${this.renderLast()}`;
+	}
+	render() {
+		return html`
       ${this.renderNavigationLeft()}
       <uui-button-group role="list" id="pages">
         ${this.renderLeftDots()}
-        ${this._visiblePages.map(
-      (page) => this.renderPage(page)
-    )}
+        ${this._visiblePages.map((page) => this.renderPage(page))}
         ${this.renderRightDots()}
       </uui-button-group>
       ${this.renderNavigationRight()}
     `;
-  }
-};
-_UUIPaginationElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         display: inline-flex;
         width: 100%;
@@ -279,46 +260,25 @@ _UUIPaginationElement.styles = [
         --uui-button-border-color: var(--uui-color-selected);
         --uui-button-border-width: 2px;
       }
-    `
-];
-let UUIPaginationElement = _UUIPaginationElement;
-__decorateClass([
-  queryAll("uui-button.nav")
-], UUIPaginationElement.prototype, "_navButtons", 2);
-__decorateClass([
-  query("#pages")
-], UUIPaginationElement.prototype, "_pagesGroup", 2);
-__decorateClass([
-  property()
-], UUIPaginationElement.prototype, "label", 2);
-__decorateClass([
-  property({ reflect: true, attribute: "aria-label" })
-], UUIPaginationElement.prototype, "ariaLabel", 2);
-__decorateClass([
-  property()
-], UUIPaginationElement.prototype, "firstLabel", 2);
-__decorateClass([
-  property()
-], UUIPaginationElement.prototype, "previousLabel", 2);
-__decorateClass([
-  property()
-], UUIPaginationElement.prototype, "nextLabel", 2);
-__decorateClass([
-  property()
-], UUIPaginationElement.prototype, "lastLabel", 2);
-__decorateClass([
-  property({ type: Number })
-], UUIPaginationElement.prototype, "total", 1);
-__decorateClass([
-  state()
-], UUIPaginationElement.prototype, "_range", 2);
-__decorateClass([
-  state()
-], UUIPaginationElement.prototype, "_visiblePages", 2);
-__decorateClass([
-  property({ type: Number })
-], UUIPaginationElement.prototype, "current", 1);
-export {
-  UUIPaginationElement
+    `];
+	}
 };
-//# sourceMappingURL=pagination.element.js.map
+__decorate([queryAll("uui-button.nav")], UUIPaginationElement.prototype, "_navButtons", void 0);
+__decorate([query("#pages")], UUIPaginationElement.prototype, "_pagesGroup", void 0);
+__decorate([property()], UUIPaginationElement.prototype, "label", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: "aria-label"
+})], UUIPaginationElement.prototype, "ariaLabel", void 0);
+__decorate([property()], UUIPaginationElement.prototype, "firstLabel", void 0);
+__decorate([property()], UUIPaginationElement.prototype, "previousLabel", void 0);
+__decorate([property()], UUIPaginationElement.prototype, "nextLabel", void 0);
+__decorate([property()], UUIPaginationElement.prototype, "lastLabel", void 0);
+__decorate([property({ type: Number })], UUIPaginationElement.prototype, "total", null);
+__decorate([state()], UUIPaginationElement.prototype, "_range", void 0);
+__decorate([state()], UUIPaginationElement.prototype, "_visiblePages", void 0);
+__decorate([property({ type: Number })], UUIPaginationElement.prototype, "current", null);
+//#endregion
+export { UUIPaginationElement };
+
+//# sourceMappingURL=pagination.element.js.map

package/dist/components/pagination/pagination.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.element.js","sources":["../../../src/components/pagination/pagination.element.ts"],"sourcesContent":["import type { UUIButtonElement } from '../button/button.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, queryAll, state } from 'lit/decorators.js';\n\nimport { UUIPaginationEvent } from './UUIPaginationEvent.js';\n\nimport '../button/button.js';\nimport '../button-group/button-group.js';\n\n//this is how wide the button gets when it has 3 digits inside.\nconst PAGE_BUTTON_MAX_WIDTH = 45;\n\nconst limit = (val: number, min: number, max: number) => {\n  return Math.min(Math.max(val, min), max);\n};\n\nconst arrayOfNumbers = (start: number, stop: number) => {\n  return Array.from({ length: stop - start + 1 }, (_, i) => start + i);\n};\n\n/**\n * @element uui-pagination\n * @description Jump to a certain page and navigate to the next, last, previous or first page. The amount of visible page-buttons are adjusted to the available space.\n * @fires change - When clicked on the page button fires change event\n */\nexport class UUIPaginationElement extends LitElement {\n  private readonly _observer = new ResizeObserver(\n    this._calculateRange.bind(this),\n  );\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) this.setAttribute('role', 'navigation');\n    this._visiblePages = this._generateVisiblePages(this.current);\n  }\n\n  disconnectedCallback() {\n    this._observer.disconnect();\n  }\n\n  firstUpdated() {\n    this._observer.observe(this._pagesGroup);\n\n    this.updateLabel();\n    this._calculateRange();\n  }\n\n  willUpdate(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('current') || changedProperties.has('label')) {\n      this.updateLabel();\n    }\n  }\n\n  protected updateLabel() {\n    this.ariaLabel = `${this.label || 'Pagination navigation'}. Current page: ${\n      this.current\n    }.`;\n  }\n\n  private _calculateRange() {\n    const containerWidth = this.offsetWidth;\n\n    // get all the buttons with .nav-button class and sum up their widths\n    const navButtonsWidth = Array.from(this._navButtons).reduce(\n      (totalWidth, button) => {\n        return totalWidth + button.getBoundingClientRect().width;\n      },\n      0,\n    );\n\n    // subtract width of nav-buttons from the pagination container\n    const rangeBaseWidth = containerWidth - navButtonsWidth;\n\n    // divide remaining width by max-width of page button (when it has 3 digits), then divide by 2 to get the range.\n    // Range is number of buttons visible on either \"side\" of current pag button. So, if range === 5 we shall see 11 buttons in total - 5 before the current page and 5 after. This is why we divide by 2.\n    const range = rangeBaseWidth / PAGE_BUTTON_MAX_WIDTH / 2;\n    this._range = Math.max(0, Math.floor(range));\n    this._visiblePages = this._generateVisiblePages(this.current);\n  }\n\n  private _generateVisiblePages(current: number) {\n    let start: number;\n    if (current < this._range) {\n      start = 1;\n    } else if (current < this.total - this._range) {\n      start = current - this._range;\n    } else {\n      start = this.total - this._range * 2;\n    }\n\n    let stop: number;\n    if (current <= this._range) {\n      stop = this._range * 2 + 1;\n    } else if (current < this.total - this._range) {\n      stop = current + this._range;\n    } else {\n      stop = this.total;\n    }\n\n    const pages = arrayOfNumbers(\n      limit(start, 1, this.total),\n      limit(stop, 1, this.total),\n    );\n\n    return pages;\n  }\n\n  @queryAll('uui-button.nav')\n  private readonly _navButtons!: Array<UUIButtonElement>;\n\n  @query('#pages')\n  private readonly _pagesGroup!: any;\n\n  /**\n   * This property is used to generate a proper `aria-label`. It will be announced by screen reader as: \"<<this.label>>. Current page: <<this.current>>\"\n   * @type {string}\n   * @attr\n   */\n  @property()\n  label = '';\n\n  /**\n   * With this property you can overwrite aria-label.\n   * @type {string}\n   * @attr\n   */\n  @property({ reflect: true, attribute: 'aria-label' })\n  ariaLabel = '';\n\n  /**\n   * This property is used to generate the name of the first button\n   * @type {string}\n   * @attr\n   */\n  @property()\n  firstLabel: string = 'First';\n\n  /**\n   * This property is used to generate the name of the previous button\n   * @type {string}\n   * @attr\n   */\n  @property()\n  previousLabel: string = 'Previous';\n\n  /**\n   * This property is used to generate the name of the next button\n   * @type {string}\n   * @attr\n   */\n  @property()\n  nextLabel: string = 'Next';\n  /**\n   * This property is used to generate the name of the last button\n   * @type {string}\n   * @attr\n   */\n  @property()\n  lastLabel: string = 'Last';\n\n  private _total = 100;\n\n  /**\n   * Set the amount of pages to navigate.\n   * @type {number}\n   * @attr\n   * @default: 1\n   */\n  @property({ type: Number })\n  get total() {\n    return this._total;\n  }\n  set total(newValue: number) {\n    this._total = newValue;\n    this._visiblePages = this._generateVisiblePages(this._current);\n    this.requestUpdate('total', newValue);\n  }\n\n  @state()\n  private _range = 0;\n\n  @state()\n  private _visiblePages: number[] = [];\n\n  private _current = 1;\n\n  /**\n   * Define the current active page.\n   * @type {number}\n   * @attr\n   */\n  @property({ type: Number })\n  get current() {\n    return this._current;\n  }\n  set current(newValue: number) {\n    const oldValue = this._current;\n    this._current = limit(newValue, 1, this.total);\n    this._visiblePages = this._generateVisiblePages(this._current);\n    this.requestUpdate('current', oldValue);\n  }\n\n  /**\n   * This method will change the page to a next one.\n   * @memberof UUIPaginationElement\n   */\n  goToNextPage() {\n    this.current++;\n    this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n  }\n\n  /**\n   * Change the page to a previous one.\n   * @memberof UUIPaginationElement\n   */\n  goToPreviousPage() {\n    this.current--;\n    this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n  }\n\n  /**\n   * Change the page to the one passed as an argument to this method.\n   * @param {number} page\n   * @memberof UUIPaginationElement\n   */\n  goToPage(page: number) {\n    this.current = page;\n    this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n  }\n\n  /** When having limited display of page-buttons and clicking a page-button that changes the current range, the focus stays on the position of the clicked button which is not anymore representing the number clicked, therefore we move focus to the button that represents the current page. */\n  protected focusActivePage() {\n    requestAnimationFrame(() => {\n      // for none range changing clicks we need to ensure a rendering before querying.\n      const activeButtonElement =\n        this.renderRoot.querySelector<HTMLElement>('.active');\n      if (activeButtonElement) {\n        activeButtonElement.focus();\n      }\n    });\n  }\n\n  protected renderFirst() {\n    return html`<uui-button\n      compact\n      class=\"nav\"\n      label=${this.firstLabel}\n      ?disabled=${this._current === 1}\n      @click=${() => this.goToPage(1)}></uui-button>`;\n  }\n\n  protected renderPrevious() {\n    return html`<uui-button\n      compact\n      class=\"nav\"\n      label=${this.previousLabel}\n      ?disabled=${this._current === 1}\n      @click=${this.goToPreviousPage}></uui-button>`;\n  }\n\n  protected renderNext() {\n    return html`<uui-button\n      compact\n      class=\"nav\"\n      label=${this.nextLabel}\n      ?disabled=${this._current === this.total}\n      @click=${this.goToNextPage}></uui-button>`;\n  }\n\n  protected renderLast() {\n    return html`\n      <uui-button\n        compact\n        class=\"nav\"\n        label=${this.lastLabel}\n        ?disabled=${this.total === this._current}\n        @click=${() => this.goToPage(this.total)}></uui-button>\n    `;\n  }\n\n  protected renderDots() {\n    return html`<uui-button\n      compact\n      look=\"outline\"\n      role=\"listitem\"\n      tabindex=\"-1\"\n      class=\"dots\"\n      label=\"More pages\"\n      >...</uui-button\n    >`;\n  }\n\n  protected renderPage(page: number) {\n    return html`<uui-button\n      compact\n      look=\"outline\"\n      role=\"listitem\"\n      label=\"Go to page ${page}\"\n      class=${'page' + (page === this._current ? ' active' : '')}\n      tabindex=${page === this._current ? '-1' : ''}\n      @click=${() => {\n        if (page === this._current) return;\n        this.goToPage(page);\n        this.focusActivePage();\n      }}>\n      ${page}\n    </uui-button>`;\n  }\n\n  protected renderLeftDots() {\n    return html` ${this._visiblePages.includes(1) ? '' : this.renderDots()}`;\n  }\n  protected renderRightDots() {\n    return html`${this._visiblePages.includes(this.total)\n      ? ''\n      : this.renderDots()}`;\n  }\n\n  protected renderNavigationLeft() {\n    return html` ${this.renderFirst()} ${this.renderPrevious()}`;\n  }\n  protected renderNavigationRight() {\n    return html` ${this.renderNext()} ${this.renderLast()}`;\n  }\n\n  render() {\n    // prettier-ignore\n    return html`\n      ${this.renderNavigationLeft()}\n      <uui-button-group role=\"list\" id=\"pages\">\n        ${this.renderLeftDots()}\n        ${this._visiblePages.map(\n          page =>\n            this.renderPage(page)\n        )}\n        ${this.renderRightDots()}\n      </uui-button-group>\n      ${this.renderNavigationRight()}\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n        width: 100%;\n        gap: 1px;\n      }\n      uui-button-group {\n        flex-grow: 1;\n        justify-content: center;\n      }\n\n      uui-button-group uui-button {\n        --uui-button-border-color: var(--uui-color-border-standalone);\n        --uui-button-border-color-hover: var(--uui-color-interactive-emphasis);\n        --uui-button-border-color-disabled: var(--uui-color-border-standalone);\n      }\n\n      uui-button-group uui-button:hover {\n        z-index: 1;\n      }\n\n      .page {\n        min-width: 36px;\n        max-width: 72px;\n      }\n      .page.active {\n        z-index: 1;\n      }\n\n      .nav {\n        min-width: 72px;\n      }\n\n      .dots {\n        pointer-events: none;\n        min-width: 36px;\n        max-width: 72px;\n      }\n\n      .active {\n        pointer-events: none;\n        --uui-button-font-weight: 700;\n        --uui-button-contrast: var(--uui-color-selected);\n        --uui-button-border-color: var(--uui-color-selected);\n        --uui-button-border-width: 2px;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAUA,MAAM,wBAAwB;AAE9B,MAAM,QAAQ,CAAC,KAAa,KAAa,QAAgB;AACvD,SAAO,KAAK,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG,GAAG;AACzC;AAEA,MAAM,iBAAiB,CAAC,OAAe,SAAiB;AACtD,SAAO,MAAM,KAAK,EAAE,QAAQ,OAAO,QAAQ,EAAA,GAAK,CAAC,GAAG,MAAM,QAAQ,CAAC;AACrE;AAOO,MAAM,wBAAN,MAAM,8BAA6B,WAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AACL,SAAiB,YAAY,IAAI;AAAA,MAC/B,KAAK,gBAAgB,KAAK,IAAI;AAAA,IAAA;AA4FhC,SAAA,QAAQ;AAQR,SAAA,YAAY;AAQZ,SAAA,aAAqB;AAQrB,SAAA,gBAAwB;AAQxB,SAAA,YAAoB;AAOpB,SAAA,YAAoB;AAEpB,SAAQ,SAAS;AAmBjB,SAAQ,SAAS;AAGjB,SAAQ,gBAA0B,CAAA;AAElC,SAAQ,WAAW;AAAA,EAAA;AAAA,EA1JnB,oBAAoB;AAClB,UAAM,kBAAA;AACN,QAAI,CAAC,KAAK,aAAa,MAAM,EAAG,MAAK,aAAa,QAAQ,YAAY;AACtE,SAAK,gBAAgB,KAAK,sBAAsB,KAAK,OAAO;AAAA,EAC9D;AAAA,EAEA,uBAAuB;AACrB,SAAK,UAAU,WAAA;AAAA,EACjB;AAAA,EAEA,eAAe;AACb,SAAK,UAAU,QAAQ,KAAK,WAAW;AAEvC,SAAK,YAAA;AACL,SAAK,gBAAA;AAAA,EACP;AAAA,EAEA,WAAW,mBAA2D;AACpE,QAAI,kBAAkB,IAAI,SAAS,KAAK,kBAAkB,IAAI,OAAO,GAAG;AACtE,WAAK,YAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEU,cAAc;AACtB,SAAK,YAAY,GAAG,KAAK,SAAS,uBAAuB,mBACvD,KAAK,OACP;AAAA,EACF;AAAA,EAEQ,kBAAkB;AACxB,UAAM,iBAAiB,KAAK;AAG5B,UAAM,kBAAkB,MAAM,KAAK,KAAK,WAAW,EAAE;AAAA,MACnD,CAAC,YAAY,WAAW;AACtB,eAAO,aAAa,OAAO,sBAAA,EAAwB;AAAA,MACrD;AAAA,MACA;AAAA,IAAA;AAIF,UAAM,iBAAiB,iBAAiB;AAIxC,UAAM,QAAQ,iBAAiB,wBAAwB;AACvD,SAAK,SAAS,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,CAAC;AAC3C,SAAK,gBAAgB,KAAK,sBAAsB,KAAK,OAAO;AAAA,EAC9D;AAAA,EAEQ,sBAAsB,SAAiB;AAC7C,QAAI;AACJ,QAAI,UAAU,KAAK,QAAQ;AACzB,cAAQ;AAAA,IACV,WAAW,UAAU,KAAK,QAAQ,KAAK,QAAQ;AAC7C,cAAQ,UAAU,KAAK;AAAA,IACzB,OAAO;AACL,cAAQ,KAAK,QAAQ,KAAK,SAAS;AAAA,IACrC;AAEA,QAAI;AACJ,QAAI,WAAW,KAAK,QAAQ;AAC1B,aAAO,KAAK,SAAS,IAAI;AAAA,IAC3B,WAAW,UAAU,KAAK,QAAQ,KAAK,QAAQ;AAC7C,aAAO,UAAU,KAAK;AAAA,IACxB,OAAO;AACL,aAAO,KAAK;AAAA,IACd;AAEA,UAAM,QAAQ;AAAA,MACZ,MAAM,OAAO,GAAG,KAAK,KAAK;AAAA,MAC1B,MAAM,MAAM,GAAG,KAAK,KAAK;AAAA,IAAA;AAG3B,WAAO;AAAA,EACT;AAAA,EAgEA,IAAI,QAAQ;AACV,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,MAAM,UAAkB;AAC1B,SAAK,SAAS;AACd,SAAK,gBAAgB,KAAK,sBAAsB,KAAK,QAAQ;AAC7D,SAAK,cAAc,SAAS,QAAQ;AAAA,EACtC;AAAA,EAgBA,IAAI,UAAU;AACZ,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,QAAQ,UAAkB;AAC5B,UAAM,WAAW,KAAK;AACtB,SAAK,WAAW,MAAM,UAAU,GAAG,KAAK,KAAK;AAC7C,SAAK,gBAAgB,KAAK,sBAAsB,KAAK,QAAQ;AAC7D,SAAK,cAAc,WAAW,QAAQ;AAAA,EACxC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,eAAe;AACb,SAAK;AACL,SAAK,cAAc,IAAI,mBAAmB,mBAAmB,MAAM,CAAC;AAAA,EACtE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,mBAAmB;AACjB,SAAK;AACL,SAAK,cAAc,IAAI,mBAAmB,mBAAmB,MAAM,CAAC;AAAA,EACtE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,SAAS,MAAc;AACrB,SAAK,UAAU;AACf,SAAK,cAAc,IAAI,mBAAmB,mBAAmB,MAAM,CAAC;AAAA,EACtE;AAAA;AAAA,EAGU,kBAAkB;AAC1B,0BAAsB,MAAM;AAE1B,YAAM,sBACJ,KAAK,WAAW,cAA2B,SAAS;AACtD,UAAI,qBAAqB;AACvB,4BAAoB,MAAA;AAAA,MACtB;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEU,cAAc;AACtB,WAAO;AAAA;AAAA;AAAA,cAGG,KAAK,UAAU;AAAA,kBACX,KAAK,aAAa,CAAC;AAAA,eACtB,MAAM,KAAK,SAAS,CAAC,CAAC;AAAA,EACnC;AAAA,EAEU,iBAAiB;AACzB,WAAO;AAAA;AAAA;AAAA,cAGG,KAAK,aAAa;AAAA,kBACd,KAAK,aAAa,CAAC;AAAA,eACtB,KAAK,gBAAgB;AAAA,EAClC;AAAA,EAEU,aAAa;AACrB,WAAO;AAAA;AAAA;AAAA,cAGG,KAAK,SAAS;AAAA,kBACV,KAAK,aAAa,KAAK,KAAK;AAAA,eAC/B,KAAK,YAAY;AAAA,EAC9B;AAAA,EAEU,aAAa;AACrB,WAAO;AAAA;AAAA;AAAA;AAAA,gBAIK,KAAK,SAAS;AAAA,oBACV,KAAK,UAAU,KAAK,QAAQ;AAAA,iBAC/B,MAAM,KAAK,SAAS,KAAK,KAAK,CAAC;AAAA;AAAA,EAE9C;AAAA,EAEU,aAAa;AACrB,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAST;AAAA,EAEU,WAAW,MAAc;AACjC,WAAO;AAAA;AAAA;AAAA;AAAA,0BAIe,IAAI;AAAA,cAChB,UAAU,SAAS,KAAK,WAAW,YAAY,GAAG;AAAA,iBAC/C,SAAS,KAAK,WAAW,OAAO,EAAE;AAAA,eACpC,MAAM;AACb,UAAI,SAAS,KAAK,SAAU;AAC5B,WAAK,SAAS,IAAI;AAClB,WAAK,gBAAA;AAAA,IACP,CAAC;AAAA,QACC,IAAI;AAAA;AAAA,EAEV;AAAA,EAEU,iBAAiB;AACzB,WAAO,QAAQ,KAAK,cAAc,SAAS,CAAC,IAAI,KAAK,KAAK,WAAA,CAAY;AAAA,EACxE;AAAA,EACU,kBAAkB;AAC1B,WAAO,OAAO,KAAK,cAAc,SAAS,KAAK,KAAK,IAChD,KACA,KAAK,WAAA,CAAY;AAAA,EACvB;AAAA,EAEU,uBAAuB;AAC/B,WAAO,QAAQ,KAAK,YAAA,CAAa,IAAI,KAAK,gBAAgB;AAAA,EAC5D;AAAA,EACU,wBAAwB;AAChC,WAAO,QAAQ,KAAK,WAAA,CAAY,IAAI,KAAK,YAAY;AAAA,EACvD;AAAA,EAEA,SAAS;AAEP,WAAO;AAAA,QACH,KAAK,sBAAsB;AAAA;AAAA,UAEzB,KAAK,gBAAgB;AAAA,UACrB,KAAK,cAAc;AAAA,MACnB,CAAA,SACE,KAAK,WAAW,IAAI;AAAA,IAAA,CACvB;AAAA,UACC,KAAK,iBAAiB;AAAA;AAAA,QAExB,KAAK,uBAAuB;AAAA;AAAA,EAElC;AAmDF;AAjDE,sBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA7TG,IAAM,uBAAN;AAmFY,gBAAA;AAAA,EADhB,SAAS,gBAAgB;AAAA,GAlFf,qBAmFM,WAAA,eAAA,CAAA;AAGA,gBAAA;AAAA,EADhB,MAAM,QAAQ;AAAA,GArFJ,qBAsFM,WAAA,eAAA,CAAA;AAQjB,gBAAA;AAAA,EADC,SAAA;AAAS,GA7FC,qBA8FX,WAAA,SAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,MAAM,WAAW,cAAc;AAAA,GArGzC,qBAsGX,WAAA,aAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAA;AAAS,GA7GC,qBA8GX,WAAA,cAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAA;AAAS,GArHC,qBAsHX,WAAA,iBAAA,CAAA;AAQA,gBAAA;AAAA,EADC,SAAA;AAAS,GA7HC,qBA8HX,WAAA,aAAA,CAAA;AAOA,gBAAA;AAAA,EADC,SAAA;AAAS,GApIC,qBAqIX,WAAA,aAAA,CAAA;AAWI,gBAAA;AAAA,EADH,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/If,qBAgJP,WAAA,SAAA,CAAA;AAUI,gBAAA;AAAA,EADP,MAAA;AAAM,GAzJI,qBA0JH,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADP,MAAA;AAAM,GA5JI,qBA6JH,WAAA,iBAAA,CAAA;AAUJ,gBAAA;AAAA,EADH,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtKf,qBAuKP,WAAA,WAAA,CAAA;"}
+{"version":3,"file":"pagination.element.js","names":[],"sources":["../../../src/components/pagination/pagination.element.ts"],"sourcesContent":["import type { UUIButtonElement } from '../button/button.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, queryAll, state } from 'lit/decorators.js';\n\nimport { UUIPaginationEvent } from './UUIPaginationEvent.js';\n\nimport '../button/button.js';\nimport '../button-group/button-group.js';\n\n//this is how wide the button gets when it has 3 digits inside.\nconst PAGE_BUTTON_MAX_WIDTH = 45;\n\nconst limit = (val: number, min: number, max: number) => {\n  return Math.min(Math.max(val, min), max);\n};\n\nconst arrayOfNumbers = (start: number, stop: number) => {\n  return Array.from({ length: stop - start + 1 }, (_, i) => start + i);\n};\n\n/**\n * @element uui-pagination\n * @description Jump to a certain page and navigate to the next, last, previous or first page. The amount of visible page-buttons are adjusted to the available space.\n * @fires change - When clicked on the page button fires change event\n */\nexport class UUIPaginationElement extends LitElement {\n  private readonly _observer = new ResizeObserver(\n    this._calculateRange.bind(this),\n  );\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) this.setAttribute('role', 'navigation');\n    this._visiblePages = this._generateVisiblePages(this.current);\n  }\n\n  disconnectedCallback() {\n    this._observer.disconnect();\n  }\n\n  firstUpdated() {\n    this._observer.observe(this._pagesGroup);\n\n    this.updateLabel();\n    this._calculateRange();\n  }\n\n  willUpdate(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('current') || changedProperties.has('label')) {\n      this.updateLabel();\n    }\n  }\n\n  protected updateLabel() {\n    this.ariaLabel = `${this.label || 'Pagination navigation'}. Current page: ${\n      this.current\n    }.`;\n  }\n\n  private _calculateRange() {\n    const containerWidth = this.offsetWidth;\n\n    // get all the buttons with .nav-button class and sum up their widths\n    const navButtonsWidth = Array.from(this._navButtons).reduce(\n      (totalWidth, button) => {\n        return totalWidth + button.getBoundingClientRect().width;\n      },\n      0,\n    );\n\n    // subtract width of nav-buttons from the pagination container\n    const rangeBaseWidth = containerWidth - navButtonsWidth;\n\n    // divide remaining width by max-width of page button (when it has 3 digits), then divide by 2 to get the range.\n    // Range is number of buttons visible on either \"side\" of current pag button. So, if range === 5 we shall see 11 buttons in total - 5 before the current page and 5 after. This is why we divide by 2.\n    const range = rangeBaseWidth / PAGE_BUTTON_MAX_WIDTH / 2;\n    this._range = Math.max(0, Math.floor(range));\n    this._visiblePages = this._generateVisiblePages(this.current);\n  }\n\n  private _generateVisiblePages(current: number) {\n    let start: number;\n    if (current < this._range) {\n      start = 1;\n    } else if (current < this.total - this._range) {\n      start = current - this._range;\n    } else {\n      start = this.total - this._range * 2;\n    }\n\n    let stop: number;\n    if (current <= this._range) {\n      stop = this._range * 2 + 1;\n    } else if (current < this.total - this._range) {\n      stop = current + this._range;\n    } else {\n      stop = this.total;\n    }\n\n    const pages = arrayOfNumbers(\n      limit(start, 1, this.total),\n      limit(stop, 1, this.total),\n    );\n\n    return pages;\n  }\n\n  @queryAll('uui-button.nav')\n  private readonly _navButtons!: Array<UUIButtonElement>;\n\n  @query('#pages')\n  private readonly _pagesGroup!: any;\n\n  /**\n   * This property is used to generate a proper `aria-label`. It will be announced by screen reader as: \"<<this.label>>. Current page: <<this.current>>\"\n   * @type {string}\n   * @attr\n   */\n  @property()\n  label = '';\n\n  /**\n   * With this property you can overwrite aria-label.\n   * @type {string}\n   * @attr\n   */\n  @property({ reflect: true, attribute: 'aria-label' })\n  ariaLabel = '';\n\n  /**\n   * This property is used to generate the name of the first button\n   * @type {string}\n   * @attr\n   */\n  @property()\n  firstLabel: string = 'First';\n\n  /**\n   * This property is used to generate the name of the previous button\n   * @type {string}\n   * @attr\n   */\n  @property()\n  previousLabel: string = 'Previous';\n\n  /**\n   * This property is used to generate the name of the next button\n   * @type {string}\n   * @attr\n   */\n  @property()\n  nextLabel: string = 'Next';\n  /**\n   * This property is used to generate the name of the last button\n   * @type {string}\n   * @attr\n   */\n  @property()\n  lastLabel: string = 'Last';\n\n  private _total = 100;\n\n  /**\n   * Set the amount of pages to navigate.\n   * @type {number}\n   * @attr\n   * @default: 1\n   */\n  @property({ type: Number })\n  get total() {\n    return this._total;\n  }\n  set total(newValue: number) {\n    this._total = newValue;\n    this._visiblePages = this._generateVisiblePages(this._current);\n    this.requestUpdate('total', newValue);\n  }\n\n  @state()\n  private _range = 0;\n\n  @state()\n  private _visiblePages: number[] = [];\n\n  private _current = 1;\n\n  /**\n   * Define the current active page.\n   * @type {number}\n   * @attr\n   */\n  @property({ type: Number })\n  get current() {\n    return this._current;\n  }\n  set current(newValue: number) {\n    const oldValue = this._current;\n    this._current = limit(newValue, 1, this.total);\n    this._visiblePages = this._generateVisiblePages(this._current);\n    this.requestUpdate('current', oldValue);\n  }\n\n  /**\n   * This method will change the page to a next one.\n   * @memberof UUIPaginationElement\n   */\n  goToNextPage() {\n    this.current++;\n    this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n  }\n\n  /**\n   * Change the page to a previous one.\n   * @memberof UUIPaginationElement\n   */\n  goToPreviousPage() {\n    this.current--;\n    this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n  }\n\n  /**\n   * Change the page to the one passed as an argument to this method.\n   * @param {number} page\n   * @memberof UUIPaginationElement\n   */\n  goToPage(page: number) {\n    this.current = page;\n    this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n  }\n\n  /** When having limited display of page-buttons and clicking a page-button that changes the current range, the focus stays on the position of the clicked button which is not anymore representing the number clicked, therefore we move focus to the button that represents the current page. */\n  protected focusActivePage() {\n    requestAnimationFrame(() => {\n      // for none range changing clicks we need to ensure a rendering before querying.\n      const activeButtonElement =\n        this.renderRoot.querySelector<HTMLElement>('.active');\n      if (activeButtonElement) {\n        activeButtonElement.focus();\n      }\n    });\n  }\n\n  protected renderFirst() {\n    return html`<uui-button\n      compact\n      class=\"nav\"\n      label=${this.firstLabel}\n      ?disabled=${this._current === 1}\n      @click=${() => this.goToPage(1)}></uui-button>`;\n  }\n\n  protected renderPrevious() {\n    return html`<uui-button\n      compact\n      class=\"nav\"\n      label=${this.previousLabel}\n      ?disabled=${this._current === 1}\n      @click=${this.goToPreviousPage}></uui-button>`;\n  }\n\n  protected renderNext() {\n    return html`<uui-button\n      compact\n      class=\"nav\"\n      label=${this.nextLabel}\n      ?disabled=${this._current === this.total}\n      @click=${this.goToNextPage}></uui-button>`;\n  }\n\n  protected renderLast() {\n    return html`\n      <uui-button\n        compact\n        class=\"nav\"\n        label=${this.lastLabel}\n        ?disabled=${this.total === this._current}\n        @click=${() => this.goToPage(this.total)}></uui-button>\n    `;\n  }\n\n  protected renderDots() {\n    return html`<uui-button\n      compact\n      look=\"outline\"\n      role=\"listitem\"\n      tabindex=\"-1\"\n      class=\"dots\"\n      label=\"More pages\"\n      >...</uui-button\n    >`;\n  }\n\n  protected renderPage(page: number) {\n    return html`<uui-button\n      compact\n      look=\"outline\"\n      role=\"listitem\"\n      label=\"Go to page ${page}\"\n      class=${'page' + (page === this._current ? ' active' : '')}\n      tabindex=${page === this._current ? '-1' : ''}\n      @click=${() => {\n        if (page === this._current) return;\n        this.goToPage(page);\n        this.focusActivePage();\n      }}>\n      ${page}\n    </uui-button>`;\n  }\n\n  protected renderLeftDots() {\n    return html` ${this._visiblePages.includes(1) ? '' : this.renderDots()}`;\n  }\n  protected renderRightDots() {\n    return html`${this._visiblePages.includes(this.total)\n      ? ''\n      : this.renderDots()}`;\n  }\n\n  protected renderNavigationLeft() {\n    return html` ${this.renderFirst()} ${this.renderPrevious()}`;\n  }\n  protected renderNavigationRight() {\n    return html` ${this.renderNext()} ${this.renderLast()}`;\n  }\n\n  render() {\n    // prettier-ignore\n    return html`\n      ${this.renderNavigationLeft()}\n      <uui-button-group role=\"list\" id=\"pages\">\n        ${this.renderLeftDots()}\n        ${this._visiblePages.map(\n          page =>\n            this.renderPage(page)\n        )}\n        ${this.renderRightDots()}\n      </uui-button-group>\n      ${this.renderNavigationRight()}\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n        width: 100%;\n        gap: 1px;\n      }\n      uui-button-group {\n        flex-grow: 1;\n        justify-content: center;\n      }\n\n      uui-button-group uui-button {\n        --uui-button-border-color: var(--uui-color-border-standalone);\n        --uui-button-border-color-hover: var(--uui-color-interactive-emphasis);\n        --uui-button-border-color-disabled: var(--uui-color-border-standalone);\n      }\n\n      uui-button-group uui-button:hover {\n        z-index: 1;\n      }\n\n      .page {\n        min-width: 36px;\n        max-width: 72px;\n      }\n      .page.active {\n        z-index: 1;\n      }\n\n      .nav {\n        min-width: 72px;\n      }\n\n      .dots {\n        pointer-events: none;\n        min-width: 36px;\n        max-width: 72px;\n      }\n\n      .active {\n        pointer-events: none;\n        --uui-button-font-weight: 700;\n        --uui-button-contrast: var(--uui-color-selected);\n        --uui-button-border-color: var(--uui-color-selected);\n        --uui-button-border-width: 2px;\n      }\n    `,\n  ];\n}\n"],"mappings":"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"}

package/dist/components/pagination/pagination.js

@@ -1,10 +1,9 @@
 import { defineElement } from "../../internal/registration/index.js";
-import { UUIPaginationElement } from "./pagination.element.js";
 import { UUIPaginationEvent } from "./UUIPaginationEvent.js";
+import { UUIPaginationElement } from "./pagination.element.js";
+//#region src/components/pagination/pagination.ts
 defineElement("uui-pagination", UUIPaginationElement);
-export {
-  UUIPaginationElement,
-  UUIPaginationEvent,
-  UUIPaginationElement as default
-};
-//# sourceMappingURL=pagination.js.map
+//#endregion
+export { UUIPaginationElement, UUIPaginationEvent };
+
+//# sourceMappingURL=pagination.js.map

package/dist/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../src/components/pagination/pagination.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIPaginationElement } from './pagination.element.js';\n\ndefineElement('uui-pagination', UUIPaginationElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-pagination': UUIPaginationElement;\n  }\n}\n\nexport * from './pagination.element.js';\nexport * from './UUIPaginationEvent.js';\nexport { UUIPaginationElement as default } from './pagination.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,kBAAkB,oBAAoB;"}
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/pagination/pagination.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIPaginationElement } from './pagination.element.js';\n\ndefineElement('uui-pagination', UUIPaginationElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-pagination': UUIPaginationElement;\n  }\n}\n\nexport * from './pagination.element.js';\nexport * from './UUIPaginationEvent.js';\n"],"mappings":";;;;AAGA,cAAc,kBAAkB,oBAAoB"}

package/dist/components/popover-container/popover-container.d.ts

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './popover-container.element.js';
-export { UUIPopoverContainerElement as default } from './popover-container.element.js';

package/dist/components/popover-container/popover-container.element.d.ts

@@ -29,6 +29,7 @@ export declare class UUIPopoverContainerElement extends LitElement {
      */
     get placement(): PopoverContainerPlacement;
     set placement(newValue: PopoverContainerPlacement);
+    noScroll: boolean;
     _placement: PopoverContainerPlacement;
     _open: boolean;
     _actualPlacement: PopoverContainerPlacement;