@energycap/components 0.38.3-ECAP-19766-branding-update-fixes.20231003-1558 → 0.38.3-ECAP-19739-fix-page-view-footer-z-index.20231004-1635

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 (10) hide show
  1. package/esm2020/lib/controls/combobox/combobox.component.mjs +2 -2
  2. package/esm2020/lib/controls/radio-button/radio-button.component.mjs +2 -2
  3. package/esm2020/lib/display/json-display/json-display.component.mjs +2 -2
  4. package/esm2020/lib/shared/page/page-view/page-view.component.mjs +2 -2
  5. package/fesm2015/energycap-components.mjs +8 -8
  6. package/fesm2015/energycap-components.mjs.map +1 -1
  7. package/fesm2020/energycap-components.mjs +8 -8
  8. package/fesm2020/energycap-components.mjs.map +1 -1
  9. package/package.json +1 -1
  10. package/src/styles/mixins/_form-control-base.scss +2 -0
package/fesm2015/energycap-components.mjs CHANGED
@@ -3148,10 +3148,10 @@ class ComboboxComponent extends FormControlBase {
3148
3148
  }
3149
3149
  }
3150
3150
  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 });
3151
- ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ComboboxComponent, selector: "ec-combobox", inputs: { addNew: "addNew", addNewOptions: "addNewOptions", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", preserveIconSpace: "preserveIconSpace", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems" }, 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' || templateType === 'iconLabelCaption') && 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)\"\r\n [class.active]=\"menuStatus === 'visible'\"></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 {{addNewOptions?.classList}}\"\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 (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\"\r\n translate>{{addNewOptions?.label}}\r\n </span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong \r\n class=\"ec-util-truncate\" \r\n [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n </span>\r\n </span>\r\n <i class=\"ec-icon {{addNewOptions?.icon}}\"></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)\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n [truncateItems]=\"truncateItems\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{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.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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" }] });
3151
+ ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ComboboxComponent, selector: "ec-combobox", inputs: { addNew: "addNew", addNewOptions: "addNewOptions", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", preserveIconSpace: "preserveIconSpace", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText", truncateItems: "truncateItems" }, 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' || templateType === 'iconLabelCaption') && 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)\"\r\n [class.active]=\"menuStatus === 'visible'\"></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 {{addNewOptions?.classList}}\"\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 (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\"\r\n translate>{{addNewOptions?.label}}\r\n </span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong \r\n class=\"ec-util-truncate\" \r\n [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n </span>\r\n </span>\r\n <i class=\"ec-icon {{addNewOptions?.icon}}\"></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)\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n [truncateItems]=\"truncateItems\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-background-color-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{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.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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" }] });
3152
3152
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ComboboxComponent, decorators: [{
3153
3153
  type: Component,
3154
- 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' || templateType === 'iconLabelCaption') && 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)\"\r\n [class.active]=\"menuStatus === 'visible'\"></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 {{addNewOptions?.classList}}\"\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 (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\"\r\n translate>{{addNewOptions?.label}}\r\n </span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong \r\n class=\"ec-util-truncate\" \r\n [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n </span>\r\n </span>\r\n <i class=\"ec-icon {{addNewOptions?.icon}}\"></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)\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n [truncateItems]=\"truncateItems\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled:not(.is-readonly) .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-opacity-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{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.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"] }]
3154
+ 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' || templateType === 'iconLabelCaption') && 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)\"\r\n [class.active]=\"menuStatus === 'visible'\"></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 {{addNewOptions?.classList}}\"\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 (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\"\r\n translate>{{addNewOptions?.label}}\r\n </span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong \r\n class=\"ec-util-truncate\" \r\n [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong>\r\n </span>\r\n </span>\r\n <i class=\"ec-icon {{addNewOptions?.icon}}\"></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)\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n [truncateItems]=\"truncateItems\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptionCount}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}.control{position:relative}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control ec-textbox ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty{background-image:none;background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled .ec-icon{filter:grayscale(100%);opacity:var(--ec-form-control-background-color-disabled)}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:1px;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{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.25rem;padding:.25rem .5rem;display:flex;align-items:center;background-color:var(--ec-background-color);cursor:pointer;border:0;width:100%}.add-new:hover,.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:focus{outline:none;background-color:var(--ec-background-color-hover)}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-border-color-secondary-focus: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}.open:not(.is-always-open) .textbox-group ec-textbox{--ec-form-control-box-shadow-focus: none;--ec-form-control-border-color-focus: var(--ec-form-control-border-color)}.open:not(.is-always-open) .textbox-group ec-button{--ec-button-box-shadow-focus-secondary: none;--ec-button-background-color-secondary: var(--ec-background-color-selected)}\n"] }]
3155
3155
  }], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i2.TranslateService }, { type: ScrollService }]; }, propDecorators: { onResize: [{
3156
3156
  type: HostListener,
3157
3157
  args: ['window:resize']
@@ -4657,10 +4657,10 @@ class RadioButtonComponent extends FormControlBase {
4657
4657
  }
4658
4658
  }
4659
4659
  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 });
4660
- 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-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.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:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.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-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.indicator{background-color:var(--ec-form-control-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{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.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:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-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-form-control-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-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);color:var(--ec-form-control-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.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" }] });
4660
+ 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-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.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:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.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-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.indicator{background-color:var(--ec-form-control-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{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.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:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-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-form-control-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-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);color:var(--ec-form-control-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.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" }] });
4661
4661
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RadioButtonComponent, decorators: [{
4662
4662
  type: Component,
4663
- 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-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.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:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.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-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.indicator{background-color:var(--ec-form-control-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{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.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:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-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-form-control-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-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);color:var(--ec-form-control-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.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"] }]
4663
+ 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-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}: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-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.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:var(--ec-form-control-background-color-readonly);border-color:var(--ec-form-control-border-color-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-form-control-color)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.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-form-control-border-color)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:var(--ec-form-control-box-shadow-focus);border-color:var(--ec-form-control-border-color-focus)}.input:disabled+.indicator{color:var(--ec-form-control-color-disabled);background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.input:disabled~.label{color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}.indicator{background-color:var(--ec-form-control-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{line-height:1.25rem;padding:.375rem 0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-form-control-font-size);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:1px solid var(--ec-border-color);min-height:2em;position:relative;color:var(--ec-color-secondary-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color:var(--ec-color-interactive)}.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:var(--ec-form-control-box-shadow-focus);border-radius:var(--ec-form-control-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-form-control-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-form-control-background-color);border-radius:calc(var(--ec-form-control-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:var(--ec-form-control-opacity-disabled);background-color:var(--ec-form-control-background-color-disabled);color:var(--ec-form-control-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.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"] }]
4664
4664
  }], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { type: [{
4665
4665
  type: Input
4666
4666
  }], options: [{
@@ -5937,10 +5937,10 @@ class JsonDisplayComponent {
5937
5937
  }
5938
5938
  }
5939
5939
  JsonDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: JsonDisplayComponent, deps: [{ token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
5940
- JsonDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: JsonDisplayComponent, selector: "ec-json-display", inputs: { id: "id", jsonString: "jsonString", maxLength: "maxLength" }, host: { properties: { "attr.id": "this.attrId" } }, usesOnChanges: true, ngImport: i0, template: "<ec-button id=\"{{id}}_copy\"\r\n class=\"copy-button\"\r\n *ngIf=\"jsonDisplay.value\"\r\n type=\"icon\"\r\n icon=\"icon-copy\"\r\n [ecCopyButton]=\"jsonDisplay\">\r\n</ec-button>\r\n<pre><code>{{jsonDisplay.value}}</code></pre>", styles: [":host{display:block;position:relative;color:var(--ec-color-primary-light);background:rgb(53,71,81);max-height:15rem;min-height:2.125rem;font-size:var(--ec-font-size-label);border-radius:var(--ec-border-radius-card);overflow-x:auto;overflow-y:auto;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:var(--ec-color-secondary-light)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:var(--ec-color-primary-light)!important}\n"], dependencies: [{ kind: "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: "directive", type: CopyButtonDirective, selector: "[ecCopyButton]", inputs: ["ecCopyButton"] }] });
5940
+ JsonDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: JsonDisplayComponent, selector: "ec-json-display", inputs: { id: "id", jsonString: "jsonString", maxLength: "maxLength" }, host: { properties: { "attr.id": "this.attrId" } }, usesOnChanges: true, ngImport: i0, template: "<ec-button id=\"{{id}}_copy\"\r\n class=\"copy-button\"\r\n *ngIf=\"jsonDisplay.value\"\r\n type=\"icon\"\r\n icon=\"icon-copy\"\r\n [ecCopyButton]=\"jsonDisplay\">\r\n</ec-button>\r\n<pre><code>{{jsonDisplay.value}}</code></pre>", styles: [":host{display:block;position:relative;color:var(--ec-color-secondary-light);background:rgb(53,71,81);max-height:15rem;min-height:2.125rem;font-size:var(--ec-font-size-label);border-radius:var(--ec-border-radius-card);overflow-x:auto;overflow-y:auto;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:var(--ec-color-secondary-light)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:var(--ec-color-primary-light)!important}\n"], dependencies: [{ kind: "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: "directive", type: CopyButtonDirective, selector: "[ecCopyButton]", inputs: ["ecCopyButton"] }] });
5941
5941
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: JsonDisplayComponent, decorators: [{
5942
5942
  type: Component,
5943
- args: [{ selector: 'ec-json-display', template: "<ec-button id=\"{{id}}_copy\"\r\n class=\"copy-button\"\r\n *ngIf=\"jsonDisplay.value\"\r\n type=\"icon\"\r\n icon=\"icon-copy\"\r\n [ecCopyButton]=\"jsonDisplay\">\r\n</ec-button>\r\n<pre><code>{{jsonDisplay.value}}</code></pre>", styles: [":host{display:block;position:relative;color:var(--ec-color-primary-light);background:rgb(53,71,81);max-height:15rem;min-height:2.125rem;font-size:var(--ec-font-size-label);border-radius:var(--ec-border-radius-card);overflow-x:auto;overflow-y:auto;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:var(--ec-color-secondary-light)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:var(--ec-color-primary-light)!important}\n"] }]
5943
+ args: [{ selector: 'ec-json-display', template: "<ec-button id=\"{{id}}_copy\"\r\n class=\"copy-button\"\r\n *ngIf=\"jsonDisplay.value\"\r\n type=\"icon\"\r\n icon=\"icon-copy\"\r\n [ecCopyButton]=\"jsonDisplay\">\r\n</ec-button>\r\n<pre><code>{{jsonDisplay.value}}</code></pre>", styles: [":host{display:block;position:relative;color:var(--ec-color-secondary-light);background:rgb(53,71,81);max-height:15rem;min-height:2.125rem;font-size:var(--ec-font-size-label);border-radius:var(--ec-border-radius-card);overflow-x:auto;overflow-y:auto;text-align:right}pre{margin-bottom:0;margin-top:-2rem;text-align:left}pre code{display:block;padding:.5rem}.copy-button{position:sticky;top:0}.copy-button ::ng-deep .ec-icon{color:var(--ec-color-secondary-light)!important}.copy-button ::ng-deep button:hover{background-color:transparent!important}.copy-button ::ng-deep button:hover .ec-icon{color:var(--ec-color-primary-light)!important}\n"] }]
5944
5944
  }], ctorParameters: function () { return [{ type: i2.TranslateService }]; }, propDecorators: { id: [{
5945
5945
  type: Input
5946
5946
  }], attrId: [{
@@ -8395,12 +8395,12 @@ class PageViewComponent {
8395
8395
  }
8396
8396
  }
8397
8397
  PageViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PageViewComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
8398
- PageViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PageViewComponent, selector: "ec-page-view", inputs: { isDialog: "isDialog", readonly: "readonly", status: "status", showHeader: "showHeader", errors: "errors", breadcrumbs: "breadcrumbs", title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl", moreActionsLabel: "moreActionsLabel", moreActions: "moreActions", secondaryActionLabel: "secondaryActionLabel", hideSecondaryAction: "hideSecondaryAction", primaryActionLabel: "primaryActionLabel", hidePrimaryAction: "hidePrimaryAction", customTitleTemplate: "customTitleTemplate", customActionsTemplate: "customActionsTemplate", customHeaderTemplate: "customHeaderTemplate", footerTemplate: "footerTemplate", customErrorBannerTemplate: "customErrorBannerTemplate", stickyFooter: "stickyFooter", fitContent: "fitContent", bgContent: "bgContent" }, outputs: { onPrimaryAction: "onPrimaryAction", onSecondaryAction: "onSecondaryAction" }, host: { properties: { "class.bg-content": "this.bgContent" }, classAttribute: "flex-grow" }, ngImport: i0, template: "<div ecOverlay\r\n [status]=\"status?.status\"\r\n [message]=\"status?.message\"\r\n [displayAsMask]=\"true\"\r\n class=\"flex-grow d-flex\"\r\n [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\r\n <div id=\"PageViewScrollContainer\"\r\n class=\"d-flex flex-column flex-grow scroll-y\"\r\n [class.is-dialog]=\"isDialog\"\r\n [class.fit-content]=\"fitContent\"\r\n [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\r\n [class.overlay-visible]=\"status?.status !== 'hasData'\"\r\n [class.footer-visible]=\"!!footerTemplate\">\r\n <section>\r\n <ng-content></ng-content>\r\n </section>\r\n\r\n <footer *ngIf=\"footerTemplate\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </footer>\r\n\r\n <header *ngIf=\"showHeader\">\r\n <ol id=\"breadcrumbs\"\r\n *ngIf=\"breadcrumbs?.length && !isDialog\">\r\n <li *ngFor=\"let crumb of breadcrumbs; last as isLast\">\r\n <a *ngIf=\"crumb.url; else label\"\r\n [routerLink]=\"crumb.url\">\r\n <ng-container *ngTemplateOutlet=\"label\"></ng-container>\r\n </a>\r\n <ng-template #label>{{crumb.label}}</ng-template>\r\n </li>\r\n </ol>\r\n\r\n <div class=\"titlebar\">\r\n <app-page-title *ngIf=\"!customTitleTemplate; else customTitle\"\r\n [title]=\"title\"\r\n [subTitle]=\"subTitle\"\r\n [subTitleUrl]=\"subTitleUrl\"\r\n [titleIcon]=\"titleIcon\"\r\n class=\"title text-truncate\">\r\n </app-page-title>\r\n\r\n <ng-template #customTitle>\r\n <div class=\"title\">\r\n <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"actions\">\r\n <ec-button id=\"primaryAction\"\r\n class=\"ml-2\"\r\n *ngIf=\"!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly\"\r\n [disabled]=\"status?.status === 'pending'\"\r\n type=\"primary\"\r\n [label]=\"primaryActionLabel\"\r\n (clicked)=\"primaryAction($event)\">\r\n </ec-button>\r\n <ec-button id=\"secondaryAction\"\r\n class=\"ml-2\"\r\n *ngIf=\"!hideSecondaryAction && onSecondaryAction.observers?.length\"\r\n type=\"secondary\"\r\n [label]=\"readonly ? 'Close' : secondaryActionLabel\"\r\n (clicked)=\"secondaryAction($event)\">\r\n </ec-button>\r\n <ec-dropdown id=\"moreActions\"\r\n *ngIf=\"moreActions?.length && !readonly\"\r\n [disabled]=\"status?.status === 'pending'\"\r\n class=\"ml-2\"\r\n buttonType=\"text\"\r\n [label]=\"moreActionsLabel\"\r\n [items]=\"moreActions\">\r\n </ec-dropdown>\r\n <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"customHeaderTemplate\"\r\n class=\"page-header\">\r\n <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\r\n </div>\r\n\r\n <ec-banner *ngIf=\"!customErrorBannerTemplate && errors; else customErrorBannerOutlet\"\r\n id=\"pageViewErrors\"\r\n [class.border-bottom-0]=\"!isDialog\">\r\n <div [innerHtml]=\"errors\"></div>\r\n </ec-banner>\r\n\r\n <ng-template #customErrorBannerOutlet>\r\n <ec-banner *ngIf=\"errors\"\r\n id=\"pageViewErrors\"\r\n [class.border-bottom-0]=\"!isDialog\">\r\n <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\r\n </ec-banner>\r\n </ng-template>\r\n </header>\r\n </div>\r\n\r\n <ec-button *ngIf=\"isDialog && (status?.status === 'pending' || status?.status === 'error')\"\r\n id=\"pageViewDialogClose\"\r\n type=\"icon\"\r\n icon=\"icon-cancel\"\r\n (clicked)=\"closeDialog()\">\r\n </ec-button>\r\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0}.fit-content section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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: "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: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: PageTitleComponent, selector: "app-page-title", inputs: ["title", "titleIcon", "subTitle", "subTitleUrl"] }] });
8398
+ PageViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: PageViewComponent, selector: "ec-page-view", inputs: { isDialog: "isDialog", readonly: "readonly", status: "status", showHeader: "showHeader", errors: "errors", breadcrumbs: "breadcrumbs", title: "title", titleIcon: "titleIcon", subTitle: "subTitle", subTitleUrl: "subTitleUrl", moreActionsLabel: "moreActionsLabel", moreActions: "moreActions", secondaryActionLabel: "secondaryActionLabel", hideSecondaryAction: "hideSecondaryAction", primaryActionLabel: "primaryActionLabel", hidePrimaryAction: "hidePrimaryAction", customTitleTemplate: "customTitleTemplate", customActionsTemplate: "customActionsTemplate", customHeaderTemplate: "customHeaderTemplate", footerTemplate: "footerTemplate", customErrorBannerTemplate: "customErrorBannerTemplate", stickyFooter: "stickyFooter", fitContent: "fitContent", bgContent: "bgContent" }, outputs: { onPrimaryAction: "onPrimaryAction", onSecondaryAction: "onSecondaryAction" }, host: { properties: { "class.bg-content": "this.bgContent" }, classAttribute: "flex-grow" }, ngImport: i0, template: "<div ecOverlay\r\n [status]=\"status?.status\"\r\n [message]=\"status?.message\"\r\n [displayAsMask]=\"true\"\r\n class=\"flex-grow d-flex\"\r\n [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\r\n <div id=\"PageViewScrollContainer\"\r\n class=\"d-flex flex-column flex-grow scroll-y\"\r\n [class.is-dialog]=\"isDialog\"\r\n [class.fit-content]=\"fitContent\"\r\n [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\r\n [class.overlay-visible]=\"status?.status !== 'hasData'\"\r\n [class.footer-visible]=\"!!footerTemplate\">\r\n <section>\r\n <ng-content></ng-content>\r\n </section>\r\n\r\n <footer *ngIf=\"footerTemplate\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </footer>\r\n\r\n <header *ngIf=\"showHeader\">\r\n <ol id=\"breadcrumbs\"\r\n *ngIf=\"breadcrumbs?.length && !isDialog\">\r\n <li *ngFor=\"let crumb of breadcrumbs; last as isLast\">\r\n <a *ngIf=\"crumb.url; else label\"\r\n [routerLink]=\"crumb.url\">\r\n <ng-container *ngTemplateOutlet=\"label\"></ng-container>\r\n </a>\r\n <ng-template #label>{{crumb.label}}</ng-template>\r\n </li>\r\n </ol>\r\n\r\n <div class=\"titlebar\">\r\n <app-page-title *ngIf=\"!customTitleTemplate; else customTitle\"\r\n [title]=\"title\"\r\n [subTitle]=\"subTitle\"\r\n [subTitleUrl]=\"subTitleUrl\"\r\n [titleIcon]=\"titleIcon\"\r\n class=\"title text-truncate\">\r\n </app-page-title>\r\n\r\n <ng-template #customTitle>\r\n <div class=\"title\">\r\n <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"actions\">\r\n <ec-button id=\"primaryAction\"\r\n class=\"ml-2\"\r\n *ngIf=\"!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly\"\r\n [disabled]=\"status?.status === 'pending'\"\r\n type=\"primary\"\r\n [label]=\"primaryActionLabel\"\r\n (clicked)=\"primaryAction($event)\">\r\n </ec-button>\r\n <ec-button id=\"secondaryAction\"\r\n class=\"ml-2\"\r\n *ngIf=\"!hideSecondaryAction && onSecondaryAction.observers?.length\"\r\n type=\"secondary\"\r\n [label]=\"readonly ? 'Close' : secondaryActionLabel\"\r\n (clicked)=\"secondaryAction($event)\">\r\n </ec-button>\r\n <ec-dropdown id=\"moreActions\"\r\n *ngIf=\"moreActions?.length && !readonly\"\r\n [disabled]=\"status?.status === 'pending'\"\r\n class=\"ml-2\"\r\n buttonType=\"text\"\r\n [label]=\"moreActionsLabel\"\r\n [items]=\"moreActions\">\r\n </ec-dropdown>\r\n <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"customHeaderTemplate\"\r\n class=\"page-header\">\r\n <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\r\n </div>\r\n\r\n <ec-banner *ngIf=\"!customErrorBannerTemplate && errors; else customErrorBannerOutlet\"\r\n id=\"pageViewErrors\"\r\n [class.border-bottom-0]=\"!isDialog\">\r\n <div [innerHtml]=\"errors\"></div>\r\n </ec-banner>\r\n\r\n <ng-template #customErrorBannerOutlet>\r\n <ec-banner *ngIf=\"errors\"\r\n id=\"pageViewErrors\"\r\n [class.border-bottom-0]=\"!isDialog\">\r\n <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\r\n </ec-banner>\r\n </ng-template>\r\n </header>\r\n </div>\r\n\r\n <ec-button *ngIf=\"isDialog && (status?.status === 'pending' || status?.status === 'error')\"\r\n id=\"pageViewDialogClose\"\r\n type=\"icon\"\r\n icon=\"icon-cancel\"\r\n (clicked)=\"closeDialog()\">\r\n </ec-button>\r\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0;z-index:var(--ec-z-index-sticky-page-header)}.fit-content section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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: "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: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: PageTitleComponent, selector: "app-page-title", inputs: ["title", "titleIcon", "subTitle", "subTitleUrl"] }] });
8399
8399
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: PageViewComponent, decorators: [{
8400
8400
  type: Component,
8401
8401
  args: [{ selector: 'ec-page-view', host: {
8402
8402
  class: "flex-grow"
8403
- }, template: "<div ecOverlay\r\n [status]=\"status?.status\"\r\n [message]=\"status?.message\"\r\n [displayAsMask]=\"true\"\r\n class=\"flex-grow d-flex\"\r\n [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\r\n <div id=\"PageViewScrollContainer\"\r\n class=\"d-flex flex-column flex-grow scroll-y\"\r\n [class.is-dialog]=\"isDialog\"\r\n [class.fit-content]=\"fitContent\"\r\n [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\r\n [class.overlay-visible]=\"status?.status !== 'hasData'\"\r\n [class.footer-visible]=\"!!footerTemplate\">\r\n <section>\r\n <ng-content></ng-content>\r\n </section>\r\n\r\n <footer *ngIf=\"footerTemplate\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </footer>\r\n\r\n <header *ngIf=\"showHeader\">\r\n <ol id=\"breadcrumbs\"\r\n *ngIf=\"breadcrumbs?.length && !isDialog\">\r\n <li *ngFor=\"let crumb of breadcrumbs; last as isLast\">\r\n <a *ngIf=\"crumb.url; else label\"\r\n [routerLink]=\"crumb.url\">\r\n <ng-container *ngTemplateOutlet=\"label\"></ng-container>\r\n </a>\r\n <ng-template #label>{{crumb.label}}</ng-template>\r\n </li>\r\n </ol>\r\n\r\n <div class=\"titlebar\">\r\n <app-page-title *ngIf=\"!customTitleTemplate; else customTitle\"\r\n [title]=\"title\"\r\n [subTitle]=\"subTitle\"\r\n [subTitleUrl]=\"subTitleUrl\"\r\n [titleIcon]=\"titleIcon\"\r\n class=\"title text-truncate\">\r\n </app-page-title>\r\n\r\n <ng-template #customTitle>\r\n <div class=\"title\">\r\n <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"actions\">\r\n <ec-button id=\"primaryAction\"\r\n class=\"ml-2\"\r\n *ngIf=\"!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly\"\r\n [disabled]=\"status?.status === 'pending'\"\r\n type=\"primary\"\r\n [label]=\"primaryActionLabel\"\r\n (clicked)=\"primaryAction($event)\">\r\n </ec-button>\r\n <ec-button id=\"secondaryAction\"\r\n class=\"ml-2\"\r\n *ngIf=\"!hideSecondaryAction && onSecondaryAction.observers?.length\"\r\n type=\"secondary\"\r\n [label]=\"readonly ? 'Close' : secondaryActionLabel\"\r\n (clicked)=\"secondaryAction($event)\">\r\n </ec-button>\r\n <ec-dropdown id=\"moreActions\"\r\n *ngIf=\"moreActions?.length && !readonly\"\r\n [disabled]=\"status?.status === 'pending'\"\r\n class=\"ml-2\"\r\n buttonType=\"text\"\r\n [label]=\"moreActionsLabel\"\r\n [items]=\"moreActions\">\r\n </ec-dropdown>\r\n <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"customHeaderTemplate\"\r\n class=\"page-header\">\r\n <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\r\n </div>\r\n\r\n <ec-banner *ngIf=\"!customErrorBannerTemplate && errors; else customErrorBannerOutlet\"\r\n id=\"pageViewErrors\"\r\n [class.border-bottom-0]=\"!isDialog\">\r\n <div [innerHtml]=\"errors\"></div>\r\n </ec-banner>\r\n\r\n <ng-template #customErrorBannerOutlet>\r\n <ec-banner *ngIf=\"errors\"\r\n id=\"pageViewErrors\"\r\n [class.border-bottom-0]=\"!isDialog\">\r\n <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\r\n </ec-banner>\r\n </ng-template>\r\n </header>\r\n </div>\r\n\r\n <ec-button *ngIf=\"isDialog && (status?.status === 'pending' || status?.status === 'error')\"\r\n id=\"pageViewDialogClose\"\r\n type=\"icon\"\r\n icon=\"icon-cancel\"\r\n (clicked)=\"closeDialog()\">\r\n </ec-button>\r\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0}.fit-content section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"] }]
8403
+ }, template: "<div ecOverlay\r\n [status]=\"status?.status\"\r\n [message]=\"status?.message\"\r\n [displayAsMask]=\"true\"\r\n class=\"flex-grow d-flex\"\r\n [ngClass]=\"{'bg-body': !bgContent, 'bg-content': bgContent}\">\r\n <div id=\"PageViewScrollContainer\"\r\n class=\"d-flex flex-column flex-grow scroll-y\"\r\n [class.is-dialog]=\"isDialog\"\r\n [class.fit-content]=\"fitContent\"\r\n [class.sticky-footer]=\"stickyFooter && !!footerTemplate\"\r\n [class.overlay-visible]=\"status?.status !== 'hasData'\"\r\n [class.footer-visible]=\"!!footerTemplate\">\r\n <section>\r\n <ng-content></ng-content>\r\n </section>\r\n\r\n <footer *ngIf=\"footerTemplate\">\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n </footer>\r\n\r\n <header *ngIf=\"showHeader\">\r\n <ol id=\"breadcrumbs\"\r\n *ngIf=\"breadcrumbs?.length && !isDialog\">\r\n <li *ngFor=\"let crumb of breadcrumbs; last as isLast\">\r\n <a *ngIf=\"crumb.url; else label\"\r\n [routerLink]=\"crumb.url\">\r\n <ng-container *ngTemplateOutlet=\"label\"></ng-container>\r\n </a>\r\n <ng-template #label>{{crumb.label}}</ng-template>\r\n </li>\r\n </ol>\r\n\r\n <div class=\"titlebar\">\r\n <app-page-title *ngIf=\"!customTitleTemplate; else customTitle\"\r\n [title]=\"title\"\r\n [subTitle]=\"subTitle\"\r\n [subTitleUrl]=\"subTitleUrl\"\r\n [titleIcon]=\"titleIcon\"\r\n class=\"title text-truncate\">\r\n </app-page-title>\r\n\r\n <ng-template #customTitle>\r\n <div class=\"title\">\r\n <ng-container *ngTemplateOutlet=\"customTitleTemplate\"></ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"actions\">\r\n <ec-button id=\"primaryAction\"\r\n class=\"ml-2\"\r\n *ngIf=\"!hidePrimaryAction && onPrimaryAction.observers?.length && !readonly\"\r\n [disabled]=\"status?.status === 'pending'\"\r\n type=\"primary\"\r\n [label]=\"primaryActionLabel\"\r\n (clicked)=\"primaryAction($event)\">\r\n </ec-button>\r\n <ec-button id=\"secondaryAction\"\r\n class=\"ml-2\"\r\n *ngIf=\"!hideSecondaryAction && onSecondaryAction.observers?.length\"\r\n type=\"secondary\"\r\n [label]=\"readonly ? 'Close' : secondaryActionLabel\"\r\n (clicked)=\"secondaryAction($event)\">\r\n </ec-button>\r\n <ec-dropdown id=\"moreActions\"\r\n *ngIf=\"moreActions?.length && !readonly\"\r\n [disabled]=\"status?.status === 'pending'\"\r\n class=\"ml-2\"\r\n buttonType=\"text\"\r\n [label]=\"moreActionsLabel\"\r\n [items]=\"moreActions\">\r\n </ec-dropdown>\r\n <ng-container *ngTemplateOutlet=\"customActionsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"customHeaderTemplate\"\r\n class=\"page-header\">\r\n <ng-container *ngTemplateOutlet=\"customHeaderTemplate\"></ng-container>\r\n </div>\r\n\r\n <ec-banner *ngIf=\"!customErrorBannerTemplate && errors; else customErrorBannerOutlet\"\r\n id=\"pageViewErrors\"\r\n [class.border-bottom-0]=\"!isDialog\">\r\n <div [innerHtml]=\"errors\"></div>\r\n </ec-banner>\r\n\r\n <ng-template #customErrorBannerOutlet>\r\n <ec-banner *ngIf=\"errors\"\r\n id=\"pageViewErrors\"\r\n [class.border-bottom-0]=\"!isDialog\">\r\n <ng-container *ngTemplateOutlet=\"customErrorBannerTemplate\"></ng-container>\r\n </ec-banner>\r\n </ng-template>\r\n </header>\r\n </div>\r\n\r\n <ec-button *ngIf=\"isDialog && (status?.status === 'pending' || status?.status === 'error')\"\r\n id=\"pageViewDialogClose\"\r\n type=\"icon\"\r\n icon=\"icon-cancel\"\r\n (clicked)=\"closeDialog()\">\r\n </ec-button>\r\n</div>", styles: [":host{flex:1 1;min-height:0;display:flex}header{background-color:var(--ec-background-color-body);position:sticky;top:0;order:1;padding:1rem 1.5rem .5rem;flex:none;z-index:var(--ec-z-index-sticky-page-header)}ol{font-size:var(--ec-font-size-label);line-height:1rem;grid-column:1/3;grid-row:1/2;list-style:none;padding:0;margin:0 0 .25rem}ol li{display:inline}ol li:not(:last-child):after{content:\" / \";display:inline;color:var(--ec-color-secondary-dark)}div[ecOverlay]{position:relative}.titlebar{display:grid;grid-template-columns:auto max-content;grid-template-rows:max-content max-content;gap:0 1rem}.title{grid-column:1/2;grid-row:2/3;align-self:center}.actions{grid-column:2/3;grid-row:2/3;display:flex;flex-direction:row-reverse}ec-banner{margin-top:1rem}section{padding:var(--ec-page-view-padding-section, .5rem 1.5rem 2rem);order:2;flex:1 0 auto;min-height:0}footer{background-color:var(--ec-background-color-body);order:3;padding:0 1.5rem;height:4.5rem;flex:none;display:flex;align-items:center}.is-dialog header{padding:0}.is-dialog .titlebar{background-color:var(--ec-background-color);padding:1rem}.is-dialog ec-banner{margin:0}.is-dialog section{padding:var(--ec-page-view-padding-section, 1rem 1rem 1.5rem)}.sticky-footer section{padding-bottom:4.5rem}.sticky-footer footer{position:sticky;bottom:0;z-index:var(--ec-z-index-sticky-page-header)}.fit-content section{flex:1 1;display:flex}.footer-visible section{padding-bottom:0}.overlay-visible header{z-index:var(--ec-z-index-overlay)1}.overlay-visible ec-banner{display:none}:host(.bg-content) header{background-color:var(--ec-background-color)}:host(.bg-content) section{background-color:var(--ec-background-color)}:host(.bg-content) footer{background-color:var(--ec-background-color)}#pageViewDialogClose{position:absolute;top:1rem;right:1rem;z-index:calc(var(--ec-z-index-overlay) + 1)}\n"] }]
8404
8404
  }], ctorParameters: function () { return [{ type: DialogService }]; }, propDecorators: { isDialog: [{
8405
8405
  type: Input
8406
8406
  }], readonly: [{