@jumpgroup/jump-design-system 0.3.33 → 0.3.35

package/dist/types/components.d.ts

@@ -440,6 +440,19 @@ export namespace Components {
         "value": number;
         "variant": 'vertical' | 'horizontal';
     }
+    interface JumpSearchBar {
+        /**
+          * Variabile per personalizzare il tempo di attesa prima di eseguire la ricerca
+         */
+        "debounceTime": number;
+        "identifier": string;
+        "placeholder": string;
+        /**
+          * Se "Auto" la ricerca parte automaticamente al termine della digitazione Se "Manual" la ricerca parte solo dopo aver premuto invio -> può avere solo stile outline
+         */
+        "searchType": string;
+        "variant": string;
+    }
     interface JumpTab {
         "alignment": string;
         /**
@@ -506,6 +519,10 @@ export interface JumpQuantityCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLJumpQuantityElement;
 }
+export interface JumpSearchBarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLJumpSearchBarElement;
+}
 export interface JumpTabCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLJumpTabElement;
@@ -697,6 +714,23 @@ declare global {
         prototype: HTMLJumpQuantityElement;
         new (): HTMLJumpQuantityElement;
     };
+    interface HTMLJumpSearchBarElementEventMap {
+        "jump-search-bar": any;
+    }
+    interface HTMLJumpSearchBarElement extends Components.JumpSearchBar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLJumpSearchBarElementEventMap>(type: K, listener: (this: HTMLJumpSearchBarElement, ev: JumpSearchBarCustomEvent<HTMLJumpSearchBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLJumpSearchBarElementEventMap>(type: K, listener: (this: HTMLJumpSearchBarElement, ev: JumpSearchBarCustomEvent<HTMLJumpSearchBarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLJumpSearchBarElement: {
+        prototype: HTMLJumpSearchBarElement;
+        new (): HTMLJumpSearchBarElement;
+    };
     interface HTMLJumpTabElementEventMap {
         "jump-change-activetab": any;
     }
@@ -753,6 +787,7 @@ declare global {
         "jump-pagination": HTMLJumpPaginationElement;
         "jump-pagination-table": HTMLJumpPaginationTableElement;
         "jump-quantity": HTMLJumpQuantityElement;
+        "jump-search-bar": HTMLJumpSearchBarElement;
         "jump-tab": HTMLJumpTabElement;
         "jump-tab-item": HTMLJumpTabItemElement;
         "jump-tab-panel": HTMLJumpTabPanelElement;
@@ -1185,6 +1220,20 @@ declare namespace LocalJSX {
         "value"?: number;
         "variant"?: 'vertical' | 'horizontal';
     }
+    interface JumpSearchBar {
+        /**
+          * Variabile per personalizzare il tempo di attesa prima di eseguire la ricerca
+         */
+        "debounceTime"?: number;
+        "identifier"?: string;
+        "onJump-search-bar"?: (event: JumpSearchBarCustomEvent<any>) => void;
+        "placeholder"?: string;
+        /**
+          * Se "Auto" la ricerca parte automaticamente al termine della digitazione Se "Manual" la ricerca parte solo dopo aver premuto invio -> può avere solo stile outline
+         */
+        "searchType"?: string;
+        "variant"?: string;
+    }
     interface JumpTab {
         "alignment"?: string;
         /**
@@ -1236,6 +1285,7 @@ declare namespace LocalJSX {
         "jump-pagination": JumpPagination;
         "jump-pagination-table": JumpPaginationTable;
         "jump-quantity": JumpQuantity;
+        "jump-search-bar": JumpSearchBar;
         "jump-tab": JumpTab;
         "jump-tab-item": JumpTabItem;
         "jump-tab-panel": JumpTabPanel;
@@ -1260,6 +1310,7 @@ declare module "@stencil/core" {
             "jump-pagination": LocalJSX.JumpPagination & JSXBase.HTMLAttributes<HTMLJumpPaginationElement>;
             "jump-pagination-table": LocalJSX.JumpPaginationTable & JSXBase.HTMLAttributes<HTMLJumpPaginationTableElement>;
             "jump-quantity": LocalJSX.JumpQuantity & JSXBase.HTMLAttributes<HTMLJumpQuantityElement>;
+            "jump-search-bar": LocalJSX.JumpSearchBar & JSXBase.HTMLAttributes<HTMLJumpSearchBarElement>;
             "jump-tab": LocalJSX.JumpTab & JSXBase.HTMLAttributes<HTMLJumpTabElement>;
             "jump-tab-item": LocalJSX.JumpTabItem & JSXBase.HTMLAttributes<HTMLJumpTabItemElement>;
             "jump-tab-panel": LocalJSX.JumpTabPanel & JSXBase.HTMLAttributes<HTMLJumpTabPanelElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jumpgroup/jump-design-system",
-  "version": "0.3.33",
+  "version": "0.3.35",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/jump-design-system/p-108990a7.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as a,H as s}from"./p-d4c681a4.js";const i=":host{display:block;--jump-tab-bg-color:var(--gray-ultralight, #f8f8f8);--jump-tab-border-color:var(--neutral-grey-disabled, #CBCBCB)}:host .Wrapper{display:flex;width:fit-content}:host .Wrapper.rounded{border-radius:50px;background-color:#f8f8f8}:host(.center){display:flex;justify-content:center;align-items:center}:host(.left){display:flex;justify-content:flex-start;align-items:center}:host(.right){display:flex;justify-content:flex-end;align-items:center}:host(.fullBorder){border-bottom:1px solid var(--jump-tab-border-color)}:host(.fullBorder) ::slotted([slot=tab-item]){margin-bottom:-1px}";const o=i;const r=class{constructor(a){e(this,a);this.setActiveTab=t(this,"jump-change-activetab",7);this.alignment="left";this.fullBorder=false;this.tabGroupName=undefined;this.variant="inline"}changeActiveTabHandler(e){this.setActiveTab.emit(e.detail);const t=getComputedStyle(document.documentElement);const a=t.getPropertyValue("--neutral-grey-secondary").trim();let s=this.JumpTabEl.querySelectorAll("jump-tab-item");if(s.length>0){s.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","");if(this.variant==="sheet"){s.forEach(((e,i)=>{if(e!==t&&i!==s.length-1){e.style.borderRight=`1px solid ${a}`}else{e.style.borderRight="1px solid transparent"}}));let e=t.previousElementSibling;if(e){e.style.borderRight="1px solid transparent"}}}else{t.removeAttribute("active")}}))}let i=this.JumpTabEl.querySelectorAll("jump-tab-panel");if(i.length>0){i.forEach((t=>{if(t.getAttribute("identifier")===e.detail.id){t.setAttribute("active","")}else{t.removeAttribute("active")}}))}}componentDidLoad(){console.log("Component has been rendered");if(this.variant==="sheet"){const e=getComputedStyle(document.documentElement);const t=e.getPropertyValue("--neutral-grey-secondary").trim();let a=this.JumpTabEl.querySelectorAll("jump-tab-item");if(a.length>0){a.forEach(((e,s)=>{if(s===a.length-1||e.classList.contains("active")){e.style.borderRight="1px solid transparent"}else{e.style.borderRight=`1px solid ${t}`}}))}}}render(){return a(s,{key:"12b0209abd23ebbff1779b77bf7a32e0c2070eed",class:"JumpTab"+" "+this.alignment+" "+(this.fullBorder&&"fullBorder"),id:this.tabGroupName,ref:e=>{this.JumpTabEl=e}},a("div",{key:"f9c9158f7c4c61ae42cc1adf125be173288d4aac"},a("div",{key:"31e61ea8666fa867a6e287729ece824a90b584ff",class:"Wrapper "+this.variant},a("slot",{key:"2b215a056c8ab946ba8c58269a87b0de2537b759",name:"tab-item"})),a("div",{key:"e2e0110cc23e5c7e808551f977746fec95466d66"},a("slot",{key:"15a062d1f5ca5b1f7717b27e1192dbe76e5f8fba",name:"tab-content"}))))}};r.style=o;export{r as jump_tab};
-//# sourceMappingURL=p-108990a7.entry.js.map

package/dist/jump-design-system/p-108990a7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["jumpTabCss","JumpTabStyle0","JumpTab","undefined","changeActiveTabHandler","event","this","setActiveTab","emit","detail","rootStyles","getComputedStyle","document","documentElement","primaryColor","getPropertyValue","trim","items","JumpTabEl","querySelectorAll","length","forEach","item","getAttribute","id","setAttribute","variant","sibling","index","style","borderRight","previousSibling","previousElementSibling","removeAttribute","panel","componentDidLoad","console","log","classList","contains","render","h","Host","key","class","alignment","fullBorder","tabGroupName","ref","el","name"],"sources":["src/components/jump-tab/jump-tab.scss?tag=jump-tab&encapsulation=shadow","src/components/jump-tab/jump-tab.tsx"],"sourcesContent":[":host {\n  display: block;\n\n    --jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);\n    --jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);\n\n      .Wrapper {\n        display: flex;\n        width: fit-content;\n    \n        &.rounded {\n          border-radius: 50px;\n          background-color: #f8f8f8; // dovrà andarci var(--jump-tab-bg-color)\n        }\n      }\n}\n\n\n\n:host(.center) {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n:host(.left) {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n\n:host(.right) {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n\n/* Stile fullBorder */\n:host(.fullBorder) {\n  border-bottom: 1px solid var(--jump-tab-border-color);\n}\n\n:host(.fullBorder) ::slotted([slot=\"tab-item\"]) {\n  margin-bottom: -1px;\n}","import { Component, Host, Event, EventEmitter, Prop, h, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'jump-tab',\n  styleUrl: 'jump-tab.scss',\n  shadow: true,\n})\nexport class JumpTab {\n\n  JumpTabEl: HTMLElement;\n  /* ---------------------- @PROPERTIES ------------------------- */\n  @Prop() alignment: string = 'left';\n\n  /**\n   * If true, the jump-tab component have a full bottom border\n   */\n  @Prop() fullBorder: boolean = false;\n\n  @Prop() tabGroupName: string = undefined;\n\n  /**\n   * The style of the tab. The same value must be passed to all the items.\n   * Choosed from \"inline\", \"boxed\", \"sheet\", \"rounded\"\n   */\n  @Prop() variant: string = 'inline';\n\n  @Event({ eventName: 'jump-change-activetab'}) setActiveTab: EventEmitter;\n\n  @Listen('jump-change-active-tab')\n  changeActiveTabHandler(event: CustomEvent) {\n    this.setActiveTab.emit(event.detail);\n\n    // Recupera il valore della variabile CSS\n    const rootStyles = getComputedStyle(document.documentElement);\n    const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n    let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n    if (items.length > 0) {\n      items.forEach((item) => {\n        if (item.getAttribute('identifier') === event.detail.id) {\n          item.setAttribute('active', '');\n\n          if (this.variant === 'sheet') {\n            // Aggiungi il bordo ai fratelli dell'elemento attivo tranne l'ultimo\n            items.forEach((sibling, index) => {\n              if (sibling !== item && index !== items.length - 1) {\n                sibling.style.borderRight = `1px solid ${primaryColor}`; // Usa i backticks\n              } else {\n                sibling.style.borderRight = '1px solid transparent';\n              }\n            });\n\n            // Rimuovi il bordo dal fratello precedente\n            let previousSibling = item.previousElementSibling as any;\n            if (previousSibling) {\n              previousSibling.style.borderRight = '1px solid transparent';\n            }\n          }\n\n        } else {\n          item.removeAttribute('active');\n        }\n      });\n    }\n\n    let panel = this.JumpTabEl.querySelectorAll('jump-tab-panel');\n    if (panel.length > 0) {\n      panel.forEach((panel) => {\n        if (panel.getAttribute('identifier') === event.detail.id) {\n          panel.setAttribute('active', '');\n        } else {\n          panel.removeAttribute('active');\n        }\n      });\n    }\n  }\n\n\n  componentDidLoad() {\n    console.log('Component has been rendered');\n    if(this.variant === 'sheet') {\n      // Recupera il valore della variabile CSS\n      const rootStyles = getComputedStyle(document.documentElement);\n      const primaryColor = rootStyles.getPropertyValue('--neutral-grey-secondary').trim();\n\n      // Seleziona tutti gli elementi jump-tab-item\n      let items = this.JumpTabEl.querySelectorAll('jump-tab-item');\n      if (items.length > 0) {\n        items.forEach((item, index) => {\n          // Aggiungi bordo destro a tutti tranne:\n          // - l'ultimo elemento\n          // - l'elemento attivo (avente classe \"active\")\n          if (index === items.length - 1 || item.classList.contains('active')) {\n            item.style.borderRight = '1px solid transparent';\n          } else {\n            item.style.borderRight = `1px solid ${primaryColor}`;\n          }\n        });\n      }\n    }\n\n  }\n\n  render() {\n    return (\n      <Host class={\"JumpTab\" + \" \" + this.alignment + \" \" + (this.fullBorder && 'fullBorder')} id={this.tabGroupName} ref={(el) => {this.JumpTabEl = el;}}> \n        <div>\n        <div class={\"Wrapper \" + this.variant}>\n          <slot name=\"tab-item\"></slot>\n        </div>\n        <div>\n          <slot name=\"tab-content\"></slot>\n        </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAa,wlBACnB,MAAAC,EAAeD,E,MCMFE,EAAO,M,4FAIU,O,gBAKE,M,kBAECC,U,aAML,Q,CAK1B,sBAAAC,CAAuBC,GACrBC,KAAKC,aAAaC,KAAKH,EAAMI,QAG7B,MAAMC,EAAaC,iBAAiBC,SAASC,iBAC7C,MAAMC,EAAeJ,EAAWK,iBAAiB,4BAA4BC,OAE7E,IAAIC,EAAQX,KAAKY,UAAUC,iBAAiB,iBAC5C,GAAIF,EAAMG,OAAS,EAAG,CACpBH,EAAMI,SAASC,IACb,GAAIA,EAAKC,aAAa,gBAAkBlB,EAAMI,OAAOe,GAAI,CACvDF,EAAKG,aAAa,SAAU,IAE5B,GAAInB,KAAKoB,UAAY,QAAS,CAE5BT,EAAMI,SAAQ,CAACM,EAASC,KACtB,GAAID,IAAYL,GAAQM,IAAUX,EAAMG,OAAS,EAAG,CAClDO,EAAQE,MAAMC,YAAc,aAAahB,G,KACpC,CACLa,EAAQE,MAAMC,YAAc,uB,KAKhC,IAAIC,EAAkBT,EAAKU,uBAC3B,GAAID,EAAiB,CACnBA,EAAgBF,MAAMC,YAAc,uB,OAInC,CACLR,EAAKW,gBAAgB,S,KAK3B,IAAIC,EAAQ5B,KAAKY,UAAUC,iBAAiB,kBAC5C,GAAIe,EAAMd,OAAS,EAAG,CACpBc,EAAMb,SAASa,IACb,GAAIA,EAAMX,aAAa,gBAAkBlB,EAAMI,OAAOe,GAAI,CACxDU,EAAMT,aAAa,SAAU,G,KACxB,CACLS,EAAMD,gBAAgB,S,MAO9B,gBAAAE,GACEC,QAAQC,IAAI,+BACZ,GAAG/B,KAAKoB,UAAY,QAAS,CAE3B,MAAMhB,EAAaC,iBAAiBC,SAASC,iBAC7C,MAAMC,EAAeJ,EAAWK,iBAAiB,4BAA4BC,OAG7E,IAAIC,EAAQX,KAAKY,UAAUC,iBAAiB,iBAC5C,GAAIF,EAAMG,OAAS,EAAG,CACpBH,EAAMI,SAAQ,CAACC,EAAMM,KAInB,GAAIA,IAAUX,EAAMG,OAAS,GAAKE,EAAKgB,UAAUC,SAAS,UAAW,CACnEjB,EAAKO,MAAMC,YAAc,uB,KACpB,CACLR,EAAKO,MAAMC,YAAc,aAAahB,G,OAQhD,MAAA0B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,UAAY,IAAMtC,KAAKuC,UAAY,KAAOvC,KAAKwC,YAAc,cAAetB,GAAIlB,KAAKyC,aAAcC,IAAMC,IAAQ3C,KAAKY,UAAY+B,CAAE,GAC/IR,EAAA,OAAAE,IAAA,4CACAF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,WAAatC,KAAKoB,SAC5Be,EAAA,QAAAE,IAAA,2CAAMO,KAAK,cAEbT,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMO,KAAK,kB"}

package/dist/jump-design-system/p-2c95396a.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as e,H as s}from"./p-d4c681a4.js";const t=":host{display:block}.JumpTabPanel__Content{display:none;padding:1rem 0}.JumpTabPanel__Content.active{display:block}";const d=t;const n=class{constructor(e){a(this,e);this.identifier=undefined;this.active=false}render(){return e(s,{key:"14fc22857d3f935d1a573375d0bae6267d616099",class:"JumpTabPanel",id:this.identifier},e("div",{key:"6e690078d627fd44b8542a2979b0a53ad9ba5d2c",class:"JumpTabPanel__Content "+(this.active?"active":"")},e("slot",{key:"41c5be2ee7a664d028d781e9c48f7feca1d25bf7"})))}};n.style=d;export{n as jump_tab_panel};
-//# sourceMappingURL=p-2c95396a.entry.js.map