revotech-ui-kit 0.0.22-beta → 0.0.22-beta-02

package/dist/revotech-ui-kit.js

@@ -6727,7 +6727,7 @@ let R = class extends h {
     super(...arguments), this.isOpen = !1, this.selectedValue = "", this.searchTerm = "", this.focusedIndex = -1, this.filteredItems = [], this.label = "Select an item", this.items = [];
   }
   firstUpdated(e) {
-    console.log("this. items firstUpdated", this.items), this.items && this.items.length > 0 && (this.filteredItems = this.items.filter(
+    console.log("this. items", this.items), this.items && this.items.length > 0 && (this.filteredItems = this.items.filter(
       (t) => t.toLowerCase().includes(this.searchTerm)
     ));
   }
@@ -6735,7 +6735,6 @@ let R = class extends h {
     this.isOpen = !this.isOpen, this.focusedIndex = -1, console.log("toggleDropdown", this.isOpen);
   }
   selectItem(e) {
-    console.log("selectItem");
     const t = e.target;
     if (t instanceof HTMLElement) {
       const o = t.closest(
@@ -6749,12 +6748,10 @@ let R = class extends h {
     console.log("-----handleInputClick------"), this.toggleDropdown();
   }
   handleSearch(e) {
-    console.log("handleSearch");
     const t = e.target;
     this.searchTerm = t.value, this.filteredItems = this.items.filter((o) => o.toLowerCase().includes(this.searchTerm.toLowerCase()));
   }
   handleKeyDown(e) {
-    console.log("handleKeyDown");
     const t = this.filteredItems.length;
     switch (e.key) {
       case "ArrowDown":
@@ -6769,61 +6766,66 @@ let R = class extends h {
     }
   }
   handleMouseOver(e, t) {
-    console.log("handleMouseOver"), e.preventDefault(), this.focusedIndex = t;
+    e.preventDefault(), this.focusedIndex = t;
   }
   connectedCallback() {
     var e, t, o, s;
-    super.connectedCallback(), console.log("connectedCallback"), document.addEventListener("click", this.handleClickOutside.bind(this)), console.log("connectedCallback click"), (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input")) == null || t.addEventListener("focus", () => {
-      this.isOpen = !0, console.log("connectedCallback focus", this.isOpen);
+    super.connectedCallback(), document.addEventListener("click", this.handleClickOutside.bind(this)), (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input")) == null || t.addEventListener("focus", () => {
+      this.isOpen = !0;
     }), (s = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input")) == null || s.addEventListener("blur", () => {
-      this.isOpen && (this.isOpen = !1, console.log("connectedCallback blur", this.isOpen));
+      this.isOpen && (this.isOpen = !1);
     });
   }
   disconnectedCallback() {
     var e, t, o, s;
-    console.log("disconnectedCallback"), super.disconnectedCallback(), document.removeEventListener("click", this.handleClickOutside), (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input")) == null || t.removeEventListener("focus", () => {
+    super.disconnectedCallback(), document.removeEventListener("click", this.handleClickOutside), (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("input")) == null || t.removeEventListener("focus", () => {
     }), (s = (o = this.shadowRoot) == null ? void 0 : o.querySelector("input")) == null || s.removeEventListener("blur", () => {
     });
   }
   handleClickOutside(e) {
-    var r, i;
+    var s, r;
     console.log("handleClickOutside");
-    const t = e.target, o = (r = this.shadowRoot) == null ? void 0 : r.querySelector(
+    const t = e.target;
+    if ((s = this.shadowRoot) == null || s.querySelector(
       "[data-hs-combo-box]"
-    );
-    if (console.log("dropdownContainer", o), !this.shadowRoot || !(t instanceof HTMLElement)) {
+    ), console.log("target", t), console.log("this.shadowRoot", this.shadowRoot), !this.shadowRoot || !(t instanceof HTMLElement)) {
       console.log("Invalid target or shadow root");
       return;
     }
-    const s = (i = t.shadowRoot) == null ? void 0 : i.firstElementChild;
-    if (console.log("firstChild", s), !s) {
-      console.log("!firstChild"), this.isOpen = !1;
+    if (!((r = t.shadowRoot) == null ? void 0 : r.firstElementChild)) {
+      this.isOpen = !1;
       return;
     }
-    (!o || !o.contains(s)) && (console.log(
-      "!dropdownContainer || !dropdownContainer.contains(firstChild)"
-    ), this.isOpen = !1);
   }
   updateFocus() {
-    if (console.log("updateFocus"), !this.shadowRoot)
+    if (!this.shadowRoot)
       return;
     this.shadowRoot.querySelectorAll("rtg-combo-box-item").forEach((t, o) => {
       o === this.focusedIndex ? t.classList.add("bg-gray-100") : t.classList.remove("bg-gray-100");
     });
   }
   render() {
-    return console.log("render ", this.isOpen), l`
+    return l`
       <div class="relative" data-hs-combo-box="">
         isopen:${this.isOpen}
         <div>
-          <input part="combobox" class="inline-flex justify-between items-center
-          w-full h-10 px-4 py-2 whitespace-nowrap rounded-md text-sm font-medium
-          border border-input cursor-pointer ring-offset-background
-          transition-colors disabled:pointer-events-none disabled:opacity-50
-          bg-background hover:bg-accent hover:text-accent-foreground
-          outline-none" role="combobox" aria-expanded=${this.isOpen} readonly
-          .value=${this.selectedValue || this.label} //
-          @click="${this.handleInputClick}" @keydown="${this.handleKeyDown}" />
+          <input
+            part="combobox"
+            class="inline-flex justify-between items-center w-full h-10 px-4 py-2 whitespace-nowrap rounded-md 
+              text-sm font-medium border border-input cursor-pointer
+              ring-offset-background 
+              transition-colors disabled:pointer-events-none 
+              disabled:opacity-50  
+              bg-background hover:bg-accent 
+              hover:text-accent-foreground
+              outline-none"
+            role="combobox"
+            aria-expanded=${this.isOpen}
+            readonly
+            .value=${this.selectedValue || this.label}
+            @click="${this.handleInputClick}"
+            @keydown="${this.handleKeyDown}"
+          />
           <div
             class="absolute top-1/2 end-3 -translate-y-1/2 cursor-pointer"
             aria-expanded=${this.isOpen}

package/dist/revotech-ui-kit.umd.cjs

@@ -3138,18 +3138,27 @@ body {
         </div>
         <slot></slot>
       </div>
-    `}};be.styles=[l.css``,c],We([d.property({attribute:"data-state",type:String})],be.prototype,"state",2),We([d.state()],be.prototype,"isOpen",2),be=We([d.customElement("rtg-combo-box-list")],be);var In=Object.defineProperty,An=Object.getOwnPropertyDescriptor,U=(n,e,r,o)=>{for(var t=o>1?void 0:o?An(e,r):e,s=n.length-1,i;s>=0;s--)(i=n[s])&&(t=(o?i(e,r,t):i(t))||t);return o&&t&&In(e,r,t),t};a.ComboBox=class extends l.LitElement{constructor(){super(...arguments),this.isOpen=!1,this.selectedValue="",this.searchTerm="",this.focusedIndex=-1,this.filteredItems=[],this.label="Select an item",this.items=[]}firstUpdated(e){console.log("this. items firstUpdated",this.items),this.items&&this.items.length>0&&(this.filteredItems=this.items.filter(r=>r.toLowerCase().includes(this.searchTerm)))}toggleDropdown(){this.isOpen=!this.isOpen,this.focusedIndex=-1,console.log("toggleDropdown",this.isOpen)}selectItem(e){console.log("selectItem");const r=e.target;if(r instanceof HTMLElement){const o=r.closest("rtg-combo-box-item");o?(this.selectedValue=o.getAttribute("data-hs-combo-box-value")||"",this.isOpen=!1):console.log("No valid rtg-combo-box-item found")}else console.log("Event target is not an HTMLElement")}handleInputClick(){console.log("-----handleInputClick------"),this.toggleDropdown()}handleSearch(e){console.log("handleSearch");const r=e.target;this.searchTerm=r.value,this.filteredItems=this.items.filter(o=>o.toLowerCase().includes(this.searchTerm.toLowerCase()))}handleKeyDown(e){console.log("handleKeyDown");const r=this.filteredItems.length;switch(e.key){case"ArrowDown":e.preventDefault(),this.focusedIndex=(this.focusedIndex+1)%r;break;case"ArrowUp":e.preventDefault(),this.focusedIndex=(this.focusedIndex-1+r)%r;break;case"Enter":this.focusedIndex>=0&&this.focusedIndex<r&&(this.selectedValue=this.filteredItems[this.focusedIndex],this.isOpen=!1);break}}handleMouseOver(e,r){console.log("handleMouseOver"),e.preventDefault(),this.focusedIndex=r}connectedCallback(){var e,r,o,t;super.connectedCallback(),console.log("connectedCallback"),document.addEventListener("click",this.handleClickOutside.bind(this)),console.log("connectedCallback click"),(r=(e=this.shadowRoot)==null?void 0:e.querySelector("input"))==null||r.addEventListener("focus",()=>{this.isOpen=!0,console.log("connectedCallback focus",this.isOpen)}),(t=(o=this.shadowRoot)==null?void 0:o.querySelector("input"))==null||t.addEventListener("blur",()=>{this.isOpen&&(this.isOpen=!1,console.log("connectedCallback blur",this.isOpen))})}disconnectedCallback(){var e,r,o,t;console.log("disconnectedCallback"),super.disconnectedCallback(),document.removeEventListener("click",this.handleClickOutside),(r=(e=this.shadowRoot)==null?void 0:e.querySelector("input"))==null||r.removeEventListener("focus",()=>{}),(t=(o=this.shadowRoot)==null?void 0:o.querySelector("input"))==null||t.removeEventListener("blur",()=>{})}handleClickOutside(e){var s,i;console.log("handleClickOutside");const r=e.target,o=(s=this.shadowRoot)==null?void 0:s.querySelector("[data-hs-combo-box]");if(console.log("dropdownContainer",o),!this.shadowRoot||!(r instanceof HTMLElement)){console.log("Invalid target or shadow root");return}const t=(i=r.shadowRoot)==null?void 0:i.firstElementChild;if(console.log("firstChild",t),!t){console.log("!firstChild"),this.isOpen=!1;return}(!o||!o.contains(t))&&(console.log("!dropdownContainer || !dropdownContainer.contains(firstChild)"),this.isOpen=!1)}updateFocus(){if(console.log("updateFocus"),!this.shadowRoot)return;this.shadowRoot.querySelectorAll("rtg-combo-box-item").forEach((r,o)=>{o===this.focusedIndex?r.classList.add("bg-gray-100"):r.classList.remove("bg-gray-100")})}render(){return console.log("render ",this.isOpen),l.html`
+    `}};be.styles=[l.css``,c],We([d.property({attribute:"data-state",type:String})],be.prototype,"state",2),We([d.state()],be.prototype,"isOpen",2),be=We([d.customElement("rtg-combo-box-list")],be);var In=Object.defineProperty,An=Object.getOwnPropertyDescriptor,U=(n,e,r,o)=>{for(var t=o>1?void 0:o?An(e,r):e,s=n.length-1,i;s>=0;s--)(i=n[s])&&(t=(o?i(e,r,t):i(t))||t);return o&&t&&In(e,r,t),t};a.ComboBox=class extends l.LitElement{constructor(){super(...arguments),this.isOpen=!1,this.selectedValue="",this.searchTerm="",this.focusedIndex=-1,this.filteredItems=[],this.label="Select an item",this.items=[]}firstUpdated(e){console.log("this. items",this.items),this.items&&this.items.length>0&&(this.filteredItems=this.items.filter(r=>r.toLowerCase().includes(this.searchTerm)))}toggleDropdown(){this.isOpen=!this.isOpen,this.focusedIndex=-1,console.log("toggleDropdown",this.isOpen)}selectItem(e){const r=e.target;if(r instanceof HTMLElement){const o=r.closest("rtg-combo-box-item");o?(this.selectedValue=o.getAttribute("data-hs-combo-box-value")||"",this.isOpen=!1):console.log("No valid rtg-combo-box-item found")}else console.log("Event target is not an HTMLElement")}handleInputClick(){console.log("-----handleInputClick------"),this.toggleDropdown()}handleSearch(e){const r=e.target;this.searchTerm=r.value,this.filteredItems=this.items.filter(o=>o.toLowerCase().includes(this.searchTerm.toLowerCase()))}handleKeyDown(e){const r=this.filteredItems.length;switch(e.key){case"ArrowDown":e.preventDefault(),this.focusedIndex=(this.focusedIndex+1)%r;break;case"ArrowUp":e.preventDefault(),this.focusedIndex=(this.focusedIndex-1+r)%r;break;case"Enter":this.focusedIndex>=0&&this.focusedIndex<r&&(this.selectedValue=this.filteredItems[this.focusedIndex],this.isOpen=!1);break}}handleMouseOver(e,r){e.preventDefault(),this.focusedIndex=r}connectedCallback(){var e,r,o,t;super.connectedCallback(),document.addEventListener("click",this.handleClickOutside.bind(this)),(r=(e=this.shadowRoot)==null?void 0:e.querySelector("input"))==null||r.addEventListener("focus",()=>{this.isOpen=!0}),(t=(o=this.shadowRoot)==null?void 0:o.querySelector("input"))==null||t.addEventListener("blur",()=>{this.isOpen&&(this.isOpen=!1)})}disconnectedCallback(){var e,r,o,t;super.disconnectedCallback(),document.removeEventListener("click",this.handleClickOutside),(r=(e=this.shadowRoot)==null?void 0:e.querySelector("input"))==null||r.removeEventListener("focus",()=>{}),(t=(o=this.shadowRoot)==null?void 0:o.querySelector("input"))==null||t.removeEventListener("blur",()=>{})}handleClickOutside(e){var t,s;console.log("handleClickOutside");const r=e.target;if((t=this.shadowRoot)==null||t.querySelector("[data-hs-combo-box]"),console.log("target",r),console.log("this.shadowRoot",this.shadowRoot),!this.shadowRoot||!(r instanceof HTMLElement)){console.log("Invalid target or shadow root");return}if(!((s=r.shadowRoot)==null?void 0:s.firstElementChild)){this.isOpen=!1;return}}updateFocus(){if(!this.shadowRoot)return;this.shadowRoot.querySelectorAll("rtg-combo-box-item").forEach((r,o)=>{o===this.focusedIndex?r.classList.add("bg-gray-100"):r.classList.remove("bg-gray-100")})}render(){return l.html`
       <div class="relative" data-hs-combo-box="">
         isopen:${this.isOpen}
         <div>
-          <input part="combobox" class="inline-flex justify-between items-center
-          w-full h-10 px-4 py-2 whitespace-nowrap rounded-md text-sm font-medium
-          border border-input cursor-pointer ring-offset-background
-          transition-colors disabled:pointer-events-none disabled:opacity-50
-          bg-background hover:bg-accent hover:text-accent-foreground
-          outline-none" role="combobox" aria-expanded=${this.isOpen} readonly
-          .value=${this.selectedValue||this.label} //
-          @click="${this.handleInputClick}" @keydown="${this.handleKeyDown}" />
+          <input
+            part="combobox"
+            class="inline-flex justify-between items-center w-full h-10 px-4 py-2 whitespace-nowrap rounded-md 
+              text-sm font-medium border border-input cursor-pointer
+              ring-offset-background 
+              transition-colors disabled:pointer-events-none 
+              disabled:opacity-50  
+              bg-background hover:bg-accent 
+              hover:text-accent-foreground
+              outline-none"
+            role="combobox"
+            aria-expanded=${this.isOpen}
+            readonly
+            .value=${this.selectedValue||this.label}
+            @click="${this.handleInputClick}"
+            @keydown="${this.handleKeyDown}"
+          />
           <div
             class="absolute top-1/2 end-3 -translate-y-1/2 cursor-pointer"
             aria-expanded=${this.isOpen}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent wc-ui following open-wc recommendations",
   "license": "MIT",
   "author": "wc-ui",
-  "version": "0.0.22-beta",
+  "version": "0.0.22-beta-02",
   "type": "module",
   "main": "dist/revotech-ui-kit.umd.cjs",
   "module": "./dist/revotech-ui-kit.js",