carbon-components-angular/fesm2015/carbon-components-angular-dropdown.mjs.map

Next generation components

{"version":3,"file":"carbon-components-angular-dropdown.mjs","sources":["../../src/dropdown/abstract-dropdown-view.class.ts","../../src/dropdown/dropdown.service.ts","../../src/dropdown/dropdown.component.ts","../../src/dropdown/dropdowntools.ts","../../src/dropdown/list/dropdown-list.component.ts","../../src/dropdown/scrollable-list.directive.ts","../../src/dropdown/dropdown.module.ts","../../src/dropdown/carbon-components-angular-dropdown.ts"],"sourcesContent":["import {\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tDirective\n} from \"@angular/core\";\nimport { ListItem } from \"./list-item.interface\";\nimport { Observable } from \"rxjs\";\n\n\n/**\n * A component that intends to be used within `Dropdown` must provide an implementation that extends this base class.\n * It also must provide the base class in the `@Component` meta-data.\n * ex: `providers: [{provide: AbstractDropdownView, useExisting: forwardRef(() => MyDropdownView)}]`\n */\n@Directive({\n\tselector: \"[cdsAbstractDropdownView], [ibmAbstractDropdownView]\"\n})\nexport class AbstractDropdownView {\n\t/**\n\t * The items to be displayed in the list within the `AbstractDropDownView`.\n\t */\n\t@Input() set items(value: Array<ListItem> | Observable<Array<ListItem>>) { }\n\n\tget items(): Array<ListItem> | Observable<Array<ListItem>> { return; }\n\t/**\n\t * Emits selection events to controlling classes\n\t */\n\t@Output() select: EventEmitter<{item: ListItem } | ListItem[]>;\n\t/**\n\t * Event to suggest a blur on the view.\n\t * Emits _after_ the first/last item has been focused.\n\t * ex.\n\t * ArrowUp -> focus first item\n\t * ArrowUp -> emit event\n\t *\n\t * It's recommended that the implementing view include a specific type union of possible blurs\n\t * ex. `@Output() blurIntent = new EventEmitter<\"top\" | \"bottom\">();`\n\t */\n\t@Output() blurIntent: EventEmitter<any>;\n\t/**\n\t * Specifies whether or not the `DropdownList` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\tpublic type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * Specifies the render size of the items within the `AbstractDropdownView`.\n\t */\n\tpublic size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\tpublic listId?: string;\n\t/**\n\t * Returns the `ListItem` that is subsequent to the selected item in the `DropdownList`.\n\t */\n\tgetNextItem(): ListItem { return; }\n\t/**\n\t * Returns a boolean if the currently selected item is preceded by another\n\t */\n\thasNextElement(): boolean { return; }\n\t/**\n\t * Returns the `HTMLElement` for the item that is subsequent to the selected item.\n\t */\n\tgetNextElement(): HTMLElement { return; }\n\t/**\n\t * Returns the `ListItem` that precedes the selected item within `DropdownList`.\n\t */\n\tgetPrevItem(): ListItem { return; }\n\t/**\n\t * Returns a boolean if the currently selected item is followed by another\n\t */\n\thasPrevElement(): boolean { return; }\n\t/**\n\t * Returns the `HTMLElement` for the item that precedes the selected item.\n\t */\n\tgetPrevElement(): HTMLElement { return; }\n\t/**\n\t * Returns the selected leaf level item(s) within the `DropdownList`.\n\t */\n\tgetSelected(): ListItem[] { return; }\n\t/**\n\t * Returns the `ListItem` that is selected within `DropdownList`.\n\t */\n\tgetCurrentItem(): ListItem { return; }\n\t/**\n\t * Returns the `HTMLElement` for the item that is selected within the `DropdownList`.\n\t */\n\tgetCurrentElement(): HTMLElement { return; }\n\t/**\n\t * Guaranteed to return the current items as an Array.\n\t */\n\tgetListItems(): Array<ListItem> { return; }\n\t/**\n\t * Transforms array input list of items to the correct state by updating the selected item(s).\n\t */\n\tpropagateSelected(value: Array<ListItem>): void {}\n\t/**\n\t *\n\t * @param value value to filter the list by\n\t */\n\tfilterBy(value: string): void {}\n\t/**\n\t * Initializes focus in the list\n\t * In most cases this just calls `getCurrentElement().focus()`\n\t */\n\tinitFocus(): void {}\n\t/**\n\t * Subscribe the function passed to an internal observable that will resolve once the items are ready\n\t */\n\tonItemsReady(subcription: () => void): void {}\n\t/**\n\t * Reorder selected items bringing them to the top of the list\n\t */\n\treorderSelected(moveFocus?: boolean): void {}\n}\n","import { Injectable, ElementRef, OnDestroy } from \"@angular/core\";\nimport { PlaceholderService } from \"carbon-components-angular/placeholder\";\nimport { Subscription } from \"rxjs\";\nimport { position } from \"@carbon/utils-position\";\nimport { AnimationFrameService } from \"carbon-components-angular/utils\";\nimport { closestAttr } from \"carbon-components-angular/utils\";\n\nconst defaultOffset = { top: 0, left: 0 };\n\n@Injectable()\nexport class DropdownService implements OnDestroy {\n\tpublic set offset(value: { top?: number, left?: number }) {\n\t\tthis._offset = Object.assign({}, defaultOffset, value);\n\t}\n\n\tpublic get offset() {\n\t\treturn this._offset;\n\t}\n\t/**\n\t * reference to the body appended menu\n\t */\n\tprotected menuInstance: HTMLElement;\n\n\t/**\n\t * Maintains an Event Observable Subscription for the global requestAnimationFrame.\n\t * requestAnimationFrame is tracked only if the `Dropdown` is appended to the body otherwise we don't need it\n\t */\n\tprotected animationFrameSubscription = new Subscription();\n\n\tprotected _offset = defaultOffset;\n\n\tconstructor(\n\t\tprotected placeholderService: PlaceholderService,\n\t\tprotected animationFrameService: AnimationFrameService\n\t) {}\n\n\t/**\n\t * Appends the menu to the body, or a `cds-placeholder` (if defined)\n\t *\n\t * @param parentRef container to position relative to\n\t * @param menuRef menu to be appended to body\n\t * @param classList any extra classes we should wrap the container with\n\t */\n\tappendToBody(parentRef: HTMLElement, menuRef: HTMLElement, classList): HTMLElement {\n\t\t// build the dropdown list container\n\t\tmenuRef.style.display = \"block\";\n\t\tconst dropdownWrapper = document.createElement(\"div\");\n\t\tdropdownWrapper.className = `dropdown ${classList}`;\n\t\tdropdownWrapper.style.width = parentRef.offsetWidth + \"px\";\n\t\tdropdownWrapper.style.position = \"absolute\";\n\t\tdropdownWrapper.appendChild(menuRef);\n\n\t\t// append it to the placeholder\n\t\tif (this.placeholderService.hasPlaceholderRef()) {\n\t\t\tthis.placeholderService.appendElement(dropdownWrapper);\n\t\t\t// or append it directly to the body\n\t\t} else {\n\t\t\tdocument.body.appendChild(dropdownWrapper);\n\t\t}\n\n\t\tthis.menuInstance = dropdownWrapper;\n\n\t\tthis.animationFrameSubscription = this.animationFrameService.tick.subscribe(() => {\n\t\t\tthis.positionDropdown(parentRef, dropdownWrapper);\n\t\t});\n\n\t\t// run one position in sync, so we're less likely to have the view \"jump\" as we focus\n\t\tthis.positionDropdown(parentRef, dropdownWrapper);\n\n\t\treturn dropdownWrapper;\n\t}\n\n\t/**\n\t * Reattach the dropdown menu to the parent container\n\t * @param hostRef container to append to\n\t */\n\tappendToDropdown(hostRef: HTMLElement): HTMLElement {\n\t\t// if the instance is already removed don't try and remove it again\n\t\tif (!this.menuInstance) { return; }\n\t\tconst instance = this.menuInstance;\n\t\tconst menu = instance.firstElementChild as HTMLElement;\n\t\t// clean up the instance\n\t\tthis.menuInstance = null;\n\t\tmenu.style.display = \"none\";\n\t\thostRef.appendChild(menu);\n\t\tthis.animationFrameSubscription.unsubscribe();\n\t\tif (this.placeholderService.hasPlaceholderRef() && this.placeholderService.hasElement(instance)) {\n\t\t\tthis.placeholderService.removeElement(instance);\n\t\t} else if (document.body.contains(instance)) {\n\t\t\tdocument.body.removeChild(instance);\n\t\t}\n\t\treturn instance;\n\t}\n\n\t/**\n\t * position an open dropdown relative to the given parentRef\n\t */\n\tupdatePosition(parentRef) {\n\t\tthis.positionDropdown(parentRef, this.menuInstance);\n\t}\n\n\tngOnDestroy() {\n\t\tthis.animationFrameSubscription.unsubscribe();\n\t}\n\n\tprotected positionDropdown(parentRef, menuRef) {\n\t\tif (!menuRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet leftOffset = 0;\n\n\t\tconst boxMenu = menuRef.querySelector(\".cds--list-box__menu\");\n\n\t\tif (boxMenu) {\n\t\t\t// If the parentRef and boxMenu are in a different left position relative to the\n\t\t\t// window, the the boxMenu position has already been flipped and a check needs to be done\n\t\t\t// to see if it needs to stay flipped.\n\t\t\tif (parentRef.getBoundingClientRect().left !== boxMenu.getBoundingClientRect().left) {\n\t\t\t\t// The getBoundingClientRect().right of the boxMenu if it were hypothetically flipped\n\t\t\t\t// back into the original position before the flip.\n\t\t\t\tconst testBoxMenuRightEdgePos =\n\t\t\t\t\tparentRef.getBoundingClientRect().left - boxMenu.getBoundingClientRect().left + boxMenu.getBoundingClientRect().right;\n\n\t\t\t\tif (testBoxMenuRightEdgePos > (window.innerWidth || document.documentElement.clientWidth)) {\n\t\t\t\t\tleftOffset = parentRef.offsetWidth - boxMenu.offsetWidth;\n\t\t\t\t}\n\t\t\t// If it has not already been flipped, check if it is necessary to flip, ie. if the\n\t\t\t// boxMenu is outside of the right viewPort.\n\t\t\t} else if (boxMenu.getBoundingClientRect().right > (window.innerWidth || document.documentElement.clientWidth)) {\n\t\t\t\tleftOffset = parentRef.offsetWidth - boxMenu.offsetWidth;\n\t\t\t}\n\t\t}\n\n\t\t// If cds-placeholder has a parent with a position(relative|fixed|absolute) account for the parent offset\n\t\tconst closestMenuWithPos = closestAttr(\"position\", [\"relative\", \"fixed\", \"absolute\"], menuRef.parentElement);\n\t\tconst topPos = closestMenuWithPos ? closestMenuWithPos.getBoundingClientRect().top * -1 : this.offset.top;\n\t\tconst leftPos = closestMenuWithPos ? closestMenuWithPos.getBoundingClientRect().left * -1 : this.offset.left + leftOffset;\n\n\t\tlet pos = position.findAbsolute(parentRef, menuRef, \"bottom\");\n\t\tpos = position.addOffset(pos, topPos, leftPos);\n\n\t\tposition.setElement(menuRef, pos);\n\t}\n}\n","import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tContentChild,\n\tOnInit,\n\tViewChild,\n\tAfterContentInit,\n\tHostListener,\n\tOnDestroy,\n\tHostBinding,\n\tTemplateRef,\n\tAfterViewInit\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR, ControlValueAccessor } from \"@angular/forms\";\n\n// Observable import is required here so typescript can compile correctly\nimport {\n\tObservable,\n\tof,\n\tSubscription\n} from \"rxjs\";\n\nimport { AbstractDropdownView } from \"./abstract-dropdown-view.class\";\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { ListItem } from \"./list-item.interface\";\nimport { DropdownService } from \"./dropdown.service\";\nimport { ElementService, getScrollableParents } from \"carbon-components-angular/utils\";\nimport { hasScrollableParents } from \"carbon-components-angular/utils\";\n\n/**\n * Drop-down lists enable users to select one or more items from a list.\n *\n * #### Opening behavior/List DOM placement\n * By default the dropdown will try to figure out the best placement for the dropdown list.\n *\n * If it's not contained within any scrolling elements, it will open inline, if it _is_\n * contained within a scrolling container it will try to open in the body, or an `cds-placeholder`.\n *\n * To control this behavior you can use the `appendInline` input:\n * - `[appendInline]=\"null\"` is the default (auto detection)\n * - `[appendInline]=\"false\"` will always append to the body/`cds-placeholder`\n * - `[appendInline]=\"true\"` will always append inline (next to the dropdown button)\n *\n * Get started with importing the module:\n *\n * ```typescript\n * import { DropdownModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-dropdown--basic)\n */\n@Component({\n\tselector: \"cds-dropdown, ibm-dropdown\",\n\ttemplate: `\n\t<label\n\t\t*ngIf=\"label && !skeleton\"\n\t\t[for]=\"id\"\n\t\tclass=\"cds--label\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--label--disabled': disabled,\n\t\t\t'cds--visually-hidden': hideLabel\n\t\t}\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div\n\t\tclass=\"cds--list-box\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--dropdown': type !== 'multi' && !(skeleton && fluid),\n\t\t\t'cds--multiselect': type === 'multi',\n\t\t\t'cds--multi-select--selected': type === 'multi' && getSelectedCount() > 0,\n\t\t\t'cds--dropdown--light': theme === 'light',\n\t\t\t'cds--list-box--light': theme === 'light',\n\t\t\t'cds--list-box--inline': inline,\n\t\t\t'cds--skeleton': skeleton,\n\t\t\t'cds--dropdown--disabled cds--list-box--disabled': disabled,\n\t\t\t'cds--dropdown--readonly': readonly,\n\t\t\t'cds--dropdown--invalid': invalid,\n\t\t\t'cds--dropdown--warning cds--list-box--warning': warn,\n\t\t\t'cds--dropdown--sm cds--list-box--sm': size === 'sm',\n\t\t\t'cds--dropdown--md cds--list-box--md': size === 'md',\n\t\t\t'cds--dropdown--lg cds--list-box--lg': size === 'lg',\n\t\t\t'cds--list-box--expanded': !menuIsClosed,\n\t\t\t'cds--list-box--invalid': invalid\n\t\t}\"\n\t\t[attr.data-invalid]=\"invalid ? true : null\">\n\t\t<div *ngIf=\"skeleton && fluid\" class=\"cds--list-box__label\"></div>\n\t\t<button\n\t\t\t#dropdownButton\n\t\t\t[id]=\"id\"\n\t\t\ttype=\"button\"\n\t\t\tclass=\"cds--list-box__field\"\n\t\t\t[ngClass]=\"{'a': !menuIsClosed}\"\n\t\t\t[attr.aria-expanded]=\"!menuIsClosed\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\taria-haspopup=\"listbox\"\n\t\t\t(click)=\"disabled || readonly ? $event.stopPropagation() : toggleMenu()\"\n\t\t\t(focus)=\"fluid ? handleFocus($event) : null\"\n\t\t\t(blur)=\"fluid ? handleFocus($event) : onBlur()\"\n\t\t\t[attr.disabled]=\"disabled ? true : null\">\n\t\t\t<div\n\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\t(keydown.enter)=\"clearSelected()\"\n\t\t\t\t*ngIf=\"type === 'multi' && getSelectedCount() > 0\"\n\t\t\t\tclass=\"cds--list-box__selection cds--tag--filter cds--list-box__selection--multi\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[title]=\"clearText\">\n\t\t\t\t{{getSelectedCount()}}\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span *ngIf=\"isRenderString()\" class=\"cds--list-box__label\">{{getDisplayStringValue() | async}}</span>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"!isRenderString()\"\n\t\t\t\t[ngTemplateOutletContext]=\"getRenderTemplateContext()\"\n\t\t\t\t[ngTemplateOutlet]=\"displayValue\">\n\t\t\t</ng-template>\n\t\t\t<span class=\"cds--list-box__menu-icon\">\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t[attr.aria-label]=\"menuButtonLabel\"\n\t\t\t\t\t[ngClass]=\"{'cds--list-box__menu-icon--open': !menuIsClosed }\">\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t</button>\n\t\t<svg\n\t\t\t*ngIf=\"invalid\"\n\t\t\tclass=\"cds--list-box__invalid-icon\"\n\t\t\tcdsIcon=\"warning--filled\"\n\t\t\tsize=\"16\">\n\t\t</svg>\n\t\t<svg\n\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\tsize=\"16\"\n\t\t\tclass=\"cds--list-box__invalid-icon cds--list-box__invalid-icon--warning\">\n\t\t</svg>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--list-box--up': this.dropUp !== null && this.dropUp !== undefined ? dropUp : _dropUp\n\t\t\t}\">\n\t\t\t<ng-content *ngIf=\"!menuIsClosed\"></ng-content>\n\t\t</div>\n\t</div>\n\t<hr *ngIf=\"fluid\" class=\"cds--list-box__divider\" />\n\t<div\n\t\t*ngIf=\"helperText && !invalid && !warn && !skeleton && !fluid\"\n\t\tclass=\"cds--form__helper-text\"\n\t\t[ngClass]=\"{\n\t\t\t'cds--form__helper-text--disabled': disabled\n\t\t}\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{ invalidText }}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t</div>\n\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: Dropdown,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDestroy, ControlValueAccessor {\n\tstatic dropdownCount = 0;\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid--invalid\") get fluidInvalidClass() {\n\t\treturn this.invalid && this.fluid;\n\t}\n\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid--focus\") get fluidFocusClass() {\n\t\treturn this.fluid && this._isFocused && this.menuIsClosed;\n\t}\n\n\tprotected get writtenValue() {\n\t\treturn this._writtenValue;\n\t}\n\n\tprotected set writtenValue(val: any[]) {\n\t\tif (val && val.length === 0) {\n\t\t\tthis.clearSelected();\n\t\t}\n\t\tthis._writtenValue = val;\n\t}\n\n\t@Input() id = `dropdown-${Dropdown.dropdownCount++}`;\n\t/**\n\t * Label for the dropdown.\n\t */\n\t@Input() label: string | TemplateRef<any>;\n\t/**\n\t * Hide label while keeping it accessible for screen readers\n\t */\n\t@Input() hideLabel = false;\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Value displayed if no item is selected.\n\t */\n\t@Input() placeholder = \"\";\n\t/**\n\t * The selected value from the `Dropdown`. Can be a string or template.\n\t */\n\t@Input() displayValue: string | TemplateRef<any> = \"\";\n\t/**\n\t * Sets the optional clear button tooltip text.\n\t */\n\t@Input() clearText: string = this.i18n.get().DROPDOWN.CLEAR;\n\t/**\n\t * Size to render the dropdown field.\n\t */\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Defines whether or not the `Dropdown` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * `light` or `dark` dropdown theme\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\t/**\n\t * Set to `true` to disable the dropdown.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a readonly state.\n\t */\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` for a loading dropdown.\n\t */\n\t@Input() skeleton = false;\n\t/**\n\t * Set to `true` for an inline dropdown.\n\t */\n\t@Input() inline = false;\n\t/**\n\t * Set to `true` for a dropdown without arrow key activation.\n\t */\n\t@Input() disableArrowKeys = false;\n\t/**\n\t * Set to `true` for invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if dropdown is in invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * set to `true` to place the dropdown view inline with the component\n\t */\n\t@Input() appendInline: boolean = null;\n\t/**\n\t * Query string for the element that contains the `Dropdown`.\n\t * Used to trigger closing the dropdown if it scrolls outside of the viewport of the `scrollableContainer`.\n\t */\n\t@Input() scrollableContainer: string;\n\t/**\n\t * Specifies the property to be used as the return value to `ngModel`\n\t */\n\t@Input() itemValueKey: string;\n\t/**\n\t * Specify feedback (mode) of the selection.\n\t * `top`: selected item jumps to top\n\t * `fixed`: selected item stays at it's position\n\t * `top-after-reopen`: selected item jump to top after reopen dropdown\n\t */\n\t@Input() selectionFeedback: \"top\" | \"fixed\" | \"top-after-reopen\" = \"top-after-reopen\";\n\t/**\n\t * Accessible label for the button that opens the dropdown list.\n\t * Defaults to the `DROPDOWN.OPEN` value from the i18n service.\n\t */\n\t@Input() menuButtonLabel = this.i18n.get().DROPDOWN.OPEN;\n\t/**\n\t * Provides the label for the \"# selected\" text.\n\t * Defaults to the `DROPDOWN.SELECTED` value from the i18n service.\n\t */\n\t@Input() selectedLabel = this.i18n.get().DROPDOWN.SELECTED;\n\t/**\n\t * Overrides the automatic dropUp.\n\t */\n\t@Input() dropUp: boolean;\n\t/**\n\t * Emits selection events.\n\t */\n\t@Output() selected: EventEmitter<Object> = new EventEmitter<Object>();\n\t/**\n\t * Emits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter<any>();\n\t/**\n\t * Emits event notifying to other classes that the `Dropdown` has been closed (collapsed).\n\t */\n\t@Output() close: EventEmitter<any> = new EventEmitter<any>();\n\n\t/**\n\t * Maintains a reference to the `AbstractDropdownView` object within the content DOM.\n\t */\n\t@ContentChild(AbstractDropdownView, { static: true }) view: AbstractDropdownView;\n\t/**\n\t * Maintains a reference to the view DOM element of the `Dropdown` button.\n\t */\n\t@ViewChild(\"dropdownButton\", { static: true }) dropdownButton;\n\t/**\n\t * ViewChid of the dropdown view.\n\t */\n\t@ViewChild(\"dropdownMenu\", { static: true }) dropdownMenu;\n\n\t@HostBinding(\"class.cds--dropdown__wrapper\") hostClass = true;\n\n\t@HostBinding(\"class.cds--list-box__wrapper\") hostWrapperClass = true;\n\t/**\n\t * Experimental: enable fluid state\n\t */\n\t@HostBinding(\"class.cds--list-box__wrapper--fluid\") @Input() fluid = false;\n\n\t/**\n\t * Set to `true` if the dropdown is closed (not expanded).\n\t */\n\tmenuIsClosed = true;\n\n\t/**\n\t * controls whether the `drop-up` class is applied\n\t */\n\t_dropUp = false;\n\n\t// .bind creates a new function, so we declare the methods below\n\t// but .bind them up here\n\tnoop = this._noop.bind(this);\n\toutsideClick = this._outsideClick.bind(this);\n\toutsideKey = this._outsideKey.bind(this);\n\tkeyboardNav = this._keyboardNav.bind(this);\n\n\tprotected visibilitySubscription = new Subscription();\n\n\tprotected onTouchedCallback: () => void = this._noop;\n\n\tprotected _isFocused = false;\n\n\t// primarily used to capture and propagate input to `writeValue` before the content is available\n\tprivate _writtenValue: any = [];\n\n\t/**\n\t * Creates an instance of Dropdown.\n\t */\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n,\n\t\tprotected dropdownService: DropdownService,\n\t\tprotected elementService: ElementService) {}\n\n\t/**\n\t * Updates the `type` property in the `@ContentChild`.\n\t * The `type` property specifies whether the `Dropdown` allows single selection or multi selection.\n\t */\n\tngOnInit() {\n\t\tif (this.view) {\n\t\t\tthis.view.type = this.type;\n\t\t}\n\t}\n\n\t/**\n\t * Initializes classes and subscribes to events for single or multi selection.\n\t */\n\tngAfterContentInit() {\n\t\tif (!this.view) {\n\t\t\treturn;\n\t\t}\n\t\tif ((this.writtenValue && this.writtenValue.length) || typeof this.writtenValue === \"number\") {\n\t\t\tthis.writeValue(this.writtenValue);\n\t\t}\n\t\tthis.view.type = this.type;\n\t\tthis.view.size = this.size;\n\n\t\t// function to check if the event is organic (isUpdate === false) or programmatic\n\t\tconst isUpdate = event => event && event.isUpdate;\n\n\t\tthis.view.select.subscribe(event => {\n\t\t\tif (this.type === \"single\" && !isUpdate(event) && !Array.isArray(event)) {\n\t\t\t\tthis.closeMenu();\n\t\t\t\tif (event.item && event.item.selected) {\n\t\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t\tthis.propagateChange(event.item[this.itemValueKey]);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.propagateChange(event.item);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.propagateChange(null);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (this.type === \"multi\" && !isUpdate(event)) {\n\t\t\t\t// if we have a `value` selector and selected items map them appropriately\n\t\t\t\tif (this.itemValueKey && this.view.getSelected()) {\n\t\t\t\t\tconst values = this.view.getSelected().map(item => item[this.itemValueKey]);\n\t\t\t\t\tthis.propagateChange(values);\n\t\t\t\t\t// otherwise just pass up the values from `getSelected`\n\t\t\t\t} else {\n\t\t\t\t\tthis.propagateChange(this.view.getSelected());\n\t\t\t\t}\n\t\t\t}\n\t\t\t// only emit selected for \"organic\" selections\n\t\t\tif (!isUpdate(event)) {\n\t\t\t\tthis.checkForReorder();\n\t\t\t\tthis.selected.emit(event);\n\t\t\t}\n\t\t});\n\t}\n\n\tngAfterViewInit() {\n\t\t// if appendInline is default valued (null) we should:\n\t\t// 1. if there are scrollable parents (not including body) don't append inline\n\t\t//    this should also cover the case where the dropdown is in a modal\n\t\t//    (where we _do_ want to append to the placeholder)\n\t\tif (this.appendInline === null && hasScrollableParents(this.elementRef.nativeElement)) {\n\t\t\tthis.appendInline = false;\n\t\t\t// 2. otherwise we should append inline\n\t\t} else if (this.appendInline === null) {\n\t\t\tthis.appendInline = true;\n\t\t}\n\t\tthis.checkForReorder();\n\t}\n\n\t/**\n\t * Removing the `Dropdown` from the body if it is appended to the body.\n\t */\n\tngOnDestroy() {\n\t\tif (!this.appendInline) {\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t}\n\n\t/**\n\t * Propagates the injected `value`.\n\t */\n\twriteValue(value: any) {\n\t\t// cache the written value so we can use it in `AfterContentInit`\n\t\tthis.writtenValue = value;\n\t\tthis.view.onItemsReady(() => {\n\t\t\t// propagate null/falsey as an array (deselect everything)\n\t\t\tif (!value) {\n\t\t\t\tthis.view.propagateSelected([value]);\n\t\t\t} else if (this.type === \"single\") {\n\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t// clone the specified item and update its state\n\t\t\t\t\tconst newValue = Object.assign({}, this.view.getListItems().find(item => item[this.itemValueKey] === value));\n\t\t\t\t\tnewValue.selected = true;\n\t\t\t\t\tthis.view.propagateSelected([newValue]);\n\t\t\t\t} else {\n\t\t\t\t\t// pass the singular value as an array of ListItem\n\t\t\t\t\tthis.view.propagateSelected([value]);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (this.itemValueKey) {\n\t\t\t\t\t// clone the items and update their state based on the received value array\n\t\t\t\t\t// this way we don't lose any additional metadata that may be passed in via the `items` Input\n\t\t\t\t\tlet newValues = [];\n\t\t\t\t\tfor (const v of value) {\n\t\t\t\t\t\tfor (const item of this.view.getListItems()) {\n\t\t\t\t\t\t\tif (item[this.itemValueKey] === v) {\n\t\t\t\t\t\t\t\tnewValues.push(Object.assign({}, item, { selected: true }));\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tthis.view.propagateSelected(newValues);\n\t\t\t\t} else {\n\t\t\t\t\t// we can safely assume we're passing an array of `ListItem`s\n\t\t\t\t\tthis.view.propagateSelected(value);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.checkForReorder();\n\t\t});\n\t}\n\n\tonBlur() {\n\t\tthis.onTouchedCallback();\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\t/**\n\t * Registering the function injected to control the touch use of the `Dropdown`.\n\t */\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouchedCallback = fn;\n\t}\n\n\t/**\n\t * function passed in by `registerOnChange`\n\t */\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the dropdown.\n\t *\n\t * ex: `this.formGroup.get(\"myDropdown\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the input\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\t/**\n\t * Adds keyboard functionality for navigation, selection and closing of the `Dropdown`.\n\t */\n\t@HostListener(\"keydown\", [\"$event\"])\n\tonKeyDown(event: KeyboardEvent) {\n\t\tif (this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ((event.key === \"Escape\") && !this.menuIsClosed) {\n\t\t\tevent.stopImmediatePropagation();  // don't unintentionally close other widgets that listen for Escape\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeMenu();\n\t\t\tthis.dropdownButton.nativeElement.focus();\n\t\t} else if (this.menuIsClosed && (event.key === \" \" || event.key === \"ArrowDown\" || event.key === \"ArrowUp\")) {\n\t\t\tif (this.disableArrowKeys && (event.key === \"ArrowDown\" || event.key === \"ArrowUp\")) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tevent.preventDefault();\n\t\t\tthis.openMenu();\n\t\t}\n\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && this.dropdownMenu.nativeElement.contains(event.target as Node)) {\n\t\t\tthis.closeMenu();\n\t\t}\n\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && event.shiftKey) {\n\t\t\tthis.closeMenu();\n\t\t}\n\n\t\tif (this.type === \"multi\") { return; }\n\n\t\tif (this.menuIsClosed) {\n\t\t\tthis.closedDropdownNavigation(event);\n\t\t}\n\t}\n\n\tclosedDropdownNavigation(event) {\n\t\tif (event.key === \"ArrowDown\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.view.getCurrentItem().selected = false;\n\t\t\tlet item = this.view.getNextItem();\n\t\t\tif (item) { item.selected = true; }\n\t\t} else if (event.key === \"ArrowUp\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.view.getCurrentItem().selected = false;\n\t\t\tlet item = this.view.getPrevItem();\n\t\t\tif (item) { item.selected = true; }\n\t\t}\n\t}\n\n\t/**\n\t * Returns the display value if there is a selection and displayValue is set,\n\t * if there is just a selection the ListItem content property will be returned,\n\t * otherwise the placeholder will be returned.\n\t */\n\tgetDisplayStringValue(): Observable<string> {\n\t\tif (!this.view || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\t\tlet selected = this.view.getSelected();\n\t\tif (selected.length && (!this.displayValue || !this.isRenderString())) {\n\t\t\tif (this.type === \"multi\") {\n\t\t\t\treturn of(this.placeholder);\n\t\t\t} else {\n\t\t\t\treturn of(selected[0].content);\n\t\t\t}\n\t\t} else if (selected.length && this.isRenderString()) {\n\t\t\treturn of(this.displayValue as string);\n\t\t}\n\t\treturn of(this.placeholder);\n\t}\n\n\tisRenderString(): boolean {\n\t\treturn typeof this.displayValue === \"string\";\n\t}\n\n\tgetRenderTemplateContext() {\n\t\tif (!this.view) {\n\t\t\treturn;\n\t\t}\n\t\tlet selected = this.view.getSelected();\n\t\tif (this.type === \"multi\") {\n\t\t\treturn { items: selected };\n\t\t} else if (selected && selected.length > 0) {\n\t\t\treturn { item: selected[0] }; // this is to be compatible with the dropdown-list template\n\t\t} else {\n\t\t\treturn {};\n\t\t}\n\t}\n\n\tgetSelectedCount(): number {\n\t\tif (this.view.getSelected()) {\n\t\t\treturn this.view.getSelected().length;\n\t\t}\n\t}\n\n\tclearSelected() {\n\t\tif (this.disabled || this.getSelectedCount() === 0) {\n\t\t\treturn;\n\t\t}\n\t\tfor (const item of this.view.getListItems()) {\n\t\t\titem.selected = false;\n\t\t}\n\t\tthis.selected.emit([]);\n\t\tthis.propagateChange([]);\n\t}\n\n\t/**\n\t * Returns `true` if there is a value selected.\n\t */\n\tvalueSelected(): boolean {\n\t\tif (this.view.getSelected()) { return true; }\n\t\treturn false;\n\t}\n\n\t_noop() { }\n\t/**\n\t * Handles clicks outside of the `Dropdown`.\n\t */\n\t_outsideClick(event) {\n\t\tif (!this.elementRef.nativeElement.contains(event.target) &&\n\t\t\t// if we're appendToBody the list isn't within the _elementRef,\n\t\t\t// so we've got to check if our target is possibly in there too.\n\t\t\t!this.dropdownMenu.nativeElement.contains(event.target)) {\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\n\t_outsideKey(event) {\n\t\tif (!this.menuIsClosed && event.key === \"Tab\" && this.dropdownMenu.nativeElement.contains(event.target as Node)) {\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\n\t/**\n\t * Handles keyboard events so users are controlling the `Dropdown` instead of unintentionally controlling outside elements.\n\t */\n\t_keyboardNav(event: KeyboardEvent) {\n\t\tif (event.key === \"Escape\" && !this.menuIsClosed) {\n\t\t\tevent.stopImmediatePropagation();  // don't unintentionally close modal if inside of it\n\t\t}\n\t\tif (event.key === \"Escape\") {\n\t\t\tevent.preventDefault();\n\t\t\tthis.closeMenu();\n\t\t\tthis.dropdownButton.nativeElement.focus();\n\t\t} else if (!this.menuIsClosed && event.key === \"Tab\") {\n\t\t\t// this way focus will start on the next focusable item from the dropdown\n\t\t\t// not the top of the body!\n\t\t\tthis.dropdownButton.nativeElement.focus();\n\t\t\tthis.dropdownButton.nativeElement.dispatchEvent(new KeyboardEvent(\"keydown\", { bubbles: true, cancelable: true, key: \"Tab\" }));\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list appending it to the dropdown parent object instead of the body.\n\t */\n\t_appendToDropdown() {\n\t\tthis.dropdownService.appendToDropdown(this.elementRef.nativeElement);\n\t\tthis.dropdownMenu.nativeElement.removeEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Creates the `Dropdown` list as an element that is appended to the DOM body.\n\t */\n\t_appendToBody() {\n\t\tconst lightClass = this.theme === \"light\" ? \" cds--list-box--light\" : \"\";\n\t\tconst expandedClass = !this.menuIsClosed ? \" cds--list-box--expanded\" : \"\";\n\t\tthis.dropdownService.appendToBody(\n\t\t\tthis.dropdownButton.nativeElement,\n\t\t\tthis.dropdownMenu.nativeElement,\n\t\t\t`${this.elementRef.nativeElement.className}${lightClass}${expandedClass}`);\n\t\tthis.dropdownMenu.nativeElement.addEventListener(\"keydown\", this.keyboardNav, true);\n\t}\n\n\t/**\n\t * Detects whether or not the `Dropdown` list is visible within all scrollable parents.\n\t * This can be overridden by passing in a value to the `dropUp` input.\n\t */\n\t_shouldDropUp() {\n\t\t// check if dropdownMenu exists first.\n\t\tconst menu = this.dropdownMenu && this.dropdownMenu.nativeElement.querySelector(\".cds--list-box__menu\");\n\t\t// check if menu exists first.\n\t\tconst menuRect = menu && menu.getBoundingClientRect();\n\t\tif (menu && menuRect) {\n\t\t\tconst scrollableParents = getScrollableParents(menu);\n\t\t\treturn scrollableParents.reduce((shouldDropUp: boolean, parent: HTMLElement) => {\n\t\t\t\tconst parentRect = parent.getBoundingClientRect();\n\t\t\t\tconst isBelowParent = !(menuRect.bottom <= parentRect.bottom);\n\t\t\t\treturn shouldDropUp || isBelowParent;\n\t\t\t}, false);\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Expands the dropdown menu in the view.\n\t */\n\topenMenu() {\n\t\t// prevents the dropdown from opening when list of items is empty\n\t\tif (this.view.getListItems().length === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._dropUp = false;\n\t\tthis.menuIsClosed = false;\n\n\t\t// move the dropdown list to the body if we're not appending inline\n\t\t// and position it relative to the dropdown wrapper\n\t\tif (!this.appendInline) {\n\t\t\tconst target = this.dropdownButton.nativeElement;\n\t\t\tconst parent = this.elementRef.nativeElement;\n\t\t\tthis.visibilitySubscription = this.elementService\n\t\t\t\t.visibility(target, parent)\n\t\t\t\t.subscribe(value => {\n\t\t\t\t\tif (!value.visible) {\n\t\t\t\t\t\tthis.closeMenu();\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\tthis._appendToBody();\n\t\t}\n\n\t\t// set the dropdown menu to drop up if it's near the bottom of the screen\n\t\t// setTimeout lets us measure after it's visible in the DOM\n\t\tsetTimeout(() => {\n\t\t\tif (this.dropUp === null || this.dropUp === undefined) {\n\t\t\t\tthis._dropUp = this._shouldDropUp();\n\t\t\t}\n\t\t}, 0);\n\n\t\t// we bind noop to document.body.firstElementChild to allow safari to fire events\n\t\t// from document. Then we unbind everything later to keep things light.\n\t\tdocument.body.firstElementChild.addEventListener(\"click\", this.noop, true);\n\t\tdocument.body.firstElementChild.addEventListener(\"keydown\", this.noop, true);\n\t\tdocument.addEventListener(\"click\", this.outsideClick, true);\n\t\tdocument.addEventListener(\"keydown\", this.outsideKey, true);\n\t\tsetTimeout(() => this.view.initFocus(), 0);\n\t}\n\n\t/**\n\t * Collapsing the dropdown menu and removing unnecessary `EventListeners`.\n\t */\n\tcloseMenu() {\n\t\t// return early if the menu is already closed\n\t\tif (this.menuIsClosed) { return; }\n\t\tthis.menuIsClosed = true;\n\t\tthis.checkForReorder();\n\t\tthis.onClose.emit();\n\t\tthis.close.emit();\n\n\t\t// focus the trigger button when we close ...\n\t\tthis.dropdownButton.nativeElement.focus();\n\n\t\t// remove the conditional once this api is settled and part of abstract-dropdown-view.class\n\t\tif (this.view[\"disableScroll\"]) {\n\t\t\tthis.view[\"disableScroll\"]();\n\t\t}\n\n\t\t// move the list back in the component on close\n\t\tif (!this.appendInline) {\n\t\t\tthis.visibilitySubscription.unsubscribe();\n\t\t\tthis._appendToDropdown();\n\t\t}\n\t\tdocument.body.firstElementChild.removeEventListener(\"click\", this.noop, true);\n\t\tdocument.body.firstElementChild.removeEventListener(\"keydown\", this.noop, true);\n\t\tdocument.removeEventListener(\"click\", this.outsideClick, true);\n\t\tdocument.removeEventListener(\"keydown\", this.outsideKey, true);\n\t}\n\n\t/**\n\t * Controls toggling menu states between open/expanded and closed/collapsed.\n\t */\n\ttoggleMenu() {\n\t\tif (this.menuIsClosed) {\n\t\t\tthis.openMenu();\n\t\t} else {\n\t\t\tthis.closeMenu();\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\thandleFocus(event: FocusEvent) {\n\t\tthis._isFocused = event.type === \"focus\";\n\t\tif (event.type === \"blur\") {\n\t\t\tthis.onBlur();\n\t\t}\n\t}\n\n\t/**\n\t * Controls when it's needed to apply the selection feedback\n\t */\n\tprotected checkForReorder() {\n\t\tconst topAfterReopen = this.menuIsClosed && this.selectionFeedback === \"top-after-reopen\";\n\t\tif ((this.type === \"multi\") && (topAfterReopen || this.selectionFeedback === \"top\")) {\n\t\t\tthis.view.reorderSelected();\n\t\t}\n\t}\n}\n","import { Observable, fromEvent } from \"rxjs\";\nimport { debounceTime, map, filter } from \"rxjs/operators\";\n\n/**\n * returns an observable bound to keydown events that\n * filters to a single element where the first letter of\n * it's textContent matches the key pressed\n *\n * @param target element to watch\n * @param elements elements to search\n */\nexport function watchFocusJump(target: HTMLElement, elements): Observable<HTMLElement> {\n\treturn fromEvent(target, \"keydown\")\n\t\t.pipe(\n\t\t\tdebounceTime(150),\n\t\t\tmap((ev: KeyboardEvent) => {\n\t\t\t\tlet el = elements.find((itemEl) =>\n\t\t\t\t\titemEl.textContent.trim().toLowerCase().startsWith(ev.key));\n\t\t\t\tif (el) { return el; }\n\t\t\t}),\n\t\t\tfilter(el => !!el)\n\t\t);\n}\n\n/** bundle of functions to aid in manipulating tree structures */\nexport const treetools = {\n\t/** finds an item in a set of items and returns the item and path to the item as an array */\n\tfind: function(items, itemToFind, path = []) {\n\t\tlet found;\n\t\tfor (let i of items) {\n\t\t\tif (i === itemToFind) {\n\t\t\t\tpath.push(i);\n\t\t\t\tfound = i;\n\t\t\t}\n\t\t\tif (i.items && !found) {\n\t\t\t\tpath.push(i);\n\t\t\t\tfound = this.find(i.items, itemToFind, path).found;\n\t\t\t\tif (!found) { path = []; }\n\t\t\t}\n\t\t}\n\t\treturn {found, path};\n\t}\n};\n","import {\n\tComponent,\n\tInput,\n\tOutput,\n\tOnDestroy,\n\tEventEmitter,\n\tTemplateRef,\n\tAfterViewInit,\n\tViewChild,\n\tElementRef,\n\tViewChildren,\n\tQueryList,\n\tApplicationRef\n} from \"@angular/core\";\nimport { Observable, isObservable, Subscription, of } from \"rxjs\";\nimport { first } from \"rxjs/operators\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { AbstractDropdownView } from \"../abstract-dropdown-view.class\";\nimport { ListItem } from \"../list-item.interface\";\nimport { watchFocusJump } from \"../dropdowntools\";\nimport { ScrollCustomEvent } from \"./scroll-custom-event.interface\";\n\n\n/**\n * ```html\n * <cds-dropdown-list [items]=\"listItems\"></cds-dropdown-list>\n * ```\n * ```typescript\n * listItems = [\n * \t{\n * \t\tcontent: \"item one\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item two\",\n * \t\tselected: false,\n * \t},\n * \t{\n * \t\tcontent: \"item three\",\n * \t\tselected: false\n * \t},\n * \t{\n * \t\tcontent: \"item four\",\n * \t\tselected: false\n * \t}\n * ];\n * ```\n */\n@Component({\n\tselector: \"cds-dropdown-list, ibm-dropdown-list\",\n\ttemplate: `\n\t\t<ul\n\t\t\t#list\n\t\t\t[id]=\"listId\"\n\t\t\trole=\"listbox\"\n\t\t\tclass=\"cds--list-box__menu cds--multi-select\"\n\t\t\t(scroll)=\"emitScroll($event)\"\n\t\t\t(keydown)=\"navigateList($event)\"\n\t\t\ttabindex=\"0\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-activedescendant]=\"highlightedItem\">\n\t\t\t<li\n\t\t\t\trole=\"option\"\n\t\t\t\t*ngFor=\"let item of displayItems; let i = index\"\n\t\t\t\t(click)=\"doClick($event, item)\"\n\t\t\t\tclass=\"cds--list-box__menu-item\"\n\t\t\t\t[attr.aria-selected]=\"item.selected\"\n\t\t\t\t[id]=\"getItemId(i)\"\n\t\t\t\t[attr.tabindex]=\"highlightedItem === getItemId(i) ? 0 : null\"\n\t\t\t\t[attr.title]=\" showTitles ? item.content : null\"\n\t\t\t\t[attr.disabled]=\"item.disabled ? true : null\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'cds--list-box__menu-item--active': item.selected,\n\t\t\t\t\t'cds--list-box__menu-item--highlighted': highlightedItem === getItemId(i)\n\t\t\t\t}\">\n\t\t\t\t<div\n\t\t\t\t\t#listItem\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\tclass=\"cds--list-box__menu-item__option\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t*ngIf=\"!listTpl && type === 'multi'\"\n\t\t\t\t\t\tclass=\"cds--form-item cds--checkbox-wrapper\">\n\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t[attr.data-contained-checkbox-state]=\"item.selected\"\n\t\t\t\t\t\t\tclass=\"cds--checkbox-label\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tclass=\"cds--checkbox\"\n\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t[checked]=\"item.selected\"\n\t\t\t\t\t\t\t\t[disabled]=\"item.disabled\"\n\t\t\t\t\t\t\t\ttabindex=\"-1\">\n\t\t\t\t\t\t\t<span class=\"cds--checkbox-appearance\"></span>\n\t\t\t\t\t\t\t<span class=\"cds--checkbox-label-text\">{{item.content}}</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ng-container *ngIf=\"!listTpl && type === 'single'\">{{item.content}}</ng-container>\n\t\t\t\t\t<svg\n\t\t\t\t\t\t*ngIf=\"!listTpl && type === 'single'\"\n\t\t\t\t\t\tcdsIcon=\"checkmark\"\n\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\tclass=\"cds--list-box__menu-item__selected-icon\">\n\t\t\t\t\t</svg>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"listTpl\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{item: item}\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"listTpl\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t</ul>`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: AbstractDropdownView,\n\t\t\tuseExisting: DropdownList\n\t\t}\n\t]\n})\nexport class DropdownList implements AbstractDropdownView, AfterViewInit, OnDestroy {\n\tstatic listCount = 0;\n\t@Input() ariaLabel = this.i18n.get().DROPDOWN_LIST.LABEL;\n\t/**\n\t * The list items belonging to the `DropdownList`.\n\t */\n\t@Input() set items(value: Array<ListItem> | Observable<Array<ListItem>>) {\n\t\tif (isObservable(value)) {\n\t\t\tif (this._itemsSubscription) {\n\t\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t\t}\n\t\t\tthis._itemsReady = new Observable<boolean>((observer) => {\n\t\t\t\tthis._itemsSubscription = value.subscribe(v => {\n\t\t\t\t\tthis.updateList(v);\n\t\t\t\t\tobserver.next(true);\n\t\t\t\t\tobserver.complete();\n\t\t\t\t});\n\t\t\t});\n\t\t\tthis.onItemsReady(null);\n\t\t} else {\n\t\t\tthis.updateList(value);\n\t\t}\n\t\tthis._originalItems = value;\n\t}\n\n\tget items(): Array<ListItem> | Observable<Array<ListItem>> {\n\t\treturn this._originalItems;\n\t}\n\t/**\n\t * Template to bind to items in the `DropdownList` (optional).\n\t */\n\t@Input() listTpl: string | TemplateRef<any> = null;\n\t/**\n\t * Event to emit selection of a list item within the `DropdownList`.\n\t */\n\t@Output() select: EventEmitter<{ item: ListItem, isUpdate?: boolean } | ListItem[]> = new EventEmitter();\n\t/**\n\t * Event to emit scroll event of a list within the `DropdownList`.\n\t */\n\t@Output() scroll: EventEmitter<ScrollCustomEvent> = new EventEmitter();\n\t/**\n\t * Event to suggest a blur on the view.\n\t * Emits _after_ the first/last item has been focused.\n\t * ex.\n\t * ArrowUp -> focus first item\n\t * ArrowUp -> emit event\n\t *\n\t * When this event fires focus should be placed on some element outside of the list - blurring the list as a result\n\t */\n\t@Output() blurIntent = new EventEmitter<\"top\" | \"bottom\">();\n\t/**\n\t * Maintains a reference to the view DOM element for the unordered list of items within the `DropdownList`.\n\t */\n\t@ViewChild(\"list\", { static: true }) list: ElementRef;\n\t/**\n\t * Defines whether or not the `DropdownList` supports selecting multiple items as opposed to single\n\t * item selection.\n\t */\n\t@Input() type: \"single\" | \"multi\" = \"single\";\n\n\t/**\n\t * Defines whether to show title attribute or not\n\t */\n\t@Input() showTitles = true;\n\n\t/**\n\t * Defines the rendering size of the `DropdownList` input component.\n\t */\n\tpublic size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\tpublic listId = `listbox-${DropdownList.listCount++}`;\n\tpublic highlightedItem = null;\n\t/**\n\t * Holds the list of items that will be displayed in the `DropdownList`.\n\t * It differs from the the complete set of items when filtering is used (but\n\t * it is always a subset of the total items in `DropdownList`).\n\t */\n\tpublic displayItems: Array<ListItem> = [];\n\t/**\n\t * Maintains the index for the selected item within the `DropdownList`.\n\t */\n\tprotected index = -1;\n\t/**\n\t * An array holding the HTML list elements in the view.\n\t */\n\t@ViewChildren(\"listItem\") protected listElementList: QueryList<ElementRef>;\n\t/**\n\t * Observable bound to keydown events to control filtering.\n\t */\n\tprotected focusJump;\n\t/**\n\t * Tracks the current (if any) subscription to the items observable so we can clean up when the input is updated.\n\t */\n\tprotected _itemsSubscription: Subscription;\n\t/**\n\t * Used to retain the original items passed to the setter.\n\t */\n\tprotected _originalItems: Array<ListItem> | Observable<Array<ListItem>>;\n\t/**\n\t * Useful representation of the items, should be accessed via `getListItems`.\n\t */\n\tprotected _items: Array<ListItem> = [];\n\t/**\n\t * Used to wait for items in case they are passed through an observable.\n\t */\n\tprotected _itemsReady: Observable<boolean>;\n\n\t/**\n\t * Creates an instance of `DropdownList`.\n\t */\n\tconstructor(public elementRef: ElementRef, protected i18n: I18n, protected appRef: ApplicationRef) {}\n\n\t/**\n\t * Retrieves array of list items and index of the selected item after view has rendered.\n\t * Additionally, any Observables for the `DropdownList` are initialized.\n\t */\n\tngAfterViewInit() {\n\t\tthis.index = this.getListItems().findIndex(item => item.selected);\n\t\tthis.setupFocusObservable();\n\t\tsetTimeout(() => {\n\t\t\tthis.doEmitSelect(true);\n\t\t});\n\t}\n\n\t/**\n\t * Removes any Observables on destruction of the component.\n\t */\n\tngOnDestroy() {\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tif (this._itemsSubscription) {\n\t\t\tthis._itemsSubscription.unsubscribe();\n\t\t}\n\t}\n\n\tdoEmitSelect(isUpdate = true) {\n\t\tif (this.type === \"single\") {\n\t\t\tthis.select.emit({ item: this._items.find(item => item.selected), isUpdate: isUpdate });\n\t\t} else {\n\t\t\t// abuse javascripts object mutability until we can break the API and switch to\n\t\t\t// { items: [], isUpdate: true }\n\t\t\tconst selected = this.getSelected() || [];\n\t\t\tselected[\"isUpdate\"] = isUpdate;\n\t\t\tthis.select.emit(selected);\n\t\t}\n\t}\n\n\tgetItemId(index: number) {\n\t\treturn `${this.listId}-${index}`;\n\t}\n\n\t/**\n\t * Updates the displayed list of items and then retrieves the most current properties for the `DropdownList` from the DOM.\n\t */\n\tupdateList(items) {\n\t\tthis._items = items.map(item => Object.assign({}, item));\n\t\tthis.displayItems = this._items;\n\t\tthis.updateIndex();\n\t\tthis.setupFocusObservable();\n\t\tthis.doEmitSelect();\n\t}\n\n\t/**\n\t * Filters the items being displayed in the DOM list.\n\t */\n\tfilterBy(query = \"\") {\n\t\tif (query) {\n\t\t\tthis.displayItems = this.getListItems().filter(item => item.content.toLowerCase().includes(query.toLowerCase()));\n\t\t\t// Reset index if items were found\n\t\t\t// Prevent selecting index in list that are undefined.\n\t\t\tif (this.displayItems) {\n\t\t\t\tthis.index = 0;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.displayItems = this.getListItems();\n\t\t}\n\n\t\tthis.updateIndex();\n\t}\n\n\t/**\n\t * Initializes (or re-initializes) the Observable that handles switching focus to an element based on\n\t * key input matching the first letter of the item in the list.\n\t */\n\tsetupFocusObservable() {\n\t\tif (!this.list) { return; }\n\t\tif (this.focusJump) {\n\t\t\tthis.focusJump.unsubscribe();\n\t\t}\n\t\tlet elList = Array.from(this.list.nativeElement.querySelectorAll(\"li\"));\n\t\tthis.focusJump = watchFocusJump(this.list.nativeElement, elList)\n\t\t\t