@c8y/ngx-components 1024.15.7 → 1024.15.13

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.
@@ -15988,6 +15988,15 @@ class ConfirmModalComponent {
15988
15988
  this.code = this.generateRandomCode();
15989
15989
  }
15990
15990
  }
15991
+ /**
15992
+ * Moves focus to the dialog once it is rendered, landing on the cancel button
15993
+ * (`cdkFocusInitial`) so that keyboard and screen reader users start on the least
15994
+ * destructive action. `ngx-bootstrap` focuses the dialog container itself, which happens
15995
+ * before this, hence focusing when the trap is ready rather than immediately.
15996
+ */
15997
+ ngAfterViewInit() {
15998
+ this.focusTrap?.focusTrap.focusInitialElementWhenReady();
15999
+ }
15991
16000
  get classIcon() {
15992
16001
  return `dlt-c8y-icon-${statusIcons[this.status]}`;
15993
16002
  }
@@ -16016,11 +16025,19 @@ class ConfirmModalComponent {
16016
16025
  return Array.from({ length: 5 }, () => chars.charAt(Math.floor(Math.random() * chars.length))).join('');
16017
16026
  }
16018
16027
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ConfirmModalComponent, deps: [{ token: i1$6.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
16019
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ConfirmModalComponent, isStandalone: true, selector: "c8y-confirm-modal", inputs: { title: "title", body: "body", confirmOptions: "confirmOptions", status: "status", requireCodeVerification: "requireCodeVerification", labels: "labels" }, ngImport: i0, template: "<div\n class=\"c8y-prompt alert\"\n [ngClass]=\"[classAlert]\"\n data-cy=\"prompt-alert\"\n>\n @if (title) {\n <h3 class=\"m-b-16 d-flex a-i-center\">\n <i\n class=\"dlt-c8y-icon\"\n [ngClass]=\"[classIcon]\"\n ></i>\n <span id=\"modal-title\">{{ title | translate }}</span>\n </h3>\n }\n <div id=\"modal-body\">\n @if (!isHtml(body)) {\n <p class=\"text-break-word m-b-16\">\n {{ body | translate }}\n </p>\n }\n @if (isHtml(body)) {\n <div\n class=\"text-break-word m-b-16\"\n [innerHTML]=\"body | translate\"\n ></div>\n }\n @for (co of confirmOptions | showIfFilter | async | keyvalue; track co) {\n <div class=\"c8y-checkbox plain m-b-8\">\n <label\n class=\"c8y-checkbox\"\n [title]=\"co.value.text | translate\"\n >\n <input\n type=\"checkbox\"\n [checked]=\"co.value.checked\"\n (change)=\"co.value.checked = !co.value.checked\"\n [disabled]=\"confirmOptions[co.value.disabledByKey]?.checked\"\n />\n <span></span>\n <span>{{ co.value.text | translate }}</span>\n </label>\n </div>\n }\n @if (requireCodeVerification) {\n <p class=\"text-break-word m-b-16\">\n <code>{{ code }}</code>\n </p>\n <form (submit)=\"$event.preventDefault()\">\n <div class=\"form-group\">\n <label for=\"confirmString\">\n {{ 'Confirm:' | translate }}\n </label>\n <input\n class=\"form-control\"\n id=\"confirmString\"\n placeholder=\"{{ 'Type here' | translate }}\"\n name=\"confirmString\"\n type=\"text\"\n autocomplete=\"off\"\n [(ngModel)]=\"confirmString\"\n />\n </div>\n </form>\n }\n <ng-content></ng-content>\n </div>\n <div class=\"alert-footer\">\n @if (labels.cancel !== null) {\n <button\n class=\"btn btn-default\"\n title=\"{{ labels.cancel | translate }}\"\n type=\"button\"\n (click)=\"dismiss()\"\n data-cy=\"c8y-confirm-modal--cancel\"\n >\n {{ labels.cancel | translate }}\n </button>\n }\n <button\n class=\"btn btn-primary m-t-xs-8\"\n title=\"{{ labels.ok | translate }}\"\n type=\"button\"\n (click)=\"close()\"\n data-cy=\"c8y-confirm-modal--ok\"\n [disabled]=\"isOkButtonDisabled\"\n >\n {{ labels.ok | translate }}\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: ShowIfFilterPipe, name: "showIfFilter" }] }); }
16028
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ConfirmModalComponent, isStandalone: true, selector: "c8y-confirm-modal", inputs: { title: "title", body: "body", confirmOptions: "confirmOptions", status: "status", requireCodeVerification: "requireCodeVerification", labels: "labels" }, viewQueries: [{ propertyName: "focusTrap", first: true, predicate: CdkTrapFocus, descendants: true }], ngImport: i0, template: "<div\n class=\"c8y-prompt alert\"\n cdkTrapFocus\n [ngClass]=\"[classAlert]\"\n data-cy=\"prompt-alert\"\n>\n @if (title) {\n <h3 class=\"m-b-16 d-flex a-i-center\">\n <i\n class=\"dlt-c8y-icon\"\n [ngClass]=\"[classIcon]\"\n ></i>\n <span id=\"modal-title\">{{ title | translate }}</span>\n </h3>\n }\n <div id=\"modal-body\">\n @if (!isHtml(body)) {\n <p class=\"text-break-word m-b-16\">\n {{ body | translate }}\n </p>\n }\n @if (isHtml(body)) {\n <div\n class=\"text-break-word m-b-16\"\n [innerHTML]=\"body | translate\"\n ></div>\n }\n @for (co of confirmOptions | showIfFilter | async | keyvalue; track co) {\n <div class=\"c8y-checkbox plain m-b-8\">\n <label\n class=\"c8y-checkbox\"\n [title]=\"co.value.text | translate\"\n >\n <input\n type=\"checkbox\"\n [checked]=\"co.value.checked\"\n (change)=\"co.value.checked = !co.value.checked\"\n [disabled]=\"confirmOptions[co.value.disabledByKey]?.checked\"\n />\n <span></span>\n <span>{{ co.value.text | translate }}</span>\n </label>\n </div>\n }\n @if (requireCodeVerification) {\n <p class=\"text-break-word m-b-16\">\n <code>{{ code }}</code>\n </p>\n <form (submit)=\"$event.preventDefault()\">\n <div class=\"form-group\">\n <label for=\"confirmString\">\n {{ 'Confirm:' | translate }}\n </label>\n <input\n class=\"form-control\"\n id=\"confirmString\"\n placeholder=\"{{ 'Type here' | translate }}\"\n name=\"confirmString\"\n type=\"text\"\n autocomplete=\"off\"\n [(ngModel)]=\"confirmString\"\n />\n </div>\n </form>\n }\n <ng-content></ng-content>\n </div>\n <div class=\"alert-footer\">\n @if (labels.cancel !== null) {\n <button\n class=\"btn btn-default\"\n title=\"{{ labels.cancel | translate }}\"\n type=\"button\"\n cdkFocusInitial\n (click)=\"dismiss()\"\n data-cy=\"c8y-confirm-modal--cancel\"\n >\n {{ labels.cancel | translate }}\n </button>\n }\n <button\n class=\"btn btn-primary m-t-xs-8\"\n title=\"{{ labels.ok | translate }}\"\n type=\"button\"\n (click)=\"close()\"\n data-cy=\"c8y-confirm-modal--ok\"\n [disabled]=\"isOkButtonDisabled\"\n >\n {{ labels.ok | translate }}\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule$1 }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: ShowIfFilterPipe, name: "showIfFilter" }] }); }
16020
16029
  }
16021
16030
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ConfirmModalComponent, decorators: [{
16022
16031
  type: Component,
16023
- args: [{ selector: 'c8y-confirm-modal', standalone: true, imports: [NgClass, C8yTranslatePipe, AsyncPipe, KeyValuePipe, ShowIfFilterPipe, FormsModule$1], template: "<div\n class=\"c8y-prompt alert\"\n [ngClass]=\"[classAlert]\"\n data-cy=\"prompt-alert\"\n>\n @if (title) {\n <h3 class=\"m-b-16 d-flex a-i-center\">\n <i\n class=\"dlt-c8y-icon\"\n [ngClass]=\"[classIcon]\"\n ></i>\n <span id=\"modal-title\">{{ title | translate }}</span>\n </h3>\n }\n <div id=\"modal-body\">\n @if (!isHtml(body)) {\n <p class=\"text-break-word m-b-16\">\n {{ body | translate }}\n </p>\n }\n @if (isHtml(body)) {\n <div\n class=\"text-break-word m-b-16\"\n [innerHTML]=\"body | translate\"\n ></div>\n }\n @for (co of confirmOptions | showIfFilter | async | keyvalue; track co) {\n <div class=\"c8y-checkbox plain m-b-8\">\n <label\n class=\"c8y-checkbox\"\n [title]=\"co.value.text | translate\"\n >\n <input\n type=\"checkbox\"\n [checked]=\"co.value.checked\"\n (change)=\"co.value.checked = !co.value.checked\"\n [disabled]=\"confirmOptions[co.value.disabledByKey]?.checked\"\n />\n <span></span>\n <span>{{ co.value.text | translate }}</span>\n </label>\n </div>\n }\n @if (requireCodeVerification) {\n <p class=\"text-break-word m-b-16\">\n <code>{{ code }}</code>\n </p>\n <form (submit)=\"$event.preventDefault()\">\n <div class=\"form-group\">\n <label for=\"confirmString\">\n {{ 'Confirm:' | translate }}\n </label>\n <input\n class=\"form-control\"\n id=\"confirmString\"\n placeholder=\"{{ 'Type here' | translate }}\"\n name=\"confirmString\"\n type=\"text\"\n autocomplete=\"off\"\n [(ngModel)]=\"confirmString\"\n />\n </div>\n </form>\n }\n <ng-content></ng-content>\n </div>\n <div class=\"alert-footer\">\n @if (labels.cancel !== null) {\n <button\n class=\"btn btn-default\"\n title=\"{{ labels.cancel | translate }}\"\n type=\"button\"\n (click)=\"dismiss()\"\n data-cy=\"c8y-confirm-modal--cancel\"\n >\n {{ labels.cancel | translate }}\n </button>\n }\n <button\n class=\"btn btn-primary m-t-xs-8\"\n title=\"{{ labels.ok | translate }}\"\n type=\"button\"\n (click)=\"close()\"\n data-cy=\"c8y-confirm-modal--ok\"\n [disabled]=\"isOkButtonDisabled\"\n >\n {{ labels.ok | translate }}\n </button>\n </div>\n</div>\n" }]
16032
+ args: [{ selector: 'c8y-confirm-modal', standalone: true, imports: [
16033
+ NgClass,
16034
+ C8yTranslatePipe,
16035
+ AsyncPipe,
16036
+ KeyValuePipe,
16037
+ ShowIfFilterPipe,
16038
+ FormsModule$1,
16039
+ CdkTrapFocus
16040
+ ], template: "<div\n class=\"c8y-prompt alert\"\n cdkTrapFocus\n [ngClass]=\"[classAlert]\"\n data-cy=\"prompt-alert\"\n>\n @if (title) {\n <h3 class=\"m-b-16 d-flex a-i-center\">\n <i\n class=\"dlt-c8y-icon\"\n [ngClass]=\"[classIcon]\"\n ></i>\n <span id=\"modal-title\">{{ title | translate }}</span>\n </h3>\n }\n <div id=\"modal-body\">\n @if (!isHtml(body)) {\n <p class=\"text-break-word m-b-16\">\n {{ body | translate }}\n </p>\n }\n @if (isHtml(body)) {\n <div\n class=\"text-break-word m-b-16\"\n [innerHTML]=\"body | translate\"\n ></div>\n }\n @for (co of confirmOptions | showIfFilter | async | keyvalue; track co) {\n <div class=\"c8y-checkbox plain m-b-8\">\n <label\n class=\"c8y-checkbox\"\n [title]=\"co.value.text | translate\"\n >\n <input\n type=\"checkbox\"\n [checked]=\"co.value.checked\"\n (change)=\"co.value.checked = !co.value.checked\"\n [disabled]=\"confirmOptions[co.value.disabledByKey]?.checked\"\n />\n <span></span>\n <span>{{ co.value.text | translate }}</span>\n </label>\n </div>\n }\n @if (requireCodeVerification) {\n <p class=\"text-break-word m-b-16\">\n <code>{{ code }}</code>\n </p>\n <form (submit)=\"$event.preventDefault()\">\n <div class=\"form-group\">\n <label for=\"confirmString\">\n {{ 'Confirm:' | translate }}\n </label>\n <input\n class=\"form-control\"\n id=\"confirmString\"\n placeholder=\"{{ 'Type here' | translate }}\"\n name=\"confirmString\"\n type=\"text\"\n autocomplete=\"off\"\n [(ngModel)]=\"confirmString\"\n />\n </div>\n </form>\n }\n <ng-content></ng-content>\n </div>\n <div class=\"alert-footer\">\n @if (labels.cancel !== null) {\n <button\n class=\"btn btn-default\"\n title=\"{{ labels.cancel | translate }}\"\n type=\"button\"\n cdkFocusInitial\n (click)=\"dismiss()\"\n data-cy=\"c8y-confirm-modal--cancel\"\n >\n {{ labels.cancel | translate }}\n </button>\n }\n <button\n class=\"btn btn-primary m-t-xs-8\"\n title=\"{{ labels.ok | translate }}\"\n type=\"button\"\n (click)=\"close()\"\n data-cy=\"c8y-confirm-modal--ok\"\n [disabled]=\"isOkButtonDisabled\"\n >\n {{ labels.ok | translate }}\n </button>\n </div>\n</div>\n" }]
16024
16041
  }], ctorParameters: () => [{ type: i1$6.BsModalRef }], propDecorators: { title: [{
16025
16042
  type: Input
16026
16043
  }], body: [{
@@ -16033,6 +16050,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
16033
16050
  type: Input
16034
16051
  }], labels: [{
16035
16052
  type: Input
16053
+ }], focusTrap: [{
16054
+ type: ViewChild,
16055
+ args: [CdkTrapFocus]
16036
16056
  }] } });
16037
16057
 
16038
16058
  class CookieBannerPreferencesModalComponent {