@energycap/components 0.36.1-ECAP-18558-new-menu-item-templates.20230707-1413 → 0.36.1
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.
- package/energycap-components.min.css +1 -1
- package/esm2020/lib/controls/checkbox/checkbox.component.mjs +2 -2
- package/esm2020/lib/controls/combobox/combobox.component.mjs +3 -9
- package/esm2020/lib/controls/form-control-label/form-control-label.component.mjs +2 -2
- package/esm2020/lib/controls/form-group/form-group.component.mjs +2 -2
- package/esm2020/lib/controls/menu/menu.component.mjs +3 -9
- package/esm2020/lib/controls/numericbox/numericbox.component.mjs +2 -2
- package/esm2020/lib/controls/radio-button/radio-button.component.mjs +2 -2
- package/esm2020/lib/controls/select/select.component.mjs +2 -2
- package/esm2020/lib/controls/textbox/textbox.component.mjs +2 -2
- package/esm2020/lib/display/tree/tree.component.mjs +2 -2
- package/esm2020/lib/display/view-overlay/view-overlay.component.mjs +2 -2
- package/esm2020/lib/shared/wizard/wizard-buttons/wizard-buttons.component.mjs +2 -2
- package/fesm2015/energycap-components.mjs +24 -36
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +24 -36
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/controls/combobox/combobox.component.d.ts +1 -5
- package/lib/controls/menu/menu.component.d.ts +1 -6
- package/package.json +1 -1
- package/src/styles/_base.scss +2 -1
- package/src/styles/_icons.scss +1 -1
- package/src/styles/mixins/_form-control-base.scss +3 -3
- package/src/styles/mixins/_overlay-base.scss +1 -1
|
@@ -1118,10 +1118,10 @@ class CheckboxComponent extends FormControlBase {
|
|
|
1118
1118
|
}
|
|
1119
1119
|
}
|
|
1120
1120
|
CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component });
|
|
1121
|
-
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CheckboxComponent, selector: "ec-checkbox", inputs: { name: "name", dependentCheckboxesGroup: "dependentCheckboxesGroup", ignoreDisabledDependents: "ignoreDisabledDependents" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["checkboxInput"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\">\r\n <label class=\"checkbox\"\r\n [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n <input id=\"{{id}}_input\"\r\n #checkboxInput\r\n class='input'\r\n [class.indeterminate]=\"indeterminate\"\r\n [attr.id]=\"inputId\"\r\n [attr.name]=\"name\"\r\n type=\"checkbox\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <i class=\"ec-icon icon-check\"></i>\r\n <span id=\"{{id}}_label\"\r\n *ngIf=\"label\"\r\n class=\"label\"\r\n [innerHtml]=\"label | translate\">\r\n </span>\r\n </label>\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0
|
|
1121
|
+
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CheckboxComponent, selector: "ec-checkbox", inputs: { name: "name", dependentCheckboxesGroup: "dependentCheckboxesGroup", ignoreDisabledDependents: "ignoreDisabledDependents" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["checkboxInput"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\">\r\n <label class=\"checkbox\"\r\n [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n <input id=\"{{id}}_input\"\r\n #checkboxInput\r\n class='input'\r\n [class.indeterminate]=\"indeterminate\"\r\n [attr.id]=\"inputId\"\r\n [attr.name]=\"name\"\r\n type=\"checkbox\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <i class=\"ec-icon icon-check\"></i>\r\n <span id=\"{{id}}_label\"\r\n *ngIf=\"label\"\r\n class=\"label\"\r\n [innerHtml]=\"label | translate\">\r\n </span>\r\n </label>\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-border-color-control)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive)}.input:disabled+.ec-icon{color:var(--ec-color-secondary-dark);background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);opacity:.65}.input:disabled~.label{color:var(--ec-color-secondary-dark);opacity:.65}.ec-icon{background-color:var(--ec-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:.125rem}.ec-icon:before{font-size:.6875em}.label{height:2rem;line-height:1.25;padding:.375rem .5rem;padding-left:0;padding-right:0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:#1a1a231f;border-color:var(--ec-border-color-control-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-color-primary-dark)}.no-label .input,.no-label .icon-check{margin-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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" }] });
|
|
1122
1122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1123
1123
|
type: Component,
|
|
1124
|
-
args: [{ selector: 'ec-checkbox', template: "<div class=\"control\">\r\n <label class=\"checkbox\"\r\n [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n <input id=\"{{id}}_input\"\r\n #checkboxInput\r\n class='input'\r\n [class.indeterminate]=\"indeterminate\"\r\n [attr.id]=\"inputId\"\r\n [attr.name]=\"name\"\r\n type=\"checkbox\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <i class=\"ec-icon icon-check\"></i>\r\n <span id=\"{{id}}_label\"\r\n *ngIf=\"label\"\r\n class=\"label\"\r\n [innerHtml]=\"label | translate\">\r\n </span>\r\n </label>\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0
|
|
1124
|
+
args: [{ selector: 'ec-checkbox', template: "<div class=\"control\">\r\n <label class=\"checkbox\"\r\n [ngClass]=\"{'is-disabled': formModel.disabled, 'no-label': !label, 'is-readonly': readonly}\">\r\n <input id=\"{{id}}_input\"\r\n #checkboxInput\r\n class='input'\r\n [class.indeterminate]=\"indeterminate\"\r\n [attr.id]=\"inputId\"\r\n [attr.name]=\"name\"\r\n type=\"checkbox\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <i class=\"ec-icon icon-check\"></i>\r\n <span id=\"{{id}}_label\"\r\n *ngIf=\"label\"\r\n class=\"label\"\r\n [innerHtml]=\"label | translate\">\r\n </span>\r\n </label>\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host(.w-auto){width:auto}.checkbox{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.checkbox.is-disabled{cursor:default}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.ec-icon{color:var(--ec-border-color-control)}.input:not(:checked)+.ec-icon:before{display:none}.input.indeterminate+.ec-icon,.input:indeterminate+.ec-icon{color:var(--ec-color-interactive)}.input.indeterminate+.ec-icon:before,.input:indeterminate+.ec-icon:before{content:\"\";background-color:currentColor;display:block;width:10px;height:3px}.input:focus+.ec-icon{color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive)}.input:disabled+.ec-icon{color:var(--ec-color-secondary-dark);background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);opacity:.65}.input:disabled~.label{color:var(--ec-color-secondary-dark);opacity:.65}.ec-icon{background-color:var(--ec-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:.125rem}.ec-icon:before{font-size:.6875em}.label{height:2rem;line-height:1.25;padding:.375rem .5rem;padding-left:0;padding-right:0;margin-left:.5rem;min-height:2rem;height:auto}.checkbox.is-readonly{pointer-events:none}.checkbox.is-readonly .input{opacity:0}.checkbox.is-readonly .ec-icon{background-color:#1a1a231f;border-color:var(--ec-border-color-control-readonly)}.checkbox.is-readonly .label,.checkbox.is-readonly .ec-icon{opacity:1;color:var(--ec-color-primary-dark)}.no-label .input,.no-label .icon-check{margin-top:0}\n"] }]
|
|
1125
1125
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { name: [{
|
|
1126
1126
|
type: Input
|
|
1127
1127
|
}], dependentCheckboxesGroup: [{
|
|
@@ -1533,10 +1533,10 @@ class TextboxComponent extends FormControlBase {
|
|
|
1533
1533
|
}
|
|
1534
1534
|
}
|
|
1535
1535
|
TextboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1536
|
-
TextboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TextboxComponent, selector: "ec-textbox", inputs: { autocomplete: "autocomplete", type: "type", placeholder: "placeholder", maxlength: "maxlength", minlength: "minlength", rows: "rows", selectOnAutofocus: "selectOnAutofocus", upperCase: "upperCase" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["textboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'is-readonly': readonly}\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <div class=\"input-wrapper control-input\">\r\n <input *ngIf=\"type !== 'multi_line'\"\r\n #textboxInput\r\n email=\"{{type === 'email' ? true : false}}\"\r\n pattern=\"{{validationPattern}}\"\r\n type=\"{{type}}\"\r\n tabindex=\"{{tabindex}}\"\r\n title=\"{{tooltip}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.autocomplete]=\"autocomplete\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n (focusout)=\"focusOutEvent()\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n <textarea *ngIf=\"type === 'multi_line'\"\r\n [attr.rows]=\"rows\"\r\n #textboxInput\r\n tabindex=\"{{tabindex}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n </textarea>\r\n </div>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;padding:.3125rem .5rem}:host input::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host input::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host input::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host input:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:required.is-empty{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input.ng-invalid.ng-touched{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);color:var(--ec-color-secondary-dark);opacity:.65}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:auto;line-height:1.25;padding:.3125rem .5rem;resize:none;display:block}:host textarea::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host textarea::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:required.is-empty{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);color:var(--ec-color-secondary-dark);opacity:.65}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:.0625rem}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus{position:relative;z-index:1;border-right-width:.0625rem}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
1536
|
+
TextboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TextboxComponent, selector: "ec-textbox", inputs: { autocomplete: "autocomplete", type: "type", placeholder: "placeholder", maxlength: "maxlength", minlength: "minlength", rows: "rows", selectOnAutofocus: "selectOnAutofocus", upperCase: "upperCase" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["textboxInput"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'is-readonly': readonly}\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <div class=\"input-wrapper control-input\">\r\n <input *ngIf=\"type !== 'multi_line'\"\r\n #textboxInput\r\n email=\"{{type === 'email' ? true : false}}\"\r\n pattern=\"{{validationPattern}}\"\r\n type=\"{{type}}\"\r\n tabindex=\"{{tabindex}}\"\r\n title=\"{{tooltip}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.autocomplete]=\"autocomplete\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n (focusout)=\"focusOutEvent()\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n <textarea *ngIf=\"type === 'multi_line'\"\r\n [attr.rows]=\"rows\"\r\n #textboxInput\r\n tabindex=\"{{tabindex}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n </textarea>\r\n </div>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;padding:.3125rem .5rem}:host input::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host input::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host input::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host input:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:required.is-empty{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.ng-invalid.ng-touched{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);color:var(--ec-color-secondary-dark);opacity:.65}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:auto;line-height:1.25;padding:.3125rem .5rem;resize:none;display:block}:host textarea::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host textarea::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:required.is-empty{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);color:var(--ec-color-secondary-dark);opacity:.65}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:.0625rem}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus{position:relative;z-index:1;border-right-width:.0625rem}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
1537
1537
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextboxComponent, decorators: [{
|
|
1538
1538
|
type: Component,
|
|
1539
|
-
args: [{ selector: 'ec-textbox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'is-readonly': readonly}\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <div class=\"input-wrapper control-input\">\r\n <input *ngIf=\"type !== 'multi_line'\"\r\n #textboxInput\r\n email=\"{{type === 'email' ? true : false}}\"\r\n pattern=\"{{validationPattern}}\"\r\n type=\"{{type}}\"\r\n tabindex=\"{{tabindex}}\"\r\n title=\"{{tooltip}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.autocomplete]=\"autocomplete\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n (focusout)=\"focusOutEvent()\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n <textarea *ngIf=\"type === 'multi_line'\"\r\n [attr.rows]=\"rows\"\r\n #textboxInput\r\n tabindex=\"{{tabindex}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n </textarea>\r\n </div>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;padding:.3125rem .5rem}:host input::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host input::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host input::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host input:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:required.is-empty{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input.ng-invalid.ng-touched{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);color:var(--ec-color-secondary-dark);opacity:.65}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:auto;line-height:1.25;padding:.3125rem .5rem;resize:none;display:block}:host textarea::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host textarea::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:required.is-empty{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.25rem .5rem;background-size:1rem,1rem;padding-left:1.5rem}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);color:var(--ec-color-secondary-dark);opacity:.65}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:.0625rem}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus{position:relative;z-index:1;border-right-width:.0625rem}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"] }]
|
|
1539
|
+
args: [{ selector: 'ec-textbox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'is-readonly': readonly}\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <div class=\"input-wrapper control-input\">\r\n <input *ngIf=\"type !== 'multi_line'\"\r\n #textboxInput\r\n email=\"{{type === 'email' ? true : false}}\"\r\n pattern=\"{{validationPattern}}\"\r\n type=\"{{type}}\"\r\n tabindex=\"{{tabindex}}\"\r\n title=\"{{tooltip}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.autocomplete]=\"autocomplete\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': !formModel?.value, 'is-pending': pending, 'is-uppercase': upperCase}\"\r\n (focusout)=\"focusOutEvent()\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n\r\n <textarea *ngIf=\"type === 'multi_line'\"\r\n [attr.rows]=\"rows\"\r\n #textboxInput\r\n tabindex=\"{{tabindex}}\"\r\n [attr.id]=\"inputId\"\r\n [attr.placeholder]=\"placeholder\"\r\n [attr.maxlength]=\"maxlength\"\r\n [attr.minlength]=\"minlength\"\r\n [attr.required]=\"required ? required : null\"\r\n [formControl]=\"formModel\"\r\n [ngClass]=\"{'is-empty': formModel?.value === '', 'is-pending': pending}\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n </textarea>\r\n </div>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;padding:.3125rem .5rem}:host input::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host input::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host input::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host input:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host input:required.is-empty{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.ng-invalid.ng-touched{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);color:var(--ec-color-secondary-dark);opacity:.65}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled)}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:auto;line-height:1.25;padding:.3125rem .5rem;resize:none;display:block}:host textarea::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host textarea::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host textarea:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host textarea:required.is-empty{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);color:var(--ec-color-secondary-dark);opacity:.65}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled)}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}:host(.textbox-group-input:not(:last-child)){flex:1 1 0%;width:1px}:host(.textbox-group-input:not(:last-child)) .control{margin-bottom:0}:host(.textbox-group-input:not(:last-child)) .control.is-readonly input{border-right-width:.0625rem}:host(.textbox-group-input:not(:last-child)) input{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host(.textbox-group-input:not(:last-child)) input:focus{position:relative;z-index:1;border-right-width:.0625rem}:host(.text-truncate) input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.is-monospace) input,:host(.is-monospace) textarea,:host-context(.is-monospace) input,:host-context(.is-monospace) textarea{font-family:var(--ec-font-family-monospace)}\n"] }]
|
|
1540
1540
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i2.TranslateService }]; }, propDecorators: { autocomplete: [{
|
|
1541
1541
|
type: Input
|
|
1542
1542
|
}], type: [{
|
|
@@ -1602,10 +1602,10 @@ class ViewOverlayComponent {
|
|
|
1602
1602
|
}
|
|
1603
1603
|
}
|
|
1604
1604
|
ViewOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1605
|
-
ViewOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: { status: "status", message: "message", action: "action", noDataTemplate: "noDataTemplate", displayAsMask: "displayAsMask", overlayClassList: "overlayClassList" }, ngImport: i0, template: "<!-- Transcluded Content -->\r\n<ng-content *ngIf=\"displayAsMask || (!displayAsMask && status === 'hasData')\"></ng-content>\r\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\r\n<span [hidden]=\"true\"\r\n\t class=\"overlay-status-{{status}}\"></span>\r\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\r\n<div *ngIf=\"status !== 'hasData'\"\r\n\t class=\"overlay flex-grow {{overlayClassList}}\"\r\n\t [ngClass]=\"{'not-mask': !displayAsMask,\r\n\t\t\t\t'overlay-error': status === 'error',\r\n\t\t\t\t'overlay-nodata': status === 'noData',\r\n\t\t\t\t'overlay-pending': status === 'pending'}\">\r\n\r\n\t<!--Pending Spinner-->\r\n\t<ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\r\n\r\n\t<ng-template [ngIf]=\"status === 'noData' && noDataTemplate\">\r\n\t\t<ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\r\n\t</ng-template>\r\n\r\n\t<ng-container *ngIf=\"(status === 'noData' && !noDataTemplate) || status !== 'noData'\">\r\n\t\t<!--Status Message-->\r\n\t\t<div id=\"statusMessage\"\r\n\t\t\t class=\"message\"\r\n\t\t\t *ngIf=\"message\"\r\n\t\t\t [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\r\n\t\t\t [innerHtml]=\"message | translate\">\r\n\t\t</div>\r\n\r\n\t\t<!-- Action -->\r\n\t\t<ec-button type=\"common\"\r\n\t\t\t\t class=\"mt-3\"\r\n\t\t\t\t *ngIf=\"action?.onClick\"\r\n\t\t\t\t [icon]=\"action?.icon\"\r\n\t\t\t\t (clicked)=\"actionClicked($event)\"\r\n\t\t\t\t [label]=\"action?.label\"\r\n\t\t\t\t [hidden]=\"status === 'pending'\">\r\n\t\t</ec-button>\r\n\t</ng-container>\r\n\r\n</div>", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-
|
|
1605
|
+
ViewOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: { status: "status", message: "message", action: "action", noDataTemplate: "noDataTemplate", displayAsMask: "displayAsMask", overlayClassList: "overlayClassList" }, ngImport: i0, template: "<!-- Transcluded Content -->\r\n<ng-content *ngIf=\"displayAsMask || (!displayAsMask && status === 'hasData')\"></ng-content>\r\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\r\n<span [hidden]=\"true\"\r\n\t class=\"overlay-status-{{status}}\"></span>\r\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\r\n<div *ngIf=\"status !== 'hasData'\"\r\n\t class=\"overlay flex-grow {{overlayClassList}}\"\r\n\t [ngClass]=\"{'not-mask': !displayAsMask,\r\n\t\t\t\t'overlay-error': status === 'error',\r\n\t\t\t\t'overlay-nodata': status === 'noData',\r\n\t\t\t\t'overlay-pending': status === 'pending'}\">\r\n\r\n\t<!--Pending Spinner-->\r\n\t<ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\r\n\r\n\t<ng-template [ngIf]=\"status === 'noData' && noDataTemplate\">\r\n\t\t<ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\r\n\t</ng-template>\r\n\r\n\t<ng-container *ngIf=\"(status === 'noData' && !noDataTemplate) || status !== 'noData'\">\r\n\t\t<!--Status Message-->\r\n\t\t<div id=\"statusMessage\"\r\n\t\t\t class=\"message\"\r\n\t\t\t *ngIf=\"message\"\r\n\t\t\t [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\r\n\t\t\t [innerHtml]=\"message | translate\">\r\n\t\t</div>\r\n\r\n\t\t<!-- Action -->\r\n\t\t<ec-button type=\"common\"\r\n\t\t\t\t class=\"mt-3\"\r\n\t\t\t\t *ngIf=\"action?.onClick\"\r\n\t\t\t\t [icon]=\"action?.icon\"\r\n\t\t\t\t (clicked)=\"actionClicked($event)\"\r\n\t\t\t\t [label]=\"action?.label\"\r\n\t\t\t\t [hidden]=\"status === 'pending'\">\r\n\t\t</ec-button>\r\n\t</ng-container>\r\n\r\n</div>", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-background-color);display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: SpinnerComponent, selector: "ec-spinner" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
1606
1606
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ViewOverlayComponent, decorators: [{
|
|
1607
1607
|
type: Component,
|
|
1608
|
-
args: [{ selector: '[ecOverlay]', template: "<!-- Transcluded Content -->\r\n<ng-content *ngIf=\"displayAsMask || (!displayAsMask && status === 'hasData')\"></ng-content>\r\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\r\n<span [hidden]=\"true\"\r\n\t class=\"overlay-status-{{status}}\"></span>\r\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\r\n<div *ngIf=\"status !== 'hasData'\"\r\n\t class=\"overlay flex-grow {{overlayClassList}}\"\r\n\t [ngClass]=\"{'not-mask': !displayAsMask,\r\n\t\t\t\t'overlay-error': status === 'error',\r\n\t\t\t\t'overlay-nodata': status === 'noData',\r\n\t\t\t\t'overlay-pending': status === 'pending'}\">\r\n\r\n\t<!--Pending Spinner-->\r\n\t<ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\r\n\r\n\t<ng-template [ngIf]=\"status === 'noData' && noDataTemplate\">\r\n\t\t<ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\r\n\t</ng-template>\r\n\r\n\t<ng-container *ngIf=\"(status === 'noData' && !noDataTemplate) || status !== 'noData'\">\r\n\t\t<!--Status Message-->\r\n\t\t<div id=\"statusMessage\"\r\n\t\t\t class=\"message\"\r\n\t\t\t *ngIf=\"message\"\r\n\t\t\t [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\r\n\t\t\t [innerHtml]=\"message | translate\">\r\n\t\t</div>\r\n\r\n\t\t<!-- Action -->\r\n\t\t<ec-button type=\"common\"\r\n\t\t\t\t class=\"mt-3\"\r\n\t\t\t\t *ngIf=\"action?.onClick\"\r\n\t\t\t\t [icon]=\"action?.icon\"\r\n\t\t\t\t (clicked)=\"actionClicked($event)\"\r\n\t\t\t\t [label]=\"action?.label\"\r\n\t\t\t\t [hidden]=\"status === 'pending'\">\r\n\t\t</ec-button>\r\n\t</ng-container>\r\n\r\n</div>", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-
|
|
1608
|
+
args: [{ selector: '[ecOverlay]', template: "<!-- Transcluded Content -->\r\n<ng-content *ngIf=\"displayAsMask || (!displayAsMask && status === 'hasData')\"></ng-content>\r\n<!--Used by GI tests to know the overlay status whether we use ngIf or mask version. No visual impact-->\r\n<span [hidden]=\"true\"\r\n\t class=\"overlay-status-{{status}}\"></span>\r\n<!-- Overlay goes last so it is rendered on top of preceding content due to source order -->\r\n<div *ngIf=\"status !== 'hasData'\"\r\n\t class=\"overlay flex-grow {{overlayClassList}}\"\r\n\t [ngClass]=\"{'not-mask': !displayAsMask,\r\n\t\t\t\t'overlay-error': status === 'error',\r\n\t\t\t\t'overlay-nodata': status === 'noData',\r\n\t\t\t\t'overlay-pending': status === 'pending'}\">\r\n\r\n\t<!--Pending Spinner-->\r\n\t<ec-spinner [hidden]=\"status !== 'pending'\"></ec-spinner>\r\n\r\n\t<ng-template [ngIf]=\"status === 'noData' && noDataTemplate\">\r\n\t\t<ng-container *ngTemplateOutlet=\"noDataTemplate\"></ng-container>\r\n\t</ng-template>\r\n\r\n\t<ng-container *ngIf=\"(status === 'noData' && !noDataTemplate) || status !== 'noData'\">\r\n\t\t<!--Status Message-->\r\n\t\t<div id=\"statusMessage\"\r\n\t\t\t class=\"message\"\r\n\t\t\t *ngIf=\"message\"\r\n\t\t\t [ngClass]=\"{'error': status === 'error', 'mt-1': status === 'pending'}\"\r\n\t\t\t [innerHtml]=\"message | translate\">\r\n\t\t</div>\r\n\r\n\t\t<!-- Action -->\r\n\t\t<ec-button type=\"common\"\r\n\t\t\t\t class=\"mt-3\"\r\n\t\t\t\t *ngIf=\"action?.onClick\"\r\n\t\t\t\t [icon]=\"action?.icon\"\r\n\t\t\t\t (clicked)=\"actionClicked($event)\"\r\n\t\t\t\t [label]=\"action?.label\"\r\n\t\t\t\t [hidden]=\"status === 'pending'\">\r\n\t\t</ec-button>\r\n\t</ng-container>\r\n\r\n</div>", styles: [":host{position:relative}:host(.bg-body)>.overlay{background-color:var(--ec-background-color-body)}:host(.bg-body).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}:host(.bg-content)>.overlay{background-color:var(--ec-background-color)}:host(.bg-content).is-translucent>.overlay{background-color:var(--ec-background-color-overlay)}.overlay{align-items:center;background-color:var(--ec-background-color);display:flex;flex-direction:column;justify-content:center;padding:3rem 4rem;z-index:var(--ec-z-index-overlay);position:absolute;inset:0}.overlay.not-mask{position:relative;min-height:100%}.message{color:var(--ec-color-secondary-dark);font-size:var(--ec-font-size-title)}.message.error{color:var(--ec-color-danger);font-size:var(--ec-font-size-title)}\n"] }]
|
|
1609
1609
|
}], propDecorators: { status: [{
|
|
1610
1610
|
type: Input
|
|
1611
1611
|
}], message: [{
|
|
@@ -1992,9 +1992,6 @@ class MenuComponent {
|
|
|
1992
1992
|
case ("checkAndLabel"):
|
|
1993
1993
|
this.internalizedTemplate = this.checkAndLabelTemplate;
|
|
1994
1994
|
break;
|
|
1995
|
-
case ("iconLabelCaption"):
|
|
1996
|
-
this.internalizedTemplate = this.iconLabelCaptionTemplate;
|
|
1997
|
-
break;
|
|
1998
1995
|
default:
|
|
1999
1996
|
throw new Error(`Invalid templateType for MenuComponent. Please use either: 'label', 'iconAndLabel' or 'checkAndLabel'`);
|
|
2000
1997
|
}
|
|
@@ -2276,10 +2273,10 @@ class MenuComponent {
|
|
|
2276
2273
|
}
|
|
2277
2274
|
}
|
|
2278
2275
|
MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: WindowService }, { token: ScrollService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2279
|
-
MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, selector: "ec-menu", inputs: { id: "id", items: "items", selected: "selected", parent: "parent", templateType: "templateType", customMenuTemplate: "customMenuTemplate", title: "title", showNoItems: "showNoItems", noDataText: "noDataText", enableKeyNav: "enableKeyNav", highlightedItem: "highlightedItem", maintainSelectedItem: "maintainSelectedItem", truncateItems: "truncateItems", preserveIconSpace: "preserveIconSpace", dropdownToggleButton: "dropdownToggleButton" }, outputs: { selectedChanged: "selectedChanged", menuClosed: "menuClosed" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "iconAndLabelTemplate", first: true, predicate: ["iconAndLabel"], descendants: true, static: true }, { propertyName: "checkAndLabelTemplate", first: true, predicate: ["checkAndLabel"], descendants: true, static: true }, { propertyName: "iconLabelCaptionTemplate", first: true, predicate: ["iconLabelCaption"], descendants: true, static: true }], ngImport: i0, template: "<nav>\r\n <div class=\"parent\"\r\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n <header id=\"{{id}}_header\"\r\n class=\"text-heading-3 p-1\"\r\n [class.is-selected]=\"highlightedItemIndex === -1\"\r\n *ngIf=\"parent\"\r\n (click)=\"back($event)\">\r\n <div class=\"item-wrapper\">\r\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n </div>\r\n </header>\r\n\r\n <ul id=\"{{id}}_list\"\r\n class=\"py-1\">\r\n <li *ngFor=\"let item of items; index as i\"\r\n id=\"{{item.id || id + '_item' + i}}\"\r\n class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n [attr.disabled]=\"item.disabled\"\r\n [hidden]=\"item.hidden\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n (routerLinkActivated)=\"selectItem($event, item)\"\r\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n (click)=\"selectItem($event, item)\">\r\n\r\n <a *ngIf=\"item.url && !item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams || null\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <a *ngIf=\"item.url && item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\"\r\n href=\"{{item.url}}\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <div *ngIf=\"!item.url\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\">\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </div>\r\n </li>\r\n </ul>\r\n\r\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n </div>\r\n\r\n <!-- Child menu (Rendered to the right) -->\r\n <ec-menu *ngIf=\"selected?.items\"\r\n id=\"{{id}}_child\"\r\n class=\"child\"\r\n [parent]=\"selected\"\r\n [items]=\"selected?.items\"\r\n [showNoItems]=\"true\"\r\n [templateType]=\"templateType\"\r\n [enableKeyNav]=\"true\"\r\n [truncateItems]=\"truncateItems\"\r\n (selectedChanged)=\"onSelection($event)\"\r\n (menuClosed)=\"toggleChildMenu(false)\">\r\n </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n let-item>\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\"\r\n *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n let-item>\r\n\r\n <i class=\"ec-icon icon-check ec-icon-sm\"\r\n *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n <i class=\"ec-icon {{item.icon}} ml-2\"\r\n *ngIf=\"item.icon\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\"\r\n *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n let-item>\r\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n <i class=\"ec-icon {{item.icon}}\"\r\n *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\"\r\n *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<ng-template #iconLabelCaption\r\n let-item>\r\n <i class=\"ec-icon {{item.icon}}\"\r\n *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n <div class=\"label flex-grow\">\r\n <p id=\"{{item.id}}_label\"\r\n class=\"text-body-1\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</p>\r\n <p id=\"{{item.id}}_caption\"\r\n *ngIf=\"item.caption\"\r\n class=\"text-caption-1\"\r\n [class.text-truncate]=\"truncateItems\">{{item.caption}}</p>\r\n </div>\r\n <i class=\"ec-icon icon-angle-down rotate-270 align-self-center\"\r\n *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-font-size-action);font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}ul li.is-disabled .item-wrapper{color:var(--ec-color-secondary-dark);opacity:.65}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
2276
|
+
MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MenuComponent, selector: "ec-menu", inputs: { id: "id", items: "items", selected: "selected", parent: "parent", templateType: "templateType", customMenuTemplate: "customMenuTemplate", title: "title", showNoItems: "showNoItems", noDataText: "noDataText", enableKeyNav: "enableKeyNav", highlightedItem: "highlightedItem", maintainSelectedItem: "maintainSelectedItem", truncateItems: "truncateItems", preserveIconSpace: "preserveIconSpace", dropdownToggleButton: "dropdownToggleButton" }, outputs: { selectedChanged: "selectedChanged", menuClosed: "menuClosed" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "iconAndLabelTemplate", first: true, predicate: ["iconAndLabel"], descendants: true, static: true }, { propertyName: "checkAndLabelTemplate", first: true, predicate: ["checkAndLabel"], descendants: true, static: true }], ngImport: i0, template: "<nav>\r\n <div class=\"parent\"\r\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n <header id=\"{{id}}_header\"\r\n class=\"text-heading-3 p-1\"\r\n [class.is-selected]=\"highlightedItemIndex === -1\"\r\n *ngIf=\"parent\"\r\n (click)=\"back($event)\">\r\n <div class=\"item-wrapper\">\r\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n </div>\r\n </header>\r\n\r\n <ul id=\"{{id}}_list\" class=\"py-1\">\r\n <li *ngFor=\"let item of items; index as i\"\r\n id=\"{{item.id || id + '_item' + i}}\"\r\n class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n [attr.disabled]=\"item.disabled\"\r\n [hidden]=\"item.hidden\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n (routerLinkActivated)=\"selectItem($event, item)\"\r\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n (click)=\"selectItem($event, item)\">\r\n\r\n <a *ngIf=\"item.url && !item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams || null\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <a *ngIf=\"item.url && item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\"\r\n href=\"{{item.url}}\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <div *ngIf=\"!item.url\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\">\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </div>\r\n </li>\r\n </ul>\r\n\r\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n </div>\r\n\r\n <!-- Child menu (Rendered to the right) -->\r\n <ec-menu *ngIf=\"selected?.items\"\r\n id=\"{{id}}_child\"\r\n class=\"child\"\r\n [parent]=\"selected\"\r\n [items]=\"selected?.items\"\r\n [showNoItems]=\"true\"\r\n [templateType]=\"templateType\"\r\n [enableKeyNav]=\"true\"\r\n [truncateItems]=\"truncateItems\"\r\n (selectedChanged)=\"onSelection($event)\"\r\n (menuClosed)=\"toggleChildMenu(false)\">\r\n </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n let-item>\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n let-item>\r\n\r\n <i class=\"ec-icon icon-check ec-icon-sm\" *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n <i class=\"ec-icon {{item.icon}} ml-2\" *ngIf=\"item.icon\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n let-item>\r\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n <i class=\"ec-icon {{item.icon}}\" *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-font-size-action);font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}ul li.is-disabled .item-wrapper{color:var(--ec-color-secondary-dark);opacity:.65}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NavItemActiveDirective, selector: "[ecNavItemActive]", inputs: ["ecNavItemActive", "ecNavItemActiveExactMatch", "ecNavItemActiveQueryParams", "ecNavItemActiveUrl"], outputs: ["routerLinkActivated"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
2280
2277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MenuComponent, decorators: [{
|
|
2281
2278
|
type: Component,
|
|
2282
|
-
args: [{ selector: 'ec-menu', template: "<nav>\r\n <div class=\"parent\"\r\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n <header id=\"{{id}}_header\"\r\n class=\"text-heading-3 p-1\"\r\n [class.is-selected]=\"highlightedItemIndex === -1\"\r\n *ngIf=\"parent\"\r\n (click)=\"back($event)\">\r\n <div class=\"item-wrapper\">\r\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n </div>\r\n </header>\r\n\r\n <ul id=\"{{id}}_list\"
|
|
2279
|
+
args: [{ selector: 'ec-menu', template: "<nav>\r\n <div class=\"parent\"\r\n [class.no-data]=\"showNoItems && (!items || items.length === 0)\">\r\n <header id=\"{{id}}_header\"\r\n class=\"text-heading-3 p-1\"\r\n [class.is-selected]=\"highlightedItemIndex === -1\"\r\n *ngIf=\"parent\"\r\n (click)=\"back($event)\">\r\n <div class=\"item-wrapper\">\r\n <i class=\"ec-icon icon-angle-down rotate-90 flex-shrink\"></i>\r\n <span class=\"label text-truncate flex-grow\">{{parent?.label}}</span>\r\n </div>\r\n </header>\r\n\r\n <ul id=\"{{id}}_list\" class=\"py-1\">\r\n <li *ngFor=\"let item of items; index as i\"\r\n id=\"{{item.id || id + '_item' + i}}\"\r\n class=\"{{item.display || 'item'}} {{item.classList}}\"\r\n [attr.disabled]=\"item.disabled\"\r\n [hidden]=\"item.hidden\"\r\n ecNavItemActive=\"is-selected\"\r\n [ecNavItemActiveQueryParams]=\"item.queryParams\"\r\n [ecNavItemActiveUrl]=\"item.url\"\r\n [ecNavItemActiveExactMatch]='item.isActiveExactMatch'\r\n (routerLinkActivated)=\"selectItem($event, item)\"\r\n [ngClass]=\"{'is-highlighted':(selected === item && item?.display !== 'heading') || highlightedItem === item, 'is-link': item.url, 'is-disabled': item.disabled, 'is-readonly': item.readonly, 'is-checked': item.checked, 'text-heading-3': item?.display === 'heading'}\"\r\n (click)=\"selectItem($event, item)\">\r\n\r\n <a *ngIf=\"item.url && !item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\"\r\n [routerLink]=\"item.url\"\r\n [queryParams]=\"item.queryParams || null\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <a *ngIf=\"item.url && item.externalLink\"\r\n id=\"{{item.id}}_link\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\"\r\n href=\"{{item.url}}\"\r\n target=\"{{item.target || '_self'}}\">\r\n\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </a>\r\n\r\n <div *ngIf=\"!item.url\"\r\n title=\"{{truncateItems ? item.label : ''}}\"\r\n class=\"item-wrapper\">\r\n <ng-container *ngTemplateOutlet=\"internalizedTemplate; context: {$implicit: item}\"></ng-container>\r\n </div>\r\n </li>\r\n </ul>\r\n\r\n <p class=\"no-data-message\">{{noDataText | translate}}</p>\r\n </div>\r\n\r\n <!-- Child menu (Rendered to the right) -->\r\n <ec-menu *ngIf=\"selected?.items\"\r\n id=\"{{id}}_child\"\r\n class=\"child\"\r\n [parent]=\"selected\"\r\n [items]=\"selected?.items\"\r\n [showNoItems]=\"true\"\r\n [templateType]=\"templateType\"\r\n [enableKeyNav]=\"true\"\r\n [truncateItems]=\"truncateItems\"\r\n (selectedChanged)=\"onSelection($event)\"\r\n (menuClosed)=\"toggleChildMenu(false)\">\r\n </ec-menu>\r\n</nav>\r\n\r\n<!-- 'label' Item Template -->\r\n<ng-template #label\r\n let-item>\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'checkAndLabel' Item Template -->\r\n<ng-template #checkAndLabel\r\n let-item>\r\n\r\n <i class=\"ec-icon icon-check ec-icon-sm\" *ngIf=\"item.display !== 'heading'\"></i>\r\n\r\n <i class=\"ec-icon {{item.icon}} ml-2\" *ngIf=\"item.icon\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>\r\n\r\n<!-- 'iconAndLabel' Item Template -->\r\n<ng-template #iconAndLabel\r\n let-item>\r\n <!-- If menuItem.icon exists and is not blank, show the icon in the menu -->\r\n <i class=\"ec-icon {{item.icon}}\" *ngIf=\"(item.icon && item.icon !== '') || preserveIconSpace\"></i>\r\n\r\n <span id=\"{{item.id}}_label\"\r\n class=\"label\"\r\n [class.text-truncate]=\"truncateItems\">{{item.label}}</span>\r\n\r\n <i class=\"ec-icon icon-angle-down rotate-270\" *ngIf=\"item?.items\"></i>\r\n</ng-template>", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block;font-size:var(--ec-font-size-action);font-weight:400;background-color:var(--ec-menu-background-color, var(--ec-background-color))}:host.open>nav>.parent,:host.open>nav>.child{position:absolute;left:0;top:0;right:0;height:100%;transition:transform .25s ease}:host.open>nav>.parent{transform:translate(0)}:host.open>nav>.child{transform:translate(100%)}:host.open-active>nav>.parent{transform:translate(-100%)}:host.open-active>nav>.child{transform:translate(0)}:host(.bg-transparent){background-color:transparent}:host-context(.is-always-open){height:100%}:host-context(.is-always-open) .item-wrapper{padding-left:1rem;padding-right:1rem}nav{display:flex;position:relative;height:100%;overflow:hidden}.parent{display:flex;flex-direction:column;flex:auto;position:relative;max-width:100%}.parent>header{cursor:pointer}.parent>header.is-selected .item-wrapper,.parent>header.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}.parent>header:hover .item-wrapper{background-color:var(--ec-background-color-hover)}.parent.no-data ul{display:none}.parent.no-data .no-data-message{display:block}ul{padding:0;margin:0;list-style:none;flex:auto;height:100%;overflow-y:auto}ul li{cursor:pointer;padding:0 .25rem}ul li a{color:inherit;border-bottom:0;text-decoration:none}ul li.is-selected .item-wrapper,ul li.is-highlighted .item-wrapper{background-color:var(--ec-background-color-selected)}ul li:hover .item-wrapper{background-color:var(--ec-background-color-hover)}ul li:focus .item-wrapper{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}ul li.is-disabled .item-wrapper{color:var(--ec-color-secondary-dark);opacity:.65}ul li.is-disabled,ul li.is-readonly{cursor:default}ul li.is-disabled .item-wrapper,ul li.is-readonly .item-wrapper{background-color:transparent;color:inherit}ul li.is-checked .icon-check{opacity:1}ul li.heading{cursor:default}ul li.heading .item-wrapper{background-color:transparent}ul li.heading:not(:first-child){margin-top:.5rem}ul li.divider{border-bottom:1px solid var(--ec-border-color);padding-bottom:.25rem;margin-bottom:.25rem}ul li.indent-1 .item-wrapper{padding-left:1.5rem}ul li.indent-2 .item-wrapper{padding-left:2.5rem}ul li.indent-3 .item-wrapper{padding-left:3.5rem}.item-wrapper{cursor:inherit;line-height:1.25rem;min-height:1.75rem;padding:.25rem .5rem;border-radius:var(--ec-border-radius);display:flex;color:inherit}.item-wrapper .label{margin-right:auto}.item-wrapper .label+.ec-icon{margin-left:.5rem}.item-wrapper .ec-icon{margin-top:calc((1.25rem - var(--ec-font-size-icon)) / 2);flex:none}.item-wrapper .ec-icon+.label{margin-left:.5rem}.item-wrapper .ec-icon-sm{margin-top:calc((1.25rem - calc(var(--ec-font-size-icon) * .75)) / 2)}.item-wrapper .icon-check{opacity:0}.no-data-message{display:none;text-align:center;padding:1rem;color:var(--ec-color-hint-dark);margin-bottom:0;font-size:var(--ec-font-size-body)}:host-context(ec-tree) ul{overflow-x:hidden}:host-context(ec-tree) li.is-selected,:host-context(ec-tree) li.is-highlighted{font-weight:700;color:var(--ec-menu-color-highlighted, inherit)}:host-context(ec-tree) li.is-selected:not(:hover),:host-context(ec-tree) li.is-highlighted:not(:hover){background-color:transparent}\n"] }]
|
|
2283
2280
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: WindowService }, { type: ScrollService }]; }, propDecorators: { id: [{
|
|
2284
2281
|
type: Input
|
|
2285
2282
|
}], attrId: [{
|
|
@@ -2326,9 +2323,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
2326
2323
|
}], checkAndLabelTemplate: [{
|
|
2327
2324
|
type: ViewChild,
|
|
2328
2325
|
args: ['checkAndLabel', { static: true }]
|
|
2329
|
-
}], iconLabelCaptionTemplate: [{
|
|
2330
|
-
type: ViewChild,
|
|
2331
|
-
args: ['iconLabelCaption', { static: true }]
|
|
2332
2326
|
}] } });
|
|
2333
2327
|
|
|
2334
2328
|
/**
|
|
@@ -2381,10 +2375,6 @@ class ComboboxComponent extends FormControlBase {
|
|
|
2381
2375
|
* @memberof ComboboxComponent
|
|
2382
2376
|
*/
|
|
2383
2377
|
this.templateType = 'label';
|
|
2384
|
-
/**
|
|
2385
|
-
* When true, the menu items will preserve the icon space when there is no icon
|
|
2386
|
-
*/
|
|
2387
|
-
this.preserveIconSpace = false;
|
|
2388
2378
|
/**
|
|
2389
2379
|
* Position the menu as fixed, ideal when comboboxes are inside dialogs
|
|
2390
2380
|
* Defaulting to true so all menus will be at least the width of the
|
|
@@ -3102,10 +3092,10 @@ class ComboboxComponent extends FormControlBase {
|
|
|
3102
3092
|
}
|
|
3103
3093
|
}
|
|
3104
3094
|
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 });
|
|
3105
|
-
ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ComboboxComponent, selector: "ec-combobox", inputs: { addNew: "addNew", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", preserveIconSpace: "preserveIconSpace", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText" }, outputs: { addNewClick: "addNewClick", search: "search" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }, { propertyName: "addNewButton", first: true, predicate: ["addNewButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'open': menuStatus === 'visible',\r\n 'invalid': formModel.touched && formModel.invalid,\r\n 'has-icon': ((templateType === 'iconAndLabel' || 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\"\r\n id=\"{{id}}_addNew\"\r\n #addNewButton\r\n [class.is-selected]=\"addNewSelected\"\r\n *ngIf=\"addNew\"\r\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n\r\n (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\" translate>Add new...</span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong class=\"ec-util-truncate\" [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong></span>\r\n </span>\r\n <i class=\"ec-icon icon-add\"></i>\r\n </button>\r\n\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n [ngClass]=\"menuElementClasses\"\r\n [templateType]=\"templateType\"\r\n [customMenuTemplate]=\"customMenuTemplate\"\r\n [showNoItems]=\"!hideNoMatches\"\r\n [noDataText]=\"noMatchesText\"\r\n [items]=\"filteredOptions\"\r\n [selected]=\"selectedItem\"\r\n (selectedChanged)=\"selectedChanged($event)\"\r\n [preserveIconSpace]=\"preserveIconSpace\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptions.length}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-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-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-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{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled .ec-icon{filter:grayscale(100%);opacity:.65}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:.0625rem;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25;padding:.25rem .5rem;align-items:center;background-color:var(--ec-background-color);display:flex;cursor:pointer;border:0;width:100%}.add-new.is-selected,.add-new.is-highlighted{background-color:var(--ec-background-color-selected)}.add-new:focus{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}.add-new:active{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}.add-new:disabled,.add-new.is-disabled{color:var(--ec-color-secondary-dark);opacity:.65;cursor:default}.add-new .label{align-items:center;display:flex;flex:auto}.add-new .ec-icon+.label{margin:0 .375rem}.add-new:hover:not(:active),.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:active .ec-icon{color:inherit}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button ::ng-deep button .ec-icon{background-size:1em;background-position:center}.open:not(.is-always-open) .textbox-group ec-textbox ::ng-deep input{border-color:var(--ec-border-color-control);box-shadow:none}.open:not(.is-always-open) .textbox-group ec-button ::ng-deep button{background-color:var(--ec-background-color-hover);box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
3095
|
+
ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ComboboxComponent, selector: "ec-combobox", inputs: { addNew: "addNew", maxlength: "maxlength", menuPosition: "menuPosition", minlength: "minlength", options: "options", templateType: "templateType", customMenuTemplate: "customMenuTemplate", popupFixed: "popupFixed", totalRecords: "totalRecords", upperCase: "upperCase", placeholder: "placeholder", loadOnOpenObservable: "loadOnOpenObservable", hideToggleButton: "hideToggleButton", alwaysOpen: "alwaysOpen", menuElementClasses: "menuElementClasses", textboxElementClasses: "textboxElementClasses", hideNoMatches: "hideNoMatches", noMatchesText: "noMatchesText" }, outputs: { addNewClick: "addNewClick", search: "search" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "textbox", first: true, predicate: ["textbox"], descendants: true }, { propertyName: "popup", first: true, predicate: PopupContainerDirective, descendants: true }, { propertyName: "addNewButton", first: true, predicate: ["addNewButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'open': menuStatus === 'visible',\r\n 'invalid': formModel.touched && formModel.invalid,\r\n 'has-icon': (templateType === 'iconAndLabel' && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n 'is-readonly': readonly,\r\n 'is-disabled': formModel.disabled,\r\n 'is-always-open': alwaysOpen}\">\r\n\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors}}</span>\r\n </label>\r\n\r\n <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\" *ecPopup=\"dropdownmenu\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n <ec-textbox class=\"textbox-group-input mb-0\"\r\n #textbox\r\n [id]=\"id\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [maxlength]=\"maxlength\"\r\n [minlength]=\"minlength\"\r\n [placeholder]=\"effectivePlaceholder\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n (input)=\"textboxValueChanged($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n (focusout)=\"onBlur()\"\r\n [upperCase]=\"upperCase\"\r\n [pending]=\"pending && alwaysOpen\"\r\n [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n <ec-button class=\"textbox-group-btn-right\"\r\n *ngIf=\"!hideToggleButton\"\r\n [id]=\"id + '_button'\"\r\n [disabled]=\"formModel.disabled\"\r\n icon=\"icon-caret-down\"\r\n [tabindex]=\"-1\"\r\n type=\"secondary\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"\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\"\r\n id=\"{{id}}_addNew\"\r\n #addNewButton\r\n [class.is-selected]=\"addNewSelected\"\r\n *ngIf=\"addNew\"\r\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n\r\n (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\" translate>Add new...</span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong class=\"ec-util-truncate\" [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong></span>\r\n </span>\r\n <i class=\"ec-icon icon-add\"></i>\r\n </button>\r\n\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n [ngClass]=\"menuElementClasses\"\r\n [templateType]=\"templateType\"\r\n [customMenuTemplate]=\"customMenuTemplate\"\r\n [showNoItems]=\"!hideNoMatches\"\r\n [noDataText]=\"noMatchesText\"\r\n [items]=\"filteredOptions\"\r\n [selected]=\"selectedItem\"\r\n (selectedChanged)=\"selectedChanged($event)\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptions.length}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-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-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-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{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.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-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled .ec-icon{filter:grayscale(100%);opacity:.65}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:.0625rem;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25;padding:.25rem .5rem;align-items:center;background-color:var(--ec-background-color);display:flex;cursor:pointer;border:0;width:100%}.add-new.is-selected,.add-new.is-highlighted{background-color:var(--ec-background-color-selected)}.add-new:focus{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}.add-new:active{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}.add-new:disabled,.add-new.is-disabled{color:var(--ec-color-secondary-dark);opacity:.65;cursor:default}.add-new .label{align-items:center;display:flex;flex:auto}.add-new .ec-icon+.label{margin:0 .375rem}.add-new:hover:not(:active),.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:active .ec-icon{color:inherit}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button ::ng-deep button .ec-icon{background-size:1em;background-position:center}.open:not(.is-always-open) .textbox-group ec-textbox ::ng-deep input{border-color:var(--ec-border-color-control);box-shadow:none}.open:not(.is-always-open) .textbox-group ec-button ::ng-deep button{background-color:var(--ec-background-color-hover);box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "directive", type: PopupContainerDirective, selector: "[ecPopup]", inputs: ["ecPopup", "options"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
3106
3096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
3107
3097
|
type: Component,
|
|
3108
|
-
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\"\r\n id=\"{{id}}_addNew\"\r\n #addNewButton\r\n [class.is-selected]=\"addNewSelected\"\r\n *ngIf=\"addNew\"\r\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n\r\n (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\" translate>Add new...</span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong class=\"ec-util-truncate\" [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong></span>\r\n </span>\r\n <i class=\"ec-icon icon-add\"></i>\r\n </button>\r\n\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n [ngClass]=\"menuElementClasses\"\r\n [templateType]=\"templateType\"\r\n [customMenuTemplate]=\"customMenuTemplate\"\r\n [showNoItems]=\"!hideNoMatches\"\r\n [noDataText]=\"noMatchesText\"\r\n [items]=\"filteredOptions\"\r\n [selected]=\"selectedItem\"\r\n (selectedChanged)=\"selectedChanged($event)\"\r\n [preserveIconSpace]=\"preserveIconSpace\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptions.length}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-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-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-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{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control ec-textbox ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled .ec-icon{filter:grayscale(100%);opacity:.65}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:.0625rem;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25;padding:.25rem .5rem;align-items:center;background-color:var(--ec-background-color);display:flex;cursor:pointer;border:0;width:100%}.add-new.is-selected,.add-new.is-highlighted{background-color:var(--ec-background-color-selected)}.add-new:focus{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}.add-new:active{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}.add-new:disabled,.add-new.is-disabled{color:var(--ec-color-secondary-dark);opacity:.65;cursor:default}.add-new .label{align-items:center;display:flex;flex:auto}.add-new .ec-icon+.label{margin:0 .375rem}.add-new:hover:not(:active),.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:active .ec-icon{color:inherit}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button ::ng-deep button .ec-icon{background-size:1em;background-position:center}.open:not(.is-always-open) .textbox-group ec-textbox ::ng-deep input{border-color:var(--ec-border-color-control);box-shadow:none}.open:not(.is-always-open) .textbox-group ec-button ::ng-deep button{background-color:var(--ec-background-color-hover);box-shadow:none}\n"] }]
|
|
3098
|
+
args: [{ selector: 'ec-combobox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'open': menuStatus === 'visible',\r\n 'invalid': formModel.touched && formModel.invalid,\r\n 'has-icon': (templateType === 'iconAndLabel' && formModel.value && formModel.value.icon && formModel.value.label === textboxFormModel.value),\r\n 'is-readonly': readonly,\r\n 'is-disabled': formModel.disabled,\r\n 'is-always-open': alwaysOpen}\">\r\n\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors}}</span>\r\n </label>\r\n\r\n <ng-container *ngIf=\"alwaysOpen; else popupTarget\">\r\n <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngIf=\"filteredOptions.length > 0 || textboxFormModel.value\">\r\n <ng-container *ngTemplateOutlet=\"dropdownmenu\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #popupTarget>\r\n <div class=\"textbox-group control-input\" [ngClass]=\"textboxElementClasses\" *ecPopup=\"dropdownmenu\">\r\n <ng-container *ngTemplateOutlet=\"textbox\"></ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #textbox>\r\n <i class=\"ec-icon {{formModel.value?.icon}}\"></i>\r\n\r\n <ec-textbox class=\"textbox-group-input mb-0\"\r\n #textbox\r\n [id]=\"id\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [maxlength]=\"maxlength\"\r\n [minlength]=\"minlength\"\r\n [placeholder]=\"effectivePlaceholder\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n (input)=\"textboxValueChanged($event)\"\r\n (keydown)=\"keyNavigate($event)\"\r\n (focusout)=\"onBlur()\"\r\n [upperCase]=\"upperCase\"\r\n [pending]=\"pending && alwaysOpen\"\r\n [autocomplete]=\"'off'\"></ec-textbox>\r\n\r\n <ec-button class=\"textbox-group-btn-right\"\r\n *ngIf=\"!hideToggleButton\"\r\n [id]=\"id + '_button'\"\r\n [disabled]=\"formModel.disabled\"\r\n icon=\"icon-caret-down\"\r\n [tabindex]=\"-1\"\r\n type=\"secondary\"\r\n (click)=\"toggleMenu($event)\"\r\n (keydown)=\"keyNavigate($event)\"\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\"\r\n id=\"{{id}}_addNew\"\r\n #addNewButton\r\n [class.is-selected]=\"addNewSelected\"\r\n *ngIf=\"addNew\"\r\n [hidden]=\"foundMatch || (addNew === 'dynamic' && (!textboxFormModel.value || (formModel.value && textboxFormModel.value === formModel.value.label)))\"\r\n\r\n (click)=\"onAddNew($event)\">\r\n <span class=\"add-new-label ec-util-truncate\">\r\n <span *ngIf=\"addNew === 'static' || addNew === true\" translate>Add new...</span>\r\n <span *ngIf=\"addNew === 'dynamic'\">{{'Add' | translate}} <strong class=\"ec-util-truncate\" [ngClass]=\"{'text-uppercase': upperCase}\">{{textboxFormModel.value}}</strong></span>\r\n </span>\r\n <i class=\"ec-icon icon-add\"></i>\r\n </button>\r\n\r\n <ec-menu id=\"{{id}}_menu\"\r\n [class.border-top-0]=\"!filteredOptions.length && hideNoMatches\"\r\n [ngClass]=\"menuElementClasses\"\r\n [templateType]=\"templateType\"\r\n [customMenuTemplate]=\"customMenuTemplate\"\r\n [showNoItems]=\"!hideNoMatches\"\r\n [noDataText]=\"noMatchesText\"\r\n [items]=\"filteredOptions\"\r\n [selected]=\"selectedItem\"\r\n (selectedChanged)=\"selectedChanged($event)\"></ec-menu>\r\n\r\n <footer *ngIf=\"totalRecords && totalRecords > filteredOptions.length && filteredOptions.length > 0\">\r\n <span>{{filteredOptions.length}} {{'of' | translate}} {{totalRecords}}</span>\r\n </footer>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-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-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host(.invalid) .control .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host(.invalid) .control:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-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{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.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-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control .textbox-group .ec-icon{display:none;position:absolute;top:.5rem;left:.5rem;z-index:2}.control.has-icon:not(.invalid) .ec-icon{display:inline-flex}.control.has-icon:not(.invalid) ec-textbox ::ng-deep input{padding-left:1.75rem}.control.is-disabled .ec-icon{filter:grayscale(100%);opacity:.65}.control.is-readonly ec-textbox ::ng-deep input{border-right-width:.0625rem;border-top-right-radius:var(--ec-border-radius);border-bottom-right-radius:var(--ec-border-radius)}.control.is-readonly ec-button{display:none}.control.is-always-open{height:100%}.control.is-always-open label,.control.is-always-open .textbox-group{margin-left:1rem;margin-right:1rem}.control.is-always-open .textbox-group{margin-bottom:1rem}.control.is-always-open .popup{background-color:transparent;box-shadow:none;flex:1 1;border:0;margin:0;z-index:0;min-height:0}.control.is-always-open ec-menu{border-top:1px solid var(--ec-border-color)}.control.is-always-open ec-menu ::ng-deep ul{max-height:none}label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.popup{background-color:var(--ec-background-color);border-radius:var(--ec-border-radius-card);box-shadow:var(--ec-box-shadow-overlay);margin-top:.25rem;overflow:hidden;z-index:var(--ec-z-index-popup)}ec-menu{display:block}ec-menu:not(:first-child){border-top:1px solid var(--ec-border-color)}ec-menu ::ng-deep ul{max-height:30vh}ec-menu ::ng-deep ul li{white-space:nowrap}.add-new{height:2rem;line-height:1.25;padding:.25rem .5rem;align-items:center;background-color:var(--ec-background-color);display:flex;cursor:pointer;border:0;width:100%}.add-new.is-selected,.add-new.is-highlighted{background-color:var(--ec-background-color-selected)}.add-new:focus{background-color:var(--ec-color-disabled-dark);position:relative;z-index:1;outline:none}.add-new:active{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}.add-new:disabled,.add-new.is-disabled{color:var(--ec-color-secondary-dark);opacity:.65;cursor:default}.add-new .label{align-items:center;display:flex;flex:auto}.add-new .ec-icon+.label{margin:0 .375rem}.add-new:hover:not(:active),.add-new.is-selected{background-color:var(--ec-background-color-hover)}.add-new:active .ec-icon{color:inherit}.add-new-label{flex:1 1;margin-right:.5rem;text-align:left}.add-new .ec-icon{flex:0 0 auto}footer{padding:.5rem;border-top:1px solid var(--ec-border-color);color:var(--ec-color-hint-dark);font-size:var(--ec-font-size-label);text-align:right;line-height:1}ec-button{--ec-button-border-color-secondary: var(--ec-border-color-control);--ec-button-color-icon-secondary: var(--ec-color-icon)}ec-button ::ng-deep button .ec-icon{background-size:1em;background-position:center}.open:not(.is-always-open) .textbox-group ec-textbox ::ng-deep input{border-color:var(--ec-border-color-control);box-shadow:none}.open:not(.is-always-open) .textbox-group ec-button ::ng-deep button{background-color:var(--ec-background-color-hover);box-shadow:none}\n"] }]
|
|
3109
3099
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i2.TranslateService }, { type: ScrollService }]; }, propDecorators: { onResize: [{
|
|
3110
3100
|
type: HostListener,
|
|
3111
3101
|
args: ['window:resize']
|
|
@@ -3123,8 +3113,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3123
3113
|
type: Input
|
|
3124
3114
|
}], customMenuTemplate: [{
|
|
3125
3115
|
type: Input
|
|
3126
|
-
}], preserveIconSpace: [{
|
|
3127
|
-
type: Input
|
|
3128
3116
|
}], popupFixed: [{
|
|
3129
3117
|
type: Input
|
|
3130
3118
|
}], totalRecords: [{
|
|
@@ -3695,10 +3683,10 @@ class FormGroupComponent {
|
|
|
3695
3683
|
}
|
|
3696
3684
|
}
|
|
3697
3685
|
FormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormGroupComponent, deps: [{ token: ValidationMessageService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3698
|
-
FormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormGroupComponent, selector: "ec-form-group", inputs: { id: "id", label: "label", formGroup: "formGroup", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"formGroup?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <ng-content></ng-content>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0
|
|
3686
|
+
FormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormGroupComponent, selector: "ec-form-group", inputs: { id: "id", label: "label", formGroup: "formGroup", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"formGroup?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <ng-content></ng-content>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
3699
3687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormGroupComponent, decorators: [{
|
|
3700
3688
|
type: Component,
|
|
3701
|
-
args: [{ selector: 'ec-form-group', template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"formGroup?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <ng-content></ng-content>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0
|
|
3689
|
+
args: [{ selector: 'ec-form-group', template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"formGroup?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && formGroup?.touched && formGroup?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <ng-content></ng-content>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"] }]
|
|
3702
3690
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: i2.TranslateService }]; }, propDecorators: { id: [{
|
|
3703
3691
|
type: Input
|
|
3704
3692
|
}], attrId: [{
|
|
@@ -4234,10 +4222,10 @@ class NumericboxComponent extends FormControlBase {
|
|
|
4234
4222
|
}
|
|
4235
4223
|
}
|
|
4236
4224
|
NumericboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NumericboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
4237
|
-
NumericboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NumericboxComponent, selector: "ec-numericbox", inputs: { placeholder: "placeholder", decimals: "decimals", showPrecision: "showPrecision", maxPrecisionDigits: "maxPrecisionDigits", max: "max", min: "min", leftUnits: "leftUnits", rightUnits: "rightUnits", autoUpdateFormModel: "autoUpdateFormModel" }, viewQueries: [{ propertyName: "textboxEl", first: true, predicate: TextboxComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "textboxInput", first: true, predicate: ["textbox"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\r\n <label *ngIf=\"label\"\r\n ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length && formModel?.touched && formModel?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\r\n for javascript to support. If the user enters all 13 characters as numbers and we have showPrecision set, adding the\r\n decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\r\n as we would push them past the limit -->\r\n <ec-textbox [id]=\"id\"\r\n #textbox\r\n class=\"control-input mb-0\"\r\n [placeholder]=\"placeholder\"\r\n [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n [tooltip]=\"tooltip\"\r\n (focusout)=\"onFocusOut()\">\r\n </ec-textbox>\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0
|
|
4225
|
+
NumericboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: NumericboxComponent, selector: "ec-numericbox", inputs: { placeholder: "placeholder", decimals: "decimals", showPrecision: "showPrecision", maxPrecisionDigits: "maxPrecisionDigits", max: "max", min: "min", leftUnits: "leftUnits", rightUnits: "rightUnits", autoUpdateFormModel: "autoUpdateFormModel" }, viewQueries: [{ propertyName: "textboxEl", first: true, predicate: TextboxComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "textboxInput", first: true, predicate: ["textbox"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\r\n <label *ngIf=\"label\"\r\n ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length && formModel?.touched && formModel?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\r\n for javascript to support. If the user enters all 13 characters as numbers and we have showPrecision set, adding the\r\n decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\r\n as we would push them past the limit -->\r\n <ec-textbox [id]=\"id\"\r\n #textbox\r\n class=\"control-input mb-0\"\r\n [placeholder]=\"placeholder\"\r\n [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n [tooltip]=\"tooltip\"\r\n (focusout)=\"onFocusOut()\">\r\n </ec-textbox>\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}ec-textbox ::ng-deep .input-wrapper{position:relative}ec-textbox ::ng-deep input{text-align:right}ec-textbox ::ng-deep input:required.is-empty:not(:disabled)~.units-left{left:1.25rem}ec-textbox ::ng-deep input.ng-invalid.ng-touched~.units-left{left:1.25rem}ec-textbox ::ng-deep .control:not(.is-readonly) input:disabled~.units{color:var(--ec-color-secondary-dark);opacity:.65}ec-textbox ::ng-deep .units{height:2rem;line-height:1.25;color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;position:absolute;top:0;padding:.375rem .25rem;z-index:2}ec-textbox ::ng-deep .units.units-right{right:0;padding-right:.5rem}ec-textbox ::ng-deep .units.units-left{left:0;padding-left:.5rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid:not(:focus),.control.invalid ec-textbox ::ng-deep input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.units-left,.control.invalid ec-textbox ::ng-deep input.ng-valid~.units-left{left:1.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TextboxComponent, selector: "ec-textbox", inputs: ["autocomplete", "type", "placeholder", "maxlength", "minlength", "rows", "selectOnAutofocus", "upperCase"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
4238
4226
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NumericboxComponent, decorators: [{
|
|
4239
4227
|
type: Component,
|
|
4240
|
-
args: [{ selector: 'ec-numericbox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\r\n <label *ngIf=\"label\"\r\n ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length && formModel?.touched && formModel?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\r\n for javascript to support. If the user enters all 13 characters as numbers and we have showPrecision set, adding the\r\n decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\r\n as we would push them past the limit -->\r\n <ec-textbox [id]=\"id\"\r\n #textbox\r\n class=\"control-input mb-0\"\r\n [placeholder]=\"placeholder\"\r\n [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n [tooltip]=\"tooltip\"\r\n (focusout)=\"onFocusOut()\">\r\n </ec-textbox>\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0
|
|
4228
|
+
args: [{ selector: 'ec-numericbox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [class.invalid]=\"formModel?.invalid && (formModel?.touched)\">\r\n <label *ngIf=\"label\"\r\n ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length && formModel?.touched && formModel?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n <!-- Setting the maxlength to 13 to combat the user from entering too large of a number\r\n for javascript to support. If the user enters all 13 characters as numbers and we have showPrecision set, adding the\r\n decimal and the empty zero characters will get them in a situation where to edit it they must remove characters\r\n as we would push them past the limit -->\r\n <ec-textbox [id]=\"id\"\r\n #textbox\r\n class=\"control-input mb-0\"\r\n [placeholder]=\"placeholder\"\r\n [maxlength]=\"maxPrecisionDigits ? maxPrecisionDigits + 3 : 13\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"textboxFormModel\"\r\n [required]=\"required\"\r\n [tabindex]=\"tabindex\"\r\n [readonly]=\"readonly\"\r\n [tooltip]=\"tooltip\"\r\n (focusout)=\"onFocusOut()\">\r\n </ec-textbox>\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}ec-textbox ::ng-deep .input-wrapper{position:relative}ec-textbox ::ng-deep input{text-align:right}ec-textbox ::ng-deep input:required.is-empty:not(:disabled)~.units-left{left:1.25rem}ec-textbox ::ng-deep input.ng-invalid.ng-touched~.units-left{left:1.25rem}ec-textbox ::ng-deep .control:not(.is-readonly) input:disabled~.units{color:var(--ec-color-secondary-dark);opacity:.65}ec-textbox ::ng-deep .units{height:2rem;line-height:1.25;color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;position:absolute;top:0;padding:.375rem .25rem;z-index:2}ec-textbox ::ng-deep .units.units-right{right:0;padding-right:.5rem}ec-textbox ::ng-deep .units.units-left{left:0;padding-left:.5rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid,.control.invalid ec-textbox ::ng-deep input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.invalid ec-textbox ::ng-deep input.ng-invalid:not(:focus),.control.invalid ec-textbox ::ng-deep input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}.control.invalid ec-textbox ::ng-deep input.ng-invalid~.units-left,.control.invalid ec-textbox ::ng-deep input.ng-valid~.units-left{left:1.25rem}\n"] }]
|
|
4241
4229
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i0.Renderer2 }]; }, propDecorators: { placeholder: [{
|
|
4242
4230
|
type: Input
|
|
4243
4231
|
}], decimals: [{
|
|
@@ -4592,10 +4580,10 @@ class RadioButtonComponent extends FormControlBase {
|
|
|
4592
4580
|
}
|
|
4593
4581
|
}
|
|
4594
4582
|
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 });
|
|
4595
|
-
RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RadioButtonComponent, selector: "ec-radiobutton", inputs: { type: "type", options: "options", direction: "direction", name: "name" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["radioInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"control\"\r\n [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n <label *ngIf=\"label\"\r\n ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n\r\n\r\n <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n [ngClass]=\"currentClasses\"\r\n [class.is-disabled]=\"formModel.disabled\"\r\n [class.is-readonly]=\"readonly\">\r\n\r\n <!-- RadioButton type=\"toggle\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'toggle'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n tabindex=\"{{tabindex}}\"\r\n [value]=\"option.value\"\r\n #radioInput\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <label [attr.for]=\"inputId + i.toString()\"\r\n title=\"{{ option.tooltip | translate}}\">\r\n <i class=\"ec-icon {{option.icon}}\" *ngIf=\"option.icon\"></i>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\" *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n </label>\r\n </ng-container>\r\n <a>\r\n <div class=\"toggle-handle\"></div>\r\n </a>\r\n <div class=\"toggle-focused\"></div>\r\n </ng-container>\r\n\r\n <!-- RadioButton type=\"radio\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'radio'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <label class='radio-button'\r\n title=\"{{ option.tooltip | translate}}\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n class=\"input\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n value=\"{{option.value}}\"\r\n #radioInput\r\n tabindex=\"{{tabindex}}\"\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <span class=\"indicator\"></span>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n class=\"label\"\r\n *ngIf=\"option.label\"\r\n [innerHtml]=\"option.label | translate\"></span>\r\n </label>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-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-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:#1a1a231f;border-color:var(--ec-border-color-control-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-color-primary-dark)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-border-color-control)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive)}.input:disabled+.indicator{color:var(--ec-color-secondary-dark);background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);opacity:.65}.input:disabled~.label{color:var(--ec-color-secondary-dark);opacity:.65}.indicator{background-color:var(--ec-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{height:2rem;line-height:1.25;padding:.375rem .5rem;padding-left:0;padding-right:0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-font-size-body);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:.0625rem solid var(--ec-border-color-control);min-height:2em;position:relative;color:var(--ec-color-hint-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color: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:0 0 0 .125rem var(--ec-color-interactive);border-radius:var(--ec-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-background-color);border-radius:calc(var(--ec-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:.65;background-color:var(--ec-background-color-disabled);color:var(--ec-color-secondary-dark);border-color:var(--ec-border-color-control-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.radio-group-toggle.is-disabled a.toggle-handle{background-color:var(--ec-color-hint-light)}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
4583
|
+
RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RadioButtonComponent, selector: "ec-radiobutton", inputs: { type: "type", options: "options", direction: "direction", name: "name" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["radioInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"control\"\r\n [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n <label *ngIf=\"label\"\r\n ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n\r\n\r\n <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n [ngClass]=\"currentClasses\"\r\n [class.is-disabled]=\"formModel.disabled\"\r\n [class.is-readonly]=\"readonly\">\r\n\r\n <!-- RadioButton type=\"toggle\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'toggle'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n tabindex=\"{{tabindex}}\"\r\n [value]=\"option.value\"\r\n #radioInput\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <label [attr.for]=\"inputId + i.toString()\"\r\n title=\"{{ option.tooltip | translate}}\">\r\n <i class=\"ec-icon {{option.icon}}\" *ngIf=\"option.icon\"></i>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\" *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n </label>\r\n </ng-container>\r\n <a>\r\n <div class=\"toggle-handle\"></div>\r\n </a>\r\n <div class=\"toggle-focused\"></div>\r\n </ng-container>\r\n\r\n <!-- RadioButton type=\"radio\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'radio'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <label class='radio-button'\r\n title=\"{{ option.tooltip | translate}}\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n class=\"input\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n value=\"{{option.value}}\"\r\n #radioInput\r\n tabindex=\"{{tabindex}}\"\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <span class=\"indicator\"></span>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n class=\"label\"\r\n *ngIf=\"option.label\"\r\n [innerHtml]=\"option.label | translate\"></span>\r\n </label>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-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-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:#1a1a231f;border-color:var(--ec-border-color-control-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-color-primary-dark)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-border-color-control)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive)}.input:disabled+.indicator{color:var(--ec-color-secondary-dark);background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);opacity:.65}.input:disabled~.label{color:var(--ec-color-secondary-dark);opacity:.65}.indicator{background-color:var(--ec-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{height:2rem;line-height:1.25;padding:.375rem .5rem;padding-left:0;padding-right:0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-font-size-body);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:.0625rem solid var(--ec-border-color-control);min-height:2em;position:relative;color:var(--ec-color-hint-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color: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:0 0 0 .125rem var(--ec-color-interactive);border-radius:var(--ec-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-background-color);border-radius:calc(var(--ec-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:.65;background-color:var(--ec-background-color-disabled);color:var(--ec-color-secondary-dark);border-color:var(--ec-border-color-control-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.radio-group-toggle.is-disabled a.toggle-handle{background-color:var(--ec-color-hint-light)}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
4596
4584
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
4597
4585
|
type: Component,
|
|
4598
|
-
args: [{ selector: 'ec-radiobutton', template: "<div class=\"control\"\r\n [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n <label *ngIf=\"label\"\r\n ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n\r\n\r\n <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n [ngClass]=\"currentClasses\"\r\n [class.is-disabled]=\"formModel.disabled\"\r\n [class.is-readonly]=\"readonly\">\r\n\r\n <!-- RadioButton type=\"toggle\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'toggle'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n tabindex=\"{{tabindex}}\"\r\n [value]=\"option.value\"\r\n #radioInput\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <label [attr.for]=\"inputId + i.toString()\"\r\n title=\"{{ option.tooltip | translate}}\">\r\n <i class=\"ec-icon {{option.icon}}\" *ngIf=\"option.icon\"></i>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\" *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n </label>\r\n </ng-container>\r\n <a>\r\n <div class=\"toggle-handle\"></div>\r\n </a>\r\n <div class=\"toggle-focused\"></div>\r\n </ng-container>\r\n\r\n <!-- RadioButton type=\"radio\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'radio'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <label class='radio-button'\r\n title=\"{{ option.tooltip | translate}}\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n class=\"input\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n value=\"{{option.value}}\"\r\n #radioInput\r\n tabindex=\"{{tabindex}}\"\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <span class=\"indicator\"></span>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n class=\"label\"\r\n *ngIf=\"option.label\"\r\n [innerHtml]=\"option.label | translate\"></span>\r\n </label>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-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-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:#1a1a231f;border-color:var(--ec-border-color-control-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-color-primary-dark)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-border-color-control)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive)}.input:disabled+.indicator{color:var(--ec-color-secondary-dark);background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);opacity:.65}.input:disabled~.label{color:var(--ec-color-secondary-dark);opacity:.65}.indicator{background-color:var(--ec-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{height:2rem;line-height:1.25;padding:.375rem .5rem;padding-left:0;padding-right:0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-font-size-body);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:.0625rem solid var(--ec-border-color-control);min-height:2em;position:relative;color:var(--ec-color-hint-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color: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:0 0 0 .125rem var(--ec-color-interactive);border-radius:var(--ec-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-background-color);border-radius:calc(var(--ec-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:.65;background-color:var(--ec-background-color-disabled);color:var(--ec-color-secondary-dark);border-color:var(--ec-border-color-control-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.radio-group-toggle.is-disabled a.toggle-handle{background-color:var(--ec-color-hint-light)}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"] }]
|
|
4586
|
+
args: [{ selector: 'ec-radiobutton', template: "<div class=\"control\"\r\n [class.control-label-bottom]=\"labelPosition === 'bottom'\">\r\n <label *ngIf=\"label\"\r\n ngPreserveWhitespaces>\r\n <span>{{label | translate}}</span>\r\n\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n\r\n\r\n <div class=\"radio-group {{'toggle-options-' + options.length}}\"\r\n [ngClass]=\"currentClasses\"\r\n [class.is-disabled]=\"formModel.disabled\"\r\n [class.is-readonly]=\"readonly\">\r\n\r\n <!-- RadioButton type=\"toggle\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'toggle'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n tabindex=\"{{tabindex}}\"\r\n [value]=\"option.value\"\r\n #radioInput\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <label [attr.for]=\"inputId + i.toString()\"\r\n title=\"{{ option.tooltip | translate}}\">\r\n <i class=\"ec-icon {{option.icon}}\" *ngIf=\"option.icon\"></i>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\" *ngIf=\"option.label\">{{option.label | translate}}</span>\r\n </label>\r\n </ng-container>\r\n <a>\r\n <div class=\"toggle-handle\"></div>\r\n </a>\r\n <div class=\"toggle-focused\"></div>\r\n </ng-container>\r\n\r\n <!-- RadioButton type=\"radio\"-->\r\n <!-- There are two ng-templates here due to the fact you can't have ngIf and ngFor on the same element -->\r\n <ng-container *ngIf=\"type === 'radio'\">\r\n <ng-container *ngFor=\"let option of options; index as i; first as isFirst\">\r\n <label class='radio-button'\r\n title=\"{{ option.tooltip | translate}}\">\r\n <!-- The input has two name attributes set, one is for the form model and one is for the broswer. With one set\r\n the tabbing did not work, and with the other the controls were all linked together. They both need set\r\n for the best of both worlds -->\r\n <input [attr.id]=\"inputId + i.toString()\"\r\n class=\"input\"\r\n [formControl]=\"formModel\"\r\n type=\"radio\"\r\n value=\"{{option.value}}\"\r\n #radioInput\r\n tabindex=\"{{tabindex}}\"\r\n name=\"{{name}}\"\r\n attr.name=\"{{name}}\"\r\n [attr.cdkFocusInitial]=\"(autofocus && isFirst) || null\">\r\n <span class=\"indicator\"></span>\r\n <span id=\"{{inputId}}_label{{i.toString()}}\"\r\n class=\"label\"\r\n *ngIf=\"option.label\"\r\n [innerHtml]=\"option.label | translate\"></span>\r\n </label>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n</div>\r\n", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-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-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.radio-group{display:flex;flex-wrap:wrap}.radio-group-column{flex-direction:column}.radio-group-column .radio-button{margin-right:auto}.radio-group.is-disabled .radio-button{cursor:default}.radio-group.is-readonly .radio-button{pointer-events:none}.radio-group.is-readonly .radio-button .input{opacity:0}.radio-group.is-readonly .radio-button .indicator{background-color:#1a1a231f;border-color:var(--ec-border-color-control-readonly)}.radio-group.is-readonly .radio-button .label,.radio-group.is-readonly .radio-button .indicator{opacity:1;color:var(--ec-color-primary-dark)}.radio-group.is-readonly.radio-group-toggle{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}.radio-group.is-readonly.radio-group-toggle a,.radio-group.is-readonly.radio-group-toggle input:not(:checked),.radio-group.is-readonly.radio-group-toggle input:not(:checked)+label{display:none}.radio-group.is-readonly.radio-group-toggle input:checked+label{color:inherit;justify-content:flex-start}.radio-button{cursor:pointer;display:inline-flex;margin-bottom:0;position:relative}.radio-button:not(:last-child){margin-right:1rem}.input{margin-top:.5rem;opacity:0;position:absolute;z-index:-1}.input:not(:checked)+.indicator{color:var(--ec-border-color-control)}.input:not(:checked)+.indicator:before{display:none}.input:focus+.indicator{color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive)}.input:disabled+.indicator{color:var(--ec-color-secondary-dark);background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);opacity:.65}.input:disabled~.label{color:var(--ec-color-secondary-dark);opacity:.65}.indicator{background-color:var(--ec-background-color);background-clip:padding-box;border:1px solid currentColor;color:var(--ec-color-interactive);margin-top:.5rem;flex:none;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;height:1em;width:1em;border-radius:50%}.indicator:before{background-color:currentColor;content:\"\";display:block;width:.5em;height:.5em;border-radius:50%}.label{height:2rem;line-height:1.25;padding:.375rem .5rem;padding-left:0;padding-right:0;margin-left:.5rem;min-height:2rem;height:auto}.radio-group-toggle{font-size:var(--ec-font-size-body);background-color:var(--ec-border-color);border-radius:var(--ec-border-radius);border:.0625rem solid var(--ec-border-color-control);min-height:2em;position:relative;color:var(--ec-color-hint-dark);display:flex}.radio-group-toggle input{position:absolute;z-index:-1;opacity:0}.radio-group-toggle input:checked+label{color: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:0 0 0 .125rem var(--ec-color-interactive);border-radius:var(--ec-border-radius);display:none}.radio-group-toggle label{align-items:center;cursor:pointer;display:flex;flex:1 1 0%;justify-content:center;line-height:1.1em;margin-bottom:0;padding:.375rem .5rem;position:relative;text-align:center;transition:color .3s ease;z-index:2}.radio-group-toggle label .ec-icon{color:inherit}.radio-group-toggle a{border:.1875rem solid transparent;border-radius:calc(var(--ec-border-radius) * .75);display:block;height:100%;left:0;position:absolute;top:0;transition:transform .25s ease;width:50%;z-index:1}.radio-group-toggle a .toggle-handle{background-color:var(--ec-background-color);border-radius:calc(var(--ec-border-radius) * .75);height:100%}.radio-group-toggle.is-disabled{opacity:.65;background-color:var(--ec-background-color-disabled);color:var(--ec-color-secondary-dark);border-color:var(--ec-border-color-control-disabled)}.radio-group-toggle.is-disabled label{color:inherit!important;cursor:default}.radio-group-toggle.is-disabled a.toggle-handle{background-color:var(--ec-color-hint-light)}.toggle-options-3 a{width:33.3333333333%}.toggle-options-3 input:checked:last-of-type~a{transform:translate(200%)}.toggle-options-3 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-4 a{width:25%}.toggle-options-4 input:checked:last-of-type~a{transform:translate(300%)}.toggle-options-4 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-4 input:checked:nth-of-type(2)~a{transform:translate(100%)}.toggle-options-5 a{width:20%}.toggle-options-5 input:checked:last-of-type~a{transform:translate(400%)}.toggle-options-5 input:checked:nth-of-type(4)~a{transform:translate(300%)}.toggle-options-5 input:checked:nth-of-type(3)~a{transform:translate(200%)}.toggle-options-5 input:checked:nth-of-type(2)~a{transform:translate(100%)}\n"] }]
|
|
4599
4587
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { type: [{
|
|
4600
4588
|
type: Input
|
|
4601
4589
|
}], options: [{
|
|
@@ -4676,10 +4664,10 @@ class SelectComponent extends FormControlBase {
|
|
|
4676
4664
|
}
|
|
4677
4665
|
}
|
|
4678
4666
|
SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4679
|
-
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectComponent, selector: "ec-select", inputs: { placeholder: "placeholder", options: "options", autoDefault: "autoDefault" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\"\r\n [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\r\n <label for=\"{{id}}_select\"\r\n *ngIf=\"label\"\r\n ngPreserveWhitespaces>{{label|translate}}</label>\r\n <select [attr.id]=\"inputId\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.required]=\"required\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <option *ngIf=\"!required\"\r\n [ngValue]=\"null\">{{placeholder}}</option>\r\n <option *ngFor=\"let option of options\"\r\n [ngValue]=\"option.value\">{{option.label}}</option>\r\n </select>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0
|
|
4667
|
+
SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SelectComponent, selector: "ec-select", inputs: { placeholder: "placeholder", options: "options", autoDefault: "autoDefault" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"control\"\r\n [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\r\n <label for=\"{{id}}_select\"\r\n *ngIf=\"label\"\r\n ngPreserveWhitespaces>{{label|translate}}</label>\r\n <select [attr.id]=\"inputId\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.required]=\"required\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <option *ngIf=\"!required\"\r\n [ngValue]=\"null\">{{placeholder}}</option>\r\n <option *ngFor=\"let option of options\"\r\n [ngValue]=\"option.value\">{{option.label}}</option>\r\n </select>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host select{-webkit-appearance:none;appearance:none;border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M32 8L16 24 0 8z\"/></svg>');background-repeat:no-repeat;background-position:right .5rem center;background-size:.75rem,.75rem;padding:.3125rem 1.5rem .3125rem .5rem}:host select::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host select::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host select::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host select:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:required.is-empty{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);color:var(--ec-color-secondary-dark);opacity:.65}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select:focus{position:static}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
4680
4668
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectComponent, decorators: [{
|
|
4681
4669
|
type: Component,
|
|
4682
|
-
args: [{ selector: 'ec-select', template: "<div class=\"control\"\r\n [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\r\n <label for=\"{{id}}_select\"\r\n *ngIf=\"label\"\r\n ngPreserveWhitespaces>{{label|translate}}</label>\r\n <select [attr.id]=\"inputId\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.required]=\"required\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <option *ngIf=\"!required\"\r\n [ngValue]=\"null\">{{placeholder}}</option>\r\n <option *ngFor=\"let option of options\"\r\n [ngValue]=\"option.value\">{{option.label}}</option>\r\n </select>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0
|
|
4670
|
+
args: [{ selector: 'ec-select', template: "<div class=\"control\"\r\n [ngClass]=\"{'is-readonly': readonly, 'is-disabled': formModel.disabled}\">\r\n <label for=\"{{id}}_select\"\r\n *ngIf=\"label\"\r\n ngPreserveWhitespaces>{{label|translate}}</label>\r\n <select [attr.id]=\"inputId\"\r\n tabindex=\"{{tabindex}}\"\r\n [formControl]=\"formModel\"\r\n [attr.required]=\"required\"\r\n [attr.cdkFocusInitial]=\"autofocus || null\">\r\n <option *ngIf=\"!required\"\r\n [ngValue]=\"null\">{{placeholder}}</option>\r\n <option *ngFor=\"let option of options\"\r\n [ngValue]=\"option.value\">{{option.label}}</option>\r\n </select>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host select{-webkit-appearance:none;appearance:none;border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:none;background-clip:padding-box;border-width:.0625rem;border-style:solid;border-radius:var(--ec-border-radius);width:100%;height:2rem;line-height:1.25;background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M32 8L16 24 0 8z\"/></svg>');background-repeat:no-repeat;background-position:right .5rem center;background-size:.75rem,.75rem;padding:.3125rem 1.5rem .3125rem .5rem}:host select::selection{background-color:var(--ec-color-interactive);color:var(--ec-color-primary-light)}:host select::-webkit-input-placeholder{color:var(--ec-color-hint-dark)}:host select::-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:-ms-input-placeholder{color:var(--ec-color-hint-dark)}:host select:-moz-placeholder{color:var(--ec-color-hint-dark);opacity:1}:host select:required.is-empty{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host select.is-pending.ng-valid,:host select.is-pending.ng-invalid,:host select.is-pending.ng-pending{background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" viewBox=\"0 0 50 50\"><path fill=\"%230084a9\" d=\"M43.935 25.145c0-10.318-8.364-18.683-18.683-18.683-10.318 0-18.683 8.365-18.683 18.683h4.068c0-8.071 6.543-14.615 14.615-14.615s14.615 6.543 14.615 14.615h4.068z\"><animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"0.8s\" repeatCount=\"indefinite\"/></path></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled);color:var(--ec-color-secondary-dark);opacity:.65}:host select:disabled:required,:host select:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-control-disabled)}:host select.is-uppercase:not(.is-empty){text-transform:uppercase}:host select:focus{position:static}\n"] }]
|
|
4683
4671
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i0.ElementRef }]; }, propDecorators: { placeholder: [{
|
|
4684
4672
|
type: Input
|
|
4685
4673
|
}], options: [{
|
|
@@ -7884,10 +7872,10 @@ class TreeComponent {
|
|
|
7884
7872
|
}
|
|
7885
7873
|
}
|
|
7886
7874
|
TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7887
|
-
TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TreeComponent, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "hierarchyTreeComponent", first: true, predicate: HierarchyTreeComponent, descendants: true }], ngImport: i0, template: "<header *ngIf=\"!hideTreeHeader\"\r\n class=\"flex-shrink d-flex align-items-center\">\r\n <h2 id=\"{{id}}_title\"\r\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n <ec-dropdown *ngIf=\"menuItems?.length\"\r\n id=\"{{id}}_dropdown\"\r\n class=\"flex-shrink\"\r\n icon=\"icon-menu\"\r\n [menuTemplateType]=\"menuTemplateType\"\r\n menuPosition=\"left\"\r\n [status]=\"menuStatus\"\r\n [popupFixed]=\"true\"\r\n [showArrow]=\"false\"\r\n [menuMinWidth]=\"240\"\r\n [items]=\"menuItems\">\r\n </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [displayAsMask]=\"true\">\r\n <ng-container *ngIf=\"type === 'menu'\">\r\n <ec-menu [id]=\"id\"\r\n [items]=\"treeItems\"\r\n [templateType]=\"templateType\"\r\n [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n [truncateItems]=\"true\"\r\n (selectedChanged)=\"onItemSelected($event)\"\r\n [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n class=\"flex-grow\">\r\n </ec-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'hierarchy'\">\r\n <ec-hierarchy-tree [id]=\"id\"\r\n [rootNode]=\"treeHierarchy\"\r\n [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n (itemSelected)=\"onItemSelected($event)\"\r\n class=\"flex-grow d-flex\">\r\n </ec-hierarchy-tree>\r\n </ng-container>\r\n</div>", styles: [":host{display:flex;flex-direction:column
|
|
7875
|
+
TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TreeComponent, selector: "ec-tree", inputs: { id: "id", treeTitle: "treeTitle", hideTreeHeader: "hideTreeHeader", treeItems: "treeItems", treeHierarchyHideRootNode: "treeHierarchyHideRootNode", treeHierarchy: "treeHierarchy", treeMenuMaintainSelectedItem: "treeMenuMaintainSelectedItem", customTreeMenuTemplate: "customTreeMenuTemplate", status: "status", type: "type", menuItems: "menuItems", menuStatus: "menuStatus", menuTemplateType: "menuTemplateType", preserveIconSpace: "preserveIconSpace", templateType: "templateType" }, outputs: { treeSelection: "treeSelection", getTreeItemChildren: "getTreeItemChildren" }, host: { properties: { "attr.id": "this.attrId" } }, viewQueries: [{ propertyName: "menuComponent", first: true, predicate: MenuComponent, descendants: true }, { propertyName: "hierarchyTreeComponent", first: true, predicate: HierarchyTreeComponent, descendants: true }], ngImport: i0, template: "<header *ngIf=\"!hideTreeHeader\"\r\n class=\"flex-shrink d-flex align-items-center\">\r\n <h2 id=\"{{id}}_title\"\r\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n <ec-dropdown *ngIf=\"menuItems?.length\"\r\n id=\"{{id}}_dropdown\"\r\n class=\"flex-shrink\"\r\n icon=\"icon-menu\"\r\n [menuTemplateType]=\"menuTemplateType\"\r\n menuPosition=\"left\"\r\n [status]=\"menuStatus\"\r\n [popupFixed]=\"true\"\r\n [showArrow]=\"false\"\r\n [menuMinWidth]=\"240\"\r\n [items]=\"menuItems\">\r\n </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [displayAsMask]=\"true\">\r\n <ng-container *ngIf=\"type === 'menu'\">\r\n <ec-menu [id]=\"id\"\r\n [items]=\"treeItems\"\r\n [templateType]=\"templateType\"\r\n [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n [truncateItems]=\"true\"\r\n (selectedChanged)=\"onItemSelected($event)\"\r\n [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n class=\"flex-grow\">\r\n </ec-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'hierarchy'\">\r\n <ec-hierarchy-tree [id]=\"id\"\r\n [rootNode]=\"treeHierarchy\"\r\n [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n (itemSelected)=\"onItemSelected($event)\"\r\n class=\"flex-grow d-flex\">\r\n </ec-hierarchy-tree>\r\n </ng-container>\r\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu{--ec-menu-background-color: var(--ec-tree-background-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: MenuComponent, selector: "ec-menu", inputs: ["id", "items", "selected", "parent", "templateType", "customMenuTemplate", "title", "showNoItems", "noDataText", "enableKeyNav", "highlightedItem", "maintainSelectedItem", "truncateItems", "preserveIconSpace", "dropdownToggleButton"], outputs: ["selectedChanged", "menuClosed"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }, { kind: "component", type: HierarchyTreeComponent, selector: "ec-hierarchy-tree", inputs: ["id", "hideRootNode"], outputs: ["itemSelected"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
7888
7876
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TreeComponent, decorators: [{
|
|
7889
7877
|
type: Component,
|
|
7890
|
-
args: [{ selector: 'ec-tree', template: "<header *ngIf=\"!hideTreeHeader\"\r\n class=\"flex-shrink d-flex align-items-center\">\r\n <h2 id=\"{{id}}_title\"\r\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n <ec-dropdown *ngIf=\"menuItems?.length\"\r\n id=\"{{id}}_dropdown\"\r\n class=\"flex-shrink\"\r\n icon=\"icon-menu\"\r\n [menuTemplateType]=\"menuTemplateType\"\r\n menuPosition=\"left\"\r\n [status]=\"menuStatus\"\r\n [popupFixed]=\"true\"\r\n [showArrow]=\"false\"\r\n [menuMinWidth]=\"240\"\r\n [items]=\"menuItems\">\r\n </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [displayAsMask]=\"true\">\r\n <ng-container *ngIf=\"type === 'menu'\">\r\n <ec-menu [id]=\"id\"\r\n [items]=\"treeItems\"\r\n [templateType]=\"templateType\"\r\n [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n [truncateItems]=\"true\"\r\n (selectedChanged)=\"onItemSelected($event)\"\r\n [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n class=\"flex-grow\">\r\n </ec-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'hierarchy'\">\r\n <ec-hierarchy-tree [id]=\"id\"\r\n [rootNode]=\"treeHierarchy\"\r\n [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n (itemSelected)=\"onItemSelected($event)\"\r\n class=\"flex-grow d-flex\">\r\n </ec-hierarchy-tree>\r\n </ng-container>\r\n</div>", styles: [":host{display:flex;flex-direction:column
|
|
7878
|
+
args: [{ selector: 'ec-tree', template: "<header *ngIf=\"!hideTreeHeader\"\r\n class=\"flex-shrink d-flex align-items-center\">\r\n <h2 id=\"{{id}}_title\"\r\n class=\"flex-grow mr-2 text-heading-1\">{{treeTitle | translate}}</h2>\r\n <ec-dropdown *ngIf=\"menuItems?.length\"\r\n id=\"{{id}}_dropdown\"\r\n class=\"flex-shrink\"\r\n icon=\"icon-menu\"\r\n [menuTemplateType]=\"menuTemplateType\"\r\n menuPosition=\"left\"\r\n [status]=\"menuStatus\"\r\n [popupFixed]=\"true\"\r\n [showArrow]=\"false\"\r\n [menuMinWidth]=\"240\"\r\n [items]=\"menuItems\">\r\n </ec-dropdown>\r\n</header>\r\n\r\n<div class=\"flex-grow d-flex\"\r\n ecOverlay\r\n [status]=\"status?.status\"\r\n [displayAsMask]=\"true\">\r\n <ng-container *ngIf=\"type === 'menu'\">\r\n <ec-menu [id]=\"id\"\r\n [items]=\"treeItems\"\r\n [templateType]=\"templateType\"\r\n [maintainSelectedItem]=\"treeMenuMaintainSelectedItem\"\r\n [truncateItems]=\"true\"\r\n (selectedChanged)=\"onItemSelected($event)\"\r\n [customMenuTemplate]=\"customTreeMenuTemplate ? customTreeMenuTemplate : undefined\"\r\n [preserveIconSpace]=\"preserveIconSpace\"\r\n class=\"flex-grow\">\r\n </ec-menu>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"type === 'hierarchy'\">\r\n <ec-hierarchy-tree [id]=\"id\"\r\n [rootNode]=\"treeHierarchy\"\r\n [hideRootNode]=\"treeHierarchyHideRootNode\"\r\n (getItemChildren)=\"onHierarchyGetItemChildren($event)\"\r\n (itemSelected)=\"onItemSelected($event)\"\r\n class=\"flex-grow d-flex\">\r\n </ec-hierarchy-tree>\r\n </ng-container>\r\n</div>", styles: [":host{display:flex;flex-direction:column}header{height:var(--ec-tree-height-header, 3rem);background-color:var(--ec-tree-background-color, var(--ec-background-color));padding:var(--ec-tree-padding-header, 0 .25rem 0 .5rem);border-bottom:var(--ec-tree-border-bottom-header, var(--ec-border-width) solid var(--ec-border-color))}ec-dropdown.fill{height:var(--ec-tree-height-header, 3rem);width:var(--ec-tree-height-header, 3rem)}ec-menu{--ec-menu-background-color: var(--ec-tree-background-color)}\n"] }]
|
|
7891
7879
|
}], ctorParameters: function () { return []; }, propDecorators: { attrId: [{
|
|
7892
7880
|
type: HostBinding,
|
|
7893
7881
|
args: ['attr.id']
|
|
@@ -8643,10 +8631,10 @@ class WizardButtonsComponent {
|
|
|
8643
8631
|
}
|
|
8644
8632
|
}
|
|
8645
8633
|
WizardButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WizardButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8646
|
-
WizardButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: WizardButtonsComponent, selector: "ec-wizard-buttons", inputs: { nextLabel: "nextLabel", backLabel: "backLabel", cancelLabel: "cancelLabel", saveLabel: "saveLabel", cancelId: "cancelId", saveId: "saveId", tabindex: "tabindex", status: "status", showBack: "showBack", showSave: "showSave", hideNextSaveButton: "hideNextSaveButton" }, outputs: { cancel: "cancel", save: "save", nextTab: "nextTab", previousTab: "previousTab" }, ngImport: i0, template: "<ec-button id=\"{{saveId}}\"\r\n class=\"ml-2\"\r\n *ngIf=\"!hideNextSaveButton\"\r\n type=\"primary\"\r\n [label]=\"(!showSave ? nextLabel : saveLabel)\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex\"\r\n (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\r\n [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\r\n</ec-button>\r\n<ec-button id=\"previousTab\"\r\n class=\"ml-2\"\r\n *ngIf=\"showBack\"\r\n type=\"secondary\"\r\n [label]=\"backLabel\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex+1\"\r\n (clicked)=\"onPreviousTab()\">\r\n</ec-button>\r\n<ec-button id=\"{{cancelId}}\"\r\n type=\"secondary\"\r\n [label]=\"cancelLabel\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex+2\"\r\n (clicked)=\"onCancel()\">\r\n</ec-button>\r\n", styles: [":host{display:flex;flex-direction:row-reverse}
|
|
8634
|
+
WizardButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: WizardButtonsComponent, selector: "ec-wizard-buttons", inputs: { nextLabel: "nextLabel", backLabel: "backLabel", cancelLabel: "cancelLabel", saveLabel: "saveLabel", cancelId: "cancelId", saveId: "saveId", tabindex: "tabindex", status: "status", showBack: "showBack", showSave: "showSave", hideNextSaveButton: "hideNextSaveButton" }, outputs: { cancel: "cancel", save: "save", nextTab: "nextTab", previousTab: "previousTab" }, ngImport: i0, template: "<ec-button id=\"{{saveId}}\"\r\n class=\"ml-2\"\r\n *ngIf=\"!hideNextSaveButton\"\r\n type=\"primary\"\r\n [label]=\"(!showSave ? nextLabel : saveLabel)\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex\"\r\n (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\r\n [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\r\n</ec-button>\r\n<ec-button id=\"previousTab\"\r\n class=\"ml-2\"\r\n *ngIf=\"showBack\"\r\n type=\"secondary\"\r\n [label]=\"backLabel\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex+1\"\r\n (clicked)=\"onPreviousTab()\">\r\n</ec-button>\r\n<ec-button id=\"{{cancelId}}\"\r\n type=\"secondary\"\r\n [label]=\"cancelLabel\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex+2\"\r\n (clicked)=\"onCancel()\">\r\n</ec-button>\r\n", styles: [":host{display:flex;flex-direction:row-reverse}\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"] }] });
|
|
8647
8635
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WizardButtonsComponent, decorators: [{
|
|
8648
8636
|
type: Component,
|
|
8649
|
-
args: [{ selector: 'ec-wizard-buttons', template: "<ec-button id=\"{{saveId}}\"\r\n class=\"ml-2\"\r\n *ngIf=\"!hideNextSaveButton\"\r\n type=\"primary\"\r\n [label]=\"(!showSave ? nextLabel : saveLabel)\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex\"\r\n (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\r\n [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\r\n</ec-button>\r\n<ec-button id=\"previousTab\"\r\n class=\"ml-2\"\r\n *ngIf=\"showBack\"\r\n type=\"secondary\"\r\n [label]=\"backLabel\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex+1\"\r\n (clicked)=\"onPreviousTab()\">\r\n</ec-button>\r\n<ec-button id=\"{{cancelId}}\"\r\n type=\"secondary\"\r\n [label]=\"cancelLabel\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex+2\"\r\n (clicked)=\"onCancel()\">\r\n</ec-button>\r\n", styles: [":host{display:flex;flex-direction:row-reverse}
|
|
8637
|
+
args: [{ selector: 'ec-wizard-buttons', template: "<ec-button id=\"{{saveId}}\"\r\n class=\"ml-2\"\r\n *ngIf=\"!hideNextSaveButton\"\r\n type=\"primary\"\r\n [label]=\"(!showSave ? nextLabel : saveLabel)\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex\"\r\n (clicked)=\"!showSave ? onNextTab() : onSave($event)\"\r\n [disabled]=\"status?.status === 'pending' || status?.status === 'error'\">\r\n</ec-button>\r\n<ec-button id=\"previousTab\"\r\n class=\"ml-2\"\r\n *ngIf=\"showBack\"\r\n type=\"secondary\"\r\n [label]=\"backLabel\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex+1\"\r\n (clicked)=\"onPreviousTab()\">\r\n</ec-button>\r\n<ec-button id=\"{{cancelId}}\"\r\n type=\"secondary\"\r\n [label]=\"cancelLabel\"\r\n [tabindex]=\"!tabindex ? 0 : tabindex+2\"\r\n (clicked)=\"onCancel()\">\r\n</ec-button>\r\n", styles: [":host{display:flex;flex-direction:row-reverse}\n"] }]
|
|
8650
8638
|
}], ctorParameters: function () { return []; }, propDecorators: { nextLabel: [{
|
|
8651
8639
|
type: Input
|
|
8652
8640
|
}], backLabel: [{
|
|
@@ -8800,10 +8788,10 @@ class FormControlLabelComponent {
|
|
|
8800
8788
|
}
|
|
8801
8789
|
}
|
|
8802
8790
|
FormControlLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormControlLabelComponent, deps: [{ token: ValidationMessageService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8803
|
-
FormControlLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormControlLabelComponent, selector: "ec-form-control-label", inputs: { id: "id", label: "label", control: "control", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && control?.touched && control?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0
|
|
8791
|
+
FormControlLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FormControlLabelComponent, selector: "ec-form-control-label", inputs: { id: "id", label: "label", control: "control", labelPosition: "labelPosition", overrideValidationError: "overrideValidationError", hideValidationMessage: "hideValidationMessage" }, host: { properties: { "attr.id": "this.attrId" } }, ngImport: i0, template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && control?.touched && control?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
8804
8792
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormControlLabelComponent, decorators: [{
|
|
8805
8793
|
type: Component,
|
|
8806
|
-
args: [{ selector: 'ec-form-control-label', template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && control?.touched && control?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0
|
|
8794
|
+
args: [{ selector: 'ec-form-control-label', template: "<div class=\"control control-label-{{labelPosition}}\" [class.ec-untouched]=\"control?.untouched\">\r\n <label *ngIf=\"label\" ngPreserveWhitespaces>\r\n\r\n <span id=\"{{id}}_label\">{{label | translate}}</span>\r\n\r\n <span *ngIf=\"!hideValidationMessage && validationErrors && control?.touched && control?.invalid\">{{validationErrors | translate}}</span>\r\n </label>\r\n</div>", styles: [":host{color:var(--ec-color-primary-dark);font-family:var(--ec-font-family);font-size:var(--ec-font-size-body);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-border-color-control-readonly);background-color:#1a1a231f;background-clip:border-box;background-image:none;color:var(--ec-color-primary-dark);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-background-color-control-invalid);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:not(:focus),:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-background-color-control-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-border-color-control-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}label{color:var(--ec-color-secondary-dark);display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched{background-image:none;padding-left:.5rem}.control.ec-untouched ::ng-deep input.ng-invalid.ng-touched:not(.is-empty)~.units-left{left:0}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty{border-color:var(--ec-border-color-control);background-color:var(--ec-background-color);background-image:url('data:image/svg+xml;charset=utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"><path fill=\"rgb(255, 228, 51)\" d=\"M31.32 21.69l-.09.18-2.48 4.35c-.36.54-.77.62-1.25.27-.12 0-.2 0-.2-.09L19.53 22v9.37a1.26 1.26 0 0 1-.72.67h-5.26c-.59 0-.83-.3-.83-.89 0-.12.15-.21.15-.27V22l-8 4.71h-.12c-.42.66-.8.21-1.16-.27L1 21.82a.82.82 0 0 1 .35-1.26l.18-.1L9 16 .87 11.47v-.09c0-.36-.39-.74-.09-1.16l2.75-4.35v-.09c0-.42.82-.54 1.29-.36l8 4.62V.89c0-.59.18-.89.77-.89h5c.65 0 .91.3.91.89V10l7.94-4.53c.48-.29.72-.21 1.08.27l2.32 4.35v.09c.66.48.45.89-.08 1.25L23 16l7.91 4.53v.09c-.04.18.53.54.41 1.07z\"/></svg>');background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"] }]
|
|
8807
8795
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: i2.TranslateService }]; }, propDecorators: { id: [{
|
|
8808
8796
|
type: Input
|
|
8809
8797
|
}], attrId: [{
|