@fylib/adapter-angular 0.2.5 → 0.2.7
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/dist/components/accordion.component.d.ts +3 -0
- package/dist/components/accordion.component.js +105 -194
- package/dist/components/badge.component.d.ts +3 -0
- package/dist/components/badge.component.js +30 -81
- package/dist/components/button.component.d.ts +3 -0
- package/dist/components/button.component.js +79 -194
- package/dist/components/card.component.d.ts +3 -0
- package/dist/components/card.component.js +76 -147
- package/dist/components/chart.component.d.ts +3 -0
- package/dist/components/chart.component.js +81 -141
- package/dist/components/icon.component.d.ts +3 -0
- package/dist/components/icon.component.js +39 -62
- package/dist/components/input.component.d.ts +3 -0
- package/dist/components/input.component.js +120 -221
- package/dist/components/modal.component.d.ts +3 -0
- package/dist/components/modal.component.js +121 -247
- package/dist/components/nav-link.component.d.ts +3 -0
- package/dist/components/nav-link.component.js +43 -92
- package/dist/components/notification-menu.component.d.ts +3 -0
- package/dist/components/notification-menu.component.js +205 -367
- package/dist/components/select.component.d.ts +3 -0
- package/dist/components/select.component.js +116 -188
- package/dist/components/table.component.d.ts +3 -0
- package/dist/components/table.component.js +235 -332
- package/dist/components/text.component.d.ts +3 -0
- package/dist/components/text.component.js +22 -32
- package/dist/components/toast.component.d.ts +3 -0
- package/dist/components/toast.component.js +58 -163
- package/dist/directives/animation.directive.d.ts +3 -0
- package/dist/directives/animation.directive.js +15 -22
- package/dist/directives/theme-vars.directive.d.ts +3 -0
- package/dist/directives/theme-vars.directive.js +12 -19
- package/dist/directives/wallpaper.directive.d.ts +3 -0
- package/dist/directives/wallpaper.directive.js +19 -31
- package/dist/layouts/layout.component.d.ts +3 -0
- package/dist/layouts/layout.component.js +36 -130
- package/dist/layouts/slot.component.d.ts +3 -0
- package/dist/layouts/slot.component.js +240 -596
- package/dist/services/fylib.service.d.ts +3 -0
- package/dist/services/fylib.service.js +19 -26
- package/dist/services/notification.service.d.ts +3 -0
- package/dist/services/notification.service.js +13 -16
- package/dist/services/sse.service.d.ts +3 -0
- package/dist/services/sse.service.js +11 -18
- package/dist/services/webclient.service.d.ts +3 -0
- package/dist/services/webclient.service.js +9 -12
- package/package.json +4 -3
|
@@ -1,18 +1,11 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
8
|
-
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
|
-
};
|
|
10
1
|
import { Component, Input, Output, EventEmitter, ViewEncapsulation, HostBinding, HostListener, inject } from '@angular/core';
|
|
11
2
|
import { CommonModule } from '@angular/common';
|
|
12
3
|
import { ModalDefinition } from '@fylib/catalog';
|
|
13
4
|
import { FyButtonComponent } from './button.component';
|
|
14
5
|
import { BaseFyComponent } from '../base/base-component';
|
|
15
|
-
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
import * as i1 from "@angular/common";
|
|
8
|
+
export class FyModalComponent extends BaseFyComponent {
|
|
16
9
|
get animationsDisabled() {
|
|
17
10
|
return !this.isAnimationsActive(this.activeAnimations);
|
|
18
11
|
}
|
|
@@ -123,157 +116,9 @@ let FyModalComponent = class FyModalComponent extends BaseFyComponent {
|
|
|
123
116
|
this.handleCancel();
|
|
124
117
|
}
|
|
125
118
|
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
__metadata("design:type", Boolean)
|
|
130
|
-
], FyModalComponent.prototype, "visible", void 0);
|
|
131
|
-
__decorate([
|
|
132
|
-
Input(),
|
|
133
|
-
__metadata("design:type", String)
|
|
134
|
-
], FyModalComponent.prototype, "title", void 0);
|
|
135
|
-
__decorate([
|
|
136
|
-
Input(),
|
|
137
|
-
__metadata("design:type", String)
|
|
138
|
-
], FyModalComponent.prototype, "subtitle", void 0);
|
|
139
|
-
__decorate([
|
|
140
|
-
Input(),
|
|
141
|
-
__metadata("design:type", String)
|
|
142
|
-
], FyModalComponent.prototype, "content", void 0);
|
|
143
|
-
__decorate([
|
|
144
|
-
Input(),
|
|
145
|
-
__metadata("design:type", Object)
|
|
146
|
-
], FyModalComponent.prototype, "size", void 0);
|
|
147
|
-
__decorate([
|
|
148
|
-
Input(),
|
|
149
|
-
__metadata("design:type", Object)
|
|
150
|
-
], FyModalComponent.prototype, "position", void 0);
|
|
151
|
-
__decorate([
|
|
152
|
-
Input(),
|
|
153
|
-
__metadata("design:type", Object)
|
|
154
|
-
], FyModalComponent.prototype, "status", void 0);
|
|
155
|
-
__decorate([
|
|
156
|
-
Input(),
|
|
157
|
-
__metadata("design:type", Boolean)
|
|
158
|
-
], FyModalComponent.prototype, "closable", void 0);
|
|
159
|
-
__decorate([
|
|
160
|
-
Input(),
|
|
161
|
-
__metadata("design:type", Boolean)
|
|
162
|
-
], FyModalComponent.prototype, "closeOnEscape", void 0);
|
|
163
|
-
__decorate([
|
|
164
|
-
Input(),
|
|
165
|
-
__metadata("design:type", Boolean)
|
|
166
|
-
], FyModalComponent.prototype, "closeOnBackdrop", void 0);
|
|
167
|
-
__decorate([
|
|
168
|
-
Input(),
|
|
169
|
-
__metadata("design:type", Boolean)
|
|
170
|
-
], FyModalComponent.prototype, "showHeader", void 0);
|
|
171
|
-
__decorate([
|
|
172
|
-
Input(),
|
|
173
|
-
__metadata("design:type", Boolean)
|
|
174
|
-
], FyModalComponent.prototype, "showFooter", void 0);
|
|
175
|
-
__decorate([
|
|
176
|
-
Input(),
|
|
177
|
-
__metadata("design:type", Boolean)
|
|
178
|
-
], FyModalComponent.prototype, "showConfirmButton", void 0);
|
|
179
|
-
__decorate([
|
|
180
|
-
Input(),
|
|
181
|
-
__metadata("design:type", Boolean)
|
|
182
|
-
], FyModalComponent.prototype, "showCancelButton", void 0);
|
|
183
|
-
__decorate([
|
|
184
|
-
Input(),
|
|
185
|
-
__metadata("design:type", String)
|
|
186
|
-
], FyModalComponent.prototype, "confirmText", void 0);
|
|
187
|
-
__decorate([
|
|
188
|
-
Input(),
|
|
189
|
-
__metadata("design:type", String)
|
|
190
|
-
], FyModalComponent.prototype, "cancelText", void 0);
|
|
191
|
-
__decorate([
|
|
192
|
-
Input(),
|
|
193
|
-
__metadata("design:type", Boolean)
|
|
194
|
-
], FyModalComponent.prototype, "loading", void 0);
|
|
195
|
-
__decorate([
|
|
196
|
-
Input(),
|
|
197
|
-
__metadata("design:type", Boolean)
|
|
198
|
-
], FyModalComponent.prototype, "centered", void 0);
|
|
199
|
-
__decorate([
|
|
200
|
-
Input(),
|
|
201
|
-
__metadata("design:type", Boolean)
|
|
202
|
-
], FyModalComponent.prototype, "blockScroll", void 0);
|
|
203
|
-
__decorate([
|
|
204
|
-
Input(),
|
|
205
|
-
__metadata("design:type", Boolean)
|
|
206
|
-
], FyModalComponent.prototype, "draggable", void 0);
|
|
207
|
-
__decorate([
|
|
208
|
-
Input(),
|
|
209
|
-
__metadata("design:type", Boolean)
|
|
210
|
-
], FyModalComponent.prototype, "resizable", void 0);
|
|
211
|
-
__decorate([
|
|
212
|
-
Input(),
|
|
213
|
-
__metadata("design:type", Object)
|
|
214
|
-
], FyModalComponent.prototype, "activeAnimations", void 0);
|
|
215
|
-
__decorate([
|
|
216
|
-
Input(),
|
|
217
|
-
__metadata("design:type", Object)
|
|
218
|
-
], FyModalComponent.prototype, "activeEffects", void 0);
|
|
219
|
-
__decorate([
|
|
220
|
-
Input(),
|
|
221
|
-
__metadata("design:type", Object)
|
|
222
|
-
], FyModalComponent.prototype, "customStyles", void 0);
|
|
223
|
-
__decorate([
|
|
224
|
-
Input(),
|
|
225
|
-
__metadata("design:type", Function)
|
|
226
|
-
], FyModalComponent.prototype, "onOpen", void 0);
|
|
227
|
-
__decorate([
|
|
228
|
-
Input(),
|
|
229
|
-
__metadata("design:type", Function)
|
|
230
|
-
], FyModalComponent.prototype, "onClose", void 0);
|
|
231
|
-
__decorate([
|
|
232
|
-
Input(),
|
|
233
|
-
__metadata("design:type", Function)
|
|
234
|
-
], FyModalComponent.prototype, "onConfirm", void 0);
|
|
235
|
-
__decorate([
|
|
236
|
-
Input(),
|
|
237
|
-
__metadata("design:type", Function)
|
|
238
|
-
], FyModalComponent.prototype, "onCancel", void 0);
|
|
239
|
-
__decorate([
|
|
240
|
-
Output(),
|
|
241
|
-
__metadata("design:type", Object)
|
|
242
|
-
], FyModalComponent.prototype, "fyOpen", void 0);
|
|
243
|
-
__decorate([
|
|
244
|
-
Output(),
|
|
245
|
-
__metadata("design:type", Object)
|
|
246
|
-
], FyModalComponent.prototype, "fyClose", void 0);
|
|
247
|
-
__decorate([
|
|
248
|
-
Output(),
|
|
249
|
-
__metadata("design:type", Object)
|
|
250
|
-
], FyModalComponent.prototype, "fyConfirm", void 0);
|
|
251
|
-
__decorate([
|
|
252
|
-
Output(),
|
|
253
|
-
__metadata("design:type", Object)
|
|
254
|
-
], FyModalComponent.prototype, "fyCancel", void 0);
|
|
255
|
-
__decorate([
|
|
256
|
-
HostBinding('class.fy-animations-disabled'),
|
|
257
|
-
__metadata("design:type", Boolean),
|
|
258
|
-
__metadata("design:paramtypes", [])
|
|
259
|
-
], FyModalComponent.prototype, "animationsDisabled", null);
|
|
260
|
-
__decorate([
|
|
261
|
-
HostBinding('style'),
|
|
262
|
-
__metadata("design:type", String),
|
|
263
|
-
__metadata("design:paramtypes", [])
|
|
264
|
-
], FyModalComponent.prototype, "hostStyles", null);
|
|
265
|
-
__decorate([
|
|
266
|
-
HostListener('document:keydown', ['$event']),
|
|
267
|
-
__metadata("design:type", Function),
|
|
268
|
-
__metadata("design:paramtypes", [KeyboardEvent]),
|
|
269
|
-
__metadata("design:returntype", void 0)
|
|
270
|
-
], FyModalComponent.prototype, "onKeydown", null);
|
|
271
|
-
FyModalComponent = __decorate([
|
|
272
|
-
Component({
|
|
273
|
-
selector: 'fy-modal',
|
|
274
|
-
standalone: true,
|
|
275
|
-
imports: [CommonModule, FyButtonComponent],
|
|
276
|
-
template: `
|
|
119
|
+
}
|
|
120
|
+
FyModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
121
|
+
FyModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FyModalComponent, isStandalone: true, selector: "fy-modal", inputs: { visible: "visible", title: "title", subtitle: "subtitle", content: "content", size: "size", position: "position", status: "status", closable: "closable", closeOnEscape: "closeOnEscape", closeOnBackdrop: "closeOnBackdrop", showHeader: "showHeader", showFooter: "showFooter", showConfirmButton: "showConfirmButton", showCancelButton: "showCancelButton", confirmText: "confirmText", cancelText: "cancelText", loading: "loading", centered: "centered", blockScroll: "blockScroll", draggable: "draggable", resizable: "resizable", activeAnimations: "activeAnimations", activeEffects: "activeEffects", customStyles: "customStyles", onOpen: "onOpen", onClose: "onClose", onConfirm: "onConfirm", onCancel: "onCancel" }, outputs: { fyOpen: "fyOpen", fyClose: "fyClose", fyConfirm: "fyConfirm", fyCancel: "fyCancel" }, host: { listeners: { "document:keydown": "onKeydown($event)" }, properties: { "class.fy-animations-disabled": "this.animationsDisabled", "style": "this.hostStyles" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
|
|
277
122
|
@if (visible) {
|
|
278
123
|
<div class="fy-modal-overlay" (click)="onBackdropClick()"></div>
|
|
279
124
|
<div class="fy-modal" [ngClass]="['fy-modal--' + size, 'fy-modal--status-' + status, modalAnimClass]">
|
|
@@ -313,92 +158,121 @@ FyModalComponent = __decorate([
|
|
|
313
158
|
}
|
|
314
159
|
</div>
|
|
315
160
|
}
|
|
316
|
-
`,
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
box-shadow: var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));
|
|
333
|
-
color: var(--fy-colors-text);
|
|
334
|
-
width: 90vw;
|
|
335
|
-
max-width: 640px;
|
|
336
|
-
max-height: 85vh;
|
|
337
|
-
display: flex;
|
|
338
|
-
flex-direction: column;
|
|
339
|
-
overflow: hidden;
|
|
340
|
-
z-index: 2001;
|
|
341
|
-
}
|
|
342
|
-
.fy-modal--sm { max-width: 400px; }
|
|
343
|
-
.fy-modal--md { max-width: 640px; }
|
|
344
|
-
.fy-modal--lg { max-width: 840px; }
|
|
345
|
-
.fy-modal--xl { max-width: 1040px; }
|
|
346
|
-
.fy-modal--full { width: 96vw; height: 90vh; max-width: none; }
|
|
347
|
-
|
|
348
|
-
.fy-modal__header {
|
|
349
|
-
display: flex;
|
|
350
|
-
align-items: center;
|
|
351
|
-
justify-content: space-between;
|
|
352
|
-
gap: 12px;
|
|
353
|
-
padding: 12px 16px;
|
|
354
|
-
border-bottom: 1px solid var(--fy-effects-modal-dividerColor, rgba(0,0,0,0.08));
|
|
355
|
-
}
|
|
356
|
-
.fy-modal__title {
|
|
357
|
-
margin: 0;
|
|
358
|
-
font-size: var(--fy-typography-fontSize-lg, 18px);
|
|
359
|
-
font-weight: var(--fy-typography-fontWeight-bold, 700);
|
|
360
|
-
}
|
|
361
|
-
.fy-modal__subtitle {
|
|
362
|
-
margin: 0;
|
|
363
|
-
opacity: .8;
|
|
364
|
-
font-size: var(--fy-typography-fontSize-sm, 12px);
|
|
365
|
-
}
|
|
366
|
-
.fy-modal__close {
|
|
367
|
-
border: 0;
|
|
368
|
-
background: transparent;
|
|
369
|
-
cursor: pointer;
|
|
370
|
-
font-size: 20px;
|
|
371
|
-
line-height: 1;
|
|
372
|
-
}
|
|
373
|
-
.fy-modal__body {
|
|
374
|
-
padding: 16px;
|
|
375
|
-
flex: 1;
|
|
376
|
-
overflow: auto;
|
|
377
|
-
}
|
|
378
|
-
.fy-modal__footer {
|
|
379
|
-
display: flex;
|
|
380
|
-
justify-content: flex-end;
|
|
381
|
-
gap: 8px;
|
|
382
|
-
padding: 12px 16px;
|
|
383
|
-
border-top: 1px solid var(--fy-effects-modal-dividerColor, rgba(0,0,0,0.08));
|
|
384
|
-
}
|
|
161
|
+
`, isInline: true, styles: ["\n .fy-modal-overlay {\n position: fixed;\n inset: 0;\n background: var(--fy-effects-modal-overlayColor, rgba(0,0,0,0.45));\n z-index: 2000;\n }\n .fy-modal {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: var(--fy-effects-modal-background, var(--fy-colors-surface, #fff));\n border: var(--fy-effects-modal-borderWidth, 1px) solid var(--fy-effects-modal-borderColor, rgba(0,0,0,0.12));\n border-radius: var(--fy-effects-modal-borderRadius, var(--fy-borderRadius-md));\n box-shadow: var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));\n color: var(--fy-colors-text);\n width: 90vw;\n max-width: 640px;\n max-height: 85vh;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n z-index: 2001;\n } \n .fy-modal--sm { max-width: 400px; }\n .fy-modal--md { max-width: 640px; }\n .fy-modal--lg { max-width: 840px; }\n .fy-modal--xl { max-width: 1040px; }\n .fy-modal--full { width: 96vw; height: 90vh; max-width: none; }\n\n .fy-modal__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 12px 16px;\n border-bottom: 1px solid var(--fy-effects-modal-dividerColor, rgba(0,0,0,0.08));\n }\n .fy-modal__title {\n margin: 0;\n font-size: var(--fy-typography-fontSize-lg, 18px);\n font-weight: var(--fy-typography-fontWeight-bold, 700);\n }\n .fy-modal__subtitle {\n margin: 0;\n opacity: .8;\n font-size: var(--fy-typography-fontSize-sm, 12px);\n }\n .fy-modal__close {\n border: 0;\n background: transparent;\n cursor: pointer;\n font-size: 20px;\n line-height: 1;\n }\n .fy-modal__body {\n padding: 16px;\n flex: 1; \n overflow: auto;\n }\n .fy-modal__footer {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 16px;\n border-top: 1px solid var(--fy-effects-modal-dividerColor, rgba(0,0,0,0.08));\n }\n\n .fy-modal--status-success {\n border-color: var(--fy-colors-success, #22c55e);\n box-shadow: 0 0 0 3px rgba(34,197,94,0.15), var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));\n }\n .fy-modal--status-error {\n border-color: var(--fy-colors-danger, #ef4444);\n box-shadow: 0 0 0 3px rgba(239,68,68,0.15), var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));\n }\n\n .fy-animations-disabled, .fy-animations-disabled * {\n transition: none !important;\n animation: none !important;\n }\n "], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FyButtonComponent, selector: "fy-button", inputs: ["label", "variant", "size", "disabled", "loading", "icon", "iconName", "iconSet", "activeAnimations", "activeEffects", "customStyles", "hoverAnimation", "clickAnimation", "successAnimation", "errorAnimation", "hoverEffect", "clickEffect", "successEffect", "errorEffect"], outputs: ["fyClick"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
162
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyModalComponent, decorators: [{
|
|
163
|
+
type: Component,
|
|
164
|
+
args: [{ selector: 'fy-modal', standalone: true, imports: [CommonModule, FyButtonComponent], template: `
|
|
165
|
+
@if (visible) {
|
|
166
|
+
<div class="fy-modal-overlay" (click)="onBackdropClick()"></div>
|
|
167
|
+
<div class="fy-modal" [ngClass]="['fy-modal--' + size, 'fy-modal--status-' + status, modalAnimClass]">
|
|
168
|
+
@if (showHeader) {
|
|
169
|
+
<header class="fy-modal__header">
|
|
170
|
+
@if (title) { <h3 class="fy-modal__title">{{ title }}</h3> }
|
|
171
|
+
@if (subtitle) { <p class="fy-modal__subtitle">{{ subtitle }}</p> }
|
|
172
|
+
@if (closable) {
|
|
173
|
+
<button type="button" class="fy-modal__close" (click)="handleCancel()">×</button>
|
|
174
|
+
}
|
|
175
|
+
</header>
|
|
176
|
+
}
|
|
385
177
|
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
.fy-modal--status-error {
|
|
391
|
-
border-color: var(--fy-colors-danger, #ef4444);
|
|
392
|
-
box-shadow: 0 0 0 3px rgba(239,68,68,0.15), var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));
|
|
393
|
-
}
|
|
178
|
+
<section class="fy-modal__body">
|
|
179
|
+
<ng-content></ng-content>
|
|
180
|
+
@if (content) { <div class="fy-modal__content">{{ content }}</div> }
|
|
181
|
+
</section>
|
|
394
182
|
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
183
|
+
@if (showFooter) {
|
|
184
|
+
<footer class="fy-modal__footer">
|
|
185
|
+
@if (showCancelButton) {
|
|
186
|
+
<fy-button
|
|
187
|
+
variant="ghost"
|
|
188
|
+
size="md"
|
|
189
|
+
[label]="cancelText || 'Cancelar'"
|
|
190
|
+
(fyClick)="handleCancel()"
|
|
191
|
+
></fy-button>
|
|
192
|
+
}
|
|
193
|
+
@if (showConfirmButton) {
|
|
194
|
+
<fy-button
|
|
195
|
+
size="md"
|
|
196
|
+
[label]="confirmText || 'Confirmar'"
|
|
197
|
+
(fyClick)="handleConfirm()"
|
|
198
|
+
></fy-button>
|
|
199
|
+
}
|
|
200
|
+
</footer>
|
|
201
|
+
}
|
|
202
|
+
</div>
|
|
398
203
|
}
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
204
|
+
`, encapsulation: ViewEncapsulation.None, styles: ["\n .fy-modal-overlay {\n position: fixed;\n inset: 0;\n background: var(--fy-effects-modal-overlayColor, rgba(0,0,0,0.45));\n z-index: 2000;\n }\n .fy-modal {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: var(--fy-effects-modal-background, var(--fy-colors-surface, #fff));\n border: var(--fy-effects-modal-borderWidth, 1px) solid var(--fy-effects-modal-borderColor, rgba(0,0,0,0.12));\n border-radius: var(--fy-effects-modal-borderRadius, var(--fy-borderRadius-md));\n box-shadow: var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));\n color: var(--fy-colors-text);\n width: 90vw;\n max-width: 640px;\n max-height: 85vh;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n z-index: 2001;\n } \n .fy-modal--sm { max-width: 400px; }\n .fy-modal--md { max-width: 640px; }\n .fy-modal--lg { max-width: 840px; }\n .fy-modal--xl { max-width: 1040px; }\n .fy-modal--full { width: 96vw; height: 90vh; max-width: none; }\n\n .fy-modal__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 12px 16px;\n border-bottom: 1px solid var(--fy-effects-modal-dividerColor, rgba(0,0,0,0.08));\n }\n .fy-modal__title {\n margin: 0;\n font-size: var(--fy-typography-fontSize-lg, 18px);\n font-weight: var(--fy-typography-fontWeight-bold, 700);\n }\n .fy-modal__subtitle {\n margin: 0;\n opacity: .8;\n font-size: var(--fy-typography-fontSize-sm, 12px);\n }\n .fy-modal__close {\n border: 0;\n background: transparent;\n cursor: pointer;\n font-size: 20px;\n line-height: 1;\n }\n .fy-modal__body {\n padding: 16px;\n flex: 1; \n overflow: auto;\n }\n .fy-modal__footer {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 16px;\n border-top: 1px solid var(--fy-effects-modal-dividerColor, rgba(0,0,0,0.08));\n }\n\n .fy-modal--status-success {\n border-color: var(--fy-colors-success, #22c55e);\n box-shadow: 0 0 0 3px rgba(34,197,94,0.15), var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));\n }\n .fy-modal--status-error {\n border-color: var(--fy-colors-danger, #ef4444);\n box-shadow: 0 0 0 3px rgba(239,68,68,0.15), var(--fy-effects-modal-shadow, 0 20px 60px rgba(0,0,0,0.2));\n }\n\n .fy-animations-disabled, .fy-animations-disabled * {\n transition: none !important;\n animation: none !important;\n }\n "] }]
|
|
205
|
+
}], ctorParameters: () => [], propDecorators: { visible: [{
|
|
206
|
+
type: Input
|
|
207
|
+
}], title: [{
|
|
208
|
+
type: Input
|
|
209
|
+
}], subtitle: [{
|
|
210
|
+
type: Input
|
|
211
|
+
}], content: [{
|
|
212
|
+
type: Input
|
|
213
|
+
}], size: [{
|
|
214
|
+
type: Input
|
|
215
|
+
}], position: [{
|
|
216
|
+
type: Input
|
|
217
|
+
}], status: [{
|
|
218
|
+
type: Input
|
|
219
|
+
}], closable: [{
|
|
220
|
+
type: Input
|
|
221
|
+
}], closeOnEscape: [{
|
|
222
|
+
type: Input
|
|
223
|
+
}], closeOnBackdrop: [{
|
|
224
|
+
type: Input
|
|
225
|
+
}], showHeader: [{
|
|
226
|
+
type: Input
|
|
227
|
+
}], showFooter: [{
|
|
228
|
+
type: Input
|
|
229
|
+
}], showConfirmButton: [{
|
|
230
|
+
type: Input
|
|
231
|
+
}], showCancelButton: [{
|
|
232
|
+
type: Input
|
|
233
|
+
}], confirmText: [{
|
|
234
|
+
type: Input
|
|
235
|
+
}], cancelText: [{
|
|
236
|
+
type: Input
|
|
237
|
+
}], loading: [{
|
|
238
|
+
type: Input
|
|
239
|
+
}], centered: [{
|
|
240
|
+
type: Input
|
|
241
|
+
}], blockScroll: [{
|
|
242
|
+
type: Input
|
|
243
|
+
}], draggable: [{
|
|
244
|
+
type: Input
|
|
245
|
+
}], resizable: [{
|
|
246
|
+
type: Input
|
|
247
|
+
}], activeAnimations: [{
|
|
248
|
+
type: Input
|
|
249
|
+
}], activeEffects: [{
|
|
250
|
+
type: Input
|
|
251
|
+
}], customStyles: [{
|
|
252
|
+
type: Input
|
|
253
|
+
}], onOpen: [{
|
|
254
|
+
type: Input
|
|
255
|
+
}], onClose: [{
|
|
256
|
+
type: Input
|
|
257
|
+
}], onConfirm: [{
|
|
258
|
+
type: Input
|
|
259
|
+
}], onCancel: [{
|
|
260
|
+
type: Input
|
|
261
|
+
}], fyOpen: [{
|
|
262
|
+
type: Output
|
|
263
|
+
}], fyClose: [{
|
|
264
|
+
type: Output
|
|
265
|
+
}], fyConfirm: [{
|
|
266
|
+
type: Output
|
|
267
|
+
}], fyCancel: [{
|
|
268
|
+
type: Output
|
|
269
|
+
}], animationsDisabled: [{
|
|
270
|
+
type: HostBinding,
|
|
271
|
+
args: ['class.fy-animations-disabled']
|
|
272
|
+
}], hostStyles: [{
|
|
273
|
+
type: HostBinding,
|
|
274
|
+
args: ['style']
|
|
275
|
+
}], onKeydown: [{
|
|
276
|
+
type: HostListener,
|
|
277
|
+
args: ['document:keydown', ['$event']]
|
|
278
|
+
}] } });
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
1
2
|
export declare class FyNavLinkComponent {
|
|
2
3
|
label: string;
|
|
3
4
|
to?: string;
|
|
@@ -8,4 +9,6 @@ export declare class FyNavLinkComponent {
|
|
|
8
9
|
iconName?: string;
|
|
9
10
|
iconSet?: 'ph' | 'fa' | 'mdi';
|
|
10
11
|
get hasProjectedContent(): boolean;
|
|
12
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<FyNavLinkComponent, never>;
|
|
13
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<FyNavLinkComponent, "fy-nav-link", never, { "label": { "alias": "label"; "required": false; }; "to": { "alias": "to"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "active": { "alias": "active"; "required": false; }; "hoverEnabled": { "alias": "hoverEnabled"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "iconSet": { "alias": "iconSet"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
11
14
|
}
|
|
@@ -1,16 +1,8 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
8
|
-
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
9
|
-
};
|
|
10
1
|
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
|
11
2
|
import { CommonModule } from '@angular/common';
|
|
12
3
|
import { FyIconComponent } from './icon.component';
|
|
13
|
-
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
export class FyNavLinkComponent {
|
|
14
6
|
constructor() {
|
|
15
7
|
this.label = '';
|
|
16
8
|
this.hoverEnabled = true;
|
|
@@ -19,45 +11,9 @@ let FyNavLinkComponent = class FyNavLinkComponent {
|
|
|
19
11
|
// Em Angular, checar projeção é não trivial sem ViewChild/ContentChild; simplificado:
|
|
20
12
|
return !!this.label && this.label.trim().length > 0 ? false : true;
|
|
21
13
|
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
__metadata("design:type", String)
|
|
26
|
-
], FyNavLinkComponent.prototype, "label", void 0);
|
|
27
|
-
__decorate([
|
|
28
|
-
Input(),
|
|
29
|
-
__metadata("design:type", String)
|
|
30
|
-
], FyNavLinkComponent.prototype, "to", void 0);
|
|
31
|
-
__decorate([
|
|
32
|
-
Input(),
|
|
33
|
-
__metadata("design:type", String)
|
|
34
|
-
], FyNavLinkComponent.prototype, "href", void 0);
|
|
35
|
-
__decorate([
|
|
36
|
-
Input(),
|
|
37
|
-
__metadata("design:type", String)
|
|
38
|
-
], FyNavLinkComponent.prototype, "target", void 0);
|
|
39
|
-
__decorate([
|
|
40
|
-
Input(),
|
|
41
|
-
__metadata("design:type", Boolean)
|
|
42
|
-
], FyNavLinkComponent.prototype, "active", void 0);
|
|
43
|
-
__decorate([
|
|
44
|
-
Input(),
|
|
45
|
-
__metadata("design:type", Boolean)
|
|
46
|
-
], FyNavLinkComponent.prototype, "hoverEnabled", void 0);
|
|
47
|
-
__decorate([
|
|
48
|
-
Input(),
|
|
49
|
-
__metadata("design:type", String)
|
|
50
|
-
], FyNavLinkComponent.prototype, "iconName", void 0);
|
|
51
|
-
__decorate([
|
|
52
|
-
Input(),
|
|
53
|
-
__metadata("design:type", String)
|
|
54
|
-
], FyNavLinkComponent.prototype, "iconSet", void 0);
|
|
55
|
-
FyNavLinkComponent = __decorate([
|
|
56
|
-
Component({
|
|
57
|
-
selector: 'fy-nav-link',
|
|
58
|
-
standalone: true,
|
|
59
|
-
imports: [CommonModule, FyIconComponent],
|
|
60
|
-
template: `
|
|
14
|
+
}
|
|
15
|
+
FyNavLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyNavLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
+
FyNavLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FyNavLinkComponent, isStandalone: true, selector: "fy-nav-link", inputs: { label: "label", to: "to", href: "href", target: "target", active: "active", hoverEnabled: "hoverEnabled", iconName: "iconName", iconSet: "iconSet" }, ngImport: i0, template: `
|
|
61
17
|
<a
|
|
62
18
|
[attr.href]="href || to || null"
|
|
63
19
|
[attr.target]="target || null"
|
|
@@ -75,47 +31,42 @@ FyNavLinkComponent = __decorate([
|
|
|
75
31
|
<span>{{ label }}</span>
|
|
76
32
|
}
|
|
77
33
|
</a>
|
|
78
|
-
`,
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
}
|
|
94
|
-
.fy-nav-link:hover:not(.fy-nav-link--hover-disabled) {
|
|
95
|
-
background-color: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.08);
|
|
96
|
-
color: var(--fy-colors-primary);
|
|
97
|
-
}
|
|
98
|
-
.fy-nav-link.active {
|
|
99
|
-
background-color: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.12);
|
|
100
|
-
color: var(--fy-colors-primary);
|
|
101
|
-
font-weight: var(--fy-typography-fontWeight-bold);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
/* Dentro do header, os links devem se comportar como itens de navegação horizontal */
|
|
105
|
-
.fy-slot--header .fy-nav-link {
|
|
106
|
-
display: inline-flex;
|
|
107
|
-
align-items: center;
|
|
108
|
-
justify-content: center;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
@media (max-width: 768px) {
|
|
112
|
-
.fy-slot--header .fy-nav-link {
|
|
113
|
-
display: inline-flex;
|
|
114
|
-
justify-content: flex-start;
|
|
34
|
+
`, isInline: true, styles: ["\n .fy-nav-link {\n display: inline-flex;\n align-items: center;\n gap: var(--fy-spacing-sm, 8px);\n padding: var(--fy-spacing-sm) var(--fy-spacing-md);\n border-radius: var(--fy-borderRadius-sm);\n color: var(--fy-colors-text);\n text-decoration: none;\n transition: background-color 0.15s ease, color 0.15s ease;\n }\n .fy-nav-link__icon {\n flex: 0 0 auto;\n opacity: .95;\n }\n .fy-nav-link:hover:not(.fy-nav-link--hover-disabled) {\n background-color: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.08);\n color: var(--fy-colors-primary);\n }\n .fy-nav-link.active {\n background-color: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.12);\n color: var(--fy-colors-primary);\n font-weight: var(--fy-typography-fontWeight-bold);\n }\n\n /* Dentro do header, os links devem se comportar como itens de navega\u00E7\u00E3o horizontal */\n .fy-slot--header .fy-nav-link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n @media (max-width: 768px) {\n .fy-slot--header .fy-nav-link {\n display: inline-flex;\n justify-content: flex-start;\n }\n }\n "], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FyIconComponent, selector: "fy-icon", inputs: ["name", "size", "color", "strokeWidth", "variant", "set"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
35
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FyNavLinkComponent, decorators: [{
|
|
36
|
+
type: Component,
|
|
37
|
+
args: [{ selector: 'fy-nav-link', standalone: true, imports: [CommonModule, FyIconComponent], template: `
|
|
38
|
+
<a
|
|
39
|
+
[attr.href]="href || to || null"
|
|
40
|
+
[attr.target]="target || null"
|
|
41
|
+
rel="noopener noreferrer"
|
|
42
|
+
class="fy-nav-link"
|
|
43
|
+
[class.active]="active"
|
|
44
|
+
[class.fy-nav-link--hover-disabled]="!hoverEnabled"
|
|
45
|
+
|
|
46
|
+
>
|
|
47
|
+
@if (iconName) {
|
|
48
|
+
<fy-icon [name]="iconName" [set]="iconSet" class="fy-nav-link__icon"></fy-icon>
|
|
115
49
|
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
50
|
+
<ng-content></ng-content>
|
|
51
|
+
@if (!hasProjectedContent) {
|
|
52
|
+
<span>{{ label }}</span>
|
|
53
|
+
}
|
|
54
|
+
</a>
|
|
55
|
+
`, encapsulation: ViewEncapsulation.None, styles: ["\n .fy-nav-link {\n display: inline-flex;\n align-items: center;\n gap: var(--fy-spacing-sm, 8px);\n padding: var(--fy-spacing-sm) var(--fy-spacing-md);\n border-radius: var(--fy-borderRadius-sm);\n color: var(--fy-colors-text);\n text-decoration: none;\n transition: background-color 0.15s ease, color 0.15s ease;\n }\n .fy-nav-link__icon {\n flex: 0 0 auto;\n opacity: .95;\n }\n .fy-nav-link:hover:not(.fy-nav-link--hover-disabled) {\n background-color: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.08);\n color: var(--fy-colors-primary);\n }\n .fy-nav-link.active {\n background-color: rgba(var(--fy-colors-primary-rgb, 59,130,246), 0.12);\n color: var(--fy-colors-primary);\n font-weight: var(--fy-typography-fontWeight-bold);\n }\n\n /* Dentro do header, os links devem se comportar como itens de navega\u00E7\u00E3o horizontal */\n .fy-slot--header .fy-nav-link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n @media (max-width: 768px) {\n .fy-slot--header .fy-nav-link {\n display: inline-flex;\n justify-content: flex-start;\n }\n }\n "] }]
|
|
56
|
+
}], propDecorators: { label: [{
|
|
57
|
+
type: Input
|
|
58
|
+
}], to: [{
|
|
59
|
+
type: Input
|
|
60
|
+
}], href: [{
|
|
61
|
+
type: Input
|
|
62
|
+
}], target: [{
|
|
63
|
+
type: Input
|
|
64
|
+
}], active: [{
|
|
65
|
+
type: Input
|
|
66
|
+
}], hoverEnabled: [{
|
|
67
|
+
type: Input
|
|
68
|
+
}], iconName: [{
|
|
69
|
+
type: Input
|
|
70
|
+
}], iconSet: [{
|
|
71
|
+
type: Input
|
|
72
|
+
}] } });
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { EventEmitter } from '@angular/core';
|
|
2
2
|
import { NotificationMenuProps, NotificationItem } from '@fylib/catalog';
|
|
3
3
|
import { BaseFyComponent } from '../base/base-component';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
4
5
|
export declare class FyNotificationMenuComponent extends BaseFyComponent<'fy-notification-menu'> implements NotificationMenuProps {
|
|
5
6
|
private notify;
|
|
6
7
|
_notifications: import("@angular/core").WritableSignal<NotificationItem[]>;
|
|
@@ -65,4 +66,6 @@ export declare class FyNotificationMenuComponent extends BaseFyComponent<'fy-not
|
|
|
65
66
|
private markAllAsRead;
|
|
66
67
|
private sendReadToBackend;
|
|
67
68
|
get animationClassSuffix(): string;
|
|
69
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<FyNotificationMenuComponent, never>;
|
|
70
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<FyNotificationMenuComponent, "fy-notification-menu", never, { "notifications": { "alias": "notifications"; "required": false; }; "unreadCount": { "alias": "unreadCount"; "required": false; }; "showAllNotifications": { "alias": "showAllNotifications"; "required": false; }; "maxNotifications": { "alias": "maxNotifications"; "required": false; }; "enableClearAll": { "alias": "enableClearAll"; "required": false; }; "enableAccordion": { "alias": "enableAccordion"; "required": false; }; "showViewAll": { "alias": "showViewAll"; "required": false; }; "viewAllPosition": { "alias": "viewAllPosition"; "required": false; }; "markAllAsReadOnOpen": { "alias": "markAllAsReadOnOpen"; "required": false; }; "markAsReadOnClick": { "alias": "markAsReadOnClick"; "required": false; }; "readApiEndpoint": { "alias": "readApiEndpoint"; "required": false; }; "readApiMethod": { "alias": "readApiMethod"; "required": false; }; "readApiHeaders": { "alias": "readApiHeaders"; "required": false; }; "onRead": { "alias": "onRead"; "required": false; }; "onReadAll": { "alias": "onReadAll"; "required": false; }; "activeAnimations": { "alias": "activeAnimations"; "required": false; }; "activeEffects": { "alias": "activeEffects"; "required": false; }; "customStyles": { "alias": "customStyles"; "required": false; }; }, { "fyOpen": "fyOpen"; "fyClearAll": "fyClearAll"; "fyViewAll": "fyViewAll"; "fyNotificationClick": "fyNotificationClick"; }, never, never, true, never>;
|
|
68
71
|
}
|