chrv-components 1.12.116 → 1.12.118
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
|
|
@@ -4411,11 +4411,11 @@ class ChrInputComponent {
|
|
|
4411
4411
|
this.ensureOutputType();
|
|
4412
4412
|
}
|
|
4413
4413
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4414
|
-
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{
|
|
4414
|
+
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"] }] }); }
|
|
4415
4415
|
}
|
|
4416
4416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputComponent, decorators: [{
|
|
4417
4417
|
type: Component,
|
|
4418
|
-
args: [{ selector: 'chr-input', imports: [ChrPopoverDirectiveDirective], 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<!-- 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{
|
|
4418
|
+
args: [{ selector: 'chr-input', imports: [ChrPopoverDirectiveDirective], 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<!-- 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"] }]
|
|
4419
4419
|
}], 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"] }] } });
|
|
4420
4420
|
class ChrInputIndicators {
|
|
4421
4421
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputIndicators, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -4621,6 +4621,10 @@ class ChrSearchSelectInputComponent extends ChrInputComponent {
|
|
|
4621
4621
|
this.displayValue.set('' + this.display()(event));
|
|
4622
4622
|
};
|
|
4623
4623
|
}
|
|
4624
|
+
ngOnInit() {
|
|
4625
|
+
super.ngOnInit();
|
|
4626
|
+
this.displayValue.set(this.display()(this.value()));
|
|
4627
|
+
}
|
|
4624
4628
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrSearchSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4625
4629
|
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]=\"value()\" (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" }] }); }
|
|
4626
4630
|
}
|
|
@@ -4690,6 +4694,10 @@ class ChrTagSelectInputComponent extends ChrInputComponent {
|
|
|
4690
4694
|
this.onChange(value);
|
|
4691
4695
|
};
|
|
4692
4696
|
}
|
|
4697
|
+
ngOnInit() {
|
|
4698
|
+
super.ngOnInit();
|
|
4699
|
+
this.displayValue.set('');
|
|
4700
|
+
}
|
|
4693
4701
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTagSelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4694
4702
|
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]=\"value()\" (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" }] }); }
|
|
4695
4703
|
}
|
|
@@ -4716,11 +4724,11 @@ class ChrTextAreaInputComponent extends ChrInputComponent {
|
|
|
4716
4724
|
};
|
|
4717
4725
|
}
|
|
4718
4726
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTextAreaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4719
|
-
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<!-- 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: [".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{
|
|
4727
|
+
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<!-- 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: [".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}: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: ChrPopoverDirectiveDirective, selector: "[chrPopover]", inputs: ["chrPopover", "chrPopoverPosition", "chrPopoverOnHover"] }] }); }
|
|
4720
4728
|
}
|
|
4721
4729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTextAreaInputComponent, decorators: [{
|
|
4722
4730
|
type: Component,
|
|
4723
|
-
args: [{ selector: 'chr-textarea-input', imports: [ChrPopoverDirectiveDirective], 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<!-- 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: [".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{
|
|
4731
|
+
args: [{ selector: 'chr-textarea-input', imports: [ChrPopoverDirectiveDirective], 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<!-- 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: [".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}: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"] }]
|
|
4724
4732
|
}], ctorParameters: () => [] });
|
|
4725
4733
|
|
|
4726
4734
|
class ChrSearchbarComponent {
|