@sebgroup/green-angular 6.0.4 → 6.1.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/esm2022/src/v-angular/drag-drop/drag-drop.component.mjs +1 -1
- package/esm2022/src/v-angular/dropdown/dropdown-list/dropdown-list.component.mjs +63 -7
- package/esm2022/src/v-angular/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/src/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.mjs +4 -4
- package/esm2022/src/v-angular/i18n/i18n.json +1 -0
- package/esm2022/src/v-angular/input/input.component.mjs +2 -2
- package/esm2022/src/v-angular/modal/dialog/dialog.component.mjs +9 -3
- package/esm2022/src/v-angular/modal/fold-out/fold-out.component.mjs +7 -3
- package/esm2022/src/v-angular/modal/modal.types.mjs +1 -1
- package/esm2022/src/v-angular/table/table.component.mjs +16 -3
- package/esm2022/src/v-angular/textarea/textarea.component.mjs +2 -2
- package/esm2022/src/v-angular/toast/toast.component.mjs +3 -3
- package/esm2022/v-angular/drag-drop/drag-drop.component.mjs +1 -1
- package/esm2022/v-angular/dropdown/dropdown-list/dropdown-list.component.mjs +63 -7
- package/esm2022/v-angular/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.mjs +4 -4
- package/esm2022/v-angular/i18n/i18n.json +1 -0
- package/esm2022/v-angular/input/input.component.mjs +2 -2
- package/esm2022/v-angular/modal/dialog/dialog.component.mjs +9 -3
- package/esm2022/v-angular/modal/fold-out/fold-out.component.mjs +7 -3
- package/esm2022/v-angular/modal/modal.types.mjs +1 -1
- package/esm2022/v-angular/table/table.component.mjs +16 -3
- package/esm2022/v-angular/textarea/textarea.component.mjs +2 -2
- package/esm2022/v-angular/toast/toast.component.mjs +3 -3
- package/fesm2022/sebgroup-green-angular-src-v-angular-drag-drop.mjs +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-drag-drop.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs +66 -10
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-i18n.mjs +2 -0
- package/fesm2022/sebgroup-green-angular-src-v-angular-i18n.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 +14 -4
- package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-table.mjs +15 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-table.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-src-v-angular-toast.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-toast.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-v-angular.mjs +104 -23
- package/fesm2022/sebgroup-green-angular-v-angular.mjs.map +1 -1
- package/package.json +8 -8
- package/src/v-angular/dropdown/dropdown-list/dropdown-list.component.d.ts +19 -4
- package/src/v-angular/modal/dialog/dialog.component.d.ts +2 -1
- package/src/v-angular/modal/fold-out/fold-out.component.d.ts +3 -1
- package/src/v-angular/modal/modal.types.d.ts +1 -0
- package/src/v-angular/table/table.component.d.ts +6 -1
- package/v-angular/dropdown/dropdown-list/dropdown-list.component.d.ts +19 -4
- package/v-angular/modal/dialog/dialog.component.d.ts +2 -1
- package/v-angular/modal/fold-out/fold-out.component.d.ts +3 -1
- package/v-angular/modal/modal.types.d.ts +1 -0
- package/v-angular/table/table.component.d.ts +6 -1
|
@@ -108,8 +108,13 @@ class NggvDropdownListComponent {
|
|
|
108
108
|
get expanded() {
|
|
109
109
|
return this._expanded;
|
|
110
110
|
}
|
|
111
|
-
|
|
111
|
+
get positionAttr() {
|
|
112
|
+
return this.dropdownPosition;
|
|
113
|
+
}
|
|
114
|
+
constructor(translocoScope, renderer, elRef) {
|
|
112
115
|
this.translocoScope = translocoScope;
|
|
116
|
+
this.renderer = renderer;
|
|
117
|
+
this.elRef = elRef;
|
|
113
118
|
/** The additional amount to show when option is scrolled into view. */
|
|
114
119
|
this.scrollOffset = 24;
|
|
115
120
|
/** Id of the host element and is accessible by the children, automatically generated if not provided. */
|
|
@@ -128,10 +133,17 @@ class NggvDropdownListComponent {
|
|
|
128
133
|
* but not select the current active element with Space.
|
|
129
134
|
*/
|
|
130
135
|
this.selectWithSpace = true;
|
|
136
|
+
/**
|
|
137
|
+
* When true, the dropdown will automatically choose to open above or below the input
|
|
138
|
+
* based on available space in the viewport, and will scale its height to fit if needed.
|
|
139
|
+
*/
|
|
140
|
+
this.dynamicPosition = false;
|
|
131
141
|
this.selectedValueChanged = new EventEmitter();
|
|
132
142
|
this.closed = new EventEmitter();
|
|
133
143
|
/** The current active option based on numeric index. */
|
|
134
144
|
this.activeIndex = -1;
|
|
145
|
+
// Indicates whether the dropdown list should be displayed below ('bottom') or above ('top') the input, based on available space.
|
|
146
|
+
this.dropdownPosition = 'bottom';
|
|
135
147
|
this.dropdownUtils = new DropdownUtils();
|
|
136
148
|
this._expanded = false;
|
|
137
149
|
this.closed$ = new Subject();
|
|
@@ -176,6 +188,9 @@ class NggvDropdownListComponent {
|
|
|
176
188
|
// update expanded state
|
|
177
189
|
this._expanded = expanded;
|
|
178
190
|
if (expanded) {
|
|
191
|
+
if (this.dynamicPosition) {
|
|
192
|
+
this.setDropdownPosition();
|
|
193
|
+
}
|
|
179
194
|
this.refreshSelectedOption();
|
|
180
195
|
this.subscribeToKeyUpEvents();
|
|
181
196
|
this.subscribeToKeyDownEvents();
|
|
@@ -355,18 +370,54 @@ class NggvDropdownListComponent {
|
|
|
355
370
|
}, 0);
|
|
356
371
|
}
|
|
357
372
|
}
|
|
358
|
-
|
|
359
|
-
|
|
373
|
+
/**
|
|
374
|
+
* Calculates available space above and below the dropdown input,
|
|
375
|
+
* sets dropdownPosition ('top' or 'bottom') accordingly,
|
|
376
|
+
* and dynamically sets the max-height of the dropdown list to fit the viewport.
|
|
377
|
+
*/
|
|
378
|
+
setDropdownPosition() {
|
|
379
|
+
const dropdown = this.elRef.nativeElement;
|
|
380
|
+
// dropdown trigger
|
|
381
|
+
const dropdownInput = dropdown.parentElement;
|
|
382
|
+
const dropdownList = dropdown.querySelector('ul[role="listbox"]');
|
|
383
|
+
const rect = dropdownInput.getBoundingClientRect();
|
|
384
|
+
const viewportHeight = window.innerHeight;
|
|
385
|
+
const spaceBelow = viewportHeight - rect.bottom;
|
|
386
|
+
const spaceAbove = rect.top;
|
|
387
|
+
const MARGIN = 10;
|
|
388
|
+
const MIN_HEIGHT = 100;
|
|
389
|
+
const DROPDOWN_MAX_HEIGHT = 500;
|
|
390
|
+
let maxDropdownHeight;
|
|
391
|
+
if (spaceBelow >= DROPDOWN_MAX_HEIGHT) {
|
|
392
|
+
this.dropdownPosition = 'bottom';
|
|
393
|
+
maxDropdownHeight = DROPDOWN_MAX_HEIGHT;
|
|
394
|
+
}
|
|
395
|
+
else if (spaceAbove >= DROPDOWN_MAX_HEIGHT) {
|
|
396
|
+
this.dropdownPosition = 'top';
|
|
397
|
+
maxDropdownHeight = DROPDOWN_MAX_HEIGHT;
|
|
398
|
+
}
|
|
399
|
+
else if (spaceBelow > spaceAbove) {
|
|
400
|
+
this.dropdownPosition = 'bottom';
|
|
401
|
+
maxDropdownHeight = Math.max(spaceBelow - MARGIN, MIN_HEIGHT); // 10px margin, minimum height 100px
|
|
402
|
+
}
|
|
403
|
+
else {
|
|
404
|
+
this.dropdownPosition = 'top';
|
|
405
|
+
maxDropdownHeight = Math.max(spaceAbove - MARGIN, MIN_HEIGHT); // 10px margin, minimum height 100px
|
|
406
|
+
}
|
|
407
|
+
this.renderer.setStyle(dropdownList, 'max-height', `${maxDropdownHeight}px`);
|
|
408
|
+
}
|
|
409
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
410
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NggvDropdownListComponent, 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" }, 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?.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.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.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;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}: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%;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;display: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-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.NggvTooltipDirective, selector: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "tooltipId", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
|
|
360
411
|
}
|
|
361
412
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDropdownListComponent, decorators: [{
|
|
362
413
|
type: Component,
|
|
363
|
-
args: [{ selector: 'nggv-dropdown-list', 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?.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.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.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;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}: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%;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;display: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-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}\n"] }]
|
|
414
|
+
args: [{ selector: 'nggv-dropdown-list', 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?.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.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.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;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}: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%;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;display: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-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"] }]
|
|
364
415
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
365
416
|
type: Optional
|
|
366
417
|
}, {
|
|
367
418
|
type: Inject,
|
|
368
419
|
args: [TRANSLOCO_SCOPE]
|
|
369
|
-
}] }], propDecorators: { expanded: [{
|
|
420
|
+
}] }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { expanded: [{
|
|
370
421
|
type: Input
|
|
371
422
|
}], state: [{
|
|
372
423
|
type: Input
|
|
@@ -389,6 +440,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
389
440
|
args: ['attr.data-thook']
|
|
390
441
|
}, {
|
|
391
442
|
type: Input
|
|
443
|
+
}], positionAttr: [{
|
|
444
|
+
type: HostBinding,
|
|
445
|
+
args: ['attr.data-position']
|
|
392
446
|
}], options: [{
|
|
393
447
|
type: Input
|
|
394
448
|
}], textToHighlight: [{
|
|
@@ -397,6 +451,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
397
451
|
type: Input
|
|
398
452
|
}], selectWithSpace: [{
|
|
399
453
|
type: Input
|
|
454
|
+
}], dynamicPosition: [{
|
|
455
|
+
type: Input
|
|
400
456
|
}], selectedValueChanged: [{
|
|
401
457
|
type: Output
|
|
402
458
|
}], closed: [{
|
|
@@ -611,11 +667,11 @@ class NggvDropdownComponent extends NggvBaseControlValueAccessorComponent {
|
|
|
611
667
|
return !('options' in option);
|
|
612
668
|
}
|
|
613
669
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDropdownComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i2.DropdownUtils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
614
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NggvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", size: "size", placeholder: "placeholder", ariaLabel: "ariaLabel", 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\">\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 (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%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}: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: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-ref-pallet-base100);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-ref-pallet-base600)}: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: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);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%;font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@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 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{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}\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$1.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i4.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"], outputs: ["selectedValueChanged", "closed"] }] }); }
|
|
670
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NggvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", size: "size", placeholder: "placeholder", ariaLabel: "ariaLabel", 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%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}: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: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-ref-pallet-base100);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-ref-pallet-base600)}: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: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);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%;font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@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 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$1.NggCoreElementDirective, selector: "[nggCoreElement]" }, { kind: "directive", type: i4.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"] }] }); }
|
|
615
671
|
}
|
|
616
672
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvDropdownComponent, decorators: [{
|
|
617
673
|
type: Component,
|
|
618
|
-
args: [{ selector: 'nggv-dropdown', 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\">\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 (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%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}: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: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-ref-pallet-base100);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-ref-pallet-base600)}: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: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);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%;font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@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 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{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}\n"] }]
|
|
674
|
+
args: [{ selector: 'nggv-dropdown', 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%);display:flex;flex-direction:column;max-width:100%;position:relative;width:100%;z-index:0;position:initial}: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: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-ref-pallet-base100);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-ref-pallet-base600)}: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: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);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%;font-size:1rem;font-weight:400;line-height:1.125;text-align:left;width:100%}:host button:focus{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@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 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"] }]
|
|
619
675
|
}], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
|
|
620
676
|
type: Self
|
|
621
677
|
}, {
|
|
@@ -675,7 +731,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
675
731
|
// Use dropdownList template and combine stylesheets
|
|
676
732
|
class NggvTypeaheadDropdownListComponent extends NggvDropdownListComponent {
|
|
677
733
|
constructor(translocoScope, renderer2, element) {
|
|
678
|
-
super(translocoScope);
|
|
734
|
+
super(translocoScope, renderer2, element);
|
|
679
735
|
this.translocoScope = translocoScope;
|
|
680
736
|
this.renderer2 = renderer2;
|
|
681
737
|
this.element = element;
|
|
@@ -753,11 +809,11 @@ class NggvTypeaheadDropdownListComponent extends NggvDropdownListComponent {
|
|
|
753
809
|
this.renderer2.setStyle(this.element.nativeElement, 'width', `${this.hostComponent.element.nativeElement.offsetWidth}px`);
|
|
754
810
|
}
|
|
755
811
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTypeaheadDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true, skipSelf: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
756
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NggvTypeaheadDropdownListComponent, 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?.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.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.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;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}: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%;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;display: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-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}\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.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"] }] }); }
|
|
812
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NggvTypeaheadDropdownListComponent, 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?.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.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.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;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}: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%;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;display: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-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.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"] }] }); }
|
|
757
813
|
}
|
|
758
814
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NggvTypeaheadDropdownListComponent, decorators: [{
|
|
759
815
|
type: Component,
|
|
760
|
-
args: [{ selector: 'nggv-typeahead-dropdown-list', 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?.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.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.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;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}: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%;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;display: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-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}\n"] }]
|
|
816
|
+
args: [{ selector: 'nggv-typeahead-dropdown-list', 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?.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.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.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;cursor:pointer}:host ul[role=menu] [role=menuitem]:hover,:host ul[role=menu] [role=menuitem]:focus-visible{background-color:var(--gds-ref-pallet-base200)}:host ul[role=menu] [role=menuitem]:active{background-color:var(--gds-ref-pallet-base300)}:host ul[role=menu] [role=menuitem]:focus{outline-color:#000;outline-offset:-.25rem}: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%;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;display: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-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"] }]
|
|
761
817
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
762
818
|
type: SkipSelf
|
|
763
819
|
}, {
|