@sebgroup/green-angular 1.1.0 → 1.3.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.
- package/esm2020/lib/accordion/accordion-list-item.component.mjs +3 -3
- package/esm2020/lib/accordion/accordion.component.mjs +3 -3
- package/esm2020/lib/accordion/accordion.module.mjs +5 -5
- package/esm2020/lib/badge/badge.component.mjs +12 -12
- package/esm2020/lib/badge/badge.module.mjs +5 -5
- package/esm2020/lib/button/button.component.mjs +3 -3
- package/esm2020/lib/button/button.module.mjs +5 -5
- package/esm2020/lib/datepicker/datepicker.component.mjs +32 -32
- package/esm2020/lib/datepicker/datepicker.module.mjs +5 -5
- package/esm2020/lib/dropdown/dropdown-option.directive.mjs +3 -3
- package/esm2020/lib/dropdown/dropdown.component.mjs +21 -21
- package/esm2020/lib/dropdown/dropdown.module.mjs +5 -5
- package/esm2020/lib/green-angular.module.mjs +5 -5
- package/esm2020/lib/modal/modal.component.mjs +23 -23
- package/esm2020/lib/modal/modal.module.mjs +5 -5
- package/esm2020/lib/pagination/pagination.component.mjs +3 -3
- package/esm2020/lib/pagination/pagination.module.mjs +5 -5
- package/esm2020/lib/progress-circle/progress-circle.component.mjs +8 -18
- package/esm2020/lib/progress-circle/progress-circle.module.mjs +5 -5
- package/esm2020/lib/segmented-control/segmented-control.component.mjs +9 -14
- package/esm2020/lib/segmented-control/segmented-control.module.mjs +5 -5
- package/esm2020/lib/slider/slider.component.mjs +21 -19
- package/esm2020/lib/slider/slider.module.mjs +5 -5
- package/fesm2015/sebgroup-green-angular.mjs +179 -191
- package/fesm2015/sebgroup-green-angular.mjs.map +1 -1
- package/fesm2020/sebgroup-green-angular.mjs +175 -188
- package/fesm2020/sebgroup-green-angular.mjs.map +1 -1
- package/lib/accordion/accordion-list-item.component.d.ts +1 -1
- package/lib/accordion/accordion.component.d.ts +1 -1
- package/lib/badge/badge.component.d.ts +1 -1
- package/lib/button/button.component.d.ts +1 -1
- package/lib/datepicker/datepicker.component.d.ts +1 -1
- package/lib/dropdown/dropdown-option.directive.d.ts +1 -1
- package/lib/dropdown/dropdown.component.d.ts +1 -1
- package/lib/modal/modal.component.d.ts +4 -4
- package/lib/pagination/pagination.component.d.ts +1 -1
- package/lib/progress-circle/progress-circle.component.d.ts +1 -2
- package/lib/segmented-control/segmented-control.component.d.ts +1 -1
- package/lib/slider/slider.component.d.ts +6 -6
- package/package.json +5 -5
- package/sebgroup-green-angular.d.ts +0 -5
|
@@ -2,14 +2,14 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { EventEmitter, Component, Input, Output, ContentChildren, NgModule, ChangeDetectionStrategy, HostBinding, Directive, Injector, Inject, ViewChild, ContentChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import { randomId, dropdownValues, createDropdown, months, years, createDatepicker,
|
|
6
|
-
import * as i2
|
|
5
|
+
import { randomId, dropdownValues, createDropdown, months, years, createDatepicker, calculateDegrees, sliderColors, getSliderTrackBackground, PaginationI18n } from '@sebgroup/extract';
|
|
6
|
+
import * as i2 from '@angular/forms';
|
|
7
7
|
import { NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
8
8
|
import { startOfDay, endOfDay } from 'date-fns';
|
|
9
9
|
import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
|
|
10
10
|
import * as i1$1 from '@angular/cdk/a11y';
|
|
11
11
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
12
|
-
import * as
|
|
12
|
+
import * as i1$2 from '@angular/router';
|
|
13
13
|
import { RouterModule } from '@angular/router';
|
|
14
14
|
|
|
15
15
|
class NggAccordionListItemComponent {
|
|
@@ -40,9 +40,9 @@ class NggAccordionListItemComponent {
|
|
|
40
40
|
this.expandedChange.emit(this);
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
|
-
NggAccordionListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
44
|
-
NggAccordionListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
45
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
43
|
+
NggAccordionListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggAccordionListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
44
|
+
NggAccordionListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggAccordionListItemComponent, selector: "div[ngg-accordion-list-item]", inputs: { id: "id", listItemHeader: "listItemHeader", listItemSubHeader: "listItemSubHeader" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<ng-container data-testid=\"accordion-list-item-root\">\n <div role=\"heading\" aria-level=\"2\" [attr.id]=\"id\">\n <button data-testid=\"accordion-list-item-expander-button\" [attr.id]=\"id + '_header'\" (click)=\"toggleExpanded()\"\n tabindex=\"0\" [attr.aria-expanded]=\"this.isExpanded\" [attr.aria-controls]=\"id + '_section'\">\n <span data-testid=\"accordion-list-item-header\">{{listItemHeader}}</span>\n <span data-testid=\"accordion-list-item-subheader\">{{listItemSubHeader}}</span>\n <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18.8095 9.22817L18.1907 8.60942C18.0438 8.46255 17.8063 8.46255 17.6595 8.60942L12.0001 14.2563L6.34072 8.60942C6.19385 8.46255 5.95635 8.46255 5.80947 8.60942L5.19072 9.22817C5.04385 9.37505 5.04385 9.61255 5.19072 9.75942L11.7345 16.3032C11.8813 16.45 12.1188 16.45 12.2657 16.3032L18.8095 9.75942C18.9563 9.61255 18.9563 9.37505 18.8095 9.22817Z\"\n fill=\"#333333\" />\n </svg>\n </button>\n <div role=\"region\" [hidden]=\"!this.isExpanded\"\n [ngStyle]=\"{height: this.contentHeight}\" [id]=\"id + '_section'\" [attr.aria-labelledby]=\"id + '_header'\"\n data-testid=\"accordion-list-item-content\">\n <div>\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</ng-container>", dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
45
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggAccordionListItemComponent, decorators: [{
|
|
46
46
|
type: Component,
|
|
47
47
|
args: [{ selector: 'div[ngg-accordion-list-item]', template: "<ng-container data-testid=\"accordion-list-item-root\">\n <div role=\"heading\" aria-level=\"2\" [attr.id]=\"id\">\n <button data-testid=\"accordion-list-item-expander-button\" [attr.id]=\"id + '_header'\" (click)=\"toggleExpanded()\"\n tabindex=\"0\" [attr.aria-expanded]=\"this.isExpanded\" [attr.aria-controls]=\"id + '_section'\">\n <span data-testid=\"accordion-list-item-header\">{{listItemHeader}}</span>\n <span data-testid=\"accordion-list-item-subheader\">{{listItemSubHeader}}</span>\n <svg width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18.8095 9.22817L18.1907 8.60942C18.0438 8.46255 17.8063 8.46255 17.6595 8.60942L12.0001 14.2563L6.34072 8.60942C6.19385 8.46255 5.95635 8.46255 5.80947 8.60942L5.19072 9.22817C5.04385 9.37505 5.04385 9.61255 5.19072 9.75942L11.7345 16.3032C11.8813 16.45 12.1188 16.45 12.2657 16.3032L18.8095 9.75942C18.9563 9.61255 18.9563 9.37505 18.8095 9.22817Z\"\n fill=\"#333333\" />\n </svg>\n </button>\n <div role=\"region\" [hidden]=\"!this.isExpanded\"\n [ngStyle]=\"{height: this.contentHeight}\" [id]=\"id + '_section'\" [attr.aria-labelledby]=\"id + '_header'\"\n data-testid=\"accordion-list-item-content\">\n <div>\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</ng-container>" }]
|
|
48
48
|
}], propDecorators: { id: [{
|
|
@@ -112,9 +112,9 @@ class NggAccordionComponent {
|
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
|
-
NggAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
116
|
-
NggAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
117
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
115
|
+
NggAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
116
|
+
NggAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggAccordionComponent, selector: "ngg-accordion", inputs: { closeOthers: "closeOthers", expandAll: "expandAll" }, queries: [{ propertyName: "items", predicate: NggAccordionListItemComponent }], ngImport: i0, template: "<div class=\"accordion\" data-testid=\"accordion-root\">\n <ng-content></ng-content>\n</div>\n" });
|
|
117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggAccordionComponent, decorators: [{
|
|
118
118
|
type: Component,
|
|
119
119
|
args: [{ selector: "ngg-accordion", template: "<div class=\"accordion\" data-testid=\"accordion-root\">\n <ng-content></ng-content>\n</div>\n" }]
|
|
120
120
|
}], propDecorators: { items: [{
|
|
@@ -128,10 +128,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
128
128
|
|
|
129
129
|
class NggAccordionModule {
|
|
130
130
|
}
|
|
131
|
-
NggAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
132
|
-
NggAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
133
|
-
NggAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
134
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
131
|
+
NggAccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
132
|
+
NggAccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggAccordionModule, declarations: [NggAccordionListItemComponent, NggAccordionComponent], imports: [CommonModule], exports: [NggAccordionListItemComponent, NggAccordionComponent] });
|
|
133
|
+
NggAccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggAccordionModule, imports: [CommonModule] });
|
|
134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggAccordionModule, decorators: [{
|
|
135
135
|
type: NgModule,
|
|
136
136
|
args: [{
|
|
137
137
|
imports: [CommonModule],
|
|
@@ -141,13 +141,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
141
141
|
}] });
|
|
142
142
|
|
|
143
143
|
class NggBadgeComponent {
|
|
144
|
-
//eslint-disable-next-line
|
|
145
|
-
constructor() {
|
|
146
|
-
/** The color of the component */
|
|
147
|
-
this.badgeType = '';
|
|
148
|
-
/** Callback when component is dismissed */
|
|
149
|
-
this.handleClose = new EventEmitter();
|
|
150
|
-
}
|
|
151
144
|
/** Flag whether the component can be dismissed */
|
|
152
145
|
set isCloseable(value) {
|
|
153
146
|
this._isCloseable = value;
|
|
@@ -158,6 +151,13 @@ class NggBadgeComponent {
|
|
|
158
151
|
get class() {
|
|
159
152
|
return ['badge', this.badgeType].join(' ');
|
|
160
153
|
}
|
|
154
|
+
//eslint-disable-next-line
|
|
155
|
+
constructor() {
|
|
156
|
+
/** The color of the component */
|
|
157
|
+
this.badgeType = '';
|
|
158
|
+
/** Callback when component is dismissed */
|
|
159
|
+
this.handleClose = new EventEmitter();
|
|
160
|
+
}
|
|
161
161
|
ngOnInit() {
|
|
162
162
|
if (!!this.customColor || !!this.customBackgroundColor) {
|
|
163
163
|
this.badgeType = '';
|
|
@@ -167,8 +167,8 @@ class NggBadgeComponent {
|
|
|
167
167
|
this.handleClose.emit(e);
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
|
-
NggBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
171
|
-
NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
170
|
+
NggBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
171
|
+
NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggBadgeComponent, selector: "[ngg-badge]", inputs: { badgeType: "badgeType", isCloseable: "isCloseable", closeText: "closeText", customColor: "customColor", customBackgroundColor: "customBackgroundColor" }, outputs: { handleClose: "handleClose" }, host: { properties: { "style.color": "this.customColor", "style.background-color": "this.customBackgroundColor", "class": "this.class" } }, ngImport: i0, template: `
|
|
172
172
|
<strong>
|
|
173
173
|
<ng-content></ng-content>
|
|
174
174
|
</strong>
|
|
@@ -176,8 +176,8 @@ NggBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
|
|
|
176
176
|
{{ closeText }}
|
|
177
177
|
<i></i>
|
|
178
178
|
</button>
|
|
179
|
-
`, isInline: true,
|
|
180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
179
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggBadgeComponent, decorators: [{
|
|
181
181
|
type: Component,
|
|
182
182
|
args: [{
|
|
183
183
|
// we need to disable this warning since we don't want the badge component to create a new element
|
|
@@ -219,10 +219,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
219
219
|
|
|
220
220
|
class NggBadgeModule {
|
|
221
221
|
}
|
|
222
|
-
NggBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
223
|
-
NggBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
224
|
-
NggBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
222
|
+
NggBadgeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
223
|
+
NggBadgeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggBadgeModule, declarations: [NggBadgeComponent], imports: [CommonModule], exports: [NggBadgeComponent] });
|
|
224
|
+
NggBadgeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggBadgeModule, imports: [CommonModule] });
|
|
225
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggBadgeModule, decorators: [{
|
|
226
226
|
type: NgModule,
|
|
227
227
|
args: [{
|
|
228
228
|
declarations: [NggBadgeComponent],
|
|
@@ -236,9 +236,9 @@ class NggButtonComponent {
|
|
|
236
236
|
return [this.variant, this.size ? this.size : false].filter(Boolean).join(" ");
|
|
237
237
|
}
|
|
238
238
|
}
|
|
239
|
-
NggButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
240
|
-
NggButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
239
|
+
NggButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
240
|
+
NggButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggButtonComponent, selector: "[ngg-button]", inputs: { variant: "variant", size: "size" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
241
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggButtonComponent, decorators: [{
|
|
242
242
|
type: Component,
|
|
243
243
|
args: [{
|
|
244
244
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
@@ -257,10 +257,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
257
257
|
|
|
258
258
|
class NggButtonModule {
|
|
259
259
|
}
|
|
260
|
-
NggButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
261
|
-
NggButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
262
|
-
NggButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
263
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
260
|
+
NggButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
261
|
+
NggButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggButtonModule, declarations: [NggButtonComponent], imports: [CommonModule], exports: [NggButtonComponent] });
|
|
262
|
+
NggButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggButtonModule, imports: [CommonModule] });
|
|
263
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggButtonModule, decorators: [{
|
|
264
264
|
type: NgModule,
|
|
265
265
|
args: [{
|
|
266
266
|
declarations: [NggButtonComponent],
|
|
@@ -274,9 +274,9 @@ class NggDropdownOptionDirective {
|
|
|
274
274
|
this.templateRef = templateRef;
|
|
275
275
|
}
|
|
276
276
|
}
|
|
277
|
-
NggDropdownOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
278
|
-
NggDropdownOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
279
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
277
|
+
NggDropdownOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownOptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
278
|
+
NggDropdownOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.3", type: NggDropdownOptionDirective, selector: "[nggDropdownOption]", ngImport: i0 });
|
|
279
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownOptionDirective, decorators: [{
|
|
280
280
|
type: Directive,
|
|
281
281
|
args: [{
|
|
282
282
|
selector: '[nggDropdownOption]',
|
|
@@ -284,24 +284,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
284
284
|
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
|
285
285
|
|
|
286
286
|
class NggDropdownComponent {
|
|
287
|
-
constructor(cd, injector) {
|
|
288
|
-
var _a, _b, _c;
|
|
289
|
-
this.cd = cd;
|
|
290
|
-
this.injector = injector;
|
|
291
|
-
this.loop = false;
|
|
292
|
-
this.options = [];
|
|
293
|
-
this._multiSelect = false;
|
|
294
|
-
this._searchable = false;
|
|
295
|
-
this.valueChange = new EventEmitter();
|
|
296
|
-
this.touched = new EventEmitter();
|
|
297
|
-
this.toggler = (_a = dropdownValues().elements) === null || _a === void 0 ? void 0 : _a.toggler;
|
|
298
|
-
this.listbox = (_b = dropdownValues().elements) === null || _b === void 0 ? void 0 : _b.listbox;
|
|
299
|
-
this.fieldset = (_c = dropdownValues().elements) === null || _c === void 0 ? void 0 : _c.fieldset;
|
|
300
|
-
this.trackByKey = (index, option) => {
|
|
301
|
-
var _a;
|
|
302
|
-
return (_a = option.attributes.id) !== null && _a !== void 0 ? _a : '';
|
|
303
|
-
};
|
|
304
|
-
}
|
|
305
287
|
set multiSelect(value) {
|
|
306
288
|
this._multiSelect = this.convertToBoolean(value);
|
|
307
289
|
}
|
|
@@ -325,6 +307,24 @@ class NggDropdownComponent {
|
|
|
325
307
|
get control() {
|
|
326
308
|
return this.injector.get(NgControl);
|
|
327
309
|
}
|
|
310
|
+
constructor(cd, injector) {
|
|
311
|
+
var _a, _b, _c;
|
|
312
|
+
this.cd = cd;
|
|
313
|
+
this.injector = injector;
|
|
314
|
+
this.loop = false;
|
|
315
|
+
this.options = [];
|
|
316
|
+
this._multiSelect = false;
|
|
317
|
+
this._searchable = false;
|
|
318
|
+
this.valueChange = new EventEmitter();
|
|
319
|
+
this.touched = new EventEmitter();
|
|
320
|
+
this.toggler = (_a = dropdownValues().elements) === null || _a === void 0 ? void 0 : _a.toggler;
|
|
321
|
+
this.listbox = (_b = dropdownValues().elements) === null || _b === void 0 ? void 0 : _b.listbox;
|
|
322
|
+
this.fieldset = (_c = dropdownValues().elements) === null || _c === void 0 ? void 0 : _c.fieldset;
|
|
323
|
+
this.trackByKey = (index, option) => {
|
|
324
|
+
var _a;
|
|
325
|
+
return (_a = option.attributes.id) !== null && _a !== void 0 ? _a : '';
|
|
326
|
+
};
|
|
327
|
+
}
|
|
328
328
|
ngAfterViewInit() {
|
|
329
329
|
var _a, _b, _c;
|
|
330
330
|
if (((_a = this.togglerRef) === null || _a === void 0 ? void 0 : _a.nativeElement) && ((_b = this.listboxRef) === null || _b === void 0 ? void 0 : _b.nativeElement)) {
|
|
@@ -394,15 +394,15 @@ class NggDropdownComponent {
|
|
|
394
394
|
return (value === '' || value === 'true' || value.toString() === 'true' || false);
|
|
395
395
|
}
|
|
396
396
|
}
|
|
397
|
-
NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
398
|
-
NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
397
|
+
NggDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
398
|
+
NggDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", 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: [
|
|
399
399
|
{
|
|
400
400
|
provide: NG_VALUE_ACCESSOR,
|
|
401
401
|
useExisting: NggDropdownComponent,
|
|
402
402
|
multi: true,
|
|
403
403
|
},
|
|
404
|
-
], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }], viewQueries: [{ propertyName: "togglerRef", first: true, predicate: ["togglerRef"], descendants: true }, { propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true }, { propertyName: "fieldsetRef", first: true, predicate: ["fieldsetRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n <span class=\"label\" *ngIf=\"label\" [id]=\"toggler?.attributes?.id + '_label'\">{{\n label\n }}</span>\n <button\n [attr.aria-labelledby]=\"label ? toggler?.attributes?.id + '_label' : null\"\n [attr.aria-describedby]=\"\n formInfo?.textContent && (formInfo?.textContent?.length ?? 0 > 0)\n ? toggler?.attributes?.id + '_info'\n : null\n \"\n type=\"button\"\n #togglerRef\n [id]=\"toggler?.attributes?.id\"\n [attr.aria-haspopup]=\"toggler?.attributes?.['aria-haspopup']\"\n [attr.aria-expanded]=\"toggler?.attributes?.['aria-expanded']\"\n [attr.aria-owns]=\"toggler?.attributes?.['aria-owns']\"\n [tabindex]=\"toggler?.attributes?.tabIndex\"\n [style]=\"toggler?.attributes?.style\"\n [class]=\"toggler?.classes\"\n (click)=\"handler?.toggle()\"\n [class.is-valid]=\"valid\"\n [class.is-invalid]=\"invalid\"\n >\n <span>{{ dropdown?.texts?.select }}</span>\n </button>\n <span\n class=\"form-info\"\n #formInfo\n [attr.id]=\"toggler?.attributes?.id + '_info'\"\n ><ng-content select=\"[data-form-info]\"></ng-content\n ></span>\n <div\n #listboxRef\n [id]=\"listbox?.attributes?.id\"\n [attr.role]=\"listbox?.attributes?.role\"\n [attr.aria-activedescendant]=\"\n listbox?.attributes?.['aria-activedescendant']\n \"\n [tabindex]=\"listbox?.attributes?.tabIndex\"\n [style]=\"listbox?.attributes?.style\"\n [class]=\"listbox?.classes\"\n >\n <button\n type=\"button\"\n class=\"close m-4 m-sm-2 d-block d-sm-none\"\n (click)=\"handler?.close()\"\n >\n <span class=\"sr-only\">{{ dropdown?.texts?.close }}</span>\n <i></i>\n </button>\n <ul role=\"listbox\" *ngIf=\"!dropdown?.isMultiSelect\">\n <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n <li\n *ngFor=\"\n let option of dropdown?.options;\n let index = index;\n trackBy: trackByKey\n \"\n [id]=\"option.attributes.id\"\n [attr.role]=\"option.attributes.role\"\n [attr.aria-selected]=\"option.attributes['aria-selected']\"\n [style]=\"option.attributes.style\"\n [class]=\"option.classes\"\n (click)=\"handler?.select(option)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n customOption?.templateRef\n ? customOption!.templateRef\n : defaultOption;\n context: { option: option, index: index }\n \"\n ></ng-container>\n </li>\n </ul>\n <div *ngIf=\"dropdown?.isMultiSelect\" class=\"sg-fieldset-container\">\n <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n <!--TODO: Improve checkboxes in dropdown angular-->\n <fieldset\n #fieldsetRef\n [attr.aria-describedby]=\"fieldset?.attributes?.id\"\n role=\"listbox\"\n tabIndex=\"-1\"\n aria-multiselectable=\"true\"\n >\n <legend class=\"sr-only\" [id]=\"fieldset?.attributes?.id\">Options</legend>\n <label\n class=\"form-control\"\n [attr.role]=\"option.attributes.role\"\n [id]=\"option.attributes.id\"\n [attr.aria-selected]=\"option.attributes['aria-selected']\"\n [class]=\"option.classes\"\n *ngFor=\"\n let option of dropdown?.options;\n let index = index;\n trackBy: trackByKey\n \"\n >\n <input\n type=\"checkbox\"\n (change)=\"handler?.select(option, false)\"\n [checked]=\"option.selected\"\n tabIndex=\"-1\"\n />\n <ng-container\n *ngTemplateOutlet=\"\n customOption?.templateRef\n ? customOption!.templateRef\n : defaultOption;\n context: { option: option, index: index }\n \"\n ></ng-container>\n <i></i>\n </label>\n </fieldset>\n </div>\n </div>\n</div>\n\n<ng-template #defaultOption let-option=\"option\">\n {{ option[dropdown!.display] }}\n</ng-template>\n\n<ng-template #searchInput>\n <input\n *ngIf=\"dropdown?.isSearchable\"\n [id]=\"toggler?.attributes?.id + '_search-input'\"\n type=\"search\"\n (input)=\"search($event)\"\n placeholder=\"{{ dropdown?.texts?.searchPlaceholder }}\"\n class=\"rounded-0 rounded-top border-0 border-bottom border-info\"\n />\n</ng-template>\n",
|
|
405
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
404
|
+
], queries: [{ propertyName: "customOption", first: true, predicate: NggDropdownOptionDirective, descendants: true }], viewQueries: [{ propertyName: "togglerRef", first: true, predicate: ["togglerRef"], descendants: true }, { propertyName: "listboxRef", first: true, predicate: ["listboxRef"], descendants: true }, { propertyName: "fieldsetRef", first: true, predicate: ["fieldsetRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n <span class=\"label\" *ngIf=\"label\" [id]=\"toggler?.attributes?.id + '_label'\">{{\n label\n }}</span>\n <button\n [attr.aria-labelledby]=\"label ? toggler?.attributes?.id + '_label' : null\"\n [attr.aria-describedby]=\"\n formInfo?.textContent && (formInfo?.textContent?.length ?? 0 > 0)\n ? toggler?.attributes?.id + '_info'\n : null\n \"\n type=\"button\"\n #togglerRef\n [id]=\"toggler?.attributes?.id\"\n [attr.aria-haspopup]=\"toggler?.attributes?.['aria-haspopup']\"\n [attr.aria-expanded]=\"toggler?.attributes?.['aria-expanded']\"\n [attr.aria-owns]=\"toggler?.attributes?.['aria-owns']\"\n [tabindex]=\"toggler?.attributes?.tabIndex\"\n [style]=\"toggler?.attributes?.style\"\n [class]=\"toggler?.classes\"\n (click)=\"handler?.toggle()\"\n [class.is-valid]=\"valid\"\n [class.is-invalid]=\"invalid\"\n >\n <span>{{ dropdown?.texts?.select }}</span>\n </button>\n <span\n class=\"form-info\"\n #formInfo\n [attr.id]=\"toggler?.attributes?.id + '_info'\"\n ><ng-content select=\"[data-form-info]\"></ng-content\n ></span>\n <div\n #listboxRef\n [id]=\"listbox?.attributes?.id\"\n [attr.role]=\"listbox?.attributes?.role\"\n [attr.aria-activedescendant]=\"\n listbox?.attributes?.['aria-activedescendant']\n \"\n [tabindex]=\"listbox?.attributes?.tabIndex\"\n [style]=\"listbox?.attributes?.style\"\n [class]=\"listbox?.classes\"\n >\n <button\n type=\"button\"\n class=\"close m-4 m-sm-2 d-block d-sm-none\"\n (click)=\"handler?.close()\"\n >\n <span class=\"sr-only\">{{ dropdown?.texts?.close }}</span>\n <i></i>\n </button>\n <ul role=\"listbox\" *ngIf=\"!dropdown?.isMultiSelect\">\n <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n <li\n *ngFor=\"\n let option of dropdown?.options;\n let index = index;\n trackBy: trackByKey\n \"\n [id]=\"option.attributes.id\"\n [attr.role]=\"option.attributes.role\"\n [attr.aria-selected]=\"option.attributes['aria-selected']\"\n [style]=\"option.attributes.style\"\n [class]=\"option.classes\"\n (click)=\"handler?.select(option)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n customOption?.templateRef\n ? customOption!.templateRef\n : defaultOption;\n context: { option: option, index: index }\n \"\n ></ng-container>\n </li>\n </ul>\n <div *ngIf=\"dropdown?.isMultiSelect\" class=\"sg-fieldset-container\">\n <ng-container *ngTemplateOutlet=\"searchInput\"></ng-container>\n <!--TODO: Improve checkboxes in dropdown angular-->\n <fieldset\n #fieldsetRef\n [attr.aria-describedby]=\"fieldset?.attributes?.id\"\n role=\"listbox\"\n tabIndex=\"-1\"\n aria-multiselectable=\"true\"\n >\n <legend class=\"sr-only\" [id]=\"fieldset?.attributes?.id\">Options</legend>\n <label\n class=\"form-control\"\n [attr.role]=\"option.attributes.role\"\n [id]=\"option.attributes.id\"\n [attr.aria-selected]=\"option.attributes['aria-selected']\"\n [class]=\"option.classes\"\n *ngFor=\"\n let option of dropdown?.options;\n let index = index;\n trackBy: trackByKey\n \"\n >\n <input\n type=\"checkbox\"\n (change)=\"handler?.select(option, false)\"\n [checked]=\"option.selected\"\n tabIndex=\"-1\"\n />\n <ng-container\n *ngTemplateOutlet=\"\n customOption?.templateRef\n ? customOption!.templateRef\n : defaultOption;\n context: { option: option, index: index }\n \"\n ></ng-container>\n <i></i>\n </label>\n </fieldset>\n </div>\n </div>\n</div>\n\n<ng-template #defaultOption let-option=\"option\">\n {{ option[dropdown!.display] }}\n</ng-template>\n\n<ng-template #searchInput>\n <input\n *ngIf=\"dropdown?.isSearchable\"\n [id]=\"toggler?.attributes?.id + '_search-input'\"\n type=\"search\"\n (input)=\"search($event)\"\n placeholder=\"{{ dropdown?.texts?.searchPlaceholder }}\"\n class=\"rounded-0 rounded-top border-0 border-bottom border-info\"\n />\n</ng-template>\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
405
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownComponent, decorators: [{
|
|
406
406
|
type: Component,
|
|
407
407
|
args: [{ selector: 'ngg-dropdown', providers: [
|
|
408
408
|
{
|
|
@@ -463,32 +463,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
463
463
|
}] } });
|
|
464
464
|
|
|
465
465
|
class NggDatepickerComponent {
|
|
466
|
-
constructor(_cdr) {
|
|
467
|
-
this._cdr = _cdr;
|
|
468
|
-
this.id = randomId();
|
|
469
|
-
this.isValid = null;
|
|
470
|
-
this.valueChange = new EventEmitter();
|
|
471
|
-
this._months = months({});
|
|
472
|
-
this.listener = (data, state) => {
|
|
473
|
-
var _a, _b, _c, _d, _e;
|
|
474
|
-
if (this.dp && state) {
|
|
475
|
-
this.dp.state = Object.assign({}, state);
|
|
476
|
-
this.years = years({
|
|
477
|
-
from: (_b = (_a = this.dp.state) === null || _a === void 0 ? void 0 : _a.minDate) === null || _b === void 0 ? void 0 : _b.getFullYear(),
|
|
478
|
-
to: (_d = (_c = this.dp.state) === null || _c === void 0 ? void 0 : _c.maxDate) === null || _d === void 0 ? void 0 : _d.getFullYear(),
|
|
479
|
-
});
|
|
480
|
-
}
|
|
481
|
-
if (data) {
|
|
482
|
-
// only emit change event if date has changed
|
|
483
|
-
if (((_e = this.data) === null || _e === void 0 ? void 0 : _e.selectedDate) !== data.selectedDate) {
|
|
484
|
-
this.valueChange.emit(data.selectedDate);
|
|
485
|
-
this.onChangeFn && this.onChangeFn(data.selectedDate);
|
|
486
|
-
}
|
|
487
|
-
this.data = data;
|
|
488
|
-
}
|
|
489
|
-
this._cdr.detectChanges();
|
|
490
|
-
};
|
|
491
|
-
}
|
|
492
466
|
get months() {
|
|
493
467
|
return this._months;
|
|
494
468
|
}
|
|
@@ -516,6 +490,32 @@ class NggDatepickerComponent {
|
|
|
516
490
|
}
|
|
517
491
|
}
|
|
518
492
|
}
|
|
493
|
+
constructor(_cdr) {
|
|
494
|
+
this._cdr = _cdr;
|
|
495
|
+
this.id = randomId();
|
|
496
|
+
this.isValid = null;
|
|
497
|
+
this.valueChange = new EventEmitter();
|
|
498
|
+
this._months = months({});
|
|
499
|
+
this.listener = (data, state) => {
|
|
500
|
+
var _a, _b, _c, _d, _e;
|
|
501
|
+
if (this.dp && state) {
|
|
502
|
+
this.dp.state = Object.assign({}, state);
|
|
503
|
+
this.years = years({
|
|
504
|
+
from: (_b = (_a = this.dp.state) === null || _a === void 0 ? void 0 : _a.minDate) === null || _b === void 0 ? void 0 : _b.getFullYear(),
|
|
505
|
+
to: (_d = (_c = this.dp.state) === null || _c === void 0 ? void 0 : _c.maxDate) === null || _d === void 0 ? void 0 : _d.getFullYear(),
|
|
506
|
+
});
|
|
507
|
+
}
|
|
508
|
+
if (data) {
|
|
509
|
+
// only emit change event if date has changed
|
|
510
|
+
if (((_e = this.data) === null || _e === void 0 ? void 0 : _e.selectedDate) !== data.selectedDate) {
|
|
511
|
+
this.valueChange.emit(data.selectedDate);
|
|
512
|
+
this.onChangeFn && this.onChangeFn(data.selectedDate);
|
|
513
|
+
}
|
|
514
|
+
this.data = data;
|
|
515
|
+
}
|
|
516
|
+
this._cdr.detectChanges();
|
|
517
|
+
};
|
|
518
|
+
}
|
|
519
519
|
writeValue(value) {
|
|
520
520
|
this.value = value;
|
|
521
521
|
}
|
|
@@ -579,15 +579,15 @@ class NggDatepickerComponent {
|
|
|
579
579
|
}
|
|
580
580
|
}
|
|
581
581
|
}
|
|
582
|
-
NggDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
583
|
-
NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
582
|
+
NggDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDatepickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
583
|
+
NggDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggDatepickerComponent, selector: "ngg-datepicker", inputs: { options: "options", value: "value", id: "id", label: "label", isValid: "isValid" }, outputs: { valueChange: "valueChange" }, providers: [
|
|
584
584
|
{
|
|
585
585
|
provide: NG_VALUE_ACCESSOR,
|
|
586
586
|
useExisting: NggDatepickerComponent,
|
|
587
587
|
multi: true,
|
|
588
588
|
},
|
|
589
|
-
], 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",
|
|
590
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
589
|
+
], 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 });
|
|
590
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDatepickerComponent, decorators: [{
|
|
591
591
|
type: Component,
|
|
592
592
|
args: [{ selector: 'ngg-datepicker', providers: [
|
|
593
593
|
{
|
|
@@ -656,10 +656,10 @@ function dateValidator(dates) {
|
|
|
656
656
|
|
|
657
657
|
class NggDropdownModule {
|
|
658
658
|
}
|
|
659
|
-
NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
660
|
-
NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
661
|
-
NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
662
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
659
|
+
NggDropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
660
|
+
NggDropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownModule, declarations: [NggDropdownComponent, NggDropdownOptionDirective], imports: [CommonModule], exports: [NggDropdownComponent, NggDropdownOptionDirective] });
|
|
661
|
+
NggDropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownModule, imports: [CommonModule] });
|
|
662
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDropdownModule, decorators: [{
|
|
663
663
|
type: NgModule,
|
|
664
664
|
args: [{
|
|
665
665
|
declarations: [NggDropdownComponent, NggDropdownOptionDirective],
|
|
@@ -670,10 +670,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
670
670
|
|
|
671
671
|
class NggDatepickerModule {
|
|
672
672
|
}
|
|
673
|
-
NggDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
674
|
-
NggDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
675
|
-
NggDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
676
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
673
|
+
NggDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
674
|
+
NggDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggDatepickerModule, declarations: [NggDatepickerComponent], imports: [CommonModule, NggDropdownModule], exports: [NggDatepickerComponent] });
|
|
675
|
+
NggDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDatepickerModule, imports: [CommonModule, NggDropdownModule] });
|
|
676
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggDatepickerModule, decorators: [{
|
|
677
677
|
type: NgModule,
|
|
678
678
|
args: [{
|
|
679
679
|
declarations: [NggDatepickerComponent],
|
|
@@ -683,15 +683,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
683
683
|
}] });
|
|
684
684
|
|
|
685
685
|
class NggModalComponent {
|
|
686
|
-
constructor(ref, configurableFocusTrapFactory) {
|
|
687
|
-
this.ref = ref;
|
|
688
|
-
this.configurableFocusTrapFactory = configurableFocusTrapFactory;
|
|
689
|
-
this.isOpenChange = new EventEmitter();
|
|
690
|
-
this.closed = new EventEmitter();
|
|
691
|
-
this.confirm = new EventEmitter();
|
|
692
|
-
this.dismiss = new EventEmitter();
|
|
693
|
-
this.configurableFocusTrap = this.configurableFocusTrapFactory.create(this.ref.nativeElement);
|
|
694
|
-
}
|
|
695
686
|
get trapFocus() {
|
|
696
687
|
return this._trapFocus;
|
|
697
688
|
}
|
|
@@ -723,6 +714,15 @@ class NggModalComponent {
|
|
|
723
714
|
}
|
|
724
715
|
}
|
|
725
716
|
get open() { return this.isOpen; }
|
|
717
|
+
constructor(ref, configurableFocusTrapFactory) {
|
|
718
|
+
this.ref = ref;
|
|
719
|
+
this.configurableFocusTrapFactory = configurableFocusTrapFactory;
|
|
720
|
+
this.isOpenChange = new EventEmitter();
|
|
721
|
+
this.closed = new EventEmitter();
|
|
722
|
+
this.confirm = new EventEmitter();
|
|
723
|
+
this.dismiss = new EventEmitter();
|
|
724
|
+
this.configurableFocusTrap = this.configurableFocusTrapFactory.create(this.ref.nativeElement);
|
|
725
|
+
}
|
|
726
726
|
ngOnInit() {
|
|
727
727
|
if (this._isOpen && this.trapFocus)
|
|
728
728
|
this.enableFocusTrap();
|
|
@@ -769,9 +769,9 @@ class NggModalComponent {
|
|
|
769
769
|
enableBodyScroll(this.ref.nativeElement);
|
|
770
770
|
}
|
|
771
771
|
}
|
|
772
|
-
NggModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
773
|
-
NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
774
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
772
|
+
NggModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component });
|
|
773
|
+
NggModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggModalComponent, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n </div>\n <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n </aside>\n <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n </div>\n <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n </main>\n <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n </div>\n <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n </section>\n <ng-template #contentTpl>\n <ng-content></ng-content>\n </ng-template>\n <div #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></div>\n</ng-container>", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalHeaderComponent; }), selector: "[ngg-modal-header]", inputs: ["header"], outputs: ["closed"] }, { kind: "component", type: i0.forwardRef(function () { return NggModalBodyComponent; }), selector: "[ngg-modal-body]" }, { kind: "component", type: i0.forwardRef(function () { return NggModalFooterComponent; }), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
774
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalComponent, decorators: [{
|
|
775
775
|
type: Component,
|
|
776
776
|
args: [{ selector: 'ngg-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <aside data-testid=\"modal\" *ngSwitchCase=\"'slideout'\" role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n </div>\n <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n </aside>\n <main data-testid=\"modal\" *ngSwitchCase=\"'takeover'\" role=\"dialog\" aria-modal=\"true\">\n <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n </div>\n <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n </main>\n <section data-testid=\"modal\" *ngSwitchDefault role=\"dialog\" aria-modal=\"true\" [class.small]=\"size === 'sm'\" [class.medium]=\"size === 'md'\" [class.large]=\"size === 'lg'\">\n <header ngg-modal-header data-testid=\"modal-header\" [header]=\"header\" (closed)=\"this.handleCloseClick($event)\"></header>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"contentTpl\"></ng-container> \n </div>\n <footer ngg-modal-footer data-testid=\"modal-footer\" *ngIf=\"dismissLabel || confirmLabel\" [dismissLabel]=\"dismissLabel\" [confirmLabel]=\"confirmLabel\" (dismiss)=\"this.handleDismiss($event)\" (confirm)=\"this.handleConfirm($event)\"></footer>\n </section>\n <ng-template #contentTpl>\n <ng-content></ng-content>\n </ng-template>\n <div #backdrop data-testid=\"modal-backdrop\" class=\"backdrop\" (click)=\"this.handleBackdropClick($event)\" [attr.aria-hidden]=\"true\"></div>\n</ng-container>", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
|
|
777
777
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ConfigurableFocusTrapFactory }]; }, propDecorators: { modalType: [{
|
|
@@ -811,15 +811,15 @@ class NggModalHeaderComponent {
|
|
|
811
811
|
this.closed.emit(event);
|
|
812
812
|
}
|
|
813
813
|
}
|
|
814
|
-
NggModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
815
|
-
NggModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
814
|
+
NggModalHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
815
|
+
NggModalHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggModalHeaderComponent, selector: "[ngg-modal-header]", inputs: { header: "header" }, outputs: { closed: "closed" }, ngImport: i0, template: `
|
|
816
816
|
<h3 data-testid="modal-header-text">{{header}}</h3>
|
|
817
817
|
<button data-testid="modal-close-button" class="close" (click)="this.handleClose($event)">
|
|
818
818
|
<span className="sr-only">Close</span>
|
|
819
819
|
<i></i>
|
|
820
820
|
</button>
|
|
821
821
|
`, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] });
|
|
822
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
822
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalHeaderComponent, decorators: [{
|
|
823
823
|
type: Component,
|
|
824
824
|
args: [{ selector: '[ngg-modal-header]', template: `
|
|
825
825
|
<h3 data-testid="modal-header-text">{{header}}</h3>
|
|
@@ -835,9 +835,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
835
835
|
}] } });
|
|
836
836
|
class NggModalBodyComponent {
|
|
837
837
|
}
|
|
838
|
-
NggModalBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
839
|
-
NggModalBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
840
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
838
|
+
NggModalBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
839
|
+
NggModalBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggModalBodyComponent, selector: "[ngg-modal-body]", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] });
|
|
840
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalBodyComponent, decorators: [{
|
|
841
841
|
type: Component,
|
|
842
842
|
args: [{ selector: '[ngg-modal-body]', template: `<ng-content></ng-content>`, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"] }]
|
|
843
843
|
}] });
|
|
@@ -853,12 +853,12 @@ class NggModalFooterComponent {
|
|
|
853
853
|
this.confirm.emit(event);
|
|
854
854
|
}
|
|
855
855
|
}
|
|
856
|
-
NggModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
857
|
-
NggModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
856
|
+
NggModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
857
|
+
NggModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggModalFooterComponent, selector: "[ngg-modal-footer]", inputs: { dismissLabel: "dismissLabel", confirmLabel: "confirmLabel" }, outputs: { dismiss: "dismiss", confirm: "confirm" }, ngImport: i0, template: `
|
|
858
858
|
<button data-testid="modal-dismiss-button" *ngIf="dismissLabel" class="secondary" (click)="this.handleDismiss($event)">{{dismissLabel}}</button>
|
|
859
859
|
<button data-testid="modal-confirm-button" *ngIf="confirmLabel" class="primary" (click)="this.handleConfirm($event)">{{confirmLabel}}</button>
|
|
860
|
-
`, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"],
|
|
861
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
860
|
+
`, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--sg-z-index-modal-backdrop)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:#f8f8f8;height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:#cecece}.body::-webkit-scrollbar-track{background-color:#f8f8f8;box-shadow:inset 0 0 10px #00000040}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
861
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalFooterComponent, decorators: [{
|
|
862
862
|
type: Component,
|
|
863
863
|
args: [{ selector: '[ngg-modal-footer]', template: `
|
|
864
864
|
<button data-testid="modal-dismiss-button" *ngIf="dismissLabel" class="secondary" (click)="this.handleDismiss($event)">{{dismissLabel}}</button>
|
|
@@ -885,13 +885,13 @@ const EXPORTS = [
|
|
|
885
885
|
];
|
|
886
886
|
class NggModalModule {
|
|
887
887
|
}
|
|
888
|
-
NggModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
889
|
-
NggModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
888
|
+
NggModalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
889
|
+
NggModalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggModalModule, declarations: [NggModalComponent,
|
|
890
890
|
NggModalHeaderComponent,
|
|
891
891
|
NggModalBodyComponent,
|
|
892
892
|
NggModalFooterComponent], imports: [A11yModule, CommonModule], exports: [NggModalComponent] });
|
|
893
|
-
NggModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
894
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
893
|
+
NggModalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalModule, imports: [A11yModule, CommonModule] });
|
|
894
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModalModule, decorators: [{
|
|
895
895
|
type: NgModule,
|
|
896
896
|
args: [{
|
|
897
897
|
imports: [A11yModule, CommonModule],
|
|
@@ -907,30 +907,20 @@ class NggProgressCircleComponent {
|
|
|
907
907
|
/** id of the progress circle */
|
|
908
908
|
this.id = `${randomId()}-progress-circle`;
|
|
909
909
|
/** theme of the progress circle */
|
|
910
|
-
this.theme =
|
|
910
|
+
this.theme = 'warning';
|
|
911
911
|
}
|
|
912
912
|
/** progress circle value in percentage */
|
|
913
913
|
set value(val) {
|
|
914
|
-
const degrees = `${
|
|
914
|
+
const degrees = `${calculateDegrees(val)}deg`;
|
|
915
915
|
this._endValue = degrees;
|
|
916
|
-
if (this.theme ===
|
|
916
|
+
if (this.theme === 'disabled') {
|
|
917
917
|
this._startValue = degrees;
|
|
918
918
|
}
|
|
919
919
|
}
|
|
920
|
-
calculateDegrees(percent) {
|
|
921
|
-
if (percent > 100) {
|
|
922
|
-
return 180;
|
|
923
|
-
}
|
|
924
|
-
if (percent < 0) {
|
|
925
|
-
return 0;
|
|
926
|
-
}
|
|
927
|
-
/** formula: ((n% * 360deg) / 100% ) / 2 */
|
|
928
|
-
return percent * 1.8;
|
|
929
|
-
}
|
|
930
920
|
}
|
|
931
|
-
NggProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
932
|
-
NggProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
933
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
921
|
+
NggProgressCircleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
922
|
+
NggProgressCircleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggProgressCircleComponent, selector: "ngg-progress-circle", inputs: { id: "id", theme: "theme", value: "value" }, host: { properties: { "style.--start-value": "this._startValue", "style.--end-value": "this._endValue" } }, ngImport: i0, template: "<div\n class=\"gds-progress-circle\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"value\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"id\"\n>\n <div class=\"ring full-ring\">\n <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n </div>\n <div class=\"ring\">\n <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n </div>\n <div class=\"inner-circle\">\n <ng-content></ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
923
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggProgressCircleComponent, decorators: [{
|
|
934
924
|
type: Component,
|
|
935
925
|
args: [{ selector: 'ngg-progress-circle', template: "<div\n class=\"gds-progress-circle\"\n role=\"progressbar\"\n [attr.aria-valuenow]=\"value\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"id\"\n>\n <div class=\"ring full-ring\">\n <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n </div>\n <div class=\"ring\">\n <div class=\"ring-progress\" [ngClass]=\"theme\"></div>\n </div>\n <div class=\"inner-circle\">\n <ng-content></ng-content>\n </div>\n</div>\n" }]
|
|
936
926
|
}], propDecorators: { _startValue: [{
|
|
@@ -949,10 +939,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
949
939
|
|
|
950
940
|
class NggProgressCircleModule {
|
|
951
941
|
}
|
|
952
|
-
NggProgressCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
953
|
-
NggProgressCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
954
|
-
NggProgressCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
955
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
942
|
+
NggProgressCircleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggProgressCircleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
943
|
+
NggProgressCircleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggProgressCircleModule, declarations: [NggProgressCircleComponent], imports: [CommonModule], exports: [NggProgressCircleComponent] });
|
|
944
|
+
NggProgressCircleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggProgressCircleModule, imports: [CommonModule] });
|
|
945
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggProgressCircleModule, decorators: [{
|
|
956
946
|
type: NgModule,
|
|
957
947
|
args: [{
|
|
958
948
|
declarations: [NggProgressCircleComponent],
|
|
@@ -963,8 +953,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
963
953
|
|
|
964
954
|
class NggSegmentedControlComponent {
|
|
965
955
|
}
|
|
966
|
-
NggSegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
967
|
-
NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
956
|
+
NggSegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
957
|
+
NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggSegmentedControlComponent, selector: "ngg-segmented-control", inputs: { $controls: "$controls" }, ngImport: i0, template: `
|
|
968
958
|
<div class="group">
|
|
969
959
|
<a
|
|
970
960
|
*ngFor="let control of $controls | async"
|
|
@@ -974,12 +964,10 @@ NggSegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
|
|
|
974
964
|
>{{ control.text }}</a
|
|
975
965
|
>
|
|
976
966
|
</div>
|
|
977
|
-
`, isInline: true,
|
|
978
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
967
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
968
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSegmentedControlComponent, decorators: [{
|
|
979
969
|
type: Component,
|
|
980
|
-
args: [{
|
|
981
|
-
selector: 'ngg-segmented-control',
|
|
982
|
-
template: `
|
|
970
|
+
args: [{ selector: 'ngg-segmented-control', template: `
|
|
983
971
|
<div class="group">
|
|
984
972
|
<a
|
|
985
973
|
*ngFor="let control of $controls | async"
|
|
@@ -989,20 +977,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
989
977
|
>{{ control.text }}</a
|
|
990
978
|
>
|
|
991
979
|
</div>
|
|
992
|
-
`,
|
|
993
|
-
styles: [],
|
|
994
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
995
|
-
}]
|
|
980
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush }]
|
|
996
981
|
}], propDecorators: { $controls: [{
|
|
997
982
|
type: Input
|
|
998
983
|
}] } });
|
|
999
984
|
|
|
1000
985
|
class NggSegmentedControlModule {
|
|
1001
986
|
}
|
|
1002
|
-
NggSegmentedControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1003
|
-
NggSegmentedControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
1004
|
-
NggSegmentedControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1005
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
987
|
+
NggSegmentedControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSegmentedControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
988
|
+
NggSegmentedControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggSegmentedControlModule, declarations: [NggSegmentedControlComponent], imports: [RouterModule, CommonModule], exports: [NggSegmentedControlComponent] });
|
|
989
|
+
NggSegmentedControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSegmentedControlModule, imports: [RouterModule, CommonModule] });
|
|
990
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSegmentedControlModule, decorators: [{
|
|
1006
991
|
type: NgModule,
|
|
1007
992
|
args: [{
|
|
1008
993
|
declarations: [NggSegmentedControlComponent],
|
|
@@ -1013,8 +998,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
1013
998
|
|
|
1014
999
|
class NggSliderComponent {
|
|
1015
1000
|
constructor() {
|
|
1016
|
-
this.
|
|
1017
|
-
this.name = `${randomId}-slider`;
|
|
1001
|
+
this.name = `${randomId()}-slider`;
|
|
1018
1002
|
this.min = 0;
|
|
1019
1003
|
this.max = 100;
|
|
1020
1004
|
this.step = 1;
|
|
@@ -1023,26 +1007,28 @@ class NggSliderComponent {
|
|
|
1023
1007
|
this.placeholder = '';
|
|
1024
1008
|
this.errorMessage = '';
|
|
1025
1009
|
this.hasTextbox = false;
|
|
1010
|
+
this.unitLabel = 'kr';
|
|
1026
1011
|
this.disabled = false;
|
|
1012
|
+
this.value = 0;
|
|
1027
1013
|
this.sliderChange = new EventEmitter();
|
|
1028
1014
|
this.sliderTouch = new EventEmitter();
|
|
1029
1015
|
this.style = {};
|
|
1030
1016
|
}
|
|
1031
|
-
set value(val) {
|
|
1032
|
-
this._value = val !== null && val !== void 0 ? val : 0;
|
|
1033
|
-
this.handleChange();
|
|
1034
|
-
}
|
|
1035
|
-
get value() {
|
|
1036
|
-
return this._value;
|
|
1037
|
-
}
|
|
1038
1017
|
ngOnInit() {
|
|
1039
1018
|
this.setTrackBackground();
|
|
1040
1019
|
}
|
|
1020
|
+
ngOnChanges(changes) {
|
|
1021
|
+
if (changes['value']) {
|
|
1022
|
+
this.setTrackBackground();
|
|
1023
|
+
}
|
|
1024
|
+
}
|
|
1041
1025
|
onBlur() {
|
|
1042
1026
|
this.sliderTouch.emit(true);
|
|
1043
1027
|
this.onTouchedFn && this.onTouchedFn();
|
|
1044
1028
|
}
|
|
1045
1029
|
handleChange() {
|
|
1030
|
+
var _a;
|
|
1031
|
+
this.value = (_a = this.value) !== null && _a !== void 0 ? _a : 0;
|
|
1046
1032
|
this.setTrackBackground();
|
|
1047
1033
|
this.sliderChange.emit(this.value);
|
|
1048
1034
|
this.onChangeFn && this.onChangeFn(this.value);
|
|
@@ -1052,13 +1038,13 @@ class NggSliderComponent {
|
|
|
1052
1038
|
this.style.background = sliderColors.disabled;
|
|
1053
1039
|
return;
|
|
1054
1040
|
}
|
|
1055
|
-
const
|
|
1056
|
-
this.style.background = getSliderTrackBackground(
|
|
1041
|
+
const percent = ((this.value - this.min) / (this.max - this.min)) * 100;
|
|
1042
|
+
this.style.background = getSliderTrackBackground(percent);
|
|
1057
1043
|
}
|
|
1058
1044
|
/** control value accessor functions */
|
|
1059
1045
|
writeValue(val) {
|
|
1060
1046
|
if (this.value !== val) {
|
|
1061
|
-
this.
|
|
1047
|
+
this.value = val !== null && val !== void 0 ? val : 0;
|
|
1062
1048
|
this.handleChange();
|
|
1063
1049
|
}
|
|
1064
1050
|
}
|
|
@@ -1069,15 +1055,15 @@ class NggSliderComponent {
|
|
|
1069
1055
|
this.onTouchedFn = fn;
|
|
1070
1056
|
}
|
|
1071
1057
|
}
|
|
1072
|
-
NggSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1073
|
-
NggSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1058
|
+
NggSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1059
|
+
NggSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggSliderComponent, selector: "ngg-slider", inputs: { name: "name", min: "min", max: "max", step: "step", label: "label", instruction: "instruction", placeholder: "placeholder", errorMessage: "errorMessage", hasTextbox: "hasTextbox", unitLabel: "unitLabel", disabled: "disabled", value: "value" }, outputs: { sliderChange: "sliderChange", sliderTouch: "sliderTouch" }, providers: [
|
|
1074
1060
|
{
|
|
1075
1061
|
provide: NG_VALUE_ACCESSOR,
|
|
1076
1062
|
useExisting: NggSliderComponent,
|
|
1077
1063
|
multi: true,
|
|
1078
1064
|
},
|
|
1079
|
-
], 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 <
|
|
1080
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1065
|
+
], 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.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1066
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSliderComponent, decorators: [{
|
|
1081
1067
|
type: Component,
|
|
1082
1068
|
args: [{ selector: 'ngg-slider', providers: [
|
|
1083
1069
|
{
|
|
@@ -1085,7 +1071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
1085
1071
|
useExisting: NggSliderComponent,
|
|
1086
1072
|
multi: true,
|
|
1087
1073
|
},
|
|
1088
|
-
], 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 <
|
|
1074
|
+
], 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" }]
|
|
1089
1075
|
}], propDecorators: { name: [{
|
|
1090
1076
|
type: Input
|
|
1091
1077
|
}], min: [{
|
|
@@ -1104,6 +1090,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
1104
1090
|
type: Input
|
|
1105
1091
|
}], hasTextbox: [{
|
|
1106
1092
|
type: Input
|
|
1093
|
+
}], unitLabel: [{
|
|
1094
|
+
type: Input
|
|
1107
1095
|
}], disabled: [{
|
|
1108
1096
|
type: Input
|
|
1109
1097
|
}], value: [{
|
|
@@ -1116,10 +1104,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
1116
1104
|
|
|
1117
1105
|
class NggSliderModule {
|
|
1118
1106
|
}
|
|
1119
|
-
NggSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1120
|
-
NggSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
1121
|
-
NggSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1122
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1107
|
+
NggSliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1108
|
+
NggSliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggSliderModule, declarations: [NggSliderComponent], imports: [CommonModule, FormsModule], exports: [NggSliderComponent] });
|
|
1109
|
+
NggSliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSliderModule, imports: [CommonModule, FormsModule] });
|
|
1110
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggSliderModule, decorators: [{
|
|
1123
1111
|
type: NgModule,
|
|
1124
1112
|
args: [{
|
|
1125
1113
|
imports: [CommonModule, FormsModule],
|
|
@@ -1130,8 +1118,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
1130
1118
|
|
|
1131
1119
|
class NggModule {
|
|
1132
1120
|
}
|
|
1133
|
-
NggModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1134
|
-
NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
1121
|
+
NggModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1122
|
+
NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggModule, imports: [CommonModule], exports: [NggAccordionModule,
|
|
1135
1123
|
NggBadgeModule,
|
|
1136
1124
|
NggButtonModule,
|
|
1137
1125
|
NggDatepickerModule,
|
|
@@ -1140,7 +1128,7 @@ NggModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.
|
|
|
1140
1128
|
NggProgressCircleModule,
|
|
1141
1129
|
NggSegmentedControlModule,
|
|
1142
1130
|
NggSliderModule] });
|
|
1143
|
-
NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1131
|
+
NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModule, imports: [CommonModule, NggAccordionModule,
|
|
1144
1132
|
NggBadgeModule,
|
|
1145
1133
|
NggButtonModule,
|
|
1146
1134
|
NggDatepickerModule,
|
|
@@ -1149,7 +1137,7 @@ NggModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.
|
|
|
1149
1137
|
NggProgressCircleModule,
|
|
1150
1138
|
NggSegmentedControlModule,
|
|
1151
1139
|
NggSliderModule] });
|
|
1152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1140
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggModule, decorators: [{
|
|
1153
1141
|
type: NgModule,
|
|
1154
1142
|
args: [{
|
|
1155
1143
|
declarations: [],
|
|
@@ -1318,9 +1306,9 @@ class NggPaginationComponent {
|
|
|
1318
1306
|
return pages;
|
|
1319
1307
|
}
|
|
1320
1308
|
}
|
|
1321
|
-
NggPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1322
|
-
NggPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1309
|
+
NggPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1310
|
+
NggPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.3", type: NggPaginationComponent, selector: "ngg-pagination", inputs: { i18n: "i18n", size: "size", displayPages: "displayPages", length: "length", pageSize: "pageSize", pageIndex: "pageIndex" }, outputs: { page: "page" }, usesOnChanges: true, ngImport: i0, template: "<nav\n [class]=\"'pagination ' + size\"\n role=\"navigation\"\n [attr.aria-label]=\"i18n.paginationLabel\"\n *ngIf=\"totalPages > 1\"\n>\n <ul class=\"gds-reset\">\n <li *ngIf=\"hasPrevious()\">\n <a\n class=\"gds-reset\"\n tabindex=\"0\"\n (click)=\"gotoPrevious()\"\n [attr.aria-label]=\"i18n.previousPageLabel\"\n role=\"button\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n <path\n d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z\"\n />\n </svg>\n </a>\n </li>\n\n <li>\n <a\n class=\"gds-reset\"\n tabindex=\"0\"\n (click)=\"gotoFirst()\"\n [attr.aria-current]=\"pageIndex === 0 ? 'page' : null\"\n [attr.aria-label]=\"i18n.firstPageLabel\"\n role=\"button\"\n >\n 1\n </a>\n </li>\n <li *ngIf=\"pageIndicies[0] > 1\" aria-hidden=\"true\">...</li>\n\n <li *ngFor=\"let index of pageIndicies\">\n <a\n class=\"gds-reset\"\n tabindex=\"0\"\n (click)=\"goto(index)\"\n [attr.aria-current]=\"pageIndex === index ? 'page' : null\"\n [attr.aria-label]=\"i18n.getPageLabel(index)\"\n role=\"button\"\n >\n {{ index + 1 }}\n </a>\n </li>\n\n <li\n *ngIf=\"pageIndicies[pageIndicies.length - 1] < totalPages - 2\"\n aria-hidden=\"true\"\n >\n ...\n </li>\n\n <li>\n <a\n class=\"gds-reset\"\n tabindex=\"0\"\n (click)=\"gotoLast()\"\n [attr.aria-current]=\"pageIndex === totalPages - 1 ? 'page' : null\"\n [attr.aria-label]=\"i18n.lastPageLabel\"\n role=\"button\"\n >\n {{ totalPages }}\n </a>\n </li>\n <li *ngIf=\"hasNext()\">\n <a\n class=\"gds-reset\"\n tabindex=\"0\"\n (click)=\"gotoNext()\"\n [attr.aria-label]=\"i18n.nextPageLabel\"\n role=\"button\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n <path\n d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n />\n </svg>\n </a>\n </li>\n </ul>\n</nav>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggPaginationComponent, decorators: [{
|
|
1324
1312
|
type: Component,
|
|
1325
1313
|
args: [{ selector: 'ngg-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n [class]=\"'pagination ' + size\"\n role=\"navigation\"\n [attr.aria-label]=\"i18n.paginationLabel\"\n *ngIf=\"totalPages > 1\"\n>\n <ul class=\"gds-reset\">\n <li *ngIf=\"hasPrevious()\">\n <a\n class=\"gds-reset\"\n tabindex=\"0\"\n (click)=\"gotoPrevious()\"\n [attr.aria-label]=\"i18n.previousPageLabel\"\n role=\"button\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n <path\n d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z\"\n />\n </svg>\n </a>\n </li>\n\n <li>\n <a\n class=\"gds-reset\"\n tabindex=\"0\"\n (click)=\"gotoFirst()\"\n [attr.aria-current]=\"pageIndex === 0 ? 'page' : null\"\n [attr.aria-label]=\"i18n.firstPageLabel\"\n role=\"button\"\n >\n 1\n </a>\n </li>\n <li *ngIf=\"pageIndicies[0] > 1\" aria-hidden=\"true\">...</li>\n\n <li *ngFor=\"let index of pageIndicies\">\n <a\n class=\"gds-reset\"\n tabindex=\"0\"\n (click)=\"goto(index)\"\n [attr.aria-current]=\"pageIndex === index ? 'page' : null\"\n [attr.aria-label]=\"i18n.getPageLabel(index)\"\n role=\"button\"\n >\n {{ index + 1 }}\n </a>\n </li>\n\n <li\n *ngIf=\"pageIndicies[pageIndicies.length - 1] < totalPages - 2\"\n aria-hidden=\"true\"\n >\n ...\n </li>\n\n <li>\n <a\n class=\"gds-reset\"\n tabindex=\"0\"\n (click)=\"gotoLast()\"\n [attr.aria-current]=\"pageIndex === totalPages - 1 ? 'page' : null\"\n [attr.aria-label]=\"i18n.lastPageLabel\"\n role=\"button\"\n >\n {{ totalPages }}\n </a>\n </li>\n <li *ngIf=\"hasNext()\">\n <a\n class=\"gds-reset\"\n tabindex=\"0\"\n (click)=\"gotoNext()\"\n [attr.aria-label]=\"i18n.nextPageLabel\"\n role=\"button\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n <path\n d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\n />\n </svg>\n </a>\n </li>\n </ul>\n</nav>\n" }]
|
|
1326
1314
|
}], propDecorators: { i18n: [{
|
|
@@ -1341,10 +1329,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
|
|
|
1341
1329
|
|
|
1342
1330
|
class NggPaginationModule {
|
|
1343
1331
|
}
|
|
1344
|
-
NggPaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1345
|
-
NggPaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "
|
|
1346
|
-
NggPaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1347
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1332
|
+
NggPaginationModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggPaginationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1333
|
+
NggPaginationModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.3", ngImport: i0, type: NggPaginationModule, declarations: [NggPaginationComponent], imports: [CommonModule], exports: [NggPaginationComponent] });
|
|
1334
|
+
NggPaginationModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggPaginationModule, imports: [CommonModule] });
|
|
1335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.3", ngImport: i0, type: NggPaginationModule, decorators: [{
|
|
1348
1336
|
type: NgModule,
|
|
1349
1337
|
args: [{
|
|
1350
1338
|
declarations: [NggPaginationComponent],
|