novo-elements 10.7.0-next.8 → 10.7.1-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/elements/tabbed-group-picker/TabbedGroupPicker.scss +1 -1
- package/esm2022/elements/tabbed-group-picker/TabbedGroupPicker.mjs +2 -2
- package/fesm2022/novo-elements-elements-data-table.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-form.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-select.mjs.map +1 -1
- package/fesm2022/novo-elements-elements-tabbed-group-picker.mjs +2 -2
- package/fesm2022/novo-elements-elements-tabbed-group-picker.mjs.map +1 -1
- package/package.json +7 -7
|
@@ -313,7 +313,7 @@ export class NovoTabbedGroupPickerElement {
|
|
|
313
313
|
this.filterText.next(event.target.value);
|
|
314
314
|
}
|
|
315
315
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NovoTabbedGroupPickerElement, deps: [{ token: i1.NovoLabelService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
316
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NovoTabbedGroupPickerElement, selector: "novo-tabbed-group-picker", inputs: { buttonConfig: "buttonConfig", tabs: "tabs", quickSelectConfig: "quickSelectConfig", showFooter: "showFooter", selectionEnabled: "selectionEnabled" }, outputs: { activation: "activation", selectionChange: "selectionChange", applyChange: "applyChange" }, providers: [{ provide: NOVO_OPTION_PARENT_COMPONENT, useExisting: NovoTabbedGroupPickerElement }], viewQueries: [{ propertyName: "scrollableInstance", first: true, predicate: ["tabbedGroupPickerVirtualScrollViewport"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<novo-dropdown (toggled)=\"onDropdownToggle($event)\" multiple #dropdown>\n <novo-button\n class=\"tabbed-group-picker-button\"\n [theme]=\"buttonConfig.theme\"\n [side]=\"buttonConfig.side\"\n [size]=\"buttonConfig.size\"\n [icon]=\"buttonConfig.icon\"\n [loading]=\"loading\">\n <ng-content></ng-content>\n <div class=\"tabbed-group-picker-button-label\">{{ buttonConfig.label }}</div>\n </novo-button>\n <div class=\"tabbed-group-picker-search\" data-automation-id=\"tabbed-group-picker-search\" (keydown)=\"dropdown._handleKeydown($event)\">\n <input #inputElement type=\"text\" [placeholder]=\"labelService.search\" [value]=\"filterText | async\" (input)=\"onFilter($event)\" />\n <i class=\"bhi-search\" *ngIf=\"!(filterText | async)\"></i>\n <i class=\"bhi-times\" *ngIf=\"(filterText | async)\" (click)=\"onClearFilter($event)\" (keydown.space)=\"onClearFilter($event)\"></i>\n </div>\n <div class=\"tabbed-group-picker-column-container\" (keydown)=\"dropdown._handleKeydown($event)\">\n <div class=\"tabbed-group-picker-column left\">\n <novo-nav theme=\"white\" direction=\"vertical\">\n <novo-tab *ngFor=\"let tab of displayTabs\" [attr.data-automation-id]=\"tab.typeName\"\n (activeChange)=\"changeTab(tab)\">\n <span>{{ tab.typeLabel }} ({{ tab.data.length }})</span><i class=\"bhi-next\"></i>\n </novo-tab>\n </novo-nav>\n <novo-button *ngIf=\"showClearAll && !showFooter\" class=\"clear-all-button\" theme=\"dialogue\" icon=\"times\" side=\"right\"\n color=\"grapefruit\" (click)=\"deselectEverything($event)\" (keydown.space)=\"deselectEverything($event)\">{{ labelService.clear }}</novo-button>\n </div>\n <div class=\"tabbed-group-picker-column right\">\n <div class=\"quick-select\" *ngIf=\"quickSelectConfig && !(filterText | async)\">\n <novo-optgroup class=\"quick-select-list\" [label]=\"quickSelectConfig.label\">\n <novo-option\n class=\"quick-select-item\"\n *ngFor=\"let quickSelect of quickSelectConfig.items\"\n [attr.data-automation-id]=\"quickSelect.label\"\n [allowSelection]=\"selectionEnabled\"\n [selected]=\"quickSelect.selected\"\n (click)=\"activateItem(quickSelect)\"\n (keydown.space)=\"activateItem(quickSelect)\"\n novoInert>\n {{quickSelect.label}}\n </novo-option>\n </novo-optgroup>\n </div>\n <novo-optgroup *ngIf=\"displayTab.data.length\">\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [maxBufferPx]=\"maxBufferPx\"\n [minBufferPx]=\"minBufferPx\"\n #tabbedGroupPickerVirtualScrollViewport>\n <novo-option\n *cdkVirtualFor=\"let item of displayTab.data\"\n [attr.data-automation-id]=\"item[displayTab.labelField]\"\n [attr.data-automation-value]=\"item[displayTab.valueField]\"\n [allowSelection]=\"selectionEnabled\"\n [selected]=\"item.selected\"\n (click)=\"activateItem(item, displayTab)\"\n (keydown.space)=\"activateItem(item, displayTab)\"\n novoInert>\n {{item[displayTab.labelField]}}\n </novo-option>\n </cdk-virtual-scroll-viewport>\n </novo-optgroup>\n <div class=\"tabbed-group-picker-empty-item\" *ngIf=\"!displayTab.data.length && (filterText | async)\">\n <i class=\"{{ displayTab.icon || 'bhi-search' }}\"></i>\n <div class=\"empty-item-main-message\">{{ labelService.tabbedGroupPickerEmpty }}</div>\n <div class=\"empty-item-sub-message\">{{ labelService.tabbedGroupClearSuggestion(displayTab.typeLabel) }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"footer\" *ngIf=\"showFooter\">\n <div class=\"save-cancel-button-container\">\n <novo-button\n class=\"clear-all-button\"\n *ngIf=\"showClearAll\"\n theme=\"dialogue\"\n icon=\"times\"\n side=\"right\"\n color=\"grapefruit\"\n (click)=\"deselectEverything($event)\">{{ labelService.clear }}</novo-button>\n </div>\n <div class=\"save-cancel-button-container\">\n <novo-button\n class=\"cancel-button\"\n marginRight=\"1rem\"\n theme=\"dialogue\"\n (click)=\"cancel()\">{{ labelService.cancel }}</novo-button>\n <novo-button\n class=\"save-button\"\n theme=\"primary\"\n color=\"primary\"\n (click)=\"apply()\">{{ labelService.apply }}</novo-button>\n </div>\n </div>\n</novo-dropdown>", styles: [":host .tabbed-group-picker-button .tabbed-group-picker-button-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:40px;width:100%}::ng-deep .dropdown-container .tabbed-group-picker-search{width:100%;padding:.5em;border-bottom:.1em solid #ccc;position:relative}::ng-deep .dropdown-container .tabbed-group-picker-search input{background:transparent;border:none;border-radius:0;outline:none;height:2rem;width:95%;padding:0;box-shadow:none;box-sizing:content-box;transition:all .3s;color:#3d464d}::ng-deep .dropdown-container .tabbed-group-picker-search input::placeholder{color:var(--form-placeholder)}::ng-deep .dropdown-container .tabbed-group-picker-search i.bhi-search,::ng-deep .dropdown-container .tabbed-group-picker-search i.bhi-times{position:absolute;bottom:1em;right:.5em;color:#9e9e9e;font-size:1.2rem;margin-right:1em}::ng-deep .dropdown-container .tabbed-group-picker-search i.bhi-times{cursor:pointer}::ng-deep .dropdown-container .footer{background:var(--background-main);display:flex;align-items:center;justify-content:space-between;padding:1rem}::ng-deep .dropdown-container .tabbed-group-picker-column-container{display:flex;flex-direction:row;-webkit-user-select:none;user-select:none}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column{display:flex;flex-direction:column;align-items:center}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left{border-right:1px solid #dbdbdb;justify-content:space-between}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left .clear-all-button{margin-bottom:.5em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav{overflow:auto}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab{min-height:3em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab>.novo-tab-link{max-width:100%;height:100%;display:flex;justify-content:space-between;align-items:center}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab.active .novo-tab-link{font-weight:400}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab.active:hover .novo-tab-link{font-weight:400;color:#4a89dc}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab:hover .novo-tab-link{font-weight:400;color:#000;opacity:1}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right{display:block;width:23em;overflow:hidden}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .quick-select{font-weight:500}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .quick-select .quick-select-label{padding:.7em 1.9em 0;background:#f5f5f5;text-transform:uppercase;font-size:.8em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .quick-select .quick-select-list .quick-select-item{background:#f5f5f5;padding:.5em 1.75em;border-bottom:none}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right novo-optgroup cdk-virtual-scroll-viewport{height:27em;overflow-x:hidden}@media (max-height: 720px){::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right novo-optgroup cdk-virtual-scroll-viewport{height:18em}}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right novo-optgroup novo-option:hover.novo-option-inert{background:var(--background-main, rgba(74, 137, 220, .1))}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .tabbed-group-picker-empty-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9e9e9e;width:100%;height:27em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .tabbed-group-picker-empty-item i{padding-bottom:.2em;font-size:3em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .tabbed-group-picker-empty-item .empty-item-main-message{font-weight:500;color:#3d464d}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .tabbed-group-picker-empty-item .empty-item-sub-message{font-size:.9em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i4.NovoNavElement, selector: "novo-nav", inputs: ["theme", "direction", "outlet", "router", "condensed", "selectedIndex"], outputs: ["selectedIndexChange"] }, { kind: "component", type: i4.NovoTabElement, selector: "novo-tab", inputs: ["active", "color", "disabled"], outputs: ["activeChange"] }, { kind: "component", type: i5.NovoButtonElement, selector: "novo-button,button[theme]", inputs: ["color", "side", "size", "theme", "loading", "icon", "disabled"] }, { kind: "component", type: i6.NovoDropdownElement, selector: "novo-dropdown", inputs: ["parentScrollSelector", "parentScrollAction", "containerClass", "side", "scrollStrategy", "keepOpen", "height", "width", "appendToBody", "multiple", "scrollToActiveItemOnOpen"], outputs: ["toggled"] }, { kind: "component", type: i7.NovoOption, selector: "novo-option", inputs: ["selected", "keepOpen", "novoInert", "value", "disabled"], exportAs: ["novoOption"] }, { kind: "component", type: i7.NovoOptgroup, selector: "novo-optgroup", inputs: ["disabled", "label"], exportAs: ["novoOptgroup"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
316
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NovoTabbedGroupPickerElement, selector: "novo-tabbed-group-picker", inputs: { buttonConfig: "buttonConfig", tabs: "tabs", quickSelectConfig: "quickSelectConfig", showFooter: "showFooter", selectionEnabled: "selectionEnabled" }, outputs: { activation: "activation", selectionChange: "selectionChange", applyChange: "applyChange" }, providers: [{ provide: NOVO_OPTION_PARENT_COMPONENT, useExisting: NovoTabbedGroupPickerElement }], viewQueries: [{ propertyName: "scrollableInstance", first: true, predicate: ["tabbedGroupPickerVirtualScrollViewport"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<novo-dropdown (toggled)=\"onDropdownToggle($event)\" multiple #dropdown>\n <novo-button\n class=\"tabbed-group-picker-button\"\n [theme]=\"buttonConfig.theme\"\n [side]=\"buttonConfig.side\"\n [size]=\"buttonConfig.size\"\n [icon]=\"buttonConfig.icon\"\n [loading]=\"loading\">\n <ng-content></ng-content>\n <div class=\"tabbed-group-picker-button-label\">{{ buttonConfig.label }}</div>\n </novo-button>\n <div class=\"tabbed-group-picker-search\" data-automation-id=\"tabbed-group-picker-search\" (keydown)=\"dropdown._handleKeydown($event)\">\n <input #inputElement type=\"text\" [placeholder]=\"labelService.search\" [value]=\"filterText | async\" (input)=\"onFilter($event)\" />\n <i class=\"bhi-search\" *ngIf=\"!(filterText | async)\"></i>\n <i class=\"bhi-times\" *ngIf=\"(filterText | async)\" (click)=\"onClearFilter($event)\" (keydown.space)=\"onClearFilter($event)\"></i>\n </div>\n <div class=\"tabbed-group-picker-column-container\" (keydown)=\"dropdown._handleKeydown($event)\">\n <div class=\"tabbed-group-picker-column left\">\n <novo-nav theme=\"white\" direction=\"vertical\">\n <novo-tab *ngFor=\"let tab of displayTabs\" [attr.data-automation-id]=\"tab.typeName\"\n (activeChange)=\"changeTab(tab)\">\n <span>{{ tab.typeLabel }} ({{ tab.data.length }})</span><i class=\"bhi-next\"></i>\n </novo-tab>\n </novo-nav>\n <novo-button *ngIf=\"showClearAll && !showFooter\" class=\"clear-all-button\" theme=\"dialogue\" icon=\"times\" side=\"right\"\n color=\"grapefruit\" (click)=\"deselectEverything($event)\" (keydown.space)=\"deselectEverything($event)\">{{ labelService.clear }}</novo-button>\n </div>\n <div class=\"tabbed-group-picker-column right\">\n <div class=\"quick-select\" *ngIf=\"quickSelectConfig && !(filterText | async)\">\n <novo-optgroup class=\"quick-select-list\" [label]=\"quickSelectConfig.label\">\n <novo-option\n class=\"quick-select-item\"\n *ngFor=\"let quickSelect of quickSelectConfig.items\"\n [attr.data-automation-id]=\"quickSelect.label\"\n [allowSelection]=\"selectionEnabled\"\n [selected]=\"quickSelect.selected\"\n (click)=\"activateItem(quickSelect)\"\n (keydown.space)=\"activateItem(quickSelect)\"\n novoInert>\n {{quickSelect.label}}\n </novo-option>\n </novo-optgroup>\n </div>\n <novo-optgroup *ngIf=\"displayTab.data.length\">\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [maxBufferPx]=\"maxBufferPx\"\n [minBufferPx]=\"minBufferPx\"\n #tabbedGroupPickerVirtualScrollViewport>\n <novo-option\n *cdkVirtualFor=\"let item of displayTab.data\"\n [attr.data-automation-id]=\"item[displayTab.labelField]\"\n [attr.data-automation-value]=\"item[displayTab.valueField]\"\n [allowSelection]=\"selectionEnabled\"\n [selected]=\"item.selected\"\n (click)=\"activateItem(item, displayTab)\"\n (keydown.space)=\"activateItem(item, displayTab)\"\n novoInert>\n {{item[displayTab.labelField]}}\n </novo-option>\n </cdk-virtual-scroll-viewport>\n </novo-optgroup>\n <div class=\"tabbed-group-picker-empty-item\" *ngIf=\"!displayTab.data.length && (filterText | async)\">\n <i class=\"{{ displayTab.icon || 'bhi-search' }}\"></i>\n <div class=\"empty-item-main-message\">{{ labelService.tabbedGroupPickerEmpty }}</div>\n <div class=\"empty-item-sub-message\">{{ labelService.tabbedGroupClearSuggestion(displayTab.typeLabel) }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"footer\" *ngIf=\"showFooter\">\n <div class=\"save-cancel-button-container\">\n <novo-button\n class=\"clear-all-button\"\n *ngIf=\"showClearAll\"\n theme=\"dialogue\"\n icon=\"times\"\n side=\"right\"\n color=\"grapefruit\"\n (click)=\"deselectEverything($event)\">{{ labelService.clear }}</novo-button>\n </div>\n <div class=\"save-cancel-button-container\">\n <novo-button\n class=\"cancel-button\"\n marginRight=\"1rem\"\n theme=\"dialogue\"\n (click)=\"cancel()\">{{ labelService.cancel }}</novo-button>\n <novo-button\n class=\"save-button\"\n theme=\"primary\"\n color=\"primary\"\n (click)=\"apply()\">{{ labelService.apply }}</novo-button>\n </div>\n </div>\n</novo-dropdown>", styles: [":host .tabbed-group-picker-button .tabbed-group-picker-button-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:40px;width:100%}::ng-deep .dropdown-container .tabbed-group-picker-search{width:100%;padding:.5em;border-bottom:.1em solid #ccc;position:relative}::ng-deep .dropdown-container .tabbed-group-picker-search input{background:transparent;border:none;border-radius:0;outline:none;height:2rem;width:95%;padding:0;box-shadow:none;box-sizing:content-box;transition:all .3s;color:#3d464d}::ng-deep .dropdown-container .tabbed-group-picker-search input::placeholder{color:var(--form-placeholder)}::ng-deep .dropdown-container .tabbed-group-picker-search i.bhi-search,::ng-deep .dropdown-container .tabbed-group-picker-search i.bhi-times{position:absolute;bottom:1em;right:.5em;color:#9e9e9e;font-size:1.2rem;margin-right:1em}::ng-deep .dropdown-container .tabbed-group-picker-search i.bhi-times{cursor:pointer}::ng-deep .dropdown-container .footer{background:var(--background-main);display:flex;align-items:center;justify-content:space-between;padding:1rem}::ng-deep .dropdown-container .tabbed-group-picker-column-container{display:flex;flex-direction:row;-webkit-user-select:none;user-select:none}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column{display:flex;flex-direction:column;align-items:center}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left{border-right:1px solid #dbdbdb;justify-content:space-between}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left .clear-all-button{margin-bottom:.5em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav{overflow:auto}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab{min-height:3em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab>.novo-tab-link{max-width:100%;height:100%;display:flex;justify-content:space-between;align-items:center}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab.active .novo-tab-link{font-weight:400}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab.active:hover .novo-tab-link{font-weight:400;color:#4a89dc}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab:hover .novo-tab-link{font-weight:400;color:#000;opacity:1}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right{display:block;width:23em;overflow:hidden}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .quick-select{font-weight:500}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .quick-select .quick-select-label{padding:.7em 1.9em 0;background:#f5f5f5;text-transform:uppercase;font-size:.8em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .quick-select .quick-select-list .quick-select-item{background:#f5f5f5;padding:.5em .8em;border-bottom:none}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right novo-optgroup cdk-virtual-scroll-viewport{height:27em;overflow-x:hidden}@media (max-height: 720px){::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right novo-optgroup cdk-virtual-scroll-viewport{height:18em}}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right novo-optgroup novo-option:hover.novo-option-inert{background:var(--background-main, rgba(74, 137, 220, .1))}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .tabbed-group-picker-empty-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9e9e9e;width:100%;height:27em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .tabbed-group-picker-empty-item i{padding-bottom:.2em;font-size:3em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .tabbed-group-picker-empty-item .empty-item-main-message{font-weight:500;color:#3d464d}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .tabbed-group-picker-empty-item .empty-item-sub-message{font-size:.9em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i4.NovoNavElement, selector: "novo-nav", inputs: ["theme", "direction", "outlet", "router", "condensed", "selectedIndex"], outputs: ["selectedIndexChange"] }, { kind: "component", type: i4.NovoTabElement, selector: "novo-tab", inputs: ["active", "color", "disabled"], outputs: ["activeChange"] }, { kind: "component", type: i5.NovoButtonElement, selector: "novo-button,button[theme]", inputs: ["color", "side", "size", "theme", "loading", "icon", "disabled"] }, { kind: "component", type: i6.NovoDropdownElement, selector: "novo-dropdown", inputs: ["parentScrollSelector", "parentScrollAction", "containerClass", "side", "scrollStrategy", "keepOpen", "height", "width", "appendToBody", "multiple", "scrollToActiveItemOnOpen"], outputs: ["toggled"] }, { kind: "component", type: i7.NovoOption, selector: "novo-option", inputs: ["selected", "keepOpen", "novoInert", "value", "disabled"], exportAs: ["novoOption"] }, { kind: "component", type: i7.NovoOptgroup, selector: "novo-optgroup", inputs: ["disabled", "label"], exportAs: ["novoOptgroup"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
317
317
|
}
|
|
318
318
|
__decorate([
|
|
319
319
|
BooleanInput(),
|
|
@@ -321,7 +321,7 @@ __decorate([
|
|
|
321
321
|
], NovoTabbedGroupPickerElement.prototype, "selectionEnabled", void 0);
|
|
322
322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NovoTabbedGroupPickerElement, decorators: [{
|
|
323
323
|
type: Component,
|
|
324
|
-
args: [{ selector: 'novo-tabbed-group-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NOVO_OPTION_PARENT_COMPONENT, useExisting: NovoTabbedGroupPickerElement }], template: "<novo-dropdown (toggled)=\"onDropdownToggle($event)\" multiple #dropdown>\n <novo-button\n class=\"tabbed-group-picker-button\"\n [theme]=\"buttonConfig.theme\"\n [side]=\"buttonConfig.side\"\n [size]=\"buttonConfig.size\"\n [icon]=\"buttonConfig.icon\"\n [loading]=\"loading\">\n <ng-content></ng-content>\n <div class=\"tabbed-group-picker-button-label\">{{ buttonConfig.label }}</div>\n </novo-button>\n <div class=\"tabbed-group-picker-search\" data-automation-id=\"tabbed-group-picker-search\" (keydown)=\"dropdown._handleKeydown($event)\">\n <input #inputElement type=\"text\" [placeholder]=\"labelService.search\" [value]=\"filterText | async\" (input)=\"onFilter($event)\" />\n <i class=\"bhi-search\" *ngIf=\"!(filterText | async)\"></i>\n <i class=\"bhi-times\" *ngIf=\"(filterText | async)\" (click)=\"onClearFilter($event)\" (keydown.space)=\"onClearFilter($event)\"></i>\n </div>\n <div class=\"tabbed-group-picker-column-container\" (keydown)=\"dropdown._handleKeydown($event)\">\n <div class=\"tabbed-group-picker-column left\">\n <novo-nav theme=\"white\" direction=\"vertical\">\n <novo-tab *ngFor=\"let tab of displayTabs\" [attr.data-automation-id]=\"tab.typeName\"\n (activeChange)=\"changeTab(tab)\">\n <span>{{ tab.typeLabel }} ({{ tab.data.length }})</span><i class=\"bhi-next\"></i>\n </novo-tab>\n </novo-nav>\n <novo-button *ngIf=\"showClearAll && !showFooter\" class=\"clear-all-button\" theme=\"dialogue\" icon=\"times\" side=\"right\"\n color=\"grapefruit\" (click)=\"deselectEverything($event)\" (keydown.space)=\"deselectEverything($event)\">{{ labelService.clear }}</novo-button>\n </div>\n <div class=\"tabbed-group-picker-column right\">\n <div class=\"quick-select\" *ngIf=\"quickSelectConfig && !(filterText | async)\">\n <novo-optgroup class=\"quick-select-list\" [label]=\"quickSelectConfig.label\">\n <novo-option\n class=\"quick-select-item\"\n *ngFor=\"let quickSelect of quickSelectConfig.items\"\n [attr.data-automation-id]=\"quickSelect.label\"\n [allowSelection]=\"selectionEnabled\"\n [selected]=\"quickSelect.selected\"\n (click)=\"activateItem(quickSelect)\"\n (keydown.space)=\"activateItem(quickSelect)\"\n novoInert>\n {{quickSelect.label}}\n </novo-option>\n </novo-optgroup>\n </div>\n <novo-optgroup *ngIf=\"displayTab.data.length\">\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [maxBufferPx]=\"maxBufferPx\"\n [minBufferPx]=\"minBufferPx\"\n #tabbedGroupPickerVirtualScrollViewport>\n <novo-option\n *cdkVirtualFor=\"let item of displayTab.data\"\n [attr.data-automation-id]=\"item[displayTab.labelField]\"\n [attr.data-automation-value]=\"item[displayTab.valueField]\"\n [allowSelection]=\"selectionEnabled\"\n [selected]=\"item.selected\"\n (click)=\"activateItem(item, displayTab)\"\n (keydown.space)=\"activateItem(item, displayTab)\"\n novoInert>\n {{item[displayTab.labelField]}}\n </novo-option>\n </cdk-virtual-scroll-viewport>\n </novo-optgroup>\n <div class=\"tabbed-group-picker-empty-item\" *ngIf=\"!displayTab.data.length && (filterText | async)\">\n <i class=\"{{ displayTab.icon || 'bhi-search' }}\"></i>\n <div class=\"empty-item-main-message\">{{ labelService.tabbedGroupPickerEmpty }}</div>\n <div class=\"empty-item-sub-message\">{{ labelService.tabbedGroupClearSuggestion(displayTab.typeLabel) }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"footer\" *ngIf=\"showFooter\">\n <div class=\"save-cancel-button-container\">\n <novo-button\n class=\"clear-all-button\"\n *ngIf=\"showClearAll\"\n theme=\"dialogue\"\n icon=\"times\"\n side=\"right\"\n color=\"grapefruit\"\n (click)=\"deselectEverything($event)\">{{ labelService.clear }}</novo-button>\n </div>\n <div class=\"save-cancel-button-container\">\n <novo-button\n class=\"cancel-button\"\n marginRight=\"1rem\"\n theme=\"dialogue\"\n (click)=\"cancel()\">{{ labelService.cancel }}</novo-button>\n <novo-button\n class=\"save-button\"\n theme=\"primary\"\n color=\"primary\"\n (click)=\"apply()\">{{ labelService.apply }}</novo-button>\n </div>\n </div>\n</novo-dropdown>", styles: [":host .tabbed-group-picker-button .tabbed-group-picker-button-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:40px;width:100%}::ng-deep .dropdown-container .tabbed-group-picker-search{width:100%;padding:.5em;border-bottom:.1em solid #ccc;position:relative}::ng-deep .dropdown-container .tabbed-group-picker-search input{background:transparent;border:none;border-radius:0;outline:none;height:2rem;width:95%;padding:0;box-shadow:none;box-sizing:content-box;transition:all .3s;color:#3d464d}::ng-deep .dropdown-container .tabbed-group-picker-search input::placeholder{color:var(--form-placeholder)}::ng-deep .dropdown-container .tabbed-group-picker-search i.bhi-search,::ng-deep .dropdown-container .tabbed-group-picker-search i.bhi-times{position:absolute;bottom:1em;right:.5em;color:#9e9e9e;font-size:1.2rem;margin-right:1em}::ng-deep .dropdown-container .tabbed-group-picker-search i.bhi-times{cursor:pointer}::ng-deep .dropdown-container .footer{background:var(--background-main);display:flex;align-items:center;justify-content:space-between;padding:1rem}::ng-deep .dropdown-container .tabbed-group-picker-column-container{display:flex;flex-direction:row;-webkit-user-select:none;user-select:none}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column{display:flex;flex-direction:column;align-items:center}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left{border-right:1px solid #dbdbdb;justify-content:space-between}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left .clear-all-button{margin-bottom:.5em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav{overflow:auto}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab{min-height:3em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab>.novo-tab-link{max-width:100%;height:100%;display:flex;justify-content:space-between;align-items:center}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab.active .novo-tab-link{font-weight:400}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab.active:hover .novo-tab-link{font-weight:400;color:#4a89dc}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab:hover .novo-tab-link{font-weight:400;color:#000;opacity:1}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right{display:block;width:23em;overflow:hidden}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .quick-select{font-weight:500}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .quick-select .quick-select-label{padding:.7em 1.9em 0;background:#f5f5f5;text-transform:uppercase;font-size:.8em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .quick-select .quick-select-list .quick-select-item{background:#f5f5f5;padding:.5em
|
|
324
|
+
args: [{ selector: 'novo-tabbed-group-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NOVO_OPTION_PARENT_COMPONENT, useExisting: NovoTabbedGroupPickerElement }], template: "<novo-dropdown (toggled)=\"onDropdownToggle($event)\" multiple #dropdown>\n <novo-button\n class=\"tabbed-group-picker-button\"\n [theme]=\"buttonConfig.theme\"\n [side]=\"buttonConfig.side\"\n [size]=\"buttonConfig.size\"\n [icon]=\"buttonConfig.icon\"\n [loading]=\"loading\">\n <ng-content></ng-content>\n <div class=\"tabbed-group-picker-button-label\">{{ buttonConfig.label }}</div>\n </novo-button>\n <div class=\"tabbed-group-picker-search\" data-automation-id=\"tabbed-group-picker-search\" (keydown)=\"dropdown._handleKeydown($event)\">\n <input #inputElement type=\"text\" [placeholder]=\"labelService.search\" [value]=\"filterText | async\" (input)=\"onFilter($event)\" />\n <i class=\"bhi-search\" *ngIf=\"!(filterText | async)\"></i>\n <i class=\"bhi-times\" *ngIf=\"(filterText | async)\" (click)=\"onClearFilter($event)\" (keydown.space)=\"onClearFilter($event)\"></i>\n </div>\n <div class=\"tabbed-group-picker-column-container\" (keydown)=\"dropdown._handleKeydown($event)\">\n <div class=\"tabbed-group-picker-column left\">\n <novo-nav theme=\"white\" direction=\"vertical\">\n <novo-tab *ngFor=\"let tab of displayTabs\" [attr.data-automation-id]=\"tab.typeName\"\n (activeChange)=\"changeTab(tab)\">\n <span>{{ tab.typeLabel }} ({{ tab.data.length }})</span><i class=\"bhi-next\"></i>\n </novo-tab>\n </novo-nav>\n <novo-button *ngIf=\"showClearAll && !showFooter\" class=\"clear-all-button\" theme=\"dialogue\" icon=\"times\" side=\"right\"\n color=\"grapefruit\" (click)=\"deselectEverything($event)\" (keydown.space)=\"deselectEverything($event)\">{{ labelService.clear }}</novo-button>\n </div>\n <div class=\"tabbed-group-picker-column right\">\n <div class=\"quick-select\" *ngIf=\"quickSelectConfig && !(filterText | async)\">\n <novo-optgroup class=\"quick-select-list\" [label]=\"quickSelectConfig.label\">\n <novo-option\n class=\"quick-select-item\"\n *ngFor=\"let quickSelect of quickSelectConfig.items\"\n [attr.data-automation-id]=\"quickSelect.label\"\n [allowSelection]=\"selectionEnabled\"\n [selected]=\"quickSelect.selected\"\n (click)=\"activateItem(quickSelect)\"\n (keydown.space)=\"activateItem(quickSelect)\"\n novoInert>\n {{quickSelect.label}}\n </novo-option>\n </novo-optgroup>\n </div>\n <novo-optgroup *ngIf=\"displayTab.data.length\">\n <cdk-virtual-scroll-viewport\n [itemSize]=\"virtualScrollItemSize\"\n [maxBufferPx]=\"maxBufferPx\"\n [minBufferPx]=\"minBufferPx\"\n #tabbedGroupPickerVirtualScrollViewport>\n <novo-option\n *cdkVirtualFor=\"let item of displayTab.data\"\n [attr.data-automation-id]=\"item[displayTab.labelField]\"\n [attr.data-automation-value]=\"item[displayTab.valueField]\"\n [allowSelection]=\"selectionEnabled\"\n [selected]=\"item.selected\"\n (click)=\"activateItem(item, displayTab)\"\n (keydown.space)=\"activateItem(item, displayTab)\"\n novoInert>\n {{item[displayTab.labelField]}}\n </novo-option>\n </cdk-virtual-scroll-viewport>\n </novo-optgroup>\n <div class=\"tabbed-group-picker-empty-item\" *ngIf=\"!displayTab.data.length && (filterText | async)\">\n <i class=\"{{ displayTab.icon || 'bhi-search' }}\"></i>\n <div class=\"empty-item-main-message\">{{ labelService.tabbedGroupPickerEmpty }}</div>\n <div class=\"empty-item-sub-message\">{{ labelService.tabbedGroupClearSuggestion(displayTab.typeLabel) }}\n </div>\n </div>\n </div>\n </div>\n <div class=\"footer\" *ngIf=\"showFooter\">\n <div class=\"save-cancel-button-container\">\n <novo-button\n class=\"clear-all-button\"\n *ngIf=\"showClearAll\"\n theme=\"dialogue\"\n icon=\"times\"\n side=\"right\"\n color=\"grapefruit\"\n (click)=\"deselectEverything($event)\">{{ labelService.clear }}</novo-button>\n </div>\n <div class=\"save-cancel-button-container\">\n <novo-button\n class=\"cancel-button\"\n marginRight=\"1rem\"\n theme=\"dialogue\"\n (click)=\"cancel()\">{{ labelService.cancel }}</novo-button>\n <novo-button\n class=\"save-button\"\n theme=\"primary\"\n color=\"primary\"\n (click)=\"apply()\">{{ labelService.apply }}</novo-button>\n </div>\n </div>\n</novo-dropdown>", styles: [":host .tabbed-group-picker-button .tabbed-group-picker-button-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:40px;width:100%}::ng-deep .dropdown-container .tabbed-group-picker-search{width:100%;padding:.5em;border-bottom:.1em solid #ccc;position:relative}::ng-deep .dropdown-container .tabbed-group-picker-search input{background:transparent;border:none;border-radius:0;outline:none;height:2rem;width:95%;padding:0;box-shadow:none;box-sizing:content-box;transition:all .3s;color:#3d464d}::ng-deep .dropdown-container .tabbed-group-picker-search input::placeholder{color:var(--form-placeholder)}::ng-deep .dropdown-container .tabbed-group-picker-search i.bhi-search,::ng-deep .dropdown-container .tabbed-group-picker-search i.bhi-times{position:absolute;bottom:1em;right:.5em;color:#9e9e9e;font-size:1.2rem;margin-right:1em}::ng-deep .dropdown-container .tabbed-group-picker-search i.bhi-times{cursor:pointer}::ng-deep .dropdown-container .footer{background:var(--background-main);display:flex;align-items:center;justify-content:space-between;padding:1rem}::ng-deep .dropdown-container .tabbed-group-picker-column-container{display:flex;flex-direction:row;-webkit-user-select:none;user-select:none}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column{display:flex;flex-direction:column;align-items:center}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left{border-right:1px solid #dbdbdb;justify-content:space-between}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left .clear-all-button{margin-bottom:.5em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav{overflow:auto}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab{min-height:3em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab>.novo-tab-link{max-width:100%;height:100%;display:flex;justify-content:space-between;align-items:center}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab.active .novo-tab-link{font-weight:400}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab.active:hover .novo-tab-link{font-weight:400;color:#4a89dc}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.left novo-nav>novo-tab:hover .novo-tab-link{font-weight:400;color:#000;opacity:1}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right{display:block;width:23em;overflow:hidden}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .quick-select{font-weight:500}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .quick-select .quick-select-label{padding:.7em 1.9em 0;background:#f5f5f5;text-transform:uppercase;font-size:.8em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .quick-select .quick-select-list .quick-select-item{background:#f5f5f5;padding:.5em .8em;border-bottom:none}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right novo-optgroup cdk-virtual-scroll-viewport{height:27em;overflow-x:hidden}@media (max-height: 720px){::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right novo-optgroup cdk-virtual-scroll-viewport{height:18em}}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right novo-optgroup novo-option:hover.novo-option-inert{background:var(--background-main, rgba(74, 137, 220, .1))}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .tabbed-group-picker-empty-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9e9e9e;width:100%;height:27em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .tabbed-group-picker-empty-item i{padding-bottom:.2em;font-size:3em}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .tabbed-group-picker-empty-item .empty-item-main-message{font-weight:500;color:#3d464d}::ng-deep .dropdown-container .tabbed-group-picker-column-container .tabbed-group-picker-column.right .tabbed-group-picker-empty-item .empty-item-sub-message{font-size:.9em}\n"] }]
|
|
325
325
|
}], ctorParameters: () => [{ type: i1.NovoLabelService }, { type: i0.ChangeDetectorRef }], propDecorators: { scrollableInstance: [{
|
|
326
326
|
type: ViewChild,
|
|
327
327
|
args: ['tabbedGroupPickerVirtualScrollViewport']
|