@jumpgroup/jump-design-system 0.2.7 → 0.3.1

package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js

@@ -0,0 +1,205 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+export default {
+    title: 'Components/CardEcommerce/Card',
+    tags: ['autodocs'],
+    argTypes: {
+        hasBackground: {
+            name: 'hasBackground',
+            description: 'Aggiungi o meno il background alla card',
+            control: 'boolean',
+        },
+        onlyIconButton: {
+            name: 'onlyIconButton',
+            description: 'Cambia lo stile della card mostrando solo il bottone icona',
+            control: 'boolean',
+        },
+        badge: {
+            name: 'badge',
+            description: 'Badge della card',
+            control: 'text',
+        },
+        favorite: {
+            name: 'favorite',
+            description: 'Aggiunge il prodotto ai preferiti',
+            control: 'boolean',
+        },
+        link: {
+            name: 'link',
+            description: 'Link della card',
+            control: 'text',
+        },
+        img: {
+            name: 'img',
+            description: 'Url dell\'immagine da visualizzare, si attiva solo se non è presente videoSrc',
+            control: 'text',
+            defaultValue: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',
+            if: {
+                arg: 'videoSrc',
+                exists: false
+            }
+        },
+        imgAlt: {
+            name: 'imgAlt',
+            description: 'Alt dell\'immagine da visualizzare, si attiva solo se è presente img',
+            control: 'text',
+            if: {
+                arg: 'img',
+                exists: true
+            }
+        },
+        videoSrc: {
+            name: 'videoSrc',
+            description: 'Url del video da visualizzare, si attiva solo se non è presente img',
+            control: 'text',
+            if: {
+                arg: 'img',
+                exists: false
+            }
+        },
+        notificationUrl: {
+            name: 'notificationUrl',
+            description: 'Url della notifica da visualizzare',
+            control: 'text',
+        },
+        notificationText: {
+            name: 'notificationText',
+            description: 'Testo della notifica da visualizzare',
+            control: 'text',
+        },
+        productName: {
+            name: 'productName',
+            description: 'Nome del prodotto',
+            control: 'text',
+        },
+        subtitle: {
+            name: 'subtitle',
+            description: 'Sottotitolo della card',
+            control: 'text',
+        },
+        productId: {
+            name: 'productId',
+            description: 'ID del prodotto',
+            control: 'text',
+        },
+        price: {
+            name: 'price',
+            description: 'Prezzo del prodotto',
+            control: 'number',
+        },
+        salePrice: {
+            name: 'salePrice',
+            description: 'Prezzo scontato del prodotto',
+            control: 'number',
+        },
+        outOfStock: {
+            name: 'outOfStock',
+            description: 'Indica se il prodotto è esaurito',
+            control: 'boolean',
+            defaultValue: false
+        },
+        outOfStockText: {
+            name: 'outOfStockText',
+            description: 'Testo da visualizzare se il prodotto è esaurito',
+            control: 'text',
+        },
+        addtoCartText: {
+            name: 'addtoCartText',
+            description: 'Testo bottone aggiungi al carrello',
+            control: 'text',
+        },
+        waitingListText: {
+            name: 'waitingListText',
+            description: 'cta per richiedere l\'avviso se il prodotto torna disponibile',
+            control: 'text',
+        },
+        // quantity: {
+        //   name: 'quantity',
+        //   description: 'Indica se è visibile il campo per la quantità del prodotto',
+        //   control: 'boolean',
+        //   defaultValue: false
+        // }
+    }
+};
+// const Template = (args) => {
+//   const attributes = generateAttributesFromArgs(args);
+//   return formatHtml(`<jump-card-ecommerce ${attributes}> </jump-card-ecommerce>`);
+// }
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`
+  <jump-card-ecommerce ${attributes}> 
+    <jump-quantity slot="quantity"></jump-quantity>
+  </jump-card-ecommerce>`);
+};
+export const Card = Template.bind({});
+Card.args = {
+    hasBackground: true,
+    onlyIconButton: false,
+    badge: 'Badge',
+    favorite: true,
+    link: '/prodotto',
+    img: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',
+    imgAlt: 'Immagine',
+    notificationUrl: '/cart',
+    notificationText: 'Aggiunto al carrello',
+    productName: 'T-shirt',
+    subtitle: 'T-shirt da uomo',
+    productId: '1',
+    price: 15,
+    salePrice: 10,
+    currency: '€',
+    outOfStock: false,
+    outOfStockText: 'Esaurito',
+    addtoCartText: 'Aggiungi al carrello',
+    waitingListText: 'Notifica disponibilità',
+};
+// const TemplateWithEvent = (args, data) => {
+//   let id = data.id;
+//   const attributes = generateAttributesFromArgs(args);
+//   return formatHtml(`<jump-card-ecommerce ${attributes}> </jump-card-ecommerce>
+//     <script>
+//     (function() {
+//       let container; 
+//       container = document.querySelector('#story--${id}');
+//       container.querySelector('jump-card-ecommerce').addEventListener( 'jump-toggle-favorite',  ev => {
+//         let productId = ev.detail.productId;
+//         let favorite = ev.detail.favorite;
+//         if(favorite){
+//           alert( 'Prodotto ' + productId + ' aggiunto ai preferiti');
+//         } else {
+//           alert( 'Prodotto ' + productId + ' rimosso dai preferiti');
+//         }
+//       })
+//       container.querySelector('jump-card-ecommerce').addEventListener( 'jump-add-to-cart',  ev => {
+//         let productId = ev.detail.productId;
+//         let addedToCart = ev.detail.addedToCart;
+//         if(addedToCart){
+//           alert( 'Prodotto ' + productId + ' aggiunto al carrello');
+//         } 
+//       })
+//     })();
+//     </script>
+//   ` );
+// }
+// export const CardEvent = TemplateWithEvent.bind({});
+// CardEvent.args = {
+//   badge: 'Badge',
+//   favorite: false,
+//   link: '/prodotto',
+//   img: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',
+//   imgAlt: 'Immagine',
+//   // ricordati di mettere anche esempio con video
+//   notificationUrl: '/cart',
+//   notificationText: 'Aggiunto al carrello',
+//   addedToCart: false,
+//   onSale: true,
+//   variant: 'light',
+//   productName: 'T-shirt',
+//   subtitle: 'T-shirt da uomo',
+//   discount: '5%',
+//   price: 15,
+//   salePrice: 10,
+//   background: false,
+//   productId: '1',
+// };
+//# sourceMappingURL=jump-card-ecommerce.stories.js.map

package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"jump-card-ecommerce.stories.js","sourceRoot":"","sources":["../../../src/components/jump-card-ecommerce/jump-card-ecommerce.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n  title: 'Components/CardEcommerce/Card',\n  tags: ['autodocs'],\n  argTypes: {\n    hasBackground: {\n      name: 'hasBackground',\n      description: 'Aggiungi o meno il background alla card',\n      control: 'boolean',\n    },\n    onlyIconButton: {\n      name: 'onlyIconButton',\n      description: 'Cambia lo stile della card mostrando solo il bottone icona',\n      control: 'boolean',\n    },\n    badge: {\n      name: 'badge',\n      description: 'Badge della card',\n      control: 'text',\n    },\n    favorite: {\n      name: 'favorite',\n      description: 'Aggiunge il prodotto ai preferiti',\n      control: 'boolean',\n    },\n    link: {\n      name: 'link',\n      description: 'Link della card',\n      control: 'text',\n    },\n    img: {\n      name: 'img',\n      description: 'Url dell\\'immagine da visualizzare, si attiva solo se non è presente videoSrc',\n      control: 'text',\n      defaultValue: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',\n      if:{\n        arg: 'videoSrc',\n        exists: false\n      }\n    },\n    imgAlt: {\n      name: 'imgAlt',\n      description: 'Alt dell\\'immagine da visualizzare, si attiva solo se è presente img',\n      control: 'text',\n      if:{\n        arg: 'img',\n        exists: true\n      }\n    },\n    videoSrc: {\n      name: 'videoSrc',\n      description: 'Url del video da visualizzare, si attiva solo se non è presente img',\n      control: 'text',\n      if:{\n        arg: 'img',\n        exists: false\n      }\n    },\n    notificationUrl: {\n      name: 'notificationUrl',\n      description: 'Url della notifica da visualizzare',\n      control: 'text',\n    },\n    notificationText: {\n      name: 'notificationText',\n      description: 'Testo della notifica da visualizzare',\n      control: 'text',\n    },\n    productName: {\n      name: 'productName',\n      description: 'Nome del prodotto',\n      control: 'text',\n    },\n    subtitle: {\n      name: 'subtitle',\n      description: 'Sottotitolo della card',\n      control: 'text',\n    },\n    productId: {\n      name: 'productId',\n      description: 'ID del prodotto',\n      control: 'text',\n    },\n    price: {\n      name: 'price',\n      description: 'Prezzo del prodotto',\n      control: 'number',\n    },\n    salePrice: {\n      name: 'salePrice',\n      description: 'Prezzo scontato del prodotto',\n      control: 'number',\n    },\n    outOfStock: {\n      name: 'outOfStock',\n      description: 'Indica se il prodotto è esaurito',\n      control: 'boolean',\n      defaultValue: false\n    },\n    outOfStockText: {\n      name: 'outOfStockText',\n      description: 'Testo da visualizzare se il prodotto è esaurito',\n      control: 'text',\n    },\n    addtoCartText: {\n      name: 'addtoCartText',\n      description: 'Testo bottone aggiungi al carrello',\n      control: 'text',\n    },\n    waitingListText: {\n      name: 'waitingListText',\n      description: 'cta per richiedere l\\'avviso se il prodotto torna disponibile',\n      control: 'text',\n    },\n    // quantity: {\n    //   name: 'quantity',\n    //   description: 'Indica se è visibile il campo per la quantità del prodotto',\n    //   control: 'boolean',\n    //   defaultValue: false\n    // }\n  }\n};\n\n// const Template = (args) => {\n//   const attributes = generateAttributesFromArgs(args);\n//   return formatHtml(`<jump-card-ecommerce ${attributes}> </jump-card-ecommerce>`);\n// }\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`\n  <jump-card-ecommerce ${attributes}> \n    <jump-quantity slot=\"quantity\"></jump-quantity>\n  </jump-card-ecommerce>`);\n}\n\nexport const Card = Template.bind({});\nCard.args = {\n  hasBackground: true,\n  onlyIconButton: false,\n  badge: 'Badge',\n  favorite: true,\n  link: '/prodotto',\n  img: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',\n  imgAlt: 'Immagine',\n  notificationUrl: '/cart',\n  notificationText: 'Aggiunto al carrello',\n  productName: 'T-shirt',\n  subtitle: 'T-shirt da uomo',\n  productId: '1',\n  price: 15,\n  salePrice: 10,\n  currency: '€',\n  outOfStock: false,\n  outOfStockText: 'Esaurito',\n  addtoCartText: 'Aggiungi al carrello',\n  waitingListText: 'Notifica disponibilità',\n};\n\n\n// const TemplateWithEvent = (args, data) => {\n//   let id = data.id;\n//   const attributes = generateAttributesFromArgs(args);\n//   return formatHtml(`<jump-card-ecommerce ${attributes}> </jump-card-ecommerce>\n//     <script>\n\n//     (function() {\n//       let container; \n//       container = document.querySelector('#story--${id}');\n//       container.querySelector('jump-card-ecommerce').addEventListener( 'jump-toggle-favorite',  ev => {\n//         let productId = ev.detail.productId;\n//         let favorite = ev.detail.favorite;\n//         if(favorite){\n//           alert( 'Prodotto ' + productId + ' aggiunto ai preferiti');\n//         } else {\n//           alert( 'Prodotto ' + productId + ' rimosso dai preferiti');\n//         }\n//       })\n\n//       container.querySelector('jump-card-ecommerce').addEventListener( 'jump-add-to-cart',  ev => {\n//         let productId = ev.detail.productId;\n//         let addedToCart = ev.detail.addedToCart;\n//         if(addedToCart){\n//           alert( 'Prodotto ' + productId + ' aggiunto al carrello');\n//         } \n//       })\n\n//     })();\n\n//     </script>\n//   ` );\n// }\n\n// export const CardEvent = TemplateWithEvent.bind({});\n// CardEvent.args = {\n//   badge: 'Badge',\n//   favorite: false,\n//   link: '/prodotto',\n//   img: 'https://content-management-files.canva.com/cdn-cgi/image/f=auto,q=70/2fdbd7ab-f378-4c63-8b21-c944ad2633fd/header_t-shirts2.jpg',\n//   imgAlt: 'Immagine',\n//   // ricordati di mettere anche esempio con video\n//   notificationUrl: '/cart',\n//   notificationText: 'Aggiunto al carrello',\n//   addedToCart: false,\n//   onSale: true,\n//   variant: 'light',\n//   productName: 'T-shirt',\n//   subtitle: 'T-shirt da uomo',\n//   discount: '5%',\n//   price: 15,\n//   salePrice: 10,\n//   background: false,\n//   productId: '1',\n// };\n"]}

package/dist/collection/components/jump-card-ecommerce/test/jump-card-ecommerce.e2e.js

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

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

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

package/dist/collection/components/jump-card-ecommerce/test/jump-card-ecommerce.spec.js

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

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

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

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

@@ -0,0 +1,8 @@
+:host h3 {
+  margin: 0;
+}
+:host .filtersDrawer {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}

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

@@ -0,0 +1,212 @@
+import { Host, h } from "@stencil/core";
+export class JumpFilter {
+    constructor() {
+        this.direction = 'vertical';
+        this.filterHeading = 'Filtra per';
+        this.filterButtonLabel = 'Filtri';
+        this.filterButtonIcon = 'filter';
+        this.mobileThreshold = 768;
+        this.filters = undefined;
+        this.activeFilters = 0;
+        this.showMobileFilters = false;
+        this.isMobile = false;
+    }
+    filterChangeHandler(event) {
+        //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present
+        this.filters = Object.assign(Object.assign({}, this.filters), { [event.detail.name]: event.detail.values });
+        console.log('Received the custom filterChange event: ', this.filters);
+        //TODO: increment this.activeFilters
+    }
+    handleResize() {
+        this.isMobile = window.innerWidth < this.mobileThreshold;
+    }
+    /**
+     * Get the active filters from the component
+     */
+    async getFilters() {
+        return this.filters;
+    }
+    componentDidLoad() {
+        this.toggleMobileFilters();
+    }
+    toggleMobileFilters() {
+        if (this.mobileToggle) {
+            this.mobileToggle.addEventListener('click', () => {
+                if (!this.isMobile)
+                    return;
+                this.showMobileFilters = !this.showMobileFilters;
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: '66c02e0b1d1e1b57c12a7124874b4d41f0281579', mobileFilters: this.showMobileFilters }, this.isMobile && h("jump-button", { key: 'c6533178a0f3a4b389f289ca919925c160a24df8', ref: (el) => { this.mobileToggle = el; }, buttonId: this.filterButtonIcon, variant: 'primary', outline: true }, h("slot", { key: 'd95b2240c4a7cfec153213ba73c5679b9e72d227', name: "prefix" }, this.filterButtonIcon && h("jump-icon", { key: '9b964e09eb0942e796b4bee737a97326e0363c4e', class: "small", name: this.filterButtonIcon }), this.filterButtonLabel), h("slot", { key: '39cc668bd11bcbff18521fed0216024676827487', name: "suffix" }, this.activeFilters > 0 ? `(${this.activeFilters})` : '0')), h("div", { key: 'f864e224be6ef13cd2530cca0e4e61366253ccf0', ref: (el) => { this.filtersDrawer = el; }, class: "filtersDrawer", "data-variant": this.direction }, !this.isMobile &&
+            h("div", { key: 'e56713bbe8701eb7c5cabf9a768206c688bebfac', class: 'filtersDrawer__header' }, h("jump-icon", { key: 'eb27d23ae68ed0e245d6ef2d9feb600a6e47ebd2', class: "small", name: this.filterButtonIcon }), h("h3", { key: '4396ffb6e8a10397fe12c322192ab085e06ffa32' }, this.filterHeading)), h("slot", { key: '54b6684aad46df572655a8f29e4c865182c0f1a3' }))));
+    }
+    static get is() { return "jump-filter"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["jump-filter.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["jump-filter.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "direction",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "filterHeading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "filter-heading",
+                "reflect": false,
+                "defaultValue": "'Filtra per'"
+            },
+            "filterButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "filter-button-label",
+                "reflect": false,
+                "defaultValue": "'Filtri'"
+            },
+            "filterButtonIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "filter-button-icon",
+                "reflect": false,
+                "defaultValue": "'filter'"
+            },
+            "mobileThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mobile-threshold",
+                "reflect": false,
+                "defaultValue": "768"
+            },
+            "filters": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "filters",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeFilters": {},
+            "showMobileFilters": {},
+            "isMobile": {}
+        };
+    }
+    static get methods() {
+        return {
+            "getFilters": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "Get the active filters from the component",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get listeners() {
+        return [{
+                "name": "jump-filterchange",
+                "method": "filterChangeHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=jump-filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-filter.js","sourceRoot":"","sources":["../../../src/components/jump-filter/jump-filter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAOhF,MAAM,OAAO,UAAU;;yBAE0B,UAAU;6BACzB,YAAY;iCACR,QAAQ;gCACT,QAAQ;+BACT,GAAG;;6BAGJ,CAAC;iCACI,KAAK;wBACd,KAAK;;IAMlC,mBAAmB,CAAC,KAAkB;QACpC,8FAA8F;QAC9F,IAAI,CAAC,OAAO,mCAAO,IAAI,CAAC,OAAO,KAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,GAAC,CAAC;QAC3E,OAAO,CAAC,GAAG,CAAC,0CAA0C,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAItE,oCAAoC;IACtC,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC;IAC3D,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,UAAU;QACd,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,mBAAmB;QACjB,IAAG,IAAI,CAAC,YAAY,EAAC,CAAC;YACpB,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;gBAC/C,IAAG,CAAC,IAAI,CAAC,QAAQ;oBAAE,OAAO;gBAC1B,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC;YACnD,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB;YACxC,IAAI,CAAC,QAAQ,IAAI,oEAChB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAE,IAAI,CAAC,YAAY,GAAG,EAAE,CAAA,CAAA,CAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI;gBAClE,6DAAM,IAAI,EAAC,QAAQ;oBAChB,IAAI,CAAC,gBAAgB,IAAI,kEAAW,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,GAAc;oBAC3F,IAAI,CAAC,iBAAiB,CAClB;gBACP,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,GAAG,CACpD,CACK;YAEb,4DACC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,GAAE,IAAI,CAAC,aAAa,GAAG,EAAE,CAAA,CAAA,CAAC,EACtC,KAAK,EAAC,eAAe,kBAAe,IAAI,CAAC,SAAS;gBACjD,CAAC,IAAI,CAAC,QAAQ;oBACf,4DAAK,KAAK,EAAE,uBAAuB;wBACjC,kEAAW,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,GAAc;wBAClE,6DAAK,IAAI,CAAC,aAAa,CAAM,CACzB;gBACN,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, State, Listen, Method } from '@stencil/core';\n\n@Component({\n  tag: 'jump-filter',\n  styleUrl: 'jump-filter.scss',\n  shadow: true,\n})\nexport class JumpFilter {\n\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() filterHeading: string = 'Filtra per';\n  @Prop() filterButtonLabel: string = 'Filtri';\n  @Prop() filterButtonIcon: string = 'filter';\n  @Prop() mobileThreshold: number = 768;\n  @Prop() filters: any;\n\n  @State() activeFilters: number = 0;\n  @State() showMobileFilters: boolean = false;\n  @State() isMobile: boolean = false;\n\n  mobileToggle: HTMLElement | null;\n  filtersDrawer: HTMLElement;\n\n  @Listen('jump-filterchange')\n  filterChangeHandler(event: CustomEvent) {\n    //set this.filter as this.filters[event.detail.name] = event.detail.value; even if not present\n    this.filters = {...this.filters, [event.detail.name]: event.detail.values};\n    console.log('Received the custom filterChange event: ', this.filters);\n\n\n\n    //TODO: increment this.activeFilters\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.isMobile = window.innerWidth < this.mobileThreshold;\n  }\n\n  /**\n   * Get the active filters from the component\n   */\n  @Method()\n  async getFilters() {\n    return this.filters;\n  }\n\n  componentDidLoad(){\n    this.toggleMobileFilters();\n  }\n\n  toggleMobileFilters() {\n    if(this.mobileToggle){\n      this.mobileToggle.addEventListener('click', () => {\n        if(!this.isMobile) return;\n        this.showMobileFilters = !this.showMobileFilters;\n      });\n    }\n  }\n\n  render() {\n    return (\n      <Host mobileFilters={this.showMobileFilters}>\n        {this.isMobile && <jump-button\n          ref={(el) => {this.mobileToggle = el}}\n          buttonId={this.filterButtonIcon} variant={'primary'} outline={true}>\n          <slot name=\"prefix\">\n            {this.filterButtonIcon && <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>}\n            {this.filterButtonLabel}\n          </slot>\n          <slot name=\"suffix\">\n            {this.activeFilters > 0 ? `(${this.activeFilters})` : '0'}\n          </slot>\n        </jump-button>}\n\n        {<div\n          ref={(el) => {this.filtersDrawer = el}}\n          class=\"filtersDrawer\" data-variant={this.direction}>\n          {!this.isMobile &&\n          <div class={'filtersDrawer__header'}>\n            <jump-icon class=\"small\" name={this.filterButtonIcon}></jump-icon>\n            <h3>{this.filterHeading}</h3>\n          </div>}\n          <slot></slot>\n        </div>}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,122 @@
+import { generateAttributesFromArgs, formatHtml } from "../../utils/utils";
+export default {
+    title: 'Components/Filters/JumpFilter',
+    tags: ['autodocs'],
+    argTypes: {
+        //list all props
+        direction: {
+            control: {
+                type: 'select',
+                options: ['horizontal', 'vertical']
+            }
+        },
+        filterHeading: {
+            control: {
+                type: 'text',
+                description: 'Intestazione drawer dei filtri'
+            }
+        },
+        filterButtonLabel: {
+            control: {
+                type: 'text'
+            }
+        },
+        filterButtonIcon: {
+            control: {
+                type: 'text'
+            }
+        },
+        mobileThreshold: {
+            control: {
+                type: 'number'
+            },
+            defaultValue: 768
+        },
+    }
+};
+const Template = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-filter ${attributes}>
+  <!-- TODO: Replace with jump components -->
+  <jump-filtergroup class='filterGroup' name="tax-name" title="Titolo del filtro" other-label="Mostra di più" max-elements=3>
+  <select label="Ordina per" variant="primary" size="small">
+    <option value="0">Ordina per</option>
+    <option value="latest">Più recenti</option>
+    <option value="oldest">Più vecchi</option>
+  </select>
+  </jump-filtergroup>
+</jump-filter>`);
+};
+export const Default = Template.bind({});
+const TemplateWithSelectFilter = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-filtergroup ${attributes} name='sort' title='Ordina per'>
+    <select class='filterGroupSelect' label="Ordina per" variant="primary" size="small">
+    <option value="0">Ordina per</option>
+    <option value="latest">Più recenti</option>
+    <option value="oldest">Più vecchi</option>
+  </select>
+  </jump-filtergroup>
+</jump-filtergroup>`);
+};
+export const WithSelectFilter = TemplateWithSelectFilter.bind({});
+const TemplateWithCheckboxFilter = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-filter ${attributes} name='sort' title='Ordina per'>
+    <jump-filtergroup class='filterGroupCheckbox' name='animal' title='Animale' other-label='Mostra di più' max-elements='3'>
+      <label><input type='checkbox' value='cane'>Cane</label>
+      <label><input type='checkbox' value='gatto'>Gatto</label>
+      <label><input type='checkbox' value='pesce'>Pesce</label>
+    </jump-filtergroup>
+  </jump-filter>`);
+};
+export const WithCheckboxFilter = TemplateWithCheckboxFilter.bind({});
+//mixed kind of filters
+const TemplateWithMixedFilters = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-filter ${attributes} name='sort' title='Ordina per'>
+    <!-- select group -->
+    <jump-filtergroup class='filterGroupSelect' name="tax-select-sample" title="Ordinamento" other-label="Mostra di più" max-elements=3>
+      <select class='filterGroupSelect' label="Ordina per" variant="primary" size="small">
+      <option value="0">Ordina per</option>
+      <option value="latest">Più recenti</option>
+      <option value="oldest">Più vecchi</option>
+      </select>
+    </jump-filtergroup>
+
+    <jump-filtergroup class='filterGroupCheckbox' name="tax-animal-sample-checkbox" title="Animali" other-label="Mostra di più" max-elements=3>
+      <label><input type='checkbox' value='cane'>Cane</label>
+      <label><input type='checkbox' value='gatto'>Gatto</label>
+      <label><input type='checkbox' value='pesce'>Pesce</label>
+    </jump-filtergroup>
+
+    <!-- radio group -->
+    <jump-filtergroup class='filterGroupRadio' name="tax-animal-sample-radio" title="Animali 2" other-label="Mostra di più" max-elements=3>
+      <label><input type='radio' value='snakes'>Serpenti</label>
+      <label><input type='radio' value='spiders'>Ragni</label>
+    </jump-filtergroup>
+  </jump-filter>`);
+};
+export const WithMixedFilters = TemplateWithMixedFilters.bind({});
+const TemplateWithMoreFilters = (args) => {
+    const attributes = generateAttributesFromArgs(args);
+    return formatHtml(`<jump-filter ${attributes} name='sort' title='Ordina per'>
+    <jump-filtergroup class='filterGroupCheckbox' name="tax-animal-sample-checkbox" title="Animali" other-label="Mostra di più" max-elements=8>
+      <label><input type='checkbox' value='cane'>Cane</label>
+      <label><input type='checkbox' value='gatto'>Gatto</label>
+      <label><input type='checkbox' value='pesce'>Pesce</label>
+      <label><input type='checkbox' value='cavallo'>Cavallo</label>
+      <label><input type='checkbox' value='topo'>Topo</label>
+      <label><input type='checkbox' value='coniglio'>Coniglio</label>
+      <label><input type='checkbox' value='pappagallo'>Pappagallo</label>
+      <label><input type='checkbox' value='tartaruga'>Tartaruga</label>
+      <label><input type='checkbox' value='criceto'>Criceto</label>
+      <label><input type='checkbox' value='canarino'>Canarino</label>
+      <label><input type='checkbox' value='pesciolino'>Pesciolino</label>
+      <label><input type='checkbox' value='pappagallino'>Pappagallino</label>
+      <label><input type='checkbox' value='tartarughina'>Tartarughina</label>
+    </jump-filtergroup>
+  </jump-filter>`);
+};
+export const WithMoreFilters = TemplateWithMoreFilters.bind({});
+//# sourceMappingURL=jump-filter.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"jump-filter.stories.js","sourceRoot":"","sources":["../../../src/components/jump-filter/jump-filter.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,+BAA+B;IACtC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,gBAAgB;QAChB,SAAS,EAAE;YACT,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;aACpC;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;gBACZ,WAAW,EAAE,gCAAgC;aAC9C;SACF;QACD,iBAAiB,EAAE;YACjB,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,gBAAgB,EAAE;YAChB,OAAO,EAAE;gBACP,IAAI,EAAE,MAAM;aACb;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,YAAY,EAAE,GAAG;SAClB;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,gBAAgB,UAAU;;;;;;;;;eAS/B,CAAC,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,wBAAwB,GAAG,CAAC,IAAI,EAAE,EAAE;IACxC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,qBAAqB,UAAU;;;;;;;oBAO/B,CAAC,CAAC;AACtB,CAAC,CAAA;AACD,MAAM,CAAC,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAElE,MAAM,0BAA0B,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1C,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,gBAAgB,UAAU;;;;;;iBAM7B,CAAC,CAAC;AACnB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,0BAA0B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEtE,uBAAuB;AACvB,MAAM,wBAAwB,GAAG,CAAC,IAAI,EAAE,EAAE;IACxC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,gBAAgB,UAAU;;;;;;;;;;;;;;;;;;;;;iBAqB7B,CAAC,CAAC;AACnB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAGlE,MAAM,uBAAuB,GAAG,CAAC,IAAI,EAAE,EAAE;IACvC,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,gBAAgB,UAAU;;;;;;;;;;;;;;;;iBAgB7B,CAAC,CAAC;AACnB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n  title: 'Components/Filters/JumpFilter',\n  tags: ['autodocs'],\n  argTypes: {\n    //list all props\n    direction: {\n      control: {\n        type: 'select',\n        options: ['horizontal', 'vertical']\n      }\n    },\n    filterHeading: {\n      control: {\n        type: 'text',\n        description: 'Intestazione drawer dei filtri'\n      }\n    },\n    filterButtonLabel: {\n      control: {\n        type: 'text'\n      }\n    },\n    filterButtonIcon: {\n      control: {\n        type: 'text'\n      }\n    },\n    mobileThreshold: {\n      control: {\n        type: 'number'\n      },\n      defaultValue: 768\n    },\n  }\n};\n\nconst Template = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-filter ${attributes}>\n  <!-- TODO: Replace with jump components -->\n  <jump-filtergroup class='filterGroup' name=\"tax-name\" title=\"Titolo del filtro\" other-label=\"Mostra di più\" max-elements=3>\n  <select label=\"Ordina per\" variant=\"primary\" size=\"small\">\n    <option value=\"0\">Ordina per</option>\n    <option value=\"latest\">Più recenti</option>\n    <option value=\"oldest\">Più vecchi</option>\n  </select>\n  </jump-filtergroup>\n</jump-filter>`);\n};\n\nexport const Default = Template.bind({});\n\nconst TemplateWithSelectFilter = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-filtergroup ${attributes} name='sort' title='Ordina per'>\n    <select class='filterGroupSelect' label=\"Ordina per\" variant=\"primary\" size=\"small\">\n    <option value=\"0\">Ordina per</option>\n    <option value=\"latest\">Più recenti</option>\n    <option value=\"oldest\">Più vecchi</option>\n  </select>\n  </jump-filtergroup>\n</jump-filtergroup>`);\n}\nexport const WithSelectFilter = TemplateWithSelectFilter.bind({});\n\nconst TemplateWithCheckboxFilter = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-filter ${attributes} name='sort' title='Ordina per'>\n    <jump-filtergroup class='filterGroupCheckbox' name='animal' title='Animale' other-label='Mostra di più' max-elements='3'>\n      <label><input type='checkbox' value='cane'>Cane</label>\n      <label><input type='checkbox' value='gatto'>Gatto</label>\n      <label><input type='checkbox' value='pesce'>Pesce</label>\n    </jump-filtergroup>\n  </jump-filter>`);\n}\n\nexport const WithCheckboxFilter = TemplateWithCheckboxFilter.bind({});\n\n//mixed kind of filters\nconst TemplateWithMixedFilters = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-filter ${attributes} name='sort' title='Ordina per'>\n    <!-- select group -->\n    <jump-filtergroup class='filterGroupSelect' name=\"tax-select-sample\" title=\"Ordinamento\" other-label=\"Mostra di più\" max-elements=3>\n      <select class='filterGroupSelect' label=\"Ordina per\" variant=\"primary\" size=\"small\">\n      <option value=\"0\">Ordina per</option>\n      <option value=\"latest\">Più recenti</option>\n      <option value=\"oldest\">Più vecchi</option>\n      </select>\n    </jump-filtergroup>\n\n    <jump-filtergroup class='filterGroupCheckbox' name=\"tax-animal-sample-checkbox\" title=\"Animali\" other-label=\"Mostra di più\" max-elements=3>\n      <label><input type='checkbox' value='cane'>Cane</label>\n      <label><input type='checkbox' value='gatto'>Gatto</label>\n      <label><input type='checkbox' value='pesce'>Pesce</label>\n    </jump-filtergroup>\n\n    <!-- radio group -->\n    <jump-filtergroup class='filterGroupRadio' name=\"tax-animal-sample-radio\" title=\"Animali 2\" other-label=\"Mostra di più\" max-elements=3>\n      <label><input type='radio' value='snakes'>Serpenti</label>\n      <label><input type='radio' value='spiders'>Ragni</label>\n    </jump-filtergroup>\n  </jump-filter>`);\n}\n\nexport const WithMixedFilters = TemplateWithMixedFilters.bind({});\n\n\nconst TemplateWithMoreFilters = (args) => {\n  const attributes = generateAttributesFromArgs(args);\n  return formatHtml(`<jump-filter ${attributes} name='sort' title='Ordina per'>\n    <jump-filtergroup class='filterGroupCheckbox' name=\"tax-animal-sample-checkbox\" title=\"Animali\" other-label=\"Mostra di più\" max-elements=8>\n      <label><input type='checkbox' value='cane'>Cane</label>\n      <label><input type='checkbox' value='gatto'>Gatto</label>\n      <label><input type='checkbox' value='pesce'>Pesce</label>\n      <label><input type='checkbox' value='cavallo'>Cavallo</label>\n      <label><input type='checkbox' value='topo'>Topo</label>\n      <label><input type='checkbox' value='coniglio'>Coniglio</label>\n      <label><input type='checkbox' value='pappagallo'>Pappagallo</label>\n      <label><input type='checkbox' value='tartaruga'>Tartaruga</label>\n      <label><input type='checkbox' value='criceto'>Criceto</label>\n      <label><input type='checkbox' value='canarino'>Canarino</label>\n      <label><input type='checkbox' value='pesciolino'>Pesciolino</label>\n      <label><input type='checkbox' value='pappagallino'>Pappagallino</label>\n      <label><input type='checkbox' value='tartarughina'>Tartarughina</label>\n    </jump-filtergroup>\n  </jump-filter>`);\n}\n\nexport const WithMoreFilters = TemplateWithMoreFilters.bind({});\n"]}