crmbonus-component-wake 0.0.6 → 0.0.8
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.
- package/dist/components/crm-bonus-form.d.ts +11 -0
- package/dist/components/phone-input-mask.d.ts +11 -0
- package/dist/crmbonus-component-wake/app-modal.entry.js +3 -3
- package/dist/crmbonus-component-wake/app-modal.entry.js.map +1 -1
- package/dist/crmbonus-component-wake/crm-bonus-form.entry.js +21 -0
- package/dist/crmbonus-component-wake/crm-bonus-form.entry.js.map +1 -0
- package/dist/crmbonus-component-wake/crm-bonus.entry.js +2 -2
- package/dist/crmbonus-component-wake/crm-bonus.entry.js.map +1 -1
- package/dist/crmbonus-component-wake/crmbonus-component-wake.esm.js +3 -3
- package/dist/crmbonus-component-wake/{index-2aa8671b.js → index-f4f9c8f2.js} +2 -2
- package/dist/crmbonus-component-wake/{index-2aa8671b.js.map → index-f4f9c8f2.js.map} +1 -1
- package/dist/crmbonus-component-wake/phone-input-mask.entry.js +35 -0
- package/dist/crmbonus-component-wake/phone-input-mask.entry.js.map +1 -0
- package/dist/types/components/crm-bonus-form/crm-bonus-form.d.ts +5 -0
- package/dist/types/components/phone/phone-input-mask.d.ts +7 -0
- package/dist/types/components.d.ts +27 -0
- package/package.json +1 -1
@@ -0,0 +1,35 @@
|
|
1
|
+
import { r as registerInstance, h } from './index-f4f9c8f2.js';
|
2
|
+
|
3
|
+
const phoneInputMaskCss = ".inline-text-field-container{display:flex;flex-direction:column}@supports (top: max(0%)){.mdc-text-field--outlined{padding-right:max(16px, var(--mdc-shape-small, 4px))}}@supports (top: max(0%)){.mdc-text-field--outlined{padding-left:max(16px, calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-text-field--outlined{height:55px;overflow:visible}.phone{width:300px;height:50px;font-size:18px;padding:10px;color:grey;border:1px solid #d3c6c6;outline:none}.mdc-text-field{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small, 4px);border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small, 4px);border-bottom-right-radius:0;border-bottom-left-radius:0;display:inline-flex;align-items:baseline;padding:0 16px;position:relative;box-sizing:border-box;overflow:hidden;will-change:opacity, transform, color}";
|
4
|
+
|
5
|
+
const PhoneInputMask = class {
|
6
|
+
constructor(hostRef) {
|
7
|
+
registerInstance(this, hostRef);
|
8
|
+
this.phone = '';
|
9
|
+
}
|
10
|
+
formatPhone(value) {
|
11
|
+
const cleaned = value.replace(/\D/g, ''); // Remove tudo que não for número
|
12
|
+
const match = cleaned.match(/^(\d{0,2})(\d{0,5})(\d{0,4})$/);
|
13
|
+
if (!match)
|
14
|
+
return value;
|
15
|
+
const part1 = match[1] ? `(${match[1]}` : '';
|
16
|
+
const part2 = match[2] ? `) ${match[2]}` : '';
|
17
|
+
const part3 = match[3] ? `-${match[3]}` : '';
|
18
|
+
return `${part1}${part2}${part3}`;
|
19
|
+
}
|
20
|
+
handleInput(event) {
|
21
|
+
const input = event.target;
|
22
|
+
this.phone = this.formatPhone(input.value);
|
23
|
+
}
|
24
|
+
async getPhone() {
|
25
|
+
return this.phone;
|
26
|
+
}
|
27
|
+
render() {
|
28
|
+
return (h("input", { key: '1b768d2d024a5482908316d7653bb02404332a64', id: "phone", type: "tel", class: "phone", value: this.phone, onInput: (event) => this.handleInput(event), placeholder: "(12) 94567-8910" }));
|
29
|
+
}
|
30
|
+
};
|
31
|
+
PhoneInputMask.style = phoneInputMaskCss;
|
32
|
+
|
33
|
+
export { PhoneInputMask as phone_input_mask };
|
34
|
+
|
35
|
+
//# sourceMappingURL=phone-input-mask.entry.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"file":"phone-input-mask.entry.esm.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,+zBAA+zB;;MCO50B,cAAc;;;qBACE,EAAE;;IAEnB,WAAW,CAAC,KAAa;QAC7B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACzC,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAC;QAC7D,IAAI,CAAC,KAAK;YAAE,OAAO,KAAK,CAAC;QAEzB,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;QAC7C,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;QAC9C,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;QAE7C,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE,CAAC;KACrC;IAEO,WAAW,CAAC,KAAY;QAC5B,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KAC9C;IAGM,MAAM,QAAQ;QACjB,OAAO,IAAI,CAAC,KAAK,CAAC;KACrB;IAED,MAAM;QACF,QACI,8DACI,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,OAAO,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,WAAW,EAAC,iBAAiB,GAC/B,EACJ;KACL;;;;;;","names":[],"sources":["src/components/phone/phone-input-mask.css?tag=phone-input-mask&encapsulation=shadow","src/components/phone/phone-input-mask.tsx"],"sourcesContent":[".inline-text-field-container {\n display: flex;\n flex-direction: column;\n}\n\n@supports (top: max(0%)) {\n .mdc-text-field--outlined {\n padding-right: max(16px, var(--mdc-shape-small, 4px));\n }\n}\n\n@supports (top: max(0%)) {\n .mdc-text-field--outlined {\n padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px));\n }\n}\n\n.mdc-text-field--outlined {\n height: 55px;\n overflow: visible;\n}\n\n.phone {\n width: 300px;\n height: 50px;\n font-size: 18px;\n padding: 10px;\n color: grey;\n border: 1px solid #d3c6c6;\n outline: none;\n}\n\n.mdc-text-field {\n border-top-left-radius: 4px;\n border-top-left-radius: var(--mdc-shape-small, 4px);\n border-top-right-radius: 4px;\n border-top-right-radius: var(--mdc-shape-small, 4px);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n display: inline-flex;\n align-items: baseline;\n padding: 0 16px;\n position: relative;\n box-sizing: border-box;\n overflow: hidden;\n will-change: opacity, transform, color;\n}","import { Component, h, Method, State } from '@stencil/core';\n\n@Component({\n tag: 'phone-input-mask',\n styleUrl: 'phone-input-mask.css',\n shadow: true,\n})\nexport class PhoneInputMask {\n @State() phone: string = '';\n\n private formatPhone(value: string): string {\n const cleaned = value.replace(/\\D/g, ''); // Remove tudo que não for número\n const match = cleaned.match(/^(\\d{0,2})(\\d{0,5})(\\d{0,4})$/);\n if (!match) return value;\n\n const part1 = match[1] ? `(${match[1]}` : '';\n const part2 = match[2] ? `) ${match[2]}` : '';\n const part3 = match[3] ? `-${match[3]}` : '';\n\n return `${part1}${part2}${part3}`;\n }\n\n private handleInput(event: Event): void {\n const input = event.target as HTMLInputElement;\n this.phone = this.formatPhone(input.value);\n }\n\n @Method()\n public async getPhone() {\n return this.phone;\n }\n\n render() {\n return (\n <input\n id=\"phone\"\n type=\"tel\"\n class=\"phone\"\n value={this.phone}\n onInput={(event) => this.handleInput(event)}\n placeholder=\"(12) 94567-8910\"\n />\n );\n }\n}\n"],"version":3}
|
@@ -13,6 +13,11 @@ export namespace Components {
|
|
13
13
|
interface CrmBonus {
|
14
14
|
"userId": string;
|
15
15
|
}
|
16
|
+
interface CrmBonusForm {
|
17
|
+
}
|
18
|
+
interface PhoneInputMask {
|
19
|
+
"getPhone": () => Promise<string>;
|
20
|
+
}
|
16
21
|
}
|
17
22
|
export interface AppModalCustomEvent<T> extends CustomEvent<T> {
|
18
23
|
detail: T;
|
@@ -42,9 +47,23 @@ declare global {
|
|
42
47
|
prototype: HTMLCrmBonusElement;
|
43
48
|
new (): HTMLCrmBonusElement;
|
44
49
|
};
|
50
|
+
interface HTMLCrmBonusFormElement extends Components.CrmBonusForm, HTMLStencilElement {
|
51
|
+
}
|
52
|
+
var HTMLCrmBonusFormElement: {
|
53
|
+
prototype: HTMLCrmBonusFormElement;
|
54
|
+
new (): HTMLCrmBonusFormElement;
|
55
|
+
};
|
56
|
+
interface HTMLPhoneInputMaskElement extends Components.PhoneInputMask, HTMLStencilElement {
|
57
|
+
}
|
58
|
+
var HTMLPhoneInputMaskElement: {
|
59
|
+
prototype: HTMLPhoneInputMaskElement;
|
60
|
+
new (): HTMLPhoneInputMaskElement;
|
61
|
+
};
|
45
62
|
interface HTMLElementTagNameMap {
|
46
63
|
"app-modal": HTMLAppModalElement;
|
47
64
|
"crm-bonus": HTMLCrmBonusElement;
|
65
|
+
"crm-bonus-form": HTMLCrmBonusFormElement;
|
66
|
+
"phone-input-mask": HTMLPhoneInputMaskElement;
|
48
67
|
}
|
49
68
|
}
|
50
69
|
declare namespace LocalJSX {
|
@@ -56,9 +75,15 @@ declare namespace LocalJSX {
|
|
56
75
|
interface CrmBonus {
|
57
76
|
"userId"?: string;
|
58
77
|
}
|
78
|
+
interface CrmBonusForm {
|
79
|
+
}
|
80
|
+
interface PhoneInputMask {
|
81
|
+
}
|
59
82
|
interface IntrinsicElements {
|
60
83
|
"app-modal": AppModal;
|
61
84
|
"crm-bonus": CrmBonus;
|
85
|
+
"crm-bonus-form": CrmBonusForm;
|
86
|
+
"phone-input-mask": PhoneInputMask;
|
62
87
|
}
|
63
88
|
}
|
64
89
|
export { LocalJSX as JSX };
|
@@ -67,6 +92,8 @@ declare module "@stencil/core" {
|
|
67
92
|
interface IntrinsicElements {
|
68
93
|
"app-modal": LocalJSX.AppModal & JSXBase.HTMLAttributes<HTMLAppModalElement>;
|
69
94
|
"crm-bonus": LocalJSX.CrmBonus & JSXBase.HTMLAttributes<HTMLCrmBonusElement>;
|
95
|
+
"crm-bonus-form": LocalJSX.CrmBonusForm & JSXBase.HTMLAttributes<HTMLCrmBonusFormElement>;
|
96
|
+
"phone-input-mask": LocalJSX.PhoneInputMask & JSXBase.HTMLAttributes<HTMLPhoneInputMaskElement>;
|
70
97
|
}
|
71
98
|
}
|
72
99
|
}
|