{"version":3,"file":"novo-elements-elements-dropdown.mjs","sources":["../../../projects/novo-elements/src/elements/dropdown/Dropdown.ts","../../../projects/novo-elements/src/elements/dropdown/Dropdown.module.ts","../../../projects/novo-elements/src/elements/dropdown/novo-elements-elements-dropdown.ts"],"sourcesContent":["// NG2\nimport { ActiveDescendantKeyManager } from '@angular/cdk/a11y';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { hasModifierKey } from '@angular/cdk/keycodes';\nimport {\n AfterContentInit,\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ContentChildren,\n Directive,\n ElementRef,\n EventEmitter,\n HostListener,\n Input,\n OnDestroy,\n OnInit,\n Output,\n QueryList,\n ViewChild,\n} from '@angular/core';\n// Vendor\nimport { merge, of, Subject, Subscription } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n// App\nimport { NovoButtonElement } from 'novo-elements/elements/button';\nimport {\n CanDisableCtor,\n HasOverlayCtor,\n HasTabIndexCtor,\n mixinDisabled,\n mixinOverlay,\n mixinTabIndex,\n NovoOptgroup,\n NovoOption,\n NovoOptionSelectionChange,\n NovoOverlayTemplateComponent,\n _countGroupLabelsBeforeOption,\n _getOptionScrollPosition,\n} from 'novo-elements/elements/common';\nimport { BooleanInput, Key, notify } from 'novo-elements/utils';\n\n@Directive({\n selector: '[dropdownTrigger]',\n host: {\n class: 'novo-dropdown-trigger',\n },\n standalone: false,\n})\nexport class NovoDropDownTrigger {\n constructor(public element: ElementRef) {}\n}\n\n// Create Base Class from Mixins\n// Boilerplate for applying mixins\nclass NovoDropdownBase {\n constructor() {}\n}\nconst NovoDropdownMixins: HasOverlayCtor & CanDisableCtor & HasTabIndexCtor & typeof NovoDropdownBase = mixinOverlay(\n mixinTabIndex(mixinDisabled(NovoDropdownBase), 1),\n);\n\n@Component({\n selector: 'novo-dropdown',\n template: `\n \n \n \n \n
\n \n `,\n styleUrls: ['./Dropdown.scss'],\n host: {\n '[attr.tabIndex]': 'disabled ? -1 : 0',\n },\n standalone: false,\n})\nexport class NovoDropdownElement extends NovoDropdownMixins implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {\n @Input()\n parentScrollSelector: string;\n @Input()\n parentScrollAction: string = 'close';\n @Input()\n containerClass: string;\n @Input()\n side:\n | 'default'\n | 'right'\n | 'above-below'\n | 'right-above-below'\n | 'center'\n | 'bottom'\n | 'bottom-left'\n | 'bottom-right'\n | 'top-left'\n | 'top-right' = 'default';\n @Input()\n scrollStrategy: 'reposition' | 'block' | 'close' = 'reposition';\n\n /**\n * Keep dropdown open after an item is selected\n */\n @Input()\n @BooleanInput()\n keepOpen: boolean = false;\n\n @Input()\n height: number;\n @Input()\n width: number = -1; // Defaults to dynamic width (no hardcoded width value and no host width lookup)\n @Input()\n appendToBody: boolean = false; // Deprecated\n @Output()\n toggled: EventEmitter = new EventEmitter();\n\n @ViewChild(NovoOverlayTemplateComponent)\n overlay: NovoOverlayTemplateComponent;\n\n @ContentChild(NovoButtonElement)\n _button: NovoButtonElement;\n @ContentChild(NovoDropDownTrigger)\n _trigger: NovoDropDownTrigger;\n\n @ContentChildren(NovoOptgroup, { descendants: true })\n optionGroups: QueryList;\n @ContentChildren(NovoOption, { descendants: true })\n options: QueryList;\n @ViewChild('panel')\n panel: ElementRef;\n\n private clickHandler: any;\n private closeHandler: any;\n private _selectedOptionChanges = Subscription.EMPTY;\n /** The Subject to complete all subscriptions when destroyed. */\n private _onDestroy: Subject = new Subject();\n /** The FocusKeyManager which handles focus. */\n private _keyManager: ActiveDescendantKeyManager;\n\n /** Whether the user should be allowed to select multiple options. */\n @Input()\n get multiple(): boolean {\n return this._multiple;\n }\n set multiple(value: boolean) {\n this._multiple = coerceBooleanProperty(value);\n }\n private _multiple: boolean = false;\n\n /** Whether the dropdown should scroll to the active item whenever it is opened. */\n @Input()\n get scrollToActiveItemOnOpen(): boolean {\n return this._scrollToActiveItemOnOpen;\n }\n set scrollToActiveItemOnOpen(value: boolean) {\n this._scrollToActiveItemOnOpen = coerceBooleanProperty(value);\n }\n private _scrollToActiveItemOnOpen: boolean = false;\n\n get button() {\n return this._trigger || this._button;\n }\n\n constructor(public element: ElementRef, private ref: ChangeDetectorRef) {\n super();\n this.clickHandler = this.togglePanel.bind(this);\n this.closeHandler = this.closePanel.bind(this);\n }\n\n public ngOnInit(): void {\n if (this.appendToBody) {\n notify('\\'appendToBody\\' has been deprecated. Please remove this attribute.');\n }\n }\n\n public ngAfterContentInit(): void {\n // Add a click handler to the button to toggle the menu\n this.button.element.nativeElement.addEventListener('click', this.clickHandler);\n this.button.element.nativeElement.tabIndex = -1;\n this.options.changes.pipe(takeUntil(this._onDestroy)).subscribe(() => {\n this._initKeyManager();\n this._watchSelectionEvents();\n });\n this._initKeyManager();\n this._watchSelectionEvents();\n this.focus();\n }\n\n public ngAfterViewInit(): void {\n this._watchPanelEvents();\n }\n\n public ngOnDestroy(): void {\n this._onDestroy.next();\n this._onDestroy.complete();\n // Remove listener\n if (this.button) {\n this.button.element.nativeElement.removeEventListener('click', this.clickHandler);\n }\n }\n\n focus(options?: FocusOptions): void {\n if (!this.disabled) {\n this.element.nativeElement.focus(options);\n }\n }\n\n openPanel(): void {\n super.openPanel()\n if (this.scrollToActiveItemOnOpen) {\n this._scrollOptionIntoView(this.findFirstSelectedOptionIndex(this.options) || 0)\n }\n }\n\n private findFirstSelectedOptionIndex(options: QueryList): number | null {\n return options.toArray().findIndex((option: NovoOption) => {\n return option.selected === true;\n });\n }\n\n\n public set items(items: QueryList) {}\n\n /** Handles all keydown events on the dropdown. */\n @HostListener('keydown', ['$event'])\n _handleKeydown(event: KeyboardEvent): void {\n if (!this.disabled) {\n this.panelOpen ? this._handleOpenKeydown(event) : this._handleClosedKeydown(event);\n }\n }\n\n /** Handles keyboard events while the dropdown is closed. */\n private _handleClosedKeydown(event: KeyboardEvent): void {\n const key = event.key;\n const isArrowKey = key === Key.ArrowDown || key === Key.ArrowUp || key === Key.ArrowLeft || key === Key.ArrowRight;\n const isOpenKey = key === Key.Enter || key === Key.Space;\n const manager = this._keyManager;\n // Open the select on ALT + arrow key to match the native