@callpromn/rtc-kit 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/LICENSE.txt +32 -0
  2. package/README.md +367 -0
  3. package/dist/index.d.mts +102 -0
  4. package/dist/index.d.ts +102 -0
  5. package/dist/index.js +426 -0
  6. package/dist/index.mjs +426 -0
  7. package/package.json +48 -0
package/LICENSE.txt ADDED
@@ -0,0 +1,32 @@
1
+ SOFTWARE LICENSE AGREEMENT
2
+
3
+ Copyright © 2025 CallPro LLC. All rights reserved.
4
+
5
+ This Software License Agreement (“Agreement”) is a legal agreement between you (“Licensee”) and CallPro LLC (“Licensor”) for the use of the "rtc-kit" software (“Software”). By installing, copying, or otherwise using the Software, you agree to be bound by the terms of this Agreement.
6
+
7
+ 1. Grant of License
8
+ Licensor grants Licensee a non-exclusive, non-transferable, revocable license to use the Software solely for the purpose of developing applications that interact with or make use of the Software’s functionality.
9
+
10
+ 2. Restrictions
11
+ Licensee shall not, directly or indirectly:
12
+ a. Copy, modify, adapt, translate, or create derivative works of the Software.
13
+ b. Reverse-engineer, decompile, disassemble, or otherwise attempt to discover the source code of the Software.
14
+ c. Distribute, sublicense, rent, lease, or sell the Software, in whole or in part, to any third party.
15
+ d. Remove or alter any proprietary notices, labels, or marks from the Software.
16
+
17
+ 3. Ownership
18
+ The Software is licensed, not sold. Licensor retains all rights, title, and interest in and to the Software, including all intellectual property rights therein.
19
+
20
+ 4. Termination
21
+ This Agreement is effective until terminated. Licensor may terminate this Agreement at any time if Licensee breaches any provision. Upon termination, Licensee must cease all use of the Software and destroy all copies in its possession.
22
+
23
+ 5. Disclaimer of Warranty
24
+ The Software is provided “AS IS” without warranty of any kind, whether express, implied, or statutory, including but not limited to warranties of merchantability, fitness for a particular purpose, and non-infringement.
25
+
26
+ 6. Limitation of Liability
27
+ In no event shall Licensor be liable for any indirect, incidental, consequential, special, or punitive damages arising out of or related to the use of the Software.
28
+
29
+ 7. Governing Law
30
+ This Agreement shall be governed by and construed in accordance with the laws of Mongolia, without regard to conflict of law principles.
31
+
32
+ BY USING THE SOFTWARE, YOU ACKNOWLEDGE THAT YOU HAVE READ THIS AGREEMENT, UNDERSTOOD IT, AND AGREE TO BE BOUND BY ITS TERMS.
package/README.md ADDED
@@ -0,0 +1,367 @@
1
+ # RTC Kit UI
2
+
3
+ [![npm version](https://badge.fury.io/js/@callpromn%2Frtc-kit.svg)](https://www.npmjs.com/package/@callpromn/rtc-kit)
4
+ [![npm downloads](https://img.shields.io/npm/dm/@callpromn/rtc-kit.svg)](https://www.npmjs.com/package/@callpromn/rtc-kit)
5
+ [![License](https://img.shields.io/npm/l/@callpromn/rtc-kit.svg)](https://www.npmjs.com/package/@callpromn/rtc-kit?activeTab=code)
6
+
7
+ Энэхүү sdk нь Real-time communication (RTC) програм бүтээхэд зориулсан Web Components-ийн иж бүрэн сан юм. TypeScript хэлээр бичигдсэн бөгөөд бүх вэб фреймворкуудад хялбараар интеграцлах боломжтой.
8
+
9
+ ## Онцлогууд - Features
10
+
11
+ ✨ **Фреймворк хараат бус** - React, Vue, Angular эсвэл vanilla JavaScript зэрэг хэл болон сангууд дээр ажиллана.
12
+ 🎨 **Загвар солих боломжтой** - "Dark mode" бүхий дизайний сонголттой.
13
+ 🔧 **TypeScript дэмжлэг** - Хувьсагч болон фунлкцуудын typescript type-ууд тодорхойлогдсон.
14
+ 🚀 **Хамаарал байхгүй** - Хөнгөн бөгөөд хурдан ачаалах.
15
+
16
+ ## Суулгах - Installation
17
+
18
+ ```bash
19
+ npm install @callpromn/rtc-kit
20
+ ```
21
+
22
+ ## Хурдан эхлэх - Quick Start
23
+
24
+ ### Vanilla JavaScript/HTML
25
+
26
+ ```html
27
+ <!DOCTYPE html>
28
+ <html>
29
+ <head>
30
+ <script type="module">
31
+ import '@callpromn/rtc-kit';
32
+ </script>
33
+ </head>
34
+ <body>
35
+ <!-- Дуудлагын товчлуур - Call Button -->
36
+ <call-button to-phone-number="+1234567890" theme="dark"></call-button>
37
+
38
+ <!-- Дугаар оруулах numpad -->
39
+ <rtc-numpad theme="dark" max-length="10"></rtc-numpad>
40
+
41
+ <!-- Дугаар харуулах талбар - Number Display Field -->
42
+ <number-field phone-number="123456789" theme="dark"></number-field>
43
+ </body>
44
+ </html>
45
+ ```
46
+
47
+ ### Module Bundlers-ийн хамт (Webpack, Vite, гэх мэт)
48
+
49
+ ```javascript
50
+ import '@callpromn/rtc-kit';
51
+
52
+ // Бүх компонентууд custom element-ээр ашиглах боломжтой
53
+ const callButton = document.createElement('call-button');
54
+ callButton.setAttribute('to-phone-number', '+1234567890');
55
+ document.body.appendChild(callButton);
56
+ ```
57
+
58
+ ## Компонентууд - Components
59
+
60
+ ### 📞 Дуудлагын товчлуур - Call Button
61
+ Default дизайнтай товчлуураар гадагшаа дуудлага хийх.
62
+
63
+ ```html
64
+ <call-button
65
+ to-phone-number="+1234567890"
66
+ theme="dark"
67
+ disabled="false">
68
+ </call-button>
69
+ ```
70
+
71
+ **Атрибутууд - Attributes**
72
+ - `to-phone-number` - Залгах утасны дугаар
73
+ - `theme` - Light болон Dark mode (`"light"` | `"dark"`)
74
+ - `disabled` - Товчлуурыг идэвхгүй болгох (`"true"` | `"false"`)
75
+ - `style` - Тусгай CSS загвар
76
+
77
+ ---
78
+
79
+ ### ✅ Accept button
80
+ Ирж буй дуудлагыг хүлээн авах товчлуур.
81
+
82
+ ```html
83
+ <accept-button theme="dark"></accept-button>
84
+ ```
85
+
86
+ **Атрибутууд - Attributes**
87
+ - `theme` - Харагдах загвар (`"light"` | `"dark"`)
88
+ - `disabled` - Товчлуурыг идэвхгүй болгох
89
+ - `style` - Тусгай CSS загвар
90
+
91
+ ---
92
+
93
+ ### ❌ Decline button
94
+ Ирж буй дуудлагыг таслах товчлуур.
95
+
96
+ ```html
97
+ <decline-button theme="dark"></decline-button>
98
+ ```
99
+
100
+ **Атрибутууд - Attributes**
101
+ - `theme` - Харагдах загвар (`"light"` | `"dark"`)
102
+ - `disabled` - Товчлуурыг идэвхгүй болгох
103
+ - `style` - Тусгай CSS загвар
104
+
105
+ ---
106
+
107
+ ### 📞 End button
108
+ Идэвхтэй буюу явагдаж байгаа дуудлагыг дуусгах товчлуур.
109
+
110
+ ```html
111
+ <end-button theme="dark"></end-button>
112
+ ```
113
+
114
+ **Атрибутууд:**
115
+ - `theme` - Харагдах загвар (`"light"` | `"dark"`)
116
+ - `disabled` - Товчлуурыг идэвхгүй болгох
117
+ - `style` - Тусгай CSS загвар
118
+
119
+ ---
120
+
121
+ ### 🎙️ Mic button
122
+ Дуудлагын үеэр микрофоныг асаах/унтраах.
123
+
124
+ ```html
125
+ <mic-button theme="dark"></mic-button>
126
+ ```
127
+
128
+ **Атрибутууд - Attributes**
129
+ - `theme` - Харагдах загвар (`"light"` | `"dark"`)
130
+ - `disabled` - Товчлуурыг идэвхгүй болгох
131
+ - `muted` - Анхны дуугүй төлөв
132
+ - `style` - Тусгай CSS загвар
133
+
134
+ ---
135
+
136
+ ### 🔢 Numpad
137
+ Утасны дугаар оруулахад зориулсан интерактив тоон самбар.
138
+
139
+ ```html
140
+ <rtc-numpad
141
+ phone-number=""
142
+ max-length="10"
143
+ theme="dark">
144
+ </rtc-numpad>
145
+ ```
146
+
147
+ **Атрибутууд - Attributes**
148
+ - `phone-number` - Одоогийн утасны дугаарын утга
149
+ - `max-length` - Оронын хамгийн их тоо (анхдагч: 8)
150
+ - `theme` - Харагдах загвар (`"light"` | `"dark"`)
151
+ - `style` - Тусгай CSS загвар
152
+
153
+ **Events:**
154
+ - `number-click` - Тоо дарагдах үед гарна
155
+ ```javascript
156
+ numpad.addEventListener('number-click', (event) => {
157
+ console.log('Дарагдсан:', event.detail.value);
158
+ console.log('Одоогийн дугаар:', event.detail.phoneNumber);
159
+ });
160
+ ```
161
+
162
+ **Аргууд - Functions**
163
+ - `getPhoneNumber()` - Одоогийн утасны дугаарыг авах
164
+ - `setPhoneNumber(value)` - Утасны дугаарыг програмчлалаар тохируулах
165
+ - `clearPhoneNumber()` - Утасны дугаарыг арилгах
166
+
167
+ ---
168
+
169
+ ### 📱 Number field
170
+ Гараас оруулсан утасны дугаарыг харуулах талбар.
171
+
172
+ ```html
173
+ <number-field
174
+ phone-number="1234567890"
175
+ theme="dark">
176
+ </number-field>
177
+ ```
178
+
179
+ **Атрибутууд - Attributes**
180
+ - `phone-number` - Харуулах утасны дугаар
181
+ - `theme` - Харагдах загвар (`"light"` | `"dark"`)
182
+ - `style` - Тусгай CSS загвар
183
+
184
+ ---
185
+
186
+ ### ⌫ Number delete button
187
+ Дугаар устгах товчлуур.
188
+
189
+ ```html
190
+ <number-delete-button
191
+ phone-number="123456"
192
+ theme="dark">
193
+ </number-delete-button>
194
+ ```
195
+
196
+ **Атрибутууд - Attributes**
197
+ - `phone-number` - Одоогийн утасны дугаар (төлөв удирдахад)
198
+ - `theme` - Харагдах загвар (`"light"` | `"dark"`)
199
+ - `disabled` - Устгах тоо байхгүй үед идэвхгүй болгох
200
+ - `style` - Тусгай CSS загвар
201
+
202
+ ## Загвар
203
+
204
+ Бүх компонентууд Light болон Dark mode-ийг дэмждэг:
205
+
206
+ ```html
207
+ <!-- Хар загвар (анхдагч) -->
208
+ <call-button theme="dark"></call-button>
209
+
210
+ <!-- Цагаан загвар -->
211
+ <call-button theme="light"></call-button>
212
+ ```
213
+
214
+ ### Тусгай загвар
215
+
216
+ CSS-ын `style` атрибут ашиглан компонентынхоо загварыг солих боломжтой:
217
+
218
+ ```html
219
+ <call-button
220
+ style="
221
+ --button-bg: #ff6b6b;
222
+ --button-color: white;
223
+ border-radius: 8px;
224
+ ">
225
+ </call-button>
226
+ ```
227
+
228
+ ### Компонент загварын жишээнүүд
229
+
230
+ #### Call button-ны загвар
231
+ ```html
232
+ <!-- Тусгай Call button загвар -->
233
+ <call-button
234
+ style="
235
+ background-color: #007bff;
236
+ width: 80px;
237
+ height: 80px;
238
+ border-radius: 50%;
239
+ box-shadow: 0 4px 20px rgba(0, 123, 255, 0.4);
240
+ "
241
+ theme="dark">
242
+ </call-button>
243
+ ```
244
+
245
+ #### Numpad-ны загвар
246
+ ```html
247
+ <!-- Numpad-ны загвар -->
248
+ <rtc-numpad
249
+ style="
250
+ width: 200px;
251
+ height: 250px;
252
+ background: #f8f9fa;
253
+ border-radius: 16px;
254
+ border: 2px solid #e9ecef;
255
+ "
256
+ theme="light">
257
+ </rtc-numpad>
258
+ ```
259
+
260
+ #### Number field-ны загвар
261
+ ```html
262
+ <!-- Number field-ны загвар -->
263
+ <number-field
264
+ style="
265
+ background: rgba(255, 255, 255, 0.05);
266
+ border: 2px solid #007bff;
267
+ border-radius: 12px;
268
+ padding: 16px 20px;
269
+ font-size: 24px;
270
+ font-weight: 600;
271
+ color: #007bff;
272
+ text-align: center;
273
+ min-height: 60px;
274
+ backdrop-filter: blur(10px);
275
+ "
276
+ phone-number="123456789"
277
+ theme="dark">
278
+ </number-field>
279
+ ```
280
+
281
+ ## Advanced Usage
282
+
283
+ ### Бүрэн диалер бүтээх
284
+
285
+ ```html
286
+ <div class="phone-dialer">
287
+ <!-- Дугаар харуулах -->
288
+ <number-field id="numberDisplay" phone-number="" theme="dark"></number-field>
289
+
290
+ <!-- Numpad -->
291
+ <rtc-numpad id="numpad" theme="dark" max-length="15"></rtc-numpad>
292
+
293
+ <!-- Controller -->
294
+ <div class="controls">
295
+ <number-delete-button id="deleteBtn" theme="dark"></number-delete-button>
296
+ <call-button id="callBtn" theme="dark"></call-button>
297
+ </div>
298
+ </div>
299
+
300
+ <script>
301
+ const numpad = document.getElementById('numpad');
302
+ const numberDisplay = document.getElementById('numberDisplay');
303
+ const callBtn = document.getElementById('callBtn');
304
+ const deleteBtn = document.getElementById('deleteBtn');
305
+
306
+ // Дугаар оруулах
307
+ numpad.addEventListener('number-click', (event) => {
308
+ const phoneNumber = event.detail.phoneNumber;
309
+ numberDisplay.setAttribute('phone-number', phoneNumber);
310
+ callBtn.setAttribute('to-phone-number', phoneNumber);
311
+ deleteBtn.setAttribute('phone-number', phoneNumber);
312
+ });
313
+
314
+ // Дугаар устгах
315
+ deleteBtn.addEventListener('click', () => {
316
+ const currentNumber = numpad.getPhoneNumber();
317
+ const newNumber = currentNumber.slice(0, -1);
318
+ numpad.setPhoneNumber(newNumber);
319
+ numberDisplay.setAttribute('phone-number', newNumber);
320
+ callBtn.setAttribute('to-phone-number', newNumber);
321
+ });
322
+ </script>
323
+ ```
324
+
325
+ ## Browser Support
326
+
327
+ - ✅ Chrome 67+
328
+ - ✅ Firefox 63+
329
+ - ✅ Safari 13.1+
330
+ - ✅ Edge 79+
331
+
332
+ ## TypeScript дэмжлэг
333
+
334
+ Бүрэн TypeScript type тодорхойлолт багтсан:
335
+
336
+ ```typescript
337
+ import '@callpromn/rtc-kit';
338
+
339
+ // Type-safe элемент үүсгэх
340
+ const callButton = document.createElement('call-button') as HTMLElement & {
341
+ 'to-phone-number': string;
342
+ theme: 'light' | 'dark';
343
+ disabled: boolean;
344
+ };
345
+ ```
346
+
347
+ ## Фреймворк интеграци - Framework integration
348
+
349
+ Эдгээр нь vanilla Web Components боловч бүх томоохон фреймворкуудтай хялбарханаар ажиллана:
350
+
351
+ - **React**: [@callpromn/rtc-kit-react](https://www.npmjs.com/package/@callpromn/rtc-kit-react)
352
+ - **Vue**: Тун удахгүй
353
+ - **Angular**: Тун удахгүй
354
+ - **Svelte**: Тун удахгүй
355
+
356
+ ## Лиценз - License
357
+
358
+ Энэ төсөл нь CallPro LLC-ийн өмчийн програм хангамж юм. Дэлгэрэнгүй мэдээллийг [LICENSE.txt](https://www.npmjs.com/package/@callpromn/rtc-kit?activeTab=code)-ээс үзнэ үү.
359
+
360
+ ## Дэмжлэг - Support
361
+
362
+ - 📧 И-мэйл: dev@callpro.mn
363
+ - 📖 Баримт бичиг - documentation: [https://docs.callpro.mn](https://docs.callpro.mn)
364
+
365
+ ---
366
+
367
+ Made with ❤️ by [CallPro LLC](https://callpro.mn)
package/dist/index.d.mts ADDED
@@ -0,0 +1,102 @@
1
+ declare class CallButton extends HTMLElement {
2
+ constructor();
3
+ static get observedAttributes(): string[];
4
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
5
+ connectedCallback(): void;
6
+ disconnectedCallback(): void;
7
+ private updateDisabledState;
8
+ private updateStyle;
9
+ private render;
10
+ }
11
+
12
+ declare class DeclineButton extends HTMLElement {
13
+ constructor();
14
+ static get observedAttributes(): string[];
15
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
16
+ connectedCallback(): void;
17
+ disconnectedCallback(): void;
18
+ private updateDisabledState;
19
+ private updateStyle;
20
+ private render;
21
+ }
22
+
23
+ declare class EndButton extends HTMLElement {
24
+ constructor();
25
+ static get observedAttributes(): string[];
26
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
27
+ connectedCallback(): void;
28
+ disconnectedCallback(): void;
29
+ private updateDisabledState;
30
+ private updateStyle;
31
+ private render;
32
+ }
33
+
34
+ declare class AcceptButton extends HTMLElement {
35
+ constructor();
36
+ static get observedAttributes(): string[];
37
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
38
+ connectedCallback(): void;
39
+ disconnectedCallback(): void;
40
+ private updateDisabledState;
41
+ private updateStyle;
42
+ private render;
43
+ }
44
+
45
+ declare class MicButton extends HTMLElement {
46
+ constructor();
47
+ static get observedAttributes(): string[];
48
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
49
+ connectedCallback(): void;
50
+ disconnectedCallback(): void;
51
+ private updateDisabledState;
52
+ private updateMicState;
53
+ private updateStyle;
54
+ private render;
55
+ }
56
+
57
+ declare class Numpad extends HTMLElement {
58
+ private shadow;
59
+ private phoneNumber;
60
+ private pressedKey;
61
+ private maxLength;
62
+ constructor();
63
+ static get observedAttributes(): string[];
64
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
65
+ private setupEventListeners;
66
+ private handleClick;
67
+ private setPressedKey;
68
+ private updateButtonStates;
69
+ private render;
70
+ getPhoneNumber(): string;
71
+ setPhoneNumber(value: string): void;
72
+ clearPhoneNumber(): void;
73
+ }
74
+
75
+ declare class NumberField extends HTMLElement {
76
+ private shadow;
77
+ private phoneNumber;
78
+ constructor();
79
+ static get observedAttributes(): string[];
80
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
81
+ private render;
82
+ getPhoneNumber(): string;
83
+ setPhoneNumber(value: string): void;
84
+ clearPhoneNumber(): void;
85
+ }
86
+
87
+ declare class NumberDeleteButton extends HTMLElement {
88
+ private shadow;
89
+ private phoneNumber;
90
+ private visible;
91
+ constructor();
92
+ static get observedAttributes(): string[];
93
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
94
+ private setupEventListeners;
95
+ private handleDeleteClick;
96
+ private render;
97
+ getPhoneNumber(): string;
98
+ setPhoneNumber(value: string): void;
99
+ setVisible(visible: boolean): void;
100
+ }
101
+
102
+ export { AcceptButton, CallButton, DeclineButton, EndButton, MicButton, NumberDeleteButton, NumberField, Numpad };
package/dist/index.d.ts ADDED
@@ -0,0 +1,102 @@
1
+ declare class CallButton extends HTMLElement {
2
+ constructor();
3
+ static get observedAttributes(): string[];
4
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
5
+ connectedCallback(): void;
6
+ disconnectedCallback(): void;
7
+ private updateDisabledState;
8
+ private updateStyle;
9
+ private render;
10
+ }
11
+
12
+ declare class DeclineButton extends HTMLElement {
13
+ constructor();
14
+ static get observedAttributes(): string[];
15
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
16
+ connectedCallback(): void;
17
+ disconnectedCallback(): void;
18
+ private updateDisabledState;
19
+ private updateStyle;
20
+ private render;
21
+ }
22
+
23
+ declare class EndButton extends HTMLElement {
24
+ constructor();
25
+ static get observedAttributes(): string[];
26
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
27
+ connectedCallback(): void;
28
+ disconnectedCallback(): void;
29
+ private updateDisabledState;
30
+ private updateStyle;
31
+ private render;
32
+ }
33
+
34
+ declare class AcceptButton extends HTMLElement {
35
+ constructor();
36
+ static get observedAttributes(): string[];
37
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
38
+ connectedCallback(): void;
39
+ disconnectedCallback(): void;
40
+ private updateDisabledState;
41
+ private updateStyle;
42
+ private render;
43
+ }
44
+
45
+ declare class MicButton extends HTMLElement {
46
+ constructor();
47
+ static get observedAttributes(): string[];
48
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
49
+ connectedCallback(): void;
50
+ disconnectedCallback(): void;
51
+ private updateDisabledState;
52
+ private updateMicState;
53
+ private updateStyle;
54
+ private render;
55
+ }
56
+
57
+ declare class Numpad extends HTMLElement {
58
+ private shadow;
59
+ private phoneNumber;
60
+ private pressedKey;
61
+ private maxLength;
62
+ constructor();
63
+ static get observedAttributes(): string[];
64
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
65
+ private setupEventListeners;
66
+ private handleClick;
67
+ private setPressedKey;
68
+ private updateButtonStates;
69
+ private render;
70
+ getPhoneNumber(): string;
71
+ setPhoneNumber(value: string): void;
72
+ clearPhoneNumber(): void;
73
+ }
74
+
75
+ declare class NumberField extends HTMLElement {
76
+ private shadow;
77
+ private phoneNumber;
78
+ constructor();
79
+ static get observedAttributes(): string[];
80
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
81
+ private render;
82
+ getPhoneNumber(): string;
83
+ setPhoneNumber(value: string): void;
84
+ clearPhoneNumber(): void;
85
+ }
86
+
87
+ declare class NumberDeleteButton extends HTMLElement {
88
+ private shadow;
89
+ private phoneNumber;
90
+ private visible;
91
+ constructor();
92
+ static get observedAttributes(): string[];
93
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
94
+ private setupEventListeners;
95
+ private handleDeleteClick;
96
+ private render;
97
+ getPhoneNumber(): string;
98
+ setPhoneNumber(value: string): void;
99
+ setVisible(visible: boolean): void;
100
+ }
101
+
102
+ export { AcceptButton, CallButton, DeclineButton, EndButton, MicButton, NumberDeleteButton, NumberField, Numpad };