@seniorsistemas/platform-components 7.0.1 → 7.1.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/esm2022/modules/advanced-filter/components/advanced-filter/advanced-filter.component.mjs +31 -8
- package/esm2022/modules/advanced-filter/components/form-filter/form-filter.component.mjs +7 -5
- package/esm2022/modules/advanced-filter/locale/fallback.mjs +5 -2
- package/esm2022/modules/advanced-filter/services/advanced-filter.service.mjs +49 -38
- package/esm2022/modules/spotlight/component/spotlight.component.mjs +27 -8
- package/esm2022/modules/spotlight/spotlight.module.mjs +7 -3
- package/fesm2022/seniorsistemas-platform-components.mjs +118 -56
- package/fesm2022/seniorsistemas-platform-components.mjs.map +1 -1
- package/modules/advanced-filter/components/advanced-filter/advanced-filter.component.d.ts +4 -1
- package/modules/advanced-filter/locale/fallback.d.ts +3 -0
- package/modules/advanced-filter/services/advanced-filter.service.d.ts +2 -0
- package/modules/spotlight/component/spotlight.component.d.ts +5 -1
- package/modules/spotlight/spotlight.module.d.ts +7 -6
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Pipe, inject, InjectionToken, APP_INITIALIZER, Injector, NgModule, Injectable, ChangeDetectorRef, EventEmitter, Component, Input, Output, HostListener, ViewEncapsulation, ViewChild } from '@angular/core';
|
|
3
|
-
import * as
|
|
2
|
+
import { Pipe, inject, InjectionToken, APP_INITIALIZER, Injector, NgModule, Injectable, ChangeDetectorRef, EventEmitter, Component, Input, Output, HostListener, ElementRef, ViewEncapsulation, ViewChild } from '@angular/core';
|
|
3
|
+
import * as i4 from '@angular/common';
|
|
4
4
|
import { LOCATION_INITIALIZED, CommonModule, DatePipe } from '@angular/common';
|
|
5
5
|
import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
6
|
-
import * as
|
|
6
|
+
import * as i2$2 from 'primeng/button';
|
|
7
7
|
import { ButtonModule as ButtonModule$1 } from 'primeng/button';
|
|
8
8
|
import * as i1$2 from 'primeng/dialog';
|
|
9
9
|
import { DialogModule } from 'primeng/dialog';
|
|
@@ -11,7 +11,7 @@ import * as i1$1 from 'primeng/tabview';
|
|
|
11
11
|
import { TabViewModule } from 'primeng/tabview';
|
|
12
12
|
import * as i5 from 'primeng/toast';
|
|
13
13
|
import { ToastModule } from 'primeng/toast';
|
|
14
|
-
import * as
|
|
14
|
+
import * as i3$2 from 'primeng/tooltip';
|
|
15
15
|
import { TooltipModule } from 'primeng/tooltip';
|
|
16
16
|
import * as i2$1 from 'primeng/api';
|
|
17
17
|
import { MessageService } from 'primeng/api';
|
|
@@ -34,6 +34,8 @@ import { ToastService } from '@seniorsistemas/angular-components/toast';
|
|
|
34
34
|
import { contains, equals, clone } from 'ramda';
|
|
35
35
|
import * as momentNs from 'moment';
|
|
36
36
|
import * as jc from 'json-cycle';
|
|
37
|
+
import * as i1$3 from '@angular/cdk/a11y';
|
|
38
|
+
import { A11yModule } from '@angular/cdk/a11y';
|
|
37
39
|
|
|
38
40
|
class MapValuesPipe {
|
|
39
41
|
transform(map, args = null) {
|
|
@@ -317,7 +319,10 @@ const fallback$1 = {
|
|
|
317
319
|
'platform.filter_service.short_saturday': 'Sab',
|
|
318
320
|
'platform.filter_service.yes': 'Sim',
|
|
319
321
|
'platform.filter_service.no': 'Não',
|
|
320
|
-
'platform.filter_service.search_empty_message': 'Nenhum resultado encontrado'
|
|
322
|
+
'platform.filter_service.search_empty_message': 'Nenhum resultado encontrado',
|
|
323
|
+
'platform.filter_service.active_filters': 'filtros ativos',
|
|
324
|
+
'platform.filter_service.aria_close_filters': 'Fechar filtros',
|
|
325
|
+
'platform.filter_service.aria_close_dialog': 'Fechar diálogo de filtros'
|
|
321
326
|
};
|
|
322
327
|
|
|
323
328
|
const URL_PREFIX = 'platform/filter_service';
|
|
@@ -342,21 +347,21 @@ class AdvancedFilterService {
|
|
|
342
347
|
filtersObserver = this.filtersObservable.asObservable();
|
|
343
348
|
ticketFilterObserver = this.ticketFilterObservable.asObservable();
|
|
344
349
|
constructor() {
|
|
345
|
-
this.contextsObservable.subscribe(contexts => contexts.length && this.getAndApplyFilters(contexts));
|
|
350
|
+
this.contextsObservable.subscribe((contexts) => contexts.length && this.getAndApplyFilters(contexts));
|
|
346
351
|
}
|
|
347
352
|
saveTickedFilters(filters) {
|
|
348
353
|
const requestBody = this.ticketFilter ? { filters, ticketFilter: this.ticketFilter } : { filters };
|
|
349
354
|
this.http
|
|
350
355
|
.post(SAVE_TICKED_FILTER_URL, requestBody)
|
|
351
|
-
.pipe(map(response => response.ticket))
|
|
356
|
+
.pipe(map((response) => response.ticket))
|
|
352
357
|
.subscribe({
|
|
353
|
-
next: ticketFilter => {
|
|
358
|
+
next: (ticketFilter) => {
|
|
354
359
|
this.ticketFilter = ticketFilter;
|
|
355
360
|
this.ticketFilterObservable.next({ ticketFilter });
|
|
356
361
|
// NOSONAR
|
|
357
362
|
window.parent.postMessage({ message: 'advanced-filter:success', payload: ticketFilter }, this.allowedOrigin);
|
|
358
363
|
},
|
|
359
|
-
error: err => {
|
|
364
|
+
error: (err) => {
|
|
360
365
|
this.ticketFilterObservable.next({ error: true, message: err });
|
|
361
366
|
// NOSONAR
|
|
362
367
|
window.parent.postMessage({ message: 'advanced-filter:error', payload: err }, this.allowedOrigin);
|
|
@@ -370,7 +375,7 @@ class AdvancedFilterService {
|
|
|
370
375
|
}
|
|
371
376
|
removeContexts(contexts) {
|
|
372
377
|
const allContexts = this.contextsObservable.getValue();
|
|
373
|
-
const filteredContexts = allContexts.filter(context => contexts.indexOf(context) === -1);
|
|
378
|
+
const filteredContexts = allContexts.filter((context) => contexts.indexOf(context) === -1);
|
|
374
379
|
this.contextsObservable.next(filteredContexts);
|
|
375
380
|
}
|
|
376
381
|
saveFilters(filters) {
|
|
@@ -392,35 +397,16 @@ class AdvancedFilterService {
|
|
|
392
397
|
getFilters(serviceContexts, applyFilter) {
|
|
393
398
|
this.http
|
|
394
399
|
.post(GET_FILTERS_URL, { serviceContexts })
|
|
395
|
-
.pipe(map(response => this.mapFilters(response.filters)))
|
|
396
|
-
.subscribe(filters => this.filtersObservable.next({ filters, applyFilter }), //
|
|
397
|
-
|
|
398
|
-
err => this.filtersObservable.next({ error: true, message: err }));
|
|
400
|
+
.pipe(map((response) => this.mapFilters(response.filters)))
|
|
401
|
+
.subscribe((filters) => this.filtersObservable.next({ filters, applyFilter }), //
|
|
402
|
+
(err) => this.filtersObservable.next({ error: true, message: err }));
|
|
399
403
|
}
|
|
400
404
|
mapFilters(filters) {
|
|
401
|
-
return filters.map(filter => {
|
|
405
|
+
return filters.map((filter) => {
|
|
402
406
|
try {
|
|
403
407
|
const value = filter.value && JSON.parse(filter.value);
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
}
|
|
407
|
-
else if (value && filter.search && filter.search.entitySearch && filter.search.entitySearch.output) {
|
|
408
|
-
this.mapValues(value, filter.search.entitySearch.output.keyFields, filter.search.entitySearch.output.displayFields);
|
|
409
|
-
}
|
|
410
|
-
if (value) {
|
|
411
|
-
if (this.isMultiple(filter)) {
|
|
412
|
-
const valueInText = JSON.stringify(value);
|
|
413
|
-
if ((valueInText.startsWith('[{') && valueInText.endsWith('}]')) || valueInText.length <= 4) {
|
|
414
|
-
filter.value = valueInText;
|
|
415
|
-
}
|
|
416
|
-
else {
|
|
417
|
-
filter.value = JSON.stringify('');
|
|
418
|
-
}
|
|
419
|
-
}
|
|
420
|
-
else {
|
|
421
|
-
filter.value = JSON.stringify(value);
|
|
422
|
-
}
|
|
423
|
-
}
|
|
408
|
+
this.applySearchMapping(filter, value);
|
|
409
|
+
this.assignFilterValue(filter, value);
|
|
424
410
|
}
|
|
425
411
|
catch (ex) {
|
|
426
412
|
console.error(`Global: filter ${filter.name} has value error. `, ex);
|
|
@@ -429,15 +415,45 @@ class AdvancedFilterService {
|
|
|
429
415
|
return filter;
|
|
430
416
|
});
|
|
431
417
|
}
|
|
418
|
+
applySearchMapping(filter, value) {
|
|
419
|
+
const basicOutput = filter.search?.basicSearch?.output;
|
|
420
|
+
if (value && basicOutput) {
|
|
421
|
+
this.mapValues(value, basicOutput.keyFields, basicOutput.displayFields);
|
|
422
|
+
return;
|
|
423
|
+
}
|
|
424
|
+
const entityOutput = filter.search?.entitySearch?.output;
|
|
425
|
+
if (value && entityOutput) {
|
|
426
|
+
this.mapValues(value, entityOutput.keyFields, entityOutput.displayFields);
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
assignFilterValue(filter, value) {
|
|
430
|
+
if (!value) {
|
|
431
|
+
return;
|
|
432
|
+
}
|
|
433
|
+
if (this.isMultiple(filter)) {
|
|
434
|
+
const valueInText = JSON.stringify(value);
|
|
435
|
+
if ((valueInText.startsWith('[{') && valueInText.endsWith('}]')) || valueInText.length <= 4) {
|
|
436
|
+
filter.value = valueInText;
|
|
437
|
+
}
|
|
438
|
+
else {
|
|
439
|
+
filter.value = JSON.stringify('');
|
|
440
|
+
}
|
|
441
|
+
}
|
|
442
|
+
else {
|
|
443
|
+
filter.value = JSON.stringify(value);
|
|
444
|
+
}
|
|
445
|
+
}
|
|
432
446
|
isMultiple(filter) {
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
447
|
+
if (filter.type !== 'SEARCH' || !filter.search) {
|
|
448
|
+
return false;
|
|
449
|
+
}
|
|
450
|
+
const basicMax = filter.search.basicSearch?.output?.maxSelectedItems ?? 0;
|
|
451
|
+
const entityMax = filter.search.entitySearch?.output?.maxSelectedItems ?? 0;
|
|
452
|
+
return basicMax > 1 || entityMax > 1;
|
|
437
453
|
}
|
|
438
454
|
mapValues(value, keyFields, displayFields) {
|
|
439
455
|
if (Array.isArray(value)) {
|
|
440
|
-
value.forEach(e => {
|
|
456
|
+
value.forEach((e) => {
|
|
441
457
|
this.mapValue(e, keyFields, displayFields);
|
|
442
458
|
});
|
|
443
459
|
}
|
|
@@ -451,8 +467,8 @@ class AdvancedFilterService {
|
|
|
451
467
|
}
|
|
452
468
|
const ids = [];
|
|
453
469
|
const displays = [];
|
|
454
|
-
keyFields.filter(e => value[e] !== undefined).forEach(e => ids.push(value[e]));
|
|
455
|
-
displayFields.filter(e => value[e] !== undefined).forEach(e => displays.push(value[e]));
|
|
470
|
+
keyFields.filter((e) => value[e] !== undefined).forEach((e) => ids.push(value[e]));
|
|
471
|
+
displayFields.filter((e) => value[e] !== undefined).forEach((e) => displays.push(value[e]));
|
|
456
472
|
if (ids.length > 0 && displays.length > 0) {
|
|
457
473
|
value[searchKeyName] = ids.join(', ');
|
|
458
474
|
value[searchDisplayName] = displays.join(', ');
|
|
@@ -1033,8 +1049,10 @@ class FormFilterComponent {
|
|
|
1033
1049
|
return totalFiltersActive;
|
|
1034
1050
|
}
|
|
1035
1051
|
parseToUserFilters(filters) {
|
|
1036
|
-
|
|
1037
|
-
|
|
1052
|
+
const filtersAsObject = filters;
|
|
1053
|
+
const ids = Object.keys(filtersAsObject);
|
|
1054
|
+
return ids.reduce((all, filterId) => {
|
|
1055
|
+
const { type, services, name, value, domain, contexts } = filtersAsObject[filterId];
|
|
1038
1056
|
const filterValue = toUserFormat(value, type);
|
|
1039
1057
|
const values = services.map(service => ({ name, service, value: filterValue, domain, contexts }));
|
|
1040
1058
|
return [...all, ...values];
|
|
@@ -1471,11 +1489,11 @@ class FormFilterComponent {
|
|
|
1471
1489
|
return { currencySymbol: '', decimalSeparator: '', thousandsSeparator: '' };
|
|
1472
1490
|
}
|
|
1473
1491
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1474
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FormFilterComponent, selector: "s-app-form-filter", inputs: { showMessages: "showMessages", contextId: "contextId" }, outputs: { totalFiltersActiveOutput: "totalFiltersActiveOutput", errorOutput: "errorOutput", showDialogOutput: "showDialogOutput", closeModalOutput: "closeModalOutput" }, host: { listeners: { "window:resize": "onResizeWindow($event)" } }, ngImport: i0, template: "@if(error) {\n <s-empty-state\n
|
|
1492
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FormFilterComponent, selector: "s-app-form-filter", inputs: { showMessages: "showMessages", contextId: "contextId" }, outputs: { totalFiltersActiveOutput: "totalFiltersActiveOutput", errorOutput: "errorOutput", showDialogOutput: "showDialogOutput", closeModalOutput: "closeModalOutput" }, host: { listeners: { "window:resize": "onResizeWindow($event)" } }, ngImport: i0, template: "@if (error) {\n <div role=\"alert\" aria-live=\"assertive\">\n <s-empty-state\n iconClass=\"fa fa-exclamation-triangle\"\n [title]=\"errorState?.status + ' - ' + errorState?.statusText\"\n (primaryAction)=\"errorStateAction()\"\n [primaryActionLabel]=\"translate.instant('platform.filter_service.try')\"\n [description]=\"translate.instant('platform.filter_service.error_state')\"\n ></s-empty-state>\n </div>\n} @else {\n @if (tabs && tabs.size > 1) {\n <p-tabView [(activeIndex)]=\"activeIndex\">\n @if (general.configs.length) {\n <p-tabPanel [header]=\"general.name\">\n <s-dynamic-form [errorMessages]=\"errorMessages\" [configs]=\"general.configs\" [form]=\"general.form\" />\n </p-tabPanel>\n }\n\n @for (tab of tabs | mapValues; track $index) {\n <p-tabPanel [header]=\"tab.label\">\n <s-dynamic-form [errorMessages]=\"errorMessages\" [configs]=\"tab.configs\" [form]=\"tab.form\" />\n </p-tabPanel>\n }\n </p-tabView>\n }\n\n @if (tabs && tabs.size === 1) {\n @for (tab of tabs | mapValues; track $index) {\n <s-dynamic-form [errorMessages]=\"errorMessages\" [configs]=\"tab.configs\" [form]=\"tab.form\" />\n }\n }\n}\n", styles: [".filter-dialog{width:800px;top:100px}.filter-dialog>.ui-dialog-content{height:300px;padding:10px!important}@media (min-width: 641px) and (max-width: 1024px){.filter-dialog{width:75%}.filter-dialog>.ui-dialog-content{height:300px}}@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait){.filter-dialog{width:75%}.filter-dialog>.ui-dialog-content{height:90%}}@media (min-width: 320px) and (max-width: 640px){.filter-dialog{width:95%;left:0;top:0;opacity:1;margin:auto;height:93%}.filter-dialog>.ui-dialog-content{height:85%}}@media (min-width: 320px) and (max-width: 640px) and (max-width: 360px){.filter-dialog button{padding:0!important}.filter-dialog>.ui-dialog-content{height:81%}}\n"], dependencies: [{ kind: "component", type: i1$1.TabView, selector: "p-tabView, p-tabview", inputs: ["style", "styleClass", "controlClose", "scrollable", "activeIndex", "selectOnFocus", "nextButtonAriaLabel", "prevButtonAriaLabel", "autoHideButtons", "tabindex"], outputs: ["onChange", "onClose", "activeIndexChange"] }, { kind: "component", type: i1$1.TabPanel, selector: "p-tabPanel, p-tabpanel", inputs: ["closable", "headerStyle", "headerStyleClass", "cache", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "selected", "disabled", "header", "leftIcon", "rightIcon"] }, { kind: "component", type: i2.DynamicFormComponent, selector: "s-dynamic-form", inputs: ["id", "configs", "fields", "form", "errorMessages"] }, { kind: "component", type: i3.EmptyStateComponent, selector: "s-empty-state", inputs: ["id", "title", "iconClass", "description", "showPrimaryAction", "showSecondaryAction", "primaryActionLabel", "secondaryActionLabel", "primaryModel"], outputs: ["primaryAction", "secondaryAction"] }, { kind: "pipe", type: MapValuesPipe, name: "mapValues" }] });
|
|
1475
1493
|
}
|
|
1476
1494
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFilterComponent, decorators: [{
|
|
1477
1495
|
type: Component,
|
|
1478
|
-
args: [{ selector: 's-app-form-filter', template: "@if(error) {\n <s-empty-state\n
|
|
1496
|
+
args: [{ selector: 's-app-form-filter', template: "@if (error) {\n <div role=\"alert\" aria-live=\"assertive\">\n <s-empty-state\n iconClass=\"fa fa-exclamation-triangle\"\n [title]=\"errorState?.status + ' - ' + errorState?.statusText\"\n (primaryAction)=\"errorStateAction()\"\n [primaryActionLabel]=\"translate.instant('platform.filter_service.try')\"\n [description]=\"translate.instant('platform.filter_service.error_state')\"\n ></s-empty-state>\n </div>\n} @else {\n @if (tabs && tabs.size > 1) {\n <p-tabView [(activeIndex)]=\"activeIndex\">\n @if (general.configs.length) {\n <p-tabPanel [header]=\"general.name\">\n <s-dynamic-form [errorMessages]=\"errorMessages\" [configs]=\"general.configs\" [form]=\"general.form\" />\n </p-tabPanel>\n }\n\n @for (tab of tabs | mapValues; track $index) {\n <p-tabPanel [header]=\"tab.label\">\n <s-dynamic-form [errorMessages]=\"errorMessages\" [configs]=\"tab.configs\" [form]=\"tab.form\" />\n </p-tabPanel>\n }\n </p-tabView>\n }\n\n @if (tabs && tabs.size === 1) {\n @for (tab of tabs | mapValues; track $index) {\n <s-dynamic-form [errorMessages]=\"errorMessages\" [configs]=\"tab.configs\" [form]=\"tab.form\" />\n }\n }\n}\n", styles: [".filter-dialog{width:800px;top:100px}.filter-dialog>.ui-dialog-content{height:300px;padding:10px!important}@media (min-width: 641px) and (max-width: 1024px){.filter-dialog{width:75%}.filter-dialog>.ui-dialog-content{height:300px}}@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait){.filter-dialog{width:75%}.filter-dialog>.ui-dialog-content{height:90%}}@media (min-width: 320px) and (max-width: 640px){.filter-dialog{width:95%;left:0;top:0;opacity:1;margin:auto;height:93%}.filter-dialog>.ui-dialog-content{height:85%}}@media (min-width: 320px) and (max-width: 640px) and (max-width: 360px){.filter-dialog button{padding:0!important}.filter-dialog>.ui-dialog-content{height:81%}}\n"] }]
|
|
1479
1497
|
}], propDecorators: { showMessages: [{
|
|
1480
1498
|
type: Input
|
|
1481
1499
|
}], contextId: [{
|
|
@@ -1512,6 +1530,7 @@ class AdvancedFilterComponent {
|
|
|
1512
1530
|
error = false;
|
|
1513
1531
|
currentTicket = '';
|
|
1514
1532
|
modalComponent;
|
|
1533
|
+
filterButtonRef;
|
|
1515
1534
|
mobileButtonActions = [
|
|
1516
1535
|
{ id: 'save', label: this.translate.instant('save'), command: () => this.modalComponent.saveFilters() },
|
|
1517
1536
|
{ id: 'clear', label: this.translate.instant('clear'), command: () => this.modalComponent.clearFilters() }
|
|
@@ -1519,7 +1538,7 @@ class AdvancedFilterComponent {
|
|
|
1519
1538
|
ngOnInit() {
|
|
1520
1539
|
this.isMobile = innerWidth <= 640;
|
|
1521
1540
|
this.tabViewOrientation = this.isMobile ? 'top' : 'left';
|
|
1522
|
-
const sub = this.router.events.subscribe(e => {
|
|
1541
|
+
const sub = this.router.events.subscribe((e) => {
|
|
1523
1542
|
if (e instanceof NavigationEnd) {
|
|
1524
1543
|
this.modalComponent.getFilters();
|
|
1525
1544
|
}
|
|
@@ -1527,7 +1546,7 @@ class AdvancedFilterComponent {
|
|
|
1527
1546
|
this.subscriptions.push(sub);
|
|
1528
1547
|
}
|
|
1529
1548
|
ngOnDestroy() {
|
|
1530
|
-
this.subscriptions.forEach(v => v.unsubscribe());
|
|
1549
|
+
this.subscriptions.forEach((v) => v.unsubscribe());
|
|
1531
1550
|
}
|
|
1532
1551
|
onResizeWindow(event) {
|
|
1533
1552
|
const { innerWidth } = event.target;
|
|
@@ -1536,8 +1555,12 @@ class AdvancedFilterComponent {
|
|
|
1536
1555
|
}
|
|
1537
1556
|
get appliedFiltersTooltip() {
|
|
1538
1557
|
return this.totalFiltersActive > 1
|
|
1539
|
-
? this.translate.instant(`${TRANSLATE_PREFIX}.applied_filters_message`, {
|
|
1540
|
-
|
|
1558
|
+
? this.translate.instant(`${TRANSLATE_PREFIX}.applied_filters_message`, {
|
|
1559
|
+
totalActiveFilters: this.totalFiltersActive
|
|
1560
|
+
})
|
|
1561
|
+
: this.translate.instant(`${TRANSLATE_PREFIX}.applied_filter_message`, {
|
|
1562
|
+
totalActiveFilters: this.totalFiltersActive
|
|
1563
|
+
});
|
|
1541
1564
|
}
|
|
1542
1565
|
onError(event) {
|
|
1543
1566
|
this.error = event;
|
|
@@ -1578,15 +1601,30 @@ class AdvancedFilterComponent {
|
|
|
1578
1601
|
toggleDialog() {
|
|
1579
1602
|
this.showDialog = !this.showDialog;
|
|
1580
1603
|
}
|
|
1604
|
+
onDialogHide() {
|
|
1605
|
+
this.showDialog = false;
|
|
1606
|
+
this.close();
|
|
1607
|
+
this.filterButtonRef?.nativeElement?.querySelector('button')?.focus();
|
|
1608
|
+
}
|
|
1609
|
+
focusFirstField() {
|
|
1610
|
+
setTimeout(() => {
|
|
1611
|
+
const dialog = document.querySelector('.filter-dialog');
|
|
1612
|
+
if (!dialog) {
|
|
1613
|
+
return;
|
|
1614
|
+
}
|
|
1615
|
+
const firstField = dialog.querySelector('input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])');
|
|
1616
|
+
firstField?.focus();
|
|
1617
|
+
});
|
|
1618
|
+
}
|
|
1581
1619
|
updateTotalFiltersActive(event) {
|
|
1582
1620
|
this.totalFiltersActive = event;
|
|
1583
1621
|
}
|
|
1584
1622
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdvancedFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1585
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AdvancedFilterComponent, selector: "s-advanced-filter", inputs: { labelButton: "labelButton", onlyContent: "onlyContent", hideButtons: "hideButtons", canOpenFilter: "canOpenFilter", showActiveFiltersCountBadge: "showActiveFiltersCountBadge", filterAndSave: "filterAndSave", contextId: "contextId" }, host: { listeners: { "window:resize": "onResizeWindow($event)" } }, viewQueries: [{ propertyName: "modalComponent", first: true, predicate: FormFilterComponent, descendants: true }], ngImport: i0, template: "<s-button\n *ngIf=\"!onlyContent\"\n [id]=\"'filterButton'\"\n [disabled]=\"!canOpenFilter\"\n (clicked)=\"canOpenFilter ? toggleDialog() : ''\"\n iconClass=\"fa fa-filter\"\n priority=\"default\"\n [label]=\"labelButton\"\n [auxiliary]=\"true\"\n [tooltip]=\"appliedFiltersTooltip\"\n>\n <span\n *ngIf=\"totalFiltersActive && showActiveFiltersCountBadge\"\n
|
|
1623
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AdvancedFilterComponent, selector: "s-advanced-filter", inputs: { labelButton: "labelButton", onlyContent: "onlyContent", hideButtons: "hideButtons", canOpenFilter: "canOpenFilter", showActiveFiltersCountBadge: "showActiveFiltersCountBadge", filterAndSave: "filterAndSave", contextId: "contextId" }, host: { listeners: { "window:resize": "onResizeWindow($event)" } }, viewQueries: [{ propertyName: "modalComponent", first: true, predicate: FormFilterComponent, descendants: true }, { propertyName: "filterButtonRef", first: true, predicate: ["filterButtonRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<s-button\n #filterButtonRef\n *ngIf=\"!onlyContent\"\n [id]=\"'filterButton'\"\n [disabled]=\"!canOpenFilter\"\n (clicked)=\"canOpenFilter ? toggleDialog() : ''\"\n iconClass=\"fa fa-filter\"\n priority=\"default\"\n [label]=\"labelButton\"\n [auxiliary]=\"true\"\n [tooltip]=\"appliedFiltersTooltip\"\n>\n <span aria-live=\"polite\">\n <span\n *ngIf=\"totalFiltersActive && showActiveFiltersCountBadge\"\n class=\"sds-badge-number sds-color-primary custom-badge\"\n >{{ totalFiltersActive }}</span\n >\n <span class=\"sr-only\" *ngIf=\"totalFiltersActive && showActiveFiltersCountBadge\">\n {{ totalFiltersActive }} {{ 'platform.filter_service.active_filters' | translate }}\n </span>\n </span>\n</s-button>\n\n<section *ngIf=\"onlyContent\">\n <div class=\"only-content-wrapper\">\n <div class=\"header\">\n <h3 id=\"filter-heading\">{{ 'platform.filter_service.filters' | translate }}</h3>\n <button\n type=\"button\"\n (click)=\"close()\"\n class=\"close_btn\"\n [attr.aria-label]=\"'platform.filter_service.aria_close_filters' | translate\"\n >\n <span class=\"fa fa-times\" aria-hidden=\"true\"></span>\n </button>\n </div>\n <div class=\"app-form-filter\">\n <s-app-form-filter\n [showMessages]=\"false\"\n (totalFiltersActiveOutput)=\"updateTotalFiltersActive($event)\"\n (closeModalOutput)=\"close()\"\n [contextId]=\"contextId\"\n ></s-app-form-filter>\n </div>\n <div class=\"filter-footer\" *ngIf=\"!error\">\n <s-button\n priority=\"link\"\n [label]=\"translate.instant('platform.filter_service.cancel')\"\n (clicked)=\"close()\"\n ></s-button>\n <s-button\n *ngIf=\"isMobile\"\n priority=\"default\"\n [label]=\"translate.instant('platform.filter_service.actions')\"\n [auxiliary]=\"true\"\n [menuOptions]=\"mobileButtonActions\"\n ></s-button>\n <ng-container *ngIf=\"!isMobile\">\n <s-button\n priority=\"secondary\"\n [label]=\"translate.instant('platform.filter_service.clear')\"\n (clicked)=\"clearFilters()\"\n ></s-button>\n <s-button\n priority=\"secondary\"\n [label]=\"translate.instant('platform.filter_service.save')\"\n (clicked)=\"saveFilters()\"\n ></s-button>\n </ng-container>\n <s-button\n type=\"submit\"\n priority=\"primary\"\n [label]=\"translate.instant('platform.filter_service.filter')\"\n (clicked)=\"onApplyFilters()\"\n ></s-button>\n </div>\n </div>\n</section>\n\n<p-dialog\n *ngIf=\"!onlyContent\"\n appendTo=\"body\"\n styleClass=\"filter-dialog\"\n [header]=\"'platform.filter_service.filters' | translate\"\n [closeAriaLabel]=\"'platform.filter_service.aria_close_dialog' | translate\"\n [draggable]=\"false\"\n [modal]=\"true\"\n [(visible)]=\"showDialog\"\n [blockScroll]=\"true\"\n [closable]=\"true\"\n [closeOnEscape]=\"true\"\n [focusOnShow]=\"false\"\n (onShow)=\"focusFirstField()\"\n (onHide)=\"onDialogHide()\"\n>\n\n <s-app-form-filter\n [showMessages]=\"true\"\n (errorOutput)=\"onError($event)\"\n (totalFiltersActiveOutput)=\"updateTotalFiltersActive($event)\"\n [contextId]=\"contextId\"\n ></s-app-form-filter>\n\n <ng-template pTemplate=\"footer\">\n <ng-container *ngIf=\"!error && !hideButtons\">\n <s-button\n type=\"submit\"\n priority=\"primary\"\n [label]=\"translate.instant('platform.filter_service.filter')\"\n (clicked)=\"applyFilters()\"\n ></s-button>\n <ng-container *ngIf=\"!isMobile\">\n <s-button\n priority=\"secondary\"\n [label]=\"translate.instant('platform.filter_service.save')\"\n (clicked)=\"saveFilters()\"\n ></s-button>\n <s-button\n priority=\"secondary\"\n [label]=\"translate.instant('platform.filter_service.clear')\"\n (clicked)=\"clearFilters()\"\n ></s-button>\n </ng-container>\n <s-button\n *ngIf=\"isMobile\"\n priority=\"default\"\n [label]=\"translate.instant('platform.filter_service.actions')\"\n [auxiliary]=\"true\"\n [menuOptions]=\"mobileButtonActions\"\n ></s-button>\n <s-button\n priority=\"link\"\n [label]=\"translate.instant('platform.filter_service.cancel')\"\n (clicked)=\"toggleDialog(); close()\"\n ></s-button>\n </ng-container>\n </ng-template>\n</p-dialog>\n\n<p-toast key=\"filterServiceToastKey\" [baseZIndex]=\"5000\"></p-toast>\n", styles: [".custom-badge{position:absolute!important;right:-4px;top:-10px;height:20px;vertical-align:middle;display:table;min-width:22px}.filter-button{position:relative;border:solid 1px black;border-radius:1.5rem;background:transparent;padding:.5rem 1rem;cursor:pointer}.filter-dialog .ui-dialog-title{display:block!important;padding-right:0!important}.filter-footer{text-align:end;border-top:1px solid #e5eaea;padding:13px}.filter-dialog>.ui-dialog-content{height:300px;padding:10px!important}.app-form-filter{height:335px;max-height:335px;overflow:auto}.only-content-wrapper{background-color:#fff}.close_btn{align-content:center;justify-self:right;margin-left:auto;background:none;border:none;padding:0;font:inherit;color:inherit}.close_btn:hover{cursor:pointer}.header{text-transform:uppercase;display:flex;width:100%;border-bottom:1px solid #e5eaea;padding:15px;margin-left:0}@media (min-width: 641px) and (max-width: 1024px){.filter-dialog{width:75%}.filter-dialog>.ui-dialog-content{height:300px}}@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait){.filter-dialog{width:75%}.filter-dialog>.ui-dialog-content{height:90%}}@media (min-width: 320px) and (max-width: 640px){.filter-dialog{width:95%;left:0;top:0;opacity:1;margin:auto;height:93%}.filter-dialog>.ui-dialog-content{height:85%}}@media (min-width: 320px) and (max-width: 640px) and (max-width: 360px){.filter-dialog button{padding:0!important}.filter-dialog>.ui-dialog-content{height:81%}}\n"], dependencies: [{ kind: "component", type: i1$2.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$1.ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor"], outputs: ["clicked"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: FormFilterComponent, selector: "s-app-form-filter", inputs: ["showMessages", "contextId"], outputs: ["totalFiltersActiveOutput", "errorOutput", "showDialogOutput", "closeModalOutput"] }, { kind: "pipe", type: TranslatePipe$1, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
|
|
1586
1624
|
}
|
|
1587
1625
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdvancedFilterComponent, decorators: [{
|
|
1588
1626
|
type: Component,
|
|
1589
|
-
args: [{ selector: 's-advanced-filter', encapsulation: ViewEncapsulation.None, template: "<s-button\n *ngIf=\"!onlyContent\"\n [id]=\"'filterButton'\"\n [disabled]=\"!canOpenFilter\"\n (clicked)=\"canOpenFilter ? toggleDialog() : ''\"\n iconClass=\"fa fa-filter\"\n priority=\"default\"\n [label]=\"labelButton\"\n [auxiliary]=\"true\"\n [tooltip]=\"appliedFiltersTooltip\"\n>\n <span\n *ngIf=\"totalFiltersActive && showActiveFiltersCountBadge\"\n
|
|
1627
|
+
args: [{ selector: 's-advanced-filter', encapsulation: ViewEncapsulation.None, template: "<s-button\n #filterButtonRef\n *ngIf=\"!onlyContent\"\n [id]=\"'filterButton'\"\n [disabled]=\"!canOpenFilter\"\n (clicked)=\"canOpenFilter ? toggleDialog() : ''\"\n iconClass=\"fa fa-filter\"\n priority=\"default\"\n [label]=\"labelButton\"\n [auxiliary]=\"true\"\n [tooltip]=\"appliedFiltersTooltip\"\n>\n <span aria-live=\"polite\">\n <span\n *ngIf=\"totalFiltersActive && showActiveFiltersCountBadge\"\n class=\"sds-badge-number sds-color-primary custom-badge\"\n >{{ totalFiltersActive }}</span\n >\n <span class=\"sr-only\" *ngIf=\"totalFiltersActive && showActiveFiltersCountBadge\">\n {{ totalFiltersActive }} {{ 'platform.filter_service.active_filters' | translate }}\n </span>\n </span>\n</s-button>\n\n<section *ngIf=\"onlyContent\">\n <div class=\"only-content-wrapper\">\n <div class=\"header\">\n <h3 id=\"filter-heading\">{{ 'platform.filter_service.filters' | translate }}</h3>\n <button\n type=\"button\"\n (click)=\"close()\"\n class=\"close_btn\"\n [attr.aria-label]=\"'platform.filter_service.aria_close_filters' | translate\"\n >\n <span class=\"fa fa-times\" aria-hidden=\"true\"></span>\n </button>\n </div>\n <div class=\"app-form-filter\">\n <s-app-form-filter\n [showMessages]=\"false\"\n (totalFiltersActiveOutput)=\"updateTotalFiltersActive($event)\"\n (closeModalOutput)=\"close()\"\n [contextId]=\"contextId\"\n ></s-app-form-filter>\n </div>\n <div class=\"filter-footer\" *ngIf=\"!error\">\n <s-button\n priority=\"link\"\n [label]=\"translate.instant('platform.filter_service.cancel')\"\n (clicked)=\"close()\"\n ></s-button>\n <s-button\n *ngIf=\"isMobile\"\n priority=\"default\"\n [label]=\"translate.instant('platform.filter_service.actions')\"\n [auxiliary]=\"true\"\n [menuOptions]=\"mobileButtonActions\"\n ></s-button>\n <ng-container *ngIf=\"!isMobile\">\n <s-button\n priority=\"secondary\"\n [label]=\"translate.instant('platform.filter_service.clear')\"\n (clicked)=\"clearFilters()\"\n ></s-button>\n <s-button\n priority=\"secondary\"\n [label]=\"translate.instant('platform.filter_service.save')\"\n (clicked)=\"saveFilters()\"\n ></s-button>\n </ng-container>\n <s-button\n type=\"submit\"\n priority=\"primary\"\n [label]=\"translate.instant('platform.filter_service.filter')\"\n (clicked)=\"onApplyFilters()\"\n ></s-button>\n </div>\n </div>\n</section>\n\n<p-dialog\n *ngIf=\"!onlyContent\"\n appendTo=\"body\"\n styleClass=\"filter-dialog\"\n [header]=\"'platform.filter_service.filters' | translate\"\n [closeAriaLabel]=\"'platform.filter_service.aria_close_dialog' | translate\"\n [draggable]=\"false\"\n [modal]=\"true\"\n [(visible)]=\"showDialog\"\n [blockScroll]=\"true\"\n [closable]=\"true\"\n [closeOnEscape]=\"true\"\n [focusOnShow]=\"false\"\n (onShow)=\"focusFirstField()\"\n (onHide)=\"onDialogHide()\"\n>\n\n <s-app-form-filter\n [showMessages]=\"true\"\n (errorOutput)=\"onError($event)\"\n (totalFiltersActiveOutput)=\"updateTotalFiltersActive($event)\"\n [contextId]=\"contextId\"\n ></s-app-form-filter>\n\n <ng-template pTemplate=\"footer\">\n <ng-container *ngIf=\"!error && !hideButtons\">\n <s-button\n type=\"submit\"\n priority=\"primary\"\n [label]=\"translate.instant('platform.filter_service.filter')\"\n (clicked)=\"applyFilters()\"\n ></s-button>\n <ng-container *ngIf=\"!isMobile\">\n <s-button\n priority=\"secondary\"\n [label]=\"translate.instant('platform.filter_service.save')\"\n (clicked)=\"saveFilters()\"\n ></s-button>\n <s-button\n priority=\"secondary\"\n [label]=\"translate.instant('platform.filter_service.clear')\"\n (clicked)=\"clearFilters()\"\n ></s-button>\n </ng-container>\n <s-button\n *ngIf=\"isMobile\"\n priority=\"default\"\n [label]=\"translate.instant('platform.filter_service.actions')\"\n [auxiliary]=\"true\"\n [menuOptions]=\"mobileButtonActions\"\n ></s-button>\n <s-button\n priority=\"link\"\n [label]=\"translate.instant('platform.filter_service.cancel')\"\n (clicked)=\"toggleDialog(); close()\"\n ></s-button>\n </ng-container>\n </ng-template>\n</p-dialog>\n\n<p-toast key=\"filterServiceToastKey\" [baseZIndex]=\"5000\"></p-toast>\n", styles: [".custom-badge{position:absolute!important;right:-4px;top:-10px;height:20px;vertical-align:middle;display:table;min-width:22px}.filter-button{position:relative;border:solid 1px black;border-radius:1.5rem;background:transparent;padding:.5rem 1rem;cursor:pointer}.filter-dialog .ui-dialog-title{display:block!important;padding-right:0!important}.filter-footer{text-align:end;border-top:1px solid #e5eaea;padding:13px}.filter-dialog>.ui-dialog-content{height:300px;padding:10px!important}.app-form-filter{height:335px;max-height:335px;overflow:auto}.only-content-wrapper{background-color:#fff}.close_btn{align-content:center;justify-self:right;margin-left:auto;background:none;border:none;padding:0;font:inherit;color:inherit}.close_btn:hover{cursor:pointer}.header{text-transform:uppercase;display:flex;width:100%;border-bottom:1px solid #e5eaea;padding:15px;margin-left:0}@media (min-width: 641px) and (max-width: 1024px){.filter-dialog{width:75%}.filter-dialog>.ui-dialog-content{height:300px}}@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait){.filter-dialog{width:75%}.filter-dialog>.ui-dialog-content{height:90%}}@media (min-width: 320px) and (max-width: 640px){.filter-dialog{width:95%;left:0;top:0;opacity:1;margin:auto;height:93%}.filter-dialog>.ui-dialog-content{height:85%}}@media (min-width: 320px) and (max-width: 640px) and (max-width: 360px){.filter-dialog button{padding:0!important}.filter-dialog>.ui-dialog-content{height:81%}}\n"] }]
|
|
1590
1628
|
}], propDecorators: { labelButton: [{
|
|
1591
1629
|
type: Input
|
|
1592
1630
|
}], onlyContent: [{
|
|
@@ -1604,6 +1642,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1604
1642
|
}], modalComponent: [{
|
|
1605
1643
|
type: ViewChild,
|
|
1606
1644
|
args: [FormFilterComponent]
|
|
1645
|
+
}], filterButtonRef: [{
|
|
1646
|
+
type: ViewChild,
|
|
1647
|
+
args: ['filterButtonRef', { read: ElementRef }]
|
|
1607
1648
|
}], onResizeWindow: [{
|
|
1608
1649
|
type: HostListener,
|
|
1609
1650
|
args: ['window:resize', ['$event']]
|
|
@@ -2153,6 +2194,7 @@ class SpotlightComponent {
|
|
|
2153
2194
|
spotlightService = inject(SpotlightService);
|
|
2154
2195
|
cookieService = inject(CookieService);
|
|
2155
2196
|
datePipe = inject(DatePipe);
|
|
2197
|
+
elementRef = inject(ElementRef);
|
|
2156
2198
|
header;
|
|
2157
2199
|
imgUrl;
|
|
2158
2200
|
primaryButtonLabel;
|
|
@@ -2163,9 +2205,11 @@ class SpotlightComponent {
|
|
|
2163
2205
|
spotlightControlsList;
|
|
2164
2206
|
spotlightScreen;
|
|
2165
2207
|
canEmitEvent;
|
|
2208
|
+
previousFocusElement = null;
|
|
2166
2209
|
visible = false;
|
|
2167
2210
|
menuId;
|
|
2168
2211
|
fade = false;
|
|
2212
|
+
altText = '';
|
|
2169
2213
|
visibleChange = new EventEmitter();
|
|
2170
2214
|
async ngOnInit() {
|
|
2171
2215
|
await this.setValues();
|
|
@@ -2201,6 +2245,7 @@ class SpotlightComponent {
|
|
|
2201
2245
|
this.canAppear = true;
|
|
2202
2246
|
const control = this.getSpotlightControlFromList(this.spotlightScreen.spotlight.id);
|
|
2203
2247
|
this.canEmitEvent = !control || this.currentUser !== control.firstUser;
|
|
2248
|
+
this.onOpen();
|
|
2204
2249
|
}
|
|
2205
2250
|
}
|
|
2206
2251
|
validateDate(date) {
|
|
@@ -2394,20 +2439,34 @@ class SpotlightComponent {
|
|
|
2394
2439
|
};
|
|
2395
2440
|
}
|
|
2396
2441
|
close() {
|
|
2442
|
+
if (this.previousFocusElement && document.body.contains(this.previousFocusElement)) {
|
|
2443
|
+
this.previousFocusElement.focus();
|
|
2444
|
+
}
|
|
2445
|
+
this.previousFocusElement = null;
|
|
2397
2446
|
this.visibleChange.emit(false);
|
|
2398
2447
|
}
|
|
2448
|
+
onOpen() {
|
|
2449
|
+
this.previousFocusElement = document.activeElement;
|
|
2450
|
+
setTimeout(() => {
|
|
2451
|
+
const dialog = this.elementRef.nativeElement.querySelector('dialog');
|
|
2452
|
+
const focusable = dialog?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
2453
|
+
focusable?.focus();
|
|
2454
|
+
});
|
|
2455
|
+
}
|
|
2399
2456
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpotlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2400
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpotlightComponent, selector: "s-spotlight", inputs: { visible: "visible", menuId: "menuId", fade: "fade" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<
|
|
2457
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SpotlightComponent, selector: "s-spotlight", inputs: { visible: "visible", menuId: "menuId", fade: "fade", altText: "altText" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<dialog class=\"s-spotlight-overlay\" id=\"ol\" *ngIf=\"canAppear && visible\"\n aria-modal=\"true\" aria-labelledby=\"spotlight-title\"\n cdkTrapFocus (keydown.escape)=\"close()\">\n <div class=\"s-spotlight\" id=\"sl\" [ngClass]=\"{'s-effect-fadein': fade}\">\n <div class=\"s-spotlight-header\">\n <span class=\"s-spotlight-title\" id=\"spotlight-title\">{{header.toUpperCase()}}</span>\n <button\n type=\"button\"\n class=\"s-spotlight-close\"\n aria-label=\"Fechar spotlight\"\n (click)=\"close()\">\n <span class=\"fa fa-times\" aria-hidden=\"true\"></span>\n </button>\n </div>\n <div class=\"s-img\">\n <img src=\"{{imgUrl}}\" [alt]=\"altText || ''\" width=\"800\" height=\"450\">\n </div>\n <div class=\"s-spotlight-footer\">\n <div class=\"s-spotlight-footer-left\">\n <button\n pButton\n type=\"submit\"\n id=\"decline-button\"\n label=\"{{'platform.spotlight.no_interest' | translate}}\"\n (click)=\"onTertiary()\"\n class=\"ui-button-link\">\n </button>\n </div>\n <div class=\"s-spotlight-footer-right\">\n <button\n pButton\n type=\"submit\"\n id=\"remember-button\"\n label=\"{{'platform.spotlight.remember_late' | translate}}\"\n (click)=\"onSecondary()\"\n class=\"ui-button-raised ui-button-secondary\">\n </button>\n <button\n pButton\n label=\"{{primaryButtonLabel}}\"\n type=\"submit\"\n id=\"submit-button\"\n (click)=\"onPrimary()\"\n [pTooltip]=\"primaryButtonTooltip\"\n tooltipPosition=\"top\"\n showDelay=\"500\"\n class=\"ui-button-raised\">\n </button>\n </div>\n </div>\n</div>\n</dialog>", styles: [".s-spotlight-overlay{display:flex;position:fixed;z-index:10;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006}.s-spotlight{border-radius:3px;background:#fff;margin:auto;overflow:hidden;animation:move .15s forwards}.s-spotlight-header,.s-spotlight-footer{display:flex;padding:15px}.s-spotlight-header{align-items:center;justify-content:space-between}.s-spotlight-footer,.s-spotlight-footer-right,.s-spotlight-footer-left{display:flex}.s-spotlight-footer-right{flex:2;justify-content:flex-end}.s-spotlight-footer-left{flex:1;justify-content:flex-start}.s-spotlight-title{font-family:Open Sans,sans-serif;font-size:16px;font-weight:400;color:#333}.s-spotlight-close{display:block;margin-left:15px;color:#000;background:none;border:none;padding:0;font:inherit;cursor:pointer}.s-img{width:100%;display:flex;align-items:center;justify-content:center}.s-img img{width:100%}.s-effect-fadein{animation:fade .15s forwards}@keyframes fade{0%{opacity:0}to{opacity:1}}@media (max-width: 595px){.s-spotlight-footer,.s-spotlight-footer-right,.s-spotlight-footer-left{align-items:center;flex-direction:column-reverse}.s-spotlight-footer button{margin:0 0 15px!important;width:100%!important}}@media (min-width: 576px){.s-spotlight{width:100%}}@media (min-width: 768px){.s-spotlight{width:720px}.s-spotlight-footer,.s-spotlight-footer-right,.s-spotlight-footer-left{flex-direction:row}}@media (min-width: 992px){.s-spotlight{width:960px}}@media (min-width: 1200px){.s-spotlight{width:50%}}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2$2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: i3$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
|
|
2401
2458
|
}
|
|
2402
2459
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpotlightComponent, decorators: [{
|
|
2403
2460
|
type: Component,
|
|
2404
|
-
args: [{ selector: 's-spotlight', template: "<
|
|
2461
|
+
args: [{ selector: 's-spotlight', template: "<dialog class=\"s-spotlight-overlay\" id=\"ol\" *ngIf=\"canAppear && visible\"\n aria-modal=\"true\" aria-labelledby=\"spotlight-title\"\n cdkTrapFocus (keydown.escape)=\"close()\">\n <div class=\"s-spotlight\" id=\"sl\" [ngClass]=\"{'s-effect-fadein': fade}\">\n <div class=\"s-spotlight-header\">\n <span class=\"s-spotlight-title\" id=\"spotlight-title\">{{header.toUpperCase()}}</span>\n <button\n type=\"button\"\n class=\"s-spotlight-close\"\n aria-label=\"Fechar spotlight\"\n (click)=\"close()\">\n <span class=\"fa fa-times\" aria-hidden=\"true\"></span>\n </button>\n </div>\n <div class=\"s-img\">\n <img src=\"{{imgUrl}}\" [alt]=\"altText || ''\" width=\"800\" height=\"450\">\n </div>\n <div class=\"s-spotlight-footer\">\n <div class=\"s-spotlight-footer-left\">\n <button\n pButton\n type=\"submit\"\n id=\"decline-button\"\n label=\"{{'platform.spotlight.no_interest' | translate}}\"\n (click)=\"onTertiary()\"\n class=\"ui-button-link\">\n </button>\n </div>\n <div class=\"s-spotlight-footer-right\">\n <button\n pButton\n type=\"submit\"\n id=\"remember-button\"\n label=\"{{'platform.spotlight.remember_late' | translate}}\"\n (click)=\"onSecondary()\"\n class=\"ui-button-raised ui-button-secondary\">\n </button>\n <button\n pButton\n label=\"{{primaryButtonLabel}}\"\n type=\"submit\"\n id=\"submit-button\"\n (click)=\"onPrimary()\"\n [pTooltip]=\"primaryButtonTooltip\"\n tooltipPosition=\"top\"\n showDelay=\"500\"\n class=\"ui-button-raised\">\n </button>\n </div>\n </div>\n</div>\n</dialog>", styles: [".s-spotlight-overlay{display:flex;position:fixed;z-index:10;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0006}.s-spotlight{border-radius:3px;background:#fff;margin:auto;overflow:hidden;animation:move .15s forwards}.s-spotlight-header,.s-spotlight-footer{display:flex;padding:15px}.s-spotlight-header{align-items:center;justify-content:space-between}.s-spotlight-footer,.s-spotlight-footer-right,.s-spotlight-footer-left{display:flex}.s-spotlight-footer-right{flex:2;justify-content:flex-end}.s-spotlight-footer-left{flex:1;justify-content:flex-start}.s-spotlight-title{font-family:Open Sans,sans-serif;font-size:16px;font-weight:400;color:#333}.s-spotlight-close{display:block;margin-left:15px;color:#000;background:none;border:none;padding:0;font:inherit;cursor:pointer}.s-img{width:100%;display:flex;align-items:center;justify-content:center}.s-img img{width:100%}.s-effect-fadein{animation:fade .15s forwards}@keyframes fade{0%{opacity:0}to{opacity:1}}@media (max-width: 595px){.s-spotlight-footer,.s-spotlight-footer-right,.s-spotlight-footer-left{align-items:center;flex-direction:column-reverse}.s-spotlight-footer button{margin:0 0 15px!important;width:100%!important}}@media (min-width: 576px){.s-spotlight{width:100%}}@media (min-width: 768px){.s-spotlight{width:720px}.s-spotlight-footer,.s-spotlight-footer-right,.s-spotlight-footer-left{flex-direction:row}}@media (min-width: 992px){.s-spotlight{width:960px}}@media (min-width: 1200px){.s-spotlight{width:50%}}\n"] }]
|
|
2405
2462
|
}], propDecorators: { visible: [{
|
|
2406
2463
|
type: Input
|
|
2407
2464
|
}], menuId: [{
|
|
2408
2465
|
type: Input
|
|
2409
2466
|
}], fade: [{
|
|
2410
2467
|
type: Input
|
|
2468
|
+
}], altText: [{
|
|
2469
|
+
type: Input
|
|
2411
2470
|
}], visibleChange: [{
|
|
2412
2471
|
type: Output
|
|
2413
2472
|
}] } });
|
|
@@ -2420,7 +2479,8 @@ const fallback = {
|
|
|
2420
2479
|
class SpotlightModule {
|
|
2421
2480
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SpotlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2422
2481
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SpotlightModule, declarations: [SpotlightComponent,
|
|
2423
|
-
TranslatePipe], imports: [
|
|
2482
|
+
TranslatePipe], imports: [A11yModule,
|
|
2483
|
+
ButtonModule$1,
|
|
2424
2484
|
TooltipModule,
|
|
2425
2485
|
CommonModule,
|
|
2426
2486
|
HttpInterceptorModule, TranslationsModule], exports: [SpotlightComponent] });
|
|
@@ -2428,7 +2488,8 @@ class SpotlightModule {
|
|
|
2428
2488
|
SpotlightService,
|
|
2429
2489
|
DatePipe,
|
|
2430
2490
|
CookieService
|
|
2431
|
-
], imports: [
|
|
2491
|
+
], imports: [A11yModule,
|
|
2492
|
+
ButtonModule$1,
|
|
2432
2493
|
TooltipModule,
|
|
2433
2494
|
CommonModule,
|
|
2434
2495
|
HttpInterceptorModule,
|
|
@@ -2438,6 +2499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2438
2499
|
type: NgModule,
|
|
2439
2500
|
args: [{
|
|
2440
2501
|
imports: [
|
|
2502
|
+
A11yModule,
|
|
2441
2503
|
ButtonModule$1,
|
|
2442
2504
|
TooltipModule,
|
|
2443
2505
|
CommonModule,
|