@sebgroup/green-angular 4.6.0 → 4.6.2
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/index.mjs +1 -19
- package/esm2022/src/v-angular/breadcrumbs/breadcrumbs.component.mjs +3 -3
- package/esm2022/src/v-angular/button/button.component.mjs +3 -3
- package/esm2022/src/v-angular/card/card.component.mjs +3 -3
- package/esm2022/src/v-angular/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/src/v-angular/core/core.globals.mjs +5 -2
- package/esm2022/src/v-angular/dropdown/dropdown-list/dropdown-list.component.mjs +3 -3
- package/esm2022/src/v-angular/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/src/v-angular/dropdown/typeahead/index.mjs +4 -1
- package/esm2022/src/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.mjs +3 -3
- package/esm2022/src/v-angular/dropdown/typeahead/typeahead-highlight/typeahead-highlight.component.mjs +3 -3
- package/esm2022/src/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.component.mjs +3 -3
- package/esm2022/src/v-angular/dropdown/typeahead/typeahead.directive.mjs +177 -0
- package/esm2022/src/v-angular/info-circle/info-circle.component.mjs +3 -3
- package/esm2022/src/v-angular/input/input.component.mjs +3 -3
- package/esm2022/src/v-angular/modal/dialog/dialog.component.mjs +3 -3
- package/esm2022/src/v-angular/modal/fold-out/fold-out.component.mjs +3 -3
- package/esm2022/src/v-angular/modal/modal.globals.mjs +5 -2
- package/esm2022/src/v-angular/modal/slide-out/slide-out.component.mjs +4 -4
- package/esm2022/src/v-angular/radio/radio.component.mjs +3 -3
- package/esm2022/src/v-angular/textarea/textarea.component.mjs +3 -3
- package/esm2022/v-angular/breadcrumbs/breadcrumbs.component.mjs +3 -3
- package/esm2022/v-angular/button/button.component.mjs +3 -3
- package/esm2022/v-angular/card/card.component.mjs +3 -3
- package/esm2022/v-angular/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/v-angular/dropdown/dropdown-list/dropdown-list.component.mjs +3 -3
- package/esm2022/v-angular/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/v-angular/dropdown/typeahead/index.mjs +4 -1
- package/esm2022/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.mjs +3 -3
- package/esm2022/v-angular/dropdown/typeahead/typeahead-highlight/typeahead-highlight.component.mjs +3 -3
- package/esm2022/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.component.mjs +3 -3
- package/esm2022/v-angular/dropdown/typeahead/typeahead.directive.mjs +177 -0
- package/esm2022/v-angular/index.mjs +17 -0
- package/esm2022/v-angular/info-circle/info-circle.component.mjs +3 -3
- package/esm2022/v-angular/input/input.component.mjs +3 -3
- package/esm2022/v-angular/modal/dialog/dialog.component.mjs +3 -3
- package/esm2022/v-angular/modal/fold-out/fold-out.component.mjs +3 -3
- package/esm2022/v-angular/modal/modal.globals.mjs +5 -2
- package/esm2022/v-angular/modal/slide-out/slide-out.component.mjs +4 -4
- package/esm2022/v-angular/radio/radio.component.mjs +3 -3
- package/esm2022/v-angular/sebgroup-green-angular-v-angular.mjs +5 -0
- package/esm2022/v-angular/textarea/textarea.component.mjs +3 -3
- package/esm2022/v-angular/v-angular.module.mjs +76 -0
- package/fesm2022/sebgroup-green-angular-src-v-angular-breadcrumbs.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-breadcrumbs.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-button.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-button.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-card.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-card.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-checkbox.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-checkbox.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-core.mjs +4 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-core.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs +182 -13
- package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-info-circle.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-info-circle.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs +11 -8
- package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-radio.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-radio.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-src-v-angular-textarea.mjs +2 -2
- package/fesm2022/sebgroup-green-angular-src-v-angular-textarea.mjs.map +1 -1
- package/fesm2022/sebgroup-green-angular-v-angular.mjs +3341 -0
- package/fesm2022/sebgroup-green-angular-v-angular.mjs.map +1 -0
- package/fesm2022/sebgroup-green-angular.mjs +13 -3105
- package/fesm2022/sebgroup-green-angular.mjs.map +1 -1
- package/index.d.ts +0 -18
- package/package.json +9 -3
- package/src/v-angular/breadcrumbs/breadcrumbs.component.d.ts +1 -1
- package/src/v-angular/button/button.component.d.ts +1 -1
- package/src/v-angular/card/card.component.d.ts +1 -1
- package/src/v-angular/checkbox/checkbox.component.d.ts +1 -1
- package/src/v-angular/dropdown/dropdown-list/dropdown-list.component.d.ts +1 -1
- package/src/v-angular/dropdown/dropdown.component.d.ts +1 -1
- package/src/v-angular/dropdown/typeahead/index.d.ts +3 -0
- package/src/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.d.ts +1 -1
- package/src/v-angular/dropdown/typeahead/typeahead-highlight/typeahead-highlight.component.d.ts +1 -1
- package/src/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.component.d.ts +1 -1
- package/src/v-angular/dropdown/typeahead/typeahead.directive.d.ts +76 -0
- package/src/v-angular/info-circle/info-circle.component.d.ts +1 -1
- package/src/v-angular/input/input.component.d.ts +1 -1
- package/src/v-angular/modal/dialog/dialog.component.d.ts +1 -1
- package/src/v-angular/modal/fold-out/fold-out.component.d.ts +1 -1
- package/src/v-angular/modal/slide-out/slide-out.component.d.ts +2 -2
- package/src/v-angular/radio/radio.component.d.ts +1 -1
- package/src/v-angular/textarea/textarea.component.d.ts +1 -1
- package/v-angular/breadcrumbs/breadcrumbs.component.d.ts +1 -1
- package/v-angular/button/button.component.d.ts +1 -1
- package/v-angular/card/card.component.d.ts +1 -1
- package/v-angular/checkbox/checkbox.component.d.ts +1 -1
- package/v-angular/dropdown/dropdown-list/dropdown-list.component.d.ts +1 -1
- package/v-angular/dropdown/dropdown.component.d.ts +1 -1
- package/v-angular/dropdown/typeahead/index.d.ts +3 -0
- package/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.d.ts +1 -1
- package/v-angular/dropdown/typeahead/typeahead-highlight/typeahead-highlight.component.d.ts +1 -1
- package/v-angular/dropdown/typeahead/typeahead-input/typeahead-input.component.d.ts +1 -1
- package/v-angular/dropdown/typeahead/typeahead.directive.d.ts +76 -0
- package/v-angular/index.d.ts +16 -0
- package/v-angular/info-circle/info-circle.component.d.ts +1 -1
- package/v-angular/input/input.component.d.ts +1 -1
- package/v-angular/modal/dialog/dialog.component.d.ts +1 -1
- package/v-angular/modal/fold-out/fold-out.component.d.ts +1 -1
- package/v-angular/modal/slide-out/slide-out.component.d.ts +2 -2
- package/v-angular/radio/radio.component.d.ts +1 -1
- package/v-angular/textarea/textarea.component.d.ts +1 -1
- package/v-angular/v-angular.module.d.ts +22 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Input, EventEmitter, Optional, Inject, ViewChildren, HostBinding, Output, HostListener, TemplateRef, Self, ContentChild, SkipSelf, NgModule } from '@angular/core';
|
|
2
|
+
import { Component, Input, EventEmitter, Optional, Inject, ViewChildren, HostBinding, Output, HostListener, TemplateRef, Self, ContentChild, SkipSelf, NgModule, Directive, Host } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/forms';
|
|
4
|
-
import { Subject, fromEvent, takeUntil } from 'rxjs';
|
|
4
|
+
import { Subject, fromEvent, takeUntil, distinctUntilChanged, tap, from, withLatestFrom } from 'rxjs';
|
|
5
5
|
import * as i4 from '@ngneat/transloco';
|
|
6
6
|
import { TRANSLOCO_SCOPE } from '@ngneat/transloco';
|
|
7
7
|
import { NgvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor';
|
|
@@ -12,6 +12,7 @@ import { CommonModule } from '@angular/common';
|
|
|
12
12
|
import scrollIntoView from 'scroll-into-view-if-needed';
|
|
13
13
|
import * as i3 from '@sebgroup/green-angular/src/v-angular/tooltip';
|
|
14
14
|
import { NgvTooltipModule } from '@sebgroup/green-angular/src/v-angular/tooltip';
|
|
15
|
+
import * as i2$1 from '@sebgroup/green-angular/src/v-angular/input';
|
|
15
16
|
import { NgvInputComponent } from '@sebgroup/green-angular/src/v-angular/input';
|
|
16
17
|
import { NgvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n';
|
|
17
18
|
|
|
@@ -86,11 +87,11 @@ class NgvTypeaheadHighlightComponent {
|
|
|
86
87
|
return { start, end };
|
|
87
88
|
}
|
|
88
89
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
89
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadHighlightComponent, selector: "
|
|
90
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: { textContent: "textContent", textToHighlight: "textToHighlight" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!this.match\">{{ textContent }}</ng-container>\n<!-- Note that this is sensitive to line breaks producing extra spacing between the different parts -->\n<ng-container *ngIf=\"!!this.match\">\n {{ prefix || '' }}<span class=\"match\">{{ match }}</span>{{ suffix ||''}}\n</ng-container>", styles: [":host .match{font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
90
91
|
}
|
|
91
92
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadHighlightComponent, decorators: [{
|
|
92
93
|
type: Component,
|
|
93
|
-
args: [{ selector: '
|
|
94
|
+
args: [{ selector: 'nggv-typeahead-highlight', template: "<ng-container *ngIf=\"!this.match\">{{ textContent }}</ng-container>\n<!-- Note that this is sensitive to line breaks producing extra spacing between the different parts -->\n<ng-container *ngIf=\"!!this.match\">\n {{ prefix || '' }}<span class=\"match\">{{ match }}</span>{{ suffix ||''}}\n</ng-container>", styles: [":host .match{font-weight:500}\n"] }]
|
|
94
95
|
}], propDecorators: { textContent: [{
|
|
95
96
|
type: Input
|
|
96
97
|
}], textToHighlight: [{
|
|
@@ -296,11 +297,11 @@ class NgvDropdownListComponent {
|
|
|
296
297
|
}
|
|
297
298
|
}
|
|
298
299
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
299
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvDropdownListComponent, selector: "
|
|
300
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvDropdownListComponent, selector: "nggv-dropdown-list", inputs: { expanded: "expanded", state: "state", scrollOffset: "scrollOffset", optionContentTpl: "optionContentTpl", id: "id", thook: "thook", options: "options", textToHighlight: "textToHighlight" }, outputs: { selectedValueChanged: "selectedValueChanged", closed: "closed" }, host: { listeners: { "document:keydown": "onKeyDown($event)", "document:keyup": "onKeyUp($event)" }, properties: { "attr.id": "this.id", "attr.data-thook": "this.thook" } }, viewQueries: [{ propertyName: "optionRefs", predicate: ["optionRefs"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t; read: scope\">\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 <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n <ul [attr.aria-disabled]=\"item.disabled\">\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 [ngvTooltip]=\"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 ngvToolTip 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 #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</ng-container>\n", styles: [":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}: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;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 .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,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}: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}\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: NgvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }, { kind: "directive", type: i3.NgvTooltipDirective, selector: "[ngvTooltip]", inputs: ["ngvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "maxWidth"], outputs: ["ngvShow", "ngvHide"] }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }] }); }
|
|
300
301
|
}
|
|
301
302
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownListComponent, decorators: [{
|
|
302
303
|
type: Component,
|
|
303
|
-
args: [{ selector: '
|
|
304
|
+
args: [{ selector: 'nggv-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\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 <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n <ul [attr.aria-disabled]=\"item.disabled\">\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 [ngvTooltip]=\"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 ngvToolTip 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 #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</ng-container>\n", styles: [":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}: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;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 .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,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}: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}\n"] }]
|
|
304
305
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
305
306
|
type: Optional
|
|
306
307
|
}, {
|
|
@@ -526,11 +527,11 @@ class NgvDropdownComponent extends NgvBaseControlValueAccessorComponent {
|
|
|
526
527
|
return !('options' in option);
|
|
527
528
|
}
|
|
528
529
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }, { token: i2.DropdownUtils }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
529
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvDropdownComponent, selector: "
|
|
530
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvDropdownComponent, selector: "nggv-dropdown", inputs: { thook: "thook", placeholder: "placeholder", options: "options", scrollOffset: "scrollOffset", allowControlNullishOption: "allowControlNullishOption", textToHighlight: "textToHighlight", selectOnSingleOption: "selectOnSingleOption" }, outputs: { expandedChange: "expandedChange" }, host: { listeners: { "keyup": "onKeyUp($event)" }, properties: { "attr.data-thook": "this.thook" } }, queries: [{ propertyName: "selectedContentTpl", first: true, predicate: ["selectedTpl"], descendants: true, read: TemplateRef }, { propertyName: "optionContentTpl", first: true, predicate: ["optionTpl"], descendants: true, read: TemplateRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label [id]=\"id + '-label'\" class=\"hide-if-empty\" [attr.for]=\"id + '-toggle'\">\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=\"sdv-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\">{{ description }}</div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\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-container>\n\n <!-- INPUT -->\n <ng-container *ngIf=\"!locked\">\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 aria-haspopup=\"listbox\"\n [attr.data-thook]=\"thook + '-toggle'\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-labelledby]=\"id + '-label ' + id + '-toggle'\"\n (click)=\"toggleDropdown()\"\n >\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </button>\n\n <nggv-dropdown-list\n #dropDownList\n [options]=\"options\"\n [scrollOffset]=\"scrollOffset\"\n [state]=\"state\"\n [expanded]=\"expanded\"\n [optionContentTpl]=\"optionContentTpl\"\n [textToHighlight]=\"textToHighlight\"\n (selectedValueChanged)=\"onSelectChange($event)\"\n >\n </nggv-dropdown-list>\n </div>\n <!-- ERRORS -->\n <label\n class=\"sdv-field-notice sdv-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n <ng-template #errorsRef>\n <span *ngIf=\"firstError as error\">\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </label>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\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 label{display:block;font-weight:500;line-height:1.25rem;margin-bottom:.5rem;width:100%}:host .description{margin-bottom:.5rem;line-height:1.25rem;width:100%}:host button{font-weight:500;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199);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-800);--sg-border-color: var(--grey-800);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:inherit;font-weight:400;line-height:1.125;margin-bottom:.5rem;margin-top:.5rem;width:100%}@media screen and (-ms-high-contrast: active){:host button{border:2px solid currentcolor}}:host button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3}:host button[aria-selected=true],:host button:active,:host button.active,:host button.active:hover,:host button:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host button:disabled,:host button.disabled,:host button[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host button:disabled::placeholder,:host button.disabled::placeholder,:host button[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}: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:not(:disabled,.disabled,[aria-disabled]):hover{--background: var(--grey-400);--color: var(--grey-1000);background-color:var(--grey-400);color:var(--grey-1000);border-color:var(--grey-1000)}: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.small{font-size:.875rem}:host button:hover{background:var(--grey-400)}:host .dropdown{position:relative}\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.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: NgvDropdownListComponent, selector: "nggv-dropdown-list", inputs: ["expanded", "state", "scrollOffset", "optionContentTpl", "id", "thook", "options", "textToHighlight"], outputs: ["selectedValueChanged", "closed"] }] }); }
|
|
530
531
|
}
|
|
531
532
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownComponent, decorators: [{
|
|
532
533
|
type: Component,
|
|
533
|
-
args: [{ selector: '
|
|
534
|
+
args: [{ selector: 'nggv-dropdown', template: "<!-- LABEL -->\n<ng-container *transloco=\"let t; read: scope\">\n <label [id]=\"id + '-label'\" class=\"hide-if-empty\" [attr.for]=\"id + '-toggle'\">\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=\"sdv-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\">{{ description }}</div>\n\n <!-- LOCKED INPUT -->\n <ng-container *ngIf=\"locked\">\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-container>\n\n <!-- INPUT -->\n <ng-container *ngIf=\"!locked\">\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 aria-haspopup=\"listbox\"\n [attr.data-thook]=\"thook + '-toggle'\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-labelledby]=\"id + '-label ' + id + '-toggle'\"\n (click)=\"toggleDropdown()\"\n >\n <ng-template\n *ngTemplateOutlet=\"\n selectedContentTpl || defaultSelectedContentTpl;\n context: { $implicit: state }\n \"\n >\n </ng-template>\n </button>\n\n <nggv-dropdown-list\n #dropDownList\n [options]=\"options\"\n [scrollOffset]=\"scrollOffset\"\n [state]=\"state\"\n [expanded]=\"expanded\"\n [optionContentTpl]=\"optionContentTpl\"\n [textToHighlight]=\"textToHighlight\"\n (selectedValueChanged)=\"onSelectChange($event)\"\n >\n </nggv-dropdown-list>\n </div>\n <!-- ERRORS -->\n <label\n class=\"sdv-field-notice sdv-field-notice--error\"\n [attr.for]=\"id + '-input'\"\n *ngIf=\"invalid && (error || ngControl?.invalid)\"\n >\n <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n <ng-template #errorsRef>\n <span *ngIf=\"firstError as error\">\n {{ t('error.field' + error?.code, error?.params) }}\n </span>\n </ng-template>\n </label>\n\n <!-- CHILDREN -->\n <ng-content></ng-content>\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 label{display:block;font-weight:500;line-height:1.25rem;margin-bottom:.5rem;width:100%}:host .description{margin-bottom:.5rem;line-height:1.25rem;width:100%}:host button{font-weight:500;display:inline-flex;justify-content:center;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199);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-800);--sg-border-color: var(--grey-800);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:inherit;font-weight:400;line-height:1.125;margin-bottom:.5rem;margin-top:.5rem;width:100%}@media screen and (-ms-high-contrast: active){:host button{border:2px solid currentcolor}}:host button.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host button:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host button:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3}:host button[aria-selected=true],:host button:active,:host button.active,:host button.active:hover,:host button:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host button:disabled,:host button.disabled,:host button[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host button:disabled::placeholder,:host button.disabled::placeholder,:host button[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}: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:not(:disabled,.disabled,[aria-disabled]):hover{--background: var(--grey-400);--color: var(--grey-1000);background-color:var(--grey-400);color:var(--grey-1000);border-color:var(--grey-1000)}: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.small{font-size:.875rem}:host button:hover{background:var(--grey-400)}:host .dropdown{position:relative}\n"] }]
|
|
534
535
|
}], ctorParameters: function () { return [{ type: i1$1.NgControl, decorators: [{
|
|
535
536
|
type: Self
|
|
536
537
|
}, {
|
|
@@ -668,11 +669,11 @@ class NgvTypeaheadInputComponent extends NgvInputComponent {
|
|
|
668
669
|
}
|
|
669
670
|
}
|
|
670
671
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
671
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadInputComponent, selector: "
|
|
672
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadInputComponent, selector: "nggv-typeahead-input", inputs: { hostComponent: "hostComponent", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter" }, host: { listeners: { "document:keyup": "onKeyUp($event)" } }, usesInheritance: true, ngImport: i0, template: "<ng-container>\n <div class=\"input-wrapper\"\n [ngClass]=\"{ 'expanded': expanded, 'collapsed': !expanded }\"\n [ngStyle]=\"{ 'height.px': buttonHeight }\"\n (click)=\"$event.stopPropagation();\">\n <!-- INPUT FIELD -->\n <div class=\"input-group\">\n <input #input\n [id]=\"id + '-input'\"\n class=\"sdv-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [attr.email]=\"email\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </div>\n </div>\n</ng-container>", styles: [":host{position:absolute;top:0;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.sdv-field{height:100%;width:100%;min-height:unset;margin-left:1px;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
672
673
|
}
|
|
673
674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadInputComponent, decorators: [{
|
|
674
675
|
type: Component,
|
|
675
|
-
args: [{ selector: '
|
|
676
|
+
args: [{ selector: 'nggv-typeahead-input', template: "<ng-container>\n <div class=\"input-wrapper\"\n [ngClass]=\"{ 'expanded': expanded, 'collapsed': !expanded }\"\n [ngStyle]=\"{ 'height.px': buttonHeight }\"\n (click)=\"$event.stopPropagation();\">\n <!-- INPUT FIELD -->\n <div class=\"input-group\">\n <input #input\n [id]=\"id + '-input'\"\n class=\"sdv-field\"\n [attr.type]=\"type\"\n [attr.name]=\"name\"\n [attr.required]=\"required\"\n [attr.email]=\"email\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [attr.maxlength]=\"maxlength\"\n [attr.minlength]=\"minlength\"\n [pattern]=\"pattern\"\n [disabled]=\"disabled\"\n [autocomplete]=\"autocomplete\"\n [autofocus]=\"autofocus\"\n [readOnly]=\"readonly\"\n [attr.role]=\"role\"\n [attr.placeholder]=\"placeholder\"\n [attr.aria-label]=\"description\"\n [value]=\"state\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\" />\n </div>\n </div>\n</ng-container>", styles: [":host{position:absolute;top:0;left:0;width:calc(100% - 2.625em)}:host .input-wrapper{border:none;box-shadow:none}:host .input-wrapper.expanded{display:flex}:host .input-wrapper.expanded .input-group input.sdv-field{height:100%;width:100%;min-height:unset;margin-left:1px;border:none;box-shadow:none}:host .input-wrapper.collapsed{display:none}:host .input-wrapper .input-group{width:100%}\n"] }]
|
|
676
677
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.NgControl, decorators: [{
|
|
677
678
|
type: Self
|
|
678
679
|
}, {
|
|
@@ -762,11 +763,11 @@ class NgvTypeaheadDropdownListComponent extends NgvDropdownListComponent {
|
|
|
762
763
|
return this.selectedFormatter(value) ?? '';
|
|
763
764
|
}
|
|
764
765
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadDropdownListComponent, deps: [{ token: TRANSLOCO_SCOPE, optional: true, skipSelf: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
765
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadDropdownListComponent, selector: "
|
|
766
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadDropdownListComponent, 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 <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 <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n <ul [attr.aria-disabled]=\"item.disabled\">\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 [ngvTooltip]=\"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 ngvToolTip 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 #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</ng-container>\n", styles: [":host{display:flex;width:100%;position:relative}\n", ":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}: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;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 .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,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}: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}\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.NgvTooltipDirective, selector: "[ngvTooltip]", inputs: ["ngvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "maxWidth"], outputs: ["ngvShow", "ngvHide"] }, { kind: "component", type: NgvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }] }); }
|
|
766
767
|
}
|
|
767
768
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadDropdownListComponent, decorators: [{
|
|
768
769
|
type: Component,
|
|
769
|
-
args: [{ selector: '
|
|
770
|
+
args: [{ selector: 'nggv-typeahead-dropdown-list', template: "<ng-container *transloco=\"let t; read: scope\">\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 <div class=\"sdv-list__label\">{{ t(item.label) }}</div>\n <ul [attr.aria-disabled]=\"item.disabled\">\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 [ngvTooltip]=\"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 ngvToolTip 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 #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</ng-container>\n", styles: [":host{display:flex;width:100%;position:relative}\n", ":host{position:absolute;bottom:0;transform:translateY(calc(100% + .5rem));--z-index: var(--sg-z-index-dropdown)}: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;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 .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,:host .gds-dropdown__options__label:focus-visible{background-color:var(--grey-400)}:host .gds-dropdown__options__label:active{background-color:var(--grey-500)}: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}\n"] }]
|
|
770
771
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
771
772
|
type: SkipSelf
|
|
772
773
|
}, {
|
|
@@ -822,9 +823,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
822
823
|
}]
|
|
823
824
|
}] });
|
|
824
825
|
|
|
826
|
+
class NgvTypeaheadDirective {
|
|
827
|
+
/** Function that filter the inputvalue */
|
|
828
|
+
set ngvTypeahead(value) {
|
|
829
|
+
this.typeaheadFunction = value;
|
|
830
|
+
// If inputsubscription already exists, unsubscribe and subscribe again
|
|
831
|
+
if (this.inputSubscription$) {
|
|
832
|
+
this.inputSubscription$?.unsubscribe();
|
|
833
|
+
this.inputSubscription$ = undefined;
|
|
834
|
+
this.handleInputChanges();
|
|
835
|
+
}
|
|
836
|
+
}
|
|
837
|
+
/** Forward text inputs to apply the filter function*/
|
|
838
|
+
onNgvInput(event) {
|
|
839
|
+
this.inputValue$.next(event);
|
|
840
|
+
}
|
|
841
|
+
/** Helper to the determine if the host is nggv-drodpown or nggv-input*/
|
|
842
|
+
get hostIsDropdown() {
|
|
843
|
+
return !!this.hostDropdown;
|
|
844
|
+
}
|
|
845
|
+
/** Predefined options */
|
|
846
|
+
get defaultNullishOption() {
|
|
847
|
+
return { key: null, label: this.unselectLabel || '\u00A0' };
|
|
848
|
+
}
|
|
849
|
+
get emptyOption() {
|
|
850
|
+
return { key: null, label: 'label.nomatchingoptions', disabled: true };
|
|
851
|
+
}
|
|
852
|
+
/** Name of the component. nggv-dropdown if NgvDropdownComponent or nggv-input if NgvInputComponent */
|
|
853
|
+
get localName() {
|
|
854
|
+
return this.element.nativeElement.localName;
|
|
855
|
+
}
|
|
856
|
+
constructor(viewContainerRef, element, hostDropdown, hostInput) {
|
|
857
|
+
this.viewContainerRef = viewContainerRef;
|
|
858
|
+
this.element = element;
|
|
859
|
+
this.hostDropdown = hostDropdown;
|
|
860
|
+
this.hostInput = hostInput;
|
|
861
|
+
/** Allow option to be unselected in the dropdown even if it is required. Defaults to true */
|
|
862
|
+
this.allowUnselect = true;
|
|
863
|
+
/** Emits the entered string the user has written in the input */
|
|
864
|
+
this.filterPhraseChange = new EventEmitter();
|
|
865
|
+
this.inputValue$ = new Subject();
|
|
866
|
+
this.onDestroy$ = new Subject();
|
|
867
|
+
}
|
|
868
|
+
ngOnInit() {
|
|
869
|
+
this.handleInputChanges();
|
|
870
|
+
this.inputValue$.next('');
|
|
871
|
+
if (this.hostIsDropdown)
|
|
872
|
+
this.createInput();
|
|
873
|
+
else
|
|
874
|
+
this.createDropdownList();
|
|
875
|
+
}
|
|
876
|
+
ngOnDestroy() {
|
|
877
|
+
this.onDestroy$.next(true);
|
|
878
|
+
this.onDestroy$.complete();
|
|
879
|
+
}
|
|
880
|
+
/**
|
|
881
|
+
* @internal
|
|
882
|
+
* Core functionality of typeahead. Emits input, then filters the result based on the supplied function
|
|
883
|
+
* If directive is applied on nggv-input, manually show or hide options in the list.
|
|
884
|
+
* If directive is applied on nggv-dropdown, let the dropdown itself choose when to open or close
|
|
885
|
+
*/
|
|
886
|
+
handleInputChanges() {
|
|
887
|
+
this.inputSubscription$ = this.inputValue$
|
|
888
|
+
.pipe(takeUntil(this.onDestroy$), distinctUntilChanged(), tap((inputValue) => this.filterPhraseChange.emit(inputValue)), this.typeaheadFunction ? this.typeaheadFunction : () => from([]), withLatestFrom(this.inputValue$))
|
|
889
|
+
.subscribe(([filteredValues, input]) => this.setOptions(filteredValues, input));
|
|
890
|
+
}
|
|
891
|
+
/**
|
|
892
|
+
* @internal
|
|
893
|
+
* Creates a nggv-input if the host itself is not a text-input
|
|
894
|
+
* Set styles to not display the input when closed
|
|
895
|
+
* Trigger filtering when changes occur in the field
|
|
896
|
+
* */
|
|
897
|
+
createInput() {
|
|
898
|
+
// Create the input component
|
|
899
|
+
this.inputComponent = this.viewContainerRef.createComponent(NgvTypeaheadInputComponent);
|
|
900
|
+
// Forward necessary info to component
|
|
901
|
+
this.inputComponent.setInput('hostComponent', this.hostDropdown);
|
|
902
|
+
this.inputComponent.setInput('selectedFormatter', this.selectedFormatter);
|
|
903
|
+
this.inputComponent.setInput('resultFormatter', this.resultFormatter);
|
|
904
|
+
// Listen to value changes
|
|
905
|
+
this.inputComponent.instance.ngvInput
|
|
906
|
+
.pipe(takeUntil(this.onDestroy$))
|
|
907
|
+
.subscribe((inputValue) => this.inputValue$.next(inputValue));
|
|
908
|
+
}
|
|
909
|
+
/** @internal Creates a nggv-dropdown-list if the host itself is a nggv-input */
|
|
910
|
+
createDropdownList() {
|
|
911
|
+
this.dropdownListComponent = this.viewContainerRef.createComponent(NgvTypeaheadDropdownListComponent);
|
|
912
|
+
this.dropdownListComponent.setInput('hostComponent', this.hostInput);
|
|
913
|
+
}
|
|
914
|
+
/**
|
|
915
|
+
* @internal Sets the options the user can select.
|
|
916
|
+
* If the host is a nggv-dropdown, utilize the dropdown itself to display the options
|
|
917
|
+
* If the host is a nggv-input, use the created nggv-dropdown-list to displaye the options
|
|
918
|
+
* @param filteredValues The options to display in the dropdown
|
|
919
|
+
* @param emptyInput If the input is empty
|
|
920
|
+
*/
|
|
921
|
+
setOptions(filteredValues, input) {
|
|
922
|
+
if (!filteredValues)
|
|
923
|
+
return;
|
|
924
|
+
// Conditionally add empty or nullish option if it's allowed, the input is empty and does not already contain nullish
|
|
925
|
+
const allowNullish = this.allowUnselect &&
|
|
926
|
+
!input &&
|
|
927
|
+
!(Object.keys(filteredValues[0]).includes('key') &&
|
|
928
|
+
filteredValues[0].key == null);
|
|
929
|
+
if (filteredValues.length === 0) {
|
|
930
|
+
filteredValues = [this.emptyOption];
|
|
931
|
+
}
|
|
932
|
+
else if (allowNullish) {
|
|
933
|
+
filteredValues = [this.defaultNullishOption].concat(filteredValues);
|
|
934
|
+
}
|
|
935
|
+
if (this.hostIsDropdown) {
|
|
936
|
+
// Add nullish option when no input is written (or when dropdown is epanded and has a selection)
|
|
937
|
+
this.hostDropdown.allowControlNullishOption = false;
|
|
938
|
+
this.hostDropdown.options = this.formatOptions(filteredValues);
|
|
939
|
+
this.hostDropdown.textToHighlight = `${input || ''}`;
|
|
940
|
+
this.hostDropdown.detectChanges();
|
|
941
|
+
return;
|
|
942
|
+
}
|
|
943
|
+
if (!this.hostIsDropdown) {
|
|
944
|
+
this.dropdownListComponent.setInput('options', this.formatOptions(filteredValues));
|
|
945
|
+
this.dropdownListComponent.setInput('textToHighlight', `${input || ''}`);
|
|
946
|
+
}
|
|
947
|
+
}
|
|
948
|
+
/**
|
|
949
|
+
* @internal Formats the available options to display in the dropdown list
|
|
950
|
+
* @param options The selected value
|
|
951
|
+
* @returns The formatted value
|
|
952
|
+
*/
|
|
953
|
+
formatOptions(options) {
|
|
954
|
+
if (!options)
|
|
955
|
+
return [];
|
|
956
|
+
if (!this.resultFormatter)
|
|
957
|
+
return options;
|
|
958
|
+
return options.map((value) => value?.label ? this.resultFormatter?.(value) : value);
|
|
959
|
+
}
|
|
960
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: NgvDropdownComponent, host: true, optional: true }, { token: i2$1.NgvInputComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
961
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadDirective, isStandalone: true, selector: "nggv-input[ngvTypeahead]", inputs: { ngvTypeahead: "ngvTypeahead", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter", allowUnselect: "allowUnselect", unselectLabel: "unselectLabel" }, outputs: { filterPhraseChange: "filterPhraseChange" }, host: { listeners: { "ngvInput": "onNgvInput($event)" } }, ngImport: i0 }); }
|
|
962
|
+
}
|
|
963
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadDirective, decorators: [{
|
|
964
|
+
type: Directive,
|
|
965
|
+
args: [{
|
|
966
|
+
selector: 'nggv-input[ngvTypeahead]',
|
|
967
|
+
standalone: true,
|
|
968
|
+
}]
|
|
969
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: NgvDropdownComponent, decorators: [{
|
|
970
|
+
type: Optional
|
|
971
|
+
}, {
|
|
972
|
+
type: Host
|
|
973
|
+
}] }, { type: i2$1.NgvInputComponent, decorators: [{
|
|
974
|
+
type: Optional
|
|
975
|
+
}, {
|
|
976
|
+
type: Host
|
|
977
|
+
}] }]; }, propDecorators: { ngvTypeahead: [{
|
|
978
|
+
type: Input
|
|
979
|
+
}], resultFormatter: [{
|
|
980
|
+
type: Input
|
|
981
|
+
}], selectedFormatter: [{
|
|
982
|
+
type: Input
|
|
983
|
+
}], allowUnselect: [{
|
|
984
|
+
type: Input
|
|
985
|
+
}], unselectLabel: [{
|
|
986
|
+
type: Input
|
|
987
|
+
}], filterPhraseChange: [{
|
|
988
|
+
type: Output
|
|
989
|
+
}], onNgvInput: [{
|
|
990
|
+
type: HostListener,
|
|
991
|
+
args: ['ngvInput', ['$event']]
|
|
992
|
+
}] } });
|
|
993
|
+
|
|
825
994
|
/**
|
|
826
995
|
* Generated bundle index. Do not edit.
|
|
827
996
|
*/
|
|
828
997
|
|
|
829
|
-
export { NgvDropdownComponent, NgvDropdownListComponent, NgvDropdownModule, NgvTypeaheadHighlightComponent, NgvTypeaheadInputComponent };
|
|
998
|
+
export { NgvDropdownComponent, NgvDropdownListComponent, NgvDropdownModule, NgvTypeaheadDirective, NgvTypeaheadDropdownListComponent, NgvTypeaheadHighlightComponent, NgvTypeaheadInputComponent, NgvTypeaheadModule };
|
|
830
999
|
//# sourceMappingURL=sebgroup-green-angular-src-v-angular-dropdown.mjs.map
|