@energycap/components 0.47.4-ECAP-35552-PresentationModeUpdate.20261023-1554 → 0.47.5
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.
|
@@ -8167,8 +8167,8 @@ var TabsComponent = class TabsComponent {
|
|
|
8167
8167
|
},
|
|
8168
8168
|
outputs: { tabClosed: "tabClosed" },
|
|
8169
8169
|
ngImport: i0,
|
|
8170
|
-
template: "@if (tabs?.items?.length) {\n <ul\n class=\"{{tabStyle}}\">\n @for (tab of tabs?.items; track tab; let i = $index) {\n <li class=\"{{tab.classlist}}\"\n [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\n [class.is-closable]=\"tab.closable\"\n [class.position-relative]=\"tab.closable\"\n >\n @if (tab.url && !tab.disabled) {\n <a\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\n class=\"tab\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n routerLinkActive=\"active\"\n [routerLink]=\"tab.url\"\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\n [queryParams]=\"tab.queryParams || null\"\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge}}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </a>\n }\n @if (!tab.url || tab.disabled) {\n <span\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n class=\"tab\"\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge }}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </span>\n }\n @if (tab.closable) {\n <button\n type=\"button\"\n class=\"tab-close-btn position-absolute d-flex align-items-center justify-content-center border-0 cursor-pointer\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}_closeButton\"\n [attr.aria-label]=\"'Close ' + ((tab.label | translate) || 'tab')\"\n (click)=\"closeTab($event, tab)\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n </ul>\n}",
|
|
8171
|
-
styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tabs .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tabs .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab:focus{outline:2px solid transparent;outline-offset:-2px}.pills .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.tiles .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tiles .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tiles .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tiles .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.is-closable .tab{padding-right:1.75rem}.tab-close-btn{background-color:transparent;border-radius:var(--ec-border-radius);color:var(--ec-color-gray-3);height:1.5rem;padding:0;right:.125rem;top:50%;transform:translateY(-50%);width:1.5rem;z-index:2}.tab-close-btn .ec-icon{color:inherit}.tab-close-btn:hover{background-color:var(--ec-background-color-hover);color:var(--ec-button-color-icon-hover, var(--ec-color-interactive))}.tab-close-btn:active{background-color:var(--ec-background-color-selected);box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.tab-close-btn:focus{outline:2px solid transparent;outline-offset:-2px}.tab-close-btn:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab-close-btn{top:calc(50% - .125rem)}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .tiles li,:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}:host(.is-condensed) .is-closable .tab{padding-right:1.75rem}\n"],
|
|
8170
|
+
template: "@if (tabs?.items?.length) {\n <ul\n class=\"{{tabStyle}}\">\n @for (tab of tabs?.items; track tab; let i = $index) {\n <li class=\"{{tab.classlist}}\"\n [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\n [class.is-closable]=\"tab.closable\"\n [class.position-relative]=\"tab.closable\"\n >\n @if (tab.url && !tab.disabled) {\n <a\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\n class=\"tab\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n routerLinkActive=\"active\"\n [routerLink]=\"tab.url\"\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\n [queryParams]=\"tab.queryParams || null\"\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"\n aria-hidden=\"true\"></i>\n }\n @if (!tab.label && tab.ariaLabel) {\n <span class=\"sr-only\">{{tab.ariaLabel | translate}}</span>\n }\n @if (tab.label) {\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n }\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge}}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </a>\n }\n @if (!tab.url || tab.disabled) {\n <span\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n class=\"tab\"\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"\n aria-hidden=\"true\"></i>\n }\n @if (!tab.label && tab.ariaLabel) {\n <span class=\"sr-only\">{{tab.ariaLabel | translate}}</span>\n }\n @if (tab.label) {\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n }\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge }}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </span>\n }\n @if (tab.closable) {\n <button\n type=\"button\"\n class=\"tab-close-btn position-absolute d-flex align-items-center justify-content-center border-0 cursor-pointer\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}_closeButton\"\n [attr.aria-label]=\"'Close ' + ((tab.label | translate) || (tab.ariaLabel | translate) || 'tab')\"\n (click)=\"closeTab($event, tab)\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n </ul>\n}",
|
|
8171
|
+
styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tabs .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tabs .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab:focus{outline:2px solid transparent;outline-offset:-2px}.pills .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.tiles .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tiles .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tiles .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tiles .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.is-closable .tab{padding-right:1.75rem}.tab-close-btn{background-color:transparent;border-radius:var(--ec-border-radius);color:var(--ec-color-gray-3);height:1.5rem;padding:0;right:.125rem;top:50%;transform:translateY(-50%);width:1.5rem;z-index:2}.tab-close-btn .ec-icon{color:inherit}.tab-close-btn:hover{background-color:var(--ec-background-color-hover);color:var(--ec-button-color-icon-hover, var(--ec-color-interactive))}.tab-close-btn:active{background-color:var(--ec-background-color-selected);box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.tab-close-btn:focus{outline:2px solid transparent;outline-offset:-2px}.tab-close-btn:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab-close-btn{top:calc(50% - .125rem)}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}.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}:host(.is-condensed) .tiles li,:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}:host(.is-condensed) .is-closable .tab{padding-right:1.75rem}\n"],
|
|
8172
8172
|
dependencies: [
|
|
8173
8173
|
{
|
|
8174
8174
|
kind: "directive",
|
|
@@ -8228,8 +8228,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
8228
8228
|
selector: "ec-tabs",
|
|
8229
8229
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
8230
8230
|
standalone: false,
|
|
8231
|
-
template: "@if (tabs?.items?.length) {\n <ul\n class=\"{{tabStyle}}\">\n @for (tab of tabs?.items; track tab; let i = $index) {\n <li class=\"{{tab.classlist}}\"\n [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\n [class.is-closable]=\"tab.closable\"\n [class.position-relative]=\"tab.closable\"\n >\n @if (tab.url && !tab.disabled) {\n <a\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\n class=\"tab\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n routerLinkActive=\"active\"\n [routerLink]=\"tab.url\"\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\n [queryParams]=\"tab.queryParams || null\"\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge}}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </a>\n }\n @if (!tab.url || tab.disabled) {\n <span\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n class=\"tab\"\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"></i>\n }\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge }}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </span>\n }\n @if (tab.closable) {\n <button\n type=\"button\"\n class=\"tab-close-btn position-absolute d-flex align-items-center justify-content-center border-0 cursor-pointer\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}_closeButton\"\n [attr.aria-label]=\"'Close ' + ((tab.label | translate) || 'tab')\"\n (click)=\"closeTab($event, tab)\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n </ul>\n}",
|
|
8232
|
-
styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tabs .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tabs .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab:focus{outline:2px solid transparent;outline-offset:-2px}.pills .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.tiles .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tiles .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tiles .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tiles .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.is-closable .tab{padding-right:1.75rem}.tab-close-btn{background-color:transparent;border-radius:var(--ec-border-radius);color:var(--ec-color-gray-3);height:1.5rem;padding:0;right:.125rem;top:50%;transform:translateY(-50%);width:1.5rem;z-index:2}.tab-close-btn .ec-icon{color:inherit}.tab-close-btn:hover{background-color:var(--ec-background-color-hover);color:var(--ec-button-color-icon-hover, var(--ec-color-interactive))}.tab-close-btn:active{background-color:var(--ec-background-color-selected);box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.tab-close-btn:focus{outline:2px solid transparent;outline-offset:-2px}.tab-close-btn:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab-close-btn{top:calc(50% - .125rem)}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .tiles li,:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}:host(.is-condensed) .is-closable .tab{padding-right:1.75rem}\n"]
|
|
8231
|
+
template: "@if (tabs?.items?.length) {\n <ul\n class=\"{{tabStyle}}\">\n @for (tab of tabs?.items; track tab; let i = $index) {\n <li class=\"{{tab.classlist}}\"\n [ngClass]=\"{'icon-only': tab.icon && !tab.label}\"\n [class.is-closable]=\"tab.closable\"\n [class.position-relative]=\"tab.closable\"\n >\n @if (tab.url && !tab.disabled) {\n <a\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\n class=\"tab\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n routerLinkActive=\"active\"\n [routerLink]=\"tab.url\"\n [routerLinkActiveOptions]=\"{exact: tab.isActiveExactMatch || false}\"\n [queryParams]=\"tab.queryParams || null\"\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"\n aria-hidden=\"true\"></i>\n }\n @if (!tab.label && tab.ariaLabel) {\n <span class=\"sr-only\">{{tab.ariaLabel | translate}}</span>\n }\n @if (tab.label) {\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n }\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge}}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </a>\n }\n @if (!tab.url || tab.disabled) {\n <span\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\n class=\"tab\"\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\n (keypress)=\"selectTab($event, tab)\"\n (click)=\"selectTab($event, tab)\">\n @if (tab.icon) {\n <i class=\"ec-icon {{tab.icon}}\"\n [class.mr-1]=\"tab.label\"\n aria-hidden=\"true\"></i>\n }\n @if (!tab.label && tab.ariaLabel) {\n <span class=\"sr-only\">{{tab.ariaLabel | translate}}</span>\n }\n @if (tab.label) {\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\n }\n @if (tab.badge !== undefined && tab.badgeVisible !== false) {\n <span\n class=\"badge ml-1\">\n {{ tab.badge }}\n </span>\n }\n @if (tab?.indicator) {\n <span\n class=\"indicator ml-1\"\n [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\n }\n </span>\n }\n @if (tab.closable) {\n <button\n type=\"button\"\n class=\"tab-close-btn position-absolute d-flex align-items-center justify-content-center border-0 cursor-pointer\"\n id=\"{{tab.id ? tab.id : id + '_item' + i}}_closeButton\"\n [attr.aria-label]=\"'Close ' + ((tab.label | translate) || (tab.ariaLabel | translate) || 'tab')\"\n (click)=\"closeTab($event, tab)\">\n <i class=\"ec-icon ec-icon-sm icon-cancel\" aria-hidden=\"true\"></i>\n </button>\n }\n </li>\n }\n </ul>\n}",
|
|
8232
|
+
styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:1rem}.tabs .tab{padding-left:0;padding-right:0;border-bottom:2px solid transparent;margin-bottom:-1px;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:2rem;min-width:2rem;justify-content:center}.tabs .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:hover,.tabs .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.tabs .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tabs .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tabs .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus))}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:first-child){margin-left:-1px}.pills li .tab{border-radius:0}.pills li:first-child .tab{border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius)}.pills li:last-child .tab{border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.pills .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid var(--ec-tab-border-color, var(--ec-border-color));align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.pills .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pills .tab:hover,.pills .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.pills .tab:focus{outline:2px solid transparent;outline-offset:-2px}.pills .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.pills .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.pills .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.tiles{display:flex}.tiles li{display:block;min-width:0}.tiles li .tab{border-radius:var(--ec-border-radius)}.tiles .tab{padding-left:.5rem;padding-right:.5rem;border-radius:var(--ec-border-radius);border:1px solid transparent;align-items:center;color:var(--ec-tab-color, var(--ec-color-secondary-dark));cursor:pointer;font-size:var(--ec-tab-font-size, var(--ec-font-size-label));display:flex;height:1.75rem;min-width:1.75rem;justify-content:center}.tiles .tab.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));font-weight:700;color:var(--ec-tab-color-active, var(--ec-border-color-focus));background-color:var(--ec-background-color-selected);border:1px solid var(--ec-tab-border-color, var(--ec-border-color))}.tiles .tab:hover,.tiles .tab:focus{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.tiles .tab:focus{outline:2px solid transparent;outline-offset:-2px}.tiles .tab:focus-visible{outline-color:var(--ec-border-color-focus)}.tiles .tab.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}.tiles .is-closable:hover .tab{border-color:var(--ec-tab-border-color-active, var(--ec-border-color-focus));box-shadow:0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));position:relative;z-index:1}.icon-only .tab{padding:0;justify-content:center}.icon-only .tab .ec-icon{color:inherit}.is-closable .tab{padding-right:1.75rem}.tab-close-btn{background-color:transparent;border-radius:var(--ec-border-radius);color:var(--ec-color-gray-3);height:1.5rem;padding:0;right:.125rem;top:50%;transform:translateY(-50%);width:1.5rem;z-index:2}.tab-close-btn .ec-icon{color:inherit}.tab-close-btn:hover{background-color:var(--ec-background-color-hover);color:var(--ec-button-color-icon-hover, var(--ec-color-interactive))}.tab-close-btn:active{background-color:var(--ec-background-color-selected);box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.tab-close-btn:focus{outline:2px solid transparent;outline-offset:-2px}.tab-close-btn:focus-visible{outline-color:var(--ec-border-color-focus)}.tabs .tab-close-btn{top:calc(50% - .125rem)}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}.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}:host(.is-condensed) .tiles li,:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}:host(.is-condensed) .is-closable .tab{padding-right:1.75rem}\n"]
|
|
8233
8233
|
}]
|
|
8234
8234
|
}],
|
|
8235
8235
|
ctorParameters: () => [],
|
|
@@ -9523,15 +9523,32 @@ var MultiselectComponent = class MultiselectComponent extends FormControlBase {
|
|
|
9523
9523
|
const existsInAllOptions = MenuComponent.getSelectableItems(this.getAllOptions()).some((item) => item.label.toLowerCase() === lowerFilter);
|
|
9524
9524
|
const alreadySelected = this.selectedItems.some((item) => item.label.toLowerCase() === lowerFilter);
|
|
9525
9525
|
if (existsInAllOptions || alreadySelected) return;
|
|
9526
|
-
|
|
9527
|
-
const customItem = {
|
|
9526
|
+
const mapped = this.customItemMapper ? this.customItemMapper(filterText) : {
|
|
9528
9527
|
label: filterText,
|
|
9529
|
-
selectedLabel: filterText,
|
|
9530
9528
|
value: filterText
|
|
9531
9529
|
};
|
|
9532
|
-
|
|
9533
|
-
|
|
9534
|
-
|
|
9530
|
+
const candidates = mapped ? Array.isArray(mapped) ? mapped : [mapped] : [];
|
|
9531
|
+
let added = false;
|
|
9532
|
+
candidates.forEach((candidate) => {
|
|
9533
|
+
const label = (candidate?.label || "").trim();
|
|
9534
|
+
if (!label) return;
|
|
9535
|
+
if (this.maxSelections > 0 && this.selectedItems.length >= this.maxSelections) return;
|
|
9536
|
+
const lowerLabel = label.toLowerCase();
|
|
9537
|
+
if (this.selectedItems.some((item) => item.label.toLowerCase() === lowerLabel)) return;
|
|
9538
|
+
const existingOption = MenuComponent.getSelectableItems(this.getAllOptions()).find((item) => item.label.toLowerCase() === lowerLabel);
|
|
9539
|
+
if (existingOption?.disabled) return;
|
|
9540
|
+
const item = existingOption ?? {
|
|
9541
|
+
...candidate,
|
|
9542
|
+
label,
|
|
9543
|
+
selectedLabel: candidate.selectedLabel || label,
|
|
9544
|
+
value: candidate.value !== void 0 ? candidate.value : label
|
|
9545
|
+
};
|
|
9546
|
+
if (!existingOption) this.customItems = [...this.customItems, item];
|
|
9547
|
+
item.checked = true;
|
|
9548
|
+
this.selectedItems = [...this.selectedItems, item];
|
|
9549
|
+
added = true;
|
|
9550
|
+
});
|
|
9551
|
+
if (!added) return;
|
|
9535
9552
|
this.updateFormModelValue();
|
|
9536
9553
|
this.updateTags();
|
|
9537
9554
|
this.buildCheckboxFormControls();
|
|
@@ -9813,6 +9830,7 @@ var MultiselectComponent = class MultiselectComponent extends FormControlBase {
|
|
|
9813
9830
|
noMatchesText: "noMatchesText",
|
|
9814
9831
|
truncateItems: "truncateItems",
|
|
9815
9832
|
allowCustom: "allowCustom",
|
|
9833
|
+
customItemMapper: "customItemMapper",
|
|
9816
9834
|
maxSelections: "maxSelections",
|
|
9817
9835
|
totalRecords: "totalRecords",
|
|
9818
9836
|
showSelectAll: "showSelectAll",
|
|
@@ -9849,7 +9867,7 @@ var MultiselectComponent = class MultiselectComponent extends FormControlBase {
|
|
|
9849
9867
|
usesOnChanges: true,
|
|
9850
9868
|
ngImport: i0,
|
|
9851
9869
|
template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled,\n 'open': menuStatus === 'visible'}\">\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 [attr.cdkFocusInitial]=\"autofocus || null\"\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\" aria-hidden=\"true\"></i>\n <i class=\"ec-icon icon-invalid\" aria-hidden=\"true\"></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 (showClearAll && 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]=\"-1\"\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\n @if (showTotalRecordsFooter) {\n <footer [attr.id]=\"id + '_footer'\">\n <span>{{visibleOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\n </footer>\n }\n </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n <div class=\"multiselect-item-row 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 <!-- The checkbox is always ours; with a custom template it renders bare and the host owns the rest of the row. -->\n <ec-checkbox\n id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n class=\"m-0\"\n [class.pr-3]=\"!customMenuTemplate\"\n [class.w-auto]=\"!!customMenuTemplate\"\n [formModel]=\"getCheckboxFormControl(item)\"\n [attr.aria-label]=\"item.label\"\n [label]=\"customMenuTemplate ? undefined : item.label\"\n [icon]=\"customMenuTemplate ? undefined : item.icon\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n @if (customMenuTemplate) {\n <!-- Host-owned row content. Clicks here bubble to the row and toggle the item unless the host stops them. -->\n <div class=\"multiselect-item-content\"\n [attr.id]=\"(item.id || id + '_checkbox_' + item.label) + '_content'\">\n <ng-container *ngTemplateOutlet=\"customMenuTemplate; context: { $implicit: item }\"></ng-container>\n </div>\n }\n } @else {\n <span>{{item.label}}</span>\n }\n }\n </div>\n</ng-template>\n",
|
|
9852
|
-
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:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}: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:focus-within:not(.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):not(:focus-within){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.open .textbox-group ec-button.multiselect-clear-btn{--ec-button-background-color-secondary: var(--ec-form-control-background-color)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused):not(:focus-within){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:focus-within:not(.is-focused){border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1;border-right:1px solid var(--ec-form-control-border-color-focus)}.multiselect-input.is-focused{border-right:1px solid var(--ec-form-control-border-color);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent}.multiselect-input .multiselect-filter-input:focus,.multiselect-input .multiselect-filter-input:focus-visible{outline:none;box-shadow:none}.multiselect-filter-input{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}ec-menu ::ng-deep ul li .multiselect-item-row{flex:1 1 auto;align-items:center;min-width:0}ec-menu ::ng-deep ul li .multiselect-item-content{display:flex;align-items:center;flex:1 1 auto;min-width:0;margin-left:.5rem}ec-menu ::ng-deep ul li .multiselect-item-hover-only{opacity:0;transition:opacity .1s ease-in-out}ec-menu ::ng-deep ul li:hover .multiselect-item-hover-only,ec-menu ::ng-deep ul li.is-highlighted .multiselect-item-hover-only,ec-menu ::ng-deep ul li .multiselect-item-hover-only:focus-within{opacity:1}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: transparent;--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:focus-visible{outline-color:transparent}.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-box-shadow-focus-secondary: none;--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)}ec-button.textbox-group-btn-right ::ng-deep button:focus-visible{outline-color:transparent}.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}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}\n"],
|
|
9870
|
+
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:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}: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:focus-within:not(.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):not(:focus-within){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-disabled:not(.is-readonly) .multiselect-input .multiselect-filter-input{background-color:transparent;opacity:1}.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{background-color:transparent;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.open .textbox-group ec-button.multiselect-clear-btn{--ec-button-background-color-secondary: var(--ec-form-control-background-color)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused):not(:focus-within){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:focus-within:not(.is-focused){border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1;border-right:1px solid var(--ec-form-control-border-color-focus)}.multiselect-input.is-focused{border-right:1px solid var(--ec-form-control-border-color);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent}.multiselect-input .multiselect-filter-input:focus,.multiselect-input .multiselect-filter-input:focus-visible{outline:none;box-shadow:none}.multiselect-filter-input{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}ec-menu ::ng-deep ul li .multiselect-item-row{flex:1 1 auto;align-items:center;min-width:0}ec-menu ::ng-deep ul li .multiselect-item-content{display:flex;align-items:center;flex:1 1 auto;min-width:0;margin-left:.5rem}ec-menu ::ng-deep ul li .multiselect-item-hover-only{opacity:0;transition:opacity .1s ease-in-out}ec-menu ::ng-deep ul li:hover .multiselect-item-hover-only,ec-menu ::ng-deep ul li.is-highlighted .multiselect-item-hover-only,ec-menu ::ng-deep ul li .multiselect-item-hover-only:focus-within{opacity:1}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: transparent;--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:focus-visible{outline-color:transparent}.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-box-shadow-focus-secondary: none;--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)}ec-button.textbox-group-btn-right ::ng-deep button:focus-visible{outline-color:transparent}.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}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}\n"],
|
|
9853
9871
|
dependencies: [
|
|
9854
9872
|
{
|
|
9855
9873
|
kind: "directive",
|
|
@@ -10022,7 +10040,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
10022
10040
|
changeDetection: ChangeDetectionStrategy.Eager,
|
|
10023
10041
|
standalone: false,
|
|
10024
10042
|
template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled,\n 'open': menuStatus === 'visible'}\">\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 [attr.cdkFocusInitial]=\"autofocus || null\"\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\" aria-hidden=\"true\"></i>\n <i class=\"ec-icon icon-invalid\" aria-hidden=\"true\"></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 (showClearAll && 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]=\"-1\"\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\n @if (showTotalRecordsFooter) {\n <footer [attr.id]=\"id + '_footer'\">\n <span>{{visibleOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\n </footer>\n }\n </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n <div class=\"multiselect-item-row 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 <!-- The checkbox is always ours; with a custom template it renders bare and the host owns the rest of the row. -->\n <ec-checkbox\n id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n class=\"m-0\"\n [class.pr-3]=\"!customMenuTemplate\"\n [class.w-auto]=\"!!customMenuTemplate\"\n [formModel]=\"getCheckboxFormControl(item)\"\n [attr.aria-label]=\"item.label\"\n [label]=\"customMenuTemplate ? undefined : item.label\"\n [icon]=\"customMenuTemplate ? undefined : item.icon\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n @if (customMenuTemplate) {\n <!-- Host-owned row content. Clicks here bubble to the row and toggle the item unless the host stops them. -->\n <div class=\"multiselect-item-content\"\n [attr.id]=\"(item.id || id + '_checkbox_' + item.label) + '_content'\">\n <ng-container *ngTemplateOutlet=\"customMenuTemplate; context: { $implicit: item }\"></ng-container>\n </div>\n }\n } @else {\n <span>{{item.label}}</span>\n }\n }\n </div>\n</ng-template>\n",
|
|
10025
|
-
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:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}: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:focus-within:not(.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):not(:focus-within){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.open .textbox-group ec-button.multiselect-clear-btn{--ec-button-background-color-secondary: var(--ec-form-control-background-color)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused):not(:focus-within){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:focus-within:not(.is-focused){border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1;border-right:1px solid var(--ec-form-control-border-color-focus)}.multiselect-input.is-focused{border-right:1px solid var(--ec-form-control-border-color);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent}.multiselect-input .multiselect-filter-input:focus,.multiselect-input .multiselect-filter-input:focus-visible{outline:none;box-shadow:none}.multiselect-filter-input{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}ec-menu ::ng-deep ul li .multiselect-item-row{flex:1 1 auto;align-items:center;min-width:0}ec-menu ::ng-deep ul li .multiselect-item-content{display:flex;align-items:center;flex:1 1 auto;min-width:0;margin-left:.5rem}ec-menu ::ng-deep ul li .multiselect-item-hover-only{opacity:0;transition:opacity .1s ease-in-out}ec-menu ::ng-deep ul li:hover .multiselect-item-hover-only,ec-menu ::ng-deep ul li.is-highlighted .multiselect-item-hover-only,ec-menu ::ng-deep ul li .multiselect-item-hover-only:focus-within{opacity:1}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: transparent;--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:focus-visible{outline-color:transparent}.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-box-shadow-focus-secondary: none;--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)}ec-button.textbox-group-btn-right ::ng-deep button:focus-visible{outline-color:transparent}.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}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}\n"]
|
|
10043
|
+
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:2px solid transparent;outline-offset:2px}:host textarea:focus-visible,:host input:focus-visible,:host select:focus-visible{outline-color:var(--ec-border-color-focus)}: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:focus-within:not(.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):not(:focus-within){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-disabled:not(.is-readonly) .multiselect-input .multiselect-filter-input{background-color:transparent;opacity:1}.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{background-color:transparent;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.open .textbox-group ec-button.multiselect-clear-btn{--ec-button-background-color-secondary: var(--ec-form-control-background-color)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused):not(:focus-within){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:focus-within:not(.is-focused){border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);outline:2px solid transparent;outline-offset:2px;position:relative;z-index:1;border-right:1px solid var(--ec-form-control-border-color-focus)}.multiselect-input.is-focused{border-right:1px solid var(--ec-form-control-border-color);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent}.multiselect-input .multiselect-filter-input:focus,.multiselect-input .multiselect-filter-input:focus-visible{outline:none;box-shadow:none}.multiselect-filter-input{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}ec-menu ::ng-deep ul li .multiselect-item-row{flex:1 1 auto;align-items:center;min-width:0}ec-menu ::ng-deep ul li .multiselect-item-content{display:flex;align-items:center;flex:1 1 auto;min-width:0;margin-left:.5rem}ec-menu ::ng-deep ul li .multiselect-item-hover-only{opacity:0;transition:opacity .1s ease-in-out}ec-menu ::ng-deep ul li:hover .multiselect-item-hover-only,ec-menu ::ng-deep ul li.is-highlighted .multiselect-item-hover-only,ec-menu ::ng-deep ul li .multiselect-item-hover-only:focus-within{opacity:1}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: transparent;--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:focus-visible{outline-color:transparent}.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-box-shadow-focus-secondary: none;--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)}ec-button.textbox-group-btn-right ::ng-deep button:focus-visible{outline-color:transparent}.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}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}\n"]
|
|
10026
10044
|
}]
|
|
10027
10045
|
}],
|
|
10028
10046
|
ctorParameters: () => [
|
|
@@ -10045,6 +10063,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
10045
10063
|
noMatchesText: [{ type: Input }],
|
|
10046
10064
|
truncateItems: [{ type: Input }],
|
|
10047
10065
|
allowCustom: [{ type: Input }],
|
|
10066
|
+
customItemMapper: [{ type: Input }],
|
|
10048
10067
|
maxSelections: [{ type: Input }],
|
|
10049
10068
|
totalRecords: [{ type: Input }],
|
|
10050
10069
|
showSelectAll: [{ type: Input }],
|