igniteui-angular 12.3.1 → 12.3.2

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.
@@ -18635,16 +18635,20 @@ IgxButtonModule.decorators = [
18635
18635
  * ```
18636
18636
  */
18637
18637
  class IgxIconService {
18638
- constructor(_sanitizer, _httpClient, _document) {
18638
+ constructor(_sanitizer, _httpClient, _platformUtil, _document) {
18639
+ var _a;
18639
18640
  this._sanitizer = _sanitizer;
18640
18641
  this._httpClient = _httpClient;
18642
+ this._platformUtil = _platformUtil;
18641
18643
  this._document = _document;
18642
18644
  this._family = 'material-icons';
18643
18645
  this._familyAliases = new Map();
18644
18646
  this._cachedSvgIcons = new Map();
18645
18647
  this._iconLoaded = new Subject();
18646
- this._domParser = new DOMParser();
18647
18648
  this.iconLoaded = this._iconLoaded.asObservable();
18649
+ if ((_a = this._platformUtil) === null || _a === void 0 ? void 0 : _a.isBrowser) {
18650
+ this._domParser = new DOMParser();
18651
+ }
18648
18652
  }
18649
18653
  /**
18650
18654
  * Returns the default font-family.
@@ -18764,8 +18768,9 @@ class IgxIconService {
18764
18768
  * @hidden
18765
18769
  */
18766
18770
  cacheSvgIcon(name, value, family = this._family, stripMeta) {
18771
+ var _a;
18767
18772
  family = !!family ? family : this._family;
18768
- if (name && value) {
18773
+ if (((_a = this._platformUtil) === null || _a === void 0 ? void 0 : _a.isBrowser) && name && value) {
18769
18774
  const doc = this._domParser.parseFromString(value, 'image/svg+xml');
18770
18775
  const svg = doc.querySelector('svg');
18771
18776
  if (!this._cachedSvgIcons.has(family)) {
@@ -18790,7 +18795,7 @@ class IgxIconService {
18790
18795
  }
18791
18796
  }
18792
18797
  }
18793
- IgxIconService.ɵprov = i0.ɵɵdefineInjectable({ factory: function IgxIconService_Factory() { return new IgxIconService(i0.ɵɵinject(i1$1.DomSanitizer, 8), i0.ɵɵinject(i2$1.HttpClient, 8), i0.ɵɵinject(i2.DOCUMENT, 8)); }, token: IgxIconService, providedIn: "root" });
18798
+ IgxIconService.ɵprov = i0.ɵɵdefineInjectable({ factory: function IgxIconService_Factory() { return new IgxIconService(i0.ɵɵinject(i1$1.DomSanitizer, 8), i0.ɵɵinject(i2$1.HttpClient, 8), i0.ɵɵinject(PlatformUtil, 8), i0.ɵɵinject(i2.DOCUMENT, 8)); }, token: IgxIconService, providedIn: "root" });
18794
18799
  IgxIconService.decorators = [
18795
18800
  { type: Injectable, args: [{
18796
18801
  providedIn: 'root'
@@ -18799,6 +18804,7 @@ IgxIconService.decorators = [
18799
18804
  IgxIconService.ctorParameters = () => [
18800
18805
  { type: DomSanitizer, decorators: [{ type: Optional }] },
18801
18806
  { type: HttpClient, decorators: [{ type: Optional }] },
18807
+ { type: PlatformUtil, decorators: [{ type: Optional }] },
18802
18808
  { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] }] }
18803
18809
  ];
18804
18810
 
@@ -36845,7 +36851,9 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
36845
36851
  }
36846
36852
  /** @hidden @internal */
36847
36853
  handleInputChange(event) {
36848
- this.searchValue = event.target.value;
36854
+ if (event !== undefined) {
36855
+ this.searchValue = typeof event === 'string' ? event : event.target.value;
36856
+ }
36849
36857
  this._onChangeCallback(this.searchValue);
36850
36858
  if (this.collapsed && this.comboInput.focused) {
36851
36859
  this.open();
@@ -36991,10 +36999,11 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
36991
36999
  };
36992
37000
  this.selectionChanging.emit(args);
36993
37001
  if (!args.cancel) {
36994
- const argsSelection = args.newSelection !== undefined
37002
+ let argsSelection = args.newSelection !== undefined
36995
37003
  && args.newSelection !== null
36996
- ? [args.newSelection]
37004
+ ? args.newSelection
36997
37005
  : [];
37006
+ argsSelection = Array.isArray(argsSelection) ? argsSelection : [argsSelection];
36998
37007
  this.selectionService.select_items(this.id, argsSelection, true);
36999
37008
  if (this._updateInput) {
37000
37009
  this.comboInput.value = this._value = displayText !== args.displayText
@@ -59959,7 +59968,7 @@ IgxTimePickerComponent.decorators = [
59959
59968
  }
59960
59969
  ],
59961
59970
  selector: 'igx-time-picker',
59962
- template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\" [suppressInputAutofocus]=\"this.isDropdown\"\n (click)=\"!this.isDropdown && this.toggle()\">\n <input [displayValuePipe]=\"this.formatter ? displayValue : null\" igxInput [igxDateTimeEditor]=\"this.inputFormat\"\n type=\"text\" [readonly]=\"!this.isDropdown || this.readOnly\" [minValue]=\"this.minValue\" [maxValue]=\"this.maxValue\"\n [locale]=\"this.locale\" [spinDelta]=\"this.itemsDelta\" [spinLoop]=\"this.spinLoop\" [placeholder]=\"this.placeholder\"\n [disabled]=\"this.disabled\" [displayFormat]=\"this.displayFormat\"\n [igxTextSelection]=\"this.isDropdown && !this.readOnly\" role=\"combobox\" aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"!this.toggleDirective.collapsed\" [attr.aria-labelledby]=\"this.label?.id\" />\n\n <igx-prefix *ngIf=\"!this.toggleComponents.length\" (click)=\"this.toggle()\">\n <igx-icon [title]=\"this.value ? resourceStrings.igx_time_picker_change_time : resourceStrings.igx_time_picker_choose_time\">access_time</igx-icon>\n </igx-prefix>\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </ng-container>\n\n <igx-suffix *ngIf=\"this.showClearButton\" (click)=\"this.clear(); $event.stopPropagation()\">\n <igx-icon>clear</igx-icon>\n </igx-suffix>\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint\">\n <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n </ng-container>\n</igx-input-group>\n\n<ng-template #defaultTimePickerActions>\n <div *ngIf=\"this.cancelButtonLabel || this.okButtonLabel\" class=\"igx-time-picker__buttons\">\n <button *ngIf=\"this.cancelButtonLabel\" igxButton=\"flat\" (click)=\"this.cancelButtonClick()\">\n {{this.cancelButtonLabel}}\n </button>\n <button *ngIf=\"this.okButtonLabel\" igxButton=\"flat\" (click)=\"this.okButtonClick()\">\n {{this.okButtonLabel}}\n </button>\n </div>\n</ng-template>\n\n<div #toggleDirective=\"toggle\" igxToggle role=\"dialog\" class=\"igx-time-picker\"\n [ngClass]=\"{'igx-time-picker--dropdown': this.isDropdown, 'igx-time-picker--vertical': this.isVertical && !this.isDropdown}\">\n <div *ngIf=\"!this.isDropdown\" class=\"igx-time-picker__header\">\n <h2 class=\"igx-time-picker__header-hour\">\n <span>{{ this.selectedDate | timeFormatPipe }}</span>\n </h2>\n </div>\n <div class=\"igx-time-picker__main\">\n <div class=\"igx-time-picker__body\">\n <div *ngIf=\"this.showHoursList\" #hourList [igxItemList]=\"'hourList'\">\n <span [igxTimeItem]=\"hour\" #timeItem=\"timeItem\" aria-label=\"hour\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? timeItem.hourValue : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let hour of hourItems | timeItemPipe:'hour':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ hour }}</span>\n </div>\n <div *ngIf=\"this.showMinutesList\" #minuteList [igxItemList]=\"'minuteList'\">\n <span [igxTimeItem]=\"minute\" #timeItem=\"timeItem\" aria-label=\"minutes\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? minute : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let minute of minuteItems | timeItemPipe:'minutes':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ minute }}</span>\n </div>\n <div *ngIf=\"this.showSecondsList\" #secondsList [igxItemList]=\"'secondsList'\">\n <span [igxTimeItem]=\"seconds\" #timeItem=\"timeItem\" aria-label=\"seconds\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? seconds : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let seconds of secondsItems | timeItemPipe:'seconds':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ seconds }}</span>\n </div>\n <div *ngIf=\"this.showAmPmList\" #ampmList [igxItemList]=\"'ampmList'\">\n <span [igxTimeItem]=\"ampm\" #timeItem=\"timeItem\" aria-label=\"ampm\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? ampm : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let ampm of ampmItems | timeItemPipe:'ampm':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ ampm }}</span>\n </div>\n </div>\n <ng-container\n *ngTemplateOutlet=\"timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions\">\n </ng-container>\n </div>\n</div>\n",
59971
+ template: "<igx-input-group [displayDensity]=\"displayDensity\" [type]=\"type\" [suppressInputAutofocus]=\"this.isDropdown\">\n <input [displayValuePipe]=\"this.formatter ? displayValue : null\" igxInput [igxDateTimeEditor]=\"this.inputFormat\"\n type=\"text\" [readonly]=\"!this.isDropdown || this.readOnly\" [minValue]=\"this.minValue\" [maxValue]=\"this.maxValue\"\n [locale]=\"this.locale\" [spinDelta]=\"this.itemsDelta\" [spinLoop]=\"this.spinLoop\" [placeholder]=\"this.placeholder\"\n [disabled]=\"this.disabled\" [displayFormat]=\"this.displayFormat\"\n [igxTextSelection]=\"this.isDropdown && !this.readOnly\" role=\"combobox\" aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"!this.toggleDirective.collapsed\" [attr.aria-labelledby]=\"this.label?.id\"\n (click)=\"!this.isDropdown && this.toggle()\"/>\n\n <igx-prefix *ngIf=\"!this.toggleComponents.length\" (click)=\"this.toggle()\">\n <igx-icon [title]=\"this.value ? resourceStrings.igx_time_picker_change_time : resourceStrings.igx_time_picker_choose_time\">access_time</igx-icon>\n </igx-prefix>\n\n <ng-container ngProjectAs=\"[igxLabel]\">\n <ng-content select=\"[igxLabel]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-prefix\">\n <ng-content select=\"igx-prefix,[igxPrefix]\"></ng-content>\n </ng-container>\n\n <igx-suffix *ngIf=\"this.showClearButton\" (click)=\"this.clear(); $event.stopPropagation()\">\n <igx-icon>clear</igx-icon>\n </igx-suffix>\n\n <ng-container ngProjectAs=\"igx-suffix\">\n <ng-content select=\"igx-suffix,[igxSuffix]\"></ng-content>\n </ng-container>\n <ng-container ngProjectAs=\"igx-hint\">\n <ng-content select=\"igx-hint,[igxHint]\"></ng-content>\n </ng-container>\n</igx-input-group>\n\n<ng-template #defaultTimePickerActions>\n <div *ngIf=\"this.cancelButtonLabel || this.okButtonLabel\" class=\"igx-time-picker__buttons\">\n <button *ngIf=\"this.cancelButtonLabel\" igxButton=\"flat\" (click)=\"this.cancelButtonClick()\">\n {{this.cancelButtonLabel}}\n </button>\n <button *ngIf=\"this.okButtonLabel\" igxButton=\"flat\" (click)=\"this.okButtonClick()\">\n {{this.okButtonLabel}}\n </button>\n </div>\n</ng-template>\n\n<div #toggleDirective=\"toggle\" igxToggle role=\"dialog\" class=\"igx-time-picker\"\n [ngClass]=\"{'igx-time-picker--dropdown': this.isDropdown, 'igx-time-picker--vertical': this.isVertical && !this.isDropdown}\">\n <div *ngIf=\"!this.isDropdown\" class=\"igx-time-picker__header\">\n <h2 class=\"igx-time-picker__header-hour\">\n <span>{{ this.selectedDate | timeFormatPipe }}</span>\n </h2>\n </div>\n <div class=\"igx-time-picker__main\">\n <div class=\"igx-time-picker__body\">\n <div *ngIf=\"this.showHoursList\" #hourList [igxItemList]=\"'hourList'\">\n <span [igxTimeItem]=\"hour\" #timeItem=\"timeItem\" aria-label=\"hour\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? timeItem.hourValue : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let hour of hourItems | timeItemPipe:'hour':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ hour }}</span>\n </div>\n <div *ngIf=\"this.showMinutesList\" #minuteList [igxItemList]=\"'minuteList'\">\n <span [igxTimeItem]=\"minute\" #timeItem=\"timeItem\" aria-label=\"minutes\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? minute : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let minute of minuteItems | timeItemPipe:'minutes':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ minute }}</span>\n </div>\n <div *ngIf=\"this.showSecondsList\" #secondsList [igxItemList]=\"'secondsList'\">\n <span [igxTimeItem]=\"seconds\" #timeItem=\"timeItem\" aria-label=\"seconds\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? seconds : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let seconds of secondsItems | timeItemPipe:'seconds':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ seconds }}</span>\n </div>\n <div *ngIf=\"this.showAmPmList\" #ampmList [igxItemList]=\"'ampmList'\">\n <span [igxTimeItem]=\"ampm\" #timeItem=\"timeItem\" aria-label=\"ampm\"\n [attr.role]=\"timeItem.isSelectedTime ? 'spinbutton' : null\"\n [attr.aria-valuenow]=\"timeItem.isSelectedTime ? ampm : null\"\n [attr.aria-valuemin]=\"timeItem.isSelectedTime ? timeItem.minValue : null\"\n [attr.aria-valuemax]=\"timeItem.isSelectedTime ? timeItem.maxValue : null\"\n *ngFor=\"let ampm of ampmItems | timeItemPipe:'ampm':this.selectedDate:this.minDropdownValue:this.maxDropdownValue\">{{ ampm }}</span>\n </div>\n </div>\n <ng-container\n *ngTemplateOutlet=\"timePickerActionsDirective ? timePickerActionsDirective.template : defaultTimePickerActions\">\n </ng-container>\n </div>\n</div>\n",
59963
59972
  styles: [`:host {
59964
59973
  display: block;
59965
59974
  }`]