chrv-components 1.12.124 → 1.12.125
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
|
|
@@ -4349,6 +4349,24 @@ class ChrInputComponent {
|
|
|
4349
4349
|
}
|
|
4350
4350
|
}
|
|
4351
4351
|
};
|
|
4352
|
+
this.ensureDefaultDisplayValue = () => {
|
|
4353
|
+
const value = this.value() || this.ngControl()?.value;
|
|
4354
|
+
const type = this.type();
|
|
4355
|
+
if (value === null || value === undefined) {
|
|
4356
|
+
this.displayValue.set('');
|
|
4357
|
+
return;
|
|
4358
|
+
}
|
|
4359
|
+
switch (type) {
|
|
4360
|
+
case 'date':
|
|
4361
|
+
this.displayValue.set(formatDate$1(value, 'yyyy-MM-dd'));
|
|
4362
|
+
break;
|
|
4363
|
+
case 'datetime':
|
|
4364
|
+
this.displayValue.set(formatDate$1(value, "yyyy-MM-dd'T'HH:mm"));
|
|
4365
|
+
break;
|
|
4366
|
+
default:
|
|
4367
|
+
this.displayValue.set(value);
|
|
4368
|
+
}
|
|
4369
|
+
};
|
|
4352
4370
|
this.onChange = (value) => {
|
|
4353
4371
|
if (value instanceof Event) {
|
|
4354
4372
|
const source = value.target;
|
|
@@ -4366,21 +4384,6 @@ class ChrInputComponent {
|
|
|
4366
4384
|
};
|
|
4367
4385
|
this.writeValue = (value) => {
|
|
4368
4386
|
this.value.set(value ?? null);
|
|
4369
|
-
const type = this.type();
|
|
4370
|
-
if (value === null || value === undefined) {
|
|
4371
|
-
this.displayValue.set('');
|
|
4372
|
-
return;
|
|
4373
|
-
}
|
|
4374
|
-
switch (type) {
|
|
4375
|
-
case 'date':
|
|
4376
|
-
this.displayValue.set(formatDate$1(value, 'yyyy-MM-dd'));
|
|
4377
|
-
break;
|
|
4378
|
-
case 'datetime':
|
|
4379
|
-
this.displayValue.set(formatDate$1(value, "yyyy-MM-dd'T'HH:mm"));
|
|
4380
|
-
break;
|
|
4381
|
-
default:
|
|
4382
|
-
this.displayValue.set(value);
|
|
4383
|
-
}
|
|
4384
4387
|
};
|
|
4385
4388
|
this.registerOnChange = (fn) => {
|
|
4386
4389
|
this._onChange = (v) => {
|
|
@@ -4439,6 +4442,7 @@ class ChrInputComponent {
|
|
|
4439
4442
|
this.configureEventListeners();
|
|
4440
4443
|
this.ensureNgControl();
|
|
4441
4444
|
this.ensureOutputType();
|
|
4445
|
+
this.ensureDefaultDisplayValue();
|
|
4442
4446
|
}
|
|
4443
4447
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4444
4448
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrInputComponent, isStandalone: true, selector: "chr-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, ngControl: { classPropertyName: "ngControl", publicName: "ngControl", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { id: "idChange", name: "nameChange", value: "valueChange", displayValue: "displayValueChange", outputType: "outputTypeChange", isDisabled: "isDisabledChange", isFocused: "isFocusedChange", ngControl: "ngControlChange", input: "input", debouncedInput: "debouncedInput", focus: "focus", enter: "enter", blur: "blur" }, providers: [], ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n <div class=\"input-row\">\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <input [multiple]=\"\" class=\"input\" #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \"\n [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [disabled]=\"isDisabled()\"\n [type]=\"type() == 'time-seconds' ? 'time' : type()\" (input)=\"input.emit($event);onChange($event)\"\n [step]=\"type() == 'time-seconds' ? 1 : step()\" (keyup.enter)=\"enter.emit()\" />\n <span class=\"indicators\">\n <!-- Indicators projection -->\n <ng-content select=\"chr-input-indicators\"></ng-content>\n @if(tooltip() != null){\n <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n }\n </span>\n </div>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content></ng-content>\n </ng-content>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;min-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap}.input-wrapper .input-row .input{min-width:0}.input-wrapper .input-row .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;min-width:fit-content;gap:.25rem;max-width:fit-content;align-items:center;padding-left:.125rem;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input-row .indicators:has(chr-input-indicators:not(:empty)),.input-wrapper .input-row .indicators:has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:after{content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;padding-right:.125rem;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}\n"], dependencies: [{ kind: "directive", type: ChrPopoverDirectiveDirective, selector: "[chrPopover]", inputs: ["chrPopover", "chrPopoverPosition", "chrPopoverOnHover"] }] }); }
|
|
@@ -4640,11 +4644,6 @@ class ChrSearchSelectInputComponent extends ChrInputComponent {
|
|
|
4640
4644
|
...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
|
|
4641
4645
|
this.writeValue = (value) => {
|
|
4642
4646
|
this.value.set(value);
|
|
4643
|
-
if (value === null || value === undefined) {
|
|
4644
|
-
this.displayValue.set('');
|
|
4645
|
-
}
|
|
4646
|
-
else
|
|
4647
|
-
this.displayValue.set(this.display()(this.value()));
|
|
4648
4647
|
};
|
|
4649
4648
|
/**
|
|
4650
4649
|
* Force the value to be null when the user types.
|
|
@@ -4655,16 +4654,23 @@ class ChrSearchSelectInputComponent extends ChrInputComponent {
|
|
|
4655
4654
|
this.value.set(null);
|
|
4656
4655
|
};
|
|
4657
4656
|
this.selectOption = (event) => {
|
|
4657
|
+
const displayFn = this.display();
|
|
4658
4658
|
this.onChange(event);
|
|
4659
|
-
this.displayValue.set('' +
|
|
4659
|
+
this.displayValue.set('' + displayFn(event));
|
|
4660
4660
|
};
|
|
4661
4661
|
}
|
|
4662
4662
|
ngOnInit() {
|
|
4663
4663
|
super.ngOnInit();
|
|
4664
|
-
|
|
4664
|
+
const value = this.value();
|
|
4665
|
+
const displayFn = this.display();
|
|
4666
|
+
if (value === null || value === undefined) {
|
|
4667
|
+
this.displayValue.set('');
|
|
4668
|
+
}
|
|
4669
|
+
else
|
|
4670
|
+
this.displayValue.set(displayFn(value));
|
|
4665
4671
|
}
|
|
4666
4672
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSearchSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4667
|
-
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]=\"
|
|
4673
|
+
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;justify-self:stretch;align-self:center;min-width:0}.search-select-input-wrapper{position:relative}.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" }] }); }
|
|
4668
4674
|
}
|
|
4669
4675
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSearchSelectInputComponent, decorators: [{
|
|
4670
4676
|
type: Component,
|
|
@@ -4674,7 +4680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4674
4680
|
ChrInputIndicators,
|
|
4675
4681
|
DataListComponent,
|
|
4676
4682
|
ChrInputDataOverlay,
|
|
4677
|
-
], template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" type=\"text\" [label]=\"label()\" [displayValue]=\"displayValue()\"\n [value]=\"
|
|
4683
|
+
], 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;justify-self:stretch;align-self:center;min-width:0}.search-select-input-wrapper{position:relative}.selection-status-indicator.success{color:var(--success-color)}.selection-status-indicator.error{color:var(--error-color)}\n"] }]
|
|
4678
4684
|
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }] } });
|
|
4679
4685
|
|
|
4680
4686
|
class ChrTagSelectInputComponent extends ChrInputComponent {
|
|
@@ -4689,7 +4695,6 @@ class ChrTagSelectInputComponent extends ChrInputComponent {
|
|
|
4689
4695
|
...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
|
|
4690
4696
|
this.writeValue = (value) => {
|
|
4691
4697
|
this.value.set(value);
|
|
4692
|
-
this.displayValue.set('');
|
|
4693
4698
|
};
|
|
4694
4699
|
/**
|
|
4695
4700
|
* Signal calculé renvoyant le tableau d'éléments sélectionnés
|
|
@@ -4738,10 +4743,10 @@ class ChrTagSelectInputComponent extends ChrInputComponent {
|
|
|
4738
4743
|
}
|
|
4739
4744
|
ngOnInit() {
|
|
4740
4745
|
super.ngOnInit();
|
|
4741
|
-
|
|
4746
|
+
this.displayValue.set('');
|
|
4742
4747
|
}
|
|
4743
4748
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTagSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4744
|
-
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]=\"
|
|
4749
|
+
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;justify-self:stretch;align-self:center;min-width:0}.tag-select-input-wrapper{position:relative}.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" }] }); }
|
|
4745
4750
|
}
|
|
4746
4751
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTagSelectInputComponent, decorators: [{
|
|
4747
4752
|
type: Component,
|
|
@@ -4752,7 +4757,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4752
4757
|
DataListComponent,
|
|
4753
4758
|
ChrInputData,
|
|
4754
4759
|
ChrInputDataOverlay,
|
|
4755
|
-
], 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]=\"
|
|
4760
|
+
], 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;justify-self:stretch;align-self:center;min-width:0}.tag-select-input-wrapper{position:relative}.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"] }]
|
|
4756
4761
|
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }] } });
|
|
4757
4762
|
|
|
4758
4763
|
class ChrTextAreaInputComponent extends ChrInputComponent {
|