crmbonus-component-wake 0.0.6 → 0.0.8

package/dist/crmbonus-component-wake/phone-input-mask.entry.js

@@ -0,0 +1,35 @@
+import { r as registerInstance, h } from './index-f4f9c8f2.js';
+
+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}";
+
+const PhoneInputMask = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.phone = '';
+    }
+    formatPhone(value) {
+        const cleaned = value.replace(/\D/g, ''); // Remove tudo que não for número
+        const match = cleaned.match(/^(\d{0,2})(\d{0,5})(\d{0,4})$/);
+        if (!match)
+            return value;
+        const part1 = match[1] ? `(${match[1]}` : '';
+        const part2 = match[2] ? `) ${match[2]}` : '';
+        const part3 = match[3] ? `-${match[3]}` : '';
+        return `${part1}${part2}${part3}`;
+    }
+    handleInput(event) {
+        const input = event.target;
+        this.phone = this.formatPhone(input.value);
+    }
+    async getPhone() {
+        return this.phone;
+    }
+    render() {
+        return (h("input", { key: '1b768d2d024a5482908316d7653bb02404332a64', id: "phone", type: "tel", class: "phone", value: this.phone, onInput: (event) => this.handleInput(event), placeholder: "(12) 94567-8910" }));
+    }
+};
+PhoneInputMask.style = phoneInputMaskCss;
+
+export { PhoneInputMask as phone_input_mask };
+
+//# sourceMappingURL=phone-input-mask.entry.js.map

package/dist/crmbonus-component-wake/phone-input-mask.entry.js.map

@@ -0,0 +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}

package/dist/types/components/crm-bonus-form/crm-bonus-form.d.ts

@@ -0,0 +1,5 @@
+export declare class CrmBonusForm {
+    private phoneInputMask;
+    validate(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/phone/phone-input-mask.d.ts

@@ -0,0 +1,7 @@
+export declare class PhoneInputMask {
+    phone: string;
+    private formatPhone;
+    private handleInput;
+    getPhone(): Promise<string>;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -13,6 +13,11 @@ export namespace Components {
     interface CrmBonus {
         "userId": string;
     }
+    interface CrmBonusForm {
+    }
+    interface PhoneInputMask {
+        "getPhone": () => Promise<string>;
+    }
 }
 export interface AppModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -42,9 +47,23 @@ declare global {
         prototype: HTMLCrmBonusElement;
         new (): HTMLCrmBonusElement;
     };
+    interface HTMLCrmBonusFormElement extends Components.CrmBonusForm, HTMLStencilElement {
+    }
+    var HTMLCrmBonusFormElement: {
+        prototype: HTMLCrmBonusFormElement;
+        new (): HTMLCrmBonusFormElement;
+    };
+    interface HTMLPhoneInputMaskElement extends Components.PhoneInputMask, HTMLStencilElement {
+    }
+    var HTMLPhoneInputMaskElement: {
+        prototype: HTMLPhoneInputMaskElement;
+        new (): HTMLPhoneInputMaskElement;
+    };
     interface HTMLElementTagNameMap {
         "app-modal": HTMLAppModalElement;
         "crm-bonus": HTMLCrmBonusElement;
+        "crm-bonus-form": HTMLCrmBonusFormElement;
+        "phone-input-mask": HTMLPhoneInputMaskElement;
     }
 }
 declare namespace LocalJSX {
@@ -56,9 +75,15 @@ declare namespace LocalJSX {
     interface CrmBonus {
         "userId"?: string;
     }
+    interface CrmBonusForm {
+    }
+    interface PhoneInputMask {
+    }
     interface IntrinsicElements {
         "app-modal": AppModal;
         "crm-bonus": CrmBonus;
+        "crm-bonus-form": CrmBonusForm;
+        "phone-input-mask": PhoneInputMask;
     }
 }
 export { LocalJSX as JSX };
@@ -67,6 +92,8 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "app-modal": LocalJSX.AppModal & JSXBase.HTMLAttributes<HTMLAppModalElement>;
             "crm-bonus": LocalJSX.CrmBonus & JSXBase.HTMLAttributes<HTMLCrmBonusElement>;
+            "crm-bonus-form": LocalJSX.CrmBonusForm & JSXBase.HTMLAttributes<HTMLCrmBonusFormElement>;
+            "phone-input-mask": LocalJSX.PhoneInputMask & JSXBase.HTMLAttributes<HTMLPhoneInputMaskElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crmbonus-component-wake",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",