npm - @jumpgroup/jump-design-system - Versions diffs - 0.2.5 → 0.2.7 - Mend

@jumpgroup/jump-design-system 0.2.5 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (110) hide show

package/dist/components/jump-pagination-table.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface JumpPaginationTable extends Components.JumpPaginationTable, HTMLElement {}
+export const JumpPaginationTable: {
+    prototype: JumpPaginationTable;
+    new (): JumpPaginationTable;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/jump-pagination-table.js ADDED Viewed

@@ -0,0 +1,109 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './jump-icon2.js';
+const jumpPaginationTableCss = ":host{display:block}.JumpPaginationTable{--jump-pagination-table-label:var(--neutral-grey-secondary);--jump-pagination-table-arrows:var(--neutral-grey-secondary);--jump-pagination-table-arrows-disabled:var(--neutral-grey-disabled);font-family:var(--ff-primary)}.JumpPaginationTable__Wrapper{display:flex;justify-content:space-between}.JumpPaginationTable__Wrapper .elementsPerPage{display:flex;gap:1rem;align-items:center}.JumpPaginationTable__Wrapper .elementsPerPage label{color:var(--jump-pagination-table-label);font-size:var(--fs-300);font-weight:normal}.JumpPaginationTable__Wrapper .indicators{font-size:var(--fs-400);font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--jump-pagination-table-label)}.JumpPaginationTable__Wrapper .indicators .arrow{color:var(--jump-pagination-table-arrows);display:flex;align-items:center;gap:10px}.JumpPaginationTable__Wrapper .indicators .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPaginationTable__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--jump-pagination-table-arrows-disabled)}.JumpPaginationTable__Wrapper .indicators .elements{color:var(--jump-pagination-table-label);display:flex;align-items:center;gap:5px}";
+const JumpPaginationTableStyle0 = jumpPaginationTableCss;
+const JumpPaginationTable$1 = /*@__PURE__*/ proxyCustomElement(class JumpPaginationTable extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.changePage = createEvent(this, "jump-change-page", 7);
+        this.changeElPerPage = createEvent(this, "jump-change-el-per-page", 7);
+        this.elementsRanges = [10, 20, 60, 100];
+        this.elPerPage = 10;
+        this.pagLabel = 'di';
+        this.labelElementsPerPage = 'Elementi per pagina';
+        this.total = 100;
+        this.first = 1;
+        this.last = 10;
+        this.showFirstAndLast = false;
+    }
+    elPerPageChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            // Riporta la paginazione allo stato iniziale
+            this.first = 1;
+            this.last = Math.min(this.total, newValue);
+        }
+        console.log('quaaaa');
+        this.changeElPerPage.emit({ elPerPage: newValue });
+    }
+    setElPerPage(e) {
+        this.elPerPage = e.target.value;
+    }
+    doChangePage(dir) {
+        let newFirst;
+        let newLast;
+        //TODO refactorare
+        if (dir === 'first') {
+            newFirst = 1;
+            newLast = Math.min(this.total, this.elPerPage);
+        }
+        else if (dir === 'last') {
+            newLast = this.total;
+            newFirst = Math.max(1, this.total - this.elPerPage + 1);
+        }
+        else if (dir === 'previous') {
+            newFirst = Math.max(1, this.first - this.elPerPage);
+            newLast = Math.min(this.total, newFirst + this.elPerPage - 1);
+        }
+        else if (dir === 'next') {
+            newLast = Math.min(this.total, this.last + this.elPerPage);
+            newFirst = Math.max(1, newLast - this.elPerPage + 1);
+        }
+        this.first = newFirst;
+        this.last = newLast;
+        let details = {
+            first: newFirst,
+            last: newLast,
+            direction: dir
+        };
+        this.changePage.emit(details);
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'a0ce2d326581fda87291e2b16cc9b64b5a633246', class: "JumpPaginationTable" }, h("div", { key: '6c0052e1a8fdb06f4f43711912980cbe2e81a0e5', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '2aae7db84f506002ec233c4588571c0d7aad73b7', class: "elementsPerPage" }, h("label", { key: '05df9e396f436959fad6a5e46bae813839e5f23a', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '30656763681d37b2160e533375ff240318b720da', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRanges.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: '80db6dee1b8c360351b7fd4ca2b3c8e0eaaf242f', class: "indicators" }, h("div", { key: 'bae4bc608d60d3288178ce408f80c23edf24e893', class: "elements" }, h("span", { key: 'f4952c8ac2b57f812a9b90c8c3b8d3e95a960952' }, h("span", { key: 'bcb057d337403ec62c2487800279c030a50b67a0' }, this.first), " - ", h("span", { key: '7334a3da3127929ff499d42633fa51b2b2798e72' }, this.last), " ", this.pagLabel, " ", h("span", { key: '64e09cf7339b0b63f793f4408492aaddb255d1eb' }, this.total))), h("div", { key: 'a88758ca9e509fa8dafbd5e890565f8c0e45413a', class: "arrow" }, this.showFirstAndLast &&
+            h("button", { key: '92d636fbd99363c8fdce81dcebcf563dfa8d5616', onClick: () => this.doChangePage('first'), disabled: this.first === 1 }, h("jump-icon", { key: '1399dbb89d3b8bc02ab6b0b8532069019bfd9bf5', slot: "prefix", name: "chevrons-left" })), h("button", { key: '7071e9c983d018e8b757098e61ea4fcc32ff8ac7', onClick: () => this.doChangePage('previous'), disabled: this.first === 1 }, h("jump-icon", { key: '44ab75b00313dbcc0ba4faa292c83542808504f5', slot: "prefix", name: "chevron-left" })), h("button", { key: 'f42cda59476058f2bf1d07c70e392b857a16f9c7', onClick: () => this.doChangePage('next'), disabled: this.last === this.total }, h("jump-icon", { key: '2f7e16d07872df4eefb85fad08c36a50d5dae82c', slot: "prefix", name: "chevron-right" })), this.showFirstAndLast &&
+            h("button", { key: '8269eb814080ebe97c86ac23936770210d543d51', onClick: () => this.doChangePage('last'), disabled: this.last === this.total }, h("jump-icon", { key: '63bef8880d36a01cfd8e2412553bd2ce41be4331', slot: "prefix", name: "chevrons-right" })))))));
+    }
+    static get watchers() { return {
+        "elPerPage": ["elPerPageChanged"]
+    }; }
+    static get style() { return JumpPaginationTableStyle0; }
+}, [0, "jump-pagination-table", {
+        "elementsRanges": [16],
+        "elPerPage": [2, "el-per-page"],
+        "pagLabel": [513, "pag-label"],
+        "labelElementsPerPage": [513, "label-elements-per-page"],
+        "total": [514],
+        "first": [514],
+        "last": [514],
+        "showFirstAndLast": [516, "show-first-and-last"]
+    }, undefined, {
+        "elPerPage": ["elPerPageChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["jump-pagination-table", "jump-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "jump-pagination-table":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JumpPaginationTable$1);
+            }
+            break;
+        case "jump-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const JumpPaginationTable = JumpPaginationTable$1;
+const defineCustomElement = defineCustomElement$1;
+export { JumpPaginationTable, defineCustomElement };
+//# sourceMappingURL=jump-pagination-table.js.map

package/dist/components/jump-pagination-table.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"jump-pagination-table.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,+wCAA+wC,CAAC;AAC/yC,kCAAe,sBAAsB;;MCMxBA,qBAAmB;;;;;;8BAK2B,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;yBAE9C,EAAE;wBAEc,IAAI;oCAKQ,qBAAqB;qBAEpC,GAAG;qBAGH,CAAC;oBACF,EAAE;gCAEW,KAAK;;IAK1D,gBAAgB,CAAC,QAAgB,EAAE,QAAgB;QACjD,IAAI,QAAQ,KAAK,QAAQ,EAAE;;YAEzB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;YACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;SAC5C;QAGD,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACtB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAC,CAAC,CAAC;KAClD;IAED,YAAY,CAAC,CAAC;QACZ,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;KACjC;IAKD,YAAY,CAAC,GAAG;QACd,IAAI,QAAQ,CAAC;QACb,IAAI,OAAO,CAAC;;QAGZ,IAAI,GAAG,KAAK,OAAO,EAAE;YACnB,QAAQ,GAAG,CAAC,CAAC;YACb,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SAChD;aAAM,IAAI,GAAG,KAAK,MAAM,EAAE;YACzB,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC;YACrB,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;SACzD;aAAM,IAAI,GAAG,KAAK,UAAU,EAAE;YAC7B,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;YACpD,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;SAC/D;aAAM,IAAI,GAAG,KAAK,MAAM,EAAE;YACzB,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;YAC3D,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC;SACtD;QAED,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QACtB,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;QAEpB,IAAI,OAAO,GAAG;YACZ,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,OAAO;YACb,SAAS,EAAE,GAAG;SACf,CAAA;QAGD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC/B;IAGD,MAAM;;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,qBAAqB,IAC/B,4DAAK,KAAK,EAAC,8BAA8B,IACvC,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DAAO,OAAO,EAAC,UAAU,IAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,mBAAmB,CAAS,EACpF,+DAAQ,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IACxE,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,MAC7B,cAAQ,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,IAAI,KAAK,KAAK,IAAI,IAAG,KAAK,CAAU,CACpF,CAAC,CACK,CACL,EACN,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,KAAK,EAAC,UAAU,IACnB,+DACE,+DAAO,IAAI,CAAC,KAAK,CAAQ,SAAG,+DAAO,IAAI,CAAC,IAAI,CAAQ,OAAE,IAAI,CAAC,QAAQ,OAAE,+DAAO,IAAI,CAAC,KAAK,CAAQ,CACzF,CACH,EACN,4DAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,gBAAgB;YACpB,+DACE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,EACzC,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,CAAC,IAE1B,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa,CACnD,EAEX,+DACE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAC5C,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,CAAC,IAE1B,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,GAAa,CAClD,EACT,+DACE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,IAElC,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa,CACnD,EACR,IAAI,CAAC,gBAAgB;YACpB,+DACE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,IAElC,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,gBAAgB,GAAa,CACpD,CAEP,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpPaginationTable"],"sources":["src/components/jump-pagination-table/jump-pagination-table.scss?tag=jump-pagination-table","src/components/jump-pagination-table/jump-pagination-table.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPaginationTable {\n --jump-pagination-table-label: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows: var(--neutral-grey-secondary);\n --jump-pagination-table-arrows-disabled: var(--neutral-grey-disabled); //mappare una variabile del design system\n\n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n \n .elementsPerPage {\n display: flex;\n gap: 1rem;\n align-items: center;\n \n label {\n color: var(--jump-pagination-table-label);\n font-size: var(--fs-300);\n font-weight: normal;\n }\n }\n \n .indicators {\n font-size: var(--fs-400);\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--jump-pagination-table-label);\n \n .arrow {\n color: var(--jump-pagination-table-arrows);\n display: flex;\n align-items: center;\n gap: 10px;\n \n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n \n button:disabled {\n cursor: not-allowed;\n color: var(--jump-pagination-table-arrows-disabled);\n \n }\n }\n \n .elements {\n color: var(--jump-pagination-table-label);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n}","import { Component, Event, EventEmitter, Watch, Host, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination-table',\n styleUrl: 'jump-pagination-table.scss',\n shadow: false,\n})\nexport class JumpPaginationTable {\n\n /**\n * Values for the elements per page select\n */\n @Prop({ reflect: true }) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n @Prop() elPerPage: number = 10;\n\n @Prop({ reflect: true }) pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n /**\n * Label for the elements per page select\n */\n @Prop({ reflect: true }) labelElementsPerPage: string = 'Elementi per pagina';\n\n @Prop({ reflect: true }) total: number = 100; // Totale di elementi, usata se completeVersion = true\n\n\n @Prop({ reflect: true }) first: number = 1;\n @Prop({ reflect: true }) last: number = 10;\n\n @Prop({ reflect: true }) showFirstAndLast: boolean = false;\n\n\n\n @Watch('elPerPage')\n elPerPageChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n // Riporta la paginazione allo stato iniziale\n this.first = 1;\n this.last = Math.min(this.total, newValue);\n }\n\n\n console.log('quaaaa');\n this.changeElPerPage.emit({elPerPage: newValue});\n }\n\n setElPerPage(e){\n this.elPerPage = e.target.value;\n }\n\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n @Event({ eventName: 'jump-change-el-per-page' }) changeElPerPage: EventEmitter;\n\n doChangePage(dir) {\n let newFirst;\n let newLast;\n\n //TODO refactorare \n if (dir === 'first') {\n newFirst = 1;\n newLast = Math.min(this.total, this.elPerPage);\n } else if (dir === 'last') {\n newLast = this.total;\n newFirst = Math.max(1, this.total - this.elPerPage + 1);\n } else if (dir === 'previous') {\n newFirst = Math.max(1, this.first - this.elPerPage);\n newLast = Math.min(this.total, newFirst + this.elPerPage - 1);\n } else if (dir === 'next') {\n newLast = Math.min(this.total, this.last + this.elPerPage);\n newFirst = Math.max(1, newLast - this.elPerPage + 1);\n }\n\n this.first = newFirst;\n this.last = newLast;\n\n let details = {\n first: newFirst,\n last: newLast,\n direction: dir\n }\n\n\n this.changePage.emit(details);\n }\n\n\n render() {\n return (\n <Host class=\"JumpPaginationTable\">\n <div class=\"JumpPaginationTable__Wrapper\">\n <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\" onChange={(e) => this.setElPerPage(e)}>\n {this.elementsRanges.map((range) => (\n <option value={range} selected={(this.elPerPage == range) && true}>{range}</option>\n ))}\n </select>\n </div> \n <div class=\"indicators\">\n <div class=\"elements\">\n <span>\n <span>{this.first}</span> - <span>{this.last}</span> {this.pagLabel} <span>{this.total}</span>\n </span>\n </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n <button \n onClick={() => this.doChangePage('first')}\n disabled={this.first === 1}\n >\n <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon>\n </button>\n }\n <button\n onClick={() => this.doChangePage('previous')}\n disabled={this.first === 1}\n >\n <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon>\n </button>\n <button\n onClick={() => this.doChangePage('next')}\n disabled={this.last === this.total}\n >\n <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon>\n </button>\n {this.showFirstAndLast &&\n <button\n onClick={() => this.doChangePage('last')}\n disabled={this.last === this.total}\n >\n <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon>\n </button>\n }\n </div>\n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/components/jump-pagination.js CHANGED Viewed

@@ -1,67 +1,49 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './jump-icon2.js';
-const jumpPaginationCss = ":host{display:block}.JumpPagination{--pagination-label-color:var(--neutral-grey-secondary);--pagination-arrows-color:var(--neutral-grey-secondary);--pagination-arrows-disabled:#CBCBCB;font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .elementsPerPage{display:flex;gap:1rem;align-items:center}.JumpPagination__Wrapper .elementsPerPage label{color:var(--pagination-label-color);font-size:14px;font-weight:normal}.JumpPagination__Wrapper .indicators{font-size:16px;font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--pagination-label-color)}.JumpPagination__Wrapper .indicators .arrow{color:var(--pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPagination__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--pagination-arrows-disabled)}.JumpPagination__Wrapper .indicators .elements{color:var(--pagination-label-color);display:flex;align-items:center;gap:5px}";
+const jumpPaginationCss = ":host{display:block}.JumpPagination{--jump-pagination-label:var(--neutral-grey-secondary);--jump-pagination-arrows-color:var(--neutral-grey-secondary);--jump-pagination-arrows-disabled:var(--neutral-grey-disabled);font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .indicators{font-size:var(--fs-400);font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--jump-pagination-label)}.JumpPagination__Wrapper .indicators .arrow{color:var(--jump-pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .arrow button{background-color:transparent;border:none;cursor:pointer;padding:0px;display:flex;align-items:center}.JumpPagination__Wrapper .indicators .arrow button:disabled{cursor:not-allowed;color:var(--jump-pagination-arrows-disabled)}.JumpPagination__Wrapper .indicators .elements{color:var(--jump-pagination-label);display:flex;align-items:center;gap:5px}";
 const JumpPaginationStyle0 = jumpPaginationCss;
 const JumpPagination$1 = /*@__PURE__*/ proxyCustomElement(class JumpPagination extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.jumpChangePage = createEvent(this, "jump-change-page", 7);
-        this.firstPage = 1;
-        this.currentPage = undefined;
-        this.totalElements = undefined;
+        this.changePage = createEvent(this, "jump-change-page", 7);
+        this.current = 1;
         this.pagLabel = 'di';
-        this.initialPage = 1;
-        this.lastPage = 10;
-        this.labelElementsPerPage = 'Elementi per pagina';
-        this.elementsRanges = [10, 20, 60, 100];
-        this.completeVersion = false;
+        this.last = 10;
         this.showFirstAndLast = false;
     }
-    watchCurrentPage(newValue, oldValue) {
+    watchcurrent(newValue, oldValue) {
         let details = {
-            currentPage: newValue,
+            current: newValue,
             previousPage: oldValue,
-            firstPage: this.firstPage,
-            lastPage: this.lastPage,
+            first: 1,
+            last: this.last,
             direction: newValue > oldValue ? 'next' : 'prev'
         };
-        this.jumpChangePage.emit(details);
+        this.changePage.emit(details);
     }
     /* ---------------------- @LIFECYCLE ------------------------- */
     componentWillLoad() {
-        this.currentPage = this.initialPage;
+        this.current = 1;
     }
     render() {
-        var _a;
-        console.log('completeVersion', this.completeVersion);
-        return (h(Host, { key: '32e300881b3a78d25edf6480e9a8a6594f907c76', class: "JumpPagination" }, h("div", { key: '0c4e133e409740331083588fbb046d79c2878ea9', class: "JumpPagination__Wrapper" }, this.completeVersion &&
-            h("div", { key: '13daa8e819ec294b50823becc7e8d904eff66f32', class: "elementsPerPage" }, h("label", { key: '162555e0ebfc295d96d5ba358ec879eba1730746', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: 'c4e99d784347a67c5616b3ed0ca25934dbdae55f', name: "elements", id: "elements" }, this.elementsRanges.map((range) => (h("option", { value: range }, range))))), h("div", { key: '5eb516226cf5bcb23e575109371c4f55ca235e04', class: "indicators" }, h("div", { key: '58a8655b582e8cdcd9f8c553343d9e407dd66971', class: "elements" }, this.completeVersion ?
-            h("span", null, h("span", null, this.firstPage), " - ", h("span", null, this.currentPage), " ", this.pagLabel, " ", h("span", null, this.totalElements))
-            :
-                h("span", null, h("span", null, this.currentPage), " ", this.pagLabel, " ", h("span", null, this.lastPage))), h("div", { key: '92b5476c223e477532726304c282ed34e1acccc7', class: "arrow" }, this.showFirstAndLast &&
-            h("button", { key: '740c67ee4f73c5a55a022b2281913d8652deeed2', onClick: () => { this.currentPage = this.firstPage; }, disabled: (this.currentPage === this.firstPage) ? true : false }, " ", h("jump-icon", { key: '5a880ea7c01afcc8ae9a4e84934e386e0edab58c', slot: "prefix", name: "chevrons-left" }), "   "), h("button", { key: '08fe7f7faa6c7645151ec3ea2b4bf4247f082a2d', onClick: () => { this.currentPage--; }, disabled: (this.currentPage === this.firstPage) ? true : false }, " ", h("jump-icon", { key: '04a972584533f1272b10c7e9068ce332aef77299', slot: "prefix", name: "chevron-left" }), "   "), h("button", { key: '0ea012c03b06b587296c9190eece67351579b6e3', onClick: () => { this.currentPage++; }, disabled: (this.currentPage === this.lastPage) ? true : false }, " ", h("jump-icon", { key: '155d6a407989f9cc5d38832df8fb98a3505c3113', slot: "prefix", name: "chevron-right" }), "   "), this.showFirstAndLast &&
-            h("button", { key: 'be46c67831f6d732d47e9340aca1a43a650af958', onClick: () => { this.currentPage = this.lastPage; }, disabled: (this.currentPage === this.lastPage) ? true : false }, " ", h("jump-icon", { key: 'b04a3d8a8726f945d5639761dde68a300e40f80a', slot: "prefix", name: "chevrons-right" }), "   "))))));
+        return (h(Host, { key: '2a7576df479d537fce9ddb57bbd1c2281966338a', class: "JumpPagination" }, h("div", { key: 'b17c027eeeb798a07575a329d6d84b378258c3f8', class: "JumpPagination__Wrapper" }, h("div", { key: 'afd615f030a3affbc8eb42eca80b15c19d248865', class: "indicators" }, h("div", { key: '62ba94ec7d2a97e9c9cb4b305817c65fe841b8d2', class: "elements" }, h("span", { key: '72a1e04a055661f44add8d8a6b7da470ca4dc141' }, h("span", { key: '17d723e90600fc2dd461b3df5806ae1a53f8a9e2' }, this.current), " ", this.pagLabel, " ", h("span", { key: '8226df90a89580310fc165fb3283de0d850a9edd' }, this.last))), h("div", { key: '6ba82177760ff8722071d9306e7c997bb651b838', class: "arrow" }, this.showFirstAndLast &&
+            h("button", { key: 'f97ce0ac5ae55f5efa46e3049740f0e71d30d51a', onClick: () => { this.current = 1; }, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'a3beda6c56fb82248712c4c185bafd7d1ab2b05b', slot: "prefix", name: "chevrons-left" }), "   "), h("button", { key: 'f989324f4950b41d3224ec4661416f76eacc1c4b', onClick: () => { this.current--; }, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '282db7bb875d3fb32f2ed4e5f7aa445c369fc916', slot: "prefix", name: "chevron-left" }), "   "), h("button", { key: '65f1681d7f53d756c111aaba7e8473545c903eb7', onClick: () => { this.current++; }, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'a8365aa471c81a95b470bbc333fe4119f77dc72e', slot: "prefix", name: "chevron-right" }), "   "), this.showFirstAndLast &&
+            h("button", { key: 'df7fa6824a028b74042b6a08191e1979ed42617b', onClick: () => { this.current = this.last; }, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '101a5fca010de64d804b8b8dbd336e1ad498c958', slot: "prefix", name: "chevrons-right" }), "   "))))));
     }
     static get watchers() { return {
-        "currentPage": ["watchCurrentPage"]
+        "current": ["watchcurrent"]
     }; }
     static get style() { return JumpPaginationStyle0; }
 }, [0, "jump-pagination", {
-        "totalElements": [514, "total-elements"],
-        "pagLabel": [513, "pag-label"],
-        "initialPage": [514, "initial-page"],
-        "lastPage": [514, "last-page"],
-        "labelElementsPerPage": [513, "label-elements-per-page"],
-        "elementsRanges": [16],
-        "completeVersion": [516, "complete-version"],
-        "showFirstAndLast": [516, "show-first-and-last"],
-        "firstPage": [32],
-        "currentPage": [32]
+        "pagLabel": [1, "pag-label"],
+        "last": [2],
+        "showFirstAndLast": [4, "show-first-and-last"],
+        "current": [32]
     }, undefined, {
-        "currentPage": ["watchCurrentPage"]
+        "current": ["watchcurrent"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/jump-pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"jump-pagination.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,~~uoCAAuoC~~,CAAC;~~AAClqC~~,6BAAe,iBAAiB;;MCMnBA,gBAAc;;;;;~~yBAMI~~,CAAC~~;;;wBAqBW~~,IAAI;~~2BAED~~,~~CAAC;wBAEJ,~~EAAE;~~oCAKU~~,~~qBAAqB;8BAKnB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;+BAMtB,~~KAAK~~;gCAEJ,KAAK~~;;~~IAtCxD~~,~~gBAAgB~~,CAAC,QAAgB,EAAE,QAAgB;~~QACjD~~,IAAI,OAAO,GAAG;YACZ,~~WAAW~~,EAAE,QAAQ;~~YACrB~~,YAAY,EAAE,QAAQ;YACtB,~~SAAS~~,EAAE,~~IAAI,~~CAAC~~,SAAS~~;~~YACzB~~,~~QAAQ~~,EAAE,IAAI,CAAC,~~QAAQ~~;~~YACvB~~,SAAS,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM;SACjD,CAAC;QAEF,IAAI,CAAC,~~cAAc~~,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;~~KACnC~~;;~~IAkCD~~,iBAAiB;QACf,IAAI,CAAC,~~WAAW~~,GAAG,~~IAAI,~~CAAC,~~WAAW,~~CAAC;~~KACrC~~;IAED,MAAM;;QACJ,~~OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACrD,~~QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1B,4DAAK,KAAK,EAAC,yBAAyB,~~IAChC,IAAI,CAAC,eAAe;YACpB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DAAO,OAAO,EAAC,UAAU,IAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,mBAAmB,CAAS,EAChF,+DAAQ,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,~~IAClC,~~IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,MAC7B,cAAQ,KAAK,EAAE,KAAK,IAAG,KAAK,CAAU,CACvC,CAAC,CACK,CACT,EAER,~~4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,KAAK,EAAC,UAAU,~~IAClB~~,IAAI,CAAC,~~eAAe;YACnB~~,~~gBACE,gBAAO,IAAI,CAAC,SAAS,~~CAAQ,~~SAAG,gBAAO,IAAI,CAAC,WAAW,CAAQ,~~OAAE,IAAI,CAAC,QAAQ,OAAE,~~gBAAO,~~IAAI,CAAC,~~aAAa,CAAQ,CAC5G;;gBAGP,gBACE,gBAAO,~~IAAI,~~CAAC,WAAW,~~CAAQ,~~OAAE~~,~~IAAI~~,~~CAAC,QAAQ,OAAE,gBAAO,IAAI,CAAC,QAAQ,CAAQ,CACvE,CAEL,~~EACN,4DAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,gBAAgB;YACpB,+DACE,OAAO,EAAE,QAAO,IAAI,CAAC,~~WAAW~~,GAAG,~~IAAI,~~CAAC,~~SAAS,~~CAAA,EAAC,~~EAClD~~,QAAQ,EAAE,CAAC,IAAI,CAAC,~~WAAW~~,KAAK,~~IAAI,~~CAAC,~~SAAS,~~IAAI,IAAI,GAAG,KAAK,~~SAC9D~~,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa,QAAY,EAE1E,+DACE,OAAO,EAAE,QAAO,IAAI,CAAC,~~WAAW~~,EAAE,CAAA,EAAC,~~EACnC~~,QAAQ,EAAE,CAAC,IAAI,CAAC,~~WAAW~~,KAAK,~~IAAI,~~CAAC,~~SAAS,~~IAAI,IAAI,GAAG,KAAK,~~SAC9D~~,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,GAAa,QAAY,EACvE,+DACE,OAAO,EAAE,QAAO,IAAI,CAAC,~~WAAW~~,EAAE,CAAA,EAAC,~~EACnC~~,QAAQ,EAAE,CAAC,IAAI,CAAC,~~WAAW~~,KAAK,IAAI,CAAC,~~QAAQ~~,IAAI,IAAI,GAAG,KAAK,~~SAC3D~~,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa,QAAY,EACzE,IAAI,CAAC,gBAAgB;YACpB,+DACE,OAAO,EAAE,QAAO,IAAI,CAAC,~~WAAW~~,GAAG,IAAI,CAAC,~~QAAQ~~,CAAA,EAAC,~~EACjD~~,QAAQ,EAAE,CAAC,IAAI,CAAC,~~WAAW~~,KAAK,IAAI,CAAC,~~QAAQ~~,IAAI,IAAI,GAAG,KAAK,~~SAC3D~~,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,gBAAgB,GAAa,QAAY,CAEzE,CACF,CACF,CACD,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["JumpPagination"],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPagination {\n --pagination-label~~-color~~: var(--neutral-grey-secondary);\n --pagination-arrows-color: var(--neutral-grey-secondary);\n --pagination-arrows-disabled: ~~#CBCBCB~~;\n \n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n\n .~~elementsPerPage~~ {\n ~~display: flex;\n gap: 1rem;\n align~~-~~items~~: ~~center;\n\n label {\n color:~~ var(--~~pagination~~-~~label-color~~);\n ~~font-size: 14px;\n font-weight: normal;\n }\n } \n \n .indicators {\n~~ font-~~size: 16px;\n font-~~weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--pagination-label~~-color~~);\n\n .arrow {\n color: var(--pagination-arrows-color);\n display: flex;\n align-items: center;\n gap: 10px;\n\n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n\n button:disabled {\n cursor: not-allowed;\n color: var(--pagination-arrows-disabled); \n \n }\n }\n\n .elements {\n color: var(--pagination-label~~-color~~);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n \n }\n \n}","import { Component, Host, State, Event, EventEmitter, Prop, h, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination',\n styleUrl: 'jump-pagination.scss',\n shadow: false,\n})\nexport class JumpPagination {\n \n /* ---------------------- @STATE ------------------------- /\n ~~/\n Indicates the first page/product of the list\n /\n~~ @State() ~~firstPage~~: number = 1;\n\n @~~State() currentPage: number;\n\n @~~Watch('~~currentPage~~')\n ~~watchCurrentPage~~(newValue: number, oldValue: number) {\n let details = {\n ~~currentPage~~: newValue,\n previousPage: oldValue,\n ~~firstPage~~: ~~this.firstPage~~,\n ~~lastPage~~: this.~~lastPage~~,\n direction: newValue > oldValue ? 'next' : 'prev'\n };\n\n this.~~jumpChangePage~~.emit(details);\n }\n\n / ---------------------- @PROPERTIES ------------------------- /\n\n @Prop(~~{reflect:true}~~) ~~totalElements: number;\n\n @Prop({reflect:true})~~ pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n @Prop(~~{reflect:true}~~) ~~initialPage~~: number = ~~1;\n\n @Prop({reflect:true}) lastPage: number =~~ 10; \n\n ~~/\n Label for the elements per page select\n /\n~~ @Prop(~~{reflect:true}~~) labelElementsPerPage: string = 'Elementi per pagina';\n\n /\n Values for the elements per page select\n /\n @Prop({reflect:true}) elementsRanges: Array<number> = [10, 20, 60, 100];\n\n\n /\n If true, the component will show the complete version of the pagination, with elements informations\n /\n @Prop({reflect:true}) completeVersion: boolean = false;\n\n @Prop({reflect:true}) showFirstAndLast: boolean = false;\n\n / ---------------------- @EVENTS ------------------------- /\n @Event({ eventName: 'jump-change-page' }) ~~jumpChangePage~~: EventEmitter;\n\n / ---------------------- @LIFECYCLE ------------------------- */\n componentWillLoad() {\n this.~~currentPage~~ = ~~this.initialPage~~;\n }\n\n render() {\n ~~console.log('completeVersion', this.completeVersion);\n~~ return (\n <Host class=\"JumpPagination\">\n <div class=\"JumpPagination__Wrapper\">\n ~~{ this.completeVersion && \n~~ <div class=\"elementsPerPage\">\n <label htmlFor=\"elements\">{this.labelElementsPerPage ?? 'Elements per page'}</label>\n <select name=\"elements\" id=\"elements\">\n {this.elementsRanges.map((range) => (\n <option value={range}>{range}</option>\n ))}\n </select>\n </div> \n }\n <div class=\"indicators\"> \n <div class=\"elements\">\n ~~{this.completeVersion ?\n~~ <span>\n <span>{this.~~firstPage~~}</span> ~~- <span>~~{this.~~currentPage}</span> {this.~~pagLabel} <span>{this.~~totalElements~~}</span>\n ~~</span>\n \n~~ ~~:\n <span>\n <span>{this.currentPage}~~</span~~> {this.pagLabel} <span>{this.lastPage}</span~~>\n ~~</span>\n }\n~~ </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n <button \n onClick={() => {this.~~currentPage~~ = ~~this.firstPage~~} }\n disabled={(this.~~currentPage~~ === ~~this.firstPage~~) ? true : false}\n > <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon> </button>\n }\n <button \n onClick={() => {this.~~currentPage~~--}} \n disabled={(this.~~currentPage~~ === ~~this.firstPage~~) ? true : false}\n > <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon> </button>\n <button \n onClick={() => {this.~~currentPage~~++}}\n disabled={(this.~~currentPage~~ === this.~~lastPage~~) ? true : false}\n > <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon> </button>\n {this.showFirstAndLast &&\n <button \n onClick={() => {this.~~currentPage~~ = this.~~lastPage~~}}\n disabled={(this.~~currentPage~~ === this.~~lastPage~~) ? true : false}\n > <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon> </button> \n }\n </div> \n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"jump-pagination.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,6+BAA6+B,CAAC;AACxgC,6BAAe,iBAAiB;;MCMnBA,gBAAc;;;;;uBAGE,CAAC;wBAgBD,IAAI;oBAER,EAAE;gCAEW,KAAK;;IAjBzC,YAAY,CAAC,QAAgB,EAAE,QAAgB;QAC7C,IAAI,OAAO,GAAG;YACZ,OAAO,EAAE,QAAQ;YACjB,YAAY,EAAE,QAAQ;YACtB,KAAK,EAAE,CAAC;YACR,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,QAAQ,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM;SACjD,CAAC;QAEF,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC/B;;IAaD,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;KAClB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1B,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAC,YAAY,IACrB,4DAAK,KAAK,EAAC,UAAU,IACnB,+DACE,+DAAO,IAAI,CAAC,OAAO,CAAQ,OAAE,IAAI,CAAC,QAAQ,OAAE,+DAAO,IAAI,CAAC,IAAI,CAAQ,CAC/D,CACH,EACN,4DAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,gBAAgB;YACpB,+DACE,OAAO,EAAE,QAAO,IAAI,CAAC,OAAO,GAAG,CAAC,CAAA,EAAC,EACjC,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,IAAI,GAAG,KAAK,SAC7C,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa,QAAY,EAE1E,+DACE,OAAO,EAAE,QAAO,IAAI,CAAC,OAAO,EAAE,CAAA,EAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,IAAI,GAAG,KAAK,SAC7C,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,GAAa,QAAY,EACvE,+DACE,OAAO,EAAE,QAAO,IAAI,CAAC,OAAO,EAAE,CAAA,EAAC,EAC/B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,SACnD,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa,QAAY,EACzE,IAAI,CAAC,gBAAgB;YACpB,+DACE,OAAO,EAAE,QAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAA,EAAC,EACzC,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,KAAK,SACnD,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,gBAAgB,GAAa,QAAY,CAEzE,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpPagination"],"sources":["src/components/jump-pagination/jump-pagination.scss?tag=jump-pagination","src/components/jump-pagination/jump-pagination.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.JumpPagination {\n --jump-pagination-label: var(--neutral-grey-secondary);\n --jump-pagination-arrows-color: var(--neutral-grey-secondary);\n --jump-pagination-arrows-disabled: var(--neutral-grey-disabled);\n \n font-family: var(--ff-primary);\n\n &__Wrapper {\n display: flex;\n justify-content: space-between;\n\n .indicators {\n font-size: var(--fs-400);\n font-weight: normal;\n display: flex;\n justify-content: space-between;\n gap: 20px;\n \n color: var(--jump-pagination-label);\n\n .arrow {\n color: var(--jump-pagination-arrows-color);\n display: flex;\n align-items: center;\n gap: 10px;\n\n button {\n background-color: transparent;\n border: none;\n cursor: pointer;\n padding: 0px;\n display: flex;\n align-items: center;\n }\n\n button:disabled {\n cursor: not-allowed;\n color: var(--jump-pagination-arrows-disabled); \n }\n }\n\n .elements {\n color: var(--jump-pagination-label);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n }\n }\n}","import { Component, Host, State, Event, EventEmitter, Prop, h, Watch } from '@stencil/core';\n\n@Component({\n tag: 'jump-pagination',\n styleUrl: 'jump-pagination.scss',\n shadow: false,\n})\nexport class JumpPagination {\n \n /* ---------------------- @STATE ------------------------- /\n @State() current: number = 1;\n\n @Watch('current')\n watchcurrent(newValue: number, oldValue: number) {\n let details = {\n current: newValue,\n previousPage: oldValue,\n first: 1,\n last: this.last,\n direction: newValue > oldValue ? 'next' : 'prev'\n };\n\n this.changePage.emit(details);\n }\n\n / ---------------------- @PROPERTIES ------------------------- /\n @Prop() pagLabel: string = 'di'; // Identifica la label testuale di pagination. \n\n @Prop() last: number = 10; \n\n @Prop() showFirstAndLast: boolean = false;\n\n / ---------------------- @EVENTS ------------------------- /\n @Event({ eventName: 'jump-change-page' }) changePage: EventEmitter;\n\n / ---------------------- @LIFECYCLE ------------------------- */\n componentWillLoad() {\n this.current = 1;\n }\n \n render() {\n return (\n <Host class=\"JumpPagination\">\n <div class=\"JumpPagination__Wrapper\">\n <div class=\"indicators\"> \n <div class=\"elements\">\n <span>\n <span>{this.current}</span> {this.pagLabel} <span>{this.last}</span>\n </span>\n </div>\n <div class=\"arrow\">\n {this.showFirstAndLast &&\n <button \n onClick={() => {this.current = 1} }\n disabled={(this.current === 1) ? true : false}\n > <jump-icon slot=\"prefix\" name=\"chevrons-left\"></jump-icon> </button>\n }\n <button \n onClick={() => {this.current--}} \n disabled={(this.current === 1) ? true : false}\n > <jump-icon slot=\"prefix\" name=\"chevron-left\"></jump-icon> </button>\n <button \n onClick={() => {this.current++}}\n disabled={(this.current === this.last) ? true : false}\n > <jump-icon slot=\"prefix\" name=\"chevron-right\"></jump-icon> </button>\n {this.showFirstAndLast &&\n <button \n onClick={() => {this.current = this.last}}\n disabled={(this.current === this.last) ? true : false}\n > <jump-icon slot=\"prefix\" name=\"chevrons-right\"></jump-icon> </button> \n }\n </div> \n </div>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/components/jump-tab.js CHANGED Viewed

@@ -17,7 +17,7 @@ const JumpTab$1 = /*@__PURE__*/ proxyCustomElement(class JumpTab extends HTMLEle
         console.log('tabNames', this.tabNames);
     }
     render() {
-        return (h(Host, { key: '08d20c1e157286fd4034790df04c2f7113e57e43', class: "JumpTab" }, (this.tabNames && this.activeTab) && this.tabNames.map((tabName) => (h("div", { class: `JumpTab__Tab ${this.activeTab === tabName ? 'active' : ''}` }, tabName)))));
+        return (h(Host, { key: '6d974852fbbf04550ddd7eaad3dafbf784513c78', class: "JumpTab" }, (this.tabNames && this.activeTab) && this.tabNames.map((tabName) => (h("div", { class: `JumpTab__Tab ${this.activeTab === tabName ? 'active' : ''}` }, tabName)))));
     }
     static get style() { return JumpTabStyle0; }
 }, [1, "jump-tab", {

package/dist/esm/jump-badge.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-192aeaf1.js';
-const jumpBadgeCss = "jump-badge{--jump-badge-background:var(--primary-standard);--jump-badge-color:#fff;--jump-bafge-border-radius:50px;display:inline-flex;color:var(--jump-badge-color);background-color:var(--jump-badge-background);align-items:center;justify-content:center;font-size:var(--fs-300);font-weight:var(--fw-700);line-height:1;border-radius:var(--jump-bafge-border-radius);border:solid 1px var(--jump-bafge-border-radius);white-space:nowrap;padding:0.35em 0.6em;user-select:none;cursor:inherit}jump-badge[variant=primary]{--jump-badge-background:var(--primary-standard)}jump-badge[variant=secondary]{--jump-badge-background:var(--secondary-standard)}";
+const jumpBadgeCss = "jump-badge{--jump-badge-background:var(--primary-standard);--jump-badge-color:#fff;--jump-bafge-border-radius:50px;display:inline-flex;color:var(--jump-badge-color);background-color:var(--jump-badge-background);align-items:center;justify-content:center;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-size:var(--fs-300);font-weight:var(--fw-900);line-height:1;border-radius:var(--jump-bafge-border-radius);border:solid 1px var(--jump-bafge-border-radius);white-space:nowrap;padding:0.35em 0.6em;user-select:none;cursor:inherit}jump-badge[variant=primary]{--jump-badge-background:var(--primary-standard)}jump-badge[variant=secondary]{--jump-badge-background:var(--secondary-standard)}";
 const JumpBadgeStyle0 = jumpBadgeCss;
 const AppBadge = class {

package/dist/esm/jump-badge.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"jump-badge.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,~~koBAAkoB~~,CAAC;~~AACxpB~~,wBAAe,YAAY;;MCMd,QAAQ;;;qBAIK,EAAE;uBAKe,SAAS;;IAElD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxB,IAAI,CAAC,KAAK,CACN,EACP;KACH;;;;;;","names":[],"sources":["src/components/jump-badge/jump-badge.scss?tag=jump-badge","src/components/jump-badge/jump-badge.tsx"],"sourcesContent":["jump-badge {\n --jump-badge-background: var(--primary-standard);\n --jump-badge-color: #fff;\n --jump-bafge-border-radius: 50px;\n\n display: inline-flex;\n color: var(--jump-badge-color);\n background-color: var(--jump-badge-background);\n align-items: center;\n justify-content: center;\n font-size: var(--fs-300);\n font-weight: var(--fw-~~700~~);\n line-height: 1;\n border-radius: var(--jump-bafge-border-radius);\n border: solid 1px var(--jump-bafge-border-radius);\n white-space: nowrap;\n padding: 0.35em 0.6em;\n user-select: none;\n cursor: inherit;\n\n &[variant='primary'] {\n --jump-badge-background: var(--primary-standard);\n }\n\n &[variant='secondary'] {\n --jump-badge-background: var(--secondary-standard);\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-badge',\n styleUrl: 'jump-badge.scss',\n shadow: false,\n})\nexport class AppBadge {\n /*\n Indicates the label of the badge\n /\n @Prop() label: string = '';\n\n /\n Indicates the variant of the badge\n */\n @Prop() variant: 'primary'\|'secondary' = 'primary';\n\n render() {\n return (\n <Host variant={this.variant}>\n {this.label}\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"jump-badge.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,urBAAurB,CAAC;AAC7sB,wBAAe,YAAY;;MCMd,QAAQ;;;qBAIK,EAAE;uBAKe,SAAS;;IAElD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACxB,IAAI,CAAC,KAAK,CACN,EACP;KACH;;;;;;","names":[],"sources":["src/components/jump-badge/jump-badge.scss?tag=jump-badge","src/components/jump-badge/jump-badge.tsx"],"sourcesContent":["jump-badge {\n --jump-badge-background: var(--primary-standard);\n --jump-badge-color: #fff;\n --jump-bafge-border-radius: 50px;\n\n display: inline-flex;\n color: var(--jump-badge-color);\n background-color: var(--jump-badge-background);\n align-items: center;\n justify-content: center;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n font-size: var(--fs-300);\n font-weight: var(--fw-900);\n line-height: 1;\n border-radius: var(--jump-bafge-border-radius);\n border: solid 1px var(--jump-bafge-border-radius);\n white-space: nowrap;\n padding: 0.35em 0.6em;\n user-select: none;\n cursor: inherit;\n\n &[variant='primary'] {\n --jump-badge-background: var(--primary-standard);\n }\n\n &[variant='secondary'] {\n --jump-badge-background: var(--secondary-standard);\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-badge',\n styleUrl: 'jump-badge.scss',\n shadow: false,\n})\nexport class AppBadge {\n /*\n Indicates the label of the badge\n /\n @Prop() label: string = '';\n\n /\n Indicates the variant of the badge\n */\n @Prop() variant: 'primary'\|'secondary' = 'primary';\n\n render() {\n return (\n <Host variant={this.variant}>\n {this.label}\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/esm/jump-button.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-192aeaf1.js';
-const jumpButtonCss = ":root{--neutral-grey-background:#eeeeee;--neutral-grey-disabled:#cbcbcb;--neutral-grey-primary:#282828;--neutral-grey-secondary:#707070;--neutral-white:#ffffff;--primary-hard:#e75a50;--primary-soft:#ffeae9;--primary-standard:#fa7268;--secondary-hard:#435171;--secondary-soft:#dde3ed;--secondary-standard:#5e79ba;--status-danger-hard:#ba250a;--status-danger-soft:#fdd3d1;--status-danger-standard:#d72c0d;--status-interaction-hard:#22559e;--status-interaction-soft:#f2f7fe;--status-interaction-standard:#2c6ecb;--status-success-hard:#156048;--status-success-soft:#f1f8f5;--status-success-standard:#1d7f60;--status-warning-hard:#987100;--status-warning-soft:#fef5ea;--status-warning-standard:#b98900;--ff-primary:\"Inter\";--ff-secondary:\"Prompt\";--lh-300:1.25rem;--lh-400:1.5rem;--lh-500:1.625rem;--lh-600:2rem;--lh-700:2.75rem;--lh-800:3.5rem;--lh-850:4.375rem;--lh-900:5.5rem;--fs-300:0.875rem;--fs-400:1rem;--fs-500:1.125rem;--fs-600:1.5rem;--fs-700:2.25rem;--fs-800:3rem;--fs-850:3.75rem;--fs-900:4.5rem;--fw-300:300;--fw-400:400;--fw-900:700}:host button,:host a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host{--jump-button-color:#ffffff;--jump-button-color-disabled:#cbcbcb;--jump-button-background:var(--primary-standard);--jump-button-background-outline:transparent;--jump-button-color-hover:#ffffff;--jump-button-background-hover:var(--primary-hard);--jump-button-border-radius:var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);--jump-button-padding:1rem 1.25rem}:host button,:host a{background-color:var(--jump-button-background);border-radius:var(--jump-button-border-radius);color:var(--jump-button-color);position:relative;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-weight:var(--fw-700, 700);font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);display:flex;align-items:center;gap:var(--jump-button-gap, 0.5rem);text-decoration:none;padding:var(--jump-button-padding)}:host button:hover,:host a:hover{background-color:var(--jump-button-background-hover);color:var(--jump-button-color-hover)}:host button[data-variant=primary],:host a[data-variant=primary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--primary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--primary-hard)}:host button[data-variant=secondary],:host a[data-variant=secondary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--secondary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--secondary-hard)}:host button[data-variant=neutral],:host a[data-variant=neutral]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--neutral-grey-secondary);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--neutral-grey-primary)}:host button[data-variant=white],:host a[data-variant=white]{--jump-button-color:var(--neutral-grey-primary);--jump-button-background:var(--neutral-white);--jump-button-color-hover:var(--neutral-grey-primary);--jump-button-background-hover:var(--neutral-grey-background)}:host button[disabled],:host a[disabled]{--jump-button-background:var(--jump-button-color-disabled);--jump-button-background-hover:var(--jump-button-color-disabled);cursor:not-allowed}:host button[data-pill],:host a[data-pill]{border-radius:100rem}:host button[data-size=small],:host a[data-size=small]{font-size:var(--fs-300, 0.875rem);line-height:var(--lh-300, 1.2);--jump-button-padding:0.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);--jump-button-padding:0.75rem 1.25rem}:host button[data-size=large],:host a[data-size=large]{font-size:var(--fs-500, 1.125rem);line-height:var(--lh-500, 1.4);--jump-button-padding:1rem 1.5rem}:host button[data-outline],:host a[data-outline]{background-color:var(--jump-button-background-outline);border:1px solid var(--jump-button-background);color:var(--jump-button-background)}:host button[data-outline]:hover,:host a[data-outline]:hover{background-color:var(--jump-button-background-hover);border:1px solid var(--jump-button-background-hover);color:var(--jump-button-color-hover)}:host button[data-text],:host a[data-text]{background-color:transparent;border:none;color:var(--jump-button-background);padding:0}:host button[data-text]:hover,:host a[data-text]:hover{background-color:transparent;border:none;color:var(--jump-button-background-hover)}:host button[data-only-icon],:host a[data-only-icon]{--jump-button-padding:0.5rem}:host button[data-only-icon][data-size=small],:host a[data-only-icon][data-size=small]{--jump-button-padding:0.5rem}:host button[data-only-icon][data-size=medium],:host a[data-only-icon][data-size=medium]{--jump-button-padding:0.875rem}:host button[data-only-icon][data-size=large],:host a[data-only-icon][data-size=large]{--jump-button-padding:1rem}:host button.chat,:host a.chat{--jump-button-color:var(--neutral-white);--jump-button-background:hsla(133, 54%, 58%, 1);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:hsla(161, 63%, 31%, 1)}:host button[data-full]{width:100%;justify-content:center}:host a{display:inline-flex}:host a[data-full]{width:100%;justify-content:center}";
+const jumpButtonCss = ":host button,:host a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host{--jump-button-color:#ffffff;--jump-button-color-disabled:#cbcbcb;--jump-button-background:var(--primary-standard);--jump-button-background-outline:transparent;--jump-button-color-hover:#ffffff;--jump-button-background-hover:var(--primary-hard);--jump-button-border-radius:var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);--jump-button-padding:1rem 1.25rem}:host button{display:flex}:host a{display:inline-flex;box-sizing:border-box}:host button,:host a{background-color:var(--jump-button-background);border-radius:var(--jump-button-border-radius);color:var(--jump-button-color);position:relative;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-weight:var(--fw-700, 700);font-size:var(--fs-400, 1rem);line-height:1;align-items:center;gap:var(--jump-button-gap, 0.5rem);text-decoration:none;padding:var(--jump-button-padding)}:host button:hover,:host a:hover{background-color:var(--jump-button-background-hover);color:var(--jump-button-color-hover)}:host button[data-variant=primary],:host a[data-variant=primary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--primary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--primary-hard)}:host button[data-variant=secondary],:host a[data-variant=secondary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--secondary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--secondary-hard)}:host button[data-variant=neutral],:host a[data-variant=neutral]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--neutral-grey-secondary);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--neutral-grey-primary)}:host button[data-variant=white],:host a[data-variant=white]{--jump-button-color:var(--neutral-grey-primary);--jump-button-background:var(--neutral-white);--jump-button-color-hover:var(--neutral-grey-primary);--jump-button-background-hover:var(--neutral-grey-background)}:host button[disabled],:host a[disabled]{--jump-button-background:var(--jump-button-color-disabled);--jump-button-background-hover:var(--jump-button-color-disabled);cursor:not-allowed}:host button[data-pill],:host a[data-pill]{border-radius:100rem}:host button[data-size=small],:host a[data-size=small]{font-size:var(--fs-300, 0.875rem);--jump-button-padding:0.65rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);--jump-button-padding:0.75rem 1.25rem}:host button[data-size=large],:host a[data-size=large]{font-size:var(--fs-500, 1.125rem);--jump-button-padding:1rem 1.5rem}:host button[data-outline],:host a[data-outline]{background-color:var(--jump-button-background-outline);border:1px solid var(--jump-button-background);color:var(--jump-button-background)}:host button[data-outline]:hover,:host a[data-outline]:hover{background-color:var(--jump-button-background-hover);border:1px solid var(--jump-button-background-hover);color:var(--jump-button-color-hover)}:host button[data-text],:host a[data-text]{background-color:transparent;border:none;color:var(--jump-button-background);padding:0}:host button[data-text]:hover,:host a[data-text]:hover{background-color:transparent;border:none;color:var(--jump-button-background-hover)}:host button[data-only-icon],:host a[data-only-icon]{--jump-button-padding:0.5rem}:host button[data-only-icon][data-size=small],:host a[data-only-icon][data-size=small]{--jump-button-padding:0.5rem}:host button[data-only-icon][data-size=medium],:host a[data-only-icon][data-size=medium]{--jump-button-padding:0.875rem}:host button[data-only-icon][data-size=large],:host a[data-only-icon][data-size=large]{--jump-button-padding:1rem}:host button[data-full],:host a[data-full]{width:100%;justify-content:center}:host button.chat,:host a.chat{--jump-button-color:var(--neutral-white);--jump-button-background:hsla(133, 54%, 58%, 1);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:hsla(161, 63%, 31%, 1)}";
 const JumpButtonStyle0 = jumpButtonCss;
 const JumpButton = class {

package/dist/esm/jump-button.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"jump-button.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,gxKAAgxK,CAAC;AACvyK,yBAAe,aAAa;;MCMf,UAAU;;;wBAIO,KAAK;uBAK0B,SAAS;uBAKzC,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;oBAKL,KAAK;wBAKD,KAAK;;;oBAeS,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEpC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;KACjD;IAED,MAAM;QAEJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACtR,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJ,cAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACnU,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;;;","names":[],"sources":["src/components/jump-button/jump-button.scss?tag=jump-button&encapsulation=shadow","src/components/jump-button/jump-button.tsx"],"sourcesContent":[":root {\n /BASE COLOR RULES/\n --neutral-grey-background: #eeeeee;\n --neutral-grey-disabled: #cbcbcb;\n --neutral-grey-primary: #282828;\n --neutral-grey-secondary: #707070;\n --neutral-white: #ffffff;\n --primary-hard: #e75a50;\n --primary-soft: #ffeae9;\n --primary-standard: #fa7268;\n --secondary-hard: #435171;\n --secondary-soft: #dde3ed;\n --secondary-standard: #5e79ba;\n --status-danger-hard: #ba250a;\n --status-danger-soft: #fdd3d1;\n --status-danger-standard: #d72c0d;\n --status-interaction-hard: #22559e;\n --status-interaction-soft: #f2f7fe;\n --status-interaction-standard: #2c6ecb;\n --status-success-hard: #156048;\n --status-success-soft: #f1f8f5;\n --status-success-standard: #1d7f60;\n --status-warning-hard: #987100;\n --status-warning-soft: #fef5ea;\n --status-warning-standard: #b98900;\n\n /TYPOGRAPHY RULES/\n --ff-primary: 'Inter';\n --ff-secondary: 'Prompt';\n\n --lh-300: 1.25rem;\n --lh-400: 1.5rem;\n --lh-500: 1.625rem;\n --lh-600: 2rem;\n --lh-700: 2.75rem;\n --lh-800: 3.5rem;\n --lh-850: 4.375rem;\n --lh-900: 5.5rem;\n --fs-300: 0.875rem;\n --fs-400: 1rem;\n --fs-500: 1.125rem;\n --fs-600: 1.5rem;\n --fs-700: 2.25rem;\n --fs-800: 3rem;\n --fs-850: 3.75rem;\n --fs-900: 4.5rem;\n --fw-300: 300;\n --fw-400: 400;\n --fw-900: 700;\n}\n\n%reset-button {\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\n:host {\n // display: inline-flex;\n // align-items: center;\n --jump-button-color: #ffffff;\n --jump-button-color-disabled: #cbcbcb;\n --jump-button-background: var(--primary-standard);\n --jump-button-background-outline: transparent;\n --jump-button-color-hover: #ffffff;\n --jump-button-background-hover: var(--primary-hard);\n --jump-button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);\n --jump-button-padding: 1rem 1.25rem;\n\n button,\n a {\n @extend %reset-button;\n background-color: var(--jump-button-background);\n border-radius: var(--jump-button-border-radius);\n color: var(--jump-button-color);\n position: relative;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n font-weight: var(--fw-700, 700);\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n display: flex;\n align-items: center;\n gap: var(--jump-button-gap, 0.5rem);\n text-decoration: none;\n\n //TODO: internal padding of the button\n padding: var(--jump-button-padding);\n\n // TODO: gestire il focus con un outline\n &:hover {\n background-color: var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n\n &[data-variant='primary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--primary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--primary-hard);\n }\n\n &[data-variant='secondary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--secondary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--secondary-hard);\n }\n\n &[data-variant='neutral'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--neutral-grey-secondary);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--neutral-grey-primary);\n }\n\n &[data-variant='white'] {\n --jump-button-color: var(--neutral-grey-primary);\n --jump-button-background: var(--neutral-white);\n --jump-button-color-hover: var(--neutral-grey-primary);\n --jump-button-background-hover: var(--neutral-grey-background);\n }\n\n &[disabled] {\n --jump-button-background: var(--jump-button-color-disabled);\n --jump-button-background-hover: var(--jump-button-color-disabled);\n cursor: not-allowed;\n }\n\n &[data-pill] {\n border-radius: 100rem;\n }\n\n &[data-size='small'] {\n font-size: var(--fs-300, 0.875rem);\n line-height: var(--lh-300, 1.2);\n --jump-button-padding: 0.65rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n --jump-button-padding: 0.75rem 1.25rem;\n }\n\n &[data-size='large'] {\n font-size: var(--fs-500, 1.125rem);\n line-height: var(--lh-500, 1.4);\n --jump-button-padding: 1rem 1.5rem;\n }\n\n &[data-outline] {\n background-color: var(--jump-button-background-outline);\n border: 1px solid var(--jump-button-background);\n color: var(--jump-button-background);\n &:hover {\n background-color: var(--jump-button-background-hover);\n border: 1px solid var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n }\n\n &[data-text] {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background);\n padding: 0;\n &:hover {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background-hover);\n }\n }\n\n &[data-only-icon] {\n --jump-button-padding: 0.5rem;\n }\n\n &[data-only-icon][data-size='small'] {\n --jump-button-padding: 0.5rem;\n }\n &[data-only-icon][data-size='medium'] {\n --jump-button-padding: 0.875rem;\n }\n &[data-only-icon][data-size='large'] {\n --jump-button-padding: 1rem;\n }\n\n &.chat {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: hsla(133, 54%, 58%, 1);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: hsla(161, 63%, 31%, 1);\n }\n }\n\n button {\n &[data-full] {\n width: 100%;\n justify-content: center;\n }\n }\n\n a {\n display: inline-flex;\n\n &[data-full] {\n width: 100%;\n justify-content: center;\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-button',\n styleUrl: 'jump-button.scss',\n shadow: true,\n})\nexport class JumpButton {\n /*\n Set the button as disabled; Vale solo per i bottoni\n /\n @Prop() disabled: boolean = false;\n\n /\n Indicates the variant of the button\n /\n @Prop() variant: 'primary'\|'secondary'\|'white'\|'neutral' = 'primary';\n\n /\n Indicates the button as outline\n /\n @Prop() outline: boolean = false;\n\n /\n Indicates the size of the button\n /\n @Prop() size: string = 'medium';\n\n /\n Indicates if the button is full width\n /\n @Prop() full: boolean = false;\n\n /\n Indicates the button as pill\n /\n @Prop() pill: boolean = false;\n\n /\n Indicates the button as text\n /\n @Prop() text: boolean = false;\n\n /\n Indicates the button as only icon\n /\n @Prop() onlyIcon: boolean = false;\n\n /\n * Indicates if button becames a anchor\n /\n @Prop() href: string;\n\n /\n * Indicates the type of anchor's target \n /\n @Prop() target: '_blank' \| '_parent' \| '_self' \| '_top'\n\n /\n * Indicates type button\n /\n @Prop() type: 'button'\|'submit'\|'reset' = 'button';\n\n /\n * Indicates the name that the sender button will send\n /\n @Prop() name: string = undefined;\n\n /\n * Indicates the value that the sender button will send\n /\n @Prop() value: string = undefined;\n\n /\n * Indicates the value of text alternative to an element that has no visible text on the screen\n /\n @Prop() ariaLabel: string = undefined;\n\n /\n * Indicates classes of the component\n /\n @Prop() class: string = undefined;\n\n /\n * Indicates classes of the component\n **/\n @Prop() buttonId: string = undefined;\n\n componentWillLoad() {\n this.target = this.href ? this.target : '_self';\n }\n\n render() {\n \n return (\n <Host>\n {this.href ? (\n <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot>}\n <slot name=\"suffix\"></slot>\n </a>\n ) : ( \n <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot> }\n <slot name=\"suffix\"></slot>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"jump-button.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,4oIAA4oI,CAAC;AACnqI,yBAAe,aAAa;;MCMf,UAAU;;;wBAIO,KAAK;uBAK0B,SAAS;uBAKzC,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;oBAKL,KAAK;wBAKD,KAAK;;;oBAeS,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEpC,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;KACjD;IAED,MAAM;QAEJ,QACE,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,IACR,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACtR,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJ,cAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACnU,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;;;","names":[],"sources":["src/components/jump-button/jump-button.scss?tag=jump-button&encapsulation=shadow","src/components/jump-button/jump-button.tsx"],"sourcesContent":["%reset-button {\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\n:host {\n --jump-button-color: #ffffff;\n --jump-button-color-disabled: #cbcbcb;\n --jump-button-background: var(--primary-standard);\n --jump-button-background-outline: transparent;\n --jump-button-color-hover: #ffffff;\n --jump-button-background-hover: var(--primary-hard);\n --jump-button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);\n --jump-button-padding: 1rem 1.25rem;\n\n button {\n display: flex;\n }\n\n a {\n display: inline-flex;\n box-sizing: border-box;\n }\n\n button,\n a {\n @extend %reset-button;\n background-color: var(--jump-button-background);\n border-radius: var(--jump-button-border-radius);\n color: var(--jump-button-color);\n position: relative;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n font-weight: var(--fw-700, 700);\n font-size: var(--fs-400, 1rem);\n // line-height: var(--lh-400, 1.3);\n line-height: 1;\n align-items: center;\n gap: var(--jump-button-gap, 0.5rem);\n text-decoration: none;\n\n //TODO: internal padding of the button\n padding: var(--jump-button-padding);\n\n // TODO: gestire il focus con un outline\n &:hover {\n background-color: var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n\n &[data-variant='primary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--primary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--primary-hard);\n }\n\n &[data-variant='secondary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--secondary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--secondary-hard);\n }\n\n &[data-variant='neutral'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--neutral-grey-secondary);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--neutral-grey-primary);\n }\n\n &[data-variant='white'] {\n --jump-button-color: var(--neutral-grey-primary);\n --jump-button-background: var(--neutral-white);\n --jump-button-color-hover: var(--neutral-grey-primary);\n --jump-button-background-hover: var(--neutral-grey-background);\n }\n\n &[disabled] {\n --jump-button-background: var(--jump-button-color-disabled);\n --jump-button-background-hover: var(--jump-button-color-disabled);\n cursor: not-allowed;\n }\n\n &[data-pill] {\n border-radius: 100rem;\n }\n\n &[data-size='small'] {\n font-size: var(--fs-300, 0.875rem);\n --jump-button-padding: 0.65rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n --jump-button-padding: 0.75rem 1.25rem;\n }\n\n &[data-size='large'] {\n font-size: var(--fs-500, 1.125rem);\n --jump-button-padding: 1rem 1.5rem;\n }\n\n &[data-outline] {\n background-color: var(--jump-button-background-outline);\n border: 1px solid var(--jump-button-background);\n color: var(--jump-button-background);\n &:hover {\n background-color: var(--jump-button-background-hover);\n border: 1px solid var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n }\n\n &[data-text] {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background);\n padding: 0;\n &:hover {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background-hover);\n }\n }\n\n &[data-only-icon] {\n --jump-button-padding: 0.5rem;\n }\n\n &[data-only-icon][data-size='small'] {\n --jump-button-padding: 0.5rem;\n }\n &[data-only-icon][data-size='medium'] {\n --jump-button-padding: 0.875rem;\n }\n &[data-only-icon][data-size='large'] {\n --jump-button-padding: 1rem;\n }\n\n &[data-full] {\n width: 100%;\n justify-content: center;\n }\n\n &.chat {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: hsla(133, 54%, 58%, 1);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: hsla(161, 63%, 31%, 1);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-button',\n styleUrl: 'jump-button.scss',\n shadow: true,\n})\nexport class JumpButton {\n /*\n Set the button as disabled; Vale solo per i bottoni\n /\n @Prop() disabled: boolean = false;\n\n /\n Indicates the variant of the button\n /\n @Prop() variant: 'primary'\|'secondary'\|'white'\|'neutral' = 'primary';\n\n /\n Indicates the button as outline\n /\n @Prop() outline: boolean = false;\n\n /\n Indicates the size of the button\n /\n @Prop() size: string = 'medium';\n\n /\n Indicates if the button is full width\n /\n @Prop() full: boolean = false;\n\n /\n Indicates the button as pill\n /\n @Prop() pill: boolean = false;\n\n /\n Indicates the button as text\n /\n @Prop() text: boolean = false;\n\n /\n Indicates the button as only icon\n /\n @Prop() onlyIcon: boolean = false;\n\n /\n * Indicates if button becames a anchor\n /\n @Prop() href: string;\n\n /\n * Indicates the type of anchor's target \n /\n @Prop() target: '_blank' \| '_parent' \| '_self' \| '_top'\n\n /\n * Indicates type button\n /\n @Prop() type: 'button'\|'submit'\|'reset' = 'button';\n\n /\n * Indicates the name that the sender button will send\n /\n @Prop() name: string = undefined;\n\n /\n * Indicates the value that the sender button will send\n /\n @Prop() value: string = undefined;\n\n /\n * Indicates the value of text alternative to an element that has no visible text on the screen\n /\n @Prop() ariaLabel: string = undefined;\n\n /\n * Indicates classes of the component\n /\n @Prop() class: string = undefined;\n\n /\n * Indicates classes of the component\n **/\n @Prop() buttonId: string = undefined;\n\n componentWillLoad() {\n this.target = this.href ? this.target : '_self';\n }\n\n render() {\n \n return (\n <Host>\n {this.href ? (\n <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot>}\n <slot name=\"suffix\"></slot>\n </a>\n ) : ( \n <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-full={this.full} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot> }\n <slot name=\"suffix\"></slot>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/esm/jump-card.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-192aeaf1.js';
-const jumpCardCss = ":root{--neutral-grey-background:#eeeeee;--neutral-grey-disabled:#cbcbcb;--neutral-grey-primary:#282828;--neutral-grey-secondary:#707070;--neutral-white:#ffffff;--primary-hard:#e75a50;--primary-soft:#ffeae9;--primary-standard:#fa7268;--secondary-hard:#435171;--secondary-soft:#dde3ed;--secondary-standard:#5e79ba;--status-danger-hard:#ba250a;--status-danger-soft:#fdd3d1;--status-danger-standard:#d72c0d;--status-interaction-hard:#22559e;--status-interaction-soft:#f2f7fe;--status-interaction-standard:#2c6ecb;--status-success-hard:#156048;--status-success-soft:#f1f8f5;--status-success-standard:#1d7f60;--status-warning-hard:#987100;--status-warning-soft:#fef5ea;--status-warning-standard:#b98900;--ff-primary:\"Inter\";--ff-secondary:\"Prompt\";--lh-300:1.25rem;--lh-400:1.5rem;--lh-500:1.625rem;--lh-600:2rem;--lh-700:2.75rem;--lh-800:3.5rem;--lh-850:4.375rem;--lh-900:5.5rem;--fs-300:0.875rem;--fs-400:1rem;--fs-500:1.125rem;--fs-600:1.5rem;--fs-700:2.25rem;--fs-800:3rem;--fs-850:3.75rem;--fs-900:4.5rem;--fw-300:300;--fw-400:400;--fw-900:700}jump-card{display:flex;flex-direction:column;position:relative;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:#fff;--jump-card-color-dark:#fff;--jump-card-border-color:var(--neutral-grey-background);--jump-card-border-radius:6px;--jump-card-border-top-radius:1rem;--jump-card-top-border-body-radius:1.5rem 1rem;--jump-card-padding:1rem 1.25rem;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color);overflow:hidden}jump-card img,jump-card video{aspect-ratio:4/3;overflow:hidden;position:relative;object-fit:cover}jump-card .Content{padding:1.5rem 1rem;display:flex;flex-direction:column;gap:0.75rem;flex:1;background-color:var(--jump-card-background)}jump-card[dark]{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[dark] .Content{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[border]{border:1px solid var(--jump-card-border-color)}jump-card[border-radius]{border-radius:var(--jump-card-border-radius)}jump-card[top-border-content-radius]{border-radius:var(--jump-card-border-top-radius)}jump-card[top-border-content-radius] .Content{border-top-left-radius:var(--jump-card-border-top-radius);border-top-right-radius:var(--jump-card-border-top-radius);margin-top:-1rem;z-index:2}jump-card[boxed]{border-radius:var(--jump-card-border-radius)}jump-card[boxed] img,jump-card[boxed] video{border-radius:var(--jump-card-border-radius);background-color:var(--jump-card-background);margin:0.5rem 0.5rem 0}jump-card[horizontal]{flex-direction:row;gap:0.5rem;align-items:center;max-width:var(--jump-card-max-width-horizontal)}jump-card[rounded-media]{align-items:center;justify-content:center;text-align:center;background-color:transparent}jump-card[rounded-media] img,jump-card[rounded-media] video{background-color:transparent;border-radius:50%;aspect-ratio:1;width:100%;flex:0 1 40%}jump-card[rounded-media] .Content{background-color:transparent;align-items:center}jump-card[rounded-media][horizontal]{text-align:left}jump-card[rounded-media][horizontal] .Content{align-items:flex-start}jump-card[shadow]{box-shadow:0px 2px 25px 0px hsla(0, 0%, 0%, 0.1)}";
+const jumpCardCss = "jump-card{display:flex;flex-direction:column;position:relative;--jump-card-max-width-horizontal:100%;--jump-card-color:var(--neutral-grey-primary);--jump-card-background:#fff;--jump-card-color-dark:#fff;--jump-card-border-color:var(--neutral-grey-background);--jump-card-border-radius:6px;--jump-card-border-top-radius:1rem;--jump-card-top-border-body-radius:1.5rem 1rem;--jump-card-padding:1rem 1.25rem;font-family:var(--ff-primary, \"Arial\"), sans-serif;line-height:var(--lh-400, 1.3);background-color:var(--jump-card-background);color:var(--jump-card-color);overflow:hidden}jump-card img,jump-card video{aspect-ratio:4/3;overflow:hidden;position:relative;object-fit:cover}jump-card .Content{padding:1.5rem 1rem;display:flex;flex-direction:column;gap:0.75rem;flex:1;background-color:var(--jump-card-background)}jump-card[dark]{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[dark] .Content{background-color:var(--neutral-grey-primary);color:var(--jump-card-color-dark)}jump-card[border]{border:1px solid var(--jump-card-border-color)}jump-card[border-radius]{border-radius:var(--jump-card-border-radius)}jump-card[top-border-content-radius]{border-radius:var(--jump-card-border-top-radius)}jump-card[top-border-content-radius] .Content{border-top-left-radius:var(--jump-card-border-top-radius);border-top-right-radius:var(--jump-card-border-top-radius);margin-top:-1rem;z-index:2}jump-card[boxed]{border-radius:var(--jump-card-border-radius)}jump-card[boxed] img,jump-card[boxed] video{border-radius:var(--jump-card-border-radius);background-color:var(--jump-card-background);margin:0.5rem 0.5rem 0}jump-card[horizontal]{flex-direction:row;gap:0.5rem;align-items:center;max-width:var(--jump-card-max-width-horizontal)}jump-card[rounded-media]{align-items:center;justify-content:center;text-align:center;background-color:transparent}jump-card[rounded-media] img,jump-card[rounded-media] video{background-color:transparent;border-radius:50%;aspect-ratio:1;width:100%;flex:0 1 40%}jump-card[rounded-media] .Content{background-color:transparent;align-items:center}jump-card[rounded-media][horizontal]{text-align:left}jump-card[rounded-media][horizontal] .Content{align-items:flex-start}jump-card[shadow]{box-shadow:0px 2px 25px 0px hsla(0, 0%, 0%, 0.1)}";
 const JumpCardStyle0 = jumpCardCss;
 const AppCard = class {

package/dist/esm/jump-card.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"jump-card.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,~~8wGAA8wG~~,CAAC;~~AACnyG~~,uBAAe,WAAW;;MCMb,OAAO;;;0BAIY,KAAK;oBAKX,KAAK;;;4BAeG,KAAK;sCAKK,KAAK;qBAKtB,KAAK;4BAKE,KAAK;sBAKZ,EAAE;sBAKF,EAAE;wBAKA,EAAE;;IAE7B,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU,mBAAiB,IAAI,CAAC,YAAY,mBAAiB,IAAI,CAAC,YAAY,+BAA6B,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACvN,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAQ,GAAG,EAAE,EACpF,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;YAC5B,aAAO,QAAQ,UACb,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE,EAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE,EAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,YAAY,GAAE,CACzC,GAAG,EAAE,EACf,4DAAK,KAAK,EAAC,SAAS,IAClB,6DAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/jump-card/jump-card.scss?tag=jump-card","src/components/jump-card/jump-card.tsx"],"sourcesContent":["~~:root {\n /BASE COLOR RULES/\n --neutral~~-grey-background: #eeeeee;\n --neutral-grey-disabled: #cbcbcb;\n --neutral-grey-primary: #282828;\n --neutral-grey-secondary: #707070;\n --neutral-white: #ffffff;\n --primary-hard: #e75a50;\n --primary-soft: #ffeae9;\n --primary-standard: #fa7268;\n --secondary-hard: #435171;\n --secondary-soft: #dde3ed;\n --secondary-standard: #5e79ba;\n --status-danger-hard: #ba250a;\n --status-danger-soft: #fdd3d1;\n --status-danger-standard: #d72c0d;\n --status-interaction-hard: #22559e;\n --status-interaction-soft: #f2f7fe;\n --status-interaction-standard: #2c6ecb;\n --status-success-hard: #156048;\n --status-success-soft: #f1f8f5;\n --status-success-standard: #1d7f60;\n --status-warning-hard: #987100;\n --status-warning-soft: #fef5ea;\n --status-warning-standard: #b98900;\n\n /TYPOGRAPHY RULES/\n --ff-primary: 'Inter';\n --ff-secondary: 'Prompt';\n\n --lh-300: 1.25rem;\n --lh-400: 1.5rem;\n --lh-500: 1.625rem;\n --lh-600: 2rem;\n --lh-700: 2.75rem;\n --lh-800: 3.5rem;\n --lh-850: 4.375rem;\n --lh-900: 5.5rem;\n --fs-300: 0.875rem;\n --fs-400: 1rem;\n --fs-500: 1.125rem;\n --fs-600: 1.5rem;\n --fs-700: 2.25rem;\n --fs-800: 3rem;\n --fs-850: 3.75rem;\n --fs-900: 4.5rem;\n --fw-300: 300;\n --fw-400: 400;\n --fw-900: 700;\n}\n\njump-card {\n display: flex;\n flex-direction: column;\n position: relative;\n // --jump-card-max-width: 320px;\n --jump-card-max-width-horizontal: 100%;\n --jump-card-color: var(--neutral-grey-primary);\n --jump-card-background: #fff;\n --jump-card-color-dark: #fff;\n --jump-card-border-color: var(--neutral-grey-background);\n --jump-card-border-radius: 6px;\n --jump-card-border-top-radius: 1rem;\n --jump-card-top-border-body-radius: 1.5rem 1rem;\n --jump-card-padding: 1rem 1.25rem;\n\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n line-height: var(--lh-400, 1.3);\n background-color: var(--jump-card-background);\n color: var(--jump-card-color);\n // max-width: var(--jump-card-max-width);\n overflow: hidden;\n\n img,\n video {\n aspect-ratio: 4/3;\n overflow: hidden;\n position: relative;\n object-fit: cover;\n }\n\n .Content {\n padding: 1.5rem 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n flex: 1;\n background-color: var(--jump-card-background);\n }\n\n &[dark] {\n background-color: var(--neutral-grey-primary);\n color: var(--jump-card-color-dark);\n\n .Content {\n background-color: var(--neutral-grey-primary);\n color: var(--jump-card-color-dark);\n }\n }\n\n &[border] {\n border: 1px solid var(--jump-card-border-color);\n }\n\n &[border-radius] {\n border-radius: var(--jump-card-border-radius);\n }\n\n &[top-border-content-radius] {\n border-radius: var(--jump-card-border-top-radius);\n\n .Content {\n border-top-left-radius: var(--jump-card-border-top-radius);\n border-top-right-radius: var(--jump-card-border-top-radius);\n margin-top: -1rem;\n z-index: 2;\n }\n }\n\n &[boxed] {\n border-radius: var(--jump-card-border-radius);\n\n img,\n video {\n border-radius: var(--jump-card-border-radius);\n background-color: var(--jump-card-background);\n margin: 0.5rem 0.5rem 0;\n }\n }\n\n &[horizontal] {\n flex-direction: row;\n gap: 0.5rem;\n align-items: center;\n max-width: var(--jump-card-max-width-horizontal);\n }\n\n &[rounded-media] {\n align-items: center;\n justify-content: center;\n text-align: center;\n background-color: transparent;\n\n img,\n video {\n background-color: transparent;\n border-radius: 50%;\n aspect-ratio: 1;\n width: 100%;\n flex: 0 1 40%;\n }\n\n .Content {\n background-color: transparent;\n align-items: center;\n }\n }\n\n &[rounded-media][horizontal] {\n text-align: left;\n\n .Content {\n align-items: flex-start;\n }\n }\n\n &[shadow] {\n box-shadow: 0px 2px 25px 0px hsla(0, 0%, 0%, 0.1);\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-card',\n styleUrl: 'jump-card.scss',\n shadow: false,\n})\nexport class AppCard {\n /*\n Indicates if the card is horizontal\n /\n @Prop() horizontal: boolean = false;\n\n /\n Indicates if the card is horizontal\n /\n @Prop() dark: boolean = false;\n\n /\n Indicates if card has shadow\n /\n @Prop() shadow: boolean;\n\n /\n Indicates if card has borders\n /\n @Prop() border: boolean;\n\n /\n Indicates if borders of the entire card are rounded\n /\n @Prop() borderRadius: boolean = false;\n\n /\n Indicates if border top of the body is rounded; Not compatible with boxed\n /\n @Prop() topBorderContentRadius: boolean = false;\n\n /\n Indicates if media has padding; Not compatible with roundedMedia\n /\n @Prop() boxed: boolean = false;\n\n /\n Indicates if image is rounded and there isnt a bg\n /\n @Prop() roundedMedia: boolean = false;\n\n /\n Indicates the imgSrc of the card\n /\n @Prop() imgSrc: string = '';\n\n /\n Indicates the img's alt of the card\n /\n @Prop() imgAlt: string = '';\n\n /\n Indicates the videoSrc of the card\n */\n @Prop() videoSrc: string = '';\n\n render() {\n return (\n <Host horizontal={this.horizontal} border-radius={this.borderRadius} rounded-media={this.roundedMedia} top-border-content-radius={this.topBorderContentRadius} boxed={this.boxed} shadow={this.shadow} border={this.border}>\n {this.imgSrc && !this.videoSrc ? <img src={this.imgSrc} alt={this.imgAlt}></img> : ''}\n {this.videoSrc && !this.imgSrc ? \n <video autoplay> \n <source src={this.videoSrc} type=\"video/mp4\"/> \n <source src={this.videoSrc} type=\"video/mov\"/> \n <source src={this.videoSrc} type=\"video/webm\"/> \n </video> : ''}\n <div class=\"Content\">\n <slot name=\"body\"></slot>\n <slot name=\"footer\"></slot>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}
1	+ {"file":"jump-card.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,uvEAAuvE,CAAC;AAC5wE,uBAAe,WAAW;;MCMb,OAAO;;;0BAIY,KAAK;oBAKX,KAAK;;;4BAeG,KAAK;sCAKK,KAAK;qBAKtB,KAAK;4BAKE,KAAK;sBAKZ,EAAE;sBAKF,EAAE;wBAKA,EAAE;;IAE7B,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,UAAU,EAAE,IAAI,CAAC,UAAU,mBAAiB,IAAI,CAAC,YAAY,mBAAiB,IAAI,CAAC,YAAY,+BAA6B,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IACvN,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAQ,GAAG,EAAE,EACpF,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;YAC5B,aAAO,QAAQ,UACb,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE,EAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,WAAW,GAAE,EAC9C,cAAQ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,YAAY,GAAE,CACzC,GAAG,EAAE,EACf,4DAAK,KAAK,EAAC,SAAS,IAClB,6DAAM,IAAI,EAAC,MAAM,GAAQ,EACzB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/jump-card/jump-card.scss?tag=jump-card","src/components/jump-card/jump-card.tsx"],"sourcesContent":["jump-card {\n display: flex;\n flex-direction: column;\n position: relative;\n // --jump-card-max-width: 320px;\n --jump-card-max-width-horizontal: 100%;\n --jump-card-color: var(--neutral-grey-primary);\n --jump-card-background: #fff;\n --jump-card-color-dark: #fff;\n --jump-card-border-color: var(--neutral-grey-background);\n --jump-card-border-radius: 6px;\n --jump-card-border-top-radius: 1rem;\n --jump-card-top-border-body-radius: 1.5rem 1rem;\n --jump-card-padding: 1rem 1.25rem;\n\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n line-height: var(--lh-400, 1.3);\n background-color: var(--jump-card-background);\n color: var(--jump-card-color);\n // max-width: var(--jump-card-max-width);\n overflow: hidden;\n\n img,\n video {\n aspect-ratio: 4/3;\n overflow: hidden;\n position: relative;\n object-fit: cover;\n }\n\n .Content {\n padding: 1.5rem 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n flex: 1;\n background-color: var(--jump-card-background);\n }\n\n &[dark] {\n background-color: var(--neutral-grey-primary);\n color: var(--jump-card-color-dark);\n\n .Content {\n background-color: var(--neutral-grey-primary);\n color: var(--jump-card-color-dark);\n }\n }\n\n &[border] {\n border: 1px solid var(--jump-card-border-color);\n }\n\n &[border-radius] {\n border-radius: var(--jump-card-border-radius);\n }\n\n &[top-border-content-radius] {\n border-radius: var(--jump-card-border-top-radius);\n\n .Content {\n border-top-left-radius: var(--jump-card-border-top-radius);\n border-top-right-radius: var(--jump-card-border-top-radius);\n margin-top: -1rem;\n z-index: 2;\n }\n }\n\n &[boxed] {\n border-radius: var(--jump-card-border-radius);\n\n img,\n video {\n border-radius: var(--jump-card-border-radius);\n background-color: var(--jump-card-background);\n margin: 0.5rem 0.5rem 0;\n }\n }\n\n &[horizontal] {\n flex-direction: row;\n gap: 0.5rem;\n align-items: center;\n max-width: var(--jump-card-max-width-horizontal);\n }\n\n &[rounded-media] {\n align-items: center;\n justify-content: center;\n text-align: center;\n background-color: transparent;\n\n img,\n video {\n background-color: transparent;\n border-radius: 50%;\n aspect-ratio: 1;\n width: 100%;\n flex: 0 1 40%;\n }\n\n .Content {\n background-color: transparent;\n align-items: center;\n }\n }\n\n &[rounded-media][horizontal] {\n text-align: left;\n\n .Content {\n align-items: flex-start;\n }\n }\n\n &[shadow] {\n box-shadow: 0px 2px 25px 0px hsla(0, 0%, 0%, 0.1);\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-card',\n styleUrl: 'jump-card.scss',\n shadow: false,\n})\nexport class AppCard {\n /*\n Indicates if the card is horizontal\n /\n @Prop() horizontal: boolean = false;\n\n /\n Indicates if the card is horizontal\n /\n @Prop() dark: boolean = false;\n\n /\n Indicates if card has shadow\n /\n @Prop() shadow: boolean;\n\n /\n Indicates if card has borders\n /\n @Prop() border: boolean;\n\n /\n Indicates if borders of the entire card are rounded\n /\n @Prop() borderRadius: boolean = false;\n\n /\n Indicates if border top of the body is rounded; Not compatible with boxed\n /\n @Prop() topBorderContentRadius: boolean = false;\n\n /\n Indicates if media has padding; Not compatible with roundedMedia\n /\n @Prop() boxed: boolean = false;\n\n /\n Indicates if image is rounded and there isnt a bg\n /\n @Prop() roundedMedia: boolean = false;\n\n /\n Indicates the imgSrc of the card\n /\n @Prop() imgSrc: string = '';\n\n /\n Indicates the img's alt of the card\n /\n @Prop() imgAlt: string = '';\n\n /\n Indicates the videoSrc of the card\n */\n @Prop() videoSrc: string = '';\n\n render() {\n return (\n <Host horizontal={this.horizontal} border-radius={this.borderRadius} rounded-media={this.roundedMedia} top-border-content-radius={this.topBorderContentRadius} boxed={this.boxed} shadow={this.shadow} border={this.border}>\n {this.imgSrc && !this.videoSrc ? <img src={this.imgSrc} alt={this.imgAlt}></img> : ''}\n {this.videoSrc && !this.imgSrc ? \n <video autoplay> \n <source src={this.videoSrc} type=\"video/mp4\"/> \n <source src={this.videoSrc} type=\"video/mov\"/> \n <source src={this.videoSrc} type=\"video/webm\"/> \n </video> : ''}\n <div class=\"Content\">\n <slot name=\"body\"></slot>\n <slot name=\"footer\"></slot>\n </div>\n </Host>\n );\n }\n\n}\n"],"version":3}

package/dist/esm/jump-design-system.js CHANGED Viewed

@@ -16,7 +16,7 @@ const patchBrowser = () => {
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["jump-pagination",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"pagLabel":[513,"pag-label"],"initialPage":[514,"initial-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"completeVersion":[516,"complete-version"],"showFirstAndLast":[516,"show-first-and-last"],"firstPage":[32],"currentPage":[32]},null,{"currentPage":["watchCurrentPage"]}]]],["jump-badge",[[0,"jump-badge",{"label":[1],"variant":[1]}]]],["jump-button",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}]]],["jump-card",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-tab",[[1,"jump-tab",{"activeTab":[1,"active-tab"],"tabNames":[16]}]]],["jump-icon",[[0,"jump-icon",{"name":[1],"class":[1]}]]]], options);
+  return bootstrapLazy([["jump-pagination",[[0,"jump-pagination",{"pagLabel":[1,"pag-label"],"last":[2],"showFirstAndLast":[4,"show-first-and-last"],"current":[32]},null,{"current":["watchcurrent"]}]]],["jump-pagination-table",[[0,"jump-pagination-table",{"elementsRanges":[16],"elPerPage":[2,"el-per-page"],"pagLabel":[513,"pag-label"],"labelElementsPerPage":[513,"label-elements-per-page"],"total":[514],"first":[514],"last":[514],"showFirstAndLast":[516,"show-first-and-last"]},null,{"elPerPage":["elPerPageChanged"]}]]],["jump-badge",[[0,"jump-badge",{"label":[1],"variant":[1]}]]],["jump-button",[[1,"jump-button",{"disabled":[4],"variant":[1],"outline":[4],"size":[1],"full":[4],"pill":[4],"text":[4],"onlyIcon":[4,"only-icon"],"href":[1],"target":[1],"type":[1],"name":[1],"value":[1],"ariaLabel":[1,"aria-label"],"class":[1],"buttonId":[1,"button-id"]}]]],["jump-card",[[4,"jump-card",{"horizontal":[4],"dark":[4],"shadow":[4],"border":[4],"borderRadius":[4,"border-radius"],"topBorderContentRadius":[4,"top-border-content-radius"],"boxed":[4],"roundedMedia":[4,"rounded-media"],"imgSrc":[1,"img-src"],"imgAlt":[1,"img-alt"],"videoSrc":[1,"video-src"]}]]],["jump-tab",[[1,"jump-tab",{"activeTab":[1,"active-tab"],"tabNames":[16]}]]],["jump-icon",[[0,"jump-icon",{"name":[1],"class":[1],"size":[1]}]]]], options);
 });
 //# sourceMappingURL=jump-design-system.js.map

package/dist/esm/jump-icon.entry.js CHANGED Viewed

@@ -2394,7 +2394,7 @@ module.exports = __webpack_require__(/*! /home/runner/work/feather/feather/src/i
 const feather = /*@__PURE__*/getDefaultExportFromCjs(feather$1.exports);
-const jumpIconCss = "jump-icon{display:inline-flex}jump-icon svg{width:1em;height:1em}";
+const jumpIconCss = "jump-icon{display:inline-flex;--jump-icon-width:var(--fs-400, 1rem);--jump-icon-height:var(--fs-400, 1rem)}jump-icon svg{width:var(--jump-icon-width);height:var(--jump-icon-height)}jump-icon.small svg{--jump-icon-width:var(--fs-400, 1rem);--jump-icon-height:var(--fs-400, 1rem)}jump-icon.medium svg{--jump-icon-width:var(--fs-500, 1.125rem);--jump-icon-height:var(--fs-500, 1.125rem)}jump-icon.large svg{--jump-icon-width:var(--fs-600, 1.5rem);--jump-icon-height:var(--fs-600, 1.5rem)}";
 const JumpIconStyle0 = jumpIconCss;
 const JumpIcon = class {
@@ -2402,12 +2402,13 @@ const JumpIcon = class {
         registerInstance(this, hostRef);
         this.name = undefined;
         this.class = undefined;
+        this.size = undefined;
     }
     componentDidLoad() {
         feather.replace();
     }
     render() {
-        return (h(Host, { key: 'c61b602c009a61e74b1ade495fc2188bdcad79dc' }, h("i", { key: 'adf4f1038dbb9809f524bacaffca00a43c164652', "data-feather": this.name, class: this.class })));
+        return (h(Host, { key: '69247a6f3ad9817e9e768998277e5aa8dfceac73' }, h("i", { key: '92bd5adbe5e02ed7c272514a91d929975b1d93d3', "data-feather": this.name, class: this.class })));
     }
 };
 JumpIcon.style = JumpIconStyle0;