chrv-components 1.12.125 → 1.12.127
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
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, input, ChangeDetectionStrategy, Component, computed, InjectionToken, model, ElementRef, Renderer2, Directive, Injectable, output, signal, viewChild, viewChildren, effect, ApplicationRef, EnvironmentInjector, Injector, afterNextRender, HostListener, LOCALE_ID, ViewContainerRef, ViewChild, EventEmitter, Output, ContentChildren, ChangeDetectorRef, PLATFORM_ID, TemplateRef, Input, Inject, createComponent, createEnvironmentInjector } from '@angular/core';
|
|
2
|
+
import { inject, input, ChangeDetectionStrategy, Component, computed, InjectionToken, model, ElementRef, Renderer2, Directive, Injectable, output, signal, viewChild, viewChildren, effect, ApplicationRef, EnvironmentInjector, Injector, afterNextRender, HostListener, LOCALE_ID, ViewContainerRef, ViewChild, EventEmitter, Output, ContentChildren, ChangeDetectorRef, PLATFORM_ID, DestroyRef, TemplateRef, Input, Inject, createComponent, createEnvironmentInjector } from '@angular/core';
|
|
3
3
|
import * as i2$4 from '@angular/router';
|
|
4
4
|
import { Router, RouterModule } from '@angular/router';
|
|
5
5
|
import { MatButton, MatButtonModule } from '@angular/material/button';
|
|
@@ -29,6 +29,7 @@ import { PaginationService, NgxPaginationModule } from 'ngx-pagination';
|
|
|
29
29
|
export * from 'ngx-pagination';
|
|
30
30
|
import { SortPipe, SafeHtmlPipe } from 'chrv-pipes';
|
|
31
31
|
export * from 'chrv-pipes';
|
|
32
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
32
33
|
import { HubConnectionBuilder, HttpTransportType, LogLevel, HubConnectionState } from '@microsoft/signalr';
|
|
33
34
|
import * as i1$4 from '@angular/common/http';
|
|
34
35
|
import { HttpResponse, HttpContextToken, provideHttpClient, withXhr, withInterceptors, withXsrfConfiguration, HttpEventType } from '@angular/common/http';
|
|
@@ -4002,12 +4003,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4002
4003
|
* A directive that accepts an HTMLElement's id or a TemplateRef that will show the desired element.
|
|
4003
4004
|
* If chrPopoverOnHover is set, the element will be shown as soon as the user hovers it. Otherwise, it will be triggered on click.
|
|
4004
4005
|
*/
|
|
4005
|
-
class
|
|
4006
|
+
class ChrPopoverDirective {
|
|
4006
4007
|
constructor() {
|
|
4007
4008
|
this.chrPopover = input.required(/* @ts-ignore */
|
|
4008
4009
|
...(ngDevMode ? [{ debugName: "chrPopover" }] : /* istanbul ignore next */ []));
|
|
4009
4010
|
this.chrPopoverPosition = input('right', /* @ts-ignore */
|
|
4010
4011
|
...(ngDevMode ? [{ debugName: "chrPopoverPosition" }] : /* istanbul ignore next */ []));
|
|
4012
|
+
this.chrPopoverData = input(null, /* @ts-ignore */
|
|
4013
|
+
...(ngDevMode ? [{ debugName: "chrPopoverData" }] : /* istanbul ignore next */ []));
|
|
4011
4014
|
this.chrPopoverOnHover = input(false, /* @ts-ignore */
|
|
4012
4015
|
...(ngDevMode ? [{ debugName: "chrPopoverOnHover" }] : /* istanbul ignore next */ []));
|
|
4013
4016
|
this.isOpen = signal(false, /* @ts-ignore */
|
|
@@ -4015,14 +4018,12 @@ class ChrPopoverDirectiveDirective {
|
|
|
4015
4018
|
this.renderer = inject(Renderer2);
|
|
4016
4019
|
this.hostElementRef = inject(ElementRef);
|
|
4017
4020
|
this.viewContainerRef = inject(ViewContainerRef);
|
|
4018
|
-
this.environmentInjector = inject(EnvironmentInjector);
|
|
4019
|
-
this.applicationRef = inject(ApplicationRef);
|
|
4020
4021
|
this.hostElement = computed(() => this.hostElementRef.nativeElement, /* @ts-ignore */
|
|
4021
4022
|
...(ngDevMode ? [{ debugName: "hostElement" }] : /* istanbul ignore next */ []));
|
|
4022
|
-
this.
|
|
4023
|
-
|
|
4024
|
-
|
|
4025
|
-
|
|
4023
|
+
this.isInsideSubject = new Subject();
|
|
4024
|
+
this.destroyRef = inject(DestroyRef);
|
|
4025
|
+
// private readonly isInsideHost = signal(false);
|
|
4026
|
+
// private readonly isInsideTarget = signal(false);
|
|
4026
4027
|
this._targetElementView = signal(null, /* @ts-ignore */
|
|
4027
4028
|
...(ngDevMode ? [{ debugName: "_targetElementView" }] : /* istanbul ignore next */ []));
|
|
4028
4029
|
this.targetElement = computed(() => {
|
|
@@ -4045,48 +4046,59 @@ class ChrPopoverDirectiveDirective {
|
|
|
4045
4046
|
return mayBeTemplate;
|
|
4046
4047
|
}, /* @ts-ignore */
|
|
4047
4048
|
...(ngDevMode ? [{ debugName: "targetElementId" }] : /* istanbul ignore next */ []));
|
|
4048
|
-
|
|
4049
|
-
|
|
4050
|
-
|
|
4051
|
-
};
|
|
4052
|
-
|
|
4053
|
-
|
|
4054
|
-
|
|
4055
|
-
};
|
|
4056
|
-
|
|
4057
|
-
|
|
4058
|
-
|
|
4059
|
-
|
|
4060
|
-
|
|
4061
|
-
|
|
4062
|
-
|
|
4063
|
-
|
|
4049
|
+
// private isInsideHostBoundingBox = (event: MouseEvent) => {
|
|
4050
|
+
// const hostRect = this.hostElement().getBoundingClientRect();
|
|
4051
|
+
// return this.isInsideRect(event, hostRect);
|
|
4052
|
+
// };
|
|
4053
|
+
// private isInsideTargetBoundingBox = (event: MouseEvent) => {
|
|
4054
|
+
// const trgRect = this.targetElement().getBoundingClientRect();
|
|
4055
|
+
// return this.isInsideRect(event, trgRect);
|
|
4056
|
+
// };
|
|
4057
|
+
// private isInsideRect = (event: MouseEvent, rect: DOMRect) => {
|
|
4058
|
+
// var x = event.clientX;
|
|
4059
|
+
// if (x < rect.left || x >= rect.right) return false;
|
|
4060
|
+
// var y = event.clientY;
|
|
4061
|
+
// if (y < rect.top || y >= rect.bottom) return false;
|
|
4062
|
+
// return true;
|
|
4063
|
+
// };
|
|
4064
|
+
this.setupSubject = () => {
|
|
4065
|
+
this.isInsideSubject
|
|
4066
|
+
.pipe(debounceTime$1(100), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
|
|
4067
|
+
.subscribe((isInside) => {
|
|
4068
|
+
if (!isInside) {
|
|
4069
|
+
this.hidePopover();
|
|
4070
|
+
}
|
|
4071
|
+
});
|
|
4064
4072
|
};
|
|
4065
4073
|
this.setupHostListeners = () => {
|
|
4066
4074
|
this.renderer.listen(this.hostElement(), 'mouseenter', (event) => {
|
|
4067
|
-
this.isInsideHost.set(true);
|
|
4075
|
+
// this.isInsideHost.set(true);
|
|
4068
4076
|
this.shopPopover();
|
|
4077
|
+
this.isInsideSubject.next(true);
|
|
4069
4078
|
});
|
|
4070
4079
|
this.renderer.listen(this.hostElement(), 'mouseleave', (event) => {
|
|
4071
|
-
this.isInsideHost.set(false);
|
|
4072
|
-
setTimeout(() => {
|
|
4073
|
-
|
|
4074
|
-
|
|
4075
|
-
|
|
4076
|
-
}, 100);
|
|
4080
|
+
// this.isInsideHost.set(false);
|
|
4081
|
+
// setTimeout(() => {
|
|
4082
|
+
// if (!this.isInsideTarget() && !this.isInsideHostBoundingBox(event)) {
|
|
4083
|
+
// this.hidePopover();
|
|
4084
|
+
// }
|
|
4085
|
+
// }, 100);
|
|
4086
|
+
this.isInsideSubject.next(false);
|
|
4077
4087
|
});
|
|
4078
4088
|
};
|
|
4079
4089
|
this.setupTargetListeners = () => {
|
|
4080
4090
|
this.renderer.listen(this.targetElement(), 'mouseenter', (event) => {
|
|
4081
|
-
this.isInsideTarget.set(true);
|
|
4091
|
+
// this.isInsideTarget.set(true);
|
|
4082
4092
|
this.shopPopover();
|
|
4093
|
+
this.isInsideSubject.next(true);
|
|
4083
4094
|
});
|
|
4084
4095
|
this.renderer.listen(this.targetElement(), 'mouseleave', (event) => {
|
|
4085
|
-
this.isInsideTarget.set(false);
|
|
4086
|
-
|
|
4087
|
-
|
|
4088
|
-
|
|
4089
|
-
|
|
4096
|
+
// this.isInsideTarget.set(false);
|
|
4097
|
+
this.isInsideSubject.next(false);
|
|
4098
|
+
// setTimeout(() => {
|
|
4099
|
+
// if (!this.isInsideHost() && !this.isInsideTargetBoundingBox(event))
|
|
4100
|
+
// this.hidePopover();
|
|
4101
|
+
// }, 100);
|
|
4090
4102
|
});
|
|
4091
4103
|
};
|
|
4092
4104
|
this.shopPopover = () => {
|
|
@@ -4097,21 +4109,14 @@ class ChrPopoverDirectiveDirective {
|
|
|
4097
4109
|
this.isOpen.set(false);
|
|
4098
4110
|
this.targetElement().hidePopover();
|
|
4099
4111
|
};
|
|
4100
|
-
this.hideIfOutsideHostAndTarget = (event = null) => {
|
|
4101
|
-
if (!this.isOpen())
|
|
4102
|
-
return;
|
|
4103
|
-
if (event != null) {
|
|
4104
|
-
if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey)
|
|
4105
|
-
return;
|
|
4106
|
-
}
|
|
4107
|
-
if (!this.isInsideHost() && !this.isInsideTarget())
|
|
4108
|
-
this.hidePopover();
|
|
4109
|
-
};
|
|
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
|
}
|
|
@@ -4123,6 +4128,7 @@ class ChrPopoverDirectiveDirective {
|
|
|
4123
4128
|
if (!this.hostElement)
|
|
4124
4129
|
throw 'Could not get a reference to the host element';
|
|
4125
4130
|
if (this.chrPopoverOnHover()) {
|
|
4131
|
+
this.setupSubject();
|
|
4126
4132
|
this.setupHostListeners();
|
|
4127
4133
|
this.setupTargetListeners();
|
|
4128
4134
|
}
|
|
@@ -4133,10 +4139,10 @@ class ChrPopoverDirectiveDirective {
|
|
|
4133
4139
|
this.renderer.addClass(this.targetElement(), 'glass');
|
|
4134
4140
|
this.renderer.setStyle(this.targetElement(), 'border', 'none');
|
|
4135
4141
|
}
|
|
4136
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type:
|
|
4137
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type:
|
|
4142
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4143
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: ChrPopoverDirective, 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
4144
|
}
|
|
4139
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type:
|
|
4145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrPopoverDirective, decorators: [{
|
|
4140
4146
|
type: Directive,
|
|
4141
4147
|
args: [{
|
|
4142
4148
|
selector: '[chrPopover]',
|
|
@@ -4144,7 +4150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4144
4150
|
'(keyup.escape)': 'hidePopover()',
|
|
4145
4151
|
},
|
|
4146
4152
|
}]
|
|
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 }] }] } });
|
|
4153
|
+
}], 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
4154
|
|
|
4149
4155
|
class ChrInputComponent {
|
|
4150
4156
|
constructor() {
|
|
@@ -4445,11 +4451,11 @@ class ChrInputComponent {
|
|
|
4445
4451
|
this.ensureDefaultDisplayValue();
|
|
4446
4452
|
}
|
|
4447
4453
|
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:
|
|
4454
|
+
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: ChrPopoverDirective, selector: "[chrPopover]", inputs: ["chrPopover", "chrPopoverPosition", "chrPopoverData", "chrPopoverOnHover"] }] }); }
|
|
4449
4455
|
}
|
|
4450
4456
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputComponent, decorators: [{
|
|
4451
4457
|
type: Component,
|
|
4452
|
-
args: [{ selector: 'chr-input', imports: [
|
|
4458
|
+
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<!-- 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"] }]
|
|
4453
4459
|
}], 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"] }] } });
|
|
4454
4460
|
class ChrInputIndicators {
|
|
4455
4461
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrInputIndicators, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -4771,11 +4777,11 @@ class ChrTextAreaInputComponent extends ChrInputComponent {
|
|
|
4771
4777
|
};
|
|
4772
4778
|
}
|
|
4773
4779
|
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:
|
|
4780
|
+
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: ChrPopoverDirective, selector: "[chrPopover]", inputs: ["chrPopover", "chrPopoverPosition", "chrPopoverData", "chrPopoverOnHover"] }] }); }
|
|
4775
4781
|
}
|
|
4776
4782
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ChrTextAreaInputComponent, decorators: [{
|
|
4777
4783
|
type: Component,
|
|
4778
|
-
args: [{ selector: 'chr-textarea-input', imports: [
|
|
4784
|
+
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<!-- 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"] }]
|
|
4779
4785
|
}], ctorParameters: () => [] });
|
|
4780
4786
|
|
|
4781
4787
|
class ChrSearchbarComponent {
|
|
@@ -9073,5 +9079,5 @@ const provideDebounceEventPlugin = () => [
|
|
|
9073
9079
|
* Generated bundle index. Do not edit.
|
|
9074
9080
|
*/
|
|
9075
9081
|
|
|
9076
|
-
export { Aligments, AnonymousTable, AutoDataSource, AutoDataTable, AutofocusDirective, BaseErrorDisplays, BaseTable, BreadcrumbComponent, ButtonComponent, CHR_DEACTIVATION_MODAL, CHR_DEBOUNCE_DEFAULTS, CHR_MODAL_DATA, CHR_MODAL_REF, CacheService, CachingInterceptor, CarouselComponent, ChrBaseInputComponent, ChrButtonComponent, ChrButtonLegacyComponent, ChrCheckboxComponent, ChrColorInputComponent, ChrContextMenuComponent, ChrDataTable, ChrDateInputComponent, ChrDatetimeInputComponent, ChrDeactivationGuard, ChrDebounceDirective, ChrDefaultModalComponent, ChrDeleteModalComponent, ChrDropdownComponent, ChrFile, ChrFileInputComponent, ChrFormComponent, ChrHoverDirective, ChrHoverTitleComponent, ChrHoverTitleDirective, ChrInputComponent, ChrInputData, ChrInputDataOverlay, ChrInputIndicators, ChrLegacyFileInputComponent, ChrModalComponent, ChrNiceFileInputComponent, ChrPaginatorComponent, ChrPasswordInputComponent,
|
|
9082
|
+
export { Aligments, AnonymousTable, AutoDataSource, AutoDataTable, AutofocusDirective, BaseErrorDisplays, BaseTable, BreadcrumbComponent, ButtonComponent, CHR_DEACTIVATION_MODAL, CHR_DEBOUNCE_DEFAULTS, CHR_MODAL_DATA, CHR_MODAL_REF, CacheService, CachingInterceptor, CarouselComponent, ChrBaseInputComponent, ChrButtonComponent, ChrButtonLegacyComponent, ChrCheckboxComponent, ChrColorInputComponent, ChrContextMenuComponent, ChrDataTable, ChrDateInputComponent, ChrDatetimeInputComponent, ChrDeactivationGuard, ChrDebounceDirective, ChrDefaultModalComponent, ChrDeleteModalComponent, ChrDropdownComponent, ChrFile, ChrFileInputComponent, ChrFormComponent, ChrHoverDirective, ChrHoverTitleComponent, ChrHoverTitleDirective, ChrInputComponent, ChrInputData, ChrInputDataOverlay, ChrInputIndicators, ChrLegacyFileInputComponent, ChrModalComponent, ChrNiceFileInputComponent, ChrPaginatorComponent, ChrPasswordInputComponent, ChrPopoverDirective, ChrPreventReloadDirective, ChrSearchSelectComponent, ChrSearchSelectInputComponent, ChrSearchbarComponent, ChrSeparatorComponent, ChrSpinnerComponent, ChrTableComponent, ChrTableHeaderCellComponent, ChrTagSelectComponent, ChrTagSelectInputComponent, ChrTextAreaInputComponent, ChrTextareaInputComponent, ChrToastComponent, ChrToggleInputComponent, Colors, ColorsVariables, ColumnFilter, ColumnGroup, ColumnMetadata, ContextMenuDirective, ControlClickDirective, CookiesService, CrossCellNavigationDirective, DEFAULTLIVEUPDATEMESSAGE, DEFAULT_TOAST_CONFIG, DGFilterMode, DGGroupAggregationEnum, DataExporterService, DataFormatterService, DataGrid, DataListComponent, DataService, DebounceDefaults, DebounceEventPlugin, DecimalValidatorDirective, DefaultLiveUpdateMessage, DropdownContent, DropdownTitle, ENABLE_CACHE, ENABLE_PROGRESS, EditableCell, FileService, HUBURL, INVALIDATE_CACHE, InlineSvgComponent, LegacyToastService, LiveUpdateService, LiveUpdateStatus, LoaderService, MaxDateValidatorDirective, MaxFileSizeValidator, MaxLengthValidatorDirective, MessageBanner, MinFileSizeValidator, MinLengthValidatorDirective, ModalRef, ModalService, OldSpinnerInterceptor, OutsideClickAwareDirective, ProgressInterceptor, ProgressService, RequiredValidatorDirective, SHOW_SPINNER, SKIP_SPINNER, ScrollIntoViewDirective, Spinner, SpinnerInterceptor, SpinnerService, SyncValidatorToAsync, TabComponent, TabGroupComponent, TabToEnterHandlerDirective, TabToInputHandlerDirective, TableConstraint, TableConstraintColumn, TableConstraintReference, ToastComponent, ToastDefaults, ToastRef, ToastService, TypeValidatorDirective, WaitAndStoreXsrfToken, XSRFCOOKIENAME, XSRFHEADERNAME, XsrfInterceptor, decimal, getAsyncValidators, getBackgroundColor, getBorderColor, getContrastBackgroundColor, getContrastBorderColor, getContrastTextColor, getSyncValidators, getTextColor, getValidators, getVariableColor, getVariableContrastColor, maxDate, maxFileSize, maxLength, minFileSize, minLength, provideDebounceEventPlugin, provideXsrfHttpClient, required, type };
|
|
9077
9083
|
//# sourceMappingURL=chrv-components.mjs.map
|