@revotech-group/revotech-ui-kit 0.1.0 → 0.1.1

package/dist/library.css

@@ -1771,10 +1771,6 @@ body {
 .rtg-no-autofill-bg:-webkit-autofill:active {
   -webkit-transition: background-color 5000s ease-in-out;
   transition: background-color 5000s ease-in-out;
-  box-shadow: 0 0 0 1000px transparent inset !important;
-  -webkit-text-fill-color: inherit !important;
-  -webkit-transition: background-color 5000s ease-in-out 0s !important;
-  transition: background-color 5000s ease-in-out 0s !important;
 }
 
 @media (max-width: 640px) {

package/dist/rtg-ui-kit.js

@@ -12771,18 +12771,19 @@ let it = class extends h {
     }
   }
   handleInputChange(e) {
+    var s;
     const t = e.target;
     if (new RegExp(/^\d+$/).test(t.value)) {
-      const s = this._inputOtp;
-      if (s) {
-        let r = s.inputes.findIndex(
-          (n) => n.index === this.index
+      const r = this._inputOtp;
+      if (r) {
+        let n = r.inputes.findIndex(
+          (i) => i.index === this.index
         );
-        s.inputes[r] = {
-          ...s.inputes[r],
+        r.inputes[n] = {
+          ...r.inputes[n],
           value: t.value,
           isSelected: !1
-        }, r + 1 < s.inputes.length && s.raiseEvent(r + 1, "changes");
+        }, (s = r.checkIfCompleteAndSubmit) == null || s.call(r), n + 1 < r.inputes.length && r.raiseEvent(n + 1, "changes");
       }
     } else
       t.value = "";
@@ -13017,6 +13018,16 @@ let at = class extends h {
   updated(e) {
     e.has("variant") && this.applyVariantStyles();
   }
+  checkIfCompleteAndSubmit() {
+    if (this.inputes.every((t) => t.value !== "")) {
+      const t = this.inputes.map((s) => s.value).join(""), o = new CustomEvent("otp-complete", {
+        detail: { value: t },
+        bubbles: !0,
+        composed: !0
+      });
+      this.dispatchEvent(o);
+    }
+  }
   applyVariantStyles() {
     const e = this.querySelectorAll("rtg-input-otp-group");
     switch (e.forEach((t) => {
@@ -13025,11 +13036,6 @@ let at = class extends h {
       case "with-spacing":
         e.forEach((t) => t.classList.add("rtg-gap-2"));
         break;
-      case "with-separator":
-        break;
-      case "combined":
-        e.forEach((t) => t.classList.add("rtg-gap-2"));
-        break;
     }
   }
   render() {

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

@@ -4423,7 +4423,7 @@ body {
         class="${p(cd,this.className)}"
         ?disable="${this.disabled}"
       ></div>
-    `}},Pe([l.property({type:Boolean})],o.ToggleGroup.prototype,"disabled",2),Pe([l.property({type:String})],o.ToggleGroup.prototype,"type",2),Pe([l.property({attribute:!0,type:Boolean,reflect:!0})],o.ToggleGroup.prototype,"required",2),Pe([l.property({attribute:!0,type:String,reflect:!0})],o.ToggleGroup.prototype,"variant",2),Pe([l.property({attribute:!0,type:String})],o.ToggleGroup.prototype,"size",2),Pe([l.property({type:Array})],o.ToggleGroup.prototype,"selectedItems",2),o.ToggleGroup=Pe([l.customElement("rtg-toggle-group")],o.ToggleGroup);var hd=Object.defineProperty,md=Object.getOwnPropertyDescriptor,Fe=(i,e,r,n)=>{for(var t=n>1?void 0:n?md(e,r):e,a=i.length-1,s;a>=0;a--)(s=i[a])&&(t=(n?s(e,r,t):s(t))||t);return n&&t&&hd(e,r,t),t};o.InputOtpSlot=class extends h{constructor(){super(...arguments),this.click=()=>{},this.index=0,this.isFirst=!1,this.isLast=!1,this.value=""}get _inputOtp(){let e=this.parentElement;for(;e&&!(e instanceof o.InputOtp);)e=e.parentElement;return e}firstUpdated(e){const r=this._inputOtp;r&&(r.inputes.push({index:r.inputes.length,value:"",isSelected:!1,userIndex:this.index}),r.addEventListener("selected-input",n=>{const t=this.querySelector(`input[name="input-${n.detail.selectedItems}"]`);t&&(t.focus(),n.detail.eventType==="changes"&&(t.value=""))}))}disconnectedCallback(){super.disconnectedCallback(),this._inputOtp&&this._inputOtp.removeEventListener("selected-input",()=>{})}getAttributesToExclude(){return[]}handleFocus(e){const r=this._inputOtp;if(!r)return;const n=r.inputes.findIndex(a=>a.value===""),t=this.index;if(n!==-1&&t>n){e.preventDefault(),e.stopImmediatePropagation();const a=n;r.raiseEvent(a,"focus")}}handleInputChange(e){const r=e.target;if(new RegExp(/^\d+$/).test(r.value)){const t=this._inputOtp;if(t){let a=t.inputes.findIndex(s=>s.index===this.index);t.inputes[a]={...t.inputes[a],value:r.value,isSelected:!1},a+1<t.inputes.length&&t.raiseEvent(a+1,"changes")}}else r.value=""}handleKeyDown(e){const r=e.target,n=this._inputOtp;if(!n)return;const t=n.inputes.findIndex(a=>a.index===this.index);switch(e.key){case"Backspace":{e.preventDefault();const a=r.value==="",s=n.inputes.find(w=>w.value===""),m=s!==void 0?n.inputes.indexOf(s):n.inputes.length;if(a&&t>=m){t>0&&n.raiseEvent(t-1,"focus");return}n.inputes[t].value="",r.value="";for(let w=t;w<n.inputes.length-1;w++){n.inputes[w].value=n.inputes[w+1].value;const x=n.querySelector(`input[name="input-${n.inputes[w].index}"]`);x&&(x.value=n.inputes[w].value)}const C=n.inputes[n.inputes.length-1];C.value="";const b=n.querySelector(`input[name="input-${C.index}"]`);b&&(b.value=""),n.raiseEvent(t,"focus");break}case"ArrowLeft":e.preventDefault(),t>0&&n.raiseEvent(t-1,"focus");break;case"ArrowRight":e.preventDefault(),t<n.maxLength-1&&n.raiseEvent(t+1,"focus");break}}handlePaste(e){var C;e.preventDefault();const r=this._inputOtp;if(!r)return;const t=(((C=e.clipboardData)==null?void 0:C.getData("text"))??"").replace(/\D/g,"").split("").slice(0);if(t.length===0)return;const a=r.inputes.findIndex(b=>b.index===this.index),s=r.maxLength-a;t.splice(s);for(let b=0;b<t.length;b++){const w=a+b;if(w>=r.maxLength)break;r.inputes[w].value=t[b];const x=r.querySelector(`input[name="input-${w}"]`);x&&(x.value=t[b])}const m=a+t.length;m<r.maxLength&&r.raiseEvent(m,"focus")}createRenderRoot(){return this}render(){const e=this._inputOtp,r=(e==null?void 0:e.variant)==="with-spacing",n=(e==null?void 0:e.variant)==="combined",t={"rtg-bg-transparent":!0,"rtg-h-[36px]":!0,"rtg-w-[36px]":!0,"rtg-text-center rtg-relative rtg-flex rtg-h-10 rtg-w-10 rtg-items-center rtg-justify-center rtg-border-y rtg-border-r rtg-border-input rtg-text-sm rtg-transition-all":!0,"first:rtg-rounded-l-md first:rtg-border-l":this.isFirst,"rtg-overflow-hidden":!0,"focus:rtg-border focus:rtg-border-input focus:rtg-border-[3px]":!0,"rtg-border":r||n,"rtg-border-t":!r||n,"rtg-border-b":!r||n,"rtg-border-r":!r||n,"rtg-border-l":this.isFirst||r||n,"first:rtg-rounded-l-md":!0,"last:rtg-rounded-r-md":!0,"rtg-rounded-none":(e==null?void 0:e.variant)==="with-separator"||(e==null?void 0:e.variant)==="combined","rtg-rounded-l-md":this.isFirst&&((e==null?void 0:e.variant)==="default"||(e==null?void 0:e.variant)==="with-spacing"),"rtg-rounded-r-md":this.isLast&&((e==null?void 0:e.variant)==="default"||(e==null?void 0:e.variant)==="with-spacing")};return d.html`
+    `}},Pe([l.property({type:Boolean})],o.ToggleGroup.prototype,"disabled",2),Pe([l.property({type:String})],o.ToggleGroup.prototype,"type",2),Pe([l.property({attribute:!0,type:Boolean,reflect:!0})],o.ToggleGroup.prototype,"required",2),Pe([l.property({attribute:!0,type:String,reflect:!0})],o.ToggleGroup.prototype,"variant",2),Pe([l.property({attribute:!0,type:String})],o.ToggleGroup.prototype,"size",2),Pe([l.property({type:Array})],o.ToggleGroup.prototype,"selectedItems",2),o.ToggleGroup=Pe([l.customElement("rtg-toggle-group")],o.ToggleGroup);var hd=Object.defineProperty,md=Object.getOwnPropertyDescriptor,Fe=(i,e,r,n)=>{for(var t=n>1?void 0:n?md(e,r):e,a=i.length-1,s;a>=0;a--)(s=i[a])&&(t=(n?s(e,r,t):s(t))||t);return n&&t&&hd(e,r,t),t};o.InputOtpSlot=class extends h{constructor(){super(...arguments),this.click=()=>{},this.index=0,this.isFirst=!1,this.isLast=!1,this.value=""}get _inputOtp(){let e=this.parentElement;for(;e&&!(e instanceof o.InputOtp);)e=e.parentElement;return e}firstUpdated(e){const r=this._inputOtp;r&&(r.inputes.push({index:r.inputes.length,value:"",isSelected:!1,userIndex:this.index}),r.addEventListener("selected-input",n=>{const t=this.querySelector(`input[name="input-${n.detail.selectedItems}"]`);t&&(t.focus(),n.detail.eventType==="changes"&&(t.value=""))}))}disconnectedCallback(){super.disconnectedCallback(),this._inputOtp&&this._inputOtp.removeEventListener("selected-input",()=>{})}getAttributesToExclude(){return[]}handleFocus(e){const r=this._inputOtp;if(!r)return;const n=r.inputes.findIndex(a=>a.value===""),t=this.index;if(n!==-1&&t>n){e.preventDefault(),e.stopImmediatePropagation();const a=n;r.raiseEvent(a,"focus")}}handleInputChange(e){var t;const r=e.target;if(new RegExp(/^\d+$/).test(r.value)){const a=this._inputOtp;if(a){let s=a.inputes.findIndex(m=>m.index===this.index);a.inputes[s]={...a.inputes[s],value:r.value,isSelected:!1},(t=a.checkIfCompleteAndSubmit)==null||t.call(a),s+1<a.inputes.length&&a.raiseEvent(s+1,"changes")}}else r.value=""}handleKeyDown(e){const r=e.target,n=this._inputOtp;if(!n)return;const t=n.inputes.findIndex(a=>a.index===this.index);switch(e.key){case"Backspace":{e.preventDefault();const a=r.value==="",s=n.inputes.find(w=>w.value===""),m=s!==void 0?n.inputes.indexOf(s):n.inputes.length;if(a&&t>=m){t>0&&n.raiseEvent(t-1,"focus");return}n.inputes[t].value="",r.value="";for(let w=t;w<n.inputes.length-1;w++){n.inputes[w].value=n.inputes[w+1].value;const x=n.querySelector(`input[name="input-${n.inputes[w].index}"]`);x&&(x.value=n.inputes[w].value)}const C=n.inputes[n.inputes.length-1];C.value="";const b=n.querySelector(`input[name="input-${C.index}"]`);b&&(b.value=""),n.raiseEvent(t,"focus");break}case"ArrowLeft":e.preventDefault(),t>0&&n.raiseEvent(t-1,"focus");break;case"ArrowRight":e.preventDefault(),t<n.maxLength-1&&n.raiseEvent(t+1,"focus");break}}handlePaste(e){var C;e.preventDefault();const r=this._inputOtp;if(!r)return;const t=(((C=e.clipboardData)==null?void 0:C.getData("text"))??"").replace(/\D/g,"").split("").slice(0);if(t.length===0)return;const a=r.inputes.findIndex(b=>b.index===this.index),s=r.maxLength-a;t.splice(s);for(let b=0;b<t.length;b++){const w=a+b;if(w>=r.maxLength)break;r.inputes[w].value=t[b];const x=r.querySelector(`input[name="input-${w}"]`);x&&(x.value=t[b])}const m=a+t.length;m<r.maxLength&&r.raiseEvent(m,"focus")}createRenderRoot(){return this}render(){const e=this._inputOtp,r=(e==null?void 0:e.variant)==="with-spacing",n=(e==null?void 0:e.variant)==="combined",t={"rtg-bg-transparent":!0,"rtg-h-[36px]":!0,"rtg-w-[36px]":!0,"rtg-text-center rtg-relative rtg-flex rtg-h-10 rtg-w-10 rtg-items-center rtg-justify-center rtg-border-y rtg-border-r rtg-border-input rtg-text-sm rtg-transition-all":!0,"first:rtg-rounded-l-md first:rtg-border-l":this.isFirst,"rtg-overflow-hidden":!0,"focus:rtg-border focus:rtg-border-input focus:rtg-border-[3px]":!0,"rtg-border":r||n,"rtg-border-t":!r||n,"rtg-border-b":!r||n,"rtg-border-r":!r||n,"rtg-border-l":this.isFirst||r||n,"first:rtg-rounded-l-md":!0,"last:rtg-rounded-r-md":!0,"rtg-rounded-none":(e==null?void 0:e.variant)==="with-separator"||(e==null?void 0:e.variant)==="combined","rtg-rounded-l-md":this.isFirst&&((e==null?void 0:e.variant)==="default"||(e==null?void 0:e.variant)==="with-spacing"),"rtg-rounded-r-md":this.isLast&&((e==null?void 0:e.variant)==="default"||(e==null?void 0:e.variant)==="with-spacing")};return d.html`
       <input
         part="input-otp-slot"
         auto-complete="one-time-code"
@@ -4452,7 +4452,7 @@ body {
       >
         ${fi()}
       </div>
-    `}},sn([l.property({type:Number})],o.InputOtpSeparator.prototype,"index",2),o.InputOtpSeparator=sn([l.customElement("rtg-input-otp-separator")],o.InputOtpSeparator);var wd=Object.defineProperty,Cd=Object.getOwnPropertyDescriptor,rt=(i,e,r,n)=>{for(var t=n>1?void 0:n?Cd(e,r):e,a=i.length-1,s;a>=0;a--)(s=i[a])&&(t=(n?s(e,r,t):s(t))||t);return n&&t&&wd(e,r,t),t};o.InputOtp=class extends h{constructor(){super(),this.maxLength=6,this.onChange=()=>{},this.pin=new Array(this.maxLength),this.variant="default",this.inputes=[]}connectedCallback(){super.connectedCallback()}getAttributesToExclude(){return[]}get _containerElement(){return this.querySelector("div[part=input-otp]")}raiseEvent(e,r="changes",n=1/0){const t=new CustomEvent("selected-input",{bubbles:!0,composed:!0,detail:{selectedItems:e,eventType:r,customIndex:n}});this.dispatchEvent(t)}createRenderRoot(){return this}firstUpdated(e){this.moveLightDomChildrenInto(this._containerElement),this.applyVariantStyles()}updated(e){e.has("variant")&&this.applyVariantStyles()}applyVariantStyles(){const e=this.querySelectorAll("rtg-input-otp-group");switch(e.forEach(r=>{r.className="",r.classList.add("rtg-flex","rtg-items-center")}),this.variant){case"with-spacing":e.forEach(r=>r.classList.add("rtg-gap-2"));break;case"with-separator":break;case"combined":e.forEach(r=>r.classList.add("rtg-gap-2"));break}}render(){return d.html`
+    `}},sn([l.property({type:Number})],o.InputOtpSeparator.prototype,"index",2),o.InputOtpSeparator=sn([l.customElement("rtg-input-otp-separator")],o.InputOtpSeparator);var wd=Object.defineProperty,Cd=Object.getOwnPropertyDescriptor,rt=(i,e,r,n)=>{for(var t=n>1?void 0:n?Cd(e,r):e,a=i.length-1,s;a>=0;a--)(s=i[a])&&(t=(n?s(e,r,t):s(t))||t);return n&&t&&wd(e,r,t),t};o.InputOtp=class extends h{constructor(){super(),this.maxLength=6,this.onChange=()=>{},this.pin=new Array(this.maxLength),this.variant="default",this.inputes=[]}connectedCallback(){super.connectedCallback()}getAttributesToExclude(){return[]}get _containerElement(){return this.querySelector("div[part=input-otp]")}raiseEvent(e,r="changes",n=1/0){const t=new CustomEvent("selected-input",{bubbles:!0,composed:!0,detail:{selectedItems:e,eventType:r,customIndex:n}});this.dispatchEvent(t)}createRenderRoot(){return this}firstUpdated(e){this.moveLightDomChildrenInto(this._containerElement),this.applyVariantStyles()}updated(e){e.has("variant")&&this.applyVariantStyles()}checkIfCompleteAndSubmit(){if(this.inputes.every(r=>r.value!=="")){const r=this.inputes.map(t=>t.value).join(""),n=new CustomEvent("otp-complete",{detail:{value:r},bubbles:!0,composed:!0});this.dispatchEvent(n)}}applyVariantStyles(){const e=this.querySelectorAll("rtg-input-otp-group");switch(e.forEach(r=>{r.className="",r.classList.add("rtg-flex","rtg-items-center")}),this.variant){case"with-spacing":e.forEach(r=>r.classList.add("rtg-gap-2"));break}}render(){return d.html`
       <div
         part="input-otp"
         class="${p("rtg-flex rtg-items-center",this.className)}"

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

@@ -23,6 +23,7 @@ declare class InputOtp extends BaseElement {
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     protected firstUpdated(_changedProperties: PropertyValues): void;
     protected updated(changedProperties: PropertyValues): void;
+    checkIfCompleteAndSubmit(): void;
     private applyVariantStyles;
     protected render(): import('lit').TemplateResult<1>;
 }

package/package.json

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