@c8y/ngx-components 1024.2.4 → 1024.5.1

package/fesm2022/c8y-ngx-components.mjs

@@ -19441,6 +19441,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * control only when the user confirms an edit (save), not on every keystroke.
  * When `noSaveButton` is `true`, every keystroke propagates instead.
  *
+ * The model update (`onChange`) happens before the `(save)` event fires, so
+ * `(save)` handlers can read the committed value directly from the bound form
+ * control or `ngModel`.
+ *
  * Supports synchronous and asynchronous validators via the `validators` and
  * `asyncValidators` inputs. Validation errors are shown while the user is
  * editing; saving is blocked when the typed value is invalid or a validator
@@ -19598,9 +19602,9 @@ class InputGroupEditableComponent {
         const value = this.internalControl.value ?? '';
         this.committedValue = value;
         this.errors = null;
-        this.save.emit(value);
         this.onChange?.(value);
         this.onTouched?.();
+        this.save.emit(value);
         this.internalControl.reset(value, { emitEvent: false });
         this.notifyAutoresize();
         this.announce(gettext$1('Saved'));
@@ -19617,7 +19621,8 @@ class InputGroupEditableComponent {
         this.cancel.emit();
         this.announce(gettext$1('Cancelled'));
     }
-    onEscape() {
+    onEscape(event) {
+        event.stopPropagation();
         this.onCancel();
         this.inputEl()?.nativeElement.blur();
     }
@@ -19641,7 +19646,7 @@ class InputGroupEditableComponent {
                 useExisting: forwardRef(() => InputGroupEditableComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "customErrorMessages", predicate: MessageDirective }], viewQueries: [{ propertyName: "autoresizeDir", first: true, predicate: TextareaAutoresizeDirective, descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<c8y-form-group\n  [class]=\"formGroupClass()\"\n  [status]=\"!!errors ? 'error' : ''\"\n>\n  <div\n    class=\"input-group input-group-editable\"\n    [class.input-group-sm]=\"size() === 'sm'\"\n    [class.input-group-lg]=\"size() === 'lg'\"\n    [class.input-group-editable--no-actions]=\"noSaveButton()\"\n    [attr.aria-label]=\"ariaLabel() | translate\"\n    role=\"group\"\n  >\n    @if (multiline()) {\n      <textarea\n        class=\"form-control no-resize\"\n        [style.max-height]=\"maxHeight() || null\"\n        [attr.aria-label]=\"ariaLabel() | translate\"\n        data-cy=\"c8y-input-group-editable--input\"\n        #inputEl\n        [attr.maxlength]=\"maxLength()\"\n        [attr.name]=\"name() || null\"\n        [placeholder]=\"(placeholder() | translate) || ''\"\n        [formControl]=\"internalControl\"\n        (keydown.control.enter)=\"noSaveButton() ? null : onSave()\"\n        (keydown.escape)=\"onEscape()\"\n        c8y-textarea-autoresize\n      ></textarea>\n    } @else {\n      <input\n        class=\"form-control\"\n        [attr.aria-label]=\"ariaLabel() | translate\"\n        data-cy=\"c8y-input-group-editable--input\"\n        #inputEl\n        [attr.maxlength]=\"maxLength()\"\n        [attr.name]=\"name() || null\"\n        [placeholder]=\"(placeholder() | translate) || ''\"\n        [formControl]=\"internalControl\"\n        (keydown.enter)=\"noSaveButton() ? null : onSave()\"\n        (keydown.escape)=\"onEscape()\"\n      />\n    }\n    <!-- Edit mode indicator hook used by _input-groups.scss -->\n    <span aria-hidden=\"true\"></span>\n    @if (!internalControl.disabled && !noSaveButton()) {\n      <div class=\"input-group-btn min-width-0\">\n        <button\n          class=\"btn btn-clean\"\n          [title]=\"'Cancel' | translate\"\n          [attr.aria-label]=\"'Cancel' | translate\"\n          type=\"button\"\n          (click)=\"onCancel()\"\n        >\n          <i\n            c8yIcon=\"times\"\n            aria-hidden=\"true\"\n          ></i>\n        </button>\n        <button\n          class=\"btn btn-clean text-primary\"\n          [title]=\"'Save' | translate\"\n          [attr.aria-label]=\"'Save' | translate\"\n          type=\"button\"\n          [disabled]=\"isSaveDisabled\"\n          (click)=\"onSave()\"\n        >\n          <i\n            c8yIcon=\"check\"\n            aria-hidden=\"true\"\n          ></i>\n        </button>\n      </div>\n    }\n    <span\n      class=\"sr-only\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      >{{ liveMessage | translate }}</span\n    >\n  </div>\n  <c8y-messages\n    [show]=\"errors\"\n    [additionalMessages]=\"customErrorMessages\"\n  ></c8y-messages>\n</c8y-form-group>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.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: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "customErrorMessages", predicate: MessageDirective }], viewQueries: [{ propertyName: "autoresizeDir", first: true, predicate: TextareaAutoresizeDirective, descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<c8y-form-group\n  [class]=\"formGroupClass()\"\n  [status]=\"!!errors ? 'error' : ''\"\n>\n  <div\n    class=\"input-group input-group-editable\"\n    [class.input-group-sm]=\"size() === 'sm'\"\n    [class.input-group-lg]=\"size() === 'lg'\"\n    [class.input-group-editable--no-actions]=\"noSaveButton()\"\n    [attr.aria-label]=\"ariaLabel() | translate\"\n    role=\"group\"\n  >\n    @if (multiline()) {\n      <textarea\n        class=\"form-control no-resize\"\n        [style.max-height]=\"maxHeight() || null\"\n        [attr.aria-label]=\"ariaLabel() | translate\"\n        data-cy=\"c8y-input-group-editable--input\"\n        #inputEl\n        [attr.maxlength]=\"maxLength()\"\n        [attr.name]=\"name() || null\"\n        [placeholder]=\"(placeholder() | translate) || ''\"\n        [formControl]=\"internalControl\"\n        (keydown.control.enter)=\"noSaveButton() ? null : onSave()\"\n        (keydown.escape)=\"onEscape($event)\"\n        c8y-textarea-autoresize\n      ></textarea>\n    } @else {\n      <input\n        class=\"form-control\"\n        [attr.aria-label]=\"ariaLabel() | translate\"\n        data-cy=\"c8y-input-group-editable--input\"\n        #inputEl\n        [attr.maxlength]=\"maxLength()\"\n        [attr.name]=\"name() || null\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [placeholder]=\"(placeholder() | translate) || ''\"\n        [formControl]=\"internalControl\"\n        (keydown.enter)=\"noSaveButton() ? null : onSave()\"\n        (keydown.escape)=\"onEscape($event)\"\n        data-1p-ignore\n        data-lpignore=\"true\"\n        data-bwignore\n      />\n    }\n    <!-- Edit mode indicator hook used by _input-groups.scss -->\n    <span aria-hidden=\"true\"></span>\n    @if (!internalControl.disabled && !noSaveButton()) {\n      <div class=\"input-group-btn min-width-0\">\n        <button\n          class=\"btn btn-clean\"\n          [title]=\"'Cancel' | translate\"\n          [attr.aria-label]=\"'Cancel' | translate\"\n          type=\"button\"\n          (click)=\"onCancel()\"\n        >\n          <i\n            c8yIcon=\"times\"\n            aria-hidden=\"true\"\n          ></i>\n        </button>\n        <button\n          class=\"btn btn-clean text-primary\"\n          [title]=\"'Save' | translate\"\n          [attr.aria-label]=\"'Save' | translate\"\n          type=\"button\"\n          [disabled]=\"isSaveDisabled\"\n          (click)=\"onSave()\"\n        >\n          <i\n            c8yIcon=\"check\"\n            aria-hidden=\"true\"\n          ></i>\n        </button>\n      </div>\n    }\n    <span\n      class=\"sr-only\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      >{{ liveMessage | translate }}</span\n    >\n  </div>\n  <c8y-messages\n    [show]=\"errors\"\n    [additionalMessages]=\"customErrorMessages\"\n  ></c8y-messages>\n</c8y-form-group>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.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: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: TextareaAutoresizeDirective, selector: "[c8y-textarea-autoresize]" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputGroupEditableComponent, decorators: [{
             type: Component,
@@ -19658,7 +19663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => InputGroupEditableComponent),
                             multi: true
                         }
-                    ], template: "<c8y-form-group\n  [class]=\"formGroupClass()\"\n  [status]=\"!!errors ? 'error' : ''\"\n>\n  <div\n    class=\"input-group input-group-editable\"\n    [class.input-group-sm]=\"size() === 'sm'\"\n    [class.input-group-lg]=\"size() === 'lg'\"\n    [class.input-group-editable--no-actions]=\"noSaveButton()\"\n    [attr.aria-label]=\"ariaLabel() | translate\"\n    role=\"group\"\n  >\n    @if (multiline()) {\n      <textarea\n        class=\"form-control no-resize\"\n        [style.max-height]=\"maxHeight() || null\"\n        [attr.aria-label]=\"ariaLabel() | translate\"\n        data-cy=\"c8y-input-group-editable--input\"\n        #inputEl\n        [attr.maxlength]=\"maxLength()\"\n        [attr.name]=\"name() || null\"\n        [placeholder]=\"(placeholder() | translate) || ''\"\n        [formControl]=\"internalControl\"\n        (keydown.control.enter)=\"noSaveButton() ? null : onSave()\"\n        (keydown.escape)=\"onEscape()\"\n        c8y-textarea-autoresize\n      ></textarea>\n    } @else {\n      <input\n        class=\"form-control\"\n        [attr.aria-label]=\"ariaLabel() | translate\"\n        data-cy=\"c8y-input-group-editable--input\"\n        #inputEl\n        [attr.maxlength]=\"maxLength()\"\n        [attr.name]=\"name() || null\"\n        [placeholder]=\"(placeholder() | translate) || ''\"\n        [formControl]=\"internalControl\"\n        (keydown.enter)=\"noSaveButton() ? null : onSave()\"\n        (keydown.escape)=\"onEscape()\"\n      />\n    }\n    <!-- Edit mode indicator hook used by _input-groups.scss -->\n    <span aria-hidden=\"true\"></span>\n    @if (!internalControl.disabled && !noSaveButton()) {\n      <div class=\"input-group-btn min-width-0\">\n        <button\n          class=\"btn btn-clean\"\n          [title]=\"'Cancel' | translate\"\n          [attr.aria-label]=\"'Cancel' | translate\"\n          type=\"button\"\n          (click)=\"onCancel()\"\n        >\n          <i\n            c8yIcon=\"times\"\n            aria-hidden=\"true\"\n          ></i>\n        </button>\n        <button\n          class=\"btn btn-clean text-primary\"\n          [title]=\"'Save' | translate\"\n          [attr.aria-label]=\"'Save' | translate\"\n          type=\"button\"\n          [disabled]=\"isSaveDisabled\"\n          (click)=\"onSave()\"\n        >\n          <i\n            c8yIcon=\"check\"\n            aria-hidden=\"true\"\n          ></i>\n        </button>\n      </div>\n    }\n    <span\n      class=\"sr-only\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      >{{ liveMessage | translate }}</span\n    >\n  </div>\n  <c8y-messages\n    [show]=\"errors\"\n    [additionalMessages]=\"customErrorMessages\"\n  ></c8y-messages>\n</c8y-form-group>\n" }]
+                    ], template: "<c8y-form-group\n  [class]=\"formGroupClass()\"\n  [status]=\"!!errors ? 'error' : ''\"\n>\n  <div\n    class=\"input-group input-group-editable\"\n    [class.input-group-sm]=\"size() === 'sm'\"\n    [class.input-group-lg]=\"size() === 'lg'\"\n    [class.input-group-editable--no-actions]=\"noSaveButton()\"\n    [attr.aria-label]=\"ariaLabel() | translate\"\n    role=\"group\"\n  >\n    @if (multiline()) {\n      <textarea\n        class=\"form-control no-resize\"\n        [style.max-height]=\"maxHeight() || null\"\n        [attr.aria-label]=\"ariaLabel() | translate\"\n        data-cy=\"c8y-input-group-editable--input\"\n        #inputEl\n        [attr.maxlength]=\"maxLength()\"\n        [attr.name]=\"name() || null\"\n        [placeholder]=\"(placeholder() | translate) || ''\"\n        [formControl]=\"internalControl\"\n        (keydown.control.enter)=\"noSaveButton() ? null : onSave()\"\n        (keydown.escape)=\"onEscape($event)\"\n        c8y-textarea-autoresize\n      ></textarea>\n    } @else {\n      <input\n        class=\"form-control\"\n        [attr.aria-label]=\"ariaLabel() | translate\"\n        data-cy=\"c8y-input-group-editable--input\"\n        #inputEl\n        [attr.maxlength]=\"maxLength()\"\n        [attr.name]=\"name() || null\"\n        [attr.autocomplete]=\"autocomplete()\"\n        [placeholder]=\"(placeholder() | translate) || ''\"\n        [formControl]=\"internalControl\"\n        (keydown.enter)=\"noSaveButton() ? null : onSave()\"\n        (keydown.escape)=\"onEscape($event)\"\n        data-1p-ignore\n        data-lpignore=\"true\"\n        data-bwignore\n      />\n    }\n    <!-- Edit mode indicator hook used by _input-groups.scss -->\n    <span aria-hidden=\"true\"></span>\n    @if (!internalControl.disabled && !noSaveButton()) {\n      <div class=\"input-group-btn min-width-0\">\n        <button\n          class=\"btn btn-clean\"\n          [title]=\"'Cancel' | translate\"\n          [attr.aria-label]=\"'Cancel' | translate\"\n          type=\"button\"\n          (click)=\"onCancel()\"\n        >\n          <i\n            c8yIcon=\"times\"\n            aria-hidden=\"true\"\n          ></i>\n        </button>\n        <button\n          class=\"btn btn-clean text-primary\"\n          [title]=\"'Save' | translate\"\n          [attr.aria-label]=\"'Save' | translate\"\n          type=\"button\"\n          [disabled]=\"isSaveDisabled\"\n          (click)=\"onSave()\"\n        >\n          <i\n            c8yIcon=\"check\"\n            aria-hidden=\"true\"\n          ></i>\n        </button>\n      </div>\n    }\n    <span\n      class=\"sr-only\"\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      >{{ liveMessage | translate }}</span\n    >\n  </div>\n  <c8y-messages\n    [show]=\"errors\"\n    [additionalMessages]=\"customErrorMessages\"\n  ></c8y-messages>\n</c8y-form-group>\n" }]
         }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiline: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiline", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], noSaveButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSaveButton", required: false }] }], formGroupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroupClass", required: false }] }], validators: [{ type: i0.Input, args: [{ isSignal: true, alias: "validators", required: false }] }], asyncValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "asyncValidators", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], save: [{ type: i0.Output, args: ["save"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], customErrorMessages: [{
                 type: ContentChildren,
                 args: [MessageDirective]