@vonage/vivid 5.15.1 → 5.17.0

package/pagination/index.cjs

@@ -1,43 +1,43 @@
-"use strict";const h=require("../bundled/definition3.cjs"),s=require("../bundled/vivid-element.cjs"),m=require("../bundled/localized.cjs"),l=require("../bundled/enums.cjs"),g=require("../bundled/ref.cjs"),I=require("../bundled/children.cjs"),z=require("../bundled/slotted.cjs"),y=require("../bundled/repeat.cjs"),b=require("../bundled/when.cjs"),w=require("../bundled/class-names.cjs"),S=".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";var B=Object.defineProperty,_=Object.getOwnPropertyDescriptor,r=(i,e,t,o)=>{for(var n=o>1?void 0:o?_(e,t):e,c=i.length-1,d;c>=0;c--)(d=i[c])&&(n=(o?d(e,t,n):d(n))||n);return o&&n&&B(e,t,n),n};const p=7,f={fromView:i=>parseInt(i,10),toView:i=>i.toString()};class a extends m.Localized(s.VividElement){constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener("tabpressed",e=>{const{value:t,shiftKey:o}=e.detail,n=this.paginationButtons.findIndex($=>Number($.label)===t),c=o?-1:1,d=n+c;if(d<0)return this.prevButton.focus();if(d>this.paginationButtons.length-1)return this.nextButton.focus();this.paginationButtons&&this.paginationButtons[n+c].focus()})}get pagesList(){return new Array(this.total<p?this.total:p).fill(0).map((e,t,o)=>{if(t===0)return 1;if(t===o.length-1)return this.total;if(this.selectedIndex!==void 0&&this.total>p){if(this.selectedIndex<4&&t===p-2)return"...";if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<p-2)return this.selectedIndex+(t-2);if(t===1||t===p-2)return"..."}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);if(t===1)return"..."}}return t+1})}totalChanged(e,t){if(t<0){this.total=0;return}this.#t()}selectedIndexChanged(e,t){e!==void 0&&(this.$emit("pagination-change",{selectedIndex:t,total:this.total,oldIndex:e}),this.#t())}paginationButtonsChanged(e,t){t.forEach(o=>{o.shadowRoot.querySelector("button").setAttribute("part","button")})}get#e(){return Math.max(0,Math.min(this.selectedIndex??0,this.total-1))}#t(){this.selectedIndex!==this.#e&&window.queueMicrotask(()=>{this.selectedIndex!==this.#e&&(this.selectedIndex=this.#e)})}}r([s.attr],a.prototype,"size",2);r([s.attr],a.prototype,"shape",2);r([s.observable],a.prototype,"paginationButtons",2);r([s.observable],a.prototype,"prevButton",2);r([s.observable],a.prototype,"nextButton",2);r([s.attr({attribute:"nav-icons",mode:"boolean"})],a.prototype,"navIcons",2);r([s.volatile],a.prototype,"pagesList",1);r([s.attr({mode:"reflect",converter:f})],a.prototype,"total",2);r([s.attr({mode:"reflect",converter:f,attribute:"selected-index"})],a.prototype,"selectedIndex",2);const P=[l.Size.SuperCondensed,l.Size.Condensed,l.Size.Normal],L=[l.Shape.Rounded,l.Shape.Pill],x=(i,{parent:e})=>e.selectedIndex=Number(i)-1,E=(i,{event:e,parent:t})=>{(e.key===" "||e.key==="Enter")&&x(i,{parent:t}),e.key==="Tab"&&e.target.dispatchEvent(new CustomEvent("tabpressed",{detail:{value:i,shiftKey:e.shiftKey},bubbles:!0,composed:!0}))},q=i=>w.classNames("control");function C(i,{parent:e}){return e.selectedIndex===Number(i)-1?"filled":"ghost"}const D=i=>s.html` ${b.when(e=>e!=="...",s.html`
-		<${i} class="vwc-pagination-button"
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/slotted.cjs`),o=require(`../bundled/children.cjs`),s=require(`../bundled/enums.cjs`);require(`../bundled/definition2.cjs`);const c=require(`../bundled/decorate.cjs`),l=require(`../bundled/class-names.cjs`),u=require(`../bundled/definition6.cjs`);var d=`.control{justify-content:space-between;display:inline-flex}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{column-gap:4px;display:flex}.vwc-pagination-button[size=super-condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.vwc-pagination-button[size=condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.vwc-pagination-button[size=normal]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.vwc-pagination-button::part(button){padding-inline:0}.dots{text-align:center;align-self:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.dots.size-condensed{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.dots.size-normal{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}`,f=7,p={fromView:e=>parseInt(e,10),toView:e=>e.toString()},m=class extends e.t(t.t){get pagesList(){return Array(this.total<f?this.total:f).fill(0).map((e,t,n)=>{if(t===0)return 1;if(t===n.length-1)return this.total;if(this.selectedIndex!==void 0&&this.total>f){if(this.selectedIndex<4&&t===f-2)return`...`;if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<f-2)return this.selectedIndex+(t-2);if(t===1||t===f-2)return`...`}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);if(t===1)return`...`}}return t+1})}constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener(`tabpressed`,e=>{let{value:t,shiftKey:n}=e.detail,r=this.paginationButtons.findIndex(e=>Number(e.label)===t),i=n?-1:1,a=r+i;if(a<0)return this.prevButton.focus();if(a>this.paginationButtons.length-1)return this.nextButton.focus();this.paginationButtons&&this.paginationButtons[r+i].focus()})}totalChanged(e,t){if(t<0){this.total=0;return}this.#t()}selectedIndexChanged(e,t){e!==void 0&&(this.$emit(`pagination-change`,{selectedIndex:t,total:this.total,oldIndex:e}),this.#t())}paginationButtonsChanged(e,t){t.forEach(e=>{e.shadowRoot.querySelector(`button`).setAttribute(`part`,`button`)})}get#e(){return Math.max(0,Math.min(this.selectedIndex??0,this.total-1))}#t(){this.selectedIndex!==this.#e&&window.queueMicrotask(()=>{this.selectedIndex!==this.#e&&(this.selectedIndex=this.#e)})}};c.t([t.l],m.prototype,`size`,void 0),c.t([t.l],m.prototype,`shape`,void 0),c.t([t.T],m.prototype,`paginationButtons`,void 0),c.t([t.T],m.prototype,`prevButton`,void 0),c.t([t.T],m.prototype,`nextButton`,void 0),c.t([t.l({attribute:`nav-icons`,mode:`boolean`})],m.prototype,`navIcons`,void 0),c.t([t.E],m.prototype,`pagesList`,null),c.t([t.l({mode:`reflect`,converter:p})],m.prototype,`total`,void 0),c.t([t.l({mode:`reflect`,converter:p,attribute:`selected-index`})],m.prototype,`selectedIndex`,void 0);var h=[s.a.SuperCondensed,s.a.Condensed,s.a.Normal],g=[s.i.Rounded,s.i.Pill],_=(e,{parent:t})=>t.selectedIndex=Number(e)-1,v=(e,{event:t,parent:n})=>{(t.key===` `||t.key===`Enter`)&&_(e,{parent:n}),t.key===`Tab`&&t.target.dispatchEvent(new CustomEvent(`tabpressed`,{detail:{value:e,shiftKey:t.shiftKey},bubbles:!0,composed:!0}))},y=e=>l.t(`control`);function b(e,{parent:t}){return t.selectedIndex===Number(e)-1?`filled`:`ghost`}var x=e=>t.d` ${i.t(e=>e!==`...`,t.d`
+		<${e} class="vwc-pagination-button"
 			label="${e=>e}"
-			appearance="${C}"
-			size="${(e,{parent:t})=>u(t)}"
-			shape="${(e,{parent:t})=>v(t)}"
-			style="inline-size: ${e=>N(e)};"
+			appearance="${b}"
+			size="${(e,{parent:t})=>S(t)}"
+			shape="${(e,{parent:t})=>C(t)}"
+			style="inline-size: ${e=>w(e)};"
 			tabindex="0"
 			aria-label="${(e,{parent:t})=>t.locale.pagination.goToPageLabel(e)}"
 			aria-current="${(e,{parent:t})=>t.selectedIndex===Number(e)-1}"
-			@click="${x}"
-			@keydown="${E}">
-		</${i}>
+			@click="${_}"
+			@keydown="${v}">
+		</${e}>
 	`)}
-${b.when(e=>e==="...",s.html` <div
-		class="dots size-${(e,{parent:t})=>u(t)}"
-		aria-hidden="true"
-	>
-		...
-	</div>`)}`,u=i=>!i.size||!P.includes(i.size)?l.Size.SuperCondensed:i.size,v=i=>!i.shape||!L.includes(i.shape)?l.Shape.Rounded:i.shape,N=i=>`calc(var(--base-size) + ${String(i).length-1}ch)`,A=i=>{const e=i.tagFor(h.Button),t=i.tagFor(h.Button,!0),o=D(e);return s.html`
-	<div class="${q}">
-		<${e} class="prev-button" ${g.ref("prevButton")}
-			label="${n=>n.navIcons?null:"Previous"}"
-			icon="${n=>n.navIcons?"chevron-left-line":null}"
-			size="${u}"
-			shape="${v}"
-			?disabled="${n=>n.total===0||n.selectedIndex===0}"
-			@click="${n=>n.selectedIndex!==void 0&&n.selectedIndex--}"
-			aria-label="${n=>n.locale.pagination.previousPageLabel}"
-		></${e}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${I.children({property:"paginationButtons",filter:z.elements(t)})}>
-			${y.repeat(n=>n.pagesList,o,{positioning:!0})}
+	${i.t(e=>e===`...`,t.d` <div
+			class="dots size-${(e,{parent:t})=>S(t)}"
+			aria-hidden="true"
+		>
+			...
+		</div>`)}`,S=e=>!e.size||!h.includes(e.size)?s.a.SuperCondensed:e.size,C=e=>!e.shape||!g.includes(e.shape)?s.i.Rounded:e.shape,w=e=>`calc(var(--base-size) + ${String(e).length-1}ch)`,T=t.o(`pagination`,m,e=>{let i=e.tagFor(u.i),s=e.tagFor(u.i,!0),c=x(i);return t.d`
+	<div class="${y}">
+		<${i} class="prev-button" ${r.t(`prevButton`)}
+			label="${e=>e.navIcons?null:`Previous`}"
+			icon="${e=>e.navIcons?`chevron-left-line`:null}"
+			size="${S}"
+			shape="${C}"
+			?disabled="${e=>e.total===0||e.selectedIndex===0}"
+			@click="${e=>e.selectedIndex!==void 0&&e.selectedIndex--}"
+			aria-label="${e=>e.locale.pagination.previousPageLabel}"
+		></${i}>
+		<div id="buttons-wrapper" class="buttons-wrapper" ${o.t({property:`paginationButtons`,filter:a.r(s)})}>
+			${n.n(e=>e.pagesList,c,{positioning:!0})}
 		</div>
-		<${e} class="next-button" ${g.ref("nextButton")}
-			label="${n=>n.navIcons?null:"Next"}"
-			icon="${n=>n.navIcons?"chevron-right-line":null}"
-			size="${u}"
-			shape="${v}"
-			?disabled="${n=>n.total===0||n.selectedIndex===n.total-1}"
-			@click="${n=>n.selectedIndex!==void 0&&n.selectedIndex++}"
-			aria-label="${n=>n.locale.pagination.nextPageLabel}"
-		></${e}>
-</div>`},O=s.defineVividComponent("pagination",a,A,[h.buttonDefinition],{styles:S}),R=s.createRegisterFunction(O);R();
+		<${i} class="next-button" ${r.t(`nextButton`)}
+			label="${e=>e.navIcons?null:`Next`}"
+			icon="${e=>e.navIcons?`chevron-right-line`:null}"
+			size="${S}"
+			shape="${C}"
+			?disabled="${e=>e.total===0||e.selectedIndex===e.total-1}"
+			@click="${e=>e.selectedIndex!==void 0&&e.selectedIndex++}"
+			aria-label="${e=>e.locale.pagination.nextPageLabel}"
+		></${i}>
+</div>`},[u.t],{styles:d});t.s(T)();

package/pagination/index.js

@@ -1,194 +1,156 @@
-import { B as b, b as z } from "../bundled/definition3.js";
-import { V as w, a as c, o as g, v as B, h as p, c as S, d as _ } from "../bundled/vivid-element.js";
-import { L as P } from "../bundled/localized.js";
-import { a as u, b as v } from "../bundled/enums.js";
-import { r as m } from "../bundled/ref.js";
-import { c as L } from "../bundled/children.js";
-import { e as C } from "../bundled/slotted.js";
-import { r as E } from "../bundled/repeat.js";
-import { w as x } from "../bundled/when.js";
-import { c as D } from "../bundled/class-names.js";
-const A = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";
-var N = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (s, e, t, i) => {
-  for (var n = i > 1 ? void 0 : i ? O(e, t) : e, r = s.length - 1, l; r >= 0; r--)
-    (l = s[r]) && (n = (i ? l(e, t, n) : l(n)) || n);
-  return i && n && N(e, t, n), n;
+import { t as e } from "../bundled/localized.js";
+import { E as t, T as n, d as r, l as i, o as a, s as o, t as s } from "../bundled/vivid-element.js";
+import { n as c } from "../bundled/repeat.js";
+import { t as l } from "../bundled/ref.js";
+import { t as u } from "../bundled/when.js";
+import { r as d } from "../bundled/slotted.js";
+import { t as f } from "../bundled/children.js";
+import { a as p, i as m } from "../bundled/enums.js";
+import "../bundled/definition2.js";
+import { t as h } from "../bundled/decorate.js";
+import { t as g } from "../bundled/class-names.js";
+import { i as _, t as v } from "../bundled/definition6.js";
+//#region src/lib/pagination/pagination.scss?inline
+var y = ".control{justify-content:space-between;display:inline-flex}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{column-gap:4px;display:flex}.vwc-pagination-button[size=super-condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.vwc-pagination-button[size=condensed]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.vwc-pagination-button[size=normal]{--base-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.vwc-pagination-button::part(button){padding-inline:0}.dots{text-align:center;align-self:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.dots.size-condensed{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.dots.size-normal{inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}", b = 7, x = {
+	fromView: (e) => parseInt(e, 10),
+	toView: (e) => e.toString()
+}, S = class extends e(s) {
+	get pagesList() {
+		return Array(this.total < b ? this.total : b).fill(0).map((e, t, n) => {
+			if (t === 0) return 1;
+			if (t === n.length - 1) return this.total;
+			if (this.selectedIndex !== void 0 && this.total > b) {
+				if (this.selectedIndex < 4 && t === b - 2) return "...";
+				if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
+					if (t > 1 && t < b - 2) return this.selectedIndex + (t - 2);
+					/* v8 ignore else -- @preserve */
+					if (t === 1 || t === b - 2) return "...";
+				}
+				if (this.selectedIndex > this.total - 5) {
+					if (t > 1) return this.total - (6 - t);
+					/* v8 ignore else -- @preserve */
+					if (t === 1) return "...";
+				}
+			}
+			return t + 1;
+		});
+	}
+	constructor() {
+		super(), this.navIcons = !1, this.total = 0, this.selectedIndex = 0, this.addEventListener("tabpressed", (e) => {
+			let { value: t, shiftKey: n } = e.detail, r = this.paginationButtons.findIndex((e) => Number(e.label) === t), i = n ? -1 : 1, a = r + i;
+			if (a < 0) return this.prevButton.focus();
+			if (a > this.paginationButtons.length - 1) return this.nextButton.focus();
+			this.paginationButtons && this.paginationButtons[r + i].focus();
+		});
+	}
+	totalChanged(e, t) {
+		if (t < 0) {
+			this.total = 0;
+			return;
+		}
+		this.#t();
+	}
+	selectedIndexChanged(e, t) {
+		e !== void 0 && (this.$emit("pagination-change", {
+			selectedIndex: t,
+			total: this.total,
+			oldIndex: e
+		}), this.#t());
+	}
+	paginationButtonsChanged(e, t) {
+		t.forEach((e) => {
+			e.shadowRoot.querySelector("button").setAttribute("part", "button");
+		});
+	}
+	get #e() {
+		return Math.max(0, Math.min(this.selectedIndex ?? 0, this.total - 1));
+	}
+	#t() {
+		this.selectedIndex !== this.#e && window.queueMicrotask(() => {
+			this.selectedIndex !== this.#e && (this.selectedIndex = this.#e);
+		});
+	}
 };
-const d = 7, $ = {
-  fromView: (s) => parseInt(s, 10),
-  toView: (s) => s.toString()
-};
-class a extends P(w) {
-  constructor() {
-    super(), this.navIcons = !1, this.total = 0, this.selectedIndex = 0, this.addEventListener("tabpressed", (e) => {
-      const { value: t, shiftKey: i } = e.detail, n = this.paginationButtons.findIndex(
-        (y) => Number(y.label) === t
-      ), r = i ? -1 : 1, l = n + r;
-      if (l < 0)
-        return this.prevButton.focus();
-      if (l > this.paginationButtons.length - 1)
-        return this.nextButton.focus();
-      this.paginationButtons && this.paginationButtons[n + r].focus();
-    });
-  }
-  get pagesList() {
-    return new Array(
-      this.total < d ? this.total : d
-    ).fill(0).map((e, t, i) => {
-      if (t === 0) return 1;
-      if (t === i.length - 1) return this.total;
-      if (this.selectedIndex !== void 0 && this.total > d) {
-        if (this.selectedIndex < 4 && t === d - 2)
-          return "...";
-        if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
-          if (t > 1 && t < d - 2)
-            return this.selectedIndex + (t - 2);
-          if (t === 1 || t === d - 2) return "...";
-        }
-        if (this.selectedIndex > this.total - 5) {
-          if (t > 1) return this.total - (6 - t);
-          if (t === 1) return "...";
-        }
-      }
-      return t + 1;
-    });
-  }
-  totalChanged(e, t) {
-    if (t < 0) {
-      this.total = 0;
-      return;
-    }
-    this.#t();
-  }
-  selectedIndexChanged(e, t) {
-    e !== void 0 && (this.$emit("pagination-change", {
-      selectedIndex: t,
-      total: this.total,
-      oldIndex: e
-    }), this.#t());
-  }
-  paginationButtonsChanged(e, t) {
-    t.forEach((i) => {
-      i.shadowRoot.querySelector("button").setAttribute("part", "button");
-    });
-  }
-  get #e() {
-    return Math.max(0, Math.min(this.selectedIndex ?? 0, this.total - 1));
-  }
-  #t() {
-    this.selectedIndex !== this.#e && window.queueMicrotask(() => {
-      this.selectedIndex !== this.#e && (this.selectedIndex = this.#e);
-    });
-  }
-}
-o([
-  c
-], a.prototype, "size", 2);
-o([
-  c
-], a.prototype, "shape", 2);
-o([
-  g
-], a.prototype, "paginationButtons", 2);
-o([
-  g
-], a.prototype, "prevButton", 2);
-o([
-  g
-], a.prototype, "nextButton", 2);
-o([
-  c({ attribute: "nav-icons", mode: "boolean" })
-], a.prototype, "navIcons", 2);
-o([
-  B
-], a.prototype, "pagesList", 1);
-o([
-  c({ mode: "reflect", converter: $ })
-], a.prototype, "total", 2);
-o([
-  c({
-    mode: "reflect",
-    converter: $,
-    attribute: "selected-index"
-  })
-], a.prototype, "selectedIndex", 2);
-const R = [
-  u.SuperCondensed,
-  u.Condensed,
-  u.Normal
-], T = [v.Rounded, v.Pill], I = (s, { parent: e }) => e.selectedIndex = Number(s) - 1, K = (s, { event: e, parent: t }) => {
-  (e.key === " " || e.key === "Enter") && I(s, { parent: t }), e.key === "Tab" && e.target.dispatchEvent(
-    new CustomEvent("tabpressed", {
-      detail: { value: s, shiftKey: e.shiftKey },
-      bubbles: !0,
-      composed: !0
-    })
-  );
-}, M = (s) => D("control");
-function V(s, { parent: e }) {
-  return e.selectedIndex === Number(s) - 1 ? "filled" : "ghost";
+h([i], S.prototype, "size", void 0), h([i], S.prototype, "shape", void 0), h([n], S.prototype, "paginationButtons", void 0), h([n], S.prototype, "prevButton", void 0), h([n], S.prototype, "nextButton", void 0), h([i({
+	attribute: "nav-icons",
+	mode: "boolean"
+})], S.prototype, "navIcons", void 0), h([t], S.prototype, "pagesList", null), h([i({
+	mode: "reflect",
+	converter: x
+})], S.prototype, "total", void 0), h([i({
+	mode: "reflect",
+	converter: x,
+	attribute: "selected-index"
+})], S.prototype, "selectedIndex", void 0);
+//#endregion
+//#region src/lib/pagination/pagination.template.ts
+var C = [
+	p.SuperCondensed,
+	p.Condensed,
+	p.Normal
+], w = [m.Rounded, m.Pill], T = (e, { parent: t }) => t.selectedIndex = Number(e) - 1, E = (e, { event: t, parent: n }) => {
+	(t.key === " " || t.key === "Enter") && T(e, { parent: n }), t.key === "Tab" && t.target.dispatchEvent(new CustomEvent("tabpressed", {
+		detail: {
+			value: e,
+			shiftKey: t.shiftKey
+		},
+		bubbles: !0,
+		composed: !0
+	}));
+}, D = (e) => g("control");
+function O(e, { parent: t }) {
+	return t.selectedIndex === Number(e) - 1 ? "filled" : "ghost";
 }
-const j = (s) => p` ${x(
-  (e) => e !== "...",
-  p`
-		<${s} class="vwc-pagination-button"
+var k = (e) => r` ${u((e) => e !== "...", r`
+		<${e} class="vwc-pagination-button"
 			label="${(e) => e}"
-			appearance="${V}"
-			size="${(e, { parent: t }) => h(t)}"
-			shape="${(e, { parent: t }) => f(t)}"
-			style="inline-size: ${(e) => k(e)};"
+			appearance="${O}"
+			size="${(e, { parent: t }) => A(t)}"
+			shape="${(e, { parent: t }) => j(t)}"
+			style="inline-size: ${(e) => M(e)};"
 			tabindex="0"
 			aria-label="${(e, { parent: t }) => t.locale.pagination.goToPageLabel(e)}"
 			aria-current="${(e, { parent: t }) => t.selectedIndex === Number(e) - 1}"
-			@click="${I}"
-			@keydown="${K}">
-		</${s}>
-	`
-)}
-${x(
-  (e) => e === "...",
-  p` <div
-		class="dots size-${(e, { parent: t }) => h(t)}"
-		aria-hidden="true"
-	>
-		...
-	</div>`
-)}`, h = (s) => !s.size || !R.includes(s.size) ? u.SuperCondensed : s.size, f = (s) => !s.shape || !T.includes(s.shape) ? v.Rounded : s.shape, k = (s) => `calc(var(--base-size) + ${String(s).length - 1}ch)`, F = (s) => {
-  const e = s.tagFor(b), t = s.tagFor(b, !0), i = j(e);
-  return p`
-	<div class="${M}">
-		<${e} class="prev-button" ${m("prevButton")}
-			label="${(n) => n.navIcons ? null : "Previous"}"
-			icon="${(n) => n.navIcons ? "chevron-left-line" : null}"
-			size="${h}"
-			shape="${f}"
-			?disabled="${(n) => n.total === 0 || n.selectedIndex === 0}"
-			@click="${(n) => n.selectedIndex !== void 0 && n.selectedIndex--}"
-			aria-label="${(n) => n.locale.pagination.previousPageLabel}"
-		></${e}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${L({
-    property: "paginationButtons",
-    filter: C(t)
-  })}>
-			${E((n) => n.pagesList, i, { positioning: !0 })}
+			@click="${T}"
+			@keydown="${E}">
+		</${e}>
+	`)}
+	${u((e) => e === "...", r` <div
+			class="dots size-${(e, { parent: t }) => A(t)}"
+			aria-hidden="true"
+		>
+			...
+		</div>`)}`, A = (e) => !e.size || !C.includes(e.size) ? p.SuperCondensed : e.size, j = (e) => !e.shape || !w.includes(e.shape) ? m.Rounded : e.shape, M = (e) => `calc(var(--base-size) + ${String(e).length - 1}ch)`;
+//#endregion
+//#region src/lib/pagination/index.ts
+o(a("pagination", S, (e) => {
+	let t = e.tagFor(_), n = e.tagFor(_, !0), i = k(t);
+	return r`
+	<div class="${D}">
+		<${t} class="prev-button" ${l("prevButton")}
+			label="${(e) => e.navIcons ? null : "Previous"}"
+			icon="${(e) => e.navIcons ? "chevron-left-line" : null}"
+			size="${A}"
+			shape="${j}"
+			?disabled="${(e) => e.total === 0 || e.selectedIndex === 0}"
+			@click="${(e) => e.selectedIndex !== void 0 && e.selectedIndex--}"
+			aria-label="${(e) => e.locale.pagination.previousPageLabel}"
+		></${t}>
+		<div id="buttons-wrapper" class="buttons-wrapper" ${f({
+		property: "paginationButtons",
+		filter: d(n)
+	})}>
+			${c((e) => e.pagesList, i, { positioning: !0 })}
 		</div>
-		<${e} class="next-button" ${m("nextButton")}
-			label="${(n) => n.navIcons ? null : "Next"}"
-			icon="${(n) => n.navIcons ? "chevron-right-line" : null}"
-			size="${h}"
-			shape="${f}"
-			?disabled="${(n) => n.total === 0 || n.selectedIndex === n.total - 1}"
-			@click="${(n) => n.selectedIndex !== void 0 && n.selectedIndex++}"
-			aria-label="${(n) => n.locale.pagination.nextPageLabel}"
-		></${e}>
+		<${t} class="next-button" ${l("nextButton")}
+			label="${(e) => e.navIcons ? null : "Next"}"
+			icon="${(e) => e.navIcons ? "chevron-right-line" : null}"
+			size="${A}"
+			shape="${j}"
+			?disabled="${(e) => e.total === 0 || e.selectedIndex === e.total - 1}"
+			@click="${(e) => e.selectedIndex !== void 0 && e.selectedIndex++}"
+			aria-label="${(e) => e.locale.pagination.nextPageLabel}"
+		></${t}>
 </div>`;
-}, W = _(
-  "pagination",
-  a,
-  F,
-  [z],
-  {
-    styles: A
-  }
-), q = S(W);
-q();
+}, [v], { styles: y }))();
+//#endregion