@energycap/components 0.46.14-highlighting-normalized-pattern.20260701-1417 → 0.46.14-highlighting-normalized-pattern.20260702-1458
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.
|
@@ -2422,7 +2422,21 @@ class HighlightTextPipe {
|
|
|
2422
2422
|
return value.replace(regex, this.strongWrap);
|
|
2423
2423
|
}
|
|
2424
2424
|
transformNormalized(value, searchText, normalizePattern) {
|
|
2425
|
-
|
|
2425
|
+
let stripRegex;
|
|
2426
|
+
try {
|
|
2427
|
+
stripRegex = new RegExp(normalizePattern, 'g');
|
|
2428
|
+
}
|
|
2429
|
+
catch {
|
|
2430
|
+
const regex = new RegExp(this.escapeRegex(searchText), 'gi');
|
|
2431
|
+
return value.replace(regex, this.strongWrap);
|
|
2432
|
+
}
|
|
2433
|
+
// Try exact match first (including characters that would be stripped)
|
|
2434
|
+
const exactRegex = new RegExp(this.escapeRegex(searchText), 'gi');
|
|
2435
|
+
const exactResult = value.replace(exactRegex, this.strongWrap);
|
|
2436
|
+
if (exactResult !== value) {
|
|
2437
|
+
return exactResult;
|
|
2438
|
+
}
|
|
2439
|
+
// Fall back to normalized matching
|
|
2426
2440
|
// Build normalized value and a position map (normalized index → original index)
|
|
2427
2441
|
const positionMap = [];
|
|
2428
2442
|
let normalizedValue = '';
|
|
@@ -2507,6 +2521,8 @@ class TagsComponent {
|
|
|
2507
2521
|
this.isSubtle = false;
|
|
2508
2522
|
/** Highlights text found in any of the tags */
|
|
2509
2523
|
this.highlightText = '';
|
|
2524
|
+
/** Regex pattern string used to normalize text before highlight matching (e.g. '\\s' to ignore whitespace) */
|
|
2525
|
+
this.highlightNormalizePattern = '';
|
|
2510
2526
|
/**
|
|
2511
2527
|
* Emits the tag item when the tag's close button is clicked
|
|
2512
2528
|
*/
|
|
@@ -2548,11 +2564,11 @@ class TagsComponent {
|
|
|
2548
2564
|
this.tagClosed.emit(tag);
|
|
2549
2565
|
}
|
|
2550
2566
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2551
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TagsComponent, isStandalone: false, selector: "ec-tags", inputs: { id: "id", tags: "tags", wrap: "wrap", isCondensed: "isCondensed", isSubtle: "isSubtle", highlightText: "highlightText" }, outputs: { tagClosed: "tagClosed" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"tags\"\n [class.is-wrapped]=\"wrap\">\n @for (tag of tagsArray; track tag; let i = $index) {\n <li\n id=\"{{id}}_tag_{{i}}\"\n class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\n [class.is-condensed]=\"isCondensed\"\n [class.is-subtle]=\"isSubtle\"\n title=\"{{(tag.tooltip ?? '') | translate}}\">\n @if (tag.icon) {\n <i\n class=\"ec-icon {{tag.icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (!tag.url) {\n <span [innerHtml]=\"tag.label | translate | highlightText:highlightText\"></span>\n }\n @if (tag.url) {\n <a\n id=\"{{id}}_tag_{{i}}_link\"\n class=\"font-weight-bold\"\n href=\"{{tag.url}}\"\n target=\"{{tag.target}}\">{{tag.label | translate}}</a>\n }\n @if (tag.isDismissable) {\n <button id=\"{{id}}_tag_{{i}}_dismissButton\"\n (click)=\"closeTag(tag)\"\n [attr.aria-label]=\"'Dismiss ' + (tag.label | translate)\"\n class=\"tag-close-btn\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n</ul>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag a[target=_blank]{color:var(--ec-color-brand-black)}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightTextPipe, name: "highlightText" }] }); }
|
|
2567
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TagsComponent, isStandalone: false, selector: "ec-tags", inputs: { id: "id", tags: "tags", wrap: "wrap", isCondensed: "isCondensed", isSubtle: "isSubtle", highlightText: "highlightText", highlightNormalizePattern: "highlightNormalizePattern" }, outputs: { tagClosed: "tagClosed" }, usesOnChanges: true, ngImport: i0, template: "<ul class=\"tags\"\n [class.is-wrapped]=\"wrap\">\n @for (tag of tagsArray; track tag; let i = $index) {\n <li\n id=\"{{id}}_tag_{{i}}\"\n class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\n [class.is-condensed]=\"isCondensed\"\n [class.is-subtle]=\"isSubtle\"\n title=\"{{(tag.tooltip ?? '') | translate}}\">\n @if (tag.icon) {\n <i\n class=\"ec-icon {{tag.icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (!tag.url) {\n <span [innerHtml]=\"tag.label | translate | highlightText:highlightText:highlightNormalizePattern\"></span>\n }\n @if (tag.url) {\n <a\n id=\"{{id}}_tag_{{i}}_link\"\n class=\"font-weight-bold\"\n href=\"{{tag.url}}\"\n target=\"{{tag.target}}\">{{tag.label | translate}}</a>\n }\n @if (tag.isDismissable) {\n <button id=\"{{id}}_tag_{{i}}_dismissButton\"\n (click)=\"closeTag(tag)\"\n [attr.aria-label]=\"'Dismiss ' + (tag.label | translate)\"\n class=\"tag-close-btn\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n</ul>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag a[target=_blank]{color:var(--ec-color-brand-black)}\n"], dependencies: [{ kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: HighlightTextPipe, name: "highlightText" }] }); }
|
|
2552
2568
|
}
|
|
2553
2569
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TagsComponent, decorators: [{
|
|
2554
2570
|
type: Component,
|
|
2555
|
-
args: [{ selector: 'ec-tags', standalone: false, template: "<ul class=\"tags\"\n [class.is-wrapped]=\"wrap\">\n @for (tag of tagsArray; track tag; let i = $index) {\n <li\n id=\"{{id}}_tag_{{i}}\"\n class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\n [class.is-condensed]=\"isCondensed\"\n [class.is-subtle]=\"isSubtle\"\n title=\"{{(tag.tooltip ?? '') | translate}}\">\n @if (tag.icon) {\n <i\n class=\"ec-icon {{tag.icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (!tag.url) {\n <span [innerHtml]=\"tag.label | translate | highlightText:highlightText\"></span>\n }\n @if (tag.url) {\n <a\n id=\"{{id}}_tag_{{i}}_link\"\n class=\"font-weight-bold\"\n href=\"{{tag.url}}\"\n target=\"{{tag.target}}\">{{tag.label | translate}}</a>\n }\n @if (tag.isDismissable) {\n <button id=\"{{id}}_tag_{{i}}_dismissButton\"\n (click)=\"closeTag(tag)\"\n [attr.aria-label]=\"'Dismiss ' + (tag.label | translate)\"\n class=\"tag-close-btn\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n</ul>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag a[target=_blank]{color:var(--ec-color-brand-black)}\n"] }]
|
|
2571
|
+
args: [{ selector: 'ec-tags', standalone: false, template: "<ul class=\"tags\"\n [class.is-wrapped]=\"wrap\">\n @for (tag of tagsArray; track tag; let i = $index) {\n <li\n id=\"{{id}}_tag_{{i}}\"\n class=\"tag is-{{tag.type}} {{tag.classList}} mr-1\"\n [class.is-condensed]=\"isCondensed\"\n [class.is-subtle]=\"isSubtle\"\n title=\"{{(tag.tooltip ?? '') | translate}}\">\n @if (tag.icon) {\n <i\n class=\"ec-icon {{tag.icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (!tag.url) {\n <span [innerHtml]=\"tag.label | translate | highlightText:highlightText:highlightNormalizePattern\"></span>\n }\n @if (tag.url) {\n <a\n id=\"{{id}}_tag_{{i}}_link\"\n class=\"font-weight-bold\"\n href=\"{{tag.url}}\"\n target=\"{{tag.target}}\">{{tag.label | translate}}</a>\n }\n @if (tag.isDismissable) {\n <button id=\"{{id}}_tag_{{i}}_dismissButton\"\n (click)=\"closeTag(tag)\"\n [attr.aria-label]=\"'Dismiss ' + (tag.label | translate)\"\n class=\"tag-close-btn\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n</ul>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}.tags{padding:0;margin:0;list-style:none;display:flex}.tags.is-wrapped{flex-wrap:wrap;margin-top:.25rem}.tags.is-wrapped>.tag{margin-bottom:.25rem}.tag a[target=_blank]{color:var(--ec-color-brand-black)}\n"] }]
|
|
2556
2572
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
2557
2573
|
type: Input
|
|
2558
2574
|
}], tags: [{
|
|
@@ -2565,6 +2581,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
2565
2581
|
type: Input
|
|
2566
2582
|
}], highlightText: [{
|
|
2567
2583
|
type: Input
|
|
2584
|
+
}], highlightNormalizePattern: [{
|
|
2585
|
+
type: Input
|
|
2568
2586
|
}], tagClosed: [{
|
|
2569
2587
|
type: Output
|
|
2570
2588
|
}] } });
|
|
@@ -2681,7 +2699,7 @@ class PopoverComponent {
|
|
|
2681
2699
|
return { originX: overlayX, originY: overlayY, overlayX: overlayX, overlayY: overlayY };
|
|
2682
2700
|
}
|
|
2683
2701
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PopoverComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: TooltipService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2684
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PopoverComponent, isStandalone: false, selector: "ec-popover", inputs: { icon: "icon", tag: "tag", tagHoverType: "tagHoverType", contentPosition: "contentPosition", iconHoverClass: "iconHoverClass", ariaLabel: "ariaLabel" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<!-- Before hover state -->\n<div class=\"p-2\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"resolvedAriaLabel\"\n [attr.aria-describedby]=\"isVisible ? contentId : null\"\n (keydown)=\"onTriggerKeydown($event)\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed] = \"true\"\n [tags]=\"tag\">\n </ec-tags>\n }\n</div>\n<!-- ./Before hover state -->\n\n<!-- Hover state -->\n<ng-template #content>\n <article class=\"popover-content\"\n role=\"tooltip\"\n [id]=\"contentId\"\n (document:mousemove)=\"onMouseMove($event)\">\n <ng-content></ng-content>\n </article>\n <div class=\"p-2 {{contentPosition}}\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed]=\"true\"\n [tags]=\"hoverTag\">\n </ec-tags>\n }\n </div>\n</ng-template>\n<!-- ./Hover state -->\n", styles: [":host{line-height:.75rem;display:inline-block}:host>div{border-radius:var(--ec-border-radius)}:host>div:focus-visible{outline:.125rem solid var(--ec-color-interactive);outline-offset:-.125rem}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"], dependencies: [{ kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText"], outputs: ["tagClosed"] }] }); }
|
|
2702
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PopoverComponent, isStandalone: false, selector: "ec-popover", inputs: { icon: "icon", tag: "tag", tagHoverType: "tagHoverType", contentPosition: "contentPosition", iconHoverClass: "iconHoverClass", ariaLabel: "ariaLabel" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<!-- Before hover state -->\n<div class=\"p-2\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"resolvedAriaLabel\"\n [attr.aria-describedby]=\"isVisible ? contentId : null\"\n (keydown)=\"onTriggerKeydown($event)\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed] = \"true\"\n [tags]=\"tag\">\n </ec-tags>\n }\n</div>\n<!-- ./Before hover state -->\n\n<!-- Hover state -->\n<ng-template #content>\n <article class=\"popover-content\"\n role=\"tooltip\"\n [id]=\"contentId\"\n (document:mousemove)=\"onMouseMove($event)\">\n <ng-content></ng-content>\n </article>\n <div class=\"p-2 {{contentPosition}}\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed]=\"true\"\n [tags]=\"hoverTag\">\n </ec-tags>\n }\n </div>\n</ng-template>\n<!-- ./Hover state -->\n", styles: [":host{line-height:.75rem;display:inline-block}:host>div{border-radius:var(--ec-border-radius)}:host>div:focus-visible{outline:.125rem solid var(--ec-color-interactive);outline-offset:-.125rem}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"], dependencies: [{ kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText", "highlightNormalizePattern"], outputs: ["tagClosed"] }] }); }
|
|
2685
2703
|
}
|
|
2686
2704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
2687
2705
|
type: Component,
|
|
@@ -9425,7 +9443,7 @@ class MultiselectComponent extends FormControlBase {
|
|
|
9425
9443
|
});
|
|
9426
9444
|
}
|
|
9427
9445
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MultiselectComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9428
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MultiselectComponent, isStandalone: false, selector: "ec-multiselect", inputs: { options: "options", menuPosition: "menuPosition", popupFixed: "popupFixed", placeholder: "placeholder", tagType: "tagType", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", allowCustom: "allowCustom", maxSelections: "maxSelections" }, outputs: { search: "search", selectionChanged: "selectionChanged" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkboxMenuTemplate", first: true, predicate: ["checkboxMenuTemplate"], descendants: true, static: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled}\">\n\n @if (label) {\n <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span> {{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"textbox-group control-input\"\n *ecPopup=\"dropdownmenu\">\n <div class=\"multiselect-input\"\n [attr.id]=\"id + '_input_container'\"\n role=\"combobox\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n aria-haspopup=\"listbox\"\n [attr.aria-owns]=\"id + '_menu_list'\"\n [class.is-focused]=\"menuStatus === 'visible'\"\n [class.is-disabled]=\"formModel.disabled\"\n [class.is-empty]=\"selectedItems.length === 0\"\n [class.is-required]=\"required\"\n [class.has-selections]=\"selectedItems.length > 0\"\n (click)=\"toggleMenu($event)\">\n\n <!-- Selected tags -->\n @if (selectedTags.length > 0) {\n <ec-tags\n id=\"{{id}}_tags\"\n [tags]=\"selectedTags\"\n [wrap]=\"true\"\n [isCondensed]=\"false\"\n [isSubtle]=\"true\"\n (tagClosed)=\"removeTag($event)\"\n (click)=\"$event.stopPropagation()\">\n </ec-tags>\n }\n\n <!-- Filter input -->\n <input\n #filterInput\n class=\"multiselect-filter-input\"\n type=\"text\"\n [id]=\"id + '_filter'\"\n [formControl]=\"filterFormModel\"\n [placeholder]=\"effectivePlaceholder\"\n [tabindex]=\"tabindex\"\n (input)=\"onFilterInput()\"\n (keydown)=\"keyNavigate($event)\"\n (focusout)=\"onBlur()\"\n (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\n [attr.aria-activedescendant]=\"activeDescendantId\"\n [attr.aria-labelledby]=\"label ? id + '_label' : null\"\n [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\n [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\n\n <i class=\"ec-icon icon-required\"></i>\n <i class=\"ec-icon icon-invalid\"></i>\n </div>\n\n <!-- Live region for selection announcements -->\n <span [id]=\"id + '_selection_status'\"\n class=\"sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\">\n {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\n </span>\n\n <!-- Clear button -->\n @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\n <ec-button class=\"multiselect-clear-btn\"\n [id]=\"id + '_clear'\"\n icon=\"icon-cancel\"\n type=\"secondary\"\n [tabindex]=\"0\"\n attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\n (click)=\"clearAll(); $event.stopPropagation()\">\n </ec-button>\n }\n\n <!-- Toggle button -->\n <ec-button class=\"textbox-group-btn-right\"\n [id]=\"id + '_button'\"\n [disabled]=\"formModel.disabled\"\n icon=\"icon-caret-down\"\n [tabindex]=\"0\"\n type=\"secondary\"\n [attr.aria-label]=\"'Toggle dropdown'\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n (click)=\"toggleMenu($event)\"\n [class.active]=\"menuStatus === 'visible'\">\n </ec-button>\n </div>\n</div>\n\n<ng-template #dropdownmenu>\n <div class=\"popup\"\n ecOverlay\n role=\"listbox\"\n [attr.id]=\"id + '_listbox'\"\n [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\n aria-multiselectable=\"true\"\n [status]=\"pending ? 'pending' : 'hasData'\">\n\n <ec-menu id=\"{{id}}_menu\"\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\n [templateType]=\"'checkAndLabel'\"\n [customMenuTemplate]=\"checkboxMenuTemplate\"\n [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\n [noDataText]=\"noMatchesText\"\n [items]=\"filteredOptions\"\n [selected]=\"highlightedItem\"\n (selectedChanged)=\"onItemSelected($event)\"\n [truncateItems]=\"truncateItems\"\n [maintainSelectedItem]=\"false\">\n </ec-menu>\n\n @if (showAddCustomOption) {\n <div class=\"add-custom-option\"\n role=\"option\"\n attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\n tabindex=\"-1\"\n (click)=\"addCustomItem()\">\n <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\n <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n <div class=\"d-flex\"\n role=\"option\"\n [attr.aria-selected]=\"!!item.checked\"\n [attr.aria-label]=\"item.label\">\n @if (item === selectAllItem) {\n <ec-checkbox\n id=\"{{id}}_selectAll_checkbox\"\n class=\"m-0 pr-3\"\n [formModel]=\"selectAllFormControl\"\n [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\n [label]=\"item.label\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <ec-checkbox\n id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n class=\"m-0 pr-3\"\n [formModel]=\"getCheckboxFormControl(item)\"\n [attr.aria-label]=\"item.label\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n <span>{{item.label}}</span>\n }\n }\n </div>\n</ng-template>\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right:1px solid var(--ec-form-control-border-color-readonly);border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius);background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly);cursor:default}.control.is-readonly .multiselect-input .multiselect-filter-input{color:var(--ec-form-control-color-readonly)}.control.is-readonly .multiselect-input .multiselect-filter-input::placeholder{color:var(--ec-form-control-color-readonly)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin:0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button:hover{background-color:var(--ec-background-color-hover)}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText"], outputs: ["tagClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
9446
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MultiselectComponent, isStandalone: false, selector: "ec-multiselect", inputs: { options: "options", menuPosition: "menuPosition", popupFixed: "popupFixed", placeholder: "placeholder", tagType: "tagType", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", allowCustom: "allowCustom", maxSelections: "maxSelections" }, outputs: { search: "search", selectionChanged: "selectionChanged" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkboxMenuTemplate", first: true, predicate: ["checkboxMenuTemplate"], descendants: true, static: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled}\">\n\n @if (label) {\n <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span> {{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"textbox-group control-input\"\n *ecPopup=\"dropdownmenu\">\n <div class=\"multiselect-input\"\n [attr.id]=\"id + '_input_container'\"\n role=\"combobox\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n aria-haspopup=\"listbox\"\n [attr.aria-owns]=\"id + '_menu_list'\"\n [class.is-focused]=\"menuStatus === 'visible'\"\n [class.is-disabled]=\"formModel.disabled\"\n [class.is-empty]=\"selectedItems.length === 0\"\n [class.is-required]=\"required\"\n [class.has-selections]=\"selectedItems.length > 0\"\n (click)=\"toggleMenu($event)\">\n\n <!-- Selected tags -->\n @if (selectedTags.length > 0) {\n <ec-tags\n id=\"{{id}}_tags\"\n [tags]=\"selectedTags\"\n [wrap]=\"true\"\n [isCondensed]=\"false\"\n [isSubtle]=\"true\"\n (tagClosed)=\"removeTag($event)\"\n (click)=\"$event.stopPropagation()\">\n </ec-tags>\n }\n\n <!-- Filter input -->\n <input\n #filterInput\n class=\"multiselect-filter-input\"\n type=\"text\"\n [id]=\"id + '_filter'\"\n [formControl]=\"filterFormModel\"\n [placeholder]=\"effectivePlaceholder\"\n [tabindex]=\"tabindex\"\n (input)=\"onFilterInput()\"\n (keydown)=\"keyNavigate($event)\"\n (focusout)=\"onBlur()\"\n (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\n [attr.aria-activedescendant]=\"activeDescendantId\"\n [attr.aria-labelledby]=\"label ? id + '_label' : null\"\n [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\n [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\n\n <i class=\"ec-icon icon-required\"></i>\n <i class=\"ec-icon icon-invalid\"></i>\n </div>\n\n <!-- Live region for selection announcements -->\n <span [id]=\"id + '_selection_status'\"\n class=\"sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\">\n {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\n </span>\n\n <!-- Clear button -->\n @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\n <ec-button class=\"multiselect-clear-btn\"\n [id]=\"id + '_clear'\"\n icon=\"icon-cancel\"\n type=\"secondary\"\n [tabindex]=\"0\"\n attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\n (click)=\"clearAll(); $event.stopPropagation()\">\n </ec-button>\n }\n\n <!-- Toggle button -->\n <ec-button class=\"textbox-group-btn-right\"\n [id]=\"id + '_button'\"\n [disabled]=\"formModel.disabled\"\n icon=\"icon-caret-down\"\n [tabindex]=\"0\"\n type=\"secondary\"\n [attr.aria-label]=\"'Toggle dropdown'\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n (click)=\"toggleMenu($event)\"\n [class.active]=\"menuStatus === 'visible'\">\n </ec-button>\n </div>\n</div>\n\n<ng-template #dropdownmenu>\n <div class=\"popup\"\n ecOverlay\n role=\"listbox\"\n [attr.id]=\"id + '_listbox'\"\n [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\n aria-multiselectable=\"true\"\n [status]=\"pending ? 'pending' : 'hasData'\">\n\n <ec-menu id=\"{{id}}_menu\"\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\n [templateType]=\"'checkAndLabel'\"\n [customMenuTemplate]=\"checkboxMenuTemplate\"\n [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\n [noDataText]=\"noMatchesText\"\n [items]=\"filteredOptions\"\n [selected]=\"highlightedItem\"\n (selectedChanged)=\"onItemSelected($event)\"\n [truncateItems]=\"truncateItems\"\n [maintainSelectedItem]=\"false\">\n </ec-menu>\n\n @if (showAddCustomOption) {\n <div class=\"add-custom-option\"\n role=\"option\"\n attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\n tabindex=\"-1\"\n (click)=\"addCustomItem()\">\n <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\n <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n <div class=\"d-flex\"\n role=\"option\"\n [attr.aria-selected]=\"!!item.checked\"\n [attr.aria-label]=\"item.label\">\n @if (item === selectAllItem) {\n <ec-checkbox\n id=\"{{id}}_selectAll_checkbox\"\n class=\"m-0 pr-3\"\n [formModel]=\"selectAllFormControl\"\n [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\n [label]=\"item.label\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <ec-checkbox\n id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n class=\"m-0 pr-3\"\n [formModel]=\"getCheckboxFormControl(item)\"\n [attr.aria-label]=\"item.label\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n <span>{{item.label}}</span>\n }\n }\n </div>\n</ng-template>\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right:1px solid var(--ec-form-control-border-color-readonly);border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius);background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly);cursor:default}.control.is-readonly .multiselect-input .multiselect-filter-input{color:var(--ec-form-control-color-readonly)}.control.is-readonly .multiselect-input .multiselect-filter-input::placeholder{color:var(--ec-form-control-color-readonly)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin:0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button:hover{background-color:var(--ec-background-color-hover)}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText", "highlightNormalizePattern"], outputs: ["tagClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
9429
9447
|
}
|
|
9430
9448
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MultiselectComponent, decorators: [{
|
|
9431
9449
|
type: Component,
|