@telia-ace/alliance-ui 1.0.14 → 1.0.15

package/components/alliance-paginator.js

@@ -1,308 +1,6 @@
-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-6cda07f5.js";
-import { c as L, t as k } from "../chunks/repeat-aaedbe31.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-vst2-dfb33a56.js";
-import "../chunks/getSvgContent-f2389ce0.js";
-const $ = "...", P = (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 P(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 [...P(1, f), $, t];
-  }
-  if (v && !y) {
-    let f = 3 + 2 * i, O = P(t - f + 1, t);
-    return [z, $, ...O];
-  }
-  if (v && y) {
-    let f = P(s, x);
-    return [z, $, ...f, $, T];
-  }
-  return P(1, t);
-}
-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 m = 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>
-        `;
-  }
-};
-m.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" })
-], m.prototype, "currentPage", 2);
-w([
-  l({ type: Number, attribute: "last-page" })
-], m.prototype, "lastPage", 2);
-m = w([
-  S("alliance-page-selector")
-], m);
-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
+import './chunk-LYU2K33W.js';
+import './chunk-JQ76TOQT.js';
+import './chunk-B6YHD7BN.js';
+import './chunk-NB6ODBZJ.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=alliance-paginator.js.map

package/components/alliance-paginator.js.map

@@ -1 +1 @@
-{"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 range(1, totalPageCount);\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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"}
+{"version":3,"sources":[],"names":[],"mappings":""}

package/components/alliance-table.d.ts

@@ -0,0 +1,2 @@
+
+export { }

package/components/alliance-table.js

@@ -1,144 +1,6 @@
-import { i as c, s as p, x as i, e as b, r as n, n as O } from "../chunks/query-assigned-elements-6cda07f5.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";
-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
+import './chunk-XPHFAKEI.js';
+import './chunk-P2AWWJPH.js';
+import './chunk-B6YHD7BN.js';
+import './chunk-NB6ODBZJ.js';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=alliance-table.js.map

package/components/alliance-table.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"sources":[],"names":[],"mappings":""}

package/components/alliance-view.d.ts

@@ -0,0 +1,32 @@
+import { SerializeableObject, Promisable } from '@telia-ace/alliance-internal-client-utilities';
+import { LitElement } from 'lit';
+
+declare const viewElementPrefix = "alliance-view-";
+declare const viewElementSelector = "app-view";
+declare enum ViewElementType {
+    Main = "main",
+    Aside = "aside",
+    Body = "body"
+}
+declare function viewElementTag(appName: string): string;
+type ViewInitProps = {
+    app?: IViewElement['app'];
+    capability?: IViewElement['capability'];
+    id?: IViewElement['id'];
+    args?: IViewElement['args'];
+    type?: IViewElement['type'];
+    complete?: IViewElement['complete'];
+};
+interface IViewElement extends LitElement {
+    init: (props: ViewInitProps) => void;
+    complete: (result: SerializeableObject | null) => void;
+    app: string;
+    capability: string;
+    args: SerializeableObject;
+    mounted: boolean;
+    loading: boolean;
+    type?: ViewElementType;
+}
+declare function registerViewElement(appName: string, onRender: (element: IViewElement) => Promisable<void>): void;
+
+export { IViewElement, ViewElementType, ViewInitProps, registerViewElement, viewElementPrefix, viewElementSelector, viewElementTag };