@jumpgroup/jump-design-system 0.3.0 → 0.3.1

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

@@ -4,7 +4,7 @@ export class JumpQuantity {
         this.min = 1;
         this.max = undefined;
         this.step = 1;
-        this.label = 'Quantità';
+        this.label = '';
         this.type = 'buttons';
         this.variant = 'vertical';
         this.showButtons = true;
@@ -17,6 +17,12 @@ export class JumpQuantity {
         });
         this.internals.setFormValue(newValue);
     }
+    /**
+     * Get the current value
+     */
+    async getValue() {
+        return this.value;
+    }
     componentWillLoad() {
         this.value = this.min;
         this.internals.setFormValue(this.value);
@@ -26,7 +32,6 @@ export class JumpQuantity {
         this.internals.setFormValue('');
     }
     handleChange(event) {
-        // console.log(event.target.value);
         this.value = event.target.value;
     }
     //avoid user can change the value below the min
@@ -36,11 +41,11 @@ export class JumpQuantity {
         }
     }
     render() {
-        return (h(Host, { key: '3c14e68a630e8f8ce14b61b119a141b26d1250d1', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: 'd3012ea3d7d21ec7433ec223f9b55d9547337f57' }, this.label), h("div", { key: '6d637b7fe69f1712f48587003ac491a7d63b54dc', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
-            h("jump-button", { key: 'a9a3d9368fb78dc4c060190d0069466611963995', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small' }, "-"), h("input", { key: '9e728cdf29440f52d706e9e62961d0e2918cd3d8', ref: (el) => {
+        return (h(Host, { key: 'd35f6f474d41feae59c386e57c1dcc5f073e57f1', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '499373a638e6da996851852c2672a1462eb6fba1' }, this.label), h("div", { key: '2e8bb37e5961d00f38e7ff40520460d19b8945f9', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
+            h("jump-button", { key: 'f3f19ad26a807961fe63239f17354f6ff1d48809', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'small' }, h("jump-icon", { key: '3f86257fd93ae2c07261ef6f5bb62d239dbc7782', library: "lucide", name: "minus", size: "small" })), h("input", { key: '3277bb1382d298e4fdcd064f5c71d61c5bb75bb2', 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: 'cad00efcd74d365d4e9ffb17c6d366b830f2522b', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small', "only-icon": this.value >= this.max }, !this.max || this.value < this.max ? '+' : ''))));
+            h("jump-button", { key: '1a5847f2760dae8ecdf000de143af06fd1c8c3ce', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'small' }, h("jump-icon", { key: '25c05e4597739dd4e8df00cdda0d593ba1d55e1f', library: "lucide", name: "plus", size: "small" })))));
     }
     static get is() { return "jump-quantity"; }
     static get encapsulation() { return "shadow"; }
@@ -126,7 +131,7 @@ export class JumpQuantity {
                 },
                 "attribute": "label",
                 "reflect": false,
-                "defaultValue": "'Quantit\u00E0'"
+                "defaultValue": "''"
             },
             "type": {
                 "type": "string",
@@ -207,6 +212,27 @@ export class JumpQuantity {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "Get the current value",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

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

@@ -1 +1 @@
-{"version":3,"file":"jump-quantity.js","sourceRoot":"","sources":["../../../src/components/jump-quantity/jump-quantity.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, State, AttachInternals, Watch, 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 = 'Quantità';\n  @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n  @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n  @Prop() showButtons: boolean = true;\n\n  @Event({ eventName: 'jump-change' }) change;\n\n  @State() value;\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  componentWillLoad() {\n    this.value = this.min;\n    this.internals.setFormValue(this.value);\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.internals.setFormValue('');\n  }\n\n  handleChange(event) {\n    // console.log(event.target.value);\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='small'\n            >\n              -\n              {/*{this.value > this.min ? '-' : ''}*/}\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='small'\n                         only-icon={this.value >= this.max}\n            >{!this.max || this.value < this.max ? '+' : ''}</jump-button>}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"jump-quantity.js","sourceRoot":"","sources":["../../../src/components/jump-quantity/jump-quantity.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, State, 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\n  @Event({ eventName: 'jump-change' }) change;\n\n  @State() value;\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  componentWillLoad() {\n    this.value = this.min;\n    this.internals.setFormValue(this.value);\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='small'>\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='small'>\n              <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n            </jump-button>}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,15 +1,12 @@
 :host {
   display: block;
-}
-
-.JumpTab {
   --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);
 }
-.JumpTab__Wrapper {
+:host .Wrapper {
   display: flex;
   width: fit-content;
 }
-.JumpTab__Wrapper.rounded {
+:host .Wrapper.rounded {
   border-radius: 50px;
   background-color: #f8f8f8;
 }

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

@@ -72,7 +72,7 @@ export class JumpTab {
         }
     }
     render() {
-        return (h(Host, { key: '5adce348b75c58349a4ff443cf2f6b39b646722f', class: "JumpTab", id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'dcfe4b594261f40f91bff6fba243fcc2c9d19368', class: "JumpTab__Wrapper " + this.variant }, h("slot", { key: 'ce9cf25e3d5566a2e52469aafeeac6392862c348', name: "tab-item" })), h("div", { key: 'a396fbb89c2299c2cee8b9bd1828ad70faf3caee' }, h("slot", { key: '34f95fe28043b74be2cdba5e0253e50c9326bf01', name: "tab-content" }))));
+        return (h(Host, { key: '325ebf63677d7b1307ebb5be3d521d06efa22a5a', class: "JumpTab", id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'afa4eb17c8582aa59f8f3b55237de34fa04871d5', class: "Wrapper " + this.variant }, h("slot", { key: '69023d9ae6ae85ef8270d7c8ea4c881c60889f63', name: "tab-item" })), h("div", { key: '28257b0f8de4c3ef1b7dd7adb58dc2d0ce342164' }, h("slot", { key: '3097cf4876730499e2067aed722ff822582e173f', name: "tab-content" }))));
     }
     static get is() { return "jump-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +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() 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\n\n\n  render() {\n    return (\n      <Host class=\"JumpTab\" id={this.tabGroupName} ref={(el) => {this.JumpTabEl = el;}}> \n        <div class={\"JumpTab__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}"]}
+{"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() 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}"]}

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

@@ -19,9 +19,9 @@ export default {
 const Template = (args) => {
     const attributes = generateAttributesFromArgs(args);
     return formatHtml(`<jump-tab ${attributes}>
-            <jump-tab-item identifier="tab1" variant=${args.variant} active label="Tab 1" icon-name="settings" slot="tab-item"></jump-tab-item>
-            <jump-tab-item identifier="tab2" variant=${args.variant}  label="Tab 2" icon-name="settings" slot="tab-item"></jump-tab-item>
-            <jump-tab-item identifier="tab3" variant=${args.variant} label="Tab 3" icon-name="settings" slot="tab-item"></jump-tab-item>
+            <jump-tab-item identifier="tab1" variant=${args.variant} active label="Tab 1" icon-name="gear" slot="tab-item"></jump-tab-item>
+            <jump-tab-item identifier="tab2" variant=${args.variant}  label="Tab 2" icon-name="gear" slot="tab-item"></jump-tab-item>
+            <jump-tab-item identifier="tab3" variant=${args.variant} label="Tab 3" icon-name="gear" slot="tab-item"></jump-tab-item>
     </jump-tab>`);
 };
 export const TabInline = Template.bind({});
@@ -42,9 +42,9 @@ TabRounded.args = {
 const TemplateDisabled = (args) => {
     const attributes = generateAttributesFromArgs(args);
     return formatHtml(`<jump-tab ${attributes}>
-        <jump-tab-item identifier="tab1" active label="Tab 1" icon-name="settings" slot="tab-item"></jump-tab-item>
-        <jump-tab-item identifier="tab2" label="Tab 2" icon-name="settings" slot="tab-item"></jump-tab-item>
-        <jump-tab-item identifier="tab3" disabled label="Tab 3" icon-name="settings" slot="tab-item"></jump-tab-item>
+        <jump-tab-item identifier="tab1" active label="Tab 1" icon-name="gear" slot="tab-item"></jump-tab-item>
+        <jump-tab-item identifier="tab2" label="Tab 2" icon-name="gear" slot="tab-item"></jump-tab-item>
+        <jump-tab-item identifier="tab3" disabled label="Tab 3" icon-name="gear" slot="tab-item"></jump-tab-item>
     </jump-tab>`);
 };
 export const OneTabDisabled = TemplateDisabled.bind({});
@@ -56,10 +56,10 @@ const TemplateWithListenerExample = (args, data) => {
     let id = data.id;
     const attributes = generateAttributesFromArgs(args);
     return formatHtml(`<div style="background-color: #EEEEEE; padding: 2rem;"><jump-tab ${attributes}>
-        <jump-tab-item identifier="tab1" active label="Tab 1" icon-name="settings" slot="tab-item"></jump-tab-item>
-        <jump-tab-item identifier="tab2" label="Tab 2" icon-name="settings" slot="tab-item"></jump-tab-item>
-        <jump-tab-item identifier="tab3" label="Tab 3" icon-name="settings" slot="tab-item"></jump-tab-item>
-        <jump-tab-item identifier="tab4" label="Tab 4" icon-name="settings" slot="tab-item"></jump-tab-item>
+        <jump-tab-item identifier="tab1" active label="Tab 1" icon-name="gear" slot="tab-item"></jump-tab-item>
+        <jump-tab-item identifier="tab2" label="Tab 2" icon-name="gear" slot="tab-item"></jump-tab-item>
+        <jump-tab-item identifier="tab3" label="Tab 3" icon-name="gear" slot="tab-item"></jump-tab-item>
+        <jump-tab-item identifier="tab4" label="Tab 4" icon-name="gear" slot="tab-item"></jump-tab-item>
         </jump-tab>
         <div>La tab attiva ha l'id: <span id="active-tab">loading..<span></div>
         </div>
@@ -102,9 +102,9 @@ const TemplateWithPanel = (args, data) => {
     let id = data.id;
     const attributes = generateAttributesFromArgs(args);
     return formatHtml(`<jump-tab ${attributes}>
-            <jump-tab-item identifier="tab1" active label="Tab 1" icon-name="settings" slot="tab-item"></jump-tab-item>
-            <jump-tab-item identifier="tab2" label="Tab 2" icon-name="settings" slot="tab-item"></jump-tab-item>
-            <jump-tab-item identifier="tab3" label="Tab 3" icon-name="settings" slot="tab-item"></jump-tab-item>
+            <jump-tab-item identifier="tab1" active label="Tab 1" icon-name="gear" slot="tab-item"></jump-tab-item>
+            <jump-tab-item identifier="tab2" label="Tab 2" icon-name="gear" slot="tab-item"></jump-tab-item>
+            <jump-tab-item identifier="tab3" label="Tab 3" icon-name="gear" slot="tab-item"></jump-tab-item>
             <jump-tab-panel identifier="tab1" active slot="tab-content">Tab 1 content</jump-tab-panel>
             <jump-tab-panel identifier="tab2" slot="tab-content">Tab 2 content</jump-tab-panel>
             <jump-tab-panel identifier="tab3" slot="tab-content">Tab 3 content</jump-tab-panel>

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

@@ -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=\"settings\" slot=\"tab-item\"></jump-tab-item>\n            <jump-tab-item identifier=\"tab2\" variant=${args.variant}  label=\"Tab 2\" icon-name=\"settings\" slot=\"tab-item\"></jump-tab-item>\n            <jump-tab-item identifier=\"tab3\" variant=${args.variant} label=\"Tab 3\" icon-name=\"settings\" 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=\"settings\" slot=\"tab-item\"></jump-tab-item>\n        <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"settings\" slot=\"tab-item\"></jump-tab-item>\n        <jump-tab-item identifier=\"tab3\" disabled label=\"Tab 3\" icon-name=\"settings\" 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=\"settings\" slot=\"tab-item\"></jump-tab-item>\n        <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"settings\" slot=\"tab-item\"></jump-tab-item>\n        <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"settings\" slot=\"tab-item\"></jump-tab-item>\n        <jump-tab-item identifier=\"tab4\" label=\"Tab 4\" icon-name=\"settings\" 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=\"settings\" slot=\"tab-item\"></jump-tab-item>\n            <jump-tab-item identifier=\"tab2\" label=\"Tab 2\" icon-name=\"settings\" slot=\"tab-item\"></jump-tab-item>\n            <jump-tab-item identifier=\"tab3\" label=\"Tab 3\" icon-name=\"settings\" 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};"]}
+{"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    }\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};"]}

package/dist/collection/components/jump-tab-item/jump-tab-item-boxed.stories.js

@@ -1,5 +1,4 @@
 import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
-import feather from "feather-icons";
 export default {
     title: 'Components/Tab/Item/Boxed',
     tags: ['autodocs'],
@@ -16,9 +15,8 @@ export default {
         },
         iconName: {
             name: 'icon-name',
-            control: 'select',
-            options: Object.keys(feather.icons),
-            description: 'Nome dell\'icona'
+            control: 'text',
+            description: "Seleziona il nome dal seguente <a href='https://fontawesome.com/search' target='_blank'>link</a>"
         },
         iconPosition: {
             name: 'icon-position',
@@ -47,7 +45,7 @@ const Template = (args) => {
 export const TabBoxedItem = Template.bind({});
 TabBoxedItem.args = {
     label: 'Tab1',
-    iconName: 'settings',
+    iconName: 'gear',
     iconPosition: 'left',
     active: true,
     identifier: 'tab1',

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

@@ -1 +1 @@
-{"version":3,"file":"jump-tab-item-boxed.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab-item/jump-tab-item-boxed.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAC1E,OAAO,OAAO,MAAM,eAAe,CAAC;AAEpC,eAAe;IACX,KAAK,EAAE,2BAA2B;IAClC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACL,UAAU,EAAE;YACT,IAAI,EAAE,YAAY;YAClB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0BAA0B;SAC1C;QACD,KAAK,EAAE;YACH,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SACjC;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;YACnC,WAAW,EAAE,kBAAkB;SAClC;QACD,YAAY,EAAE;YACV,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;YACxB,WAAW,EAAE,uBAAuB;SACvC;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,YAAY;SAC5B;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kBAAkB;SAClC;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACtB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;qCACe,UAAU;gBAC/B,CAAC,CAAC;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IACpB,YAAY,EAAE,MAAM;IACpB,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\nimport feather from 'feather-icons';\n\nexport default {\n    title: 'Components/Tab/Item/Boxed',\n    tags: ['autodocs'],\n    argTypes: {\n         identifier: {\n            name: 'identifier',\n            control: 'text',\n            description: 'Identificatore della tab',\n        },\n        label: {\n            name: 'label',\n            control: 'text',\n            description: 'Label della tab',\n        },\n        iconName: { \n            name: 'icon-name',\n            control: 'select',\n            options: Object.keys(feather.icons),\n            description: 'Nome dell\\'icona'\n        },\n        iconPosition: {\n            name: 'icon-position',\n            control: 'select',\n            options: ['left', 'top'],\n            description: 'Posizione dell\\'icona'\n        },\n        active: {\n            name: 'active',\n            control: 'boolean',\n            description: 'Tab attiva'\n        },\n        disabled: {\n            name: 'disabled',\n            control: 'boolean',\n            description: 'Tab disabilitata'\n        }\n    }\n}\n\nconst Template = (args) => {\n    const attributes = generateAttributesFromArgs(args);\n    return formatHtml(`<jump-tab variant=\"boxed\" tab-group-name=\"tabBoxed\">\n    <jump-tab-item slot=\"tab-item\" ${attributes}></jump-tab-item>\n    </jump-tab>`);\n}\n\nexport const TabBoxedItem = Template.bind({});\nTabBoxedItem.args = {\n    label: 'Tab1',\n    iconName: 'settings',\n    iconPosition: 'left',\n    active: true,\n    identifier: 'tab1',\n    disabled: false\n};"]}
+{"version":3,"file":"jump-tab-item-boxed.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab-item/jump-tab-item-boxed.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACX,KAAK,EAAE,2BAA2B;IAClC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,IAAI,EAAE,YAAY;YAClB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0BAA0B;SAC1C;QACD,KAAK,EAAE;YACH,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SACjC;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kGAAkG;SAClH;QACD,YAAY,EAAE;YACV,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;YACxB,WAAW,EAAE,uBAAuB;SACvC;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,YAAY;SAC5B;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kBAAkB;SAClC;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACtB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;qCACe,UAAU;gBAC/B,CAAC,CAAC;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,MAAM;IACpB,MAAM,EAAE,IAAI;IACZ,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n    title: 'Components/Tab/Item/Boxed',\n    tags: ['autodocs'],\n    argTypes: {\n        identifier: {\n            name: 'identifier',\n            control: 'text',\n            description: 'Identificatore della tab',\n        },\n        label: {\n            name: 'label',\n            control: 'text',\n            description: 'Label della tab',\n        },\n        iconName: { \n            name: 'icon-name',\n            control: 'text',\n            description: \"Seleziona il nome dal seguente <a href='https://fontawesome.com/search' target='_blank'>link</a>\"\n        },\n        iconPosition: {\n            name: 'icon-position',\n            control: 'select',\n            options: ['left', 'top'],\n            description: 'Posizione dell\\'icona'\n        },\n        active: {\n            name: 'active',\n            control: 'boolean',\n            description: 'Tab attiva'\n        },\n        disabled: {\n            name: 'disabled',\n            control: 'boolean',\n            description: 'Tab disabilitata'\n        }\n    }\n}\n\nconst Template = (args) => {\n    const attributes = generateAttributesFromArgs(args);\n    return formatHtml(`<jump-tab variant=\"boxed\" tab-group-name=\"tabBoxed\">\n    <jump-tab-item slot=\"tab-item\" ${attributes}></jump-tab-item>\n    </jump-tab>`);\n}\n\nexport const TabBoxedItem = Template.bind({});\nTabBoxedItem.args = {\n    label: 'Tab1',\n    iconName: 'gear',\n    iconPosition: 'left',\n    active: true,\n    identifier: 'tab1',\n    disabled: false\n};"]}

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

@@ -1,5 +1,4 @@
 import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
-import feather from "feather-icons";
 export default {
     title: 'Components/Tab/Item/Inline',
     tags: ['autodocs'],
@@ -16,9 +15,8 @@ export default {
         },
         iconName: {
             name: 'icon-name',
-            control: 'select',
-            options: Object.keys(feather.icons),
-            description: 'Nome dell\'icona'
+            control: 'text',
+            description: "Seleziona il nome dal seguente <a href='https://fontawesome.com/search' target='_blank'>link</a>"
         },
         iconPosition: {
             name: 'icon-position',
@@ -47,7 +45,7 @@ const Template = (args) => {
 export const TabItem = Template.bind({});
 TabItem.args = {
     label: 'Tab1',
-    iconName: 'settings',
+    iconName: 'gear',
     iconPosition: 'left',
     active: true,
     variant: 'inline',

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

@@ -1 +1 @@
-{"version":3,"file":"jump-tab-item-inline.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab-item/jump-tab-item-inline.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAC1E,OAAO,OAAO,MAAM,eAAe,CAAC;AAEpC,eAAe;IACX,KAAK,EAAE,4BAA4B;IACnC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,IAAI,EAAE,YAAY;YAClB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0BAA0B;SAC1C;QACD,KAAK,EAAE;YACH,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SACjC;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;YACnC,WAAW,EAAE,kBAAkB;SAClC;QACD,YAAY,EAAE;YACV,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;YACxB,WAAW,EAAE,uBAAuB;SACvC;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,YAAY;SAC5B;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kBAAkB;SAClC;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACtB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;qCACe,UAAU;gBAC/B,CAAC,CAAC;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,UAAU;IACpB,YAAY,EAAE,MAAM;IACpB,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\nimport feather from 'feather-icons';\n\nexport default {\n    title: 'Components/Tab/Item/Inline',\n    tags: ['autodocs'],\n    argTypes: {\n        identifier: {\n            name: 'identifier',\n            control: 'text',\n            description: 'Identificatore della tab',\n        },\n        label: {\n            name: 'label',\n            control: 'text',\n            description: 'Label della tab',\n        },\n        iconName: { \n            name: 'icon-name',\n            control: 'select',\n            options: Object.keys(feather.icons),\n            description: 'Nome dell\\'icona'\n        },\n        iconPosition: {\n            name: 'icon-position',\n            control: 'select',\n            options: ['left', 'top'],\n            description: 'Posizione dell\\'icona'\n        },\n        active: {\n            name: 'active',\n            control: 'boolean',\n            description: 'Tab attiva'\n        },\n        disabled: {\n            name: 'disabled',\n            control: 'boolean',\n            description: 'Tab disabilitata'\n        }\n    }\n}\n\nconst Template = (args) => {\n    const attributes = generateAttributesFromArgs(args);\n    return formatHtml(`<jump-tab variant=\"inline\" tab-group-name=\"tabInline\">\n    <jump-tab-item slot=\"tab-item\" ${attributes}></jump-tab-item>\n    </jump-tab>`);\n}\n\nexport const TabItem = Template.bind({});\nTabItem.args = {\n    label: 'Tab1',\n    iconName: 'settings',\n    iconPosition: 'left',\n    active: true,\n    variant: 'inline',\n    disabled: false\n};"]}
+{"version":3,"file":"jump-tab-item-inline.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab-item/jump-tab-item-inline.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACX,KAAK,EAAE,4BAA4B;IACnC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,IAAI,EAAE,YAAY;YAClB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0BAA0B;SAC1C;QACD,KAAK,EAAE;YACH,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;SACjC;QACF,QAAQ,EAAE;YACL,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kGAAkG;SAClH;QACD,YAAY,EAAE;YACV,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;YACxB,WAAW,EAAE,uBAAuB;SACvC;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,YAAY;SAC5B;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kBAAkB;SAClC;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACtB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;qCACe,UAAU;gBAC/B,CAAC,CAAC;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,MAAM;IACb,QAAQ,EAAE,MAAM;IAChB,YAAY,EAAE,MAAM;IACpB,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n    title: 'Components/Tab/Item/Inline',\n    tags: ['autodocs'],\n    argTypes: {\n        identifier: {\n            name: 'identifier',\n            control: 'text',\n            description: 'Identificatore della tab',\n        },\n        label: {\n            name: 'label',\n            control: 'text',\n            description: 'Label della tab',\n        },\n       iconName: { \n            name: 'icon-name',\n            control: 'text',\n            description: \"Seleziona il nome dal seguente <a href='https://fontawesome.com/search' target='_blank'>link</a>\"\n        },\n        iconPosition: {\n            name: 'icon-position',\n            control: 'select',\n            options: ['left', 'top'],\n            description: 'Posizione dell\\'icona'\n        },\n        active: {\n            name: 'active',\n            control: 'boolean',\n            description: 'Tab attiva'\n        },\n        disabled: {\n            name: 'disabled',\n            control: 'boolean',\n            description: 'Tab disabilitata'\n        }\n    }\n}\n\nconst Template = (args) => {\n    const attributes = generateAttributesFromArgs(args);\n    return formatHtml(`<jump-tab variant=\"inline\" tab-group-name=\"tabInline\">\n    <jump-tab-item slot=\"tab-item\" ${attributes}></jump-tab-item>\n    </jump-tab>`);\n}\n\nexport const TabItem = Template.bind({});\nTabItem.args = {\n    label: 'Tab1',\n    iconName: 'gear',\n    iconPosition: 'left',\n    active: true,\n    variant: 'inline',\n    disabled: false\n};"]}

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

@@ -1,8 +1,5 @@
 :host {
   display: block;
-}
-
-.JumpTabItem {
   --jump-tabitem-active-color: var(--secondary-standard);
   --jump-tabitem-color: var(--neutral-grey-secondary);
   --jump-tabitem-hover-color: var(--neutral-grey-disabled, #CBCBCB);
@@ -10,17 +7,7 @@
   --jump-tabitem-rounded-bg-color: white;
   font-family: var(--ff-primary);
 }
-.JumpTabItem.inline {
-  border-bottom: 1px solid var(--jump-tabitem-hover-color);
-}
-.JumpTabItem.inline:hover:not(.disabled):not(.active) {
-  border-bottom: 3px solid var(--jump-tabitem-hover-color);
-  cursor: pointer;
-}
-.JumpTabItem.inline.active {
-  border-bottom: 3px solid var(--jump-tabitem-active-color);
-}
-.JumpTabItem__Content {
+:host .Content {
   display: flex;
   /*Tipologia inline */
   /* Tipologia boxed */
@@ -28,82 +15,95 @@
   /** Tipologia sheet */
   /* Disabilitato */
 }
-.JumpTabItem__Content label {
+:host .Content label {
   font-size: 16px;
 }
-.JumpTabItem__Content.left {
+:host .Content.left {
   flex-direction: row;
   gap: 6px;
   align-items: center;
 }
-.JumpTabItem__Content.top {
+:host .Content.top {
   flex-direction: column;
   gap: 2px;
   align-items: center;
 }
-.JumpTabItem__Content.inline {
+:host .Content.inline {
   color: var(--jump-tabitem-color);
   padding: 12px 24px;
 }
-.JumpTabItem__Content.inline.active {
+:host .Content.inline.active {
   color: var(--jump-tabitem-active-color);
 }
-.JumpTabItem__Content.inline.active span {
+:host .Content.inline.active span {
   font-weight: bold;
 }
-.JumpTabItem__Content.boxed {
+:host .Content.boxed {
   color: var(--jump-tabitem-color);
   padding: 15px 39px;
   background-color: transparent;
   border: 1px solid var(--jump-tabitem-boxed-bg-color);
 }
-.JumpTabItem__Content.boxed:hover:not(.disabled), .JumpTabItem__Content.boxed:hover:not(.active) {
+:host .Content.boxed:hover:not(.disabled), :host .Content.boxed:hover:not(.active) {
   background-color: transparent;
 }
-.JumpTabItem__Content.boxed:hover:not(.disabled) span, .JumpTabItem__Content.boxed:hover:not(.active) span {
+:host .Content.boxed:hover:not(.disabled) span, :host .Content.boxed:hover:not(.active) span {
   font-weight: bold;
 }
-.JumpTabItem__Content.boxed.active {
+: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);
 }
-.JumpTabItem__Content.boxed.active span {
+:host .Content.boxed.active span {
   font-weight: bold;
 }
-.JumpTabItem__Content.rounded {
+:host .Content.rounded {
   padding: 12px 32px;
   color: var(--jump-tabitem-color);
 }
-.JumpTabItem__Content.rounded:hover:not(.disabled) {
+:host .Content.rounded:hover:not(.disabled) {
   cursor: pointer;
 }
-.JumpTabItem__Content.rounded:hover:not(.disabled) span {
+:host .Content.rounded:hover:not(.disabled) span {
   font-weight: bold;
 }
-.JumpTabItem__Content.rounded.active {
+: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;
 }
-.JumpTabItem__Content.sheet {
+:host .Content.sheet {
   padding: 12px 32px;
   color: var(--neutral-grey-secondary);
 }
-.JumpTabItem__Content.sheet:hover:not(.disabled) {
+:host .Content.sheet:hover:not(.disabled) {
   cursor: pointer;
 }
-.JumpTabItem__Content.sheet:hover:not(.disabled) span {
+:host .Content.sheet:hover:not(.disabled) span {
   font-weight: bold;
 }
-.JumpTabItem__Content.sheet.active {
+:host .Content.sheet.active {
   color: var(--jump-tabitem-active-color);
   background-color: var(--jump-tabitem-rounded-bg-color);
   border-radius: 8px 8px 0px 0px;
 }
-.JumpTabItem__Content.disabled {
+: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);
 }

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

@@ -19,10 +19,11 @@ export class JumpTabItem {
         this.variant = parentVariant;
     }
     render() {
-        return (h(Host, { key: '82864ca72b0febf6a25431ad2788b11e80744d57', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) }, h("div", { key: '9275613b491731afc823f0c63be2ae797b372fa6', class: "JumpTabItem__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: 'fcd4ab436a0695fdf3ca07f2ca9d1a6343c79d56', class: "small", name: this.iconName }), h("span", { key: '1d518eb336443596c090beafe74b5186f0a1ff37', class: "label" }, this.label))));
+        return (h(Host, { key: '99a63732d7cc75ed92a2b7fb9469a2bf18d75235', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) }, h("div", { key: 'ee7170cae00c17615e5e528bf103aebd9d97b45f', 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: 'd198fc5756bd145454d7298969905e8bcf306b20', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: 'bc008babf73fef929062f127a8eb976405046434', class: "label" }, this.label))));
     }
     static get is() { return "jump-tab-item"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["jump-tab-item.scss"]

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

@@ -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,uBAAuB,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;gBACvP,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC;oBACvE,kEAAW,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAc;gBAE5D,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: false,\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={\"JumpTabItem__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 class=\"small\" name={this.iconName}></jump-icon>\n          }\n          <span class=\"label\">{this.label}</span>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}
+{"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"]}

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

@@ -5,7 +5,7 @@ export class JumpTabPanel {
         this.active = false;
     }
     render() {
-        return (h(Host, { key: '5a2a846c7470d079a668b9951d9463a312be4341', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '0b04369ba6c7ed54566383516b8e736cad30b2c3', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: '1381d2e4e39f2ddbac4b9532458419c5c03dc704' }))));
+        return (h(Host, { key: '90108df0339c76ec7ffef78722400cbd5e5b125d', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '4e127ffdeb05efdd63dc538cb38976252ff5a060', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: '5e54c0eaed6558e97226ffdc347e0ca8c0d9aa1b' }))));
     }
     static get is() { return "jump-tab-panel"; }
     static get encapsulation() { return "shadow"; }