keevo-components 2.0.287 → 2.0.288

package/esm2022/lib/components/kv-instruction-page/kv-instruction-page.component.mjs

@@ -1,75 +1,29 @@
-import { Component, computed, input, HostListener, signal, ChangeDetectionStrategy } from '@angular/core';
+import { Component, computed, input } from '@angular/core';
 import { KvButtonModule } from '../kv-button/kv-button.module';
 import { DividerModule } from 'primeng/divider';
 import { KvCardsInstructionComponent } from './components/cards-instruction/kv-cards-instruction.component';
+import { SidebarModule } from 'primeng/sidebar';
 import * as i0 from "@angular/core";
 import * as i1 from "../kv-button/kv-button.component";
+import * as i2 from "primeng/sidebar";
 export class KvInstructionPageComponent {
     constructor() {
         this.actions = input([]);
         this.camposObrigatorios = input(false);
-        // Define se o painel inicia aberto (true) ou fechado (false). Por padrão é true no desktop.
-        this.startExpanded = input(true);
         this.whiteCard = input(undefined);
         this.blackCard = input();
-        this.isMobile = signal(false);
-        this.userToggledPanel = signal(null);
-        this.isPanelExpanded = computed(() => {
-            // 1. Respeita a interação manual do usuário primeiro
-            const toggled = this.userToggledPanel();
-            if (toggled !== null)
-                return toggled;
-            // 2. Se for mobile, inicia sempre fechado como padrão por UX
-            if (this.isMobile())
-                return false;
-            // 3. Respeita a propriedade (true ou false) definida pelo desenvolvedor na tela via @Input
-            return this.startExpanded();
-        });
-        this.mainContentWidth = computed(() => {
-            if (!this.whiteCard() && !this.blackCard())
-                return '100%';
-            const expanded = this.isPanelExpanded();
-            const mobile = this.isMobile();
-            if (mobile)
-                return expanded ? '0%' : '100%';
-            return expanded ? 'calc(75% - 0.25rem)' : '100%';
-        });
-        this.panelWidth = computed(() => {
+        this.sizeContent = computed(() => {
             if (!this.whiteCard() && !this.blackCard())
-                return '0%';
-            const expanded = this.isPanelExpanded();
-            const mobile = this.isMobile();
-            if (mobile)
-                return expanded ? '100%' : '0%';
-            return expanded ? 'calc(25% - 0.25rem)' : '0%';
+                return 'w-full';
+            return 'w-9';
         });
-    }
-    ngOnInit() {
-        this.checkMobileState();
-    }
-    onResize() {
-        this.checkMobileState();
-    }
-    checkMobileState() {
-        if (typeof window !== 'undefined') {
-            const isMob = window.innerWidth < 1024;
-            // Atualiza o sinal apenas se houver mudança real, economiza ciclos do Change Detection
-            if (this.isMobile() !== isMob) {
-                this.isMobile.set(isMob);
-            }
-        }
-    }
-    togglePanel() {
-        this.userToggledPanel.set(!this.isPanelExpanded());
+        this.verIntrucoes = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvInstructionPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvInstructionPageComponent, isStandalone: true, selector: "kv-instruction-page", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, camposObrigatorios: { classPropertyName: "camposObrigatorios", publicName: "camposObrigatorios", isSignal: true, isRequired: false, transformFunction: null }, startExpanded: { classPropertyName: "startExpanded", publicName: "startExpanded", isSignal: true, isRequired: false, transformFunction: null }, whiteCard: { classPropertyName: "whiteCard", publicName: "whiteCard", isSignal: true, isRequired: false, transformFunction: null }, blackCard: { classPropertyName: "blackCard", publicName: "blackCard", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<div class=\"h-full flex flex-column overflow-hidden relative\">\r\n  <div class=\"flex-1 min-h-0 flex flex-row p-2 justify-content-between relative overflow-hidden\">\r\n    <!-- Main Content Container -->\r\n    <div class=\"h-full max-h-full transition-all duration-300 ease-in-out overflow-y-auto flex-shrink-0\"\r\n      [style.width]=\"mainContentWidth()\" [class.opacity-0]=\"isMobile() && isPanelExpanded()\">\r\n      <ng-content select=\"[main-content]\"></ng-content>\r\n    </div>\r\n\r\n    <!-- Instruction Page Panel (Side) -->\r\n    <div class=\"h-full transition-all duration-300 ease-in-out flex-shrink-0 overflow-y-auto\"\r\n      [style.width]=\"panelWidth()\" [class.opacity-0]=\"!isPanelExpanded()\">\r\n      <kv-cards-instruction [whiteCard]=\"whiteCard()\" [blackCard]=\"blackCard()\" class=\"block w-full h-full\">\r\n        <div white-card-content class=\"h-full\">\r\n          <ng-content select=\"[white-card-content]\"></ng-content>\r\n        </div>\r\n        <div black-card-content class=\"h-full\">\r\n          <ng-content select=\"[black-card-content]\"></ng-content>\r\n        </div>\r\n      </kv-cards-instruction>\r\n    </div>\r\n\r\n    <!-- Floating Toggle Button -->\r\n    @if (whiteCard() || blackCard()) {\r\n    <kv-button [severity]=\"'secondary'\" [size]=\"'large'\" [type]=\"isPanelExpanded() ? 'text' : undefined\"\r\n      [icon]=\"isPanelExpanded() ? 'close' : 'quick_reference'\"\r\n      class=\"absolute z-50 transition-all duration-300 ease-in-out bg-white inline-flex border-round\"\r\n      [style.top]=\"'1rem'\" [style.right]=\"'1rem'\" (onClick)=\"togglePanel()\">\r\n    </kv-button>\r\n    }\r\n  </div>\r\n\r\n  @if (actions().length > 0) {\r\n  <div class=\"flex-initial flex-none flex flex-row justify-content-{{\r\n        camposObrigatorios() ? 'between' : 'end'\r\n      }} align-items-center p-2\">\r\n    @if (camposObrigatorios()) {\r\n    <span class=\"text-xs text-red-500 font-semibold\">* Preenchimento obrigat\u00F3rio</span>\r\n    }\r\n\r\n    <div class=\"flex flex-row justify-content-end gap-2\">\r\n      @for (action of actions().slice().reverse(); track action.index) {\r\n      <kv-button [label]=\"action.label || ''\" [severity]=\"action.severity || 'tertiary'\"\r\n        [disabled]=\"action.disabled || false\" [type]=\"action.type\" [size]=\"action.size || 'small'\"\r\n        [icon]=\"action.icon || ''\" [iconPosition]=\"action.iconPosition || 'left'\" [items]=\"action.items || []\"\r\n        [popup]=\"action.popup || false\" [popupIcon]=\"action.popupIcon || false\" [fullWidth]=\"action.fullWidth || false\"\r\n        (onClick)=\"action?.command($event)\"></kv-button>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: KvButtonModule }, { kind: "component", type: i1.KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "iconPosition", "label", "disabled", "items", "popup", "popupIcon"], outputs: ["iconChange", "onClick"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: KvCardsInstructionComponent, selector: "kv-cards-instruction", inputs: ["whiteCard", "blackCard"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvInstructionPageComponent, isStandalone: true, selector: "kv-instruction-page", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, camposObrigatorios: { classPropertyName: "camposObrigatorios", publicName: "camposObrigatorios", isSignal: true, isRequired: false, transformFunction: null }, whiteCard: { classPropertyName: "whiteCard", publicName: "whiteCard", isSignal: true, isRequired: false, transformFunction: null }, blackCard: { classPropertyName: "blackCard", publicName: "blackCard", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"h-full flex flex-column overflow-hidden\">\r\n  <div class=\"flex-1 min-h-0 flex flex-row p-2 gap-2\">\r\n    <div\r\n      class=\"h-full max-h-full overflow-y-auto w-12 lg:{{\r\n        sizeContent()\r\n      }} relative\"\r\n    >\r\n      @if (this.whiteCard() || this.blackCard()) {\r\n        <kv-button\r\n          [severity]=\"'secondary'\"\r\n          [type]=\"'text'\"\r\n          [size]=\"'large'\"\r\n          [icon]=\"'quick_reference'\"\r\n          class=\"block lg:hidden absolute top-0 right-0 pt-1 pr-1\"\r\n          (onClick)=\"verIntrucoes = true\"\r\n        >\r\n        </kv-button>\r\n      }\r\n\r\n      <ng-content select=\"[main-content]\"></ng-content>\r\n    </div>\r\n\r\n    <div\r\n      class=\"hidden lg:block w-3 h-full\"\r\n      [class.none]=\"!whiteCard() && !blackCard()\"\r\n    >\r\n      <kv-cards-instruction\r\n        [whiteCard]=\"whiteCard()\"\r\n        [blackCard]=\"blackCard()\"\r\n      >\r\n        <div white-card-content class=\"h-full\">\r\n          <ng-content select=\"[white-card-content]\"></ng-content>\r\n        </div>\r\n        <div black-card-content class=\"h-full\">\r\n          <ng-content select=\"[black-card-content]\"></ng-content>\r\n        </div>\r\n      </kv-cards-instruction>\r\n    </div>\r\n  </div>\r\n\r\n  @if (actions().length > 0) {\r\n    <div\r\n      class=\"flex-initial flex-none flex flex-row justify-content-{{\r\n        camposObrigatorios() ? 'between' : 'end'\r\n      }} align-items-center p-2\"\r\n    >\r\n      @if (camposObrigatorios()) {\r\n        <span class=\"text-xs text-red-500 font-semibold\">* Preenchimento obrigat\u00F3rio</span>\r\n      }\r\n\r\n      <div class=\"flex flex-row justify-content-end gap-2\">\r\n        @for (action of actions().slice().reverse(); track action.index) {\r\n          <kv-button\r\n            [label]=\"action.label || ''\"\r\n            [severity]=\"action.severity || 'tertiary'\"\r\n            [disabled]=\"action.disabled || false\"\r\n            [type]=\"action.type\"\r\n            [size]=\"action.size || 'small'\"\r\n            [icon]=\"action.icon || ''\"\r\n            [iconPosition]=\"action.iconPosition || 'left'\"\r\n            [items]=\"action.items || []\"\r\n            [popup]=\"action.popup || false\"\r\n            [popupIcon]=\"action.popupIcon || false\"\r\n            [fullWidth]=\"action.fullWidth || false\"\r\n            (onClick)=\"action?.command($event)\"\r\n          ></kv-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<p-sidebar\r\n  [(visible)]=\"verIntrucoes\"\r\n  position=\"right\"\r\n  appendTo=\"body\"\r\n  [showCloseIcon]=\"true\"\r\n  styleClass=\"w-30rem\"\r\n>\r\n  <kv-cards-instruction [whiteCard]=\"whiteCard()\" [blackCard]=\"blackCard()\">\r\n    <div white-card-content>\r\n      <ng-content select=\"[white-card-content]\"></ng-content>\r\n    </div>\r\n    <div black-card-content>\r\n      <ng-content select=\"[black-card-content]\"></ng-content>\r\n    </div>\r\n  </kv-cards-instruction>\r\n</p-sidebar>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: KvButtonModule }, { kind: "component", type: i1.KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "iconPosition", "label", "disabled", "items", "popup", "popupIcon"], outputs: ["iconChange", "onClick"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: KvCardsInstructionComponent, selector: "kv-cards-instruction", inputs: ["whiteCard", "blackCard"] }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i2.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvInstructionPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-instruction-page', standalone: true, imports: [KvButtonModule, DividerModule, KvCardsInstructionComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"h-full flex flex-column overflow-hidden relative\">\r\n  <div class=\"flex-1 min-h-0 flex flex-row p-2 justify-content-between relative overflow-hidden\">\r\n    <!-- Main Content Container -->\r\n    <div class=\"h-full max-h-full transition-all duration-300 ease-in-out overflow-y-auto flex-shrink-0\"\r\n      [style.width]=\"mainContentWidth()\" [class.opacity-0]=\"isMobile() && isPanelExpanded()\">\r\n      <ng-content select=\"[main-content]\"></ng-content>\r\n    </div>\r\n\r\n    <!-- Instruction Page Panel (Side) -->\r\n    <div class=\"h-full transition-all duration-300 ease-in-out flex-shrink-0 overflow-y-auto\"\r\n      [style.width]=\"panelWidth()\" [class.opacity-0]=\"!isPanelExpanded()\">\r\n      <kv-cards-instruction [whiteCard]=\"whiteCard()\" [blackCard]=\"blackCard()\" class=\"block w-full h-full\">\r\n        <div white-card-content class=\"h-full\">\r\n          <ng-content select=\"[white-card-content]\"></ng-content>\r\n        </div>\r\n        <div black-card-content class=\"h-full\">\r\n          <ng-content select=\"[black-card-content]\"></ng-content>\r\n        </div>\r\n      </kv-cards-instruction>\r\n    </div>\r\n\r\n    <!-- Floating Toggle Button -->\r\n    @if (whiteCard() || blackCard()) {\r\n    <kv-button [severity]=\"'secondary'\" [size]=\"'large'\" [type]=\"isPanelExpanded() ? 'text' : undefined\"\r\n      [icon]=\"isPanelExpanded() ? 'close' : 'quick_reference'\"\r\n      class=\"absolute z-50 transition-all duration-300 ease-in-out bg-white inline-flex border-round\"\r\n      [style.top]=\"'1rem'\" [style.right]=\"'1rem'\" (onClick)=\"togglePanel()\">\r\n    </kv-button>\r\n    }\r\n  </div>\r\n\r\n  @if (actions().length > 0) {\r\n  <div class=\"flex-initial flex-none flex flex-row justify-content-{{\r\n        camposObrigatorios() ? 'between' : 'end'\r\n      }} align-items-center p-2\">\r\n    @if (camposObrigatorios()) {\r\n    <span class=\"text-xs text-red-500 font-semibold\">* Preenchimento obrigat\u00F3rio</span>\r\n    }\r\n\r\n    <div class=\"flex flex-row justify-content-end gap-2\">\r\n      @for (action of actions().slice().reverse(); track action.index) {\r\n      <kv-button [label]=\"action.label || ''\" [severity]=\"action.severity || 'tertiary'\"\r\n        [disabled]=\"action.disabled || false\" [type]=\"action.type\" [size]=\"action.size || 'small'\"\r\n        [icon]=\"action.icon || ''\" [iconPosition]=\"action.iconPosition || 'left'\" [items]=\"action.items || []\"\r\n        [popup]=\"action.popup || false\" [popupIcon]=\"action.popupIcon || false\" [fullWidth]=\"action.fullWidth || false\"\r\n        (onClick)=\"action?.command($event)\"></kv-button>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>" }]
-        }], propDecorators: { onResize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia3YtaW5zdHJ1Y3Rpb24tcGFnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rZWV2by1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9rdi1pbnN0cnVjdGlvbi1wYWdlL2t2LWluc3RydWN0aW9uLXBhZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2Vldm8tY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMva3YtaW5zdHJ1Y3Rpb24tcGFnZS9rdi1pbnN0cnVjdGlvbi1wYWdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLHVCQUF1QixFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ2xILE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUUvRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDaEQsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sK0RBQStELENBQUM7OztBQVU1RyxNQUFNLE9BQU8sMEJBQTBCO0lBUnZDO1FBVUUsWUFBTyxHQUFHLEtBQUssQ0FBZ0IsRUFBRSxDQUFDLENBQUM7UUFDbkMsdUJBQWtCLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBRTNDLDRGQUE0RjtRQUM1RixrQkFBYSxHQUFHLEtBQUssQ0FBVSxJQUFJLENBQUMsQ0FBQztRQUVyQyxjQUFTLEdBQUcsS0FBSyxDQUlGLFNBQVMsQ0FBQyxDQUFDO1FBRTFCLGNBQVMsR0FBRyxLQUFLLEVBSUQsQ0FBQztRQUVqQixhQUFRLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBQzFCLHFCQUFnQixHQUFHLE1BQU0sQ0FBaUIsSUFBSSxDQUFDLENBQUM7UUFxQnhELG9CQUFlLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUM5QixxREFBcUQ7WUFDckQsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7WUFDeEMsSUFBSSxPQUFPLEtBQUssSUFBSTtnQkFBRSxPQUFPLE9BQU8sQ0FBQztZQUVyQyw2REFBNkQ7WUFDN0QsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFO2dCQUFFLE9BQU8sS0FBSyxDQUFDO1lBRWxDLDJGQUEyRjtZQUMzRixPQUFPLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUM5QixDQUFDLENBQUMsQ0FBQztRQU1ILHFCQUFnQixHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDL0IsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7Z0JBQUUsT0FBTyxNQUFNLENBQUM7WUFDMUQsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQ3hDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUMvQixJQUFJLE1BQU07Z0JBQUUsT0FBTyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDO1lBQzVDLE9BQU8sUUFBUSxDQUFDLENBQUMsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDO1FBQ25ELENBQUMsQ0FBQyxDQUFDO1FBRUgsZUFBVSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDekIsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7Z0JBQUUsT0FBTyxJQUFJLENBQUM7WUFDeEQsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQ3hDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUMvQixJQUFJLE1BQU07Z0JBQUUsT0FBTyxRQUFRLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1lBQzVDLE9BQU8sUUFBUSxDQUFDLENBQUMsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQ2pELENBQUMsQ0FBQyxDQUFDO0tBRUo7SUFuREMsUUFBUTtRQUNOLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFHRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVPLGdCQUFnQjtRQUNyQixJQUFJLE9BQU8sTUFBTSxLQUFLLFdBQVcsRUFBRSxDQUFDO1lBQ2pDLE1BQU0sS0FBSyxHQUFHLE1BQU0sQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO1lBQ3ZDLHVGQUF1RjtZQUN2RixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsS0FBSyxLQUFLLEVBQUUsQ0FBQztnQkFDN0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDNUIsQ0FBQztRQUNKLENBQUM7SUFDSixDQUFDO0lBY0QsV0FBVztRQUNULElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUMsQ0FBQztJQUNyRCxDQUFDOzhHQXhEVSwwQkFBMEI7a0dBQTFCLDBCQUEwQix3MEJDZHZDLDRxRkFrRE0seUREekNNLGNBQWMsc1JBQUUsYUFBYSwrQkFBRSwyQkFBMkI7OzJGQUt6RCwwQkFBMEI7a0JBUnRDLFNBQVM7K0JBQ0UscUJBQXFCLGNBQ25CLElBQUksV0FDUCxDQUFDLGNBQWMsRUFBRSxhQUFhLEVBQUUsMkJBQTJCLENBQUMsbUJBR3BELHVCQUF1QixDQUFDLE1BQU07OEJBOEIvQyxRQUFRO3NCQURQLFlBQVk7dUJBQUMsZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgY29tcHV0ZWQsIGlucHV0LCBIb3N0TGlzdGVuZXIsIHNpZ25hbCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBLdkJ1dHRvbk1vZHVsZSB9IGZyb20gJy4uL2t2LWJ1dHRvbi9rdi1idXR0b24ubW9kdWxlJztcclxuaW1wb3J0IHsgQnV0dG9uTW9kZWwgfSBmcm9tICcuLi8uLi9hcGkvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLm1vZGVsJztcclxuaW1wb3J0IHsgRGl2aWRlck1vZHVsZSB9IGZyb20gJ3ByaW1lbmcvZGl2aWRlcic7XHJcbmltcG9ydCB7IEt2Q2FyZHNJbnN0cnVjdGlvbkNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9jYXJkcy1pbnN0cnVjdGlvbi9rdi1jYXJkcy1pbnN0cnVjdGlvbi5jb21wb25lbnQnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdrdi1pbnN0cnVjdGlvbi1wYWdlJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtLdkJ1dHRvbk1vZHVsZSwgRGl2aWRlck1vZHVsZSwgS3ZDYXJkc0luc3RydWN0aW9uQ29tcG9uZW50XSxcclxuICB0ZW1wbGF0ZVVybDogJy4va3YtaW5zdHJ1Y3Rpb24tcGFnZS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2t2LWluc3RydWN0aW9uLXBhZ2UuY29tcG9uZW50LnNjc3MnLFxyXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBLdkluc3RydWN0aW9uUGFnZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIGFjdGlvbnMgPSBpbnB1dDxCdXR0b25Nb2RlbFtdPihbXSk7XHJcbiAgY2FtcG9zT2JyaWdhdG9yaW9zID0gaW5wdXQ8Ym9vbGVhbj4oZmFsc2UpO1xyXG4gIFxyXG4gIC8vIERlZmluZSBzZSBvIHBhaW5lbCBpbmljaWEgYWJlcnRvICh0cnVlKSBvdSBmZWNoYWRvIChmYWxzZSkuIFBvciBwYWRyw6NvIMOpIHRydWUgbm8gZGVza3RvcC5cclxuICBzdGFydEV4cGFuZGVkID0gaW5wdXQ8Ym9vbGVhbj4odHJ1ZSk7IFxyXG5cclxuICB3aGl0ZUNhcmQgPSBpbnB1dDx7XHJcbiAgICB0aXRsZTogc3RyaW5nO1xyXG4gICAgaWNvbjogc3RyaW5nO1xyXG4gICAgaGVpZ2h0OiBudW1iZXI7XHJcbiAgfSB8IHVuZGVmaW5lZD4odW5kZWZpbmVkKTtcclxuXHJcbiAgYmxhY2tDYXJkID0gaW5wdXQ8e1xyXG4gICAgdGl0bGU6IHN0cmluZztcclxuICAgIGljb246IHN0cmluZztcclxuICAgIGhlaWdodDogbnVtYmVyO1xyXG4gIH0gfCB1bmRlZmluZWQ+KCk7XHJcblxyXG4gIGlzTW9iaWxlID0gc2lnbmFsPGJvb2xlYW4+KGZhbHNlKTtcclxuICBwcml2YXRlIHVzZXJUb2dnbGVkUGFuZWwgPSBzaWduYWw8Ym9vbGVhbiB8IG51bGw+KG51bGwpO1xyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIHRoaXMuY2hlY2tNb2JpbGVTdGF0ZSgpO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignd2luZG93OnJlc2l6ZScpXHJcbiAgb25SZXNpemUoKSB7XHJcbiAgICB0aGlzLmNoZWNrTW9iaWxlU3RhdGUoKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgY2hlY2tNb2JpbGVTdGF0ZSgpIHtcclxuICAgICBpZiAodHlwZW9mIHdpbmRvdyAhPT0gJ3VuZGVmaW5lZCcpIHtcclxuICAgICAgICBjb25zdCBpc01vYiA9IHdpbmRvdy5pbm5lcldpZHRoIDwgMTAyNDtcclxuICAgICAgICAvLyBBdHVhbGl6YSBvIHNpbmFsIGFwZW5hcyBzZSBob3V2ZXIgbXVkYW7Dp2EgcmVhbCwgZWNvbm9taXphIGNpY2xvcyBkbyBDaGFuZ2UgRGV0ZWN0aW9uXHJcbiAgICAgICAgaWYgKHRoaXMuaXNNb2JpbGUoKSAhPT0gaXNNb2IpIHtcclxuICAgICAgICAgICB0aGlzLmlzTW9iaWxlLnNldChpc01vYik7XHJcbiAgICAgICAgfVxyXG4gICAgIH1cclxuICB9XHJcblxyXG4gIGlzUGFuZWxFeHBhbmRlZCA9IGNvbXB1dGVkKCgpID0+IHtcclxuICAgIC8vIDEuIFJlc3BlaXRhIGEgaW50ZXJhw6fDo28gbWFudWFsIGRvIHVzdcOhcmlvIHByaW1laXJvXHJcbiAgICBjb25zdCB0b2dnbGVkID0gdGhpcy51c2VyVG9nZ2xlZFBhbmVsKCk7XHJcbiAgICBpZiAodG9nZ2xlZCAhPT0gbnVsbCkgcmV0dXJuIHRvZ2dsZWQ7XHJcbiAgICBcclxuICAgIC8vIDIuIFNlIGZvciBtb2JpbGUsIGluaWNpYSBzZW1wcmUgZmVjaGFkbyBjb21vIHBhZHLDo28gcG9yIFVYXHJcbiAgICBpZiAodGhpcy5pc01vYmlsZSgpKSByZXR1cm4gZmFsc2U7XHJcbiAgICBcclxuICAgIC8vIDMuIFJlc3BlaXRhIGEgcHJvcHJpZWRhZGUgKHRydWUgb3UgZmFsc2UpIGRlZmluaWRhIHBlbG8gZGVzZW52b2x2ZWRvciBuYSB0ZWxhIHZpYSBASW5wdXRcclxuICAgIHJldHVybiB0aGlzLnN0YXJ0RXhwYW5kZWQoKTtcclxuICB9KTtcclxuXHJcbiAgdG9nZ2xlUGFuZWwoKSB7XHJcbiAgICB0aGlzLnVzZXJUb2dnbGVkUGFuZWwuc2V0KCF0aGlzLmlzUGFuZWxFeHBhbmRlZCgpKTtcclxuICB9XHJcblxyXG4gIG1haW5Db250ZW50V2lkdGggPSBjb21wdXRlZCgoKSA9PiB7XHJcbiAgICBpZiAoIXRoaXMud2hpdGVDYXJkKCkgJiYgIXRoaXMuYmxhY2tDYXJkKCkpIHJldHVybiAnMTAwJSc7XHJcbiAgICBjb25zdCBleHBhbmRlZCA9IHRoaXMuaXNQYW5lbEV4cGFuZGVkKCk7XHJcbiAgICBjb25zdCBtb2JpbGUgPSB0aGlzLmlzTW9iaWxlKCk7XHJcbiAgICBpZiAobW9iaWxlKSByZXR1cm4gZXhwYW5kZWQgPyAnMCUnIDogJzEwMCUnO1xyXG4gICAgcmV0dXJuIGV4cGFuZGVkID8gJ2NhbGMoNzUlIC0gMC4yNXJlbSknIDogJzEwMCUnO1xyXG4gIH0pO1xyXG5cclxuICBwYW5lbFdpZHRoID0gY29tcHV0ZWQoKCkgPT4ge1xyXG4gICAgaWYgKCF0aGlzLndoaXRlQ2FyZCgpICYmICF0aGlzLmJsYWNrQ2FyZCgpKSByZXR1cm4gJzAlJztcclxuICAgIGNvbnN0IGV4cGFuZGVkID0gdGhpcy5pc1BhbmVsRXhwYW5kZWQoKTtcclxuICAgIGNvbnN0IG1vYmlsZSA9IHRoaXMuaXNNb2JpbGUoKTtcclxuICAgIGlmIChtb2JpbGUpIHJldHVybiBleHBhbmRlZCA/ICcxMDAlJyA6ICcwJSc7XHJcbiAgICByZXR1cm4gZXhwYW5kZWQgPyAnY2FsYygyNSUgLSAwLjI1cmVtKScgOiAnMCUnO1xyXG4gIH0pO1xyXG5cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiaC1mdWxsIGZsZXggZmxleC1jb2x1bW4gb3ZlcmZsb3ctaGlkZGVuIHJlbGF0aXZlXCI+XHJcbiAgPGRpdiBjbGFzcz1cImZsZXgtMSBtaW4taC0wIGZsZXggZmxleC1yb3cgcC0yIGp1c3RpZnktY29udGVudC1iZXR3ZWVuIHJlbGF0aXZlIG92ZXJmbG93LWhpZGRlblwiPlxyXG4gICAgPCEtLSBNYWluIENvbnRlbnQgQ29udGFpbmVyIC0tPlxyXG4gICAgPGRpdiBjbGFzcz1cImgtZnVsbCBtYXgtaC1mdWxsIHRyYW5zaXRpb24tYWxsIGR1cmF0aW9uLTMwMCBlYXNlLWluLW91dCBvdmVyZmxvdy15LWF1dG8gZmxleC1zaHJpbmstMFwiXHJcbiAgICAgIFtzdHlsZS53aWR0aF09XCJtYWluQ29udGVudFdpZHRoKClcIiBbY2xhc3Mub3BhY2l0eS0wXT1cImlzTW9iaWxlKCkgJiYgaXNQYW5lbEV4cGFuZGVkKClcIj5cclxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW21haW4tY29udGVudF1cIj48L25nLWNvbnRlbnQ+XHJcbiAgICA8L2Rpdj5cclxuXHJcbiAgICA8IS0tIEluc3RydWN0aW9uIFBhZ2UgUGFuZWwgKFNpZGUpIC0tPlxyXG4gICAgPGRpdiBjbGFzcz1cImgtZnVsbCB0cmFuc2l0aW9uLWFsbCBkdXJhdGlvbi0zMDAgZWFzZS1pbi1vdXQgZmxleC1zaHJpbmstMCBvdmVyZmxvdy15LWF1dG9cIlxyXG4gICAgICBbc3R5bGUud2lkdGhdPVwicGFuZWxXaWR0aCgpXCIgW2NsYXNzLm9wYWNpdHktMF09XCIhaXNQYW5lbEV4cGFuZGVkKClcIj5cclxuICAgICAgPGt2LWNhcmRzLWluc3RydWN0aW9uIFt3aGl0ZUNhcmRdPVwid2hpdGVDYXJkKClcIiBbYmxhY2tDYXJkXT1cImJsYWNrQ2FyZCgpXCIgY2xhc3M9XCJibG9jayB3LWZ1bGwgaC1mdWxsXCI+XHJcbiAgICAgICAgPGRpdiB3aGl0ZS1jYXJkLWNvbnRlbnQgY2xhc3M9XCJoLWZ1bGxcIj5cclxuICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIlt3aGl0ZS1jYXJkLWNvbnRlbnRdXCI+PC9uZy1jb250ZW50PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgYmxhY2stY2FyZC1jb250ZW50IGNsYXNzPVwiaC1mdWxsXCI+XHJcbiAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbYmxhY2stY2FyZC1jb250ZW50XVwiPjwvbmctY29udGVudD5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgPC9rdi1jYXJkcy1pbnN0cnVjdGlvbj5cclxuICAgIDwvZGl2PlxyXG5cclxuICAgIDwhLS0gRmxvYXRpbmcgVG9nZ2xlIEJ1dHRvbiAtLT5cclxuICAgIEBpZiAod2hpdGVDYXJkKCkgfHwgYmxhY2tDYXJkKCkpIHtcclxuICAgIDxrdi1idXR0b24gW3NldmVyaXR5XT1cIidzZWNvbmRhcnknXCIgW3NpemVdPVwiJ2xhcmdlJ1wiIFt0eXBlXT1cImlzUGFuZWxFeHBhbmRlZCgpID8gJ3RleHQnIDogdW5kZWZpbmVkXCJcclxuICAgICAgW2ljb25dPVwiaXNQYW5lbEV4cGFuZGVkKCkgPyAnY2xvc2UnIDogJ3F1aWNrX3JlZmVyZW5jZSdcIlxyXG4gICAgICBjbGFzcz1cImFic29sdXRlIHotNTAgdHJhbnNpdGlvbi1hbGwgZHVyYXRpb24tMzAwIGVhc2UtaW4tb3V0IGJnLXdoaXRlIGlubGluZS1mbGV4IGJvcmRlci1yb3VuZFwiXHJcbiAgICAgIFtzdHlsZS50b3BdPVwiJzFyZW0nXCIgW3N0eWxlLnJpZ2h0XT1cIicxcmVtJ1wiIChvbkNsaWNrKT1cInRvZ2dsZVBhbmVsKClcIj5cclxuICAgIDwva3YtYnV0dG9uPlxyXG4gICAgfVxyXG4gIDwvZGl2PlxyXG5cclxuICBAaWYgKGFjdGlvbnMoKS5sZW5ndGggPiAwKSB7XHJcbiAgPGRpdiBjbGFzcz1cImZsZXgtaW5pdGlhbCBmbGV4LW5vbmUgZmxleCBmbGV4LXJvdyBqdXN0aWZ5LWNvbnRlbnQte3tcclxuICAgICAgICBjYW1wb3NPYnJpZ2F0b3Jpb3MoKSA/ICdiZXR3ZWVuJyA6ICdlbmQnXHJcbiAgICAgIH19IGFsaWduLWl0ZW1zLWNlbnRlciBwLTJcIj5cclxuICAgIEBpZiAoY2FtcG9zT2JyaWdhdG9yaW9zKCkpIHtcclxuICAgIDxzcGFuIGNsYXNzPVwidGV4dC14cyB0ZXh0LXJlZC01MDAgZm9udC1zZW1pYm9sZFwiPiogUHJlZW5jaGltZW50byBvYnJpZ2F0w7NyaW88L3NwYW4+XHJcbiAgICB9XHJcblxyXG4gICAgPGRpdiBjbGFzcz1cImZsZXggZmxleC1yb3cganVzdGlmeS1jb250ZW50LWVuZCBnYXAtMlwiPlxyXG4gICAgICBAZm9yIChhY3Rpb24gb2YgYWN0aW9ucygpLnNsaWNlKCkucmV2ZXJzZSgpOyB0cmFjayBhY3Rpb24uaW5kZXgpIHtcclxuICAgICAgPGt2LWJ1dHRvbiBbbGFiZWxdPVwiYWN0aW9uLmxhYmVsIHx8ICcnXCIgW3NldmVyaXR5XT1cImFjdGlvbi5zZXZlcml0eSB8fCAndGVydGlhcnknXCJcclxuICAgICAgICBbZGlzYWJsZWRdPVwiYWN0aW9uLmRpc2FibGVkIHx8IGZhbHNlXCIgW3R5cGVdPVwiYWN0aW9uLnR5cGVcIiBbc2l6ZV09XCJhY3Rpb24uc2l6ZSB8fCAnc21hbGwnXCJcclxuICAgICAgICBbaWNvbl09XCJhY3Rpb24uaWNvbiB8fCAnJ1wiIFtpY29uUG9zaXRpb25dPVwiYWN0aW9uLmljb25Qb3NpdGlvbiB8fCAnbGVmdCdcIiBbaXRlbXNdPVwiYWN0aW9uLml0ZW1zIHx8IFtdXCJcclxuICAgICAgICBbcG9wdXBdPVwiYWN0aW9uLnBvcHVwIHx8IGZhbHNlXCIgW3BvcHVwSWNvbl09XCJhY3Rpb24ucG9wdXBJY29uIHx8IGZhbHNlXCIgW2Z1bGxXaWR0aF09XCJhY3Rpb24uZnVsbFdpZHRoIHx8IGZhbHNlXCJcclxuICAgICAgICAob25DbGljayk9XCJhY3Rpb24/LmNvbW1hbmQoJGV2ZW50KVwiPjwva3YtYnV0dG9uPlxyXG4gICAgICB9XHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuICB9XHJcbjwvZGl2PiJdfQ==
+            args: [{ selector: 'kv-instruction-page', standalone: true, imports: [KvButtonModule, DividerModule, KvCardsInstructionComponent, SidebarModule], template: "<div class=\"h-full flex flex-column overflow-hidden\">\r\n  <div class=\"flex-1 min-h-0 flex flex-row p-2 gap-2\">\r\n    <div\r\n      class=\"h-full max-h-full overflow-y-auto w-12 lg:{{\r\n        sizeContent()\r\n      }} relative\"\r\n    >\r\n      @if (this.whiteCard() || this.blackCard()) {\r\n        <kv-button\r\n          [severity]=\"'secondary'\"\r\n          [type]=\"'text'\"\r\n          [size]=\"'large'\"\r\n          [icon]=\"'quick_reference'\"\r\n          class=\"block lg:hidden absolute top-0 right-0 pt-1 pr-1\"\r\n          (onClick)=\"verIntrucoes = true\"\r\n        >\r\n        </kv-button>\r\n      }\r\n\r\n      <ng-content select=\"[main-content]\"></ng-content>\r\n    </div>\r\n\r\n    <div\r\n      class=\"hidden lg:block w-3 h-full\"\r\n      [class.none]=\"!whiteCard() && !blackCard()\"\r\n    >\r\n      <kv-cards-instruction\r\n        [whiteCard]=\"whiteCard()\"\r\n        [blackCard]=\"blackCard()\"\r\n      >\r\n        <div white-card-content class=\"h-full\">\r\n          <ng-content select=\"[white-card-content]\"></ng-content>\r\n        </div>\r\n        <div black-card-content class=\"h-full\">\r\n          <ng-content select=\"[black-card-content]\"></ng-content>\r\n        </div>\r\n      </kv-cards-instruction>\r\n    </div>\r\n  </div>\r\n\r\n  @if (actions().length > 0) {\r\n    <div\r\n      class=\"flex-initial flex-none flex flex-row justify-content-{{\r\n        camposObrigatorios() ? 'between' : 'end'\r\n      }} align-items-center p-2\"\r\n    >\r\n      @if (camposObrigatorios()) {\r\n        <span class=\"text-xs text-red-500 font-semibold\">* Preenchimento obrigat\u00F3rio</span>\r\n      }\r\n\r\n      <div class=\"flex flex-row justify-content-end gap-2\">\r\n        @for (action of actions().slice().reverse(); track action.index) {\r\n          <kv-button\r\n            [label]=\"action.label || ''\"\r\n            [severity]=\"action.severity || 'tertiary'\"\r\n            [disabled]=\"action.disabled || false\"\r\n            [type]=\"action.type\"\r\n            [size]=\"action.size || 'small'\"\r\n            [icon]=\"action.icon || ''\"\r\n            [iconPosition]=\"action.iconPosition || 'left'\"\r\n            [items]=\"action.items || []\"\r\n            [popup]=\"action.popup || false\"\r\n            [popupIcon]=\"action.popupIcon || false\"\r\n            [fullWidth]=\"action.fullWidth || false\"\r\n            (onClick)=\"action?.command($event)\"\r\n          ></kv-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<p-sidebar\r\n  [(visible)]=\"verIntrucoes\"\r\n  position=\"right\"\r\n  appendTo=\"body\"\r\n  [showCloseIcon]=\"true\"\r\n  styleClass=\"w-30rem\"\r\n>\r\n  <kv-cards-instruction [whiteCard]=\"whiteCard()\" [blackCard]=\"blackCard()\">\r\n    <div white-card-content>\r\n      <ng-content select=\"[white-card-content]\"></ng-content>\r\n    </div>\r\n    <div black-card-content>\r\n      <ng-content select=\"[black-card-content]\"></ng-content>\r\n    </div>\r\n  </kv-cards-instruction>\r\n</p-sidebar>\r\n" }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia3YtaW5zdHJ1Y3Rpb24tcGFnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rZWV2by1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9rdi1pbnN0cnVjdGlvbi1wYWdlL2t2LWluc3RydWN0aW9uLXBhZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2Vldm8tY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMva3YtaW5zdHJ1Y3Rpb24tcGFnZS9rdi1pbnN0cnVjdGlvbi1wYWdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzRCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFFL0QsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ2hELE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLCtEQUErRCxDQUFDO0FBQzVHLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7OztBQVdoRCxNQUFNLE9BQU8sMEJBQTBCO0lBUHZDO1FBU0UsWUFBTyxHQUFHLEtBQUssQ0FBZ0IsRUFBRSxDQUFDLENBQUM7UUFFbkMsdUJBQWtCLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBRTNDLGNBQVMsR0FBRyxLQUFLLENBSUYsU0FBUyxDQUFDLENBQUM7UUFHMUIsY0FBUyxHQUFHLEtBQUssRUFJRCxDQUFDO1FBRWpCLGdCQUFXLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUMxQixJQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRTtnQkFDdkMsT0FBTyxRQUFRLENBQUM7WUFFbEIsT0FBTyxLQUFLLENBQUE7UUFDZCxDQUFDLENBQUMsQ0FBQTtRQUVGLGlCQUFZLEdBQUcsS0FBSyxDQUFDO0tBQ3RCOzhHQTNCWSwwQkFBMEI7a0dBQTFCLDBCQUEwQixnb0JDaEJ2QyxpZ0dBd0ZBLHlERDVFWSxjQUFjLHNSQUFFLGFBQWEsK0JBQUUsMkJBQTJCLG9HQUFFLGFBQWE7OzJGQUl4RSwwQkFBMEI7a0JBUHRDLFNBQVM7K0JBQ0UscUJBQXFCLGNBQ25CLElBQUksV0FDUCxDQUFDLGNBQWMsRUFBRSxhQUFhLEVBQUUsMkJBQTJCLEVBQUUsYUFBYSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBjb21wdXRlZCwgaW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgS3ZCdXR0b25Nb2R1bGUgfSBmcm9tICcuLi9rdi1idXR0b24va3YtYnV0dG9uLm1vZHVsZSc7XHJcbmltcG9ydCB7IEJ1dHRvbk1vZGVsIH0gZnJvbSAnLi4vLi4vYXBpL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5tb2RlbCc7XHJcbmltcG9ydCB7IERpdmlkZXJNb2R1bGUgfSBmcm9tICdwcmltZW5nL2RpdmlkZXInO1xyXG5pbXBvcnQgeyBLdkNhcmRzSW5zdHJ1Y3Rpb25Db21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvY2FyZHMtaW5zdHJ1Y3Rpb24va3YtY2FyZHMtaW5zdHJ1Y3Rpb24uY29tcG9uZW50JztcclxuaW1wb3J0IHsgU2lkZWJhck1vZHVsZSB9IGZyb20gJ3ByaW1lbmcvc2lkZWJhcic7XHJcblxyXG5cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAna3YtaW5zdHJ1Y3Rpb24tcGFnZScsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbS3ZCdXR0b25Nb2R1bGUsIERpdmlkZXJNb2R1bGUsIEt2Q2FyZHNJbnN0cnVjdGlvbkNvbXBvbmVudCwgU2lkZWJhck1vZHVsZV0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2t2LWluc3RydWN0aW9uLXBhZ2UuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9rdi1pbnN0cnVjdGlvbi1wYWdlLmNvbXBvbmVudC5zY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgS3ZJbnN0cnVjdGlvblBhZ2VDb21wb25lbnQge1xyXG5cclxuICBhY3Rpb25zID0gaW5wdXQ8QnV0dG9uTW9kZWxbXT4oW10pO1xyXG5cclxuICBjYW1wb3NPYnJpZ2F0b3Jpb3MgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XHJcblxyXG4gIHdoaXRlQ2FyZCA9IGlucHV0PHtcclxuICAgIHRpdGxlOiBzdHJpbmc7XHJcbiAgICBpY29uOiBzdHJpbmc7XHJcbiAgICBoZWlnaHQ6IG51bWJlcjtcclxuICB9IHwgdW5kZWZpbmVkPih1bmRlZmluZWQpO1xyXG5cclxuXHJcbiAgYmxhY2tDYXJkID0gaW5wdXQ8e1xyXG4gICAgdGl0bGU6IHN0cmluZztcclxuICAgIGljb246IHN0cmluZztcclxuICAgIGhlaWdodDogbnVtYmVyO1xyXG4gIH0gfCB1bmRlZmluZWQ+KCk7XHJcblxyXG4gIHNpemVDb250ZW50ID0gY29tcHV0ZWQoKCkgPT4ge1xyXG4gICAgaWYoIXRoaXMud2hpdGVDYXJkKCkgJiYgIXRoaXMuYmxhY2tDYXJkKCkpXHJcbiAgICAgIHJldHVybiAndy1mdWxsJztcclxuXHJcbiAgICByZXR1cm4gJ3ctOSdcclxuICB9KVxyXG5cclxuICB2ZXJJbnRydWNvZXMgPSBmYWxzZTtcclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiaC1mdWxsIGZsZXggZmxleC1jb2x1bW4gb3ZlcmZsb3ctaGlkZGVuXCI+XHJcbiAgPGRpdiBjbGFzcz1cImZsZXgtMSBtaW4taC0wIGZsZXggZmxleC1yb3cgcC0yIGdhcC0yXCI+XHJcbiAgICA8ZGl2XHJcbiAgICAgIGNsYXNzPVwiaC1mdWxsIG1heC1oLWZ1bGwgb3ZlcmZsb3cteS1hdXRvIHctMTIgbGc6e3tcclxuICAgICAgICBzaXplQ29udGVudCgpXHJcbiAgICAgIH19IHJlbGF0aXZlXCJcclxuICAgID5cclxuICAgICAgQGlmICh0aGlzLndoaXRlQ2FyZCgpIHx8IHRoaXMuYmxhY2tDYXJkKCkpIHtcclxuICAgICAgICA8a3YtYnV0dG9uXHJcbiAgICAgICAgICBbc2V2ZXJpdHldPVwiJ3NlY29uZGFyeSdcIlxyXG4gICAgICAgICAgW3R5cGVdPVwiJ3RleHQnXCJcclxuICAgICAgICAgIFtzaXplXT1cIidsYXJnZSdcIlxyXG4gICAgICAgICAgW2ljb25dPVwiJ3F1aWNrX3JlZmVyZW5jZSdcIlxyXG4gICAgICAgICAgY2xhc3M9XCJibG9jayBsZzpoaWRkZW4gYWJzb2x1dGUgdG9wLTAgcmlnaHQtMCBwdC0xIHByLTFcIlxyXG4gICAgICAgICAgKG9uQ2xpY2spPVwidmVySW50cnVjb2VzID0gdHJ1ZVwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgIDwva3YtYnV0dG9uPlxyXG4gICAgICB9XHJcblxyXG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbbWFpbi1jb250ZW50XVwiPjwvbmctY29udGVudD5cclxuICAgIDwvZGl2PlxyXG5cclxuICAgIDxkaXZcclxuICAgICAgY2xhc3M9XCJoaWRkZW4gbGc6YmxvY2sgdy0zIGgtZnVsbFwiXHJcbiAgICAgIFtjbGFzcy5ub25lXT1cIiF3aGl0ZUNhcmQoKSAmJiAhYmxhY2tDYXJkKClcIlxyXG4gICAgPlxyXG4gICAgICA8a3YtY2FyZHMtaW5zdHJ1Y3Rpb25cclxuICAgICAgICBbd2hpdGVDYXJkXT1cIndoaXRlQ2FyZCgpXCJcclxuICAgICAgICBbYmxhY2tDYXJkXT1cImJsYWNrQ2FyZCgpXCJcclxuICAgICAgPlxyXG4gICAgICAgIDxkaXYgd2hpdGUtY2FyZC1jb250ZW50IGNsYXNzPVwiaC1mdWxsXCI+XHJcbiAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbd2hpdGUtY2FyZC1jb250ZW50XVwiPjwvbmctY29udGVudD5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8ZGl2IGJsYWNrLWNhcmQtY29udGVudCBjbGFzcz1cImgtZnVsbFwiPlxyXG4gICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2JsYWNrLWNhcmQtY29udGVudF1cIj48L25nLWNvbnRlbnQ+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgIDwva3YtY2FyZHMtaW5zdHJ1Y3Rpb24+XHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuXHJcbiAgQGlmIChhY3Rpb25zKCkubGVuZ3RoID4gMCkge1xyXG4gICAgPGRpdlxyXG4gICAgICBjbGFzcz1cImZsZXgtaW5pdGlhbCBmbGV4LW5vbmUgZmxleCBmbGV4LXJvdyBqdXN0aWZ5LWNvbnRlbnQte3tcclxuICAgICAgICBjYW1wb3NPYnJpZ2F0b3Jpb3MoKSA/ICdiZXR3ZWVuJyA6ICdlbmQnXHJcbiAgICAgIH19IGFsaWduLWl0ZW1zLWNlbnRlciBwLTJcIlxyXG4gICAgPlxyXG4gICAgICBAaWYgKGNhbXBvc09icmlnYXRvcmlvcygpKSB7XHJcbiAgICAgICAgPHNwYW4gY2xhc3M9XCJ0ZXh0LXhzIHRleHQtcmVkLTUwMCBmb250LXNlbWlib2xkXCI+KiBQcmVlbmNoaW1lbnRvIG9icmlnYXTDs3Jpbzwvc3Bhbj5cclxuICAgICAgfVxyXG5cclxuICAgICAgPGRpdiBjbGFzcz1cImZsZXggZmxleC1yb3cganVzdGlmeS1jb250ZW50LWVuZCBnYXAtMlwiPlxyXG4gICAgICAgIEBmb3IgKGFjdGlvbiBvZiBhY3Rpb25zKCkuc2xpY2UoKS5yZXZlcnNlKCk7IHRyYWNrIGFjdGlvbi5pbmRleCkge1xyXG4gICAgICAgICAgPGt2LWJ1dHRvblxyXG4gICAgICAgICAgICBbbGFiZWxdPVwiYWN0aW9uLmxhYmVsIHx8ICcnXCJcclxuICAgICAgICAgICAgW3NldmVyaXR5XT1cImFjdGlvbi5zZXZlcml0eSB8fCAndGVydGlhcnknXCJcclxuICAgICAgICAgICAgW2Rpc2FibGVkXT1cImFjdGlvbi5kaXNhYmxlZCB8fCBmYWxzZVwiXHJcbiAgICAgICAgICAgIFt0eXBlXT1cImFjdGlvbi50eXBlXCJcclxuICAgICAgICAgICAgW3NpemVdPVwiYWN0aW9uLnNpemUgfHwgJ3NtYWxsJ1wiXHJcbiAgICAgICAgICAgIFtpY29uXT1cImFjdGlvbi5pY29uIHx8ICcnXCJcclxuICAgICAgICAgICAgW2ljb25Qb3NpdGlvbl09XCJhY3Rpb24uaWNvblBvc2l0aW9uIHx8ICdsZWZ0J1wiXHJcbiAgICAgICAgICAgIFtpdGVtc109XCJhY3Rpb24uaXRlbXMgfHwgW11cIlxyXG4gICAgICAgICAgICBbcG9wdXBdPVwiYWN0aW9uLnBvcHVwIHx8IGZhbHNlXCJcclxuICAgICAgICAgICAgW3BvcHVwSWNvbl09XCJhY3Rpb24ucG9wdXBJY29uIHx8IGZhbHNlXCJcclxuICAgICAgICAgICAgW2Z1bGxXaWR0aF09XCJhY3Rpb24uZnVsbFdpZHRoIHx8IGZhbHNlXCJcclxuICAgICAgICAgICAgKG9uQ2xpY2spPVwiYWN0aW9uPy5jb21tYW5kKCRldmVudClcIlxyXG4gICAgICAgICAgPjwva3YtYnV0dG9uPlxyXG4gICAgICAgIH1cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICB9XHJcbjwvZGl2PlxyXG5cclxuPHAtc2lkZWJhclxyXG4gIFsodmlzaWJsZSldPVwidmVySW50cnVjb2VzXCJcclxuICBwb3NpdGlvbj1cInJpZ2h0XCJcclxuICBhcHBlbmRUbz1cImJvZHlcIlxyXG4gIFtzaG93Q2xvc2VJY29uXT1cInRydWVcIlxyXG4gIHN0eWxlQ2xhc3M9XCJ3LTMwcmVtXCJcclxuPlxyXG4gIDxrdi1jYXJkcy1pbnN0cnVjdGlvbiBbd2hpdGVDYXJkXT1cIndoaXRlQ2FyZCgpXCIgW2JsYWNrQ2FyZF09XCJibGFja0NhcmQoKVwiPlxyXG4gICAgPGRpdiB3aGl0ZS1jYXJkLWNvbnRlbnQ+XHJcbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIlt3aGl0ZS1jYXJkLWNvbnRlbnRdXCI+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcbiAgICA8ZGl2IGJsYWNrLWNhcmQtY29udGVudD5cclxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2JsYWNrLWNhcmQtY29udGVudF1cIj48L25nLWNvbnRlbnQ+XHJcbiAgICA8L2Rpdj5cclxuICA8L2t2LWNhcmRzLWluc3RydWN0aW9uPlxyXG48L3Atc2lkZWJhcj5cclxuIl19

package/fesm2022/keevo-components.mjs

@@ -14555,70 +14555,22 @@ class KvInstructionPageComponent {
     constructor() {
         this.actions = input([]);
         this.camposObrigatorios = input(false);
-        // Define se o painel inicia aberto (true) ou fechado (false). Por padrão é true no desktop.
-        this.startExpanded = input(true);
         this.whiteCard = input(undefined);
         this.blackCard = input();
-        this.isMobile = signal(false);
-        this.userToggledPanel = signal(null);
-        this.isPanelExpanded = computed(() => {
-            // 1. Respeita a interação manual do usuário primeiro
-            const toggled = this.userToggledPanel();
-            if (toggled !== null)
-                return toggled;
-            // 2. Se for mobile, inicia sempre fechado como padrão por UX
-            if (this.isMobile())
-                return false;
-            // 3. Respeita a propriedade (true ou false) definida pelo desenvolvedor na tela via @Input
-            return this.startExpanded();
-        });
-        this.mainContentWidth = computed(() => {
-            if (!this.whiteCard() && !this.blackCard())
-                return '100%';
-            const expanded = this.isPanelExpanded();
-            const mobile = this.isMobile();
-            if (mobile)
-                return expanded ? '0%' : '100%';
-            return expanded ? 'calc(75% - 0.25rem)' : '100%';
-        });
-        this.panelWidth = computed(() => {
+        this.sizeContent = computed(() => {
             if (!this.whiteCard() && !this.blackCard())
-                return '0%';
-            const expanded = this.isPanelExpanded();
-            const mobile = this.isMobile();
-            if (mobile)
-                return expanded ? '100%' : '0%';
-            return expanded ? 'calc(25% - 0.25rem)' : '0%';
+                return 'w-full';
+            return 'w-9';
         });
-    }
-    ngOnInit() {
-        this.checkMobileState();
-    }
-    onResize() {
-        this.checkMobileState();
-    }
-    checkMobileState() {
-        if (typeof window !== 'undefined') {
-            const isMob = window.innerWidth < 1024;
-            // Atualiza o sinal apenas se houver mudança real, economiza ciclos do Change Detection
-            if (this.isMobile() !== isMob) {
-                this.isMobile.set(isMob);
-            }
-        }
-    }
-    togglePanel() {
-        this.userToggledPanel.set(!this.isPanelExpanded());
+        this.verIntrucoes = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvInstructionPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvInstructionPageComponent, isStandalone: true, selector: "kv-instruction-page", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, camposObrigatorios: { classPropertyName: "camposObrigatorios", publicName: "camposObrigatorios", isSignal: true, isRequired: false, transformFunction: null }, startExpanded: { classPropertyName: "startExpanded", publicName: "startExpanded", isSignal: true, isRequired: false, transformFunction: null }, whiteCard: { classPropertyName: "whiteCard", publicName: "whiteCard", isSignal: true, isRequired: false, transformFunction: null }, blackCard: { classPropertyName: "blackCard", publicName: "blackCard", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<div class=\"h-full flex flex-column overflow-hidden relative\">\r\n  <div class=\"flex-1 min-h-0 flex flex-row p-2 justify-content-between relative overflow-hidden\">\r\n    <!-- Main Content Container -->\r\n    <div class=\"h-full max-h-full transition-all duration-300 ease-in-out overflow-y-auto flex-shrink-0\"\r\n      [style.width]=\"mainContentWidth()\" [class.opacity-0]=\"isMobile() && isPanelExpanded()\">\r\n      <ng-content select=\"[main-content]\"></ng-content>\r\n    </div>\r\n\r\n    <!-- Instruction Page Panel (Side) -->\r\n    <div class=\"h-full transition-all duration-300 ease-in-out flex-shrink-0 overflow-y-auto\"\r\n      [style.width]=\"panelWidth()\" [class.opacity-0]=\"!isPanelExpanded()\">\r\n      <kv-cards-instruction [whiteCard]=\"whiteCard()\" [blackCard]=\"blackCard()\" class=\"block w-full h-full\">\r\n        <div white-card-content class=\"h-full\">\r\n          <ng-content select=\"[white-card-content]\"></ng-content>\r\n        </div>\r\n        <div black-card-content class=\"h-full\">\r\n          <ng-content select=\"[black-card-content]\"></ng-content>\r\n        </div>\r\n      </kv-cards-instruction>\r\n    </div>\r\n\r\n    <!-- Floating Toggle Button -->\r\n    @if (whiteCard() || blackCard()) {\r\n    <kv-button [severity]=\"'secondary'\" [size]=\"'large'\" [type]=\"isPanelExpanded() ? 'text' : undefined\"\r\n      [icon]=\"isPanelExpanded() ? 'close' : 'quick_reference'\"\r\n      class=\"absolute z-50 transition-all duration-300 ease-in-out bg-white inline-flex border-round\"\r\n      [style.top]=\"'1rem'\" [style.right]=\"'1rem'\" (onClick)=\"togglePanel()\">\r\n    </kv-button>\r\n    }\r\n  </div>\r\n\r\n  @if (actions().length > 0) {\r\n  <div class=\"flex-initial flex-none flex flex-row justify-content-{{\r\n        camposObrigatorios() ? 'between' : 'end'\r\n      }} align-items-center p-2\">\r\n    @if (camposObrigatorios()) {\r\n    <span class=\"text-xs text-red-500 font-semibold\">* Preenchimento obrigat\u00F3rio</span>\r\n    }\r\n\r\n    <div class=\"flex flex-row justify-content-end gap-2\">\r\n      @for (action of actions().slice().reverse(); track action.index) {\r\n      <kv-button [label]=\"action.label || ''\" [severity]=\"action.severity || 'tertiary'\"\r\n        [disabled]=\"action.disabled || false\" [type]=\"action.type\" [size]=\"action.size || 'small'\"\r\n        [icon]=\"action.icon || ''\" [iconPosition]=\"action.iconPosition || 'left'\" [items]=\"action.items || []\"\r\n        [popup]=\"action.popup || false\" [popupIcon]=\"action.popupIcon || false\" [fullWidth]=\"action.fullWidth || false\"\r\n        (onClick)=\"action?.command($event)\"></kv-button>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: KvButtonModule }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "iconPosition", "label", "disabled", "items", "popup", "popupIcon"], outputs: ["iconChange", "onClick"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: KvCardsInstructionComponent, selector: "kv-cards-instruction", inputs: ["whiteCard", "blackCard"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.8", type: KvInstructionPageComponent, isStandalone: true, selector: "kv-instruction-page", inputs: { actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, camposObrigatorios: { classPropertyName: "camposObrigatorios", publicName: "camposObrigatorios", isSignal: true, isRequired: false, transformFunction: null }, whiteCard: { classPropertyName: "whiteCard", publicName: "whiteCard", isSignal: true, isRequired: false, transformFunction: null }, blackCard: { classPropertyName: "blackCard", publicName: "blackCard", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"h-full flex flex-column overflow-hidden\">\r\n  <div class=\"flex-1 min-h-0 flex flex-row p-2 gap-2\">\r\n    <div\r\n      class=\"h-full max-h-full overflow-y-auto w-12 lg:{{\r\n        sizeContent()\r\n      }} relative\"\r\n    >\r\n      @if (this.whiteCard() || this.blackCard()) {\r\n        <kv-button\r\n          [severity]=\"'secondary'\"\r\n          [type]=\"'text'\"\r\n          [size]=\"'large'\"\r\n          [icon]=\"'quick_reference'\"\r\n          class=\"block lg:hidden absolute top-0 right-0 pt-1 pr-1\"\r\n          (onClick)=\"verIntrucoes = true\"\r\n        >\r\n        </kv-button>\r\n      }\r\n\r\n      <ng-content select=\"[main-content]\"></ng-content>\r\n    </div>\r\n\r\n    <div\r\n      class=\"hidden lg:block w-3 h-full\"\r\n      [class.none]=\"!whiteCard() && !blackCard()\"\r\n    >\r\n      <kv-cards-instruction\r\n        [whiteCard]=\"whiteCard()\"\r\n        [blackCard]=\"blackCard()\"\r\n      >\r\n        <div white-card-content class=\"h-full\">\r\n          <ng-content select=\"[white-card-content]\"></ng-content>\r\n        </div>\r\n        <div black-card-content class=\"h-full\">\r\n          <ng-content select=\"[black-card-content]\"></ng-content>\r\n        </div>\r\n      </kv-cards-instruction>\r\n    </div>\r\n  </div>\r\n\r\n  @if (actions().length > 0) {\r\n    <div\r\n      class=\"flex-initial flex-none flex flex-row justify-content-{{\r\n        camposObrigatorios() ? 'between' : 'end'\r\n      }} align-items-center p-2\"\r\n    >\r\n      @if (camposObrigatorios()) {\r\n        <span class=\"text-xs text-red-500 font-semibold\">* Preenchimento obrigat\u00F3rio</span>\r\n      }\r\n\r\n      <div class=\"flex flex-row justify-content-end gap-2\">\r\n        @for (action of actions().slice().reverse(); track action.index) {\r\n          <kv-button\r\n            [label]=\"action.label || ''\"\r\n            [severity]=\"action.severity || 'tertiary'\"\r\n            [disabled]=\"action.disabled || false\"\r\n            [type]=\"action.type\"\r\n            [size]=\"action.size || 'small'\"\r\n            [icon]=\"action.icon || ''\"\r\n            [iconPosition]=\"action.iconPosition || 'left'\"\r\n            [items]=\"action.items || []\"\r\n            [popup]=\"action.popup || false\"\r\n            [popupIcon]=\"action.popupIcon || false\"\r\n            [fullWidth]=\"action.fullWidth || false\"\r\n            (onClick)=\"action?.command($event)\"\r\n          ></kv-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<p-sidebar\r\n  [(visible)]=\"verIntrucoes\"\r\n  position=\"right\"\r\n  appendTo=\"body\"\r\n  [showCloseIcon]=\"true\"\r\n  styleClass=\"w-30rem\"\r\n>\r\n  <kv-cards-instruction [whiteCard]=\"whiteCard()\" [blackCard]=\"blackCard()\">\r\n    <div white-card-content>\r\n      <ng-content select=\"[white-card-content]\"></ng-content>\r\n    </div>\r\n    <div black-card-content>\r\n      <ng-content select=\"[black-card-content]\"></ng-content>\r\n    </div>\r\n  </kv-cards-instruction>\r\n</p-sidebar>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: KvButtonModule }, { kind: "component", type: KvButtonComponent, selector: "kv-button", inputs: ["fullWidth", "type", "loading", "severity", "size", "icon", "iconPosition", "label", "disabled", "items", "popup", "popupIcon"], outputs: ["iconChange", "onClick"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: KvCardsInstructionComponent, selector: "kv-cards-instruction", inputs: ["whiteCard", "blackCard"] }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i10$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvInstructionPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kv-instruction-page', standalone: true, imports: [KvButtonModule, DividerModule, KvCardsInstructionComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"h-full flex flex-column overflow-hidden relative\">\r\n  <div class=\"flex-1 min-h-0 flex flex-row p-2 justify-content-between relative overflow-hidden\">\r\n    <!-- Main Content Container -->\r\n    <div class=\"h-full max-h-full transition-all duration-300 ease-in-out overflow-y-auto flex-shrink-0\"\r\n      [style.width]=\"mainContentWidth()\" [class.opacity-0]=\"isMobile() && isPanelExpanded()\">\r\n      <ng-content select=\"[main-content]\"></ng-content>\r\n    </div>\r\n\r\n    <!-- Instruction Page Panel (Side) -->\r\n    <div class=\"h-full transition-all duration-300 ease-in-out flex-shrink-0 overflow-y-auto\"\r\n      [style.width]=\"panelWidth()\" [class.opacity-0]=\"!isPanelExpanded()\">\r\n      <kv-cards-instruction [whiteCard]=\"whiteCard()\" [blackCard]=\"blackCard()\" class=\"block w-full h-full\">\r\n        <div white-card-content class=\"h-full\">\r\n          <ng-content select=\"[white-card-content]\"></ng-content>\r\n        </div>\r\n        <div black-card-content class=\"h-full\">\r\n          <ng-content select=\"[black-card-content]\"></ng-content>\r\n        </div>\r\n      </kv-cards-instruction>\r\n    </div>\r\n\r\n    <!-- Floating Toggle Button -->\r\n    @if (whiteCard() || blackCard()) {\r\n    <kv-button [severity]=\"'secondary'\" [size]=\"'large'\" [type]=\"isPanelExpanded() ? 'text' : undefined\"\r\n      [icon]=\"isPanelExpanded() ? 'close' : 'quick_reference'\"\r\n      class=\"absolute z-50 transition-all duration-300 ease-in-out bg-white inline-flex border-round\"\r\n      [style.top]=\"'1rem'\" [style.right]=\"'1rem'\" (onClick)=\"togglePanel()\">\r\n    </kv-button>\r\n    }\r\n  </div>\r\n\r\n  @if (actions().length > 0) {\r\n  <div class=\"flex-initial flex-none flex flex-row justify-content-{{\r\n        camposObrigatorios() ? 'between' : 'end'\r\n      }} align-items-center p-2\">\r\n    @if (camposObrigatorios()) {\r\n    <span class=\"text-xs text-red-500 font-semibold\">* Preenchimento obrigat\u00F3rio</span>\r\n    }\r\n\r\n    <div class=\"flex flex-row justify-content-end gap-2\">\r\n      @for (action of actions().slice().reverse(); track action.index) {\r\n      <kv-button [label]=\"action.label || ''\" [severity]=\"action.severity || 'tertiary'\"\r\n        [disabled]=\"action.disabled || false\" [type]=\"action.type\" [size]=\"action.size || 'small'\"\r\n        [icon]=\"action.icon || ''\" [iconPosition]=\"action.iconPosition || 'left'\" [items]=\"action.items || []\"\r\n        [popup]=\"action.popup || false\" [popupIcon]=\"action.popupIcon || false\" [fullWidth]=\"action.fullWidth || false\"\r\n        (onClick)=\"action?.command($event)\"></kv-button>\r\n      }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>" }]
-        }], propDecorators: { onResize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }] } });
+            args: [{ selector: 'kv-instruction-page', standalone: true, imports: [KvButtonModule, DividerModule, KvCardsInstructionComponent, SidebarModule], template: "<div class=\"h-full flex flex-column overflow-hidden\">\r\n  <div class=\"flex-1 min-h-0 flex flex-row p-2 gap-2\">\r\n    <div\r\n      class=\"h-full max-h-full overflow-y-auto w-12 lg:{{\r\n        sizeContent()\r\n      }} relative\"\r\n    >\r\n      @if (this.whiteCard() || this.blackCard()) {\r\n        <kv-button\r\n          [severity]=\"'secondary'\"\r\n          [type]=\"'text'\"\r\n          [size]=\"'large'\"\r\n          [icon]=\"'quick_reference'\"\r\n          class=\"block lg:hidden absolute top-0 right-0 pt-1 pr-1\"\r\n          (onClick)=\"verIntrucoes = true\"\r\n        >\r\n        </kv-button>\r\n      }\r\n\r\n      <ng-content select=\"[main-content]\"></ng-content>\r\n    </div>\r\n\r\n    <div\r\n      class=\"hidden lg:block w-3 h-full\"\r\n      [class.none]=\"!whiteCard() && !blackCard()\"\r\n    >\r\n      <kv-cards-instruction\r\n        [whiteCard]=\"whiteCard()\"\r\n        [blackCard]=\"blackCard()\"\r\n      >\r\n        <div white-card-content class=\"h-full\">\r\n          <ng-content select=\"[white-card-content]\"></ng-content>\r\n        </div>\r\n        <div black-card-content class=\"h-full\">\r\n          <ng-content select=\"[black-card-content]\"></ng-content>\r\n        </div>\r\n      </kv-cards-instruction>\r\n    </div>\r\n  </div>\r\n\r\n  @if (actions().length > 0) {\r\n    <div\r\n      class=\"flex-initial flex-none flex flex-row justify-content-{{\r\n        camposObrigatorios() ? 'between' : 'end'\r\n      }} align-items-center p-2\"\r\n    >\r\n      @if (camposObrigatorios()) {\r\n        <span class=\"text-xs text-red-500 font-semibold\">* Preenchimento obrigat\u00F3rio</span>\r\n      }\r\n\r\n      <div class=\"flex flex-row justify-content-end gap-2\">\r\n        @for (action of actions().slice().reverse(); track action.index) {\r\n          <kv-button\r\n            [label]=\"action.label || ''\"\r\n            [severity]=\"action.severity || 'tertiary'\"\r\n            [disabled]=\"action.disabled || false\"\r\n            [type]=\"action.type\"\r\n            [size]=\"action.size || 'small'\"\r\n            [icon]=\"action.icon || ''\"\r\n            [iconPosition]=\"action.iconPosition || 'left'\"\r\n            [items]=\"action.items || []\"\r\n            [popup]=\"action.popup || false\"\r\n            [popupIcon]=\"action.popupIcon || false\"\r\n            [fullWidth]=\"action.fullWidth || false\"\r\n            (onClick)=\"action?.command($event)\"\r\n          ></kv-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<p-sidebar\r\n  [(visible)]=\"verIntrucoes\"\r\n  position=\"right\"\r\n  appendTo=\"body\"\r\n  [showCloseIcon]=\"true\"\r\n  styleClass=\"w-30rem\"\r\n>\r\n  <kv-cards-instruction [whiteCard]=\"whiteCard()\" [blackCard]=\"blackCard()\">\r\n    <div white-card-content>\r\n      <ng-content select=\"[white-card-content]\"></ng-content>\r\n    </div>\r\n    <div black-card-content>\r\n      <ng-content select=\"[black-card-content]\"></ng-content>\r\n    </div>\r\n  </kv-cards-instruction>\r\n</p-sidebar>\r\n" }]
+        }] });
 
 class KvChipsComponent {
     constructor() {