ngx-opalbytes-components 1.27.0 → 1.29.0
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/README.md +361 -1
- package/cli/cao-comp.cjs +10 -10
- package/fesm2022/ngx-opalbytes-components.mjs +350 -4
- package/fesm2022/ngx-opalbytes-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/shared/components/accordion/accordion.component.css +30 -0
- package/src/lib/shared/components/accordion/accordion.component.html +1 -0
- package/src/lib/shared/components/accordion/accordion.component.spec.ts +117 -0
- package/src/lib/shared/components/accordion/accordion.component.ts +195 -0
- package/src/lib/shared/components/accordion/accordion.token.ts +40 -0
- package/src/lib/shared/components/accordion-item/accordion-item.component.css +137 -0
- package/src/lib/shared/components/accordion-item/accordion-item.component.html +52 -0
- package/src/lib/shared/components/accordion-item/accordion-item.component.ts +157 -0
- package/src/lib/shared/components/accordion-item/accordion-item.spec.ts +22 -0
- package/src/lib/shared/components/avatar/avatar.constants.ts +17 -0
- package/src/lib/shared/components/avatar/avatar.css +44 -0
- package/src/lib/shared/components/avatar/avatar.html +27 -0
- package/src/lib/shared/components/avatar/avatar.model.ts +3 -0
- package/src/lib/shared/components/avatar/avatar.spec.ts +88 -0
- package/src/lib/shared/components/avatar/avatar.stories.ts +85 -0
- package/src/lib/shared/components/avatar/avatar.ts +83 -0
- package/src/lib/shared/components/avatar/index.ts +3 -0
- package/src/lib/shared/components/breadcrumb/breadcrumb.css +105 -0
- package/src/lib/shared/components/breadcrumb/breadcrumb.html +108 -0
- package/src/lib/shared/components/breadcrumb/breadcrumb.model.ts +54 -0
- package/src/lib/shared/components/breadcrumb/breadcrumb.spec.ts +93 -0
- package/src/lib/shared/components/breadcrumb/breadcrumb.stories.ts +122 -0
- package/src/lib/shared/components/breadcrumb/breadcrumb.ts +72 -0
- package/src/lib/shared/components/breadcrumb/index.ts +2 -0
- package/src/lib/shared/components/index.ts +5 -1
- package/types/ngx-opalbytes-components.d.ts +354 -129
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { InjectionToken, inject, ElementRef, input, computed, forwardRef, HostListener, HostBinding, ChangeDetectionStrategy, Component, DestroyRef, model, output, effect, untracked, EventEmitter, Input, Output, ViewChild, ChangeDetectorRef, Renderer2, ViewContainerRef, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, Optional, Inject, Injectable } from '@angular/core';
|
|
1
3
|
import * as i1 from '@angular/common';
|
|
2
4
|
import { CommonModule, isPlatformBrowser, NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
|
|
3
|
-
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter, Input, Output, Component, ViewChild, inject, ElementRef, ChangeDetectorRef, Renderer2, ViewContainerRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, NgModule, ContentChildren, Directive, TemplateRef, ContentChild, signal, PLATFORM_ID, ViewChildren, HostBinding, input, computed, Optional, Inject, Injectable, output, DestroyRef } from '@angular/core';
|
|
5
5
|
import * as i3 from '@angular/material/tooltip';
|
|
6
6
|
import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
|
|
7
7
|
import { LucideDynamicIcon } from '@lucide/angular';
|
|
@@ -22,7 +22,7 @@ import { ScrollDispatcher, CdkScrollable } from '@angular/cdk/scrolling';
|
|
|
22
22
|
import { BehaviorSubject, Subscription, combineLatest, startWith, map, Subject } from 'rxjs';
|
|
23
23
|
import * as i1$2 from '@angular/material/icon';
|
|
24
24
|
import { MatIconModule } from '@angular/material/icon';
|
|
25
|
-
import { Router, ActivatedRoute } from '@angular/router';
|
|
25
|
+
import { Router, ActivatedRoute, RouterLink } from '@angular/router';
|
|
26
26
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
27
27
|
import * as i2$3 from '@angular/material/button';
|
|
28
28
|
import { MatButtonModule } from '@angular/material/button';
|
|
@@ -60,6 +60,297 @@ import { MatTreeModule } from '@angular/material/tree';
|
|
|
60
60
|
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
61
61
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
62
62
|
|
|
63
|
+
const CAO_ACCORDION = new InjectionToken('CAO_ACCORDION');
|
|
64
|
+
|
|
65
|
+
const HEADER_SELECTOR = '.cao-accordion-item__header:not(:disabled)';
|
|
66
|
+
/**
|
|
67
|
+
* Container de `<cao-accordion-item>`. Controla o modo de expansão (único ou múltiplo),
|
|
68
|
+
* a navegação por teclado e o tema (cores, posições e visibilidade) herdado pelos itens.
|
|
69
|
+
*/
|
|
70
|
+
class CaoAccordionComponent {
|
|
71
|
+
host = inject(ElementRef);
|
|
72
|
+
items = new Set();
|
|
73
|
+
// ----- Comportamento -----
|
|
74
|
+
/** Permite vários itens expandidos ao mesmo tempo. */
|
|
75
|
+
multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : []));
|
|
76
|
+
/** Oculta o ícone de expandir/recolher em todos os itens (cada item pode sobrescrever). */
|
|
77
|
+
hideToggle = input(false, ...(ngDevMode ? [{ debugName: "hideToggle" }] : []));
|
|
78
|
+
/** Exibe ou oculta o accordion inteiro. */
|
|
79
|
+
isVisible = input(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
|
|
80
|
+
/** Atributo `data-cy` para testes E2E. */
|
|
81
|
+
dataCy = input('', ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
|
|
82
|
+
// ----- Posição / layout -----
|
|
83
|
+
togglePosition = input('after', ...(ngDevMode ? [{ debugName: "togglePosition" }] : []));
|
|
84
|
+
headerAlign = input('start', ...(ngDevMode ? [{ debugName: "headerAlign" }] : []));
|
|
85
|
+
contentAlign = input('start', ...(ngDevMode ? [{ debugName: "contentAlign" }] : []));
|
|
86
|
+
displayMode = input('default', ...(ngDevMode ? [{ debugName: "displayMode" }] : []));
|
|
87
|
+
// ----- Cores -----
|
|
88
|
+
headerBgColor = input('', ...(ngDevMode ? [{ debugName: "headerBgColor" }] : []));
|
|
89
|
+
headerTextColor = input('', ...(ngDevMode ? [{ debugName: "headerTextColor" }] : []));
|
|
90
|
+
headerHoverBgColor = input('', ...(ngDevMode ? [{ debugName: "headerHoverBgColor" }] : []));
|
|
91
|
+
headerActiveBgColor = input('', ...(ngDevMode ? [{ debugName: "headerActiveBgColor" }] : []));
|
|
92
|
+
activeColor = input('', ...(ngDevMode ? [{ debugName: "activeColor" }] : []));
|
|
93
|
+
contentBgColor = input('', ...(ngDevMode ? [{ debugName: "contentBgColor" }] : []));
|
|
94
|
+
contentTextColor = input('', ...(ngDevMode ? [{ debugName: "contentTextColor" }] : []));
|
|
95
|
+
borderColor = input('', ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
|
|
96
|
+
disabledColor = input('', ...(ngDevMode ? [{ debugName: "disabledColor" }] : []));
|
|
97
|
+
focusRingColor = input('', ...(ngDevMode ? [{ debugName: "focusRingColor" }] : []));
|
|
98
|
+
iconColor = input('', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
|
|
99
|
+
// ----- Dimensões / animação -----
|
|
100
|
+
borderRadius = input('', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
|
|
101
|
+
gap = input('', ...(ngDevMode ? [{ debugName: "gap" }] : []));
|
|
102
|
+
headerPadding = input('', ...(ngDevMode ? [{ debugName: "headerPadding" }] : []));
|
|
103
|
+
contentPadding = input('', ...(ngDevMode ? [{ debugName: "contentPadding" }] : []));
|
|
104
|
+
animationDuration = input('', ...(ngDevMode ? [{ debugName: "animationDuration" }] : []));
|
|
105
|
+
hostStyle = computed(() => ({
|
|
106
|
+
'--cao-accordion-header-bg': this.headerBgColor() || null,
|
|
107
|
+
'--cao-accordion-header-text': this.headerTextColor() || null,
|
|
108
|
+
'--cao-accordion-header-hover-bg': this.headerHoverBgColor() || null,
|
|
109
|
+
'--cao-accordion-header-active-bg': this.headerActiveBgColor() || null,
|
|
110
|
+
'--cao-accordion-active-color': this.activeColor() || null,
|
|
111
|
+
'--cao-accordion-content-bg': this.contentBgColor() || null,
|
|
112
|
+
'--cao-accordion-content-text': this.contentTextColor() || null,
|
|
113
|
+
'--cao-accordion-border-color': this.borderColor() || null,
|
|
114
|
+
'--cao-accordion-disabled-color': this.disabledColor() || null,
|
|
115
|
+
'--cao-accordion-focus-ring': this.focusRingColor() || null,
|
|
116
|
+
'--cao-accordion-icon-color': this.iconColor() || null,
|
|
117
|
+
'--cao-accordion-radius': this.borderRadius() || null,
|
|
118
|
+
'--cao-accordion-gap': this.gap() || null,
|
|
119
|
+
'--cao-accordion-header-padding': this.headerPadding() || null,
|
|
120
|
+
'--cao-accordion-content-padding': this.contentPadding() || null,
|
|
121
|
+
'--cao-accordion-duration': this.animationDuration() || null,
|
|
122
|
+
'--cao-accordion-content-align': this.contentAlign(),
|
|
123
|
+
}), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
|
|
124
|
+
get styleBinding() {
|
|
125
|
+
return this.hostStyle();
|
|
126
|
+
}
|
|
127
|
+
get dataCyAttr() {
|
|
128
|
+
return this.dataCy() || null;
|
|
129
|
+
}
|
|
130
|
+
get hiddenClass() {
|
|
131
|
+
return !this.isVisible();
|
|
132
|
+
}
|
|
133
|
+
get defaultModeClass() {
|
|
134
|
+
return this.displayMode() === 'default';
|
|
135
|
+
}
|
|
136
|
+
get flatModeClass() {
|
|
137
|
+
return this.displayMode() === 'flat';
|
|
138
|
+
}
|
|
139
|
+
get separatedModeClass() {
|
|
140
|
+
return this.displayMode() === 'separated';
|
|
141
|
+
}
|
|
142
|
+
/** Expande todos os itens. Só tem efeito quando `multi` está ativo. */
|
|
143
|
+
openAll() {
|
|
144
|
+
if (!this.multi()) {
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
this.items.forEach((item) => item.open());
|
|
148
|
+
}
|
|
149
|
+
/** Recolhe todos os itens. */
|
|
150
|
+
closeAll() {
|
|
151
|
+
this.items.forEach((item) => item.close());
|
|
152
|
+
}
|
|
153
|
+
register(item) {
|
|
154
|
+
this.items.add(item);
|
|
155
|
+
}
|
|
156
|
+
unregister(item) {
|
|
157
|
+
this.items.delete(item);
|
|
158
|
+
}
|
|
159
|
+
/** Chamado pelos itens ao expandir: no modo único, recolhe os demais. */
|
|
160
|
+
notifyOpened(item) {
|
|
161
|
+
if (this.multi()) {
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
164
|
+
this.items.forEach((other) => {
|
|
165
|
+
if (other !== item && other.expanded()) {
|
|
166
|
+
other.close();
|
|
167
|
+
}
|
|
168
|
+
});
|
|
169
|
+
}
|
|
170
|
+
/** Navegação por teclado entre cabeçalhos: ↑ ↓ Home End. */
|
|
171
|
+
onKeydown(event) {
|
|
172
|
+
const root = this.host.nativeElement;
|
|
173
|
+
const target = event.target;
|
|
174
|
+
if (!target?.classList.contains('cao-accordion-item__header') || target.closest('cao-accordion') !== root) {
|
|
175
|
+
return;
|
|
176
|
+
}
|
|
177
|
+
const headers = Array.from(root.querySelectorAll(HEADER_SELECTOR)).filter((header) => header.closest('cao-accordion') === root && !header.closest('.cao-accordion-item--hidden'));
|
|
178
|
+
const current = headers.indexOf(target);
|
|
179
|
+
const last = headers.length - 1;
|
|
180
|
+
let next;
|
|
181
|
+
switch (event.key) {
|
|
182
|
+
case 'ArrowDown':
|
|
183
|
+
next = current >= last ? 0 : current + 1;
|
|
184
|
+
break;
|
|
185
|
+
case 'ArrowUp':
|
|
186
|
+
next = current <= 0 ? last : current - 1;
|
|
187
|
+
break;
|
|
188
|
+
case 'Home':
|
|
189
|
+
next = 0;
|
|
190
|
+
break;
|
|
191
|
+
case 'End':
|
|
192
|
+
next = last;
|
|
193
|
+
break;
|
|
194
|
+
default:
|
|
195
|
+
return;
|
|
196
|
+
}
|
|
197
|
+
event.preventDefault();
|
|
198
|
+
headers[next]?.focus();
|
|
199
|
+
}
|
|
200
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
201
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: CaoAccordionComponent, isStandalone: true, selector: "cao-accordion", inputs: { multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, togglePosition: { classPropertyName: "togglePosition", publicName: "togglePosition", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, contentAlign: { classPropertyName: "contentAlign", publicName: "contentAlign", isSignal: true, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: true, isRequired: false, transformFunction: null }, headerBgColor: { classPropertyName: "headerBgColor", publicName: "headerBgColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, headerHoverBgColor: { classPropertyName: "headerHoverBgColor", publicName: "headerHoverBgColor", isSignal: true, isRequired: false, transformFunction: null }, headerActiveBgColor: { classPropertyName: "headerActiveBgColor", publicName: "headerActiveBgColor", isSignal: true, isRequired: false, transformFunction: null }, activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null }, contentBgColor: { classPropertyName: "contentBgColor", publicName: "contentBgColor", isSignal: true, isRequired: false, transformFunction: null }, contentTextColor: { classPropertyName: "contentTextColor", publicName: "contentTextColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, disabledColor: { classPropertyName: "disabledColor", publicName: "disabledColor", isSignal: true, isRequired: false, transformFunction: null }, focusRingColor: { classPropertyName: "focusRingColor", publicName: "focusRingColor", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, headerPadding: { classPropertyName: "headerPadding", publicName: "headerPadding", isSignal: true, isRequired: false, transformFunction: null }, contentPadding: { classPropertyName: "contentPadding", publicName: "contentPadding", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "style": "this.styleBinding", "attr.data-cy": "this.dataCyAttr", "class.cao-accordion--hidden": "this.hiddenClass", "class.cao-accordion--default": "this.defaultModeClass", "class.cao-accordion--flat": "this.flatModeClass", "class.cao-accordion--separated": "this.separatedModeClass" } }, providers: [{ provide: CAO_ACCORDION, useExisting: forwardRef(() => CaoAccordionComponent) }], ngImport: i0, template: "<ng-content />", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host(.cao-accordion--hidden){display:none}:host(.cao-accordion--default){gap:1px;background:var(--cao-accordion-border-color, #e5e7eb);border:1px solid var(--cao-accordion-border-color, #e5e7eb);border-radius:var(--cao-accordion-radius, 8px);overflow:hidden}:host(.cao-accordion--flat){gap:1px;background:var(--cao-accordion-border-color, #e5e7eb);border-top:1px solid var(--cao-accordion-border-color, #e5e7eb);border-bottom:1px solid var(--cao-accordion-border-color, #e5e7eb)}:host(.cao-accordion--separated){gap:var(--cao-accordion-gap, 8px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
202
|
+
}
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAccordionComponent, decorators: [{
|
|
204
|
+
type: Component,
|
|
205
|
+
args: [{ selector: 'cao-accordion', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CAO_ACCORDION, useExisting: forwardRef(() => CaoAccordionComponent) }], template: "<ng-content />", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host(.cao-accordion--hidden){display:none}:host(.cao-accordion--default){gap:1px;background:var(--cao-accordion-border-color, #e5e7eb);border:1px solid var(--cao-accordion-border-color, #e5e7eb);border-radius:var(--cao-accordion-radius, 8px);overflow:hidden}:host(.cao-accordion--flat){gap:1px;background:var(--cao-accordion-border-color, #e5e7eb);border-top:1px solid var(--cao-accordion-border-color, #e5e7eb);border-bottom:1px solid var(--cao-accordion-border-color, #e5e7eb)}:host(.cao-accordion--separated){gap:var(--cao-accordion-gap, 8px)}\n"] }]
|
|
206
|
+
}], propDecorators: { multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }], hideToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToggle", required: false }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], togglePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglePosition", required: false }] }], headerAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAlign", required: false }] }], contentAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentAlign", required: false }] }], displayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayMode", required: false }] }], headerBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBgColor", required: false }] }], headerTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTextColor", required: false }] }], headerHoverBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHoverBgColor", required: false }] }], headerActiveBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActiveBgColor", required: false }] }], activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], contentBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentBgColor", required: false }] }], contentTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTextColor", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], disabledColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledColor", required: false }] }], focusRingColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusRingColor", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], headerPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPadding", required: false }] }], contentPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPadding", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }], styleBinding: [{
|
|
207
|
+
type: HostBinding,
|
|
208
|
+
args: ['style']
|
|
209
|
+
}], dataCyAttr: [{
|
|
210
|
+
type: HostBinding,
|
|
211
|
+
args: ['attr.data-cy']
|
|
212
|
+
}], hiddenClass: [{
|
|
213
|
+
type: HostBinding,
|
|
214
|
+
args: ['class.cao-accordion--hidden']
|
|
215
|
+
}], defaultModeClass: [{
|
|
216
|
+
type: HostBinding,
|
|
217
|
+
args: ['class.cao-accordion--default']
|
|
218
|
+
}], flatModeClass: [{
|
|
219
|
+
type: HostBinding,
|
|
220
|
+
args: ['class.cao-accordion--flat']
|
|
221
|
+
}], separatedModeClass: [{
|
|
222
|
+
type: HostBinding,
|
|
223
|
+
args: ['class.cao-accordion--separated']
|
|
224
|
+
}], onKeydown: [{
|
|
225
|
+
type: HostListener,
|
|
226
|
+
args: ['keydown', ['$event']]
|
|
227
|
+
}] } });
|
|
228
|
+
|
|
229
|
+
let nextId = 0;
|
|
230
|
+
/**
|
|
231
|
+
* Item do accordion. Pode ser usado dentro de `<cao-accordion>` ou isolado (como um cartão expansível).
|
|
232
|
+
* Os inputs de cor/posição, quando informados, sobrescrevem os valores definidos no accordion.
|
|
233
|
+
*/
|
|
234
|
+
class CaoAccordionItemComponent {
|
|
235
|
+
accordion = inject(CAO_ACCORDION, { optional: true });
|
|
236
|
+
destroyRef = inject(DestroyRef);
|
|
237
|
+
previousExpanded = null;
|
|
238
|
+
headerId = `cao-accordion-header-${nextId}`;
|
|
239
|
+
panelId = `cao-accordion-panel-${nextId++}`;
|
|
240
|
+
// ----- Conteúdo -----
|
|
241
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
242
|
+
description = input('', ...(ngDevMode ? [{ debugName: "description" }] : []));
|
|
243
|
+
/** Nível do heading (aria-level) do cabeçalho. */
|
|
244
|
+
headingLevel = input(3, ...(ngDevMode ? [{ debugName: "headingLevel" }] : []));
|
|
245
|
+
// ----- Estado -----
|
|
246
|
+
/** Estado de expansão. Suporta two-way binding: `[(expanded)]`. */
|
|
247
|
+
expanded = model(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
|
|
248
|
+
isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
249
|
+
/** Exibe ou oculta o item. */
|
|
250
|
+
isVisible = input(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
|
|
251
|
+
dataCy = input('', ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
|
|
252
|
+
// ----- Posição (sobrescreve o accordion quando informado) -----
|
|
253
|
+
hideToggle = input(undefined, ...(ngDevMode ? [{ debugName: "hideToggle" }] : []));
|
|
254
|
+
togglePosition = input(undefined, ...(ngDevMode ? [{ debugName: "togglePosition" }] : []));
|
|
255
|
+
headerAlign = input(undefined, ...(ngDevMode ? [{ debugName: "headerAlign" }] : []));
|
|
256
|
+
// ----- Cores (sobrescrevem o accordion quando informadas) -----
|
|
257
|
+
headerBgColor = input('', ...(ngDevMode ? [{ debugName: "headerBgColor" }] : []));
|
|
258
|
+
headerTextColor = input('', ...(ngDevMode ? [{ debugName: "headerTextColor" }] : []));
|
|
259
|
+
headerActiveBgColor = input('', ...(ngDevMode ? [{ debugName: "headerActiveBgColor" }] : []));
|
|
260
|
+
activeColor = input('', ...(ngDevMode ? [{ debugName: "activeColor" }] : []));
|
|
261
|
+
contentBgColor = input('', ...(ngDevMode ? [{ debugName: "contentBgColor" }] : []));
|
|
262
|
+
contentTextColor = input('', ...(ngDevMode ? [{ debugName: "contentTextColor" }] : []));
|
|
263
|
+
borderColor = input('', ...(ngDevMode ? [{ debugName: "borderColor" }] : []));
|
|
264
|
+
iconColor = input('', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
|
|
265
|
+
// ----- Eventos -----
|
|
266
|
+
opened = output();
|
|
267
|
+
closed = output();
|
|
268
|
+
toggleHidden = computed(() => this.hideToggle() ?? this.accordion?.hideToggle() ?? false, ...(ngDevMode ? [{ debugName: "toggleHidden" }] : []));
|
|
269
|
+
togglePos = computed(() => this.togglePosition() ?? this.accordion?.togglePosition() ?? 'after', ...(ngDevMode ? [{ debugName: "togglePos" }] : []));
|
|
270
|
+
align = computed(() => this.headerAlign() ?? this.accordion?.headerAlign() ?? 'start', ...(ngDevMode ? [{ debugName: "align" }] : []));
|
|
271
|
+
isCard = computed(() => (this.accordion?.displayMode() ?? 'separated') === 'separated', ...(ngDevMode ? [{ debugName: "isCard" }] : []));
|
|
272
|
+
headerDataCy = computed(() => (this.dataCy() ? `${this.dataCy()}-header` : null), ...(ngDevMode ? [{ debugName: "headerDataCy" }] : []));
|
|
273
|
+
panelDataCy = computed(() => (this.dataCy() ? `${this.dataCy()}-content` : null), ...(ngDevMode ? [{ debugName: "panelDataCy" }] : []));
|
|
274
|
+
hostStyle = computed(() => ({
|
|
275
|
+
'--cao-accordion-header-bg': this.headerBgColor() || null,
|
|
276
|
+
'--cao-accordion-header-text': this.headerTextColor() || null,
|
|
277
|
+
'--cao-accordion-header-active-bg': this.headerActiveBgColor() || null,
|
|
278
|
+
'--cao-accordion-active-color': this.activeColor() || null,
|
|
279
|
+
'--cao-accordion-content-bg': this.contentBgColor() || null,
|
|
280
|
+
'--cao-accordion-content-text': this.contentTextColor() || null,
|
|
281
|
+
'--cao-accordion-border-color': this.borderColor() || null,
|
|
282
|
+
'--cao-accordion-icon-color': this.iconColor() || null,
|
|
283
|
+
'--cao-accordion-header-align': this.align(),
|
|
284
|
+
}), ...(ngDevMode ? [{ debugName: "hostStyle" }] : []));
|
|
285
|
+
get styleBinding() {
|
|
286
|
+
return this.hostStyle();
|
|
287
|
+
}
|
|
288
|
+
get dataCyAttr() {
|
|
289
|
+
return this.dataCy() || null;
|
|
290
|
+
}
|
|
291
|
+
get hiddenClass() {
|
|
292
|
+
return !this.isVisible();
|
|
293
|
+
}
|
|
294
|
+
get expandedClass() {
|
|
295
|
+
return this.expanded();
|
|
296
|
+
}
|
|
297
|
+
get cardClass() {
|
|
298
|
+
return this.isCard();
|
|
299
|
+
}
|
|
300
|
+
constructor() {
|
|
301
|
+
this.accordion?.register(this);
|
|
302
|
+
this.destroyRef.onDestroy(() => this.accordion?.unregister(this));
|
|
303
|
+
effect(() => {
|
|
304
|
+
const isExpanded = this.expanded();
|
|
305
|
+
untracked(() => this.handleExpandedChange(isExpanded));
|
|
306
|
+
});
|
|
307
|
+
}
|
|
308
|
+
/** Alterna o estado (ignorado quando o item está desabilitado). */
|
|
309
|
+
toggle() {
|
|
310
|
+
if (this.isDisabled()) {
|
|
311
|
+
return;
|
|
312
|
+
}
|
|
313
|
+
this.expanded.update((value) => !value);
|
|
314
|
+
}
|
|
315
|
+
open() {
|
|
316
|
+
this.expanded.set(true);
|
|
317
|
+
}
|
|
318
|
+
close() {
|
|
319
|
+
this.expanded.set(false);
|
|
320
|
+
}
|
|
321
|
+
handleExpandedChange(isExpanded) {
|
|
322
|
+
if (isExpanded) {
|
|
323
|
+
this.accordion?.notifyOpened(this);
|
|
324
|
+
}
|
|
325
|
+
if (this.previousExpanded !== null && this.previousExpanded !== isExpanded) {
|
|
326
|
+
const event = isExpanded ? this.opened : this.closed;
|
|
327
|
+
event.emit();
|
|
328
|
+
}
|
|
329
|
+
this.previousExpanded = isExpanded;
|
|
330
|
+
}
|
|
331
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
332
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoAccordionItemComponent, isStandalone: true, selector: "cao-accordion-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null }, hideToggle: { classPropertyName: "hideToggle", publicName: "hideToggle", isSignal: true, isRequired: false, transformFunction: null }, togglePosition: { classPropertyName: "togglePosition", publicName: "togglePosition", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, headerBgColor: { classPropertyName: "headerBgColor", publicName: "headerBgColor", isSignal: true, isRequired: false, transformFunction: null }, headerTextColor: { classPropertyName: "headerTextColor", publicName: "headerTextColor", isSignal: true, isRequired: false, transformFunction: null }, headerActiveBgColor: { classPropertyName: "headerActiveBgColor", publicName: "headerActiveBgColor", isSignal: true, isRequired: false, transformFunction: null }, activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null }, contentBgColor: { classPropertyName: "contentBgColor", publicName: "contentBgColor", isSignal: true, isRequired: false, transformFunction: null }, contentTextColor: { classPropertyName: "contentTextColor", publicName: "contentTextColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange", opened: "opened", closed: "closed" }, host: { properties: { "style": "this.styleBinding", "attr.data-cy": "this.dataCyAttr", "class.cao-accordion-item--hidden": "this.hiddenClass", "class.cao-accordion-item--expanded": "this.expandedClass", "class.cao-accordion-item--card": "this.cardClass" } }, ngImport: i0, template: "<div class=\"cao-accordion-item\">\n <div class=\"cao-accordion-item__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\n <button\n type=\"button\"\n class=\"cao-accordion-item__header\"\n [class.cao-accordion-item__header--toggle-before]=\"togglePos() === 'before'\"\n [id]=\"headerId\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"panelId\"\n [attr.data-cy]=\"headerDataCy()\"\n (click)=\"toggle()\">\n <span class=\"cao-accordion-item__text\">\n <span class=\"cao-accordion-item__label\">{{ label() }}</span>\n @if (description()) {\n <span class=\"cao-accordion-item__description\">{{ description() }}</span>\n }\n <ng-content select=\"[caoAccordionHeader]\" />\n </span>\n\n @if (!toggleHidden()) {\n <svg\n class=\"cao-accordion-item__icon\"\n viewBox=\"0 0 24 24\"\n width=\"20\"\n height=\"20\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n }\n </button>\n </div>\n\n <div\n class=\"cao-accordion-item__panel\"\n role=\"region\"\n [id]=\"panelId\"\n [attr.aria-labelledby]=\"headerId\"\n [attr.data-cy]=\"panelDataCy()\">\n <div class=\"cao-accordion-item__panel-inner\">\n <div class=\"cao-accordion-item__content\">\n <ng-content />\n </div>\n </div>\n </div>\n</div>", styles: [":host{display:block;box-sizing:border-box;min-width:0}:host(.cao-accordion-item--hidden){display:none}.cao-accordion-item{background:var(--cao-accordion-content-bg, #ffffff);color:var(--cao-accordion-content-text, #374151);overflow:hidden}:host(.cao-accordion-item--card) .cao-accordion-item{border:1px solid var(--cao-accordion-border-color, #e5e7eb);border-radius:var(--cao-accordion-radius, 8px)}.cao-accordion-item__heading{margin:0}.cao-accordion-item__header{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:var(--cao-accordion-header-padding, 12px 16px);border:0;border-radius:0;background:var(--cao-accordion-header-bg, #ffffff);color:var(--cao-accordion-header-text, #111827);font:inherit;text-align:start;cursor:pointer;transition:background-color var(--cao-accordion-duration, .25s) ease,color var(--cao-accordion-duration, .25s) ease}.cao-accordion-item__header:hover:not(:disabled){background:var(--cao-accordion-header-hover-bg, #f3f4f6)}.cao-accordion-item__header:focus-visible{outline:2px solid var(--cao-accordion-focus-ring, rgba(79, 70, 229, .35));outline-offset:-2px}.cao-accordion-item__header:disabled{color:var(--cao-accordion-disabled-color, #9ca3af);cursor:not-allowed}:host(.cao-accordion-item--expanded) .cao-accordion-item__header{background:var(--cao-accordion-header-active-bg, var(--cao-accordion-header-bg, #ffffff));color:var(--cao-accordion-active-color, #4f46e5)}:host(.cao-accordion-item--expanded) .cao-accordion-item__header:disabled{color:var(--cao-accordion-disabled-color, #9ca3af)}.cao-accordion-item__text{display:flex;flex:1 1 auto;flex-direction:column;gap:2px;min-width:0;text-align:var(--cao-accordion-header-align, start)}.cao-accordion-item__label{font-weight:600;overflow-wrap:anywhere}.cao-accordion-item__description{font-size:.8125rem;font-weight:400;opacity:.75}.cao-accordion-item__icon{flex:0 0 auto;color:var(--cao-accordion-icon-color, currentColor);transition:transform var(--cao-accordion-duration, .25s) ease}.cao-accordion-item__header--toggle-before .cao-accordion-item__icon{order:-1}:host(.cao-accordion-item--expanded) .cao-accordion-item__icon{transform:rotate(180deg)}.cao-accordion-item__panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--cao-accordion-duration, .25s) ease,visibility var(--cao-accordion-duration, .25s)}:host(.cao-accordion-item--expanded) .cao-accordion-item__panel{grid-template-rows:1fr;visibility:visible}.cao-accordion-item__panel-inner{min-height:0;overflow:hidden}.cao-accordion-item__content{padding:var(--cao-accordion-content-padding, 16px);border-top:1px solid var(--cao-accordion-border-color, #e5e7eb);text-align:var(--cao-accordion-content-align, start)}@media(prefers-reduced-motion:reduce){.cao-accordion-item__header,.cao-accordion-item__icon,.cao-accordion-item__panel{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
333
|
+
}
|
|
334
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoAccordionItemComponent, decorators: [{
|
|
335
|
+
type: Component,
|
|
336
|
+
args: [{ selector: 'cao-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cao-accordion-item\">\n <div class=\"cao-accordion-item__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\n <button\n type=\"button\"\n class=\"cao-accordion-item__header\"\n [class.cao-accordion-item__header--toggle-before]=\"togglePos() === 'before'\"\n [id]=\"headerId\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"expanded()\"\n [attr.aria-controls]=\"panelId\"\n [attr.data-cy]=\"headerDataCy()\"\n (click)=\"toggle()\">\n <span class=\"cao-accordion-item__text\">\n <span class=\"cao-accordion-item__label\">{{ label() }}</span>\n @if (description()) {\n <span class=\"cao-accordion-item__description\">{{ description() }}</span>\n }\n <ng-content select=\"[caoAccordionHeader]\" />\n </span>\n\n @if (!toggleHidden()) {\n <svg\n class=\"cao-accordion-item__icon\"\n viewBox=\"0 0 24 24\"\n width=\"20\"\n height=\"20\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n }\n </button>\n </div>\n\n <div\n class=\"cao-accordion-item__panel\"\n role=\"region\"\n [id]=\"panelId\"\n [attr.aria-labelledby]=\"headerId\"\n [attr.data-cy]=\"panelDataCy()\">\n <div class=\"cao-accordion-item__panel-inner\">\n <div class=\"cao-accordion-item__content\">\n <ng-content />\n </div>\n </div>\n </div>\n</div>", styles: [":host{display:block;box-sizing:border-box;min-width:0}:host(.cao-accordion-item--hidden){display:none}.cao-accordion-item{background:var(--cao-accordion-content-bg, #ffffff);color:var(--cao-accordion-content-text, #374151);overflow:hidden}:host(.cao-accordion-item--card) .cao-accordion-item{border:1px solid var(--cao-accordion-border-color, #e5e7eb);border-radius:var(--cao-accordion-radius, 8px)}.cao-accordion-item__heading{margin:0}.cao-accordion-item__header{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:var(--cao-accordion-header-padding, 12px 16px);border:0;border-radius:0;background:var(--cao-accordion-header-bg, #ffffff);color:var(--cao-accordion-header-text, #111827);font:inherit;text-align:start;cursor:pointer;transition:background-color var(--cao-accordion-duration, .25s) ease,color var(--cao-accordion-duration, .25s) ease}.cao-accordion-item__header:hover:not(:disabled){background:var(--cao-accordion-header-hover-bg, #f3f4f6)}.cao-accordion-item__header:focus-visible{outline:2px solid var(--cao-accordion-focus-ring, rgba(79, 70, 229, .35));outline-offset:-2px}.cao-accordion-item__header:disabled{color:var(--cao-accordion-disabled-color, #9ca3af);cursor:not-allowed}:host(.cao-accordion-item--expanded) .cao-accordion-item__header{background:var(--cao-accordion-header-active-bg, var(--cao-accordion-header-bg, #ffffff));color:var(--cao-accordion-active-color, #4f46e5)}:host(.cao-accordion-item--expanded) .cao-accordion-item__header:disabled{color:var(--cao-accordion-disabled-color, #9ca3af)}.cao-accordion-item__text{display:flex;flex:1 1 auto;flex-direction:column;gap:2px;min-width:0;text-align:var(--cao-accordion-header-align, start)}.cao-accordion-item__label{font-weight:600;overflow-wrap:anywhere}.cao-accordion-item__description{font-size:.8125rem;font-weight:400;opacity:.75}.cao-accordion-item__icon{flex:0 0 auto;color:var(--cao-accordion-icon-color, currentColor);transition:transform var(--cao-accordion-duration, .25s) ease}.cao-accordion-item__header--toggle-before .cao-accordion-item__icon{order:-1}:host(.cao-accordion-item--expanded) .cao-accordion-item__icon{transform:rotate(180deg)}.cao-accordion-item__panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--cao-accordion-duration, .25s) ease,visibility var(--cao-accordion-duration, .25s)}:host(.cao-accordion-item--expanded) .cao-accordion-item__panel{grid-template-rows:1fr;visibility:visible}.cao-accordion-item__panel-inner{min-height:0;overflow:hidden}.cao-accordion-item__content{padding:var(--cao-accordion-content-padding, 16px);border-top:1px solid var(--cao-accordion-border-color, #e5e7eb);text-align:var(--cao-accordion-content-align, start)}@media(prefers-reduced-motion:reduce){.cao-accordion-item__header,.cao-accordion-item__icon,.cao-accordion-item__panel{transition:none}}\n"] }]
|
|
337
|
+
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], hideToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideToggle", required: false }] }], togglePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "togglePosition", required: false }] }], headerAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerAlign", required: false }] }], headerBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerBgColor", required: false }] }], headerTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTextColor", required: false }] }], headerActiveBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActiveBgColor", required: false }] }], activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], contentBgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentBgColor", required: false }] }], contentTextColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTextColor", required: false }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], styleBinding: [{
|
|
338
|
+
type: HostBinding,
|
|
339
|
+
args: ['style']
|
|
340
|
+
}], dataCyAttr: [{
|
|
341
|
+
type: HostBinding,
|
|
342
|
+
args: ['attr.data-cy']
|
|
343
|
+
}], hiddenClass: [{
|
|
344
|
+
type: HostBinding,
|
|
345
|
+
args: ['class.cao-accordion-item--hidden']
|
|
346
|
+
}], expandedClass: [{
|
|
347
|
+
type: HostBinding,
|
|
348
|
+
args: ['class.cao-accordion-item--expanded']
|
|
349
|
+
}], cardClass: [{
|
|
350
|
+
type: HostBinding,
|
|
351
|
+
args: ['class.cao-accordion-item--card']
|
|
352
|
+
}] } });
|
|
353
|
+
|
|
63
354
|
class CaoBaseButtonComponent {
|
|
64
355
|
buttonClick = new EventEmitter();
|
|
65
356
|
buttonText = "Clique!";
|
|
@@ -3210,6 +3501,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
3210
3501
|
args: ["style"]
|
|
3211
3502
|
}] } });
|
|
3212
3503
|
|
|
3504
|
+
class CaoBreadcrumbComponent {
|
|
3505
|
+
/** Itens do breadcrumb. O último item é tratado como página atual. */
|
|
3506
|
+
items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
3507
|
+
/** Item "home" opcional, sempre exibido como primeiro item. */
|
|
3508
|
+
home = input(undefined, ...(ngDevMode ? [{ debugName: "home" }] : []));
|
|
3509
|
+
/** Texto do divisor. Padrão: `'/'`. Ignorado se `separatorIcon` for informado. */
|
|
3510
|
+
separator = input('/', ...(ngDevMode ? [{ debugName: "separator" }] : []));
|
|
3511
|
+
/** Ícone do divisor (nome Lucide ou imagem). Tem prioridade sobre `separator`. */
|
|
3512
|
+
separatorIcon = input('', ...(ngDevMode ? [{ debugName: "separatorIcon" }] : []));
|
|
3513
|
+
isLucideSeparatorIcon = input(true, ...(ngDevMode ? [{ debugName: "isLucideSeparatorIcon" }] : []));
|
|
3514
|
+
separatorIconSize = input(14, ...(ngDevMode ? [{ debugName: "separatorIconSize" }] : []));
|
|
3515
|
+
separatorIconStrokeWidth = input(1.5, ...(ngDevMode ? [{ debugName: "separatorIconStrokeWidth" }] : []));
|
|
3516
|
+
linkColor = input('', ...(ngDevMode ? [{ debugName: "linkColor" }] : []));
|
|
3517
|
+
linkHoverColor = input('', ...(ngDevMode ? [{ debugName: "linkHoverColor" }] : []));
|
|
3518
|
+
currentColor = input('', ...(ngDevMode ? [{ debugName: "currentColor" }] : []));
|
|
3519
|
+
separatorColor = input('', ...(ngDevMode ? [{ debugName: "separatorColor" }] : []));
|
|
3520
|
+
fontSize = input('', ...(ngDevMode ? [{ debugName: "fontSize" }] : []));
|
|
3521
|
+
gap = input('', ...(ngDevMode ? [{ debugName: "gap" }] : []));
|
|
3522
|
+
ariaLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
|
|
3523
|
+
dataCy = input('', ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
|
|
3524
|
+
/** Emitido ao clicar em qualquer item interativo. */
|
|
3525
|
+
itemClick = output();
|
|
3526
|
+
allItems = computed(() => {
|
|
3527
|
+
const home = this.home();
|
|
3528
|
+
return home ? [home, ...this.items()] : this.items();
|
|
3529
|
+
}, ...(ngDevMode ? [{ debugName: "allItems" }] : []));
|
|
3530
|
+
isInteractive(item, isLast) {
|
|
3531
|
+
return !isLast && !item.disabled && (this.hasLink(item) || !!item.href || !!item.command);
|
|
3532
|
+
}
|
|
3533
|
+
hasLink(item) {
|
|
3534
|
+
return item.link !== undefined && item.link !== null;
|
|
3535
|
+
}
|
|
3536
|
+
onItemClick(item, index, event) {
|
|
3537
|
+
if (item.disabled) {
|
|
3538
|
+
event.preventDefault();
|
|
3539
|
+
return;
|
|
3540
|
+
}
|
|
3541
|
+
const payload = { item, index, originalEvent: event };
|
|
3542
|
+
item.command?.(payload);
|
|
3543
|
+
this.itemClick.emit(payload);
|
|
3544
|
+
}
|
|
3545
|
+
iconPosition(item) {
|
|
3546
|
+
return item.iconPosition ?? 'left';
|
|
3547
|
+
}
|
|
3548
|
+
isLucide(item) {
|
|
3549
|
+
return item.isLucideIcon ?? true;
|
|
3550
|
+
}
|
|
3551
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3552
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CaoBreadcrumbComponent, isStandalone: true, selector: "cao-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, home: { classPropertyName: "home", publicName: "home", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, separatorIcon: { classPropertyName: "separatorIcon", publicName: "separatorIcon", isSignal: true, isRequired: false, transformFunction: null }, isLucideSeparatorIcon: { classPropertyName: "isLucideSeparatorIcon", publicName: "isLucideSeparatorIcon", isSignal: true, isRequired: false, transformFunction: null }, separatorIconSize: { classPropertyName: "separatorIconSize", publicName: "separatorIconSize", isSignal: true, isRequired: false, transformFunction: null }, separatorIconStrokeWidth: { classPropertyName: "separatorIconStrokeWidth", publicName: "separatorIconStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, linkColor: { classPropertyName: "linkColor", publicName: "linkColor", isSignal: true, isRequired: false, transformFunction: null }, linkHoverColor: { classPropertyName: "linkHoverColor", publicName: "linkHoverColor", isSignal: true, isRequired: false, transformFunction: null }, currentColor: { classPropertyName: "currentColor", publicName: "currentColor", isSignal: true, isRequired: false, transformFunction: null }, separatorColor: { classPropertyName: "separatorColor", publicName: "separatorColor", isSignal: true, isRequired: false, transformFunction: null }, fontSize: { classPropertyName: "fontSize", publicName: "fontSize", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<ng-template #content let-item let-index=\"index\">\n @if (item.icon && iconPosition(item) === 'left') {\n <ng-container *ngTemplateOutlet=\"icon; context: { $implicit: item }\" />\n }\n @if (item.label) {\n <span class=\"cao-breadcrumb__label\">{{ item.label }}</span>\n }\n @if (item.icon && iconPosition(item) === 'right') {\n <ng-container *ngTemplateOutlet=\"icon; context: { $implicit: item }\" />\n }\n @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n <span\n class=\"cao-breadcrumb__badge\"\n [style.color]=\"item.badgeColor || null\"\n [style.background-color]=\"item.badgeBgColor || null\"\n [attr.data-cy]=\"item.dataCy ? item.dataCy + '-badge' : null\">\n {{ item.badge }}\n </span>\n }\n</ng-template>\n\n<ng-template #icon let-item>\n <span class=\"cao-breadcrumb__icon\" aria-hidden=\"true\">\n <cao-base-icon\n [imgSource]=\"item.icon\"\n [isLucideIcon]=\"isLucide(item)\"\n [iconColor]=\"item.iconColor ?? ''\"\n [strokeWidthIcon]=\"item.iconStrokeWidth ?? 1.5\"\n [size]=\"item.iconSize ?? 16\" />\n </span>\n</ng-template>\n\n@if (allItems().length) {\n <nav\n class=\"cao-breadcrumb\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-cy]=\"dataCy() || null\"\n [style.--cao-breadcrumb-link-color]=\"linkColor() || null\"\n [style.--cao-breadcrumb-link-hover-color]=\"linkHoverColor() || null\"\n [style.--cao-breadcrumb-current-color]=\"currentColor() || null\"\n [style.--cao-breadcrumb-separator-color]=\"separatorColor() || null\"\n [style.--cao-breadcrumb-font-size]=\"fontSize() || null\"\n [style.--cao-breadcrumb-gap]=\"gap() || null\">\n <ol class=\"cao-breadcrumb__list\">\n @for (item of allItems(); track $index; let i = $index; let last = $last) {\n <li\n class=\"cao-breadcrumb__item\"\n [class.cao-breadcrumb__item--current]=\"last\"\n [class.cao-breadcrumb__item--disabled]=\"item.disabled\"\n [attr.data-cy]=\"item.dataCy || null\">\n @if (isInteractive(item, last)) {\n @if (hasLink(item)) {\n <a\n class=\"cao-breadcrumb__action\"\n [routerLink]=\"item.link\"\n [queryParams]=\"item.queryParams\"\n [target]=\"item.target ?? '_self'\"\n [attr.aria-label]=\"item.ariaLabel || null\"\n (click)=\"onItemClick(item, i, $event)\">\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item, index: i }\" />\n </a>\n } @else if (item.href) {\n <a\n class=\"cao-breadcrumb__action\"\n [attr.href]=\"item.href\"\n [attr.target]=\"item.target || null\"\n [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n [attr.aria-label]=\"item.ariaLabel || null\"\n (click)=\"onItemClick(item, i, $event)\">\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item, index: i }\" />\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"cao-breadcrumb__action\"\n [attr.aria-label]=\"item.ariaLabel || null\"\n (click)=\"onItemClick(item, i, $event)\">\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item, index: i }\" />\n </button>\n }\n } @else {\n <span\n class=\"cao-breadcrumb__text\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [attr.aria-label]=\"item.ariaLabel || null\">\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item, index: i }\" />\n </span>\n }\n </li>\n\n @if (!last) {\n <li class=\"cao-breadcrumb__separator\" role=\"presentation\" aria-hidden=\"true\">\n @if (separatorIcon()) {\n <cao-base-icon\n [imgSource]=\"separatorIcon()\"\n [isLucideIcon]=\"isLucideSeparatorIcon()\"\n [strokeWidthIcon]=\"separatorIconStrokeWidth()\"\n [size]=\"separatorIconSize()\" />\n } @else {\n {{ separator() }}\n }\n </li>\n }\n }\n </ol>\n </nav>\n}", styles: [":host{display:block}.cao-breadcrumb{--_link: var(--cao-breadcrumb-link-color, #6b7280);--_link-hover: var(--cao-breadcrumb-link-hover-color, #4f46e5);--_current: var(--cao-breadcrumb-current-color, #111827);--_separator: var(--cao-breadcrumb-separator-color, #9ca3af);--_disabled: var(--cao-breadcrumb-disabled-color, #d1d5db);--_focus: var(--cao-breadcrumb-focus-ring, rgba(79, 70, 229, .35));--_badge-bg: var(--cao-breadcrumb-badge-bg, #eef2ff);--_badge-text: var(--cao-breadcrumb-badge-text, #4338ca);--_gap: var(--cao-breadcrumb-gap, 8px);--_size: var(--cao-breadcrumb-font-size, .875rem)}.cao-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_gap);margin:0;padding:0;list-style:none;font-size:var(--_size);line-height:1.25}.cao-breadcrumb__item,.cao-breadcrumb__separator{display:inline-flex;align-items:center}.cao-breadcrumb__separator{color:var(--_separator);-webkit-user-select:none;user-select:none}.cao-breadcrumb__action,.cao-breadcrumb__text{display:inline-flex;align-items:center;gap:6px;padding:2px 4px;border:0;border-radius:4px;background:none;color:var(--_link);font:inherit;text-decoration:none}.cao-breadcrumb__action{cursor:pointer;transition:color .15s ease}.cao-breadcrumb__action:hover{color:var(--_link-hover);text-decoration:underline;text-underline-offset:3px}.cao-breadcrumb__action:focus-visible{outline:2px solid var(--_focus);outline-offset:1px}.cao-breadcrumb__item--current .cao-breadcrumb__text{color:var(--_current);font-weight:600}.cao-breadcrumb__item--disabled .cao-breadcrumb__text{color:var(--_disabled);cursor:not-allowed}.cao-breadcrumb__icon{display:inline-flex;align-items:center;line-height:0}.cao-breadcrumb__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:1px 6px;border-radius:999px;background:var(--_badge-bg);color:var(--_badge-text);font-size:.75em;font-weight:600;line-height:1.4}@media(prefers-reduced-motion:reduce){.cao-breadcrumb__action{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CaoBaseIcon, selector: "cao-base-icon", inputs: ["imgSource", "isLucideIcon", "strokeWidthIcon", "iconColor", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3553
|
+
}
|
|
3554
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CaoBreadcrumbComponent, decorators: [{
|
|
3555
|
+
type: Component,
|
|
3556
|
+
args: [{ selector: 'cao-breadcrumb', imports: [NgTemplateOutlet, RouterLink, CaoBaseIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #content let-item let-index=\"index\">\n @if (item.icon && iconPosition(item) === 'left') {\n <ng-container *ngTemplateOutlet=\"icon; context: { $implicit: item }\" />\n }\n @if (item.label) {\n <span class=\"cao-breadcrumb__label\">{{ item.label }}</span>\n }\n @if (item.icon && iconPosition(item) === 'right') {\n <ng-container *ngTemplateOutlet=\"icon; context: { $implicit: item }\" />\n }\n @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n <span\n class=\"cao-breadcrumb__badge\"\n [style.color]=\"item.badgeColor || null\"\n [style.background-color]=\"item.badgeBgColor || null\"\n [attr.data-cy]=\"item.dataCy ? item.dataCy + '-badge' : null\">\n {{ item.badge }}\n </span>\n }\n</ng-template>\n\n<ng-template #icon let-item>\n <span class=\"cao-breadcrumb__icon\" aria-hidden=\"true\">\n <cao-base-icon\n [imgSource]=\"item.icon\"\n [isLucideIcon]=\"isLucide(item)\"\n [iconColor]=\"item.iconColor ?? ''\"\n [strokeWidthIcon]=\"item.iconStrokeWidth ?? 1.5\"\n [size]=\"item.iconSize ?? 16\" />\n </span>\n</ng-template>\n\n@if (allItems().length) {\n <nav\n class=\"cao-breadcrumb\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-cy]=\"dataCy() || null\"\n [style.--cao-breadcrumb-link-color]=\"linkColor() || null\"\n [style.--cao-breadcrumb-link-hover-color]=\"linkHoverColor() || null\"\n [style.--cao-breadcrumb-current-color]=\"currentColor() || null\"\n [style.--cao-breadcrumb-separator-color]=\"separatorColor() || null\"\n [style.--cao-breadcrumb-font-size]=\"fontSize() || null\"\n [style.--cao-breadcrumb-gap]=\"gap() || null\">\n <ol class=\"cao-breadcrumb__list\">\n @for (item of allItems(); track $index; let i = $index; let last = $last) {\n <li\n class=\"cao-breadcrumb__item\"\n [class.cao-breadcrumb__item--current]=\"last\"\n [class.cao-breadcrumb__item--disabled]=\"item.disabled\"\n [attr.data-cy]=\"item.dataCy || null\">\n @if (isInteractive(item, last)) {\n @if (hasLink(item)) {\n <a\n class=\"cao-breadcrumb__action\"\n [routerLink]=\"item.link\"\n [queryParams]=\"item.queryParams\"\n [target]=\"item.target ?? '_self'\"\n [attr.aria-label]=\"item.ariaLabel || null\"\n (click)=\"onItemClick(item, i, $event)\">\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item, index: i }\" />\n </a>\n } @else if (item.href) {\n <a\n class=\"cao-breadcrumb__action\"\n [attr.href]=\"item.href\"\n [attr.target]=\"item.target || null\"\n [attr.rel]=\"item.target === '_blank' ? 'noopener noreferrer' : null\"\n [attr.aria-label]=\"item.ariaLabel || null\"\n (click)=\"onItemClick(item, i, $event)\">\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item, index: i }\" />\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"cao-breadcrumb__action\"\n [attr.aria-label]=\"item.ariaLabel || null\"\n (click)=\"onItemClick(item, i, $event)\">\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item, index: i }\" />\n </button>\n }\n } @else {\n <span\n class=\"cao-breadcrumb__text\"\n [attr.aria-current]=\"last ? 'page' : null\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [attr.aria-label]=\"item.ariaLabel || null\">\n <ng-container *ngTemplateOutlet=\"content; context: { $implicit: item, index: i }\" />\n </span>\n }\n </li>\n\n @if (!last) {\n <li class=\"cao-breadcrumb__separator\" role=\"presentation\" aria-hidden=\"true\">\n @if (separatorIcon()) {\n <cao-base-icon\n [imgSource]=\"separatorIcon()\"\n [isLucideIcon]=\"isLucideSeparatorIcon()\"\n [strokeWidthIcon]=\"separatorIconStrokeWidth()\"\n [size]=\"separatorIconSize()\" />\n } @else {\n {{ separator() }}\n }\n </li>\n }\n }\n </ol>\n </nav>\n}", styles: [":host{display:block}.cao-breadcrumb{--_link: var(--cao-breadcrumb-link-color, #6b7280);--_link-hover: var(--cao-breadcrumb-link-hover-color, #4f46e5);--_current: var(--cao-breadcrumb-current-color, #111827);--_separator: var(--cao-breadcrumb-separator-color, #9ca3af);--_disabled: var(--cao-breadcrumb-disabled-color, #d1d5db);--_focus: var(--cao-breadcrumb-focus-ring, rgba(79, 70, 229, .35));--_badge-bg: var(--cao-breadcrumb-badge-bg, #eef2ff);--_badge-text: var(--cao-breadcrumb-badge-text, #4338ca);--_gap: var(--cao-breadcrumb-gap, 8px);--_size: var(--cao-breadcrumb-font-size, .875rem)}.cao-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_gap);margin:0;padding:0;list-style:none;font-size:var(--_size);line-height:1.25}.cao-breadcrumb__item,.cao-breadcrumb__separator{display:inline-flex;align-items:center}.cao-breadcrumb__separator{color:var(--_separator);-webkit-user-select:none;user-select:none}.cao-breadcrumb__action,.cao-breadcrumb__text{display:inline-flex;align-items:center;gap:6px;padding:2px 4px;border:0;border-radius:4px;background:none;color:var(--_link);font:inherit;text-decoration:none}.cao-breadcrumb__action{cursor:pointer;transition:color .15s ease}.cao-breadcrumb__action:hover{color:var(--_link-hover);text-decoration:underline;text-underline-offset:3px}.cao-breadcrumb__action:focus-visible{outline:2px solid var(--_focus);outline-offset:1px}.cao-breadcrumb__item--current .cao-breadcrumb__text{color:var(--_current);font-weight:600}.cao-breadcrumb__item--disabled .cao-breadcrumb__text{color:var(--_disabled);cursor:not-allowed}.cao-breadcrumb__icon{display:inline-flex;align-items:center;line-height:0}.cao-breadcrumb__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:1px 6px;border-radius:999px;background:var(--_badge-bg);color:var(--_badge-text);font-size:.75em;font-weight:600;line-height:1.4}@media(prefers-reduced-motion:reduce){.cao-breadcrumb__action{transition:none}}\n"] }]
|
|
3557
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], home: [{ type: i0.Input, args: [{ isSignal: true, alias: "home", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], separatorIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorIcon", required: false }] }], isLucideSeparatorIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLucideSeparatorIcon", required: false }] }], separatorIconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorIconSize", required: false }] }], separatorIconStrokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorIconStrokeWidth", required: false }] }], linkColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkColor", required: false }] }], linkHoverColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkHoverColor", required: false }] }], currentColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentColor", required: false }] }], separatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorColor", required: false }] }], fontSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fontSize", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
3558
|
+
|
|
3213
3559
|
class BaseModalService {
|
|
3214
3560
|
constructor() { }
|
|
3215
3561
|
toggleModalEvent = new EventEmitter();
|
|
@@ -4511,5 +4857,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
4511
4857
|
* Generated bundle index. Do not edit.
|
|
4512
4858
|
*/
|
|
4513
4859
|
|
|
4514
|
-
export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoCardComponent, CaoCheckboxComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoRadioButtonComponent, CaoRadioGroupComponent, CaoSkeletonComponent, CaoSlideToggleComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
|
|
4860
|
+
export { BaseAlert, BaseAlertService, BaseDialog, BaseDialogService, BaseFilterTablePaginatedService, BaseFilterTableService, BaseModal, BaseModalService, BasePaginationService, BaseTable, BaseTablePaginated, BaseTableService, BaseTimeRange, CAO_ACCORDION, CaoAccordionComponent, CaoAccordionItemComponent, CaoAutocompleteComponent, CaoBaseButtonComponent, CaoBaseIcon, CaoBaseInput, CaoBaseToggleComponent, CaoBaseWidgetComponent, CaoBreadcrumbComponent, CaoCardComponent, CaoCheckboxComponent, CaoDropDownComponent, CaoError, CaoFormField, CaoHint, CaoKpi, CaoRadioButtonComponent, CaoRadioGroupComponent, CaoSkeletonComponent, CaoSlideToggleComponent, CaoTabGroup, CaoTabPanel, CaoWidgetService, DEFAULT_ERROR_STATE_MATCHER, ErrorStateMatcher, Footer, LinksButton, Paginator, ShowOnDirtyErrorStateMatcher, StepComponent, StepperComponent, TablePaginatedService, TimePicker, getPtBrPaginatorIntlBasePaginated, getPtBrPaginatorIntlBaseTable };
|
|
4515
4861
|
//# sourceMappingURL=ngx-opalbytes-components.mjs.map
|