@skyux/ag-grid 15.0.0-alpha.2 → 15.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/skyux-ag-grid.mjs +52 -51
- package/fesm2022/skyux-ag-grid.mjs.map +1 -1
- package/package.json +13 -13
- package/types/skyux-ag-grid.d.ts +5 -5
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { NgClass, CommonModule, NgTemplateOutlet, AsyncPipe } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { NgModule, inject, Injectable, signal, input, booleanAttribute, numberAttribute, viewChild, DestroyRef, ElementRef, DOCUMENT, computed, effect, ContentChild, ChangeDetectionStrategy, Component, contentChildren, linkedSignal, ChangeDetectorRef, untracked, Directive, InjectionToken, model, output, contentChild, EnvironmentInjector, afterNextRender, HostListener,
|
|
3
|
+
import { NgModule, inject, Injectable, signal, input, booleanAttribute, numberAttribute, viewChild, DestroyRef, ElementRef, DOCUMENT, computed, effect, ContentChild, ChangeDetectionStrategy, Component, contentChildren, linkedSignal, ChangeDetectorRef, untracked, Directive, InjectionToken, model, output, contentChild, EnvironmentInjector, afterNextRender, HostListener, ViewEncapsulation, HostBinding, isSignal, Input, ViewChild, RendererFactory2, CSP_NONCE } from '@angular/core';
|
|
4
4
|
import { AgGridAngular } from 'ag-grid-angular';
|
|
5
5
|
import * as i3 from '@skyux/i18n';
|
|
6
6
|
import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
|
|
@@ -1440,6 +1440,7 @@ class SkyAgGridCellEditorAutocompleteComponent {
|
|
|
1440
1440
|
this.skyComponentProperties = {};
|
|
1441
1441
|
this.#autocompleteOpen = false;
|
|
1442
1442
|
this.#elementRef = inject(ElementRef);
|
|
1443
|
+
this.input = viewChild('skyCellEditorAutocomplete', { ...(ngDevMode ? { debugName: "input" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
1443
1444
|
}
|
|
1444
1445
|
#autocompleteOpen;
|
|
1445
1446
|
#triggerType;
|
|
@@ -1480,18 +1481,19 @@ class SkyAgGridCellEditorAutocompleteComponent {
|
|
|
1480
1481
|
afterGuiAttached() {
|
|
1481
1482
|
// AG Grid sets focus to the cell via setTimeout, and this queues the input to focus after that.
|
|
1482
1483
|
setTimeout(() => {
|
|
1483
|
-
|
|
1484
|
-
|
|
1484
|
+
const input = this.input();
|
|
1485
|
+
if (input) {
|
|
1486
|
+
input.nativeElement.focus();
|
|
1485
1487
|
if (this.#triggerType === SkyAgGridCellEditorInitialAction.Replace) {
|
|
1486
1488
|
const charPress = this.#params?.eventKey;
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
+
input.nativeElement.select();
|
|
1490
|
+
input.nativeElement.setRangeText(charPress);
|
|
1489
1491
|
// Ensure the cursor is at the end of the text.
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
+
input.nativeElement.setSelectionRange(charPress.length, charPress.length);
|
|
1493
|
+
input.nativeElement.dispatchEvent(new Event('input'));
|
|
1492
1494
|
}
|
|
1493
1495
|
if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
|
|
1494
|
-
|
|
1496
|
+
input.nativeElement.select();
|
|
1495
1497
|
}
|
|
1496
1498
|
}
|
|
1497
1499
|
});
|
|
@@ -1512,7 +1514,7 @@ class SkyAgGridCellEditorAutocompleteComponent {
|
|
|
1512
1514
|
}
|
|
1513
1515
|
}
|
|
1514
1516
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1515
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1517
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: SkyAgGridCellEditorAutocompleteComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-autocomplete", host: { listeners: { "focusout": "onBlur($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorAutocomplete"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"sky-ag-grid-cell-editor-autocomplete\" [formGroup]=\"editorForm\">\n <sky-autocomplete\n [allowAnyValue]=\"skyComponentProperties.allowAnyValue\"\n [data]=\"skyComponentProperties.data\"\n [debounceTime]=\"skyComponentProperties.debounceTime\"\n [descriptorProperty]=\"skyComponentProperties.descriptorProperty\"\n [highlightSearchText]=\"skyComponentProperties.highlightSearchText ?? true\"\n [propertiesToSearch]=\"skyComponentProperties.propertiesToSearch\"\n [search]=\"skyComponentProperties.search\"\n [searchFilters]=\"skyComponentProperties.searchFilters\"\n [searchResultsLimit]=\"skyComponentProperties.searchResultsLimit\"\n [searchResultTemplate]=\"skyComponentProperties.searchResultTemplate\"\n [searchTextMinimumCharacters]=\"\n skyComponentProperties.searchTextMinimumCharacters\n \"\n (selectionChange)=\"\n skyComponentProperties.selectionChange &&\n skyComponentProperties.selectionChange($event)\n \"\n (openChange)=\"onAutocompleteOpenChange($event)\"\n >\n <input\n #skyCellEditorAutocomplete\n formControlName=\"selection\"\n skyAutocomplete\n type=\"text\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_autocomplete_aria_label'\n | skyLibResources: columnHeader : rowNumber\n \"\n />\n </sky-autocomplete>\n</div>\n", styles: ["sky-autocomplete input{background-color:transparent;border:none;box-shadow:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyAutocompleteModule }, { kind: "component", type: i2.λ2, selector: "sky-autocomplete", inputs: ["ariaLabelledBy", "data", "debounceTime", "descriptorProperty", "dropdownHintText", "enableShowMore", "messageStream", "wrapperClass", "propertiesToSearch", "search", "searchResultTemplate", "searchTextMinimumCharacters", "searchFilters", "searchResultsLimit", "showAddButton", "noResultsFoundText", "searchAsyncDisabled", "allowAnyValue", "highlightSearchText"], outputs: ["addClick", "showMoreClick", "selectionChange", "searchAsync", "openChange"] }, { kind: "directive", type: i2.λ1, selector: "input[skyAutocomplete], textarea[skyAutocomplete]", inputs: ["autocompleteAttribute", "disabled"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1516
1518
|
}
|
|
1517
1519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAgGridCellEditorAutocompleteComponent, decorators: [{
|
|
1518
1520
|
type: Component,
|
|
@@ -1522,10 +1524,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
1522
1524
|
SkyAutocompleteModule,
|
|
1523
1525
|
SkyI18nModule,
|
|
1524
1526
|
], template: "<div class=\"sky-ag-grid-cell-editor-autocomplete\" [formGroup]=\"editorForm\">\n <sky-autocomplete\n [allowAnyValue]=\"skyComponentProperties.allowAnyValue\"\n [data]=\"skyComponentProperties.data\"\n [debounceTime]=\"skyComponentProperties.debounceTime\"\n [descriptorProperty]=\"skyComponentProperties.descriptorProperty\"\n [highlightSearchText]=\"skyComponentProperties.highlightSearchText ?? true\"\n [propertiesToSearch]=\"skyComponentProperties.propertiesToSearch\"\n [search]=\"skyComponentProperties.search\"\n [searchFilters]=\"skyComponentProperties.searchFilters\"\n [searchResultsLimit]=\"skyComponentProperties.searchResultsLimit\"\n [searchResultTemplate]=\"skyComponentProperties.searchResultTemplate\"\n [searchTextMinimumCharacters]=\"\n skyComponentProperties.searchTextMinimumCharacters\n \"\n (selectionChange)=\"\n skyComponentProperties.selectionChange &&\n skyComponentProperties.selectionChange($event)\n \"\n (openChange)=\"onAutocompleteOpenChange($event)\"\n >\n <input\n #skyCellEditorAutocomplete\n formControlName=\"selection\"\n skyAutocomplete\n type=\"text\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_autocomplete_aria_label'\n | skyLibResources: columnHeader : rowNumber\n \"\n />\n </sky-autocomplete>\n</div>\n", styles: ["sky-autocomplete input{background-color:transparent;border:none;box-shadow:none}\n"] }]
|
|
1525
|
-
}], propDecorators: { input: [{
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
}], onBlur: [{
|
|
1527
|
+
}], propDecorators: { input: [{ type: i0.ViewChild, args: ['skyCellEditorAutocomplete', { ...{
|
|
1528
|
+
read: ElementRef,
|
|
1529
|
+
}, isSignal: true }] }], onBlur: [{
|
|
1529
1530
|
type: HostListener,
|
|
1530
1531
|
args: ['focusout', ['$event']]
|
|
1531
1532
|
}] } });
|
|
@@ -1542,6 +1543,7 @@ class SkyAgGridCellEditorCurrencyComponent {
|
|
|
1542
1543
|
this.editorForm = new UntypedFormGroup({
|
|
1543
1544
|
currency: this.currency,
|
|
1544
1545
|
});
|
|
1546
|
+
this.input = viewChild('skyCellEditorCurrency', { ...(ngDevMode ? { debugName: "input" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
1545
1547
|
this.#changeDetector = inject(ChangeDetectorRef);
|
|
1546
1548
|
this.#initialized = false;
|
|
1547
1549
|
}
|
|
@@ -1551,7 +1553,7 @@ class SkyAgGridCellEditorCurrencyComponent {
|
|
|
1551
1553
|
// This happens when the refreshCells API is called.
|
|
1552
1554
|
this.afterGuiAttached();
|
|
1553
1555
|
}
|
|
1554
|
-
else if (event.target === this.input?.nativeElement) {
|
|
1556
|
+
else if (event.target === this.input()?.nativeElement) {
|
|
1555
1557
|
this.#stopEditingOnBlur();
|
|
1556
1558
|
}
|
|
1557
1559
|
}
|
|
@@ -1583,7 +1585,7 @@ class SkyAgGridCellEditorCurrencyComponent {
|
|
|
1583
1585
|
afterGuiAttached() {
|
|
1584
1586
|
// AG Grid sets focus to the cell via setTimeout, and this queues the input to focus after that.
|
|
1585
1587
|
setTimeout(() => {
|
|
1586
|
-
this.input?.nativeElement.focus();
|
|
1588
|
+
this.input()?.nativeElement.focus();
|
|
1587
1589
|
// This setup is in `afterGuiAttached` due to the lifecycle of autonumeric which will highlight the initial value if it is in place when it renders.
|
|
1588
1590
|
// Since we don't want that, we set the initial value after autonumeric initializes.
|
|
1589
1591
|
this.#triggerType = SkyAgGridCellEditorUtils.getEditorInitialAction(this.params);
|
|
@@ -1606,7 +1608,7 @@ class SkyAgGridCellEditorCurrencyComponent {
|
|
|
1606
1608
|
this.#changeDetector.markForCheck();
|
|
1607
1609
|
if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted &&
|
|
1608
1610
|
(this.params?.value ?? '') !== '') {
|
|
1609
|
-
this.input?.nativeElement.select();
|
|
1611
|
+
this.input()?.nativeElement.select();
|
|
1610
1612
|
}
|
|
1611
1613
|
// When the cell is initialized with the Enter key, we need to suppress the first `onPressEnter`.
|
|
1612
1614
|
this.#initialized = this.params?.eventKey !== 'Enter';
|
|
@@ -1639,7 +1641,7 @@ class SkyAgGridCellEditorCurrencyComponent {
|
|
|
1639
1641
|
}
|
|
1640
1642
|
}
|
|
1641
1643
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1642
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1644
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: SkyAgGridCellEditorCurrencyComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-currency", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorCurrency"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n <input\n #skyCellEditorCurrency\n type=\"text\"\n [formControl]=\"currency\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_currency_aria_label'\n | skyLibResources: columnHeader : rowNumber\n \"\n [skyAutonumeric]=\"skyComponentProperties\"\n [skyAutonumericFormChangesUnformatted]=\"params?.eventKey?.length === 1\"\n (keyup.enter)=\"onPressEnter()\"\n (keyup.escape)=\"onPressEscape()\"\n />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-currency-editor-left-padding: 9px}:host{height:100%;width:100%}input{background-color:transparent;border:none;height:100%;width:100%;padding-left:var(--sky-override-ag-grid-currency-editor-left-padding, calc(var(--sky-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SkyAutonumericModule }, { kind: "directive", type: i2$1.λ1, selector: "input[skyAutonumeric]", inputs: ["skyAutonumeric", "skyAutonumericFormChangesUnformatted"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1643
1645
|
}
|
|
1644
1646
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAgGridCellEditorCurrencyComponent, decorators: [{
|
|
1645
1647
|
type: Component,
|
|
@@ -1649,10 +1651,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
1649
1651
|
SkyAutonumericModule,
|
|
1650
1652
|
SkyI18nModule,
|
|
1651
1653
|
], template: "<ng-container [formGroup]=\"editorForm\">\n <input\n #skyCellEditorCurrency\n type=\"text\"\n [formControl]=\"currency\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_currency_aria_label'\n | skyLibResources: columnHeader : rowNumber\n \"\n [skyAutonumeric]=\"skyComponentProperties\"\n [skyAutonumericFormChangesUnformatted]=\"params?.eventKey?.length === 1\"\n (keyup.enter)=\"onPressEnter()\"\n (keyup.escape)=\"onPressEscape()\"\n />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-currency-editor-left-padding: 9px}:host{height:100%;width:100%}input{background-color:transparent;border:none;height:100%;width:100%;padding-left:var(--sky-override-ag-grid-currency-editor-left-padding, calc(var(--sky-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"] }]
|
|
1652
|
-
}], propDecorators: { input: [{
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
}], onFocusOut: [{
|
|
1654
|
+
}], propDecorators: { input: [{ type: i0.ViewChild, args: ['skyCellEditorCurrency', { ...{
|
|
1655
|
+
read: ElementRef,
|
|
1656
|
+
}, isSignal: true }] }], onFocusOut: [{
|
|
1656
1657
|
type: HostListener,
|
|
1657
1658
|
args: ['focusout', ['$event']]
|
|
1658
1659
|
}] } });
|
|
@@ -1666,6 +1667,7 @@ class SkyAgGridCellEditorDatepickerComponent {
|
|
|
1666
1667
|
date: new UntypedFormControl(),
|
|
1667
1668
|
});
|
|
1668
1669
|
this.skyComponentProperties = {};
|
|
1670
|
+
this.datepickerInput = viewChild('skyCellEditorDatepickerInput', { ...(ngDevMode ? { debugName: "datepickerInput" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
1669
1671
|
this.resolvedDateFormat = '';
|
|
1670
1672
|
this.#calendarOpen = false;
|
|
1671
1673
|
this.#elementRef = inject(ElementRef);
|
|
@@ -1687,7 +1689,7 @@ class SkyAgGridCellEditorDatepickerComponent {
|
|
|
1687
1689
|
// This happens when the refreshCells API is called.
|
|
1688
1690
|
this.afterGuiAttached();
|
|
1689
1691
|
}
|
|
1690
|
-
else if (event.target === this.datepickerInput?.nativeElement) {
|
|
1692
|
+
else if (event.target === this.datepickerInput()?.nativeElement) {
|
|
1691
1693
|
this.#stopEditingOnBlur();
|
|
1692
1694
|
}
|
|
1693
1695
|
}
|
|
@@ -1729,8 +1731,8 @@ class SkyAgGridCellEditorDatepickerComponent {
|
|
|
1729
1731
|
this.skyComponentProperties = this.#params.skyComponentProperties || {};
|
|
1730
1732
|
this.columnHeader = this.#params.api.getDisplayNameForColumn(this.#params.column, 'header');
|
|
1731
1733
|
this.columnWidth = this.#params.column.getActualWidth();
|
|
1732
|
-
this.columnWidthWithoutBorders = this.columnWidth
|
|
1733
|
-
this.rowHeightWithoutBorders = this.#params.node.rowHeight
|
|
1734
|
+
this.columnWidthWithoutBorders = SkyAgGridCellEditorUtils.subtractOrZero(this.columnWidth, 2);
|
|
1735
|
+
this.rowHeightWithoutBorders = SkyAgGridCellEditorUtils.subtractOrZero(this.#params.node.rowHeight, 3);
|
|
1734
1736
|
this.rowNumber = this.#params.rowIndex + 1;
|
|
1735
1737
|
this.#themeSvc?.settingsChange
|
|
1736
1738
|
?.pipe(takeUntilDestroyed(this.#destroyRef))
|
|
@@ -1741,7 +1743,7 @@ class SkyAgGridCellEditorDatepickerComponent {
|
|
|
1741
1743
|
}
|
|
1742
1744
|
else {
|
|
1743
1745
|
this.columnWidthWithoutBorders =
|
|
1744
|
-
|
|
1746
|
+
SkyAgGridCellEditorUtils.subtractOrZero(this.columnWidth, 2);
|
|
1745
1747
|
this.rowHeightWithoutBorders =
|
|
1746
1748
|
SkyAgGridCellEditorUtils.subtractOrZero(this.#params?.node.rowHeight, 3);
|
|
1747
1749
|
}
|
|
@@ -1760,7 +1762,7 @@ class SkyAgGridCellEditorDatepickerComponent {
|
|
|
1760
1762
|
afterGuiAttached() {
|
|
1761
1763
|
// AG Grid sets focus to the cell via setTimeout, and this queues the input to focus after that.
|
|
1762
1764
|
setTimeout(() => {
|
|
1763
|
-
const datepickerInputEl = this.datepickerInput?.nativeElement;
|
|
1765
|
+
const datepickerInputEl = this.datepickerInput()?.nativeElement;
|
|
1764
1766
|
if (datepickerInputEl) {
|
|
1765
1767
|
datepickerInputEl.focus();
|
|
1766
1768
|
// programmatically set the value of in the input; however, do not do this via the form control so that the value is not formatted when editing starts.
|
|
@@ -1789,7 +1791,7 @@ class SkyAgGridCellEditorDatepickerComponent {
|
|
|
1789
1791
|
* getValue is called by agGrid when editing is stopped to get the new value of the cell.
|
|
1790
1792
|
*/
|
|
1791
1793
|
getValue() {
|
|
1792
|
-
this.datepickerInput?.nativeElement.blur();
|
|
1794
|
+
this.datepickerInput()?.nativeElement.blur();
|
|
1793
1795
|
return this.editorForm.get('date')?.value;
|
|
1794
1796
|
}
|
|
1795
1797
|
#stopEditingOnBlur() {
|
|
@@ -1800,7 +1802,7 @@ class SkyAgGridCellEditorDatepickerComponent {
|
|
|
1800
1802
|
}
|
|
1801
1803
|
}
|
|
1802
1804
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1803
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1805
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: SkyAgGridCellEditorDatepickerComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-datepicker", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "datepickerInput", first: true, predicate: ["skyCellEditorDatepickerInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n class=\"sky-ag-grid-cell-editor-datepicker\"\n [formGroup]=\"editorForm\"\n [style.width.px]=\"columnWidthWithoutBorders || undefined\"\n>\n <sky-datepicker\n data-sky-id=\"cell-datepicker\"\n pickerClass=\"ag-custom-component-popup\"\n (dateFormatChange)=\"onDateFormatChange($event)\"\n (openChange)=\"onCalendarOpenChange($event)\"\n >\n <input\n #skyCellEditorDatepickerInput\n formControlName=\"date\"\n skyDatepickerInput\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_datepicker_aria_label'\n | skyLibResources: columnHeader : rowNumber\n \"\n [attr.title]=\"\n resolvedDateFormat\n ? ('skyux_datepicker_format_hint_text'\n | skyLibResources: resolvedDateFormat)\n : null\n \"\n [minDate]=\"skyComponentProperties.minDate\"\n [maxDate]=\"skyComponentProperties.maxDate\"\n [dateFormat]=\"skyComponentProperties.dateFormat\"\n [startingDay]=\"skyComponentProperties.startingDay\"\n [skyDatepickerNoValidate]=\"skyComponentProperties.skyDatepickerNoValidate\"\n [style.height.px]=\"rowHeightWithoutBorders\"\n />\n </sky-datepicker>\n</div>\n", styles: [".sky-ag-grid-cell-editor-datepicker:not(.sky-theme-modern *){--sky-override-ag-grid-datepicker-editor-border-width: 1px;--sky-override-ag-grid-datepicker-editor-border-color: transparent #cdcfd2 transparent transparent;--sky-override-ag-grid-datepicker-editor-position: relative;--sky-override-ag-grid-datepicker-editor-top-left: 1px}.sky-ag-grid-cell-editor-datepicker{position:var(--sky-override-ag-grid-datepicker-editor-position, static);top:var(--sky-override-ag-grid-datepicker-editor-top-left, initial);left:var(--sky-override-ag-grid-datepicker-editor-top-left, initial)}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{background-color:var(--ag-background-color);box-shadow:none;border-width:var(--sky-override-ag-grid-datepicker-editor-border-width, var(--sky-border-width-input-base));border-style:solid;border-color:var(--sky-override-ag-grid-datepicker-editor-border-color, var(--sky-color-border-input-focus))}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:var(--sky-override-ag-grid-datepicker-editor-border-width, var(--sky-border-width-input-focus))}.sky-ag-grid-cell-editor-datepicker sky-datepicker .sky-input-group-datepicker-btn{border-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: i2$2.λ2, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: i2$2.λ3, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1804
1806
|
}
|
|
1805
1807
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, decorators: [{
|
|
1806
1808
|
type: Component,
|
|
@@ -1809,11 +1811,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
1809
1811
|
ReactiveFormsModule,
|
|
1810
1812
|
SkyDatepickerModule,
|
|
1811
1813
|
SkyI18nModule,
|
|
1812
|
-
], template: "<div\n class=\"sky-ag-grid-cell-editor-datepicker\"\n [formGroup]=\"editorForm\"\n [style.width.px]=\"columnWidthWithoutBorders\"\n>\n <sky-datepicker\n data-sky-id=\"cell-datepicker\"\n pickerClass=\"ag-custom-component-popup\"\n (dateFormatChange)=\"onDateFormatChange($event)\"\n (openChange)=\"onCalendarOpenChange($event)\"\n >\n <input\n #skyCellEditorDatepickerInput\n formControlName=\"date\"\n skyDatepickerInput\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_datepicker_aria_label'\n | skyLibResources: columnHeader : rowNumber\n \"\n [attr.title]=\"\n resolvedDateFormat\n ? ('skyux_datepicker_format_hint_text'\n | skyLibResources: resolvedDateFormat)\n : null\n \"\n [minDate]=\"skyComponentProperties.minDate\"\n [maxDate]=\"skyComponentProperties.maxDate\"\n [dateFormat]=\"skyComponentProperties.dateFormat\"\n [startingDay]=\"skyComponentProperties.startingDay\"\n [skyDatepickerNoValidate]=\"skyComponentProperties.skyDatepickerNoValidate\"\n [style.height.px]=\"rowHeightWithoutBorders\"\n />\n </sky-datepicker>\n</div>\n", styles: [".sky-ag-grid-cell-editor-datepicker:not(.sky-theme-modern *){--sky-override-ag-grid-datepicker-editor-border-width: 1px;--sky-override-ag-grid-datepicker-editor-border-color: transparent #cdcfd2 transparent transparent;--sky-override-ag-grid-datepicker-editor-position: relative;--sky-override-ag-grid-datepicker-editor-top-left: 1px}.sky-ag-grid-cell-editor-datepicker{position:var(--sky-override-ag-grid-datepicker-editor-position, static);top:var(--sky-override-ag-grid-datepicker-editor-top-left, initial);left:var(--sky-override-ag-grid-datepicker-editor-top-left, initial)}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{background-color:var(--ag-background-color);box-shadow:none;border-width:var(--sky-override-ag-grid-datepicker-editor-border-width, var(--sky-border-width-input-base));border-style:solid;border-color:var(--sky-override-ag-grid-datepicker-editor-border-color, var(--sky-color-border-input-focus))}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:var(--sky-override-ag-grid-datepicker-editor-border-width, var(--sky-border-width-input-focus))}.sky-ag-grid-cell-editor-datepicker sky-datepicker .sky-input-group-datepicker-btn{border-radius:0}\n"] }]
|
|
1813
|
-
}], propDecorators: { datepickerInput: [{
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
}], onFocusOut: [{
|
|
1814
|
+
], template: "<div\n class=\"sky-ag-grid-cell-editor-datepicker\"\n [formGroup]=\"editorForm\"\n [style.width.px]=\"columnWidthWithoutBorders || undefined\"\n>\n <sky-datepicker\n data-sky-id=\"cell-datepicker\"\n pickerClass=\"ag-custom-component-popup\"\n (dateFormatChange)=\"onDateFormatChange($event)\"\n (openChange)=\"onCalendarOpenChange($event)\"\n >\n <input\n #skyCellEditorDatepickerInput\n formControlName=\"date\"\n skyDatepickerInput\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_datepicker_aria_label'\n | skyLibResources: columnHeader : rowNumber\n \"\n [attr.title]=\"\n resolvedDateFormat\n ? ('skyux_datepicker_format_hint_text'\n | skyLibResources: resolvedDateFormat)\n : null\n \"\n [minDate]=\"skyComponentProperties.minDate\"\n [maxDate]=\"skyComponentProperties.maxDate\"\n [dateFormat]=\"skyComponentProperties.dateFormat\"\n [startingDay]=\"skyComponentProperties.startingDay\"\n [skyDatepickerNoValidate]=\"skyComponentProperties.skyDatepickerNoValidate\"\n [style.height.px]=\"rowHeightWithoutBorders\"\n />\n </sky-datepicker>\n</div>\n", styles: [".sky-ag-grid-cell-editor-datepicker:not(.sky-theme-modern *){--sky-override-ag-grid-datepicker-editor-border-width: 1px;--sky-override-ag-grid-datepicker-editor-border-color: transparent #cdcfd2 transparent transparent;--sky-override-ag-grid-datepicker-editor-position: relative;--sky-override-ag-grid-datepicker-editor-top-left: 1px}.sky-ag-grid-cell-editor-datepicker{position:var(--sky-override-ag-grid-datepicker-editor-position, static);top:var(--sky-override-ag-grid-datepicker-editor-top-left, initial);left:var(--sky-override-ag-grid-datepicker-editor-top-left, initial)}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control{background-color:var(--ag-background-color);box-shadow:none;border-width:var(--sky-override-ag-grid-datepicker-editor-border-width, var(--sky-border-width-input-base));border-style:solid;border-color:var(--sky-override-ag-grid-datepicker-editor-border-color, var(--sky-color-border-input-focus))}.sky-ag-grid-cell-editor-datepicker sky-datepicker input.sky-form-control:focus{border-width:var(--sky-override-ag-grid-datepicker-editor-border-width, var(--sky-border-width-input-focus))}.sky-ag-grid-cell-editor-datepicker sky-datepicker .sky-input-group-datepicker-btn{border-radius:0}\n"] }]
|
|
1815
|
+
}], propDecorators: { datepickerInput: [{ type: i0.ViewChild, args: ['skyCellEditorDatepickerInput', { ...{
|
|
1816
|
+
read: ElementRef,
|
|
1817
|
+
}, isSignal: true }] }], onFocusOut: [{
|
|
1817
1818
|
type: HostListener,
|
|
1818
1819
|
args: ['focusout', ['$event']]
|
|
1819
1820
|
}] } });
|
|
@@ -1983,6 +1984,7 @@ class SkyAgGridCellEditorNumberComponent {
|
|
|
1983
1984
|
this.editorForm = new UntypedFormGroup({
|
|
1984
1985
|
number: new UntypedFormControl(),
|
|
1985
1986
|
});
|
|
1987
|
+
this.input = viewChild('skyCellEditorNumber', { ...(ngDevMode ? { debugName: "input" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
1986
1988
|
}
|
|
1987
1989
|
onFocusOut(event) {
|
|
1988
1990
|
if (event.relatedTarget &&
|
|
@@ -1991,7 +1993,7 @@ class SkyAgGridCellEditorNumberComponent {
|
|
|
1991
1993
|
// This happens when the refreshCells API is called.
|
|
1992
1994
|
this.afterGuiAttached();
|
|
1993
1995
|
}
|
|
1994
|
-
else if (event.target === this.input?.nativeElement) {
|
|
1996
|
+
else if (event.target === this.input()?.nativeElement) {
|
|
1995
1997
|
this.#stopEditingOnBlur();
|
|
1996
1998
|
}
|
|
1997
1999
|
}
|
|
@@ -2036,10 +2038,11 @@ class SkyAgGridCellEditorNumberComponent {
|
|
|
2036
2038
|
afterGuiAttached() {
|
|
2037
2039
|
// AG Grid sets focus to the cell via setTimeout, and this queues the input to focus after that.
|
|
2038
2040
|
setTimeout(() => {
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
+
const input = this.input();
|
|
2042
|
+
if (input) {
|
|
2043
|
+
input.nativeElement.focus();
|
|
2041
2044
|
if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
|
|
2042
|
-
|
|
2045
|
+
input.nativeElement.select();
|
|
2043
2046
|
}
|
|
2044
2047
|
}
|
|
2045
2048
|
});
|
|
@@ -2057,15 +2060,14 @@ class SkyAgGridCellEditorNumberComponent {
|
|
|
2057
2060
|
}
|
|
2058
2061
|
}
|
|
2059
2062
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2060
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2063
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: SkyAgGridCellEditorNumberComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-number", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorNumber"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n <input\n #skyCellEditorNumber\n formControlName=\"number\"\n type=\"number\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_number_aria_label'\n | skyLibResources: columnHeader : rowNumber\n \"\n [style.width.px]=\"columnWidth\"\n [style.height.px]=\"rowHeightWithoutBorders\"\n [max]=\"max ?? null\"\n [min]=\"min ?? null\"\n />\n</ng-container>\n", styles: ["input{background-color:transparent;border:none;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2061
2064
|
}
|
|
2062
2065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAgGridCellEditorNumberComponent, decorators: [{
|
|
2063
2066
|
type: Component,
|
|
2064
2067
|
args: [{ selector: 'sky-ag-grid-cell-editor-number', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, SkyI18nModule], template: "<ng-container [formGroup]=\"editorForm\">\n <input\n #skyCellEditorNumber\n formControlName=\"number\"\n type=\"number\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_number_aria_label'\n | skyLibResources: columnHeader : rowNumber\n \"\n [style.width.px]=\"columnWidth\"\n [style.height.px]=\"rowHeightWithoutBorders\"\n [max]=\"max ?? null\"\n [min]=\"min ?? null\"\n />\n</ng-container>\n", styles: ["input{background-color:transparent;border:none;text-align:right}\n"] }]
|
|
2065
|
-
}], propDecorators: { input: [{
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
}], onFocusOut: [{
|
|
2068
|
+
}], propDecorators: { input: [{ type: i0.ViewChild, args: ['skyCellEditorNumber', { ...{
|
|
2069
|
+
read: ElementRef,
|
|
2070
|
+
}, isSignal: true }] }], onFocusOut: [{
|
|
2069
2071
|
type: HostListener,
|
|
2070
2072
|
args: ['focusout', ['$event']]
|
|
2071
2073
|
}] } });
|
|
@@ -2078,6 +2080,7 @@ class SkyAgGridCellEditorTextComponent {
|
|
|
2078
2080
|
this.editorForm = new UntypedFormGroup({
|
|
2079
2081
|
text: new UntypedFormControl(),
|
|
2080
2082
|
});
|
|
2083
|
+
this.input = viewChild('skyCellEditorText', { ...(ngDevMode ? { debugName: "input" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
2081
2084
|
}
|
|
2082
2085
|
onFocusOut(event) {
|
|
2083
2086
|
if (event.relatedTarget &&
|
|
@@ -2086,7 +2089,7 @@ class SkyAgGridCellEditorTextComponent {
|
|
|
2086
2089
|
// This happens when the refreshCells API is called.
|
|
2087
2090
|
this.afterGuiAttached();
|
|
2088
2091
|
}
|
|
2089
|
-
else if (event.target === this.input?.nativeElement) {
|
|
2092
|
+
else if (event.target === this.input()?.nativeElement) {
|
|
2090
2093
|
this.#stopEditingOnBlur();
|
|
2091
2094
|
}
|
|
2092
2095
|
}
|
|
@@ -2128,10 +2131,11 @@ class SkyAgGridCellEditorTextComponent {
|
|
|
2128
2131
|
afterGuiAttached() {
|
|
2129
2132
|
// AG Grid sets focus to the cell via setTimeout, and this queues the input to focus after that.
|
|
2130
2133
|
setTimeout(() => {
|
|
2131
|
-
|
|
2132
|
-
|
|
2134
|
+
const input = this.input();
|
|
2135
|
+
if (input) {
|
|
2136
|
+
input.nativeElement.focus();
|
|
2133
2137
|
if (this.#triggerType === SkyAgGridCellEditorInitialAction.Highlighted) {
|
|
2134
|
-
|
|
2138
|
+
input.nativeElement.select();
|
|
2135
2139
|
}
|
|
2136
2140
|
}
|
|
2137
2141
|
});
|
|
@@ -2148,15 +2152,12 @@ class SkyAgGridCellEditorTextComponent {
|
|
|
2148
2152
|
}
|
|
2149
2153
|
}
|
|
2150
2154
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAgGridCellEditorTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2151
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2155
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: SkyAgGridCellEditorTextComponent, isStandalone: true, selector: "sky-ag-grid-cell-editor-text", host: { listeners: { "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["skyCellEditorText"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ng-container [formGroup]=\"editorForm\">\n <input\n #skyCellEditorText\n formControlName=\"text\"\n type=\"text\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_text_aria_label'\n | skyLibResources: columnHeader : rowNumber\n \"\n [maxlength]=\"maxlength ?? null\"\n />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-text-editor-left-padding: 9px}:host{height:100%;width:100%;display:flex}input{background-color:transparent;border:none;height:100%;width:100%;padding-left:var(--sky-override-ag-grid-text-editor-left-padding, calc(var(--sky-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyI18nModule }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2152
2156
|
}
|
|
2153
2157
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: SkyAgGridCellEditorTextComponent, decorators: [{
|
|
2154
2158
|
type: Component,
|
|
2155
2159
|
args: [{ selector: 'sky-ag-grid-cell-editor-text', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, SkyI18nModule], template: "<ng-container [formGroup]=\"editorForm\">\n <input\n #skyCellEditorText\n formControlName=\"text\"\n type=\"text\"\n [attr.aria-label]=\"\n 'sky_ag_grid_cell_editor_text_aria_label'\n | skyLibResources: columnHeader : rowNumber\n \"\n [maxlength]=\"maxlength ?? null\"\n />\n</ng-container>\n", styles: ["input:not(.sky-theme-modern *){--sky-override-ag-grid-text-editor-left-padding: 9px}:host{height:100%;width:100%;display:flex}input{background-color:transparent;border:none;height:100%;width:100%;padding-left:var(--sky-override-ag-grid-text-editor-left-padding, calc(var(--sky-comp-grid-cell-space-inset-left) - var(--sky-border-width-input-focus)))}\n"] }]
|
|
2156
|
-
}], propDecorators: { input: [{
|
|
2157
|
-
type: ViewChild,
|
|
2158
|
-
args: ['skyCellEditorText', { read: ElementRef }]
|
|
2159
|
-
}], onFocusOut: [{
|
|
2160
|
+
}], propDecorators: { input: [{ type: i0.ViewChild, args: ['skyCellEditorText', { ...{ read: ElementRef }, isSignal: true }] }], onFocusOut: [{
|
|
2160
2161
|
type: HostListener,
|
|
2161
2162
|
args: ['focusout', ['$event']]
|
|
2162
2163
|
}] } });
|