@skyux/ag-grid 13.0.0-alpha.9 → 13.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -332,15 +332,6 @@
332
332
  border: none;
333
333
  outline-color: transparent;
334
334
  }
335
- .ag-theme-sky-data-grid-default .ag-row > .ag-cell.sky-ag-grid-cell-validator > .ag-cell-wrapper,
336
- .ag-theme-sky-data-entry-grid-default .ag-row > .ag-cell.sky-ag-grid-cell-validator > .ag-cell-wrapper,
337
- .ag-theme-sky-data-grid-modern-light .ag-row > .ag-cell.sky-ag-grid-cell-validator > .ag-cell-wrapper,
338
- .ag-theme-sky-data-entry-grid-modern-light .ag-row > .ag-cell.sky-ag-grid-cell-validator > .ag-cell-wrapper,
339
- .ag-theme-sky-data-grid-modern-light-compact .ag-row > .ag-cell.sky-ag-grid-cell-validator > .ag-cell-wrapper,
340
- .ag-theme-sky-data-entry-grid-modern-light-compact .ag-row > .ag-cell.sky-ag-grid-cell-validator > .ag-cell-wrapper {
341
- align-items: stretch;
342
- height: 100%;
343
- }
344
335
  .ag-theme-sky-data-grid-default .ag-cell.sky-ag-grid-cell-invalid:not(.ag-cell-inline-editing,
345
336
  .ag-cell-popup-editing),
346
337
  .ag-theme-sky-data-grid-default .ag-cell.sky-ag-grid-cell-validator:not(.sky-ag-grid-cell-invalid):not(.ag-cell-inline-editing,
@@ -11,7 +11,7 @@ import { Subject, BehaviorSubject, ReplaySubject, takeUntil, combineLatest, of,
11
11
  import { takeUntil as takeUntil$1, filter, first } from 'rxjs/operators';
12
12
  import * as i2$4 from '@skyux/theme';
13
13
  import { SkyThemeService, SkyThemeModule } from '@skyux/theme';
14
- import { themeQuartz, colorSchemeLight, KeyCode, PopupComponent } from 'ag-grid-community';
14
+ import { themeQuartz, colorSchemeLight, KeyCode } from 'ag-grid-community';
15
15
  import * as i1$1 from '@skyux/data-manager';
16
16
  import * as i1$2 from '@skyux/layout';
17
17
  import { SkyInlineDeleteModule } from '@skyux/layout';
@@ -1573,15 +1573,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
1573
1573
  /**
1574
1574
  * @internal
1575
1575
  */
1576
- class SkyAgGridCellEditorDatepickerComponent extends PopupComponent {
1577
- #calendarOpen;
1578
- #params;
1579
- #triggerType;
1580
- #elementRef;
1581
- #changeDetector;
1582
- #themeSvc;
1576
+ class SkyAgGridCellEditorDatepickerComponent {
1583
1577
  constructor() {
1584
- super();
1585
1578
  this.editorForm = new UntypedFormGroup({
1586
1579
  date: new UntypedFormControl(),
1587
1580
  });
@@ -1592,6 +1585,12 @@ class SkyAgGridCellEditorDatepickerComponent extends PopupComponent {
1592
1585
  this.#changeDetector = inject(ChangeDetectorRef);
1593
1586
  this.#themeSvc = inject(SkyThemeService, { optional: true }) || undefined;
1594
1587
  }
1588
+ #calendarOpen;
1589
+ #params;
1590
+ #triggerType;
1591
+ #elementRef;
1592
+ #changeDetector;
1593
+ #themeSvc;
1595
1594
  onFocusOut(event) {
1596
1595
  if (event.relatedTarget &&
1597
1596
  event.relatedTarget === this.#params?.eGridCell) {
@@ -1656,6 +1655,9 @@ class SkyAgGridCellEditorDatepickerComponent extends PopupComponent {
1656
1655
  }
1657
1656
  });
1658
1657
  }
1658
+ isPopup() {
1659
+ return true;
1660
+ }
1659
1661
  getPopupPosition() {
1660
1662
  return 'over';
1661
1663
  }
@@ -1705,7 +1707,7 @@ class SkyAgGridCellEditorDatepickerComponent extends PopupComponent {
1705
1707
  }
1706
1708
  }
1707
1709
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1708
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", 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 }], usesInheritance: true, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.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 }); }
1710
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", 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 }], ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.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 }); }
1709
1711
  }
1710
1712
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyAgGridCellEditorDatepickerComponent, decorators: [{
1711
1713
  type: Component,
@@ -1715,7 +1717,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
1715
1717
  SkyDatepickerModule,
1716
1718
  SkyI18nModule,
1717
1719
  ], 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"] }]
1718
- }], ctorParameters: () => [], propDecorators: { datepickerInput: [{
1720
+ }], propDecorators: { datepickerInput: [{
1719
1721
  type: ViewChild,
1720
1722
  args: ['skyCellEditorDatepickerInput', { read: ElementRef }]
1721
1723
  }], onFocusOut: [{