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

package/components/chunk-B6YHD7BN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/voca/foundations/index.ts"],"names":["borders","breakpoints","colors","grid","layers","motion","shadows","spacing","typography","focus"],"mappings":";AAAA,SACIA,SACAC,aACAC,QACAC,MACAC,QACAC,QACAC,SACAC,SACAC,kBACG;AACP,OAAOC,WAAW","sourcesContent":["import {\n    borders,\n    breakpoints,\n    colors,\n    grid,\n    layers,\n    motion,\n    shadows,\n    spacing,\n    typography,\n} from '@teliads/components/foundations';\nimport focus from '@teliads/components/foundations/focus/variables.json';\n\nexport { borders, breakpoints, colors, grid, layers, motion, shadows, spacing, typography, focus };\n\nexport const addCssVariables = () => {\n    const styleId = 'voca-foundations-style-tag';\n    const existing = document.getElementById(styleId);\n    const element = document.createElement('style');\n    element.id = styleId;\n\n    const variables: Record<string, string> = {\n        '--font-telia-heading':\n            'TeliaSansHeading, TeliaSans, HelveticaNeue, Helvetica, Arial, sans-serif',\n        '--font-telia-sans': 'TeliaSans, Helvetica, Arial, Lucida Grande, sans-serif',\n        '--font-normal': typography.weightNormal,\n        '--font-medium': typography.weightMedium,\n        '--font-bold': typography.weightBold,\n\n        '--spacing-0': spacing.spacing0,\n        '--spacing-2': spacing.spacing2,\n        '--spacing-4': spacing.spacing4,\n        '--spacing-8': spacing.spacing8,\n        '--spacing-12': spacing.spacing12,\n        '--spacing-16': spacing.spacing16,\n        '--spacing-20': spacing.spacing20,\n        '--spacing-24': spacing.spacing24,\n        '--spacing-32': spacing.spacing32,\n        '--spacing-48': spacing.spacing48,\n        '--spacing-64': spacing.spacing64,\n        '--spacing-80': spacing.spacing80,\n        '--spacing-96': spacing.spacing96,\n        '--spacing-128': spacing.spacing128,\n\n        '--box-shadow-none': shadows.none,\n        '--box-shadow-sm': shadows.sm,\n        '--box-shadow-md': shadows.md,\n        '--box-shadow-lg': shadows.lg,\n\n        '--duration-50': motion.duration50,\n        '--duration-100': motion.duration100,\n        '--duration-150': motion.duration150,\n        '--duration-200': motion.duration200,\n        '--duration-250': motion.duration250,\n        '--duration-300': motion.duration300,\n        '--duration-350': motion.duration350,\n        '--duration-400': motion.duration400,\n        '--duration-500': motion.duration500,\n        '--duration-1500': motion.duration1500,\n        '--duration-2000': motion.duration2000,\n\n        '--timing-ease-in': motion.easeIn,\n        '--timing-ease-out': motion.easeOut,\n        '--timing-ease-in-out': motion.easeInOut,\n\n        '--layer-base': layers.base,\n        '--layer-dropdown': layers.dropdown,\n        '--layer-header': layers.header,\n        '--layer-modal': layers.modal,\n\n        '--border-width-none': borders.widthNone,\n        '--border-width-xs': borders.widthXs,\n        '--border-width-sm': borders.widthSm,\n        '--border-width-md': borders.widthMd,\n\n        '--border-radius-none': borders.radiusNone,\n        '--border-radius-default': borders.radiusDefault,\n        '--border-radius-sm': borders.radiusSm,\n        '--border-radius-lg': borders.radiusLg,\n        '--border-radius-full': borders.radiusFull,\n\n        '--screen-size-sm': breakpoints.breakpointSm,\n        '--screen-size-md': breakpoints.breakpointMd,\n        '--screen-size-lg': breakpoints.breakpointLg,\n        '--screen-size-xl': breakpoints.breakpointXl,\n\n        '--purple-100': colors.purple100,\n        '--purple-200': colors.purple200,\n        '--purple-300': colors.purple300,\n        '--purple-400': colors.purple400,\n        '--purple-500': colors.purple500,\n        '--purple-600': colors.purple600,\n        '--purple-700': colors.purple700,\n        '--purple-800': colors.purple800,\n        '--purple-850': colors.purple850,\n        '--purple-900': colors.purple900,\n\n        '--beige-50': colors.beige50,\n        '--beige-100': colors.beige100,\n        '--beige-200': colors.beige200,\n        '--beige-300': colors.beige300,\n        '--beige-400': colors.beige400,\n        '--beige-500': colors.beige500,\n        '--beige-600': colors.beige600,\n        '--beige-700': colors.beige700,\n        '--beige-800': colors.beige800,\n        '--beige-900': colors.beige900,\n\n        '--gray-50': colors.gray50,\n        '--gray-100': colors.gray100,\n        '--gray-200': colors.gray200,\n        '--gray-300': colors.gray300,\n        '--gray-400': colors.gray400,\n        '--gray-500': colors.gray500,\n        '--gray-600': colors.gray600,\n        '--gray-700': colors.gray700,\n        '--gray-800': colors.gray800,\n        '--gray-900': colors.gray900,\n\n        '--green-100': colors.green100,\n        '--green-200': colors.green200,\n        '--green-300': colors.green300,\n        '--green-400': colors.green400,\n        '--green-500': colors.green500,\n        '--green-600': colors.green600,\n        '--green-700': colors.green700,\n        '--green-800': colors.green800,\n        '--green-900': colors.green900,\n\n        '--red-100': colors.red100,\n        '--red-200': colors.red200,\n        '--red-300': colors.red300,\n        '--red-400': colors.red400,\n        '--red-500': colors.red500,\n        '--red-600': colors.red600,\n        '--red-700': colors.red700,\n        '--red-800': colors.red800,\n        '--red-900': colors.red900,\n\n        '--orange-100': colors.orange100,\n        '--orange-200': colors.orange200,\n        '--orange-300': colors.orange300,\n        '--orange-400': colors.orange400,\n        '--orange-500': colors.orange500,\n        '--orange-600': colors.orange600,\n        '--orange-700': colors.orange700,\n        '--orange-800': colors.orange800,\n        '--orange-900': colors.orange900,\n\n        '--blue-100': colors.blue100,\n        '--blue-200': colors.blue200,\n        '--blue-300': colors.blue300,\n        '--blue-400': colors.blue400,\n        '--blue-500': colors.blue500,\n        '--blue-600': colors.blue600,\n        '--blue-700': colors.blue700,\n        '--blue-800': colors.blue800,\n        '--blue-900': colors.blue900,\n\n        '--white': colors.white,\n        '--black': colors.black,\n        '--functional-black': colors.functionalBlack,\n\n        /* DEPRECATED */\n        '--grid-gutter': grid.gutter,\n        '--grid-gutter-medium': grid.gutterMedium,\n        '--grid-gutter-large': grid.gutterLarge,\n        '--grid-page-padding': grid.pagePadding,\n        '--grid-page-padding-m': grid.pagePaddingM,\n        '--grid-page-padding-l': grid.pagePaddingL,\n\n        '--grid-gutter-sm': grid.gutter,\n        '--grid-gutter-md': grid.gutterMedium,\n        '--grid-gutter-lg': grid.gutterLarge,\n        '--grid-page-padding-sm': grid.pagePadding,\n        '--grid-page-padding-md': grid.pagePaddingM,\n        '--grid-page-padding-lg': grid.pagePaddingL,\n        '--grid-page-padding-xl': grid.pagePaddingXl,\n\n        // The following are not available in JS variables for some reason\n        '--functional-transparent': 'transparent',\n        '--transparent-black-50': 'rgba(0, 0, 0, 0.05)',\n        '--transparent-black-100': 'rgba(0, 0, 0, 0.1)',\n        '--transparent-black-200': 'rgba(0, 0, 0, 0.2)',\n        '--transparent-black-300': 'rgba(0, 0, 0, 0.3)',\n        '--transparent-black-400': 'rgba(0, 0, 0, 0.4)',\n        '--transparent-black-500': 'rgba(0, 0, 0, 0.5)',\n        '--transparent-black-600': 'rgba(0, 0, 0, 0.6)',\n        '--transparent-black-700': 'rgba(0, 0, 0, 0.7)',\n        '--transparent-black-800': 'rgba(0, 0, 0, 0.8)',\n        '--transparent-black-850': 'rgba(0, 0, 0, 0.85)',\n        '--transparent-black-900': 'rgba(0, 0, 0, 0.9)',\n        '--transparent-white-50': 'rgba(0, 0, 0, 0.05)',\n        '--transparent-white-100': 'rgba(0, 0, 0, 0.1)',\n        '--transparent-white-200': 'rgba(0, 0, 0, 0.2)',\n        '--transparent-white-300': 'rgba(0, 0, 0, 0.3)',\n        '--transparent-white-400': 'rgba(0, 0, 0, 0.4)',\n        '--transparent-white-500': 'rgba(0, 0, 0, 0.5)',\n        '--transparent-white-600': 'rgba(0, 0, 0, 0.6)',\n        '--transparent-white-700': 'rgba(0, 0, 0, 0.7)',\n        '--transparent-white-800': 'rgba(0, 0, 0, 0.8)',\n        '--transparent-white-850': 'rgba(0, 0, 0, 0.85)',\n        '--transparent-white-900': 'rgba(0, 0, 0, 0.9)',\n\n        '--focus-border': `${focus.focusBorderWidth} solid ${focus.focusColor}`,\n    };\n\n    const variableString = Object.keys(variables)\n        .map((key) => `${key}:${variables[key]};`)\n        .join('');\n\n    element.innerHTML = `\n        :root {\n            ${variableString}\n        }\n    `;\n\n    if (existing) {\n        document.head.replaceChild(element, existing);\n        return;\n    }\n    return document.head.append(element);\n};\n"]}

package/components/chunk-JQ76TOQT.js

@@ -0,0 +1,4 @@
+import '@teliads/components/dist/components/telia-button';
+import '@teliads/components/dist/components/telia-icon';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-JQ76TOQT.js.map

package/components/chunk-JQ76TOQT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/voca/components/telia-button.ts","../src/voca/components/telia-icon.ts"],"names":[],"mappings":";AACA,OAAO;;;ACAP,OAAO","sourcesContent":["// This file is generated - see scripts/map-voca-components.js\nimport '@teliads/components/dist/components/telia-button';\n","// This file is generated - see scripts/map-voca-components.js\nimport '@teliads/components/dist/components/telia-icon';\n"]}

package/components/chunk-LYU2K33W.js

@@ -0,0 +1,464 @@
+import { spacing, borders, colors, motion, focus, breakpoints } from './chunk-B6YHD7BN.js';
+import { __name, define } from './chunk-NB6ODBZJ.js';
+import { LitElement, css, unsafeCSS, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import '@teliads/components/dist/components/telia-label';
+import { chevronLeft, chevronRight } from '@teliads/components/icons';
+
+// src/components/alliance-paginator/utils.ts
+var DOTS = "...";
+var range = /* @__PURE__ */ __name((start, end) => {
+  const length = end - start + 1;
+  return Array.from({
+    length
+  }, (_, idx) => idx + start);
+}, "range");
+function getLastPage(pages) {
+  return pages[pages.length - 1];
+}
+__name(getLastPage, "getLastPage");
+function listPages(lastPage) {
+  return Array.from({
+    length: lastPage
+  }, (_, i) => {
+    return pageToSelectValue(i + 1, lastPage);
+  });
+}
+__name(listPages, "listPages");
+function pageToSelectValue(page, lastPage) {
+  return `${page} / ${lastPage}`;
+}
+__name(pageToSelectValue, "pageToSelectValue");
+function selectValueToPage(selectValue) {
+  const value = selectValue.split("/")[0];
+  if (typeof value !== "string") {
+    throw new Error("Could not parse page value from select.");
+  }
+  return parseInt(value);
+}
+__name(selectValueToPage, "selectValueToPage");
+function getPagination({ itemCount, pageSize, siblingCount, currentPage }) {
+  const totalPageCount = Math.ceil(itemCount / pageSize);
+  const totalPageNumbers = siblingCount + 5;
+  if (totalPageNumbers >= totalPageCount) {
+    return range(1, totalPageCount);
+  }
+  const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+  const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPageCount);
+  const shouldShowLeftDots = leftSiblingIndex > 2;
+  const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
+  const firstPageIndex = 1;
+  const lastPageIndex = totalPageCount;
+  if (!shouldShowLeftDots && shouldShowRightDots) {
+    const leftItemCount = 3 + 2 * siblingCount;
+    const leftRange = range(1, leftItemCount);
+    return [
+      ...leftRange,
+      DOTS,
+      totalPageCount
+    ];
+  }
+  if (shouldShowLeftDots && !shouldShowRightDots) {
+    const rightItemCount = 3 + 2 * siblingCount;
+    const rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
+    return [
+      firstPageIndex,
+      DOTS,
+      ...rightRange
+    ];
+  }
+  if (shouldShowLeftDots && shouldShowRightDots) {
+    const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+    return [
+      firstPageIndex,
+      DOTS,
+      ...middleRange,
+      DOTS,
+      lastPageIndex
+    ];
+  }
+  return range(1, totalPageCount);
+}
+__name(getPagination, "getPagination");
+
+// src/components/alliance-paginator/alliance-page-selector.ts
+function _ts_decorate(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate, "_ts_decorate");
+function _ts_metadata(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+    return Reflect.metadata(k, v);
+}
+__name(_ts_metadata, "_ts_metadata");
+var PageSelect = class extends LitElement {
+  static {
+    __name(this, "PageSelect");
+  }
+  constructor() {
+    super();
+    this.currentPage = 0;
+    this.lastPage = 0;
+  }
+  static styles = css`
+        :host select {
+            padding: ${unsafeCSS(spacing.spacing16)} ${unsafeCSS(spacing.spacing24)};
+            border-radius: ${unsafeCSS(borders.radiusFull)};
+            border: ${unsafeCSS(borders.widthXs)} solid ${unsafeCSS(colors.purple850)};
+            background-color: transparent;
+            color: ${unsafeCSS(colors.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: ${unsafeCSS(spacing.spacing16)};
+            line-height: ${unsafeCSS(spacing.spacing16)};
+            transition:
+                color ${unsafeCSS(motion.duration150)} ease,
+                background-color ${unsafeCSS(motion.duration150)} ease;
+
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            outline: none;
+        }
+
+        :host select:hover {
+            background-color: ${unsafeCSS(colors.purple850)};
+            color: ${unsafeCSS(colors.white)};
+        }
+
+        :host select:active {
+            background-color: ${unsafeCSS(colors.purple700)};
+        }
+
+        :host select option {
+            background-color: ${unsafeCSS(colors.white)};
+            color: ${unsafeCSS(colors.black)};
+            text-align: center;
+        }
+
+        :host select::-ms-expand {
+            display: none;
+        }
+
+        :host select:focus-visible {
+            outline: solid ${unsafeCSS(focus.focusBorderWidth)} ${unsafeCSS(focus.focusColor)};
+            outline-offset: ${unsafeCSS(spacing.spacing4)};
+        }
+    `;
+  onChange = (e) => {
+    const nextPage = selectValueToPage(e.currentTarget.value);
+    const event = new CustomEvent("select-page", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        nextPage,
+        previousPage: this.currentPage
+      },
+      cancelable: true
+    });
+    this.dispatchEvent(event);
+  };
+  render() {
+    return html`
+            <select
+                id="select"
+                @change=${this.onChange}
+                .value=${pageToSelectValue(this.currentPage, this.lastPage)}
+            >
+                ${repeat(listPages(this.lastPage), (page) => html`<option value="${page}">${page}</option>`)}
+            </select>
+        `;
+  }
+};
+_ts_decorate([
+  property({
+    type: Number,
+    attribute: "current-page"
+  }),
+  _ts_metadata("design:type", Number)
+], PageSelect.prototype, "currentPage", void 0);
+_ts_decorate([
+  property({
+    type: Number,
+    attribute: "last-page"
+  }),
+  _ts_metadata("design:type", Number)
+], PageSelect.prototype, "lastPage", void 0);
+define("alliance-page-selector", PageSelect);
+
+// src/components/alliance-paginator/alliance-paginator.ts
+function _ts_decorate2(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate2, "_ts_decorate");
+function _ts_metadata2(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+    return Reflect.metadata(k, v);
+}
+__name(_ts_metadata2, "_ts_metadata");
+var Paginator = class extends LitElement {
+  static {
+    __name(this, "Paginator");
+  }
+  constructor() {
+    super();
+    this.itemCount = 0;
+    this.pageSize = 50;
+    this.initialPage = 1;
+    this.siblingCount = 2;
+    this.currentPage = this.initialPage;
+    this.pages = [];
+  }
+  static styles = css`
+        :host {
+            display: flex;
+            flex-direction: row;
+            place-items: center;
+            gap: ${unsafeCSS(spacing.spacing8)};
+        }
+
+        :host telia-label {
+            display: none;
+        }
+
+        :host .telia-label {
+            color: ${unsafeCSS(colors.purple700)};
+        }
+
+        :host alliance-paginator-button[page] {
+            display: none;
+        }
+
+        span {
+            display: block;
+        }
+
+        @container (min-width: ${unsafeCSS(breakpoints.breakpointLg)}) {
+            :host telia-label,
+            :host alliance-paginator-button[page] {
+                display: block;
+            }
+
+            :host alliance-page-selector {
+                display: none;
+            }
+        }
+    `;
+  connectedCallback() {
+    super.connectedCallback();
+    this.currentPage = this.initialPage;
+    this.pages = getPagination({
+      itemCount: this.itemCount,
+      pageSize: this.pageSize,
+      siblingCount: this.siblingCount,
+      currentPage: this.currentPage
+    });
+  }
+  attributeChangedCallback(name, _, value) {
+    super.attributeChangedCallback(name, _, value);
+    if (name === "initial-page") {
+      this.currentPage = this.initialPage;
+    }
+    this.pages = getPagination({
+      itemCount: this.itemCount,
+      pageSize: this.pageSize,
+      siblingCount: this.siblingCount,
+      currentPage: this.currentPage,
+      [name]: value
+    });
+  }
+  changePage = (nextPage) => {
+    if (nextPage === this.currentPage || // Next page is the same
+    nextPage < 1 || // Next page is 0
+    nextPage > this.pages[this.pages.length - 1]) {
+      return;
+    }
+    const event = new CustomEvent("change-page", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        nextPage,
+        previousPage: this.currentPage
+      },
+      cancelable: true
+    });
+    const defaultNotPrevented = this.dispatchEvent(event);
+    if (defaultNotPrevented) {
+      this.currentPage = nextPage;
+      this.pages = getPagination({
+        itemCount: this.itemCount,
+        pageSize: this.pageSize,
+        siblingCount: this.siblingCount,
+        currentPage: this.currentPage
+      });
+    }
+  };
+  next = () => {
+    this.changePage(this.currentPage + 1);
+  };
+  previous = () => {
+    this.changePage(this.currentPage - 1);
+  };
+  onPageSelect = (event) => this.changePage(event.detail.nextPage);
+  render() {
+    return html`
+            <alliance-paginator-button
+                @click=${this.previous}
+                ?disabled=${this.currentPage === 1}
+                icon="left"
+            ></alliance-paginator-button>
+
+            ${repeat(this.pages, (pageNumber) => pageNumber === "..." ? html`<telia-label>...</telia-label>` : html`<alliance-paginator-button
+                          page=${pageNumber}
+                          @click=${() => this.changePage(pageNumber)}
+                          ?selected=${this.currentPage === pageNumber}
+                      ></alliance-paginator-button>`)}
+
+            <alliance-page-selector
+                current-page=${this.currentPage}
+                last-page=${getLastPage(this.pages)}
+                @select-page=${this.onPageSelect}
+            >
+            </alliance-page-selector>
+
+            <alliance-paginator-button
+                @click=${this.next}
+                ?disabled=${this.currentPage === getLastPage(this.pages)}
+                icon="right"
+            ></alliance-paginator-button>
+        `;
+  }
+};
+_ts_decorate2([
+  property({
+    type: Number,
+    attribute: "item-count"
+  }),
+  _ts_metadata2("design:type", Number)
+], Paginator.prototype, "itemCount", void 0);
+_ts_decorate2([
+  property({
+    type: Number,
+    attribute: "page-size"
+  }),
+  _ts_metadata2("design:type", Number)
+], Paginator.prototype, "pageSize", void 0);
+_ts_decorate2([
+  property({
+    type: Number,
+    attribute: "initial-page"
+  }),
+  _ts_metadata2("design:type", Number)
+], Paginator.prototype, "initialPage", void 0);
+_ts_decorate2([
+  property({
+    type: Number,
+    attribute: "sibling-count"
+  }),
+  _ts_metadata2("design:type", Number)
+], Paginator.prototype, "siblingCount", void 0);
+_ts_decorate2([
+  state(),
+  _ts_metadata2("design:type", Number)
+], Paginator.prototype, "currentPage", void 0);
+_ts_decorate2([
+  state(),
+  _ts_metadata2("design:type", typeof Pages === "undefined" ? Object : Pages)
+], Paginator.prototype, "pages", void 0);
+define("alliance-paginator", Paginator);
+function _ts_decorate3(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+__name(_ts_decorate3, "_ts_decorate");
+function _ts_metadata3(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+    return Reflect.metadata(k, v);
+}
+__name(_ts_metadata3, "_ts_metadata");
+var Icon;
+(function(Icon2) {
+  Icon2["Left"] = "left";
+  Icon2["Right"] = "right";
+})(Icon || (Icon = {}));
+var PaginatorButton = class extends LitElement {
+  static {
+    __name(this, "PaginatorButton");
+  }
+  constructor() {
+    super();
+    this.selected = false;
+    this.disabled = false;
+    this.clickable = true;
+  }
+  renderContent() {
+    if (this.icon === "left") {
+      return html`<telia-icon size="sm" svg="${chevronLeft.svg}" />`;
+    }
+    if (this.icon === "right") {
+      return html`<telia-icon size="sm" svg="${chevronRight.svg}" />`;
+    }
+    return html`<span>${this.page}</span>`;
+  }
+  render() {
+    return html`<telia-button ?disabled=${this.disabled} variant=${this.selected ? "primary" : "tertiary-purple"}>${this.renderContent()}</telia-button> `;
+  }
+};
+_ts_decorate3([
+  property({
+    type: Icon
+  }),
+  _ts_metadata3("design:type", String)
+], PaginatorButton.prototype, "icon", void 0);
+_ts_decorate3([
+  property({
+    type: String
+  }),
+  _ts_metadata3("design:type", String)
+], PaginatorButton.prototype, "page", void 0);
+_ts_decorate3([
+  property({
+    type: Boolean
+  }),
+  _ts_metadata3("design:type", Boolean)
+], PaginatorButton.prototype, "selected", void 0);
+_ts_decorate3([
+  property({
+    type: Boolean
+  }),
+  _ts_metadata3("design:type", Boolean)
+], PaginatorButton.prototype, "disabled", void 0);
+_ts_decorate3([
+  property({
+    type: Boolean
+  }),
+  _ts_metadata3("design:type", Boolean)
+], PaginatorButton.prototype, "clickable", void 0);
+define("alliance-paginator-button", PaginatorButton);
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-LYU2K33W.js.map

package/components/chunk-LYU2K33W.js.map

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

package/components/chunk-NB6ODBZJ.js

@@ -0,0 +1,13 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/utils.ts
+var define = /* @__PURE__ */ __name((tag, ...args) => {
+  if (!customElements.get(tag)) {
+    return customElements.define(tag, ...args);
+  }
+}, "define");
+
+export { __name, define };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-NB6ODBZJ.js.map

package/components/chunk-NB6ODBZJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.ts"],"names":["define","tag","args","customElements","get"],"mappings":";;;;AAAO,IAAMA,SAAuC,wBAACC,QAAQC,SAAAA;AACzD,MAAI,CAACC,eAAeC,IAAIH,GAAAA,GAAM;AAC1B,WAAOE,eAAeH,OAAOC,KAAAA,GAAQC,IAAAA;EACzC;AACJ,GAJoD","sourcesContent":["export const define: typeof customElements.define = (tag, ...args) => {\n    if (!customElements.get(tag)) {\n        return customElements.define(tag, ...args);\n    }\n};\n"]}

package/components/chunk-P2AWWJPH.js

@@ -0,0 +1,3 @@
+import '@teliads/components/dist/components/telia-heading';
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-P2AWWJPH.js.map

package/components/chunk-P2AWWJPH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/voca/components/telia-heading.ts"],"names":[],"mappings":";AACA,OAAO","sourcesContent":["// This file is generated - see scripts/map-voca-components.js\nimport '@teliads/components/dist/components/telia-heading';\n"]}