@revotech-group/revotech-ui-kit 0.1.22 → 0.1.24

package/dist/library.css

@@ -1719,6 +1719,7 @@ body {
   --radius: 0.5rem;
   --custom-outline: 0 0% 64% / 50%;
   --success: 137 82% 30%;
+  --divider: 0 0% 85%;
 }
 
 [data-theme='dark'] {
@@ -1757,6 +1758,7 @@ body {
   --radius: 0.5rem;
   --custom-outline: 0 0% 45% / 50%;
   --success: 133 33% 57%;
+  --divider: 0 0% 42%;
 }
 
 [data-theme='light'] .rtg-no-autofill-bg:-webkit-autofill {

package/dist/rtg-ui-kit.js

@@ -12747,7 +12747,7 @@ let it = class extends h {
       value: "",
       isSelected: !1,
       userIndex: s
-    }), t.addEventListener("selected-input", (i) => {
+    }), t.addEventListener("focus", (i) => {
       const v = this.querySelector(
         `input[name="input-${i.detail.selectedItems}"]`
       );
@@ -12755,7 +12755,7 @@ let it = class extends h {
     });
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._inputOtp && this._inputOtp.removeEventListener("selected-input", () => {
+    super.disconnectedCallback(), this._inputOtp && this._inputOtp.removeEventListener("focus", () => {
     });
   }
   getAttributesToExclude() {
@@ -13001,7 +13001,7 @@ let at = class extends h {
     return this.querySelector("div[part=input-otp]");
   }
   raiseEvent(e, t = "changes", o = 1 / 0) {
-    const s = new CustomEvent("selected-input", {
+    const s = new CustomEvent("focus", {
       bubbles: !0,
       composed: !0,
       detail: {

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;if(!r)return;const n=r.variant,t=this.index,a=r.maxLength;let s=!1;n==="with-separator"?s=t%2===1||t===a-1:n==="simple"?s=t%3===2||t===a-1:s=t===a-1,this.isLast=s,r.inputes.push({index:r.inputes.length,value:"",isSelected:!1,userIndex:t}),r.addEventListener("selected-input",m=>{const w=this.querySelector(`input[name="input-${m.detail.selectedItems}"]`);w&&(w.focus(),m.detail.eventType==="changes"&&(w.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")}else r.raiseEvent(t,"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(C=>C.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 C=t;C<n.inputes.length-1;C++){n.inputes[C].value=n.inputes[C+1].value;const x=n.querySelector(`input[name="input-${n.inputes[C].index}"]`);x&&(x.value=n.inputes[C].value)}const w=n.inputes[n.inputes.length-1];w.value="";const b=n.querySelector(`input[name="input-${w.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 w;e.preventDefault();const r=this._inputOtp;if(!r)return;const t=(((w=e.clipboardData)==null?void 0:w.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 C=a+b;if(C>=r.maxLength)break;r.inputes[C].value=t[b];const x=r.querySelector(`input[name="input-${C}"]`);x&&(x.value=t[b])}const m=a+t.length;m<r.maxLength&&r.raiseEvent(m,"focus")}createRenderRoot(){return this}render(){var m;const e=((m=this._inputOtp)==null?void 0:m.variant)??"digits-only",r=this.isFirst,n=this.isLast,t=e==="with-spacing",a=e==="with-separator",s={"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":t||a,"rtg-border-t":!t||a,"rtg-border-b":!t||a,"rtg-border-r":!t||a,"rtg-border-l":this.isFirst||t||a,"first:rtg-rounded-l-md":e==="with-spacing"?!0:r,"last:rtg-rounded-r-md":e==="with-spacing"?!0:n,"rtg-rounded-none":!r&&!n&&(e==="digits-only"||e==="simple"||e==="with-separator")};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;if(!r)return;const n=r.variant,t=this.index,a=r.maxLength;let s=!1;n==="with-separator"?s=t%2===1||t===a-1:n==="simple"?s=t%3===2||t===a-1:s=t===a-1,this.isLast=s,r.inputes.push({index:r.inputes.length,value:"",isSelected:!1,userIndex:t}),r.addEventListener("focus",m=>{const w=this.querySelector(`input[name="input-${m.detail.selectedItems}"]`);w&&(w.focus(),m.detail.eventType==="changes"&&(w.value=""))})}disconnectedCallback(){super.disconnectedCallback(),this._inputOtp&&this._inputOtp.removeEventListener("focus",()=>{})}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")}else r.raiseEvent(t,"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(C=>C.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 C=t;C<n.inputes.length-1;C++){n.inputes[C].value=n.inputes[C+1].value;const x=n.querySelector(`input[name="input-${n.inputes[C].index}"]`);x&&(x.value=n.inputes[C].value)}const w=n.inputes[n.inputes.length-1];w.value="";const b=n.querySelector(`input[name="input-${w.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 w;e.preventDefault();const r=this._inputOtp;if(!r)return;const t=(((w=e.clipboardData)==null?void 0:w.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 C=a+b;if(C>=r.maxLength)break;r.inputes[C].value=t[b];const x=r.querySelector(`input[name="input-${C}"]`);x&&(x.value=t[b])}const m=a+t.length;m<r.maxLength&&r.raiseEvent(m,"focus")}createRenderRoot(){return this}render(){var m;const e=((m=this._inputOtp)==null?void 0:m.variant)??"digits-only",r=this.isFirst,n=this.isLast,t=e==="with-spacing",a=e==="with-separator",s={"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":t||a,"rtg-border-t":!t||a,"rtg-border-b":!t||a,"rtg-border-r":!t||a,"rtg-border-l":this.isFirst||t||a,"first:rtg-rounded-l-md":e==="with-spacing"?!0:r,"last:rtg-rounded-r-md":e==="with-spacing"?!0:n,"rtg-rounded-none":!r&&!n&&(e==="digits-only"||e==="simple"||e==="with-separator")};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="digits-only",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`
+    `}},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="digits-only",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("focus",{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/package.json

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