@sebgroup/green-angular 9.0.1 → 10.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 +11 -11
- package/fesm2022/sebgroup-green-angular-src-lib-accordion.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-badge.mjs +8 -8
- package/fesm2022/sebgroup-green-angular-src-lib-badge.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-button.mjs +8 -8
- package/fesm2022/sebgroup-green-angular-src-lib-button.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-cell-table.mjs +13 -13
- package/fesm2022/sebgroup-green-angular-src-lib-context-menu.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-lib-datepicker.mjs +9 -10
- package/fesm2022/sebgroup-green-angular-src-lib-datepicker.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-dropdown.mjs +13 -13
- package/fesm2022/sebgroup-green-angular-src-lib-in-page-wizard.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-lib-modal.mjs +23 -23
- package/fesm2022/sebgroup-green-angular-src-lib-modal.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-pagination.mjs +18 -8
- package/fesm2022/sebgroup-green-angular-src-lib-pagination.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-progress-circle.mjs +17 -8
- package/fesm2022/sebgroup-green-angular-src-lib-progress-circle.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-segmented-control.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-lib-shared.mjs +45 -35
- package/fesm2022/sebgroup-green-angular-src-lib-shared.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-slider.mjs +21 -8
- package/fesm2022/sebgroup-green-angular-src-lib-slider.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-sortable-list.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-account-number.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-alert.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-base-control-value-accessor.mjs +8 -8
- package/fesm2022/sebgroup-green-angular-src-v-angular-breadcrumbs.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-button.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-card.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-character-countdown.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-checkbox.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-core.mjs +3 -3
- package/fesm2022/sebgroup-green-angular-src-v-angular-datepicker.mjs +34 -34
- package/fesm2022/sebgroup-green-angular-src-v-angular-drag-drop.mjs +13 -13
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs +26 -26
- package/fesm2022/sebgroup-green-angular-src-v-angular-external-link.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-i18n.mjs +14 -14
- package/fesm2022/sebgroup-green-angular-src-v-angular-info-circle.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-input-mask.mjs +10 -10
- package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs +17 -17
- package/fesm2022/sebgroup-green-angular-src-v-angular-pagination.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-radio.mjs +13 -13
- package/fesm2022/sebgroup-green-angular-src-v-angular-slug.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-table.mjs +22 -22
- package/fesm2022/sebgroup-green-angular-src-v-angular-tabs.mjs +10 -10
- package/fesm2022/sebgroup-green-angular-src-v-angular-textarea.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-src-v-angular-toast.mjs +10 -10
- package/fesm2022/sebgroup-green-angular-src-v-angular-tooltip.mjs +7 -7
- package/fesm2022/sebgroup-green-angular-v-angular.mjs +282 -282
- package/fesm2022/sebgroup-green-angular.mjs +219 -177
- package/fesm2022/sebgroup-green-angular.mjs.map +1 -1
- package/lib/badge/badge.component.d.ts +1 -1
- package/lib/button/button.component.d.ts +3 -1
- package/lib/modal/modal.component.d.ts +3 -1
- package/lib/pagination/pagination.component.d.ts +15 -1
- package/lib/progress-circle/progress-circle.component.d.ts +2 -1
- package/lib/shared/id.d.ts +1 -0
- package/lib/shared/index.d.ts +1 -0
- package/package.json +15 -16
- package/src/lib/badge/badge.component.d.ts +1 -1
- package/src/lib/button/button.component.d.ts +3 -1
- package/src/lib/modal/modal.component.d.ts +3 -1
- package/src/lib/pagination/pagination.component.d.ts +15 -1
- package/src/lib/progress-circle/progress-circle.component.d.ts +2 -1
- package/src/lib/shared/id.d.ts +1 -0
- package/src/lib/shared/index.d.ts +1 -0
|
@@ -42,10 +42,10 @@ class NggvRadioControlRegistry {
|
|
|
42
42
|
controlPair[0]._parent === radio.ngControl._parent &&
|
|
43
43
|
controlPair[1].name === radio.name);
|
|
44
44
|
}
|
|
45
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
46
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.
|
|
45
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvRadioControlRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
46
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvRadioControlRegistry }); }
|
|
47
47
|
}
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvRadioControlRegistry, decorators: [{
|
|
49
49
|
type: Injectable
|
|
50
50
|
}] });
|
|
51
51
|
/**
|
|
@@ -125,10 +125,10 @@ class NggvRadioComponent extends NggvBaseControlValueAccessorComponent {
|
|
|
125
125
|
if (!this.name && this.formControlName)
|
|
126
126
|
this.name = this.formControlName;
|
|
127
127
|
}
|
|
128
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
129
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.
|
|
128
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvRadioComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: NggvRadioControlRegistry }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
129
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.19", type: NggvRadioComponent, isStandalone: false, selector: "nggv-radio", inputs: { thook: "thook", size: "size", formControlName: "formControlName" }, host: { properties: { "attr.data-thook": "this.thook", "class": "this.size" } }, providers: [NggvRadioControlRegistry], usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n <div\n [id]=\"id + '-radio'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div>\n <!-- RADIO BUTTON FIELD -->\n <label [attr.for]=\"id + '-radio'\" class=\"gds-form-control\">\n <input\n #input\n type=\"radio\"\n [attr.id]=\"id + '-radio'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- LABEL -->\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"\n labelContentTpl ?? null;\n context: { $implicit: value }\n \"\n ></ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <!-- if no nggv-radio-group is present -->\n @if (!isGroup) {\n <ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-radio'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n </ng-container>\n }\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\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-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%;--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 .nggv-field--locked{display:inline-block;border-radius:.25em;position:relative;min-height:2em;padding:.5em .75em .5em 0}:host .gds-form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .gds-form-control:has(input:disabled){cursor:not-allowed}:host label.gds-form-control input[type=radio]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.gds-form-control:has(input[type=radio]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.gds-form-control:has(input[type=radio]:focus-visible):focus,:host label.gds-form-control:has(input[type=radio]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.gds-form-control input[type=radio]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;position:relative;border-radius:var(--gds-sys-shape-corner-round);display:flex;height:1rem;width:1rem;box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-text-primary)}:host label.gds-form-control input[type=radio]~i:after{content:\"\";width:100%;height:100%;border-radius:var(--gds-sys-shape-corner-round);background-color:transparent;transform:scale(.5)}:host label.gds-form-control:hover input[type=radio]:not(.disabled,:disabled)~i{background-color:var(--gds-sys-color-base-200)}:host label.gds-form-control input[type=radio]:checked:not(.disabled,:disabled)~i{box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-text-primary)}:host label.gds-form-control input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-text-primary)}:host label.gds-form-control:hover input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-base-700)}:host .was-validated label.gds-form-control input[type=radio]:not(.is-invalid):valid~i,:host label.gds-form-control input[type=radio].is-valid~i{--border-color: var(--gds-sys-color-dark-green-2)}:host .was-validated label.gds-form-control input[type=radio]:not(.is-valid):invalid~i,:host label.gds-form-control input[type=radio].is-invalid~i{--border-color: var(--gds-sys-color-text-error)}:host label.gds-form-control input[type=radio]:disabled~i,:host label.gds-form-control input[type=radio].disabled~i{background-color:var(--gds-comp-radio-container-background-disabled);box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-base-500)}:host label.gds-form-control input[type=radio]:disabled~span,:host label.gds-form-control input[type=radio].disabled~span{color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host label.gds-form-control input[type=radio]:disabled~span::placeholder,:host label.gds-form-control input[type=radio].disabled~span::placeholder{color:var(--gds-sys-color-text-disabled)}:host label.gds-form-control input[type=radio]:disabled:checked~i:after,:host label.gds-form-control input[type=radio]:checked.disabled~i:after{background-color:var(--gds-sys-color-base-600)}:host.small .form-control{padding:.25rem}:host.small .form-control input[type=radio]~i{margin-right:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
130
130
|
}
|
|
131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvRadioComponent, decorators: [{
|
|
132
132
|
type: Component,
|
|
133
133
|
args: [{ selector: 'nggv-radio', providers: [NggvRadioControlRegistry], standalone: false, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n <div\n [id]=\"id + '-radio'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div>\n <!-- RADIO BUTTON FIELD -->\n <label [attr.for]=\"id + '-radio'\" class=\"gds-form-control\">\n <input\n #input\n type=\"radio\"\n [attr.id]=\"id + '-radio'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- LABEL -->\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"\n labelContentTpl ?? null;\n context: { $implicit: value }\n \"\n ></ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <!-- if no nggv-radio-group is present -->\n @if (!isGroup) {\n <ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-radio'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n </ng-container>\n }\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\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-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%;--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 .nggv-field--locked{display:inline-block;border-radius:.25em;position:relative;min-height:2em;padding:.5em .75em .5em 0}:host .gds-form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .gds-form-control:has(input:disabled){cursor:not-allowed}:host label.gds-form-control input[type=radio]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.gds-form-control:has(input[type=radio]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.gds-form-control:has(input[type=radio]:focus-visible):focus,:host label.gds-form-control:has(input[type=radio]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.gds-form-control input[type=radio]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;position:relative;border-radius:var(--gds-sys-shape-corner-round);display:flex;height:1rem;width:1rem;box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-text-primary)}:host label.gds-form-control input[type=radio]~i:after{content:\"\";width:100%;height:100%;border-radius:var(--gds-sys-shape-corner-round);background-color:transparent;transform:scale(.5)}:host label.gds-form-control:hover input[type=radio]:not(.disabled,:disabled)~i{background-color:var(--gds-sys-color-base-200)}:host label.gds-form-control input[type=radio]:checked:not(.disabled,:disabled)~i{box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-text-primary)}:host label.gds-form-control input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-text-primary)}:host label.gds-form-control:hover input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-base-700)}:host .was-validated label.gds-form-control input[type=radio]:not(.is-invalid):valid~i,:host label.gds-form-control input[type=radio].is-valid~i{--border-color: var(--gds-sys-color-dark-green-2)}:host .was-validated label.gds-form-control input[type=radio]:not(.is-valid):invalid~i,:host label.gds-form-control input[type=radio].is-invalid~i{--border-color: var(--gds-sys-color-text-error)}:host label.gds-form-control input[type=radio]:disabled~i,:host label.gds-form-control input[type=radio].disabled~i{background-color:var(--gds-comp-radio-container-background-disabled);box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-base-500)}:host label.gds-form-control input[type=radio]:disabled~span,:host label.gds-form-control input[type=radio].disabled~span{color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host label.gds-form-control input[type=radio]:disabled~span::placeholder,:host label.gds-form-control input[type=radio].disabled~span::placeholder{color:var(--gds-sys-color-text-disabled)}:host label.gds-form-control input[type=radio]:disabled:checked~i:after,:host label.gds-form-control input[type=radio]:checked.disabled~i:after{background-color:var(--gds-sys-color-base-600)}:host.small .form-control{padding:.25rem}:host.small .form-control input[type=radio]~i{margin-right:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"] }]
|
|
134
134
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
@@ -199,10 +199,10 @@ class NggvRadioGroupComponent extends NggvBaseControlValueAccessorComponent {
|
|
|
199
199
|
if (!this.name && this.formControlName)
|
|
200
200
|
this.name = this.formControlName;
|
|
201
201
|
}
|
|
202
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
203
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
202
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvRadioGroupComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
203
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: NggvRadioGroupComponent, isStandalone: false, selector: "nggv-radio-group", inputs: { thook: "thook", size: "size", formControlName: "formControlName", direction: "direction" }, host: { properties: { "attr.data-thook": "this.thook", "class": "this.size" } }, usesInheritance: true, ngImport: i0, template: "<!-- RADIO BUTTONS -->\n<div [ngClass]=\"direction === 'column' ? 'direction-column' : 'direction-row'\">\n <ng-content></ng-content>\n</div>\n<!-- ERRORS -->\n<ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"ngControl?.name + '-radio-group'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n size=\"16px\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n</ng-container>\n", styles: [":host .direction-column{display:flex;flex-direction:column}:host .direction-row{display:flex;flex-direction:row}:host.small .form-control{padding:.25rem}:host.small .form-control input[type=radio]~i{margin-right:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%;font-weight:500}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
204
204
|
}
|
|
205
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
205
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvRadioGroupComponent, decorators: [{
|
|
206
206
|
type: Component,
|
|
207
207
|
args: [{ selector: 'nggv-radio-group', standalone: false, template: "<!-- RADIO BUTTONS -->\n<div [ngClass]=\"direction === 'column' ? 'direction-column' : 'direction-row'\">\n <ng-content></ng-content>\n</div>\n<!-- ERRORS -->\n<ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"ngControl?.name + '-radio-group'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n size=\"16px\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n</ng-container>\n", styles: [":host .direction-column{display:flex;flex-direction:column}:host .direction-row{display:flex;flex-direction:row}:host.small .form-control{padding:.25rem}:host.small .form-control input[type=radio]~i{margin-right:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%;font-weight:500}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"] }]
|
|
208
208
|
}], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
|
|
@@ -231,11 +231,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
231
231
|
}] } });
|
|
232
232
|
|
|
233
233
|
class NggvRadioModule {
|
|
234
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
235
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
236
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
234
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvRadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
235
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: NggvRadioModule, declarations: [NggvRadioComponent, NggvRadioGroupComponent], imports: [CommonModule, NggvI18nModule, NggCoreWrapperModule], exports: [NggvRadioComponent, NggvRadioGroupComponent] }); }
|
|
236
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvRadioModule, imports: [CommonModule, NggvI18nModule, NggCoreWrapperModule] }); }
|
|
237
237
|
}
|
|
238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvRadioModule, decorators: [{
|
|
239
239
|
type: NgModule,
|
|
240
240
|
args: [{
|
|
241
241
|
declarations: [NggvRadioComponent, NggvRadioGroupComponent],
|
|
@@ -17,10 +17,10 @@ class SlugPipe {
|
|
|
17
17
|
.replace(/[^\w ]+/g, '')
|
|
18
18
|
.replace(/ +/g, '-');
|
|
19
19
|
}
|
|
20
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
21
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.
|
|
20
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SlugPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
21
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: SlugPipe, isStandalone: false, name: "slug" }); }
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: SlugPipe, decorators: [{
|
|
24
24
|
type: Pipe,
|
|
25
25
|
args: [{
|
|
26
26
|
name: 'slug',
|
|
@@ -29,11 +29,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
29
29
|
}] });
|
|
30
30
|
|
|
31
31
|
class NggvSlugPipeModule {
|
|
32
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
33
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
34
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
32
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvSlugPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
33
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: NggvSlugPipeModule, declarations: [SlugPipe], imports: [CommonModule], exports: [SlugPipe] }); }
|
|
34
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvSlugPipeModule, imports: [CommonModule] }); }
|
|
35
35
|
}
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
36
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvSlugPipeModule, decorators: [{
|
|
37
37
|
type: NgModule,
|
|
38
38
|
args: [{
|
|
39
39
|
declarations: [SlugPipe],
|
|
@@ -30,10 +30,10 @@ class TableDirective {
|
|
|
30
30
|
return +this.value < 0;
|
|
31
31
|
return false;
|
|
32
32
|
}
|
|
33
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
34
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
33
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
34
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: TableDirective, isStandalone: false, selector: "[columnType]", inputs: { columnType: "columnType", sortable: "sortable", sortOrder: "sortOrder", value: "value", thook: "thook" }, host: { properties: { "attr.data-thook": "this.thook", "class.gds-table__numeric-col": "this.numericColumn", "class.gds-table__sortable-col": "this.isSortable", "class.gds-table__sortable-col--asc": "this.orderAscending", "class.gds-table__sortable-col--desc": "this.orderDescending", "class.gds-table__negative-col": "this.negativeValue" } }, ngImport: i0 }); }
|
|
35
35
|
}
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
36
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TableDirective, decorators: [{
|
|
37
37
|
type: Directive,
|
|
38
38
|
args: [{
|
|
39
39
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -74,10 +74,10 @@ class TableTemplateDirective {
|
|
|
74
74
|
this.templateRef = templateRef;
|
|
75
75
|
this.tableColumnTarget = 'both';
|
|
76
76
|
}
|
|
77
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
78
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
77
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TableTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
78
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: TableTemplateDirective, isStandalone: false, selector: "[tableColumn]", inputs: { tableColumn: "tableColumn", tableColumnTarget: "tableColumnTarget" }, ngImport: i0 }); }
|
|
79
79
|
}
|
|
80
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
80
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TableTemplateDirective, decorators: [{
|
|
81
81
|
type: Directive,
|
|
82
82
|
args: [{
|
|
83
83
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -93,10 +93,10 @@ class TableFooterTemplateDirective {
|
|
|
93
93
|
constructor(templateRef) {
|
|
94
94
|
this.templateRef = templateRef;
|
|
95
95
|
}
|
|
96
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
97
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
96
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TableFooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
97
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: TableFooterTemplateDirective, isStandalone: false, selector: "[tableFooter]", ngImport: i0 }); }
|
|
98
98
|
}
|
|
99
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
99
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TableFooterTemplateDirective, decorators: [{
|
|
100
100
|
type: Directive,
|
|
101
101
|
args: [{
|
|
102
102
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -108,10 +108,10 @@ class TableAppendableRowsTemplateDirective {
|
|
|
108
108
|
constructor(templateRef) {
|
|
109
109
|
this.templateRef = templateRef;
|
|
110
110
|
}
|
|
111
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
112
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
111
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TableAppendableRowsTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
112
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: TableAppendableRowsTemplateDirective, isStandalone: false, selector: "[tableAppendableRows]", ngImport: i0 }); }
|
|
113
113
|
}
|
|
114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TableAppendableRowsTemplateDirective, decorators: [{
|
|
115
115
|
type: Directive,
|
|
116
116
|
args: [{
|
|
117
117
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -158,10 +158,10 @@ class TrThookPipe {
|
|
|
158
158
|
// default thook
|
|
159
159
|
return `table-row-${index}`;
|
|
160
160
|
}
|
|
161
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
162
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.
|
|
161
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TrThookPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
162
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: TrThookPipe, isStandalone: true, name: "trThook" }); }
|
|
163
163
|
}
|
|
164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
164
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TrThookPipe, decorators: [{
|
|
165
165
|
type: Pipe,
|
|
166
166
|
args: [{
|
|
167
167
|
name: 'trThook',
|
|
@@ -531,10 +531,10 @@ class TableComponent {
|
|
|
531
531
|
const row = this.rowSelectors.get(id);
|
|
532
532
|
row?.setValue(!row.value);
|
|
533
533
|
}
|
|
534
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
535
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TableComponent, isStandalone: false, selector: "nggv-table", inputs: { tableColumns: "tableColumns", tableData: "tableData", rowId: "rowId", hasRowSpan: "hasRowSpan", selectable: "selectable", hiddenCheckboxRowIds: "hiddenCheckboxRowIds", expandable: "expandable", expandedByDefault: "expandedByDefault", subItemsProp: "subItemsProp", allowLocalSort: "allowLocalSort", thook: "thook", trThookFn: "trThookFn", ariaLabelCheckboxTh: "ariaLabelCheckboxTh", ariaLabelCheckboxTr: "ariaLabelCheckboxTr", ariaLabelsOrderBy: "ariaLabelsOrderBy" }, outputs: { ngvRowClick: "ngvRowClick", ngvRowSelect: "ngvRowSelect", ngvOrderBy: "ngvOrderBy" }, queries: [{ propertyName: "appendedRowsTemplate", first: true, predicate: TableAppendableRowsTemplateDirective, descendants: true }, { propertyName: "customFooterTemplate", first: true, predicate: TableFooterTemplateDirective, descendants: true }, { propertyName: "customTemplates", predicate: TableTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #sortableThTemplate let-column>\n <button class=\"gds-table-sort\" *transloco=\"let t\">\n <ng-template #thButtonTemplate>\n {{ t(column.label ?? '') }}\n </ng-template>\n <ng-container\n *ngIf=\"\n customHeaderTemplates.get(column.property) as thTemplate;\n else thButtonTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n >\n </ng-template>\n </ng-container>\n </button>\n</ng-template>\n\n<ng-template #notSortableThTemplate let-column>\n <ng-template #defaultThTemplate>\n <ng-container *transloco=\"let t\">\n {{ t(column.label ?? '') }}\n </ng-container>\n </ng-template>\n <ng-container\n *ngIf=\"\n customHeaderTemplates.get(column.property) as thTemplate;\n else defaultThTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n >\n </ng-template>\n </ng-container>\n</ng-template>\n<table class=\"gds-table\" *transloco=\"let t\">\n <!-- Table header -->\n <thead>\n <tr>\n <!-- Checkbox column for header -->\n <th *ngIf=\"selectable\" class=\"column__check\">\n <div class=\"gds-field-checkbox-wrap\">\n <label\n [attr.for]=\"'cb_header__' + initId\"\n class=\"gds-form-control\"\n id=\"thead-checkbox\"\n >\n <input\n type=\"checkbox\"\n [formControl]=\"groupSelector\"\n [attr.aria-label]=\"ariaLabelCheckboxTh\"\n [attr.id]=\"'cb_header__' + initId\"\n [attr.data-thook]=\"thook\"\n />\n <i></i>\n </label>\n </div>\n </th>\n\n <!-- Other columns -->\n <th\n *ngFor=\"let column of tableColumns\"\n [columnType]=\"column.valueType\"\n [sortable]=\"column.sortable\"\n [sortOrder]=\"column.order\"\n [thook]=\"'column-header-' + !!column.property\"\n (click)=\"toggleSortOrder(column)\"\n (keydown.space)=\"toggleSortOrderWithSpace($event, column)\"\n [attr.aria-label]=\"getAriaLabel(column)\"\n [attr.aria-sort]=\"column.order + 'ending'\"\n >\n <ng-container *ngIf=\"column.sortable\">\n <ng-container\n *ngTemplateOutlet=\"\n sortableThTemplate;\n context: { $implicit: column, column: column }\n \"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <ng-container\n *ngTemplateOutlet=\"\n notSortableThTemplate;\n context: { $implicit: column, column: column }\n \"\n >\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n\n <!-- Table body -->\n <tbody [formGroup]=\"rowSelectors\">\n <ng-container *ngFor=\"let item of tableData; let i = index\">\n <tr\n [class.row__expand]=\"expandable\"\n [attr.data-thook]=\"item | trThook: i : trThookFn\"\n [attr.data-hasrowspan]=\"hasRowSpan(item)\"\n >\n <!-- Checkbox column for row -->\n <td *ngIf=\"selectable\" class=\"column__check\">\n <div\n *ngIf=\"!hiddenCheckboxRowIds.includes(item[rowId])\"\n class=\"gds-field-checkbox-wrap\"\n >\n <label\n [attr.for]=\"'cb_row__' + initId + '_' + i\"\n class=\"gds-form-control\"\n >\n <input\n *ngIf=\"rowSelectors.get(item[rowId])\"\n type=\"checkbox\"\n [formControlName]=\"item[rowId]\"\n [attr.aria-label]=\"ariaLabelCheckboxTr\"\n [attr.id]=\"'cb_row__' + initId + '_' + i\"\n [attr.data-thook]=\"'row-select-' + i\"\n />\n <i></i>\n </label>\n </div>\n </td>\n\n <!-- Other columns -->\n <td\n *ngFor=\"let column of tableColumns; let i = index\"\n [columnType]=\"column.valueType\"\n [value]=\"item[column.property]\"\n (click)=\"propagateItemClick(item, column.preventDefaultClickEvent)\"\n >\n <ng-container\n *ngIf=\"expandable && i === 0; else nonExpandableTemplate\"\n >\n <div\n class=\"gds-item-field-wrap\"\n [ngClass]=\"{ 'no-sub-items': item.subItems.length === 0 }\"\n >\n <span\n *ngIf=\"item.subItems.length > 0\"\n role=\"button\"\n tabindex=\"0\"\n class=\"chevron-field\"\n [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 9L12 17L4 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n <span class=\"gds-item-field-text\">\n {{ item[column.property] }} ({{ item.subItems.length }})\n <div\n *ngIf=\"column.columnLabel\"\n class=\"gds-item-field-extra-label\"\n >\n {{ item[column.columnLabel] }}\n </div>\n </span>\n </div>\n </ng-container>\n\n <ng-template #nonExpandableTemplate>\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"tdTemplate; context: { $implicit: item }\"\n >\n </ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ item[column.property] }}\n </ng-template>\n </ng-template>\n </td>\n </tr>\n\n <!-- Expanded Sub Items -->\n <ng-container *ngIf=\"expandable && rowSelectors.get(item[rowId])?.value\">\n <tr *ngFor=\"let subItem of item[subItemsProp]\">\n <td\n *ngFor=\"let column of tableColumns\"\n class=\"web-view\"\n [columnType]=\"column.valueType\"\n [value]=\"subItem[column.property]\"\n (click)=\"\n propagateItemClick(subItem, column.preventDefaultClickEvent)\n \"\n >\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\"\n >\n </ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ subItem[column.property] }}\n </ng-template>\n </td>\n\n <td\n class=\"mobile-view\"\n [attr.colspan]=\"tableColumns.length\"\n (click)=\"propagateItemClick(subItem)\"\n >\n <dl class=\"mobile-view-field-wrap\">\n <ng-container *ngFor=\"let column of tableColumns\">\n <div\n *ngIf=\"!column.hidePropertyOnMobile\"\n class=\"mobile-view-field\"\n [columnType]=\"column.valueType\"\n [value]=\"subItem[column.property]\"\n >\n <dt *ngIf=\"!column.hideLabelOnMobile\">\n <ng-container *transloco=\"let t\">\n {{ t(column.label ?? '') }}\n </ng-container>\n </dt>\n <dd\n [ngStyle]=\"\n column.boldTextOnMobile\n ? { 'font-weight': '500' }\n : { 'font-weight': '400' }\n \"\n >\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"\n tdTemplate;\n context: { $implicit: subItem }\n \"\n ></ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ subItem[column.property] }}\n </ng-template>\n </dd>\n <ng-content></ng-content>\n </div>\n </ng-container>\n </dl>\n <span\n role=\"button\"\n tabindex=\"0\"\n class=\"nav-chevron-field\"\n [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 9L12 17L4 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </td>\n </tr>\n </ng-container>\n\n <!-- Custom appended rows -->\n <ng-container *ngIf=\"appendedRowsTemplateRef as trTemplate\">\n <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n <ng-container\n *ngTemplateOutlet=\"trTemplate || null; context: { $implicit: item }\"\n >\n </ng-container>\n </ng-container>\n </ng-container>\n </tbody>\n\n <!-- Table footer -->\n <tfoot *ngIf=\"customFooterTemplateRef as trTemplate\">\n <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n <ng-container *ngTemplateOutlet=\"trTemplate || null\"> </ng-container>\n </tfoot>\n</table>\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-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%}::ng-deep .gds-table{border-collapse:collapse}::ng-deep .gds-table thead tr th{border-top:1px solid var(--gds-sys-color-base-600);background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-background-primary);padding:.3rem .5rem;text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.gds-sortable .gds-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .gds-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center}::ng-deep .gds-table thead tr th .gds-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .gds-table-sort:focus,::ng-deep .gds-table thead tr th .gds-table-sort:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table thead tr th .gds-table-sort{border-radius:.125rem;--gds-sys-color-focus-outline: var( --gds-sys-color-background-primary )}::ng-deep .gds-table thead tr th[aria-sort] .gds-table-sort:after,::ng-deep .gds-table thead tr th.gds-sortable .gds-table-sort:after{content:\"\";background:var(--gds-sys-color-base-500);mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");mask-repeat:no-repeat;mask-position:right;width:12px;height:12px;margin-left:.3rem}::ng-deep .gds-table thead tr th[aria-sort=ascending] .gds-table-sort:after{background:var(--gds-sys-color-text-inverted);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .gds-table-sort:after{background:var(--gds-sys-color-text-inverted)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:1px solid var(--gds-sys-color-base-600);padding:.6875rem .5rem;vertical-align:top}::ng-deep .gds-table tbody tr.collapsible~.sub-row{display:none}::ng-deep .gds-table tbody tr.collapsible.expanded~.sub-row.show{display:table-row}::ng-deep .gds-table tbody tr td.collapse-control,::ng-deep .gds-table tbody tr td.select-control{width:15px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn{min-height:unset;padding:0;background:transparent}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder{cursor:pointer;width:12px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg{width:12px;fill:var(--gds-sys-color-text-primary)}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg[name=angle-right]{width:9px}::ng-deep .gds-table{border-bottom:1px solid var(--gds-sys-color-base-600)}@media(max-width:35.98em){::ng-deep .gds-table.table-mobile{width:100%;table-layout:fixed;border-bottom:none}::ng-deep .gds-table.table-mobile thead{position:sticky;top:0;display:block;background:var(--gds-sys-color-base-800)}}@media(max-width:35.98em)and (hover:none)and (pointer:coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media(max-width:35.98em){::ng-deep .gds-table.table-mobile thead tr{display:flex;overflow:auto}::ng-deep .gds-table.table-mobile thead tr::-webkit-scrollbar{display:none}::ng-deep .gds-table.table-mobile thead tr th{flex:auto;text-align:left!important;white-space:nowrap}::ng-deep .gds-table.table-mobile tbody tr{display:flex;flex-direction:column;border-bottom:1px solid var(--gds-sys-color-base-600)}::ng-deep .gds-table.table-mobile tbody tr td{display:flex;justify-content:space-between;align-items:center;border-top:none!important}::ng-deep .gds-table.table-mobile tbody tr td:before{content:attr(data-label);font-weight:700}}::ng-deep .gds-table{width:100%;border-bottom:none}::ng-deep .gds-table .web-view{display:table-cell}::ng-deep .gds-table .mobile-view{display:none}::ng-deep .gds-table tr:hover td{background-color:var(--gds-sys-color-base-100)}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .gds-table-sort{justify-content:end}::ng-deep .gds-table th button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table tbody{border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table tfoot ::ng-deep td{padding:.6875rem .5rem}::ng-deep .gds-table th.column__check{height:vanilla-px-to-rem(32px);width:vanilla-px-to-rem(40px)}::ng-deep .gds-table th.column__check div{min-height:100%}::ng-deep .gds-table th.column__check input:checked+label:after{top:.6rem;display:inline}::ng-deep .gds-table th.column__check label{display:inline;padding:0}::ng-deep .gds-table th.column__check label:before{top:.55rem}::ng-deep .gds-table td.column__check{width:vanilla-px-to-rem(40px)}::ng-deep .gds-table td.column__check div{min-height:unset}::ng-deep .gds-table td.column__check label{padding:0}::ng-deep .gds-table td.column__check label:before{margin:0}::ng-deep .gds-table tr.row__expand{background-color:var(--gds-sys-color-base-100)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap{display:flex;flex-wrap:nowrap}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap.no-sub-items{padding-left:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field{width:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field svg{transition:transform .3s ease}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field[aria-expanded=true] svg{transform:rotate(-180deg)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text{padding-left:.2rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text .gds-item-field-extra-label{font-weight:var(--sg-table-row-expand-font-weight-light, 400)}::ng-deep .gds-table tr.row__expand td{font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}::ng-deep .gds-table label.gds-form-control{align-items:flex-start}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus,::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);box-sizing:border-box;border-left:none;transform:scale(1) rotate(0);opacity:1}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.gds-form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){::ng-deep .gds-table label.gds-form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.gds-form-control.is-invalid{border:none;margin:0}}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i{background:var(--gds-sys-color-base-300)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i{background:var(--gds-sys-color-base-300)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i:after,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~span,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~span{color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~span::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~span::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i:after{box-sizing:border-box;content:\"\";opacity:0;position:absolute}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:checked~i:after{opacity:1}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]){padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]){line-height:1.125rem;padding:0}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-inverted);background-color:transparent}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i:after{box-sizing:border-box}::ng-deep .gds-table #thead-checkbox:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-white)}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i:after{border-color:#ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i:after{border-color:#ababab}@media screen and (max-width:600px){.gds-table thead{display:none}.gds-table .row__expand td:not(:first-child){display:none}.gds-table .row__expand td{display:table-cell}.gds-table .web-view{display:none}.gds-table .mobile-view{display:flex;align-items:center}.gds-table .mobile-view .mobile-view-field-wrap{display:grid;grid-template-columns:1fr 1fr;width:100%}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field{display:flex;flex-direction:column;padding-bottom:.3rem}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(odd){justify-self:start;align-items:start;text-align:start}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(2n){align-items:end;justify-self:end;text-align:end}.gds-table .mobile-view .nav-chevron-field{width:1.5rem;padding-left:.5rem}.gds-table .mobile-view .nav-chevron-field svg{transition:transform .3s ease}.gds-table .mobile-view .nav-chevron-field[aria-expanded=true] svg{transform:rotate(-90deg)}.gds-table .mobile-view .settings-field{width:1.5rem;padding:0 1rem}.gds-table .mobile-view .settings-field svg{transition:all .3s ease}.gds-table .mobile-view .settings-field:hover svg{fill:var(--gds-sys-color-blue-dark-2)}}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: TableDirective, selector: "[columnType]", inputs: ["columnType", "sortable", "sortOrder", "value", "thook"] }, { kind: "pipe", type: TrThookPipe, name: "trThook" }] }); }
|
|
534
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
535
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: TableComponent, isStandalone: false, selector: "nggv-table", inputs: { tableColumns: "tableColumns", tableData: "tableData", rowId: "rowId", hasRowSpan: "hasRowSpan", selectable: "selectable", hiddenCheckboxRowIds: "hiddenCheckboxRowIds", expandable: "expandable", expandedByDefault: "expandedByDefault", subItemsProp: "subItemsProp", allowLocalSort: "allowLocalSort", thook: "thook", trThookFn: "trThookFn", ariaLabelCheckboxTh: "ariaLabelCheckboxTh", ariaLabelCheckboxTr: "ariaLabelCheckboxTr", ariaLabelsOrderBy: "ariaLabelsOrderBy" }, outputs: { ngvRowClick: "ngvRowClick", ngvRowSelect: "ngvRowSelect", ngvOrderBy: "ngvOrderBy" }, queries: [{ propertyName: "appendedRowsTemplate", first: true, predicate: TableAppendableRowsTemplateDirective, descendants: true }, { propertyName: "customFooterTemplate", first: true, predicate: TableFooterTemplateDirective, descendants: true }, { propertyName: "customTemplates", predicate: TableTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #sortableThTemplate let-column>\n <button class=\"gds-table-sort\" *transloco=\"let t\">\n <ng-template #thButtonTemplate>\n {{ t(column.label ?? '') }}\n </ng-template>\n <ng-container\n *ngIf=\"\n customHeaderTemplates.get(column.property) as thTemplate;\n else thButtonTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n >\n </ng-template>\n </ng-container>\n </button>\n</ng-template>\n\n<ng-template #notSortableThTemplate let-column>\n <ng-template #defaultThTemplate>\n <ng-container *transloco=\"let t\">\n {{ t(column.label ?? '') }}\n </ng-container>\n </ng-template>\n <ng-container\n *ngIf=\"\n customHeaderTemplates.get(column.property) as thTemplate;\n else defaultThTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n >\n </ng-template>\n </ng-container>\n</ng-template>\n<table class=\"gds-table\" *transloco=\"let t\">\n <!-- Table header -->\n <thead>\n <tr>\n <!-- Checkbox column for header -->\n <th *ngIf=\"selectable\" class=\"column__check\">\n <div class=\"gds-field-checkbox-wrap\">\n <label\n [attr.for]=\"'cb_header__' + initId\"\n class=\"gds-form-control\"\n id=\"thead-checkbox\"\n >\n <input\n type=\"checkbox\"\n [formControl]=\"groupSelector\"\n [attr.aria-label]=\"ariaLabelCheckboxTh\"\n [attr.id]=\"'cb_header__' + initId\"\n [attr.data-thook]=\"thook\"\n />\n <i></i>\n </label>\n </div>\n </th>\n\n <!-- Other columns -->\n <th\n *ngFor=\"let column of tableColumns\"\n [columnType]=\"column.valueType\"\n [sortable]=\"column.sortable\"\n [sortOrder]=\"column.order\"\n [thook]=\"'column-header-' + !!column.property\"\n (click)=\"toggleSortOrder(column)\"\n (keydown.space)=\"toggleSortOrderWithSpace($event, column)\"\n [attr.aria-label]=\"getAriaLabel(column)\"\n [attr.aria-sort]=\"column.order + 'ending'\"\n >\n <ng-container *ngIf=\"column.sortable\">\n <ng-container\n *ngTemplateOutlet=\"\n sortableThTemplate;\n context: { $implicit: column, column: column }\n \"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <ng-container\n *ngTemplateOutlet=\"\n notSortableThTemplate;\n context: { $implicit: column, column: column }\n \"\n >\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n\n <!-- Table body -->\n <tbody [formGroup]=\"rowSelectors\">\n <ng-container *ngFor=\"let item of tableData; let i = index\">\n <tr\n [class.row__expand]=\"expandable\"\n [attr.data-thook]=\"item | trThook: i : trThookFn\"\n [attr.data-hasrowspan]=\"hasRowSpan(item)\"\n >\n <!-- Checkbox column for row -->\n <td *ngIf=\"selectable\" class=\"column__check\">\n <div\n *ngIf=\"!hiddenCheckboxRowIds.includes(item[rowId])\"\n class=\"gds-field-checkbox-wrap\"\n >\n <label\n [attr.for]=\"'cb_row__' + initId + '_' + i\"\n class=\"gds-form-control\"\n >\n <input\n *ngIf=\"rowSelectors.get(item[rowId])\"\n type=\"checkbox\"\n [formControlName]=\"item[rowId]\"\n [attr.aria-label]=\"ariaLabelCheckboxTr\"\n [attr.id]=\"'cb_row__' + initId + '_' + i\"\n [attr.data-thook]=\"'row-select-' + i\"\n />\n <i></i>\n </label>\n </div>\n </td>\n\n <!-- Other columns -->\n <td\n *ngFor=\"let column of tableColumns; let i = index\"\n [columnType]=\"column.valueType\"\n [value]=\"item[column.property]\"\n (click)=\"propagateItemClick(item, column.preventDefaultClickEvent)\"\n >\n <ng-container\n *ngIf=\"expandable && i === 0; else nonExpandableTemplate\"\n >\n <div\n class=\"gds-item-field-wrap\"\n [ngClass]=\"{ 'no-sub-items': item.subItems.length === 0 }\"\n >\n <span\n *ngIf=\"item.subItems.length > 0\"\n role=\"button\"\n tabindex=\"0\"\n class=\"chevron-field\"\n [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 9L12 17L4 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n <span class=\"gds-item-field-text\">\n {{ item[column.property] }} ({{ item.subItems.length }})\n <div\n *ngIf=\"column.columnLabel\"\n class=\"gds-item-field-extra-label\"\n >\n {{ item[column.columnLabel] }}\n </div>\n </span>\n </div>\n </ng-container>\n\n <ng-template #nonExpandableTemplate>\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"tdTemplate; context: { $implicit: item }\"\n >\n </ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ item[column.property] }}\n </ng-template>\n </ng-template>\n </td>\n </tr>\n\n <!-- Expanded Sub Items -->\n <ng-container *ngIf=\"expandable && rowSelectors.get(item[rowId])?.value\">\n <tr *ngFor=\"let subItem of item[subItemsProp]\">\n <td\n *ngFor=\"let column of tableColumns\"\n class=\"web-view\"\n [columnType]=\"column.valueType\"\n [value]=\"subItem[column.property]\"\n (click)=\"\n propagateItemClick(subItem, column.preventDefaultClickEvent)\n \"\n >\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\"\n >\n </ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ subItem[column.property] }}\n </ng-template>\n </td>\n\n <td\n class=\"mobile-view\"\n [attr.colspan]=\"tableColumns.length\"\n (click)=\"propagateItemClick(subItem)\"\n >\n <dl class=\"mobile-view-field-wrap\">\n <ng-container *ngFor=\"let column of tableColumns\">\n <div\n *ngIf=\"!column.hidePropertyOnMobile\"\n class=\"mobile-view-field\"\n [columnType]=\"column.valueType\"\n [value]=\"subItem[column.property]\"\n >\n <dt *ngIf=\"!column.hideLabelOnMobile\">\n <ng-container *transloco=\"let t\">\n {{ t(column.label ?? '') }}\n </ng-container>\n </dt>\n <dd\n [ngStyle]=\"\n column.boldTextOnMobile\n ? { 'font-weight': '500' }\n : { 'font-weight': '400' }\n \"\n >\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"\n tdTemplate;\n context: { $implicit: subItem }\n \"\n ></ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ subItem[column.property] }}\n </ng-template>\n </dd>\n <ng-content></ng-content>\n </div>\n </ng-container>\n </dl>\n <span\n role=\"button\"\n tabindex=\"0\"\n class=\"nav-chevron-field\"\n [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 9L12 17L4 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </td>\n </tr>\n </ng-container>\n\n <!-- Custom appended rows -->\n <ng-container *ngIf=\"appendedRowsTemplateRef as trTemplate\">\n <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n <ng-container\n *ngTemplateOutlet=\"trTemplate || null; context: { $implicit: item }\"\n >\n </ng-container>\n </ng-container>\n </ng-container>\n </tbody>\n\n <!-- Table footer -->\n <tfoot *ngIf=\"customFooterTemplateRef as trTemplate\">\n <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n <ng-container *ngTemplateOutlet=\"trTemplate || null\"> </ng-container>\n </tfoot>\n</table>\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-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%}::ng-deep .gds-table{border-collapse:collapse}::ng-deep .gds-table thead tr th{border-top:1px solid var(--gds-sys-color-base-600);background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-background-primary);padding:.3rem .5rem;text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.gds-sortable .gds-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .gds-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center}::ng-deep .gds-table thead tr th .gds-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .gds-table-sort:focus,::ng-deep .gds-table thead tr th .gds-table-sort:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table thead tr th .gds-table-sort{border-radius:.125rem;--gds-sys-color-focus-outline: var( --gds-sys-color-background-primary )}::ng-deep .gds-table thead tr th[aria-sort] .gds-table-sort:after,::ng-deep .gds-table thead tr th.gds-sortable .gds-table-sort:after{content:\"\";background:var(--gds-sys-color-base-500);mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");mask-repeat:no-repeat;mask-position:right;width:12px;height:12px;margin-left:.3rem}::ng-deep .gds-table thead tr th[aria-sort=ascending] .gds-table-sort:after{background:var(--gds-sys-color-text-inverted);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .gds-table-sort:after{background:var(--gds-sys-color-text-inverted)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:1px solid var(--gds-sys-color-base-600);padding:.6875rem .5rem;vertical-align:top}::ng-deep .gds-table tbody tr.collapsible~.sub-row{display:none}::ng-deep .gds-table tbody tr.collapsible.expanded~.sub-row.show{display:table-row}::ng-deep .gds-table tbody tr td.collapse-control,::ng-deep .gds-table tbody tr td.select-control{width:15px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn{min-height:unset;padding:0;background:transparent}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder{cursor:pointer;width:12px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg{width:12px;fill:var(--gds-sys-color-text-primary)}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg[name=angle-right]{width:9px}::ng-deep .gds-table{border-bottom:1px solid var(--gds-sys-color-base-600)}@media(max-width:35.98em){::ng-deep .gds-table.table-mobile{width:100%;table-layout:fixed;border-bottom:none}::ng-deep .gds-table.table-mobile thead{position:sticky;top:0;display:block;background:var(--gds-sys-color-base-800)}}@media(max-width:35.98em)and (hover:none)and (pointer:coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media(max-width:35.98em){::ng-deep .gds-table.table-mobile thead tr{display:flex;overflow:auto}::ng-deep .gds-table.table-mobile thead tr::-webkit-scrollbar{display:none}::ng-deep .gds-table.table-mobile thead tr th{flex:auto;text-align:left!important;white-space:nowrap}::ng-deep .gds-table.table-mobile tbody tr{display:flex;flex-direction:column;border-bottom:1px solid var(--gds-sys-color-base-600)}::ng-deep .gds-table.table-mobile tbody tr td{display:flex;justify-content:space-between;align-items:center;border-top:none!important}::ng-deep .gds-table.table-mobile tbody tr td:before{content:attr(data-label);font-weight:700}}::ng-deep .gds-table{width:100%;border-bottom:none}::ng-deep .gds-table .web-view{display:table-cell}::ng-deep .gds-table .mobile-view{display:none}::ng-deep .gds-table tr:hover td{background-color:var(--gds-sys-color-base-100)}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .gds-table-sort{justify-content:end}::ng-deep .gds-table th button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table tbody{border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table tfoot ::ng-deep td{padding:.6875rem .5rem}::ng-deep .gds-table th.column__check{height:vanilla-px-to-rem(32px);width:vanilla-px-to-rem(40px)}::ng-deep .gds-table th.column__check div{min-height:100%}::ng-deep .gds-table th.column__check input:checked+label:after{top:.6rem;display:inline}::ng-deep .gds-table th.column__check label{display:inline;padding:0}::ng-deep .gds-table th.column__check label:before{top:.55rem}::ng-deep .gds-table td.column__check{width:vanilla-px-to-rem(40px)}::ng-deep .gds-table td.column__check div{min-height:unset}::ng-deep .gds-table td.column__check label{padding:0}::ng-deep .gds-table td.column__check label:before{margin:0}::ng-deep .gds-table tr.row__expand{background-color:var(--gds-sys-color-base-100)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap{display:flex;flex-wrap:nowrap}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap.no-sub-items{padding-left:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field{width:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field svg{transition:transform .3s ease}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field[aria-expanded=true] svg{transform:rotate(-180deg)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text{padding-left:.2rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text .gds-item-field-extra-label{font-weight:var(--sg-table-row-expand-font-weight-light, 400)}::ng-deep .gds-table tr.row__expand td{font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}::ng-deep .gds-table label.gds-form-control{align-items:flex-start}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus,::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);box-sizing:border-box;border-left:none;transform:scale(1) rotate(0);opacity:1}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.gds-form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){::ng-deep .gds-table label.gds-form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.gds-form-control.is-invalid{border:none;margin:0}}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i{background:var(--gds-sys-color-base-300)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i{background:var(--gds-sys-color-base-300)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i:after,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~span,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~span{color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~span::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~span::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i:after{box-sizing:border-box;content:\"\";opacity:0;position:absolute}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:checked~i:after{opacity:1}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]){padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]){line-height:1.125rem;padding:0}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-inverted);background-color:transparent}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i:after{box-sizing:border-box}::ng-deep .gds-table #thead-checkbox:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-white)}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i:after{border-color:#ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i:after{border-color:#ababab}@media screen and (max-width:600px){.gds-table thead{display:none}.gds-table .row__expand td:not(:first-child){display:none}.gds-table .row__expand td{display:table-cell}.gds-table .web-view{display:none}.gds-table .mobile-view{display:flex;align-items:center}.gds-table .mobile-view .mobile-view-field-wrap{display:grid;grid-template-columns:1fr 1fr;width:100%}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field{display:flex;flex-direction:column;padding-bottom:.3rem}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(odd){justify-self:start;align-items:start;text-align:start}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(2n){align-items:end;justify-self:end;text-align:end}.gds-table .mobile-view .nav-chevron-field{width:1.5rem;padding-left:.5rem}.gds-table .mobile-view .nav-chevron-field svg{transition:transform .3s ease}.gds-table .mobile-view .nav-chevron-field[aria-expanded=true] svg{transform:rotate(-90deg)}.gds-table .mobile-view .settings-field{width:1.5rem;padding:0 1rem}.gds-table .mobile-view .settings-field svg{transition:all .3s ease}.gds-table .mobile-view .settings-field:hover svg{fill:var(--gds-sys-color-blue-dark-2)}}\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: TableDirective, selector: "[columnType]", inputs: ["columnType", "sortable", "sortOrder", "value", "thook"] }, { kind: "pipe", type: TrThookPipe, name: "trThook" }] }); }
|
|
536
536
|
}
|
|
537
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
537
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TableComponent, decorators: [{
|
|
538
538
|
type: Component,
|
|
539
539
|
args: [{ selector: 'nggv-table', standalone: false, template: "<ng-template #sortableThTemplate let-column>\n <button class=\"gds-table-sort\" *transloco=\"let t\">\n <ng-template #thButtonTemplate>\n {{ t(column.label ?? '') }}\n </ng-template>\n <ng-container\n *ngIf=\"\n customHeaderTemplates.get(column.property) as thTemplate;\n else thButtonTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n >\n </ng-template>\n </ng-container>\n </button>\n</ng-template>\n\n<ng-template #notSortableThTemplate let-column>\n <ng-template #defaultThTemplate>\n <ng-container *transloco=\"let t\">\n {{ t(column.label ?? '') }}\n </ng-container>\n </ng-template>\n <ng-container\n *ngIf=\"\n customHeaderTemplates.get(column.property) as thTemplate;\n else defaultThTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n >\n </ng-template>\n </ng-container>\n</ng-template>\n<table class=\"gds-table\" *transloco=\"let t\">\n <!-- Table header -->\n <thead>\n <tr>\n <!-- Checkbox column for header -->\n <th *ngIf=\"selectable\" class=\"column__check\">\n <div class=\"gds-field-checkbox-wrap\">\n <label\n [attr.for]=\"'cb_header__' + initId\"\n class=\"gds-form-control\"\n id=\"thead-checkbox\"\n >\n <input\n type=\"checkbox\"\n [formControl]=\"groupSelector\"\n [attr.aria-label]=\"ariaLabelCheckboxTh\"\n [attr.id]=\"'cb_header__' + initId\"\n [attr.data-thook]=\"thook\"\n />\n <i></i>\n </label>\n </div>\n </th>\n\n <!-- Other columns -->\n <th\n *ngFor=\"let column of tableColumns\"\n [columnType]=\"column.valueType\"\n [sortable]=\"column.sortable\"\n [sortOrder]=\"column.order\"\n [thook]=\"'column-header-' + !!column.property\"\n (click)=\"toggleSortOrder(column)\"\n (keydown.space)=\"toggleSortOrderWithSpace($event, column)\"\n [attr.aria-label]=\"getAriaLabel(column)\"\n [attr.aria-sort]=\"column.order + 'ending'\"\n >\n <ng-container *ngIf=\"column.sortable\">\n <ng-container\n *ngTemplateOutlet=\"\n sortableThTemplate;\n context: { $implicit: column, column: column }\n \"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <ng-container\n *ngTemplateOutlet=\"\n notSortableThTemplate;\n context: { $implicit: column, column: column }\n \"\n >\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n\n <!-- Table body -->\n <tbody [formGroup]=\"rowSelectors\">\n <ng-container *ngFor=\"let item of tableData; let i = index\">\n <tr\n [class.row__expand]=\"expandable\"\n [attr.data-thook]=\"item | trThook: i : trThookFn\"\n [attr.data-hasrowspan]=\"hasRowSpan(item)\"\n >\n <!-- Checkbox column for row -->\n <td *ngIf=\"selectable\" class=\"column__check\">\n <div\n *ngIf=\"!hiddenCheckboxRowIds.includes(item[rowId])\"\n class=\"gds-field-checkbox-wrap\"\n >\n <label\n [attr.for]=\"'cb_row__' + initId + '_' + i\"\n class=\"gds-form-control\"\n >\n <input\n *ngIf=\"rowSelectors.get(item[rowId])\"\n type=\"checkbox\"\n [formControlName]=\"item[rowId]\"\n [attr.aria-label]=\"ariaLabelCheckboxTr\"\n [attr.id]=\"'cb_row__' + initId + '_' + i\"\n [attr.data-thook]=\"'row-select-' + i\"\n />\n <i></i>\n </label>\n </div>\n </td>\n\n <!-- Other columns -->\n <td\n *ngFor=\"let column of tableColumns; let i = index\"\n [columnType]=\"column.valueType\"\n [value]=\"item[column.property]\"\n (click)=\"propagateItemClick(item, column.preventDefaultClickEvent)\"\n >\n <ng-container\n *ngIf=\"expandable && i === 0; else nonExpandableTemplate\"\n >\n <div\n class=\"gds-item-field-wrap\"\n [ngClass]=\"{ 'no-sub-items': item.subItems.length === 0 }\"\n >\n <span\n *ngIf=\"item.subItems.length > 0\"\n role=\"button\"\n tabindex=\"0\"\n class=\"chevron-field\"\n [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 9L12 17L4 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n <span class=\"gds-item-field-text\">\n {{ item[column.property] }} ({{ item.subItems.length }})\n <div\n *ngIf=\"column.columnLabel\"\n class=\"gds-item-field-extra-label\"\n >\n {{ item[column.columnLabel] }}\n </div>\n </span>\n </div>\n </ng-container>\n\n <ng-template #nonExpandableTemplate>\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"tdTemplate; context: { $implicit: item }\"\n >\n </ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ item[column.property] }}\n </ng-template>\n </ng-template>\n </td>\n </tr>\n\n <!-- Expanded Sub Items -->\n <ng-container *ngIf=\"expandable && rowSelectors.get(item[rowId])?.value\">\n <tr *ngFor=\"let subItem of item[subItemsProp]\">\n <td\n *ngFor=\"let column of tableColumns\"\n class=\"web-view\"\n [columnType]=\"column.valueType\"\n [value]=\"subItem[column.property]\"\n (click)=\"\n propagateItemClick(subItem, column.preventDefaultClickEvent)\n \"\n >\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\"\n >\n </ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ subItem[column.property] }}\n </ng-template>\n </td>\n\n <td\n class=\"mobile-view\"\n [attr.colspan]=\"tableColumns.length\"\n (click)=\"propagateItemClick(subItem)\"\n >\n <dl class=\"mobile-view-field-wrap\">\n <ng-container *ngFor=\"let column of tableColumns\">\n <div\n *ngIf=\"!column.hidePropertyOnMobile\"\n class=\"mobile-view-field\"\n [columnType]=\"column.valueType\"\n [value]=\"subItem[column.property]\"\n >\n <dt *ngIf=\"!column.hideLabelOnMobile\">\n <ng-container *transloco=\"let t\">\n {{ t(column.label ?? '') }}\n </ng-container>\n </dt>\n <dd\n [ngStyle]=\"\n column.boldTextOnMobile\n ? { 'font-weight': '500' }\n : { 'font-weight': '400' }\n \"\n >\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"\n tdTemplate;\n context: { $implicit: subItem }\n \"\n ></ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ subItem[column.property] }}\n </ng-template>\n </dd>\n <ng-content></ng-content>\n </div>\n </ng-container>\n </dl>\n <span\n role=\"button\"\n tabindex=\"0\"\n class=\"nav-chevron-field\"\n [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 9L12 17L4 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </td>\n </tr>\n </ng-container>\n\n <!-- Custom appended rows -->\n <ng-container *ngIf=\"appendedRowsTemplateRef as trTemplate\">\n <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n <ng-container\n *ngTemplateOutlet=\"trTemplate || null; context: { $implicit: item }\"\n >\n </ng-container>\n </ng-container>\n </ng-container>\n </tbody>\n\n <!-- Table footer -->\n <tfoot *ngIf=\"customFooterTemplateRef as trTemplate\">\n <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n <ng-container *ngTemplateOutlet=\"trTemplate || null\"> </ng-container>\n </tfoot>\n</table>\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-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%}::ng-deep .gds-table{border-collapse:collapse}::ng-deep .gds-table thead tr th{border-top:1px solid var(--gds-sys-color-base-600);background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-background-primary);padding:.3rem .5rem;text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.gds-sortable .gds-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .gds-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center}::ng-deep .gds-table thead tr th .gds-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .gds-table-sort:focus,::ng-deep .gds-table thead tr th .gds-table-sort:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table thead tr th .gds-table-sort{border-radius:.125rem;--gds-sys-color-focus-outline: var( --gds-sys-color-background-primary )}::ng-deep .gds-table thead tr th[aria-sort] .gds-table-sort:after,::ng-deep .gds-table thead tr th.gds-sortable .gds-table-sort:after{content:\"\";background:var(--gds-sys-color-base-500);mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");mask-repeat:no-repeat;mask-position:right;width:12px;height:12px;margin-left:.3rem}::ng-deep .gds-table thead tr th[aria-sort=ascending] .gds-table-sort:after{background:var(--gds-sys-color-text-inverted);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .gds-table-sort:after{background:var(--gds-sys-color-text-inverted)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:1px solid var(--gds-sys-color-base-600);padding:.6875rem .5rem;vertical-align:top}::ng-deep .gds-table tbody tr.collapsible~.sub-row{display:none}::ng-deep .gds-table tbody tr.collapsible.expanded~.sub-row.show{display:table-row}::ng-deep .gds-table tbody tr td.collapse-control,::ng-deep .gds-table tbody tr td.select-control{width:15px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn{min-height:unset;padding:0;background:transparent}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder{cursor:pointer;width:12px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg{width:12px;fill:var(--gds-sys-color-text-primary)}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg[name=angle-right]{width:9px}::ng-deep .gds-table{border-bottom:1px solid var(--gds-sys-color-base-600)}@media(max-width:35.98em){::ng-deep .gds-table.table-mobile{width:100%;table-layout:fixed;border-bottom:none}::ng-deep .gds-table.table-mobile thead{position:sticky;top:0;display:block;background:var(--gds-sys-color-base-800)}}@media(max-width:35.98em)and (hover:none)and (pointer:coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media(max-width:35.98em){::ng-deep .gds-table.table-mobile thead tr{display:flex;overflow:auto}::ng-deep .gds-table.table-mobile thead tr::-webkit-scrollbar{display:none}::ng-deep .gds-table.table-mobile thead tr th{flex:auto;text-align:left!important;white-space:nowrap}::ng-deep .gds-table.table-mobile tbody tr{display:flex;flex-direction:column;border-bottom:1px solid var(--gds-sys-color-base-600)}::ng-deep .gds-table.table-mobile tbody tr td{display:flex;justify-content:space-between;align-items:center;border-top:none!important}::ng-deep .gds-table.table-mobile tbody tr td:before{content:attr(data-label);font-weight:700}}::ng-deep .gds-table{width:100%;border-bottom:none}::ng-deep .gds-table .web-view{display:table-cell}::ng-deep .gds-table .mobile-view{display:none}::ng-deep .gds-table tr:hover td{background-color:var(--gds-sys-color-base-100)}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .gds-table-sort{justify-content:end}::ng-deep .gds-table th button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table tbody{border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table tfoot ::ng-deep td{padding:.6875rem .5rem}::ng-deep .gds-table th.column__check{height:vanilla-px-to-rem(32px);width:vanilla-px-to-rem(40px)}::ng-deep .gds-table th.column__check div{min-height:100%}::ng-deep .gds-table th.column__check input:checked+label:after{top:.6rem;display:inline}::ng-deep .gds-table th.column__check label{display:inline;padding:0}::ng-deep .gds-table th.column__check label:before{top:.55rem}::ng-deep .gds-table td.column__check{width:vanilla-px-to-rem(40px)}::ng-deep .gds-table td.column__check div{min-height:unset}::ng-deep .gds-table td.column__check label{padding:0}::ng-deep .gds-table td.column__check label:before{margin:0}::ng-deep .gds-table tr.row__expand{background-color:var(--gds-sys-color-base-100)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap{display:flex;flex-wrap:nowrap}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap.no-sub-items{padding-left:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field{width:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field svg{transition:transform .3s ease}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field[aria-expanded=true] svg{transform:rotate(-180deg)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text{padding-left:.2rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text .gds-item-field-extra-label{font-weight:var(--sg-table-row-expand-font-weight-light, 400)}::ng-deep .gds-table tr.row__expand td{font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}::ng-deep .gds-table label.gds-form-control{align-items:flex-start}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus,::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);box-sizing:border-box;border-left:none;transform:scale(1) rotate(0);opacity:1}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.gds-form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){::ng-deep .gds-table label.gds-form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.gds-form-control.is-invalid{border:none;margin:0}}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i{background:var(--gds-sys-color-base-300)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i{background:var(--gds-sys-color-base-300)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i:after,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~span,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~span{color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~span::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~span::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i:after{box-sizing:border-box;content:\"\";opacity:0;position:absolute}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:checked~i:after{opacity:1}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]){padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]){line-height:1.125rem;padding:0}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-inverted);background-color:transparent}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i:after{box-sizing:border-box}::ng-deep .gds-table #thead-checkbox:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-white)}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i:after{border-color:#ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i:after{border-color:#ababab}@media screen and (max-width:600px){.gds-table thead{display:none}.gds-table .row__expand td:not(:first-child){display:none}.gds-table .row__expand td{display:table-cell}.gds-table .web-view{display:none}.gds-table .mobile-view{display:flex;align-items:center}.gds-table .mobile-view .mobile-view-field-wrap{display:grid;grid-template-columns:1fr 1fr;width:100%}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field{display:flex;flex-direction:column;padding-bottom:.3rem}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(odd){justify-self:start;align-items:start;text-align:start}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(2n){align-items:end;justify-self:end;text-align:end}.gds-table .mobile-view .nav-chevron-field{width:1.5rem;padding-left:.5rem}.gds-table .mobile-view .nav-chevron-field svg{transition:transform .3s ease}.gds-table .mobile-view .nav-chevron-field[aria-expanded=true] svg{transform:rotate(-90deg)}.gds-table .mobile-view .settings-field{width:1.5rem;padding:0 1rem}.gds-table .mobile-view .settings-field svg{transition:all .3s ease}.gds-table .mobile-view .settings-field:hover svg{fill:var(--gds-sys-color-blue-dark-2)}}\n"] }]
|
|
540
540
|
}], propDecorators: { customTemplates: [{
|
|
@@ -585,8 +585,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
585
585
|
}] } });
|
|
586
586
|
|
|
587
587
|
class NggvTableModule {
|
|
588
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
589
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
588
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
589
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: NggvTableModule, declarations: [TableComponent,
|
|
590
590
|
TableDirective,
|
|
591
591
|
TableTemplateDirective,
|
|
592
592
|
TableFooterTemplateDirective,
|
|
@@ -594,9 +594,9 @@ class NggvTableModule {
|
|
|
594
594
|
TableTemplateDirective,
|
|
595
595
|
TableFooterTemplateDirective,
|
|
596
596
|
TableAppendableRowsTemplateDirective] }); }
|
|
597
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
597
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvTableModule, imports: [CommonModule, ReactiveFormsModule, TranslocoModule] }); }
|
|
598
598
|
}
|
|
599
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
599
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvTableModule, decorators: [{
|
|
600
600
|
type: NgModule,
|
|
601
601
|
args: [{
|
|
602
602
|
declarations: [
|
|
@@ -45,10 +45,10 @@ class TabDirective {
|
|
|
45
45
|
get ariaLabelledby() {
|
|
46
46
|
return `tab-${this.id}`;
|
|
47
47
|
}
|
|
48
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
49
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
48
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
49
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.19", type: TabDirective, isStandalone: false, selector: "[tab]", inputs: { thook: "thook", active: "active", tab: "tab", disabled: "disabled", id: "id" }, host: { properties: { "class.gds-tabs__panel": "this.baseClass", "attr.role": "this.role", "attr.data-thook": "this.thook", "class.-active": "this.active", "attr.hidden": "this.hidden", "attr.id": "this.attrId", "attr.aria-labelledby": "this.ariaLabelledby" } }, ngImport: i0 }); }
|
|
50
50
|
}
|
|
51
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
51
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabDirective, decorators: [{
|
|
52
52
|
type: Directive,
|
|
53
53
|
args: [{
|
|
54
54
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -319,10 +319,10 @@ class TabsComponent {
|
|
|
319
319
|
tabElement.focus();
|
|
320
320
|
this.onSelect(tabElement.id.slice(4));
|
|
321
321
|
}
|
|
322
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
323
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
322
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
323
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.19", type: TabsComponent, isStandalone: false, selector: "nggv-tabs", inputs: { thook: "thook", tabs: "tabs" }, outputs: { ngvTabSwitch: "ngvTabSwitch" }, host: { properties: { "class.gds-tabs": "this.baseClass", "attr.data-thook": "this.thook" } }, queries: [{ propertyName: "tabRefs", predicate: TabDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div\n class=\"gds-tabs\"\n role=\"tablist\"\n [attr.data-thook]=\"thook + '-list'\"\n (keydown)=\"onKeyDown($event)\"\n >\n <button\n class=\"gds-tabs__tab\"\n [id]=\"'tab-' + (tab.id !== undefined ? tab.id : '')\"\n role=\"tab\"\n [attr.data-thook]=\"tab.thook || thook + '-tab'\"\n [tabindex]=\"tab.active ? 0 : -1\"\n [attr.aria-controls]=\"'panel-' + (tab.id !== undefined ? tab.id : '')\"\n [attr.aria-selected]=\"tab.active\"\n [class.-selected]=\"tab.active\"\n [disabled]=\"tab.disabled\"\n [innerHTML]=\"t(tab.tab)\"\n (click)=\"onSelect(tab.id)\"\n *ngFor=\"let tab of tabs\"\n ></button>\n </div>\n <article\n *ngIf=\"useRouting\"\n class=\"gds-tabs__panel -active\"\n [id]=\"'panel-' + (selectedTab ? selectedTab.id : '')\"\n [attr.data-thook]=\"thook + '-panel'\"\n [attr.aria-labelledby]=\"'tab-' + (selectedTab ? selectedTab.id : '')\"\n >\n <router-outlet></router-outlet>\n </article>\n <ng-content *ngIf=\"!useRouting\"></ng-content>\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)}:host .gds-tabs{display:flex;overflow-x:auto;padding:.25rem;margin:-.25rem;--border-color: var(--gds-sys-color-base-600)}:host .gds-tabs::-webkit-scrollbar{display:none}:host .gds-tabs:not(.gds-tabs--fluid):after{border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);content:\"\";display:block;flex-grow:1}:host .gds-tabs__tab{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);padding:.75rem 1rem;font-weight:500;transition:border var(--gds-sys-transition)}:host .gds-tabs__tab:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}:host .gds-tabs__tab:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-tabs__tab:focus,:host .gds-tabs__tab:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-tabs__tab{display:flex;justify-content:center;color:var(--gds-sys-color-text-primary);text-align:center;text-decoration:none;white-space:nowrap;border-radius:.25rem .25rem 0 0;border-left:1px solid transparent;border-top:1px solid transparent;border-right:1px solid transparent}.gds-tabs--fluid :host .gds-tabs__tab{flex:1}:host .gds-tabs__tab svg>*{fill:currentColor}:host .gds-tabs__tab{gap:.25rem;transition:none;font-size:1rem;font-family:inherit}:host .gds-tabs__tab.-selected{box-sizing:border-box;border-top:solid 1px var(--gds-sys-color-base-600);border-right:solid 1px var(--gds-sys-color-base-600);border-left:solid 1px var(--gds-sys-color-base-600);transition:border var(--gds-sys-transition)}:host .gds-tabs__tab.-selected:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}:host .gds-tabs__tab.-selected{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom:1px transparent;transition:none;padding:11px 15px 12px}:host .gds-tabs__tab[disabled]{color:#adadad;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
|
|
324
324
|
}
|
|
325
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
325
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: TabsComponent, decorators: [{
|
|
326
326
|
type: Component,
|
|
327
327
|
args: [{ selector: 'nggv-tabs', standalone: false, template: "<ng-container *transloco=\"let t\">\n <div\n class=\"gds-tabs\"\n role=\"tablist\"\n [attr.data-thook]=\"thook + '-list'\"\n (keydown)=\"onKeyDown($event)\"\n >\n <button\n class=\"gds-tabs__tab\"\n [id]=\"'tab-' + (tab.id !== undefined ? tab.id : '')\"\n role=\"tab\"\n [attr.data-thook]=\"tab.thook || thook + '-tab'\"\n [tabindex]=\"tab.active ? 0 : -1\"\n [attr.aria-controls]=\"'panel-' + (tab.id !== undefined ? tab.id : '')\"\n [attr.aria-selected]=\"tab.active\"\n [class.-selected]=\"tab.active\"\n [disabled]=\"tab.disabled\"\n [innerHTML]=\"t(tab.tab)\"\n (click)=\"onSelect(tab.id)\"\n *ngFor=\"let tab of tabs\"\n ></button>\n </div>\n <article\n *ngIf=\"useRouting\"\n class=\"gds-tabs__panel -active\"\n [id]=\"'panel-' + (selectedTab ? selectedTab.id : '')\"\n [attr.data-thook]=\"thook + '-panel'\"\n [attr.aria-labelledby]=\"'tab-' + (selectedTab ? selectedTab.id : '')\"\n >\n <router-outlet></router-outlet>\n </article>\n <ng-content *ngIf=\"!useRouting\"></ng-content>\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)}:host .gds-tabs{display:flex;overflow-x:auto;padding:.25rem;margin:-.25rem;--border-color: var(--gds-sys-color-base-600)}:host .gds-tabs::-webkit-scrollbar{display:none}:host .gds-tabs:not(.gds-tabs--fluid):after{border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);content:\"\";display:block;flex-grow:1}:host .gds-tabs__tab{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);padding:.75rem 1rem;font-weight:500;transition:border var(--gds-sys-transition)}:host .gds-tabs__tab:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}:host .gds-tabs__tab:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-tabs__tab:focus,:host .gds-tabs__tab:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-tabs__tab{display:flex;justify-content:center;color:var(--gds-sys-color-text-primary);text-align:center;text-decoration:none;white-space:nowrap;border-radius:.25rem .25rem 0 0;border-left:1px solid transparent;border-top:1px solid transparent;border-right:1px solid transparent}.gds-tabs--fluid :host .gds-tabs__tab{flex:1}:host .gds-tabs__tab svg>*{fill:currentColor}:host .gds-tabs__tab{gap:.25rem;transition:none;font-size:1rem;font-family:inherit}:host .gds-tabs__tab.-selected{box-sizing:border-box;border-top:solid 1px var(--gds-sys-color-base-600);border-right:solid 1px var(--gds-sys-color-base-600);border-left:solid 1px var(--gds-sys-color-base-600);transition:border var(--gds-sys-transition)}:host .gds-tabs__tab.-selected:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}:host .gds-tabs__tab.-selected{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom:1px transparent;transition:none;padding:11px 15px 12px}:host .gds-tabs__tab[disabled]{color:#adadad;cursor:not-allowed}\n"] }]
|
|
328
328
|
}], ctorParameters: () => [{ type: i1.Router }], propDecorators: { baseClass: [{
|
|
@@ -343,11 +343,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
343
343
|
}] } });
|
|
344
344
|
|
|
345
345
|
class NggvTabsModule {
|
|
346
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
347
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
348
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
346
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
347
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.19", ngImport: i0, type: NggvTabsModule, declarations: [TabDirective, TabsComponent], imports: [CommonModule, TranslocoModule, RouterModule], exports: [TabDirective, TabsComponent] }); }
|
|
348
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvTabsModule, imports: [CommonModule, TranslocoModule, RouterModule] }); }
|
|
349
349
|
}
|
|
350
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.19", ngImport: i0, type: NggvTabsModule, decorators: [{
|
|
351
351
|
type: NgModule,
|
|
352
352
|
args: [{
|
|
353
353
|
declarations: [TabDirective, TabsComponent],
|