@energycap/components 0.36.1-ECAP-18585-font-awesome-upgrade-fixes.20230630-1701 → 0.36.1-ECAP-18586-collection-icons.20230705-1755
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 +2 -2
- 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/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/shared/wizard/wizard-buttons/wizard-buttons.component.mjs +2 -2
- package/fesm2015/energycap-components.mjs +18 -18
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +18 -18
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/_base.scss +1 -2
- package/src/styles/_icons.scss +1 -1
- package/src/styles/mixins/_form-control-base.scss +3 -3
|
@@ -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 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}.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 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}.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 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" }] });
|
|
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" }] });
|
|
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 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"] }]
|
|
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"] }]
|
|
1540
1540
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i2.TranslateService }]; }, propDecorators: { autocomplete: [{
|
|
1541
1541
|
type: Input
|
|
1542
1542
|
}], type: [{
|
|
@@ -3092,10 +3092,10 @@ class ComboboxComponent extends FormControlBase {
|
|
|
3092
3092
|
}
|
|
3093
3093
|
}
|
|
3094
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 });
|
|
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" }] });
|
|
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 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" }] });
|
|
3096
3096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ComboboxComponent, decorators: [{
|
|
3097
3097
|
type: Component,
|
|
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"] }]
|
|
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 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"] }]
|
|
3099
3099
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i2.TranslateService }, { type: ScrollService }]; }, propDecorators: { onResize: [{
|
|
3100
3100
|
type: HostListener,
|
|
3101
3101
|
args: ['window:resize']
|
|
@@ -3683,10 +3683,10 @@ class FormGroupComponent {
|
|
|
3683
3683
|
}
|
|
3684
3684
|
}
|
|
3685
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 });
|
|
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
|
|
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 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}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:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
3687
3687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormGroupComponent, decorators: [{
|
|
3688
3688
|
type: Component,
|
|
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
|
|
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 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}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:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"] }]
|
|
3690
3690
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: i2.TranslateService }]; }, propDecorators: { id: [{
|
|
3691
3691
|
type: Input
|
|
3692
3692
|
}], attrId: [{
|
|
@@ -4222,10 +4222,10 @@ class NumericboxComponent extends FormControlBase {
|
|
|
4222
4222
|
}
|
|
4223
4223
|
}
|
|
4224
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 });
|
|
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
|
|
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 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}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:1px;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 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}.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" }] });
|
|
4226
4226
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NumericboxComponent, decorators: [{
|
|
4227
4227
|
type: Component,
|
|
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
|
|
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 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}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:1px;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 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}.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"] }]
|
|
4229
4229
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i0.Renderer2 }]; }, propDecorators: { placeholder: [{
|
|
4230
4230
|
type: Input
|
|
4231
4231
|
}], decimals: [{
|
|
@@ -4580,10 +4580,10 @@ class RadioButtonComponent extends FormControlBase {
|
|
|
4580
4580
|
}
|
|
4581
4581
|
}
|
|
4582
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 });
|
|
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" }] });
|
|
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 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" }] });
|
|
4584
4584
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
4585
4585
|
type: Component,
|
|
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"] }]
|
|
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 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"] }]
|
|
4587
4587
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { type: [{
|
|
4588
4588
|
type: Input
|
|
4589
4589
|
}], options: [{
|
|
@@ -4664,10 +4664,10 @@ class SelectComponent extends FormControlBase {
|
|
|
4664
4664
|
}
|
|
4665
4665
|
}
|
|
4666
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 });
|
|
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
|
|
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 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 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:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}: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 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-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:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-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" }] });
|
|
4668
4668
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SelectComponent, decorators: [{
|
|
4669
4669
|
type: Component,
|
|
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
|
|
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 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 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:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}: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 32 32\"><path fill=\"rgba(26, 26, 35, 0.66)\" d=\"M20.21 20.21h-8.42L10.95 0h10.1l-.84 20.21zm-8.42 3.37h8.42V32h-8.42z\"/></svg>');background-repeat:no-repeat;background-position:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select.ng-invalid.ng-touched:not(:focus){border-color:var(--ec-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:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}:host select:focus,:host select:focus.is-empty{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}:host select:disabled{background-color:var(--ec-background-color-disabled);border-color:var(--ec-border-color-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"] }]
|
|
4671
4671
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i0.ElementRef }]; }, propDecorators: { placeholder: [{
|
|
4672
4672
|
type: Input
|
|
4673
4673
|
}], options: [{
|
|
@@ -8631,10 +8631,10 @@ class WizardButtonsComponent {
|
|
|
8631
8631
|
}
|
|
8632
8632
|
}
|
|
8633
8633
|
WizardButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WizardButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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"] }] });
|
|
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}:host-context(ec-page-view .titlebar > .actions){flex-direction:row}\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"] }] });
|
|
8635
8635
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: WizardButtonsComponent, decorators: [{
|
|
8636
8636
|
type: Component,
|
|
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"] }]
|
|
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}:host-context(ec-page-view .titlebar > .actions){flex-direction:row}\n"] }]
|
|
8638
8638
|
}], ctorParameters: function () { return []; }, propDecorators: { nextLabel: [{
|
|
8639
8639
|
type: Input
|
|
8640
8640
|
}], backLabel: [{
|
|
@@ -8788,10 +8788,10 @@ class FormControlLabelComponent {
|
|
|
8788
8788
|
}
|
|
8789
8789
|
}
|
|
8790
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 });
|
|
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
|
|
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 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}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:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
8792
8792
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FormControlLabelComponent, decorators: [{
|
|
8793
8793
|
type: Component,
|
|
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
|
|
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 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}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:.25rem center;background-size:1rem,1rem;padding-left:1.5rem}.control.ec-untouched ::ng-deep input:required:not(:disabled).is-empty:focus{border-color:var(--ec-color-interactive);box-shadow:0 0 0 .0625rem var(--ec-color-interactive);position:relative;z-index:1}.control-label-left{display:flex}\n"] }]
|
|
8795
8795
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: i2.TranslateService }]; }, propDecorators: { id: [{
|
|
8796
8796
|
type: Input
|
|
8797
8797
|
}], attrId: [{
|