@warp-ds/elements 2.4.0-next.2 → 2.4.0

package/dist/packages/pageindicator/index.js

@@ -1,32 +1,48 @@
-var m=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var d=(s,o,i,r)=>{for(var e=r>1?void 0:r?g(o,i):o,a=s.length-1,c;a>=0;a--)(c=s[a])&&(e=(r?c(o,i,e):c(e))||e);return r&&e&&m(o,i,e),e};import{html as p,LitElement as w}from"lit";import{property as l}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{map as b}from"lit/directives/map.js";import{range as v}from"lit/directives/range.js";import{css as u}from"lit";var n=u`
-  .w-pageindicator {
-    display: grid;
-    justify-content: center;
-    height: max-content;
-    pointer-events: none;
-  }
-
-  .w-pageindicator--container {
-    display: grid;
-    grid-auto-flow: column;
-    gap: 8px;
-  }
-
-  .w-pageindicator--dot {
-    background-color: var(--w-s-color-background-disabled);
-    border-radius: 5px;
-    width: 10px;
-    height: 10px;
-  }
-
-  .w-pageindicator--selecteddot {
-    background-color: var(--w-s-color-icon-selected);
-  }
-`;var t=class extends w{constructor(){super(...arguments);this.selectedPage=1;this.pageCount=1}render(){return p`
+var __decorate = (this && this.__decorate) || function (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;
+};
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { map } from 'lit/directives/map.js';
+import { range } from 'lit/directives/range.js';
+import { styles } from './style.js';
+class WarpPageIndicator extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Currently selected page (1-based index) */
+        this.selectedPage = 1;
+        /** Total number of pages */
+        this.pageCount = 1;
+    }
+    static { this.styles = [styles]; }
+    render() {
+        return html `
       <div class="w-pageindicator">
         <div class="w-pageindicator--container">
-          ${b(v(this.pageCount),i=>{let e={"w-pageindicator--dot":!0,"w-pageindicator--selecteddot":i===this.selectedPage-1};return p`<div class="${f(e)}"></div>`})}
+          ${map(range(this.pageCount), (i) => {
+            const isSelected = i === this.selectedPage - 1;
+            const classes = {
+                'w-pageindicator--dot': true,
+                'w-pageindicator--selecteddot': isSelected,
+            };
+            return html `<div class="${classMap(classes)}"></div>`;
+        })}
         </div>
       </div>
-    `}};t.styles=[n],d([l({type:Number,attribute:"selected-page"})],t.prototype,"selectedPage",2),d([l({type:Number,attribute:"page-count"})],t.prototype,"pageCount",2);customElements.get("w-pageindicator")||customElements.define("w-pageindicator",t);export{t as WarpPageIndicator};
-//# sourceMappingURL=index.js.map
+    `;
+    }
+}
+__decorate([
+    property({ type: Number, attribute: 'selected-page' })
+], WarpPageIndicator.prototype, "selectedPage", void 0);
+__decorate([
+    property({ type: Number, attribute: 'page-count' })
+], WarpPageIndicator.prototype, "pageCount", void 0);
+if (!customElements.get('w-pageindicator')) {
+    customElements.define('w-pageindicator', WarpPageIndicator);
+}
+export { WarpPageIndicator };