@telia-ace/alliance-ui 1.0.6-next.4 → 1.0.6

package/CHANGELOG.md

@@ -1,5 +1,85 @@
 # @telia-ace/alliance-ui
 
+## 1.0.6
+
+### Patch Changes
+
+-   fea9df3: Remove `<telia-button-text>` after it was removed in `@teliads/components@19`.
+-   cc604b0: Improvements to `<alliance-modal>`.
+
+    -   Sets `max-width` to same width as [Voca Large breakpoint](https://docs.voca.teliacompany.com/?path=/story/foundations-breakpoints-showcase--showcase) (`1024px` / `64em`).
+    -   Adds scrolling support.
+        ![image](https://i.imgur.com/fz2FD8R.gif)
+    -   Uses `<dialog>` instead of `<div>` for modal window.
+    -   Adds support for `disabled` actions.
+
+-   508cbdc: Fix exports of types.
+-   f196975: Add comment to custom event types. Export ActionEvent from modal.
+-   cc604b0: Relative path support in CSS import vite plugin.
+-   fea9df3: Update dependencies to latest.
+-   1740edd: Fix `<alliance-modal>` having incorrect `z-index`.
+-   f196975: Dispatch `'close'` action when pressing Escape in modal.
+-   50e1c70: Add `<alliance-modal>` component, see the documentation for more information.
+-   c3765fc: BREAKING: Always use objects as detail type for events (https://github.com/telia-company/ace-alliance-sdk/issues/190).
+
+    ### Migration guide for existing apps
+
+    #### Paginator `change-page` event
+
+    ```diff
+    import type { ChangePageEvent } from '@telia-ace/alliance-ui/components/alliance-paginator';
+    let currentPage = 1;
+    function onChangePage (event: ChangePageEvent) {
+    -  currentPage = event.detail;
+    +  currentPage = event.detail.nextPage;
+    }
+    ```
+
+    #### Modal `action` event
+
+    ```diff
+    import type { ActionEvent } from '@telia-ace/alliance-ui/components/alliance-modal';
+    let modalOpen = true;
+    function onModalAction (event: ActionEvent) {
+    -  modalOpen = event.detail === 'close';
+    +  modalOpen = event.detail.action === 'close';
+    }
+    ```
+
+-   f196975: Prefix all environment variables defined by the CLI with `ALLIANCE_` to avoid conflicting with third party packages.
+-   f196975: Correct link to Alliance documentation in README.
+
+## 1.0.6-next.5
+
+### Patch Changes
+
+-   508cbdc: Fix exports of types.
+-   c3765fc: BREAKING: Always use objects as detail type for events (https://github.com/telia-company/ace-alliance-sdk/issues/190).
+
+    ### Migration guide for existing apps
+
+    #### Paginator `change-page` event
+
+    ```diff
+    import type { ChangePageEvent } from '@telia-ace/alliance-ui/components/alliance-paginator';
+    let currentPage = 1;
+    function onChangePage (event: ChangePageEvent) {
+    -  currentPage = event.detail;
+    +  currentPage = event.detail.nextPage;
+    }
+    ```
+
+    #### Modal `action` event
+
+    ```diff
+    import type { ActionEvent } from '@telia-ace/alliance-ui/components/alliance-modal';
+    let modalOpen = true;
+    function onModalAction (event: ActionEvent) {
+    -  modalOpen = event.detail === 'close';
+    +  modalOpen = event.detail.action === 'close';
+    }
+    ```
+
 ## 1.0.6-next.4
 
 ### Patch Changes

package/chunks/alliance-modal-f2ab100c.js

@@ -0,0 +1,154 @@
+import { i as m, r as t, e as g, s as $, y as r, a as v } from "./query-assigned-elements-4285356d.js";
+import { c as y } from "./repeat-bf84f01f.js";
+import "./telia-button2-d25eddda.js";
+import "./telia-heading2-9d3ab48b.js";
+import "./telia-icon2-34bf5aef.js";
+import { l as h, c as b, b as u, s as f, a as w, d as e } from "./index-57f6bd40.js";
+import { c as k } from "./close-7d423291.js";
+var x = Object.defineProperty, C = Object.getOwnPropertyDescriptor, c = (i, a, d, n) => {
+  for (var o = n > 1 ? void 0 : n ? C(a, d) : a, l = i.length - 1, p; l >= 0; l--)
+    (p = i[l]) && (o = (n ? p(a, d, o) : p(o)) || o);
+  return n && o && x(a, d, o), o;
+};
+let s = class extends $ {
+  constructor() {
+    super(...arguments), this.header = "", this.actions = [], this.onBackdropClick = () => this.action("close"), this.onCloseClick = () => this.action("close"), this.onKeyDown = (i) => {
+      i.defaultPrevented || i.key === "Escape" && this.action("close");
+    }, this.action = (i) => {
+      const a = new CustomEvent("action", {
+        bubbles: !0,
+        composed: !0,
+        detail: { action: i },
+        cancelable: !0
+      });
+      return this.dispatchEvent(a);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("keydown", this.onKeyDown);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("keydown", this.onKeyDown), super.disconnectedCallback();
+  }
+  render() {
+    return r`
+            ${this.contain && r`<style>
+                :host {
+                    position: static !important;
+                }
+                .backdrop {
+                    position: absolute !important;
+                }
+            </style>`}
+            <div class="backdrop" @keydown=${console.log} @click=${this.onBackdropClick}></div>
+            <div class="container">
+                <dialog open>
+                    <div class="header">
+                        <telia-heading tag="h3" variant="title-100">${this.header}</telia-heading>
+                        <telia-button size="sm" variant="text" @click=${this.onCloseClick}
+                            ><telia-icon size="md" svg="${k.svg}"
+                        /></telia-button>
+                    </div>
+                    <div class="body">
+                        <slot></slot>
+                    </div>
+                    ${this.actions.length ? r`
+                              <div class="footer">
+                                  ${y(
+      this.actions,
+      (i) => r`
+                                          <telia-button
+                                              disabled="${i.disabled ? "true" : "false"}"
+                                              variant="${i.variant || "primary"}"
+                                              size="md"
+                                              @click=${() => this.action(i.action)}
+                                          >
+                                              ${i.label}
+                                          </telia-button>
+                                      `
+    )}
+                              </div>
+                          ` : ""}
+                </dialog>
+            </div>
+        `;
+  }
+};
+s.styles = m`
+        :host {
+            inset: 0;
+            position: fixed;
+            z-index: ${t(parseInt(h.modal))};
+        }
+
+        .backdrop {
+            inset: 0;
+            position: absolute;
+            z-index: ${t(parseInt(h.modal) - 1)};
+            background-color: ${t(b.black)};
+            opacity: 0.3;
+        }
+
+        .container {
+            margin: 0 auto;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            overflow-x: hidden;
+            overflow-y: overlay;
+            height: 100%;
+            width: 100%;
+        }
+
+        dialog {
+            background-color: ${t(b.white)};
+            border-radius: ${t(u.radiusLg)};
+            box-shadow: ${t(f.md)};
+            z-index: ${t(parseInt(h.modal) + 2)};
+            max-width: ${t(w.breakpointLg)};
+            margin: ${t(e.spacing128)} ${t(e.spacing24)};
+            display: block;
+            position: static;
+            padding: 0;
+            border: none;
+        }
+
+        .header {
+            position: relative;
+            padding: ${t(e.spacing32)};
+            border-bottom: ${t(u.widthXs)} solid ${t(b.gray200)};
+        }
+
+        .header telia-button {
+            position: absolute;
+            top: ${t(e.spacing20)};
+            right: ${t(e.spacing20)};
+        }
+
+        .body {
+            padding: 0 ${t(e.spacing32)};
+            margin: ${t(e.spacing24)} 0;
+            min-width: calc(${t(e.spacing128)} * 2);
+        }
+
+        .footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: ${t(e.spacing24)};
+            padding: 0 ${t(e.spacing32)};
+            margin: ${t(e.spacing24)} 0;
+        }
+    `;
+c([
+  g({ type: String, attribute: "header" })
+], s.prototype, "header", 2);
+c([
+  g({ type: Array })
+], s.prototype, "actions", 2);
+c([
+  g({ type: Boolean, attribute: "contain" })
+], s.prototype, "contain", 2);
+s = c([
+  v("alliance-modal")
+], s);
+//# sourceMappingURL=alliance-modal-f2ab100c.js.map

package/chunks/alliance-modal-f2ab100c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alliance-modal-f2ab100c.js","sources":["../src/components/alliance-modal/alliance-modal.ts"],"sourcesContent":["import type { ButtonVariantType } from '@teliads/components/dist/types/types/ButtonVariant';\nimport { css, html, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\n\nimport '@/voca/components/telia-button';\nimport '@/voca/components/telia-heading';\nimport '@/voca/components/telia-icon';\nimport { borders, breakpoints, colors, layers, shadows, spacing } from '@/voca/foundations';\nimport { close } from '@/voca/icons';\n\nexport type Action = {\n    variant: ButtonVariantType;\n    label: string;\n    action: string;\n    disabled?: boolean;\n};\n\n/**\n * Event dispatched when clicking the close button, the backdrop, an action button or pressing escape.\n *\n * Event: `action`\n *\n * Detail: Object containing the property `action`.\n */\nexport type ActionEvent = CustomEvent<{ action: string }>;\n\n@customElement('alliance-modal')\nexport class Modal extends LitElement {\n    static styles = css`\n        :host {\n            inset: 0;\n            position: fixed;\n            z-index: ${unsafeCSS(parseInt(layers.modal))};\n        }\n\n        .backdrop {\n            inset: 0;\n            position: absolute;\n            z-index: ${unsafeCSS(parseInt(layers.modal) - 1)};\n            background-color: ${unsafeCSS(colors.black)};\n            opacity: 0.3;\n        }\n\n        .container {\n            margin: 0 auto;\n            display: flex;\n            justify-content: center;\n            align-items: flex-start;\n            overflow-x: hidden;\n            overflow-y: overlay;\n            height: 100%;\n            width: 100%;\n        }\n\n        dialog {\n            background-color: ${unsafeCSS(colors.white)};\n            border-radius: ${unsafeCSS(borders.radiusLg)};\n            box-shadow: ${unsafeCSS(shadows.md)};\n            z-index: ${unsafeCSS(parseInt(layers.modal) + 2)};\n            max-width: ${unsafeCSS(breakpoints.breakpointLg)};\n            margin: ${unsafeCSS(spacing.spacing128)} ${unsafeCSS(spacing.spacing24)};\n            display: block;\n            position: static;\n            padding: 0;\n            border: none;\n        }\n\n        .header {\n            position: relative;\n            padding: ${unsafeCSS(spacing.spacing32)};\n            border-bottom: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.gray200)};\n        }\n\n        .header telia-button {\n            position: absolute;\n            top: ${unsafeCSS(spacing.spacing20)};\n            right: ${unsafeCSS(spacing.spacing20)};\n        }\n\n        .body {\n            padding: 0 ${unsafeCSS(spacing.spacing32)};\n            margin: ${unsafeCSS(spacing.spacing24)} 0;\n            min-width: calc(${unsafeCSS(spacing.spacing128)} * 2);\n        }\n\n        .footer {\n            display: flex;\n            justify-content: flex-end;\n            gap: ${unsafeCSS(spacing.spacing24)};\n            padding: 0 ${unsafeCSS(spacing.spacing32)};\n            margin: ${unsafeCSS(spacing.spacing24)} 0;\n        }\n    `;\n\n    @property({ type: String, attribute: 'header' })\n    header: string = '';\n\n    @property({ type: Array })\n    actions: Action[] = [];\n\n    // Internal usage only\n    // Used in Storybook to contain modal in story\n    @property({ type: Boolean, attribute: 'contain' })\n    contain?: boolean;\n\n    onBackdropClick = () => {\n        return this.action('close');\n    };\n\n    onCloseClick = () => {\n        return this.action('close');\n    };\n\n    onKeyDown = (event: KeyboardEvent) => {\n        if (event.defaultPrevented) {\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            this.action('close');\n        }\n    };\n\n    connectedCallback() {\n        super.connectedCallback();\n        window.addEventListener('keydown', this.onKeyDown);\n    }\n    disconnectedCallback() {\n        window.removeEventListener('keydown', this.onKeyDown);\n        super.disconnectedCallback();\n    }\n\n    action = (action: string) => {\n        const event: ActionEvent = new CustomEvent('action', {\n            bubbles: true,\n            composed: true,\n            detail: { action },\n            cancelable: true,\n        });\n        return this.dispatchEvent(event);\n    };\n\n    render() {\n        return html`\n            ${this.contain &&\n            html`<style>\n                :host {\n                    position: static !important;\n                }\n                .backdrop {\n                    position: absolute !important;\n                }\n            </style>`}\n            <div class=\"backdrop\" @keydown=${console.log} @click=${this.onBackdropClick}></div>\n            <div class=\"container\">\n                <dialog open>\n                    <div class=\"header\">\n                        <telia-heading tag=\"h3\" variant=\"title-100\">${this.header}</telia-heading>\n                        <telia-button size=\"sm\" variant=\"text\" @click=${this.onCloseClick}\n                            ><telia-icon size=\"md\" svg=\"${close.svg}\"\n                        /></telia-button>\n                    </div>\n                    <div class=\"body\">\n                        <slot></slot>\n                    </div>\n                    ${this.actions.length\n                        ? html`\n                              <div class=\"footer\">\n                                  ${repeat(\n                                      this.actions,\n                                      (action) => html`\n                                          <telia-button\n                                              disabled=\"${action.disabled ? 'true' : 'false'}\"\n                                              variant=\"${action.variant || 'primary'}\"\n                                              size=\"md\"\n                                              @click=${() => this.action(action.action)}\n                                          >\n                                              ${action.label}\n                                          </telia-button>\n                                      `\n                                  )}\n                              </div>\n                          `\n                        : ''}\n                </dialog>\n            </div>\n        `;\n    }\n}\n"],"names":["Modal","LitElement","event","action","html","close","repeat","css","unsafeCSS","layers","colors","borders","shadows","breakpoints","spacing","__decorateClass","property","customElement"],"mappings":"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"}

package/chunks/alliance-paginator-button-83c050bc.js

@@ -0,0 +1,181 @@
+import "./telia-button2-d25eddda.js";
+import "./telia-label2-4d674e5e.js";
+import { d as x, c as D } from "./index-57f6bd40.js";
+import { e as s, i as R, r as $, s as S, y as g, a as _ } from "./query-assigned-elements-4285356d.js";
+import { c as I } from "./repeat-bf84f01f.js";
+import "./telia-icon2-34bf5aef.js";
+import { c as N, a as j } from "./chevron-right-788ce8a9.js";
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function z(t) {
+  return s({ ...t, state: !0 });
+}
+const b = "...", f = (t, a) => {
+  let i = a - t + 1;
+  return Array.from({ length: i }, (r, e) => e + t);
+}, m = ({ itemCount: t, pageSize: a, siblingCount: i, currentPage: r }) => {
+  const e = Math.ceil(t / a);
+  if (i + 5 >= e)
+    return f(1, e);
+  const n = Math.max(r - i, 1), v = Math.min(r + i, e), d = n > 2, P = v < e - 2, y = 1, w = e;
+  if (!d && P) {
+    let h = 3 + 2 * i;
+    return [...f(1, h), b, e];
+  }
+  if (d && !P) {
+    let h = 3 + 2 * i, C = f(e - h + 1, e);
+    return [y, b, ...C];
+  }
+  if (d && P) {
+    let h = f(n, v);
+    return [y, b, ...h, b, w];
+  }
+  return [];
+};
+var B = Object.defineProperty, L = Object.getOwnPropertyDescriptor, p = (t, a, i, r) => {
+  for (var e = r > 1 ? void 0 : r ? L(a, i) : a, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (e = (r ? n(a, i, e) : n(e)) || e);
+  return r && e && B(a, i, e), e;
+};
+let o = class extends S {
+  constructor() {
+    super(...arguments), this.itemCount = 0, this.pageSize = 50, this.initialPage = 1, this.siblingCount = 2, this.currentPage = this.initialPage, this.pages = [], this.changePage = (t) => {
+      if (t === this.currentPage || // Next page is the same
+      t < 1 || // Next page is 0
+      t > this.pages[this.pages.length - 1])
+        return;
+      const a = new CustomEvent("change-page", {
+        bubbles: !0,
+        composed: !0,
+        detail: { nextPage: t, previousPage: this.currentPage },
+        cancelable: !0
+      });
+      this.dispatchEvent(a) && (this.currentPage = t, this.pages = m({
+        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);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.currentPage = this.initialPage, this.pages = m({
+      itemCount: this.itemCount,
+      pageSize: this.pageSize,
+      siblingCount: this.siblingCount,
+      currentPage: this.currentPage
+    });
+  }
+  attributeChangedCallback(t, a, i) {
+    super.attributeChangedCallback(t, a, i), t === "initial-page" && (this.currentPage = this.initialPage), this.pages = m({
+      itemCount: this.itemCount,
+      pageSize: this.pageSize,
+      siblingCount: this.siblingCount,
+      currentPage: this.currentPage,
+      [t]: i
+    });
+  }
+  render() {
+    return g`
+            <alliance-paginator-button
+                @click=${this.previous}
+                ?disabled=${this.currentPage === 1}
+                icon="left"
+            ></alliance-paginator-button>
+
+            ${I(
+      this.pages,
+      (t) => t === "..." ? g`<telia-label>...</telia-label>` : g`<alliance-paginator-button
+                          page=${t}
+                          @click=${() => this.changePage(t)}
+                          ?selected=${this.currentPage === t}
+                      ></alliance-paginator-button>`
+    )}
+
+            <alliance-paginator-button
+                @click=${this.next}
+                ?disabled=${this.currentPage === this.pages[this.pages.length - 1]}
+                icon="right"
+            ></alliance-paginator-button>
+        `;
+  }
+};
+o.styles = R`
+        :host {
+            display: flex;
+            flex-direction: row;
+            place-items: center;
+            gap: ${$(x.spacing8)};
+        }
+
+        :host .telia-label {
+            color: ${$(D.purple700)};
+        }
+
+        span {
+            display: block;
+        }
+    `;
+p([
+  s({ type: Number, attribute: "item-count" })
+], o.prototype, "itemCount", 2);
+p([
+  s({ type: Number, attribute: "page-size" })
+], o.prototype, "pageSize", 2);
+p([
+  s({ type: Number, attribute: "initial-page" })
+], o.prototype, "initialPage", 2);
+p([
+  s({ type: Number, attribute: "sibling-count" })
+], o.prototype, "siblingCount", 2);
+p([
+  z()
+], o.prototype, "currentPage", 2);
+p([
+  z()
+], o.prototype, "pages", 2);
+o = p([
+  _("alliance-paginator")
+], o);
+var M = Object.defineProperty, E = Object.getOwnPropertyDescriptor, u = (t, a, i, r) => {
+  for (var e = r > 1 ? void 0 : r ? E(a, i) : a, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (e = (r ? n(a, i, e) : n(e)) || e);
+  return r && e && M(a, i, e), e;
+}, O = /* @__PURE__ */ ((t) => (t.Left = "left", t.Right = "right", t))(O || {});
+let c = class extends S {
+  constructor() {
+    super(...arguments), this.selected = !1, this.disabled = !1, this.clickable = !0;
+  }
+  renderContent() {
+    return this.icon === "left" ? g`<telia-icon size="sm" svg="${N.svg}" />` : this.icon === "right" ? g`<telia-icon size="sm" svg="${j.svg}" />` : g`<span>${this.page}</span>`;
+  }
+  render() {
+    return g`<telia-button ?disabled=${this.disabled} variant=${this.selected ? "primary" : "tertiary-purple"}>${this.renderContent()}</telia-button> `;
+  }
+};
+u([
+  s({ type: O })
+], c.prototype, "icon", 2);
+u([
+  s({ type: String })
+], c.prototype, "page", 2);
+u([
+  s({ type: Boolean })
+], c.prototype, "selected", 2);
+u([
+  s({ type: Boolean })
+], c.prototype, "disabled", 2);
+u([
+  s({ type: Boolean })
+], c.prototype, "clickable", 2);
+c = u([
+  _("alliance-paginator-button")
+], c);
+//# sourceMappingURL=alliance-paginator-button-83c050bc.js.map

package/chunks/alliance-paginator-button-83c050bc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alliance-paginator-button-83c050bc.js","sources":["../../../node_modules/.pnpm/@lit+reactive-element@1.6.1/node_modules/@lit/reactive-element/decorators/state.js","../src/components/alliance-paginator/get-pagination.ts","../src/components/alliance-paginator/alliance-paginator.ts","../src/components/alliance-paginator/alliance-paginator-button.ts"],"sourcesContent":["import{property as r}from\"./property.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function t(t){return r({...t,state:!0})}export{t as state};\n//# sourceMappingURL=state.js.map\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    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 default ({ itemCount, pageSize, siblingCount, currentPage }: Args): (number | '...')[] => {\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 '@/voca/components/telia-label';\nimport { 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 getPagination from './get-pagination';\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            color: ${unsafeCSS(colors.purple700)};\n        }\n\n        span {\n            display: block;\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: (number | '...')[] = [];\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] // 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    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-paginator-button\n                @click=${this.next}\n                ?disabled=${this.currentPage === this.pages[this.pages.length - 1]}\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":["t","r","DOTS","range","start","end","length","_","idx","getPagination","itemCount","pageSize","siblingCount","currentPage","totalPageCount","leftSiblingIndex","rightSiblingIndex","shouldShowLeftDots","shouldShowRightDots","firstPageIndex","lastPageIndex","leftItemCount","rightItemCount","rightRange","middleRange","Paginator","LitElement","nextPage","event","name","value","html","repeat","pageNumber","css","unsafeCSS","spacing","colors","__decorateClass","property","state","customElement","Icon","PaginatorButton","chevronLeft","chevronRight"],"mappings":"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"}

package/chunks/alliance-table-row-67a6becb.js

@@ -0,0 +1,142 @@
+import { i as c, s as p, y as i, a as b, r as n, e as O } from "./query-assigned-elements-4285356d.js";
+import { d as $, b as m, c as u, m as g } from "./index-57f6bd40.js";
+import "./telia-heading2-9d3ab48b.js";
+import { f as y } from "./variables-ecb680f0.js";
+var D = Object.defineProperty, j = Object.getOwnPropertyDescriptor, C = (a, r, s, l) => {
+  for (var e = l > 1 ? void 0 : l ? j(r, s) : r, t = a.length - 1, o; t >= 0; t--)
+    (o = a[t]) && (e = (l ? o(r, s, e) : o(e)) || e);
+  return l && e && D(r, s, 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 = C([
+  b("alliance-table")
+], d);
+var x = Object.defineProperty, T = Object.getOwnPropertyDescriptor, B = (a, r, s, l) => {
+  for (var e = l > 1 ? void 0 : l ? T(r, s) : r, t = a.length - 1, o; t >= 0; t--)
+    (o = a[t]) && (e = (l ? o(r, s, e) : o(e)) || e);
+  return l && e && x(r, s, 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, s, l) => {
+  for (var e = l > 1 ? void 0 : l ? H(r, s) : r, t = a.length - 1, o; t >= 0; t--)
+    (o = a[t]) && (e = (l ? o(r, s, e) : o(e)) || e);
+  return l && e && S(r, s, 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, s, l) => {
+  for (var e = l > 1 ? void 0 : l ? W(r, s) : r, t = a.length - 1, o; t >= 0; t--)
+    (o = a[t]) && (e = (l ? o(r, s, e) : o(e)) || e);
+  return l && e && R(r, s, 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, w = (a, r, s, l) => {
+  for (var e = l > 1 ? void 0 : l ? q(r, s) : r, t = a.length - 1, o; t >= 0; t--)
+    (o = a[t]) && (e = (l ? o(r, s, e) : o(e)) || e);
+  return l && e && X(r, s, 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(m.widthXs)} solid ${n(u.gray200)};
+        }
+    `;
+w([
+  O({ type: Boolean })
+], v.prototype, "clickable", 2);
+v = w([
+  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-row-67a6becb.js.map

package/chunks/alliance-table-row-67a6becb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alliance-table-row-67a6becb.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;AAAA;AAAA;AALrCF,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;AACL,WAAOC,gDAAmD,KAAK;AAAA,EACnE;AACJ;AAdaQ,EACF,SAASP;AAAAA;AAAAA;AAAAA,uBAGGK,EAAUC,EAAQ,SAAS;AAAA;AAAA;AAK9CL,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;AAAA;AAAA;AAAA,EAG9C;AACJ;AAjBaD,EACF,SAAST;AAAAA;AAAAA;AAAAA,6BAGSK,EAAUM,EAAQ,OAAO,WAAWN,EAAUO,EAAO,OAAO;AAAA;AAAA;AAKrFX,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,KAAKR,EAAUQ,EAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOnER,EAAUO,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA,4BAIxBP,EAAUO,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA,yBAI3BP,EAAUS,EAAM,gBAAgB,KAAKT,EAAUS,EAAM,UAAU;AAAA,0BAC9DT,EAAUC,EAAQ,QAAQ;AAAA;AAAA;"}

package/chunks/{close-cf3fd2c4.js → chevron-right-788ce8a9.js}

@@ -1,7 +1,6 @@
-const e = { name: "chevron-left", svg: '<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M42.1162 49.8902C42.6915 50.4081 42.9468 51.1934 42.786 51.9505C42.6252 52.7076 42.0727 53.3214 41.3366 53.5607C40.6005 53.8 39.7927 53.6284 39.2174 53.1106L17.5508 33.6106C17.0942 33.1999 16.8335 32.6146 16.8335 32.0004C16.8335 31.3863 17.0942 30.801 17.5508 30.3902L39.2174 10.8902C40.1067 10.0898 41.4766 10.1618 42.277 11.0511C43.0775 11.9403 43.0055 13.3102 42.1162 14.1106L22.2385 32.0004L42.1162 49.8902Z"/></svg>' }, l = { name: "chevron-right", svg: '<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M47.1663 32.0005C47.1667 32.6147 46.9059 33.2001 46.449 33.6106L24.7824 53.1106C23.8931 53.9111 22.5233 53.8391 21.7228 52.9498C20.9223 52.0606 20.9943 50.6907 21.8836 49.8903L41.7613 32.0005L21.8836 14.1106C21.3083 13.5928 21.053 12.8075 21.2138 12.0503C21.3746 11.2932 21.9271 10.6794 22.6632 10.4402C23.3993 10.2009 24.2071 10.3724 24.7824 10.8903L46.449 30.3903C46.9059 30.8008 47.1667 31.3862 47.1663 32.0005Z"/></svg>' }, o = { name: "close", svg: '<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M51.365 48.3012C51.9123 48.8485 52.1261 49.6462 51.9258 50.3939C51.7254 51.1415 51.1415 51.7254 50.3939 51.9258C49.6462 52.1261 48.8485 51.9123 48.3012 51.365L32.4998 35.5636L16.6984 51.365C16.1511 51.9123 15.3534 52.1261 14.6058 51.9258C13.8581 51.7254 13.2742 51.1415 13.0739 50.3939C12.8735 49.6462 13.0873 48.8485 13.6346 48.3012L29.436 32.4998L13.6346 16.6984C13.0873 16.1511 12.8735 15.3534 13.0739 14.6058C13.2742 13.8581 13.8581 13.2742 14.6058 13.0739C15.3534 12.8735 16.1511 13.0873 16.6984 13.6346L32.4998 29.436L48.3012 13.6346C49.1473 12.7885 50.519 12.7885 51.365 13.6346C52.2111 14.4806 52.2111 15.8523 51.365 16.6984L35.5636 32.4998L51.365 48.3012Z"/></svg>' };
+const e = { name: "chevron-left", svg: '<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M42.1162 49.8902C42.6915 50.4081 42.9468 51.1934 42.786 51.9505C42.6252 52.7076 42.0727 53.3214 41.3366 53.5607C40.6005 53.8 39.7927 53.6284 39.2174 53.1106L17.5508 33.6106C17.0942 33.1999 16.8335 32.6146 16.8335 32.0004C16.8335 31.3863 17.0942 30.801 17.5508 30.3902L39.2174 10.8902C40.1067 10.0898 41.4766 10.1618 42.277 11.0511C43.0775 11.9403 43.0055 13.3102 42.1162 14.1106L22.2385 32.0004L42.1162 49.8902Z"/></svg>' }, l = { name: "chevron-right", svg: '<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M47.1663 32.0005C47.1667 32.6147 46.9059 33.2001 46.449 33.6106L24.7824 53.1106C23.8931 53.9111 22.5233 53.8391 21.7228 52.9498C20.9223 52.0606 20.9943 50.6907 21.8836 49.8903L41.7613 32.0005L21.8836 14.1106C21.3083 13.5928 21.053 12.8075 21.2138 12.0503C21.3746 11.2932 21.9271 10.6794 22.6632 10.4402C23.3993 10.2009 24.2071 10.3724 24.7824 10.8903L46.449 30.3903C46.9059 30.8008 47.1667 31.3862 47.1663 32.0005Z"/></svg>' };
 export {
-  e as a,
-  l as b,
-  o as c
+  l as a,
+  e as c
 };
-//# sourceMappingURL=close-cf3fd2c4.js.map
+//# sourceMappingURL=chevron-right-788ce8a9.js.map

package/chunks/chevron-right-788ce8a9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chevron-right-788ce8a9.js","sources":["../../../node_modules/.pnpm/@teliads+components@19.0.0/node_modules/@teliads/components/icons/main/assets/chevron-left.js","../../../node_modules/.pnpm/@teliads+components@19.0.0/node_modules/@teliads/components/icons/main/assets/chevron-right.js"],"sourcesContent":["export default { \"name\": \"chevron-left\", \"svg\": \"<svg viewBox=\\\"0 0 64 64\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"currentColor\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M42.1162 49.8902C42.6915 50.4081 42.9468 51.1934 42.786 51.9505C42.6252 52.7076 42.0727 53.3214 41.3366 53.5607C40.6005 53.8 39.7927 53.6284 39.2174 53.1106L17.5508 33.6106C17.0942 33.1999 16.8335 32.6146 16.8335 32.0004C16.8335 31.3863 17.0942 30.801 17.5508 30.3902L39.2174 10.8902C40.1067 10.0898 41.4766 10.1618 42.277 11.0511C43.0775 11.9403 43.0055 13.3102 42.1162 14.1106L22.2385 32.0004L42.1162 49.8902Z\\\"/></svg>\" };\n","export default { \"name\": \"chevron-right\", \"svg\": \"<svg viewBox=\\\"0 0 64 64\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" fill=\\\"currentColor\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M47.1663 32.0005C47.1667 32.6147 46.9059 33.2001 46.449 33.6106L24.7824 53.1106C23.8931 53.9111 22.5233 53.8391 21.7228 52.9498C20.9223 52.0606 20.9943 50.6907 21.8836 49.8903L41.7613 32.0005L21.8836 14.1106C21.3083 13.5928 21.053 12.8075 21.2138 12.0503C21.3746 11.2932 21.9271 10.6794 22.6632 10.4402C23.3993 10.2009 24.2071 10.3724 24.7824 10.8903L46.449 30.3903C46.9059 30.8008 47.1667 31.3862 47.1663 32.0005Z\\\"/></svg>\" };\n"],"names":["chevronLeft","chevronRight"],"mappings":"AAAA,MAAeA,IAAA,EAAE,MAAQ,gBAAgB,KAAO,wiBAAqjB,GCAtlBC,IAAA,EAAE,MAAQ,iBAAiB,KAAO,2iBAAwjB;"}

package/chunks/close-7d423291.js

@@ -0,0 +1,5 @@
+const e = { name: "close", svg: '<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M51.365 48.3012C51.9123 48.8485 52.1261 49.6462 51.9258 50.3939C51.7254 51.1415 51.1415 51.7254 50.3939 51.9258C49.6462 52.1261 48.8485 51.9123 48.3012 51.365L32.4998 35.5636L16.6984 51.365C16.1511 51.9123 15.3534 52.1261 14.6058 51.9258C13.8581 51.7254 13.2742 51.1415 13.0739 50.3939C12.8735 49.6462 13.0873 48.8485 13.6346 48.3012L29.436 32.4998L13.6346 16.6984C13.0873 16.1511 12.8735 15.3534 13.0739 14.6058C13.2742 13.8581 13.8581 13.2742 14.6058 13.0739C15.3534 12.8735 16.1511 13.0873 16.6984 13.6346L32.4998 29.436L48.3012 13.6346C49.1473 12.7885 50.519 12.7885 51.365 13.6346C52.2111 14.4806 52.2111 15.8523 51.365 16.6984L35.5636 32.4998L51.365 48.3012Z"/></svg>' };
+export {
+  e as c
+};
+//# sourceMappingURL=close-7d423291.js.map