npm - @jumpgroup/jump-design-system - Versions diffs - 0.3.31 → 0.3.33 - Mend

@jumpgroup/jump-design-system 0.3.31 → 0.3.33

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 (87) hide show

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

	@@ -1 +1 @@
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,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOtF,MAAM,OAAO,OAAO;;~~4BAIa~~,SAAS;uBAMd,QAAQ;;IAKlC,sBAAsB,CAAC,KAAkB;QACvC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAErC,yCAAyC;QACzC,MAAM,UAAU,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QAC9D,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC,IAAI,EAAE,CAAC;QAEpF,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;QAC7D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACrB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACrB,IAAI,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;oBACxD,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;oBAEhC,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;wBAC7B,qEAAqE;wBACrE,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;4BAC/B,IAAI,OAAO,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gCACnD,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,aAAa,YAAY,EAAE,CAAC,CAAC,kBAAkB;4BAC7E,CAAC;iCAAM,CAAC;gCACN,OAAO,CAAC,KAAK,CAAC,WAAW,GAAG,uBAAuB,CAAC;4BACtD,CAAC;wBACH,CAAC,CAAC,CAAC;wBAEH,2CAA2C;wBAC3C,IAAI,eAAe,GAAG,IAAI,CAAC,sBAA6B,CAAC;wBACzD,IAAI,eAAe,EAAE,CAAC;4BACpB,eAAe,CAAC,KAAK,CAAC,WAAW,GAAG,uBAAuB,CAAC;wBAC9D,CAAC;oBACH,CAAC;gBAEH,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;gBACjC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;QAED,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;QAC9D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACrB,KAAK,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;gBACtB,IAAI,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC;oBACzD,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBACnC,CAAC;qBAAM,CAAC;oBACN,KAAK,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;gBAClC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAGD,gBAAgB;QACd,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;QAC3C,IAAG,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;YAC5B,yCAAyC;YACzC,MAAM,UAAU,GAAG,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;YAC9D,MAAM,YAAY,GAAG,UAAU,CAAC,gBAAgB,CAAC,0BAA0B,CAAC,CAAC,IAAI,EAAE,CAAC;YAEpF,6CAA6C;YAC7C,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;YAC7D,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACrB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;oBAC5B,wCAAwC;oBACxC,sBAAsB;oBACtB,+CAA+C;oBAC/C,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;wBACpE,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,uBAAuB,CAAC;oBACnD,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,aAAa,YAAY,EAAE,CAAC;oBACvD,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;IAEH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,~~EAAC~~,SAAS,~~EAAC~~,EAAE,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAE,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,CAAA,CAAC;~~YAC9E~~,4DAAK,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC,OAAO;~~gBACnC~~,6DAAM,IAAI,EAAC,UAAU,GAAQ,CACzB;~~YACN~~;~~gBACE~~,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACD,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Host, Event, EventEmitter, Prop, h, Listen } from '@stencil/core';\n\n@Component({\n tag: 'jump-tab',\n styleUrl: 'jump-tab.scss',\n shadow: true,\n})\nexport class JumpTab {\n\n JumpTabEl: HTMLElement;\n /* ---------------------- @PROPERTIES ------------------------- /\n @Prop() tabGroupName: string = undefined;\n\n /\n The style of the tab. The same value must be passed to all the items.\n * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n */\n @Prop() variant: string = 'inline';\n\n @Event({ eventName: 'jump-change-activetab'}) setActiveTab: EventEmitter;\n\n @Listen('jump-change-active-tab')\n changeActiveTabHandler(event: CustomEvent) {\n this.setActiveTab.emit(event.detail);\n\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item) => {\n if (item.getAttribute('identifier') === event.detail.id) {\n item.setAttribute('active', '');\n\n if (this.variant === 'sheet') {\n // Aggiungi il bordo ai fratelli dell'elemento attivo tranne l'ultimo\n items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`; // Usa i backticks\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\n // Rimuovi il bordo dal fratello precedente\n let previousSibling = item.previousElementSibling as any;\n if (previousSibling) {\n previousSibling.style.borderRight = '1px solid transparent';\n }\n }\n\n } else {\n item.removeAttribute('active');\n }\n });\n }\n\n let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');\n if (panel.length > 0) {\n panel.forEach((panel) => {\n if (panel.getAttribute('identifier') === event.detail.id) {\n panel.setAttribute('active', '');\n } else {\n panel.removeAttribute('active');\n }\n });\n }\n }\n\n\n componentDidLoad() {\n console.log('Component has been rendered');\n if(this.variant === 'sheet') {\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n // Seleziona tutti gli elementi jump-tab-item\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item, index) => {\n // Aggiungi bordo destro a tutti tranne:\n // - l'ultimo elemento\n // - l'elemento attivo (avente classe \"active\")\n if (index === items.length - 1 \|\| item.classList.contains('active')) {\n item.style.borderRight = '1px solid transparent';\n } else {\n item.style.borderRight = `1px solid ${primaryColor}`;\n }\n });\n }\n }\n\n }\n\n render() {\n return (\n <Host class=\"JumpTab\" id={this.tabGroupName} ref={(el) => {this.JumpTabEl = el;}}> \n <div class={\"Wrapper \" + this.variant}>\n <slot name=\"tab-item\"></slot>\n </div>\n <div>\n <slot name=\"tab-content\"></slot>\n </div>\n </Host>\n );\n }\n}"]}
1	+ {"version":3,"file":"jump-tab.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Event, EventEmitter, Prop, h, Listen } from '@stencil/core';\n\n@Component({\n tag: 'jump-tab',\n styleUrl: 'jump-tab.scss',\n shadow: true,\n})\nexport class JumpTab {\n\n JumpTabEl: HTMLElement;\n /* ---------------------- @PROPERTIES ------------------------- /\n @Prop() alignment: string = 'left';\n\n /\n If true, the jump-tab component have a full bottom border\n /\n @Prop() fullBorder: boolean = false;\n\n @Prop() tabGroupName: string = undefined;\n\n /\n The style of the tab. The same value must be passed to all the items.\n * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n */\n @Prop() variant: string = 'inline';\n\n @Event({ eventName: 'jump-change-activetab'}) setActiveTab: EventEmitter;\n\n @Listen('jump-change-active-tab')\n changeActiveTabHandler(event: CustomEvent) {\n this.setActiveTab.emit(event.detail);\n\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item) => {\n if (item.getAttribute('identifier') === event.detail.id) {\n item.setAttribute('active', '');\n\n if (this.variant === 'sheet') {\n // Aggiungi il bordo ai fratelli dell'elemento attivo tranne l'ultimo\n items.forEach((sibling, index) => {\n if (sibling !== item && index !== items.length - 1) {\n sibling.style.borderRight = `1px solid ${primaryColor}`; // Usa i backticks\n } else {\n sibling.style.borderRight = '1px solid transparent';\n }\n });\n\n // Rimuovi il bordo dal fratello precedente\n let previousSibling = item.previousElementSibling as any;\n if (previousSibling) {\n previousSibling.style.borderRight = '1px solid transparent';\n }\n }\n\n } else {\n item.removeAttribute('active');\n }\n });\n }\n\n let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');\n if (panel.length > 0) {\n panel.forEach((panel) => {\n if (panel.getAttribute('identifier') === event.detail.id) {\n panel.setAttribute('active', '');\n } else {\n panel.removeAttribute('active');\n }\n });\n }\n }\n\n\n componentDidLoad() {\n console.log('Component has been rendered');\n if(this.variant === 'sheet') {\n // Recupera il valore della variabile CSS\n const rootStyles = getComputedStyle(document.documentElement);\n const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n // Seleziona tutti gli elementi jump-tab-item\n let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n if (items.length > 0) {\n items.forEach((item, index) => {\n // Aggiungi bordo destro a tutti tranne:\n // - l'ultimo elemento\n // - l'elemento attivo (avente classe \"active\")\n if (index === items.length - 1 \|\| item.classList.contains('active')) {\n item.style.borderRight = '1px solid transparent';\n } else {\n item.style.borderRight = `1px solid ${primaryColor}`;\n }\n });\n }\n }\n\n }\n\n render() {\n return (\n <Host class={\"JumpTab\" + \" \" + this.alignment + \" \" + (this.fullBorder && 'fullBorder')} id={this.tabGroupName} ref={(el) => {this.JumpTabEl = el;}}> \n <div>\n <div class={\"Wrapper \" + this.variant}>\n <slot name=\"tab-item\"></slot>\n </div>\n <div>\n <slot name=\"tab-content\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}"]}

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

@@ -13,7 +13,18 @@ export default {
             control: 'select',
             options: ['inline', 'boxed', 'sheet', 'rounded'],
             description: 'Stile del tab e di tutti i suoi item',
-        }
+        },
+        alignment: {
+            name: 'alignment',
+            control: 'select',
+            options: ['left', 'center', 'right'],
+            description: 'Allineamento delle tab item',
+        },
+        fullBorder: {
+            name: 'full-border',
+            control: 'boolean',
+            description: 'Se true, il tab ha un bordo inferiore pieno',
+        },
     }
 };
 const Template = (args) => {
@@ -28,16 +39,26 @@ export const TabInline = Template.bind({});
 TabInline.args = {
     tabGroupName: 'Tab 1',
     variant: 'inline',
+    alignment: 'center'
 };
 export const TabBoxed = Template.bind({});
 TabBoxed.args = {
     tabGroupName: 'Tab 1',
-    variant: 'boxed'
+    variant: 'boxed',
+    alignment: 'left'
 };
 export const TabRounded = Template.bind({});
 TabRounded.args = {
     tabGroupName: 'tabRounded',
-    variant: 'rounded'
+    variant: 'rounded',
+    alignment: 'right'
+};
+export const TabInlineFullBorder = Template.bind({});
+TabInlineFullBorder.args = {
+    tabGroupName: 'Tab 1',
+    variant: 'inline',
+    alignment: 'center',
+    fullBorder: true
 };
 const TemplateDisabled = (args) => {
     const attributes = generateAttributesFromArgs(args);
@@ -50,7 +71,8 @@ const TemplateDisabled = (args) => {
 export const OneTabDisabled = TemplateDisabled.bind({});
 OneTabDisabled.args = {
     tabGroupName: 'Tab 1',
-    variant: 'boxed'
+    variant: 'boxed',
+    alignment: 'left'
 };
 const TemplateWithListenerExample = (args, data) => {
     let id = data.id;
@@ -78,7 +100,8 @@ export const TabInlineWithListener = TemplateWithListenerExample.bind({});
 TabInlineWithListener.args = {
     tabGroupName: 'tabInline',
     iconName: 'settings',
-    variant: 'inline'
+    variant: 'inline',
+    alignment: 'center'
 };
 export const TabBoxedWithListener = TemplateWithListenerExample.bind({});
 TabBoxedWithListener.args = {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"jump-tab.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACX,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,YAAY,EAAE;YACV,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sBAAsB;SACtC;QACD,OAAO,EAAE;YACL,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC;YAChD,WAAW,EAAE,sCAAsC;SACtD;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACrB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACrD,OAAO,UAAU,CAAC,aAAa,UAAU;uDACU,IAAI,CAAC,OAAO;uDACZ,IAAI,CAAC,OAAO;uDACZ,IAAI,CAAC,OAAO;gBACnD,CAAC,CAAC;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE3C,SAAS,CAAC,IAAI,GAAG;IACb,YAAY,EAAE,OAAO;IACrB,OAAO,EAAE,QAAQ;~~CACpB~~,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACZ,YAAY,EAAE,OAAO;IACrB,OAAO,EAAE,OAAO;~~CACnB~~,CAAC;AAGF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;IACd,YAAY,EAAE,YAAY;IAC1B,OAAO,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE;IAC9B,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,aAAa,UAAU;;;;gBAI7B,CAAC,CAAC;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxD,cAAc,CAAC,IAAI,GAAG;IAClB,YAAY,EAAE,OAAO;IACrB,OAAO,EAAE,OAAO;~~CACnB~~,CAAC;AAEF,MAAM,2BAA2B,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IAC/C,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,oEAAoE,UAAU;;;;;;;;;;8DAUtC,EAAE;;;;;;;kBAO9C,CAAC,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1E,qBAAqB,CAAC,IAAI,GAAG;IACzB,YAAY,EAAE,WAAW;IACzB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,QAAQ;~~CACpB~~,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzE,oBAAoB,CAAC,IAAI,GAAG;IACxB,YAAY,EAAE,UAAU;IACxB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1E,qBAAqB,CAAC,IAAI,GAAG;IACzB,YAAY,EAAE,YAAY;IAC1B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,2BAA2B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzE,oBAAoB,CAAC,IAAI,GAAG;IACxB,YAAY,EAAE,UAAU;IACxB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAC,IAAI,EAAE,EAAE;IACpC,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,aAAa,UAAU;;;;;;;;;;8DAUiB,EAAE;;;;;;;;SAQvD,CAAC,CAAC;AACX,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE7D,kBAAkB,CAAC,IAAI,GAAG;IACtB,YAAY,EAAE,OAAO;IACrB,OAAO,EAAE,SAAS;CACrB,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Tab/Tabs',\n tags: ['autodocs'],\n argTypes: {\n tabGroupName: {\n name: 'tab-group-name',\n control: 'text',\n description: 'Indica la tab attiva',\n },\n variant: {\n name: 'variant',\n control: 'select',\n options: ['inline', 'boxed', 'sheet', 'rounded'],\n description: 'Stile del tab e di tutti i suoi item',\n }\n }\n}\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" variant=${args.variant} active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" variant=${args.variant} label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" variant=${args.variant} label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const TabInline = Template.bind({});\n\nTabInline.args = {\n tabGroupName: 'Tab 1',\n variant: 'inline',\n};\n\nexport const TabBoxed = Template.bind({});\nTabBoxed.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed'\n};\n\n\nexport const TabRounded = Template.bind({});\nTabRounded.args = {\n tabGroupName: 'tabRounded',\n variant: 'rounded'\n};\n\nconst TemplateDisabled = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" disabled label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const OneTabDisabled = TemplateDisabled.bind({});\nOneTabDisabled.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed'\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<div style=\"background-color: #EEEEEE; padding: 2rem;\"><jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab4\" label=\"Tab 4\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>\n <div>La tab attiva ha l'id: <span id=\"active-tab\">loading..<span></div>\n </div>\n <script>\n (function(){\n let container = document.querySelector('#story--${id}');\n container.querySelector('#active-tab').innerText = \"tab1\";\n container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {\n container.querySelector('#active-tab').innerText = ev.detail.id;\n console.log('TemplateWithListenerExample - event:', ev.detail.id);\n });\n })();\n </script>`);\n};\n\nexport const TabInlineWithListener = TemplateWithListenerExample.bind({});\nTabInlineWithListener.args = { \n tabGroupName: 'tabInline',\n iconName: 'settings',\n variant: 'inline'\n};\n\nexport const TabBoxedWithListener = TemplateWithListenerExample.bind({});\nTabBoxedWithListener.args = { \n tabGroupName: 'tabBoxed',\n iconName: 'settings',\n variant: 'boxed'\n};\n\nexport const TaRoundedWithListener = TemplateWithListenerExample.bind({});\nTaRoundedWithListener.args = { \n tabGroupName: 'tabRounded',\n iconName: 'settings',\n variant: 'rounded'\n};\n\nexport const TabSheetWithListener = TemplateWithListenerExample.bind({});\nTabSheetWithListener.args = { \n tabGroupName: 'tabSheet',\n iconName: 'settings',\n variant: 'sheet'\n};\n\nconst TemplateWithPanel = (args,data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-panel identifier=\"tab1\" active slot=\"tab-content\">Tab 1 content</jump-tab-panel>\n <jump-tab-panel identifier=\"tab2\" slot=\"tab-content\">Tab 2 content</jump-tab-panel>\n <jump-tab-panel identifier=\"tab3\" slot=\"tab-content\">Tab 3 content</jump-tab-panel>\n </jump-tab> <div>La tab attiva ha l'id: <span id=\"active-tab\">loading..<span></div>\n </div><script>\n (function(){\n let container = document.querySelector('#story--${id}');\n container.querySelector('#active-tab').innerText = \"tab1\";\n container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {\n container.querySelector('#active-tab').innerText = ev.detail.id;\n console.log('TemplateWithPanel - event:', ev.detail.id);\n });\n })();\n </script>\n `);\n}\n\nexport const TabInlineWithPanel = TemplateWithPanel.bind({});\n\nTabInlineWithPanel.args = {\n tabGroupName: 'Tab 1',\n variant: 'rounded',\n};"]}
1	+ {"version":3,"file":"jump-tab.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab/jump-tab.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Tab/Tabs',\n tags: ['autodocs'],\n argTypes: {\n tabGroupName: {\n name: 'tab-group-name',\n control: 'text',\n description: 'Indica la tab attiva',\n },\n variant: {\n name: 'variant',\n control: 'select',\n options: ['inline', 'boxed', 'sheet', 'rounded'],\n description: 'Stile del tab e di tutti i suoi item',\n },\n alignment: {\n name: 'alignment',\n control: 'select',\n options: ['left', 'center', 'right'],\n description: 'Allineamento delle tab item',\n },\n fullBorder: {\n name: 'full-border',\n control: 'boolean',\n description: 'Se true, il tab ha un bordo inferiore pieno',\n },\n }\n}\n\nconst Template = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" variant=${args.variant} active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" variant=${args.variant} label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" variant=${args.variant} label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const TabInline = Template.bind({});\n\nTabInline.args = {\n tabGroupName: 'Tab 1',\n variant: 'inline',\n alignment: 'center' \n};\n\nexport const TabBoxed = Template.bind({});\nTabBoxed.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed',\n alignment: 'left'\n};\n\n\nexport const TabRounded = Template.bind({});\nTabRounded.args = {\n tabGroupName: 'tabRounded',\n variant: 'rounded',\n alignment: 'right'\n};\n\nexport const TabInlineFullBorder = Template.bind({});\nTabInlineFullBorder.args = {\n tabGroupName: 'Tab 1',\n variant: 'inline',\n alignment: 'center',\n fullBorder: true \n};\n\n\nconst TemplateDisabled = (args) => {\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" disabled label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>`);\n}\n\nexport const OneTabDisabled = TemplateDisabled.bind({});\nOneTabDisabled.args = {\n tabGroupName: 'Tab 1',\n variant: 'boxed',\n alignment: 'left'\n};\n\nconst TemplateWithListenerExample = (args, data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<div style=\"background-color: #EEEEEE; padding: 2rem;\"><jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab4\" label=\"Tab 4\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n </jump-tab>\n <div>La tab attiva ha l'id: <span id=\"active-tab\">loading..<span></div>\n </div>\n <script>\n (function(){\n let container = document.querySelector('#story--${id}');\n container.querySelector('#active-tab').innerText = \"tab1\";\n container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {\n container.querySelector('#active-tab').innerText = ev.detail.id;\n console.log('TemplateWithListenerExample - event:', ev.detail.id);\n });\n })();\n </script>`);\n};\n\nexport const TabInlineWithListener = TemplateWithListenerExample.bind({});\nTabInlineWithListener.args = { \n tabGroupName: 'tabInline',\n iconName: 'settings',\n variant: 'inline',\n alignment: 'center'\n};\n\nexport const TabBoxedWithListener = TemplateWithListenerExample.bind({});\nTabBoxedWithListener.args = { \n tabGroupName: 'tabBoxed',\n iconName: 'settings',\n variant: 'boxed'\n};\n\nexport const TaRoundedWithListener = TemplateWithListenerExample.bind({});\nTaRoundedWithListener.args = { \n tabGroupName: 'tabRounded',\n iconName: 'settings',\n variant: 'rounded'\n};\n\nexport const TabSheetWithListener = TemplateWithListenerExample.bind({});\nTabSheetWithListener.args = { \n tabGroupName: 'tabSheet',\n iconName: 'settings',\n variant: 'sheet'\n};\n\nconst TemplateWithPanel = (args,data) => {\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-tab ${attributes}>\n <jump-tab-item identifier=\"tab1\" active label=\"Tab 1\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"gear\" slot=\"tab-item\"></jump-tab-item>\n <jump-tab-panel identifier=\"tab1\" active slot=\"tab-content\">Tab 1 content</jump-tab-panel>\n <jump-tab-panel identifier=\"tab2\" slot=\"tab-content\">Tab 2 content</jump-tab-panel>\n <jump-tab-panel identifier=\"tab3\" slot=\"tab-content\">Tab 3 content</jump-tab-panel>\n </jump-tab> <div>La tab attiva ha l'id: <span id=\"active-tab\">loading..<span></div>\n </div><script>\n (function(){\n let container = document.querySelector('#story--${id}');\n container.querySelector('#active-tab').innerText = \"tab1\";\n container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {\n container.querySelector('#active-tab').innerText = ev.detail.id;\n console.log('TemplateWithPanel - event:', ev.detail.id);\n });\n })();\n </script>\n `);\n}\n\nexport const TabInlineWithPanel = TemplateWithPanel.bind({});\n\nTabInlineWithPanel.args = {\n tabGroupName: 'Tab 1',\n variant: 'rounded',\n};"]}

package/dist/collection/components/jump-tab-item/jump-tab-item.css CHANGED Viewed

@@ -13,7 +13,9 @@
   /* Tipologia boxed */
   /* Tipologia rounded */
   /** Tipologia sheet */
-  /* Disabilitato */
+}
+:host .Content:hover:not(.disabled) {
+  cursor: pointer;
 }
 :host .Content label {
   font-size: 16px;
@@ -89,7 +91,8 @@
   background-color: var(--jump-tabitem-rounded-bg-color);
   border-radius: 8px 8px 0px 0px;
 }
-:host .Content.disabled {
+:host(.disabled) {
   cursor: not-allowed;
   opacity: 0.5;
   pointer-events: none;

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

@@ -13,14 +13,13 @@ export class JumpTabItem {
         this.changeActiveTab.emit({ id: identifier });
     }
     componentDidLoad() {
-        console.log('Component has been rendered');
         // Deve leggere la prop "variant" del componente babbo jump-tab e popolare la propria prop "variant"
         let parentVariant = this.tabEl.parentElement.getAttribute('variant');
         this.variant = parentVariant;
     }
     render() {
-        return (h(Host, { key: '9d817c4dc39e4091ddf11bbe3586dd299db2c9a1', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) }, h("div", { key: '59bdb3b691141796dd912611742bc79c0d10a4ca', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
-            h("jump-icon", { key: '3cd011409f305046cf76d79256be72662f7d6c9a', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: '522ca0332d2302021ded4941ca67d790b308f3ac', class: "label" }, this.label))));
+        return (h(Host, { key: '4dc150c666d0387bb0fe8215837a45050deee930', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) + " " + (this.disabled ? 'disabled' : '') }, h("div", { key: 'ef7ea196d84f892abad92c7c28cde1fcbc3b9573', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
+            h("jump-icon", { key: '9c4b48264448f202cb514e63b236aa5dbe44dd11', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: '62429460a5e9204775f54be22a713453c276eb0a', class: "label" }, this.label))));
     }
     static get is() { return "jump-tab-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-tab-item/jump-tab-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"jump-tab-item.js","sourceRoot":"","sources":["../../../src/components/jump-tab-item/jump-tab-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAC,KAAK,EAAG,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOrF,MAAM,OAAO,WAAW;;0BAOO,SAAS;wBAKX,SAAS;4BAML,MAAM;qBACb,EAAE;sBACA,KAAK;wBAEH,KAAK;uBAMN,QAAQ;;IAInC,SAAS,CAAC,UAAU;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,UAAU,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,gBAAgB;QACd,~~OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;QAC3C,~~oGAAoG;QACpG,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;~~QACtE~~,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;~~IAC9B~~,CAAC;~~IAkED~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA,CAAC,CAAC,~~EACjC~~,KAAK,EAAE,cAAc,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,~~GAAE~~,CAAC,IAAI,CAAC,OAAO,CAAC;~~YAC1E~~,4DAAK,KAAK,EAAE,UAAU,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU;gBAC1O,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC;oBACvE,kEAAW,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAa;gBAE3F,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop,State, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'jump-tab-item',\n styleUrl: 'jump-tab-item.scss',\n shadow: true,\n})\nexport class JumpTabItem {\n\n /* ---------------------- @PROPERTIES ------------------------- /\n\n /\n Identifier of the tab\n /\n @Prop() identifier: string = undefined;\n\n /\n Name of the icon. If not provided, the icon will not be displayed\n /\n @Prop() iconName: string = undefined;\n\n /\n Icon position, apply only if the icon is present\n * Choosed from \"left\", \"top\"\n /\n @Prop() iconPosition: string = 'left';\n @Prop() label: string = '';\n @Prop() active: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /\n The style of the tab item\n * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n */\n @State() variant: string = 'inline';\n\n @Event({ eventName: 'jump-change-active-tab' }) changeActiveTab: EventEmitter;\n\n changeTab(identifier){\n this.changeActiveTab.emit({id: identifier});\n }\n\n componentDidLoad() {\n ~~console.log('Component has been rendered');\n~~ // Deve leggere la prop \"variant\" del componente babbo jump-tab e popolare la propria prop \"variant\"\n let parentVariant = this.tabEl.parentElement.getAttribute('variant');\n this.variant = parentVariant;\n }\n\n ~~// componentDidLoad() {\n // console.log('Component has been rendered');\n \n // // console.log('THIS', this);\n // if(this.active){\n // let tab = this.~~tabEl.previousElementSibling as any;\n // if(tab){\n // tab.style.borderRight = 'none';\n // }\n // }\n // }\n\n // @Watch('active')\n // watchActive(newValue) {\n // console.log('watch active');\n // // Devo ripristinare i bordi di tutti i fratelli di this.tabEl\n // let siblings = this.tabEl.parentElement.children as any;\n // for (let i = 0; i < siblings.length; i++) {\n // siblings[i].style.borderRight = '1px solid red';\n // }\n\n // console.log('thisel', this.tabEl);\n // console.log('newvalue', newValue);\n // console.log('xxxxxx', this.tabEl.classList);\n\n // // Se this.tabEl ha la classe 'active' allora rimuovo il bordo destro\n // if (newValue && this.tabEl.classList.contains('active')) {\n // console.log('contiene ');\n // this.tabEl.style.borderRight = 'none';\n\n // // Rimuovere il bordo destro dal fratello precedente, se esiste\n // let prevEl = this.tabEl.previousElementSibling as any;\n // console.log('revEl', prevEl);\n // if (prevEl) {\n // prevEl.style.borderRight = 'none';\n // }\n // }\n // }\n\n // @Watch('active')\n // watchActive(newValue) {\n // // Ripristina i bordi di tutti gli elementi\n // const items = document.querySelectorAll('.JumpTabItem') as any;\n // console.log('ITEMS', items);\n // items.forEach(item => {\n // item.style.borderRight = '1px solid red';\n // });\n\n // // Verifica se this.tabEl ha la classe 'active'\n // if (newValue && this.tabEl.classList.contains('active')) {\n // // Rimuovere il bordo destro dal nuovo elemento attivo\n // this.tabEl.style.borderRight = 'none';\n\n // // Rimuovere il bordo destro dal fratello precedente, se esiste\n // let prevEl = this.tabEl.previousElementSibling as any;\n // if (prevEl) {\n // prevEl.style.borderRight = 'none';\n // }\n // }\n // }\n\n\n tabEl: HTMLElement;\n\n render() {\n return (\n <Host\n ref={(el) => { this.tabEl = el }}\n class={\"JumpTabItem \" + (this.active ? 'active' : '') + \" \" +(this.variant)}>\n <div class={\"Content \" + (this.iconName ? this.iconPosition : '') + \" \" + (this.variant) + \" \" + (this.active ? 'active' : '') + \" \" + (this.disabled ? 'disabled' : '')} onClick={() => this.changeTab(this.identifier)} id={this.identifier}>\n {(this.iconName && (this.variant == 'inline' \|\| this.variant == 'boxed')) &&\n <jump-icon library=\"fa\" category=\"regular\" name={this.iconName} size=\"small\"></jump-icon>\n }\n <span class=\"label\">{this.label}</span>\n </div>\n </Host>\n );\n }\n}\n\n"]}
1	+ {"version":3,"file":"jump-tab-item.js","sourceRoot":"","sources":["../../../src/components/jump-tab-item/jump-tab-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAC,KAAK,EAAG,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOrF,MAAM,OAAO,WAAW;;0BAOO,SAAS;wBAKX,SAAS;4BAML,MAAM;qBACb,EAAE;sBACA,KAAK;wBAEH,KAAK;uBAMN,QAAQ;;IAInC,SAAS,CAAC,UAAU;QAClB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,UAAU,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,gBAAgB;QACd,oGAAoG;QACpG,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACrE,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC;IAC/B,CAAC;IAID,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA,CAAC,CAAC,EAChC,KAAK,EAAE,cAAc,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;YACtH,4DAAK,KAAK,EAAE,UAAU,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU;gBAC1O,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC;oBACvE,kEAAW,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAa;gBAE3F,6DAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CACnC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop,State, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'jump-tab-item',\n styleUrl: 'jump-tab-item.scss',\n shadow: true,\n})\nexport class JumpTabItem {\n\n /* ---------------------- @PROPERTIES ------------------------- /\n\n /\n Identifier of the tab\n /\n @Prop() identifier: string = undefined;\n\n /\n Name of the icon. If not provided, the icon will not be displayed\n /\n @Prop() iconName: string = undefined;\n\n /\n Icon position, apply only if the icon is present\n * Choosed from \"left\", \"top\"\n /\n @Prop() iconPosition: string = 'left';\n @Prop() label: string = '';\n @Prop() active: boolean = false;\n\n @Prop() disabled: boolean = false;\n\n /\n The style of the tab item\n * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n */\n @State() variant: string = 'inline';\n\n @Event({ eventName: 'jump-change-active-tab' }) changeActiveTab: EventEmitter;\n\n changeTab(identifier){\n this.changeActiveTab.emit({id: identifier});\n }\n\n componentDidLoad() {\n // Deve leggere la prop \"variant\" del componente babbo jump-tab e popolare la propria prop \"variant\"\n let parentVariant = this.tabEl.parentElement.getAttribute('variant');\n this.variant = parentVariant;\n }\n\n tabEl: HTMLElement;\n\n render() {\n return (\n <Host\n ref={(el) => { this.tabEl = el }}\n class={\"JumpTabItem \" + (this.active ? 'active' : '') + \" \" + (this.variant) + \" \" + (this.disabled ? 'disabled' : '')}>\n <div class={\"Content \" + (this.iconName ? this.iconPosition : '') + \" \" + (this.variant) + \" \" + (this.active ? 'active' : '') + \" \" + (this.disabled ? 'disabled' : '')} onClick={() => this.changeTab(this.identifier)} id={this.identifier}>\n {(this.iconName && (this.variant == 'inline' \|\| this.variant == 'boxed')) &&\n <jump-icon library=\"fa\" category=\"regular\" name={this.iconName} size=\"small\"></jump-icon>\n }\n <span class=\"label\">{this.label}</span>\n </div>\n </Host>\n );\n }\n}\n\n"]}

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

@@ -5,7 +5,7 @@ export class JumpTabPanel {
         this.active = false;
     }
     render() {
-        return (h(Host, { key: 'be2d841d0dd1b5cf9785e427d23cec2f64736722', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '843453d48997bac1a6d9407ef4d8338fe50c2bf8', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: '6359a6f56a92683f44964e41ee46e49a8de8e10a' }))));
+        return (h(Host, { key: '14fc22857d3f935d1a573375d0bae6267d616099', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '6e690078d627fd44b8542a2979b0a53ad9ba5d2c', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: '41c5be2ee7a664d028d781e9c48f7feca1d25bf7' }))));
     }
     static get is() { return "jump-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/jump-navbar.d.ts ADDED Viewed

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

package/dist/components/jump-navbar.js ADDED Viewed

@@ -0,0 +1,84 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './jump-button2.js';
+import { d as defineCustomElement$2 } from './jump-icon2.js';
+const jumpNavbarCss = ":host{--jump-navbar-height:var(--header-height, 100px);--jump-navbar-background:var(--bg-drawer, #fff);--jump-navbar-width:var(--drawer-width, 240px);--jump-navbar-shadow:8px 0 15px 0 #00000026;--jump-navbar-zindex:2;--jump-navbar-transition:0.3s all ease-in-out;--jump-navbar-gap:2.5rem;--jump-navbar-padding:1rem;--jump-navbar-close-top:calc(var(--header-height) + 1rem);--jump-navbar-close-left:calc(var(--drawer-width) - 2rem);--jump-navbar-close-gap:0.5rem}";
+const JumpNavbarStyle0 = jumpNavbarCss;
+const JumpNavbar$1 = /*@__PURE__*/ proxyCustomElement(class JumpNavbar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.logo = { image_url: '', alt: '', link: '#', target: '_self' };
+        this.navItems = [];
+        this.secondaryNavItems = [];
+        this.mobileThreshold = 768;
+        this.type = 'basic';
+        this.navPosition = 'inline';
+        this.megaMenuAlignment = 'left';
+        this.sticky = false;
+        this.stickyThreshold = 0;
+        this.mobileLogo = this.logo;
+        this.user = null;
+        this.isMobile = false;
+    }
+    handleResize() {
+        this.isMobile = window.innerWidth < this.mobileThreshold;
+    }
+    render() {
+        var _a, _b;
+        return (h(Host, { key: '87fa483a27dc0314a3fadcc0b7c4cf61013ad98d' }, h("jump-button", { key: 'b2756659bde1018ea284a59d0919729e593364ac', variant: "primary", size: "small", text: true, href: this.logo['link'], target: (_a = this.logo['target']) !== null && _a !== void 0 ? _a : '_self' }, h("img", { key: 'b3b7d8f6028d16d0967d7fdb71068cd9f2a0636c', src: this.logo['image_url'], alt: this.logo['alt'] })), this.isMobile &&
+            h("div", { key: '9ff3e44a80259536f2bbb58ccc6be5967a3dc189', class: "MobileMenuOffCanvas" }, h("div", { key: 'c8e35bfbea3eb84d9df53fe8f18fa5cdccfe31c0', class: "MobileMenuOffCanvas__Header" }, "/* TODO: ricerca + pulsante chiusura + profilo utente con immagine */"), h("div", { key: 'ac6ad3c511ce635f4aa541a8326e97a77d3c4f2b', class: "MobileMenuOffCanvas__Navbar" }, this.navbar.cloneNode(true)), h("div", { key: 'f0f1ef266da0efa437c08df92a7d481b68892329', class: "MobileMenuOffCanvas__Footer" }, "/* TODO: langswitcher */", this.mobileLogo &&
+                h("jump-button", { key: '6eaa0a821b15ea28e8a8672e03cf51c5e57a1ca1', variant: "primary", size: "small", text: true, href: this.mobileLogo['link'], target: (_b = this.mobileLogo['target']) !== null && _b !== void 0 ? _b : '_self' }, h("img", { key: '7ef8f3187b555bc27172d062fb19a20423409bbc', src: this.mobileLogo['image_url'], alt: this.mobileLogo['alt'] })))), h("nav", { key: 'ab7a9bcbd9e907448a6dc393f1efa32e80752856', ref: (el) => {
+                this.navbar = el;
+            } }, h("ul", { key: '70c90191941c1b371218a69216f30921c5e097af' }, this.navItems.map((item) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: item.link, target: item.target, class: item.class }, item.text, this.secondaryNavItems.some(secondaryItem => secondaryItem.parent === item.id) &&
+            h("jump-icon", { slot: "suffix", library: "lucide", name: "chevron-down", size: "small" })), this.secondaryNavItems.map((secondaryItem) => (secondaryItem.parent === item.id &&
+            h("ul", { "data-parent": secondaryItem.parent }, secondaryItem.title &&
+                h("h4", null, secondaryItem.title), " /* TODO: utilizzare jump-heading? */", secondaryItem.items.map((subItem) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: subItem.link, target: subItem.target, class: subItem.class }, subItem.text)))))))))))), h("slot", { key: '7edb581eab5c8942b9670129f893e92eefe9b5f3', name: "actions" }, h("slot", { key: '9e1eaf7c15bd2767d78d00a594a28f1d867ebb6d', name: "lang_switcher" }), h("slot", { key: '9cff169f4012c9dc87e9b6b78497f3c0e53dae58', name: "search" }), h("slot", { key: '465d61b9266c7ff12cfd434decd44579b84ab908', name: "buttons" }), h("slot", { key: 'c7e66e9bc83921f327f4f7fe74e3e68ac3d4a44a', name: "cart" }))));
+    }
+    static get style() { return JumpNavbarStyle0; }
+}, [1, "jump-navbar", {
+        "logo": [16],
+        "navItems": [16],
+        "secondaryNavItems": [16],
+        "mobileThreshold": [2, "mobile-threshold"],
+        "type": [1],
+        "navPosition": [1, "nav-position"],
+        "megaMenuAlignment": [1, "mega-menu-alignment"],
+        "sticky": [4],
+        "stickyThreshold": [2, "sticky-threshold"],
+        "mobileLogo": [16],
+        "user": [16],
+        "isMobile": [32]
+    }, [[9, "resize", "handleResize"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["jump-navbar", "jump-button", "jump-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "jump-navbar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, JumpNavbar$1);
+            }
+            break;
+        case "jump-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "jump-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+const JumpNavbar = JumpNavbar$1;
+const defineCustomElement = defineCustomElement$1;
+export { JumpNavbar, defineCustomElement };
+//# sourceMappingURL=jump-navbar.js.map

package/dist/components/jump-navbar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"jump-navbar.js","mappings":"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","names":["JumpNavbar"],"sources":["src/components/jump-navbar/jump-navbar.scss?tag=jump-navbar&encapsulation=shadow","src/components/jump-navbar/jump-navbar.tsx"],"sourcesContent":[":host {\n --jump-navbar-height: var(--header-height, 100px);\n --jump-navbar-background: var(--bg-drawer, #fff);\n --jump-navbar-width: var(--drawer-width, 240px);\n --jump-navbar-shadow: 8px 0 15px 0 #00000026;\n --jump-navbar-zindex: 2;\n --jump-navbar-transition: 0.3s all ease-in-out;\n --jump-navbar-gap: 2.5rem;\n --jump-navbar-padding: 1rem;\n --jump-navbar-close-top: calc(var(--header-height) + 1rem);\n --jump-navbar-close-left: calc(var(--drawer-width) - 2rem);\n --jump-navbar-close-gap: 0.5rem;\n}\n","import { Component, Host, Prop, h, Listen, State } from '@stencil/core';\n\n@Component({\n tag: 'jump-navbar',\n styleUrl: 'jump-navbar.scss',\n shadow: true,\n})\nexport class JumpNavbar {\n @Prop() logo: {\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n } = { image_url: '', alt: '', link: '#', target: '_self' };\n @Prop() navItems: Array<{\n id: string,\n text: string,\n link: string,\n class: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n }> = [];\n @Prop() secondaryNavItems: Array<{\n parent: string | null,\n title: string | null,\n items: Array<{\n text: string,\n link: string,\n class: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n }>\n }> = [];\n @Prop() mobileThreshold: number = 768;\n @Prop() type: 'basic' | 'hamburger_left' | 'hamburger_right' = 'basic';\n @Prop() navPosition: 'inline' | 'bottom' | 'megamenu' = 'inline'; //TODO: Chiedere a Vale se può essere inline + sulla riga sotto mostriamo la tendina oppure è un menu a sé stante quello sotto\n @Prop() megaMenuAlignment: 'left' | 'right' = 'left';\n @Prop() sticky: boolean = false;\n @Prop() stickyThreshold: number = 0; // Possible to get sticky on mobile only after a certain scroll threshold\n @Prop() mobileLogo: {\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n } | null = this.logo;\n @Prop() user : {\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n } | null = null;\n\n @State() isMobile: boolean = false;\n\n navbar: HTMLElement;\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.isMobile = window.innerWidth < this.mobileThreshold;\n }\n\n render() {\n return (\n <Host>\n <jump-button variant=\"primary\" size=\"small\" text href={this.logo['link']}\n target={this.logo['target'] ?? '_self'}>\n <img src={this.logo['image_url']} alt={this.logo['alt']} />\n </jump-button>\n {this.isMobile &&\n <div class=\"MobileMenuOffCanvas\">\n <div class=\"MobileMenuOffCanvas__Header\">\n /* TODO: ricerca + pulsante chiusura + profilo utente con immagine */\n </div>\n <div class=\"MobileMenuOffCanvas__Navbar\">\n {this.navbar.cloneNode(true)}\n </div>\n <div class=\"MobileMenuOffCanvas__Footer\">\n /* TODO: langswitcher */\n {this.mobileLogo &&\n <jump-button variant=\"primary\" size=\"small\" text href={this.mobileLogo['link']}\n target={this.mobileLogo['target'] ?? '_self'}>\n <img src={this.mobileLogo['image_url']} alt={this.mobileLogo['alt']} />\n </jump-button>\n }\n </div>\n </div>}\n <nav ref={(el: HTMLElement) => {\n this.navbar = el;\n }}>\n <ul>\n {this.navItems.map((item) => (\n <li>\n <jump-button variant=\"primary\" size=\"small\" text href={item.link} target={item.target}\n class={item.class}>\n {item.text}\n {this.secondaryNavItems.some(secondaryItem => secondaryItem.parent === item.id) &&\n <jump-icon slot=\"suffix\" library=\"lucide\" name=\"chevron-down\" size=\"small\"></jump-icon>\n }\n </jump-button>\n\n {this.secondaryNavItems.map((secondaryItem) => (\n secondaryItem.parent === item.id &&\n <ul data-parent={secondaryItem.parent}>\n {secondaryItem.title &&\n <h4>{secondaryItem.title}</h4>} /* TODO: utilizzare jump-heading? */\n {secondaryItem.items.map((subItem) => (\n <li>\n <jump-button variant=\"primary\" size=\"small\" text href={subItem.link} target={subItem.target}\n class={subItem.class}>\n {subItem.text}\n </jump-button>\n </li>\n ))}\n </ul>\n ))}\n </li>\n ))}\n </ul>\n </nav>\n <slot name=\"actions\">\n <slot name=\"lang_switcher\"></slot>\n <slot name=\"search\"></slot>\n <slot name=\"buttons\"></slot>\n <slot name=\"cart\"></slot>\n </slot>\n </Host>\n );\n }\n}\n\n"],"version":3}

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

@@ -80,9 +80,9 @@ const JumpPaginationTable$1 = /*@__PURE__*/ proxyCustomElement(class JumpPaginat
     /* --------------------- RENDER ------------------------------- */
     render() {
         var _a;
-        return (h(Host, { key: 'b93a7aae00b09ebe32f2bab6857171383edc57bf', class: "JumpPaginationTable" }, h("div", { key: '44f7e61e77ea870d3283cf0c1e937c45fc3fec77', class: "JumpPaginationTable__Wrapper" }, h("div", { key: 'e358074b3863755d73193dae05cdb3bdfd3b572c', class: "elementsPerPage" }, h("label", { key: 'bc09d6744ecc3dea86c4364e2d3c7576feab96bc', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '2d4c6986712352acacd53e0b9e39624759ec8768', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRangesArray.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: '92aa49a2ee542637da64517f88ff6afae18ac5cf', class: "indicators" }, h("div", { key: '44dfbc53900e05f71702c184446f495926e2113a', class: "elements" }, h("span", { key: '0ab5aef1040c55245af7bb7c81c974afcd8e0112' }, h("span", { key: 'e11a148e6c34c2166a50e899d57e6100e487e0ee' }, this.first), " - ", h("span", { key: '518e3df7eb88ba05da4214b25f126f4f9adac1d1' }, this.last), " ", this.pagLabel, " ", h("span", { key: '1da94abdbf776484c51ab0f065526c766ec7864b' }, this.total))), h("div", { key: '147eb949e7715fd2f981aefa263b3bf7db37ac87', class: "arrow" }, this.showFirstAndLast &&
-            h("jump-button", { key: '64bd0a9572b0d5af3c96981a03067ddb83800b45', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '839d1a645fcbefe1c451fa89f2a78be9c0ef9fc0', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '8ae7904417ac2d4358d7ec46b26ed902a1ace87e', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '5796c3bcbf234571471ba856d9ee3b88abdd6b11', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: 'c0023c0febe6f4d0bf4b54d6ffbb846776a6c196', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '68e02ea94cb642bd615bb2de5d144c9dea939fac', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
-            h("jump-button", { key: '0d2b0c6cde87459ae3508bbd3cb957ec3fe0ac1c', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '96fa3939e421d4380f573cb92ce71e37df99cdf8', slot: "suffix", name: "chevrons-right" }), " "))))));
+        return (h(Host, { key: '68cfdc8f670c77a14605e4f151b41e2d551531e5', class: "JumpPaginationTable" }, h("div", { key: '80d51c132999625d22b6e7ed73867e79a043ae99', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '709e412acf386ad3149e7a04208a0ea4948b4f0b', class: "elementsPerPage" }, h("label", { key: '73985f2877b3c242b8deccb68ac11c878780e6ee', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '0def3077b6dc04018aecd2f50b0301bc19c29527', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRangesArray.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: 'c2691bc0e79d043625977b276ac38ec10a41d73b', class: "indicators" }, h("div", { key: 'd9d62ca7b06479244bb396d38fc01dd86236515d', class: "elements" }, h("span", { key: '51ea23a9d77319738404c8b6ead86ea0a9052e1c' }, h("span", { key: '8fd64ef028151ae61c31998f72036ff4c9c9f151' }, this.first), " - ", h("span", { key: 'a001b2a509920566c34a41afb24a823e0445c3e2' }, this.last), " ", this.pagLabel, " ", h("span", { key: '9a27e142353e7d410655f270988183a82c0792a1' }, this.total))), h("div", { key: 'ba778721da92c9147449de9d0869a06d65615602', class: "arrow" }, this.showFirstAndLast &&
+            h("jump-button", { key: '76dfd54bfa05a6c33489aa41f9150c793fac5f85', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '0aee871e37e2e5b5190fc62cd8c8617d209f57ed', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '9e82cf38238d358a4084078b975a3f75bf55e9fe', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '7303a4371e0540dfa28feaf4a1f69662b646e64b', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '4bfb0713a9a374c30873e046b7ded26965cfce84', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '52c929962accd14480152a0dfd2e03904fd79fc4', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
+            h("jump-button", { key: '6f0c43ef094c622447cd1095ab70ce6bfd2c464a', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: 'cb05b4a61efdebf03a17b353f17572d038df251f', slot: "suffix", name: "chevrons-right" }), " "))))));
     }
     static get watchers() { return {
         "elementsRanges": ["elementsRangesChanged"],

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

@@ -32,7 +32,7 @@ const JumpPagination$1 = /*@__PURE__*/ proxyCustomElement(class JumpPagination e
     }
     /* --------------------- RENDER ------------------------------- */
     render() {
-        return (h(Host, { key: 'fc5407d7263fe2840016376275193975c5ce07cb', class: "JumpPagination" }, h("div", { key: 'ac8929cf57ca834e7787bed1362ed2208b92a110', class: "JumpPagination__Wrapper" }, h("div", { key: 'a8769c49f76181fc8614ce3659727e9ec678c444', class: "indicators" }, h("div", { key: '644df00cb7899d314aef6185f626dc4c77b9998d', class: "elements" }, h("span", { key: 'c43a1303a3e5a96312a334ca42c9d9616e2597c8' }, h("span", { key: 'a4ca75395697a77ca64c1524765561f01c8cabfc' }, this.current), " ", this.pagLabel, " ", h("span", { key: '41ab2ec87e2dd56e227888202504a0557d684aa0' }, this.last))), h("div", { key: '07de8c668bd5a9e84427bbcd9d50344333e94331', class: "arrow" }, this.showFirstAndLast &&
+        return (h(Host, { key: 'e7b289bce3ef2bcfe2b45135b463feb2390c50a3', class: "JumpPagination" }, h("div", { key: '6559e463bf9d9973dd037f6b6a23f20816ef1882', class: "JumpPagination__Wrapper" }, h("div", { key: '5650bf9580bd470604e8841faf33e6b029549cda', class: "indicators" }, h("div", { key: 'b40e74ede39cd17fd770cf1fc46d46644a86fc63', class: "elements" }, h("span", { key: 'af919f31f94448c99291a830dd35da7169cd24ec' }, h("span", { key: '96b8773daf276e9285b91f06cf6f5fa28a5d6727' }, this.current), " ", this.pagLabel, " ", h("span", { key: 'e7dd92a3a48e23d5c28d1b6e0f3c07cddd837598' }, this.last))), h("div", { key: '1a3338a3e913f9c92a530203f91e93f6085b607c', class: "arrow" }, this.showFirstAndLast &&
             // <button
             //   onClick={() => {this.current = 1} }
             //   disabled={(this.current === 1) ? true : false}>
@@ -40,14 +40,14 @@ const JumpPagination$1 = /*@__PURE__*/ proxyCustomElement(class JumpPagination e
             //     disabled={(this.current === 1) ? true : false}
             //     ></jump-icon>
             // </button>
-            h("jump-button", { key: '3d7ec2eb837082a88213b3bbdeb41ce1b8621c73', onClick: () => { this.current = 1; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '72cb59738cd7e3fa4b82f75e41f54b75db0f91a5', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '2d310117b1aaff7478b446ebb3a7b6abe77710cd', onClick: () => { this.current--; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'c67fa75cef688edf974f9160ff96e6707c24e8a3', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '860dfc4e061ca2a3ff9cb1431c876d49786deb3a', onClick: () => { this.current++; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'dcfd19e401f0f46f9ea4d74d409d016676049bbe', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
+            h("jump-button", { key: '23075cb5a2513048e7ee690242f0ce5a54c95538', onClick: () => { this.current = 1; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '0e834c3117fca9d2dd593a4b5ceb3934e7eb547a', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: 'fc27582a142ed6051187692f6a31a2c51f91e4af', onClick: () => { this.current--; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'a2998274cf27c33b80f7fd0c917a5583b70ef8f0', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '26d7a56a2a0312cf526dcf9bc432679c756534f1', onClick: () => { this.current++; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '6769d3484fdd63d2fff5268392111137273b9541', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
             // <button
             //   onClick={() => {this.current = this.last}}
             //   disabled={(this.current === this.last) ? true : false}
             //   >
             //   <jump-icon library="fa" category="regular" name="chevrons-right" size="small" slot="prefix"></jump-icon>
             // </button>
-            h("jump-button", { key: '5677dd009a15a5a46318d914a301d8ac9271224d', onClick: () => { this.current = this.last; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '95d544d95eec216228151bef5fac83d7a39af0ea', slot: "suffix", name: "chevrons-right" }), " "))))));
+            h("jump-button", { key: '7e3c33e8a7c7d7c1dbaeb6009781602023f71133', onClick: () => { this.current = this.last; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '418f61b2481e76f5766a92e6b7c8d0fad5dcd70a', slot: "suffix", name: "chevrons-right" }), " "))))));
     }
     static get watchers() { return {
         "current": ["watchcurrent"]

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

@@ -20,6 +20,7 @@ const JumpQuantity$1 = /*@__PURE__*/ proxyCustomElement(class JumpQuantity exten
         this.variant = 'vertical';
         this.showButtons = true;
         this.value = undefined;
+        this.currentValue = undefined;
     }
     onValueChange(newValue, oldValue) {
         this.change.emit({
@@ -32,13 +33,15 @@ const JumpQuantity$1 = /*@__PURE__*/ proxyCustomElement(class JumpQuantity exten
      * Get the current value
      */
     async getValue() {
-        return this.value;
+        return this.currentValue;
     }
     async reset() {
         this.value = this.min;
+        this.currentValue = this.value;
     }
     componentWillLoad() {
         this.value = this.min;
+        this.currentValue = this.value;
         this.internals.setFormValue(this.value.toString());
     }
     formResetCallback() {
@@ -46,20 +49,30 @@ const JumpQuantity$1 = /*@__PURE__*/ proxyCustomElement(class JumpQuantity exten
         this.internals.setFormValue('');
     }
     handleChange(event) {
-        this.value = event.target.value;
+        let value = parseInt(event.target.value);
+        if (value < this.min) {
+            this.currentValue = this.min;
+        }
+        else if (value > this.max) {
+            this.currentValue = this.max;
+        }
+        else {
+            this.currentValue = event.target.value;
+        }
     }
     //avoid user can change the value below the min
     handleBlur(event) {
         if (event.target.value < this.min) {
             this.value = this.min;
+            this.currentValue = this.min;
         }
     }
     render() {
-        return (h(Host, { key: '98247725c15e0768eaa1abcb970488367343f296', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '44810a868b55dae39d2f52fff655b1add47f09d7' }, this.label), h("div", { key: '9ac8f2057d2c7042038c4f045a769796a0f2baf1', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
-            h("jump-button", { key: '1f38a16961192da4de7260516f1ccf6bf4053400', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: 'd6db4d6b632a18a9d87b2c981c50486616b3e553', library: "lucide", name: "minus", size: "small" })), h("input", { key: 'dc7ef8b1dd29423c315e8f94a4f6434b1d0b4093', ref: (el) => {
+        return (h(Host, { key: 'c8c5cbaed22ce180cc74a88fe785a1f7b1846c1c', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '92006694c00522d202fba822c843365ab6e0d51b' }, this.label), h("div", { key: '6299b0b6c5a5b64fbcc7c2206a5d4af5c9f45113', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
+            h("jump-button", { key: '8d8d7b4a24d527ebc10ea47500de30ed9cc39040', onClick: () => this.currentValue = this.currentValue - this.step, disabled: this.currentValue <= this.min, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '34037f49b6b3cba457b2b6c5db774da655c25b3b', library: "lucide", name: "minus", size: "small" })), h("input", { key: '93a3a85df493c9d10f98fc93f694d7962162eedd', ref: (el) => {
                 this.inputEl = el;
-            }, type: 'number', value: this.value, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
-            h("jump-button", { key: '8f63f27a11f7e0bcdec7313170be3724a18166b8', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: 'd12d5a6e63c1c3faf00a42d716d19724c3f1de63', library: "lucide", name: "plus", size: "small" })))));
+            }, type: 'number', value: this.currentValue, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
+            h("jump-button", { key: '76105e10b7432b7fcf0161e44f0e298296b18a6d', onClick: () => this.currentValue = this.currentValue + this.step, disabled: this.currentValue >= this.max, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '5431d4f069b27f418aca9856099e12a777954009', library: "lucide", name: "plus", size: "small" })))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -76,6 +89,7 @@ const JumpQuantity$1 = /*@__PURE__*/ proxyCustomElement(class JumpQuantity exten
         "variant": [1],
         "showButtons": [4, "show-buttons"],
         "value": [2],
+        "currentValue": [32],
         "getValue": [64],
         "reset": [64]
     }, undefined, {

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

	@@ -1 +1 @@
1	- {"file":"jump-quantity.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,g9BAAg9B,CAAC;AACz+B,2BAAe,eAAe;;MCOjBA,cAAY;;;;;;;mBAKD,CAAC;;oBAEA,CAAC;qBACA,EAAE;oBACuB,SAAS;uBACb,UAAU;2BACxB,IAAI~~;;;IAQnC~~,aAAa,CAAC,QAAQ,EAAE,QAAQ;QAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvC;;;;IAMD,MAAM,QAAQ;QACZ,OAAO,IAAI,CAAC,~~KAAK~~,CAAC;~~KACnB~~;IAGD,MAAM,KAAK;QACT,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;~~KACvB~~;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;KACpD;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACjC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;~~KACjC~~;;IAGD,UAAU,CAAC,KAAK;QACd,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;~~SACvB~~;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,qBAAmB,IAAI,CAAC,WAAW,IACnF,IAAI,CAAC,KAAK,IAAI,gEAAQ,IAAI,CAAC,KAAK,CAAS,EAC1C,4DAAK,KAAK,EAAE,6BAA6B,IACxC,IAAI,CAAC,WAAW;YACb,oEAAa,OAAO,EAAE,MAAM,IAAI,CAAC,~~KAAK~~,GAAG,IAAI,CAAC,~~KAAK~~,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,~~KAAK~~,IAAI,IAAI,CAAC,GAAG,~~EACpF~~,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,IAC1C,kEAAW,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAa,CACtD,EAChB,8DAAO,GAAG,EAAE,CAAC,EAAE;gBACb,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;aACnB,EACM,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,~~KAAK~~,~~EACjB~~,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,qBACE,IAAI,CAAC,WAAW,GACtC,EACD,IAAI,CAAC,WAAW;YACf,oEAAa,OAAO,EAAE,MAAM,IAAI,CAAC,~~KAAK~~,GAAG,IAAI,CAAC,~~KAAK~~,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,~~KAAK~~,IAAI,IAAI,CAAC,GAAG,~~EACpF~~,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,IAC1C,kEAAW,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,GAAa,CACrD,CACZ,CACD,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["JumpQuantity"],"sources":["src/components/jump-quantity/jump-quantity.scss?tag=jump-quantity&encapsulation=shadow","src/components/jump-quantity/jump-quantity.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n gap: 0.5rem;\n\n jump-button, button{\n --jump-button-padding: 0.5rem;\n }\n\n [data-variant='horizontal'] {\n flex-direction: row;\n }\n\n label {\n color: var(--neutral-grey-secondary);\n font-size: 0.875rem;\n }\n\n input {\n //remove user agent styles\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n margin: 0;\n\n //remove + and - buttons\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n outline: none;\n\n &:focus {\n border-color: var(--secondary-standard);\n }\n\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0.5rem;\n height: 14px;\n width: 36px;\n font-size: 0.875rem;\n text-align: center;\n\n &:not([aria-hasbuttons]) {\n border-color: var(--neutral-grey-secondary);\n }\n\n &[type='button'] {\n cursor: pointer;\n }\n }\n\n ::slotted(jump-button) {\n --jump-button-padding: 0;\n }\n\n\n .jump-quantity__InnerWrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n gap: 0;\n }\n}\n","import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' \| 'dropdown' \| 'input' = 'buttons';\n @Prop() variant: 'vertical' \| 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n @Prop() value: number;\n\n @Event({ eventName: 'jump-change' }) change;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n /*\n Get the current value\n */\n @Method()\n async getValue() {\n return this.~~value~~;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.internals.setFormValue(this.value.toString());\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n this.value = event.target.value;\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.~~value~~ = this.~~value~~ - this.step} disabled={this.~~value~~ <= this.min}\n variant='neutral' size='custom'>\n <jump-icon library=\"lucide\" name=\"minus\" size=\"small\"></jump-icon>\n </jump-button>}\n <input ref={(el) => {\n this.inputEl = el;\n }}\n type='number'\n value={this.~~value~~}\n onInput={(event) => this.handleChange(event)}\n min={this.min}\n max={this.max}\n step={this.step}\n aria-hasbuttons={this.showButtons}\n />\n {this.showButtons &&\n <jump-button onClick={() => this.~~value~~ = this.~~value~~ + this.step} disabled={this.~~value~~ >= this.max}\n variant='neutral' size='custom'>\n <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n </jump-button>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"jump-quantity.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,g9BAAg9B,CAAC;AACz+B,2BAAe,eAAe;;MCOjBA,cAAY;;;;;;;mBAKD,CAAC;;oBAEA,CAAC;qBACA,EAAE;oBACuB,SAAS;uBACb,UAAU;2BACxB,IAAI;;;;IAUnC,aAAa,CAAC,QAAQ,EAAE,QAAQ;QAC9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;YACf,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;KACvC;;;;IAMD,MAAM,QAAQ;QACZ,OAAO,IAAI,CAAC,YAAY,CAAC;KAC1B;IAGD,MAAM,KAAK;QACT,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;KAChC;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;KACpD;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACjC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzC,IAAG,KAAK,GAAG,IAAI,CAAC,GAAG,EAAC;YAClB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC;SAC9B;aAAM,IAAG,KAAK,GAAG,IAAI,CAAC,GAAG,EAAC;YACzB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC;SAC9B;aAAM;YACL,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;SACxC;KACF;;IAGD,UAAU,CAAC,KAAK;QACd,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;YACtB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC;SAC9B;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,qBAAmB,IAAI,CAAC,WAAW,IACnF,IAAI,CAAC,KAAK,IAAI,gEAAQ,IAAI,CAAC,KAAK,CAAS,EAC1C,4DAAK,KAAK,EAAE,6BAA6B,IACxC,IAAI,CAAC,WAAW;YACb,oEAAa,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,GAAG,EACzG,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,IAC1C,kEAAW,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAa,CACtD,EAChB,8DAAO,GAAG,EAAE,CAAC,EAAE;gBACb,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;aACnB,EACM,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAC5C,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,qBACE,IAAI,CAAC,WAAW,GACtC,EACD,IAAI,CAAC,WAAW;YACf,oEAAa,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,GAAG,EACzG,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,IAC1C,kEAAW,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,GAAa,CACrD,CACZ,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["JumpQuantity"],"sources":["src/components/jump-quantity/jump-quantity.scss?tag=jump-quantity&encapsulation=shadow","src/components/jump-quantity/jump-quantity.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: flex-start;\n justify-content: center;\n flex-direction: column;\n gap: 0.5rem;\n\n jump-button, button{\n --jump-button-padding: 0.5rem;\n }\n\n [data-variant='horizontal'] {\n flex-direction: row;\n }\n\n label {\n color: var(--neutral-grey-secondary);\n font-size: 0.875rem;\n }\n\n input {\n //remove user agent styles\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background: none;\n margin: 0;\n\n //remove + and - buttons\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n outline: none;\n\n &:focus {\n border-color: var(--secondary-standard);\n }\n\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0.5rem;\n height: 14px;\n width: 36px;\n font-size: 0.875rem;\n text-align: center;\n\n &:not([aria-hasbuttons]) {\n border-color: var(--neutral-grey-secondary);\n }\n\n &[type='button'] {\n cursor: pointer;\n }\n }\n\n ::slotted(jump-button) {\n --jump-button-padding: 0;\n }\n\n\n .jump-quantity__InnerWrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n justify-content: center;\n gap: 0;\n }\n}\n","import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element, State } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' \| 'dropdown' \| 'input' = 'buttons';\n @Prop() variant: 'vertical' \| 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n @Prop() value: number;\n\n @State() currentValue: number;\n\n @Event({ eventName: 'jump-change' }) change;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internals.setFormValue(newValue);\n }\n\n /*\n Get the current value\n */\n @Method()\n async getValue() {\n return this.currentValue;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n this.currentValue = this.value;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.currentValue = this.value;\n this.internals.setFormValue(this.value.toString());\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n let value = parseInt(event.target.value);\n if(value < this.min){\n this.currentValue = this.min;\n } else if(value > this.max){\n this.currentValue = this.max;\n } else {\n this.currentValue = event.target.value;\n }\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n this.currentValue = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.currentValue = this.currentValue - this.step} disabled={this.currentValue <= this.min}\n variant='neutral' size='custom'>\n <jump-icon library=\"lucide\" name=\"minus\" size=\"small\"></jump-icon>\n </jump-button>}\n <input ref={(el) => {\n this.inputEl = el;\n }}\n type='number'\n value={this.currentValue}\n onInput={(event) => this.handleChange(event)}\n min={this.min}\n max={this.max}\n step={this.step}\n aria-hasbuttons={this.showButtons}\n />\n {this.showButtons &&\n <jump-button onClick={() => this.currentValue = this.currentValue + this.step} disabled={this.currentValue >= this.max}\n variant='neutral' size='custom'>\n <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n </jump-button>}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './jump-icon2.js';
-const jumpTabItemCss = ":host{display:block;--jump-tabitem-active-color:var(--secondary-standard);--jump-tabitem-color:var(--neutral-grey-secondary);--jump-tabitem-hover-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-boxed-bg-color:var(--secondary-soft, #EDF2FA);--jump-tabitem-rounded-bg-color:white;font-family:var(--ff-primary)}:host .Content{display:flex;}:host .Content label{font-size:16px}:host .Content.left{flex-direction:row;gap:6px;align-items:center}:host .Content.top{flex-direction:column;gap:2px;align-items:center}:host .Content.inline{color:var(--jump-tabitem-color);padding:12px 24px}:host .Content.inline.active{color:var(--jump-tabitem-active-color)}:host .Content.inline.active span{font-weight:bold}:host .Content.boxed{color:var(--jump-tabitem-color);padding:15px 39px;background-color:transparent;border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed:hover:not(.disabled),:host .Content.boxed:hover:not(.active){background-color:transparent}:host .Content.boxed:hover:not(.disabled) span,:host .Content.boxed:hover:not(.active) span{font-weight:bold}:host .Content.boxed.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-boxed-bg-color);border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed.active span{font-weight:bold}:host .Content.rounded{padding:12px 32px;color:var(--jump-tabitem-color)}:host .Content.rounded:hover:not(.disabled){cursor:pointer}:host .Content.rounded:hover:not(.disabled) span{font-weight:bold}:host .Content.rounded.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border:1px solid var(--jump-tabitem-active-color);border-radius:50px}:host .Content.sheet{padding:12px 32px;color:var(--neutral-grey-secondary)}:host .Content.sheet:hover:not(.disabled){cursor:pointer}:host .Content.sheet:hover:not(.disabled) span{font-weight:bold}:host .Content.sheet.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border-radius:8px 8px 0px 0px}:host .Content.disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}:host(.inline){border-bottom:1px solid var(--jump-tabitem-hover-color)}:host(.inline):hover:not(.disabled):not(.active){border-bottom:3px solid var(--jump-tabitem-hover-color);cursor:pointer}:host(.inline.active){border-bottom:3px solid var(--jump-tabitem-active-color)}";
+const jumpTabItemCss = ":host{display:block;--jump-tabitem-active-color:var(--secondary-standard);--jump-tabitem-color:var(--neutral-grey-secondary);--jump-tabitem-hover-color:var(--neutral-grey-disabled, #CBCBCB);--jump-tabitem-boxed-bg-color:var(--secondary-soft, #EDF2FA);--jump-tabitem-rounded-bg-color:white;font-family:var(--ff-primary)}:host .Content{display:flex;}:host .Content:hover:not(.disabled){cursor:pointer}:host .Content label{font-size:16px}:host .Content.left{flex-direction:row;gap:6px;align-items:center}:host .Content.top{flex-direction:column;gap:2px;align-items:center}:host .Content.inline{color:var(--jump-tabitem-color);padding:12px 24px}:host .Content.inline.active{color:var(--jump-tabitem-active-color)}:host .Content.inline.active span{font-weight:bold}:host .Content.boxed{color:var(--jump-tabitem-color);padding:15px 39px;background-color:transparent;border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed:hover:not(.disabled),:host .Content.boxed:hover:not(.active){background-color:transparent}:host .Content.boxed:hover:not(.disabled) span,:host .Content.boxed:hover:not(.active) span{font-weight:bold}:host .Content.boxed.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-boxed-bg-color);border:1px solid var(--jump-tabitem-boxed-bg-color)}:host .Content.boxed.active span{font-weight:bold}:host .Content.rounded{padding:12px 32px;color:var(--jump-tabitem-color)}:host .Content.rounded:hover:not(.disabled){cursor:pointer}:host .Content.rounded:hover:not(.disabled) span{font-weight:bold}:host .Content.rounded.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border:1px solid var(--jump-tabitem-active-color);border-radius:50px}:host .Content.sheet{padding:12px 32px;color:var(--neutral-grey-secondary)}:host .Content.sheet:hover:not(.disabled){cursor:pointer}:host .Content.sheet:hover:not(.disabled) span{font-weight:bold}:host .Content.sheet.active{color:var(--jump-tabitem-active-color);background-color:var(--jump-tabitem-rounded-bg-color);border-radius:8px 8px 0px 0px}:host(.disabled){cursor:not-allowed;opacity:0.5;pointer-events:none}:host(.inline){border-bottom:1px solid var(--jump-tabitem-hover-color)}:host(.inline):hover:not(.disabled):not(.active){border-bottom:3px solid var(--jump-tabitem-hover-color);cursor:pointer}:host(.inline.active){border-bottom:3px solid var(--jump-tabitem-active-color)}";
 const JumpTabItemStyle0 = jumpTabItemCss;
 const JumpTabItem$1 = /*@__PURE__*/ proxyCustomElement(class JumpTabItem extends HTMLElement {
@@ -22,14 +22,13 @@ const JumpTabItem$1 = /*@__PURE__*/ proxyCustomElement(class JumpTabItem extends
         this.changeActiveTab.emit({ id: identifier });
     }
     componentDidLoad() {
-        console.log('Component has been rendered');
         // Deve leggere la prop "variant" del componente babbo jump-tab e popolare la propria prop "variant"
         let parentVariant = this.tabEl.parentElement.getAttribute('variant');
         this.variant = parentVariant;
     }
     render() {
-        return (h(Host, { key: '9d817c4dc39e4091ddf11bbe3586dd299db2c9a1', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) }, h("div", { key: '59bdb3b691141796dd912611742bc79c0d10a4ca', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
-            h("jump-icon", { key: '3cd011409f305046cf76d79256be72662f7d6c9a', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: '522ca0332d2302021ded4941ca67d790b308f3ac', class: "label" }, this.label))));
+        return (h(Host, { key: '4dc150c666d0387bb0fe8215837a45050deee930', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) + " " + (this.disabled ? 'disabled' : '') }, h("div", { key: 'ef7ea196d84f892abad92c7c28cde1fcbc3b9573', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
+            h("jump-icon", { key: '9c4b48264448f202cb514e63b236aa5dbe44dd11', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: '62429460a5e9204775f54be22a713453c276eb0a', class: "label" }, this.label))));
     }
     static get style() { return JumpTabItemStyle0; }
 }, [1, "jump-tab-item", {