@sebgroup/green-angular 4.6.2 → 4.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (95) hide show
  1. package/esm2022/src/v-angular/base-control-value-accessor/base-control-value-accessor.component.mjs +9 -9
  2. package/esm2022/src/v-angular/button/button.component.mjs +5 -5
  3. package/esm2022/src/v-angular/character-countdown/character-countdown.directive.mjs +5 -5
  4. package/esm2022/src/v-angular/core/core.globals.mjs +3 -3
  5. package/esm2022/src/v-angular/dropdown/dropdown-list/dropdown-list.component.mjs +4 -4
  6. package/esm2022/src/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.mjs +5 -5
  7. package/esm2022/src/v-angular/dropdown/typeahead/typeahead.directive.mjs +7 -7
  8. package/esm2022/src/v-angular/info-circle/info-circle.component.mjs +3 -3
  9. package/esm2022/src/v-angular/input/input.component.mjs +7 -7
  10. package/esm2022/src/v-angular/input-mask/input-mask-format.pipe.mjs +5 -4
  11. package/esm2022/src/v-angular/input-mask/input-mask.directive.mjs +8 -8
  12. package/esm2022/src/v-angular/modal/dialog/dialog.component.mjs +16 -16
  13. package/esm2022/src/v-angular/modal/fold-out/fold-out.directive.mjs +3 -3
  14. package/esm2022/src/v-angular/modal/modal.globals.mjs +3 -3
  15. package/esm2022/src/v-angular/modal/slide-out/slide-out.component.mjs +15 -15
  16. package/esm2022/src/v-angular/textarea/textarea.component.mjs +4 -3
  17. package/esm2022/src/v-angular/textarea/textarea.module.mjs +5 -4
  18. package/esm2022/src/v-angular/tooltip/tooltip.directive.mjs +13 -13
  19. package/esm2022/v-angular/base-control-value-accessor/base-control-value-accessor.component.mjs +9 -9
  20. package/esm2022/v-angular/button/button.component.mjs +5 -5
  21. package/esm2022/v-angular/character-countdown/character-countdown.directive.mjs +51 -0
  22. package/esm2022/v-angular/character-countdown/character-countdown.module.mjs +18 -0
  23. package/esm2022/v-angular/character-countdown/index.mjs +3 -0
  24. package/esm2022/v-angular/dropdown/dropdown-list/dropdown-list.component.mjs +4 -4
  25. package/esm2022/v-angular/dropdown/typeahead/typeahead-dropdown-list/typeahead-dropdown-list.component.mjs +5 -5
  26. package/esm2022/v-angular/dropdown/typeahead/typeahead.directive.mjs +7 -7
  27. package/esm2022/v-angular/index.mjs +2 -1
  28. package/esm2022/v-angular/info-circle/info-circle.component.mjs +3 -3
  29. package/esm2022/v-angular/input/input.component.mjs +7 -7
  30. package/esm2022/v-angular/input-mask/input-mask-format.pipe.mjs +5 -4
  31. package/esm2022/v-angular/input-mask/input-mask.directive.mjs +8 -8
  32. package/esm2022/v-angular/modal/dialog/dialog.component.mjs +16 -16
  33. package/esm2022/v-angular/modal/fold-out/fold-out.directive.mjs +3 -3
  34. package/esm2022/v-angular/modal/modal.globals.mjs +3 -3
  35. package/esm2022/v-angular/modal/slide-out/slide-out.component.mjs +15 -15
  36. package/esm2022/v-angular/textarea/textarea.component.mjs +4 -3
  37. package/esm2022/v-angular/textarea/textarea.module.mjs +5 -4
  38. package/esm2022/v-angular/tooltip/tooltip.directive.mjs +13 -13
  39. package/esm2022/v-angular/v-angular.module.mjs +5 -1
  40. package/fesm2022/sebgroup-green-angular-src-v-angular-base-control-value-accessor.mjs +8 -8
  41. package/fesm2022/sebgroup-green-angular-src-v-angular-base-control-value-accessor.mjs.map +1 -1
  42. package/fesm2022/sebgroup-green-angular-src-v-angular-button.mjs +4 -4
  43. package/fesm2022/sebgroup-green-angular-src-v-angular-button.mjs.map +1 -1
  44. package/fesm2022/sebgroup-green-angular-src-v-angular-character-countdown.mjs +4 -4
  45. package/fesm2022/sebgroup-green-angular-src-v-angular-character-countdown.mjs.map +1 -1
  46. package/fesm2022/sebgroup-green-angular-src-v-angular-core.mjs +2 -2
  47. package/fesm2022/sebgroup-green-angular-src-v-angular-core.mjs.map +1 -1
  48. package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs +13 -13
  49. package/fesm2022/sebgroup-green-angular-src-v-angular-dropdown.mjs.map +1 -1
  50. package/fesm2022/sebgroup-green-angular-src-v-angular-info-circle.mjs +2 -2
  51. package/fesm2022/sebgroup-green-angular-src-v-angular-info-circle.mjs.map +1 -1
  52. package/fesm2022/sebgroup-green-angular-src-v-angular-input-mask.mjs +11 -10
  53. package/fesm2022/sebgroup-green-angular-src-v-angular-input-mask.mjs.map +1 -1
  54. package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs +6 -6
  55. package/fesm2022/sebgroup-green-angular-src-v-angular-input.mjs.map +1 -1
  56. package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs +33 -33
  57. package/fesm2022/sebgroup-green-angular-src-v-angular-modal.mjs.map +1 -1
  58. package/fesm2022/sebgroup-green-angular-src-v-angular-textarea.mjs +7 -5
  59. package/fesm2022/sebgroup-green-angular-src-v-angular-textarea.mjs.map +1 -1
  60. package/fesm2022/sebgroup-green-angular-src-v-angular-tooltip.mjs +12 -12
  61. package/fesm2022/sebgroup-green-angular-src-v-angular-tooltip.mjs.map +1 -1
  62. package/fesm2022/sebgroup-green-angular-v-angular.mjs +162 -95
  63. package/fesm2022/sebgroup-green-angular-v-angular.mjs.map +1 -1
  64. package/package.json +2 -2
  65. package/src/v-angular/base-control-value-accessor/base-control-value-accessor.component.d.ts +3 -3
  66. package/src/v-angular/button/button.component.d.ts +2 -2
  67. package/src/v-angular/character-countdown/character-countdown.directive.d.ts +1 -1
  68. package/src/v-angular/core/core.globals.d.ts +1 -1
  69. package/src/v-angular/dropdown/typeahead/typeahead.directive.d.ts +2 -2
  70. package/src/v-angular/input/input.component.d.ts +3 -3
  71. package/src/v-angular/input-mask/input-mask-format.pipe.d.ts +1 -1
  72. package/src/v-angular/input-mask/input-mask.directive.d.ts +2 -2
  73. package/src/v-angular/modal/dialog/dialog.component.d.ts +5 -5
  74. package/src/v-angular/modal/fold-out/fold-out.directive.d.ts +1 -1
  75. package/src/v-angular/modal/modal.globals.d.ts +1 -1
  76. package/src/v-angular/modal/slide-out/slide-out.component.d.ts +6 -6
  77. package/src/v-angular/textarea/textarea.module.d.ts +2 -1
  78. package/src/v-angular/tooltip/tooltip.directive.d.ts +4 -4
  79. package/v-angular/base-control-value-accessor/base-control-value-accessor.component.d.ts +3 -3
  80. package/v-angular/button/button.component.d.ts +2 -2
  81. package/v-angular/character-countdown/character-countdown.directive.d.ts +17 -0
  82. package/v-angular/character-countdown/character-countdown.module.d.ts +8 -0
  83. package/v-angular/character-countdown/index.d.ts +2 -0
  84. package/v-angular/dropdown/typeahead/typeahead.directive.d.ts +2 -2
  85. package/v-angular/index.d.ts +1 -0
  86. package/v-angular/input/input.component.d.ts +3 -3
  87. package/v-angular/input-mask/input-mask-format.pipe.d.ts +1 -1
  88. package/v-angular/input-mask/input-mask.directive.d.ts +2 -2
  89. package/v-angular/modal/dialog/dialog.component.d.ts +5 -5
  90. package/v-angular/modal/fold-out/fold-out.directive.d.ts +1 -1
  91. package/v-angular/modal/modal.globals.d.ts +1 -1
  92. package/v-angular/modal/slide-out/slide-out.component.d.ts +6 -6
  93. package/v-angular/textarea/textarea.module.d.ts +2 -1
  94. package/v-angular/tooltip/tooltip.directive.d.ts +4 -4
  95. package/v-angular/v-angular.module.d.ts +13 -12
@@ -36,19 +36,19 @@ class CharacterCountdownDirective {
36
36
  this.context.charactersLeft = this.calculateCharactersLeft(this._maxlength, this._currentLength);
37
37
  }
38
38
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CharacterCountdownDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
39
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CharacterCountdownDirective, selector: "[ngvCharacterCountdown]", inputs: { maxlength: ["ngvCharacterCountdown", "maxlength"], currentLength: ["ngvCharacterCountdownCurrentLength", "currentLength"] }, ngImport: i0 }); }
39
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CharacterCountdownDirective, selector: "[nggvCharacterCountdown]", inputs: { maxlength: ["nggvCharacterCountdown", "maxlength"], currentLength: ["nggvCharacterCountdownCurrentLength", "currentLength"] }, ngImport: i0 }); }
40
40
  }
41
41
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CharacterCountdownDirective, decorators: [{
42
42
  type: Directive,
43
43
  args: [{
44
- selector: '[ngvCharacterCountdown]',
44
+ selector: '[nggvCharacterCountdown]',
45
45
  }]
46
46
  }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { maxlength: [{
47
47
  type: Input,
48
- args: ['ngvCharacterCountdown']
48
+ args: ['nggvCharacterCountdown']
49
49
  }], currentLength: [{
50
50
  type: Input,
51
- args: ['ngvCharacterCountdownCurrentLength']
51
+ args: ['nggvCharacterCountdownCurrentLength']
52
52
  }] } });
53
53
 
54
54
  class NggCharacterCountdownDirectiveModule {
@@ -1 +1 @@
1
- {"version":3,"file":"sebgroup-green-angular-src-v-angular-character-countdown.mjs","sources":["../../../../libs/angular/src/v-angular/character-countdown/character-countdown.directive.ts","../../../../libs/angular/src/v-angular/character-countdown/character-countdown.module.ts","../../../../libs/angular/src/v-angular/character-countdown/sebgroup-green-angular-src-v-angular-character-countdown.ts"],"sourcesContent":["import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'\n\n@Directive({\n selector: '[ngvCharacterCountdown]',\n})\nexport class CharacterCountdownDirective {\n @Input('ngvCharacterCountdown')\n set maxlength(value: number | undefined) {\n if (!!value && !Number.isNaN(value)) {\n this._maxlength = value\n this.updateContext()\n if (!this.isViewCreated) {\n this.viewContainerRef.createEmbeddedView(this.templateRef, this.context)\n this.isViewCreated = true\n }\n } else {\n if (this.isViewCreated) {\n this.viewContainerRef.clear()\n this.isViewCreated = false\n }\n }\n }\n\n @Input('ngvCharacterCountdownCurrentLength')\n set currentLength(value: number) {\n this._currentLength = value ?? 0\n this.updateContext()\n }\n\n private _maxlength: number = Number.MAX_SAFE_INTEGER\n private _currentLength = 0\n private isViewCreated = false\n private context = { charactersLeft: 0 }\n\n constructor(\n private readonly viewContainerRef: ViewContainerRef,\n private readonly templateRef: TemplateRef<any>,\n ) {}\n\n updateContext() {\n this.context.charactersLeft = this.calculateCharactersLeft(\n this._maxlength,\n this._currentLength,\n )\n }\n\n calculateCharactersLeft = (max: number, current: number): number =>\n max - current\n}\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\n\nimport { CharacterCountdownDirective } from './character-countdown.directive'\n\n@NgModule({\n declarations: [CharacterCountdownDirective],\n imports: [CommonModule],\n exports: [CharacterCountdownDirective],\n})\nexport class NggCharacterCountdownDirectiveModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"sebgroup-green-angular-src-v-angular-character-countdown.mjs","sources":["../../../../libs/angular/src/v-angular/character-countdown/character-countdown.directive.ts","../../../../libs/angular/src/v-angular/character-countdown/character-countdown.module.ts","../../../../libs/angular/src/v-angular/character-countdown/sebgroup-green-angular-src-v-angular-character-countdown.ts"],"sourcesContent":["import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'\n\n@Directive({\n selector: '[nggvCharacterCountdown]',\n})\nexport class CharacterCountdownDirective {\n @Input('nggvCharacterCountdown')\n set maxlength(value: number | undefined) {\n if (!!value && !Number.isNaN(value)) {\n this._maxlength = value\n this.updateContext()\n if (!this.isViewCreated) {\n this.viewContainerRef.createEmbeddedView(this.templateRef, this.context)\n this.isViewCreated = true\n }\n } else {\n if (this.isViewCreated) {\n this.viewContainerRef.clear()\n this.isViewCreated = false\n }\n }\n }\n\n @Input('nggvCharacterCountdownCurrentLength')\n set currentLength(value: number) {\n this._currentLength = value ?? 0\n this.updateContext()\n }\n\n private _maxlength: number = Number.MAX_SAFE_INTEGER\n private _currentLength = 0\n private isViewCreated = false\n private context = { charactersLeft: 0 }\n\n constructor(\n private readonly viewContainerRef: ViewContainerRef,\n private readonly templateRef: TemplateRef<any>,\n ) {}\n\n updateContext() {\n this.context.charactersLeft = this.calculateCharactersLeft(\n this._maxlength,\n this._currentLength,\n )\n }\n\n calculateCharactersLeft = (max: number, current: number): number =>\n max - current\n}\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\n\nimport { CharacterCountdownDirective } from './character-countdown.directive'\n\n@NgModule({\n declarations: [CharacterCountdownDirective],\n imports: [CommonModule],\n exports: [CharacterCountdownDirective],\n})\nexport class NggCharacterCountdownDirectiveModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -4,8 +4,8 @@ import { Injectable } from '@angular/core';
4
4
  ;
5
5
  (() => {
6
6
  // Make sure there is an incremental ID each component can use
7
- if (typeof window !== 'undefined' && !window.ngv) {
8
- window.ngv = {
7
+ if (typeof window !== 'undefined' && !window.nggv) {
8
+ window.nggv = {
9
9
  ids: { default: -1 },
10
10
  nextId(namespace = 'default') {
11
11
  let id = this.ids[namespace] || 0;
@@ -1 +1 @@
1
- {"version":3,"file":"sebgroup-green-angular-src-v-angular-core.mjs","sources":["../../../../libs/angular/src/v-angular/core/core.globals.ts","../../../../libs/angular/src/v-angular/core/core.utils.ts","../../../../libs/angular/src/v-angular/core/sebgroup-green-angular-src-v-angular-core.ts"],"sourcesContent":["// We must force tsc to interpret this file as a module, resolves\n// \"Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.\"\nexport {}\n\ndeclare global {\n interface Window {\n /** Counter for unique identifiers */\n ngv: {\n ids: { [namespace: string]: number; default: number }\n nextId: (namespace?: string) => string\n }\n }\n}\n\n;(() => {\n // Make sure there is an incremental ID each component can use\n if (typeof window !== 'undefined' && !window.ngv) {\n window.ngv = {\n ids: { default: -1 },\n nextId(namespace = 'default'): string {\n let id = this.ids[namespace] || 0\n if (typeof this.ids[namespace] === 'number') id++\n this.ids[namespace] = id\n return namespace === 'default'\n ? `nggv-${id}`\n : `nggv-${namespace}-${id}`\n },\n }\n }\n})()\n","import { Injectable } from '@angular/core';\n\nexport interface Option<K, V> {\n key: K;\n label: V;\n disabled?: boolean;\n}\n\nexport interface OptionGroup<T extends Option<any, any>> {\n label: string;\n options: T[];\n disabled?: boolean;\n}\n\nexport type OptionBase<T extends Option<any, any>> = T | OptionGroup<T>;\n\n@Injectable()\nexport class DropdownUtils<K = string | null, V = string, T extends Option<K, V> = Option<K, V>> {\n public flattenOptions(options: OptionBase<T>[] | undefined, mustHaveLabel: boolean): T[] {\n if (!options) return [] as T[];\n return options.reduce((acc, current) => {\n if (this.isGroup(current)) return acc.concat(this.flattenOptions(current.options, mustHaveLabel));\n if (!current.disabled && !(mustHaveLabel && !current.label)) acc.push(current); // skip disabled\n return acc;\n }, [] as T[]);\n }\n\n /**\n * Returns true if argument is an {@link OptionGroup}.\n * @param option the object to check.\n */\n public isGroup(\n option: OptionBase<T>,\n ): option is OptionGroup<T> {\n return 'options' in option;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAcA,CAAC;AAAA,CAAC,MAAK;;IAEL,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;QAChD,MAAM,CAAC,GAAG,GAAG;AACX,YAAA,GAAG,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;YACpB,MAAM,CAAC,SAAS,GAAG,SAAS,EAAA;gBAC1B,IAAI,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;gBACjC,IAAI,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,QAAQ;AAAE,oBAAA,EAAE,EAAE,CAAA;AACjD,gBAAA,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAA;gBACxB,OAAO,SAAS,KAAK,SAAS;sBAC1B,CAAQ,KAAA,EAAA,EAAE,CAAE,CAAA;AACd,sBAAE,CAAQ,KAAA,EAAA,SAAS,CAAI,CAAA,EAAA,EAAE,EAAE,CAAA;aAC9B;SACF,CAAA;AACF,KAAA;AACH,CAAC,GAAG;;MCZS,aAAa,CAAA;IACjB,cAAc,CAAC,OAAoC,EAAE,aAAsB,EAAA;AAChF,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,EAAS,CAAC;QAC/B,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO,KAAI;AACrC,YAAA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;AAAE,gBAAA,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;AAClG,YAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,aAAa,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;AAAE,gBAAA,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAC/E,YAAA,OAAO,GAAG,CAAC;SACZ,EAAE,EAAS,CAAC,CAAC;KACf;AAED;;;AAGG;AACI,IAAA,OAAO,CACZ,MAAqB,EAAA;QAErB,OAAO,SAAS,IAAI,MAAM,CAAC;KAC5B;+GAlBU,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA;mHAAb,aAAa,EAAA,CAAA,CAAA,EAAA;;4FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB,UAAU;;;AChBX;;AAEG;;;;"}
1
+ {"version":3,"file":"sebgroup-green-angular-src-v-angular-core.mjs","sources":["../../../../libs/angular/src/v-angular/core/core.globals.ts","../../../../libs/angular/src/v-angular/core/core.utils.ts","../../../../libs/angular/src/v-angular/core/sebgroup-green-angular-src-v-angular-core.ts"],"sourcesContent":["// We must force tsc to interpret this file as a module, resolves\n// \"Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.\"\nexport {}\n\ndeclare global {\n interface Window {\n /** Counter for unique identifiers */\n nggv: {\n ids: { [namespace: string]: number; default: number }\n nextId: (namespace?: string) => string\n }\n }\n}\n\n;(() => {\n // Make sure there is an incremental ID each component can use\n if (typeof window !== 'undefined' && !window.nggv) {\n window.nggv = {\n ids: { default: -1 },\n nextId(namespace = 'default'): string {\n let id = this.ids[namespace] || 0\n if (typeof this.ids[namespace] === 'number') id++\n this.ids[namespace] = id\n return namespace === 'default'\n ? `nggv-${id}`\n : `nggv-${namespace}-${id}`\n },\n }\n }\n})()\n","import { Injectable } from '@angular/core';\n\nexport interface Option<K, V> {\n key: K;\n label: V;\n disabled?: boolean;\n}\n\nexport interface OptionGroup<T extends Option<any, any>> {\n label: string;\n options: T[];\n disabled?: boolean;\n}\n\nexport type OptionBase<T extends Option<any, any>> = T | OptionGroup<T>;\n\n@Injectable()\nexport class DropdownUtils<K = string | null, V = string, T extends Option<K, V> = Option<K, V>> {\n public flattenOptions(options: OptionBase<T>[] | undefined, mustHaveLabel: boolean): T[] {\n if (!options) return [] as T[];\n return options.reduce((acc, current) => {\n if (this.isGroup(current)) return acc.concat(this.flattenOptions(current.options, mustHaveLabel));\n if (!current.disabled && !(mustHaveLabel && !current.label)) acc.push(current); // skip disabled\n return acc;\n }, [] as T[]);\n }\n\n /**\n * Returns true if argument is an {@link OptionGroup}.\n * @param option the object to check.\n */\n public isGroup(\n option: OptionBase<T>,\n ): option is OptionGroup<T> {\n return 'options' in option;\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAcA,CAAC;AAAA,CAAC,MAAK;;IAEL,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;QACjD,MAAM,CAAC,IAAI,GAAG;AACZ,YAAA,GAAG,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;YACpB,MAAM,CAAC,SAAS,GAAG,SAAS,EAAA;gBAC1B,IAAI,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;gBACjC,IAAI,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,QAAQ;AAAE,oBAAA,EAAE,EAAE,CAAA;AACjD,gBAAA,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAA;gBACxB,OAAO,SAAS,KAAK,SAAS;sBAC1B,CAAQ,KAAA,EAAA,EAAE,CAAE,CAAA;AACd,sBAAE,CAAQ,KAAA,EAAA,SAAS,CAAI,CAAA,EAAA,EAAE,EAAE,CAAA;aAC9B;SACF,CAAA;AACF,KAAA;AACH,CAAC,GAAG;;MCZS,aAAa,CAAA;IACjB,cAAc,CAAC,OAAoC,EAAE,aAAsB,EAAA;AAChF,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,EAAS,CAAC;QAC/B,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO,KAAI;AACrC,YAAA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;AAAE,gBAAA,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;AAClG,YAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,aAAa,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;AAAE,gBAAA,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAC/E,YAAA,OAAO,GAAG,CAAC;SACZ,EAAE,EAAS,CAAC,CAAC;KACf;AAED;;;AAGG;AACI,IAAA,OAAO,CACZ,MAAqB,EAAA;QAErB,OAAO,SAAS,IAAI,MAAM,CAAC;KAC5B;+GAlBU,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA;mHAAb,aAAa,EAAA,CAAA,CAAA,EAAA;;4FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB,UAAU;;;AChBX;;AAEG;;;;"}
@@ -110,7 +110,7 @@ class NgvDropdownListComponent {
110
110
  /** The additional amount to show when option is scrolled into view. */
111
111
  this.scrollOffset = 24;
112
112
  /** Id of the host element and is accessible by the children, automatically generated if not provided. */
113
- this.id = window.ngv?.nextId();
113
+ this.id = window.nggv?.nextId();
114
114
  /** Special property used for selecting DOM elements during automated UI testing. */
115
115
  this.thook = 'dropdown';
116
116
  this.selectedValueChanged = new EventEmitter();
@@ -297,11 +297,11 @@ class NgvDropdownListComponent {
297
297
  }
298
298
  }
299
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 }); }
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
+ 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 [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 #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: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }, { kind: "directive", type: i4.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }] }); }
301
301
  }
302
302
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvDropdownListComponent, decorators: [{
303
303
  type: Component,
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
+ 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 [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 #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"] }]
305
305
  }], ctorParameters: function () { return [{ type: undefined, decorators: [{
306
306
  type: Optional
307
307
  }, {
@@ -737,12 +737,12 @@ class NgvTypeaheadDropdownListComponent extends NgvDropdownListComponent {
737
737
  }
738
738
  /** @Internal Expand the dropdown when input receives focus. If no state, set empty string in input */
739
739
  handleFocusChanges() {
740
- this.hostComponent.ngvFocus
740
+ this.hostComponent.nggvFocus
741
741
  .asObservable()
742
742
  .pipe(takeUntil(this._destroy$))
743
743
  .subscribe(() => {
744
744
  if (!this.state)
745
- this.hostComponent.ngvInput.emit('');
745
+ this.hostComponent.nggvInput.emit('');
746
746
  this.setExpanded(true);
747
747
  this.subscribeToOutsideClickEvent();
748
748
  });
@@ -763,11 +763,11 @@ class NgvTypeaheadDropdownListComponent extends NgvDropdownListComponent {
763
763
  return this.selectedFormatter(value) ?? '';
764
764
  }
765
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 }); }
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
+ 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 [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 #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: "[nggvTooltip]", inputs: ["nggvTooltip", "thook", "placement", "shown", "offset", "resizeThrottle", "maxWidth"], outputs: ["nggvShow", "nggvHide"] }, { kind: "component", type: NgvTypeaheadHighlightComponent, selector: "nggv-typeahead-highlight", inputs: ["textContent", "textToHighlight"] }] }); }
767
767
  }
768
768
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadDropdownListComponent, decorators: [{
769
769
  type: Component,
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
+ 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 [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 #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"] }]
771
771
  }], ctorParameters: function () { return [{ type: undefined, decorators: [{
772
772
  type: SkipSelf
773
773
  }, {
@@ -825,7 +825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
825
825
 
826
826
  class NgvTypeaheadDirective {
827
827
  /** Function that filter the inputvalue */
828
- set ngvTypeahead(value) {
828
+ set nggvTypeahead(value) {
829
829
  this.typeaheadFunction = value;
830
830
  // If inputsubscription already exists, unsubscribe and subscribe again
831
831
  if (this.inputSubscription$) {
@@ -902,7 +902,7 @@ class NgvTypeaheadDirective {
902
902
  this.inputComponent.setInput('selectedFormatter', this.selectedFormatter);
903
903
  this.inputComponent.setInput('resultFormatter', this.resultFormatter);
904
904
  // Listen to value changes
905
- this.inputComponent.instance.ngvInput
905
+ this.inputComponent.instance.nggvInput
906
906
  .pipe(takeUntil(this.onDestroy$))
907
907
  .subscribe((inputValue) => this.inputValue$.next(inputValue));
908
908
  }
@@ -958,12 +958,12 @@ class NgvTypeaheadDirective {
958
958
  return options.map((value) => value?.label ? this.resultFormatter?.(value) : value);
959
959
  }
960
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 }); }
961
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: NgvTypeaheadDirective, isStandalone: true, selector: "nggv-input[nggvTypeahead], nggv-dropdown[nggvTypeahead]", inputs: { nggvTypeahead: "nggvTypeahead", resultFormatter: "resultFormatter", selectedFormatter: "selectedFormatter", allowUnselect: "allowUnselect", unselectLabel: "unselectLabel" }, outputs: { filterPhraseChange: "filterPhraseChange" }, host: { listeners: { "nggvInput": "onNgvInput($event)" } }, ngImport: i0 }); }
962
962
  }
963
963
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvTypeaheadDirective, decorators: [{
964
964
  type: Directive,
965
965
  args: [{
966
- selector: 'nggv-input[ngvTypeahead]',
966
+ selector: 'nggv-input[nggvTypeahead], nggv-dropdown[nggvTypeahead]',
967
967
  standalone: true,
968
968
  }]
969
969
  }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: NgvDropdownComponent, decorators: [{
@@ -974,7 +974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
974
974
  type: Optional
975
975
  }, {
976
976
  type: Host
977
- }] }]; }, propDecorators: { ngvTypeahead: [{
977
+ }] }]; }, propDecorators: { nggvTypeahead: [{
978
978
  type: Input
979
979
  }], resultFormatter: [{
980
980
  type: Input
@@ -988,7 +988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
988
988
  type: Output
989
989
  }], onNgvInput: [{
990
990
  type: HostListener,
991
- args: ['ngvInput', ['$event']]
991
+ args: ['nggvInput', ['$event']]
992
992
  }] } });
993
993
 
994
994
  /**