@telia-ace/alliance-ui 1.0.12 → 1.0.13-next.0

package/components/alliance-paginator.js

@@ -1,13 +1,308 @@
-import "../chunks/alliance-paginator-button-0a0a4fd7.js";
-import "../chunks/telia-button2-7783c019.js";
+import "../chunks/telia-button-c9ba09a9.js";
+import { s as b, b as D, d as g, m as j, c as A } from "../chunks/index-514c4fef.js";
+import { f as N } from "../chunks/variables-ecb680f0.js";
+import { i as I, r, n as l, s as _, x as c, e as S } from "../chunks/query-assigned-elements-ac91685f.js";
+import { c as L, t as k } from "../chunks/repeat-34adae9e.js";
+import "../chunks/telia-label-f4c1eb47.js";
+import "../chunks/telia-icon-d0e7c715.js";
+import { c as M, a as V } from "../chunks/chevron-right-788ce8a9.js";
 import "../chunks/index-eef143db.js";
-import "../chunks/telia-icon2-d0e7c715.js";
-import "../chunks/getSvgContent-f2389ce0.js";
 import "../chunks/telia-vst2-dfb33a56.js";
-import "../chunks/index-d925c796.js";
-import "../chunks/variables-ecb680f0.js";
-import "../chunks/query-assigned-elements-024d0918.js";
-import "../chunks/repeat-600d2fb9.js";
-import "../chunks/telia-label2-f4c1eb47.js";
-import "../chunks/chevron-right-788ce8a9.js";
+import "../chunks/getSvgContent-f2389ce0.js";
+const m = "...", $ = (e, a) => {
+  let i = a - e + 1;
+  return Array.from({ length: i }, (n, t) => t + e);
+};
+function R(e) {
+  return e[e.length - 1];
+}
+function F(e) {
+  return Array.from({ length: e }, (a, i) => B(i + 1, e));
+}
+function B(e, a) {
+  return `${e} / ${a}`;
+}
+function G(e) {
+  const a = e.split("/")[0];
+  if (typeof a != "string")
+    throw new Error("Could not parse page value from select.");
+  return parseInt(a);
+}
+function C({ itemCount: e, pageSize: a, siblingCount: i, currentPage: n }) {
+  const t = Math.ceil(e / a);
+  if (i + 5 >= t)
+    return $(1, t);
+  const s = Math.max(n - i, 1), x = Math.min(n + i, t), v = s > 2, y = x < t - 2, z = 1, T = t;
+  if (!v && y) {
+    let f = 3 + 2 * i;
+    return [...$(1, f), m, t];
+  }
+  if (v && !y) {
+    let f = 3 + 2 * i, O = $(t - f + 1, t);
+    return [z, m, ...O];
+  }
+  if (v && y) {
+    let f = $(s, x);
+    return [z, m, ...f, m, T];
+  }
+  return [];
+}
+var H = Object.defineProperty, W = Object.getOwnPropertyDescriptor, w = (e, a, i, n) => {
+  for (var t = n > 1 ? void 0 : n ? W(a, i) : a, o = e.length - 1, s; o >= 0; o--)
+    (s = e[o]) && (t = (n ? s(a, i, t) : s(t)) || t);
+  return n && t && H(a, i, t), t;
+};
+let P = class extends _ {
+  constructor() {
+    super(...arguments), this.currentPage = 0, this.lastPage = 0, this.onChange = (e) => {
+      const a = G(e.currentTarget.value), i = new CustomEvent("select-page", {
+        bubbles: !0,
+        composed: !0,
+        detail: { nextPage: a, previousPage: this.currentPage },
+        cancelable: !0
+      });
+      this.dispatchEvent(i);
+    };
+  }
+  render() {
+    return c`
+            <select
+                id="select"
+                @change=${this.onChange}
+                .value=${B(this.currentPage, this.lastPage)}
+            >
+                ${L(
+      F(this.lastPage),
+      (e) => c`<option value="${e}">${e}</option>`
+    )}
+            </select>
+        `;
+  }
+};
+P.styles = I`
+        :host select {
+            padding: ${r(b.spacing16)} ${r(b.spacing24)};
+            border-radius: ${r(D.radiusFull)};
+            border: ${r(D.widthXs)} solid ${r(g.purple850)};
+            background-color: transparent;
+            color: ${r(g.purple850)};
+            text-align: center;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            display: inline-flex;
+            font-family: 'TeliaSans', Helvetica, Arial, 'Lucida Grande', sans-serif;
+            font-size: ${r(b.spacing16)};
+            line-height: ${r(b.spacing16)};
+            transition: color ${r(j.duration150)} ease,
+                background-color ${r(j.duration150)} ease;
+
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            outline: none;
+        }
+
+        :host select:hover {
+            background-color: ${r(g.purple850)};
+            color: ${r(g.white)};
+        }
+
+        :host select:active {
+            background-color: ${r(g.purple700)};
+        }
+
+        :host select option {
+            background-color: ${r(g.white)};
+            color: ${r(g.black)};
+            text-align: center;
+        }
+
+        :host select::-ms-expand {
+            display: none;
+        }
+
+        :host select:focus-visible {
+            outline: solid ${r(N.focusBorderWidth)} ${r(N.focusColor)};
+            outline-offset: ${r(b.spacing4)};
+        }
+    `;
+w([
+  l({ type: Number, attribute: "current-page" })
+], P.prototype, "currentPage", 2);
+w([
+  l({ type: Number, attribute: "last-page" })
+], P.prototype, "lastPage", 2);
+P = w([
+  S("alliance-page-selector")
+], P);
+var X = Object.defineProperty, q = Object.getOwnPropertyDescriptor, h = (e, a, i, n) => {
+  for (var t = n > 1 ? void 0 : n ? q(a, i) : a, o = e.length - 1, s; o >= 0; o--)
+    (s = e[o]) && (t = (n ? s(a, i, t) : s(t)) || t);
+  return n && t && X(a, i, t), t;
+};
+let p = class extends _ {
+  constructor() {
+    super(...arguments), this.itemCount = 0, this.pageSize = 50, this.initialPage = 1, this.siblingCount = 2, this.currentPage = this.initialPage, this.pages = [], this.changePage = (e) => {
+      if (e === this.currentPage || // Next page is the same
+      e < 1 || // Next page is 0
+      e > this.pages[this.pages.length - 1])
+        return;
+      const a = new CustomEvent("change-page", {
+        bubbles: !0,
+        composed: !0,
+        detail: { nextPage: e, previousPage: this.currentPage },
+        cancelable: !0
+      });
+      this.dispatchEvent(a) && (this.currentPage = e, this.pages = C({
+        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 = (e) => this.changePage(e.detail.nextPage);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.currentPage = this.initialPage, this.pages = C({
+      itemCount: this.itemCount,
+      pageSize: this.pageSize,
+      siblingCount: this.siblingCount,
+      currentPage: this.currentPage
+    });
+  }
+  attributeChangedCallback(e, a, i) {
+    super.attributeChangedCallback(e, a, i), e === "initial-page" && (this.currentPage = this.initialPage), this.pages = C({
+      itemCount: this.itemCount,
+      pageSize: this.pageSize,
+      siblingCount: this.siblingCount,
+      currentPage: this.currentPage,
+      [e]: i
+    });
+  }
+  render() {
+    return c`
+            <alliance-paginator-button
+                @click=${this.previous}
+                ?disabled=${this.currentPage === 1}
+                icon="left"
+            ></alliance-paginator-button>
+
+            ${L(
+      this.pages,
+      (e) => e === "..." ? c`<telia-label>...</telia-label>` : c`<alliance-paginator-button
+                          page=${e}
+                          @click=${() => this.changePage(e)}
+                          ?selected=${this.currentPage === e}
+                      ></alliance-paginator-button>`
+    )}
+
+            <alliance-page-selector
+                current-page=${this.currentPage}
+                last-page=${R(this.pages)}
+                @select-page=${this.onPageSelect}
+            >
+            </alliance-page-selector>
+
+            <alliance-paginator-button
+                @click=${this.next}
+                ?disabled=${this.currentPage === R(this.pages)}
+                icon="right"
+            ></alliance-paginator-button>
+        `;
+  }
+};
+p.styles = I`
+        :host {
+            display: flex;
+            flex-direction: row;
+            place-items: center;
+            gap: ${r(b.spacing8)};
+        }
+
+        :host telia-label {
+            display: none;
+        }
+
+        :host .telia-label {
+            color: ${r(g.purple700)};
+        }
+
+        :host alliance-paginator-button[page] {
+            display: none;
+        }
+
+        span {
+            display: block;
+        }
+
+        @container (min-width: ${r(A.breakpointLg)}) {
+            :host telia-label,
+            :host alliance-paginator-button[page] {
+                display: block;
+            }
+
+            :host alliance-page-selector {
+                display: none;
+            }
+        }
+    `;
+h([
+  l({ type: Number, attribute: "item-count" })
+], p.prototype, "itemCount", 2);
+h([
+  l({ type: Number, attribute: "page-size" })
+], p.prototype, "pageSize", 2);
+h([
+  l({ type: Number, attribute: "initial-page" })
+], p.prototype, "initialPage", 2);
+h([
+  l({ type: Number, attribute: "sibling-count" })
+], p.prototype, "siblingCount", 2);
+h([
+  k()
+], p.prototype, "currentPage", 2);
+h([
+  k()
+], p.prototype, "pages", 2);
+p = h([
+  S("alliance-paginator")
+], p);
+var J = Object.defineProperty, K = Object.getOwnPropertyDescriptor, d = (e, a, i, n) => {
+  for (var t = n > 1 ? void 0 : n ? K(a, i) : a, o = e.length - 1, s; o >= 0; o--)
+    (s = e[o]) && (t = (n ? s(a, i, t) : s(t)) || t);
+  return n && t && J(a, i, t), t;
+}, E = /* @__PURE__ */ ((e) => (e.Left = "left", e.Right = "right", e))(E || {});
+let u = class extends _ {
+  constructor() {
+    super(...arguments), this.selected = !1, this.disabled = !1, this.clickable = !0;
+  }
+  renderContent() {
+    return this.icon === "left" ? c`<telia-icon size="sm" svg="${M.svg}" />` : this.icon === "right" ? c`<telia-icon size="sm" svg="${V.svg}" />` : c`<span>${this.page}</span>`;
+  }
+  render() {
+    return c`<telia-button ?disabled=${this.disabled} variant=${this.selected ? "primary" : "tertiary-purple"}>${this.renderContent()}</telia-button> `;
+  }
+};
+d([
+  l({ type: E })
+], u.prototype, "icon", 2);
+d([
+  l({ type: String })
+], u.prototype, "page", 2);
+d([
+  l({ type: Boolean })
+], u.prototype, "selected", 2);
+d([
+  l({ type: Boolean })
+], u.prototype, "disabled", 2);
+d([
+  l({ type: Boolean })
+], u.prototype, "clickable", 2);
+u = d([
+  S("alliance-paginator-button")
+], u);
 //# sourceMappingURL=alliance-paginator.js.map

package/components/alliance-paginator.js.map

@@ -1 +1 @@
-{"version":3,"file":"alliance-paginator.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"alliance-paginator.js","sources":["../src/components/alliance-paginator/utils.ts","../src/components/alliance-paginator/alliance-page-selector.ts","../src/components/alliance-paginator/alliance-paginator.ts","../src/components/alliance-paginator/alliance-paginator-button.ts"],"sourcesContent":["/* \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    let 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        let leftItemCount = 3 + 2 * siblingCount;\n        let 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        let rightItemCount = 3 + 2 * siblingCount;\n        let 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        let middleRange = range(leftSiblingIndex, rightSiblingIndex);\n        return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];\n    }\n\n    return [];\n}\n","import '@/voca/components/telia-button';\nimport { borders, colors, focus, motion, spacing } from '@/voca/foundations';\nimport { css, html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\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\n@customElement('alliance-page-selector')\nexport class PageSelect extends LitElement {\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: 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    currentPage: number = 0;\n\n    @property({ type: Number, attribute: 'last-page' })\n    lastPage: number = 0;\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","import '@/voca/components/telia-button';\nimport '@/voca/components/telia-label';\nimport { breakpoints, colors, spacing } from '@/voca/foundations';\nimport { css, html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { SelectPageEvent } from './alliance-page-selector';\n\nimport { getLastPage, getPagination, type Pages } 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\n@customElement('alliance-paginator')\nexport class Paginator extends LitElement {\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    itemCount: number = 0;\n\n    @property({ type: Number, attribute: 'page-size' })\n    pageSize: number = 50;\n\n    @property({ type: Number, attribute: 'initial-page' })\n    initialPage: number = 1;\n\n    @property({ type: Number, attribute: 'sibling-count' })\n    siblingCount: number = 2;\n\n    @state()\n    currentPage: number = this.initialPage;\n\n    @state()\n    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","import '@/voca/components/telia-button';\nimport '@/voca/components/telia-icon';\nimport { chevronLeft, chevronRight } from '@/voca/icons';\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nenum Icon {\n    Left = 'left',\n    Right = 'right',\n}\n\n@customElement('alliance-paginator-button')\nexport class PaginatorButton extends LitElement {\n    @property({ type: Icon })\n    icon?: Icon;\n\n    @property({ type: String })\n    page?: string;\n\n    @property({ type: Boolean })\n    selected: boolean = false;\n\n    @property({ type: Boolean })\n    disabled: boolean = false;\n\n    @property({ type: Boolean })\n    clickable: boolean = true;\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"],"names":["DOTS","range","start","end","length","_","idx","getLastPage","pages","listPages","lastPage","pageToSelectValue","page","selectValueToPage","selectValue","value","getPagination","itemCount","pageSize","siblingCount","currentPage","totalPageCount","leftSiblingIndex","rightSiblingIndex","shouldShowLeftDots","shouldShowRightDots","firstPageIndex","lastPageIndex","leftItemCount","rightItemCount","rightRange","middleRange","PageSelect","LitElement","nextPage","event","html","repeat","css","unsafeCSS","spacing","borders","colors","motion","focus","__decorateClass","property","customElement","Paginator","name","pageNumber","breakpoints","state","Icon","PaginatorButton","chevronLeft","chevronRight"],"mappings":"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"}

package/components/alliance-table.js

@@ -1,8 +1,144 @@
-import "../chunks/alliance-table-row-ec104b1e.js";
-import "../chunks/query-assigned-elements-024d0918.js";
-import "../chunks/index-d925c796.js";
-import "../chunks/telia-heading2-38ae44ae.js";
+import { i as c, s as p, x as i, e as b, r as n, n as O } from "../chunks/query-assigned-elements-ac91685f.js";
+import { s as $, b as w, d as u, m as g } from "../chunks/index-514c4fef.js";
+import "../chunks/telia-heading-38ae44ae.js";
+import { f as y } from "../chunks/variables-ecb680f0.js";
 import "../chunks/index-eef143db.js";
 import "../chunks/telia-vst2-dfb33a56.js";
-import "../chunks/variables-ecb680f0.js";
+var D = Object.defineProperty, j = Object.getOwnPropertyDescriptor, x = (a, r, t, l) => {
+  for (var e = l > 1 ? void 0 : l ? j(r, t) : r, s = a.length - 1, o; s >= 0; s--)
+    (o = a[s]) && (e = (l ? o(r, t, e) : o(e)) || e);
+  return l && e && D(r, t, e), e;
+};
+let d = class extends p {
+  render() {
+    return i` <alliance-tb>
+            <slot></slot>
+        </alliance-tb>`;
+  }
+};
+d.styles = c`
+        :host {
+            display: table;
+            border-collapse: collapse;
+            width: 100%;
+        }
+    `;
+d = x([
+  b("alliance-table")
+], d);
+var C = Object.defineProperty, T = Object.getOwnPropertyDescriptor, B = (a, r, t, l) => {
+  for (var e = l > 1 ? void 0 : l ? T(r, t) : r, s = a.length - 1, o; s >= 0; s--)
+    (o = a[s]) && (e = (l ? o(r, t, e) : o(e)) || e);
+  return l && e && C(r, t, e), e;
+};
+let h = class extends p {
+  render() {
+    return i`<slot></slot>`;
+  }
+};
+h.styles = c`
+        :host {
+            display: table-row-group;
+            vertical-align: middle;
+            border-color: inherit;
+        }
+    `;
+h = B([
+  b("alliance-tb")
+], h);
+var S = Object.defineProperty, H = Object.getOwnPropertyDescriptor, I = (a, r, t, l) => {
+  for (var e = l > 1 ? void 0 : l ? H(r, t) : r, s = a.length - 1, o; s >= 0; s--)
+    (o = a[s]) && (e = (l ? o(r, t, e) : o(e)) || e);
+  return l && e && S(r, t, e), e;
+};
+let _ = class extends p {
+  render() {
+    return i` <slot></slot> `;
+  }
+};
+_.styles = c`
+        :host {
+            display: table-cell;
+            vertical-align: inherit;
+            padding: ${n($.spacing24)};
+        }
+    `;
+_ = I([
+  b("alliance-td")
+], _);
+var R = Object.defineProperty, W = Object.getOwnPropertyDescriptor, P = (a, r, t, l) => {
+  for (var e = l > 1 ? void 0 : l ? W(r, t) : r, s = a.length - 1, o; s >= 0; s--)
+    (o = a[s]) && (e = (l ? o(r, t, e) : o(e)) || e);
+  return l && e && R(r, t, e), e;
+};
+let f = class extends p {
+  constructor() {
+    super(...arguments), this.label = "";
+  }
+  render() {
+    return i`<telia-heading tag="h4" variant="title-100">${this.label}</telia-heading>`;
+  }
+};
+f.styles = c`
+        :host {
+            display: table-cell;
+            padding: ${n($.spacing24)};
+        }
+    `;
+P([
+  O({ type: String })
+], f.prototype, "label", 2);
+f = P([
+  b("alliance-th")
+], f);
+var X = Object.defineProperty, q = Object.getOwnPropertyDescriptor, m = (a, r, t, l) => {
+  for (var e = l > 1 ? void 0 : l ? q(r, t) : r, s = a.length - 1, o; s >= 0; s--)
+    (o = a[s]) && (e = (l ? o(r, t, e) : o(e)) || e);
+  return l && e && X(r, t, e), e;
+};
+let v = class extends p {
+  constructor() {
+    super(...arguments), this.clickable = !1;
+  }
+  render() {
+    return i`
+            ${this.clickable ? z : ""}
+            <slot></slot>
+        `;
+  }
+};
+v.styles = c`
+        :host {
+            display: table-row;
+            border-bottom: ${n(w.widthXs)} solid ${n(u.gray200)};
+        }
+    `;
+m([
+  O({ type: Boolean })
+], v.prototype, "clickable", 2);
+v = m([
+  b("alliance-tr")
+], v);
+const z = i`<style>
+    :host {
+        background-color: transparent;
+        transition: background-color ${n(g.duration150)} ${n(g.easeIn)};
+        cursor: pointer;
+    }
+
+    :host(:hover),
+    :host(:focus-visible),
+    :host(:focus) {
+        background-color: ${n(u.gray200)};
+    }
+
+    :host(:active) {
+        background-color: ${n(u.gray300)};
+    }
+
+    :host(:focus-visible) {
+        outline: solid ${n(y.focusBorderWidth)} ${n(y.focusColor)};
+        outline-offset: ${n($.spacing4)};
+    }
+</style>`;
 //# sourceMappingURL=alliance-table.js.map

package/components/alliance-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"alliance-table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"alliance-table.js","sources":["../src/components/alliance-table/alliance-table.ts","../src/components/alliance-table/alliance-table-body.ts","../src/components/alliance-table/alliance-table-data.ts","../src/components/alliance-table/alliance-table-head.ts","../src/components/alliance-table/alliance-table-row.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('alliance-table')\nexport class Table extends LitElement {\n    static styles = css`\n        :host {\n            display: table;\n            border-collapse: collapse;\n            width: 100%;\n        }\n    `;\n\n    render() {\n        return html` <alliance-tb>\n            <slot></slot>\n        </alliance-tb>`;\n    }\n}\n","import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('alliance-tb')\nexport class TableBody extends LitElement {\n    static styles = css`\n        :host {\n            display: table-row-group;\n            vertical-align: middle;\n            border-color: inherit;\n        }\n    `;\n\n    render() {\n        return html`<slot></slot>`;\n    }\n}\n","import { spacing } from '@/voca/foundations';\nimport { css, html, LitElement, unsafeCSS } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('alliance-td')\nexport class TableData extends LitElement {\n    static styles = css`\n        :host {\n            display: table-cell;\n            vertical-align: inherit;\n            padding: ${unsafeCSS(spacing.spacing24)};\n        }\n    `;\n\n    render() {\n        return html` <slot></slot> `;\n    }\n}\n","import '@/voca/components/telia-heading';\nimport { spacing } from '@/voca/foundations';\nimport { css, html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('alliance-th')\nexport class TableHead extends LitElement {\n    static styles = css`\n        :host {\n            display: table-cell;\n            padding: ${unsafeCSS(spacing.spacing24)};\n        }\n    `;\n\n    @property({ type: String })\n    label: string = '';\n\n    render() {\n        return html`<telia-heading tag=\"h4\" variant=\"title-100\">${this.label}</telia-heading>`;\n    }\n}\n","import { borders, colors, focus, motion, spacing } from '@/voca/foundations';\nimport { css, html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('alliance-tr')\nexport class TableRow extends LitElement {\n    static styles = css`\n        :host {\n            display: table-row;\n            border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};\n        }\n    `;\n\n    @property({ type: Boolean })\n    clickable: boolean = false;\n\n    render() {\n        return html`\n            ${this.clickable ? clickableStyling : ''}\n            <slot></slot>\n        `;\n    }\n}\n\nconst clickableStyling = html`<style>\n    :host {\n        background-color: transparent;\n        transition: background-color ${unsafeCSS(motion.duration150)} ${unsafeCSS(motion.easeIn)};\n        cursor: pointer;\n    }\n\n    :host(:hover),\n    :host(:focus-visible),\n    :host(:focus) {\n        background-color: ${unsafeCSS(colors.gray200)};\n    }\n\n    :host(:active) {\n        background-color: ${unsafeCSS(colors.gray300)};\n    }\n\n    :host(:focus-visible) {\n        outline: solid ${unsafeCSS(focus.focusBorderWidth)} ${unsafeCSS(focus.focusColor)};\n        outline-offset: ${unsafeCSS(spacing.spacing4)};\n    }\n</style>`;\n"],"names":["Table","LitElement","html","css","__decorateClass","customElement","TableBody","TableData","unsafeCSS","spacing","TableHead","property","TableRow","clickableStyling","borders","colors","motion","focus"],"mappings":";;;;;;;;;;;AAIa,IAAAA,IAAN,cAAoBC,EAAW;AAAA,EASlC,SAAS;AACE,WAAAC;AAAAA;AAAAA;AAAAA,EAGX;AACJ;AAdaF,EACF,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AADPH,IAANI,EAAA;AAAA,EADNC,EAAc,gBAAgB;AAAA,GAClBL,CAAA;;;;;;ACAA,IAAAM,IAAN,cAAwBL,EAAW;AAAA,EAStC,SAAS;AACE,WAAAC;AAAAA,EACX;AACJ;AAZaI,EACF,SAASH;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AADPG,IAANF,EAAA;AAAA,EADNC,EAAc,aAAa;AAAA,GACfC,CAAA;;;;;;ACCA,IAAAC,IAAN,cAAwBN,EAAW;AAAA,EAStC,SAAS;AACE,WAAAC;AAAAA,EACX;AACJ;AAZaK,EACF,SAASJ;AAAAA;AAAAA;AAAAA;AAAAA,uBAIGK,EAAUC,EAAQ,SAAS,CAAC;AAAA;AAAA;AALtCF,IAANH,EAAA;AAAA,EADNC,EAAc,aAAa;AAAA,GACfE,CAAA;;;;;;ACCA,IAAAG,IAAN,cAAwBT,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GASa,KAAA,QAAA;AAAA,EAAA;AAAA,EAEhB,SAAS;AACE,WAAAC,gDAAmD,KAAK,KAAK;AAAA,EACxE;AACJ;AAdaQ,EACF,SAASP;AAAAA;AAAAA;AAAAA,uBAGGK,EAAUC,EAAQ,SAAS,CAAC;AAAA;AAAA;AAK/CL,EAAA;AAAA,EADCO,EAAS,EAAE,MAAM,QAAQ;AAAA,GARjBD,EAST,WAAA,SAAA,CAAA;AATSA,IAANN,EAAA;AAAA,EADNC,EAAc,aAAa;AAAA,GACfK,CAAA;;;;;;ACDA,IAAAE,IAAN,cAAuBX,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GASkB,KAAA,YAAA;AAAA,EAAA;AAAA,EAErB,SAAS;AACE,WAAAC;AAAAA,cACD,KAAK,YAAYW,IAAmB,EAAE;AAAA;AAAA;AAAA,EAGhD;AACJ;AAjBaD,EACF,SAAST;AAAAA;AAAAA;AAAAA,6BAGSK,EAAUM,EAAQ,OAAO,CAAC,UAAUN,EAAUO,EAAO,OAAO,CAAC;AAAA;AAAA;AAKtFX,EAAA;AAAA,EADCO,EAAS,EAAE,MAAM,SAAS;AAAA,GARlBC,EAST,WAAA,aAAA,CAAA;AATSA,IAANR,EAAA;AAAA,EADNC,EAAc,aAAa;AAAA,GACfO,CAAA;AAmBb,MAAMC,IAAmBX;AAAAA;AAAAA;AAAAA,uCAGcM,EAAUQ,EAAO,WAAW,CAAC,IAAIR,EAAUQ,EAAO,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOpER,EAAUO,EAAO,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA,4BAIzBP,EAAUO,EAAO,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA,yBAI5BP,EAAUS,EAAM,gBAAgB,CAAC,IAAIT,EAAUS,EAAM,UAAU,CAAC;AAAA,0BAC/DT,EAAUC,EAAQ,QAAQ,CAAC;AAAA;AAAA;"}

package/components/index.js

@@ -1,18 +1,18 @@
-import "../chunks/alliance-link-8cb7d7d9.js";
-import "../chunks/alliance-modal-1126a4c4.js";
-import "../chunks/alliance-paginator-button-0a0a4fd7.js";
-import "../chunks/alliance-table-row-ec104b1e.js";
-import "../chunks/query-assigned-elements-024d0918.js";
-import "../chunks/repeat-600d2fb9.js";
-import "../chunks/telia-button2-7783c019.js";
+import "./alliance-link.js";
+import "./alliance-modal.js";
+import "./alliance-paginator.js";
+import "./alliance-table.js";
+import "../chunks/query-assigned-elements-ac91685f.js";
+import "../chunks/repeat-34adae9e.js";
+import "../chunks/telia-button-c9ba09a9.js";
 import "../chunks/index-eef143db.js";
-import "../chunks/telia-icon2-d0e7c715.js";
+import "../chunks/telia-icon-d0e7c715.js";
 import "../chunks/getSvgContent-f2389ce0.js";
 import "../chunks/telia-vst2-dfb33a56.js";
-import "../chunks/telia-heading2-38ae44ae.js";
-import "../chunks/index-d925c796.js";
-import "../chunks/close-7d423291.js";
+import "../chunks/telia-heading-38ae44ae.js";
+import "../chunks/index-514c4fef.js";
+import "../chunks/close-ac6e4f1c.js";
 import "../chunks/variables-ecb680f0.js";
-import "../chunks/telia-label2-f4c1eb47.js";
+import "../chunks/telia-label-f4c1eb47.js";
 import "../chunks/chevron-right-788ce8a9.js";
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/alliance-ui",
-  "version": "1.0.12",
+  "version": "1.0.13-next.0",
   "description": "UI components used by ACE Alliance apps.",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "Telia Company AB",
@@ -41,22 +41,22 @@
     }
   },
   "dependencies": {
-    "@teliads/components": "^21.3.1"
+    "@teliads/components": "^22.1.0"
   },
   "devDependencies": {
     "@telia-ace/alliance-internal-client-utilities": "1.0.1",
     "@telia-ace/alliance-internal-node-utilities": "1.0.1",
     "@types/fs-extra": "^11.0.1",
     "fs-extra": "^11.1.1",
-    "lit": "^2.7.4",
-    "vite": "^4.3.5"
+    "lit": "^2.7.6",
+    "vite": "^4.4.6"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "dev": "tsc && vite build --mode development --watch",
-    "build:dev": "tsc && vite build --mode development",
+    "dev": "rimraf chunks voca components && tsc && vite build --mode development --watch",
+    "build:dev": "rimraf chunks voca components && tsc && vite build --mode development",
     "build:prod": "rimraf chunks voca components && tsc && vite build --mode prod",
     "build:test": "rimraf chunks voca components && tsc && vite build --mode test",
     "build:docker": "vite build",

package/voca/components/telia-accordion-item.js

@@ -1,6 +1,6 @@
 import { p as c, H as r, h as i } from "../../chunks/index-eef143db.js";
 import { u as n } from "../../chunks/uniqueId-0daf01ec.js";
-import { d as l } from "../../chunks/telia-icon2-d0e7c715.js";
+import { d as l } from "../../chunks/telia-icon-d0e7c715.js";
 import { d } from "../../chunks/telia-vst2-dfb33a56.js";
 import "../../chunks/getSvgContent-f2389ce0.js";
 const m = { name: "chevron-up", svg: '<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M53.0318 42.1986C52.6256 42.605 52.0745 42.8333 51.4999 42.8333C50.9253 42.8333 50.3742 42.605 49.968 42.1986L31.9999 24.2305L14.0318 42.1986C13.1858 43.0446 11.8141 43.0446 10.968 42.1986C10.122 41.3525 10.122 39.9808 10.968 39.1348L30.468 19.6348C30.8742 19.2283 31.4253 19 31.9999 19C32.5745 19 33.1256 19.2283 33.5318 19.6348L53.0318 39.1348C53.4382 39.541 53.6666 40.092 53.6666 40.6667C53.6666 41.2413 53.4382 41.7924 53.0318 42.1986Z"/></svg>' }, s = `:host{--vds-accordion-item-content-max-width:80ch}.telia-accordion-item{border-bottom:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-accordion-item__header{color:#29003e;background:transparent;border:0;cursor:pointer;display:flex;justify-content:space-between;min-height:calc(4.8rem * var(--voca-rem-multiplier));outline:none;padding:calc(1.6rem * var(--voca-rem-multiplier)) calc(1.6rem * var(--voca-rem-multiplier)) calc(1.6rem * var(--voca-rem-multiplier)) 0;width:100%}@media screen and (min-width: 37.5em){.telia-accordion-item__header{padding:calc(2.4rem * var(--voca-rem-multiplier)) calc(2.4rem * var(--voca-rem-multiplier)) calc(2.4rem * var(--voca-rem-multiplier)) 0}}@media screen and (min-width: 64em){.telia-accordion-item__header{padding:calc(3.2rem * var(--voca-rem-multiplier)) calc(2.4rem * var(--voca-rem-multiplier)) calc(3.2rem * var(--voca-rem-multiplier)) 0}}.telia-accordion-item__header:focus{outline:solid calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;outline-offset:calc(0.2rem * var(--voca-rem-multiplier))}.telia-accordion-item__header:focus:not(:focus-visible){outline:none}.telia-accordion-item__header:hover{color:#5e0092;background-color:#fbf0ff}.telia-accordion-item__header--active{color:#7800b4}.telia-accordion-item__header-title{font-family:"TeliaSans", Helvetica, Arial, "Lucida Grande", sans-serif;font-weight:bold;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:1.25;align-items:center;display:flex;justify-content:space-between;margin:0;text-align:left}@media screen and (min-width: 37.5em){.telia-accordion-item__header-title{font-size:calc(