chrv-components 1.12.152 → 1.12.153

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.
Binary file
@@ -4692,7 +4692,7 @@ class ChrSearchSelectInputComponent extends ChrInputComponent {
4692
4692
  super.ngOnInit();
4693
4693
  }
4694
4694
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSearchSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4695
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrSearchSelectInputComponent, isStandalone: true, selector: "chr-search-select-input", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue()\"\n [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\">\n <chr-input-indicators>\n <!-- @if(isFocused()){ -->\n @if(value() == null){\n <span class=\"material-symbols selection-status-indicator error\">close</span>\n }@else {\n <span class=\"material-symbols selection-status-indicator success\">check</span>\n }\n <span class=\"selection-status-indicator\" style=\"width: 1rem; \"></span>\n <!-- } -->\n </chr-input-indicators>\n <chr-input-data-overlay>\n <chr-data-list #dl [for]=\"''+name()\" [suggestions]=\"data()\" [display]=\"display()\" [selectOnFullMatch]=\"true\"\n (optionSelected)=\"selectOption($event.value)\"></chr-data-list>\n </chr-input-data-overlay>\n </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.search-select-input-wrapper{position:relative;min-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.selection-status-indicator.success{color:var(--success-color)}.selection-status-indicator.error{color:var(--error-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "tooltipPosition"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "input", "debouncedInput", "focus", "enter", "blur"] }, { kind: "component", type: ChrInputIndicators, selector: "chr-input-indicators" }, { kind: "component", type: DataListComponent, selector: "chr-data-list", inputs: ["suggestions", "for", "allowStringify", "display", "targetElement", "blurOnSelect", "selectOnFullMatch"], outputs: ["optionSelected"] }, { kind: "component", type: ChrInputDataOverlay, selector: "chr-input-data-overlay" }] }); }
4695
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrSearchSelectInputComponent, isStandalone: true, selector: "chr-search-select-input", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue()\"\n [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\">\n <chr-input-indicators>\n <!-- @if(isFocused()){ -->\n @if(value() == null){\n <span class=\"material-symbols selection-status-indicator error\">close</span>\n }@else {\n <span class=\"material-symbols selection-status-indicator success\">check</span>\n }\n <span class=\"selection-status-indicator\" style=\"width: 1rem; \"></span>\n <!-- } -->\n </chr-input-indicators>\n <chr-input-data>\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content>\n </ng-content>\n </ng-content>\n </chr-input-data>\n <chr-input-data-overlay>\n <chr-data-list #dl [for]=\"''+name()\" [suggestions]=\"data()\" [display]=\"display()\" [selectOnFullMatch]=\"true\"\n (optionSelected)=\"selectOption($event.value)\"></chr-data-list>\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n </chr-input-data-overlay>\n </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.search-select-input-wrapper{position:relative;min-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.selection-status-indicator.success{color:var(--success-color)}.selection-status-indicator.error{color:var(--error-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "tooltipPosition"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "input", "debouncedInput", "focus", "enter", "blur"] }, { kind: "component", type: ChrInputIndicators, selector: "chr-input-indicators" }, { kind: "component", type: DataListComponent, selector: "chr-data-list", inputs: ["suggestions", "for", "allowStringify", "display", "targetElement", "blurOnSelect", "selectOnFullMatch"], outputs: ["optionSelected"] }, { kind: "component", type: ChrInputDataOverlay, selector: "chr-input-data-overlay" }, { kind: "component", type: ChrInputData, selector: "chr-input-data" }] }); }
4696
4696
  }
4697
4697
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSearchSelectInputComponent, decorators: [{
4698
4698
  type: Component,
@@ -4702,7 +4702,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
4702
4702
  ChrInputIndicators,
4703
4703
  DataListComponent,
4704
4704
  ChrInputDataOverlay,
4705
- ], template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue()\"\n [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\">\n <chr-input-indicators>\n <!-- @if(isFocused()){ -->\n @if(value() == null){\n <span class=\"material-symbols selection-status-indicator error\">close</span>\n }@else {\n <span class=\"material-symbols selection-status-indicator success\">check</span>\n }\n <span class=\"selection-status-indicator\" style=\"width: 1rem; \"></span>\n <!-- } -->\n </chr-input-indicators>\n <chr-input-data-overlay>\n <chr-data-list #dl [for]=\"''+name()\" [suggestions]=\"data()\" [display]=\"display()\" [selectOnFullMatch]=\"true\"\n (optionSelected)=\"selectOption($event.value)\"></chr-data-list>\n </chr-input-data-overlay>\n </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.search-select-input-wrapper{position:relative;min-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.selection-status-indicator.success{color:var(--success-color)}.selection-status-indicator.error{color:var(--error-color)}\n"] }]
4705
+ ChrInputData,
4706
+ ], template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue()\"\n [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\">\n <chr-input-indicators>\n <!-- @if(isFocused()){ -->\n @if(value() == null){\n <span class=\"material-symbols selection-status-indicator error\">close</span>\n }@else {\n <span class=\"material-symbols selection-status-indicator success\">check</span>\n }\n <span class=\"selection-status-indicator\" style=\"width: 1rem; \"></span>\n <!-- } -->\n </chr-input-indicators>\n <chr-input-data>\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content>\n </ng-content>\n </ng-content>\n </chr-input-data>\n <chr-input-data-overlay>\n <chr-data-list #dl [for]=\"''+name()\" [suggestions]=\"data()\" [display]=\"display()\" [selectOnFullMatch]=\"true\"\n (optionSelected)=\"selectOption($event.value)\"></chr-data-list>\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n </chr-input-data-overlay>\n </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.search-select-input-wrapper{position:relative;min-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.selection-status-indicator.success{color:var(--success-color)}.selection-status-indicator.error{color:var(--error-color)}\n"] }]
4706
4707
  }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }] } });
4707
4708
 
4708
4709
  class ChrTagSelectInputComponent extends ChrInputComponent {
@@ -4768,7 +4769,7 @@ class ChrTagSelectInputComponent extends ChrInputComponent {
4768
4769
  this.displayValue.set('');
4769
4770
  }
4770
4771
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTagSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4771
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrTagSelectInputComponent, isStandalone: true, selector: "chr-tag-select-input", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"tag-select-input-wrapper\">\n <!-- Champ de recherche enfant -->\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\n [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\" (input)=\"dl.open();onInput($event);\">\n\n <chr-input-indicators>\n <span class=\"material-symbols\">data_array</span>\n <span style=\"width: 1rem;\"></span>\n </chr-input-indicators>\n <chr-input-data-overlay>\n <chr-data-list #dl [for]=\"'' + name()\" [suggestions]=\"filteredOptions()\" [selectOnFullMatch]=\"true\"\n [display]=\"display()\" (optionSelected)=\"selectOption($event.value)\">\n </chr-data-list>\n </chr-input-data-overlay>\n <chr-input-data>\n <!-- Affichage des Tags (Chips) -->\n @if (selectedItems().length > 0) {\n <div class=\"tags-container\">\n @for (item of selectedItems(); track $index) {\n <div class=\"tag-chip\">\n <span class=\"tag-label\">{{ display()(item) }}</span>\n <button type=\"button\" class=\"tag-remove-btn\" (click)=\"removeTag($index)\"\n [attr.aria-label]=\"'Supprimer ' + display()(item)\">\n <span class=\"material-symbols\">close</span>\n </button>\n </div>\n }\n </div>\n }\n </chr-input-data>\n </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.tag-select-input-wrapper{position:relative;min-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.tags-container{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.25rem}.tag-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%);color:var(--primary-color);border-radius:9999px;font-size:.875rem;font-weight:500;line-height:1}.tag-remove-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;cursor:pointer;padding:0;border-radius:50%;width:1.125rem;height:1.125rem;opacity:.7;transition:opacity .15s ease,background-color .15s ease}::ng-deep .tag-select-input-wrapper span.custom-datalist-arrow{top:.8rem}.tag-remove-btn:hover{opacity:1;background-color:#0000001a}.tag-remove-btn .material-symbols{font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "tooltipPosition"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "input", "debouncedInput", "focus", "enter", "blur"] }, { kind: "component", type: ChrInputIndicators, selector: "chr-input-indicators" }, { kind: "component", type: DataListComponent, selector: "chr-data-list", inputs: ["suggestions", "for", "allowStringify", "display", "targetElement", "blurOnSelect", "selectOnFullMatch"], outputs: ["optionSelected"] }, { kind: "component", type: ChrInputData, selector: "chr-input-data" }, { kind: "component", type: ChrInputDataOverlay, selector: "chr-input-data-overlay" }] }); }
4772
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrTagSelectInputComponent, isStandalone: true, selector: "chr-tag-select-input", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"tag-select-input-wrapper\">\n <!-- Champ de recherche enfant -->\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\n [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\" (input)=\"dl.open();onInput($event);\">\n\n <chr-input-indicators>\n <span class=\"material-symbols\">data_array</span>\n <span style=\"width: 1rem;\"></span>\n </chr-input-indicators>\n <chr-input-data-overlay>\n <chr-data-list #dl [for]=\"'' + name()\" [suggestions]=\"filteredOptions()\" [selectOnFullMatch]=\"true\"\n [display]=\"display()\" (optionSelected)=\"selectOption($event.value)\">\n </chr-data-list>\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n </chr-input-data-overlay>\n <chr-input-data>\n <!-- Affichage des Tags (Chips) -->\n @if (selectedItems().length > 0) {\n <div class=\"tags-container\">\n @for (item of selectedItems(); track $index) {\n <div class=\"tag-chip\">\n <span class=\"tag-label\">{{ display()(item) }}</span>\n <button type=\"button\" class=\"tag-remove-btn\" (click)=\"removeTag($index)\"\n [attr.aria-label]=\"'Supprimer ' + display()(item)\">\n <span class=\"material-symbols\">close</span>\n </button>\n </div>\n }\n </div>\n }\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content>\n </ng-content>\n </ng-content>\n </chr-input-data>\n </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.tag-select-input-wrapper{position:relative;min-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.tags-container{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.25rem}.tag-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%);color:var(--primary-color);border-radius:9999px;font-size:.875rem;font-weight:500;line-height:1}.tag-remove-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;cursor:pointer;padding:0;border-radius:50%;width:1.125rem;height:1.125rem;opacity:.7;transition:opacity .15s ease,background-color .15s ease}::ng-deep .tag-select-input-wrapper span.custom-datalist-arrow{top:.8rem}.tag-remove-btn:hover{opacity:1;background-color:#0000001a}.tag-remove-btn .material-symbols{font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ChrInputComponent, selector: "chr-input", inputs: ["label", "id", "name", "value", "displayValue", "type", "outputType", "step", "debounceTime", "isDisabled", "isFocused", "min", "max", "minLength", "maxLength", "ngControl", "tooltip", "tooltipPosition"], outputs: ["idChange", "nameChange", "valueChange", "displayValueChange", "outputTypeChange", "isDisabledChange", "isFocusedChange", "ngControlChange", "input", "debouncedInput", "focus", "enter", "blur"] }, { kind: "component", type: ChrInputIndicators, selector: "chr-input-indicators" }, { kind: "component", type: DataListComponent, selector: "chr-data-list", inputs: ["suggestions", "for", "allowStringify", "display", "targetElement", "blurOnSelect", "selectOnFullMatch"], outputs: ["optionSelected"] }, { kind: "component", type: ChrInputData, selector: "chr-input-data" }, { kind: "component", type: ChrInputDataOverlay, selector: "chr-input-data-overlay" }] }); }
4772
4773
  }
4773
4774
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTagSelectInputComponent, decorators: [{
4774
4775
  type: Component,
@@ -4779,7 +4780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
4779
4780
  DataListComponent,
4780
4781
  ChrInputData,
4781
4782
  ChrInputDataOverlay,
4782
- ], template: "<div class=\"tag-select-input-wrapper\">\n <!-- Champ de recherche enfant -->\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\n [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\" (input)=\"dl.open();onInput($event);\">\n\n <chr-input-indicators>\n <span class=\"material-symbols\">data_array</span>\n <span style=\"width: 1rem;\"></span>\n </chr-input-indicators>\n <chr-input-data-overlay>\n <chr-data-list #dl [for]=\"'' + name()\" [suggestions]=\"filteredOptions()\" [selectOnFullMatch]=\"true\"\n [display]=\"display()\" (optionSelected)=\"selectOption($event.value)\">\n </chr-data-list>\n </chr-input-data-overlay>\n <chr-input-data>\n <!-- Affichage des Tags (Chips) -->\n @if (selectedItems().length > 0) {\n <div class=\"tags-container\">\n @for (item of selectedItems(); track $index) {\n <div class=\"tag-chip\">\n <span class=\"tag-label\">{{ display()(item) }}</span>\n <button type=\"button\" class=\"tag-remove-btn\" (click)=\"removeTag($index)\"\n [attr.aria-label]=\"'Supprimer ' + display()(item)\">\n <span class=\"material-symbols\">close</span>\n </button>\n </div>\n }\n </div>\n }\n </chr-input-data>\n </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.tag-select-input-wrapper{position:relative;min-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.tags-container{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.25rem}.tag-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%);color:var(--primary-color);border-radius:9999px;font-size:.875rem;font-weight:500;line-height:1}.tag-remove-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;cursor:pointer;padding:0;border-radius:50%;width:1.125rem;height:1.125rem;opacity:.7;transition:opacity .15s ease,background-color .15s ease}::ng-deep .tag-select-input-wrapper span.custom-datalist-arrow{top:.8rem}.tag-remove-btn:hover{opacity:1;background-color:#0000001a}.tag-remove-btn .material-symbols{font-size:1rem}\n"] }]
4783
+ ], template: "<div class=\"tag-select-input-wrapper\">\n <!-- Champ de recherche enfant -->\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue() ?? ''\"\n [value]=\"displayValue()\" (input)=\"dl.open();onInput($event);\" (input)=\"dl.open();onInput($event);\">\n\n <chr-input-indicators>\n <span class=\"material-symbols\">data_array</span>\n <span style=\"width: 1rem;\"></span>\n </chr-input-indicators>\n <chr-input-data-overlay>\n <chr-data-list #dl [for]=\"'' + name()\" [suggestions]=\"filteredOptions()\" [selectOnFullMatch]=\"true\"\n [display]=\"display()\" (optionSelected)=\"selectOption($event.value)\">\n </chr-data-list>\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n </chr-input-data-overlay>\n <chr-input-data>\n <!-- Affichage des Tags (Chips) -->\n @if (selectedItems().length > 0) {\n <div class=\"tags-container\">\n @for (item of selectedItems(); track $index) {\n <div class=\"tag-chip\">\n <span class=\"tag-label\">{{ display()(item) }}</span>\n <button type=\"button\" class=\"tag-remove-btn\" (click)=\"removeTag($index)\"\n [attr.aria-label]=\"'Supprimer ' + display()(item)\">\n <span class=\"material-symbols\">close</span>\n </button>\n </div>\n }\n </div>\n }\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content>\n </ng-content>\n </ng-content>\n </chr-input-data>\n </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.tag-select-input-wrapper{position:relative;min-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.tags-container{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.25rem}.tag-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background-color:color-mix(in srgb,var(--primary-color) 10%,transparent 90%);color:var(--primary-color);border-radius:9999px;font-size:.875rem;font-weight:500;line-height:1}.tag-remove-btn{display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;cursor:pointer;padding:0;border-radius:50%;width:1.125rem;height:1.125rem;opacity:.7;transition:opacity .15s ease,background-color .15s ease}::ng-deep .tag-select-input-wrapper span.custom-datalist-arrow{top:.8rem}.tag-remove-btn:hover{opacity:1;background-color:#0000001a}.tag-remove-btn .material-symbols{font-size:1rem}\n"] }]
4783
4784
  }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }] } });
4784
4785
 
4785
4786
  class ChrTextAreaInputComponent extends ChrInputComponent {