@sebgroup/green-angular 1.7.1 → 1.8.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.
@@ -314,7 +314,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
314
314
  }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
315
315
 
316
316
  class NggContextMenuComponent {
317
- constructor(elementRef, closeContextMenu) {
317
+ constructor(changeDetectorRef, elementRef, closeContextMenu) {
318
+ this.changeDetectorRef = changeDetectorRef;
318
319
  this.elementRef = elementRef;
319
320
  this.closeContextMenu = closeContextMenu;
320
321
  this.direction = 'ltr';
@@ -367,6 +368,7 @@ class NggContextMenuComponent {
367
368
  }
368
369
  close() {
369
370
  this.isActive = false;
371
+ this.changeDetectorRef.markForCheck();
370
372
  }
371
373
  onItemClick(item) {
372
374
  this.contextMenuItemClicked.emit(item);
@@ -402,12 +404,12 @@ class NggContextMenuComponent {
402
404
  }
403
405
  }
404
406
  }
405
- NggContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: ON_SCROLL_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component });
406
- NggContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggContextMenuComponent, selector: "ngg-context-menu", inputs: { direction: "direction", menuItems: "menuItems", menuItemTemplate: "menuItemTemplate", menuAnchorTemplate: "menuAnchorTemplate", closeOnScroll: "closeOnScroll" }, outputs: { contextMenuItemClicked: "contextMenuItemClicked" }, host: { listeners: { "document:click": "onDocumentClick($event.target)" } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["contextMenuPopover"], descendants: true }, { propertyName: "anchor", first: true, predicate: ["contextMenuAnchor"], descendants: true }], ngImport: i0, template: "<button\n #contextMenuAnchor\n class=\"ghost small\"\n [class.active]=\"isActive\"\n (click)=\"open()\"\n>\n <ng-container\n [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n >\n </ng-container>\n</button>\n\n<div\n class=\"popover popover-context-menu\"\n [class.active]=\"isActive\"\n [style.top]=\"top\"\n [style.left]=\"left\"\n #contextMenuPopover\n>\n <ul role=\"listbox\">\n <li\n *ngFor=\"let menuItem of menuItems\"\n (click)=\"onItemClick(menuItem)\"\n tabindex=\"0\"\n (keydown)=\"onMenuItemKeyDown($event, menuItem)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n >\n </ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
407
+ NggContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: ON_SCROLL_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component });
408
+ NggContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggContextMenuComponent, selector: "ngg-context-menu", inputs: { direction: "direction", menuItems: "menuItems", menuItemTemplate: "menuItemTemplate", menuAnchorTemplate: "menuAnchorTemplate", closeOnScroll: "closeOnScroll" }, outputs: { contextMenuItemClicked: "contextMenuItemClicked" }, host: { listeners: { "document:click": "onDocumentClick($event.target)" } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["contextMenuPopover"], descendants: true }, { propertyName: "anchor", first: true, predicate: ["contextMenuAnchor"], descendants: true }], ngImport: i0, template: "<button\n #contextMenuAnchor\n class=\"ghost small px-3\"\n [class.active]=\"isActive\"\n (click)=\"open()\"\n>\n <ng-container\n [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n >\n </ng-container>\n</button>\n\n<div\n class=\"popover popover-context-menu\"\n [class.active]=\"isActive\"\n [style.top]=\"top\"\n [style.left]=\"left\"\n #contextMenuPopover\n>\n <ul role=\"listbox\">\n <li\n *ngFor=\"let menuItem of menuItems\"\n (click)=\"onItemClick(menuItem)\"\n tabindex=\"0\"\n (keydown)=\"onMenuItemKeyDown($event, menuItem)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n >\n </ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
407
409
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggContextMenuComponent, decorators: [{
408
410
  type: Component,
409
- args: [{ selector: 'ngg-context-menu', template: "<button\n #contextMenuAnchor\n class=\"ghost small\"\n [class.active]=\"isActive\"\n (click)=\"open()\"\n>\n <ng-container\n [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n >\n </ng-container>\n</button>\n\n<div\n class=\"popover popover-context-menu\"\n [class.active]=\"isActive\"\n [style.top]=\"top\"\n [style.left]=\"left\"\n #contextMenuPopover\n>\n <ul role=\"listbox\">\n <li\n *ngFor=\"let menuItem of menuItems\"\n (click)=\"onItemClick(menuItem)\"\n tabindex=\"0\"\n (keydown)=\"onMenuItemKeyDown($event, menuItem)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n >\n </ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n" }]
410
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2.Subject, decorators: [{
411
+ args: [{ selector: 'ngg-context-menu', template: "<button\n #contextMenuAnchor\n class=\"ghost small px-3\"\n [class.active]=\"isActive\"\n (click)=\"open()\"\n>\n <ng-container\n [ngTemplateOutlet]=\"menuAnchorTemplate ?? defaultButtonTemplate\"\n >\n </ng-container>\n</button>\n\n<div\n class=\"popover popover-context-menu\"\n [class.active]=\"isActive\"\n [style.top]=\"top\"\n [style.left]=\"left\"\n #contextMenuPopover\n>\n <ul role=\"listbox\">\n <li\n *ngFor=\"let menuItem of menuItems\"\n (click)=\"onItemClick(menuItem)\"\n tabindex=\"0\"\n (keydown)=\"onMenuItemKeyDown($event, menuItem)\"\n >\n <ng-container\n [ngTemplateOutlet]=\"menuItemTemplate ?? defaultMenuItemTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"\n >\n </ng-container>\n </li>\n </ul>\n</div>\n\n<ng-template #defaultMenuItemTemplate let-menuItem>\n <span>{{ menuItem.label }}</span>\n</ng-template>\n\n<ng-template #defaultButtonTemplate>\n <i class=\"sg-icon sg-icon-ellipsis\">Open context menu</i>\n</ng-template>\n" }]
412
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2.Subject, decorators: [{
411
413
  type: Optional
412
414
  }, {
413
415
  type: Inject,
@@ -529,7 +531,7 @@ class NggDropdownComponent {
529
531
  this.cd.detectChanges();
530
532
  }, (value) => {
531
533
  this.updateValue(value);
532
- });
534
+ }, this.fixedPlacement);
533
535
  }
534
536
  }
535
537
  ngOnDestroy() {
@@ -583,7 +585,7 @@ class NggDropdownComponent {
583
585
  }
584
586
  }
585
587
  NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: Injector }], target: i0.ɵɵFactoryTarget.Component });
586
- NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", useValue: "useValue", label: "label", options: "options", valid: "valid", invalid: "invalid", compareWith: "compareWith", searchFilter: "searchFilter", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
588
+ NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: { id: "id", texts: "texts", loop: "loop", display: "display", useValue: "useValue", label: "label", options: "options", valid: "valid", invalid: "invalid", compareWith: "compareWith", searchFilter: "searchFilter", fixedPlacement: "fixedPlacement", multiSelect: "multiSelect", searchable: "searchable", value: "value" }, outputs: { valueChange: "valueChange", touched: "touched" }, providers: [
587
589
  {
588
590
  provide: NG_VALUE_ACCESSOR,
589
591
  useExisting: NggDropdownComponent,
@@ -624,6 +626,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
624
626
  type: Input
625
627
  }], searchFilter: [{
626
628
  type: Input
629
+ }], fixedPlacement: [{
630
+ type: Input
627
631
  }], multiSelect: [{
628
632
  type: Input
629
633
  }], searchable: [{
@@ -774,7 +778,7 @@ NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
774
778
  useExisting: NggDatepickerComponent,
775
779
  multi: true,
776
780
  },
777
- ], viewQueries: [{ propertyName: "datepickerDialogElRef", first: true, predicate: ["datepickerDialogElRef"], descendants: true }, { propertyName: "dateInputElRef", first: true, predicate: ["dateInputElRef"], descendants: true }, { propertyName: "datepickerElRef", first: true, predicate: ["datepickerElRef"], descendants: true }, { propertyName: "datepickerTriggerElRef", first: true, predicate: ["datepickerTriggerElRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n <label *ngIf=\"label\" [for]=\"id\">{{ label }}</label>\n <div\n class=\"group\"\n #datepickerElRef\n [class.is-valid]=\"isValid\"\n [class.is-invalid]=\"isValid === false\"\n >\n <input\n (blur)=\"blurInput()\"\n [attr.id]=\"id\"\n [attr.aria-describedby]=\"\n formInfo?.innerText && formInfo.innerText.length > 0\n ? id + '_info'\n : null\n \"\n type=\"text\"\n placeholder=\"yyyy-mm-dd\"\n #dateInputElRef\n [value]=\"data?.formattedSelectedDate || ''\"\n (change)=\"onDateChange(dateInputElRef.value)\"\n />\n <button\n #datepickerTriggerElRef\n (click)=\"dp?.toggle()\"\n type=\"button\"\n class=\"primary\"\n >\n <i class=\"sg-icon sg-icon-calendar\">Select date</i>\n </button>\n </div>\n <span class=\"form-info\" #formInfo [attr.id]=\"id + '_info'\"\n ><ng-content select=\"[data-form-info]\"></ng-content\n ></span>\n</div>\n<!-- TODO: get or set attributes from within datepicker instance (dp) -->\n<div\n #datepickerDialogElRef\n class=\"popover popover-datepicker\"\n [class.active]=\"dp?.state?.isActive\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Choose Date\"\n (focusout)=\"focusoutDialog($event)\"\n>\n <button type=\"button\" class=\"close\" (click)=\"dp?.close()\">\n <i></i>Close\n </button>\n <div class=\"sg-date\">\n <header>\n <button type=\"button\" class=\"link\" (click)=\"dp?.sub(1, 'months')\">\n <i class=\"sg-icon sg-icon-previous\">Previous month</i>\n </button>\n <ngg-dropdown\n [options]=\"months\"\n display=\"key\"\n text=\"Select\"\n [value]=\"data?.month\"\n (valueChange)=\"dp?.setMonth($event)\"\n ></ngg-dropdown>\n <ngg-dropdown\n *ngIf=\"years\"\n [options]=\"years\"\n display=\"key\"\n text=\"Select\"\n [value]=\"data?.year\"\n (valueChange)=\"dp?.setYear($event)\"\n ></ngg-dropdown>\n <button type=\"button\" class=\"link\" (click)=\"dp?.add(1, 'months')\">\n <i class=\"sg-icon sg-icon-next\">Next month</i>\n </button>\n </header>\n <main>\n <table role=\"grid\">\n <thead>\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let header of data?.calendar?.headers\"\n [abbr]=\"header.abbr\"\n [class.sg-week-header]=\"header.type === 'week'\"\n [class.sg-day-header]=\"header.type === 'day'\"\n >\n {{ header.displayText }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n *ngFor=\"\n let week of data?.calendar?.calendarGrid;\n trackBy: trackWeek;\n let i = index\n \"\n >\n <th\n *ngIf=\"data?.calendar?.weekNumbers as weekNumbers\"\n class=\"sg-week-number\"\n >\n {{ weekNumbers[i] }}\n </th>\n <td\n *ngFor=\"let day of week\"\n [attr.data-date]=\"day.formattedDate\"\n [attr.role]=\"day.selected ? 'gridcell' : null\"\n [attr.aria-selected]=\"\n day.selected && !data?.highlightedDate ? true : null\n \"\n [class.disabled]=\"day.disabled\"\n [class.sg-date-today]=\"day.today\"\n [title]=\"day.today ? 'Today' : ''\"\n [tabIndex]=\"\n day.highlighted ||\n (day.selected && !data?.highlightedDate) ||\n (day.today && !data?.highlightedDate && !data?.selectedDate)\n ? 0\n : -1\n \"\n (click)=\"day.currentMonth && dp?.select(day.date)\"\n >\n {{ day.day }}\n </td>\n </tr>\n </tbody>\n </table>\n </main>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: ["id", "texts", "loop", "display", "useValue", "label", "options", "valid", "invalid", "compareWith", "searchFilter", "multiSelect", "searchable", "value"], outputs: ["valueChange", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
781
+ ], viewQueries: [{ propertyName: "datepickerDialogElRef", first: true, predicate: ["datepickerDialogElRef"], descendants: true }, { propertyName: "dateInputElRef", first: true, predicate: ["dateInputElRef"], descendants: true }, { propertyName: "datepickerElRef", first: true, predicate: ["datepickerElRef"], descendants: true }, { propertyName: "datepickerTriggerElRef", first: true, predicate: ["datepickerTriggerElRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n <label *ngIf=\"label\" [for]=\"id\">{{ label }}</label>\n <div\n class=\"group\"\n #datepickerElRef\n [class.is-valid]=\"isValid\"\n [class.is-invalid]=\"isValid === false\"\n >\n <input\n (blur)=\"blurInput()\"\n [attr.id]=\"id\"\n [attr.aria-describedby]=\"\n formInfo?.innerText && formInfo.innerText.length > 0\n ? id + '_info'\n : null\n \"\n type=\"text\"\n placeholder=\"yyyy-mm-dd\"\n #dateInputElRef\n [value]=\"data?.formattedSelectedDate || ''\"\n (change)=\"onDateChange(dateInputElRef.value)\"\n />\n <button\n #datepickerTriggerElRef\n (click)=\"dp?.toggle()\"\n type=\"button\"\n class=\"primary\"\n >\n <i class=\"sg-icon sg-icon-calendar\">Select date</i>\n </button>\n </div>\n <span class=\"form-info\" #formInfo [attr.id]=\"id + '_info'\"\n ><ng-content select=\"[data-form-info]\"></ng-content\n ></span>\n</div>\n<!-- TODO: get or set attributes from within datepicker instance (dp) -->\n<div\n #datepickerDialogElRef\n class=\"popover popover-datepicker\"\n [class.active]=\"dp?.state?.isActive\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Choose Date\"\n (focusout)=\"focusoutDialog($event)\"\n>\n <button type=\"button\" class=\"close\" (click)=\"dp?.close()\">\n <i></i>Close\n </button>\n <div class=\"sg-date\">\n <header>\n <button type=\"button\" class=\"link\" (click)=\"dp?.sub(1, 'months')\">\n <i class=\"sg-icon sg-icon-previous\">Previous month</i>\n </button>\n <ngg-dropdown\n [options]=\"months\"\n display=\"key\"\n text=\"Select\"\n [value]=\"data?.month\"\n (valueChange)=\"dp?.setMonth($event)\"\n ></ngg-dropdown>\n <ngg-dropdown\n *ngIf=\"years\"\n [options]=\"years\"\n display=\"key\"\n text=\"Select\"\n [value]=\"data?.year\"\n (valueChange)=\"dp?.setYear($event)\"\n ></ngg-dropdown>\n <button type=\"button\" class=\"link\" (click)=\"dp?.add(1, 'months')\">\n <i class=\"sg-icon sg-icon-next\">Next month</i>\n </button>\n </header>\n <main>\n <table role=\"grid\">\n <thead>\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let header of data?.calendar?.headers\"\n [abbr]=\"header.abbr\"\n [class.sg-week-header]=\"header.type === 'week'\"\n [class.sg-day-header]=\"header.type === 'day'\"\n >\n {{ header.displayText }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n *ngFor=\"\n let week of data?.calendar?.calendarGrid;\n trackBy: trackWeek;\n let i = index\n \"\n >\n <th\n *ngIf=\"data?.calendar?.weekNumbers as weekNumbers\"\n class=\"sg-week-number\"\n >\n {{ weekNumbers[i] }}\n </th>\n <td\n *ngFor=\"let day of week\"\n [attr.data-date]=\"day.formattedDate\"\n [attr.role]=\"day.selected ? 'gridcell' : null\"\n [attr.aria-selected]=\"\n day.selected && !data?.highlightedDate ? true : null\n \"\n [class.disabled]=\"day.disabled\"\n [class.sg-date-today]=\"day.today\"\n [title]=\"day.today ? 'Today' : ''\"\n [tabIndex]=\"\n day.highlighted ||\n (day.selected && !data?.highlightedDate) ||\n (day.today && !data?.highlightedDate && !data?.selectedDate)\n ? 0\n : -1\n \"\n (click)=\"day.currentMonth && dp?.select(day.date)\"\n >\n {{ day.day }}\n </td>\n </tr>\n </tbody>\n </table>\n </main>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NggDropdownComponent, selector: "ngg-dropdown", inputs: ["id", "texts", "loop", "display", "useValue", "label", "options", "valid", "invalid", "compareWith", "searchFilter", "fixedPlacement", "multiSelect", "searchable", "value"], outputs: ["valueChange", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
778
782
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggDatepickerComponent, decorators: [{
779
783
  type: Component,
780
784
  args: [{ selector: 'ngg-datepicker', providers: [
@@ -1334,7 +1338,7 @@ NggSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
1334
1338
  useExisting: NggSliderComponent,
1335
1339
  multi: true,
1336
1340
  },
1337
- ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n <div>\n <label [attr.for]=\"name\">{{ label }}</label>\n <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n </div>\n <ng-container *ngIf=\"hasTextbox\">\n <ng-container *ngIf=\"!!unitLabel\">\n <div class=\"group group-border\">\n <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n <span class=\"form-text\">{{ unitLabel }}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!unitLabel\">\n <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n </ng-container>\n </ng-container>\n</div>\n\n<input\n type=\"range\"\n [attr.id]=\"name\"\n [attr.name]=\"name\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.step]=\"step\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n [ngStyle]=\"style\"\n (blur)=\"onBlur()\"\n (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n <input\n type=\"number\"\n [(ngModel)]=\"value\"\n [class.is-invalid]=\"!!errorMessage\"\n [attr.name]=\"name\"\n [attr.id]=\"name + '-textbox'\"\n [attr.placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (input)=\"handleChange()\"\n />\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1341
+ ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n <div>\n <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n </div>\n <ng-container *ngIf=\"hasTextbox\">\n <ng-container *ngIf=\"!!unitLabel\">\n <div class=\"group group-border\">\n <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n <span class=\"form-text\">{{ unitLabel }}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!unitLabel\">\n <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n </ng-container>\n </ng-container>\n</div>\n\n<input\n type=\"range\"\n [attr.id]=\"name\"\n [attr.name]=\"name\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.step]=\"step\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n [ngStyle]=\"style\"\n (blur)=\"onBlur()\"\n (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n <input\n type=\"number\"\n [(ngModel)]=\"value\"\n [class.is-invalid]=\"!!errorMessage\"\n [attr.name]=\"name\"\n [attr.id]=\"name + '-textbox'\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-labelledby]=\"name + '-label'\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (input)=\"handleChange()\"\n />\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1338
1342
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NggSliderComponent, decorators: [{
1339
1343
  type: Component,
1340
1344
  args: [{ selector: 'ngg-slider', providers: [
@@ -1343,7 +1347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
1343
1347
  useExisting: NggSliderComponent,
1344
1348
  multi: true,
1345
1349
  },
1346
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n <div>\n <label [attr.for]=\"name\">{{ label }}</label>\n <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n </div>\n <ng-container *ngIf=\"hasTextbox\">\n <ng-container *ngIf=\"!!unitLabel\">\n <div class=\"group group-border\">\n <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n <span class=\"form-text\">{{ unitLabel }}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!unitLabel\">\n <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n </ng-container>\n </ng-container>\n</div>\n\n<input\n type=\"range\"\n [attr.id]=\"name\"\n [attr.name]=\"name\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.step]=\"step\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n [ngStyle]=\"style\"\n (blur)=\"onBlur()\"\n (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n <input\n type=\"number\"\n [(ngModel)]=\"value\"\n [class.is-invalid]=\"!!errorMessage\"\n [attr.name]=\"name\"\n [attr.id]=\"name + '-textbox'\"\n [attr.placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (input)=\"handleChange()\"\n />\n</ng-template>\n" }]
1350
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n <div>\n <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n </div>\n <ng-container *ngIf=\"hasTextbox\">\n <ng-container *ngIf=\"!!unitLabel\">\n <div class=\"group group-border\">\n <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n <span class=\"form-text\">{{ unitLabel }}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!unitLabel\">\n <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n </ng-container>\n </ng-container>\n</div>\n\n<input\n type=\"range\"\n [attr.id]=\"name\"\n [attr.name]=\"name\"\n [attr.min]=\"min\"\n [attr.max]=\"max\"\n [attr.step]=\"step\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"value\"\n [ngStyle]=\"style\"\n (blur)=\"onBlur()\"\n (input)=\"handleChange()\"\n/>\n\n<p *ngIf=\"!!errorMessage\" class=\"gds-slider-error-info\">\n {{ errorMessage }}\n</p>\n\n<ng-template #inputField>\n <input\n type=\"number\"\n [(ngModel)]=\"value\"\n [class.is-invalid]=\"!!errorMessage\"\n [attr.name]=\"name\"\n [attr.id]=\"name + '-textbox'\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-labelledby]=\"name + '-label'\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (input)=\"handleChange()\"\n />\n</ng-template>\n" }]
1347
1351
  }], propDecorators: { name: [{
1348
1352
  type: Input
1349
1353
  }], min: [{