npm - @sebgroup/green-angular - Versions diffs - 5.6.1 → 5.7.0 - Mend

@sebgroup/green-angular 5.6.1 → 5.7.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 (23) hide show

package/esm2022/v-angular/table/table.component.mjs CHANGED Viewed

@@ -357,11 +357,11 @@ export class TableComponent {
         row?.setValue(!row.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableComponent, selector: "nggv-table", inputs: { tableColumns: "tableColumns", tableData: "tableData", rowId: "rowId", hasRowSpan: "hasRowSpan", selectable: "selectable", expandable: "expandable", 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 class=\"gds-field-checkbox-wrap\">\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 class=\"gds-item-field-wrap\">\n              <span\n                class=\"chevron-field\"\n                [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n              >\n                <svg\n                  *ngIf=\"item.subItems.length > 0\"\n                  width=\"18\" height=\"14\" 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=\"2.6\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n              {{ item[column.property] }} ({{ item.subItems.length }})\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            [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        </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-base600);--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;border-collapse:collapse;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color);width:100%;border-bottom:none;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-surface);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: var(--gds-sys-color-base);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2)}::ng-deep .gds-table thead tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);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;border-radius:.125rem;--gds-sys-color-focus-outline: $_header-color}::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[aria-sort] .sg-table-sort:after,::ng-deep .gds-table thead tr th.sg-sortable .sg-table-sort:after{content:\"\";background:var(--gds-ref-pallet-base500);-webkit-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-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\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:right;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(--sg-table-border-color);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}@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(--sg-table-border-color)}::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 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.gds-table__numeric-col+:not(.gds-table__numeric-col),::ng-deep .gds-table td.gds-table__numeric-col+:not(.gds-table__numeric-col){padding-left:1rem}::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 td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;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 .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 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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::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: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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::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: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;line-height:1.125rem;padding:0}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i4.TableDirective, selector: "[columnType]", inputs: ["columnType", "sortable", "sortOrder", "value", "thook"] }, { kind: "pipe", type: i5.TrThookPipe, name: "trThook" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableComponent, selector: "nggv-table", inputs: { tableColumns: "tableColumns", tableData: "tableData", rowId: "rowId", hasRowSpan: "hasRowSpan", selectable: "selectable", expandable: "expandable", 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 class=\"gds-field-checkbox-wrap\">\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 class=\"gds-item-field-wrap\">\n              <span\n                class=\"chevron-field\"\n                [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n              >\n                <svg\n                  *ngIf=\"item.subItems.length > 0\"\n                  width=\"18\" height=\"14\" 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=\"2.6\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n              {{ item[column.property] }} ({{ item.subItems.length }})\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            [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        </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-base600);--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;border-collapse:collapse;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color);width:100%;border-bottom:none;--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-base300);--gds-comp-checkbox-border-color: var(--gds-sys-color-base900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base900);--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 thead tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);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;border-radius:.125rem;--gds-sys-color-focus-outline: $_header-color}::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[aria-sort] .sg-table-sort:after,::ng-deep .gds-table thead tr th.sg-sortable .sg-table-sort:after{content:\"\";background:var(--gds-ref-pallet-base500);-webkit-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-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\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:right;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(--sg-table-border-color);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}@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(--sg-table-border-color)}::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 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.gds-table__numeric-col+:not(.gds-table__numeric-col),::ng-deep .gds-table td.gds-table__numeric-col+:not(.gds-table__numeric-col){padding-left:1rem}::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 td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;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 .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 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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::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: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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::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: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;line-height:1.125rem;padding:0}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i4.TableDirective, selector: "[columnType]", inputs: ["columnType", "sortable", "sortOrder", "value", "thook"] }, { kind: "pipe", type: i5.TrThookPipe, name: "trThook" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-table', 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 class=\"gds-field-checkbox-wrap\">\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 class=\"gds-item-field-wrap\">\n              <span\n                class=\"chevron-field\"\n                [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n              >\n                <svg\n                  *ngIf=\"item.subItems.length > 0\"\n                  width=\"18\" height=\"14\" 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=\"2.6\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n              {{ item[column.property] }} ({{ item.subItems.length }})\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            [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        </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-base600);--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;border-collapse:collapse;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color);width:100%;border-bottom:none;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-surface);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: var(--gds-sys-color-base);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2)}::ng-deep .gds-table thead tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);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;border-radius:.125rem;--gds-sys-color-focus-outline: $_header-color}::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[aria-sort] .sg-table-sort:after,::ng-deep .gds-table thead tr th.sg-sortable .sg-table-sort:after{content:\"\";background:var(--gds-ref-pallet-base500);-webkit-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-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\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:right;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(--sg-table-border-color);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}@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(--sg-table-border-color)}::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 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.gds-table__numeric-col+:not(.gds-table__numeric-col),::ng-deep .gds-table td.gds-table__numeric-col+:not(.gds-table__numeric-col){padding-left:1rem}::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 td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;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 .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 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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::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: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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::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: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;line-height:1.125rem;padding:0}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::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}\n"] }]
+            args: [{ selector: 'nggv-table', 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 class=\"gds-field-checkbox-wrap\">\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 class=\"gds-item-field-wrap\">\n              <span\n                class=\"chevron-field\"\n                [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n              >\n                <svg\n                  *ngIf=\"item.subItems.length > 0\"\n                  width=\"18\" height=\"14\" 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=\"2.6\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n              {{ item[column.property] }} ({{ item.subItems.length }})\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            [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        </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-base600);--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;border-collapse:collapse;border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color);width:100%;border-bottom:none;--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-base300);--gds-comp-checkbox-border-color: var(--gds-sys-color-base900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base900);--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 thead tr th{border-top:var(--sg-table-border-width) solid var(--sg-table-border-color);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;border-radius:.125rem;--gds-sys-color-focus-outline: $_header-color}::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[aria-sort] .sg-table-sort:after,::ng-deep .gds-table thead tr th.sg-sortable .sg-table-sort:after{content:\"\";background:var(--gds-ref-pallet-base500);-webkit-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-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\");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:right;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(--sg-table-border-color);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}@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(--sg-table-border-color)}::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 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.gds-table__numeric-col+:not(.gds-table__numeric-col),::ng-deep .gds-table td.gds-table__numeric-col+:not(.gds-table__numeric-col){padding-left:1rem}::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 td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;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 .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 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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::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: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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::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: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;line-height:1.125rem;padding:0}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::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}\n"] }]
         }], propDecorators: { customTemplates: [{
                 type: ContentChildren,
                 args: [TableTemplateDirective, { descendants: true }]

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

@@ -50,11 +50,11 @@ class NggvCheckboxComponent extends NggvBaseControlValueAccessorComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NggvCheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NggvCheckboxComponent, selector: "nggv-checkbox", inputs: { thook: "thook", optionalLabel: "optionalLabel" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\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    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\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      <!-- LABEL -->\n      <ng-template\n        *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n      ></ng-template>\n      <ng-template #basicLabelContentTpl>\n        <!-- to trigger css:empty if no label was added -->\n        <ng-container *ngIf=\"label\">\n          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"gds-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <div\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-checkbox'\"\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  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-surface);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: var(--gds-sys-color-base);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host 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}:host 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}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}:host 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}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host 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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host 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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host 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}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}: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;line-height:1.125rem}:host .form-control:has(input:disabled){cursor:not-allowed}: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}:host i:after{box-sizing:border-box}\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: "14.0.0", version: "17.3.12", type: NggvCheckboxComponent, selector: "nggv-checkbox", inputs: { thook: "thook", optionalLabel: "optionalLabel" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\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    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\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      <!-- LABEL -->\n      <ng-template\n        *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n      ></ng-template>\n      <ng-template #basicLabelContentTpl>\n        <!-- to trigger css:empty if no label was added -->\n        <ng-container *ngIf=\"label\">\n          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"gds-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <div\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-checkbox'\"\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  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--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-base300);--gds-comp-checkbox-border-color: var(--gds-sys-color-base900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base900);--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)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host 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}:host 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}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}:host 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}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host 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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host 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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host 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}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}: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;line-height:1.125rem}:host .form-control:has(input:disabled){cursor:not-allowed}: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}:host i:after{box-sizing:border-box}\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: "17.3.12", ngImport: i0, type: NggvCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nggv-checkbox', template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\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    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\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      <!-- LABEL -->\n      <ng-template\n        *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n      ></ng-template>\n      <ng-template #basicLabelContentTpl>\n        <!-- to trigger css:empty if no label was added -->\n        <ng-container *ngIf=\"label\">\n          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"gds-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <div\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-checkbox'\"\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  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-surface);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: var(--gds-sys-color-base);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host 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}:host 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}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}:host 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}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host 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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host 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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host 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}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}: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;line-height:1.125rem}:host .form-control:has(input:disabled){cursor:not-allowed}: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}:host i:after{box-sizing:border-box}\n"] }]
+            args: [{ selector: 'nggv-checkbox', template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"nggv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\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    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\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      <!-- LABEL -->\n      <ng-template\n        *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n      ></ng-template>\n      <ng-template #basicLabelContentTpl>\n        <!-- to trigger css:empty if no label was added -->\n        <ng-container *ngIf=\"label\">\n          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"gds-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <div\n      class=\"form-info form-info--error\"\n      [attr.for]=\"id + '-checkbox'\"\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  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--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-base300);--gds-comp-checkbox-border-color: var(--gds-sys-color-base900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base900);--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)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host 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}:host 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}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}:host 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}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host 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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host 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;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host 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}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}: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;line-height:1.125rem}:host .form-control:has(input:disabled){cursor:not-allowed}: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}:host i:after{box-sizing:border-box}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Self
                 }, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sebgroup-green-angular-src-v-angular-checkbox.mjs","sources":["../../../../libs/angular/src/v-angular/checkbox/checkbox.component.ts","../../../../libs/angular/src/v-angular/checkbox/checkbox.component.html","../../../../libs/angular/src/v-angular/checkbox/checkbox.module.ts","../../../../libs/angular/src/v-angular/checkbox/sebgroup-green-angular-src-v-angular-checkbox.ts"],"sourcesContent":["import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport {\n ChangeDetectorRef,\n Component,\n EventEmitter,\n HostBinding,\n Inject,\n Input,\n Optional,\n Output,\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 Checkboxes allow a user to toggle an option on or off, or make multiple choices in a set of available options.\n * https://designlibrary.sebgroup.com/components/component-checkbox\n /\n@Component({\n selector: 'nggv-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n})\nexport class NggvCheckboxComponent extends NggvBaseControlValueAccessorComponent {\n /* Special property used for selecting DOM elements during automated UI testing. /\n @HostBinding('attr.data-thook') @Input() thook: string \| null \| undefined =\n 'checkbox'\n @Input() optionalLabel = 'Optional'\n\n @Output() readonly valueChange: EventEmitter<string> =\n new EventEmitter<string>()\n\n constructor(\n @Self()\n @Optional()\n 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 /* @internal /\n onInputChange(event: Event) {\n event.stopPropagation()\n if (this.disabled) return\n this.state = !this.state\n this.onTouched()\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: (checked: any) => any) {\n // Override default to update registry\n this.onChange = (checked) => {\n const output = checked ? this.value : null\n fn(output)\n this.valueChange.emit(output)\n }\n }\n}\n","<!-- LOCKED INPUT -->\n<div ngIf=\"locked && state\">\n <div\n [id]=\"id + '-checkbox'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n <ng-container ngIf=\"!labelContentTpl\">\n {{ label }}\n </ng-container>\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 <!-- CHECKBOX FIELD -->\n <label\n [id]=\"id + '-label'\"\n [attr.for]=\"id + '-checkbox'\"\n class=\"form-control\"\n transloco=\"let t; read: scope\"\n >\n <input\n #input\n type=\"checkbox\"\n [id]=\"id + '-checkbox'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required\"\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 <!-- LABEL -->\n <ng-template\n ngTemplateOutlet=\"labelContentTpl \|\| basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container ngIf=\"label\">\n <span\n ngIf=\"\n optional === true \|\| (required !== true && optional !== false)\n \"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n <span>{{ label }}</span>\n </ng-container>\n </ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <ng-container transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-checkbox'\"\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 <!-- CHILDREN -->\n <ng-content></ng-content>\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 { NggvCheckboxComponent } from './checkbox.component'\n\n@NgModule({\n declarations: [NggvCheckboxComponent],\n imports: [CommonModule, NggvI18nModule, NggCoreWrapperModule],\n exports: [NggvCheckboxComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvCheckboxModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkBA;;;AAGG;AAMG,MAAO,qBAAsB,SAAQ,qCAAqC,CAAA;AAS9E,IAAA,WAAA,CAGS,SAAoB,EAGjB,cAA8B,EAC9B,GAAsB,EAAA;AAEhC,QAAA,KAAK,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,CAAC,CAAA;QAN9B,IAAS,CAAA,SAAA,GAAT,SAAS,CAAW;QAGjB,IAAc,CAAA,cAAA,GAAd,cAAc,CAAgB;QAC9B,IAAG,CAAA,GAAA,GAAH,GAAG,CAAmB;;QAdO,IAAK,CAAA,KAAA,GAC5C,UAAU,CAAA;QACH,IAAa,CAAA,aAAA,GAAG,UAAU,CAAA;AAEhB,QAAA,IAAA,CAAA,WAAW,GAC5B,IAAI,YAAY,EAAU,CAAA;KAY3B;;AAGD,IAAA,aAAa,CAAC,KAAY,EAAA;QACxB,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAM;AACzB,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAA;QACxB,IAAI,CAAC,SAAS,EAAE,CAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KAC1B;;AAGD,IAAA,UAAU,CAAC,KAAU,EAAA;;QAEnB,KAAK,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAA;KACvC;;AAGD,IAAA,gBAAgB,CAAC,EAAyB,EAAA;;AAExC,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,OAAO,KAAI;AAC1B,YAAA,MAAM,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YAC1C,EAAE,CAAC,MAAM,CAAC,CAAA;AACV,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;AAC/B,SAAC,CAAA;KACF;AA5CU,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,uEActB,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAdd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,4OC3BlC,4vFAoGA,EAAA,MAAA,EAAA,CAAA,~~q6KAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FDzEa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBALjC,SAAS;+BACE,eAAe,EAAA,QAAA,EAAA,4vFAAA,EAAA,MAAA,EAAA,CAAA,~~q6KAAA~~,CAAA,EAAA,CAAA;;0BActB,IAAI;;0BACJ,QAAQ;;0BAER,QAAQ;;0BACR,MAAM;2BAAC,eAAe,CAAA;yEAZgB,KAAK,EAAA,CAAA;sBAA7C,WAAW;uBAAC,iBAAiB,CAAA;;sBAAG,KAAK;gBAE7B,aAAa,EAAA,CAAA;sBAArB,KAAK;gBAEa,WAAW,EAAA,CAAA;sBAA7B,MAAM;;;MEpBI,kBAAkB,CAAA;+GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;gHAAlB,kBAAkB,EAAA,YAAA,EAAA,CALd,qBAAqB,CAC1B,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,cAAc,EAAE,oBAAoB,CAAA,EAAA,OAAA,EAAA,CAClD,qBAAqB,CAAA,EAAA,CAAA,CAAA,EAAA;AAGpB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,EAJnB,OAAA,EAAA,CAAA,YAAY,EAAE,cAAc,EAAE,oBAAoB,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAIjD,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,qBAAqB,CAAC;AACrC,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,oBAAoB,CAAC;oBAC7D,OAAO,EAAE,CAAC,qBAAqB,CAAC;oBAChC,OAAO,EAAE,CAAC,sBAAsB,CAAC;AAClC,iBAAA,CAAA;;;ACZD;;AAEG;;;;"}
1	+ {"version":3,"file":"sebgroup-green-angular-src-v-angular-checkbox.mjs","sources":["../../../../libs/angular/src/v-angular/checkbox/checkbox.component.ts","../../../../libs/angular/src/v-angular/checkbox/checkbox.component.html","../../../../libs/angular/src/v-angular/checkbox/checkbox.module.ts","../../../../libs/angular/src/v-angular/checkbox/sebgroup-green-angular-src-v-angular-checkbox.ts"],"sourcesContent":["import '@sebgroup/green-core/components/icon/icons/triangle-exclamation.js'\n\nimport {\n ChangeDetectorRef,\n Component,\n EventEmitter,\n HostBinding,\n Inject,\n Input,\n Optional,\n Output,\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 Checkboxes allow a user to toggle an option on or off, or make multiple choices in a set of available options.\n * https://designlibrary.sebgroup.com/components/component-checkbox\n /\n@Component({\n selector: 'nggv-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss'],\n})\nexport class NggvCheckboxComponent extends NggvBaseControlValueAccessorComponent {\n /* Special property used for selecting DOM elements during automated UI testing. /\n @HostBinding('attr.data-thook') @Input() thook: string \| null \| undefined =\n 'checkbox'\n @Input() optionalLabel = 'Optional'\n\n @Output() readonly valueChange: EventEmitter<string> =\n new EventEmitter<string>()\n\n constructor(\n @Self()\n @Optional()\n 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 /* @internal /\n onInputChange(event: Event) {\n event.stopPropagation()\n if (this.disabled) return\n this.state = !this.state\n this.onTouched()\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: (checked: any) => any) {\n // Override default to update registry\n this.onChange = (checked) => {\n const output = checked ? this.value : null\n fn(output)\n this.valueChange.emit(output)\n }\n }\n}\n","<!-- LOCKED INPUT -->\n<div ngIf=\"locked && state\">\n <div\n [id]=\"id + '-checkbox'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n <ng-container ngIf=\"!labelContentTpl\">\n {{ label }}\n </ng-container>\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 <!-- CHECKBOX FIELD -->\n <label\n [id]=\"id + '-label'\"\n [attr.for]=\"id + '-checkbox'\"\n class=\"form-control\"\n transloco=\"let t; read: scope\"\n >\n <input\n #input\n type=\"checkbox\"\n [id]=\"id + '-checkbox'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required\"\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 <!-- LABEL -->\n <ng-template\n ngTemplateOutlet=\"labelContentTpl \|\| basicLabelContentTpl\"\n ></ng-template>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container ngIf=\"label\">\n <span\n ngIf=\"\n optional === true \|\| (required !== true && optional !== false)\n \"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n <span>{{ label }}</span>\n </ng-container>\n </ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <ng-container transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-checkbox'\"\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 <!-- CHILDREN -->\n <ng-content></ng-content>\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 { NggvCheckboxComponent } from './checkbox.component'\n\n@NgModule({\n declarations: [NggvCheckboxComponent],\n imports: [CommonModule, NggvI18nModule, NggCoreWrapperModule],\n exports: [NggvCheckboxComponent],\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n})\nexport class NggvCheckboxModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkBA;;;AAGG;AAMG,MAAO,qBAAsB,SAAQ,qCAAqC,CAAA;AAS9E,IAAA,WAAA,CAGS,SAAoB,EAGjB,cAA8B,EAC9B,GAAsB,EAAA;AAEhC,QAAA,KAAK,CAAC,SAAS,EAAE,cAAc,EAAE,GAAG,CAAC,CAAA;QAN9B,IAAS,CAAA,SAAA,GAAT,SAAS,CAAW;QAGjB,IAAc,CAAA,cAAA,GAAd,cAAc,CAAgB;QAC9B,IAAG,CAAA,GAAA,GAAH,GAAG,CAAmB;;QAdO,IAAK,CAAA,KAAA,GAC5C,UAAU,CAAA;QACH,IAAa,CAAA,aAAA,GAAG,UAAU,CAAA;AAEhB,QAAA,IAAA,CAAA,WAAW,GAC5B,IAAI,YAAY,EAAU,CAAA;KAY3B;;AAGD,IAAA,aAAa,CAAC,KAAY,EAAA;QACxB,KAAK,CAAC,eAAe,EAAE,CAAA;QACvB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAM;AACzB,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAA;QACxB,IAAI,CAAC,SAAS,EAAE,CAAA;AAChB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KAC1B;;AAGD,IAAA,UAAU,CAAC,KAAU,EAAA;;QAEnB,KAAK,CAAC,UAAU,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAA;KACvC;;AAGD,IAAA,gBAAgB,CAAC,EAAyB,EAAA;;AAExC,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,OAAO,KAAI;AAC1B,YAAA,MAAM,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YAC1C,EAAE,CAAC,MAAM,CAAC,CAAA;AACV,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;AAC/B,SAAC,CAAA;KACF;AA5CU,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,uEActB,eAAe,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAdd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,4OC3BlC,4vFAoGA,EAAA,MAAA,EAAA,CAAA,07KAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,uBAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FDzEa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBALjC,SAAS;+BACE,eAAe,EAAA,QAAA,EAAA,4vFAAA,EAAA,MAAA,EAAA,CAAA,07KAAA,CAAA,EAAA,CAAA;;0BActB,IAAI;;0BACJ,QAAQ;;0BAER,QAAQ;;0BACR,MAAM;2BAAC,eAAe,CAAA;yEAZgB,KAAK,EAAA,CAAA;sBAA7C,WAAW;uBAAC,iBAAiB,CAAA;;sBAAG,KAAK;gBAE7B,aAAa,EAAA,CAAA;sBAArB,KAAK;gBAEa,WAAW,EAAA,CAAA;sBAA7B,MAAM;;;MEpBI,kBAAkB,CAAA;+GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;gHAAlB,kBAAkB,EAAA,YAAA,EAAA,CALd,qBAAqB,CAC1B,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,cAAc,EAAE,oBAAoB,CAAA,EAAA,OAAA,EAAA,CAClD,qBAAqB,CAAA,EAAA,CAAA,CAAA,EAAA;AAGpB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,EAJnB,OAAA,EAAA,CAAA,YAAY,EAAE,cAAc,EAAE,oBAAoB,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAIjD,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAN9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,qBAAqB,CAAC;AACrC,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,oBAAoB,CAAC;oBAC7D,OAAO,EAAE,CAAC,qBAAqB,CAAC;oBAChC,OAAO,EAAE,CAAC,sBAAsB,CAAC;AAClC,iBAAA,CAAA;;;ACZD;;AAEG;;;;"}