@jumpgroup/jump-design-system 0.2.7 → 0.3.0

package/dist/esm/jump-filtergroup.entry.js

@@ -0,0 +1,115 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-056a0a66.js';
+
+const jumpFiltergroupCss = ":host{display:block}:host slot{display:flex;flex-direction:column;gap:0.25rem;margin-bottom:1rem}h5{margin:0 0 0.25rem}[data-hide=true]{display:none}";
+const JumpFiltergroupStyle0 = jumpFiltergroupCss;
+
+const JumpFiltergroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.change = createEvent(this, "jump-filterchange", 7);
+        this.name = 'tax-name';
+        this.heading = 'Titolo del filtro';
+        this.otherLabel = 'Mostra altro';
+        this.lessLabel = 'Mostra meno';
+        this.maxElements = 8;
+        this.variant = 'default';
+        this.values = [];
+        this.value = '';
+        this.slotItems = undefined;
+        this.inputs = [];
+        this.showMore = true;
+    }
+    async getValues() {
+        return this.values;
+    }
+    async getActiveAmount() {
+        return this.values.length;
+    }
+    async getInputs() {
+        return this.inputs;
+    }
+    async getName() {
+        return this.name;
+    }
+    toggleHiddenItems() {
+        this.slotItemsWrapper.assignedElements().forEach((item, index) => {
+            if (index > this.maxElements) {
+                item.setAttribute('data-hide', this.showMore ? 'true' : 'false');
+            }
+        });
+    }
+    handleShowMore() {
+        this.showMore = !this.showMore;
+        this.toggleHiddenItems();
+    }
+    handleChange(event) {
+        const target = event.target;
+        const newValue = target.value;
+        if (target.tagName === 'INPUT') {
+            if (target.type === 'checkbox') {
+                // @ts-ignore
+                if (target.checked) {
+                    this.values.push(newValue);
+                }
+                else {
+                    const index = this.values.indexOf(newValue);
+                    if (index !== -1) {
+                        this.values.splice(index, 1);
+                    }
+                }
+            }
+            else if (target.type === 'radio') {
+                // Se è un input radio selezionato, imposta il valore e aggiorna this.values
+                this.value = newValue;
+                this.values = [newValue]; // Assicurati che this.values contenga solo il valore selezionato
+            }
+        }
+        else if (target.tagName === 'SELECT') {
+            // Se è un select, aggiorna semplicemente il valore
+            this.value = newValue;
+            this.values = [newValue];
+        }
+        // Emit event con i valori aggiornati
+        this.change.emit({
+            name: this.name,
+            values: this.values,
+        });
+    }
+    componentDidLoad() {
+        this.slotItems = this.slotItemsWrapper.assignedElements();
+        this.slotItemsWrapper.addEventListener('change', this.handleChange.bind(this));
+        let index = 0;
+        this.slotItems.forEach((item) => {
+            if (index > this.maxElements) {
+                item.setAttribute('data-hide', 'true');
+            }
+            if (item.tagName === 'INPUT' || item.tagName === 'SELECT') {
+                this.inputs.push(item);
+                if (item.tagName === 'INPUT' && item.type === 'radio') {
+                    item.name = this.name;
+                }
+            }
+            else {
+                const inputs = item.querySelectorAll('input, select');
+                if (inputs.length > 0) {
+                    inputs.forEach((input) => {
+                        this.inputs.push(input);
+                        if (input.tagName === 'INPUT' && input.type === 'radio') {
+                            input.name = this.name;
+                        }
+                    });
+                }
+            }
+            index++;
+        });
+    }
+    render() {
+        return (h(Host, { key: '839a19d9b3c6e54a9852942d5ed2742f0c3bb148' }, this.heading && h("h5", { key: 'e6ee76715547568a0a523238bccf1270bbf5e51d' }, this.heading), h("div", { key: 'bf592042f4ac6d24f1fc781a1bfa243096e6533b', class: "filterGroup" }, h("slot", { key: '017cdc449f638dfbd280053c7883ae2cdaf460c7', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
+            h("jump-button", { key: '4ab0117c15d7de1b4a026444f0492810bffe13bc', variant: "primary", size: "small", text: true, name: this.showMore ? this.otherLabel : this.lessLabel, "aria-label": this.showMore ? this.otherLabel : this.lessLabel, onClick: () => this.handleShowMore() }, this.showMore ? this.otherLabel : this.lessLabel, h("jump-icon", { key: '720871af9f4c520b8e11a72615300243b8d14dcb', slot: "suffix", name: this.showMore ? 'chevron-down' : 'chevron-down' }))));
+    }
+};
+JumpFiltergroup.style = JumpFiltergroupStyle0;
+
+export { JumpFiltergroup as jump_filtergroup };
+
+//# sourceMappingURL=jump-filtergroup.entry.js.map

package/dist/esm/jump-filtergroup.entry.js.map

@@ -0,0 +1 @@
+{"file":"jump-filtergroup.entry.js","mappings":"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","names":[],"sources":["src/components/jump-filtergroup/jump-filtergroup.scss?tag=jump-filtergroup&encapsulation=shadow","src/components/jump-filtergroup/jump-filtergroup.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  slot {\n    display: flex;\n    flex-direction: column;\n    gap: .25rem;\n    margin-bottom: 1rem;\n  }\n}\n\nh5 {\n  margin: 0 0 .25rem;\n}\n//TODO: capire perché non prende questo stile\n[data-hide=\"true\"] {\n  display: none;\n}\n\n\n","import { Component, Host, h, Prop, State, Event, Method } from '@stencil/core';\n\n@Component({\n  tag: 'jump-filtergroup',\n  styleUrl: 'jump-filtergroup.scss',\n  shadow: true,\n})\nexport class JumpFiltergroup {\n  @Prop() name: string = 'tax-name';\n  @Prop() heading: string = 'Titolo del filtro';\n  @Prop() otherLabel: string = 'Mostra altro';\n  @Prop() lessLabel: string = 'Mostra meno';\n  @Prop() maxElements: number = 8;\n  //TODO: Add Accordion variant within jump-acccordion component\n  @Prop() variant: 'accordion' | 'default' = 'default';\n\n  @State() values: string[] = [];\n  @State() value: string = '';\n  @State() slotItems: any;\n  @State() inputs: any = [];\n  @State() showMore: boolean = true;\n\n  @Event({ eventName: 'jump-filterchange' }) change;\n\n  slotItemsWrapper: HTMLSlotElement;\n\n  @Method('getValues')\n  async getValues() {\n    return this.values;\n  }\n\n  @Method('getActiveAmount')\n  async getActiveAmount() {\n    return this.values.length;\n  }\n\n  @Method('getInputs')\n  async getInputs() {\n    return this.inputs;\n  }\n\n  @Method('getName')\n  async getName() {\n    return this.name;\n  }\n\n  toggleHiddenItems() {\n    this.slotItemsWrapper.assignedElements().forEach((item, index) => {\n      if(index > this.maxElements) {\n        item.setAttribute('data-hide', this.showMore ? 'true' : 'false');\n      }\n    });\n  }\n\n  handleShowMore() {\n    this.showMore = !this.showMore;\n    this.toggleHiddenItems();\n  }\n\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement | HTMLSelectElement;\n    const newValue = target.value;\n\n    if (target.tagName === 'INPUT') {\n      if (target.type === 'checkbox') {\n        // @ts-ignore\n        if (target.checked) {\n          this.values.push(newValue);\n        } else {\n          const index = this.values.indexOf(newValue);\n          if (index !== -1) {\n            this.values.splice(index, 1);\n          }\n        }\n      } else if (target.type === 'radio') {\n        // Se è un input radio selezionato, imposta il valore e aggiorna this.values\n        this.value = newValue;\n        this.values = [newValue]; // Assicurati che this.values contenga solo il valore selezionato\n      }\n    } else if (target.tagName === 'SELECT') {\n      // Se è un select, aggiorna semplicemente il valore\n      this.value = newValue;\n      this.values = [newValue];\n    }\n\n    // Emit event con i valori aggiornati\n    this.change.emit({\n      name: this.name,\n      values: this.values,\n    });\n  }\n\n  componentDidLoad() {\n    this.slotItems = this.slotItemsWrapper.assignedElements();\n    this.slotItemsWrapper.addEventListener('change', this.handleChange.bind(this));\n\n    let index = 0;\n    this.slotItems.forEach((item) => {\n      if(index > this.maxElements) {\n        item.setAttribute('data-hide', 'true');\n      }\n      if (item.tagName === 'INPUT' || item.tagName === 'SELECT') {\n        this.inputs.push(item);\n        if (item.tagName === 'INPUT' && item.type === 'radio') {\n          item.name = this.name;\n        }\n      } else {\n        const inputs = item.querySelectorAll('input, select');\n        if (inputs.length > 0) {\n          inputs.forEach((input) => {\n            this.inputs.push(input);\n\n            if (input.tagName === 'INPUT' && input.type === 'radio') {\n              input.name = this.name;\n            }\n          });\n        }\n      }\n      index++;\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.heading && <h5>{this.heading}</h5>}\n        <div class=\"filterGroup\">\n          <slot ref={(el) => (this.slotItemsWrapper = el as HTMLSlotElement)}></slot>\n        </div>\n        {this.inputs.length > this.maxElements &&\n          <jump-button variant=\"primary\" size=\"small\" text name={this.showMore ? this.otherLabel : this.lessLabel}\n                       aria-label={this.showMore ? this.otherLabel : this.lessLabel}\n                       onClick={() => this.handleShowMore() }>\n            {this.showMore ? this.otherLabel : this.lessLabel}\n            <jump-icon slot=\"suffix\" name={this.showMore ? 'chevron-down' : 'chevron-down'}></jump-icon>\n          </jump-button>\n        }\n      </Host>\n    );\n  }\n}\n"],"version":3}