@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.0

package/dist/components/pagination/pagination.element.d.ts

@@ -0,0 +1,103 @@
+import { LitElement } from 'lit';
+import '../button/button.js';
+import '../button-group/button-group.js';
+/**
+ * @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
+ */
+export declare class UUIPaginationElement extends LitElement {
+    private readonly _observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    protected updateLabel(): void;
+    private _calculateRange;
+    private _generateVisiblePages;
+    private readonly _navButtons;
+    private readonly _pagesGroup;
+    /**
+     * This property is used to generate a proper `aria-label`. It will be announced by screen reader as: "<<this.label>>. Current page: <<this.current>>"
+     * @type {string}
+     * @attr
+     */
+    label: string;
+    /**
+     * With this property you can overwrite aria-label.
+     * @type {string}
+     * @attr
+     */
+    ariaLabel: string;
+    /**
+     * This property is used to generate the name of the first button
+     * @type {string}
+     * @attr
+     */
+    firstLabel: string;
+    /**
+     * This property is used to generate the name of the previous button
+     * @type {string}
+     * @attr
+     */
+    previousLabel: string;
+    /**
+     * This property is used to generate the name of the next button
+     * @type {string}
+     * @attr
+     */
+    nextLabel: string;
+    /**
+     * This property is used to generate the name of the last button
+     * @type {string}
+     * @attr
+     */
+    lastLabel: string;
+    private _total;
+    /**
+     * Set the amount of pages to navigate.
+     * @type {number}
+     * @attr
+     * @default: 1
+     */
+    get total(): number;
+    set total(newValue: number);
+    private _range;
+    private _visiblePages;
+    private _current;
+    /**
+     * Define the current active page.
+     * @type {number}
+     * @attr
+     */
+    get current(): number;
+    set current(newValue: number);
+    /**
+     * This method will change the page to a next one.
+     * @memberof UUIPaginationElement
+     */
+    goToNextPage(): void;
+    /**
+     * Change the page to a previous one.
+     * @memberof UUIPaginationElement
+     */
+    goToPreviousPage(): void;
+    /**
+     * Change the page to the one passed as an argument to this method.
+     * @param {number} page
+     * @memberof UUIPaginationElement
+     */
+    goToPage(page: number): void;
+    /** 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. */
+    protected focusActivePage(): void;
+    protected renderFirst(): import("lit-html").TemplateResult<1>;
+    protected renderPrevious(): import("lit-html").TemplateResult<1>;
+    protected renderNext(): import("lit-html").TemplateResult<1>;
+    protected renderLast(): import("lit-html").TemplateResult<1>;
+    protected renderDots(): import("lit-html").TemplateResult<1>;
+    protected renderPage(page: number): import("lit-html").TemplateResult<1>;
+    protected renderNavigationLeft(): import("lit-html").TemplateResult<1>;
+    protected renderNavigationRight(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,317 @@
+import { LitElement, html, css } from "lit";
+import { queryAll, query, property, state } from "lit/decorators.js";
+import { UUIPaginationEvent } from "./UUIPaginationEvent.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);
+};
+const 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(1, 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
+      compact
+      look="outline"
+      class="nav"
+      role="listitem"
+      label=${this.firstLabel}
+      ?disabled=${this._current === 1}
+      @click=${() => this.goToPage(1)}></uui-button>`;
+  }
+  renderPrevious() {
+    return html`<uui-button
+      compact
+      look="outline"
+      class="nav"
+      role="listitem"
+      label=${this.previousLabel}
+      ?disabled=${this._current === 1}
+      @click=${this.goToPreviousPage}></uui-button>`;
+  }
+  renderNext() {
+    return html`<uui-button
+      compact
+      look="outline"
+      role="listitem"
+      class="nav"
+      label=${this.nextLabel}
+      ?disabled=${this._current === this.total}
+      @click=${this.goToNextPage}></uui-button>`;
+  }
+  renderLast() {
+    return html`
+      <uui-button
+        compact
+        look="outline"
+        role="listitem"
+        class="nav"
+        label=${this.lastLabel}
+        ?disabled=${this.total === this._current}
+        @click=${() => this.goToPage(this.total)}></uui-button>
+    `;
+  }
+  renderDots() {
+    return html`<uui-button
+      compact
+      look="outline"
+      role="listitem"
+      tabindex="-1"
+      class="dots"
+      label="More pages"
+      >...</uui-button
+    > `;
+  }
+  renderPage(page) {
+    return html`<uui-button
+      compact
+      look="outline"
+      role="listitem"
+      label="Go to page ${page}"
+      class=${"page" + (page === this._current ? " active" : "")}
+      tabindex=${page === this._current ? "-1" : ""}
+      @click=${() => {
+      if (page === this._current) return;
+      this.goToPage(page);
+      this.focusActivePage();
+    }}>
+      ${page}
+    </uui-button>`;
+  }
+  renderNavigationLeft() {
+    return html` ${this.renderFirst()} ${this.renderPrevious()}
+    ${this._visiblePages.includes(1) ? "" : this.renderDots()}`;
+  }
+  renderNavigationRight() {
+    return html`${this._visiblePages.includes(this.total) ? "" : this.renderDots()}
+    ${this.renderNext()} ${this.renderLast()}`;
+  }
+  render() {
+    return html`<uui-button-group role="list" id="pages">
+      ${this.renderNavigationLeft()}
+      ${this._visiblePages.map(
+      (page) => this.renderPage(page)
+    )}
+      ${this.renderNavigationRight()}
+    </uui-button-group>
+    `;
+  }
+};
+_UUIPaginationElement.styles = [
+  css`
+      uui-button-group {
+        width: 100%;
+      }
+
+      uui-button {
+        --uui-button-border-color: var(--uui-color-border-standalone);
+        --uui-button-border-color-hover: var(--uui-color-interactive-emphasis);
+        --uui-button-border-color-disabled: var(--uui-color-border-standalone);
+      }
+
+      uui-button:hover {
+        z-index: 1;
+      }
+
+      .page {
+        min-width: 36px;
+        max-width: 72px;
+      }
+      .page.active {
+        z-index: 1;
+      }
+
+      .nav {
+        min-width: 72px;
+      }
+
+      .dots {
+        pointer-events: none;
+      }
+
+      .active {
+        pointer-events: none;
+        --uui-button-font-weight: 700;
+        --uui-button-contrast: var(--uui-color-selected);
+        --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

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

@@ -0,0 +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(1, 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      look=\"outline\"\n      class=\"nav\"\n      role=\"listitem\"\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      look=\"outline\"\n      class=\"nav\"\n      role=\"listitem\"\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      look=\"outline\"\n      role=\"listitem\"\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        look=\"outline\"\n        role=\"listitem\"\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 renderNavigationLeft() {\n    return html` ${this.renderFirst()} ${this.renderPrevious()}\n    ${this._visiblePages.includes(1) ? '' : this.renderDots()}`;\n  }\n\n  protected renderNavigationRight() {\n    return html`${this._visiblePages.includes(this.total)\n      ? ''\n      : this.renderDots()}\n    ${this.renderNext()} ${this.renderLast()}`;\n  }\n\n  render() {\n    // prettier-ignore\n    return html`<uui-button-group role=\"list\" id=\"pages\">\n      ${this.renderNavigationLeft()}\n      ${this._visiblePages.map(\n      page =>\n        this.renderPage(page)\n    )}\n      ${this.renderNavigationRight()}\n    </uui-button-group>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      uui-button-group {\n        width: 100%;\n      }\n\n      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: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      }\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":"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"}

package/dist/components/pagination/pagination.js

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

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+import '../button/button.js';
+import './popover-container.js';
+/**
+ * @element uui-popover-container-shadowdomtester
+ */
+export declare class UUIPopoverContainerShadowDomTesterElement extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1,8 @@
+import { UUIPopoverContainerElement } from './popover-container.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-popover-container': UUIPopoverContainerElement;
+    }
+}
+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

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+export type PopoverContainerPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+/**
+ * @element uui-popover-container
+ * @attr popover - Indicates that the element is a popover container
+ */
+export declare class UUIPopoverContainerElement extends LitElement {
+    #private;
+    /**
+     * Set the distance between popover container element and target element.
+     * @type {number}
+     * @attr margin
+     * @default 0
+     */
+    margin: number;
+    /**
+     * Read-only attribute to check if the popover is open
+     * @type {boolean}
+     * @readonly
+     * @attr open
+     * @default false
+     */
+    get open(): boolean;
+    /**
+     * Define the placement of the popover container.
+     * @attr placement
+     * @default 'bottom-start'
+     */
+    get placement(): PopoverContainerPlacement;
+    set placement(newValue: PopoverContainerPlacement);
+    _placement: PopoverContainerPlacement;
+    _open: boolean;
+    _actualPlacement: PopoverContainerPlacement;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * @internal
+     */
+    _getScrollParents(): Element[];
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}