chrv-components 1.12.152 → 1.12.154
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
|
|
@@ -4470,11 +4470,11 @@ class ChrInputComponent {
|
|
|
4470
4470
|
this.ensureDefaultDisplayValue();
|
|
4471
4471
|
}
|
|
4472
4472
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4473
|
-
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<!--
|
|
4473
|
+
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<!-- 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<!-- 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\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;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-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;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: ChrPopoverDirective, selector: "[chrPopover]", inputs: ["chrPopover", "chrPopoverPosition", "chrPopoverData", "chrPopoverOnHover"] }] }); }
|
|
4474
4474
|
}
|
|
4475
4475
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputComponent, decorators: [{
|
|
4476
4476
|
type: Component,
|
|
4477
|
-
args: [{ selector: 'chr-input', imports: [ChrPopoverDirective], providers: [], 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<!--
|
|
4477
|
+
args: [{ selector: 'chr-input', imports: [ChrPopoverDirective], providers: [], 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<!-- 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<!-- 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\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;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-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;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"] }]
|
|
4478
4478
|
}], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }, { type: i0.Output, args: ["idChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }, { type: i0.Output, args: ["nameChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }, { type: i0.Output, args: ["displayValueChange"] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], outputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputType", required: false }] }, { type: i0.Output, args: ["outputTypeChange"] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }, { type: i0.Output, args: ["isDisabledChange"] }], isFocused: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFocused", required: false }] }, { type: i0.Output, args: ["isFocusedChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], ngControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngControl", required: false }] }, { type: i0.Output, args: ["ngControlChange"] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], input: [{ type: i0.Output, args: ["input"] }], debouncedInput: [{ type: i0.Output, args: ["debouncedInput"] }], focus: [{ type: i0.Output, args: ["focus"] }], enter: [{ type: i0.Output, args: ["enter"] }], blur: [{ type: i0.Output, args: ["blur"] }] } });
|
|
4479
4479
|
class ChrInputIndicators {
|
|
4480
4480
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputIndicators, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -4653,11 +4653,11 @@ class ChrPasswordInputComponent extends ChrInputComponent {
|
|
|
4653
4653
|
};
|
|
4654
4654
|
}
|
|
4655
4655
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPasswordInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4656
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4656
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrPasswordInputComponent, isStandalone: true, selector: "chr-password-input", usesInheritance: true, ngImport: i0, template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" [type]=\"currentType()\" [label]=\"label()\" [(displayValue)]=\"displayValue\"\n (valueChange)=\"this.value.set($event)\" [ngControl]=\"ngControl()\">\n <chr-input-indicators>\n <span class=\"material-symbols visibility-indicator error\" (mousedown)=\"setTypeText()\"\n (mouseup)=\"setTypePassword()\" (mouseleave)=\"setTypePassword()\">visibility</span>\n </chr-input-indicators>\n </chr-input>\n</div>\n\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<!-- 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>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.visibility-indicator{cursor:pointer}\n"], dependencies: [{ 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" }] }); }
|
|
4657
4657
|
}
|
|
4658
4658
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPasswordInputComponent, decorators: [{
|
|
4659
4659
|
type: Component,
|
|
4660
|
-
args: [{ selector: 'chr-password-input', imports: [ChrInputComponent, ChrInputIndicators], template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" [type]=\"currentType()\" [label]=\"label()\" [(displayValue)]=\"displayValue\"\n (valueChange)=\"this.value.set($event)\" [ngControl]=\"ngControl()\">\n <chr-input-indicators>\n <span class=\"material-symbols visibility-indicator error\" (mousedown)=\"setTypeText()\"\n (mouseup)=\"setTypePassword()\" (mouseleave)=\"setTypePassword()\">visibility</span>\n </chr-input-indicators>\n </chr-input>\n</div>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.visibility-indicator{cursor:pointer}\n"] }]
|
|
4660
|
+
args: [{ selector: 'chr-password-input', imports: [ChrInputComponent, ChrInputIndicators], template: "<div class=\"search-select-input-wrapper\">\n <chr-input [id]=\"id()\" [name]=\"name()\" [type]=\"currentType()\" [label]=\"label()\" [(displayValue)]=\"displayValue\"\n (valueChange)=\"this.value.set($event)\" [ngControl]=\"ngControl()\">\n <chr-input-indicators>\n <span class=\"material-symbols visibility-indicator error\" (mousedown)=\"setTypeText()\"\n (mouseup)=\"setTypePassword()\" (mouseleave)=\"setTypePassword()\">visibility</span>\n </chr-input-indicators>\n </chr-input>\n</div>\n\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<!-- 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>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.visibility-indicator{cursor:pointer}\n"] }]
|
|
4661
4661
|
}] });
|
|
4662
4662
|
|
|
4663
4663
|
class ChrSearchSelectInputComponent extends ChrInputComponent {
|
|
@@ -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-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>\n\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<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>", 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" }] }); }
|
|
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
|
-
|
|
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-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>\n\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<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>", 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 {
|
|
@@ -4793,11 +4794,11 @@ class ChrTextAreaInputComponent extends ChrInputComponent {
|
|
|
4793
4794
|
};
|
|
4794
4795
|
}
|
|
4795
4796
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTextAreaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4796
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrTextAreaInputComponent, isStandalone: true, selector: "chr-textarea-input", providers: [], usesInheritance: true, 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 <textarea #textArea class=\"input no-scrollbar !resize-none\" #htmlInput [id]=\"id()\" [name]=\"name()\"\n placeholder=\" \" [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\"\n [disabled]=\"isDisabled()\" (input)=\"resize(textArea);input.emit($event);onChange($event)\"\n (keyup.enter)=\"enter.emit()\">\n </textarea>\n <span class=\"indicators\">\n <!-- Indicators projection -->\n <ng-content select=\"chr-input-indicators\">\n <span></span>\n <span class=\"material-symbols\">format_paragraph</span>\n </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<!--
|
|
4797
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrTextAreaInputComponent, isStandalone: true, selector: "chr-textarea-input", providers: [], usesInheritance: true, 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 <textarea #textArea class=\"input no-scrollbar !resize-none\" #htmlInput [id]=\"id()\" [name]=\"name()\"\n placeholder=\" \" [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\"\n [disabled]=\"isDisabled()\" (input)=\"resize(textArea);input.emit($event);onChange($event)\"\n (keyup.enter)=\"enter.emit()\">\n </textarea>\n <span class=\"indicators\">\n <!-- Indicators projection -->\n <ng-content select=\"chr-input-indicators\">\n <span></span>\n <span class=\"material-symbols\">format_paragraph</span>\n </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<!-- 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<!-- 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<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;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-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;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}:host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.input-wrapper .input{height:1.5rem}\n"], dependencies: [{ kind: "directive", type: ChrPopoverDirective, selector: "[chrPopover]", inputs: ["chrPopover", "chrPopoverPosition", "chrPopoverData", "chrPopoverOnHover"] }] }); }
|
|
4797
4798
|
}
|
|
4798
4799
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTextAreaInputComponent, decorators: [{
|
|
4799
4800
|
type: Component,
|
|
4800
|
-
args: [{ selector: 'chr-textarea-input', imports: [ChrPopoverDirective], providers: [], 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 <textarea #textArea class=\"input no-scrollbar !resize-none\" #htmlInput [id]=\"id()\" [name]=\"name()\"\n placeholder=\" \" [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\"\n [disabled]=\"isDisabled()\" (input)=\"resize(textArea);input.emit($event);onChange($event)\"\n (keyup.enter)=\"enter.emit()\">\n </textarea>\n <span class=\"indicators\">\n <!-- Indicators projection -->\n <ng-content select=\"chr-input-indicators\">\n <span></span>\n <span class=\"material-symbols\">format_paragraph</span>\n </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<!--
|
|
4801
|
+
args: [{ selector: 'chr-textarea-input', imports: [ChrPopoverDirective], providers: [], 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 <textarea #textArea class=\"input no-scrollbar !resize-none\" #htmlInput [id]=\"id()\" [name]=\"name()\"\n placeholder=\" \" [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\"\n [disabled]=\"isDisabled()\" (input)=\"resize(textArea);input.emit($event);onChange($event)\"\n (keyup.enter)=\"enter.emit()\">\n </textarea>\n <span class=\"indicators\">\n <!-- Indicators projection -->\n <ng-content select=\"chr-input-indicators\">\n <span></span>\n <span class=\"material-symbols\">format_paragraph</span>\n </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<!-- 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<!-- 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<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;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-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;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}:host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.input-wrapper .input{height:1.5rem}\n"] }]
|
|
4801
4802
|
}], ctorParameters: () => [] });
|
|
4802
4803
|
|
|
4803
4804
|
class ChrToggleInputComponent extends ChrInputComponent {
|
|
@@ -4811,11 +4812,11 @@ class ChrToggleInputComponent extends ChrInputComponent {
|
|
|
4811
4812
|
super.ngOnInit();
|
|
4812
4813
|
}
|
|
4813
4814
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrToggleInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4814
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrToggleInputComponent, isStandalone: true, selector: "chr-toggle-input", usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\n <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n class=\"hidden checkbox\" type=\"checkbox\" />\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <div class=\"input toggle-wrapper\">\n <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n [attr.disabled]=\"isDisabled() || null\">\n </div>\n </div>\n\n</div>\n<!--
|
|
4815
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrToggleInputComponent, isStandalone: true, selector: "chr-toggle-input", usesInheritance: true, ngImport: i0, template: "<div class=\"input-wrapper\">\n <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n class=\"hidden checkbox\" type=\"checkbox\" />\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <div class=\"input toggle-wrapper\">\n <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n [attr.disabled]=\"isDisabled() || null\">\n </div>\n </div>\n\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<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content>\n </ng-content>\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;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-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;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}:host{display:flex;flex-direction:column;flex:0 1 auto;min-width:2.75rem;max-height:1.5rem}.relative{position:relative}.toggle:after{content:\" \";border-radius:100%;transition:all .25s linear;position:absolute;height:1.25rem;width:1.25rem;top:2px;left:2px;display:flex;align-items:center;justify-items:center;justify-content:center}.checkbox~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(0);left:2px;font-family:Material Icons;content:\"close\";background-color:color-mix(in srgb,var(--text-neutral-color) 50%,var(--neutral-color) 50%)}.checkbox:checked~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(calc(-100% - 2px));left:100%;font-family:Material Icons;content:\"check\";background-color:var(--primary-color);color:var(--primary-contrast-color)}.input-wrapper>.input.toggle-wrapper>.toggle{height:1.5rem;width:2.75rem;cursor:pointer;transition:all 10ms linear;background-color:var(--neutral-color);justify-items:center;margin-top:auto;margin-bottom:auto;border-radius:.8rem}.input-wrapper>.input.toggle-wrapper>.input.toggle[disabled]{background-color:var(--neutral-color);cursor:not-allowed}.checkbox:checked~.toggle-wrapper>.toggle{background-color:var(--secondary-color)}.hidden{display:none}\n"] }); }
|
|
4815
4816
|
}
|
|
4816
4817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrToggleInputComponent, decorators: [{
|
|
4817
4818
|
type: Component,
|
|
4818
|
-
args: [{ selector: 'chr-toggle-input', imports: [], template: "<div class=\"input-wrapper\">\n <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n class=\"hidden checkbox\" type=\"checkbox\" />\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <div class=\"input toggle-wrapper\">\n <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n [attr.disabled]=\"isDisabled() || null\">\n </div>\n </div>\n\n</div>\n<!--
|
|
4819
|
+
args: [{ selector: 'chr-toggle-input', imports: [], template: "<div class=\"input-wrapper\">\n <input #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \" [checked]=\"value()\" (change)=\"toggle($event)\"\n class=\"hidden checkbox\" type=\"checkbox\" />\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <div class=\"input toggle-wrapper\">\n <div (click)=\"!isDisabled() && htmlInput?.click()\" class=\"relative input toggle\"\n [attr.disabled]=\"isDisabled() || null\">\n </div>\n </div>\n\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<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content>\n </ng-content>\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;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-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;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}:host{display:flex;flex-direction:column;flex:0 1 auto;min-width:2.75rem;max-height:1.5rem}.relative{position:relative}.toggle:after{content:\" \";border-radius:100%;transition:all .25s linear;position:absolute;height:1.25rem;width:1.25rem;top:2px;left:2px;display:flex;align-items:center;justify-items:center;justify-content:center}.checkbox~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(0);left:2px;font-family:Material Icons;content:\"close\";background-color:color-mix(in srgb,var(--text-neutral-color) 50%,var(--neutral-color) 50%)}.checkbox:checked~.toggle-wrapper>.toggle:after{transition:all .15s linear;transform:translate(calc(-100% - 2px));left:100%;font-family:Material Icons;content:\"check\";background-color:var(--primary-color);color:var(--primary-contrast-color)}.input-wrapper>.input.toggle-wrapper>.toggle{height:1.5rem;width:2.75rem;cursor:pointer;transition:all 10ms linear;background-color:var(--neutral-color);justify-items:center;margin-top:auto;margin-bottom:auto;border-radius:.8rem}.input-wrapper>.input.toggle-wrapper>.input.toggle[disabled]{background-color:var(--neutral-color);cursor:not-allowed}.checkbox:checked~.toggle-wrapper>.toggle{background-color:var(--secondary-color)}.hidden{display:none}\n"] }]
|
|
4819
4820
|
}], ctorParameters: () => [] });
|
|
4820
4821
|
|
|
4821
4822
|
class ChrSearchbarComponent {
|