@telia-ace/alliance-ui 1.0.15 → 1.0.16-next.1

package/components/{chunk-LYU2K33W.js → chunk-CZPHL6EU.js}

@@ -1,5 +1,5 @@
-import { spacing, borders, colors, motion, focus, breakpoints } from './chunk-B6YHD7BN.js';
-import { __name, define } from './chunk-NB6ODBZJ.js';
+import { spacing, borders, colors, motion, focus, breakpoints } from './chunk-5A2VXG2P.js';
+import { __decorateClass, define } from './chunk-AW7BCYX5.js';
 import { LitElement, css, unsafeCSS, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -8,28 +8,21 @@ import { chevronLeft, chevronRight } from '@teliads/components/icons';
 
 // src/components/alliance-paginator/utils.ts
 var DOTS = "...";
-var range = /* @__PURE__ */ __name((start, end) => {
+var range = (start, end) => {
   const length = end - start + 1;
-  return Array.from({
-    length
-  }, (_, idx) => idx + start);
-}, "range");
+  return Array.from({ length }, (_, idx) => idx + start);
+};
 function getLastPage(pages) {
   return pages[pages.length - 1];
 }
-__name(getLastPage, "getLastPage");
 function listPages(lastPage) {
-  return Array.from({
-    length: lastPage
-  }, (_, i) => {
+  return Array.from({ length: lastPage }, (_, i) => {
     return pageToSelectValue(i + 1, lastPage);
   });
 }
-__name(listPages, "listPages");
 function pageToSelectValue(page, lastPage) {
   return `${page} / ${lastPage}`;
 }
-__name(pageToSelectValue, "pageToSelectValue");
 function selectValueToPage(selectValue) {
   const value = selectValue.split("/")[0];
   if (typeof value !== "string") {
@@ -37,7 +30,6 @@ function selectValueToPage(selectValue) {
   }
   return parseInt(value);
 }
-__name(selectValueToPage, "selectValueToPage");
 function getPagination({ itemCount, pageSize, siblingCount, currentPage }) {
   const totalPageCount = Math.ceil(itemCount / pageSize);
   const totalPageNumbers = siblingCount + 5;
@@ -53,62 +45,39 @@ function getPagination({ itemCount, pageSize, siblingCount, currentPage }) {
   if (!shouldShowLeftDots && shouldShowRightDots) {
     const leftItemCount = 3 + 2 * siblingCount;
     const leftRange = range(1, leftItemCount);
-    return [
-      ...leftRange,
-      DOTS,
-      totalPageCount
-    ];
+    return [...leftRange, DOTS, totalPageCount];
   }
   if (shouldShowLeftDots && !shouldShowRightDots) {
     const rightItemCount = 3 + 2 * siblingCount;
     const rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
-    return [
-      firstPageIndex,
-      DOTS,
-      ...rightRange
-    ];
+    return [firstPageIndex, DOTS, ...rightRange];
   }
   if (shouldShowLeftDots && shouldShowRightDots) {
     const middleRange = range(leftSiblingIndex, rightSiblingIndex);
-    return [
-      firstPageIndex,
-      DOTS,
-      ...middleRange,
-      DOTS,
-      lastPageIndex
-    ];
+    return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
   }
   return range(1, totalPageCount);
 }
-__name(getPagination, "getPagination");
 
 // src/components/alliance-paginator/alliance-page-selector.ts
-function _ts_decorate(decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-__name(_ts_decorate, "_ts_decorate");
-function _ts_metadata(k, v) {
-  if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-    return Reflect.metadata(k, v);
-}
-__name(_ts_metadata, "_ts_metadata");
 var PageSelect = class extends LitElement {
-  static {
-    __name(this, "PageSelect");
-  }
   constructor() {
     super();
+    this.onChange = (e) => {
+      const nextPage = selectValueToPage(e.currentTarget.value);
+      const event = new CustomEvent("select-page", {
+        bubbles: true,
+        composed: true,
+        detail: { nextPage, previousPage: this.currentPage },
+        cancelable: true
+      });
+      this.dispatchEvent(event);
+    };
     this.currentPage = 0;
     this.lastPage = 0;
   }
-  static styles = css`
+  static {
+    this.styles = css`
         :host select {
             padding: ${unsafeCSS(spacing.spacing16)} ${unsafeCSS(spacing.spacing24)};
             border-radius: ${unsafeCSS(borders.radiusFull)};
@@ -157,19 +126,7 @@ var PageSelect = class extends LitElement {
             outline-offset: ${unsafeCSS(spacing.spacing4)};
         }
     `;
-  onChange = (e) => {
-    const nextPage = selectValueToPage(e.currentTarget.value);
-    const event = new CustomEvent("select-page", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        nextPage,
-        previousPage: this.currentPage
-      },
-      cancelable: true
-    });
-    this.dispatchEvent(event);
-  };
+  }
   render() {
     return html`
             <select
@@ -177,50 +134,56 @@ var PageSelect = class extends LitElement {
                 @change=${this.onChange}
                 .value=${pageToSelectValue(this.currentPage, this.lastPage)}
             >
-                ${repeat(listPages(this.lastPage), (page) => html`<option value="${page}">${page}</option>`)}
+                ${repeat(
+      listPages(this.lastPage),
+      (page) => html`<option value="${page}">${page}</option>`
+    )}
             </select>
         `;
   }
 };
-_ts_decorate([
-  property({
-    type: Number,
-    attribute: "current-page"
-  }),
-  _ts_metadata("design:type", Number)
-], PageSelect.prototype, "currentPage", void 0);
-_ts_decorate([
-  property({
-    type: Number,
-    attribute: "last-page"
-  }),
-  _ts_metadata("design:type", Number)
-], PageSelect.prototype, "lastPage", void 0);
+__decorateClass([
+  property({ type: Number, attribute: "current-page" })
+], PageSelect.prototype, "currentPage", 2);
+__decorateClass([
+  property({ type: Number, attribute: "last-page" })
+], PageSelect.prototype, "lastPage", 2);
 define("alliance-page-selector", PageSelect);
 
 // src/components/alliance-paginator/alliance-paginator.ts
-function _ts_decorate2(decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-__name(_ts_decorate2, "_ts_decorate");
-function _ts_metadata2(k, v) {
-  if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-    return Reflect.metadata(k, v);
-}
-__name(_ts_metadata2, "_ts_metadata");
 var Paginator = class extends LitElement {
-  static {
-    __name(this, "Paginator");
-  }
   constructor() {
     super();
+    this.changePage = (nextPage) => {
+      if (nextPage === this.currentPage || // Next page is the same
+      nextPage < 1 || // Next page is 0
+      nextPage > this.pages[this.pages.length - 1]) {
+        return;
+      }
+      const event = new CustomEvent("change-page", {
+        bubbles: true,
+        composed: true,
+        detail: { nextPage, previousPage: this.currentPage },
+        cancelable: true
+      });
+      const defaultNotPrevented = this.dispatchEvent(event);
+      if (defaultNotPrevented) {
+        this.currentPage = nextPage;
+        this.pages = getPagination({
+          itemCount: this.itemCount,
+          pageSize: this.pageSize,
+          siblingCount: this.siblingCount,
+          currentPage: this.currentPage
+        });
+      }
+    };
+    this.next = () => {
+      this.changePage(this.currentPage + 1);
+    };
+    this.previous = () => {
+      this.changePage(this.currentPage - 1);
+    };
+    this.onPageSelect = (event) => this.changePage(event.detail.nextPage);
     this.itemCount = 0;
     this.pageSize = 50;
     this.initialPage = 1;
@@ -228,7 +191,8 @@ var Paginator = class extends LitElement {
     this.currentPage = this.initialPage;
     this.pages = [];
   }
-  static styles = css`
+  static {
+    this.styles = css`
         :host {
             display: flex;
             flex-direction: row;
@@ -263,6 +227,7 @@ var Paginator = class extends LitElement {
             }
         }
     `;
+  }
   connectedCallback() {
     super.connectedCallback();
     this.currentPage = this.initialPage;
@@ -286,39 +251,6 @@ var Paginator = class extends LitElement {
       [name]: value
     });
   }
-  changePage = (nextPage) => {
-    if (nextPage === this.currentPage || // Next page is the same
-    nextPage < 1 || // Next page is 0
-    nextPage > this.pages[this.pages.length - 1]) {
-      return;
-    }
-    const event = new CustomEvent("change-page", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        nextPage,
-        previousPage: this.currentPage
-      },
-      cancelable: true
-    });
-    const defaultNotPrevented = this.dispatchEvent(event);
-    if (defaultNotPrevented) {
-      this.currentPage = nextPage;
-      this.pages = getPagination({
-        itemCount: this.itemCount,
-        pageSize: this.pageSize,
-        siblingCount: this.siblingCount,
-        currentPage: this.currentPage
-      });
-    }
-  };
-  next = () => {
-    this.changePage(this.currentPage + 1);
-  };
-  previous = () => {
-    this.changePage(this.currentPage - 1);
-  };
-  onPageSelect = (event) => this.changePage(event.detail.nextPage);
   render() {
     return html`
             <alliance-paginator-button
@@ -327,11 +259,14 @@ var Paginator = class extends LitElement {
                 icon="left"
             ></alliance-paginator-button>
 
-            ${repeat(this.pages, (pageNumber) => pageNumber === "..." ? html`<telia-label>...</telia-label>` : html`<alliance-paginator-button
+            ${repeat(
+      this.pages,
+      (pageNumber) => pageNumber === "..." ? html`<telia-label>...</telia-label>` : html`<alliance-paginator-button
                           page=${pageNumber}
                           @click=${() => this.changePage(pageNumber)}
                           ?selected=${this.currentPage === pageNumber}
-                      ></alliance-paginator-button>`)}
+                      ></alliance-paginator-button>`
+    )}
 
             <alliance-page-selector
                 current-page=${this.currentPage}
@@ -348,68 +283,31 @@ var Paginator = class extends LitElement {
         `;
   }
 };
-_ts_decorate2([
-  property({
-    type: Number,
-    attribute: "item-count"
-  }),
-  _ts_metadata2("design:type", Number)
-], Paginator.prototype, "itemCount", void 0);
-_ts_decorate2([
-  property({
-    type: Number,
-    attribute: "page-size"
-  }),
-  _ts_metadata2("design:type", Number)
-], Paginator.prototype, "pageSize", void 0);
-_ts_decorate2([
-  property({
-    type: Number,
-    attribute: "initial-page"
-  }),
-  _ts_metadata2("design:type", Number)
-], Paginator.prototype, "initialPage", void 0);
-_ts_decorate2([
-  property({
-    type: Number,
-    attribute: "sibling-count"
-  }),
-  _ts_metadata2("design:type", Number)
-], Paginator.prototype, "siblingCount", void 0);
-_ts_decorate2([
-  state(),
-  _ts_metadata2("design:type", Number)
-], Paginator.prototype, "currentPage", void 0);
-_ts_decorate2([
-  state(),
-  _ts_metadata2("design:type", typeof Pages === "undefined" ? Object : Pages)
-], Paginator.prototype, "pages", void 0);
+__decorateClass([
+  property({ type: Number, attribute: "item-count" })
+], Paginator.prototype, "itemCount", 2);
+__decorateClass([
+  property({ type: Number, attribute: "page-size" })
+], Paginator.prototype, "pageSize", 2);
+__decorateClass([
+  property({ type: Number, attribute: "initial-page" })
+], Paginator.prototype, "initialPage", 2);
+__decorateClass([
+  property({ type: Number, attribute: "sibling-count" })
+], Paginator.prototype, "siblingCount", 2);
+__decorateClass([
+  state()
+], Paginator.prototype, "currentPage", 2);
+__decorateClass([
+  state()
+], Paginator.prototype, "pages", 2);
 define("alliance-paginator", Paginator);
-function _ts_decorate3(decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-__name(_ts_decorate3, "_ts_decorate");
-function _ts_metadata3(k, v) {
-  if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
-    return Reflect.metadata(k, v);
-}
-__name(_ts_metadata3, "_ts_metadata");
-var Icon;
-(function(Icon2) {
+var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["Left"] = "left";
   Icon2["Right"] = "right";
-})(Icon || (Icon = {}));
+  return Icon2;
+})(Icon || {});
 var PaginatorButton = class extends LitElement {
-  static {
-    __name(this, "PaginatorButton");
-  }
   constructor() {
     super();
     this.selected = false;
@@ -417,10 +315,10 @@ var PaginatorButton = class extends LitElement {
     this.clickable = true;
   }
   renderContent() {
-    if (this.icon === "left") {
+    if (this.icon === "left" /* Left */) {
       return html`<telia-icon size="sm" svg="${chevronLeft.svg}" />`;
     }
-    if (this.icon === "right") {
+    if (this.icon === "right" /* Right */) {
       return html`<telia-icon size="sm" svg="${chevronRight.svg}" />`;
     }
     return html`<span>${this.page}</span>`;
@@ -429,36 +327,21 @@ var PaginatorButton = class extends LitElement {
     return html`<telia-button ?disabled=${this.disabled} variant=${this.selected ? "primary" : "tertiary-purple"}>${this.renderContent()}</telia-button> `;
   }
 };
-_ts_decorate3([
-  property({
-    type: Icon
-  }),
-  _ts_metadata3("design:type", String)
-], PaginatorButton.prototype, "icon", void 0);
-_ts_decorate3([
-  property({
-    type: String
-  }),
-  _ts_metadata3("design:type", String)
-], PaginatorButton.prototype, "page", void 0);
-_ts_decorate3([
-  property({
-    type: Boolean
-  }),
-  _ts_metadata3("design:type", Boolean)
-], PaginatorButton.prototype, "selected", void 0);
-_ts_decorate3([
-  property({
-    type: Boolean
-  }),
-  _ts_metadata3("design:type", Boolean)
-], PaginatorButton.prototype, "disabled", void 0);
-_ts_decorate3([
-  property({
-    type: Boolean
-  }),
-  _ts_metadata3("design:type", Boolean)
-], PaginatorButton.prototype, "clickable", void 0);
+__decorateClass([
+  property({ type: Icon })
+], PaginatorButton.prototype, "icon", 2);
+__decorateClass([
+  property({ type: String })
+], PaginatorButton.prototype, "page", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PaginatorButton.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PaginatorButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PaginatorButton.prototype, "clickable", 2);
 define("alliance-paginator-button", PaginatorButton);
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-LYU2K33W.js.map
+//# sourceMappingURL=chunk-CZPHL6EU.js.map

package/components/chunk-CZPHL6EU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/alliance-paginator/alliance-page-selector.ts","../src/components/alliance-paginator/utils.ts","../src/components/alliance-paginator/alliance-paginator.ts","../src/voca/components/telia-label.ts","../src/components/alliance-paginator/alliance-paginator-button.ts"],"names":["LitElement","css","html","unsafeCSS","property","repeat","Icon"],"mappings":"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","sourcesContent":["import { LitElement, css, html, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport { define } from '@/utils';\nimport '@/voca/components/telia-button';\nimport { borders, colors, focus, motion, spacing } from '@/voca/foundations';\n\nimport { listPages, pageToSelectValue, selectValueToPage } from './utils';\n\n/**\n * Event dispatched when selecting a page.\n *\n * Event: `change-page`\n *\n * Detail: Object containing the properties `nextPage` and `previousPage`.\n */\nexport type SelectPageEvent = CustomEvent<{ nextPage: number; previousPage: number }>;\n\nexport class PageSelect extends LitElement {\n    constructor() {\n        super();\n        this.currentPage = 0;\n        this.lastPage = 0;\n    }\n    static styles = css`\n        :host select {\n            padding: ${unsafeCSS(spacing.spacing16)} ${unsafeCSS(spacing.spacing24)};\n            border-radius: ${unsafeCSS(borders.radiusFull)};\n            border: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.purple850)};\n            background-color: transparent;\n            color: ${unsafeCSS(colors.purple850)};\n            text-align: center;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            display: inline-flex;\n            font-family: 'TeliaSans', Helvetica, Arial, 'Lucida Grande', sans-serif;\n            font-size: ${unsafeCSS(spacing.spacing16)};\n            line-height: ${unsafeCSS(spacing.spacing16)};\n            transition:\n                color ${unsafeCSS(motion.duration150)} ease,\n                background-color ${unsafeCSS(motion.duration150)} ease;\n\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            appearance: none;\n            outline: none;\n        }\n\n        :host select:hover {\n            background-color: ${unsafeCSS(colors.purple850)};\n            color: ${unsafeCSS(colors.white)};\n        }\n\n        :host select:active {\n            background-color: ${unsafeCSS(colors.purple700)};\n        }\n\n        :host select option {\n            background-color: ${unsafeCSS(colors.white)};\n            color: ${unsafeCSS(colors.black)};\n            text-align: center;\n        }\n\n        :host select::-ms-expand {\n            display: none;\n        }\n\n        :host select:focus-visible {\n            outline: solid ${unsafeCSS(focus.focusBorderWidth)} ${unsafeCSS(focus.focusColor)};\n            outline-offset: ${unsafeCSS(spacing.spacing4)};\n        }\n    `;\n\n    @property({ type: Number, attribute: 'current-page' })\n    declare currentPage: number;\n\n    @property({ type: Number, attribute: 'last-page' })\n    declare lastPage: number;\n\n    onChange = (\n        e: Event & {\n            currentTarget: HTMLSelectElement;\n        },\n    ) => {\n        const nextPage = selectValueToPage(e.currentTarget.value);\n\n        const event: SelectPageEvent = new CustomEvent('select-page', {\n            bubbles: true,\n            composed: true,\n            detail: { nextPage, previousPage: this.currentPage },\n            cancelable: true,\n        });\n        this.dispatchEvent(event);\n    };\n\n    render() {\n        return html`\n            <select\n                id=\"select\"\n                @change=${this.onChange}\n                .value=${pageToSelectValue(this.currentPage, this.lastPage)}\n            >\n                ${repeat(\n                    listPages(this.lastPage),\n                    (page) => html`<option value=\"${page}\">${page}</option>`,\n                )}\n            </select>\n        `;\n    }\n}\n\ndefine('alliance-page-selector', PageSelect);\n","/* \n  Pagination logic taken from https://www.freecodecamp.org/news/build-a-custom-pagination-component-in-react/\n*/\nconst DOTS = '...';\n\nconst range = (start: number, end: number) => {\n    const length = end - start + 1;\n    /*\n        Create an array of certain length and set the elements within it from\n      start value to end value.\n    */\n    return Array.from({ length }, (_, idx) => idx + start);\n};\n\ntype Args = {\n    itemCount: number;\n    pageSize: number;\n    siblingCount: number;\n    currentPage: number;\n};\n\nexport type Pages = (number | '...')[];\n\nexport function getLastPage(pages: Pages): number {\n    return pages[pages.length - 1] as number;\n}\n\nexport function listPages(lastPage: number): string[] {\n    return Array.from({ length: lastPage }, (_, i) => {\n        return pageToSelectValue(i + 1, lastPage);\n    });\n}\n\nexport function pageToSelectValue(page: number, lastPage: number): string {\n    return `${page} / ${lastPage}`;\n}\n\nexport function selectValueToPage(selectValue: string): number {\n    const value = selectValue.split('/')[0];\n\n    if (typeof value !== 'string') {\n        throw new Error('Could not parse page value from select.');\n    }\n\n    return parseInt(value);\n}\n\nexport function getPagination({ itemCount, pageSize, siblingCount, currentPage }: Args): Pages {\n    const totalPageCount = Math.ceil(itemCount / pageSize);\n\n    // Pages count is determined as siblingCount + firstPage + lastPage + currentPage + 2*DOTS\n    const totalPageNumbers = siblingCount + 5;\n\n    /*\n        Case 1:\n        If the number of pages is less than the page numbers we want to show in our\n        paginationComponent, we return the range [1..totalPageCount]\n      */\n    if (totalPageNumbers >= totalPageCount) {\n        return range(1, totalPageCount);\n    }\n\n    /*\n          Calculate left and right sibling index and make sure they are within range 1 and totalPageCount\n      */\n    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);\n    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPageCount);\n\n    /*\n        We do not show dots just when there is just one page number to be inserted between the extremes of sibling and the page limits i.e 1 and totalPageCount. Hence we are using leftSiblingIndex > 2 and rightSiblingIndex < totalPageCount - 2\n      */\n    const shouldShowLeftDots = leftSiblingIndex > 2;\n    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;\n\n    const firstPageIndex = 1;\n    const lastPageIndex = totalPageCount;\n\n    /*\n          Case 2: No left dots to show, but rights dots to be shown\n      */\n    if (!shouldShowLeftDots && shouldShowRightDots) {\n        const leftItemCount = 3 + 2 * siblingCount;\n        const leftRange = range(1, leftItemCount);\n\n        return [...leftRange, DOTS, totalPageCount];\n    }\n\n    /*\n          Case 3: No right dots to show, but left dots to be shown\n      */\n    if (shouldShowLeftDots && !shouldShowRightDots) {\n        const rightItemCount = 3 + 2 * siblingCount;\n        const rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);\n        return [firstPageIndex, DOTS, ...rightRange];\n    }\n\n    /*\n          Case 4: Both left and right dots to be shown\n      */\n    if (shouldShowLeftDots && shouldShowRightDots) {\n        const middleRange = range(leftSiblingIndex, rightSiblingIndex);\n        return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];\n    }\n\n    return range(1, totalPageCount);\n}\n","import { LitElement, css, html, unsafeCSS } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport { define } from '@/utils';\nimport '@/voca/components/telia-button';\nimport '@/voca/components/telia-label';\nimport { breakpoints, colors, spacing } from '@/voca/foundations';\n\nimport type { SelectPageEvent } from './alliance-page-selector';\nimport { type Pages, getLastPage, getPagination } from './utils';\n\n/**\n * Event dispatched when pressing a page button.\n *\n * Event: `change-page`\n *\n * Detail: Object containing the properties `nextPage` and `previousPage`.\n */\nexport type ChangePageEvent = CustomEvent<{ nextPage: number; previousPage: number }>;\n\nexport class Paginator extends LitElement {\n    constructor() {\n        super();\n        this.itemCount = 0;\n        this.pageSize = 50;\n        this.initialPage = 1;\n        this.siblingCount = 2;\n        this.currentPage = this.initialPage;\n        this.pages = [];\n    }\n    static styles = css`\n        :host {\n            display: flex;\n            flex-direction: row;\n            place-items: center;\n            gap: ${unsafeCSS(spacing.spacing8)};\n        }\n\n        :host telia-label {\n            display: none;\n        }\n\n        :host .telia-label {\n            color: ${unsafeCSS(colors.purple700)};\n        }\n\n        :host alliance-paginator-button[page] {\n            display: none;\n        }\n\n        span {\n            display: block;\n        }\n\n        @container (min-width: ${unsafeCSS(breakpoints.breakpointLg)}) {\n            :host telia-label,\n            :host alliance-paginator-button[page] {\n                display: block;\n            }\n\n            :host alliance-page-selector {\n                display: none;\n            }\n        }\n    `;\n\n    connectedCallback() {\n        super.connectedCallback();\n\n        this.currentPage = this.initialPage;\n        this.pages = getPagination({\n            itemCount: this.itemCount,\n            pageSize: this.pageSize,\n            siblingCount: this.siblingCount,\n            currentPage: this.currentPage,\n        });\n    }\n\n    attributeChangedCallback(name: string, _: string | null, value: string | null) {\n        super.attributeChangedCallback(name, _, value);\n\n        if (name === 'initial-page') {\n            this.currentPage = this.initialPage;\n        }\n\n        this.pages = getPagination({\n            itemCount: this.itemCount,\n            pageSize: this.pageSize,\n            siblingCount: this.siblingCount,\n            currentPage: this.currentPage,\n            [name]: value,\n        });\n    }\n\n    @property({ type: Number, attribute: 'item-count' })\n    declare itemCount: number;\n\n    @property({ type: Number, attribute: 'page-size' })\n    declare pageSize: number;\n\n    @property({ type: Number, attribute: 'initial-page' })\n    declare initialPage: number;\n\n    @property({ type: Number, attribute: 'sibling-count' })\n    declare siblingCount: number;\n\n    @state()\n    declare currentPage: number;\n\n    @state()\n    declare pages: Pages;\n\n    changePage = (nextPage: number) => {\n        if (\n            nextPage === this.currentPage || // Next page is the same\n            nextPage < 1 || // Next page is 0\n            nextPage > (this.pages[this.pages.length - 1] as number) // Next page is outside of available pages\n        ) {\n            return;\n        }\n\n        const event: ChangePageEvent = new CustomEvent('change-page', {\n            bubbles: true,\n            composed: true,\n            detail: { nextPage, previousPage: this.currentPage },\n            cancelable: true,\n        });\n        const defaultNotPrevented = this.dispatchEvent(event);\n\n        if (defaultNotPrevented) {\n            this.currentPage = nextPage;\n\n            this.pages = getPagination({\n                itemCount: this.itemCount,\n                pageSize: this.pageSize,\n                siblingCount: this.siblingCount,\n                currentPage: this.currentPage,\n            });\n        }\n    };\n\n    next = () => {\n        this.changePage(this.currentPage + 1);\n    };\n\n    previous = () => {\n        this.changePage(this.currentPage - 1);\n    };\n\n    onPageSelect = (event: SelectPageEvent) => this.changePage(event.detail.nextPage);\n\n    render() {\n        return html`\n            <alliance-paginator-button\n                @click=${this.previous}\n                ?disabled=${this.currentPage === 1}\n                icon=\"left\"\n            ></alliance-paginator-button>\n\n            ${repeat(this.pages, (pageNumber) =>\n                pageNumber === '...'\n                    ? html`<telia-label>...</telia-label>`\n                    : html`<alliance-paginator-button\n                          page=${pageNumber}\n                          @click=${() => this.changePage(pageNumber)}\n                          ?selected=${this.currentPage === pageNumber}\n                      ></alliance-paginator-button>`,\n            )}\n\n            <alliance-page-selector\n                current-page=${this.currentPage}\n                last-page=${getLastPage(this.pages)}\n                @select-page=${this.onPageSelect}\n            >\n            </alliance-page-selector>\n\n            <alliance-paginator-button\n                @click=${this.next}\n                ?disabled=${this.currentPage === getLastPage(this.pages)}\n                icon=\"right\"\n            ></alliance-paginator-button>\n        `;\n    }\n}\n\ndefine('alliance-paginator', Paginator);\n","// This file is generated - see scripts/map-voca-components.js\nimport '@teliads/components/dist/components/telia-label';\n","import { chevronLeft, chevronRight } from '@teliads/components/icons';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { define } from '@/utils';\nimport '@/voca/components/telia-button';\nimport '@/voca/components/telia-icon';\n\nenum Icon {\n    Left = 'left',\n    Right = 'right',\n}\n\nexport class PaginatorButton extends LitElement {\n    constructor() {\n        super();\n        this.selected = false;\n        this.disabled = false;\n        this.clickable = true;\n    }\n    @property({ type: Icon })\n    declare icon?: Icon;\n\n    @property({ type: String })\n    declare page?: string;\n\n    @property({ type: Boolean })\n    declare selected: boolean;\n\n    @property({ type: Boolean })\n    declare disabled: boolean;\n\n    @property({ type: Boolean })\n    declare clickable: boolean;\n\n    private renderContent() {\n        if (this.icon === Icon.Left) {\n            return html`<telia-icon size=\"sm\" svg=\"${chevronLeft.svg}\" />`;\n        }\n\n        if (this.icon === Icon.Right) {\n            return html`<telia-icon size=\"sm\" svg=\"${chevronRight.svg}\" />`;\n        }\n\n        return html`<span>${this.page}</span>`;\n    }\n\n    render() {\n        /*\n            Ignore prettier on next line because Voca \n            uses textContent on the telia-button element\n            to detect whether or not it only contains an\n            icon - which does not take account for white space...\n            https://github.com/telia-company/design-system/issues/813\n        */\n        // prettier-ignore\n        return html`<telia-button ?disabled=${this.disabled} variant=${this.selected ? 'primary' : 'tertiary-purple'}>${this.renderContent()}</telia-button> `;\n    }\n}\n\ndefine('alliance-paginator-button', PaginatorButton);\n"]}

package/components/chunk-IFHLWFVT.js

@@ -0,0 +1,133 @@
+import { layers, borders, colors, shadows, spacing } from './chunk-5A2VXG2P.js';
+import { __decorateClass, define } from './chunk-AW7BCYX5.js';
+import { autoPlacement, computePosition, autoUpdate } from '@floating-ui/dom';
+import { LitElement, css, unsafeCSS, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import '@teliads/components/dist/components/telia-skeleton';
+
+// src/components/alliance-pop-over/alliance-pop-over.ts
+var PopOver = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.onWindowClick = (event) => {
+      const { target, clientX, clientY } = event;
+      if (!this.cursor) {
+        this.cursor = { x: clientX, y: clientY };
+        return;
+      }
+      if (!target || target === this || this.contains(target)) {
+        return;
+      }
+      if (this.anchorElement && (target === this.anchorElement || this.anchorElement.contains(target))) {
+        return;
+      }
+      this.remove();
+    };
+    this.position = () => {
+      const middleware = [];
+      if (!this.placement) {
+        middleware.push(autoPlacement());
+      }
+      computePosition(this.reference(), this, {
+        middleware,
+        placement: this.placement
+      }).then(({ x, y }) => {
+        Object.assign(this.style, {
+          left: `${x}px`,
+          top: `${y}px`
+        });
+      });
+    };
+    this.reference = () => {
+      if (!this.anchorElement && !this.cursor) {
+        return virtual({ x: 0, y: 0 });
+      }
+      return this.anchorElement || virtual(this.cursor);
+    };
+  }
+  static {
+    this.styles = css`
+        :host {
+            display: block;
+            width: max-content;
+            position: absolute;
+            top: 0;
+            left: 0;
+
+            z-index: ${unsafeCSS(Number(layers.modal) * 2)};
+            border: ${unsafeCSS(borders.widthXs)};
+            border-radius: ${unsafeCSS(borders.radiusSm)};
+            background-color: ${unsafeCSS(colors.white)};
+            box-shadow: ${unsafeCSS(shadows.md)};
+        }
+
+        :host([loading]) {
+            display: flex;
+            flex-direction: column;
+            padding: ${unsafeCSS(spacing.spacing12)};
+            gap: ${unsafeCSS(spacing.spacing12)};
+        }
+
+        :host([loading]) telia-skeleton {
+            height: ${unsafeCSS(spacing.spacing12)};
+            width: ${unsafeCSS(spacing.spacing128)};
+        }
+    `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const anchorElement = document.getElementById(this.anchor);
+    if (anchorElement) {
+      this.anchorElement = anchorElement;
+    }
+    window.addEventListener("click", this.onWindowClick);
+    const cleanup = autoUpdate(this.reference(), this, this.position);
+    this.cleanup = () => {
+      window.removeEventListener("click", this.onWindowClick);
+      cleanup();
+    };
+  }
+  disconnectedCallback() {
+    this.dispatchEvent(new CustomEvent("close"));
+    this.cleanup();
+    super.disconnectedCallback();
+  }
+  render() {
+    if (this.loading) {
+      return html`
+                <telia-skeleton round> </telia-skeleton>
+                <telia-skeleton round> </telia-skeleton>
+                <telia-skeleton round> </telia-skeleton>
+                <telia-skeleton round> </telia-skeleton>
+                <telia-skeleton round> </telia-skeleton>
+            `;
+    }
+    return html` <slot> </slot> `;
+  }
+};
+__decorateClass([
+  property({ type: String })
+], PopOver.prototype, "anchor", 2);
+__decorateClass([
+  property({ type: String, attribute: true, reflect: true })
+], PopOver.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: true, reflect: true })
+], PopOver.prototype, "loading", 2);
+define("alliance-pop-over", PopOver);
+function virtual({ x, y }) {
+  return {
+    getBoundingClientRect: () => ({
+      width: 0,
+      height: 0,
+      x,
+      y,
+      top: y,
+      left: x,
+      right: x,
+      bottom: y
+    })
+  };
+}
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-IFHLWFVT.js.map

package/components/chunk-IFHLWFVT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/alliance-pop-over/alliance-pop-over.ts","../src/voca/components/telia-skeleton.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    type Middleware,\n    type Placement,\n    autoPlacement,\n    autoUpdate,\n    computePosition,\n} from '@floating-ui/dom';\nimport { LitElement, css, html, unsafeCSS } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { define } from '@/utils';\nimport '@/voca/components/telia-skeleton';\nimport { borders, colors, layers, shadows, spacing } from '@/voca/foundations';\n\nexport class PopOver extends LitElement {\n    static styles = css`\n        :host {\n            display: block;\n            width: max-content;\n            position: absolute;\n            top: 0;\n            left: 0;\n\n            z-index: ${unsafeCSS(Number(layers.modal) * 2)};\n            border: ${unsafeCSS(borders.widthXs)};\n            border-radius: ${unsafeCSS(borders.radiusSm)};\n            background-color: ${unsafeCSS(colors.white)};\n            box-shadow: ${unsafeCSS(shadows.md)};\n        }\n\n        :host([loading]) {\n            display: flex;\n            flex-direction: column;\n            padding: ${unsafeCSS(spacing.spacing12)};\n            gap: ${unsafeCSS(spacing.spacing12)};\n        }\n\n        :host([loading]) telia-skeleton {\n            height: ${unsafeCSS(spacing.spacing12)};\n            width: ${unsafeCSS(spacing.spacing128)};\n        }\n    `;\n\n    @property({ type: String })\n    declare anchor: string;\n\n    @property({ type: String, attribute: true, reflect: true })\n    declare placement?: Placement;\n\n    @property({ type: Boolean, attribute: true, reflect: true })\n    declare loading: boolean;\n\n    connectedCallback() {\n        super.connectedCallback();\n\n        const anchorElement = document.getElementById(this.anchor);\n        if (anchorElement) {\n            this.anchorElement = anchorElement;\n        }\n\n        window.addEventListener('click', this.onWindowClick);\n\n        const cleanup = autoUpdate(this.reference(), this, this.position);\n        this.cleanup = () => {\n            window.removeEventListener('click', this.onWindowClick);\n            cleanup();\n        };\n    }\n\n    disconnectedCallback() {\n        this.dispatchEvent(new CustomEvent('close'));\n        this.cleanup();\n        super.disconnectedCallback();\n    }\n\n    private declare cleanup: () => void;\n    private declare anchorElement: HTMLElement;\n    private declare cursor: { x: number; y: number };\n\n    private onWindowClick = (event: MouseEvent) => {\n        const { target, clientX, clientY } = event;\n\n        // First click, only store cursor position\n        if (!this.cursor) {\n            this.cursor = { x: clientX, y: clientY };\n            return;\n        }\n\n        // Click target is part of popup\n        if (!target || target === this || this.contains(target as Node)) {\n            return;\n        }\n\n        // Click target is part of anchor element\n        if (\n            this.anchorElement &&\n            (target === this.anchorElement || this.anchorElement.contains(target as Node))\n        ) {\n            return;\n        }\n\n        this.remove();\n    };\n\n    private position = () => {\n        const middleware: Middleware[] = [];\n\n        if (!this.placement) {\n            middleware.push(autoPlacement());\n        }\n\n        computePosition(this.reference(), this, {\n            middleware,\n            placement: this.placement,\n        }).then(({ x, y }) => {\n            Object.assign(this.style, {\n                left: `${x}px`,\n                top: `${y}px`,\n            });\n        });\n    };\n\n    private reference = () => {\n        if (!this.anchorElement && !this.cursor) {\n            return virtual({ x: 0, y: 0 });\n        }\n\n        return this.anchorElement || virtual(this.cursor);\n    };\n\n    render() {\n        if (this.loading) {\n            return html`\n                <telia-skeleton round> </telia-skeleton>\n                <telia-skeleton round> </telia-skeleton>\n                <telia-skeleton round> </telia-skeleton>\n                <telia-skeleton round> </telia-skeleton>\n                <telia-skeleton round> </telia-skeleton>\n            `;\n        }\n\n        return html` <slot> </slot> `;\n    }\n}\n\ndefine('alliance-pop-over', PopOver);\n\nfunction virtual({ x, y }: { x: number; y: number }) {\n    return {\n        getBoundingClientRect: () => ({\n            width: 0,\n            height: 0,\n            x: x,\n            y: y,\n            top: y,\n            left: x,\n            right: x,\n            bottom: y,\n        }),\n    };\n}\n","// This file is generated - see scripts/map-voca-components.js\nimport '@teliads/components/dist/components/telia-skeleton';\n"]}