@sebgroup/green-angular 8.1.0 → 9.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/sebgroup-green-angular-src-lib-accordion.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-lib-accordion.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-badge.mjs +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-badge.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-button.mjs +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-button.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-cell-table.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-lib-cell-table.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-in-page-wizard.mjs +7 -5
- package/fesm2022/sebgroup-green-angular-src-lib-in-page-wizard.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-modal.mjs +14 -14
- package/fesm2022/sebgroup-green-angular-src-lib-modal.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-pagination.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-lib-pagination.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-slider.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-lib-slider.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-lib-sortable-list.mjs +10 -6
- package/fesm2022/sebgroup-green-angular-src-lib-sortable-list.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-alert.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-alert.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-breadcrumbs.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-breadcrumbs.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-button.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-button.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-card.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-card.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-checkbox.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-checkbox.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-datepicker.mjs +230 -211
- package/fesm2022/sebgroup-green-angular-src-v-angular-datepicker.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs +6 -6
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-info-circle.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-info-circle.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs +6 -6
- package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-pagination.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-pagination.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-radio.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-radio.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-table.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-table.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-tabs.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-tabs.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-textarea.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-textarea.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-v-angular.mjs +262 -243
- package/fesm2022/sebgroup-green-angular-v-angular.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular.mjs +40 -36
- package/fesm2022/sebgroup-green-angular.mjs.map +1 -1
- package/lib/button/button.component.d.ts +1 -1
- package/lib/in-page-wizard/in-page-wizard.module.d.ts +2 -1
- package/lib/sortable-list/sortable-list.component.d.ts +1 -0
- package/lib/sortable-list/sortable-list.module.d.ts +2 -1
- package/package.json +2 -2
- package/src/lib/button/button.component.d.ts +1 -1
- package/src/lib/in-page-wizard/in-page-wizard.module.d.ts +2 -1
- package/src/lib/sortable-list/sortable-list.component.d.ts +1 -0
- package/src/lib/sortable-list/sortable-list.module.d.ts +2 -1
- package/src/v-angular/datepicker/components/calendar/calendar.component.d.ts +1 -1
- package/src/v-angular/datepicker/components/date-input/date-input.component.d.ts +1 -1
- package/src/v-angular/datepicker/components/datepicker/datepicker.component.d.ts +1 -1
- package/src/v-angular/datepicker/date-control-value-accessor/date-control-value-accessor.component.d.ts +1 -1
- package/src/v-angular/datepicker/datepicker.utils.d.ts +7 -0
- package/v-angular/datepicker/components/calendar/calendar.component.d.ts +1 -1
- package/v-angular/datepicker/components/date-input/date-input.component.d.ts +1 -1
- package/v-angular/datepicker/components/datepicker/datepicker.component.d.ts +1 -1
- package/v-angular/datepicker/date-control-value-accessor/date-control-value-accessor.component.d.ts +1 -1
- package/v-angular/datepicker/datepicker.utils.d.ts +7 -0
|
@@ -139,11 +139,11 @@ class AlertComponent {
|
|
|
139
139
|
this.clickAction.emit(e);
|
|
140
140
|
}
|
|
141
141
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
142
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: AlertComponent, isStandalone: false, selector: "nggv-alert", inputs: { type: "type", title: "title", body: "body", linkText: "linkText", linkHref: "linkHref", actionText: "actionText", closable: "closable" }, outputs: { closeAlert: "closeAlert", clickLink: "clickLink", clickAction: "clickAction" }, ngImport: i0, template: "<div class=\"alert-container\" role=\"alert\" [ngClass]=\"type\">\n <ng-container [ngSwitch]=\"type\">\n <ng-container\n *ngSwitchCase=\"'success'\"\n [ngTemplateOutlet]=\"checkMark\"\n ></ng-container>\n <ng-container\n *ngSwitchCase=\"'information'\"\n [ngTemplateOutlet]=\"infoSquare\"\n ></ng-container>\n <ng-container\n *ngSwitchDefault\n [ngTemplateOutlet]=\"exclamationSquare\"\n ></ng-container>\n </ng-container>\n <div>\n <h3 *ngIf=\"title\">{{ title }}</h3>\n <p *ngIf=\"body\">\n {{ body }} <a\n *ngIf=\"linkText\"\n [href]=\"linkHref\"\n (click)=\"onLink($event)\"\n >{{ linkText }}</a\n >\n </p>\n </div>\n <button\n *ngIf=\"closable && !actionText\"\n class=\"close\"\n type=\"button\"\n (click)=\"onClose($event)\"\n >\n <i></i>\n </button>\n <footer *ngIf=\"actionText && !closable\">\n <button type=\"button\" (click)=\"onAction($event)\">\n {{ actionText }}\n </button>\n </footer>\n</div>\n\n<ng-template #checkMark>\n <i>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </i>\n</ng-template>\n<ng-template #infoSquare>\n <i>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n fill=\"#333333\"\n />\n </svg>\n </i>\n</ng-template>\n<ng-template #exclamationSquare>\n <i>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n</ng-template>\n", styles: ["div[role=alert],.alert-ribbon{--background: hsl(var(--sg-intent-neutral-hsl));--color: var(--text-primary-color);--border-color: var(--text-primary-color);background:var(--background);border-radius:0;border:solid 1px var(--border-color);color:var(--color);padding:1rem;display:inline-grid;grid-template-columns:auto 1fr auto;grid-template-rows:min-content 1fr;grid-template-areas:\"icon content dismiss\" \"footer footer footer\"}@media(min-width:36em){div[role=alert],.alert-ribbon{grid-template-areas:\"icon content dismiss\" \"icon content footer\"}}div[role=alert]>i,.alert-ribbon>i{display:block;width:1.5rem;height:1.5rem;margin-inline-end:.5rem;grid-area:icon}div[role=alert]>i svg>*,.alert-ribbon>i svg>*{fill:var(--text-primary-color)}div[role=alert]>div:not(.alert-ribbon__footer),div[role=alert] .alert-ribbon__content,.alert-ribbon>div:not(.alert-ribbon__footer),.alert-ribbon .alert-ribbon__content{grid-area:content;max-width:75ch}div[role=alert]>div:not(.alert-ribbon__footer):has(+button),div[role=alert] .alert-ribbon__content:has(+button),.alert-ribbon>div:not(.alert-ribbon__footer):has(+button),.alert-ribbon .alert-ribbon__content:has(+button){padding-right:.5rem}div[role=alert]>div:not(.alert-ribbon__footer)>h1,div[role=alert]>div:not(.alert-ribbon__footer) h2,div[role=alert]>div:not(.alert-ribbon__footer) h3,div[role=alert]>div:not(.alert-ribbon__footer) h4,div[role=alert]>div:not(.alert-ribbon__footer) h5,div[role=alert]>div:not(.alert-ribbon__footer) .header,div[role=alert] .alert-ribbon__content>h1,div[role=alert] .alert-ribbon__content h2,div[role=alert] .alert-ribbon__content h3,div[role=alert] .alert-ribbon__content h4,div[role=alert] .alert-ribbon__content h5,div[role=alert] .alert-ribbon__content .header,.alert-ribbon>div:not(.alert-ribbon__footer)>h1,.alert-ribbon>div:not(.alert-ribbon__footer) h2,.alert-ribbon>div:not(.alert-ribbon__footer) h3,.alert-ribbon>div:not(.alert-ribbon__footer) h4,.alert-ribbon>div:not(.alert-ribbon__footer) h5,.alert-ribbon>div:not(.alert-ribbon__footer) .header,.alert-ribbon .alert-ribbon__content>h1,.alert-ribbon .alert-ribbon__content h2,.alert-ribbon .alert-ribbon__content h3,.alert-ribbon .alert-ribbon__content h4,.alert-ribbon .alert-ribbon__content h5,.alert-ribbon .alert-ribbon__content .header{display:inline;font-size:1rem;font-weight:500;line-height:1.5rem;margin-right:.25rem}div[role=alert]>div:not(.alert-ribbon__footer)>p,div[role=alert] .alert-ribbon__content>p,.alert-ribbon>div:not(.alert-ribbon__footer)>p,.alert-ribbon .alert-ribbon__content>p{display:inline;line-height:1.5rem;margin-bottom:0;margin-top:0}div[role=alert]>div:not(.alert-ribbon__footer)>p a,div[role=alert]>div:not(.alert-ribbon__footer)>p a:visited:not(.button,[role=tab]),div[role=alert] .alert-ribbon__content>p a,div[role=alert] .alert-ribbon__content>p a:visited:not(.button,[role=tab]),.alert-ribbon>div:not(.alert-ribbon__footer)>p a,.alert-ribbon>div:not(.alert-ribbon__footer)>p a:visited:not(.button,[role=tab]),.alert-ribbon .alert-ribbon__content>p a,.alert-ribbon .alert-ribbon__content>p a:visited:not(.button,[role=tab]){color:var(--color)}div[role=alert]>div:not(.alert-ribbon__footer)>p a:hover,div[role=alert]>div:not(.alert-ribbon__footer)>p a:visited:not(.button,[role=tab]):hover,div[role=alert] .alert-ribbon__content>p a:hover,div[role=alert] .alert-ribbon__content>p a:visited:not(.button,[role=tab]):hover,.alert-ribbon>div:not(.alert-ribbon__footer)>p a:hover,.alert-ribbon>div:not(.alert-ribbon__footer)>p a:visited:not(.button,[role=tab]):hover,.alert-ribbon .alert-ribbon__content>p a:hover,.alert-ribbon .alert-ribbon__content>p a:visited:not(.button,[role=tab]):hover{color:var(--color)}div[role=alert] button.close,.alert-ribbon button.close{grid-area:dismiss;justify-self:flex-end;margin:-.5rem -.375rem 0 .375rem;background-color:transparent;--background-hsl: var(--sg-hsl-black);--color: var(--text-primary-color)}div[role=alert] button.close>i:after,div[role=alert] button.close>i:before,.alert-ribbon button.close>i:after,.alert-ribbon button.close>i:before{background-color:var(--color)}div[role=alert] button.close:hover>i:after,div[role=alert] button.close:hover>i:before,.alert-ribbon button.close:hover>i:after,.alert-ribbon button.close:hover>i:before{background-color:var(--color)}@media(min-width:36em){div[role=alert] button.close+footer,div[role=alert] button.close .alert-ribbon__footer,.alert-ribbon button.close+footer,.alert-ribbon button.close .alert-ribbon__footer{margin-top:.75rem}}div[role=alert] a:link:focus:not(:focus-visible),.alert-ribbon a:link:focus:not(:focus-visible){box-shadow:none;outline:0}div[role=alert] a:link:focus,div[role=alert] a:link:focus-within,.alert-ribbon a:link:focus,.alert-ribbon a:link:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}div[role=alert] a:link:not(.button,[aria-disabled]),.alert-ribbon a:link:not(.button,[aria-disabled]){color:var(--text-primary-color)}div[role=alert] a:link:not(.button,[aria-disabled]):hover,div[role=alert] a:link:not(.button,[aria-disabled]):focus,div[role=alert] a:link:not(.button,[aria-disabled]):visited,.alert-ribbon a:link:not(.button,[aria-disabled]):hover,.alert-ribbon a:link:not(.button,[aria-disabled]):focus,.alert-ribbon a:link:not(.button,[aria-disabled]):visited{color:currentColor}div[role=alert] a,.alert-ribbon a{text-decoration:underline!important;transition:opacity .3s ease-in-out}div[role=alert]>footer,div[role=alert] .alert-ribbon__footer,.alert-ribbon>footer,.alert-ribbon .alert-ribbon__footer{grid-area:footer;align-self:end}@media(max-width:35.98em){div[role=alert]>footer,div[role=alert] .alert-ribbon__footer,.alert-ribbon>footer,.alert-ribbon .alert-ribbon__footer{margin-top:.75rem}}@media(min-width:36em){div[role=alert]>footer,div[role=alert] .alert-ribbon__footer,.alert-ribbon>footer,.alert-ribbon .alert-ribbon__footer{margin-left:.75rem}}div[role=alert]>footer>a,div[role=alert] .alert-ribbon__footer>a,.alert-ribbon>footer>a,.alert-ribbon .alert-ribbon__footer>a{display:flex}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{opacity:.9}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){border-color:#333;color:#333;--color: rgb(51, 51, 51)}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){min-height:2rem;padding:.4375rem .75rem;line-height:1.125rem}@media(max-width:35.98em){div[role=alert]>footer>a+a,div[role=alert]>footer>a+button,div[role=alert]>footer>a+.button,div[role=alert]>footer>button+a,div[role=alert]>footer>button+button,div[role=alert]>footer>button+.button,div[role=alert]>footer>button[type=button]+a,div[role=alert]>footer>button[type=button]+button,div[role=alert]>footer>button[type=button]+.button,div[role=alert]>footer>.button+a,div[role=alert]>footer>.button+button,div[role=alert]>footer>.button+.button,div[role=alert] .alert-ribbon__footer>a+a,div[role=alert] .alert-ribbon__footer>a+button,div[role=alert] .alert-ribbon__footer>a+.button,div[role=alert] .alert-ribbon__footer>button+a,div[role=alert] .alert-ribbon__footer>button+button,div[role=alert] .alert-ribbon__footer>button+.button,div[role=alert] .alert-ribbon__footer>button[type=button]+a,div[role=alert] .alert-ribbon__footer>button[type=button]+button,div[role=alert] .alert-ribbon__footer>button[type=button]+.button,div[role=alert] .alert-ribbon__footer>.button+a,div[role=alert] .alert-ribbon__footer>.button+button,div[role=alert] .alert-ribbon__footer>.button+.button,.alert-ribbon>footer>a+a,.alert-ribbon>footer>a+button,.alert-ribbon>footer>a+.button,.alert-ribbon>footer>button+a,.alert-ribbon>footer>button+button,.alert-ribbon>footer>button+.button,.alert-ribbon>footer>button[type=button]+a,.alert-ribbon>footer>button[type=button]+button,.alert-ribbon>footer>button[type=button]+.button,.alert-ribbon>footer>.button+a,.alert-ribbon>footer>.button+button,.alert-ribbon>footer>.button+.button,.alert-ribbon .alert-ribbon__footer>a+a,.alert-ribbon .alert-ribbon__footer>a+button,.alert-ribbon .alert-ribbon__footer>a+.button,.alert-ribbon .alert-ribbon__footer>button+a,.alert-ribbon .alert-ribbon__footer>button+button,.alert-ribbon .alert-ribbon__footer>button+.button,.alert-ribbon .alert-ribbon__footer>button[type=button]+a,.alert-ribbon .alert-ribbon__footer>button[type=button]+button,.alert-ribbon .alert-ribbon__footer>button[type=button]+.button,.alert-ribbon .alert-ribbon__footer>.button+a,.alert-ribbon .alert-ribbon__footer>.button+button,.alert-ribbon .alert-ribbon__footer>.button+.button{margin-top:.75rem}}@media(min-width:36em){div[role=alert]>footer>a+a,div[role=alert]>footer>a+button,div[role=alert]>footer>a+.button,div[role=alert]>footer>button+a,div[role=alert]>footer>button+button,div[role=alert]>footer>button+.button,div[role=alert]>footer>button[type=button]+a,div[role=alert]>footer>button[type=button]+button,div[role=alert]>footer>button[type=button]+.button,div[role=alert]>footer>.button+a,div[role=alert]>footer>.button+button,div[role=alert]>footer>.button+.button,div[role=alert] .alert-ribbon__footer>a+a,div[role=alert] .alert-ribbon__footer>a+button,div[role=alert] .alert-ribbon__footer>a+.button,div[role=alert] .alert-ribbon__footer>button+a,div[role=alert] .alert-ribbon__footer>button+button,div[role=alert] .alert-ribbon__footer>button+.button,div[role=alert] .alert-ribbon__footer>button[type=button]+a,div[role=alert] .alert-ribbon__footer>button[type=button]+button,div[role=alert] .alert-ribbon__footer>button[type=button]+.button,div[role=alert] .alert-ribbon__footer>.button+a,div[role=alert] .alert-ribbon__footer>.button+button,div[role=alert] .alert-ribbon__footer>.button+.button,.alert-ribbon>footer>a+a,.alert-ribbon>footer>a+button,.alert-ribbon>footer>a+.button,.alert-ribbon>footer>button+a,.alert-ribbon>footer>button+button,.alert-ribbon>footer>button+.button,.alert-ribbon>footer>button[type=button]+a,.alert-ribbon>footer>button[type=button]+button,.alert-ribbon>footer>button[type=button]+.button,.alert-ribbon>footer>.button+a,.alert-ribbon>footer>.button+button,.alert-ribbon>footer>.button+.button,.alert-ribbon .alert-ribbon__footer>a+a,.alert-ribbon .alert-ribbon__footer>a+button,.alert-ribbon .alert-ribbon__footer>a+.button,.alert-ribbon .alert-ribbon__footer>button+a,.alert-ribbon .alert-ribbon__footer>button+button,.alert-ribbon .alert-ribbon__footer>button+.button,.alert-ribbon .alert-ribbon__footer>button[type=button]+a,.alert-ribbon .alert-ribbon__footer>button[type=button]+button,.alert-ribbon .alert-ribbon__footer>button[type=button]+.button,.alert-ribbon .alert-ribbon__footer>.button+a,.alert-ribbon .alert-ribbon__footer>.button+button,.alert-ribbon .alert-ribbon__footer>.button+.button{margin-left:.75rem}}div[role=alert].info,.alert-ribbon.info{--background: hsl(var(--sg-intent-info-hsl));--color: hsl(var(--sg-intent-info-hsl-contrast));--border-color: transparent;--gds-sys-color-focus-outline: hsl(var(--sg-intent-info-hsl-contrast))}div[role=alert].info .close,.alert-ribbon.info .close{--color: hsl(var(--sg-intent-info-hsl-contrast))}div[role=alert].info i>svg>*,.alert-ribbon.info i>svg>*{fill:hsl(var(--sg-intent-info-hsl-contrast))}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{opacity:.9}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff!important}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){border-color:#fff;color:#fff;--color: rgb(255, 255, 255)}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}div[role=alert].info a:link:focus:not(:focus-visible),.alert-ribbon.info a:link:focus:not(:focus-visible){box-shadow:none;outline:0}div[role=alert].info a:link:focus,div[role=alert].info a:link:focus-within,.alert-ribbon.info a:link:focus,.alert-ribbon.info a:link:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}div[role=alert].info a:link:not(.button,[aria-disabled]),.alert-ribbon.info a:link:not(.button,[aria-disabled]){color:hsl(var(--sg-intent-info-hsl-contrast))}div[role=alert].info a:link:not(.button,[aria-disabled]):hover,div[role=alert].info a:link:not(.button,[aria-disabled]):focus,div[role=alert].info a:link:not(.button,[aria-disabled]):visited,.alert-ribbon.info a:link:not(.button,[aria-disabled]):hover,.alert-ribbon.info a:link:not(.button,[aria-disabled]):focus,.alert-ribbon.info a:link:not(.button,[aria-disabled]):visited{color:currentColor}div[role=alert].success,.alert-ribbon.success{--background: hsl(var(--sg-intent-success-hsl));--color: var(--gds-sys-color-text-inverted);--border-color: transparent;--gds-sys-color-focus-outline: var(--gds-sys-color-text-inverted)}div[role=alert].success .close,.alert-ribbon.success .close{--color: var(--gds-sys-color-text-inverted)}div[role=alert].success i>svg>*,.alert-ribbon.success i>svg>*{fill:var(--gds-sys-color-text-inverted)}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{opacity:.9}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff!important}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){border-color:#fff;color:#fff;--color: rgb(255, 255, 255)}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}div[role=alert].success a:link:focus:not(:focus-visible),.alert-ribbon.success a:link:focus:not(:focus-visible){box-shadow:none;outline:0}div[role=alert].success a:link:focus,div[role=alert].success a:link:focus-within,.alert-ribbon.success a:link:focus,.alert-ribbon.success a:link:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}div[role=alert].success a:link:not(.button,[aria-disabled]),.alert-ribbon.success a:link:not(.button,[aria-disabled]){color:var(--gds-sys-color-text-inverted)}div[role=alert].success a:link:not(.button,[aria-disabled]):hover,div[role=alert].success a:link:not(.button,[aria-disabled]):focus,div[role=alert].success a:link:not(.button,[aria-disabled]):visited,.alert-ribbon.success a:link:not(.button,[aria-disabled]):hover,.alert-ribbon.success a:link:not(.button,[aria-disabled]):focus,.alert-ribbon.success a:link:not(.button,[aria-disabled]):visited{color:currentColor}div[role=alert].warning,.alert-ribbon.warning{--background: hsl(var(--sg-intent-warning-hsl));--color: hsl(var(--sg-intent-warning-hsl-contrast));--border-color: transparent;--gds-sys-color-focus-outline: hsl(var(--sg-intent-warning-hsl-contrast))}div[role=alert].warning .close,.alert-ribbon.warning .close{--color: hsl(var(--sg-intent-warning-hsl-contrast))}div[role=alert].warning i>svg>*,.alert-ribbon.warning i>svg>*{fill:hsl(var(--sg-intent-warning-hsl-contrast))}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{opacity:.9}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){border-color:#333;color:#333;--color: rgb(51, 51, 51)}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}div[role=alert].warning a:link:focus:not(:focus-visible),.alert-ribbon.warning a:link:focus:not(:focus-visible){box-shadow:none;outline:0}div[role=alert].warning a:link:focus,div[role=alert].warning a:link:focus-within,.alert-ribbon.warning a:link:focus,.alert-ribbon.warning a:link:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}div[role=alert].warning a:link:not(.button,[aria-disabled]),.alert-ribbon.warning a:link:not(.button,[aria-disabled]){color:hsl(var(--sg-intent-warning-hsl-contrast))}div[role=alert].warning a:link:not(.button,[aria-disabled]):hover,div[role=alert].warning a:link:not(.button,[aria-disabled]):focus,div[role=alert].warning a:link:not(.button,[aria-disabled]):visited,.alert-ribbon.warning a:link:not(.button,[aria-disabled]):hover,.alert-ribbon.warning a:link:not(.button,[aria-disabled]):focus,.alert-ribbon.warning a:link:not(.button,[aria-disabled]):visited{color:currentColor}div[role=alert].danger,.alert-ribbon.danger{--background: hsl(var(--sg-intent-critical-hsl));--color: hsl(var(--sg-intent-critical-hsl-contrast));--border-color: transparent;--gds-sys-color-focus-outline: hsl(var(--sg-intent-critical-hsl-contrast))}div[role=alert].danger .close,.alert-ribbon.danger .close{--color: hsl(var(--sg-intent-critical-hsl-contrast))}div[role=alert].danger i>svg>*,.alert-ribbon.danger i>svg>*{fill:hsl(var(--sg-intent-critical-hsl-contrast))}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{opacity:.9}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff!important}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){border-color:#fff;color:#fff;--color: rgb(255, 255, 255)}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}div[role=alert].danger a:link:focus:not(:focus-visible),.alert-ribbon.danger a:link:focus:not(:focus-visible){box-shadow:none;outline:0}div[role=alert].danger a:link:focus,div[role=alert].danger a:link:focus-within,.alert-ribbon.danger a:link:focus,.alert-ribbon.danger a:link:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}div[role=alert].danger a:link:not(.button,[aria-disabled]),.alert-ribbon.danger a:link:not(.button,[aria-disabled]){color:hsl(var(--sg-intent-critical-hsl-contrast))}div[role=alert].danger a:link:not(.button,[aria-disabled]):hover,div[role=alert].danger a:link:not(.button,[aria-disabled]):focus,div[role=alert].danger a:link:not(.button,[aria-disabled]):visited,.alert-ribbon.danger a:link:not(.button,[aria-disabled]):hover,.alert-ribbon.danger a:link:not(.button,[aria-disabled]):focus,.alert-ribbon.danger a:link:not(.button,[aria-disabled]):visited{color:currentColor}.close{font-size:0;background:var(--gds-sys-color-surface);border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem}@media(hover:none)and (pointer:coarse){.close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}.close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-base)}.close:not(:disabled):not(.disabled)>div:after,.close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}.close:focus:not(:focus-visible){box-shadow:none;outline:0}.close:focus,.close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}.close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}.close>i:after,.close>i:before{background:var(--gds-sys-color-font);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}.close>i:after{transform:rotate(45deg)}.close>i:before{transform:rotate(-45deg)}.close>svg path{fill:var(--gds-sys-color-font)}@media(min-width:48em){.close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-font) 10%,transparent)}.close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-font) 20%,transparent)}}:host{--sg-intent-neutral-hsl: 0deg, 0%, 91.3725490196%;--sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;--sg-intent-success-hsl-contrast: 0deg, 0%, 100%;--sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;--sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;--sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;--sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;--gds-ref-pallet-base000: hsl(0 0% 100%);--text-primary-color: #333;--sg-border-width: 1px;--sg-border-width-50: .5px;--sg-border-radius: .25rem;--gds-sys-color-font: #333;--sg-border-color: #868686}:host .alert-container{box-sizing:border-box;width:100%}:host .alert-container a{cursor:pointer}:host .alert-container button{font-size:1rem;font-family:inherit}:host .alert-container button:not(.close){padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host .alert-container button:not(.close){min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .alert-container button:not(.close){min-width:100%}}@media screen and (-ms-high-contrast:active){:host .alert-container button:not(.close){border:2px solid currentcolor}}:host .alert-container button:not(.close).small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .alert-container button:not(.close).large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .alert-container button:not(.close):focus:not(:focus-visible){box-shadow:none;outline:0}:host .alert-container button:not(.close):focus,:host .alert-container button:not(.close):focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .alert-container button:not(.close){transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .alert-container button:not(.close):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .alert-container button:not(.close)[aria-selected=true],:host .alert-container button:not(.close):active,:host .alert-container button:not(.close).active,:host .alert-container button:not(.close).active:hover,:host .alert-container button:not(.close):active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .alert-container button:not(.close){background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .alert-container button:not(.close):disabled,:host .alert-container button:not(.close).disabled,:host .alert-container button:not(.close)[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .alert-container button:not(.close):disabled::placeholder,:host .alert-container button:not(.close).disabled::placeholder,:host .alert-container button:not(.close)[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .alert-container .close{padding:0}:host .alert-container .close i{width:2rem;height:2rem;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
|
|
142
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: AlertComponent, isStandalone: false, selector: "nggv-alert", inputs: { type: "type", title: "title", body: "body", linkText: "linkText", linkHref: "linkHref", actionText: "actionText", closable: "closable" }, outputs: { closeAlert: "closeAlert", clickLink: "clickLink", clickAction: "clickAction" }, ngImport: i0, template: "<div class=\"gds-alert-ribbon alert-container\" role=\"alert\" [ngClass]=\"type\">\n <ng-container [ngSwitch]=\"type\">\n <ng-container\n *ngSwitchCase=\"'success'\"\n [ngTemplateOutlet]=\"checkMark\"\n ></ng-container>\n <ng-container\n *ngSwitchCase=\"'information'\"\n [ngTemplateOutlet]=\"infoSquare\"\n ></ng-container>\n <ng-container\n *ngSwitchDefault\n [ngTemplateOutlet]=\"exclamationSquare\"\n ></ng-container>\n </ng-container>\n <div>\n <h3 *ngIf=\"title\">{{ title }}</h3>\n <p *ngIf=\"body\">\n {{ body }} <a\n *ngIf=\"linkText\"\n [href]=\"linkHref\"\n (click)=\"onLink($event)\"\n >{{ linkText }}</a\n >\n </p>\n </div>\n <button\n *ngIf=\"closable && !actionText\"\n class=\"gds-close\"\n type=\"button\"\n (click)=\"onClose($event)\"\n >\n <i></i>\n </button>\n <footer *ngIf=\"actionText && !closable\">\n <button type=\"button\" (click)=\"onAction($event)\">\n {{ actionText }}\n </button>\n </footer>\n</div>\n\n<ng-template #checkMark>\n <i>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </i>\n</ng-template>\n<ng-template #infoSquare>\n <i>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n fill=\"#333333\"\n />\n </svg>\n </i>\n</ng-template>\n<ng-template #exclamationSquare>\n <i>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n</ng-template>\n", styles: [".gds-alert-ribbon{--background: var(--gds-sys-color-base-200);--color: var(--gds-sys-color-text-primary);--border-color: var(--gds-sys-color-text-primary);background:var(--background);border-radius:0;border:solid 1px var(--border-color);color:var(--color);padding:1rem;display:inline-grid;grid-template-columns:auto 1fr auto;grid-template-rows:min-content 1fr;grid-template-areas:\"icon content dismiss\" \"footer footer footer\"}@media(min-width:36em){.gds-alert-ribbon{grid-template-areas:\"icon content dismiss\" \"icon content footer\"}}.gds-alert-ribbon>i{display:block;width:1.5rem;height:1.5rem;margin-inline-end:.5rem;grid-area:icon}.gds-alert-ribbon>i svg>*{fill:var(--gds-sys-color-text-primary)}.gds-alert-ribbon>div:not(.alert-ribbon__footer),.gds-alert-ribbon .alert-ribbon__content{grid-area:content;max-width:75ch}.gds-alert-ribbon>div:not(.alert-ribbon__footer):has(+button),.gds-alert-ribbon .alert-ribbon__content:has(+button){padding-right:.5rem}.gds-alert-ribbon>div:not(.alert-ribbon__footer)>h1,.gds-alert-ribbon>div:not(.alert-ribbon__footer) h2,.gds-alert-ribbon>div:not(.alert-ribbon__footer) h3,.gds-alert-ribbon>div:not(.alert-ribbon__footer) h4,.gds-alert-ribbon>div:not(.alert-ribbon__footer) h5,.gds-alert-ribbon>div:not(.alert-ribbon__footer) .header,.gds-alert-ribbon .alert-ribbon__content>h1,.gds-alert-ribbon .alert-ribbon__content h2,.gds-alert-ribbon .alert-ribbon__content h3,.gds-alert-ribbon .alert-ribbon__content h4,.gds-alert-ribbon .alert-ribbon__content h5,.gds-alert-ribbon .alert-ribbon__content .header{display:inline;font-size:1rem;font-weight:500;line-height:1.5rem;margin-right:.25rem}.gds-alert-ribbon>div:not(.alert-ribbon__footer)>p,.gds-alert-ribbon .alert-ribbon__content>p{display:inline;line-height:1.5rem;margin-bottom:0;margin-top:0}.gds-alert-ribbon>div:not(.alert-ribbon__footer)>p a,.gds-alert-ribbon>div:not(.alert-ribbon__footer)>p a:visited:not(.button,[role=tab]),.gds-alert-ribbon .alert-ribbon__content>p a,.gds-alert-ribbon .alert-ribbon__content>p a:visited:not(.button,[role=tab]){color:var(--color)}.gds-alert-ribbon>div:not(.alert-ribbon__footer)>p a:hover,.gds-alert-ribbon>div:not(.alert-ribbon__footer)>p a:visited:not(.button,[role=tab]):hover,.gds-alert-ribbon .alert-ribbon__content>p a:hover,.gds-alert-ribbon .alert-ribbon__content>p a:visited:not(.button,[role=tab]):hover{color:var(--color)}.gds-alert-ribbon button.gds-close{padding:0;grid-area:dismiss;justify-self:flex-end;margin:-.5rem -.375rem 0 .375rem;background-color:transparent;--color: var(--gds-sys-color-text-primary)}.gds-alert-ribbon button.gds-close>i:after,.gds-alert-ribbon button.gds-close>i:before{background-color:var(--color)}.gds-alert-ribbon button.gds-close:hover>i:after,.gds-alert-ribbon button.gds-close:hover>i:before{background-color:var(--color)}@media(min-width:36em){.gds-alert-ribbon button.gds-close+footer,.gds-alert-ribbon button.gds-close .alert-ribbon__footer{margin-top:.75rem}}.gds-alert-ribbon a{text-decoration:underline!important;transition:opacity .3s ease-in-out}.gds-alert-ribbon>footer,.gds-alert-ribbon .alert-ribbon__footer{grid-area:footer;align-self:end}@media(max-width:35.98em){.gds-alert-ribbon>footer,.gds-alert-ribbon .alert-ribbon__footer{margin-top:.75rem}}@media(min-width:36em){.gds-alert-ribbon>footer,.gds-alert-ribbon .alert-ribbon__footer{margin-left:.75rem}}.gds-alert-ribbon>footer>a,.gds-alert-ribbon .alert-ribbon__footer>a{display:flex}.gds-alert-ribbon>footer>a,.gds-alert-ribbon>footer>button,.gds-alert-ribbon>footer>button[type=button],.gds-alert-ribbon>footer>.button,.gds-alert-ribbon .alert-ribbon__footer>a,.gds-alert-ribbon .alert-ribbon__footer>button,.gds-alert-ribbon .alert-ribbon__footer>button[type=button],.gds-alert-ribbon .alert-ribbon__footer>.button{min-height:2rem;padding:.4375rem .75rem;line-height:1.125rem}@media(max-width:35.98em){.gds-alert-ribbon>footer>a+a,.gds-alert-ribbon>footer>a+button,.gds-alert-ribbon>footer>a+.button,.gds-alert-ribbon>footer>button+a,.gds-alert-ribbon>footer>button+button,.gds-alert-ribbon>footer>button+.button,.gds-alert-ribbon>footer>button[type=button]+a,.gds-alert-ribbon>footer>button[type=button]+button,.gds-alert-ribbon>footer>button[type=button]+.button,.gds-alert-ribbon>footer>.button+a,.gds-alert-ribbon>footer>.button+button,.gds-alert-ribbon>footer>.button+.button,.gds-alert-ribbon .alert-ribbon__footer>a+a,.gds-alert-ribbon .alert-ribbon__footer>a+button,.gds-alert-ribbon .alert-ribbon__footer>a+.button,.gds-alert-ribbon .alert-ribbon__footer>button+a,.gds-alert-ribbon .alert-ribbon__footer>button+button,.gds-alert-ribbon .alert-ribbon__footer>button+.button,.gds-alert-ribbon .alert-ribbon__footer>button[type=button]+a,.gds-alert-ribbon .alert-ribbon__footer>button[type=button]+button,.gds-alert-ribbon .alert-ribbon__footer>button[type=button]+.button,.gds-alert-ribbon .alert-ribbon__footer>.button+a,.gds-alert-ribbon .alert-ribbon__footer>.button+button,.gds-alert-ribbon .alert-ribbon__footer>.button+.button{margin-top:.75rem}}@media(min-width:36em){.gds-alert-ribbon>footer>a+a,.gds-alert-ribbon>footer>a+button,.gds-alert-ribbon>footer>a+.button,.gds-alert-ribbon>footer>button+a,.gds-alert-ribbon>footer>button+button,.gds-alert-ribbon>footer>button+.button,.gds-alert-ribbon>footer>button[type=button]+a,.gds-alert-ribbon>footer>button[type=button]+button,.gds-alert-ribbon>footer>button[type=button]+.button,.gds-alert-ribbon>footer>.button+a,.gds-alert-ribbon>footer>.button+button,.gds-alert-ribbon>footer>.button+.button,.gds-alert-ribbon .alert-ribbon__footer>a+a,.gds-alert-ribbon .alert-ribbon__footer>a+button,.gds-alert-ribbon .alert-ribbon__footer>a+.button,.gds-alert-ribbon .alert-ribbon__footer>button+a,.gds-alert-ribbon .alert-ribbon__footer>button+button,.gds-alert-ribbon .alert-ribbon__footer>button+.button,.gds-alert-ribbon .alert-ribbon__footer>button[type=button]+a,.gds-alert-ribbon .alert-ribbon__footer>button[type=button]+button,.gds-alert-ribbon .alert-ribbon__footer>button[type=button]+.button,.gds-alert-ribbon .alert-ribbon__footer>.button+a,.gds-alert-ribbon .alert-ribbon__footer>.button+button,.gds-alert-ribbon .alert-ribbon__footer>.button+.button{margin-left:.75rem}}.gds-alert-ribbon.info{--background: var(--gds-sys-color-base-200);--color: var(--gds-sys-color-text-black);--border-color: transparent;--gds-sys-color-focus-outline: var(--gds-sys-color-text-black)}.gds-alert-ribbon.info .gds-close{--color: var(--gds-sys-color-text-black)}.gds-alert-ribbon.info i>svg>*{fill:var(--gds-sys-color-text-black)}.gds-alert-ribbon.success{--background: var(--gds-sys-color-dark-green-2);--color: var(--gds-sys-color-text-inverted);--border-color: transparent;--gds-sys-color-focus-outline: var(--gds-sys-color-text-inverted)}.gds-alert-ribbon.success .gds-close{--color: var(--gds-sys-color-text-inverted)}.gds-alert-ribbon.success i>svg>*{fill:var(--gds-sys-color-text-inverted)}.gds-alert-ribbon.warning{--background: var(--gds-sys-color-dark-yellow-1);--color: var(--gds-sys-color-text-black);--border-color: transparent;--gds-sys-color-focus-outline: var(--gds-sys-color-text-black)}.gds-alert-ribbon.warning .gds-close{--color: var(--gds-sys-color-text-black)}.gds-alert-ribbon.warning i>svg>*{fill:var(--gds-sys-color-text-black)}.gds-alert-ribbon.danger{--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-inverted);--border-color: transparent;--gds-sys-color-focus-outline: var(--gds-sys-color-text-inverted)}.gds-alert-ribbon.danger .gds-close{--color: var(--gds-sys-color-text-inverted)}.gds-alert-ribbon.danger i>svg>*{fill:var(--gds-sys-color-text-inverted)}.gds-close{font-size:0;background:transparent;border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem;padding:0}@media(hover:none)and (pointer:coarse){.gds-close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}.gds-close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-text-primary)}.gds-close:not(:disabled):not(.disabled)>div:after,.gds-close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}.gds-close:focus:not(:focus-visible){box-shadow:none;outline:0}.gds-close:focus,.gds-close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}.gds-close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}.gds-close>i:after,.gds-close>i:before{background:var(--gds-sys-color-text-primary);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}.gds-close>i:after{transform:rotate(45deg)}.gds-close>i:before{transform:rotate(-45deg)}.gds-close>svg path{fill:var(--gds-sys-color-text-primary)}@media(min-width:48em){.gds-close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 10%,transparent)}.gds-close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 20%,transparent)}}:host{--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%;--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host .alert-container{box-sizing:border-box;width:100%}:host .alert-container a{cursor:pointer}:host .alert-container button{font-size:1rem;font-family:inherit}:host .alert-container button:not(.gds-close){padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .alert-container button:not(.gds-close):focus:not(:focus-visible){box-shadow:none;outline:0}:host .alert-container button:not(.gds-close):focus,:host .alert-container button:not(.gds-close):focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .alert-container button:not(.gds-close){min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .alert-container button:not(.gds-close){min-width:100%}}@media screen and (-ms-high-contrast:active){:host .alert-container button:not(.gds-close){border:2px solid currentcolor}}:host .alert-container button:not(.gds-close).small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .alert-container button:not(.gds-close).large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .alert-container.information button:not(.gds-close),:host .alert-container.warning button:not(.gds-close){transition:border var(--gds-sys-transition)}:host .alert-container.information button:not(.gds-close):not(:disabled,.disabled,[aria-disabled]):hover,:host .alert-container.warning button:not(.gds-close):not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}:host .alert-container.information button:not(.gds-close)[aria-selected=true],:host .alert-container.information button:not(.gds-close):active,:host .alert-container.information button:not(.gds-close).active,:host .alert-container.information button:not(.gds-close).active:hover,:host .alert-container.information button:not(.gds-close):active:hover,:host .alert-container.warning button:not(.gds-close)[aria-selected=true],:host .alert-container.warning button:not(.gds-close):active,:host .alert-container.warning button:not(.gds-close).active,:host .alert-container.warning button:not(.gds-close).active:hover,:host .alert-container.warning button:not(.gds-close):active:hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-base-800)}:host .alert-container.information button:not(.gds-close)[aria-selected]:hover,:host .alert-container.information button:not(.gds-close).active:hover,:host .alert-container.information button:not(.gds-close):active:hover,:host .alert-container.warning button:not(.gds-close)[aria-selected]:hover,:host .alert-container.warning button:not(.gds-close).active:hover,:host .alert-container.warning button:not(.gds-close):active:hover{opacity:.9}:host .alert-container.information button:not(.gds-close),:host .alert-container.warning button:not(.gds-close){background-color:transparent;border-color:var(--gds-sys-color-base-800);color:var(--gds-sys-color-base-800);--color: var(--gds-sys-color-base-800)}:host .alert-container.information button:not(.gds-close):disabled,:host .alert-container.information button:not(.gds-close).disabled,:host .alert-container.information button:not(.gds-close)[aria-disabled=true],:host .alert-container.warning button:not(.gds-close):disabled,:host .alert-container.warning button:not(.gds-close).disabled,:host .alert-container.warning button:not(.gds-close)[aria-disabled=true]{color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .alert-container.information button:not(.gds-close):disabled::placeholder,:host .alert-container.information button:not(.gds-close).disabled::placeholder,:host .alert-container.information button:not(.gds-close)[aria-disabled=true]::placeholder,:host .alert-container.warning button:not(.gds-close):disabled::placeholder,:host .alert-container.warning button:not(.gds-close).disabled::placeholder,:host .alert-container.warning button:not(.gds-close)[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .alert-container.success button:not(.gds-close),:host .alert-container.danger button:not(.gds-close){--gds-sys-color-focus-outline: var(--gds-sys-color-white);transition:border var(--gds-sys-transition)}:host .alert-container.success button:not(.gds-close):not(:disabled,.disabled,[aria-disabled]):hover,:host .alert-container.danger button:not(.gds-close):not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-white);color:var(--gds-sys-color-text-primary);--background: var(--gds-sys-color-white);--color: var(--gds-sys-color-text-primary);border-color:var(--gds-sys-color-white)}:host .alert-container.success button:not(.gds-close)[aria-selected=true],:host .alert-container.success button:not(.gds-close):active,:host .alert-container.success button:not(.gds-close).active,:host .alert-container.success button:not(.gds-close).active:hover,:host .alert-container.success button:not(.gds-close):active:hover,:host .alert-container.danger button:not(.gds-close)[aria-selected=true],:host .alert-container.danger button:not(.gds-close):active,:host .alert-container.danger button:not(.gds-close).active,:host .alert-container.danger button:not(.gds-close).active:hover,:host .alert-container.danger button:not(.gds-close):active:hover{background:var(--gds-sys-color-base-200);color:var(--gds-sys-color-text-primary);--background: $bg;--color: $color;border-color:var(--gds-sys-color-base-200)}:host .alert-container.success button:not(.gds-close)[aria-selected]:hover,:host .alert-container.success button:not(.gds-close).active:hover,:host .alert-container.success button:not(.gds-close):active:hover,:host .alert-container.danger button:not(.gds-close)[aria-selected]:hover,:host .alert-container.danger button:not(.gds-close).active:hover,:host .alert-container.danger button:not(.gds-close):active:hover{opacity:.9}:host .alert-container.success button:not(.gds-close),:host .alert-container.danger button:not(.gds-close){background-color:transparent;border-color:var(--gds-sys-color-white);color:var(--gds-sys-color-white);--color: var(--gds-sys-color-white)}:host .alert-container.success button:not(.gds-close):disabled,:host .alert-container.success button:not(.gds-close).disabled,:host .alert-container.success button:not(.gds-close)[aria-disabled=true],:host .alert-container.danger button:not(.gds-close):disabled,:host .alert-container.danger button:not(.gds-close).disabled,:host .alert-container.danger button:not(.gds-close)[aria-disabled=true]{color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .alert-container.success button:not(.gds-close):disabled::placeholder,:host .alert-container.success button:not(.gds-close).disabled::placeholder,:host .alert-container.success button:not(.gds-close)[aria-disabled=true]::placeholder,:host .alert-container.danger button:not(.gds-close):disabled::placeholder,:host .alert-container.danger button:not(.gds-close).disabled::placeholder,:host .alert-container.danger button:not(.gds-close)[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] }); }
|
|
143
143
|
}
|
|
144
144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: AlertComponent, decorators: [{
|
|
145
145
|
type: Component,
|
|
146
|
-
args: [{ selector: 'nggv-alert', standalone: false, template: "<div class=\"alert-container\" role=\"alert\" [ngClass]=\"type\">\n <ng-container [ngSwitch]=\"type\">\n <ng-container\n *ngSwitchCase=\"'success'\"\n [ngTemplateOutlet]=\"checkMark\"\n ></ng-container>\n <ng-container\n *ngSwitchCase=\"'information'\"\n [ngTemplateOutlet]=\"infoSquare\"\n ></ng-container>\n <ng-container\n *ngSwitchDefault\n [ngTemplateOutlet]=\"exclamationSquare\"\n ></ng-container>\n </ng-container>\n <div>\n <h3 *ngIf=\"title\">{{ title }}</h3>\n <p *ngIf=\"body\">\n {{ body }} <a\n *ngIf=\"linkText\"\n [href]=\"linkHref\"\n (click)=\"onLink($event)\"\n >{{ linkText }}</a\n >\n </p>\n </div>\n <button\n *ngIf=\"closable && !actionText\"\n class=\"close\"\n type=\"button\"\n (click)=\"onClose($event)\"\n >\n <i></i>\n </button>\n <footer *ngIf=\"actionText && !closable\">\n <button type=\"button\" (click)=\"onAction($event)\">\n {{ actionText }}\n </button>\n </footer>\n</div>\n\n<ng-template #checkMark>\n <i>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </i>\n</ng-template>\n<ng-template #infoSquare>\n <i>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n fill=\"#333333\"\n />\n </svg>\n </i>\n</ng-template>\n<ng-template #exclamationSquare>\n <i>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n</ng-template>\n", styles: ["div[role=alert],.alert-ribbon{--background: hsl(var(--sg-intent-neutral-hsl));--color: var(--text-primary-color);--border-color: var(--text-primary-color);background:var(--background);border-radius:0;border:solid 1px var(--border-color);color:var(--color);padding:1rem;display:inline-grid;grid-template-columns:auto 1fr auto;grid-template-rows:min-content 1fr;grid-template-areas:\"icon content dismiss\" \"footer footer footer\"}@media(min-width:36em){div[role=alert],.alert-ribbon{grid-template-areas:\"icon content dismiss\" \"icon content footer\"}}div[role=alert]>i,.alert-ribbon>i{display:block;width:1.5rem;height:1.5rem;margin-inline-end:.5rem;grid-area:icon}div[role=alert]>i svg>*,.alert-ribbon>i svg>*{fill:var(--text-primary-color)}div[role=alert]>div:not(.alert-ribbon__footer),div[role=alert] .alert-ribbon__content,.alert-ribbon>div:not(.alert-ribbon__footer),.alert-ribbon .alert-ribbon__content{grid-area:content;max-width:75ch}div[role=alert]>div:not(.alert-ribbon__footer):has(+button),div[role=alert] .alert-ribbon__content:has(+button),.alert-ribbon>div:not(.alert-ribbon__footer):has(+button),.alert-ribbon .alert-ribbon__content:has(+button){padding-right:.5rem}div[role=alert]>div:not(.alert-ribbon__footer)>h1,div[role=alert]>div:not(.alert-ribbon__footer) h2,div[role=alert]>div:not(.alert-ribbon__footer) h3,div[role=alert]>div:not(.alert-ribbon__footer) h4,div[role=alert]>div:not(.alert-ribbon__footer) h5,div[role=alert]>div:not(.alert-ribbon__footer) .header,div[role=alert] .alert-ribbon__content>h1,div[role=alert] .alert-ribbon__content h2,div[role=alert] .alert-ribbon__content h3,div[role=alert] .alert-ribbon__content h4,div[role=alert] .alert-ribbon__content h5,div[role=alert] .alert-ribbon__content .header,.alert-ribbon>div:not(.alert-ribbon__footer)>h1,.alert-ribbon>div:not(.alert-ribbon__footer) h2,.alert-ribbon>div:not(.alert-ribbon__footer) h3,.alert-ribbon>div:not(.alert-ribbon__footer) h4,.alert-ribbon>div:not(.alert-ribbon__footer) h5,.alert-ribbon>div:not(.alert-ribbon__footer) .header,.alert-ribbon .alert-ribbon__content>h1,.alert-ribbon .alert-ribbon__content h2,.alert-ribbon .alert-ribbon__content h3,.alert-ribbon .alert-ribbon__content h4,.alert-ribbon .alert-ribbon__content h5,.alert-ribbon .alert-ribbon__content .header{display:inline;font-size:1rem;font-weight:500;line-height:1.5rem;margin-right:.25rem}div[role=alert]>div:not(.alert-ribbon__footer)>p,div[role=alert] .alert-ribbon__content>p,.alert-ribbon>div:not(.alert-ribbon__footer)>p,.alert-ribbon .alert-ribbon__content>p{display:inline;line-height:1.5rem;margin-bottom:0;margin-top:0}div[role=alert]>div:not(.alert-ribbon__footer)>p a,div[role=alert]>div:not(.alert-ribbon__footer)>p a:visited:not(.button,[role=tab]),div[role=alert] .alert-ribbon__content>p a,div[role=alert] .alert-ribbon__content>p a:visited:not(.button,[role=tab]),.alert-ribbon>div:not(.alert-ribbon__footer)>p a,.alert-ribbon>div:not(.alert-ribbon__footer)>p a:visited:not(.button,[role=tab]),.alert-ribbon .alert-ribbon__content>p a,.alert-ribbon .alert-ribbon__content>p a:visited:not(.button,[role=tab]){color:var(--color)}div[role=alert]>div:not(.alert-ribbon__footer)>p a:hover,div[role=alert]>div:not(.alert-ribbon__footer)>p a:visited:not(.button,[role=tab]):hover,div[role=alert] .alert-ribbon__content>p a:hover,div[role=alert] .alert-ribbon__content>p a:visited:not(.button,[role=tab]):hover,.alert-ribbon>div:not(.alert-ribbon__footer)>p a:hover,.alert-ribbon>div:not(.alert-ribbon__footer)>p a:visited:not(.button,[role=tab]):hover,.alert-ribbon .alert-ribbon__content>p a:hover,.alert-ribbon .alert-ribbon__content>p a:visited:not(.button,[role=tab]):hover{color:var(--color)}div[role=alert] button.close,.alert-ribbon button.close{grid-area:dismiss;justify-self:flex-end;margin:-.5rem -.375rem 0 .375rem;background-color:transparent;--background-hsl: var(--sg-hsl-black);--color: var(--text-primary-color)}div[role=alert] button.close>i:after,div[role=alert] button.close>i:before,.alert-ribbon button.close>i:after,.alert-ribbon button.close>i:before{background-color:var(--color)}div[role=alert] button.close:hover>i:after,div[role=alert] button.close:hover>i:before,.alert-ribbon button.close:hover>i:after,.alert-ribbon button.close:hover>i:before{background-color:var(--color)}@media(min-width:36em){div[role=alert] button.close+footer,div[role=alert] button.close .alert-ribbon__footer,.alert-ribbon button.close+footer,.alert-ribbon button.close .alert-ribbon__footer{margin-top:.75rem}}div[role=alert] a:link:focus:not(:focus-visible),.alert-ribbon a:link:focus:not(:focus-visible){box-shadow:none;outline:0}div[role=alert] a:link:focus,div[role=alert] a:link:focus-within,.alert-ribbon a:link:focus,.alert-ribbon a:link:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}div[role=alert] a:link:not(.button,[aria-disabled]),.alert-ribbon a:link:not(.button,[aria-disabled]){color:var(--text-primary-color)}div[role=alert] a:link:not(.button,[aria-disabled]):hover,div[role=alert] a:link:not(.button,[aria-disabled]):focus,div[role=alert] a:link:not(.button,[aria-disabled]):visited,.alert-ribbon a:link:not(.button,[aria-disabled]):hover,.alert-ribbon a:link:not(.button,[aria-disabled]):focus,.alert-ribbon a:link:not(.button,[aria-disabled]):visited{color:currentColor}div[role=alert] a,.alert-ribbon a{text-decoration:underline!important;transition:opacity .3s ease-in-out}div[role=alert]>footer,div[role=alert] .alert-ribbon__footer,.alert-ribbon>footer,.alert-ribbon .alert-ribbon__footer{grid-area:footer;align-self:end}@media(max-width:35.98em){div[role=alert]>footer,div[role=alert] .alert-ribbon__footer,.alert-ribbon>footer,.alert-ribbon .alert-ribbon__footer{margin-top:.75rem}}@media(min-width:36em){div[role=alert]>footer,div[role=alert] .alert-ribbon__footer,.alert-ribbon>footer,.alert-ribbon .alert-ribbon__footer{margin-left:.75rem}}div[role=alert]>footer>a,div[role=alert] .alert-ribbon__footer>a,.alert-ribbon>footer>a,.alert-ribbon .alert-ribbon__footer>a{display:flex}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{opacity:.9}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){border-color:#333;color:#333;--color: rgb(51, 51, 51)}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}div[role=alert]>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert]>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert] .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){min-height:2rem;padding:.4375rem .75rem;line-height:1.125rem}@media(max-width:35.98em){div[role=alert]>footer>a+a,div[role=alert]>footer>a+button,div[role=alert]>footer>a+.button,div[role=alert]>footer>button+a,div[role=alert]>footer>button+button,div[role=alert]>footer>button+.button,div[role=alert]>footer>button[type=button]+a,div[role=alert]>footer>button[type=button]+button,div[role=alert]>footer>button[type=button]+.button,div[role=alert]>footer>.button+a,div[role=alert]>footer>.button+button,div[role=alert]>footer>.button+.button,div[role=alert] .alert-ribbon__footer>a+a,div[role=alert] .alert-ribbon__footer>a+button,div[role=alert] .alert-ribbon__footer>a+.button,div[role=alert] .alert-ribbon__footer>button+a,div[role=alert] .alert-ribbon__footer>button+button,div[role=alert] .alert-ribbon__footer>button+.button,div[role=alert] .alert-ribbon__footer>button[type=button]+a,div[role=alert] .alert-ribbon__footer>button[type=button]+button,div[role=alert] .alert-ribbon__footer>button[type=button]+.button,div[role=alert] .alert-ribbon__footer>.button+a,div[role=alert] .alert-ribbon__footer>.button+button,div[role=alert] .alert-ribbon__footer>.button+.button,.alert-ribbon>footer>a+a,.alert-ribbon>footer>a+button,.alert-ribbon>footer>a+.button,.alert-ribbon>footer>button+a,.alert-ribbon>footer>button+button,.alert-ribbon>footer>button+.button,.alert-ribbon>footer>button[type=button]+a,.alert-ribbon>footer>button[type=button]+button,.alert-ribbon>footer>button[type=button]+.button,.alert-ribbon>footer>.button+a,.alert-ribbon>footer>.button+button,.alert-ribbon>footer>.button+.button,.alert-ribbon .alert-ribbon__footer>a+a,.alert-ribbon .alert-ribbon__footer>a+button,.alert-ribbon .alert-ribbon__footer>a+.button,.alert-ribbon .alert-ribbon__footer>button+a,.alert-ribbon .alert-ribbon__footer>button+button,.alert-ribbon .alert-ribbon__footer>button+.button,.alert-ribbon .alert-ribbon__footer>button[type=button]+a,.alert-ribbon .alert-ribbon__footer>button[type=button]+button,.alert-ribbon .alert-ribbon__footer>button[type=button]+.button,.alert-ribbon .alert-ribbon__footer>.button+a,.alert-ribbon .alert-ribbon__footer>.button+button,.alert-ribbon .alert-ribbon__footer>.button+.button{margin-top:.75rem}}@media(min-width:36em){div[role=alert]>footer>a+a,div[role=alert]>footer>a+button,div[role=alert]>footer>a+.button,div[role=alert]>footer>button+a,div[role=alert]>footer>button+button,div[role=alert]>footer>button+.button,div[role=alert]>footer>button[type=button]+a,div[role=alert]>footer>button[type=button]+button,div[role=alert]>footer>button[type=button]+.button,div[role=alert]>footer>.button+a,div[role=alert]>footer>.button+button,div[role=alert]>footer>.button+.button,div[role=alert] .alert-ribbon__footer>a+a,div[role=alert] .alert-ribbon__footer>a+button,div[role=alert] .alert-ribbon__footer>a+.button,div[role=alert] .alert-ribbon__footer>button+a,div[role=alert] .alert-ribbon__footer>button+button,div[role=alert] .alert-ribbon__footer>button+.button,div[role=alert] .alert-ribbon__footer>button[type=button]+a,div[role=alert] .alert-ribbon__footer>button[type=button]+button,div[role=alert] .alert-ribbon__footer>button[type=button]+.button,div[role=alert] .alert-ribbon__footer>.button+a,div[role=alert] .alert-ribbon__footer>.button+button,div[role=alert] .alert-ribbon__footer>.button+.button,.alert-ribbon>footer>a+a,.alert-ribbon>footer>a+button,.alert-ribbon>footer>a+.button,.alert-ribbon>footer>button+a,.alert-ribbon>footer>button+button,.alert-ribbon>footer>button+.button,.alert-ribbon>footer>button[type=button]+a,.alert-ribbon>footer>button[type=button]+button,.alert-ribbon>footer>button[type=button]+.button,.alert-ribbon>footer>.button+a,.alert-ribbon>footer>.button+button,.alert-ribbon>footer>.button+.button,.alert-ribbon .alert-ribbon__footer>a+a,.alert-ribbon .alert-ribbon__footer>a+button,.alert-ribbon .alert-ribbon__footer>a+.button,.alert-ribbon .alert-ribbon__footer>button+a,.alert-ribbon .alert-ribbon__footer>button+button,.alert-ribbon .alert-ribbon__footer>button+.button,.alert-ribbon .alert-ribbon__footer>button[type=button]+a,.alert-ribbon .alert-ribbon__footer>button[type=button]+button,.alert-ribbon .alert-ribbon__footer>button[type=button]+.button,.alert-ribbon .alert-ribbon__footer>.button+a,.alert-ribbon .alert-ribbon__footer>.button+button,.alert-ribbon .alert-ribbon__footer>.button+.button{margin-left:.75rem}}div[role=alert].info,.alert-ribbon.info{--background: hsl(var(--sg-intent-info-hsl));--color: hsl(var(--sg-intent-info-hsl-contrast));--border-color: transparent;--gds-sys-color-focus-outline: hsl(var(--sg-intent-info-hsl-contrast))}div[role=alert].info .close,.alert-ribbon.info .close{--color: hsl(var(--sg-intent-info-hsl-contrast))}div[role=alert].info i>svg>*,.alert-ribbon.info i>svg>*{fill:hsl(var(--sg-intent-info-hsl-contrast))}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{opacity:.9}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff!important}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){border-color:#fff;color:#fff;--color: rgb(255, 255, 255)}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.info .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}div[role=alert].info a:link:focus:not(:focus-visible),.alert-ribbon.info a:link:focus:not(:focus-visible){box-shadow:none;outline:0}div[role=alert].info a:link:focus,div[role=alert].info a:link:focus-within,.alert-ribbon.info a:link:focus,.alert-ribbon.info a:link:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}div[role=alert].info a:link:not(.button,[aria-disabled]),.alert-ribbon.info a:link:not(.button,[aria-disabled]){color:hsl(var(--sg-intent-info-hsl-contrast))}div[role=alert].info a:link:not(.button,[aria-disabled]):hover,div[role=alert].info a:link:not(.button,[aria-disabled]):focus,div[role=alert].info a:link:not(.button,[aria-disabled]):visited,.alert-ribbon.info a:link:not(.button,[aria-disabled]):hover,.alert-ribbon.info a:link:not(.button,[aria-disabled]):focus,.alert-ribbon.info a:link:not(.button,[aria-disabled]):visited{color:currentColor}div[role=alert].success,.alert-ribbon.success{--background: hsl(var(--sg-intent-success-hsl));--color: var(--gds-sys-color-text-inverted);--border-color: transparent;--gds-sys-color-focus-outline: var(--gds-sys-color-text-inverted)}div[role=alert].success .close,.alert-ribbon.success .close{--color: var(--gds-sys-color-text-inverted)}div[role=alert].success i>svg>*,.alert-ribbon.success i>svg>*{fill:var(--gds-sys-color-text-inverted)}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{opacity:.9}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff!important}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){border-color:#fff;color:#fff;--color: rgb(255, 255, 255)}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.success .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}div[role=alert].success a:link:focus:not(:focus-visible),.alert-ribbon.success a:link:focus:not(:focus-visible){box-shadow:none;outline:0}div[role=alert].success a:link:focus,div[role=alert].success a:link:focus-within,.alert-ribbon.success a:link:focus,.alert-ribbon.success a:link:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}div[role=alert].success a:link:not(.button,[aria-disabled]),.alert-ribbon.success a:link:not(.button,[aria-disabled]){color:var(--gds-sys-color-text-inverted)}div[role=alert].success a:link:not(.button,[aria-disabled]):hover,div[role=alert].success a:link:not(.button,[aria-disabled]):focus,div[role=alert].success a:link:not(.button,[aria-disabled]):visited,.alert-ribbon.success a:link:not(.button,[aria-disabled]):hover,.alert-ribbon.success a:link:not(.button,[aria-disabled]):focus,.alert-ribbon.success a:link:not(.button,[aria-disabled]):visited{color:currentColor}div[role=alert].warning,.alert-ribbon.warning{--background: hsl(var(--sg-intent-warning-hsl));--color: hsl(var(--sg-intent-warning-hsl-contrast));--border-color: transparent;--gds-sys-color-focus-outline: hsl(var(--sg-intent-warning-hsl-contrast))}div[role=alert].warning .close,.alert-ribbon.warning .close{--color: hsl(var(--sg-intent-warning-hsl-contrast))}div[role=alert].warning i>svg>*,.alert-ribbon.warning i>svg>*{fill:hsl(var(--sg-intent-warning-hsl-contrast))}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{opacity:.9}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){border-color:#333;color:#333;--color: rgb(51, 51, 51)}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.warning .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}div[role=alert].warning a:link:focus:not(:focus-visible),.alert-ribbon.warning a:link:focus:not(:focus-visible){box-shadow:none;outline:0}div[role=alert].warning a:link:focus,div[role=alert].warning a:link:focus-within,.alert-ribbon.warning a:link:focus,.alert-ribbon.warning a:link:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}div[role=alert].warning a:link:not(.button,[aria-disabled]),.alert-ribbon.warning a:link:not(.button,[aria-disabled]){color:hsl(var(--sg-intent-warning-hsl-contrast))}div[role=alert].warning a:link:not(.button,[aria-disabled]):hover,div[role=alert].warning a:link:not(.button,[aria-disabled]):focus,div[role=alert].warning a:link:not(.button,[aria-disabled]):visited,.alert-ribbon.warning a:link:not(.button,[aria-disabled]):hover,.alert-ribbon.warning a:link:not(.button,[aria-disabled]):focus,.alert-ribbon.warning a:link:not(.button,[aria-disabled]):visited{color:currentColor}div[role=alert].danger,.alert-ribbon.danger{--background: hsl(var(--sg-intent-critical-hsl));--color: hsl(var(--sg-intent-critical-hsl-contrast));--border-color: transparent;--gds-sys-color-focus-outline: hsl(var(--sg-intent-critical-hsl-contrast))}div[role=alert].danger .close,.alert-ribbon.danger .close{--color: hsl(var(--sg-intent-critical-hsl-contrast))}div[role=alert].danger i>svg>*,.alert-ribbon.danger i>svg>*{fill:hsl(var(--sg-intent-critical-hsl-contrast))}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected=true],.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-selected]:hover,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).active:hover,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):active:hover{opacity:.9}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):focus-visible{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff!important}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]),.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]){border-color:#fff;color:#fff;--color: rgb(255, 255, 255)}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true],.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,div[role=alert].danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger>footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger>footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger>footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger>footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>a:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>button[type=button]:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]):disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled]).disabled::placeholder,.alert-ribbon.danger .alert-ribbon__footer>.button:not(.primary,.ghost,.close,.link,[type=submit],:disabled,.disabled,[aria-disabled])[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}div[role=alert].danger a:link:focus:not(:focus-visible),.alert-ribbon.danger a:link:focus:not(:focus-visible){box-shadow:none;outline:0}div[role=alert].danger a:link:focus,div[role=alert].danger a:link:focus-within,.alert-ribbon.danger a:link:focus,.alert-ribbon.danger a:link:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}div[role=alert].danger a:link:not(.button,[aria-disabled]),.alert-ribbon.danger a:link:not(.button,[aria-disabled]){color:hsl(var(--sg-intent-critical-hsl-contrast))}div[role=alert].danger a:link:not(.button,[aria-disabled]):hover,div[role=alert].danger a:link:not(.button,[aria-disabled]):focus,div[role=alert].danger a:link:not(.button,[aria-disabled]):visited,.alert-ribbon.danger a:link:not(.button,[aria-disabled]):hover,.alert-ribbon.danger a:link:not(.button,[aria-disabled]):focus,.alert-ribbon.danger a:link:not(.button,[aria-disabled]):visited{color:currentColor}.close{font-size:0;background:var(--gds-sys-color-surface);border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem}@media(hover:none)and (pointer:coarse){.close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}.close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-base)}.close:not(:disabled):not(.disabled)>div:after,.close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}.close:focus:not(:focus-visible){box-shadow:none;outline:0}.close:focus,.close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}.close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}.close>i:after,.close>i:before{background:var(--gds-sys-color-font);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}.close>i:after{transform:rotate(45deg)}.close>i:before{transform:rotate(-45deg)}.close>svg path{fill:var(--gds-sys-color-font)}@media(min-width:48em){.close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-font) 10%,transparent)}.close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-font) 20%,transparent)}}:host{--sg-intent-neutral-hsl: 0deg, 0%, 91.3725490196%;--sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;--sg-intent-success-hsl-contrast: 0deg, 0%, 100%;--sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;--sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;--sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;--sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;--gds-ref-pallet-base000: hsl(0 0% 100%);--text-primary-color: #333;--sg-border-width: 1px;--sg-border-width-50: .5px;--sg-border-radius: .25rem;--gds-sys-color-font: #333;--sg-border-color: #868686}:host .alert-container{box-sizing:border-box;width:100%}:host .alert-container a{cursor:pointer}:host .alert-container button{font-size:1rem;font-family:inherit}:host .alert-container button:not(.close){padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host .alert-container button:not(.close){min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .alert-container button:not(.close){min-width:100%}}@media screen and (-ms-high-contrast:active){:host .alert-container button:not(.close){border:2px solid currentcolor}}:host .alert-container button:not(.close).small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .alert-container button:not(.close).large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .alert-container button:not(.close):focus:not(:focus-visible){box-shadow:none;outline:0}:host .alert-container button:not(.close):focus,:host .alert-container button:not(.close):focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .alert-container button:not(.close){transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .alert-container button:not(.close):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .alert-container button:not(.close)[aria-selected=true],:host .alert-container button:not(.close):active,:host .alert-container button:not(.close).active,:host .alert-container button:not(.close).active:hover,:host .alert-container button:not(.close):active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .alert-container button:not(.close){background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .alert-container button:not(.close):disabled,:host .alert-container button:not(.close).disabled,:host .alert-container button:not(.close)[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .alert-container button:not(.close):disabled::placeholder,:host .alert-container button:not(.close).disabled::placeholder,:host .alert-container button:not(.close)[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .alert-container .close{padding:0}:host .alert-container .close i{width:2rem;height:2rem;border-radius:50%}\n"] }]
|
|
146
|
+
args: [{ selector: 'nggv-alert', standalone: false, template: "<div class=\"gds-alert-ribbon alert-container\" role=\"alert\" [ngClass]=\"type\">\n <ng-container [ngSwitch]=\"type\">\n <ng-container\n *ngSwitchCase=\"'success'\"\n [ngTemplateOutlet]=\"checkMark\"\n ></ng-container>\n <ng-container\n *ngSwitchCase=\"'information'\"\n [ngTemplateOutlet]=\"infoSquare\"\n ></ng-container>\n <ng-container\n *ngSwitchDefault\n [ngTemplateOutlet]=\"exclamationSquare\"\n ></ng-container>\n </ng-container>\n <div>\n <h3 *ngIf=\"title\">{{ title }}</h3>\n <p *ngIf=\"body\">\n {{ body }} <a\n *ngIf=\"linkText\"\n [href]=\"linkHref\"\n (click)=\"onLink($event)\"\n >{{ linkText }}</a\n >\n </p>\n </div>\n <button\n *ngIf=\"closable && !actionText\"\n class=\"gds-close\"\n type=\"button\"\n (click)=\"onClose($event)\"\n >\n <i></i>\n </button>\n <footer *ngIf=\"actionText && !closable\">\n <button type=\"button\" (click)=\"onAction($event)\">\n {{ actionText }}\n </button>\n </footer>\n</div>\n\n<ng-template #checkMark>\n <i>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M17.6203 6.60836L9.40014 14.8285L6.37976 11.8081C6.23332 11.6617 5.99588 11.6617 5.84942 11.8081L4.96554 12.692C4.8191 12.8384 4.8191 13.0759 4.96554 13.2223L9.13495 17.3917C9.28138 17.5382 9.51882 17.5382 9.66529 17.3917L19.0344 8.02258C19.1809 7.87614 19.1809 7.63871 19.0344 7.49224L18.1506 6.60836C18.0041 6.46193 17.7667 6.46193 17.6203 6.60836Z\"\n fill=\"white\"\n ></path>\n </svg>\n </i>\n</ng-template>\n<ng-template #infoSquare>\n <i>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM12 7.07143C12.8284 7.07143 13.5 7.743 13.5 8.57143C13.5 9.39986 12.8284 10.0714 12 10.0714C11.1716 10.0714 10.5 9.39986 10.5 8.57143C10.5 7.743 11.1716 7.07143 12 7.07143ZM14 16.1429C14 16.3795 13.8081 16.5714 13.5714 16.5714H10.4286C10.1919 16.5714 10 16.3795 10 16.1429V15.2857C10 15.049 10.1919 14.8571 10.4286 14.8571H10.8571V12.5714H10.4286C10.1919 12.5714 10 12.3795 10 12.1429V11.2857C10 11.049 10.1919 10.8571 10.4286 10.8571H12.7143C12.951 10.8571 13.1429 11.049 13.1429 11.2857V14.8571H13.5714C13.8081 14.8571 14 15.049 14 15.2857V16.1429Z\"\n fill=\"#333333\"\n />\n </svg>\n </i>\n</ng-template>\n<ng-template #exclamationSquare>\n <i>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M18.2857 4H5.71429C4.7675 4 4 4.7675 4 5.71429V18.2857C4 19.2325 4.7675 20 5.71429 20H18.2857C19.2325 20 20 19.2325 20 18.2857V5.71429C20 4.7675 19.2325 4 18.2857 4ZM10.8682 7.42857H13.1318C13.3777 7.42857 13.5731 7.635 13.5597 7.8805L13.2948 12.7376C13.2824 12.9649 13.0945 13.1429 12.8669 13.1429H11.1331C10.9055 13.1429 10.7176 12.9649 10.7052 12.7376L10.4402 7.8805C10.4269 7.635 10.6223 7.42857 10.8682 7.42857ZM12 17.0714C11.0927 17.0714 10.3571 16.3359 10.3571 15.4286C10.3571 14.5213 11.0927 13.7857 12 13.7857C12.9073 13.7857 13.6429 14.5213 13.6429 15.4286C13.6429 16.3359 12.9073 17.0714 12 17.0714Z\"\n fill=\"currentColor\"\n />\n </svg>\n </i>\n</ng-template>\n", styles: [".gds-alert-ribbon{--background: var(--gds-sys-color-base-200);--color: var(--gds-sys-color-text-primary);--border-color: var(--gds-sys-color-text-primary);background:var(--background);border-radius:0;border:solid 1px var(--border-color);color:var(--color);padding:1rem;display:inline-grid;grid-template-columns:auto 1fr auto;grid-template-rows:min-content 1fr;grid-template-areas:\"icon content dismiss\" \"footer footer footer\"}@media(min-width:36em){.gds-alert-ribbon{grid-template-areas:\"icon content dismiss\" \"icon content footer\"}}.gds-alert-ribbon>i{display:block;width:1.5rem;height:1.5rem;margin-inline-end:.5rem;grid-area:icon}.gds-alert-ribbon>i svg>*{fill:var(--gds-sys-color-text-primary)}.gds-alert-ribbon>div:not(.alert-ribbon__footer),.gds-alert-ribbon .alert-ribbon__content{grid-area:content;max-width:75ch}.gds-alert-ribbon>div:not(.alert-ribbon__footer):has(+button),.gds-alert-ribbon .alert-ribbon__content:has(+button){padding-right:.5rem}.gds-alert-ribbon>div:not(.alert-ribbon__footer)>h1,.gds-alert-ribbon>div:not(.alert-ribbon__footer) h2,.gds-alert-ribbon>div:not(.alert-ribbon__footer) h3,.gds-alert-ribbon>div:not(.alert-ribbon__footer) h4,.gds-alert-ribbon>div:not(.alert-ribbon__footer) h5,.gds-alert-ribbon>div:not(.alert-ribbon__footer) .header,.gds-alert-ribbon .alert-ribbon__content>h1,.gds-alert-ribbon .alert-ribbon__content h2,.gds-alert-ribbon .alert-ribbon__content h3,.gds-alert-ribbon .alert-ribbon__content h4,.gds-alert-ribbon .alert-ribbon__content h5,.gds-alert-ribbon .alert-ribbon__content .header{display:inline;font-size:1rem;font-weight:500;line-height:1.5rem;margin-right:.25rem}.gds-alert-ribbon>div:not(.alert-ribbon__footer)>p,.gds-alert-ribbon .alert-ribbon__content>p{display:inline;line-height:1.5rem;margin-bottom:0;margin-top:0}.gds-alert-ribbon>div:not(.alert-ribbon__footer)>p a,.gds-alert-ribbon>div:not(.alert-ribbon__footer)>p a:visited:not(.button,[role=tab]),.gds-alert-ribbon .alert-ribbon__content>p a,.gds-alert-ribbon .alert-ribbon__content>p a:visited:not(.button,[role=tab]){color:var(--color)}.gds-alert-ribbon>div:not(.alert-ribbon__footer)>p a:hover,.gds-alert-ribbon>div:not(.alert-ribbon__footer)>p a:visited:not(.button,[role=tab]):hover,.gds-alert-ribbon .alert-ribbon__content>p a:hover,.gds-alert-ribbon .alert-ribbon__content>p a:visited:not(.button,[role=tab]):hover{color:var(--color)}.gds-alert-ribbon button.gds-close{padding:0;grid-area:dismiss;justify-self:flex-end;margin:-.5rem -.375rem 0 .375rem;background-color:transparent;--color: var(--gds-sys-color-text-primary)}.gds-alert-ribbon button.gds-close>i:after,.gds-alert-ribbon button.gds-close>i:before{background-color:var(--color)}.gds-alert-ribbon button.gds-close:hover>i:after,.gds-alert-ribbon button.gds-close:hover>i:before{background-color:var(--color)}@media(min-width:36em){.gds-alert-ribbon button.gds-close+footer,.gds-alert-ribbon button.gds-close .alert-ribbon__footer{margin-top:.75rem}}.gds-alert-ribbon a{text-decoration:underline!important;transition:opacity .3s ease-in-out}.gds-alert-ribbon>footer,.gds-alert-ribbon .alert-ribbon__footer{grid-area:footer;align-self:end}@media(max-width:35.98em){.gds-alert-ribbon>footer,.gds-alert-ribbon .alert-ribbon__footer{margin-top:.75rem}}@media(min-width:36em){.gds-alert-ribbon>footer,.gds-alert-ribbon .alert-ribbon__footer{margin-left:.75rem}}.gds-alert-ribbon>footer>a,.gds-alert-ribbon .alert-ribbon__footer>a{display:flex}.gds-alert-ribbon>footer>a,.gds-alert-ribbon>footer>button,.gds-alert-ribbon>footer>button[type=button],.gds-alert-ribbon>footer>.button,.gds-alert-ribbon .alert-ribbon__footer>a,.gds-alert-ribbon .alert-ribbon__footer>button,.gds-alert-ribbon .alert-ribbon__footer>button[type=button],.gds-alert-ribbon .alert-ribbon__footer>.button{min-height:2rem;padding:.4375rem .75rem;line-height:1.125rem}@media(max-width:35.98em){.gds-alert-ribbon>footer>a+a,.gds-alert-ribbon>footer>a+button,.gds-alert-ribbon>footer>a+.button,.gds-alert-ribbon>footer>button+a,.gds-alert-ribbon>footer>button+button,.gds-alert-ribbon>footer>button+.button,.gds-alert-ribbon>footer>button[type=button]+a,.gds-alert-ribbon>footer>button[type=button]+button,.gds-alert-ribbon>footer>button[type=button]+.button,.gds-alert-ribbon>footer>.button+a,.gds-alert-ribbon>footer>.button+button,.gds-alert-ribbon>footer>.button+.button,.gds-alert-ribbon .alert-ribbon__footer>a+a,.gds-alert-ribbon .alert-ribbon__footer>a+button,.gds-alert-ribbon .alert-ribbon__footer>a+.button,.gds-alert-ribbon .alert-ribbon__footer>button+a,.gds-alert-ribbon .alert-ribbon__footer>button+button,.gds-alert-ribbon .alert-ribbon__footer>button+.button,.gds-alert-ribbon .alert-ribbon__footer>button[type=button]+a,.gds-alert-ribbon .alert-ribbon__footer>button[type=button]+button,.gds-alert-ribbon .alert-ribbon__footer>button[type=button]+.button,.gds-alert-ribbon .alert-ribbon__footer>.button+a,.gds-alert-ribbon .alert-ribbon__footer>.button+button,.gds-alert-ribbon .alert-ribbon__footer>.button+.button{margin-top:.75rem}}@media(min-width:36em){.gds-alert-ribbon>footer>a+a,.gds-alert-ribbon>footer>a+button,.gds-alert-ribbon>footer>a+.button,.gds-alert-ribbon>footer>button+a,.gds-alert-ribbon>footer>button+button,.gds-alert-ribbon>footer>button+.button,.gds-alert-ribbon>footer>button[type=button]+a,.gds-alert-ribbon>footer>button[type=button]+button,.gds-alert-ribbon>footer>button[type=button]+.button,.gds-alert-ribbon>footer>.button+a,.gds-alert-ribbon>footer>.button+button,.gds-alert-ribbon>footer>.button+.button,.gds-alert-ribbon .alert-ribbon__footer>a+a,.gds-alert-ribbon .alert-ribbon__footer>a+button,.gds-alert-ribbon .alert-ribbon__footer>a+.button,.gds-alert-ribbon .alert-ribbon__footer>button+a,.gds-alert-ribbon .alert-ribbon__footer>button+button,.gds-alert-ribbon .alert-ribbon__footer>button+.button,.gds-alert-ribbon .alert-ribbon__footer>button[type=button]+a,.gds-alert-ribbon .alert-ribbon__footer>button[type=button]+button,.gds-alert-ribbon .alert-ribbon__footer>button[type=button]+.button,.gds-alert-ribbon .alert-ribbon__footer>.button+a,.gds-alert-ribbon .alert-ribbon__footer>.button+button,.gds-alert-ribbon .alert-ribbon__footer>.button+.button{margin-left:.75rem}}.gds-alert-ribbon.info{--background: var(--gds-sys-color-base-200);--color: var(--gds-sys-color-text-black);--border-color: transparent;--gds-sys-color-focus-outline: var(--gds-sys-color-text-black)}.gds-alert-ribbon.info .gds-close{--color: var(--gds-sys-color-text-black)}.gds-alert-ribbon.info i>svg>*{fill:var(--gds-sys-color-text-black)}.gds-alert-ribbon.success{--background: var(--gds-sys-color-dark-green-2);--color: var(--gds-sys-color-text-inverted);--border-color: transparent;--gds-sys-color-focus-outline: var(--gds-sys-color-text-inverted)}.gds-alert-ribbon.success .gds-close{--color: var(--gds-sys-color-text-inverted)}.gds-alert-ribbon.success i>svg>*{fill:var(--gds-sys-color-text-inverted)}.gds-alert-ribbon.warning{--background: var(--gds-sys-color-dark-yellow-1);--color: var(--gds-sys-color-text-black);--border-color: transparent;--gds-sys-color-focus-outline: var(--gds-sys-color-text-black)}.gds-alert-ribbon.warning .gds-close{--color: var(--gds-sys-color-text-black)}.gds-alert-ribbon.warning i>svg>*{fill:var(--gds-sys-color-text-black)}.gds-alert-ribbon.danger{--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-inverted);--border-color: transparent;--gds-sys-color-focus-outline: var(--gds-sys-color-text-inverted)}.gds-alert-ribbon.danger .gds-close{--color: var(--gds-sys-color-text-inverted)}.gds-alert-ribbon.danger i>svg>*{fill:var(--gds-sys-color-text-inverted)}.gds-close{font-size:0;background:transparent;border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem;padding:0}@media(hover:none)and (pointer:coarse){.gds-close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}.gds-close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-text-primary)}.gds-close:not(:disabled):not(.disabled)>div:after,.gds-close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}.gds-close:focus:not(:focus-visible){box-shadow:none;outline:0}.gds-close:focus,.gds-close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}.gds-close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}.gds-close>i:after,.gds-close>i:before{background:var(--gds-sys-color-text-primary);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}.gds-close>i:after{transform:rotate(45deg)}.gds-close>i:before{transform:rotate(-45deg)}.gds-close>svg path{fill:var(--gds-sys-color-text-primary)}@media(min-width:48em){.gds-close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 10%,transparent)}.gds-close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 20%,transparent)}}:host{--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%;--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host .alert-container{box-sizing:border-box;width:100%}:host .alert-container a{cursor:pointer}:host .alert-container button{font-size:1rem;font-family:inherit}:host .alert-container button:not(.gds-close){padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .alert-container button:not(.gds-close):focus:not(:focus-visible){box-shadow:none;outline:0}:host .alert-container button:not(.gds-close):focus,:host .alert-container button:not(.gds-close):focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .alert-container button:not(.gds-close){min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .alert-container button:not(.gds-close){min-width:100%}}@media screen and (-ms-high-contrast:active){:host .alert-container button:not(.gds-close){border:2px solid currentcolor}}:host .alert-container button:not(.gds-close).small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .alert-container button:not(.gds-close).large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .alert-container.information button:not(.gds-close),:host .alert-container.warning button:not(.gds-close){transition:border var(--gds-sys-transition)}:host .alert-container.information button:not(.gds-close):not(:disabled,.disabled,[aria-disabled]):hover,:host .alert-container.warning button:not(.gds-close):not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}:host .alert-container.information button:not(.gds-close)[aria-selected=true],:host .alert-container.information button:not(.gds-close):active,:host .alert-container.information button:not(.gds-close).active,:host .alert-container.information button:not(.gds-close).active:hover,:host .alert-container.information button:not(.gds-close):active:hover,:host .alert-container.warning button:not(.gds-close)[aria-selected=true],:host .alert-container.warning button:not(.gds-close):active,:host .alert-container.warning button:not(.gds-close).active,:host .alert-container.warning button:not(.gds-close).active:hover,:host .alert-container.warning button:not(.gds-close):active:hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-base-800)}:host .alert-container.information button:not(.gds-close)[aria-selected]:hover,:host .alert-container.information button:not(.gds-close).active:hover,:host .alert-container.information button:not(.gds-close):active:hover,:host .alert-container.warning button:not(.gds-close)[aria-selected]:hover,:host .alert-container.warning button:not(.gds-close).active:hover,:host .alert-container.warning button:not(.gds-close):active:hover{opacity:.9}:host .alert-container.information button:not(.gds-close),:host .alert-container.warning button:not(.gds-close){background-color:transparent;border-color:var(--gds-sys-color-base-800);color:var(--gds-sys-color-base-800);--color: var(--gds-sys-color-base-800)}:host .alert-container.information button:not(.gds-close):disabled,:host .alert-container.information button:not(.gds-close).disabled,:host .alert-container.information button:not(.gds-close)[aria-disabled=true],:host .alert-container.warning button:not(.gds-close):disabled,:host .alert-container.warning button:not(.gds-close).disabled,:host .alert-container.warning button:not(.gds-close)[aria-disabled=true]{color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .alert-container.information button:not(.gds-close):disabled::placeholder,:host .alert-container.information button:not(.gds-close).disabled::placeholder,:host .alert-container.information button:not(.gds-close)[aria-disabled=true]::placeholder,:host .alert-container.warning button:not(.gds-close):disabled::placeholder,:host .alert-container.warning button:not(.gds-close).disabled::placeholder,:host .alert-container.warning button:not(.gds-close)[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .alert-container.success button:not(.gds-close),:host .alert-container.danger button:not(.gds-close){--gds-sys-color-focus-outline: var(--gds-sys-color-white);transition:border var(--gds-sys-transition)}:host .alert-container.success button:not(.gds-close):not(:disabled,.disabled,[aria-disabled]):hover,:host .alert-container.danger button:not(.gds-close):not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-white);color:var(--gds-sys-color-text-primary);--background: var(--gds-sys-color-white);--color: var(--gds-sys-color-text-primary);border-color:var(--gds-sys-color-white)}:host .alert-container.success button:not(.gds-close)[aria-selected=true],:host .alert-container.success button:not(.gds-close):active,:host .alert-container.success button:not(.gds-close).active,:host .alert-container.success button:not(.gds-close).active:hover,:host .alert-container.success button:not(.gds-close):active:hover,:host .alert-container.danger button:not(.gds-close)[aria-selected=true],:host .alert-container.danger button:not(.gds-close):active,:host .alert-container.danger button:not(.gds-close).active,:host .alert-container.danger button:not(.gds-close).active:hover,:host .alert-container.danger button:not(.gds-close):active:hover{background:var(--gds-sys-color-base-200);color:var(--gds-sys-color-text-primary);--background: $bg;--color: $color;border-color:var(--gds-sys-color-base-200)}:host .alert-container.success button:not(.gds-close)[aria-selected]:hover,:host .alert-container.success button:not(.gds-close).active:hover,:host .alert-container.success button:not(.gds-close):active:hover,:host .alert-container.danger button:not(.gds-close)[aria-selected]:hover,:host .alert-container.danger button:not(.gds-close).active:hover,:host .alert-container.danger button:not(.gds-close):active:hover{opacity:.9}:host .alert-container.success button:not(.gds-close),:host .alert-container.danger button:not(.gds-close){background-color:transparent;border-color:var(--gds-sys-color-white);color:var(--gds-sys-color-white);--color: var(--gds-sys-color-white)}:host .alert-container.success button:not(.gds-close):disabled,:host .alert-container.success button:not(.gds-close).disabled,:host .alert-container.success button:not(.gds-close)[aria-disabled=true],:host .alert-container.danger button:not(.gds-close):disabled,:host .alert-container.danger button:not(.gds-close).disabled,:host .alert-container.danger button:not(.gds-close)[aria-disabled=true]{color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .alert-container.success button:not(.gds-close):disabled::placeholder,:host .alert-container.success button:not(.gds-close).disabled::placeholder,:host .alert-container.success button:not(.gds-close)[aria-disabled=true]::placeholder,:host .alert-container.danger button:not(.gds-close):disabled::placeholder,:host .alert-container.danger button:not(.gds-close).disabled::placeholder,:host .alert-container.danger button:not(.gds-close)[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}\n"] }]
|
|
147
147
|
}], propDecorators: { type: [{
|
|
148
148
|
type: Input
|
|
149
149
|
}], title: [{
|
|
@@ -496,11 +496,11 @@ class NggvBreadcrumbsComponent {
|
|
|
496
496
|
this.thook = 'breadcrumbs';
|
|
497
497
|
}
|
|
498
498
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
499
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvBreadcrumbsComponent, isStandalone: false, selector: "nggv-breadcrumbs", inputs: { thook: "thook", breadcrumbs: "breadcrumbs" }, host: { properties: { "attr.data-thook": "this.thook" } }, ngImport: i0, template: "<nav aria-label=\"Breadcrumbs\">\n <ol class=\"gds-breadcrumbs\">\n <ng-container *ngFor=\"let breadcrumb of breadcrumbs; let i = index\">\n <li [attr.aria-current]=\"i === breadcrumbs.length - 1\">\n <a\n [routerLink]=\"breadcrumb.href\"\n [external]=\"!!breadcrumb.external\"\n *ngIf=\"i < breadcrumbs.length - 1; else currentPageRef\"\n >{{ breadcrumb.title }}</a\n >\n <ng-template #currentPageRef>\n <span>{{ breadcrumb.title }}</span>\n </ng-template>\n </li>\n <li class=\"icon\" *ngIf=\"i < breadcrumbs.length - 1\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9.22817 5.19072L8.60942 5.80947C8.46255 5.95635 8.46255 6.19385 8.60942 6.34072L14.2563 12.0001L8.60942 17.6595C8.46255 17.8063 8.46255 18.0438 8.60942 18.1907L9.22817 18.8095C9.37505 18.9563 9.61255 18.9563 9.75942 18.8095L16.3032 12.2657C16.45 12.1188 16.45 11.8813 16.3032 11.7345L9.75942 5.19072C9.61255 5.04385 9.37505 5.04385 9.22817 5.19072Z\"\n fill=\"#000\"\n />\n </svg>\n </li>\n </ng-container>\n </ol>\n</nav>\n", styles: [":host ol{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none}:host ol>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host ol>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host ol{flex-direction:row
|
|
499
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvBreadcrumbsComponent, isStandalone: false, selector: "nggv-breadcrumbs", inputs: { thook: "thook", breadcrumbs: "breadcrumbs" }, host: { properties: { "attr.data-thook": "this.thook" } }, ngImport: i0, template: "<nav aria-label=\"Breadcrumbs\">\n <ol class=\"gds-breadcrumbs\">\n <ng-container *ngFor=\"let breadcrumb of breadcrumbs; let i = index\">\n <li [attr.aria-current]=\"i === breadcrumbs.length - 1\">\n <a\n [routerLink]=\"breadcrumb.href\"\n [external]=\"!!breadcrumb.external\"\n *ngIf=\"i < breadcrumbs.length - 1; else currentPageRef\"\n >{{ breadcrumb.title }}</a\n >\n <ng-template #currentPageRef>\n <span>{{ breadcrumb.title }}</span>\n </ng-template>\n </li>\n <li class=\"icon\" *ngIf=\"i < breadcrumbs.length - 1\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9.22817 5.19072L8.60942 5.80947C8.46255 5.95635 8.46255 6.19385 8.60942 6.34072L14.2563 12.0001L8.60942 17.6595C8.46255 17.8063 8.46255 18.0438 8.60942 18.1907L9.22817 18.8095C9.37505 18.9563 9.61255 18.9563 9.75942 18.8095L16.3032 12.2657C16.45 12.1188 16.45 11.8813 16.3032 11.7345L9.75942 5.19072C9.61255 5.04385 9.37505 5.04385 9.22817 5.19072Z\"\n fill=\"#000\"\n />\n </svg>\n </li>\n </ng-container>\n </ol>\n</nav>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host ol{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none}:host ol>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host ol>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host ol{padding-left:0;margin-bottom:0;margin-top:0;display:flex;list-style:none;flex-direction:row;align-items:center;gap:4px}:host ol>li{padding:0;font-weight:500}:host ol>li:before{display:none}:host ol>li.icon{display:flex}:host ol>li.icon>svg{height:1rem;width:1rem}:host ol a{text-decoration:underline;text-underline-offset:3px}:host ol a:hover{text-underline-offset:2px;text-decoration-thickness:2px}:host ol a:active{text-underline-offset:1px}:host ol a:focus:not(:focus-visible){box-shadow:none;outline:0}:host ol a:focus,:host ol a:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host ol a{color:var(--gds-sys-color-text-link);font-weight:500;border:none;border-radius:.125rem}:host ol a.gds-link--white{color:var(--gds-sys-color-text-white)}:host ol a.gds-link--black{color:var(--gds-sys-color-text-primary)}:host ol a:focus:not([aria-disabled]){color:var(--gds-sys-color-blue)}:host ol a.link-history:visited{color:var(--gds-sys-color-dark-blue-2)}:host ol svg{width:1rem;height:1rem}\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: i2.NggvExternalLinkDirective, selector: "a[routerLink]", inputs: ["external"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
500
500
|
}
|
|
501
501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvBreadcrumbsComponent, decorators: [{
|
|
502
502
|
type: Component,
|
|
503
|
-
args: [{ selector: 'nggv-breadcrumbs', standalone: false, template: "<nav aria-label=\"Breadcrumbs\">\n <ol class=\"gds-breadcrumbs\">\n <ng-container *ngFor=\"let breadcrumb of breadcrumbs; let i = index\">\n <li [attr.aria-current]=\"i === breadcrumbs.length - 1\">\n <a\n [routerLink]=\"breadcrumb.href\"\n [external]=\"!!breadcrumb.external\"\n *ngIf=\"i < breadcrumbs.length - 1; else currentPageRef\"\n >{{ breadcrumb.title }}</a\n >\n <ng-template #currentPageRef>\n <span>{{ breadcrumb.title }}</span>\n </ng-template>\n </li>\n <li class=\"icon\" *ngIf=\"i < breadcrumbs.length - 1\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9.22817 5.19072L8.60942 5.80947C8.46255 5.95635 8.46255 6.19385 8.60942 6.34072L14.2563 12.0001L8.60942 17.6595C8.46255 17.8063 8.46255 18.0438 8.60942 18.1907L9.22817 18.8095C9.37505 18.9563 9.61255 18.9563 9.75942 18.8095L16.3032 12.2657C16.45 12.1188 16.45 11.8813 16.3032 11.7345L9.75942 5.19072C9.61255 5.04385 9.37505 5.04385 9.22817 5.19072Z\"\n fill=\"#000\"\n />\n </svg>\n </li>\n </ng-container>\n </ol>\n</nav>\n", styles: [":host ol{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none}:host ol>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host ol>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host ol{flex-direction:row
|
|
503
|
+
args: [{ selector: 'nggv-breadcrumbs', standalone: false, template: "<nav aria-label=\"Breadcrumbs\">\n <ol class=\"gds-breadcrumbs\">\n <ng-container *ngFor=\"let breadcrumb of breadcrumbs; let i = index\">\n <li [attr.aria-current]=\"i === breadcrumbs.length - 1\">\n <a\n [routerLink]=\"breadcrumb.href\"\n [external]=\"!!breadcrumb.external\"\n *ngIf=\"i < breadcrumbs.length - 1; else currentPageRef\"\n >{{ breadcrumb.title }}</a\n >\n <ng-template #currentPageRef>\n <span>{{ breadcrumb.title }}</span>\n </ng-template>\n </li>\n <li class=\"icon\" *ngIf=\"i < breadcrumbs.length - 1\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M9.22817 5.19072L8.60942 5.80947C8.46255 5.95635 8.46255 6.19385 8.60942 6.34072L14.2563 12.0001L8.60942 17.6595C8.46255 17.8063 8.46255 18.0438 8.60942 18.1907L9.22817 18.8095C9.37505 18.9563 9.61255 18.9563 9.75942 18.8095L16.3032 12.2657C16.45 12.1188 16.45 11.8813 16.3032 11.7345L9.75942 5.19072C9.61255 5.04385 9.37505 5.04385 9.22817 5.19072Z\"\n fill=\"#000\"\n />\n </svg>\n </li>\n </ng-container>\n </ol>\n</nav>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host ol{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none}:host ol>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host ol>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host ol{padding-left:0;margin-bottom:0;margin-top:0;display:flex;list-style:none;flex-direction:row;align-items:center;gap:4px}:host ol>li{padding:0;font-weight:500}:host ol>li:before{display:none}:host ol>li.icon{display:flex}:host ol>li.icon>svg{height:1rem;width:1rem}:host ol a{text-decoration:underline;text-underline-offset:3px}:host ol a:hover{text-underline-offset:2px;text-decoration-thickness:2px}:host ol a:active{text-underline-offset:1px}:host ol a:focus:not(:focus-visible){box-shadow:none;outline:0}:host ol a:focus,:host ol a:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host ol a{color:var(--gds-sys-color-text-link);font-weight:500;border:none;border-radius:.125rem}:host ol a.gds-link--white{color:var(--gds-sys-color-text-white)}:host ol a.gds-link--black{color:var(--gds-sys-color-text-primary)}:host ol a:focus:not([aria-disabled]){color:var(--gds-sys-color-blue)}:host ol a.link-history:visited{color:var(--gds-sys-color-dark-blue-2)}:host ol svg{width:1rem;height:1rem}\n"] }]
|
|
504
504
|
}], propDecorators: { thook: [{
|
|
505
505
|
type: HostBinding,
|
|
506
506
|
args: ['attr.data-thook']
|
|
@@ -592,11 +592,11 @@ class NggvButtonComponent extends NggvBaseControlValueAccessorComponent$1 {
|
|
|
592
592
|
this.nggvClick.emit(event);
|
|
593
593
|
}
|
|
594
594
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvButtonComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
595
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvButtonComponent, isStandalone: false, selector: "nggv-button", inputs: { thook: "thook", type: "type", buttonStyle: "buttonStyle", small: "small", href: "href" }, outputs: { nggvClick: "nggvClick" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button\n #input\n [ngClass]=\"buttonClasses\"\n [id]=\"id + '-button'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [type]=\"type\"\n [autofocus]=\"autofocus\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"description\"\n (click)=\"onClick($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n *ngIf=\"type !== 'link'\"\n>\n <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</button>\n\n<a\n #input\n [ngClass]=\"buttonClasses\"\n role=\"button\"\n [id]=\"id + '-link'\"\n [routerLink]=\"href\"\n [external]=\"external\"\n [attr.aria-label]=\"description\"\n (click)=\"onClick($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n *ngIf=\"type === 'link'\"\n>\n <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</a>\n\n<ng-template #contentRef>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--gds-sys-color-focus-outline: #1a1a1a}:host button,:host a{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host button:focus:not(:focus-visible),:host a:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible,:host a:focus,:host a:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button,:host a{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host button,:host a{min-width:100%}}@media screen and (-ms-high-contrast:active){:host button,:host a{border:2px solid currentcolor}}:host button.small,:host a.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host button.large,:host a.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button,:host a{font-size:1rem;font-family:inherit}:host .primary{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .primary[aria-selected=true],:host .primary:active,:host .primary.active,:host .primary.active:hover,:host .primary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .primary:focus-visible{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3!important}:host .primary{background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .primary:disabled,:host .primary.disabled,:host .primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .primary:disabled::placeholder,:host .primary.disabled::placeholder,:host .primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .secondary:focus,:host .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .secondary{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .secondary[aria-selected=true],:host .secondary:active,:host .secondary.active,:host .secondary.active:hover,:host .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .secondary{background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .secondary:disabled,:host .secondary.disabled,:host .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .secondary:disabled::placeholder,:host .secondary.disabled::placeholder,:host .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .tertiary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .tertiary:focus,:host .tertiary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .tertiary{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .tertiary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .tertiary[aria-selected=true],:host .tertiary:active,:host .tertiary.active,:host .tertiary.active:hover,:host .tertiary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .tertiary{background:transparent;border-color:transparent;color:#007ac7;--color: rgb(0, 122, 199)}:host .tertiary:disabled,:host .tertiary.disabled,:host .tertiary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .tertiary:disabled::placeholder,:host .tertiary.disabled::placeholder,:host .tertiary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost-light{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .ghost-light:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected=true],:host .ghost-light:active,:host .ghost-light.active,:host .ghost-light.active:hover,:host .ghost-light:active:hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected]:hover,:host .ghost-light.active:hover,:host .ghost-light:active:hover{opacity:.9}:host .ghost-light:focus-visible{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff!important}:host .ghost-light{border-color:#fff;color:#fff;--color: rgb(255, 255, 255)}:host .ghost-light:disabled,:host .ghost-light.disabled,:host .ghost-light[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost-light:disabled::placeholder,:host .ghost-light.disabled::placeholder,:host .ghost-light[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .ghost:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .ghost[aria-selected=true],:host .ghost:active,:host .ghost.active,:host .ghost.active:hover,:host .ghost:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .ghost[aria-selected]:hover,:host .ghost.active:hover,:host .ghost:active:hover{opacity:.9}:host .ghost:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .ghost{border-color:#333;color:#333;--color: rgb(51, 51, 51)}:host .ghost:disabled,:host .ghost.disabled,:host .ghost[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost:disabled::placeholder,:host .ghost.disabled::placeholder,:host .ghost[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger.primary{background:#bb000c;border-color:#bb000c;color:#fff;--color: #fff;transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger.primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger.primary[aria-selected=true],:host .danger.primary:active,:host .danger.primary.active,:host .danger.primary.active:hover,:host .danger.primary:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger.primary[aria-selected]:hover,:host .danger.primary.active:hover,:host .danger.primary:active:hover{opacity:.9}:host .danger.primary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger.primary:focus,:host .danger.primary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .danger.primary:disabled,:host .danger.primary.disabled,:host .danger.primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .danger.primary:disabled::placeholder,:host .danger.primary.disabled::placeholder,:host .danger.primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger:not(.primary){color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger:not(.primary):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger:not(.primary)[aria-selected=true],:host .danger:not(.primary):active,:host .danger:not(.primary).active,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger:not(.primary)[aria-selected]:hover,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{opacity:.9}:host .danger:not(.primary):focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger:not(.primary):focus,:host .danger:not(.primary):focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NggvExternalLinkDirective, selector: "a[routerLink]", inputs: ["external"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
595
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvButtonComponent, isStandalone: false, selector: "nggv-button", inputs: { thook: "thook", type: "type", buttonStyle: "buttonStyle", small: "small", href: "href" }, outputs: { nggvClick: "nggvClick" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button\n #input\n [ngClass]=\"buttonClasses\"\n [id]=\"id + '-button'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [type]=\"type\"\n [autofocus]=\"autofocus\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"description\"\n (click)=\"onClick($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n *ngIf=\"type !== 'link'\"\n>\n <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</button>\n\n<a\n #input\n [ngClass]=\"buttonClasses\"\n role=\"button\"\n [id]=\"id + '-link'\"\n [routerLink]=\"href\"\n [external]=\"external\"\n [attr.aria-label]=\"description\"\n (click)=\"onClick($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n *ngIf=\"type === 'link'\"\n>\n <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</a>\n\n<ng-template #contentRef>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host button,:host a{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host button:focus:not(:focus-visible),:host a:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible,:host a:focus,:host a:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button,:host a{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host button,:host a{min-width:100%}}@media screen and (-ms-high-contrast:active){:host button,:host a{border:2px solid currentcolor}}:host button.small,:host a.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host button.large,:host a.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button,:host a{box-sizing:border-box;font-size:1rem;font-family:inherit}:host .primary{transition:border var(--gds-sys-transition)}:host .primary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .primary[aria-selected=true],:host .primary:active,:host .primary.active,:host .primary.active:hover,:host .primary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .primary{background:var(--gds-sys-color-dark-blue-2);border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--color: var(--gds-sys-color-text-white)}:host .primary:disabled,:host .primary.disabled,:host .primary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .primary:disabled::placeholder,:host .primary.disabled::placeholder,:host .primary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .secondary:focus,:host .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .secondary{transition:border var(--gds-sys-transition)}:host .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .secondary[aria-selected=true],:host .secondary:active,:host .secondary.active,:host .secondary.active:hover,:host .secondary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .secondary{background:transparent;border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-dark-blue-2);--color: var(--gds-sys-color-dark-blue-2)}:host .secondary:disabled,:host .secondary.disabled,:host .secondary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .secondary:disabled::placeholder,:host .secondary.disabled::placeholder,:host .secondary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .tertiary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .tertiary:focus,:host .tertiary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .tertiary{transition:border var(--gds-sys-transition)}:host .tertiary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .tertiary[aria-selected=true],:host .tertiary:active,:host .tertiary.active,:host .tertiary.active:hover,:host .tertiary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .tertiary{background:transparent;border-color:transparent;color:var(--gds-sys-color-dark-blue-2);--color: var(--gds-sys-color-dark-blue-2)}:host .tertiary:disabled,:host .tertiary.disabled,:host .tertiary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .tertiary:disabled::placeholder,:host .tertiary.disabled::placeholder,:host .tertiary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .ghost-light{--gds-sys-color-focus-outline: var(--gds-sys-color-white);transition:border var(--gds-sys-transition)}:host .ghost-light:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-white);color:var(--gds-sys-color-text-primary);--background: var(--gds-sys-color-white);--color: var(--gds-sys-color-text-primary);border-color:var(--gds-sys-color-white)}:host .ghost-light[aria-selected=true],:host .ghost-light:active,:host .ghost-light.active,:host .ghost-light.active:hover,:host .ghost-light:active:hover{background:var(--gds-sys-color-base-200);color:var(--gds-sys-color-text-primary);--background: $bg;--color: $color;border-color:var(--gds-sys-color-base-200)}:host .ghost-light[aria-selected]:hover,:host .ghost-light.active:hover,:host .ghost-light:active:hover{opacity:.9}:host .ghost-light{background-color:transparent;border-color:var(--gds-sys-color-white);color:var(--gds-sys-color-white);--color: var(--gds-sys-color-white)}:host .ghost-light:disabled,:host .ghost-light.disabled,:host .ghost-light[aria-disabled=true]{color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .ghost-light:disabled::placeholder,:host .ghost-light.disabled::placeholder,:host .ghost-light[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .ghost{transition:border var(--gds-sys-transition)}:host .ghost:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}:host .ghost[aria-selected=true],:host .ghost:active,:host .ghost.active,:host .ghost.active:hover,:host .ghost:active:hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-base-800)}:host .ghost[aria-selected]:hover,:host .ghost.active:hover,:host .ghost:active:hover{opacity:.9}:host .ghost{background-color:transparent;border-color:var(--gds-sys-color-base-800);color:var(--gds-sys-color-base-800);--color: var(--gds-sys-color-base-800)}:host .ghost:disabled,:host .ghost.disabled,:host .ghost[aria-disabled=true]{color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .ghost:disabled::placeholder,:host .ghost.disabled::placeholder,:host .ghost[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .danger.primary{background:var(--gds-sys-color-dark-red-1);border-color:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--color: var(--gds-sys-color-text-white);transition:border var(--gds-sys-transition)}:host .danger.primary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-red-1)}:host .danger.primary[aria-selected=true],:host .danger.primary:active,:host .danger.primary.active,:host .danger.primary.active:hover,:host .danger.primary:active:hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-red-1)}:host .danger.primary[aria-selected]:hover,:host .danger.primary.active:hover,:host .danger.primary:active:hover{opacity:.9}:host .danger.primary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger.primary:focus,:host .danger.primary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .danger.primary:disabled,:host .danger.primary.disabled,:host .danger.primary[aria-disabled=true]{background:var(--gds-sys-color-background-primary)!important;color:var(--gds-sys-color-text-white)!important;border-color:var(--gds-sys-color-dark-red-1)!important;cursor:not-allowed}:host .danger.primary:disabled::placeholder,:host .danger.primary.disabled::placeholder,:host .danger.primary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .danger:not(.primary){color:var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-dark-red-1);border-color:transparent;transition:border var(--gds-sys-transition)}:host .danger:not(.primary):not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-red-1)}:host .danger:not(.primary)[aria-selected=true],:host .danger:not(.primary):active,:host .danger:not(.primary).active,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-red-1)}:host .danger:not(.primary)[aria-selected]:hover,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{opacity:.9}:host .danger:not(.primary):focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger:not(.primary):focus,:host .danger:not(.primary):focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NggvExternalLinkDirective, selector: "a[routerLink]", inputs: ["external"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
|
|
596
596
|
}
|
|
597
597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvButtonComponent, decorators: [{
|
|
598
598
|
type: Component,
|
|
599
|
-
args: [{ selector: 'nggv-button', standalone: false, template: "<button\n #input\n [ngClass]=\"buttonClasses\"\n [id]=\"id + '-button'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [type]=\"type\"\n [autofocus]=\"autofocus\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"description\"\n (click)=\"onClick($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n *ngIf=\"type !== 'link'\"\n>\n <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</button>\n\n<a\n #input\n [ngClass]=\"buttonClasses\"\n role=\"button\"\n [id]=\"id + '-link'\"\n [routerLink]=\"href\"\n [external]=\"external\"\n [attr.aria-label]=\"description\"\n (click)=\"onClick($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n *ngIf=\"type === 'link'\"\n>\n <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</a>\n\n<ng-template #contentRef>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--gds-sys-color-focus-outline: #1a1a1a}:host button,:host a{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host button:focus:not(:focus-visible),:host a:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible,:host a:focus,:host a:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button,:host a{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host button,:host a{min-width:100%}}@media screen and (-ms-high-contrast:active){:host button,:host a{border:2px solid currentcolor}}:host button.small,:host a.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host button.large,:host a.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button,:host a{font-size:1rem;font-family:inherit}:host .primary{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .primary[aria-selected=true],:host .primary:active,:host .primary.active,:host .primary.active:hover,:host .primary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .primary:focus-visible{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3!important}:host .primary{background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .primary:disabled,:host .primary.disabled,:host .primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .primary:disabled::placeholder,:host .primary.disabled::placeholder,:host .primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .secondary:focus,:host .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .secondary{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .secondary[aria-selected=true],:host .secondary:active,:host .secondary.active,:host .secondary.active:hover,:host .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .secondary{background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .secondary:disabled,:host .secondary.disabled,:host .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .secondary:disabled::placeholder,:host .secondary.disabled::placeholder,:host .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .tertiary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .tertiary:focus,:host .tertiary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .tertiary{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .tertiary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .tertiary[aria-selected=true],:host .tertiary:active,:host .tertiary.active,:host .tertiary.active:hover,:host .tertiary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .tertiary{background:transparent;border-color:transparent;color:#007ac7;--color: rgb(0, 122, 199)}:host .tertiary:disabled,:host .tertiary.disabled,:host .tertiary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .tertiary:disabled::placeholder,:host .tertiary.disabled::placeholder,:host .tertiary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost-light{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .ghost-light:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected=true],:host .ghost-light:active,:host .ghost-light.active,:host .ghost-light.active:hover,:host .ghost-light:active:hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected]:hover,:host .ghost-light.active:hover,:host .ghost-light:active:hover{opacity:.9}:host .ghost-light:focus-visible{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff!important}:host .ghost-light{border-color:#fff;color:#fff;--color: rgb(255, 255, 255)}:host .ghost-light:disabled,:host .ghost-light.disabled,:host .ghost-light[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost-light:disabled::placeholder,:host .ghost-light.disabled::placeholder,:host .ghost-light[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .ghost:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .ghost[aria-selected=true],:host .ghost:active,:host .ghost.active,:host .ghost.active:hover,:host .ghost:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .ghost[aria-selected]:hover,:host .ghost.active:hover,:host .ghost:active:hover{opacity:.9}:host .ghost:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .ghost{border-color:#333;color:#333;--color: rgb(51, 51, 51)}:host .ghost:disabled,:host .ghost.disabled,:host .ghost[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost:disabled::placeholder,:host .ghost.disabled::placeholder,:host .ghost[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger.primary{background:#bb000c;border-color:#bb000c;color:#fff;--color: #fff;transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger.primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger.primary[aria-selected=true],:host .danger.primary:active,:host .danger.primary.active,:host .danger.primary.active:hover,:host .danger.primary:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger.primary[aria-selected]:hover,:host .danger.primary.active:hover,:host .danger.primary:active:hover{opacity:.9}:host .danger.primary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger.primary:focus,:host .danger.primary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .danger.primary:disabled,:host .danger.primary.disabled,:host .danger.primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .danger.primary:disabled::placeholder,:host .danger.primary.disabled::placeholder,:host .danger.primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger:not(.primary){color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger:not(.primary):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger:not(.primary)[aria-selected=true],:host .danger:not(.primary):active,:host .danger:not(.primary).active,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger:not(.primary)[aria-selected]:hover,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{opacity:.9}:host .danger:not(.primary):focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger:not(.primary):focus,:host .danger:not(.primary):focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}\n"] }]
|
|
599
|
+
args: [{ selector: 'nggv-button', standalone: false, template: "<button\n #input\n [ngClass]=\"buttonClasses\"\n [id]=\"id + '-button'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [type]=\"type\"\n [autofocus]=\"autofocus\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"description\"\n (click)=\"onClick($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n *ngIf=\"type !== 'link'\"\n>\n <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</button>\n\n<a\n #input\n [ngClass]=\"buttonClasses\"\n role=\"button\"\n [id]=\"id + '-link'\"\n [routerLink]=\"href\"\n [external]=\"external\"\n [attr.aria-label]=\"description\"\n (click)=\"onClick($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n *ngIf=\"type === 'link'\"\n>\n <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</a>\n\n<ng-template #contentRef>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host button,:host a{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host button:focus:not(:focus-visible),:host a:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible,:host a:focus,:host a:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button,:host a{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host button,:host a{min-width:100%}}@media screen and (-ms-high-contrast:active){:host button,:host a{border:2px solid currentcolor}}:host button.small,:host a.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host button.large,:host a.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button,:host a{box-sizing:border-box;font-size:1rem;font-family:inherit}:host .primary{transition:border var(--gds-sys-transition)}:host .primary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .primary[aria-selected=true],:host .primary:active,:host .primary.active,:host .primary.active:hover,:host .primary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .primary{background:var(--gds-sys-color-dark-blue-2);border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--color: var(--gds-sys-color-text-white)}:host .primary:disabled,:host .primary.disabled,:host .primary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .primary:disabled::placeholder,:host .primary.disabled::placeholder,:host .primary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .secondary:focus,:host .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .secondary{transition:border var(--gds-sys-transition)}:host .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .secondary[aria-selected=true],:host .secondary:active,:host .secondary.active,:host .secondary.active:hover,:host .secondary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .secondary{background:transparent;border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-dark-blue-2);--color: var(--gds-sys-color-dark-blue-2)}:host .secondary:disabled,:host .secondary.disabled,:host .secondary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .secondary:disabled::placeholder,:host .secondary.disabled::placeholder,:host .secondary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .tertiary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .tertiary:focus,:host .tertiary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .tertiary{transition:border var(--gds-sys-transition)}:host .tertiary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .tertiary[aria-selected=true],:host .tertiary:active,:host .tertiary.active,:host .tertiary.active:hover,:host .tertiary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .tertiary{background:transparent;border-color:transparent;color:var(--gds-sys-color-dark-blue-2);--color: var(--gds-sys-color-dark-blue-2)}:host .tertiary:disabled,:host .tertiary.disabled,:host .tertiary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .tertiary:disabled::placeholder,:host .tertiary.disabled::placeholder,:host .tertiary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .ghost-light{--gds-sys-color-focus-outline: var(--gds-sys-color-white);transition:border var(--gds-sys-transition)}:host .ghost-light:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-white);color:var(--gds-sys-color-text-primary);--background: var(--gds-sys-color-white);--color: var(--gds-sys-color-text-primary);border-color:var(--gds-sys-color-white)}:host .ghost-light[aria-selected=true],:host .ghost-light:active,:host .ghost-light.active,:host .ghost-light.active:hover,:host .ghost-light:active:hover{background:var(--gds-sys-color-base-200);color:var(--gds-sys-color-text-primary);--background: $bg;--color: $color;border-color:var(--gds-sys-color-base-200)}:host .ghost-light[aria-selected]:hover,:host .ghost-light.active:hover,:host .ghost-light:active:hover{opacity:.9}:host .ghost-light{background-color:transparent;border-color:var(--gds-sys-color-white);color:var(--gds-sys-color-white);--color: var(--gds-sys-color-white)}:host .ghost-light:disabled,:host .ghost-light.disabled,:host .ghost-light[aria-disabled=true]{color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .ghost-light:disabled::placeholder,:host .ghost-light.disabled::placeholder,:host .ghost-light[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .ghost{transition:border var(--gds-sys-transition)}:host .ghost:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}:host .ghost[aria-selected=true],:host .ghost:active,:host .ghost.active,:host .ghost.active:hover,:host .ghost:active:hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-base-800)}:host .ghost[aria-selected]:hover,:host .ghost.active:hover,:host .ghost:active:hover{opacity:.9}:host .ghost{background-color:transparent;border-color:var(--gds-sys-color-base-800);color:var(--gds-sys-color-base-800);--color: var(--gds-sys-color-base-800)}:host .ghost:disabled,:host .ghost.disabled,:host .ghost[aria-disabled=true]{color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .ghost:disabled::placeholder,:host .ghost.disabled::placeholder,:host .ghost[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .danger.primary{background:var(--gds-sys-color-dark-red-1);border-color:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--color: var(--gds-sys-color-text-white);transition:border var(--gds-sys-transition)}:host .danger.primary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-red-1)}:host .danger.primary[aria-selected=true],:host .danger.primary:active,:host .danger.primary.active,:host .danger.primary.active:hover,:host .danger.primary:active:hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-red-1)}:host .danger.primary[aria-selected]:hover,:host .danger.primary.active:hover,:host .danger.primary:active:hover{opacity:.9}:host .danger.primary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger.primary:focus,:host .danger.primary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .danger.primary:disabled,:host .danger.primary.disabled,:host .danger.primary[aria-disabled=true]{background:var(--gds-sys-color-background-primary)!important;color:var(--gds-sys-color-text-white)!important;border-color:var(--gds-sys-color-dark-red-1)!important;cursor:not-allowed}:host .danger.primary:disabled::placeholder,:host .danger.primary.disabled::placeholder,:host .danger.primary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .danger:not(.primary){color:var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-dark-red-1);border-color:transparent;transition:border var(--gds-sys-transition)}:host .danger:not(.primary):not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-red-1)}:host .danger:not(.primary)[aria-selected=true],:host .danger:not(.primary):active,:host .danger:not(.primary).active,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-red-1)}:host .danger:not(.primary)[aria-selected]:hover,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{opacity:.9}:host .danger:not(.primary):focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger:not(.primary):focus,:host .danger:not(.primary):focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}\n"] }]
|
|
600
600
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
601
601
|
type: Self
|
|
602
602
|
}, {
|
|
@@ -639,11 +639,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
639
639
|
|
|
640
640
|
class NggvCardComponent {
|
|
641
641
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
642
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvCardComponent, isStandalone: false, selector: "nggv-card", ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host{--
|
|
642
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvCardComponent, isStandalone: false, selector: "nggv-card", ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);background-clip:border-box;background:var(--gds-sys-color-background-primary);border:none;border-radius:4px;box-shadow:0 0 12px #0000001a;color:var(--gds-sys-color-text-primary);display:flex;flex-direction:column;padding:1rem}:host>header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;margin-block-end:1rem}:host>header .close{margin:-.5rem -.5rem -.5rem .5rem}:host>*:not(header,footer){flex:1 1 auto}:host>footer{margin-top:.75rem}@media(min-width:36em){:host>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host>footer button:not(.link)+button,:host>footer button:not(.link)+.button,:host>footer .button:not(.link)+button,:host>footer .button:not(.link)+.button{margin-top:.75rem}}@media(min-width:36em){:host>footer button:not(.link)+button,:host>footer button:not(.link)+.button,:host>footer .button:not(.link)+button,:host>footer .button:not(.link)+.button{margin-left:.75rem}}:host:has(.card-row){display:table;width:inherit;box-sizing:border-box}:host ::ng-deep .card-row{display:table-row}:host ::ng-deep .card-row *{padding-bottom:.5rem}:host ::ng-deep .card-row:last-child *{padding-bottom:0}:host ::ng-deep .card-row.divider *{border-top:1px solid #d8d8d8;padding-top:.375rem}:host ::ng-deep .card-column{display:table-cell;text-align:start}:host ::ng-deep .card-column:first-child{text-align:start}:host ::ng-deep .card-column:not(:first-child):not(:last-child){text-align:center}:host ::ng-deep .card-column:last-child{text-align:end}\n"] }); }
|
|
643
643
|
}
|
|
644
644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvCardComponent, decorators: [{
|
|
645
645
|
type: Component,
|
|
646
|
-
args: [{ selector: 'nggv-card', template: ` <ng-content></ng-content> `, standalone: false, styles: [":host{--
|
|
646
|
+
args: [{ selector: 'nggv-card', template: ` <ng-content></ng-content> `, standalone: false, styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);background-clip:border-box;background:var(--gds-sys-color-background-primary);border:none;border-radius:4px;box-shadow:0 0 12px #0000001a;color:var(--gds-sys-color-text-primary);display:flex;flex-direction:column;padding:1rem}:host>header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;margin-block-end:1rem}:host>header .close{margin:-.5rem -.5rem -.5rem .5rem}:host>*:not(header,footer){flex:1 1 auto}:host>footer{margin-top:.75rem}@media(min-width:36em){:host>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host>footer button:not(.link)+button,:host>footer button:not(.link)+.button,:host>footer .button:not(.link)+button,:host>footer .button:not(.link)+.button{margin-top:.75rem}}@media(min-width:36em){:host>footer button:not(.link)+button,:host>footer button:not(.link)+.button,:host>footer .button:not(.link)+button,:host>footer .button:not(.link)+.button{margin-left:.75rem}}:host:has(.card-row){display:table;width:inherit;box-sizing:border-box}:host ::ng-deep .card-row{display:table-row}:host ::ng-deep .card-row *{padding-bottom:.5rem}:host ::ng-deep .card-row:last-child *{padding-bottom:0}:host ::ng-deep .card-row.divider *{border-top:1px solid #d8d8d8;padding-top:.375rem}:host ::ng-deep .card-column{display:table-cell;text-align:start}:host ::ng-deep .card-column:first-child{text-align:start}:host ::ng-deep .card-column:not(:first-child):not(:last-child){text-align:center}:host ::ng-deep .card-column:last-child{text-align:end}\n"] }]
|
|
647
647
|
}] });
|
|
648
648
|
|
|
649
649
|
class NggvCardModule {
|
|
@@ -854,11 +854,11 @@ class NggvCheckboxComponent extends NggvBaseControlValueAccessorComponent$1 {
|
|
|
854
854
|
};
|
|
855
855
|
}
|
|
856
856
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvCheckboxComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
857
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvCheckboxComponent, isStandalone: false, selector: "nggv-checkbox", inputs: { thook: "thook", size: "size", optionalLabel: "optionalLabel" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, 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 || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n <!-- 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-base-300);--gds-comp-checkbox-border-color: var(--gds-sys-color-base-900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base-600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base-900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2)}: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}: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~i,:host label.form-control input[type=checkbox].disabled~i{box-shadow:inset 0 0 0 1px var(--border-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}: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,:host label.form-control input[type=checkbox].disabled:checked~i{box-shadow:inset 0 0 0 1px var(--border-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}:host .form-control:has(input:disabled){cursor:not-allowed}:host .form-control{line-height:1.125rem}: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}:host.small label.form-control:has(input[type=checkbox]){line-height:1rem;font-size:.875rem;padding:.38rem .5rem}:host.small label.form-control:has(input[type=checkbox]) span{margin-top:.125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
857
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvCheckboxComponent, isStandalone: false, selector: "nggv-checkbox", inputs: { thook: "thook", size: "size", optionalLabel: "optionalLabel" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, 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=\"gds-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 || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n <!-- 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=\"gds-form-info gds-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-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%}:host label.gds-form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.gds-form-control{align-items:flex-start}:host label.gds-form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.gds-form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.gds-form-control:has(input[type=checkbox]:focus-visible):focus,:host label.gds-form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.gds-form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}:host label.gds-form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}:host label.gds-form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}:host label.gds-form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}:host label.gds-form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}:host label.gds-form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);box-sizing:border-box;border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.gds-form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.gds-form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.gds-form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.gds-form-control.is-invalid{border:none;margin:0}}:host label.gds-form-control input[type=checkbox]:disabled~i,:host label.gds-form-control input[type=checkbox].disabled~i{background:var(--gds-sys-color-base-300)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host label.gds-form-control input[type=checkbox]:disabled~i::placeholder,:host label.gds-form-control input[type=checkbox].disabled~i::placeholder{color:var(--gds-sys-color-text-disabled)}:host label.gds-form-control input[type=checkbox]:disabled~i,:host label.gds-form-control input[type=checkbox].disabled~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.gds-form-control input[type=checkbox]:disabled:checked~i,:host label.gds-form-control input[type=checkbox].disabled:checked~i{background:var(--gds-sys-color-base-300)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host label.gds-form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.gds-form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--gds-sys-color-text-disabled)}:host label.gds-form-control input[type=checkbox]:disabled:checked~i,:host label.gds-form-control input[type=checkbox].disabled:checked~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.gds-form-control input[type=checkbox]:disabled:checked~i:after,:host label.gds-form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.gds-form-control input[type=checkbox]:disabled~span,:host label.gds-form-control input[type=checkbox].disabled~span{color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host label.gds-form-control input[type=checkbox]:disabled~span::placeholder,:host label.gds-form-control input[type=checkbox].disabled~span::placeholder{color:var(--gds-sys-color-text-disabled)}:host label.gds-form-control input[type=checkbox]~i:after{box-sizing:border-box;content:\"\";opacity:0;position:absolute}:host label.gds-form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}:host label.gds-form-control input[type=checkbox]:checked~i:after{opacity:1}:host .gds-form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .gds-form-control:has(input:disabled){cursor:not-allowed}:host .gds-form-control{line-height:1.125rem}:host .gds-form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .gds-form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-info--error .error-icon{margin-top:.128rem;align-items:center}:host i:after{box-sizing:border-box}:host.small label.form-control:has(input[type=checkbox]){line-height:1rem;font-size:.875rem;padding:.38rem .5rem}:host.small label.form-control:has(input[type=checkbox]) span{margin-top:.125rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
858
858
|
}
|
|
859
859
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvCheckboxComponent, decorators: [{
|
|
860
860
|
type: Component,
|
|
861
|
-
args: [{ selector: 'nggv-checkbox', standalone: false, 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 || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n <!-- 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-
|
|
861
|
+
args: [{ selector: 'nggv-checkbox', standalone: false, 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=\"gds-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 || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n <!-- 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=\"gds-form-info gds-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-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%}:host label.gds-form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.gds-form-control{align-items:flex-start}:host label.gds-form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.gds-form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.gds-form-control:has(input[type=checkbox]:focus-visible):focus,:host label.gds-form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.gds-form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}:host label.gds-form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}:host label.gds-form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}:host label.gds-form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}:host label.gds-form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}:host label.gds-form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);box-sizing:border-box;border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.gds-form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.gds-form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.gds-form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}:host .is-invalid label.gds-form-control.is-invalid{border:none;margin:0}}:host label.gds-form-control input[type=checkbox]:disabled~i,:host label.gds-form-control input[type=checkbox].disabled~i{background:var(--gds-sys-color-base-300)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host label.gds-form-control input[type=checkbox]:disabled~i::placeholder,:host label.gds-form-control input[type=checkbox].disabled~i::placeholder{color:var(--gds-sys-color-text-disabled)}:host label.gds-form-control input[type=checkbox]:disabled~i,:host label.gds-form-control input[type=checkbox].disabled~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.gds-form-control input[type=checkbox]:disabled:checked~i,:host label.gds-form-control input[type=checkbox].disabled:checked~i{background:var(--gds-sys-color-base-300)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host label.gds-form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.gds-form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--gds-sys-color-text-disabled)}:host label.gds-form-control input[type=checkbox]:disabled:checked~i,:host label.gds-form-control input[type=checkbox].disabled:checked~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.gds-form-control input[type=checkbox]:disabled:checked~i:after,:host label.gds-form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.gds-form-control input[type=checkbox]:disabled~span,:host label.gds-form-control input[type=checkbox].disabled~span{color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host label.gds-form-control input[type=checkbox]:disabled~span::placeholder,:host label.gds-form-control input[type=checkbox].disabled~span::placeholder{color:var(--gds-sys-color-text-disabled)}:host label.gds-form-control input[type=checkbox]~i:after{box-sizing:border-box;content:\"\";opacity:0;position:absolute}:host label.gds-form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}:host label.gds-form-control input[type=checkbox]:checked~i:after{opacity:1}:host .gds-form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .gds-form-control:has(input:disabled){cursor:not-allowed}:host .gds-form-control{line-height:1.125rem}:host .gds-form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .gds-form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-info--error .error-icon{margin-top:.128rem;align-items:center}:host i:after{box-sizing:border-box}:host.small label.form-control:has(input[type=checkbox]){line-height:1rem;font-size:.875rem;padding:.38rem .5rem}:host.small label.form-control:has(input[type=checkbox]) span{margin-top:.125rem}\n"] }]
|
|
862
862
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
863
863
|
type: Self
|
|
864
864
|
}, {
|
|
@@ -902,6 +902,220 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
902
902
|
}]
|
|
903
903
|
}] });
|
|
904
904
|
|
|
905
|
+
const weekdays = [
|
|
906
|
+
WeekDay.Monday,
|
|
907
|
+
WeekDay.Tuesday,
|
|
908
|
+
WeekDay.Wednesday,
|
|
909
|
+
WeekDay.Thursday,
|
|
910
|
+
WeekDay.Friday,
|
|
911
|
+
WeekDay.Saturday,
|
|
912
|
+
WeekDay.Sunday,
|
|
913
|
+
];
|
|
914
|
+
const sortWeekDays = (firstDayOfWeek) => {
|
|
915
|
+
const firstDayIndex = weekdays.indexOf(firstDayOfWeek);
|
|
916
|
+
const weekStart = weekdays.slice(firstDayIndex);
|
|
917
|
+
const weekEnd = weekdays.slice(0, firstDayIndex);
|
|
918
|
+
return weekStart.concat(weekEnd);
|
|
919
|
+
};
|
|
920
|
+
/**
|
|
921
|
+
* Safely converts a value to a Date object, handling timezone issues.
|
|
922
|
+
* If the value is already a Date, returns it as-is.
|
|
923
|
+
* If it's a string in ISO format (YYYY-MM-DD), parses it in local timezone.
|
|
924
|
+
* Otherwise, uses standard Date constructor.
|
|
925
|
+
*/
|
|
926
|
+
const toLocalDate = (value) => {
|
|
927
|
+
// If already a Date object, use it directly to avoid timezone issues
|
|
928
|
+
if (value instanceof Date) {
|
|
929
|
+
return value;
|
|
930
|
+
}
|
|
931
|
+
// If string is in ISO format (YYYY-MM-DD), parse in local timezone
|
|
932
|
+
const dateMatch = String(value).match(/^(\d{4})-(\d{2})-(\d{2})/);
|
|
933
|
+
if (dateMatch) {
|
|
934
|
+
const [, year, month, day] = dateMatch;
|
|
935
|
+
return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
|
|
936
|
+
}
|
|
937
|
+
// Otherwise use standard Date constructor
|
|
938
|
+
return new Date(value);
|
|
939
|
+
};
|
|
940
|
+
/** Sets labels and sort weekday arrays based off of first day of week. */
|
|
941
|
+
const getSortedWeekDays = (firstDayOfWeek, startDate) => {
|
|
942
|
+
if (startDate === undefined)
|
|
943
|
+
startDate = new Date();
|
|
944
|
+
// sort weekdays according to firstDayOfWeek
|
|
945
|
+
const sortedWeekdays = sortWeekDays(firstDayOfWeek);
|
|
946
|
+
// get the date object for the first day of week
|
|
947
|
+
const startDayIndex = sortedWeekdays.indexOf(startDate.getDay());
|
|
948
|
+
const firstOfWeek = new Date(startDate);
|
|
949
|
+
firstOfWeek.setDate(startDate.getDate() - startDayIndex);
|
|
950
|
+
// map each day in array to a date object
|
|
951
|
+
return sortedWeekdays.map((_, offset) => {
|
|
952
|
+
// set appropriate date
|
|
953
|
+
const weekdayDate = new Date(firstOfWeek);
|
|
954
|
+
weekdayDate.setDate(weekdayDate.getDate() + offset);
|
|
955
|
+
// and return value
|
|
956
|
+
return weekdayDate;
|
|
957
|
+
});
|
|
958
|
+
};
|
|
959
|
+
/** Generate a matrix of dates used to visualize a calendar month. */
|
|
960
|
+
const generateDateMatrix = (month, year, minWeeks = 5, firstDayOfWeek) => {
|
|
961
|
+
// generate a new matrix with 5 or 6 rows (depending on number of days in that month)
|
|
962
|
+
const matrix = new Array(minWeeks);
|
|
963
|
+
matrix.fill([]);
|
|
964
|
+
const date = new Date(year, month, 1);
|
|
965
|
+
const firstDate = firstCalendarDate(date, firstDayOfWeek);
|
|
966
|
+
// for each week in that month
|
|
967
|
+
const dateMatrix = matrix.map((_, weekOffset) => {
|
|
968
|
+
const offset = weekOffset * 7;
|
|
969
|
+
// update the date with the offset for that week
|
|
970
|
+
const firstOfWeek = new Date(firstDate);
|
|
971
|
+
firstOfWeek.setDate(firstDate.getDate() + offset);
|
|
972
|
+
return getSortedWeekDays(firstDayOfWeek, firstOfWeek);
|
|
973
|
+
});
|
|
974
|
+
// check if another row needs to be added (if last dates of month are missing)
|
|
975
|
+
const lastAdded = dateMatrix.slice(-1)[0].slice(-1)[0];
|
|
976
|
+
const lastOfMonth = new Date(lastAdded);
|
|
977
|
+
lastOfMonth.setMonth(month + 1);
|
|
978
|
+
lastOfMonth.setDate(0);
|
|
979
|
+
if (isBefore(lastAdded, lastOfMonth)) {
|
|
980
|
+
// add another week row
|
|
981
|
+
const firstOfWeek = new Date(lastAdded);
|
|
982
|
+
firstOfWeek.setDate(lastAdded.getDate() + 1);
|
|
983
|
+
dateMatrix.push(getSortedWeekDays(firstDayOfWeek, firstOfWeek));
|
|
984
|
+
}
|
|
985
|
+
// return final datematrix
|
|
986
|
+
return dateMatrix;
|
|
987
|
+
};
|
|
988
|
+
/** Returns the first date used in the calendars first button. */
|
|
989
|
+
const firstCalendarDate = (date, firstDayOfWeek) => {
|
|
990
|
+
// sort weekdays according to firstDayOfWeek
|
|
991
|
+
const sortedWeekdays = sortWeekDays(firstDayOfWeek);
|
|
992
|
+
// set date to the first of month
|
|
993
|
+
const firstOfMonth = new Date(date);
|
|
994
|
+
firstOfMonth.setDate(1);
|
|
995
|
+
// get the offset
|
|
996
|
+
const offset = sortedWeekdays.indexOf(firstOfMonth.getDay());
|
|
997
|
+
const firstOfWeek = new Date(firstOfMonth);
|
|
998
|
+
// use offset to set date
|
|
999
|
+
firstOfWeek.setDate(1 - offset);
|
|
1000
|
+
return firstOfWeek;
|
|
1001
|
+
};
|
|
1002
|
+
const getDayOffset = (from, to, firstDayOfWeek, direction) => {
|
|
1003
|
+
const sortedWeekdays = sortWeekDays(firstDayOfWeek);
|
|
1004
|
+
const fromIndex = sortedWeekdays.indexOf(from);
|
|
1005
|
+
const toIndex = sortedWeekdays.indexOf(to);
|
|
1006
|
+
const offset = toIndex - fromIndex;
|
|
1007
|
+
if (direction === 'forward' && offset < 0)
|
|
1008
|
+
return offset + 6;
|
|
1009
|
+
if (direction === 'back' && offset > 0)
|
|
1010
|
+
return offset - 6;
|
|
1011
|
+
return offset;
|
|
1012
|
+
};
|
|
1013
|
+
/** Returns an array of Dates for each of month. */
|
|
1014
|
+
const getMonthArray = () => {
|
|
1015
|
+
const firstDayOfYear = new Date();
|
|
1016
|
+
firstDayOfYear.setMonth(0);
|
|
1017
|
+
firstDayOfYear.setDate(1);
|
|
1018
|
+
// create a new array of length 12,
|
|
1019
|
+
// and fill it with date objects of 1:st of january
|
|
1020
|
+
const monthArray = new Array(12).fill(firstDayOfYear);
|
|
1021
|
+
// map through the array,
|
|
1022
|
+
// and create a new instance of the date,
|
|
1023
|
+
// changing the month based on index (0 - 11)
|
|
1024
|
+
return monthArray.map((d, index) => {
|
|
1025
|
+
const date = new Date(d);
|
|
1026
|
+
date.setMonth(index);
|
|
1027
|
+
return date;
|
|
1028
|
+
});
|
|
1029
|
+
};
|
|
1030
|
+
/** Returns an array of Dates for the current year and the next. */
|
|
1031
|
+
const getYearArray = () => {
|
|
1032
|
+
const currentYear = new Date();
|
|
1033
|
+
currentYear.setMonth(0);
|
|
1034
|
+
currentYear.setDate(1);
|
|
1035
|
+
const nextYear = new Date(currentYear);
|
|
1036
|
+
nextYear.setFullYear(currentYear.getFullYear() + 1);
|
|
1037
|
+
return [currentYear, nextYear];
|
|
1038
|
+
};
|
|
1039
|
+
/** Returns true if the two dates have the same year, month and date values. */
|
|
1040
|
+
const match = (a, b) => {
|
|
1041
|
+
if (!a || !b)
|
|
1042
|
+
return false;
|
|
1043
|
+
if (a.getDate() !== b.getDate())
|
|
1044
|
+
return false;
|
|
1045
|
+
if (a.getMonth() !== b.getMonth())
|
|
1046
|
+
return false;
|
|
1047
|
+
if (a.getFullYear() !== b.getFullYear())
|
|
1048
|
+
return false;
|
|
1049
|
+
return true;
|
|
1050
|
+
};
|
|
1051
|
+
const afterClosingHours = (closingHours) => {
|
|
1052
|
+
if (!closingHours)
|
|
1053
|
+
return false;
|
|
1054
|
+
return Date.now() >= closingHours.getTime();
|
|
1055
|
+
};
|
|
1056
|
+
/**
|
|
1057
|
+
* Checks if a date is before control date, regardless of time.
|
|
1058
|
+
*
|
|
1059
|
+
* @param date - comparison date
|
|
1060
|
+
* @param controlDate - date to compare against
|
|
1061
|
+
* @returns - true if the comparison date is before the control date
|
|
1062
|
+
*/
|
|
1063
|
+
const isBefore = (date, controlDate) => {
|
|
1064
|
+
// if year values are dissimilar
|
|
1065
|
+
if (date.getFullYear() !== controlDate.getFullYear()) {
|
|
1066
|
+
return date.getFullYear() < controlDate.getFullYear();
|
|
1067
|
+
}
|
|
1068
|
+
// if month values are dissimilar
|
|
1069
|
+
if (date.getMonth() !== controlDate.getMonth()) {
|
|
1070
|
+
return date.getMonth() < controlDate.getMonth();
|
|
1071
|
+
}
|
|
1072
|
+
// if year and month are equal, check the date
|
|
1073
|
+
return date.getDate() < controlDate.getDate();
|
|
1074
|
+
};
|
|
1075
|
+
/**
|
|
1076
|
+
* Checks if a date is after control date, regardless of time.
|
|
1077
|
+
*
|
|
1078
|
+
* @param date - comparison date
|
|
1079
|
+
* @param controlDate - date to compare against
|
|
1080
|
+
* @returns - true if the comparison date is before the control date
|
|
1081
|
+
*/
|
|
1082
|
+
const isAfter = (date, controlDate) => {
|
|
1083
|
+
// if year values are dissimilar
|
|
1084
|
+
if (date.getFullYear() !== controlDate.getFullYear()) {
|
|
1085
|
+
return date.getFullYear() > controlDate.getFullYear();
|
|
1086
|
+
}
|
|
1087
|
+
// if month values are dissimilar
|
|
1088
|
+
if (date.getMonth() !== controlDate.getMonth()) {
|
|
1089
|
+
return date.getMonth() > controlDate.getMonth();
|
|
1090
|
+
}
|
|
1091
|
+
// if year and month are equal, check the date
|
|
1092
|
+
return date.getDate() > controlDate.getDate();
|
|
1093
|
+
};
|
|
1094
|
+
/**
|
|
1095
|
+
* Checks if a value can be used to initiate a new Date object.
|
|
1096
|
+
*
|
|
1097
|
+
* @param value any value
|
|
1098
|
+
* @returns - true if value can be coersed to a Date.
|
|
1099
|
+
*/
|
|
1100
|
+
const isValid = (value) => {
|
|
1101
|
+
// if value is type of string and can be parsed to a Date
|
|
1102
|
+
const date = value && typeof value === 'string' && !isNaN(Date.parse(value))
|
|
1103
|
+
? new Date(value)
|
|
1104
|
+
: null;
|
|
1105
|
+
switch (true) {
|
|
1106
|
+
// if date or value is a valid date object - return valid
|
|
1107
|
+
case typeof value?.getMonth === 'function':
|
|
1108
|
+
case typeof date?.getMonth === 'function':
|
|
1109
|
+
return true;
|
|
1110
|
+
// if date or value is not a valid date object - return invalid
|
|
1111
|
+
case value == null:
|
|
1112
|
+
case date?.toString() === 'Invalid Date':
|
|
1113
|
+
return false;
|
|
1114
|
+
default:
|
|
1115
|
+
return false;
|
|
1116
|
+
}
|
|
1117
|
+
};
|
|
1118
|
+
|
|
905
1119
|
/**
|
|
906
1120
|
* Helper function to generate InputmaskOptions by requested locale.
|
|
907
1121
|
* @param locale - requested locale. If not given, it'll use the browsers locale
|
|
@@ -1325,7 +1539,7 @@ class DateControlValueAccessorComponent {
|
|
|
1325
1539
|
try {
|
|
1326
1540
|
// if value is type of string,
|
|
1327
1541
|
if (value && typeof value === 'string')
|
|
1328
|
-
value =
|
|
1542
|
+
value = toLocalDate(value);
|
|
1329
1543
|
switch (true) {
|
|
1330
1544
|
// remove instances where the value will not correctly be parsed to a date string
|
|
1331
1545
|
case value == null:
|
|
@@ -1333,8 +1547,7 @@ class DateControlValueAccessorComponent {
|
|
|
1333
1547
|
return null;
|
|
1334
1548
|
// if value-as-date is a valid date object, parse the value to YYYY-MM-DD format
|
|
1335
1549
|
case typeof value?.getMonth === 'function':
|
|
1336
|
-
|
|
1337
|
-
return date.toISOString().split('T')[0];
|
|
1550
|
+
return new Intl.DateTimeFormat('sv-SE').format(value);
|
|
1338
1551
|
default:
|
|
1339
1552
|
return value;
|
|
1340
1553
|
}
|
|
@@ -1595,200 +1808,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
1595
1808
|
type: Output
|
|
1596
1809
|
}] } });
|
|
1597
1810
|
|
|
1598
|
-
const weekdays = [
|
|
1599
|
-
WeekDay.Monday,
|
|
1600
|
-
WeekDay.Tuesday,
|
|
1601
|
-
WeekDay.Wednesday,
|
|
1602
|
-
WeekDay.Thursday,
|
|
1603
|
-
WeekDay.Friday,
|
|
1604
|
-
WeekDay.Saturday,
|
|
1605
|
-
WeekDay.Sunday,
|
|
1606
|
-
];
|
|
1607
|
-
const sortWeekDays = (firstDayOfWeek) => {
|
|
1608
|
-
const firstDayIndex = weekdays.indexOf(firstDayOfWeek);
|
|
1609
|
-
const weekStart = weekdays.slice(firstDayIndex);
|
|
1610
|
-
const weekEnd = weekdays.slice(0, firstDayIndex);
|
|
1611
|
-
return weekStart.concat(weekEnd);
|
|
1612
|
-
};
|
|
1613
|
-
/** Sets labels and sort weekday arrays based off of first day of week. */
|
|
1614
|
-
const getSortedWeekDays = (firstDayOfWeek, startDate) => {
|
|
1615
|
-
if (startDate === undefined)
|
|
1616
|
-
startDate = new Date();
|
|
1617
|
-
// sort weekdays according to firstDayOfWeek
|
|
1618
|
-
const sortedWeekdays = sortWeekDays(firstDayOfWeek);
|
|
1619
|
-
// get the date object for the first day of week
|
|
1620
|
-
const startDayIndex = sortedWeekdays.indexOf(startDate.getDay());
|
|
1621
|
-
const firstOfWeek = new Date(startDate);
|
|
1622
|
-
firstOfWeek.setDate(startDate.getDate() - startDayIndex);
|
|
1623
|
-
// map each day in array to a date object
|
|
1624
|
-
return sortedWeekdays.map((_, offset) => {
|
|
1625
|
-
// set appropriate date
|
|
1626
|
-
const weekdayDate = new Date(firstOfWeek);
|
|
1627
|
-
weekdayDate.setDate(weekdayDate.getDate() + offset);
|
|
1628
|
-
// and return value
|
|
1629
|
-
return weekdayDate;
|
|
1630
|
-
});
|
|
1631
|
-
};
|
|
1632
|
-
/** Generate a matrix of dates used to visualize a calendar month. */
|
|
1633
|
-
const generateDateMatrix = (month, year, minWeeks = 5, firstDayOfWeek) => {
|
|
1634
|
-
// generate a new matrix with 5 or 6 rows (depending on number of days in that month)
|
|
1635
|
-
const matrix = new Array(minWeeks);
|
|
1636
|
-
matrix.fill([]);
|
|
1637
|
-
const date = new Date(year, month, 1);
|
|
1638
|
-
const firstDate = firstCalendarDate(date, firstDayOfWeek);
|
|
1639
|
-
// for each week in that month
|
|
1640
|
-
const dateMatrix = matrix.map((_, weekOffset) => {
|
|
1641
|
-
const offset = weekOffset * 7;
|
|
1642
|
-
// update the date with the offset for that week
|
|
1643
|
-
const firstOfWeek = new Date(firstDate);
|
|
1644
|
-
firstOfWeek.setDate(firstDate.getDate() + offset);
|
|
1645
|
-
return getSortedWeekDays(firstDayOfWeek, firstOfWeek);
|
|
1646
|
-
});
|
|
1647
|
-
// check if another row needs to be added (if last dates of month are missing)
|
|
1648
|
-
const lastAdded = dateMatrix.slice(-1)[0].slice(-1)[0];
|
|
1649
|
-
const lastOfMonth = new Date(lastAdded);
|
|
1650
|
-
lastOfMonth.setMonth(month + 1);
|
|
1651
|
-
lastOfMonth.setDate(0);
|
|
1652
|
-
if (isBefore(lastAdded, lastOfMonth)) {
|
|
1653
|
-
// add another week row
|
|
1654
|
-
const firstOfWeek = new Date(lastAdded);
|
|
1655
|
-
firstOfWeek.setDate(lastAdded.getDate() + 1);
|
|
1656
|
-
dateMatrix.push(getSortedWeekDays(firstDayOfWeek, firstOfWeek));
|
|
1657
|
-
}
|
|
1658
|
-
// return final datematrix
|
|
1659
|
-
return dateMatrix;
|
|
1660
|
-
};
|
|
1661
|
-
/** Returns the first date used in the calendars first button. */
|
|
1662
|
-
const firstCalendarDate = (date, firstDayOfWeek) => {
|
|
1663
|
-
// sort weekdays according to firstDayOfWeek
|
|
1664
|
-
const sortedWeekdays = sortWeekDays(firstDayOfWeek);
|
|
1665
|
-
// set date to the first of month
|
|
1666
|
-
const firstOfMonth = new Date(date);
|
|
1667
|
-
firstOfMonth.setDate(1);
|
|
1668
|
-
// get the offset
|
|
1669
|
-
const offset = sortedWeekdays.indexOf(firstOfMonth.getDay());
|
|
1670
|
-
const firstOfWeek = new Date(firstOfMonth);
|
|
1671
|
-
// use offset to set date
|
|
1672
|
-
firstOfWeek.setDate(1 - offset);
|
|
1673
|
-
return firstOfWeek;
|
|
1674
|
-
};
|
|
1675
|
-
const getDayOffset = (from, to, firstDayOfWeek, direction) => {
|
|
1676
|
-
const sortedWeekdays = sortWeekDays(firstDayOfWeek);
|
|
1677
|
-
const fromIndex = sortedWeekdays.indexOf(from);
|
|
1678
|
-
const toIndex = sortedWeekdays.indexOf(to);
|
|
1679
|
-
const offset = toIndex - fromIndex;
|
|
1680
|
-
if (direction === 'forward' && offset < 0)
|
|
1681
|
-
return offset + 6;
|
|
1682
|
-
if (direction === 'back' && offset > 0)
|
|
1683
|
-
return offset - 6;
|
|
1684
|
-
return offset;
|
|
1685
|
-
};
|
|
1686
|
-
/** Returns an array of Dates for each of month. */
|
|
1687
|
-
const getMonthArray = () => {
|
|
1688
|
-
const firstDayOfYear = new Date();
|
|
1689
|
-
firstDayOfYear.setMonth(0);
|
|
1690
|
-
firstDayOfYear.setDate(1);
|
|
1691
|
-
// create a new array of length 12,
|
|
1692
|
-
// and fill it with date objects of 1:st of january
|
|
1693
|
-
const monthArray = new Array(12).fill(firstDayOfYear);
|
|
1694
|
-
// map through the array,
|
|
1695
|
-
// and create a new instance of the date,
|
|
1696
|
-
// changing the month based on index (0 - 11)
|
|
1697
|
-
return monthArray.map((d, index) => {
|
|
1698
|
-
const date = new Date(d);
|
|
1699
|
-
date.setMonth(index);
|
|
1700
|
-
return date;
|
|
1701
|
-
});
|
|
1702
|
-
};
|
|
1703
|
-
/** Returns an array of Dates for the current year and the next. */
|
|
1704
|
-
const getYearArray = () => {
|
|
1705
|
-
const currentYear = new Date();
|
|
1706
|
-
currentYear.setMonth(0);
|
|
1707
|
-
currentYear.setDate(1);
|
|
1708
|
-
const nextYear = new Date(currentYear);
|
|
1709
|
-
nextYear.setFullYear(currentYear.getFullYear() + 1);
|
|
1710
|
-
return [currentYear, nextYear];
|
|
1711
|
-
};
|
|
1712
|
-
/** Returns true if the two dates have the same year, month and date values. */
|
|
1713
|
-
const match = (a, b) => {
|
|
1714
|
-
if (!a || !b)
|
|
1715
|
-
return false;
|
|
1716
|
-
if (a.getDate() !== b.getDate())
|
|
1717
|
-
return false;
|
|
1718
|
-
if (a.getMonth() !== b.getMonth())
|
|
1719
|
-
return false;
|
|
1720
|
-
if (a.getFullYear() !== b.getFullYear())
|
|
1721
|
-
return false;
|
|
1722
|
-
return true;
|
|
1723
|
-
};
|
|
1724
|
-
const afterClosingHours = (closingHours) => {
|
|
1725
|
-
if (!closingHours)
|
|
1726
|
-
return false;
|
|
1727
|
-
return Date.now() >= closingHours.getTime();
|
|
1728
|
-
};
|
|
1729
|
-
/**
|
|
1730
|
-
* Checks if a date is before control date, regardless of time.
|
|
1731
|
-
*
|
|
1732
|
-
* @param date - comparison date
|
|
1733
|
-
* @param controlDate - date to compare against
|
|
1734
|
-
* @returns - true if the comparison date is before the control date
|
|
1735
|
-
*/
|
|
1736
|
-
const isBefore = (date, controlDate) => {
|
|
1737
|
-
// if year values are dissimilar
|
|
1738
|
-
if (date.getFullYear() !== controlDate.getFullYear()) {
|
|
1739
|
-
return date.getFullYear() < controlDate.getFullYear();
|
|
1740
|
-
}
|
|
1741
|
-
// if month values are dissimilar
|
|
1742
|
-
if (date.getMonth() !== controlDate.getMonth()) {
|
|
1743
|
-
return date.getMonth() < controlDate.getMonth();
|
|
1744
|
-
}
|
|
1745
|
-
// if year and month are equal, check the date
|
|
1746
|
-
return date.getDate() < controlDate.getDate();
|
|
1747
|
-
};
|
|
1748
|
-
/**
|
|
1749
|
-
* Checks if a date is after control date, regardless of time.
|
|
1750
|
-
*
|
|
1751
|
-
* @param date - comparison date
|
|
1752
|
-
* @param controlDate - date to compare against
|
|
1753
|
-
* @returns - true if the comparison date is before the control date
|
|
1754
|
-
*/
|
|
1755
|
-
const isAfter = (date, controlDate) => {
|
|
1756
|
-
// if year values are dissimilar
|
|
1757
|
-
if (date.getFullYear() !== controlDate.getFullYear()) {
|
|
1758
|
-
return date.getFullYear() > controlDate.getFullYear();
|
|
1759
|
-
}
|
|
1760
|
-
// if month values are dissimilar
|
|
1761
|
-
if (date.getMonth() !== controlDate.getMonth()) {
|
|
1762
|
-
return date.getMonth() > controlDate.getMonth();
|
|
1763
|
-
}
|
|
1764
|
-
// if year and month are equal, check the date
|
|
1765
|
-
return date.getDate() > controlDate.getDate();
|
|
1766
|
-
};
|
|
1767
|
-
/**
|
|
1768
|
-
* Checks if a value can be used to initiate a new Date object.
|
|
1769
|
-
*
|
|
1770
|
-
* @param value any value
|
|
1771
|
-
* @returns - true if value can be coersed to a Date.
|
|
1772
|
-
*/
|
|
1773
|
-
const isValid = (value) => {
|
|
1774
|
-
// if value is type of string and can be parsed to a Date
|
|
1775
|
-
const date = value && typeof value === 'string' && !isNaN(Date.parse(value))
|
|
1776
|
-
? new Date(value)
|
|
1777
|
-
: null;
|
|
1778
|
-
switch (true) {
|
|
1779
|
-
// if date or value is a valid date object - return valid
|
|
1780
|
-
case typeof value?.getMonth === 'function':
|
|
1781
|
-
case typeof date?.getMonth === 'function':
|
|
1782
|
-
return true;
|
|
1783
|
-
// if date or value is not a valid date object - return invalid
|
|
1784
|
-
case value == null:
|
|
1785
|
-
case date?.toString() === 'Invalid Date':
|
|
1786
|
-
return false;
|
|
1787
|
-
default:
|
|
1788
|
-
return false;
|
|
1789
|
-
}
|
|
1790
|
-
};
|
|
1791
|
-
|
|
1792
1811
|
class CalendarDateDirective {
|
|
1793
1812
|
get nativeElement() {
|
|
1794
1813
|
return this.elementRef.nativeElement;
|
|
@@ -1946,7 +1965,7 @@ class CalendarComponent {
|
|
|
1946
1965
|
}
|
|
1947
1966
|
ngOnChanges(changes) {
|
|
1948
1967
|
if (changes.selected?.currentValue) {
|
|
1949
|
-
this.selected =
|
|
1968
|
+
this.selected = toLocalDate(changes.selected.currentValue);
|
|
1950
1969
|
}
|
|
1951
1970
|
if (changes.firstDayOfWeek?.currentValue) {
|
|
1952
1971
|
this.lastDayOfWeek = sortWeekDays(changes.firstDayOfWeek.currentValue).pop();
|
|
@@ -2069,11 +2088,11 @@ class CalendarComponent {
|
|
|
2069
2088
|
};
|
|
2070
2089
|
}
|
|
2071
2090
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2072
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: CalendarComponent, isStandalone: false, selector: "nggv-calendar", inputs: { year: "year", month: "month", selected: "selected", locale: "locale", minCalendarRows: "minCalendarRows", firstDayOfWeek: "firstDayOfWeek", type: "type", disableDates: "disableDates", disableWeekDays: "disableWeekDays", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime" }, outputs: { dateClick: "dateClick" }, host: { listeners: { "keydown": "keyNavigation($event)" } }, viewQueries: [{ propertyName: "dateButtonRefs", predicate: CalendarDateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let weekRow of dateMatrix\">\n <div class=\"nggv-calendar-row\">\n <button\n *ngFor=\"let date of weekRow\"\n class=\"gds-button gds-button-alternative\"\n [attr.data-thook]=\"\n date | dateThook: (date | isDisabled: disableDateConfig)\n \"\n [attr.aria-label]=\"date\"\n [calendarDate]=\"date\"\n [notWithinMonth]=\"!(month === date?.getMonth())\"\n [selected]=\"date | matches: selected\"\n [disabled]=\"date | isDisabled: disableDateConfig\"\n (click)=\"clickDate(date)\"\n >\n {{ date | date: 'd' : undefined : locale }}\n </button>\n </div>\n</ng-container>\n", styles: [":host{
|
|
2091
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: CalendarComponent, isStandalone: false, selector: "nggv-calendar", inputs: { year: "year", month: "month", selected: "selected", locale: "locale", minCalendarRows: "minCalendarRows", firstDayOfWeek: "firstDayOfWeek", type: "type", disableDates: "disableDates", disableWeekDays: "disableWeekDays", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime" }, outputs: { dateClick: "dateClick" }, host: { listeners: { "keydown": "keyNavigation($event)" } }, viewQueries: [{ propertyName: "dateButtonRefs", predicate: CalendarDateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let weekRow of dateMatrix\">\n <div class=\"nggv-calendar-row\">\n <button\n *ngFor=\"let date of weekRow\"\n class=\"gds-button gds-button-alternative\"\n [attr.data-thook]=\"\n date | dateThook: (date | isDisabled: disableDateConfig)\n \"\n [attr.aria-label]=\"date\"\n [calendarDate]=\"date\"\n [notWithinMonth]=\"!(month === date?.getMonth())\"\n [selected]=\"date | matches: selected\"\n [disabled]=\"date | isDisabled: disableDateConfig\"\n (click)=\"clickDate(date)\"\n >\n {{ date | date: 'd' : undefined : locale }}\n </button>\n </div>\n</ng-container>\n", styles: [":host{border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}:host .nggv-calendar-row{display:flex;padding:2px;gap:1px}:host .nggv-calendar-row>*{line-height:2.5rem;padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-calendar-row>*:disabled{border:0 solid transparent}:host .nggv-calendar-row>button{padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .nggv-calendar-row>button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-row>button:focus,:host .nggv-calendar-row>button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .nggv-calendar-row>button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .nggv-calendar-row>button{border:2px solid currentcolor}}:host .nggv-calendar-row>button.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .nggv-calendar-row>button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .nggv-calendar-row>button{width:15%;background:transparent;width:44px;height:44px;border-radius:4px;border:none;font-size:1rem;font-family:inherit}:host .nggv-calendar-row>button:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button:not([disabled]):focus{z-index:1;outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button[disabled]{background-color:#eee;color:#adadad}:host .nggv-calendar-row>button.today{border:1px solid #333}:host .nggv-calendar-row>button.not-within-month:not([disabled]){color:#adadad;background-color:#f8f8f8}:host .nggv-calendar-row>button.not-within-month:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button.selected:not([disabled]){background-color:#1a1a1a;border-color:#1a1a1a;text-decoration:none;color:#fff}@media(max-width:35.98em){:host .nggv-calendar-row>button{min-width:initial}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CalendarDateDirective, selector: "[calendarDate]", inputs: ["calendarDate", "selected", "notWithinMonth", "disabled"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: IsDisabledPipe, name: "isDisabled" }, { kind: "pipe", type: DateThookPipe, name: "dateThook" }, { kind: "pipe", type: MatchesPipe, name: "matches" }] }); }
|
|
2073
2092
|
}
|
|
2074
2093
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
2075
2094
|
type: Component,
|
|
2076
|
-
args: [{ selector: 'nggv-calendar', standalone: false, template: "<ng-container *ngFor=\"let weekRow of dateMatrix\">\n <div class=\"nggv-calendar-row\">\n <button\n *ngFor=\"let date of weekRow\"\n class=\"gds-button gds-button-alternative\"\n [attr.data-thook]=\"\n date | dateThook: (date | isDisabled: disableDateConfig)\n \"\n [attr.aria-label]=\"date\"\n [calendarDate]=\"date\"\n [notWithinMonth]=\"!(month === date?.getMonth())\"\n [selected]=\"date | matches: selected\"\n [disabled]=\"date | isDisabled: disableDateConfig\"\n (click)=\"clickDate(date)\"\n >\n {{ date | date: 'd' : undefined : locale }}\n </button>\n </div>\n</ng-container>\n", styles: [":host{
|
|
2095
|
+
args: [{ selector: 'nggv-calendar', standalone: false, template: "<ng-container *ngFor=\"let weekRow of dateMatrix\">\n <div class=\"nggv-calendar-row\">\n <button\n *ngFor=\"let date of weekRow\"\n class=\"gds-button gds-button-alternative\"\n [attr.data-thook]=\"\n date | dateThook: (date | isDisabled: disableDateConfig)\n \"\n [attr.aria-label]=\"date\"\n [calendarDate]=\"date\"\n [notWithinMonth]=\"!(month === date?.getMonth())\"\n [selected]=\"date | matches: selected\"\n [disabled]=\"date | isDisabled: disableDateConfig\"\n (click)=\"clickDate(date)\"\n >\n {{ date | date: 'd' : undefined : locale }}\n </button>\n </div>\n</ng-container>\n", styles: [":host{border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}:host .nggv-calendar-row{display:flex;padding:2px;gap:1px}:host .nggv-calendar-row>*{line-height:2.5rem;padding:0;display:block;flex-grow:1;text-align:center;width:20%;color:#333}:host .nggv-calendar-row>*:disabled{border:0 solid transparent}:host .nggv-calendar-row>button{padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .nggv-calendar-row>button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-row>button:focus,:host .nggv-calendar-row>button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .nggv-calendar-row>button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .nggv-calendar-row>button{border:2px solid currentcolor}}:host .nggv-calendar-row>button.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .nggv-calendar-row>button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .nggv-calendar-row>button{width:15%;background:transparent;width:44px;height:44px;border-radius:4px;border:none;font-size:1rem;font-family:inherit}:host .nggv-calendar-row>button:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button:not([disabled]):focus{z-index:1;outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-row>button[disabled]{background-color:#eee;color:#adadad}:host .nggv-calendar-row>button.today{border:1px solid #333}:host .nggv-calendar-row>button.not-within-month:not([disabled]){color:#adadad;background-color:#f8f8f8}:host .nggv-calendar-row>button.not-within-month:not([disabled]):hover{background-color:#e9e9e9}:host .nggv-calendar-row>button.selected:not([disabled]){background-color:#1a1a1a;border-color:#1a1a1a;text-decoration:none;color:#fff}@media(max-width:35.98em){:host .nggv-calendar-row>button{min-width:initial}}\n"] }]
|
|
2077
2096
|
}], propDecorators: { dateClick: [{
|
|
2078
2097
|
type: Output
|
|
2079
2098
|
}], dateButtonRefs: [{
|
|
@@ -2247,11 +2266,11 @@ class CalendarControlComponent {
|
|
|
2247
2266
|
}));
|
|
2248
2267
|
}
|
|
2249
2268
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CalendarControlComponent, deps: [{ token: i1$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2250
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: CalendarControlComponent, isStandalone: false, selector: "nggv-calendar-control", inputs: { activeCalendar: "activeCalendar", locale: "locale", type: "type" }, outputs: { calendarChange: "calendarChange" }, host: { listeners: { "keydown": "keyNavigation($event)" } }, usesOnChanges: true, ngImport: i0, template: "<button\n *ngIf=\"type === 'normal'\"\n data-thook=\"previous-month\"\n class=\"nggv-prev-button\"\n (click)=\"viewPreviousMonth()\"\n>\n <gds-icon-chevron-left *nggCoreElement></gds-icon-chevron-left>\n</button>\n\n<ng-container [formGroup]=\"selectedCalendar\">\n <select\n class=\"nggv-calendar-select\"\n data-thook=\"select-month\"\n formControlName=\"month\"\n >\n <option\n *ngFor=\"let month of monthArray\"\n class=\"gds-field-dropdown__label\"\n tabindex=\"0\"\n [value]=\"month.getMonth()\"\n >\n {{ month | date: 'MMMM' : undefined : locale }}\n </option>\n </select>\n\n <select\n class=\"nggv-calendar-select\"\n data-thook=\"select-year\"\n formControlName=\"year\"\n >\n <option\n *ngFor=\"let year of yearArray\"\n class=\"gds-field-dropdown__label\"\n tabindex=\"0\"\n [value]=\"year.getFullYear()\"\n >\n {{ year | date: 'yyyy' : undefined : locale }}\n </option>\n </select>\n</ng-container>\n\n<button\n *ngIf=\"type === 'normal'\"\n data-thook=\"next-month\"\n class=\"nggv-next-button\"\n (click)=\"viewNextMonth()\"\n>\n <gds-icon-chevron-right *nggCoreElement></gds-icon-chevron-right>\n</button>\n", styles: [":host{display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{
|
|
2269
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: CalendarControlComponent, isStandalone: false, selector: "nggv-calendar-control", inputs: { activeCalendar: "activeCalendar", locale: "locale", type: "type" }, outputs: { calendarChange: "calendarChange" }, host: { listeners: { "keydown": "keyNavigation($event)" } }, usesOnChanges: true, ngImport: i0, template: "<button\n *ngIf=\"type === 'normal'\"\n data-thook=\"previous-month\"\n class=\"nggv-prev-button\"\n (click)=\"viewPreviousMonth()\"\n>\n <gds-icon-chevron-left *nggCoreElement></gds-icon-chevron-left>\n</button>\n\n<ng-container [formGroup]=\"selectedCalendar\">\n <select\n class=\"nggv-calendar-select\"\n data-thook=\"select-month\"\n formControlName=\"month\"\n >\n <option\n *ngFor=\"let month of monthArray\"\n class=\"gds-field-dropdown__label\"\n tabindex=\"0\"\n [value]=\"month.getMonth()\"\n >\n {{ month | date: 'MMMM' : undefined : locale }}\n </option>\n </select>\n\n <select\n class=\"nggv-calendar-select\"\n data-thook=\"select-year\"\n formControlName=\"year\"\n >\n <option\n *ngFor=\"let year of yearArray\"\n class=\"gds-field-dropdown__label\"\n tabindex=\"0\"\n [value]=\"year.getFullYear()\"\n >\n {{ year | date: 'yyyy' : undefined : locale }}\n </option>\n </select>\n</ng-container>\n\n<button\n *ngIf=\"type === 'normal'\"\n data-thook=\"next-month\"\n class=\"nggv-next-button\"\n (click)=\"viewNextMonth()\"\n>\n <gds-icon-chevron-right *nggCoreElement></gds-icon-chevron-right>\n</button>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600)}:host .nggv-calendar-select:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-select:focus,:host .nggv-calendar-select:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-select{appearance:auto;background:#fff;color:#333;display:block;flex:1;font-family:inherit;font-size:.875rem;font-weight:400;line-height:2rem;max-height:2rem;max-width:100%;min-height:2rem;padding-right:3rem;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap;width:6rem}:host button.nggv-prev-button,:host button.nggv-next-button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host button.nggv-prev-button:focus:not(:focus-visible),:host button.nggv-next-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button.nggv-prev-button:focus,:host button.nggv-prev-button:focus-visible,:host button.nggv-next-button:focus,:host button.nggv-next-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button.nggv-prev-button,:host button.nggv-next-button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host button.nggv-prev-button,:host button.nggv-next-button{border:2px solid currentcolor}}:host button.nggv-prev-button.small,:host button.nggv-next-button.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host button.nggv-prev-button.large,:host button.nggv-next-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button.nggv-prev-button,:host button.nggv-next-button{border:none;height:2rem;width:2rem;padding:0 .75em}@media(max-width:47.98em){:host button.nggv-prev-button,:host button.nggv-next-button{width:3em;height:3em}}:host button.nggv-prev-button:hover,:host button.nggv-next-button:hover{background-color:#e9e9e9}@media(max-width:35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:initial}}\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$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] }); }
|
|
2251
2270
|
}
|
|
2252
2271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CalendarControlComponent, decorators: [{
|
|
2253
2272
|
type: Component,
|
|
2254
|
-
args: [{ selector: 'nggv-calendar-control', standalone: false, template: "<button\n *ngIf=\"type === 'normal'\"\n data-thook=\"previous-month\"\n class=\"nggv-prev-button\"\n (click)=\"viewPreviousMonth()\"\n>\n <gds-icon-chevron-left *nggCoreElement></gds-icon-chevron-left>\n</button>\n\n<ng-container [formGroup]=\"selectedCalendar\">\n <select\n class=\"nggv-calendar-select\"\n data-thook=\"select-month\"\n formControlName=\"month\"\n >\n <option\n *ngFor=\"let month of monthArray\"\n class=\"gds-field-dropdown__label\"\n tabindex=\"0\"\n [value]=\"month.getMonth()\"\n >\n {{ month | date: 'MMMM' : undefined : locale }}\n </option>\n </select>\n\n <select\n class=\"nggv-calendar-select\"\n data-thook=\"select-year\"\n formControlName=\"year\"\n >\n <option\n *ngFor=\"let year of yearArray\"\n class=\"gds-field-dropdown__label\"\n tabindex=\"0\"\n [value]=\"year.getFullYear()\"\n >\n {{ year | date: 'yyyy' : undefined : locale }}\n </option>\n </select>\n</ng-container>\n\n<button\n *ngIf=\"type === 'normal'\"\n data-thook=\"next-month\"\n class=\"nggv-next-button\"\n (click)=\"viewNextMonth()\"\n>\n <gds-icon-chevron-right *nggCoreElement></gds-icon-chevron-right>\n</button>\n", styles: [":host{display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{
|
|
2273
|
+
args: [{ selector: 'nggv-calendar-control', standalone: false, template: "<button\n *ngIf=\"type === 'normal'\"\n data-thook=\"previous-month\"\n class=\"nggv-prev-button\"\n (click)=\"viewPreviousMonth()\"\n>\n <gds-icon-chevron-left *nggCoreElement></gds-icon-chevron-left>\n</button>\n\n<ng-container [formGroup]=\"selectedCalendar\">\n <select\n class=\"nggv-calendar-select\"\n data-thook=\"select-month\"\n formControlName=\"month\"\n >\n <option\n *ngFor=\"let month of monthArray\"\n class=\"gds-field-dropdown__label\"\n tabindex=\"0\"\n [value]=\"month.getMonth()\"\n >\n {{ month | date: 'MMMM' : undefined : locale }}\n </option>\n </select>\n\n <select\n class=\"nggv-calendar-select\"\n data-thook=\"select-year\"\n formControlName=\"year\"\n >\n <option\n *ngFor=\"let year of yearArray\"\n class=\"gds-field-dropdown__label\"\n tabindex=\"0\"\n [value]=\"year.getFullYear()\"\n >\n {{ year | date: 'yyyy' : undefined : locale }}\n </option>\n </select>\n</ng-container>\n\n<button\n *ngIf=\"type === 'normal'\"\n data-thook=\"next-month\"\n class=\"nggv-next-button\"\n (click)=\"viewNextMonth()\"\n>\n <gds-icon-chevron-right *nggCoreElement></gds-icon-chevron-right>\n</button>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);display:flex;padding:.25rem;justify-content:space-between;align-items:center;gap:.25rem}:host .nggv-calendar-select{padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600)}:host .nggv-calendar-select:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-calendar-select:focus,:host .nggv-calendar-select:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-calendar-select{appearance:auto;background:#fff;color:#333;display:block;flex:1;font-family:inherit;font-size:.875rem;font-weight:400;line-height:2rem;max-height:2rem;max-width:100%;min-height:2rem;padding-right:3rem;padding:0 .5em;text-overflow:ellipsis;white-space:nowrap;width:6rem}:host button.nggv-prev-button,:host button.nggv-next-button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host button.nggv-prev-button:focus:not(:focus-visible),:host button.nggv-next-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button.nggv-prev-button:focus,:host button.nggv-prev-button:focus-visible,:host button.nggv-next-button:focus,:host button.nggv-next-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button.nggv-prev-button,:host button.nggv-next-button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host button.nggv-prev-button,:host button.nggv-next-button{border:2px solid currentcolor}}:host button.nggv-prev-button.small,:host button.nggv-next-button.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host button.nggv-prev-button.large,:host button.nggv-next-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button.nggv-prev-button,:host button.nggv-next-button{border:none;height:2rem;width:2rem;padding:0 .75em}@media(max-width:47.98em){:host button.nggv-prev-button,:host button.nggv-next-button{width:3em;height:3em}}:host button.nggv-prev-button:hover,:host button.nggv-next-button:hover{background-color:#e9e9e9}@media(max-width:35.98em){:host button.nggv-prev-button,:host button.nggv-next-button{min-width:initial}}\n"] }]
|
|
2255
2274
|
}], ctorParameters: () => [{ type: i1$1.UntypedFormBuilder }], propDecorators: { calendarChange: [{
|
|
2256
2275
|
type: Output
|
|
2257
2276
|
}], activeCalendar: [{
|
|
@@ -2330,7 +2349,7 @@ class DatepickerComponent {
|
|
|
2330
2349
|
!!changes.selected.currentValue &&
|
|
2331
2350
|
!changes.selected.isFirstChange()) {
|
|
2332
2351
|
// set active calendar to match selected date
|
|
2333
|
-
const activeCalendar = new CalendarMonth(
|
|
2352
|
+
const activeCalendar = new CalendarMonth(toLocalDate(changes.selected.currentValue));
|
|
2334
2353
|
this.changeActiveCalendar(activeCalendar);
|
|
2335
2354
|
}
|
|
2336
2355
|
if (changes.disableDates && !changes.disableDates.isFirstChange()) {
|
|
@@ -2380,7 +2399,7 @@ class DatepickerComponent {
|
|
|
2380
2399
|
const withinSameMonth = (a, b) => a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear();
|
|
2381
2400
|
// filter out disabled dates for current and adjacent months
|
|
2382
2401
|
return disableDates
|
|
2383
|
-
.map((d) =>
|
|
2402
|
+
.map((d) => toLocalDate(d))
|
|
2384
2403
|
.filter((d) => withinSameMonth(d, previousMonth) ||
|
|
2385
2404
|
withinSameMonth(d, targetMonth) ||
|
|
2386
2405
|
withinSameMonth(d, nextMonth));
|
|
@@ -2630,11 +2649,11 @@ class DateInputComponent extends DateControlValueAccessorComponent {
|
|
|
2630
2649
|
});
|
|
2631
2650
|
}
|
|
2632
2651
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DateInputComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i3.TranslocoService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2633
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: DateInputComponent, isStandalone: false, selector: "nggv-dateinput,nggv-input[type=date]", inputs: { thook: "thook", type: "type", readonly: "readonly", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minRows: "minRows", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime", firstDayOfWeek: "firstDayOfWeek", closeCalendarOnEscape: "closeCalendarOnEscape", closeOnScroll: "closeOnScroll", size: "size", dynamicPosition: "dynamicPosition" }, host: { listeners: { "keydown": "keyListener($event)" }, properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleCalendarButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n >\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 {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n </label>\n\n <!-- DESCRIPTION -->\n <div\n class=\"gds-field-label--small description hide-if-empty\"\n *ngIf=\"description\"\n >\n {{ description }}\n </div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state | nggvInputMaskFormat: dateInputMask }}\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- INPUT WRAPPER -->\n <ng-container *ngIf=\"!locked\">\n <div\n class=\"field-wrap\"\n [class.nggv-field--error]=\"invalid\"\n *ngIf=\"showInput$ | async\"\n >\n <!-- INPUT FIELD -->\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"nggv-field-date\"\n type=\"text\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [nggvInputMask]=\"dateInputMask\"\n [value]=\"state\"\n title=\"\"\n (change)=\"onValueChange($event.target)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <button\n aria-label=\"toggle calendar\"\n #toggleCalendarButton\n class=\"nggv-button-date\"\n type=\"button\"\n data-thook=\"toggle-calendar-button\"\n (click)=\"toggleDatepicker()\"\n [disabled]=\"disabled\"\n >\n @if (size === 'small') {\n <gds-icon-calendar *nggCoreElement size=\"16px\"></gds-icon-calendar>\n }\n\n @if (size === 'large') {\n <gds-icon-calendar *nggCoreElement size=\"20px\"></gds-icon-calendar>\n }\n </button>\n </div>\n\n <!-- DATEPICKER -->\n <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n <nggv-datepicker\n #input\n [type]=\"type\"\n [disableDates]=\"disableDates\"\n [disableWeekDays]=\"disableWeekDays\"\n [selected]=\"state\"\n [locale]=\"locale\"\n [minCalendarRows]=\"minRows\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [firstValid]=\"firstValid\"\n [lastValid]=\"lastValid\"\n [closingTime]=\"closingTime\"\n [dynamicPosition]=\"dynamicPosition\"\n [size]=\"size\"\n (ngvDateChange)=\"onDateChange($event)\"\n >\n <ng-content></ng-content>\n </nggv-datepicker>\n </div>\n\n <!-- ERRORS -->\n <ng-container\n *ngIf=\"\n invalid &&\n (error || ngControl?.invalid) &&\n (!errorList || !errorList.length)\n \"\n >\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n </label>\n </ng-container>\n <ng-container *ngFor=\"let error of errorList ?? []\">\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n *ngIf=\"invalid && error\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n </span>\n </label>\n </ng-container>\n </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media(max-width:47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host .gds-field-label{display:block}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap{height:2.625rem;display:flex}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date{border-color:#333;color:#333;--color: rgb(51, 51, 51)}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media(max-width:47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date{background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date{border:none;min-height:2.375rem;width:100%;border-bottom-right-radius:0;border-top-right-radius:0;padding-left:1rem}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}:host.small .gds-field-label{font-size:.875rem;line-height:1rem}:host.small label+.field-wrap{margin-top:.25rem}:host.small .field-wrap{height:calc(2rem + 3px);min-height:calc(2rem + 3px)}:host.small .field-wrap .nggv-field-date{padding:.38rem .5rem;line-height:1rem;min-height:2rem;font-size:.875rem}:host.small .field-wrap .nggv-button-date{min-height:2rem;min-width:2rem;width:2rem;height:2rem;padding:0}\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: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "component", type: DatepickerComponent, selector: "nggv-datepicker", inputs: ["firstDayOfWeek", "disableDates", "disableWeekDays", "minCalendarRows", "selected", "locale", "type", "firstValid", "lastValid", "closingTime", "dynamicPosition", "size"], outputs: ["ngvDateChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
|
|
2652
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: DateInputComponent, isStandalone: false, selector: "nggv-dateinput,nggv-input[type=date]", inputs: { thook: "thook", type: "type", readonly: "readonly", disableDates: "disableDates", disableWeekDays: "disableWeekDays", minRows: "minRows", firstValid: "firstValid", lastValid: "lastValid", closingTime: "closingTime", firstDayOfWeek: "firstDayOfWeek", closeCalendarOnEscape: "closeCalendarOnEscape", closeOnScroll: "closeOnScroll", size: "size", dynamicPosition: "dynamicPosition" }, host: { listeners: { "keydown": "keyListener($event)" }, properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, viewQueries: [{ propertyName: "toggleButtonRef", first: true, predicate: ["toggleCalendarButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n >\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 {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n </label>\n\n <!-- DESCRIPTION -->\n <div\n class=\"gds-field-label--small description hide-if-empty\"\n *ngIf=\"description\"\n >\n {{ description }}\n </div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state | nggvInputMaskFormat: dateInputMask }}\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- INPUT WRAPPER -->\n <ng-container *ngIf=\"!locked\">\n <div\n class=\"field-wrap\"\n [class.nggv-field--error]=\"invalid\"\n *ngIf=\"showInput$ | async\"\n >\n <!-- INPUT FIELD -->\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"nggv-field-date\"\n type=\"text\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [nggvInputMask]=\"dateInputMask\"\n [value]=\"state\"\n title=\"\"\n (change)=\"onValueChange($event.target)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <button\n aria-label=\"toggle calendar\"\n #toggleCalendarButton\n class=\"nggv-button-date\"\n type=\"button\"\n data-thook=\"toggle-calendar-button\"\n (click)=\"toggleDatepicker()\"\n [disabled]=\"disabled\"\n >\n @if (size === 'small') {\n <gds-icon-calendar *nggCoreElement size=\"16px\"></gds-icon-calendar>\n }\n\n @if (size === 'large') {\n <gds-icon-calendar *nggCoreElement size=\"20px\"></gds-icon-calendar>\n }\n </button>\n </div>\n\n <!-- DATEPICKER -->\n <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n <nggv-datepicker\n #input\n [type]=\"type\"\n [disableDates]=\"disableDates\"\n [disableWeekDays]=\"disableWeekDays\"\n [selected]=\"state\"\n [locale]=\"locale\"\n [minCalendarRows]=\"minRows\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [firstValid]=\"firstValid\"\n [lastValid]=\"lastValid\"\n [closingTime]=\"closingTime\"\n [dynamicPosition]=\"dynamicPosition\"\n [size]=\"size\"\n (ngvDateChange)=\"onDateChange($event)\"\n >\n <ng-content></ng-content>\n </nggv-datepicker>\n </div>\n\n <!-- ERRORS -->\n <ng-container\n *ngIf=\"\n invalid &&\n (error || ngControl?.invalid) &&\n (!errorList || !errorList.length)\n \"\n >\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n </label>\n </ng-container>\n <ng-container *ngFor=\"let error of errorList ?? []\">\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n *ngIf=\"invalid && error\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n </span>\n </label>\n </ng-container>\n </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media(max-width:47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.gds-form-control:focus,:host .gds-field-label.gds-form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.gds-form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+.gds-button,:host .gds-field-label+.gds-group-stepper,:host .gds-field-label+.gds-stepper-wrapper,:host .gds-field-label+.gds-group{margin-top:.5rem}:host .gds-field-label+.gds-form-info{margin-bottom:.5rem}:host .gds-field-label{display:block}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.gds-form-control:focus,:host .gds-field-label--optional.gds-form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.gds-form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+.gds-button,:host .gds-field-label--optional+.gds-group-stepper,:host .gds-field-label--optional+.gds-stepper-wrapper,:host .gds-field-label--optional+.gds-group{margin-top:.5rem}:host .gds-field-label--optional+.gds-form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap{height:2.625rem;display:flex}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date{transition:border var(--gds-sys-transition)}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-base-800)}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date{background-color:transparent;border-color:var(--gds-sys-color-base-800);color:var(--gds-sys-color-base-800);--color: var(--gds-sys-color-base-800)}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}@media(max-width:47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date{background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date{border:none;min-height:2.375rem;width:100%;border-bottom-right-radius:0;border-top-right-radius:0;padding-left:1rem}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}:host.small .gds-field-label{font-size:.875rem;line-height:1rem}:host.small label+.field-wrap{margin-top:.25rem}:host.small .field-wrap{height:calc(2rem + 3px);min-height:calc(2rem + 3px)}:host.small .field-wrap .nggv-field-date{padding:.38rem .5rem;line-height:1rem;min-height:2rem;font-size:.875rem}:host.small .field-wrap .nggv-button-date{min-height:2rem;min-width:2rem;width:2rem;height:2rem;padding:0}\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: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "component", type: DatepickerComponent, selector: "nggv-datepicker", inputs: ["firstDayOfWeek", "disableDates", "disableWeekDays", "minCalendarRows", "selected", "locale", "type", "firstValid", "lastValid", "closingTime", "dynamicPosition", "size"], outputs: ["ngvDateChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
|
|
2634
2653
|
}
|
|
2635
2654
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
2636
2655
|
type: Component,
|
|
2637
|
-
args: [{ selector: 'nggv-dateinput,nggv-input[type=date]', standalone: false, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n >\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 {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n </label>\n\n <!-- DESCRIPTION -->\n <div\n class=\"gds-field-label--small description hide-if-empty\"\n *ngIf=\"description\"\n >\n {{ description }}\n </div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state | nggvInputMaskFormat: dateInputMask }}\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- INPUT WRAPPER -->\n <ng-container *ngIf=\"!locked\">\n <div\n class=\"field-wrap\"\n [class.nggv-field--error]=\"invalid\"\n *ngIf=\"showInput$ | async\"\n >\n <!-- INPUT FIELD -->\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"nggv-field-date\"\n type=\"text\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [nggvInputMask]=\"dateInputMask\"\n [value]=\"state\"\n title=\"\"\n (change)=\"onValueChange($event.target)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <button\n aria-label=\"toggle calendar\"\n #toggleCalendarButton\n class=\"nggv-button-date\"\n type=\"button\"\n data-thook=\"toggle-calendar-button\"\n (click)=\"toggleDatepicker()\"\n [disabled]=\"disabled\"\n >\n @if (size === 'small') {\n <gds-icon-calendar *nggCoreElement size=\"16px\"></gds-icon-calendar>\n }\n\n @if (size === 'large') {\n <gds-icon-calendar *nggCoreElement size=\"20px\"></gds-icon-calendar>\n }\n </button>\n </div>\n\n <!-- DATEPICKER -->\n <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n <nggv-datepicker\n #input\n [type]=\"type\"\n [disableDates]=\"disableDates\"\n [disableWeekDays]=\"disableWeekDays\"\n [selected]=\"state\"\n [locale]=\"locale\"\n [minCalendarRows]=\"minRows\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [firstValid]=\"firstValid\"\n [lastValid]=\"lastValid\"\n [closingTime]=\"closingTime\"\n [dynamicPosition]=\"dynamicPosition\"\n [size]=\"size\"\n (ngvDateChange)=\"onDateChange($event)\"\n >\n <ng-content></ng-content>\n </nggv-datepicker>\n </div>\n\n <!-- ERRORS -->\n <ng-container\n *ngIf=\"\n invalid &&\n (error || ngControl?.invalid) &&\n (!errorList || !errorList.length)\n \"\n >\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n </label>\n </ng-container>\n <ng-container *ngFor=\"let error of errorList ?? []\">\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n *ngIf=\"invalid && error\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n </span>\n </label>\n </ng-container>\n </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media(max-width:47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.form-control:focus,:host .gds-field-label.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+button,:host .gds-field-label+.group-stepper,:host .gds-field-label+.stepper-wrapper,:host .gds-field-label+.group{margin-top:.5rem}:host .gds-field-label+.form-info{margin-bottom:.5rem}:host .gds-field-label{display:block}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.form-control:focus,:host .gds-field-label--optional.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+button,:host .gds-field-label--optional+.group-stepper,:host .gds-field-label--optional+.stepper-wrapper,:host .gds-field-label--optional+.group{margin-top:.5rem}:host .gds-field-label--optional+.form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap{height:2.625rem;display:flex}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .field-wrap .nggv-button-date{border-color:#333;color:#333;--color: rgb(51, 51, 51)}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}@media(max-width:47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date{background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date{border:none;min-height:2.375rem;width:100%;border-bottom-right-radius:0;border-top-right-radius:0;padding-left:1rem}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}:host.small .gds-field-label{font-size:.875rem;line-height:1rem}:host.small label+.field-wrap{margin-top:.25rem}:host.small .field-wrap{height:calc(2rem + 3px);min-height:calc(2rem + 3px)}:host.small .field-wrap .nggv-field-date{padding:.38rem .5rem;line-height:1rem;min-height:2rem;font-size:.875rem}:host.small .field-wrap .nggv-button-date{min-height:2rem;min-width:2rem;width:2rem;height:2rem;padding:0}\n"] }]
|
|
2656
|
+
args: [{ selector: 'nggv-dateinput,nggv-input[type=date]', standalone: false, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n >\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 {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n </label>\n\n <!-- DESCRIPTION -->\n <div\n class=\"gds-field-label--small description hide-if-empty\"\n *ngIf=\"description\"\n >\n {{ description }}\n </div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state | nggvInputMaskFormat: dateInputMask }}\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- INPUT WRAPPER -->\n <ng-container *ngIf=\"!locked\">\n <div\n class=\"field-wrap\"\n [class.nggv-field--error]=\"invalid\"\n *ngIf=\"showInput$ | async\"\n >\n <!-- INPUT FIELD -->\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"nggv-field-date\"\n type=\"text\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [nggvInputMask]=\"dateInputMask\"\n [value]=\"state\"\n title=\"\"\n (change)=\"onValueChange($event.target)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <button\n aria-label=\"toggle calendar\"\n #toggleCalendarButton\n class=\"nggv-button-date\"\n type=\"button\"\n data-thook=\"toggle-calendar-button\"\n (click)=\"toggleDatepicker()\"\n [disabled]=\"disabled\"\n >\n @if (size === 'small') {\n <gds-icon-calendar *nggCoreElement size=\"16px\"></gds-icon-calendar>\n }\n\n @if (size === 'large') {\n <gds-icon-calendar *nggCoreElement size=\"20px\"></gds-icon-calendar>\n }\n </button>\n </div>\n\n <!-- DATEPICKER -->\n <div class=\"nggv-datepicker\" *ngIf=\"shown\">\n <nggv-datepicker\n #input\n [type]=\"type\"\n [disableDates]=\"disableDates\"\n [disableWeekDays]=\"disableWeekDays\"\n [selected]=\"state\"\n [locale]=\"locale\"\n [minCalendarRows]=\"minRows\"\n [firstDayOfWeek]=\"firstDayOfWeek\"\n [firstValid]=\"firstValid\"\n [lastValid]=\"lastValid\"\n [closingTime]=\"closingTime\"\n [dynamicPosition]=\"dynamicPosition\"\n [size]=\"size\"\n (ngvDateChange)=\"onDateChange($event)\"\n >\n <ng-content></ng-content>\n </nggv-datepicker>\n </div>\n\n <!-- ERRORS -->\n <ng-container\n *ngIf=\"\n invalid &&\n (error || ngControl?.invalid) &&\n (!errorList || !errorList.length)\n \"\n >\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </span>\n </label>\n </ng-container>\n <ng-container *ngFor=\"let error of errorList ?? []\">\n <label\n class=\"gds-field-notice gds-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n *ngIf=\"invalid && error\"\n >\n <span class=\"error-item\">\n <span class=\"error-item--icon\">\n <gds-icon-triangle-exclamation\n *nggCoreElement\n [solid]=\"true\"\n size=\"16px\"\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n class=\"error-item--text\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\n </span>\n </label>\n </ng-container>\n </ng-container>\n</ng-container>\n", styles: [":host{display:block;position:relative}@media(max-width:47.98em){:host{min-width:100%}}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label:is(label){margin-bottom:0}:host .gds-field-label.gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label.gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label.gds-form-control:focus,:host .gds-field-label.gds-form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label:not(.gds-form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label+input,:host .gds-field-label+textarea,fieldset :host .gds-field-label+div,:host .gds-field-label+.gds-button,:host .gds-field-label+.gds-group-stepper,:host .gds-field-label+.gds-stepper-wrapper,:host .gds-field-label+.gds-group{margin-top:.5rem}:host .gds-field-label+.gds-form-info{margin-bottom:.5rem}:host .gds-field-label{display:block}:host label+.field-wrap,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host .gds-field-label--optional:is(label){margin-bottom:0}:host .gds-field-label--optional.gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host .gds-field-label--optional.gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-field-label--optional.gds-form-control:focus,:host .gds-field-label--optional.gds-form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host .gds-field-label--optional:not(.gds-form-control){font-weight:500;width:100%;line-height:1.25rem}:host .gds-field-label--optional+input,:host .gds-field-label--optional+textarea,fieldset :host .gds-field-label--optional+div,:host .gds-field-label--optional+.gds-button,:host .gds-field-label--optional+.gds-group-stepper,:host .gds-field-label--optional+.gds-stepper-wrapper,:host .gds-field-label--optional+.gds-group{margin-top:.5rem}:host .gds-field-label--optional+.gds-form-info{margin-bottom:.5rem}:host .nggv-datepicker{margin-top:.25rem;position:absolute}:host .nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .nggv-field--error:focus,:host .nggv-field--error:active,:host .nggv-field--error:hover{border-bottom:.125rem solid #9f000a!important}:host .error-item{display:flex;gap:.5rem;color:#9f000a}:host .gds-field-notice{margin-top:.5rem;display:block;font-size:.875rem;line-height:1;font-weight:500}:host .field-wrap{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .field-wrap *,:host .field-wrap *:before,:host .field-wrap *:after{box-sizing:border-box}:host .field-wrap{height:2.625rem;display:flex}:host .field-wrap .nggv-button-date{--text-disabled-color: #adadad;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .field-wrap .nggv-button-date:focus:not(:focus-visible){box-shadow:none;outline:0}:host .field-wrap .nggv-button-date:focus,:host .field-wrap .nggv-button-date:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .field-wrap .nggv-button-date{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .field-wrap .nggv-button-date{border:2px solid currentcolor}}:host .field-wrap .nggv-button-date.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .field-wrap .nggv-button-date.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .field-wrap .nggv-button-date{transition:border var(--gds-sys-transition)}:host .field-wrap .nggv-button-date:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}:host .field-wrap .nggv-button-date[aria-selected=true],:host .field-wrap .nggv-button-date:active,:host .field-wrap .nggv-button-date.active,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-base-800)}:host .field-wrap .nggv-button-date[aria-selected]:hover,:host .field-wrap .nggv-button-date.active:hover,:host .field-wrap .nggv-button-date:active:hover{opacity:.9}:host .field-wrap .nggv-button-date{background-color:transparent;border-color:var(--gds-sys-color-base-800);color:var(--gds-sys-color-base-800);--color: var(--gds-sys-color-base-800)}:host .field-wrap .nggv-button-date:disabled,:host .field-wrap .nggv-button-date.disabled,:host .field-wrap .nggv-button-date[aria-disabled=true]{color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .field-wrap .nggv-button-date:disabled::placeholder,:host .field-wrap .nggv-button-date.disabled::placeholder,:host .field-wrap .nggv-button-date[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}@media(max-width:47.98em){:host .field-wrap .nggv-button-date{width:2.625rem;height:2.625rem}}:host .field-wrap .nggv-button-date{background-color:transparent;min-height:2.5rem;border:none;border-radius:3px;width:2.625rem;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;text-align:right}:host .field-wrap .nggv-button-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-button-date[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .field-wrap .nggv-button-date{min-width:initial}}:host .field-wrap input[type=text]::-webkit-inner-spin-button,:host .field-wrap input[type=text]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date{border:1px solid #cecece;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .field-wrap .nggv-field-date *,:host .field-wrap .nggv-field-date *:before,:host .field-wrap .nggv-field-date *:after{box-sizing:border-box}:host .field-wrap .nggv-field-date:hover{border-color:#41b0ee}:host .field-wrap .nggv-field-date:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .field-wrap .nggv-field-date:active{border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .field-wrap .nggv-field-date[disabled]::placeholder{color:#cecece}:host .field-wrap .nggv-field-date{border:none;min-height:2.375rem;width:100%;border-bottom-right-radius:0;border-top-right-radius:0;padding-left:1rem}:host .field-wrap .nggv-field-date:not(:focus){border-right:none;padding-right:0}:host .field-wrap .nggv-field-date:focus{padding-right:0}:host.small .gds-field-label{font-size:.875rem;line-height:1rem}:host.small label+.field-wrap{margin-top:.25rem}:host.small .field-wrap{height:calc(2rem + 3px);min-height:calc(2rem + 3px)}:host.small .field-wrap .nggv-field-date{padding:.38rem .5rem;line-height:1rem;min-height:2rem;font-size:.875rem}:host.small .field-wrap .nggv-button-date{min-height:2rem;min-width:2rem;width:2rem;height:2rem;padding:0}\n"] }]
|
|
2638
2657
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
2639
2658
|
type: Self
|
|
2640
2659
|
}, {
|
|
@@ -3806,11 +3825,11 @@ class NggvDropdownListComponent {
|
|
|
3806
3825
|
this.renderer.setStyle(dropdownList, 'max-height', `${maxDropdownHeight}px`);
|
|
3807
3826
|
}
|
|
3808
3827
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3809
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvDropdownListComponent, isStandalone: false, selector: "nggv-dropdown-list", inputs: { expanded: "expanded", state: "state", scrollOffset: "scrollOffset", optionContentTpl: "optionContentTpl", groupLabelTpl: "groupLabelTpl", id: "id", thook: "thook", options: "options", textToHighlight: "textToHighlight", onlyEmitDistinctChanges: "onlyEmitDistinctChanges", selectWithSpace: "selectWithSpace", dynamicPosition: "dynamicPosition" }, outputs: { selectedValueChanged: "selectedValueChanged", closed: "closed", afterClose: "afterClose" }, host: { properties: { "attr.id": "this.id", "attr.data-thook": "this.thook", "attr.data-position": "this.positionAttr" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRefs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\n <ul\n class=\"gds-dropdown__options card options gds-reset\"\n [class.gds-dropdown__options-expanded]=\"expanded\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.data-thook]=\"thook + '-options'\"\n [attr.aria-labelledby]=\"id + '-label'\"\n [attr.aria-activedescendant]=\"\n state ? id + '-option-' + (state?.id ?? state?.key) : undefined\n \"\n >\n <ng-container *ngFor=\"let item of options\">\n <!-- OPTION -->\n <ng-container *ngIf=\"!isGroup(item)\">\n <ng-template\n *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n\n <!-- OPTION GROUP -->\n <li\n class=\"gds-dropdown__options__label group\"\n [attr.data-thook]=\"thook + '-option-group'\"\n *ngIf=\"isGroup(item)\"\n >\n <!-- group label template (default or custom) -->\n <ng-template\n *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n ></ng-template>\n\n <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n <ng-container *ngFor=\"let option of castGroup(item).options\">\n <ng-template\n *ngTemplateOutlet=\"\n listItemTemplate;\n context: { $implicit: option }\n \"\n ></ng-template>\n </ng-container>\n </ul>\n </li>\n </ng-container>\n </ul>\n\n <!-- TEMPLATE -->\n <ng-template #listItemTemplate let-option>\n <li\n #optionRefs\n *ngIf=\"!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"\n basicOptionContentTpl;\n context: { $implicit: option }\n \"\n >\n </ng-template>\n </li>\n <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n <li\n #optionRefs\n *ngIf=\"!!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n >\n </ng-template>\n </li>\n </ng-template>\n\n <ng-template #listGroupTemplate let-item>\n <ng-container *ngIf=\"groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n <ng-container *ngIf=\"!groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n </ng-template>\n\n <ng-template #basicOptionContentTpl let-option>\n <nggv-typeahead-highlight\n *ngIf=\"!!textToHighlight\"\n [textToHighlight]=\"textToHighlight\"\n [textContent]=\"t(option.label)\"\n >\n </nggv-typeahead-highlight>\n <ng-container *ngIf=\"!textToHighlight\">\n {{ t(option.label) }}\n </ng-container>\n </ng-template>\n\n <ng-template #basicGroupLabelTpl let-item>\n <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n </ng-template>\n</ng-container>\n", styles: [":host{--gds-ref-pallet-base300: hsl(0, 0%, 87%);--gds-ref-pallet-base400: hsl(0, 0%, 81%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-z-index-dropdown: ;--sg-z-index-popover: 1060;--sg-z-index-dropdown-backdrop: 990;--sg-z-index-dropdown: 2000;--sg-popover-background: #fff;--sg-popover-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--text-primary-color: #333;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--sg-z-index-dropdown)}:host .visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-sys-color-base-200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-sys-color-base-300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=menu] [role=menuitem]{cursor:pointer}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;max-height:500px;overflow-y:auto;width:100%;overscroll-behavior:none;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options{display:none}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover{background-color:var(--gds-ref-pallet-base400)}:host .gds-dropdown__options__label:focus-visible,:host .gds-dropdown__options__label[aria-focus=true]{background-color:var(--gds-ref-pallet-base300)}:host .gds-dropdown__options__label:active{background-color:var(--gds-ref-pallet-base500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}:host[data-position=top]{top:auto;bottom:100%;transform:translateY(-.5rem)}:host[data-position=bottom]{bottom:0;transform:translateY(calc(100% + .5rem))}\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: "component", type: NggvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }, { kind: "directive", type: i3$1.NggvTooltipDirective, selector: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "tooltipId", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
|
|
3828
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvDropdownListComponent, isStandalone: false, selector: "nggv-dropdown-list", inputs: { expanded: "expanded", state: "state", scrollOffset: "scrollOffset", optionContentTpl: "optionContentTpl", groupLabelTpl: "groupLabelTpl", id: "id", thook: "thook", options: "options", textToHighlight: "textToHighlight", onlyEmitDistinctChanges: "onlyEmitDistinctChanges", selectWithSpace: "selectWithSpace", dynamicPosition: "dynamicPosition" }, outputs: { selectedValueChanged: "selectedValueChanged", closed: "closed", afterClose: "afterClose" }, host: { properties: { "attr.id": "this.id", "attr.data-thook": "this.thook", "attr.data-position": "this.positionAttr" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRefs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\n <ul\n class=\"gds-dropdown__options card options gds-reset\"\n [class.gds-dropdown__options-expanded]=\"expanded\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.data-thook]=\"thook + '-options'\"\n [attr.aria-labelledby]=\"id + '-label'\"\n [attr.aria-activedescendant]=\"\n state ? id + '-option-' + (state?.id ?? state?.key) : undefined\n \"\n >\n <ng-container *ngFor=\"let item of options\">\n <!-- OPTION -->\n <ng-container *ngIf=\"!isGroup(item)\">\n <ng-template\n *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n\n <!-- OPTION GROUP -->\n <li\n class=\"gds-dropdown__options__label group\"\n [attr.data-thook]=\"thook + '-option-group'\"\n *ngIf=\"isGroup(item)\"\n >\n <!-- group label template (default or custom) -->\n <ng-template\n *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n ></ng-template>\n\n <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n <ng-container *ngFor=\"let option of castGroup(item).options\">\n <ng-template\n *ngTemplateOutlet=\"\n listItemTemplate;\n context: { $implicit: option }\n \"\n ></ng-template>\n </ng-container>\n </ul>\n </li>\n </ng-container>\n </ul>\n\n <!-- TEMPLATE -->\n <ng-template #listItemTemplate let-option>\n <li\n #optionRefs\n *ngIf=\"!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"\n basicOptionContentTpl;\n context: { $implicit: option }\n \"\n >\n </ng-template>\n </li>\n <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n <li\n #optionRefs\n *ngIf=\"!!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n >\n </ng-template>\n </li>\n </ng-template>\n\n <ng-template #listGroupTemplate let-item>\n <ng-container *ngIf=\"groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n <ng-container *ngIf=\"!groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n </ng-template>\n\n <ng-template #basicOptionContentTpl let-option>\n <nggv-typeahead-highlight\n *ngIf=\"!!textToHighlight\"\n [textToHighlight]=\"textToHighlight\"\n [textContent]=\"t(option.label)\"\n >\n </nggv-typeahead-highlight>\n <ng-container *ngIf=\"!textToHighlight\">\n {{ t(option.label) }}\n </ng-container>\n </ng-template>\n\n <ng-template #basicGroupLabelTpl let-item>\n <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n </ng-template>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--gds-z-index-dropdown)}:host .visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-sys-color-base-200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-sys-color-base-300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=menu] [role=menuitem]{cursor:pointer}:host ul[role=listbox]{--z-index: 1060;background-color:var(--gds-sys-color-background-primary);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:0 .125rem .375rem #00000026;color:var(--gds-sys-color-text-primary);padding:0;max-height:500px;overflow-y:auto;width:100%;overscroll-behavior:none;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-text-primary);border-radius:.25rem}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--gds-sys-color-base-200)}:host ul[role=listbox] [role=option]:active{background-color:var(--gds-sys-color-base-200)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--gds-sys-color-base-800);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options{display:none}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--gds-sys-color-base-200)}:host .gds-dropdown__options__label:active{background-color:var(--gds-sys-color-base-300)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}:host[data-position=top]{top:auto;bottom:100%;transform:translateY(-.5rem)}:host[data-position=bottom]{bottom:0;transform:translateY(calc(100% + .5rem))}\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: "component", type: NggvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }, { kind: "directive", type: i3$1.NggvTooltipDirective, selector: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "tooltipId", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
|
|
3810
3829
|
}
|
|
3811
3830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvDropdownListComponent, decorators: [{
|
|
3812
3831
|
type: Component,
|
|
3813
|
-
args: [{ selector: 'nggv-dropdown-list', standalone: false, template: "<ng-container *transloco=\"let t; read: scope\">\n <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\n <ul\n class=\"gds-dropdown__options card options gds-reset\"\n [class.gds-dropdown__options-expanded]=\"expanded\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.data-thook]=\"thook + '-options'\"\n [attr.aria-labelledby]=\"id + '-label'\"\n [attr.aria-activedescendant]=\"\n state ? id + '-option-' + (state?.id ?? state?.key) : undefined\n \"\n >\n <ng-container *ngFor=\"let item of options\">\n <!-- OPTION -->\n <ng-container *ngIf=\"!isGroup(item)\">\n <ng-template\n *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n\n <!-- OPTION GROUP -->\n <li\n class=\"gds-dropdown__options__label group\"\n [attr.data-thook]=\"thook + '-option-group'\"\n *ngIf=\"isGroup(item)\"\n >\n <!-- group label template (default or custom) -->\n <ng-template\n *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n ></ng-template>\n\n <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n <ng-container *ngFor=\"let option of castGroup(item).options\">\n <ng-template\n *ngTemplateOutlet=\"\n listItemTemplate;\n context: { $implicit: option }\n \"\n ></ng-template>\n </ng-container>\n </ul>\n </li>\n </ng-container>\n </ul>\n\n <!-- TEMPLATE -->\n <ng-template #listItemTemplate let-option>\n <li\n #optionRefs\n *ngIf=\"!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"\n basicOptionContentTpl;\n context: { $implicit: option }\n \"\n >\n </ng-template>\n </li>\n <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n <li\n #optionRefs\n *ngIf=\"!!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n >\n </ng-template>\n </li>\n </ng-template>\n\n <ng-template #listGroupTemplate let-item>\n <ng-container *ngIf=\"groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n <ng-container *ngIf=\"!groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n </ng-template>\n\n <ng-template #basicOptionContentTpl let-option>\n <nggv-typeahead-highlight\n *ngIf=\"!!textToHighlight\"\n [textToHighlight]=\"textToHighlight\"\n [textContent]=\"t(option.label)\"\n >\n </nggv-typeahead-highlight>\n <ng-container *ngIf=\"!textToHighlight\">\n {{ t(option.label) }}\n </ng-container>\n </ng-template>\n\n <ng-template #basicGroupLabelTpl let-item>\n <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n </ng-template>\n</ng-container>\n", styles: [":host{--gds-
|
|
3832
|
+
args: [{ selector: 'nggv-dropdown-list', standalone: false, template: "<ng-container *transloco=\"let t; read: scope\">\n <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\n <ul\n class=\"gds-dropdown__options card options gds-reset\"\n [class.gds-dropdown__options-expanded]=\"expanded\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.data-thook]=\"thook + '-options'\"\n [attr.aria-labelledby]=\"id + '-label'\"\n [attr.aria-activedescendant]=\"\n state ? id + '-option-' + (state?.id ?? state?.key) : undefined\n \"\n >\n <ng-container *ngFor=\"let item of options\">\n <!-- OPTION -->\n <ng-container *ngIf=\"!isGroup(item)\">\n <ng-template\n *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n\n <!-- OPTION GROUP -->\n <li\n class=\"gds-dropdown__options__label group\"\n [attr.data-thook]=\"thook + '-option-group'\"\n *ngIf=\"isGroup(item)\"\n >\n <!-- group label template (default or custom) -->\n <ng-template\n *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n ></ng-template>\n\n <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n <ng-container *ngFor=\"let option of castGroup(item).options\">\n <ng-template\n *ngTemplateOutlet=\"\n listItemTemplate;\n context: { $implicit: option }\n \"\n ></ng-template>\n </ng-container>\n </ul>\n </li>\n </ng-container>\n </ul>\n\n <!-- TEMPLATE -->\n <ng-template #listItemTemplate let-option>\n <li\n #optionRefs\n *ngIf=\"!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"\n basicOptionContentTpl;\n context: { $implicit: option }\n \"\n >\n </ng-template>\n </li>\n <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n <li\n #optionRefs\n *ngIf=\"!!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n >\n </ng-template>\n </li>\n </ng-template>\n\n <ng-template #listGroupTemplate let-item>\n <ng-container *ngIf=\"groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n <ng-container *ngIf=\"!groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n </ng-template>\n\n <ng-template #basicOptionContentTpl let-option>\n <nggv-typeahead-highlight\n *ngIf=\"!!textToHighlight\"\n [textToHighlight]=\"textToHighlight\"\n [textContent]=\"t(option.label)\"\n >\n </nggv-typeahead-highlight>\n <ng-container *ngIf=\"!textToHighlight\">\n {{ t(option.label) }}\n </ng-container>\n </ng-template>\n\n <ng-template #basicGroupLabelTpl let-item>\n <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n </ng-template>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--gds-z-index-dropdown)}:host .visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-sys-color-base-200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-sys-color-base-300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=menu] [role=menuitem]{cursor:pointer}:host ul[role=listbox]{--z-index: 1060;background-color:var(--gds-sys-color-background-primary);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:0 .125rem .375rem #00000026;color:var(--gds-sys-color-text-primary);padding:0;max-height:500px;overflow-y:auto;width:100%;overscroll-behavior:none;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-text-primary);border-radius:.25rem}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--gds-sys-color-base-200)}:host ul[role=listbox] [role=option]:active{background-color:var(--gds-sys-color-base-200)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--gds-sys-color-base-800);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options{display:none}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--gds-sys-color-base-200)}:host .gds-dropdown__options__label:active{background-color:var(--gds-sys-color-base-300)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}:host[data-position=top]{top:auto;bottom:100%;transform:translateY(-.5rem)}:host[data-position=bottom]{bottom:0;transform:translateY(calc(100% + .5rem))}\n"] }]
|
|
3814
3833
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
3815
3834
|
type: Optional
|
|
3816
3835
|
}, {
|
|
@@ -4086,11 +4105,11 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent$1 {
|
|
|
4086
4105
|
return !('options' in option);
|
|
4087
4106
|
}
|
|
4088
4107
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvDropdownComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i2$2.DropdownUtils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4089
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvDropdownComponent, isStandalone: false, selector: "nggv-dropdown", inputs: { thook: "thook", size: "size", placeholder: "placeholder", ariaLabel: "ariaLabel", closeOnScroll: "closeOnScroll", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption", selectWithSpace: "selectWithSpace", onlyHandleDistinctChanges: "onlyHandleDistinctChanges" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }, { propertyName: "groupLabelTpl", first: true, predicate: ["groupLabelTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-toggle'\"\n *ngIf=\"labelContentTpl || label\"\n >\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 {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n </label>\n\n <!-- DESCRIPTION -->\n <div class=\"description\" *ngIf=\"description\">{{ description }}</div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- INPUT -->\n <ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper dropdown-wrapper\">\n <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n <button\n [id]=\"id + '-toggle'\"\n [disabled]=\"disabled\"\n type=\"button\"\n class=\"nggv-field-dropdown__label toggle\"\n [class.nggv-field--error]=\"invalid\"\n role=\"combobox\"\n aria-owns=\"listbox\"\n aria-haspopup=\"listbox\"\n aria-controls=\"listbox\"\n [attr.data-thook]=\"thook + '-toggle'\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-labelledby]=\"\n ariaLabel ? null : id + '-label ' + id + '-toggle'\n \"\n [attr.aria-label]=\"ariaLabel || null\"\n (click)=\"toggleDropdown()\"\n >\n <span>\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </span>\n </button>\n <nggv-dropdown-list\n #dropDownList\n [options]=\"options\"\n [scrollOffset]=\"scrollOffset\"\n [state]=\"state\"\n [expanded]=\"expanded\"\n [optionContentTpl]=\"optionContentTpl\"\n [groupLabelTpl]=\"groupLabelTpl\"\n [textToHighlight]=\"textToHighlight\"\n [onlyEmitDistinctChanges]=\"onlyHandleDistinctChanges\"\n [selectWithSpace]=\"selectWithSpace\"\n [dynamicPosition]=\"true\"\n (closed)=\"setExpanded(false)\"\n (selectedValueChanged)=\"onSelectChange($event)\"\n >\n </nggv-dropdown-list>\n </div>\n <!-- ERRORS -->\n <div class=\"gds-form-item__footer error-wrapper\">\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-input'\"\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 >{{ error }}</span\n >\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 <!-- CHILDREN -->\n <ng-content></ng-content>\n </div>\n </ng-container>\n\n <ng-template #defaultSelectedContentTpl let-state>\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%)}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-sys-color-base-100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media(prefers-reduced-motion:reduce){:host .gds-form-item__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-sys-color-base-600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host{position:initial}:host:not(:last-child){margin-bottom:unset}:host .gds-field-label--optional{font-weight:400}:host button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--grey-600);--sg-border-color: var(--grey-600)}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button{background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%}@media(max-width:35.98em){:host button{min-width:100%}}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--grey-500)}:host button{font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}:host .dropdown-wrapper{position:relative}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}:host.small label{line-height:1rem;font-size:.875rem}:host.small label+.gds-input-wrapper,:host.small label+.nggv-field--locked{margin-top:.25rem}:host.small .description{font-size:.875rem;line-height:1rem;margin-bottom:.25rem}:host.small button{font-size:.875rem;line-height:1rem;padding:.38rem .5rem;min-height:2rem}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NggvDropdownListComponent, selector: "nggv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "groupLabelTpl", "id", "thook", "options", "textToHighlight", "onlyEmitDistinctChanges", "selectWithSpace", "dynamicPosition"], outputs: ["selectedValueChanged", "closed", "afterClose"] }] }); }
|
|
4108
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvDropdownComponent, isStandalone: false, selector: "nggv-dropdown", inputs: { thook: "thook", size: "size", placeholder: "placeholder", ariaLabel: "ariaLabel", closeOnScroll: "closeOnScroll", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption", selectWithSpace: "selectWithSpace", onlyHandleDistinctChanges: "onlyHandleDistinctChanges" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }, { propertyName: "groupLabelTpl", first: true, predicate: ["groupLabelTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-toggle'\"\n *ngIf=\"labelContentTpl || label\"\n >\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n </label>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n\n <!-- DESCRIPTION -->\n <div class=\"description\" *ngIf=\"description\">{{ description }}</div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- INPUT -->\n <ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper dropdown-wrapper\">\n <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n <button\n [id]=\"id + '-toggle'\"\n [disabled]=\"disabled\"\n type=\"button\"\n class=\"nggv-field-dropdown__label toggle\"\n [class.nggv-field--error]=\"invalid\"\n role=\"combobox\"\n aria-owns=\"listbox\"\n aria-haspopup=\"listbox\"\n aria-controls=\"listbox\"\n [attr.data-thook]=\"thook + '-toggle'\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-labelledby]=\"\n ariaLabel ? null : id + '-label ' + id + '-toggle'\n \"\n [attr.aria-label]=\"ariaLabel || null\"\n (click)=\"toggleDropdown()\"\n >\n <span>\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </span>\n </button>\n <nggv-dropdown-list\n #dropDownList\n [options]=\"options\"\n [scrollOffset]=\"scrollOffset\"\n [state]=\"state\"\n [expanded]=\"expanded\"\n [optionContentTpl]=\"optionContentTpl\"\n [groupLabelTpl]=\"groupLabelTpl\"\n [textToHighlight]=\"textToHighlight\"\n [onlyEmitDistinctChanges]=\"onlyHandleDistinctChanges\"\n [selectWithSpace]=\"selectWithSpace\"\n [dynamicPosition]=\"true\"\n (closed)=\"setExpanded(false)\"\n (selectedValueChanged)=\"onSelectChange($event)\"\n >\n </nggv-dropdown-list>\n </div>\n <!-- ERRORS -->\n <div class=\"gds-form-item__footer error-wrapper\">\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-input'\"\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 >{{ error }}</span\n >\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 <!-- CHILDREN -->\n <ng-content></ng-content>\n </div>\n </ng-container>\n\n <ng-template #defaultSelectedContentTpl let-state>\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n </ng-template>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .gds-form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .gds-form-info{margin-bottom:0}:host .gds-form-item__labels .gds-form-info a:link:not(.button,[aria-disabled]){color:var(--gds-sys-color-text-link)}:host .gds-form-item__labels>*{width:100%;display:block}:host .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height var(--gds-sys-transition)}:host .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-sys-color-base-100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all var(--gds-sys-transition);border:1px solid transparent}@media(prefers-reduced-motion:reduce){:host .gds-form-item__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-sys-color-base-600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host{position:initial}:host:not(:last-child){margin-bottom:unset}:host .gds-field-label--optional{font-weight:400}:host button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600)}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button{background:var(--gds-sys-color-background-primary);color:var(--gds-sys-color-text-primary);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%}@media(max-width:35.98em){:host button{min-width:100%}}:host button:not(:disabled,.disabled,[aria-disabled]):hover{--background: var(--gds-sys-color-base-200);--color: var(--gds-sys-color-base-800);background-color:var(--gds-sys-color-base-200);color:var(--gds-sys-color-base-800);border-color:var(--gds-sys-color-base-800)}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--gds-sys-color-text-primary);border-left:solid 2px var(--gds-sys-color-text-primary);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--gds-sys-color-base-300)}:host button{font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}:host button.small{font-size:.875rem}:host button:hover{background:var(--gds-sys-color-base-200)}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}:host .dropdown-wrapper{position:relative}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}:host.small label{line-height:1rem;font-size:.875rem}:host.small label+.gds-input-wrapper,:host.small label+.nggv-field--locked{margin-top:.25rem}:host.small .description{font-size:.875rem;line-height:1rem;margin-bottom:.25rem}:host.small button{font-size:.875rem;line-height:1rem;padding:.38rem .5rem;min-height:2rem}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NggvDropdownListComponent, selector: "nggv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "groupLabelTpl", "id", "thook", "options", "textToHighlight", "onlyEmitDistinctChanges", "selectWithSpace", "dynamicPosition"], outputs: ["selectedValueChanged", "closed", "afterClose"] }] }); }
|
|
4090
4109
|
}
|
|
4091
4110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvDropdownComponent, decorators: [{
|
|
4092
4111
|
type: Component,
|
|
4093
|
-
args: [{ selector: 'nggv-dropdown', standalone: false, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-toggle'\"\n *ngIf=\"labelContentTpl || label\"\n >\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 {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n </label>\n\n <!-- DESCRIPTION -->\n <div class=\"description\" *ngIf=\"description\">{{ description }}</div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- INPUT -->\n <ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper dropdown-wrapper\">\n <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n <button\n [id]=\"id + '-toggle'\"\n [disabled]=\"disabled\"\n type=\"button\"\n class=\"nggv-field-dropdown__label toggle\"\n [class.nggv-field--error]=\"invalid\"\n role=\"combobox\"\n aria-owns=\"listbox\"\n aria-haspopup=\"listbox\"\n aria-controls=\"listbox\"\n [attr.data-thook]=\"thook + '-toggle'\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-labelledby]=\"\n ariaLabel ? null : id + '-label ' + id + '-toggle'\n \"\n [attr.aria-label]=\"ariaLabel || null\"\n (click)=\"toggleDropdown()\"\n >\n <span>\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </span>\n </button>\n <nggv-dropdown-list\n #dropDownList\n [options]=\"options\"\n [scrollOffset]=\"scrollOffset\"\n [state]=\"state\"\n [expanded]=\"expanded\"\n [optionContentTpl]=\"optionContentTpl\"\n [groupLabelTpl]=\"groupLabelTpl\"\n [textToHighlight]=\"textToHighlight\"\n [onlyEmitDistinctChanges]=\"onlyHandleDistinctChanges\"\n [selectWithSpace]=\"selectWithSpace\"\n [dynamicPosition]=\"true\"\n (closed)=\"setExpanded(false)\"\n (selectedValueChanged)=\"onSelectChange($event)\"\n >\n </nggv-dropdown-list>\n </div>\n <!-- ERRORS -->\n <div class=\"gds-form-item__footer error-wrapper\">\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-input'\"\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 >{{ error }}</span\n >\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 <!-- CHILDREN -->\n <ng-content></ng-content>\n </div>\n </ng-container>\n\n <ng-template #defaultSelectedContentTpl let-state>\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n </ng-template>\n</ng-container>\n", styles: [":host{--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-border-color: #868686;--text-primary-color: #333;--sg-form-control-bg: #fff;--grey-000: hsl(0 0% 100%);--grey-100: hsl(0, 0%, 97%);--grey-200: hsl(0, 0%, 91%);--grey-300: hsl(0, 0%, 87%);--grey-400: hsl(0, 0%, 81%);--grey-500: hsl(0, 0%, 68%);--grey-600: hsl(0, 0%, 53%);--grey-700: hsl(0, 0%, 29%);--grey-800: hsl(0, 0%, 20%);--grey-900: hsl(0, 0%, 10%);--grey-1000: hsl(0 0% 0%)}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-sys-color-base-100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media(prefers-reduced-motion:reduce){:host .gds-form-item__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-sys-color-base-600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host{position:initial}:host:not(:last-child){margin-bottom:unset}:host .gds-field-label--optional{font-weight:400}:host button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--grey-600);--sg-border-color: var(--grey-600)}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button{background:var(--sg-form-control-bg);color:var(--text-primary-color);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%}@media(max-width:35.98em){:host button{min-width:100%}}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--text-primary-color);border-left:solid 2px var(--text-primary-color);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--grey-500)}:host button{font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}:host button.small{font-size:.875rem}:host button:hover{background:#e7e7e7}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}:host .dropdown-wrapper{position:relative}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}:host.small label{line-height:1rem;font-size:.875rem}:host.small label+.gds-input-wrapper,:host.small label+.nggv-field--locked{margin-top:.25rem}:host.small .description{font-size:.875rem;line-height:1rem;margin-bottom:.25rem}:host.small button{font-size:.875rem;line-height:1rem;padding:.38rem .5rem;min-height:2rem}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}\n"] }]
|
|
4112
|
+
args: [{ selector: 'nggv-dropdown', standalone: false, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-toggle'\"\n *ngIf=\"labelContentTpl || label\"\n >\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n ></ng-template>\n </label>\n <ng-template #basicLabelContentTpl>\n <!-- to trigger css:empty if no label was added -->\n <ng-container *ngIf=\"label\">\n {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n\n <!-- DESCRIPTION -->\n <div class=\"description\" *ngIf=\"description\">{{ description }}</div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n [attr.aria-labelledby]=\"id + '-label ' + id + '-input'\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <!-- INPUT -->\n <ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper dropdown-wrapper\">\n <div #input [id]=\"id + '-input'\" class=\"dropdown\">\n <button\n [id]=\"id + '-toggle'\"\n [disabled]=\"disabled\"\n type=\"button\"\n class=\"nggv-field-dropdown__label toggle\"\n [class.nggv-field--error]=\"invalid\"\n role=\"combobox\"\n aria-owns=\"listbox\"\n aria-haspopup=\"listbox\"\n aria-controls=\"listbox\"\n [attr.data-thook]=\"thook + '-toggle'\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-labelledby]=\"\n ariaLabel ? null : id + '-label ' + id + '-toggle'\n \"\n [attr.aria-label]=\"ariaLabel || null\"\n (click)=\"toggleDropdown()\"\n >\n <span>\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </span>\n </button>\n <nggv-dropdown-list\n #dropDownList\n [options]=\"options\"\n [scrollOffset]=\"scrollOffset\"\n [state]=\"state\"\n [expanded]=\"expanded\"\n [optionContentTpl]=\"optionContentTpl\"\n [groupLabelTpl]=\"groupLabelTpl\"\n [textToHighlight]=\"textToHighlight\"\n [onlyEmitDistinctChanges]=\"onlyHandleDistinctChanges\"\n [selectWithSpace]=\"selectWithSpace\"\n [dynamicPosition]=\"true\"\n (closed)=\"setExpanded(false)\"\n (selectedValueChanged)=\"onSelectChange($event)\"\n >\n </nggv-dropdown-list>\n </div>\n <!-- ERRORS -->\n <div class=\"gds-form-item__footer error-wrapper\">\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-input'\"\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 >{{ error }}</span\n >\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 <!-- CHILDREN -->\n <ng-content></ng-content>\n </div>\n </ng-container>\n\n <ng-template #defaultSelectedContentTpl let-state>\n <!-- eslint-disable-next-line @angular-eslint/template/eqeqeq -->\n {{ state?.key != null && state?.label ? t(state.label) : placeholder }}\n </ng-template>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host label{display:block;font-weight:500;line-height:1.25rem;width:100%}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .description{font-size:.875rem;margin-bottom:.5rem;line-height:1.25rem;width:100%}:host{display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .gds-form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .gds-form-info{margin-bottom:0}:host .gds-form-item__labels .gds-form-info a:link:not(.button,[aria-disabled]){color:var(--gds-sys-color-text-link)}:host .gds-form-item__labels>*{width:100%;display:block}:host .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height var(--gds-sys-transition)}:host .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-sys-color-base-100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all var(--gds-sys-transition);border:1px solid transparent}@media(prefers-reduced-motion:reduce){:host .gds-form-item__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-sys-color-base-600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host{position:initial}:host:not(:last-child){margin-bottom:unset}:host .gds-field-label--optional{font-weight:400}:host button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600)}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button{background:var(--gds-sys-color-background-primary);color:var(--gds-sys-color-text-primary);min-height:2.75rem;display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;max-width:100%}@media(max-width:35.98em){:host button{min-width:100%}}:host button:not(:disabled,.disabled,[aria-disabled]):hover{--background: var(--gds-sys-color-base-200);--color: var(--gds-sys-color-base-800);background-color:var(--gds-sys-color-base-200);color:var(--gds-sys-color-base-800);border-color:var(--gds-sys-color-base-800)}:host button>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host button:after{margin-left:.5rem;margin-right:.5rem;border-bottom:solid 2px var(--gds-sys-color-text-primary);border-left:solid 2px var(--gds-sys-color-text-primary);content:\"\";display:block;height:.5rem;width:.5rem;position:relative;top:-.15rem;transform:translate(75%) rotate3d(0,0,1,-45deg) scaleZ(-1);transition:transform .3s ease-in;flex-shrink:0}:host button[aria-expanded=true]:after{transform:translate(75%,6px) rotate3d(0,0,1,-45deg) scale3d(-1,-1,1)}:host button:hover:after{border-color:currentColor}:host button:disabled{--background: var(--gds-sys-color-base-300)}:host button{font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button span{width:100%;white-space:nowrap;display:block;text-overflow:ellipsis}:host button.small{font-size:.875rem}:host button:hover{background:var(--gds-sys-color-base-200)}:host button:active{background:inherit;color:inherit;border-color:inherit}:host button:disabled,:host button.disabled{--text-primary-color: var(--grey-600);background:var(--grey-300);color:var(--grey-600);cursor:not-allowed}:host button.nggv-field--error{border-bottom:2px solid #9f000a}:host .gds-form-item__footer .form-info{font-weight:500;font-size:.875rem}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}:host .dropdown-wrapper{position:relative}:host .dropdown{width:100%;position:relative}:host .dropdown nggv-dropdown-list{width:100%}:host.small label{line-height:1rem;font-size:.875rem}:host.small label+.gds-input-wrapper,:host.small label+.nggv-field--locked{margin-top:.25rem}:host.small .description{font-size:.875rem;line-height:1rem;margin-bottom:.25rem}:host.small button{font-size:.875rem;line-height:1rem;padding:.38rem .5rem;min-height:2rem}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}\n"] }]
|
|
4094
4113
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
4095
4114
|
type: Self
|
|
4096
4115
|
}, {
|
|
@@ -4230,11 +4249,11 @@ class NggvTypeaheadDropdownListComponent extends NggvDropdownListComponent {
|
|
|
4230
4249
|
this.renderer2.setStyle(this.element.nativeElement, 'width', `${this.hostComponent.element.nativeElement.offsetWidth}px`);
|
|
4231
4250
|
}
|
|
4232
4251
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvTypeaheadDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true, skipSelf: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4233
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvTypeaheadDropdownListComponent, isStandalone: false, selector: "nggv-typeahead-dropdown-list", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\n <ul\n class=\"gds-dropdown__options card options gds-reset\"\n [class.gds-dropdown__options-expanded]=\"expanded\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.data-thook]=\"thook + '-options'\"\n [attr.aria-labelledby]=\"id + '-label'\"\n [attr.aria-activedescendant]=\"\n state ? id + '-option-' + (state?.id ?? state?.key) : undefined\n \"\n >\n <ng-container *ngFor=\"let item of options\">\n <!-- OPTION -->\n <ng-container *ngIf=\"!isGroup(item)\">\n <ng-template\n *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n\n <!-- OPTION GROUP -->\n <li\n class=\"gds-dropdown__options__label group\"\n [attr.data-thook]=\"thook + '-option-group'\"\n *ngIf=\"isGroup(item)\"\n >\n <!-- group label template (default or custom) -->\n <ng-template\n *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n ></ng-template>\n\n <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n <ng-container *ngFor=\"let option of castGroup(item).options\">\n <ng-template\n *ngTemplateOutlet=\"\n listItemTemplate;\n context: { $implicit: option }\n \"\n ></ng-template>\n </ng-container>\n </ul>\n </li>\n </ng-container>\n </ul>\n\n <!-- TEMPLATE -->\n <ng-template #listItemTemplate let-option>\n <li\n #optionRefs\n *ngIf=\"!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"\n basicOptionContentTpl;\n context: { $implicit: option }\n \"\n >\n </ng-template>\n </li>\n <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n <li\n #optionRefs\n *ngIf=\"!!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n >\n </ng-template>\n </li>\n </ng-template>\n\n <ng-template #listGroupTemplate let-item>\n <ng-container *ngIf=\"groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n <ng-container *ngIf=\"!groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n </ng-template>\n\n <ng-template #basicOptionContentTpl let-option>\n <nggv-typeahead-highlight\n *ngIf=\"!!textToHighlight\"\n [textToHighlight]=\"textToHighlight\"\n [textContent]=\"t(option.label)\"\n >\n </nggv-typeahead-highlight>\n <ng-container *ngIf=\"!textToHighlight\">\n {{ t(option.label) }}\n </ng-container>\n </ng-template>\n\n <ng-template #basicGroupLabelTpl let-item>\n <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n </ng-template>\n</ng-container>\n", styles: [":host{display:flex;position:relative;bottom:initial!important;transform:translateY(-1rem)!important}\n", ":host{--gds-ref-pallet-base300: hsl(0, 0%, 87%);--gds-ref-pallet-base400: hsl(0, 0%, 81%);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-z-index-dropdown: ;--sg-z-index-popover: 1060;--sg-z-index-dropdown-backdrop: 990;--sg-z-index-dropdown: 2000;--sg-popover-background: #fff;--sg-popover-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--text-primary-color: #333;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--sg-z-index-dropdown)}:host .visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-sys-color-base-200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-sys-color-base-300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=menu] [role=menuitem]{cursor:pointer}:host ul[role=listbox]{--z-index: var(--sg-z-index-popover);background-color:var(--sg-popover-background);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:var(--sg-popover-box-shadow);color:var(--text-primary-color);padding:0;max-height:500px;overflow-y:auto;width:100%;overscroll-behavior:none;border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--text-primary-color);--sg-border-color: var(--text-primary-color);border-radius:var(--sg-border-radius)}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:active{background-color:var(--grey-400)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--grey-1000);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options{display:none}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover{background-color:var(--gds-ref-pallet-base400)}:host .gds-dropdown__options__label:focus-visible,:host .gds-dropdown__options__label[aria-focus=true]{background-color:var(--gds-ref-pallet-base300)}:host .gds-dropdown__options__label:active{background-color:var(--gds-ref-pallet-base500)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}:host[data-position=top]{top:auto;bottom:100%;transform:translateY(-.5rem)}:host[data-position=bottom]{bottom:0;transform:translateY(calc(100% + .5rem))}\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: i3$1.NggvTooltipDirective, selector: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "tooltipId", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }, { kind: "component", type: NggvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }] }); }
|
|
4252
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvTypeaheadDropdownListComponent, isStandalone: false, selector: "nggv-typeahead-dropdown-list", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\n <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\n <ul\n class=\"gds-dropdown__options card options gds-reset\"\n [class.gds-dropdown__options-expanded]=\"expanded\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.data-thook]=\"thook + '-options'\"\n [attr.aria-labelledby]=\"id + '-label'\"\n [attr.aria-activedescendant]=\"\n state ? id + '-option-' + (state?.id ?? state?.key) : undefined\n \"\n >\n <ng-container *ngFor=\"let item of options\">\n <!-- OPTION -->\n <ng-container *ngIf=\"!isGroup(item)\">\n <ng-template\n *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n\n <!-- OPTION GROUP -->\n <li\n class=\"gds-dropdown__options__label group\"\n [attr.data-thook]=\"thook + '-option-group'\"\n *ngIf=\"isGroup(item)\"\n >\n <!-- group label template (default or custom) -->\n <ng-template\n *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n ></ng-template>\n\n <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n <ng-container *ngFor=\"let option of castGroup(item).options\">\n <ng-template\n *ngTemplateOutlet=\"\n listItemTemplate;\n context: { $implicit: option }\n \"\n ></ng-template>\n </ng-container>\n </ul>\n </li>\n </ng-container>\n </ul>\n\n <!-- TEMPLATE -->\n <ng-template #listItemTemplate let-option>\n <li\n #optionRefs\n *ngIf=\"!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"\n basicOptionContentTpl;\n context: { $implicit: option }\n \"\n >\n </ng-template>\n </li>\n <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n <li\n #optionRefs\n *ngIf=\"!!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n >\n </ng-template>\n </li>\n </ng-template>\n\n <ng-template #listGroupTemplate let-item>\n <ng-container *ngIf=\"groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n <ng-container *ngIf=\"!groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n </ng-template>\n\n <ng-template #basicOptionContentTpl let-option>\n <nggv-typeahead-highlight\n *ngIf=\"!!textToHighlight\"\n [textToHighlight]=\"textToHighlight\"\n [textContent]=\"t(option.label)\"\n >\n </nggv-typeahead-highlight>\n <ng-container *ngIf=\"!textToHighlight\">\n {{ t(option.label) }}\n </ng-container>\n </ng-template>\n\n <ng-template #basicGroupLabelTpl let-item>\n <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n </ng-template>\n</ng-container>\n", styles: [":host{display:flex;position:relative;bottom:initial!important;transform:translateY(-1rem)!important}\n", ":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--gds-z-index-dropdown)}:host .visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-sys-color-base-200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-sys-color-base-300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=menu] [role=menuitem]{cursor:pointer}:host ul[role=listbox]{--z-index: 1060;background-color:var(--gds-sys-color-background-primary);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:0 .125rem .375rem #00000026;color:var(--gds-sys-color-text-primary);padding:0;max-height:500px;overflow-y:auto;width:100%;overscroll-behavior:none;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-text-primary);border-radius:.25rem}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--gds-sys-color-base-200)}:host ul[role=listbox] [role=option]:active{background-color:var(--gds-sys-color-base-200)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--gds-sys-color-base-800);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options{display:none}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--gds-sys-color-base-200)}:host .gds-dropdown__options__label:active{background-color:var(--gds-sys-color-base-300)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}:host[data-position=top]{top:auto;bottom:100%;transform:translateY(-.5rem)}:host[data-position=bottom]{bottom:0;transform:translateY(calc(100% + .5rem))}\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: i3$1.NggvTooltipDirective, selector: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "tooltipId", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }, { kind: "component", type: NggvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }] }); }
|
|
4234
4253
|
}
|
|
4235
4254
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvTypeaheadDropdownListComponent, decorators: [{
|
|
4236
4255
|
type: Component,
|
|
4237
|
-
args: [{ selector: 'nggv-typeahead-dropdown-list', standalone: false, template: "<ng-container *transloco=\"let t; read: scope\">\n <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\n <ul\n class=\"gds-dropdown__options card options gds-reset\"\n [class.gds-dropdown__options-expanded]=\"expanded\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.data-thook]=\"thook + '-options'\"\n [attr.aria-labelledby]=\"id + '-label'\"\n [attr.aria-activedescendant]=\"\n state ? id + '-option-' + (state?.id ?? state?.key) : undefined\n \"\n >\n <ng-container *ngFor=\"let item of options\">\n <!-- OPTION -->\n <ng-container *ngIf=\"!isGroup(item)\">\n <ng-template\n *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n\n <!-- OPTION GROUP -->\n <li\n class=\"gds-dropdown__options__label group\"\n [attr.data-thook]=\"thook + '-option-group'\"\n *ngIf=\"isGroup(item)\"\n >\n <!-- group label template (default or custom) -->\n <ng-template\n *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n ></ng-template>\n\n <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n <ng-container *ngFor=\"let option of castGroup(item).options\">\n <ng-template\n *ngTemplateOutlet=\"\n listItemTemplate;\n context: { $implicit: option }\n \"\n ></ng-template>\n </ng-container>\n </ul>\n </li>\n </ng-container>\n </ul>\n\n <!-- TEMPLATE -->\n <ng-template #listItemTemplate let-option>\n <li\n #optionRefs\n *ngIf=\"!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"\n basicOptionContentTpl;\n context: { $implicit: option }\n \"\n >\n </ng-template>\n </li>\n <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n <li\n #optionRefs\n *ngIf=\"!!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n >\n </ng-template>\n </li>\n </ng-template>\n\n <ng-template #listGroupTemplate let-item>\n <ng-container *ngIf=\"groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n <ng-container *ngIf=\"!groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n </ng-template>\n\n <ng-template #basicOptionContentTpl let-option>\n <nggv-typeahead-highlight\n *ngIf=\"!!textToHighlight\"\n [textToHighlight]=\"textToHighlight\"\n [textContent]=\"t(option.label)\"\n >\n </nggv-typeahead-highlight>\n <ng-container *ngIf=\"!textToHighlight\">\n {{ t(option.label) }}\n </ng-container>\n </ng-template>\n\n <ng-template #basicGroupLabelTpl let-item>\n <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n </ng-template>\n</ng-container>\n", styles: [":host{display:flex;position:relative;bottom:initial!important;transform:translateY(-1rem)!important}\n", ":host{--gds-
|
|
4256
|
+
args: [{ selector: 'nggv-typeahead-dropdown-list', standalone: false, template: "<ng-container *transloco=\"let t; read: scope\">\n <div class=\"visually-hidden\">{{ t(state?.label) }}</div>\n <ul\n class=\"gds-dropdown__options card options gds-reset\"\n [class.gds-dropdown__options-expanded]=\"expanded\"\n role=\"listbox\"\n tabindex=\"-1\"\n [attr.data-thook]=\"thook + '-options'\"\n [attr.aria-labelledby]=\"id + '-label'\"\n [attr.aria-activedescendant]=\"\n state ? id + '-option-' + (state?.id ?? state?.key) : undefined\n \"\n >\n <ng-container *ngFor=\"let item of options\">\n <!-- OPTION -->\n <ng-container *ngIf=\"!isGroup(item)\">\n <ng-template\n *ngTemplateOutlet=\"listItemTemplate; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n\n <!-- OPTION GROUP -->\n <li\n class=\"gds-dropdown__options__label group\"\n [attr.data-thook]=\"thook + '-option-group'\"\n *ngIf=\"isGroup(item)\"\n >\n <!-- group label template (default or custom) -->\n <ng-template\n *ngTemplateOutlet=\"listGroupTemplate; context: { $implicit: item }\"\n ></ng-template>\n\n <ul [attr.aria-disabled]=\"item.disabled\" class=\"gds-reset\">\n <ng-container *ngFor=\"let option of castGroup(item).options\">\n <ng-template\n *ngTemplateOutlet=\"\n listItemTemplate;\n context: { $implicit: option }\n \"\n ></ng-template>\n </ng-container>\n </ul>\n </li>\n </ng-container>\n </ul>\n\n <!-- TEMPLATE -->\n <ng-template #listItemTemplate let-option>\n <li\n #optionRefs\n *ngIf=\"!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n [nggvTooltip]=\"isOverflow(liElem) ? t(option.label) : undefined\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"\n basicOptionContentTpl;\n context: { $implicit: option }\n \"\n >\n </ng-template>\n </li>\n <!-- Checking overflow on custom templates do not work skip adding nggvToolTip if custom template is provided -->\n <li\n #optionRefs\n *ngIf=\"!!optionContentTpl\"\n tabindex=\"-1\"\n [id]=\"id + '-option-' + (option.id ?? option.key)\"\n class=\"gds-dropdown__options__label option\"\n role=\"option\"\n #liElem\n [attr.data-thook]=\"thook + '-option-' + option.key\"\n [attr.aria-disabled]=\"option.disabled\"\n [attr.aria-selected]=\"\n option.key === selectedValue?.key && !!selectedValue?.key\n \"\n [attr.aria-focus]=\"option.key === state?.key && !option.disabled\"\n (click)=\"updateState(option, $event)\"\n >\n <ng-template\n *ngTemplateOutlet=\"optionContentTpl; context: { $implicit: option }\"\n >\n </ng-template>\n </li>\n </ng-template>\n\n <ng-template #listGroupTemplate let-item>\n <ng-container *ngIf=\"groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"groupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n <ng-container *ngIf=\"!groupLabelTpl\">\n <ng-template\n *ngTemplateOutlet=\"basicGroupLabelTpl; context: { $implicit: item }\"\n ></ng-template>\n </ng-container>\n </ng-template>\n\n <ng-template #basicOptionContentTpl let-option>\n <nggv-typeahead-highlight\n *ngIf=\"!!textToHighlight\"\n [textToHighlight]=\"textToHighlight\"\n [textContent]=\"t(option.label)\"\n >\n </nggv-typeahead-highlight>\n <ng-container *ngIf=\"!textToHighlight\">\n {{ t(option.label) }}\n </ng-container>\n </ng-template>\n\n <ng-template #basicGroupLabelTpl let-item>\n <div class=\"nggv-group-label\">{{ t(item.label) }}</div>\n </ng-template>\n</ng-container>\n", styles: [":host{display:flex;position:relative;bottom:initial!important;transform:translateY(-1rem)!important}\n", ":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--gds-z-index-dropdown)}:host .visually-hidden:not(:focus):not(:active){clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host .hidden{visibility:hidden;display:none}:host ul[role=menu] [role=menuitem]{padding:.75rem}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-sys-color-base-200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-sys-color-base-300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=menu] [role=menuitem]{cursor:pointer}:host ul[role=listbox]{--z-index: 1060;background-color:var(--gds-sys-color-background-primary);flex-direction:column;justify-content:flex-end;inset:auto;z-index:var(--z-index);box-shadow:0 .125rem .375rem #00000026;color:var(--gds-sys-color-text-primary);padding:0;max-height:500px;overflow-y:auto;width:100%;overscroll-behavior:none;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-text-primary);border-radius:.25rem}:host ul[role=listbox] [role=option]{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ul[role=listbox] [role=option]:hover,:host ul[role=listbox] [role=option]:focus-visible{background-color:var(--gds-sys-color-base-200)}:host ul[role=listbox] [role=option]:active{background-color:var(--gds-sys-color-base-200)}:host ul[role=listbox] [role=option]:focus{outline-color:#000;outline-offset:-.25rem}:host ul[role=listbox] [role=option].active.sg-highlighted,:host ul[role=listbox] [role=option][aria-selected=true]{background:var(--gds-sys-color-base-800);color:#fff}:host ul[role=listbox] .group ul{list-style-type:none;padding:0}:host ul[role=listbox] .group:hover{color:inherit;background-color:inherit}:host .sg-fieldset-container{overflow-y:auto}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option]{display:flex;width:100%}:host .sg-fieldset-container fieldset[role=listbox][aria-multiselectable=true] [role=option].active.sg-highlighted input[type=checkbox]~i{border-color:#007ac7!important;box-shadow:0 0 .25em .0625em #41b0ee;outline-color:transparent;outline-style:solid}:host .gds-dropdown__options{padding-left:0;margin-bottom:0;margin-top:0;display:flex;flex-direction:column;list-style:none}:host .gds-dropdown__options>li{padding-bottom:.5rem;padding-top:.5rem;border:0;display:block;position:relative}:host .gds-dropdown__options>li:before{font-weight:500;display:inline-block;left:0;position:absolute;text-align:center}:host .gds-dropdown__options{display:none}:host .gds-dropdown__options-expanded{display:block}:host .gds-dropdown__options__label:hover,:host .gds-dropdown__options__label:focus-visible{background-color:var(--gds-sys-color-base-200)}:host .gds-dropdown__options__label:active{background-color:var(--gds-sys-color-base-300)}:host .gds-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host .gds-dropdown__options__label[aria-hidden=true]{display:none}:host .gds-dropdown__options__label[highlighted]{color:#fff}:host li+.group{padding-top:0}:host .nggv-group-label{cursor:pointer;background-color:#e7e7e7;padding-inline:1rem;padding-block:.5rem}:host[data-position=top]{top:auto;bottom:100%;transform:translateY(-.5rem)}:host[data-position=bottom]{bottom:0;transform:translateY(calc(100% + .5rem))}\n"] }]
|
|
4238
4257
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4239
4258
|
type: SkipSelf
|
|
4240
4259
|
}, {
|
|
@@ -4860,11 +4879,11 @@ class NggvInfoCircleComponent {
|
|
|
4860
4879
|
this.thook = 'info';
|
|
4861
4880
|
}
|
|
4862
4881
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvInfoCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4863
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvInfoCircleComponent, isStandalone: false, selector: "nggv-info-circle", inputs: { thook: "thook", info: "info" }, host: { properties: { "attr.data-thook": "this.thook" } }, ngImport: i0, template: "<svg [nggvTooltip]=\"info\">\n <path\n d=\"M10.75 11H12L12 16.25M21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n <path\n d=\"M11.375 8C11.375 8.34518 11.6548 8.625 12 8.625C12.3452 8.625 12.625 8.34518 12.625 8C12.625 7.65482 12.3452 7.375 12 7.375C11.6548 7.375 11.375 7.65482 11.375 8Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n stroke-width=\"0.25\"\n />\n</svg>\n", styles: [":host{display:block}svg{display:block;width:1.5rem;height:1.5rem}.gds-tooltip{background-color:#1a1a1a;color:#fff;font-size:.875rem;font-weight:400;line-height:1.5;padding:.5rem;pointer-events:none}.gds-tooltip__arrow-top{position:absolute;width:0;height:0;border:.5rem solid transparent;bottom:-1rem;left:50%;transform:translate(-50%);border-color:#1a1a1a transparent transparent}.gds-tooltip__arrow-bottom{position:absolute;width:0;height:0;border:.5rem solid transparent;top:-1rem;left:50%;transform:translate(-50%);border-color:transparent transparent #1a1a1a}.gds-tooltip__arrow-left{position:absolute;width:0;height:0;border:.5rem solid transparent;right:-1rem;top:50%;transform:translateY(-50%);border-color:transparent transparent transparent #1a1a1a}.gds-tooltip__arrow-right{position:absolute;width:0;height:0;border:.5rem solid transparent;left:-1rem;top:50%;transform:translateY(-50%);border-color:transparent #1a1a1a transparent transparent}\n"], dependencies: [{ kind: "directive", type: i3$1.NggvTooltipDirective, selector: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "tooltipId", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }] }); }
|
|
4882
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvInfoCircleComponent, isStandalone: false, selector: "nggv-info-circle", inputs: { thook: "thook", info: "info" }, host: { properties: { "attr.data-thook": "this.thook" } }, ngImport: i0, template: "<svg [nggvTooltip]=\"info\">\n <path\n d=\"M10.75 11H12L12 16.25M21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n <path\n d=\"M11.375 8C11.375 8.34518 11.6548 8.625 12 8.625C12.3452 8.625 12.625 8.34518 12.625 8C12.625 7.65482 12.3452 7.375 12 7.375C11.6548 7.375 11.375 7.65482 11.375 8Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n stroke-width=\"0.25\"\n />\n</svg>\n", styles: [":host{display:block}svg{display:block;width:1.5rem;height:1.5rem;outline-color:var(--gds-sys-color-black);outline-offset:2px}.gds-tooltip{background-color:#1a1a1a;color:#fff;font-size:.875rem;font-weight:400;line-height:1.5;padding:.5rem;pointer-events:none}.gds-tooltip__arrow-top{position:absolute;width:0;height:0;border:.5rem solid transparent;bottom:-1rem;left:50%;transform:translate(-50%);border-color:#1a1a1a transparent transparent}.gds-tooltip__arrow-bottom{position:absolute;width:0;height:0;border:.5rem solid transparent;top:-1rem;left:50%;transform:translate(-50%);border-color:transparent transparent #1a1a1a}.gds-tooltip__arrow-left{position:absolute;width:0;height:0;border:.5rem solid transparent;right:-1rem;top:50%;transform:translateY(-50%);border-color:transparent transparent transparent #1a1a1a}.gds-tooltip__arrow-right{position:absolute;width:0;height:0;border:.5rem solid transparent;left:-1rem;top:50%;transform:translateY(-50%);border-color:transparent #1a1a1a transparent transparent}\n"], dependencies: [{ kind: "directive", type: i3$1.NggvTooltipDirective, selector: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "tooltipId", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }] }); }
|
|
4864
4883
|
}
|
|
4865
4884
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvInfoCircleComponent, decorators: [{
|
|
4866
4885
|
type: Component,
|
|
4867
|
-
args: [{ selector: 'nggv-info-circle', standalone: false, template: "<svg [nggvTooltip]=\"info\">\n <path\n d=\"M10.75 11H12L12 16.25M21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n <path\n d=\"M11.375 8C11.375 8.34518 11.6548 8.625 12 8.625C12.3452 8.625 12.625 8.34518 12.625 8C12.625 7.65482 12.3452 7.375 12 7.375C11.6548 7.375 11.375 7.65482 11.375 8Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n stroke-width=\"0.25\"\n />\n</svg>\n", styles: [":host{display:block}svg{display:block;width:1.5rem;height:1.5rem}.gds-tooltip{background-color:#1a1a1a;color:#fff;font-size:.875rem;font-weight:400;line-height:1.5;padding:.5rem;pointer-events:none}.gds-tooltip__arrow-top{position:absolute;width:0;height:0;border:.5rem solid transparent;bottom:-1rem;left:50%;transform:translate(-50%);border-color:#1a1a1a transparent transparent}.gds-tooltip__arrow-bottom{position:absolute;width:0;height:0;border:.5rem solid transparent;top:-1rem;left:50%;transform:translate(-50%);border-color:transparent transparent #1a1a1a}.gds-tooltip__arrow-left{position:absolute;width:0;height:0;border:.5rem solid transparent;right:-1rem;top:50%;transform:translateY(-50%);border-color:transparent transparent transparent #1a1a1a}.gds-tooltip__arrow-right{position:absolute;width:0;height:0;border:.5rem solid transparent;left:-1rem;top:50%;transform:translateY(-50%);border-color:transparent #1a1a1a transparent transparent}\n"] }]
|
|
4886
|
+
args: [{ selector: 'nggv-info-circle', standalone: false, template: "<svg [nggvTooltip]=\"info\">\n <path\n d=\"M10.75 11H12L12 16.25M21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12Z\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n fill=\"none\"\n />\n <path\n d=\"M11.375 8C11.375 8.34518 11.6548 8.625 12 8.625C12.3452 8.625 12.625 8.34518 12.625 8C12.625 7.65482 12.3452 7.375 12 7.375C11.6548 7.375 11.375 7.65482 11.375 8Z\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n stroke-width=\"0.25\"\n />\n</svg>\n", styles: [":host{display:block}svg{display:block;width:1.5rem;height:1.5rem;outline-color:var(--gds-sys-color-black);outline-offset:2px}.gds-tooltip{background-color:#1a1a1a;color:#fff;font-size:.875rem;font-weight:400;line-height:1.5;padding:.5rem;pointer-events:none}.gds-tooltip__arrow-top{position:absolute;width:0;height:0;border:.5rem solid transparent;bottom:-1rem;left:50%;transform:translate(-50%);border-color:#1a1a1a transparent transparent}.gds-tooltip__arrow-bottom{position:absolute;width:0;height:0;border:.5rem solid transparent;top:-1rem;left:50%;transform:translate(-50%);border-color:transparent transparent #1a1a1a}.gds-tooltip__arrow-left{position:absolute;width:0;height:0;border:.5rem solid transparent;right:-1rem;top:50%;transform:translateY(-50%);border-color:transparent transparent transparent #1a1a1a}.gds-tooltip__arrow-right{position:absolute;width:0;height:0;border:.5rem solid transparent;left:-1rem;top:50%;transform:translateY(-50%);border-color:transparent #1a1a1a transparent transparent}\n"] }]
|
|
4868
4887
|
}], propDecorators: { thook: [{
|
|
4869
4888
|
type: HostBinding,
|
|
4870
4889
|
args: ['attr.data-thook']
|
|
@@ -5061,11 +5080,11 @@ class NggvInputComponent extends NggvBaseControlValueAccessorComponent$1 {
|
|
|
5061
5080
|
this.inputChange$.next(this.state);
|
|
5062
5081
|
}
|
|
5063
5082
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvInputComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5064
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvInputComponent, isStandalone: false, selector: "nggv-input", inputs: { size: "size", thook: "thook", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", email: "email", min: "min", max: "max", step: "step", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", showCharacterCountdown: "showCharacterCountdown", pattern: "pattern", debounceTime: "debounceTime", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.size", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n *transloco=\"let t; read: scope\"\n>\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 {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n class=\"form-info description hide-if-empty\"\n *ngIf=\"description && descriptionIsVisible\"\n>\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-container *ngIf=\"!inputMask\">\n {{ state }}\n </ng-container>\n <ng-container *ngIf=\"!!inputMask\">\n {{ state | nggvInputMaskFormat: inputMask }}\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n <div class=\"input-group-prefix hide-if-empty\">\n <ng-content select=\"[slot='prefix']\"></ng-content>\n </div>\n\n <!-- INPUT FIELD -->\n <div class=\"input-group\" *ngIf=\"!inputMask\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [attr.email]=\"email\"\n [attr.aria-describedby]=\"id + '-message'\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n title=\"\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- INPUT FIELD WITH MASK -->\n <div\n class=\"input-group\"\n *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n >\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [attr.aria-describedby]=\"id + '-message'\"\n [nggvInputMask]=\"inputMask\"\n title=\"\"\n [formControl]=\"control\"\n />\n </div>\n\n <div class=\"input-group-suffix hide-if-empty\">\n <ng-content select=\"[slot='suffix']\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-input'\"\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\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\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 </span>\n\n <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-sys-color-base-100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media(prefers-reduced-motion:reduce){:host .gds-form-item__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-sys-color-base-600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host *{box-sizing:border-box}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info.form-info--countdown{font-weight:400}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color)}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{background-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast:active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-sys-color-base-200)}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}:host .gds-input-wrapper{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper{display:flex;flex-direction:row}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input{border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label:not(.form-control){line-height:1rem;font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:1.875rem;min-height:1.75rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:1.875rem;min-height:1.75rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
|
|
5083
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvInputComponent, isStandalone: false, selector: "nggv-input", inputs: { size: "size", thook: "thook", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", readonly: "readonly", email: "email", min: "min", max: "max", step: "step", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", showCharacterCountdown: "showCharacterCountdown", pattern: "pattern", debounceTime: "debounceTime", inputMask: "inputMask" }, outputs: { nggvInput: "nggvInput" }, host: { properties: { "class": "this.size", "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n *transloco=\"let t; read: scope\"\n>\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 {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n class=\"gds-form-info description hide-if-empty\"\n *ngIf=\"description && descriptionIsVisible\"\n>\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-container *ngIf=\"!inputMask\">\n {{ state }}\n </ng-container>\n <ng-container *ngIf=\"!!inputMask\">\n {{ state | nggvInputMaskFormat: inputMask }}\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n <div class=\"input-group-prefix hide-if-empty\">\n <ng-content select=\"[slot='prefix']\"></ng-content>\n </div>\n\n <!-- INPUT FIELD -->\n <div class=\"input-group\" *ngIf=\"!inputMask\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [attr.email]=\"email\"\n [attr.aria-describedby]=\"id + '-message'\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n title=\"\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- INPUT FIELD WITH MASK -->\n <div\n class=\"input-group\"\n *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n >\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [attr.aria-describedby]=\"id + '-message'\"\n [nggvInputMask]=\"inputMask\"\n title=\"\"\n [formControl]=\"control\"\n />\n </div>\n\n <div class=\"input-group-suffix hide-if-empty\">\n <ng-content select=\"[slot='suffix']\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"gds-form-info gds-form-info--error\"\n [attr.for]=\"id + '-input'\"\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\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\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 </span>\n\n <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"gds-form-info gds-form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host *{box-sizing:border-box}:host .gds-form-item__footer .gds-form-info{font-weight:500}:host .gds-form-item__footer .gds-form-info.form-info--countdown{font-weight:400}:host .gds-form-item__footer .gds-form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .gds-form-info--error .error-icon{align-items:center}:host .gds-form-item__footer .gds-form-info--error .error-icon .error-icon{align-items:center}:host .gds-form-item__footer .gds-form-info--error>.gds-form-info--countdown{font-weight:400}:host .hide-if-empty:empty{display:none}:host input{padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600)}:host input:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:focus,:host input:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input{background-color:var(--gds-sys-color-background-primary);color:var(--gds-sys-color-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input.small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast:active){:host input{border:2px solid currentcolor}}:host input:disabled,:host input.disabled,:host input[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host input:disabled::placeholder,:host input.disabled::placeholder,:host input[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host input:hover{background-color:var(--gds-sys-color-base-100)}:host input[type=number]{appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:#9f000a;opacity:1}.is-invalid :host .gds-input-wrapper:before{background:#9f000a;clip-path:inset(1px 0 0 0)}:host .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}:host .gds-input-wrapper{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper{display:flex;flex-direction:row}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input{border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label:not(.form-control){line-height:1rem;font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:1.875rem;min-height:1.75rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:1.875rem;min-height:1.75rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.gds-form-control,:host .label.gds-form-control,:host legend.gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host label.gds-form-control:focus:not(:focus-visible),:host .label.gds-form-control:focus:not(:focus-visible),:host legend.gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.gds-form-control:focus,:host label.gds-form-control:focus-within,:host .label.gds-form-control:focus,:host .label.gds-form-control:focus-within,:host legend.gds-form-control:focus,:host legend.gds-form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-form-control),:host .label:not(.gds-form-control),:host legend:not(.gds-form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+.gds-button,:host label+.gds-group-stepper,:host label+.gds-stepper-wrapper,:host label+.gds-group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+.gds-button,:host .label+.gds-group-stepper,:host .label+.gds-stepper-wrapper,:host .label+.gds-group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+.gds-button,:host legend+.gds-group-stepper,:host legend+.gds-stepper-wrapper,:host legend+.gds-group{margin-top:.5rem}:host label+.gds-form-info,:host .label+.gds-form-info,:host legend+.gds-form-info{margin-bottom:.5rem}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .gds-form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4$1.NggvInputMaskDirective, selector: "[nggvInputMask]", inputs: ["nggvInputMask"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.InputMaskFormatPipe, name: "nggvInputMaskFormat" }] }); }
|
|
5065
5084
|
}
|
|
5066
5085
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvInputComponent, decorators: [{
|
|
5067
5086
|
type: Component,
|
|
5068
|
-
args: [{ selector: 'nggv-input', standalone: false, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n *transloco=\"let t; read: scope\"\n>\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 {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n class=\"form-info description hide-if-empty\"\n *ngIf=\"description && descriptionIsVisible\"\n>\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-container *ngIf=\"!inputMask\">\n {{ state }}\n </ng-container>\n <ng-container *ngIf=\"!!inputMask\">\n {{ state | nggvInputMaskFormat: inputMask }}\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n <div class=\"input-group-prefix hide-if-empty\">\n <ng-content select=\"[slot='prefix']\"></ng-content>\n </div>\n\n <!-- INPUT FIELD -->\n <div class=\"input-group\" *ngIf=\"!inputMask\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [attr.email]=\"email\"\n [attr.aria-describedby]=\"id + '-message'\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n title=\"\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- INPUT FIELD WITH MASK -->\n <div\n class=\"input-group\"\n *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n >\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [attr.aria-describedby]=\"id + '-message'\"\n [nggvInputMask]=\"inputMask\"\n title=\"\"\n [formControl]=\"control\"\n />\n </div>\n\n <div class=\"input-group-suffix hide-if-empty\">\n <ng-content select=\"[slot='suffix']\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-input'\"\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\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\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 </span>\n\n <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686;display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0}:host:not(:last-child){margin-bottom:1.5rem}:host .gds-form-item__header{display:flex}:host .gds-form-item__header .form-info{font-weight:400}:host .gds-form-item__header button.icon.small{margin-top:-.5rem;margin-right:-.5rem}:host .gds-form-item__labels{flex:1;margin-bottom:.5rem}:host .gds-form-item__labels .form-info{margin-bottom:0}:host .gds-form-item__labels .form-info a:link:not(.button,[aria-disabled]){color:#0062bc}:host .gds-form-item__labels>*{width:100%;display:block}:host .gds-form-item__expandable-info{overflow:hidden;font-size:.875rem;line-height:1.25rem;transition:height .3s cubic-bezier(.23,1,.32,1)}:host .gds-form-item__expandable-info>div{padding-bottom:.5rem}:host .gds-form-item__backdrop{position:absolute;inset:0;background:var(--gds-sys-color-base-100);border-radius:2px;z-index:-1;margin:-1rem;opacity:0;transition:all .3s cubic-bezier(.23,1,.32,1);border:1px solid transparent}@media(prefers-reduced-motion:reduce){:host .gds-form-item__backdrop{transition:none}}:host:has([aria-expanded=true]) .gds-form-item__backdrop{opacity:1;border-radius:.25rem;border-color:var(--gds-sys-color-base-600)}:host .gds-form-item__footer:not(:empty){margin-top:.5rem;display:flex;column-gap:.5rem}:host .gds-form-item__footer:not(:empty)>span,:host .gds-form-item__footer:not(:empty)>.form-info{font-weight:500;line-height:1.125}:host *{box-sizing:border-box}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info.form-info--countdown{font-weight:400}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{align-items:center}:host .hide-if-empty:empty{display:none}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color)}:host input:not([type]):focus:not(:focus-visible),:host input[type=date]:focus:not(:focus-visible),:host input[type=datetime]:focus:not(:focus-visible),:host input[type=datetime-local]:focus:not(:focus-visible),:host input[type=email]:focus:not(:focus-visible),:host input[type=month]:focus:not(:focus-visible),:host input[type=number]:focus:not(:focus-visible),:host input[type=password]:focus:not(:focus-visible),:host input[type=search]:focus:not(:focus-visible),:host input[type=tel]:focus:not(:focus-visible),:host input[type=text]:focus:not(:focus-visible),:host input[type=time]:focus:not(:focus-visible),:host input[type=url]:focus:not(:focus-visible),:host input[type=week]:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:not([type]):focus,:host input:not([type]):focus-visible,:host input[type=date]:focus,:host input[type=date]:focus-visible,:host input[type=datetime]:focus,:host input[type=datetime]:focus-visible,:host input[type=datetime-local]:focus,:host input[type=datetime-local]:focus-visible,:host input[type=email]:focus,:host input[type=email]:focus-visible,:host input[type=month]:focus,:host input[type=month]:focus-visible,:host input[type=number]:focus,:host input[type=number]:focus-visible,:host input[type=password]:focus,:host input[type=password]:focus-visible,:host input[type=search]:focus,:host input[type=search]:focus-visible,:host input[type=tel]:focus,:host input[type=tel]:focus-visible,:host input[type=text]:focus,:host input[type=text]:focus-visible,:host input[type=time]:focus,:host input[type=time]:focus-visible,:host input[type=url]:focus,:host input[type=url]:focus-visible,:host input[type=week]:focus,:host input[type=week]:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{background-color:var(--sg-form-control-bg);color:var(--sg-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input:not([type]).small,:host input[type=date].small,:host input[type=datetime].small,:host input[type=datetime-local].small,:host input[type=email].small,:host input[type=month].small,:host input[type=number].small,:host input[type=password].small,:host input[type=search].small,:host input[type=tel].small,:host input[type=text].small,:host input[type=time].small,:host input[type=url].small,:host input[type=week].small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast:active){:host input:not([type]),:host input[type=date],:host input[type=datetime],:host input[type=datetime-local],:host input[type=email],:host input[type=month],:host input[type=number],:host input[type=password],:host input[type=search],:host input[type=tel],:host input[type=text],:host input[type=time],:host input[type=url],:host input[type=week]{border:2px solid currentcolor}}:host input:not([type]):disabled,:host input:not([type]).disabled,:host input:not([type])[aria-disabled=true],:host input[type=date]:disabled,:host input[type=date].disabled,:host input[type=date][aria-disabled=true],:host input[type=datetime]:disabled,:host input[type=datetime].disabled,:host input[type=datetime][aria-disabled=true],:host input[type=datetime-local]:disabled,:host input[type=datetime-local].disabled,:host input[type=datetime-local][aria-disabled=true],:host input[type=email]:disabled,:host input[type=email].disabled,:host input[type=email][aria-disabled=true],:host input[type=month]:disabled,:host input[type=month].disabled,:host input[type=month][aria-disabled=true],:host input[type=number]:disabled,:host input[type=number].disabled,:host input[type=number][aria-disabled=true],:host input[type=password]:disabled,:host input[type=password].disabled,:host input[type=password][aria-disabled=true],:host input[type=search]:disabled,:host input[type=search].disabled,:host input[type=search][aria-disabled=true],:host input[type=tel]:disabled,:host input[type=tel].disabled,:host input[type=tel][aria-disabled=true],:host input[type=text]:disabled,:host input[type=text].disabled,:host input[type=text][aria-disabled=true],:host input[type=time]:disabled,:host input[type=time].disabled,:host input[type=time][aria-disabled=true],:host input[type=url]:disabled,:host input[type=url].disabled,:host input[type=url][aria-disabled=true],:host input[type=week]:disabled,:host input[type=week].disabled,:host input[type=week][aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host input:not([type]):disabled::placeholder,:host input:not([type]).disabled::placeholder,:host input:not([type])[aria-disabled=true]::placeholder,:host input[type=date]:disabled::placeholder,:host input[type=date].disabled::placeholder,:host input[type=date][aria-disabled=true]::placeholder,:host input[type=datetime]:disabled::placeholder,:host input[type=datetime].disabled::placeholder,:host input[type=datetime][aria-disabled=true]::placeholder,:host input[type=datetime-local]:disabled::placeholder,:host input[type=datetime-local].disabled::placeholder,:host input[type=datetime-local][aria-disabled=true]::placeholder,:host input[type=email]:disabled::placeholder,:host input[type=email].disabled::placeholder,:host input[type=email][aria-disabled=true]::placeholder,:host input[type=month]:disabled::placeholder,:host input[type=month].disabled::placeholder,:host input[type=month][aria-disabled=true]::placeholder,:host input[type=number]:disabled::placeholder,:host input[type=number].disabled::placeholder,:host input[type=number][aria-disabled=true]::placeholder,:host input[type=password]:disabled::placeholder,:host input[type=password].disabled::placeholder,:host input[type=password][aria-disabled=true]::placeholder,:host input[type=search]:disabled::placeholder,:host input[type=search].disabled::placeholder,:host input[type=search][aria-disabled=true]::placeholder,:host input[type=tel]:disabled::placeholder,:host input[type=tel].disabled::placeholder,:host input[type=tel][aria-disabled=true]::placeholder,:host input[type=text]:disabled::placeholder,:host input[type=text].disabled::placeholder,:host input[type=text][aria-disabled=true]::placeholder,:host input[type=time]:disabled::placeholder,:host input[type=time].disabled::placeholder,:host input[type=time][aria-disabled=true]::placeholder,:host input[type=url]:disabled::placeholder,:host input[type=url].disabled::placeholder,:host input[type=url][aria-disabled=true]::placeholder,:host input[type=week]:disabled::placeholder,:host input[type=week].disabled::placeholder,:host input[type=week][aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host input:not([type]):hover,:host input[type=date]:hover,:host input[type=datetime]:hover,:host input[type=datetime-local]:hover,:host input[type=email]:hover,:host input[type=month]:hover,:host input[type=number]:hover,:host input[type=password]:hover,:host input[type=search]:hover,:host input[type=tel]:hover,:host input[type=text]:hover,:host input[type=time]:hover,:host input[type=url]:hover,:host input[type=week]:hover{background-color:var(--gds-sys-color-base-200)}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:var(--intent-danger-background);opacity:1}.is-invalid :host .gds-input-wrapper:before{background:var(--intent-danger-background);clip-path:inset(1px 0 0 0)}:host .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}:host .gds-input-wrapper{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper{display:flex;flex-direction:row}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input{border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label:not(.form-control){line-height:1rem;font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:1.875rem;min-height:1.75rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:1.875rem;min-height:1.75rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.form-control,:host .label.form-control,:host legend.form-control{width:fit-content}@supports (-moz-appearance: none){:host label.form-control:focus:not(:focus-visible),:host .label.form-control:focus:not(:focus-visible),:host legend.form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:focus,:host label.form-control:focus-within,:host .label.form-control:focus,:host .label.form-control:focus-within,:host legend.form-control:focus,:host legend.form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.form-control),:host .label:not(.form-control),:host legend:not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+button,:host label+.group-stepper,:host label+.stepper-wrapper,:host label+.group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+button,:host .label+.group-stepper,:host .label+.stepper-wrapper,:host .label+.group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+button,:host legend+.group-stepper,:host legend+.stepper-wrapper,:host legend+.group{margin-top:.5rem}:host label+.form-info,:host .label+.form-info,:host legend+.form-info{margin-bottom:.5rem}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"] }]
|
|
5087
|
+
args: [{ selector: 'nggv-input', standalone: false, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-input'\"\n *transloco=\"let t; read: scope\"\n>\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 {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div\n class=\"gds-form-info description hide-if-empty\"\n *ngIf=\"description && descriptionIsVisible\"\n>\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-input'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n <ng-container *ngIf=\"!inputMask\">\n {{ state }}\n </ng-container>\n <ng-container *ngIf=\"!!inputMask\">\n {{ state | nggvInputMaskFormat: inputMask }}\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div class=\"gds-input-wrapper\" [class.nggv-field--error]=\"invalid\">\n <div class=\"input-group-prefix hide-if-empty\">\n <ng-content select=\"[slot='prefix']\"></ng-content>\n </div>\n\n <!-- INPUT FIELD -->\n <div class=\"input-group\" *ngIf=\"!inputMask\">\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [attr.email]=\"email\"\n [attr.aria-describedby]=\"id + '-message'\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n title=\"\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- INPUT FIELD WITH MASK -->\n <div\n class=\"input-group\"\n *ngIf=\"!!inputMask && (hideInput$ | async) === false\"\n >\n <input\n #input\n [id]=\"id + '-input'\"\n class=\"gds-field\"\n autocomplete=\"off\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [attr.aria-describedby]=\"id + '-message'\"\n [nggvInputMask]=\"inputMask\"\n title=\"\"\n [formControl]=\"control\"\n />\n </div>\n\n <div class=\"input-group-suffix hide-if-empty\">\n <ng-content select=\"[slot='suffix']\"></ng-content>\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"gds-form-info gds-form-info--error\"\n [attr.for]=\"id + '-input'\"\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\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\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 </span>\n\n <ng-container *ngIf=\"!inputMask && hasMaxLength && showCharacterCountdown\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"gds-form-info gds-form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host *{box-sizing:border-box}:host .gds-form-item__footer .gds-form-info{font-weight:500}:host .gds-form-item__footer .gds-form-info.form-info--countdown{font-weight:400}:host .gds-form-item__footer .gds-form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .gds-form-info--error .error-icon{align-items:center}:host .gds-form-item__footer .gds-form-info--error .error-icon .error-icon{align-items:center}:host .gds-form-item__footer .gds-form-info--error>.gds-form-info--countdown{font-weight:400}:host .hide-if-empty:empty{display:none}:host input{padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600)}:host input:focus:not(:focus-visible){box-shadow:none;outline:0}:host input:focus,:host input:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host input{background-color:var(--gds-sys-color-background-primary);color:var(--gds-sys-color-text-primary);min-height:2.75rem;display:flex;align-items:center;justify-content:center}:host input.small{min-height:2rem;padding:.25rem .75rem;line-height:1rem}@media screen and (-ms-high-contrast:active){:host input{border:2px solid currentcolor}}:host input:disabled,:host input.disabled,:host input[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host input:disabled::placeholder,:host input.disabled::placeholder,:host input[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host input:hover{background-color:var(--gds-sys-color-base-100)}:host input[type=number]{appearance:textfield}:host input[type=number]::-webkit-outer-spin-button,:host input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input{width:100%;line-height:18px;font-size:1rem;font-family:inherit}:host .gds-input-wrapper{position:relative}:host .gds-input-wrapper:before{background:transparent;border-radius:0 0 4px 4px;clip-path:inset(4px 0 0 0);content:\"\";display:block;height:4px;position:absolute;transition:.3s ease-in-out;width:100%}:host .gds-input-wrapper:before{bottom:0}.is-invalid :host .gds-input-wrapper{color:#9f000a;opacity:1}.is-invalid :host .gds-input-wrapper:before{background:#9f000a;clip-path:inset(1px 0 0 0)}:host .gds-input-wrapper.nggv-field--error{border-bottom:.125rem solid #9f000a!important;height:100%}:host .gds-input-wrapper{border:1px solid #868686;border-radius:4px;outline:none;box-sizing:border-box;min-height:2.75rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper *,:host .gds-input-wrapper *:before,:host .gds-input-wrapper *:after{box-sizing:border-box}:host .gds-input-wrapper{display:flex;flex-direction:row}:host .gds-input-wrapper .input-group-prefix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-right-radius:0!important;border-bottom-right-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-prefix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-prefix{min-width:initial}}:host .gds-input-wrapper .input-group-prefix:empty{display:none}:host .gds-input-wrapper .input-group-suffix{min-height:2.5rem;border:none;border-radius:3px;height:2.625rem;min-width:2.625rem;border-top-left-radius:0!important;border-bottom-left-radius:0!important;display:flex;align-items:center;justify-content:center}:host .gds-input-wrapper .input-group-suffix[disabled]{background-color:#f8f8f8!important;color:#adadad}@media(max-width:35.98em){:host .gds-input-wrapper .input-group-suffix{min-width:initial}}:host .gds-input-wrapper .input-group-suffix:empty{display:none}:host .gds-input-wrapper .input-group{width:100%}:host .gds-input-wrapper .input-group input{outline:none;min-height:2.5rem;height:2.625rem;line-height:1.5;font-size:1rem;font-family:inherit}:host .gds-input-wrapper .input-group input *,:host .gds-input-wrapper .input-group input *:before,:host .gds-input-wrapper .input-group input *:after{box-sizing:border-box}:host .gds-input-wrapper .input-group input:hover{border-color:#41b0ee}:host .gds-input-wrapper .input-group input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-input-wrapper .input-group input:active{border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]{background-color:#f8f8f8;border-color:#cecece}:host .gds-input-wrapper .input-group input[disabled]::placeholder{color:#cecece}:host .gds-input-wrapper .input-group input{border:none;min-height:2.375rem;width:100%}:host .gds-input-wrapper .input-group input:not(:focus){border-right:none;padding-right:0}:host .gds-input-wrapper .input-group input:focus{padding-right:0}:host .gds-input-wrapper:has(.input-group-prefix:not(:empty)) .input-group input{border-bottom-left-radius:0;border-top-left-radius:0}:host .gds-input-wrapper:has(.input-group-suffix:not(:empty)) .input-group input{border-bottom-right-radius:0;border-top-right-radius:0}:host.small label:not(.form-control){line-height:1rem;font-size:.875rem}:host.small label+.form-info{margin-bottom:.25rem}:host.small label+.gds-input-wrapper{margin-top:.25rem}:host.small .gds-input-wrapper{min-height:2rem}:host.small .gds-input-wrapper .input-group input{padding:.38rem .5rem;line-height:1rem;height:1.875rem;min-height:1.75rem;font-size:.875rem}:host.small .gds-input-wrapper .input-group-suffix,:host.small .gds-input-wrapper .input-group-prefix{height:1.875rem;min-height:1.75rem;min-width:initial}:host.small .gds-form-item__footer:not(:empty){margin-top:.25rem}:host label:is(label),:host .label:is(label),:host legend:is(label){margin-bottom:0}:host label.gds-form-control,:host .label.gds-form-control,:host legend.gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host label.gds-form-control:focus:not(:focus-visible),:host .label.gds-form-control:focus:not(:focus-visible),:host legend.gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label.gds-form-control:focus,:host label.gds-form-control:focus-within,:host .label.gds-form-control:focus,:host .label.gds-form-control:focus-within,:host legend.gds-form-control:focus,:host legend.gds-form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-form-control),:host .label:not(.gds-form-control),:host legend:not(.gds-form-control){font-weight:500;width:100%;line-height:1.25rem}:host label+input,:host label+textarea,fieldset :host label+div,:host label+.gds-button,:host label+.gds-group-stepper,:host label+.gds-stepper-wrapper,:host label+.gds-group,:host .label+input,:host .label+textarea,fieldset :host .label+div,:host .label+.gds-button,:host .label+.gds-group-stepper,:host .label+.gds-stepper-wrapper,:host .label+.gds-group,:host legend+input,:host legend+textarea,fieldset :host legend+div,:host legend+.gds-button,:host legend+.gds-group-stepper,:host legend+.gds-stepper-wrapper,:host legend+.gds-group{margin-top:.5rem}:host label+.gds-form-info,:host .label+.gds-form-info,:host legend+.gds-form-info{margin-bottom:.5rem}:host label+.gds-input-wrapper,:host label+.nggv-field--locked{margin-top:.5rem}:host .gds-field-label--optional{font-weight:400}:host .gds-form-info{font-size:.875rem;line-height:1.25rem;width:100%}\n"] }]
|
|
5069
5088
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
5070
5089
|
type: Self
|
|
5071
5090
|
}, {
|
|
@@ -5564,11 +5583,11 @@ class NggvDialogComponent {
|
|
|
5564
5583
|
this.configurableFocusTrap?.destroy();
|
|
5565
5584
|
}
|
|
5566
5585
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvDialogComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$3.ConfigurableFocusTrapFactory }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5567
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvDialogComponent, isStandalone: false, selector: "nggv-dialog", inputs: { thook: "thook", shown: "shown", initiallyShown: "initiallyShown", heading: "heading", title: "title", content: "content", autoClose: "autoClose", payload: "payload", dialogTitleId: "dialogTitleId", dialogBodyId: "dialogBodyId", closeModalOnEscape: "closeModalOnEscape", closeButtonAriaLabel: "closeButtonAriaLabel", buttons: "buttons" }, outputs: { nggvCloseEvent: "nggvCloseEvent", nggvPositiveEvent: "nggvPositiveEvent", nggvNeutralEvent: "nggvNeutralEvent", nggvNegativeEvent: "nggvNegativeEvent", nggvDangerEvent: "nggvDangerEvent" }, host: { listeners: { "click": "close($event,\"host\")", "document:keydown.escape": "close($event)", "keydown": "focusTrap($event)" }, properties: { "attr.data-thook": "this.thook", "class.gds-modal-dialog": "this.baseClass", "attr.aria-hidden": "this.ariaHidden" } }, viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialog"], descendants: true }], exportAs: ["dialog"], ngImport: i0, template: "<ng-container *ngIf=\"shown\">\n <div class=\"modal-dialog__wrapper\" [class.-active]=\"shown\">\n <div\n class=\"modal-dialog__container\"\n *transloco=\"let t\"\n #dialog\n role=\"dialog\"\n aria-dialog=\"true\"\n [attr.aria-labelledby]=\"dialogTitleId\"\n [attr.aria-describedby]=\"dialogBodyId\"\n >\n <header class=\"modal-dialog__heading\">\n <h3 [attr.id]=\"dialogTitleId\">{{ t(heading || title || '') }}</h3>\n <button\n data-thook=\"dialog-close\"\n (click)=\"onAction($event, 'close')\"\n (keydown.enter)=\"onAction($event, 'close')\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n class=\"nggv-modal-slideout__close\"\n >\n <i></i>\n </button>\n </header>\n <section class=\"modal-dialog__body\" [attr.id]=\"dialogBodyId\">\n <div [innerHtml]=\"content\"></div>\n <ng-content></ng-content>\n </section>\n <footer class=\"modal-dialog__actions\">\n <button\n class=\"danger-confirm\"\n type=\"reset\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n (click)=\"onAction($event, 'negative')\"\n (keydown.enter)=\"onAction($event, 'negative')\"\n *ngIf=\"_buttons && _buttons.negative\"\n >\n {{ t(_buttons.negative) }}\n </button>\n <button\n class=\"secondary\"\n type=\"button\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n (click)=\"onAction($event, 'neutral')\"\n (keydown.enter)=\"onAction($event, 'neutral')\"\n *ngIf=\"_buttons && _buttons.neutral\"\n >\n {{ t(_buttons.neutral) }}\n </button>\n <button\n class=\"danger\"\n type=\"submit\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.danger || 'danger')\"\n (click)=\"onAction($event, 'danger')\"\n (keydown.enter)=\"onAction($event, 'danger')\"\n *ngIf=\"_buttons && _buttons.danger\"\n >\n {{ t(_buttons.danger) }}\n </button>\n <button\n class=\"submit\"\n type=\"submit\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n (click)=\"onAction($event, 'positive')\"\n (keydown.enter)=\"onAction($event, 'positive')\"\n *ngIf=\"_buttons && _buttons.positive\"\n >\n {{ t(_buttons.positive) }}\n </button>\n </footer>\n </div>\n <div class=\"nggv-backdrop\"></div>\n </div>\n</ng-container>\n", styles: [":host{--grey-500: rgb(222, 222, 222);--background-hsl: 0deg, 0%, 0%;--gds-ref-pallet-base200: hsl(0, 0%, 91%);--gds-sys-color-base: hsl(0, 0%, 20%);--gds-sys-color-font: hsl(0, 0%, 20%);--gds-sys-shape-corner-round: 50%;--sg-border-color: #e9e9e9;--sg-border-radius: .25rem;--sg-border-width-50: .5px;--sg-border-width: 1px;--sg-hsl-contrast: 0deg, 0%, 0%;--sg-modal-backdrop-background: rgba(0, 0, 0, .5);--sg-modal-background: #fff;--sg-modal-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--sg-z-index-modal-backdrop: 1040;--sg-z-index-modal: 1050;--text-primary-color: rgb(51, 51, 51)}:host .modal-dialog__wrapper{inset:0;position:fixed;display:grid;place-content:center;z-index:calc(var(--sg-z-index-modal-backdrop) + 1)}:host .modal-dialog__container{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal)}:host .modal-dialog__container>.header,:host .modal-dialog__container>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-dialog__container>.header h3,:host .modal-dialog__container>.header .h3,:host .modal-dialog__container>header h3,:host .modal-dialog__container>header .h3{margin-bottom:0;margin-top:0}:host .modal-dialog__container>.header h3+.close,:host .modal-dialog__container>.header .h3+.close,:host .modal-dialog__container>header h3+.close,:host .modal-dialog__container>header .h3+.close{margin:-7px;min-width:2rem}:host .modal-dialog__container>.body{padding:1rem;overflow:auto;width:100%}:host .modal-dialog__container>.body p{margin-bottom:0;margin-top:0}:host .modal-dialog__container>.footer,:host .modal-dialog__container>footer{padding:1rem;width:100%}@media(min-width:36em){:host .modal-dialog__container>.footer,:host .modal-dialog__container>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .modal-dialog__container>.footer button+button,:host .modal-dialog__container>.footer button+.button,:host .modal-dialog__container>.footer .button+button,:host .modal-dialog__container>.footer .button+.button,:host .modal-dialog__container>footer button+button,:host .modal-dialog__container>footer button+.button,:host .modal-dialog__container>footer .button+button,:host .modal-dialog__container>footer .button+.button{margin-top:.75rem}}@media(min-width:36em){:host .modal-dialog__container>.footer button+button,:host .modal-dialog__container>.footer button+.button,:host .modal-dialog__container>.footer .button+button,:host .modal-dialog__container>.footer .button+.button,:host .modal-dialog__container>footer button+button,:host .modal-dialog__container>footer button+.button,:host .modal-dialog__container>footer .button+button,:host .modal-dialog__container>footer .button+.button{margin-left:.75rem}}:host .modal-dialog__container{position:initial;width:375px;max-width:95vw}:host .modal-dialog__container.medium{width:512px}:host .modal-dialog__container.large{width:720px}:host .modal-dialog__heading{box-sizing:border-box;padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-dialog__heading h3,:host .modal-dialog__heading .h3{margin-bottom:0;margin-top:0}:host .modal-dialog__heading h3+.close,:host .modal-dialog__heading .h3+.close{margin:-7px;min-width:2rem}:host .modal-dialog__body{padding:1rem;overflow:auto;width:100%}:host .modal-dialog__body p{margin-bottom:0;margin-top:0}:host .modal-dialog__actions,:host .modal-dialog__heading,:host .modal-dialog__body{box-sizing:border-box}:host .nggv-backdrop{background:var(--sg-modal-backdrop-background);inset:0;position:fixed;z-index:var(--sg-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .nggv-modal-slideout__close{background-color:transparent;padding:0;font-size:0;background:var(--gds-sys-color-surface);border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem}@media(hover:none)and (pointer:coarse){:host .nggv-modal-slideout__close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-base)}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:after,:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .nggv-modal-slideout__close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-modal-slideout__close:focus,:host .nggv-modal-slideout__close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-modal-slideout__close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .nggv-modal-slideout__close>i:after,:host .nggv-modal-slideout__close>i:before{background:var(--gds-sys-color-font);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .nggv-modal-slideout__close>i:after{transform:rotate(45deg)}:host .nggv-modal-slideout__close>i:before{transform:rotate(-45deg)}:host .nggv-modal-slideout__close>svg path{fill:var(--gds-sys-color-font)}@media(min-width:48em){:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-font) 10%,transparent)}:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-font) 20%,transparent)}}:host .nggv-modal-slideout__close{min-height:2rem;min-width:2rem}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions button{font-size:1rem;font-family:inherit}:host .modal-dialog__actions .submit{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .submit:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .submit[aria-selected=true],:host .modal-dialog__actions .submit:active,:host .modal-dialog__actions .submit.active,:host .modal-dialog__actions .submit.active:hover,:host .modal-dialog__actions .submit:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .submit:focus-visible{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3!important}:host .modal-dialog__actions .submit{background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .modal-dialog__actions .submit:disabled,:host .modal-dialog__actions .submit.disabled,:host .modal-dialog__actions .submit[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .submit:disabled::placeholder,:host .modal-dialog__actions .submit.disabled::placeholder,:host .modal-dialog__actions .submit[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .secondary{background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .danger-confirm{color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .danger-confirm:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .modal-dialog__actions .danger-confirm[aria-selected=true],:host .modal-dialog__actions .danger-confirm:active,:host .modal-dialog__actions .danger-confirm.active,:host .modal-dialog__actions .danger-confirm.active:hover,:host .modal-dialog__actions .danger-confirm:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .modal-dialog__actions .danger-confirm[aria-selected]:hover,:host .modal-dialog__actions .danger-confirm.active:hover,:host .modal-dialog__actions .danger-confirm:active:hover{opacity:.9}:host .modal-dialog__actions .danger-confirm:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger-confirm:focus,:host .modal-dialog__actions .danger-confirm:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .danger{background:#bb000c;border-color:#bb000c;color:#fff;--color: #fff;transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .danger:disabled,:host .modal-dialog__actions .danger.disabled,:host .modal-dialog__actions .danger[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .danger:disabled::placeholder,:host .modal-dialog__actions .danger.disabled::placeholder,:host .modal-dialog__actions .danger[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
|
|
5586
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvDialogComponent, isStandalone: false, selector: "nggv-dialog", inputs: { thook: "thook", shown: "shown", initiallyShown: "initiallyShown", heading: "heading", title: "title", content: "content", autoClose: "autoClose", payload: "payload", dialogTitleId: "dialogTitleId", dialogBodyId: "dialogBodyId", closeModalOnEscape: "closeModalOnEscape", closeButtonAriaLabel: "closeButtonAriaLabel", buttons: "buttons" }, outputs: { nggvCloseEvent: "nggvCloseEvent", nggvPositiveEvent: "nggvPositiveEvent", nggvNeutralEvent: "nggvNeutralEvent", nggvNegativeEvent: "nggvNegativeEvent", nggvDangerEvent: "nggvDangerEvent" }, host: { listeners: { "click": "close($event,\"host\")", "document:keydown.escape": "close($event)", "keydown": "focusTrap($event)" }, properties: { "attr.data-thook": "this.thook", "class.gds-modal-dialog": "this.baseClass", "attr.aria-hidden": "this.ariaHidden" } }, viewQueries: [{ propertyName: "dialogRef", first: true, predicate: ["dialog"], descendants: true }], exportAs: ["dialog"], ngImport: i0, template: "<ng-container *ngIf=\"shown\">\n <div class=\"modal-dialog__wrapper\" [class.-active]=\"shown\">\n <div\n class=\"modal-dialog__container\"\n *transloco=\"let t\"\n #dialog\n role=\"dialog\"\n aria-dialog=\"true\"\n [attr.aria-labelledby]=\"dialogTitleId\"\n [attr.aria-describedby]=\"dialogBodyId\"\n >\n <header class=\"modal-dialog__heading\">\n <h3 [attr.id]=\"dialogTitleId\">{{ t(heading || title || '') }}</h3>\n <button\n data-thook=\"dialog-close\"\n (click)=\"onAction($event, 'close')\"\n (keydown.enter)=\"onAction($event, 'close')\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n class=\"gds-close\"\n >\n <i></i>\n </button>\n </header>\n <section class=\"modal-dialog__body\" [attr.id]=\"dialogBodyId\">\n <div [innerHtml]=\"content\"></div>\n <ng-content></ng-content>\n </section>\n <footer class=\"modal-dialog__actions\">\n <button\n class=\"danger-confirm\"\n type=\"reset\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n (click)=\"onAction($event, 'negative')\"\n (keydown.enter)=\"onAction($event, 'negative')\"\n *ngIf=\"_buttons && _buttons.negative\"\n >\n {{ t(_buttons.negative) }}\n </button>\n <button\n class=\"secondary\"\n type=\"button\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n (click)=\"onAction($event, 'neutral')\"\n (keydown.enter)=\"onAction($event, 'neutral')\"\n *ngIf=\"_buttons && _buttons.neutral\"\n >\n {{ t(_buttons.neutral) }}\n </button>\n <button\n class=\"danger\"\n type=\"submit\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.danger || 'danger')\"\n (click)=\"onAction($event, 'danger')\"\n (keydown.enter)=\"onAction($event, 'danger')\"\n *ngIf=\"_buttons && _buttons.danger\"\n >\n {{ t(_buttons.danger) }}\n </button>\n <button\n class=\"submit\"\n type=\"submit\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n (click)=\"onAction($event, 'positive')\"\n (keydown.enter)=\"onAction($event, 'positive')\"\n *ngIf=\"_buttons && _buttons.positive\"\n >\n {{ t(_buttons.positive) }}\n </button>\n </footer>\n </div>\n <div class=\"nggv-backdrop\"></div>\n </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%;--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999}:host .modal-dialog__wrapper{inset:0;position:fixed;display:grid;place-content:center;z-index:calc(var(--gds-z-index-modal-backdrop) + 1)}:host .modal-dialog__container{background:var(--gds-sys-color-background-primary);display:flex;flex-direction:column;box-shadow:var(--gds-sys-color-background-primary);position:absolute;width:100%;z-index:var(--gds-z-index-modal)}:host .modal-dialog__container>.header,:host .modal-dialog__container>header{padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-dialog__container>.header h3,:host .modal-dialog__container>.header .h3,:host .modal-dialog__container>header h3,:host .modal-dialog__container>header .h3{margin-bottom:0;margin-top:0}:host .modal-dialog__container>.header h3+.close,:host .modal-dialog__container>.header .h3+.close,:host .modal-dialog__container>header h3+.close,:host .modal-dialog__container>header .h3+.close{margin:-7px;min-width:2rem}:host .modal-dialog__container>.body{padding:1rem;overflow:auto;width:100%}:host .modal-dialog__container>.body p{margin-bottom:0;margin-top:0}:host .modal-dialog__container>.footer,:host .modal-dialog__container>footer{padding:1rem;width:100%}@media(min-width:36em){:host .modal-dialog__container>.footer,:host .modal-dialog__container>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .modal-dialog__container>.footer button+button,:host .modal-dialog__container>.footer button+.button,:host .modal-dialog__container>.footer .button+button,:host .modal-dialog__container>.footer .button+.button,:host .modal-dialog__container>footer button+button,:host .modal-dialog__container>footer button+.button,:host .modal-dialog__container>footer .button+button,:host .modal-dialog__container>footer .button+.button{margin-top:.75rem}}@media(min-width:36em){:host .modal-dialog__container>.footer button+button,:host .modal-dialog__container>.footer button+.button,:host .modal-dialog__container>.footer .button+button,:host .modal-dialog__container>.footer .button+.button,:host .modal-dialog__container>footer button+button,:host .modal-dialog__container>footer button+.button,:host .modal-dialog__container>footer .button+button,:host .modal-dialog__container>footer .button+.button{margin-left:.75rem}}:host .modal-dialog__container{width:375px;max-width:95vw;position:absolute;top:32px;inset-inline:0;margin:auto}:host .modal-dialog__container.medium{width:512px}:host .modal-dialog__container.large{width:720px}:host .modal-dialog__heading{box-sizing:border-box;padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-dialog__heading h3,:host .modal-dialog__heading .h3{margin-bottom:0;margin-top:0}:host .modal-dialog__heading h3+.close,:host .modal-dialog__heading .h3+.close{margin:-7px;min-width:2rem}:host .modal-dialog__body{padding:1rem;overflow:auto;width:100%}:host .modal-dialog__body p{margin-bottom:0;margin-top:0}:host .modal-dialog__actions,:host .modal-dialog__heading,:host .modal-dialog__body{box-sizing:border-box}:host .nggv-backdrop{background:#00000080;inset:0;position:fixed;z-index:var(--gds-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .gds-close{background-color:transparent;font-size:0;background:transparent;border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem;padding:0}@media(hover:none)and (pointer:coarse){:host .gds-close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .gds-close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-text-primary)}:host .gds-close:not(:disabled):not(.disabled)>div:after,:host .gds-close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .gds-close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-close:focus,:host .gds-close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .gds-close>i:after,:host .gds-close>i:before{background:var(--gds-sys-color-text-primary);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .gds-close>i:after{transform:rotate(45deg)}:host .gds-close>i:before{transform:rotate(-45deg)}:host .gds-close>svg path{fill:var(--gds-sys-color-text-primary)}@media(min-width:48em){:host .gds-close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 10%,transparent)}:host .gds-close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 20%,transparent)}}:host .gds-close{min-height:2rem;min-width:2rem}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions button{font-size:1rem;font-family:inherit}:host .modal-dialog__actions .submit{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .submit:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .submit[aria-selected=true],:host .modal-dialog__actions .submit:active,:host .modal-dialog__actions .submit.active,:host .modal-dialog__actions .submit.active:hover,:host .modal-dialog__actions .submit:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .submit{background:var(--gds-sys-color-dark-blue-2);border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--color: var(--gds-sys-color-text-white)}:host .modal-dialog__actions .submit:disabled,:host .modal-dialog__actions .submit.disabled,:host .modal-dialog__actions .submit[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .submit:disabled::placeholder,:host .modal-dialog__actions .submit.disabled::placeholder,:host .modal-dialog__actions .submit[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary{background:transparent;border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-dark-blue-2);--color: var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .danger-confirm{color:var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-dark-red-1);border-color:transparent;transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .danger-confirm:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger-confirm[aria-selected=true],:host .modal-dialog__actions .danger-confirm:active,:host .modal-dialog__actions .danger-confirm.active,:host .modal-dialog__actions .danger-confirm.active:hover,:host .modal-dialog__actions .danger-confirm:active:hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger-confirm[aria-selected]:hover,:host .modal-dialog__actions .danger-confirm.active:hover,:host .modal-dialog__actions .danger-confirm:active:hover{opacity:.9}:host .modal-dialog__actions .danger-confirm:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger-confirm:focus,:host .modal-dialog__actions .danger-confirm:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .danger{background:var(--gds-sys-color-dark-red-1);border-color:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--color: var(--gds-sys-color-text-white);transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .danger:disabled,:host .modal-dialog__actions .danger.disabled,:host .modal-dialog__actions .danger[aria-disabled=true]{background:var(--gds-sys-color-background-primary)!important;color:var(--gds-sys-color-text-white)!important;border-color:var(--gds-sys-color-dark-red-1)!important;cursor:not-allowed}:host .modal-dialog__actions .danger:disabled::placeholder,:host .modal-dialog__actions .danger.disabled::placeholder,:host .modal-dialog__actions .danger[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
|
|
5568
5587
|
}
|
|
5569
5588
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvDialogComponent, decorators: [{
|
|
5570
5589
|
type: Component,
|
|
5571
|
-
args: [{ selector: 'nggv-dialog', exportAs: 'dialog', standalone: false, template: "<ng-container *ngIf=\"shown\">\n <div class=\"modal-dialog__wrapper\" [class.-active]=\"shown\">\n <div\n class=\"modal-dialog__container\"\n *transloco=\"let t\"\n #dialog\n role=\"dialog\"\n aria-dialog=\"true\"\n [attr.aria-labelledby]=\"dialogTitleId\"\n [attr.aria-describedby]=\"dialogBodyId\"\n >\n <header class=\"modal-dialog__heading\">\n <h3 [attr.id]=\"dialogTitleId\">{{ t(heading || title || '') }}</h3>\n <button\n data-thook=\"dialog-close\"\n (click)=\"onAction($event, 'close')\"\n (keydown.enter)=\"onAction($event, 'close')\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n class=\"nggv-modal-slideout__close\"\n >\n <i></i>\n </button>\n </header>\n <section class=\"modal-dialog__body\" [attr.id]=\"dialogBodyId\">\n <div [innerHtml]=\"content\"></div>\n <ng-content></ng-content>\n </section>\n <footer class=\"modal-dialog__actions\">\n <button\n class=\"danger-confirm\"\n type=\"reset\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n (click)=\"onAction($event, 'negative')\"\n (keydown.enter)=\"onAction($event, 'negative')\"\n *ngIf=\"_buttons && _buttons.negative\"\n >\n {{ t(_buttons.negative) }}\n </button>\n <button\n class=\"secondary\"\n type=\"button\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n (click)=\"onAction($event, 'neutral')\"\n (keydown.enter)=\"onAction($event, 'neutral')\"\n *ngIf=\"_buttons && _buttons.neutral\"\n >\n {{ t(_buttons.neutral) }}\n </button>\n <button\n class=\"danger\"\n type=\"submit\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.danger || 'danger')\"\n (click)=\"onAction($event, 'danger')\"\n (keydown.enter)=\"onAction($event, 'danger')\"\n *ngIf=\"_buttons && _buttons.danger\"\n >\n {{ t(_buttons.danger) }}\n </button>\n <button\n class=\"submit\"\n type=\"submit\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n (click)=\"onAction($event, 'positive')\"\n (keydown.enter)=\"onAction($event, 'positive')\"\n *ngIf=\"_buttons && _buttons.positive\"\n >\n {{ t(_buttons.positive) }}\n </button>\n </footer>\n </div>\n <div class=\"nggv-backdrop\"></div>\n </div>\n</ng-container>\n", styles: [":host{--grey-500: rgb(222, 222, 222);--background-hsl: 0deg, 0%, 0%;--gds-ref-pallet-base200: hsl(0, 0%, 91%);--gds-sys-color-base: hsl(0, 0%, 20%);--gds-sys-color-font: hsl(0, 0%, 20%);--gds-sys-shape-corner-round: 50%;--sg-border-color: #e9e9e9;--sg-border-radius: .25rem;--sg-border-width-50: .5px;--sg-border-width: 1px;--sg-hsl-contrast: 0deg, 0%, 0%;--sg-modal-backdrop-background: rgba(0, 0, 0, .5);--sg-modal-background: #fff;--sg-modal-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--sg-z-index-modal-backdrop: 1040;--sg-z-index-modal: 1050;--text-primary-color: rgb(51, 51, 51)}:host .modal-dialog__wrapper{inset:0;position:fixed;display:grid;place-content:center;z-index:calc(var(--sg-z-index-modal-backdrop) + 1)}:host .modal-dialog__container{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal)}:host .modal-dialog__container>.header,:host .modal-dialog__container>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-dialog__container>.header h3,:host .modal-dialog__container>.header .h3,:host .modal-dialog__container>header h3,:host .modal-dialog__container>header .h3{margin-bottom:0;margin-top:0}:host .modal-dialog__container>.header h3+.close,:host .modal-dialog__container>.header .h3+.close,:host .modal-dialog__container>header h3+.close,:host .modal-dialog__container>header .h3+.close{margin:-7px;min-width:2rem}:host .modal-dialog__container>.body{padding:1rem;overflow:auto;width:100%}:host .modal-dialog__container>.body p{margin-bottom:0;margin-top:0}:host .modal-dialog__container>.footer,:host .modal-dialog__container>footer{padding:1rem;width:100%}@media(min-width:36em){:host .modal-dialog__container>.footer,:host .modal-dialog__container>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .modal-dialog__container>.footer button+button,:host .modal-dialog__container>.footer button+.button,:host .modal-dialog__container>.footer .button+button,:host .modal-dialog__container>.footer .button+.button,:host .modal-dialog__container>footer button+button,:host .modal-dialog__container>footer button+.button,:host .modal-dialog__container>footer .button+button,:host .modal-dialog__container>footer .button+.button{margin-top:.75rem}}@media(min-width:36em){:host .modal-dialog__container>.footer button+button,:host .modal-dialog__container>.footer button+.button,:host .modal-dialog__container>.footer .button+button,:host .modal-dialog__container>.footer .button+.button,:host .modal-dialog__container>footer button+button,:host .modal-dialog__container>footer button+.button,:host .modal-dialog__container>footer .button+button,:host .modal-dialog__container>footer .button+.button{margin-left:.75rem}}:host .modal-dialog__container{position:initial;width:375px;max-width:95vw}:host .modal-dialog__container.medium{width:512px}:host .modal-dialog__container.large{width:720px}:host .modal-dialog__heading{box-sizing:border-box;padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-dialog__heading h3,:host .modal-dialog__heading .h3{margin-bottom:0;margin-top:0}:host .modal-dialog__heading h3+.close,:host .modal-dialog__heading .h3+.close{margin:-7px;min-width:2rem}:host .modal-dialog__body{padding:1rem;overflow:auto;width:100%}:host .modal-dialog__body p{margin-bottom:0;margin-top:0}:host .modal-dialog__actions,:host .modal-dialog__heading,:host .modal-dialog__body{box-sizing:border-box}:host .nggv-backdrop{background:var(--sg-modal-backdrop-background);inset:0;position:fixed;z-index:var(--sg-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .nggv-modal-slideout__close{background-color:transparent;padding:0;font-size:0;background:var(--gds-sys-color-surface);border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem}@media(hover:none)and (pointer:coarse){:host .nggv-modal-slideout__close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-base)}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:after,:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .nggv-modal-slideout__close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-modal-slideout__close:focus,:host .nggv-modal-slideout__close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-modal-slideout__close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .nggv-modal-slideout__close>i:after,:host .nggv-modal-slideout__close>i:before{background:var(--gds-sys-color-font);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .nggv-modal-slideout__close>i:after{transform:rotate(45deg)}:host .nggv-modal-slideout__close>i:before{transform:rotate(-45deg)}:host .nggv-modal-slideout__close>svg path{fill:var(--gds-sys-color-font)}@media(min-width:48em){:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-font) 10%,transparent)}:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-font) 20%,transparent)}}:host .nggv-modal-slideout__close{min-height:2rem;min-width:2rem}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions button{font-size:1rem;font-family:inherit}:host .modal-dialog__actions .submit{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .submit:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .submit[aria-selected=true],:host .modal-dialog__actions .submit:active,:host .modal-dialog__actions .submit.active,:host .modal-dialog__actions .submit.active:hover,:host .modal-dialog__actions .submit:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .submit:focus-visible{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3!important}:host .modal-dialog__actions .submit{background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .modal-dialog__actions .submit:disabled,:host .modal-dialog__actions .submit.disabled,:host .modal-dialog__actions .submit[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .submit:disabled::placeholder,:host .modal-dialog__actions .submit.disabled::placeholder,:host .modal-dialog__actions .submit[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .secondary{background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .danger-confirm{color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .danger-confirm:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .modal-dialog__actions .danger-confirm[aria-selected=true],:host .modal-dialog__actions .danger-confirm:active,:host .modal-dialog__actions .danger-confirm.active,:host .modal-dialog__actions .danger-confirm.active:hover,:host .modal-dialog__actions .danger-confirm:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .modal-dialog__actions .danger-confirm[aria-selected]:hover,:host .modal-dialog__actions .danger-confirm.active:hover,:host .modal-dialog__actions .danger-confirm:active:hover{opacity:.9}:host .modal-dialog__actions .danger-confirm:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger-confirm:focus,:host .modal-dialog__actions .danger-confirm:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .danger{background:#bb000c;border-color:#bb000c;color:#fff;--color: #fff;transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .danger:disabled,:host .modal-dialog__actions .danger.disabled,:host .modal-dialog__actions .danger[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .danger:disabled::placeholder,:host .modal-dialog__actions .danger.disabled::placeholder,:host .modal-dialog__actions .danger[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}\n"] }]
|
|
5590
|
+
args: [{ selector: 'nggv-dialog', exportAs: 'dialog', standalone: false, template: "<ng-container *ngIf=\"shown\">\n <div class=\"modal-dialog__wrapper\" [class.-active]=\"shown\">\n <div\n class=\"modal-dialog__container\"\n *transloco=\"let t\"\n #dialog\n role=\"dialog\"\n aria-dialog=\"true\"\n [attr.aria-labelledby]=\"dialogTitleId\"\n [attr.aria-describedby]=\"dialogBodyId\"\n >\n <header class=\"modal-dialog__heading\">\n <h3 [attr.id]=\"dialogTitleId\">{{ t(heading || title || '') }}</h3>\n <button\n data-thook=\"dialog-close\"\n (click)=\"onAction($event, 'close')\"\n (keydown.enter)=\"onAction($event, 'close')\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n class=\"gds-close\"\n >\n <i></i>\n </button>\n </header>\n <section class=\"modal-dialog__body\" [attr.id]=\"dialogBodyId\">\n <div [innerHtml]=\"content\"></div>\n <ng-content></ng-content>\n </section>\n <footer class=\"modal-dialog__actions\">\n <button\n class=\"danger-confirm\"\n type=\"reset\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n (click)=\"onAction($event, 'negative')\"\n (keydown.enter)=\"onAction($event, 'negative')\"\n *ngIf=\"_buttons && _buttons.negative\"\n >\n {{ t(_buttons.negative) }}\n </button>\n <button\n class=\"secondary\"\n type=\"button\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n (click)=\"onAction($event, 'neutral')\"\n (keydown.enter)=\"onAction($event, 'neutral')\"\n *ngIf=\"_buttons && _buttons.neutral\"\n >\n {{ t(_buttons.neutral) }}\n </button>\n <button\n class=\"danger\"\n type=\"submit\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.danger || 'danger')\"\n (click)=\"onAction($event, 'danger')\"\n (keydown.enter)=\"onAction($event, 'danger')\"\n *ngIf=\"_buttons && _buttons.danger\"\n >\n {{ t(_buttons.danger) }}\n </button>\n <button\n class=\"submit\"\n type=\"submit\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n (click)=\"onAction($event, 'positive')\"\n (keydown.enter)=\"onAction($event, 'positive')\"\n *ngIf=\"_buttons && _buttons.positive\"\n >\n {{ t(_buttons.positive) }}\n </button>\n </footer>\n </div>\n <div class=\"nggv-backdrop\"></div>\n </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%;--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999}:host .modal-dialog__wrapper{inset:0;position:fixed;display:grid;place-content:center;z-index:calc(var(--gds-z-index-modal-backdrop) + 1)}:host .modal-dialog__container{background:var(--gds-sys-color-background-primary);display:flex;flex-direction:column;box-shadow:var(--gds-sys-color-background-primary);position:absolute;width:100%;z-index:var(--gds-z-index-modal)}:host .modal-dialog__container>.header,:host .modal-dialog__container>header{padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-dialog__container>.header h3,:host .modal-dialog__container>.header .h3,:host .modal-dialog__container>header h3,:host .modal-dialog__container>header .h3{margin-bottom:0;margin-top:0}:host .modal-dialog__container>.header h3+.close,:host .modal-dialog__container>.header .h3+.close,:host .modal-dialog__container>header h3+.close,:host .modal-dialog__container>header .h3+.close{margin:-7px;min-width:2rem}:host .modal-dialog__container>.body{padding:1rem;overflow:auto;width:100%}:host .modal-dialog__container>.body p{margin-bottom:0;margin-top:0}:host .modal-dialog__container>.footer,:host .modal-dialog__container>footer{padding:1rem;width:100%}@media(min-width:36em){:host .modal-dialog__container>.footer,:host .modal-dialog__container>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .modal-dialog__container>.footer button+button,:host .modal-dialog__container>.footer button+.button,:host .modal-dialog__container>.footer .button+button,:host .modal-dialog__container>.footer .button+.button,:host .modal-dialog__container>footer button+button,:host .modal-dialog__container>footer button+.button,:host .modal-dialog__container>footer .button+button,:host .modal-dialog__container>footer .button+.button{margin-top:.75rem}}@media(min-width:36em){:host .modal-dialog__container>.footer button+button,:host .modal-dialog__container>.footer button+.button,:host .modal-dialog__container>.footer .button+button,:host .modal-dialog__container>.footer .button+.button,:host .modal-dialog__container>footer button+button,:host .modal-dialog__container>footer button+.button,:host .modal-dialog__container>footer .button+button,:host .modal-dialog__container>footer .button+.button{margin-left:.75rem}}:host .modal-dialog__container{width:375px;max-width:95vw;position:absolute;top:32px;inset-inline:0;margin:auto}:host .modal-dialog__container.medium{width:512px}:host .modal-dialog__container.large{width:720px}:host .modal-dialog__heading{box-sizing:border-box;padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-dialog__heading h3,:host .modal-dialog__heading .h3{margin-bottom:0;margin-top:0}:host .modal-dialog__heading h3+.close,:host .modal-dialog__heading .h3+.close{margin:-7px;min-width:2rem}:host .modal-dialog__body{padding:1rem;overflow:auto;width:100%}:host .modal-dialog__body p{margin-bottom:0;margin-top:0}:host .modal-dialog__actions,:host .modal-dialog__heading,:host .modal-dialog__body{box-sizing:border-box}:host .nggv-backdrop{background:#00000080;inset:0;position:fixed;z-index:var(--gds-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .gds-close{background-color:transparent;font-size:0;background:transparent;border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem;padding:0}@media(hover:none)and (pointer:coarse){:host .gds-close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .gds-close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-text-primary)}:host .gds-close:not(:disabled):not(.disabled)>div:after,:host .gds-close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .gds-close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-close:focus,:host .gds-close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .gds-close>i:after,:host .gds-close>i:before{background:var(--gds-sys-color-text-primary);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .gds-close>i:after{transform:rotate(45deg)}:host .gds-close>i:before{transform:rotate(-45deg)}:host .gds-close>svg path{fill:var(--gds-sys-color-text-primary)}@media(min-width:48em){:host .gds-close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 10%,transparent)}:host .gds-close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 20%,transparent)}}:host .gds-close{min-height:2rem;min-width:2rem}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions button{font-size:1rem;font-family:inherit}:host .modal-dialog__actions .submit{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .submit:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .submit[aria-selected=true],:host .modal-dialog__actions .submit:active,:host .modal-dialog__actions .submit.active,:host .modal-dialog__actions .submit.active:hover,:host .modal-dialog__actions .submit:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .submit{background:var(--gds-sys-color-dark-blue-2);border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--color: var(--gds-sys-color-text-white)}:host .modal-dialog__actions .submit:disabled,:host .modal-dialog__actions .submit.disabled,:host .modal-dialog__actions .submit[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .submit:disabled::placeholder,:host .modal-dialog__actions .submit.disabled::placeholder,:host .modal-dialog__actions .submit[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary{background:transparent;border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-dark-blue-2);--color: var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .danger-confirm{color:var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-dark-red-1);border-color:transparent;transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .danger-confirm:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger-confirm[aria-selected=true],:host .modal-dialog__actions .danger-confirm:active,:host .modal-dialog__actions .danger-confirm.active,:host .modal-dialog__actions .danger-confirm.active:hover,:host .modal-dialog__actions .danger-confirm:active:hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger-confirm[aria-selected]:hover,:host .modal-dialog__actions .danger-confirm.active:hover,:host .modal-dialog__actions .danger-confirm:active:hover{opacity:.9}:host .modal-dialog__actions .danger-confirm:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger-confirm:focus,:host .modal-dialog__actions .danger-confirm:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .danger{background:var(--gds-sys-color-dark-red-1);border-color:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--color: var(--gds-sys-color-text-white);transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .danger:disabled,:host .modal-dialog__actions .danger.disabled,:host .modal-dialog__actions .danger[aria-disabled=true]{background:var(--gds-sys-color-background-primary)!important;color:var(--gds-sys-color-text-white)!important;border-color:var(--gds-sys-color-dark-red-1)!important;cursor:not-allowed}:host .modal-dialog__actions .danger:disabled::placeholder,:host .modal-dialog__actions .danger.disabled::placeholder,:host .modal-dialog__actions .danger[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}\n"] }]
|
|
5572
5591
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1$3.ConfigurableFocusTrapFactory }], propDecorators: { dialogRef: [{
|
|
5573
5592
|
type: ViewChild,
|
|
5574
5593
|
args: ['dialog']
|
|
@@ -5769,11 +5788,11 @@ class NggvFoldOutComponent {
|
|
|
5769
5788
|
this.firstArrowClick = true;
|
|
5770
5789
|
}
|
|
5771
5790
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvFoldOutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5772
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvFoldOutComponent, isStandalone: false, selector: "nggv-fold-out", inputs: { thook: "thook", alignOptions: "alignOptions", text: "text", ariaLabel: "ariaLabel", listWidth: "listWidth" }, outputs: { actionEmitter: "actionEmitter" }, host: { properties: { "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["foldout"], descendants: true, read: ElementRef }, { propertyName: "container", first: true, predicate: ["childrenContainer"], descendants: true }], ngImport: i0, template: "<div #foldout>\n <button\n data-thook=\"fold-out-toggle\"\n class=\"fold-out-button\"\n [ngClass]=\"{ 'no-text': !text }\"\n (click)=\"toggleVisibility()\"\n [attr.aria-expanded]=\"shown\"\n [attr.aria-label]=\"ariaLabel\"\n >\n <ng-container *ngTemplateOutlet=\"text ? withText : default\"> </ng-container>\n </button>\n <div\n #childrenContainer\n class=\"nggv-fold-out__popover\"\n [ngClass]=\"{\n 'flex-right': alignOptions === 'right',\n 'list-width-fit-content': listWidth === 'fit-content',\n 'list-width-max-content': listWidth === 'max-content',\n 'list-width-min-content': listWidth === 'min-content',\n 'list-width-auto': listWidth === 'auto',\n }\"\n [class.nggv-fold-out__popover-expanded]=\"shown\"\n (click)=\"toggleVisibility()\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n\n<ng-template #withText>\n {{ text }}\n <gds-icon-dot-grid-one-horizontal\n width=\"24\"\n height=\"24\"\n *nggCoreElement\n ></gds-icon-dot-grid-one-horizontal>\n</ng-template>\n\n<ng-template #default>\n <gds-icon-dot-grid-one-horizontal\n width=\"24\"\n height=\"24\"\n *nggCoreElement\n ></gds-icon-dot-grid-one-horizontal>\n <ng-template></ng-template\n></ng-template>\n", styles: ["i.sg-icon{font-size:0;width:1rem;height:1rem;display:inline-block}i.sg-icon:before{content:\"\";display:inline-block;background:var(--color);width:100%;height:100%;mask-repeat:no-repeat}i.sg-icon.sg-icon-calendar:before{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\")}i.sg-icon.sg-icon-calendar-range:before{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\")}i.sg-icon.sg-icon-ellipsis:before{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\")}i.sg-icon.sg-icon-grip-vertical:before{mask-image:url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\")}i.sg-icon.sg-icon-next:before{background:none;border-bottom:2px solid;border-left:2px solid;content:\"\";display:block;height:12px;margin-left:-10px;margin-top:2px;transform:translate(75%) rotate(-135deg) scaleZ(-1);transition:transform .3s ease-in;width:12px}i.sg-icon.sg-icon-previous:before{background:none;border-bottom:2px solid;border-left:2px solid;content:\"\";display:block;height:12px;margin-left:-4px;margin-top:2px;transform:translate(75%) rotate(45deg) scaleZ(-1);transition:transform .3s ease-in;width:12px}i.sg-icon.sg-icon-ellipsis:before{margin-right:-2px}:host{--grey-400: rgb(233, 233, 233);--grey-500: rgb(222, 222, 222);--sg-z-index-popover: 999;--sg-card-background: #fff;--sg-card-border: 1px solid #e9e9e9;--sg-card-border-radius: 4px;--sg-border-radius: 4px;--sg-card-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, .1019607843);--gds-ref-pallet-base800: #333;position:relative}:host .flex-right{right:0}:host .list-width-fit-content{width:fit-content}:host .list-width-max-content{width:max-content}:host .list-width-min-content{width:min-content}:host .list-width-auto{width:auto}:host .fold-out-button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host .fold-out-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .fold-out-button:focus,:host .fold-out-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .fold-out-button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .fold-out-button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .fold-out-button{border:2px solid currentcolor}}:host .fold-out-button.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .fold-out-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .fold-out-button{background-color:transparent;border:.0625rem solid transparent;padding:.625rem;height:2.75rem;width:2.75rem;min-width:auto;--color: var(--gds-sys-color-base-800)}.form-group :host .fold-out-button{margin-top:-.625rem}:host .fold-out-button.small{height:2rem;width:2rem;padding:.4375rem;line-height:1.125rem}:host .fold-out-button svg{height:1rem;width:1rem}:host .fold-out-button path,:host .fold-out-button line,:host .fold-out-button circle,:host .fold-out-button rect,:host .fold-out-button ellipse,:host .fold-out-button polyline,:host .fold-out-button text{fill:var(--gds-sys-color-base-800);stroke:var(--gds-sys-color-base-800);transition:all .3s cubic-bezier(.23,1,.32,1)}:host .fold-out-button:hover,:host .fold-out-button.highlighted{background-color:#0000001a;border-color:transparent}:host .fold-out-button:active,:host .fold-out-button.highlighted:hover{background-color:#0003;border-color:transparent}:host .fold-out-button{border-color:transparent;color:var(--gds-ref-pallet-base800);display:flex;align-items:center;gap:.5rem;line-height:.75;padding-inline:.4375rem;width:auto}@media(max-width:35.98em){:host .fold-out-button{min-width:initial}}:host .nggv-fold-out__popover{background-clip:border-box;background:var(--sg-card-background);border:var(--sg-card-border);border-radius:var(--sg-card-border-radius);box-shadow:var(--sg-card-box-shadow);color:var(--sg-card-color);display:flex;flex-direction:column;padding:1rem}:host .nggv-fold-out__popover>header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;margin-block-end:1rem}:host .nggv-fold-out__popover>header .close{margin:-.5rem -.5rem -.5rem .5rem}:host .nggv-fold-out__popover>*:not(header,footer){flex:1 1 auto}:host .nggv-fold-out__popover>footer{margin-top:.75rem}@media(min-width:36em){:host .nggv-fold-out__popover>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .nggv-fold-out__popover>footer button:not(.link)+button,:host .nggv-fold-out__popover>footer button:not(.link)+.button,:host .nggv-fold-out__popover>footer .button:not(.link)+button,:host .nggv-fold-out__popover>footer .button:not(.link)+.button{margin-top:.75rem}}@media(min-width:36em){:host .nggv-fold-out__popover>footer button:not(.link)+button,:host .nggv-fold-out__popover>footer button:not(.link)+.button,:host .nggv-fold-out__popover>footer .button:not(.link)+button,:host .nggv-fold-out__popover>footer .button:not(.link)+.button{margin-left:.75rem}}:host .nggv-fold-out__popover{display:none;padding:0}:host .nggv-fold-out__popover-expanded{display:block;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--sg-z-index-popover)}:host ::ng-deep .nggv-field-dropdown__options__label{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ::ng-deep .nggv-field-dropdown__options__label:hover,:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host ::ng-deep .nggv-field-dropdown__options__label:active{background-color:var(--grey-400)}:host ::ng-deep .nggv-field-dropdown__options__label:focus{outline-color:#000;outline-offset:-.25rem}:host ::ng-deep .nggv-field-dropdown__options__label.active.sg-highlighted,:host ::ng-deep .nggv-field-dropdown__options__label[aria-selected=true]{background:var(--grey-1000);color:#fff}:host ::ng-deep .nggv-field-dropdown__options__label{display:flex;gap:.75rem;-webkit-user-select:none;user-select:none}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option{color:#bb000c}:host ::ng-deep .nggv-field-dropdown__options__label:hover,:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible,:host ::ng-deep .nggv-field-dropdown__options__label[aria-focus=true]{background-color:var(--grey-400)}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:hover,:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:focus-visible,:host ::ng-deep .nggv-field-dropdown__options__label.delete-option[aria-focus=true]{background-color:#d81a1a;color:#fff}:host ::ng-deep .nggv-field-dropdown__options__label:active{background-color:var(--grey-500)}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:active{background-color:#bb000c;color:#fff}:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host ::ng-deep .nggv-field-dropdown__options__label[aria-hidden=true]{display:none}:host ::ng-deep .nggv-field-dropdown__options__label[highlighted]{background:var(--grey-1000);color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
5791
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvFoldOutComponent, isStandalone: false, selector: "nggv-fold-out", inputs: { thook: "thook", alignOptions: "alignOptions", text: "text", ariaLabel: "ariaLabel", listWidth: "listWidth" }, outputs: { actionEmitter: "actionEmitter" }, host: { properties: { "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["foldout"], descendants: true, read: ElementRef }, { propertyName: "container", first: true, predicate: ["childrenContainer"], descendants: true }], ngImport: i0, template: "<div #foldout>\n <button\n data-thook=\"fold-out-toggle\"\n class=\"fold-out-button\"\n [ngClass]=\"{ 'no-text': !text }\"\n (click)=\"toggleVisibility()\"\n [attr.aria-expanded]=\"shown\"\n [attr.aria-label]=\"ariaLabel\"\n >\n <ng-container *ngTemplateOutlet=\"text ? withText : default\"> </ng-container>\n </button>\n <div\n #childrenContainer\n class=\"nggv-fold-out__popover\"\n [ngClass]=\"{\n 'flex-right': alignOptions === 'right',\n 'list-width-fit-content': listWidth === 'fit-content',\n 'list-width-max-content': listWidth === 'max-content',\n 'list-width-min-content': listWidth === 'min-content',\n 'list-width-auto': listWidth === 'auto',\n }\"\n [class.nggv-fold-out__popover-expanded]=\"shown\"\n (click)=\"toggleVisibility()\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n\n<ng-template #withText>\n {{ text }}\n <gds-icon-dot-grid-one-horizontal\n width=\"24\"\n height=\"24\"\n *nggCoreElement\n ></gds-icon-dot-grid-one-horizontal>\n</ng-template>\n\n<ng-template #default>\n <gds-icon-dot-grid-one-horizontal\n width=\"24\"\n height=\"24\"\n *nggCoreElement\n ></gds-icon-dot-grid-one-horizontal>\n <ng-template></ng-template\n></ng-template>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999;position:relative}:host .flex-right{right:0}:host .list-width-fit-content{width:fit-content}:host .list-width-max-content{width:max-content}:host .list-width-min-content{width:min-content}:host .list-width-auto{width:auto}:host .fold-out-button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .fold-out-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .fold-out-button:focus,:host .fold-out-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .fold-out-button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .fold-out-button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .fold-out-button{border:2px solid currentcolor}}:host .fold-out-button.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .fold-out-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .fold-out-button{background-color:transparent;border:.0625rem solid transparent;padding:.625rem;height:2.75rem;width:2.75rem;min-width:auto;--color: var(--gds-sys-color-base-800)}.gds-form-group :host .fold-out-button{margin-top:-.625rem}:host .fold-out-button.small{height:2rem;width:2rem;padding:.4375rem;line-height:1.125rem}:host .fold-out-button svg{height:1rem;width:1rem}:host .fold-out-button path,:host .fold-out-button line,:host .fold-out-button circle,:host .fold-out-button rect,:host .fold-out-button ellipse,:host .fold-out-button polyline,:host .fold-out-button text{fill:var(--gds-sys-color-base-800);stroke:var(--gds-sys-color-base-800);transition:all var(--gds-sys-transition)}:host .fold-out-button:hover,:host .fold-out-button.highlighted{background-color:#0000001a;border-color:transparent}:host .fold-out-button:active,:host .fold-out-button.highlighted:hover{background-color:#0003;border-color:transparent}:host .fold-out-button{border-color:transparent;color:var(--gds-sys-color-base-800);display:flex;align-items:center;gap:.5rem;line-height:.75;padding-inline:.4375rem;width:auto}@media(max-width:35.98em){:host .fold-out-button{min-width:initial}}:host .nggv-fold-out__popover{background-clip:border-box;background:var(--gds-sys-color-background-primary);border:none;border-radius:4px;box-shadow:0 0 12px #0000001a;color:var(--gds-sys-color-text-primary);display:flex;flex-direction:column;padding:1rem}:host .nggv-fold-out__popover>header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;margin-block-end:1rem}:host .nggv-fold-out__popover>header .close{margin:-.5rem -.5rem -.5rem .5rem}:host .nggv-fold-out__popover>*:not(header,footer){flex:1 1 auto}:host .nggv-fold-out__popover>footer{margin-top:.75rem}@media(min-width:36em){:host .nggv-fold-out__popover>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .nggv-fold-out__popover>footer button:not(.link)+button,:host .nggv-fold-out__popover>footer button:not(.link)+.button,:host .nggv-fold-out__popover>footer .button:not(.link)+button,:host .nggv-fold-out__popover>footer .button:not(.link)+.button{margin-top:.75rem}}@media(min-width:36em){:host .nggv-fold-out__popover>footer button:not(.link)+button,:host .nggv-fold-out__popover>footer button:not(.link)+.button,:host .nggv-fold-out__popover>footer .button:not(.link)+button,:host .nggv-fold-out__popover>footer .button:not(.link)+.button{margin-left:.75rem}}:host .nggv-fold-out__popover{display:none;padding:0;overflow:hidden;border:1px solid var(--gds-sys-color-base-600)}:host .nggv-fold-out__popover-expanded{display:block;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:1060}:host ::ng-deep .nggv-field-dropdown__options__label{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ::ng-deep .nggv-field-dropdown__options__label:hover,:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible{background-color:var(--gds-sys-color-base-200)}:host ::ng-deep .nggv-field-dropdown__options__label:active{background-color:var(--gds-sys-color-base-200)}:host ::ng-deep .nggv-field-dropdown__options__label:focus{outline-color:#000;outline-offset:-.25rem}:host ::ng-deep .nggv-field-dropdown__options__label.active.sg-highlighted,:host ::ng-deep .nggv-field-dropdown__options__label[aria-selected=true]{background:var(--gds-sys-color-base-800);color:#fff}:host ::ng-deep .nggv-field-dropdown__options__label{display:flex;gap:.75rem;-webkit-user-select:none;user-select:none}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option{background-color:var(--gds-sys-color-dark-red-2);color:var(--gds-sys-color-text-inverted)}:host ::ng-deep .nggv-field-dropdown__options__label:hover,:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible,:host ::ng-deep .nggv-field-dropdown__options__label[aria-focus=true]{background-color:var(--gds-sys-color-base-200)}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:hover,:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:focus-visible,:host ::ng-deep .nggv-field-dropdown__options__label.delete-option[aria-focus=true]{background-color:var(--gds-sys-color-dark-red-2);color:var(--gds-sys-color-text-inverted)}:host ::ng-deep .nggv-field-dropdown__options__label:active{background-color:var(--gds-sys-color-base-300)}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:active{background-color:var(--gds-sys-color-dark-red-2);color:var(--gds-sys-color-text-inverted)}:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host ::ng-deep .nggv-field-dropdown__options__label[aria-hidden=true]{display:none}:host ::ng-deep .nggv-field-dropdown__options__label[highlighted]{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-inverted)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
5773
5792
|
}
|
|
5774
5793
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvFoldOutComponent, decorators: [{
|
|
5775
5794
|
type: Component,
|
|
5776
|
-
args: [{ selector: 'nggv-fold-out', standalone: false, template: "<div #foldout>\n <button\n data-thook=\"fold-out-toggle\"\n class=\"fold-out-button\"\n [ngClass]=\"{ 'no-text': !text }\"\n (click)=\"toggleVisibility()\"\n [attr.aria-expanded]=\"shown\"\n [attr.aria-label]=\"ariaLabel\"\n >\n <ng-container *ngTemplateOutlet=\"text ? withText : default\"> </ng-container>\n </button>\n <div\n #childrenContainer\n class=\"nggv-fold-out__popover\"\n [ngClass]=\"{\n 'flex-right': alignOptions === 'right',\n 'list-width-fit-content': listWidth === 'fit-content',\n 'list-width-max-content': listWidth === 'max-content',\n 'list-width-min-content': listWidth === 'min-content',\n 'list-width-auto': listWidth === 'auto',\n }\"\n [class.nggv-fold-out__popover-expanded]=\"shown\"\n (click)=\"toggleVisibility()\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n\n<ng-template #withText>\n {{ text }}\n <gds-icon-dot-grid-one-horizontal\n width=\"24\"\n height=\"24\"\n *nggCoreElement\n ></gds-icon-dot-grid-one-horizontal>\n</ng-template>\n\n<ng-template #default>\n <gds-icon-dot-grid-one-horizontal\n width=\"24\"\n height=\"24\"\n *nggCoreElement\n ></gds-icon-dot-grid-one-horizontal>\n <ng-template></ng-template\n></ng-template>\n", styles: ["i.sg-icon{font-size:0;width:1rem;height:1rem;display:inline-block}i.sg-icon:before{content:\"\";display:inline-block;background:var(--color);width:100%;height:100%;mask-repeat:no-repeat}i.sg-icon.sg-icon-calendar:before{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\")}i.sg-icon.sg-icon-calendar-range:before{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\")}i.sg-icon.sg-icon-ellipsis:before{mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\")}i.sg-icon.sg-icon-grip-vertical:before{mask-image:url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\")}i.sg-icon.sg-icon-next:before{background:none;border-bottom:2px solid;border-left:2px solid;content:\"\";display:block;height:12px;margin-left:-10px;margin-top:2px;transform:translate(75%) rotate(-135deg) scaleZ(-1);transition:transform .3s ease-in;width:12px}i.sg-icon.sg-icon-previous:before{background:none;border-bottom:2px solid;border-left:2px solid;content:\"\";display:block;height:12px;margin-left:-4px;margin-top:2px;transform:translate(75%) rotate(45deg) scaleZ(-1);transition:transform .3s ease-in;width:12px}i.sg-icon.sg-icon-ellipsis:before{margin-right:-2px}:host{--grey-400: rgb(233, 233, 233);--grey-500: rgb(222, 222, 222);--sg-z-index-popover: 999;--sg-card-background: #fff;--sg-card-border: 1px solid #e9e9e9;--sg-card-border-radius: 4px;--sg-border-radius: 4px;--sg-card-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, .1019607843);--gds-ref-pallet-base800: #333;position:relative}:host .flex-right{right:0}:host .list-width-fit-content{width:fit-content}:host .list-width-max-content{width:max-content}:host .list-width-min-content{width:min-content}:host .list-width-auto{width:auto}:host .fold-out-button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host .fold-out-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .fold-out-button:focus,:host .fold-out-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .fold-out-button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .fold-out-button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .fold-out-button{border:2px solid currentcolor}}:host .fold-out-button.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .fold-out-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .fold-out-button{background-color:transparent;border:.0625rem solid transparent;padding:.625rem;height:2.75rem;width:2.75rem;min-width:auto;--color: var(--gds-sys-color-base-800)}.form-group :host .fold-out-button{margin-top:-.625rem}:host .fold-out-button.small{height:2rem;width:2rem;padding:.4375rem;line-height:1.125rem}:host .fold-out-button svg{height:1rem;width:1rem}:host .fold-out-button path,:host .fold-out-button line,:host .fold-out-button circle,:host .fold-out-button rect,:host .fold-out-button ellipse,:host .fold-out-button polyline,:host .fold-out-button text{fill:var(--gds-sys-color-base-800);stroke:var(--gds-sys-color-base-800);transition:all .3s cubic-bezier(.23,1,.32,1)}:host .fold-out-button:hover,:host .fold-out-button.highlighted{background-color:#0000001a;border-color:transparent}:host .fold-out-button:active,:host .fold-out-button.highlighted:hover{background-color:#0003;border-color:transparent}:host .fold-out-button{border-color:transparent;color:var(--gds-ref-pallet-base800);display:flex;align-items:center;gap:.5rem;line-height:.75;padding-inline:.4375rem;width:auto}@media(max-width:35.98em){:host .fold-out-button{min-width:initial}}:host .nggv-fold-out__popover{background-clip:border-box;background:var(--sg-card-background);border:var(--sg-card-border);border-radius:var(--sg-card-border-radius);box-shadow:var(--sg-card-box-shadow);color:var(--sg-card-color);display:flex;flex-direction:column;padding:1rem}:host .nggv-fold-out__popover>header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;margin-block-end:1rem}:host .nggv-fold-out__popover>header .close{margin:-.5rem -.5rem -.5rem .5rem}:host .nggv-fold-out__popover>*:not(header,footer){flex:1 1 auto}:host .nggv-fold-out__popover>footer{margin-top:.75rem}@media(min-width:36em){:host .nggv-fold-out__popover>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .nggv-fold-out__popover>footer button:not(.link)+button,:host .nggv-fold-out__popover>footer button:not(.link)+.button,:host .nggv-fold-out__popover>footer .button:not(.link)+button,:host .nggv-fold-out__popover>footer .button:not(.link)+.button{margin-top:.75rem}}@media(min-width:36em){:host .nggv-fold-out__popover>footer button:not(.link)+button,:host .nggv-fold-out__popover>footer button:not(.link)+.button,:host .nggv-fold-out__popover>footer .button:not(.link)+button,:host .nggv-fold-out__popover>footer .button:not(.link)+.button{margin-left:.75rem}}:host .nggv-fold-out__popover{display:none;padding:0}:host .nggv-fold-out__popover-expanded{display:block;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:var(--sg-z-index-popover)}:host ::ng-deep .nggv-field-dropdown__options__label{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ::ng-deep .nggv-field-dropdown__options__label:hover,:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host ::ng-deep .nggv-field-dropdown__options__label:active{background-color:var(--grey-400)}:host ::ng-deep .nggv-field-dropdown__options__label:focus{outline-color:#000;outline-offset:-.25rem}:host ::ng-deep .nggv-field-dropdown__options__label.active.sg-highlighted,:host ::ng-deep .nggv-field-dropdown__options__label[aria-selected=true]{background:var(--grey-1000);color:#fff}:host ::ng-deep .nggv-field-dropdown__options__label{display:flex;gap:.75rem;-webkit-user-select:none;user-select:none}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option{color:#bb000c}:host ::ng-deep .nggv-field-dropdown__options__label:hover,:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible,:host ::ng-deep .nggv-field-dropdown__options__label[aria-focus=true]{background-color:var(--grey-400)}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:hover,:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:focus-visible,:host ::ng-deep .nggv-field-dropdown__options__label.delete-option[aria-focus=true]{background-color:#d81a1a;color:#fff}:host ::ng-deep .nggv-field-dropdown__options__label:active{background-color:var(--grey-500)}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:active{background-color:#bb000c;color:#fff}:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host ::ng-deep .nggv-field-dropdown__options__label[aria-hidden=true]{display:none}:host ::ng-deep .nggv-field-dropdown__options__label[highlighted]{background:var(--grey-1000);color:#fff}\n"] }]
|
|
5795
|
+
args: [{ selector: 'nggv-fold-out', standalone: false, template: "<div #foldout>\n <button\n data-thook=\"fold-out-toggle\"\n class=\"fold-out-button\"\n [ngClass]=\"{ 'no-text': !text }\"\n (click)=\"toggleVisibility()\"\n [attr.aria-expanded]=\"shown\"\n [attr.aria-label]=\"ariaLabel\"\n >\n <ng-container *ngTemplateOutlet=\"text ? withText : default\"> </ng-container>\n </button>\n <div\n #childrenContainer\n class=\"nggv-fold-out__popover\"\n [ngClass]=\"{\n 'flex-right': alignOptions === 'right',\n 'list-width-fit-content': listWidth === 'fit-content',\n 'list-width-max-content': listWidth === 'max-content',\n 'list-width-min-content': listWidth === 'min-content',\n 'list-width-auto': listWidth === 'auto',\n }\"\n [class.nggv-fold-out__popover-expanded]=\"shown\"\n (click)=\"toggleVisibility()\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n\n<ng-template #withText>\n {{ text }}\n <gds-icon-dot-grid-one-horizontal\n width=\"24\"\n height=\"24\"\n *nggCoreElement\n ></gds-icon-dot-grid-one-horizontal>\n</ng-template>\n\n<ng-template #default>\n <gds-icon-dot-grid-one-horizontal\n width=\"24\"\n height=\"24\"\n *nggCoreElement\n ></gds-icon-dot-grid-one-horizontal>\n <ng-template></ng-template\n></ng-template>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999;position:relative}:host .flex-right{right:0}:host .list-width-fit-content{width:fit-content}:host .list-width-max-content{width:max-content}:host .list-width-min-content{width:min-content}:host .list-width-auto{width:auto}:host .fold-out-button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .fold-out-button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .fold-out-button:focus,:host .fold-out-button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .fold-out-button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .fold-out-button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .fold-out-button{border:2px solid currentcolor}}:host .fold-out-button.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .fold-out-button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .fold-out-button{background-color:transparent;border:.0625rem solid transparent;padding:.625rem;height:2.75rem;width:2.75rem;min-width:auto;--color: var(--gds-sys-color-base-800)}.gds-form-group :host .fold-out-button{margin-top:-.625rem}:host .fold-out-button.small{height:2rem;width:2rem;padding:.4375rem;line-height:1.125rem}:host .fold-out-button svg{height:1rem;width:1rem}:host .fold-out-button path,:host .fold-out-button line,:host .fold-out-button circle,:host .fold-out-button rect,:host .fold-out-button ellipse,:host .fold-out-button polyline,:host .fold-out-button text{fill:var(--gds-sys-color-base-800);stroke:var(--gds-sys-color-base-800);transition:all var(--gds-sys-transition)}:host .fold-out-button:hover,:host .fold-out-button.highlighted{background-color:#0000001a;border-color:transparent}:host .fold-out-button:active,:host .fold-out-button.highlighted:hover{background-color:#0003;border-color:transparent}:host .fold-out-button{border-color:transparent;color:var(--gds-sys-color-base-800);display:flex;align-items:center;gap:.5rem;line-height:.75;padding-inline:.4375rem;width:auto}@media(max-width:35.98em){:host .fold-out-button{min-width:initial}}:host .nggv-fold-out__popover{background-clip:border-box;background:var(--gds-sys-color-background-primary);border:none;border-radius:4px;box-shadow:0 0 12px #0000001a;color:var(--gds-sys-color-text-primary);display:flex;flex-direction:column;padding:1rem}:host .nggv-fold-out__popover>header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;margin-block-end:1rem}:host .nggv-fold-out__popover>header .close{margin:-.5rem -.5rem -.5rem .5rem}:host .nggv-fold-out__popover>*:not(header,footer){flex:1 1 auto}:host .nggv-fold-out__popover>footer{margin-top:.75rem}@media(min-width:36em){:host .nggv-fold-out__popover>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .nggv-fold-out__popover>footer button:not(.link)+button,:host .nggv-fold-out__popover>footer button:not(.link)+.button,:host .nggv-fold-out__popover>footer .button:not(.link)+button,:host .nggv-fold-out__popover>footer .button:not(.link)+.button{margin-top:.75rem}}@media(min-width:36em){:host .nggv-fold-out__popover>footer button:not(.link)+button,:host .nggv-fold-out__popover>footer button:not(.link)+.button,:host .nggv-fold-out__popover>footer .button:not(.link)+button,:host .nggv-fold-out__popover>footer .button:not(.link)+.button{margin-left:.75rem}}:host .nggv-fold-out__popover{display:none;padding:0;overflow:hidden;border:1px solid var(--gds-sys-color-base-600)}:host .nggv-fold-out__popover-expanded{display:block;position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));z-index:1060}:host ::ng-deep .nggv-field-dropdown__options__label{padding:.75rem 1rem;line-height:1.25;cursor:pointer}:host ::ng-deep .nggv-field-dropdown__options__label:hover,:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible{background-color:var(--gds-sys-color-base-200)}:host ::ng-deep .nggv-field-dropdown__options__label:active{background-color:var(--gds-sys-color-base-200)}:host ::ng-deep .nggv-field-dropdown__options__label:focus{outline-color:#000;outline-offset:-.25rem}:host ::ng-deep .nggv-field-dropdown__options__label.active.sg-highlighted,:host ::ng-deep .nggv-field-dropdown__options__label[aria-selected=true]{background:var(--gds-sys-color-base-800);color:#fff}:host ::ng-deep .nggv-field-dropdown__options__label{display:flex;gap:.75rem;-webkit-user-select:none;user-select:none}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option{background-color:var(--gds-sys-color-dark-red-2);color:var(--gds-sys-color-text-inverted)}:host ::ng-deep .nggv-field-dropdown__options__label:hover,:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible,:host ::ng-deep .nggv-field-dropdown__options__label[aria-focus=true]{background-color:var(--gds-sys-color-base-200)}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:hover,:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:focus-visible,:host ::ng-deep .nggv-field-dropdown__options__label.delete-option[aria-focus=true]{background-color:var(--gds-sys-color-dark-red-2);color:var(--gds-sys-color-text-inverted)}:host ::ng-deep .nggv-field-dropdown__options__label:active{background-color:var(--gds-sys-color-base-300)}:host ::ng-deep .nggv-field-dropdown__options__label.delete-option:active{background-color:var(--gds-sys-color-dark-red-2);color:var(--gds-sys-color-text-inverted)}:host ::ng-deep .nggv-field-dropdown__options__label:focus-visible{outline-color:#000;outline-offset:-.25rem}:host ::ng-deep .nggv-field-dropdown__options__label[aria-hidden=true]{display:none}:host ::ng-deep .nggv-field-dropdown__options__label[highlighted]{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-inverted)}\n"] }]
|
|
5777
5796
|
}], propDecorators: { thook: [{
|
|
5778
5797
|
type: HostBinding,
|
|
5779
5798
|
args: ['attr.data-thook']
|
|
@@ -5976,7 +5995,7 @@ class NggvSlideOutComponent {
|
|
|
5976
5995
|
this.renderer.removeStyle(document.body, 'overflow');
|
|
5977
5996
|
}
|
|
5978
5997
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvSlideOutComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5979
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvSlideOutComponent, isStandalone: false, selector: "nggv-slideout-modal", inputs: { side: "side", shown: "shown", initiallyShown: "initiallyShown", heading: "heading", title: "title", content: "content", closable: "closable", closableOutside: "closableOutside", autoWidth: "autoWidth", thook: "thook", closeButtonAriaLabel: "closeButtonAriaLabel", buttons: "buttons" }, outputs: { nggvCloseEvent: "nggvCloseEvent", nggvPositiveEvent: "nggvPositiveEvent", nggvNeutralEvent: "nggvNeutralEvent", nggvNegativeEvent: "nggvNegativeEvent" }, host: { listeners: { "click": "close($event,\"host\")", "document:keydown.escape": "close($event)", "keydown": "focusTrap($event)" } }, viewQueries: [{ propertyName: "slideOutRef", first: true, predicate: ["slideOut"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"shown\">\n <div\n [ngClass]=\"{\n 'gds-slide-out--left': fromLeft,\n 'gds-slide-out--right': !fromLeft,\n }\"\n *transloco=\"let t\"\n [class.-active]=\"shown\"\n [attr.data-thook]=\"thook\"\n [attr.aria-hidden]=\"!shown\"\n [@modalAnimation]\n >\n <div\n #slideOut\n class=\"gds-slide-out\"\n [class.auto-width]=\"autoWidth\"\n [class.entered]=\"shown\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"gds-modal-title\"\n aria-describedby=\"gds-modal-body\"\n >\n <header class=\"gds-slide-out__header\">\n <h3 id=\"gds-modal-title\">\n {{ heading || title || '' }}\n </h3>\n <button\n data-testid=\"modal-close-button\"\n class=\"nggv-modal-slideout__close\"\n (click)=\"close($event, 'action')\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n >\n <i></i>\n </button>\n </header>\n\n <section id=\"modal-body\">\n <div class=\"gds-slide-out__content hide-if-empty\">\n <div *ngIf=\"content\" [innerHtml]=\"content\"></div>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[slot='outside-content']\"></ng-content>\n </section>\n\n <footer class=\"modal-dialog__actions\">\n <button\n class=\"danger\"\n type=\"reset\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n (click)=\"onAction($event, 'negative')\"\n (keydown.enter)=\"onAction($event, 'negative')\"\n *ngIf=\"_buttons && _buttons.negative\"\n >\n {{ t(_buttons.negative) }}\n </button>\n\n <button\n class=\"secondary\"\n type=\"button\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n (click)=\"onAction($event, 'neutral')\"\n (keydown.enter)=\"onAction($event, 'neutral')\"\n *ngIf=\"_buttons && _buttons.neutral\"\n >\n {{ t(_buttons.neutral) }}\n </button>\n\n <button\n class=\"primary\"\n type=\"submit\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n (click)=\"onAction($event, 'positive')\"\n (keydown.enter)=\"onAction($event, 'positive')\"\n *ngIf=\"_buttons && _buttons.positive\"\n >\n {{ t(_buttons.positive) }}\n </button>\n </footer>\n </div>\n\n <div\n class=\"nggv-backdrop\"\n data-thook=\"slideout-backdrop\"\n (click)=\"close()\"\n ></div>\n </div>\n</ng-container>\n", styles: [":host{--background-hsl: 0deg, 0%, 0%;--gds-ref-pallet-base200: hsl(0, 0%, 91%);--gds-sys-color-base: hsl(0, 0%, 20%);--gds-sys-color-font: hsl(0, 0%, 20%);--gds-sys-shape-corner-round: 50%;--grey-500: rgb(222, 222, 222);--sg-border-color: hsl(0, 0%, 53%);--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-hsl-contrast: 0deg, 0%, 0%;--sg-modal-backdrop-background: rgba(0, 0, 0, .5);--sg-modal-background: #fff;--sg-modal-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--sg-z-index-modal-backdrop: 1040;--sg-z-index-modal: 1050;--text-primary-color: rgb(51, 51, 51)}:host .gds-slide-out{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal)}:host .gds-slide-out>.header,:host .gds-slide-out>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .gds-slide-out>.header h3,:host .gds-slide-out>.header .h3,:host .gds-slide-out>header h3,:host .gds-slide-out>header .h3{margin-bottom:0;margin-top:0}:host .gds-slide-out>.header h3+.close,:host .gds-slide-out>.header .h3+.close,:host .gds-slide-out>header h3+.close,:host .gds-slide-out>header .h3+.close{margin:-7px;min-width:2rem}:host .gds-slide-out>.body{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out>.body p{margin-bottom:0;margin-top:0}:host .gds-slide-out>.footer,:host .gds-slide-out>footer{padding:1rem;width:100%}@media(min-width:36em){:host .gds-slide-out>.footer,:host .gds-slide-out>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-top:.75rem}}@media(min-width:36em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-left:.75rem}}:host .gds-slide-out{position:fixed;height:100dvh;max-width:512px;min-height:-webkit-fill-available;min-height:stretch;right:0;top:0;transition:transform .35s cubic-bezier(.33,1,.68,1);transform:translate(100%)}:host .gds-slide-out.is-entering,:host .gds-slide-out.entered{transform:translate(0)}:host .gds-slide-out.is-exiting{transform:translate(100%)}:host .gds-slide-out.large{max-width:720px}:host .gds-slide-out>.body{flex:1 0}:host .gds-slide-out.left{left:0}:host .gds-slide-out.gds-slide-out--768{max-width:48rem}:host .gds-slide-out.gds-slide-out--960{max-width:60rem}:host .gds-slide-out.gds-slide-out--768 header,:host .gds-slide-out.gds-slide-out--960 header{padding:1.5rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 .body,:host .gds-slide-out.gds-slide-out--960 .body{padding:2rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 footer,:host .gds-slide-out.gds-slide-out--960 footer{padding:1rem 2rem 2rem}:host .gds-slide-out{z-index:1050;overflow-y:auto}:host .gds-slide-out.auto-width{width:auto;max-width:initial}:host .hide-if-empty:empty{display:none}:host .nggv-backdrop{background:var(--sg-modal-backdrop-background);inset:0;position:fixed;z-index:var(--sg-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .gds-slide-out__content{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out__content p{margin-bottom:0;margin-top:0}:host .gds-slide-out__content{overflow:unset}:host .modal-dialog__actions,:host .gds-slide-out__header,:host .modal-body,:host .gds-slide-out__content{box-sizing:border-box}:host .modal-slide-out__heading{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-slide-out__heading h3,:host .modal-slide-out__heading .h3{margin-bottom:0;margin-top:0}:host .modal-slide-out__heading h3+.close,:host .modal-slide-out__heading .h3+.close{margin:-7px;min-width:2rem}:host .nggv-modal-slideout__close{background-color:transparent;padding:0;font-size:0;background:var(--gds-sys-color-surface);border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem}@media(hover:none)and (pointer:coarse){:host .nggv-modal-slideout__close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-base)}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:after,:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .nggv-modal-slideout__close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-modal-slideout__close:focus,:host .nggv-modal-slideout__close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-modal-slideout__close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .nggv-modal-slideout__close>i:after,:host .nggv-modal-slideout__close>i:before{background:var(--gds-sys-color-font);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .nggv-modal-slideout__close>i:after{transform:rotate(45deg)}:host .nggv-modal-slideout__close>i:before{transform:rotate(-45deg)}:host .nggv-modal-slideout__close>svg path{fill:var(--gds-sys-color-font)}@media(min-width:48em){:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-font) 10%,transparent)}:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-font) 20%,transparent)}}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions button{font-size:1rem;font-family:inherit}:host .modal-dialog__actions .primary{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .primary[aria-selected=true],:host .modal-dialog__actions .primary:active,:host .modal-dialog__actions .primary.active,:host .modal-dialog__actions .primary.active:hover,:host .modal-dialog__actions .primary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .primary:focus-visible{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3!important}:host .modal-dialog__actions .primary{background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .modal-dialog__actions .primary:disabled,:host .modal-dialog__actions .primary.disabled,:host .modal-dialog__actions .primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .primary:disabled::placeholder,:host .modal-dialog__actions .primary.disabled::placeholder,:host .modal-dialog__actions .primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .secondary{background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .danger{color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host #sdv-modal-body{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], animations: [
|
|
5998
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvSlideOutComponent, isStandalone: false, selector: "nggv-slideout-modal", inputs: { side: "side", shown: "shown", initiallyShown: "initiallyShown", heading: "heading", title: "title", content: "content", closable: "closable", closableOutside: "closableOutside", autoWidth: "autoWidth", thook: "thook", closeButtonAriaLabel: "closeButtonAriaLabel", buttons: "buttons" }, outputs: { nggvCloseEvent: "nggvCloseEvent", nggvPositiveEvent: "nggvPositiveEvent", nggvNeutralEvent: "nggvNeutralEvent", nggvNegativeEvent: "nggvNegativeEvent" }, host: { listeners: { "click": "close($event,\"host\")", "document:keydown.escape": "close($event)", "keydown": "focusTrap($event)" } }, viewQueries: [{ propertyName: "slideOutRef", first: true, predicate: ["slideOut"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"shown\">\n <div\n [ngClass]=\"{\n 'gds-slide-out--left': fromLeft,\n 'gds-slide-out--right': !fromLeft,\n }\"\n *transloco=\"let t\"\n [class.-active]=\"shown\"\n [attr.data-thook]=\"thook\"\n [attr.aria-hidden]=\"!shown\"\n [@modalAnimation]\n >\n <div\n #slideOut\n class=\"gds-slide-out\"\n [class.auto-width]=\"autoWidth\"\n [class.entered]=\"shown\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"gds-modal-title\"\n aria-describedby=\"gds-modal-body\"\n >\n <header class=\"gds-slide-out__header\">\n <h3 id=\"gds-modal-title\">\n {{ heading || title || '' }}\n </h3>\n <button\n data-testid=\"modal-close-button\"\n class=\"nggv-modal-slideout__close\"\n (click)=\"close($event, 'action')\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n >\n <i></i>\n </button>\n </header>\n\n <section id=\"modal-body\">\n <div class=\"gds-slide-out__content hide-if-empty\">\n <div *ngIf=\"content\" [innerHtml]=\"content\"></div>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[slot='outside-content']\"></ng-content>\n </section>\n\n <footer class=\"modal-dialog__actions\">\n <button\n class=\"danger\"\n type=\"reset\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n (click)=\"onAction($event, 'negative')\"\n (keydown.enter)=\"onAction($event, 'negative')\"\n *ngIf=\"_buttons && _buttons.negative\"\n >\n {{ t(_buttons.negative) }}\n </button>\n\n <button\n class=\"secondary\"\n type=\"button\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n (click)=\"onAction($event, 'neutral')\"\n (keydown.enter)=\"onAction($event, 'neutral')\"\n *ngIf=\"_buttons && _buttons.neutral\"\n >\n {{ t(_buttons.neutral) }}\n </button>\n\n <button\n class=\"primary\"\n type=\"submit\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n (click)=\"onAction($event, 'positive')\"\n (keydown.enter)=\"onAction($event, 'positive')\"\n *ngIf=\"_buttons && _buttons.positive\"\n >\n {{ t(_buttons.positive) }}\n </button>\n </footer>\n </div>\n\n <div\n class=\"nggv-backdrop\"\n data-thook=\"slideout-backdrop\"\n (click)=\"close()\"\n ></div>\n </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999;--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%}:host .gds-slide-out{background:var(--gds-sys-color-background-primary);display:flex;flex-direction:column;box-shadow:var(--gds-sys-color-background-primary);position:absolute;width:100%;z-index:var(--gds-z-index-modal)}:host .gds-slide-out>.header,:host .gds-slide-out>header{padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .gds-slide-out>.header h3,:host .gds-slide-out>.header .h3,:host .gds-slide-out>header h3,:host .gds-slide-out>header .h3{margin-bottom:0;margin-top:0}:host .gds-slide-out>.header h3+.close,:host .gds-slide-out>.header .h3+.close,:host .gds-slide-out>header h3+.close,:host .gds-slide-out>header .h3+.close{margin:-7px;min-width:2rem}:host .gds-slide-out>.body{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out>.body p{margin-bottom:0;margin-top:0}:host .gds-slide-out>.footer,:host .gds-slide-out>footer{padding:1rem;width:100%}@media(min-width:36em){:host .gds-slide-out>.footer,:host .gds-slide-out>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-top:.75rem}}@media(min-width:36em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-left:.75rem}}:host .gds-slide-out{position:fixed;height:100dvh;max-width:512px;min-height:-webkit-fill-available;min-height:stretch;right:0;top:0;transition:transform .35s cubic-bezier(.33,1,.68,1);transform:translate(100%)}:host .gds-slide-out.is-entering,:host .gds-slide-out.entered{transform:translate(0)}:host .gds-slide-out.is-exiting{transform:translate(100%)}:host .gds-slide-out.large{max-width:720px}:host .gds-slide-out>.body{flex:1 0}:host .gds-slide-out.left{left:0}:host .gds-slide-out.gds-slide-out--768{max-width:48rem}:host .gds-slide-out.gds-slide-out--960{max-width:60rem}:host .gds-slide-out.gds-slide-out--768 header,:host .gds-slide-out.gds-slide-out--960 header{padding:1.5rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 .body,:host .gds-slide-out.gds-slide-out--960 .body{padding:2rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 footer,:host .gds-slide-out.gds-slide-out--960 footer{padding:1rem 2rem 2rem}:host .gds-slide-out{z-index:1050;overflow-y:auto}:host .gds-slide-out.auto-width{width:auto;max-width:initial}:host .hide-if-empty:empty{display:none}:host .nggv-backdrop{background:#00000080;inset:0;position:fixed;z-index:var(--gds-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .gds-slide-out__content{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out__content p{margin-bottom:0;margin-top:0}:host .gds-slide-out__content{overflow:unset}:host .modal-dialog__actions,:host .gds-slide-out__header,:host .modal-body,:host .gds-slide-out__content{box-sizing:border-box}:host .modal-slide-out__heading{padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-slide-out__heading h3,:host .modal-slide-out__heading .h3{margin-bottom:0;margin-top:0}:host .modal-slide-out__heading h3+.close,:host .modal-slide-out__heading .h3+.close{margin:-7px;min-width:2rem}:host .gds-close{background-color:transparent;font-size:0;background:transparent;border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem;padding:0}@media(hover:none)and (pointer:coarse){:host .gds-close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .gds-close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-text-primary)}:host .gds-close:not(:disabled):not(.disabled)>div:after,:host .gds-close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .gds-close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-close:focus,:host .gds-close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .gds-close>i:after,:host .gds-close>i:before{background:var(--gds-sys-color-text-primary);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .gds-close>i:after{transform:rotate(45deg)}:host .gds-close>i:before{transform:rotate(-45deg)}:host .gds-close>svg path{fill:var(--gds-sys-color-text-primary)}@media(min-width:48em){:host .gds-close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 10%,transparent)}:host .gds-close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 20%,transparent)}}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions button{font-size:1rem;font-family:inherit}:host .modal-dialog__actions .primary{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .primary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .primary[aria-selected=true],:host .modal-dialog__actions .primary:active,:host .modal-dialog__actions .primary.active,:host .modal-dialog__actions .primary.active:hover,:host .modal-dialog__actions .primary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .primary{background:var(--gds-sys-color-dark-blue-2);border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--color: var(--gds-sys-color-text-white)}:host .modal-dialog__actions .primary:disabled,:host .modal-dialog__actions .primary.disabled,:host .modal-dialog__actions .primary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .primary:disabled::placeholder,:host .modal-dialog__actions .primary.disabled::placeholder,:host .modal-dialog__actions .primary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary{background:transparent;border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-dark-blue-2);--color: var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .danger{color:var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-dark-red-1);border-color:transparent;transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host #sdv-modal-body{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], animations: [
|
|
5980
5999
|
trigger('modalAnimation', [
|
|
5981
6000
|
transition(':enter', [
|
|
5982
6001
|
query('.gds-slide-out', style({ transform: 'translateX(100%)' }), {
|
|
@@ -6028,7 +6047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
6028
6047
|
]),
|
|
6029
6048
|
]),
|
|
6030
6049
|
]),
|
|
6031
|
-
], standalone: false, template: "<ng-container *ngIf=\"shown\">\n <div\n [ngClass]=\"{\n 'gds-slide-out--left': fromLeft,\n 'gds-slide-out--right': !fromLeft,\n }\"\n *transloco=\"let t\"\n [class.-active]=\"shown\"\n [attr.data-thook]=\"thook\"\n [attr.aria-hidden]=\"!shown\"\n [@modalAnimation]\n >\n <div\n #slideOut\n class=\"gds-slide-out\"\n [class.auto-width]=\"autoWidth\"\n [class.entered]=\"shown\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"gds-modal-title\"\n aria-describedby=\"gds-modal-body\"\n >\n <header class=\"gds-slide-out__header\">\n <h3 id=\"gds-modal-title\">\n {{ heading || title || '' }}\n </h3>\n <button\n data-testid=\"modal-close-button\"\n class=\"nggv-modal-slideout__close\"\n (click)=\"close($event, 'action')\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n >\n <i></i>\n </button>\n </header>\n\n <section id=\"modal-body\">\n <div class=\"gds-slide-out__content hide-if-empty\">\n <div *ngIf=\"content\" [innerHtml]=\"content\"></div>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[slot='outside-content']\"></ng-content>\n </section>\n\n <footer class=\"modal-dialog__actions\">\n <button\n class=\"danger\"\n type=\"reset\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n (click)=\"onAction($event, 'negative')\"\n (keydown.enter)=\"onAction($event, 'negative')\"\n *ngIf=\"_buttons && _buttons.negative\"\n >\n {{ t(_buttons.negative) }}\n </button>\n\n <button\n class=\"secondary\"\n type=\"button\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n (click)=\"onAction($event, 'neutral')\"\n (keydown.enter)=\"onAction($event, 'neutral')\"\n *ngIf=\"_buttons && _buttons.neutral\"\n >\n {{ t(_buttons.neutral) }}\n </button>\n\n <button\n class=\"primary\"\n type=\"submit\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n (click)=\"onAction($event, 'positive')\"\n (keydown.enter)=\"onAction($event, 'positive')\"\n *ngIf=\"_buttons && _buttons.positive\"\n >\n {{ t(_buttons.positive) }}\n </button>\n </footer>\n </div>\n\n <div\n class=\"nggv-backdrop\"\n data-thook=\"slideout-backdrop\"\n (click)=\"close()\"\n ></div>\n </div>\n</ng-container>\n", styles: [":host{--background-hsl: 0deg, 0%, 0%;--gds-ref-pallet-base200: hsl(0, 0%, 91%);--gds-sys-color-base: hsl(0, 0%, 20%);--gds-sys-color-font: hsl(0, 0%, 20%);--gds-sys-shape-corner-round: 50%;--grey-500: rgb(222, 222, 222);--sg-border-color: hsl(0, 0%, 53%);--sg-border-radius: .25rem;--sg-border-width: 1px;--sg-hsl-contrast: 0deg, 0%, 0%;--sg-modal-backdrop-background: rgba(0, 0, 0, .5);--sg-modal-background: #fff;--sg-modal-box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .15);--sg-z-index-modal-backdrop: 1040;--sg-z-index-modal: 1050;--text-primary-color: rgb(51, 51, 51)}:host .gds-slide-out{background:var(--sg-modal-background);display:flex;flex-direction:column;box-shadow:var(--sg-modal-box-shadow);position:absolute;width:100%;z-index:var(--sg-z-index-modal)}:host .gds-slide-out>.header,:host .gds-slide-out>header{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .gds-slide-out>.header h3,:host .gds-slide-out>.header .h3,:host .gds-slide-out>header h3,:host .gds-slide-out>header .h3{margin-bottom:0;margin-top:0}:host .gds-slide-out>.header h3+.close,:host .gds-slide-out>.header .h3+.close,:host .gds-slide-out>header h3+.close,:host .gds-slide-out>header .h3+.close{margin:-7px;min-width:2rem}:host .gds-slide-out>.body{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out>.body p{margin-bottom:0;margin-top:0}:host .gds-slide-out>.footer,:host .gds-slide-out>footer{padding:1rem;width:100%}@media(min-width:36em){:host .gds-slide-out>.footer,:host .gds-slide-out>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-top:.75rem}}@media(min-width:36em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-left:.75rem}}:host .gds-slide-out{position:fixed;height:100dvh;max-width:512px;min-height:-webkit-fill-available;min-height:stretch;right:0;top:0;transition:transform .35s cubic-bezier(.33,1,.68,1);transform:translate(100%)}:host .gds-slide-out.is-entering,:host .gds-slide-out.entered{transform:translate(0)}:host .gds-slide-out.is-exiting{transform:translate(100%)}:host .gds-slide-out.large{max-width:720px}:host .gds-slide-out>.body{flex:1 0}:host .gds-slide-out.left{left:0}:host .gds-slide-out.gds-slide-out--768{max-width:48rem}:host .gds-slide-out.gds-slide-out--960{max-width:60rem}:host .gds-slide-out.gds-slide-out--768 header,:host .gds-slide-out.gds-slide-out--960 header{padding:1.5rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 .body,:host .gds-slide-out.gds-slide-out--960 .body{padding:2rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 footer,:host .gds-slide-out.gds-slide-out--960 footer{padding:1rem 2rem 2rem}:host .gds-slide-out{z-index:1050;overflow-y:auto}:host .gds-slide-out.auto-width{width:auto;max-width:initial}:host .hide-if-empty:empty{display:none}:host .nggv-backdrop{background:var(--sg-modal-backdrop-background);inset:0;position:fixed;z-index:var(--sg-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .gds-slide-out__content{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out__content p{margin-bottom:0;margin-top:0}:host .gds-slide-out__content{overflow:unset}:host .modal-dialog__actions,:host .gds-slide-out__header,:host .modal-body,:host .gds-slide-out__content{box-sizing:border-box}:host .modal-slide-out__heading{padding:1rem;border-bottom:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-slide-out__heading h3,:host .modal-slide-out__heading .h3{margin-bottom:0;margin-top:0}:host .modal-slide-out__heading h3+.close,:host .modal-slide-out__heading .h3+.close{margin:-7px;min-width:2rem}:host .nggv-modal-slideout__close{background-color:transparent;padding:0;font-size:0;background:var(--gds-sys-color-surface);border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem}@media(hover:none)and (pointer:coarse){:host .nggv-modal-slideout__close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-base)}:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:after,:host .nggv-modal-slideout__close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .nggv-modal-slideout__close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .nggv-modal-slideout__close:focus,:host .nggv-modal-slideout__close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .nggv-modal-slideout__close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .nggv-modal-slideout__close>i:after,:host .nggv-modal-slideout__close>i:before{background:var(--gds-sys-color-font);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .nggv-modal-slideout__close>i:after{transform:rotate(45deg)}:host .nggv-modal-slideout__close>i:before{transform:rotate(-45deg)}:host .nggv-modal-slideout__close>svg path{fill:var(--gds-sys-color-font)}@media(min-width:48em){:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-font) 10%,transparent)}:host .nggv-modal-slideout__close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-font) 20%,transparent)}}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions button{font-size:1rem;font-family:inherit}:host .modal-dialog__actions .primary{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .primary[aria-selected=true],:host .modal-dialog__actions .primary:active,:host .modal-dialog__actions .primary.active,:host .modal-dialog__actions .primary.active:hover,:host .modal-dialog__actions .primary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .primary:focus-visible{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3!important}:host .modal-dialog__actions .primary{background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .modal-dialog__actions .primary:disabled,:host .modal-dialog__actions .primary.disabled,:host .modal-dialog__actions .primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .primary:disabled::placeholder,:host .modal-dialog__actions .primary.disabled::placeholder,:host .modal-dialog__actions .primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary{transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: rgb(25.4035777564, 154.8940067842, 227.221994169);--color: rgb(255, 255, 255);border-color:#199be3}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .modal-dialog__actions .secondary{background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .modal-dialog__actions .danger{color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:border .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host #sdv-modal-body{flex:1}\n"] }]
|
|
6050
|
+
], standalone: false, template: "<ng-container *ngIf=\"shown\">\n <div\n [ngClass]=\"{\n 'gds-slide-out--left': fromLeft,\n 'gds-slide-out--right': !fromLeft,\n }\"\n *transloco=\"let t\"\n [class.-active]=\"shown\"\n [attr.data-thook]=\"thook\"\n [attr.aria-hidden]=\"!shown\"\n [@modalAnimation]\n >\n <div\n #slideOut\n class=\"gds-slide-out\"\n [class.auto-width]=\"autoWidth\"\n [class.entered]=\"shown\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"gds-modal-title\"\n aria-describedby=\"gds-modal-body\"\n >\n <header class=\"gds-slide-out__header\">\n <h3 id=\"gds-modal-title\">\n {{ heading || title || '' }}\n </h3>\n <button\n data-testid=\"modal-close-button\"\n class=\"nggv-modal-slideout__close\"\n (click)=\"close($event, 'action')\"\n [attr.aria-label]=\"closeButtonAriaLabel\"\n >\n <i></i>\n </button>\n </header>\n\n <section id=\"modal-body\">\n <div class=\"gds-slide-out__content hide-if-empty\">\n <div *ngIf=\"content\" [innerHtml]=\"content\"></div>\n <ng-content></ng-content>\n </div>\n <ng-content select=\"[slot='outside-content']\"></ng-content>\n </section>\n\n <footer class=\"modal-dialog__actions\">\n <button\n class=\"danger\"\n type=\"reset\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.negative || 'negative')\"\n (click)=\"onAction($event, 'negative')\"\n (keydown.enter)=\"onAction($event, 'negative')\"\n *ngIf=\"_buttons && _buttons.negative\"\n >\n {{ t(_buttons.negative) }}\n </button>\n\n <button\n class=\"secondary\"\n type=\"button\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.neutral || 'neutral')\"\n (click)=\"onAction($event, 'neutral')\"\n (keydown.enter)=\"onAction($event, 'neutral')\"\n *ngIf=\"_buttons && _buttons.neutral\"\n >\n {{ t(_buttons.neutral) }}\n </button>\n\n <button\n class=\"primary\"\n type=\"submit\"\n [attr.data-thook]=\"'dialog-' + (_buttons?.positive || 'positive')\"\n (click)=\"onAction($event, 'positive')\"\n (keydown.enter)=\"onAction($event, 'positive')\"\n *ngIf=\"_buttons && _buttons.positive\"\n >\n {{ t(_buttons.positive) }}\n </button>\n </footer>\n </div>\n\n <div\n class=\"nggv-backdrop\"\n data-thook=\"slideout-backdrop\"\n (click)=\"close()\"\n ></div>\n </div>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999;--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%}:host .gds-slide-out{background:var(--gds-sys-color-background-primary);display:flex;flex-direction:column;box-shadow:var(--gds-sys-color-background-primary);position:absolute;width:100%;z-index:var(--gds-z-index-modal)}:host .gds-slide-out>.header,:host .gds-slide-out>header{padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .gds-slide-out>.header h3,:host .gds-slide-out>.header .h3,:host .gds-slide-out>header h3,:host .gds-slide-out>header .h3{margin-bottom:0;margin-top:0}:host .gds-slide-out>.header h3+.close,:host .gds-slide-out>.header .h3+.close,:host .gds-slide-out>header h3+.close,:host .gds-slide-out>header .h3+.close{margin:-7px;min-width:2rem}:host .gds-slide-out>.body{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out>.body p{margin-bottom:0;margin-top:0}:host .gds-slide-out>.footer,:host .gds-slide-out>footer{padding:1rem;width:100%}@media(min-width:36em){:host .gds-slide-out>.footer,:host .gds-slide-out>footer{display:flex;justify-content:flex-end}}@media(max-width:35.98em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-top:.75rem}}@media(min-width:36em){:host .gds-slide-out>.footer button+button,:host .gds-slide-out>.footer button+.button,:host .gds-slide-out>.footer .button+button,:host .gds-slide-out>.footer .button+.button,:host .gds-slide-out>footer button+button,:host .gds-slide-out>footer button+.button,:host .gds-slide-out>footer .button+button,:host .gds-slide-out>footer .button+.button{margin-left:.75rem}}:host .gds-slide-out{position:fixed;height:100dvh;max-width:512px;min-height:-webkit-fill-available;min-height:stretch;right:0;top:0;transition:transform .35s cubic-bezier(.33,1,.68,1);transform:translate(100%)}:host .gds-slide-out.is-entering,:host .gds-slide-out.entered{transform:translate(0)}:host .gds-slide-out.is-exiting{transform:translate(100%)}:host .gds-slide-out.large{max-width:720px}:host .gds-slide-out>.body{flex:1 0}:host .gds-slide-out.left{left:0}:host .gds-slide-out.gds-slide-out--768{max-width:48rem}:host .gds-slide-out.gds-slide-out--960{max-width:60rem}:host .gds-slide-out.gds-slide-out--768 header,:host .gds-slide-out.gds-slide-out--960 header{padding:1.5rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 .body,:host .gds-slide-out.gds-slide-out--960 .body{padding:2rem 2rem 1rem}:host .gds-slide-out.gds-slide-out--768 footer,:host .gds-slide-out.gds-slide-out--960 footer{padding:1rem 2rem 2rem}:host .gds-slide-out{z-index:1050;overflow-y:auto}:host .gds-slide-out.auto-width{width:auto;max-width:initial}:host .hide-if-empty:empty{display:none}:host .nggv-backdrop{background:#00000080;inset:0;position:fixed;z-index:var(--gds-z-index-modal-backdrop);display:block;transition:opacity .5s cubic-bezier(.33,1,.68,1)}:host .nggv-backdrop--transparent{opacity:0}:host .nggv-backdrop--transparent.entered,:host .nggv-backdrop--transparent.is-entering{opacity:1}:host .nggv-backdrop--transparent.is-exiting{opacity:0}:host .gds-slide-out__content{padding:1rem;overflow:auto;width:100%}:host .gds-slide-out__content p{margin-bottom:0;margin-top:0}:host .gds-slide-out__content{overflow:unset}:host .modal-dialog__actions,:host .gds-slide-out__header,:host .modal-body,:host .gds-slide-out__content{box-sizing:border-box}:host .modal-slide-out__heading{padding:1rem;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);display:inline-flex;justify-content:space-between;align-items:center;width:100%}:host .modal-slide-out__heading h3,:host .modal-slide-out__heading .h3{margin-bottom:0;margin-top:0}:host .modal-slide-out__heading h3+.close,:host .modal-slide-out__heading .h3+.close{margin:-7px;min-width:2rem}:host .gds-close{background-color:transparent;font-size:0;background:transparent;border:0;border-radius:50%;content:\"\";cursor:pointer;display:flex;font-family:inherit;height:2rem;position:relative;width:2rem;padding:0}@media(hover:none)and (pointer:coarse){:host .gds-close:not(:disabled):not(.disabled){padding:.375rem;height:2.75rem;width:2.75rem}:host .gds-close:not(:disabled):not(.disabled)>i{background:var(--gds-sys-color-base-200);height:2rem;width:2rem;border-radius:50%;position:relative;--color: var(--gds-sys-color-text-primary)}:host .gds-close:not(:disabled):not(.disabled)>div:after,:host .gds-close:not(:disabled):not(.disabled)>div:before{height:.789375rem;width:.130625rem;top:.625rem}}:host .gds-close:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-close:focus,:host .gds-close:focus-visible i{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-close>i{border-radius:var(--gds-sys-shape-corner-round);display:block;width:100%;height:100%}:host .gds-close>i:after,:host .gds-close>i:before{background:var(--gds-sys-color-text-primary);content:\"\";display:block;height:.789375rem;width:.130625rem;border-radius:.5px;left:calc(50% - .0625rem);position:absolute;top:.625rem}:host .gds-close>i:after{transform:rotate(45deg)}:host .gds-close>i:before{transform:rotate(-45deg)}:host .gds-close>svg path{fill:var(--gds-sys-color-text-primary)}@media(min-width:48em){:host .gds-close:not(:disabled,.disabled):hover>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 10%,transparent)}:host .gds-close:not(:disabled,.disabled):hover:active>i{background:color-mix(in srgb,var(--gds-sys-color-text-primary) 20%,transparent)}}:host .modal-dialog__actions button{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);font-weight:500}:host .modal-dialog__actions button:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions button:focus,:host .modal-dialog__actions button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions button{min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}@media(max-width:35.98em){:host .modal-dialog__actions button{min-width:100%}}@media screen and (-ms-high-contrast:active){:host .modal-dialog__actions button{border:2px solid currentcolor}}:host .modal-dialog__actions button.small{min-height:2rem;height:2rem;padding:.4375rem .75rem;font-size:.875rem;line-height:1rem}:host .modal-dialog__actions button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .modal-dialog__actions button{font-size:1rem;font-family:inherit}:host .modal-dialog__actions .primary{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .primary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .primary[aria-selected=true],:host .modal-dialog__actions .primary:active,:host .modal-dialog__actions .primary.active,:host .modal-dialog__actions .primary.active:hover,:host .modal-dialog__actions .primary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .primary{background:var(--gds-sys-color-dark-blue-2);border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--color: var(--gds-sys-color-text-white)}:host .modal-dialog__actions .primary:disabled,:host .modal-dialog__actions .primary.disabled,:host .modal-dialog__actions .primary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .primary:disabled::placeholder,:host .modal-dialog__actions .primary.disabled::placeholder,:host .modal-dialog__actions .primary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .secondary:focus,:host .modal-dialog__actions .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .modal-dialog__actions .secondary{transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-blue-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-blue-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-blue-1)}:host .modal-dialog__actions .secondary[aria-selected=true],:host .modal-dialog__actions .secondary:active,:host .modal-dialog__actions .secondary.active,:host .modal-dialog__actions .secondary.active:hover,:host .modal-dialog__actions .secondary:active:hover{background:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary{background:transparent;border-color:var(--gds-sys-color-dark-blue-2);color:var(--gds-sys-color-dark-blue-2);--color: var(--gds-sys-color-dark-blue-2)}:host .modal-dialog__actions .secondary:disabled,:host .modal-dialog__actions .secondary.disabled,:host .modal-dialog__actions .secondary[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .modal-dialog__actions .secondary:disabled::placeholder,:host .modal-dialog__actions .secondary.disabled::placeholder,:host .modal-dialog__actions .secondary[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host .modal-dialog__actions .danger{color:var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-dark-red-1);border-color:transparent;transition:border var(--gds-sys-transition)}:host .modal-dialog__actions .danger:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-dark-red-1);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected=true],:host .modal-dialog__actions .danger:active,:host .modal-dialog__actions .danger.active,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{background:var(--gds-sys-color-dark-red-1);color:var(--gds-sys-color-text-white);--background: $bg;--color: $color;border-color:var(--gds-sys-color-dark-red-1)}:host .modal-dialog__actions .danger[aria-selected]:hover,:host .modal-dialog__actions .danger.active:hover,:host .modal-dialog__actions .danger:active:hover{opacity:.9}:host .modal-dialog__actions .danger:focus:not(:focus-visible){box-shadow:none;outline:0}:host .modal-dialog__actions .danger:focus,:host .modal-dialog__actions .danger:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host #sdv-modal-body{flex:1}\n"] }]
|
|
6032
6051
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { slideOutRef: [{
|
|
6033
6052
|
type: ViewChild,
|
|
6034
6053
|
args: ['slideOut']
|
|
@@ -6215,11 +6234,11 @@ class PaginationComponent {
|
|
|
6215
6234
|
this.list = genList.slice(start, end);
|
|
6216
6235
|
}
|
|
6217
6236
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6218
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: PaginationComponent, isStandalone: false, selector: "nggv-pagination", inputs: { size: "size", value: "value", firstText: "firstText", lastText: "lastText", nextText: "nextText", offset: "offset", pagingLength: "pagingLength", previousText: "previousText", useFirstAndLast: "useFirstAndLast", useTextNav: "useTextNav", useDotNav: "useDotNav", showGoToPage: "showGoToPage", className: "className", id: "id" }, outputs: { pageNumberChange: "pageNumberChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-wrapper\" [ngClass]=\"className\" [attr.id]=\"id\">\n <nav class=\"custom-pagination\">\n <ng-container *ngIf=\"useDotNav; else numNav\">\n <ul class=\"pagination dotnav\">\n <ng-container *ngFor=\"let num of dotnavList\">\n <li class=\"page-item\" (click)=\"handleOnChange(num)\" [value]=\"num\">\n <span\n class=\"page-dot-link\"\n [ngClass]=\"{ active: value === num }\"\n ></span>\n </li>\n </ng-container>\n </ul>\n </ng-container>\n\n <ng-template #numNav>\n <ul class=\"pagination\">\n <ng-container>\n <li class=\"page-item\" (click)=\"handleOnChange(value - 1)\">\n <button\n class=\"page-link\"\n [attr.title]=\"previousText\"\n [attr.disabled]=\"value === 1 ? 'disabled' : null\"\n >\n <span class=\"nav-action\">\n <ng-container *ngIf=\"useTextNav; else angleLeftIcon\">\n {{ previousText ? previousText : 'Previous' }}\n </ng-container>\n <ng-template #angleLeftIcon>\n <gds-icon-chevron-left\n *nggCoreElement\n ></gds-icon-chevron-left>\n </ng-template>\n </span>\n </button>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"useFirstAndLast\">\n <li class=\"page-item\" (click)=\"handleOnChange(1)\">\n <button\n class=\"page-link\"\n [ngClass]=\"{ active: value === 1 }\"\n [attr.title]=\"firstText\"\n >\n <span class=\"nav-num\">{{ 1 }}</span>\n </button>\n </li>\n\n <li class=\"page-item\" *ngIf=\"showEllipsisStart\">\n <span class=\"page-link\" [attr.title]=\"'...'\">\n <span class=\"nav-num\">...</span>\n </span>\n </li>\n </ng-container>\n\n <ng-container *ngFor=\"let num of list\">\n <li\n class=\"page-item\"\n [ngClass]=\"{ active: value === num }\"\n (click)=\"handleOnChange(num)\"\n value=\"num\"\n >\n <button class=\"page-link\" [ngClass]=\"{ active: value === num }\">\n <span class=\"nav-num\">{{ num }}</span>\n </button>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"useFirstAndLast\">\n <li class=\"page-item\" *ngIf=\"showEllipsisEnd\">\n <span class=\"page-link\" [attr.title]=\"'...'\">\n <span class=\"nav-num\">...</span>\n </span>\n </li>\n\n <li\n class=\"page-item\"\n (click)=\"handleOnChange(pagingSize)\"\n *ngIf=\"pagingSize > 1\"\n >\n <button\n class=\"page-link\"\n [ngClass]=\"{ active: value === pagingSize }\"\n [attr.title]=\"lastText\"\n >\n <span class=\"nav-num\">{{ pagingSize }}</span>\n </button>\n </li>\n </ng-container>\n\n <ng-container>\n <li class=\"page-item\" (click)=\"handleOnChange(value + 1)\">\n <button class=\"page-link\" [attr.title]=\"nextText\">\n <span class=\"nav-action\">\n <ng-container *ngIf=\"useTextNav; else angleRightIcon\">\n {{ nextText ? nextText : 'Next' }}\n </ng-container>\n <ng-template #angleRightIcon>\n <gds-icon-chevron-right\n *nggCoreElement\n ></gds-icon-chevron-right>\n </ng-template>\n </span>\n </button>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"showGoToPage\">\n <li>\n <div class=\"paging-input-wrapper\">\n <div class=\"label-wrapper\">\n <label for=\"pageInput\" *transloco=\"let t\">\n {{ t('label.gotopage') }}\n </label>\n </div>\n <div class=\"input-wrapper\">\n <input\n #pageInput\n data-thook=\"pagination-go-to-input\"\n min=\"1\"\n [max]=\"pagingSize\"\n id=\"pageInput\"\n class=\"gds-field\"\n type=\"number\"\n (keydown.enter)=\"handlePageInput(pageInput.value)\"\n [ngModel]=\"value\"\n />\n <button\n type=\"button\"\n data-thook=\"pagination-go-to-button\"\n (click)=\"handlePageInput(pageInput.value)\"\n >\n <gds-icon-chevron-right\n *nggCoreElement\n ></gds-icon-chevron-right>\n </button>\n </div>\n </div>\n </li>\n </ng-container>\n </ul>\n </ng-template>\n </nav>\n</div>\n", styles: [":host .pagination-wrapper .paging-input-wrapper{display:flex}:host .pagination-wrapper .paging-input-wrapper .label-wrapper{margin:auto;padding:0 1em}:host .pagination-wrapper .paging-input-wrapper .input-wrapper{display:flex;border:.0625em solid #868686;border-radius:4px;height:100%}:host .pagination-wrapper .paging-input-wrapper .input-wrapper input{border:0;padding:.5em;min-height:2.5rem;width:60px;box-sizing:border-box;border-radius:3px;font-size:1rem;font-family:inherit}:host .pagination-wrapper .paging-input-wrapper .input-wrapper input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper .paging-input-wrapper .input-wrapper>button{border:0;color:#1a1a1a;background-color:transparent;font-size:1rem;font-family:inherit}:host .pagination-wrapper .paging-input-wrapper .input-wrapper>button:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper>.custom-pagination>.pagination{display:flex;list-style:none;margin-top:10px;margin-bottom:10px}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link{position:relative;text-align:center;padding-top:0;padding-bottom:0;min-width:38px;height:40px;display:inline-flex;align-items:center;background-color:transparent;color:#1a1a1a;border:none;border-radius:4px;font-size:1rem;font-family:inherit}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link.active{background-color:#1a1a1a;color:#eee}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-num{margin:0 auto}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-action{margin:0 auto;display:inline-flex}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link:hover{box-shadow:0 2px 6px #eee}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item{width:20px;height:25px}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link{position:relative;display:inline-block;width:10px;height:10px;border-radius:50%;cursor:pointer;background-color:#a2ddfe;transition:all .2s;margin:0 auto;will-change:transform}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link.active{background-color:#007ac7;cursor:default;transform:scale(1.3)}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link:hover:not(.active){background-color:#41b0ee}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
6237
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: PaginationComponent, isStandalone: false, selector: "nggv-pagination", inputs: { size: "size", value: "value", firstText: "firstText", lastText: "lastText", nextText: "nextText", offset: "offset", pagingLength: "pagingLength", previousText: "previousText", useFirstAndLast: "useFirstAndLast", useTextNav: "useTextNav", useDotNav: "useDotNav", showGoToPage: "showGoToPage", className: "className", id: "id" }, outputs: { pageNumberChange: "pageNumberChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-wrapper\" [ngClass]=\"className\" [attr.id]=\"id\">\n <nav class=\"custom-pagination\">\n <ng-container *ngIf=\"useDotNav; else numNav\">\n <ul class=\"pagination dotnav\">\n <ng-container *ngFor=\"let num of dotnavList\">\n <li class=\"page-item\" (click)=\"handleOnChange(num)\" [value]=\"num\">\n <span\n class=\"page-dot-link\"\n [ngClass]=\"{ active: value === num }\"\n ></span>\n </li>\n </ng-container>\n </ul>\n </ng-container>\n\n <ng-template #numNav>\n <ul class=\"pagination\">\n <ng-container>\n <li class=\"page-item\" (click)=\"handleOnChange(value - 1)\">\n <button\n class=\"page-link\"\n [attr.title]=\"previousText\"\n [attr.disabled]=\"value === 1 ? 'disabled' : null\"\n >\n <span class=\"nav-action\">\n <ng-container *ngIf=\"useTextNav; else angleLeftIcon\">\n {{ previousText ? previousText : 'Previous' }}\n </ng-container>\n <ng-template #angleLeftIcon>\n <gds-icon-chevron-left\n *nggCoreElement\n ></gds-icon-chevron-left>\n </ng-template>\n </span>\n </button>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"useFirstAndLast\">\n <li class=\"page-item\" (click)=\"handleOnChange(1)\">\n <button\n class=\"page-link\"\n [ngClass]=\"{ active: value === 1 }\"\n [attr.title]=\"firstText\"\n >\n <span class=\"nav-num\">{{ 1 }}</span>\n </button>\n </li>\n\n <li class=\"page-item\" *ngIf=\"showEllipsisStart\">\n <span class=\"page-link\" [attr.title]=\"'...'\">\n <span class=\"nav-num\">...</span>\n </span>\n </li>\n </ng-container>\n\n <ng-container *ngFor=\"let num of list\">\n <li\n class=\"page-item\"\n [ngClass]=\"{ active: value === num }\"\n (click)=\"handleOnChange(num)\"\n value=\"num\"\n >\n <button class=\"page-link\" [ngClass]=\"{ active: value === num }\">\n <span class=\"nav-num\">{{ num }}</span>\n </button>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"useFirstAndLast\">\n <li class=\"page-item\" *ngIf=\"showEllipsisEnd\">\n <span class=\"page-link\" [attr.title]=\"'...'\">\n <span class=\"nav-num\">...</span>\n </span>\n </li>\n\n <li\n class=\"page-item\"\n (click)=\"handleOnChange(pagingSize)\"\n *ngIf=\"pagingSize > 1\"\n >\n <button\n class=\"page-link\"\n [ngClass]=\"{ active: value === pagingSize }\"\n [attr.title]=\"lastText\"\n >\n <span class=\"nav-num\">{{ pagingSize }}</span>\n </button>\n </li>\n </ng-container>\n\n <ng-container>\n <li class=\"page-item\" (click)=\"handleOnChange(value + 1)\">\n <button class=\"page-link\" [attr.title]=\"nextText\">\n <span class=\"nav-action\">\n <ng-container *ngIf=\"useTextNav; else angleRightIcon\">\n {{ nextText ? nextText : 'Next' }}\n </ng-container>\n <ng-template #angleRightIcon>\n <gds-icon-chevron-right\n *nggCoreElement\n ></gds-icon-chevron-right>\n </ng-template>\n </span>\n </button>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"showGoToPage\">\n <li>\n <div class=\"paging-input-wrapper\">\n <div class=\"label-wrapper\">\n <label for=\"pageInput\" *transloco=\"let t\">\n {{ t('label.gotopage') }}\n </label>\n </div>\n <div class=\"input-wrapper\">\n <input\n #pageInput\n data-thook=\"pagination-go-to-input\"\n min=\"1\"\n [max]=\"pagingSize\"\n id=\"pageInput\"\n class=\"gds-field\"\n type=\"number\"\n (keydown.enter)=\"handlePageInput(pageInput.value)\"\n [ngModel]=\"value\"\n />\n <button\n type=\"button\"\n data-thook=\"pagination-go-to-button\"\n (click)=\"handlePageInput(pageInput.value)\"\n >\n <gds-icon-chevron-right\n *nggCoreElement\n ></gds-icon-chevron-right>\n </button>\n </div>\n </div>\n </li>\n </ng-container>\n </ul>\n </ng-template>\n </nav>\n</div>\n", styles: [":host .pagination-wrapper .paging-input-wrapper{display:flex}:host .pagination-wrapper .paging-input-wrapper .label-wrapper{margin:auto;padding:0 1em}:host .pagination-wrapper .paging-input-wrapper .input-wrapper{display:flex;border:.0625em solid #868686;border-radius:4px;height:100%}:host .pagination-wrapper .paging-input-wrapper .input-wrapper input{border:0;padding:.5em;min-height:2.5rem;width:60px;box-sizing:border-box;border-radius:3px;font-size:1rem;font-family:inherit}:host .pagination-wrapper .paging-input-wrapper .input-wrapper input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper .paging-input-wrapper .input-wrapper>button{border:0;color:#1a1a1a;background-color:transparent;font-size:1rem;font-family:inherit}:host .pagination-wrapper .paging-input-wrapper .input-wrapper>button:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper>.custom-pagination>.pagination{display:flex;list-style:none;margin-top:10px;margin-bottom:10px}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link{position:relative;text-align:center;padding-top:0;padding-bottom:0;min-width:38px;height:40px;display:inline-flex;align-items:center;background-color:transparent;color:#1a1a1a;border:none;border-radius:4px;font-size:1rem;font-family:inherit}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link.active{background-color:#1a1a1a;color:#eee}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-num{margin:0 auto}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-action{margin:0 auto;display:inline-flex}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link:hover{box-shadow:0 2px 6px #eee}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item{width:20px;height:25px}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link{position:relative;display:inline-block;width:10px;height:10px;border-radius:50%;cursor:pointer;background-color:#a2ddfe;transition:all var(--gds-sys-transition);margin:0 auto;will-change:transform}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link.active{background-color:#007ac7;cursor:default;transform:scale(1.3)}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link:hover:not(.active){background-color:#41b0ee}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
6219
6238
|
}
|
|
6220
6239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
6221
6240
|
type: Component,
|
|
6222
|
-
args: [{ selector: 'nggv-pagination', standalone: false, template: "<div class=\"pagination-wrapper\" [ngClass]=\"className\" [attr.id]=\"id\">\n <nav class=\"custom-pagination\">\n <ng-container *ngIf=\"useDotNav; else numNav\">\n <ul class=\"pagination dotnav\">\n <ng-container *ngFor=\"let num of dotnavList\">\n <li class=\"page-item\" (click)=\"handleOnChange(num)\" [value]=\"num\">\n <span\n class=\"page-dot-link\"\n [ngClass]=\"{ active: value === num }\"\n ></span>\n </li>\n </ng-container>\n </ul>\n </ng-container>\n\n <ng-template #numNav>\n <ul class=\"pagination\">\n <ng-container>\n <li class=\"page-item\" (click)=\"handleOnChange(value - 1)\">\n <button\n class=\"page-link\"\n [attr.title]=\"previousText\"\n [attr.disabled]=\"value === 1 ? 'disabled' : null\"\n >\n <span class=\"nav-action\">\n <ng-container *ngIf=\"useTextNav; else angleLeftIcon\">\n {{ previousText ? previousText : 'Previous' }}\n </ng-container>\n <ng-template #angleLeftIcon>\n <gds-icon-chevron-left\n *nggCoreElement\n ></gds-icon-chevron-left>\n </ng-template>\n </span>\n </button>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"useFirstAndLast\">\n <li class=\"page-item\" (click)=\"handleOnChange(1)\">\n <button\n class=\"page-link\"\n [ngClass]=\"{ active: value === 1 }\"\n [attr.title]=\"firstText\"\n >\n <span class=\"nav-num\">{{ 1 }}</span>\n </button>\n </li>\n\n <li class=\"page-item\" *ngIf=\"showEllipsisStart\">\n <span class=\"page-link\" [attr.title]=\"'...'\">\n <span class=\"nav-num\">...</span>\n </span>\n </li>\n </ng-container>\n\n <ng-container *ngFor=\"let num of list\">\n <li\n class=\"page-item\"\n [ngClass]=\"{ active: value === num }\"\n (click)=\"handleOnChange(num)\"\n value=\"num\"\n >\n <button class=\"page-link\" [ngClass]=\"{ active: value === num }\">\n <span class=\"nav-num\">{{ num }}</span>\n </button>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"useFirstAndLast\">\n <li class=\"page-item\" *ngIf=\"showEllipsisEnd\">\n <span class=\"page-link\" [attr.title]=\"'...'\">\n <span class=\"nav-num\">...</span>\n </span>\n </li>\n\n <li\n class=\"page-item\"\n (click)=\"handleOnChange(pagingSize)\"\n *ngIf=\"pagingSize > 1\"\n >\n <button\n class=\"page-link\"\n [ngClass]=\"{ active: value === pagingSize }\"\n [attr.title]=\"lastText\"\n >\n <span class=\"nav-num\">{{ pagingSize }}</span>\n </button>\n </li>\n </ng-container>\n\n <ng-container>\n <li class=\"page-item\" (click)=\"handleOnChange(value + 1)\">\n <button class=\"page-link\" [attr.title]=\"nextText\">\n <span class=\"nav-action\">\n <ng-container *ngIf=\"useTextNav; else angleRightIcon\">\n {{ nextText ? nextText : 'Next' }}\n </ng-container>\n <ng-template #angleRightIcon>\n <gds-icon-chevron-right\n *nggCoreElement\n ></gds-icon-chevron-right>\n </ng-template>\n </span>\n </button>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"showGoToPage\">\n <li>\n <div class=\"paging-input-wrapper\">\n <div class=\"label-wrapper\">\n <label for=\"pageInput\" *transloco=\"let t\">\n {{ t('label.gotopage') }}\n </label>\n </div>\n <div class=\"input-wrapper\">\n <input\n #pageInput\n data-thook=\"pagination-go-to-input\"\n min=\"1\"\n [max]=\"pagingSize\"\n id=\"pageInput\"\n class=\"gds-field\"\n type=\"number\"\n (keydown.enter)=\"handlePageInput(pageInput.value)\"\n [ngModel]=\"value\"\n />\n <button\n type=\"button\"\n data-thook=\"pagination-go-to-button\"\n (click)=\"handlePageInput(pageInput.value)\"\n >\n <gds-icon-chevron-right\n *nggCoreElement\n ></gds-icon-chevron-right>\n </button>\n </div>\n </div>\n </li>\n </ng-container>\n </ul>\n </ng-template>\n </nav>\n</div>\n", styles: [":host .pagination-wrapper .paging-input-wrapper{display:flex}:host .pagination-wrapper .paging-input-wrapper .label-wrapper{margin:auto;padding:0 1em}:host .pagination-wrapper .paging-input-wrapper .input-wrapper{display:flex;border:.0625em solid #868686;border-radius:4px;height:100%}:host .pagination-wrapper .paging-input-wrapper .input-wrapper input{border:0;padding:.5em;min-height:2.5rem;width:60px;box-sizing:border-box;border-radius:3px;font-size:1rem;font-family:inherit}:host .pagination-wrapper .paging-input-wrapper .input-wrapper input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper .paging-input-wrapper .input-wrapper>button{border:0;color:#1a1a1a;background-color:transparent;font-size:1rem;font-family:inherit}:host .pagination-wrapper .paging-input-wrapper .input-wrapper>button:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper>.custom-pagination>.pagination{display:flex;list-style:none;margin-top:10px;margin-bottom:10px}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link{position:relative;text-align:center;padding-top:0;padding-bottom:0;min-width:38px;height:40px;display:inline-flex;align-items:center;background-color:transparent;color:#1a1a1a;border:none;border-radius:4px;font-size:1rem;font-family:inherit}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link.active{background-color:#1a1a1a;color:#eee}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-num{margin:0 auto}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-action{margin:0 auto;display:inline-flex}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link:hover{box-shadow:0 2px 6px #eee}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item{width:20px;height:25px}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link{position:relative;display:inline-block;width:10px;height:10px;border-radius:50%;cursor:pointer;background-color:#a2ddfe;transition:all
|
|
6241
|
+
args: [{ selector: 'nggv-pagination', standalone: false, template: "<div class=\"pagination-wrapper\" [ngClass]=\"className\" [attr.id]=\"id\">\n <nav class=\"custom-pagination\">\n <ng-container *ngIf=\"useDotNav; else numNav\">\n <ul class=\"pagination dotnav\">\n <ng-container *ngFor=\"let num of dotnavList\">\n <li class=\"page-item\" (click)=\"handleOnChange(num)\" [value]=\"num\">\n <span\n class=\"page-dot-link\"\n [ngClass]=\"{ active: value === num }\"\n ></span>\n </li>\n </ng-container>\n </ul>\n </ng-container>\n\n <ng-template #numNav>\n <ul class=\"pagination\">\n <ng-container>\n <li class=\"page-item\" (click)=\"handleOnChange(value - 1)\">\n <button\n class=\"page-link\"\n [attr.title]=\"previousText\"\n [attr.disabled]=\"value === 1 ? 'disabled' : null\"\n >\n <span class=\"nav-action\">\n <ng-container *ngIf=\"useTextNav; else angleLeftIcon\">\n {{ previousText ? previousText : 'Previous' }}\n </ng-container>\n <ng-template #angleLeftIcon>\n <gds-icon-chevron-left\n *nggCoreElement\n ></gds-icon-chevron-left>\n </ng-template>\n </span>\n </button>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"useFirstAndLast\">\n <li class=\"page-item\" (click)=\"handleOnChange(1)\">\n <button\n class=\"page-link\"\n [ngClass]=\"{ active: value === 1 }\"\n [attr.title]=\"firstText\"\n >\n <span class=\"nav-num\">{{ 1 }}</span>\n </button>\n </li>\n\n <li class=\"page-item\" *ngIf=\"showEllipsisStart\">\n <span class=\"page-link\" [attr.title]=\"'...'\">\n <span class=\"nav-num\">...</span>\n </span>\n </li>\n </ng-container>\n\n <ng-container *ngFor=\"let num of list\">\n <li\n class=\"page-item\"\n [ngClass]=\"{ active: value === num }\"\n (click)=\"handleOnChange(num)\"\n value=\"num\"\n >\n <button class=\"page-link\" [ngClass]=\"{ active: value === num }\">\n <span class=\"nav-num\">{{ num }}</span>\n </button>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"useFirstAndLast\">\n <li class=\"page-item\" *ngIf=\"showEllipsisEnd\">\n <span class=\"page-link\" [attr.title]=\"'...'\">\n <span class=\"nav-num\">...</span>\n </span>\n </li>\n\n <li\n class=\"page-item\"\n (click)=\"handleOnChange(pagingSize)\"\n *ngIf=\"pagingSize > 1\"\n >\n <button\n class=\"page-link\"\n [ngClass]=\"{ active: value === pagingSize }\"\n [attr.title]=\"lastText\"\n >\n <span class=\"nav-num\">{{ pagingSize }}</span>\n </button>\n </li>\n </ng-container>\n\n <ng-container>\n <li class=\"page-item\" (click)=\"handleOnChange(value + 1)\">\n <button class=\"page-link\" [attr.title]=\"nextText\">\n <span class=\"nav-action\">\n <ng-container *ngIf=\"useTextNav; else angleRightIcon\">\n {{ nextText ? nextText : 'Next' }}\n </ng-container>\n <ng-template #angleRightIcon>\n <gds-icon-chevron-right\n *nggCoreElement\n ></gds-icon-chevron-right>\n </ng-template>\n </span>\n </button>\n </li>\n </ng-container>\n\n <ng-container *ngIf=\"showGoToPage\">\n <li>\n <div class=\"paging-input-wrapper\">\n <div class=\"label-wrapper\">\n <label for=\"pageInput\" *transloco=\"let t\">\n {{ t('label.gotopage') }}\n </label>\n </div>\n <div class=\"input-wrapper\">\n <input\n #pageInput\n data-thook=\"pagination-go-to-input\"\n min=\"1\"\n [max]=\"pagingSize\"\n id=\"pageInput\"\n class=\"gds-field\"\n type=\"number\"\n (keydown.enter)=\"handlePageInput(pageInput.value)\"\n [ngModel]=\"value\"\n />\n <button\n type=\"button\"\n data-thook=\"pagination-go-to-button\"\n (click)=\"handlePageInput(pageInput.value)\"\n >\n <gds-icon-chevron-right\n *nggCoreElement\n ></gds-icon-chevron-right>\n </button>\n </div>\n </div>\n </li>\n </ng-container>\n </ul>\n </ng-template>\n </nav>\n</div>\n", styles: [":host .pagination-wrapper .paging-input-wrapper{display:flex}:host .pagination-wrapper .paging-input-wrapper .label-wrapper{margin:auto;padding:0 1em}:host .pagination-wrapper .paging-input-wrapper .input-wrapper{display:flex;border:.0625em solid #868686;border-radius:4px;height:100%}:host .pagination-wrapper .paging-input-wrapper .input-wrapper input{border:0;padding:.5em;min-height:2.5rem;width:60px;box-sizing:border-box;border-radius:3px;font-size:1rem;font-family:inherit}:host .pagination-wrapper .paging-input-wrapper .input-wrapper input:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper .paging-input-wrapper .input-wrapper>button{border:0;color:#1a1a1a;background-color:transparent;font-size:1rem;font-family:inherit}:host .pagination-wrapper .paging-input-wrapper .input-wrapper>button:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper>.custom-pagination>.pagination{display:flex;list-style:none;margin-top:10px;margin-bottom:10px}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link{position:relative;text-align:center;padding-top:0;padding-bottom:0;min-width:38px;height:40px;display:inline-flex;align-items:center;background-color:transparent;color:#1a1a1a;border:none;border-radius:4px;font-size:1rem;font-family:inherit}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link.active{background-color:#1a1a1a;color:#eee}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-num{margin:0 auto}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link>.nav-action{margin:0 auto;display:inline-flex}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link:focus{outline-color:#1a1a1a;outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .pagination-wrapper>.custom-pagination>.pagination>.page-item>.page-link:hover{box-shadow:0 2px 6px #eee}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item{width:20px;height:25px}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link{position:relative;display:inline-block;width:10px;height:10px;border-radius:50%;cursor:pointer;background-color:#a2ddfe;transition:all var(--gds-sys-transition);margin:0 auto;will-change:transform}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link.active{background-color:#007ac7;cursor:default;transform:scale(1.3)}:host .pagination-wrapper>.custom-pagination>.pagination.dotnav .page-item .page-dot-link:hover:not(.active){background-color:#41b0ee}\n"] }]
|
|
6223
6242
|
}], propDecorators: { size: [{
|
|
6224
6243
|
type: Input
|
|
6225
6244
|
}], value: [{
|
|
@@ -6396,11 +6415,11 @@ class NggvRadioComponent extends NggvBaseControlValueAccessorComponent$1 {
|
|
|
6396
6415
|
this.name = this.formControlName;
|
|
6397
6416
|
}
|
|
6398
6417
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvRadioComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: NggvRadioControlRegistry }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6399
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: NggvRadioComponent, isStandalone: false, selector: "nggv-radio", inputs: { thook: "thook", size: "size", formControlName: "formControlName" }, host: { properties: { "attr.data-thook": "this.thook", "class": "this.size" } }, providers: [NggvRadioControlRegistry], usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n <div\n [id]=\"id + '-radio'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div>\n <!-- RADIO BUTTON FIELD -->\n <label [attr.for]=\"id + '-radio'\" class=\"form-control\">\n <input\n #input\n type=\"radio\"\n [attr.id]=\"id + '-radio'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- LABEL -->\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"\n labelContentTpl ?? null;\n context: { $implicit: value }\n \"\n ></ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <!-- if no nggv-radio-group is present -->\n @if (!isGroup) {\n <ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-radio'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n </ng-container>\n }\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-
|
|
6418
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: NggvRadioComponent, isStandalone: false, selector: "nggv-radio", inputs: { thook: "thook", size: "size", formControlName: "formControlName" }, host: { properties: { "attr.data-thook": "this.thook", "class": "this.size" } }, providers: [NggvRadioControlRegistry], usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n <div\n [id]=\"id + '-radio'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div>\n <!-- RADIO BUTTON FIELD -->\n <label [attr.for]=\"id + '-radio'\" class=\"gds-form-control\">\n <input\n #input\n type=\"radio\"\n [attr.id]=\"id + '-radio'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- LABEL -->\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"\n labelContentTpl ?? null;\n context: { $implicit: value }\n \"\n ></ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <!-- if no nggv-radio-group is present -->\n @if (!isGroup) {\n <ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-radio'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n </ng-container>\n }\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%;--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999}:host .nggv-field--locked{display:inline-block;border-radius:.25em;position:relative;min-height:2em;padding:.5em .75em .5em 0}:host .gds-form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .gds-form-control:has(input:disabled){cursor:not-allowed}:host label.gds-form-control input[type=radio]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.gds-form-control:has(input[type=radio]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.gds-form-control:has(input[type=radio]:focus-visible):focus,:host label.gds-form-control:has(input[type=radio]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.gds-form-control input[type=radio]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;position:relative;border-radius:var(--gds-sys-shape-corner-round);display:flex;height:1rem;width:1rem;box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-text-primary)}:host label.gds-form-control input[type=radio]~i:after{content:\"\";width:100%;height:100%;border-radius:var(--gds-sys-shape-corner-round);background-color:transparent;transform:scale(.5)}:host label.gds-form-control:hover input[type=radio]:not(.disabled,:disabled)~i{background-color:var(--gds-sys-color-base-200)}:host label.gds-form-control input[type=radio]:checked:not(.disabled,:disabled)~i{box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-text-primary)}:host label.gds-form-control input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-text-primary)}:host label.gds-form-control:hover input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-base-700)}:host .was-validated label.gds-form-control input[type=radio]:not(.is-invalid):valid~i,:host label.gds-form-control input[type=radio].is-valid~i{--border-color: var(--gds-sys-color-dark-green-2)}:host .was-validated label.gds-form-control input[type=radio]:not(.is-valid):invalid~i,:host label.gds-form-control input[type=radio].is-invalid~i{--border-color: var(--gds-sys-color-text-error)}:host label.gds-form-control input[type=radio]:disabled~i,:host label.gds-form-control input[type=radio].disabled~i{background-color:var(--gds-comp-radio-container-background-disabled);box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-base-500)}:host label.gds-form-control input[type=radio]:disabled~span,:host label.gds-form-control input[type=radio].disabled~span{color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host label.gds-form-control input[type=radio]:disabled~span::placeholder,:host label.gds-form-control input[type=radio].disabled~span::placeholder{color:var(--gds-sys-color-text-disabled)}:host label.gds-form-control input[type=radio]:disabled:checked~i:after,:host label.gds-form-control input[type=radio]:checked.disabled~i:after{background-color:var(--gds-sys-color-base-600)}:host.small .form-control{padding:.25rem}:host.small .form-control input[type=radio]~i{margin-right:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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]" }] }); }
|
|
6400
6419
|
}
|
|
6401
6420
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvRadioComponent, decorators: [{
|
|
6402
6421
|
type: Component,
|
|
6403
|
-
args: [{ selector: 'nggv-radio', providers: [NggvRadioControlRegistry], standalone: false, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n <div\n [id]=\"id + '-radio'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div>\n <!-- RADIO BUTTON FIELD -->\n <label [attr.for]=\"id + '-radio'\" class=\"form-control\">\n <input\n #input\n type=\"radio\"\n [attr.id]=\"id + '-radio'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- LABEL -->\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"\n labelContentTpl ?? null;\n context: { $implicit: value }\n \"\n ></ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <!-- if no nggv-radio-group is present -->\n @if (!isGroup) {\n <ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-radio'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n </ng-container>\n }\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-
|
|
6422
|
+
args: [{ selector: 'nggv-radio', providers: [NggvRadioControlRegistry], standalone: false, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\">\n <div\n [id]=\"id + '-radio'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n >\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n ></ng-template>\n </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n <div>\n <!-- RADIO BUTTON FIELD -->\n <label [attr.for]=\"id + '-radio'\" class=\"gds-form-control\">\n <input\n #input\n type=\"radio\"\n [attr.id]=\"id + '-radio'\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [attr.aria-label]=\"description\"\n [checked]=\"state\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"onInputChange($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n\n <!-- LABEL -->\n {{ label }}\n <ng-template\n *ngTemplateOutlet=\"\n labelContentTpl ?? null;\n context: { $implicit: value }\n \"\n ></ng-template>\n <i></i>\n </label>\n </div>\n\n <!-- ERRORS -->\n <!-- if no nggv-radio-group is present -->\n @if (!isGroup) {\n <ng-container *transloco=\"let t; read: scope\">\n <div\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-radio'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span class=\"error-icon\">\n <gds-icon-triangle-exclamation\n width=\"16\"\n height=\"16\"\n [solid]=\"true\"\n *nggCoreElement\n ></gds-icon-triangle-exclamation>\n </span>\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ error }}\n </span>\n <ng-template #errorsRef>\n <span\n *ngIf=\"firstError as error\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </div>\n </ng-container>\n }\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%;--gds-z-index-deep: -9999;--gds-z-index-dropdown-backdrop: 990;--gds-z-index-datepicker: 995;--gds-z-index-dropdown: 995;--gds-z-index-sticky: 1020;--gds-z-index-fixed: 1030;--gds-z-index-modal-backdrop: 1040;--gds-z-index-modal: 1050;--gds-z-index-popover: 1060;--gds-z-index-tooltip: 1070;--gds-z-index-top: 9999}:host .nggv-field--locked{display:inline-block;border-radius:.25em;position:relative;min-height:2em;padding:.5em .75em .5em 0}:host .gds-form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .gds-form-control:has(input:disabled){cursor:not-allowed}:host label.gds-form-control input[type=radio]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.gds-form-control:has(input[type=radio]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.gds-form-control:has(input[type=radio]:focus-visible):focus,:host label.gds-form-control:has(input[type=radio]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.gds-form-control input[type=radio]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;position:relative;border-radius:var(--gds-sys-shape-corner-round);display:flex;height:1rem;width:1rem;box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-text-primary)}:host label.gds-form-control input[type=radio]~i:after{content:\"\";width:100%;height:100%;border-radius:var(--gds-sys-shape-corner-round);background-color:transparent;transform:scale(.5)}:host label.gds-form-control:hover input[type=radio]:not(.disabled,:disabled)~i{background-color:var(--gds-sys-color-base-200)}:host label.gds-form-control input[type=radio]:checked:not(.disabled,:disabled)~i{box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-text-primary)}:host label.gds-form-control input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-text-primary)}:host label.gds-form-control:hover input[type=radio]:checked:not(.disabled,:disabled)~i:after{background-color:var(--gds-sys-color-base-700)}:host .was-validated label.gds-form-control input[type=radio]:not(.is-invalid):valid~i,:host label.gds-form-control input[type=radio].is-valid~i{--border-color: var(--gds-sys-color-dark-green-2)}:host .was-validated label.gds-form-control input[type=radio]:not(.is-valid):invalid~i,:host label.gds-form-control input[type=radio].is-invalid~i{--border-color: var(--gds-sys-color-text-error)}:host label.gds-form-control input[type=radio]:disabled~i,:host label.gds-form-control input[type=radio].disabled~i{background-color:var(--gds-comp-radio-container-background-disabled);box-shadow:inset 0 0 0 .05rem var(--gds-sys-color-base-500)}:host label.gds-form-control input[type=radio]:disabled~span,:host label.gds-form-control input[type=radio].disabled~span{color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host label.gds-form-control input[type=radio]:disabled~span::placeholder,:host label.gds-form-control input[type=radio].disabled~span::placeholder{color:var(--gds-sys-color-text-disabled)}:host label.gds-form-control input[type=radio]:disabled:checked~i:after,:host label.gds-form-control input[type=radio]:checked.disabled~i:after{background-color:var(--gds-sys-color-base-600)}:host.small .form-control{padding:.25rem}:host.small .form-control input[type=radio]~i{margin-right:.5rem}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .form-info{font-weight:500;padding-left:1rem;margin-top:-.25rem}:host .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .form-info--error .error-icon{margin-top:.128rem;align-items:center}\n"] }]
|
|
6404
6423
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
6405
6424
|
type: Self
|
|
6406
6425
|
}, {
|
|
@@ -7079,11 +7098,11 @@ class TableComponent {
|
|
|
7079
7098
|
row?.setValue(!row.value);
|
|
7080
7099
|
}
|
|
7081
7100
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7082
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TableComponent, isStandalone: false, selector: "nggv-table", inputs: { tableColumns: "tableColumns", tableData: "tableData", rowId: "rowId", hasRowSpan: "hasRowSpan", selectable: "selectable", hiddenCheckboxRowIds: "hiddenCheckboxRowIds", expandable: "expandable", expandedByDefault: "expandedByDefault", subItemsProp: "subItemsProp", allowLocalSort: "allowLocalSort", thook: "thook", trThookFn: "trThookFn", ariaLabelCheckboxTh: "ariaLabelCheckboxTh", ariaLabelCheckboxTr: "ariaLabelCheckboxTr", ariaLabelsOrderBy: "ariaLabelsOrderBy" }, outputs: { ngvRowClick: "ngvRowClick", ngvRowSelect: "ngvRowSelect", ngvOrderBy: "ngvOrderBy" }, queries: [{ propertyName: "appendedRowsTemplate", first: true, predicate: TableAppendableRowsTemplateDirective, descendants: true }, { propertyName: "customFooterTemplate", first: true, predicate: TableFooterTemplateDirective, descendants: true }, { propertyName: "customTemplates", predicate: TableTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #sortableThTemplate let-column>\n <button class=\"sg-table-sort\" *transloco=\"let t\">\n <ng-template #thButtonTemplate>\n {{ t(column.label ?? '') }}\n </ng-template>\n <ng-container\n *ngIf=\"\n customHeaderTemplates.get(column.property) as thTemplate;\n else thButtonTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n >\n </ng-template>\n </ng-container>\n </button>\n</ng-template>\n\n<ng-template #notSortableThTemplate let-column>\n <ng-template #defaultThTemplate>\n <ng-container *transloco=\"let t\">\n {{ t(column.label ?? '') }}\n </ng-container>\n </ng-template>\n <ng-container\n *ngIf=\"\n customHeaderTemplates.get(column.property) as thTemplate;\n else defaultThTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n >\n </ng-template>\n </ng-container>\n</ng-template>\n<table class=\"gds-table\" *transloco=\"let t\">\n <!-- Table header -->\n <thead>\n <tr>\n <!-- Checkbox column for header -->\n <th *ngIf=\"selectable\" class=\"column__check\">\n <div class=\"gds-field-checkbox-wrap\">\n <label\n [attr.for]=\"'cb_header__' + initId\"\n class=\"form-control\"\n id=\"thead-checkbox\"\n >\n <input\n type=\"checkbox\"\n [formControl]=\"groupSelector\"\n [attr.aria-label]=\"ariaLabelCheckboxTh\"\n [attr.id]=\"'cb_header__' + initId\"\n [attr.data-thook]=\"thook\"\n />\n <i></i>\n </label>\n </div>\n </th>\n\n <!-- Other columns -->\n <th\n *ngFor=\"let column of tableColumns\"\n [columnType]=\"column.valueType\"\n [sortable]=\"column.sortable\"\n [sortOrder]=\"column.order\"\n [thook]=\"'column-header-' + !!column.property\"\n (click)=\"toggleSortOrder(column)\"\n (keydown.space)=\"toggleSortOrderWithSpace($event, column)\"\n [attr.aria-label]=\"getAriaLabel(column)\"\n [attr.aria-sort]=\"column.order + 'ending'\"\n >\n <ng-container *ngIf=\"column.sortable\">\n <ng-container\n *ngTemplateOutlet=\"\n sortableThTemplate;\n context: { $implicit: column, column: column }\n \"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <ng-container\n *ngTemplateOutlet=\"\n notSortableThTemplate;\n context: { $implicit: column, column: column }\n \"\n >\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n\n <!-- Table body -->\n <tbody [formGroup]=\"rowSelectors\">\n <ng-container *ngFor=\"let item of tableData; let i = index\">\n <tr\n [class.row__expand]=\"expandable\"\n [attr.data-thook]=\"item | trThook: i : trThookFn\"\n [attr.data-hasrowspan]=\"hasRowSpan(item)\"\n >\n <!-- Checkbox column for row -->\n <td *ngIf=\"selectable\" class=\"column__check\">\n <div\n *ngIf=\"!hiddenCheckboxRowIds.includes(item[rowId])\"\n class=\"gds-field-checkbox-wrap\"\n >\n <label\n [attr.for]=\"'cb_row__' + initId + '_' + i\"\n class=\"form-control\"\n >\n <input\n *ngIf=\"rowSelectors.get(item[rowId])\"\n type=\"checkbox\"\n [formControlName]=\"item[rowId]\"\n [attr.aria-label]=\"ariaLabelCheckboxTr\"\n [attr.id]=\"'cb_row__' + initId + '_' + i\"\n [attr.data-thook]=\"'row-select-' + i\"\n />\n <i></i>\n </label>\n </div>\n </td>\n\n <!-- Other columns -->\n <td\n *ngFor=\"let column of tableColumns; let i = index\"\n [columnType]=\"column.valueType\"\n [value]=\"item[column.property]\"\n (click)=\"propagateItemClick(item, column.preventDefaultClickEvent)\"\n >\n <ng-container *ngIf=\"expandable && i === 0; else nonExpandableTemplate\">\n <div\n class=\"gds-item-field-wrap\"\n [ngClass]=\"{ 'no-sub-items': item.subItems.length === 0 }\"\n >\n <span\n *ngIf=\"item.subItems.length > 0\"\n role=\"button\"\n tabindex=\"0\"\n class=\"chevron-field\"\n [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n >\n <svg\n width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 9L12 17L4 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n <span class=\"gds-item-field-text\">\n {{ item[column.property] }} ({{ item.subItems.length }})\n <div *ngIf=\"column.columnLabel\" class=\"gds-item-field-extra-label\">\n {{ item[column.columnLabel] }}\n </div>\n </span>\n </div>\n </ng-container>\n\n <ng-template #nonExpandableTemplate>\n <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: item }\">\n </ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ item[column.property] }}\n </ng-template>\n </ng-template>\n </td>\n </tr>\n\n <!-- Expanded Sub Items -->\n <ng-container *ngIf=\"expandable && rowSelectors.get(item[rowId])?.value\">\n <tr *ngFor=\"let subItem of item[subItemsProp]\">\n <td\n *ngFor=\"let column of tableColumns\"\n class=\"web-view\"\n [columnType]=\"column.valueType\"\n [value]=\"subItem[column.property]\"\n (click)=\"propagateItemClick(subItem, column.preventDefaultClickEvent)\"\n >\n <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\">\n </ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ subItem[column.property] }}\n </ng-template>\n </td>\n\n <td\n class=\"mobile-view\"\n [attr.colspan]=\"tableColumns.length\"\n (click)=\"propagateItemClick(subItem)\"\n >\n <dl class=\"mobile-view-field-wrap\">\n <ng-container *ngFor=\"let column of tableColumns\">\n <div\n *ngIf=\"!column.hidePropertyOnMobile\"\n class=\"mobile-view-field\"\n [columnType]=\"column.valueType\"\n [value]=\"subItem[column.property]\"\n >\n <dt *ngIf=\"!column.hideLabelOnMobile\">\n <ng-container *transloco=\"let t\">\n {{ t(column.label ?? '') }}\n </ng-container>\n </dt>\n <dd [ngStyle]=\"column.boldTextOnMobile ? { 'font-weight': '500' } : {'font-weight': '400'}\">\n <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\"></ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ subItem[column.property] }}\n </ng-template>\n </dd>\n <ng-content></ng-content>\n </div>\n </ng-container>\n </dl>\n <span\n role=\"button\"\n tabindex=\"0\"\n class=\"nav-chevron-field\"\n [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n >\n <svg\n width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 9L12 17L4 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </td>\n </tr>\n </ng-container>\n\n <!-- Custom appended rows -->\n <ng-container *ngIf=\"appendedRowsTemplateRef as trTemplate\">\n <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n <ng-container\n *ngTemplateOutlet=\"trTemplate || null; context: { $implicit: item }\"\n >\n </ng-container>\n </ng-container>\n </ng-container>\n </tbody>\n\n <!-- Table footer -->\n <tfoot *ngIf=\"customFooterTemplateRef as trTemplate\">\n <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n <ng-container *ngTemplateOutlet=\"trTemplate || null\"> </ng-container>\n </tfoot>\n</table>\n", styles: ["::ng-deep .gds-table{--gds-ref-pallet-base100: #f8f8f8;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--sg-table-header-background: #1a1a1a;--sg-table-header-color: #fff;--sg-table-cell-padding-x: .5rem;--sg-table-cell-padding-y: .6875rem;--sg-table-border-width: 1px;--sg-table-border-color: var(--gds-ref-pallet-base300);--sg-table-sort-icon-color: var(--gds-ref-pallet-base600);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-table-sort-icon-color-active: #fff;--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--sg-table-row-expand-font-weight: 500;--sg-table-row-expand-font-weight-light: 400;border-collapse:collapse}::ng-deep .gds-table thead tr th{background:#333;color:var(--sg-table-header-color);padding:.3rem var(--sg-table-cell-padding-x);text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.sg-sortable .sg-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .sg-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center}::ng-deep .gds-table thead tr th .sg-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .sg-table-sort:focus,::ng-deep .gds-table thead tr th .sg-table-sort:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table thead tr th .sg-table-sort{border-radius:.125rem;--gds-sys-color-focus-outline: $_header-color}::ng-deep .gds-table thead tr th[aria-sort] .sg-table-sort:after,::ng-deep .gds-table thead tr th.sg-sortable .sg-table-sort:after{content:\"\";background:var(--gds-sys-color-base-500);mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");mask-repeat:no-repeat;mask-position:right;width:12px;height:12px;margin-left:.3rem}::ng-deep .gds-table thead tr th[aria-sort=ascending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:var(--sg-table-border-width) solid var(--gds-sys-color-base-300);padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x);vertical-align:top}::ng-deep .gds-table tbody tr.collapsible~.sub-row{display:none}::ng-deep .gds-table tbody tr.collapsible.expanded~.sub-row.show{display:table-row}::ng-deep .gds-table tbody tr td.collapse-control,::ng-deep .gds-table tbody tr td.select-control{width:15px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn{min-height:unset;padding:0;background:transparent}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder{cursor:pointer;width:12px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg{width:12px;fill:#868686}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg[name=angle-right]{width:9px}::ng-deep .gds-table{border-bottom:var(--sg-table-border-width) solid var(--gds-sys-color-base-300)}@media(max-width:36em){::ng-deep .gds-table.table-mobile{width:100%;table-layout:fixed;border-bottom:none}::ng-deep .gds-table.table-mobile thead{position:sticky;top:0;display:block;background:#333}}@media(max-width:36em)and (hover:none)and (pointer:coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media(max-width:36em){::ng-deep .gds-table.table-mobile thead tr{display:flex;overflow:auto}::ng-deep .gds-table.table-mobile thead tr::-webkit-scrollbar{display:none}::ng-deep .gds-table.table-mobile thead tr th{flex:auto;text-align:left!important;white-space:nowrap}::ng-deep .gds-table.table-mobile tbody tr{display:flex;flex-direction:column;border-bottom:var(--sg-table-border-width) solid var(--gds-sys-color-base-300)}::ng-deep .gds-table.table-mobile tbody tr td{display:flex;justify-content:space-between;align-items:center;border-top:none!important}::ng-deep .gds-table.table-mobile tbody tr td:before{content:attr(data-label);font-weight:700}}::ng-deep .gds-table{width:100%;border-bottom:none}::ng-deep .gds-table .web-view{display:table-cell}::ng-deep .gds-table .mobile-view{display:none}::ng-deep .gds-table tr:hover td{background-color:var(--gds-ref-pallet-base100)}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .sg-table-sort{justify-content:end}::ng-deep .gds-table th button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table tbody{border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table tfoot ::ng-deep td{padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x)}::ng-deep .gds-table th.column__check{height:vanilla-px-to-rem(32px);width:vanilla-px-to-rem(40px)}::ng-deep .gds-table th.column__check div{min-height:100%}::ng-deep .gds-table th.column__check input:checked+label:after{top:.6rem;display:inline}::ng-deep .gds-table th.column__check label{display:inline;padding:0}::ng-deep .gds-table th.column__check label:before{top:.55rem}::ng-deep .gds-table td.column__check{width:vanilla-px-to-rem(40px)}::ng-deep .gds-table td.column__check div{min-height:unset}::ng-deep .gds-table td.column__check label{padding:0}::ng-deep .gds-table td.column__check label:before{margin:0}::ng-deep .gds-table tr.row__expand{background-color:var(--gds-ref-pallet-base100)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap{display:flex;flex-wrap:nowrap}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap.no-sub-items{padding-left:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field{width:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field svg{transition:transform .3s ease}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field[aria-expanded=true] svg{transform:rotate(-180deg)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text{padding-left:.2rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text .gds-item-field-extra-label{font-weight:var(--sg-table-row-expand-font-weight-light, 400)}::ng-deep .gds-table tr.row__expand td{font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table{--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-sys-color-base-300);--gds-comp-checkbox-border-color: var(--gds-sys-color-base-900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base-600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base-900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2)}::ng-deep .gds-table label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}::ng-deep .gds-table label.form-control{align-items:flex-start}::ng-deep .gds-table label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus,::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}::ng-deep .gds-table label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}::ng-deep .gds-table label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);border-left:none;transform:scale(1) rotate(0);opacity:1}::ng-deep .gds-table label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){::ng-deep .gds-table label.form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.form-control.is-invalid{border:none;margin:0}}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i:after,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}::ng-deep .gds-table label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}::ng-deep .gds-table label.form-control input[type=checkbox]:checked~i:after{opacity:1}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]){padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]){line-height:1.125rem;padding:0}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-container-color);background-color:var(--gds-comp-checkbox-border-color)}::ng-deep .gds-table #thead-checkbox:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--sg-table-header-color)}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i:after{border-color:#ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i{background-color:var(--gds-comp-checkbox-border-color);box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i:after{border-color:#ababab}@media screen and (max-width:600px){.gds-table thead{display:none}.gds-table .row__expand td:not(:first-child){display:none}.gds-table .row__expand td{display:table-cell}.gds-table .web-view{display:none}.gds-table .mobile-view{display:flex;align-items:center}.gds-table .mobile-view .mobile-view-field-wrap{display:grid;grid-template-columns:1fr 1fr;width:100%}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field{display:flex;flex-direction:column;padding-bottom:.3rem}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(odd){justify-self:start;align-items:start;text-align:start}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(2n){align-items:end;justify-self:end;text-align:end}.gds-table .mobile-view .nav-chevron-field{width:1.5rem;padding-left:.5rem}.gds-table .mobile-view .nav-chevron-field svg{transition:transform .3s ease}.gds-table .mobile-view .nav-chevron-field[aria-expanded=true] svg{transform:rotate(-90deg)}.gds-table .mobile-view .settings-field{width:1.5rem;padding:0 1rem}.gds-table .mobile-view .settings-field svg{transition:all .3s ease}.gds-table .mobile-view .settings-field:hover svg{fill:var(--gds-sys-color-blue-dark-2)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: TableDirective, selector: "[columnType]", inputs: ["columnType", "sortable", "sortOrder", "value", "thook"] }, { kind: "pipe", type: TrThookPipe, name: "trThook" }] }); }
|
|
7101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TableComponent, isStandalone: false, selector: "nggv-table", inputs: { tableColumns: "tableColumns", tableData: "tableData", rowId: "rowId", hasRowSpan: "hasRowSpan", selectable: "selectable", hiddenCheckboxRowIds: "hiddenCheckboxRowIds", expandable: "expandable", expandedByDefault: "expandedByDefault", subItemsProp: "subItemsProp", allowLocalSort: "allowLocalSort", thook: "thook", trThookFn: "trThookFn", ariaLabelCheckboxTh: "ariaLabelCheckboxTh", ariaLabelCheckboxTr: "ariaLabelCheckboxTr", ariaLabelsOrderBy: "ariaLabelsOrderBy" }, outputs: { ngvRowClick: "ngvRowClick", ngvRowSelect: "ngvRowSelect", ngvOrderBy: "ngvOrderBy" }, queries: [{ propertyName: "appendedRowsTemplate", first: true, predicate: TableAppendableRowsTemplateDirective, descendants: true }, { propertyName: "customFooterTemplate", first: true, predicate: TableFooterTemplateDirective, descendants: true }, { propertyName: "customTemplates", predicate: TableTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #sortableThTemplate let-column>\n <button class=\"gds-table-sort\" *transloco=\"let t\">\n <ng-template #thButtonTemplate>\n {{ t(column.label ?? '') }}\n </ng-template>\n <ng-container\n *ngIf=\"\n customHeaderTemplates.get(column.property) as thTemplate;\n else thButtonTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n >\n </ng-template>\n </ng-container>\n </button>\n</ng-template>\n\n<ng-template #notSortableThTemplate let-column>\n <ng-template #defaultThTemplate>\n <ng-container *transloco=\"let t\">\n {{ t(column.label ?? '') }}\n </ng-container>\n </ng-template>\n <ng-container\n *ngIf=\"\n customHeaderTemplates.get(column.property) as thTemplate;\n else defaultThTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n >\n </ng-template>\n </ng-container>\n</ng-template>\n<table class=\"gds-table\" *transloco=\"let t\">\n <!-- Table header -->\n <thead>\n <tr>\n <!-- Checkbox column for header -->\n <th *ngIf=\"selectable\" class=\"column__check\">\n <div class=\"gds-field-checkbox-wrap\">\n <label\n [attr.for]=\"'cb_header__' + initId\"\n class=\"gds-form-control\"\n id=\"thead-checkbox\"\n >\n <input\n type=\"checkbox\"\n [formControl]=\"groupSelector\"\n [attr.aria-label]=\"ariaLabelCheckboxTh\"\n [attr.id]=\"'cb_header__' + initId\"\n [attr.data-thook]=\"thook\"\n />\n <i></i>\n </label>\n </div>\n </th>\n\n <!-- Other columns -->\n <th\n *ngFor=\"let column of tableColumns\"\n [columnType]=\"column.valueType\"\n [sortable]=\"column.sortable\"\n [sortOrder]=\"column.order\"\n [thook]=\"'column-header-' + !!column.property\"\n (click)=\"toggleSortOrder(column)\"\n (keydown.space)=\"toggleSortOrderWithSpace($event, column)\"\n [attr.aria-label]=\"getAriaLabel(column)\"\n [attr.aria-sort]=\"column.order + 'ending'\"\n >\n <ng-container *ngIf=\"column.sortable\">\n <ng-container\n *ngTemplateOutlet=\"\n sortableThTemplate;\n context: { $implicit: column, column: column }\n \"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <ng-container\n *ngTemplateOutlet=\"\n notSortableThTemplate;\n context: { $implicit: column, column: column }\n \"\n >\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n\n <!-- Table body -->\n <tbody [formGroup]=\"rowSelectors\">\n <ng-container *ngFor=\"let item of tableData; let i = index\">\n <tr\n [class.row__expand]=\"expandable\"\n [attr.data-thook]=\"item | trThook: i : trThookFn\"\n [attr.data-hasrowspan]=\"hasRowSpan(item)\"\n >\n <!-- Checkbox column for row -->\n <td *ngIf=\"selectable\" class=\"column__check\">\n <div\n *ngIf=\"!hiddenCheckboxRowIds.includes(item[rowId])\"\n class=\"gds-field-checkbox-wrap\"\n >\n <label\n [attr.for]=\"'cb_row__' + initId + '_' + i\"\n class=\"gds-form-control\"\n >\n <input\n *ngIf=\"rowSelectors.get(item[rowId])\"\n type=\"checkbox\"\n [formControlName]=\"item[rowId]\"\n [attr.aria-label]=\"ariaLabelCheckboxTr\"\n [attr.id]=\"'cb_row__' + initId + '_' + i\"\n [attr.data-thook]=\"'row-select-' + i\"\n />\n <i></i>\n </label>\n </div>\n </td>\n\n <!-- Other columns -->\n <td\n *ngFor=\"let column of tableColumns; let i = index\"\n [columnType]=\"column.valueType\"\n [value]=\"item[column.property]\"\n (click)=\"propagateItemClick(item, column.preventDefaultClickEvent)\"\n >\n <ng-container\n *ngIf=\"expandable && i === 0; else nonExpandableTemplate\"\n >\n <div\n class=\"gds-item-field-wrap\"\n [ngClass]=\"{ 'no-sub-items': item.subItems.length === 0 }\"\n >\n <span\n *ngIf=\"item.subItems.length > 0\"\n role=\"button\"\n tabindex=\"0\"\n class=\"chevron-field\"\n [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 9L12 17L4 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n <span class=\"gds-item-field-text\">\n {{ item[column.property] }} ({{ item.subItems.length }})\n <div\n *ngIf=\"column.columnLabel\"\n class=\"gds-item-field-extra-label\"\n >\n {{ item[column.columnLabel] }}\n </div>\n </span>\n </div>\n </ng-container>\n\n <ng-template #nonExpandableTemplate>\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"tdTemplate; context: { $implicit: item }\"\n >\n </ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ item[column.property] }}\n </ng-template>\n </ng-template>\n </td>\n </tr>\n\n <!-- Expanded Sub Items -->\n <ng-container *ngIf=\"expandable && rowSelectors.get(item[rowId])?.value\">\n <tr *ngFor=\"let subItem of item[subItemsProp]\">\n <td\n *ngFor=\"let column of tableColumns\"\n class=\"web-view\"\n [columnType]=\"column.valueType\"\n [value]=\"subItem[column.property]\"\n (click)=\"\n propagateItemClick(subItem, column.preventDefaultClickEvent)\n \"\n >\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\"\n >\n </ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ subItem[column.property] }}\n </ng-template>\n </td>\n\n <td\n class=\"mobile-view\"\n [attr.colspan]=\"tableColumns.length\"\n (click)=\"propagateItemClick(subItem)\"\n >\n <dl class=\"mobile-view-field-wrap\">\n <ng-container *ngFor=\"let column of tableColumns\">\n <div\n *ngIf=\"!column.hidePropertyOnMobile\"\n class=\"mobile-view-field\"\n [columnType]=\"column.valueType\"\n [value]=\"subItem[column.property]\"\n >\n <dt *ngIf=\"!column.hideLabelOnMobile\">\n <ng-container *transloco=\"let t\">\n {{ t(column.label ?? '') }}\n </ng-container>\n </dt>\n <dd\n [ngStyle]=\"\n column.boldTextOnMobile\n ? { 'font-weight': '500' }\n : { 'font-weight': '400' }\n \"\n >\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"\n tdTemplate;\n context: { $implicit: subItem }\n \"\n ></ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ subItem[column.property] }}\n </ng-template>\n </dd>\n <ng-content></ng-content>\n </div>\n </ng-container>\n </dl>\n <span\n role=\"button\"\n tabindex=\"0\"\n class=\"nav-chevron-field\"\n [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 9L12 17L4 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </td>\n </tr>\n </ng-container>\n\n <!-- Custom appended rows -->\n <ng-container *ngIf=\"appendedRowsTemplateRef as trTemplate\">\n <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n <ng-container\n *ngTemplateOutlet=\"trTemplate || null; context: { $implicit: item }\"\n >\n </ng-container>\n </ng-container>\n </ng-container>\n </tbody>\n\n <!-- Table footer -->\n <tfoot *ngIf=\"customFooterTemplateRef as trTemplate\">\n <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n <ng-container *ngTemplateOutlet=\"trTemplate || null\"> </ng-container>\n </tfoot>\n</table>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%}::ng-deep .gds-table{border-collapse:collapse}::ng-deep .gds-table thead tr th{border-top:1px solid var(--gds-sys-color-base-600);background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-background-primary);padding:.3rem .5rem;text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.gds-sortable .gds-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .gds-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center}::ng-deep .gds-table thead tr th .gds-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .gds-table-sort:focus,::ng-deep .gds-table thead tr th .gds-table-sort:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table thead tr th .gds-table-sort{border-radius:.125rem;--gds-sys-color-focus-outline: var( --gds-sys-color-background-primary )}::ng-deep .gds-table thead tr th[aria-sort] .gds-table-sort:after,::ng-deep .gds-table thead tr th.gds-sortable .gds-table-sort:after{content:\"\";background:var(--gds-sys-color-base-500);mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");mask-repeat:no-repeat;mask-position:right;width:12px;height:12px;margin-left:.3rem}::ng-deep .gds-table thead tr th[aria-sort=ascending] .gds-table-sort:after{background:var(--gds-sys-color-text-inverted);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .gds-table-sort:after{background:var(--gds-sys-color-text-inverted)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:1px solid var(--gds-sys-color-base-600);padding:.6875rem .5rem;vertical-align:top}::ng-deep .gds-table tbody tr.collapsible~.sub-row{display:none}::ng-deep .gds-table tbody tr.collapsible.expanded~.sub-row.show{display:table-row}::ng-deep .gds-table tbody tr td.collapse-control,::ng-deep .gds-table tbody tr td.select-control{width:15px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn{min-height:unset;padding:0;background:transparent}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder{cursor:pointer;width:12px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg{width:12px;fill:var(--gds-sys-color-text-primary)}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg[name=angle-right]{width:9px}::ng-deep .gds-table{border-bottom:1px solid var(--gds-sys-color-base-600)}@media(max-width:35.98em){::ng-deep .gds-table.table-mobile{width:100%;table-layout:fixed;border-bottom:none}::ng-deep .gds-table.table-mobile thead{position:sticky;top:0;display:block;background:var(--gds-sys-color-base-800)}}@media(max-width:35.98em)and (hover:none)and (pointer:coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media(max-width:35.98em){::ng-deep .gds-table.table-mobile thead tr{display:flex;overflow:auto}::ng-deep .gds-table.table-mobile thead tr::-webkit-scrollbar{display:none}::ng-deep .gds-table.table-mobile thead tr th{flex:auto;text-align:left!important;white-space:nowrap}::ng-deep .gds-table.table-mobile tbody tr{display:flex;flex-direction:column;border-bottom:1px solid var(--gds-sys-color-base-600)}::ng-deep .gds-table.table-mobile tbody tr td{display:flex;justify-content:space-between;align-items:center;border-top:none!important}::ng-deep .gds-table.table-mobile tbody tr td:before{content:attr(data-label);font-weight:700}}::ng-deep .gds-table{width:100%;border-bottom:none}::ng-deep .gds-table .web-view{display:table-cell}::ng-deep .gds-table .mobile-view{display:none}::ng-deep .gds-table tr:hover td{background-color:var(--gds-sys-color-base-100)}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .gds-table-sort{justify-content:end}::ng-deep .gds-table th button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table tbody{border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table tfoot ::ng-deep td{padding:.6875rem .5rem}::ng-deep .gds-table th.column__check{height:vanilla-px-to-rem(32px);width:vanilla-px-to-rem(40px)}::ng-deep .gds-table th.column__check div{min-height:100%}::ng-deep .gds-table th.column__check input:checked+label:after{top:.6rem;display:inline}::ng-deep .gds-table th.column__check label{display:inline;padding:0}::ng-deep .gds-table th.column__check label:before{top:.55rem}::ng-deep .gds-table td.column__check{width:vanilla-px-to-rem(40px)}::ng-deep .gds-table td.column__check div{min-height:unset}::ng-deep .gds-table td.column__check label{padding:0}::ng-deep .gds-table td.column__check label:before{margin:0}::ng-deep .gds-table tr.row__expand{background-color:var(--gds-sys-color-base-100)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap{display:flex;flex-wrap:nowrap}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap.no-sub-items{padding-left:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field{width:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field svg{transition:transform .3s ease}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field[aria-expanded=true] svg{transform:rotate(-180deg)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text{padding-left:.2rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text .gds-item-field-extra-label{font-weight:var(--sg-table-row-expand-font-weight-light, 400)}::ng-deep .gds-table tr.row__expand td{font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}::ng-deep .gds-table label.gds-form-control{align-items:flex-start}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus,::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);box-sizing:border-box;border-left:none;transform:scale(1) rotate(0);opacity:1}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.gds-form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){::ng-deep .gds-table label.gds-form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.gds-form-control.is-invalid{border:none;margin:0}}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i{background:var(--gds-sys-color-base-300)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i{background:var(--gds-sys-color-base-300)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i:after,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~span,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~span{color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~span::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~span::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i:after{box-sizing:border-box;content:\"\";opacity:0;position:absolute}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:checked~i:after{opacity:1}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]){padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]){line-height:1.125rem;padding:0}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-inverted);background-color:transparent}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i:after{box-sizing:border-box}::ng-deep .gds-table #thead-checkbox:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-white)}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i:after{border-color:#ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i:after{border-color:#ababab}@media screen and (max-width:600px){.gds-table thead{display:none}.gds-table .row__expand td:not(:first-child){display:none}.gds-table .row__expand td{display:table-cell}.gds-table .web-view{display:none}.gds-table .mobile-view{display:flex;align-items:center}.gds-table .mobile-view .mobile-view-field-wrap{display:grid;grid-template-columns:1fr 1fr;width:100%}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field{display:flex;flex-direction:column;padding-bottom:.3rem}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(odd){justify-self:start;align-items:start;text-align:start}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(2n){align-items:end;justify-self:end;text-align:end}.gds-table .mobile-view .nav-chevron-field{width:1.5rem;padding-left:.5rem}.gds-table .mobile-view .nav-chevron-field svg{transition:transform .3s ease}.gds-table .mobile-view .nav-chevron-field[aria-expanded=true] svg{transform:rotate(-90deg)}.gds-table .mobile-view .settings-field{width:1.5rem;padding:0 1rem}.gds-table .mobile-view .settings-field svg{transition:all .3s ease}.gds-table .mobile-view .settings-field:hover svg{fill:var(--gds-sys-color-blue-dark-2)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: TableDirective, selector: "[columnType]", inputs: ["columnType", "sortable", "sortOrder", "value", "thook"] }, { kind: "pipe", type: TrThookPipe, name: "trThook" }] }); }
|
|
7083
7102
|
}
|
|
7084
7103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TableComponent, decorators: [{
|
|
7085
7104
|
type: Component,
|
|
7086
|
-
args: [{ selector: 'nggv-table', standalone: false, template: "<ng-template #sortableThTemplate let-column>\n <button class=\"sg-table-sort\" *transloco=\"let t\">\n <ng-template #thButtonTemplate>\n {{ t(column.label ?? '') }}\n </ng-template>\n <ng-container\n *ngIf=\"\n customHeaderTemplates.get(column.property) as thTemplate;\n else thButtonTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n >\n </ng-template>\n </ng-container>\n </button>\n</ng-template>\n\n<ng-template #notSortableThTemplate let-column>\n <ng-template #defaultThTemplate>\n <ng-container *transloco=\"let t\">\n {{ t(column.label ?? '') }}\n </ng-container>\n </ng-template>\n <ng-container\n *ngIf=\"\n customHeaderTemplates.get(column.property) as thTemplate;\n else defaultThTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n >\n </ng-template>\n </ng-container>\n</ng-template>\n<table class=\"gds-table\" *transloco=\"let t\">\n <!-- Table header -->\n <thead>\n <tr>\n <!-- Checkbox column for header -->\n <th *ngIf=\"selectable\" class=\"column__check\">\n <div class=\"gds-field-checkbox-wrap\">\n <label\n [attr.for]=\"'cb_header__' + initId\"\n class=\"form-control\"\n id=\"thead-checkbox\"\n >\n <input\n type=\"checkbox\"\n [formControl]=\"groupSelector\"\n [attr.aria-label]=\"ariaLabelCheckboxTh\"\n [attr.id]=\"'cb_header__' + initId\"\n [attr.data-thook]=\"thook\"\n />\n <i></i>\n </label>\n </div>\n </th>\n\n <!-- Other columns -->\n <th\n *ngFor=\"let column of tableColumns\"\n [columnType]=\"column.valueType\"\n [sortable]=\"column.sortable\"\n [sortOrder]=\"column.order\"\n [thook]=\"'column-header-' + !!column.property\"\n (click)=\"toggleSortOrder(column)\"\n (keydown.space)=\"toggleSortOrderWithSpace($event, column)\"\n [attr.aria-label]=\"getAriaLabel(column)\"\n [attr.aria-sort]=\"column.order + 'ending'\"\n >\n <ng-container *ngIf=\"column.sortable\">\n <ng-container\n *ngTemplateOutlet=\"\n sortableThTemplate;\n context: { $implicit: column, column: column }\n \"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <ng-container\n *ngTemplateOutlet=\"\n notSortableThTemplate;\n context: { $implicit: column, column: column }\n \"\n >\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n\n <!-- Table body -->\n <tbody [formGroup]=\"rowSelectors\">\n <ng-container *ngFor=\"let item of tableData; let i = index\">\n <tr\n [class.row__expand]=\"expandable\"\n [attr.data-thook]=\"item | trThook: i : trThookFn\"\n [attr.data-hasrowspan]=\"hasRowSpan(item)\"\n >\n <!-- Checkbox column for row -->\n <td *ngIf=\"selectable\" class=\"column__check\">\n <div\n *ngIf=\"!hiddenCheckboxRowIds.includes(item[rowId])\"\n class=\"gds-field-checkbox-wrap\"\n >\n <label\n [attr.for]=\"'cb_row__' + initId + '_' + i\"\n class=\"form-control\"\n >\n <input\n *ngIf=\"rowSelectors.get(item[rowId])\"\n type=\"checkbox\"\n [formControlName]=\"item[rowId]\"\n [attr.aria-label]=\"ariaLabelCheckboxTr\"\n [attr.id]=\"'cb_row__' + initId + '_' + i\"\n [attr.data-thook]=\"'row-select-' + i\"\n />\n <i></i>\n </label>\n </div>\n </td>\n\n <!-- Other columns -->\n <td\n *ngFor=\"let column of tableColumns; let i = index\"\n [columnType]=\"column.valueType\"\n [value]=\"item[column.property]\"\n (click)=\"propagateItemClick(item, column.preventDefaultClickEvent)\"\n >\n <ng-container *ngIf=\"expandable && i === 0; else nonExpandableTemplate\">\n <div\n class=\"gds-item-field-wrap\"\n [ngClass]=\"{ 'no-sub-items': item.subItems.length === 0 }\"\n >\n <span\n *ngIf=\"item.subItems.length > 0\"\n role=\"button\"\n tabindex=\"0\"\n class=\"chevron-field\"\n [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n >\n <svg\n width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 9L12 17L4 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n <span class=\"gds-item-field-text\">\n {{ item[column.property] }} ({{ item.subItems.length }})\n <div *ngIf=\"column.columnLabel\" class=\"gds-item-field-extra-label\">\n {{ item[column.columnLabel] }}\n </div>\n </span>\n </div>\n </ng-container>\n\n <ng-template #nonExpandableTemplate>\n <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: item }\">\n </ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ item[column.property] }}\n </ng-template>\n </ng-template>\n </td>\n </tr>\n\n <!-- Expanded Sub Items -->\n <ng-container *ngIf=\"expandable && rowSelectors.get(item[rowId])?.value\">\n <tr *ngFor=\"let subItem of item[subItemsProp]\">\n <td\n *ngFor=\"let column of tableColumns\"\n class=\"web-view\"\n [columnType]=\"column.valueType\"\n [value]=\"subItem[column.property]\"\n (click)=\"propagateItemClick(subItem, column.preventDefaultClickEvent)\"\n >\n <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\">\n </ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ subItem[column.property] }}\n </ng-template>\n </td>\n\n <td\n class=\"mobile-view\"\n [attr.colspan]=\"tableColumns.length\"\n (click)=\"propagateItemClick(subItem)\"\n >\n <dl class=\"mobile-view-field-wrap\">\n <ng-container *ngFor=\"let column of tableColumns\">\n <div\n *ngIf=\"!column.hidePropertyOnMobile\"\n class=\"mobile-view-field\"\n [columnType]=\"column.valueType\"\n [value]=\"subItem[column.property]\"\n >\n <dt *ngIf=\"!column.hideLabelOnMobile\">\n <ng-container *transloco=\"let t\">\n {{ t(column.label ?? '') }}\n </ng-container>\n </dt>\n <dd [ngStyle]=\"column.boldTextOnMobile ? { 'font-weight': '500' } : {'font-weight': '400'}\">\n <ng-container *ngIf=\"customRowTemplates.get(column.property) as tdTemplate; else defaultTdTemplate\">\n <ng-template *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\"></ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ subItem[column.property] }}\n </ng-template>\n </dd>\n <ng-content></ng-content>\n </div>\n </ng-container>\n </dl>\n <span\n role=\"button\"\n tabindex=\"0\"\n class=\"nav-chevron-field\"\n [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n >\n <svg\n width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 9L12 17L4 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </td>\n </tr>\n </ng-container>\n\n <!-- Custom appended rows -->\n <ng-container *ngIf=\"appendedRowsTemplateRef as trTemplate\">\n <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n <ng-container\n *ngTemplateOutlet=\"trTemplate || null; context: { $implicit: item }\"\n >\n </ng-container>\n </ng-container>\n </ng-container>\n </tbody>\n\n <!-- Table footer -->\n <tfoot *ngIf=\"customFooterTemplateRef as trTemplate\">\n <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n <ng-container *ngTemplateOutlet=\"trTemplate || null\"> </ng-container>\n </tfoot>\n</table>\n", styles: ["::ng-deep .gds-table{--gds-ref-pallet-base100: #f8f8f8;--gds-ref-pallet-base600: hsl(0, 0%, 53%);--sg-table-header-background: #1a1a1a;--sg-table-header-color: #fff;--sg-table-cell-padding-x: .5rem;--sg-table-cell-padding-y: .6875rem;--sg-table-border-width: 1px;--sg-table-border-color: var(--gds-ref-pallet-base300);--sg-table-sort-icon-color: var(--gds-ref-pallet-base600);--gds-ref-pallet-base500: hsl(0, 0%, 68%);--sg-table-sort-icon-color-active: #fff;--gds-sys-color-surface: #fff;--gds-ref-pallet-base200: #e8e8e8;--gds-sys-color-base: #333;--gds-sys-shape-corner-small: .125rem;--gds-sys-color-blue-dark-2: #007ac7;--gds-sys-shape-corner-medium: .25rem;--sg-table-row-expand-font-weight: 500;--sg-table-row-expand-font-weight-light: 400;border-collapse:collapse}::ng-deep .gds-table thead tr th{background:#333;color:var(--sg-table-header-color);padding:.3rem var(--sg-table-cell-padding-x);text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.sg-sortable .sg-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .sg-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center}::ng-deep .gds-table thead tr th .sg-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .sg-table-sort:focus,::ng-deep .gds-table thead tr th .sg-table-sort:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table thead tr th .sg-table-sort{border-radius:.125rem;--gds-sys-color-focus-outline: $_header-color}::ng-deep .gds-table thead tr th[aria-sort] .sg-table-sort:after,::ng-deep .gds-table thead tr th.sg-sortable .sg-table-sort:after{content:\"\";background:var(--gds-sys-color-base-500);mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");mask-repeat:no-repeat;mask-position:right;width:12px;height:12px;margin-left:.3rem}::ng-deep .gds-table thead tr th[aria-sort=ascending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .sg-table-sort:after{background:var(--sg-table-sort-icon-color-active)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:var(--sg-table-border-width) solid var(--gds-sys-color-base-300);padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x);vertical-align:top}::ng-deep .gds-table tbody tr.collapsible~.sub-row{display:none}::ng-deep .gds-table tbody tr.collapsible.expanded~.sub-row.show{display:table-row}::ng-deep .gds-table tbody tr td.collapse-control,::ng-deep .gds-table tbody tr td.select-control{width:15px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn{min-height:unset;padding:0;background:transparent}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder{cursor:pointer;width:12px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg{width:12px;fill:#868686}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg[name=angle-right]{width:9px}::ng-deep .gds-table{border-bottom:var(--sg-table-border-width) solid var(--gds-sys-color-base-300)}@media(max-width:36em){::ng-deep .gds-table.table-mobile{width:100%;table-layout:fixed;border-bottom:none}::ng-deep .gds-table.table-mobile thead{position:sticky;top:0;display:block;background:#333}}@media(max-width:36em)and (hover:none)and (pointer:coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media(max-width:36em){::ng-deep .gds-table.table-mobile thead tr{display:flex;overflow:auto}::ng-deep .gds-table.table-mobile thead tr::-webkit-scrollbar{display:none}::ng-deep .gds-table.table-mobile thead tr th{flex:auto;text-align:left!important;white-space:nowrap}::ng-deep .gds-table.table-mobile tbody tr{display:flex;flex-direction:column;border-bottom:var(--sg-table-border-width) solid var(--gds-sys-color-base-300)}::ng-deep .gds-table.table-mobile tbody tr td{display:flex;justify-content:space-between;align-items:center;border-top:none!important}::ng-deep .gds-table.table-mobile tbody tr td:before{content:attr(data-label);font-weight:700}}::ng-deep .gds-table{width:100%;border-bottom:none}::ng-deep .gds-table .web-view{display:table-cell}::ng-deep .gds-table .mobile-view{display:none}::ng-deep .gds-table tr:hover td{background-color:var(--gds-ref-pallet-base100)}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .sg-table-sort{justify-content:end}::ng-deep .gds-table th button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table tbody{border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table tfoot ::ng-deep td{padding:var(--sg-table-cell-padding-y) var(--sg-table-cell-padding-x)}::ng-deep .gds-table th.column__check{height:vanilla-px-to-rem(32px);width:vanilla-px-to-rem(40px)}::ng-deep .gds-table th.column__check div{min-height:100%}::ng-deep .gds-table th.column__check input:checked+label:after{top:.6rem;display:inline}::ng-deep .gds-table th.column__check label{display:inline;padding:0}::ng-deep .gds-table th.column__check label:before{top:.55rem}::ng-deep .gds-table td.column__check{width:vanilla-px-to-rem(40px)}::ng-deep .gds-table td.column__check div{min-height:unset}::ng-deep .gds-table td.column__check label{padding:0}::ng-deep .gds-table td.column__check label:before{margin:0}::ng-deep .gds-table tr.row__expand{background-color:var(--gds-ref-pallet-base100)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap{display:flex;flex-wrap:nowrap}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap.no-sub-items{padding-left:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field{width:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field svg{transition:transform .3s ease}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field[aria-expanded=true] svg{transform:rotate(-180deg)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text{padding-left:.2rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text .gds-item-field-extra-label{font-weight:var(--sg-table-row-expand-font-weight-light, 400)}::ng-deep .gds-table tr.row__expand td{font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table{--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);--gds-comp-checkbox-container-color-disabled: var(--gds-sys-color-base-300);--gds-comp-checkbox-border-color: var(--gds-sys-color-base-900);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base-600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base-900);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2)}::ng-deep .gds-table label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}::ng-deep .gds-table label.form-control{align-items:flex-start}::ng-deep .gds-table label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus,::ng-deep .gds-table label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}::ng-deep .gds-table label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}::ng-deep .gds-table label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);border-left:none;transform:scale(1) rotate(0);opacity:1}::ng-deep .gds-table label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){::ng-deep .gds-table label.form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.form-control.is-invalid{border:none;margin:0}}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled:checked~i:after,::ng-deep .gds-table label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}::ng-deep .gds-table label.form-control input[type=checkbox]:disabled~span::placeholder,::ng-deep .gds-table label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}::ng-deep .gds-table label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}::ng-deep .gds-table label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}::ng-deep .gds-table label.form-control input[type=checkbox]:checked~i:after{opacity:1}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]){padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::ng-deep .gds-table .gds-field-checkbox-wrap .form-control:has(input[type=checkbox]){line-height:1.125rem;padding:0}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-container-color);background-color:var(--gds-comp-checkbox-border-color)}::ng-deep .gds-table #thead-checkbox:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--sg-table-header-color)}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i:after{border-color:#ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i{background-color:var(--gds-comp-checkbox-border-color);box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i:after{border-color:#ababab}@media screen and (max-width:600px){.gds-table thead{display:none}.gds-table .row__expand td:not(:first-child){display:none}.gds-table .row__expand td{display:table-cell}.gds-table .web-view{display:none}.gds-table .mobile-view{display:flex;align-items:center}.gds-table .mobile-view .mobile-view-field-wrap{display:grid;grid-template-columns:1fr 1fr;width:100%}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field{display:flex;flex-direction:column;padding-bottom:.3rem}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(odd){justify-self:start;align-items:start;text-align:start}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(2n){align-items:end;justify-self:end;text-align:end}.gds-table .mobile-view .nav-chevron-field{width:1.5rem;padding-left:.5rem}.gds-table .mobile-view .nav-chevron-field svg{transition:transform .3s ease}.gds-table .mobile-view .nav-chevron-field[aria-expanded=true] svg{transform:rotate(-90deg)}.gds-table .mobile-view .settings-field{width:1.5rem;padding:0 1rem}.gds-table .mobile-view .settings-field svg{transition:all .3s ease}.gds-table .mobile-view .settings-field:hover svg{fill:var(--gds-sys-color-blue-dark-2)}}\n"] }]
|
|
7105
|
+
args: [{ selector: 'nggv-table', standalone: false, template: "<ng-template #sortableThTemplate let-column>\n <button class=\"gds-table-sort\" *transloco=\"let t\">\n <ng-template #thButtonTemplate>\n {{ t(column.label ?? '') }}\n </ng-template>\n <ng-container\n *ngIf=\"\n customHeaderTemplates.get(column.property) as thTemplate;\n else thButtonTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n >\n </ng-template>\n </ng-container>\n </button>\n</ng-template>\n\n<ng-template #notSortableThTemplate let-column>\n <ng-template #defaultThTemplate>\n <ng-container *transloco=\"let t\">\n {{ t(column.label ?? '') }}\n </ng-container>\n </ng-template>\n <ng-container\n *ngIf=\"\n customHeaderTemplates.get(column.property) as thTemplate;\n else defaultThTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"thTemplate || null; context: { $implicit: column }\"\n >\n </ng-template>\n </ng-container>\n</ng-template>\n<table class=\"gds-table\" *transloco=\"let t\">\n <!-- Table header -->\n <thead>\n <tr>\n <!-- Checkbox column for header -->\n <th *ngIf=\"selectable\" class=\"column__check\">\n <div class=\"gds-field-checkbox-wrap\">\n <label\n [attr.for]=\"'cb_header__' + initId\"\n class=\"gds-form-control\"\n id=\"thead-checkbox\"\n >\n <input\n type=\"checkbox\"\n [formControl]=\"groupSelector\"\n [attr.aria-label]=\"ariaLabelCheckboxTh\"\n [attr.id]=\"'cb_header__' + initId\"\n [attr.data-thook]=\"thook\"\n />\n <i></i>\n </label>\n </div>\n </th>\n\n <!-- Other columns -->\n <th\n *ngFor=\"let column of tableColumns\"\n [columnType]=\"column.valueType\"\n [sortable]=\"column.sortable\"\n [sortOrder]=\"column.order\"\n [thook]=\"'column-header-' + !!column.property\"\n (click)=\"toggleSortOrder(column)\"\n (keydown.space)=\"toggleSortOrderWithSpace($event, column)\"\n [attr.aria-label]=\"getAriaLabel(column)\"\n [attr.aria-sort]=\"column.order + 'ending'\"\n >\n <ng-container *ngIf=\"column.sortable\">\n <ng-container\n *ngTemplateOutlet=\"\n sortableThTemplate;\n context: { $implicit: column, column: column }\n \"\n >\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"!column.sortable\">\n <ng-container\n *ngTemplateOutlet=\"\n notSortableThTemplate;\n context: { $implicit: column, column: column }\n \"\n >\n </ng-container>\n </ng-container>\n </th>\n </tr>\n </thead>\n\n <!-- Table body -->\n <tbody [formGroup]=\"rowSelectors\">\n <ng-container *ngFor=\"let item of tableData; let i = index\">\n <tr\n [class.row__expand]=\"expandable\"\n [attr.data-thook]=\"item | trThook: i : trThookFn\"\n [attr.data-hasrowspan]=\"hasRowSpan(item)\"\n >\n <!-- Checkbox column for row -->\n <td *ngIf=\"selectable\" class=\"column__check\">\n <div\n *ngIf=\"!hiddenCheckboxRowIds.includes(item[rowId])\"\n class=\"gds-field-checkbox-wrap\"\n >\n <label\n [attr.for]=\"'cb_row__' + initId + '_' + i\"\n class=\"gds-form-control\"\n >\n <input\n *ngIf=\"rowSelectors.get(item[rowId])\"\n type=\"checkbox\"\n [formControlName]=\"item[rowId]\"\n [attr.aria-label]=\"ariaLabelCheckboxTr\"\n [attr.id]=\"'cb_row__' + initId + '_' + i\"\n [attr.data-thook]=\"'row-select-' + i\"\n />\n <i></i>\n </label>\n </div>\n </td>\n\n <!-- Other columns -->\n <td\n *ngFor=\"let column of tableColumns; let i = index\"\n [columnType]=\"column.valueType\"\n [value]=\"item[column.property]\"\n (click)=\"propagateItemClick(item, column.preventDefaultClickEvent)\"\n >\n <ng-container\n *ngIf=\"expandable && i === 0; else nonExpandableTemplate\"\n >\n <div\n class=\"gds-item-field-wrap\"\n [ngClass]=\"{ 'no-sub-items': item.subItems.length === 0 }\"\n >\n <span\n *ngIf=\"item.subItems.length > 0\"\n role=\"button\"\n tabindex=\"0\"\n class=\"chevron-field\"\n [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 9L12 17L4 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n <span class=\"gds-item-field-text\">\n {{ item[column.property] }} ({{ item.subItems.length }})\n <div\n *ngIf=\"column.columnLabel\"\n class=\"gds-item-field-extra-label\"\n >\n {{ item[column.columnLabel] }}\n </div>\n </span>\n </div>\n </ng-container>\n\n <ng-template #nonExpandableTemplate>\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"tdTemplate; context: { $implicit: item }\"\n >\n </ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ item[column.property] }}\n </ng-template>\n </ng-template>\n </td>\n </tr>\n\n <!-- Expanded Sub Items -->\n <ng-container *ngIf=\"expandable && rowSelectors.get(item[rowId])?.value\">\n <tr *ngFor=\"let subItem of item[subItemsProp]\">\n <td\n *ngFor=\"let column of tableColumns\"\n class=\"web-view\"\n [columnType]=\"column.valueType\"\n [value]=\"subItem[column.property]\"\n (click)=\"\n propagateItemClick(subItem, column.preventDefaultClickEvent)\n \"\n >\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"tdTemplate; context: { $implicit: subItem }\"\n >\n </ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ subItem[column.property] }}\n </ng-template>\n </td>\n\n <td\n class=\"mobile-view\"\n [attr.colspan]=\"tableColumns.length\"\n (click)=\"propagateItemClick(subItem)\"\n >\n <dl class=\"mobile-view-field-wrap\">\n <ng-container *ngFor=\"let column of tableColumns\">\n <div\n *ngIf=\"!column.hidePropertyOnMobile\"\n class=\"mobile-view-field\"\n [columnType]=\"column.valueType\"\n [value]=\"subItem[column.property]\"\n >\n <dt *ngIf=\"!column.hideLabelOnMobile\">\n <ng-container *transloco=\"let t\">\n {{ t(column.label ?? '') }}\n </ng-container>\n </dt>\n <dd\n [ngStyle]=\"\n column.boldTextOnMobile\n ? { 'font-weight': '500' }\n : { 'font-weight': '400' }\n \"\n >\n <ng-container\n *ngIf=\"\n customRowTemplates.get(column.property) as tdTemplate;\n else defaultTdTemplate\n \"\n >\n <ng-template\n *ngTemplateOutlet=\"\n tdTemplate;\n context: { $implicit: subItem }\n \"\n ></ng-template>\n </ng-container>\n <ng-template #defaultTdTemplate>\n {{ subItem[column.property] }}\n </ng-template>\n </dd>\n <ng-content></ng-content>\n </div>\n </ng-container>\n </dl>\n <span\n role=\"button\"\n tabindex=\"0\"\n class=\"nav-chevron-field\"\n [attr.aria-expanded]=\"rowSelectors.get(item[rowId])?.value\"\n >\n <svg\n width=\"20\"\n height=\"20\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M20 9L12 17L4 9\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </span>\n </td>\n </tr>\n </ng-container>\n\n <!-- Custom appended rows -->\n <ng-container *ngIf=\"appendedRowsTemplateRef as trTemplate\">\n <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n <ng-container\n *ngTemplateOutlet=\"trTemplate || null; context: { $implicit: item }\"\n >\n </ng-container>\n </ng-container>\n </ng-container>\n </tbody>\n\n <!-- Table footer -->\n <tfoot *ngIf=\"customFooterTemplateRef as trTemplate\">\n <!-- Cannot infer trTemplate as TemplateRef therefore null -->\n <ng-container *ngTemplateOutlet=\"trTemplate || null\"> </ng-container>\n </tfoot>\n</table>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2);--gds-sys-shape-corner-none: 0;--gds-sys-shape-corner-small: .125rem;--gds-sys-shape-corner-medium: .25rem;--gds-sys-shape-corner-round: 50%}::ng-deep .gds-table{border-collapse:collapse}::ng-deep .gds-table thead tr th{border-top:1px solid var(--gds-sys-color-base-600);background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-background-primary);padding:.3rem .5rem;text-align:left;font-weight:500}::ng-deep .gds-table thead tr th.icon-invert.gds-sortable .gds-table-sort:after{margin-left:0;margin-right:.3rem;order:-1}::ng-deep .gds-table thead tr th .gds-table-sort{color:inherit;width:100%;text-align:left;display:flex;align-items:center}::ng-deep .gds-table thead tr th .gds-table-sort:focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table thead tr th .gds-table-sort:focus,::ng-deep .gds-table thead tr th .gds-table-sort:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table thead tr th .gds-table-sort{border-radius:.125rem;--gds-sys-color-focus-outline: var( --gds-sys-color-background-primary )}::ng-deep .gds-table thead tr th[aria-sort] .gds-table-sort:after,::ng-deep .gds-table thead tr th.gds-sortable .gds-table-sort:after{content:\"\";background:var(--gds-sys-color-base-500);mask-image:url(\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%20fill='none'%3E%3Cpath%20d='M11.107%205.86147L10.6429%205.39741C10.5328%205.28726%2010.3546%205.28726%2010.2445%205.39741L6.60933%209.03257V1.03101C6.60933%200.876318%206.48276%200.749756%206.32808%200.749756H5.67183C5.51714%200.749756%205.39058%200.876318%205.39058%201.03101V9.03257L1.75542%205.39741C1.64526%205.28726%201.46714%205.28726%201.35698%205.39741L0.89292%205.86147C0.782764%205.97163%200.782764%206.14976%200.89292%206.25991L5.80073%2011.1677C5.91089%2011.2779%206.08901%2011.2779%206.19917%2011.1677L11.107%206.25991C11.2171%206.14976%2011.2171%205.97163%2011.107%205.86147Z'%20fill='%23ADADAD'/%3E%3C/svg%3E\");mask-repeat:no-repeat;mask-position:right;width:12px;height:12px;margin-left:.3rem}::ng-deep .gds-table thead tr th[aria-sort=ascending] .gds-table-sort:after{background:var(--gds-sys-color-text-inverted);transform:rotate(180deg)}::ng-deep .gds-table thead tr th[aria-sort=descending] .gds-table-sort:after{background:var(--gds-sys-color-text-inverted)}::ng-deep .gds-table tbody tr td,::ng-deep .gds-table tbody tr th{border-top:1px solid var(--gds-sys-color-base-600);padding:.6875rem .5rem;vertical-align:top}::ng-deep .gds-table tbody tr.collapsible~.sub-row{display:none}::ng-deep .gds-table tbody tr.collapsible.expanded~.sub-row.show{display:table-row}::ng-deep .gds-table tbody tr td.collapse-control,::ng-deep .gds-table tbody tr td.select-control{width:15px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn{min-height:unset;padding:0;background:transparent}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder{cursor:pointer;width:12px}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg{width:12px;fill:var(--gds-sys-color-text-primary)}::ng-deep .gds-table tbody tr td.collapse-control>.collapse-btn>.icon-holder svg[name=angle-right]{width:9px}::ng-deep .gds-table{border-bottom:1px solid var(--gds-sys-color-base-600)}@media(max-width:35.98em){::ng-deep .gds-table.table-mobile{width:100%;table-layout:fixed;border-bottom:none}::ng-deep .gds-table.table-mobile thead{position:sticky;top:0;display:block;background:var(--gds-sys-color-base-800)}}@media(max-width:35.98em)and (hover:none)and (pointer:coarse){::ng-deep .gds-table.table-mobile thead{display:table-header-group}}@media(max-width:35.98em){::ng-deep .gds-table.table-mobile thead tr{display:flex;overflow:auto}::ng-deep .gds-table.table-mobile thead tr::-webkit-scrollbar{display:none}::ng-deep .gds-table.table-mobile thead tr th{flex:auto;text-align:left!important;white-space:nowrap}::ng-deep .gds-table.table-mobile tbody tr{display:flex;flex-direction:column;border-bottom:1px solid var(--gds-sys-color-base-600)}::ng-deep .gds-table.table-mobile tbody tr td{display:flex;justify-content:space-between;align-items:center;border-top:none!important}::ng-deep .gds-table.table-mobile tbody tr td:before{content:attr(data-label);font-weight:700}}::ng-deep .gds-table{width:100%;border-bottom:none}::ng-deep .gds-table .web-view{display:table-cell}::ng-deep .gds-table .mobile-view{display:none}::ng-deep .gds-table tr:hover td{background-color:var(--gds-sys-color-base-100)}::ng-deep .gds-table .gds-table__numeric-col{text-align:right}::ng-deep .gds-table thead tr th.gds-table__numeric-col .gds-table-sort{justify-content:end}::ng-deep .gds-table th button{background-color:#0000;border:0;font-family:inherit;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}::ng-deep .gds-table tbody{border-bottom:var(--sg-table-border-width) solid var(--sg-table-border-color)}::ng-deep .gds-table td{cursor:pointer}::ng-deep .gds-table tfoot{border-top:1px solid;border-bottom:none;font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table tfoot ::ng-deep td{padding:.6875rem .5rem}::ng-deep .gds-table th.column__check{height:vanilla-px-to-rem(32px);width:vanilla-px-to-rem(40px)}::ng-deep .gds-table th.column__check div{min-height:100%}::ng-deep .gds-table th.column__check input:checked+label:after{top:.6rem;display:inline}::ng-deep .gds-table th.column__check label{display:inline;padding:0}::ng-deep .gds-table th.column__check label:before{top:.55rem}::ng-deep .gds-table td.column__check{width:vanilla-px-to-rem(40px)}::ng-deep .gds-table td.column__check div{min-height:unset}::ng-deep .gds-table td.column__check label{padding:0}::ng-deep .gds-table td.column__check label:before{margin:0}::ng-deep .gds-table tr.row__expand{background-color:var(--gds-sys-color-base-100)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap{display:flex;flex-wrap:nowrap}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap.no-sub-items{padding-left:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field{width:1.5rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field svg{transition:transform .3s ease}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .chevron-field[aria-expanded=true] svg{transform:rotate(-180deg)}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text{padding-left:.2rem}::ng-deep .gds-table tr.row__expand .gds-item-field-wrap .gds-item-field-text .gds-item-field-extra-label{font-weight:var(--sg-table-row-expand-font-weight-light, 400)}::ng-deep .gds-table tr.row__expand td{font-weight:var(--sg-table-row-expand-font-weight, 500)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}::ng-deep .gds-table label.gds-form-control{align-items:flex-start}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus,::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-primary);position:relative;border-radius:var(--gds-sys-shape-corner-small);background-color:transparent;flex:0 0 auto;height:1rem;width:1rem}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{background-color:var(--gds-sys-color-base-200)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:checked~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-sys-color-base-900)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-sys-color-background-primary);box-sizing:border-box;border-left:none;transform:scale(1) rotate(0);opacity:1}::ng-deep .gds-table label.gds-form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.gds-form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){::ng-deep .gds-table label.gds-form-control.is-invalid{border:.0625rem solid var(--gds-sys-color-text-error);margin-bottom:.5rem}::ng-deep .gds-table .is-invalid label.gds-form-control.is-invalid{border:none;margin:0}}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i{background:var(--gds-sys-color-base-300)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i{background:var(--gds-sys-color-base-300)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i{box-shadow:inset 0 0 0 1px var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled:checked~i:after,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~span,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~span{color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:disabled~span::placeholder,::ng-deep .gds-table label.gds-form-control input[type=checkbox].disabled~span::placeholder{color:var(--gds-sys-color-text-disabled)}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i:after{box-sizing:border-box;content:\"\";opacity:0;position:absolute}::ng-deep .gds-table label.gds-form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-sys-color-text-inverted);border-left:3px solid var(--gds-sys-color-text-inverted);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}::ng-deep .gds-table label.gds-form-control input[type=checkbox]:checked~i:after{opacity:1}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]){padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]):has(input:disabled){cursor:not-allowed}::ng-deep .gds-table .gds-field-checkbox-wrap .gds-form-control:has(input[type=checkbox]){line-height:1.125rem;padding:0}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i{box-shadow:inset 0 0 0 1px var(--gds-sys-color-text-inverted);background-color:transparent}::ng-deep .gds-table #thead-checkbox input[type=checkbox]~i:after{box-sizing:border-box}::ng-deep .gds-table #thead-checkbox:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-white)}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:not(:checked)~i:after{border-color:#ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i{box-shadow:inset 0 0 0 1px #ababab}::ng-deep .gds-table #thead-checkbox input[type=checkbox]:hover:checked~i:after{border-color:#ababab}@media screen and (max-width:600px){.gds-table thead{display:none}.gds-table .row__expand td:not(:first-child){display:none}.gds-table .row__expand td{display:table-cell}.gds-table .web-view{display:none}.gds-table .mobile-view{display:flex;align-items:center}.gds-table .mobile-view .mobile-view-field-wrap{display:grid;grid-template-columns:1fr 1fr;width:100%}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field{display:flex;flex-direction:column;padding-bottom:.3rem}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(odd){justify-self:start;align-items:start;text-align:start}.gds-table .mobile-view .mobile-view-field-wrap .mobile-view-field:nth-child(2n){align-items:end;justify-self:end;text-align:end}.gds-table .mobile-view .nav-chevron-field{width:1.5rem;padding-left:.5rem}.gds-table .mobile-view .nav-chevron-field svg{transition:transform .3s ease}.gds-table .mobile-view .nav-chevron-field[aria-expanded=true] svg{transform:rotate(-90deg)}.gds-table .mobile-view .settings-field{width:1.5rem;padding:0 1rem}.gds-table .mobile-view .settings-field svg{transition:all .3s ease}.gds-table .mobile-view .settings-field:hover svg{fill:var(--gds-sys-color-blue-dark-2)}}\n"] }]
|
|
7087
7106
|
}], propDecorators: { customTemplates: [{
|
|
7088
7107
|
type: ContentChildren,
|
|
7089
7108
|
args: [TableTemplateDirective, { descendants: true }]
|
|
@@ -7479,11 +7498,11 @@ class TabsComponent {
|
|
|
7479
7498
|
this.onSelect(tabElement.id.slice(4));
|
|
7480
7499
|
}
|
|
7481
7500
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TabsComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7482
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TabsComponent, isStandalone: false, selector: "nggv-tabs", inputs: { thook: "thook", tabs: "tabs" }, outputs: { ngvTabSwitch: "ngvTabSwitch" }, host: { properties: { "class.gds-tabs": "this.baseClass", "attr.data-thook": "this.thook" } }, queries: [{ propertyName: "tabRefs", predicate: TabDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div\n class=\"gds-
|
|
7501
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: TabsComponent, isStandalone: false, selector: "nggv-tabs", inputs: { thook: "thook", tabs: "tabs" }, outputs: { ngvTabSwitch: "ngvTabSwitch" }, host: { properties: { "class.gds-tabs": "this.baseClass", "attr.data-thook": "this.thook" } }, queries: [{ propertyName: "tabRefs", predicate: TabDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n <div\n class=\"gds-tabs\"\n role=\"tablist\"\n [attr.data-thook]=\"thook + '-list'\"\n (keydown)=\"onKeyDown($event)\"\n >\n <button\n class=\"gds-tabs__tab\"\n [id]=\"'tab-' + (tab.id !== undefined ? tab.id : '')\"\n role=\"tab\"\n [attr.data-thook]=\"tab.thook || thook + '-tab'\"\n [tabindex]=\"tab.active ? 0 : -1\"\n [attr.aria-controls]=\"'panel-' + (tab.id !== undefined ? tab.id : '')\"\n [attr.aria-selected]=\"tab.active\"\n [class.-selected]=\"tab.active\"\n [disabled]=\"tab.disabled\"\n [innerHTML]=\"t(tab.tab)\"\n (click)=\"onSelect(tab.id)\"\n *ngFor=\"let tab of tabs\"\n ></button>\n </div>\n <article\n *ngIf=\"useRouting\"\n class=\"gds-tabs__panel -active\"\n [id]=\"'panel-' + (selectedTab ? selectedTab.id : '')\"\n [attr.data-thook]=\"thook + '-panel'\"\n [attr.aria-labelledby]=\"'tab-' + (selectedTab ? selectedTab.id : '')\"\n >\n <router-outlet></router-outlet>\n </article>\n <ng-content *ngIf=\"!useRouting\"></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host .gds-tabs{display:flex;overflow-x:auto;padding:.25rem;margin:-.25rem;--border-color: var(--gds-sys-color-base-600)}:host .gds-tabs::-webkit-scrollbar{display:none}:host .gds-tabs:not(.gds-tabs--fluid):after{border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);content:\"\";display:block;flex-grow:1}:host .gds-tabs__tab{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);padding:.75rem 1rem;font-weight:500;transition:border var(--gds-sys-transition)}:host .gds-tabs__tab:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}:host .gds-tabs__tab:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-tabs__tab:focus,:host .gds-tabs__tab:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-tabs__tab{display:flex;justify-content:center;color:var(--gds-sys-color-text-primary);text-align:center;text-decoration:none;white-space:nowrap;border-radius:.25rem .25rem 0 0;border-left:1px solid transparent;border-top:1px solid transparent;border-right:1px solid transparent}.gds-tabs--fluid :host .gds-tabs__tab{flex:1}:host .gds-tabs__tab svg>*{fill:currentColor}:host .gds-tabs__tab{gap:.25rem;transition:none;font-size:1rem;font-family:inherit}:host .gds-tabs__tab.-selected{box-sizing:border-box;border-top:solid 1px var(--gds-sys-color-base-600);border-right:solid 1px var(--gds-sys-color-base-600);border-left:solid 1px var(--gds-sys-color-base-600);transition:border var(--gds-sys-transition)}:host .gds-tabs__tab.-selected:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}:host .gds-tabs__tab.-selected{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom:1px transparent;transition:none;padding:11px 15px 12px}:host .gds-tabs__tab[disabled]{color:#adadad;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
|
|
7483
7502
|
}
|
|
7484
7503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: TabsComponent, decorators: [{
|
|
7485
7504
|
type: Component,
|
|
7486
|
-
args: [{ selector: 'nggv-tabs', standalone: false, template: "<ng-container *transloco=\"let t\">\n <div\n class=\"gds-
|
|
7505
|
+
args: [{ selector: 'nggv-tabs', standalone: false, template: "<ng-container *transloco=\"let t\">\n <div\n class=\"gds-tabs\"\n role=\"tablist\"\n [attr.data-thook]=\"thook + '-list'\"\n (keydown)=\"onKeyDown($event)\"\n >\n <button\n class=\"gds-tabs__tab\"\n [id]=\"'tab-' + (tab.id !== undefined ? tab.id : '')\"\n role=\"tab\"\n [attr.data-thook]=\"tab.thook || thook + '-tab'\"\n [tabindex]=\"tab.active ? 0 : -1\"\n [attr.aria-controls]=\"'panel-' + (tab.id !== undefined ? tab.id : '')\"\n [attr.aria-selected]=\"tab.active\"\n [class.-selected]=\"tab.active\"\n [disabled]=\"tab.disabled\"\n [innerHTML]=\"t(tab.tab)\"\n (click)=\"onSelect(tab.id)\"\n *ngFor=\"let tab of tabs\"\n ></button>\n </div>\n <article\n *ngIf=\"useRouting\"\n class=\"gds-tabs__panel -active\"\n [id]=\"'panel-' + (selectedTab ? selectedTab.id : '')\"\n [attr.data-thook]=\"thook + '-panel'\"\n [attr.aria-labelledby]=\"'tab-' + (selectedTab ? selectedTab.id : '')\"\n >\n <router-outlet></router-outlet>\n </article>\n <ng-content *ngIf=\"!useRouting\"></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host .gds-tabs{display:flex;overflow-x:auto;padding:.25rem;margin:-.25rem;--border-color: var(--gds-sys-color-base-600)}:host .gds-tabs::-webkit-scrollbar{display:none}:host .gds-tabs:not(.gds-tabs--fluid):after{border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);content:\"\";display:block;flex-grow:1}:host .gds-tabs__tab{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;border-bottom:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600);padding:.75rem 1rem;font-weight:500;transition:border var(--gds-sys-transition)}:host .gds-tabs__tab:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}:host .gds-tabs__tab:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-tabs__tab:focus,:host .gds-tabs__tab:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-tabs__tab{display:flex;justify-content:center;color:var(--gds-sys-color-text-primary);text-align:center;text-decoration:none;white-space:nowrap;border-radius:.25rem .25rem 0 0;border-left:1px solid transparent;border-top:1px solid transparent;border-right:1px solid transparent}.gds-tabs--fluid :host .gds-tabs__tab{flex:1}:host .gds-tabs__tab svg>*{fill:currentColor}:host .gds-tabs__tab{gap:.25rem;transition:none;font-size:1rem;font-family:inherit}:host .gds-tabs__tab.-selected{box-sizing:border-box;border-top:solid 1px var(--gds-sys-color-base-600);border-right:solid 1px var(--gds-sys-color-base-600);border-left:solid 1px var(--gds-sys-color-base-600);transition:border var(--gds-sys-transition)}:host .gds-tabs__tab.-selected:not(:disabled,.disabled,[aria-disabled]):hover{background:var(--gds-sys-color-base-800);color:var(--gds-sys-color-text-white);--background: var(--gds-sys-color-base-800);--color: var(--gds-sys-color-text-white);border-color:var(--gds-sys-color-base-800)}:host .gds-tabs__tab.-selected{border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom:1px transparent;transition:none;padding:11px 15px 12px}:host .gds-tabs__tab[disabled]{color:#adadad;cursor:not-allowed}\n"] }]
|
|
7487
7506
|
}], ctorParameters: () => [{ type: i1$2.Router }], propDecorators: { baseClass: [{
|
|
7488
7507
|
type: HostBinding,
|
|
7489
7508
|
args: ['class.gds-tabs']
|
|
@@ -7594,11 +7613,11 @@ class NggvTextareaComponent extends NggvBaseControlValueAccessorComponent$1 {
|
|
|
7594
7613
|
this.onChange(this.state);
|
|
7595
7614
|
}
|
|
7596
7615
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvTextareaComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7597
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvTextareaComponent, isStandalone: false, selector: "nggv-textarea", inputs: { thook: "thook", placeholder: "placeholder", readonly: "readonly", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", rows: "rows", size: "size" }, host: { properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-textarea'\"\n *transloco=\"let t; read: scope\"\n>\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 {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"description && descriptionIsVisible\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-textarea'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state }}\n </ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n <textarea\n #input\n [id]=\"id + '-textarea'\"\n class=\"gds-field\"\n [ngClass]=\"{ 'no-resize': !!rows }\"\n [class.nggv-field--error]=\"invalid\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.role]=\"role\"\n [attr.rows]=\"rows\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n title=\"\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-textarea'\"\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\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\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 </span>\n\n <ng-container *ngIf=\"hasMaxLength\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--sg-text-primary: #333;--sg-form-control-bg: #fff;--gds-ref-pallet-base100: hsl(0, 0%, 97%);--sg-border-radius: 4px;--sg-border-width: 1px;--sg-border-color: #868686}:host textarea{padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);--border-color: var(--sg-border-color)}:host textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host textarea:focus,:host textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host textarea{align-items:center;background-color:var(--sg-form-control-bg);color:var(--text-primary-color);display:flex;justify-content:center;resize:vertical}@media screen and (-ms-high-contrast:active){:host textarea{border:2px solid currentcolor}}:host textarea:hover{background-color:var(--gds-sys-color-base-100)}:host textarea:disabled,:host textarea.disabled,:host textarea[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host textarea:disabled::placeholder,:host textarea.disabled::placeholder,:host textarea[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host label:not(.gds-field-notice):is(label){margin-bottom:0}:host label:not(.gds-field-notice).form-control{width:fit-content}@supports (-moz-appearance: none){:host label:not(.gds-field-notice).form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label:not(.gds-field-notice).form-control:focus,:host label:not(.gds-field-notice).form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-field-notice):not(.form-control){font-weight:500;width:100%;line-height:1.25rem}:host label:not(.gds-field-notice)+input,:host label:not(.gds-field-notice)+textarea,fieldset :host label:not(.gds-field-notice)+div,:host label:not(.gds-field-notice)+button,:host label:not(.gds-field-notice)+.group-stepper,:host label:not(.gds-field-notice)+.stepper-wrapper,:host label:not(.gds-field-notice)+.group{margin-top:.5rem}:host label:not(.gds-field-notice)+.form-info{margin-bottom:.5rem}:host label+.gds-field,:host label+.nggv-field--locked{margin-top:.5rem}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label--optional{font-weight:400}:host textarea{width:100%;max-width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem}:host textarea.nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .description{margin-bottom:.5rem}:host .error-wrapper{margin-top:.5rem;display:flex}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host .gds-form-item__footer>.form-info--countdown{font-weight:400}:host .no-resize{resize:none}:host .no-resize::-webkit-scrollbar{-webkit-appearance:none}:host .no-resize::-webkit-scrollbar-thumb{border-radius:.5rem}:host.small label:not(.gds-field-notice):not(.form-control){font-size:.875rem;line-height:1rem}:host.small label+textarea{margin-top:.25rem}:host.small textarea{padding:.38rem .5rem;font-size:.875rem}:host.small .error-wrapper,:host.small .form-info{margin-top:.25rem;font-size:.875rem;line-height:1rem}:host.small .gds-form-item__footer:not(:empty){margin-top:0rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
7616
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: NggvTextareaComponent, isStandalone: false, selector: "nggv-textarea", inputs: { thook: "thook", placeholder: "placeholder", readonly: "readonly", minLength: "minLength", minlength: "minlength", maxLength: "maxLength", maxlength: "maxlength", rows: "rows", size: "size" }, host: { properties: { "attr.data-thook": "this.thook", "class.small": "this.isSmall", "class.large": "this.isLarge" } }, usesInheritance: true, ngImport: i0, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-textarea'\"\n *transloco=\"let t; read: scope\"\n>\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 {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"description && descriptionIsVisible\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-textarea'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state }}\n </ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n <textarea\n #input\n [id]=\"id + '-textarea'\"\n class=\"gds-textarea gds-field\"\n [ngClass]=\"{ 'no-resize': !!rows }\"\n [class.nggv-field--error]=\"invalid\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.role]=\"role\"\n [attr.rows]=\"rows\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n title=\"\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-textarea'\"\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\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\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 </span>\n\n <ng-container *ngIf=\"hasMaxLength\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host .gds-textarea{padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600)}:host .gds-textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-textarea:focus,:host .gds-textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-textarea{align-items:center;background-color:var(--gds-sys-color-background-primary);color:var(--gds-sys-color-text-primary);display:flex;justify-content:center;resize:vertical}@media screen and (-ms-high-contrast:active){:host .gds-textarea{border:2px solid currentcolor}}:host .gds-textarea:hover{background-color:var(--gds-sys-color-base-100)}:host .gds-textarea:disabled,:host .gds-textarea.disabled,:host .gds-textarea[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .gds-textarea:disabled::placeholder,:host .gds-textarea.disabled::placeholder,:host .gds-textarea[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host label:not(.gds-field-notice):is(label){margin-bottom:0}:host label:not(.gds-field-notice).gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host label:not(.gds-field-notice).gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label:not(.gds-field-notice).gds-form-control:focus,:host label:not(.gds-field-notice).gds-form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-field-notice):not(.gds-form-control){font-weight:500;width:100%;line-height:1.25rem}:host label:not(.gds-field-notice)+input,:host label:not(.gds-field-notice)+textarea,fieldset :host label:not(.gds-field-notice)+div,:host label:not(.gds-field-notice)+.gds-button,:host label:not(.gds-field-notice)+.gds-group-stepper,:host label:not(.gds-field-notice)+.gds-stepper-wrapper,:host label:not(.gds-field-notice)+.gds-group{margin-top:.5rem}:host label:not(.gds-field-notice)+.gds-form-info{margin-bottom:.5rem}:host label+.gds-field,:host label+.nggv-field--locked{margin-top:.5rem}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label--optional{font-weight:400}:host textarea{width:100%;max-width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem}:host textarea.nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .description{margin-bottom:.5rem}:host .error-wrapper{margin-top:.5rem;display:flex}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host .gds-form-item__footer>.form-info--countdown{font-weight:400}:host .no-resize{resize:none}:host .no-resize::-webkit-scrollbar{-webkit-appearance:none}:host .no-resize::-webkit-scrollbar-thumb{border-radius:.5rem}:host.small label:not(.gds-field-notice):not(.form-control){font-size:.875rem;line-height:1rem}:host.small label+textarea{margin-top:.25rem}:host.small textarea{padding:.38rem .5rem;font-size:.875rem}:host.small .error-wrapper,:host.small .form-info{margin-top:.25rem;font-size:.875rem;line-height:1rem}:host.small .gds-form-item__footer:not(:empty){margin-top:0rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "directive", type: i5.CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: ["nggvCharacterCountdown", "nggvCharacterCountdownCurrentLength"] }, { kind: "directive", type: i4.NggCoreElementDirective, selector: "[nggCoreElement]" }] }); }
|
|
7598
7617
|
}
|
|
7599
7618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NggvTextareaComponent, decorators: [{
|
|
7600
7619
|
type: Component,
|
|
7601
|
-
args: [{ selector: 'nggv-textarea', standalone: false, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-textarea'\"\n *transloco=\"let t; read: scope\"\n>\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 {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"description && descriptionIsVisible\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-textarea'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state }}\n </ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n <textarea\n #input\n [id]=\"id + '-textarea'\"\n class=\"gds-field\"\n [ngClass]=\"{ 'no-resize': !!rows }\"\n [class.nggv-field--error]=\"invalid\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.role]=\"role\"\n [attr.rows]=\"rows\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n title=\"\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-textarea'\"\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\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\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 </span>\n\n <ng-container *ngIf=\"hasMaxLength\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--
|
|
7620
|
+
args: [{ selector: 'nggv-textarea', standalone: false, template: "<!-- LABEL -->\n<label\n [id]=\"id + '-label'\"\n class=\"gds-field-label hide-if-empty\"\n [attr.for]=\"id + '-textarea'\"\n *transloco=\"let t; read: scope\"\n>\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 {{ label }}\n <span\n *ngIf=\"optional === true || (required !== true && optional !== false)\"\n class=\"gds-field-label--optional\"\n >\n ({{ t('label.optional') }})\n </span>\n </ng-container>\n </ng-template>\n</label>\n\n<!-- DESCRIPTION -->\n<div class=\"form-info description hide-if-empty\" *ngIf=\"description && descriptionIsVisible\">\n {{ description }}\n</div>\n\n<!-- LOCKED INPUT -->\n<ng-container *ngIf=\"locked\">\n <ng-template\n *ngTemplateOutlet=\"\n lockedTpl || defaultLockedTpl;\n context: { $implicit: state }\n \"\n ></ng-template>\n <ng-template #defaultLockedTpl>\n <div\n [id]=\"id + '-textarea'\"\n class=\"nggv-field--locked\"\n [attr.name]=\"name\"\n [attr.value]=\"state\"\n [attr.role]=\"role\"\n >\n <span *ngIf=\"!state\" class=\"unset-state\">-</span>\n <ng-container *ngIf=\"state\">\n {{ state }}\n </ng-container>\n </div>\n </ng-template>\n</ng-container>\n\n<!-- INPUT FIELD -->\n<ng-container *ngIf=\"!locked\">\n <textarea\n #input\n [id]=\"id + '-textarea'\"\n class=\"gds-textarea gds-field\"\n [ngClass]=\"{ 'no-resize': !!rows }\"\n [class.nggv-field--error]=\"invalid\"\n [attr.name]=\"name\"\n [attr.required]=\"required || null\"\n [disabled]=\"disabled\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [attr.role]=\"role\"\n [attr.rows]=\"rows\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n title=\"\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n ></textarea>\n\n <!-- ERRORS -->\n <div\n class=\"gds-form-item__footer error-wrapper\"\n *transloco=\"let t; read: scope\"\n >\n <span\n class=\"form-info form-info--error\"\n [attr.for]=\"id + '-textarea'\"\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\n <span\n *ngIf=\"error; else errorsRef\"\n [attr.data-thook]=\"thook + '-errorlabel'\"\n >{{ error }}</span\n >\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 </span>\n\n <ng-container *ngIf=\"hasMaxLength\">\n <span\n *nggvCharacterCountdown=\"\n maxlength;\n currentLength: (inputRef?.nativeElement?.value ?? '').length;\n charactersLeft as charactersLeft\n \"\n class=\"form-info form-info--countdown\"\n style=\"text-align: right\"\n >\n {{ charactersLeft }} {{ t('label.maxlength') }}\n </span>\n </ng-container>\n </div>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-sys-color-blue: #41b0ee;--gds-sys-color-dark-blue-1: #0092e1;--gds-sys-color-dark-blue-2: #007ac7;--gds-sys-color-green: #60cd18;--gds-sys-color-dark-green-1: #45b400;--gds-sys-color-dark-green-2: #308800;--gds-sys-color-yellow: #ffc500;--gds-sys-color-dark-yellow-1: #ffb400;--gds-sys-color-dark-yellow-2: #f8a000;--gds-sys-color-text-primary: #333333;--gds-sys-color-text-secondary: #ababab;--gds-sys-color-text-white: #ffffff;--gds-sys-color-text-black: #333333;--gds-sys-color-text-inverted: #ffffff;--gds-sys-color-text-link: #0062bc;--gds-sys-color-text-error: #9f000a;--gds-sys-color-text-disabled: #adadad;--gds-sys-color-red: #f03529;--gds-sys-color-dark-red-1: #d81a1a;--gds-sys-color-dark-red-2: #bb000c;--gds-sys-color-purple: #673ab6;--gds-sys-color-dark-purple-1: #4f2C99;--gds-sys-color-dark-purple-2: #3f2587;--gds-sys-color-white: #ffffff;--gds-sys-color-black: #000000;--gds-sys-color-background-primary: #ffffff;--gds-sys-color-background-secondary: #eeeeee;--gds-sys-color-base-100: #f8f8f8;--gds-sys-color-base-200: #e9e9e9;--gds-sys-color-base-300: #dedede;--gds-sys-color-base-400: #cecece;--gds-sys-color-base-500: #adadad;--gds-sys-color-base-600: #868686;--gds-sys-color-base-700: #494949;--gds-sys-color-base-800: #333333;--gds-sys-color-base-900: #1a1a1a;--gds-sys-color-hover-10: rgba(255, 255, 255, .1);--gds-sys-color-hover-20: rgba(255, 255, 255, .2)}:host .gds-textarea{padding:.75rem 1rem;border-radius:.25rem;border:solid 1px var(--gds-sys-color-base-600);--border-color: var(--gds-sys-color-base-600)}:host .gds-textarea:focus:not(:focus-visible){box-shadow:none;outline:0}:host .gds-textarea:focus,:host .gds-textarea:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .gds-textarea{align-items:center;background-color:var(--gds-sys-color-background-primary);color:var(--gds-sys-color-text-primary);display:flex;justify-content:center;resize:vertical}@media screen and (-ms-high-contrast:active){:host .gds-textarea{border:2px solid currentcolor}}:host .gds-textarea:hover{background-color:var(--gds-sys-color-base-100)}:host .gds-textarea:disabled,:host .gds-textarea.disabled,:host .gds-textarea[aria-disabled=true]{background:var(--gds-sys-color-base-300)!important;color:var(--gds-sys-color-text-disabled)!important;border-color:var(--gds-sys-color-text-disabled)!important;cursor:not-allowed}:host .gds-textarea:disabled::placeholder,:host .gds-textarea.disabled::placeholder,:host .gds-textarea[aria-disabled=true]::placeholder{color:var(--gds-sys-color-text-disabled)}:host label:not(.gds-field-notice):is(label){margin-bottom:0}:host label:not(.gds-field-notice).gds-form-control{width:fit-content}@supports (-moz-appearance: none){:host label:not(.gds-field-notice).gds-form-control:focus:not(:focus-visible){box-shadow:none;outline:0}:host label:not(.gds-field-notice).gds-form-control:focus,:host label:not(.gds-field-notice).gds-form-control:focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}}:host label:not(.gds-field-notice):not(.gds-form-control){font-weight:500;width:100%;line-height:1.25rem}:host label:not(.gds-field-notice)+input,:host label:not(.gds-field-notice)+textarea,fieldset :host label:not(.gds-field-notice)+div,:host label:not(.gds-field-notice)+.gds-button,:host label:not(.gds-field-notice)+.gds-group-stepper,:host label:not(.gds-field-notice)+.gds-stepper-wrapper,:host label:not(.gds-field-notice)+.gds-group{margin-top:.5rem}:host label:not(.gds-field-notice)+.gds-form-info{margin-bottom:.5rem}:host label+.gds-field,:host label+.nggv-field--locked{margin-top:.5rem}:host .hide-if-empty:empty{display:none}:host .unset-state{padding-left:.5rem}:host .gds-field-label--optional{font-weight:400}:host textarea{width:100%;max-width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem}:host textarea.nggv-field--error{border-bottom:.125rem solid #9f000a!important}:host .description{margin-bottom:.5rem}:host .error-wrapper{margin-top:.5rem;display:flex}:host .form-info{font-size:.875rem;line-height:1.25rem;width:100%}:host .gds-form-item__footer .form-info{font-weight:500}:host .gds-form-item__footer .form-info--error{display:flex;align-items:flex-start;gap:.5em;color:#9f000a}:host .gds-form-item__footer .form-info--error .error-icon{margin-top:.128rem;align-items:center}:host .gds-form-item__footer>.form-info--countdown{font-weight:400}:host .no-resize{resize:none}:host .no-resize::-webkit-scrollbar{-webkit-appearance:none}:host .no-resize::-webkit-scrollbar-thumb{border-radius:.5rem}:host.small label:not(.gds-field-notice):not(.form-control){font-size:.875rem;line-height:1rem}:host.small label+textarea{margin-top:.25rem}:host.small textarea{padding:.38rem .5rem;font-size:.875rem}:host.small .error-wrapper,:host.small .form-info{margin-top:.25rem;font-size:.875rem;line-height:1rem}:host.small .gds-form-item__footer:not(:empty){margin-top:0rem}\n"] }]
|
|
7602
7621
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
7603
7622
|
type: Self
|
|
7604
7623
|
}, {
|
|
@@ -8296,5 +8315,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
|
|
|
8296
8315
|
* Generated bundle index. Do not edit.
|
|
8297
8316
|
*/
|
|
8298
8317
|
|
|
8299
|
-
export { AccountNumberPipe, AlertComponent, AlertType, ButtonStyle, CalendarComponent, CalendarControlComponent, CalendarDateDirective, CalendarMonth, CharacterCountdownDirective, DateControlValueAccessorComponent, DateInputComponent, DatepickerComponent, DropdownUtils, InputMaskFormatPipe, IsDisabledPipe, MatchesPipe, MessageType, NggvAccountNumberPipeModule, NggvAlertModule, NggvBaseControlValueAccessorComponent, NggvBaseControlValueAccessorModule, NggvBreadcrumbsComponent, NggvBreadcrumbsModule, NggvButtonComponent, NggvButtonModule, NggvCardComponent, NggvCardModule, NggvCharacterCountdownDirectiveModule, NggvCheckboxComponent, NggvCheckboxModule, NggvDatepickerModule, NggvDialogComponent, NggvDragDropComponent, NggvDragDropModule, NggvDropdownComponent, NggvDropdownListComponent, NggvDropdownModule, NggvExternalLinkDirective, NggvExternalLinkDirectiveModule, NggvFoldOutComponent, NggvFoldOutOptionDirective, NggvI18nModule, NggvI18nTestModule, NggvInfoCircleComponent, NggvInfoCircleModule, NggvInputComponent, NggvInputMaskDirective, NggvInputMaskModule, NggvInputModule, NggvMissingHandler, NggvModalModule, NggvModule, NggvPaginationModule, NggvRadioComponent, NggvRadioControlRegistry, NggvRadioGroupComponent, NggvRadioModule, NggvSlideOutComponent, NggvSlugPipeModule, NggvTableModule, NggvTabsModule, NggvTextareaComponent, NggvTextareaModule, NggvToastModule, NggvTooltipDirective, NggvTooltipModule, NggvTypeaheadDirective, NggvTypeaheadDropdownListComponent, NggvTypeaheadHighlightComponent, NggvTypeaheadInputComponent, NggvTypeaheadModule, PaginationComponent, SlugPipe, TabDirective, TableAppendableRowsTemplateDirective, TableComponent, TableDirective, TableFooterTemplateDirective, TableTemplateDirective, TabsComponent, ToastComponent, ToastMessageService, TrThookPipe, TranslocoMockInterceptor, TranslocoMockMissingHandler, TranslocoMockPipe, TranslocoMockStrategy, TranslocoMockTranspiler, ValueImpurePipe, ValuePipe, afterClosingHours, bbanPattern, createMask, firstCalendarDate, formatAccountNumber, generateDateMatrix, getDayOffset, getFormatDateMask, getLocaleDateMask, getLocaleDateString, getMonthArray, getSortedWeekDays, getYearArray, ibanPattern, isAfter, isBefore, isValid, match, setDateFormatCharacters, sortWeekDays };
|
|
8318
|
+
export { AccountNumberPipe, AlertComponent, AlertType, ButtonStyle, CalendarComponent, CalendarControlComponent, CalendarDateDirective, CalendarMonth, CharacterCountdownDirective, DateControlValueAccessorComponent, DateInputComponent, DatepickerComponent, DropdownUtils, InputMaskFormatPipe, IsDisabledPipe, MatchesPipe, MessageType, NggvAccountNumberPipeModule, NggvAlertModule, NggvBaseControlValueAccessorComponent, NggvBaseControlValueAccessorModule, NggvBreadcrumbsComponent, NggvBreadcrumbsModule, NggvButtonComponent, NggvButtonModule, NggvCardComponent, NggvCardModule, NggvCharacterCountdownDirectiveModule, NggvCheckboxComponent, NggvCheckboxModule, NggvDatepickerModule, NggvDialogComponent, NggvDragDropComponent, NggvDragDropModule, NggvDropdownComponent, NggvDropdownListComponent, NggvDropdownModule, NggvExternalLinkDirective, NggvExternalLinkDirectiveModule, NggvFoldOutComponent, NggvFoldOutOptionDirective, NggvI18nModule, NggvI18nTestModule, NggvInfoCircleComponent, NggvInfoCircleModule, NggvInputComponent, NggvInputMaskDirective, NggvInputMaskModule, NggvInputModule, NggvMissingHandler, NggvModalModule, NggvModule, NggvPaginationModule, NggvRadioComponent, NggvRadioControlRegistry, NggvRadioGroupComponent, NggvRadioModule, NggvSlideOutComponent, NggvSlugPipeModule, NggvTableModule, NggvTabsModule, NggvTextareaComponent, NggvTextareaModule, NggvToastModule, NggvTooltipDirective, NggvTooltipModule, NggvTypeaheadDirective, NggvTypeaheadDropdownListComponent, NggvTypeaheadHighlightComponent, NggvTypeaheadInputComponent, NggvTypeaheadModule, PaginationComponent, SlugPipe, TabDirective, TableAppendableRowsTemplateDirective, TableComponent, TableDirective, TableFooterTemplateDirective, TableTemplateDirective, TabsComponent, ToastComponent, ToastMessageService, TrThookPipe, TranslocoMockInterceptor, TranslocoMockMissingHandler, TranslocoMockPipe, TranslocoMockStrategy, TranslocoMockTranspiler, ValueImpurePipe, ValuePipe, afterClosingHours, bbanPattern, createMask, firstCalendarDate, formatAccountNumber, generateDateMatrix, getDayOffset, getFormatDateMask, getLocaleDateMask, getLocaleDateString, getMonthArray, getSortedWeekDays, getYearArray, ibanPattern, isAfter, isBefore, isValid, match, setDateFormatCharacters, sortWeekDays, toLocalDate };
|
|
8300
8319
|
//# sourceMappingURL=sebgroup-green-angular-v-angular.mjs.map
|