keevo-components 2.0.275 → 2.0.276
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/esm2022/lib/components/kv-instruction-page/kv-instruction-page.component.mjs +57 -11
- package/fesm2022/keevo-components.mjs +55 -7
- package/fesm2022/keevo-components.mjs.map +1 -1
- package/lib/components/kv-button/kv-button.component.d.ts +1 -1
- package/lib/components/kv-buttons/kv-button-popup/kv-button-popup.component.d.ts +1 -1
- package/lib/components/kv-icon/kv-icon.component.d.ts +2 -2
- package/lib/components/kv-instruction-page/kv-instruction-page.component.d.ts +13 -4
- package/lib/components/kv-progress-bar-new/kv-progress-bar-new.component.d.ts +1 -1
- package/lib/components/kv-table-edit/kv-table-edit.component.d.ts +1 -1
- package/lib/components/kv-table-viewer/kv-table-viewer.component.d.ts +1 -1
- package/lib/components/kv-tag/kv-tag.component.d.ts +1 -1
- package/lib/components/kv-widget-card/kv-widget-card.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,29 +1,75 @@
|
|
|
1
|
-
import { Component, computed, input } from '@angular/core';
|
|
1
|
+
import { Component, computed, input, HostListener, signal, ChangeDetectionStrategy } from '@angular/core';
|
|
2
2
|
import { KvButtonModule } from '../kv-button/kv-button.module';
|
|
3
3
|
import { DividerModule } from 'primeng/divider';
|
|
4
4
|
import { KvCardsInstructionComponent } from './components/cards-instruction/kv-cards-instruction.component';
|
|
5
|
-
import { SidebarModule } from 'primeng/sidebar';
|
|
6
5
|
import * as i0 from "@angular/core";
|
|
7
6
|
import * as i1 from "../kv-button/kv-button.component";
|
|
8
|
-
import * as i2 from "primeng/sidebar";
|
|
9
7
|
export class KvInstructionPageComponent {
|
|
10
8
|
constructor() {
|
|
11
9
|
this.actions = input([]);
|
|
12
10
|
this.camposObrigatorios = input(false);
|
|
11
|
+
// Define se o painel inicia aberto (true) ou fechado (false). Por padrão é true no desktop.
|
|
12
|
+
this.startExpanded = input(true);
|
|
13
13
|
this.whiteCard = input(undefined);
|
|
14
14
|
this.blackCard = input();
|
|
15
|
-
this.
|
|
15
|
+
this.isMobile = signal(false);
|
|
16
|
+
this.userToggledPanel = signal(null);
|
|
17
|
+
this.isPanelExpanded = computed(() => {
|
|
18
|
+
// 1. Respeita a interação manual do usuário primeiro
|
|
19
|
+
const toggled = this.userToggledPanel();
|
|
20
|
+
if (toggled !== null)
|
|
21
|
+
return toggled;
|
|
22
|
+
// 2. Se for mobile, inicia sempre fechado como padrão por UX
|
|
23
|
+
if (this.isMobile())
|
|
24
|
+
return false;
|
|
25
|
+
// 3. Respeita a propriedade (true ou false) definida pelo desenvolvedor na tela via @Input
|
|
26
|
+
return this.startExpanded();
|
|
27
|
+
});
|
|
28
|
+
this.mainContentWidth = computed(() => {
|
|
29
|
+
if (!this.whiteCard() && !this.blackCard())
|
|
30
|
+
return '100%';
|
|
31
|
+
const expanded = this.isPanelExpanded();
|
|
32
|
+
const mobile = this.isMobile();
|
|
33
|
+
if (mobile)
|
|
34
|
+
return expanded ? '0%' : '100%';
|
|
35
|
+
return expanded ? 'calc(75% - 0.25rem)' : '100%';
|
|
36
|
+
});
|
|
37
|
+
this.panelWidth = computed(() => {
|
|
16
38
|
if (!this.whiteCard() && !this.blackCard())
|
|
17
|
-
return '
|
|
18
|
-
|
|
39
|
+
return '0%';
|
|
40
|
+
const expanded = this.isPanelExpanded();
|
|
41
|
+
const mobile = this.isMobile();
|
|
42
|
+
if (mobile)
|
|
43
|
+
return expanded ? '100%' : '0%';
|
|
44
|
+
return expanded ? 'calc(25% - 0.25rem)' : '0%';
|
|
19
45
|
});
|
|
20
|
-
|
|
46
|
+
}
|
|
47
|
+
ngOnInit() {
|
|
48
|
+
this.checkMobileState();
|
|
49
|
+
}
|
|
50
|
+
onResize() {
|
|
51
|
+
this.checkMobileState();
|
|
52
|
+
}
|
|
53
|
+
checkMobileState() {
|
|
54
|
+
if (typeof window !== 'undefined') {
|
|
55
|
+
const isMob = window.innerWidth < 1024;
|
|
56
|
+
// Atualiza o sinal apenas se houver mudança real, economiza ciclos do Change Detection
|
|
57
|
+
if (this.isMobile() !== isMob) {
|
|
58
|
+
this.isMobile.set(isMob);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
togglePanel() {
|
|
63
|
+
this.userToggledPanel.set(!this.isPanelExpanded());
|
|
21
64
|
}
|
|
22
65
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvInstructionPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
-
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\">\
|
|
66
|
+
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\">\n <div class=\"flex-1 min-h-0 flex flex-row p-2 justify-content-between relative overflow-hidden\">\n <!-- Main Content Container -->\n <div class=\"h-full max-h-full transition-all duration-300 ease-in-out overflow-y-auto flex-shrink-0\"\n [style.width]=\"mainContentWidth()\" [class.opacity-0]=\"isMobile() && isPanelExpanded()\">\n <ng-content select=\"[main-content]\"></ng-content>\n </div>\n\n <!-- Instruction Page Panel (Side) -->\n <div class=\"h-full transition-all duration-300 ease-in-out flex-shrink-0 overflow-y-auto\"\n [style.width]=\"panelWidth()\" [class.opacity-0]=\"!isPanelExpanded()\">\n <kv-cards-instruction [whiteCard]=\"whiteCard()\" [blackCard]=\"blackCard()\" class=\"block w-full h-full\">\n <div white-card-content class=\"h-full\">\n <ng-content select=\"[white-card-content]\"></ng-content>\n </div>\n <div black-card-content class=\"h-full\">\n <ng-content select=\"[black-card-content]\"></ng-content>\n </div>\n </kv-cards-instruction>\n </div>\n\n <!-- Floating Toggle Button -->\n @if (whiteCard() || blackCard()) {\n <kv-button [severity]=\"'secondary'\" [size]=\"'large'\" [type]=\"isPanelExpanded() ? 'text' : undefined\"\n [icon]=\"isPanelExpanded() ? 'close' : 'quick_reference'\"\n class=\"absolute z-50 transition-all duration-300 ease-in-out bg-white inline-flex border-round\"\n [style.top]=\"'1rem'\" [style.right]=\"'1rem'\" (onClick)=\"togglePanel()\">\n </kv-button>\n }\n </div>\n\n @if (actions().length > 0) {\n <div class=\"flex-initial flex-none flex flex-row justify-content-{{\n camposObrigatorios() ? 'between' : 'end'\n }} align-items-center p-2\">\n @if (camposObrigatorios()) {\n <span class=\"text-xs text-red-500 font-semibold\">* Preenchimento obrigat\u00F3rio</span>\n }\n\n <div class=\"flex flex-row justify-content-end gap-2\">\n @for (action of actions().slice().reverse(); track action.index) {\n <kv-button [label]=\"action.label || ''\" [severity]=\"action.severity || 'tertiary'\"\n [disabled]=\"action.disabled || false\" [type]=\"action.type\" [size]=\"action.size || 'small'\"\n [icon]=\"action.icon || ''\" [iconPosition]=\"action.iconPosition || 'left'\" [items]=\"action.items || []\"\n [popup]=\"action.popup || false\" [popupIcon]=\"action.popupIcon || false\" [fullWidth]=\"action.fullWidth || false\"\n (onClick)=\"action?.command($event)\"></kv-button>\n }\n </div>\n </div>\n }\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 }); }
|
|
24
67
|
}
|
|
25
68
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvInstructionPageComponent, decorators: [{
|
|
26
69
|
type: Component,
|
|
27
|
-
args: [{ selector: 'kv-instruction-page', standalone: true, imports: [KvButtonModule, DividerModule, KvCardsInstructionComponent,
|
|
28
|
-
}]
|
|
29
|
-
|
|
70
|
+
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\">\n <div class=\"flex-1 min-h-0 flex flex-row p-2 justify-content-between relative overflow-hidden\">\n <!-- Main Content Container -->\n <div class=\"h-full max-h-full transition-all duration-300 ease-in-out overflow-y-auto flex-shrink-0\"\n [style.width]=\"mainContentWidth()\" [class.opacity-0]=\"isMobile() && isPanelExpanded()\">\n <ng-content select=\"[main-content]\"></ng-content>\n </div>\n\n <!-- Instruction Page Panel (Side) -->\n <div class=\"h-full transition-all duration-300 ease-in-out flex-shrink-0 overflow-y-auto\"\n [style.width]=\"panelWidth()\" [class.opacity-0]=\"!isPanelExpanded()\">\n <kv-cards-instruction [whiteCard]=\"whiteCard()\" [blackCard]=\"blackCard()\" class=\"block w-full h-full\">\n <div white-card-content class=\"h-full\">\n <ng-content select=\"[white-card-content]\"></ng-content>\n </div>\n <div black-card-content class=\"h-full\">\n <ng-content select=\"[black-card-content]\"></ng-content>\n </div>\n </kv-cards-instruction>\n </div>\n\n <!-- Floating Toggle Button -->\n @if (whiteCard() || blackCard()) {\n <kv-button [severity]=\"'secondary'\" [size]=\"'large'\" [type]=\"isPanelExpanded() ? 'text' : undefined\"\n [icon]=\"isPanelExpanded() ? 'close' : 'quick_reference'\"\n class=\"absolute z-50 transition-all duration-300 ease-in-out bg-white inline-flex border-round\"\n [style.top]=\"'1rem'\" [style.right]=\"'1rem'\" (onClick)=\"togglePanel()\">\n </kv-button>\n }\n </div>\n\n @if (actions().length > 0) {\n <div class=\"flex-initial flex-none flex flex-row justify-content-{{\n camposObrigatorios() ? 'between' : 'end'\n }} align-items-center p-2\">\n @if (camposObrigatorios()) {\n <span class=\"text-xs text-red-500 font-semibold\">* Preenchimento obrigat\u00F3rio</span>\n }\n\n <div class=\"flex flex-row justify-content-end gap-2\">\n @for (action of actions().slice().reverse(); track action.index) {\n <kv-button [label]=\"action.label || ''\" [severity]=\"action.severity || 'tertiary'\"\n [disabled]=\"action.disabled || false\" [type]=\"action.type\" [size]=\"action.size || 'small'\"\n [icon]=\"action.icon || ''\" [iconPosition]=\"action.iconPosition || 'left'\" [items]=\"action.items || []\"\n [popup]=\"action.popup || false\" [popupIcon]=\"action.popupIcon || false\" [fullWidth]=\"action.fullWidth || false\"\n (onClick)=\"action?.command($event)\"></kv-button>\n }\n </div>\n </div>\n }\n</div>" }]
|
|
71
|
+
}], propDecorators: { onResize: [{
|
|
72
|
+
type: HostListener,
|
|
73
|
+
args: ['window:resize']
|
|
74
|
+
}] } });
|
|
75
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia3YtaW5zdHJ1Y3Rpb24tcGFnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rZWV2by1jb21wb25lbnRzL3NyYy9saWIvY29tcG9uZW50cy9rdi1pbnN0cnVjdGlvbi1wYWdlL2t2LWluc3RydWN0aW9uLXBhZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2Vldm8tY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMva3YtaW5zdHJ1Y3Rpb24tcGFnZS9rdi1pbnN0cnVjdGlvbi1wYWdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLHVCQUF1QixFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ2xILE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUUvRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDaEQsT0FBTyxFQUFFLDJCQUEyQixFQUFFLE1BQU0sK0RBQStELENBQUM7OztBQVU1RyxNQUFNLE9BQU8sMEJBQTBCO0lBUnZDO1FBVUUsWUFBTyxHQUFHLEtBQUssQ0FBZ0IsRUFBRSxDQUFDLENBQUM7UUFDbkMsdUJBQWtCLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBRTNDLDRGQUE0RjtRQUM1RixrQkFBYSxHQUFHLEtBQUssQ0FBVSxJQUFJLENBQUMsQ0FBQztRQUVyQyxjQUFTLEdBQUcsS0FBSyxDQUlGLFNBQVMsQ0FBQyxDQUFDO1FBRTFCLGNBQVMsR0FBRyxLQUFLLEVBSUQsQ0FBQztRQUVqQixhQUFRLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBQzFCLHFCQUFnQixHQUFHLE1BQU0sQ0FBaUIsSUFBSSxDQUFDLENBQUM7UUFxQnhELG9CQUFlLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUM5QixxREFBcUQ7WUFDckQsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7WUFDeEMsSUFBSSxPQUFPLEtBQUssSUFBSTtnQkFBRSxPQUFPLE9BQU8sQ0FBQztZQUVyQyw2REFBNkQ7WUFDN0QsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFO2dCQUFFLE9BQU8sS0FBSyxDQUFDO1lBRWxDLDJGQUEyRjtZQUMzRixPQUFPLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUM5QixDQUFDLENBQUMsQ0FBQztRQU1ILHFCQUFnQixHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDL0IsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7Z0JBQUUsT0FBTyxNQUFNLENBQUM7WUFDMUQsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQ3hDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUMvQixJQUFJLE1BQU07Z0JBQUUsT0FBTyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDO1lBQzVDLE9BQU8sUUFBUSxDQUFDLENBQUMsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDO1FBQ25ELENBQUMsQ0FBQyxDQUFDO1FBRUgsZUFBVSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDekIsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7Z0JBQUUsT0FBTyxJQUFJLENBQUM7WUFDeEQsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQ3hDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUMvQixJQUFJLE1BQU07Z0JBQUUsT0FBTyxRQUFRLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1lBQzVDLE9BQU8sUUFBUSxDQUFDLENBQUMsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQ2pELENBQUMsQ0FBQyxDQUFDO0tBRUo7SUFuREMsUUFBUTtRQUNOLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFHRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVPLGdCQUFnQjtRQUNyQixJQUFJLE9BQU8sTUFBTSxLQUFLLFdBQVcsRUFBRSxDQUFDO1lBQ2pDLE1BQU0sS0FBSyxHQUFHLE1BQU0sQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDO1lBQ3ZDLHVGQUF1RjtZQUN2RixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsS0FBSyxLQUFLLEVBQUUsQ0FBQztnQkFDN0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDNUIsQ0FBQztRQUNKLENBQUM7SUFDSixDQUFDO0lBY0QsV0FBVztRQUNULElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxHQUFHLENBQUMsQ0FBQyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUMsQ0FBQztJQUNyRCxDQUFDOzhHQXhEVSwwQkFBMEI7a0dBQTFCLDBCQUEwQix3MEJDZHZDLHdrRkFrRE0seUREekNNLGNBQWMsc1JBQUUsYUFBYSwrQkFBRSwyQkFBMkI7OzJGQUt6RCwwQkFBMEI7a0JBUnRDLFNBQVM7K0JBQ0UscUJBQXFCLGNBQ25CLElBQUksV0FDUCxDQUFDLGNBQWMsRUFBRSxhQUFhLEVBQUUsMkJBQTJCLENBQUMsbUJBR3BELHVCQUF1QixDQUFDLE1BQU07OEJBOEIvQyxRQUFRO3NCQURQLFlBQVk7dUJBQUMsZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgY29tcHV0ZWQsIGlucHV0LCBIb3N0TGlzdGVuZXIsIHNpZ25hbCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBLdkJ1dHRvbk1vZHVsZSB9IGZyb20gJy4uL2t2LWJ1dHRvbi9rdi1idXR0b24ubW9kdWxlJztcclxuaW1wb3J0IHsgQnV0dG9uTW9kZWwgfSBmcm9tICcuLi8uLi9hcGkvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLm1vZGVsJztcclxuaW1wb3J0IHsgRGl2aWRlck1vZHVsZSB9IGZyb20gJ3ByaW1lbmcvZGl2aWRlcic7XHJcbmltcG9ydCB7IEt2Q2FyZHNJbnN0cnVjdGlvbkNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9jYXJkcy1pbnN0cnVjdGlvbi9rdi1jYXJkcy1pbnN0cnVjdGlvbi5jb21wb25lbnQnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdrdi1pbnN0cnVjdGlvbi1wYWdlJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtLdkJ1dHRvbk1vZHVsZSwgRGl2aWRlck1vZHVsZSwgS3ZDYXJkc0luc3RydWN0aW9uQ29tcG9uZW50XSxcclxuICB0ZW1wbGF0ZVVybDogJy4va3YtaW5zdHJ1Y3Rpb24tcGFnZS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL2t2LWluc3RydWN0aW9uLXBhZ2UuY29tcG9uZW50LnNjc3MnLFxyXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBLdkluc3RydWN0aW9uUGFnZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gIGFjdGlvbnMgPSBpbnB1dDxCdXR0b25Nb2RlbFtdPihbXSk7XHJcbiAgY2FtcG9zT2JyaWdhdG9yaW9zID0gaW5wdXQ8Ym9vbGVhbj4oZmFsc2UpO1xyXG4gIFxyXG4gIC8vIERlZmluZSBzZSBvIHBhaW5lbCBpbmljaWEgYWJlcnRvICh0cnVlKSBvdSBmZWNoYWRvIChmYWxzZSkuIFBvciBwYWRyw6NvIMOpIHRydWUgbm8gZGVza3RvcC5cclxuICBzdGFydEV4cGFuZGVkID0gaW5wdXQ8Ym9vbGVhbj4odHJ1ZSk7IFxyXG5cclxuICB3aGl0ZUNhcmQgPSBpbnB1dDx7XHJcbiAgICB0aXRsZTogc3RyaW5nO1xyXG4gICAgaWNvbjogc3RyaW5nO1xyXG4gICAgaGVpZ2h0OiBudW1iZXI7XHJcbiAgfSB8IHVuZGVmaW5lZD4odW5kZWZpbmVkKTtcclxuXHJcbiAgYmxhY2tDYXJkID0gaW5wdXQ8e1xyXG4gICAgdGl0bGU6IHN0cmluZztcclxuICAgIGljb246IHN0cmluZztcclxuICAgIGhlaWdodDogbnVtYmVyO1xyXG4gIH0gfCB1bmRlZmluZWQ+KCk7XHJcblxyXG4gIGlzTW9iaWxlID0gc2lnbmFsPGJvb2xlYW4+KGZhbHNlKTtcclxuICBwcml2YXRlIHVzZXJUb2dnbGVkUGFuZWwgPSBzaWduYWw8Ym9vbGVhbiB8IG51bGw+KG51bGwpO1xyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIHRoaXMuY2hlY2tNb2JpbGVTdGF0ZSgpO1xyXG4gIH1cclxuXHJcbiAgQEhvc3RMaXN0ZW5lcignd2luZG93OnJlc2l6ZScpXHJcbiAgb25SZXNpemUoKSB7XHJcbiAgICB0aGlzLmNoZWNrTW9iaWxlU3RhdGUoKTtcclxuICB9XHJcblxyXG4gIHByaXZhdGUgY2hlY2tNb2JpbGVTdGF0ZSgpIHtcclxuICAgICBpZiAodHlwZW9mIHdpbmRvdyAhPT0gJ3VuZGVmaW5lZCcpIHtcclxuICAgICAgICBjb25zdCBpc01vYiA9IHdpbmRvdy5pbm5lcldpZHRoIDwgMTAyNDtcclxuICAgICAgICAvLyBBdHVhbGl6YSBvIHNpbmFsIGFwZW5hcyBzZSBob3V2ZXIgbXVkYW7Dp2EgcmVhbCwgZWNvbm9taXphIGNpY2xvcyBkbyBDaGFuZ2UgRGV0ZWN0aW9uXHJcbiAgICAgICAgaWYgKHRoaXMuaXNNb2JpbGUoKSAhPT0gaXNNb2IpIHtcclxuICAgICAgICAgICB0aGlzLmlzTW9iaWxlLnNldChpc01vYik7XHJcbiAgICAgICAgfVxyXG4gICAgIH1cclxuICB9XHJcblxyXG4gIGlzUGFuZWxFeHBhbmRlZCA9IGNvbXB1dGVkKCgpID0+IHtcclxuICAgIC8vIDEuIFJlc3BlaXRhIGEgaW50ZXJhw6fDo28gbWFudWFsIGRvIHVzdcOhcmlvIHByaW1laXJvXHJcbiAgICBjb25zdCB0b2dnbGVkID0gdGhpcy51c2VyVG9nZ2xlZFBhbmVsKCk7XHJcbiAgICBpZiAodG9nZ2xlZCAhPT0gbnVsbCkgcmV0dXJuIHRvZ2dsZWQ7XHJcbiAgICBcclxuICAgIC8vIDIuIFNlIGZvciBtb2JpbGUsIGluaWNpYSBzZW1wcmUgZmVjaGFkbyBjb21vIHBhZHLDo28gcG9yIFVYXHJcbiAgICBpZiAodGhpcy5pc01vYmlsZSgpKSByZXR1cm4gZmFsc2U7XHJcbiAgICBcclxuICAgIC8vIDMuIFJlc3BlaXRhIGEgcHJvcHJpZWRhZGUgKHRydWUgb3UgZmFsc2UpIGRlZmluaWRhIHBlbG8gZGVzZW52b2x2ZWRvciBuYSB0ZWxhIHZpYSBASW5wdXRcclxuICAgIHJldHVybiB0aGlzLnN0YXJ0RXhwYW5kZWQoKTtcclxuICB9KTtcclxuXHJcbiAgdG9nZ2xlUGFuZWwoKSB7XHJcbiAgICB0aGlzLnVzZXJUb2dnbGVkUGFuZWwuc2V0KCF0aGlzLmlzUGFuZWxFeHBhbmRlZCgpKTtcclxuICB9XHJcblxyXG4gIG1haW5Db250ZW50V2lkdGggPSBjb21wdXRlZCgoKSA9PiB7XHJcbiAgICBpZiAoIXRoaXMud2hpdGVDYXJkKCkgJiYgIXRoaXMuYmxhY2tDYXJkKCkpIHJldHVybiAnMTAwJSc7XHJcbiAgICBjb25zdCBleHBhbmRlZCA9IHRoaXMuaXNQYW5lbEV4cGFuZGVkKCk7XHJcbiAgICBjb25zdCBtb2JpbGUgPSB0aGlzLmlzTW9iaWxlKCk7XHJcbiAgICBpZiAobW9iaWxlKSByZXR1cm4gZXhwYW5kZWQgPyAnMCUnIDogJzEwMCUnO1xyXG4gICAgcmV0dXJuIGV4cGFuZGVkID8gJ2NhbGMoNzUlIC0gMC4yNXJlbSknIDogJzEwMCUnO1xyXG4gIH0pO1xyXG5cclxuICBwYW5lbFdpZHRoID0gY29tcHV0ZWQoKCkgPT4ge1xyXG4gICAgaWYgKCF0aGlzLndoaXRlQ2FyZCgpICYmICF0aGlzLmJsYWNrQ2FyZCgpKSByZXR1cm4gJzAlJztcclxuICAgIGNvbnN0IGV4cGFuZGVkID0gdGhpcy5pc1BhbmVsRXhwYW5kZWQoKTtcclxuICAgIGNvbnN0IG1vYmlsZSA9IHRoaXMuaXNNb2JpbGUoKTtcclxuICAgIGlmIChtb2JpbGUpIHJldHVybiBleHBhbmRlZCA/ICcxMDAlJyA6ICcwJSc7XHJcbiAgICByZXR1cm4gZXhwYW5kZWQgPyAnY2FsYygyNSUgLSAwLjI1cmVtKScgOiAnMCUnO1xyXG4gIH0pO1xyXG5cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiaC1mdWxsIGZsZXggZmxleC1jb2x1bW4gb3ZlcmZsb3ctaGlkZGVuIHJlbGF0aXZlXCI+XG4gIDxkaXYgY2xhc3M9XCJmbGV4LTEgbWluLWgtMCBmbGV4IGZsZXgtcm93IHAtMiBqdXN0aWZ5LWNvbnRlbnQtYmV0d2VlbiByZWxhdGl2ZSBvdmVyZmxvdy1oaWRkZW5cIj5cbiAgICA8IS0tIE1haW4gQ29udGVudCBDb250YWluZXIgLS0+XG4gICAgPGRpdiBjbGFzcz1cImgtZnVsbCBtYXgtaC1mdWxsIHRyYW5zaXRpb24tYWxsIGR1cmF0aW9uLTMwMCBlYXNlLWluLW91dCBvdmVyZmxvdy15LWF1dG8gZmxleC1zaHJpbmstMFwiXG4gICAgICBbc3R5bGUud2lkdGhdPVwibWFpbkNvbnRlbnRXaWR0aCgpXCIgW2NsYXNzLm9wYWNpdHktMF09XCJpc01vYmlsZSgpICYmIGlzUGFuZWxFeHBhbmRlZCgpXCI+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbbWFpbi1jb250ZW50XVwiPjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cblxuICAgIDwhLS0gSW5zdHJ1Y3Rpb24gUGFnZSBQYW5lbCAoU2lkZSkgLS0+XG4gICAgPGRpdiBjbGFzcz1cImgtZnVsbCB0cmFuc2l0aW9uLWFsbCBkdXJhdGlvbi0zMDAgZWFzZS1pbi1vdXQgZmxleC1zaHJpbmstMCBvdmVyZmxvdy15LWF1dG9cIlxuICAgICAgW3N0eWxlLndpZHRoXT1cInBhbmVsV2lkdGgoKVwiIFtjbGFzcy5vcGFjaXR5LTBdPVwiIWlzUGFuZWxFeHBhbmRlZCgpXCI+XG4gICAgICA8a3YtY2FyZHMtaW5zdHJ1Y3Rpb24gW3doaXRlQ2FyZF09XCJ3aGl0ZUNhcmQoKVwiIFtibGFja0NhcmRdPVwiYmxhY2tDYXJkKClcIiBjbGFzcz1cImJsb2NrIHctZnVsbCBoLWZ1bGxcIj5cbiAgICAgICAgPGRpdiB3aGl0ZS1jYXJkLWNvbnRlbnQgY2xhc3M9XCJoLWZ1bGxcIj5cbiAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbd2hpdGUtY2FyZC1jb250ZW50XVwiPjwvbmctY29udGVudD5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgYmxhY2stY2FyZC1jb250ZW50IGNsYXNzPVwiaC1mdWxsXCI+XG4gICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2JsYWNrLWNhcmQtY29udGVudF1cIj48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9rdi1jYXJkcy1pbnN0cnVjdGlvbj5cbiAgICA8L2Rpdj5cblxuICAgIDwhLS0gRmxvYXRpbmcgVG9nZ2xlIEJ1dHRvbiAtLT5cbiAgICBAaWYgKHdoaXRlQ2FyZCgpIHx8IGJsYWNrQ2FyZCgpKSB7XG4gICAgPGt2LWJ1dHRvbiBbc2V2ZXJpdHldPVwiJ3NlY29uZGFyeSdcIiBbc2l6ZV09XCInbGFyZ2UnXCIgW3R5cGVdPVwiaXNQYW5lbEV4cGFuZGVkKCkgPyAndGV4dCcgOiB1bmRlZmluZWRcIlxuICAgICAgW2ljb25dPVwiaXNQYW5lbEV4cGFuZGVkKCkgPyAnY2xvc2UnIDogJ3F1aWNrX3JlZmVyZW5jZSdcIlxuICAgICAgY2xhc3M9XCJhYnNvbHV0ZSB6LTUwIHRyYW5zaXRpb24tYWxsIGR1cmF0aW9uLTMwMCBlYXNlLWluLW91dCBiZy13aGl0ZSBpbmxpbmUtZmxleCBib3JkZXItcm91bmRcIlxuICAgICAgW3N0eWxlLnRvcF09XCInMXJlbSdcIiBbc3R5bGUucmlnaHRdPVwiJzFyZW0nXCIgKG9uQ2xpY2spPVwidG9nZ2xlUGFuZWwoKVwiPlxuICAgIDwva3YtYnV0dG9uPlxuICAgIH1cbiAgPC9kaXY+XG5cbiAgQGlmIChhY3Rpb25zKCkubGVuZ3RoID4gMCkge1xuICA8ZGl2IGNsYXNzPVwiZmxleC1pbml0aWFsIGZsZXgtbm9uZSBmbGV4IGZsZXgtcm93IGp1c3RpZnktY29udGVudC17e1xuICAgICAgICBjYW1wb3NPYnJpZ2F0b3Jpb3MoKSA/ICdiZXR3ZWVuJyA6ICdlbmQnXG4gICAgICB9fSBhbGlnbi1pdGVtcy1jZW50ZXIgcC0yXCI+XG4gICAgQGlmIChjYW1wb3NPYnJpZ2F0b3Jpb3MoKSkge1xuICAgIDxzcGFuIGNsYXNzPVwidGV4dC14cyB0ZXh0LXJlZC01MDAgZm9udC1zZW1pYm9sZFwiPiogUHJlZW5jaGltZW50byBvYnJpZ2F0w7NyaW88L3NwYW4+XG4gICAgfVxuXG4gICAgPGRpdiBjbGFzcz1cImZsZXggZmxleC1yb3cganVzdGlmeS1jb250ZW50LWVuZCBnYXAtMlwiPlxuICAgICAgQGZvciAoYWN0aW9uIG9mIGFjdGlvbnMoKS5zbGljZSgpLnJldmVyc2UoKTsgdHJhY2sgYWN0aW9uLmluZGV4KSB7XG4gICAgICA8a3YtYnV0dG9uIFtsYWJlbF09XCJhY3Rpb24ubGFiZWwgfHwgJydcIiBbc2V2ZXJpdHldPVwiYWN0aW9uLnNldmVyaXR5IHx8ICd0ZXJ0aWFyeSdcIlxuICAgICAgICBbZGlzYWJsZWRdPVwiYWN0aW9uLmRpc2FibGVkIHx8IGZhbHNlXCIgW3R5cGVdPVwiYWN0aW9uLnR5cGVcIiBbc2l6ZV09XCJhY3Rpb24uc2l6ZSB8fCAnc21hbGwnXCJcbiAgICAgICAgW2ljb25dPVwiYWN0aW9uLmljb24gfHwgJydcIiBbaWNvblBvc2l0aW9uXT1cImFjdGlvbi5pY29uUG9zaXRpb24gfHwgJ2xlZnQnXCIgW2l0ZW1zXT1cImFjdGlvbi5pdGVtcyB8fCBbXVwiXG4gICAgICAgIFtwb3B1cF09XCJhY3Rpb24ucG9wdXAgfHwgZmFsc2VcIiBbcG9wdXBJY29uXT1cImFjdGlvbi5wb3B1cEljb24gfHwgZmFsc2VcIiBbZnVsbFdpZHRoXT1cImFjdGlvbi5mdWxsV2lkdGggfHwgZmFsc2VcIlxuICAgICAgICAob25DbGljayk9XCJhY3Rpb24/LmNvbW1hbmQoJGV2ZW50KVwiPjwva3YtYnV0dG9uPlxuICAgICAgfVxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgfVxuPC9kaXY+Il19
|
|
@@ -14555,22 +14555,70 @@ class KvInstructionPageComponent {
|
|
|
14555
14555
|
constructor() {
|
|
14556
14556
|
this.actions = input([]);
|
|
14557
14557
|
this.camposObrigatorios = input(false);
|
|
14558
|
+
// Define se o painel inicia aberto (true) ou fechado (false). Por padrão é true no desktop.
|
|
14559
|
+
this.startExpanded = input(true);
|
|
14558
14560
|
this.whiteCard = input(undefined);
|
|
14559
14561
|
this.blackCard = input();
|
|
14560
|
-
this.
|
|
14562
|
+
this.isMobile = signal(false);
|
|
14563
|
+
this.userToggledPanel = signal(null);
|
|
14564
|
+
this.isPanelExpanded = computed(() => {
|
|
14565
|
+
// 1. Respeita a interação manual do usuário primeiro
|
|
14566
|
+
const toggled = this.userToggledPanel();
|
|
14567
|
+
if (toggled !== null)
|
|
14568
|
+
return toggled;
|
|
14569
|
+
// 2. Se for mobile, inicia sempre fechado como padrão por UX
|
|
14570
|
+
if (this.isMobile())
|
|
14571
|
+
return false;
|
|
14572
|
+
// 3. Respeita a propriedade (true ou false) definida pelo desenvolvedor na tela via @Input
|
|
14573
|
+
return this.startExpanded();
|
|
14574
|
+
});
|
|
14575
|
+
this.mainContentWidth = computed(() => {
|
|
14576
|
+
if (!this.whiteCard() && !this.blackCard())
|
|
14577
|
+
return '100%';
|
|
14578
|
+
const expanded = this.isPanelExpanded();
|
|
14579
|
+
const mobile = this.isMobile();
|
|
14580
|
+
if (mobile)
|
|
14581
|
+
return expanded ? '0%' : '100%';
|
|
14582
|
+
return expanded ? 'calc(75% - 0.25rem)' : '100%';
|
|
14583
|
+
});
|
|
14584
|
+
this.panelWidth = computed(() => {
|
|
14561
14585
|
if (!this.whiteCard() && !this.blackCard())
|
|
14562
|
-
return '
|
|
14563
|
-
|
|
14586
|
+
return '0%';
|
|
14587
|
+
const expanded = this.isPanelExpanded();
|
|
14588
|
+
const mobile = this.isMobile();
|
|
14589
|
+
if (mobile)
|
|
14590
|
+
return expanded ? '100%' : '0%';
|
|
14591
|
+
return expanded ? 'calc(25% - 0.25rem)' : '0%';
|
|
14564
14592
|
});
|
|
14565
|
-
|
|
14593
|
+
}
|
|
14594
|
+
ngOnInit() {
|
|
14595
|
+
this.checkMobileState();
|
|
14596
|
+
}
|
|
14597
|
+
onResize() {
|
|
14598
|
+
this.checkMobileState();
|
|
14599
|
+
}
|
|
14600
|
+
checkMobileState() {
|
|
14601
|
+
if (typeof window !== 'undefined') {
|
|
14602
|
+
const isMob = window.innerWidth < 1024;
|
|
14603
|
+
// Atualiza o sinal apenas se houver mudança real, economiza ciclos do Change Detection
|
|
14604
|
+
if (this.isMobile() !== isMob) {
|
|
14605
|
+
this.isMobile.set(isMob);
|
|
14606
|
+
}
|
|
14607
|
+
}
|
|
14608
|
+
}
|
|
14609
|
+
togglePanel() {
|
|
14610
|
+
this.userToggledPanel.set(!this.isPanelExpanded());
|
|
14566
14611
|
}
|
|
14567
14612
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvInstructionPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14568
|
-
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\">\
|
|
14613
|
+
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\">\n <div class=\"flex-1 min-h-0 flex flex-row p-2 justify-content-between relative overflow-hidden\">\n <!-- Main Content Container -->\n <div class=\"h-full max-h-full transition-all duration-300 ease-in-out overflow-y-auto flex-shrink-0\"\n [style.width]=\"mainContentWidth()\" [class.opacity-0]=\"isMobile() && isPanelExpanded()\">\n <ng-content select=\"[main-content]\"></ng-content>\n </div>\n\n <!-- Instruction Page Panel (Side) -->\n <div class=\"h-full transition-all duration-300 ease-in-out flex-shrink-0 overflow-y-auto\"\n [style.width]=\"panelWidth()\" [class.opacity-0]=\"!isPanelExpanded()\">\n <kv-cards-instruction [whiteCard]=\"whiteCard()\" [blackCard]=\"blackCard()\" class=\"block w-full h-full\">\n <div white-card-content class=\"h-full\">\n <ng-content select=\"[white-card-content]\"></ng-content>\n </div>\n <div black-card-content class=\"h-full\">\n <ng-content select=\"[black-card-content]\"></ng-content>\n </div>\n </kv-cards-instruction>\n </div>\n\n <!-- Floating Toggle Button -->\n @if (whiteCard() || blackCard()) {\n <kv-button [severity]=\"'secondary'\" [size]=\"'large'\" [type]=\"isPanelExpanded() ? 'text' : undefined\"\n [icon]=\"isPanelExpanded() ? 'close' : 'quick_reference'\"\n class=\"absolute z-50 transition-all duration-300 ease-in-out bg-white inline-flex border-round\"\n [style.top]=\"'1rem'\" [style.right]=\"'1rem'\" (onClick)=\"togglePanel()\">\n </kv-button>\n }\n </div>\n\n @if (actions().length > 0) {\n <div class=\"flex-initial flex-none flex flex-row justify-content-{{\n camposObrigatorios() ? 'between' : 'end'\n }} align-items-center p-2\">\n @if (camposObrigatorios()) {\n <span class=\"text-xs text-red-500 font-semibold\">* Preenchimento obrigat\u00F3rio</span>\n }\n\n <div class=\"flex flex-row justify-content-end gap-2\">\n @for (action of actions().slice().reverse(); track action.index) {\n <kv-button [label]=\"action.label || ''\" [severity]=\"action.severity || 'tertiary'\"\n [disabled]=\"action.disabled || false\" [type]=\"action.type\" [size]=\"action.size || 'small'\"\n [icon]=\"action.icon || ''\" [iconPosition]=\"action.iconPosition || 'left'\" [items]=\"action.items || []\"\n [popup]=\"action.popup || false\" [popupIcon]=\"action.popupIcon || false\" [fullWidth]=\"action.fullWidth || false\"\n (onClick)=\"action?.command($event)\"></kv-button>\n }\n </div>\n </div>\n }\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 }); }
|
|
14569
14614
|
}
|
|
14570
14615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: KvInstructionPageComponent, decorators: [{
|
|
14571
14616
|
type: Component,
|
|
14572
|
-
args: [{ selector: 'kv-instruction-page', standalone: true, imports: [KvButtonModule, DividerModule, KvCardsInstructionComponent,
|
|
14573
|
-
}]
|
|
14617
|
+
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\">\n <div class=\"flex-1 min-h-0 flex flex-row p-2 justify-content-between relative overflow-hidden\">\n <!-- Main Content Container -->\n <div class=\"h-full max-h-full transition-all duration-300 ease-in-out overflow-y-auto flex-shrink-0\"\n [style.width]=\"mainContentWidth()\" [class.opacity-0]=\"isMobile() && isPanelExpanded()\">\n <ng-content select=\"[main-content]\"></ng-content>\n </div>\n\n <!-- Instruction Page Panel (Side) -->\n <div class=\"h-full transition-all duration-300 ease-in-out flex-shrink-0 overflow-y-auto\"\n [style.width]=\"panelWidth()\" [class.opacity-0]=\"!isPanelExpanded()\">\n <kv-cards-instruction [whiteCard]=\"whiteCard()\" [blackCard]=\"blackCard()\" class=\"block w-full h-full\">\n <div white-card-content class=\"h-full\">\n <ng-content select=\"[white-card-content]\"></ng-content>\n </div>\n <div black-card-content class=\"h-full\">\n <ng-content select=\"[black-card-content]\"></ng-content>\n </div>\n </kv-cards-instruction>\n </div>\n\n <!-- Floating Toggle Button -->\n @if (whiteCard() || blackCard()) {\n <kv-button [severity]=\"'secondary'\" [size]=\"'large'\" [type]=\"isPanelExpanded() ? 'text' : undefined\"\n [icon]=\"isPanelExpanded() ? 'close' : 'quick_reference'\"\n class=\"absolute z-50 transition-all duration-300 ease-in-out bg-white inline-flex border-round\"\n [style.top]=\"'1rem'\" [style.right]=\"'1rem'\" (onClick)=\"togglePanel()\">\n </kv-button>\n }\n </div>\n\n @if (actions().length > 0) {\n <div class=\"flex-initial flex-none flex flex-row justify-content-{{\n camposObrigatorios() ? 'between' : 'end'\n }} align-items-center p-2\">\n @if (camposObrigatorios()) {\n <span class=\"text-xs text-red-500 font-semibold\">* Preenchimento obrigat\u00F3rio</span>\n }\n\n <div class=\"flex flex-row justify-content-end gap-2\">\n @for (action of actions().slice().reverse(); track action.index) {\n <kv-button [label]=\"action.label || ''\" [severity]=\"action.severity || 'tertiary'\"\n [disabled]=\"action.disabled || false\" [type]=\"action.type\" [size]=\"action.size || 'small'\"\n [icon]=\"action.icon || ''\" [iconPosition]=\"action.iconPosition || 'left'\" [items]=\"action.items || []\"\n [popup]=\"action.popup || false\" [popupIcon]=\"action.popupIcon || false\" [fullWidth]=\"action.fullWidth || false\"\n (onClick)=\"action?.command($event)\"></kv-button>\n }\n </div>\n </div>\n }\n</div>" }]
|
|
14618
|
+
}], propDecorators: { onResize: [{
|
|
14619
|
+
type: HostListener,
|
|
14620
|
+
args: ['window:resize']
|
|
14621
|
+
}] } });
|
|
14574
14622
|
|
|
14575
14623
|
class KvChipsComponent {
|
|
14576
14624
|
constructor() {
|