@energycap/components 0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230605-1635 → 0.33.5-ECAP-18191-carbon-hub-theme-phase-1.20230606-1102

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.
Files changed (26) hide show
  1. package/energycap-components.min.css +1 -1
  2. package/esm2020/lib/controls/button/button.component.mjs +2 -2
  3. package/esm2020/lib/controls/combobox/combobox.component.mjs +2 -2
  4. package/esm2020/lib/controls/dropdown/dropdown.component.mjs +2 -2
  5. package/esm2020/lib/controls/form-control-label/form-control-label.component.mjs +2 -2
  6. package/esm2020/lib/controls/form-group/form-group.component.mjs +2 -2
  7. package/esm2020/lib/controls/menu/menu.component.mjs +3 -3
  8. package/esm2020/lib/controls/radio-button/radio-button.component.mjs +2 -2
  9. package/esm2020/lib/controls/select/select.component.mjs +2 -2
  10. package/esm2020/lib/controls/tabs/tabs.component.mjs +2 -2
  11. package/esm2020/lib/controls/textbox/textbox.component.mjs +2 -2
  12. package/esm2020/lib/display/resizable/resizable.component.mjs +2 -2
  13. package/esm2020/lib/display/table/table-detail-row.component.mjs +2 -2
  14. package/esm2020/lib/display/table/table.component.mjs +2 -2
  15. package/esm2020/lib/display/tree/tree.component.mjs +3 -3
  16. package/fesm2015/energycap-components.mjs +28 -28
  17. package/fesm2015/energycap-components.mjs.map +1 -1
  18. package/fesm2020/energycap-components.mjs +28 -28
  19. package/fesm2020/energycap-components.mjs.map +1 -1
  20. package/package.json +1 -1
  21. package/src/styles/_global-variables.scss +1 -2
  22. package/src/styles/mixins/_button-base.scss +17 -17
  23. package/src/styles/mixins/_control-base.scss +1 -1
  24. package/src/styles/mixins/_form-control-base.scss +1 -1
  25. package/src/styles/mixins/_table-base.scss +1 -1
  26. package/src/styles/mixins/_tabs-base.scss +1 -1
package/fesm2015/energycap-components.mjs CHANGED
@@ -188,10 +188,10 @@ class ButtonComponent {
188
188
  }
189
189
  }
190
190
  ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
191
- ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ButtonComponent, selector: "ec-button", inputs: { id: "id", disabled: "disabled", icon: "icon", label: "label", 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 }], ngImport: i0, template: "<button id=\"{{id}}_button\"\r\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n [class.has-badge]=\"badge !== undefined\"\r\n tabindex=\"{{tabindex}}\"\r\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n #element\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n <!-- Hidden when the button is not pending -->\r\n <div class=\"pending-container\" *ngIf=\"pending\">\r\n <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n </div>\r\n\r\n <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n <ng-container *ngIf=\"label\">\r\n <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"badge !== undefined\">\r\n <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n </ng-container>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size-action);font-family:var(--ec-font-family);padding:0;margin:0;display:inline-block;-webkit-appearance:none;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{background-color:var(--ec-background-color-hover)}:host(.active) button:focus{border-color:transparent;box-shadow:none}:host(.active) .ec-button-secondary:focus{border-color:var(--ec-border-color-legacy)}: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:calc(var(--ec-font-size-icon) * .625);height:calc(var(--ec-font-size-icon) * .625)}: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-green-3));border-color:var(--ec-button-border-color-primary, var(--ec-color-green-4));color:var(--ec-button-color-primary, var(--ec-color-primary-dark))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-primary-active, var(--ec-color-green-4));color:var(--ec-color-primary-dark)}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-icon))}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border-color:var(--ec-button-border-color-secondary, var(--ec-border-color-legacy));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-secondary-active, var(--ec-background-color));color:var(--ec-button-color-secondary-active, var(--ec-color-primary-dark))}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:var(--ec-button-background-color-common, var(--ec-color-blue-3));border-color:var(--ec-button-border-color-common, var(--ec-color-blue-4));color:var(--ec-color-primary-light)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-common, var(--ec-color-primary-light))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-common-active, var(--ec-color-blue-4));border-color:var(--ec-button-border-color-common-active, var(--ec-color-blue-6))}.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:var(--ec-button-color-icon, var(--ec-color-icon))}.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:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{opacity:.5}.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-text{background-color:transparent;color:var(--ec-color-primary-dark)}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, var(--ec-color-icon))}.ec-button-text:active:not(:disabled){background-color:transparent;color:var(--ec-color-primary-dark)}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-color-interactive)}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled){background-color:transparent;color:var(--ec-color-interactive)}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-button-background-color-danger, var(--ec-color-danger));border-color:var(--ec-button-border-color-danger, var(--ec-color-red-4));color:var(--ec-button-color-danger, var(--ec-color-primary-light))}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon-danger, var(--ec-color-primary-light))}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-danger-active, var(--ec-color-red-4))}.ec-button-danger-text{background-color:transparent;color: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){background-color:transparent;color:var(--ec-color-danger)}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{height:2rem;line-height:1.25;padding:.3125rem .5rem;align-items:center;background-color:var(--ec-background-color);display:flex;cursor:pointer;font-size:var(--ec-font-size-action);line-height:1.25rem;justify-content:center;border:.0625rem solid transparent;border-radius:var(--ec-border-radius);position:relative}button.is-selected,button.is-highlighted{background-color:var(--ec-background-color-selected)}button:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;outline:none}button:active{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}button:disabled,button.is-disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy);color:var(--ec-color-secondary-dark);opacity:.65;cursor:default}button .label{align-items:center;display:flex;flex:auto}button .ec-icon{flex:0 0 auto}button .ec-icon+.label{margin:0 .375rem}button .label{white-space:nowrap;justify-content:center}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}: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}.badge{border:.125rem solid rgb(255,255,255);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:#7e579b;margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{border-radius:var(--ec-border-radius);align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:1.5rem;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem;justify-content:center}:host(.is-tab) button:hover{color:#354751}:host(.is-tab) button.active{color:#354751;background-color:#d2d7d9}:host(.is-tab) button:focus{outline:none}:host(.is-tab) button:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}:host(.is-tab) button.is-disabled{color:var(--ec-color-hint-dark);cursor:default}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:#354751;background-color:#d2d7d9}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
191
+ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ButtonComponent, selector: "ec-button", inputs: { id: "id", disabled: "disabled", icon: "icon", label: "label", 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 }], ngImport: i0, template: "<button id=\"{{id}}_button\"\r\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n [class.has-badge]=\"badge !== undefined\"\r\n tabindex=\"{{tabindex}}\"\r\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n #element\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n <!-- Hidden when the button is not pending -->\r\n <div class=\"pending-container\" *ngIf=\"pending\">\r\n <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n </div>\r\n\r\n <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n <ng-container *ngIf=\"label\">\r\n <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"badge !== undefined\">\r\n <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n </ng-container>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size-action);font-family:var(--ec-font-family);padding:0;margin:0;display:inline-block;-webkit-appearance:none;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{background-color:var(--ec-background-color-hover)}:host(.active) button:focus{border-color:transparent;box-shadow:none}:host(.active) .ec-button-secondary:focus{border-color:var(--ec-border-color)}: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:calc(var(--ec-font-size-icon) * .625);height:calc(var(--ec-font-size-icon) * .625)}: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-green-3));border-color:var(--ec-border-color);color:var(--ec-button-color-primary, var(--ec-color-primary-dark))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-primary, var(--ec-color-green-3));color:var(--ec-button-color-primary, var(--ec-color-primary-dark))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-icon))}.ec-button-secondary{background-color:var(--ec-background-color);border-color:var(--ec-button-border-color-secondary, var(--ec-border-color));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-background-color);color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:#2d9ab8;border-color:#0084a9;color:var(--ec-color-primary-light)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-common:active:not(:disabled){background-color:#0084a9;border-color:#005f7a}.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:var(--ec-button-color-icon, var(--ec-color-icon))}.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:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{opacity:.5}.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-text{background-color:transparent;color:var(--ec-color-primary-dark)}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, var(--ec-color-icon))}.ec-button-text:active:not(:disabled){background-color:transparent;color:var(--ec-color-primary-dark)}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-color-interactive)}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled){background-color:transparent;color:var(--ec-color-interactive)}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-color-danger);border-color:var(--ec-border-color);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-color-danger)}.ec-button-danger-text{background-color:transparent;color: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){background-color:transparent;color:var(--ec-color-danger)}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{height:2rem;line-height:1.25;padding:.3125rem .5rem;align-items:center;background-color:var(--ec-background-color);display:flex;cursor:pointer;font-size:var(--ec-font-size-action);line-height:1.25rem;justify-content:center;border:.0625rem solid transparent;border-radius:var(--ec-border-radius);position:relative}button.is-selected,button.is-highlighted{background-color:var(--ec-background-color-selected)}button:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;outline:none}button:active{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}button:disabled,button.is-disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color);color:var(--ec-color-secondary-dark);opacity:.65;cursor:default}button .label{align-items:center;display:flex;flex:auto}button .ec-icon{flex:0 0 auto}button .ec-icon+.label{margin:0 .375rem}button .label{white-space:nowrap;justify-content:center}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}: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}.badge{border:.125rem solid rgb(255,255,255);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:#7e579b;margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{border-radius:var(--ec-border-radius);align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:1.5rem;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem;justify-content:center}:host(.is-tab) button:hover{color:#354751}:host(.is-tab) button.active{color:#354751;background-color:#d2d7d9}:host(.is-tab) button:focus{outline:none}:host(.is-tab) button:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}:host(.is-tab) button.is-disabled{color:var(--ec-color-hint-dark);cursor:default}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:#354751;background-color:#d2d7d9}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
192
192
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ButtonComponent, decorators: [{
193
193
  type: Component,
194
- args: [{ selector: 'ec-button', template: "<button id=\"{{id}}_button\"\r\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n [class.has-badge]=\"badge !== undefined\"\r\n tabindex=\"{{tabindex}}\"\r\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n #element\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n <!-- Hidden when the button is not pending -->\r\n <div class=\"pending-container\" *ngIf=\"pending\">\r\n <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n </div>\r\n\r\n <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n <ng-container *ngIf=\"label\">\r\n <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"badge !== undefined\">\r\n <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n </ng-container>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size-action);font-family:var(--ec-font-family);padding:0;margin:0;display:inline-block;-webkit-appearance:none;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{background-color:var(--ec-background-color-hover)}:host(.active) button:focus{border-color:transparent;box-shadow:none}:host(.active) .ec-button-secondary:focus{border-color:var(--ec-border-color-legacy)}: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:calc(var(--ec-font-size-icon) * .625);height:calc(var(--ec-font-size-icon) * .625)}: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-green-3));border-color:var(--ec-button-border-color-primary, var(--ec-color-green-4));color:var(--ec-button-color-primary, var(--ec-color-primary-dark))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-primary-active, var(--ec-color-green-4));color:var(--ec-color-primary-dark)}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-icon))}.ec-button-secondary{background-color:var(--ec-button-background-color-secondary, var(--ec-background-color));border-color:var(--ec-button-border-color-secondary, var(--ec-border-color-legacy));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-button-background-color-secondary-active, var(--ec-background-color));color:var(--ec-button-color-secondary-active, var(--ec-color-primary-dark))}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:var(--ec-button-background-color-common, var(--ec-color-blue-3));border-color:var(--ec-button-border-color-common, var(--ec-color-blue-4));color:var(--ec-color-primary-light)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon-common, var(--ec-color-primary-light))}.ec-button-common:active:not(:disabled){background-color:var(--ec-button-background-color-common-active, var(--ec-color-blue-4));border-color:var(--ec-button-border-color-common-active, var(--ec-color-blue-6))}.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:var(--ec-button-color-icon, var(--ec-color-icon))}.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:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{opacity:.5}.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-text{background-color:transparent;color:var(--ec-color-primary-dark)}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, var(--ec-color-icon))}.ec-button-text:active:not(:disabled){background-color:transparent;color:var(--ec-color-primary-dark)}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-color-interactive)}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled){background-color:transparent;color:var(--ec-color-interactive)}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-button-background-color-danger, var(--ec-color-danger));border-color:var(--ec-button-border-color-danger, var(--ec-color-red-4));color:var(--ec-button-color-danger, var(--ec-color-primary-light))}.ec-button-danger .ec-icon{color:var(--ec-button-color-icon-danger, var(--ec-color-primary-light))}.ec-button-danger:active:not(:disabled){background-color:var(--ec-button-background-color-danger-active, var(--ec-color-red-4))}.ec-button-danger-text{background-color:transparent;color: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){background-color:transparent;color:var(--ec-color-danger)}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{height:2rem;line-height:1.25;padding:.3125rem .5rem;align-items:center;background-color:var(--ec-background-color);display:flex;cursor:pointer;font-size:var(--ec-font-size-action);line-height:1.25rem;justify-content:center;border:.0625rem solid transparent;border-radius:var(--ec-border-radius);position:relative}button.is-selected,button.is-highlighted{background-color:var(--ec-background-color-selected)}button:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;outline:none}button:active{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}button:disabled,button.is-disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy);color:var(--ec-color-secondary-dark);opacity:.65;cursor:default}button .label{align-items:center;display:flex;flex:auto}button .ec-icon{flex:0 0 auto}button .ec-icon+.label{margin:0 .375rem}button .label{white-space:nowrap;justify-content:center}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}: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}.badge{border:.125rem solid rgb(255,255,255);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:#7e579b;margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{border-radius:var(--ec-border-radius);align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:1.5rem;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem;justify-content:center}:host(.is-tab) button:hover{color:#354751}:host(.is-tab) button.active{color:#354751;background-color:#d2d7d9}:host(.is-tab) button:focus{outline:none}:host(.is-tab) button:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}:host(.is-tab) button.is-disabled{color:var(--ec-color-hint-dark);cursor:default}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:#354751;background-color:#d2d7d9}.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}\n"] }]
194
+ args: [{ selector: 'ec-button', template: "<button id=\"{{id}}_button\"\r\n class=\"ec-button-{{customTemplate ? 'custom' : type}}\"\r\n [class.has-badge]=\"badge !== undefined\"\r\n tabindex=\"{{tabindex}}\"\r\n [type]=\"type === 'submit' || isSubmit ? 'submit' : 'button'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onClick($event)\"\r\n #element\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <ng-container *ngIf=\"customTemplate; else defaultTemplate\">\r\n <ng-container *ngTemplateOutlet=\"customTemplate\"></ng-container>\r\n </ng-container>\r\n</button>\r\n\r\n<ng-template #defaultTemplate>\r\n <!-- Hidden when the button is not pending -->\r\n <div class=\"pending-container\" *ngIf=\"pending\">\r\n <i class=\"ec-icon {{pendingIcon}}\" id=\"{{id}}_pending\"></i>\r\n </div>\r\n\r\n <i class=\"ec-icon {{icon}}\" id=\"{{id}}_icon\" *ngIf=\"icon\"></i>\r\n\r\n <ng-container *ngIf=\"label\">\r\n <span id=\"{{id}}_label\" class=\"label\">{{label | translate}}</span>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"badge !== undefined\">\r\n <span id=\"{{id}}_badge\" class=\"badge\">{{badge}}</span>\r\n </ng-container>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{color:var(--ec-color-primary-dark);font-size:var(--ec-font-size-action);font-family:var(--ec-font-family);padding:0;margin:0;display:inline-block;-webkit-appearance:none;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{background-color:var(--ec-background-color-hover)}:host(.active) button:focus{border-color:transparent;box-shadow:none}:host(.active) .ec-button-secondary:focus{border-color:var(--ec-border-color)}: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:calc(var(--ec-font-size-icon) * .625);height:calc(var(--ec-font-size-icon) * .625)}: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-green-3));border-color:var(--ec-border-color);color:var(--ec-button-color-primary, var(--ec-color-primary-dark))}.ec-button-primary:active:not(:disabled),.ec-button-submit:active:not(:disabled){background-color:var(--ec-button-background-color-primary, var(--ec-color-green-3));color:var(--ec-button-color-primary, var(--ec-color-primary-dark))}.ec-button-primary .ec-icon,.ec-button-submit .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-icon))}.ec-button-secondary{background-color:var(--ec-background-color);border-color:var(--ec-button-border-color-secondary, var(--ec-border-color));color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary:active:not(:disabled){background-color:var(--ec-background-color);color:var(--ec-button-color-secondary, var(--ec-color-primary-dark))}.ec-button-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}.ec-button-common{background-color:#2d9ab8;border-color:#0084a9;color:var(--ec-color-primary-light)}.ec-button-common .ec-icon{color:var(--ec-button-color-icon, inherit)}.ec-button-common:active:not(:disabled){background-color:#0084a9;border-color:#005f7a}.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:var(--ec-button-color-icon, var(--ec-color-icon))}.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:disabled{background-color:transparent;border-color:transparent}.ec-button-icon:disabled .ec-icon{opacity:.5}.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-text{background-color:transparent;color:var(--ec-color-primary-dark)}.ec-button-text .ec-icon{color:var(--ec-button-color-icon-text, var(--ec-color-icon))}.ec-button-text:active:not(:disabled){background-color:transparent;color:var(--ec-color-primary-dark)}.ec-button-text:disabled{background-color:transparent;border-color:transparent}.ec-button-link{background-color:transparent;color:var(--ec-color-interactive)}.ec-button-link .ec-icon{color:var(--ec-button-color-icon-link, inherit)}.ec-button-link:active:not(:disabled){background-color:transparent;color:var(--ec-color-interactive)}.ec-button-link:disabled{background-color:transparent;border-color:transparent}.ec-button-danger{background-color:var(--ec-color-danger);border-color:var(--ec-border-color);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-color-danger)}.ec-button-danger-text{background-color:transparent;color: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){background-color:transparent;color:var(--ec-color-danger)}.ec-button-danger-text:disabled{background-color:transparent;border-color:transparent}.ec-button-custom{padding:0;background-color:transparent;height:auto}.ec-button-custom:disabled{background-color:transparent;border:0}button{height:2rem;line-height:1.25;padding:.3125rem .5rem;align-items:center;background-color:var(--ec-background-color);display:flex;cursor:pointer;font-size:var(--ec-font-size-action);line-height:1.25rem;justify-content:center;border:.0625rem solid transparent;border-radius:var(--ec-border-radius);position:relative}button.is-selected,button.is-highlighted{background-color:var(--ec-background-color-selected)}button:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;outline:none}button:active{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}button:disabled,button.is-disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color);color:var(--ec-color-secondary-dark);opacity:.65;cursor:default}button .label{align-items:center;display:flex;flex:auto}button .ec-icon{flex:0 0 auto}button .ec-icon+.label{margin:0 .375rem}button .label{white-space:nowrap;justify-content:center}button .ec-icon+.label{flex:none;margin-left:.25rem}button.has-badge{padding-right:.0625rem}: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}.badge{border:.125rem solid rgb(255,255,255);display:inline-block;line-height:.875rem;color:var(--ec-color-primary-light);text-align:center;vertical-align:baseline;white-space:nowrap;font-size:.625rem;font-weight:700;padding:0 .25rem;border-radius:.5625rem;min-width:1rem;background-color:#7e579b;margin-left:-.25rem;margin-top:-.75rem}:host(.is-tab) button{border-radius:var(--ec-border-radius);align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:1.5rem;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem;justify-content:center}:host(.is-tab) button:hover{color:#354751}:host(.is-tab) button.active{color:#354751;background-color:#d2d7d9}:host(.is-tab) button:focus{outline:none}:host(.is-tab) button:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}:host(.is-tab) button.is-disabled{color:var(--ec-color-hint-dark);cursor:default}:host(.is-tab) button.ec-button-icon{padding:0;justify-content:center;width:auto}:host(.is-tab) button:hover{background-color:transparent}:host(.is-tab).active button{color:#354751;background-color:#d2d7d9}.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}\n"] }]
195
195
  }], ctorParameters: function () { return []; }, propDecorators: { id: [{
196
196
  type: HostBinding,
197
197
  args: ['attr.id']
@@ -1541,10 +1541,10 @@ class TextboxComponent extends FormControlBase {
1541
1541
  }
1542
1542
  }
1543
1543
  TextboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
1544
- TextboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TextboxComponent, selector: "ec-textbox", inputs: { autocomplete: "autocomplete", type: "type", placeholder: "placeholder", maxlength: "maxlength", minlength: "minlength", rows: "rows", selectOnAutofocus: "selectOnAutofocus", upperCase: "upperCase" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["textboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'is-readonly': readonly}\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <div class=\"input-wrapper control-input\">\r\n <input *ngIf=\"type !== 'multi_line'\"\r\n #textboxInput\r\n email=\"{{type === 'email' ? true : false}}\"\r\n pattern=\"{{validationPattern}}\"\r\n type=\"{{type}}\"\r\n tabindex=\"{{tabindex}}\"\r\n title=\"{{tooltip}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.autocomplete]=\"autocomplete\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n (focusout)=\"focusOutEvent()\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n <textarea *ngIf=\"type === 'multi_line'\"\r\n [attr.rows]=\"rows\"\r\n #textboxInput\r\n tabindex=\"{{tabindex}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n </textarea>\r\n </div>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host 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}:host input{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;padding:.3125rem .5rem}:host input::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host input::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host input::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host input:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:required.is-empty{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input.ng-invalid.ng-touched{background-color:var(--ec-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-color-caution)}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy);color:var(--ec-color-secondary-dark);opacity:.65}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:auto;line-height:1.25;padding:.3125rem .5rem;resize:none;display:block}:host textarea::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host textarea::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:required.is-empty{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-color-caution)}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy);color:var(--ec-color-secondary-dark);opacity:.65}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:.0625rem}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus{position:relative;z-index:1;border-right-width:.0625rem}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
1544
+ TextboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TextboxComponent, selector: "ec-textbox", inputs: { autocomplete: "autocomplete", type: "type", placeholder: "placeholder", maxlength: "maxlength", minlength: "minlength", rows: "rows", selectOnAutofocus: "selectOnAutofocus", upperCase: "upperCase" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["textboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'is-readonly': readonly}\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <div class=\"input-wrapper control-input\">\r\n <input *ngIf=\"type !== 'multi_line'\"\r\n #textboxInput\r\n email=\"{{type === 'email' ? true : false}}\"\r\n pattern=\"{{validationPattern}}\"\r\n type=\"{{type}}\"\r\n tabindex=\"{{tabindex}}\"\r\n title=\"{{tooltip}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.autocomplete]=\"autocomplete\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n (focusout)=\"focusOutEvent()\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n <textarea *ngIf=\"type === 'multi_line'\"\r\n [attr.rows]=\"rows\"\r\n #textboxInput\r\n tabindex=\"{{tabindex}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n </textarea>\r\n </div>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host 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}:host input{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;padding:.3125rem .5rem}:host input::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host input::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host input::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host input:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:required.is-empty{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input.ng-invalid.ng-touched{background-color:var(--ec-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-color-caution)}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color);color:var(--ec-color-secondary-dark);opacity:.65}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:auto;line-height:1.25;padding:.3125rem .5rem;resize:none;display:block}:host textarea::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host textarea::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:required.is-empty{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-color-caution)}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color);color:var(--ec-color-secondary-dark);opacity:.65}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:.0625rem}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus{position:relative;z-index:1;border-right-width:.0625rem}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
1545
1545
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextboxComponent, decorators: [{
1546
1546
  type: Component,
1547
- args: [{ selector: 'ec-textbox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'is-readonly': readonly}\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <div class=\"input-wrapper control-input\">\r\n <input *ngIf=\"type !== 'multi_line'\"\r\n #textboxInput\r\n email=\"{{type === 'email' ? true : false}}\"\r\n pattern=\"{{validationPattern}}\"\r\n type=\"{{type}}\"\r\n tabindex=\"{{tabindex}}\"\r\n title=\"{{tooltip}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.autocomplete]=\"autocomplete\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n (focusout)=\"focusOutEvent()\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n <textarea *ngIf=\"type === 'multi_line'\"\r\n [attr.rows]=\"rows\"\r\n #textboxInput\r\n tabindex=\"{{tabindex}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n </textarea>\r\n </div>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host 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}:host input{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;padding:.3125rem .5rem}:host input::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host input::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host input::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host input:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:required.is-empty{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input.ng-invalid.ng-touched{background-color:var(--ec-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-color-caution)}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy);color:var(--ec-color-secondary-dark);opacity:.65}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:auto;line-height:1.25;padding:.3125rem .5rem;resize:none;display:block}:host textarea::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host textarea::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:required.is-empty{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-color-caution)}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy);color:var(--ec-color-secondary-dark);opacity:.65}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:.0625rem}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus{position:relative;z-index:1;border-right-width:.0625rem}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"] }]
1547
+ args: [{ selector: 'ec-textbox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'is-readonly': readonly}\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <div class=\"input-wrapper control-input\">\r\n <input *ngIf=\"type !== 'multi_line'\"\r\n #textboxInput\r\n email=\"{{type === 'email' ? true : false}}\"\r\n pattern=\"{{validationPattern}}\"\r\n type=\"{{type}}\"\r\n tabindex=\"{{tabindex}}\"\r\n title=\"{{tooltip}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.autocomplete]=\"autocomplete\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n (focusout)=\"focusOutEvent()\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n <textarea *ngIf=\"type === 'multi_line'\"\r\n [attr.rows]=\"rows\"\r\n #textboxInput\r\n tabindex=\"{{tabindex}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n </textarea>\r\n </div>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host 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}:host input{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;padding:.3125rem .5rem}:host input::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host input::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host input::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host input:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:required.is-empty{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input.ng-invalid.ng-touched{background-color:var(--ec-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-color-caution)}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color);color:var(--ec-color-secondary-dark);opacity:.65}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:auto;line-height:1.25;padding:.3125rem .5rem;resize:none;display:block}:host textarea::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host textarea::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:required.is-empty{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-color-caution)}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color);color:var(--ec-color-secondary-dark);opacity:.65}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:.0625rem}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus{position:relative;z-index:1;border-right-width:.0625rem}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"] }]
1548
1548
  }], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i2.TranslateService }]; }, propDecorators: { autocomplete: [{
1549
1549
  type: Input
1550
1550
  }], type: [{
@@ -2288,10 +2288,10 @@ class MenuComponent {
2288
2288
  }
2289
2289
  }
2290
2290
  MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: WindowService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component });
2291
- MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, 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 }], ngImport: i0, template: "<nav>\r\n <div class=\"parent\"\r\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n <header id=\"{{id}}_header\"\r\n class=\"text-heading-3 p-1\"\r\n [class.is-selected]=\"highlightedItemIndex === -1\"\r\n *ngIf=\"parent\"\r\n (click)=\"back($event)\">\r\n <div class=\"item-wrapper\">\r\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n </div>\r\n </header>\r\n\r\n <ul id=\"{{id}}_list\" class=\"py-1\">\r\n <li *ngFor=\"let item of items; index as i\"\r\n id=\"{{item.id || id + '_item' + i}}\"\r\n class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n [attr.disabled]=\"item.disabled\"\r\n [hidden]=\"item.hidden\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n (routerLinkActivated)=\"selectItem($event, item)\"\r\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n (click)=\"selectItem($event, item)\">\r\n\r\n <a *ngIf=\"item.url && !item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams || null\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <a *ngIf=\"item.url && item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\"\r\n href=\"{{item.url}}\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <div *ngIf=\"!item.url\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\">\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </div>\r\n </li>\r\n </ul>\r\n\r\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n </div>\r\n\r\n <!-- Child menu (Rendered to the right) -->\r\n <ec-menu *ngIf=\"selected?.items\"\r\n id=\"{{id}}_child\"\r\n class=\"child\"\r\n [parent]=\"selected\"\r\n [items]=\"selected?.items\"\r\n [showNoItems]=\"true\"\r\n [templateType]=\"templateType\"\r\n [enableKeyNav]=\"true\"\r\n [truncateItems]=\"truncateItems\"\r\n (selectedChanged)=\"onSelection($event)\"\r\n (menuClosed)=\"toggleChildMenu(false)\">\r\n </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n let-item>\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n let-item>\r\n\r\n <i class=\"ec-icon icon-check ec-icon-sm\" *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n <i class=\"ec-icon {{item.icon}} ml-2\" *ngIf=\"item.icon\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n let-item>\r\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n <i class=\"ec-icon {{item.icon}}\" *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-font-size-action);font-weight:400;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{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}ul li.is-disabled .item-wrapper{color:var(--ec-color-secondary-dark);opacity:.65}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{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.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;color:inherit}.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 .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}: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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "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: "pipe", type: i2.TranslatePipe, name: "translate" }] });
2291
+ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, 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 }], ngImport: i0, template: "<nav>\r\n <div class=\"parent\"\r\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n <header id=\"{{id}}_header\"\r\n class=\"text-heading-3 p-1\"\r\n [class.is-selected]=\"highlightedItemIndex === -1\"\r\n *ngIf=\"parent\"\r\n (click)=\"back($event)\">\r\n <div class=\"item-wrapper\">\r\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n </div>\r\n </header>\r\n\r\n <ul id=\"{{id}}_list\" class=\"py-1\">\r\n <li *ngFor=\"let item of items; index as i\"\r\n id=\"{{item.id || id + '_item' + i}}\"\r\n class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n [attr.disabled]=\"item.disabled\"\r\n [hidden]=\"item.hidden\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n (routerLinkActivated)=\"selectItem($event, item)\"\r\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n (click)=\"selectItem($event, item)\">\r\n\r\n <a *ngIf=\"item.url && !item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams || null\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <a *ngIf=\"item.url && item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\"\r\n href=\"{{item.url}}\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <div *ngIf=\"!item.url\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\">\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </div>\r\n </li>\r\n </ul>\r\n\r\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n </div>\r\n\r\n <!-- Child menu (Rendered to the right) -->\r\n <ec-menu *ngIf=\"selected?.items\"\r\n id=\"{{id}}_child\"\r\n class=\"child\"\r\n [parent]=\"selected\"\r\n [items]=\"selected?.items\"\r\n [showNoItems]=\"true\"\r\n [templateType]=\"templateType\"\r\n [enableKeyNav]=\"true\"\r\n [truncateItems]=\"truncateItems\"\r\n (selectedChanged)=\"onSelection($event)\"\r\n (menuClosed)=\"toggleChildMenu(false)\">\r\n </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n let-item>\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n let-item>\r\n\r\n <i class=\"ec-icon icon-check ec-icon-sm\" *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n <i class=\"ec-icon {{item.icon}} ml-2\" *ngIf=\"item.icon\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n let-item>\r\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n <i class=\"ec-icon {{item.icon}}\" *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;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{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}ul li.is-disabled .item-wrapper{color:var(--ec-color-secondary-dark);opacity:.65}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{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.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;color:inherit}.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 .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}: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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "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: "pipe", type: i2.TranslatePipe, name: "translate" }] });
2292
2292
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, decorators: [{
2293
2293
  type: Component,
2294
- args: [{ selector: 'ec-menu', template: "<nav>\r\n <div class=\"parent\"\r\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n <header id=\"{{id}}_header\"\r\n class=\"text-heading-3 p-1\"\r\n [class.is-selected]=\"highlightedItemIndex === -1\"\r\n *ngIf=\"parent\"\r\n (click)=\"back($event)\">\r\n <div class=\"item-wrapper\">\r\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n </div>\r\n </header>\r\n\r\n <ul id=\"{{id}}_list\" class=\"py-1\">\r\n <li *ngFor=\"let item of items; index as i\"\r\n id=\"{{item.id || id + '_item' + i}}\"\r\n class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n [attr.disabled]=\"item.disabled\"\r\n [hidden]=\"item.hidden\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n (routerLinkActivated)=\"selectItem($event, item)\"\r\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n (click)=\"selectItem($event, item)\">\r\n\r\n <a *ngIf=\"item.url && !item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams || null\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <a *ngIf=\"item.url && item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\"\r\n href=\"{{item.url}}\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <div *ngIf=\"!item.url\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\">\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </div>\r\n </li>\r\n </ul>\r\n\r\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n </div>\r\n\r\n <!-- Child menu (Rendered to the right) -->\r\n <ec-menu *ngIf=\"selected?.items\"\r\n id=\"{{id}}_child\"\r\n class=\"child\"\r\n [parent]=\"selected\"\r\n [items]=\"selected?.items\"\r\n [showNoItems]=\"true\"\r\n [templateType]=\"templateType\"\r\n [enableKeyNav]=\"true\"\r\n [truncateItems]=\"truncateItems\"\r\n (selectedChanged)=\"onSelection($event)\"\r\n (menuClosed)=\"toggleChildMenu(false)\">\r\n </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n let-item>\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n let-item>\r\n\r\n <i class=\"ec-icon icon-check ec-icon-sm\" *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n <i class=\"ec-icon {{item.icon}} ml-2\" *ngIf=\"item.icon\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n let-item>\r\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n <i class=\"ec-icon {{item.icon}}\" *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-font-size-action);font-weight:400;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{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}ul li.is-disabled .item-wrapper{color:var(--ec-color-secondary-dark);opacity:.65}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{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.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;color:inherit}.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 .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}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
2294
+ args: [{ selector: 'ec-menu', template: "<nav>\r\n <div class=\"parent\"\r\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n <header id=\"{{id}}_header\"\r\n class=\"text-heading-3 p-1\"\r\n [class.is-selected]=\"highlightedItemIndex === -1\"\r\n *ngIf=\"parent\"\r\n (click)=\"back($event)\">\r\n <div class=\"item-wrapper\">\r\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n </div>\r\n </header>\r\n\r\n <ul id=\"{{id}}_list\" class=\"py-1\">\r\n <li *ngFor=\"let item of items; index as i\"\r\n id=\"{{item.id || id + '_item' + i}}\"\r\n class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n [attr.disabled]=\"item.disabled\"\r\n [hidden]=\"item.hidden\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n (routerLinkActivated)=\"selectItem($event, item)\"\r\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n (click)=\"selectItem($event, item)\">\r\n\r\n <a *ngIf=\"item.url && !item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams || null\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <a *ngIf=\"item.url && item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\"\r\n href=\"{{item.url}}\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <div *ngIf=\"!item.url\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\">\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </div>\r\n </li>\r\n </ul>\r\n\r\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n </div>\r\n\r\n <!-- Child menu (Rendered to the right) -->\r\n <ec-menu *ngIf=\"selected?.items\"\r\n id=\"{{id}}_child\"\r\n class=\"child\"\r\n [parent]=\"selected\"\r\n [items]=\"selected?.items\"\r\n [showNoItems]=\"true\"\r\n [templateType]=\"templateType\"\r\n [enableKeyNav]=\"true\"\r\n [truncateItems]=\"truncateItems\"\r\n (selectedChanged)=\"onSelection($event)\"\r\n (menuClosed)=\"toggleChildMenu(false)\">\r\n </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n let-item>\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n let-item>\r\n\r\n <i class=\"ec-icon icon-check ec-icon-sm\" *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n <i class=\"ec-icon {{item.icon}} ml-2\" *ngIf=\"item.icon\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n let-item>\r\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n <i class=\"ec-icon {{item.icon}}\" *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;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{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}ul li.is-disabled .item-wrapper{color:var(--ec-color-secondary-dark);opacity:.65}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{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.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;color:inherit}.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 .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}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
2295
2295
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: WindowService }, { type: ScrollService }]; }, propDecorators: { id: [{
2296
2296
  type: Input
2297
2297
  }], attrId: [{
@@ -3109,10 +3109,10 @@ class ComboboxComponent extends FormControlBase {
3109
3109
  }
3110
3110
  }
3111
3111
  ComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ComboboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i2.TranslateService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component });
3112
- ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ComboboxComponent, selector: "ec-combobox", inputs: { addNew: "addNew", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText" }, 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}}\"\r\n [ngClass]=\"{'open': menuStatus === 'visible',\r\n 'invalid': formModel.touched && formModel.invalid,\r\n 'has-icon': (templateType === 'iconAndLabel' && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n 'is-readonly': readonly,\r\n 'is-disabled': formModel.disabled,\r\n 'is-always-open': alwaysOpen}\">\r\n\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors}}</span>\r\n </label>\r\n\r\n <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\" *ecPopup=\"dropdownmenu\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n <ec-textbox class=\"textbox-group-input mb-0\"\r\n #textbox\r\n [id]=\"id\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [maxlength]=\"maxlength\"\r\n [minlength]=\"minlength\"\r\n [placeholder]=\"effectivePlaceholder\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n (input)=\"textboxValueChanged($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n (focusout)=\"onBlur()\"\r\n [upperCase]=\"upperCase\"\r\n [pending]=\"pending && alwaysOpen\"\r\n [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n <ec-button class=\"textbox-group-btn-right\"\r\n *ngIf=\"!hideToggleButton\"\r\n [id]=\"id + '_button'\"\r\n [disabled]=\"formModel.disabled\"\r\n icon=\"icon-caret-down\"\r\n [tabindex]=\"-1\"\r\n type=\"secondary\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"></ec-button>\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n <div class=\"popup\"\r\n ecOverlay\r\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n <button class=\"add-new\"\r\n id=\"{{id}}_addNew\"\r\n #addNewButton\r\n [class.is-selected]=\"addNewSelected\"\r\n *ngIf=\"addNew\"\r\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n\r\n (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\" translate>Add new...</span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong class=\"ec-util-truncate\" [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong></span>\r\n </span>\r\n <i class=\"ec-icon icon-add\"></i>\r\n </button>\r\n\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n [ngClass]=\"menuElementClasses\"\r\n [templateType]=\"templateType\"\r\n [customMenuTemplate]=\"customMenuTemplate\"\r\n [showNoItems]=\"!hideNoMatches\"\r\n [noDataText]=\"noMatchesText\"\r\n [items]=\"filteredOptions\"\r\n [selected]=\"selectedItem\"\r\n (selectedChanged)=\"selectedChanged($event)\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptions.length}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}: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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}.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{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);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 .ec-icon{filter:grayscale(100%);opacity:.65}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:.0625rem;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}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{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25;padding:.25rem .5rem;align-items:center;background-color:var(--ec-background-color);display:flex;cursor:pointer;border:0;width:100%}.add-new.is-selected,.add-new.is-highlighted{background-color:var(--ec-background-color-selected)}.add-new:focus{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}.add-new:active{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}.add-new:disabled,.add-new.is-disabled{color:var(--ec-color-secondary-dark);opacity:.65;cursor:default}.add-new .label{align-items:center;display:flex;flex:auto}.add-new .ec-icon+.label{margin:0 .375rem}.add-new:hover:not(:active),.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:active .ec-icon{color:inherit}.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 ::ng-deep button .ec-icon{background-size:1em;background-position:center}.open:not(.is-always-open) .textbox-group ec-textbox ::ng-deep input{border-color:var(--ec-border-color-legacy);box-shadow:none}.open:not(.is-always-open) .textbox-group ec-button ::ng-deep button{background-color:var(--ec-background-color-hover);box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "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: "pipe", type: i2.TranslatePipe, name: "translate" }] });
3112
+ ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ComboboxComponent, selector: "ec-combobox", inputs: { addNew: "addNew", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText" }, 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}}\"\r\n [ngClass]=\"{'open': menuStatus === 'visible',\r\n 'invalid': formModel.touched && formModel.invalid,\r\n 'has-icon': (templateType === 'iconAndLabel' && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n 'is-readonly': readonly,\r\n 'is-disabled': formModel.disabled,\r\n 'is-always-open': alwaysOpen}\">\r\n\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors}}</span>\r\n </label>\r\n\r\n <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\" *ecPopup=\"dropdownmenu\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n <ec-textbox class=\"textbox-group-input mb-0\"\r\n #textbox\r\n [id]=\"id\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [maxlength]=\"maxlength\"\r\n [minlength]=\"minlength\"\r\n [placeholder]=\"effectivePlaceholder\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n (input)=\"textboxValueChanged($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n (focusout)=\"onBlur()\"\r\n [upperCase]=\"upperCase\"\r\n [pending]=\"pending && alwaysOpen\"\r\n [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n <ec-button class=\"textbox-group-btn-right\"\r\n *ngIf=\"!hideToggleButton\"\r\n [id]=\"id + '_button'\"\r\n [disabled]=\"formModel.disabled\"\r\n icon=\"icon-caret-down\"\r\n [tabindex]=\"-1\"\r\n type=\"secondary\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"></ec-button>\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n <div class=\"popup\"\r\n ecOverlay\r\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n <button class=\"add-new\"\r\n id=\"{{id}}_addNew\"\r\n #addNewButton\r\n [class.is-selected]=\"addNewSelected\"\r\n *ngIf=\"addNew\"\r\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n\r\n (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\" translate>Add new...</span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong class=\"ec-util-truncate\" [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong></span>\r\n </span>\r\n <i class=\"ec-icon icon-add\"></i>\r\n </button>\r\n\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n [ngClass]=\"menuElementClasses\"\r\n [templateType]=\"templateType\"\r\n [customMenuTemplate]=\"customMenuTemplate\"\r\n [showNoItems]=\"!hideNoMatches\"\r\n [noDataText]=\"noMatchesText\"\r\n [items]=\"filteredOptions\"\r\n [selected]=\"selectedItem\"\r\n (selectedChanged)=\"selectedChanged($event)\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptions.length}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}: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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}.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{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);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 .ec-icon{filter:grayscale(100%);opacity:.65}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:.0625rem;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}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{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25;padding:.25rem .5rem;align-items:center;background-color:var(--ec-background-color);display:flex;cursor:pointer;border:0;width:100%}.add-new.is-selected,.add-new.is-highlighted{background-color:var(--ec-background-color-selected)}.add-new:focus{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}.add-new:active{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}.add-new:disabled,.add-new.is-disabled{color:var(--ec-color-secondary-dark);opacity:.65;cursor:default}.add-new .label{align-items:center;display:flex;flex:auto}.add-new .ec-icon+.label{margin:0 .375rem}.add-new:hover:not(:active),.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:active .ec-icon{color:inherit}.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 ::ng-deep button .ec-icon{background-size:1em;background-position:center}.open:not(.is-always-open) .textbox-group ec-textbox ::ng-deep input{border-color:var(--ec-border-color);box-shadow:none}.open:not(.is-always-open) .textbox-group ec-button ::ng-deep button{background-color:var(--ec-background-color-hover);box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "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: "pipe", type: i2.TranslatePipe, name: "translate" }] });
3113
3113
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ComboboxComponent, decorators: [{
3114
3114
  type: Component,
3115
- args: [{ selector: 'ec-combobox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'open': menuStatus === 'visible',\r\n 'invalid': formModel.touched && formModel.invalid,\r\n 'has-icon': (templateType === 'iconAndLabel' && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n 'is-readonly': readonly,\r\n 'is-disabled': formModel.disabled,\r\n 'is-always-open': alwaysOpen}\">\r\n\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors}}</span>\r\n </label>\r\n\r\n <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\" *ecPopup=\"dropdownmenu\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n <ec-textbox class=\"textbox-group-input mb-0\"\r\n #textbox\r\n [id]=\"id\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [maxlength]=\"maxlength\"\r\n [minlength]=\"minlength\"\r\n [placeholder]=\"effectivePlaceholder\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n (input)=\"textboxValueChanged($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n (focusout)=\"onBlur()\"\r\n [upperCase]=\"upperCase\"\r\n [pending]=\"pending && alwaysOpen\"\r\n [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n <ec-button class=\"textbox-group-btn-right\"\r\n *ngIf=\"!hideToggleButton\"\r\n [id]=\"id + '_button'\"\r\n [disabled]=\"formModel.disabled\"\r\n icon=\"icon-caret-down\"\r\n [tabindex]=\"-1\"\r\n type=\"secondary\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"></ec-button>\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n <div class=\"popup\"\r\n ecOverlay\r\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n <button class=\"add-new\"\r\n id=\"{{id}}_addNew\"\r\n #addNewButton\r\n [class.is-selected]=\"addNewSelected\"\r\n *ngIf=\"addNew\"\r\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n\r\n (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\" translate>Add new...</span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong class=\"ec-util-truncate\" [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong></span>\r\n </span>\r\n <i class=\"ec-icon icon-add\"></i>\r\n </button>\r\n\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n [ngClass]=\"menuElementClasses\"\r\n [templateType]=\"templateType\"\r\n [customMenuTemplate]=\"customMenuTemplate\"\r\n [showNoItems]=\"!hideNoMatches\"\r\n [noDataText]=\"noMatchesText\"\r\n [items]=\"filteredOptions\"\r\n [selected]=\"selectedItem\"\r\n (selectedChanged)=\"selectedChanged($event)\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptions.length}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}: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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}.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{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);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 .ec-icon{filter:grayscale(100%);opacity:.65}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:.0625rem;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}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{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25;padding:.25rem .5rem;align-items:center;background-color:var(--ec-background-color);display:flex;cursor:pointer;border:0;width:100%}.add-new.is-selected,.add-new.is-highlighted{background-color:var(--ec-background-color-selected)}.add-new:focus{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}.add-new:active{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}.add-new:disabled,.add-new.is-disabled{color:var(--ec-color-secondary-dark);opacity:.65;cursor:default}.add-new .label{align-items:center;display:flex;flex:auto}.add-new .ec-icon+.label{margin:0 .375rem}.add-new:hover:not(:active),.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:active .ec-icon{color:inherit}.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 ::ng-deep button .ec-icon{background-size:1em;background-position:center}.open:not(.is-always-open) .textbox-group ec-textbox ::ng-deep input{border-color:var(--ec-border-color-legacy);box-shadow:none}.open:not(.is-always-open) .textbox-group ec-button ::ng-deep button{background-color:var(--ec-background-color-hover);box-shadow:none}\n"] }]
3115
+ args: [{ selector: 'ec-combobox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'open': menuStatus === 'visible',\r\n 'invalid': formModel.touched && formModel.invalid,\r\n 'has-icon': (templateType === 'iconAndLabel' && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n 'is-readonly': readonly,\r\n 'is-disabled': formModel.disabled,\r\n 'is-always-open': alwaysOpen}\">\r\n\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors}}</span>\r\n </label>\r\n\r\n <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\" *ecPopup=\"dropdownmenu\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n <ec-textbox class=\"textbox-group-input mb-0\"\r\n #textbox\r\n [id]=\"id\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [maxlength]=\"maxlength\"\r\n [minlength]=\"minlength\"\r\n [placeholder]=\"effectivePlaceholder\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n (input)=\"textboxValueChanged($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n (focusout)=\"onBlur()\"\r\n [upperCase]=\"upperCase\"\r\n [pending]=\"pending && alwaysOpen\"\r\n [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n <ec-button class=\"textbox-group-btn-right\"\r\n *ngIf=\"!hideToggleButton\"\r\n [id]=\"id + '_button'\"\r\n [disabled]=\"formModel.disabled\"\r\n icon=\"icon-caret-down\"\r\n [tabindex]=\"-1\"\r\n type=\"secondary\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"></ec-button>\r\n</ng-template>\r\n\r\n<ng-template #dropdownmenu>\r\n <div class=\"popup\"\r\n ecOverlay\r\n [status]=\"pending && !alwaysOpen ? 'pending' : 'hasData'\">\r\n\r\n <button class=\"add-new\"\r\n id=\"{{id}}_addNew\"\r\n #addNewButton\r\n [class.is-selected]=\"addNewSelected\"\r\n *ngIf=\"addNew\"\r\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n\r\n (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\" translate>Add new...</span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong class=\"ec-util-truncate\" [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong></span>\r\n </span>\r\n <i class=\"ec-icon icon-add\"></i>\r\n </button>\r\n\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n [ngClass]=\"menuElementClasses\"\r\n [templateType]=\"templateType\"\r\n [customMenuTemplate]=\"customMenuTemplate\"\r\n [showNoItems]=\"!hideNoMatches\"\r\n [noDataText]=\"noMatchesText\"\r\n [items]=\"filteredOptions\"\r\n [selected]=\"selectedItem\"\r\n (selectedChanged)=\"selectedChanged($event)\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptions.length}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}: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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}.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{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);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 .ec-icon{filter:grayscale(100%);opacity:.65}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:.0625rem;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}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{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25;padding:.25rem .5rem;align-items:center;background-color:var(--ec-background-color);display:flex;cursor:pointer;border:0;width:100%}.add-new.is-selected,.add-new.is-highlighted{background-color:var(--ec-background-color-selected)}.add-new:focus{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}.add-new:active{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}.add-new:disabled,.add-new.is-disabled{color:var(--ec-color-secondary-dark);opacity:.65;cursor:default}.add-new .label{align-items:center;display:flex;flex:auto}.add-new .ec-icon+.label{margin:0 .375rem}.add-new:hover:not(:active),.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:active .ec-icon{color:inherit}.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 ::ng-deep button .ec-icon{background-size:1em;background-position:center}.open:not(.is-always-open) .textbox-group ec-textbox ::ng-deep input{border-color:var(--ec-border-color);box-shadow:none}.open:not(.is-always-open) .textbox-group ec-button ::ng-deep button{background-color:var(--ec-background-color-hover);box-shadow:none}\n"] }]
3116
3116
  }], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i2.TranslateService }, { type: ScrollService }]; }, propDecorators: { onResize: [{
3117
3117
  type: HostListener,
3118
3118
  args: ['window:resize']
@@ -3333,10 +3333,10 @@ class DropdownComponent {
3333
3333
  }
3334
3334
  }
3335
3335
  DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3336
- DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DropdownComponent, 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" }, 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\">\r\n <ec-button [disabled]=\"disabled\"\r\n id=\"{{id}}_toggle\"\r\n #dropdownToggle\r\n [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\r\n *ecPopup=\"dropdownMenu\"\r\n [label]=\"label\"\r\n [icon]=\"icon\"\r\n [tabindex]=\"tabindex\"\r\n [type]=\"buttonType\"\r\n [customTemplate]=\"buttonCustomTemplate\"\r\n [pending]=\"pending\"\r\n title=\"{{buttonTitle}}\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n [autofocus]=\"autofocus\">\r\n </ec-button>\r\n <span class=\"arrow is-{{buttonType}}\"\r\n *ngIf=\"showArrow\"\r\n [class.is-disabled]=\"disabled\">\r\n <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\r\n </span>\r\n</div>\r\n\r\n<ng-template #dropdownMenu>\r\n <div id=\"{{id}}_popup\"\r\n class=\"popup\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [message]=\"status?.message\"\r\n [displayAsMask]=\"true\">\r\n <!-- Dropdown Menu Title -->\r\n <header id=\"{{id}}_title\"\r\n class=\"text-heading-2 px-2 my-2\"\r\n *ngIf=\"menuTitle\">{{menuTitle}}\r\n </header>\r\n <!-- Dropdown Menu -->\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.wrap-items]=\"menuWidth\"\r\n [templateType]=\"menuTemplateType\"\r\n [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\r\n [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\r\n [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\r\n [items]=\"items\"\r\n [showNoItems]=\"true\"\r\n [enableKeyNav]=\"true\"\r\n [highlightedItem]=\"highlightedItem\"\r\n [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\r\n (selectedChanged)=\"selectedChanged($event)\">\r\n </ec-menu>\r\n <footer *ngIf=\"menuFooter\">{{menuFooter}}</footer>\r\n </div>\r\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-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-common .ec-icon{color:var(--ec-color-primary-light)}ec-button.has-arrow~.arrow.is-link .ec-icon{color:var(--ec-color-interactive)}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-icon-text, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-disabled .ec-icon{color:var(--ec-color-icon);opacity:.5}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:.0625rem solid var(--ec-border-color-legacy);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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "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"] }] });
3336
+ DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: DropdownComponent, 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" }, 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\">\r\n <ec-button [disabled]=\"disabled\"\r\n id=\"{{id}}_toggle\"\r\n #dropdownToggle\r\n [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\r\n *ecPopup=\"dropdownMenu\"\r\n [label]=\"label\"\r\n [icon]=\"icon\"\r\n [tabindex]=\"tabindex\"\r\n [type]=\"buttonType\"\r\n [customTemplate]=\"buttonCustomTemplate\"\r\n [pending]=\"pending\"\r\n title=\"{{buttonTitle}}\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n [autofocus]=\"autofocus\">\r\n </ec-button>\r\n <span class=\"arrow is-{{buttonType}}\"\r\n *ngIf=\"showArrow\"\r\n [class.is-disabled]=\"disabled\">\r\n <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\r\n </span>\r\n</div>\r\n\r\n<ng-template #dropdownMenu>\r\n <div id=\"{{id}}_popup\"\r\n class=\"popup\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [message]=\"status?.message\"\r\n [displayAsMask]=\"true\">\r\n <!-- Dropdown Menu Title -->\r\n <header id=\"{{id}}_title\"\r\n class=\"text-heading-2 px-2 my-2\"\r\n *ngIf=\"menuTitle\">{{menuTitle}}\r\n </header>\r\n <!-- Dropdown Menu -->\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.wrap-items]=\"menuWidth\"\r\n [templateType]=\"menuTemplateType\"\r\n [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\r\n [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\r\n [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\r\n [items]=\"items\"\r\n [showNoItems]=\"true\"\r\n [enableKeyNav]=\"true\"\r\n [highlightedItem]=\"highlightedItem\"\r\n [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\r\n (selectedChanged)=\"selectedChanged($event)\">\r\n </ec-menu>\r\n <footer *ngIf=\"menuFooter\">{{menuFooter}}</footer>\r\n </div>\r\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-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-common .ec-icon{color:var(--ec-color-primary-light)}ec-button.has-arrow~.arrow.is-link .ec-icon{color:var(--ec-color-interactive)}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-icon-text, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-disabled .ec-icon{color:var(--ec-color-icon);opacity:.5}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:.0625rem 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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "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"] }] });
3337
3337
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: DropdownComponent, decorators: [{
3338
3338
  type: Component,
3339
- args: [{ selector: 'ec-dropdown', template: "<div class=\"control\">\r\n <ec-button [disabled]=\"disabled\"\r\n id=\"{{id}}_toggle\"\r\n #dropdownToggle\r\n [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\r\n *ecPopup=\"dropdownMenu\"\r\n [label]=\"label\"\r\n [icon]=\"icon\"\r\n [tabindex]=\"tabindex\"\r\n [type]=\"buttonType\"\r\n [customTemplate]=\"buttonCustomTemplate\"\r\n [pending]=\"pending\"\r\n title=\"{{buttonTitle}}\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n [autofocus]=\"autofocus\">\r\n </ec-button>\r\n <span class=\"arrow is-{{buttonType}}\"\r\n *ngIf=\"showArrow\"\r\n [class.is-disabled]=\"disabled\">\r\n <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\r\n </span>\r\n</div>\r\n\r\n<ng-template #dropdownMenu>\r\n <div id=\"{{id}}_popup\"\r\n class=\"popup\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [message]=\"status?.message\"\r\n [displayAsMask]=\"true\">\r\n <!-- Dropdown Menu Title -->\r\n <header id=\"{{id}}_title\"\r\n class=\"text-heading-2 px-2 my-2\"\r\n *ngIf=\"menuTitle\">{{menuTitle}}\r\n </header>\r\n <!-- Dropdown Menu -->\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.wrap-items]=\"menuWidth\"\r\n [templateType]=\"menuTemplateType\"\r\n [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\r\n [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\r\n [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\r\n [items]=\"items\"\r\n [showNoItems]=\"true\"\r\n [enableKeyNav]=\"true\"\r\n [highlightedItem]=\"highlightedItem\"\r\n [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\r\n (selectedChanged)=\"selectedChanged($event)\">\r\n </ec-menu>\r\n <footer *ngIf=\"menuFooter\">{{menuFooter}}</footer>\r\n </div>\r\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-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-common .ec-icon{color:var(--ec-color-primary-light)}ec-button.has-arrow~.arrow.is-link .ec-icon{color:var(--ec-color-interactive)}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-icon-text, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-disabled .ec-icon{color:var(--ec-color-icon);opacity:.5}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:.0625rem solid var(--ec-border-color-legacy);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"] }]
3339
+ args: [{ selector: 'ec-dropdown', template: "<div class=\"control\">\r\n <ec-button [disabled]=\"disabled\"\r\n id=\"{{id}}_toggle\"\r\n #dropdownToggle\r\n [ngClass]=\"{'has-arrow':showArrow, 'active': menuStatus === 'visible', 'text-left': buttonAlignment === 'left', 'text-right': buttonAlignment === 'right'}\"\r\n *ecPopup=\"dropdownMenu\"\r\n [label]=\"label\"\r\n [icon]=\"icon\"\r\n [tabindex]=\"tabindex\"\r\n [type]=\"buttonType\"\r\n [customTemplate]=\"buttonCustomTemplate\"\r\n [pending]=\"pending\"\r\n title=\"{{buttonTitle}}\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n [autofocus]=\"autofocus\">\r\n </ec-button>\r\n <span class=\"arrow is-{{buttonType}}\"\r\n *ngIf=\"showArrow\"\r\n [class.is-disabled]=\"disabled\">\r\n <i class=\"ec-icon icon-caret-down\" [class.flip-y]=\"menuStatus === 'visible'\"></i>\r\n </span>\r\n</div>\r\n\r\n<ng-template #dropdownMenu>\r\n <div id=\"{{id}}_popup\"\r\n class=\"popup\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [message]=\"status?.message\"\r\n [displayAsMask]=\"true\">\r\n <!-- Dropdown Menu Title -->\r\n <header id=\"{{id}}_title\"\r\n class=\"text-heading-2 px-2 my-2\"\r\n *ngIf=\"menuTitle\">{{menuTitle}}\r\n </header>\r\n <!-- Dropdown Menu -->\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.wrap-items]=\"menuWidth\"\r\n [templateType]=\"menuTemplateType\"\r\n [style.width]=\"menuWidth ? menuWidth + 'px' : 'auto'\"\r\n [style.min-width]=\"menuMinWidth ? menuMinWidth + 'px' : 'auto'\"\r\n [style.height]=\"menuHeight ? menuHeight + 'px' : 'auto'\"\r\n [items]=\"items\"\r\n [showNoItems]=\"true\"\r\n [enableKeyNav]=\"true\"\r\n [highlightedItem]=\"highlightedItem\"\r\n [dropdownToggleButton]=\"dropdownToggleButton.buttonElement\"\r\n (selectedChanged)=\"selectedChanged($event)\">\r\n </ec-menu>\r\n <footer *ngIf=\"menuFooter\">{{menuFooter}}</footer>\r\n </div>\r\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-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-common .ec-icon{color:var(--ec-color-primary-light)}ec-button.has-arrow~.arrow.is-link .ec-icon{color:var(--ec-color-interactive)}ec-button.has-arrow~.arrow.is-primary .ec-icon{color:var(--ec-button-color-icon-primary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-secondary .ec-icon{color:var(--ec-button-color-icon-secondary, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-text .ec-icon{color:var(--ec-button-color-icon-text, var(--ec-color-icon))}ec-button.has-arrow~.arrow.is-disabled .ec-icon{color:var(--ec-color-icon);opacity:.5}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:.0625rem 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"] }]
3340
3340
  }], ctorParameters: function () { return []; }, propDecorators: { id: [{
3341
3341
  type: Input
3342
3342
  }], autofocus: [{
@@ -3705,10 +3705,10 @@ class FormGroupComponent {
3705
3705
  }
3706
3706
  }
3707
3707
  FormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormGroupComponent, deps: [{ token: ValidationMessageService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
3708
- FormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormGroupComponent, selector: "ec-form-group", inputs: { id: "id", label: "label", formGroup: "formGroup", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"formGroup?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <ng-content></ng-content>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
3708
+ FormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormGroupComponent, selector: "ec-form-group", inputs: { id: "id", label: "label", formGroup: "formGroup", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"formGroup?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <ng-content></ng-content>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
3709
3709
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormGroupComponent, decorators: [{
3710
3710
  type: Component,
3711
- args: [{ selector: 'ec-form-group', template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"formGroup?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <ng-content></ng-content>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"] }]
3711
+ args: [{ selector: 'ec-form-group', template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"formGroup?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <ng-content></ng-content>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"] }]
3712
3712
  }], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: i2.TranslateService }]; }, propDecorators: { id: [{
3713
3713
  type: Input
3714
3714
  }], attrId: [{
@@ -4612,10 +4612,10 @@ class RadioButtonComponent extends FormControlBase {
4612
4612
  }
4613
4613
  }
4614
4614
  RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RadioButtonComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component });
4615
- RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RadioButtonComponent, selector: "ec-radiobutton", inputs: { type: "type", options: "options", direction: "direction", name: "name" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["radioInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"control\"\r\n [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n <label *ngIf=\"label\"\r\n ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n\r\n\r\n <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n [ngClass]=\"currentClasses\"\r\n [class.is-disabled]=\"formModel.disabled\"\r\n [class.is-readonly]=\"readonly\">\r\n\r\n <!-- RadioButton type=\"toggle\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'toggle'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n tabindex=\"{{tabindex}}\"\r\n [value]=\"option.value\"\r\n #radioInput\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <label [attr.for]=\"inputId + i.toString()\"\r\n title=\"{{ option.tooltip | translate}}\">\r\n <i class=\"ec-icon {{option.icon}}\" *ngIf=\"option.icon\"></i>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\" *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n </label>\r\n </ng-container>\r\n <a>\r\n <div class=\"toggle-handle\"></div>\r\n </a>\r\n <div class=\"toggle-focused\"></div>\r\n </ng-container>\r\n\r\n <!-- RadioButton type=\"radio\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'radio'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <label class='radio-button'\r\n title=\"{{ option.tooltip | translate}}\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n class=\"input\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n value=\"{{option.value}}\"\r\n #radioInput\r\n tabindex=\"{{tabindex}}\"\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <span class=\"indicator\"></span>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n class=\"label\"\r\n *ngIf=\"option.label\"\r\n [innerHtml]=\"option.label | translate\"></span>\r\n </label>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.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}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:#1a1a231f;border:0}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-color-primary-dark)}.radio-group.is-readonly.radio-group-toggle{border-color:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive)}.input:disabled+.indicator{color:var(--ec-color-secondary-dark);background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color);opacity:.65}.input:disabled~.label{color:var(--ec-color-secondary-dark);opacity:.65}.indicator{background-color:var(--ec-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{height:2rem;line-height:1.25;padding:.375rem .5rem;padding-left:0;padding-right:0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-font-size-body);background-color:var(--ec-border-color-legacy);border-radius:var(--ec-border-radius);border:.0625rem solid var(--ec-border-color-legacy);min-height:2em;position:relative;color:var(--ec-color-hint-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:#0084a9}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:0 0 0 .125rem var(--ec-color-interactive);border-radius:var(--ec-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-background-color);border-radius:calc(var(--ec-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:.65;background-color:var(--ec-background-color-disabled);color:var(--ec-color-secondary-dark)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.radio-group-toggle.is-disabled a.toggle-handle{background-color:var(--ec-color-hint-light)}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: "pipe", type: i2.TranslatePipe, name: "translate" }] });
4615
+ RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RadioButtonComponent, selector: "ec-radiobutton", inputs: { type: "type", options: "options", direction: "direction", name: "name" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["radioInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"control\"\r\n [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n <label *ngIf=\"label\"\r\n ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n\r\n\r\n <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n [ngClass]=\"currentClasses\"\r\n [class.is-disabled]=\"formModel.disabled\"\r\n [class.is-readonly]=\"readonly\">\r\n\r\n <!-- RadioButton type=\"toggle\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'toggle'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n tabindex=\"{{tabindex}}\"\r\n [value]=\"option.value\"\r\n #radioInput\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <label [attr.for]=\"inputId + i.toString()\"\r\n title=\"{{ option.tooltip | translate}}\">\r\n <i class=\"ec-icon {{option.icon}}\" *ngIf=\"option.icon\"></i>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\" *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n </label>\r\n </ng-container>\r\n <a>\r\n <div class=\"toggle-handle\"></div>\r\n </a>\r\n <div class=\"toggle-focused\"></div>\r\n </ng-container>\r\n\r\n <!-- RadioButton type=\"radio\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'radio'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <label class='radio-button'\r\n title=\"{{ option.tooltip | translate}}\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n class=\"input\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n value=\"{{option.value}}\"\r\n #radioInput\r\n tabindex=\"{{tabindex}}\"\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <span class=\"indicator\"></span>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n class=\"label\"\r\n *ngIf=\"option.label\"\r\n [innerHtml]=\"option.label | translate\"></span>\r\n </label>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.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}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:#1a1a231f;border:0}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-color-primary-dark)}.radio-group.is-readonly.radio-group-toggle{border-color:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive)}.input:disabled+.indicator{color:var(--ec-color-secondary-dark);background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color);opacity:.65}.input:disabled~.label{color:var(--ec-color-secondary-dark);opacity:.65}.indicator{background-color:var(--ec-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{height:2rem;line-height:1.25;padding:.375rem .5rem;padding-left:0;padding-right:0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-font-size-body);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:.0625rem solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-hint-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:#0084a9}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:0 0 0 .125rem var(--ec-color-interactive);border-radius:var(--ec-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-background-color);border-radius:calc(var(--ec-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:.65;background-color:var(--ec-background-color-disabled);color:var(--ec-color-secondary-dark)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.radio-group-toggle.is-disabled a.toggle-handle{background-color:var(--ec-color-hint-light)}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: "pipe", type: i2.TranslatePipe, name: "translate" }] });
4616
4616
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RadioButtonComponent, decorators: [{
4617
4617
  type: Component,
4618
- args: [{ selector: 'ec-radiobutton', template: "<div class=\"control\"\r\n [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n <label *ngIf=\"label\"\r\n ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n\r\n\r\n <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n [ngClass]=\"currentClasses\"\r\n [class.is-disabled]=\"formModel.disabled\"\r\n [class.is-readonly]=\"readonly\">\r\n\r\n <!-- RadioButton type=\"toggle\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'toggle'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n tabindex=\"{{tabindex}}\"\r\n [value]=\"option.value\"\r\n #radioInput\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <label [attr.for]=\"inputId + i.toString()\"\r\n title=\"{{ option.tooltip | translate}}\">\r\n <i class=\"ec-icon {{option.icon}}\" *ngIf=\"option.icon\"></i>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\" *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n </label>\r\n </ng-container>\r\n <a>\r\n <div class=\"toggle-handle\"></div>\r\n </a>\r\n <div class=\"toggle-focused\"></div>\r\n </ng-container>\r\n\r\n <!-- RadioButton type=\"radio\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'radio'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <label class='radio-button'\r\n title=\"{{ option.tooltip | translate}}\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n class=\"input\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n value=\"{{option.value}}\"\r\n #radioInput\r\n tabindex=\"{{tabindex}}\"\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <span class=\"indicator\"></span>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n class=\"label\"\r\n *ngIf=\"option.label\"\r\n [innerHtml]=\"option.label | translate\"></span>\r\n </label>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.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}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:#1a1a231f;border:0}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-color-primary-dark)}.radio-group.is-readonly.radio-group-toggle{border-color:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive)}.input:disabled+.indicator{color:var(--ec-color-secondary-dark);background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color);opacity:.65}.input:disabled~.label{color:var(--ec-color-secondary-dark);opacity:.65}.indicator{background-color:var(--ec-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{height:2rem;line-height:1.25;padding:.375rem .5rem;padding-left:0;padding-right:0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-font-size-body);background-color:var(--ec-border-color-legacy);border-radius:var(--ec-border-radius);border:.0625rem solid var(--ec-border-color-legacy);min-height:2em;position:relative;color:var(--ec-color-hint-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:#0084a9}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:0 0 0 .125rem var(--ec-color-interactive);border-radius:var(--ec-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-background-color);border-radius:calc(var(--ec-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:.65;background-color:var(--ec-background-color-disabled);color:var(--ec-color-secondary-dark)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.radio-group-toggle.is-disabled a.toggle-handle{background-color:var(--ec-color-hint-light)}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"] }]
4618
+ args: [{ selector: 'ec-radiobutton', template: "<div class=\"control\"\r\n [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n <label *ngIf=\"label\"\r\n ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n\r\n\r\n <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n [ngClass]=\"currentClasses\"\r\n [class.is-disabled]=\"formModel.disabled\"\r\n [class.is-readonly]=\"readonly\">\r\n\r\n <!-- RadioButton type=\"toggle\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'toggle'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n tabindex=\"{{tabindex}}\"\r\n [value]=\"option.value\"\r\n #radioInput\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <label [attr.for]=\"inputId + i.toString()\"\r\n title=\"{{ option.tooltip | translate}}\">\r\n <i class=\"ec-icon {{option.icon}}\" *ngIf=\"option.icon\"></i>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\" *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n </label>\r\n </ng-container>\r\n <a>\r\n <div class=\"toggle-handle\"></div>\r\n </a>\r\n <div class=\"toggle-focused\"></div>\r\n </ng-container>\r\n\r\n <!-- RadioButton type=\"radio\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'radio'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <label class='radio-button'\r\n title=\"{{ option.tooltip | translate}}\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n class=\"input\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n value=\"{{option.value}}\"\r\n #radioInput\r\n tabindex=\"{{tabindex}}\"\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <span class=\"indicator\"></span>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n class=\"label\"\r\n *ngIf=\"option.label\"\r\n [innerHtml]=\"option.label | translate\"></span>\r\n </label>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.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}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:#1a1a231f;border:0}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-color-primary-dark)}.radio-group.is-readonly.radio-group-toggle{border-color:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive)}.input:disabled+.indicator{color:var(--ec-color-secondary-dark);background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color);opacity:.65}.input:disabled~.label{color:var(--ec-color-secondary-dark);opacity:.65}.indicator{background-color:var(--ec-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{height:2rem;line-height:1.25;padding:.375rem .5rem;padding-left:0;padding-right:0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-font-size-body);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:.0625rem solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-hint-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:#0084a9}.radio-group-toggle input:checked:last-of-type~a{transform:translate(100%)}.radio-group-toggle input:focus~.toggle-focused{display:block}.radio-group-toggle .toggle-focused{position:absolute;inset:0;box-shadow:0 0 0 .125rem var(--ec-color-interactive);border-radius:var(--ec-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-background-color);border-radius:calc(var(--ec-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:.65;background-color:var(--ec-background-color-disabled);color:var(--ec-color-secondary-dark)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.radio-group-toggle.is-disabled a.toggle-handle{background-color:var(--ec-color-hint-light)}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"] }]
4619
4619
  }], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { type: [{
4620
4620
  type: Input
4621
4621
  }], options: [{
@@ -4697,10 +4697,10 @@ class SelectComponent extends FormControlBase {
4697
4697
  }
4698
4698
  }
4699
4699
  SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
4700
- SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectComponent, selector: "ec-select", inputs: { placeholder: "placeholder", options: "options", autoDefault: "autoDefault" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\"\r\n [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\r\n <label for=\"{{id}}_select\"\r\n *ngIf=\"label\"\r\n ngPreserveWhitespaces>{{label|translate}}</label>\r\n <select [attr.id]=\"inputId\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.required]=\"required\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <option *ngIf=\"!required\"\r\n [ngValue]=\"null\">{{placeholder}}</option>\r\n <option *ngFor=\"let option of options\"\r\n [ngValue]=\"option.value\">{{option.label}}</option>\r\n </select>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host 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}:host select{-webkit-appearance:none;appearance:none;border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M32 8L16 24 0 8z\"/></svg>');background-repeat:no-repeat;background-position:right .5rem center;background-size:.75rem,.75rem;padding:.3125rem 1.5rem .3125rem .5rem}:host select::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host select::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host select::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host select:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:required.is-empty{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-color-caution)}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy);color:var(--ec-color-secondary-dark);opacity:.65}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select:focus{position:static}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
4700
+ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectComponent, selector: "ec-select", inputs: { placeholder: "placeholder", options: "options", autoDefault: "autoDefault" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\"\r\n [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\r\n <label for=\"{{id}}_select\"\r\n *ngIf=\"label\"\r\n ngPreserveWhitespaces>{{label|translate}}</label>\r\n <select [attr.id]=\"inputId\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.required]=\"required\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <option *ngIf=\"!required\"\r\n [ngValue]=\"null\">{{placeholder}}</option>\r\n <option *ngFor=\"let option of options\"\r\n [ngValue]=\"option.value\">{{option.label}}</option>\r\n </select>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host 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}:host select{-webkit-appearance:none;appearance:none;border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M32 8L16 24 0 8z\"/></svg>');background-repeat:no-repeat;background-position:right .5rem center;background-size:.75rem,.75rem;padding:.3125rem 1.5rem .3125rem .5rem}:host select::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host select::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host select::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host select:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:required.is-empty{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-color-caution)}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color);color:var(--ec-color-secondary-dark);opacity:.65}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select:focus{position:static}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
4701
4701
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectComponent, decorators: [{
4702
4702
  type: Component,
4703
- args: [{ selector: 'ec-select', template: "<div class=\"control\"\r\n [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\r\n <label for=\"{{id}}_select\"\r\n *ngIf=\"label\"\r\n ngPreserveWhitespaces>{{label|translate}}</label>\r\n <select [attr.id]=\"inputId\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.required]=\"required\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <option *ngIf=\"!required\"\r\n [ngValue]=\"null\">{{placeholder}}</option>\r\n <option *ngFor=\"let option of options\"\r\n [ngValue]=\"option.value\">{{option.label}}</option>\r\n </select>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host 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}:host select{-webkit-appearance:none;appearance:none;border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M32 8L16 24 0 8z\"/></svg>');background-repeat:no-repeat;background-position:right .5rem center;background-size:.75rem,.75rem;padding:.3125rem 1.5rem .3125rem .5rem}:host select::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host select::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host select::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host select:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:required.is-empty{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-color-caution)}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy);color:var(--ec-color-secondary-dark);opacity:.65}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-legacy)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select:focus{position:static}\n"] }]
4703
+ args: [{ selector: 'ec-select', template: "<div class=\"control\"\r\n [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\r\n <label for=\"{{id}}_select\"\r\n *ngIf=\"label\"\r\n ngPreserveWhitespaces>{{label|translate}}</label>\r\n <select [attr.id]=\"inputId\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.required]=\"required\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <option *ngIf=\"!required\"\r\n [ngValue]=\"null\">{{placeholder}}</option>\r\n <option *ngFor=\"let option of options\"\r\n [ngValue]=\"option.value\">{{option.label}}</option>\r\n </select>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host 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}:host select{-webkit-appearance:none;appearance:none;border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M32 8L16 24 0 8z\"/></svg>');background-repeat:no-repeat;background-position:right .5rem center;background-size:.75rem,.75rem;padding:.3125rem 1.5rem .3125rem .5rem}:host select::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host select::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host select::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host select:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:required.is-empty{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-color-caution)}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color);color:var(--ec-color-secondary-dark);opacity:.65}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select:focus{position:static}\n"] }]
4704
4704
  }], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i0.ElementRef }]; }, propDecorators: { placeholder: [{
4705
4705
  type: Input
4706
4706
  }], options: [{
@@ -4773,10 +4773,10 @@ class TabsComponent {
4773
4773
  }
4774
4774
  }
4775
4775
  TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4776
- TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TabsComponent, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, ngImport: i0, template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n <a *ngIf=\"tab.url && !tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n class=\"tab\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n routerLinkActive=\"active\"\r\n [routerLink]=\"tab.url\"\r\n [queryParams]=\"tab.queryParams || null\"\r\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </a>\r\n\r\n <span *ngIf=\"!tab.url || tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n class=\"tab\"\r\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </span>\r\n </li>\r\n</ul> ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-border-color-legacy);padding-left:1rem;padding-right:1rem}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:.25rem}.tabs .tab{align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:2rem;min-width:2rem;padding-left:.5rem;padding-right:.5rem;justify-content:center;margin-bottom:-1px;border-top-right-radius:var(--ec-border-radius);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.tabs .tab:hover{color:#354751}.tabs .tab.active{color:#354751;background-color:var(--ec-background-color-body);border-top-color:var(--ec-border-color-legacy);border-left-color:var(--ec-border-color-legacy);border-right-color:var(--ec-border-color-legacy)}.tabs .tab:focus{outline:none}.tabs .tab:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}.tabs .tab.is-disabled{color:var(--ec-color-hint-dark);cursor:default}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:last-child){margin-right:.25rem}.pills .tab{border-radius:var(--ec-border-radius);align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:1.5rem;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem;justify-content:center}.pills .tab:hover{color:#354751}.pills .tab.active{color:#354751;background-color:#d2d7d9}.pills .tab:focus{outline:none}.pills .tab:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}.pills .tab.is-disabled{color:var(--ec-color-hint-dark);cursor:default}.icon-only .tab{padding:0;justify-content:center}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
4776
+ TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TabsComponent, selector: "ec-tabs", inputs: { id: "id", tabindex: "tabindex", tabStyle: "tabStyle", tabs: ["tabGroup", "tabs"] }, ngImport: i0, template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n <a *ngIf=\"tab.url && !tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n class=\"tab\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n routerLinkActive=\"active\"\r\n [routerLink]=\"tab.url\"\r\n [queryParams]=\"tab.queryParams || null\"\r\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </a>\r\n\r\n <span *ngIf=\"!tab.url || tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n class=\"tab\"\r\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </span>\r\n </li>\r\n</ul> ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-border-color);padding-left:1rem;padding-right:1rem}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:.25rem}.tabs .tab{align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:2rem;min-width:2rem;padding-left:.5rem;padding-right:.5rem;justify-content:center;margin-bottom:-1px;border-top-right-radius:var(--ec-border-radius);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.tabs .tab:hover{color:#354751}.tabs .tab.active{color:#354751;background-color:var(--ec-background-color-body);border-top-color:var(--ec-border-color);border-left-color:var(--ec-border-color);border-right-color:var(--ec-border-color)}.tabs .tab:focus{outline:none}.tabs .tab:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}.tabs .tab.is-disabled{color:var(--ec-color-hint-dark);cursor:default}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:last-child){margin-right:.25rem}.pills .tab{border-radius:var(--ec-border-radius);align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:1.5rem;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem;justify-content:center}.pills .tab:hover{color:#354751}.pills .tab.active{color:#354751;background-color:#d2d7d9}.pills .tab:focus{outline:none}.pills .tab:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}.pills .tab.is-disabled{color:var(--ec-color-hint-dark);cursor:default}.icon-only .tab{padding:0;justify-content:center}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
4777
4777
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TabsComponent, decorators: [{
4778
4778
  type: Component,
4779
- args: [{ selector: 'ec-tabs', template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n <a *ngIf=\"tab.url && !tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n class=\"tab\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n routerLinkActive=\"active\"\r\n [routerLink]=\"tab.url\"\r\n [queryParams]=\"tab.queryParams || null\"\r\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </a>\r\n\r\n <span *ngIf=\"!tab.url || tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n class=\"tab\"\r\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </span>\r\n </li>\r\n</ul> ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-border-color-legacy);padding-left:1rem;padding-right:1rem}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:.25rem}.tabs .tab{align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:2rem;min-width:2rem;padding-left:.5rem;padding-right:.5rem;justify-content:center;margin-bottom:-1px;border-top-right-radius:var(--ec-border-radius);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.tabs .tab:hover{color:#354751}.tabs .tab.active{color:#354751;background-color:var(--ec-background-color-body);border-top-color:var(--ec-border-color-legacy);border-left-color:var(--ec-border-color-legacy);border-right-color:var(--ec-border-color-legacy)}.tabs .tab:focus{outline:none}.tabs .tab:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}.tabs .tab.is-disabled{color:var(--ec-color-hint-dark);cursor:default}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:last-child){margin-right:.25rem}.pills .tab{border-radius:var(--ec-border-radius);align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:1.5rem;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem;justify-content:center}.pills .tab:hover{color:#354751}.pills .tab.active{color:#354751;background-color:#d2d7d9}.pills .tab:focus{outline:none}.pills .tab:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}.pills .tab.is-disabled{color:var(--ec-color-hint-dark);cursor:default}.icon-only .tab{padding:0;justify-content:center}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"] }]
4779
+ args: [{ selector: 'ec-tabs', template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n <a *ngIf=\"tab.url && !tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n class=\"tab\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n routerLinkActive=\"active\"\r\n [routerLink]=\"tab.url\"\r\n [queryParams]=\"tab.queryParams || null\"\r\n [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </a>\r\n\r\n <span *ngIf=\"!tab.url || tab.disabled\"\r\n tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n class=\"tab\"\r\n [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n (keypress)=\"selectTab($event, tab)\"\r\n (click)=\"selectTab($event, tab)\">\r\n <i class=\"ec-icon {{tab.icon}}\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></i>\r\n <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n </span>\r\n </li>\r\n</ul> ", styles: [":host{display:block}ul{padding:0;margin:0;list-style:none}a{text-decoration:none}.tabs{display:flex;border-bottom:1px solid var(--ec-border-color);padding-left:1rem;padding-right:1rem}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:.25rem}.tabs .tab{align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:2rem;min-width:2rem;padding-left:.5rem;padding-right:.5rem;justify-content:center;margin-bottom:-1px;border-top-right-radius:var(--ec-border-radius);border-top-left-radius:var(--ec-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.tabs .tab:hover{color:#354751}.tabs .tab.active{color:#354751;background-color:var(--ec-background-color-body);border-top-color:var(--ec-border-color);border-left-color:var(--ec-border-color);border-right-color:var(--ec-border-color)}.tabs .tab:focus{outline:none}.tabs .tab:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}.tabs .tab.is-disabled{color:var(--ec-color-hint-dark);cursor:default}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:last-child){margin-right:.25rem}.pills .tab{border-radius:var(--ec-border-radius);align-items:center;border:1px solid transparent;color:var(--ec-color-secondary-dark);cursor:pointer;font-size:var(--ec-font-size-label);display:flex;height:1.5rem;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem;justify-content:center}.pills .tab:hover{color:#354751}.pills .tab.active{color:#354751;background-color:#d2d7d9}.pills .tab:focus{outline:none}.pills .tab:focus:not(.active):not(.is-disabled){border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1;box-shadow:none}.pills .tab.is-disabled{color:var(--ec-color-hint-dark);cursor:default}.icon-only .tab{padding:0;justify-content:center}.indicator{border:solid 2px rgb(111,28,138);background-color:#6f1c8a40;display:block;width:.625rem;height:.625rem;border-radius:50%}:host(.is-condensed) .pills li,:host(.is-condensed) .tabs li{margin-right:0}:host(.is-condensed) .tab{padding-left:.25rem;padding-right:.25rem}\n"] }]
4780
4780
  }], ctorParameters: function () { return []; }, propDecorators: { id: [{
4781
4781
  type: Input
4782
4782
  }], tabindex: [{
@@ -6031,13 +6031,13 @@ ResizableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
6031
6031
  ResizableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ResizableComponent, selector: "ec-resizable", usesInheritance: true, ngImport: i0, template: `<div class="content">
6032
6032
  <ng-content></ng-content>
6033
6033
  </div>
6034
- <div class="handle" (mousedown)="startDrag($event)"></div>`, isInline: true, styles: [":host{width:240px;max-width:480px;min-width:100px;position:relative;border-right:1px solid var(--ec-border-color-legacy);display:flex}:host.is-active{-webkit-user-select:none;user-select:none}:host.is-active .handle:after{background-color:var(--ec-color-interactive)}.handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}.handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}.handle:hover{cursor:col-resize}.handle:hover:after{background-color:var(--ec-color-interactive)}.content{overflow:hidden;display:flex;flex:1 1;min-height:0;min-width:0}.content ::ng-deep>*{flex:1 1;min-height:0;min-width:0}\n"] });
6034
+ <div class="handle" (mousedown)="startDrag($event)"></div>`, isInline: true, styles: [":host{width:240px;max-width:480px;min-width:100px;position:relative;border-right:1px solid var(--ec-border-color);display:flex}:host.is-active{-webkit-user-select:none;user-select:none}:host.is-active .handle:after{background-color:var(--ec-color-interactive)}.handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}.handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}.handle:hover{cursor:col-resize}.handle:hover:after{background-color:var(--ec-color-interactive)}.content{overflow:hidden;display:flex;flex:1 1;min-height:0;min-width:0}.content ::ng-deep>*{flex:1 1;min-height:0;min-width:0}\n"] });
6035
6035
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ResizableComponent, decorators: [{
6036
6036
  type: Component,
6037
6037
  args: [{ selector: 'ec-resizable', template: `<div class="content">
6038
6038
  <ng-content></ng-content>
6039
6039
  </div>
6040
- <div class="handle" (mousedown)="startDrag($event)"></div>`, styles: [":host{width:240px;max-width:480px;min-width:100px;position:relative;border-right:1px solid var(--ec-border-color-legacy);display:flex}:host.is-active{-webkit-user-select:none;user-select:none}:host.is-active .handle:after{background-color:var(--ec-color-interactive)}.handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}.handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}.handle:hover{cursor:col-resize}.handle:hover:after{background-color:var(--ec-color-interactive)}.content{overflow:hidden;display:flex;flex:1 1;min-height:0;min-width:0}.content ::ng-deep>*{flex:1 1;min-height:0;min-width:0}\n"] }]
6040
+ <div class="handle" (mousedown)="startDrag($event)"></div>`, styles: [":host{width:240px;max-width:480px;min-width:100px;position:relative;border-right:1px solid var(--ec-border-color);display:flex}:host.is-active{-webkit-user-select:none;user-select:none}:host.is-active .handle:after{background-color:var(--ec-color-interactive)}.handle{position:absolute;right:-7px;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter)}.handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}.handle:hover{cursor:col-resize}.handle:hover:after{background-color:var(--ec-color-interactive)}.content{overflow:hidden;display:flex;flex:1 1;min-height:0;min-width:0}.content ::ng-deep>*{flex:1 1;min-height:0;min-width:0}\n"] }]
6041
6041
  }], ctorParameters: function () {
6042
6042
  return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: CacheService }, { type: Document, decorators: [{
6043
6043
  type: Inject,
@@ -6606,7 +6606,7 @@ TableDetailRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
6606
6606
  <td [class.has-max-height]="maxHeight" class="table-detail-content {{contentClass}}" [attr.colspan]="contentColSpan">
6607
6607
  <div [style.max-height]="maxHeight"><ng-content></ng-content></div>
6608
6608
  </td>
6609
- `, isInline: true, styles: [":host{background-color:var(--ec-background-color-detail)}td:first-child{width:1.5rem;padding:.25rem 0!important;vertical-align:top}.table-detail-content{background-color:transparent;border-top:1px solid var(--ec-border-color-legacy);padding:1rem 2rem 1rem 0!important}.table-detail-content.has-max-height{padding:0!important}.table-detail-content.has-max-height>div{overflow-y:auto;padding:1rem 2rem 1rem 0}\n"] });
6609
+ `, isInline: true, styles: [":host{background-color:var(--ec-background-color-detail)}td:first-child{width:1.5rem;padding:.25rem 0!important;vertical-align:top}.table-detail-content{background-color:transparent;border-top:1px solid var(--ec-border-color);padding:1rem 2rem 1rem 0!important}.table-detail-content.has-max-height{padding:0!important}.table-detail-content.has-max-height>div{overflow-y:auto;padding:1rem 2rem 1rem 0}\n"] });
6610
6610
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableDetailRowComponent, decorators: [{
6611
6611
  type: Component,
6612
6612
  args: [{ selector: '[ecTableDetailRow]', template: `
@@ -6614,7 +6614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
6614
6614
  <td [class.has-max-height]="maxHeight" class="table-detail-content {{contentClass}}" [attr.colspan]="contentColSpan">
6615
6615
  <div [style.max-height]="maxHeight"><ng-content></ng-content></div>
6616
6616
  </td>
6617
- `, styles: [":host{background-color:var(--ec-background-color-detail)}td:first-child{width:1.5rem;padding:.25rem 0!important;vertical-align:top}.table-detail-content{background-color:transparent;border-top:1px solid var(--ec-border-color-legacy);padding:1rem 2rem 1rem 0!important}.table-detail-content.has-max-height{padding:0!important}.table-detail-content.has-max-height>div{overflow-y:auto;padding:1rem 2rem 1rem 0}\n"] }]
6617
+ `, styles: [":host{background-color:var(--ec-background-color-detail)}td:first-child{width:1.5rem;padding:.25rem 0!important;vertical-align:top}.table-detail-content{background-color:transparent;border-top:1px solid var(--ec-border-color);padding:1rem 2rem 1rem 0!important}.table-detail-content.has-max-height{padding:0!important}.table-detail-content.has-max-height>div{overflow-y:auto;padding:1rem 2rem 1rem 0}\n"] }]
6618
6618
  }], propDecorators: { contentClass: [{
6619
6619
  type: Input
6620
6620
  }], contentColSpan: [{
@@ -6955,10 +6955,10 @@ class TableComponent {
6955
6955
  }
6956
6956
  }
6957
6957
  TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
6958
- TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableComponent, selector: "ec-table", inputs: { id: "id", scrollable: "scrollable", resizable: "resizable", condensed: "condensed", sortable: "sortable", selectionContext: "selectionContext", selectionToolbarTemplate: "selectionToolbarTemplate", selectable: "selectable", isForm: "isForm", sort: "sort", searchableTableResizableColumns: ["resizableColumns", "searchableTableResizableColumns"] }, outputs: { sortChange: "sortChange" }, host: { properties: { "attr.id": "this.id", "class.is-scrollable": "this.scrollable", "class.is-resizable": "this.resizable", "class.is-condensed": "this.condensed", "class.is-sortable": "this.sortable", "class.is-selectable": "this.selectable", "class.is-form-table": "this.isForm", "class.is-master-detail": "this.hasMasterDetailRows" } }, queries: [{ propertyName: "masterRows", predicate: TableMasterRowComponent, descendants: true }, { propertyName: "_resizableColumns", predicate: ResizableColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"selectable-table-toolbar\"\r\n *ngIf=\"hasSelection && selectionToolbarTemplate\">\r\n <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\r\n</div>\r\n<div id=\"{{id}}-scroll-container\" \r\n class=\"table-scroll-container\">\r\n <table class=\"main-table\"\r\n id=\"{{id}}\"\r\n [ecResizableTable]=\"resizable\"\r\n [containerEl]=\"el\"\r\n [sortableTable]=\"sortable\"\r\n [resizableColumns]=\"resizableColumns\">\r\n <ng-content></ng-content>\r\n </table>\r\n</div>", styles: ["ec-table{display:flex;position:relative;min-height:0}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--ec-font-size-label)}ec-table .main-table th{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ec-border-color-dark);color:var(--ec-color-secondary-dark);font-weight:400;vertical-align:middle}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--ec-border-color);vertical-align:top}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:var(--ec-background-color-danger)}ec-table .main-table tbody>tr.is-success td{background-color:var(--ec-background-color-success)}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected>td,ec-table .main-table tbody>tr.is-selected{background-color:var(--ec-background-color-selected)}ec-table .main-table tr.is-heading td{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);font-weight:var(--ec-font-weight-bold);line-height:1.333333333;text-transform:uppercase;padding-bottom:0;vertical-align:bottom;border-top:0}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table th.actions-col,ec-table .main-table td.actions-col{padding:0}ec-table .main-table th.actions-1,ec-table .main-table td.actions-1{width:2.0625rem}ec-table .main-table th.actions-2,ec-table .main-table td.actions-2{width:4.0625rem}ec-table .main-table th.actions-3,ec-table .main-table td.actions-3{width:6.0625rem}ec-table .main-table th.actions-4,ec-table .main-table td.actions-4{width:8.0625rem}ec-table .main-table th.actions-5,ec-table .main-table td.actions-5{width:10.0625rem}ec-table.is-condensed th,ec-table.is-condensed td{padding-top:.25rem;padding-bottom:.25rem;height:1.5rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .selectable-table-toolbar{align-items:center;background-color:var(--ec-background-color);border-bottom:1px solid var(--ec-border-color-dark);display:flex;padding:0 .5rem;position:absolute;left:calc(var(--selection-toolbar-left, 0rem) + 1.5625rem);top:0;height:3rem;right:0;z-index:calc(var(--ec-z-index-sticky-header) + 3)}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:var(--ec-background-color);position:sticky!important;top:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color);position:sticky!important;bottom:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:var(--ec-background-color-body)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color-body)}ec-table.is-sortable th[data-sortfield]{-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{display:flex;cursor:pointer}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{flex:none;content:\"\";background-repeat:no-repeat;background-position:center;width:.875rem;height:.875rem;margin:0 .25rem;vertical-align:top;display:none}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{content:\"\";background-repeat:no-repeat;background-position:center;width:.875rem;height:.875rem;margin:0 .25rem;vertical-align:top;display:none}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{content:\"\";background-repeat:no-repeat;background-position:center;width:.875rem;height:.875rem;margin:0 .25rem;vertical-align:top;display:none}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{position:relative;overflow:visible;z-index:var(--ec-z-index-sticky-header)}ec-table.is-resizable th.is-resizable.is-active{-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{position:absolute;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter);right:0;padding:.5rem 0 .5rem 10px}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle:before{content:\"\";display:block;width:1px;background-color:var(--ec-border-color-legacy);position:absolute;top:.5rem;bottom:.5rem;right:0}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:3rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:var(--ec-background-color-hover);border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:var(--ec-background-color-selected)}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:var(--ec-background-color-hover)}ec-table.is-selectable th.is-resizable .handle{padding-top:1rem;padding-bottom:1rem}ec-table.is-selectable th.is-resizable .handle:before{top:1rem;bottom:1rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{padding-bottom:.25rem;padding-top:.25rem;height:2.5rem;line-height:2rem;border-top:0;font-size:var(--ec-font-size-body)}ec-table.is-form-table tr:first-child td{padding-top:.5rem;height:2.75rem}ec-table.is-form-table tr:last-child td{padding-bottom:.5rem;height:2.75rem}ec-table.is-fixed .main-table{table-layout:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizableTableDirective, selector: "[ecResizableTable]", inputs: ["ecResizableTable", "containerEl", "sortableTable", "resizableColumns"] }], encapsulation: i0.ViewEncapsulation.None });
6958
+ TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TableComponent, selector: "ec-table", inputs: { id: "id", scrollable: "scrollable", resizable: "resizable", condensed: "condensed", sortable: "sortable", selectionContext: "selectionContext", selectionToolbarTemplate: "selectionToolbarTemplate", selectable: "selectable", isForm: "isForm", sort: "sort", searchableTableResizableColumns: ["resizableColumns", "searchableTableResizableColumns"] }, outputs: { sortChange: "sortChange" }, host: { properties: { "attr.id": "this.id", "class.is-scrollable": "this.scrollable", "class.is-resizable": "this.resizable", "class.is-condensed": "this.condensed", "class.is-sortable": "this.sortable", "class.is-selectable": "this.selectable", "class.is-form-table": "this.isForm", "class.is-master-detail": "this.hasMasterDetailRows" } }, queries: [{ propertyName: "masterRows", predicate: TableMasterRowComponent, descendants: true }, { propertyName: "_resizableColumns", predicate: ResizableColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"selectable-table-toolbar\"\r\n *ngIf=\"hasSelection && selectionToolbarTemplate\">\r\n <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\r\n</div>\r\n<div id=\"{{id}}-scroll-container\" \r\n class=\"table-scroll-container\">\r\n <table class=\"main-table\"\r\n id=\"{{id}}\"\r\n [ecResizableTable]=\"resizable\"\r\n [containerEl]=\"el\"\r\n [sortableTable]=\"sortable\"\r\n [resizableColumns]=\"resizableColumns\">\r\n <ng-content></ng-content>\r\n </table>\r\n</div>", styles: ["ec-table{display:flex;position:relative;min-height:0}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--ec-font-size-label)}ec-table .main-table th{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ec-border-color-dark);color:var(--ec-color-secondary-dark);font-weight:400;vertical-align:middle}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--ec-border-color);vertical-align:top}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:var(--ec-background-color-danger)}ec-table .main-table tbody>tr.is-success td{background-color:var(--ec-background-color-success)}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected>td,ec-table .main-table tbody>tr.is-selected{background-color:var(--ec-background-color-selected)}ec-table .main-table tr.is-heading td{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);font-weight:var(--ec-font-weight-bold);line-height:1.333333333;text-transform:uppercase;padding-bottom:0;vertical-align:bottom;border-top:0}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table th.actions-col,ec-table .main-table td.actions-col{padding:0}ec-table .main-table th.actions-1,ec-table .main-table td.actions-1{width:2.0625rem}ec-table .main-table th.actions-2,ec-table .main-table td.actions-2{width:4.0625rem}ec-table .main-table th.actions-3,ec-table .main-table td.actions-3{width:6.0625rem}ec-table .main-table th.actions-4,ec-table .main-table td.actions-4{width:8.0625rem}ec-table .main-table th.actions-5,ec-table .main-table td.actions-5{width:10.0625rem}ec-table.is-condensed th,ec-table.is-condensed td{padding-top:.25rem;padding-bottom:.25rem;height:1.5rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .selectable-table-toolbar{align-items:center;background-color:var(--ec-background-color);border-bottom:1px solid var(--ec-border-color-dark);display:flex;padding:0 .5rem;position:absolute;left:calc(var(--selection-toolbar-left, 0rem) + 1.5625rem);top:0;height:3rem;right:0;z-index:calc(var(--ec-z-index-sticky-header) + 3)}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:var(--ec-background-color);position:sticky!important;top:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color);position:sticky!important;bottom:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:var(--ec-background-color-body)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color-body)}ec-table.is-sortable th[data-sortfield]{-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{display:flex;cursor:pointer}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{flex:none;content:\"\";background-repeat:no-repeat;background-position:center;width:.875rem;height:.875rem;margin:0 .25rem;vertical-align:top;display:none}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{content:\"\";background-repeat:no-repeat;background-position:center;width:.875rem;height:.875rem;margin:0 .25rem;vertical-align:top;display:none}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{content:\"\";background-repeat:no-repeat;background-position:center;width:.875rem;height:.875rem;margin:0 .25rem;vertical-align:top;display:none}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{position:relative;overflow:visible;z-index:var(--ec-z-index-sticky-header)}ec-table.is-resizable th.is-resizable.is-active{-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{position:absolute;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter);right:0;padding:.5rem 0 .5rem 10px}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle:before{content:\"\";display:block;width:1px;background-color:var(--ec-border-color);position:absolute;top:.5rem;bottom:.5rem;right:0}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:3rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:var(--ec-background-color-hover);border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:var(--ec-background-color-selected)}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:var(--ec-background-color-hover)}ec-table.is-selectable th.is-resizable .handle{padding-top:1rem;padding-bottom:1rem}ec-table.is-selectable th.is-resizable .handle:before{top:1rem;bottom:1rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{padding-bottom:.25rem;padding-top:.25rem;height:2.5rem;line-height:2rem;border-top:0;font-size:var(--ec-font-size-body)}ec-table.is-form-table tr:first-child td{padding-top:.5rem;height:2.75rem}ec-table.is-form-table tr:last-child td{padding-bottom:.5rem;height:2.75rem}ec-table.is-fixed .main-table{table-layout:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizableTableDirective, selector: "[ecResizableTable]", inputs: ["ecResizableTable", "containerEl", "sortableTable", "resizableColumns"] }], encapsulation: i0.ViewEncapsulation.None });
6959
6959
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TableComponent, decorators: [{
6960
6960
  type: Component,
6961
- args: [{ selector: 'ec-table', encapsulation: ViewEncapsulation.None, template: "<div class=\"selectable-table-toolbar\"\r\n *ngIf=\"hasSelection && selectionToolbarTemplate\">\r\n <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\r\n</div>\r\n<div id=\"{{id}}-scroll-container\" \r\n class=\"table-scroll-container\">\r\n <table class=\"main-table\"\r\n id=\"{{id}}\"\r\n [ecResizableTable]=\"resizable\"\r\n [containerEl]=\"el\"\r\n [sortableTable]=\"sortable\"\r\n [resizableColumns]=\"resizableColumns\">\r\n <ng-content></ng-content>\r\n </table>\r\n</div>", styles: ["ec-table{display:flex;position:relative;min-height:0}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--ec-font-size-label)}ec-table .main-table th{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ec-border-color-dark);color:var(--ec-color-secondary-dark);font-weight:400;vertical-align:middle}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--ec-border-color);vertical-align:top}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:var(--ec-background-color-danger)}ec-table .main-table tbody>tr.is-success td{background-color:var(--ec-background-color-success)}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected>td,ec-table .main-table tbody>tr.is-selected{background-color:var(--ec-background-color-selected)}ec-table .main-table tr.is-heading td{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);font-weight:var(--ec-font-weight-bold);line-height:1.333333333;text-transform:uppercase;padding-bottom:0;vertical-align:bottom;border-top:0}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table th.actions-col,ec-table .main-table td.actions-col{padding:0}ec-table .main-table th.actions-1,ec-table .main-table td.actions-1{width:2.0625rem}ec-table .main-table th.actions-2,ec-table .main-table td.actions-2{width:4.0625rem}ec-table .main-table th.actions-3,ec-table .main-table td.actions-3{width:6.0625rem}ec-table .main-table th.actions-4,ec-table .main-table td.actions-4{width:8.0625rem}ec-table .main-table th.actions-5,ec-table .main-table td.actions-5{width:10.0625rem}ec-table.is-condensed th,ec-table.is-condensed td{padding-top:.25rem;padding-bottom:.25rem;height:1.5rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .selectable-table-toolbar{align-items:center;background-color:var(--ec-background-color);border-bottom:1px solid var(--ec-border-color-dark);display:flex;padding:0 .5rem;position:absolute;left:calc(var(--selection-toolbar-left, 0rem) + 1.5625rem);top:0;height:3rem;right:0;z-index:calc(var(--ec-z-index-sticky-header) + 3)}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:var(--ec-background-color);position:sticky!important;top:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color);position:sticky!important;bottom:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:var(--ec-background-color-body)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color-body)}ec-table.is-sortable th[data-sortfield]{-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{display:flex;cursor:pointer}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{flex:none;content:\"\";background-repeat:no-repeat;background-position:center;width:.875rem;height:.875rem;margin:0 .25rem;vertical-align:top;display:none}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{content:\"\";background-repeat:no-repeat;background-position:center;width:.875rem;height:.875rem;margin:0 .25rem;vertical-align:top;display:none}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{content:\"\";background-repeat:no-repeat;background-position:center;width:.875rem;height:.875rem;margin:0 .25rem;vertical-align:top;display:none}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{position:relative;overflow:visible;z-index:var(--ec-z-index-sticky-header)}ec-table.is-resizable th.is-resizable.is-active{-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{position:absolute;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter);right:0;padding:.5rem 0 .5rem 10px}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle:before{content:\"\";display:block;width:1px;background-color:var(--ec-border-color-legacy);position:absolute;top:.5rem;bottom:.5rem;right:0}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:3rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:var(--ec-background-color-hover);border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:var(--ec-background-color-selected)}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:var(--ec-background-color-hover)}ec-table.is-selectable th.is-resizable .handle{padding-top:1rem;padding-bottom:1rem}ec-table.is-selectable th.is-resizable .handle:before{top:1rem;bottom:1rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{padding-bottom:.25rem;padding-top:.25rem;height:2.5rem;line-height:2rem;border-top:0;font-size:var(--ec-font-size-body)}ec-table.is-form-table tr:first-child td{padding-top:.5rem;height:2.75rem}ec-table.is-form-table tr:last-child td{padding-bottom:.5rem;height:2.75rem}ec-table.is-fixed .main-table{table-layout:fixed}\n"] }]
6961
+ args: [{ selector: 'ec-table', encapsulation: ViewEncapsulation.None, template: "<div class=\"selectable-table-toolbar\"\r\n *ngIf=\"hasSelection && selectionToolbarTemplate\">\r\n <ng-container *ngTemplateOutlet=\"selectionToolbarTemplate\"></ng-container>\r\n</div>\r\n<div id=\"{{id}}-scroll-container\" \r\n class=\"table-scroll-container\">\r\n <table class=\"main-table\"\r\n id=\"{{id}}\"\r\n [ecResizableTable]=\"resizable\"\r\n [containerEl]=\"el\"\r\n [sortableTable]=\"sortable\"\r\n [resizableColumns]=\"resizableColumns\">\r\n <ng-content></ng-content>\r\n </table>\r\n</div>", styles: ["ec-table{display:flex;position:relative;min-height:0}ec-table .table-scroll-container{flex:1 1;min-height:0;overflow-y:auto}ec-table .main-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--ec-font-size-label)}ec-table .main-table th{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ec-border-color-dark);color:var(--ec-color-secondary-dark);font-weight:400;vertical-align:middle}ec-table .main-table th:first-child{padding-left:1rem}ec-table .main-table th:last-child{padding-right:1rem}ec-table .main-table td{height:2rem;line-height:1rem;padding:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--ec-border-color);vertical-align:top}ec-table .main-table td:first-child{padding-left:1rem}ec-table .main-table td:last-child{padding-right:1rem}ec-table .main-table tbody>tr:first-child td{border-top:0}ec-table .main-table tbody>tr.is-error td{background-color:var(--ec-background-color-danger)}ec-table .main-table tbody>tr.is-success td{background-color:var(--ec-background-color-success)}ec-table .main-table tfoot td{font-weight:700}ec-table .main-table tbody>tr.is-selected>td,ec-table .main-table tbody>tr.is-selected{background-color:var(--ec-background-color-selected)}ec-table .main-table tr.is-heading td{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-label);font-weight:var(--ec-font-weight-bold);line-height:1.333333333;text-transform:uppercase;padding-bottom:0;vertical-align:bottom;border-top:0}ec-table .main-table tr.is-heading+tr td{border-top:0}ec-table .main-table th.actions-col,ec-table .main-table td.actions-col{padding:0}ec-table .main-table th.actions-1,ec-table .main-table td.actions-1{width:2.0625rem}ec-table .main-table th.actions-2,ec-table .main-table td.actions-2{width:4.0625rem}ec-table .main-table th.actions-3,ec-table .main-table td.actions-3{width:6.0625rem}ec-table .main-table th.actions-4,ec-table .main-table td.actions-4{width:8.0625rem}ec-table .main-table th.actions-5,ec-table .main-table td.actions-5{width:10.0625rem}ec-table.is-condensed th,ec-table.is-condensed td{padding-top:.25rem;padding-bottom:.25rem;height:1.5rem}ec-table.is-condensed:not(.has-borders)>table td{border-bottom-width:0;border-top-width:0}ec-table .selectable-table-toolbar{align-items:center;background-color:var(--ec-background-color);border-bottom:1px solid var(--ec-border-color-dark);display:flex;padding:0 .5rem;position:absolute;left:calc(var(--selection-toolbar-left, 0rem) + 1.5625rem);top:0;height:3rem;right:0;z-index:calc(var(--ec-z-index-sticky-header) + 3)}ec-table.is-scrollable>.table-scroll-container>table{position:relative}ec-table.is-scrollable>.table-scroll-container>table>thead th{background-color:var(--ec-background-color);position:sticky!important;top:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color);position:sticky!important;bottom:0;z-index:var(--ec-z-index-sticky-header)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>thead th{background-color:var(--ec-background-color-body)}ec-table.is-scrollable.bg-body>.table-scroll-container>table>tfoot td{background-color:var(--ec-background-color-body)}ec-table.is-sortable th[data-sortfield]{-webkit-user-select:none;user-select:none}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper{display:flex;cursor:pointer}ec-table.is-sortable th[data-sortfield].is-resizable .content{flex:0 1 auto}ec-table.is-sortable th[data-sortfield].is-resizable .content-wrapper:after{flex:none;content:\"\";background-repeat:no-repeat;background-position:center;width:.875rem;height:.875rem;margin:0 .25rem;vertical-align:top;display:none}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after,ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-asc .content-wrapper:after{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield].is-resizable.is-sorted-desc .content-wrapper:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield].is-resizable.text-right .content-wrapper{flex-direction:row-reverse}ec-table.is-sortable th[data-sortfield]:not(.is-resizable){cursor:pointer}ec-table.is-sortable th[data-sortfield]:not(.is-resizable):after{content:\"\";background-repeat:no-repeat;background-position:center;width:.875rem;height:.875rem;margin:0 .25rem;vertical-align:top;display:none}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-asc:after{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).is-sorted-desc:after{transform:scaleY(-1)}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:after{content:\"\";display:none!important}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right:before{content:\"\";background-repeat:no-repeat;background-position:center;width:.875rem;height:.875rem;margin:0 .25rem;vertical-align:top;display:none}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before,ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-asc:before{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M14 8.828V27a2 2 0 1 0 4 0V8.828l4.586 4.586a2 2 0 0 0 2.828-2.828l-8-8a2 2 0 0 0-2.828 0l-8 8a2 2 0 0 0 2.828 2.828L14 8.828z\"/></svg>');display:inline-block}ec-table.is-sortable th[data-sortfield]:not(.is-resizable).text-right.is-sorted-desc:before{transform:scaleY(-1)}ec-table.is-resizable .main-table{table-layout:fixed;width:100%}ec-table.is-resizable th.is-resizable{position:relative;overflow:visible;z-index:var(--ec-z-index-sticky-header)}ec-table.is-resizable th.is-resizable.is-active{-webkit-user-select:none;user-select:none}ec-table.is-resizable th.is-resizable.is-active .handle:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle{position:absolute;width:13px;height:100%;top:0;padding:0 5px;z-index:var(--ec-z-index-splitter);right:0;padding:.5rem 0 .5rem 10px}ec-table.is-resizable th.is-resizable .handle:after{content:\"\";display:block;transition:background-color .3s ease;height:100%;position:relative}ec-table.is-resizable th.is-resizable .handle:hover{cursor:col-resize}ec-table.is-resizable th.is-resizable .handle:hover:after{background-color:var(--ec-color-interactive)}ec-table.is-resizable th.is-resizable .handle:before{content:\"\";display:block;width:1px;background-color:var(--ec-border-color);position:absolute;top:.5rem;bottom:.5rem;right:0}ec-table.is-resizable th.is-resizable .content{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-resizable th.is-resizable:last-child .handle:before{display:none}ec-table.is-resizable td,ec-table.is-resizable th{overflow:hidden;text-overflow:clip;white-space:nowrap}ec-table.is-selectable .main-table thead th{height:3rem}ec-table.is-selectable .main-table tbody>tr:hover>td{background-color:var(--ec-background-color-hover);border-color:transparent;cursor:pointer}ec-table.is-selectable .main-table tbody>tr:hover.is-selected{background-color:var(--ec-background-color-selected)}ec-table.is-selectable .main-table tbody>tr:hover+tr>td{border-color:var(--ec-background-color-hover)}ec-table.is-selectable th.is-resizable .handle{padding-top:1rem;padding-bottom:1rem}ec-table.is-selectable th.is-resizable .handle:before{top:1rem;bottom:1rem}ec-table.is-master-detail>table{table-layout:fixed}ec-table.is-form-table td{padding-bottom:.25rem;padding-top:.25rem;height:2.5rem;line-height:2rem;border-top:0;font-size:var(--ec-font-size-body)}ec-table.is-form-table tr:first-child td{padding-top:.5rem;height:2.75rem}ec-table.is-form-table tr:last-child td{padding-bottom:.5rem;height:2.75rem}ec-table.is-fixed .main-table{table-layout:fixed}\n"] }]
6962
6962
  }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { id: [{
6963
6963
  type: HostBinding,
6964
6964
  args: ['attr.id']
@@ -7926,10 +7926,10 @@ class TreeComponent {
7926
7926
  }
7927
7927
  }
7928
7928
  TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7929
- TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TreeComponent, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren" }, 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: "<header *ngIf=\"!hideTreeHeader\"\r\n class=\"flex-shrink d-flex align-items-center border-bottom bg-content pl-2 pr-1\">\r\n <h2 id=\"{{id}}_title\"\r\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n <ec-dropdown *ngIf=\"menuItems?.length\"\r\n id=\"{{id}}_dropdown\"\r\n class=\"flex-shrink\"\r\n icon=\"icon-menu\"\r\n [menuTemplateType]=\"menuTemplateType\"\r\n menuPosition=\"left\"\r\n [status]=\"menuStatus\"\r\n [popupFixed]=\"true\"\r\n [showArrow]=\"false\"\r\n [menuMinWidth]=\"240\"\r\n [items]=\"menuItems\">\r\n </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [displayAsMask]=\"true\">\r\n <ng-container *ngIf=\"type === 'menu'\">\r\n <ec-menu [id]=\"id\"\r\n [items]=\"treeItems\"\r\n [templateType]=\"templateType\"\r\n [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n [truncateItems]=\"true\"\r\n (selectedChanged)=\"onItemSelected($event)\"\r\n [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n class=\"flex-grow\">\r\n </ec-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'hierarchy'\">\r\n <ec-hierarchy-tree [id]=\"id\"\r\n [rootNode]=\"treeHierarchy\"\r\n [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n (itemSelected)=\"onItemSelected($event)\"\r\n class=\"flex-grow d-flex\">\r\n </ec-hierarchy-tree>\r\n </ng-container>\r\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:3rem}ec-dropdown.fill{height:3rem;width:3rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["id", "hideRootNode"], outputs: ["itemSelected"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
7929
+ TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TreeComponent, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren" }, 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: "<header *ngIf=\"!hideTreeHeader\"\r\n class=\"flex-shrink d-flex align-items-center\">\r\n <h2 id=\"{{id}}_title\"\r\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n <ec-dropdown *ngIf=\"menuItems?.length\"\r\n id=\"{{id}}_dropdown\"\r\n class=\"flex-shrink\"\r\n icon=\"icon-menu\"\r\n [menuTemplateType]=\"menuTemplateType\"\r\n menuPosition=\"left\"\r\n [status]=\"menuStatus\"\r\n [popupFixed]=\"true\"\r\n [showArrow]=\"false\"\r\n [menuMinWidth]=\"240\"\r\n [items]=\"menuItems\">\r\n </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [displayAsMask]=\"true\">\r\n <ng-container *ngIf=\"type === 'menu'\">\r\n <ec-menu [id]=\"id\"\r\n [items]=\"treeItems\"\r\n [templateType]=\"templateType\"\r\n [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n [truncateItems]=\"true\"\r\n (selectedChanged)=\"onItemSelected($event)\"\r\n [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n class=\"flex-grow\">\r\n </ec-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'hierarchy'\">\r\n <ec-hierarchy-tree [id]=\"id\"\r\n [rootNode]=\"treeHierarchy\"\r\n [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n (itemSelected)=\"onItemSelected($event)\"\r\n class=\"flex-grow d-flex\">\r\n </ec-hierarchy-tree>\r\n </ng-container>\r\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-menu-background-color: var(--ec-tree-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: ["id", "hideRootNode"], outputs: ["itemSelected"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
7930
7930
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeComponent, decorators: [{
7931
7931
  type: Component,
7932
- args: [{ selector: 'ec-tree', template: "<header *ngIf=\"!hideTreeHeader\"\r\n class=\"flex-shrink d-flex align-items-center border-bottom bg-content pl-2 pr-1\">\r\n <h2 id=\"{{id}}_title\"\r\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n <ec-dropdown *ngIf=\"menuItems?.length\"\r\n id=\"{{id}}_dropdown\"\r\n class=\"flex-shrink\"\r\n icon=\"icon-menu\"\r\n [menuTemplateType]=\"menuTemplateType\"\r\n menuPosition=\"left\"\r\n [status]=\"menuStatus\"\r\n [popupFixed]=\"true\"\r\n [showArrow]=\"false\"\r\n [menuMinWidth]=\"240\"\r\n [items]=\"menuItems\">\r\n </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [displayAsMask]=\"true\">\r\n <ng-container *ngIf=\"type === 'menu'\">\r\n <ec-menu [id]=\"id\"\r\n [items]=\"treeItems\"\r\n [templateType]=\"templateType\"\r\n [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n [truncateItems]=\"true\"\r\n (selectedChanged)=\"onItemSelected($event)\"\r\n [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n class=\"flex-grow\">\r\n </ec-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'hierarchy'\">\r\n <ec-hierarchy-tree [id]=\"id\"\r\n [rootNode]=\"treeHierarchy\"\r\n [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n (itemSelected)=\"onItemSelected($event)\"\r\n class=\"flex-grow d-flex\">\r\n </ec-hierarchy-tree>\r\n </ng-container>\r\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:3rem}ec-dropdown.fill{height:3rem;width:3rem}\n"] }]
7932
+ args: [{ selector: 'ec-tree', template: "<header *ngIf=\"!hideTreeHeader\"\r\n class=\"flex-shrink d-flex align-items-center\">\r\n <h2 id=\"{{id}}_title\"\r\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n <ec-dropdown *ngIf=\"menuItems?.length\"\r\n id=\"{{id}}_dropdown\"\r\n class=\"flex-shrink\"\r\n icon=\"icon-menu\"\r\n [menuTemplateType]=\"menuTemplateType\"\r\n menuPosition=\"left\"\r\n [status]=\"menuStatus\"\r\n [popupFixed]=\"true\"\r\n [showArrow]=\"false\"\r\n [menuMinWidth]=\"240\"\r\n [items]=\"menuItems\">\r\n </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [displayAsMask]=\"true\">\r\n <ng-container *ngIf=\"type === 'menu'\">\r\n <ec-menu [id]=\"id\"\r\n [items]=\"treeItems\"\r\n [templateType]=\"templateType\"\r\n [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n [truncateItems]=\"true\"\r\n (selectedChanged)=\"onItemSelected($event)\"\r\n [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n class=\"flex-grow\">\r\n </ec-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'hierarchy'\">\r\n <ec-hierarchy-tree [id]=\"id\"\r\n [rootNode]=\"treeHierarchy\"\r\n [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n (itemSelected)=\"onItemSelected($event)\"\r\n class=\"flex-grow d-flex\">\r\n </ec-hierarchy-tree>\r\n </ng-container>\r\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-menu-background-color: var(--ec-tree-background-color)}\n"] }]
7933
7933
  }], ctorParameters: function () { return []; }, propDecorators: { attrId: [{
7934
7934
  type: HostBinding,
7935
7935
  args: ['attr.id']
@@ -8848,10 +8848,10 @@ class FormControlLabelComponent {
8848
8848
  }
8849
8849
  }
8850
8850
  FormControlLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormControlLabelComponent, deps: [{ token: ValidationMessageService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
8851
- FormControlLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormControlLabelComponent, selector: "ec-form-control-label", inputs: { id: "id", label: "label", control: "control", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && control?.touched && control?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
8851
+ FormControlLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormControlLabelComponent, selector: "ec-form-control-label", inputs: { id: "id", label: "label", control: "control", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && control?.touched && control?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
8852
8852
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormControlLabelComponent, decorators: [{
8853
8853
  type: Component,
8854
- args: [{ selector: 'ec-form-control-label', template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && control?.touched && control?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{border-color:var(--ec-border-color-legacy);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"] }]
8854
+ args: [{ selector: 'ec-form-control-label', template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && control?.touched && control?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);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:transparent;background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);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-background-color-caution);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-caution)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-color-caution)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}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}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{border-color:var(--ec-border-color);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"] }]
8855
8855
  }], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: i2.TranslateService }]; }, propDecorators: { id: [{
8856
8856
  type: Input
8857
8857
  }], attrId: [{