@jumpgroup/jump-design-system 0.2.3 → 0.2.4

package/dist/collection/components/jump-pagination/jump-pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"jump-pagination.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,cAAc;;;wBAMiB,IAAI;;;oCAWU,qBAAqB;8BAKpB,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC;;+BAUtB,KAAK;uCAEG,KAAK;;IAEjE,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB;YAC1B,4DAAK,KAAK,EAAC,yBAAyB;gBAChC,IAAI,CAAC,eAAe;oBACpB,WAAK,KAAK,EAAC,iBAAiB;wBAC1B,aAAO,OAAO,EAAC,UAAU,IAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,mBAAmB,CAAS;wBAChF,cAAQ,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,IAClC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAClC,cAAQ,KAAK,EAAE,KAAK,IAAG,KAAK,CAAU,CACvC,CAAC,CACK,CACT;gBAER,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,eAAe,CAAC,CAAC;wBACrB;4BACE,gBAAO,IAAI,CAAC,SAAS,CAAQ;;4BAAG,gBAAO,IAAI,CAAC,WAAW,CAAQ;;4BAAI,gBAAO,IAAI,CAAC,aAAa,CAAQ,CAC/F;wBAET,CAAC;4BACC;gCACE,gBAAO,IAAI,CAAC,WAAW,CAAQ;;gCAAI,gBAAO,IAAI,CAAC,QAAQ,CAAQ,CAC1D,CAEL;oBACN,4DAAK,KAAK,EAAC,OAAO;wBACf,IAAI,CAAC,uBAAuB,IAAI,iBAAW,EAAE,EAAC,YAAY,EAAC,IAAI,EAAC,eAAe,GAAa;wBAC7F,kEAAW,EAAE,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,GAAa;wBAC1D,kEAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,eAAe,GAAa;wBAC3D,IAAI,CAAC,uBAAuB,IAAI,iBAAW,EAAE,EAAC,WAAW,EAAE,IAAI,EAAC,gBAAgB,GAAa,CAC1F,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-pagination',\n  styleUrl: 'jump-pagination.scss',\n  shadow: false,\n})\nexport class JumpPagination {\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  /**\n   * \n   */\n  @Prop({ reflect: true }) currentPage: number;\n  @Prop({ reflect: true }) lastPage: number; \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   * Indicates the first page/product of the list\n   */\n  @Prop({ reflect: true }) firstPage: number;\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 }) showAdditionalChrevrons: boolean = false;\n\n  render() {\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> di <span>{this.totalElements}</span>\n                </span>\n                \n              :\n                <span>\n                  <span>{this.currentPage}</span> di <span>{this.lastPage}</span>\n                </span>\n              }\n            </div>\n            <div class=\"arrow\">\n              {this.showAdditionalChrevrons && <jump-icon id=\"first-page\" name=\"chevrons-left\"></jump-icon>}\n              <jump-icon id=\"prev-page\" name=\"chevron-left\"></jump-icon>\n              <jump-icon id=\"next-page\"  name=\"chevron-right\"></jump-icon>\n              {this.showAdditionalChrevrons && <jump-icon id=\"last-page\"  name=\"chevrons-right\"></jump-icon>}\n            </div> \n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"jump-pagination.js","sourceRoot":"","sources":["../../../src/components/jump-pagination/jump-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO5F,MAAM,OAAO,cAAc;;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,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SACjD,CAAC;QAEF,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;IAiCD,iEAAiE;IACjE,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACtC,CAAC;IAED,MAAM;;QACJ,OAAO,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QACrD,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB;YAC1B,4DAAK,KAAK,EAAC,yBAAyB;gBAChC,IAAI,CAAC,eAAe;oBACpB,4DAAK,KAAK,EAAC,iBAAiB;wBAC1B,8DAAO,OAAO,EAAC,UAAU,IAAE,MAAA,IAAI,CAAC,oBAAoB,mCAAI,mBAAmB,CAAS;wBAChF,+DAAQ,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,IAClC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAClC,cAAQ,KAAK,EAAE,KAAK,IAAG,KAAK,CAAU,CACvC,CAAC,CACK,CACT;gBAER,4DAAK,KAAK,EAAC,YAAY;oBACrB,4DAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,eAAe,CAAC,CAAC;wBACrB;4BACE,gBAAO,IAAI,CAAC,SAAS,CAAQ;;4BAAG,gBAAO,IAAI,CAAC,WAAW,CAAQ;;4BAAE,IAAI,CAAC,QAAQ;;4BAAE,gBAAO,IAAI,CAAC,aAAa,CAAQ,CAC5G;wBAET,CAAC;4BACC;gCACE,gBAAO,IAAI,CAAC,WAAW,CAAQ;;gCAAE,IAAI,CAAC,QAAQ;;gCAAE,gBAAO,IAAI,CAAC,QAAQ,CAAQ,CACvE,CAEL;oBACN,4DAAK,KAAK,EAAC,OAAO;wBACf,IAAI,CAAC,gBAAgB;4BACpB,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAA,CAAA,CAAC,EAClD,QAAQ,EAAE,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;gCAC9D,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa;sCAAY;wBAE1E,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,WAAW,EAAE,CAAA,CAAA,CAAC,EACnC,QAAQ,EAAE,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;4BAC9D,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,cAAc,GAAa;kCAAY;wBACvE,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,WAAW,EAAE,CAAA,CAAA,CAAC,EACnC,QAAQ,EAAE,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;4BAC3D,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,eAAe,GAAa;kCAAY;wBACzE,IAAI,CAAC,gBAAgB;4BACpB,+DACE,OAAO,EAAE,GAAG,EAAE,GAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAA,CAAA,CAAC,EACjD,QAAQ,EAAE,CAAC,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;gCAC3D,kEAAW,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,gBAAgB,GAAa;sCAAY,CAEzE,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["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"]}

package/dist/collection/components/jump-tab/jump-tab-inline.stories.js

@@ -0,0 +1,28 @@
+export default {
+    title: 'Components/Tab/Inline',
+    tags: ['autodocs'],
+    argTypes: {
+        activeTab: {
+            name: 'activeTab',
+            control: 'text',
+            description: 'Indica la tab attiva',
+        },
+        tabNames: {
+            name: 'tabNames',
+            control: 'array',
+            description: 'Array di stringhe contenente i nomi delle tab',
+        }
+    }
+};
+const Template = (args) => {
+    return `<jump-tab 
+        active-tab="${args.activeTab}" 
+        tab-names="${args.tabNames}">
+    </jump-tab>`;
+};
+export const TabInline = Template.bind({});
+TabInline.args = {
+    activeTab: 'Tab 1',
+    tabNames: ['Tab 1', 'Tab 2', 'Tab 3']
+};
+//# sourceMappingURL=jump-tab-inline.stories.js.map

package/dist/collection/components/jump-tab/jump-tab-inline.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-tab-inline.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab-inline.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACX,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,SAAS,EAAE;YACP,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sBAAsB;SACtC;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,+CAA+C;SAC/D;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACtB,OAAO;sBACW,IAAI,CAAC,SAAS;qBACf,IAAI,CAAC,QAAQ;gBAClB,CAAC;AACjB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3C,SAAS,CAAC,IAAI,GAAG;IACb,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC;CACxC,CAAC","sourcesContent":["export default {\n    title: 'Components/Tab/Inline',\n    tags: ['autodocs'],\n    argTypes: {\n        activeTab: {\n            name: 'activeTab',\n            control: 'text',\n            description: 'Indica la tab attiva',\n        },\n        tabNames: {\n            name: 'tabNames',\n            control: 'array',\n            description: 'Array di stringhe contenente i nomi delle tab',\n        }\n    }\n}\n\nconst Template = (args) => {\n    return `<jump-tab \n        active-tab=\"${args.activeTab}\" \n        tab-names=\"${args.tabNames}\">\n    </jump-tab>`;\n}\n\nexport const TabInline = Template.bind({});\n\nTabInline.args = {\n    activeTab: 'Tab 1',\n    tabNames: ['Tab 1', 'Tab 2', 'Tab 3']\n};"]}

package/dist/collection/components/jump-tab/jump-tab.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/jump-tab/jump-tab.js

@@ -0,0 +1,71 @@
+import { Host, h } from "@stencil/core";
+export class JumpTab {
+    constructor() {
+        this.activeTab = undefined;
+        this.tabNames = undefined;
+    }
+    componentWillLoad() {
+        console.log('Component is about to be rendered');
+        console.log('active', this.activeTab);
+        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)))));
+    }
+    static get is() { return "jump-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["jump-tab.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["jump-tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "activeTab": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "active-tab",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "tabNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Array<string>",
+                    "resolved": "string[]",
+                    "references": {
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "undefined"
+            }
+        };
+    }
+}
+//# sourceMappingURL=jump-tab.js.map

package/dist/collection/components/jump-tab/jump-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-tab.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,OAAO;;yBAGU,SAAS;wBACH,SAAS;;IAE3C,iBAAiB;QACf,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACrC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,SAAS,IAClB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACnE,WAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,IACrE,OAAO,CACJ,CACP,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'jump-tab',\n  styleUrl: 'jump-tab.scss',\n  shadow: true,\n})\nexport class JumpTab {\n\n  /* ---------------------- @PROPERTIES ------------------------- */\n  @Prop() activeTab: string = undefined;\n  @Prop() tabNames: Array<string> = undefined;\n\n  componentWillLoad() {\n    console.log('Component is about to be rendered');\n    console.log('active',this.activeTab);\n    console.log('tabNames',this.tabNames);\n  }\n\n  render() {\n    return (\n      <Host class=\"JumpTab\">\n        {(this.tabNames && this.activeTab) && this.tabNames.map((tabName) => (\n          <div class={`JumpTab__Tab ${this.activeTab === tabName ? 'active' : ''}`}>\n            {tabName}\n          </div>\n        ))}\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/jump-tab/test/jump-tab.e2e.js

@@ -0,0 +1,10 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('jump-tab', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<jump-tab></jump-tab>');
+        const element = await page.find('jump-tab');
+        expect(element).toHaveClass('hydrated');
+    });
+});
+//# sourceMappingURL=jump-tab.e2e.js.map

package/dist/collection/components/jump-tab/test/jump-tab.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-tab.e2e.js","sourceRoot":"","sources":["../../../../src/components/jump-tab/test/jump-tab.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,uBAAuB,CAAC,CAAC;QAE/C,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('jump-tab', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<jump-tab></jump-tab>');\n\n    const element = await page.find('jump-tab');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/jump-tab/test/jump-tab.spec.js

@@ -0,0 +1,18 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { JumpTab } from "../jump-tab";
+describe('jump-tab', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [JumpTab],
+            html: `<jump-tab></jump-tab>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <jump-tab>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </jump-tab>
+    `);
+    });
+});
+//# sourceMappingURL=jump-tab.spec.js.map

package/dist/collection/components/jump-tab/test/jump-tab.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-tab.spec.js","sourceRoot":"","sources":["../../../../src/components/jump-tab/test/jump-tab.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uBAAuB;SAC9B,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { JumpTab } from '../jump-tab';\n\ndescribe('jump-tab', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [JumpTab],\n      html: `<jump-tab></jump-tab>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <jump-tab>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </jump-tab>\n    `);\n  });\n});\n"]}

package/dist/collection/utils/utils.js

@@ -1,17 +1,30 @@
-export function format(first, middle, last) {
-    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}
+import { html as beautifyHtml } from "js-beautify";
 export const generateAttributesFromArgs = (arg) => {
     // map attributes to strings. If the attribute is a boolean and is false, don't include it, otherwise include only the attribute name. otherwise include the attribute name and its value
+    console.log('arg', arg);
     return Object.entries(arg).map(([name, value]) => {
+        name = camelToKebabCase(name);
+        //console.log('name', name);
         if (typeof value === 'boolean') {
             return value ? name : '';
         }
         else {
+            // take the snake case and convert it to kebab case
             return `${name}="${value}"`;
         }
     }).join(' ')
         // replace all the spaces with a single space
-        .replace(/\s+/g, ' ');
+        .replace(/\s+/g, ' ')
+        .trim();
+};
+const camelToKebabCase = (str) => {
+    return str.replace(/[A-Z]/g, function (match) {
+        return '-' + match.toLowerCase();
+    });
+};
+export const formatHtml = (html) => {
+    return beautifyHtml(html, {
+        indent_size: 2
+    });
 };
 //# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI;IACxC,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,GAAG,EAAE,EAAE;IAChD,yLAAyL;IACzL,OAAO,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE;QAC/C,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAA;QAC1B,CAAC;aAAM,CAAC;YACN,OAAO,GAAG,IAAI,KAAK,KAAK,GAAG,CAAA;QAC7B,CAAC;IACH,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACZ,6CAA6C;SAC5C,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;AACvB,CAAC,CAAC","sourcesContent":["export function format(first, middle, last) {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const generateAttributesFromArgs = (arg) => {\n  // map attributes to strings. If the attribute is a boolean and is false, don't include it, otherwise include only the attribute name. otherwise include the attribute name and its value\n  return Object.entries(arg).map(([name, value]) => {\n    if (typeof value === 'boolean') {\n      return value ? name : ''\n    } else {\n      return `${name}=\"${value}\"`\n    }\n  }).join(' ')\n  // replace all the spaces with a single space\n  .replace(/\\s+/g, ' ')\n};"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,GAAG,EAAE,EAAE;IAChD,yLAAyL;IACzL,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACxB,OAAO,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE;QAC/C,IAAI,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC9B,4BAA4B;QAC5B,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAA;QAC1B,CAAC;aAAM,CAAC;YACN,mDAAmD;YACnD,OAAO,GAAG,IAAI,KAAK,KAAK,GAAG,CAAA;QAC7B,CAAC;IACH,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QACZ,6CAA6C;SAC5C,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC;SACpB,IAAI,EAAE,CAAC;AACV,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,GAAG,EAAE,EAAE;IAC/B,OAAO,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,UAAS,KAAK;QACzC,OAAO,GAAG,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;IACnC,CAAC,CAAC,CAAC;AACL,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,EAAE;IACjC,OAAO,YAAY,CAAC,IAAI,EAAE;QACxB,WAAW,EAAE,CAAC;KACf,CAAC,CAAC;AACL,CAAC,CAAA","sourcesContent":["import { html as beautifyHtml } from 'js-beautify';\n\nexport const generateAttributesFromArgs = (arg) => {\n  // map attributes to strings. If the attribute is a boolean and is false, don't include it, otherwise include only the attribute name. otherwise include the attribute name and its value\n  console.log('arg', arg);\n  return Object.entries(arg).map(([name, value]) => {\n    name = camelToKebabCase(name);\n    //console.log('name', name);\n    if (typeof value === 'boolean') {\n      return value ? name : ''\n    } else {\n      // take the snake case and convert it to kebab case\n      return `${name}=\"${value}\"`\n    }\n  }).join(' ')\n  // replace all the spaces with a single space\n  .replace(/\\s+/g, ' ')\n  .trim();\n};\n\nconst camelToKebabCase = (str) => {\n  return str.replace(/[A-Z]/g, function(match) {\n    return '-' + match.toLowerCase();\n  });\n}\n\nexport const formatHtml = (html) => {\n  return beautifyHtml(html, {\n    indent_size: 2\n  });\n}  "]}

package/dist/components/jump-badge.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-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-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 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 JumpBadgeStyle0 = jumpBadgeCss;
 
-const AppCard = /*@__PURE__*/ proxyCustomElement(class AppCard extends HTMLElement {
+const AppBadge = /*@__PURE__*/ proxyCustomElement(class AppBadge extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -11,12 +11,12 @@ const AppCard = /*@__PURE__*/ proxyCustomElement(class AppCard extends HTMLEleme
         this.variant = 'primary';
     }
     render() {
-        return (h(Host, { key: '8a7bf8245f0edf5aa45f70be833001e7c2899a5e', variant: this.variant }, this.label));
+        return (h(Host, { key: '1a0a2b2bf95c1217ca9546b19c4ff6b25ca2a86a', variant: this.variant }, this.label));
     }
     static get style() { return JumpBadgeStyle0; }
 }, [0, "jump-badge", {
-        "label": [513],
-        "variant": [513]
+        "label": [1],
+        "variant": [1]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -26,13 +26,13 @@ function defineCustomElement$1() {
     components.forEach(tagName => { switch (tagName) {
         case "jump-badge":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, AppCard);
+                customElements.define(tagName, AppBadge);
             }
             break;
     } });
 }
 
-const JumpBadge = AppCard;
+const JumpBadge = AppBadge;
 const defineCustomElement = defineCustomElement$1;
 
 export { JumpBadge, defineCustomElement };

package/dist/components/jump-badge.js.map

@@ -1 +1 @@
-{"file":"jump-badge.js","mappings":";;AAAA,MAAM,YAAY,GAAG,koBAAkoB,CAAC;AACxpB,wBAAe,YAAY;;MCMd,OAAO;;;;qBAIqB,EAAE;uBAKe,SAAS;;IAEjE,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-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 AppCard {\n  /**\n   * Indicates the label of the badge\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /**\n   * Indicates the variant of the badge\n   */\n  @Prop({reflect: true}) 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}
+{"file":"jump-badge.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}

package/dist/components/jump-button.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-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{display:inline-flex;align-items:center;--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.5rem 1rem}:host button[data-size=medium],:host a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3)}: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:1.125rem 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:1.125rem}: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:1rem}:host button[data-only-icon][data-size=large],:host a[data-only-icon][data-size=large]{--jump-button-padding:1.125rem}: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 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-full],:host a[data-full]{width:100%;justify-content:center}: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)}";
 const JumpButtonStyle0 = jumpButtonCss;
 
 const JumpButton$1 = /*@__PURE__*/ proxyCustomElement(class JumpButton extends HTMLElement {
@@ -12,6 +12,7 @@ const JumpButton$1 = /*@__PURE__*/ proxyCustomElement(class JumpButton extends H
         this.variant = 'primary';
         this.outline = false;
         this.size = 'medium';
+        this.full = false;
         this.pill = false;
         this.text = false;
         this.onlyIcon = false;
@@ -28,7 +29,7 @@ const JumpButton$1 = /*@__PURE__*/ proxyCustomElement(class JumpButton extends H
         this.target = this.href ? this.target : '_self';
     }
     render() {
-        return (h(Host, { key: '6b61dcd618e7aee12b9f539c6a092d524566ba47' }, this.href ? (h("a", { href: this.href, id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, "aria-label": this.ariaLabel, target: this.target }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" }))) : (h("button", { id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "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 }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" })))));
+        return (h(Host, { key: '2f1a96f504d7f273bfdf0b49d7a708aea570f59f' }, this.href ? (h("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 }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" }))) : (h("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 }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" })))));
     }
     static get style() { return JumpButtonStyle0; }
 }, [1, "jump-button", {
@@ -36,6 +37,7 @@ const JumpButton$1 = /*@__PURE__*/ proxyCustomElement(class JumpButton extends H
         "variant": [1],
         "outline": [4],
         "size": [1],
+        "full": [4],
         "pill": [4],
         "text": [4],
         "onlyIcon": [4, "only-icon"],

package/dist/components/jump-button.js.map

@@ -1 +1 @@
-{"file":"jump-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,2oKAA2oK,CAAC;AAClqK,yBAAe,aAAa;;MCMfA,YAAU;;;;;wBAIO,KAAK;uBAK6B,SAAS;uBAK5C,KAAK;oBAKT,QAAQ;oBAKP,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,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAChQ,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,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,IAC7S,YAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa,EAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpButton"],"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.5rem 1rem;\n    }\n\n    &[data-size='medium'] {\n      font-size: var(--fs-400, 1rem);\n      line-height: var(--lh-400, 1.3);\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: 1.125rem 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: 1.125rem;\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: 1rem;\n    }\n    &[data-only-icon][data-size='large'] {\n      --jump-button-padding: 1.125rem;\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'|'tertiary'|'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 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-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-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}
+{"file":"jump-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ktKAAktK,CAAC;AACzuK,yBAAe,aAAa;;MCMfA,YAAU;;;;;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":["JumpButton"],"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-full] {\n      width: 100%;\n      justify-content: center;\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","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/components/jump-card.js

@@ -20,22 +20,22 @@ const AppCard = /*@__PURE__*/ proxyCustomElement(class AppCard extends HTMLEleme
         this.videoSrc = '';
     }
     render() {
-        return (h(Host, { key: 'a1f0752a89731d2f493060b79548fa69e99e1e68', 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 }, this.imgSrc && !this.videoSrc ? h("img", { src: this.imgSrc, alt: this.imgAlt }) : '', this.videoSrc && !this.imgSrc ?
-            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : '', h("div", { key: 'a7d7a20a7a5960f3fab3d417d224dd711d119e0b', class: "Content" }, h("slot", { key: '7667cd1ea36b6f2115174f0fa39a6368bc020b16', name: "body" }), h("slot", { key: 'bbaded488f7b0603a9aa19e1549ba41e524ad322', name: "footer" }))));
+        return (h(Host, { key: '990d2452fd2b295b5b5c78a5cbd311c938318ee7', 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 }, this.imgSrc && !this.videoSrc ? h("img", { src: this.imgSrc, alt: this.imgAlt }) : '', this.videoSrc && !this.imgSrc ?
+            h("video", { autoplay: true }, h("source", { src: this.videoSrc, type: "video/mp4" }), h("source", { src: this.videoSrc, type: "video/mov" }), h("source", { src: this.videoSrc, type: "video/webm" })) : '', h("div", { key: 'cb2ca9a506ac28a88fb3e4fb7fe6626f9af6daf5', class: "Content" }, h("slot", { key: '8e893537441beedf925094a99a886f9d5c1a1377', name: "body" }), h("slot", { key: '9436fd7c5030bf0405bb88ab43ca21a4bb7e5e35', name: "footer" }))));
     }
     static get style() { return JumpCardStyle0; }
 }, [4, "jump-card", {
-        "horizontal": [516],
-        "dark": [516],
-        "shadow": [516],
-        "border": [516],
-        "borderRadius": [516, "border-radius"],
-        "topBorderContentRadius": [516, "top-border-content-radius"],
-        "boxed": [516],
-        "roundedMedia": [516, "rounded-media"],
-        "imgSrc": [513, "img-src"],
-        "imgAlt": [513, "img-alt"],
-        "videoSrc": [513, "video-src"]
+        "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"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/jump-card.js.map

@@ -1 +1 @@
-{"file":"jump-card.js","mappings":";;AAAA,MAAM,WAAW,GAAG,8wGAA8wG,CAAC;AACnyG,uBAAe,WAAW;;MCMb,OAAO;;;;0BAI2B,KAAK;oBAKX,KAAK;;;4BAeG,KAAK;sCAKK,KAAK;qBAKtB,KAAK;4BAKE,KAAK;sBAKZ,EAAE;sBAKF,EAAE;wBAKA,EAAE;;IAE5C,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({reflect: true}) horizontal: boolean = false;\n\n  /**\n   * Indicates if the card is horizontal\n   */\n  @Prop({reflect: true}) dark: boolean = false;\n\n  /**\n * Indicates if card has shadow\n */\n  @Prop({reflect: true}) shadow: boolean;\n\n  /**\n   * Indicates if card has borders\n   */\n  @Prop({reflect: true}) border: boolean;\n\n  /**\n   * Indicates if borders of the entire card are rounded\n   */\n  @Prop({reflect: true}) borderRadius: boolean = false;\n\n  /**\n   * Indicates if border top of the body is rounded; Not compatible with boxed\n   */\n  @Prop({reflect: true}) topBorderContentRadius: boolean = false;\n\n  /**\n   * Indicates if media has padding; Not compatible with roundedMedia\n   */\n  @Prop({reflect: true}) boxed: boolean = false;\n\n  /**\n   * Indicates if image is rounded and there isnt a bg\n   */\n  @Prop({reflect: true}) roundedMedia: boolean = false;\n\n  /**\n   * Indicates the imgSrc of the card\n   */\n  @Prop({reflect: true}) imgSrc: string = '';\n\n  /**\n   * Indicates the img's alt of the card\n   */\n  @Prop({reflect: true}) imgAlt: string = '';\n\n  /**\n   * Indicates the videoSrc of the card\n   */\n  @Prop({reflect: true}) 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}
+{"file":"jump-card.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}

package/dist/components/jump-icon.js

@@ -1,6 +1,6 @@
-import { A as AppIcon, d as defineCustomElement$1 } from './jump-icon2.js';
+import { J as JumpIcon$1, d as defineCustomElement$1 } from './jump-icon2.js';
 
-const JumpIcon = AppIcon;
+const JumpIcon = JumpIcon$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { JumpIcon, defineCustomElement };

package/dist/components/jump-icon2.js

@@ -2397,7 +2397,7 @@ const feather = /*@__PURE__*/getDefaultExportFromCjs(feather$1.exports);
 const jumpIconCss = "jump-icon{display:inline-flex}jump-icon svg{width:1em;height:1em}";
 const JumpIconStyle0 = jumpIconCss;
 
-const AppIcon = /*@__PURE__*/ proxyCustomElement(class AppIcon extends HTMLElement {
+const JumpIcon = /*@__PURE__*/ proxyCustomElement(class JumpIcon extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -2408,7 +2408,7 @@ const AppIcon = /*@__PURE__*/ proxyCustomElement(class AppIcon extends HTMLEleme
         feather.replace();
     }
     render() {
-        return (h(Host, { key: '14d7d5f653ab907fe0d9da64a440698b76a6d04d' }, h("i", { key: 'fd7106ed6861826cbb4a17a6a5b63f3e02a39f1c', "data-feather": this.name, class: this.class })));
+        return (h(Host, { key: 'c61b602c009a61e74b1ade495fc2188bdcad79dc' }, h("i", { key: 'adf4f1038dbb9809f524bacaffca00a43c164652', "data-feather": this.name, class: this.class })));
     }
     static get style() { return JumpIconStyle0; }
 }, [0, "jump-icon", {
@@ -2423,12 +2423,12 @@ function defineCustomElement() {
     components.forEach(tagName => { switch (tagName) {
         case "jump-icon":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, AppIcon);
+                customElements.define(tagName, JumpIcon);
             }
             break;
     } });
 }
 
-export { AppIcon as A, defineCustomElement as d };
+export { JumpIcon as J, defineCustomElement as d };
 
 //# sourceMappingURL=jump-icon2.js.map