@revotech-group/revotech-ui-kit 0.0.88 → 0.0.89

package/dist/library.css

@@ -730,6 +730,9 @@ body {
 .rtg-ml-1 {
   margin-left: 0.25rem;
 }
+.rtg-ml-2 {
+  margin-left: 0.5rem;
+}
 .rtg-ml-auto {
   margin-left: auto;
 }
@@ -1789,6 +1792,25 @@ body {
   z-index: 20;
 }
 
+.focus-within\:rtg-outline-none:focus-within {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus-within\:rtg-ring-2:focus-within {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-within\:rtg-ring-ring:focus-within {
+  --tw-ring-color: hsl(var(--ring));
+}
+
+.focus-within\:rtg-ring-offset-2:focus-within {
+  --tw-ring-offset-width: 2px;
+}
+
 .hover\:\!rtg-bg-slate-100:hover {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)) !important;

package/dist/rtg-ui-kit.js

@@ -5911,7 +5911,7 @@ let ie = class extends h {
   }
   handleCountryChange(e) {
     const t = e.target, o = _o.find((s) => s.value === t.value);
-    o && (this.country = o.value, this.countryCode = o.code, this.selectedLabel = o.value, this.requestUpdate()), e.stopPropagation();
+    o && (this.country = o.value, this.countryCode = o.code, this.selectedLabel = o.label, this.requestUpdate(), this.dispatchInputAndChangeEvents()), e.stopPropagation();
   }
   firstUpdated(e) {
     this.removeParentAttributes();
@@ -5920,7 +5920,33 @@ let ie = class extends h {
   }
   handleInputChange(e) {
     const t = e.target;
-    t.type === "file" ? this.value = t.files ? t.files[0].name : "" : this.value = t.value;
+    t.type === "file" ? this.value = t.files ? t.files[0].name : "" : this.value = t.value, this.dispatchInputAndChangeEvents();
+  }
+  dispatchInputAndChangeEvents() {
+    const e = this.type === "tel" ? `${this.countryCode}${this.value}` : this.value;
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          value: e,
+          rawValue: this.value,
+          code: this.countryCode,
+          dataKey: this.dataKey
+        }
+      })
+    ), this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          value: e,
+          rawValue: this.value,
+          code: this.countryCode,
+          dataKey: this.dataKey
+        }
+      })
+    );
   }
   handleFocus() {
     this.dispatchEvent(
@@ -5953,38 +5979,30 @@ let ie = class extends h {
     return this.type === "tel" ? d`
         <div
           class="${p(
-      "rtg-flex rtg-items-center rtg-border rtg-border-input rtg-rounded-md rtg-px-3 rtg-py-1",
-      this.className
+      "rtg-flex rtg-items-center rtg-border rtg-border-input rtg-rounded-md rtg-px-3 rtg-py-1 rtg-bg-background rtg-text-sm rtg-ring-offset-background rtg-transition-colors focus-within:rtg-outline-none focus-within:rtg-ring-2 focus-within:rtg-ring-ring focus-within:rtg-ring-offset-2",
+      this.customClass
     )}"
         >
           <select
-            class="${p(
-      "rtg-w-[40px] rtg-text-sm rtg-outline-none rtg-bg-transparent",
-      this.className
-    )}"
+            class="rtg-w-[40px] rtg-bg-transparent rtg-text-sm rtg-outline-none"
             @change=${this.handleCountryChange}
             .value=${this.country}
           >
             ${_o.map(
-      (t) => d`<option
-                value=${t.value}
-                ?selected=${this.country === t.value}
-              >
-                ${this.country === t.value ? this.selectedLabel : `${t.label} ${t.code}`}
-              </option>`
+      (t) => d`
+                <option value=${t.value}>${t.label} ${t.code}</option>
+              `
     )}
           </select>
-          <span class="rtg-text-sm">${this.countryCode}</span>
+          <span class="rtg-ml-2">${this.countryCode}</span>
           <input
             part="input"
             type="tel"
-            class="${p(
-      "rtg-flex rtg-bg-transparent rtg-text-sm rtg-px-3 rtg-py-[3px] focus-visible:rtg-outline-none disabled:rtg-opacity-50 input-base",
-      this.className
-    )}"
+            class="input-base rtg-flex-1 rtg-bg-transparent rtg-px-3 rtg-py-[3px] rtg-text-sm focus-visible:rtg-outline-none disabled:rtg-opacity-50"
             placeholder=${this.placeholder}
             .value=${this.value}
-            @change="${this.handleInputChange}"
+            @input=${this.handleInputChange}
+            @change=${this.handleInputChange}
             @focus=${this.handleFocus}
             ?disabled=${this.disabled}
             ${G(e)}
@@ -5997,8 +6015,9 @@ let ie = class extends h {
         placeholder="${this.placeholder}"
         ?disabled=${this.disabled}
         .value=${this.type !== "file" ? this.value : ""}
-        @change="${this.handleInputChange}"
-        @focus="${this.handleFocus}"
+        @input=${this.handleInputChange}
+        @change=${this.handleInputChange}
+        @focus=${this.handleFocus}
         ${G(e)}
         class="${p(Ba, this.customClass)}"
       />
@@ -14836,13 +14855,13 @@ let Os = class extends h {
   render() {
     return d`
       <div class="sb-flex sb-flex-col sb-gap-4">
-        <label class="sb-font-semibold">Custom button style:</label>
+        <!-- <label class="sb-font-semibold">Custom button style:</label>
         <textarea
           class="sb-border sb-p-2"
           .value=${this.btnClass}
           @input=${(e) => this.btnClass = e.target.value}
         ></textarea>
-        <rtg-alert style=${this.btnClass} message=${"hey"}></rtg-alert>
+        <rtg-alert style=${this.btnClass} message=${"hey"}></rtg-alert> -->
       </div>
     `;
   }

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

@@ -2859,30 +2859,28 @@ body {
     .wrapper {
       display: block;
     }
-  `;let St=nr;customElements.define("shadow-wrapper",St);class br extends Ln.AsyncDirective{constructor(){super(...arguments),this.prevData={}}render(e){return Mn.nothing}update(e,[r]){var n;this.element!==e.element&&(this.element=e.element),this.host=((n=e.options)===null||n===void 0?void 0:n.host)||this.element,this.apply(r),this.groom(r),this.prevData={...r}}apply(e){if(!e)return;const{prevData:r,element:n}=this;for(const t in e){const i=e[t];i!==r[t]&&(n[t]=i)}}groom(e){const{prevData:r,element:n}=this;if(r)for(const t in r)(!e||!(t in e)&&n[t]===r[t])&&(n[t]=void 0)}}_t.directive(br);class yr extends br{constructor(){super(...arguments),this.eventData={}}apply(e){if(e)for(const r in e){const n=e[r];n!==this.eventData[r]&&this.applyEvent(r,n)}}applyEvent(e,r){const{prevData:n,element:t}=this;this.eventData[e]=r,n[e]&&t.removeEventListener(e,this,r),t.addEventListener(e,this,r)}groom(e){const{prevData:r,element:n}=this;if(r)for(const t in r)(!e||!(t in e)&&n[t]===r[t])&&this.groomEvent(t,r[t])}groomEvent(e,r){const{element:n}=this;delete this.eventData[e],n.removeEventListener(e,this,r)}handleEvent(e){const r=this.eventData[e.type];typeof r=="function"?r.call(this.host,e):r.handleEvent(e)}disconnected(){const{eventData:e,element:r}=this;for(const n in e){const t=n.slice(1),i=e[n];r.removeEventListener(t,this,i)}}reconnected(){const{eventData:e,element:r}=this;for(const n in e){const t=n.slice(1),i=e[n];r.addEventListener(t,this,i)}}}_t.directive(yr);class wo extends yr{apply(e){if(!e)return;const{prevData:r,element:n}=this;for(const t in e){const i=e[t];if(i===r[t])continue;const s=t.slice(1);switch(t[0]){case"@":this.eventData[s]=i,this.applyEvent(s,i);break;case".":n[s]=i;break;case"?":i?n.setAttribute(s,""):n.removeAttribute(s);break;default:i!=null?n.setAttribute(t,String(i)):n.removeAttribute(t);break}}}groom(e){const{prevData:r,element:n}=this;if(r)for(const t in r){const i=t.slice(1);if(!e||!(t in e)&&n[i]===r[t])switch(t[0]){case"@":this.groomEvent(i,r[t]);break;case".":n[i]=void 0;break;case"?":n.removeAttribute(i);break;default:n.removeAttribute(t);break}}}}const V=_t.directive(wo),wr=[{label:"AF",value:"AF",code:"+93"},{label:"AL",value:"AL",code:"+355"},{label:"DZ",value:"DZ",code:"+213"},{label:"AS",value:"AS",code:"+1684"},{label:"AD",value:"AD",code:"+376"},{label:"AO",value:"AO",code:"+244"},{label:"AI",value:"AI",code:"+1264"},{label:"AG",value:"AG",code:"+1268"},{label:"AR",value:"AR",code:"+54"},{label:"AM",value:"AM",code:"+374"},{label:"AW",value:"AW",code:"+297"},{label:"AU",value:"AU",code:"+61"},{label:"AT",value:"AT",code:"+43"},{label:"AZ",value:"AZ",code:"+994"},{label:"BS",value:"BS",code:"+1242"},{label:"BH",value:"BH",code:"+973"},{label:"BD",value:"BD",code:"+880"},{label:"BB",value:"BB",code:"+1246"},{label:"BY",value:"BY",code:"+375"},{label:"BE",value:"BE",code:"+32"},{label:"BZ",value:"BZ",code:"+501"},{label:"BJ",value:"BJ",code:"+229"},{label:"BM",value:"BM",code:"+1441"},{label:"BT",value:"BT",code:"+975"},{label:"BO",value:"BO",code:"+591"},{label:"BA",value:"BA",code:"+387"},{label:"BW",value:"BW",code:"+267"},{label:"BR",value:"BR",code:"+55"},{label:"IO",value:"IO",code:"+246"},{label:"VG",value:"VG",code:"+1284"},{label:"BN",value:"BN",code:"+673"},{label:"BG",value:"BG",code:"+359"},{label:"BF",value:"BF",code:"+226"},{label:"BI",value:"BI",code:"+257"},{label:"KH",value:"KH",code:"+855"},{label:"CM",value:"CM",code:"+237"},{label:"CA",value:"CA",code:"+1"},{label:"CV",value:"CV",code:"+238"},{label:"KY",value:"KY",code:"+1345"},{label:"CF",value:"CF",code:"+236"},{label:"TD",value:"TD",code:"+235"},{label:"CL",value:"CL",code:"+56"},{label:"CN",value:"CN",code:"+86"},{label:"CX",value:"CX",code:"+61"},{label:"CC",value:"CC",code:"+61"},{label:"CO",value:"CO",code:"+57"},{label:"KM",value:"KM",code:"+269"},{label:"CK",value:"CK",code:"+682"},{label:"CR",value:"CR",code:"+506"},{label:"HR",value:"HR",code:"+385"},{label:"CU",value:"CU",code:"+53"},{label:"CW",value:"CW",code:"+599"},{label:"CY",value:"CY",code:"+357"},{label:"CZ",value:"CZ",code:"+420"},{label:"CD",value:"CD",code:"+243"},{label:"DK",value:"DK",code:"+45"},{label:"DJ",value:"DJ",code:"+253"},{label:"DM",value:"DM",code:"+1767"},{label:"DO",value:"DO",code:"+1809"},{label:"DO",value:"DO",code:"+1829"},{label:"DO",value:"DO",code:"+1849"},{label:"TL",value:"TL",code:"+670"},{label:"EC",value:"EC",code:"+593"},{label:"EG",value:"EG",code:"+20"},{label:"SV",value:"SV",code:"+503"},{label:"GQ",value:"GQ",code:"+240"},{label:"ER",value:"ER",code:"+291"},{label:"EE",value:"EE",code:"+372"},{label:"ET",value:"ET",code:"+251"},{label:"FK",value:"FK",code:"+500"},{label:"FO",value:"FO",code:"+298"},{label:"FJ",value:"FJ",code:"+679"},{label:"FI",value:"FI",code:"+358"},{label:"FR",value:"FR",code:"+33"},{label:"PF",value:"PF",code:"+689"},{label:"GA",value:"GA",code:"+241"},{label:"GM",value:"GM",code:"+220"},{label:"GE",value:"GE",code:"+995"},{label:"DE",value:"DE",code:"+49"},{label:"GH",value:"GH",code:"+233"},{label:"GI",value:"GI",code:"+350"},{label:"GR",value:"GR",code:"+30"},{label:"GL",value:"GL",code:"+299"},{label:"GD",value:"GD",code:"+1473"},{label:"GU",value:"GU",code:"+1671"},{label:"GT",value:"GT",code:"+502"},{label:"GG",value:"GG",code:"+441481"},{label:"GN",value:"GN",code:"+224"},{label:"GW",value:"GW",code:"+245"},{label:"GY",value:"GY",code:"+592"},{label:"HT",value:"HT",code:"+509"},{label:"HN",value:"HN",code:"+504"},{label:"HK",value:"HK",code:"+852"},{label:"HU",value:"HU",code:"+36"},{label:"IS",value:"IS",code:"+354"},{label:"IN",value:"IN",code:"+91"},{label:"ID",value:"ID",code:"+62"},{label:"IR",value:"IR",code:"+98"},{label:"IQ",value:"IQ",code:"+964"},{label:"IE",value:"IE",code:"+353"},{label:"IM",value:"IM",code:"+441624"},{label:"IL",value:"IL",code:"+972"},{label:"IT",value:"IT",code:"+39"},{label:"CI",value:"CI",code:"+225"},{label:"JM",value:"JM",code:"+1876"},{label:"JP",value:"JP",code:"+81"},{label:"JE",value:"JE",code:"+441534"},{label:"JO",value:"JO",code:"+962"},{label:"KZ",value:"KZ",code:"+7"},{label:"KE",value:"KE",code:"+254"},{label:"KI",value:"KI",code:"+686"},{label:"XK",value:"XK",code:"+383"},{label:"KW",value:"KW",code:"+965"},{label:"KG",value:"KG",code:"+996"},{label:"LA",value:"LA",code:"+856"},{label:"LV",value:"LV",code:"+371"},{label:"LB",value:"LB",code:"+961"},{label:"LS",value:"LS",code:"+266"},{label:"LR",value:"LR",code:"+231"},{label:"LY",value:"LY",code:"+218"},{label:"LI",value:"LI",code:"+423"},{label:"LT",value:"LT",code:"+370"},{label:"LU",value:"LU",code:"+352"},{label:"MO",value:"MO",code:"+853"},{label:"MK",value:"MK",code:"+389"},{label:"MG",value:"MG",code:"+261"},{label:"MW",value:"MW",code:"+265"},{label:"MY",value:"MY",code:"+60"},{label:"MV",value:"MV",code:"+960"},{label:"ML",value:"ML",code:"+223"},{label:"MT",value:"MT",code:"+356"},{label:"MH",value:"MH",code:"+692"},{label:"MR",value:"MR",code:"+222"},{label:"MU",value:"MU",code:"+230"},{label:"YT",value:"YT",code:"+262"},{label:"MX",value:"MX",code:"+52"},{label:"FM",value:"FM",code:"+691"},{label:"MD",value:"MD",code:"+373"},{label:"MC",value:"MC",code:"+377"},{label:"MN",value:"MN",code:"+976"},{label:"ME",value:"ME",code:"+382"},{label:"MS",value:"MS",code:"+1664"},{label:"MA",value:"MA",code:"+212"},{label:"MZ",value:"MZ",code:"+258"},{label:"MM",value:"MM",code:"+95"},{label:"NA",value:"NA",code:"+264"},{label:"NR",value:"NR",code:"+674"},{label:"NP",value:"NP",code:"+977"},{label:"NL",value:"NL",code:"+31"},{label:"AN",value:"AN",code:"+599"},{label:"NC",value:"NC",code:"+687"},{label:"NZ",value:"NZ",code:"+64"},{label:"NI",value:"NI",code:"+505"},{label:"NE",value:"NE",code:"+227"},{label:"NG",value:"NG",code:"+234"},{label:"NU",value:"NU",code:"+683"},{label:"KP",value:"KP",code:"+850"},{label:"MP",value:"MP",code:"+1670"},{label:"NO",value:"NO",code:"+47"},{label:"OM",value:"OM",code:"+968"},{label:"PK",value:"PK",code:"+92"},{label:"PW",value:"PW",code:"+680"},{label:"PS",value:"PS",code:"+970"},{label:"PA",value:"PA",code:"+507"},{label:"PG",value:"PG",code:"+675"},{label:"PY",value:"PY",code:"+595"},{label:"PE",value:"PE",code:"+51"},{label:"PH",value:"PH",code:"+63"},{label:"PN",value:"PN",code:"+64"},{label:"PL",value:"PL",code:"+48"},{label:"PT",value:"PT",code:"+351"},{label:"PR",value:"PR",code:"+1787"},{label:"PR",value:"PR",code:"+1939"},{label:"QA",value:"QA",code:"+974"},{label:"CG",value:"CG",code:"+242"},{label:"RE",value:"RE",code:"+262"},{label:"RO",value:"RO",code:"+40"},{label:"RU",value:"RU",code:"+7"},{label:"RW",value:"RW",code:"+250"},{label:"BL",value:"BL",code:"+590"},{label:"SH",value:"SH",code:"+290"},{label:"KN",value:"KN",code:"+1869"},{label:"LC",value:"LC",code:"+1758"},{label:"MF",value:"MF",code:"+590"},{label:"PM",value:"PM",code:"+508"},{label:"VC",value:"VC",code:"+1784"},{label:"WS",value:"WS",code:"+685"},{label:"SM",value:"SM",code:"+378"},{label:"ST",value:"ST",code:"+239"},{label:"SA",value:"SA",code:"+966"},{label:"SN",value:"SN",code:"+221"},{label:"RS",value:"RS",code:"+381"},{label:"SC",value:"SC",code:"+248"},{label:"SL",value:"SL",code:"+232"},{label:"SG",value:"SG",code:"+65"},{label:"SX",value:"SX",code:"+1721"},{label:"SK",value:"SK",code:"+421"},{label:"SI",value:"SI",code:"+386"},{label:"SB",value:"SB",code:"+677"},{label:"SO",value:"SO",code:"+252"},{label:"ZA",value:"ZA",code:"+27"},{label:"KR",value:"KR",code:"+82"},{label:"SS",value:"SS",code:"+211"},{label:"ES",value:"ES",code:"+34"},{label:"LK",value:"LK",code:"+94"},{label:"SD",value:"SD",code:"+249"},{label:"SR",value:"SR",code:"+597"},{label:"SJ",value:"SJ",code:"+47"},{label:"SZ",value:"SZ",code:"+268"},{label:"SE",value:"SE",code:"+46"},{label:"CH",value:"CH",code:"+41"},{label:"SY",value:"SY",code:"+963"},{label:"TW",value:"TW",code:"+886"},{label:"TJ",value:"TJ",code:"+992"},{label:"TZ",value:"TZ",code:"+255"},{label:"TH",value:"TH",code:"+66"},{label:"TG",value:"TG",code:"+228"},{label:"TK",value:"TK",code:"+690"},{label:"TO",value:"TO",code:"+676"},{label:"TT",value:"TT",code:"+1868"},{label:"TN",value:"TN",code:"+216"},{label:"TR",value:"TR",code:"+90"},{label:"TM",value:"TM",code:"+993"},{label:"TC",value:"TC",code:"+1649"},{label:"TV",value:"TV",code:"+688"},{label:"VI",value:"VI",code:"+1340"},{label:"UG",value:"UG",code:"+256"},{label:"UA",value:"UA",code:"+380"},{label:"AE",value:"AE",code:"+971"},{label:"GB",value:"GB",code:"+44"},{label:"US",value:"US",code:"+1"},{label:"UY",value:"UY",code:"+598"},{label:"UZ",value:"UZ",code:"+998"},{label:"VU",value:"VU",code:"+678"},{label:"VA",value:"VA",code:"+379"},{label:"VE",value:"VE",code:"+58"},{label:"VN",value:"VN",code:"+84"},{label:"WF",value:"WF",code:"+681"},{label:"EH",value:"EH",code:"+212"},{label:"YE",value:"YE",code:"+967"},{label:"ZM",value:"ZM",code:"+260"},{label:"ZW",value:"ZW",code:"+263"}];var Co=Object.defineProperty,_o=Object.getOwnPropertyDescriptor,oe=(a,e,r,n)=>{for(var t=n>1?void 0:n?_o(e,r):e,i=a.length-1,s;i>=0;i--)(s=a[i])&&(t=(n?s(e,r,t):s(t))||t);return n&&t&&Co(e,r,t),t};o.RtgInput=class extends h{constructor(){super(),this.disabled=!1,this.type="text",this.placeholder="",this.defaultValue="",this.value="",this.dataKey="",this.country="US",this.countryCode="+1",this.selectedLabel="US",this.value=this.value||this.defaultValue}handleCountryChange(e){const r=e.target,n=wr.find(t=>t.value===r.value);n&&(this.country=n.value,this.countryCode=n.code,this.selectedLabel=n.value,this.requestUpdate()),e.stopPropagation()}firstUpdated(e){this.removeParentAttributes();const r=["--input-border-radius","--input-padding"];this.applyCustomClass(r,"input","input-base"),this.type!=="file"&&this.defaultValue&&(this.value=this.defaultValue),this.observeStyleAndClassSync(this.inputElement)}handleInputChange(e){const r=e.target;r.type==="file"?this.value=r.files?r.files[0].name:"":this.value=r.value}handleFocus(){this.dispatchEvent(new CustomEvent("focus",{bubbles:!0,composed:!0,detail:{dataKey:this.dataKey}}))}getAttributesToExclude(){return["disabled","type","placeholder","value","data-testid","custom-class","data-key"]}getAttributesToRemoveFromParent(){return["class","style"]}createRenderRoot(){return this}render(){const e=this.getFilteredAttributes();return this.type==="tel"?d.html`
+  `;let St=nr;customElements.define("shadow-wrapper",St);class br extends Ln.AsyncDirective{constructor(){super(...arguments),this.prevData={}}render(e){return Mn.nothing}update(e,[r]){var n;this.element!==e.element&&(this.element=e.element),this.host=((n=e.options)===null||n===void 0?void 0:n.host)||this.element,this.apply(r),this.groom(r),this.prevData={...r}}apply(e){if(!e)return;const{prevData:r,element:n}=this;for(const t in e){const i=e[t];i!==r[t]&&(n[t]=i)}}groom(e){const{prevData:r,element:n}=this;if(r)for(const t in r)(!e||!(t in e)&&n[t]===r[t])&&(n[t]=void 0)}}_t.directive(br);class yr extends br{constructor(){super(...arguments),this.eventData={}}apply(e){if(e)for(const r in e){const n=e[r];n!==this.eventData[r]&&this.applyEvent(r,n)}}applyEvent(e,r){const{prevData:n,element:t}=this;this.eventData[e]=r,n[e]&&t.removeEventListener(e,this,r),t.addEventListener(e,this,r)}groom(e){const{prevData:r,element:n}=this;if(r)for(const t in r)(!e||!(t in e)&&n[t]===r[t])&&this.groomEvent(t,r[t])}groomEvent(e,r){const{element:n}=this;delete this.eventData[e],n.removeEventListener(e,this,r)}handleEvent(e){const r=this.eventData[e.type];typeof r=="function"?r.call(this.host,e):r.handleEvent(e)}disconnected(){const{eventData:e,element:r}=this;for(const n in e){const t=n.slice(1),i=e[n];r.removeEventListener(t,this,i)}}reconnected(){const{eventData:e,element:r}=this;for(const n in e){const t=n.slice(1),i=e[n];r.addEventListener(t,this,i)}}}_t.directive(yr);class wo extends yr{apply(e){if(!e)return;const{prevData:r,element:n}=this;for(const t in e){const i=e[t];if(i===r[t])continue;const s=t.slice(1);switch(t[0]){case"@":this.eventData[s]=i,this.applyEvent(s,i);break;case".":n[s]=i;break;case"?":i?n.setAttribute(s,""):n.removeAttribute(s);break;default:i!=null?n.setAttribute(t,String(i)):n.removeAttribute(t);break}}}groom(e){const{prevData:r,element:n}=this;if(r)for(const t in r){const i=t.slice(1);if(!e||!(t in e)&&n[i]===r[t])switch(t[0]){case"@":this.groomEvent(i,r[t]);break;case".":n[i]=void 0;break;case"?":n.removeAttribute(i);break;default:n.removeAttribute(t);break}}}}const V=_t.directive(wo),wr=[{label:"AF",value:"AF",code:"+93"},{label:"AL",value:"AL",code:"+355"},{label:"DZ",value:"DZ",code:"+213"},{label:"AS",value:"AS",code:"+1684"},{label:"AD",value:"AD",code:"+376"},{label:"AO",value:"AO",code:"+244"},{label:"AI",value:"AI",code:"+1264"},{label:"AG",value:"AG",code:"+1268"},{label:"AR",value:"AR",code:"+54"},{label:"AM",value:"AM",code:"+374"},{label:"AW",value:"AW",code:"+297"},{label:"AU",value:"AU",code:"+61"},{label:"AT",value:"AT",code:"+43"},{label:"AZ",value:"AZ",code:"+994"},{label:"BS",value:"BS",code:"+1242"},{label:"BH",value:"BH",code:"+973"},{label:"BD",value:"BD",code:"+880"},{label:"BB",value:"BB",code:"+1246"},{label:"BY",value:"BY",code:"+375"},{label:"BE",value:"BE",code:"+32"},{label:"BZ",value:"BZ",code:"+501"},{label:"BJ",value:"BJ",code:"+229"},{label:"BM",value:"BM",code:"+1441"},{label:"BT",value:"BT",code:"+975"},{label:"BO",value:"BO",code:"+591"},{label:"BA",value:"BA",code:"+387"},{label:"BW",value:"BW",code:"+267"},{label:"BR",value:"BR",code:"+55"},{label:"IO",value:"IO",code:"+246"},{label:"VG",value:"VG",code:"+1284"},{label:"BN",value:"BN",code:"+673"},{label:"BG",value:"BG",code:"+359"},{label:"BF",value:"BF",code:"+226"},{label:"BI",value:"BI",code:"+257"},{label:"KH",value:"KH",code:"+855"},{label:"CM",value:"CM",code:"+237"},{label:"CA",value:"CA",code:"+1"},{label:"CV",value:"CV",code:"+238"},{label:"KY",value:"KY",code:"+1345"},{label:"CF",value:"CF",code:"+236"},{label:"TD",value:"TD",code:"+235"},{label:"CL",value:"CL",code:"+56"},{label:"CN",value:"CN",code:"+86"},{label:"CX",value:"CX",code:"+61"},{label:"CC",value:"CC",code:"+61"},{label:"CO",value:"CO",code:"+57"},{label:"KM",value:"KM",code:"+269"},{label:"CK",value:"CK",code:"+682"},{label:"CR",value:"CR",code:"+506"},{label:"HR",value:"HR",code:"+385"},{label:"CU",value:"CU",code:"+53"},{label:"CW",value:"CW",code:"+599"},{label:"CY",value:"CY",code:"+357"},{label:"CZ",value:"CZ",code:"+420"},{label:"CD",value:"CD",code:"+243"},{label:"DK",value:"DK",code:"+45"},{label:"DJ",value:"DJ",code:"+253"},{label:"DM",value:"DM",code:"+1767"},{label:"DO",value:"DO",code:"+1809"},{label:"DO",value:"DO",code:"+1829"},{label:"DO",value:"DO",code:"+1849"},{label:"TL",value:"TL",code:"+670"},{label:"EC",value:"EC",code:"+593"},{label:"EG",value:"EG",code:"+20"},{label:"SV",value:"SV",code:"+503"},{label:"GQ",value:"GQ",code:"+240"},{label:"ER",value:"ER",code:"+291"},{label:"EE",value:"EE",code:"+372"},{label:"ET",value:"ET",code:"+251"},{label:"FK",value:"FK",code:"+500"},{label:"FO",value:"FO",code:"+298"},{label:"FJ",value:"FJ",code:"+679"},{label:"FI",value:"FI",code:"+358"},{label:"FR",value:"FR",code:"+33"},{label:"PF",value:"PF",code:"+689"},{label:"GA",value:"GA",code:"+241"},{label:"GM",value:"GM",code:"+220"},{label:"GE",value:"GE",code:"+995"},{label:"DE",value:"DE",code:"+49"},{label:"GH",value:"GH",code:"+233"},{label:"GI",value:"GI",code:"+350"},{label:"GR",value:"GR",code:"+30"},{label:"GL",value:"GL",code:"+299"},{label:"GD",value:"GD",code:"+1473"},{label:"GU",value:"GU",code:"+1671"},{label:"GT",value:"GT",code:"+502"},{label:"GG",value:"GG",code:"+441481"},{label:"GN",value:"GN",code:"+224"},{label:"GW",value:"GW",code:"+245"},{label:"GY",value:"GY",code:"+592"},{label:"HT",value:"HT",code:"+509"},{label:"HN",value:"HN",code:"+504"},{label:"HK",value:"HK",code:"+852"},{label:"HU",value:"HU",code:"+36"},{label:"IS",value:"IS",code:"+354"},{label:"IN",value:"IN",code:"+91"},{label:"ID",value:"ID",code:"+62"},{label:"IR",value:"IR",code:"+98"},{label:"IQ",value:"IQ",code:"+964"},{label:"IE",value:"IE",code:"+353"},{label:"IM",value:"IM",code:"+441624"},{label:"IL",value:"IL",code:"+972"},{label:"IT",value:"IT",code:"+39"},{label:"CI",value:"CI",code:"+225"},{label:"JM",value:"JM",code:"+1876"},{label:"JP",value:"JP",code:"+81"},{label:"JE",value:"JE",code:"+441534"},{label:"JO",value:"JO",code:"+962"},{label:"KZ",value:"KZ",code:"+7"},{label:"KE",value:"KE",code:"+254"},{label:"KI",value:"KI",code:"+686"},{label:"XK",value:"XK",code:"+383"},{label:"KW",value:"KW",code:"+965"},{label:"KG",value:"KG",code:"+996"},{label:"LA",value:"LA",code:"+856"},{label:"LV",value:"LV",code:"+371"},{label:"LB",value:"LB",code:"+961"},{label:"LS",value:"LS",code:"+266"},{label:"LR",value:"LR",code:"+231"},{label:"LY",value:"LY",code:"+218"},{label:"LI",value:"LI",code:"+423"},{label:"LT",value:"LT",code:"+370"},{label:"LU",value:"LU",code:"+352"},{label:"MO",value:"MO",code:"+853"},{label:"MK",value:"MK",code:"+389"},{label:"MG",value:"MG",code:"+261"},{label:"MW",value:"MW",code:"+265"},{label:"MY",value:"MY",code:"+60"},{label:"MV",value:"MV",code:"+960"},{label:"ML",value:"ML",code:"+223"},{label:"MT",value:"MT",code:"+356"},{label:"MH",value:"MH",code:"+692"},{label:"MR",value:"MR",code:"+222"},{label:"MU",value:"MU",code:"+230"},{label:"YT",value:"YT",code:"+262"},{label:"MX",value:"MX",code:"+52"},{label:"FM",value:"FM",code:"+691"},{label:"MD",value:"MD",code:"+373"},{label:"MC",value:"MC",code:"+377"},{label:"MN",value:"MN",code:"+976"},{label:"ME",value:"ME",code:"+382"},{label:"MS",value:"MS",code:"+1664"},{label:"MA",value:"MA",code:"+212"},{label:"MZ",value:"MZ",code:"+258"},{label:"MM",value:"MM",code:"+95"},{label:"NA",value:"NA",code:"+264"},{label:"NR",value:"NR",code:"+674"},{label:"NP",value:"NP",code:"+977"},{label:"NL",value:"NL",code:"+31"},{label:"AN",value:"AN",code:"+599"},{label:"NC",value:"NC",code:"+687"},{label:"NZ",value:"NZ",code:"+64"},{label:"NI",value:"NI",code:"+505"},{label:"NE",value:"NE",code:"+227"},{label:"NG",value:"NG",code:"+234"},{label:"NU",value:"NU",code:"+683"},{label:"KP",value:"KP",code:"+850"},{label:"MP",value:"MP",code:"+1670"},{label:"NO",value:"NO",code:"+47"},{label:"OM",value:"OM",code:"+968"},{label:"PK",value:"PK",code:"+92"},{label:"PW",value:"PW",code:"+680"},{label:"PS",value:"PS",code:"+970"},{label:"PA",value:"PA",code:"+507"},{label:"PG",value:"PG",code:"+675"},{label:"PY",value:"PY",code:"+595"},{label:"PE",value:"PE",code:"+51"},{label:"PH",value:"PH",code:"+63"},{label:"PN",value:"PN",code:"+64"},{label:"PL",value:"PL",code:"+48"},{label:"PT",value:"PT",code:"+351"},{label:"PR",value:"PR",code:"+1787"},{label:"PR",value:"PR",code:"+1939"},{label:"QA",value:"QA",code:"+974"},{label:"CG",value:"CG",code:"+242"},{label:"RE",value:"RE",code:"+262"},{label:"RO",value:"RO",code:"+40"},{label:"RU",value:"RU",code:"+7"},{label:"RW",value:"RW",code:"+250"},{label:"BL",value:"BL",code:"+590"},{label:"SH",value:"SH",code:"+290"},{label:"KN",value:"KN",code:"+1869"},{label:"LC",value:"LC",code:"+1758"},{label:"MF",value:"MF",code:"+590"},{label:"PM",value:"PM",code:"+508"},{label:"VC",value:"VC",code:"+1784"},{label:"WS",value:"WS",code:"+685"},{label:"SM",value:"SM",code:"+378"},{label:"ST",value:"ST",code:"+239"},{label:"SA",value:"SA",code:"+966"},{label:"SN",value:"SN",code:"+221"},{label:"RS",value:"RS",code:"+381"},{label:"SC",value:"SC",code:"+248"},{label:"SL",value:"SL",code:"+232"},{label:"SG",value:"SG",code:"+65"},{label:"SX",value:"SX",code:"+1721"},{label:"SK",value:"SK",code:"+421"},{label:"SI",value:"SI",code:"+386"},{label:"SB",value:"SB",code:"+677"},{label:"SO",value:"SO",code:"+252"},{label:"ZA",value:"ZA",code:"+27"},{label:"KR",value:"KR",code:"+82"},{label:"SS",value:"SS",code:"+211"},{label:"ES",value:"ES",code:"+34"},{label:"LK",value:"LK",code:"+94"},{label:"SD",value:"SD",code:"+249"},{label:"SR",value:"SR",code:"+597"},{label:"SJ",value:"SJ",code:"+47"},{label:"SZ",value:"SZ",code:"+268"},{label:"SE",value:"SE",code:"+46"},{label:"CH",value:"CH",code:"+41"},{label:"SY",value:"SY",code:"+963"},{label:"TW",value:"TW",code:"+886"},{label:"TJ",value:"TJ",code:"+992"},{label:"TZ",value:"TZ",code:"+255"},{label:"TH",value:"TH",code:"+66"},{label:"TG",value:"TG",code:"+228"},{label:"TK",value:"TK",code:"+690"},{label:"TO",value:"TO",code:"+676"},{label:"TT",value:"TT",code:"+1868"},{label:"TN",value:"TN",code:"+216"},{label:"TR",value:"TR",code:"+90"},{label:"TM",value:"TM",code:"+993"},{label:"TC",value:"TC",code:"+1649"},{label:"TV",value:"TV",code:"+688"},{label:"VI",value:"VI",code:"+1340"},{label:"UG",value:"UG",code:"+256"},{label:"UA",value:"UA",code:"+380"},{label:"AE",value:"AE",code:"+971"},{label:"GB",value:"GB",code:"+44"},{label:"US",value:"US",code:"+1"},{label:"UY",value:"UY",code:"+598"},{label:"UZ",value:"UZ",code:"+998"},{label:"VU",value:"VU",code:"+678"},{label:"VA",value:"VA",code:"+379"},{label:"VE",value:"VE",code:"+58"},{label:"VN",value:"VN",code:"+84"},{label:"WF",value:"WF",code:"+681"},{label:"EH",value:"EH",code:"+212"},{label:"YE",value:"YE",code:"+967"},{label:"ZM",value:"ZM",code:"+260"},{label:"ZW",value:"ZW",code:"+263"}];var Co=Object.defineProperty,_o=Object.getOwnPropertyDescriptor,oe=(a,e,r,n)=>{for(var t=n>1?void 0:n?_o(e,r):e,i=a.length-1,s;i>=0;i--)(s=a[i])&&(t=(n?s(e,r,t):s(t))||t);return n&&t&&Co(e,r,t),t};o.RtgInput=class extends h{constructor(){super(),this.disabled=!1,this.type="text",this.placeholder="",this.defaultValue="",this.value="",this.dataKey="",this.country="US",this.countryCode="+1",this.selectedLabel="US",this.value=this.value||this.defaultValue}handleCountryChange(e){const r=e.target,n=wr.find(t=>t.value===r.value);n&&(this.country=n.value,this.countryCode=n.code,this.selectedLabel=n.label,this.requestUpdate(),this.dispatchInputAndChangeEvents()),e.stopPropagation()}firstUpdated(e){this.removeParentAttributes();const r=["--input-border-radius","--input-padding"];this.applyCustomClass(r,"input","input-base"),this.type!=="file"&&this.defaultValue&&(this.value=this.defaultValue),this.observeStyleAndClassSync(this.inputElement)}handleInputChange(e){const r=e.target;r.type==="file"?this.value=r.files?r.files[0].name:"":this.value=r.value,this.dispatchInputAndChangeEvents()}dispatchInputAndChangeEvents(){const e=this.type==="tel"?`${this.countryCode}${this.value}`:this.value;this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:e,rawValue:this.value,code:this.countryCode,dataKey:this.dataKey}})),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:e,rawValue:this.value,code:this.countryCode,dataKey:this.dataKey}}))}handleFocus(){this.dispatchEvent(new CustomEvent("focus",{bubbles:!0,composed:!0,detail:{dataKey:this.dataKey}}))}getAttributesToExclude(){return["disabled","type","placeholder","value","data-testid","custom-class","data-key"]}getAttributesToRemoveFromParent(){return["class","style"]}createRenderRoot(){return this}render(){const e=this.getFilteredAttributes();return this.type==="tel"?d.html`
         <div
-          class="${p("rtg-flex rtg-items-center rtg-border rtg-border-input rtg-rounded-md rtg-px-3 rtg-py-1",this.className)}"
+          class="${p("rtg-flex rtg-items-center rtg-border rtg-border-input rtg-rounded-md rtg-px-3 rtg-py-1 rtg-bg-background rtg-text-sm rtg-ring-offset-background rtg-transition-colors focus-within:rtg-outline-none focus-within:rtg-ring-2 focus-within:rtg-ring-ring focus-within:rtg-ring-offset-2",this.customClass)}"
         >
           <select
-            class="${p("rtg-w-[40px] rtg-text-sm rtg-outline-none rtg-bg-transparent",this.className)}"
+            class="rtg-w-[40px] rtg-bg-transparent rtg-text-sm rtg-outline-none"
             @change=${this.handleCountryChange}
             .value=${this.country}
           >
-            ${wr.map(r=>d.html`<option
-                value=${r.value}
-                ?selected=${this.country===r.value}
-              >
-                ${this.country===r.value?this.selectedLabel:`${r.label} ${r.code}`}
-              </option>`)}
+            ${wr.map(r=>d.html`
+                <option value=${r.value}>${r.label} ${r.code}</option>
+              `)}
           </select>
-          <span class="rtg-text-sm">${this.countryCode}</span>
+          <span class="rtg-ml-2">${this.countryCode}</span>
           <input
             part="input"
             type="tel"
-            class="${p("rtg-flex rtg-bg-transparent rtg-text-sm rtg-px-3 rtg-py-[3px] focus-visible:rtg-outline-none disabled:rtg-opacity-50 input-base",this.className)}"
+            class="input-base rtg-flex-1 rtg-bg-transparent rtg-px-3 rtg-py-[3px] rtg-text-sm focus-visible:rtg-outline-none disabled:rtg-opacity-50"
             placeholder=${this.placeholder}
             .value=${this.value}
-            @change="${this.handleInputChange}"
+            @input=${this.handleInputChange}
+            @change=${this.handleInputChange}
             @focus=${this.handleFocus}
             ?disabled=${this.disabled}
             ${V(e)}
@@ -2895,8 +2893,9 @@ body {
         placeholder="${this.placeholder}"
         ?disabled=${this.disabled}
         .value=${this.type!=="file"?this.value:""}
-        @change="${this.handleInputChange}"
-        @focus="${this.handleFocus}"
+        @input=${this.handleInputChange}
+        @change=${this.handleInputChange}
+        @focus=${this.handleFocus}
         ${V(e)}
         class="${p(qn,this.customClass)}"
       />
@@ -4906,13 +4905,13 @@ body {
       </div>
     `}},pn([l.query("[data-radix-scroll-area-viewport]")],o.RtgScrollArea.prototype,"viewportEl",2),o.RtgScrollArea=pn([l.customElement("rtg-scroll-area")],o.RtgScrollArea);var sg=Object.defineProperty,lg=Object.getOwnPropertyDescriptor,hn=(a,e,r,n)=>{for(var t=n>1?void 0:n?lg(e,r):e,i=a.length-1,s;i>=0;i--)(s=a[i])&&(t=(n?s(e,r,t):s(t))||t);return n&&t&&sg(e,r,t),t};o.LightSampleDemo=class extends h{constructor(){super(),this.btnClass="border: 1px solid #DC2626;"}getAttributesToExclude(){return["disabled","type","placeholder","value","data-testid"]}createRenderRoot(){return this}render(){return d.html`
       <div class="sb-flex sb-flex-col sb-gap-4">
-        <label class="sb-font-semibold">Custom button style:</label>
+        <!-- <label class="sb-font-semibold">Custom button style:</label>
         <textarea
           class="sb-border sb-p-2"
           .value=${this.btnClass}
           @input=${e=>this.btnClass=e.target.value}
         ></textarea>
-        <rtg-alert style=${this.btnClass} message=${"hey"}></rtg-alert>
+        <rtg-alert style=${this.btnClass} message=${"hey"}></rtg-alert> -->
       </div>
     `}},hn([l.state()],o.LightSampleDemo.prototype,"btnClass",2),o.LightSampleDemo=hn([l.customElement("light-sample-demo")],o.LightSampleDemo);/**
  * @license

package/dist/src/components/ui/input/input.d.ts

@@ -16,7 +16,8 @@ export declare class RtgInput extends BaseElement {
     selectedLabel: string;
     private handleCountryChange;
     protected firstUpdated(_changedProperties: PropertyValues): void;
-    handleInputChange(event: Event): void;
+    private handleInputChange;
+    private dispatchInputAndChangeEvents;
     handleFocus(): void;
     protected getAttributesToExclude(): string[];
     protected getAttributesToRemoveFromParent(): string[];

package/package.json

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