@navservice/web-components 1.11.0 → 1.13.0

package/build/es/componentes/drawer/web-drawer-lateral.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+export interface TypesWebDrawerAPI {
+    setOpenModal?(): void;
+    setCloseModal?(): void;
+    setClearAndClose?(): void;
+    getEscClose?(): void;
+    onOpen?: (value: boolean) => void;
+    onClose?: (value: boolean) => void;
+    onClear?: (value: boolean) => void;
+    onEscClose?: (value: boolean) => void;
+}
+export declare class TypesWebDrawer extends LitElement implements TypesWebDrawerAPI {
+    onOpen?: (value: boolean) => void;
+    onClose?: (value: boolean) => void;
+    onClear?: (value: boolean) => void;
+    onEscClose?: (value: boolean) => void;
+    private accessor open;
+    private accessor escClose;
+    createRenderRoot(): this;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleKeydown;
+    getEscClose(): boolean;
+    setOpenModal: () => void;
+    setCloseModal: () => void;
+    setClearAndClose: () => void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/build/es/index.d.ts

@@ -1,13 +1,4 @@
 import './index.css';
-import { MyElement } from './my-element';
-export * from './my-element';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'my-element': Partial<MyElement> & {
-                ref?: any;
-            };
-        }
-    }
-}
+import './types.ts';
+export * from './componentes/drawer/web-drawer-lateral.ts';
 export {};

package/build/es/index.js

@@ -295,15 +295,15 @@ function applyDecs2203RFactory() {
 function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
     return (_apply_decs_2203_r = applyDecs2203RFactory())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec, _dec1, _init_open, _init_setOnEscClose, _initProto;
+var _dec, _dec1, _init_open, _init_escClose, _initProto;
 _dec = property({
     type: Boolean
 }), _dec1 = property({
     type: Boolean
 });
-class MyElement extends LitElement {
+class TypesWebDrawer extends LitElement {
     static{
-        ({ e: [_init_open, _init_setOnEscClose, _initProto] } = _apply_decs_2203_r(this, [
+        ({ e: [_init_open, _init_escClose, _initProto] } = _apply_decs_2203_r(this, [
             [
                 _dec,
                 1,
@@ -312,10 +312,14 @@ class MyElement extends LitElement {
             [
                 _dec1,
                 1,
-                "setOnEscClose"
+                "escClose"
             ]
         ], []));
     }
+    onOpen;
+    onClose;
+    onClear;
+    onEscClose;
     #___private_open_1 = (_initProto(this), _init_open(this, false));
     get open() {
         return this.#___private_open_1;
@@ -323,12 +327,12 @@ class MyElement extends LitElement {
     set open(_v) {
         this.#___private_open_1 = _v;
     }
-    #___private_setOnEscClose_2 = _init_setOnEscClose(this, true);
-    get setOnEscClose() {
-        return this.#___private_setOnEscClose_2;
+    #___private_escClose_2 = _init_escClose(this, true);
+    get escClose() {
+        return this.#___private_escClose_2;
     }
-    set setOnEscClose(_v) {
-        this.#___private_setOnEscClose_2 = _v;
+    set escClose(_v) {
+        this.#___private_escClose_2 = _v;
     }
     createRenderRoot() {
         return this;
@@ -342,80 +346,86 @@ class MyElement extends LitElement {
         super.disconnectedCallback();
     }
     handleKeydown = (event)=>{
-        if (this.setOnEscClose && 'Escape' === event.key && this.open) this.closeModal();
+        if (this.escClose && 'Escape' === event.key && this.open) this.setCloseModal();
     };
-    openModal = ()=>{
+    getEscClose() {
+        this.onEscClose?.(this.escClose);
+        return this.escClose;
+    }
+    setOpenModal = ()=>{
         this.open = true;
+        this.onOpen?.(this.open);
     };
-    closeModal = ()=>{
+    setCloseModal = ()=>{
         this.open = false;
+        this.onClose?.(this.open);
     };
-    clearAndClose = ()=>{
-        console.log('Clear acionado');
+    setClearAndClose = ()=>{
         this.open = false;
+        this.onClear?.(this.open);
     };
     render() {
-        return html`
-      <div class="min-h-screen flex flex-col items-center justify-center gap-3 bg-gradient-to-br from-gray-50 to-gray-100">
-        <h1 class="text-3xl font-semibold tracking-tight text-gray-900">
-          Rsbuild + Lit
-        </h1>
-        <p class="text-sm text-gray-500">
-          Interface minimalista, rápida e moderna.
-        </p>
-
-        <button
-          class="mt-4 inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 shadow-sm transition hover:bg-gray-50 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
-          @click=${this.openModal}
-        >
-          Abrir modal lateral
-        </button>
-      </div>
-
-      <!-- Overlay -->
-      <div
-        class="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-300
-        ${this.open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}"
-        @click=${this.closeModal}
-      ></div>
-
-      <!-- Drawer -->
-      <aside
-        class="fixed right-0 top-0 z-50 h-full w-full max-w-md bg-white shadow-2xl
-        transition-transform duration-300 ease-out
-        ${this.open ? 'translate-x-0' : 'translate-x-full'}"
-      >
-        <div class="flex h-full flex-col p-6">
-          <div class="mb-4">
-            <h2 class="text-lg font-semibold text-gray-900">
-              Confirmação
-            </h2>
-            <p class="mt-1 text-sm text-gray-500">
-              Este é um modal lateral com UX inspirada em Vercel e Cloudflare.
-            </p>
-          </div>
-
-          <div class="flex-1"></div>
-
-          <div class="flex justify-end gap-3 border-t pt-4">
-            <button
-              class="rounded-md px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 transition"
-              @click=${this.clearAndClose}
-            >
-              Cancelar
-            </button>
-
-            <button
-              class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 transition"
-              @click=${this.closeModal}
-            >
-              Confirmar
-            </button>
-          </div>
-        </div>
-      </aside>
+        return html`
+      <div class="min-h-screen flex flex-col items-center justify-center gap-3 bg-gradient-to-br from-gray-50 to-gray-100">
+        <h1 class="text-3xl font-semibold tracking-tight text-gray-900">
+          Rsbuild + Lit
+        </h1>
+        <p class="text-sm text-gray-500">
+          Interface minimalista, rápida e moderna.
+        </p>
+
+        <button
+          class="mt-4 inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 shadow-sm transition hover:bg-gray-50 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          @click=${this.setOpenModal}
+        >
+          Abrir modal lateral
+        </button>
+      </div>
+
+      <!-- Overlay -->
+      <div
+        class="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-300
+        ${this.open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}"
+        @click=${this.setCloseModal}
+      ></div>
+
+      <!-- Drawer -->
+      <aside
+        class="fixed right-0 top-0 z-50 h-full w-full max-w-md bg-white shadow-2xl
+        transition-transform duration-300 ease-out
+        ${this.open ? 'translate-x-0' : 'translate-x-full'}"
+      >
+        <div class="flex h-full flex-col p-6">
+          <div class="mb-4">
+            <h2 class="text-lg font-semibold text-gray-900">
+              Confirmação
+            </h2>
+            <p class="mt-1 text-sm text-gray-500">
+              Este é um modal lateral com UX inspirada em Vercel e Cloudflare.
+            </p>
+          </div>
+
+          <div class="flex-1"></div>
+
+          <div class="flex justify-end gap-3 border-t pt-4">
+            <button
+              class="rounded-md px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 transition"
+              @click=${this.setClearAndClose}
+            >
+              Cancelar
+            </button>
+
+            <button
+              class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 transition"
+              @click=${this.setCloseModal}
+            >
+              Confirmar
+            </button>
+          </div>
+        </div>
+      </aside>
     `;
     }
 }
-if (!customElements.get('my-element')) customElements.define('my-element', MyElement);
-export { MyElement };
+if (!customElements.get('my-element')) customElements.define('my-element', TypesWebDrawer);
+export { TypesWebDrawer };

package/build/es/types.d.ts

@@ -0,0 +1,26 @@
+import type { TypesWebDrawer } from './componentes/drawer/web-drawer-lateral';
+declare global {
+    interface HTMLElementTagNameMap {
+        'my-element': TypesWebDrawer;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'my-element': Partial<TypesWebDrawer>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'my-element': Partial<TypesWebDrawer>;
+            }
+        }
+    }
+    namespace Vue {
+        namespace JSX {
+            interface IntrinsicElements {
+                'my-element': Partial<TypesWebDrawer>;
+            }
+        }
+    }
+}
+export {};

package/build/lib/componentes/drawer/web-drawer-lateral.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+export interface TypesWebDrawerAPI {
+    setOpenModal?(): void;
+    setCloseModal?(): void;
+    setClearAndClose?(): void;
+    getEscClose?(): void;
+    onOpen?: (value: boolean) => void;
+    onClose?: (value: boolean) => void;
+    onClear?: (value: boolean) => void;
+    onEscClose?: (value: boolean) => void;
+}
+export declare class TypesWebDrawer extends LitElement implements TypesWebDrawerAPI {
+    onOpen?: (value: boolean) => void;
+    onClose?: (value: boolean) => void;
+    onClear?: (value: boolean) => void;
+    onEscClose?: (value: boolean) => void;
+    private accessor open;
+    private accessor escClose;
+    createRenderRoot(): this;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleKeydown;
+    getEscClose(): boolean;
+    setOpenModal: () => void;
+    setCloseModal: () => void;
+    setClearAndClose: () => void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/build/lib/index.d.ts

@@ -1,13 +1,4 @@
 import './index.css';
-import { MyElement } from './my-element';
-export * from './my-element';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'my-element': Partial<MyElement> & {
-                ref?: any;
-            };
-        }
-    }
-}
+import './types.ts';
+export * from './componentes/drawer/web-drawer-lateral.ts';
 export {};

package/build/lib/index.js

@@ -49,7 +49,7 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  MyElement: () => (/* reexport */ MyElement)
+  TypesWebDrawer: () => (/* reexport */ TypesWebDrawer)
 });
 
 ;// CONCATENATED MODULE: ./src/index.css
@@ -117,7 +117,7 @@ const lit_html_t=globalThis,lit_html_i=t=>t,lit_html_s=lit_html_t.trustedTypes,l
 
 //# sourceMappingURL=decorators.js.map
 
-;// CONCATENATED MODULE: ./src/my-element.ts
+;// CONCATENATED MODULE: ./src/componentes/drawer/web-drawer-lateral.ts
 function applyDecs2203RFactory() {
     function createAddInitializerMethod(initializers, decoratorFinishedRef) {
         return function addInitializer(initializer) {
@@ -490,7 +490,8 @@ function applyDecs2203RFactory() {
 function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
     return (_apply_decs_2203_r = applyDecs2203RFactory())(targetClass, memberDecs, classDecs, parentClass);
 }
-var _dec, _dec1, _init_open, _init_setOnEscClose, _initProto;
+var _dec, _dec1, // Propriedades:
+_init_open, _init_escClose, _initProto;
 
 
 _dec = property_n({
@@ -498,9 +499,9 @@ _dec = property_n({
 }), _dec1 = property_n({
     type: Boolean
 });
-class MyElement extends lit_element_i {
+class TypesWebDrawer extends lit_element_i {
     static{
-        ({ e: [_init_open, _init_setOnEscClose, _initProto] } = _apply_decs_2203_r(this, [
+        ({ e: [_init_open, _init_escClose, _initProto] } = _apply_decs_2203_r(this, [
             [
                 _dec,
                 1,
@@ -509,10 +510,15 @@ class MyElement extends lit_element_i {
             [
                 _dec1,
                 1,
-                "setOnEscClose"
+                "escClose"
             ]
         ], []));
     }
+    // Funções recursivas:
+    onOpen;
+    onClose;
+    onClear;
+    onEscClose;
     #___private_open_1 = (_initProto(this), _init_open(this, false));
     get open() {
         return this.#___private_open_1;
@@ -520,12 +526,12 @@ class MyElement extends lit_element_i {
     set open(_v) {
         this.#___private_open_1 = _v;
     }
-    #___private_setOnEscClose_2 = _init_setOnEscClose(this, true);
-    get setOnEscClose() {
-        return this.#___private_setOnEscClose_2;
+    #___private_escClose_2 = _init_escClose(this, true);
+    get escClose() {
+        return this.#___private_escClose_2;
     }
-    set setOnEscClose(_v) {
-        this.#___private_setOnEscClose_2 = _v;
+    set escClose(_v) {
+        this.#___private_escClose_2 = _v;
     }
     createRenderRoot() {
         return this;
@@ -539,80 +545,86 @@ class MyElement extends lit_element_i {
         super.disconnectedCallback();
     }
     handleKeydown = (event)=>{
-        if (this.setOnEscClose && event.key === 'Escape' && this.open) {
-            this.closeModal();
+        if (this.escClose && event.key === 'Escape' && this.open) {
+            this.setCloseModal();
         }
     };
-    openModal = ()=>{
+    getEscClose() {
+        this.onEscClose?.(this.escClose);
+        return this.escClose;
+    }
+    setOpenModal = ()=>{
         this.open = true;
+        this.onOpen?.(this.open);
     };
-    closeModal = ()=>{
+    setCloseModal = ()=>{
         this.open = false;
+        this.onClose?.(this.open);
     };
-    clearAndClose = ()=>{
-        console.log('Clear acionado');
+    setClearAndClose = ()=>{
         this.open = false;
+        this.onClear?.(this.open);
     };
     render() {
-        return lit_html_b`
-      <div class="min-h-screen flex flex-col items-center justify-center gap-3 bg-gradient-to-br from-gray-50 to-gray-100">
-        <h1 class="text-3xl font-semibold tracking-tight text-gray-900">
-          Rsbuild + Lit
-        </h1>
-        <p class="text-sm text-gray-500">
-          Interface minimalista, rápida e moderna.
-        </p>
-
-        <button
-          class="mt-4 inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 shadow-sm transition hover:bg-gray-50 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
-          @click=${this.openModal}
-        >
-          Abrir modal lateral
-        </button>
-      </div>
-
-      <!-- Overlay -->
-      <div
-        class="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-300
-        ${this.open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}"
-        @click=${this.closeModal}
-      ></div>
-
-      <!-- Drawer -->
-      <aside
-        class="fixed right-0 top-0 z-50 h-full w-full max-w-md bg-white shadow-2xl
-        transition-transform duration-300 ease-out
-        ${this.open ? 'translate-x-0' : 'translate-x-full'}"
-      >
-        <div class="flex h-full flex-col p-6">
-          <div class="mb-4">
-            <h2 class="text-lg font-semibold text-gray-900">
-              Confirmação
-            </h2>
-            <p class="mt-1 text-sm text-gray-500">
-              Este é um modal lateral com UX inspirada em Vercel e Cloudflare.
-            </p>
-          </div>
-
-          <div class="flex-1"></div>
-
-          <div class="flex justify-end gap-3 border-t pt-4">
-            <button
-              class="rounded-md px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 transition"
-              @click=${this.clearAndClose}
-            >
-              Cancelar
-            </button>
-
-            <button
-              class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 transition"
-              @click=${this.closeModal}
-            >
-              Confirmar
-            </button>
-          </div>
-        </div>
-      </aside>
+        return lit_html_b`
+      <div class="min-h-screen flex flex-col items-center justify-center gap-3 bg-gradient-to-br from-gray-50 to-gray-100">
+        <h1 class="text-3xl font-semibold tracking-tight text-gray-900">
+          Rsbuild + Lit
+        </h1>
+        <p class="text-sm text-gray-500">
+          Interface minimalista, rápida e moderna.
+        </p>
+
+        <button
+          class="mt-4 inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 shadow-sm transition hover:bg-gray-50 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          @click=${this.setOpenModal}
+        >
+          Abrir modal lateral
+        </button>
+      </div>
+
+      <!-- Overlay -->
+      <div
+        class="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-300
+        ${this.open ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}"
+        @click=${this.setCloseModal}
+      ></div>
+
+      <!-- Drawer -->
+      <aside
+        class="fixed right-0 top-0 z-50 h-full w-full max-w-md bg-white shadow-2xl
+        transition-transform duration-300 ease-out
+        ${this.open ? 'translate-x-0' : 'translate-x-full'}"
+      >
+        <div class="flex h-full flex-col p-6">
+          <div class="mb-4">
+            <h2 class="text-lg font-semibold text-gray-900">
+              Confirmação
+            </h2>
+            <p class="mt-1 text-sm text-gray-500">
+              Este é um modal lateral com UX inspirada em Vercel e Cloudflare.
+            </p>
+          </div>
+
+          <div class="flex-1"></div>
+
+          <div class="flex justify-end gap-3 border-t pt-4">
+            <button
+              class="rounded-md px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 transition"
+              @click=${this.setClearAndClose}
+            >
+              Cancelar
+            </button>
+
+            <button
+              class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 transition"
+              @click=${this.setCloseModal}
+            >
+              Confirmar
+            </button>
+          </div>
+        </div>
+      </aside>
     `;
     }
 }
@@ -620,10 +632,10 @@ class MyElement extends lit_element_i {
 ;// CONCATENATED MODULE: ./src/index.ts
 
 
+// DRAWER 
 
-if (!customElements.get('my-element')) {
-    customElements.define('my-element', MyElement);
-}
+
+if (!customElements.get('my-element')) customElements.define('my-element', TypesWebDrawer);
 
 return __webpack_exports__;
 })()

package/build/lib/types.d.ts

@@ -0,0 +1,26 @@
+import type { TypesWebDrawer } from './componentes/drawer/web-drawer-lateral';
+declare global {
+    interface HTMLElementTagNameMap {
+        'my-element': TypesWebDrawer;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'my-element': Partial<TypesWebDrawer>;
+        }
+    }
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'my-element': Partial<TypesWebDrawer>;
+            }
+        }
+    }
+    namespace Vue {
+        namespace JSX {
+            interface IntrinsicElements {
+                'my-element': Partial<TypesWebDrawer>;
+            }
+        }
+    }
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@navservice/web-components",
-    "version": "1.11.0",
+    "version": "1.13.0",
     "description": "Service de autenticação de usuários unificado",
     "type": "module",
     "main": "./build/lib/index.js",

package/build/es/my-element.d.ts

@@ -1,13 +0,0 @@
-import { LitElement } from 'lit';
-export declare class MyElement extends LitElement {
-    accessor open: boolean;
-    accessor setOnEscClose: boolean;
-    createRenderRoot(): this;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    handleKeydown: (event: KeyboardEvent) => void;
-    openModal: () => void;
-    closeModal: () => void;
-    clearAndClose: () => void;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/build/lib/my-element.d.ts

@@ -1,13 +0,0 @@
-import { LitElement } from 'lit';
-export declare class MyElement extends LitElement {
-    accessor open: boolean;
-    accessor setOnEscClose: boolean;
-    createRenderRoot(): this;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    handleKeydown: (event: KeyboardEvent) => void;
-    openModal: () => void;
-    closeModal: () => void;
-    clearAndClose: () => void;
-    render(): import("lit-html").TemplateResult<1>;
-}