UNPKG

@microsoft/windows-admin-center-sdk

Version:

Microsoft - Windows Admin Center Shell

aka.ms/WindowsAdminCenter

617 lines • 92 kB

JavaScript

import { __decorate, __metadata } from "tslib"; import { Component, ElementRef, Injector, Input, TemplateRef, ViewChild } from '@angular/core'; import { Debounce } from '@microsoft/windows-admin-center-sdk/core/base/decorators/debounce.decorators'; import { Yield } from '@microsoft/windows-admin-center-sdk/core/base/decorators/yield.decorator'; import { KeyCode } from '@microsoft/windows-admin-center-sdk/core/data/accessibility-manager'; import { Dom } from '@microsoft/windows-admin-center-sdk/core/dom/dom'; import { DropdownComponent } from '../../../dropdown/dropdown.component'; import { DropdownService } from '../../../dropdown/dropdown.service'; import { SmeSchemaProperty } from '../../../schema/schema-decorator'; import { SimplePropertySchemaFieldLoaderComponent } from '../../../schema/schema-field-host.component'; import { SchemaPrimitiveType } from '../../../schema/schema-models'; import { SmeInternalOptionsFormFieldComponent } from '../options-form-field/options-form-field.component'; import * as i0 from "@angular/core"; import * as i1 from "@angular/common"; import * as i2 from "@angular/forms"; import * as i3 from "../options-form-field/form-field-option.component"; import * as i4 from "../form-field-accessor.directive"; import * as i5 from "../form-field-validator.directive"; import * as i6 from "../form-field-async-validator.directive"; import * as i7 from "../../../dropdown/dropdown.component"; import * as i8 from "../../../../directives/template-outlet/template-outlet.directive"; import * as i9 from "../../../tooltip/tooltip.directive"; import * as i10 from "../../../../directives/telemetry/telemetry.directive"; import * as i11 from "../search/search-form-field.component"; import * as i12 from "../../validation-alert/validation-alert.component"; import * as i13 from "../../form-field-layout/form-field-layout.component"; function ComboboxFormFieldLoaderComponent_sme_option_2_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelement(0, "sme-option", 4); } if (rf & 2) { const item_r3 = ctx.$implicit; const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵproperty("value", item_r3.value)("label", ctx_r1.localize(item_r3.label)); } } function ComboboxFormFieldLoaderComponent_ng_container_3_sme_option_1_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelement(0, "sme-option", 4); } if (rf & 2) { const item_r5 = ctx.$implicit; const ctx_r4 = i0.ɵɵnextContext(2); i0.ɵɵproperty("value", item_r5.value)("label", ctx_r4.localize(item_r5.label)); } } function ComboboxFormFieldLoaderComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵtemplate(1, ComboboxFormFieldLoaderComponent_ng_container_3_sme_option_1_Template, 1, 2, "sme-option", 2); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵadvance(1); i0.ɵɵproperty("ngForOf", ctx_r2.resolveComponentMember(ctx_r2.propertySchema.options.itemsBinding)); } } const _c0 = ["singleSelectTemplate"]; const _c1 = ["multiSelectTemplate"]; const _c2 = ["listbox"]; const _c3 = ["dropDown"]; const _c4 = ["type", "combobox"]; function ComboboxFormFieldComponent_form_11_Template(rf, ctx) { if (rf & 1) { const _r13 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "form", 17); i0.ɵɵlistener("keydown", function ComboboxFormFieldComponent_form_11_Template_form_keydown_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.onSearchFormKeydown($event)); }); i0.ɵɵelementStart(1, "sme-form-field", 18); i0.ɵɵlistener("keyDownEvent", function ComboboxFormFieldComponent_form_11_Template_sme_form_field_keyDownEvent_1_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.onKeyDownEvent($event)); })("blurEvent", function ComboboxFormFieldComponent_form_11_Template_sme_form_field_blurEvent_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r15 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r15.onBlur()); })("ngModelChange", function ComboboxFormFieldComponent_form_11_Template_sme_form_field_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.searchString = $event); })("ngModelChange", function ComboboxFormFieldComponent_form_11_Template_sme_form_field_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r17 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r17.onSearchStringChange()); }); i0.ɵɵelementEnd()(); } if (rf & 2) { const ctx_r4 = i0.ɵɵnextContext(); i0.ɵɵclassProp("sme-padding-squish-v-xs", !ctx_r4.multiple); i0.ɵɵadvance(1); i0.ɵɵproperty("disableSearchButton", true)("placeholder", ctx_r4.strings.MsftSmeShell.Angular.Common.search)("label", ctx_r4.strings.MsftSmeShell.Angular.Common.search)("id", ctx_r4.idBag.searchInput)("count", ctx_r4.optionsFiltered.length ? ctx_r4.optionsFiltered.length : 0)("ngModel", ctx_r4.searchString); } } function ComboboxFormFieldComponent_div_12_Template(rf, ctx) { if (rf & 1) { const _r19 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "div", 19)(1, "label", 20)(2, "input", 21); i0.ɵɵlistener("blur", function ComboboxFormFieldComponent_div_12_Template_input_blur_2_listener() { i0.ɵɵrestoreView(_r19); const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.onBlur()); })("change", function ComboboxFormFieldComponent_div_12_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r19); const ctx_r20 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r20.toggleAllOptions()); }); i0.ɵɵelementEnd(); i0.ɵɵelementStart(3, "span", 22); i0.ɵɵtext(4); i0.ɵɵelementEnd()()(); } if (rf & 2) { const ctx_r5 = i0.ɵɵnextContext(); i0.ɵɵclassProp("sme-layout-none", ctx_r5.isFiltered); i0.ɵɵadvance(2); i0.ɵɵproperty("checked", ctx_r5.isAllOptionsSelected)("smeTelemetryId", ctx_r5.selectAllLabel); i0.ɵɵattribute("data-uta-id", ctx_r5.selectAllUtaId)("aria-checked", ctx_r5.isAllOptionsSelected)("aria-label", ctx_r5.selectAllLabel); i0.ɵɵadvance(2); i0.ɵɵtextInterpolate(ctx_r5.selectAllLabel); } } function ComboboxFormFieldComponent_ng_container_13_ng_container_1_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵelementContainer(1, 24); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const option_r22 = ctx.$implicit; const ctx_r21 = i0.ɵɵnextContext(2); i0.ɵɵadvance(1); i0.ɵɵproperty("template", ctx_r21.itemTemplate)("data", option_r22); } } function ComboboxFormFieldComponent_ng_container_13_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵtemplate(1, ComboboxFormFieldComponent_ng_container_13_ng_container_1_Template, 2, 2, "ng-container", 23); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const ctx_r6 = i0.ɵɵnextContext(); i0.ɵɵadvance(1); i0.ɵɵproperty("ngForOf", ctx_r6.optionsFiltered)("ngForTrackBy", ctx_r6.trackOption); } } function ComboboxFormFieldComponent_ng_container_14_ng_container_1_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵelementContainer(1, 24); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const option_r24 = ctx.$implicit; const ctx_r23 = i0.ɵɵnextContext(2); i0.ɵɵadvance(1); i0.ɵɵproperty("template", ctx_r23.itemTemplate)("data", option_r24); } } function ComboboxFormFieldComponent_ng_container_14_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementContainerStart(0); i0.ɵɵtemplate(1, ComboboxFormFieldComponent_ng_container_14_ng_container_1_Template, 2, 2, "ng-container", 23); i0.ɵɵelementContainerEnd(); } if (rf & 2) { const ctx_r7 = i0.ɵɵnextContext(); i0.ɵɵadvance(1); i0.ɵɵproperty("ngForOf", ctx_r7.options)("ngForTrackBy", ctx_r7.trackOption); } } function ComboboxFormFieldComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) { const _r27 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "button", 25); i0.ɵɵlistener("blur", function ComboboxFormFieldComponent_ng_template_16_Template_button_blur_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r26 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r26.onBlur()); })("click", function ComboboxFormFieldComponent_ng_template_16_Template_button_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r27); const option_r25 = restoredCtx.$implicit; const ctx_r28 = i0.ɵɵnextContext(); const _r2 = i0.ɵɵreference(6); ctx_r28.toggleOption(option_r25, true); return i0.ɵɵresetView(_r2.focus()); }); i0.ɵɵelementStart(1, "span", 26)(2, "span", 27); i0.ɵɵtext(3); i0.ɵɵelementEnd()()(); } if (rf & 2) { const option_r25 = ctx.$implicit; const ctx_r9 = i0.ɵɵnextContext(); i0.ɵɵclassProp("sme-selected", option_r25.isSelected); i0.ɵɵproperty("disabled", option_r25.disabled); i0.ɵɵattribute("aria-selected", option_r25.isSelected)("aria-label", option_r25.toString())("data-uta-id", option_r25.utaId ? option_r25.utaId : option_r25.value); i0.ɵɵadvance(1); i0.ɵɵproperty("smeTooltip", option_r25.disabled ? null : option_r25.resolvedTooltipTemplate)("smeTooltipContext", option_r25.disabled ? null : option_r25.tooltipContext || option_r25); i0.ɵɵadvance(1); i0.ɵɵclassProp("sme-arrange-ellipsis", !ctx_r9.overflowWrap)("sme-combobox-option-wrap", ctx_r9.overflowWrap); i0.ɵɵproperty("title", option_r25.resolvedTitle); i0.ɵɵadvance(1); i0.ɵɵtextInterpolate1("", option_r25.toString(), " "); } } function ComboboxFormFieldComponent_ng_template_18_Template(rf, ctx) { if (rf & 1) { const _r31 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "div", 19)(1, "label", 20)(2, "input", 28); i0.ɵɵlistener("blur", function ComboboxFormFieldComponent_ng_template_18_Template_input_blur_2_listener() { i0.ɵɵrestoreView(_r31); const ctx_r30 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r30.onBlur()); })("change", function ComboboxFormFieldComponent_ng_template_18_Template_input_change_2_listener() { const restoredCtx = i0.ɵɵrestoreView(_r31); const option_r29 = restoredCtx.$implicit; const ctx_r32 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r32.toggleOption(option_r29, !option_r29.isSelected)); }); i0.ɵɵelementEnd(); i0.ɵɵelementStart(3, "span", 29)(4, "span", 30); i0.ɵɵtext(5); i0.ɵɵelementEnd()()()(); } if (rf & 2) { const option_r29 = ctx.$implicit; const ctx_r11 = i0.ɵɵnextContext(); i0.ɵɵadvance(2); i0.ɵɵproperty("checked", option_r29.isSelected)("smeTelemetryId", option_r29.toString())("disabled", option_r29.disabled); i0.ɵɵattribute("aria-checked", option_r29.isSelected)("aria-label", option_r29.toString())("data-uta-id", option_r29.utaId ? option_r29.utaId : option_r29.value); i0.ɵɵadvance(1); i0.ɵɵclassProp("sme-combobox-option-wrap", ctx_r11.overflowWrap); i0.ɵɵproperty("smeTooltip", option_r29.disabled ? null : option_r29.resolvedTooltipTemplate)("title", option_r29.resolvedTitle)("smeTooltipContext", option_r29.disabled ? null : option_r29.tooltipContext || option_r29); i0.ɵɵadvance(1); i0.ɵɵclassProp("sme-arrange-ellipsis", !ctx_r11.overflowWrap); i0.ɵɵadvance(1); i0.ɵɵtextInterpolate1("", option_r29.toString(), " "); } } const _c5 = function (a0) { return { "max-width.px": a0 }; }; const _c6 = function () { return { "max-width": "initial" }; }; export class ComboboxFormFieldLoaderComponent extends SimplePropertySchemaFieldLoaderComponent { } /** @nocollapse */ ComboboxFormFieldLoaderComponent.ɵfac = /** @pureOrBreakMyCode */ function () { let ɵComboboxFormFieldLoaderComponent_BaseFactory; return function ComboboxFormFieldLoaderComponent_Factory(t) { return (ɵComboboxFormFieldLoaderComponent_BaseFactory || (ɵComboboxFormFieldLoaderComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ComboboxFormFieldLoaderComponent)))(t || ComboboxFormFieldLoaderComponent); }; }(); /** @nocollapse */ ComboboxFormFieldLoaderComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ComboboxFormFieldLoaderComponent, selectors: [["ng-component"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 15, consts: [["type", "combobox", 3, "ngModel", "name", "label", "description", "required", "readonly", "searchable", "loading", "disabled", "pendingMessage", "customAsyncValidateDisabled", "customAsyncValidateDebounceTime", "placeholder", "ngModelChange", "customValidate", "customAsyncValidate"], ["field", ""], [3, "value", "label", 4, "ngFor", "ngForOf"], [4, "ngIf"], [3, "value", "label"]], template: function ComboboxFormFieldLoaderComponent_Template(rf, ctx) { if (rf & 1) { i0.ɵɵelementStart(0, "sme-form-field", 0, 1); i0.ɵɵlistener("ngModelChange", function ComboboxFormFieldLoaderComponent_Template_sme_form_field_ngModelChange_0_listener($event) { return ctx.data = $event; })("customValidate", function ComboboxFormFieldLoaderComponent_Template_sme_form_field_customValidate_0_listener($event) { return ctx.resolveFunction(ctx.propertySchema.customValidation)($event); })("customAsyncValidate", function ComboboxFormFieldLoaderComponent_Template_sme_form_field_customAsyncValidate_0_listener($event) { return ctx.propertySchema.customAsyncValidation && ctx.resolveFunction(ctx.propertySchema.customAsyncValidation.handler)($event); }); i0.ɵɵtemplate(2, ComboboxFormFieldLoaderComponent_sme_option_2_Template, 1, 2, "sme-option", 2); i0.ɵɵtemplate(3, ComboboxFormFieldLoaderComponent_ng_container_3_Template, 2, 1, "ng-container", 3); i0.ɵɵelementEnd(); } if (rf & 2) { i0.ɵɵproperty("ngModel", ctx.data)("name", ctx.propertySchema.name)("label", ctx.localize(ctx.propertySchema.label))("description", ctx.localize(ctx.propertySchema.description))("required", ctx.propertySchema.required)("readonly", !!ctx.evalExpression(ctx.propertySchema.readonlyCondition))("searchable", !!(ctx.propertySchema.options && ctx.propertySchema.options.searchable))("loading", !!(ctx.propertySchema.options && ctx.propertySchema.options.busyCondition && ctx.evalExpression(ctx.propertySchema.options.busyCondition)))("disabled", !!(ctx.propertySchema.disabledCondition && ctx.evalExpression(ctx.propertySchema.disabledCondition)) || !!(ctx.propertySchema.options && ctx.propertySchema.options.busyCondition && ctx.evalExpression(ctx.propertySchema.options.busyCondition)))("pendingMessage", ctx.propertySchema.customAsyncValidation && ctx.localize(ctx.propertySchema.customAsyncValidation.pendingMessage))("customAsyncValidateDisabled", ctx.shouldCustomAsyncValidationBeDisabled())("customAsyncValidateDebounceTime", ctx.propertySchema.customAsyncValidation && +ctx.propertySchema.customAsyncValidation.handler)("placeholder", ctx.localize(ctx.propertySchema.options && ctx.propertySchema.options.placeholder)); i0.ɵɵadvance(2); i0.ɵɵproperty("ngForOf", ctx.propertySchema.options.items); i0.ɵɵadvance(1); i0.ɵɵproperty("ngIf", ctx.propertySchema.options.itemsBinding); } }, dependencies: function () { return [i1.NgForOf, i1.NgIf, i2.NgControlStatus, i2.RequiredValidator, i2.NgModel, ComboboxFormFieldComponent, i3.FormFieldOptionComponent, i4.FormFieldAccessorDirective, i5.FormFieldValidatorDirective, i6.FormFieldAsyncValidatorDirective]; }, encapsulation: 2 }); (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComboboxFormFieldLoaderComponent, [{ type: Component, args: [{ template: "<sme-form-field #field type=\"combobox\" [(ngModel)]=\"data\"\r\n [name]=\"propertySchema.name\"\r\n [label]=\"localize(propertySchema.label)\"\r\n [description]=\"localize(propertySchema.description)\"\r\n [required]=\"propertySchema.required\"\r\n [readonly]=\"!!(evalExpression(propertySchema.readonlyCondition))\"\r\n [searchable]=\"!!(propertySchema.options && propertySchema.options.searchable)\"\r\n [loading]=\"!!(propertySchema.options && propertySchema.options.busyCondition && evalExpression(propertySchema.options.busyCondition))\"\r\n [disabled]=\"!!(propertySchema.disabledCondition && evalExpression(propertySchema.disabledCondition)) || !!(propertySchema.options && propertySchema.options.busyCondition && evalExpression(propertySchema.options.busyCondition))\"\r\n (customValidate)=\"resolveFunction(propertySchema.customValidation)($event)\"\r\n (customAsyncValidate)=\"propertySchema.customAsyncValidation && resolveFunction(propertySchema.customAsyncValidation.handler)($event)\"\r\n [pendingMessage]=\"propertySchema.customAsyncValidation && localize(propertySchema.customAsyncValidation.pendingMessage)\"\r\n [customAsyncValidateDisabled]=\"shouldCustomAsyncValidationBeDisabled()\"\r\n [customAsyncValidateDebounceTime]=\"propertySchema.customAsyncValidation && +propertySchema.customAsyncValidation.handler\"\r\n [placeholder]=\"localize(propertySchema.options && propertySchema.options.placeholder)\">\r\n <sme-option *ngFor=\"let item of propertySchema.options.items\" [value]=\"item.value\" [label]=\"localize(item.label)\"></sme-option>\r\n <ng-container *ngIf=\"propertySchema.options.itemsBinding\">\r\n <sme-option *ngFor=\"let item of resolveComponentMember(propertySchema.options.itemsBinding)\"\r\n [value]=\"item.value\" [label]=\"localize(item.label)\"></sme-option>\r\n </ng-container>\r\n</sme-form-field>\r\n" }] }], null, null); })(); /** * Accessible Implementation of a form field combo box */ let ComboboxFormFieldComponent = class ComboboxFormFieldComponent extends SmeInternalOptionsFormFieldComponent { /** * Initializes a new instance of the ComboboxFormFieldComponent */ constructor(injector) { super(injector); /** * Determine if the dropdown will use the sme-form-field to limit its max-width */ this.dropdownApplyFormFieldOffsetWidth = true; this.dropdownService = injector.get(DropdownService); this.multiple = false; this.maintainSearch = false; } /** * The source name to use for logging */ get logSourceName() { return 'ComboboxFormFieldComponent'; } get isFiltered() { return this.searchString && this.searchString.length > 0; } get itemTemplate() { return this.multiple ? this.multiSelectTemplate : this.singleSelectTemplate; } /** * Implementation of angular OnInit interface */ ngOnInit() { super.ngOnInit(); } /** * Handles keypress events on the dropdown toggle */ onToggleKeyPress(event) { // for all other cases, send to autocomplete this.progressiveAutoComplete(event.keyCode); // handle all keys event.stopImmediatePropagation(); event.stopPropagation(); event.preventDefault(); } /** * Handles toggled state changes */ onDropdownToggled(expanded) { if (expanded) { // Single selection option width need to be restricted by the dropdown if (!this.multiple) { this.applySingleOptionWidth(); } if (this.searchable && !MsftSme.isNullOrWhiteSpace(this.searchString) && !this.maintainSearch) { this.searchString = ''; this.updatePosition(); } let focusOn = this.listboxElement.nativeElement.querySelector('[role="option"][aria-selected="true"]'); if (!focusOn) { focusOn = Dom.getNextFocusableElement(this.listboxElement.nativeElement); } } else { this.hostElement.nativeElement.focus(); } } /** * Handles event emitted when focus leaves input field */ onBlur() { if (this.keyBoardEvent?.keyCode === KeyCode.Tab) { this.dropDown.close(); } } /** * Handles event emitted on key press in search form input field * @param event */ onKeyDownEvent(event) { this.keyBoardEvent = event; } getFirstOption() { if (this.multiple) { const checkboxes = this.hostElement.nativeElement.querySelectorAll('input[type="checkbox"]'); for (let i = 0; i < checkboxes.length; i++) { const checkbox = checkboxes.item(i); if (Dom.isFocusable(checkbox)) { return checkbox; } } } else { const options = this.hostElement.nativeElement.querySelectorAll('button[role="option"]'); for (let i = 0; i < options.length; i++) { const option = options.item(i); if (Dom.isFocusable(option)) { return option; } } } return null; } /** * Handles keydown events on the dropdown toggle */ onToggleKeydown(event) { this.keyBoardEvent = event; switch (event.keyCode) { case KeyCode.Enter: case KeyCode.Space: { this.dropDown.onToggleClick(event, true); break; } case KeyCode.UpArrow: { if (!this.multiple && !this.dropDown.isOpen) { this.selectPreviousOption(); } return; } case KeyCode.DownArrow: { if (event.altKey) { this.dropDown.onToggleClick(event, true); } else if (!this.multiple && !this.dropDown.isOpen) { this.selectNextOption(); } return; } default: { return; } } // handle all keys event.stopImmediatePropagation(); event.stopPropagation(); event.preventDefault(); } /** * Handles keydown events on option changes */ onListboxKeydown(event) { this.keyBoardEvent = event; switch (event.keyCode) { case KeyCode.UpArrow: case KeyCode.LeftArrow: { const firstCheckbox = this.getFirstOption(); if (firstCheckbox && document.activeElement === firstCheckbox) { this.hostElement.nativeElement.querySelector('input[type="search"]').focus(); break; } return; } default: { return; } } // handle all keys event.stopImmediatePropagation(); event.stopPropagation(); event.preventDefault(); } onSearchFormKeydown(event) { switch (event.keyCode) { case KeyCode.DownArrow: case KeyCode.RightArrow: { const firstOption = this.getFirstOption(); if (firstOption) { firstOption.focus(); break; } return; } default: { return; } } // handle all keys event.stopImmediatePropagation(); event.stopPropagation(); event.preventDefault(); } /** * Creates the idBag used by this component to store unique element ids. * id values will be assigned be the @see BaseComponent super class. */ createIdBag() { return { detailsSpan: '', dropDownContent: '', searchInput: '' }; } /** * Performs validation that is internal to this control * @param c The form control attached to this instance */ validate(c) { if (this.required) { if (MsftSme.isNullOrUndefined(this.value)) { return { required: true }; } if (this.multiple) { const keys = Object.keys(this.value); if (keys.length === 0 || keys.every(k => !this.value[k])) { return { required: true }; } } } return super.validate(c); } /** * On searchString model change */ onSearchStringChange() { this.filterOptionBySearchString(); this.updatePosition(); } updatePosition() { this.dropdownService.updatePosition(this.dropDown, true); } /** * It handles calculating and updating the styles for each of the options inside * of the dropdown container, because the dropdown container's width is dynamic, * have to calculate option as well. */ applySingleOptionWidth() { const width = this.getSingleDropdownOptionWidth(); if (width === null) { return; } const options = this.hostElement.nativeElement.querySelectorAll('button[role="option"]'); if (!options) { return; } // TODO: when decided to do virtualization for this portion // need to only calculate the ones that are inside of view port for (let i = 0; i < options.length; i++) { const option = options.item(i); const span = option.querySelector('span'); if (!span) { return; } const innerSpan = span.querySelector('span'); if (!innerSpan) { return; } span.style.width = width + 'px'; // 24 is the button's padding left and right // the inner part of the span need to be the total dropdown value minus // button's padding left and right to make the ellipsis working const innerSpanWidth = width - 24; innerSpan.style.width = innerSpanWidth + 'px'; } } /** * This handles getting the current width being applied by the dropdown service */ getSingleDropdownOptionWidth() { const contentElement = this.dropDown.contentElement.nativeElement; if (!contentElement) { return null; } const firstOption = Dom.getFirstElement(contentElement, element => element.tagName === 'BUTTON'); if (!firstOption) { return null; } return firstOption.offsetWidth; } }; /** @nocollapse */ ComboboxFormFieldComponent.ɵfac = function ComboboxFormFieldComponent_Factory(t) { return new (t || ComboboxFormFieldComponent)(i0.ɵɵdirectiveInject(i0.Injector)); }; /** @nocollapse */ ComboboxFormFieldComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ComboboxFormFieldComponent, selectors: [["sme-form-field", "type", "combobox"], ["sme-form-field", "type", "select"]], viewQuery: function ComboboxFormFieldComponent_Query(rf, ctx) { if (rf & 1) { i0.ɵɵviewQuery(_c0, 7); i0.ɵɵviewQuery(_c1, 7); i0.ɵɵviewQuery(_c2, 5); i0.ɵɵviewQuery(_c3, 5); } if (rf & 2) { let _t; i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.singleSelectTemplate = _t.first); i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.multiSelectTemplate = _t.first); i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listboxElement = _t.first); i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropDown = _t.first); } }, inputs: { multiple: "multiple", overflowWrap: "overflowWrap", maintainSearch: "maintainSearch", dropdownApplyFormFieldOffsetWidth: "dropdownApplyFormFieldOffsetWidth" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c4, decls: 20, vars: 30, consts: [[3, "formField"], [1, "sme-combobox", "sme-focus-zone", "sme-form-field-editor", 3, "autoToggle", "disabled", "calculateHeight", "dropdownApplyFormFieldOffsetWidth", "toggled"], ["dropDown", ""], [1, "sme-combobox-header", "sme-dropdown-toggle", 3, "keydown", "keypress"], ["dropdownHeader", ""], ["type", "text", "role", "combobox", "readonly", "", "spellcheck", "false", "autocapitalize", "off", "autocomplete", "off", 3, "value", "placeholder", "blur", "click"], ["textInput", ""], ["type", "button", "tabindex", "-1", "role", "presentation", "aria-hidden", "true", 1, "sme-button-trigger", "sme-button-auto-width", 3, "click"], [1, "sme-icon", "sme-icon-chevronDown"], ["role", "listbox", 1, "sme-dropdown-content", "sme-dropdown-content-inherit-container-height", 3, "ngStyle", "id", "keydown"], ["listbox", ""], [3, "sme-padding-squish-v-xs", "keydown", 4, "ngIf"], ["class", "sme-checkbox sme-dropdown-interaction-enabled", "role", "option", 3, "sme-layout-none", 4, "ngIf"], [4, "ngIf"], [3, "alert"], ["singleSelectTemplate", ""], ["multiSelectTemplate", ""], [3, "keydown"], ["name", "searchStringValue", "type", "search", 3, "disableSearchButton", "placeholder", "label", "id", "count", "ngModel", "keyDownEvent", "blurEvent", "ngModelChange"], ["role", "option", 1, "sme-checkbox", "sme-dropdown-interaction-enabled"], [1, "sme-position-stretch-h", "sme-arrange-word-break-all"], ["type", "checkbox", "role", "checkbox", 1, "sme-layout-absolute", "sme-position-inset-none", 3, "checked", "smeTelemetryId", "blur", "change"], ["aria-hidden", "true"], [4, "ngFor", "ngForOf", "ngForTrackBy"], ["smeTemplateOutlet", "", 3, "template", "data"], ["type", "button", "role", "option", 3, "disabled", "blur", "click"], [3, "smeTooltip", "smeTooltipContext"], [1, "sme-layout-float-left", 3, "title"], ["type", "checkbox", "role", "checkbox", 1, "sme-layout-absolute", "sme-position-inset-none", 3, "checked", "smeTelemetryId", "disabled", "blur", "change"], ["aria-hidden", "true", 1, "sme-position-stretch-h", "sme-layout-float-left", 3, "smeTooltip", "title", "smeTooltipContext"], [1, "sme-position-stretch-h", "sme-layout-float-left"]], template: function ComboboxFormFieldComponent_Template(rf, ctx) { if (rf & 1) { const _r33 = i0.ɵɵgetCurrentView(); i0.ɵɵelementStart(0, "sme-form-field-layout", 0)(1, "sme-dropdown", 1, 2); i0.ɵɵlistener("toggled", function ComboboxFormFieldComponent_Template_sme_dropdown_toggled_1_listener($event) { return ctx.onDropdownToggled($event); }); i0.ɵɵelementStart(3, "div", 3, 4); i0.ɵɵlistener("keydown", function ComboboxFormFieldComponent_Template_div_keydown_3_listener($event) { return ctx.onToggleKeydown($event); })("keypress", function ComboboxFormFieldComponent_Template_div_keypress_3_listener($event) { return ctx.onToggleKeyPress($event); }); i0.ɵɵelementStart(5, "input", 5, 6); i0.ɵɵlistener("blur", function ComboboxFormFieldComponent_Template_input_blur_5_listener() { return ctx.onBlur(); })("click", function ComboboxFormFieldComponent_Template_input_click_5_listener($event) { i0.ɵɵrestoreView(_r33); const _r0 = i0.ɵɵreference(2); return i0.ɵɵresetView(_r0.onToggleClick($event, true)); }); i0.ɵɵelementEnd(); i0.ɵɵelementStart(7, "button", 7); i0.ɵɵlistener("click", function ComboboxFormFieldComponent_Template_button_click_7_listener($event) { i0.ɵɵrestoreView(_r33); const _r0 = i0.ɵɵreference(2); return i0.ɵɵresetView(_r0.onToggleClick($event, true)); }); i0.ɵɵelement(8, "span", 8); i0.ɵɵelementEnd()(); i0.ɵɵelementStart(9, "div", 9, 10); i0.ɵɵlistener("keydown", function ComboboxFormFieldComponent_Template_div_keydown_9_listener($event) { return ctx.onListboxKeydown($event); }); i0.ɵɵtemplate(11, ComboboxFormFieldComponent_form_11_Template, 2, 8, "form", 11); i0.ɵɵtemplate(12, ComboboxFormFieldComponent_div_12_Template, 5, 8, "div", 12); i0.ɵɵtemplate(13, ComboboxFormFieldComponent_ng_container_13_Template, 2, 2, "ng-container", 13); i0.ɵɵtemplate(14, ComboboxFormFieldComponent_ng_container_14_Template, 2, 2, "ng-container", 13); i0.ɵɵelementEnd()(); i0.ɵɵelement(15, "sme-validation-alert", 14); i0.ɵɵtemplate(16, ComboboxFormFieldComponent_ng_template_16_Template, 4, 14, "ng-template", null, 15, i0.ɵɵtemplateRefExtractor); i0.ɵɵtemplate(18, ComboboxFormFieldComponent_ng_template_18_Template, 6, 14, "ng-template", null, 16, i0.ɵɵtemplateRefExtractor); i0.ɵɵelementEnd(); } if (rf & 2) { const _r0 = i0.ɵɵreference(2); const _r1 = i0.ɵɵreference(4); i0.ɵɵproperty("formField", ctx); i0.ɵɵadvance(1); i0.ɵɵproperty("autoToggle", false)("disabled", ctx.loadingOrDisabled)("calculateHeight", true)("dropdownApplyFormFieldOffsetWidth", ctx.dropdownApplyFormFieldOffsetWidth); i0.ɵɵadvance(4); i0.ɵɵproperty("value", ctx.selectedOptionsDisplayValue)("placeholder", ctx.placeholder); i0.ɵɵattribute("aria-controls", ctx.idBag.dropDownContent)("aria-label", ctx.label)("disabled", ctx.loadingOrDisabled ? true : null)("aria-owns", ctx.idBag.dropDownContent)("aria-expanded", _r0.isOpen)("aria-autocomplete", "none")("aria-required", ctx.required); i0.ɵɵadvance(2); i0.ɵɵclassProp("sme-toggled", _r0.isOpen); i0.ɵɵattribute("disabled", ctx.loadingOrDisabled ? true : null)("aria-pressed", _r0.isOpen); i0.ɵɵadvance(2); i0.ɵɵclassProp("sme-padding-squish-v-xs", ctx.multiple); i0.ɵɵproperty("ngStyle", ctx.dropdownApplyFormFieldOffsetWidth && i0.ɵɵpureFunction1(27, _c5, _r1.offsetWidth > 220 ? _r1.offsetWidth : 220) || !ctx.dropdownApplyFormFieldOffsetWidth && i0.ɵɵpureFunction0(29, _c6))("id", ctx.idBag.dropDownContent); i0.ɵɵadvance(2); i0.ɵɵproperty("ngIf", ctx.searchable); i0.ɵɵadvance(1); i0.ɵɵproperty("ngIf", ctx.multiple && ctx.showSelectAll); i0.ɵɵadvance(1); i0.ɵɵproperty("ngIf", ctx.searchable); i0.ɵɵadvance(1); i0.ɵɵproperty("ngIf", !ctx.searchable); i0.ɵɵadvance(1); i0.ɵɵproperty("alert", ctx.alert); } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgStyle, i2.ɵNgNoValidate, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.NgForm, i7.DropdownComponent, i8.TemplateOutletDirective, i9.TooltipDirective, i10.TelemetryDirective, i11.SearchFormFieldComponent, i12.ValidationAlertComponent, i4.FormFieldAccessorDirective, i5.FormFieldValidatorDirective, i13.FormFieldLayoutComponent], encapsulation: 2 }); __decorate([ Debounce(), __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0) ], ComboboxFormFieldComponent.prototype, "onSearchStringChange", null); __decorate([ Yield(), __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0) ], ComboboxFormFieldComponent.prototype, "updatePosition", null); ComboboxFormFieldComponent = __decorate([ SmeSchemaProperty({ type: SchemaPrimitiveType.String, format: 'combobox', description: 'a combobox control binding to string data.', loaderComponent: ComboboxFormFieldLoaderComponent, optionProperties: [ { type: SchemaPrimitiveType.Array, format: 'simple-list', name: 'items', label: 'resources:strings:MsftSmeShell.Angular.SchemaForm.Editor.PropertyForm.Options.StaticOptions', item: { type: SchemaPrimitiveType.Object, format: 'default', properties: [ { type: SchemaPrimitiveType.String, format: 'resource-string-picker', name: 'label', label: 'resources:strings:MsftSmeShell.Angular.SchemaForm.Editor.PropertyForm.Options.Label', required: true }, { type: SchemaPrimitiveType.String, format: 'textbox', name: 'value', label: 'resources:strings:MsftSmeShell.Angular.SchemaForm.Editor.PropertyForm.Options.Value', required: true } ], options: { columnCount: 1 } } }, { type: SchemaPrimitiveType.String, format: 'textbox', name: 'itemsBinding', label: 'resources:strings:MsftSmeShell.Angular.SchemaForm.Editor.PropertyForm.Options.DynamicOptions' }, { type: SchemaPrimitiveType.String, format: 'textbox', name: 'busyCondition', label: 'actual_string:Busy Condition' }, { type: SchemaPrimitiveType.String, format: 'resource-string-picker', name: 'placeholder', defaultValue: '', label: 'actual_string:Placeholder' } ] }), __metadata("design:paramtypes", [Injector]) ], ComboboxFormFieldComponent); export { ComboboxFormFieldComponent }; (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComboboxFormFieldComponent, [{ type: Component, args: [{ selector: 'sme-form-field[type="combobox"],sme-form-field[type="select"]', template: "<sme-form-field-layout [formField]=\"this\">\r\n <sme-dropdown #dropDown [autoToggle]=\"false\" class=\"sme-combobox sme-focus-zone sme-form-field-editor\"\r\n [disabled]=\"loadingOrDisabled\" [calculateHeight]=\"true\" (toggled)=\"onDropdownToggled($event)\"\r\n [dropdownApplyFormFieldOffsetWidth]=\"dropdownApplyFormFieldOffsetWidth\">\r\n <div #dropdownHeader class=\"sme-combobox-header sme-dropdown-toggle\" (keydown)=\"onToggleKeydown($event)\"\r\n (keypress)=\"onToggleKeyPress($event)\">\r\n <input (blur)=\"onBlur()\" #textInput type=\"text\" role=\"combobox\" [value]=\"selectedOptionsDisplayValue\" readonly\r\n [attr.aria-controls]=\"idBag.dropDownContent\" [attr.aria-label]=\"label\"\r\n [attr.disabled]=\"loadingOrDisabled ? true : null\" [attr.aria-owns]=\"idBag.dropDownContent\"\r\n [attr.aria-expanded]=\"dropDown.isOpen\" [attr.aria-autocomplete]=\"'none'\"\r\n (click)=\"dropDown.onToggleClick($event, true)\" spellcheck=\"false\" autocapitalize=\"off\" autocomplete=\"off\"\r\n [placeholder]=\"placeholder\" [attr.aria-required]=\"required\" />\r\n <button type=\"button\" [attr.disabled]=\"loadingOrDisabled ? true : null\" tabindex=\"-1\" role=\"presentation\"\r\n aria-hidden=\"true\" [attr.aria-pressed]=\"dropDown.isOpen\" [class.sme-toggled]=\"dropDown.isOpen\"\r\n class=\"sme-button-trigger sme-button-auto-width\" (click)=\"dropDown.onToggleClick($event, true)\">\r\n <span class=\"sme-icon sme-icon-chevronDown\"></span>\r\n </button>\r\n </div>\r\n \r\n \r\n \r\n <div #listbox role=\"listbox\" class=\"sme-dropdown-content sme-dropdown-content-inherit-container-height\"\r\n [class.sme-padding-squish-v-xs]=\"multiple\" (keydown)=\"onListboxKeydown($event)\"\r\n [ngStyle]=\"dropdownApplyFormFieldOffsetWidth && { 'max-width.px': dropdownHeader.offsetWidth > 220 ? dropdownHeader.offsetWidth : 220} || !dropdownApplyFormFieldOffsetWidth && { 'max-width': 'initial' }\"\r\n [id]=\"idBag.dropDownContent\">\r\n <form *ngIf=\"searchable\" (keydown)=\"onSearchFormKeydown($event)\" [class.sme-padding-squish-v-xs]=\"!multiple\">\r\n <sme-form-field (keyDownEvent)=\"onKeyDownEvent($event)\" (blurEvent)=\"onBlur()\" name=\"searchStringValue\" type=\"search\" [disableSearchButton]=\"true\"\r\n [placeholder]=\"strings.MsftSmeShell.Angular.Common.search\"\r\n [label]=\"strings.MsftSmeShell.Angular.Common.search\" [id]=\"idBag.searchInput\"\r\n [count]=\"optionsFiltered.length ? optionsFiltered.length : 0\" [(ngModel)]=\"searchString\"\r\n (ngModelChange)=\"onSearchStringChange()\"></sme-form-field>\r\n </form>\r\n <div *ngIf=\"multiple && showSelectAll\" class=\"sme-checkbox sme-dropdown-interaction-enabled\"\r\n [class.sme-layout-none]=\"isFiltered\" role=\"option\">\r\n <label class=\"sme-position-stretch-h sme-arrange-word-break-all\">\r\n <input (blur)=\"onBlur()\" type=\"checkbox\" [attr.data-uta-id]=\"selectAllUtaId\" (change)=\"toggleAllOptions()\" [checked]=\"isAllOptionsSelected\"\r\n [attr.aria-checked]=\"isAllOptionsSelected\" role=\"checkbox\" [attr.aria-label]=\"selectAllLabel\"\r\n [smeTelemetryId]=\"selectAllLabel\"\r\n class=\"sme-layout-absolute sme-position-inset-none\" />\r\n <span aria-hidden=\"true\">{{selectAllLabel}}</span>\r\n </label>\r\n </div>\r\n <ng-container *ngIf=\"searchable\">\r\n <ng-container *ngFor=\"let option of optionsFiltered;trackBy: trackOption\">\r\n <ng-container smeTemplateOutlet [template]=\"itemTemplate\" [data]=\"option\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!searchable\">\r\n <ng-container *ngFor=\"let option of options;trackBy: trackOption\">\r\n <ng-container smeTemplateOutlet [template]=\"itemTemplate\" [data]=\"option\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </sme-dropdown>\r\n <sme-validation-alert [alert]=\"alert\"></sme-validation-alert>\r\n\r\n <ng-template #singleSelectTemplate let-option>\r\n <button (blur)=\"onBlur()\" type=\"button\" role=\"option\" [attr.aria-selected]=\"option.isSelected\" [attr.aria-label]=\"option.toString()\"\r\n [class.sme-selected]=\"option.isSelected\" (click)=\"toggleOption(option, true); textInput.focus()\"\r\n [disabled]=\"option.disabled\" [attr.data-uta-id]=\"option.utaId ? option.utaId : option.value\">\r\n <span [smeTooltip]=\"option.disabled ? null : option.resolvedTooltipTemplate\"\r\n [smeTooltipContext]=\"option.disabled ? null : (option.tooltipContext || option)\">\r\n <span [class.sme-arrange-ellipsis]=\"!overflowWrap\" [title]=\"option.resolvedTitle\"\r\n [class.sme-combobox-option-wrap]=\"overflowWrap\"\r\n class=\"sme-layout-float-left\">{{option.toString()}}\r\n </span>\r\n </span>\r\n </button>\r\n </ng-template>\r\n\r\n <ng-template #multiSelectTemplate let-option>\r\n <div class=\"sme-checkbox sme-dropdown-interaction-enabled\" role=\"option\">\r\n <label class=\"sme-position-stretch-h sme-arrange-word-break-all\">\r\n <input (blur)=\"onBlur()\" type=\"checkbox\" (change)=\"toggleOption(option, !option.isSelected)\" [checked]=\"option.isSelected\"\r\n [attr.aria-checked]=\"option.isSelected\" role=\"checkbox\" [attr.aria-label]=\"option.toString()\"\r\n [attr.data-uta-id]=\"option.utaId ? option.utaId : option.value\"\r\n [smeTelemetryId]=\"option.toString()\"\r\n [disabled]=\"option.disabled\" class=\"sme-layout-absolute sme-position-inset-none\" />\r\n <span aria-hidden=\"true\" [class.sme-combobox-option-wrap]=\"overflowWrap\"\r\n class=\"sme-position-stretch-h sme-layout-float-left\"\r\n [smeTooltip]=\"option.disabled ? null : option.resolvedTooltipTemplate\" [title]=\"option.resolvedTitle\"\r\n [smeTooltipContext]=\"option.disabled ? null : (option.tooltipContext || option)\">\r\n <span class=\"sme-position-stretch-h sme-layout-float-left\"\r\n [class.sme-arrange-ellipsis]=\"!overflowWrap\">{{option.toString()}}\r\n </span>\r\n </span>\r\n </label>\r\n </div>\r\n </ng-template>\r\n</sme-form-field-layout>\r\n" }] }], function () { return [{ type: i0.Injector }]; }, { singleSelectTemplate: [{ type: ViewChild, args: ['singleSelectTemplate', { static: true }] }], multiSelectTemplate: [{ type: ViewChild, args: ['multiSelectTemplate', { static: true }] }], listboxElement: [{ type: ViewChild, args: ['listbox'] }], dropDown: [{ type: ViewChild, args: ['dropDown'] }], multiple: [{ type: Input }], overflowWrap: [{ type: Input }], maintainSearch: [{ type: Input }], dropdownApplyFormFieldOffsetWidth: [{ type: Input }], onSearchStringChange: [], updatePosition: [] }); })(); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tYm9ib3gtZm9ybS1maWVsZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9hbmd1bGFyL3NyYy9jb250cm9scy9mb3JtL2Zvcm0tZmllbGQvY29tYm9ib3gvY29tYm9ib3gtZm9ybS1maWVsZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9hbmd1bGFyL3NyYy9jb250cm9scy9mb3JtL2Zvcm0tZmllbGQvY29tYm9ib3gvY29tYm9ib3gtc2NoZW1hLWRyaXZlbi1mb3JtLXRlbXBsYXRlLmh0bWwiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9hbmd1bGFyL3NyYy9jb250cm9scy9mb3JtL2Zvcm0tZmllbGQvY29tYm9ib3gvY29tYm9ib3gtZm9ybS1maWVsZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsUUFBUSxFQUFFLEtBQUssRUFBVSxXQUFXLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXZHLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSw4RUFBOEUsQ0FBQztBQUN4RyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sMEVBQTBFLENBQUM7QUFDakcsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLHFFQUFxRSxDQUFDO0FBQzlGLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSxrREFBa0QsQ0FBQztBQUN2RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQUN6RSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFFckUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUFFLHdDQUF3QyxFQUFFLE1BQU0sNkNBQTZDLENBQUM7QUFDdkcsT0FB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