@energycap/components 0.39.27-ECAP-26661-delete-site-updates-product-aware-confirm.20241001-1521 → 0.39.27
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/esm2020/lib/controls/item-picker/item-picker.component.mjs +8 -4
- package/esm2020/lib/controls/textbox/textbox.component.mjs +3 -3
- package/esm2020/lib/display/confirm/confirm.component.mjs +4 -37
- package/esm2020/lib/display/table/searchable-table.component.mjs +7 -3
- package/esm2020/lib/display/table/table-pagination.component.mjs +8 -3
- package/fesm2015/energycap-components.mjs +24 -43
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +24 -41
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/controls/item-picker/item-picker.component.d.ts +2 -0
- package/lib/display/confirm/confirm.component.d.ts +2 -19
- package/lib/display/table/searchable-table.component.d.ts +3 -1
- package/lib/display/table/table-pagination.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -2610,10 +2610,10 @@ class TextboxComponent extends FormControlBase {
|
|
|
2610
2610
|
}
|
|
2611
2611
|
}
|
|
2612
2612
|
TextboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextboxComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2613
|
-
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\r\n <label *ngIf=\"label\">\r\n <span [innerHTML]=\"label | translate\"></span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\"> {{validationErrors |\r\n translate}}</span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n </label>\r\n\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\r\n <i class=\"ec-icon icon-required\"></i>\r\n <i class=\"ec-icon icon-invalid\"></i>\r\n <i class=\"ec-icon icon-loading\"></i>\r\n </div>\r\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto;resize:none;display:block}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}: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:1px}: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:1px}: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: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
2613
|
+
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\r\n <label *ngIf=\"label\">\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\"> {{validationErrors |\r\n translate}}</span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n </label>\r\n\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\r\n <i class=\"ec-icon icon-required\"></i>\r\n <i class=\"ec-icon icon-invalid\"></i>\r\n <i class=\"ec-icon icon-loading\"></i>\r\n </div>\r\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto;resize:none;display:block}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}: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:1px}: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:1px}: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: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
2614
2614
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextboxComponent, decorators: [{
|
|
2615
2615
|
type: Component,
|
|
2616
|
-
args: [{ selector: 'ec-textbox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'is-readonly': readonly}\">\r\n\r\n <label *ngIf=\"label\">\r\n <span [innerHTML]=\"label | translate\"></span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\"> {{validationErrors |\r\n translate}}</span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n </label>\r\n\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\r\n <i class=\"ec-icon icon-required\"></i>\r\n <i class=\"ec-icon icon-invalid\"></i>\r\n <i class=\"ec-icon icon-loading\"></i>\r\n </div>\r\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto;resize:none;display:block}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}: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:1px}: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:1px}: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"] }]
|
|
2616
|
+
args: [{ selector: 'ec-textbox', template: "<div class=\"control control-label-{{labelPosition}}\"\r\n [ngClass]=\"{'is-readonly': readonly}\">\r\n\r\n <label *ngIf=\"label\">\r\n <span>{{label | translate}}</span>\r\n <span *ngIf=\"validationErrors.length > 0 && formModel.touched && formModel.invalid\"> {{validationErrors |\r\n translate}}</span>\r\n <ec-help-popover id=\"{{id}}_helpPopover\"\r\n *ngIf=\"helpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{helpPopover | translate}}\"\r\n contentPosition=\"{{helpPopoverPosition}}\">\r\n </ec-help-popover>\r\n </label>\r\n\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\r\n <i class=\"ec-icon icon-required\"></i>\r\n <i class=\"ec-icon icon-invalid\"></i>\r\n <i class=\"ec-icon icon-loading\"></i>\r\n </div>\r\n</div>", styles: [":host{color:var(--ec-form-control-color);font-size:var(--ec-form-control-font-size);display:block;margin-bottom:1rem;width:100%}:host :host-context(.form-condensed){margin-bottom:.5rem}:host .control{width:100%;display:flex;flex-direction:column}:host .control.control-label-bottom{flex-direction:column-reverse}:host .control.control-label-left{flex-direction:row}:host .control.control-label-left label{margin-right:.25rem}:host .control.control-label-right{flex-direction:row-reverse}:host .control.control-label-right label{margin-left:.25rem}:host .control.control-label-left,:host .control.control-label-right{align-items:center}:host .control.control-label-left label,:host .control.control-label-right label{flex:1 1;margin-top:0;margin-bottom:0}:host .control.control-label-left .control-input,:host .control.control-label-right .control-input{flex:2 2}:host .control.is-readonly input,:host .control.is-readonly select,:host .control.is-readonly textarea{border-color:var(--ec-form-control-border-color-readonly);background-color:var(--ec-form-control-background-color-readonly);background-clip:border-box;background-image:none;color:var(--ec-form-control-color-readonly);opacity:1;-webkit-user-select:none;user-select:none;pointer-events:none;overflow:hidden;white-space:nowrap}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid:focus,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid:focus{border-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-invalid,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-invalid~.icon-required,:host .control.invalid .textbox-group-input ::ng-deep .control input.ng-valid~.icon-required{display:none}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button{background-color:var(--ec-form-control-background-color-invalid)}:host .control.invalid:not(.open) .textbox-group-btn-right ::ng-deep button:not(:focus){border-color:var(--ec-form-control-border-color-invalid)}:host .textbox-group{display:flex;position:relative}:host textarea:focus,:host input:focus,:host select:focus{outline:none}:host label{color:var(--ec-form-control-label-color, var(--ec-color-secondary-dark));display:block;font-size:var(--ec-font-size-label);line-height:1;margin:calc(var(--ec-font-size-label) / 2) 0}:host input{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:2rem}:host input::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host input::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host input:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host input~.icon-required,:host input~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host input:required.is-empty{background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host input.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host input.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.ng-invalid.ng-touched~.icon-required{display:none}:host input.is-pending.ng-valid,:host input.is-pending.ng-invalid,:host input.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem center;background-size:1rem,1rem;padding-left:1.75rem}:host input.is-pending.ng-valid~.icon-loading,:host input.is-pending.ng-invalid~.icon-loading,:host input.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host input.is-pending.ng-valid~.icon-required,:host input.is-pending.ng-valid~.icon-invalid,:host input.is-pending.ng-invalid~.icon-required,:host input.is-pending.ng-invalid~.icon-invalid,:host input.is-pending.ng-pending~.icon-required,:host input.is-pending.ng-pending~.icon-invalid{display:none}:host input:focus,:host input:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host input:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host input:disabled:required,:host input:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host input:disabled:required+.icon-required,:host input:disabled:required.is-empty+.icon-required{display:none}:host input.is-uppercase:not(.is-empty){text-transform:uppercase}:host textarea{background-color:var(--ec-form-control-background-color);border:1px solid var(--ec-form-control-border-color);border-radius:var(--ec-border-radius);background-image:none;background-clip:padding-box;width:100%;line-height:1.25rem;padding:.3125rem .5rem;height:auto;resize:none;display:block}:host textarea::selection{background-color:var(--ec-form-control-background-color-selection);color:var(--ec-form-control-color-selection)}:host textarea::-webkit-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea::-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea:-ms-input-placeholder{color:var(--ec-form-control-color-placeholder)}:host textarea:-moz-placeholder{color:var(--ec-form-control-color-placeholder);opacity:1}:host textarea~.icon-required,:host textarea~.icon-invalid{color:var(--ec-form-control-border-color-invalid)}:host textarea:required.is-empty{background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea:required.is-empty~.icon-required{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched{background-color:var(--ec-form-control-background-color-invalid);border-color:var(--ec-form-control-border-color-invalid);background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem;background-image:none}:host textarea.ng-invalid.ng-touched:focus{border-color:var(--ec-form-control-background-color-invalid)}:host textarea.ng-invalid.ng-touched~.icon-invalid{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.ng-invalid.ng-touched~.icon-required{display:none}:host textarea.is-pending.ng-valid,:host textarea.is-pending.ng-invalid,:host textarea.is-pending.ng-pending{background-image:\"\";background-repeat:no-repeat;background-position:.5rem .5rem;background-size:1rem,1rem;padding-left:1.75rem}:host textarea.is-pending.ng-valid~.icon-loading,:host textarea.is-pending.ng-invalid~.icon-loading,:host textarea.is-pending.ng-pending~.icon-loading{display:inline-flex;position:absolute;left:.5rem;top:.5rem;z-index:1}:host textarea.is-pending.ng-valid~.icon-required,:host textarea.is-pending.ng-valid~.icon-invalid,:host textarea.is-pending.ng-invalid~.icon-required,:host textarea.is-pending.ng-invalid~.icon-invalid,:host textarea.is-pending.ng-pending~.icon-required,:host textarea.is-pending.ng-pending~.icon-invalid{display:none}:host textarea:focus,:host textarea:focus.is-empty{border-color:var(--ec-form-control-border-color-focus);box-shadow:var(--ec-form-control-box-shadow-focus);position:relative;z-index:1}:host textarea:disabled{background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled);color:var(--ec-form-control-color-disabled);opacity:var(--ec-form-control-opacity-disabled)}:host textarea:disabled:required,:host textarea:disabled:required.is-empty{background-image:none;padding-left:.5rem;background-color:var(--ec-form-control-background-color-disabled);border-color:var(--ec-form-control-border-color-disabled)}:host textarea:disabled:required+.icon-required,:host textarea:disabled:required.is-empty+.icon-required{display:none}:host textarea.is-uppercase:not(.is-empty){text-transform:uppercase}.input-wrapper{position:relative}.input-wrapper>.ec-icon{display:none}: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:1px}: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:1px}: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"] }]
|
|
2617
2617
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }, { type: i3.TranslateService }]; }, propDecorators: { autocomplete: [{
|
|
2618
2618
|
type: Input
|
|
2619
2619
|
}], type: [{
|
|
@@ -5233,15 +5233,11 @@ class ConfirmComponent {
|
|
|
5233
5233
|
/** Form Group to hold any form controls needed */
|
|
5234
5234
|
this.formGroup = new UntypedFormGroup({});
|
|
5235
5235
|
this.status = new Overlay('hasData');
|
|
5236
|
-
this.showTextBox = true;
|
|
5237
|
-
this.destroyed = new Subject();
|
|
5238
5236
|
this.onDialogSave = new EventEmitter();
|
|
5239
5237
|
this.onDialogCancel = new EventEmitter();
|
|
5240
5238
|
}
|
|
5241
5239
|
ngOnInit() {
|
|
5242
5240
|
this.addFormControls();
|
|
5243
|
-
this.setValidations();
|
|
5244
|
-
this.listenCheckBox();
|
|
5245
5241
|
}
|
|
5246
5242
|
onSave(source) {
|
|
5247
5243
|
this.formGroup.markAllAsTouched();
|
|
@@ -5250,9 +5246,6 @@ class ConfirmComponent {
|
|
|
5250
5246
|
if (formValues.textbox) {
|
|
5251
5247
|
this.context.textboxValue = formValues.textbox;
|
|
5252
5248
|
}
|
|
5253
|
-
if (this.context.checkConfirm) {
|
|
5254
|
-
this.context.checkboxValue = formValues.checkbox ? formValues.checkbox : false;
|
|
5255
|
-
}
|
|
5256
5249
|
this.context.saveSource = source;
|
|
5257
5250
|
if (this.context.inlineConfirmAction) {
|
|
5258
5251
|
this.doInlineConfirmAction();
|
|
@@ -5268,26 +5261,6 @@ class ConfirmComponent {
|
|
|
5268
5261
|
onCancel() {
|
|
5269
5262
|
this.onDialogCancel.emit();
|
|
5270
5263
|
}
|
|
5271
|
-
ngOnDestroy() {
|
|
5272
|
-
this.destroyed.next();
|
|
5273
|
-
this.destroyed.complete();
|
|
5274
|
-
}
|
|
5275
|
-
listenCheckBox() {
|
|
5276
|
-
var _a;
|
|
5277
|
-
(_a = this.formGroup.get('checkbox')) === null || _a === void 0 ? void 0 : _a.valueChanges.pipe(takeUntil(this.destroyed)).subscribe(value => {
|
|
5278
|
-
this.showTextBox = value;
|
|
5279
|
-
this.setValidations();
|
|
5280
|
-
});
|
|
5281
|
-
}
|
|
5282
|
-
setValidations() {
|
|
5283
|
-
var _a, _b;
|
|
5284
|
-
if (this.showTextBox) {
|
|
5285
|
-
(_a = this.formGroup.controls['textbox']) === null || _a === void 0 ? void 0 : _a.enable();
|
|
5286
|
-
}
|
|
5287
|
-
else {
|
|
5288
|
-
(_b = this.formGroup.controls['textbox']) === null || _b === void 0 ? void 0 : _b.disable();
|
|
5289
|
-
}
|
|
5290
|
-
}
|
|
5291
5264
|
/**
|
|
5292
5265
|
* Adds the textbox form control to our form group if its configured to be visible
|
|
5293
5266
|
* Will also add the required validator if requested
|
|
@@ -5303,11 +5276,6 @@ class ConfirmComponent {
|
|
|
5303
5276
|
}
|
|
5304
5277
|
this.formGroup.addControl('textbox', new UntypedFormControl('', validators));
|
|
5305
5278
|
}
|
|
5306
|
-
if (this.context.checkConfirm) {
|
|
5307
|
-
this.showTextBox = false;
|
|
5308
|
-
const checkboxControl = new UntypedFormControl('');
|
|
5309
|
-
this.formGroup.addControl('checkbox', checkboxControl);
|
|
5310
|
-
}
|
|
5311
5279
|
}
|
|
5312
5280
|
doInlineConfirmAction() {
|
|
5313
5281
|
return __awaiter(this, void 0, void 0, function* () {
|
|
@@ -5324,10 +5292,10 @@ class ConfirmComponent {
|
|
|
5324
5292
|
}
|
|
5325
5293
|
}
|
|
5326
5294
|
ConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ConfirmComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5327
|
-
ConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ConfirmComponent, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\r\n [status]=\"status?.status\"\r\n [message]=\"status?.message\"\r\n [action]=\"status?.action\"\r\n [noDataTemplate]=\"inlineConfirmResult\"\r\n overlayClassList=\"p-0\"\r\n class=\"bg-body flex-grow d-flex\">\r\n <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n <section class=\"flex-grow\">\r\n <h2 class=\"font-weight-bold mb-3\" *ngIf=\"context?.title\">{{context?.title}}</h2>\r\n <ec-banner *ngIf=\"error\" [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n <div *ngIf=\"context?.message\" [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n
|
|
5295
|
+
ConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ConfirmComponent, selector: "ec-confirm", inputs: { context: "context" }, outputs: { onDialogSave: "onDialogSave", onDialogCancel: "onDialogCancel" }, ngImport: i0, template: "<section ecOverlay\r\n [status]=\"status?.status\"\r\n [message]=\"status?.message\"\r\n [action]=\"status?.action\"\r\n [noDataTemplate]=\"inlineConfirmResult\"\r\n overlayClassList=\"p-0\"\r\n class=\"bg-body flex-grow d-flex\">\r\n <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n <section class=\"flex-grow\">\r\n <h2 class=\"font-weight-bold mb-3\" *ngIf=\"context?.title\">{{context?.title}}</h2>\r\n <ec-banner *ngIf=\"error\" [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n <div *ngIf=\"context?.message\" [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n <ec-textbox id=\"confirmTextbox\"\r\n *ngIf=\"context?.textboxType\"\r\n [autofocus]=\"true\"\r\n [formModel]=\"formGroup.get('textbox')\"\r\n [required]=\"context?.textboxRequired\"\r\n [label]=\"context?.textboxLabel\"\r\n [type]=\"context?.textboxType\"\r\n [rows]=\"context?.textareaRows\"\r\n [placeholder]=\"context?.textboxPlaceholder\"\r\n [upperCase]=\"context?.textboxUppercase\">\r\n </ec-textbox>\r\n </section>\r\n <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\r\n <ec-button id=\"saveConfirmButton\"\r\n class=\"ml-2\"\r\n [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\r\n [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\r\n [autofocus]=\"!context?.textboxType\"\r\n [isSubmit]=\"context?.saveOnEnter\"\r\n (clicked)=\"onSave('primary')\">\r\n </ec-button>\r\n <ec-button id=\"alternateSaveConfirmButton\"\r\n *ngIf=\"context?.alternateSaveLabel\"\r\n class=\"ml-2\"\r\n [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\r\n [label]=\"context?.alternateSaveLabel\"\r\n (clicked)=\"onSave('alternate')\">\r\n </ec-button>\r\n <ec-button *ngIf=\"!context?.hideCancel\"\r\n id=\"cancelConfirmButton\"\r\n class=\"ml-auto\"\r\n type=\"secondary\"\r\n [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\r\n (clicked)=\"onCancel()\">\r\n </ec-button>\r\n </footer>\r\n </form>\r\n</section>\r\n\r\n<ng-template #inlineConfirmResult>\r\n <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\r\n <div class=\"d-flex\">\r\n <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\r\n <div [innerHTML]=\"status?.message | translate\"></div>\r\n </div>\r\n <div class=\"d-flex pt-2 mt-auto\">\r\n <ec-button id=\"inlineConfirmClose\"\r\n label=\"Close\"\r\n type=\"secondary\"\r\n class=\"ml-auto\"\r\n (clicked)=\"status?.action?.onClick!()\"\r\n [autofocus]=\"true\">\r\n </ec-button>\r\n </div>\r\n </section>\r\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "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: BannerComponent, selector: "ec-banner", inputs: ["hidden", "id", "type", "bannerStyle", "title", "text", "list", "showCloseBtn", "autoHideOnClose", "customIcon", "rememberClosed"], outputs: ["closed"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
5328
5296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ConfirmComponent, decorators: [{
|
|
5329
5297
|
type: Component,
|
|
5330
|
-
args: [{ selector: 'ec-confirm', template: "<section ecOverlay\r\n [status]=\"status?.status\"\r\n [message]=\"status?.message\"\r\n [action]=\"status?.action\"\r\n [noDataTemplate]=\"inlineConfirmResult\"\r\n overlayClassList=\"p-0\"\r\n class=\"bg-body flex-grow d-flex\">\r\n <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n <section class=\"flex-grow\">\r\n <h2 class=\"font-weight-bold mb-3\" *ngIf=\"context?.title\">{{context?.title}}</h2>\r\n <ec-banner *ngIf=\"error\" [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n <div *ngIf=\"context?.message\" [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n
|
|
5298
|
+
args: [{ selector: 'ec-confirm', template: "<section ecOverlay\r\n [status]=\"status?.status\"\r\n [message]=\"status?.message\"\r\n [action]=\"status?.action\"\r\n [noDataTemplate]=\"inlineConfirmResult\"\r\n overlayClassList=\"p-0\"\r\n class=\"bg-body flex-grow d-flex\">\r\n <form [formGroup]=\"formGroup\" class=\"flex-grow flex-column confirm-content text-body-1\">\r\n <section class=\"flex-grow\">\r\n <h2 class=\"font-weight-bold mb-3\" *ngIf=\"context?.title\">{{context?.title}}</h2>\r\n <ec-banner *ngIf=\"error\" [text]=\"error | translate\" bannerStyle=\"normal\" class=\"mb-3\"></ec-banner>\r\n <div *ngIf=\"context?.message\" [innerHtml]=\"context?.message | translate\" class=\"mb-3\"></div>\r\n <ec-textbox id=\"confirmTextbox\"\r\n *ngIf=\"context?.textboxType\"\r\n [autofocus]=\"true\"\r\n [formModel]=\"formGroup.get('textbox')\"\r\n [required]=\"context?.textboxRequired\"\r\n [label]=\"context?.textboxLabel\"\r\n [type]=\"context?.textboxType\"\r\n [rows]=\"context?.textareaRows\"\r\n [placeholder]=\"context?.textboxPlaceholder\"\r\n [upperCase]=\"context?.textboxUppercase\">\r\n </ec-textbox>\r\n </section>\r\n <footer class=\"mt-auto flex-shrink d-flex py-2 flex-row-reverse\">\r\n <ec-button id=\"saveConfirmButton\"\r\n class=\"ml-2\"\r\n [type]=\"context?.saveButtonType ? context?.saveButtonType : 'primary'\"\r\n [label]=\"context?.saveLabel ? context?.saveLabel : 'Save'\"\r\n [autofocus]=\"!context?.textboxType\"\r\n [isSubmit]=\"context?.saveOnEnter\"\r\n (clicked)=\"onSave('primary')\">\r\n </ec-button>\r\n <ec-button id=\"alternateSaveConfirmButton\"\r\n *ngIf=\"context?.alternateSaveLabel\"\r\n class=\"ml-2\"\r\n [type]=\"context?.alternateSaveButtonType ? context?.alternateSaveButtonType : 'primary'\"\r\n [label]=\"context?.alternateSaveLabel\"\r\n (clicked)=\"onSave('alternate')\">\r\n </ec-button>\r\n <ec-button *ngIf=\"!context?.hideCancel\"\r\n id=\"cancelConfirmButton\"\r\n class=\"ml-auto\"\r\n type=\"secondary\"\r\n [label]=\"context?.cancelLabel ? context?.cancelLabel : 'Cancel'\"\r\n (clicked)=\"onCancel()\">\r\n </ec-button>\r\n </footer>\r\n </form>\r\n</section>\r\n\r\n<ng-template #inlineConfirmResult>\r\n <section class=\"flex-grow align-self-stretch confirm-content text-body-1\">\r\n <div class=\"d-flex\">\r\n <i class=\"ec-icon {{status?.action?.icon}} {{status?.action?.classlist}} inline-confirm-result-icon\"></i>\r\n <div [innerHTML]=\"status?.message | translate\"></div>\r\n </div>\r\n <div class=\"d-flex pt-2 mt-auto\">\r\n <ec-button id=\"inlineConfirmClose\"\r\n label=\"Close\"\r\n type=\"secondary\"\r\n class=\"ml-auto\"\r\n (clicked)=\"status?.action?.onClick!()\"\r\n [autofocus]=\"true\">\r\n </ec-button>\r\n </div>\r\n </section>\r\n</ng-template>", styles: [":host{width:100%;display:flex}.confirm-content{padding:1.5rem;display:flex;flex-direction:column}.inline-confirm-result-icon{margin:.0625rem .25rem .0625rem 0}\n"] }]
|
|
5331
5299
|
}], ctorParameters: function () { return []; }, propDecorators: { context: [{
|
|
5332
5300
|
type: Input
|
|
5333
5301
|
}], onDialogSave: [{
|
|
@@ -6646,6 +6614,8 @@ class TablePaginationComponent {
|
|
|
6646
6614
|
* Maximum number of page tabs to show
|
|
6647
6615
|
*/
|
|
6648
6616
|
this.maxTabs = 10;
|
|
6617
|
+
/** When true the tabs and the more pages dropdown will be disabled */
|
|
6618
|
+
this.disablePaginationControls = false;
|
|
6649
6619
|
/**
|
|
6650
6620
|
* Emits when the page changes.
|
|
6651
6621
|
*
|
|
@@ -6713,6 +6683,7 @@ class TablePaginationComponent {
|
|
|
6713
6683
|
for (let i = menuItem.value.firstPage; i <= menuItem.value.lastPage; i++) {
|
|
6714
6684
|
tabItems.push({
|
|
6715
6685
|
label: `${i}`,
|
|
6686
|
+
disabled: this.disablePaginationControls,
|
|
6716
6687
|
onClick: () => { this.onPageChange(i); }
|
|
6717
6688
|
});
|
|
6718
6689
|
}
|
|
@@ -6758,12 +6729,12 @@ class TablePaginationComponent {
|
|
|
6758
6729
|
}
|
|
6759
6730
|
}
|
|
6760
6731
|
TablePaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TablePaginationComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6761
|
-
TablePaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TablePaginationComponent, selector: "ec-table-pagination", inputs: { id: "id", totalItems: "totalItems", pageSize: "pageSize", pageNumber: "pageNumber", maxTabs: "maxTabs" }, outputs: { pageChanged: "pageChanged" }, host: { classAttribute: "d-flex px-2 align-items-center" }, usesOnChanges: true, ngImport: i0, template: "<ec-tabs id=\"{{id}}_pages\"\r\n class=\"my-2 is-condensed\"\r\n [tabGroup]=\"currentTabs\"\r\n tabStyle=\"pills\">\r\n</ec-tabs>\r\n<ec-dropdown id=\"{{id}}_morePages\"\r\n *ngIf=\"dropdownItems.length > 1\"\r\n class=\"my-1 ml-1\"\r\n menuTemplateType=\"label\"\r\n icon=\"icon-more\"\r\n menuPosition=\"left\"\r\n [menuMinWidth]=\"80\"\r\n [showArrow]=\"false\"\r\n [popupFixed]=\"true\"\r\n [items]=\"dropdownItems\"\r\n (itemSelected)=\"onItemSelected($event)\">\r\n</ec-dropdown>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabsComponent, selector: "ec-tabs", inputs: ["id", "tabindex", "tabStyle", "tabGroup"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }] });
|
|
6732
|
+
TablePaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TablePaginationComponent, selector: "ec-table-pagination", inputs: { id: "id", totalItems: "totalItems", pageSize: "pageSize", pageNumber: "pageNumber", maxTabs: "maxTabs", disablePaginationControls: "disablePaginationControls" }, outputs: { pageChanged: "pageChanged" }, host: { classAttribute: "d-flex px-2 align-items-center" }, usesOnChanges: true, ngImport: i0, template: "<ec-tabs id=\"{{id}}_pages\"\r\n class=\"my-2 is-condensed\"\r\n [tabGroup]=\"currentTabs\"\r\n tabStyle=\"pills\">\r\n</ec-tabs>\r\n<ec-dropdown id=\"{{id}}_morePages\"\r\n *ngIf=\"dropdownItems.length > 1\"\r\n class=\"my-1 ml-1\"\r\n menuTemplateType=\"label\"\r\n icon=\"icon-more\"\r\n menuPosition=\"left\"\r\n [menuMinWidth]=\"80\"\r\n [showArrow]=\"false\"\r\n [popupFixed]=\"true\"\r\n [items]=\"dropdownItems\"\r\n [disabled]=\"disablePaginationControls\"\r\n (itemSelected)=\"onItemSelected($event)\">\r\n</ec-dropdown>", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TabsComponent, selector: "ec-tabs", inputs: ["id", "tabindex", "tabStyle", "tabGroup"] }, { kind: "component", type: DropdownComponent, selector: "ec-dropdown", inputs: ["id", "autofocus", "status", "disabled", "label", "icon", "buttonType", "buttonAlignment", "buttonTitle", "tabindex", "showArrow", "items", "menuTemplateType", "menuTitle", "menuHeight", "menuWidth", "menuMinWidth", "menuPosition", "menuFooter", "popupFixed", "buttonCustomTemplate", "pending"], outputs: ["itemSelected", "popupOpened"] }] });
|
|
6762
6733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TablePaginationComponent, decorators: [{
|
|
6763
6734
|
type: Component,
|
|
6764
6735
|
args: [{ selector: 'ec-table-pagination', host: {
|
|
6765
6736
|
class: 'd-flex px-2 align-items-center'
|
|
6766
|
-
}, template: "<ec-tabs id=\"{{id}}_pages\"\r\n class=\"my-2 is-condensed\"\r\n [tabGroup]=\"currentTabs\"\r\n tabStyle=\"pills\">\r\n</ec-tabs>\r\n<ec-dropdown id=\"{{id}}_morePages\"\r\n *ngIf=\"dropdownItems.length > 1\"\r\n class=\"my-1 ml-1\"\r\n menuTemplateType=\"label\"\r\n icon=\"icon-more\"\r\n menuPosition=\"left\"\r\n [menuMinWidth]=\"80\"\r\n [showArrow]=\"false\"\r\n [popupFixed]=\"true\"\r\n [items]=\"dropdownItems\"\r\n (itemSelected)=\"onItemSelected($event)\">\r\n</ec-dropdown>" }]
|
|
6737
|
+
}, template: "<ec-tabs id=\"{{id}}_pages\"\r\n class=\"my-2 is-condensed\"\r\n [tabGroup]=\"currentTabs\"\r\n tabStyle=\"pills\">\r\n</ec-tabs>\r\n<ec-dropdown id=\"{{id}}_morePages\"\r\n *ngIf=\"dropdownItems.length > 1\"\r\n class=\"my-1 ml-1\"\r\n menuTemplateType=\"label\"\r\n icon=\"icon-more\"\r\n menuPosition=\"left\"\r\n [menuMinWidth]=\"80\"\r\n [showArrow]=\"false\"\r\n [popupFixed]=\"true\"\r\n [items]=\"dropdownItems\"\r\n [disabled]=\"disablePaginationControls\"\r\n (itemSelected)=\"onItemSelected($event)\">\r\n</ec-dropdown>" }]
|
|
6767
6738
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
|
|
6768
6739
|
type: Input
|
|
6769
6740
|
}], totalItems: [{
|
|
@@ -6774,6 +6745,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
6774
6745
|
type: Input
|
|
6775
6746
|
}], maxTabs: [{
|
|
6776
6747
|
type: Input
|
|
6748
|
+
}], disablePaginationControls: [{
|
|
6749
|
+
type: Input
|
|
6777
6750
|
}], pageChanged: [{
|
|
6778
6751
|
type: Output
|
|
6779
6752
|
}] } });
|
|
@@ -7398,6 +7371,8 @@ class SearchableTableComponent {
|
|
|
7398
7371
|
this.overlayClasses = '';
|
|
7399
7372
|
/** When true the overlay and table will not have flex-shrink-max but instead flex-grow */
|
|
7400
7373
|
this.fillParentHeight = false;
|
|
7374
|
+
/** Passed to the pagination control component. Used to disable the pagination controls */
|
|
7375
|
+
this.disablePaginationControls = false;
|
|
7401
7376
|
/**
|
|
7402
7377
|
* Text displayed in the footer.
|
|
7403
7378
|
* Sometimes `noDataMessage`, sometimes `noSearchResultsMessage`
|
|
@@ -7542,10 +7517,10 @@ class SearchableTableComponent {
|
|
|
7542
7517
|
}
|
|
7543
7518
|
}
|
|
7544
7519
|
SearchableTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SearchableTableComponent, deps: [{ token: ErrorService }, { token: i3.TranslateService }, { token: RowCountPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
7545
|
-
SearchableTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SearchableTableComponent, selector: "ec-searchable-table", inputs: { id: "id", resizable: "resizable", sortable: "sortable", sort: "sort", autofocus: "autofocus", tableClasses: "tableClasses", searchboxPlaceholder: "searchboxPlaceholder", formModel: "formModel", noDataMessage: "noDataMessage", noSearchResultsMessage: "noSearchResultsMessage", ready: "ready", getItems: "getItems", refresh: "refresh", status: "status", tableLayoutFixed: "tableLayoutFixed", searchboxTabIndex: "searchboxTabIndex", maxItemCount: "maxItemCount", hideSearchControl: "hideSearchControl", hideHeader: "hideHeader", objectType: "objectType", hideFooter: "hideFooter", pageable: "pageable", pageSize: "pageSize", maxTabs: "maxTabs", searchboxReadonly: "searchboxReadonly", selectionContext: "selectionContext", selectionToolbarTemplate: "selectionToolbarTemplate", additionalCountText: "additionalCountText", selectable: "selectable", customContentTemplate: "customContentTemplate", removeCard: "removeCard", overlayClasses: "overlayClasses", fillParentHeight: "fillParentHeight" }, outputs: { sortChange: "sortChange", pageChangeEmitter: "pageChange", itemsChange: "itemsChange" }, queries: [{ propertyName: "resizableColumns", predicate: ResizableColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<header *ngIf=\"!hideHeader\"\r\n class=\"d-flex flex-shrink align-items-center mb-3\">\r\n <ec-textbox id=\"{{id}}_searchbox\"\r\n *ngIf=\"!hideSearchControl\"\r\n class=\"mb-0 flex-grow mr-2\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"searchModel\"\r\n [tabindex]=\"searchboxTabIndex\"\r\n [placeholder]=\"searchboxPlaceholder\"\r\n [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n <div class=\"flex-grow\">\r\n <ng-content select=\".searchable-table-controls\"></ng-content>\r\n </div>\r\n</header>\r\n<section id=\"{{id}}_card\"\r\n class=\"d-flex flex-column {{overlayClasses}}\"\r\n [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\r\n ecOverlay\r\n [status]=\"status.status\"\r\n [message]=\"status.message\"\r\n [displayAsMask]=\"true\">\r\n <ng-content select=\".card-header\"></ng-content>\r\n <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\r\n </ng-container>\r\n\r\n <!-- the default template is an ec-table with proxied-over searchable table inputs. \r\n If that doesn't work for you then you can specify a customContentTemplate to use instead\r\n and still retain all the event handling, header, footer pagination, etc support -->\r\n <ng-template #defaultContentTemplate>\r\n <ec-table id=\"{{id}}_table\"\r\n class=\"{{tableClasses}}\"\r\n [class.is-fixed]=\"tableLayoutFixed\"\r\n [sortable]=\"sortable\"\r\n [sort]=\"sort\"\r\n (sortChange)=\"onSortChange($event)\"\r\n [resizable]=\"resizable\"\r\n [scrollable]=\"true\"\r\n [selectable]=\"selectable\"\r\n [selectionContext]=\"selectionContext\"\r\n [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n [resizableColumns]=\"resizableColumns\">\r\n <ng-content></ng-content>\r\n </ec-table>\r\n </ng-template>\r\n\r\n <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n <footer *ngIf=\"!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!\"\r\n class=\"pagination-footer\"\r\n [class.border-top]=\"!customContentTemplate\">\r\n <ec-table-pagination id=\"{{id}}_pager\"\r\n class=\"font-color-primary\"\r\n [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n [pageSize]=\"pageSize\"\r\n [maxTabs]=\"maxTabs\"\r\n [pageNumber]=\"pageInfo?.pageNumber\"\r\n (pageChanged)=\"onPageChange($event)\">\r\n </ec-table-pagination>\r\n <div id=\"resultsCount\"\r\n *ngIf=\"searchResults?.items?.length\"\r\n class=\"ml-auto font-color-hint text-truncate\" \r\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n </footer>\r\n\r\n <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n <footer *ngIf=\"(!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption\"\r\n class=\"caption-footer\"\r\n [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\r\n <ng-content *ngIf=\"!tableCaption\"\r\n select=\".searchable-table-footer\"></ng-content>\r\n <div id=\"tableCaption\"\r\n *ngIf=\"tableCaption\"\r\n [innerHTML]=\"tableCaption\"></div>\r\n <div id=\"resultsCount\"\r\n *ngIf=\"searchResults?.items?.length\"\r\n class=\"ml-auto text-truncate\"\r\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n </footer>\r\n</section>", styles: [":host{--ec-searchable-table-flex-properties: 0 1 auto;--ec-searchable-table-flex-overlay-section: var(--ec-searchable-table-flex-properties, 0 1 auto);--ec-searchable-table-flex-ec-table: var(--ec-searchable-table-flex-properties, 0 1 auto);display:flex;flex-direction:column;flex:1 1;min-height:0}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}section{flex:var(--ec-searchable-table-flex-overlay-section);min-height:0}ec-table{flex:var(--ec-searchable-table-flex-ec-table);min-height:0}footer{display:flex;align-items:center;flex:none;font-size:var(--ec-font-size-label);line-height:1rem}footer.has-results{color:var(--ec-color-hint-dark);text-align:right}.pagination-footer{padding:0 .5rem 0 0}.caption-footer{padding:.5rem;height:var(--ec-searchable-table-height-caption-footer)}.card.has-mask{min-height:15rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: TableComponent, selector: "ec-table", inputs: ["id", "scrollable", "resizable", "condensed", "sortable", "selectionContext", "selectionToolbarTemplate", "selectable", "isForm", "sort", "resizableColumns"], outputs: ["sortChange"] }, { kind: "component", type: TablePaginationComponent, selector: "ec-table-pagination", inputs: ["id", "totalItems", "pageSize", "pageNumber", "maxTabs"], outputs: ["pageChanged"] }] });
|
|
7520
|
+
SearchableTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SearchableTableComponent, selector: "ec-searchable-table", inputs: { id: "id", resizable: "resizable", sortable: "sortable", sort: "sort", autofocus: "autofocus", tableClasses: "tableClasses", searchboxPlaceholder: "searchboxPlaceholder", formModel: "formModel", noDataMessage: "noDataMessage", noSearchResultsMessage: "noSearchResultsMessage", ready: "ready", getItems: "getItems", refresh: "refresh", status: "status", tableLayoutFixed: "tableLayoutFixed", searchboxTabIndex: "searchboxTabIndex", maxItemCount: "maxItemCount", hideSearchControl: "hideSearchControl", hideHeader: "hideHeader", objectType: "objectType", hideFooter: "hideFooter", pageable: "pageable", pageSize: "pageSize", maxTabs: "maxTabs", searchboxReadonly: "searchboxReadonly", selectionContext: "selectionContext", selectionToolbarTemplate: "selectionToolbarTemplate", additionalCountText: "additionalCountText", selectable: "selectable", customContentTemplate: "customContentTemplate", removeCard: "removeCard", overlayClasses: "overlayClasses", fillParentHeight: "fillParentHeight", disablePaginationControls: "disablePaginationControls" }, outputs: { sortChange: "sortChange", pageChangeEmitter: "pageChange", itemsChange: "itemsChange" }, queries: [{ propertyName: "resizableColumns", predicate: ResizableColumnComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<header *ngIf=\"!hideHeader\"\r\n class=\"d-flex flex-shrink align-items-center mb-3\">\r\n <ec-textbox id=\"{{id}}_searchbox\"\r\n *ngIf=\"!hideSearchControl\"\r\n class=\"mb-0 flex-grow mr-2\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"searchModel\"\r\n [tabindex]=\"searchboxTabIndex\"\r\n [placeholder]=\"searchboxPlaceholder\"\r\n [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n <div class=\"flex-grow\">\r\n <ng-content select=\".searchable-table-controls\"></ng-content>\r\n </div>\r\n</header>\r\n<section id=\"{{id}}_card\"\r\n class=\"d-flex flex-column {{overlayClasses}}\"\r\n [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\r\n ecOverlay\r\n [status]=\"status.status\"\r\n [message]=\"status.message\"\r\n [displayAsMask]=\"true\">\r\n <ng-content select=\".card-header\"></ng-content>\r\n <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\r\n </ng-container>\r\n\r\n <!-- the default template is an ec-table with proxied-over searchable table inputs. \r\n If that doesn't work for you then you can specify a customContentTemplate to use instead\r\n and still retain all the event handling, header, footer pagination, etc support -->\r\n <ng-template #defaultContentTemplate>\r\n <ec-table id=\"{{id}}_table\"\r\n class=\"{{tableClasses}}\"\r\n [class.is-fixed]=\"tableLayoutFixed\"\r\n [sortable]=\"sortable\"\r\n [sort]=\"sort\"\r\n (sortChange)=\"onSortChange($event)\"\r\n [resizable]=\"resizable\"\r\n [scrollable]=\"true\"\r\n [selectable]=\"selectable\"\r\n [selectionContext]=\"selectionContext\"\r\n [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n [resizableColumns]=\"resizableColumns\">\r\n <ng-content></ng-content>\r\n </ec-table>\r\n </ng-template>\r\n\r\n <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n <footer *ngIf=\"!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!\"\r\n class=\"pagination-footer\"\r\n [class.border-top]=\"!customContentTemplate\">\r\n <ec-table-pagination id=\"{{id}}_pager\"\r\n class=\"font-color-primary\"\r\n [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n [pageSize]=\"pageSize\"\r\n [maxTabs]=\"maxTabs\"\r\n [pageNumber]=\"pageInfo?.pageNumber\"\r\n [disablePaginationControls]=\"disablePaginationControls\"\r\n (pageChanged)=\"onPageChange($event)\">\r\n </ec-table-pagination>\r\n <div id=\"resultsCount\"\r\n *ngIf=\"searchResults?.items?.length\"\r\n class=\"ml-auto font-color-hint text-truncate\" \r\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n </footer>\r\n\r\n <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n <footer *ngIf=\"(!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption\"\r\n class=\"caption-footer\"\r\n [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\r\n <ng-content *ngIf=\"!tableCaption\"\r\n select=\".searchable-table-footer\"></ng-content>\r\n <div id=\"tableCaption\"\r\n *ngIf=\"tableCaption\"\r\n [innerHTML]=\"tableCaption\"></div>\r\n <div id=\"resultsCount\"\r\n *ngIf=\"searchResults?.items?.length\"\r\n class=\"ml-auto text-truncate\"\r\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n </footer>\r\n</section>", styles: [":host{--ec-searchable-table-flex-properties: 0 1 auto;--ec-searchable-table-flex-overlay-section: var(--ec-searchable-table-flex-properties, 0 1 auto);--ec-searchable-table-flex-ec-table: var(--ec-searchable-table-flex-properties, 0 1 auto);display:flex;flex-direction:column;flex:1 1;min-height:0}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}section{flex:var(--ec-searchable-table-flex-overlay-section);min-height:0}ec-table{flex:var(--ec-searchable-table-flex-ec-table);min-height:0}footer{display:flex;align-items:center;flex:none;font-size:var(--ec-font-size-label);line-height:1rem}footer.has-results{color:var(--ec-color-hint-dark);text-align:right}.pagination-footer{padding:0 .5rem 0 0}.caption-footer{padding:.5rem;height:var(--ec-searchable-table-height-caption-footer)}.card.has-mask{min-height:15rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: TableComponent, selector: "ec-table", inputs: ["id", "scrollable", "resizable", "condensed", "sortable", "selectionContext", "selectionToolbarTemplate", "selectable", "isForm", "sort", "resizableColumns"], outputs: ["sortChange"] }, { kind: "component", type: TablePaginationComponent, selector: "ec-table-pagination", inputs: ["id", "totalItems", "pageSize", "pageNumber", "maxTabs", "disablePaginationControls"], outputs: ["pageChanged"] }] });
|
|
7546
7521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SearchableTableComponent, decorators: [{
|
|
7547
7522
|
type: Component,
|
|
7548
|
-
args: [{ selector: 'ec-searchable-table', template: "<header *ngIf=\"!hideHeader\"\r\n class=\"d-flex flex-shrink align-items-center mb-3\">\r\n <ec-textbox id=\"{{id}}_searchbox\"\r\n *ngIf=\"!hideSearchControl\"\r\n class=\"mb-0 flex-grow mr-2\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"searchModel\"\r\n [tabindex]=\"searchboxTabIndex\"\r\n [placeholder]=\"searchboxPlaceholder\"\r\n [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n <div class=\"flex-grow\">\r\n <ng-content select=\".searchable-table-controls\"></ng-content>\r\n </div>\r\n</header>\r\n<section id=\"{{id}}_card\"\r\n class=\"d-flex flex-column {{overlayClasses}}\"\r\n [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\r\n ecOverlay\r\n [status]=\"status.status\"\r\n [message]=\"status.message\"\r\n [displayAsMask]=\"true\">\r\n <ng-content select=\".card-header\"></ng-content>\r\n <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\r\n </ng-container>\r\n\r\n <!-- the default template is an ec-table with proxied-over searchable table inputs. \r\n If that doesn't work for you then you can specify a customContentTemplate to use instead\r\n and still retain all the event handling, header, footer pagination, etc support -->\r\n <ng-template #defaultContentTemplate>\r\n <ec-table id=\"{{id}}_table\"\r\n class=\"{{tableClasses}}\"\r\n [class.is-fixed]=\"tableLayoutFixed\"\r\n [sortable]=\"sortable\"\r\n [sort]=\"sort\"\r\n (sortChange)=\"onSortChange($event)\"\r\n [resizable]=\"resizable\"\r\n [scrollable]=\"true\"\r\n [selectable]=\"selectable\"\r\n [selectionContext]=\"selectionContext\"\r\n [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n [resizableColumns]=\"resizableColumns\">\r\n <ng-content></ng-content>\r\n </ec-table>\r\n </ng-template>\r\n\r\n <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n <footer *ngIf=\"!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!\"\r\n class=\"pagination-footer\"\r\n [class.border-top]=\"!customContentTemplate\">\r\n <ec-table-pagination id=\"{{id}}_pager\"\r\n class=\"font-color-primary\"\r\n [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n [pageSize]=\"pageSize\"\r\n [maxTabs]=\"maxTabs\"\r\n [pageNumber]=\"pageInfo?.pageNumber\"\r\n (pageChanged)=\"onPageChange($event)\">\r\n </ec-table-pagination>\r\n <div id=\"resultsCount\"\r\n *ngIf=\"searchResults?.items?.length\"\r\n class=\"ml-auto font-color-hint text-truncate\" \r\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n </footer>\r\n\r\n <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n <footer *ngIf=\"(!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption\"\r\n class=\"caption-footer\"\r\n [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\r\n <ng-content *ngIf=\"!tableCaption\"\r\n select=\".searchable-table-footer\"></ng-content>\r\n <div id=\"tableCaption\"\r\n *ngIf=\"tableCaption\"\r\n [innerHTML]=\"tableCaption\"></div>\r\n <div id=\"resultsCount\"\r\n *ngIf=\"searchResults?.items?.length\"\r\n class=\"ml-auto text-truncate\"\r\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n </footer>\r\n</section>", styles: [":host{--ec-searchable-table-flex-properties: 0 1 auto;--ec-searchable-table-flex-overlay-section: var(--ec-searchable-table-flex-properties, 0 1 auto);--ec-searchable-table-flex-ec-table: var(--ec-searchable-table-flex-properties, 0 1 auto);display:flex;flex-direction:column;flex:1 1;min-height:0}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}section{flex:var(--ec-searchable-table-flex-overlay-section);min-height:0}ec-table{flex:var(--ec-searchable-table-flex-ec-table);min-height:0}footer{display:flex;align-items:center;flex:none;font-size:var(--ec-font-size-label);line-height:1rem}footer.has-results{color:var(--ec-color-hint-dark);text-align:right}.pagination-footer{padding:0 .5rem 0 0}.caption-footer{padding:.5rem;height:var(--ec-searchable-table-height-caption-footer)}.card.has-mask{min-height:15rem}\n"] }]
|
|
7523
|
+
args: [{ selector: 'ec-searchable-table', template: "<header *ngIf=\"!hideHeader\"\r\n class=\"d-flex flex-shrink align-items-center mb-3\">\r\n <ec-textbox id=\"{{id}}_searchbox\"\r\n *ngIf=\"!hideSearchControl\"\r\n class=\"mb-0 flex-grow mr-2\"\r\n [autofocus]=\"autofocus\"\r\n [formModel]=\"searchModel\"\r\n [tabindex]=\"searchboxTabIndex\"\r\n [placeholder]=\"searchboxPlaceholder\"\r\n [readonly]=\"searchboxReadonly\"></ec-textbox>\r\n <div class=\"flex-grow\">\r\n <ng-content select=\".searchable-table-controls\"></ng-content>\r\n </div>\r\n</header>\r\n<section id=\"{{id}}_card\"\r\n class=\"d-flex flex-column {{overlayClasses}}\"\r\n [ngClass]=\"{'is-translucent': status.status !== 'error', 'has-mask': status.status !== 'hasData', 'card m-0 bg-content': !customContentTemplate && !removeCard}\"\r\n ecOverlay\r\n [status]=\"status.status\"\r\n [message]=\"status.message\"\r\n [displayAsMask]=\"true\">\r\n <ng-content select=\".card-header\"></ng-content>\r\n <ng-container *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\">\r\n </ng-container>\r\n\r\n <!-- the default template is an ec-table with proxied-over searchable table inputs. \r\n If that doesn't work for you then you can specify a customContentTemplate to use instead\r\n and still retain all the event handling, header, footer pagination, etc support -->\r\n <ng-template #defaultContentTemplate>\r\n <ec-table id=\"{{id}}_table\"\r\n class=\"{{tableClasses}}\"\r\n [class.is-fixed]=\"tableLayoutFixed\"\r\n [sortable]=\"sortable\"\r\n [sort]=\"sort\"\r\n (sortChange)=\"onSortChange($event)\"\r\n [resizable]=\"resizable\"\r\n [scrollable]=\"true\"\r\n [selectable]=\"selectable\"\r\n [selectionContext]=\"selectionContext\"\r\n [selectionToolbarTemplate]=\"selectionToolbarTemplate\"\r\n [resizableColumns]=\"resizableColumns\">\r\n <ng-content></ng-content>\r\n </ec-table>\r\n </ng-template>\r\n\r\n <!-- pagination footer visible if table is page-able and there are more than one page of results -->\r\n <footer *ngIf=\"!hideFooter && pageable && searchResults.totalItemsBeforePaging! > pageSize!\"\r\n class=\"pagination-footer\"\r\n [class.border-top]=\"!customContentTemplate\">\r\n <ec-table-pagination id=\"{{id}}_pager\"\r\n class=\"font-color-primary\"\r\n [totalItems]=\"searchResults.totalItemsBeforePaging\"\r\n [pageSize]=\"pageSize\"\r\n [maxTabs]=\"maxTabs\"\r\n [pageNumber]=\"pageInfo?.pageNumber\"\r\n [disablePaginationControls]=\"disablePaginationControls\"\r\n (pageChanged)=\"onPageChange($event)\">\r\n </ec-table-pagination>\r\n <div id=\"resultsCount\"\r\n *ngIf=\"searchResults?.items?.length\"\r\n class=\"ml-auto font-color-hint text-truncate\" \r\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n </footer>\r\n\r\n <!-- default footer: visible if hideFooter is false and table is not page-able or there are only one page of results (always shows if there is a caption to indicate no results) -->\r\n <footer *ngIf=\"(!hideFooter && (!pageable || searchResults.totalItemsBeforePaging! <= pageSize!)) || tableCaption\"\r\n class=\"caption-footer\"\r\n [ngClass]=\"{'has-results': searchResults?.items?.length, 'border-top': searchResults?.items?.length && !customContentTemplate}\">\r\n <ng-content *ngIf=\"!tableCaption\"\r\n select=\".searchable-table-footer\"></ng-content>\r\n <div id=\"tableCaption\"\r\n *ngIf=\"tableCaption\"\r\n [innerHTML]=\"tableCaption\"></div>\r\n <div id=\"resultsCount\"\r\n *ngIf=\"searchResults?.items?.length\"\r\n class=\"ml-auto text-truncate\"\r\n title=\"{{resultsCount}} {{additionalCountText}}\">{{resultsCount}} {{additionalCountText}}</div>\r\n </footer>\r\n</section>", styles: [":host{--ec-searchable-table-flex-properties: 0 1 auto;--ec-searchable-table-flex-overlay-section: var(--ec-searchable-table-flex-properties, 0 1 auto);--ec-searchable-table-flex-ec-table: var(--ec-searchable-table-flex-properties, 0 1 auto);display:flex;flex-direction:column;flex:1 1;min-height:0}:host ::ng-deep .card-header+ec-table.is-selectable th{height:2.5rem;padding-bottom:.9375rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle{padding-top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable th.is-resizable .handle:before{top:.5rem}:host ::ng-deep .card-header+ec-table.is-selectable .selectable-table-toolbar{height:2.5rem;padding-bottom:.5rem}section{flex:var(--ec-searchable-table-flex-overlay-section);min-height:0}ec-table{flex:var(--ec-searchable-table-flex-ec-table);min-height:0}footer{display:flex;align-items:center;flex:none;font-size:var(--ec-font-size-label);line-height:1rem}footer.has-results{color:var(--ec-color-hint-dark);text-align:right}.pagination-footer{padding:0 .5rem 0 0}.caption-footer{padding:.5rem;height:var(--ec-searchable-table-height-caption-footer)}.card.has-mask{min-height:15rem}\n"] }]
|
|
7549
7524
|
}], ctorParameters: function () { return [{ type: ErrorService }, { type: i3.TranslateService }, { type: RowCountPipe }]; }, propDecorators: { id: [{
|
|
7550
7525
|
type: Input
|
|
7551
7526
|
}], resizable: [{
|
|
@@ -7622,6 +7597,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
7622
7597
|
type: Input
|
|
7623
7598
|
}], fillParentHeight: [{
|
|
7624
7599
|
type: Input
|
|
7600
|
+
}], disablePaginationControls: [{
|
|
7601
|
+
type: Input
|
|
7625
7602
|
}] } });
|
|
7626
7603
|
|
|
7627
7604
|
class TableLockedColumnComponent {
|
|
@@ -9250,6 +9227,8 @@ class ItemPickerComponent {
|
|
|
9250
9227
|
this.showSelectAllItemsButton = false;
|
|
9251
9228
|
/** The total number of items returned from the api across all pages */
|
|
9252
9229
|
this.totalItemsBeforePaging = 0;
|
|
9230
|
+
/** Passed to the searchable table control. Used to disable the pagination controls */
|
|
9231
|
+
this.disablePaginationControls = false;
|
|
9253
9232
|
/** Used to shut down our subscriptions when the component is destroyed */
|
|
9254
9233
|
this.destroyed = new Subject();
|
|
9255
9234
|
}
|
|
@@ -9309,6 +9288,7 @@ class ItemPickerComponent {
|
|
|
9309
9288
|
});
|
|
9310
9289
|
this.selectedItems = Array.from(this.selectionContext.selectedItemsMap.values());
|
|
9311
9290
|
this.selectionContext.isSelectingAllItems = false;
|
|
9291
|
+
this.disablePaginationControls = false;
|
|
9312
9292
|
this.updateAvailableCheckboxText();
|
|
9313
9293
|
}
|
|
9314
9294
|
/**
|
|
@@ -9338,6 +9318,7 @@ class ItemPickerComponent {
|
|
|
9338
9318
|
this.selectionContext.isSelectingAllItems = true;
|
|
9339
9319
|
this.showSelectAllItemsButton = false;
|
|
9340
9320
|
this.updateAvailableCheckboxText();
|
|
9321
|
+
this.disablePaginationControls = true;
|
|
9341
9322
|
}
|
|
9342
9323
|
/**
|
|
9343
9324
|
* Removes all items from the selected items map. This was split from the onClearSelectionClick function to allow
|
|
@@ -9398,7 +9379,7 @@ class ItemPickerComponent {
|
|
|
9398
9379
|
}
|
|
9399
9380
|
updateAvailableCheckboxText() {
|
|
9400
9381
|
if (this.selectionContext.isSelectingAllItems) {
|
|
9401
|
-
this.availableCheckboxText = this.translateService.instant('AllItemPickerItemsSelected_SC', { count: this.totalItemsBeforePaging, itemName: this.itemName });
|
|
9382
|
+
this.availableCheckboxText = this.translateService.instant('AllItemPickerItemsSelected_SC', { count: this.totalItemsBeforePaging, itemName: this.translateService.instant(this.itemName) });
|
|
9402
9383
|
}
|
|
9403
9384
|
else {
|
|
9404
9385
|
const checkedCount = this.selectionContext.rowCheckboxes.controls.map(c => c.value).filter(v => v).length;
|
|
@@ -9449,10 +9430,10 @@ class ItemPickerComponent {
|
|
|
9449
9430
|
}
|
|
9450
9431
|
}
|
|
9451
9432
|
ItemPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ItemPickerComponent, deps: [{ token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9452
|
-
ItemPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ItemPickerComponent, selector: "ec-item-picker", inputs: { id: "id", availableTitle: "availableTitle", availableTitleHelpPopover: "availableTitleHelpPopover", selectedTitle: "selectedTitle", itemName: "itemName", formModel: "formModel", customAvailableHeaderTemplate: "customAvailableHeaderTemplate", customAvailableItemTemplate: "customAvailableItemTemplate", customSelectedItemTemplate: "customSelectedItemTemplate", ready: "ready", getItems: "getItems", selectionContext: "selectionContext", noDataMessage: "noDataMessage", noSelectedItemsMessage: "noSelectedItemsMessage", enableSelectAllItems: "enableSelectAllItems", selectAllItemsMessage: "selectAllItemsMessage" }, viewQueries: [{ propertyName: "defaultAvailableHeaderTemplate", first: true, predicate: ["defaultAvailableHeaderTemplate"], descendants: true, static: true }, { propertyName: "defaultAvailableItemTemplate", first: true, predicate: ["defaultAvailableItemTemplate"], descendants: true, static: true }, { propertyName: "defaultSelectedItemTemplate", first: true, predicate: ["defaultSelectedItemTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div ecOverlay\r\n class=\"d-flex flex-grow card\"\r\n [status]=\"tableStatus?.status\"\r\n [message]=\"tableStatus?.message\"\r\n [displayAsMask]=\"true\">\r\n <ec-searchable-table id=\"{{id}}_searchableTable\"\r\n class=\"flex-grow\"\r\n [fillParentHeight]=\"true\"\r\n [hideHeader]=\"true\"\r\n [hideSearchControl]=\"true\"\r\n [removeCard]=\"true\"\r\n [pageable]=\"true\"\r\n [pageSize]=\"50\"\r\n [objectType]=\"itemName\"\r\n [formModel]=\"formModel\"\r\n [ready]=\"ready\"\r\n [getItems]=\"getItems\"\r\n [selectable]=\"true\"\r\n [noDataMessage]=\"noDataMessage\"\r\n [selectionContext]=\"selectionContext\"\r\n [status]=\"tableStatus\"\r\n (itemsChange)=\"onItemsChange($event)\"\r\n [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\r\n [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\r\n [tableLayoutFixed]=\"true\">\r\n <header *ngIf=\"customAvailableHeaderTemplate\"\r\n class=\"card-header flex-shrink\"\r\n style=\"height: 3rem;\">\r\n <h3 class=\"card-title\">{{availableTitle | translate}}\r\n <ec-help-popover id=\"availableTitle_helpPopover\"\r\n *ngIf=\"availableTitleHelpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{availableTitleHelpPopover | translate}}\">\r\n </ec-help-popover>\r\n </h3>\r\n </header>\r\n <thead>\r\n <tr ecTableSelectableRow\r\n [selectionContext]=\"selectionContext\"\r\n class=\"border-bottom-0\">\r\n <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></ng-container>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <ng-container *ngFor=\"let item of availableItems; index as rowIndex; trackBy: trackByIndex\">\r\n <tr ecTableSelectableRow\r\n [selectionContext]=\"selectionContext\"\r\n [rowIndex]=\"rowIndex\"\r\n [isCheckboxDisabled]=\"item.preventRemove || selectionContext.isSelectingAllItems\"\r\n [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id) || selectionContext.isSelectingAllItems\"\r\n [style.--ec-table-selectable-row-vertical-align-checkbox-td]=\"'middle'\">\r\n <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </ec-searchable-table>\r\n\r\n <section id=\"{{id}}_selectedItems\"\r\n class=\"selected-items flex-grow d-flex flex-column\">\r\n <div *ngIf=\"selectionContext.isSelectingAllItems\"\r\n class=\"d-flex flex-column flex-grow\">\r\n <header class=\"d-flex align-items-center px-2 text-heading-2\"\r\n style=\"height: 3rem;\">\r\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n <button *ngIf=\"selectedItemsClearable\"\r\n ecLinkButton\r\n id=\"{{id}}_clearSelection\"\r\n class=\"pl-2 ml-auto\"\r\n (click)=\"onClearSelectionClick()\"\r\n translate>ClearSelection_TC</button>\r\n </header>\r\n <div class=\"border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\r\n [innerHtml]=\"selectAllItemsMessage | translate\"></div>\r\n </div>\r\n <ec-table *ngIf=\"!selectionContext.isSelectingAllItems\"\r\n [scrollable]=\"true\"\r\n class=\"d-flex flex-grow is-fixed\">\r\n <colgroup>\r\n <col>\r\n <col style=\"width: 2rem;\">\r\n </colgroup>\r\n <thead>\r\n <tr style=\"height: 3rem;\">\r\n <th colspan=\"2\"\r\n class=\"p-2 border-bottom-0\">\r\n <div class=\"d-flex align-items-center text-heading-2\">\r\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n <button *ngIf=\"selectedItemsClearable\"\r\n ecLinkButton\r\n id=\"{{id}}_clearSelection\"\r\n class=\"pl-2 ml-auto\"\r\n (click)=\"onClearSelectionClick()\"\r\n translate>ClearSelection_TC</button>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <ng-container *ngIf=\"selectedItems.length\">\r\n <tr *ngFor=\"let item of selectedItems; last as isLast\"\r\n id=\"selected_row_{{item.id}}\"\r\n [class.border-bottom]=\"!isLast\">\r\n <td class=\"p-2\">\r\n <ng-container\r\n *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\r\n </ng-container>\r\n </td>\r\n\r\n <td class=\"actions-col text-right\"\r\n style=\"vertical-align: middle;\">\r\n <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\r\n *ngIf=\"!item.preventRemove\"\r\n type=\"icon\"\r\n icon=\"ec-icon icon-cancel\"\r\n (clicked)=\"removeSelectedItem(item)\">\r\n </ec-button>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <tr *ngIf=\"!selectedItems.length\">\r\n <td *ngIf=\"!noSelectedItemsMessage\"\r\n colspan=\"2\"\r\n class=\"p-2 no-data-message\"\r\n translate\r\n [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\r\n <td *ngIf=\"noSelectedItemsMessage\"\r\n colspan=\"2\"\r\n class=\"p-2 no-data-message\"\r\n translate>{{noSelectedItemsMessage}}</td>\r\n </tr>\r\n </tbody>\r\n </ec-table>\r\n\r\n <footer id=\"selectedItemsFooter\"\r\n *ngIf=\"selectedItems.length && !selectionContext.isSelectingAllItems\"\r\n class=\"d-flex flex-shrink px-2 border-top align-items-center\">\r\n <div class=\"ml-auto my-2 d-flex align-items-center\"\r\n style=\"height: 1.75rem;\">\r\n <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\r\n </div>\r\n </footer>\r\n </section>\r\n</div>\r\n\r\n<ng-template #defaultAvailableHeaderTemplate>\r\n <th class=\"text-heading-2 font-color-primary border-bottom-0\">\r\n <div class=\"d-flex align-items-center \">\r\n <div *ngIf=\"!availableCheckboxText\">\r\n <span class=\"text-truncate\">{{availableTitle | translate}}</span>\r\n <ec-help-popover id=\"availableTitle_helpPopover\"\r\n *ngIf=\"availableTitleHelpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{availableTitleHelpPopover | translate}}\">\r\n </ec-help-popover>\r\n </div>\r\n <span *ngIf=\"availableCheckboxText\"\r\n id=\"selectedCount\">{{availableCheckboxText}}</span>\r\n <button *ngIf=\"showSelectAllItemsButton\"\r\n ecLinkButton\r\n id=\"selectAllItemsButton\"\r\n (click)=\"selectAllItems()\"\r\n class=\"ml-2\">\r\n {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\r\n </button>\r\n </div>\r\n </th>\r\n</ng-template>\r\n\r\n<ng-template #defaultAvailableItemTemplate\r\n let-item>\r\n <td>{{item.label}}</td>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemTemplate\r\n let-item>\r\n {{item.label}}\r\n</ng-template>", styles: [":host{display:flex}ec-searchable-table{border-right:2px solid var(--ec-border-color)}.selected-items{max-width:var(--ec-item-picker-max-width-selected-items, 50%)}.no-data-message{white-space:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.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: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: TableComponent, selector: "ec-table", inputs: ["id", "scrollable", "resizable", "condensed", "sortable", "selectionContext", "selectionToolbarTemplate", "selectable", "isForm", "sort", "resizableColumns"], outputs: ["sortChange"] }, { kind: "component", type: SearchableTableComponent, selector: "ec-searchable-table", inputs: ["id", "resizable", "sortable", "sort", "autofocus", "tableClasses", "searchboxPlaceholder", "formModel", "noDataMessage", "noSearchResultsMessage", "ready", "getItems", "refresh", "status", "tableLayoutFixed", "searchboxTabIndex", "maxItemCount", "hideSearchControl", "hideHeader", "objectType", "hideFooter", "pageable", "pageSize", "maxTabs", "searchboxReadonly", "selectionContext", "selectionToolbarTemplate", "additionalCountText", "selectable", "customContentTemplate", "removeCard", "overlayClasses", "fillParentHeight"], outputs: ["sortChange", "pageChange", "itemsChange"] }, { kind: "component", type: TableSelectableRowComponent, selector: "[ecTableSelectableRow]", inputs: ["id", "ecTableSelectableRow", "selectionContext", "rowIndex", "lockedColOptions", "isSelected", "isCheckboxDisabled"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
9433
|
+
ItemPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: ItemPickerComponent, selector: "ec-item-picker", inputs: { id: "id", availableTitle: "availableTitle", availableTitleHelpPopover: "availableTitleHelpPopover", selectedTitle: "selectedTitle", itemName: "itemName", formModel: "formModel", customAvailableHeaderTemplate: "customAvailableHeaderTemplate", customAvailableItemTemplate: "customAvailableItemTemplate", customSelectedItemTemplate: "customSelectedItemTemplate", ready: "ready", getItems: "getItems", selectionContext: "selectionContext", noDataMessage: "noDataMessage", noSelectedItemsMessage: "noSelectedItemsMessage", enableSelectAllItems: "enableSelectAllItems", selectAllItemsMessage: "selectAllItemsMessage" }, viewQueries: [{ propertyName: "defaultAvailableHeaderTemplate", first: true, predicate: ["defaultAvailableHeaderTemplate"], descendants: true, static: true }, { propertyName: "defaultAvailableItemTemplate", first: true, predicate: ["defaultAvailableItemTemplate"], descendants: true, static: true }, { propertyName: "defaultSelectedItemTemplate", first: true, predicate: ["defaultSelectedItemTemplate"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div ecOverlay\r\n class=\"d-flex flex-grow card\"\r\n [status]=\"tableStatus?.status\"\r\n [message]=\"tableStatus?.message\"\r\n [displayAsMask]=\"true\">\r\n <ec-searchable-table id=\"{{id}}_searchableTable\"\r\n class=\"flex-grow\"\r\n [fillParentHeight]=\"true\"\r\n [hideHeader]=\"true\"\r\n [hideSearchControl]=\"true\"\r\n [removeCard]=\"true\"\r\n [pageable]=\"true\"\r\n [pageSize]=\"50\"\r\n [objectType]=\"itemName\"\r\n [formModel]=\"formModel\"\r\n [ready]=\"ready\"\r\n [getItems]=\"getItems\"\r\n [selectable]=\"true\"\r\n [noDataMessage]=\"noDataMessage\"\r\n [selectionContext]=\"selectionContext\"\r\n [status]=\"tableStatus\"\r\n (itemsChange)=\"onItemsChange($event)\"\r\n [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\r\n [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\r\n [tableLayoutFixed]=\"true\"\r\n [disablePaginationControls]=\"disablePaginationControls\">\r\n <header *ngIf=\"customAvailableHeaderTemplate\"\r\n class=\"card-header flex-shrink\"\r\n style=\"height: 3rem;\">\r\n <h3 class=\"card-title\">{{availableTitle | translate}}\r\n <ec-help-popover id=\"availableTitle_helpPopover\"\r\n *ngIf=\"availableTitleHelpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{availableTitleHelpPopover | translate}}\">\r\n </ec-help-popover>\r\n </h3>\r\n </header>\r\n <thead>\r\n <tr ecTableSelectableRow\r\n [selectionContext]=\"selectionContext\"\r\n class=\"border-bottom-0\">\r\n <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></ng-container>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <ng-container *ngFor=\"let item of availableItems; index as rowIndex; trackBy: trackByIndex\">\r\n <tr ecTableSelectableRow\r\n [selectionContext]=\"selectionContext\"\r\n [rowIndex]=\"rowIndex\"\r\n [isCheckboxDisabled]=\"item.preventRemove || selectionContext.isSelectingAllItems\"\r\n [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id) || selectionContext.isSelectingAllItems\"\r\n [style.--ec-table-selectable-row-vertical-align-checkbox-td]=\"'middle'\">\r\n <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </ec-searchable-table>\r\n\r\n <section id=\"{{id}}_selectedItems\"\r\n class=\"selected-items flex-grow d-flex flex-column\">\r\n <div *ngIf=\"selectionContext.isSelectingAllItems\"\r\n class=\"d-flex flex-column flex-grow\">\r\n <header class=\"d-flex align-items-center px-2 text-heading-2\"\r\n style=\"height: 3rem;\">\r\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n <button *ngIf=\"selectedItemsClearable\"\r\n ecLinkButton\r\n id=\"{{id}}_clearSelection\"\r\n class=\"pl-2 ml-auto\"\r\n (click)=\"onClearSelectionClick()\"\r\n translate>ClearSelection_TC</button>\r\n </header>\r\n <div class=\"text-center border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\r\n [style.padding-left.rem]=\"4\"\r\n [style.padding-right.rem]=\"4\"\r\n [innerHtml]=\"selectAllItemsMessage | translate\"></div>\r\n </div>\r\n <ec-table *ngIf=\"!selectionContext.isSelectingAllItems\"\r\n [scrollable]=\"true\"\r\n class=\"d-flex flex-grow is-fixed\">\r\n <colgroup>\r\n <col>\r\n <col style=\"width: 2rem;\">\r\n </colgroup>\r\n <thead>\r\n <tr style=\"height: 3rem;\">\r\n <th colspan=\"2\"\r\n class=\"p-2 border-bottom-0\">\r\n <div class=\"d-flex align-items-center text-heading-2\">\r\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n <button *ngIf=\"selectedItemsClearable\"\r\n ecLinkButton\r\n id=\"{{id}}_clearSelection\"\r\n class=\"pl-2 ml-auto\"\r\n (click)=\"onClearSelectionClick()\"\r\n translate>ClearSelection_TC</button>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <ng-container *ngIf=\"selectedItems.length\">\r\n <tr *ngFor=\"let item of selectedItems; last as isLast\"\r\n id=\"selected_row_{{item.id}}\"\r\n [class.border-bottom]=\"!isLast\">\r\n <td class=\"p-2\">\r\n <ng-container\r\n *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\r\n </ng-container>\r\n </td>\r\n\r\n <td class=\"actions-col text-right\"\r\n style=\"vertical-align: middle;\">\r\n <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\r\n *ngIf=\"!item.preventRemove\"\r\n type=\"icon\"\r\n icon=\"ec-icon icon-cancel\"\r\n (clicked)=\"removeSelectedItem(item)\">\r\n </ec-button>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <tr *ngIf=\"!selectedItems.length\">\r\n <td *ngIf=\"!noSelectedItemsMessage\"\r\n colspan=\"2\"\r\n class=\"p-2 no-data-message\"\r\n translate\r\n [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\r\n <td *ngIf=\"noSelectedItemsMessage\"\r\n colspan=\"2\"\r\n class=\"p-2 no-data-message\"\r\n translate>{{noSelectedItemsMessage}}</td>\r\n </tr>\r\n </tbody>\r\n </ec-table>\r\n\r\n <footer id=\"selectedItemsFooter\"\r\n *ngIf=\"selectedItems.length && !selectionContext.isSelectingAllItems\"\r\n class=\"d-flex flex-shrink px-2 border-top align-items-center\">\r\n <div class=\"ml-auto my-2 d-flex align-items-center\"\r\n style=\"height: 1.75rem;\">\r\n <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\r\n </div>\r\n </footer>\r\n </section>\r\n</div>\r\n\r\n<ng-template #defaultAvailableHeaderTemplate>\r\n <th class=\"text-heading-2 font-color-primary border-bottom-0\">\r\n <div class=\"d-flex align-items-center \">\r\n <div *ngIf=\"!availableCheckboxText\">\r\n <span class=\"text-truncate\">{{availableTitle | translate}}</span>\r\n <ec-help-popover id=\"availableTitle_helpPopover\"\r\n *ngIf=\"availableTitleHelpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{availableTitleHelpPopover | translate}}\">\r\n </ec-help-popover>\r\n </div>\r\n <span *ngIf=\"availableCheckboxText\"\r\n id=\"selectedCount\">{{availableCheckboxText}}</span>\r\n <button *ngIf=\"showSelectAllItemsButton\"\r\n ecLinkButton\r\n id=\"selectAllItemsButton\"\r\n (click)=\"selectAllItems()\"\r\n class=\"ml-2\">\r\n {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\r\n </button>\r\n </div>\r\n </th>\r\n</ng-template>\r\n\r\n<ng-template #defaultAvailableItemTemplate\r\n let-item>\r\n <td>{{item.label}}</td>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemTemplate\r\n let-item>\r\n {{item.label}}\r\n</ng-template>", styles: [":host{display:flex}ec-searchable-table{border-right:2px solid var(--ec-border-color)}.selected-items{max-width:var(--ec-item-picker-max-width-selected-items, 50%)}.no-data-message{white-space:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.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: ViewOverlayComponent, selector: "[ecOverlay]", inputs: ["status", "message", "action", "noDataTemplate", "displayAsMask", "overlayClassList"] }, { kind: "component", type: TableComponent, selector: "ec-table", inputs: ["id", "scrollable", "resizable", "condensed", "sortable", "selectionContext", "selectionToolbarTemplate", "selectable", "isForm", "sort", "resizableColumns"], outputs: ["sortChange"] }, { kind: "component", type: SearchableTableComponent, selector: "ec-searchable-table", inputs: ["id", "resizable", "sortable", "sort", "autofocus", "tableClasses", "searchboxPlaceholder", "formModel", "noDataMessage", "noSearchResultsMessage", "ready", "getItems", "refresh", "status", "tableLayoutFixed", "searchboxTabIndex", "maxItemCount", "hideSearchControl", "hideHeader", "objectType", "hideFooter", "pageable", "pageSize", "maxTabs", "searchboxReadonly", "selectionContext", "selectionToolbarTemplate", "additionalCountText", "selectable", "customContentTemplate", "removeCard", "overlayClasses", "fillParentHeight", "disablePaginationControls"], outputs: ["sortChange", "pageChange", "itemsChange"] }, { kind: "component", type: TableSelectableRowComponent, selector: "[ecTableSelectableRow]", inputs: ["id", "ecTableSelectableRow", "selectionContext", "rowIndex", "lockedColOptions", "isSelected", "isCheckboxDisabled"] }, { kind: "component", type: HelpPopoverComponent, selector: "ec-help-popover", inputs: ["id", "text", "contentPosition", "maxWidth"] }, { kind: "component", type: LinkButtonComponent, selector: "button[ecLinkButton]" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
|
|
9453
9434
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ItemPickerComponent, decorators: [{
|
|
9454
9435
|
type: Component,
|
|
9455
|
-
args: [{ selector: 'ec-item-picker', template: "<div ecOverlay\r\n class=\"d-flex flex-grow card\"\r\n [status]=\"tableStatus?.status\"\r\n [message]=\"tableStatus?.message\"\r\n [displayAsMask]=\"true\">\r\n <ec-searchable-table id=\"{{id}}_searchableTable\"\r\n class=\"flex-grow\"\r\n [fillParentHeight]=\"true\"\r\n [hideHeader]=\"true\"\r\n [hideSearchControl]=\"true\"\r\n [removeCard]=\"true\"\r\n [pageable]=\"true\"\r\n [pageSize]=\"50\"\r\n [objectType]=\"itemName\"\r\n [formModel]=\"formModel\"\r\n [ready]=\"ready\"\r\n [getItems]=\"getItems\"\r\n [selectable]=\"true\"\r\n [noDataMessage]=\"noDataMessage\"\r\n [selectionContext]=\"selectionContext\"\r\n [status]=\"tableStatus\"\r\n (itemsChange)=\"onItemsChange($event)\"\r\n [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\r\n [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\r\n [tableLayoutFixed]=\"true\">\r\n <header *ngIf=\"customAvailableHeaderTemplate\"\r\n class=\"card-header flex-shrink\"\r\n style=\"height: 3rem;\">\r\n <h3 class=\"card-title\">{{availableTitle | translate}}\r\n <ec-help-popover id=\"availableTitle_helpPopover\"\r\n *ngIf=\"availableTitleHelpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{availableTitleHelpPopover | translate}}\">\r\n </ec-help-popover>\r\n </h3>\r\n </header>\r\n <thead>\r\n <tr ecTableSelectableRow\r\n [selectionContext]=\"selectionContext\"\r\n class=\"border-bottom-0\">\r\n <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></ng-container>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <ng-container *ngFor=\"let item of availableItems; index as rowIndex; trackBy: trackByIndex\">\r\n <tr ecTableSelectableRow\r\n [selectionContext]=\"selectionContext\"\r\n [rowIndex]=\"rowIndex\"\r\n [isCheckboxDisabled]=\"item.preventRemove || selectionContext.isSelectingAllItems\"\r\n [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id) || selectionContext.isSelectingAllItems\"\r\n [style.--ec-table-selectable-row-vertical-align-checkbox-td]=\"'middle'\">\r\n <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </ec-searchable-table>\r\n\r\n <section id=\"{{id}}_selectedItems\"\r\n class=\"selected-items flex-grow d-flex flex-column\">\r\n <div *ngIf=\"selectionContext.isSelectingAllItems\"\r\n class=\"d-flex flex-column flex-grow\">\r\n <header class=\"d-flex align-items-center px-2 text-heading-2\"\r\n style=\"height: 3rem;\">\r\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n <button *ngIf=\"selectedItemsClearable\"\r\n ecLinkButton\r\n id=\"{{id}}_clearSelection\"\r\n class=\"pl-2 ml-auto\"\r\n (click)=\"onClearSelectionClick()\"\r\n translate>ClearSelection_TC</button>\r\n </header>\r\n <div class=\"border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\r\n [innerHtml]=\"selectAllItemsMessage | translate\"></div>\r\n </div>\r\n <ec-table *ngIf=\"!selectionContext.isSelectingAllItems\"\r\n [scrollable]=\"true\"\r\n class=\"d-flex flex-grow is-fixed\">\r\n <colgroup>\r\n <col>\r\n <col style=\"width: 2rem;\">\r\n </colgroup>\r\n <thead>\r\n <tr style=\"height: 3rem;\">\r\n <th colspan=\"2\"\r\n class=\"p-2 border-bottom-0\">\r\n <div class=\"d-flex align-items-center text-heading-2\">\r\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n <button *ngIf=\"selectedItemsClearable\"\r\n ecLinkButton\r\n id=\"{{id}}_clearSelection\"\r\n class=\"pl-2 ml-auto\"\r\n (click)=\"onClearSelectionClick()\"\r\n translate>ClearSelection_TC</button>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <ng-container *ngIf=\"selectedItems.length\">\r\n <tr *ngFor=\"let item of selectedItems; last as isLast\"\r\n id=\"selected_row_{{item.id}}\"\r\n [class.border-bottom]=\"!isLast\">\r\n <td class=\"p-2\">\r\n <ng-container\r\n *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\r\n </ng-container>\r\n </td>\r\n\r\n <td class=\"actions-col text-right\"\r\n style=\"vertical-align: middle;\">\r\n <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\r\n *ngIf=\"!item.preventRemove\"\r\n type=\"icon\"\r\n icon=\"ec-icon icon-cancel\"\r\n (clicked)=\"removeSelectedItem(item)\">\r\n </ec-button>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <tr *ngIf=\"!selectedItems.length\">\r\n <td *ngIf=\"!noSelectedItemsMessage\"\r\n colspan=\"2\"\r\n class=\"p-2 no-data-message\"\r\n translate\r\n [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\r\n <td *ngIf=\"noSelectedItemsMessage\"\r\n colspan=\"2\"\r\n class=\"p-2 no-data-message\"\r\n translate>{{noSelectedItemsMessage}}</td>\r\n </tr>\r\n </tbody>\r\n </ec-table>\r\n\r\n <footer id=\"selectedItemsFooter\"\r\n *ngIf=\"selectedItems.length && !selectionContext.isSelectingAllItems\"\r\n class=\"d-flex flex-shrink px-2 border-top align-items-center\">\r\n <div class=\"ml-auto my-2 d-flex align-items-center\"\r\n style=\"height: 1.75rem;\">\r\n <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\r\n </div>\r\n </footer>\r\n </section>\r\n</div>\r\n\r\n<ng-template #defaultAvailableHeaderTemplate>\r\n <th class=\"text-heading-2 font-color-primary border-bottom-0\">\r\n <div class=\"d-flex align-items-center \">\r\n <div *ngIf=\"!availableCheckboxText\">\r\n <span class=\"text-truncate\">{{availableTitle | translate}}</span>\r\n <ec-help-popover id=\"availableTitle_helpPopover\"\r\n *ngIf=\"availableTitleHelpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{availableTitleHelpPopover | translate}}\">\r\n </ec-help-popover>\r\n </div>\r\n <span *ngIf=\"availableCheckboxText\"\r\n id=\"selectedCount\">{{availableCheckboxText}}</span>\r\n <button *ngIf=\"showSelectAllItemsButton\"\r\n ecLinkButton\r\n id=\"selectAllItemsButton\"\r\n (click)=\"selectAllItems()\"\r\n class=\"ml-2\">\r\n {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\r\n </button>\r\n </div>\r\n </th>\r\n</ng-template>\r\n\r\n<ng-template #defaultAvailableItemTemplate\r\n let-item>\r\n <td>{{item.label}}</td>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemTemplate\r\n let-item>\r\n {{item.label}}\r\n</ng-template>", styles: [":host{display:flex}ec-searchable-table{border-right:2px solid var(--ec-border-color)}.selected-items{max-width:var(--ec-item-picker-max-width-selected-items, 50%)}.no-data-message{white-space:normal}\n"] }]
|
|
9436
|
+
args: [{ selector: 'ec-item-picker', template: "<div ecOverlay\r\n class=\"d-flex flex-grow card\"\r\n [status]=\"tableStatus?.status\"\r\n [message]=\"tableStatus?.message\"\r\n [displayAsMask]=\"true\">\r\n <ec-searchable-table id=\"{{id}}_searchableTable\"\r\n class=\"flex-grow\"\r\n [fillParentHeight]=\"true\"\r\n [hideHeader]=\"true\"\r\n [hideSearchControl]=\"true\"\r\n [removeCard]=\"true\"\r\n [pageable]=\"true\"\r\n [pageSize]=\"50\"\r\n [objectType]=\"itemName\"\r\n [formModel]=\"formModel\"\r\n [ready]=\"ready\"\r\n [getItems]=\"getItems\"\r\n [selectable]=\"true\"\r\n [noDataMessage]=\"noDataMessage\"\r\n [selectionContext]=\"selectionContext\"\r\n [status]=\"tableStatus\"\r\n (itemsChange)=\"onItemsChange($event)\"\r\n [style.--ec-searchable-table-flex-properties]=\"(availableItems.length || tableStatus.status === 'pending' || tableStatus.status === 'error' ) ? '1 1 auto' : '0 1 auto'\"\r\n [style.--ec-searchable-table-height-caption-footer]=\"'calc(2.5rem + 1px)'\"\r\n [tableLayoutFixed]=\"true\"\r\n [disablePaginationControls]=\"disablePaginationControls\">\r\n <header *ngIf=\"customAvailableHeaderTemplate\"\r\n class=\"card-header flex-shrink\"\r\n style=\"height: 3rem;\">\r\n <h3 class=\"card-title\">{{availableTitle | translate}}\r\n <ec-help-popover id=\"availableTitle_helpPopover\"\r\n *ngIf=\"availableTitleHelpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{availableTitleHelpPopover | translate}}\">\r\n </ec-help-popover>\r\n </h3>\r\n </header>\r\n <thead>\r\n <tr ecTableSelectableRow\r\n [selectionContext]=\"selectionContext\"\r\n class=\"border-bottom-0\">\r\n <ng-container *ngTemplateOutlet=\"internalizedAvailableHeaderTemplate;\"></ng-container>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <ng-container *ngFor=\"let item of availableItems; index as rowIndex; trackBy: trackByIndex\">\r\n <tr ecTableSelectableRow\r\n [selectionContext]=\"selectionContext\"\r\n [rowIndex]=\"rowIndex\"\r\n [isCheckboxDisabled]=\"item.preventRemove || selectionContext.isSelectingAllItems\"\r\n [isSelected]=\"selectionContext?.selectedItemsMap.has(item.id) || selectionContext.isSelectingAllItems\"\r\n [style.--ec-table-selectable-row-vertical-align-checkbox-td]=\"'middle'\">\r\n <ng-container *ngTemplateOutlet=\"internalizedAvailableItemTemplate; context: {$implicit: item}\">\r\n </ng-container>\r\n </tr>\r\n </ng-container>\r\n </tbody>\r\n </ec-searchable-table>\r\n\r\n <section id=\"{{id}}_selectedItems\"\r\n class=\"selected-items flex-grow d-flex flex-column\">\r\n <div *ngIf=\"selectionContext.isSelectingAllItems\"\r\n class=\"d-flex flex-column flex-grow\">\r\n <header class=\"d-flex align-items-center px-2 text-heading-2\"\r\n style=\"height: 3rem;\">\r\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n <button *ngIf=\"selectedItemsClearable\"\r\n ecLinkButton\r\n id=\"{{id}}_clearSelection\"\r\n class=\"pl-2 ml-auto\"\r\n (click)=\"onClearSelectionClick()\"\r\n translate>ClearSelection_TC</button>\r\n </header>\r\n <div class=\"text-center border-top flex-grow d-flex align-items-center justify-content-center text-heading-2\"\r\n [style.padding-left.rem]=\"4\"\r\n [style.padding-right.rem]=\"4\"\r\n [innerHtml]=\"selectAllItemsMessage | translate\"></div>\r\n </div>\r\n <ec-table *ngIf=\"!selectionContext.isSelectingAllItems\"\r\n [scrollable]=\"true\"\r\n class=\"d-flex flex-grow is-fixed\">\r\n <colgroup>\r\n <col>\r\n <col style=\"width: 2rem;\">\r\n </colgroup>\r\n <thead>\r\n <tr style=\"height: 3rem;\">\r\n <th colspan=\"2\"\r\n class=\"p-2 border-bottom-0\">\r\n <div class=\"d-flex align-items-center text-heading-2\">\r\n <span class=\"flex-grow text-truncate\">{{selectedTitle | translate}}</span>\r\n <button *ngIf=\"selectedItemsClearable\"\r\n ecLinkButton\r\n id=\"{{id}}_clearSelection\"\r\n class=\"pl-2 ml-auto\"\r\n (click)=\"onClearSelectionClick()\"\r\n translate>ClearSelection_TC</button>\r\n </div>\r\n </th>\r\n </tr>\r\n </thead>\r\n\r\n <tbody>\r\n <ng-container *ngIf=\"selectedItems.length\">\r\n <tr *ngFor=\"let item of selectedItems; last as isLast\"\r\n id=\"selected_row_{{item.id}}\"\r\n [class.border-bottom]=\"!isLast\">\r\n <td class=\"p-2\">\r\n <ng-container\r\n *ngTemplateOutlet=\"internalizedSelectedItemTemplate; context: {$implicit: item}\">\r\n </ng-container>\r\n </td>\r\n\r\n <td class=\"actions-col text-right\"\r\n style=\"vertical-align: middle;\">\r\n <ec-button id=\"{{id}}_removeSelected_{{item.id}}\"\r\n *ngIf=\"!item.preventRemove\"\r\n type=\"icon\"\r\n icon=\"ec-icon icon-cancel\"\r\n (clicked)=\"removeSelectedItem(item)\">\r\n </ec-button>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n <tr *ngIf=\"!selectedItems.length\">\r\n <td *ngIf=\"!noSelectedItemsMessage\"\r\n colspan=\"2\"\r\n class=\"p-2 no-data-message\"\r\n translate\r\n [translateParams]=\"{itemName: itemName | translate}\">ItemPickerNoItemsSelected_SC</td>\r\n <td *ngIf=\"noSelectedItemsMessage\"\r\n colspan=\"2\"\r\n class=\"p-2 no-data-message\"\r\n translate>{{noSelectedItemsMessage}}</td>\r\n </tr>\r\n </tbody>\r\n </ec-table>\r\n\r\n <footer id=\"selectedItemsFooter\"\r\n *ngIf=\"selectedItems.length && !selectionContext.isSelectingAllItems\"\r\n class=\"d-flex flex-shrink px-2 border-top align-items-center\">\r\n <div class=\"ml-auto my-2 d-flex align-items-center\"\r\n style=\"height: 1.75rem;\">\r\n <span class=\"text-caption-1 font-color-hint\">{{selectedItems.length}} {{itemName | translate}}</span>\r\n </div>\r\n </footer>\r\n </section>\r\n</div>\r\n\r\n<ng-template #defaultAvailableHeaderTemplate>\r\n <th class=\"text-heading-2 font-color-primary border-bottom-0\">\r\n <div class=\"d-flex align-items-center \">\r\n <div *ngIf=\"!availableCheckboxText\">\r\n <span class=\"text-truncate\">{{availableTitle | translate}}</span>\r\n <ec-help-popover id=\"availableTitle_helpPopover\"\r\n *ngIf=\"availableTitleHelpPopover\"\r\n class=\"d-inline-block my-n3 mx-n1\"\r\n text=\"{{availableTitleHelpPopover | translate}}\">\r\n </ec-help-popover>\r\n </div>\r\n <span *ngIf=\"availableCheckboxText\"\r\n id=\"selectedCount\">{{availableCheckboxText}}</span>\r\n <button *ngIf=\"showSelectAllItemsButton\"\r\n ecLinkButton\r\n id=\"selectAllItemsButton\"\r\n (click)=\"selectAllItems()\"\r\n class=\"ml-2\">\r\n {{ ('SelectAllItemPickerItems_TC') | translate:{ count: totalItemsBeforePaging, itemName: itemName } }}\r\n </button>\r\n </div>\r\n </th>\r\n</ng-template>\r\n\r\n<ng-template #defaultAvailableItemTemplate\r\n let-item>\r\n <td>{{item.label}}</td>\r\n</ng-template>\r\n\r\n<ng-template #defaultSelectedItemTemplate\r\n let-item>\r\n {{item.label}}\r\n</ng-template>", styles: [":host{display:flex}ec-searchable-table{border-right:2px solid var(--ec-border-color)}.selected-items{max-width:var(--ec-item-picker-max-width-selected-items, 50%)}.no-data-message{white-space:normal}\n"] }]
|
|
9456
9437
|
}], ctorParameters: function () { return [{ type: i3.TranslateService }]; }, propDecorators: { id: [{
|
|
9457
9438
|
type: Input
|
|
9458
9439
|
}], availableTitle: [{
|