@sebgroup/green-angular 8.1.0 → 9.0.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/fesm2022/sebgroup-green-angular-src-lib-accordion.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-lib-accordion.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-badge.mjs +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-badge.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-button.mjs +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-button.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-cell-table.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-lib-cell-table.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-in-page-wizard.mjs +7 -5
- package/fesm2022/sebgroup-green-angular-src-lib-in-page-wizard.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-modal.mjs +14 -14
- package/fesm2022/sebgroup-green-angular-src-lib-modal.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-pagination.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-lib-pagination.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-slider.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-lib-slider.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-sortable-list.mjs +10 -6
- package/fesm2022/sebgroup-green-angular-src-lib-sortable-list.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-alert.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-alert.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-breadcrumbs.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-breadcrumbs.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-button.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-button.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-card.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-card.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-checkbox.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-checkbox.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-datepicker.mjs +230 -211
- package/fesm2022/sebgroup-green-angular-src-v-angular-datepicker.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs +6 -6
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-info-circle.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-info-circle.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs +6 -6
- package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-pagination.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-pagination.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-radio.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-radio.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-table.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-table.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-tabs.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-tabs.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-textarea.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-textarea.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-v-angular.mjs +262 -243
- package/fesm2022/sebgroup-green-angular-v-angular.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular.mjs +40 -36
- package/fesm2022/sebgroup-green-angular.mjs.map +1 -1
- package/lib/button/button.component.d.ts +1 -1
- package/lib/in-page-wizard/in-page-wizard.module.d.ts +2 -1
- package/lib/sortable-list/sortable-list.component.d.ts +1 -0
- package/lib/sortable-list/sortable-list.module.d.ts +2 -1
- package/package.json +2 -2
- package/src/lib/button/button.component.d.ts +1 -1
- package/src/lib/in-page-wizard/in-page-wizard.module.d.ts +2 -1
- package/src/lib/sortable-list/sortable-list.component.d.ts +1 -0
- package/src/lib/sortable-list/sortable-list.module.d.ts +2 -1
- package/src/v-angular/datepicker/components/calendar/calendar.component.d.ts +1 -1
- package/src/v-angular/datepicker/components/date-input/date-input.component.d.ts +1 -1
- package/src/v-angular/datepicker/components/datepicker/datepicker.component.d.ts +1 -1
- package/src/v-angular/datepicker/date-control-value-accessor/date-control-value-accessor.component.d.ts +1 -1
- package/src/v-angular/datepicker/datepicker.utils.d.ts +7 -0
- package/v-angular/datepicker/components/calendar/calendar.component.d.ts +1 -1
- package/v-angular/datepicker/components/date-input/date-input.component.d.ts +1 -1
- package/v-angular/datepicker/components/datepicker/datepicker.component.d.ts +1 -1
- package/v-angular/datepicker/date-control-value-accessor/date-control-value-accessor.component.d.ts +1 -1
- package/v-angular/datepicker/datepicker.utils.d.ts +7 -0
|
@@ -10,13 +10,15 @@ import * as ContextMenuTransStyles from '@sebgroup/green-core/components/context
|
|
|
10
10
|
import * as i2 from '@sebgroup/green-angular/src/lib/shared';
|
|
11
11
|
import { NggCoreWrapperModule as NggCoreWrapperModule$1, SCOPE_RESOLVER as SCOPE_RESOLVER$1 } from '@sebgroup/green-angular/src/lib/shared';
|
|
12
12
|
import { getScopedTagName } from '@sebgroup/green-core/scoping';
|
|
13
|
-
import * as i2$
|
|
13
|
+
import * as i2$2 from '@angular/forms';
|
|
14
14
|
import { NG_VALUE_ACCESSOR, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
15
15
|
import { startOfDay, endOfDay } from 'date-fns';
|
|
16
16
|
import { GdsDatepicker } from '@sebgroup/green-core/components/datepicker/datepicker.component.js';
|
|
17
17
|
import * as DatepickerTransStyles from '@sebgroup/green-core/components/datepicker/datepicker.trans.styles.js';
|
|
18
18
|
import { GdsDropdown } from '@sebgroup/green-core/components/dropdown/dropdown.component.js';
|
|
19
19
|
import * as DropdownTransStyles from '@sebgroup/green-core/components/dropdown/dropdown.trans.styles.js';
|
|
20
|
+
import * as i2$1 from '@sebgroup/green-angular/src/lib/button';
|
|
21
|
+
import { NggButtonModule as NggButtonModule$1 } from '@sebgroup/green-angular/src/lib/button';
|
|
20
22
|
import { trigger, transition, query, group, style, animate } from '@angular/animations';
|
|
21
23
|
import * as i1$2 from '@angular/cdk/a11y';
|
|
22
24
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
@@ -25,8 +27,9 @@ import * as i1$3 from '@angular/router';
|
|
|
25
27
|
import { RouterModule } from '@angular/router';
|
|
26
28
|
import { Subject, fromEvent, interval } from 'rxjs';
|
|
27
29
|
import { takeUntil, throttle } from 'rxjs/operators';
|
|
28
|
-
import * as i2$
|
|
30
|
+
import * as i2$3 from '@angular/cdk/drag-drop';
|
|
29
31
|
import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
|
|
32
|
+
import '@sebgroup/green-core/components/icon/icons/dot-grid-two.js';
|
|
30
33
|
import { ɵAnimationRendererFactory as _AnimationRendererFactory, ɵAnimationEngine as _AnimationEngine } from '@angular/animations/browser';
|
|
31
34
|
|
|
32
35
|
class NggAccordionListItemComponent {
|
|
@@ -135,11 +138,11 @@ class NggAccordionComponent {
|
|
|
135
138
|
}
|
|
136
139
|
}
|
|
137
140
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
138
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggAccordionComponent, isStandalone: false, 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" }); }
|
|
141
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggAccordionComponent, isStandalone: false, selector: "ngg-accordion", inputs: { closeOthers: "closeOthers", expandAll: "expandAll" }, queries: [{ propertyName: "items", predicate: NggAccordionListItemComponent }], ngImport: i0, template: "<div class=\"gds-accordion\" data-testid=\"accordion-root\">\n <ng-content></ng-content>\n</div>\n" }); }
|
|
139
142
|
}
|
|
140
143
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggAccordionComponent, decorators: [{
|
|
141
144
|
type: Component,
|
|
142
|
-
args: [{ selector: 'ngg-accordion', standalone: false, template: "<div class=\"accordion\" data-testid=\"accordion-root\">\n <ng-content></ng-content>\n</div>\n" }]
|
|
145
|
+
args: [{ selector: 'ngg-accordion', standalone: false, template: "<div class=\"gds-accordion\" data-testid=\"accordion-root\">\n <ng-content></ng-content>\n</div>\n" }]
|
|
143
146
|
}], propDecorators: { items: [{
|
|
144
147
|
type: ContentChildren,
|
|
145
148
|
args: [NggAccordionListItemComponent]
|
|
@@ -182,7 +185,7 @@ class NggBadgeComponent {
|
|
|
182
185
|
return this._isCloseable === '' || !!this._isCloseable;
|
|
183
186
|
}
|
|
184
187
|
get class() {
|
|
185
|
-
return ['badge', this.badgeType].join(' ');
|
|
188
|
+
return ['gds-badge', this.badgeType].join(' ');
|
|
186
189
|
}
|
|
187
190
|
//eslint-disable-next-line
|
|
188
191
|
constructor() {
|
|
@@ -272,7 +275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
272
275
|
|
|
273
276
|
class NggButtonComponent {
|
|
274
277
|
get classes() {
|
|
275
|
-
return [this.variant, this.size ? this.size : false]
|
|
278
|
+
return ['gds-button', this.variant, this.size ? this.size : false]
|
|
276
279
|
.filter(Boolean)
|
|
277
280
|
.join(' ');
|
|
278
281
|
}
|
|
@@ -518,11 +521,11 @@ class NggCellTableComponent {
|
|
|
518
521
|
return b.tableKeySelector;
|
|
519
522
|
}
|
|
520
523
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggCellTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
521
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggCellTableComponent, isStandalone: false, selector: "ngg-cell-table", inputs: { minWidth: "minWidth", overflowReverse: "overflowReverse", className: "className", headerList: "headerList", rows: "rows", clickableRows: "clickableRows", clickLabel: "clickLabel" }, outputs: { rowClicked: "rowClicked" }, viewQueries: [{ propertyName: "items", predicate: ["items"], descendants: true }], ngImport: i0, template: "<div
|
|
524
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggCellTableComponent, isStandalone: false, selector: "ngg-cell-table", inputs: { minWidth: "minWidth", overflowReverse: "overflowReverse", className: "className", headerList: "headerList", rows: "rows", clickableRows: "clickableRows", clickLabel: "clickLabel" }, outputs: { rowClicked: "rowClicked" }, viewQueries: [{ propertyName: "items", predicate: ["items"], descendants: true }], ngImport: i0, template: "<div\n #targetElement\n role=\"table\"\n [ngClass]=\"'gds-cell-table-table ' + className\"\n>\n <div class=\"cell-table-table d-flex flex-column\">\n <div\n *ngFor=\"let row of rows; trackBy: trackByRowId\"\n (click)=\"handleClickRow(row)\"\n class=\"cell-table--row-wrapper\"\n role=\"rowgroup\"\n [class.is-clickable]=\"clickableRows\"\n >\n <div>\n <div #items [class.overflow-reverse]=\"overflowReverse\">\n <!-- Main header -->\n <div role=\"row\">\n <div\n nggCellTableItem\n [row]=\"mainHeader(row).value\"\n [valueType]=\"getValueTypeFromMain()\"\n [attr.valueType]=\"getValueTypeFromMain()\"\n [attr.id]=\"getTableKeySelector(row)\"\n role=\"rowheader\"\n aria-rowspan=\"3\"\n aria-colspan=\"3\"\n ></div>\n </div>\n <div role=\"row\">\n <div class=\"d-flex\">\n <!-- Sub Header -->\n <div\n nggCellTableItem\n class=\"sub-header py-0 fw-bold\"\n [row]=\"header.label\"\n [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n role=\"columnheader\"\n *ngFor=\"\n let header of headerNoneMain(headerList);\n trackBy: KeySelector\n \"\n ></div>\n </div>\n </div>\n\n <div role=\"row\">\n <!-- Sub Values -->\n <div class=\"d-flex\">\n <div\n nggCellTableItem\n class=\"sub-value py-0\"\n [row]=\"row[header.tableKeySelector]\"\n [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n [attr.valueType]=\"header.valueType\"\n role=\"cell\"\n *ngFor=\"\n let header of headerNoneMain(headerList);\n trackBy: KeySelector\n \"\n ></div>\n </div>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"clickableRows\"\n role=\"row\"\n class=\"d-grid align-items-center ms-4 me-4 cell-table--arrow-container\"\n >\n <div role=\"cell\">\n <div\n role=\"button\"\n [attr.aria-label]=\"clickLabel\"\n tabindex=\"0\"\n [attr.aria-describedby]=\"getTableKeySelector(row)\"\n (keydown.enter)=\"handleClickRow(row)\"\n >\n <svg\n data-prefix=\"far\"\n data-icon=\"chevron-right\"\n class=\"svg-inline--fa fa-chevron-right fa-w-10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 320 512\"\n >\n <path\n fill=\"currentColor\"\n d=\"M113.3 47.41l183.1 191.1c4.469 4.625 6.688 10.62 6.688 16.59s-2.219 11.97-6.688 16.59l-183.1 191.1c-9.152 9.594-24.34 9.906-33.9 .7187c-9.625-9.125-9.938-24.38-.7187-33.91l168-175.4L78.71 80.6c-9.219-9.5-8.906-24.78 .7187-33.91C88.99 37.5 104.2 37.82 113.3 47.41z\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".gds-cell-table-table [role=rowheader]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.5rem}.gds-cell-table-table [role=cell],.gds-cell-table-table [role=columnheader]{flex:1 1 0;margin-bottom:.125rem}.gds-cell-table-table .cell-table--row-wrapper{border-top:1px solid var(--gds-sys-color-base-400);display:flex;padding:1rem}.gds-cell-table-table .cell-table--row-wrapper>div:first-child{flex:1 1 0}.gds-cell-table-table .cell-table--row-wrapper.is-clickable{cursor:pointer}.gds-cell-table-table .cell-table--row-wrapper.is-clickable:hover{background-color:var(--gds-sys-color-base-100)}.gds-cell-table-table .cell-table--arrow-container{flex:0 0 auto;width:10px}.gds-cell-table-table .cell-table--arrow-container [tabindex=\"0\"]:focus{outline:2px solid var(--gds-sys-color-base-800)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: CellTableItemComponent, selector: "[nggCellTableItem]", inputs: ["row", "valueType", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
522
525
|
}
|
|
523
526
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggCellTableComponent, decorators: [{
|
|
524
527
|
type: Component,
|
|
525
|
-
args: [{ selector: 'ngg-cell-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div
|
|
528
|
+
args: [{ selector: 'ngg-cell-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n #targetElement\n role=\"table\"\n [ngClass]=\"'gds-cell-table-table ' + className\"\n>\n <div class=\"cell-table-table d-flex flex-column\">\n <div\n *ngFor=\"let row of rows; trackBy: trackByRowId\"\n (click)=\"handleClickRow(row)\"\n class=\"cell-table--row-wrapper\"\n role=\"rowgroup\"\n [class.is-clickable]=\"clickableRows\"\n >\n <div>\n <div #items [class.overflow-reverse]=\"overflowReverse\">\n <!-- Main header -->\n <div role=\"row\">\n <div\n nggCellTableItem\n [row]=\"mainHeader(row).value\"\n [valueType]=\"getValueTypeFromMain()\"\n [attr.valueType]=\"getValueTypeFromMain()\"\n [attr.id]=\"getTableKeySelector(row)\"\n role=\"rowheader\"\n aria-rowspan=\"3\"\n aria-colspan=\"3\"\n ></div>\n </div>\n <div role=\"row\">\n <div class=\"d-flex\">\n <!-- Sub Header -->\n <div\n nggCellTableItem\n class=\"sub-header py-0 fw-bold\"\n [row]=\"header.label\"\n [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n role=\"columnheader\"\n *ngFor=\"\n let header of headerNoneMain(headerList);\n trackBy: KeySelector\n \"\n ></div>\n </div>\n </div>\n\n <div role=\"row\">\n <!-- Sub Values -->\n <div class=\"d-flex\">\n <div\n nggCellTableItem\n class=\"sub-value py-0\"\n [row]=\"row[header.tableKeySelector]\"\n [valueType]=\"getTableHeaderListValueFromNonMain(header)\"\n [attr.valueType]=\"header.valueType\"\n role=\"cell\"\n *ngFor=\"\n let header of headerNoneMain(headerList);\n trackBy: KeySelector\n \"\n ></div>\n </div>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"clickableRows\"\n role=\"row\"\n class=\"d-grid align-items-center ms-4 me-4 cell-table--arrow-container\"\n >\n <div role=\"cell\">\n <div\n role=\"button\"\n [attr.aria-label]=\"clickLabel\"\n tabindex=\"0\"\n [attr.aria-describedby]=\"getTableKeySelector(row)\"\n (keydown.enter)=\"handleClickRow(row)\"\n >\n <svg\n data-prefix=\"far\"\n data-icon=\"chevron-right\"\n class=\"svg-inline--fa fa-chevron-right fa-w-10\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 320 512\"\n >\n <path\n fill=\"currentColor\"\n d=\"M113.3 47.41l183.1 191.1c4.469 4.625 6.688 10.62 6.688 16.59s-2.219 11.97-6.688 16.59l-183.1 191.1c-9.152 9.594-24.34 9.906-33.9 .7187c-9.625-9.125-9.938-24.38-.7187-33.91l168-175.4L78.71 80.6c-9.219-9.5-8.906-24.78 .7187-33.91C88.99 37.5 104.2 37.82 113.3 47.41z\"\n ></path>\n </svg>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: [".gds-cell-table-table [role=rowheader]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.5rem}.gds-cell-table-table [role=cell],.gds-cell-table-table [role=columnheader]{flex:1 1 0;margin-bottom:.125rem}.gds-cell-table-table .cell-table--row-wrapper{border-top:1px solid var(--gds-sys-color-base-400);display:flex;padding:1rem}.gds-cell-table-table .cell-table--row-wrapper>div:first-child{flex:1 1 0}.gds-cell-table-table .cell-table--row-wrapper.is-clickable{cursor:pointer}.gds-cell-table-table .cell-table--row-wrapper.is-clickable:hover{background-color:var(--gds-sys-color-base-100)}.gds-cell-table-table .cell-table--arrow-container{flex:0 0 auto;width:10px}.gds-cell-table-table .cell-table--arrow-container [tabindex=\"0\"]:focus{outline:2px solid var(--gds-sys-color-base-800)}\n"] }]
|
|
526
529
|
}], propDecorators: { items: [{
|
|
527
530
|
type: ViewChildren,
|
|
528
531
|
args: ['items']
|
|
@@ -1183,11 +1186,11 @@ class NggInPageWizardStepCardComponent {
|
|
|
1183
1186
|
this.handleNextClick.emit(event);
|
|
1184
1187
|
}
|
|
1185
1188
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggInPageWizardStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1186
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggInPageWizardStepCardComponent, isStandalone: false, selector: "ngg-in-page-wizard-step-card", inputs: { stepIsValid: "stepIsValid", stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", showNextBtnIcon: "showNextBtnIcon", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n class=\"gds-in-page-wizard-step-card card\"\n data-testid=\"in-page-wizard-step-card-root\"\n [class.active]=\"!!isActive\"\n [class.completed]=\"!!isCompleted\"\n>\n <header class=\"gds-in-page-wizard-step-card__header\">\n <div class=\"gds-in-page-wizard-step-card__header__icon\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__progress\"\n data-testid=\"in-page-wizard-step-card-step-text\"\n >\n {{ stepText }}\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__title\"\n data-testid=\"in-page-wizard-step-card-title\"\n >\n <h2 class=\"h4\">{{ title }}</h2>\n </div>\n\n <div\n class=\"gds-in-page-wizard-step-card__header__edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n
|
|
1189
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggInPageWizardStepCardComponent, isStandalone: false, selector: "ngg-in-page-wizard-step-card", inputs: { stepIsValid: "stepIsValid", stepText: "stepText", title: "title", editBtnText: "editBtnText", nextBtnText: "nextBtnText", showNextBtnIcon: "showNextBtnIcon", isCompleted: "isCompleted", disableNext: "disableNext", isActive: "isActive" }, outputs: { handleNextClick: "handleNextClick", handleEditClick: "handleEditClick" }, ngImport: i0, template: "<section\n class=\"gds-in-page-wizard-step-card gds-card\"\n data-testid=\"in-page-wizard-step-card-root\"\n [class.active]=\"!!isActive\"\n [class.completed]=\"!!isCompleted\"\n>\n <header class=\"gds-in-page-wizard-step-card__header\">\n <div class=\"gds-in-page-wizard-step-card__header__icon\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__progress\"\n data-testid=\"in-page-wizard-step-card-step-text\"\n >\n {{ stepText }}\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__title\"\n data-testid=\"in-page-wizard-step-card-title\"\n >\n <h2 class=\"h4\">{{ title }}</h2>\n </div>\n\n <div\n class=\"gds-in-page-wizard-step-card__header__edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n ngg-button\n variant=\"secondary\"\n size=\"small\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </div>\n </header>\n\n <div\n class=\"gds-in-page-wizard-step-card__content\"\n *ngIf=\"!!isActive || !!isCompleted\"\n data-testid=\"in-page-wizard-step-card-content\"\n >\n <ng-content></ng-content>\n </div>\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n ngg-button\n variant=\"secondary\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </footer>\n\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n *ngIf=\"isActive\"\n >\n <button\n ngg-button\n variant=\"primary\"\n [disabled]=\"disableNext\"\n (click)=\"handleOnNextBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-next-btn\"\n >\n {{ nextBtnText }}\n <ng-container *ngIf=\"showNextBtnIcon\">\n <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n </ng-container>\n </button>\n </footer>\n</section>\n\n<ng-template #editIcon>\n <svg\n viewBox=\"0 0 576 512\"\n class=\"edit-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n fill=\"var(--color)\"\n d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n ></path>\n </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1\"\n class=\"next-icon\"\n data-testid=\"in-page-wizard-step-card-next-icon\"\n >\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 5l0 14\" />\n <path d=\"M18 13l-6 6\" />\n <path d=\"M6 13l6 6\" />\n </svg>\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: "component", type: i2$1.NggButtonComponent, selector: "[ngg-button]", inputs: ["variant", "size"] }] }); }
|
|
1187
1190
|
}
|
|
1188
1191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggInPageWizardStepCardComponent, decorators: [{
|
|
1189
1192
|
type: Component,
|
|
1190
|
-
args: [{ selector: 'ngg-in-page-wizard-step-card', standalone: false, template: "<section\n class=\"gds-in-page-wizard-step-card card\"\n data-testid=\"in-page-wizard-step-card-root\"\n [class.active]=\"!!isActive\"\n [class.completed]=\"!!isCompleted\"\n>\n <header class=\"gds-in-page-wizard-step-card__header\">\n <div class=\"gds-in-page-wizard-step-card__header__icon\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__progress\"\n data-testid=\"in-page-wizard-step-card-step-text\"\n >\n {{ stepText }}\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__title\"\n data-testid=\"in-page-wizard-step-card-title\"\n >\n <h2 class=\"h4\">{{ title }}</h2>\n </div>\n\n <div\n class=\"gds-in-page-wizard-step-card__header__edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n
|
|
1193
|
+
args: [{ selector: 'ngg-in-page-wizard-step-card', standalone: false, template: "<section\n class=\"gds-in-page-wizard-step-card gds-card\"\n data-testid=\"in-page-wizard-step-card-root\"\n [class.active]=\"!!isActive\"\n [class.completed]=\"!!isCompleted\"\n>\n <header class=\"gds-in-page-wizard-step-card__header\">\n <div class=\"gds-in-page-wizard-step-card__header__icon\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__progress\"\n data-testid=\"in-page-wizard-step-card-step-text\"\n >\n {{ stepText }}\n </div>\n <div\n class=\"gds-in-page-wizard-step-card__header__title\"\n data-testid=\"in-page-wizard-step-card-title\"\n >\n <h2 class=\"h4\">{{ title }}</h2>\n </div>\n\n <div\n class=\"gds-in-page-wizard-step-card__header__edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n ngg-button\n variant=\"secondary\"\n size=\"small\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </div>\n </header>\n\n <div\n class=\"gds-in-page-wizard-step-card__content\"\n *ngIf=\"!!isActive || !!isCompleted\"\n data-testid=\"in-page-wizard-step-card-content\"\n >\n <ng-content></ng-content>\n </div>\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit\"\n *ngIf=\"isCompleted && !isActive\"\n >\n <button\n ngg-button\n variant=\"secondary\"\n (click)=\"handleOnEditBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-footer-edit-btn\"\n >\n <ng-template *ngTemplateOutlet=\"editIcon\"> </ng-template>\n {{ editBtnText }}\n </button>\n </footer>\n\n <footer\n class=\"gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--next\"\n *ngIf=\"isActive\"\n >\n <button\n ngg-button\n variant=\"primary\"\n [disabled]=\"disableNext\"\n (click)=\"handleOnNextBtnClick($event)\"\n data-testid=\"in-page-wizard-step-card-next-btn\"\n >\n {{ nextBtnText }}\n <ng-container *ngIf=\"showNextBtnIcon\">\n <ng-template *ngTemplateOutlet=\"nextIcon\"> </ng-template>\n </ng-container>\n </button>\n </footer>\n</section>\n\n<ng-template #editIcon>\n <svg\n viewBox=\"0 0 576 512\"\n class=\"edit-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n >\n <path\n fill=\"var(--color)\"\n d=\"M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z\"\n ></path>\n </svg>\n</ng-template>\n\n<ng-template #nextIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1\"\n class=\"next-icon\"\n data-testid=\"in-page-wizard-step-card-next-icon\"\n >\n <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M12 5l0 14\" />\n <path d=\"M18 13l-6 6\" />\n <path d=\"M6 13l6 6\" />\n </svg>\n</ng-template>\n" }]
|
|
1191
1194
|
}], propDecorators: { handleNextClick: [{
|
|
1192
1195
|
type: Output
|
|
1193
1196
|
}], handleEditClick: [{
|
|
@@ -1214,14 +1217,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
1214
1217
|
|
|
1215
1218
|
class NggInPageWizardModule {
|
|
1216
1219
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggInPageWizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1217
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: NggInPageWizardModule, declarations: [NggInPageWizardStepCardComponent], imports: [CommonModule], exports: [NggInPageWizardStepCardComponent] }); }
|
|
1218
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggInPageWizardModule, imports: [CommonModule] }); }
|
|
1220
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: NggInPageWizardModule, declarations: [NggInPageWizardStepCardComponent], imports: [CommonModule, NggButtonModule$1], exports: [NggInPageWizardStepCardComponent] }); }
|
|
1221
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggInPageWizardModule, imports: [CommonModule, NggButtonModule$1] }); }
|
|
1219
1222
|
}
|
|
1220
1223
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggInPageWizardModule, decorators: [{
|
|
1221
1224
|
type: NgModule,
|
|
1222
1225
|
args: [{
|
|
1223
1226
|
declarations: [NggInPageWizardStepCardComponent],
|
|
1224
|
-
imports: [CommonModule],
|
|
1227
|
+
imports: [CommonModule, NggButtonModule$1],
|
|
1225
1228
|
exports: [NggInPageWizardStepCardComponent],
|
|
1226
1229
|
}]
|
|
1227
1230
|
}] });
|
|
@@ -1359,7 +1362,7 @@ class NggModalComponent {
|
|
|
1359
1362
|
enableBodyScroll(this.ref.nativeElement);
|
|
1360
1363
|
}
|
|
1361
1364
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggModalComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1362
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggModalComponent, isStandalone: false, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", closeText: "closeText", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", hideHeader: "hideHeader", hideFooter: "hideFooter", disableBodyScroll: "disableBodyScroll", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, queries: [{ propertyName: "modalHeaderContent", first: true, predicate: NggModalHeaderDirective, descendants: true }, { propertyName: "modalFooterContent", first: true, predicate: NggModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <div class=\"gds-dialog-wrapper\" [@modalAnimation]>\n <aside\n data-testid=\"modal\"\n *ngSwitchCase=\"'slideout'\"\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </aside>\n <main\n data-testid=\"modal\"\n *ngSwitchCase=\"'takeover'\"\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class.entered]=\"isOpen\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </main>\n <section\n data-testid=\"modal\"\n *ngSwitchDefault\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </section>\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"!hideHeader\">\n <header\n *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n ngg-modal-header\n [attr.id]=\"'modal-header-' + guid\"\n data-testid=\"modal-header\"\n [header]=\"header\"\n [closeText]=\"closeText\"\n (closed)=\"this.handleCloseClick($event)\"\n ></header>\n </ng-container>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n <footer\n *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n ngg-modal-footer\n data-testid=\"modal-footer\"\n [dismissLabel]=\"dismissLabel\"\n [confirmLabel]=\"confirmLabel\"\n (dismiss)=\"this.handleDismiss($event)\"\n (confirm)=\"this.handleConfirm($event)\"\n ></footer>\n </ng-container>\n </ng-template>\n <ng-template #headerContentTemplate>\n <header data-testid=\"modal-header\" [attr.id]=\"'modal-header-' + guid\">\n <ng-content select=\"[nggModalHeader]\"></ng-content>\n </header>\n </ng-template>\n <ng-template #bodyContentTemplate>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #footerContentTemplate>\n <footer data-testid=\"modal-footer\">\n <ng-content select=\"[nggModalFooter]\"></ng-content>\n </footer>\n </ng-template>\n <div\n #backdrop\n data-testid=\"modal-backdrop\"\n class=\"backdrop entered\"\n (click)=\"this.handleBackdropClick($event)\"\n [attr.aria-hidden]=\"true\"\n ></div>\n </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--
|
|
1365
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggModalComponent, isStandalone: false, selector: "ngg-modal", inputs: { modalType: "modalType", header: "header", closeText: "closeText", confirmLabel: "confirmLabel", dismissLabel: "dismissLabel", size: "size", hideHeader: "hideHeader", hideFooter: "hideFooter", disableBodyScroll: "disableBodyScroll", trapFocus: "trapFocus", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange", closed: "closed", confirm: "confirm", dismiss: "dismiss" }, host: { properties: { "class.open": "this.open" } }, queries: [{ propertyName: "modalHeaderContent", first: true, predicate: NggModalHeaderDirective, descendants: true }, { propertyName: "modalFooterContent", first: true, predicate: NggModalFooterDirective, descendants: true }], viewQueries: [{ propertyName: "backdropRef", first: true, predicate: ["backdrop"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <div class=\"gds-dialog-wrapper\" [@modalAnimation]>\n <aside\n data-testid=\"modal\"\n *ngSwitchCase=\"'slideout'\"\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class]=\"'gds-modal gds-modal--slide-out'\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </aside>\n <main\n data-testid=\"modal\"\n *ngSwitchCase=\"'takeover'\"\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class]=\"'gds-modal gds-modal--take-over'\"\n [class.entered]=\"isOpen\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </main>\n <section\n data-testid=\"modal\"\n *ngSwitchDefault\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class]=\"'gds-modal gds-modal--dialog'\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </section>\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"!hideHeader\">\n <header\n *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n ngg-modal-header\n [attr.id]=\"'modal-header-' + guid\"\n data-testid=\"modal-header\"\n [header]=\"header\"\n [closeText]=\"closeText\"\n (closed)=\"this.handleCloseClick($event)\"\n ></header>\n </ng-container>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n <footer\n *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n ngg-modal-footer\n data-testid=\"modal-footer\"\n [dismissLabel]=\"dismissLabel\"\n [confirmLabel]=\"confirmLabel\"\n (dismiss)=\"this.handleDismiss($event)\"\n (confirm)=\"this.handleConfirm($event)\"\n ></footer>\n </ng-container>\n </ng-template>\n <ng-template #headerContentTemplate>\n <header data-testid=\"modal-header\" [attr.id]=\"'modal-header-' + guid\">\n <ng-content select=\"[nggModalHeader]\"></ng-content>\n </header>\n </ng-template>\n <ng-template #bodyContentTemplate>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #footerContentTemplate>\n <footer data-testid=\"modal-footer\">\n <ng-content select=\"[nggModalFooter]\"></ng-content>\n </footer>\n </ng-template>\n <div\n #backdrop\n data-testid=\"modal-backdrop\"\n class=\"backdrop entered\"\n (click)=\"this.handleBackdropClick($event)\"\n [attr.aria-hidden]=\"true\"\n ></div>\n </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999}:host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--gds-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:var(--gds-sys-color-base-200);height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:var(--gds-sys-color-base-600)}.body::-webkit-scrollbar-track{background-color:var(--gds-sys-color-base-200);box-shadow:inset 0 0 10px #00000040}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitch), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitchCase), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgSwitchDefault), selector: "[ngSwitchDefault]" }, { kind: "component", type: i0.forwardRef(() => NggModalHeaderComponent), selector: "[ngg-modal-header]", inputs: ["header", "closeText"], outputs: ["closed"] }, { kind: "component", type: i0.forwardRef(() => NggModalBodyComponent), selector: "[ngg-modal-body]" }, { kind: "component", type: i0.forwardRef(() => NggModalFooterComponent), selector: "[ngg-modal-footer]", inputs: ["dismissLabel", "confirmLabel"], outputs: ["dismiss", "confirm"] }], animations: [
|
|
1363
1366
|
trigger('modalAnimation', [
|
|
1364
1367
|
transition(':enter', [
|
|
1365
1368
|
query('aside', style({ transform: 'translateX(100%)' }), {
|
|
@@ -1411,7 +1414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
1411
1414
|
]),
|
|
1412
1415
|
]),
|
|
1413
1416
|
]),
|
|
1414
|
-
], standalone: false, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <div class=\"gds-dialog-wrapper\" [@modalAnimation]>\n <aside\n data-testid=\"modal\"\n *ngSwitchCase=\"'slideout'\"\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </aside>\n <main\n data-testid=\"modal\"\n *ngSwitchCase=\"'takeover'\"\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class.entered]=\"isOpen\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </main>\n <section\n data-testid=\"modal\"\n *ngSwitchDefault\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </section>\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"!hideHeader\">\n <header\n *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n ngg-modal-header\n [attr.id]=\"'modal-header-' + guid\"\n data-testid=\"modal-header\"\n [header]=\"header\"\n [closeText]=\"closeText\"\n (closed)=\"this.handleCloseClick($event)\"\n ></header>\n </ng-container>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n <footer\n *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n ngg-modal-footer\n data-testid=\"modal-footer\"\n [dismissLabel]=\"dismissLabel\"\n [confirmLabel]=\"confirmLabel\"\n (dismiss)=\"this.handleDismiss($event)\"\n (confirm)=\"this.handleConfirm($event)\"\n ></footer>\n </ng-container>\n </ng-template>\n <ng-template #headerContentTemplate>\n <header data-testid=\"modal-header\" [attr.id]=\"'modal-header-' + guid\">\n <ng-content select=\"[nggModalHeader]\"></ng-content>\n </header>\n </ng-template>\n <ng-template #bodyContentTemplate>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #footerContentTemplate>\n <footer data-testid=\"modal-footer\">\n <ng-content select=\"[nggModalFooter]\"></ng-content>\n </footer>\n </ng-template>\n <div\n #backdrop\n data-testid=\"modal-backdrop\"\n class=\"backdrop entered\"\n (click)=\"this.handleBackdropClick($event)\"\n [attr.aria-hidden]=\"true\"\n ></div>\n </div>\n</ng-container>\n", styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--
|
|
1417
|
+
], standalone: false, template: "<ng-container *ngIf=\"isOpen\" [ngSwitch]=\"modalType\">\n <div class=\"gds-dialog-wrapper\" [@modalAnimation]>\n <aside\n data-testid=\"modal\"\n *ngSwitchCase=\"'slideout'\"\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class]=\"'gds-modal gds-modal--slide-out'\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </aside>\n <main\n data-testid=\"modal\"\n *ngSwitchCase=\"'takeover'\"\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class]=\"'gds-modal gds-modal--take-over'\"\n [class.entered]=\"isOpen\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </main>\n <section\n data-testid=\"modal\"\n *ngSwitchDefault\n role=\"dialog\"\n [attr.aria-modal]=\"trapFocus ? true : false\"\n [attr.aria-describedby]=\"'modal-header-' + guid\"\n [class]=\"'gds-modal gds-modal--dialog'\"\n [class.small]=\"size === 'sm'\"\n [class.medium]=\"size === 'md'\"\n [class.large]=\"size === 'lg'\"\n [class.entered]=\"isOpen\"\n >\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n </section>\n <ng-template #contentTemplate>\n <ng-container *ngIf=\"!hideHeader\">\n <header\n *ngIf=\"!modalHeaderContent; else headerContentTemplate\"\n ngg-modal-header\n [attr.id]=\"'modal-header-' + guid\"\n data-testid=\"modal-header\"\n [header]=\"header\"\n [closeText]=\"closeText\"\n (closed)=\"this.handleCloseClick($event)\"\n ></header>\n </ng-container>\n <div ngg-modal-body data-testid=\"modal-body\" class=\"body\">\n <ng-container *ngTemplateOutlet=\"bodyContentTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!hideFooter && (dismissLabel || confirmLabel)\">\n <footer\n *ngIf=\"!modalFooterContent; else footerContentTemplate\"\n ngg-modal-footer\n data-testid=\"modal-footer\"\n [dismissLabel]=\"dismissLabel\"\n [confirmLabel]=\"confirmLabel\"\n (dismiss)=\"this.handleDismiss($event)\"\n (confirm)=\"this.handleConfirm($event)\"\n ></footer>\n </ng-container>\n </ng-template>\n <ng-template #headerContentTemplate>\n <header data-testid=\"modal-header\" [attr.id]=\"'modal-header-' + guid\">\n <ng-content select=\"[nggModalHeader]\"></ng-content>\n </header>\n </ng-template>\n <ng-template #bodyContentTemplate>\n <ng-content></ng-content>\n </ng-template>\n <ng-template #footerContentTemplate>\n <footer data-testid=\"modal-footer\">\n <ng-content select=\"[nggModalFooter]\"></ng-content>\n </footer>\n </ng-template>\n <div\n #backdrop\n data-testid=\"modal-backdrop\"\n class=\"backdrop entered\"\n (click)=\"this.handleBackdropClick($event)\"\n [attr.aria-hidden]=\"true\"\n ></div>\n </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999}:host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--gds-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:var(--gds-sys-color-base-200);height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:var(--gds-sys-color-base-600)}.body::-webkit-scrollbar-track{background-color:var(--gds-sys-color-base-200);box-shadow:inset 0 0 10px #00000040}\n"] }]
|
|
1415
1418
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.ConfigurableFocusTrapFactory }], propDecorators: { modalType: [{
|
|
1416
1419
|
type: Input
|
|
1417
1420
|
}], header: [{
|
|
@@ -1467,13 +1470,13 @@ class NggModalHeaderComponent {
|
|
|
1467
1470
|
<h3 data-testid="modal-header-text">{{ header }}</h3>
|
|
1468
1471
|
<button
|
|
1469
1472
|
data-testid="modal-close-button"
|
|
1470
|
-
class="close"
|
|
1473
|
+
class="gds-close"
|
|
1471
1474
|
[attr.aria-label]="closeText"
|
|
1472
1475
|
(click)="this.handleClose($event)"
|
|
1473
1476
|
>
|
|
1474
1477
|
<i></i>
|
|
1475
1478
|
</button>
|
|
1476
|
-
`, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--
|
|
1479
|
+
`, isInline: true, styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999}:host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--gds-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:var(--gds-sys-color-base-200);height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:var(--gds-sys-color-base-600)}.body::-webkit-scrollbar-track{background-color:var(--gds-sys-color-base-200);box-shadow:inset 0 0 10px #00000040}\n"] }); }
|
|
1477
1480
|
}
|
|
1478
1481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggModalHeaderComponent, decorators: [{
|
|
1479
1482
|
type: Component,
|
|
@@ -1481,13 +1484,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
1481
1484
|
<h3 data-testid="modal-header-text">{{ header }}</h3>
|
|
1482
1485
|
<button
|
|
1483
1486
|
data-testid="modal-close-button"
|
|
1484
|
-
class="close"
|
|
1487
|
+
class="gds-close"
|
|
1485
1488
|
[attr.aria-label]="closeText"
|
|
1486
1489
|
(click)="this.handleClose($event)"
|
|
1487
1490
|
>
|
|
1488
1491
|
<i></i>
|
|
1489
1492
|
</button>
|
|
1490
|
-
`, standalone: false, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--
|
|
1493
|
+
`, standalone: false, styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999}:host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--gds-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:var(--gds-sys-color-base-200);height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:var(--gds-sys-color-base-600)}.body::-webkit-scrollbar-track{background-color:var(--gds-sys-color-base-200);box-shadow:inset 0 0 10px #00000040}\n"] }]
|
|
1491
1494
|
}], propDecorators: { header: [{
|
|
1492
1495
|
type: Input
|
|
1493
1496
|
}], closeText: [{
|
|
@@ -1497,11 +1500,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
1497
1500
|
}] } });
|
|
1498
1501
|
class NggModalBodyComponent {
|
|
1499
1502
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggModalBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1500
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggModalBodyComponent, isStandalone: false, 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(--
|
|
1503
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggModalBodyComponent, isStandalone: false, selector: "[ngg-modal-body]", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999}:host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--gds-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:var(--gds-sys-color-base-200);height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:var(--gds-sys-color-base-600)}.body::-webkit-scrollbar-track{background-color:var(--gds-sys-color-base-200);box-shadow:inset 0 0 10px #00000040}\n"] }); }
|
|
1501
1504
|
}
|
|
1502
1505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggModalBodyComponent, decorators: [{
|
|
1503
1506
|
type: Component,
|
|
1504
|
-
args: [{ selector: '[ngg-modal-body]', template: `<ng-content></ng-content>`, standalone: false, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--
|
|
1507
|
+
args: [{ selector: '[ngg-modal-body]', template: `<ng-content></ng-content>`, standalone: false, styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999}:host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--gds-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:var(--gds-sys-color-base-200);height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:var(--gds-sys-color-base-600)}.body::-webkit-scrollbar-track{background-color:var(--gds-sys-color-base-200);box-shadow:inset 0 0 10px #00000040}\n"] }]
|
|
1505
1508
|
}] });
|
|
1506
1509
|
class NggModalFooterComponent {
|
|
1507
1510
|
constructor() {
|
|
@@ -1519,7 +1522,7 @@ class NggModalFooterComponent {
|
|
|
1519
1522
|
<button
|
|
1520
1523
|
data-testid="modal-dismiss-button"
|
|
1521
1524
|
*ngIf="dismissLabel"
|
|
1522
|
-
class="secondary"
|
|
1525
|
+
class="gds-button secondary"
|
|
1523
1526
|
(click)="this.handleDismiss($event)"
|
|
1524
1527
|
>
|
|
1525
1528
|
{{ dismissLabel }}
|
|
@@ -1527,12 +1530,12 @@ class NggModalFooterComponent {
|
|
|
1527
1530
|
<button
|
|
1528
1531
|
data-testid="modal-confirm-button"
|
|
1529
1532
|
*ngIf="confirmLabel"
|
|
1530
|
-
class="primary"
|
|
1533
|
+
class="gds-button primary"
|
|
1531
1534
|
(click)="this.handleConfirm($event)"
|
|
1532
1535
|
>
|
|
1533
1536
|
{{ confirmLabel }}
|
|
1534
1537
|
</button>
|
|
1535
|
-
`, isInline: true, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--
|
|
1538
|
+
`, isInline: true, styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999}:host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--gds-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:var(--gds-sys-color-base-200);height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:var(--gds-sys-color-base-600)}.body::-webkit-scrollbar-track{background-color:var(--gds-sys-color-base-200);box-shadow:inset 0 0 10px #00000040}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1536
1539
|
}
|
|
1537
1540
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggModalFooterComponent, decorators: [{
|
|
1538
1541
|
type: Component,
|
|
@@ -1540,7 +1543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
1540
1543
|
<button
|
|
1541
1544
|
data-testid="modal-dismiss-button"
|
|
1542
1545
|
*ngIf="dismissLabel"
|
|
1543
|
-
class="secondary"
|
|
1546
|
+
class="gds-button secondary"
|
|
1544
1547
|
(click)="this.handleDismiss($event)"
|
|
1545
1548
|
>
|
|
1546
1549
|
{{ dismissLabel }}
|
|
@@ -1548,12 +1551,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
1548
1551
|
<button
|
|
1549
1552
|
data-testid="modal-confirm-button"
|
|
1550
1553
|
*ngIf="confirmLabel"
|
|
1551
|
-
class="primary"
|
|
1554
|
+
class="gds-button primary"
|
|
1552
1555
|
(click)="this.handleConfirm($event)"
|
|
1553
1556
|
>
|
|
1554
1557
|
{{ confirmLabel }}
|
|
1555
1558
|
</button>
|
|
1556
|
-
`, standalone: false, styles: [":host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--
|
|
1559
|
+
`, standalone: false, styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999}:host.open{height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100%;z-index:var(--gds-z-index-modal)}:host.open>section[role=dialog]{left:50%;top:50%;transform:translate(-50%,-50%)}.body::-webkit-scrollbar{background-color:var(--gds-sys-color-base-200);height:10px;width:10px}.body::-webkit-scrollbar-thumb{background-color:var(--gds-sys-color-base-600)}.body::-webkit-scrollbar-track{background-color:var(--gds-sys-color-base-200);box-shadow:inset 0 0 10px #00000040}\n"] }]
|
|
1557
1560
|
}], propDecorators: { dismissLabel: [{
|
|
1558
1561
|
type: Input
|
|
1559
1562
|
}], confirmLabel: [{
|
|
@@ -1835,7 +1838,7 @@ class NggSliderComponent {
|
|
|
1835
1838
|
useExisting: NggSliderComponent,
|
|
1836
1839
|
multi: true,
|
|
1837
1840
|
},
|
|
1838
|
-
], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n <div>\n <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n </div>\n <ng-container *ngIf=\"hasTextbox\">\n <ng-container *ngIf=\"!!unitLabel\">\n <div class=\"group group-border group-focus\">\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 [attr.aria-valuenow]=\"value\"\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=\"text\"\n inputmode=\"numeric\"\n pattern=\"[0-9]*\"\n [(ngModel)]=\"value\"\n [class.is-invalid]=\"!!errorMessage\"\n [attr.name]=\"name\"\n [attr.id]=\"name + '-textbox'\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-labelledby]=\"name + '-label'\"\n [attr.enterkeyhint]=\"enterkeyhint\"\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$
|
|
1841
|
+
], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n <div>\n <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n </div>\n <ng-container *ngIf=\"hasTextbox\">\n <ng-container *ngIf=\"!!unitLabel\">\n <div class=\"gds-group gds-group--small gds-group-border gds-group-focus\">\n <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n <span class=\"gds-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 [attr.aria-valuenow]=\"value\"\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=\"text\"\n inputmode=\"numeric\"\n pattern=\"[0-9]*\"\n [(ngModel)]=\"value\"\n class=\"gds-input small\"\n [class.is-invalid]=\"!!errorMessage\"\n [attr.name]=\"name\"\n [attr.id]=\"name + '-textbox'\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-labelledby]=\"name + '-label'\"\n [attr.enterkeyhint]=\"enterkeyhint\"\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$2.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$2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1839
1842
|
}
|
|
1840
1843
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggSliderComponent, decorators: [{
|
|
1841
1844
|
type: Component,
|
|
@@ -1845,7 +1848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
1845
1848
|
useExisting: NggSliderComponent,
|
|
1846
1849
|
multi: true,
|
|
1847
1850
|
},
|
|
1848
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n <div>\n <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n </div>\n <ng-container *ngIf=\"hasTextbox\">\n <ng-container *ngIf=\"!!unitLabel\">\n <div class=\"group group-border group-focus\">\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 [attr.aria-valuenow]=\"value\"\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=\"text\"\n inputmode=\"numeric\"\n pattern=\"[0-9]*\"\n [(ngModel)]=\"value\"\n [class.is-invalid]=\"!!errorMessage\"\n [attr.name]=\"name\"\n [attr.id]=\"name + '-textbox'\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-labelledby]=\"name + '-label'\"\n [attr.enterkeyhint]=\"enterkeyhint\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (input)=\"handleChange()\"\n />\n</ng-template>\n" }]
|
|
1851
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div *ngIf=\"!!label\" class=\"gds-slider-label-container\">\n <div>\n <label [attr.for]=\"name\" [attr.id]=\"name + '-label'\">{{ label }}</label>\n <p *ngIf=\"!!instruction\">{{ instruction }}</p>\n </div>\n <ng-container *ngIf=\"hasTextbox\">\n <ng-container *ngIf=\"!!unitLabel\">\n <div class=\"gds-group gds-group--small gds-group-border gds-group-focus\">\n <ng-container *ngTemplateOutlet=\"inputField\"></ng-container>\n <span class=\"gds-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 [attr.aria-valuenow]=\"value\"\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=\"text\"\n inputmode=\"numeric\"\n pattern=\"[0-9]*\"\n [(ngModel)]=\"value\"\n class=\"gds-input small\"\n [class.is-invalid]=\"!!errorMessage\"\n [attr.name]=\"name\"\n [attr.id]=\"name + '-textbox'\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-labelledby]=\"name + '-label'\"\n [attr.enterkeyhint]=\"enterkeyhint\"\n [disabled]=\"disabled\"\n (blur)=\"onBlur()\"\n (input)=\"handleChange()\"\n />\n</ng-template>\n" }]
|
|
1849
1852
|
}], propDecorators: { name: [{
|
|
1850
1853
|
type: Input
|
|
1851
1854
|
}], min: [{
|
|
@@ -2042,11 +2045,11 @@ class NggSortableListComponent {
|
|
|
2042
2045
|
return this.focusedIndex[groupIndex] === itemIndex;
|
|
2043
2046
|
}
|
|
2044
2047
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggSortableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2045
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggSortableListComponent, isStandalone: false, selector: "ngg-sortable-list", inputs: { groups: "groups", shouldDisplayCheckboxes: "shouldDisplayCheckboxes", isReadOnly: "isReadOnly", isDraggable: "isDraggable", description: "description", suffixTemplate: "suffixTemplate" }, outputs: { itemSelectionChanged: "itemSelectionChanged", itemOrderChanged: "itemOrderChanged" }, viewQueries: [{ propertyName: "sortableListGroups", first: true, predicate: ["sortableListGroups"], descendants: true }], ngImport: i0, template: "<div class=\"
|
|
2048
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggSortableListComponent, isStandalone: false, selector: "ngg-sortable-list", inputs: { groups: "groups", shouldDisplayCheckboxes: "shouldDisplayCheckboxes", isReadOnly: "isReadOnly", isDraggable: "isDraggable", description: "description", suffixTemplate: "suffixTemplate" }, outputs: { itemSelectionChanged: "itemSelectionChanged", itemOrderChanged: "itemOrderChanged" }, viewQueries: [{ propertyName: "sortableListGroups", first: true, predicate: ["sortableListGroups"], descendants: true }], ngImport: i0, template: "<div class=\"gds-sortable-list\">\n <ng-container>\n <p class=\"gds-sortable-list-header\">\n <span class=\"gds-sortable-list-header-title\">{{ description }}</span>\n </p>\n <div #sortableListGroups cdkDropListGroup>\n <div\n *ngFor=\"let group of groups; let g_i = index\"\n class=\"gds-sortable-list-group\"\n [class.drag-enabled]=\"isDraggable && !isReadOnly\"\n role=\"list\"\n cdkDropList\n [cdkDropListData]=\"group.items\"\n [id]=\"g_i.toString()\"\n (cdkDropListDropped)=\"onDragDrop($event)\"\n >\n <p\n *ngIf=\"group.title && group.title.length > 0\"\n class=\"gds-sortable-list-header\"\n >\n <span class=\"gds-sortable-list-header-title\">{{ group.title }}</span>\n </p>\n <p\n *ngIf=\"group.description && group.description.length > 0\"\n class=\"gds-sortable-list-header-description\"\n >\n {{ group.description }}\n </p>\n <div\n *ngFor=\"let checklistItem of group.items; let i = index\"\n [cdkDragDisabled]=\"!isDraggable || isReadOnly\"\n [cdkDragData]=\"checklistItem\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n class=\"item-box\"\n role=\"listitem\"\n >\n <div *cdkDragPlaceholder class=\"item-custom-placeholder\"></div>\n <label\n (keydown.alt.arrowDown)=\"onAltArrowKeydown(g_i, i, i + 1, $event)\"\n (keydown.alt.arrowUp)=\"onAltArrowKeydown(g_i, i, i - 1, $event)\"\n (keydown.arrowDown)=\"onArrowKeydown(g_i, i + 1, $event)\"\n (keydown.arrowUp)=\"onArrowKeydown(g_i, i - 1, $event)\"\n class=\"gds-form-control item-control align-items-center item\"\n [tabindex]=\"shouldDisplayCheckboxes ? '-1' : '0'\"\n >\n <div class=\"gds-form-control\">\n <input\n (change)=\"toggleSelection(checklistItem)\"\n [checked]=\"checklistItem.selected\"\n [disabled]=\"isReadOnly\"\n [type]=\"shouldDisplayCheckboxes ? 'checkbox' : 'hidden'\"\n />\n <div class=\"item-box-title\">\n <span name=\"agendaItemName\"\n >{{ checklistItem.name }}\n <span\n *ngIf=\"checklistItem.hasCustomSuffix\"\n class=\"gds-sortable-list-suffix\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n suffixTemplate;\n context: { $implicit: checklistItem }\n \"\n class=\"user-icon\"\n >\n </ng-container>\n </span>\n </span>\n <br />\n <span *ngIf=\"!!checklistItem.description\">\n <span\n class=\"gds-sortable-list-suffix\"\n name=\"agendaItemToolTip\"\n >\n {{ checklistItem.description }}\n </span>\n <br />\n </span>\n </div>\n <i></i>\n </div>\n <div *ngIf=\"isDraggable && !isReadOnly\" class=\"item-grip-icon\">\n <gds-icon-dot-grid-two *nggCoreElement></gds-icon-dot-grid-two>\n </div>\n </label>\n </div>\n </div>\n </div>\n </ng-container>\n</div>\n", styles: [".gds-sortable-list{width:100%;display:block}label.item{padding:0!important}.item-box{background-color:var(--gds-sys-color-background-primary);color:var(--gds-sys-color-text-primary);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;font-size:14px;margin:5px 0;border:1px solid var(--border-color);border-radius:4px}.gds-form-control{line-height:20px;font-size:16px;font-weight:500}.gds-sortable-list-header{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:1rem}.gds-sortable-list-header-title{font-weight:600;font-size:1rem;line-height:1.25rem;font-style:normal}.gds-sortable-list-header-subtitle{font-size:.75rem;color:var(--gds-sys-color-text-primary);display:flex;justify-content:center;align-content:center}.gds-sortable-list-suffix{font-weight:400;font-size:.85rem}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-grip-icon{font-weight:400;padding:.75rem 1rem .75rem 0rem}.cdk-drop-list.cdk-drop-list-dragging{cursor:grabbing!important;pointer-events:all!important}.item-custom-placeholder.cdk-drag-placeholder{pointer-events:all!important}.cdk-drop-list.drag-enabled:not(.cdk-drag-placeholder) label{cursor:grab}.cdk-drop-list label:focus-visible{outline-color:#333;outline-offset:4px}.gds-sortable-list.cdk-drop-list-dragging .item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1);pointer-events:all!important}.item-custom-placeholder{border:dotted 1px #999;min-height:44px;transition:transform .25s cubic-bezier(0,0,.2,1);border-radius:4px;margin:5px 0;padding:12px 12px 12px 16px}.user-icon{margin-right:.5rem}.item-control{width:100%;display:flex;flex-direction:row;justify-content:space-between}.gds-form-control.item-layout{display:flex;justify-content:space-between}\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"] }, { kind: "directive", type: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
2046
2049
|
}
|
|
2047
2050
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggSortableListComponent, decorators: [{
|
|
2048
2051
|
type: Component,
|
|
2049
|
-
args: [{ selector: 'ngg-sortable-list', standalone: false, template: "<div class=\"
|
|
2052
|
+
args: [{ selector: 'ngg-sortable-list', standalone: false, template: "<div class=\"gds-sortable-list\">\n <ng-container>\n <p class=\"gds-sortable-list-header\">\n <span class=\"gds-sortable-list-header-title\">{{ description }}</span>\n </p>\n <div #sortableListGroups cdkDropListGroup>\n <div\n *ngFor=\"let group of groups; let g_i = index\"\n class=\"gds-sortable-list-group\"\n [class.drag-enabled]=\"isDraggable && !isReadOnly\"\n role=\"list\"\n cdkDropList\n [cdkDropListData]=\"group.items\"\n [id]=\"g_i.toString()\"\n (cdkDropListDropped)=\"onDragDrop($event)\"\n >\n <p\n *ngIf=\"group.title && group.title.length > 0\"\n class=\"gds-sortable-list-header\"\n >\n <span class=\"gds-sortable-list-header-title\">{{ group.title }}</span>\n </p>\n <p\n *ngIf=\"group.description && group.description.length > 0\"\n class=\"gds-sortable-list-header-description\"\n >\n {{ group.description }}\n </p>\n <div\n *ngFor=\"let checklistItem of group.items; let i = index\"\n [cdkDragDisabled]=\"!isDraggable || isReadOnly\"\n [cdkDragData]=\"checklistItem\"\n cdkDrag\n cdkDragLockAxis=\"y\"\n class=\"item-box\"\n role=\"listitem\"\n >\n <div *cdkDragPlaceholder class=\"item-custom-placeholder\"></div>\n <label\n (keydown.alt.arrowDown)=\"onAltArrowKeydown(g_i, i, i + 1, $event)\"\n (keydown.alt.arrowUp)=\"onAltArrowKeydown(g_i, i, i - 1, $event)\"\n (keydown.arrowDown)=\"onArrowKeydown(g_i, i + 1, $event)\"\n (keydown.arrowUp)=\"onArrowKeydown(g_i, i - 1, $event)\"\n class=\"gds-form-control item-control align-items-center item\"\n [tabindex]=\"shouldDisplayCheckboxes ? '-1' : '0'\"\n >\n <div class=\"gds-form-control\">\n <input\n (change)=\"toggleSelection(checklistItem)\"\n [checked]=\"checklistItem.selected\"\n [disabled]=\"isReadOnly\"\n [type]=\"shouldDisplayCheckboxes ? 'checkbox' : 'hidden'\"\n />\n <div class=\"item-box-title\">\n <span name=\"agendaItemName\"\n >{{ checklistItem.name }}\n <span\n *ngIf=\"checklistItem.hasCustomSuffix\"\n class=\"gds-sortable-list-suffix\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n suffixTemplate;\n context: { $implicit: checklistItem }\n \"\n class=\"user-icon\"\n >\n </ng-container>\n </span>\n </span>\n <br />\n <span *ngIf=\"!!checklistItem.description\">\n <span\n class=\"gds-sortable-list-suffix\"\n name=\"agendaItemToolTip\"\n >\n {{ checklistItem.description }}\n </span>\n <br />\n </span>\n </div>\n <i></i>\n </div>\n <div *ngIf=\"isDraggable && !isReadOnly\" class=\"item-grip-icon\">\n <gds-icon-dot-grid-two *nggCoreElement></gds-icon-dot-grid-two>\n </div>\n </label>\n </div>\n </div>\n </div>\n </ng-container>\n</div>\n", styles: [".gds-sortable-list{width:100%;display:block}label.item{padding:0!important}.item-box{background-color:var(--gds-sys-color-background-primary);color:var(--gds-sys-color-text-primary);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;font-size:14px;margin:5px 0;border:1px solid var(--border-color);border-radius:4px}.gds-form-control{line-height:20px;font-size:16px;font-weight:500}.gds-sortable-list-header{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:1rem}.gds-sortable-list-header-title{font-weight:600;font-size:1rem;line-height:1.25rem;font-style:normal}.gds-sortable-list-header-subtitle{font-size:.75rem;color:var(--gds-sys-color-text-primary);display:flex;justify-content:center;align-content:center}.gds-sortable-list-suffix{font-weight:400;font-size:.85rem}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-grip-icon{font-weight:400;padding:.75rem 1rem .75rem 0rem}.cdk-drop-list.cdk-drop-list-dragging{cursor:grabbing!important;pointer-events:all!important}.item-custom-placeholder.cdk-drag-placeholder{pointer-events:all!important}.cdk-drop-list.drag-enabled:not(.cdk-drag-placeholder) label{cursor:grab}.cdk-drop-list label:focus-visible{outline-color:#333;outline-offset:4px}.gds-sortable-list.cdk-drop-list-dragging .item-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1);pointer-events:all!important}.item-custom-placeholder{border:dotted 1px #999;min-height:44px;transition:transform .25s cubic-bezier(0,0,.2,1);border-radius:4px;margin:5px 0;padding:12px 12px 12px 16px}.user-icon{margin-right:.5rem}.item-control{width:100%;display:flex;flex-direction:row;justify-content:space-between}.gds-form-control.item-layout{display:flex;justify-content:space-between}\n"] }]
|
|
2050
2053
|
}], propDecorators: { groups: [{
|
|
2051
2054
|
type: Input
|
|
2052
2055
|
}], shouldDisplayCheckboxes: [{
|
|
@@ -2070,15 +2073,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
2070
2073
|
|
|
2071
2074
|
class NggSortableListModule {
|
|
2072
2075
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggSortableListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2073
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: NggSortableListModule, declarations: [NggSortableListComponent], imports: [CommonModule, FormsModule, DragDropModule], exports: [NggSortableListComponent] }); }
|
|
2074
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggSortableListModule, imports: [CommonModule, FormsModule, DragDropModule] }); }
|
|
2076
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: NggSortableListModule, declarations: [NggSortableListComponent], imports: [CommonModule, FormsModule, DragDropModule, NggCoreWrapperModule$1], exports: [NggSortableListComponent] }); }
|
|
2077
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggSortableListModule, imports: [CommonModule, FormsModule, DragDropModule, NggCoreWrapperModule$1] }); }
|
|
2075
2078
|
}
|
|
2076
2079
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggSortableListModule, decorators: [{
|
|
2077
2080
|
type: NgModule,
|
|
2078
2081
|
args: [{
|
|
2079
|
-
imports: [CommonModule, FormsModule, DragDropModule],
|
|
2082
|
+
imports: [CommonModule, FormsModule, DragDropModule, NggCoreWrapperModule$1],
|
|
2080
2083
|
exports: [NggSortableListComponent],
|
|
2081
2084
|
declarations: [NggSortableListComponent],
|
|
2085
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
2082
2086
|
}]
|
|
2083
2087
|
}] });
|
|
2084
2088
|
|
|
@@ -2287,11 +2291,11 @@ class NggPaginationComponent {
|
|
|
2287
2291
|
return pages;
|
|
2288
2292
|
}
|
|
2289
2293
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2290
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggPaginationComponent, isStandalone: false, 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 (keydown.enter)=\"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 (keydown.enter)=\"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 (keydown.enter)=\"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 (keydown.enter)=\"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 (keydown.enter)=\"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 }); }
|
|
2294
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggPaginationComponent, isStandalone: false, 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]=\"'gds-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 (keydown.enter)=\"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 (keydown.enter)=\"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 (keydown.enter)=\"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 (keydown.enter)=\"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 (keydown.enter)=\"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 }); }
|
|
2291
2295
|
}
|
|
2292
2296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggPaginationComponent, decorators: [{
|
|
2293
2297
|
type: Component,
|
|
2294
|
-
args: [{ selector: 'ngg-pagination', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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 (keydown.enter)=\"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 (keydown.enter)=\"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 (keydown.enter)=\"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 (keydown.enter)=\"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 (keydown.enter)=\"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" }]
|
|
2298
|
+
args: [{ selector: 'ngg-pagination', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<nav\n [class]=\"'gds-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 (keydown.enter)=\"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 (keydown.enter)=\"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 (keydown.enter)=\"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 (keydown.enter)=\"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 (keydown.enter)=\"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" }]
|
|
2295
2299
|
}], propDecorators: { i18n: [{
|
|
2296
2300
|
type: Input
|
|
2297
2301
|
}], size: [{
|