chrv-components 1.12.125 → 1.12.126
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
|
|
@@ -4008,6 +4008,8 @@ class ChrPopoverDirectiveDirective {
|
|
|
4008
4008
|
...(ngDevMode ? [{ debugName: "chrPopover" }] : /* istanbul ignore next */ []));
|
|
4009
4009
|
this.chrPopoverPosition = input('right', /* @ts-ignore */
|
|
4010
4010
|
...(ngDevMode ? [{ debugName: "chrPopoverPosition" }] : /* istanbul ignore next */ []));
|
|
4011
|
+
this.chrPopoverData = input(null, /* @ts-ignore */
|
|
4012
|
+
...(ngDevMode ? [{ debugName: "chrPopoverData" }] : /* istanbul ignore next */ []));
|
|
4011
4013
|
this.chrPopoverOnHover = input(false, /* @ts-ignore */
|
|
4012
4014
|
...(ngDevMode ? [{ debugName: "chrPopoverOnHover" }] : /* istanbul ignore next */ []));
|
|
4013
4015
|
this.isOpen = signal(false, /* @ts-ignore */
|
|
@@ -4110,8 +4112,11 @@ class ChrPopoverDirectiveDirective {
|
|
|
4110
4112
|
}
|
|
4111
4113
|
ngOnInit() {
|
|
4112
4114
|
const maybeTemplate = this.chrPopover();
|
|
4115
|
+
const templateData = this.chrPopoverData();
|
|
4113
4116
|
if (maybeTemplate instanceof TemplateRef) {
|
|
4114
|
-
const ref = this.viewContainerRef.createEmbeddedView(maybeTemplate, {
|
|
4117
|
+
const ref = this.viewContainerRef.createEmbeddedView(maybeTemplate, {
|
|
4118
|
+
$implicit: templateData,
|
|
4119
|
+
});
|
|
4115
4120
|
this._targetElementView.set(ref.rootNodes[0]);
|
|
4116
4121
|
}
|
|
4117
4122
|
}
|
|
@@ -4134,7 +4139,7 @@ class ChrPopoverDirectiveDirective {
|
|
|
4134
4139
|
this.renderer.setStyle(this.targetElement(), 'border', 'none');
|
|
4135
4140
|
}
|
|
4136
4141
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPopoverDirectiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4137
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrPopoverDirectiveDirective, isStandalone: true, selector: "[chrPopover]", inputs: { chrPopover: { classPropertyName: "chrPopover", publicName: "chrPopover", isSignal: true, isRequired: true, transformFunction: null }, chrPopoverPosition: { classPropertyName: "chrPopoverPosition", publicName: "chrPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverOnHover: { classPropertyName: "chrPopoverOnHover", publicName: "chrPopoverOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keyup.escape": "hidePopover()" } }, ngImport: i0 }); }
|
|
4142
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrPopoverDirectiveDirective, isStandalone: true, selector: "[chrPopover]", inputs: { chrPopover: { classPropertyName: "chrPopover", publicName: "chrPopover", isSignal: true, isRequired: true, transformFunction: null }, chrPopoverPosition: { classPropertyName: "chrPopoverPosition", publicName: "chrPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverData: { classPropertyName: "chrPopoverData", publicName: "chrPopoverData", isSignal: true, isRequired: false, transformFunction: null }, chrPopoverOnHover: { classPropertyName: "chrPopoverOnHover", publicName: "chrPopoverOnHover", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keyup.escape": "hidePopover()" } }, ngImport: i0 }); }
|
|
4138
4143
|
}
|
|
4139
4144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPopoverDirectiveDirective, decorators: [{
|
|
4140
4145
|
type: Directive,
|
|
@@ -4144,7 +4149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4144
4149
|
'(keyup.escape)': 'hidePopover()',
|
|
4145
4150
|
},
|
|
4146
4151
|
}]
|
|
4147
|
-
}], propDecorators: { chrPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopover", required: true }] }], chrPopoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverPosition", required: false }] }], chrPopoverOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverOnHover", required: false }] }] } });
|
|
4152
|
+
}], propDecorators: { chrPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopover", required: true }] }], chrPopoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverPosition", required: false }] }], chrPopoverData: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverData", required: false }] }], chrPopoverOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrPopoverOnHover", required: false }] }] } });
|
|
4148
4153
|
|
|
4149
4154
|
class ChrInputComponent {
|
|
4150
4155
|
constructor() {
|
|
@@ -4445,7 +4450,7 @@ class ChrInputComponent {
|
|
|
4445
4450
|
this.ensureDefaultDisplayValue();
|
|
4446
4451
|
}
|
|
4447
4452
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4448
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ChrInputComponent, isStandalone: true, selector: "chr-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, outputType: { classPropertyName: "outputType", publicName: "outputType", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isFocused: { classPropertyName: "isFocused", publicName: "isFocused", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, ngControl: { classPropertyName: "ngControl", publicName: "ngControl", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { id: "idChange", name: "nameChange", value: "valueChange", displayValue: "displayValueChange", outputType: "outputTypeChange", isDisabled: "isDisabledChange", isFocused: "isFocusedChange", ngControl: "ngControlChange", input: "input", debouncedInput: "debouncedInput", focus: "focus", enter: "enter", blur: "blur" }, providers: [], ngImport: i0, template: "<div class=\"input-wrapper\" [attr.data-state]=\"state()\">\n <div class=\"input-row\">\n <label [for]=\"id()\">\n {{label()}}\n @if(required()){\n <span class=\"required\">*</span>\n }\n </label>\n <input [multiple]=\"\" class=\"input\" #htmlInput [id]=\"id()\" [name]=\"name()\" placeholder=\" \"\n [value]=\"displayValue()\" (focus)=\"focus.emit()\" (blur)=\"blur.emit()\" [disabled]=\"isDisabled()\"\n [type]=\"type() == 'time-seconds' ? 'time' : type()\" (input)=\"input.emit($event);onChange($event)\"\n [step]=\"type() == 'time-seconds' ? 1 : step()\" (keyup.enter)=\"enter.emit()\" />\n <span class=\"indicators\">\n <!-- Indicators projection -->\n <ng-content select=\"chr-input-indicators\"></ng-content>\n @if(tooltip() != null){\n <button type=\"button\" class=\"material-symbols tooltip-indicator\"\n [chrPopover]=\"providedTooltipTemplate() || tooltipTemplate\" [chrPopoverOnHover]=\"false\"\n [chrPopoverPosition]=\"tooltipPosition()\">info</button>\n }\n </span>\n </div>\n</div>\n<!-- Default \"space-consuming\" Content Projection -->\n<div class=\"data\">\n <ng-content select=\"chr-input-data\">\n <!-- Fallback to default projection-->\n <ng-content></ng-content>\n </ng-content>\n</div>\n<!-- No-height slot. Should be used for \"overlay\" type data-->\n<div class=\"data-overlay\">\n @if(isTouched()){\n @let error = getLastError();\n @if(error != null){\n <div class=\"error card glass\">\n {{getLastError() ?? null}}\n </div>\n }\n }\n <ng-content select=\"chr-input-data-overlay\">\n </ng-content>\n</div>\n\n<ng-template #tooltipTemplate>\n <span>{{tooltip()}}</span>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;flex:1 1 auto;justify-self:stretch;align-self:center;min-width:0}.input-wrapper{--chr-input-current-color: var(--text-neutral-color);position:relative;min-height:1.5rem;display:flex;flex:1 1 auto;min-width:0;flex-direction:column;border-bottom:.125rem solid var(--chr-input-current-color)}.input-wrapper .input-row{display:flex;flex:1 1 auto;flex-wrap:nowrap}.input-wrapper .input-row .input{min-width:0}.input-wrapper .input-row .indicators{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:nowrap;min-width:fit-content;gap:.25rem;max-width:fit-content;align-items:center;padding-left:.125rem;color:var(--chr-input-current-color);font-size:.75rem!important}.input-wrapper .input-row .indicators:has(chr-input-indicators:not(:empty)),.input-wrapper .input-row .indicators:has(:nth-child(2)){border-left:.125rem solid color-mix(in srgb,var(--chr-input-current-color) 40%,transparent 60%)}.input-wrapper .tooltip-indicator{cursor:pointer;font-size:1.25rem;padding:0;color:var(--chr-input-current-color)}.input-wrapper .tooltip-indicator:hover{color:var(--primary-color)}.input-wrapper .required{color:var(--error-color)}.input-wrapper:has(.input:focus){--chr-input-current-color: var(--primary-color)}.input-wrapper[data-state=IDLE]{--chr-input-current-color: color-mix(in srgb, var(--text-neutral-color) 90%, transparent 10%) }.input-wrapper[data-state=INVALID],.input-wrapper[data-state=DISABLED]{--chr-input-current-color: var(--error-color)}.input-wrapper[data-state=PENDING],.input-wrapper[data-state=WARNING]{--chr-input-current-color: var(--warn-color)}.input-wrapper label{position:absolute;top:50%;color:var(--chr-input-current-color);transform:translateY(-50%);transition:transfom 125ms ease-in-out,position 125ms ease-in-out,top 125ms ease-in-out,font-size 125ms ease-in-out,left 125ms ease-in-out;font-size:.85rem;font-weight:700}.input-wrapper label:after{content:\":\"}.input-wrapper label:has(~.input:focus),.input-wrapper label:has(~.input:not(:placeholder-shown)){top:-.25rem;left:0;font-size:75%}.input-wrapper .input{width:100%;outline:none;border:none;padding:0;padding-right:.125rem;background-color:transparent}.data-overlay{height:0;grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap}.data{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap}.error{grid-area:data / data;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:wrap;min-width:calc(100% - .5rem);max-width:min-content;color:var(--error-color);padding:.25rem;background-color:var(--background-color);z-index:2}.error:empty{display:none}.input[disabled]{--chr-input-disabled-neutral-muted-color: color-mix(in srgb, var(--text-neutral-color) 15%, transparent 85%);background:repeating-linear-gradient(45deg,var(--chr-input-disabled-neutral-muted-color),var(--chr-input-disabled-neutral-muted-color) .625rem,var(--background-color) .625rem,var(--background-color) 1.25rem);cursor:not-allowed}.input{accent-color:var(--primary-color)}.input ::-webkit-datetime-edit,.input ::-webkit-datetime-edit-fields-wrapper,.input ::-webkit-datetime-edit-text,.input ::-webkit-datetime-edit-month-field,.input ::-webkit-datetime-edit-day-field,.input ::-webkit-datetime-edit-year-field,.input ::-webkit-inner-spin-button,.input ::-webkit-calendar-picker-indicator{place-self:end;justify-self:end;background-color:red}.input[type=range]{color:red}.input[type=range]:after{content:attr(value)}.input[type=textarea]::-webkit-scrollbar{display:none!important}.no-scrollbar{-ms-overflow-style:none!important;scrollbar-width:none!important}\n"], dependencies: [{ kind: "directive", type: ChrPopoverDirectiveDirective, selector: "[chrPopover]", inputs: ["chrPopover", "chrPopoverPosition", "chrPopoverOnHover"] }] }); }
|
|
4453
|
+
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", "chrPopoverData", "chrPopoverOnHover"] }] }); }
|
|
4449
4454
|
}
|
|
4450
4455
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputComponent, decorators: [{
|
|
4451
4456
|
type: Component,
|
|
@@ -4771,7 +4776,7 @@ class ChrTextAreaInputComponent extends ChrInputComponent {
|
|
|
4771
4776
|
};
|
|
4772
4777
|
}
|
|
4773
4778
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTextAreaInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4774
|
-
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"] }] }); }
|
|
4779
|
+
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", "chrPopoverData", "chrPopoverOnHover"] }] }); }
|
|
4775
4780
|
}
|
|
4776
4781
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTextAreaInputComponent, decorators: [{
|
|
4777
4782
|
type: Component,
|