@energycap/components 0.46.12 → 0.46.14-esm-luxon.20260713-1107
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.
|
@@ -16,8 +16,8 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
|
|
|
16
16
|
import { ClipboardService } from 'ngx-clipboard';
|
|
17
17
|
import { Subject, of, lastValueFrom, forkJoin, merge, fromEvent, EMPTY, timer, interval, race, ReplaySubject } from 'rxjs';
|
|
18
18
|
import { takeUntil, switchMap, delay, distinctUntilChanged, filter, take, debounceTime, skipUntil, tap, pluck, map, catchError, skipWhile } from 'rxjs/operators';
|
|
19
|
-
import
|
|
20
|
-
import { range, cloneDeep, isEqual, uniqueId, sortBy, orderBy, get, upperFirst } from 'lodash';
|
|
19
|
+
import { DateTime, Info } from 'luxon';
|
|
20
|
+
import { range, cloneDeep, isEqual, uniqueId, sortBy, orderBy, get, upperFirst } from 'lodash-es';
|
|
21
21
|
import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
|
|
22
22
|
import Popper from 'popper.js';
|
|
23
23
|
|
|
@@ -242,11 +242,11 @@ class ButtonComponent {
|
|
|
242
242
|
}
|
|
243
243
|
}
|
|
244
244
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
245
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ButtonComponent, isStandalone: false, selector: "ec-button", inputs: { id: "id", disabled: "disabled", lockButton: "lockButton", icon: "icon", iconColor: "iconColor", label: "label", ariaLabel: "ariaLabel", ariaExpanded: "ariaExpanded", ariaHaspopup: "ariaHaspopup", badge: "badge", tabindex: "tabindex", type: "type", pending: "pending", pendingIcon: "pendingIcon", customTemplate: "customTemplate", isSubmit: "isSubmit", autofocus: "autofocus" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["element"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<button id=\"{{id}}_button\"\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\n [class.has-badge]=\"badge !== undefined\"\n [class.icon-only]=\"icon && !label\"\n [class.locked]=\"lockButton\"\n [class.has-custom-icon-color]=\"iconColor\"\n [style.--ec-button-custom-icon-color]=\"iconColor\"\n tabindex=\"{{tabindex}}\"\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel && !label ? (ariaLabel | translate) : null\"\n [attr.aria-expanded]=\"ariaExpanded !== undefined ? ariaExpanded : null\"\n [attr.aria-haspopup]=\"ariaHaspopup || null\"\n (click)=\"onClick($event)\"\n #element\n [attr.cdkFocusInitial]=\"autofocus || null\">\n @if (customTemplate) {\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\n } @else {\n <!-- Hidden when the button is not pending -->\n @if (pending) {\n <div class=\"pending-container\">\n <i class=\"ec-icon {{pendingIcon}}\"\n id=\"{{id}}_pending\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n </div>\n }\n @if (icon) {\n <i class=\"ec-icon {{icon}}\"\n id=\"{{id}}_icon\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n }\n @if (label) {\n <span id=\"{{id}}_label\"\n class=\"label\">{{label | translate}}</span>\n }\n @if (badge !== undefined) {\n <span id=\"{{id}}_badge\"\n class=\"badge\">{{badge}}</span>\n }\n }\n <ng-content></ng-content>\n</button>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-primary.locked:hover,.ec-button-primary.locked:active,.ec-button-primary.locked:focus,.ec-button-submit.locked:hover,.ec-button-submit.locked:active,.ec-button-submit.locked:focus{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-primary, var(--ec-color-primary-light))!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-primary.locked:hover .ec-icon,.ec-button-primary.locked:active .ec-icon,.ec-button-primary.locked:focus .ec-icon,.ec-button-submit.locked:hover .ec-icon,.ec-button-submit.locked:active .ec-icon,.ec-button-submit.locked:focus .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))!important}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-secondary.locked:hover,.ec-button-secondary.locked:active,.ec-button-secondary.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-secondary.locked:hover .ec-icon,.ec-button-secondary.locked:active .ec-icon,.ec-button-secondary.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common.locked:hover,.ec-button-common.locked:active,.ec-button-common.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-common.locked:hover .ec-icon,.ec-button-common.locked:active .ec-icon,.ec-button-common.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-icon.locked:hover,.ec-button-icon.locked:active,.ec-button-icon.locked:focus{background-color:transparent!important;color:var(--ec-button-color-icon, var(--ec-color-icon))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-icon.locked:hover .ec-icon,.ec-button-icon.locked:active .ec-icon,.ec-button-icon.locked:focus .ec-icon{color:var(--ec-button-color-icon, var(--ec-color-icon))!important}.ec-button-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-text.locked:hover,.ec-button-text.locked:active,.ec-button-text.locked:focus{background-color:transparent!important;color:var(--ec-button-color-text, var(--ec-color-primary-dark))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-text.locked:hover .ec-icon,.ec-button-text.locked:active .ec-icon,.ec-button-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-text, inherit)!important}.ec-button-link{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-link.locked:hover,.ec-button-link.locked:active,.ec-button-link.locked:focus{background-color:transparent!important;color:var(--ec-color-link)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-link.locked:hover .ec-icon,.ec-button-link.locked:active .ec-icon,.ec-button-link.locked:focus .ec-icon{color:var(--ec-button-color-icon-link, inherit)!important}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger.locked:hover,.ec-button-danger.locked:active,.ec-button-danger.locked:focus{background-color:var(--ec-color-danger)!important;color:var(--ec-color-primary-light)!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-danger.locked:hover .ec-icon,.ec-button-danger.locked:active .ec-icon,.ec-button-danger.locked:focus .ec-icon{color:var(--ec-button-color-icon, inherit)!important}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-danger-text.locked:hover,.ec-button-danger-text.locked:active,.ec-button-danger-text.locked:focus{background-color:transparent!important;color:var(--ec-color-danger)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-danger-text.locked:hover .ec-icon,.ec-button-danger-text.locked:active .ec-icon,.ec-button-danger-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)!important}.ec-button-card{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-card:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-card:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-card .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-card{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size);font-weight:var(--ec-font-weight-normal);line-height:1.285714286;margin:0;padding:1rem;height:auto;border:1px solid var(--ec-border-color);border-radius:var(--ec-border-radius);text-align:start}.ec-button-card:hover:not(:disabled):not(:focus){box-shadow:none;border-color:var(--ec-border-color-control-hover)}.ec-button-card{height:100%;width:100%}.ec-button-card.locked:hover,.ec-button-card.locked:active,.ec-button-card.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-border-color)!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-card.locked:hover .ec-icon,.ec-button-card.locked:active .ec-icon,.ec-button-card.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{position:relative}button.icon-only{padding:0;width:2rem}button.locked{cursor:default!important}button.locked:hover,button.locked:active,button.locked:focus{transform:none!important;transition:none!important;animation:none!important}button.locked:hover .label,button.locked:active .label,button.locked:focus .label{color:inherit!important}button.locked:hover .badge,button.locked:active .badge,button.locked:focus .badge{color:inherit!important;background-color:inherit!important}button.has-custom-icon-color .ec-icon,button.has-custom-icon-color .pending-container .ec-icon{color:var(--ec-button-custom-icon-color)!important}button.has-custom-icon-color.locked:hover .ec-icon,button.has-custom-icon-color.locked:active .ec-icon,button.has-custom-icon-color.locked:focus .ec-icon{color:var(--ec-button-custom-icon-color)!important}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}:host(.is-tab) button{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}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{outline:none;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}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button.ec-button-icon{width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}.badge{margin-left:-.25rem;margin-top:-.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
245
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ButtonComponent, isStandalone: false, selector: "ec-button", inputs: { id: "id", disabled: "disabled", lockButton: "lockButton", icon: "icon", iconColor: "iconColor", label: "label", ariaLabel: "ariaLabel", ariaExpanded: "ariaExpanded", ariaHaspopup: "ariaHaspopup", ariaActivedescendant: "ariaActivedescendant", ariaControls: "ariaControls", badge: "badge", tabindex: "tabindex", type: "type", pending: "pending", pendingIcon: "pendingIcon", customTemplate: "customTemplate", isSubmit: "isSubmit", autofocus: "autofocus" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.id": "this.id" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["element"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<button id=\"{{id}}_button\"\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\n [class.has-badge]=\"badge !== undefined\"\n [class.icon-only]=\"icon && !label\"\n [class.locked]=\"lockButton\"\n [class.has-custom-icon-color]=\"iconColor\"\n [style.--ec-button-custom-icon-color]=\"iconColor\"\n tabindex=\"{{tabindex}}\"\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel && !label ? (ariaLabel | translate) : null\"\n [attr.aria-expanded]=\"ariaExpanded !== undefined ? ariaExpanded : null\"\n [attr.aria-haspopup]=\"ariaHaspopup || null\"\n [attr.aria-activedescendant]=\"ariaActivedescendant || null\"\n [attr.aria-controls]=\"ariaControls || null\"\n (click)=\"onClick($event)\"\n #element\n [attr.cdkFocusInitial]=\"autofocus || null\">\n @if (customTemplate) {\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\n } @else {\n <!-- Hidden when the button is not pending -->\n @if (pending) {\n <div class=\"pending-container\">\n <i class=\"ec-icon {{pendingIcon}}\"\n id=\"{{id}}_pending\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n </div>\n }\n @if (icon) {\n <i class=\"ec-icon {{icon}}\"\n id=\"{{id}}_icon\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n }\n @if (label) {\n <span id=\"{{id}}_label\"\n class=\"label\">{{label | translate}}</span>\n }\n @if (badge !== undefined) {\n <span id=\"{{id}}_badge\"\n class=\"badge\">{{badge}}</span>\n }\n }\n <ng-content></ng-content>\n</button>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-primary.locked:hover,.ec-button-primary.locked:active,.ec-button-primary.locked:focus,.ec-button-submit.locked:hover,.ec-button-submit.locked:active,.ec-button-submit.locked:focus{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-primary, var(--ec-color-primary-light))!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-primary.locked:hover .ec-icon,.ec-button-primary.locked:active .ec-icon,.ec-button-primary.locked:focus .ec-icon,.ec-button-submit.locked:hover .ec-icon,.ec-button-submit.locked:active .ec-icon,.ec-button-submit.locked:focus .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))!important}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-secondary.locked:hover,.ec-button-secondary.locked:active,.ec-button-secondary.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-secondary.locked:hover .ec-icon,.ec-button-secondary.locked:active .ec-icon,.ec-button-secondary.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common.locked:hover,.ec-button-common.locked:active,.ec-button-common.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-common.locked:hover .ec-icon,.ec-button-common.locked:active .ec-icon,.ec-button-common.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-icon.locked:hover,.ec-button-icon.locked:active,.ec-button-icon.locked:focus{background-color:transparent!important;color:var(--ec-button-color-icon, var(--ec-color-icon))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-icon.locked:hover .ec-icon,.ec-button-icon.locked:active .ec-icon,.ec-button-icon.locked:focus .ec-icon{color:var(--ec-button-color-icon, var(--ec-color-icon))!important}.ec-button-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-text.locked:hover,.ec-button-text.locked:active,.ec-button-text.locked:focus{background-color:transparent!important;color:var(--ec-button-color-text, var(--ec-color-primary-dark))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-text.locked:hover .ec-icon,.ec-button-text.locked:active .ec-icon,.ec-button-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-text, inherit)!important}.ec-button-link{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-link.locked:hover,.ec-button-link.locked:active,.ec-button-link.locked:focus{background-color:transparent!important;color:var(--ec-color-link)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-link.locked:hover .ec-icon,.ec-button-link.locked:active .ec-icon,.ec-button-link.locked:focus .ec-icon{color:var(--ec-button-color-icon-link, inherit)!important}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger.locked:hover,.ec-button-danger.locked:active,.ec-button-danger.locked:focus{background-color:var(--ec-color-danger)!important;color:var(--ec-color-primary-light)!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-danger.locked:hover .ec-icon,.ec-button-danger.locked:active .ec-icon,.ec-button-danger.locked:focus .ec-icon{color:var(--ec-button-color-icon, inherit)!important}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-danger-text.locked:hover,.ec-button-danger-text.locked:active,.ec-button-danger-text.locked:focus{background-color:transparent!important;color:var(--ec-color-danger)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-danger-text.locked:hover .ec-icon,.ec-button-danger-text.locked:active .ec-icon,.ec-button-danger-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)!important}.ec-button-card{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-card:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-card:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-card .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-card{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size);font-weight:var(--ec-font-weight-normal);line-height:1.285714286;margin:0;padding:1rem;height:auto;border:1px solid var(--ec-border-color);border-radius:var(--ec-border-radius);text-align:start}.ec-button-card:hover:not(:disabled):not(:focus){box-shadow:none;border-color:var(--ec-border-color-control-hover)}.ec-button-card{height:100%;width:100%}.ec-button-card.locked:hover,.ec-button-card.locked:active,.ec-button-card.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-border-color)!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-card.locked:hover .ec-icon,.ec-button-card.locked:active .ec-icon,.ec-button-card.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{position:relative}button.icon-only{padding:0;width:2rem}button.locked{cursor:default!important}button.locked:hover,button.locked:active,button.locked:focus{transform:none!important;transition:none!important;animation:none!important}button.locked:hover .label,button.locked:active .label,button.locked:focus .label{color:inherit!important}button.locked:hover .badge,button.locked:active .badge,button.locked:focus .badge{color:inherit!important;background-color:inherit!important}button.has-custom-icon-color .ec-icon,button.has-custom-icon-color .pending-container .ec-icon{color:var(--ec-button-custom-icon-color)!important}button.has-custom-icon-color.locked:hover .ec-icon,button.has-custom-icon-color.locked:active .ec-icon,button.has-custom-icon-color.locked:focus .ec-icon{color:var(--ec-button-custom-icon-color)!important}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}:host(.is-tab) button{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}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{outline:none;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}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button.ec-button-icon{width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}.badge{margin-left:-.25rem;margin-top:-.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
246
246
|
}
|
|
247
247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
248
248
|
type: Component,
|
|
249
|
-
args: [{ selector: 'ec-button', standalone: false, template: "<button id=\"{{id}}_button\"\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\n [class.has-badge]=\"badge !== undefined\"\n [class.icon-only]=\"icon && !label\"\n [class.locked]=\"lockButton\"\n [class.has-custom-icon-color]=\"iconColor\"\n [style.--ec-button-custom-icon-color]=\"iconColor\"\n tabindex=\"{{tabindex}}\"\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel && !label ? (ariaLabel | translate) : null\"\n [attr.aria-expanded]=\"ariaExpanded !== undefined ? ariaExpanded : null\"\n [attr.aria-haspopup]=\"ariaHaspopup || null\"\n (click)=\"onClick($event)\"\n #element\n [attr.cdkFocusInitial]=\"autofocus || null\">\n @if (customTemplate) {\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\n } @else {\n <!-- Hidden when the button is not pending -->\n @if (pending) {\n <div class=\"pending-container\">\n <i class=\"ec-icon {{pendingIcon}}\"\n id=\"{{id}}_pending\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n </div>\n }\n @if (icon) {\n <i class=\"ec-icon {{icon}}\"\n id=\"{{id}}_icon\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n }\n @if (label) {\n <span id=\"{{id}}_label\"\n class=\"label\">{{label | translate}}</span>\n }\n @if (badge !== undefined) {\n <span id=\"{{id}}_badge\"\n class=\"badge\">{{badge}}</span>\n }\n }\n <ng-content></ng-content>\n</button>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-primary.locked:hover,.ec-button-primary.locked:active,.ec-button-primary.locked:focus,.ec-button-submit.locked:hover,.ec-button-submit.locked:active,.ec-button-submit.locked:focus{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-primary, var(--ec-color-primary-light))!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-primary.locked:hover .ec-icon,.ec-button-primary.locked:active .ec-icon,.ec-button-primary.locked:focus .ec-icon,.ec-button-submit.locked:hover .ec-icon,.ec-button-submit.locked:active .ec-icon,.ec-button-submit.locked:focus .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))!important}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-secondary.locked:hover,.ec-button-secondary.locked:active,.ec-button-secondary.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-secondary.locked:hover .ec-icon,.ec-button-secondary.locked:active .ec-icon,.ec-button-secondary.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common.locked:hover,.ec-button-common.locked:active,.ec-button-common.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-common.locked:hover .ec-icon,.ec-button-common.locked:active .ec-icon,.ec-button-common.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-icon.locked:hover,.ec-button-icon.locked:active,.ec-button-icon.locked:focus{background-color:transparent!important;color:var(--ec-button-color-icon, var(--ec-color-icon))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-icon.locked:hover .ec-icon,.ec-button-icon.locked:active .ec-icon,.ec-button-icon.locked:focus .ec-icon{color:var(--ec-button-color-icon, var(--ec-color-icon))!important}.ec-button-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-text.locked:hover,.ec-button-text.locked:active,.ec-button-text.locked:focus{background-color:transparent!important;color:var(--ec-button-color-text, var(--ec-color-primary-dark))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-text.locked:hover .ec-icon,.ec-button-text.locked:active .ec-icon,.ec-button-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-text, inherit)!important}.ec-button-link{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-link.locked:hover,.ec-button-link.locked:active,.ec-button-link.locked:focus{background-color:transparent!important;color:var(--ec-color-link)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-link.locked:hover .ec-icon,.ec-button-link.locked:active .ec-icon,.ec-button-link.locked:focus .ec-icon{color:var(--ec-button-color-icon-link, inherit)!important}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger.locked:hover,.ec-button-danger.locked:active,.ec-button-danger.locked:focus{background-color:var(--ec-color-danger)!important;color:var(--ec-color-primary-light)!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-danger.locked:hover .ec-icon,.ec-button-danger.locked:active .ec-icon,.ec-button-danger.locked:focus .ec-icon{color:var(--ec-button-color-icon, inherit)!important}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-danger-text.locked:hover,.ec-button-danger-text.locked:active,.ec-button-danger-text.locked:focus{background-color:transparent!important;color:var(--ec-color-danger)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-danger-text.locked:hover .ec-icon,.ec-button-danger-text.locked:active .ec-icon,.ec-button-danger-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)!important}.ec-button-card{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-card:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-card:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-card .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-card{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size);font-weight:var(--ec-font-weight-normal);line-height:1.285714286;margin:0;padding:1rem;height:auto;border:1px solid var(--ec-border-color);border-radius:var(--ec-border-radius);text-align:start}.ec-button-card:hover:not(:disabled):not(:focus){box-shadow:none;border-color:var(--ec-border-color-control-hover)}.ec-button-card{height:100%;width:100%}.ec-button-card.locked:hover,.ec-button-card.locked:active,.ec-button-card.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-border-color)!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-card.locked:hover .ec-icon,.ec-button-card.locked:active .ec-icon,.ec-button-card.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{position:relative}button.icon-only{padding:0;width:2rem}button.locked{cursor:default!important}button.locked:hover,button.locked:active,button.locked:focus{transform:none!important;transition:none!important;animation:none!important}button.locked:hover .label,button.locked:active .label,button.locked:focus .label{color:inherit!important}button.locked:hover .badge,button.locked:active .badge,button.locked:focus .badge{color:inherit!important;background-color:inherit!important}button.has-custom-icon-color .ec-icon,button.has-custom-icon-color .pending-container .ec-icon{color:var(--ec-button-custom-icon-color)!important}button.has-custom-icon-color.locked:hover .ec-icon,button.has-custom-icon-color.locked:active .ec-icon,button.has-custom-icon-color.locked:focus .ec-icon{color:var(--ec-button-custom-icon-color)!important}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}:host(.is-tab) button{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}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{outline:none;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}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button.ec-button-icon{width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}.badge{margin-left:-.25rem;margin-top:-.75rem}\n"] }]
|
|
249
|
+
args: [{ selector: 'ec-button', standalone: false, template: "<button id=\"{{id}}_button\"\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\n [class.has-badge]=\"badge !== undefined\"\n [class.icon-only]=\"icon && !label\"\n [class.locked]=\"lockButton\"\n [class.has-custom-icon-color]=\"iconColor\"\n [style.--ec-button-custom-icon-color]=\"iconColor\"\n tabindex=\"{{tabindex}}\"\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel && !label ? (ariaLabel | translate) : null\"\n [attr.aria-expanded]=\"ariaExpanded !== undefined ? ariaExpanded : null\"\n [attr.aria-haspopup]=\"ariaHaspopup || null\"\n [attr.aria-activedescendant]=\"ariaActivedescendant || null\"\n [attr.aria-controls]=\"ariaControls || null\"\n (click)=\"onClick($event)\"\n #element\n [attr.cdkFocusInitial]=\"autofocus || null\">\n @if (customTemplate) {\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\n } @else {\n <!-- Hidden when the button is not pending -->\n @if (pending) {\n <div class=\"pending-container\">\n <i class=\"ec-icon {{pendingIcon}}\"\n id=\"{{id}}_pending\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n </div>\n }\n @if (icon) {\n <i class=\"ec-icon {{icon}}\"\n id=\"{{id}}_icon\"\n [attr.aria-hidden]=\"hasExplicitAccessibleName ? 'true' : null\"></i>\n }\n @if (label) {\n <span id=\"{{id}}_label\"\n class=\"label\">{{label | translate}}</span>\n }\n @if (badge !== undefined) {\n <span id=\"{{id}}_badge\"\n class=\"badge\">{{badge}}</span>\n }\n }\n <ng-content></ng-content>\n</button>", styles: [":host{display:inline-block;vertical-align:top}:host(.font-size-inherit){font-size:inherit}:host(.font-size-inherit) button{font-size:inherit}:host(.text-left) button{justify-content:flex-start}:host(.text-right) button{justify-content:flex-end}:host(.active) .ec-button-icon,:host(.active) .ec-button-text,:host(.active) .ec-button-link,:host(.active) .ec-button-danger-text,:host(.active) .ec-button-custom,:host(.active) .ec-button-secondary,:host(.active) .ec-button-primary{background-color:var(--ec-background-color-selected);color:var(--ec-button-color-active)}:host(.active) .ec-button-icon .ec-icon,:host(.active) .ec-button-text .ec-icon,:host(.active) .ec-button-link .ec-icon,:host(.active) .ec-button-danger-text .ec-icon,:host(.active) .ec-button-custom .ec-icon,:host(.active) .ec-button-secondary .ec-icon,:host(.active) .ec-button-primary .ec-icon{color:var(--ec-button-color-icon-active, var(--ec-color-icon))}:host(.d-block) button{width:100%}:host(.border-0) button:not(:focus){border-color:transparent}:host(.is-action-icon) .ec-button-icon{color:var(--ec-color-interactive)}:host(.is-success) .ec-button-icon,:host(.is-success) .ec-button-secondary,:host(.is-success) .ec-button-text{color:var(--ec-color-success)}:host(.is-error) .ec-button-icon,:host(.is-error) .ec-button-secondary,:host(.is-error) .ec-button-text{color:var(--ec-color-danger)}:host-context(.btn-stack) button{height:1rem}:host-context(.btn-stack) .ec-icon{width:.0625rem;height:.0625rem}:host-context(.actions-col) button{border-radius:0}.ec-button-primary,.ec-button-submit{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8));color:var(--ec-button-color-primary, var(--ec-color-primary-light))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-primary:focus,.ec-button-submit:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-color-interactive), inset 0 0 0 2px var(--ec-color-white))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))}.ec-button-primary.locked:hover,.ec-button-primary.locked:active,.ec-button-primary.locked:focus,.ec-button-submit.locked:hover,.ec-button-submit.locked:active,.ec-button-submit.locked:focus{background-color:var(--ec-button-background-color-primary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-primary, var(--ec-color-primary-light))!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-primary.locked:hover .ec-icon,.ec-button-primary.locked:active .ec-icon,.ec-button-primary.locked:focus .ec-icon,.ec-button-submit.locked:hover .ec-icon,.ec-button-submit.locked:active .ec-icon,.ec-button-submit.locked:focus .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-primary-light))!important}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-secondary:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-secondary.locked:hover,.ec-button-secondary.locked:active,.ec-button-secondary.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-secondary.locked:hover .ec-icon,.ec-button-secondary.locked:active .ec-icon,.ec-button-secondary.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-common{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-common:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common.locked:hover,.ec-button-common.locked:active,.ec-button-common.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8))!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-common.locked:hover .ec-icon,.ec-button-common.locked:active .ec-icon,.ec-button-common.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-icon{background-color:transparent;color:var(--ec-button-color-icon, var(--ec-color-icon));width:2rem;padding:0}.ec-button-icon .ec-icon{height:1rem;margin:0;padding:0;color:inherit}.ec-button-icon:hover:not(:disabled){background-color:var(--ec-background-color-hover)}.ec-button-icon:hover:not(:disabled) .ec-icon{color:var(--ec-button-color-icon-hover, var(--ec-button-color-icon, var(--ec-color-icon)))}.ec-button-icon:active:not(:disabled),.ec-button-icon:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-icon:active:not(:disabled){background-color:var(--ec-background-color-selected)}.ec-button-icon:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{color:var(--ec-color-disabled-dark)}.ec-button-icon.has-badge{width:auto;min-width:2rem;padding-right:0;padding-left:.375rem}.ec-button-icon .badge{margin-left:-.5rem}.ec-button-icon.locked:hover,.ec-button-icon.locked:active,.ec-button-icon.locked:focus{background-color:transparent!important;color:var(--ec-button-color-icon, var(--ec-color-icon))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-icon.locked:hover .ec-icon,.ec-button-icon.locked:active .ec-icon,.ec-button-icon.locked:focus .ec-icon{color:var(--ec-button-color-icon, var(--ec-color-icon))!important}.ec-button-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-primary-dark))}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, inherit)}.ec-button-text:active:not(:disabled),.ec-button-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-text.locked:hover,.ec-button-text.locked:active,.ec-button-text.locked:focus{background-color:transparent!important;color:var(--ec-button-color-text, var(--ec-color-primary-dark))!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-text.locked:hover .ec-icon,.ec-button-text.locked:active .ec-icon,.ec-button-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-text, inherit)!important}.ec-button-link{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-link))}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled),.ec-button-link:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-link.locked:hover,.ec-button-link.locked:active,.ec-button-link.locked:focus{background-color:transparent!important;color:var(--ec-color-link)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-link.locked:hover .ec-icon,.ec-button-link.locked:active .ec-icon,.ec-button-link.locked:focus .ec-icon{color:var(--ec-button-color-icon-link, inherit)!important}.ec-button-danger{background-color:var(--ec-color-danger);color:var(--ec-color-primary-light)}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger:focus{box-shadow:var(--ec-button-box-shadow-focus-primary, 0 0 0 2px var(--ec-border-color-focus), inset 0 0 0 2px var(--ec-color-white))}.ec-button-danger.locked:hover,.ec-button-danger.locked:active,.ec-button-danger.locked:focus{background-color:var(--ec-color-danger)!important;color:var(--ec-color-primary-light)!important;border-color:initial!important;box-shadow:none!important;outline:none!important}.ec-button-danger.locked:hover .ec-icon,.ec-button-danger.locked:active .ec-icon,.ec-button-danger.locked:focus .ec-icon{color:var(--ec-button-color-icon, inherit)!important}.ec-button-danger-text{background-color:transparent;color:var(--ec-button-color-text, var(--ec-color-danger))}.ec-button-danger-text .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)}.ec-button-danger-text:active:not(:disabled),.ec-button-danger-text:focus{box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-danger-text.locked:hover,.ec-button-danger-text.locked:active,.ec-button-danger-text.locked:focus{background-color:transparent!important;color:var(--ec-color-danger)!important;border-color:transparent!important;box-shadow:none!important;outline:none!important}.ec-button-danger-text.locked:hover .ec-icon,.ec-button-danger-text.locked:active .ec-icon,.ec-button-danger-text.locked:focus .ec-icon{color:var(--ec-button-color-icon-danger-text, inherit)!important}.ec-button-card{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border:1px solid var(--ec-button-border-color-secondary, var(--ec-color-gray-8));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-card:active:not(:disabled){background-color:var(--ec-button-background-color-active, var(--ec-background-color-selected));color:var(--ec-button-color-active, var(--ec-color-primary-dark));box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus));border-color:transparent}.ec-button-card:focus{box-shadow:var(--ec-button-box-shadow-focus-secondary, 0 0 0 2px var(--ec-border-color-focus));border-color:var(--ec-button-border-color-secondary-focus, transparent)}.ec-button-card .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-card{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size);font-weight:var(--ec-font-weight-normal);line-height:1.285714286;margin:0;padding:1rem;height:auto;border:1px solid var(--ec-border-color);border-radius:var(--ec-border-radius);text-align:start}.ec-button-card:hover:not(:disabled):not(:focus){box-shadow:none;border-color:var(--ec-border-color-control-hover)}.ec-button-card{height:100%;width:100%}.ec-button-card.locked:hover,.ec-button-card.locked:active,.ec-button-card.locked:focus{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color))!important;border:1px solid var(--ec-border-color)!important;color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))!important;box-shadow:none!important;outline:none!important}.ec-button-card.locked:hover .ec-icon,.ec-button-card.locked:active .ec-icon,.ec-button-card.locked:focus .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))!important}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}button .ec-icon{flex:none}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}button:focus{outline:none;position:relative;z-index:1}button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}button{position:relative}button.icon-only{padding:0;width:2rem}button.locked{cursor:default!important}button.locked:hover,button.locked:active,button.locked:focus{transform:none!important;transition:none!important;animation:none!important}button.locked:hover .label,button.locked:active .label,button.locked:focus .label{color:inherit!important}button.locked:hover .badge,button.locked:active .badge,button.locked:focus .badge{color:inherit!important;background-color:inherit!important}button.has-custom-icon-color .ec-icon,button.has-custom-icon-color .pending-container .ec-icon{color:var(--ec-button-custom-icon-color)!important}button.has-custom-icon-color.locked:hover .ec-icon,button.has-custom-icon-color.locked:active .ec-icon,button.has-custom-icon-color.locked:focus .ec-icon{color:var(--ec-button-custom-icon-color)!important}:host(.textbox-group-btn-right){position:relative}:host(.textbox-group-btn-right) button{padding-left:.4375rem;padding-right:.4375rem;border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-1px}:host(.is-tab) button{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}:host(.is-tab) button.active{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}:host(.is-tab) button:hover,:host(.is-tab) button:focus{outline:none;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}:host(.is-tab) button.is-disabled{opacity:var(--ec-form-control-opacity-disabled);cursor:default;pointer-events:none}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center}:host(.is-tab) button.ec-button-icon .ec-icon{color:inherit}:host(.is-tab) button.ec-button-icon{width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:var(--ec-tab-color-active, var(--ec-color-interactive));background-color:var(--ec-tab-background-color-active, var(--ec-background-color))}.pending-container{display:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.pending-container>.ec-icon{flex:none;color:inherit}.pending-container~.ec-icon,.pending-container~.label,.pending-container~.badge{opacity:0}.badge{margin-left:-.25rem;margin-top:-.75rem}\n"] }]
|
|
250
250
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
251
251
|
type: HostBinding,
|
|
252
252
|
args: ['attr.id']
|
|
@@ -268,6 +268,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
268
268
|
type: Input
|
|
269
269
|
}], ariaHaspopup: [{
|
|
270
270
|
type: Input
|
|
271
|
+
}], ariaActivedescendant: [{
|
|
272
|
+
type: Input
|
|
273
|
+
}], ariaControls: [{
|
|
274
|
+
type: Input
|
|
271
275
|
}], badge: [{
|
|
272
276
|
type: Input
|
|
273
277
|
}], tabindex: [{
|
|
@@ -364,7 +368,7 @@ class BannerComponent {
|
|
|
364
368
|
}
|
|
365
369
|
}
|
|
366
370
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BannerComponent, deps: [{ token: CacheService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
367
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: BannerComponent, isStandalone: false, selector: "ec-banner", inputs: { hidden: "hidden", id: "id", type: "type", bannerStyle: "bannerStyle", title: "title", text: "text", list: "list", showCloseBtn: "showCloseBtn", autoHideOnClose: "autoHideOnClose", customIcon: "customIcon", rememberClosed: "rememberClosed" }, outputs: { closed: "closed" }, host: { properties: { "hidden": "this.hidden" } }, usesOnChanges: true, ngImport: i0, template: "<div id=\"banner_{{id}}\" \n class=\"banner {{type}} {{bannerStyle}}\"\n [attr.role]=\"type === 'error' || type === 'warning' ? 'alert' : (type === 'info' || type === 'success' ? 'status' : null)\">\n @if (showCloseBtn) {\n <ec-button id=\"banner{{id}}_close\"\n type=\"icon\"\n icon=\"icon-cancel\"\n ariaLabel=\"Banner_CloseButtonLabel\"\n (clicked)=\"close()\">\n </ec-button>\n }\n <div class=\"banner-content d-flex text-body-1\">\n <i class=\"ec-icon {{icon}}\"></i>\n <div class=\"ml-2\">\n @if (title) {\n <p class=\"title mb-0\">\n {{title}}\n </p>\n }\n @if (text) {\n <p class=\"text mb-0\">{{text}}</p>\n }\n\n @if (list?.length) {\n <ul class=\"list mb-0\">\n @for (item of list; track item) {\n <li>{{item}}</li>\n }\n </ul>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n</div>\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.instructional:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-instructional)}.instructional:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
|
|
371
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: BannerComponent, isStandalone: false, selector: "ec-banner", inputs: { hidden: "hidden", id: "id", type: "type", bannerStyle: "bannerStyle", title: "title", text: "text", list: "list", showCloseBtn: "showCloseBtn", autoHideOnClose: "autoHideOnClose", customIcon: "customIcon", rememberClosed: "rememberClosed" }, outputs: { closed: "closed" }, host: { properties: { "hidden": "this.hidden" } }, usesOnChanges: true, ngImport: i0, template: "<div id=\"banner_{{id}}\" \n class=\"banner {{type}} {{bannerStyle}}\"\n [attr.role]=\"type === 'error' || type === 'warning' ? 'alert' : (type === 'info' || type === 'success' ? 'status' : null)\">\n @if (showCloseBtn) {\n <ec-button id=\"banner{{id}}_close\"\n type=\"icon\"\n icon=\"icon-cancel\"\n ariaLabel=\"Banner_CloseButtonLabel\"\n (clicked)=\"close()\">\n </ec-button>\n }\n <div class=\"banner-content d-flex text-body-1\">\n <i class=\"ec-icon {{icon}}\"></i>\n <div class=\"ml-2\">\n @if (title) {\n <p class=\"title mb-0\">\n {{title}}\n </p>\n }\n @if (text) {\n <p class=\"text mb-0\">{{text}}</p>\n }\n\n @if (list?.length) {\n <ul class=\"list mb-0\">\n @for (item of list; track item) {\n <li>{{item}}</li>\n }\n </ul>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n</div>\n", styles: [":host{display:flex}:host(.border-bottom-0) .banner{border-bottom:0;border-radius:var(--ec-border-radius-card)}.banner{display:flex;flex-direction:column;flex:1 1;min-height:2.5rem;position:relative;overflow-y:auto;background-color:var(--ec-banner-background-color, var(--ec-background-color-info));border-radius:var(--ec-banner-border-radius, var(--ec-border-radius-card));border:1px solid var(--ec-banner-border-color, var(--ec-color-info))}.banner-content{align-items:var(--ec-banner-align-items-content, normal);padding:.5rem 1rem;flex:none;margin:auto 0;color:var(--ec-banner-color, var(--ec-color-secondary-dark))}.banner-content ::ng-deep p{line-height:inherit}.ec-icon{color:var(--ec-banner-icon-color, var(--ec-color-info));font-size:1.125rem}ec-button{--ec-button-color-icon-hover: var(--ec-color-primary-dark);--ec-background-color-hover: rgba(26, 26, 35, .1);position:absolute;top:.1875rem;right:.25rem}ec-button+.banner-content{padding-right:2.75rem}.title{font-weight:700}.list{margin:0;padding-left:2em}.text+.list{margin-top:1em}.info:not(.toast){--ec-banner-background-color: var(--ec-background-color-info);--ec-banner-border-color: var(--ec-color-info);--ec-banner-icon-color: var(--ec-color-info)}.warning:not(.toast){--ec-banner-background-color: var(--ec-background-color-caution);--ec-banner-border-color: var(--ec-color-caution);--ec-banner-icon-color: var(--ec-color-caution)}.success:not(.toast){--ec-banner-background-color: var(--ec-background-color-success);--ec-banner-border-color: var(--ec-color-success);--ec-banner-icon-color: var(--ec-color-success)}.error:not(.toast){--ec-banner-background-color: var(--ec-background-color-danger);--ec-banner-border-color: var(--ec-color-danger);--ec-banner-icon-color: var(--ec-color-danger)}.pinned{border-radius:0;border-left:0;border-right:0}.promo:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-promo)}.promo:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.instructional:not(.toast){--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-secondary-light);--ec-color-link: var(--ec-color-link-light);border:none;background:var(--ec-background-color-instructional)}.instructional:not(.toast) ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15)}.toast{--ec-banner-background-color: var(--ec-color-gray-8);--ec-banner-color: var(--ec-color-primary-light);--ec-banner-icon-color: var(--ec-color-primary-light);--ec-color-link: var(--ec-color-link-light);border:0;box-shadow:var(--ec-box-shadow)}.toast ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
|
|
368
372
|
}
|
|
369
373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: BannerComponent, decorators: [{
|
|
370
374
|
type: Component,
|
|
@@ -535,7 +539,7 @@ class DateTimeHelper {
|
|
|
535
539
|
/** 3000-01-01 */
|
|
536
540
|
static { this.endOfTime = new Date(3000, 0, 1); }
|
|
537
541
|
/** 3000-01-01 UTC */
|
|
538
|
-
static { this.endOfTimeUTC =
|
|
542
|
+
static { this.endOfTimeUTC = DateTime.fromISO('3000-01-01', { zone: 'utc' }).toJSDate(); }
|
|
539
543
|
/** Default effective date for new AccountMeter relationships: 2010-01-01 */
|
|
540
544
|
static { this.defaultAccountMeterEffectiveDate = new Date(2010, 0, 1); }
|
|
541
545
|
/** The default date that a newly created account becomes effective: 2010-01-01 */
|
|
@@ -577,20 +581,19 @@ class DateTimeHelper {
|
|
|
577
581
|
"yyyyMMdd"
|
|
578
582
|
]; }
|
|
579
583
|
/**
|
|
580
|
-
*
|
|
581
|
-
*
|
|
582
|
-
*
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
'
|
|
587
|
-
'
|
|
588
|
-
'
|
|
589
|
-
'
|
|
590
|
-
'
|
|
591
|
-
'
|
|
592
|
-
'
|
|
593
|
-
'MM-DD-YYYY'
|
|
584
|
+
* Luxon parse formats for the month-first preference. Separator characters
|
|
585
|
+
* in the input are normalized to a hyphen before matching (see {@link parseWithFormats}),
|
|
586
|
+
* so the formats below intentionally use a single separator.
|
|
587
|
+
*/
|
|
588
|
+
static { this.luxonMonthFirstParseFormats = [
|
|
589
|
+
'M-d',
|
|
590
|
+
'MM-dd',
|
|
591
|
+
'M-d-yy',
|
|
592
|
+
'MM-dd-yy',
|
|
593
|
+
'MMddyyyy',
|
|
594
|
+
'yyyyMMdd',
|
|
595
|
+
'yyyy-MM-dd',
|
|
596
|
+
'MM-dd-yyyy'
|
|
594
597
|
]; }
|
|
595
598
|
/**
|
|
596
599
|
* User input formats that we will parse into a date
|
|
@@ -614,44 +617,48 @@ class DateTimeHelper {
|
|
|
614
617
|
"yyyyDDmm"
|
|
615
618
|
]; }
|
|
616
619
|
/**
|
|
617
|
-
*
|
|
618
|
-
*
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
'
|
|
624
|
-
'
|
|
625
|
-
'
|
|
626
|
-
'
|
|
627
|
-
'
|
|
628
|
-
'
|
|
629
|
-
'YYYY-MM-DD',
|
|
630
|
-
'DD-MM-YYYY'
|
|
620
|
+
* Luxon parse formats for the day-first preference. Separator characters
|
|
621
|
+
* in the input are normalized to a hyphen before matching (see {@link parseWithFormats}).
|
|
622
|
+
*/
|
|
623
|
+
static { this.luxonDateFirstParseFormats = [
|
|
624
|
+
'd-M',
|
|
625
|
+
'dd-MM',
|
|
626
|
+
'd-M-yy',
|
|
627
|
+
'dd-MM-yy',
|
|
628
|
+
'ddMMyyyy',
|
|
629
|
+
'yyyyMMdd',
|
|
630
|
+
'yyyy-MM-dd',
|
|
631
|
+
'dd-MM-yyyy'
|
|
631
632
|
]; }
|
|
632
633
|
/**
|
|
633
|
-
*
|
|
634
|
-
*
|
|
635
|
-
*
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
'
|
|
640
|
-
'MMM
|
|
641
|
-
'
|
|
642
|
-
'
|
|
643
|
-
'
|
|
644
|
-
'MMM
|
|
645
|
-
'MMM
|
|
646
|
-
'MMM
|
|
647
|
-
'
|
|
648
|
-
'MMMM
|
|
649
|
-
'
|
|
650
|
-
'MMM
|
|
651
|
-
'
|
|
652
|
-
'MMM,
|
|
653
|
-
'
|
|
654
|
-
'MMMM,
|
|
634
|
+
* Luxon parse formats for medium/long date strings (e.g. "Jan 5, 2024").
|
|
635
|
+
* Shared by date-first and month-first preferences because the month is
|
|
636
|
+
* not numeric, so the order is unambiguous.
|
|
637
|
+
*/
|
|
638
|
+
static { this.luxonMedAndLongDateFormats = [
|
|
639
|
+
// Moment was forgiving with leading zeros (`DD` matched both `9` and `09`);
|
|
640
|
+
// Luxon's `dd` is strict, so single-digit `d` variants are listed explicitly.
|
|
641
|
+
'd MMM',
|
|
642
|
+
'dd MMM',
|
|
643
|
+
'MMM d',
|
|
644
|
+
'MMM dd',
|
|
645
|
+
'd MMM yy',
|
|
646
|
+
'dd MMM yy',
|
|
647
|
+
'd MMM yyyy',
|
|
648
|
+
'dd MMM yyyy',
|
|
649
|
+
'd MMMM yyyy',
|
|
650
|
+
'dd MMMM yyyy',
|
|
651
|
+
'MMM d, yy',
|
|
652
|
+
'MMM d, yyyy',
|
|
653
|
+
'MMM dd, yyyy',
|
|
654
|
+
'MMMM d, yyyy',
|
|
655
|
+
'MMMM dd, yyyy',
|
|
656
|
+
'MMM yy',
|
|
657
|
+
'MMM yyyy',
|
|
658
|
+
'MMMM yyyy',
|
|
659
|
+
'MMM, yy',
|
|
660
|
+
'MMM, yyyy',
|
|
661
|
+
'MMMM, yyyy',
|
|
655
662
|
]; }
|
|
656
663
|
/**
|
|
657
664
|
* Format to display the time portion of a datetime
|
|
@@ -660,6 +667,99 @@ class DateTimeHelper {
|
|
|
660
667
|
///////////////////////////////////////////////////////
|
|
661
668
|
// METHODS
|
|
662
669
|
///////////////////////////////////////////////////////
|
|
670
|
+
/**
|
|
671
|
+
* Convert any date-like value into a Luxon {@link DateTime}. Strings are parsed
|
|
672
|
+
* as ISO 8601; numbers are treated as epoch milliseconds. Returns an invalid
|
|
673
|
+
* DateTime when the input is null/undefined.
|
|
674
|
+
*/
|
|
675
|
+
static toDateTime(value) {
|
|
676
|
+
if (value === null || value === undefined) {
|
|
677
|
+
return DateTime.invalid('null or undefined');
|
|
678
|
+
}
|
|
679
|
+
if (DateTime.isDateTime(value)) {
|
|
680
|
+
return value;
|
|
681
|
+
}
|
|
682
|
+
if (value instanceof Date) {
|
|
683
|
+
return DateTime.fromJSDate(value);
|
|
684
|
+
}
|
|
685
|
+
if (typeof value === 'number') {
|
|
686
|
+
return DateTime.fromMillis(value);
|
|
687
|
+
}
|
|
688
|
+
return DateTime.fromISO(value);
|
|
689
|
+
}
|
|
690
|
+
/**
|
|
691
|
+
* Translate a moment-style format string (e.g. `MM/DD/YYYY HH:mm:ss A`) into
|
|
692
|
+
* the Luxon equivalent (`MM/dd/yyyy HH:mm:ss a`). Use this when format strings
|
|
693
|
+
* originate from external sources (such as user preferences) that still use
|
|
694
|
+
* moment tokens.
|
|
695
|
+
*
|
|
696
|
+
* Only the tokens currently in use across this library are translated:
|
|
697
|
+
* `Y`→`y`, `D`→`d`, `A`→`a`. `M`, `H`, `h`, `m`, `s` are identical between
|
|
698
|
+
* the two libraries.
|
|
699
|
+
*/
|
|
700
|
+
static momentToLuxonFormat(format) {
|
|
701
|
+
return format
|
|
702
|
+
.replace(/Y/g, 'y')
|
|
703
|
+
.replace(/D/g, 'd')
|
|
704
|
+
.replace(/A/g, 'a');
|
|
705
|
+
}
|
|
706
|
+
/**
|
|
707
|
+
* Format a date-like value using a moment-style format string. The format
|
|
708
|
+
* string is automatically translated to Luxon tokens, so callers can keep
|
|
709
|
+
* passing the same preference strings (e.g. `MM/DD/YYYY HH:mm:ss`).
|
|
710
|
+
*
|
|
711
|
+
* When `displayInUTC` is true, string inputs without zone info are parsed
|
|
712
|
+
* as UTC (matching `moment.utc(str)`), and all other inputs are shifted to
|
|
713
|
+
* the UTC zone for display. Returns an empty string for invalid input.
|
|
714
|
+
*
|
|
715
|
+
* Moment's lowercase `a` token produces lowercase `am`/`pm`, but Luxon's
|
|
716
|
+
* `a` is locale-aware and emits uppercase `AM`/`PM` in en-US. When the
|
|
717
|
+
* incoming format uses lowercase `a` (and not uppercase `A`), the meridiem
|
|
718
|
+
* in the output is lowercased to preserve the moment contract for user
|
|
719
|
+
* preferences like `h:mm:ss a` that are stored externally.
|
|
720
|
+
*/
|
|
721
|
+
static formatDate(date, momentFormat, displayInUTC = false) {
|
|
722
|
+
let dt;
|
|
723
|
+
if (displayInUTC && typeof date === 'string') {
|
|
724
|
+
dt = DateTime.fromISO(date, { zone: 'utc' });
|
|
725
|
+
}
|
|
726
|
+
else {
|
|
727
|
+
dt = this.toDateTime(date);
|
|
728
|
+
if (displayInUTC) {
|
|
729
|
+
dt = dt.setZone('utc');
|
|
730
|
+
}
|
|
731
|
+
}
|
|
732
|
+
if (!dt.isValid)
|
|
733
|
+
return '';
|
|
734
|
+
let result = dt.toFormat(this.momentToLuxonFormat(momentFormat));
|
|
735
|
+
if (momentFormat.includes('a') && !momentFormat.includes('A')) {
|
|
736
|
+
result = result.replace(/AM|PM/g, m => m.toLowerCase());
|
|
737
|
+
}
|
|
738
|
+
return result;
|
|
739
|
+
}
|
|
740
|
+
/**
|
|
741
|
+
* Parse a string against a list of format patterns. Returns the first
|
|
742
|
+
* successful parse as a {@link DateTime} (which may be invalid if none match).
|
|
743
|
+
*
|
|
744
|
+
* Format strings may use either Luxon or moment tokens — each pattern is
|
|
745
|
+
* run through {@link momentToLuxonFormat} before matching, so callers can
|
|
746
|
+
* keep passing arrays like `['M/D/YYYY']` from previously moment-based code.
|
|
747
|
+
*
|
|
748
|
+
* Mirrors moment's behavior of ignoring separator characters by normalizing
|
|
749
|
+
* `/`, `.` and `-` in both input and patterns before matching.
|
|
750
|
+
*/
|
|
751
|
+
static parseWithFormats(value, formats) {
|
|
752
|
+
const normalize = (s) => s.replace(/[\/.\-]/g, '-');
|
|
753
|
+
const normalizedValue = normalize(value);
|
|
754
|
+
for (const format of formats) {
|
|
755
|
+
const luxonFormat = this.momentToLuxonFormat(format);
|
|
756
|
+
const dt = DateTime.fromFormat(normalizedValue, normalize(luxonFormat));
|
|
757
|
+
if (dt.isValid) {
|
|
758
|
+
return dt;
|
|
759
|
+
}
|
|
760
|
+
}
|
|
761
|
+
return DateTime.invalid('no matching format');
|
|
762
|
+
}
|
|
663
763
|
/**
|
|
664
764
|
* Return true if @see date is equal to the @see endOfTime
|
|
665
765
|
*/
|
|
@@ -671,7 +771,7 @@ class DateTimeHelper {
|
|
|
671
771
|
* Compare two dates and return true if they represent the same year, month, and day (time is ignored).
|
|
672
772
|
*/
|
|
673
773
|
static isSameDay(date1, date2) {
|
|
674
|
-
return
|
|
774
|
+
return this.toDateTime(date1).hasSame(this.toDateTime(date2), 'day');
|
|
675
775
|
}
|
|
676
776
|
/**
|
|
677
777
|
* Get the parse formats based on the given date format. If no date format is
|
|
@@ -690,19 +790,19 @@ class DateTimeHelper {
|
|
|
690
790
|
return dateFormat ? map[dateFormat] : this.monthFirstParseFormats;
|
|
691
791
|
}
|
|
692
792
|
/**
|
|
693
|
-
* Get the
|
|
793
|
+
* Get the Luxon parse formats based on the given date format. If no date format is
|
|
694
794
|
* given, or we don't recognize the format, return the month first parse formats.
|
|
695
795
|
*/
|
|
696
|
-
static
|
|
796
|
+
static getLuxonParseFormats(dateFormat) {
|
|
697
797
|
let map = {
|
|
698
|
-
'MM/DD/YYYY': [...this.
|
|
699
|
-
'MM-DD-YYYY': [...this.
|
|
700
|
-
'DD/MM/YYYY': [...this.
|
|
701
|
-
'DD-MM-YYYY': [...this.
|
|
702
|
-
'YYYY/MM/DD': [...this.
|
|
703
|
-
'YYYY-MM-DD': [...this.
|
|
798
|
+
'MM/DD/YYYY': [...this.luxonMonthFirstParseFormats, ...this.luxonMedAndLongDateFormats],
|
|
799
|
+
'MM-DD-YYYY': [...this.luxonMonthFirstParseFormats, ...this.luxonMedAndLongDateFormats],
|
|
800
|
+
'DD/MM/YYYY': [...this.luxonDateFirstParseFormats, ...this.luxonMedAndLongDateFormats],
|
|
801
|
+
'DD-MM-YYYY': [...this.luxonDateFirstParseFormats, ...this.luxonMedAndLongDateFormats],
|
|
802
|
+
'YYYY/MM/DD': [...this.luxonMonthFirstParseFormats, ...this.luxonMedAndLongDateFormats],
|
|
803
|
+
'YYYY-MM-DD': [...this.luxonMonthFirstParseFormats, ...this.luxonMedAndLongDateFormats]
|
|
704
804
|
};
|
|
705
|
-
return dateFormat ? map[dateFormat] : this.
|
|
805
|
+
return dateFormat ? map[dateFormat] : this.luxonMonthFirstParseFormats;
|
|
706
806
|
}
|
|
707
807
|
/**
|
|
708
808
|
* Get relationship start date (favoring date in partialFormState if exists)
|
|
@@ -725,28 +825,23 @@ class DateTimeHelper {
|
|
|
725
825
|
return null;
|
|
726
826
|
}
|
|
727
827
|
static isDateBetween(date, startDate, endDate, includeStart, includeEnd) {
|
|
728
|
-
let inclusivity = '()';
|
|
729
|
-
if (includeStart && includeEnd) {
|
|
730
|
-
inclusivity = '[]';
|
|
731
|
-
}
|
|
732
|
-
else if (includeStart) {
|
|
733
|
-
inclusivity = '[)';
|
|
734
|
-
}
|
|
735
|
-
else if (includeEnd) {
|
|
736
|
-
inclusivity = '(]';
|
|
737
|
-
}
|
|
738
828
|
// If a start date is not provide, we'll use our beginning of time instead
|
|
739
829
|
startDate = startDate || this.beginningOfTime;
|
|
740
830
|
// If an end date is not provided, we'll use our end of time instead
|
|
741
831
|
endDate = endDate || this.endOfTime;
|
|
742
|
-
|
|
832
|
+
const d = this.toDateTime(date).startOf('day');
|
|
833
|
+
const s = this.toDateTime(startDate).startOf('day');
|
|
834
|
+
const e = this.toDateTime(endDate).startOf('day');
|
|
835
|
+
const afterStart = includeStart ? d >= s : d > s;
|
|
836
|
+
const beforeEnd = includeEnd ? d <= e : d < e;
|
|
837
|
+
return afterStart && beforeEnd;
|
|
743
838
|
}
|
|
744
839
|
static stringToDate(dateString) {
|
|
745
840
|
if (dateString === null || dateString === undefined) {
|
|
746
841
|
return dateString;
|
|
747
842
|
}
|
|
748
843
|
else {
|
|
749
|
-
return
|
|
844
|
+
return DateTime.fromISO(dateString).toJSDate();
|
|
750
845
|
}
|
|
751
846
|
}
|
|
752
847
|
}
|
|
@@ -760,15 +855,15 @@ class DateInputSelectionStrategyBase {
|
|
|
760
855
|
if (!value) {
|
|
761
856
|
return null;
|
|
762
857
|
}
|
|
763
|
-
|
|
764
|
-
if (date.isValid
|
|
858
|
+
let date = DateTimeHelper.parseWithFormats(value, parseFormats);
|
|
859
|
+
if (date.isValid) {
|
|
765
860
|
// If we're in a temporary state (when the user is typing in a textbox), we need to set the year to the current year if it's before the min year
|
|
766
861
|
// This prevents the calendars from showing unhelpful dates that are in the distant past before the user finishes typing in the date.
|
|
767
862
|
// We don't do this modification when the real selection happens on textbox blur.
|
|
768
|
-
if (opts?.shiftToCurrentYearIfBelow && date.
|
|
769
|
-
date.set(
|
|
863
|
+
if (opts?.shiftToCurrentYearIfBelow && date < DateTime.fromJSDate(opts.shiftToCurrentYearIfBelow)) {
|
|
864
|
+
date = date.set({ year: DateTime.now().year });
|
|
770
865
|
}
|
|
771
|
-
return date.
|
|
866
|
+
return date.toJSDate();
|
|
772
867
|
}
|
|
773
868
|
return null;
|
|
774
869
|
}
|
|
@@ -850,7 +945,7 @@ class DaySelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
850
945
|
getNextSelection(selection) {
|
|
851
946
|
// Add a single day to the selection
|
|
852
947
|
if (DateInput.isSelectionSingleDate(selection)) {
|
|
853
|
-
return
|
|
948
|
+
return DateTime.fromJSDate(selection).plus({ days: 1 }).toJSDate();
|
|
854
949
|
}
|
|
855
950
|
// This shouldn't happen based on current date input flows, but if it does just return the selection as-is.
|
|
856
951
|
return selection;
|
|
@@ -858,7 +953,7 @@ class DaySelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
858
953
|
getPreviousSelection(selection) {
|
|
859
954
|
// Subtract a single day from the selection
|
|
860
955
|
if (DateInput.isSelectionSingleDate(selection)) {
|
|
861
|
-
return
|
|
956
|
+
return DateTime.fromJSDate(selection).minus({ days: 1 }).toJSDate();
|
|
862
957
|
}
|
|
863
958
|
// This shouldn't happen based on current date input flows, but if it does just return the selection as-is.
|
|
864
959
|
return selection;
|
|
@@ -889,19 +984,19 @@ class Last28DaysSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
889
984
|
// Update the start and end dates to match a 28-day range, keying off the end date if parseFromEnd is true
|
|
890
985
|
// parseFromEnd is true when a date is being entered from the end date textbox
|
|
891
986
|
if (opts?.parseFromEnd) {
|
|
892
|
-
start =
|
|
987
|
+
start = DateTime.fromJSDate(end).minus({ days: 27 }).toJSDate();
|
|
893
988
|
}
|
|
894
989
|
else {
|
|
895
|
-
end =
|
|
990
|
+
end = DateTime.fromJSDate(start).plus({ days: 27 }).toJSDate();
|
|
896
991
|
}
|
|
897
992
|
}
|
|
898
993
|
// If the start date is not provided, we'll use the end date to calculate the start date
|
|
899
994
|
if (!start && end && !opts?.preventAutoComplete) {
|
|
900
|
-
start =
|
|
995
|
+
start = DateTime.fromJSDate(end).minus({ days: 27 }).toJSDate();
|
|
901
996
|
}
|
|
902
997
|
// If the end date is not provided, we'll use the start date to calculate the end date
|
|
903
998
|
if (!end && start && !opts?.preventAutoComplete) {
|
|
904
|
-
end =
|
|
999
|
+
end = DateTime.fromJSDate(start).plus({ days: 27 }).toJSDate();
|
|
905
1000
|
}
|
|
906
1001
|
if (!start && !end) {
|
|
907
1002
|
return null;
|
|
@@ -912,7 +1007,7 @@ class Last28DaysSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
912
1007
|
}
|
|
913
1008
|
getSelectionFromDate(date) {
|
|
914
1009
|
return {
|
|
915
|
-
start:
|
|
1010
|
+
start: DateTime.fromJSDate(date).minus({ days: 27 }).toJSDate(),
|
|
916
1011
|
end: date
|
|
917
1012
|
};
|
|
918
1013
|
}
|
|
@@ -922,7 +1017,7 @@ class Last28DaysSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
922
1017
|
if (!previousSelection.end && previousSelection.start) {
|
|
923
1018
|
return {
|
|
924
1019
|
start: previousSelection.start,
|
|
925
|
-
end:
|
|
1020
|
+
end: DateTime.fromJSDate(previousSelection.start).plus({ days: 27 }).toJSDate()
|
|
926
1021
|
};
|
|
927
1022
|
// If the range only has an end date, make the 28-day range end on that date
|
|
928
1023
|
}
|
|
@@ -939,9 +1034,10 @@ class Last28DaysSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
939
1034
|
getNextSelection(selection) {
|
|
940
1035
|
// Move the selection to the next 28 days
|
|
941
1036
|
if (DateInput.isSelectionRange(selection) && selection.end) {
|
|
1037
|
+
const end = DateTime.fromJSDate(selection.end);
|
|
942
1038
|
return {
|
|
943
|
-
start:
|
|
944
|
-
end:
|
|
1039
|
+
start: end.plus({ days: 1 }).toJSDate(),
|
|
1040
|
+
end: end.plus({ days: 28 }).toJSDate()
|
|
945
1041
|
};
|
|
946
1042
|
}
|
|
947
1043
|
// This shouldn't happen since the next stepper is disabled if the selection only has one date.
|
|
@@ -951,9 +1047,10 @@ class Last28DaysSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
951
1047
|
getPreviousSelection(selection) {
|
|
952
1048
|
// Move the selection to the previous 28 days
|
|
953
1049
|
if (DateInput.isSelectionRange(selection) && selection.start) {
|
|
1050
|
+
const start = DateTime.fromJSDate(selection.start);
|
|
954
1051
|
return {
|
|
955
|
-
start:
|
|
956
|
-
end:
|
|
1052
|
+
start: start.minus({ days: 28 }).toJSDate(),
|
|
1053
|
+
end: start.minus({ days: 1 }).toJSDate()
|
|
957
1054
|
};
|
|
958
1055
|
}
|
|
959
1056
|
// This shouldn't happen since the previous stepper is disabled if the selection only has one date.
|
|
@@ -986,19 +1083,19 @@ class Last7DaysSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
986
1083
|
// Update the start and end dates to match a 7-day range, keying off the end date if parseFromEnd is true
|
|
987
1084
|
// parseFromEnd is true when a date is being entered from the end date textbox
|
|
988
1085
|
if (opts?.parseFromEnd) {
|
|
989
|
-
start =
|
|
1086
|
+
start = DateTime.fromJSDate(end).minus({ days: 6 }).toJSDate();
|
|
990
1087
|
}
|
|
991
1088
|
else {
|
|
992
|
-
end =
|
|
1089
|
+
end = DateTime.fromJSDate(start).plus({ days: 6 }).toJSDate();
|
|
993
1090
|
}
|
|
994
1091
|
}
|
|
995
1092
|
// If the start date is not provided, we'll use the end date to calculate the start date
|
|
996
1093
|
if (!start && end && !opts?.preventAutoComplete) {
|
|
997
|
-
start =
|
|
1094
|
+
start = DateTime.fromJSDate(end).minus({ days: 6 }).toJSDate();
|
|
998
1095
|
}
|
|
999
1096
|
// If the end date is not provided, we'll use the start date to calculate the end date
|
|
1000
1097
|
if (!end && start && !opts?.preventAutoComplete) {
|
|
1001
|
-
end =
|
|
1098
|
+
end = DateTime.fromJSDate(start).plus({ days: 6 }).toJSDate();
|
|
1002
1099
|
}
|
|
1003
1100
|
if (!start && !end) {
|
|
1004
1101
|
return null;
|
|
@@ -1010,7 +1107,7 @@ class Last7DaysSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1010
1107
|
getSelectionFromDate(date) {
|
|
1011
1108
|
// Base the selection on the given date, moving back 6 days
|
|
1012
1109
|
return {
|
|
1013
|
-
start:
|
|
1110
|
+
start: DateTime.fromJSDate(date).minus({ days: 6 }).toJSDate(),
|
|
1014
1111
|
end: date
|
|
1015
1112
|
};
|
|
1016
1113
|
}
|
|
@@ -1020,7 +1117,7 @@ class Last7DaysSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1020
1117
|
if (!previousSelection.end && previousSelection.start) {
|
|
1021
1118
|
return {
|
|
1022
1119
|
start: previousSelection.start,
|
|
1023
|
-
end:
|
|
1120
|
+
end: DateTime.fromJSDate(previousSelection.start).plus({ days: 6 }).toJSDate()
|
|
1024
1121
|
};
|
|
1025
1122
|
// Otherwise, create the new selection based on the end date backwards
|
|
1026
1123
|
}
|
|
@@ -1037,9 +1134,10 @@ class Last7DaysSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1037
1134
|
getNextSelection(selection) {
|
|
1038
1135
|
// Shift the range forward by 7 days
|
|
1039
1136
|
if (DateInput.isSelectionRange(selection) && selection.end) {
|
|
1137
|
+
const end = DateTime.fromJSDate(selection.end);
|
|
1040
1138
|
return {
|
|
1041
|
-
start:
|
|
1042
|
-
end:
|
|
1139
|
+
start: end.plus({ days: 1 }).toJSDate(),
|
|
1140
|
+
end: end.plus({ days: 7 }).toJSDate()
|
|
1043
1141
|
};
|
|
1044
1142
|
}
|
|
1045
1143
|
// This shouldn't happen since the next stepper is disabled if the selection only has one date.
|
|
@@ -1049,9 +1147,10 @@ class Last7DaysSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1049
1147
|
getPreviousSelection(selection) {
|
|
1050
1148
|
// Shift the range back 7 days
|
|
1051
1149
|
if (DateInput.isSelectionRange(selection) && selection.start) {
|
|
1150
|
+
const start = DateTime.fromJSDate(selection.start);
|
|
1052
1151
|
return {
|
|
1053
|
-
start:
|
|
1054
|
-
end:
|
|
1152
|
+
start: start.minus({ days: 7 }).toJSDate(),
|
|
1153
|
+
end: start.minus({ days: 1 }).toJSDate()
|
|
1055
1154
|
};
|
|
1056
1155
|
}
|
|
1057
1156
|
// This shouldn't happen since the previous stepper is disabled if the selection only has one date.
|
|
@@ -1079,7 +1178,7 @@ class MonthSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1079
1178
|
// A single date selection shouldn't happen in this mode but it's simple enough to handle
|
|
1080
1179
|
const date = DateInput.isSelectionRange(selection) ? selection.start : selection;
|
|
1081
1180
|
return {
|
|
1082
|
-
textbox:
|
|
1181
|
+
textbox: date ? DateTime.fromJSDate(date).toFormat('MMM, yyyy') : null,
|
|
1083
1182
|
textbox2: null
|
|
1084
1183
|
};
|
|
1085
1184
|
}
|
|
@@ -1092,9 +1191,10 @@ class MonthSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1092
1191
|
return this.getSelectionFromDate(date);
|
|
1093
1192
|
}
|
|
1094
1193
|
getSelectionFromDate(date) {
|
|
1194
|
+
const dt = DateTime.fromJSDate(date);
|
|
1095
1195
|
return {
|
|
1096
|
-
start:
|
|
1097
|
-
end:
|
|
1196
|
+
start: dt.startOf('month').toJSDate(),
|
|
1197
|
+
end: dt.endOf('month').toJSDate()
|
|
1098
1198
|
};
|
|
1099
1199
|
}
|
|
1100
1200
|
getNewSelectionFromExisting(previousSelection) {
|
|
@@ -1114,8 +1214,8 @@ class MonthSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1114
1214
|
getNextSelection(selection) {
|
|
1115
1215
|
// Move the selection to the next month
|
|
1116
1216
|
if (DateInput.isSelectionRange(selection) && selection.start) {
|
|
1117
|
-
const date =
|
|
1118
|
-
return this.getSelectionFromDate(date.
|
|
1217
|
+
const date = DateTime.fromJSDate(selection.start).plus({ months: 1 });
|
|
1218
|
+
return this.getSelectionFromDate(date.toJSDate());
|
|
1119
1219
|
}
|
|
1120
1220
|
// This shouldn't happen since the next stepper is disabled if the selection only has one date.
|
|
1121
1221
|
// If it does, just return the selection as-is.
|
|
@@ -1124,8 +1224,8 @@ class MonthSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1124
1224
|
getPreviousSelection(selection) {
|
|
1125
1225
|
// Move the selection to the previous month
|
|
1126
1226
|
if (DateInput.isSelectionRange(selection) && selection.start) {
|
|
1127
|
-
const date =
|
|
1128
|
-
return this.getSelectionFromDate(date.
|
|
1227
|
+
const date = DateTime.fromJSDate(selection.start).minus({ months: 1 });
|
|
1228
|
+
return this.getSelectionFromDate(date.toJSDate());
|
|
1129
1229
|
}
|
|
1130
1230
|
// This shouldn't happen since the previous stepper is disabled if the selection only has one date.
|
|
1131
1231
|
// If it does, just return the selection as-is.
|
|
@@ -1148,9 +1248,9 @@ class QuarterSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1148
1248
|
// Format the the quarter range as "MMM–MMM, YYYY"
|
|
1149
1249
|
// We only have one textbox in this mode
|
|
1150
1250
|
if (DateInput.isSelectionRange(selection)) {
|
|
1151
|
-
const start =
|
|
1152
|
-
const end =
|
|
1153
|
-
const year =
|
|
1251
|
+
const start = selection.start ? DateTime.fromJSDate(selection.start).toFormat('MMM') : '';
|
|
1252
|
+
const end = selection.end ? DateTime.fromJSDate(selection.end).toFormat('MMM') : '';
|
|
1253
|
+
const year = selection.end ? DateTime.fromJSDate(selection.end).toFormat('yyyy') : '';
|
|
1154
1254
|
return {
|
|
1155
1255
|
textbox: `${start}–${end}, ${year}`,
|
|
1156
1256
|
textbox2: null
|
|
@@ -1168,9 +1268,10 @@ class QuarterSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1168
1268
|
return this.getSelectionFromDate(date);
|
|
1169
1269
|
}
|
|
1170
1270
|
getSelectionFromDate(date) {
|
|
1271
|
+
const dt = DateTime.fromJSDate(date);
|
|
1171
1272
|
return {
|
|
1172
|
-
start:
|
|
1173
|
-
end:
|
|
1273
|
+
start: dt.startOf('quarter').toJSDate(),
|
|
1274
|
+
end: dt.endOf('quarter').toJSDate()
|
|
1174
1275
|
};
|
|
1175
1276
|
}
|
|
1176
1277
|
getNewSelectionFromExisting(previousSelection) {
|
|
@@ -1190,8 +1291,8 @@ class QuarterSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1190
1291
|
getNextSelection(selection) {
|
|
1191
1292
|
// Move the selection to the next quarter
|
|
1192
1293
|
if (DateInput.isSelectionRange(selection) && selection.start) {
|
|
1193
|
-
const date =
|
|
1194
|
-
return this.getSelectionFromDate(date.
|
|
1294
|
+
const date = DateTime.fromJSDate(selection.start).plus({ quarters: 1 });
|
|
1295
|
+
return this.getSelectionFromDate(date.toJSDate());
|
|
1195
1296
|
}
|
|
1196
1297
|
// This shouldn't happen since the next stepper is disabled if the selection only has one date.
|
|
1197
1298
|
// If it does, just return the selection as-is.
|
|
@@ -1200,8 +1301,8 @@ class QuarterSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1200
1301
|
getPreviousSelection(selection) {
|
|
1201
1302
|
// Move the selection to the previous quarter
|
|
1202
1303
|
if (DateInput.isSelectionRange(selection) && selection.start) {
|
|
1203
|
-
const date =
|
|
1204
|
-
return this.getSelectionFromDate(date.
|
|
1304
|
+
const date = DateTime.fromJSDate(selection.start).minus({ quarters: 1 });
|
|
1305
|
+
return this.getSelectionFromDate(date.toJSDate());
|
|
1205
1306
|
}
|
|
1206
1307
|
// This shouldn't happen since the previous stepper is disabled if the selection only has one date.
|
|
1207
1308
|
// If it does, just return the selection as-is.
|
|
@@ -1224,13 +1325,13 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1224
1325
|
if (!selection) {
|
|
1225
1326
|
return { textbox: null, textbox2: null };
|
|
1226
1327
|
}
|
|
1227
|
-
// We use
|
|
1328
|
+
// We use Luxon's DATE_MED preset here (equivalent to moment's 'll') so the formatted date follows the user's locale
|
|
1228
1329
|
if (DateInput.isSelectionSingleDate(selection)) {
|
|
1229
|
-
return { textbox:
|
|
1330
|
+
return { textbox: DateTime.fromJSDate(selection).toLocaleString(DateTime.DATE_MED), textbox2: null };
|
|
1230
1331
|
}
|
|
1231
1332
|
else {
|
|
1232
|
-
const start = selection.start ?
|
|
1233
|
-
const end = selection.end ?
|
|
1333
|
+
const start = selection.start ? DateTime.fromJSDate(selection.start).toLocaleString(DateTime.DATE_MED) : null;
|
|
1334
|
+
const end = selection.end ? DateTime.fromJSDate(selection.end).toLocaleString(DateTime.DATE_MED) : null;
|
|
1234
1335
|
return { textbox: start, textbox2: end };
|
|
1235
1336
|
}
|
|
1236
1337
|
}
|
|
@@ -1241,7 +1342,7 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1241
1342
|
// because we don't have a fixed range to automatically adjust the dates to. If the user is changing the begin date or end date and ends
|
|
1242
1343
|
// up crossing the other date, we should clear out the date that's not being changed so that the user can enter a valid range using the
|
|
1243
1344
|
// begin/end date they just entered.
|
|
1244
|
-
if (start && end &&
|
|
1345
|
+
if (start && end && DateTime.fromJSDate(start) > DateTime.fromJSDate(end)) {
|
|
1245
1346
|
if (opts?.parseFromEnd) {
|
|
1246
1347
|
start = null;
|
|
1247
1348
|
}
|
|
@@ -1259,18 +1360,19 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1259
1360
|
getSelectionFromDate(date, existingSelection) {
|
|
1260
1361
|
if (DateInput.isSelectionRange(existingSelection)) {
|
|
1261
1362
|
const { start, end } = existingSelection;
|
|
1363
|
+
const dDt = DateTime.fromJSDate(date);
|
|
1262
1364
|
if (start && !end) {
|
|
1263
1365
|
// If the selected date is before the existing start date, set it as the new start date and use the existing start date as the end date
|
|
1264
|
-
return
|
|
1366
|
+
return dDt < DateTime.fromJSDate(start) ? { start: date, end: start } : { start, end: date };
|
|
1265
1367
|
}
|
|
1266
1368
|
if (end && !start) {
|
|
1267
1369
|
// If the selected date is after the existing end date, set it as the new end date and use the existing end date as the start date
|
|
1268
|
-
return
|
|
1370
|
+
return dDt < DateTime.fromJSDate(end) ? { start: date, end } : { start: end, end: date };
|
|
1269
1371
|
}
|
|
1270
1372
|
}
|
|
1271
1373
|
else if (DateInput.isSelectionSingleDate(existingSelection)) {
|
|
1272
1374
|
// If the selected date is before the existing date, set it as the new start date and use the existing date as the end date
|
|
1273
|
-
return
|
|
1375
|
+
return DateTime.fromJSDate(date) < DateTime.fromJSDate(existingSelection) ? { start: date, end: existingSelection } : { start: existingSelection, end: date };
|
|
1274
1376
|
}
|
|
1275
1377
|
// If no selection exists or we already have a complete selection, start a new one with the selected date as the start date.
|
|
1276
1378
|
return { start: date, end: null };
|
|
@@ -1291,9 +1393,9 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1291
1393
|
// If we have a valid range, we'll shift the range to the date provided, using it as the end date
|
|
1292
1394
|
// The new selection will have the same length as the previous.
|
|
1293
1395
|
if (DateInput.isSelectionRange(existingSelection) && existingSelection.start && existingSelection.end) {
|
|
1294
|
-
const length =
|
|
1396
|
+
const length = Math.floor(DateTime.fromJSDate(existingSelection.end).diff(DateTime.fromJSDate(existingSelection.start), 'days').days);
|
|
1295
1397
|
return {
|
|
1296
|
-
start:
|
|
1398
|
+
start: DateTime.fromJSDate(date).minus({ days: length }).toJSDate(),
|
|
1297
1399
|
end: date
|
|
1298
1400
|
};
|
|
1299
1401
|
}
|
|
@@ -1305,10 +1407,11 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1305
1407
|
// We can only determine the next selection if we have a valid range
|
|
1306
1408
|
if (DateInput.isSelectionRange(selection) && selection.start && selection.end) {
|
|
1307
1409
|
// Shift the range forward by the number of days between the start and end dates
|
|
1308
|
-
const
|
|
1410
|
+
const end = DateTime.fromJSDate(selection.end);
|
|
1411
|
+
const length = Math.floor(end.diff(DateTime.fromJSDate(selection.start), 'days').days);
|
|
1309
1412
|
return {
|
|
1310
|
-
start:
|
|
1311
|
-
end:
|
|
1413
|
+
start: end.plus({ days: 1 }).toJSDate(),
|
|
1414
|
+
end: end.plus({ days: 1 + length }).toJSDate()
|
|
1312
1415
|
};
|
|
1313
1416
|
}
|
|
1314
1417
|
// This shouldn't happen since the next stepper is disabled if the selection only has one date.
|
|
@@ -1319,10 +1422,11 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1319
1422
|
// We can only determine the previous selection if we have a valid range
|
|
1320
1423
|
if (DateInput.isSelectionRange(selection) && selection.start && selection.end) {
|
|
1321
1424
|
// Shift the range back by the number of days between the start and end dates
|
|
1322
|
-
const
|
|
1425
|
+
const start = DateTime.fromJSDate(selection.start);
|
|
1426
|
+
const length = Math.floor(DateTime.fromJSDate(selection.end).diff(start, 'days').days);
|
|
1323
1427
|
return {
|
|
1324
|
-
start:
|
|
1325
|
-
end:
|
|
1428
|
+
start: start.minus({ days: 1 + length }).toJSDate(),
|
|
1429
|
+
end: start.minus({ days: 1 }).toJSDate()
|
|
1326
1430
|
};
|
|
1327
1431
|
}
|
|
1328
1432
|
// This shouldn't happen since the previous stepper is disabled if the selection only has one date.
|
|
@@ -1332,31 +1436,33 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1332
1436
|
getPrimaryCalendarView(selection, minDate, maxDate, currentView) {
|
|
1333
1437
|
let viewDate;
|
|
1334
1438
|
if (DateInput.isSelectionRange(selection)) {
|
|
1335
|
-
|
|
1336
|
-
|
|
1439
|
+
const start = selection.start ? DateTime.fromJSDate(selection.start) : null;
|
|
1440
|
+
const end = selection.end ? DateTime.fromJSDate(selection.end) : null;
|
|
1441
|
+
const minDt = DateTime.fromJSDate(minDate);
|
|
1442
|
+
const maxDt = DateTime.fromJSDate(maxDate);
|
|
1337
1443
|
// Since we're in range mode, the primary calendar is mostly concerned with the start date
|
|
1338
1444
|
if (start) {
|
|
1339
1445
|
// If we have a start date in the selection and it's before the min date, shift the view to the min date.
|
|
1340
|
-
if (start.
|
|
1446
|
+
if (start.startOf('month') < minDt.startOf('month')) {
|
|
1341
1447
|
viewDate = minDate;
|
|
1342
1448
|
// If the start is after the max date, shift the view to the max date.
|
|
1343
1449
|
}
|
|
1344
|
-
else if (start.
|
|
1450
|
+
else if (start.startOf('month') >= maxDt.startOf('month')) {
|
|
1345
1451
|
// the secondary calendar will show the max date month.
|
|
1346
1452
|
// The primary calendar will show the month before the max date.
|
|
1347
|
-
viewDate =
|
|
1453
|
+
viewDate = maxDt.minus({ months: 1 }).toJSDate();
|
|
1348
1454
|
}
|
|
1349
1455
|
else {
|
|
1350
|
-
viewDate = start.
|
|
1456
|
+
viewDate = start.toJSDate();
|
|
1351
1457
|
}
|
|
1352
1458
|
}
|
|
1353
|
-
else if (end && end.
|
|
1459
|
+
else if (end && end.startOf('month') <= minDt.startOf('month')) {
|
|
1354
1460
|
// If we don't have a start date, and the end date is the same month or before the min date, shift the view to the min date.
|
|
1355
1461
|
viewDate = minDate;
|
|
1356
1462
|
}
|
|
1357
|
-
else if (end && end.
|
|
1463
|
+
else if (end && end.startOf('month') <= DateTime.now().startOf('month')) {
|
|
1358
1464
|
// If we don't have a start date, and the end date is the same month or before the current month, shift the view to the month before the end
|
|
1359
|
-
viewDate =
|
|
1465
|
+
viewDate = end.minus({ months: 1 }).toJSDate();
|
|
1360
1466
|
}
|
|
1361
1467
|
else {
|
|
1362
1468
|
// Otherwise, show the current month.
|
|
@@ -1374,32 +1480,34 @@ class RangeSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1374
1480
|
getSecondaryCalendarView(selection, minDate, maxDate, currentView) {
|
|
1375
1481
|
let viewDate;
|
|
1376
1482
|
if (DateInput.isSelectionRange(selection)) {
|
|
1377
|
-
|
|
1378
|
-
|
|
1483
|
+
const start = selection.start ? DateTime.fromJSDate(selection.start) : null;
|
|
1484
|
+
const end = selection.end ? DateTime.fromJSDate(selection.end) : null;
|
|
1485
|
+
const minDt = DateTime.fromJSDate(minDate);
|
|
1486
|
+
const maxDt = DateTime.fromJSDate(maxDate);
|
|
1379
1487
|
// The secondary calendar is primarily concerned with the end date in the selection.
|
|
1380
1488
|
if (end) {
|
|
1381
|
-
if (end.
|
|
1489
|
+
if (end.startOf('month') > maxDt.startOf('month')) {
|
|
1382
1490
|
// If the end date is after the max date, shift the view to the max date.
|
|
1383
1491
|
viewDate = maxDate;
|
|
1384
1492
|
}
|
|
1385
|
-
else if (end.
|
|
1493
|
+
else if (end.startOf('month') <= minDt.startOf('month')) {
|
|
1386
1494
|
// If the end date is the same month or before the min date, shift the view to show
|
|
1387
1495
|
// the month after the min date. The primary calendar will show the min date month.
|
|
1388
|
-
viewDate =
|
|
1496
|
+
viewDate = minDt.plus({ months: 1 }).toJSDate();
|
|
1389
1497
|
}
|
|
1390
1498
|
else {
|
|
1391
1499
|
// Otherwise, show the end date month.
|
|
1392
|
-
viewDate = end.
|
|
1500
|
+
viewDate = end.toJSDate();
|
|
1393
1501
|
}
|
|
1394
1502
|
}
|
|
1395
|
-
else if (start && start.
|
|
1503
|
+
else if (start && start.startOf('month') >= maxDt.startOf('month')) {
|
|
1396
1504
|
// If we don't have an end date, and the start date is after the max date, show the max date month
|
|
1397
1505
|
viewDate = maxDate;
|
|
1398
1506
|
}
|
|
1399
|
-
else if (start && start.
|
|
1507
|
+
else if (start && start.startOf('month') >= DateTime.now().startOf('month')) {
|
|
1400
1508
|
// If we don't have an end date, and the start date is on or after the current month,
|
|
1401
1509
|
// show the month after the start date.
|
|
1402
|
-
viewDate =
|
|
1510
|
+
viewDate = start.plus({ months: 1 }).toJSDate();
|
|
1403
1511
|
}
|
|
1404
1512
|
else {
|
|
1405
1513
|
// Otherwise, show the current month.
|
|
@@ -1434,12 +1542,12 @@ class YearSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1434
1542
|
// Only one date is needed for formatting since the ranges span a single year.
|
|
1435
1543
|
// There shouldn't be any case where there's only a single date but it's covered anyway.
|
|
1436
1544
|
const date = DateInput.isSelectionRange(selection) ? selection.start : selection;
|
|
1437
|
-
return { textbox:
|
|
1545
|
+
return { textbox: date ? DateTime.fromJSDate(date).toFormat('yyyy') : null, textbox2: null };
|
|
1438
1546
|
}
|
|
1439
1547
|
parseString(value, parseFormats, opts) {
|
|
1440
|
-
// Including '
|
|
1548
|
+
// Including 'yy' and 'yyyy' as valid formats for year input. These aren't included in the default parse
|
|
1441
1549
|
// formats because they cause issues with the default date parsing.
|
|
1442
|
-
return super.parseString(value, ['
|
|
1550
|
+
return super.parseString(value, ['yy', 'yyyy', ...parseFormats], opts);
|
|
1443
1551
|
}
|
|
1444
1552
|
parseTextboxValues(value, parseFormats, opts) {
|
|
1445
1553
|
// Only a single textbox is used in year mode
|
|
@@ -1450,9 +1558,10 @@ class YearSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1450
1558
|
return this.getSelectionFromDate(date);
|
|
1451
1559
|
}
|
|
1452
1560
|
getSelectionFromDate(date) {
|
|
1561
|
+
const dt = DateTime.fromJSDate(date);
|
|
1453
1562
|
return {
|
|
1454
|
-
start:
|
|
1455
|
-
end:
|
|
1563
|
+
start: dt.startOf('year').toJSDate(),
|
|
1564
|
+
end: dt.endOf('year').toJSDate()
|
|
1456
1565
|
};
|
|
1457
1566
|
}
|
|
1458
1567
|
getNewSelectionFromExisting(previousSelection) {
|
|
@@ -1475,8 +1584,8 @@ class YearSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1475
1584
|
getNextSelection(selection) {
|
|
1476
1585
|
// Move the selection to the next year
|
|
1477
1586
|
if (DateInput.isSelectionRange(selection) && selection.start) {
|
|
1478
|
-
const date =
|
|
1479
|
-
return this.getSelectionFromDate(date.
|
|
1587
|
+
const date = DateTime.fromJSDate(selection.start).plus({ years: 1 });
|
|
1588
|
+
return this.getSelectionFromDate(date.toJSDate());
|
|
1480
1589
|
}
|
|
1481
1590
|
// This shouldn't happen since the next stepper is disabled if the selection only has one date.
|
|
1482
1591
|
// If it does, just return the selection as-is.
|
|
@@ -1485,8 +1594,8 @@ class YearSelectionStrategy extends DateInputSelectionStrategyBase {
|
|
|
1485
1594
|
getPreviousSelection(selection) {
|
|
1486
1595
|
// Move the selection to the previous year
|
|
1487
1596
|
if (DateInput.isSelectionRange(selection) && selection.start) {
|
|
1488
|
-
const date =
|
|
1489
|
-
return this.getSelectionFromDate(date.
|
|
1597
|
+
const date = DateTime.fromJSDate(selection.start).minus({ years: 1 });
|
|
1598
|
+
return this.getSelectionFromDate(date.toJSDate());
|
|
1490
1599
|
}
|
|
1491
1600
|
// This shouldn't happen since the previous stepper is disabled if the selection only has one date.
|
|
1492
1601
|
// If it does, just return the selection as-is.
|
|
@@ -1525,10 +1634,10 @@ class DateDisplayPipe {
|
|
|
1525
1634
|
transform(date, showEndOfTime, showTime, showSeconds) {
|
|
1526
1635
|
let display = '';
|
|
1527
1636
|
let formatString = '';
|
|
1528
|
-
if (date &&
|
|
1637
|
+
if (date != null && DateTimeHelper.toDateTime(date).isValid && (showEndOfTime || !DateTimeHelper.isEndOfTime(date))) {
|
|
1529
1638
|
// use user-preferred formats
|
|
1530
1639
|
this.userPreferenceService.getPreferences().subscribe(result => {
|
|
1531
|
-
//if preferences exist then format date to users preference
|
|
1640
|
+
//if preferences exist then format date to users preference
|
|
1532
1641
|
//otherwise use the last user preference
|
|
1533
1642
|
if (result.preference) {
|
|
1534
1643
|
formatString = result.preference.dateFormat;
|
|
@@ -1542,7 +1651,7 @@ class DateDisplayPipe {
|
|
|
1542
1651
|
this.lastFormatString = formatString;
|
|
1543
1652
|
}
|
|
1544
1653
|
});
|
|
1545
|
-
display =
|
|
1654
|
+
display = DateTimeHelper.formatDate(date, this.lastFormatString);
|
|
1546
1655
|
}
|
|
1547
1656
|
return display;
|
|
1548
1657
|
}
|
|
@@ -1567,6 +1676,32 @@ var DateInput;
|
|
|
1567
1676
|
return !!selection && !isSelectionSingleDate(selection);
|
|
1568
1677
|
}
|
|
1569
1678
|
DateInput.isSelectionRange = isSelectionRange;
|
|
1679
|
+
/**
|
|
1680
|
+
* Coerces a selection into one backed by real {@link Date} objects.
|
|
1681
|
+
*
|
|
1682
|
+
* The form model is typed as `Date | Range`, but hosts commonly bind ISO date strings
|
|
1683
|
+
* (e.g. values straight off an API response). The display path tolerates strings via
|
|
1684
|
+
* Luxon parsing, but the calendar view builders pass the value to `DateTime.fromJSDate`,
|
|
1685
|
+
* which only accepts a `Date` — a string yields an Invalid Date and crashes the calendar
|
|
1686
|
+
* (`RangeError: Invalid time value`). Normalizing at the boundary lets all downstream
|
|
1687
|
+
* calendar/stepper logic rely on actual Dates. Invalid/unparseable values become null.
|
|
1688
|
+
*/
|
|
1689
|
+
function normalizeSelection(selection) {
|
|
1690
|
+
if (selection === null || selection === undefined) {
|
|
1691
|
+
return null;
|
|
1692
|
+
}
|
|
1693
|
+
if (isSelectionSingleDate(selection)) {
|
|
1694
|
+
const dt = DateTimeHelper.toDateTime(selection);
|
|
1695
|
+
return dt.isValid ? dt.toJSDate() : null;
|
|
1696
|
+
}
|
|
1697
|
+
const start = selection.start ? DateTimeHelper.toDateTime(selection.start) : null;
|
|
1698
|
+
const end = selection.end ? DateTimeHelper.toDateTime(selection.end) : null;
|
|
1699
|
+
return {
|
|
1700
|
+
start: start?.isValid ? start.toJSDate() : null,
|
|
1701
|
+
end: end?.isValid ? end.toJSDate() : null
|
|
1702
|
+
};
|
|
1703
|
+
}
|
|
1704
|
+
DateInput.normalizeSelection = normalizeSelection;
|
|
1570
1705
|
class SelectionStrategies {
|
|
1571
1706
|
constructor(dateDisplayPipe) {
|
|
1572
1707
|
this.dateDisplayPipe = dateDisplayPipe;
|
|
@@ -1609,9 +1744,14 @@ class CalendarItemComponent {
|
|
|
1609
1744
|
this.today = false;
|
|
1610
1745
|
this.outsideActiveMonth = false;
|
|
1611
1746
|
}
|
|
1747
|
+
else if (this.item?.date) {
|
|
1748
|
+
const itemDt = DateTime.fromJSDate(this.item.date);
|
|
1749
|
+
this.today = itemDt.hasSame(DateTime.now(), 'day');
|
|
1750
|
+
this.outsideActiveMonth = !itemDt.hasSame(DateTime.fromJSDate(this.view.date), 'month');
|
|
1751
|
+
}
|
|
1612
1752
|
else {
|
|
1613
|
-
this.today =
|
|
1614
|
-
this.outsideActiveMonth =
|
|
1753
|
+
this.today = false;
|
|
1754
|
+
this.outsideActiveMonth = false;
|
|
1615
1755
|
}
|
|
1616
1756
|
if (this.item?.date) {
|
|
1617
1757
|
this.hidden = this.isHidden(this.item.date, this.minDate, this.maxDate, this.view.mode);
|
|
@@ -1625,24 +1765,30 @@ class CalendarItemComponent {
|
|
|
1625
1765
|
if (!date || !selection) {
|
|
1626
1766
|
return false;
|
|
1627
1767
|
}
|
|
1768
|
+
const unit = view ?? 'day';
|
|
1769
|
+
const dt = DateTime.fromJSDate(date);
|
|
1628
1770
|
if (DateInput.isSelectionSingleDate(selection)) {
|
|
1629
|
-
return
|
|
1771
|
+
return dt.hasSame(DateTime.fromJSDate(selection), unit);
|
|
1630
1772
|
}
|
|
1631
1773
|
else {
|
|
1632
1774
|
if (selection.start && !selection.end) {
|
|
1633
|
-
return
|
|
1775
|
+
return dt.hasSame(DateTime.fromJSDate(selection.start), unit);
|
|
1634
1776
|
}
|
|
1635
1777
|
else if (!selection.start && selection.end) {
|
|
1636
|
-
return
|
|
1778
|
+
return dt.hasSame(DateTime.fromJSDate(selection.end), unit);
|
|
1637
1779
|
}
|
|
1638
1780
|
else if (selection.start && selection.end) {
|
|
1639
|
-
|
|
1781
|
+
const d = dt.startOf(unit);
|
|
1782
|
+
const s = DateTime.fromJSDate(selection.start).startOf(unit);
|
|
1783
|
+
const e = DateTime.fromJSDate(selection.end).startOf(unit);
|
|
1784
|
+
return d >= s && d <= e;
|
|
1640
1785
|
}
|
|
1641
1786
|
}
|
|
1642
1787
|
return false;
|
|
1643
1788
|
}
|
|
1644
1789
|
isHidden(date, minDate, maxDate, view) {
|
|
1645
|
-
|
|
1790
|
+
const d = DateTime.fromJSDate(date).startOf(view);
|
|
1791
|
+
return d < DateTime.fromJSDate(minDate).startOf(view) || d > DateTime.fromJSDate(maxDate).startOf(view);
|
|
1646
1792
|
}
|
|
1647
1793
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CalendarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1648
1794
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CalendarItemComponent, isStandalone: false, selector: "button[ec-calendar-item]", inputs: { item: "item", selection: "selection", view: "view", minDate: "minDate", maxDate: "maxDate" }, host: { properties: { "class.is-today": "this.today", "class.is-selected": "this.selected", "class.is-outside-active-month": "this.outsideActiveMonth", "class.is-hidden": "this.hidden", "attr.disabled": "this.disabled" } }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}:host .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}:host .ec-icon{flex:none}:host .ec-icon+.label{flex:none;margin-left:.25rem}:host.has-badge{padding-right:.0625rem}:host:focus{outline:none;position:relative;z-index:1}:host:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}:host:disabled .ec-icon{color:var(--ec-color-disabled-dark)}:host{background-color:transparent}:host:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}:host:hover:not(:disabled){background-color:var(--ec-background-color-hover)}:host:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}:host:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}:host.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}:host{line-height:1.125rem}:host.is-selected,:host.is-selected:disabled{background-color:var(--ec-background-color-selected);font-weight:700}:host.is-today{position:relative}:host.is-today:after{content:\"\";position:absolute;top:50%;left:50%;width:1.75rem;height:1.75rem;transform:translate(-50%,-50%);border:1px solid;border-radius:50%;pointer-events:none}:host.is-outside-active-month{color:var(--ec-color-hint-dark)}:host.is-hidden{opacity:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
@@ -1691,8 +1837,12 @@ class CalendarComponent {
|
|
|
1691
1837
|
this.viewChange = new EventEmitter();
|
|
1692
1838
|
/** Array of calendar item rows to display in the calendar. */
|
|
1693
1839
|
this.calendarItems = [];
|
|
1694
|
-
/** Weekday labels to show at the top of the calendar in day view. */
|
|
1695
|
-
this.weekDays =
|
|
1840
|
+
/** Weekday labels to show at the top of the calendar in day view. Starts on Sunday to match the calendar grid layout. */
|
|
1841
|
+
this.weekDays = (() => {
|
|
1842
|
+
// Info.weekdays returns Monday-first; reorder so Sunday is first to match the calendar grid.
|
|
1843
|
+
const mondayFirst = Info.weekdays('short');
|
|
1844
|
+
return [mondayFirst[6], ...mondayFirst.slice(0, 6)].map(d => d.slice(0, 1));
|
|
1845
|
+
})();
|
|
1696
1846
|
this.disablePreviousButton = false;
|
|
1697
1847
|
this.disableNextButton = false;
|
|
1698
1848
|
// Trackby functions for ngFor loops. These reduce the number of DOM elements that need to be updated when the calendar is re-drawn.
|
|
@@ -1716,19 +1866,19 @@ class CalendarComponent {
|
|
|
1716
1866
|
onNextClick() {
|
|
1717
1867
|
// If we're in day view, we're incrementing by month
|
|
1718
1868
|
// In month, quarter, and year views we're incrementing by year\
|
|
1719
|
-
const unit = this.view.mode === 'day' ? '
|
|
1869
|
+
const unit = this.view.mode === 'day' ? 'months' : 'years';
|
|
1720
1870
|
// In year view, we're moving by 16 years at a time. Otherwise we're just moving by 1 month/year.
|
|
1721
1871
|
const count = this.view.mode === 'year' ? 16 : 1;
|
|
1722
|
-
const goToDate =
|
|
1872
|
+
const goToDate = DateTime.fromJSDate(this.view.date).plus({ [unit]: count }).toJSDate();
|
|
1723
1873
|
this.drawCalendar({ mode: this.view.mode, date: goToDate });
|
|
1724
1874
|
}
|
|
1725
1875
|
onPreviousClick() {
|
|
1726
1876
|
// If we're in day view, we're incrementing by month
|
|
1727
1877
|
// In month, quarter, and year views we're incrementing by year
|
|
1728
|
-
const unit = this.view.mode === 'day' ? '
|
|
1878
|
+
const unit = this.view.mode === 'day' ? 'months' : 'years';
|
|
1729
1879
|
// In year view, we're moving by 16 years at a time. Otherwise we're just moving by 1 month/year.
|
|
1730
1880
|
const count = this.view.mode === 'year' ? 16 : 1;
|
|
1731
|
-
const goToDate =
|
|
1881
|
+
const goToDate = DateTime.fromJSDate(this.view.date).minus({ [unit]: count }).toJSDate();
|
|
1732
1882
|
this.drawCalendar({ mode: this.view.mode, date: goToDate });
|
|
1733
1883
|
}
|
|
1734
1884
|
/** Switches the calendar to month view. */
|
|
@@ -1795,13 +1945,14 @@ class CalendarComponent {
|
|
|
1795
1945
|
this.view = view;
|
|
1796
1946
|
this.viewChange.emit(view);
|
|
1797
1947
|
}
|
|
1798
|
-
|
|
1799
|
-
this.
|
|
1948
|
+
const viewDt = DateTime.fromJSDate(this.view.date);
|
|
1949
|
+
this.month = viewDt.toFormat('MMM');
|
|
1950
|
+
this.year = viewDt.toFormat('yyyy');
|
|
1800
1951
|
this.calendarItems = this.getCalendarItems(this.view);
|
|
1801
1952
|
const startYear = this.calendarItems[0][0].date < this.minDate ? this.minDate : this.calendarItems[0][0].date;
|
|
1802
1953
|
const lastItem = this.getLastItem();
|
|
1803
1954
|
const endYear = lastItem.date > this.maxDate ? this.maxDate : lastItem.date;
|
|
1804
|
-
this.yearRange = `${
|
|
1955
|
+
this.yearRange = `${DateTime.fromJSDate(startYear).toFormat('yyyy')}–${DateTime.fromJSDate(endYear).toFormat('yyyy')}`;
|
|
1805
1956
|
this.updateNextPreviousStates();
|
|
1806
1957
|
}
|
|
1807
1958
|
getCalendarItems(view) {
|
|
@@ -1813,53 +1964,58 @@ class CalendarComponent {
|
|
|
1813
1964
|
}
|
|
1814
1965
|
}
|
|
1815
1966
|
getDayViewItems(activeDate) {
|
|
1816
|
-
// 6 rows of 7 days = 42 days
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1967
|
+
// 6 rows of 7 days = 42 days.
|
|
1968
|
+
// Use the start of the week of the first day of the month, anchored to Sunday to match the calendar grid.
|
|
1969
|
+
// Luxon's startOf('week') is Monday-based per ISO, so shift back to Sunday explicitly.
|
|
1970
|
+
const monthStart = DateTime.fromJSDate(activeDate).startOf('month');
|
|
1971
|
+
const sundayStart = monthStart.weekday === 7 ? monthStart : monthStart.startOf('week').minus({ days: 1 });
|
|
1972
|
+
return range(0, 6).map((r) => {
|
|
1973
|
+
return range(0, 7).map((d) => {
|
|
1974
|
+
const date = sundayStart.plus({ days: r * 7 + d });
|
|
1822
1975
|
return {
|
|
1823
|
-
date: date.
|
|
1824
|
-
label: date.
|
|
1976
|
+
date: date.toJSDate(),
|
|
1977
|
+
label: date.toFormat('d')
|
|
1825
1978
|
};
|
|
1826
1979
|
});
|
|
1827
1980
|
});
|
|
1828
1981
|
}
|
|
1829
1982
|
getMonthViewItems(activeDate) {
|
|
1830
1983
|
// 4 rows of 3 months = 12 months
|
|
1831
|
-
|
|
1832
|
-
|
|
1833
|
-
|
|
1984
|
+
const yearStart = DateTime.fromJSDate(activeDate).startOf('year');
|
|
1985
|
+
return range(0, 4).map((r) => {
|
|
1986
|
+
return range(0, 3).map((m) => {
|
|
1987
|
+
const date = yearStart.plus({ months: r * 3 + m });
|
|
1834
1988
|
return {
|
|
1835
|
-
date: date.
|
|
1836
|
-
label: date.
|
|
1989
|
+
date: date.toJSDate(),
|
|
1990
|
+
label: date.toFormat('MMM')
|
|
1837
1991
|
};
|
|
1838
1992
|
});
|
|
1839
1993
|
});
|
|
1840
1994
|
}
|
|
1841
1995
|
getQuarterViewItems(activeDate) {
|
|
1842
1996
|
// 2 rows of 2 quarters = 4 quarters
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
const
|
|
1997
|
+
const yearStart = DateTime.fromJSDate(activeDate).startOf('year');
|
|
1998
|
+
return range(0, 2).map((r) => {
|
|
1999
|
+
return range(0, 2).map((q) => {
|
|
2000
|
+
const date = yearStart.plus({ quarters: r * 2 + q });
|
|
2001
|
+
const endDate = date.endOf('quarter');
|
|
1847
2002
|
return {
|
|
1848
|
-
date: date.
|
|
1849
|
-
label: `${date.
|
|
2003
|
+
date: date.toJSDate(),
|
|
2004
|
+
label: `${date.toFormat('MMM')}–${endDate.toFormat('MMM')}`
|
|
1850
2005
|
};
|
|
1851
2006
|
});
|
|
1852
2007
|
});
|
|
1853
2008
|
}
|
|
1854
2009
|
getYearViewItems(activeDate) {
|
|
1855
2010
|
// 4 rows of 4 years = 16 years
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
2011
|
+
// Subtracting 8 years to put the current active year at the beginning of the 3rd row.
|
|
2012
|
+
const yearStart = DateTime.fromJSDate(activeDate).startOf('year').minus({ years: 8 });
|
|
2013
|
+
return range(0, 4).map((r) => {
|
|
2014
|
+
return range(0, 4).map((y) => {
|
|
2015
|
+
const date = yearStart.plus({ years: r * 4 + y });
|
|
1860
2016
|
return {
|
|
1861
|
-
date: date.
|
|
1862
|
-
label: date.
|
|
2017
|
+
date: date.toJSDate(),
|
|
2018
|
+
label: date.toFormat('yyyy')
|
|
1863
2019
|
};
|
|
1864
2020
|
});
|
|
1865
2021
|
});
|
|
@@ -1869,24 +2025,20 @@ class CalendarComponent {
|
|
|
1869
2025
|
// We don't want to disable the next/previous buttons if the min or max date is within the
|
|
1870
2026
|
// next or previous view
|
|
1871
2027
|
const unit = this.view.mode === 'day' ? 'month' : 'year';
|
|
2028
|
+
const pluralUnit = this.view.mode === 'day' ? 'months' : 'years';
|
|
2029
|
+
const viewDt = DateTime.fromJSDate(this.view.date);
|
|
1872
2030
|
// When in year view, we need to subtract 9 years to determine if we're past the min date.
|
|
1873
2031
|
// The year view is 16 years long, and the current date is the 9th year in the view.
|
|
1874
2032
|
const subCount = this.view.mode === 'year' ? 9 : 1;
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
else {
|
|
1879
|
-
this.disablePreviousButton = false;
|
|
1880
|
-
}
|
|
2033
|
+
const prev = viewDt.minus({ [pluralUnit]: subCount }).startOf(unit);
|
|
2034
|
+
const minDt = DateTime.fromJSDate(this.minDate).startOf(unit);
|
|
2035
|
+
this.disablePreviousButton = prev < minDt;
|
|
1881
2036
|
// When in year view, we need to add 8 years to determine if we're past the max date.
|
|
1882
2037
|
// The year view is 16 years long, and the current date is the 9th year in the view.
|
|
1883
2038
|
const addCount = this.view.mode === 'year' ? 8 : 1;
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
else {
|
|
1888
|
-
this.disableNextButton = false;
|
|
1889
|
-
}
|
|
2039
|
+
const next = viewDt.plus({ [pluralUnit]: addCount }).startOf(unit);
|
|
2040
|
+
const maxDt = DateTime.fromJSDate(this.maxDate).startOf(unit);
|
|
2041
|
+
this.disableNextButton = next > maxDt;
|
|
1890
2042
|
}
|
|
1891
2043
|
getLastItem() {
|
|
1892
2044
|
const lastRow = this.calendarItems[this.calendarItems.length - 1];
|
|
@@ -2321,7 +2473,7 @@ class TooltipComponent {
|
|
|
2321
2473
|
this.overlayRef?.dispose();
|
|
2322
2474
|
}
|
|
2323
2475
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2324
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TooltipComponent, isStandalone: false, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor", "style.--ec-tooltip-color-title": "this.titleColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\n @if (title || subtitle) {\n <header class=\"mb-3\">\n <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\n <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\n </header>\n }\n\n @if (customContent) {\n <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\n } @else {\n <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\n }\n\n\n @if (dismissible) {\n <ec-button id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" ariaLabel=\"Tooltip_DismissButton_SC\" (clicked)=\"hide()\"></ec-button>\n }\n</article>\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
|
|
2476
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TooltipComponent, isStandalone: false, selector: "ec-tooltip", host: { properties: { "style.--ec-tooltip-background-color": "this.backgroundColor", "style.--ec-tooltip-color-title": "this.titleColor" } }, ngImport: i0, template: "<article id=\"{{id}}\" class=\"py-3 position-{{position}}\" [class.show-arrow]=\"!hideArrow\">\n @if (title || subtitle) {\n <header class=\"mb-3\">\n <h1 class=\"text-heading-2 px-3 mb-0\">{{title}}</h1>\n <p class=\"text-caption-1 px-3 mb-0\">{{subtitle}}</p>\n </header>\n }\n\n @if (customContent) {\n <ng-container *ngTemplateOutlet=\"customContent\"></ng-container>\n } @else {\n <div class=\"text-body-1 px-3\" [innerHTML]=\"text\"></div>\n }\n\n\n @if (dismissible) {\n <ec-button id=\"tooltipDismiss\" type=\"icon\" icon=\"icon-cancel\" ariaLabel=\"Tooltip_DismissButton_SC\" (clicked)=\"hide()\"></ec-button>\n }\n</article>\n", styles: [":host{display:block;padding:.75rem}article{background-color:var(--ec-tooltip-background-color, #162F3B);color:var(--ec-tooltip-color, var(--ec-color-primary-light));border-radius:var(--ec-border-radius-card);position:relative;box-shadow:var(--ec-box-shadow-overlay);--ec-color-link: var(--ec-color-link-light)}article.show-arrow:after{content:\"\";height:0;width:0;border:.625rem solid transparent;display:block;position:absolute;pointer-events:none}article.show-arrow.position-top-left:after,article.show-arrow.position-top-center:after,article.show-arrow.position-top-right:after{bottom:-1.25rem;border-top-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-bottom-left:after,article.show-arrow.position-bottom-center:after,article.show-arrow.position-bottom-right:after{top:-1.25rem;border-bottom-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-top-left:after,article.show-arrow.position-bottom-left:after{right:1rem}article.show-arrow.position-top-right:after,article.show-arrow.position-bottom-right:after{left:1rem}article.show-arrow.position-top-center:after,article.show-arrow.position-bottom-center:after{right:50%;transform:translate(50%)}article.show-arrow.position-right-top:after,article.show-arrow.position-right-center:after,article.show-arrow.position-right-bottom:after{left:-1.25rem;border-right-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-left-center:after,article.show-arrow.position-left-bottom:after{right:-1.25rem;border-left-color:var(--ec-tooltip-background-color, #162F3B)}article.show-arrow.position-left-top:after,article.show-arrow.position-right-top:after{top:1rem}article.show-arrow.position-left-bottom:after,article.show-arrow.position-right-bottom:after{bottom:1rem}article.show-arrow.position-left-center:after,article.show-arrow.position-right-center:after{bottom:50%;transform:translateY(50%)}.text-heading-2{color:var(--ec-tooltip-color-title, var(--ec-color-primary-light))}.text-body-1{color:var(--ec-color-primary-light)}.text-body-1 ::ng-deep p:last-child{margin-bottom:0}.text-body-1 ::ng-deep a{font-weight:var(--ec-font-weight-bold)}.text-caption-1{color:var(--ec-color-secondary-light)}ec-button{--ec-button-color-icon: var(--ec-color-secondary-light);--ec-button-color-icon-hover: var(--ec-color-primary-light);--ec-background-color-hover: rgba(255,255,255,.15);position:absolute;top:.25rem;right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
|
|
2325
2477
|
}
|
|
2326
2478
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
2327
2479
|
type: Component,
|
|
@@ -2518,17 +2670,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
2518
2670
|
type: Output
|
|
2519
2671
|
}] } });
|
|
2520
2672
|
|
|
2673
|
+
/** Module-level counter used to generate unique ids for popover content, so each trigger can reference its own tooltip via aria-describedby. */
|
|
2674
|
+
let nextPopoverContentId = 0;
|
|
2521
2675
|
class PopoverComponent {
|
|
2522
|
-
constructor(overlay, viewContainerRef, elementRef, tooltipService) {
|
|
2676
|
+
constructor(overlay, viewContainerRef, elementRef, tooltipService, translateService) {
|
|
2523
2677
|
this.overlay = overlay;
|
|
2524
2678
|
this.viewContainerRef = viewContainerRef;
|
|
2525
2679
|
this.elementRef = elementRef;
|
|
2526
2680
|
this.tooltipService = tooltipService;
|
|
2681
|
+
this.translateService = translateService;
|
|
2527
2682
|
/** An optional icon that, if provided, enables the popover to use it as the anchor element */
|
|
2528
2683
|
this.icon = '';
|
|
2529
2684
|
this.contentPosition = 'top-left';
|
|
2530
2685
|
this.iconHoverClass = '';
|
|
2686
|
+
/** The resolved aria-label for the trigger element. Only set for icon-only triggers or when ariaLabel is explicitly provided. */
|
|
2687
|
+
this.resolvedAriaLabel = null;
|
|
2688
|
+
/** Whether the popover content is currently visible */
|
|
2531
2689
|
this.isVisible = false;
|
|
2690
|
+
/** Unique id for the tooltip content, referenced by the trigger's aria-describedby while the popover is visible. */
|
|
2691
|
+
this.contentId = `ec-popover-content-${nextPopoverContentId++}`;
|
|
2532
2692
|
this.mouseOver = new Subject();
|
|
2533
2693
|
this.interrupt = new Subject();
|
|
2534
2694
|
}
|
|
@@ -2539,6 +2699,12 @@ class PopoverComponent {
|
|
|
2539
2699
|
if (this.tag && this.tagHoverType) {
|
|
2540
2700
|
this.hoverTag = { ...this.tag, type: this.tagHoverType };
|
|
2541
2701
|
}
|
|
2702
|
+
if (this.ariaLabel) {
|
|
2703
|
+
this.resolvedAriaLabel = this.ariaLabel;
|
|
2704
|
+
}
|
|
2705
|
+
else if (!this.tag) {
|
|
2706
|
+
this.resolvedAriaLabel = this.translateService.instant('Popover_ShowDetails_AC');
|
|
2707
|
+
}
|
|
2542
2708
|
this.mouseOver
|
|
2543
2709
|
.pipe(switchMap(v => of(v).pipe(delay(300), takeUntil(this.interrupt))))
|
|
2544
2710
|
.subscribe(() => this.show());
|
|
@@ -2561,6 +2727,23 @@ class PopoverComponent {
|
|
|
2561
2727
|
onLeave() {
|
|
2562
2728
|
this.interrupt.next();
|
|
2563
2729
|
}
|
|
2730
|
+
onFocusIn() {
|
|
2731
|
+
this.show();
|
|
2732
|
+
}
|
|
2733
|
+
onFocusOut(event) {
|
|
2734
|
+
const relatedTarget = event.relatedTarget;
|
|
2735
|
+
const isInsideHost = this.elementRef.nativeElement.contains(relatedTarget);
|
|
2736
|
+
const isInsideOverlay = this.overlayRef?.overlayElement?.contains(relatedTarget) ?? false;
|
|
2737
|
+
if (!isInsideHost && !isInsideOverlay) {
|
|
2738
|
+
this.hide();
|
|
2739
|
+
}
|
|
2740
|
+
}
|
|
2741
|
+
onTriggerKeydown(event) {
|
|
2742
|
+
if (event.key === 'Escape' && this.isVisible) {
|
|
2743
|
+
event.preventDefault();
|
|
2744
|
+
this.hide();
|
|
2745
|
+
}
|
|
2746
|
+
}
|
|
2564
2747
|
/**
|
|
2565
2748
|
* Hides the popover if the mouse moves outside of the popover content
|
|
2566
2749
|
*/
|
|
@@ -2598,13 +2781,13 @@ class PopoverComponent {
|
|
|
2598
2781
|
const overlayY = position[0];
|
|
2599
2782
|
return { originX: overlayX, originY: overlayY, overlayX: overlayX, overlayY: overlayY };
|
|
2600
2783
|
}
|
|
2601
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PopoverComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: TooltipService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2602
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PopoverComponent, isStandalone: false, selector: "ec-popover", inputs: { icon: "icon", tag: "tag", tagHoverType: "tagHoverType", contentPosition: "contentPosition", iconHoverClass: "iconHoverClass" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<!-- Before hover state -->\n<div class=\"p-2\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed] = \"true\"\n [tags]=\"tag\">\n </ec-tags>\n }\n</div>\n<!-- ./Before hover state -->\n\n<!-- Hover state -->\n<ng-template #content>\n <article class=\"popover-content\"\n (document:mousemove)=\"onMouseMove($event)\">\n <ng-content></ng-content>\n </article>\n <div class=\"p-2 {{contentPosition}}\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed]=\"true\"\n [tags]=\"hoverTag\">\n </ec-tags>\n }\n </div>\n</ng-template>\n<!-- ./Hover state -->\n", styles: [":host{line-height:.75rem;display:inline-block}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"], dependencies: [{ kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText"], outputs: ["tagClosed"] }] }); }
|
|
2784
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PopoverComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: TooltipService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2785
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PopoverComponent, isStandalone: false, selector: "ec-popover", inputs: { icon: "icon", tag: "tag", tagHoverType: "tagHoverType", contentPosition: "contentPosition", iconHoverClass: "iconHoverClass", ariaLabel: "ariaLabel" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut($event)" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<!-- Before hover state -->\n<div class=\"p-2\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"resolvedAriaLabel\"\n [attr.aria-describedby]=\"isVisible ? contentId : null\"\n (keydown)=\"onTriggerKeydown($event)\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed] = \"true\"\n [tags]=\"tag\">\n </ec-tags>\n }\n</div>\n<!-- ./Before hover state -->\n\n<!-- Hover state -->\n<ng-template #content>\n <article class=\"popover-content\"\n role=\"tooltip\"\n [id]=\"contentId\"\n (document:mousemove)=\"onMouseMove($event)\">\n <ng-content></ng-content>\n </article>\n <div class=\"p-2 {{contentPosition}}\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed]=\"true\"\n [tags]=\"hoverTag\">\n </ec-tags>\n }\n </div>\n</ng-template>\n<!-- ./Hover state -->\n", styles: [":host{line-height:.75rem;display:inline-block}:host>div{border-radius:var(--ec-border-radius)}:host>div:focus-visible{outline:.125rem solid var(--ec-color-interactive);outline-offset:-.125rem}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"], dependencies: [{ kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText"], outputs: ["tagClosed"] }] }); }
|
|
2603
2786
|
}
|
|
2604
2787
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
2605
2788
|
type: Component,
|
|
2606
|
-
args: [{ selector: 'ec-popover', standalone: false, template: "<!-- Before hover state -->\n<div class=\"p-2\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed] = \"true\"\n [tags]=\"tag\">\n </ec-tags>\n }\n</div>\n<!-- ./Before hover state -->\n\n<!-- Hover state -->\n<ng-template #content>\n <article class=\"popover-content\"\n (document:mousemove)=\"onMouseMove($event)\">\n <ng-content></ng-content>\n </article>\n <div class=\"p-2 {{contentPosition}}\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed]=\"true\"\n [tags]=\"hoverTag\">\n </ec-tags>\n }\n </div>\n</ng-template>\n<!-- ./Hover state -->\n", styles: [":host{line-height:.75rem;display:inline-block}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"] }]
|
|
2607
|
-
}], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: TooltipService }], propDecorators: { icon: [{
|
|
2789
|
+
args: [{ selector: 'ec-popover', standalone: false, template: "<!-- Before hover state -->\n<div class=\"p-2\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"resolvedAriaLabel\"\n [attr.aria-describedby]=\"isVisible ? contentId : null\"\n (keydown)=\"onTriggerKeydown($event)\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed] = \"true\"\n [tags]=\"tag\">\n </ec-tags>\n }\n</div>\n<!-- ./Before hover state -->\n\n<!-- Hover state -->\n<ng-template #content>\n <article class=\"popover-content\"\n role=\"tooltip\"\n [id]=\"contentId\"\n (document:mousemove)=\"onMouseMove($event)\">\n <ng-content></ng-content>\n </article>\n <div class=\"p-2 {{contentPosition}}\">\n @if (!tag) {\n <i class=\"ec-icon {{icon}} ec-icon-sm {{iconHoverClass}}\" aria-hidden=\"true\"></i>\n }\n @if (tag) {\n <ec-tags\n [isCondensed]=\"true\"\n [tags]=\"hoverTag\">\n </ec-tags>\n }\n </div>\n</ng-template>\n<!-- ./Hover state -->\n", styles: [":host{line-height:.75rem;display:inline-block}:host>div{border-radius:var(--ec-border-radius)}:host>div:focus-visible{outline:.125rem solid var(--ec-color-interactive);outline-offset:-.125rem}.popover-content{border-radius:var(--ec-border-radius);box-shadow:0 3px 6px #1a1a231f;overflow:hidden;position:relative}.popover-content+div{position:absolute;line-height:.75rem}.popover-content+div.top-left{top:0;left:0}.popover-content+div.top-right{top:0;right:0}.popover-content+div.bottom-right{bottom:0;right:0}.popover-content+div.bottom-left{bottom:0;left:0}\n"] }]
|
|
2790
|
+
}], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: TooltipService }, { type: i3.TranslateService }], propDecorators: { icon: [{
|
|
2608
2791
|
type: Input
|
|
2609
2792
|
}], tag: [{
|
|
2610
2793
|
type: Input
|
|
@@ -2614,6 +2797,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
2614
2797
|
type: Input
|
|
2615
2798
|
}], iconHoverClass: [{
|
|
2616
2799
|
type: Input
|
|
2800
|
+
}], ariaLabel: [{
|
|
2801
|
+
type: Input
|
|
2617
2802
|
}], content: [{
|
|
2618
2803
|
type: ViewChild,
|
|
2619
2804
|
args: ['content']
|
|
@@ -2623,6 +2808,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
2623
2808
|
}], onLeave: [{
|
|
2624
2809
|
type: HostListener,
|
|
2625
2810
|
args: ['mouseleave']
|
|
2811
|
+
}], onFocusIn: [{
|
|
2812
|
+
type: HostListener,
|
|
2813
|
+
args: ['focusin']
|
|
2814
|
+
}], onFocusOut: [{
|
|
2815
|
+
type: HostListener,
|
|
2816
|
+
args: ['focusout', ['$event']]
|
|
2626
2817
|
}] } });
|
|
2627
2818
|
|
|
2628
2819
|
class HelpPopoverComponent {
|
|
@@ -2633,7 +2824,7 @@ class HelpPopoverComponent {
|
|
|
2633
2824
|
this.maxWidth = '15rem';
|
|
2634
2825
|
}
|
|
2635
2826
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HelpPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2636
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: HelpPopoverComponent, isStandalone: false, selector: "ec-help-popover", inputs: { id: "id", text: "text", contentPosition: "contentPosition", maxWidth: "maxWidth" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: "<ec-popover id=\"{{id}}_popover\"\n icon=\"icon-help-circle\"\n [contentPosition]=\"contentPosition\"\n iconHoverClass=\"font-color-primary-light\">\n <div id=\"{{id}}_popoverContent\"\n class=\"popover-content-dark\"\n [class.is-right-positioned]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\"\n [style.max-width]=\"maxWidth\">\n @if (text) {\n <div\n [innerHTML]=\"text | translate\"></div>\n }\n <ng-content></ng-content>\n </div>\n</ec-popover>", dependencies: [{ kind: "component", type: PopoverComponent, selector: "ec-popover", inputs: ["icon", "tag", "tagHoverType", "contentPosition", "iconHoverClass"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
2827
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: HelpPopoverComponent, isStandalone: false, selector: "ec-help-popover", inputs: { id: "id", text: "text", contentPosition: "contentPosition", maxWidth: "maxWidth" }, host: { properties: { "attr.id": "this.id" } }, ngImport: i0, template: "<ec-popover id=\"{{id}}_popover\"\n icon=\"icon-help-circle\"\n [contentPosition]=\"contentPosition\"\n iconHoverClass=\"font-color-primary-light\">\n <div id=\"{{id}}_popoverContent\"\n class=\"popover-content-dark\"\n [class.is-right-positioned]=\"contentPosition == 'top-right' || contentPosition == 'bottom-right'\"\n [style.max-width]=\"maxWidth\">\n @if (text) {\n <div\n [innerHTML]=\"text | translate\"></div>\n }\n <ng-content></ng-content>\n </div>\n</ec-popover>", dependencies: [{ kind: "component", type: PopoverComponent, selector: "ec-popover", inputs: ["icon", "tag", "tagHoverType", "contentPosition", "iconHoverClass", "ariaLabel"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
2637
2828
|
}
|
|
2638
2829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: HelpPopoverComponent, decorators: [{
|
|
2639
2830
|
type: Component,
|
|
@@ -2806,7 +2997,7 @@ class CollapsibleToggleComponent {
|
|
|
2806
2997
|
this.expandedChange.emit(this.expanded);
|
|
2807
2998
|
}
|
|
2808
2999
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CollapsibleToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2809
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CollapsibleToggleComponent, isStandalone: false, selector: "ec-collapsible-toggle", inputs: { id: "id", expanded: "expanded", tabindex: "tabindex" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: `<ec-button id="{{id}}_button" type="icon" icon="icon-angle-down {{expanded ? '' : 'rotate-270'}}" tabindex="{{tabindex}}" [ariaLabel]="expanded ? 'CollapsibleToggle_Collapse_SC' : 'CollapsibleToggle_Expand_SC'" (clicked)="onToggle()"></ec-button>`, isInline: true, styles: [":host{width:1.5rem;height:1.5rem;display:inline-flex;justify-content:center;align-items:center}ec-button::ng-deep .ec-button-icon{width:1.25rem;height:1.25rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
|
|
3000
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CollapsibleToggleComponent, isStandalone: false, selector: "ec-collapsible-toggle", inputs: { id: "id", expanded: "expanded", tabindex: "tabindex" }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: `<ec-button id="{{id}}_button" type="icon" icon="icon-angle-down {{expanded ? '' : 'rotate-270'}}" tabindex="{{tabindex}}" [ariaLabel]="expanded ? 'CollapsibleToggle_Collapse_SC' : 'CollapsibleToggle_Expand_SC'" (clicked)="onToggle()"></ec-button>`, isInline: true, styles: [":host{width:1.5rem;height:1.5rem;display:inline-flex;justify-content:center;align-items:center}ec-button::ng-deep .ec-button-icon{width:1.25rem;height:1.25rem}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
|
|
2810
3001
|
}
|
|
2811
3002
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CollapsibleToggleComponent, decorators: [{
|
|
2812
3003
|
type: Component,
|
|
@@ -3261,6 +3452,34 @@ const menuAnimationSpeed = 350;
|
|
|
3261
3452
|
* @export
|
|
3262
3453
|
*/
|
|
3263
3454
|
class MenuComponent {
|
|
3455
|
+
/**
|
|
3456
|
+
* Computed role for the `<ul>` items list based on `rolePattern`. Returns `null` when no
|
|
3457
|
+
* pattern is selected so no `role` attribute is rendered.
|
|
3458
|
+
*/
|
|
3459
|
+
get listRole() {
|
|
3460
|
+
switch (this.rolePattern) {
|
|
3461
|
+
case 'menu': return 'menu';
|
|
3462
|
+
case 'listbox': return 'listbox';
|
|
3463
|
+
case 'tree': return 'tree';
|
|
3464
|
+
default: return null;
|
|
3465
|
+
}
|
|
3466
|
+
}
|
|
3467
|
+
/**
|
|
3468
|
+
* Returns the appropriate ARIA role for a given item under the current `rolePattern`.
|
|
3469
|
+
* Heading items are always `presentation` so they are not announced as interactive
|
|
3470
|
+
* descendants of the parent role.
|
|
3471
|
+
*/
|
|
3472
|
+
getItemRole(item) {
|
|
3473
|
+
if (item.display === 'heading' || item.display === 'heading-divided-section') {
|
|
3474
|
+
return this.rolePattern === 'none' ? null : 'presentation';
|
|
3475
|
+
}
|
|
3476
|
+
switch (this.rolePattern) {
|
|
3477
|
+
case 'menu': return 'menuitem';
|
|
3478
|
+
case 'listbox': return 'option';
|
|
3479
|
+
case 'tree': return 'treeitem';
|
|
3480
|
+
default: return null;
|
|
3481
|
+
}
|
|
3482
|
+
}
|
|
3264
3483
|
/**
|
|
3265
3484
|
* Helper function to return a flat list of all selectable items in the provided menu items. Filters out headings and divided-sections.
|
|
3266
3485
|
* This makes it much easier to keep track of currently highlighted items for keyboard navigation.
|
|
@@ -3380,6 +3599,14 @@ class MenuComponent {
|
|
|
3380
3599
|
* Controls whether keyboard navigation is enabled
|
|
3381
3600
|
*/
|
|
3382
3601
|
this.enableKeyNav = false;
|
|
3602
|
+
/**
|
|
3603
|
+
* The ARIA role pattern applied to the menu container and items. Defaults to `none` so
|
|
3604
|
+
* existing consumers (combobox, multiselect, tree) keep their current behavior until they
|
|
3605
|
+
* opt into a specific pattern. DropdownComponent sets this to `menu`.
|
|
3606
|
+
*
|
|
3607
|
+
* @see {@link MenuRolePattern}
|
|
3608
|
+
*/
|
|
3609
|
+
this.rolePattern = 'none';
|
|
3383
3610
|
/**
|
|
3384
3611
|
* Item currently highlighted by keyboard navigation
|
|
3385
3612
|
*/
|
|
@@ -3405,6 +3632,13 @@ class MenuComponent {
|
|
|
3405
3632
|
* @memberof MenuComponent
|
|
3406
3633
|
*/
|
|
3407
3634
|
this.selectedChanged = new EventEmitter();
|
|
3635
|
+
/**
|
|
3636
|
+
* Emitted when the highlighted item changes via keyboard navigation. Enables consumers
|
|
3637
|
+
* (e.g. DropdownComponent) to mirror the highlight state — for example, to set
|
|
3638
|
+
* `aria-activedescendant` on a trigger button so assistive technology can announce the
|
|
3639
|
+
* currently focused menu item.
|
|
3640
|
+
*/
|
|
3641
|
+
this.highlightedItemChange = new EventEmitter();
|
|
3408
3642
|
/**
|
|
3409
3643
|
* Emitted when the menu has a parent and back is clicked
|
|
3410
3644
|
* @memberof MenuComponent
|
|
@@ -3666,6 +3900,7 @@ class MenuComponent {
|
|
|
3666
3900
|
else {
|
|
3667
3901
|
this.highlightedItem = null;
|
|
3668
3902
|
}
|
|
3903
|
+
this.highlightedItemChange.emit(this.highlightedItem);
|
|
3669
3904
|
this.scrollToHighlightedItem();
|
|
3670
3905
|
}
|
|
3671
3906
|
/**
|
|
@@ -3709,11 +3944,11 @@ class MenuComponent {
|
|
|
3709
3944
|
}
|
|
3710
3945
|
}
|
|
3711
3946
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: WindowService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3712
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MenuComponent, isStandalone: false, selector: "ec-menu", inputs: { id: "id", items: "items", selected: "selected", parent: "parent", templateType: "templateType", customMenuTemplate: "customMenuTemplate", title: "title", showNoItems: "showNoItems", noDataText: "noDataText", enableKeyNav: "enableKeyNav", highlightedItem: "highlightedItem", maintainSelectedItem: "maintainSelectedItem", truncateItems: "truncateItems", preserveIconSpace: "preserveIconSpace", dropdownToggleButton: "dropdownToggleButton" }, outputs: { selectedChanged: "selectedChanged", menuClosed: "menuClosed" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "iconAndLabelTemplate", first: true, predicate: ["iconAndLabel"], descendants: true, static: true }, { propertyName: "checkAndLabelTemplate", first: true, predicate: ["checkAndLabel"], descendants: true, static: true }, { propertyName: "iconLabelCaptionTemplate", first: true, predicate: ["iconLabelCaption"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<nav>\n <div class=\"parent\"\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\n @if (parent) {\n <header id=\"{{id}}_header\"\n class=\"text-heading-3 p-1\"\n [class.is-selected]=\"highlightedItemIndex === -1\"\n (click)=\"back($event)\">\n <div class=\"item-wrapper\">\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\n </div>\n </header>\n }\n\n <ul id=\"{{id}}_list\"\n class=\"py-1\">\n @for (item of items; track item; let i = $index) {\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n <!-- Show child items under parent item if the item is a heading or divided-section -->\n @if (item.items?.length && (item.display === 'heading' || item.display === 'divided-section' || item.display === 'heading-divided-section')) {\n @for (childItem of item.items; track childItem; let j = $index; let isFirst = $first; let isLast = $last) {\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: ( item.display === 'divided-section' || item.display === 'heading-divided-section'), isFirst: isFirst, isLast: isLast}\">\n </ng-container>\n }\n }\n }\n </ul>\n\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\n </div>\n\n <!-- Child menu (Rendered to the right) -->\n @if (selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section' && selected?.display !== 'heading-divided-section') {\n <ec-menu\n id=\"{{id}}_child\"\n class=\"child\"\n [parent]=\"selected\"\n [items]=\"selected?.items\"\n [showNoItems]=\"true\"\n [templateType]=\"templateType\"\n [enableKeyNav]=\"true\"\n [truncateItems]=\"truncateItems\"\n (selectedChanged)=\"onSelection($event)\"\n (menuClosed)=\"toggleChildMenu(false)\">\n </ec-menu>\n }\n</nav>\n\n<ng-template #itemTemplate\n let-item\n let-i=\"index\"\n let-isDividedSectionChild=\"isDividedSectionChild\"\n let-isFirst=\"isFirst\"\n let-isLast=\"isLast\">\n @if (!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section') {\n <li\n id=\"{{item.id || id + '_item' + i}}\"\n class=\"{{item.display || 'item'}} {{item.classList}}\"\n [class.divider-top]=\"item.display === 'divider-top' || item.display === 'heading-divided-section' || (isDividedSectionChild && isFirst && item.display === 'heading-divided-section')\"\n [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\n [attr.disabled]=\"item.disabled\"\n [hidden]=\"item.hidden\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\n [ecNavItemActiveUrl]=\"item.url\"\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\n (routerLinkActivated)=\"selectItem($event, item)\"\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading' && item?.display !== 'heading-divided-section') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': (item?.display === 'heading' || item?.display === 'heading-divided-section')}\"\n (click)=\"selectItem($event, item)\">\n @if (item.url && !item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n [routerLink]=\"item.url\"\n [queryParams]=\"item.queryParams || null\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (item.url && item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n href=\"{{item.url}}\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (!item.url) {\n <div\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </div>\n }\n </li>\n }\n</ng-template>\n\n<!-- 'label' Item Template -->\n<ng-template #label\n let-item>\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'checkAndLabel' Item Template -->\n<ng-template #checkAndLabel\n let-item>\n\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-check ec-icon-sm\"\n ></i>\n }\n\n @if (item.icon) {\n <i class=\"ec-icon {{item.icon}} ml-2\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'iconAndLabel' Item Template -->\n<ng-template #iconAndLabel\n let-item>\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<ng-template #iconLabelCaption\n let-item>\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <div\n class=\"label flex-grow\">\n <div id=\"{{item.id}}_label\"\n class=\"text-body-1\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </div>\n @if (item.caption) {\n <div id=\"{{item.id}}_caption\"\n class=\"text-caption-1\"\n [class.text-truncate]=\"truncateItems\"\n [innerHTML]=\"item.caption\"></div>\n }\n </div>\n }\n @if (item.display === 'heading' || item.display === 'heading-divided-section') {\n <h3\n class=\"flex-grow text-heading-3 align-self-center\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </h3>\n }\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\n ></i>\n }\n</ng-template>\n\n<ng-template #helpPopover\n let-item>\n <ec-help-popover id=\"{{item.id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{item.helpPopover | translate}}\"\n contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\n </ec-help-popover>\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading-divided-section,ul li.heading{cursor:default}ul li.heading-divided-section .item-wrapper,ul li.heading .item-wrapper{background-color:transparent}ul li.heading-divided-section:not(:first-child),ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper{color:inherit}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
3947
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MenuComponent, isStandalone: false, selector: "ec-menu", inputs: { id: "id", items: "items", selected: "selected", parent: "parent", templateType: "templateType", customMenuTemplate: "customMenuTemplate", title: "title", showNoItems: "showNoItems", noDataText: "noDataText", enableKeyNav: "enableKeyNav", rolePattern: "rolePattern", highlightedItem: "highlightedItem", maintainSelectedItem: "maintainSelectedItem", truncateItems: "truncateItems", preserveIconSpace: "preserveIconSpace", dropdownToggleButton: "dropdownToggleButton" }, outputs: { selectedChanged: "selectedChanged", highlightedItemChange: "highlightedItemChange", menuClosed: "menuClosed" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "iconAndLabelTemplate", first: true, predicate: ["iconAndLabel"], descendants: true, static: true }, { propertyName: "checkAndLabelTemplate", first: true, predicate: ["checkAndLabel"], descendants: true, static: true }, { propertyName: "iconLabelCaptionTemplate", first: true, predicate: ["iconLabelCaption"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<nav>\n <div class=\"parent\"\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\n @if (parent) {\n <header id=\"{{id}}_header\"\n class=\"text-heading-3 p-1\"\n [class.is-selected]=\"highlightedItemIndex === -1\"\n (click)=\"back($event)\">\n <div class=\"item-wrapper\">\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\n </div>\n </header>\n }\n\n <ul id=\"{{id}}_list\"\n class=\"py-1\"\n [attr.role]=\"listRole\">\n @for (item of items; track item; let i = $index) {\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n <!-- Show child items under parent item if the item is a heading or divided-section -->\n @if (item.items?.length && (item.display === 'heading' || item.display === 'divided-section' || item.display === 'heading-divided-section')) {\n @for (childItem of item.items; track childItem; let j = $index; let isFirst = $first; let isLast = $last) {\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: ( item.display === 'divided-section' || item.display === 'heading-divided-section'), isFirst: isFirst, isLast: isLast}\">\n </ng-container>\n }\n }\n }\n </ul>\n\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\n </div>\n\n <!-- Child menu (Rendered to the right) -->\n @if (selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section' && selected?.display !== 'heading-divided-section') {\n <ec-menu\n id=\"{{id}}_child\"\n class=\"child\"\n [parent]=\"selected\"\n [items]=\"selected?.items\"\n [showNoItems]=\"true\"\n [templateType]=\"templateType\"\n [enableKeyNav]=\"true\"\n [truncateItems]=\"truncateItems\"\n [rolePattern]=\"rolePattern\"\n (selectedChanged)=\"onSelection($event)\"\n (menuClosed)=\"toggleChildMenu(false)\">\n </ec-menu>\n }\n</nav>\n\n<ng-template #itemTemplate\n let-item\n let-i=\"index\"\n let-isDividedSectionChild=\"isDividedSectionChild\"\n let-isFirst=\"isFirst\"\n let-isLast=\"isLast\">\n @if (!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section') {\n <li\n id=\"{{item.id || id + '_item' + i}}\"\n class=\"{{item.display || 'item'}} {{item.classList}}\"\n [class.divider-top]=\"item.display === 'divider-top' || item.display === 'heading-divided-section' || (isDividedSectionChild && isFirst && item.display === 'heading-divided-section')\"\n [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\n [attr.disabled]=\"item.disabled\"\n [hidden]=\"item.hidden\"\n [attr.role]=\"getItemRole(item)\"\n [attr.aria-disabled]=\"rolePattern !== 'none' && item.disabled ? 'true' : null\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\n [ecNavItemActiveUrl]=\"item.url\"\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\n (routerLinkActivated)=\"selectItem($event, item)\"\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading' && item?.display !== 'heading-divided-section') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': (item?.display === 'heading' || item?.display === 'heading-divided-section')}\"\n (click)=\"selectItem($event, item)\">\n @if (item.url && !item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n [routerLink]=\"item.url\"\n [queryParams]=\"item.queryParams || null\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (item.url && item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n href=\"{{item.url}}\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (!item.url) {\n <div\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </div>\n }\n </li>\n }\n</ng-template>\n\n<!-- 'label' Item Template -->\n<ng-template #label\n let-item>\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'checkAndLabel' Item Template -->\n<ng-template #checkAndLabel\n let-item>\n\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-check ec-icon-sm\"\n ></i>\n }\n\n @if (item.icon) {\n <i class=\"ec-icon {{item.icon}} ml-2\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'iconAndLabel' Item Template -->\n<ng-template #iconAndLabel\n let-item>\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<ng-template #iconLabelCaption\n let-item>\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <div\n class=\"label flex-grow\">\n <div id=\"{{item.id}}_label\"\n class=\"text-body-1\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </div>\n @if (item.caption) {\n <div id=\"{{item.id}}_caption\"\n class=\"text-caption-1\"\n [class.text-truncate]=\"truncateItems\"\n [innerHTML]=\"item.caption\"></div>\n }\n </div>\n }\n @if (item.display === 'heading' || item.display === 'heading-divided-section') {\n <h3\n class=\"flex-grow text-heading-3 align-self-center\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </h3>\n }\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\n ></i>\n }\n</ng-template>\n\n<ng-template #helpPopover\n let-item>\n <ec-help-popover id=\"{{item.id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{item.helpPopover | translate}}\"\n contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\n </ec-help-popover>\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading-divided-section,ul li.heading{cursor:default}ul li.heading-divided-section .item-wrapper,ul li.heading .item-wrapper{background-color:transparent}ul li.heading-divided-section:not(:first-child),ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper{color:inherit}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
3713
3948
|
}
|
|
3714
3949
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MenuComponent, decorators: [{
|
|
3715
3950
|
type: Component,
|
|
3716
|
-
args: [{ selector: 'ec-menu', standalone: false, template: "<nav>\n <div class=\"parent\"\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\n @if (parent) {\n <header id=\"{{id}}_header\"\n class=\"text-heading-3 p-1\"\n [class.is-selected]=\"highlightedItemIndex === -1\"\n (click)=\"back($event)\">\n <div class=\"item-wrapper\">\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\n </div>\n </header>\n }\n\n <ul id=\"{{id}}_list\"\n class=\"py-1\">\n @for (item of items; track item; let i = $index) {\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n <!-- Show child items under parent item if the item is a heading or divided-section -->\n @if (item.items?.length && (item.display === 'heading' || item.display === 'divided-section' || item.display === 'heading-divided-section')) {\n @for (childItem of item.items; track childItem; let j = $index; let isFirst = $first; let isLast = $last) {\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: ( item.display === 'divided-section' || item.display === 'heading-divided-section'), isFirst: isFirst, isLast: isLast}\">\n </ng-container>\n }\n }\n }\n </ul>\n\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\n </div>\n\n <!-- Child menu (Rendered to the right) -->\n @if (selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section' && selected?.display !== 'heading-divided-section') {\n <ec-menu\n id=\"{{id}}_child\"\n class=\"child\"\n [parent]=\"selected\"\n [items]=\"selected?.items\"\n [showNoItems]=\"true\"\n [templateType]=\"templateType\"\n [enableKeyNav]=\"true\"\n [truncateItems]=\"truncateItems\"\n (selectedChanged)=\"onSelection($event)\"\n (menuClosed)=\"toggleChildMenu(false)\">\n </ec-menu>\n }\n</nav>\n\n<ng-template #itemTemplate\n let-item\n let-i=\"index\"\n let-isDividedSectionChild=\"isDividedSectionChild\"\n let-isFirst=\"isFirst\"\n let-isLast=\"isLast\">\n @if (!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section') {\n <li\n id=\"{{item.id || id + '_item' + i}}\"\n class=\"{{item.display || 'item'}} {{item.classList}}\"\n [class.divider-top]=\"item.display === 'divider-top' || item.display === 'heading-divided-section' || (isDividedSectionChild && isFirst && item.display === 'heading-divided-section')\"\n [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\n [attr.disabled]=\"item.disabled\"\n [hidden]=\"item.hidden\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\n [ecNavItemActiveUrl]=\"item.url\"\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\n (routerLinkActivated)=\"selectItem($event, item)\"\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading' && item?.display !== 'heading-divided-section') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': (item?.display === 'heading' || item?.display === 'heading-divided-section')}\"\n (click)=\"selectItem($event, item)\">\n @if (item.url && !item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n [routerLink]=\"item.url\"\n [queryParams]=\"item.queryParams || null\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (item.url && item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n href=\"{{item.url}}\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (!item.url) {\n <div\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </div>\n }\n </li>\n }\n</ng-template>\n\n<!-- 'label' Item Template -->\n<ng-template #label\n let-item>\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'checkAndLabel' Item Template -->\n<ng-template #checkAndLabel\n let-item>\n\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-check ec-icon-sm\"\n ></i>\n }\n\n @if (item.icon) {\n <i class=\"ec-icon {{item.icon}} ml-2\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'iconAndLabel' Item Template -->\n<ng-template #iconAndLabel\n let-item>\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<ng-template #iconLabelCaption\n let-item>\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <div\n class=\"label flex-grow\">\n <div id=\"{{item.id}}_label\"\n class=\"text-body-1\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </div>\n @if (item.caption) {\n <div id=\"{{item.id}}_caption\"\n class=\"text-caption-1\"\n [class.text-truncate]=\"truncateItems\"\n [innerHTML]=\"item.caption\"></div>\n }\n </div>\n }\n @if (item.display === 'heading' || item.display === 'heading-divided-section') {\n <h3\n class=\"flex-grow text-heading-3 align-self-center\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </h3>\n }\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\n ></i>\n }\n</ng-template>\n\n<ng-template #helpPopover\n let-item>\n <ec-help-popover id=\"{{item.id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{item.helpPopover | translate}}\"\n contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\n </ec-help-popover>\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading-divided-section,ul li.heading{cursor:default}ul li.heading-divided-section .item-wrapper,ul li.heading .item-wrapper{background-color:transparent}ul li.heading-divided-section:not(:first-child),ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper{color:inherit}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
|
|
3951
|
+
args: [{ selector: 'ec-menu', standalone: false, template: "<nav>\n <div class=\"parent\"\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\n @if (parent) {\n <header id=\"{{id}}_header\"\n class=\"text-heading-3 p-1\"\n [class.is-selected]=\"highlightedItemIndex === -1\"\n (click)=\"back($event)\">\n <div class=\"item-wrapper\">\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\n </div>\n </header>\n }\n\n <ul id=\"{{id}}_list\"\n class=\"py-1\"\n [attr.role]=\"listRole\">\n @for (item of items; track item; let i = $index) {\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item, index: i}\"></ng-container>\n <!-- Show child items under parent item if the item is a heading or divided-section -->\n @if (item.items?.length && (item.display === 'heading' || item.display === 'divided-section' || item.display === 'heading-divided-section')) {\n @for (childItem of item.items; track childItem; let j = $index; let isFirst = $first; let isLast = $last) {\n <ng-container\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{$implicit: childItem, index: i + '-' + j, isDividedSectionChild: ( item.display === 'divided-section' || item.display === 'heading-divided-section'), isFirst: isFirst, isLast: isLast}\">\n </ng-container>\n }\n }\n }\n </ul>\n\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\n </div>\n\n <!-- Child menu (Rendered to the right) -->\n @if (selected?.items && selected?.display !== 'heading' && selected?.display !== 'divided-section' && selected?.display !== 'heading-divided-section') {\n <ec-menu\n id=\"{{id}}_child\"\n class=\"child\"\n [parent]=\"selected\"\n [items]=\"selected?.items\"\n [showNoItems]=\"true\"\n [templateType]=\"templateType\"\n [enableKeyNav]=\"true\"\n [truncateItems]=\"truncateItems\"\n [rolePattern]=\"rolePattern\"\n (selectedChanged)=\"onSelection($event)\"\n (menuClosed)=\"toggleChildMenu(false)\">\n </ec-menu>\n }\n</nav>\n\n<ng-template #itemTemplate\n let-item\n let-i=\"index\"\n let-isDividedSectionChild=\"isDividedSectionChild\"\n let-isFirst=\"isFirst\"\n let-isLast=\"isLast\">\n @if (!(item.hideIfNoItems && !item.items?.length) && item.display !== 'divided-section') {\n <li\n id=\"{{item.id || id + '_item' + i}}\"\n class=\"{{item.display || 'item'}} {{item.classList}}\"\n [class.divider-top]=\"item.display === 'divider-top' || item.display === 'heading-divided-section' || (isDividedSectionChild && isFirst && item.display === 'heading-divided-section')\"\n [class.divider]=\"item.display === 'divider' || (isDividedSectionChild && isLast)\"\n [attr.disabled]=\"item.disabled\"\n [hidden]=\"item.hidden\"\n [attr.role]=\"getItemRole(item)\"\n [attr.aria-disabled]=\"rolePattern !== 'none' && item.disabled ? 'true' : null\"\n ecNavItemActive=\"is-selected\"\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\n [ecNavItemActiveUrl]=\"item.url\"\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\n (routerLinkActivated)=\"selectItem($event, item)\"\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading' && item?.display !== 'heading-divided-section') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': (item?.display === 'heading' || item?.display === 'heading-divided-section')}\"\n (click)=\"selectItem($event, item)\">\n @if (item.url && !item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n [routerLink]=\"item.url\"\n [queryParams]=\"item.queryParams || null\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (item.url && item.externalLink) {\n <a\n id=\"{{item.id}}_link\"\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\"\n href=\"{{item.url}}\"\n target=\"{{item.target || '_self'}}\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </a>\n }\n @if (!item.url) {\n <div\n title=\"{{truncateItems ? item.label : ''}}\"\n class=\"item-wrapper\">\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\n </div>\n }\n </li>\n }\n</ng-template>\n\n<!-- 'label' Item Template -->\n<ng-template #label\n let-item>\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'checkAndLabel' Item Template -->\n<ng-template #checkAndLabel\n let-item>\n\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-check ec-icon-sm\"\n ></i>\n }\n\n @if (item.icon) {\n <i class=\"ec-icon {{item.icon}} ml-2\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<!-- 'iconAndLabel' Item Template -->\n<ng-template #iconAndLabel\n let-item>\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n\n <span id=\"{{item.id}}_label\"\n class=\"label\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </span>\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270\"\n ></i>\n }\n</ng-template>\n\n<ng-template #iconLabelCaption\n let-item>\n @if ((item.icon && item.icon !== '') || preserveIconSpace) {\n <i class=\"ec-icon {{item.icon}}\"\n ></i>\n }\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <div\n class=\"label flex-grow\">\n <div id=\"{{item.id}}_label\"\n class=\"text-body-1\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </div>\n @if (item.caption) {\n <div id=\"{{item.id}}_caption\"\n class=\"text-caption-1\"\n [class.text-truncate]=\"truncateItems\"\n [innerHTML]=\"item.caption\"></div>\n }\n </div>\n }\n @if (item.display === 'heading' || item.display === 'heading-divided-section') {\n <h3\n class=\"flex-grow text-heading-3 align-self-center\"\n [class.text-truncate]=\"truncateItems\">\n {{item.label}}\n @if (item.helpPopover) {\n <ng-container\n [ngTemplateOutlet]=\"helpPopover\"\n [ngTemplateOutletContext]=\"{$implicit: item}\">\n </ng-container>\n }\n </h3>\n }\n\n @if (item?.items && item.display !== 'heading' && item.display !== 'divided-section' && item.display !== 'heading-divided-section') {\n <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\n ></i>\n }\n</ng-template>\n\n<ng-template #helpPopover\n let-item>\n <ec-help-popover id=\"{{item.id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{item.helpPopover | translate}}\"\n contentPosition=\"{{item.helpPopoverPosition ?? 'top-left'}}\">\n </ec-help-popover>\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-menu-font-size, var(--ec-font-size-action));font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{outline:none;background-color:var(--ec-color-disabled-dark);position:relative;z-index:1}ul li.is-disabled .item-wrapper{color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled)}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading-divided-section,ul li.heading{cursor:default}ul li.heading-divided-section .item-wrapper,ul li.heading .item-wrapper{background-color:transparent}ul li.heading-divided-section:not(:first-child),ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider:not(:last-child){border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.divider-top:not(:first-child):not(.divider+.divider-top){border-top:1px solid var(--ec-border-color);padding-top:.25rem;margin-top:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper{color:inherit}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
|
|
3717
3952
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: WindowService }, { type: ScrollService }], propDecorators: { id: [{
|
|
3718
3953
|
type: Input
|
|
3719
3954
|
}], attrId: [{
|
|
@@ -3737,6 +3972,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
3737
3972
|
type: Input
|
|
3738
3973
|
}], enableKeyNav: [{
|
|
3739
3974
|
type: Input
|
|
3975
|
+
}], rolePattern: [{
|
|
3976
|
+
type: Input
|
|
3740
3977
|
}], highlightedItem: [{
|
|
3741
3978
|
type: Input
|
|
3742
3979
|
}], maintainSelectedItem: [{
|
|
@@ -3749,6 +3986,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
3749
3986
|
type: Input
|
|
3750
3987
|
}], selectedChanged: [{
|
|
3751
3988
|
type: Output
|
|
3989
|
+
}], highlightedItemChange: [{
|
|
3990
|
+
type: Output
|
|
3752
3991
|
}], menuClosed: [{
|
|
3753
3992
|
type: Output
|
|
3754
3993
|
}], labelTemplate: [{
|
|
@@ -4117,7 +4356,7 @@ class ViewOverlayComponent {
|
|
|
4117
4356
|
}
|
|
4118
4357
|
}
|
|
4119
4358
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ViewOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4120
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ViewOverlayComponent, isStandalone: false, selector: "[ecOverlay]", inputs: { status: "status", message: "message", action: "action", noDataTemplate: "noDataTemplate", displayAsMask: "displayAsMask", overlayClassList: "overlayClassList" }, ngImport: i0, template: "<!-- Transcluded Content -->\n@if (displayAsMask || (!displayAsMask && status === 'hasData')) {\n <ng-content></ng-content>\n}\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\n<span [hidden]=\"true\"\nclass=\"overlay-status-{{status}}\"></span>\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\n@if (status !== 'hasData') {\n <div\n class=\"overlay flex-grow {{overlayClassList}}\"\n\t [ngClass]=\"{'not-mask': !displayAsMask,\n\t\t\t\t'overlay-error': status === 'error',\n\t\t\t\t'overlay-nodata': status === 'noData',\n\t\t\t\t'overlay-pending': status === 'pending'}\">\n <!--Pending Spinner-->\n <ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\n @if (status === 'noData' && noDataTemplate) {\n <ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\n }\n @if ((status === 'noData' && !noDataTemplate) || status !== 'noData') {\n <!--Status Message-->\n @if (message) {\n <div id=\"statusMessage\"\n class=\"message\"\n [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\n [innerHtml]=\"message | translate\">\n </div>\n }\n <!-- Action -->\n @if (action?.onClick) {\n <ec-button type=\"common\"\n class=\"mt-3\"\n [icon]=\"action?.icon\"\n (clicked)=\"actionClicked($event)\"\n [label]=\"action?.label\"\n [hidden]=\"status === 'pending'\">\n </ec-button>\n }\n }\n </div>\n}", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: SpinnerComponent, selector: "ec-spinner" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
4359
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ViewOverlayComponent, isStandalone: false, selector: "[ecOverlay]", inputs: { status: "status", message: "message", action: "action", noDataTemplate: "noDataTemplate", displayAsMask: "displayAsMask", overlayClassList: "overlayClassList" }, ngImport: i0, template: "<!-- Transcluded Content -->\n@if (displayAsMask || (!displayAsMask && status === 'hasData')) {\n <ng-content></ng-content>\n}\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\n<span [hidden]=\"true\"\nclass=\"overlay-status-{{status}}\"></span>\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\n@if (status !== 'hasData') {\n <div\n class=\"overlay flex-grow {{overlayClassList}}\"\n\t [ngClass]=\"{'not-mask': !displayAsMask,\n\t\t\t\t'overlay-error': status === 'error',\n\t\t\t\t'overlay-nodata': status === 'noData',\n\t\t\t\t'overlay-pending': status === 'pending'}\">\n <!--Pending Spinner-->\n <ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\n @if (status === 'noData' && noDataTemplate) {\n <ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\n }\n @if ((status === 'noData' && !noDataTemplate) || status !== 'noData') {\n <!--Status Message-->\n @if (message) {\n <div id=\"statusMessage\"\n class=\"message\"\n [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\n [innerHtml]=\"message | translate\">\n </div>\n }\n <!-- Action -->\n @if (action?.onClick) {\n <ec-button type=\"common\"\n class=\"mt-3\"\n [icon]=\"action?.icon\"\n (clicked)=\"actionClicked($event)\"\n [label]=\"action?.label\"\n [hidden]=\"status === 'pending'\">\n </ec-button>\n }\n }\n </div>\n}", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-overlay-background-color, var(--ec-background-color));display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: SpinnerComponent, selector: "ec-spinner" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
4121
4360
|
}
|
|
4122
4361
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ViewOverlayComponent, decorators: [{
|
|
4123
4362
|
type: Component,
|
|
@@ -4859,7 +5098,7 @@ class ComboboxComponent extends FormControlBase {
|
|
|
4859
5098
|
return index;
|
|
4860
5099
|
}
|
|
4861
5100
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComboboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4862
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ComboboxComponent, isStandalone: false, selector: "ec-combobox", inputs: { addNew: "addNew", addNewOptions: "addNewOptions", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", preserveIconSpace: "preserveIconSpace", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", caseSensitive: "caseSensitive" }, outputs: { addNewClick: "addNewClick", search: "search" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }, { propertyName: "addNewButton", first: true, predicate: ["addNewButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'open': menuStatus === 'visible',\n 'invalid': formModel.touched && formModel.invalid,\n 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled,\n 'is-always-open': alwaysOpen}\">\n\n @if (label) {\n <label>\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 @if (alwaysOpen) {\n <div class=\"textbox-group control-input\"\n [ngClass]=\"textboxElementClasses\">\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n </div>\n @if (filteredOptions.length > 0 || textboxFormModel.value) {\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\n }\n } @else {\n <div class=\"textbox-group control-input\"\n [ngClass]=\"textboxElementClasses\"\n *ecPopup=\"dropdownmenu\">\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n </div>\n }\n</div>\n\n\n<ng-template #textbox>\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\n\n <ec-textbox class=\"textbox-group-input mb-0\"\n #textbox\n [id]=\"id\"\n [autofocus]=\"autofocus\"\n [formModel]=\"textboxFormModel\"\n [maxlength]=\"maxlength\"\n [minlength]=\"minlength\"\n [placeholder]=\"effectivePlaceholder\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [readonly]=\"readonly\"\n (input)=\"textboxValueChanged($event)\"\n (keydown)=\"keyNavigate($event)\"\n (focusout)=\"onBlur()\"\n [upperCase]=\"upperCase\"\n [pending]=\"pending && alwaysOpen\"\n [autocomplete]=\"'off'\"></ec-textbox>\n\n @if (!hideToggleButton) {\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 [ariaLabel]=\"menuStatus === 'visible' ? 'Combobox_ToggleClose_SC' : 'Combobox_ToggleOpen_SC'\"\n [ariaExpanded]=\"menuStatus === 'visible'\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"keyNavigate($event)\"\n [class.active]=\"menuStatus === 'visible'\"></ec-button>\n }\n</ng-template>\n\n<ng-template #dropdownmenu>\n <div class=\"popup\"\n ecOverlay\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\n\n @if (addNew) {\n <button class=\"add-new {{addNewOptions?.classList}}\"\n id=\"{{id}}_addNew\"\n #addNewButton\n [class.is-selected]=\"addNewSelected\"\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\n (click)=\"onAddNew($event)\">\n <span class=\"add-new-label ec-util-truncate\">\n @if (addNew === 'static' || addNew === true) {\n <span\n translate>{{addNewOptions?.label}}\n </span>\n }\n @if (addNew === 'dynamic') {\n <span>{{'Add' | translate}} <strong class=\"ec-util-truncate\"\n [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\n </span>\n }\n </span>\n <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\n </button>\n }\n\n <ec-menu id=\"{{id}}_menu\"\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\n [ngClass]=\"menuElementClasses\"\n [templateType]=\"templateType\"\n [customMenuTemplate]=\"customMenuTemplate\"\n [showNoItems]=\"!hideNoMatches\"\n [noDataText]=\"noMatchesText\"\n [items]=\"filteredOptions\"\n [selected]=\"selectedItem\"\n (selectedChanged)=\"selectedChanged($event)\"\n [preserveIconSpace]=\"preserveIconSpace\"\n [truncateItems]=\"truncateItems\"></ec-menu>\n\n @if (totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0) {\n <footer>\n <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\n </footer>\n }\n</div>\n</ng-template>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .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(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .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(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--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}.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:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}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}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-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:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
5101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ComboboxComponent, isStandalone: false, selector: "ec-combobox", inputs: { addNew: "addNew", addNewOptions: "addNewOptions", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", preserveIconSpace: "preserveIconSpace", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", caseSensitive: "caseSensitive" }, outputs: { addNewClick: "addNewClick", search: "search" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }, { propertyName: "addNewButton", first: true, predicate: ["addNewButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'open': menuStatus === 'visible',\n 'invalid': formModel.touched && formModel.invalid,\n 'has-icon': ((templateType === 'iconAndLabel' || templateType === 'iconLabelCaption') && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled,\n 'is-always-open': alwaysOpen}\">\n\n @if (label) {\n <label>\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 @if (alwaysOpen) {\n <div class=\"textbox-group control-input\"\n [ngClass]=\"textboxElementClasses\">\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n </div>\n @if (filteredOptions.length > 0 || textboxFormModel.value) {\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\n }\n } @else {\n <div class=\"textbox-group control-input\"\n [ngClass]=\"textboxElementClasses\"\n *ecPopup=\"dropdownmenu\">\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\n </div>\n }\n</div>\n\n\n<ng-template #textbox>\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\n\n <ec-textbox class=\"textbox-group-input mb-0\"\n #textbox\n [id]=\"id\"\n [autofocus]=\"autofocus\"\n [formModel]=\"textboxFormModel\"\n [maxlength]=\"maxlength\"\n [minlength]=\"minlength\"\n [placeholder]=\"effectivePlaceholder\"\n [required]=\"required\"\n [tabindex]=\"tabindex\"\n [readonly]=\"readonly\"\n (input)=\"textboxValueChanged($event)\"\n (keydown)=\"keyNavigate($event)\"\n (focusout)=\"onBlur()\"\n [upperCase]=\"upperCase\"\n [pending]=\"pending && alwaysOpen\"\n [autocomplete]=\"'off'\"></ec-textbox>\n\n @if (!hideToggleButton) {\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 [ariaLabel]=\"menuStatus === 'visible' ? 'Combobox_ToggleClose_SC' : 'Combobox_ToggleOpen_SC'\"\n [ariaExpanded]=\"menuStatus === 'visible'\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"keyNavigate($event)\"\n [class.active]=\"menuStatus === 'visible'\"></ec-button>\n }\n</ng-template>\n\n<ng-template #dropdownmenu>\n <div class=\"popup\"\n ecOverlay\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\n\n @if (addNew) {\n <button class=\"add-new {{addNewOptions?.classList}}\"\n id=\"{{id}}_addNew\"\n #addNewButton\n [class.is-selected]=\"addNewSelected\"\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\n (click)=\"onAddNew($event)\">\n <span class=\"add-new-label ec-util-truncate\">\n @if (addNew === 'static' || addNew === true) {\n <span\n translate>{{addNewOptions?.label}}\n </span>\n }\n @if (addNew === 'dynamic') {\n <span>{{'Add' | translate}} <strong class=\"ec-util-truncate\"\n [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\n </span>\n }\n </span>\n <i class=\"ec-icon {{addNewOptions?.icon}}\"></i>\n </button>\n }\n\n <ec-menu id=\"{{id}}_menu\"\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\n [ngClass]=\"menuElementClasses\"\n [templateType]=\"templateType\"\n [customMenuTemplate]=\"customMenuTemplate\"\n [showNoItems]=\"!hideNoMatches\"\n [noDataText]=\"noMatchesText\"\n [items]=\"filteredOptions\"\n [selected]=\"selectedItem\"\n (selectedChanged)=\"selectedChanged($event)\"\n [preserveIconSpace]=\"preserveIconSpace\"\n [truncateItems]=\"truncateItems\"></ec-menu>\n\n @if (totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0) {\n <footer>\n <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\n </footer>\n }\n</div>\n</ng-template>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .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(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid,:host(.invalid) .control .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(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}.control:not(.is-disabled):not(.is-readonly) ec-button:hover{--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}.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:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}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}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-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:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
4863
5102
|
}
|
|
4864
5103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
4865
5104
|
type: Component,
|
|
@@ -5177,7 +5416,7 @@ class DateInputComponent extends FormControlBase {
|
|
|
5177
5416
|
* Date parsing formats for user-entered dates. Defaults to month-first formats, but is updated in onInit
|
|
5178
5417
|
* to use the user's preferred date format.
|
|
5179
5418
|
*/
|
|
5180
|
-
this.parseFormats = DateTimeHelper.
|
|
5419
|
+
this.parseFormats = DateTimeHelper.getLuxonParseFormats();
|
|
5181
5420
|
}
|
|
5182
5421
|
ngOnChanges(changes) {
|
|
5183
5422
|
if (changes.selectionMode && !changes.selectionMode.isFirstChange()) {
|
|
@@ -5193,12 +5432,15 @@ class DateInputComponent extends FormControlBase {
|
|
|
5193
5432
|
this.onFormModelStatusChanges();
|
|
5194
5433
|
this.onFormModelValueChanges();
|
|
5195
5434
|
this.onTextboxValueChanges();
|
|
5196
|
-
// Sync the initial disabled status and value of the textbox
|
|
5435
|
+
// Sync the initial disabled status and value of the textbox.
|
|
5436
|
+
// Normalize the form model value so any ISO date strings the host bound to the model
|
|
5437
|
+
// become real Dates before they reach the calendar/stepper logic (see normalizeSelection).
|
|
5197
5438
|
this.syncTextboxControlDisabledStatus(this.formModel.status);
|
|
5198
|
-
const
|
|
5439
|
+
const initialSelection = DateInput.normalizeSelection(this.formModel.value);
|
|
5440
|
+
const initialDisplayValue = this.selectionStrategy.formatSelection(initialSelection);
|
|
5199
5441
|
this.textboxGroup.patchValue(initialDisplayValue, { emitEvent: false });
|
|
5200
5442
|
// Update the calendar selection and view based on the initial form model value
|
|
5201
|
-
this.calendarSelection =
|
|
5443
|
+
this.calendarSelection = initialSelection;
|
|
5202
5444
|
this.updateCalendars(this.calendarSelection);
|
|
5203
5445
|
this.updateSteppers(this.calendarSelection);
|
|
5204
5446
|
}
|
|
@@ -5294,7 +5536,7 @@ class DateInputComponent extends FormControlBase {
|
|
|
5294
5536
|
goToToday() {
|
|
5295
5537
|
// If both calendars are visible, show today in the secondary calendar and the month before in the primary calendar.
|
|
5296
5538
|
if (this.selectionStrategy.showSecondaryCalendar) {
|
|
5297
|
-
this.primaryCalendarView = { mode: 'day', date:
|
|
5539
|
+
this.primaryCalendarView = { mode: 'day', date: DateTime.now().minus({ months: 1 }).toJSDate() };
|
|
5298
5540
|
this.secondaryCalendarView = { mode: 'day', date: new Date() };
|
|
5299
5541
|
// If we're in a single date mode, show today in the primary calendar.
|
|
5300
5542
|
}
|
|
@@ -5343,11 +5585,14 @@ class DateInputComponent extends FormControlBase {
|
|
|
5343
5585
|
// Update the calendar selection textbox value with a formatted date when the form model changes.
|
|
5344
5586
|
// This is triggered by the user selecting a date from the calendar or when the textbox is blurred.
|
|
5345
5587
|
this.formModel.valueChanges.pipe(takeUntil(this.componentDestroyed)).subscribe(value => {
|
|
5346
|
-
|
|
5588
|
+
// Normalize first: the host may set an ISO date string on the model (e.g. an API value),
|
|
5589
|
+
// and the calendar logic requires real Dates to avoid an Invalid Date crash.
|
|
5590
|
+
const selection = DateInput.normalizeSelection(value);
|
|
5591
|
+
const displayValue = this.selectionStrategy.formatSelection(selection);
|
|
5347
5592
|
// Don't emit an event when setting the textbox value to avoid circular updates between the textbox and form model.
|
|
5348
5593
|
this.textboxGroup.patchValue(displayValue, { emitEvent: false });
|
|
5349
|
-
this.updateCalendars(
|
|
5350
|
-
this.updateSteppers(
|
|
5594
|
+
this.updateCalendars(selection);
|
|
5595
|
+
this.updateSteppers(selection);
|
|
5351
5596
|
});
|
|
5352
5597
|
}
|
|
5353
5598
|
onTextboxValueChanges() {
|
|
@@ -5427,7 +5672,7 @@ class DateInputComponent extends FormControlBase {
|
|
|
5427
5672
|
const { preference } = await lastValueFrom(this.userPreferenceService.getPreferences());
|
|
5428
5673
|
const dateFormat = preference?.dateFormat;
|
|
5429
5674
|
this.placeholder = dateFormat ?? this.placeholder;
|
|
5430
|
-
this.parseFormats = DateTimeHelper.
|
|
5675
|
+
this.parseFormats = DateTimeHelper.getLuxonParseFormats(dateFormat);
|
|
5431
5676
|
}
|
|
5432
5677
|
/** Focuses the date input. */
|
|
5433
5678
|
focusInput() {
|
|
@@ -5447,10 +5692,10 @@ class DateInputComponent extends FormControlBase {
|
|
|
5447
5692
|
// This would cause the dates in the other calendar to be unselectable if we were to
|
|
5448
5693
|
// update the min/max dates in these cases.
|
|
5449
5694
|
if (this.primaryCalendarView?.mode === 'day') {
|
|
5450
|
-
this.secondaryCalendarMinDate =
|
|
5695
|
+
this.secondaryCalendarMinDate = DateTime.fromJSDate(this.primaryCalendarView.date).plus({ months: 1 }).startOf('month').toJSDate();
|
|
5451
5696
|
}
|
|
5452
5697
|
if (this.secondaryCalendarView?.mode === 'day') {
|
|
5453
|
-
this.primaryCalendarMaxDate =
|
|
5698
|
+
this.primaryCalendarMaxDate = DateTime.fromJSDate(this.secondaryCalendarView.date).minus({ months: 1 }).endOf('month').toJSDate();
|
|
5454
5699
|
}
|
|
5455
5700
|
}
|
|
5456
5701
|
updateCalendars(selection) {
|
|
@@ -5466,8 +5711,10 @@ class DateInputComponent extends FormControlBase {
|
|
|
5466
5711
|
// However, it's possible that the new date is after the secondary calendar's date. In this case,
|
|
5467
5712
|
// We want to shift the secondary calendar so the calendars stay in order.
|
|
5468
5713
|
if (shiftSecondary && this.secondaryCalendarView) {
|
|
5469
|
-
|
|
5470
|
-
|
|
5714
|
+
const primaryDt = DateTime.fromJSDate(this.primaryCalendarView.date);
|
|
5715
|
+
const secondaryDt = DateTime.fromJSDate(this.secondaryCalendarView.date);
|
|
5716
|
+
if (primaryDt.startOf('month') >= secondaryDt.startOf('month')) {
|
|
5717
|
+
const newSecondaryDate = primaryDt.plus({ months: 1 }).toJSDate();
|
|
5471
5718
|
this.secondaryCalendarView = { mode: this.selectionStrategy.selectionViewMode, date: newSecondaryDate };
|
|
5472
5719
|
}
|
|
5473
5720
|
}
|
|
@@ -5478,8 +5725,10 @@ class DateInputComponent extends FormControlBase {
|
|
|
5478
5725
|
// However, it's possible that the new date is before the primary calendar's date. In this case,
|
|
5479
5726
|
// We want to shift the primary calendar so the calendars stay in order.
|
|
5480
5727
|
if (shiftPrimary && this.primaryCalendarView) {
|
|
5481
|
-
|
|
5482
|
-
|
|
5728
|
+
const primaryDt = DateTime.fromJSDate(this.primaryCalendarView.date);
|
|
5729
|
+
const secondaryDt = DateTime.fromJSDate(this.secondaryCalendarView.date);
|
|
5730
|
+
if (primaryDt.startOf('month') >= secondaryDt.startOf('month')) {
|
|
5731
|
+
const newPrimaryDate = secondaryDt.minus({ months: 1 }).toJSDate();
|
|
5483
5732
|
this.primaryCalendarView = { mode: this.selectionStrategy.selectionViewMode, date: newPrimaryDate };
|
|
5484
5733
|
}
|
|
5485
5734
|
}
|
|
@@ -5529,17 +5778,19 @@ class DateInputComponent extends FormControlBase {
|
|
|
5529
5778
|
// We're using the view mode as the granularity. We don't want to invalidate
|
|
5530
5779
|
// the date in the case where you have a month/quarter/year selected and the min
|
|
5531
5780
|
// or max date is somewhere within that month/quarter/year.
|
|
5532
|
-
|
|
5781
|
+
const unit = this.selectionStrategy.selectionViewMode;
|
|
5782
|
+
const valueDt = DateTime.fromJSDate(value).startOf(unit);
|
|
5783
|
+
if (valueDt < DateTime.fromJSDate(this.minDate).startOf(unit)) {
|
|
5533
5784
|
return { minDate: { minValue: this.minDate } };
|
|
5534
5785
|
}
|
|
5535
|
-
else if (
|
|
5786
|
+
else if (valueDt > DateTime.fromJSDate(this.maxDate).startOf(unit)) {
|
|
5536
5787
|
return { maxDate: { maxValue: this.maxDate } };
|
|
5537
5788
|
}
|
|
5538
5789
|
}
|
|
5539
5790
|
return null;
|
|
5540
5791
|
}
|
|
5541
5792
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateInputComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: UserPreferenceService }, { token: i0.ElementRef }, { token: i1$1.Overlay }, { token: DateInput.SelectionStrategies }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5542
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DateInputComponent, isStandalone: false, selector: "ec-date-input", inputs: { id: "id", formModel: "formModel", minDate: "minDate", maxDate: "maxDate", selectionMode: "selectionMode", selectionModeOptions: "selectionModeOptions", quickSelectDate: "quickSelectDate", enableSteppers: "enableSteppers" }, host: { properties: { "attr.id": "this.id" } }, providers: [DateInput.SelectionStrategies], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "controls", first: true, predicate: ["controls"], descendants: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (label) {\n <label>\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=\"d-flex align-items-center\"\n [ecKeyboardNavContainer]=\"isCalendarOpen\"\n [tabindex]=\"tabindex\"\n #controls=\"ecKeyboardNavContainer\"\n (focusOutEnd)=\"onControlsFocusOutEnd()\">\n <ec-form-control id=\"{{id}}\"\n [required]=\"required\"\n [autofocus]=\"autofocus\"\n [pending]=\"pending\"\n [readonly]=\"readonly\"\n (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n [showClear]=\"false\"\n [tabindex]=\"tabindex\"\n actionIcon=\"icon-date\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n class=\"flex-grow\"\n style=\"height: 2rem;\">\n <input id=\"{{id}}_input\"\n type=\"text\"\n placeholder=\"{{placeholder}}\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"textboxGroup.get('textbox')\"\n (blur)=\"onTextboxBlur()\">\n </ec-form-control>\n\n @if (selectionStrategy.showSecondaryTextbox) {\n <span class=\"flex-shrink mx-1\">–</span>\n <ec-form-control id=\"{{id}}_control2\"\n [required]=\"required\"\n [autofocus]=\"autofocus\"\n [pending]=\"pending\"\n [readonly]=\"readonly\"\n (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n [showClear]=\"false\"\n [tabindex]=\"tabindex\"\n actionIcon=\"icon-date\"\n class=\"flex-grow\"\n style=\"height: 2rem;\">\n <input id=\"{{id}}_input2\"\n type=\"text\"\n placeholder=\"{{placeholder}}\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"textboxGroup.get('textbox2')\"\n (blur)=\"onTextbox2Blur()\">\n </ec-form-control>\n }\n\n @if (enableSteppers) {\n <div\n class=\"control-group ml-2\">\n <ec-button id=\"{{id}}_previousSelection\"\n type=\"secondary\"\n icon=\"icon-angle-down rotate-90\"\n (clicked)=\"previousSelection()\"\n [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n [tabindex]=\"tabindex\">\n </ec-button>\n <ec-button id=\"{{id}}_nextSelection\"\n type=\"secondary\"\n icon=\"icon-angle-down rotate-270\"\n (clicked)=\"nextSelection()\"\n [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n [tabindex]=\"tabindex\">\n </ec-button>\n </div>\n }\n\n @if (quickSelectDate) {\n <ec-button\n id=\"{{id}}_quickSelect\"\n icon=\"icon-day\"\n type=\"secondary\"\n title=\"{{'DateInput_LatestDataAvailableTitle' | translate}}\"\n (clicked)=\"goToQuickSelectDate()\"\n [tabindex]=\"tabindex\"\n class=\"ml-2\">\n </ec-button>\n }\n </div>\n\n <ng-template cdkConnectedOverlay\n #overlay=\"cdkConnectedOverlay\"\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n cdkConnectedOverlayPanelClass=\"my-1\"\n (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\n (detach)=\"isCalendarOpen = false\">\n <article id=\"{{id}}_datePicker\"\n class=\"card d-flex\"\n [ecKeyboardNavContainer]=\"isCalendarOpen\"\n [tabindex]=\"tabindex\"\n #calendar=\"ecKeyboardNavContainer\"\n (focusOutStart)=\"onCalendarFocusOutStart()\"\n (focusOutEnd)=\"onCalendarFocusOutEnd()\">\n @if (selectionModeOptions.length > 1) {\n <ul\n class=\"selection-mode-menu border-right p-1\">\n @for (option of selectionModeOptions; track option) {\n <li>\n <button id=\"{{id}}_selectionMode_{{option}}\"\n class=\"text-body-1\"\n [class.is-selected]=\"option === selectionMode\"\n (click)=\"onSelectionModeChange(option)\"\n tabindex=\"{{tabindex}}\">\n {{'DateInputSelectionMode_' + option | translate}}\n </button>\n </li>\n }\n </ul>\n }\n\n <div>\n <div class=\"d-flex\">\n <ec-calendar id=\"{{id}}_calendar\"\n [view]=\"primaryCalendarView\"\n (viewChange)=\"onPrimaryCalendarViewChange($event)\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"calendarSelection\"\n (dateSelected)=\"onCalendarDateSelected($event)\"\n [minDate]=\"minDate\"\n [maxDate]=\"selectionStrategy.showSecondaryCalendar ? primaryCalendarMaxDate : maxDate\"\n [tabindex]=\"tabindex\">\n </ec-calendar>\n\n @if (selectionStrategy.showSecondaryCalendar) {\n <ec-calendar\n id=\"{{id}}_secondaryCalendar\"\n [view]=\"secondaryCalendarView\"\n (viewChange)=\"onSecondaryCalendarViewChange($event)\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"calendarSelection\"\n (dateSelected)=\"onCalendarDateSelected($event)\"\n [minDate]=\"secondaryCalendarMinDate\"\n [maxDate]=\"maxDate\"\n [tabindex]=\"tabindex\">\n </ec-calendar>\n }\n </div>\n\n @if (selectionStrategy.selectionViewMode === 'day') {\n <footer\n class=\"px-2 my-2 d-flex\">\n <ec-button id=\"{{id}}_today_button\"\n label=\"{{'DateInput_CalendarTodayButton_Label' | translate}}\"\n class=\"ml-auto\"\n (clicked)=\"goToToday()\"\n tabindex=\"{{tabindex}}\"\n type=\"text\">\n </ec-button>\n @if (selectionStrategy.showSecondaryTextbox) {\n <ec-button\n id=\"{{id}}_close_button\"\n label=\"{{'DateInput_CalendarCloseButton_Label' | translate}}\"\n class=\"ml-2\"\n (clicked)=\"closeCalendarAndFocusInput()\"\n tabindex=\"{{tabindex}}\"\n type=\"primary\">\n </ec-button>\n }\n </footer>\n }\n </div>\n </article>\n </ng-template>\n", styles: [":host{display:block}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}.date-picker{display:grid;grid-template-areas:\"menu calendar calendar\" \"menu footer footer\"}.date-picker footer{grid-area:footer}ul.selection-mode-menu{grid-area:menu;list-style:none;padding:0;margin:0;min-width:7rem}ul.selection-mode-menu li{margin-bottom:.25rem}ul.selection-mode-menu li button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}ul.selection-mode-menu li button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ul.selection-mode-menu li button .ec-icon{flex:none}ul.selection-mode-menu li button .ec-icon+.label{flex:none;margin-left:.25rem}ul.selection-mode-menu li button.has-badge{padding-right:.0625rem}ul.selection-mode-menu li button:focus{outline:none;position:relative;z-index:1}ul.selection-mode-menu li button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}ul.selection-mode-menu li button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ul.selection-mode-menu li button{background-color:transparent}ul.selection-mode-menu li button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}ul.selection-mode-menu li button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}ul.selection-mode-menu li button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul.selection-mode-menu li button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button{width:100%;height:1.75rem}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control)}.control-group ec-button:has(+ec-button) ::ng-deep button{border-right:0}.control-group ec-button+ec-button ::ng-deep button{border-left:0}\n"], dependencies: [{ kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "tabindex", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: CalendarComponent, selector: "ec-calendar", inputs: ["id", "selection", "selectionMode", "minDate", "maxDate", "tabindex", "view"], outputs: ["dateSelected", "viewChange"] }, { kind: "directive", type: KeyboardNavContainerDirective, selector: "[ecKeyboardNavContainer]", inputs: ["ecKeyboardNavContainer", "tabindex"], outputs: ["focusOutStart", "focusOutEnd"], exportAs: ["ecKeyboardNavContainer"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
5793
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DateInputComponent, isStandalone: false, selector: "ec-date-input", inputs: { id: "id", formModel: "formModel", minDate: "minDate", maxDate: "maxDate", selectionMode: "selectionMode", selectionModeOptions: "selectionModeOptions", quickSelectDate: "quickSelectDate", enableSteppers: "enableSteppers" }, host: { properties: { "attr.id": "this.id" } }, providers: [DateInput.SelectionStrategies], viewQueries: [{ propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "controls", first: true, predicate: ["controls"], descendants: true }, { propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if (label) {\n <label>\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=\"d-flex align-items-center\"\n [ecKeyboardNavContainer]=\"isCalendarOpen\"\n [tabindex]=\"tabindex\"\n #controls=\"ecKeyboardNavContainer\"\n (focusOutEnd)=\"onControlsFocusOutEnd()\">\n <ec-form-control id=\"{{id}}\"\n [required]=\"required\"\n [autofocus]=\"autofocus\"\n [pending]=\"pending\"\n [readonly]=\"readonly\"\n (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n [showClear]=\"false\"\n [tabindex]=\"tabindex\"\n actionIcon=\"icon-date\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n class=\"flex-grow\"\n style=\"height: 2rem;\">\n <input id=\"{{id}}_input\"\n type=\"text\"\n placeholder=\"{{placeholder}}\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"textboxGroup.get('textbox')\"\n (blur)=\"onTextboxBlur()\">\n </ec-form-control>\n\n @if (selectionStrategy.showSecondaryTextbox) {\n <span class=\"flex-shrink mx-1\">–</span>\n <ec-form-control id=\"{{id}}_control2\"\n [required]=\"required\"\n [autofocus]=\"autofocus\"\n [pending]=\"pending\"\n [readonly]=\"readonly\"\n (actionClicked)=\"isCalendarOpen = !isCalendarOpen\"\n [showClear]=\"false\"\n [tabindex]=\"tabindex\"\n actionIcon=\"icon-date\"\n class=\"flex-grow\"\n style=\"height: 2rem;\">\n <input id=\"{{id}}_input2\"\n type=\"text\"\n placeholder=\"{{placeholder}}\"\n tabindex=\"{{tabindex}}\"\n [formControl]=\"textboxGroup.get('textbox2')\"\n (blur)=\"onTextbox2Blur()\">\n </ec-form-control>\n }\n\n @if (enableSteppers) {\n <div\n class=\"control-group ml-2\">\n <ec-button id=\"{{id}}_previousSelection\"\n type=\"secondary\"\n icon=\"icon-angle-down rotate-90\"\n (clicked)=\"previousSelection()\"\n [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n [tabindex]=\"tabindex\">\n </ec-button>\n <ec-button id=\"{{id}}_nextSelection\"\n type=\"secondary\"\n icon=\"icon-angle-down rotate-270\"\n (clicked)=\"nextSelection()\"\n [disabled]=\"isCalendarOpen || disableSteppers || formModel?.disabled\"\n [tabindex]=\"tabindex\">\n </ec-button>\n </div>\n }\n\n @if (quickSelectDate) {\n <ec-button\n id=\"{{id}}_quickSelect\"\n icon=\"icon-day\"\n type=\"secondary\"\n title=\"{{'DateInput_LatestDataAvailableTitle' | translate}}\"\n (clicked)=\"goToQuickSelectDate()\"\n [tabindex]=\"tabindex\"\n class=\"ml-2\">\n </ec-button>\n }\n </div>\n\n <ng-template cdkConnectedOverlay\n #overlay=\"cdkConnectedOverlay\"\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isCalendarOpen\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n cdkConnectedOverlayPanelClass=\"my-1\"\n (overlayOutsideClick)=\"onOverlayOutsideClick($event)\"\n (detach)=\"isCalendarOpen = false\">\n <article id=\"{{id}}_datePicker\"\n class=\"card d-flex\"\n [ecKeyboardNavContainer]=\"isCalendarOpen\"\n [tabindex]=\"tabindex\"\n #calendar=\"ecKeyboardNavContainer\"\n (focusOutStart)=\"onCalendarFocusOutStart()\"\n (focusOutEnd)=\"onCalendarFocusOutEnd()\">\n @if (selectionModeOptions.length > 1) {\n <ul\n class=\"selection-mode-menu border-right p-1\">\n @for (option of selectionModeOptions; track option) {\n <li>\n <button id=\"{{id}}_selectionMode_{{option}}\"\n class=\"text-body-1\"\n [class.is-selected]=\"option === selectionMode\"\n (click)=\"onSelectionModeChange(option)\"\n tabindex=\"{{tabindex}}\">\n {{'DateInputSelectionMode_' + option | translate}}\n </button>\n </li>\n }\n </ul>\n }\n\n <div>\n <div class=\"d-flex\">\n <ec-calendar id=\"{{id}}_calendar\"\n [view]=\"primaryCalendarView\"\n (viewChange)=\"onPrimaryCalendarViewChange($event)\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"calendarSelection\"\n (dateSelected)=\"onCalendarDateSelected($event)\"\n [minDate]=\"minDate\"\n [maxDate]=\"selectionStrategy.showSecondaryCalendar ? primaryCalendarMaxDate : maxDate\"\n [tabindex]=\"tabindex\">\n </ec-calendar>\n\n @if (selectionStrategy.showSecondaryCalendar) {\n <ec-calendar\n id=\"{{id}}_secondaryCalendar\"\n [view]=\"secondaryCalendarView\"\n (viewChange)=\"onSecondaryCalendarViewChange($event)\"\n [selectionMode]=\"selectionMode\"\n [selection]=\"calendarSelection\"\n (dateSelected)=\"onCalendarDateSelected($event)\"\n [minDate]=\"secondaryCalendarMinDate\"\n [maxDate]=\"maxDate\"\n [tabindex]=\"tabindex\">\n </ec-calendar>\n }\n </div>\n\n @if (selectionStrategy.selectionViewMode === 'day') {\n <footer\n class=\"px-2 my-2 d-flex\">\n <ec-button id=\"{{id}}_today_button\"\n label=\"{{'DateInput_CalendarTodayButton_Label' | translate}}\"\n class=\"ml-auto\"\n (clicked)=\"goToToday()\"\n tabindex=\"{{tabindex}}\"\n type=\"text\">\n </ec-button>\n @if (selectionStrategy.showSecondaryTextbox) {\n <ec-button\n id=\"{{id}}_close_button\"\n label=\"{{'DateInput_CalendarCloseButton_Label' | translate}}\"\n class=\"ml-2\"\n (clicked)=\"closeCalendarAndFocusInput()\"\n tabindex=\"{{tabindex}}\"\n type=\"primary\">\n </ec-button>\n }\n </footer>\n }\n </div>\n </article>\n </ng-template>\n", styles: [":host{display:block}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}.date-picker{display:grid;grid-template-areas:\"menu calendar calendar\" \"menu footer footer\"}.date-picker footer{grid-area:footer}ul.selection-mode-menu{grid-area:menu;list-style:none;padding:0;margin:0;min-width:7rem}ul.selection-mode-menu li{margin-bottom:.25rem}ul.selection-mode-menu li button{font-size:var(--ec-font-size-action);height:2rem;line-height:1.25rem;padding:.3125rem .5rem;border:0;border-radius:var(--ec-border-radius);display:flex;align-items:center;justify-content:center;cursor:pointer}ul.selection-mode-menu li button .label{display:flex;align-items:center;justify-content:center;white-space:nowrap;flex:auto}ul.selection-mode-menu li button .ec-icon{flex:none}ul.selection-mode-menu li button .ec-icon+.label{flex:none;margin-left:.25rem}ul.selection-mode-menu li button.has-badge{padding-right:.0625rem}ul.selection-mode-menu li button:focus{outline:none;position:relative;z-index:1}ul.selection-mode-menu li button:disabled{background-color:var(--ec-background-color-disabled);border:1px solid var(--ec-form-control-border-color-disabled);color:var(--ec-color-disabled-dark);opacity:var(--ec-form-control-opacity-disabled);cursor:default}ul.selection-mode-menu li button:disabled .ec-icon{color:var(--ec-color-disabled-dark)}ul.selection-mode-menu li button{background-color:transparent}ul.selection-mode-menu li button:disabled{background-color:transparent;border-color:transparent;color:var(--ec-color-hint-dark);--ec-color-icon: var(--ec-color-hint-dark)}ul.selection-mode-menu li button:hover:not(:disabled){background-color:var(--ec-background-color-hover)}ul.selection-mode-menu li button:active:not(:disabled){background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button:focus:not(:disabled){box-shadow:var(--ec-button-box-shadow-active, 0 0 0 2px var(--ec-border-color-focus))}ul.selection-mode-menu li button.is-selected{background-color:var(--ec-background-color-selected);font-weight:700}ul.selection-mode-menu li button{width:100%;height:1.75rem}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control)}.control-group ec-button:has(+ec-button) ::ng-deep button{border-right:0}.control-group ec-button+ec-button ::ng-deep button{border-left:0}\n"], dependencies: [{ kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "tabindex", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: CalendarComponent, selector: "ec-calendar", inputs: ["id", "selection", "selectionMode", "minDate", "maxDate", "tabindex", "view"], outputs: ["dateSelected", "viewChange"] }, { kind: "directive", type: KeyboardNavContainerDirective, selector: "[ecKeyboardNavContainer]", inputs: ["ecKeyboardNavContainer", "tabindex"], outputs: ["focusOutStart", "focusOutEnd"], exportAs: ["ecKeyboardNavContainer"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
5543
5794
|
}
|
|
5544
5795
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
5545
5796
|
type: Component,
|
|
@@ -5739,11 +5990,11 @@ class DropdownComponent {
|
|
|
5739
5990
|
}
|
|
5740
5991
|
}
|
|
5741
5992
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5742
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DropdownComponent, isStandalone: false, selector: "ec-dropdown", inputs: { id: "id", autofocus: "autofocus", status: "status", disabled: "disabled", label: "label", icon: "icon", buttonType: "buttonType", buttonAlignment: "buttonAlignment", buttonTitle: "buttonTitle", tabindex: "tabindex", showArrow: "showArrow", items: "items", menuTemplateType: "menuTemplateType", menuTitle: "menuTitle", menuHeight: "menuHeight", menuWidth: "menuWidth", menuMinWidth: "menuMinWidth", menuPosition: "menuPosition", menuFooter: "menuFooter", popupFixed: "popupFixed", buttonCustomTemplate: "buttonCustomTemplate", pending: "pending" }, outputs: { itemSelected: "itemSelected", popupOpened: "popupOpened" }, host: { properties: { "class.is-pending": "this.pending" } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: MenuComponent, descendants: true, read: ElementRef }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true, static: true }, { propertyName: "dropdownToggleButton", first: true, predicate: ["dropdownToggle"], descendants: true }], ngImport: i0, template: "<div class=\"control\">\n <ec-button [disabled]=\"disabled\"\n id=\"{{id}}_toggle\"\n #dropdownToggle\n [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\n *ecPopup=\"dropdownMenu\"\n [label]=\"label\"\n [icon]=\"icon\"\n [tabindex]=\"tabindex\"\n [type]=\"buttonType\"\n [customTemplate]=\"buttonCustomTemplate\"\n [pending]=\"pending\"\n title=\"{{buttonTitle}}\"\n [ariaHaspopup]=\"'
|
|
5993
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DropdownComponent, isStandalone: false, selector: "ec-dropdown", inputs: { id: "id", autofocus: "autofocus", status: "status", disabled: "disabled", label: "label", icon: "icon", buttonType: "buttonType", buttonAlignment: "buttonAlignment", buttonTitle: "buttonTitle", ariaLabel: "ariaLabel", tabindex: "tabindex", showArrow: "showArrow", items: "items", menuTemplateType: "menuTemplateType", menuTitle: "menuTitle", menuHeight: "menuHeight", menuWidth: "menuWidth", menuMinWidth: "menuMinWidth", menuPosition: "menuPosition", menuFooter: "menuFooter", popupFixed: "popupFixed", buttonCustomTemplate: "buttonCustomTemplate", pending: "pending" }, outputs: { itemSelected: "itemSelected", popupOpened: "popupOpened" }, host: { properties: { "class.is-pending": "this.pending" } }, viewQueries: [{ propertyName: "menuEl", first: true, predicate: MenuComponent, descendants: true, read: ElementRef }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true, static: true }, { propertyName: "dropdownToggleButton", first: true, predicate: ["dropdownToggle"], descendants: true }], ngImport: i0, template: "<div class=\"control\">\n <ec-button [disabled]=\"disabled\"\n id=\"{{id}}_toggle\"\n #dropdownToggle\n [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\n *ecPopup=\"dropdownMenu\"\n [label]=\"label\"\n [icon]=\"icon\"\n [tabindex]=\"tabindex\"\n [type]=\"buttonType\"\n [customTemplate]=\"buttonCustomTemplate\"\n [pending]=\"pending\"\n title=\"{{buttonTitle}}\"\n [ariaLabel]=\"ariaLabel\"\n [ariaHaspopup]=\"'menu'\"\n [ariaExpanded]=\"menuStatus === 'visible'\"\n [ariaControls]=\"id + '_popup'\"\n [ariaActivedescendant]=\"menuStatus === 'visible' ? highlightedItem?.id : null\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"keyNavigate($event)\"\n [autofocus]=\"autofocus\">\n </ec-button>\n @if (showArrow) {\n <span class=\"arrow is-{{buttonType}}\"\n [class.is-disabled]=\"disabled\"\n aria-hidden=\"true\">\n <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\n </span>\n }\n</div>\n\n<ng-template #dropdownMenu>\n <div id=\"{{id}}_popup\"\n class=\"popup\"\n attr.aria-labelledby=\"{{id}}_toggle_button\"\n ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [displayAsMask]=\"true\">\n <!-- Dropdown Menu Title -->\n @if (menuTitle) {\n <header id=\"{{id}}_title\"\n class=\"text-heading-2 px-2 my-2\"\n >{{menuTitle}}\n </header>\n }\n <!-- Dropdown Menu -->\n <ec-menu id=\"{{id}}_menu\"\n [class.wrap-items]=\"menuWidth\"\n [templateType]=\"menuTemplateType\"\n [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\n [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\n [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\n [items]=\"items\"\n [showNoItems]=\"true\"\n [enableKeyNav]=\"true\"\n [highlightedItem]=\"highlightedItem\"\n [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\n rolePattern=\"menu\"\n (selectedChanged)=\"selectedChanged($event)\"\n (highlightedItemChange)=\"highlightedItem = $event\">\n </ec-menu>\n @if (menuFooter) {\n <footer>{{menuFooter}}</footer>\n }\n </div>\n</ng-template>", styles: [":host{display:inline-block;box-sizing:border-box;vertical-align:top}:host(.font-size-inherit) ec-button{font-size:inherit}:host(.font-size-inherit) ec-button ::ng-deep button{font-size:inherit}:host(.fill){display:block;height:100%;width:100%}:host(.fill) .control{display:block;height:100%;width:100%}:host(.fill) .control ec-button{display:block;height:100%;width:100%}:host(.fill) .control ec-button ::ng-deep button{display:block;height:100%;width:100%;display:flex}:host(.fill) ec-menu{min-width:100%}:host(.td-fill){position:absolute;left:0;top:0}:host(.td-fill) ec-button ::ng-deep button{padding-left:.375rem;padding-right:.375rem;font-size:.75rem}:host(.is-action) ec-button,:host(.is-action) .arrow{color:var(--ec-color-interactive)}:host(.is-condensed) ec-button ::ng-deep button{height:1.5rem}:host(.is-condensed) ec-button.has-arrow ::ng-deep button{padding:0 1.125rem 0 .25rem}:host(.is-condensed) ec-button.has-arrow~.arrow{right:.375rem}:host(.d-block) ec-button{display:block}:host(.d-block) ec-button ::ng-deep button{width:100%}:host(.is-pending) .arrow{opacity:0}:host-context(th){color:var(--ec-color-primary-dark)}.control{position:relative}ec-button{display:block}ec-button.has-arrow~.arrow{position:absolute;top:0;right:.5rem;height:100%;display:flex;align-items:center;pointer-events:none;width:.625rem;z-index:1}ec-button.has-arrow~.arrow .ec-icon{color:var(--ec-color-icon);width:auto;transition:color .3s ease}ec-button.has-arrow~.arrow.is-link .ec-icon{color:var(--ec-button-color-text, var(--ec-color-link))}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-primary, var(--ec-color-primary-light))}ec-button.has-arrow~.arrow.is-common .ec-icon,ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-text, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-disabled .ec-icon{opacity:.5}ec-button.has-arrow.active~.arrow.is-primary .ec-icon,ec-button.has-arrow.active~.arrow.is-secondary .ec-icon,ec-button.has-arrow.active~.arrow.is-text .ec-icon,ec-button.has-arrow.active~.arrow.is-link .ec-icon{color:var(--ec-button-color-active, var(--ec-color-primary-dark))}ec-button.has-arrow ::ng-deep button{width:auto;padding-right:1.25rem}ec-button.has-arrow ::ng-deep button:not(.ec-button-custom){padding-left:.5rem}.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);text-align:start}.popup>header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup footer{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);border-top:var(--ec-border-width) solid var(--ec-border-color);padding:.1875rem .5rem;line-height:1.2}ec-menu ::ng-deep ul{max-height:50vh}ec-menu ::ng-deep li{white-space:nowrap}ec-menu.wrap-items ::ng-deep li{white-space:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }] }); }
|
|
5743
5994
|
}
|
|
5744
5995
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
5745
5996
|
type: Component,
|
|
5746
|
-
args: [{ selector: 'ec-dropdown', standalone: false, template: "<div class=\"control\">\n <ec-button [disabled]=\"disabled\"\n id=\"{{id}}_toggle\"\n #dropdownToggle\n [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\n *ecPopup=\"dropdownMenu\"\n [label]=\"label\"\n [icon]=\"icon\"\n [tabindex]=\"tabindex\"\n [type]=\"buttonType\"\n [customTemplate]=\"buttonCustomTemplate\"\n [pending]=\"pending\"\n title=\"{{buttonTitle}}\"\n [ariaHaspopup]=\"'
|
|
5997
|
+
args: [{ selector: 'ec-dropdown', standalone: false, template: "<div class=\"control\">\n <ec-button [disabled]=\"disabled\"\n id=\"{{id}}_toggle\"\n #dropdownToggle\n [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\n *ecPopup=\"dropdownMenu\"\n [label]=\"label\"\n [icon]=\"icon\"\n [tabindex]=\"tabindex\"\n [type]=\"buttonType\"\n [customTemplate]=\"buttonCustomTemplate\"\n [pending]=\"pending\"\n title=\"{{buttonTitle}}\"\n [ariaLabel]=\"ariaLabel\"\n [ariaHaspopup]=\"'menu'\"\n [ariaExpanded]=\"menuStatus === 'visible'\"\n [ariaControls]=\"id + '_popup'\"\n [ariaActivedescendant]=\"menuStatus === 'visible' ? highlightedItem?.id : null\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"keyNavigate($event)\"\n [autofocus]=\"autofocus\">\n </ec-button>\n @if (showArrow) {\n <span class=\"arrow is-{{buttonType}}\"\n [class.is-disabled]=\"disabled\"\n aria-hidden=\"true\">\n <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\n </span>\n }\n</div>\n\n<ng-template #dropdownMenu>\n <div id=\"{{id}}_popup\"\n class=\"popup\"\n attr.aria-labelledby=\"{{id}}_toggle_button\"\n ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [displayAsMask]=\"true\">\n <!-- Dropdown Menu Title -->\n @if (menuTitle) {\n <header id=\"{{id}}_title\"\n class=\"text-heading-2 px-2 my-2\"\n >{{menuTitle}}\n </header>\n }\n <!-- Dropdown Menu -->\n <ec-menu id=\"{{id}}_menu\"\n [class.wrap-items]=\"menuWidth\"\n [templateType]=\"menuTemplateType\"\n [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\n [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\n [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\n [items]=\"items\"\n [showNoItems]=\"true\"\n [enableKeyNav]=\"true\"\n [highlightedItem]=\"highlightedItem\"\n [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\n rolePattern=\"menu\"\n (selectedChanged)=\"selectedChanged($event)\"\n (highlightedItemChange)=\"highlightedItem = $event\">\n </ec-menu>\n @if (menuFooter) {\n <footer>{{menuFooter}}</footer>\n }\n </div>\n</ng-template>", styles: [":host{display:inline-block;box-sizing:border-box;vertical-align:top}:host(.font-size-inherit) ec-button{font-size:inherit}:host(.font-size-inherit) ec-button ::ng-deep button{font-size:inherit}:host(.fill){display:block;height:100%;width:100%}:host(.fill) .control{display:block;height:100%;width:100%}:host(.fill) .control ec-button{display:block;height:100%;width:100%}:host(.fill) .control ec-button ::ng-deep button{display:block;height:100%;width:100%;display:flex}:host(.fill) ec-menu{min-width:100%}:host(.td-fill){position:absolute;left:0;top:0}:host(.td-fill) ec-button ::ng-deep button{padding-left:.375rem;padding-right:.375rem;font-size:.75rem}:host(.is-action) ec-button,:host(.is-action) .arrow{color:var(--ec-color-interactive)}:host(.is-condensed) ec-button ::ng-deep button{height:1.5rem}:host(.is-condensed) ec-button.has-arrow ::ng-deep button{padding:0 1.125rem 0 .25rem}:host(.is-condensed) ec-button.has-arrow~.arrow{right:.375rem}:host(.d-block) ec-button{display:block}:host(.d-block) ec-button ::ng-deep button{width:100%}:host(.is-pending) .arrow{opacity:0}:host-context(th){color:var(--ec-color-primary-dark)}.control{position:relative}ec-button{display:block}ec-button.has-arrow~.arrow{position:absolute;top:0;right:.5rem;height:100%;display:flex;align-items:center;pointer-events:none;width:.625rem;z-index:1}ec-button.has-arrow~.arrow .ec-icon{color:var(--ec-color-icon);width:auto;transition:color .3s ease}ec-button.has-arrow~.arrow.is-link .ec-icon{color:var(--ec-button-color-text, var(--ec-color-link))}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-primary, var(--ec-color-primary-light))}ec-button.has-arrow~.arrow.is-common .ec-icon,ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-text, var(--ec-color-primary-dark))}ec-button.has-arrow~.arrow.is-disabled .ec-icon{opacity:.5}ec-button.has-arrow.active~.arrow.is-primary .ec-icon,ec-button.has-arrow.active~.arrow.is-secondary .ec-icon,ec-button.has-arrow.active~.arrow.is-text .ec-icon,ec-button.has-arrow.active~.arrow.is-link .ec-icon{color:var(--ec-button-color-active, var(--ec-color-primary-dark))}ec-button.has-arrow ::ng-deep button{width:auto;padding-right:1.25rem}ec-button.has-arrow ::ng-deep button:not(.ec-button-custom){padding-left:.5rem}.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);text-align:start}.popup>header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popup footer{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);border-top:var(--ec-border-width) solid var(--ec-border-color);padding:.1875rem .5rem;line-height:1.2}ec-menu ::ng-deep ul{max-height:50vh}ec-menu ::ng-deep li{white-space:nowrap}ec-menu.wrap-items ::ng-deep li{white-space:normal}\n"] }]
|
|
5747
5998
|
}], ctorParameters: () => [], propDecorators: { id: [{
|
|
5748
5999
|
type: Input
|
|
5749
6000
|
}], autofocus: [{
|
|
@@ -5762,6 +6013,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
5762
6013
|
type: Input
|
|
5763
6014
|
}], buttonTitle: [{
|
|
5764
6015
|
type: Input
|
|
6016
|
+
}], ariaLabel: [{
|
|
6017
|
+
type: Input
|
|
5765
6018
|
}], tabindex: [{
|
|
5766
6019
|
type: Input
|
|
5767
6020
|
}], showArrow: [{
|
|
@@ -6270,7 +6523,7 @@ class FileUploadComponent extends FormControlBase {
|
|
|
6270
6523
|
}
|
|
6271
6524
|
}
|
|
6272
6525
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileUploadComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6273
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FileUploadComponent, isStandalone: false, selector: "ec-file-upload", inputs: { formModel: "formModel", placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", onMultipleFilesSelected: "onMultipleFilesSelected", displayType: "displayType", buttonLabel: "buttonLabel", buttonType: "buttonType", multiSelect: "multiSelect", validateBeforeUpload: "validateBeforeUpload" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ec-form-group [label]=\"label\"\n [formGroup]=\"formModel\"\n [helpPopover]=\"helpPopover\"\n [helpPopoverPosition]=\"helpPopoverPosition\"\n class=\"mb-0\">\n <div class=\"d-flex control-group\">\n <div class=\"d-flex flex-grow position-relative\">\n <input #fileInput\n id=\"{{inputId}}_input\"\n type=\"file\"\n tabindex=\"-1\"\n [attr.accept]=\"fileTypeAccept\"\n (change)=\"fileChange($event.target.files)\"\n [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\n [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\n @if (displayType === 'file') {\n <ec-form-control\n id=\"{{inputId}}_formControl\"\n class=\"text-truncate\"\n [required]=\"required\"\n [pending]=\"pending || formModel?.pending\">\n <input id=\"{{inputId}}_name\"\n [formControl]=\"formModel?.get('name')\"\n type=\"text\"\n [placeholder]=\"placeholder\"\n [tabindex]=\"-1\">\n </ec-form-control>\n }\n </div>\n @if (displayType === 'file') {\n <ec-button\n #browseBtn\n id=\"{{inputId}}_browseBtn\"\n (clicked)=\"fileInput.click()\"\n type=\"secondary\"\n [tabindex]=\"tabindex\"\n [disabled]=\"formModel?.get('name').disabled\"\n label=\"Browse\"\n [autofocus]=\"autofocus\">\n </ec-button>\n }\n </div>\n @if (displayType === 'button') {\n <ec-button\n id=\"{{inputId}}_btn\"\n [pending]=\"pending\"\n [type]=\"buttonType\"\n [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\n (clicked)=\"fileInput.click()\"\n style=\"width: 100%;\">\n </ec-button>\n }\n </ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}input[type=file]:hover{z-index:2}input[type=file]:hover~ec-form-control{z-index:1;border-color:var(--ec-border-color-control-hover)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"], dependencies: [{ kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "tabindex", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: FormGroupComponent, selector: "ec-form-group", inputs: ["id", "label", "formGroup", "labelPosition", "overrideValidationError", "hideValidationMessage", "helpPopover", "helpPopoverPosition"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
6526
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: FileUploadComponent, isStandalone: false, selector: "ec-file-upload", inputs: { formModel: "formModel", placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", onMultipleFilesSelected: "onMultipleFilesSelected", displayType: "displayType", buttonLabel: "buttonLabel", buttonType: "buttonType", multiSelect: "multiSelect", validateBeforeUpload: "validateBeforeUpload" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ec-form-group [label]=\"label\"\n [formGroup]=\"formModel\"\n [helpPopover]=\"helpPopover\"\n [helpPopoverPosition]=\"helpPopoverPosition\"\n class=\"mb-0\">\n <div class=\"d-flex control-group\">\n <div class=\"d-flex flex-grow position-relative\">\n <input #fileInput\n id=\"{{inputId}}_input\"\n type=\"file\"\n tabindex=\"-1\"\n [attr.accept]=\"fileTypeAccept\"\n (change)=\"fileChange($event.target.files)\"\n [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\n [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\n @if (displayType === 'file') {\n <ec-form-control\n id=\"{{inputId}}_formControl\"\n class=\"text-truncate\"\n [required]=\"required\"\n [pending]=\"pending || formModel?.pending\">\n <input id=\"{{inputId}}_name\"\n [formControl]=\"formModel?.get('name')\"\n type=\"text\"\n [placeholder]=\"placeholder\"\n [tabindex]=\"-1\">\n </ec-form-control>\n }\n </div>\n @if (displayType === 'file') {\n <ec-button\n #browseBtn\n id=\"{{inputId}}_browseBtn\"\n (clicked)=\"fileInput.click()\"\n type=\"secondary\"\n [tabindex]=\"tabindex\"\n [disabled]=\"formModel?.get('name').disabled\"\n label=\"Browse\"\n [autofocus]=\"autofocus\">\n </ec-button>\n }\n </div>\n @if (displayType === 'button') {\n <ec-button\n id=\"{{inputId}}_btn\"\n [pending]=\"pending\"\n [type]=\"buttonType\"\n [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\n (clicked)=\"fileInput.click()\"\n style=\"width: 100%;\">\n </ec-button>\n }\n </ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}input[type=file]:hover{z-index:2}input[type=file]:hover~ec-form-control{z-index:1;border-color:var(--ec-border-color-control-hover)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"], dependencies: [{ kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "formModel", "autofocus", "tabindex", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: FormGroupComponent, selector: "ec-form-group", inputs: ["id", "label", "formGroup", "labelPosition", "overrideValidationError", "hideValidationMessage", "helpPopover", "helpPopoverPosition"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
6274
6527
|
}
|
|
6275
6528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
6276
6529
|
type: Component,
|
|
@@ -7719,7 +7972,7 @@ class TablePaginationComponent {
|
|
|
7719
7972
|
});
|
|
7720
7973
|
}
|
|
7721
7974
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TablePaginationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7722
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TablePaginationComponent, isStandalone: false, selector: "ec-table-pagination", inputs: { id: "id", totalItems: "totalItems", pageSize: "pageSize", pageNumber: "pageNumber", maxTabs: "maxTabs", disablePaginationControls: "disablePaginationControls" }, outputs: { pageChanged: "pageChanged" }, host: { classAttribute: "d-flex px-2 align-items-center" }, usesOnChanges: true, ngImport: i0, template: "<ec-tabs id=\"{{id}}_pages\"\n class=\"my-2 is-condensed\"\n [tabGroup]=\"currentTabs\"\n tabStyle=\"tiles\">\n</ec-tabs>\n@if (dropdownItems.length > 1) {\n <ec-dropdown id=\"{{id}}_morePages\"\n class=\"my-1 ml-1\"\n menuTemplateType=\"label\"\n icon=\"icon-more\"\n menuPosition=\"left\"\n [menuMinWidth]=\"80\"\n [showArrow]=\"false\"\n [popupFixed]=\"true\"\n [items]=\"dropdownItems\"\n [disabled]=\"disablePaginationControls\"\n (itemSelected)=\"onItemSelected($event)\">\n </ec-dropdown>\n}", dependencies: [{ kind: "component", type: TabsComponent, selector: "ec-tabs", inputs: ["id", "tabindex", "tabStyle", "tabGroup"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }] }); }
|
|
7975
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TablePaginationComponent, isStandalone: false, selector: "ec-table-pagination", inputs: { id: "id", totalItems: "totalItems", pageSize: "pageSize", pageNumber: "pageNumber", maxTabs: "maxTabs", disablePaginationControls: "disablePaginationControls" }, outputs: { pageChanged: "pageChanged" }, host: { classAttribute: "d-flex px-2 align-items-center" }, usesOnChanges: true, ngImport: i0, template: "<ec-tabs id=\"{{id}}_pages\"\n class=\"my-2 is-condensed\"\n [tabGroup]=\"currentTabs\"\n tabStyle=\"tiles\">\n</ec-tabs>\n@if (dropdownItems.length > 1) {\n <ec-dropdown id=\"{{id}}_morePages\"\n class=\"my-1 ml-1\"\n menuTemplateType=\"label\"\n icon=\"icon-more\"\n menuPosition=\"left\"\n [menuMinWidth]=\"80\"\n [showArrow]=\"false\"\n [popupFixed]=\"true\"\n [items]=\"dropdownItems\"\n [disabled]=\"disablePaginationControls\"\n (itemSelected)=\"onItemSelected($event)\">\n </ec-dropdown>\n}", dependencies: [{ kind: "component", type: TabsComponent, selector: "ec-tabs", inputs: ["id", "tabindex", "tabStyle", "tabGroup"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "ariaLabel", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }] }); }
|
|
7723
7976
|
}
|
|
7724
7977
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TablePaginationComponent, decorators: [{
|
|
7725
7978
|
type: Component,
|
|
@@ -8454,7 +8707,7 @@ class ItemPickerComponent {
|
|
|
8454
8707
|
}
|
|
8455
8708
|
}
|
|
8456
8709
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ItemPickerComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8457
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ItemPickerComponent, isStandalone: false, selector: "ec-item-picker", inputs: { id: "id", availableTitle: "availableTitle", availableTitleHelpPopover: "availableTitleHelpPopover", selectedTitle: "selectedTitle", itemName: "itemName", formModel: "formModel", customAvailableHeaderTemplate: "customAvailableHeaderTemplate", customAvailableItemTemplate: "customAvailableItemTemplate", customSelectedItemTemplate: "customSelectedItemTemplate", ready: "ready", getItems: "getItems", selectionContext: "selectionContext", noDataMessage: "noDataMessage", noSelectedItemsMessage: "noSelectedItemsMessage", enableSelectAllItems: "enableSelectAllItems", selectAllItemsMessage: "selectAllItemsMessage" }, viewQueries: [{ propertyName: "defaultAvailableHeaderTemplate", first: true, predicate: ["defaultAvailableHeaderTemplate"], descendants: true, static: true }, { propertyName: "defaultAvailableItemTemplate", first: true, predicate: ["defaultAvailableItemTemplate"], descendants: true, static: true }, { propertyName: "defaultSelectedItemTemplate", first: true, predicate: ["defaultSelectedItemTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div ecOverlay\n class=\"d-flex flex-grow card\"\n [status]=\"tableStatus?.status\"\n [message]=\"tableStatus?.message\"\n [displayAsMask]=\"true\">\n <ec-searchable-table id=\"{{id}}_searchableTable\"\n class=\"flex-grow\"\n [fillParentHeight]=\"true\"\n [hideHeader]=\"true\"\n [hideSearchControl]=\"true\"\n [removeCard]=\"true\"\n [pageable]=\"true\"\n [pageSize]=\"50\"\n [objectType]=\"itemName\"\n [formModel]=\"formModel\"\n [ready]=\"ready\"\n [getItems]=\"getItems\"\n [selectable]=\"true\"\n [noDataMessage]=\"noDataMessage\"\n [selectionContext]=\"selectionContext\"\n [status]=\"tableStatus\"\n (itemsChange)=\"onItemsChange($event)\"\n [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\n [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\n [tableLayoutFixed]=\"true\"\n [disablePaginationControls]=\"disablePaginationControls\">\n @if (customAvailableHeaderTemplate) {\n <header\n class=\"card-header flex-shrink\"\n style=\"height: 3rem;\">\n <h3 class=\"card-title\">{{availableTitle | translate}}\n @if (availableTitleHelpPopover) {\n <ec-help-popover id=\"availableTitle_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{availableTitleHelpPopover | translate}}\">\n </ec-help-popover>\n }\n </h3>\n </header>\n }\n <thead>\n <tr ecTableSelectableRow\n [selectionContext]=\"selectionContext\"\n class=\"border-bottom-0\">\n <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (item of availableItems; track trackByIndex(rowIndex); let rowIndex = $index) {\n <tr ecTableSelectableRow\n [selectionContext]=\"selectionContext\"\n [rowIndex]=\"rowIndex\"\n [isCheckboxDisabled]=\"item.preventRemove || selectionContext.isSelectingAllItems\"\n [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id) || selectionContext.isSelectingAllItems\"\n [style.--ec-table-selectable-row-vertical-align-checkbox-td]=\"'middle'\">\n <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\n </ng-container>\n </tr>\n }\n </tbody>\n </ec-searchable-table>\n\n <section id=\"{{id}}_selectedItems\"\n class=\"selected-items flex-grow d-flex flex-column\">\n @if (selectionContext.isSelectingAllItems) {\n <div\n class=\"d-flex flex-column flex-grow\">\n <header class=\"d-flex align-items-center px-2 text-heading-2\"\n style=\"height: 3rem;\">\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n @if (selectedItemsClearable) {\n <button\n ecLinkButton\n id=\"{{id}}_clearSelection\"\n class=\"pl-2 ml-auto\"\n (click)=\"onClearSelectionClick()\"\n translate>ClearSelection_TC</button>\n }\n </header>\n <div class=\"text-center border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\n [style.padding-left.rem]=\"4\"\n [style.padding-right.rem]=\"4\"\n [innerHtml]=\"selectAllItemsMessage | translate\"></div>\n </div>\n }\n @if (!selectionContext.isSelectingAllItems) {\n <ec-table\n [scrollable]=\"true\"\n class=\"d-flex flex-grow is-fixed\">\n <colgroup>\n <col>\n <col style=\"width: 2rem;\">\n </colgroup>\n <thead>\n <tr style=\"height: 3rem;\">\n <th colspan=\"2\"\n class=\"p-2 border-bottom-0\">\n <div class=\"d-flex align-items-center text-heading-2\">\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n @if (selectedItemsClearable) {\n <button\n ecLinkButton\n id=\"{{id}}_clearSelection\"\n class=\"pl-2 ml-auto\"\n (click)=\"onClearSelectionClick()\"\n translate>ClearSelection_TC</button>\n }\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n @if (selectedItems.length) {\n @for (item of selectedItems; track item; let isLast = $last) {\n <tr\n id=\"selected_row_{{item.id}}\"\n [class.border-bottom]=\"!isLast\">\n <td class=\"p-2\">\n <ng-container\n *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\n </ng-container>\n </td>\n <td class=\"actions-col text-right\"\n style=\"vertical-align: middle;\">\n @if (!item.preventRemove) {\n <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\n type=\"icon\"\n icon=\"ec-icon icon-cancel\"\n ariaLabel=\"ItemPicker_RemoveItem_SC\"\n (clicked)=\"removeSelectedItem(item)\">\n </ec-button>\n }\n </td>\n </tr>\n }\n }\n @if (!selectedItems.length) {\n <tr>\n @if (!noSelectedItemsMessage) {\n <td\n colspan=\"2\"\n class=\"p-2 no-data-message\"\n translate\n [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\n }\n @if (noSelectedItemsMessage) {\n <td\n colspan=\"2\"\n class=\"p-2 no-data-message\"\n translate>{{noSelectedItemsMessage}}</td>\n }\n </tr>\n }\n </tbody>\n </ec-table>\n }\n\n @if (selectedItems.length && !selectionContext.isSelectingAllItems) {\n <footer id=\"selectedItemsFooter\"\n class=\"d-flex flex-shrink px-2 border-top align-items-center\">\n <div class=\"ml-auto my-2 d-flex align-items-center\"\n style=\"height: 1.75rem;\">\n <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\n </div>\n </footer>\n }\n </section>\n</div>\n\n<ng-template #defaultAvailableHeaderTemplate>\n <th class=\"text-heading-2 font-color-primary border-bottom-0\">\n <div class=\"d-flex align-items-center \">\n @if (!availableCheckboxText) {\n <div>\n <span class=\"text-truncate\">{{availableTitle | translate}}</span>\n @if (availableTitleHelpPopover) {\n <ec-help-popover id=\"availableTitle_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{availableTitleHelpPopover | translate}}\">\n </ec-help-popover>\n }\n </div>\n }\n @if (availableCheckboxText) {\n <span\n id=\"selectedCount\">{{availableCheckboxText}}</span>\n }\n @if (showSelectAllItemsButton) {\n <button\n ecLinkButton\n id=\"selectAllItemsButton\"\n (click)=\"selectAllItems()\"\n class=\"ml-2\">\n {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\n </button>\n }\n </div>\n </th>\n</ng-template>\n\n<ng-template #defaultAvailableItemTemplate\n let-item>\n <td>{{item.label}}</td>\n</ng-template>\n\n<ng-template #defaultSelectedItemTemplate\n let-item>\n {{item.label}}\n</ng-template>", styles: [":host{display:flex}ec-searchable-table{border-right:2px solid var(--ec-border-color)}.selected-items{max-width:var(--ec-item-picker-max-width-selected-items, 50%)}.no-data-message{white-space:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: TableComponent, selector: "ec-table", inputs: ["id", "scrollable", "resizable", "condensed", "sortable", "selectionContext", "selectionToolbarTemplate", "headerTitleTemplate", "selectable", "isForm", "sort", "resizableColumns"], outputs: ["sortChange"] }, { kind: "component", type: SearchableTableComponent, selector: "ec-searchable-table", inputs: ["id", "resizable", "sortable", "sort", "autofocus", "tableClasses", "searchboxPlaceholder", "formModel", "noDataMessage", "noSearchResultsMessage", "ready", "getItems", "refresh", "status", "tableLayoutFixed", "searchboxTabIndex", "maxItemCount", "hideSearchControl", "hideHeader", "objectType", "hideFooter", "pageable", "pageSize", "maxTabs", "searchboxReadonly", "selectionContext", "selectionToolbarTemplate", "headerTitleTemplate", "additionalCountText", "selectable", "customContentTemplate", "removeCard", "overlayClasses", "fillParentHeight", "disablePaginationControls"], outputs: ["sortChange", "pageChange", "itemsChange"] }, { kind: "component", type: TableSelectableRowComponent, selector: "[ecTableSelectableRow]", inputs: ["id", "ecTableSelectableRow", "selectionContext", "rowIndex", "lockedColOptions", "isSelected", "isCheckboxDisabled"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
8710
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ItemPickerComponent, isStandalone: false, selector: "ec-item-picker", inputs: { id: "id", availableTitle: "availableTitle", availableTitleHelpPopover: "availableTitleHelpPopover", selectedTitle: "selectedTitle", itemName: "itemName", formModel: "formModel", customAvailableHeaderTemplate: "customAvailableHeaderTemplate", customAvailableItemTemplate: "customAvailableItemTemplate", customSelectedItemTemplate: "customSelectedItemTemplate", ready: "ready", getItems: "getItems", selectionContext: "selectionContext", noDataMessage: "noDataMessage", noSelectedItemsMessage: "noSelectedItemsMessage", enableSelectAllItems: "enableSelectAllItems", selectAllItemsMessage: "selectAllItemsMessage" }, viewQueries: [{ propertyName: "defaultAvailableHeaderTemplate", first: true, predicate: ["defaultAvailableHeaderTemplate"], descendants: true, static: true }, { propertyName: "defaultAvailableItemTemplate", first: true, predicate: ["defaultAvailableItemTemplate"], descendants: true, static: true }, { propertyName: "defaultSelectedItemTemplate", first: true, predicate: ["defaultSelectedItemTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div ecOverlay\n class=\"d-flex flex-grow card\"\n [status]=\"tableStatus?.status\"\n [message]=\"tableStatus?.message\"\n [displayAsMask]=\"true\">\n <ec-searchable-table id=\"{{id}}_searchableTable\"\n class=\"flex-grow\"\n [fillParentHeight]=\"true\"\n [hideHeader]=\"true\"\n [hideSearchControl]=\"true\"\n [removeCard]=\"true\"\n [pageable]=\"true\"\n [pageSize]=\"50\"\n [objectType]=\"itemName\"\n [formModel]=\"formModel\"\n [ready]=\"ready\"\n [getItems]=\"getItems\"\n [selectable]=\"true\"\n [noDataMessage]=\"noDataMessage\"\n [selectionContext]=\"selectionContext\"\n [status]=\"tableStatus\"\n (itemsChange)=\"onItemsChange($event)\"\n [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\n [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\n [tableLayoutFixed]=\"true\"\n [disablePaginationControls]=\"disablePaginationControls\">\n @if (customAvailableHeaderTemplate) {\n <header\n class=\"card-header flex-shrink\"\n style=\"height: 3rem;\">\n <h3 class=\"card-title\">{{availableTitle | translate}}\n @if (availableTitleHelpPopover) {\n <ec-help-popover id=\"availableTitle_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{availableTitleHelpPopover | translate}}\">\n </ec-help-popover>\n }\n </h3>\n </header>\n }\n <thead>\n <tr ecTableSelectableRow\n [selectionContext]=\"selectionContext\"\n class=\"border-bottom-0\">\n <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></ng-container>\n </tr>\n </thead>\n\n <tbody>\n @for (item of availableItems; track trackByIndex(rowIndex); let rowIndex = $index) {\n <tr ecTableSelectableRow\n [selectionContext]=\"selectionContext\"\n [rowIndex]=\"rowIndex\"\n [isCheckboxDisabled]=\"item.preventRemove || selectionContext.isSelectingAllItems\"\n [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id) || selectionContext.isSelectingAllItems\"\n [style.--ec-table-selectable-row-vertical-align-checkbox-td]=\"'middle'\">\n <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\n </ng-container>\n </tr>\n }\n </tbody>\n </ec-searchable-table>\n\n <section id=\"{{id}}_selectedItems\"\n class=\"selected-items flex-grow d-flex flex-column\">\n @if (selectionContext.isSelectingAllItems) {\n <div\n class=\"d-flex flex-column flex-grow\">\n <header class=\"d-flex align-items-center px-2 text-heading-2\"\n style=\"height: 3rem;\">\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n @if (selectedItemsClearable) {\n <button\n ecLinkButton\n id=\"{{id}}_clearSelection\"\n class=\"pl-2 ml-auto\"\n (click)=\"onClearSelectionClick()\"\n translate>ClearSelection_TC</button>\n }\n </header>\n <div class=\"text-center border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\n [style.padding-left.rem]=\"4\"\n [style.padding-right.rem]=\"4\"\n [innerHtml]=\"selectAllItemsMessage | translate\"></div>\n </div>\n }\n @if (!selectionContext.isSelectingAllItems) {\n <ec-table\n [scrollable]=\"true\"\n class=\"d-flex flex-grow is-fixed\">\n <colgroup>\n <col>\n <col style=\"width: 2rem;\">\n </colgroup>\n <thead>\n <tr style=\"height: 3rem;\">\n <th colspan=\"2\"\n class=\"p-2 border-bottom-0\">\n <div class=\"d-flex align-items-center text-heading-2\">\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\n @if (selectedItemsClearable) {\n <button\n ecLinkButton\n id=\"{{id}}_clearSelection\"\n class=\"pl-2 ml-auto\"\n (click)=\"onClearSelectionClick()\"\n translate>ClearSelection_TC</button>\n }\n </div>\n </th>\n </tr>\n </thead>\n <tbody>\n @if (selectedItems.length) {\n @for (item of selectedItems; track item; let isLast = $last) {\n <tr\n id=\"selected_row_{{item.id}}\"\n [class.border-bottom]=\"!isLast\">\n <td class=\"p-2\">\n <ng-container\n *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\n </ng-container>\n </td>\n <td class=\"actions-col text-right\"\n style=\"vertical-align: middle;\">\n @if (!item.preventRemove) {\n <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\n type=\"icon\"\n icon=\"ec-icon icon-cancel\"\n ariaLabel=\"ItemPicker_RemoveItem_SC\"\n (clicked)=\"removeSelectedItem(item)\">\n </ec-button>\n }\n </td>\n </tr>\n }\n }\n @if (!selectedItems.length) {\n <tr>\n @if (!noSelectedItemsMessage) {\n <td\n colspan=\"2\"\n class=\"p-2 no-data-message\"\n translate\n [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\n }\n @if (noSelectedItemsMessage) {\n <td\n colspan=\"2\"\n class=\"p-2 no-data-message\"\n translate>{{noSelectedItemsMessage}}</td>\n }\n </tr>\n }\n </tbody>\n </ec-table>\n }\n\n @if (selectedItems.length && !selectionContext.isSelectingAllItems) {\n <footer id=\"selectedItemsFooter\"\n class=\"d-flex flex-shrink px-2 border-top align-items-center\">\n <div class=\"ml-auto my-2 d-flex align-items-center\"\n style=\"height: 1.75rem;\">\n <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\n </div>\n </footer>\n }\n </section>\n</div>\n\n<ng-template #defaultAvailableHeaderTemplate>\n <th class=\"text-heading-2 font-color-primary border-bottom-0\">\n <div class=\"d-flex align-items-center \">\n @if (!availableCheckboxText) {\n <div>\n <span class=\"text-truncate\">{{availableTitle | translate}}</span>\n @if (availableTitleHelpPopover) {\n <ec-help-popover id=\"availableTitle_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{availableTitleHelpPopover | translate}}\">\n </ec-help-popover>\n }\n </div>\n }\n @if (availableCheckboxText) {\n <span\n id=\"selectedCount\">{{availableCheckboxText}}</span>\n }\n @if (showSelectAllItemsButton) {\n <button\n ecLinkButton\n id=\"selectAllItemsButton\"\n (click)=\"selectAllItems()\"\n class=\"ml-2\">\n {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\n </button>\n }\n </div>\n </th>\n</ng-template>\n\n<ng-template #defaultAvailableItemTemplate\n let-item>\n <td>{{item.label}}</td>\n</ng-template>\n\n<ng-template #defaultSelectedItemTemplate\n let-item>\n {{item.label}}\n</ng-template>", styles: [":host{display:flex}ec-searchable-table{border-right:2px solid var(--ec-border-color)}.selected-items{max-width:var(--ec-item-picker-max-width-selected-items, 50%)}.no-data-message{white-space:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: TableComponent, selector: "ec-table", inputs: ["id", "scrollable", "resizable", "condensed", "sortable", "selectionContext", "selectionToolbarTemplate", "headerTitleTemplate", "selectable", "isForm", "sort", "resizableColumns"], outputs: ["sortChange"] }, { kind: "component", type: SearchableTableComponent, selector: "ec-searchable-table", inputs: ["id", "resizable", "sortable", "sort", "autofocus", "tableClasses", "searchboxPlaceholder", "formModel", "noDataMessage", "noSearchResultsMessage", "ready", "getItems", "refresh", "status", "tableLayoutFixed", "searchboxTabIndex", "maxItemCount", "hideSearchControl", "hideHeader", "objectType", "hideFooter", "pageable", "pageSize", "maxTabs", "searchboxReadonly", "selectionContext", "selectionToolbarTemplate", "headerTitleTemplate", "additionalCountText", "selectable", "customContentTemplate", "removeCard", "overlayClasses", "fillParentHeight", "disablePaginationControls"], outputs: ["sortChange", "pageChange", "itemsChange"] }, { kind: "component", type: TableSelectableRowComponent, selector: "[ecTableSelectableRow]", inputs: ["id", "ecTableSelectableRow", "selectionContext", "rowIndex", "lockedColOptions", "isSelected", "isCheckboxDisabled"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
8458
8711
|
}
|
|
8459
8712
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ItemPickerComponent, decorators: [{
|
|
8460
8713
|
type: Component,
|
|
@@ -9285,7 +9538,7 @@ class MultiselectComponent extends FormControlBase {
|
|
|
9285
9538
|
});
|
|
9286
9539
|
}
|
|
9287
9540
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MultiselectComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9288
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MultiselectComponent, isStandalone: false, selector: "ec-multiselect", inputs: { options: "options", menuPosition: "menuPosition", popupFixed: "popupFixed", placeholder: "placeholder", tagType: "tagType", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", allowCustom: "allowCustom", maxSelections: "maxSelections" }, outputs: { search: "search", selectionChanged: "selectionChanged" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkboxMenuTemplate", first: true, predicate: ["checkboxMenuTemplate"], descendants: true, static: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled}\">\n\n @if (label) {\n <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span> {{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"textbox-group control-input\"\n *ecPopup=\"dropdownmenu\">\n <div class=\"multiselect-input\"\n [attr.id]=\"id + '_input_container'\"\n role=\"combobox\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n aria-haspopup=\"listbox\"\n [attr.aria-owns]=\"id + '_menu_list'\"\n [class.is-focused]=\"menuStatus === 'visible'\"\n [class.is-disabled]=\"formModel.disabled\"\n [class.is-empty]=\"selectedItems.length === 0\"\n [class.is-required]=\"required\"\n [class.has-selections]=\"selectedItems.length > 0\"\n (click)=\"toggleMenu($event)\">\n\n <!-- Selected tags -->\n @if (selectedTags.length > 0) {\n <ec-tags\n id=\"{{id}}_tags\"\n [tags]=\"selectedTags\"\n [wrap]=\"true\"\n [isCondensed]=\"false\"\n [isSubtle]=\"true\"\n (tagClosed)=\"removeTag($event)\"\n (click)=\"$event.stopPropagation()\">\n </ec-tags>\n }\n\n <!-- Filter input -->\n <input\n #filterInput\n class=\"multiselect-filter-input\"\n type=\"text\"\n [id]=\"id + '_filter'\"\n [formControl]=\"filterFormModel\"\n [placeholder]=\"effectivePlaceholder\"\n [tabindex]=\"tabindex\"\n (input)=\"onFilterInput()\"\n (keydown)=\"keyNavigate($event)\"\n (focusout)=\"onBlur()\"\n (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\n [attr.aria-activedescendant]=\"activeDescendantId\"\n [attr.aria-labelledby]=\"label ? id + '_label' : null\"\n [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\n [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\n\n <i class=\"ec-icon icon-required\"></i>\n <i class=\"ec-icon icon-invalid\"></i>\n </div>\n\n <!-- Live region for selection announcements -->\n <span [id]=\"id + '_selection_status'\"\n class=\"sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\">\n {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\n </span>\n\n <!-- Clear button -->\n @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\n <ec-button class=\"multiselect-clear-btn\"\n [id]=\"id + '_clear'\"\n icon=\"icon-cancel\"\n type=\"secondary\"\n [tabindex]=\"0\"\n attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\n (click)=\"clearAll(); $event.stopPropagation()\">\n </ec-button>\n }\n\n <!-- Toggle button -->\n <ec-button class=\"textbox-group-btn-right\"\n [id]=\"id + '_button'\"\n [disabled]=\"formModel.disabled\"\n icon=\"icon-caret-down\"\n [tabindex]=\"0\"\n type=\"secondary\"\n [attr.aria-label]=\"'Toggle dropdown'\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n (click)=\"toggleMenu($event)\"\n [class.active]=\"menuStatus === 'visible'\">\n </ec-button>\n </div>\n</div>\n\n<ng-template #dropdownmenu>\n <div class=\"popup\"\n ecOverlay\n role=\"listbox\"\n [attr.id]=\"id + '_listbox'\"\n [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\n aria-multiselectable=\"true\"\n [status]=\"pending ? 'pending' : 'hasData'\">\n\n <ec-menu id=\"{{id}}_menu\"\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\n [templateType]=\"'checkAndLabel'\"\n [customMenuTemplate]=\"checkboxMenuTemplate\"\n [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\n [noDataText]=\"noMatchesText\"\n [items]=\"filteredOptions\"\n [selected]=\"highlightedItem\"\n (selectedChanged)=\"onItemSelected($event)\"\n [truncateItems]=\"truncateItems\"\n [maintainSelectedItem]=\"false\">\n </ec-menu>\n\n @if (showAddCustomOption) {\n <div class=\"add-custom-option\"\n role=\"option\"\n attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\n tabindex=\"-1\"\n (click)=\"addCustomItem()\">\n <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\n <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n <div class=\"d-flex\"\n role=\"option\"\n [attr.aria-selected]=\"!!item.checked\"\n [attr.aria-label]=\"item.label\">\n @if (item === selectAllItem) {\n <ec-checkbox\n id=\"{{id}}_selectAll_checkbox\"\n class=\"m-0 pr-3\"\n [formModel]=\"selectAllFormControl\"\n [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\n [label]=\"item.label\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <ec-checkbox\n id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n class=\"m-0 pr-3\"\n [formModel]=\"getCheckboxFormControl(item)\"\n [attr.aria-label]=\"item.label\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n <span>{{item.label}}</span>\n }\n }\n </div>\n</ng-template>\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right:1px solid var(--ec-form-control-border-color-readonly);border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius);background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly);cursor:default}.control.is-readonly .multiselect-input .multiselect-filter-input{color:var(--ec-form-control-color-readonly)}.control.is-readonly .multiselect-input .multiselect-filter-input::placeholder{color:var(--ec-form-control-color-readonly)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin:0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button:hover{background-color:var(--ec-background-color-hover)}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText"], outputs: ["tagClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
9541
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MultiselectComponent, isStandalone: false, selector: "ec-multiselect", inputs: { options: "options", menuPosition: "menuPosition", popupFixed: "popupFixed", placeholder: "placeholder", tagType: "tagType", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems", allowCustom: "allowCustom", maxSelections: "maxSelections" }, outputs: { search: "search", selectionChanged: "selectionChanged" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "checkboxMenuTemplate", first: true, predicate: ["checkboxMenuTemplate"], descendants: true, static: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\n [ngClass]=\"{'invalid': formModel.touched && formModel.invalid,\n 'is-readonly': readonly,\n 'is-disabled': formModel.disabled}\">\n\n @if (label) {\n <label [attr.id]=\"id + '_label'\" [attr.for]=\"id + '_filter'\">\n <span>{{label | translate}}</span>\n @if (validationErrors.length > 0 && formModel.touched && formModel.invalid) {\n <span> {{validationErrors}}</span>\n }\n @if (helpPopover) {\n <ec-help-popover id=\"{{id}}_helpPopover\"\n class=\"d-inline-block my-n3 mx-n1\"\n text=\"{{helpPopover | translate}}\"\n contentPosition=\"{{helpPopoverPosition}}\">\n </ec-help-popover>\n }\n </label>\n }\n\n <div class=\"textbox-group control-input\"\n *ecPopup=\"dropdownmenu\">\n <div class=\"multiselect-input\"\n [attr.id]=\"id + '_input_container'\"\n role=\"combobox\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n aria-haspopup=\"listbox\"\n [attr.aria-owns]=\"id + '_menu_list'\"\n [class.is-focused]=\"menuStatus === 'visible'\"\n [class.is-disabled]=\"formModel.disabled\"\n [class.is-empty]=\"selectedItems.length === 0\"\n [class.is-required]=\"required\"\n [class.has-selections]=\"selectedItems.length > 0\"\n (click)=\"toggleMenu($event)\">\n\n <!-- Selected tags -->\n @if (selectedTags.length > 0) {\n <ec-tags\n id=\"{{id}}_tags\"\n [tags]=\"selectedTags\"\n [wrap]=\"true\"\n [isCondensed]=\"false\"\n [isSubtle]=\"true\"\n (tagClosed)=\"removeTag($event)\"\n (click)=\"$event.stopPropagation()\">\n </ec-tags>\n }\n\n <!-- Filter input -->\n <input\n #filterInput\n class=\"multiselect-filter-input\"\n type=\"text\"\n [id]=\"id + '_filter'\"\n [formControl]=\"filterFormModel\"\n [placeholder]=\"effectivePlaceholder\"\n [tabindex]=\"tabindex\"\n (input)=\"onFilterInput()\"\n (keydown)=\"keyNavigate($event)\"\n (focusout)=\"onBlur()\"\n (click)=\"menuStatus === 'visible' ? $event.stopPropagation() : null\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"menuStatus === 'visible' ? id + '_menu_list' : null\"\n [attr.aria-activedescendant]=\"activeDescendantId\"\n [attr.aria-labelledby]=\"label ? id + '_label' : null\"\n [attr.aria-label]=\"!label ? effectivePlaceholder : null\"\n [attr.aria-describedby]=\"selectedItems.length > 0 ? id + '_selection_status' : null\" />\n\n <i class=\"ec-icon icon-required\"></i>\n <i class=\"ec-icon icon-invalid\"></i>\n </div>\n\n <!-- Live region for selection announcements -->\n <span [id]=\"id + '_selection_status'\"\n class=\"sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\">\n {{ 'Multiselect_LiveRegion_Status_SC' | translate:{ count: selectedItems.length } }}\n </span>\n\n <!-- Clear button -->\n @if (selectedItems.length > 0 && !formModel.disabled && !readonly) {\n <ec-button class=\"multiselect-clear-btn\"\n [id]=\"id + '_clear'\"\n icon=\"icon-cancel\"\n type=\"secondary\"\n [tabindex]=\"0\"\n attr.aria-label=\"{{'ClearAllSelections_SC' | translate}}\"\n (click)=\"clearAll(); $event.stopPropagation()\">\n </ec-button>\n }\n\n <!-- Toggle button -->\n <ec-button class=\"textbox-group-btn-right\"\n [id]=\"id + '_button'\"\n [disabled]=\"formModel.disabled\"\n icon=\"icon-caret-down\"\n [tabindex]=\"0\"\n type=\"secondary\"\n [attr.aria-label]=\"'Toggle dropdown'\"\n [attr.aria-expanded]=\"menuStatus === 'visible'\"\n (click)=\"toggleMenu($event)\"\n [class.active]=\"menuStatus === 'visible'\">\n </ec-button>\n </div>\n</div>\n\n<ng-template #dropdownmenu>\n <div class=\"popup\"\n ecOverlay\n role=\"listbox\"\n [attr.id]=\"id + '_listbox'\"\n [attr.aria-label]=\"label ? (label | translate) : effectivePlaceholder\"\n aria-multiselectable=\"true\"\n [status]=\"pending ? 'pending' : 'hasData'\">\n\n <ec-menu id=\"{{id}}_menu\"\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches && !showAddCustomOption\"\n [templateType]=\"'checkAndLabel'\"\n [customMenuTemplate]=\"checkboxMenuTemplate\"\n [showNoItems]=\"!hideNoMatches && !showAddCustomOption\"\n [noDataText]=\"noMatchesText\"\n [items]=\"filteredOptions\"\n [selected]=\"highlightedItem\"\n (selectedChanged)=\"onItemSelected($event)\"\n [truncateItems]=\"truncateItems\"\n [maintainSelectedItem]=\"false\">\n </ec-menu>\n\n @if (showAddCustomOption) {\n <div class=\"add-custom-option\"\n role=\"option\"\n attr.aria-label=\"{{'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}\"\n tabindex=\"-1\"\n (click)=\"addCustomItem()\">\n <i class=\"ec-icon icon-plus pr-2\" aria-hidden=\"true\"></i>\n <span class=\"label\">{{ 'AddCustomItem_TC' | translate:{ customItem: filterFormModel.value } }}</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Custom checkbox menu item template -->\n<ng-template #checkboxMenuTemplate let-item>\n <div class=\"d-flex\"\n role=\"option\"\n [attr.aria-selected]=\"!!item.checked\"\n [attr.aria-label]=\"item.label\">\n @if (item === selectAllItem) {\n <ec-checkbox\n id=\"{{id}}_selectAll_checkbox\"\n class=\"m-0 pr-3\"\n [formModel]=\"selectAllFormControl\"\n [dependentCheckboxesGroup]=\"selectAllDependentGroup\"\n [label]=\"item.label\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n @if (item.display !== 'heading' && item.display !== 'heading-divided-section') {\n <ec-checkbox\n id=\"{{item.id || id + '_checkbox_' + item.label}}\"\n class=\"m-0 pr-3\"\n [formModel]=\"getCheckboxFormControl(item)\"\n [attr.aria-label]=\"item.label\"\n [label]=\"item.label\"\n [icon]=\"item.icon\"\n (click)=\"$event.stopPropagation()\">\n </ec-checkbox>\n } @else {\n <span>{{item.label}}</span>\n }\n }\n </div>\n</ng-template>\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:hover:not(:disabled):not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:hover:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.control.invalid .multiselect-input{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid)}.control.invalid .multiselect-input.is-focused{border-color:var(--ec-form-control-background-color-invalid)}.control.invalid .multiselect-input .icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.control.invalid .multiselect-input .icon-required{display:none}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control.invalid:not(.open) .multiselect-clear-btn ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}.control.invalid:not(.open) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .multiselect-clear-btn ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control.invalid:not(.open) .textbox-group:hover .textbox-group-btn-right ::ng-deep button:not(:disabled):not(:focus){border-color:var(--ec-form-control-border-color-hover)}.control{position:relative}.control.is-disabled:not(.is-readonly) .multiselect-input{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);pointer-events:none}.control.is-readonly .multiselect-input{border-right:1px solid var(--ec-form-control-border-color-readonly);border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius);background-color:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly);color:var(--ec-form-control-color-readonly);cursor:default}.control.is-readonly .multiselect-input .multiselect-filter-input{color:var(--ec-form-control-color-readonly)}.control.is-readonly .multiselect-input .multiselect-filter-input::placeholder{color:var(--ec-form-control-color-readonly)}.control.is-readonly ec-button{display:none}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-input:not(.is-focused){border-color:var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover .multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}.control:not(.is-disabled):not(.is-readonly) .textbox-group:hover ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color-hover)}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.textbox-group{align-items:stretch}.multiselect-input{display:flex;flex-wrap:wrap;align-items:center;min-height:2rem;max-height:6rem;overflow-y:auto;padding:0 .5rem;background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:var(--ec-border-radius);border-right:0;cursor:text;flex:1 1;box-sizing:border-box;position:relative}.multiselect-input .icon-required,.multiselect-input .icon-invalid{display:none;color:var(--ec-form-control-border-color-invalid)}.multiselect-input.is-required.is-empty{padding-left:1.75rem}.multiselect-input.is-required.is-empty .icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}.multiselect-input.is-focused{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);z-index:1}.multiselect-filter-input{border:0;outline:none;background:transparent;flex:1 1 100%;min-width:4rem;height:1.625rem;padding:0;font-size:var(--ec-form-control-font-size);color:var(--ec-form-control-color);line-height:1.25rem;overflow:hidden;text-overflow:ellipsis}.multiselect-filter-input::placeholder{color:var(--ec-form-control-color-placeholder);text-overflow:ellipsis}.has-selections:not(.is-focused) .multiselect-filter-input{width:0;min-width:0;flex:0 0 0;height:0;overflow:hidden;padding:0;margin:0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}ec-menu ::ng-deep ul li.is-checked .icon-check{opacity:1;color:var(--ec-color-interactive)}ec-menu ::ng-deep ul li.select-all-item{font-weight:600}.multiselect-clear-btn{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.multiselect-clear-btn ::ng-deep button{height:100%;border-left:0;border-right:0;border-radius:0;padding:0 .375rem}.multiselect-clear-btn ::ng-deep button:hover{background-color:var(--ec-background-color-hover)}.multiselect-clear-btn ::ng-deep button .ec-icon{font-size:.75rem}ec-button.textbox-group-btn-right{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button.textbox-group-btn-right ::ng-deep button{height:100%;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.open .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}.add-custom-option{display:flex;align-items:center;padding:.5rem .75rem;cursor:pointer;border-top:1px solid var(--ec-form-control-border-color, #ccc);color:var(--ec-color-text);font-size:.875rem}.add-custom-option:hover{background-color:var(--ec-color-background-hover, #f5f5f5)}.add-custom-option .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "component", type: TagsComponent, selector: "ec-tags", inputs: ["id", "tags", "wrap", "isCondensed", "isSubtle", "highlightText"], outputs: ["tagClosed"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
9289
9542
|
}
|
|
9290
9543
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MultiselectComponent, decorators: [{
|
|
9291
9544
|
type: Component,
|
|
@@ -10031,7 +10284,7 @@ class AppBarComponent {
|
|
|
10031
10284
|
this.menuItems = [...this.userItem, ...this.userMenuItems];
|
|
10032
10285
|
}
|
|
10033
10286
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AppBarComponent, deps: [{ token: AvatarService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10034
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: AppBarComponent, isStandalone: false, selector: "ec-app-bar", inputs: { user: "user", userMenuItems: "userMenuItems", userMenuWidth: "userMenuWidth", userMenuMinWidth: "userMenuMinWidth", userMenuTabindex: "userMenuTabindex", iconPath: "iconPath", iconLink: "iconLink", hideAppIcon: "hideAppIcon" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"logo-container\">\n @if(!hideAppIcon) {\n @if(iconLink) {\n <a [routerLink]=\"iconLink\" class=\"app-bar-icon-link\">\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n </a>\n } @else {\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n }\n }\n <ng-content select=\".app-bar-logo\"></ng-content>\n</section>\n\n<section class=\"title-container\">\n <ng-content select=\".app-bar-title\"></ng-content>\n</section>\n\n<section class=\"actions-container\">\n <ng-content select=\".app-bar-actions\"></ng-content>\n <ng-template #avatar>\n <ec-avatar [user]=\"user\"></ec-avatar>\n </ng-template>\n @if (userMenuItems.length) {\n <ec-dropdown id=\"AppBarUserMenu\"\n [items]=\"menuItems\"\n [buttonCustomTemplate]=\"avatar\"\n [showArrow]=\"false\"\n [menuWidth]=\"userMenuWidth\"\n [menuMinWidth]=\"userMenuMinWidth\"\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\n } @else {\n <ng-container *ngTemplateOutlet=\"avatar\"></ng-container>\n }\n</section>\n\n", styles: [":host{display:flex;height:3rem;align-items:center;width:100%;padding:0 .75rem 0 1rem;background-color:var(--ec-background-color);position:relative;z-index:var(--ec-z-index-navbar)}:host ::ng-deep .app-bar-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{width:2rem;height:2rem}.app-bar-icon-link{display:flex;align-items:center}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}#AppBarUserMenu ::ng-deep ec-button{--ec-border-radius: 50%}#AppBarUserMenu ::ng-deep ec-button.active>.ec-button-custom{background-color:transparent;border-color:var(--ec-color-primary-light)}#AppBarUserMenu ::ng-deep ec-button .ec-button-custom:focus{background-color:var(--ec-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: AvatarComponent, selector: "ec-avatar", inputs: ["user"] }] }); }
|
|
10287
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: AppBarComponent, isStandalone: false, selector: "ec-app-bar", inputs: { user: "user", userMenuItems: "userMenuItems", userMenuWidth: "userMenuWidth", userMenuMinWidth: "userMenuMinWidth", userMenuTabindex: "userMenuTabindex", iconPath: "iconPath", iconLink: "iconLink", hideAppIcon: "hideAppIcon" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"logo-container\">\n @if(!hideAppIcon) {\n @if(iconLink) {\n <a [routerLink]=\"iconLink\" class=\"app-bar-icon-link\">\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n </a>\n } @else {\n <img src=\"{{iconPath}}\" alt=\"EnergyCAP Platform\">\n }\n }\n <ng-content select=\".app-bar-logo\"></ng-content>\n</section>\n\n<section class=\"title-container\">\n <ng-content select=\".app-bar-title\"></ng-content>\n</section>\n\n<section class=\"actions-container\">\n <ng-content select=\".app-bar-actions\"></ng-content>\n <ng-template #avatar>\n <ec-avatar [user]=\"user\"></ec-avatar>\n </ng-template>\n @if (userMenuItems.length) {\n <ec-dropdown id=\"AppBarUserMenu\"\n [items]=\"menuItems\"\n [buttonCustomTemplate]=\"avatar\"\n [showArrow]=\"false\"\n [menuWidth]=\"userMenuWidth\"\n [menuMinWidth]=\"userMenuMinWidth\"\n [tabindex]=\"userMenuTabindex\"></ec-dropdown>\n } @else {\n <ng-container *ngTemplateOutlet=\"avatar\"></ng-container>\n }\n</section>\n\n", styles: [":host{display:flex;height:3rem;align-items:center;width:100%;padding:0 .75rem 0 1rem;background-color:var(--ec-background-color);position:relative;z-index:var(--ec-z-index-navbar)}:host ::ng-deep .app-bar-actions{display:flex;align-items:center;justify-content:flex-end;margin-right:.25rem}section{flex:1 1}.logo-container img{width:2rem;height:2rem}.app-bar-icon-link{display:flex;align-items:center}.title-container{text-align:center}.actions-container{display:flex;justify-content:flex-end}#AppBarUserMenu ::ng-deep ec-button{--ec-border-radius: 50%}#AppBarUserMenu ::ng-deep ec-button.active>.ec-button-custom{background-color:transparent;border-color:var(--ec-color-primary-light)}#AppBarUserMenu ::ng-deep ec-button .ec-button-custom:focus{background-color:var(--ec-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "ariaLabel", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: AvatarComponent, selector: "ec-avatar", inputs: ["user"] }] }); }
|
|
10035
10288
|
}
|
|
10036
10289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AppBarComponent, decorators: [{
|
|
10037
10290
|
type: Component,
|
|
@@ -10195,7 +10448,7 @@ class ConfirmComponent {
|
|
|
10195
10448
|
});
|
|
10196
10449
|
}
|
|
10197
10450
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10198
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ConfirmComponent, isStandalone: false, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [action]=\"status?.action\"\n [noDataTemplate]=\"inlineConfirmResult\"\n overlayClassList=\"p-0\"\n class=\"bg-body flex-grow d-flex\">\n <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\n <section class=\"flex-grow\">\n @if (context?.title) {\n <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\n }\n @if (error) {\n <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\n }\n @if (context?.message) {\n <div [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\n }\n\n @if (context?.checkConfirm) {\n <ec-checkbox\n [formModel]=\"formGroup.get('checkbox')\"\n name=\"confirmCheckbox\"\n [label]=\"context?.checkboxText\"\n [autofocus]=\"true\"\n ></ec-checkbox>\n }\n @if (showTextBox) {\n <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\n }\n @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\n <ec-textbox id=\"confirmTextbox\"\n [autofocus]=\"true\"\n [formModel]=\"formGroup.get('textbox')\"\n [required]=\"context?.textboxRequired\"\n [label]=\"context?.textboxLabel\"\n [type]=\"context?.textboxType\"\n [rows]=\"context?.textareaRows\"\n [placeholder]=\"context?.textboxPlaceholder\"\n [upperCase]=\"context?.textboxUppercase\">\n </ec-textbox>\n }\n </section>\n <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\n <ec-button id=\"saveConfirmButton\"\n class=\"ml-2\"\n [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\n [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\n [autofocus]=\"!context?.textboxType\"\n [isSubmit]=\"context?.saveOnEnter\"\n (clicked)=\"onSave('primary')\">\n </ec-button>\n @if (context?.alternateSaveLabel) {\n <ec-button id=\"alternateSaveConfirmButton\"\n class=\"ml-2\"\n [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\n [label]=\"context?.alternateSaveLabel\"\n (clicked)=\"onSave('alternate')\">\n </ec-button>\n }\n @if (!context?.hideCancel) {\n <ec-button\n id=\"cancelConfirmButton\"\n class=\"ml-auto\"\n type=\"secondary\"\n [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\n (clicked)=\"onCancel()\">\n </ec-button>\n }\n </footer>\n </form>\n</section>\n\n<ng-template #inlineConfirmResult>\n <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\n <div class=\"d-flex\">\n <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\n <div [innerHTML]=\"status?.message | translate\"></div>\n </div>\n <div class=\"d-flex pt-2 mt-auto\">\n <ec-button id=\"inlineConfirmClose\"\n label=\"Close\"\n type=\"secondary\"\n class=\"ml-auto\"\n (clicked)=\"status?.action?.onClick!()\"\n [autofocus]=\"true\">\n </ec-button>\n </div>\n </section>\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"], dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
10451
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ConfirmComponent, isStandalone: false, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [action]=\"status?.action\"\n [noDataTemplate]=\"inlineConfirmResult\"\n overlayClassList=\"p-0\"\n class=\"bg-body flex-grow d-flex\">\n <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\n <section class=\"flex-grow\">\n @if (context?.title) {\n <h2 class=\"font-weight-bold mb-3\">{{context?.title}}</h2>\n }\n @if (error) {\n <ec-banner [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\n }\n @if (context?.message) {\n <div [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\n }\n\n @if (context?.checkConfirm) {\n <ec-checkbox\n [formModel]=\"formGroup.get('checkbox')\"\n name=\"confirmCheckbox\"\n [label]=\"context?.checkboxText\"\n [autofocus]=\"true\"\n ></ec-checkbox>\n }\n @if (showTextBox) {\n <div [innerHtml]=\"context.confirmLabel\" class=\"mb-3\"></div>\n }\n @if ((context?.textboxType && !context?.checkConfirm) || showTextBox) {\n <ec-textbox id=\"confirmTextbox\"\n [autofocus]=\"true\"\n [formModel]=\"formGroup.get('textbox')\"\n [required]=\"context?.textboxRequired\"\n [label]=\"context?.textboxLabel\"\n [type]=\"context?.textboxType\"\n [rows]=\"context?.textareaRows\"\n [placeholder]=\"context?.textboxPlaceholder\"\n [upperCase]=\"context?.textboxUppercase\">\n </ec-textbox>\n }\n </section>\n <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\n <ec-button id=\"saveConfirmButton\"\n class=\"ml-2\"\n [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\n [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\n [autofocus]=\"!context?.textboxType\"\n [isSubmit]=\"context?.saveOnEnter\"\n (clicked)=\"onSave('primary')\">\n </ec-button>\n @if (context?.alternateSaveLabel) {\n <ec-button id=\"alternateSaveConfirmButton\"\n class=\"ml-2\"\n [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\n [label]=\"context?.alternateSaveLabel\"\n (clicked)=\"onSave('alternate')\">\n </ec-button>\n }\n @if (!context?.hideCancel) {\n <ec-button\n id=\"cancelConfirmButton\"\n class=\"ml-auto\"\n type=\"secondary\"\n [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\n (clicked)=\"onCancel()\">\n </ec-button>\n }\n </footer>\n </form>\n</section>\n\n<ng-template #inlineConfirmResult>\n <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\n <div class=\"d-flex\">\n <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\n <div [innerHTML]=\"status?.message | translate\"></div>\n </div>\n <div class=\"d-flex pt-2 mt-auto\">\n <ec-button id=\"inlineConfirmClose\"\n label=\"Close\"\n type=\"secondary\"\n class=\"ml-auto\"\n (clicked)=\"status?.action?.onClick!()\"\n [autofocus]=\"true\">\n </ec-button>\n </div>\n </section>\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"], dependencies: [{ kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: CheckboxComponent, selector: "ec-checkbox", inputs: ["name", "icon", "dependentCheckboxesGroup", "ignoreDisabledDependents"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
10199
10452
|
}
|
|
10200
10453
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ConfirmComponent, decorators: [{
|
|
10201
10454
|
type: Component,
|
|
@@ -11013,7 +11266,7 @@ class JsonDisplayComponent {
|
|
|
11013
11266
|
}
|
|
11014
11267
|
}
|
|
11015
11268
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: JsonDisplayComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11016
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: JsonDisplayComponent, isStandalone: false, selector: "ec-json-display", inputs: { id: "id", jsonString: "jsonString", maxLength: "maxLength" }, host: { properties: { "attr.id": "this.attrId" } }, usesOnChanges: true, ngImport: i0, template: "@if (jsonDisplay.value) {\n <ec-button id=\"{{id}}_copy\"\n class=\"copy-button\"\n type=\"icon\"\n icon=\"icon-copy\"\n ariaLabel=\"JsonDisplay_CopyButton_SC\"\n [ecCopyButton]=\"jsonDisplay\">\n </ec-button>\n}\n<pre><code>{{jsonDisplay.value}}</code></pre>", styles: [":host{display:block;position:relative;color:var(--ec-color-primary-light);background:#354751;max-height:15rem;min-height:2.125rem;font-size:var(--ec-font-size-label);border-radius:var(--ec-border-radius-card);overflow-x:auto;overflow-y:auto;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:var(--ec-color-secondary-light)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:var(--ec-color-primary-light)!important}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "directive", type: CopyButtonDirective, selector: "[ecCopyButton]", inputs: ["ecCopyButton"] }] }); }
|
|
11269
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: JsonDisplayComponent, isStandalone: false, selector: "ec-json-display", inputs: { id: "id", jsonString: "jsonString", maxLength: "maxLength" }, host: { properties: { "attr.id": "this.attrId" } }, usesOnChanges: true, ngImport: i0, template: "@if (jsonDisplay.value) {\n <ec-button id=\"{{id}}_copy\"\n class=\"copy-button\"\n type=\"icon\"\n icon=\"icon-copy\"\n ariaLabel=\"JsonDisplay_CopyButton_SC\"\n [ecCopyButton]=\"jsonDisplay\">\n </ec-button>\n}\n<pre><code>{{jsonDisplay.value}}</code></pre>", styles: [":host{display:block;position:relative;color:var(--ec-color-primary-light);background:#354751;max-height:15rem;min-height:2.125rem;font-size:var(--ec-font-size-label);border-radius:var(--ec-border-radius-card);overflow-x:auto;overflow-y:auto;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:var(--ec-color-secondary-light)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:var(--ec-color-primary-light)!important}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "directive", type: CopyButtonDirective, selector: "[ecCopyButton]", inputs: ["ecCopyButton"] }] }); }
|
|
11017
11270
|
}
|
|
11018
11271
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: JsonDisplayComponent, decorators: [{
|
|
11019
11272
|
type: Component,
|
|
@@ -11635,7 +11888,7 @@ class TreeComponent {
|
|
|
11635
11888
|
}
|
|
11636
11889
|
}
|
|
11637
11890
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11638
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TreeComponent, isStandalone: false, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", collapsibleRootNode: "collapsibleRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", customHierarchyItemTemplate: "customHierarchyItemTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren", treeItemToggled: "treeItemToggled" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "hierarchyTreeComponent", first: true, predicate: HierarchyTreeComponent, descendants: true }], ngImport: i0, template: "@if (!hideTreeHeader) {\n <header\n class=\"flex-shrink d-flex align-items-center\">\n <h2 id=\"{{id}}_title\"\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\n @if (menuItems?.length) {\n <ec-dropdown\n id=\"{{id}}_dropdown\"\n class=\"flex-shrink\"\n icon=\"icon-menu\"\n [menuTemplateType]=\"menuTemplateType\"\n menuPosition=\"left\"\n [status]=\"menuStatus\"\n [popupFixed]=\"true\"\n [showArrow]=\"false\"\n [menuMinWidth]=\"240\"\n [items]=\"menuItems\">\n </ec-dropdown>\n }\n </header>\n}\n\n<div class=\"flex-grow d-flex\"\n ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [displayAsMask]=\"true\">\n @if (type === 'menu') {\n <ec-menu [id]=\"id\"\n [items]=\"treeItems\"\n [templateType]=\"templateType\"\n [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\n [truncateItems]=\"true\"\n (selectedChanged)=\"onItemSelected($event)\"\n [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\n [preserveIconSpace]=\"preserveIconSpace\"\n class=\"flex-grow\">\n </ec-menu>\n }\n\n @if (type === 'hierarchy') {\n <ec-hierarchy-tree [id]=\"id\"\n [rootNode]=\"treeHierarchy\"\n [hideRootNode]=\"treeHierarchyHideRootNode\"\n [collapsibleRootNode]=\"collapsibleRootNode\"\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\n (itemToggled)=\"onHierarchyItemToggled($event)\"\n (itemSelected)=\"onItemSelected($event)\"\n [customItemTemplate]=\"customHierarchyItemTemplate\"\n class=\"flex-grow d-flex\">\n </ec-hierarchy-tree>\n }\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu,ec-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"], dependencies: [{ kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: ["collapsibleRootNode", "id", "hideRootNode", "customItemTemplate"], outputs: ["itemSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
11891
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: TreeComponent, isStandalone: false, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", collapsibleRootNode: "collapsibleRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", customHierarchyItemTemplate: "customHierarchyItemTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren", treeItemToggled: "treeItemToggled" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "hierarchyTreeComponent", first: true, predicate: HierarchyTreeComponent, descendants: true }], ngImport: i0, template: "@if (!hideTreeHeader) {\n <header\n class=\"flex-shrink d-flex align-items-center\">\n <h2 id=\"{{id}}_title\"\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\n @if (menuItems?.length) {\n <ec-dropdown\n id=\"{{id}}_dropdown\"\n class=\"flex-shrink\"\n icon=\"icon-menu\"\n [menuTemplateType]=\"menuTemplateType\"\n menuPosition=\"left\"\n [status]=\"menuStatus\"\n [popupFixed]=\"true\"\n [showArrow]=\"false\"\n [menuMinWidth]=\"240\"\n [items]=\"menuItems\">\n </ec-dropdown>\n }\n </header>\n}\n\n<div class=\"flex-grow d-flex\"\n ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [displayAsMask]=\"true\">\n @if (type === 'menu') {\n <ec-menu [id]=\"id\"\n [items]=\"treeItems\"\n [templateType]=\"templateType\"\n [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\n [truncateItems]=\"true\"\n (selectedChanged)=\"onItemSelected($event)\"\n [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\n [preserveIconSpace]=\"preserveIconSpace\"\n class=\"flex-grow\">\n </ec-menu>\n }\n\n @if (type === 'hierarchy') {\n <ec-hierarchy-tree [id]=\"id\"\n [rootNode]=\"treeHierarchy\"\n [hideRootNode]=\"treeHierarchyHideRootNode\"\n [collapsibleRootNode]=\"collapsibleRootNode\"\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\n (itemToggled)=\"onHierarchyItemToggled($event)\"\n (itemSelected)=\"onItemSelected($event)\"\n [customItemTemplate]=\"customHierarchyItemTemplate\"\n class=\"flex-grow d-flex\">\n </ec-hierarchy-tree>\n }\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu,ec-hierarchy-tree{--ec-menu-background-color: var(--ec-tree-background-color)}[ecOverlay]{--ec-overlay-background-color: var(--ec-tree-background-color)}\n"], dependencies: [{ kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "rolePattern", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "highlightedItemChange", "menuClosed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "ariaLabel", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: ["collapsibleRootNode", "id", "hideRootNode", "customItemTemplate"], outputs: ["itemSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] }); }
|
|
11639
11892
|
}
|
|
11640
11893
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TreeComponent, decorators: [{
|
|
11641
11894
|
type: Component,
|
|
@@ -11839,7 +12092,9 @@ class DateDisplayPipe2 {
|
|
|
11839
12092
|
}
|
|
11840
12093
|
async transform(date, options) {
|
|
11841
12094
|
const { showEndOfTime, showTime, showSeconds, displayInUTC } = options || {};
|
|
11842
|
-
if (
|
|
12095
|
+
if (date == null)
|
|
12096
|
+
return '';
|
|
12097
|
+
if (!DateTimeHelper.toDateTime(date).isValid || (!showEndOfTime && DateTimeHelper.isEndOfTime(date))) {
|
|
11843
12098
|
return '';
|
|
11844
12099
|
}
|
|
11845
12100
|
const { preference } = await lastValueFrom(this.userPrefs.getPreferences());
|
|
@@ -11851,8 +12106,7 @@ class DateDisplayPipe2 {
|
|
|
11851
12106
|
}
|
|
11852
12107
|
formatString += ` ${timeFormat}`;
|
|
11853
12108
|
}
|
|
11854
|
-
|
|
11855
|
-
return (displayInUTC ? moment.utc(date) : moment(date)).format(formatString);
|
|
12109
|
+
return DateTimeHelper.formatDate(date, formatString, displayInUTC);
|
|
11856
12110
|
}
|
|
11857
12111
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe2, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
11858
12112
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe2, isStandalone: false, name: "dateDisplay2" }); }
|
|
@@ -11865,6 +12119,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
11865
12119
|
}]
|
|
11866
12120
|
}], ctorParameters: () => [{ type: UserPreferenceService }] });
|
|
11867
12121
|
|
|
12122
|
+
/**
|
|
12123
|
+
* Same behavior as {@link DateDisplayPipe2}, but always appends the short named
|
|
12124
|
+
* timezone abbreviation (e.g. `EST`, `PDT`, `UTC`) to the output. Use this when
|
|
12125
|
+
* downstream consumers need to disambiguate the timezone of a rendered date.
|
|
12126
|
+
*
|
|
12127
|
+
* @example <span>{{ someDate | dateDisplay3 | async }}</span>
|
|
12128
|
+
*/
|
|
12129
|
+
class DateDisplayPipe3 {
|
|
12130
|
+
constructor(userPrefs) {
|
|
12131
|
+
this.userPrefs = userPrefs;
|
|
12132
|
+
}
|
|
12133
|
+
async transform(date, options) {
|
|
12134
|
+
const { showEndOfTime, showTime, showSeconds, displayInUTC } = options || {};
|
|
12135
|
+
if (date == null)
|
|
12136
|
+
return '';
|
|
12137
|
+
if (!DateTimeHelper.toDateTime(date).isValid || (!showEndOfTime && DateTimeHelper.isEndOfTime(date))) {
|
|
12138
|
+
return '';
|
|
12139
|
+
}
|
|
12140
|
+
const { preference } = await lastValueFrom(this.userPrefs.getPreferences());
|
|
12141
|
+
let formatString = preference?.dateFormat || 'MM/DD/YYYY';
|
|
12142
|
+
if (showTime) {
|
|
12143
|
+
let timeFormat = preference.timeFormat;
|
|
12144
|
+
if (!showSeconds) {
|
|
12145
|
+
timeFormat = timeFormat.replace(':ss', '');
|
|
12146
|
+
}
|
|
12147
|
+
formatString += ` ${timeFormat}`;
|
|
12148
|
+
}
|
|
12149
|
+
// Luxon's `ZZZZ` renders the short named offset (e.g. `EST`, `EDT`, `UTC`).
|
|
12150
|
+
// The token passes through `momentToLuxonFormat` unchanged.
|
|
12151
|
+
formatString += ' ZZZZ';
|
|
12152
|
+
return DateTimeHelper.formatDate(date, formatString, !!displayInUTC);
|
|
12153
|
+
}
|
|
12154
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe3, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
12155
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe3, isStandalone: false, name: "dateDisplay3" }); }
|
|
12156
|
+
}
|
|
12157
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DateDisplayPipe3, decorators: [{
|
|
12158
|
+
type: Pipe,
|
|
12159
|
+
args: [{
|
|
12160
|
+
name: 'dateDisplay3',
|
|
12161
|
+
standalone: false
|
|
12162
|
+
}]
|
|
12163
|
+
}], ctorParameters: () => [{ type: UserPreferenceService }] });
|
|
12164
|
+
|
|
11868
12165
|
/**
|
|
11869
12166
|
* Format a time to the user's preference for display
|
|
11870
12167
|
*/
|
|
@@ -11877,11 +12174,10 @@ class TimeDisplayPipe {
|
|
|
11877
12174
|
* Format a time for display, accounting for user's display preferences.
|
|
11878
12175
|
*/
|
|
11879
12176
|
transform(time, showSeconds) {
|
|
11880
|
-
let display = '';
|
|
11881
12177
|
let formatString = '';
|
|
11882
12178
|
// use user-preferred formats
|
|
11883
12179
|
this.userPreferenceService.getPreferences().subscribe(result => {
|
|
11884
|
-
//if preferences exist then format time to users preference
|
|
12180
|
+
//if preferences exist then format time to users preference
|
|
11885
12181
|
//otherwise use the last user preference
|
|
11886
12182
|
if (result.preference) {
|
|
11887
12183
|
formatString = result.preference.timeFormat;
|
|
@@ -11891,8 +12187,7 @@ class TimeDisplayPipe {
|
|
|
11891
12187
|
this.lastFormatString = formatString;
|
|
11892
12188
|
}
|
|
11893
12189
|
});
|
|
11894
|
-
|
|
11895
|
-
return display;
|
|
12190
|
+
return DateTimeHelper.formatDate(time ?? null, this.lastFormatString);
|
|
11896
12191
|
}
|
|
11897
12192
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: TimeDisplayPipe, deps: [{ token: UserPreferenceService }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
11898
12193
|
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.4", ngImport: i0, type: TimeDisplayPipe, isStandalone: false, name: "timeDisplay" }); }
|
|
@@ -11920,21 +12215,21 @@ class RelativeDatePipe {
|
|
|
11920
12215
|
* If any of todayLabel, yesterdayLabel is supplied, use the supplied label.
|
|
11921
12216
|
*/
|
|
11922
12217
|
transform(timeSelected, options) {
|
|
11923
|
-
const selected =
|
|
11924
|
-
const today =
|
|
11925
|
-
const yesterday =
|
|
12218
|
+
const selected = DateTime.fromISO(timeSelected);
|
|
12219
|
+
const today = DateTime.now();
|
|
12220
|
+
const yesterday = today.minus({ days: 1 });
|
|
11926
12221
|
const timeDisplay = options?.dateOnly ? `` : ` ${this.timeDisplayPipe.transform(timeSelected)}`;
|
|
11927
12222
|
let displayValue = null;
|
|
11928
12223
|
let prefixValue = '';
|
|
11929
|
-
if (selected.
|
|
12224
|
+
if (selected.hasSame(today, 'day') && !options?.showTimeForToday) {
|
|
11930
12225
|
displayValue = this.translateService.instant(options?.todayLabel ? options?.todayLabel : 'today');
|
|
11931
12226
|
prefixValue = options?.todayPrefix ?? '';
|
|
11932
12227
|
}
|
|
11933
|
-
else if (selected.
|
|
12228
|
+
else if (selected.hasSame(today, 'day') && options?.showTimeForToday && !timeDisplay) {
|
|
11934
12229
|
displayValue = this.timeDisplayPipe.transform(timeSelected);
|
|
11935
12230
|
prefixValue = options?.todayTimePrefix ?? '';
|
|
11936
12231
|
}
|
|
11937
|
-
else if (selected.
|
|
12232
|
+
else if (selected.hasSame(yesterday, 'day')) {
|
|
11938
12233
|
displayValue = this.translateService.instant(options?.yesterdayLabel ? options?.yesterdayLabel : 'yesterday');
|
|
11939
12234
|
prefixValue = options?.yesterdayPrefix ?? '';
|
|
11940
12235
|
}
|
|
@@ -12047,7 +12342,7 @@ class PageViewComponent {
|
|
|
12047
12342
|
this.dialogService.closeLatestDialog(new DialogResult(false));
|
|
12048
12343
|
}
|
|
12049
12344
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageViewComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12050
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PageViewComponent, isStandalone: false, selector: "ec-page-view", inputs: { isDialog: "isDialog", readonly: "readonly", status: "status", showHeader: "showHeader", errors: "errors", breadcrumbs: "breadcrumbs", title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl", moreActionsLabel: "moreActionsLabel", moreActions: "moreActions", secondaryActionLabel: "secondaryActionLabel", hideSecondaryAction: "hideSecondaryAction", hideCloseOnPending: "hideCloseOnPending", primaryActionLabel: "primaryActionLabel", hidePrimaryAction: "hidePrimaryAction", customTitleTemplate: "customTitleTemplate", customActionsTemplate: "customActionsTemplate", customHeaderTemplate: "customHeaderTemplate", footerTemplate: "footerTemplate", customErrorBannerTemplate: "customErrorBannerTemplate", stickyFooter: "stickyFooter", fitContent: "fitContent", disablePrimaryAction: "disablePrimaryAction", bgContent: "bgContent" }, outputs: { onPrimaryAction: "onPrimaryAction", onSecondaryAction: "onSecondaryAction" }, host: { properties: { "class.bg-content": "this.bgContent" }, classAttribute: "flex-grow" }, ngImport: i0, template: "<div ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [displayAsMask]=\"true\"\n class=\"flex-grow d-flex\"\n [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\n <div id=\"PageViewScrollContainer\"\n class=\"d-flex flex-column flex-grow scroll-y\"\n [class.is-dialog]=\"isDialog\"\n [class.fit-content]=\"fitContent\"\n [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\n [class.overlay-visible]=\"status?.status !== 'hasData'\"\n [class.footer-visible]=\"!!footerTemplate\"\n cdkScrollable>\n <section>\n <ng-content></ng-content>\n </section>\n\n @if (footerTemplate) {\n <footer>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </footer>\n }\n\n @if (showHeader) {\n <header>\n @if (breadcrumbs?.length && !isDialog) {\n <ol id=\"breadcrumbs\"\n >\n @for (crumb of breadcrumbs; track crumb; let isLast = $last) {\n <li>\n @if (crumb.url) {\n <a\n [routerLink]=\"crumb.url\">\n <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n </a>\n } @else {\n {{crumb.label}}\n }\n <ng-template #label>{{crumb.label}}</ng-template>\n </li>\n }\n </ol>\n }\n <div class=\"titlebar\">\n @if (!customTitleTemplate) {\n <app-page-title\n [title]=\"title\"\n [subTitle]=\"subTitle\"\n [subTitleUrl]=\"subTitleUrl\"\n [titleIcon]=\"titleIcon\"\n class=\"title text-truncate\">\n </app-page-title>\n } @else {\n <div class=\"title\">\n <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\n </div>\n }\n <div class=\"actions\">\n @if (!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly) {\n <ec-button id=\"primaryAction\"\n class=\"ml-2\"\n [disabled]=\"status?.status === 'pending' || disablePrimaryAction\"\n type=\"primary\"\n [label]=\"primaryActionLabel\"\n (clicked)=\"primaryAction($event)\">\n </ec-button>\n }\n @if (!hideSecondaryAction && onSecondaryAction.observers?.length) {\n <ec-button id=\"secondaryAction\"\n class=\"ml-2\"\n type=\"secondary\"\n [label]=\"readonly ? 'Close' : secondaryActionLabel\"\n (clicked)=\"secondaryAction($event)\">\n </ec-button>\n }\n @if (moreActions?.length && !readonly) {\n <ec-dropdown id=\"moreActions\"\n [disabled]=\"status?.status === 'pending'\"\n class=\"ml-2\"\n buttonType=\"text\"\n [label]=\"moreActionsLabel\"\n [items]=\"moreActions\">\n </ec-dropdown>\n }\n <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\n </div>\n </div>\n @if (customHeaderTemplate) {\n <div\n class=\"page-header\">\n <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\n </div>\n }\n @if (!customErrorBannerTemplate && errors) {\n <ec-banner\n id=\"pageViewErrors\"\n [class.border-bottom-0]=\"!isDialog\">\n <div [innerHtml]=\"errors\"></div>\n </ec-banner>\n } @else {\n @if (errors) {\n <ec-banner\n id=\"pageViewErrors\"\n [class.border-bottom-0]=\"!isDialog\">\n <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\n </ec-banner>\n }\n }\n </header>\n }\n </div>\n\n @if (isDialog && ( (status?.status === 'pending' && !hideCloseOnPending) || status?.status === 'error')) {\n <ec-button\n id=\"pageViewDialogClose\"\n type=\"icon\"\n icon=\"icon-cancel\"\n ariaLabel=\"PageView_CloseDialog_SC\"\n (clicked)=\"closeDialog()\">\n </ec-button>\n }\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}:not(.is-dialog)>section{z-index:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0;z-index:var(--ec-z-index-sticky-page-header)}.fit-content>section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: PageTitleComponent, selector: "app-page-title", inputs: ["title", "titleIcon", "subTitle", "subTitleUrl"] }] }); }
|
|
12345
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PageViewComponent, isStandalone: false, selector: "ec-page-view", inputs: { isDialog: "isDialog", readonly: "readonly", status: "status", showHeader: "showHeader", errors: "errors", breadcrumbs: "breadcrumbs", title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl", moreActionsLabel: "moreActionsLabel", moreActions: "moreActions", secondaryActionLabel: "secondaryActionLabel", hideSecondaryAction: "hideSecondaryAction", hideCloseOnPending: "hideCloseOnPending", primaryActionLabel: "primaryActionLabel", hidePrimaryAction: "hidePrimaryAction", customTitleTemplate: "customTitleTemplate", customActionsTemplate: "customActionsTemplate", customHeaderTemplate: "customHeaderTemplate", footerTemplate: "footerTemplate", customErrorBannerTemplate: "customErrorBannerTemplate", stickyFooter: "stickyFooter", fitContent: "fitContent", disablePrimaryAction: "disablePrimaryAction", bgContent: "bgContent" }, outputs: { onPrimaryAction: "onPrimaryAction", onSecondaryAction: "onSecondaryAction" }, host: { properties: { "class.bg-content": "this.bgContent" }, classAttribute: "flex-grow" }, ngImport: i0, template: "<div ecOverlay\n [status]=\"status?.status\"\n [message]=\"status?.message\"\n [displayAsMask]=\"true\"\n class=\"flex-grow d-flex\"\n [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\n <div id=\"PageViewScrollContainer\"\n class=\"d-flex flex-column flex-grow scroll-y\"\n [class.is-dialog]=\"isDialog\"\n [class.fit-content]=\"fitContent\"\n [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\n [class.overlay-visible]=\"status?.status !== 'hasData'\"\n [class.footer-visible]=\"!!footerTemplate\"\n cdkScrollable>\n <section>\n <ng-content></ng-content>\n </section>\n\n @if (footerTemplate) {\n <footer>\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </footer>\n }\n\n @if (showHeader) {\n <header>\n @if (breadcrumbs?.length && !isDialog) {\n <ol id=\"breadcrumbs\"\n >\n @for (crumb of breadcrumbs; track crumb; let isLast = $last) {\n <li>\n @if (crumb.url) {\n <a\n [routerLink]=\"crumb.url\">\n <ng-container *ngTemplateOutlet=\"label\"></ng-container>\n </a>\n } @else {\n {{crumb.label}}\n }\n <ng-template #label>{{crumb.label}}</ng-template>\n </li>\n }\n </ol>\n }\n <div class=\"titlebar\">\n @if (!customTitleTemplate) {\n <app-page-title\n [title]=\"title\"\n [subTitle]=\"subTitle\"\n [subTitleUrl]=\"subTitleUrl\"\n [titleIcon]=\"titleIcon\"\n class=\"title text-truncate\">\n </app-page-title>\n } @else {\n <div class=\"title\">\n <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\n </div>\n }\n <div class=\"actions\">\n @if (!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly) {\n <ec-button id=\"primaryAction\"\n class=\"ml-2\"\n [disabled]=\"status?.status === 'pending' || disablePrimaryAction\"\n type=\"primary\"\n [label]=\"primaryActionLabel\"\n (clicked)=\"primaryAction($event)\">\n </ec-button>\n }\n @if (!hideSecondaryAction && onSecondaryAction.observers?.length) {\n <ec-button id=\"secondaryAction\"\n class=\"ml-2\"\n type=\"secondary\"\n [label]=\"readonly ? 'Close' : secondaryActionLabel\"\n (clicked)=\"secondaryAction($event)\">\n </ec-button>\n }\n @if (moreActions?.length && !readonly) {\n <ec-dropdown id=\"moreActions\"\n [disabled]=\"status?.status === 'pending'\"\n class=\"ml-2\"\n buttonType=\"text\"\n [label]=\"moreActionsLabel\"\n [items]=\"moreActions\">\n </ec-dropdown>\n }\n <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\n </div>\n </div>\n @if (customHeaderTemplate) {\n <div\n class=\"page-header\">\n <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\n </div>\n }\n @if (!customErrorBannerTemplate && errors) {\n <ec-banner\n id=\"pageViewErrors\"\n [class.border-bottom-0]=\"!isDialog\">\n <div [innerHtml]=\"errors\"></div>\n </ec-banner>\n } @else {\n @if (errors) {\n <ec-banner\n id=\"pageViewErrors\"\n [class.border-bottom-0]=\"!isDialog\">\n <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\n </ec-banner>\n }\n }\n </header>\n }\n </div>\n\n @if (isDialog && ( (status?.status === 'pending' && !hideCloseOnPending) || status?.status === 'error')) {\n <ec-button\n id=\"pageViewDialogClose\"\n type=\"icon\"\n icon=\"icon-cancel\"\n ariaLabel=\"PageView_CloseDialog_SC\"\n (clicked)=\"closeDialog()\">\n </ec-button>\n }\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}:not(.is-dialog)>section{z-index:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0;z-index:var(--ec-z-index-sticky-page-header)}.fit-content>section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "ariaLabel", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: PageTitleComponent, selector: "app-page-title", inputs: ["title", "titleIcon", "subTitle", "subTitleUrl"] }] }); }
|
|
12051
12346
|
}
|
|
12052
12347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PageViewComponent, decorators: [{
|
|
12053
12348
|
type: Component,
|
|
@@ -12434,7 +12729,7 @@ class WizardButtonsComponent {
|
|
|
12434
12729
|
this.nextTab.emit();
|
|
12435
12730
|
}
|
|
12436
12731
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: WizardButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12437
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: WizardButtonsComponent, isStandalone: false, selector: "ec-wizard-buttons", inputs: { nextLabel: "nextLabel", backLabel: "backLabel", cancelLabel: "cancelLabel", saveLabel: "saveLabel", cancelId: "cancelId", saveId: "saveId", tabindex: "tabindex", status: "status", showBack: "showBack", showSave: "showSave", hideNextSaveButton: "hideNextSaveButton" }, outputs: { cancel: "cancel", save: "save", nextTab: "nextTab", previousTab: "previousTab" }, ngImport: i0, template: "@if (!hideNextSaveButton) {\n <ec-button id=\"{{saveId}}\"\n class=\"ml-2\"\n type=\"primary\"\n [label]=\"(!showSave ? nextLabel : saveLabel)\"\n [tabindex]=\"!tabindex ? 0 : tabindex\"\n (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\n [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\n </ec-button>\n}\n@if (showBack) {\n <ec-button id=\"previousTab\"\n class=\"ml-2\"\n type=\"secondary\"\n [label]=\"backLabel\"\n [tabindex]=\"!tabindex ? 0 : tabindex+1\"\n (clicked)=\"onPreviousTab()\">\n </ec-button>\n}\n<ec-button id=\"{{cancelId}}\"\n type=\"secondary\"\n [label]=\"cancelLabel\"\n [tabindex]=\"!tabindex ? 0 : tabindex+2\"\n (clicked)=\"onCancel()\">\n</ec-button>\n", styles: [":host{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
|
|
12732
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: WizardButtonsComponent, isStandalone: false, selector: "ec-wizard-buttons", inputs: { nextLabel: "nextLabel", backLabel: "backLabel", cancelLabel: "cancelLabel", saveLabel: "saveLabel", cancelId: "cancelId", saveId: "saveId", tabindex: "tabindex", status: "status", showBack: "showBack", showSave: "showSave", hideNextSaveButton: "hideNextSaveButton" }, outputs: { cancel: "cancel", save: "save", nextTab: "nextTab", previousTab: "previousTab" }, ngImport: i0, template: "@if (!hideNextSaveButton) {\n <ec-button id=\"{{saveId}}\"\n class=\"ml-2\"\n type=\"primary\"\n [label]=\"(!showSave ? nextLabel : saveLabel)\"\n [tabindex]=\"!tabindex ? 0 : tabindex\"\n (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\n [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\n </ec-button>\n}\n@if (showBack) {\n <ec-button id=\"previousTab\"\n class=\"ml-2\"\n type=\"secondary\"\n [label]=\"backLabel\"\n [tabindex]=\"!tabindex ? 0 : tabindex+1\"\n (clicked)=\"onPreviousTab()\">\n </ec-button>\n}\n<ec-button id=\"{{cancelId}}\"\n type=\"secondary\"\n [label]=\"cancelLabel\"\n [tabindex]=\"!tabindex ? 0 : tabindex+2\"\n (clicked)=\"onCancel()\">\n</ec-button>\n", styles: [":host{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "lockButton", "icon", "iconColor", "label", "ariaLabel", "ariaExpanded", "ariaHaspopup", "ariaActivedescendant", "ariaControls", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }] }); }
|
|
12438
12733
|
}
|
|
12439
12734
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: WizardButtonsComponent, decorators: [{
|
|
12440
12735
|
type: Component,
|
|
@@ -12572,6 +12867,7 @@ class ComponentsModule {
|
|
|
12572
12867
|
DateInputComponent,
|
|
12573
12868
|
KeyboardNavContainerDirective,
|
|
12574
12869
|
DateDisplayPipe2,
|
|
12870
|
+
DateDisplayPipe3,
|
|
12575
12871
|
MultiselectComponent], imports: [CommonModule,
|
|
12576
12872
|
FormsModule,
|
|
12577
12873
|
ReactiveFormsModule,
|
|
@@ -12644,7 +12940,8 @@ class ComponentsModule {
|
|
|
12644
12940
|
CalendarComponent,
|
|
12645
12941
|
DateInputComponent,
|
|
12646
12942
|
KeyboardNavContainerDirective,
|
|
12647
|
-
DateDisplayPipe2
|
|
12943
|
+
DateDisplayPipe2,
|
|
12944
|
+
DateDisplayPipe3] }); }
|
|
12648
12945
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ComponentsModule, providers: [
|
|
12649
12946
|
FormGroupHelper,
|
|
12650
12947
|
DialogService,
|
|
@@ -12654,7 +12951,8 @@ class ComponentsModule {
|
|
|
12654
12951
|
RowCountPipe,
|
|
12655
12952
|
RelativeDatePipe,
|
|
12656
12953
|
HighlightTextPipe,
|
|
12657
|
-
DateDisplayPipe2
|
|
12954
|
+
DateDisplayPipe2,
|
|
12955
|
+
DateDisplayPipe3
|
|
12658
12956
|
], imports: [CommonModule,
|
|
12659
12957
|
FormsModule,
|
|
12660
12958
|
ReactiveFormsModule,
|
|
@@ -12740,6 +13038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
12740
13038
|
DateInputComponent,
|
|
12741
13039
|
KeyboardNavContainerDirective,
|
|
12742
13040
|
DateDisplayPipe2,
|
|
13041
|
+
DateDisplayPipe3,
|
|
12743
13042
|
MultiselectComponent
|
|
12744
13043
|
],
|
|
12745
13044
|
imports: [
|
|
@@ -12761,7 +13060,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
12761
13060
|
RowCountPipe,
|
|
12762
13061
|
RelativeDatePipe,
|
|
12763
13062
|
HighlightTextPipe,
|
|
12764
|
-
DateDisplayPipe2
|
|
13063
|
+
DateDisplayPipe2,
|
|
13064
|
+
DateDisplayPipe3
|
|
12765
13065
|
],
|
|
12766
13066
|
exports: [
|
|
12767
13067
|
ButtonComponent,
|
|
@@ -12829,7 +13129,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
12829
13129
|
CalendarComponent,
|
|
12830
13130
|
DateInputComponent,
|
|
12831
13131
|
KeyboardNavContainerDirective,
|
|
12832
|
-
DateDisplayPipe2
|
|
13132
|
+
DateDisplayPipe2,
|
|
13133
|
+
DateDisplayPipe3
|
|
12833
13134
|
]
|
|
12834
13135
|
}]
|
|
12835
13136
|
}] });
|
|
@@ -13825,5 +14126,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
13825
14126
|
* Generated bundle index. Do not edit.
|
|
13826
14127
|
*/
|
|
13827
14128
|
|
|
13828
|
-
export { AppBarComponent, AvatarComponent, BannerComponent, ButtonComponent, CacheService, CalendarComponent, CheckboxComponent, ClickAreaForDirective, CollapsibleToggleComponent, ComboboxComponent, ComponentsModule, ConfirmComponent, ConfirmDialogContext, CopyButtonBaseTestInjectorFactory, CopyButtonDirective, CopyTableButtonDirective, CustomValidators, DateDisplayPipe, DateDisplayPipe2, DateInput, DateInputComponent, DateTimeHelper, DialogCloseDuration, DialogCloseEvent, DialogCloseLatestEvent, DialogComponent, DialogEvent, DialogGroupComponent, DialogOpenDuration, DialogOpenEndEvent, DialogOpenStartEvent, DialogResult, DialogService, DropdownComponent, ErrorService, FileTypeExtensions, FileUploadComponent, FormControlBase, FormControlComponent, FormControlLabelComponent, FormGroupComponent, FormGroupHelper, HelpPopoverComponent, HierarchyBase, HierarchyBaseTestInjectorFactory, HierarchyItem, HierarchyMocks, HierarchyTreeComponent, HighlightTextPipe, IfViewportWidthDirective, ItemDisplayComponent, ItemPickerComponent, ItemPickerSelectableContext, JsonDisplayComponent, JsonHelper, KeyboardNavContainerDirective, LinkButtonComponent, MenuComponent, MockActivatedRoute, MockDateDisplayPipe, MockDialog, MockDialogContent, MockTranslateService, MockTranslationHelperService, MultiselectComponent, NavGroup, NavItemActiveDirective, NumericboxComponent, Overlay, PageBaseComponent, PageBaseComponentTestHelper, PageBaseComponentTestInjectorFactory, PageInitResult, PageStatus, PageStatuses, PageTitleComponent, PageViewComponent, PanelCloseDuration, PanelOpenDuration, PopoverComponent, PopupContainerDirective, RadioButtonComponent, RadioButtonOption, RelativeDatePipe, ResizableBase, ResizableColumnComponent, ResizableComponent, RouterHelper, RowCountPipe, ScrollService, SearchableTableComponent, SelectComponent, SpinnerComponent, SplashComponent, SplashService, SpyFactory, TableComponent, TableLockedColumnComponent, TableMasterHeaderRowComponent, TableMasterRowComponent, TablePaginationComponent, TableSelectableRowComponent, TableSelectableRowContext, TabsComponent, Tag, TagsComponent, TelemetryService, TelemetryTrackerService, TextboxComponent, TimeDisplayPipe, ToastComponent, ToastEvent, ToastService, ToasterComponent, TooltipComponent, TooltipDirective, TooltipService, TreeComponent, UnicodeStrings, UserPreferenceService, ValidationMessageService, ViewOverlayComponent, WindowService, WizardBaseComponent, WizardButtonsComponent, WizardProgressComponent, canadianPostalCodeRegex, clickEvent, dateInputFormatRegex, domainPattern, findAllSpacesPattern, forEachFormControl, getApiError, getControlValue, getDecimalPattern, handleKeyNavigate, integerPattern, isApiError, menuAnimationSpeed, mockRouterFactory, mockRouterHelperFactory, numericboxValidation, orderByIgnoreCase, otherZipCodeRegex, phoneNumberValidationPattern, sortByIgnoreCase, textboxValidation, unitedStatesZipCodeRegex, urlValidationPattern, validateFormGroupValuesAreUnique };
|
|
14129
|
+
export { AppBarComponent, AvatarComponent, BannerComponent, ButtonComponent, CacheService, CalendarComponent, CheckboxComponent, ClickAreaForDirective, CollapsibleToggleComponent, ComboboxComponent, ComponentsModule, ConfirmComponent, ConfirmDialogContext, CopyButtonBaseTestInjectorFactory, CopyButtonDirective, CopyTableButtonDirective, CustomValidators, DateDisplayPipe, DateDisplayPipe2, DateDisplayPipe3, DateInput, DateInputComponent, DateTimeHelper, DialogCloseDuration, DialogCloseEvent, DialogCloseLatestEvent, DialogComponent, DialogEvent, DialogGroupComponent, DialogOpenDuration, DialogOpenEndEvent, DialogOpenStartEvent, DialogResult, DialogService, DropdownComponent, ErrorService, FileTypeExtensions, FileUploadComponent, FormControlBase, FormControlComponent, FormControlLabelComponent, FormGroupComponent, FormGroupHelper, HelpPopoverComponent, HierarchyBase, HierarchyBaseTestInjectorFactory, HierarchyItem, HierarchyMocks, HierarchyTreeComponent, HighlightTextPipe, IfViewportWidthDirective, ItemDisplayComponent, ItemPickerComponent, ItemPickerSelectableContext, JsonDisplayComponent, JsonHelper, KeyboardNavContainerDirective, LinkButtonComponent, MenuComponent, MockActivatedRoute, MockDateDisplayPipe, MockDialog, MockDialogContent, MockTranslateService, MockTranslationHelperService, MultiselectComponent, NavGroup, NavItemActiveDirective, NumericboxComponent, Overlay, PageBaseComponent, PageBaseComponentTestHelper, PageBaseComponentTestInjectorFactory, PageInitResult, PageStatus, PageStatuses, PageTitleComponent, PageViewComponent, PanelCloseDuration, PanelOpenDuration, PopoverComponent, PopupContainerDirective, RadioButtonComponent, RadioButtonOption, RelativeDatePipe, ResizableBase, ResizableColumnComponent, ResizableComponent, RouterHelper, RowCountPipe, ScrollService, SearchableTableComponent, SelectComponent, SpinnerComponent, SplashComponent, SplashService, SpyFactory, TableComponent, TableLockedColumnComponent, TableMasterHeaderRowComponent, TableMasterRowComponent, TablePaginationComponent, TableSelectableRowComponent, TableSelectableRowContext, TabsComponent, Tag, TagsComponent, TelemetryService, TelemetryTrackerService, TextboxComponent, TimeDisplayPipe, ToastComponent, ToastEvent, ToastService, ToasterComponent, TooltipComponent, TooltipDirective, TooltipService, TreeComponent, UnicodeStrings, UserPreferenceService, ValidationMessageService, ViewOverlayComponent, WindowService, WizardBaseComponent, WizardButtonsComponent, WizardProgressComponent, canadianPostalCodeRegex, clickEvent, dateInputFormatRegex, domainPattern, findAllSpacesPattern, forEachFormControl, getApiError, getControlValue, getDecimalPattern, handleKeyNavigate, integerPattern, isApiError, menuAnimationSpeed, mockRouterFactory, mockRouterHelperFactory, numericboxValidation, orderByIgnoreCase, otherZipCodeRegex, phoneNumberValidationPattern, sortByIgnoreCase, textboxValidation, unitedStatesZipCodeRegex, urlValidationPattern, validateFormGroupValuesAreUnique };
|
|
13829
14130
|
//# sourceMappingURL=energycap-components.mjs.map
|