npm - @sebgroup/green-angular - Versions diffs - 8.1.0 → 9.0.0 - Mend

@sebgroup/green-angular 8.1.0 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

package/fesm2022/sebgroup-green-angular-src-v-angular-radio.mjs CHANGED Viewed

@@ -126,11 +126,11 @@ class NggvRadioComponent extends NggvBaseControlValueAccessorComponent {
             this.name = this.formControlName;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", 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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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=\"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-ref-pallet-base200: hsl(0, 0%, 91%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(#fff);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: #333;--gds-comp-checkbox-border-radius: 2px;--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: #333;--gds-comp-checkbox-border-color-selected: var(#fff);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2);--gds-comp-radio-container-height: 1rem;--gds-comp-radio-container-width: 1rem;--gds-comp-radio-border-radius: 50%;--gds-comp-radio-ring-width: .1875rem;--gds-comp-radio-container-background-disabled: var(--gds-ref-pallet-base200);--gds-comp-radio-border: #333;--gds-comp-radio-border-checked: #333;--gds-comp-radio-border-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-border-checked-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-border-disabled: var(--gds-ref-pallet-base500);--gds-comp-radio-ring: var(#fff);--gds-comp-radio-ring-checked: var(#fff);--gds-comp-radio-ring-hover: var(#fff);--gds-comp-radio-ring-checked-hover: var(#fff);--gds-comp-radio-ring-disabled: var(#fff);--gds-comp-radio-dot: transparent;--gds-comp-radio-dot-checked: #333;--gds-comp-radio-dot-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-dot-checked-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-dot-disabled: var(--gds-ref-pallet-base600)}:host .nggv-field--locked{display:inline-block;border-radius:.25em;position:relative;min-height:2em;padding:.5em .75em .5em 0}:host .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 .form-control:has(input:disabled){cursor:not-allowed}:host label.form-control input[type=radio]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control:has(input[type=radio]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=radio]:focus-visible):focus,:host label.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.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.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.form-control:hover input[type=radio]:not(.disabled,:disabled)~i{background-color:var(--gds-sys-color-base-200)}:host label.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.form-control input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-text-primary)}:host label.form-control:hover input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-base-700)}:host .was-validated label.form-control input[type=radio]:not(.is-invalid):valid~i,:host label.form-control input[type=radio].is-valid~i{--border-color: var(--gds-sys-color-dark-green-2);--sg-border-color: var(--gds-sys-color-dark-green-2)}:host .was-validated label.form-control input[type=radio]:not(.is-valid):invalid~i,:host label.form-control input[type=radio].is-invalid~i{--border-color: var(--gds-sys-color-text-error);--sg-border-color: var(--gds-sys-color-text-error)}:host label.form-control input[type=radio]:disabled~i,:host label.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.form-control input[type=radio]:disabled~span,:host label.form-control input[type=radio].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=radio]:disabled~span::placeholder,:host label.form-control input[type=radio].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=radio]:disabled:checked~i:after,:host label.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]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvRadioComponent, decorators: [{
             type: Component,
-            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=\"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-ref-pallet-base200: hsl(0, 0%, 91%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(#fff);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: #333;--gds-comp-checkbox-border-radius: 2px;--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: #333;--gds-comp-checkbox-border-color-selected: var(#fff);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2);--gds-comp-radio-container-height: 1rem;--gds-comp-radio-container-width: 1rem;--gds-comp-radio-border-radius: 50%;--gds-comp-radio-ring-width: .1875rem;--gds-comp-radio-container-background-disabled: var(--gds-ref-pallet-base200);--gds-comp-radio-border: #333;--gds-comp-radio-border-checked: #333;--gds-comp-radio-border-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-border-checked-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-border-disabled: var(--gds-ref-pallet-base500);--gds-comp-radio-ring: var(#fff);--gds-comp-radio-ring-checked: var(#fff);--gds-comp-radio-ring-hover: var(#fff);--gds-comp-radio-ring-checked-hover: var(#fff);--gds-comp-radio-ring-disabled: var(#fff);--gds-comp-radio-dot: transparent;--gds-comp-radio-dot-checked: #333;--gds-comp-radio-dot-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-dot-checked-hover: var(--gds-ref-pallet-base600);--gds-comp-radio-dot-disabled: var(--gds-ref-pallet-base600)}:host .nggv-field--locked{display:inline-block;border-radius:.25em;position:relative;min-height:2em;padding:.5em .75em .5em 0}:host .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 .form-control:has(input:disabled){cursor:not-allowed}:host label.form-control input[type=radio]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control:has(input[type=radio]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=radio]:focus-visible):focus,:host label.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.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.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.form-control:hover input[type=radio]:not(.disabled,:disabled)~i{background-color:var(--gds-sys-color-base-200)}:host label.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.form-control input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-text-primary)}:host label.form-control:hover input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-base-700)}:host .was-validated label.form-control input[type=radio]:not(.is-invalid):valid~i,:host label.form-control input[type=radio].is-valid~i{--border-color: var(--gds-sys-color-dark-green-2);--sg-border-color: var(--gds-sys-color-dark-green-2)}:host .was-validated label.form-control input[type=radio]:not(.is-valid):invalid~i,:host label.form-control input[type=radio].is-invalid~i{--border-color: var(--gds-sys-color-text-error);--sg-border-color: var(--gds-sys-color-text-error)}:host label.form-control input[type=radio]:disabled~i,:host label.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.form-control input[type=radio]:disabled~span,:host label.form-control input[type=radio].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=radio]:disabled~span::placeholder,:host label.form-control input[type=radio].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=radio]:disabled:checked~i:after,:host label.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"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {

package/fesm2022/sebgroup-green-angular-src-v-angular-radio.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sebgroup-green-angular-src-v-angular-radio.mjs","sources":["../../../../libs/angular/src/v-angular/radio/radio.component.ts","../../../../libs/angular/src/v-angular/radio/radio.component.html","../../../../libs/angular/src/v-angular/radio/radio-group/radio-group.component.ts","../../../../libs/angular/src/v-angular/radio/radio-group/radio-group.component.html","../../../../libs/angular/src/v-angular/radio/radio.module.ts","../../../../libs/angular/src/v-angular/radio/sebgroup-green-angular-src-v-angular-radio.ts"],"sourcesContent":["import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport {\n ChangeDetectorRef,\n Component,\n HostBinding,\n Inject,\n Injectable,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n Self,\n} from '@angular/core'\nimport { NgControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@jsverse/transloco'\n\nimport { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/** @internal Internal class used to uncheck radio buttons with the matching name. /\n@Injectable()\nexport class NggvRadioControlRegistry {\n private _radios: any[] = []\n\n add(control: NgControl, radio: NggvRadioComponent) {\n this._radios.push([control, radio])\n }\n\n remove(radio: NggvRadioComponent) {\n for (let i = this._radios.length - 1; i >= 0; --i) {\n if (this._radios[i][1] === radio) {\n this._radios.splice(i, 1)\n return\n }\n }\n }\n\n select(radio: NggvRadioComponent) {\n this._radios.forEach((controlPair) => {\n if (this._isSameGroup(controlPair, radio) && controlPair[1] !== radio) {\n controlPair[1].writeValue(radio.value)\n }\n })\n }\n\n private _isSameGroup(\n controlPair: [NgControl, NggvRadioComponent],\n radio: NggvRadioComponent,\n ) {\n if (!controlPair[0].control) return false\n return (\n //@ts-expect-error internal properties not exposed\n controlPair[0]._parent === radio.ngControl._parent &&\n controlPair[1].name === radio.name\n )\n }\n}\n\n/\n Use radio buttons when users must select one option in a list with exclusive options out of a set of two or more options.\n * https://designlibrary.sebgroup.com/components/component-radiobutton\n /\n@Component({\n selector: 'nggv-radio',\n templateUrl: './radio.component.html',\n styleUrls: ['./radio.component.scss'],\n providers: [NggvRadioControlRegistry],\n standalone: false\n})\nexport class NggvRadioComponent\n extends NggvBaseControlValueAccessorComponent\n implements OnInit, OnDestroy\n{\n /\n Special property used for selecting DOM elements during automated UI testing.\n /\n @HostBinding('attr.data-thook') @Input() thook: string \| null \| undefined =\n 'radio'\n /\n Sets class on host element based on size input for styling\n /\n @HostBinding('class') @Input() size: 'small' \| 'large' = 'large'\n /\n Syncs a FormControl in an existing FormGroup to a form control element by name.\n /\n @Input() formControlName?: string\n /\n Decides if error should be connected to each individual radio button.\n * If true, errors will be shown in nggv-radio-group component.\n * If false, errors will be show below each radio button\n /\n isGroup = false\n /\n Creates a new RadioComponent\n * @param ngControl optional FormControl provided when component is used in a form, through dependency injection.\n * @param registry internal registry used to uncheck radio buttons with the matching name, through dependency injection.\n * @param cdr change detection reference for rendering purposes.\n /\n constructor(\n @Self() @Optional() public ngControl: NgControl,\n @Optional()\n @Inject(TRANSLOCO_SCOPE)\n protected translocoScope: TranslocoScope,\n protected registry: NggvRadioControlRegistry,\n protected cdr: ChangeDetectorRef,\n ) {\n super(ngControl, translocoScope, cdr)\n }\n\n ngOnInit() {\n super.ngOnInit()\n this._checkName()\n this.registry.add(this.ngControl, this)\n // Check if nggv-radio-group is present connected to the same formControl\n if (\n Array.from(\n document.querySelectorAll(\n `nggv-radio-group[formcontrolname=${this.name}]`,\n ),\n ).length\n ) {\n this.isGroup = true\n }\n }\n\n ngOnDestroy() {\n this.registry.remove(this)\n }\n\n /* @internal /\n onInputChange(event: Event) {\n event.stopPropagation()\n if (this.disabled) return\n this.onChange(this.state)\n }\n\n /* Writes a new value of true or false based on if argument matches this components value property. /\n writeValue(value: any): void {\n // Phantom null value on first load https://github.com/angular/angular/pull/38140\n super.writeValue(value === this.value)\n }\n\n /* Registers a callback function that is called when the child input element's value changes. /\n registerOnChange(fn: (value: any) => any) {\n // Override default to update registry\n this.onChange = () => {\n fn(this.value)\n this.registry.select(this)\n }\n }\n\n /* Checks that the name properties match and updates name property if only formControlName is given. /\n private _checkName(): void {\n if (\n this.name &&\n this.formControlName &&\n this.name !== this.formControlName\n ) {\n throw new Error(`\n If you define both a name and a formControlName attribute on your radio button, their values\n must match. Ex: <input type=\"radio\" formControlName=\"food\" name=\"food\">\n `)\n }\n if (!this.name && this.formControlName) this.name = this.formControlName\n }\n}\n","<!-- 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=\"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","import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport {\n ChangeDetectorRef,\n Component,\n HostBinding,\n Inject,\n Input,\n OnInit,\n Optional,\n Self,\n} from '@angular/core'\nimport { NgControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@jsverse/transloco'\n\nimport { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/*\n Creates a wrapper around a group of radio buttons.\n * If there is an error to the form control connected to the radio buttons, it will be shown once below instead of below every individual radio button\n /\n@Component({\n selector: 'nggv-radio-group',\n templateUrl: './radio-group.component.html',\n styleUrls: ['./radio-group.component.scss'],\n standalone: false\n})\nexport class NggvRadioGroupComponent\n extends NggvBaseControlValueAccessorComponent\n implements OnInit\n{\n /\n Special property used for selecting DOM elements during automated UI testing.\n /\n @HostBinding('attr.data-thook') @Input() thook: string \| null \| undefined =\n 'radio-group'\n /\n Sets class on host element based on size input for styling\n /\n @HostBinding('class') @Input() size: 'small' \| 'large' = 'large'\n /\n Syncs a FormControl in an existing FormGroup to a form control element by name.\n /\n @Input() formControlName?: string\n /\n Sets \"flex-direction\" of parent of radio buttons.\n /\n @Input() direction?: 'row' \| 'column' = 'column'\n /\n Creates a new RadioComponent\n * @param ngControl optional FormControl provided when component is used in a form, through dependency injection.\n * @param cdr change detection reference for rendering purposes.\n /\n constructor(\n @Self() @Optional() public ngControl: NgControl,\n @Optional()\n @Inject(TRANSLOCO_SCOPE)\n protected translocoScope: TranslocoScope,\n protected cdr: ChangeDetectorRef,\n ) {\n super(ngControl, translocoScope, cdr)\n }\n\n ngOnInit() {\n super.ngOnInit()\n this._checkName()\n }\n\n /* Checks that the name properties match and updates name property if only formControlName is given. /\n private _checkName(): void {\n if (\n this.name &&\n this.formControlName &&\n this.name !== this.formControlName\n ) {\n throw new Error(`\n If you define both a name and a formControlName attribute on your radio button, their values\n must match. Ex: <input type=\"radio\" formControlName=\"food\" name=\"food\">\n `)\n }\n\n if (!this.name && this.formControlName) this.name = this.formControlName\n }\n}\n","<!-- 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","import { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\n\nimport { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'\nimport { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { NggvRadioGroupComponent } from './radio-group/radio-group.component'\nimport { NggvRadioComponent } from './radio.component'\n\n@NgModule({\n declarations: [NggvRadioComponent, NggvRadioGroupComponent],\n imports: [CommonModule, NggvI18nModule, NggCoreWrapperModule],\n exports: [NggvRadioComponent, NggvRadioGroupComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvRadioModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"sebgroup-green-angular-src-v-angular-radio.mjs","sources":["../../../../libs/angular/src/v-angular/radio/radio.component.ts","../../../../libs/angular/src/v-angular/radio/radio.component.html","../../../../libs/angular/src/v-angular/radio/radio-group/radio-group.component.ts","../../../../libs/angular/src/v-angular/radio/radio-group/radio-group.component.html","../../../../libs/angular/src/v-angular/radio/radio.module.ts","../../../../libs/angular/src/v-angular/radio/sebgroup-green-angular-src-v-angular-radio.ts"],"sourcesContent":["import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport {\n ChangeDetectorRef,\n Component,\n HostBinding,\n Inject,\n Injectable,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n Self,\n} from '@angular/core'\nimport { NgControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@jsverse/transloco'\n\nimport { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/** @internal Internal class used to uncheck radio buttons with the matching name. /\n@Injectable()\nexport class NggvRadioControlRegistry {\n private _radios: any[] = []\n\n add(control: NgControl, radio: NggvRadioComponent) {\n this._radios.push([control, radio])\n }\n\n remove(radio: NggvRadioComponent) {\n for (let i = this._radios.length - 1; i >= 0; --i) {\n if (this._radios[i][1] === radio) {\n this._radios.splice(i, 1)\n return\n }\n }\n }\n\n select(radio: NggvRadioComponent) {\n this._radios.forEach((controlPair) => {\n if (this._isSameGroup(controlPair, radio) && controlPair[1] !== radio) {\n controlPair[1].writeValue(radio.value)\n }\n })\n }\n\n private _isSameGroup(\n controlPair: [NgControl, NggvRadioComponent],\n radio: NggvRadioComponent,\n ) {\n if (!controlPair[0].control) return false\n return (\n //@ts-expect-error internal properties not exposed\n controlPair[0]._parent === radio.ngControl._parent &&\n controlPair[1].name === radio.name\n )\n }\n}\n\n/\n Use radio buttons when users must select one option in a list with exclusive options out of a set of two or more options.\n * https://designlibrary.sebgroup.com/components/component-radiobutton\n /\n@Component({\n selector: 'nggv-radio',\n templateUrl: './radio.component.html',\n styleUrls: ['./radio.component.scss'],\n providers: [NggvRadioControlRegistry],\n standalone: false\n})\nexport class NggvRadioComponent\n extends NggvBaseControlValueAccessorComponent\n implements OnInit, OnDestroy\n{\n /\n Special property used for selecting DOM elements during automated UI testing.\n /\n @HostBinding('attr.data-thook') @Input() thook: string \| null \| undefined =\n 'radio'\n /\n Sets class on host element based on size input for styling\n /\n @HostBinding('class') @Input() size: 'small' \| 'large' = 'large'\n /\n Syncs a FormControl in an existing FormGroup to a form control element by name.\n /\n @Input() formControlName?: string\n /\n Decides if error should be connected to each individual radio button.\n * If true, errors will be shown in nggv-radio-group component.\n * If false, errors will be show below each radio button\n /\n isGroup = false\n /\n Creates a new RadioComponent\n * @param ngControl optional FormControl provided when component is used in a form, through dependency injection.\n * @param registry internal registry used to uncheck radio buttons with the matching name, through dependency injection.\n * @param cdr change detection reference for rendering purposes.\n /\n constructor(\n @Self() @Optional() public ngControl: NgControl,\n @Optional()\n @Inject(TRANSLOCO_SCOPE)\n protected translocoScope: TranslocoScope,\n protected registry: NggvRadioControlRegistry,\n protected cdr: ChangeDetectorRef,\n ) {\n super(ngControl, translocoScope, cdr)\n }\n\n ngOnInit() {\n super.ngOnInit()\n this._checkName()\n this.registry.add(this.ngControl, this)\n // Check if nggv-radio-group is present connected to the same formControl\n if (\n Array.from(\n document.querySelectorAll(\n `nggv-radio-group[formcontrolname=${this.name}]`,\n ),\n ).length\n ) {\n this.isGroup = true\n }\n }\n\n ngOnDestroy() {\n this.registry.remove(this)\n }\n\n /* @internal /\n onInputChange(event: Event) {\n event.stopPropagation()\n if (this.disabled) return\n this.onChange(this.state)\n }\n\n /* Writes a new value of true or false based on if argument matches this components value property. /\n writeValue(value: any): void {\n // Phantom null value on first load https://github.com/angular/angular/pull/38140\n super.writeValue(value === this.value)\n }\n\n /* Registers a callback function that is called when the child input element's value changes. /\n registerOnChange(fn: (value: any) => any) {\n // Override default to update registry\n this.onChange = () => {\n fn(this.value)\n this.registry.select(this)\n }\n }\n\n /* Checks that the name properties match and updates name property if only formControlName is given. /\n private _checkName(): void {\n if (\n this.name &&\n this.formControlName &&\n this.name !== this.formControlName\n ) {\n throw new Error(`\n If you define both a name and a formControlName attribute on your radio button, their values\n must match. Ex: <input type=\"radio\" formControlName=\"food\" name=\"food\">\n `)\n }\n if (!this.name && this.formControlName) this.name = this.formControlName\n }\n}\n","<!-- 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","import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport {\n ChangeDetectorRef,\n Component,\n HostBinding,\n Inject,\n Input,\n OnInit,\n Optional,\n Self,\n} from '@angular/core'\nimport { NgControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@jsverse/transloco'\n\nimport { NggvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/*\n Creates a wrapper around a group of radio buttons.\n * If there is an error to the form control connected to the radio buttons, it will be shown once below instead of below every individual radio button\n /\n@Component({\n selector: 'nggv-radio-group',\n templateUrl: './radio-group.component.html',\n styleUrls: ['./radio-group.component.scss'],\n standalone: false\n})\nexport class NggvRadioGroupComponent\n extends NggvBaseControlValueAccessorComponent\n implements OnInit\n{\n /\n Special property used for selecting DOM elements during automated UI testing.\n /\n @HostBinding('attr.data-thook') @Input() thook: string \| null \| undefined =\n 'radio-group'\n /\n Sets class on host element based on size input for styling\n /\n @HostBinding('class') @Input() size: 'small' \| 'large' = 'large'\n /\n Syncs a FormControl in an existing FormGroup to a form control element by name.\n /\n @Input() formControlName?: string\n /\n Sets \"flex-direction\" of parent of radio buttons.\n /\n @Input() direction?: 'row' \| 'column' = 'column'\n /\n Creates a new RadioComponent\n * @param ngControl optional FormControl provided when component is used in a form, through dependency injection.\n * @param cdr change detection reference for rendering purposes.\n /\n constructor(\n @Self() @Optional() public ngControl: NgControl,\n @Optional()\n @Inject(TRANSLOCO_SCOPE)\n protected translocoScope: TranslocoScope,\n protected cdr: ChangeDetectorRef,\n ) {\n super(ngControl, translocoScope, cdr)\n }\n\n ngOnInit() {\n super.ngOnInit()\n this._checkName()\n }\n\n /* Checks that the name properties match and updates name property if only formControlName is given. /\n private _checkName(): void {\n if (\n this.name &&\n this.formControlName &&\n this.name !== this.formControlName\n ) {\n throw new Error(`\n If you define both a name and a formControlName attribute on your radio button, their values\n must match. Ex: <input type=\"radio\" formControlName=\"food\" name=\"food\">\n `)\n }\n\n if (!this.name && this.formControlName) this.name = this.formControlName\n }\n}\n","<!-- 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","import { CommonModule } from '@angular/common'\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'\n\nimport { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'\nimport { NggvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\nimport { NggvRadioGroupComponent } from './radio-group/radio-group.component'\nimport { NggvRadioComponent } from './radio.component'\n\n@NgModule({\n declarations: [NggvRadioComponent, NggvRadioGroupComponent],\n imports: [CommonModule, NggvI18nModule, NggCoreWrapperModule],\n exports: [NggvRadioComponent, NggvRadioGroupComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvRadioModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sebgroup-green-angular-src-v-angular-table.mjs CHANGED Viewed

@@ -532,11 +532,11 @@ class TableComponent {
         row?.setValue(!row.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    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=\"sg-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=\"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=\"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 *ngIf=\"expandable && i === 0; else nonExpandableTemplate\">\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\" height=\"20\" viewBox=\"0 0 24 24\" 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 *ngIf=\"column.columnLabel\" class=\"gds-item-field-extra-label\">\n                  {{ item[column.columnLabel] }}\n                </div>\n              </span>\n            </div>\n          </ng-container>\n\n          <ng-template #nonExpandableTemplate>\n            <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n              <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: item }\">\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)=\"propagateItemClick(subItem, column.preventDefaultClickEvent)\"\n          >\n            <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n              <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\">\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 [ngStyle]=\"column.boldTextOnMobile ? { 'font-weight': '500' } : {'font-weight': '400'}\">\n                    <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n                      <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\"></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\" height=\"20\" viewBox=\"0 0 24 24\" 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: ["::ng-deep .gds-table{--gds-ref-pallet-base100: #f8f8f8;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--sg-table-header-background: #1a1a1a;--sg-table-header-color: #fff;--sg-table-cell-padding-x: .5rem;--sg-table-cell-padding-y: .6875rem;--sg-table-border-width: 1px;--sg-table-border-color: var(--gds-ref-pallet-base300);--sg-table-sort-icon-color: var(--gds-ref-pallet-base600);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-table-sort-icon-color-active: #fff;--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--sg-table-row-expand-font-weight: 500;--sg-table-row-expand-font-weight-light: 400;border-collapse:collapse}::ng-deep .gds-table thead tr th{background:#333;color:var(--sg-table-header-color);padding:.3rem var(--sg-table-cell-padding-x);text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.sg-sortable .sg-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .sg-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center}::ng-deep .gds-table thead tr th .sg-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .sg-table-sort:focus,::ng-deep .gds-table thead tr th .sg-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 .sg-table-sort{border-radius:.125rem;--gds-sys-color-focus-outline: $_header-color}::ng-deep .gds-table thead tr th[aria-sort] .sg-table-sort:after,::ng-deep .gds-table thead tr th.sg-sortable .sg-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] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:var(--sg-table-border-width) solid var(--gds-sys-color-base-300);padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x);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:#868686}::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:var(--sg-table-border-width) solid var(--gds-sys-color-base-300)}@media(max-width:36em){::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:#333}}@media(max-width:36em)and (hover:none)and (pointer:coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media(max-width:36em){::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:var(--sg-table-border-width) solid var(--gds-sys-color-base-300)}::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-ref-pallet-base100)}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .sg-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:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x)}::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-ref-pallet-base100)}::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{--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-sys-color-base-300);--gds-comp-checkbox-border-color: var(--gds-sys-color-base-900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base-600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base-900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2)}::ng-deep .gds-table label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}::ng-deep .gds-table label.form-control{align-items:flex-start}::ng-deep .gds-table label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus,::ng-deep .gds-table label.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.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.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.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.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);border-left:none;transform:scale(1) rotate(0);opacity:1}::ng-deep .gds-table label.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.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){::ng-deep .gds-table label.form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.form-control.is-invalid{border:none;margin:0}}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i:after,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}::ng-deep .gds-table label.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.form-control input[type=checkbox]:checked~i:after{opacity:1}::ng-deep .gds-table .gds-field-checkbox-wrap .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 .form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::ng-deep .gds-table .gds-field-checkbox-wrap .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-comp-checkbox-container-color);background-color:var(--gds-comp-checkbox-border-color)}::ng-deep .gds-table #thead-checkbox:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--sg-table-header-color)}::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{background-color:var(--gds-comp-checkbox-border-color);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" }] }); }
+    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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-table', standalone: false, template: "<ng-template #sortableThTemplate let-column>\n  <button class=\"sg-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=\"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=\"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 *ngIf=\"expandable && i === 0; else nonExpandableTemplate\">\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\" height=\"20\" viewBox=\"0 0 24 24\" 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 *ngIf=\"column.columnLabel\" class=\"gds-item-field-extra-label\">\n                  {{ item[column.columnLabel] }}\n                </div>\n              </span>\n            </div>\n          </ng-container>\n\n          <ng-template #nonExpandableTemplate>\n            <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n              <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: item }\">\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)=\"propagateItemClick(subItem, column.preventDefaultClickEvent)\"\n          >\n            <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n              <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\">\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 [ngStyle]=\"column.boldTextOnMobile ? { 'font-weight': '500' } : {'font-weight': '400'}\">\n                    <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n                      <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\"></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\" height=\"20\" viewBox=\"0 0 24 24\" 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: ["::ng-deep .gds-table{--gds-ref-pallet-base100: #f8f8f8;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--sg-table-header-background: #1a1a1a;--sg-table-header-color: #fff;--sg-table-cell-padding-x: .5rem;--sg-table-cell-padding-y: .6875rem;--sg-table-border-width: 1px;--sg-table-border-color: var(--gds-ref-pallet-base300);--sg-table-sort-icon-color: var(--gds-ref-pallet-base600);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-table-sort-icon-color-active: #fff;--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--sg-table-row-expand-font-weight: 500;--sg-table-row-expand-font-weight-light: 400;border-collapse:collapse}::ng-deep .gds-table thead tr th{background:#333;color:var(--sg-table-header-color);padding:.3rem var(--sg-table-cell-padding-x);text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.sg-sortable .sg-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .sg-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center}::ng-deep .gds-table thead tr th .sg-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .sg-table-sort:focus,::ng-deep .gds-table thead tr th .sg-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 .sg-table-sort{border-radius:.125rem;--gds-sys-color-focus-outline: $_header-color}::ng-deep .gds-table thead tr th[aria-sort] .sg-table-sort:after,::ng-deep .gds-table thead tr th.sg-sortable .sg-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] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:var(--sg-table-border-width) solid var(--gds-sys-color-base-300);padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x);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:#868686}::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:var(--sg-table-border-width) solid var(--gds-sys-color-base-300)}@media(max-width:36em){::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:#333}}@media(max-width:36em)and (hover:none)and (pointer:coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media(max-width:36em){::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:var(--sg-table-border-width) solid var(--gds-sys-color-base-300)}::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-ref-pallet-base100)}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .sg-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:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x)}::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-ref-pallet-base100)}::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{--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-sys-color-base-300);--gds-comp-checkbox-border-color: var(--gds-sys-color-base-900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base-600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base-900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2)}::ng-deep .gds-table label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}::ng-deep .gds-table label.form-control{align-items:flex-start}::ng-deep .gds-table label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus,::ng-deep .gds-table label.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.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.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.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.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);border-left:none;transform:scale(1) rotate(0);opacity:1}::ng-deep .gds-table label.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.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){::ng-deep .gds-table label.form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.form-control.is-invalid{border:none;margin:0}}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i:after,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}::ng-deep .gds-table label.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.form-control input[type=checkbox]:checked~i:after{opacity:1}::ng-deep .gds-table .gds-field-checkbox-wrap .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 .form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::ng-deep .gds-table .gds-field-checkbox-wrap .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-comp-checkbox-container-color);background-color:var(--gds-comp-checkbox-border-color)}::ng-deep .gds-table #thead-checkbox:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--sg-table-header-color)}::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{background-color:var(--gds-comp-checkbox-border-color);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"] }]
+            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"] }]
         }], propDecorators: { customTemplates: [{
                 type: ContentChildren,
                 args: [TableTemplateDirective, { descendants: true }]