@acontplus/ng-components 2.1.10 → 2.1.12
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, booleanAttribute, output, ViewEncapsulation, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, effect, Injectable, computed, PLATFORM_ID, signal, Input, TemplateRef, Pipe, Directive, ViewChild, KeyValueDiffers, ChangeDetectorRef, InjectionToken, ANIMATION_MODULE_TYPE, HostListener, ContentChildren, model, forwardRef, EventEmitter, ApplicationRef, Injector, DOCUMENT, ElementRef, NgZone, ContentChild, Output, Renderer2 } from '@angular/core';
|
|
2
|
+
import { input, booleanAttribute, output, ViewEncapsulation, Component, inject, viewChild, ViewContainerRef, ChangeDetectionStrategy, effect, Injectable, computed, PLATFORM_ID, signal, Input, TemplateRef, Pipe, Directive, ViewChild, KeyValueDiffers, ChangeDetectorRef, InjectionToken, ANIMATION_MODULE_TYPE, HostListener, ContentChildren, model, forwardRef, EventEmitter, ApplicationRef, Injector, DOCUMENT, ElementRef, NgZone, ContentChild, Output, EnvironmentInjector, createComponent, Renderer2 } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/card';
|
|
4
4
|
import { MatCardModule } from '@angular/material/card';
|
|
5
5
|
import * as i2 from '@angular/material/button';
|
|
@@ -7,47 +7,46 @@ import { MatButtonModule, MatButton, MatMiniFabButton, MatIconButton, MatFabButt
|
|
|
7
7
|
import * as i3 from '@angular/material/icon';
|
|
8
8
|
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
9
9
|
import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
|
|
10
|
-
import * as
|
|
10
|
+
import * as i2$1 from '@angular/material/dialog';
|
|
11
11
|
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogConfig } from '@angular/material/dialog';
|
|
12
12
|
import { NgClass, NgTemplateOutlet, isPlatformBrowser, AsyncPipe, DecimalPipe, CurrencyPipe, PercentPipe, DatePipe } from '@angular/common';
|
|
13
13
|
import { REPORT_FORMAT, DEFAULT_ICONS, FALLBACK_ICON } from '@acontplus/ui-kit';
|
|
14
|
-
import * as i2$
|
|
14
|
+
import * as i2$2 from '@angular/forms';
|
|
15
15
|
import { FormControl, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
16
|
-
import * as i1$
|
|
16
|
+
import * as i1$1 from '@ng-select/ng-select';
|
|
17
17
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
18
18
|
import { Subject, firstValueFrom, catchError, of, map, BehaviorSubject, delay, debounceTime, takeUntil, isObservable, fromEvent, filter as filter$1, merge, defer, Subscription } from 'rxjs';
|
|
19
19
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
20
20
|
import { HttpClient } from '@angular/common/http';
|
|
21
21
|
import { MatChipRow, MatChipGrid, MatChipInput, MatChipListbox, MatChip } from '@angular/material/chips';
|
|
22
|
-
import
|
|
23
|
-
import { MatFormField, MatLabel, MatHint, MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
|
|
22
|
+
import { MatFormField, MatLabel, MatHint, MatFormFieldModule } from '@angular/material/form-field';
|
|
24
23
|
import { LiveAnnouncer, CdkTrapFocus, FocusMonitor, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
|
|
25
24
|
import { ENTER, COMMA, ESCAPE, hasModifierKey, SPACE } from '@angular/cdk/keycodes';
|
|
26
25
|
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
27
26
|
import { Tabulator, PageModule, ReactiveDataModule, FormatModule, EditModule, ValidateModule, ColumnCalcsModule, SortModule, TooltipModule, DataTreeModule, MoveRowsModule, SelectRowModule, PopupModule, InteractionModule } from 'tabulator-tables';
|
|
28
27
|
import { toSignal } from '@angular/core/rxjs-interop';
|
|
29
|
-
import * as i1$
|
|
28
|
+
import * as i1$2 from '@angular/cdk/overlay';
|
|
30
29
|
import { Overlay, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
|
|
31
30
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
|
32
31
|
import { ComponentPortal, CdkPortalOutlet, TemplatePortal, DomPortalOutlet } from '@angular/cdk/portal';
|
|
33
|
-
import * as
|
|
34
|
-
import {
|
|
32
|
+
import * as i4 from '@angular/material/input';
|
|
33
|
+
import { MatInputModule } from '@angular/material/input';
|
|
34
|
+
import * as i5 from '@angular/material/progress-bar';
|
|
35
35
|
import { MatProgressBarModule, MatProgressBar } from '@angular/material/progress-bar';
|
|
36
|
+
import * as i2$3 from '@angular/material/tooltip';
|
|
37
|
+
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
36
38
|
import { switchMap, catchError as catchError$1, takeUntil as takeUntil$1, filter, take, startWith } from 'rxjs/operators';
|
|
37
39
|
import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell } from '@angular/material/table';
|
|
38
40
|
import { MatPaginator } from '@angular/material/paginator';
|
|
39
41
|
import { MatSort, MatSortHeader } from '@angular/material/sort';
|
|
40
|
-
import
|
|
41
|
-
import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
|
|
42
|
+
import { MatCheckbox } from '@angular/material/checkbox';
|
|
42
43
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
43
|
-
import * as i1$
|
|
44
|
+
import * as i1$3 from '@angular/material/menu';
|
|
44
45
|
import { MatMenu, MatMenuItem, MatMenuTrigger, MatMenuModule } from '@angular/material/menu';
|
|
45
46
|
import * as i3$1 from '@angular/material/badge';
|
|
46
47
|
import { MatBadgeModule } from '@angular/material/badge';
|
|
47
|
-
import
|
|
48
|
-
|
|
49
|
-
import { Datex, SPANISH_LOCALE, DEFAULT_THEME, MATERIAL_THEME, BOOTSTRAP_THEME } from 'datex-ui';
|
|
50
|
-
export { BOOTSTRAP_THEME, DEFAULT_THEME, Datex, MATERIAL_THEME, SPANISH_LOCALE, SPANISH_LOCALE_WITH_TIME } from 'datex-ui';
|
|
48
|
+
import { SPANISH_LOCALE, MATERIAL_LIGHT_THEME, NgxDatex } from 'ngx-datex';
|
|
49
|
+
export { MATERIAL_LIGHT_THEME, NgxDatex, SPANISH_LOCALE } from 'ngx-datex';
|
|
51
50
|
import { tzDate, format, monthStart, addDay, monthEnd, weekStart, weekEnd } from '@formkit/tempo';
|
|
52
51
|
import { coerceCssPixelValue } from '@angular/cdk/coercion';
|
|
53
52
|
import { CdkDialogContainer, Dialog, DialogConfig } from '@angular/cdk/dialog';
|
|
@@ -428,7 +427,7 @@ class DialogWrapper {
|
|
|
428
427
|
});
|
|
429
428
|
}
|
|
430
429
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
431
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DialogWrapper, isStandalone: true, selector: "acp-dialog-wrapper", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "header", first: true, predicate: ["dialogHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!config.hideHeader) {\n<div\n class=\"acp-dialog-header\"\n cdkDrag\n cdkDragRootElement=\".cdk-overlay-pane\"\n cdkDragHandle\n #dialogHeader\n (mousedown)=\"bringToFront()\"\n>\n <h6 mat-dialog-title class=\"acp-dialog-title\">\n @if (config.icon) {\n <mat-icon class=\"acp-dialog-title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n }\n <span>{{ config.title }}</span>\n @if (config.showCloseButton !== false) {\n <acp-button\n [customClass]=\"'acp-dialog-close-btn'\"\n matStyle=\"icon\"\n icon=\"close\"\n (handleClick)=\"onClose()\"\n ariaLabel=\"Close Dialog\"\n />\n }\n </h6>\n</div>\n}\n\n<ng-template #contentHost />\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--mat-sys-outline-variant, #dee2e6);color:var(--mat-sys-on-surface, #212529);position:relative}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%;padding-right:48px}.acp-dialog-title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}mat-dialog-content{padding:24px}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
|
|
430
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DialogWrapper, isStandalone: true, selector: "acp-dialog-wrapper", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "header", first: true, predicate: ["dialogHeader"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (!config.hideHeader) {\n<div\n class=\"acp-dialog-header\"\n cdkDrag\n cdkDragRootElement=\".cdk-overlay-pane\"\n cdkDragHandle\n #dialogHeader\n (mousedown)=\"bringToFront()\"\n>\n <h6 mat-dialog-title class=\"acp-dialog-title\">\n @if (config.icon) {\n <mat-icon class=\"acp-dialog-title-icon\" aria-hidden=\"true\">{{ config.icon }}</mat-icon>\n }\n <span>{{ config.title }}</span>\n @if (config.showCloseButton !== false) {\n <acp-button\n [customClass]=\"'acp-dialog-close-btn'\"\n matStyle=\"icon\"\n icon=\"close\"\n (handleClick)=\"onClose()\"\n ariaLabel=\"Close Dialog\"\n />\n }\n </h6>\n</div>\n}\n\n<ng-template #contentHost />\n", styles: [".acp-dialog-header{cursor:move;border-bottom:1px solid var(--mat-sys-outline-variant, #dee2e6);color:var(--mat-sys-on-surface, #212529);position:relative}h6[mat-dialog-title].acp-dialog-title{display:flex;align-items:center;font-size:1.2rem;font-weight:500;margin:0;width:100%;padding-right:48px}.acp-dialog-title-icon{margin-right:12px;vertical-align:middle}h6[mat-dialog-title].acp-dialog-title span{flex-grow:1}mat-dialog-content{padding:24px}.acp-dialog-close-btn{position:absolute;top:8px;right:16px}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
432
431
|
}
|
|
433
432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DialogWrapper, decorators: [{
|
|
434
433
|
type: Component,
|
|
@@ -512,7 +511,7 @@ class DynamicSelect {
|
|
|
512
511
|
this._onDestroy.complete();
|
|
513
512
|
}
|
|
514
513
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
515
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: DynamicSelect, isStandalone: true, selector: "acp-dynamic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectOnTab: { classPropertyName: "selectOnTab", publicName: "selectOnTab", isSignal: true, isRequired: false, transformFunction: null }, openOnEnter: { classPropertyName: "openOnEnter", publicName: "openOnEnter", isSignal: true, isRequired: false, transformFunction: null }, selectableGroup: { classPropertyName: "selectableGroup", publicName: "selectableGroup", isSignal: true, isRequired: false, transformFunction: null }, selectableGroupAsModel: { classPropertyName: "selectableGroupAsModel", publicName: "selectableGroupAsModel", isSignal: true, isRequired: false, transformFunction: null }, clearOnBackspace: { classPropertyName: "clearOnBackspace", publicName: "clearOnBackspace", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, searchWhileComposing: { classPropertyName: "searchWhileComposing", publicName: "searchWhileComposing", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, editableSearchTerm: { classPropertyName: "editableSearchTerm", publicName: "editableSearchTerm", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<ng-select\n [items]=\"filteredOptions\"\n bindLabel=\"viewValue\"\n bindValue=\"value\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [formControl]=\"selectControl\"\n [placeholder]=\"placeholder() || label()\"\n [loading]=\"loading\"\n [virtualScroll]=\"virtualScroll()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [closeOnSelect]=\"closeOnSelect()\"\n [hideSelected]=\"hideSelected()\"\n [multiple]=\"multiple()\"\n [selectOnTab]=\"selectOnTab()\"\n [openOnEnter]=\"openOnEnter()\"\n [selectableGroup]=\"selectableGroup()\"\n [selectableGroupAsModel]=\"selectableGroupAsModel()\"\n [clearOnBackspace]=\"clearOnBackspace()\"\n [readonly]=\"readonly()\"\n [searchWhileComposing]=\"searchWhileComposing()\"\n [minTermLength]=\"minTermLength()\"\n [editableSearchTerm]=\"editableSearchTerm()\"\n [typeToSearchText]=\"typeToSearchText()\"\n [addTagText]=\"addTagText()\"\n [loadingText]=\"loadingText()\"\n [clearAllText]=\"clearAllText()\"\n [notFoundText]=\"notFoundText()\"\n (change)=\"onSelectionChange($event)\"\n [ngClass]=\"className()\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1$
|
|
514
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: DynamicSelect, isStandalone: true, selector: "acp-dynamic-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, hideSelected: { classPropertyName: "hideSelected", publicName: "hideSelected", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectOnTab: { classPropertyName: "selectOnTab", publicName: "selectOnTab", isSignal: true, isRequired: false, transformFunction: null }, openOnEnter: { classPropertyName: "openOnEnter", publicName: "openOnEnter", isSignal: true, isRequired: false, transformFunction: null }, selectableGroup: { classPropertyName: "selectableGroup", publicName: "selectableGroup", isSignal: true, isRequired: false, transformFunction: null }, selectableGroupAsModel: { classPropertyName: "selectableGroupAsModel", publicName: "selectableGroupAsModel", isSignal: true, isRequired: false, transformFunction: null }, clearOnBackspace: { classPropertyName: "clearOnBackspace", publicName: "clearOnBackspace", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, searchWhileComposing: { classPropertyName: "searchWhileComposing", publicName: "searchWhileComposing", isSignal: true, isRequired: false, transformFunction: null }, minTermLength: { classPropertyName: "minTermLength", publicName: "minTermLength", isSignal: true, isRequired: false, transformFunction: null }, editableSearchTerm: { classPropertyName: "editableSearchTerm", publicName: "editableSearchTerm", isSignal: true, isRequired: false, transformFunction: null }, typeToSearchText: { classPropertyName: "typeToSearchText", publicName: "typeToSearchText", isSignal: true, isRequired: false, transformFunction: null }, addTagText: { classPropertyName: "addTagText", publicName: "addTagText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, clearAllText: { classPropertyName: "clearAllText", publicName: "clearAllText", isSignal: true, isRequired: false, transformFunction: null }, notFoundText: { classPropertyName: "notFoundText", publicName: "notFoundText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<ng-select\n [items]=\"filteredOptions\"\n bindLabel=\"viewValue\"\n bindValue=\"value\"\n [searchable]=\"searchable()\"\n [clearable]=\"clearable()\"\n [formControl]=\"selectControl\"\n [placeholder]=\"placeholder() || label()\"\n [loading]=\"loading\"\n [virtualScroll]=\"virtualScroll()\"\n [dropdownPosition]=\"dropdownPosition()\"\n [closeOnSelect]=\"closeOnSelect()\"\n [hideSelected]=\"hideSelected()\"\n [multiple]=\"multiple()\"\n [selectOnTab]=\"selectOnTab()\"\n [openOnEnter]=\"openOnEnter()\"\n [selectableGroup]=\"selectableGroup()\"\n [selectableGroupAsModel]=\"selectableGroupAsModel()\"\n [clearOnBackspace]=\"clearOnBackspace()\"\n [readonly]=\"readonly()\"\n [searchWhileComposing]=\"searchWhileComposing()\"\n [minTermLength]=\"minTermLength()\"\n [editableSearchTerm]=\"editableSearchTerm()\"\n [typeToSearchText]=\"typeToSearchText()\"\n [addTagText]=\"addTagText()\"\n [loadingText]=\"loadingText()\"\n [clearAllText]=\"clearAllText()\"\n [notFoundText]=\"notFoundText()\"\n (change)=\"onSelectionChange($event)\"\n [ngClass]=\"className()\"\n/>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i1$1.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
516
515
|
}
|
|
517
516
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DynamicSelect, decorators: [{
|
|
518
517
|
type: Component,
|
|
@@ -1622,6 +1621,260 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1622
1621
|
}]
|
|
1623
1622
|
}], ctorParameters: () => [] });
|
|
1624
1623
|
|
|
1624
|
+
class AlertDialogService {
|
|
1625
|
+
dialog = inject(MatDialog);
|
|
1626
|
+
defaultOptions = {
|
|
1627
|
+
width: '400px',
|
|
1628
|
+
showConfirmButton: true,
|
|
1629
|
+
showCancelButton: false,
|
|
1630
|
+
showDenyButton: false,
|
|
1631
|
+
confirmText: 'OK',
|
|
1632
|
+
cancelText: 'Cancelar',
|
|
1633
|
+
denyText: 'No',
|
|
1634
|
+
disableClose: false,
|
|
1635
|
+
closeOnBackdropClick: true,
|
|
1636
|
+
allowEscapeKey: true,
|
|
1637
|
+
allowEnterKey: true,
|
|
1638
|
+
timerProgressBar: false,
|
|
1639
|
+
reverseButtons: false,
|
|
1640
|
+
focusConfirm: true,
|
|
1641
|
+
scrollbarPadding: true,
|
|
1642
|
+
position: 'center'
|
|
1643
|
+
};
|
|
1644
|
+
/**
|
|
1645
|
+
* Configurar opciones por defecto para todos los diálogos
|
|
1646
|
+
*/
|
|
1647
|
+
setDefaults(options) {
|
|
1648
|
+
this.defaultOptions = { ...this.defaultOptions, ...options };
|
|
1649
|
+
}
|
|
1650
|
+
/**
|
|
1651
|
+
* Obtener opciones por defecto actuales
|
|
1652
|
+
*/
|
|
1653
|
+
getDefaults() {
|
|
1654
|
+
return { ...this.defaultOptions };
|
|
1655
|
+
}
|
|
1656
|
+
/**
|
|
1657
|
+
* Resetear a opciones por defecto originales
|
|
1658
|
+
*/
|
|
1659
|
+
resetDefaults() {
|
|
1660
|
+
this.defaultOptions = {
|
|
1661
|
+
width: '400px',
|
|
1662
|
+
showConfirmButton: true,
|
|
1663
|
+
showCancelButton: false,
|
|
1664
|
+
showDenyButton: false,
|
|
1665
|
+
confirmText: 'OK',
|
|
1666
|
+
cancelText: 'Cancelar',
|
|
1667
|
+
denyText: 'No',
|
|
1668
|
+
disableClose: false,
|
|
1669
|
+
closeOnBackdropClick: true,
|
|
1670
|
+
allowEscapeKey: true,
|
|
1671
|
+
allowEnterKey: true,
|
|
1672
|
+
timerProgressBar: false,
|
|
1673
|
+
reverseButtons: false,
|
|
1674
|
+
focusConfirm: true,
|
|
1675
|
+
scrollbarPadding: true,
|
|
1676
|
+
position: 'center'
|
|
1677
|
+
};
|
|
1678
|
+
}
|
|
1679
|
+
/**
|
|
1680
|
+
* Muestra un diálogo de alerta con todas las opciones configurables
|
|
1681
|
+
*/
|
|
1682
|
+
fire(options) {
|
|
1683
|
+
const mergedOptions = { ...this.defaultOptions, ...options };
|
|
1684
|
+
// Calcular posición del diálogo
|
|
1685
|
+
const position = this.getDialogPosition(mergedOptions.position || 'center');
|
|
1686
|
+
const dialogRef = this.dialog.open(AlertDialog, {
|
|
1687
|
+
width: mergedOptions.width,
|
|
1688
|
+
minWidth: mergedOptions.minWidth,
|
|
1689
|
+
maxWidth: mergedOptions.maxWidth,
|
|
1690
|
+
height: mergedOptions.height,
|
|
1691
|
+
disableClose: !mergedOptions.closeOnBackdropClick && mergedOptions.disableClose,
|
|
1692
|
+
data: mergedOptions,
|
|
1693
|
+
panelClass: this.getPanelClasses(mergedOptions),
|
|
1694
|
+
backdropClass: mergedOptions.backdropClass,
|
|
1695
|
+
position,
|
|
1696
|
+
closeOnNavigation: true,
|
|
1697
|
+
autoFocus: mergedOptions.focusConfirm !== false,
|
|
1698
|
+
restoreFocus: true,
|
|
1699
|
+
hasBackdrop: true
|
|
1700
|
+
});
|
|
1701
|
+
// Callbacks de ciclo de vida
|
|
1702
|
+
if (mergedOptions.willOpen) {
|
|
1703
|
+
mergedOptions.willOpen();
|
|
1704
|
+
}
|
|
1705
|
+
if (mergedOptions.didOpen) {
|
|
1706
|
+
setTimeout(() => mergedOptions.didOpen(), 0);
|
|
1707
|
+
}
|
|
1708
|
+
// Auto-close con timer
|
|
1709
|
+
let timerHandle;
|
|
1710
|
+
if (mergedOptions.timer && mergedOptions.timer > 0) {
|
|
1711
|
+
timerHandle = setTimeout(() => {
|
|
1712
|
+
if (dialogRef) {
|
|
1713
|
+
dialogRef.close({
|
|
1714
|
+
isConfirmed: true,
|
|
1715
|
+
isDismissed: false,
|
|
1716
|
+
isDenied: false,
|
|
1717
|
+
dismiss: 'timer'
|
|
1718
|
+
});
|
|
1719
|
+
}
|
|
1720
|
+
}, mergedOptions.timer);
|
|
1721
|
+
}
|
|
1722
|
+
// Manejar ESC key
|
|
1723
|
+
if (!mergedOptions.allowEscapeKey) {
|
|
1724
|
+
dialogRef.keydownEvents().subscribe(event => {
|
|
1725
|
+
if (event.key === 'Escape') {
|
|
1726
|
+
event.preventDefault();
|
|
1727
|
+
event.stopPropagation();
|
|
1728
|
+
}
|
|
1729
|
+
});
|
|
1730
|
+
}
|
|
1731
|
+
// Manejar backdrop click
|
|
1732
|
+
if (!mergedOptions.closeOnBackdropClick) {
|
|
1733
|
+
dialogRef.backdropClick().subscribe(event => {
|
|
1734
|
+
event.preventDefault();
|
|
1735
|
+
event.stopPropagation();
|
|
1736
|
+
});
|
|
1737
|
+
}
|
|
1738
|
+
const resultPromise = firstValueFrom(dialogRef.afterClosed());
|
|
1739
|
+
// Callbacks de cierre
|
|
1740
|
+
dialogRef.beforeClosed().subscribe(() => {
|
|
1741
|
+
if (timerHandle) {
|
|
1742
|
+
clearTimeout(timerHandle);
|
|
1743
|
+
}
|
|
1744
|
+
if (mergedOptions.willClose) {
|
|
1745
|
+
mergedOptions.willClose();
|
|
1746
|
+
}
|
|
1747
|
+
});
|
|
1748
|
+
dialogRef.afterClosed().subscribe(() => {
|
|
1749
|
+
if (mergedOptions.didClose) {
|
|
1750
|
+
mergedOptions.didClose();
|
|
1751
|
+
}
|
|
1752
|
+
});
|
|
1753
|
+
return resultPromise;
|
|
1754
|
+
}
|
|
1755
|
+
/**
|
|
1756
|
+
* Alerta de éxito
|
|
1757
|
+
*/
|
|
1758
|
+
success(options) {
|
|
1759
|
+
const opts = typeof options === 'string'
|
|
1760
|
+
? { message: options, title: '¡Éxito!' }
|
|
1761
|
+
: { title: '¡Éxito!', ...options };
|
|
1762
|
+
return this.fire({ ...opts, type: 'success' });
|
|
1763
|
+
}
|
|
1764
|
+
/**
|
|
1765
|
+
* Alerta de error
|
|
1766
|
+
*/
|
|
1767
|
+
error(options) {
|
|
1768
|
+
const opts = typeof options === 'string'
|
|
1769
|
+
? { message: options, title: 'Error' }
|
|
1770
|
+
: { title: 'Error', ...options };
|
|
1771
|
+
return this.fire({ ...opts, type: 'error' });
|
|
1772
|
+
}
|
|
1773
|
+
/**
|
|
1774
|
+
* Alerta de advertencia
|
|
1775
|
+
*/
|
|
1776
|
+
warning(options) {
|
|
1777
|
+
const opts = typeof options === 'string'
|
|
1778
|
+
? { message: options, title: 'Advertencia' }
|
|
1779
|
+
: { title: 'Advertencia', ...options };
|
|
1780
|
+
return this.fire({ ...opts, type: 'warning' });
|
|
1781
|
+
}
|
|
1782
|
+
/**
|
|
1783
|
+
* Alerta de información
|
|
1784
|
+
*/
|
|
1785
|
+
info(options) {
|
|
1786
|
+
const opts = typeof options === 'string'
|
|
1787
|
+
? { message: options, title: 'Información' }
|
|
1788
|
+
: { title: 'Información', ...options };
|
|
1789
|
+
return this.fire({ ...opts, type: 'info' });
|
|
1790
|
+
}
|
|
1791
|
+
/**
|
|
1792
|
+
* Diálogo de confirmación
|
|
1793
|
+
*/
|
|
1794
|
+
confirm(options) {
|
|
1795
|
+
const opts = typeof options === 'string'
|
|
1796
|
+
? { message: options, title: '¿Estás seguro?' }
|
|
1797
|
+
: { title: '¿Estás seguro?', ...options };
|
|
1798
|
+
return this.fire({
|
|
1799
|
+
...opts,
|
|
1800
|
+
type: 'question',
|
|
1801
|
+
showCancelButton: true,
|
|
1802
|
+
confirmText: opts.confirmText || 'Sí',
|
|
1803
|
+
cancelText: opts.cancelText || 'No'
|
|
1804
|
+
});
|
|
1805
|
+
}
|
|
1806
|
+
/**
|
|
1807
|
+
* Prompt para capturar input del usuario
|
|
1808
|
+
*/
|
|
1809
|
+
prompt(options) {
|
|
1810
|
+
return this.fire({
|
|
1811
|
+
type: 'question',
|
|
1812
|
+
showCancelButton: true,
|
|
1813
|
+
...options,
|
|
1814
|
+
input: options.input || 'text'
|
|
1815
|
+
});
|
|
1816
|
+
}
|
|
1817
|
+
/**
|
|
1818
|
+
* Toast notification (auto-cierre, posición personalizada)
|
|
1819
|
+
*/
|
|
1820
|
+
toast(options) {
|
|
1821
|
+
const opts = typeof options === 'string'
|
|
1822
|
+
? { message: options }
|
|
1823
|
+
: options;
|
|
1824
|
+
return this.fire({
|
|
1825
|
+
timer: 3000,
|
|
1826
|
+
timerProgressBar: true,
|
|
1827
|
+
showConfirmButton: false,
|
|
1828
|
+
position: 'top-end',
|
|
1829
|
+
width: '350px',
|
|
1830
|
+
...opts
|
|
1831
|
+
});
|
|
1832
|
+
}
|
|
1833
|
+
/**
|
|
1834
|
+
* Cerrar todos los diálogos abiertos
|
|
1835
|
+
*/
|
|
1836
|
+
closeAll() {
|
|
1837
|
+
this.dialog.closeAll();
|
|
1838
|
+
}
|
|
1839
|
+
getDialogPosition(position) {
|
|
1840
|
+
const positions = {
|
|
1841
|
+
'top': { top: '20px' },
|
|
1842
|
+
'top-start': { top: '20px', left: '20px' },
|
|
1843
|
+
'top-end': { top: '20px', right: '20px' },
|
|
1844
|
+
'center': {},
|
|
1845
|
+
'center-start': { left: '20px' },
|
|
1846
|
+
'center-end': { right: '20px' },
|
|
1847
|
+
'bottom': { bottom: '20px' },
|
|
1848
|
+
'bottom-start': { bottom: '20px', left: '20px' },
|
|
1849
|
+
'bottom-end': { bottom: '20px', right: '20px' }
|
|
1850
|
+
};
|
|
1851
|
+
return positions[position] || {};
|
|
1852
|
+
}
|
|
1853
|
+
getPanelClasses(options) {
|
|
1854
|
+
const classes = ['alert-dialog-container'];
|
|
1855
|
+
if (options.customClass) {
|
|
1856
|
+
classes.push(options.customClass);
|
|
1857
|
+
}
|
|
1858
|
+
if (options.panelClass) {
|
|
1859
|
+
if (Array.isArray(options.panelClass)) {
|
|
1860
|
+
classes.push(...options.panelClass);
|
|
1861
|
+
}
|
|
1862
|
+
else {
|
|
1863
|
+
classes.push(options.panelClass);
|
|
1864
|
+
}
|
|
1865
|
+
}
|
|
1866
|
+
return classes;
|
|
1867
|
+
}
|
|
1868
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1869
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialogService, providedIn: 'root' });
|
|
1870
|
+
}
|
|
1871
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialogService, decorators: [{
|
|
1872
|
+
type: Injectable,
|
|
1873
|
+
args: [{
|
|
1874
|
+
providedIn: 'root'
|
|
1875
|
+
}]
|
|
1876
|
+
}] });
|
|
1877
|
+
|
|
1625
1878
|
/**
|
|
1626
1879
|
* A theme toggle button component that allows users to switch between
|
|
1627
1880
|
* light and dark modes. Follows WAI-ARIA best practices for toggle buttons.
|
|
@@ -2096,7 +2349,7 @@ class ReusableAutocompleteComponent {
|
|
|
2096
2349
|
this.searchInput()?.nativeElement?.focus();
|
|
2097
2350
|
}
|
|
2098
2351
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ReusableAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2099
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ReusableAutocompleteComponent, isStandalone: true, selector: "acp-autocomplete-wrapper", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, notFoundTemplate: { classPropertyName: "notFoundTemplate", publicName: "notFoundTemplate", isSignal: true, isRequired: false, transformFunction: null }, overlayWidth: { classPropertyName: "overlayWidth", publicName: "overlayWidth", isSignal: true, isRequired: false, transformFunction: null }, overlayMaxHeight: { classPropertyName: "overlayMaxHeight", publicName: "overlayMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", searchChanged: "searchChanged", searchRequested: "searchRequested", pageChanged: "pageChanged", filterChanged: "filterChanged", advancedSearchClicked: "advancedSearchClicked", allResultsClicked: "allResultsClicked", createClicked: "createClicked" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "historyListElement", first: true, predicate: ["historyListElement"], descendants: true, isSignal: true }, { propertyName: "resultsListElement", first: true, predicate: ["resultsListElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"acp-autocomplete-wrapper\" [class.acp-autocomplete-wrapper-active]=\"overlayOpen()\">\n <!-- Input Container -->\n <div\n class=\"acp-autocomplete-wrapper-input-container\"\n cdkOverlayOrigin\n #overlayPosition=\"cdkOverlayOrigin\"\n >\n <div class=\"acp-autocomplete-wrapper-input-wrapper\">\n <mat-icon class=\"acp-autocomplete-wrapper-search-icon\">search</mat-icon>\n <input\n #searchInput\n type=\"text\"\n class=\"acp-autocomplete-wrapper-input-field\"\n [placeholder]=\"config.placeholder\"\n [(ngModel)]=\"query\"\n (input)=\"onInput($event)\"\n (click)=\"showOverlay()\"\n (keydown)=\"onKeyDown($event)\"\n [disabled]=\"config.disabled || false\"\n autocomplete=\"off\"\n />\n @if (query && query.length > 0 && !isLoading()) {\n <button\n mat-icon-button\n (click)=\"clearSearch()\"\n type=\"button\"\n class=\"acp-autocomplete-wrapper-clear-button\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n }\n <button mat-icon-button type=\"button\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n @if (isLoading()) {\n <div class=\"acp-autocomplete-wrapper-loading-spinner\">\n <mat-spinner diameter=\"20\" />\n </div>\n }\n </div>\n\n <!-- Overlay -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayPosition\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n [cdkConnectedOverlayHeight]=\"overlayMaxHeight()\"\n (overlayOutsideClick)=\"hideOverlay()\"\n (backdropClick)=\"hideOverlay()\"\n >\n <div class=\"autocomplete-wrapper-dropdown\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n <div class=\"autocomplete-wrapper-dropdown-content\">\n <!-- History Section -->\n @if (isHistoryVisible() && historyList().length > 0) {\n <div class=\"autocomplete-wrapper-section\">\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">B\u00FAsquedas recientes</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"clearHistory()\"\n class=\"autocomplete-wrapper-clear-history-button\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n </div>\n <ul\n class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n #historyListElement\n >\n @for (item of historyList(); track $index) {\n <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-history-item\">\n <div\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n tabindex=\"0\"\n (click)=\"selectItem(item)\"\n (keydown.enter)=\"selectItem(item)\"\n >\n <mat-icon class=\"autocomplete-wrapper-history-icon\">history</mat-icon>\n <div class=\"autocomplete-wrapper-item-details\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate() || defaultItemTemplate;\n context: { $implicit: item }\n \"\n />\n </div>\n </div>\n <button\n type=\"button\"\n mat-icon-button\n class=\"autocomplete-wrapper-remove-button\"\n (click)=\"removeHistoryItem($index, $event)\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n </ul>\n </div>\n }\n\n <!-- Results Section -->\n @if (!isHistoryVisible()) {\n <div class=\"autocomplete-wrapper-section\">\n <!-- Header with filters and pagination -->\n @if (config.enableFilters || config.enablePagination) {\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n\n <!-- Filters -->\n @if (config.enableFilters) {\n <div class=\"autocomplete-wrapper-filter-controls\">\n @if (config.searchFields && config.searchFields.length > 1) {\n <div class=\"autocomplete-wrapper-filter-group\">\n <label class=\"autocomplete-wrapper-filter-label\" for=\"searchBySelect\"\n >Buscar por:</label\n >\n <select\n id=\"searchBySelect\"\n class=\"autocomplete-wrapper-filter-select\"\n [(ngModel)]=\"filters.searchBy\"\n (change)=\"onFilterChange()\"\n >\n @for (field of config.searchFields; track $index) {\n <option [value]=\"field.value\">{{ field.label }}</option>\n }\n </select>\n </div>\n } @if (config.enableStockFilter && config.stockOptions) {\n <div class=\"autocomplete-wrapper-filter-group\">\n <label class=\"autocomplete-wrapper-filter-label\" for=\"stockSelect\">Stock:</label>\n <select\n id=\"stockSelect\"\n class=\"autocomplete-wrapper-filter-select\"\n [(ngModel)]=\"filters.stockFilter\"\n (change)=\"onFilterChange()\"\n >\n @for (option of config.stockOptions; track $index) {\n <option [value]=\"option.value\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n </div>\n }\n\n <!-- Pagination Controls -->\n @if (config.enablePagination && totalPages() > 1) {\n <div class=\"autocomplete-wrapper-pagination-header\">\n <div class=\"autocomplete-wrapper-pagination-info\">\n <span>P\u00E1gina {{ currentPage() }} de {{ totalPages() }}</span>\n </div>\n <div class=\"autocomplete-wrapper-pagination-controls\">\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToFirstPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>first_page</mat-icon>\n </button>\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <input\n type=\"number\"\n class=\"autocomplete-wrapper-page-input\"\n [value]=\"currentPage()\"\n [min]=\"1\"\n [max]=\"totalPages()\"\n (change)=\"goToPage($event)\"\n />\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToNextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToLastPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>last_page</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n </div>\n }\n\n <!-- Items List -->\n @if (totalItems()) {\n <ul\n class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n #resultsListElement\n >\n @for (item of currentPageItems(); track $index) {\n <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-result-item\">\n <div\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n tabindex=\"0\"\n (click)=\"selectItem(item)\"\n (keydown.enter)=\"selectItem(item)\"\n >\n <div class=\"autocomplete-wrapper-item-info\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate() || defaultItemTemplate;\n context: { $implicit: item }\n \"\n />\n </div>\n </div>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n <!-- No Results -->\n @if (!isLoading() && isNoResults()) {\n <div class=\"autocomplete-wrapper-no-results\">\n <mat-icon class=\"autocomplete-wrapper-no-results-icon\">search_off</mat-icon>\n <div class=\"autocomplete-wrapper-no-results-content\">\n <ng-container\n *ngTemplateOutlet=\"\n notFoundTemplate() || defaultNotFoundTemplate;\n context: { $implicit: noResultsText() }\n \"\n />\n </div>\n </div>\n }\n\n <!-- Footer -->\n @if (overlayOpen() && totalItems() > 0) {\n <div class=\"autocomplete-wrapper-footer\">\n @if (!isHistoryVisible() && totalItems() > 0 && config.enablePagination) {\n <div class=\"autocomplete-wrapper-pagination-footer\">\n <div class=\"autocomplete-wrapper-pagination-summary\">\n Mostrando {{ startItem() }}-{{ endItem() }} de {{ totalCount() }} resultados\n </div>\n <div class=\"autocomplete-wrapper-pagination-controls-footer\">\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <span class=\"autocomplete-wrapper-page-indicator\"\n >{{ currentPage() }} / {{ totalPages() }}</span\n >\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToNextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n </div>\n </div>\n } @if (config.enableFooterActions) {\n <div class=\"autocomplete-wrapper-footer-actions\">\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-create-button\"\n (click)=\"onCreateNew($event)\"\n >\n <mat-icon>add</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Crear</span>\n </button>\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-search-button\"\n (click)=\"onAdvancedSearch()\"\n >\n <mat-icon>tune</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Avanzada</span>\n </button>\n @if (!isHistoryVisible() && totalItems() > 0) {\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-results-button\"\n (click)=\"onShowAllResults()\"\n >\n <mat-icon>list</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Todos</span>\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Default Templates -->\n <ng-template #defaultItemTemplate let-item>\n <div class=\"autocomplete-wrapper-default-item\">\n <div class=\"autocomplete-wrapper-item-name\">{{ getItemDisplayText(item) }}</div>\n @if (item.description && typeof item === 'object') {\n <div class=\"autocomplete-wrapper-item-description\">{{ item.description }}</div>\n }\n </div>\n </ng-template>\n\n <ng-template #defaultNotFoundTemplate let-text>\n <div class=\"autocomplete-wrapper-default-no-results\">\n <p>{{ text }}</p>\n <p>Intenta con otros t\u00E9rminos de b\u00FAsqueda</p>\n </div>\n </ng-template>\n</div>\n", styles: [".acp-autocomplete-wrapper{display:block}.acp-autocomplete-wrapper{position:relative;width:100%;max-width:100%}.acp-autocomplete-wrapper.acp-autocomplete-wrapper-active .acp-autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-input-container{position:relative;width:100%}.acp-autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:var(--mat-sys-surface, white);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);border-radius:8px;padding:0 12px;transition:all .3s ease}.acp-autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-search-icon{color:var(--mat-sys-on-surface-variant, #666);margin-right:8px;font-size:20px}.acp-autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-input-field::placeholder{color:var(--mat-sys-on-surface-variant, #999)}.acp-autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.acp-autocomplete-wrapper-clear-button{margin-left:8px;color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.acp-autocomplete-wrapper-dropdown{background:var(--mat-sys-surface-container, white);border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid var(--mat-sys-outline-variant, #e0e0e0);overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.acp-autocomplete-wrapper-dropdown.acp-autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.acp-autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.acp-autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.acp-autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:var(--mat-sys-on-surface-variant, #666);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.acp-autocomplete-wrapper-clear-history-button{color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.acp-autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.acp-autocomplete-wrapper-filter-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);font-weight:500;white-space:nowrap}.acp-autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;font-size:12px;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, #333);cursor:pointer;min-width:120px}.acp-autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.acp-autocomplete-wrapper-filter-select:hover{border-color:#bbb}.acp-autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.acp-autocomplete-wrapper-pagination-info{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.acp-autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:var(--mat-sys-on-surface-variant, #666);background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.acp-autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.acp-autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.acp-autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.acp-autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.acp-autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{overflow-y:auto}.acp-autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid var(--mat-sys-outline-variant, #f5f5f5);transition:background-color .2s ease}.acp-autocomplete-wrapper-list-item:last-child{border-bottom:none}.acp-autocomplete-wrapper-list-item:hover{background-color:var(--mat-sys-surface-variant, #f8f9fa)}.acp-autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.acp-autocomplete-wrapper-item-content.acp-autocomplete-wrapper-selected{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #1976d2)}.acp-autocomplete-wrapper-history-item .acp-autocomplete-wrapper-item-content{padding-left:12px}.acp-autocomplete-wrapper-history-icon{color:var(--mat-sys-on-surface-variant, #999);margin-right:12px;font-size:18px}.acp-autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-remove-button{margin-right:8px}.acp-autocomplete-wrapper-result-item{position:relative}.acp-autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-default-item{flex:1}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-description{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:var(--mat-sys-on-surface-variant, #666)}.acp-autocomplete-wrapper-no-results-icon{font-size:48px;color:var(--mat-sys-outline, #ccc);margin-bottom:16px;width:45px;height:45px}.acp-autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.acp-autocomplete-wrapper-default-no-results{text-align:center}.acp-autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.acp-autocomplete-wrapper-footer{border-top:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.acp-autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.acp-autocomplete-wrapper-pagination-summary{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.acp-autocomplete-wrapper-page-indicator{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);min-width:40px;text-align:center}.acp-autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.acp-autocomplete-wrapper-footer-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;font-size:13px;text-transform:none;white-space:nowrap;background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button:hover{background-color:#ff980014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.acp-autocomplete-wrapper-button-text{display:inline}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}@media(max-width:768px){.acp-autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.acp-autocomplete-wrapper-dropdown-content{max-height:60vh}.acp-autocomplete-wrapper-input-field{font-size:16px}.acp-autocomplete-wrapper-footer{padding:8px 12px}.acp-autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.acp-autocomplete-wrapper-footer-button{width:100%;min-height:44px}.acp-autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.acp-autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.acp-autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.acp-autocomplete-wrapper-filter-label{font-size:11px}.acp-autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.acp-autocomplete-wrapper-pagination-header .acp-autocomplete-wrapper-pagination-info{display:none}.acp-autocomplete-wrapper-pagination-controls{gap:2px}.acp-autocomplete-wrapper-page-input{width:40px}.acp-autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.acp-autocomplete-wrapper-button-text{font-size:12px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:250px}}@media(max-width:480px){.acp-autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.acp-autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.acp-autocomplete-wrapper-filter-controls{gap:8px}.acp-autocomplete-wrapper-filter-group{gap:4px}.acp-autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.acp-autocomplete-wrapper-item-content{padding:14px 12px}.acp-autocomplete-wrapper-pagination-header{gap:8px}.acp-autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.acp-autocomplete-wrapper-page-input{width:35px;height:28px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:200px}.acp-autocomplete-wrapper-footer-actions{gap:4px}.acp-autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.acp-autocomplete-wrapper-button-text{display:none}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2352
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ReusableAutocompleteComponent, isStandalone: true, selector: "acp-autocomplete-wrapper", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, searchFunction: { classPropertyName: "searchFunction", publicName: "searchFunction", isSignal: true, isRequired: false, transformFunction: null }, notFoundTemplate: { classPropertyName: "notFoundTemplate", publicName: "notFoundTemplate", isSignal: true, isRequired: false, transformFunction: null }, overlayWidth: { classPropertyName: "overlayWidth", publicName: "overlayWidth", isSignal: true, isRequired: false, transformFunction: null }, overlayMaxHeight: { classPropertyName: "overlayMaxHeight", publicName: "overlayMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", searchChanged: "searchChanged", searchRequested: "searchRequested", pageChanged: "pageChanged", filterChanged: "filterChanged", advancedSearchClicked: "advancedSearchClicked", allResultsClicked: "allResultsClicked", createClicked: "createClicked" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "historyListElement", first: true, predicate: ["historyListElement"], descendants: true, isSignal: true }, { propertyName: "resultsListElement", first: true, predicate: ["resultsListElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"acp-autocomplete-wrapper\" [class.acp-autocomplete-wrapper-active]=\"overlayOpen()\">\n <!-- Input Container -->\n <div\n class=\"acp-autocomplete-wrapper-input-container\"\n cdkOverlayOrigin\n #overlayPosition=\"cdkOverlayOrigin\"\n >\n <div class=\"acp-autocomplete-wrapper-input-wrapper\">\n <mat-icon class=\"acp-autocomplete-wrapper-search-icon\">search</mat-icon>\n <input\n #searchInput\n type=\"text\"\n class=\"acp-autocomplete-wrapper-input-field\"\n [placeholder]=\"config.placeholder\"\n [(ngModel)]=\"query\"\n (input)=\"onInput($event)\"\n (click)=\"showOverlay()\"\n (keydown)=\"onKeyDown($event)\"\n [disabled]=\"config.disabled || false\"\n autocomplete=\"off\"\n />\n @if (query && query.length > 0 && !isLoading()) {\n <button\n mat-icon-button\n (click)=\"clearSearch()\"\n type=\"button\"\n class=\"acp-autocomplete-wrapper-clear-button\"\n >\n <mat-icon>clear</mat-icon>\n </button>\n }\n <button mat-icon-button type=\"button\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n @if (isLoading()) {\n <div class=\"acp-autocomplete-wrapper-loading-spinner\">\n <mat-spinner diameter=\"20\" />\n </div>\n }\n </div>\n\n <!-- Overlay -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayPosition\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n [cdkConnectedOverlayHeight]=\"overlayMaxHeight()\"\n (overlayOutsideClick)=\"hideOverlay()\"\n (backdropClick)=\"hideOverlay()\"\n >\n <div class=\"autocomplete-wrapper-dropdown\" [class.autocomplete-wrapper-active]=\"overlayOpen()\">\n <div class=\"autocomplete-wrapper-dropdown-content\">\n <!-- History Section -->\n @if (isHistoryVisible() && historyList().length > 0) {\n <div class=\"autocomplete-wrapper-section\">\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">B\u00FAsquedas recientes</span>\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"clearHistory()\"\n class=\"autocomplete-wrapper-clear-history-button\"\n >\n <mat-icon>delete_outline</mat-icon>\n </button>\n </div>\n <ul\n class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n #historyListElement\n >\n @for (item of historyList(); track $index) {\n <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-history-item\">\n <div\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n tabindex=\"0\"\n (click)=\"selectItem(item)\"\n (keydown.enter)=\"selectItem(item)\"\n >\n <mat-icon class=\"autocomplete-wrapper-history-icon\">history</mat-icon>\n <div class=\"autocomplete-wrapper-item-details\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate() || defaultItemTemplate;\n context: { $implicit: item }\n \"\n />\n </div>\n </div>\n <button\n type=\"button\"\n mat-icon-button\n class=\"autocomplete-wrapper-remove-button\"\n (click)=\"removeHistoryItem($index, $event)\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </li>\n }\n </ul>\n </div>\n }\n\n <!-- Results Section -->\n @if (!isHistoryVisible()) {\n <div class=\"autocomplete-wrapper-section\">\n <!-- Header with filters and pagination -->\n @if (config.enableFilters || config.enablePagination) {\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n\n <!-- Filters -->\n @if (config.enableFilters) {\n <div class=\"autocomplete-wrapper-filter-controls\">\n @if (config.searchFields && config.searchFields.length > 1) {\n <div class=\"autocomplete-wrapper-filter-group\">\n <label class=\"autocomplete-wrapper-filter-label\" for=\"searchBySelect\"\n >Buscar por:</label\n >\n <select\n id=\"searchBySelect\"\n class=\"autocomplete-wrapper-filter-select\"\n [(ngModel)]=\"filters.searchBy\"\n (change)=\"onFilterChange()\"\n >\n @for (field of config.searchFields; track $index) {\n <option [value]=\"field.value\">{{ field.label }}</option>\n }\n </select>\n </div>\n } @if (config.enableStockFilter && config.stockOptions) {\n <div class=\"autocomplete-wrapper-filter-group\">\n <label class=\"autocomplete-wrapper-filter-label\" for=\"stockSelect\">Stock:</label>\n <select\n id=\"stockSelect\"\n class=\"autocomplete-wrapper-filter-select\"\n [(ngModel)]=\"filters.stockFilter\"\n (change)=\"onFilterChange()\"\n >\n @for (option of config.stockOptions; track $index) {\n <option [value]=\"option.value\">{{ option.label }}</option>\n }\n </select>\n </div>\n }\n </div>\n }\n\n <!-- Pagination Controls -->\n @if (config.enablePagination && totalPages() > 1) {\n <div class=\"autocomplete-wrapper-pagination-header\">\n <div class=\"autocomplete-wrapper-pagination-info\">\n <span>P\u00E1gina {{ currentPage() }} de {{ totalPages() }}</span>\n </div>\n <div class=\"autocomplete-wrapper-pagination-controls\">\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToFirstPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>first_page</mat-icon>\n </button>\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <input\n type=\"number\"\n class=\"autocomplete-wrapper-page-input\"\n [value]=\"currentPage()\"\n [min]=\"1\"\n [max]=\"totalPages()\"\n (change)=\"goToPage($event)\"\n />\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToNextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToLastPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>last_page</mat-icon>\n </button>\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"autocomplete-wrapper-section-header\">\n <span class=\"autocomplete-wrapper-section-title\">{{ sectionTitle() }}</span>\n </div>\n }\n\n <!-- Items List -->\n @if (totalItems()) {\n <ul\n class=\"autocomplete-wrapper-items-list autocomplete-wrapper-scrollable-list\"\n #resultsListElement\n >\n @for (item of currentPageItems(); track $index) {\n <li class=\"autocomplete-wrapper-list-item autocomplete-wrapper-result-item\">\n <div\n class=\"autocomplete-wrapper-item-content\"\n [class.autocomplete-wrapper-selected]=\"$index === selectedIndex()\"\n tabindex=\"0\"\n (click)=\"selectItem(item)\"\n (keydown.enter)=\"selectItem(item)\"\n >\n <div class=\"autocomplete-wrapper-item-info\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate() || defaultItemTemplate;\n context: { $implicit: item }\n \"\n />\n </div>\n </div>\n </li>\n }\n </ul>\n }\n </div>\n }\n\n <!-- No Results -->\n @if (!isLoading() && isNoResults()) {\n <div class=\"autocomplete-wrapper-no-results\">\n <mat-icon class=\"autocomplete-wrapper-no-results-icon\">search_off</mat-icon>\n <div class=\"autocomplete-wrapper-no-results-content\">\n <ng-container\n *ngTemplateOutlet=\"\n notFoundTemplate() || defaultNotFoundTemplate;\n context: { $implicit: noResultsText() }\n \"\n />\n </div>\n </div>\n }\n\n <!-- Footer -->\n @if (overlayOpen() && totalItems() > 0) {\n <div class=\"autocomplete-wrapper-footer\">\n @if (!isHistoryVisible() && totalItems() > 0 && config.enablePagination) {\n <div class=\"autocomplete-wrapper-pagination-footer\">\n <div class=\"autocomplete-wrapper-pagination-summary\">\n Mostrando {{ startItem() }}-{{ endItem() }} de {{ totalCount() }} resultados\n </div>\n <div class=\"autocomplete-wrapper-pagination-controls-footer\">\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToPreviousPage()\"\n [disabled]=\"currentPage() === 1\"\n >\n <mat-icon>chevron_left</mat-icon>\n </button>\n <span class=\"autocomplete-wrapper-page-indicator\"\n >{{ currentPage() }} / {{ totalPages() }}</span\n >\n <button\n class=\"autocomplete-wrapper-pagination-button\"\n (click)=\"goToNextPage()\"\n [disabled]=\"currentPage() === totalPages()\"\n >\n <mat-icon>chevron_right</mat-icon>\n </button>\n </div>\n </div>\n } @if (config.enableFooterActions) {\n <div class=\"autocomplete-wrapper-footer-actions\">\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-create-button\"\n (click)=\"onCreateNew($event)\"\n >\n <mat-icon>add</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Crear</span>\n </button>\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-search-button\"\n (click)=\"onAdvancedSearch()\"\n >\n <mat-icon>tune</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Avanzada</span>\n </button>\n @if (!isHistoryVisible() && totalItems() > 0) {\n <button\n class=\"autocomplete-wrapper-footer-button autocomplete-wrapper-results-button\"\n (click)=\"onShowAllResults()\"\n >\n <mat-icon>list</mat-icon>\n <span class=\"autocomplete-wrapper-button-text\">Todos</span>\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Default Templates -->\n <ng-template #defaultItemTemplate let-item>\n <div class=\"autocomplete-wrapper-default-item\">\n <div class=\"autocomplete-wrapper-item-name\">{{ getItemDisplayText(item) }}</div>\n @if (item.description && typeof item === 'object') {\n <div class=\"autocomplete-wrapper-item-description\">{{ item.description }}</div>\n }\n </div>\n </ng-template>\n\n <ng-template #defaultNotFoundTemplate let-text>\n <div class=\"autocomplete-wrapper-default-no-results\">\n <p>{{ text }}</p>\n <p>Intenta con otros t\u00E9rminos de b\u00FAsqueda</p>\n </div>\n </ng-template>\n</div>\n", styles: [".acp-autocomplete-wrapper{display:block}.acp-autocomplete-wrapper{position:relative;width:100%;max-width:100%}.acp-autocomplete-wrapper.acp-autocomplete-wrapper-active .acp-autocomplete-wrapper-input-wrapper{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-input-container{position:relative;width:100%}.acp-autocomplete-wrapper-input-wrapper{position:relative;display:flex;align-items:center;background:var(--mat-sys-surface, white);border:1px solid var(--mat-sys-outline-variant, #e0e0e0);border-radius:8px;padding:0 12px;transition:all .3s ease}.acp-autocomplete-wrapper-input-wrapper:focus-within{border-color:#1976d2;box-shadow:0 0 0 2px #1976d21a}.acp-autocomplete-wrapper-search-icon{color:var(--mat-sys-on-surface-variant, #666);margin-right:8px;font-size:20px}.acp-autocomplete-wrapper-input-field{flex:1;border:none;outline:none;font-size:16px;padding:7px 0;background:transparent;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-input-field::placeholder{color:var(--mat-sys-on-surface-variant, #999)}.acp-autocomplete-wrapper-input-field:disabled{opacity:.6;cursor:not-allowed}.acp-autocomplete-wrapper-clear-button{margin-left:8px;color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-loading-spinner{position:absolute;right:12px;top:50%;transform:translateY(-50%)}.acp-autocomplete-wrapper-dropdown{background:var(--mat-sys-surface-container, white);border-radius:8px;box-shadow:0 4px 20px #00000026;border:1px solid var(--mat-sys-outline-variant, #e0e0e0);overflow:hidden;max-height:500px;min-width:300px;display:flex;flex-direction:column}.acp-autocomplete-wrapper-dropdown.acp-autocomplete-wrapper-active{animation:reusableAutocompleteSlideIn .2s ease-out}@keyframes reusableAutocompleteSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.acp-autocomplete-wrapper-dropdown-content{display:flex;flex-direction:column;height:100%;max-height:500px}.acp-autocomplete-wrapper-section{display:flex;flex-direction:column;height:100%;min-height:0}.acp-autocomplete-wrapper-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;min-height:56px;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-section-title{font-size:13px;font-weight:500;color:var(--mat-sys-on-surface-variant, #666);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.acp-autocomplete-wrapper-clear-history-button{color:var(--mat-sys-on-surface-variant, #666);background:none;border:none;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.acp-autocomplete-wrapper-clear-history-button:hover{background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-filter-controls{display:flex;align-items:center;gap:16px;flex:1;justify-content:center}.acp-autocomplete-wrapper-filter-group{display:flex;align-items:center;gap:6px}.acp-autocomplete-wrapper-filter-label{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);font-weight:500;white-space:nowrap}.acp-autocomplete-wrapper-filter-select{padding:4px 8px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;font-size:12px;background:var(--mat-sys-surface, white);color:var(--mat-sys-on-surface, #333);cursor:pointer;min-width:120px}.acp-autocomplete-wrapper-filter-select:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 1px #1976d233}.acp-autocomplete-wrapper-filter-select:hover{border-color:#bbb}.acp-autocomplete-wrapper-pagination-header{display:flex;align-items:center;gap:12px;margin-left:auto}.acp-autocomplete-wrapper-pagination-info{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls{display:flex;align-items:center;gap:4px}.acp-autocomplete-wrapper-pagination-button{min-width:32px;height:32px;line-height:32px;padding:0;color:var(--mat-sys-on-surface-variant, #666);background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.acp-autocomplete-wrapper-pagination-button:hover:not(:disabled){background-color:#0000000a;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-pagination-button:disabled{opacity:.5;cursor:not-allowed}.acp-autocomplete-wrapper-pagination-button mat-icon{font-size:18px;width:18px;height:18px}.acp-autocomplete-wrapper-page-input{width:50px;height:32px;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;text-align:center;font-size:12px;padding:4px;margin:0 4px}.acp-autocomplete-wrapper-page-input:focus{outline:none;border-color:#1976d2}.acp-autocomplete-wrapper-items-list{list-style:none;margin:0;padding:0;flex:1;min-height:0}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{overflow-y:auto}.acp-autocomplete-wrapper-list-item{display:flex;align-items:center;border-bottom:1px solid var(--mat-sys-outline-variant, #f5f5f5);transition:background-color .2s ease}.acp-autocomplete-wrapper-list-item:last-child{border-bottom:none}.acp-autocomplete-wrapper-list-item:hover{background-color:var(--mat-sys-surface-variant, #f8f9fa)}.acp-autocomplete-wrapper-item-content{flex:1;display:flex;align-items:center;padding:12px 16px;cursor:pointer;min-height:48px;transition:all .2s ease}.acp-autocomplete-wrapper-item-content.acp-autocomplete-wrapper-selected{background-color:var(--mat-sys-primary-container, #e3f2fd);color:var(--mat-sys-on-primary-container, #1976d2)}.acp-autocomplete-wrapper-history-item .acp-autocomplete-wrapper-item-content{padding-left:12px}.acp-autocomplete-wrapper-history-icon{color:var(--mat-sys-on-surface-variant, #999);margin-right:12px;font-size:18px}.acp-autocomplete-wrapper-item-details{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-remove-button{margin-right:8px}.acp-autocomplete-wrapper-result-item{position:relative}.acp-autocomplete-wrapper-item-info{flex:1;display:flex;align-items:center}.acp-autocomplete-wrapper-default-item{flex:1}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-name{font-weight:500;font-size:14px;margin-bottom:2px;color:var(--mat-sys-on-surface, #333)}.acp-autocomplete-wrapper-default-item .acp-autocomplete-wrapper-item-description{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acp-autocomplete-wrapper-no-results{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center;color:var(--mat-sys-on-surface-variant, #666)}.acp-autocomplete-wrapper-no-results-icon{font-size:48px;color:var(--mat-sys-outline, #ccc);margin-bottom:16px;width:45px;height:45px}.acp-autocomplete-wrapper-no-results-content{font-size:14px;line-height:1.5}.acp-autocomplete-wrapper-default-no-results{text-align:center}.acp-autocomplete-wrapper-default-no-results p:first-child{font-weight:500;margin-bottom:8px}.acp-autocomplete-wrapper-footer{border-top:1px solid var(--mat-sys-outline-variant, #f0f0f0);background:var(--mat-sys-surface-variant, #fafafa);flex-shrink:0;padding:12px 16px;display:flex;flex-direction:column;gap:12px}.acp-autocomplete-wrapper-pagination-footer{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px}.acp-autocomplete-wrapper-pagination-summary{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);white-space:nowrap}.acp-autocomplete-wrapper-pagination-controls-footer{display:flex;align-items:center;gap:8px}.acp-autocomplete-wrapper-page-indicator{font-size:12px;color:var(--mat-sys-on-surface-variant, #666);min-width:40px;text-align:center}.acp-autocomplete-wrapper-footer-actions{display:flex;gap:8px;flex-wrap:wrap}.acp-autocomplete-wrapper-footer-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;font-size:13px;text-transform:none;white-space:nowrap;background:none;border:1px solid var(--mat-sys-outline, #ddd);border-radius:4px;cursor:pointer;padding:8px 12px;transition:all .2s ease}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button{background-color:#4caf500a;border-color:#4caf50;color:#4caf50}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-create-button:hover{background-color:#4caf5014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button{background-color:#ff98000a;border-color:#ff9800;color:#ff9800}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-search-button:hover{background-color:#ff980014}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button{background-color:#3f51b50a;border-color:#3f51b5;color:#3f51b5}.acp-autocomplete-wrapper-footer-button.acp-autocomplete-wrapper-results-button:hover{background-color:#3f51b514}.acp-autocomplete-wrapper-button-text{display:inline}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar{width:6px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-track{background:var(--mat-sys-surface-variant, #f1f1f1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb{background:var(--mat-sys-outline, #c1c1c1);border-radius:3px}.acp-autocomplete-wrapper-items-list::-webkit-scrollbar-thumb:hover{background:var(--mat-sys-on-surface-variant, #a8a8a8)}@media(max-width:768px){.acp-autocomplete-wrapper-dropdown{min-width:280px;max-height:60vh}.acp-autocomplete-wrapper-dropdown-content{max-height:60vh}.acp-autocomplete-wrapper-input-field{font-size:16px}.acp-autocomplete-wrapper-footer{padding:8px 12px}.acp-autocomplete-wrapper-footer-actions{flex-direction:column;gap:6px}.acp-autocomplete-wrapper-footer-button{width:100%;min-height:44px}.acp-autocomplete-wrapper-pagination-footer{flex-direction:column;gap:8px}.acp-autocomplete-wrapper-section-header{flex-direction:column;align-items:flex-start;min-height:80px;gap:8px}.acp-autocomplete-wrapper-filter-controls{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:12px}.acp-autocomplete-wrapper-filter-select{min-width:100px;font-size:11px}.acp-autocomplete-wrapper-filter-label{font-size:11px}.acp-autocomplete-wrapper-pagination-header{width:100%;justify-content:space-between}.acp-autocomplete-wrapper-pagination-header .acp-autocomplete-wrapper-pagination-info{display:none}.acp-autocomplete-wrapper-pagination-controls{gap:2px}.acp-autocomplete-wrapper-page-input{width:40px}.acp-autocomplete-wrapper-item-content{padding:16px 12px;min-height:52px}.acp-autocomplete-wrapper-button-text{font-size:12px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:250px}}@media(max-width:480px){.acp-autocomplete-wrapper-dropdown{min-width:260px;max-height:50vh}.acp-autocomplete-wrapper-section-header{padding:8px 12px 6px;min-height:70px;gap:6px}.acp-autocomplete-wrapper-filter-controls{gap:8px}.acp-autocomplete-wrapper-filter-group{gap:4px}.acp-autocomplete-wrapper-filter-select{min-width:90px;padding:3px 6px}.acp-autocomplete-wrapper-item-content{padding:14px 12px}.acp-autocomplete-wrapper-pagination-header{gap:8px}.acp-autocomplete-wrapper-pagination-button{min-width:28px;height:28px}.acp-autocomplete-wrapper-page-input{width:35px;height:28px}.acp-autocomplete-wrapper-items-list.acp-autocomplete-wrapper-scrollable-list{max-height:200px}.acp-autocomplete-wrapper-footer-actions{gap:4px}.acp-autocomplete-wrapper-footer-button{font-size:12px;padding:8px 12px;min-height:40px}.acp-autocomplete-wrapper-button-text{display:none}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
2100
2353
|
}
|
|
2101
2354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ReusableAutocompleteComponent, decorators: [{
|
|
2102
2355
|
type: Component,
|
|
@@ -2590,7 +2843,7 @@ class DataGridCell {
|
|
|
2590
2843
|
}
|
|
2591
2844
|
}
|
|
2592
2845
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataGridCell, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2593
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DataGridCell, isStandalone: true, selector: "acp-data-grid-cell", inputs: { rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null }, colDef: { classPropertyName: "colDef", publicName: "colDef", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDataChange: "rowDataChange" }, ngImport: i0, template: "@if (summary()) {\n<span\n [title]=\"_getFormatterTooltip(data() | cellSummary: colDef())\"\n [innerHTML]=\"_getText(data() | cellSummary: colDef())\"\n>\n</span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef().formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef().formatter(rowData(), colDef()))\"\n [innerHTML]=\"_getText(colDef().formatter(rowData(), colDef()))\"\n>\n</span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef().type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef().buttons | cellActions: rowData() : rowChangeRecord :\nrowChangeRecord?.currentValue; track btn ) { @if (!btn.iif || btn.iif(rowData())) { @if\n(btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData()\n : rowChangeRecord\n : rowChangeRecord?.currentValue\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n</button>\n\n<acp-data-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData()\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData()\n : rowChangeRecord\n : rowChangeRecord?.currentValue\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-data-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData()\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData()\n : rowChangeRecord\n : rowChangeRecord?.currentValue\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData())\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData()\n : rowChangeRecord\n : rowChangeRecord?.currentValue\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData())\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef().tag && colDef().tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef().tag[_value].color\">\n {{ colDef().tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"placeholder-box\">\n <svg class=\"placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value | number: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n )\n \"\n>\n {{ _getText( _value | number: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : colDef().typeParameter?.currencyCode\n : colDef().typeParameter?.display\n : colDef().typeParameter?.digitsInfo\n : colDef().typeParameter?.locale\n )\n \"\n>\n {{ _getText( _value | currency : colDef().typeParameter?.currencyCode :\n colDef().typeParameter?.display : colDef().typeParameter?.digitsInfo :\n colDef().typeParameter?.locale ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value | percent: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n )\n \"\n>\n {{ _getText( _value | percent: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : colDef().typeParameter?.format\n : colDef().typeParameter?.timezone\n : colDef().typeParameter?.locale\n )\n \"\n>\n {{ _getText( _value | date : colDef().typeParameter?.format : colDef().typeParameter?.timezone :\n colDef().typeParameter?.locale ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\" />\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\" />\n }\n</ng-template>\n", styles: [".placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#6b7280;font-size:.85rem;gap:8px}.placeholder-icon{width:32px;height:32px;color:#3b82f6}.placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i3$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DataGridMenu, selector: "acp-data-grid-menu", inputs: ["items", "data"], exportAs: ["acpDataGridMenu"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "pipe", type: DataGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: DataGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: DataGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: DataGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DataGridCellActionBadgePipe, name: "cellActionBadge" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2846
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DataGridCell, isStandalone: true, selector: "acp-data-grid-cell", inputs: { rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null }, colDef: { classPropertyName: "colDef", publicName: "colDef", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDataChange: "rowDataChange" }, ngImport: i0, template: "@if (summary()) {\n<span\n [title]=\"_getFormatterTooltip(data() | cellSummary: colDef())\"\n [innerHTML]=\"_getText(data() | cellSummary: colDef())\"\n>\n</span>\n} @else {\n<!-- Custom formatting -->\n@if (colDef().formatter) {\n<span\n [title]=\"_getFormatterTooltip(colDef().formatter(rowData(), colDef()))\"\n [innerHTML]=\"_getText(colDef().formatter(rowData(), colDef()))\"\n>\n</span>\n} @else {\n<!-- Default formatting -->\n@switch (colDef().type) {\n<!-- Buttons -->\n@case ('button') { @for ( btn of colDef().buttons | cellActions: rowData() : rowChangeRecord :\nrowChangeRecord?.currentValue; track btn ) { @if (!btn.iif || btn.iif(rowData())) { @if\n(btn.children && btn.children.length > 0) { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData()\n : rowChangeRecord\n : rowChangeRecord?.currentValue\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n</button>\n\n<acp-data-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData()\" />\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData()\n : rowChangeRecord\n : rowChangeRecord?.currentValue\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n [matMenuTriggerFor]=\"\n btn.children && btn.children.length > 0 ? gridMenu.menu : null\n \"\n (click)=\"$event.stopPropagation()\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n\n<acp-data-grid-menu #gridMenu [items]=\"btn.children || []\" [data]=\"rowData()\" />\n} } @else { @if (btn.type === 'icon') {\n<button\n matIconButton\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData()\n : rowChangeRecord\n : rowChangeRecord?.currentValue\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData())\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n</button>\n} @else {\n<button\n [matButton]=\"btn.type || 'text'\"\n [color]=\"btn.color || 'primary'\"\n type=\"button\"\n class=\"acp-grid-action-button\"\n [class]=\"btn.class\"\n [disabled]=\"\n btn\n | cellActionDisable\n : rowData()\n : rowChangeRecord\n : rowChangeRecord?.currentValue\n \"\n [matTooltip]=\"(btn | cellActionTooltip).message | toObservable | async\"\n [matTooltipClass]=\"(btn | cellActionTooltip).class\"\n [matTooltipHideDelay]=\"(btn | cellActionTooltip).hideDelay\"\n [matTooltipShowDelay]=\"(btn | cellActionTooltip).showDelay\"\n [matTooltipPosition]=\"(btn | cellActionTooltip).position || 'below'\"\n [matTooltipPositionAtOrigin]=\"(btn | cellActionTooltip).positionAtOrigin\"\n [matTooltipTouchGestures]=\"(btn | cellActionTooltip).touchGestures || 'auto'\"\n [matTooltipDisabled]=\"(btn | cellActionTooltip).disabled\"\n [matBadge]=\"(btn | cellActionBadge).content | toObservable | async\"\n [matBadgeDescription]=\"(btn | cellActionBadge).description | toObservable | async\"\n [matBadgeColor]=\"(btn | cellActionBadge).color\"\n [matBadgePosition]=\"(btn | cellActionBadge).position || 'above after'\"\n [matBadgeSize]=\"(btn | cellActionBadge).size || 'medium'\"\n [matBadgeOverlap]=\"(btn | cellActionBadge).overlap\"\n [matBadgeDisabled]=\"(btn | cellActionBadge).disabled\"\n [matBadgeHidden]=\"(btn | cellActionBadge).hidden\"\n (click)=\"_onActionClick($event, btn, rowData())\"\n>\n <mat-icon *ngTemplateOutlet=\"iconTpl; context: { $implicit: btn }\" />\n <span>{{ btn.text | toObservable | async }}</span>\n</button>\n} } } } }\n<!-- Tag -->\n@case ('tag') { @if (colDef().tag && colDef().tag[_value]) {\n<mat-chip-listbox>\n <mat-chip color=\"primary\" [class]=\"'bg-' + colDef().tag[_value].color\">\n {{ colDef().tag[_value].text }}\n </mat-chip>\n</mat-chip-listbox>\n} @else { {{ _value }} } }\n<!-- Link -->\n@case ('link') {\n<a [href]=\"_value\" target=\"_blank\">{{ _value }}</a>\n}\n<!-- Image -->\n@case ('image') { @if (_value) {\n<!-- Imagen real -->\n<img class=\"placeholder-image\" [src]=\"_value\" alt=\"img\" />\n} @else {\n<!-- Placeholder -->\n<div class=\"placeholder-box\">\n <svg class=\"placeholder-icon\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L15 14m-12 5h16a1 1 0 001-1V5a1 1 0 00-1-1H3a1 1 0 00-1 1v14a1 1 0 001 1z\"\n />\n </svg>\n</div>\n} }\n<!-- Boolean -->\n@case ('boolean') {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n}\n<!-- Number -->\n@case ('number') {\n<span\n [title]=\"\n _getTooltip(\n _value | number: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n )\n \"\n>\n {{ _getText( _value | number: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n ) }}\n</span>\n}\n<!-- Currency -->\n@case ('currency') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | currency\n : colDef().typeParameter?.currencyCode\n : colDef().typeParameter?.display\n : colDef().typeParameter?.digitsInfo\n : colDef().typeParameter?.locale\n )\n \"\n>\n {{ _getText( _value | currency : colDef().typeParameter?.currencyCode :\n colDef().typeParameter?.display : colDef().typeParameter?.digitsInfo :\n colDef().typeParameter?.locale ) }}\n</span>\n}\n<!-- Percent -->\n@case ('percent') {\n<span\n [title]=\"\n _getTooltip(\n _value | percent: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n )\n \"\n>\n {{ _getText( _value | percent: colDef().typeParameter?.digitsInfo : colDef().typeParameter?.locale\n ) }}\n</span>\n}\n<!-- Date -->\n@case ('date') {\n<span\n [title]=\"\n _getTooltip(\n _value\n | date\n : colDef().typeParameter?.format\n : colDef().typeParameter?.timezone\n : colDef().typeParameter?.locale\n )\n \"\n>\n {{ _getText( _value | date : colDef().typeParameter?.format : colDef().typeParameter?.timezone :\n colDef().typeParameter?.locale ) }}\n</span>\n}\n<!-- Default -->\n@default {\n<span [title]=\"_getTooltip(_value)\">{{ _getText(_value) }}</span>\n} } } }\n\n<ng-template #iconTpl let-btn>\n @if (btn.icon) {\n <mat-icon class=\"acp-grid-icon\">{{ btn.icon }}</mat-icon>\n } @else if (btn.fontIcon) {\n <mat-icon class=\"acp-grid-icon\" [fontIcon]=\"btn.fontIcon\" />\n } @else if (btn.svgIcon) {\n <mat-icon class=\"acp-grid-icon\" [svgIcon]=\"btn.svgIcon\" />\n }\n</ng-template>\n", styles: [".placeholder-box{width:50px;height:50px;background:#f0f0f0;border:2px dashed #c2c2c2;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#6b7280;font-size:.85rem;gap:8px}.placeholder-icon{width:32px;height:32px;color:#3b82f6}.placeholder-image{width:50px;height:50px;object-fit:cover;border-radius:50%;box-shadow:0 4px 8px #0000001a}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i1$3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i3$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DataGridMenu, selector: "acp-data-grid-menu", inputs: ["items", "data"], exportAs: ["acpDataGridMenu"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "pipe", type: DataGridCellSummaryPipe, name: "cellSummary" }, { kind: "pipe", type: DataGridCellActionsPipe, name: "cellActions" }, { kind: "pipe", type: DataGridCellActionDisablePipe, name: "cellActionDisable" }, { kind: "pipe", type: DataGridCellActionTooltipPipe, name: "cellActionTooltip" }, { kind: "pipe", type: AcpToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DataGridCellActionBadgePipe, name: "cellActionBadge" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: PercentPipe, name: "percent" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2594
2847
|
}
|
|
2595
2848
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DataGridCell, decorators: [{
|
|
2596
2849
|
type: Component,
|
|
@@ -3361,59 +3614,6 @@ function formatDateToString(date) {
|
|
|
3361
3614
|
COMPONENT
|
|
3362
3615
|
============================ */
|
|
3363
3616
|
class DateRangePicker {
|
|
3364
|
-
/* ============================
|
|
3365
|
-
MAT FORM FIELD
|
|
3366
|
-
============================ */
|
|
3367
|
-
static nextId = 0;
|
|
3368
|
-
id = `acp-date-range-picker-${DateRangePicker.nextId++}`;
|
|
3369
|
-
controlType = 'acp-date-range-picker';
|
|
3370
|
-
stateChanges = new Subject();
|
|
3371
|
-
autofilled = false;
|
|
3372
|
-
dateInput;
|
|
3373
|
-
_focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : []));
|
|
3374
|
-
_required = signal(false, ...(ngDevMode ? [{ debugName: "_required" }] : []));
|
|
3375
|
-
_value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
|
|
3376
|
-
get focused() {
|
|
3377
|
-
return this._focused();
|
|
3378
|
-
}
|
|
3379
|
-
get empty() {
|
|
3380
|
-
return !this._value();
|
|
3381
|
-
}
|
|
3382
|
-
get shouldLabelFloat() {
|
|
3383
|
-
return this.focused || !this.empty;
|
|
3384
|
-
}
|
|
3385
|
-
get required() {
|
|
3386
|
-
return this._required();
|
|
3387
|
-
}
|
|
3388
|
-
_errorState = false;
|
|
3389
|
-
get errorState() {
|
|
3390
|
-
return this._errorState;
|
|
3391
|
-
}
|
|
3392
|
-
get value() {
|
|
3393
|
-
return this._value();
|
|
3394
|
-
}
|
|
3395
|
-
set value(val) {
|
|
3396
|
-
this._value.set(val);
|
|
3397
|
-
this.stateChanges.next();
|
|
3398
|
-
}
|
|
3399
|
-
get placeholder() {
|
|
3400
|
-
return this.placeholderText();
|
|
3401
|
-
}
|
|
3402
|
-
get disabled() {
|
|
3403
|
-
return this.isDisabled();
|
|
3404
|
-
}
|
|
3405
|
-
ngControl = null;
|
|
3406
|
-
setDescribedByIds(_ids) {
|
|
3407
|
-
// Implementation for accessibility
|
|
3408
|
-
}
|
|
3409
|
-
onContainerClick() {
|
|
3410
|
-
this.focus();
|
|
3411
|
-
}
|
|
3412
|
-
focus() {
|
|
3413
|
-
this.dateInput.nativeElement.focus();
|
|
3414
|
-
this._focused.set(true);
|
|
3415
|
-
this.stateChanges.next();
|
|
3416
|
-
}
|
|
3417
3617
|
/* ============================
|
|
3418
3618
|
INPUTS
|
|
3419
3619
|
============================ */
|
|
@@ -3421,18 +3621,26 @@ class DateRangePicker {
|
|
|
3421
3621
|
placeholderText = input('Seleccionar rango de fechas', ...(ngDevMode ? [{ debugName: "placeholderText" }] : []));
|
|
3422
3622
|
isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
3423
3623
|
inputReadonly = input(false, ...(ngDevMode ? [{ debugName: "inputReadonly" }] : []));
|
|
3424
|
-
label = input(...(ngDevMode ? [
|
|
3425
|
-
hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : []));
|
|
3426
|
-
errorMessage = input(...(ngDevMode ? [undefined, { debugName: "errorMessage" }] : []));
|
|
3624
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
3427
3625
|
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
3428
3626
|
formatOutputAsString = input(true, ...(ngDevMode ? [{ debugName: "formatOutputAsString" }] : []));
|
|
3429
3627
|
calendarIcon = input('date_range', ...(ngDevMode ? [{ debugName: "calendarIcon" }] : []));
|
|
3430
3628
|
showCalendarButton = input(false, ...(ngDevMode ? [{ debugName: "showCalendarButton" }] : []));
|
|
3431
3629
|
showCheckbox = input(false, ...(ngDevMode ? [{ debugName: "showCheckbox" }] : []));
|
|
3432
3630
|
checkboxChecked = model(false, ...(ngDevMode ? [{ debugName: "checkboxChecked" }] : []));
|
|
3433
|
-
checkboxReadonly = input(false, ...(ngDevMode ? [{ debugName: "checkboxReadonly" }] : []));
|
|
3434
|
-
checkboxAriaLabel = input('Toggle selection', ...(ngDevMode ? [{ debugName: "checkboxAriaLabel" }] : []));
|
|
3435
3631
|
checkboxPosition = input('suffix', ...(ngDevMode ? [{ debugName: "checkboxPosition" }] : []));
|
|
3632
|
+
// NgxDatex specific inputs
|
|
3633
|
+
singleDatePicker = input(false, ...(ngDevMode ? [{ debugName: "singleDatePicker" }] : []));
|
|
3634
|
+
timePicker = input(false, ...(ngDevMode ? [{ debugName: "timePicker" }] : []));
|
|
3635
|
+
timePicker24Hour = input(true, ...(ngDevMode ? [{ debugName: "timePicker24Hour" }] : []));
|
|
3636
|
+
timePickerSeconds = input(false, ...(ngDevMode ? [{ debugName: "timePickerSeconds" }] : []));
|
|
3637
|
+
timePickerIncrement = input(1, ...(ngDevMode ? [{ debugName: "timePickerIncrement" }] : []));
|
|
3638
|
+
autoApply = input(false, ...(ngDevMode ? [{ debugName: "autoApply" }] : []));
|
|
3639
|
+
showDropdowns = input(false, ...(ngDevMode ? [{ debugName: "showDropdowns" }] : []));
|
|
3640
|
+
linkedCalendars = input(true, ...(ngDevMode ? [{ debugName: "linkedCalendars" }] : []));
|
|
3641
|
+
alwaysShowCalendars = input(false, ...(ngDevMode ? [{ debugName: "alwaysShowCalendars" }] : []));
|
|
3642
|
+
minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
3643
|
+
maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
|
|
3436
3644
|
/* ============================
|
|
3437
3645
|
OUTPUTS
|
|
3438
3646
|
============================ */
|
|
@@ -3445,27 +3653,44 @@ class DateRangePicker {
|
|
|
3445
3653
|
/* ============================
|
|
3446
3654
|
INTERNAL
|
|
3447
3655
|
============================ */
|
|
3448
|
-
|
|
3656
|
+
dateRangeValue = null;
|
|
3657
|
+
predefinedRanges = {};
|
|
3658
|
+
locale = SPANISH_LOCALE;
|
|
3659
|
+
theme = MATERIAL_LIGHT_THEME;
|
|
3449
3660
|
currentDate = new Date();
|
|
3661
|
+
stateChanges = new Subject();
|
|
3450
3662
|
onChange = (_value) => {
|
|
3451
3663
|
// This will be replaced by registerOnChange
|
|
3452
3664
|
};
|
|
3453
3665
|
onTouched = () => {
|
|
3454
3666
|
// This will be replaced by registerOnTouched
|
|
3455
3667
|
};
|
|
3668
|
+
/* ============================
|
|
3669
|
+
COMPUTED PROPERTIES
|
|
3670
|
+
============================ */
|
|
3671
|
+
effectiveMinDate = signal(null, ...(ngDevMode ? [{ debugName: "effectiveMinDate" }] : []));
|
|
3672
|
+
effectiveMaxDate = signal(null, ...(ngDevMode ? [{ debugName: "effectiveMaxDate" }] : []));
|
|
3673
|
+
get minDateForTemplate() {
|
|
3674
|
+
const minDate = this.effectiveMinDate();
|
|
3675
|
+
return minDate || null;
|
|
3676
|
+
}
|
|
3677
|
+
get maxDateForTemplate() {
|
|
3678
|
+
const maxDate = this.effectiveMaxDate();
|
|
3679
|
+
return maxDate || null;
|
|
3680
|
+
}
|
|
3456
3681
|
/* ============================
|
|
3457
3682
|
LIFECYCLE
|
|
3458
3683
|
============================ */
|
|
3459
3684
|
ngOnInit() {
|
|
3460
|
-
this.
|
|
3685
|
+
this.initializeConfiguration();
|
|
3461
3686
|
}
|
|
3462
3687
|
ngOnChanges(changes) {
|
|
3463
|
-
if (changes['options']
|
|
3464
|
-
|
|
3688
|
+
if (changes['options'] || changes['minDate'] || changes['maxDate']) {
|
|
3689
|
+
console.log('options changes');
|
|
3690
|
+
this.initializeConfiguration();
|
|
3465
3691
|
}
|
|
3466
3692
|
}
|
|
3467
3693
|
ngOnDestroy() {
|
|
3468
|
-
this.picker?.remove();
|
|
3469
3694
|
this.stateChanges.complete();
|
|
3470
3695
|
}
|
|
3471
3696
|
/* ============================
|
|
@@ -3476,43 +3701,18 @@ class DateRangePicker {
|
|
|
3476
3701
|
? formatDateToString(date)
|
|
3477
3702
|
: date;
|
|
3478
3703
|
}
|
|
3479
|
-
|
|
3480
|
-
this.
|
|
3481
|
-
|
|
3482
|
-
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
};
|
|
3486
|
-
this._value.set(range);
|
|
3487
|
-
this.onChange(range);
|
|
3488
|
-
this.onTouched();
|
|
3489
|
-
this.dateRangeSelected.emit(range);
|
|
3490
|
-
this.stateChanges.next();
|
|
3491
|
-
});
|
|
3492
|
-
this.setupEventListeners();
|
|
3493
|
-
}
|
|
3494
|
-
reinitializePicker() {
|
|
3495
|
-
const value = this._value();
|
|
3496
|
-
this.picker?.remove();
|
|
3497
|
-
this.initializePicker();
|
|
3498
|
-
if (value) {
|
|
3499
|
-
this.writeValue(value);
|
|
3500
|
-
}
|
|
3501
|
-
}
|
|
3502
|
-
buildDatexOptions() {
|
|
3503
|
-
const opts = this.options();
|
|
3504
|
-
const userOptions = { ...opts };
|
|
3505
|
-
delete userOptions.presetTheme;
|
|
3506
|
-
return {
|
|
3507
|
-
startDate: this.currentDate,
|
|
3508
|
-
endDate: this.currentDate,
|
|
3509
|
-
locale: SPANISH_LOCALE,
|
|
3510
|
-
ranges: this.getDefaultRanges(),
|
|
3511
|
-
theme: this.getTheme(),
|
|
3512
|
-
...userOptions,
|
|
3513
|
-
};
|
|
3704
|
+
initializeConfiguration() {
|
|
3705
|
+
this.predefinedRanges = this.getDefaultRanges();
|
|
3706
|
+
this.locale = this.getLocale();
|
|
3707
|
+
this.theme = this.getTheme();
|
|
3708
|
+
this.effectiveMinDate.set(this.minDate());
|
|
3709
|
+
this.effectiveMaxDate.set(this.maxDate());
|
|
3514
3710
|
}
|
|
3515
3711
|
getDefaultRanges() {
|
|
3712
|
+
const opts = this.options();
|
|
3713
|
+
if (opts.ranges) {
|
|
3714
|
+
return opts.ranges;
|
|
3715
|
+
}
|
|
3516
3716
|
return {
|
|
3517
3717
|
Hoy: [this.currentDate, this.currentDate],
|
|
3518
3718
|
Ayer: [addDay(this.currentDate, -1), addDay(this.currentDate, -1)],
|
|
@@ -3528,41 +3728,72 @@ class DateRangePicker {
|
|
|
3528
3728
|
],
|
|
3529
3729
|
};
|
|
3530
3730
|
}
|
|
3731
|
+
getLocale() {
|
|
3732
|
+
const opts = this.options();
|
|
3733
|
+
return opts.locale ?? SPANISH_LOCALE;
|
|
3734
|
+
}
|
|
3531
3735
|
getTheme() {
|
|
3532
3736
|
const opts = this.options();
|
|
3533
|
-
|
|
3534
|
-
|
|
3535
|
-
|
|
3536
|
-
|
|
3537
|
-
|
|
3538
|
-
|
|
3539
|
-
|
|
3540
|
-
|
|
3541
|
-
|
|
3542
|
-
|
|
3543
|
-
|
|
3544
|
-
|
|
3545
|
-
|
|
3546
|
-
const input = this.dateInput.nativeElement;
|
|
3547
|
-
input.addEventListener('show.daterangepicker', () => this.pickerShow.emit());
|
|
3548
|
-
input.addEventListener('hide.daterangepicker', () => this.pickerHide.emit());
|
|
3549
|
-
input.addEventListener('apply.daterangepicker', () => this.pickerApply.emit());
|
|
3550
|
-
input.addEventListener('cancel.daterangepicker', () => this.pickerCancel.emit());
|
|
3551
|
-
input.addEventListener('focus', () => {
|
|
3552
|
-
this._focused.set(true);
|
|
3553
|
-
this.stateChanges.next();
|
|
3554
|
-
});
|
|
3555
|
-
input.addEventListener('blur', () => {
|
|
3556
|
-
this._focused.set(false);
|
|
3737
|
+
return opts.theme ?? MATERIAL_LIGHT_THEME;
|
|
3738
|
+
}
|
|
3739
|
+
/* ============================
|
|
3740
|
+
EVENT HANDLERS
|
|
3741
|
+
============================ */
|
|
3742
|
+
onDateChange(value) {
|
|
3743
|
+
if (value && value.startDate) {
|
|
3744
|
+
const range = {
|
|
3745
|
+
from: this.mapDate(value.startDate),
|
|
3746
|
+
to: this.mapDate(value.endDate || value.startDate),
|
|
3747
|
+
label: value.label,
|
|
3748
|
+
};
|
|
3749
|
+
this.onChange(range);
|
|
3557
3750
|
this.onTouched();
|
|
3558
|
-
this.
|
|
3559
|
-
}
|
|
3751
|
+
this.dateRangeSelected.emit(range);
|
|
3752
|
+
}
|
|
3753
|
+
else {
|
|
3754
|
+
this.onChange(null);
|
|
3755
|
+
this.onTouched();
|
|
3756
|
+
this.dateRangeSelected.emit(null);
|
|
3757
|
+
}
|
|
3758
|
+
}
|
|
3759
|
+
onRangeChange(range) {
|
|
3760
|
+
if (range.startDate) {
|
|
3761
|
+
const dateRange = {
|
|
3762
|
+
from: this.mapDate(range.startDate),
|
|
3763
|
+
to: this.mapDate(range.endDate || range.startDate),
|
|
3764
|
+
};
|
|
3765
|
+
this.onChange(dateRange);
|
|
3766
|
+
this.dateRangeSelected.emit(dateRange);
|
|
3767
|
+
}
|
|
3768
|
+
}
|
|
3769
|
+
onPickerShow() {
|
|
3770
|
+
this.pickerShow.emit();
|
|
3771
|
+
}
|
|
3772
|
+
onPickerHide() {
|
|
3773
|
+
this.pickerHide.emit();
|
|
3774
|
+
this.onTouched();
|
|
3775
|
+
}
|
|
3776
|
+
onCheckboxToggle(checked) {
|
|
3777
|
+
this.checkboxChecked.set(checked);
|
|
3778
|
+
this.checkboxChange.emit(checked);
|
|
3560
3779
|
}
|
|
3561
3780
|
/* ============================
|
|
3562
3781
|
CVA
|
|
3563
3782
|
============================ */
|
|
3564
3783
|
writeValue(value) {
|
|
3565
|
-
|
|
3784
|
+
if (value && value.from && value.to) {
|
|
3785
|
+
// Convert our DateRangeValue to NgxDatexValue format
|
|
3786
|
+
const startDate = typeof value.from === 'string' ? new Date(value.from) : value.from;
|
|
3787
|
+
const endDate = typeof value.to === 'string' ? new Date(value.to) : value.to;
|
|
3788
|
+
this.dateRangeValue = {
|
|
3789
|
+
startDate,
|
|
3790
|
+
endDate,
|
|
3791
|
+
label: value.label,
|
|
3792
|
+
};
|
|
3793
|
+
}
|
|
3794
|
+
else {
|
|
3795
|
+
this.dateRangeValue = null;
|
|
3796
|
+
}
|
|
3566
3797
|
}
|
|
3567
3798
|
registerOnChange(fn) {
|
|
3568
3799
|
this.onChange = fn;
|
|
@@ -3570,160 +3801,112 @@ class DateRangePicker {
|
|
|
3570
3801
|
registerOnTouched(fn) {
|
|
3571
3802
|
this.onTouched = fn;
|
|
3572
3803
|
}
|
|
3573
|
-
setDisabledState(
|
|
3574
|
-
|
|
3804
|
+
setDisabledState(_isDisabled) {
|
|
3805
|
+
// NgxDatex handles disabled state through the [disabled] input
|
|
3575
3806
|
}
|
|
3576
3807
|
/* ============================
|
|
3577
3808
|
UI API
|
|
3578
3809
|
============================ */
|
|
3579
3810
|
show() {
|
|
3580
|
-
|
|
3811
|
+
// NgxDatex handles show/hide through its own API
|
|
3581
3812
|
}
|
|
3582
3813
|
hide() {
|
|
3583
|
-
|
|
3814
|
+
// NgxDatex handles show/hide through its own API
|
|
3584
3815
|
}
|
|
3585
3816
|
toggle() {
|
|
3586
|
-
|
|
3587
|
-
}
|
|
3588
|
-
onCheckboxToggle(event) {
|
|
3589
|
-
if (!this.checkboxReadonly()) {
|
|
3590
|
-
this.checkboxChange.emit(event.checked);
|
|
3591
|
-
}
|
|
3817
|
+
// NgxDatex handles show/hide through its own API
|
|
3592
3818
|
}
|
|
3593
3819
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3594
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
3820
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: DateRangePicker, isStandalone: true, selector: "acp-date-range-picker", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholderText: { classPropertyName: "placeholderText", publicName: "placeholderText", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, inputReadonly: { classPropertyName: "inputReadonly", publicName: "inputReadonly", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, formatOutputAsString: { classPropertyName: "formatOutputAsString", publicName: "formatOutputAsString", isSignal: true, isRequired: false, transformFunction: null }, calendarIcon: { classPropertyName: "calendarIcon", publicName: "calendarIcon", isSignal: true, isRequired: false, transformFunction: null }, showCalendarButton: { classPropertyName: "showCalendarButton", publicName: "showCalendarButton", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, checkboxChecked: { classPropertyName: "checkboxChecked", publicName: "checkboxChecked", isSignal: true, isRequired: false, transformFunction: null }, checkboxPosition: { classPropertyName: "checkboxPosition", publicName: "checkboxPosition", isSignal: true, isRequired: false, transformFunction: null }, singleDatePicker: { classPropertyName: "singleDatePicker", publicName: "singleDatePicker", isSignal: true, isRequired: false, transformFunction: null }, timePicker: { classPropertyName: "timePicker", publicName: "timePicker", isSignal: true, isRequired: false, transformFunction: null }, timePicker24Hour: { classPropertyName: "timePicker24Hour", publicName: "timePicker24Hour", isSignal: true, isRequired: false, transformFunction: null }, timePickerSeconds: { classPropertyName: "timePickerSeconds", publicName: "timePickerSeconds", isSignal: true, isRequired: false, transformFunction: null }, timePickerIncrement: { classPropertyName: "timePickerIncrement", publicName: "timePickerIncrement", isSignal: true, isRequired: false, transformFunction: null }, autoApply: { classPropertyName: "autoApply", publicName: "autoApply", isSignal: true, isRequired: false, transformFunction: null }, showDropdowns: { classPropertyName: "showDropdowns", publicName: "showDropdowns", isSignal: true, isRequired: false, transformFunction: null }, linkedCalendars: { classPropertyName: "linkedCalendars", publicName: "linkedCalendars", isSignal: true, isRequired: false, transformFunction: null }, alwaysShowCalendars: { classPropertyName: "alwaysShowCalendars", publicName: "alwaysShowCalendars", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkboxChecked: "checkboxCheckedChange", dateRangeSelected: "dateRangeSelected", pickerShow: "pickerShow", pickerHide: "pickerHide", pickerApply: "pickerApply", pickerCancel: "pickerCancel", checkboxChange: "checkboxChange" }, providers: [
|
|
3595
3821
|
{
|
|
3596
3822
|
provide: NG_VALUE_ACCESSOR,
|
|
3597
3823
|
useExisting: forwardRef(() => DateRangePicker),
|
|
3598
3824
|
multi: true,
|
|
3599
3825
|
},
|
|
3600
|
-
|
|
3601
|
-
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
|
|
3605
|
-
|
|
3606
|
-
|
|
3607
|
-
|
|
3608
|
-
|
|
3609
|
-
|
|
3610
|
-
|
|
3611
|
-
|
|
3612
|
-
|
|
3613
|
-
|
|
3614
|
-
|
|
3615
|
-
|
|
3616
|
-
|
|
3617
|
-
|
|
3618
|
-
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
|
|
3623
|
-
|
|
3624
|
-
|
|
3625
|
-
|
|
3626
|
-
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
-
|
|
3631
|
-
|
|
3632
|
-
|
|
3633
|
-
|
|
3634
|
-
matSuffix
|
|
3635
|
-
[(ngModel)]="checkboxChecked"
|
|
3636
|
-
[disabled]="checkboxReadonly()"
|
|
3637
|
-
[aria-label]="checkboxAriaLabel()"
|
|
3638
|
-
(change)="onCheckboxToggle($event)"
|
|
3639
|
-
(click)="$event.stopPropagation()"
|
|
3640
|
-
></mat-checkbox>
|
|
3641
|
-
}
|
|
3642
|
-
|
|
3643
|
-
@if (hint()) {
|
|
3644
|
-
<mat-hint>{{ hint() }}</mat-hint>
|
|
3645
|
-
}
|
|
3646
|
-
|
|
3647
|
-
@if (errorState && errorMessage()) {
|
|
3648
|
-
<mat-error>{{ errorMessage() }}</mat-error>
|
|
3649
|
-
}
|
|
3650
|
-
</mat-form-field>
|
|
3651
|
-
`, isInline: true, styles: [".full-width{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
3826
|
+
], usesOnChanges: true, ngImport: i0, template: `
|
|
3827
|
+
<ngx-datex
|
|
3828
|
+
[(ngModel)]="dateRangeValue"
|
|
3829
|
+
[appearance]="appearance()"
|
|
3830
|
+
[label]="label()"
|
|
3831
|
+
[placeholder]="placeholderText()"
|
|
3832
|
+
[disabled]="isDisabled()"
|
|
3833
|
+
[readonly]="inputReadonly()"
|
|
3834
|
+
[locale]="locale"
|
|
3835
|
+
[theme]="theme"
|
|
3836
|
+
[ranges]="predefinedRanges"
|
|
3837
|
+
[singleDatePicker]="singleDatePicker()"
|
|
3838
|
+
[timePicker]="timePicker()"
|
|
3839
|
+
[timePicker24Hour]="timePicker24Hour()"
|
|
3840
|
+
[timePickerSeconds]="timePickerSeconds()"
|
|
3841
|
+
[timePickerIncrement]="timePickerIncrement()"
|
|
3842
|
+
[autoApply]="autoApply()"
|
|
3843
|
+
[showDropdowns]="showDropdowns()"
|
|
3844
|
+
[linkedCalendars]="linkedCalendars()"
|
|
3845
|
+
[alwaysShowCalendars]="alwaysShowCalendars()"
|
|
3846
|
+
[minDate]="minDateForTemplate"
|
|
3847
|
+
[maxDate]="maxDateForTemplate"
|
|
3848
|
+
[showCheckbox]="showCheckbox()"
|
|
3849
|
+
[checkboxChecked]="checkboxChecked()"
|
|
3850
|
+
[checkboxPosition]="checkboxPosition()"
|
|
3851
|
+
[calendarIcon]="calendarIcon()"
|
|
3852
|
+
[showCalendarIcon]="showCalendarButton()"
|
|
3853
|
+
(dateChange)="onDateChange($event)"
|
|
3854
|
+
(rangeChange)="onRangeChange($event)"
|
|
3855
|
+
(openEvent)="onPickerShow()"
|
|
3856
|
+
(closeEvent)="onPickerHide()"
|
|
3857
|
+
(checkboxChange)="onCheckboxToggle($event)"
|
|
3858
|
+
></ngx-datex>
|
|
3859
|
+
`, isInline: true, dependencies: [{ kind: "component", type: NgxDatex, selector: "ngx-datex", inputs: ["config", "locale", "theme", "appearance", "floatLabel", "label", "placeholder", "calendarIcon", "showCalendarIcon", "calendarIconPosition", "showCheckbox", "checkboxChecked", "checkboxPosition", "readonly", "disabled", "showHeader", "showFooter", "singleDatePicker", "autoApply", "showDropdowns", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "linkedCalendars", "autoUpdateInput", "alwaysShowCalendars", "showCustomRangeLabel", "startDate", "endDate", "minDate", "maxDate", "maxSpan", "showWeekNumbers", "showISOWeekNumbers", "buttonClasses", "applyButtonClasses", "cancelButtonClasses", "isInvalidDate", "isCustomDate", "minYear", "maxYear", "ranges", "opens", "drops", "headerTemplate", "footerTemplate", "dayTemplate", "ariaLabel", "ariaDescribedBy"], outputs: ["dateChange", "rangeChange", "openEvent", "closeEvent", "monthChange", "yearChange", "dateHover", "validationError", "checkboxChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
3652
3860
|
}
|
|
3653
3861
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DateRangePicker, decorators: [{
|
|
3654
3862
|
type: Component,
|
|
3655
|
-
args: [{
|
|
3656
|
-
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
|
|
3660
|
-
MatCheckboxModule,
|
|
3661
|
-
FormsModule,
|
|
3662
|
-
], providers: [
|
|
3863
|
+
args: [{
|
|
3864
|
+
selector: 'acp-date-range-picker',
|
|
3865
|
+
standalone: true,
|
|
3866
|
+
imports: [NgxDatex, FormsModule],
|
|
3867
|
+
providers: [
|
|
3663
3868
|
{
|
|
3664
3869
|
provide: NG_VALUE_ACCESSOR,
|
|
3665
3870
|
useExisting: forwardRef(() => DateRangePicker),
|
|
3666
3871
|
multi: true,
|
|
3667
3872
|
},
|
|
3668
|
-
|
|
3669
|
-
|
|
3670
|
-
|
|
3671
|
-
|
|
3672
|
-
|
|
3673
|
-
|
|
3674
|
-
|
|
3675
|
-
|
|
3676
|
-
|
|
3677
|
-
|
|
3678
|
-
|
|
3679
|
-
|
|
3680
|
-
|
|
3681
|
-
|
|
3682
|
-
|
|
3683
|
-
|
|
3684
|
-
|
|
3685
|
-
|
|
3686
|
-
|
|
3687
|
-
|
|
3688
|
-
|
|
3689
|
-
|
|
3690
|
-
|
|
3691
|
-
|
|
3692
|
-
|
|
3693
|
-
|
|
3694
|
-
|
|
3695
|
-
|
|
3696
|
-
|
|
3697
|
-
|
|
3698
|
-
|
|
3699
|
-
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
3703
|
-
|
|
3704
|
-
|
|
3705
|
-
matSuffix
|
|
3706
|
-
[(ngModel)]="checkboxChecked"
|
|
3707
|
-
[disabled]="checkboxReadonly()"
|
|
3708
|
-
[aria-label]="checkboxAriaLabel()"
|
|
3709
|
-
(change)="onCheckboxToggle($event)"
|
|
3710
|
-
(click)="$event.stopPropagation()"
|
|
3711
|
-
></mat-checkbox>
|
|
3712
|
-
}
|
|
3713
|
-
|
|
3714
|
-
@if (hint()) {
|
|
3715
|
-
<mat-hint>{{ hint() }}</mat-hint>
|
|
3716
|
-
}
|
|
3717
|
-
|
|
3718
|
-
@if (errorState && errorMessage()) {
|
|
3719
|
-
<mat-error>{{ errorMessage() }}</mat-error>
|
|
3720
|
-
}
|
|
3721
|
-
</mat-form-field>
|
|
3722
|
-
`, styles: [".full-width{width:100%}\n"] }]
|
|
3723
|
-
}], propDecorators: { dateInput: [{
|
|
3724
|
-
type: ViewChild,
|
|
3725
|
-
args: ['dateInput', { static: true }]
|
|
3726
|
-
}], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderText", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], inputReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputReadonly", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], formatOutputAsString: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOutputAsString", required: false }] }], calendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarIcon", required: false }] }], showCalendarButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarButton", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], checkboxChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxChecked", required: false }] }, { type: i0.Output, args: ["checkboxCheckedChange"] }], checkboxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxReadonly", required: false }] }], checkboxAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxAriaLabel", required: false }] }], checkboxPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxPosition", required: false }] }], dateRangeSelected: [{ type: i0.Output, args: ["dateRangeSelected"] }], pickerShow: [{ type: i0.Output, args: ["pickerShow"] }], pickerHide: [{ type: i0.Output, args: ["pickerHide"] }], pickerApply: [{ type: i0.Output, args: ["pickerApply"] }], pickerCancel: [{ type: i0.Output, args: ["pickerCancel"] }], checkboxChange: [{ type: i0.Output, args: ["checkboxChange"] }] } });
|
|
3873
|
+
],
|
|
3874
|
+
template: `
|
|
3875
|
+
<ngx-datex
|
|
3876
|
+
[(ngModel)]="dateRangeValue"
|
|
3877
|
+
[appearance]="appearance()"
|
|
3878
|
+
[label]="label()"
|
|
3879
|
+
[placeholder]="placeholderText()"
|
|
3880
|
+
[disabled]="isDisabled()"
|
|
3881
|
+
[readonly]="inputReadonly()"
|
|
3882
|
+
[locale]="locale"
|
|
3883
|
+
[theme]="theme"
|
|
3884
|
+
[ranges]="predefinedRanges"
|
|
3885
|
+
[singleDatePicker]="singleDatePicker()"
|
|
3886
|
+
[timePicker]="timePicker()"
|
|
3887
|
+
[timePicker24Hour]="timePicker24Hour()"
|
|
3888
|
+
[timePickerSeconds]="timePickerSeconds()"
|
|
3889
|
+
[timePickerIncrement]="timePickerIncrement()"
|
|
3890
|
+
[autoApply]="autoApply()"
|
|
3891
|
+
[showDropdowns]="showDropdowns()"
|
|
3892
|
+
[linkedCalendars]="linkedCalendars()"
|
|
3893
|
+
[alwaysShowCalendars]="alwaysShowCalendars()"
|
|
3894
|
+
[minDate]="minDateForTemplate"
|
|
3895
|
+
[maxDate]="maxDateForTemplate"
|
|
3896
|
+
[showCheckbox]="showCheckbox()"
|
|
3897
|
+
[checkboxChecked]="checkboxChecked()"
|
|
3898
|
+
[checkboxPosition]="checkboxPosition()"
|
|
3899
|
+
[calendarIcon]="calendarIcon()"
|
|
3900
|
+
[showCalendarIcon]="showCalendarButton()"
|
|
3901
|
+
(dateChange)="onDateChange($event)"
|
|
3902
|
+
(rangeChange)="onRangeChange($event)"
|
|
3903
|
+
(openEvent)="onPickerShow()"
|
|
3904
|
+
(closeEvent)="onPickerHide()"
|
|
3905
|
+
(checkboxChange)="onCheckboxToggle($event)"
|
|
3906
|
+
></ngx-datex>
|
|
3907
|
+
`,
|
|
3908
|
+
}]
|
|
3909
|
+
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholderText: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderText", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], inputReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputReadonly", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], formatOutputAsString: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatOutputAsString", required: false }] }], calendarIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarIcon", required: false }] }], showCalendarButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCalendarButton", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], checkboxChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxChecked", required: false }] }, { type: i0.Output, args: ["checkboxCheckedChange"] }], checkboxPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxPosition", required: false }] }], singleDatePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "singleDatePicker", required: false }] }], timePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePicker", required: false }] }], timePicker24Hour: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePicker24Hour", required: false }] }], timePickerSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePickerSeconds", required: false }] }], timePickerIncrement: [{ type: i0.Input, args: [{ isSignal: true, alias: "timePickerIncrement", required: false }] }], autoApply: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoApply", required: false }] }], showDropdowns: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropdowns", required: false }] }], linkedCalendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkedCalendars", required: false }] }], alwaysShowCalendars: [{ type: i0.Input, args: [{ isSignal: true, alias: "alwaysShowCalendars", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateRangeSelected: [{ type: i0.Output, args: ["dateRangeSelected"] }], pickerShow: [{ type: i0.Output, args: ["pickerShow"] }], pickerHide: [{ type: i0.Output, args: ["pickerHide"] }], pickerApply: [{ type: i0.Output, args: ["pickerApply"] }], pickerCancel: [{ type: i0.Output, args: ["pickerCancel"] }], checkboxChange: [{ type: i0.Output, args: ["checkboxChange"] }] } });
|
|
3727
3910
|
|
|
3728
3911
|
// Angular component
|
|
3729
3912
|
|
|
@@ -5439,6 +5622,309 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
5439
5622
|
}]
|
|
5440
5623
|
}] });
|
|
5441
5624
|
|
|
5625
|
+
class AlertDialog {
|
|
5626
|
+
inputField;
|
|
5627
|
+
container;
|
|
5628
|
+
componentRef = null;
|
|
5629
|
+
inputValue = '';
|
|
5630
|
+
validationError = null;
|
|
5631
|
+
timerProgress = 100;
|
|
5632
|
+
timerInterval;
|
|
5633
|
+
sanitizedHtml;
|
|
5634
|
+
sanitizedFooter = null;
|
|
5635
|
+
dialogRef = inject((MatDialogRef));
|
|
5636
|
+
data = inject(MAT_DIALOG_DATA);
|
|
5637
|
+
sanitizer = inject(DomSanitizer);
|
|
5638
|
+
environmentInjector = inject(EnvironmentInjector);
|
|
5639
|
+
constructor() {
|
|
5640
|
+
this.sanitizedHtml = this.sanitizer.bypassSecurityTrustHtml(this.data.html || '');
|
|
5641
|
+
}
|
|
5642
|
+
ngOnDestroy() {
|
|
5643
|
+
if (this.timerInterval) {
|
|
5644
|
+
clearInterval(this.timerInterval);
|
|
5645
|
+
}
|
|
5646
|
+
if (this.componentRef) {
|
|
5647
|
+
this.componentRef.destroy();
|
|
5648
|
+
}
|
|
5649
|
+
}
|
|
5650
|
+
// Start the timer for auto-closing the dialog
|
|
5651
|
+
startTimer() {
|
|
5652
|
+
if (!this.data.timer)
|
|
5653
|
+
return;
|
|
5654
|
+
const startTime = Date.now();
|
|
5655
|
+
const endTime = startTime + this.data.timer;
|
|
5656
|
+
this.timerInterval = setInterval(() => {
|
|
5657
|
+
const now = Date.now();
|
|
5658
|
+
const remaining = endTime - now;
|
|
5659
|
+
if (remaining <= 0) {
|
|
5660
|
+
clearInterval(this.timerInterval);
|
|
5661
|
+
this.dialogRef.close({
|
|
5662
|
+
isConfirmed: false,
|
|
5663
|
+
isDismissed: true,
|
|
5664
|
+
isDenied: false,
|
|
5665
|
+
dismiss: 'timer',
|
|
5666
|
+
});
|
|
5667
|
+
return;
|
|
5668
|
+
}
|
|
5669
|
+
this.timerProgress = (remaining / this.data.timer) * 100;
|
|
5670
|
+
}, 50);
|
|
5671
|
+
}
|
|
5672
|
+
// Load dynamic component
|
|
5673
|
+
loadComponent() {
|
|
5674
|
+
if (!this.data.component)
|
|
5675
|
+
return;
|
|
5676
|
+
this.container.clear();
|
|
5677
|
+
// Create the component using the view container's injector
|
|
5678
|
+
this.componentRef = createComponent(this.data.component, {
|
|
5679
|
+
environmentInjector: this.container.injector.get(EnvironmentInjector),
|
|
5680
|
+
});
|
|
5681
|
+
// Pass input properties to the dynamic component
|
|
5682
|
+
if (this.data.componentProps) {
|
|
5683
|
+
Object.keys(this.data.componentProps).forEach(key => {
|
|
5684
|
+
this.componentRef.instance[key] = this.data.componentProps[key];
|
|
5685
|
+
});
|
|
5686
|
+
}
|
|
5687
|
+
// Attach the view
|
|
5688
|
+
this.container.insert(this.componentRef.hostView);
|
|
5689
|
+
}
|
|
5690
|
+
ngOnInit() {
|
|
5691
|
+
if (this.data.component) {
|
|
5692
|
+
this.loadComponent();
|
|
5693
|
+
}
|
|
5694
|
+
if (this.data.timer) {
|
|
5695
|
+
this.startTimer();
|
|
5696
|
+
}
|
|
5697
|
+
if (this.data.footerHtml) {
|
|
5698
|
+
this.sanitizedFooter = this.sanitizer.bypassSecurityTrustHtml(this.data.footerHtml);
|
|
5699
|
+
}
|
|
5700
|
+
}
|
|
5701
|
+
getIconName() {
|
|
5702
|
+
if (this.data.icon) {
|
|
5703
|
+
return this.data.icon;
|
|
5704
|
+
}
|
|
5705
|
+
switch (this.data.type) {
|
|
5706
|
+
case 'success':
|
|
5707
|
+
return 'check_circle';
|
|
5708
|
+
case 'error':
|
|
5709
|
+
return 'error';
|
|
5710
|
+
case 'warning':
|
|
5711
|
+
return 'warning';
|
|
5712
|
+
case 'info':
|
|
5713
|
+
return 'info';
|
|
5714
|
+
case 'question':
|
|
5715
|
+
return 'help';
|
|
5716
|
+
default:
|
|
5717
|
+
return '';
|
|
5718
|
+
}
|
|
5719
|
+
}
|
|
5720
|
+
getButtonVariant(buttonType) {
|
|
5721
|
+
const variant = this.data[`${buttonType}ButtonVariant`];
|
|
5722
|
+
if (variant)
|
|
5723
|
+
return variant;
|
|
5724
|
+
// Default variants based on button type and alert type
|
|
5725
|
+
if (buttonType === 'confirm') {
|
|
5726
|
+
switch (this.data.type) {
|
|
5727
|
+
case 'success':
|
|
5728
|
+
return 'success';
|
|
5729
|
+
case 'error':
|
|
5730
|
+
return 'danger';
|
|
5731
|
+
case 'warning':
|
|
5732
|
+
return 'warning';
|
|
5733
|
+
case 'info':
|
|
5734
|
+
return 'info';
|
|
5735
|
+
case 'question':
|
|
5736
|
+
return 'primary';
|
|
5737
|
+
default:
|
|
5738
|
+
return 'primary';
|
|
5739
|
+
}
|
|
5740
|
+
}
|
|
5741
|
+
else if (buttonType === 'cancel') {
|
|
5742
|
+
return 'secondary';
|
|
5743
|
+
}
|
|
5744
|
+
else if (buttonType === 'deny') {
|
|
5745
|
+
return 'danger';
|
|
5746
|
+
}
|
|
5747
|
+
return 'primary';
|
|
5748
|
+
}
|
|
5749
|
+
getButtonIcon(buttonType) {
|
|
5750
|
+
const icon = this.data[`${buttonType}ButtonIcon`];
|
|
5751
|
+
if (icon)
|
|
5752
|
+
return icon;
|
|
5753
|
+
// Default icons based on button type
|
|
5754
|
+
switch (buttonType) {
|
|
5755
|
+
case 'confirm':
|
|
5756
|
+
return this.data.type === 'question' ? 'check' : '';
|
|
5757
|
+
case 'cancel':
|
|
5758
|
+
return 'close';
|
|
5759
|
+
case 'deny':
|
|
5760
|
+
return 'block';
|
|
5761
|
+
default:
|
|
5762
|
+
return '';
|
|
5763
|
+
}
|
|
5764
|
+
}
|
|
5765
|
+
getButtonStyle(buttonType) {
|
|
5766
|
+
const style = this.data[`${buttonType}ButtonStyle`];
|
|
5767
|
+
return style || 'elevated';
|
|
5768
|
+
}
|
|
5769
|
+
async onConfirm() {
|
|
5770
|
+
if (this.data.input && this.data.inputValidator) {
|
|
5771
|
+
const error = await Promise.resolve(this.data.inputValidator(this.inputValue));
|
|
5772
|
+
if (error) {
|
|
5773
|
+
this.validationError = error;
|
|
5774
|
+
return;
|
|
5775
|
+
}
|
|
5776
|
+
}
|
|
5777
|
+
if (this.data.preConfirm) {
|
|
5778
|
+
try {
|
|
5779
|
+
const result = await Promise.resolve(this.data.preConfirm(this.inputValue || undefined));
|
|
5780
|
+
this.dialogRef.close({
|
|
5781
|
+
isConfirmed: true,
|
|
5782
|
+
isDismissed: false,
|
|
5783
|
+
isDenied: false,
|
|
5784
|
+
value: result,
|
|
5785
|
+
});
|
|
5786
|
+
}
|
|
5787
|
+
catch (error) {
|
|
5788
|
+
console.error('Error in preConfirm:', error);
|
|
5789
|
+
}
|
|
5790
|
+
}
|
|
5791
|
+
else {
|
|
5792
|
+
this.dialogRef.close({
|
|
5793
|
+
isConfirmed: true,
|
|
5794
|
+
isDismissed: false,
|
|
5795
|
+
isDenied: false,
|
|
5796
|
+
value: this.inputValue || undefined,
|
|
5797
|
+
});
|
|
5798
|
+
}
|
|
5799
|
+
}
|
|
5800
|
+
onCancel() {
|
|
5801
|
+
this.dialogRef.close({
|
|
5802
|
+
isConfirmed: false,
|
|
5803
|
+
isDismissed: true,
|
|
5804
|
+
isDenied: false,
|
|
5805
|
+
dismiss: 'cancel',
|
|
5806
|
+
});
|
|
5807
|
+
}
|
|
5808
|
+
onDeny() {
|
|
5809
|
+
if (this.data.preDeny) {
|
|
5810
|
+
try {
|
|
5811
|
+
const result = this.data.preDeny(this.inputValue || undefined);
|
|
5812
|
+
if (result instanceof Promise) {
|
|
5813
|
+
result
|
|
5814
|
+
.then(() => {
|
|
5815
|
+
this.dialogRef.close({
|
|
5816
|
+
isConfirmed: false,
|
|
5817
|
+
isDismissed: false,
|
|
5818
|
+
isDenied: true,
|
|
5819
|
+
value: this.inputValue || undefined,
|
|
5820
|
+
});
|
|
5821
|
+
})
|
|
5822
|
+
.catch(error => {
|
|
5823
|
+
this.validationError = error instanceof Error ? error.message : String(error);
|
|
5824
|
+
});
|
|
5825
|
+
}
|
|
5826
|
+
else {
|
|
5827
|
+
this.dialogRef.close({
|
|
5828
|
+
isConfirmed: false,
|
|
5829
|
+
isDismissed: false,
|
|
5830
|
+
isDenied: true,
|
|
5831
|
+
value: this.inputValue || undefined,
|
|
5832
|
+
});
|
|
5833
|
+
}
|
|
5834
|
+
}
|
|
5835
|
+
catch (error) {
|
|
5836
|
+
this.validationError = error instanceof Error ? error.message : String(error);
|
|
5837
|
+
}
|
|
5838
|
+
}
|
|
5839
|
+
else {
|
|
5840
|
+
this.dialogRef.close({
|
|
5841
|
+
isConfirmed: false,
|
|
5842
|
+
isDismissed: false,
|
|
5843
|
+
isDenied: true,
|
|
5844
|
+
value: this.inputValue || undefined,
|
|
5845
|
+
});
|
|
5846
|
+
}
|
|
5847
|
+
}
|
|
5848
|
+
onInputEnter() {
|
|
5849
|
+
if (this.data.allowEnterKey !== false && this.data.input !== 'textarea') {
|
|
5850
|
+
this.onConfirm();
|
|
5851
|
+
}
|
|
5852
|
+
}
|
|
5853
|
+
closeWithResult(result) {
|
|
5854
|
+
this.dialogRef.close(result);
|
|
5855
|
+
}
|
|
5856
|
+
getConfirmColor() {
|
|
5857
|
+
if (!this.data.confirmButtonColor)
|
|
5858
|
+
return 'primary';
|
|
5859
|
+
if (['primary', 'accent', 'warn'].includes(this.data.confirmButtonColor)) {
|
|
5860
|
+
return this.data.confirmButtonColor;
|
|
5861
|
+
}
|
|
5862
|
+
return undefined;
|
|
5863
|
+
}
|
|
5864
|
+
getCancelColor() {
|
|
5865
|
+
if (!this.data.cancelButtonColor)
|
|
5866
|
+
return undefined;
|
|
5867
|
+
if (['primary', 'accent', 'warn'].includes(this.data.cancelButtonColor)) {
|
|
5868
|
+
return this.data.cancelButtonColor;
|
|
5869
|
+
}
|
|
5870
|
+
return undefined;
|
|
5871
|
+
}
|
|
5872
|
+
getDenyColor() {
|
|
5873
|
+
if (!this.data.denyButtonColor)
|
|
5874
|
+
return undefined;
|
|
5875
|
+
if (['primary', 'accent', 'warn'].includes(this.data.denyButtonColor)) {
|
|
5876
|
+
return this.data.denyButtonColor;
|
|
5877
|
+
}
|
|
5878
|
+
return undefined;
|
|
5879
|
+
}
|
|
5880
|
+
getConfirmBackgroundColor() {
|
|
5881
|
+
if (!this.data.confirmButtonColor)
|
|
5882
|
+
return undefined;
|
|
5883
|
+
if (['primary', 'accent', 'warn'].includes(this.data.confirmButtonColor)) {
|
|
5884
|
+
return undefined;
|
|
5885
|
+
}
|
|
5886
|
+
return this.data.confirmButtonColor;
|
|
5887
|
+
}
|
|
5888
|
+
getCancelBackgroundColor() {
|
|
5889
|
+
if (!this.data.cancelButtonColor)
|
|
5890
|
+
return undefined;
|
|
5891
|
+
if (['primary', 'accent', 'warn'].includes(this.data.cancelButtonColor)) {
|
|
5892
|
+
return undefined;
|
|
5893
|
+
}
|
|
5894
|
+
return this.data.cancelButtonColor;
|
|
5895
|
+
}
|
|
5896
|
+
getDenyBackgroundColor() {
|
|
5897
|
+
if (!this.data.denyButtonColor)
|
|
5898
|
+
return undefined;
|
|
5899
|
+
if (['primary', 'accent', 'warn'].includes(this.data.denyButtonColor)) {
|
|
5900
|
+
return undefined;
|
|
5901
|
+
}
|
|
5902
|
+
return this.data.denyButtonColor;
|
|
5903
|
+
}
|
|
5904
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5905
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AlertDialog, isStandalone: true, selector: "acp-alert-dialog", viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "container", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n class=\"alert-dialog\"\n [attr.aria-label]=\"data.ariaLabel\"\n [attr.aria-describedby]=\"data.ariaDescribedBy\"\n>\n <!-- Timer Progress Bar -->\n @if (data.timer && data.timerProgressBar) {\n <mat-progress-bar mode=\"determinate\" [value]=\"timerProgress\" class=\"timer-progress\">\n </mat-progress-bar>\n }\n\n <!-- Image -->\n @if (data.imageUrl) {\n <div class=\"alert-dialog-image\">\n <img\n [src]=\"data.imageUrl\"\n [alt]=\"data.imageAlt || 'Alert image'\"\n [style.width]=\"data.imageWidth || 'auto'\"\n [style.height]=\"data.imageHeight || 'auto'\"\n [style.max-width]=\"data.imageWidth || '100%'\"\n />\n </div>\n }\n\n <!-- Icon -->\n @if (data.type || data.icon) {\n <div class=\"alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n </div>\n }\n\n <!-- Title -->\n @if (data.title) {\n <h2 mat-dialog-title class=\"alert-dialog-title\">{{ data.title }}</h2>\n }\n\n <!-- Content -->\n <mat-dialog-content class=\"alert-dialog-content\">\n <!-- Dynamic Component -->\n @if (data.component) {\n <div #dynamicComponentContainer></div>\n } @if (data.html) {\n <div [innerHTML]=\"sanitizedHtml\"></div>\n } @else if (data.message) {\n <p class=\"alert-message\">{{ data.message }}</p>\n }\n\n <!-- Input Field -->\n @if (data.input) {\n <mat-form-field appearance=\"outline\" class=\"alert-input-field\">\n @if (data.inputLabel) {\n <mat-label>{{ data.inputLabel }}</mat-label>\n } @if (data.input === 'textarea') {\n <textarea\n matInput\n #inputField\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"data.inputPlaceholder || ''\"\n [type]=\"data.input\"\n rows=\"4\"\n (keyup.enter)=\"onInputEnter()\"\n [attr.aria-invalid]=\"!!validationError\"\n >\n </textarea>\n } @else {\n <input\n matInput\n #inputField\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"data.inputPlaceholder || ''\"\n [type]=\"data.input\"\n (keyup.enter)=\"onInputEnter()\"\n [attr.aria-invalid]=\"!!validationError\"\n />\n } @if (validationError) {\n <mat-error>{{ validationError }}</mat-error>\n }\n </mat-form-field>\n }\n </mat-dialog-content>\n\n <!-- Actions -->\n <mat-dialog-actions\n class=\"alert-dialog-actions\"\n [class.reverse-buttons]=\"data.reverseButtons\"\n [class.vertical-buttons]=\"data.verticalButtons\"\n align=\"center\"\n >\n @if (data.showDenyButton) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('deny')\"\n [variant]=\"getButtonVariant('deny')\"\n [icon]=\"getButtonIcon('deny')\"\n (handleClick)=\"onDeny()\"\n [text]=\"data.denyText || 'No'\"\n [disabled]=\"data.disableDenyButton?? false\"\n [class.spinning]=\"data.processing && data.processingButton === 'deny'\"\n [class.full-width]=\"data.fullWidthButtons\"\n />\n } @if (data.showCancelButton) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('cancel')\"\n [variant]=\"getButtonVariant('cancel')\"\n [icon]=\"getButtonIcon('cancel')\"\n (handleClick)=\"onCancel()\"\n [text]=\"data.cancelText || 'Cancel'\"\n [disabled]=\"data.disableCancelButton??false\"\n [class.spinning]=\"data.processing && data.processingButton === 'cancel'\"\n [class.full-width]=\"data.fullWidthButtons\"\n />\n } @if (data.showConfirmButton !== false) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('confirm')\"\n [variant]=\"getButtonVariant('confirm')\"\n [icon]=\"getButtonIcon('confirm')\"\n (handleClick)=\"onConfirm()\"\n [text]=\"data.confirmText || 'OK'\"\n [disabled]=\"data.disableConfirmButton?? false\"\n [class.spinning]=\"data.processing && data.processingButton === 'confirm'\"\n [class.full-width]=\"data.fullWidthButtons\"\n [autofocus]=\"data.focusConfirm\"\n />\n }\n </mat-dialog-actions>\n\n <!-- Footer -->\n @if (data.footer || data.footerHtml) {\n <div class=\"alert-dialog-footer\">\n @if (data.footerHtml) {\n <div [innerHTML]=\"sanitizedFooter\"></div>\n } @else { {{ data.footer }} }\n </div>\n }\n</div>\n", styles: [".alert-dialog{text-align:center;padding:1rem;position:relative;overflow:hidden}.timer-progress{position:absolute;top:0;left:0;right:0;height:4px}.alert-dialog-image{margin:1rem auto;display:flex;justify-content:center;align-items:center}.alert-dialog-image img{max-width:100%;border-radius:8px}.alert-dialog-icon{margin:1rem auto;display:flex;justify-content:center;align-items:center}.icon-large{font-size:80px;width:80px;height:80px}.icon-success mat-icon{color:#10b981}.icon-error mat-icon{color:#ef4444}.icon-warning mat-icon{color:#f59e0b}.icon-info mat-icon{color:#3b82f6}.icon-question mat-icon{color:#8b5cf6}.alert-dialog-title{font-size:1.5rem;font-weight:600;text-align:center}.alert-dialog-content{color:#666;font-size:1rem;min-height:50px}.alert-input-field{width:100%;margin-top:1rem}.alert-dialog-actions{gap:.75rem;padding:1rem 0 .5rem;display:flex;justify-content:center}.alert-dialog-actions.reverse-buttons{flex-direction:row-reverse}.confirm-button,.cancel-button,.deny-button{min-width:100px}.cancel-button{color:#333}.alert-dialog-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid #e0e0e0;font-size:.875rem;color:#666}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: Button, selector: "acp-button", inputs: ["variant", "text", "icon", "disabled", "type", "matStyle", "customClass", "reportFormat", "extended", "title", "ariaLabel", "name", "id", "form", "tabIndex", "testId"], outputs: ["handleClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5906
|
+
}
|
|
5907
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AlertDialog, decorators: [{
|
|
5908
|
+
type: Component,
|
|
5909
|
+
args: [{ selector: 'acp-alert-dialog', standalone: true, imports: [
|
|
5910
|
+
FormsModule,
|
|
5911
|
+
MatDialogModule,
|
|
5912
|
+
MatButtonModule,
|
|
5913
|
+
MatIconModule,
|
|
5914
|
+
MatInputModule,
|
|
5915
|
+
MatFormFieldModule,
|
|
5916
|
+
MatProgressBarModule,
|
|
5917
|
+
NgClass,
|
|
5918
|
+
Button,
|
|
5919
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"alert-dialog\"\n [attr.aria-label]=\"data.ariaLabel\"\n [attr.aria-describedby]=\"data.ariaDescribedBy\"\n>\n <!-- Timer Progress Bar -->\n @if (data.timer && data.timerProgressBar) {\n <mat-progress-bar mode=\"determinate\" [value]=\"timerProgress\" class=\"timer-progress\">\n </mat-progress-bar>\n }\n\n <!-- Image -->\n @if (data.imageUrl) {\n <div class=\"alert-dialog-image\">\n <img\n [src]=\"data.imageUrl\"\n [alt]=\"data.imageAlt || 'Alert image'\"\n [style.width]=\"data.imageWidth || 'auto'\"\n [style.height]=\"data.imageHeight || 'auto'\"\n [style.max-width]=\"data.imageWidth || '100%'\"\n />\n </div>\n }\n\n <!-- Icon -->\n @if (data.type || data.icon) {\n <div class=\"alert-dialog-icon\" [ngClass]=\"'icon-' + (data.type || 'custom')\">\n <mat-icon class=\"icon-large\" [style.color]=\"data.iconColor\"> {{ getIconName() }} </mat-icon>\n </div>\n }\n\n <!-- Title -->\n @if (data.title) {\n <h2 mat-dialog-title class=\"alert-dialog-title\">{{ data.title }}</h2>\n }\n\n <!-- Content -->\n <mat-dialog-content class=\"alert-dialog-content\">\n <!-- Dynamic Component -->\n @if (data.component) {\n <div #dynamicComponentContainer></div>\n } @if (data.html) {\n <div [innerHTML]=\"sanitizedHtml\"></div>\n } @else if (data.message) {\n <p class=\"alert-message\">{{ data.message }}</p>\n }\n\n <!-- Input Field -->\n @if (data.input) {\n <mat-form-field appearance=\"outline\" class=\"alert-input-field\">\n @if (data.inputLabel) {\n <mat-label>{{ data.inputLabel }}</mat-label>\n } @if (data.input === 'textarea') {\n <textarea\n matInput\n #inputField\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"data.inputPlaceholder || ''\"\n [type]=\"data.input\"\n rows=\"4\"\n (keyup.enter)=\"onInputEnter()\"\n [attr.aria-invalid]=\"!!validationError\"\n >\n </textarea>\n } @else {\n <input\n matInput\n #inputField\n [(ngModel)]=\"inputValue\"\n [placeholder]=\"data.inputPlaceholder || ''\"\n [type]=\"data.input\"\n (keyup.enter)=\"onInputEnter()\"\n [attr.aria-invalid]=\"!!validationError\"\n />\n } @if (validationError) {\n <mat-error>{{ validationError }}</mat-error>\n }\n </mat-form-field>\n }\n </mat-dialog-content>\n\n <!-- Actions -->\n <mat-dialog-actions\n class=\"alert-dialog-actions\"\n [class.reverse-buttons]=\"data.reverseButtons\"\n [class.vertical-buttons]=\"data.verticalButtons\"\n align=\"center\"\n >\n @if (data.showDenyButton) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('deny')\"\n [variant]=\"getButtonVariant('deny')\"\n [icon]=\"getButtonIcon('deny')\"\n (handleClick)=\"onDeny()\"\n [text]=\"data.denyText || 'No'\"\n [disabled]=\"data.disableDenyButton?? false\"\n [class.spinning]=\"data.processing && data.processingButton === 'deny'\"\n [class.full-width]=\"data.fullWidthButtons\"\n />\n } @if (data.showCancelButton) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('cancel')\"\n [variant]=\"getButtonVariant('cancel')\"\n [icon]=\"getButtonIcon('cancel')\"\n (handleClick)=\"onCancel()\"\n [text]=\"data.cancelText || 'Cancel'\"\n [disabled]=\"data.disableCancelButton??false\"\n [class.spinning]=\"data.processing && data.processingButton === 'cancel'\"\n [class.full-width]=\"data.fullWidthButtons\"\n />\n } @if (data.showConfirmButton !== false) {\n <acp-button\n type=\"button\"\n [matStyle]=\"getButtonStyle('confirm')\"\n [variant]=\"getButtonVariant('confirm')\"\n [icon]=\"getButtonIcon('confirm')\"\n (handleClick)=\"onConfirm()\"\n [text]=\"data.confirmText || 'OK'\"\n [disabled]=\"data.disableConfirmButton?? false\"\n [class.spinning]=\"data.processing && data.processingButton === 'confirm'\"\n [class.full-width]=\"data.fullWidthButtons\"\n [autofocus]=\"data.focusConfirm\"\n />\n }\n </mat-dialog-actions>\n\n <!-- Footer -->\n @if (data.footer || data.footerHtml) {\n <div class=\"alert-dialog-footer\">\n @if (data.footerHtml) {\n <div [innerHTML]=\"sanitizedFooter\"></div>\n } @else { {{ data.footer }} }\n </div>\n }\n</div>\n", styles: [".alert-dialog{text-align:center;padding:1rem;position:relative;overflow:hidden}.timer-progress{position:absolute;top:0;left:0;right:0;height:4px}.alert-dialog-image{margin:1rem auto;display:flex;justify-content:center;align-items:center}.alert-dialog-image img{max-width:100%;border-radius:8px}.alert-dialog-icon{margin:1rem auto;display:flex;justify-content:center;align-items:center}.icon-large{font-size:80px;width:80px;height:80px}.icon-success mat-icon{color:#10b981}.icon-error mat-icon{color:#ef4444}.icon-warning mat-icon{color:#f59e0b}.icon-info mat-icon{color:#3b82f6}.icon-question mat-icon{color:#8b5cf6}.alert-dialog-title{font-size:1.5rem;font-weight:600;text-align:center}.alert-dialog-content{color:#666;font-size:1rem;min-height:50px}.alert-input-field{width:100%;margin-top:1rem}.alert-dialog-actions{gap:.75rem;padding:1rem 0 .5rem;display:flex;justify-content:center}.alert-dialog-actions.reverse-buttons{flex-direction:row-reverse}.confirm-button,.cancel-button,.deny-button{min-width:100px}.cancel-button{color:#333}.alert-dialog-footer{margin-top:1rem;padding-top:1rem;border-top:1px solid #e0e0e0;font-size:.875rem;color:#666}\n"] }]
|
|
5920
|
+
}], ctorParameters: () => [], propDecorators: { inputField: [{
|
|
5921
|
+
type: ViewChild,
|
|
5922
|
+
args: ['inputField']
|
|
5923
|
+
}], container: [{
|
|
5924
|
+
type: ViewChild,
|
|
5925
|
+
args: ['dynamicComponentContainer', { read: ViewContainerRef, static: true }]
|
|
5926
|
+
}] } });
|
|
5927
|
+
|
|
5442
5928
|
class ToUpperCase {
|
|
5443
5929
|
el = inject(ElementRef);
|
|
5444
5930
|
renderer = inject(Renderer2);
|
|
@@ -5576,5 +6062,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
5576
6062
|
* Generated bundle index. Do not edit.
|
|
5577
6063
|
*/
|
|
5578
6064
|
|
|
5579
|
-
export { ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, createAutocompleteWrapperConfig, throwAcpPopoverInvalidPositionEnd, throwAcpPopoverInvalidPositionStart, throwAcpPopoverMissingError };
|
|
6065
|
+
export { ACP_DRAWER_DATA, ACP_DRAWER_DEFAULT_OPTIONS, ACP_POPOVER_CONTENT, ACP_POPOVER_DEFAULT_OPTIONS, ACP_POPOVER_SCROLL_STRATEGY, AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AcpDrawer, AcpDrawerConfig, AcpDrawerContainer, AcpDrawerRef, AcpPopover, AcpPopoverContent, AcpPopoverTarget, AcpPopoverTrigger, AdvancedDialogService, AlertDialog, AlertDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, _AcpPopoverContentBase, createAutocompleteWrapperConfig, throwAcpPopoverInvalidPositionEnd, throwAcpPopoverInvalidPositionStart, throwAcpPopoverMissingError };
|
|
5580
6066
|
//# sourceMappingURL=acontplus-ng-components.mjs.map
|