@jumpgroup/jump-design-system 0.2.6 → 0.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-quantity.stories.js","sourceRoot":"","sources":["../../../src/components/jump-quantity/jump-quantity.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,IAAI,EAAE,KAAK;YACX,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,kBAAkB;SAChC;QACD,GAAG,EAAE;YACH,IAAI,EAAE,KAAK;YACX,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mBAAmB;SACjC;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,sBAAsB;SACpC;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oBAAoB;SAClC;QACD,WAAW,EAAE;YACX,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,mBAAmB;SACjC;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC;YACnC,WAAW,EAAE,2BAA2B;SACzC;QACD,UAAU;QACV,wBAAwB;QACxB,uBAAuB;QACvB,yCAAyC;QACzC,oEAAoE;QACpE,KAAK;QACL,WAAW;QACX,+BAA+B;QAC/B,qBAAqB;QACrB,8EAA8E;QAC9E,KAAK;KACN;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,kBAAkB,UAAU,mBAAmB,CAAC;AACzD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,mBAAmB;AACnB,4CAA4C;AAC5C,uBAAuB;AACvB,KAAK;AAIL,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IACzC,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,kBAAkB,UAAU;;;;;kDAKE,EAAE;;;;;YAKxC,CAAC,CAAC;AACd,CAAC,CAAA;AACD,MAAM,CAAC,MAAM,WAAW,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAGxD,+DAA+D;AAC/D,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IACzC,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;;mBAED,UAAU;;;;;;;;kDAQqB,EAAE;;;;;;;;;;;YAWxC,CAAC,CAAC;AACd,CAAC,CAAA;AACD,MAAM,CAAC,MAAM,WAAW,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Quantity',\n  tags: ['autodocs'],\n  argTypes: {\n    min: {\n      name: 'min',\n      control: 'number',\n      description: 'Il valore minimo',\n    },\n    max: {\n      name: 'max',\n      control: 'number',\n      description: 'Il valore massimo',\n    },\n    step: {\n      name: 'step',\n      control: 'number',\n      description: 'Il valore dello step',\n    },\n    label: {\n      name: 'label',\n      control: 'text',\n      description: 'Il testo del label',\n    },\n    showButtons: {\n      name: 'showButtons',\n      control: 'boolean',\n      description: 'Mostra i pulsanti',\n    },\n    variant: {\n      name: 'variant',\n      control: 'select',\n      options: ['vertical', 'horizontal'],\n      description: 'La direzione dei pulsanti',\n    },\n    // name: {\n    //   name: 'Nome Icona',\n    //   control: 'select',\n    //   options: Object.keys(feather.icons),\n    //   description: \"Seleziona il nome dell'icona dal menu a tendina\",\n    // },\n    // class: {\n    //   name: 'Classi aggiuntive',\n    //   control: 'text',\n    //   description: \"Aggiungi classi aggiuntive all'icona (separate da spazio)\",\n    // },\n  },\n};\n\nconst Template = (args) =>{\n  const attributes = generateAttributesFromArgs(args);\n  return `<jump-quantity ${attributes}></jump-quantity>`;\n}\n\nexport const Default = Template.bind({});\n// Default.args = {\n//   // name: Object.keys(feather.icons)[0],\n//   // class: 'small',\n// };\n\n\n\nconst TemplateCheckValues = (args, data) =>{\n  let id = data.id;\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-quantity ${attributes}></jump-quantity>\n  <div>Il valore corrente è: <span class=\"input-value\">loading..<span></div>\n  <script>\n  (function() {\n    let container;\n    container = document.querySelector('#story--${id}');\n    container.querySelector('jump-quantity').addEventListener('jump-change', (ev) => {\n    container.querySelector('.input-value').innerText = ev.detail.value;\n  });\n})();\n  </script>`);\n}\nexport const CheckValues = TemplateCheckValues.bind({});\n\n\n//TODO: https://codepen.io/olawanlejoel/pen/oNpmGpv FormEntries\nconst TemplateFormExample = (args, data) =>{\n  let id = data.id;\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`\n  <form id=\"form_test\">\n  <jump-quantity ${attributes}></jump-quantity>\n  <input type=\"text\" id=\"prova\" value=\"ciao\" />\n  <input type=\"submit\" value=\"invia\" />\n  </form>\n  <div>Il valore corrente è: <span class=\"input-value\">loading..<span></div>\n  <script>\n  (function() {\n    let container;\n    container = document.querySelector('#story--${id}');\n    container.querySelector('form').addEventListener('submit', (ev) => {\n      ev.preventDefault();\n      ev.stopPropagation();\n\n      const formData = new FormData(ev.target);\n\n      console.log(ev, formData);\n    container.querySelector('.input-value').innerText = ev.detail.value;\n  });\n})();\n  </script>`);\n}\nexport const FormExample = TemplateFormExample.bind({});\n"]}

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

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

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

@@ -1,16 +1,78 @@
 import { Host, h } from "@stencil/core";
 export class JumpTab {
     constructor() {
-        this.activeTab = undefined;
-        this.tabNames = undefined;
+        this.tabGroupName = undefined;
+        this.variant = 'inline';
     }
-    componentWillLoad() {
-        console.log('Component is about to be rendered');
-        console.log('active', this.activeTab);
-        console.log('tabNames', this.tabNames);
+    changeActiveTabHandler(event) {
+        this.setActiveTab.emit(event.detail);
+        // Recupera il valore della variabile CSS
+        const rootStyles = getComputedStyle(document.documentElement);
+        const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();
+        let items = this.JumpTabEl.querySelectorAll('jump-tab-item');
+        if (items.length > 0) {
+            items.forEach((item) => {
+                if (item.getAttribute('identifier') === event.detail.id) {
+                    item.setAttribute('active', '');
+                    if (this.variant === 'sheet') {
+                        // Aggiungi il bordo ai fratelli dell'elemento attivo tranne l'ultimo
+                        items.forEach((sibling, index) => {
+                            if (sibling !== item && index !== items.length - 1) {
+                                sibling.style.borderRight = `1px solid ${primaryColor}`; // Usa i backticks
+                            }
+                            else {
+                                sibling.style.borderRight = '1px solid transparent';
+                            }
+                        });
+                        // Rimuovi il bordo dal fratello precedente
+                        let previousSibling = item.previousElementSibling;
+                        if (previousSibling) {
+                            previousSibling.style.borderRight = '1px solid transparent';
+                        }
+                    }
+                }
+                else {
+                    item.removeAttribute('active');
+                }
+            });
+        }
+        let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');
+        if (panel.length > 0) {
+            panel.forEach((panel) => {
+                if (panel.getAttribute('identifier') === event.detail.id) {
+                    panel.setAttribute('active', '');
+                }
+                else {
+                    panel.removeAttribute('active');
+                }
+            });
+        }
+    }
+    componentDidLoad() {
+        console.log('Component has been rendered');
+        if (this.variant === 'sheet') {
+            // Recupera il valore della variabile CSS
+            const rootStyles = getComputedStyle(document.documentElement);
+            const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();
+            // Seleziona tutti gli elementi jump-tab-item
+            let items = this.JumpTabEl.querySelectorAll('jump-tab-item');
+            if (items.length > 0) {
+                items.forEach((item, index) => {
+                    // Aggiungi bordo destro a tutti tranne:
+                    // - l'ultimo elemento
+                    // - l'elemento attivo (avente classe "active")
+                    if (index === items.length - 1 || item.classList.contains('active')) {
+                        item.style.borderRight = '1px solid transparent';
+                    }
+                    else {
+                        item.style.borderRight = `1px solid ${primaryColor}`;
+                    }
+                });
+            }
+        }
     }
     render() {
-        return (h(Host, { key: '6d974852fbbf04550ddd7eaad3dafbf784513c78', class: "JumpTab" }, (this.tabNames && this.activeTab) && this.tabNames.map((tabName) => (h("div", { class: `JumpTab__Tab ${this.activeTab === tabName ? 'active' : ''}` }, tabName)))));
+        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" }))));
     }
     static get is() { return "jump-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -26,7 +88,7 @@ export class JumpTab {
     }
     static get properties() {
         return {
-            "activeTab": {
+            "tabGroupName": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -40,32 +102,56 @@ export class JumpTab {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "active-tab",
+                "attribute": "tab-group-name",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
-            "tabNames": {
-                "type": "unknown",
+            "variant": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "Array<string>",
-                    "resolved": "string[]",
-                    "references": {
-                        "Array": {
-                            "location": "global",
-                            "id": "global::Array"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The style of the tab. The same value must be passed to all the items.\nChoosed from \"inline\", \"boxed\", \"sheet\", \"rounded\""
                 },
-                "defaultValue": "undefined"
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'inline'"
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "setActiveTab",
+                "name": "jump-change-activetab",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "jump-change-active-tab",
+                "method": "changeActiveTabHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=jump-tab.js.map

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

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

@@ -0,0 +1,129 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+export default {
+    title: 'Components/Tab/Tabs',
+    tags: ['autodocs'],
+    argTypes: {
+        tabGroupName: {
+            name: 'tab-group-name',
+            control: 'text',
+            description: 'Indica la tab attiva',
+        },
+        variant: {
+            name: 'variant',
+            control: 'select',
+            options: ['inline', 'boxed', 'sheet', 'rounded'],
+            description: 'Stile del tab e di tutti i suoi item',
+        }
+    }
+};
+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>`);
+};
+export const TabInline = Template.bind({});
+TabInline.args = {
+    tabGroupName: 'Tab 1',
+    variant: 'inline',
+};
+export const TabBoxed = Template.bind({});
+TabBoxed.args = {
+    tabGroupName: 'Tab 1',
+    variant: 'boxed'
+};
+export const TabRounded = Template.bind({});
+TabRounded.args = {
+    tabGroupName: 'tabRounded',
+    variant: 'rounded'
+};
+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>`);
+};
+export const OneTabDisabled = TemplateDisabled.bind({});
+OneTabDisabled.args = {
+    tabGroupName: 'Tab 1',
+    variant: 'boxed'
+};
+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>
+        <div>La tab attiva ha l'id: <span id="active-tab">loading..<span></div>
+        </div>
+        <script>
+        (function(){
+            let container = document.querySelector('#story--${id}');
+            container.querySelector('#active-tab').innerText = "tab1";
+            container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {
+                    container.querySelector('#active-tab').innerText = ev.detail.id;
+                    console.log('TemplateWithListenerExample - event:', ev.detail.id);
+            });
+        })();
+        </script>`);
+};
+export const TabInlineWithListener = TemplateWithListenerExample.bind({});
+TabInlineWithListener.args = {
+    tabGroupName: 'tabInline',
+    iconName: 'settings',
+    variant: 'inline'
+};
+export const TabBoxedWithListener = TemplateWithListenerExample.bind({});
+TabBoxedWithListener.args = {
+    tabGroupName: 'tabBoxed',
+    iconName: 'settings',
+    variant: 'boxed'
+};
+export const TaRoundedWithListener = TemplateWithListenerExample.bind({});
+TaRoundedWithListener.args = {
+    tabGroupName: 'tabRounded',
+    iconName: 'settings',
+    variant: 'rounded'
+};
+export const TabSheetWithListener = TemplateWithListenerExample.bind({});
+TabSheetWithListener.args = {
+    tabGroupName: 'tabSheet',
+    iconName: 'settings',
+    variant: 'sheet'
+};
+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-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>
+            </jump-tab>  <div>La tab attiva ha l'id: <span id="active-tab">loading..<span></div>
+        </div><script>
+        (function(){
+            let container = document.querySelector('#story--${id}');
+            container.querySelector('#active-tab').innerText = "tab1";
+            container.querySelector('jump-tab').addEventListener('jump-change-activetab', (ev) => {
+                    container.querySelector('#active-tab').innerText = ev.detail.id;
+                    console.log('TemplateWithPanel - event:', ev.detail.id);
+            });
+        })();
+        </script>
+        `);
+};
+export const TabInlineWithPanel = TemplateWithPanel.bind({});
+TabInlineWithPanel.args = {
+    tabGroupName: 'Tab 1',
+    variant: 'rounded',
+};
+//# sourceMappingURL=jump-tab.stories.js.map

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

@@ -0,0 +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};"]}

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

@@ -0,0 +1,56 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+import feather from "feather-icons";
+export default {
+    title: 'Components/Tab/Item/Boxed',
+    tags: ['autodocs'],
+    argTypes: {
+        identifier: {
+            name: 'identifier',
+            control: 'text',
+            description: 'Identificatore della tab',
+        },
+        label: {
+            name: 'label',
+            control: 'text',
+            description: 'Label della tab',
+        },
+        iconName: {
+            name: 'icon-name',
+            control: 'select',
+            options: Object.keys(feather.icons),
+            description: 'Nome dell\'icona'
+        },
+        iconPosition: {
+            name: 'icon-position',
+            control: 'select',
+            options: ['left', 'top'],
+            description: 'Posizione dell\'icona'
+        },
+        active: {
+            name: 'active',
+            control: 'boolean',
+            description: 'Tab attiva'
+        },
+        disabled: {
+            name: 'disabled',
+            control: 'boolean',
+            description: 'Tab disabilitata'
+        }
+    }
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-tab variant="boxed" tab-group-name="tabBoxed">
+    <jump-tab-item slot="tab-item" ${attributes}></jump-tab-item>
+    </jump-tab>`);
+};
+export const TabBoxedItem = Template.bind({});
+TabBoxedItem.args = {
+    label: 'Tab1',
+    iconName: 'settings',
+    iconPosition: 'left',
+    active: true,
+    identifier: 'tab1',
+    disabled: false
+};
+//# sourceMappingURL=jump-tab-item-boxed.stories.js.map

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

@@ -0,0 +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};"]}

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

@@ -0,0 +1,56 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+import feather from "feather-icons";
+export default {
+    title: 'Components/Tab/Item/Inline',
+    tags: ['autodocs'],
+    argTypes: {
+        identifier: {
+            name: 'identifier',
+            control: 'text',
+            description: 'Identificatore della tab',
+        },
+        label: {
+            name: 'label',
+            control: 'text',
+            description: 'Label della tab',
+        },
+        iconName: {
+            name: 'icon-name',
+            control: 'select',
+            options: Object.keys(feather.icons),
+            description: 'Nome dell\'icona'
+        },
+        iconPosition: {
+            name: 'icon-position',
+            control: 'select',
+            options: ['left', 'top'],
+            description: 'Posizione dell\'icona'
+        },
+        active: {
+            name: 'active',
+            control: 'boolean',
+            description: 'Tab attiva'
+        },
+        disabled: {
+            name: 'disabled',
+            control: 'boolean',
+            description: 'Tab disabilitata'
+        }
+    }
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-tab variant="inline" tab-group-name="tabInline">
+    <jump-tab-item slot="tab-item" ${attributes}></jump-tab-item>
+    </jump-tab>`);
+};
+export const TabItem = Template.bind({});
+TabItem.args = {
+    label: 'Tab1',
+    iconName: 'settings',
+    iconPosition: 'left',
+    active: true,
+    variant: 'inline',
+    disabled: false
+};
+//# sourceMappingURL=jump-tab-item-inline.stories.js.map

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

@@ -0,0 +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};"]}

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

@@ -0,0 +1,41 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+export default {
+    title: 'Components/Tab/Item/Rounded',
+    tags: ['autodocs'],
+    argTypes: {
+        identifier: {
+            name: 'identifier',
+            control: 'text',
+            description: 'Identificatore della tab',
+        },
+        label: {
+            name: 'label',
+            control: 'text',
+            description: 'Label della tab',
+        },
+        active: {
+            name: 'active',
+            control: 'boolean',
+            description: 'Tab attiva'
+        },
+        disabled: {
+            name: 'disabled',
+            control: 'boolean',
+            description: 'Tab disabilitata'
+        }
+    }
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-tab variant="rounded" tab-group-name="tabRounded">
+    <jump-tab-item slot="tab-item" ${attributes}></jump-tab-item>
+    </jump-tab>`);
+};
+export const TabBoxedItem = Template.bind({});
+TabBoxedItem.args = {
+    label: 'Tab1',
+    active: true,
+    identifier: 'tab1',
+    disabled: false
+};
+//# sourceMappingURL=jump-tab-item-rounded.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-tab-item-rounded.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab-item/jump-tab-item-rounded.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACX,KAAK,EAAE,6BAA6B;IACpC,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,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;AAGD,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC9C,YAAY,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,MAAM;IACb,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/Rounded',\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        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=\"rounded\" tab-group-name=\"tabRounded\">\n    <jump-tab-item slot=\"tab-item\" ${attributes}></jump-tab-item>\n    </jump-tab>`);\n}\n\n\nexport const TabBoxedItem = Template.bind({});\nTabBoxedItem.args = {\n    label: 'Tab1',\n    active: true,\n    identifier: 'tab1',\n    disabled: false\n};"]}

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

@@ -0,0 +1,42 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+export default {
+    title: 'Components/Tab/Item/Sheet',
+    tags: ['autodocs'],
+    argTypes: {
+        identifier: {
+            name: 'identifier',
+            control: 'text',
+            description: 'Identificatore della tab',
+        },
+        label: {
+            name: 'label',
+            control: 'text',
+            description: 'Label della tab',
+        },
+        active: {
+            name: 'active',
+            control: 'boolean',
+            description: 'Tab attiva'
+        },
+        disabled: {
+            name: 'disabled',
+            control: 'boolean',
+            description: 'Tab disabilitata'
+        }
+    }
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<div style="background-color: #EEEEEE; padding: 2rem;">
+    <jump-tab variant="sheet" tab-group-name="tabsheet">
+    <jump-tab-item slot="tab-item" ${attributes}></jump-tab-item>
+    </jump-tab></div>`);
+};
+export const TabBoxedItem = Template.bind({});
+TabBoxedItem.args = {
+    label: 'Tab1',
+    active: true,
+    identifier: 'tab1',
+    disabled: false
+};
+//# sourceMappingURL=jump-tab-item-sheet.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-tab-item-sheet.stories.js","sourceRoot":"","sources":["../../../src/components/jump-tab-item/jump-tab-item-sheet.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;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,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;;qCAEe,UAAU;sBACzB,CAAC,CAAC;AACxB,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,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/Sheet',\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        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(`<div style=\"background-color: #EEEEEE; padding: 2rem;\">\n    <jump-tab variant=\"sheet\" tab-group-name=\"tabsheet\">\n    <jump-tab-item slot=\"tab-item\" ${attributes}></jump-tab-item>\n    </jump-tab></div>`);\n}\n\nexport const TabBoxedItem = Template.bind({});\nTabBoxedItem.args = {\n    label: 'Tab1',\n    active: true,\n    identifier: 'tab1',\n    disabled: false\n};"]}