@quadrel-enterprise-ui/framework 20.24.0 → 20.25.0

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.
@@ -3125,6 +3125,7 @@ class QdMockCheckboxComponent {
3125
3125
  inputData;
3126
3126
  value;
3127
3127
  disabled = false;
3128
+ hasAutofocus = false;
3128
3129
  testId = 'checkbox';
3129
3130
  valueChange = new EventEmitter();
3130
3131
  get dataTestId() {
@@ -3134,7 +3135,7 @@ class QdMockCheckboxComponent {
3134
3135
  this.valueChange.emit(this.value);
3135
3136
  }
3136
3137
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3137
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockCheckboxComponent, isStandalone: false, selector: "qd-checkbox", inputs: { inputData: "inputData", value: "value", disabled: "disabled", testId: ["data-test-id", "testId"] }, outputs: { valueChange: "valueChange" }, host: { listeners: { "click": "handleClick()" }, properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: 'inputData: {{inputData | json}}, value: {{value}}, disabled: {{disabled | json}}', isInline: true, dependencies: [{ kind: "pipe", type: i1.JsonPipe, name: "json" }] });
3138
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdMockCheckboxComponent, isStandalone: false, selector: "qd-checkbox", inputs: { inputData: "inputData", value: "value", disabled: "disabled", hasAutofocus: "hasAutofocus", testId: ["data-test-id", "testId"] }, outputs: { valueChange: "valueChange" }, host: { listeners: { "click": "handleClick()" }, properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: 'inputData: {{inputData | json}}, value: {{value}}, disabled: {{disabled | json}}', isInline: true, dependencies: [{ kind: "pipe", type: i1.JsonPipe, name: "json" }] });
3138
3139
  }
3139
3140
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdMockCheckboxComponent, decorators: [{
3140
3141
  type: Component,
@@ -3149,6 +3150,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
3149
3150
  type: Input
3150
3151
  }], disabled: [{
3151
3152
  type: Input
3153
+ }], hasAutofocus: [{
3154
+ type: Input
3152
3155
  }], testId: [{
3153
3156
  type: Input,
3154
3157
  args: ['data-test-id']
@@ -9227,6 +9230,14 @@ class QdCheckboxComponent {
9227
9230
  value;
9228
9231
  testId = 'checkbox';
9229
9232
  disabled = false;
9233
+ /**
9234
+ * @description Set to "true", this checkbox's native input will be focused when the application is
9235
+ * initially loaded. Within a checkbox group, the group passes this only to its first checkbox.
9236
+ * Note: hasAutofocus can only be used once per view. No matter in which pattern it is used.
9237
+ *
9238
+ * * @default: false
9239
+ */
9240
+ hasAutofocus = false;
9230
9241
  valueChange = new EventEmitter();
9231
9242
  get checked() {
9232
9243
  return this.inputData.value === this.value;
@@ -9266,13 +9277,13 @@ class QdCheckboxComponent {
9266
9277
  this.valueChange.emit(this.value);
9267
9278
  }
9268
9279
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
9269
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdCheckboxComponent, isStandalone: false, selector: "qd-checkbox", inputs: { inputData: "inputData", value: "value", testId: ["data-test-id", "testId"], disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.qd-form-disabled": "this.disabled", "class.qd-checkbox-disabled": "this.disabled", "class.qd-checkbox--disabled": "this.isDisabled" }, classAttribute: "qd-checkbox" }, providers: [
9280
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdCheckboxComponent, isStandalone: false, selector: "qd-checkbox", inputs: { inputData: "inputData", value: "value", testId: ["data-test-id", "testId"], disabled: "disabled", hasAutofocus: "hasAutofocus" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.qd-form-disabled": "this.disabled", "class.qd-checkbox-disabled": "this.disabled", "class.qd-checkbox--disabled": "this.isDisabled" }, classAttribute: "qd-checkbox" }, providers: [
9270
9281
  {
9271
9282
  provide: NG_VALUE_ACCESSOR,
9272
9283
  useExisting: QdCheckboxComponent,
9273
9284
  multi: true
9274
9285
  }
9275
- ], ngImport: i0, template: "<label\n [for]=\"inputData.value\"\n [attr.data-test-id]=\"testId + '-label'\"\n [ngClass]=\"\n 'qd-checkbox__label' +\n (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n (checked ? ' qd-checkbox__label--checked' : '')\n \"\n>\n <input\n type=\"checkbox\"\n qdVisuallyHidden\n [id]=\"inputData.value\"\n [attr.data-test-id]=\"testId + '-input'\"\n [ngClass]=\"'qd-checkbox__checkbox'\"\n [name]=\"id\"\n [value]=\"inputData.value\"\n [disabled]=\"inputData.disabled || disabled\"\n (click)=\"handleClick(inputData.value, $event)\"\n [checked]=\"checked\"\n />\n\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"checked\"\n [icon]=\"'timesSquareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-checked'\"\n ></qd-icon>\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"!checked\"\n [icon]=\"'squareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n ></qd-icon>\n\n <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}\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: QdVisuallyHiddenDirective, selector: "[qdVisuallyHidden]" }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
9286
+ ], ngImport: i0, template: "<label\n [for]=\"inputData.value\"\n [attr.data-test-id]=\"testId + '-label'\"\n [ngClass]=\"\n 'qd-checkbox__label' +\n (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n (checked ? ' qd-checkbox__label--checked' : '')\n \"\n>\n <input\n type=\"checkbox\"\n qdVisuallyHidden\n [qdAutofocus]=\"hasAutofocus\"\n [id]=\"inputData.value\"\n [attr.data-test-id]=\"testId + '-input'\"\n [ngClass]=\"'qd-checkbox__checkbox'\"\n [name]=\"id\"\n [value]=\"inputData.value\"\n [disabled]=\"inputData.disabled || disabled\"\n (click)=\"handleClick(inputData.value, $event)\"\n [checked]=\"checked\"\n />\n\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"checked\"\n [icon]=\"'timesSquareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-checked'\"\n ></qd-icon>\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"!checked\"\n [icon]=\"'squareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n ></qd-icon>\n\n <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}\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: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "directive", type: QdVisuallyHiddenDirective, selector: "[qdVisuallyHidden]" }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon", "status"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
9276
9287
  }
9277
9288
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCheckboxComponent, decorators: [{
9278
9289
  type: Component,
@@ -9282,7 +9293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
9282
9293
  useExisting: QdCheckboxComponent,
9283
9294
  multi: true
9284
9295
  }
9285
- ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkbox' }, standalone: false, template: "<label\n [for]=\"inputData.value\"\n [attr.data-test-id]=\"testId + '-label'\"\n [ngClass]=\"\n 'qd-checkbox__label' +\n (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n (checked ? ' qd-checkbox__label--checked' : '')\n \"\n>\n <input\n type=\"checkbox\"\n qdVisuallyHidden\n [id]=\"inputData.value\"\n [attr.data-test-id]=\"testId + '-input'\"\n [ngClass]=\"'qd-checkbox__checkbox'\"\n [name]=\"id\"\n [value]=\"inputData.value\"\n [disabled]=\"inputData.disabled || disabled\"\n (click)=\"handleClick(inputData.value, $event)\"\n [checked]=\"checked\"\n />\n\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"checked\"\n [icon]=\"'timesSquareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-checked'\"\n ></qd-icon>\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"!checked\"\n [icon]=\"'squareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n ></qd-icon>\n\n <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}\n"] }]
9296
+ ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkbox' }, standalone: false, template: "<label\n [for]=\"inputData.value\"\n [attr.data-test-id]=\"testId + '-label'\"\n [ngClass]=\"\n 'qd-checkbox__label' +\n (inputData.disabled || disabled ? ' qd-checkbox__label--disabled' : '') +\n (checked ? ' qd-checkbox__label--checked' : '')\n \"\n>\n <input\n type=\"checkbox\"\n qdVisuallyHidden\n [qdAutofocus]=\"hasAutofocus\"\n [id]=\"inputData.value\"\n [attr.data-test-id]=\"testId + '-input'\"\n [ngClass]=\"'qd-checkbox__checkbox'\"\n [name]=\"id\"\n [value]=\"inputData.value\"\n [disabled]=\"inputData.disabled || disabled\"\n (click)=\"handleClick(inputData.value, $event)\"\n [checked]=\"checked\"\n />\n\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"checked\"\n [icon]=\"'timesSquareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-checked'\"\n ></qd-icon>\n <qd-icon\n [ngClass]=\"'qd-checkbox__indicator'\"\n *ngIf=\"!checked\"\n [icon]=\"'squareSolid'\"\n [attr.data-test-id]=\"testId + '-indicator-unchecked'\"\n ></qd-icon>\n\n <span [ngClass]=\"'qd-checkbox__caption qd-intersection-target'\">{{ inputData.i18n | translate }}</span>\n</label>\n", styles: [".qd-checkbox{display:flex;align-items:center;margin-right:1rem}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled){border:.0625rem solid rgb(180,180,180);margin-right:0;margin-bottom:.75rem;background:#fff}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label{width:100%;padding-left:.75rem;line-height:2.25rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label .qd-checkbox__indicator.qd-icon{margin-right:.75rem}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__label--disabled .qd-checkbox__caption{color:#d5d5d5}.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{margin-right:.75rem;color:#171717;transform:translateY(.0625rem)}}@media (max-width: 959.98px) and (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled) .qd-checkbox__caption{padding:.375rem 0;line-height:1.25rem}}@media (max-width: 959.98px){.qd-checkbox:not(.qd-rwd-disabled):last-child{margin-bottom:0}}.qd-checkbox:last-child{margin-right:0}.qd-checkbox .qd-checkbox__label{position:relative;display:flex;max-width:100%;align-items:center;color:#454545;cursor:pointer;font-size:.875rem;font-weight:400}.qd-checkbox .qd-checkbox__label .qd-checkbox__indicator{margin-right:.375rem;color:#b4b4b4;font-size:1.25rem}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus{color:#171717}.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):hover .qd-checkbox__indicator,.qd-checkbox .qd-checkbox__label:not(.qd-checkbox__label--checked,.qd-checkbox__label--disabled):focus .qd-checkbox__indicator{color:#757575}.qd-checkbox .qd-checkbox__label--checked{color:#171717}.qd-checkbox .qd-checkbox__label--checked .qd-checkbox__indicator{color:#069}.qd-checkbox .qd-checkbox__label--disabled{color:#d5d5d5;cursor:default}.qd-checkbox .qd-checkbox__label--disabled .qd-checkbox__indicator{color:#d5d5d5}\n"] }]
9286
9297
  }], ctorParameters: () => [], propDecorators: { inputData: [{
9287
9298
  type: Input
9288
9299
  }], value: [{
@@ -9298,6 +9309,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
9298
9309
  args: ['class.qd-checkbox-disabled']
9299
9310
  }, {
9300
9311
  type: Input
9312
+ }], hasAutofocus: [{
9313
+ type: Input
9301
9314
  }], valueChange: [{
9302
9315
  type: Output
9303
9316
  }], isDisabled: [{
@@ -9530,6 +9543,7 @@ class QdCheckboxesComponent {
9530
9543
  return this.align === 'horizontal';
9531
9544
  }
9532
9545
  filter = false;
9546
+ hasAutofocus = false;
9533
9547
  label;
9534
9548
  hint;
9535
9549
  align;
@@ -9629,6 +9643,7 @@ class QdCheckboxesComponent {
9629
9643
  this.readonlyAction = getReadonlyAction(this.config);
9630
9644
  this.viewonlyAction = getViewonlyAction(this.config);
9631
9645
  this.filter = getFilter$1(this.config);
9646
+ this.hasAutofocus = getHasAutofocus(this.config);
9632
9647
  this.align = getAlign(this.config);
9633
9648
  this.options = getOptions(this.config);
9634
9649
  this.isLabelDisabled = getIsLabelDisabled(this.config);
@@ -9680,7 +9695,7 @@ class QdCheckboxesComponent {
9680
9695
  },
9681
9696
  QdCheckboxesService,
9682
9697
  QdFormsActionEmitterService
9683
- ], viewQueries: [{ propertyName: "checkboxes", predicate: QdCheckboxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId + '-filter-form'\"\n ></qd-filter-form-items>\n\n <div class=\"qd-checkboxes__checkbox-section\">\n <qd-checkbox\n *ngFor=\"let checkbox of checkboxesListForView\"\n [inputData]=\"checkbox\"\n [value]=\"checkboxesValues[checkbox.index]\"\n [disabled]=\"checkbox.disabled || disabled\"\n (valueChange)=\"handleClick(checkbox)\"\n [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n ></qd-checkbox>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"selectedValuesTranslated\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"selectedValuesTranslated\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\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: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }], encapsulation: i0.ViewEncapsulation.None });
9698
+ ], viewQueries: [{ propertyName: "checkboxes", predicate: QdCheckboxComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId + '-filter-form'\"\n ></qd-filter-form-items>\n\n <div class=\"qd-checkboxes__checkbox-section\">\n <qd-checkbox\n *ngFor=\"let checkbox of checkboxesListForView\"\n [inputData]=\"checkbox\"\n [value]=\"checkboxesValues[checkbox.index]\"\n [disabled]=\"checkbox.disabled || disabled\"\n [hasAutofocus]=\"hasAutofocus && checkbox.index === 0\"\n (valueChange)=\"handleClick(checkbox)\"\n [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n ></qd-checkbox>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"selectedValuesTranslated\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"selectedValuesTranslated\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\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: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled", "hasAutofocus"], outputs: ["valueChange"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }], encapsulation: i0.ViewEncapsulation.None });
9684
9699
  }
9685
9700
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdCheckboxesComponent, decorators: [{
9686
9701
  type: Component,
@@ -9692,7 +9707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
9692
9707
  },
9693
9708
  QdCheckboxesService,
9694
9709
  QdFormsActionEmitterService
9695
- ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkboxes' }, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId + '-filter-form'\"\n ></qd-filter-form-items>\n\n <div class=\"qd-checkboxes__checkbox-section\">\n <qd-checkbox\n *ngFor=\"let checkbox of checkboxesListForView\"\n [inputData]=\"checkbox\"\n [value]=\"checkboxesValues[checkbox.index]\"\n [disabled]=\"checkbox.disabled || disabled\"\n (valueChange)=\"handleClick(checkbox)\"\n [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n ></qd-checkbox>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"selectedValuesTranslated\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"selectedValuesTranslated\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"] }]
9710
+ ], encapsulation: ViewEncapsulation.None, host: { class: 'qd-checkboxes' }, standalone: false, template: "<qd-form-label\n [label]=\"label\"\n [readonly]=\"readonly\"\n [viewonly]=\"viewonly\"\n [control]=\"control\"\n [tooltip]=\"config?.tooltip\"\n [data-test-id]=\"testId\"\n [isDisabled]=\"isLabelDisabled\"\n></qd-form-label>\n\n<div class=\"qd-checkboxes__input-section\" *ngIf=\"!readonly && !viewonly\">\n <qd-filter-form-items\n *ngIf=\"filter\"\n (filterValueChange)=\"changeValue($event)\"\n [data-test-id]=\"testId + '-filter-form'\"\n ></qd-filter-form-items>\n\n <div class=\"qd-checkboxes__checkbox-section\">\n <qd-checkbox\n *ngFor=\"let checkbox of checkboxesListForView\"\n [inputData]=\"checkbox\"\n [value]=\"checkboxesValues[checkbox.index]\"\n [disabled]=\"checkbox.disabled || disabled\"\n [hasAutofocus]=\"hasAutofocus && checkbox.index === 0\"\n (valueChange)=\"handleClick(checkbox)\"\n [data-test-id]=\"testId + '-checkbox-' + checkbox.index\"\n ></qd-checkbox>\n </div>\n</div>\n\n<qd-form-hint\n *ngIf=\"!readonly && !viewonly && (hint || hasError)\"\n [hint]=\"hint\"\n [control]=\"control\"\n [hasError]=\"hasError\"\n [hintAction]=\"hintAction\"\n [data-test-id]=\"testId\"\n></qd-form-hint>\n\n<qd-form-readonly\n *ngIf=\"readonly\"\n [values]=\"selectedValuesTranslated\"\n [readonlyAction]=\"readonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n *ngIf=\"viewonly\"\n [values]=\"selectedValuesTranslated\"\n [viewonlyAction]=\"viewonlyAction\"\n [data-test-id]=\"testId\"\n></qd-form-viewonly>\n", styles: [".qd-checkboxes{display:block;margin-bottom:.75rem}@media (max-width: 959.98px){.qd-checkboxes{height:initial}}.qd-checkboxes .qd-checkboxes__input-section{display:block;flex-direction:column;margin-bottom:.3125rem}.qd-checkboxes .qd-checkboxes__checkbox-section{display:flex;min-height:2.25rem;flex-direction:row}@media (max-width: 959.98px){.qd-checkboxes .qd-checkboxes__checkbox-section{height:initial;flex-direction:column}}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section{display:flex;flex-direction:column}.qd-checkboxes.qd-checkboxes-vertical .qd-checkboxes__checkbox-section .qd-checkbox:not(:last-child){margin-bottom:.5rem}.qd-checkboxes.qd-checkboxes-disabled{pointer-events:none}.qd-checkboxes-readonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--readonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--readonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--readonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}.qd-checkboxes-viewonly .qd-checkboxes__input-section{font-size:.875rem;line-height:2.25rem}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section{color:#069;cursor:pointer}.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:hover,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:active,.qd-checkboxes--viewonly-action .qd-checkboxes__input-section:focus{text-decoration:underline}\n"] }]
9696
9711
  }], ctorParameters: () => [], propDecorators: { formControlName: [{
9697
9712
  type: Input
9698
9713
  }], values: [{
@@ -21169,7 +21184,7 @@ class QdFilterItemBooleanComponent {
21169
21184
  this.filterService.setItemIsActive(this.filterId, this.categoryIndex, this.itemIndex, value === this.itemData);
21170
21185
  }
21171
21186
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemBooleanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
21172
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemBooleanComponent, isStandalone: false, selector: "qd-filter-item-boolean", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", i18n: "i18n", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<qd-checkbox\n [inputData]=\"{ value: itemData, i18n: i18n || '', disabled: false }\"\n [value]=\"active ? itemData : null\"\n (valueChange)=\"clickToggle($event)\"\n qdRwdDisabled\n [data-test-id]=\"testId\"\n [attr.data-test-id]=\"testId + '-checkbox'\"\n></qd-checkbox>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap-reverse;margin:0 .75rem;line-height:2.125rem}:host ::ng-deep .qd-checkbox,:host ::ng-deep .qd-checkbox__label,:host ::ng-deep .qd-checkbox__caption{padding:0!important;border:0;margin:0!important}:host ::ng-deep .qd-form-label{color:#757575!important}:host ::ng-deep .qd-form-label:hover,:host ::ng-deep .qd-form-label:focus,:host ::ng-deep .qd-form-label:active{color:#171717!important}:host ::ng-deep .qd-checkbox__indicator{margin-right:.5rem!important}\n"], dependencies: [{ kind: "directive", type: QdRwdDisabledDirective, selector: "[qdRwdDisabled]" }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled"], outputs: ["valueChange"] }] });
21187
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemBooleanComponent, isStandalone: false, selector: "qd-filter-item-boolean", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", i18n: "i18n", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<qd-checkbox\n [inputData]=\"{ value: itemData, i18n: i18n || '', disabled: false }\"\n [value]=\"active ? itemData : null\"\n (valueChange)=\"clickToggle($event)\"\n qdRwdDisabled\n [data-test-id]=\"testId\"\n [attr.data-test-id]=\"testId + '-checkbox'\"\n></qd-checkbox>\n", styles: [":host{position:relative;display:flex;flex-wrap:wrap-reverse;margin:0 .75rem;line-height:2.125rem}:host ::ng-deep .qd-checkbox,:host ::ng-deep .qd-checkbox__label,:host ::ng-deep .qd-checkbox__caption{padding:0!important;border:0;margin:0!important}:host ::ng-deep .qd-form-label{color:#757575!important}:host ::ng-deep .qd-form-label:hover,:host ::ng-deep .qd-form-label:focus,:host ::ng-deep .qd-form-label:active{color:#171717!important}:host ::ng-deep .qd-checkbox__indicator{margin-right:.5rem!important}\n"], dependencies: [{ kind: "directive", type: QdRwdDisabledDirective, selector: "[qdRwdDisabled]" }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled", "hasAutofocus"], outputs: ["valueChange"] }] });
21173
21188
  }
21174
21189
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemBooleanComponent, decorators: [{
21175
21190
  type: Component,
@@ -21638,7 +21653,7 @@ class QdFilterItemMultiSelectComponent {
21638
21653
  this.filterService.setItemIsActive(this.filterId, this.categoryIndex, this.itemIndex, !!$event);
21639
21654
  }
21640
21655
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
21641
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemMultiSelectComponent, isStandalone: false, selector: "qd-filter-item-multi-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<qd-checkbox\n [inputData]=\"{ value: item, i18n: i18n, disabled: false }\"\n [value]=\"active ? item : null\"\n (valueChange)=\"clickToggle($event)\"\n qdRwdDisabled\n [data-test-id]=\"testId\"\n></qd-checkbox>\n", styles: [":host{position:relative;display:flex;overflow:hidden;flex-wrap:wrap-reverse;padding:0 .75rem;line-height:2.5rem}:host:hover,:host:focus,:host:active{background:#f5f5f5}:host ::ng-deep .qd-checkbox{overflow:hidden}:host ::ng-deep .qd-checkbox__caption{display:block;cursor:pointer!important;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: QdRwdDisabledDirective, selector: "[qdRwdDisabled]" }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled"], outputs: ["valueChange"] }] });
21656
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemMultiSelectComponent, isStandalone: false, selector: "qd-filter-item-multi-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", itemIndex: "itemIndex", testId: ["data-test-id", "testId"] }, host: { properties: { "attr.data-test-id": "this.dataTestId" } }, ngImport: i0, template: "<qd-checkbox\n [inputData]=\"{ value: item, i18n: i18n, disabled: false }\"\n [value]=\"active ? item : null\"\n (valueChange)=\"clickToggle($event)\"\n qdRwdDisabled\n [data-test-id]=\"testId\"\n></qd-checkbox>\n", styles: [":host{position:relative;display:flex;overflow:hidden;flex-wrap:wrap-reverse;padding:0 .75rem;line-height:2.5rem}:host:hover,:host:focus,:host:active{background:#f5f5f5}:host ::ng-deep .qd-checkbox{overflow:hidden}:host ::ng-deep .qd-checkbox__caption{display:block;cursor:pointer!important;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: QdRwdDisabledDirective, selector: "[qdRwdDisabled]" }, { kind: "component", type: QdCheckboxComponent, selector: "qd-checkbox", inputs: ["inputData", "value", "data-test-id", "disabled", "hasAutofocus"], outputs: ["valueChange"] }] });
21642
21657
  }
21643
21658
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemMultiSelectComponent, decorators: [{
21644
21659
  type: Component,