@callpromn/rtc-kit 0.0.2

package/dist/index.mjs

@@ -0,0 +1,426 @@
+var o=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});}static get observedAttributes(){return ["to-phone-number","disabled","style","theme"]}attributeChangedCallback(r,t,e){r==="disabled"&&this.updateDisabledState(),r==="style"&&this.updateStyle(),r==="theme"&&this.render();}connectedCallback(){this.render();}disconnectedCallback(){}updateDisabledState(){var t;let r=(t=this.shadowRoot)==null?void 0:t.querySelector(".rtc-call-btn");r&&(r.disabled=this.hasAttribute("disabled"));}updateStyle(){var t;let r=this.getAttribute("style");if(r){let e=(t=this.shadowRoot)==null?void 0:t.querySelector(".rtc-call-btn");e&&(e.style.cssText=r);}}render(){if(!this.shadowRoot)return;let t=(this.getAttribute("theme")||"dark")==="dark";this.shadowRoot.innerHTML=`
+      <style>
+        .rtc-call-btn {
+          background-color: #03c400;
+          color: white;
+          border: none;
+          border-radius: 50%;
+          padding: 20px;
+          cursor: pointer;
+          font-size: 16px;
+          transition: all 0.3s ease;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          box-shadow: ${t?"0 4px 15px rgba(3, 196, 0, 0.3)":"0 4px 15px rgba(3, 196, 0, 0.2)"};
+        }
+
+        .rtc-call-btn:hover {
+          background-color: #03d100;
+          transform: translateY(-1px);
+          box-shadow: ${t?"0 6px 20px rgba(3, 196, 0, 0.4)":"0 6px 20px rgba(3, 196, 0, 0.3)"};
+        }
+
+        .rtc-call-btn:active {
+          transform: translateY(1px);
+          box-shadow: ${t?"0 2px 10px rgba(3, 196, 0, 0.3)":"0 2px 10px rgba(3, 196, 0, 0.2)"};
+        }
+
+        .rtc-call-btn:disabled {
+          background-color: ${t?"#6c757d":"#adb5bd"};
+          cursor: not-allowed;
+          box-shadow: none;
+        }
+
+        .phone-icon {
+          width: 16px;
+          height: 16px;
+          fill: none;
+          stroke: currentColor;
+          stroke-width: 2;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+      </style>
+
+      <button class="rtc-call-btn" part="call-button" aria-label="Call button">
+        <svg class="phone-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+        </svg>
+      </button>
+    `,this.updateDisabledState(),this.updateStyle();}};customElements.define("call-button",o);var p=o;var i=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});}static get observedAttributes(){return ["disabled","style"]}attributeChangedCallback(r,t,e){r==="disabled"&&this.updateDisabledState(),r==="style"&&this.updateStyle();}connectedCallback(){this.render();}disconnectedCallback(){}updateDisabledState(){var t;let r=(t=this.shadowRoot)==null?void 0:t.querySelector(".rtc-decline-btn");r&&(r.disabled=this.hasAttribute("disabled"));}updateStyle(){var t;let r=this.getAttribute("style");if(r){let e=(t=this.shadowRoot)==null?void 0:t.querySelector(".rtc-decline-btn");e&&(e.style.cssText=e.style.cssText+r);}}render(){this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        .rtc-decline-btn {
+          background-color: #dc3545;
+          color: white;
+          border: none;
+          border-radius: 50%;
+          padding: 20px;
+          cursor: pointer;
+          font-size: 16px;
+          transition: background-color 0.3s ease;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+        }
+
+        .rtc-decline-btn:hover {
+          background-color: #c82333;
+        }
+
+        .rtc-decline-btn:active {
+          transform: translateY(1px);
+        }
+
+        .rtc-decline-btn:disabled {
+          background-color: #6c757d;
+          cursor: not-allowed;
+        }
+
+        .phone-icon {
+          width: 16px;
+          height: 16px;
+          fill: none;
+          stroke: currentColor;
+          stroke-width: 2;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+      </style>
+
+      <button class="rtc-decline-btn" part="decline-button" aria-label="Decline button">
+        <svg class="phone-icon" viewBox="0 0 24 24">
+          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+        </svg>
+      </button>
+    `,this.updateDisabledState(),this.updateStyle());}};customElements.define("decline-button",i);var g=i;var a=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});}static get observedAttributes(){return ["disabled","style"]}attributeChangedCallback(r,t,e){r==="disabled"&&this.updateDisabledState(),r==="style"&&this.updateStyle();}connectedCallback(){this.render();}disconnectedCallback(){}updateDisabledState(){var t;let r=(t=this.shadowRoot)==null?void 0:t.querySelector(".rtc-end-btn");r&&(r.disabled=this.hasAttribute("disabled"));}updateStyle(){var t;let r=this.getAttribute("style");if(r){let e=(t=this.shadowRoot)==null?void 0:t.querySelector(".rtc-end-btn");e&&(e.style.cssText=e.style.cssText+r);}}render(){this.shadowRoot&&(this.shadowRoot.innerHTML=`
+      <style>
+        .rtc-end-btn {
+          background-color: #dc3545;
+          color: white;
+          border: none;
+          border-radius: 50%;
+          padding: 20px;
+          cursor: pointer;
+          font-size: 16px;
+          transition: background-color 0.3s ease;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+        }
+
+        .rtc-end-btn:hover {
+          background-color: #c82333;
+        }
+
+        .rtc-end-btn:active {
+          transform: translateY(1px);
+        }
+
+        .rtc-end-btn:disabled {
+          background-color: #6c757d;
+          cursor: not-allowed;
+        }
+
+        .phone-icon {
+          width: 16px;
+          height: 16px;
+          fill: none;
+          stroke: currentColor;
+          stroke-width: 2;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+      </style>
+
+        <button class="rtc-end-btn" part="end-button" aria-label="End button">
+          <svg class="phone-icon" viewBox="0 0 24 24">
+            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+          </svg>
+        </button>
+    `,this.updateDisabledState(),this.updateStyle());}};customElements.define("endcall-button",a);var m=a;var l=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});}static get observedAttributes(){return ["disabled","style","theme"]}attributeChangedCallback(r,t,e){r==="disabled"&&this.updateDisabledState(),r==="style"&&this.updateStyle(),r==="theme"&&this.render();}connectedCallback(){this.render();}disconnectedCallback(){}updateDisabledState(){var t;let r=(t=this.shadowRoot)==null?void 0:t.querySelector(".rtc-accept-btn");r&&(r.disabled=this.hasAttribute("disabled"));}updateStyle(){var t;let r=this.getAttribute("style");if(r){let e=(t=this.shadowRoot)==null?void 0:t.querySelector(".rtc-accept-btn");e&&(e.style.cssText=e.style.cssText+r);}}render(){if(!this.shadowRoot)return;let t=(this.getAttribute("theme")||"dark")==="dark";this.shadowRoot.innerHTML=`
+      <style>
+        .rtc-accept-btn {
+          background-color: #28a745;
+          color: white;
+          border: none;
+          border-radius: 50%;
+          padding: 20px;
+          cursor: pointer;
+          font-size: 12px;
+          transition: all 0.3s ease;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          box-shadow: ${t?"0 4px 15px rgba(40, 167, 69, 0.3)":"0 4px 15px rgba(40, 167, 69, 0.2)"};
+        }
+
+        .rtc-accept-btn:hover {
+          background-color: #218838;
+          transform: translateY(-1px);
+          box-shadow: ${t?"0 6px 20px rgba(40, 167, 69, 0.4)":"0 6px 20px rgba(40, 167, 69, 0.3)"};
+        }
+
+        .rtc-accept-btn:active {
+          transform: translateY(1px);
+          box-shadow: ${t?"0 2px 10px rgba(40, 167, 69, 0.3)":"0 2px 10px rgba(40, 167, 69, 0.2)"};
+        }
+
+        .rtc-accept-btn:disabled {
+          background-color: ${t?"#6c757d":"#adb5bd"};
+          cursor: not-allowed;
+          box-shadow: none;
+        }
+
+        .phone-icon {
+          width: 16px;
+          height: 16px;
+          fill: none;
+          stroke: currentColor;
+          stroke-width: 2;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+      </style>
+
+      <button class="rtc-accept-btn" part="accept-button" aria-label="Accept button">
+        <svg class="phone-icon" viewBox="0 0 24 24">
+          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
+        </svg>
+      </button>
+    `,this.updateDisabledState(),this.updateStyle();}};customElements.define("accept-button",l);var x=l;var d=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"});}static get observedAttributes(){return ["disabled","style","mic-on"]}attributeChangedCallback(r,t,e){r==="disabled"&&this.updateDisabledState(),r==="style"&&this.updateStyle(),r==="mic-on"&&this.updateMicState();}connectedCallback(){this.render();}disconnectedCallback(){}updateDisabledState(){var t;let r=(t=this.shadowRoot)==null?void 0:t.querySelector(".rtc-mic-btn");r&&(r.disabled=this.hasAttribute("disabled"));}updateMicState(){var t;let r=(t=this.shadowRoot)==null?void 0:t.querySelector(".rtc-mic-btn");r&&(this.hasAttribute("mic-on")?(r.classList.remove("mic-off"),r.classList.add("mic-on")):(r.classList.remove("mic-on"),r.classList.add("mic-off")));}updateStyle(){var t;let r=this.getAttribute("style");if(r){let e=(t=this.shadowRoot)==null?void 0:t.querySelector(".rtc-mic-btn");e&&(e.style.cssText=e.style.cssText+r);}}render(){this.shadowRoot&&(this.shadowRoot.innerHTML=`
+        <style>
+          .rtc-mic-btn {
+            background-color: #f6d200;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            padding: 20px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+          }
+  
+          .rtc-mic-btn:hover {
+            background-color: #FFBF00;
+          }
+  
+          .rtc-mic-btn:active {
+            transform: translateY(1px);
+          }
+  
+          .rtc-mic-btn:disabled {
+            background-color: #6c757d;
+            cursor: not-allowed;
+          }
+
+          .rtc-mic-btn.mic-on {
+            background-color: #f6d200;
+          }
+
+          .rtc-mic-btn.mic-on:hover {
+            background-color: #FFBF00;
+          }
+
+          .rtc-mic-btn.mic-off {
+            background-color: #6c757d;
+            cursor: pointer;
+          }
+
+          .rtc-mic-btn.mic-off:hover {
+            background-color: #5a6268;
+          }
+
+          .rtc-mic-btn.mic-off .mic-icon {
+            opacity: 0.7;
+          }
+  
+          .mic-icon {
+            width: 16px;
+            height: 16px;
+            fill: none;
+            stroke: currentColor;
+            stroke-width: 2;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+          }
+        </style>
+  
+          <button class="rtc-mic-btn" part="mic-button" aria-label="Mic button">
+            <svg class="mic-icon" viewBox="0 0 24 24">
+              <rect x="9" y="2" width="6" height="12" rx="3" />
+              <path d="M5 10v2a7 7 0 0 0 14 0v-2" />
+              <line x1="12" y1="22" x2="12" y2="18" />
+              <line x1="8" y1="22" x2="16" y2="22" />
+            </svg>
+          </button>
+      `,this.updateDisabledState(),this.updateMicState(),this.updateStyle());}};customElements.define("mic-button",d);var f=d;var c=class extends HTMLElement{constructor(){super();this.phoneNumber="";this.pressedKey=null;this.maxLength=8;this.shadow=this.attachShadow({mode:"open"}),this.render(),this.setupEventListeners();}static get observedAttributes(){return ["phone-number","max-length","theme"]}attributeChangedCallback(t,e,s){if(t==="phone-number"&&(this.phoneNumber=s||""),t==="max-length"&&(this.maxLength=parseInt(s)||8),t==="theme"){this.render();return}this.render();}setupEventListeners(){this.shadow.addEventListener("click",t=>{let e=t.target.closest("button");e&&e.dataset.value&&this.handleClick(e.dataset.value);}),this.shadow.addEventListener("mousedown",t=>{let e=t.target.closest("button");e&&e.dataset.value&&this.setPressedKey(e.dataset.value);}),this.shadow.addEventListener("mouseup",()=>{this.setPressedKey(null);}),this.shadow.addEventListener("mouseleave",()=>{this.setPressedKey(null);});}handleClick(t){this.setPressedKey(t),this.phoneNumber.length<this.maxLength&&(this.phoneNumber+=t,this.setAttribute("phone-number",this.phoneNumber),this.dispatchEvent(new CustomEvent("number-click",{detail:{value:t,phoneNumber:this.phoneNumber},bubbles:true})));}setPressedKey(t){this.pressedKey=t,this.updateButtonStates();}updateButtonStates(){this.shadow.querySelectorAll("button").forEach(e=>{e.dataset.value===this.pressedKey?(e.style.transform="translateY(2px) scale(0.95)",e.style.backgroundColor="rgba(255, 255, 255, 0.3)",e.style.boxShadow="0 4px 15px rgba(0, 0, 0, 0.2), inset 0 2px 5px rgba(0, 0, 0, 0.2)"):(e.style.transform="",e.style.backgroundColor="",e.style.boxShadow="0 8px 25px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1)");});}render(){let e=(this.getAttribute("theme")||"dark")==="dark",s=["1","2","3","4","5","6","7","8","9","*","0","#"];this.shadow.innerHTML=`
+      <style>
+        .numpad-container {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 15px;
+          width: 250px;
+          height: 300px;
+          border-radius: 12px;
+          background: ${e?"rgba(255, 255, 255, 0.05)":"rgba(255, 255, 255, 0.6)"};
+          backdrop-filter: blur(10px);
+          border: 1px solid ${e?"rgba(255, 255, 255, 0.1)":"rgba(59, 130, 246, 0.2)"};
+          max-width: 24rem;
+          margin: 0 auto;
+          transition: all 0.3s ease;
+        }
+
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          gap: 12px;
+          width: 100%;
+          place-items: center;
+        }
+
+        .number-button {
+          position: relative;
+          width: 60px;
+          height: 60px;
+          border-radius: 20%;
+          border: none;
+          background: ${e?"rgba(255, 255, 255, 0.15)":"rgba(255, 255, 255, 0.8)"};
+          backdrop-filter: blur(10px);
+          color: ${e?"white":"#1f2937"};
+          font-size: 18px;
+          font-weight: 600;
+          cursor: pointer;
+          overflow: hidden;
+          outline: none;
+          border: 1px solid ${e?"rgba(255, 255, 255, 0.2)":"rgba(59, 130, 246, 0.3)"};
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          box-shadow: ${e?"0 4px 15px rgba(255, 255, 255, 0.1)":"0 4px 15px rgba(59, 130, 246, 0.1)"};
+        }
+
+        .number-button:hover {
+          transform: translateY(-2px) scale(1.05);
+          background: ${e?"rgba(255, 255, 255, 0.25)":"rgba(255, 255, 255, 0.95)"};
+          box-shadow: ${e?"0 6px 20px rgba(255, 255, 255, 0.15)":"0 6px 20px rgba(59, 130, 246, 0.15)"};
+        }
+
+        .number-button:active {
+          transform: translateY(2px) scale(0.95);
+          box-shadow: ${e?"0 2px 10px rgba(255, 255, 255, 0.1)":"0 2px 10px rgba(59, 130, 246, 0.1)"};
+        }
+
+        .button-text {
+          position: relative;
+          z-index: 10;
+        }
+      </style>
+      
+      <div class="numpad-container">
+        <div class="grid">
+          ${s.map((u,k)=>`
+            <button 
+              class="number-button" 
+              data-value="${u}"
+            >
+              <span class="button-text">${u}</span>
+            </button>
+          `).join("")}
+        </div>
+      </div>
+    `;}getPhoneNumber(){return this.phoneNumber}setPhoneNumber(t){this.phoneNumber=t,this.setAttribute("phone-number",t);}clearPhoneNumber(){this.phoneNumber="",this.setAttribute("phone-number","");}};customElements.define("rtc-numpad",c);var v=c;var b=class extends HTMLElement{constructor(){super();this.phoneNumber="";this.shadow=this.attachShadow({mode:"open"}),this.render();}static get observedAttributes(){return ["phone-number","theme"]}attributeChangedCallback(t,e,s){t==="phone-number"&&(this.phoneNumber=s||"",this.render()),t==="theme"&&this.render();}render(){let e=(this.getAttribute("theme")||"dark")==="dark";this.shadow.innerHTML=`
+      <style>
+        .number-field-container {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: 1rem;
+          padding: 0.75rem 1rem;
+          border-radius: 12px;
+          width: 250px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          background: ${e?"rgba(255, 255, 255, 0.1)":"rgba(255, 255, 255, 0.8)"};
+          backdrop-filter: blur(10px);
+          border: 1px solid ${e?"rgba(255, 255, 255, 0.2)":"rgba(59, 130, 246, 0.3)"};
+          transition: all 0.3s ease;
+          box-shadow: ${e?"0 4px 15px rgba(0, 0, 0, 0.1)":"0 4px 15px rgba(59, 130, 246, 0.1)"};
+        }
+
+        .phone-number-display {
+          color: ${e?"white":"#1f2937"};
+          font-size: 18px;
+          font-weight: 600;
+          min-height: 1.75rem;
+          display: flex;
+          align-items: center;
+          letter-spacing: 0.5px;
+          text-shadow: ${e?"0 1px 2px rgba(0, 0, 0, 0.1)":"none"};
+          transition: color 0.3s ease;
+        }
+
+        .phone-number-display:empty::before {
+          content: "\u0417\u0430\u043B\u0433\u0430\u0445 \u0434\u0443\u0433\u0430\u0430\u0440 \u043E\u0440\u0443\u0443\u043B\u043D\u0430 \u0443\u0443.";
+          color: ${e?"rgba(255, 255, 255, 0.5)":"rgba(107, 114, 128, 0.7)"};
+          font-style: italic;
+          font-size: 14px;
+        }
+      </style>
+      
+      <div class="number-field-container">
+        <span class="phone-number-display">${this.phoneNumber}</span>
+      </div>
+    `;}getPhoneNumber(){return this.phoneNumber}setPhoneNumber(t){this.phoneNumber=t,this.setAttribute("phone-number",t);}clearPhoneNumber(){this.phoneNumber="",this.setAttribute("phone-number","");}};customElements.define("rtc-number-field",b);var w=b;var h=class extends HTMLElement{constructor(){super();this.phoneNumber="";this.visible=false;this.shadow=this.attachShadow({mode:"open"}),this.render(),this.setupEventListeners();}static get observedAttributes(){return ["phone-number","visible","theme"]}attributeChangedCallback(t,e,s){t==="phone-number"&&(this.phoneNumber=s||"",this.visible=this.phoneNumber.length>0,this.render()),t==="visible"&&(this.visible=s==="true",this.render()),t==="theme"&&this.render();}setupEventListeners(){this.shadow.addEventListener("click",t=>{t.target.closest("button")&&this.handleDeleteClick();});}handleDeleteClick(){this.dispatchEvent(new CustomEvent("delete-click",{detail:{phoneNumber:this.phoneNumber},bubbles:true}));}render(){if(!this.visible){this.shadow.innerHTML="";return}let e=(this.getAttribute("theme")||"dark")==="dark";this.shadow.innerHTML=`
+      <style>
+        .delete-button {
+          color: white;
+          font-size: 16px;
+          background-color: #ef4444;
+          padding: 15px;
+          border-radius: 50%;
+          border: none;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.3s ease;
+          box-shadow: ${e?"0 4px 15px rgba(239, 68, 68, 0.3)":"0 4px 15px rgba(239, 68, 68, 0.2)"};
+        }
+
+        .delete-button:hover {
+          background-color: #dc2626;
+          transform: translateY(-2px) scale(1.05);
+          box-shadow: ${e?"0 6px 20px rgba(239, 68, 68, 0.4)":"0 6px 20px rgba(239, 68, 68, 0.3)"};
+        }
+
+        .delete-button:active {
+          transform: translateY(1px) scale(0.95);
+          box-shadow: ${e?"0 2px 10px rgba(239, 68, 68, 0.3)":"0 2px 10px rgba(239, 68, 68, 0.2)"};
+        }
+
+        .delete-icon {
+          width: 18px;
+          height: 18px;
+          fill: white;
+          stroke: white;
+          stroke-width: 2;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+      </style>
+      
+      <button class="delete-button" aria-label="Delete last digit">
+        <svg class="delete-icon" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M22.6663 5.32031H13.7063C11.8263 5.32031 10.0396 6.10698 8.77292 7.50698L4.06625 12.6803C2.18625 14.747 2.18625 17.8936 4.06625 19.9603L8.77292 25.1336C10.0396 26.5203 11.8263 27.3203 13.7063 27.3203H22.6663C26.3463 27.3203 29.3329 24.3336 29.3329 20.6536V11.987C29.3329 8.30698 26.3463 5.32031 22.6663 5.32031ZM22.0396 18.907C22.4263 19.2936 22.4263 19.9336 22.0396 20.3203C21.8396 20.5203 21.5863 20.6136 21.3329 20.6136C21.0796 20.6136 20.8263 20.5203 20.6263 20.3203L18.0396 17.7336L15.4529 20.3203C15.2529 20.5203 14.9996 20.6136 14.7463 20.6136C14.4929 20.6136 14.2396 20.5203 14.0396 20.3203C13.6529 19.9336 13.6529 19.2936 14.0396 18.907L16.6263 16.3203L14.0396 13.7336C13.6529 13.347 13.6529 12.707 14.0396 12.3203C14.4263 11.9336 15.0663 11.9336 15.4529 12.3203L18.0396 14.907L20.6263 12.3203C21.0129 11.9336 21.6529 11.9336 22.0396 12.3203C22.4263 12.707 22.4263 13.347 22.0396 13.7336L19.4529 16.3203L22.0396 18.907Z" fill="none"/>
+        </svg>
+      </button>
+    `;}getPhoneNumber(){return this.phoneNumber}setPhoneNumber(t){this.phoneNumber=t,this.visible=t.length>0,this.setAttribute("phone-number",t);}setVisible(t){this.visible=t,this.setAttribute("visible",t.toString());}};customElements.define("rtc-number-delete-button",h);var y=h;export{x as AcceptButton,p as CallButton,g as DeclineButton,m as EndButton,f as MicButton,y as NumberDeleteButton,w as NumberField,v as Numpad};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@callpromn/rtc-kit",
+  "version": "0.0.2",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsup",
+    "pk": "sudo npm run build && sudo npm link",
+    "pack:check": "npm pack && tar -tzf $(ls -t *.tgz | head -1)",
+    "clean": "rimraf dist"
+  },
+  "keywords": [
+    "wep-component",
+    "ui",
+    "components",
+    "rtc",
+    "calling",
+    "voip",
+    "callpro"
+  ],
+  "author": "CallPro LLC",
+  "license": "MIT",
+  "description": "CallPro Web Components Kit for Web",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/index.mjs",
+    "require": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "devDependencies": {
+    "@types/node": "^24.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.3",
+    "prettier": "^3.6.2",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
+    "rimraf": "^6.0.1"
+  }
+}